/* Generated from style.css by tools/build-rtl.sh — edit style.css or src/rtl-extra.css, not this file. */ /* ========================================================================= INFO SHIELD Co. — brand stylesheet Palette sampled directly from the company logo: teal #24727E · orange #F07E42 · cream #F6F0F0 · grey #5A5A5A Colour variables are overridden at runtime from Appearance > Customize. ====================================================================== */ /* ---------- self-hosted fonts ---------- */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700-normal.woff2) format('woff2')} :root{ --is-primary:#24727E; --is-primary-dark:#1A565F; --is-primary-light:#2E8C9A; --is-accent:#F07E42; --is-accent-dark:#D96632; --is-ink:#16292E; --is-body:#5A6B70; --is-muted:#7D8C91; --is-cream:#F6F0F0; --is-sand:#EFE7E4; --is-line:#E2E8E9; --is-white:#fff; --is-radius:16px; --is-radius-sm:10px; --is-radius-lg:26px; --is-shadow-sm:0 2px 10px rgba(22,41,46,.06); --is-shadow:0 14px 40px -18px rgba(22,41,46,.25); --is-shadow-lg:0 30px 70px -30px rgba(22,41,46,.38); --is-wrap:1380px; --is-wrap-text:860px; --is-gutter:20px; --is-font-head:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --is-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --is-ease:cubic-bezier(.22,.61,.36,1); } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--is-font-body); font-size:16.5px; line-height:1.68; color:var(--is-body); background:var(--is-white); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg,video{max-width:100%;height:auto;display:block} a{color:var(--is-primary);text-decoration:none} a:hover{color:var(--is-primary-dark)} ul,ol{margin:0;padding:0} figure{margin:0} button{font:inherit;cursor:pointer} /* Type scale — one ratio across the site so a page title, a section title and a card title always read as three clear steps, never as rivals. */ h1,h2,h3,h4,h5{ font-family:var(--is-font-head); color:var(--is-ink); line-height:1.18; margin:0 0 .5em; font-weight:700; letter-spacing:-.022em; text-wrap:balance; } h1{font-size:clamp(1.95rem,1.35rem + 1.9vw,2.85rem);font-weight:800;line-height:1.1} h2{font-size:clamp(1.55rem,1.2rem + 1.1vw,2.15rem);font-weight:800;line-height:1.16} h3{font-size:clamp(1.08rem,1rem + .3vw,1.24rem);letter-spacing:-.012em} h4{font-size:1.02rem;letter-spacing:-.008em} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} ::selection{background:var(--is-primary);color:#fff} /* ---------- a11y ---------- */ .screen-reader-text{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap; } .skip-link{ position:fixed;top:-80px;right:12px;z-index:10000;background:var(--is-primary); color:#fff;padding:12px 20px;border-radius:0 0 8px 8px;transition:top .2s; } .skip-link:focus{top:0;color:#fff} :focus-visible{outline:3px solid var(--is-accent);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ---------- layout ---------- */ .wrap{max-width:var(--is-wrap);margin-inline:auto;padding-inline:var(--is-gutter)} .section{padding-block:clamp(40px,4.2vw,64px)} .section--tight{padding-block:clamp(26px,2.6vw,38px)} .section--slim{padding-block:clamp(18px,1.8vw,26px)} .section--cream{background:var(--is-cream)} .section--center{text-align:center} .section-head{max-width:760px;margin:0 auto clamp(22px,2.4vw,34px);text-align:center} .section-head p{font-size:1.05rem;color:var(--is-muted)} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--is-font-head);font-size:.78rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--is-primary); margin-bottom:14px; } .eyebrow--accent{color:var(--is-accent)} .eyebrow--light{color:rgba(255,255,255,.85)} .eyebrow::before{ content:"";width:26px;height:2px;background:currentColor;border-radius:2px;opacity:.7; } /* ---------- icons ---------- */ .is-icon{width:22px;height:22px;flex:0 0 auto} /* duotone: the soft layer takes the brand orange; mono icons keep it subtle */ .is-icon .t{opacity:.2} .is-icon--duo .t{fill:var(--is-accent,#F07E42);opacity:.55} .is-service__icon .is-icon--duo .t,.is-pillar__icon .is-icon--duo .t,.is-modcard__icon .is-icon--duo .t,.is-module__cta-icon .is-icon--duo .t{opacity:.85} .is-icon-xs{width:15px;height:15px} .is-icon-sm{width:18px;height:18px} .is-icon-lg{width:40px;height:40px} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 28px;border-radius:999px;border:1.5px solid transparent; font-family:var(--is-font-head);font-weight:600;font-size:1rem;line-height:1; cursor:pointer;transition:all .22s var(--is-ease);white-space:nowrap;text-align:center; } .btn--primary{background:var(--is-primary);color:#fff;box-shadow:0 10px 24px -12px rgba(36,114,126,.8)} .btn--primary:hover{background:var(--is-primary-dark);color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(36,114,126,.9)} .btn--accent{background:var(--is-accent);color:#fff;box-shadow:0 10px 24px -12px rgba(240,126,66,.85)} .btn--accent:hover{background:var(--is-accent-dark);color:#fff;transform:translateY(-2px)} .btn--outline{background:transparent;color:var(--is-primary);border-color:var(--is-primary)} .btn--outline:hover{background:var(--is-primary);color:#fff} .btn--ghost-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45);backdrop-filter:blur(4px)} .btn--ghost-light:hover{background:#fff;color:var(--is-primary);border-color:#fff} .btn--sm{padding:11px 20px;font-size:.92rem} .btn--lg{padding:17px 34px;font-size:1.05rem} .btn--block{display:flex;width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px} .link-arrow{ display:inline-flex;align-items:center;gap:7px; font-family:var(--is-font-head);font-weight:600;font-size:.95rem;color:var(--is-primary); } .link-arrow svg{transition:transform .2s var(--is-ease)} .link-arrow:hover svg{transform:translateX(-4px)} /* ---------- top bar ---------- */ .topbar{background:var(--is-primary-dark);color:rgba(255,255,255,.88);font-size:.82rem} .topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:9px;flex-wrap:wrap} .topbar__items{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .topbar__items a,.topbar__hours{display:inline-flex;align-items:center;gap:7px;color:inherit} .topbar__items a:hover{color:var(--is-accent)} .topbar__social{display:flex;gap:10px} .topbar__social a{color:rgba(255,255,255,.8);display:grid;place-items:center} .topbar__social a:hover{color:var(--is-accent)} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:900;background:#fff; border-bottom:1px solid var(--is-line);transition:box-shadow .25s var(--is-ease); } .site-header.is-stuck{box-shadow:0 6px 24px -14px rgba(22,41,46,.35)} .site-header__inner{display:flex;align-items:center;gap:28px;padding-block:10px} .site-brand{flex:0 0 auto;display:flex;align-items:center} /* The lockup carries two Arabic lines plus two English lines, so it needs real height to stay legible — 56px turns the tagline into mush. */ .site-brand .custom-logo-link{display:block;line-height:0} /* Explicit height, not max-height: an SVG logo has no pixel size of its own, and inside a flex row a max-height-only image collapses to nothing. */ .site-brand img,.site-brand .custom-logo{ display:block;height:var(--is-logo-h,78px);width:auto;max-width:none;flex-shrink:0; transition:height .25s var(--is-ease); } .site-header.is-stuck .site-brand img, .site-header.is-stuck .site-brand .custom-logo{height:var(--is-logo-h-stuck,62px)} .site-header__actions{margin-right:auto;display:flex;align-items:center;gap:12px} .main-nav{flex:1 1 auto;display:flex;justify-content:center} .nav-menu{display:flex;align-items:center;gap:4px;list-style:none;flex-wrap:wrap} .nav-menu li{position:relative} .nav-menu > li > a{ display:inline-flex;align-items:center;padding:10px 14px;border-radius:8px; font-family:var(--is-font-head);font-weight:600;font-size:.97rem;color:var(--is-ink); transition:color .18s,background .18s; } .nav-menu > li > a:hover, .nav-menu > li.current-menu-item > a, .nav-menu > li.current-menu-ancestor > a{color:var(--is-primary);background:var(--is-cream)} .nav-menu .sub-menu{ position:absolute;top:calc(100% + 6px);right:0;min-width:248px;background:#fff; border:1px solid var(--is-line);border-radius:var(--is-radius-sm); box-shadow:var(--is-shadow);padding:8px;list-style:none;z-index:50; opacity:0;visibility:hidden;transform:translateY(8px); transition:all .2s var(--is-ease); } .nav-menu li:hover > .sub-menu, .nav-menu li.is-open > .sub-menu, .nav-menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)} .nav-menu .sub-menu a{ display:block;padding:10px 13px;border-radius:7px;font-size:.93rem; font-weight:500;color:var(--is-ink); } .nav-menu .sub-menu a:hover{background:var(--is-cream);color:var(--is-primary)} .nav-menu .sub-menu .sub-menu{top:0;right:100%;margin-right:4px} .submenu-toggle{ background:none;border:0;padding:4px;color:var(--is-muted); display:none;place-items:center;border-radius:6px; } .nav-toggle{ display:none;background:none;border:1.5px solid var(--is-line); border-radius:10px;padding:8px;color:var(--is-ink); } .nav-toggle__close{display:none} .nav-toggle.is-active .nav-toggle__open{display:none} .nav-toggle.is-active .nav-toggle__close{display:block} /* ---------- circuit-trace brand pattern (echoes the logo shield) ---------- */ .circuit-bg{position:relative;isolation:isolate} .circuit-bg::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:.3; background-image: linear-gradient(to left,rgba(255,255,255,.14) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.14) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse 70% 70% at 70% 40%,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 40%,#000 20%,transparent 75%); } /* ---------- page hero ---------- */ .page-hero{ position:relative;overflow:hidden;color:#fff;isolation:isolate; background:linear-gradient(-135deg,var(--is-primary-dark) 0%,var(--is-primary) 62%,var(--is-primary-light) 100%); padding-block:clamp(36px,4.2vw,58px); min-height:clamp(190px,17vw,250px);display:flex;align-items:center; } .page-hero > .wrap{width:100%} /* Photo title bars: the picture says what the page is about, the brand gradient on the left keeps the title readable whatever the photo is. */ .page-hero__media{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; } .page-hero--photo::before{ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(-90deg,rgba(12,44,50,.96) 0%,rgba(16,58,66,.86) 38%,rgba(20,72,82,.42) 72%,rgba(20,72,82,.18) 100%), linear-gradient(0deg,rgba(12,44,50,.45),transparent 45%); } .page-hero--photo .page-hero__pattern{opacity:.18} @media (max-width:900px){ .page-hero--photo::before{background:linear-gradient(-180deg,rgba(12,44,50,.84),rgba(12,44,50,.92))} } .page-hero__pattern{ position:absolute;inset:0;pointer-events:none;opacity:.35;z-index:-1; background-image: radial-gradient(circle at 12% 20%,rgba(240,126,66,.4),transparent 42%), linear-gradient(to left,rgba(255,255,255,.12) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.12) 1px,transparent 1px); background-size:auto,48px 48px,48px 48px; } .page-hero .wrap{position:relative} .page-hero__title{color:#fff;margin-bottom:.3em;max-width:22ch;font-size:clamp(1.85rem,1.3rem + 1.6vw,2.6rem)} .page-hero__sub{color:rgba(255,255,255,.9);font-size:1.02rem;max-width:62ch;margin:0} .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.84rem;color:rgba(255,255,255,.72);margin-bottom:16px} .crumbs a{color:rgba(255,255,255,.9)} .crumbs a:hover{color:var(--is-accent)} .crumbs__current{color:#fff;font-weight:500} .page-body{padding-block:clamp(30px,3.4vw,46px)} .page-feature{border-radius:var(--is-radius);overflow:hidden;margin-bottom:28px;box-shadow:var(--is-shadow);max-width:var(--is-wrap-text)} .page-feature img{width:100%;height:auto;display:block} /* ========================================================================= Gutenberg core block styling — so pages the client edits stay beautiful ====================================================================== */ .entry-content > *{margin-block:0 1.3em} .entry-content > *:last-child{margin-bottom:0} .entry-content h2{margin-top:1.1em} .entry-content h3{margin-top:1em} .entry-content > :first-child, .entry-content .wp-block-spacer + *, .entry-content .wp-block-group > :first-child, .entry-content .wp-block-column > :first-child{margin-top:0} .entry-content ul,.entry-content ol{padding-right:1.35em;margin-bottom:1.3em} .entry-content ul{list-style:disc} .entry-content ol{list-style:decimal} .entry-content li{margin-bottom:.5em} .entry-content li::marker{color:var(--is-primary)} .entry-content p a:not(.btn):not(.wp-block-button__link), .entry-content li a:not(.btn), .entry-content td a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .entry-content .is-service a,.entry-content .is-feat a,.entry-content .is-modcard, .entry-content .is-logowall a,.entry-content .is-logobanner a{text-decoration:none} .entry-content img{border-radius:var(--is-radius-sm)} .entry-content > .alignfull{margin-inline:calc(50% - 50vw);max-width:100vw;width:100vw} .entry-content > .alignwide{margin-inline:calc(50% - 50vw);max-width:min(100vw - 2*var(--is-gutter),1360px);width:auto} .wp-block-group.has-background{padding:clamp(28px,4vw,56px);border-radius:var(--is-radius)} .wp-block-group.alignfull.has-background{border-radius:0} .wp-block-columns{display:flex;flex-wrap:nowrap;gap:36px!important;align-items:center} .wp-block-column{flex:1 1 0%;min-width:0} .wp-block-column[style*="flex-basis"]{flex-grow:0} @media (max-width:900px){ .wp-block-columns:not(.is-not-stacked-on-mobile){flex-direction:column;gap:26px!important} .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{flex-basis:auto!important;width:100%} } .wp-block-spacer{display:block} .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px} /* Palette-backed blocks, declared locally so a stripped core stylesheet or an optimisation plugin can never flatten the page to white. */ .has-cream-background-color{background-color:var(--is-cream)} .has-sand-background-color{background-color:var(--is-sand)} .has-primary-background-color{background-color:var(--is-primary)} .has-primary-dark-background-color{background-color:var(--is-primary-dark)} .has-white-background-color{background-color:#fff} .has-primary-color{color:var(--is-primary)} .has-accent-color{color:var(--is-accent)} .has-ink-color{color:var(--is-ink)} .wp-block-cover{border-radius:var(--is-radius);overflow:hidden;min-height:380px} .alignfull > .wp-block-cover,.wp-block-cover.alignfull{border-radius:0} .wp-block-cover .wp-block-cover__inner-container{max-width:var(--is-wrap);margin-inline:auto;padding-inline:var(--is-gutter)} .wp-block-image img{border-radius:var(--is-radius-sm)} .wp-block-separator{border:0;border-top:1px solid var(--is-line);max-width:100%;opacity:1} .wp-block-quote{ border-right:4px solid var(--is-accent);padding:4px 22px 4px 0;margin-inline:0; font-size:1.1rem;color:var(--is-ink);font-style:normal; } .wp-block-pullquote{border-block:2px solid var(--is-primary);padding:28px 0} .wp-block-table table{width:100%;border-collapse:collapse} .wp-block-table td,.wp-block-table th{border:1px solid var(--is-line);padding:12px 14px} .wp-block-table th{background:var(--is-cream);font-family:var(--is-font-head);color:var(--is-ink);text-align:right} .wp-block-button{display:inline-block} .wp-block-button__link,.wp-element-button{ display:inline-flex;align-items:center;gap:9px; border-radius:999px;padding:14px 28px;border:1.5px solid transparent; background:var(--is-primary);color:#fff;text-decoration:none; font-family:var(--is-font-head);font-weight:600;line-height:1.2; transition:all .22s var(--is-ease); } .entry-content a.wp-block-button__link{text-decoration:none} .wp-block-button__link:hover{transform:translateY(-2px);background:var(--is-primary-dark);color:#fff} .wp-block-button.is-style-outline .wp-block-button__link{ background:transparent;color:var(--is-primary);border-color:currentColor; } .wp-block-button.is-style-outline .wp-block-button__link:hover{ background:var(--is-primary);color:#fff;border-color:var(--is-primary); } .wp-block-button__link.has-accent-background-color{background:var(--is-accent);color:#fff} .wp-block-button__link.has-accent-background-color:hover{background:var(--is-accent-dark)} .has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link, .has-primary-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link{color:#fff} .wp-block-media-text{border-radius:var(--is-radius);overflow:hidden} .wp-block-media-text__content{padding:clamp(20px,3vw,44px)} /* Headings inside dark/covered areas */ .has-primary-background-color,.has-primary-dark-background-color, .has-brand-deep-gradient-background,.wp-block-cover{color:#fff} .has-primary-background-color h1,.has-primary-background-color h2, .has-primary-background-color h3,.has-primary-background-color h4, .has-primary-dark-background-color h1,.has-primary-dark-background-color h2, .has-primary-dark-background-color h3,.has-primary-dark-background-color h4, .has-brand-deep-gradient-background h1,.has-brand-deep-gradient-background h2, .has-brand-deep-gradient-background h3,.has-brand-deep-gradient-background h4, .wp-block-cover h1,.wp-block-cover h2,.wp-block-cover h3{color:#fff} /* ========================================================================= Components rendered by shortcodes (INFO SHIELD Core plugin) ====================================================================== */ /* -- hero (homepage) -- */ .is-hero{ position:relative;overflow:hidden;color:#fff; background:linear-gradient(-130deg,var(--is-primary-dark) 0%,var(--is-primary) 58%,var(--is-primary-light) 100%); } .is-hero__pattern{ position:absolute;inset:0;pointer-events:none; background-image: radial-gradient(circle at 85% 25%,rgba(240,126,66,.32),transparent 45%), radial-gradient(circle at 10% 80%,rgba(46,140,154,.5),transparent 50%), linear-gradient(to left,rgba(255,255,255,.1) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.1) 1px,transparent 1px); background-size:auto,auto,56px 56px,56px 56px; } .is-hero__inner{ position:relative;display:grid;grid-template-columns:1.05fr .95fr; gap:48px;align-items:center;padding-block:clamp(56px,7vw,104px); } .is-hero__title{color:#fff;font-size:clamp(2.1rem,1.4rem + 2.3vw,3.2rem);margin-bottom:.4em;max-width:17ch} .is-hero__title em{font-style:normal;color:var(--is-accent)} .is-hero__sub{color:rgba(255,255,255,.9);font-size:clamp(1.02rem,.95rem + .35vw,1.18rem);max-width:56ch;margin-bottom:30px} .is-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px} .is-hero__badges{display:flex;flex-wrap:wrap;gap:10px} .is-hero__badges span{ display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22); font-size:.85rem;font-weight:500;backdrop-filter:blur(6px); } .is-hero__badges svg{color:var(--is-accent)} .is-hero__art{position:relative} .is-hero__art img{width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.3))} /* -- stat tiles -- */ .is-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .is-stat{ background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius); padding:28px 24px;text-align:center;box-shadow:var(--is-shadow-sm); } .is-stat__num{ display:block;font-family:var(--is-font-head);font-size:2.6rem;font-weight:800; color:var(--is-primary);line-height:1;margin-bottom:6px; } .is-stat__num .suffix{color:var(--is-accent)} .is-stat__label{font-size:.9rem;color:var(--is-muted);font-weight:500} .is-stats--onteal .is-stat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);box-shadow:none} .is-stats--onteal .is-stat__num{color:#fff} .is-stats--onteal .is-stat__label{color:rgba(255,255,255,.8)} /* -- service cards -- */ .is-services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .is-service{ position:relative;display:flex;flex-direction:column;background:#fff; border:1px solid var(--is-line);border-radius:var(--is-radius);overflow:hidden; transition:transform .25s var(--is-ease),box-shadow .25s var(--is-ease),border-color .25s; } .is-service:hover{transform:translateY(-6px);box-shadow:var(--is-shadow-lg);border-color:transparent} .is-service__media{aspect-ratio:16/10;overflow:hidden;background:var(--is-cream)} .is-service__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--is-ease)} .is-service:hover .is-service__media img{transform:scale(1.06)} .is-service__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1} .is-service__icon{ display:grid;place-items:center;width:54px;height:54px;border-radius:14px; background:linear-gradient(-135deg,var(--is-primary),var(--is-primary-light)); color:#fff;margin-bottom:16px;box-shadow:0 10px 22px -12px rgba(36,114,126,.9); } .is-service__icon svg{width:26px;height:26px} .is-service--iconly .is-service__icon{margin-top:4px} .is-service__title{font-size:1.1rem;margin-bottom:8px} .is-service__title a{color:var(--is-ink)} .is-service__title a:hover{color:var(--is-primary)} .is-service__text{font-size:.95rem;margin-bottom:14px;flex:1} .is-service__link{margin-top:auto} /* -- feature list -- */ .is-checklist{list-style:none;padding:0;display:grid;gap:13px} .is-checklist li{display:flex;gap:12px;align-items:flex-start;font-weight:500;color:var(--is-ink)} .is-checklist svg{color:var(--is-accent);margin-top:3px;flex-shrink:0} /* -- logo grids & marquee -- */ .is-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px} .is-logo-tile{ display:grid;place-items:center;min-height:104px;padding:18px;background:#fff; border:1px solid var(--is-line);border-radius:var(--is-radius-sm); transition:transform .22s var(--is-ease),box-shadow .22s var(--is-ease); } .is-logo-tile:hover{transform:translateY(-3px);box-shadow:var(--is-shadow)} .is-logo-tile img{max-height:58px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:all .25s} .is-logo-tile:hover img{filter:grayscale(0);opacity:1} .is-logo-tile__name{ font-family:var(--is-font-head);font-weight:600;font-size:.92rem; color:var(--is-primary);text-align:center; } .is-logo-tile--empty{ background:repeating-linear-gradient(-135deg,var(--is-cream),var(--is-cream) 10px,#fff 10px,#fff 20px); border-style:dashed; } .is-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .is-marquee__track{display:flex;align-items:center;gap:52px;width:max-content;animation:is-scroll 46s linear infinite} .is-marquee:hover .is-marquee__track{animation-play-state:paused} @keyframes is-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes is-scroll-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}} .is-marquee--reverse .is-marquee__track{animation-name:is-scroll-rev} /* -- customer banner: one or two drifting rows of logo cards -- */ .is-logobanner{display:grid;gap:14px} .is-logobanner .is-marquee__track{gap:14px;align-items:stretch} .is-logobanner__item{ flex:0 0 auto;width:188px;display:grid;place-items:center; background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius-sm); overflow:hidden;aspect-ratio:21/11; transition:box-shadow .22s var(--is-ease),border-color .22s; } .is-logobanner__item img{ width:100%;height:100%;object-fit:contain; filter:grayscale(1);opacity:.74;transition:filter .25s,opacity .25s; } .is-logobanner__item:hover{box-shadow:var(--is-shadow);border-color:transparent} .is-logobanner__item:hover img{filter:none;opacity:1} @media (max-width:640px){ .is-logobanner__item{width:140px} .is-logobanner{gap:10px} .is-logobanner .is-marquee__track{gap:10px} } @media (prefers-reduced-motion:reduce){ /* No drifting for anyone who has asked for less motion — the row stays put and can be scrolled by hand instead. */ .is-marquee__track{animation:none} .is-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none} } .is-marquee .is-logo-tile{ border:0;background:none;min-height:auto;padding:0;box-shadow:none!important;transform:none!important; } .is-marquee .is-logo-tile img{max-height:42px} .is-marquee .is-logo-tile__name{white-space:nowrap;color:var(--is-muted);font-size:1rem} /* -- testimonials -- */ .is-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px} .is-quote{ background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius); padding:30px;position:relative; } .is-quote__mark{display:block;color:var(--is-accent);opacity:.3;width:34px;height:34px;margin-bottom:12px} .is-quote__text{color:var(--is-ink);font-size:1.02rem;margin-bottom:18px} .is-quote__who{display:flex;align-items:center;gap:12px} .is-quote__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--is-cream)} .is-quote__name{font-family:var(--is-font-head);font-weight:700;color:var(--is-ink);font-size:.95rem;line-height:1.3} .is-quote__role{display:block;font-size:.85rem;color:var(--is-muted)} .is-quote__name{display:block} .is-quote blockquote{margin:0;padding:0;border:0} /* -- process steps -- */ .is-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;counter-reset:step} .is-step{position:relative;padding-top:12px} .is-step__num{ display:grid;place-items:center;width:46px;height:46px;border-radius:50%; background:var(--is-accent);color:#fff;font-family:var(--is-font-head); font-weight:800;font-size:1.1rem;margin-bottom:16px; } .is-step h3{font-size:1.08rem;margin-bottom:7px} .is-step p{font-size:.94rem;margin:0} /* -- accordion / FAQ -- */ .is-faq{display:grid;gap:12px;max-width:820px;margin-inline:auto} .is-faq__item{border:1px solid var(--is-line);border-radius:var(--is-radius-sm);background:#fff;overflow:hidden} .is-faq__q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px 22px;background:none;border:0;text-align:right; font-family:var(--is-font-head);font-weight:600;font-size:1.02rem;color:var(--is-ink); } .is-faq__q svg{transition:transform .25s var(--is-ease);color:var(--is-primary)} .is-faq__item.is-open .is-faq__q svg{transform:rotate(-180deg)} .is-faq__a{padding:0 22px;max-height:0;overflow:hidden;transition:max-height .3s var(--is-ease),padding .3s} .is-faq__item.is-open .is-faq__a{padding:0 22px 20px;max-height:600px} /* -- split feature block -- */ .is-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .is-split--reverse .is-split__media{order:2} .is-split__media img{border-radius:var(--is-radius);box-shadow:var(--is-shadow)} /* -- CTA band -- */ .cta-band{ position:relative;overflow:hidden;color:#fff; background:linear-gradient(-120deg,var(--is-primary-dark),var(--is-primary) 70%,var(--is-primary-light)); } .cta-band::after{ content:"";position:absolute;inset:0;opacity:.3;pointer-events:none; background-image:radial-gradient(circle at 88% 30%,rgba(240,126,66,.45),transparent 42%); } .cta-band__inner{ position:relative;display:flex;align-items:center;justify-content:space-between; gap:28px;padding-block:clamp(36px,4.5vw,56px);flex-wrap:wrap; } .cta-band h2{color:#fff;margin-bottom:6px;font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem)} .cta-band p{color:rgba(255,255,255,.88);margin:0} .cta-band__actions{display:flex;gap:12px;flex-wrap:wrap} /* ---------- footer ---------- */ .site-footer{background:var(--is-ink);color:rgba(255,255,255,.72);padding-top:clamp(48px,6vw,72px)} .footer-grid{ display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:40px;padding-bottom:44px; } .footer-col__title{color:#fff;font-size:1rem;margin-bottom:18px;letter-spacing:.02em} .footer-col--brand .custom-logo,.footer-col--brand img{height:64px;width:auto;max-width:none;margin-bottom:18px} .footer-about{font-size:.92rem;line-height:1.7} .footer-social{display:flex;gap:10px;margin-top:18px} .footer-social a{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.08);color:#fff;transition:all .22s var(--is-ease); } .footer-social a:hover{background:var(--is-accent);color:#fff;transform:translateY(-2px)} .footer-menu{list-style:none} .footer-menu li{margin-bottom:11px} .footer-menu a{font-size:.93rem;color:rgba(255,255,255,.72)} .footer-menu a:hover{color:var(--is-accent)} .footer-contact{list-style:none;display:grid;gap:15px} .footer-contact li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem} .footer-contact svg{color:var(--is-accent);margin-top:3px} .footer-contact a{color:rgba(255,255,255,.78)} .footer-contact a:hover{color:var(--is-accent)} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:20px;font-size:.82rem} .footer-bottom__inner{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center} .footer-bottom p{margin:0} .footer-keywords{opacity:.5;font-size:.76rem;flex-basis:100%} .legal-menu{display:flex;gap:18px;list-style:none} .legal-menu a{color:rgba(255,255,255,.7)} .legal-menu a:hover{color:var(--is-accent)} /* ---------- floating buttons ---------- */ .wa-float{ position:fixed;left:22px;bottom:22px;z-index:800; display:inline-flex;align-items:center;gap:10px; background:#25D366;color:#fff;padding:13px 18px;border-radius:999px; box-shadow:0 14px 34px -12px rgba(37,211,102,.9); font-family:var(--is-font-head);font-weight:600;font-size:.95rem; transition:transform .22s var(--is-ease); } .wa-float:hover{transform:translateY(-3px) scale(1.02);color:#fff} .wa-float svg{width:24px;height:24px} .to-top{ position:fixed;left:24px;bottom:88px;z-index:790;width:44px;height:44px; border-radius:50%;border:0;background:var(--is-primary);color:#fff; display:grid;place-items:center;box-shadow:var(--is-shadow); opacity:0;visibility:hidden;transform:translateY(10px); transition:all .25s var(--is-ease); } .to-top svg{transform:rotate(-180deg)} .to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)} .to-top:hover{background:var(--is-primary-dark)} /* ---------- posts & sidebar ---------- */ .post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px} .post-card{ background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius); overflow:hidden;transition:transform .25s var(--is-ease),box-shadow .25s var(--is-ease); } .post-card:hover{transform:translateY(-5px);box-shadow:var(--is-shadow-lg)} .post-card__media img{aspect-ratio:16/10;object-fit:cover;width:100%} .post-card__body{padding:24px} .post-card__meta{ font-family:var(--is-font-head);font-size:.78rem;letter-spacing:.1em; text-transform:uppercase;color:var(--is-accent);font-weight:700;margin-bottom:8px; } .post-card__title{font-size:1.18rem;margin-bottom:10px} .post-card__title a{color:var(--is-ink)} .post-card__title a:hover{color:var(--is-primary)} .with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:44px;align-items:start} .with-sidebar__aside .widget{ background:var(--is-cream);border-radius:var(--is-radius);padding:24px;margin-bottom:22px; } .widget-title{font-size:1.02rem;margin-bottom:14px} .with-sidebar__aside ul{list-style:none} .with-sidebar__aside li{margin-bottom:10px;font-size:.93rem} .wp-block-post-navigation-link,.pagination,.navigation.pagination{margin-top:44px} .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .page-numbers{ display:grid;place-items:center;min-width:42px;height:42px;padding-inline:12px; border:1px solid var(--is-line);border-radius:10px; font-family:var(--is-font-head);font-weight:600;font-size:.92rem;color:var(--is-ink); } .page-numbers:hover{border-color:var(--is-primary);color:var(--is-primary)} .page-numbers.current{background:var(--is-primary);border-color:var(--is-primary);color:#fff} /* ---------- forms ---------- */ .search-form{display:flex;gap:10px;max-width:440px;margin-inline:auto} .search-form input[type=search]{flex:1} .search-form button{ background:var(--is-primary);color:#fff;border:0;border-radius:var(--is-radius-sm); padding-inline:18px;display:grid;place-items:center; } input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search], input[type=password],input[type=number],input[type=date],select,textarea{ width:100%;padding:13px 15px;border:1.5px solid var(--is-line);border-radius:var(--is-radius-sm); font-family:inherit;font-size:.97rem;color:var(--is-ink);background:#fff; transition:border-color .2s,box-shadow .2s; } input:focus,select:focus,textarea:focus{ outline:0;border-color:var(--is-primary);box-shadow:0 0 0 4px rgba(36,114,126,.12); } textarea{min-height:140px;resize:vertical} label{display:block;font-family:var(--is-font-head);font-weight:600;font-size:.9rem;color:var(--is-ink);margin-bottom:7px} .form-field{margin-bottom:18px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form-hp{position:absolute;right:-9999px;opacity:0;height:0;overflow:hidden} .form-note{font-size:.85rem;color:var(--is-muted);margin-top:6px} .form-card{ background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius); padding:clamp(24px,3.5vw,38px);box-shadow:var(--is-shadow-sm); } .is-alert{ display:flex;gap:11px;align-items:flex-start;padding:15px 18px;border-radius:var(--is-radius-sm); margin-bottom:22px;font-size:.94rem;font-weight:500; } .is-alert--ok{background:#E6F6EF;color:#116B4A;border:1px solid #BCE6D5} .is-alert--err{background:#FDECEA;color:#A8291C;border:1px solid #F5C6C0} .is-alert--info{background:#EAF4F6;color:#1A565F;border:1px solid #C2DFE4} /* ---------- misc ---------- */ .notice-card{ max-width:680px;margin-inline:auto;text-align:center;background:var(--is-cream); border-radius:var(--is-radius-lg);padding:clamp(32px,5vw,56px); } .notice-card__icon{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#fff;color:var(--is-primary);margin-bottom:18px} .badge{ display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px; font-size:.78rem;font-weight:600;font-family:var(--is-font-head);letter-spacing:.02em; } .badge--open{background:#FFF1E8;color:#C4551F} .badge--progress{background:#EAF4F6;color:#1A565F} .badge--waiting{background:#FFF8E1;color:#8A6400} .badge--resolved{background:#E6F6EF;color:#116B4A} .badge--closed{background:#EEF1F2;color:#5A6B70} /* reveal-on-scroll */ [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s var(--is-ease),transform .6s var(--is-ease)} [data-reveal].is-in{opacity:1;transform:none} /* ------------------------------------------------------------------------- Block layout WordPress constrains every generated section to theme.json's contentSize, which is now the full page width so grids can breathe. Running text is capped separately — a 1320px line length is unreadable. ------------------------------------------------------------------------- */ /* Mirror of WordPress's constrained layout, so a full-width section lines its children up with the rest of the page even before WP's own layout CSS loads (and in the static preview build). */ .entry-content > .wp-block-group.alignfull{padding-inline:var(--is-gutter)} .entry-content > .wp-block-group.alignfull > *{ max-width:var(--is-wrap);margin-inline:auto; } .entry-content > .wp-block-group.alignfull > .alignfull{max-width:none} .page-body .entry-content > p, .page-body .entry-content > h2, .page-body .entry-content > h3, .page-body .entry-content > h4, .page-body .entry-content > ul, .page-body .entry-content > ol, .page-body .entry-content > blockquote, .page-body .entry-content > figure.wp-block-image{max-width:var(--is-wrap-text)} /* Block alignment and size utilities, declared here rather than relying on core's block-library stylesheet — the site must look right even when a caching or optimisation plugin strips it. */ .has-text-align-center{text-align:center} .has-text-align-left{text-align:right} .has-text-align-right{text-align:left} .has-small-font-size{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--is-font-head);font-weight:700;color:var(--is-accent-dark)} .has-large-font-size{font-size:1.2rem} .entry-content p.has-text-align-center{max-width:72ch;margin-inline:auto} .entry-content h2.has-text-align-center, .entry-content h3.has-text-align-center{max-width:24ch;margin-inline:auto} .entry-content p.has-small-font-size{margin-bottom:.5em} .entry-content .wp-block-buttons.is-content-justification-center{justify-content:center} /* ========================================================================= Home slider — the brand hero and the three technology lines in one band ====================================================================== */ .is-slider{position:relative;background:var(--is-primary-dark);overflow:hidden;color:#fff} .is-slider__viewport{position:relative} .is-slider__slide{ position:absolute;inset:0;opacity:0;visibility:hidden;isolation:isolate; transition:opacity .8s var(--is-ease),visibility 0s linear .8s; display:flex;align-items:center; } .is-slider__slide.is-active{position:relative;opacity:1;visibility:visible;transition:opacity .8s var(--is-ease)} .is-slider__slide > .wrap{width:100%} .is-slider__media{position:absolute;inset:0;z-index:-2} .is-slider__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 7s linear} .is-slider__slide.is-active .is-slider__media img{transform:scale(1)} .is-slider__slide::before{content:"";position:absolute;inset:0;z-index:-1} /* each tone is its own background, so consecutive slides never look alike */ .is-slider__slide--teal::before{background:linear-gradient(-100deg,rgba(10,46,52,.95) 0%,rgba(16,70,80,.82) 44%,rgba(36,114,126,.25) 100%)} .is-slider__slide--navy::before{background:linear-gradient(-100deg,rgba(8,22,44,.95) 0%,rgba(12,36,66,.8) 44%,rgba(20,60,110,.2) 100%)} .is-slider__slide--violet::before{background:linear-gradient(-100deg,rgba(28,18,48,.94) 0%,rgba(52,30,82,.78) 44%,rgba(113,75,103,.22) 100%)} .is-slider__slide--slate::before{background:linear-gradient(-100deg,rgba(20,28,32,.95) 0%,rgba(34,46,52,.8) 44%,rgba(60,80,88,.25) 100%)} /* brand slide: no photo — gradient, grid and the shield */ .is-slider__slide--brand{background: radial-gradient(ellipse 60% 70% at 78% 40%,rgba(240,126,66,.18),transparent 60%), linear-gradient(-125deg,#123F46 0%,var(--is-primary-dark) 38%,var(--is-primary) 78%,var(--is-primary-light) 100%)} .is-slider__grid{ position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:linear-gradient(to left,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 80% 80% at 70% 45%,#000 30%,transparent 80%); mask-image:radial-gradient(ellipse 80% 80% at 70% 45%,#000 30%,transparent 80%); } .is-slider__split{display:grid;grid-template-columns:1.12fr .88fr;gap:36px;align-items:center} .is-slider__art img{width:100%;max-width:470px;margin-inline:auto;filter:drop-shadow(0 26px 50px rgba(0,0,0,.32))} .is-slider__inner{ position:relative;min-height:clamp(420px,38vw,540px); display:flex;flex-direction:column;justify-content:center; padding-block:clamp(44px,4.6vw,68px) clamp(60px,5.4vw,80px);max-width:640px; } .is-slider__eyebrow{ display:inline-flex;align-items:center;gap:9px;align-self:flex-start; font-family:var(--is-font-head);font-weight:700;letter-spacing:.16em; text-transform:uppercase;font-size:.7rem;color:#FFB48A; background:rgba(240,126,66,.14);border:1px solid rgba(240,126,66,.42); padding:7px 14px;border-radius:999px;margin-bottom:18px; } .is-slider__eyebrow svg{width:15px;height:15px} .is-slider__title{ color:#fff;font-size:clamp(2rem,1.35rem + 2.1vw,3.05rem);line-height:1.08; letter-spacing:-.028em;font-weight:800;margin-bottom:.42em;max-width:16ch; } .is-slider__title em{font-style:normal;color:var(--is-accent)} .is-slider__text{color:rgba(255,255,255,.86);font-size:clamp(.98rem,.94rem + .2vw,1.08rem);line-height:1.65;margin-bottom:26px;max-width:52ch} .is-slider__actions{display:flex;flex-wrap:wrap;gap:12px} .is-slider__badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .is-slider__badges span{ display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600; padding:6px 12px;border-radius:999px;color:rgba(255,255,255,.92); background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); } .is-slider__badges svg{color:var(--is-accent);width:15px;height:15px} .is-slider__dots{position:absolute;right:0;left:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:10px} .is-slider__dot{width:30px;height:4px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.3);transition:background .25s,width .25s} .is-slider__dot.is-active{background:var(--is-accent);width:52px} .is-slider__arrow{ position:absolute;bottom:14px;z-index:3; width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3); background:rgba(10,40,46,.35);color:#fff;display:grid;place-items:center; transition:background .2s,border-color .2s;backdrop-filter:blur(4px); } .is-slider__arrow:hover{background:var(--is-accent);border-color:var(--is-accent)} .is-slider__arrow--prev{left:72px} .is-slider__arrow--prev svg{transform:rotate(-90deg)} .is-slider__arrow--next{left:22px} .is-slider__arrow--next svg{transform:rotate(90deg)} .is-slider__arrow svg{width:20px;height:20px} @media (max-width:1100px){ .is-slider__split{grid-template-columns:1fr} .is-slider__art{display:none} } @media (max-width:900px){ .is-slider__inner{min-height:400px;max-width:none;text-align:center;align-items:center;padding-bottom:70px} .is-slider__eyebrow{align-self:center} .is-slider__title,.is-slider__text{margin-inline:auto} .is-slider__actions,.is-slider__badges{justify-content:center} .is-slider__slide::before{background:linear-gradient(-180deg,rgba(10,40,46,.82),rgba(10,40,46,.92))!important} .is-slider__slide--brand::before{background:none!important} .is-slider__arrow{display:none} } /* ========================================================================= Logo walls — vendors we are certified on, and customers we run ====================================================================== */ .is-logowall{display:grid;gap:14px;grid-template-columns:repeat(6,1fr)} .is-logowall--customers{grid-template-columns:repeat(7,1fr);gap:12px} .is-logowall__item{ display:grid;place-items:center;background:#fff;border:1px solid var(--is-line); border-radius:var(--is-radius-sm);overflow:hidden;aspect-ratio:12/5; transition:transform .22s var(--is-ease),box-shadow .22s var(--is-ease),border-color .22s; } .is-logowall--customers .is-logowall__item{aspect-ratio:21/11} .is-logowall__item img{ width:100%;height:100%;object-fit:contain; filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s,transform .25s; } a.is-logowall__item:hover{transform:translateY(-3px);box-shadow:var(--is-shadow);border-color:transparent} .is-logowall__item:hover img{filter:none;opacity:1;transform:scale(1.03)} .is-logowall__group{margin-bottom:30px} .is-logowall__group:last-child{margin-bottom:0} .is-logowall__label{ display:flex;align-items:center;gap:14px;margin-bottom:14px; font-family:var(--is-font-head);font-weight:700;letter-spacing:.1em; text-transform:uppercase;font-size:.78rem;color:var(--is-primary); } .is-logowall__label::after{content:"";flex:1;height:1px;background:var(--is-line)} @media (max-width:1100px){ .is-logowall{grid-template-columns:repeat(4,1fr)} .is-logowall--customers{grid-template-columns:repeat(5,1fr)} } @media (max-width:640px){ .is-logowall{grid-template-columns:repeat(2,1fr)} .is-logowall--customers{grid-template-columns:repeat(3,1fr);gap:9px} } /* -- partner credentials row -- */ .is-credentials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .is-credentials span{ display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px; background:var(--is-cream);border:1px solid var(--is-line); font-family:var(--is-font-head);font-weight:700;font-size:.82rem;color:var(--is-ink); } .is-credentials svg{width:17px;height:17px;color:var(--is-primary)} /* -- compact trust strip (was a full-height band) -- */ .is-trustbar{ background:#fff;border-bottom:1px solid var(--is-line); padding-block:10px; } .is-trustbar__inner{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .is-trustbar__label{ font-family:var(--is-font-head);font-weight:700;letter-spacing:.1em; text-transform:uppercase;font-size:.72rem;color:var(--is-muted);white-space:nowrap; } .is-trustbar .is-marquee{flex:1;min-width:240px} .is-trustbar .is-marquee__track{gap:44px} .is-trustbar .is-marquee img{max-height:46px;width:auto;filter:grayscale(1);opacity:.85;transition:filter .25s,opacity .25s} .is-trustbar .is-marquee .is-logo-tile:hover img{filter:none;opacity:1} /* -- centred prose page (About) -- */ .is-prose{max-width:var(--is-wrap-text);margin-inline:auto;text-align:center} .is-prose h2{margin-top:0} .is-prose p{margin-inline:auto} .is-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center} .is-pillar{ background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius); padding:30px 26px;display:flex;flex-direction:column;align-items:center; } .is-pillar__icon{ display:grid;place-items:center;width:56px;height:56px;border-radius:16px; background:linear-gradient(-135deg,var(--is-primary),var(--is-primary-light)); color:#fff;margin-bottom:16px; } .is-pillar__icon svg{width:28px;height:28px} .is-pillar h3{font-size:1.14rem;margin-bottom:10px} .is-pillar p{font-size:.96rem;margin:0} @media (max-width:900px){.is-pillars{grid-template-columns:1fr}} /* ========================================================================= Odoo add-on showcases (HR Suite, WhatsApp Collections Suite) ====================================================================== */ .is-module{display:grid;gap:clamp(34px,3.6vw,52px)} .is-module__h{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);margin-bottom:18px} .is-module__intro{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,3vw,48px);align-items:center} .is-module__eyebrow{display:inline-block;font-family:var(--is-font-head);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--is-accent-dark);margin-bottom:10px} .is-module__lede h2{font-size:clamp(1.6rem,1.25rem + 1.2vw,2.2rem);max-width:22ch} .is-module__lede p{font-size:1.04rem;max-width:62ch} .is-module__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px} .is-module__actions .btn svg{width:18px;height:18px} .is-module__stats{display:grid;grid-template-columns:1fr 1fr;gap:12px} .is-module__stat{ background:linear-gradient(-150deg,var(--is-primary-dark),var(--is-primary));color:#fff; border-radius:var(--is-radius);padding:20px 18px;display:flex;flex-direction:column;gap:4px; } .is-module__stat b{font-family:var(--is-font-head);font-size:2.2rem;line-height:1;font-weight:800;letter-spacing:-.03em} .is-module__stat span{font-size:.86rem;color:rgba(255,255,255,.82);line-height:1.35} .is-featgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .is-feat{background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius);padding:20px 18px;transition:transform .2s var(--is-ease),box-shadow .2s var(--is-ease),border-color .2s} .is-feat:hover{transform:translateY(-4px);box-shadow:var(--is-shadow);border-color:transparent} .is-feat__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(36,114,126,.1);color:var(--is-primary);margin-bottom:14px} .is-feat__icon svg{width:24px;height:24px} .is-feat h4{font-size:1rem;margin-bottom:6px} .is-feat p{font-size:.88rem;line-height:1.55;margin:0} .is-flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(7,1fr);gap:0;counter-reset:none;position:relative} .is-flow__step{position:relative;padding:0 0 0 10px;display:flex;flex-direction:column;gap:4px} .is-flow__step::before{content:"";position:absolute;top:19px;right:40px;left:0;height:2px;background:repeating-linear-gradient(-90deg,var(--is-primary-light) 0 6px,transparent 6px 11px)} .is-flow__step:last-child::before{display:none} .is-flow__n{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--is-accent);color:#fff;font-family:var(--is-font-head);font-weight:800;font-size:1rem;margin-bottom:10px;box-shadow:0 0 0 5px #fff} .is-flow__step strong{font-family:var(--is-font-head);color:var(--is-ink);font-size:.95rem;line-height:1.3} .is-flow__step > span:last-child{font-size:.84rem;line-height:1.5;color:var(--is-body)} .is-module__visuals{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start} /* chart */ .is-chart{margin:0;background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius);padding:20px 20px 14px} .is-chart__head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px} .is-chart__head strong{font-family:var(--is-font-head);color:var(--is-ink);font-size:1.02rem} .is-chart__head span{font-size:.85rem;color:var(--is-muted)} .is-chart__legend{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:16px;font-size:.84rem;color:var(--is-body)} .is-chart__legend li{display:inline-flex;align-items:center;gap:7px} .is-chart__legend i{width:18px;height:0;border-top:3px solid currentColor;display:inline-block} .is-chart__legend i.is-dashed{border-top-style:dashed} .is-chart__plot{position:relative} .is-chart svg{width:100%;height:auto;display:block;overflow:visible} .is-chart__grid{stroke:#E8EDEE;stroke-width:1} .is-chart__axis{stroke:#B9C4C7;stroke-width:1} .is-chart__tick{font-size:11px;fill:#7D8C91;font-family:var(--is-font-body)} .is-chart__axislabel{font-size:11.5px;fill:#5A6B70;font-family:var(--is-font-body)} .is-chart__note{font-size:11px;fill:#7D8C91;font-family:var(--is-font-body);font-style:italic} .is-chart__cross{stroke:#16292E;stroke-opacity:.28;stroke-width:1;stroke-dasharray:3 3;opacity:0} .is-chart.is-hover .is-chart__cross{opacity:1} .is-chart__dots{opacity:0} .is-chart.is-hover .is-chart__dots{opacity:1} .is-chart__dots circle{stroke:#fff;stroke-width:2} .is-chart__tip{ position:absolute;pointer-events:none;opacity:0;transform:translate(50%,-110%); background:#16292E;color:#fff;border-radius:8px;padding:8px 11px;font-size:.8rem;line-height:1.45;white-space:nowrap; box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:opacity .12s; } .is-chart.is-hover .is-chart__tip{opacity:1} .is-chart__tip b{font-family:var(--is-font-head)} .is-chart__tip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px} .is-chart__table{margin-top:10px;font-size:.84rem} .is-chart__table summary{cursor:pointer;color:var(--is-primary);font-weight:600} .is-chart__table table{width:100%;border-collapse:collapse;margin-top:8px} .is-chart__table th,.is-chart__table td{padding:6px 8px;border-bottom:1px solid var(--is-line);text-align:right} .is-chart__fine{font-size:.78rem;color:var(--is-muted);margin-top:8px} /* illustrative app screen */ .is-appshot{margin:0;background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius);overflow:hidden;box-shadow:var(--is-shadow)} .is-appshot__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#714B67;color:#fff;font-size:.8rem;font-weight:600} .is-appshot__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4)} .is-appshot__bar span{margin-right:8px} .is-appshot__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px} .is-appshot__kpis div{background:var(--is-cream);border-radius:10px;padding:10px 12px} .is-appshot__kpis b{display:block;font-family:var(--is-font-head);font-size:1.3rem;color:var(--is-ink)} .is-appshot__kpis span{font-size:.74rem;color:var(--is-muted)} .is-appshot__table{width:100%;border-collapse:collapse;font-size:.8rem} .is-appshot__table th{text-align:right;font-weight:600;color:var(--is-muted);padding:7px 14px;border-bottom:1px solid var(--is-line);background:#FAFBFB} .is-appshot__table td{padding:8px 14px;border-bottom:1px solid #F0F3F4;color:var(--is-ink)} .is-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600} .is-chip--ok{background:#E3F4EA;color:#1E7A45} .is-chip--late{background:#FDECDC;color:#A4500F} .is-chip--ot{background:#E2F1F4;color:#14616D} .is-chip--leave{background:#EEE8F3;color:#5E3E75} .is-chip--early{background:#FBE7E6;color:#A12F2A} .is-appshot__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;font-size:.78rem;color:var(--is-muted)} .is-appshot__foot > span:first-child{display:inline-flex;align-items:center;gap:6px} .is-appshot__btn{background:#714B67;color:#fff;border-radius:6px;padding:6px 11px;font-weight:600;white-space:nowrap} .is-appshot__cap{font-size:.76rem;color:var(--is-muted);padding:0 14px 12px;font-style:italic} /* screenshot tabs */ .is-shots__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .is-shots__tab{border:1px solid var(--is-line);background:#fff;border-radius:999px;padding:9px 16px;font-weight:600;font-size:.86rem;color:var(--is-ink);transition:all .2s} .is-shots__tab:hover{border-color:var(--is-primary)} .is-shots__tab.is-active{background:var(--is-primary);color:#fff;border-color:var(--is-primary)} .is-shots__panel{display:none;margin:0} .is-shots__panel.is-active{display:block} .is-shots__frame{border-radius:var(--is-radius);overflow:hidden;border:1px solid var(--is-line);box-shadow:var(--is-shadow-lg);background:#F4F6F7} .is-shots__frame img{width:100%;height:auto;display:block} .is-shots__panel figcaption{font-size:.9rem;color:var(--is-body);margin-top:10px} /* module stack */ .is-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .is-stack__item{border-radius:var(--is-radius);padding:18px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--is-line);background:#fff} .is-stack__item--core{background:linear-gradient(-150deg,#F1F7F8,#fff);border-color:#CFE3E6} .is-stack__item strong{font-family:var(--is-font-head);color:var(--is-ink);font-size:1rem} .is-stack__item > span:last-child{font-size:.88rem;line-height:1.55} .is-stack__tag{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--is-primary);color:#fff} .is-stack__item--option .is-stack__tag{background:var(--is-sand);color:var(--is-ink)} .is-module__kuwait{display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:start} .is-module__kuwait .is-checklist li{font-weight:500;font-size:.95rem;align-items:flex-start} .is-module__kuwait .is-checklist svg{color:var(--is-accent)} .is-module__also{font-size:.88rem;color:var(--is-muted);margin-top:14px} .is-module__cta{background:linear-gradient(-150deg,var(--is-primary-dark),var(--is-primary));color:#fff;border-radius:var(--is-radius-lg);padding:26px;display:flex;flex-direction:column;gap:10px;align-items:flex-start} .is-module__cta h4{color:#fff;font-size:1.15rem;margin:0} .is-module__cta p{color:rgba(255,255,255,.85);font-size:.92rem;margin:0} .is-module__cta-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.12);color:#fff} .is-module__cta-link{color:rgba(255,255,255,.85);font-size:.86rem;text-decoration:underline} /* module cards on the Odoo page */ .is-modcards{display:grid;grid-template-columns:1fr 1fr;gap:20px} .is-modcard{ position:relative;display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:var(--is-radius-lg); background:linear-gradient(-140deg,#123F46,var(--is-primary));color:#fff;text-decoration:none!important;overflow:hidden; transition:transform .25s var(--is-ease),box-shadow .25s var(--is-ease); } .is-modcard::after{content:"";position:absolute;left:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(240,126,66,.32),transparent 70%)} .is-modcard:hover{transform:translateY(-5px);box-shadow:var(--is-shadow-lg);color:#fff} .is-modcard__icon{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:rgba(255,255,255,.12)} .is-modcard__icon svg{width:26px;height:26px} .is-modcard__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FFB48A} .is-modcard strong{font-family:var(--is-font-head);font-size:1.4rem;line-height:1.2;color:#fff} .is-modcard__text{color:rgba(255,255,255,.85)} .is-modcard__chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px} .is-modcard__chips span{font-size:.78rem;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)} .is-modcard .link-arrow{color:#fff;font-weight:600;margin-top:auto} @media (max-width:1100px){ .is-featgrid{grid-template-columns:repeat(3,1fr)} .is-flow{grid-template-columns:repeat(4,1fr);row-gap:26px} .is-flow__step:nth-child(4)::before{display:none} .is-module__visuals{grid-template-columns:1fr} } @media (max-width:900px){ .is-module__intro,.is-module__kuwait,.is-modcards{grid-template-columns:1fr} .is-stack{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .is-featgrid{grid-template-columns:1fr 1fr;gap:10px} .is-feat{padding:16px 14px} .is-flow{grid-template-columns:1fr;row-gap:16px} .is-flow__step{flex-direction:row;flex-wrap:wrap;column-gap:12px;padding:0} .is-flow__step::before{display:none} .is-flow__n{margin-bottom:0} .is-flow__step strong{flex:1;align-self:center} .is-flow__step > span:last-child{flex-basis:100%;padding-right:52px} .is-stack{grid-template-columns:1fr} .is-appshot__table th:nth-child(2),.is-appshot__table td:nth-child(2), .is-appshot__table th:nth-child(3),.is-appshot__table td:nth-child(3){display:none} } /* ========================================================================= Service page visual block ====================================================================== */ .is-svx{display:grid;gap:26px;margin-top:8px} .is-svx__split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,40px);align-items:center} .is-svx__split h2{margin-top:0} .is-svx__photo{position:relative;margin:0;border-radius:var(--is-radius-lg);overflow:hidden;box-shadow:var(--is-shadow-lg)} .is-svx__photo img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block} .is-svx__badge{ position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border-radius:999px;background:rgba(12,44,50,.82);color:#fff; font-family:var(--is-font-head);font-weight:700;font-size:.86rem;backdrop-filter:blur(6px); } .is-svx__badge svg{width:18px;height:18px} .is-svx__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .is-svx__tile{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius);padding:18px} .is-svx__tile strong{display:block;font-family:var(--is-font-head);color:var(--is-ink);margin-bottom:3px} .is-svx__tile span{font-size:.9rem;line-height:1.5} .is-svx__icon{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(-135deg,var(--is-primary),var(--is-primary-light));color:#fff} .is-svx__icon svg{width:26px;height:26px} .is-svx__icon .is-icon--duo .t{opacity:.85} .is-deliver{position:relative;background:linear-gradient(-135deg,#123F46,var(--is-primary));border-radius:var(--is-radius-lg);padding:22px 24px 24px;color:#fff;overflow:hidden} .is-deliver__title{display:block;font-family:var(--is-font-head);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:#FFB48A;margin-bottom:14px} .is-deliver__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative} .is-deliver__steps::before{content:"";position:absolute;right:24px;left:24px;top:23px;height:2px;background:linear-gradient(-90deg,rgba(255,255,255,.15),rgba(255,255,255,.15));} .is-deliver__steps::after{content:"";position:absolute;right:24px;top:22px;height:4px;width:60px;border-radius:2px;background:linear-gradient(-90deg,transparent,#F07E42,transparent);animation:is-runner 4.5s linear infinite} @keyframes is-runner{from{right:24px;opacity:0}10%{opacity:1}90%{opacity:1}to{right:calc(100% - 84px);opacity:0}} .is-deliver__steps li{position:relative;display:flex;flex-direction:column;gap:4px} .is-deliver__icon{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#0F3A41;border:2px solid rgba(255,255,255,.25);margin-bottom:8px;animation:is-pop 4.5s ease-in-out infinite;animation-delay:calc(var(--i) * 1.1s)} .is-deliver__icon svg{width:24px;height:24px;color:#fff} @keyframes is-pop{0%,70%,100%{border-color:rgba(255,255,255,.25);box-shadow:none}10%,25%{border-color:#F07E42;box-shadow:0 0 0 6px rgba(240,126,66,.18)}} .is-deliver__steps strong{font-family:var(--is-font-head);font-size:1.02rem;color:#fff} .is-deliver__steps li > span:last-child{font-size:.86rem;color:rgba(255,255,255,.78);line-height:1.5} .is-deliver{overflow:hidden} @media (max-width:900px){ .is-svx__split{grid-template-columns:1fr} .is-svx__tiles{grid-template-columns:1fr} .is-deliver__steps{grid-template-columns:1fr 1fr;row-gap:20px} .is-deliver__steps::before,.is-deliver__steps::after{display:none} } /* ========================================================================= Cybersecurity showcase ====================================================================== */ .is-cyber{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,42px);margin-top:clamp(26px,3vw,40px)} .is-cyber__hero{ display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,44px);align-items:center; background:radial-gradient(ellipse 70% 90% at 85% 40%,rgba(46,140,154,.35),transparent 60%),linear-gradient(-135deg,#0A2328,#0F3A41 55%,#14505A); border-radius:var(--is-radius-lg);padding:clamp(26px,3.4vw,46px);color:#fff;overflow:hidden; } .is-cyber__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--is-font-head);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:#FFB48A;margin-bottom:12px} .is-cyber__eyebrow svg{width:17px;height:17px} .is-cyber__lede h2{color:#fff;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);max-width:18ch} .is-cyber__lede p{color:rgba(255,255,255,.85);max-width:58ch} .is-cyber__nist{list-style:none;padding:0;margin:18px 0 8px;display:flex;flex-wrap:wrap;gap:8px} .is-cyber__nist li{padding:6px 13px;border-radius:999px;font-size:.8rem;font-weight:600;background:rgba(95,211,223,.1);border:1px solid rgba(95,211,223,.35);color:#BFF2F7;animation:is-nist 6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.2s)} @keyframes is-nist{0%,30%,100%{background:rgba(95,211,223,.1)}10%,20%{background:rgba(240,126,66,.85);border-color:#F07E42;color:#fff}} .is-cyber__fine{font-size:.78rem;color:rgba(255,255,255,.55)} .is-cyber__radar{max-width:420px;width:100%;justify-self:center} .is-radar{width:100%;height:auto;display:block;overflow:visible} .is-radar__sweep{transform-origin:200px 200px;animation:is-sweep 5s linear infinite} @keyframes is-sweep{to{transform:rotate(-360deg)}} .is-radar__threat{fill:#FF5A4E} .is-radar__ring{fill:none;stroke:#FF5A4E;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:is-ping 5s ease-out infinite;animation-delay:inherit} .is-radar__ok{fill:none;stroke:#34D399;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0} .is-radar__blip{animation:is-blip 5s linear infinite} .is-radar__blip .is-radar__threat{animation:is-threat 5s linear infinite;animation-delay:inherit} .is-radar__blip .is-radar__ok{animation:is-ok 5s linear infinite;animation-delay:inherit} @keyframes is-ping{0%{transform:scale(1);opacity:.9}40%{transform:scale(3.2);opacity:0}100%{opacity:0}} @keyframes is-threat{0%,45%{fill:#FF5A4E;opacity:1}55%,100%{fill:#34D399;opacity:.0}} @keyframes is-ok{0%,50%{opacity:0}60%,90%{opacity:1}100%{opacity:0}} .is-radar__label rect{fill:rgba(10,35,40,.8);stroke:rgba(95,211,223,.4)} .is-radar__label text{fill:#D7F6F9;font:600 11px var(--is-font-body);letter-spacing:.02em} .is-cyber__h{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);margin:0 0 16px} .is-cyber__caps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .is-cap{position:relative;background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius);padding:20px 18px;display:flex;flex-direction:column;gap:8px;overflow:hidden;transition:transform .25s var(--is-ease),box-shadow .25s,border-color .25s} .is-cap::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(-90deg,var(--is-primary),var(--is-accent));transform:scaleX(0);transform-origin:right;transition:transform .4s var(--is-ease)} .is-cap:hover{transform:translateY(-5px);box-shadow:var(--is-shadow-lg);border-color:transparent} .is-cap:hover::before{transform:scaleX(1)} .is-cap__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(-135deg,#0F3A41,var(--is-primary));color:#fff} .is-cap__icon svg{width:26px;height:26px} .is-cap__icon .is-icon--duo .t{opacity:.9} .is-cap h4{font-size:1rem;margin:4px 0 0;line-height:1.3} .is-cap p{font-size:.88rem;line-height:1.55;margin:0;flex:1} .is-cap__vendors{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .is-cap__vendors span{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--is-cream);color:var(--is-ink);border:1px solid var(--is-line)} .is-pulse{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .is-pulse li{position:relative;background:linear-gradient(-160deg,#F2F8F9,#fff);border:1px solid #D7E7EA;border-radius:var(--is-radius);padding:18px 16px;display:flex;flex-direction:column;gap:5px} .is-pulse li:not(:last-child)::after{content:"";position:absolute;left:-12px;top:38px;width:12px;height:2px;background:var(--is-accent)} .is-pulse__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--is-primary);color:#fff;margin-bottom:6px;animation:is-pop 6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.2s)} .is-pulse__icon svg{width:24px;height:24px} .is-pulse strong{font-family:var(--is-font-head);color:var(--is-ink)} .is-pulse li > span:last-child{font-size:.86rem;line-height:1.5} .is-cyber__matrix{background:#fff;border:1px solid var(--is-line);border-radius:var(--is-radius-lg);padding:clamp(18px,2.4vw,28px)} .is-cyber__matrix-head{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:baseline;margin-bottom:14px} .is-cyber__matrix-head .is-cyber__h{margin:0} .is-cyber__matrix-head p{margin:0;font-size:.92rem} .is-matrix{position:relative;display:grid;gap:6px;overflow-x:auto} .is-matrix__row{display:grid;grid-template-columns:minmax(170px,1.4fr) repeat(7,minmax(70px,1fr));gap:6px;align-items:center} .is-matrix__row--head span{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--is-muted);text-align:center;line-height:1.25} .is-matrix__row > span[role=rowheader]{font-family:var(--is-font-head);font-weight:700;font-size:.88rem;color:var(--is-ink)} .is-matrix__cell{height:30px;border-radius:7px;background:#F1F4F5;display:grid;place-items:center} .is-matrix__cell.is-on{background:linear-gradient(-135deg,var(--is-primary),var(--is-primary-light));animation:is-cell .5s var(--is-ease) both;animation-delay:calc(var(--d) * 40ms)} .is-matrix__cell.is-on i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)} @keyframes is-cell{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}} .is-cyber__vendors{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--is-cream);border-radius:var(--is-radius);padding:14px 18px} .is-cyber__vendors > span{font-family:var(--is-font-head);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--is-muted)} .is-cyber__vendors > div{display:flex;flex-wrap:wrap;gap:10px;flex:1} .is-cyber__vendors a{display:block;background:#fff;border-radius:10px;border:1px solid var(--is-line);width:120px;aspect-ratio:12/5;overflow:hidden} .is-cyber__vendors img{width:100%;height:100%;object-fit:contain} /* home band */ .is-cyberband{position:relative;overflow:hidden;color:#fff;background:radial-gradient(ellipse 60% 90% at 80% 40%,rgba(46,140,154,.4),transparent 60%),linear-gradient(-135deg,#071C20,#0F3A41 55%,#14505A)} .is-cyberband::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to left,rgba(95,211,223,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(95,211,223,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 75% 50%,#000 20%,transparent 75%)} .is-cyberband__inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,48px);align-items:center;padding-block:clamp(38px,4vw,60px)} .is-cyberband h2{color:#fff;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.35rem);max-width:20ch} .is-cyberband p{color:rgba(255,255,255,.84);max-width:58ch} .is-cyberband__chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px} .is-cyberband__chips span{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(95,211,223,.3);font-size:.84rem;font-weight:600} .is-cyberband__chips svg{width:18px;height:18px;color:#9BEAF2} .is-cyberband__actions{display:flex;flex-wrap:wrap;gap:12px} .is-cyberband__radar{max-width:400px;width:100%;justify-self:center} @media (max-width:1100px){ .is-cyber__caps{grid-template-columns:repeat(2,1fr)} .is-pulse{grid-template-columns:repeat(3,1fr)} .is-pulse li::after{display:none} } @media (max-width:900px){ .is-cyber__hero,.is-cyberband__inner{grid-template-columns:minmax(0,1fr)} .is-cyber__hero > *,.is-cyberband__inner > *{min-width:0} .is-cyber__radar,.is-cyberband__radar{width:100%;margin-inline:auto} .is-cyber__radar,.is-cyberband__radar{max-width:320px} .is-cyber__matrix-head{grid-template-columns:1fr} } @media (max-width:640px){ .is-cyber__caps{grid-template-columns:1fr} .is-pulse{grid-template-columns:1fr} .is-matrix__row{grid-template-columns:120px repeat(7,46px)} .is-matrix__row--head span{font-size:.6rem} } @media (prefers-reduced-motion:reduce){ .is-radar__sweep,.is-radar__blip,.is-radar__blip *,.is-deliver__steps::after,.is-deliver__icon,.is-pulse__icon,.is-cyber__nist li{animation:none!important} .is-radar__ok{opacity:1} } /* ========================================================================= Responsive ====================================================================== */ @media (max-width:1100px){ .is-hero__inner{grid-template-columns:1fr;text-align:center} .is-hero__title,.is-hero__sub{max-width:none;margin-inline:auto} .is-hero__actions,.is-hero__badges{justify-content:center} .is-hero__art{max-width:420px;margin-inline:auto;order:-1} .footer-grid{grid-template-columns:1fr 1fr;gap:34px} .with-sidebar{grid-template-columns:1fr} .is-stats{grid-template-columns:repeat(2,1fr)} .is-services{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .site-header__inner{gap:14px} .nav-toggle{display:grid} .header-cta span{display:none} .header-cta{padding:11px 13px} .main-nav{ position:fixed;top:0;left:0;bottom:0;right:auto;width:min(360px,88vw);background:#fff; box-shadow:10px 0 50px -20px rgba(22,41,46,.5); transform:translateX(-102%);transition:transform .3s var(--is-ease); z-index:950;padding:84px 22px 32px;overflow-y:auto;display:block; } .main-nav.is-open{transform:translateX(0)} .nav-menu{flex-direction:column;align-items:stretch;gap:2px} .nav-menu > li > a{padding:13px 12px;font-size:1.02rem} .nav-menu li{display:flex;flex-wrap:wrap;align-items:center} .nav-menu li > a{flex:1} .submenu-toggle{display:grid} .nav-menu .sub-menu{ position:static;opacity:1;visibility:visible;transform:none;box-shadow:none; border:0;border-right:2px solid var(--is-line);border-radius:0; margin:2px 12px 6px 0;padding:0 8px 0 0;width:100%; max-height:0;overflow:hidden;transition:max-height .28s var(--is-ease); } .nav-menu li.is-open > .sub-menu{max-height:620px} .nav-menu .sub-menu .sub-menu{margin-right:10px} body.nav-open{overflow:hidden} body.nav-open::after{ content:"";position:fixed;inset:0;background:rgba(22,41,46,.45);z-index:940; } .is-split{grid-template-columns:1fr} .is-split--reverse .is-split__media{order:0} .cta-band__inner{flex-direction:column;text-align:center;align-items:center} .is-services{grid-template-columns:repeat(2,1fr);gap:16px} } @media (max-width:640px){ body{font-size:16px} .site-brand img,.site-brand .custom-logo{height:var(--is-logo-h-mobile,58px)} .site-header.is-stuck .site-brand img, .site-header.is-stuck .site-brand .custom-logo{height:var(--is-logo-h-mobile,54px)} :root{--is-gutter:18px} .topbar__items{gap:14px;font-size:.78rem;justify-content:center;width:100%} .topbar__hours{display:none} .topbar__inner{justify-content:center} .topbar__social{display:none} .form-row{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .is-stats{grid-template-columns:1fr 1fr;gap:14px} .is-stat{padding:20px 14px} .is-stat__num{font-size:2.1rem} .wa-float__label{display:none} .wa-float{padding:15px;border-radius:50%} .to-top{bottom:84px;left:20px} .btn{padding:13px 22px;font-size:.95rem} .is-services{grid-template-columns:1fr} } @media print{ .topbar,.site-header,.site-footer,.cta-band,.wa-float,.to-top,.nav-toggle{display:none!important} body{color:#000;font-size:12pt} } /* protected-form note */ .form-note--secure{display:flex;align-items:center;gap:6px;margin-top:12px;color:var(--is-muted);font-size:.8rem} .form-note--secure svg{width:14px;height:14px} @media (max-width:640px){ .topbar__items a[href^="mailto"]{display:none} } /* Video slide — the animated logo intro plays first, then the slider runs. The film is shown whole (never cropped) and its edges dissolve into a matching backdrop, so it sits in a slide the same height as the others. */ .is-slider__slide--video{min-height:clamp(420px,38vw,540px); background:radial-gradient(ellipse 70% 90% at 50% 50%,#0B2226 0%,#09191C 55%,#040C0E 100%)} .is-slider__slide--video::before{display:none} .is-slider__video{position:absolute;top:0;right:50%;height:100%;width:auto;aspect-ratio:16/9;max-width:none; transform:translateX(50%);object-fit:contain;z-index:-1; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)} .is-slider__videocta{position:absolute;right:32px;bottom:22px;z-index:3;display:flex;gap:10px;flex-wrap:wrap} .is-slider__videocta .btn{padding:10px 18px;font-size:.88rem} @media (max-width:1100px){.is-slider__videocta{display:none}} @media (max-width:900px){ .is-slider__slide--video{min-height:400px} .is-slider__video{top:50%;right:0;width:100%;height:auto;transform:translateY(-50%);-webkit-mask-image:none;mask-image:none} } /* About — rooted in Kuwait */ .is-local{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,3.4vw,52px);align-items:center;text-align:right} .is-local__photo{position:relative;margin:0;border-radius:var(--is-radius-lg);overflow:hidden;box-shadow:0 24px 50px -24px rgba(10,40,46,.45);aspect-ratio:16/11} .is-local__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 6s var(--is-ease)} .is-local:hover .is-local__photo img{transform:scale(1.04)} .is-local__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(-180deg,transparent 55%,rgba(8,28,32,.55))} .is-local__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--is-font-head);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--is-accent);margin-bottom:10px} .is-local__eyebrow svg{width:17px;height:17px} .is-local__copy h2{margin-bottom:12px} .is-local__copy p{color:var(--is-muted)} .is-local__slogan{display:inline-block;margin-top:6px;font-family:var(--is-font-head);font-weight:800;font-size:1.25rem;color:var(--is-primary);border-bottom:3px solid var(--is-accent);padding-bottom:2px} .is-local__facts{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .is-local__facts li{background:var(--is-cream);border-radius:12px;padding:12px 14px;font-size:.85rem;color:var(--is-ink)} .is-local__facts strong{display:block;font-family:var(--is-font-head);font-size:1.15rem;color:var(--is-primary)} @media (max-width:900px){.is-local{grid-template-columns:minmax(0,1fr)}.is-local__facts{grid-template-columns:1fr 1fr}} /* Contact details card (Contact page) */ .is-contactinfo{background:var(--is-cream);border-radius:var(--is-radius-lg);padding:20px 22px;margin-bottom:18px} .is-contactinfo p{margin:0 0 10px} .is-contactinfo__company{font-family:var(--is-font-head);font-size:1.05rem;color:var(--is-ink)} .is-contactinfo__address{display:flex;gap:10px;align-items:flex-start;color:var(--is-muted)} .is-contactinfo__list{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid rgba(0,0,0,.07);display:grid;gap:9px} .is-contactinfo__list li{display:grid;grid-template-columns:20px 150px 1fr;align-items:center;gap:10px} .is-contactinfo .is-icon{color:var(--is-accent);width:18px;height:18px;flex:none} .is-contactinfo__label{font-weight:700;color:var(--is-ink);font-size:.92rem} .is-contactinfo__list a{color:var(--is-primary);font-weight:600;unicode-bidi:isolate} @media (max-width:480px){.is-contactinfo__list li{grid-template-columns:20px 1fr}.is-contactinfo__list li > :last-child{grid-column:2}} /* Section labels ("WHY INFO SHIELD", "WHAT WE DO" …) — larger and clearer, with an accent rule either side so they read as a title, not a footnote. */ :root{--is-eyebrow:clamp(1rem,.92rem + .35vw,1.18rem)} .has-small-font-size,.entry-content p.has-small-font-size,.eyebrow{ font-size:var(--is-eyebrow)!important;letter-spacing:.12em;font-weight:800;line-height:1.3; } .entry-content p.has-small-font-size{margin-bottom:.45em;display:flex;align-items:center;gap:12px} .entry-content p.has-small-font-size::before,.entry-content p.has-small-font-size.has-text-align-center::after{ content:"";width:34px;height:3px;border-radius:3px;background:var(--is-accent);flex:none; } .entry-content p.has-small-font-size.has-text-align-center{justify-content:center} .is-module__eyebrow,.is-cyber__eyebrow,.is-local__eyebrow{font-size:var(--is-eyebrow);letter-spacing:.11em} .is-modcard__eyebrow{font-size:.9rem;letter-spacing:.12em} .is-slider__eyebrow{font-size:.86rem;letter-spacing:.13em;padding:8px 16px} .is-cyber__eyebrow svg,.is-local__eyebrow svg{width:20px;height:20px} /* Language switch (English / العربية) */ @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC} .lang-switch{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1.5px solid rgba(36,114,126,.35); color:var(--is-primary);font-family:'IBM Plex Sans Arabic',var(--is-font-head);font-weight:700;font-size:.92rem;line-height:1;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s} .lang-switch:hover{background:var(--is-primary);border-color:var(--is-primary);color:#fff} .lang-switch .is-icon{width:17px;height:17px} @media (max-width:480px){.lang-switch{padding:7px 10px}.lang-switch .is-icon{display:none}} /* ========================================================================= Arabic (RTL) — appended to the mirrored stylesheet by tools/build-rtl.sh ====================================================================== */ @font-face{font-family:'Cairo';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cairo-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cairo-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:'Cairo';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/cairo-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} :root{ --is-font-head:'Cairo','Plus Jakarta Sans',-apple-system,'Segoe UI',Tahoma,sans-serif; --is-font-body:'IBM Plex Sans Arabic','Inter',-apple-system,'Segoe UI',Tahoma,sans-serif; } /* Arabic letters join — spacing them apart breaks the words */ *,*::before,*::after{letter-spacing:0!important} body{line-height:1.8} h1,h2,h3,h4,h5,h6,.is-slider__title,.page-hero__title{line-height:1.4} .has-small-font-size,.eyebrow,.is-slider__eyebrow,.is-cyber__eyebrow,.is-local__eyebrow,.is-module__eyebrow,.is-modcard__eyebrow,.is-trustbar__label,.is-logowall__label{text-transform:none} /* numbers, phones, emails and code read left-to-right inside Arabic text */ a[href^="tel:"],a[href^="mailto:"],.topbar a[href^="tel"] span,.is-stat__num,code,kbd,input[type=email],input[type=tel],input[type=url]{unicode-bidi:isolate;direction:ltr} input[type=email],input[type=tel],input[type=url]{text-align:right} /* arrows point the reading direction */ .link-arrow svg,.btn svg[class*="arrow"],.is-hero__actions .btn svg,.is-slider__actions .btn svg,.search-form button svg,.is-module__cta .btn svg{transform:scaleX(-1)} .link-arrow:hover svg{transform:scaleX(-1) translateX(4px)} /* photos stay photos — the dark side of the overlay follows the text */ .page-hero--photo::before{background: linear-gradient(270deg,rgba(12,44,50,.96) 0%,rgba(16,58,66,.86) 38%,rgba(20,72,82,.42) 72%,rgba(20,72,82,.18) 100%), linear-gradient(0deg,rgba(12,44,50,.45),transparent 45%)} @media (max-width:900px){.page-hero--photo::before{background:linear-gradient(180deg,rgba(12,44,50,.84),rgba(12,44,50,.92))}} .is-slider__slide--teal::before{background:linear-gradient(260deg,rgba(10,46,52,.95) 0%,rgba(16,70,80,.82) 44%,rgba(36,114,126,.25) 100%)} .is-slider__slide--navy::before{background:linear-gradient(260deg,rgba(8,22,44,.95) 0%,rgba(12,36,66,.8) 44%,rgba(20,60,110,.2) 100%)} .is-slider__slide--violet::before{background:linear-gradient(260deg,rgba(28,18,48,.94) 0%,rgba(52,30,82,.78) 44%,rgba(113,75,103,.22) 100%)} .is-slider__slide--slate::before{background:linear-gradient(260deg,rgba(20,28,32,.95) 0%,rgba(34,46,52,.8) 44%,rgba(60,80,88,.25) 100%)} @media (max-width:900px){.is-slider__slide::before{background:linear-gradient(180deg,rgba(10,40,46,.82),rgba(10,40,46,.92))!important}} /* logo bands and charts are pictures, not text: keep them left-to-right */ .is-marquee,.is-logobanner,.is-chart__plot,.is-radar,.is-matrix__row--head{direction:ltr} .is-matrix{direction:rtl} /* language switch */ .lang-switch{font-family:'IBM Plex Sans Arabic','Inter',sans-serif}