/* ========================================================================== Make IT Happen - production site Design system: "Refined technical confidence, v2" Fonts: Bricolage Grotesque (display) + Hanken Grotesk (body) - loaded in CONTRAST RULE (load-bearing): the bright brand gradient (blue #2488C9 → teal #26B896) is used as TEXT FILL only on dark surfaces (where it clears WCAG AA). On light surfaces headings use --ink, links/buttons use the deep tones (--blue-deep / --grad-deep) and the bright gradient appears only as non-text accents (bars, dots, ticks, borders, blobs, orbit rings). Reduced motion is handled twice: this CSS kill-switch AND main.js checks. ========================================================================== */ /* -------- Tokens -------------------------------------------------------- */ :root { /* Brand */ --blue: #2488c9; --teal: #26b896; --blue-deep: #084d91; /* 8.4:1 on white - safe for text/links */ --teal-deep: #0c7a60; /* ~4.6:1 on white */ --grad: linear-gradient(118deg, var(--blue) 0%, var(--teal) 100%); --grad-deep: linear-gradient(115deg, #0b5fa6 0%, #0f8e72 100%); /* AA text-safe */ --red: #b3261e; /* form errors - 5.9:1 on white */ /* Ink + neutrals (light surfaces) */ --ink: #0a1e33; --ink-soft: #45586b; --line: #e3eaf2; --line-strong: #cdd9e6; --bg: #ffffff; --bg-soft: #f3f8fc; --bg-tint: #eef5fb; /* Dark surfaces */ --navy-900: #061325; --navy-800: #0a1e33; --navy-700: #11304c; --on-dark: #ffffff; --on-dark-soft: rgba(233, 242, 250, 0.74); --on-dark-line: rgba(255, 255, 255, 0.12); /* Type */ --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-eyebrow: 0.78rem; --fs-display: clamp(2.6rem, 1.2rem + 5.4vw, 5rem); --fs-h1: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); --fs-h2: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); /* Space + shape */ --maxw: 1200px; --gutter: clamp(1.1rem, 0.6rem + 2vw, 2.5rem); --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(10, 30, 51, 0.06), 0 2px 6px rgba(10, 30, 51, 0.05); --shadow-md: 0 6px 18px rgba(10, 30, 51, 0.08), 0 2px 6px rgba(10, 30, 51, 0.05); --shadow-lg: 0 24px 60px -18px rgba(10, 30, 51, 0.28); --ease: cubic-bezier(0.22, 1, 0.36, 1); /* 56px technical grid layers, reused on dark surfaces */ --tech-grid: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px; } /* -------- Reset / base -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } a { color: var(--blue-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--teal-deep); } ::selection { background: rgba(36, 136, 201, 0.24); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } /* -------- Focus + skip link (a11y) ------------------------------------- */ :focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; border-radius: 4px; } .on-dark :focus-visible, .site-footer :focus-visible { outline-color: #8fd9ff; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 300; background: var(--ink); color: #fff; padding: 0.7rem 1.1rem; border-radius: 0 0 10px 10px; font-weight: 600; transition: top 0.2s var(--ease); } .skip-link:focus { top: 0; color: #fff; } /* -------- Layout helpers ------------------------------------------------ */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--soft { background: var(--bg-soft); } .section--tint { background: linear-gradient(180deg, var(--bg-tint), var(--bg-soft)); } .center { text-align: center; } .measure { max-width: 62ch; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.75rem; } .mt-4 { margin-top: 2.5rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .section-head { max-width: 60ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.4rem); } .section-head.center { margin-inline: auto; } .section-head h2 { font-size: var(--fs-h2); margin-top: 0.6rem; } .section-head p { color: var(--ink-soft); font-size: var(--fs-lead); margin-top: 0.9rem; } .section-link { margin-top: clamp(1.8rem, 1rem + 2vw, 2.6rem); } /* Dark section surface (navy + radial glows + 56px technical grid) */ .section--dark { position: relative; isolation: isolate; background: var(--navy-900); color: var(--on-dark-soft); } .section--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 85% 8%, rgba(38, 184, 150, 0.14), transparent 60%), radial-gradient(45% 75% at 8% 92%, rgba(36, 136, 201, 0.16), transparent 60%), var(--tech-grid); } .section--dark h2, .section--dark h3 { color: #fff; } .section--dark .section-head p { color: var(--on-dark-soft); } /* Eyebrow label (26×2px gradient bar = the signature dash) */ .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-deep); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--grad); border-radius: 2px; } .on-dark .eyebrow { color: #8fd9ff; } /* Gradient text - DARK surfaces only (contrast-safe bright variant) */ .grad-text { background: linear-gradient(110deg, #5cc6ff 0%, #4fe0bd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* -------- Buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer; min-height: 44px; padding: 0.95rem 1.5rem; border-radius: var(--radius-pill); border: 1.5px solid transparent; transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .btn svg { width: 1.1em; height: 1.1em; } .btn--primary { background: var(--grad-deep); color: #fff; box-shadow: 0 10px 24px -10px rgba(11, 95, 166, 0.7); } .btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(11, 95, 166, 0.7); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { color: var(--ink); border-color: var(--blue-deep); transform: translateY(-2px); } .on-dark .btn--ghost { color: #fff; border-color: var(--on-dark-line); } .on-dark .btn--ghost:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); } .btn--lg { padding: 1.1rem 1.9rem; font-size: 1.05rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; } /* Inline arrow link */ .link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; text-decoration: none; color: var(--blue-deep); } .link-arrow svg { transition: transform 0.25s var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } .on-dark .link-arrow { color: #8fd9ff; } .on-dark .link-arrow:hover { color: #fff; } /* -------- Header / nav -------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); border-bottom: 1px solid transparent; } .site-header.scrolled, .site-header.menu-open { background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } /* While the drawer is open the filter must go: backdrop-filter makes the header the containing block for position:fixed descendants, which traps the full-screen .nav-menu inside the 76px bar (menu invisible below it). */ .site-header.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.98); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 76px; transition: height 0.3s var(--ease); } .site-header.scrolled .nav { height: 62px; } /* Wordmark (typeset - the "IT" carries the brand gradient; logotype exempt) */ .brand { display: inline-flex; align-items: baseline; gap: 0.05em; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; } .brand .it { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-inline: 0.04em; } .site-header:not(.scrolled):not(.menu-open) .brand { color: #fff; } .site-header:not(.scrolled):not(.menu-open) .brand .it { background: linear-gradient(118deg, #5cc6ff, #4fe0bd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav-menu { display: flex; align-items: center; gap: 0.35rem; list-style: none; padding: 0; } .nav-menu a { display: inline-block; padding: 0.5rem 0.8rem; border-radius: 8px; font-weight: 600; font-size: 0.97rem; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s; } /* Narrow-desktop band: tighten so all items (incl. "Case Studies") stay one line */ @media (min-width: 1021px) and (max-width: 1200px) { .nav-menu { gap: 0.1rem; } .nav-menu a { padding: 0.5rem 0.5rem; font-size: 0.91rem; } } /* -------- Film block (Meridian page) ------------------------------------ */ .film-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--on-dark-line); box-shadow: var(--shadow-lg); background: #000; } .film-frame video { width: 100%; height: auto; display: block; } .film-caption { margin-top: 1rem; font-size: 0.95rem; color: var(--on-dark-soft); text-align: center; } .nav-menu a:hover { background: var(--bg-tint); color: var(--blue-deep); } .nav-menu a[aria-current="page"] { color: var(--blue-deep); } .nav-cta { display: flex; align-items: center; gap: 0.9rem; } .nav-phone { font-weight: 700; font-size: 0.95rem; color: var(--ink); text-decoration: none; white-space: nowrap; } .nav-phone:hover { color: var(--blue-deep); } .nav-menu-cta, .nav-menu-tel { display: none; } @media (min-width: 1021px) { .site-header:not(.scrolled) .nav-menu a { color: rgba(255, 255, 255, 0.86); } .site-header:not(.scrolled) .nav-menu a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .site-header:not(.scrolled) .nav-menu a[aria-current="page"] { color: #fff; } .site-header:not(.scrolled) .nav-phone { color: #fff; } } @media (max-width: 1180px) { .nav-cta .nav-phone { display: none; } } /* Hamburger (pure CSS burger → X) */ .nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; border-radius: 10px; color: var(--ink); } .site-header:not(.scrolled):not(.menu-open) .nav-toggle { color: #fff; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; } .nav-toggle span::before { transform: translateY(-7px); } .nav-toggle span::after { transform: translateY(5px); } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(0) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-2px) rotate(-45deg); } /* Full-screen mobile drawer */ @media (max-width: 1020px) { .nav-toggle { display: inline-flex; } .nav-cta .btn, .nav-cta .nav-phone { display: none; } .nav-menu { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; gap: 0.15rem; background: rgba(255, 255, 255, 0.98); padding: calc(76px + 1.4rem) var(--gutter) 2.2rem; overflow-y: auto; transform: translateY(-10px); opacity: 0; visibility: hidden; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0.3s; } .nav-menu.open { transform: none; opacity: 1; visibility: visible; } .nav-menu a { font-size: 1.3rem; padding: 0.85rem; border-radius: 10px; } .nav-menu-cta { display: block; margin-top: 1.2rem; } .nav-menu-cta .btn { display: inline-flex; font-size: 1.05rem; padding: 1.05rem 1.8rem; } .nav-menu-tel { display: block; margin-top: 0.4rem; } .nav-menu-tel a { font-size: 1.05rem; color: var(--ink-soft); } } /* -------- THE ATOM (brand mark, inline SVG) ---------------------------- Rings stroke in currentColor; electrons carry the three brand colours; nucleus is the gradient disc. `.atom--live` animates: electrons travel their orbit paths via offset-path (guarded by @supports) and the whole atom counter-rotates very slowly. Without offset-path support - or under reduced motion - electrons rest at their static cx/cy ring positions. */ .atom { display: block; width: 100%; height: auto; color: rgba(10, 30, 51, 0.16); } .hero .atom, .page-hero .atom, .cta-band .atom, .on-dark .atom { color: rgba(255, 255, 255, 0.22); } .atom-ring { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; } .atom-halo { opacity: 0.16; } .atom-electron--a { fill: var(--teal); } .atom-electron--b { fill: var(--blue); } .atom-electron--c { fill: var(--blue-deep); } @supports (offset-path: path("M0 0H1")) { .atom--live .atom-electron { cx: 0; cy: 0; offset-path: path("M30 280a250 100 0 1 0 500 0a250 100 0 1 0 -500 0"); animation: atom-orbit 16s linear infinite; } .atom--live .atom-electron--b { animation-duration: 22s; animation-direction: reverse; } .atom--live .atom-electron--c { animation-duration: 27s; animation-delay: -9s; } .atom--live .atom-spin { animation: atom-spin 140s linear infinite; transform-box: fill-box; transform-origin: center; } } @keyframes atom-orbit { to { offset-distance: 100%; } } @keyframes atom-spin { to { transform: rotate(360deg); } } /* Hero placement: large, bleeding off the right page edge */ .hero-atom { position: absolute; z-index: 0; top: 50%; right: clamp(-15rem, -12vw, -7rem); transform: translateY(-54%); width: clamp(400px, 50vw, 760px); pointer-events: none; } @media (max-width: 860px) { .hero-atom { top: auto; bottom: -80px; right: -130px; transform: none; width: 330px; opacity: 0.8; } } /* Inner-page accent placement (static variant) */ .page-hero-atom { position: absolute; z-index: 0; top: 50%; right: clamp(-8rem, -6vw, -4rem); transform: translateY(-46%); width: clamp(200px, 26vw, 340px); pointer-events: none; } /* Free-standing accent (e.g. 404, section decorations) */ .atom-accent { width: clamp(150px, 22vw, 250px); pointer-events: none; } /* Dot-column accent (echoes the electron dots) */ .dot-col { display: inline-block; flex: none; width: 8px; height: 112px; background-image: radial-gradient(circle at 4px 6px, #26b896 0 3.6px, transparent 4px), radial-gradient(circle at 4px 31px, #25ada2 0 3.6px, transparent 4px), radial-gradient(circle at 4px 56px, #259cb4 0 3.6px, transparent 4px), radial-gradient(circle at 4px 81px, #2592bf 0 3.6px, transparent 4px), radial-gradient(circle at 4px 106px, #2488c9 0 3.6px, transparent 4px); } /* Morphing gradient blob (pure CSS - replaces the old blob.mp4) */ .blob { width: 460px; height: 460px; pointer-events: none; background: linear-gradient(140deg, rgba(36, 136, 201, 0.55), rgba(38, 184, 150, 0.45) 55%, rgba(170, 101, 162, 0.28)); filter: blur(34px); border-radius: 58% 42% 63% 37% / 46% 56% 44% 54%; animation: blob-morph 16s ease-in-out infinite alternate; } @keyframes blob-morph { 0% { border-radius: 58% 42% 63% 37% / 46% 56% 44% 54%; transform: rotate(0deg) scale(1); } 50% { border-radius: 42% 58% 38% 62% / 58% 42% 60% 40%; transform: rotate(16deg) scale(1.06); } 100% { border-radius: 50% 50% 55% 45% / 40% 62% 38% 60%; transform: rotate(-12deg) scale(0.97); } } /* -------- Hero (homepage) ----------------------------------------------- */ .hero { position: relative; color: var(--on-dark); background: linear-gradient(180deg, #0a2033 0%, var(--navy-900) 58%); overflow: hidden; isolation: isolate; } .hero-overlay { position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 65% at 80% 16%, rgba(38, 184, 150, 0.17), transparent 62%), radial-gradient(45% 60% at 6% 88%, rgba(36, 136, 201, 0.18), transparent 60%), var(--tech-grid); } .hero-particles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } .hero-inner { position: relative; z-index: 1; padding-block: clamp(8rem, 6rem + 10vw, 12rem) clamp(3rem, 2rem + 4vw, 6rem); } .hero h1 { font-size: var(--fs-display); font-weight: 700; color: #fff; max-width: 17ch; } .hero .lead { font-size: var(--fs-lead); color: var(--on-dark-soft); max-width: 54ch; margin-top: 1.4rem; } .hero .eyebrow { margin-bottom: 1.2rem; color: #8fd9ff; } .hero .btn-row { margin-top: 2.2rem; } .hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.35); } .hero .btn--ghost:hover { color: #fff; border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.08); transform: translateY(-2px); } .hero-trust { margin-top: 3rem; color: var(--on-dark-soft); font-size: 0.92rem; max-width: 54ch; } .hero-trust strong { color: #fff; } /* Rotating word in the hero lead (pure CSS; reduced motion → first word) */ .rotator { display: inline-grid; vertical-align: top; } .rotator > span { grid-area: 1 / 1; opacity: 0; white-space: nowrap; background: linear-gradient(110deg, #5cc6ff, #4fe0bd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: rotate-word 9s linear infinite; } .rotator > span:nth-child(2) { animation-delay: 3s; } .rotator > span:nth-child(3) { animation-delay: 6s; } @keyframes rotate-word { 0% { opacity: 0; transform: translateY(0.4em); } 4%, 30% { opacity: 1; transform: translateY(0); } 36%, 100% { opacity: 0; transform: translateY(-0.4em); } } /* Proof-stat strip, overlapping out of the hero */ .hero-stat { position: relative; z-index: 2; margin-top: clamp(2.5rem, 1rem + 5vw, 4.5rem); margin-bottom: -5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .hero-stat .stat { background: #fff; padding: 1.6rem 1.5rem; } .stat .kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 0.4rem; } .stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem); line-height: 1; color: var(--ink); letter-spacing: -0.03em; } .stat .num span { background: var(--grad-deep); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .stat .lbl { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.5rem; } @media (max-width: 860px) { .hero-stat { grid-template-columns: repeat(2, 1fr); } .hero-stat .stat:last-child { grid-column: 1 / -1; } } @media (max-width: 560px) { .hero-stat { grid-template-columns: 1fr; } .hero-stat .stat:last-child { grid-column: auto; } } /* -------- Logo / client marquee ----------------------------------------- */ .clients { padding-block: clamp(6.5rem, 4rem + 6vw, 8.5rem) var(--section-y); } .clients .lede { text-align: center; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.04em; } .marquee { margin-top: 1.8rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); overflow: hidden; } .marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 77s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee .logo { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: #93a4b6; white-space: nowrap; letter-spacing: -0.01em; transition: color 0.25s; } .marquee .logo:hover { color: var(--ink); } @keyframes marquee { to { transform: translateX(-50%); } } /* -------- Cards / grids -------------------------------------------------- */ .grid { display: grid; gap: 1.4rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.7rem; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); } .card--link { text-decoration: none; color: inherit; display: block; } .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; color: inherit; } .card h3 { font-size: var(--fs-h3); } .card p { color: var(--ink-soft); margin-top: 0.6rem; font-size: 0.99rem; } .card .link-arrow { margin-top: 1.1rem; } /* Glassy dark card (navy sections) */ .card--glass { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); } .card--glass h3 { color: #fff; } .card--glass p { color: var(--on-dark-soft); } .card--glass.card--link:hover, .card--glass:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5); } /* Icon tile */ .icon-tile { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(36, 136, 201, 0.14), rgba(38, 184, 150, 0.14)); color: var(--blue-deep); margin-bottom: 1.1rem; } .icon-tile svg { width: 26px; height: 26px; } .card--glass .icon-tile { background: linear-gradient(150deg, rgba(92, 198, 255, 0.16), rgba(79, 224, 189, 0.16)); color: #8fd9ff; } /* Service card: gradient top bar scales in on hover */ .service-card::after { content: ""; position: absolute; left: 1.7rem; right: 1.7rem; top: 0; height: 3px; background: var(--grad); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .service-card:hover::after { transform: scaleX(1); } /* …and the always-on variant (flagship/tooling panels) */ .card--flag::before { content: ""; position: absolute; left: 1.7rem; right: 1.7rem; top: 0; height: 3px; background: var(--grad); border-radius: 3px; } /* Stat-led case-study card + big stat numeral (deep gradient = AA on white) */ .stat-big { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.2rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--ink); } .stat-big span { background: var(--grad-deep); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .on-dark .stat-big { color: #fff; } .on-dark .stat-big span { background: linear-gradient(110deg, #5cc6ff, #4fe0bd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .case-card { display: flex; flex-direction: column; gap: 0.3rem; } .case-card .sector { margin-top: 0.5rem; } .sector { font-weight: 700; color: var(--blue-deep); font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; } .on-dark .sector, .card--glass .sector { color: #8fd9ff; } .case-card p { color: var(--ink-soft); margin-top: 0.35rem; } /* Centered stat card (case-study pages) */ .stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); text-align: center; } .stat-card .stat-big { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4rem); margin-top: 0.8rem; } .stat-card .caption { color: var(--ink-soft); margin-top: 0.8rem; font-size: 0.98rem; } /* -------- Split rows + checklist ----------------------------------------- */ .split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .split.reverse > :first-child { order: 2; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } } .split h2 { font-size: var(--fs-h2); } .split > div > p { color: var(--ink-soft); font-size: var(--fs-lead); margin-top: 1rem; } .checklist { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; gap: 0.75rem; } .checklist li { display: flex; gap: 0.7rem; align-items: flex-start; } .checklist li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--grad) padding-box; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; } .checklist strong { color: var(--ink); } /* -------- Steps (counter-numbered) --------------------------------------- */ .steps { counter-reset: step; display: grid; gap: 1rem; } .step { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: 1.4rem 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; background: var(--grad-deep); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .step h3 { font-size: 1.15rem; } .step p { color: var(--ink-soft); margin-top: 0.4rem; font-size: 0.98rem; } .step .link-arrow { margin-top: 0.9rem; font-size: 0.97rem; } /* Ladder layout: steps as a 2-up card grid with big numerals */ .steps--columns { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } @media (max-width: 680px) { .steps--columns { grid-template-columns: 1fr; } } .steps--columns .step { display: block; padding: 1.7rem; border-radius: var(--radius-lg); } .steps--columns .step::before { display: block; font-size: 1.7rem; margin-bottom: 0.7rem; } .steps--columns .step h3 { font-size: var(--fs-h3); } /* -------- DooR timeline (geometric numbered 01-07) ----------------------- */ .timeline { counter-reset: tstep; display: grid; } .t-item { position: relative; counter-increment: tstep; padding: 0 0 clamp(1.8rem, 1rem + 2vw, 2.6rem) 4.6rem; } .t-item::before { content: counter(tstep, decimal-leading-zero); position: absolute; left: 0; top: -2px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; background: var(--grad-deep); box-shadow: 0 10px 22px -10px rgba(11, 95, 166, 0.7); } .t-item::after { content: ""; position: absolute; left: 25px; top: 58px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--blue), var(--teal)); opacity: 0.35; border-radius: 2px; } .t-item:last-child { padding-bottom: 0; } .t-item:last-child::after { display: none; } .t-item h3 { font-size: 1.25rem; padding-top: 0.55rem; } .t-item p { color: var(--ink-soft); margin-top: 0.5rem; max-width: 62ch; } /* -------- Team grid (12 people) ------------------------------------------ */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } @media (max-width: 980px) { .team-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .team-grid { grid-template-columns: 1fr; } } .person { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .person:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .person .avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-deep); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-bottom: 0.9rem; } .person h3 { font-size: 1.08rem; } .person p { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.2rem; } /* -------- FAQ accordion (native
) -------------------------------- */ .accordion { display: grid; gap: 0.8rem; } .accordion details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .accordion details[open] { box-shadow: var(--shadow-md); border-color: var(--line-strong); } .accordion summary { list-style: none; cursor: pointer; padding: 1.15rem 1.35rem; min-height: 44px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .accordion summary::-webkit-details-marker { display: none; } .accordion summary:hover { color: var(--blue-deep); } .accordion summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; font-weight: 600; line-height: 1; background: linear-gradient(150deg, rgba(36, 136, 201, 0.12), rgba(38, 184, 150, 0.12)); color: var(--blue-deep); transition: transform 0.3s var(--ease); } .accordion details[open] summary::after { transform: rotate(45deg); } .accordion .body { padding: 0 1.35rem 1.3rem; color: var(--ink-soft); max-width: 72ch; } /* -------- CTA band + quote band ------------------------------------------ */ .cta-band { position: relative; color: #fff; background: var(--navy-800); border-radius: var(--radius-lg); overflow: hidden; padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); isolation: isolate; } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 12% 10%, rgba(36, 136, 201, 0.5), transparent 60%), radial-gradient(60% 120% at 90% 90%, rgba(38, 184, 150, 0.45), transparent 60%), var(--tech-grid); } .cta-band h2 { color: #fff; font-size: var(--fs-h2); max-width: 22ch; } .cta-band p { color: var(--on-dark-soft); font-size: var(--fs-lead); margin-top: 0.9rem; max-width: 52ch; } .cta-band .btn-row { margin-top: 2rem; } .cta-band .dot-col { position: absolute; right: clamp(1.5rem, 4vw, 3rem); top: 50%; transform: translateY(-50%); opacity: 0.85; } @media (max-width: 680px) { .cta-band .dot-col { display: none; } } /* Testimonial / featured-case band (navy, morphing blob behind the words) */ .quote-band { position: relative; color: #fff; background: var(--navy-800); border-radius: var(--radius-lg); overflow: hidden; padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); isolation: isolate; } .quote-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--tech-grid); } .quote-band .blob { position: absolute; z-index: -1; top: -140px; right: -140px; opacity: 0.45; } .quote-band blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.02rem + 1.15vw, 1.75rem); line-height: 1.32; letter-spacing: -0.01em; color: #fff; max-width: 52ch; margin-top: 1.2rem; } .quote-band figcaption { margin-top: 1.4rem; color: var(--on-dark-soft); font-weight: 600; } .quote-band figcaption::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--grad); border-radius: 2px; margin-right: 0.6rem; vertical-align: middle; } .quote-band .stat-big { margin-top: 1rem; } /* -------- Forms ----------------------------------------------------------- */ .field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; } .field label { font-weight: 600; font-size: 0.95rem; } .field .req { color: var(--teal-deep); } .field input, .field textarea, .field select { font: inherit; color: var(--ink); padding: 0.85rem 1rem; border: 1.5px solid var(--line-strong); border-radius: 11px; background: #fff; width: 100%; transition: border-color 0.2s, box-shadow 0.2s; } .field select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23084d91' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.95rem center; background-size: 14px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue-deep); box-shadow: 0 0 0 4px rgba(8, 77, 145, 0.12); } .field textarea { min-height: 130px; resize: vertical; } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.1); } .field-error { color: var(--red); font-size: 0.88rem; font-weight: 600; } .form-note { font-size: 0.85rem; color: var(--ink-soft); } .form-success { margin-top: 1.2rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); border: 1px solid rgba(12, 122, 96, 0.4); background: #ecf9f4; color: #0a5f4b; } .form-success a { color: inherit; font-weight: 700; } /* -------- Footer ---------------------------------------------------------- */ .site-footer { background: var(--navy-900); color: var(--on-dark-soft); border-top: 3px solid transparent; border-image: var(--grad) 1; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; } .site-footer a { color: var(--on-dark-soft); text-decoration: none; } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2rem; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid .brand { color: #fff; font-size: 1.5rem; } .footer-col h4 { color: #fff; font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; } .footer-col ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; } .footer-contact p { margin-top: 0.4rem; } .footer-social { display: flex; gap: 0.6rem; margin-top: 1.2rem; } .footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--on-dark-line); border-radius: 10px; transition: background 0.2s, border-color 0.2s; } .footer-social a:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); } .footer-social svg { width: 18px; height: 18px; } .footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--on-dark-line); display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; font-size: 0.86rem; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; } /* Newsletter (footer) */ .subscribe { display: flex; gap: 0.5rem; margin-top: 1rem; } .subscribe input { flex: 1; min-width: 0; font: inherit; padding: 0.7rem 0.9rem; border-radius: 10px; border: 1px solid var(--on-dark-line); background: rgba(255, 255, 255, 0.06); color: #fff; } .subscribe input::placeholder { color: rgba(255, 255, 255, 0.5); } .subscribe input:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); } .subscribe input[aria-invalid="true"] { border-color: #ff9d94; } .subscribe button { flex: none; } /* -------- Page hero (inner pages) + breadcrumb ---------------------------- */ .page-hero { position: relative; color: #fff; background: var(--navy-800); overflow: hidden; isolation: isolate; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 100% at 15% 0%, rgba(36, 136, 201, 0.45), transparent 60%), radial-gradient(50% 100% at 92% 30%, rgba(38, 184, 150, 0.4), transparent 62%), var(--tech-grid); } .page-hero .inner { position: relative; z-index: 1; padding-block: clamp(7.5rem, 5rem + 8vw, 10.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); } .page-hero h1 { color: #fff; font-size: var(--fs-h1); max-width: 22ch; } .page-hero .lead { color: var(--on-dark-soft); font-size: var(--fs-lead); max-width: 56ch; margin-top: 1.1rem; } .breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.86rem; color: var(--on-dark-soft); margin-bottom: 1.2rem; } .breadcrumb a { color: var(--on-dark-soft); text-decoration: none; } .breadcrumb a:hover { color: #fff; } .breadcrumb [aria-hidden] { opacity: 0.55; } /* -------- Insights article typography ------------------------------------- */ .prose { max-width: 68ch; } .prose > * + * { margin-top: 1.05rem; } .prose p, .prose li { color: var(--ink-soft); font-size: 1.05rem; } .prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 2.6rem; } .prose h3 { font-size: 1.25rem; margin-top: 2rem; } .prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.45rem; } .prose strong { color: var(--ink); } .prose .pull-quote { margin-top: 2rem; padding: 1.4rem 1.6rem; border-left: 3px solid; border-image: var(--grad) 1; background: var(--bg-soft); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; line-height: 1.4; color: var(--ink); } .article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; } /* -------- Reveal on scroll ------------------------------------------------ */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; } [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.08s; } [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.16s; } [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.24s; } [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.32s; } [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.4s; } /* -------- Reduced motion (CSS kill-switch; main.js checks separately) ----- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .hero-particles { display: none; } .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; } .rotator > span { position: static; opacity: 1; animation: none; } .rotator > span:not(:first-child) { display: none; } [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; } .blob { animation: none; } /* Atom goes static: electrons rest at the start of their orbit paths */ .atom--live .atom-electron, .atom--live .atom-spin { animation: none; } }