/* ===================================================================== PulsingLabs · Marketing site design system Shared by every page. Modern, motion-rich, teal-branded. ===================================================================== */ :root { --teal: #00BFA5; --teal-d: #00897B; --teal-l: #4DEAD0; --navy: #0A1622; --navy-2: #0D1F2D; --ink: #1A2B3A; --muted: #5B6B7A; --line: #E9E3DA; --bg: #FFFFFF; --bg-soft: #F4EFE7; /* warm cream (editorial light band) */ --bg-mint: #EAF7F3; /* editorial palette, warm cream + deep pine dark (the scroll banding) */ --cream: #F4EFE7; --cream-2: #EBE3D6; --ink-dark: #0E2522; /* deep pine/teal-ink dark section bg */ --ink-dark-2: #14332E; --on-dark: #ECE6DA; /* cream text on dark */ --on-dark-soft: rgba(236,230,218,.66); --coral: #FF6B5C; /* warm secondary accent (sparing) */ --grad-teal: linear-gradient(135deg, #00BFA5 0%, #00897B 100%); --grad-mesh: radial-gradient(700px 500px at 12% 10%, rgba(0,191,165,.22), transparent 60%), radial-gradient(700px 600px at 88% 20%, rgba(77,234,208,.20), transparent 60%), radial-gradient(800px 500px at 60% 95%, rgba(0,137,123,.16), transparent 60%); --radius: 18px; --radius-lg: 26px; --shadow-sm: 0 6px 18px rgba(13,31,45,.07); --shadow: 0 18px 50px rgba(13,31,45,.12); --shadow-teal: 0 18px 40px rgba(0,191,165,.32); --maxw: 1180px; --ease: cubic-bezier(.22,1,.36,1); --ease-curtain: cubic-bezier(.76,0,.24,1); /* scroll-driven THEME (whole-screen + text crossfade light<->dark) */ --pg-bg: 244,239,231; /* page background (light = warm cream) */ --pg-fg: 20,51,46; /* headings/nav text (light = ink) */ --pg-muted: 91,107,122; /* lead/secondary text */ --theme-ms: .85s; /* crossfade duration */ } /* dark theme, toggled by JS when a dark band is centred in the viewport */ html.theme-dark { --pg-bg: 14,37,34; --pg-fg: 236,230,218; --pg-muted: 173,185,186; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Keyboard a11y: visible focus ring on every interactive element (was missing sitewide — mouse users never see it, keyboard users need it to navigate). */ :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible, .card:focus-visible { outline-offset: 2px; } /* Anchor targets land clear of the fixed header instead of underneath it. */ [id] { scroll-margin-top: 96px; } /* overflow-x: CLIP (not hidden) — hidden turns html/body into a scroll container, which silently breaks `position: sticky` everywhere (killed the How-it-works card-stack peel). clip prevents horizontal overflow WITHOUT establishing a scroll container, so sticky keeps working. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #fff; overflow-x: clip; } /* Long headline words must be able to break rather than force the page wider than the phone screen (the mobile hero-overflow fix). */ h1, h2, .display { overflow-wrap: break-word; } body { font-family: 'General Sans', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink); line-height: 1.6; background: transparent; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* full-screen theme background layer, crossfades light<->dark on scroll */ #bgfx { position: fixed; inset: 0; z-index: -1; background: rgb(var(--pg-bg)); transition: background-color var(--theme-ms) var(--ease); will-change: background-color; } /* line-icon sizing (replaces emoji throughout) */ [data-icon] svg { display: block; } .ficon svg { width: 26px; height: 26px; } .mi-ic svg { width: 22px; height: 22px; } .marquee-item .ic svg { width: 20px; height: 20px; } .ico-inline { display: inline-flex; color: var(--teal-d); vertical-align: middle; } .ico-inline svg { width: 15px; height: 15px; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: rgba(0,191,165,.25); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } section { padding: 96px 0; position: relative; } h1, h2, h3 { color: rgb(var(--pg-fg)); line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; transition: color var(--theme-ms) var(--ease); } h1 { font-size: clamp(46px, 7.2vw, 92px); line-height: 1.02; } h2 { font-size: clamp(34px, 5vw, 62px); } h3 { font-weight: 600; } /* headings inside light cards keep a fixed dark colour (cards don't theme) */ .card h3, .step h3, .art h3 { color: var(--ink-dark); } .lead { color: rgb(var(--pg-muted)); font-size: clamp(18px,2vw,22px); max-width: 640px; font-weight: 400; transition: color var(--theme-ms) var(--ease); } .eyebrow { display: inline-flex; align-items: center; gap: 11px; font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-d); margin-bottom: 22px; } .eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--teal); display: inline-block; } .center .eyebrow { gap: 0; } .center .eyebrow::before { display: none; } /* brighter accents when the page theme is dark */ html.theme-dark .eyebrow { color: var(--teal-l); } html.theme-dark .eyebrow::before { background: var(--teal-l); } html.theme-dark .split-list li::before { background: var(--teal-l); } .center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; } .grad-text { background: var(--grad-teal); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ===================================================================== Editorial system, full-bleed colour bands + zig-zag splits + media ===================================================================== */ /* Section colour bands (this IS the scroll colour-change) */ /* light bands are transparent so the continuously-shifting #bgfx shows through (the scroll colour-change) */ /* all bands are transparent, the themed #bgfx provides the (crossfading) colour */ .s-cream, .s-cream-2, .s-dark { background: transparent; } /* Display headline (oversized editorial) */ .display { font-size: clamp(52px, 9vw, 132px); line-height: .96; letter-spacing: -0.04em; font-weight: 600; } /* Zig-zag split layout */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .split.wide-text { grid-template-columns: 1.1fr .9fr; } .split.flip .split-media { order: -1; } .split-copy h2 { margin-bottom: 20px; } .split-copy .lead { margin-bottom: 26px; } .split-list { list-style: none; display: grid; gap: 14px; margin-top: 8px; } .split-list li { display: flex; gap: 13px; font-size: 16.5px; align-items: flex-start; color: rgb(var(--pg-fg)); transition: color var(--theme-ms) var(--ease); } .split-list li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); margin-top: 8px; } /* --- Boxed split: two sibling cards, photo/panel in one + copy in the other (OneLab-style testimonial layout applied sitewide) --- */ .split.boxed { align-items: stretch; } /* Near-full-bleed pair (OneLab ref): the two cards stretch to ~40px from each viewport edge with a small gap, regardless of the 1180px content column. On viewports narrower than the column the negative margin caps at 0. */ .split.boxed { gap: clamp(24px, 2.5vw, 40px); margin-inline: min(calc(16px - (100vw - var(--maxw)) / 2), 0px); } .split.boxed .split-media .media { height: 100%; min-height: 620px; } .split.boxed .split-copy { background: var(--cream); border-radius: var(--radius-lg); padding: clamp(30px, 4.5vw, 58px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-shadow: var(--shadow); } .s-cream .split.boxed .split-copy { background: #fff; } .s-dark .split.boxed .split-copy { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); box-shadow: none; } /* Like .card, light copy boxes don't theme: pin dark text so the scroll-driven html.theme-dark page theme can't turn them light-on-white. Dark-section panels (.s-dark) are excluded — they keep their light-on-dark text. */ section:not(.s-dark) .split.boxed .split-copy h2 { color: var(--ink-dark); } section:not(.s-dark) .split.boxed .split-copy .lead, section:not(.s-dark) .split.boxed .split-copy p { color: var(--muted); } section:not(.s-dark) .split.boxed .split-copy .split-list li { color: var(--ink); } html.theme-dark section:not(.s-dark) .split.boxed .split-copy .eyebrow { color: var(--teal-d); } html.theme-dark section:not(.s-dark) .split.boxed .split-copy .eyebrow::before { background: var(--teal); } html.theme-dark section:not(.s-dark) .split.boxed .split-copy .split-list li::before { background: var(--teal); } /* Big rounded media block (image stand-in) */ .media { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 460px; display: grid; place-items: center; } .media.tall { min-height: 560px; } .media.bleed-r { margin-right: calc((100vw - min(100vw, var(--maxw))) / -2 - 24px); border-top-right-radius: 0; border-bottom-right-radius: 0; } .media.bleed-l { margin-left: calc((100vw - min(100vw, var(--maxw))) / -2 - 24px); border-top-left-radius: 0; border-bottom-left-radius: 0; } .media-mint { background: linear-gradient(150deg, #DFF5EF, #BCEDE0 60%, #8FE3D0); } .media-pine { background: linear-gradient(150deg, var(--ink-dark-2), var(--ink-dark)); } .media-warm { background: linear-gradient(150deg, #FBF4EA, #F0E4D2); } .media-teal { background: var(--grad-teal); } .media .badge-float { position: absolute; background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 14px 18px; display: flex; gap: 12px; align-items: center; } .media .badge-float .bf-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--bg-mint); color: var(--teal-d); display: grid; place-items: center; } .media .badge-float b { font-size: 14px; color: var(--ink-dark); display: block; } .media .badge-float span { font-size: 12px; color: var(--muted); } .media .bf-tl { top: 22px; left: 22px; } .media .bf-br { bottom: 22px; right: 22px; } /* ---------- Business: HR dashboard "served on a hand" showcase ---------- */ .hr-stage { position: relative; overflow: hidden; padding: 96px 0 0; } .hr-stage .hs-head { text-align: center; max-width: 620px; margin: 0 auto; position: relative; z-index: 3; padding: 0 24px; } .hr-stage .hs-head h2 { margin-top: 14px; } .hr-stage .hs-head .lead { margin: 14px auto 0; max-width: 52ch; } .hr-stage-visual { position: relative; max-width: 940px; margin: 30px auto 0; padding: 0 18px; } .hr-stage-visual::before { content: ""; position: absolute; left: 50%; bottom: -18%; transform: translateX(-50%); width: 130%; height: 115%; pointer-events: none; background: radial-gradient(closest-side, rgba(0,191,165,.30), rgba(77,234,208,.10) 55%, transparent 75%); filter: blur(26px); } .hr-stage-visual img { position: relative; z-index: 1; width: 100%; display: block; } .hr-chip { position: absolute; z-index: 2; background: rgba(255,255,255,.96); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 16px; display: flex; gap: 11px; align-items: center; animation: hr-chip-drift 5.5s ease-in-out infinite; } .hr-chip .hc-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-mint); color: var(--teal-d); display: grid; place-items: center; flex: none; } .hr-chip b { font-size: 13.5px; color: var(--ink-dark); display: block; line-height: 1.25; } .hr-chip span { font-size: 11.5px; color: var(--muted); } .hr-chip.hc-1 { top: 16%; left: 2%; } .hr-chip.hc-2 { top: 44%; right: 0%; animation-delay: 1.4s; } .hr-chip.hc-3 { bottom: 20%; left: 6%; animation-delay: 2.6s; } @keyframes hr-chip-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (prefers-reduced-motion: reduce) { .hr-chip { animation: none; } } @media (max-width: 760px) { .hr-chip { padding: 9px 12px; } .hr-chip .hc-ic { width: 28px; height: 28px; } .hr-chip b { font-size: 11.5px; } .hr-chip span { display: none; } .hr-chip.hc-1 { top: 8%; left: 0; } .hr-chip.hc-2 { top: 34%; right: 0; } .hr-chip.hc-3 { display: none; } } .media .phone-card { margin: 0; width: 100%; max-width: 320px; } .media .chat-bubble { max-width: 320px; } .media .mini-chart { max-width: 300px; } /* ---------- Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; gap: 9px; justify-content: center; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 100px; border: 1.5px solid transparent; cursor: pointer; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s; will-change: transform; } /* Hover lift + press feedback (touch users get the press; hover users both). Compositor-only (transform/shadow), 150-250ms per the motion guidelines. */ /* Calm hover (owner request): no lift/movement - colour + shadow only. */ .btn:hover { transform: none; } .btn:active { transform: scale(.985); transition-duration: .12s; } .btn-primary { background: var(--grad-teal); color: #fff; box-shadow: var(--shadow-teal); } .btn-primary:hover { box-shadow: 0 22px 50px rgba(0,191,165,.45); } .btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); } .btn-ghost:hover { border-color: var(--teal); color: var(--teal-d); } .btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); } .btn-light:hover { background: rgba(255,255,255,.22); } .btn-dark { background: var(--navy); color:#fff; } .btn-dark:hover { background: var(--navy-2); } .btn .arrow { transition: transform .25s var(--ease); } .btn:hover .arrow { transform: none; } /* shine sweep - DISABLED (owner request: buttons must stay still on hover). Restore by re-adding the ::after block + .btn:hover::after { left: 130%; } */ .btn::after { content: none; } /* ---------- Nav (injected) ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; transition: background .3s, box-shadow .3s, padding .3s, transform .35s var(--ease); padding: 14px 0; } .nav.scrolled { background: rgba(var(--pg-bg),.82); backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 1px 0 rgba(0,0,0,.05); padding: 8px 0; transition: background-color var(--theme-ms) var(--ease), padding .3s, transform .35s var(--ease); } /* Auto-hide on scroll down, reveal on scroll up (bindNav's onScroll). Kept OFF the drawer state and near-top region in JS, not here. */ .nav.nav-hidden { transform: translateY(-100%); } /* True 3-zone alignment: logo hard-left, links dead-centre, CTA hard-right. (flex space-between let the middle drift when the sides differed in width) */ .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-inner > .logo { justify-self: start; } .nav-inner > .nav-links { justify-self: center; } .nav-inner > .nav-cta { justify-self: end; } .logo { display: flex; align-items: center; gap: 10px; font-family: 'Quicksand', 'General Sans', sans-serif; font-weight: 400; font-size: 28px; color: rgb(var(--pg-fg)); letter-spacing:-.01em; transition: color var(--theme-ms) var(--ease); } /* Brand mark is the bare colourful DNA helix (transparent, no tile) — big and clean beside the wordmark. */ .logo .dot { width: 56px; height: 56px; display: grid; place-items: center; } .logo .dot .logo-mark { width: 56px; height: 56px; object-fit: contain; } .nav-links { display: flex; align-items: center; gap: 14px; } .nav-links a { position: relative; font-size: 16px; color: rgb(var(--pg-fg)); /* Same typeface as the PulsingLabs wordmark (owner request) — Quicksand, regular weight, not the old bold. Applies on desktop + mobile drawer. */ font-family: 'Quicksand', 'General Sans', sans-serif; font-weight: 500; letter-spacing: -.01em; padding: 8px 14px; border-radius: 100px; transition: color var(--theme-ms) var(--ease), background .2s; } .nav-links a:hover { color: var(--teal-d); background: var(--bg-mint); } .nav-links a.active { color: var(--teal-d); } .nav-links a.active::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; border-radius:2px; background: var(--grad-teal); } .nav-cta { display: flex; align-items: center; gap: 12px; } /* drawer-only control: hidden on desktop, shown in the mobile drawer */ .drawer-cta { display: none; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 42px; height: 42px; border-radius: 12px; } .nav-toggle span { display:block; width: 22px; height: 2px; background: rgb(var(--pg-fg)); margin: 4px auto; border-radius: 2px; transition: transform .3s, opacity .3s, background-color var(--theme-ms); } .nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); } .nav-toggle.open span:nth-child(2){ opacity: 0; } .nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } /* ---------- Mega menu (hover dropdown) ---------- */ .has-mega { position: static; display: flex; align-items: center; } .caret { font-size: 9px; opacity: .55; display: inline-block; transition: transform .3s var(--ease); } /* hovered nav item becomes a solid "pill" (inverse of the current theme), OneLab style */ .has-mega.open .nav-link, .has-mega:hover .nav-link { background: rgb(var(--pg-fg)); color: rgb(var(--pg-bg)); } .nav-links a:not(.nav-link):hover, .nav-link:hover { background: rgba(var(--pg-fg),.08); } .has-mega.open .nav-link, .has-mega:hover .nav-link { background: rgb(var(--pg-fg)) !important; color: rgb(var(--pg-bg)) !important; } .has-mega.open .caret, .has-mega:hover .caret { transform: rotate(180deg); } .mega { position: absolute; left: 0; right: 0; top: 100%; background: rgba(var(--pg-bg),.98); backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid rgba(var(--pg-fg),.1); box-shadow: 0 34px 70px rgba(0,0,0,.18); padding: 40px 0 46px; z-index: 201; opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .38s var(--ease), transform .38s var(--ease), visibility .38s, background-color var(--theme-ms); } .has-mega:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); } .mega-inner { display: grid; grid-template-columns: .85fr 1.55fr; gap: 48px; align-items: center; } .mega-blurb .eyebrow { margin-bottom: 12px; } .mega-blurb p { color: rgb(var(--pg-muted)); font-size: 15px; margin: 0 0 20px; max-width: 280px; } .mega-grid { row-gap: 4px; } .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mega-item { display: flex; flex-direction: column; gap: 1px; padding: 10px 4px; border-radius: 12px; background: transparent; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease), color .2s; } .has-mega:hover .mega-item { opacity: 1; transform: none; } .has-mega:hover .mega-item:nth-child(1) { transition-delay: .05s; } .has-mega:hover .mega-item:nth-child(2) { transition-delay: .09s; } .has-mega:hover .mega-item:nth-child(3) { transition-delay: .13s; } .has-mega:hover .mega-item:nth-child(4) { transition-delay: .17s; } .has-mega:hover .mega-item:nth-child(5) { transition-delay: .21s; } .has-mega:hover .mega-item:nth-child(6) { transition-delay: .25s; } .mega-item:hover { background: transparent !important; transform: translateX(8px) !important; } .mi-title { font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; color: rgb(var(--pg-fg)); transition: color .2s; } .mega-item:hover .mi-title { color: var(--teal); } .mi-desc { font-size: 13px; color: rgb(var(--pg-muted)); margin-top: 2px; } /* page backdrop behind an open mega */ .mega-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(10,22,34,.32); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .38s var(--ease), visibility .38s; } body.mega-open .mega-backdrop { opacity: 1; visibility: visible; pointer-events: auto; } /* ---------- Page transition curtain ---------- */ .page-curtain { position: fixed; inset: 0; z-index: 9999; background: var(--grad-teal); display: grid; place-items: center; transform: translateY(100%); pointer-events: none; } /* Same lockup as the header .logo (Quicksand 400, mark:text 2:1, gap 10px), scaled x1.5 for the full-screen moment. */ .page-curtain .pc-logo { display:flex; align-items:center; gap:15px; color:#fff; font-family: 'Quicksand', 'General Sans', sans-serif; font-weight:400; font-size:42px; letter-spacing:-.01em; opacity:0; transform: translateY(10px); } .page-curtain .pc-logo .logo-mark { width: 84px; height: 84px; object-fit: contain; } .page-curtain.cover { transform: translateY(0); transition: transform .55s var(--ease-curtain); } .page-curtain.cover .pc-logo { opacity:1; transform: translateY(0); transition: opacity .4s .15s, transform .4s .15s; } .page-curtain.reveal { transform: translateY(-100%); transition: transform .6s var(--ease-curtain); } /* page enter animation (content fade/rise) */ .page-enter { opacity: 0; transform: translateY(14px); } body.loaded .page-enter { opacity: 1; transform: none; transition: opacity .7s var(--ease) .05s, transform .7s var(--ease) .05s; } /* Hero choreography: the copy column unfolds top-to-bottom AFTER the headline words begin (eyebrow rides the block; h1 words self-animate; lead → CTAs → trust line follow in sequence). Scoped to .hero so other .page-enter uses keep the simple block fade. */ .hero .page-enter > .lead, .hero .page-enter > .hero-cta, .hero .page-enter > .hero-cta ~ * { opacity: 0; transform: translateY(16px); } body.loaded .hero .page-enter > .lead, body.loaded .hero .page-enter > .hero-cta, body.loaded .hero .page-enter > .hero-cta ~ * { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); } body.loaded .hero .page-enter > .lead { transition-delay: 1.15s; } body.loaded .hero .page-enter > .hero-cta { transition-delay: 1.35s; } body.loaded .hero .page-enter > .hero-cta ~ * { transition-delay: 1.5s; } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s var(--ease), transform .5s var(--ease); will-change: transform, opacity; } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } .reveal.d5 { transition-delay: .40s; } .reveal-l { opacity:0; transform: translateX(-40px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .reveal-l.in { opacity:1; transform:none; } .reveal-r { opacity:0; transform: translateX(40px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .reveal-r.in { opacity:1; transform:none; } .reveal-zoom { opacity:0; transform: scale(.92); transition: opacity .5s var(--ease), transform .5s var(--ease); } .reveal-zoom.in { opacity:1; transform:none; } /* Cascade: bullets inside a revealed copy block follow the parent in a soft stagger instead of arriving as one slab. Scoped to reveal parents only, so lists elsewhere are untouched. Reduced-motion overrides force these visible. */ .reveal-l .split-list li, .reveal-r .split-list li { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .reveal-l.in .split-list li, .reveal-r.in .split-list li { opacity: 1; transform: none; } .reveal-l.in .split-list li:nth-child(1), .reveal-r.in .split-list li:nth-child(1) { transition-delay: .14s; } .reveal-l.in .split-list li:nth-child(2), .reveal-r.in .split-list li:nth-child(2) { transition-delay: .24s; } .reveal-l.in .split-list li:nth-child(3), .reveal-r.in .split-list li:nth-child(3) { transition-delay: .34s; } .reveal-l.in .split-list li:nth-child(n+4), .reveal-r.in .split-list li:nth-child(n+4) { transition-delay: .44s; } /* Eyebrow dash draws in with its section (28px underline grows from 0). */ .reveal .eyebrow::before, .reveal-l .eyebrow::before, .reveal-r .eyebrow::before { width: 0; transition: width .5s var(--ease) .12s; } .reveal.in .eyebrow::before, .reveal-l.in .eyebrow::before, .reveal-r.in .eyebrow::before { width: 28px; } /* ---------- Hero ---------- */ .hero { padding: 150px 0 110px; position: relative; overflow: hidden; background: transparent; } .hero::before { content:""; position:absolute; inset:0; background: var(--grad-mesh); z-index:0; } .hero .wrap { position: relative; z-index: 2; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; } /* minmax(0,…) + min-width:0 lets tracks/children shrink below their content's intrinsic width. Without this, the default 1fr (=minmax(auto,1fr)) refuses to shrink past the phone-card / split-headline min-content, so on a phone the hero column stayed wider than the screen and text/CTA clipped off the right. */ .hero-grid > * { min-width: 0; } .hero h1 .hl { background: var(--grad-teal); -webkit-background-clip:text; background-clip:text; color: transparent; } .hero p.lead { margin-top: 22px; } .hero-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; } .hero-note { margin-top: 22px; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; } /* floating orbs */ .orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; z-index: 1; animation: float 9s ease-in-out infinite; } .orb.o1 { width: 320px; height: 320px; background: rgba(0,191,165,.45); top: -60px; right: 8%; } .orb.o2 { width: 240px; height: 240px; background: rgba(77,234,208,.5); bottom: -40px; left: 4%; animation-delay: -3s; } .orb.o3 { width: 180px; height: 180px; background: rgba(0,137,123,.4); top: 40%; right: 42%; animation-delay: -6s; } @keyframes float { 0%,100%{ transform: translateY(0) translateX(0); } 50%{ transform: translateY(-26px) translateX(14px); } } /* phone mock card */ .phone-card { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px; max-width: min(380px, 100%); margin-left: auto; animation: bob 6s ease-in-out infinite; } @keyframes bob { 0%,100%{ transform: translateY(0) rotate(-.4deg);} 50%{ transform: translateY(-12px) rotate(.4deg);} } .phone-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .phone-head .score { font-size: 13px; color: var(--muted); } .phone-head .ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--teal-d); font-size: 18px; background: conic-gradient(var(--teal) 0 88%, #E6ECF0 88% 100%); } .phone-head .ring i { width: 50px; height: 50px; border-radius: 50%; background:#fff; display:grid; place-items:center; font-style: normal; } .marker { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); } .marker .name { font-weight: 700; font-size: 14px; flex: 1; } .marker .val { font-size: 14px; color: var(--muted); } .pill { font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: 100px; white-space: nowrap; } .pill.ok { background: #E3F9F4; color: var(--teal-d); } .pill.hi { background: #FDECEC; color: #D7263D; } .pill.mid { background: #FFF4E5; color: #C77700; } /* ---------- Marquee ---------- */ .marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background:#fff; padding: 22px 0; } .marquee-track { display: flex; gap: 56px; width: max-content; animation: scrollx 24s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-item { display:flex; align-items:center; gap:10px; font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; } .marquee-item .ic { display: inline-flex; align-items: center; color: var(--teal); } @keyframes scrollx { to { transform: translateX(-50%); } } /* ---------- Cards / grids ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; transform-style: preserve-3d; } /* Lift on hover (tilt cards override transform inline via JS — that's fine, the tilt IS their hover state; this covers every non-tilt card). */ .card:hover { box-shadow: var(--shadow); border-color: rgba(0,191,165,.45); transform: translateY(-3px); } .card .ficon { width: 54px; height: 54px; border-radius: 15px; background: var(--bg-mint); color: var(--teal-d); display: grid; place-items: center; font-size: 26px; margin-bottom: 18px; transition: transform .3s var(--ease); } .card:hover .ficon { transform: scale(1.07) rotate(-3deg); } .card:hover .ficon { transform: translateZ(20px) scale(1.06); } .card h3 { font-size: 19px; margin-bottom: 9px; } .card p { color: var(--muted); font-size: 15px; } .card .more { display:inline-flex; gap:6px; margin-top:14px; color: var(--teal-d); font-weight:700; font-size:14px; } /* ---------- Spotlight rows ---------- */ .spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .spotlight + .spotlight { margin-top: 96px; } .spotlight.rev .sp-visual { order: -1; } .spotlight h3 { font-size: clamp(24px,3.2vw,34px); margin-bottom: 16px; } .spotlight > div > p { color: var(--muted); font-size: 17px; margin-bottom: 20px; } .spotlight ul { list-style: none; display: grid; gap: 11px; } .spotlight li { display: flex; gap: 11px; font-size: 15.5px; } .spotlight li::before { content: "✓"; color: var(--teal); font-weight: 900; } .sp-visual { background: linear-gradient(160deg, var(--bg-mint), var(--bg-soft)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; min-height: 300px; display: grid; place-items: center; box-shadow: var(--shadow-sm); } .chat-bubble { max-width: 320px; width: 100%; } .bubble { padding: 13px 17px; border-radius: 18px; font-size: 14px; margin-bottom: 11px; max-width: 88%; box-shadow: var(--shadow-sm); } .bubble.you { background: var(--grad-teal); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; } .bubble.ai { background: #fff; border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 5px; } .mini-chart { width: 100%; max-width: 340px; } .mini-chart .bars { display: flex; align-items: flex-end; gap: 13px; height: 170px; padding: 0 4px; } .mini-chart .bar { flex: 1; border-radius: 7px 7px 0 0; background: var(--grad-teal); transform-origin: bottom; } .mini-chart .xrow { display: flex; gap: 13px; margin-top: 9px; } .mini-chart .xrow span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; } /* ---------- Steps ---------- */ .soft { background: transparent; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; } .step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; position: relative; transition: transform .3s var(--ease), box-shadow .3s; } .step:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .step .num { width: 46px; height: 46px; border-radius: 14px; background: var(--grad-teal); color: #fff; font-weight: 900; font-size: 18px; display: grid; place-items: center; margin-bottom: 18px; box-shadow: var(--shadow-teal); } .step h3 { font-size: 18px; margin-bottom: 7px; } .step p { color: var(--muted); font-size: 15px; } /* ---------- Stat band ---------- */ .dark { background: transparent; } .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; } .stat { background: rgba(var(--pg-fg),.045); border: 1px solid rgba(var(--pg-fg),.12); border-radius: var(--radius); padding: 28px; transition: transform .3s var(--ease), background-color var(--theme-ms) var(--ease), border-color var(--theme-ms); } .stat:hover { transform: translateY(-6px); background: rgba(var(--pg-fg),.075); } .stat .n { font-size: clamp(34px,4vw,46px); font-weight: 900; background: linear-gradient(135deg,#4DEAD0,#00BFA5); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.02em; } .stat .l { font-size: 14px; color: rgb(var(--pg-muted)); margin-top: 8px; transition: color var(--theme-ms) var(--ease); } /* ---------- ROI calculator ---------- */ .biz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .biz ul { list-style: none; margin-top: 26px; display: grid; gap: 15px; } .biz li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: rgba(255,255,255,.92); } .biz li .ck { color: var(--teal-l); font-weight: 900; flex: none; } .calc { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); padding: 32px; } /* ROI calculator stays a self-contained dark card even on a light section */ .calc.glass { background: linear-gradient(160deg, var(--ink-dark-2), var(--ink-dark)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px rgba(8,30,26,.28); backdrop-filter: none; } .calc h3 { font-size: 21px; margin-bottom: 5px; } .calc .sub { color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 22px; } .calc label { display: block; font-size: 13px; color: rgba(255,255,255,.7); margin: 16px 0 8px; font-weight: 600; } .calc input[type=range] { width: 100%; accent-color: var(--teal); height: 6px; } .calc .rowval { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.92); } .calc .result { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); } .calc .result .big { font-size: clamp(32px,5vw,44px); font-weight: 900; background: linear-gradient(135deg,#4DEAD0,#00BFA5); -webkit-background-clip:text; background-clip:text; color:transparent; } .calc .result .cap { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 4px; } /* ---------- Pricing ---------- */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 54px; } .plan { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; background: #fff; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; } .plan:hover { transform: translateY(-8px); box-shadow: var(--shadow); } .plan.featured { border-color: transparent; background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--grad-teal) border-box; border: 2px solid transparent; box-shadow: var(--shadow); color: #fff; position: relative; } .plan.featured h3, .plan.featured .amt { color: #fff; } .plan.featured .pdesc, .plan.featured li { color: rgba(255,255,255,.82); } .plan.featured .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad-teal); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 16px; border-radius: 100px; letter-spacing:.05em; } .plan h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--teal-d); } .plan .amt { font-size: 42px; font-weight: 900; color: var(--navy); margin: 12px 0 4px; letter-spacing:-.02em; } .plan .amt span { font-size: 14px; font-weight: 600; color: var(--muted); } .plan.featured .amt span { color: rgba(255,255,255,.7); } .plan .pdesc { color: var(--muted); font-size: 14px; min-height: 42px; } .plan ul { list-style: none; margin: 22px 0 26px; display: grid; gap: 12px; flex: 1; } .plan li { font-size: 15px; color: var(--ink); display: flex; gap: 11px; } .plan li::before { content: "✓"; color: var(--teal); font-weight: 900; } .plan.featured li::before { color: var(--teal-l); } /* ---------- Testimonials carousel ---------- */ .tcarousel { margin-top: 50px; overflow: hidden; } .ttrack { display: flex; transition: transform .55s var(--ease); } .tslide { min-width: 100%; padding: 0 8px; } .tcard { background: linear-gradient(160deg, var(--bg-mint), #fff); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 44px; max-width: 800px; margin: 0 auto; text-align: center; box-shadow: var(--shadow-sm); } .tcard .stars { color: #F5B301; font-size: 20px; margin-bottom: 18px; letter-spacing: 2px; } .tcard .quote { font-size: clamp(19px,2.4vw,24px); color: var(--navy); font-weight: 600; line-height: 1.5; letter-spacing:-.01em; } .tcard .who { margin-top: 22px; font-size: 14px; color: var(--muted); font-weight: 700; } .tnav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 30px; } .tnav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 20px; color: var(--navy); transition: all .2s; } .tnav button:hover { border-color: var(--teal); color: var(--teal-d); transform: scale(1.08); } .tdots { display: flex; gap: 9px; } .tdots span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); cursor: pointer; transition: all .25s; } .tdots span.active { background: var(--grad-teal); width: 26px; border-radius: 100px; } /* ---------- Articles ---------- */ .art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; } .art { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .3s var(--ease), box-shadow .3s; } .art:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .art .thumb { height: 168px; background: var(--grad-teal); display: grid; place-items: center; color: #fff; font-size: 48px; } .art .thumb.t2 { background: linear-gradient(135deg, #3A7BD5, #00BFA5); } .art .thumb.t3 { background: linear-gradient(135deg, #6D5BD0, #00BFA5); } .art .thumb svg { width: 46px; height: 46px; } .art .body { padding: 24px; } .art .date { font-size: 12px; color: var(--teal-d); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .art h3 { font-size: 18px; margin: 9px 0; } .art p { color: var(--muted); font-size: 14px; } /* ---------- FAQ ---------- */ .faq { max-width: 800px; margin: 50px auto 0; } details { border: 1px solid var(--line); border-radius: 14px; padding: 2px 24px; margin-bottom: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; } details[open] { border-color: rgba(0,191,165,.4); box-shadow: var(--shadow-sm); } summary { cursor: pointer; font-weight: 700; font-size: 16px; padding: 19px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; color: var(--navy); } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; color: var(--teal); font-size: 26px; font-weight: 300; flex: none; transition: transform .3s; } details[open] summary::after { content: "−"; transform: rotate(180deg); } details p { padding: 0 0 20px; color: var(--muted); font-size: 15px; } /* ---------- Forms ---------- */ .form-card { max-width: 620px; margin: 0 auto; background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); } .field { margin-bottom: 18px; text-align: left; } .field label { display:block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 7px; } .field input, .field textarea, .field select { width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; font-family: inherit; color: var(--ink); background:#fff; transition: border-color .2s, box-shadow .2s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,191,165,.12); } .field textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ok-msg { display:none; margin-top:18px; padding:14px 18px; border-radius:12px; background: var(--bg-mint); color: var(--teal-d); font-weight:700; } .err-msg { display:none; margin-top:18px; padding:14px 18px; border-radius:12px; background: #FDECEC; color: #D7263D; font-weight:700; } /* ---------- CTA band ---------- */ .cta-band { background: var(--grad-teal); color: #fff; text-align: center; border-radius: var(--radius-lg); padding: 70px 28px; position: relative; overflow: hidden; } .cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(400px 240px at 20% 0%, rgba(255,255,255,.22), transparent), radial-gradient(400px 240px at 90% 100%, rgba(255,255,255,.16), transparent); } .cta-band > * { position: relative; } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255,255,255,.9); font-size: 19px; margin: 14px auto 30px; max-width: 540px; } /* ---------- Footer (injected) ---------- */ footer.site { background: var(--navy); color: rgba(255,255,255,.7); padding: 70px 0 32px; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; } footer.site h4 { color: #fff; font-size: 14px; margin-bottom: 16px; letter-spacing:.04em; } footer.site a { display: block; font-size: 14px; margin-bottom: 10px; color: rgba(255,255,255,.62); transition: color .2s, padding .2s; } footer.site a:hover { color: var(--teal-l); padding-left: 4px; } .foot-brand .logo { color: #fff; margin-bottom: 14px; } .foot-brand p { font-size: 14px; max-width: 290px; color: rgba(255,255,255,.6); } .badges { display: flex; gap: 10px; margin-top: 18px; } .app-badge { border: 1px solid rgba(255,255,255,.25); border-radius: 11px; padding: 9px 14px; font-size: 12px; color: rgba(255,255,255,.85); transition: border-color .2s; } .app-badge:hover { border-color: var(--teal); } .foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 26px; padding-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; } /* ---------- Page header (inner pages) ---------- */ .page-hero { padding: 160px 0 80px; background: transparent; position: relative; overflow: hidden; text-align: center; } .page-hero::before { content:""; position:absolute; inset:0; background: var(--grad-mesh); } .page-hero .wrap { position: relative; } .page-hero .lead { margin: 18px auto 0; } /* ---------- Scroll progress bar ---------- */ .scroll-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--grad-teal); z-index: 9997; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hero-grid, .biz-grid, .spotlight, .split, .split.wide-text { grid-template-columns: minmax(0, 1fr); gap: 38px; } .spotlight.rev .sp-visual, .split.flip .split-media { order: 0; } .phone-card { margin: 0 auto; } .grid-3, .grid-2, .steps, .art-grid, .price-grid { grid-template-columns: 1fr; } .stat-cards { grid-template-columns: 1fr 1fr; } .price-grid { max-width: 440px; margin-left:auto; margin-right:auto; } .media { min-height: 340px; } .media.tall { min-height: 380px; } .media.bleed-r, .media.bleed-l { margin-left: 0; margin-right: 0; border-radius: var(--radius-lg); } section { padding: 70px 0; } .hero { padding: 130px 0 80px; } .nav-links { position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); background: rgb(var(--pg-bg)); flex-direction: column; align-items: stretch; gap: 2px; padding: 84px 16px 28px; box-shadow: -18px 0 50px rgba(0,0,0,.16); transform: translateX(102%); transition: transform .4s var(--ease), background-color var(--theme-ms); z-index: 190; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .nav-links.open { transform: translateX(0); } .nav-links a { padding: 13px 14px; border-radius: 12px; font-size: 16px; } .nav-links a.active::after { display: none; } .nav-toggle { display: block; } .nav-cta .btn { display: none; } /* The drawer (.nav-links, z 190) shares a parent with the logo and the hamburger/X button; positioned elements paint above plain siblings, so without this the drawer covers both. Lift them back on top so the X stays visible and tappable while the drawer is open. */ .nav .logo, .nav-cta { position: relative; z-index: 195; } /* CRITICAL: backdrop-filter on the scrolled header makes the header the containing block for its fixed-position children on mobile Chrome — the drawer then renders clipped inside the ~60px header bar ("menu invisible when opened mid-page"). Phones get a solid header instead of frosted. */ .nav.scrolled { background: rgb(var(--pg-bg)); backdrop-filter: none; -webkit-backdrop-filter: none; } /* while the drawer is open: lock page scroll + solid header above it */ body.menu-open { overflow: hidden; } body.menu-open .nav { background: rgb(var(--pg-bg)); box-shadow: 0 1px 0 rgba(0,0,0,.06); } .nav-backdrop { position: fixed; inset: 0; background: rgba(10,22,34,.4); z-index: 185; opacity: 0; pointer-events: none; transition: opacity .3s; } .nav-backdrop.show { opacity: 1; pointer-events: auto; } /* mega menu becomes a tap-to-expand accordion inside the drawer */ .has-mega { display: block; } .has-mega > .nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; font-weight: 700; } .caret { display: inline-block; font-size: 12px; opacity: .6; } .has-mega.m-open > .nav-link .caret { transform: rotate(180deg); } /* the desktop hover-pill inversion reads as a glitch on touch: neutralise */ .has-mega:hover .nav-link { background: transparent !important; color: rgb(var(--pg-fg)) !important; } .has-mega.m-open > .nav-link { background: rgba(var(--pg-fg),.06) !important; color: rgb(var(--pg-fg)) !important; } .mega-backdrop { display: none; } .mega { display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: none; background: transparent; backdrop-filter: none; padding: 2px 0 8px; z-index: auto; } .mega::before { display: none; } .has-mega.m-open .mega { display: block; } .mega-inner { display: block; padding: 0 !important; max-width: none; } .mega-blurb { display: none; } .mega-grid { grid-template-columns: 1fr; gap: 0; } .mega-item { opacity: 1 !important; transform: none !important; padding: 9px 12px 9px 30px !important; border-radius: 10px !important; } .mega-item::before { position: absolute; left: 8px; top: 13px; margin: 0; } .mega-item::after { display: none; } .mi-title { font-size: 15.5px; font-weight: 700; } .mi-desc { font-size: 12.5px; margin-top: 1px; } .mega-item .mi-ic { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; } /* drawer-only CTA */ .nav-links .drawer-cta { display: flex; justify-content: center; margin-top: 16px; padding: 14px; border-radius: 100px; font-size: 15px; } } @media (max-width: 560px) { .stat-cards, .foot-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .cta-band { padding: 50px 20px; } /* Headline clamp floors (46/52px) are too tall for phones and pushed long words off-screen — scale them to fit a ~330px content width. */ h1 { font-size: clamp(30px, 8.2vw, 44px); line-height: 1.08; } .display { font-size: clamp(38px, 12vw, 60px); } .hero h1, .page-hero h1 { font-size: clamp(32px, 8.6vw, 46px); } .hero p.lead, .page-hero .lead { font-size: 16.5px; } /* Floating badges shrink + hug the corners on phones so they stop covering the card's own rows (overlap seen on mobile). */ .media .badge-float { padding: 9px 12px; gap: 8px; border-radius: 13px; } .media .badge-float .bf-ic { width: 30px; height: 30px; border-radius: 9px; } .media .badge-float b { font-size: 12px; } .media .badge-float span { font-size: 10.5px; } .media .bf-tl { top: 10px; left: 10px; } .media .bf-br { bottom: 10px; right: 10px; } } /* ===================================================================== Futuristic layer, aurora-lit dark bands, glass panels, glow, tech grid ===================================================================== */ .s-dark, .dark { position: relative; overflow: hidden; } /* drifting aurora glow, fades IN only while the dark theme is active */ .s-dark::before, .dark::before { content: ""; position: absolute; inset: -10%; pointer-events: none; z-index: 0; background: radial-gradient(560px 380px at 14% 8%, rgba(0,191,165,.22), transparent 60%), radial-gradient(680px 460px at 88% 92%, rgba(77,234,208,.16), transparent 62%), radial-gradient(420px 320px at 60% 50%, rgba(0,137,123,.14), transparent 60%); animation: auroraDrift 18s ease-in-out infinite alternate; opacity: 0; transition: opacity var(--theme-ms) var(--ease); } /* faint tech grid, masked to fade out at edges */ .s-dark::after, .dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask: radial-gradient(circle at 50% 38%, #000 26%, transparent 74%); mask: radial-gradient(circle at 50% 38%, #000 26%, transparent 74%); transition: opacity var(--theme-ms) var(--ease); } html.theme-dark .s-dark::before, html.theme-dark .dark::before { opacity: 1; } html.theme-dark .s-dark::after, html.theme-dark .dark::after { opacity: .6; } .s-dark > .wrap, .dark > .wrap { position: relative; z-index: 1; } @keyframes auroraDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.1); } } /* glass utility */ .glass { background: rgba(255,255,255,.07); backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255,255,255,.14); } /* media panels: depth + glow */ .media { box-shadow: var(--shadow); } .media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); pointer-events: none; } .media-pine { background: linear-gradient(155deg, #16433C, #0A1D19); } .media-pine, .media-teal { box-shadow: 0 34px 90px rgba(8,30,26,.5), inset 0 0 0 1px rgba(255,255,255,.07); } .media-pine::before, .media-teal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px 300px at 72% 18%, rgba(0,191,165,.4), transparent 60%); } .media-mint { box-shadow: 0 30px 70px rgba(0,137,123,.16), inset 0 0 0 1px rgba(255,255,255,.5); } /* stat cards → glass + glow on hover */ .s-dark .stat, .dark .stat { backdrop-filter: blur(14px); } .s-dark .stat:hover, .dark .stat:hover { box-shadow: 0 0 0 1px rgba(0,191,165,.4), 0 18px 50px rgba(0,0,0,.3); } /* cards: subtle teal glow on hover */ .card:hover { box-shadow: 0 0 0 1px rgba(0,191,165,.35), var(--shadow); } /* buttons: stronger glow */ .btn-primary { box-shadow: 0 10px 30px rgba(0,191,165,.4), 0 0 0 1px rgba(0,191,165,.2); } .btn-primary:hover { box-shadow: 0 16px 44px rgba(0,191,165,.55), 0 0 0 1px rgba(0,191,165,.3); } /* glowing hairline divider */ .glow-line { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(0,191,165,.6), transparent); margin: 0; } /* hero gets an aurora too (light) */ .hero { overflow: hidden; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px 360px at 82% 18%, rgba(0,191,165,.16), transparent 60%); animation: auroraDrift 20s ease-in-out infinite alternate; } /* page-hero dark variant: transparent, theme provides the colour + crossfade */ .page-hero.dark, .page-hero.s-dark { background: transparent; } /* ---------- Real photo media panels (object-fit cover + scrim) ---------- */ .media.photo { background: #0c211d; } .media .media-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Looping video fills a media box just like a photo (video testimonial). */ .media .media-vid { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* OneLab-style video testimonial: small name/role, big quote, clip on the right. Near full-bleed width; a landscape (3:2) media box so the clip shows the full head+shoulders instead of a tall box cropping the top of the head. */ .tstm-split { margin-inline: min(calc(16px - (100vw - var(--maxw)) / 2), 0px); gap: clamp(32px, 4vw, 72px); align-items: center; } .tstm-split .media.tall { min-height: 0; aspect-ratio: 3 / 2; } .tstm-split .media-vid { object-position: center 28%; } /* Portrait-video variant (business pilot testimonial): a tall-ish box shows head + shoulders instead of an extreme face crop from the 3/2 landscape box. */ .tstm-split.tstm-portrait .media.tall { aspect-ratio: 6 / 7; max-width: 580px; margin-inline: auto; } .tstm-split.tstm-portrait .media-vid { object-position: center 24%; } .tstm-meta { margin-bottom: clamp(28px, 4vw, 48px); } .tstm-meta strong { display: block; font-size: 20px; font-weight: 600; color: rgb(var(--pg-fg)); transition: color var(--theme-ms) var(--ease); } .tstm-meta span { display: block; margin-top: 5px; color: rgb(var(--pg-muted)); font-size: 15.5px; transition: color var(--theme-ms) var(--ease); } .tstm-quote { font-size: clamp(18px, 2.1vw, 26px); line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; color: rgb(var(--pg-fg)); transition: color var(--theme-ms) var(--ease); } .media.photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(7,24,21,.05) 0%, rgba(7,24,21,.14) 55%, rgba(7,24,21,.46) 100%); } .media .badge-float { z-index: 3; } .media.photo .phone-card, .media.photo .chat-bubble, .media.photo .mini-chart { position: relative; z-index: 2; } /* (image motion is driven by JS scroll-parallax, so no CSS transform/transition here) */ /* faint photographic backdrop behind inner page heroes. Dark heroes stay very subtle (.16); on cream/light heroes the same low opacity is nearly invisible against the light base, so it's bumped up to actually read. */ .page-hero .ph-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .16; } .page-hero.s-cream .ph-photo { opacity: .30; } .page-hero::before { z-index: 1; } /* Same faint-photo-backdrop language, generalised to any regular (non-hero) section that wants a metaphorical/atmospheric photo behind its text. */ .sec-photo-bg { position: relative; overflow: hidden; } /* --imgo carries the DESIGNED resting opacity so the imgfade load-in can restore it (fading to a hardcoded 1 washed the section out — bug). */ .sec-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .22; --imgo: .22; } .sec-photo-bg.s-dark .sec-bg-img { opacity: .16; --imgo: .16; } /* Slow Ken-Burns drift on section photo backdrops — barely-perceptible life, compositor-only; the global reduced-motion rule disables it. */ .sec-photo-bg .sec-bg-img { animation: bgDrift 26s ease-in-out infinite alternate; will-change: transform; } @keyframes bgDrift { from { transform: scale(1); } to { transform: scale(1.07) translateY(-1.5%); } } /* Readability over the photo (owner request): lead, stat labels and footnote run dark ink on light photo sections instead of the muted grey. */ .sec-photo-bg:not(.s-dark) .lead { color: var(--ink); } .sec-photo-bg:not(.s-dark) .stat .l { color: var(--ink); } .sec-photo-bg:not(.s-dark) .stats-note, .sec-photo-bg:not(.s-dark) p[data-i18n="stats.note"] { color: var(--ink) !important; } .page-hero .wrap { z-index: 2; } /* ---------- Cinematic headline word reveal ---------- */ .w { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(7px); transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease); transition-delay: calc(var(--wi, 0) * .035s); will-change: transform, opacity, filter; } .split-in .w { opacity: 1; transform: none; filter: none; } /* HERO gets the full choreography: words start as the curtain lifts, rise further with a slower per-word cadence so the line visibly "builds". */ .hero h1 .w { transform: translateY(.75em); filter: blur(10px); transition-duration: .75s, .85s, .75s; /* base .6s: the curtain needs ~.65s to clear the headline — starting earlier hides the first words' entrance behind it (owner: "can't find the wow") */ transition-delay: calc(.6s + var(--wi, 0) * .08s); } /* End state MUST outrank the rule above (it beats the generic .split-in .w on specificity, which left hero words permanently blurred — bug). */ .hero h1.split-in .w { opacity: 1; transform: none; filter: none; } /* Signature moment: an underline sweeps beneath the key gradient word once the headline has landed (scaleX 0->1, compositor-only). */ .hero h1 .grad-text { position: relative; display: inline-block; } .hero h1 .grad-text::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: .02em; height: .09em; border-radius: 99px; background: var(--grad-teal); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease-curtain) 1.5s; } .hero h1.split-in .grad-text::after { transform: scaleX(1); } /* ---------- Lenis smooth scroll (loaded from CDN at runtime) ---------- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ===================================================================== Futuristic layer 2 — grain, bento active-grid, spotlight glow, clip reveals, sticky card-stack, hero geometry, gradient shimmer ===================================================================== */ /* --- Film grain (SVG noise, fixed, very subtle) --- */ #grain { position: fixed; inset: -60%; width: 220%; height: 220%; z-index: 9996; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 150px 150px; animation: grain 1.1s steps(3) infinite; } @keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-7px,5px)} 66%{transform:translate(5px,-6px)} 100%{transform:translate(0,0)} } /* --- Gradient-text shimmer --- */ .grad-text { background: linear-gradient(100deg, #00BFA5 0%, #4DEAD0 28%, #00897B 55%, #4DEAD0 78%, #00BFA5 100%); background-size: 230% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7.5s linear infinite; } @keyframes shimmer { to { background-position: 230% center; } } /* --- Pointer-tracking spotlight glow on cards & tiles --- */ .card, .b-tile { overflow: hidden; } .card::before, .b-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .35s var(--ease); background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(0,191,165,.18), transparent 62%); } .card:hover::before, .b-tile:hover::before { opacity: 1; } .card > *, .b-tile > * { position: relative; z-index: 1; } /* --- BENTO active grid --- */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; gap: 16px; margin-top: 52px; } .b-tile { position: relative; border-radius: 22px; padding: 24px; background: rgba(var(--pg-fg), .045); border: 1px solid rgba(var(--pg-fg), .1); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; transition: transform .4s var(--ease), border-color .4s, background-color var(--theme-ms); } .b-tile:hover { transform: translateY(-6px); border-color: rgba(0,191,165,.5); } .b-tile .b-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--bg-mint); color: var(--teal-d); display: grid; place-items: center; } .b-tile .b-ic svg { width: 24px; height: 24px; } .b-tile h3 { font-size: 19px; color: rgb(var(--pg-fg)); transition: color var(--theme-ms); } .b-tile p { font-size: 13.5px; color: rgb(var(--pg-muted)); margin-top: 4px; transition: color var(--theme-ms); } .b-tile .big-num { font-size: clamp(34px, 4vw, 52px); font-weight: 900; background: linear-gradient(135deg,#4DEAD0,#00BFA5); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em; } .b-a { grid-column: span 2; grid-row: span 2; } .b-wide { grid-column: span 2; } /* feature (big) tile — always a deep-pine glass slab with aurora */ .b-tile.feat { background: linear-gradient(150deg, var(--ink-dark-2), var(--ink-dark)); border-color: transparent; box-shadow: 0 30px 70px rgba(8,30,26,.30); } .b-tile.feat h3 { color: #fff; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.02em; } .b-tile.feat p { color: var(--on-dark-soft); font-size: 15px; } .b-tile.feat .b-ic { background: rgba(255,255,255,.1); color: var(--teal-l); } .b-tile.feat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(380px 260px at 82% 12%, rgba(0,191,165,.42), transparent 60%); } /* --- Sticky card-stack ("How it works" peel) --- */ .stack { position: relative; } /* Scroll-drawn progress rail (homepage How-it-works): a teal line fills downward as the section scrolls through the viewport (JS drives --flow 0..1, transform-only), and each step's number lights up as the line reaches its card. .flow is added by bindFlowRail() — no JS, no rail. */ .stack.flow { padding-left: 34px; } .stack.flow::before, .stack.flow::after { content: ""; position: absolute; left: 10px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; } .stack.flow::before { background: rgba(var(--pg-fg), .12); } .stack.flow::after { background: linear-gradient(180deg, #4DEAD0, #00BFA5); box-shadow: 0 0 12px rgba(0,191,165,.35); transform: scaleY(var(--flow, 0)); transform-origin: top center; } .stack.flow .stack-card .sc-num { filter: grayscale(.6) brightness(.92); opacity: .7; transition: filter .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease); } .stack.flow .stack-card.lit .sc-num { filter: none; opacity: 1; transform: scale(1.06); } .stack-card { position: sticky; min-height: 300px; margin-bottom: 26px; border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: 88px 1fr; gap: 28px; align-items: center; /* SOLID bg, no backdrop-filter: blurring the backdrop of 4 full-width sticky cards forced huge repaints every scroll frame (features-page jank). The frosted look was invisible anyway — the backdrop is the same colour. */ background: rgb(var(--pg-bg)); border: 1px solid rgba(var(--pg-fg), .12); box-shadow: var(--shadow); transition: background-color var(--theme-ms), border-color var(--theme-ms); } /* Peel dim: bindStack drives --peel (0→1) as the next card slides over; a compositor-only opacity fade replaces the old filter:brightness() repaint. */ [data-stack] .stack-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; background: rgba(10, 22, 34, .28); opacity: var(--peel, 0); pointer-events: none; } /* Dark spotlight card is SELF-dark (owner: the card alone carries the colour — it no longer flips the whole page; excluded from bindTheme's dark-band list). Static colours only: nothing here may depend on the animated --pg-* tokens. */ .stack-card.s-dark { background: var(--ink-dark); border-color: rgba(255,255,255,.10); } .stack-card.s-dark h2, .stack-card.s-dark h3 { color: var(--on-dark); } .stack-card.s-dark p, .stack-card.s-dark .lead { color: var(--on-dark-soft); } .stack-card.s-dark .split-list li { color: var(--on-dark); } .stack-card.s-dark .eyebrow { color: var(--teal-l); } .stack-card.s-dark .eyebrow::before { background: var(--teal-l); } .stack-card:nth-child(1) { top: 116px; } .stack-card:nth-child(2) { top: 146px; } .stack-card:nth-child(3) { top: 176px; } .stack-card:nth-child(4) { top: 206px; } .stack-card .sc-num { width: 88px; height: 88px; border-radius: 26px; background: var(--grad-teal); color: #fff; font-weight: 900; font-size: 34px; display: grid; place-items: center; box-shadow: var(--shadow-teal); } .stack-card h3 { font-size: clamp(22px, 3vw, 34px); } .stack-card p { color: rgb(var(--pg-muted)); font-size: 16.5px; margin-top: 8px; transition: color var(--theme-ms); } /* --- Hero geometry (rings + dot grid) --- */ .hero-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .hero-deco .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0,191,165,.22); animation: float 11s ease-in-out infinite; } .hero-deco .ring.r1 { width: 560px; height: 560px; top: -180px; right: -130px; } .hero-deco .ring.r2 { width: 340px; height: 340px; top: -70px; right: -10px; border-color: rgba(0,191,165,.14); animation-delay: -4s; } .hero-deco .dots { position: absolute; width: 190px; height: 150px; left: 1%; bottom: 9%; opacity: .45; background-image: radial-gradient(rgba(0,137,123,.4) 1.5px, transparent 1.6px); background-size: 18px 18px; } /* --- Clip-path photo reveal (wipe) — driven by JS .anim/.shown --- */ html.anim .media.photo { clip-path: inset(0 0 103% 0 round 26px); transition: clip-path 1.05s var(--ease) .04s; } html.anim .media.photo.shown { clip-path: inset(0 0 0 0 round 26px); } /* Cards that sit at the very top of a page (visible with zero scroll) are exempt: the IntersectionObserver in bindClipReveal() sometimes misses its initial-visibility tick when Lenis hasn't finished settling scroll position yet, leaving the photo permanently clipped to nothing. Always- visible is safer than "maybe never appears" for above-the-fold media. */ html.anim .media.photo.no-reveal-clip { clip-path: none; } /* --- Bento responsive --- */ @media (max-width: 960px) { .bento { grid-template-columns: repeat(2, 1fr); } .b-a { grid-column: span 2; grid-row: span 1; } .b-wide { grid-column: span 2; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .b-a, .b-wide { grid-column: span 1; } .b-tile { min-height: 150px; } .stack-card { grid-template-columns: 1fr; gap: 16px; min-height: 0; } } /* --- Image entrance: photos fade in when their bytes arrive (bindImgFade adds html.imgfade + per-img .ld on load). OPACITY ONLY; never put transform/transition:all on .media-img (parallax history: JS owns transform). Without JS the imgfade class never lands, so images show normally. --- */ html.imgfade img.media-img, html.imgfade img.scene-img, html.imgfade img.sec-bg-img { opacity: 0; transition: opacity .6s ease; } /* Fade back to the element's DESIGNED opacity (--imgo), not a blanket 1 — sec-bg-img ghosts rest at .22/.16 and were being washed out to full. */ html.imgfade img.media-img.ld, html.imgfade img.scene-img.ld, html.imgfade img.sec-bg-img.ld { opacity: var(--imgo, 1); } /* Reduced-motion: still hide-until-loaded (no scanline), but reveal INSTANTLY with no fade animation - honouring the motion preference while killing the partial-paint. */ @media (prefers-reduced-motion: reduce) { html.imgfade img.media-img, html.imgfade img.scene-img, html.imgfade img.sec-bg-img { transition: none; } } /* Themed skeleton behind photo tiles so the pre-load state reads as an intentional placeholder, never a white flash. Colour variants override it. */ .media.photo { background: linear-gradient(150deg, #EAF4F1, #DCEDE8); } /* --- Cinematic scene band (static image, no scroll-driven expansion) --- */ /* Cream base + bottom padding = a real gap below the photo. The cream fill covers the fixed dark page-theme layer so the gap can't turn navy. */ .scene { position: relative; height: auto; padding: 0 0 180px; background: var(--cream); } /* MUST be positioned: .scene-frame is absolute inset:0 and resolves against the nearest positioned ancestor. When this was static, the frame anchored to .scene itself, so the photo stretched down THROUGH the 180px cream gap and the footer's rounded corners sat directly on the image (mobile bug report). */ .scene .scene-sticky { position: relative; height: 58vh; overflow: hidden; display: grid; place-items: center; } .scene .scene-frame { position: absolute; inset: 0; overflow: hidden; clip-path: none; } /* Photo runs soft-focus so the caption owns the moment (owner request — same "image recedes, text leads" treatment as the iceberg band). Static blur is a one-time paint (never animated); the small scale hides blurred edge fringe. */ .scene .scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; transform: scale(1.05); filter: blur(7px); } /* Veil: readable text up top, self-contained dark band (no bleed into footer). */ .scene .scene-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,21,.38) 0%, rgba(8,24,21,.44) 42%, rgba(8,24,21,.66) 100%); } /* Homepage: the footer's dark rounded "sheet" follows the cream gap set on .scene above. NOTE the selector: app.js replaces