/* ========================================================= NexusVectors — site styles Themes: [data-theme="saudi-vision"] (active default) [data-theme="trust-blue"] (previous) [data-theme="midnight-ai"] [data-theme="premium-indigo"] Switch by changing data-theme on . See THEMES.md. Font: Cairo (Latin + Arabic), Google Fonts. ========================================================= */ /* ---------- THEME PRESETS ---------- */ /* Default theme variables — overridden by [data-theme="..."] below */ :root { --c-bg: #ffffff; --c-bg-tint: #f4f7f5; --c-bg-dark: #0e1a14; --c-bg-dark-2: #162720; --c-ink: #0e1a14; --c-ink-soft: #5a6760; --c-line: #e6ece8; --c-brand: #006c35; --c-brand-2: #f5b400; --c-brand-dk: #004f26; --c-logo-n: #0e1a14; --c-logo-x: #006c35; --c-grad-from: #006c35; --c-grad-to: #0e1a14; --c-shadow-brand: 0 8px 20px rgba(0,108,53,.25); --c-shadow-brand-h: 0 12px 28px rgba(0,108,53,.35); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(14,26,20,.05), 0 1px 1px rgba(14,26,20,.04); --shadow: 0 10px 30px rgba(14,26,20,.08); --shadow-lg: 0 30px 60px rgba(14,26,20,.16); --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --maxw: 1180px; } /* Arabic display: switch the whole UI to Tajawal when the user picks AR. */ html[data-lang="ar"] { --font: "Tajawal", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; } /* === Saudi Vision (active) === */ html[data-theme="saudi-vision"] { --c-bg: #ffffff; --c-bg-tint: #f4f7f5; --c-bg-dark: #0e1a14; --c-bg-dark-2: #162720; --c-ink: #0e1a14; --c-ink-soft: #5a6760; --c-line: #e6ece8; --c-brand: #006c35; --c-brand-2: #f5b400; --c-brand-dk: #004f26; --c-logo-n: #0e1a14; --c-logo-x: #006c35; --c-grad-from: #006c35; --c-grad-to: #0e1a14; --c-shadow-brand: 0 8px 20px rgba(0,108,53,.25); --c-shadow-brand-h: 0 12px 28px rgba(0,108,53,.35); } /* === Trust Blue (previous) === */ html[data-theme="trust-blue"] { --c-bg: #ffffff; --c-bg-tint: #f5f8fd; --c-bg-dark: #0a2540; --c-bg-dark-2: #112d52; --c-ink: #0a2540; --c-ink-soft: #4b5b73; --c-line: #e6ecf3; --c-brand: #2b6cff; --c-brand-2: #3ee0c8; --c-brand-dk: #1448b8; --c-logo-n: #0a2540; --c-logo-x: #2b6cff; --c-grad-from: #2b6cff; --c-grad-to: #0a2540; --c-shadow-brand: 0 8px 20px rgba(43,108,255,.25); --c-shadow-brand-h: 0 12px 28px rgba(43,108,255,.35); } /* === Midnight AI === */ html[data-theme="midnight-ai"] { --c-bg: #ffffff; --c-bg-tint: #f4f5fb; --c-bg-dark: #07091a; --c-bg-dark-2: #0e1130; --c-ink: #07091a; --c-ink-soft: #555a78; --c-line: #e9eaf3; --c-brand: #5b6cff; --c-brand-2: #00e5ff; --c-brand-dk: #2c3ddb; --c-logo-n: #07091a; --c-logo-x: #5b6cff; --c-grad-from: #5b6cff; --c-grad-to: #07091a; --c-shadow-brand: 0 8px 20px rgba(91,108,255,.25); --c-shadow-brand-h: 0 12px 28px rgba(91,108,255,.35); } /* === Premium Indigo === */ html[data-theme="premium-indigo"] { --c-bg: #ffffff; --c-bg-tint: #f7f6fc; --c-bg-dark: #1a0e3a; --c-bg-dark-2: #261556; --c-ink: #1a0e3a; --c-ink-soft: #5a4f78; --c-line: #ebe7f5; --c-brand: #6b5cff; --c-brand-2: #ffb547; --c-brand-dk: #4733cc; --c-logo-n: #1a0e3a; --c-logo-x: #6b5cff; --c-grad-from: #6b5cff; --c-grad-to: #1a0e3a; --c-shadow-brand: 0 8px 20px rgba(107,92,255,.25); --c-shadow-brand-h: 0 12px 28px rgba(107,92,255,.35); } /* =============== BASE =============== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--c-ink); background: var(--c-bg); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } a { color: var(--c-brand); text-decoration: none; } a:hover { color: var(--c-brand-dk); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; font-family: inherit; } .btn-sm { padding: 9px 16px; font-size: 14px; } .btn-primary { background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dk) 100%); color: #fff; box-shadow: var(--c-shadow-brand); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--c-shadow-brand-h); color: #fff; } .btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); } .btn-ghost:hover { border-color: var(--c-brand); color: var(--c-brand); } /* ---------- Header (dark menu + auto-shrink on scroll) ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 37, 64, .92); /* dark navy translucent */ backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); transition: background .25s ease, box-shadow .25s ease; } .site-header.scrolled { background: rgba(10, 37, 64, .98); box-shadow: 0 6px 20px rgba(0,0,0,.20); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; transition: height .25s ease; } .site-header.scrolled .header-inner { height: 58px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; letter-spacing: -.01em; font-size: 18px; transition: font-size .25s ease, gap .25s ease; } .brand:hover { color: #fff; } .site-header.scrolled .brand { font-size: 16px; gap: 8px; } .brand-logo { height: 40px; width: auto; display: block; transition: height .25s ease; } .site-header.scrolled .brand-logo { height: 30px; } /* Logo N stroke white on the dark header */ .site-header .brand-logo { --c-logo-n: #ffffff; } .brand-name { white-space: nowrap; color: #fff; } /* ---------- Primary nav (with dropdowns) ---------- */ .primary-nav > ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; } .primary-nav > ul > li { position: relative; display: flex; align-items: center; } .primary-nav a, .primary-nav .nav-trigger { color: var(--c-ink); font-weight: 600; font-size: 15px; line-height: 1; height: 32px; padding: 6px 0; margin: 0; position: relative; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font-family: inherit; vertical-align: middle; transition: color .15s ease, font-size .25s ease; } /* Inside the dark header (desktop nav row), text is white */ @media (min-width: 721px) { .site-header .primary-nav > ul > li > a, .site-header .primary-nav .nav-trigger { color: #fff; } .site-header.scrolled .primary-nav > ul > li > a, .site-header.scrolled .primary-nav .nav-trigger { font-size: 14px; } } /* Lang toggle on dark header */ .site-header .lang-toggle { color: #fff; border-color: rgba(255,255,255,.20); } .site-header .lang-toggle:hover { color: var(--c-brand-2); border-color: var(--c-brand-2); } /* Mobile menu icon bars white on dark header */ .site-header .menu-toggle span { background: #fff; } .primary-nav a::after, .primary-nav .nav-trigger::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--c-brand); transition: right .2s ease; } .primary-nav a:hover, .primary-nav .nav-trigger:hover { color: var(--c-brand); } .primary-nav a:hover::after, .primary-nav .nav-trigger:hover::after { right: 0; } .primary-nav a.active { color: var(--c-brand); } .primary-nav a.active::after { right: 0; } /* Caret toggle — separate small button sits next to the .nav-trigger link */ .has-dd > .nav-caret { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 32px; padding: 0; margin-inline-start: -2px; border: 0; background: transparent; cursor: pointer; color: inherit; } .has-dd > .nav-caret .caret { display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; } .has-dd.open > .nav-caret .caret { transform: rotate(-135deg) translateY(2px); } .has-dd > .nav-caret:hover { color: var(--c-brand); } /* The title link and caret button sit flush together — looks like one item */ .has-dd > .nav-trigger { padding-inline-end: 0; } .dropdown { position: absolute; top: calc(100% + 12px); inset-inline-start: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 14px; min-width: 320px; max-width: 520px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; } .has-dd:hover > .dropdown, .has-dd:focus-within > .dropdown, .has-dd.open > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-grid { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; } .dropdown-grid.wide { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .dropdown-grid li { margin: 0; border: 0; display: block; } .dropdown-grid a { display: block; width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--c-ink); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .15s ease, color .15s ease; text-align: start; } .dropdown-grid a::after { display: none; } .dropdown-grid a:hover { background: var(--c-bg-tint); color: var(--c-brand); } .dropdown-grid .dd-desc { display: block; font-size: 12px; font-weight: 400; color: var(--c-ink-soft); margin-top: 2px; } .header-actions { display: flex; align-items: center; gap: 12px; } .lang-toggle { background: transparent; border: 1px solid var(--c-line); color: var(--c-ink); border-radius: 999px; padding: 7px 14px; font-weight: 700; cursor: pointer; font-size: 13px; transition: border-color .15s ease, color .15s ease; font-family: inherit; } .lang-toggle:hover { border-color: var(--c-brand); color: var(--c-brand); } .menu-toggle { display: none; background: transparent; border: none; cursor: pointer; width: 40px; height: 40px; position: relative; padding: 0; } .menu-toggle span { position: absolute; left: 8px; right: 8px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease, top .2s ease; } .menu-toggle span:nth-child(1) { top: 13px; } .menu-toggle span:nth-child(2) { top: 19px; } .menu-toggle span:nth-child(3) { top: 25px; } .menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: 96px 0 104px; background: #fff; } .hero-bg { position: absolute; inset: -10% -10% auto -10%; height: 80%; background: radial-gradient(45% 60% at 18% 28%, color-mix(in srgb, var(--c-brand) 14%, transparent), transparent 60%), radial-gradient(40% 60% at 82% 22%, color-mix(in srgb, var(--c-brand-2) 14%, transparent), transparent 60%), radial-gradient(80% 50% at 50% 0%, rgba(14,14,16,.04), transparent 70%); z-index: 0; pointer-events: none; } .hero-inner { position: relative; z-index: 1; text-align: center; } .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--c-brand); font-weight: 800; margin: 0 0 14px; } .hero-title { font-size: clamp(38px, 6.2vw, 68px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 18px; font-weight: 900; } .hero-title span { display: block; } .grad-text { background: linear-gradient(135deg, var(--c-grad-from) 0%, var(--c-grad-to) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { max-width: 740px; margin: 0 auto 28px; font-size: 18px; color: var(--c-ink-soft); } .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero-stats { list-style: none; padding: 56px 0 0; margin: 56px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 920px; gap: 8px; border-top: 1px solid var(--c-line); } .hero-stats li { text-align: center; position: relative; padding: 0 18px; } .hero-stats li + li::before { content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: 1px; background: var(--c-line); } .hero-stats strong { display: block; font-size: clamp(40px, 6vw, 64px); font-weight: 900; color: var(--c-brand); letter-spacing: -.02em; line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .hero-stats span { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--c-ink-soft); } html[data-lang="ar"] .hero-stats span { text-transform: none; letter-spacing: 0; font-size: 14px; } /* ---------- Giant brand watermark behind sections — scroll-driven zoom in/out ---------- */ .has-watermark { position: relative; overflow: hidden; } .brand-watermark { position: absolute; inset-inline-end: 2%; top: 50%; width: min(60vw, 640px); pointer-events: none; z-index: 0; color: var(--c-brand); opacity: 0; transform: translateY(-50%) scale(.8); will-change: transform, opacity; /* No CSS transition — JS updates transform + opacity on every scroll frame */ } /* Hero / page-header gets a bigger watermark + one-time fade-in (NOT scroll-driven) */ .hero.has-watermark .brand-watermark, .page-header.has-watermark .brand-watermark { width: min(70vw, 760px); transition: opacity 1.4s ease, transform 1.6s cubic-bezier(.16,.84,.44,1); transform: translateY(-50%) scale(.85) rotate(-2deg); } html[dir="rtl"] .hero.has-watermark .brand-watermark, html[dir="rtl"] .page-header.has-watermark .brand-watermark { transform: translateY(-50%) scale(.85) rotate(2deg); } .hero.has-watermark.in-view .brand-watermark, .page-header.has-watermark.in-view .brand-watermark { opacity: .14; transform: translateY(-50%) scale(1) rotate(0); } @media (prefers-reduced-motion: reduce) { .hero.has-watermark .brand-watermark, .page-header.has-watermark .brand-watermark { transition: none; } } /* Left-side variant — JS toggles .watermark-alt on alternating sections. Shifted slightly inward so the whole NV mark stays inside the viewport. */ .has-watermark.watermark-alt .brand-watermark { inset-inline-end: auto; inset-inline-start: 2%; } html[dir="rtl"] .brand-watermark { inset-inline-end: auto; inset-inline-start: 2%; } html[dir="rtl"] .has-watermark.watermark-alt .brand-watermark { inset-inline-start: auto; inset-inline-end: 2%; } .brand-watermark svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 30px color-mix(in srgb, var(--c-brand) 25%, transparent)); } /* Inner content must sit above the watermark */ .has-watermark > .container, .has-watermark > .hero-inner, .has-watermark > .hero-bg, .has-watermark > .header-inner, .has-watermark > header, .has-watermark > nav { position: relative; z-index: 1; } @media (max-width: 720px) { .brand-watermark { display: none; } } html[dir="rtl"] .has-watermark.watermark-alt .brand-watermark { inset-inline-start: auto; inset-inline-end: -10%; transform: translateY(-50%) scale(.85) rotate(-2deg); } html[dir="rtl"] .has-watermark.watermark-alt.in-view .brand-watermark { transform: translateY(-50%) scale(1) rotate(0); } /* ---------- Sections ---------- */ .section { padding: 96px 0; } .section-tint { background: var(--c-bg-tint); } .section-dark { background: var(--c-bg-dark); color: #e6e6ea; } .section-dark a { color: var(--c-brand-2); } .section-head { text-align: center; max-width: 780px; margin: 0 auto 56px; } .section-head h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; margin: 0; letter-spacing: -.01em; font-weight: 900; } .section-head .section-sub { margin-top: 14px; color: var(--c-ink-soft); font-size: 17px; } .section-head.light .eyebrow { color: var(--c-brand-2); } .section-head.light h2 { color: #fff; } .two-col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; } .two-col h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 0; line-height: 1.15; letter-spacing: -.01em; font-weight: 900; } .lead p { color: var(--c-ink-soft); font-size: 17px; margin: 0 0 16px; } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; margin-bottom: 56px; } .about-lead .lead-p { font-size: 19px; color: var(--c-ink); margin: 0 0 16px; font-weight: 500; } .about-lead p { color: var(--c-ink-soft); margin: 0 0 16px; } .about-aside { display: grid; gap: 18px; } .mv { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 24px; border-left: 4px solid var(--c-brand); } html[dir="rtl"] .mv { border-left: none; border-right: 4px solid var(--c-brand); } .mv h4 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--c-brand); } .mv p { margin: 0; color: var(--c-ink-soft); } .about-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .value { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 22px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .value:hover { border-color: color-mix(in srgb, var(--c-brand) 35%, transparent); transform: translateY(-2px); box-shadow: var(--shadow); } .value-num { font-size: 12px; font-weight: 800; color: var(--c-brand); letter-spacing: .14em; } .value h5 { margin: 6px 0 6px; font-size: 16px; font-weight: 800; } .value p { margin: 0; color: var(--c-ink-soft); font-size: 14.5px; } /* ---------- Grids ---------- */ .grid { display: grid; gap: 24px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ---------- Cards ---------- */ .card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c-brand) 30%, transparent); } .card h3 { margin: 12px 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; } .card p { color: var(--c-ink-soft); margin: 0; } .card-ico { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c-brand) 18%, transparent), color-mix(in srgb, var(--c-brand-2) 22%, transparent)); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; padding: 10px; } .card-ico.has-img { padding: 8px; } .card-ico img { width: 100%; height: 100%; object-fit: contain; /* Tint the line-icon PNGs to brand color */ filter: brightness(0) saturate(100%) invert(22%) sepia(94%) saturate(2447%) hue-rotate(133deg) brightness(96%) contrast(101%); } /* Per-theme icon tint — keeps the line-icon glyphs on-brand */ html[data-theme="trust-blue"] .card-ico img { filter: brightness(0) saturate(100%) invert(36%) sepia(81%) saturate(3920%) hue-rotate(216deg) brightness(101%) contrast(101%); } html[data-theme="midnight-ai"] .card-ico img { filter: brightness(0) saturate(100%) invert(43%) sepia(88%) saturate(2693%) hue-rotate(220deg) brightness(102%) contrast(101%); } html[data-theme="premium-indigo"].card-ico img { filter: brightness(0) saturate(100%) invert(38%) sepia(86%) saturate(4193%) hue-rotate(232deg) brightness(102%) contrast(101%); } .bullets { list-style: none; padding: 0; margin: 14px 0 0; } .bullets li { position: relative; padding-inline-start: 22px; margin-block: 6px; font-size: 14.5px; color: var(--c-ink); } .bullets li::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--c-brand); transform: rotate(45deg); } /* ---------- Page header (sub-pages) ---------- */ .page-header { position: relative; overflow: hidden; padding: 80px 0 56px; background: radial-gradient(40% 60% at 18% 28%, color-mix(in srgb, var(--c-brand) 12%, transparent), transparent 60%), radial-gradient(35% 55% at 82% 22%, color-mix(in srgb, var(--c-brand-2) 12%, transparent), transparent 60%), #fff; border-bottom: 1px solid var(--c-line); } /* Set --page-bg as inline style; the photo sits under brand radials + a white wash for legibility */ .page-header.with-bg { padding: 120px 0 80px; background: radial-gradient(40% 60% at 18% 28%, color-mix(in srgb, var(--c-brand) 18%, transparent), transparent 60%), radial-gradient(35% 55% at 82% 22%, color-mix(in srgb, var(--c-brand-2) 18%, transparent), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.92) 100%), var(--page-bg) center/cover no-repeat; } .hero.with-bg { background: radial-gradient(45% 60% at 18% 28%, color-mix(in srgb, var(--c-brand) 14%, transparent), transparent 60%), radial-gradient(40% 60% at 82% 22%, color-mix(in srgb, var(--c-brand-2) 14%, transparent), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.88) 100%), var(--page-bg) center/cover no-repeat; } .page-header .container { position: relative; z-index: 1; } .page-header .eyebrow { color: var(--c-brand); } .page-header h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; font-weight: 900; max-width: 900px; } .page-header .lede { max-width: 760px; font-size: 18px; color: var(--c-ink-soft); margin: 0; } .crumbs { font-size: 13px; color: var(--c-ink-soft); margin-bottom: 14px; } .crumbs a { color: var(--c-ink-soft); } .crumbs a:hover { color: var(--c-brand); } .crumbs .sep { margin: 0 8px; opacity: .55; } /* ---------- Product page detail ---------- */ .product-hero { padding: 56px 0 48px; } .product-hero .product-badge { font-size: 12px; padding: 6px 14px; margin-bottom: 16px; } .product-hero h1 { margin: 0 0 14px; } .product-hero .accent { color: var(--c-brand); } .product-hero .product-cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; } .feature { position: relative; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 24px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c-brand), var(--c-brand-2)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .feature:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(10,37,64,.10), 0 0 0 1px color-mix(in srgb, var(--c-brand) 40%, transparent); border-color: transparent; } .feature:hover::before { transform: scaleX(1); } .feature .num { font-size: 12px; font-weight: 800; color: var(--c-brand); letter-spacing: .14em; transition: letter-spacing .25s ease; } .feature:hover .num { letter-spacing: .22em; } .feature h4 { font-size: 18px; margin: 8px 0 6px; font-weight: 800; } .feature p { margin: 0; color: var(--c-ink-soft); font-size: 14.5px; } /* ---------- Animated particles background (constellation effect) ---------- */ .has-particles { position: relative; overflow: hidden; } .has-particles > .particles-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .7; } .has-particles > .particles-bg canvas { display: block; width: 100% !important; height: 100% !important; } .has-particles > .container, .has-particles > header, .has-particles > div { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .has-particles > .particles-bg { display: none; } } .product-detail-section h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 900; margin: 0 0 16px; letter-spacing: -.01em; } .product-detail-section p { color: var(--c-ink-soft); font-size: 17px; max-width: 760px; } .spec-table { width: 100%; border-collapse: collapse; margin-top: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; } .spec-table th, .spec-table td { padding: 14px 18px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--c-line); font-size: 14.5px; } .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; } .spec-table th { font-weight: 700; color: var(--c-ink); width: 32%; background: var(--c-bg-tint); } .spec-table td { color: var(--c-ink-soft); } /* ---------- Related products strip ---------- */ .related { background: var(--c-bg-tint); padding: 64px 0; } .related h3 { font-size: 22px; font-weight: 800; margin: 0 0 24px; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .related-card { display: block; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 20px; color: var(--c-ink); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .related-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c-brand) 35%, transparent); color: var(--c-ink); } .related-card .product-badge { font-size: 11px; padding: 3px 8px; margin-bottom: 8px; } .related-card h4 { margin: 0 0 4px; font-size: 17px; font-weight: 800; } .related-card .accent { color: var(--c-brand); } .related-card p { margin: 0; font-size: 14px; color: var(--c-ink-soft); } /* ---------- Linkable product cards on home/products ---------- */ .product-card-link { display: block; color: inherit; text-decoration: none; } .product-card-link:hover { color: inherit; } /* ---------- Service detail rows (services.html) ---------- */ .service-detail { padding: 48px 0; border-bottom: 1px solid var(--c-line); } .service-detail:last-of-type { border-bottom: 0; } .service-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .service-detail-grid h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 900; margin: 0 0 12px; letter-spacing: -.01em; } .service-detail-grid > div > p { color: var(--c-ink-soft); font-size: 17px; } .service-detail-grid .card-ico { margin-bottom: 14px; } /* ---------- Insights list ---------- */ .insight-list .post { display: grid; grid-template-columns: 1fr; } .insight-list .post-body h3 a { color: var(--c-ink); } .insight-list .post-body h3 a:hover { color: var(--c-brand); } .insight-meta { font-size: 13px; color: var(--c-ink-soft); margin-top: 12px; } /* ---------- Job list ---------- */ .jobs { display: grid; gap: 16px; } .job { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; transition: border-color .2s ease, transform .2s ease; } .job:hover { border-color: color-mix(in srgb, var(--c-brand) 35%, transparent); transform: translateY(-1px); } .job h4 { margin: 0; font-size: 17px; font-weight: 800; } .job .meta { font-size: 14px; color: var(--c-ink-soft); margin-top: 4px; } .job .tags { display: flex; gap: 6px; flex-wrap: wrap; } .job .tag { background: var(--c-bg-tint); } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } .contact-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 28px; margin-bottom: 16px; } .contact-card h4 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--c-brand); } .contact-card p { margin: 0; color: var(--c-ink-soft); } .contact-form { display: grid; gap: 12px; background: #fff; border: 1px solid var(--c-line); padding: 28px; border-radius: var(--radius); } .contact-form label { font-size: 13px; font-weight: 700; color: var(--c-ink); margin-bottom: -4px; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; background: var(--c-bg-tint); border: 1px solid var(--c-line); color: var(--c-ink); padding: 12px 14px; border-radius: 12px; font-family: inherit; font-size: 15px; outline: none; transition: border-color .15s ease, background .15s ease; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--c-brand); background: #fff; } /* ---------- Products ---------- */ .products-grid .product-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .products-grid .product-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--c-brand) 0%, var(--c-brand-2) 100%); } .products-grid .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c-brand) 35%, transparent); } .product-head { margin-bottom: 12px; } .product-badge { display: inline-block; background: color-mix(in srgb, var(--c-brand) 12%, transparent); color: var(--c-brand); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; } .product-head h3 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.01em; } .product-head .accent { color: var(--c-brand); } .products-grid .product-card p { color: var(--c-ink-soft); margin: 0; } /* ---------- Pillars ---------- */ .pillars .pillar { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 28px; position: relative; overflow: hidden; } .pillars .pillar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--c-brand), var(--c-brand-2)); } html[dir="rtl"] .pillars .pillar::before { left: auto; right: 0; } .pillar-num { font-size: 12px; font-weight: 800; color: var(--c-brand); letter-spacing: .14em; } .pillar h4 { font-size: 18px; margin: 8px 0 6px; font-weight: 800; } .pillar p { color: var(--c-ink-soft); margin: 0; font-size: 14.5px; } /* ---------- Why grid (dark section) ---------- */ .why-grid .why { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 28px; } .why h4 { color: #fff; margin: 0 0 8px; font-size: 18px; font-weight: 800; } .why p { color: #b9b9c2; margin: 0; } /* ---------- Logo strip ---------- */ .logo-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .logo-strip li { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); height: 96px; padding: 16px 20px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--c-ink-soft); letter-spacing: .04em; transition: color .15s ease, border-color .15s ease, transform .15s ease; } .logo-strip li:hover { color: var(--c-brand); border-color: color-mix(in srgb, var(--c-brand) 35%, transparent); transform: translateY(-2px); } .logo-strip img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: .75; transition: filter .2s ease, opacity .2s ease; } .logo-strip li:hover img { filter: grayscale(0%); opacity: 1; } /* ---------- Clients strip (logos of customers we've worked with) ---------- */ .clients-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; } .clients-strip li { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); height: 88px; padding: 14px 18px; display: flex; align-items: center; justify-content: center; } .clients-strip img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(100%); opacity: .7; transition: filter .2s ease, opacity .2s ease, transform .2s ease; } .clients-strip li:hover img { filter: grayscale(0%); opacity: 1; transform: scale(1.04); } @media (max-width: 980px) { .clients-strip { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 720px) { .clients-strip { grid-template-columns: repeat(2, 1fr); } } /* ---------- Image side-by-side block (About/Careers content sections) ---------- */ .image-block { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .image-block.reverse { grid-template-columns: .95fr 1.05fr; } .image-block .image-block-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 3; } .image-block h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 900; margin: 0 0 14px; letter-spacing: -.01em; } .image-block p { color: var(--c-ink-soft); font-size: 17px; } @media (max-width: 980px) { .image-block, .image-block.reverse { grid-template-columns: 1fr; gap: 24px; } } /* ---------- Insights ---------- */ .post { padding: 0; overflow: hidden; } .post-img { height: 160px; background: var(--c-bg-dark); } .post-img-1 { background: linear-gradient(135deg, var(--c-bg-dark) 0%, var(--c-brand) 100%); } .post-img-2 { background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%); } .post-img-3 { background: linear-gradient(135deg, var(--c-brand-2) 0%, var(--c-bg-dark) 100%); } .post-body { padding: 24px 28px 28px; } .tag { display: inline-block; background: color-mix(in srgb, var(--c-brand) 12%, transparent); color: var(--c-brand); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } /* ---------- CTA band ---------- */ .cta-band { background: radial-gradient(60% 80% at 80% 20%, color-mix(in srgb, var(--c-brand) 35%, transparent), transparent 70%), linear-gradient(135deg, var(--c-bg-dark) 0%, var(--c-bg-dark-2) 100%); color: #fff; padding: 80px 0; } .cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .cta-band h2 { color: #fff; font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 12px; letter-spacing: -.01em; font-weight: 900; } .cta-band p { color: #cfcfd4; margin: 0; } .cta-form { display: grid; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); padding: 24px; border-radius: var(--radius-lg); } .cta-form input, .cta-form textarea { width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; padding: 12px 14px; border-radius: 12px; font-family: inherit; font-size: 15px; outline: none; transition: border-color .15s ease, background .15s ease; } .cta-form input::placeholder, .cta-form textarea::placeholder { color: #a8a8b2; } .cta-form input:focus, .cta-form textarea:focus { border-color: var(--c-brand-2); background: rgba(255,255,255,.12); } .cta-form button { width: 100%; } /* ---------- Footer ---------- */ .site-footer { background: var(--c-bg-dark); color: #c0c0c8; padding: 64px 0 24px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); } .site-footer h5 { color: #fff; font-size: 14px; margin: 0 0 14px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin: 8px 0; } .site-footer a { color: #c0c0c8; } .site-footer a:hover { color: var(--c-brand-2); } .foot-brand .brand { color: #fff; } .foot-brand p { margin-top: 14px; color: #8d8d96; max-width: 280px; } /* footer logo gets a light-on-dark treatment via theme override */ .brand-logo-light { --c-logo-n: #ffffff; } .foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; color: #7d7d86; flex-wrap: wrap; gap: 8px; } .foot-bottom a { color: #7d7d86; } .foot-bottom a:hover { color: #fff; } /* ---------- RTL adjustments ---------- */ html[dir="rtl"] .hero-cta, html[dir="rtl"] .header-actions, html[dir="rtl"] .primary-nav ul { direction: rtl; } html[dir="rtl"] .hero-stats strong, html[dir="rtl"] .pillar-num, html[dir="rtl"] .value-num { letter-spacing: 0; } html[dir="rtl"] .eyebrow { letter-spacing: .04em; } html[dir="rtl"] .products-grid .product-card::before { left: 0; right: 0; } html[dir="rtl"] .dropdown { inset-inline-start: auto; inset-inline-end: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .primary-nav ul { gap: 16px; } .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } .footer-grid > div:nth-child(5) { grid-column: 1 / -1; } } @media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .logo-strip { grid-template-columns: repeat(3, 1fr); } .two-col { grid-template-columns: 1fr; gap: 16px; } .cta-inner { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:nth-child(5) { grid-column: auto; } .about-grid { grid-template-columns: 1fr; gap: 24px; } .about-values { grid-template-columns: 1fr 1fr; } .hero-stats { grid-template-columns: 1fr 1fr; } .feature-row { grid-template-columns: 1fr 1fr; } .related-grid { grid-template-columns: 1fr 1fr; } .service-detail-grid { grid-template-columns: 1fr; gap: 16px; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .section { padding: 64px 0; } .hero { padding: 56px 0 72px; } /* ===== Mobile menu — rewritten clean with !important so nothing can break it ===== */ .primary-nav { position: fixed !important; top: 76px !important; left: 0 !important; right: 0 !important; bottom: auto !important; background: #fff !important; border-bottom: 1px solid var(--c-line); /* Hidden by default; toggled via .open. We use visibility + pointer-events on top of the transform so the panel can NEVER bleed through when it's supposed to be closed. */ transform: translateY(-110%); visibility: hidden !important; pointer-events: none !important; opacity: 0; transition: transform .25s ease, opacity .2s ease; box-shadow: var(--shadow); max-height: calc(100vh - 76px); overflow-y: auto; z-index: 49; } .primary-nav.open { transform: translateY(0); visibility: visible !important; pointer-events: auto !important; opacity: 1; } .primary-nav > ul { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important; padding: 8px 16px 16px !important; list-style: none !important; width: 100% !important; } .primary-nav > ul > li { display: block !important; position: static !important; width: 100% !important; margin: 0 !important; border-bottom: 1px solid var(--c-line); } .primary-nav > ul > li:last-child { border-bottom: none; } .primary-nav a, .primary-nav .nav-trigger { display: block !important; width: 100% !important; height: auto !important; line-height: 1.4 !important; padding: 16px 4px !important; font-size: 16px !important; color: var(--c-ink) !important; text-align: start; box-sizing: border-box; } .primary-nav a::after, .primary-nav .nav-trigger::after { display: none !important; } /* No caret toggle, no inline dropdown on mobile — title link navigates to overview */ .primary-nav .nav-caret, .primary-nav .dropdown, .has-dd > .dropdown, .has-dd > .nav-caret { display: none !important; } /* ===== Header actions on mobile — hide the "Talk to us" button so the hamburger is reachable ===== */ .site-header .header-actions a.btn, .site-header .header-actions .btn-sm, .site-header .header-actions .btn-primary, .header-actions a.btn, .header-actions .btn-sm, .header-actions .btn-primary { display: none !important; } .site-header .menu-toggle, .menu-toggle { display: inline-flex !important; visibility: visible !important; align-items: center; justify-content: center; } .header-actions { flex-shrink: 0; overflow: visible; } .menu-toggle { display: inline-block; } .header-actions .btn-sm { display: none; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } .logo-strip { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr; } .hero-stats { grid-template-columns: 1fr; gap: 16px; } .about-values { grid-template-columns: 1fr; } .foot-bottom { justify-content: center; text-align: center; } .feature-row { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } }