/* ============================================================= DoLessGetMore.ai — v15 · "Luxury Tech, properly" References (real fetch): Anthropic, Linear, Stripe, Cursor, Vercel, Mistral, Hume. Inter sans throughout. Cobalt accent. Restraint = luxury. ============================================================= */ :root { /* Palette — soft warm white + rich charcoal + electric cobalt */ --bg: #FFFFFF; /* pure white */ --paper: #FAFAF7; /* near-white, gentle warm cast (Anthropic-coded) */ --ink: #0F1117; /* rich near-black charcoal */ --ink-soft: #4B5060; /* secondary text */ --ink-softer: #8A8E9C; /* tertiary / labels */ --rule: #E6E6E2; /* hairline */ --rule-soft: #F1F1ED; --black: #07080F; /* deepest charcoal for dark sections */ --accent: #2C5FFF; /* electric cobalt — Stripe/Linear-coded */ --accent-deep: #1E40CC; /* deeper cobalt */ --accent-pale: #A4BAFF; /* soft cobalt for dark backgrounds */ --accent-soft: #EAF0FF; /* cobalt wash */ --grad-start: #EAF0FF; /* hero gradient — soft cobalt wash */ --grad-mid: #F5F7FF; --grad-end: #FFFFFF; /* Typography — Inter (sans) + JetBrains Mono. No serif. */ --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --f-display: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --f-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; /* Spacing */ --pad-x: clamp(28px, 6vw, 96px); --section-y: clamp(96px, 13vw, 200px); --hero-y: clamp(140px, 18vw, 260px); --max-w: 1320px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-slow: 1200ms; --t-med: 560ms; --t-fast: 240ms; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-sans); font-size: 16px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv02", "cv11"; /* Inter stylistic alternates */ letter-spacing: -0.005em; /* clip, NOT hidden: overflow-x:hidden silently makes a scroll container, which hijacks every scroll-driven animation-timeline: view() on the page (they track body instead of the viewport and read as permanently finished). overflow-x:clip gives the same sideways-scroll protection without that. */ overflow-x: clip; } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-pale); color: var(--ink); } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0); border-bottom: 1px solid transparent; transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease); } .nav.is-scrolled { background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--rule); } .nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 22px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 32px; } /* THE LIVING WORDMARK — the slash gently breathes (scales up and back). Stays a slash always — no rotation that produced broken intermediates. */ .nav .nav-mark .dot { display: inline-block; transform-origin: 50% 50%; animation: navSlashBreath 4.2s ease-in-out infinite; } @keyframes navSlashBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.10); } } /* THE CURATED INDEX NAV — luxury editorial layout. Logo left · center nav with mono numerals + glide-rail + champagne dot · CTA right. */ .nav.nav-curated .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; } .nav-curated .nav-mark { justify-self: start; } .nav-curated .nav-center-wrap { justify-self: center; position: relative; } .nav-curated > .nav-inner > .nav-cta { justify-self: end; } .nav-curated .nav-burger { display: none; } .nav-curated .nav-links { display: flex; gap: 44px; list-style: none; margin: 0; padding: 0; align-items: flex-end; } .nav-curated .nav-links a { display: block; text-align: center; font-family: var(--f-sans); font-size: 14px; font-weight: 500; color: var(--ink-soft); text-decoration: none; padding: 4px 0 6px; transition: color 0.25s ease; letter-spacing: -0.005em; position: relative; } .nav-curated .nav-links a:hover, .nav-curated .nav-links a.is-current { color: var(--ink); } /* THE DRAWN UNDERLINE — champagne hairline that draws on hover, anchored at the left, scales horizontally. Erases right-to-left on mouseleave. */ .nav-curated .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #DBB76E; transform: scaleX(0); transform-origin: left center; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .nav-curated .nav-links a:hover::after, .nav-curated .nav-links a.is-current::after { transform: scaleX(1); } /* THE MAGNETIC LIFT CTA — cobalt-filled pill that rises off the page on hover with a softer, larger drop shadow. Tactile premium feel. (LOCKED) */ .nav.nav-curated .nav-cta { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 11px 22px; background: var(--accent); color: #FFFFFF; font-family: var(--f-sans); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; text-decoration: none; border: none; border-radius: 8px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, box-shadow 0.45s ease; box-shadow: 0 2px 8px rgba(44, 95, 255, 0.22); will-change: transform; } .nav-cta-arrow { display: inline-block; font-family: var(--f-sans); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .nav.nav-curated .nav-cta:hover { transform: translateY(-3px); background: var(--accent-deep, #1F4ED8); box-shadow: 0 12px 28px rgba(44, 95, 255, 0.48), 0 4px 12px rgba(44, 95, 255, 0.30); } .nav.nav-curated .nav-cta:hover .nav-cta-arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .nav.nav-curated .nav-cta { transition: background 0.35s ease, box-shadow 0.45s ease; } .nav-cta-arrow { transition: none; } } /* THE INK BLOOM hero — canvas re-shown, renders procedural champagne ink blooms that diffuse outward from cursor positions. */ .hero.is-typographic.is-ink .hero-fx-canvas { display: block; } /* HERO OPTION #1 — THE BREATHING SPHERE. */ .hero.is-typographic.is-sphere .hero-fx-canvas { display: none; } .hero-breathing-sphere { position: absolute; top: 50%; left: 50%; width: clamp(560px, 80vmin, 980px); height: clamp(560px, 80vmin, 980px); border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient( circle, rgba(120, 152, 255, 0.26) 0%, rgba(120, 152, 255, 0.15) 25%, rgba(120, 152, 255, 0.06) 50%, transparent 75% ); filter: blur(24px); transform: translate(-50%, -50%) scale(1); animation: sphereBreath 6s ease-in-out infinite; } @keyframes sphereBreath { 0%, 100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.88; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } } /* HERO OPTION #3 — THE PULSE WAVE. A continuous EKG-style heartbeat line traces across the lower portion of the hero, scrolling left to right slowly. Soft cobalt, glow halo. Visualizes "the business has a pulse" — energy rhythm without urgency. */ .hero.is-typographic.is-pulse .hero-fx-canvas { display: none; } .hero-pulse-wave { position: absolute; bottom: 22%; left: 0; width: 100%; height: 80px; overflow: hidden; pointer-events: none; z-index: 0; mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%); } .hero-pulse-wave svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; animation: pulseScroll 14s linear infinite; filter: drop-shadow(0 0 6px rgba(120, 152, 255, 0.6)); } @keyframes pulseScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* HERO OPTION — THE STILL ATMOSPHERE. No motion, no canvas. Just chiaroscuro lighting: a soft warm pool centered on the headline, cool cobalt moonlight from the upper-left, deep cobalt wash in the lower-right, and an edge vignette. Plus film grain over the whole thing so it never looks digital. One small champagne dot pulses beside the microline as the only living signal. Type carries the rest. */ .hero.is-typographic.is-still .hero-fx-canvas { display: none; } .hero.is-typographic.is-still { background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(228, 192, 122, 0.08) 0%, rgba(228, 192, 122, 0.02) 38%, rgba(228, 192, 122, 0) 72%), radial-gradient(ellipse 78% 78% at 22% 18%, rgba(80, 120, 230, 0.20) 0%, rgba(80, 120, 230, 0.06) 38%, rgba(80, 120, 230, 0) 68%), radial-gradient(ellipse 65% 70% at 82% 96%, rgba(50, 80, 170, 0.14) 0%, rgba(50, 80, 170, 0.04) 38%, rgba(50, 80, 170, 0) 62%), radial-gradient(ellipse 115% 115% at 50% 50%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.48) 100%), #050609; } .hero.is-typographic.is-still::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.05; mix-blend-mode: overlay; } .hero.is-typographic.is-still .hero-inner { position: relative; z-index: 2; } /* THE QUIET CONSTELLATION — 8 invisible stage nodes positioned on a true ellipse around the headline. Fade in on cursor proximity; label appears within close range. Click a node to activate the connecting loop. */ .hero-stages { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .hero-stage { --prox: 0; --prox-close: 0; position: absolute; width: 0; height: 0; pointer-events: auto; cursor: pointer; } /* 56px invisible hitbox centered on the anchor point. */ .hero-stage::before { content: ""; position: absolute; top: -28px; left: -28px; width: 56px; height: 56px; border-radius: 50%; } /* The closed loop — an SVG ellipse through all 8 nodes. Invisible at rest; when the cursor enters the hero, a soft spotlight follows it and reveals only the arc the cursor is currently over. */ .hero-loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.55s ease; -webkit-mask-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0) 100%); } .hero.is-typographic.is-still.is-active-loop .hero-loop-svg { opacity: 1; } .hero-stage-dot { position: absolute; top: -3.5px; left: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: #DBB76E; opacity: var(--prox); box-shadow: 0 0 calc(6px + 12px * var(--prox)) rgba(228, 192, 122, calc(0.55 * var(--prox))), 0 0 calc(14px + 20px * var(--prox)) rgba(228, 192, 122, calc(0.25 * var(--prox))); transition: opacity 0.35s ease, box-shadow 0.35s ease; } .hero-stage-label { position: absolute; font-family: var(--f-mono, "JetBrains Mono", monospace); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(228, 192, 122, 0.92); opacity: var(--prox-close); transition: opacity 0.3s ease; white-space: nowrap; text-shadow: 0 0 12px rgba(228, 192, 122, 0.35); } /* Position each label OUTWARD from the ellipse center so the line passes through the dot but never through the label. */ .hero-stage.dir-n .hero-stage-label { bottom: 14px; top: auto; left: 0; transform: translateX(-50%); } .hero-stage.dir-ne .hero-stage-label { bottom: 10px; top: auto; left: 12px; } .hero-stage.dir-e .hero-stage-label { left: 16px; top: 0; transform: translateY(-50%); } .hero-stage.dir-se .hero-stage-label { top: 14px; left: 12px; } .hero-stage.dir-s .hero-stage-label { top: 14px; left: 0; transform: translateX(-50%); } .hero-stage.dir-sw .hero-stage-label { top: 14px; right: 12px; left: auto; } .hero-stage.dir-w .hero-stage-label { right: 16px; left: auto; top: 0; transform: translateY(-50%); } .hero-stage.dir-nw .hero-stage-label { bottom: 10px; top: auto; right: 12px; left: auto; } @media (max-width: 720px) { .hero-stages { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-stage-dot, .hero-stage-label { transition: none; } } .hero-pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #DBB76E; margin-right: 9px; vertical-align: 1px; box-shadow: 0 0 6px rgba(228, 192, 122, 0.6); animation: heroPulseDot 2.4s ease-in-out infinite; } @keyframes heroPulseDot { 0%, 100% { opacity: 0.55; box-shadow: 0 0 4px rgba(228, 192, 122, 0.45); } 50% { opacity: 1; box-shadow: 0 0 10px rgba(228, 192, 122, 0.85), 0 0 20px rgba(228, 192, 122, 0.35); } } @media (prefers-reduced-motion: reduce) { .hero-pulse-dot { animation: none; opacity: 0.85; } } /* HERO OPTION — THE STATIC FIELD. Cobalt charge points scattered across the entire hero, each pulsing on its own rhythm. When the cursor (or finger) approaches, nearby points light champagne and jagged electric arcs jump from cursor to each lit point. Distributed so it harmonizes with the page instead of bisecting it. */ .hero.is-typographic.is-field .hero-fx-canvas { display: none; } .hero-field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* HERO OPTION — THE LIVE WIRE. A horizontal cobalt wire stretched across the hero with a champagne pulse traveling left-to-right. When the cursor (or finger) moves through the hero, a bright champagne hot spot appears on the wire at the cursor's x-position with a vertical electric arc between cursor and wire. Reads as live circuit reacting to touch. */ .hero.is-typographic.is-wire .hero-fx-canvas { display: none; } .hero-wire { --mx: 50%; --my: 50%; position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } /* the wire itself — fades in at edges so it reads as a single continuous beam */ .hero-wire-line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent 0%, rgba(120, 152, 255, 0.55) 8%, rgba(140, 170, 255, 0.70) 50%, rgba(120, 152, 255, 0.55) 92%, transparent 100%); box-shadow: 0 0 8px rgba(120, 152, 255, 0.45), 0 0 22px rgba(120, 152, 255, 0.22); } /* traveling champagne pulse — flows left-to-right continuously */ .hero-wire-pulse { position: absolute; top: 50%; left: 0; width: 90px; height: 6px; margin-top: -3px; border-radius: 4px; background: linear-gradient(90deg, rgba(228, 192, 122, 0) 0%, rgba(228, 192, 122, 0.85) 50%, rgba(228, 192, 122, 0) 100%); filter: blur(0.5px); box-shadow: 0 0 18px rgba(228, 192, 122, 0.85), 0 0 40px rgba(228, 192, 122, 0.40); animation: wirePulseTravel 6s linear infinite; } .hero-wire-pulse.is-delayed { animation-delay: 3s; } @keyframes wirePulseTravel { 0% { transform: translateX(-120px); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(calc(100vw + 60px)); opacity: 0; } } /* hot spot — follows cursor x, sits on the wire */ .hero-wire-hotspot { position: absolute; top: 50%; left: var(--mx); width: 28px; height: 28px; margin-top: -14px; margin-left: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 170, 0.95) 0%, rgba(228, 192, 122, 0.55) 40%, rgba(228, 192, 122, 0) 100%); box-shadow: 0 0 24px rgba(228, 192, 122, 0.85), 0 0 60px rgba(228, 192, 122, 0.45); opacity: 0; transition: opacity 0.25s ease; } /* electric arc — vertical beam between wire and cursor.y */ .hero-wire-arc { position: absolute; left: var(--mx); top: min(var(--my), 50%); bottom: calc(100% - max(var(--my), 50%)); width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(228, 192, 122, 0.85), rgba(255, 230, 170, 0.55), rgba(228, 192, 122, 0.85)); filter: blur(0.5px); box-shadow: 0 0 8px rgba(228, 192, 122, 0.65), 0 0 18px rgba(228, 192, 122, 0.35); opacity: 0; transition: opacity 0.25s ease; animation: arcFlicker 0.18s steps(2) infinite; } .hero.is-typographic.is-wire.is-live .hero-wire-hotspot, .hero.is-typographic.is-wire.is-live .hero-wire-arc { opacity: 1; } @keyframes arcFlicker { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX( 1px); } } @media (prefers-reduced-motion: reduce) { .hero-wire-pulse, .hero-wire-arc { animation: none; } } /* HERO OPTION — THE ORBITING SATELLITES. A champagne core at center with 3 cobalt satellites orbiting on three rings at different speeds. Outermost orbits the opposite direction. Closed-loop made literal. Bold, kinetic, mobile-perfect. */ .hero.is-typographic.is-orbit .hero-fx-canvas { display: none; } .hero-orbit { --r1: clamp(80px, 16vmin, 150px); --r2: clamp(140px, 28vmin, 260px); --r3: clamp(210px, 42vmin, 400px); position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; z-index: 1; } .hero-orbit-ring { position: absolute; top: 0; left: 0; border-radius: 50%; border: 1px dashed rgba(120, 152, 255, 0.16); } .hero-orbit-ring.r1 { width: calc(var(--r1) * 2); height: calc(var(--r1) * 2); transform: translate(calc(var(--r1) * -1), calc(var(--r1) * -1)); } .hero-orbit-ring.r2 { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); transform: translate(calc(var(--r2) * -1), calc(var(--r2) * -1)); } .hero-orbit-ring.r3 { width: calc(var(--r3) * 2); height: calc(var(--r3) * 2); transform: translate(calc(var(--r3) * -1), calc(var(--r3) * -1)); } .hero-orbit-core { position: absolute; top: -8px; left: -8px; width: 16px; height: 16px; border-radius: 50%; background: #DBB76E; box-shadow: 0 0 16px rgba(228, 192, 122, 0.85), 0 0 36px rgba(228, 192, 122, 0.45), 0 0 70px rgba(228, 192, 122, 0.20); animation: orbitCorePulse 2.4s ease-in-out infinite; } .hero-orbit-sat { position: absolute; top: 0; left: 0; width: 0; height: 0; animation: orbitSpin var(--dur, 10s) linear infinite; } .hero-orbit-sat.r1 { --dur: 6s; } .hero-orbit-sat.r2 { --dur: 11s; } .hero-orbit-sat.r3 { --dur: 17s; animation-direction: reverse; } .hero-orbit-sat::before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: rgba(120, 152, 255, 0.95); box-shadow: 0 0 14px rgba(120, 152, 255, 0.75), 0 0 30px rgba(120, 152, 255, 0.35); } .hero-orbit-sat.r1::before { top: calc(var(--r1) * -1 - 6px); left: -6px; } .hero-orbit-sat.r2::before { top: calc(var(--r2) * -1 - 6px); left: -6px; } .hero-orbit-sat.r3::before { top: calc(var(--r3) * -1 - 6px); left: -6px; } @keyframes orbitSpin { to { transform: rotate(360deg); } } @keyframes orbitCorePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.85; } } /* HERO OPTION — THE CONSTELLATION LOOP. Eight champagne dots arranged in a circle (one per business stage), with a thin cobalt connecting ring. A single pulse travels around the loop, lighting each dot champagne as it passes — literally the 8-stage closed loop, animated. Bold, brand-correlative, mobile-perfect. */ .hero.is-typographic.is-loop8 .hero-fx-canvas { display: none; } .hero-loop8 { --r: clamp(150px, 28vmin, 260px); position: absolute; top: 50%; left: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%); pointer-events: none; z-index: 1; } .hero-loop8-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(120, 152, 255, 0.22); box-shadow: 0 0 80px rgba(120, 152, 255, 0.08) inset; } .hero-loop8-core { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgba(120, 152, 255, 0.45); transform: translate(-50%, -50%); box-shadow: 0 0 12px rgba(120, 152, 255, 0.30); } .hero-loop8-dot { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin-top: -7px; margin-left: -7px; border-radius: 50%; background: rgba(120, 152, 255, 0.32); animation: loop8Pulse 8s linear infinite; } .hero-loop8-dot:nth-child(3) { transform: rotate(0deg) translateY(calc(var(--r) * -1)); animation-delay: 0s; } .hero-loop8-dot:nth-child(4) { transform: rotate(45deg) translateY(calc(var(--r) * -1)); animation-delay: 1s; } .hero-loop8-dot:nth-child(5) { transform: rotate(90deg) translateY(calc(var(--r) * -1)); animation-delay: 2s; } .hero-loop8-dot:nth-child(6) { transform: rotate(135deg) translateY(calc(var(--r) * -1)); animation-delay: 3s; } .hero-loop8-dot:nth-child(7) { transform: rotate(180deg) translateY(calc(var(--r) * -1)); animation-delay: 4s; } .hero-loop8-dot:nth-child(8) { transform: rotate(225deg) translateY(calc(var(--r) * -1)); animation-delay: 5s; } .hero-loop8-dot:nth-child(9) { transform: rotate(270deg) translateY(calc(var(--r) * -1)); animation-delay: 6s; } .hero-loop8-dot:nth-child(10) { transform: rotate(315deg) translateY(calc(var(--r) * -1)); animation-delay: 7s; } @keyframes loop8Pulse { 0%, 100% { background: rgba(120, 152, 255, 0.32); box-shadow: 0 0 0 rgba(228, 192, 122, 0); } 6%, 14% { background: #DBB76E; box-shadow: 0 0 14px rgba(228, 192, 122, 0.90), 0 0 32px rgba(228, 192, 122, 0.45), 0 0 60px rgba(228, 192, 122, 0.20); } } /* HERO OPTION — THE SONAR PULSE. A bold champagne dot at hero center with cobalt rings radiating outward continuously like radar/sonar sweeps. Tech-coded, hypnotic, mobile-perfect. */ .hero.is-typographic.is-sonar .hero-fx-canvas { display: none; } .hero-sonar { position: absolute; top: 50%; left: 50%; width: clamp(400px, 75vmin, 720px); height: clamp(400px, 75vmin, 720px); transform: translate(-50%, -50%); pointer-events: none; z-index: 1; } .hero-sonar-dot { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: #DBB76E; box-shadow: 0 0 16px rgba(228, 192, 122, 0.85), 0 0 36px rgba(228, 192, 122, 0.45), 0 0 70px rgba(228, 192, 122, 0.20); transform: translate(-50%, -50%); animation: sonarDotPulse 2.2s ease-in-out infinite; z-index: 2; } .hero-sonar-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid rgba(120, 152, 255, 0.5); box-shadow: 0 0 30px rgba(120, 152, 255, 0.20); transform: scale(0); opacity: 0; animation: sonarRing 5.6s ease-out infinite; } .hero-sonar-ring:nth-child(2) { animation-delay: 0s; } .hero-sonar-ring:nth-child(3) { animation-delay: 1.4s; } .hero-sonar-ring:nth-child(4) { animation-delay: 2.8s; } .hero-sonar-ring:nth-child(5) { animation-delay: 4.2s; } @keyframes sonarRing { 0% { transform: scale(0); opacity: 0.85; border-width: 2px; } 60% { opacity: 0.30; } 100% { transform: scale(1); opacity: 0; border-width: 0.5px; } } @keyframes sonarDotPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.85; } } /* HERO OPTION — THE LIVE OPERATIONS STREAM. A vertical column of mono cobalt text scrolling upward continuously, like a live ops feed. Says "your business is doing things right now." */ .hero.is-typographic.is-ops .hero-fx-canvas { display: none; } .hero-ops-stream { position: absolute; top: 0; left: clamp(20px, 4vw, 64px); bottom: 0; width: 300px; pointer-events: none; z-index: 1; overflow: hidden; mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%); } .hero-ops-stream-inner { display: flex; flex-direction: column; gap: 11px; animation: opsScroll 36s linear infinite; padding-top: 50%; } .ops-event { font-family: var(--f-mono); font-size: 11px; color: rgba(120, 152, 255, 0.55); letter-spacing: 0.04em; text-shadow: 0 0 6px rgba(120, 152, 255, 0.25); white-space: nowrap; } .ops-event.is-warm { color: rgba(228, 192, 122, 0.62); text-shadow: 0 0 6px rgba(228, 192, 122, 0.28); } .ops-event-time { color: rgba(180, 200, 255, 0.35); margin-left: 6px; } .ops-event.is-warm .ops-event-time { color: rgba(240, 220, 180, 0.40); } @keyframes opsScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } @media (max-width: 900px) { .hero-ops-stream { left: auto; right: 16px; width: 220px; opacity: 0.6; } .ops-event { font-size: 10px; } } /* HERO OPTION — THE BIG LOOP RING. A bold cobalt ring sits at hero center, large enough to be the dominant visual at any screen size. A bright champagne dot orbits the ring continuously, one lap every 14 seconds. The literal closed-loop product, made visible. */ .hero.is-typographic.is-loop .hero-fx-canvas { display: none; } .hero-big-loop { position: absolute; top: 50%; left: 50%; width: clamp(420px, 65vmin, 580px); height: clamp(420px, 65vmin, 580px); transform: translate(-50%, -50%); pointer-events: none; z-index: 1; } @media (max-width: 600px) { .hero-big-loop { width: 85vw; height: 85vw; } } .hero-big-loop-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(120, 152, 255, 0.42); box-shadow: 0 0 60px rgba(120, 152, 255, 0.20), inset 0 0 40px rgba(120, 152, 255, 0.06); } .hero-big-loop-orbit { position: absolute; inset: 0; animation: bigLoopRotate 14s linear infinite; } .hero-big-loop-dot { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: #DBB76E; box-shadow: 0 0 14px rgba(228, 192, 122, 0.85), 0 0 30px rgba(228, 192, 122, 0.45), 0 0 60px rgba(228, 192, 122, 0.20); transform: translateX(-50%); } @keyframes bigLoopRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* HERO OPTION #5 — THE CHARGING INDICATOR. A thin cobalt bar at the bottom edge of the hero that fills from left to right like a device charging, holds full, fades, and refills. Continuous tech rhythm. */ .hero.is-typographic.is-charging .hero-fx-canvas { display: none; } .hero-charging-indicator { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.04); pointer-events: none; z-index: 0; overflow: hidden; } .hero-charging-indicator::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0; background: linear-gradient( 90deg, rgba(90, 127, 255, 0) 0%, rgba(120, 152, 255, 0.4) 35%, rgba(140, 170, 255, 0.85) 80%, rgba(180, 200, 255, 1) 100% ); box-shadow: 0 0 12px rgba(120, 152, 255, 0.6); animation: chargingFill 9s ease-out infinite; } @keyframes chargingFill { 0% { width: 0; opacity: 0.6; } 80% { width: 100%; opacity: 1; } 86% { width: 100%; opacity: 1; } 92% { width: 100%; opacity: 0.5; } 98% { width: 100%; opacity: 0; } 100% { width: 0; opacity: 0; } } /* HERO OPTION #4 — THE AURORA STRAND. A wide, soft cobalt aurora band drifts horizontally across the upper portion of the hero, like northern lights seen from above. Layered radial gradients with heavy blur. Pure atmospheric energy, no hard edges. */ .hero.is-typographic.is-aurora .hero-fx-canvas { display: none; } .hero-aurora-strand { position: absolute; top: 18%; left: -50%; width: 200%; height: 220px; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 22% 85% at 12% 50%, rgba(120, 152, 255, 0.22), transparent 70%), radial-gradient(ellipse 28% 75% at 32% 60%, rgba(90, 127, 255, 0.26), transparent 70%), radial-gradient(ellipse 26% 80% at 55% 42%, rgba(140, 170, 255, 0.24), transparent 70%), radial-gradient(ellipse 24% 82% at 75% 55%, rgba(120, 152, 255, 0.20), transparent 70%), radial-gradient(ellipse 22% 80% at 90% 50%, rgba(228, 192, 122, 0.14), transparent 70%); filter: blur(34px); animation: auroraDrift 32s linear infinite; } @keyframes auroraDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* HERO OPTION #2 — THE SLEEPING SERVER. Tiny LED-style dots scattered around the hero. Each one blinks at its own slow pace asynchronously, like status lights in a quiet data center at night. */ .hero.is-typographic.is-server .hero-fx-canvas { display: none; } .hero-server-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero-server-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(120, 152, 255, 0.45); box-shadow: 0 0 12px rgba(120, 152, 255, 0.45); animation: serverBlink 9s ease-in-out infinite; transform: translate(-50%, -50%); } .hero-server-dot.is-warm { background: rgba(228, 192, 122, 0.45); box-shadow: 0 0 12px rgba(228, 192, 122, 0.45); } @keyframes serverBlink { 0%, 88% { opacity: 0.30; transform: translate(-50%, -50%) scale(1); } 92% { opacity: 1; transform: translate(-50%, -50%) scale(1.6); } 95% { opacity: 0.75; transform: translate(-50%, -50%) scale(1.25); } 100% { opacity: 0.30; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { .hero-breathing-sphere, .hero-server-dot, .hero-pulse-wave svg, .hero-aurora-strand, .hero-charging-indicator::before, .hero-big-loop-orbit, .hero-ops-stream-inner { animation: none; } } /* Hide leftover numerals + rail elements (legacy from previous nav iteration) */ .nav-curated .nav-links a::before { content: none; } .nav-curated .nav-rail { display: none; } /* Mobile collapse */ @media (max-width: 1080px) { .nav.nav-curated .nav-inner { grid-template-columns: 1fr auto; } .nav-curated .nav-center-wrap, .nav-curated > .nav-inner > .nav-cta { display: none; } .nav-curated .nav-burger { display: flex; justify-self: end; } } @media (prefers-reduced-motion: reduce) { .nav .nav-mark .dot { animation: none; } .nav-curated .nav-rail-dot { transition: none; } } .nav-mark { font-family: var(--f-sans); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); } .nav-mark .dot { color: var(--accent); margin: 0 1px; } .nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; } .nav-links a { font-size: 13px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; transition: color var(--t-fast) var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a.is-current { color: var(--ink); } /* Higher specificity (.nav-links a.nav-cta) so the white color isn't overridden by the generic .nav-links a rule */ .nav-links a.nav-cta { font-size: 13px; font-weight: 700; letter-spacing: 0; color: #FFFFFF; background: var(--accent); border: 1px solid var(--accent); padding: 11px 22px; border-radius: 7px; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.20) inset, 0 4px 14px -2px rgba(44, 95, 255, 0.42), 0 2px 6px -1px rgba(44, 95, 255, 0.24); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .nav-links a.nav-cta:hover { color: #FFFFFF; background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.22) inset, 0 8px 20px -4px rgba(44, 95, 255, 0.50), 0 4px 10px -2px rgba(44, 95, 255, 0.30); transform: translateY(-1px); } .nav-links a.nav-cta.is-current { color: #FFFFFF; } /* Mobile hamburger — 3-line classic, hidden on desktop */ .nav-burger { display: none; width: 40px; height: 40px; background: transparent; border: 0; cursor: pointer; padding: 0; margin-left: 12px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 6px; transition: background var(--t-fast) var(--ease); flex-shrink: 0; } .nav-burger:hover { background: rgba(15, 17, 23, 0.04); } .nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 240ms var(--ease), opacity 180ms var(--ease); transform-origin: center; } /* X animation: top rotates +45 down, middle fades, bottom rotates -45 up */ .nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0.6); } .nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile slide-down panel — hidden on desktop */ .nav-mobile-panel { display: none; overflow: hidden; max-height: 0; background: var(--bg); border-bottom: 1px solid transparent; transition: max-height 320ms var(--ease), border-bottom-color 320ms var(--ease); } .nav-mobile-panel.is-open { max-height: 420px; border-bottom-color: var(--rule); } .nav-mobile-panel ul { list-style: none; margin: 0; padding: 4px 24px 18px; display: flex; flex-direction: column; } .nav-mobile-panel li { border-bottom: 1px solid var(--rule-soft); } .nav-mobile-panel li:last-child { border-bottom: 0; } .nav-mobile-panel a { display: block; font-family: var(--f-sans); font-size: 17px; font-weight: 500; letter-spacing: -0.018em; color: var(--ink); padding: 16px 0; text-decoration: none; transition: color var(--t-fast) var(--ease); } .nav-mobile-panel a:hover { color: var(--accent); } @media (max-width: 760px) { .nav-inner { padding: 16px 22px; gap: 0; } /* Flush nav (containing Apply) + burger to the right edge as a tight group */ .nav-inner > nav { margin-left: auto; } .nav-links { gap: 0; } .nav-links li:not(.cta-li) { display: none; } .nav-burger { display: flex; } .nav-mobile-panel { display: block; } /* Slightly tighter Apply pill on small screens */ .nav-links a.nav-cta { padding: 9px 18px; font-size: 13px; } } /* ============================================================ HERO — editorial restraint + dashboard centerpiece (Linear/Stripe-coded) ============================================================ */ .hero { position: relative; padding: calc(var(--hero-y) * 0.85) var(--pad-x) calc(var(--hero-y) * 0.5); min-height: auto; display: block; background: var(--bg); overflow: hidden; border-bottom: 1px solid var(--rule); } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(44, 95, 255, 0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(15, 17, 23, 0.04) 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 50% 110%, rgba(44, 95, 255, 0.06) 0%, transparent 50%); pointer-events: none; z-index: 0; } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(15, 17, 23, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 17, 23, 0.028) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 75%); } .hero-inner { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; width: 100%; } .hero-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-softer); background: transparent; border: 0; padding: 0; margin: 0 0 32px; font-weight: 500; } .hero-tag .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } .hero-headline { font-family: var(--f-sans); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.14; letter-spacing: -0.022em; color: var(--ink); margin: 0 0 20px; max-width: 580px; font-feature-settings: "ss01", "cv11"; } .hero-headline em { font-style: normal; font-weight: 400; color: var(--ink-soft); letter-spacing: -0.022em; } .hero-sub { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; font-weight: 400; color: var(--ink-soft); max-width: 480px; margin: 0 0 32px; } .hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-sans); font-size: 14px; font-weight: 500; letter-spacing: -0.008em; padding: 12px 22px; border-radius: 8px; border: 0; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); text-decoration: none; position: relative; } .btn-primary { background: var(--ink); color: var(--bg); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 6px 18px -4px rgba(15, 17, 23, 0.30), 0 2px 5px -1px rgba(44, 95, 255, 0.18); } .btn-primary:hover { background: #1A1E2D; transform: translateY(-1px); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset, 0 12px 28px -6px rgba(15, 17, 23, 0.40), 0 4px 10px -2px rgba(44, 95, 255, 0.30); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid rgba(15, 17, 23, 0.18); padding: 11px 21px; } .btn-ghost:hover { border-color: var(--ink); background: rgba(15, 17, 23, 0.03); } .btn .arrow { font-family: var(--f-sans); font-size: 16px; line-height: 1; transition: transform var(--t-med) var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* ============================================================ PAGE HEAD (non-home) ============================================================ */ .page-head { padding: calc(var(--hero-y) * 0.85) var(--pad-x) calc(var(--section-y) * 0.4); border-bottom: 1px solid var(--rule); background: radial-gradient(ellipse at 90% 30%, var(--grad-start) 0%, transparent 55%), var(--bg); } .page-head-inner { max-width: var(--max-w); margin: 0 auto; } .page-head .eyebrow { font-family: var(--f-mono); font-size: 12px; color: var(--accent); margin: 0 0 28px; font-weight: 500; } .page-head h1 { font-family: var(--f-sans); font-weight: 400; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.14; letter-spacing: -0.022em; margin: 0 0 22px; color: var(--ink); max-width: 760px; font-feature-settings: "ss01", "cv11"; } .page-head h1 em { font-style: normal; font-weight: 400; color: var(--ink-soft); letter-spacing: -0.022em; } .page-head .lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--ink-soft); max-width: 680px; margin: 0; } .page-head.page-head-visual { padding-top: calc(var(--hero-y) * 0.55); padding-bottom: calc(var(--section-y) * 0.45); } .page-head-visual .page-head-inner { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(420px, 0.9fr); gap: clamp(48px, 7vw, 96px); align-items: center; } .page-head-copy { min-width: 0; } .hero-visual-card { position: relative; min-height: 420px; padding: 26px; border: 1px solid rgba(15, 17, 23, 0.12); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,250,255,0.94)), var(--bg); box-shadow: 0 42px 90px -58px rgba(15, 17, 23, 0.42), 0 1px 0 rgba(255,255,255,0.9) inset; overflow: hidden; } .hero-visual-card::before { content: ""; position: absolute; inset: -30% -20% auto auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(44,95,255,0.16), transparent 68%); pointer-events: none; } .hero-visual-card::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(44,95,255,0.07); border-radius: 10px; pointer-events: none; } .hero-visual-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 24px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-softer); } .hero-visual-top strong { color: var(--accent); font-weight: 700; } .path-flow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .path-flow::before { content: ""; position: absolute; left: 11%; right: 11%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(44,95,255,0.36), transparent); } .path-node { position: relative; z-index: 1; min-height: 82px; padding: 13px 12px; border: 1px solid rgba(15,17,23,0.09); border-radius: 10px; background: rgba(255,255,255,0.92); box-shadow: 0 18px 36px -30px rgba(15,17,23,0.5); } .path-node span, .lane-step span { display: block; margin-bottom: 12px; font-family: var(--f-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.08em; } .path-node strong, .lane-step strong { display: block; font-size: 13px; line-height: 1.25; font-weight: 600; color: var(--ink); } .path-repair { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin-top: 18px; } .path-repair > div { padding: 16px; border: 1px solid rgba(15,17,23,0.08); border-radius: 10px; background: var(--paper); } .path-repair p, .belief-bottom p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); } .repair-label { display: inline-flex; margin-bottom: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #9F3F3A; } .repair-label.is-fixed { color: #27634A; } .repair-core { display: grid; place-items: center; width: 112px; min-width: 112px; height: 112px; min-height: 112px; border-radius: 50% !important; text-align: center; color: #FFFFFF; background: var(--ink) !important; font-weight: 600; font-size: 11px; line-height: 1.15; } .launch-lanes { position: relative; z-index: 1; display: grid; grid-template-columns: 52px repeat(3, 1fr); gap: 10px; align-items: stretch; } .launch-lanes::before { content: ""; position: absolute; left: 58px; right: 6%; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(44,95,255,0.34), rgba(39,99,74,0.34)); } .lane-label { position: relative; z-index: 1; display: grid; place-items: center; border-radius: 10px; background: rgba(44,95,255,0.08); color: var(--accent); font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } .lane-label.is-us { background: rgba(39,99,74,0.09); color: #27634A; } .lane-step { position: relative; z-index: 1; min-height: 104px; padding: 16px; border: 1px solid rgba(15,17,23,0.09); border-radius: 10px; background: rgba(255,255,255,0.94); } .lane-step small { display: block; margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--ink-soft); } .lane-step.is-shared { background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,255,0.95)); } .lane-step.is-us span { color: #27634A; } .launch-output { position: relative; z-index: 1; margin-top: 18px; padding: 18px; border: 1px solid rgba(15,17,23,0.08); border-radius: 999px; background: rgba(255,255,255,0.72); color: var(--ink); } .launch-output > span { display: block; margin-bottom: 12px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-softer); text-align: center; } .launch-output div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .launch-output strong { display: grid; place-items: center; min-height: 42px; padding: 8px 10px; border: 1px solid rgba(15,17,23,0.09); border-radius: 999px; font-size: 11px; font-weight: 500; background: #FFFFFF; color: var(--ink); text-align: center; } .belief-center { position: relative; z-index: 1; min-height: 282px; display: grid; place-items: center; } .belief-center::before, .belief-center::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(44,95,255,0.14); } .belief-center::before { width: 270px; height: 270px; } .belief-center::after { width: 190px; height: 190px; background: rgba(44,95,255,0.045); } .belief-person { position: relative; z-index: 2; display: grid; place-items: center; width: 170px; min-height: 170px; padding: 20px; text-align: center; border-radius: 50%; background: #FFFFFF; border: 1px solid rgba(15,17,23,0.1); box-shadow: 0 28px 52px -36px rgba(15,17,23,0.5); } .belief-person span { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(#FFFFFF,#FFFFFF) padding-box, linear-gradient(135deg, var(--accent), #27634A) border-box; border: 7px solid transparent; } .belief-person strong { font-size: 13px; line-height: 1.25; } .belief-person small { font-size: 11px; color: var(--ink-soft); line-height: 1.35; } .belief-ring span { position: absolute; z-index: 3; padding: 9px 10px; border: 1px solid rgba(15,17,23,0.09); border-radius: 999px; background: rgba(255,255,255,0.95); color: var(--ink); font-size: 12px; box-shadow: 0 16px 30px -26px rgba(15,17,23,0.42); } .belief-ring span:nth-child(1) { left: 5%; top: 16%; } .belief-ring span:nth-child(2) { right: 6%; top: 14%; } .belief-ring span:nth-child(3) { left: 0; top: 48%; } .belief-ring span:nth-child(4) { right: 0; top: 48%; } .belief-ring span:nth-child(5) { left: 12%; bottom: 10%; } .belief-ring span:nth-child(6) { right: 13%; bottom: 10%; } .belief-bottom { position: relative; z-index: 1; padding: 16px; border: 1px solid rgba(15,17,23,0.08); border-radius: 10px; background: var(--paper); } .system-orbit, .launch-cycle { position: relative; z-index: 1; display: block; min-height: 330px; margin: 4px auto 20px; border-radius: 50%; } .system-orbit::before, .system-orbit::after, .launch-cycle::before, .launch-cycle::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; } .system-orbit::before, .launch-cycle::before { width: min(78%, 330px); aspect-ratio: 1; border: 1px solid rgba(44,95,255,0.22); background: conic-gradient(from -90deg, rgba(44,95,255,0.22), rgba(39,99,74,0.2), rgba(44,95,255,0.22)); -webkit-mask: radial-gradient(circle, transparent 67%, #000 68%); mask: radial-gradient(circle, transparent 67%, #000 68%); } .system-orbit::after, .launch-cycle::after { width: min(52%, 220px); aspect-ratio: 1; border: 1px solid rgba(15,17,23,0.08); background: rgba(44,95,255,0.045); } .system-core, .launch-core { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 142px; height: 142px; padding: 18px; transform: translate(-50%, -50%); border-radius: 50%; text-align: center; color: #FFFFFF; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 34%), var(--ink); box-shadow: 0 26px 52px -34px rgba(15,17,23,0.6); } .system-core span, .launch-core span { display: block; margin-bottom: 7px; font-family: var(--f-mono); font-size: 9px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.58); } .system-core strong, .launch-core strong { display: block; font-size: 13px; line-height: 1.22; font-weight: 520; color: #FFFFFF; } .system-orbit .path-node, .launch-cycle .lane-step { position: absolute; z-index: 4; display: grid; place-items: center; width: 108px; min-height: 82px; padding: 10px 12px; border-radius: 999px; text-align: center; background: rgba(255,255,255,0.96); border: 1px solid rgba(15,17,23,0.1); box-shadow: 0 20px 40px -32px rgba(15,17,23,0.48); } .system-orbit .path-node span, .launch-cycle .lane-step span { margin-bottom: 5px; } .system-orbit .path-node strong, .launch-cycle .lane-step strong { font-size: 11.4px; line-height: 1.18; } .launch-cycle .lane-step small { margin-top: 4px; font-size: 10px; line-height: 1.2; } .system-orbit .path-node:nth-child(2) { left: 50%; top: 0; transform: translate(-50%, 0); } .system-orbit .path-node:nth-child(3) { right: 8%; top: 10%; } .system-orbit .path-node:nth-child(4) { right: 0; top: 50%; transform: translateY(-50%); } .system-orbit .path-node:nth-child(5) { right: 8%; bottom: 10%; } .system-orbit .path-node:nth-child(6) { left: 50%; bottom: 0; transform: translate(-50%, 0); } .system-orbit .path-node:nth-child(7) { left: 8%; bottom: 10%; } .system-orbit .path-node:nth-child(8) { left: 0; top: 50%; transform: translateY(-50%); } .system-orbit .path-node:nth-child(9) { left: 8%; top: 10%; } .launch-cycle .lane-step:nth-child(2) { left: 50%; top: 0; transform: translate(-50%, 0); } .launch-cycle .lane-step:nth-child(3) { right: 0; top: 24%; } .launch-cycle .lane-step:nth-child(4) { right: 12%; bottom: 2%; } .launch-cycle .lane-step:nth-child(5) { left: 12%; bottom: 2%; } .launch-cycle .lane-step:nth-child(6) { left: 0; top: 24%; } .launch-cycle .lane-step.is-you { border-color: rgba(44,95,255,0.16); } .launch-cycle .lane-step.is-us { border-color: rgba(39,99,74,0.18); background: rgba(248,252,250,0.96); } .launch-cycle .lane-step.is-us span { color: #27634A; } .hero-belief-card .belief-center { min-height: 330px; } .hero-belief-card .belief-center::before { width: min(82%, 340px); height: auto; aspect-ratio: 1; background: conic-gradient(from 30deg, rgba(44,95,255,0.2), rgba(39,99,74,0.18), rgba(44,95,255,0.2)); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%); mask: radial-gradient(circle, transparent 66%, #000 67%); } .hero-belief-card .belief-center::after { width: min(54%, 224px); height: auto; aspect-ratio: 1; } /* ============================================================ SECTIONS ============================================================ */ .section { padding: var(--section-y) var(--pad-x); } .section-inner { max-width: var(--max-w); margin: 0 auto; } .section-inner.is-prose { max-width: 720px; } .section-inner.is-mid { max-width: 1080px; } .section.is-bordered { border-top: 1px solid var(--rule); } .section.is-paper { background: var(--paper); } .section-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-softer); margin: 0 0 22px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } .section-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; } .section-h { font-family: var(--f-sans); font-weight: 400; font-size: clamp(22px, 2.8vw, 36px); line-height: 1.16; letter-spacing: -0.022em; color: var(--ink); margin: 0 0 22px; max-width: 820px; font-feature-settings: "ss01", "cv11"; } .section-h em { font-style: normal; font-weight: 400; color: var(--ink-soft); letter-spacing: -0.022em; } .section-sub { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--ink-soft); max-width: 680px; margin: 0 0 56px; } /* ============================================================ BEGINNER-FRIENDLY VISUAL SUMMARIES ============================================================ */ .visual-section { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 112px); background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .visual-intro { max-width: 760px; margin-bottom: 34px; } .leak-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 0.78fr) minmax(0, 1fr); gap: 16px; align-items: stretch; } .leak-map-panel, .leak-map-core, .launch-board { border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); box-shadow: 0 24px 56px -38px rgba(15, 17, 23, 0.32); } .leak-map-panel { padding: 24px; } .leak-map-head { margin-bottom: 22px; } .mini-badge { display: inline-flex; align-items: center; margin-bottom: 12px; padding: 5px 8px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-softer); background: var(--paper); } .mini-badge.is-blue { color: var(--accent-deep); border-color: rgba(44, 95, 255, 0.2); background: var(--accent-soft); } .mini-badge.is-green { color: #27634A; border-color: rgba(39, 99, 74, 0.18); background: #EBF6EF; } .leak-map h3, .launch-step h3 { margin: 0; font-size: 20px; line-height: 1.16; letter-spacing: -0.02em; font-weight: 550; color: var(--ink); } .leak-list { display: grid; gap: 16px; } .leak-item { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--rule-soft); } .leak-item:last-child { border-bottom: 0; padding-bottom: 0; } .leak-dot { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: #D85944; box-shadow: 0 0 0 5px rgba(216, 89, 68, 0.10); } .leak-item strong, .handled-grid strong, .role-strip strong { display: block; color: var(--ink); font-size: 14px; line-height: 1.35; font-weight: 650; } .leak-item p, .handled-grid p, .core-card p, .launch-step p, .role-strip p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); } .leak-map-core { position: relative; display: grid; place-items: center; min-height: 380px; padding: 24px; overflow: hidden; background: radial-gradient(circle at 50% 48%, rgba(44, 95, 255, 0.12), transparent 42%), linear-gradient(180deg, #FFFFFF, #F8FAFF); } .core-ring { position: absolute; width: 210px; height: 210px; border: 1px solid rgba(44, 95, 255, 0.20); border-radius: 50%; } .core-ring::before, .core-ring::after { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(44, 95, 255, 0.16); border-radius: 50%; } .core-ring::after { inset: 58px; background: rgba(44, 95, 255, 0.08); } .core-card { position: relative; z-index: 1; max-width: 230px; padding: 22px; border: 1px solid rgba(44, 95, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 18px 44px -28px rgba(44, 95, 255, 0.45); } .handled-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .handled-grid div { min-height: 132px; padding: 16px; border: 1px solid var(--rule-soft); border-radius: 8px; background: var(--paper); } .handled-grid span, .launch-num { display: inline-flex; margin-bottom: 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; } .launch-board { padding: 24px; } .launch-board-head { display: flex; justify-content: space-between; gap: 24px; padding: 0 4px 18px; border-bottom: 1px solid var(--rule); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-softer); } .launch-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 24px 0; } .launch-track::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(44, 95, 255, 0.18), rgba(44, 95, 255, 0.45), rgba(39, 99, 74, 0.32)); } .launch-step { position: relative; z-index: 1; min-height: 210px; padding: 20px; border: 1px solid var(--rule); border-radius: 10px; background: #FFFFFF; } .launch-step.is-client { background: #FFFFFF; } .launch-step.is-shared { background: #F8FAFF; border-color: rgba(44, 95, 255, 0.18); } .launch-step.is-us { background: #F7FBF8; border-color: rgba(39, 99, 74, 0.16); } .role-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--rule); padding-top: 18px; } .role-strip div { position: relative; padding: 18px 18px 18px 42px; border-radius: 8px; background: var(--paper); } .role-dot { position: absolute; left: 18px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .role-dot.is-us { background: #27634A; } .growth-map { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr) minmax(0, 0.9fr); gap: 16px; align-items: stretch; } .growth-column, .growth-core, .coverage-board, .burden-board, .standard-board, .apply-path { border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); box-shadow: 0 24px 56px -38px rgba(15, 17, 23, 0.32); } .growth-column { padding: 24px; } .map-label { display: block; margin-bottom: 18px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-softer); } .signal-list { display: grid; gap: 10px; } .signal-list span { padding: 12px 14px; border: 1px solid var(--rule-soft); border-radius: 8px; background: var(--paper); font-size: 14px; color: var(--ink); } .growth-core { position: relative; display: grid; place-items: center; min-height: 330px; padding: 28px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(44, 95, 255, 0.13), transparent 42%), linear-gradient(180deg, #FFFFFF, #F8FAFF); } .core-orbit { position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(44, 95, 255, 0.18); } .core-orbit::before, .core-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(44, 95, 255, 0.14); } .core-orbit::before { inset: 34px; } .core-orbit::after { inset: 72px; background: rgba(44, 95, 255, 0.07); } .growth-core-card { position: relative; z-index: 1; width: min(100%, 310px); padding: 26px; border: 1px solid rgba(44, 95, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.9); } .growth-core-card h3, .burden-card h3, .standard-board h3, .apply-path h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.16; letter-spacing: -0.02em; font-weight: 550; } .growth-core-card p, .outcome-stack span, .burden-card li, .standard-board p, .apply-path p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); } .outcome-stack { display: grid; gap: 12px; } .outcome-stack div { padding: 14px 16px; border: 1px solid var(--rule-soft); border-radius: 8px; background: var(--paper); } .outcome-stack strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 14px; } .coverage-board { overflow: hidden; } .coverage-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 0.75fr)); border-bottom: 1px solid var(--rule); } .coverage-row:last-child { border-bottom: 0; } .coverage-row > * { padding: 18px 20px; border-right: 1px solid var(--rule-soft); font-size: 13.5px; } .coverage-row > *:last-child { border-right: 0; } .coverage-row.is-head { background: var(--paper); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; color: var(--ink-softer); } .coverage-row span { color: var(--ink); font-weight: 500; } .coverage-row b { color: var(--accent-deep); font-weight: 650; } .coverage-row b.is-muted { color: var(--ink-softer); font-weight: 500; } .burden-board { display: grid; grid-template-columns: 1fr 220px 1fr; gap: 0; overflow: hidden; } .burden-card { padding: 30px; } .burden-card.is-blue { background: #F8FAFF; } .burden-card ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .burden-card li { padding-left: 18px; position: relative; } .burden-card li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .burden-center { display: grid; place-items: center; padding: 24px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); text-align: center; background: var(--ink); color: #FFFFFF; } .burden-center span { width: 64px; height: 1px; background: rgba(255,255,255,0.3); align-self: end; } .burden-center strong { font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; } .standard-board, .apply-path { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; } .standard-board > div, .apply-path > div { min-height: 230px; padding: 30px; border-right: 1px solid var(--rule); } .standard-board > div:last-child, .apply-path > div:last-child { border-right: 0; } .standard-board span, .apply-path span { display: inline-flex; margin-bottom: 58px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; } @media (max-width: 1080px) { .leak-map { grid-template-columns: 1fr; } .leak-map-core { min-height: 300px; } .launch-track { grid-template-columns: 1fr; } .launch-track::before { left: 32px; right: auto; top: 24px; bottom: 24px; width: 1px; height: auto; } .launch-step { min-height: auto; } .growth-map, .burden-board, .standard-board, .apply-path { grid-template-columns: 1fr; } .burden-center { min-height: 150px; border-left: 0; border-right: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .standard-board > div, .apply-path > div { min-height: auto; border-right: 0; border-bottom: 1px solid var(--rule); } .standard-board > div:last-child, .apply-path > div:last-child { border-bottom: 0; } .coverage-board { overflow-x: auto; } .coverage-row { min-width: 760px; } } @media (max-width: 620px) { .leak-map-panel, .launch-board { padding: 18px; } .handled-grid, .role-strip { grid-template-columns: 1fr; } .launch-board-head { flex-direction: column; gap: 8px; } .coverage-board { overflow: visible; border-radius: 10px; background: transparent; border: 0; box-shadow: none; display: grid; gap: 12px; } .coverage-row.is-head { display: none; } .coverage-row { min-width: 0; grid-template-columns: 1fr; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); box-shadow: 0 20px 42px -34px rgba(15, 17, 23, 0.28); overflow: hidden; } .coverage-row > * { border-right: 0; } .coverage-row > span { padding: 18px 18px 4px; font-size: 14px; font-weight: 560; } .coverage-row > b { display: flex; justify-content: space-between; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--rule-soft); } .coverage-row > b::before { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-softer); font-weight: 600; } .coverage-row > b:nth-child(2)::before { content: "Foundation"; } .coverage-row > b:nth-child(3)::before { content: "Growth"; } .coverage-row > b:nth-child(4)::before { content: "Empire"; } } .prose p { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0 0 24px; max-width: 64ch; } .prose p.is-lede { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.45; color: var(--ink-soft); font-weight: 400; max-width: 56ch; margin-bottom: 36px; } .prose strong { font-weight: 600; color: var(--ink); } /* ============================================================ STYLIZED UI MOCKUP — show the actual product surfaces ============================================================ */ .ui-mockup { background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 17, 23, 0.03), 0 32px 64px -20px rgba(15, 17, 23, 0.14), 0 12px 24px -8px rgba(15, 17, 23, 0.07), 0 0 0 4px rgba(44, 95, 255, 0.02); position: relative; } .ui-mockup-header { background: var(--paper); border-bottom: 1px solid var(--rule); padding: 14px 20px; display: flex; align-items: center; gap: 10px; } .ui-mockup-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--rule); } .ui-mockup-dot:nth-child(1) { background: #FF5F57; } .ui-mockup-dot:nth-child(2) { background: #FEBC2E; } .ui-mockup-dot:nth-child(3) { background: #28C840; } .ui-mockup-url { flex: 1; margin-left: 16px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-softer); background: var(--bg); border: 1px solid var(--rule); padding: 6px 14px; border-radius: 6px; } .ui-mockup-body { padding: 32px 36px; } /* Stylized monthly value report — inside ui-mockup */ .report-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 24px; } .report-head-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--ink); } .report-head-meta { font-family: var(--f-mono); font-size: 12px; color: var(--ink-softer); } .report-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; font-size: 14px; } .report-row:last-child { border-bottom: 0; } .report-row-label { color: var(--ink-soft); } .report-row-value { font-family: var(--f-mono); font-weight: 500; color: var(--ink); font-size: 14px; } .report-row-value strong { color: var(--accent); font-weight: 700; } .report-total { margin-top: 16px; padding-top: 22px; border-top: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; } .report-total-label { font-size: 14px; color: var(--ink); font-weight: 600; } .report-total-value { font-family: var(--f-sans); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); } /* ============================================================ HERO SPLIT — text left, live widget right ============================================================ */ /* Editorial hero: centered copy block on top, dashboard below as wide centerpiece */ .hero.is-split .hero-inner { display: block; text-align: center; } .hero-copy { max-width: 600px; margin: 0 auto 88px; text-align: center; } .hero-copy .hero-headline { margin-left: auto; margin-right: auto; } .hero-copy .hero-sub { margin-left: auto; margin-right: auto; } .hero-actions { margin-bottom: 0; justify-content: center; } @media (max-width: 760px) { .hero-copy { margin-bottom: 56px; } } .hero-image { position: relative; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.04), 0 32px 64px -16px rgba(10, 10, 10, 0.18), 0 12px 24px -8px rgba(10, 10, 10, 0.10); } .hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 2.4s var(--ease); } .hero-image:hover img { transform: scale(1.06); } @media (max-width: 1024px) { .hero.is-split .hero-inner { grid-template-columns: 1fr; gap: 40px; } .hero-image { aspect-ratio: 4/3; order: -1; } .hero-image { border-radius: 14px; } } /* ============================================================ HERO LIVE DASHBOARD — wide centerpiece, Linear-style depth + glow ============================================================ */ .hero-dash-wrap { position: relative; margin-top: 8px; } .hero-dash-wrap::before { content: ""; position: absolute; inset: -80px -64px -96px -64px; background: radial-gradient(ellipse 66% 56% at 50% 18%, rgba(44, 95, 255, 0.28) 0%, transparent 68%), radial-gradient(ellipse 74% 58% at 50% 100%, rgba(201, 168, 104, 0.16) 0%, transparent 64%); filter: blur(30px); pointer-events: none; z-index: 0; } .hero-dash { position: relative; background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.08), transparent 30%), radial-gradient(circle at 88% 8%, rgba(44, 95, 255, 0.18), transparent 28%), linear-gradient(145deg, #070914 0%, #0F111B 48%, #070811 100%); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 22px; padding: 0; font-family: var(--f-sans); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.045) inset, 0 58px 110px -34px rgba(15, 17, 23, 0.62), 0 18px 34px -18px rgba(44, 95, 255, 0.32); overflow: hidden; isolation: isolate; z-index: 1; } .hero-dash::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.3; pointer-events: none; z-index: 0; } .hero-dash::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(201, 168, 104, 0.12); border-radius: 16px; pointer-events: none; z-index: 0; } .hero-dash-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: rgba(255, 255, 255, 0.035); border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 0; gap: 16px; position: relative; z-index: 1; } .hero-dash-head-left, .hero-dash-head-right { display: inline-flex; align-items: center; gap: 16px; } .hero-dash-head-version { font-family: var(--f-mono); font-size: 10.5px; color: rgba(248, 246, 241, 0.55); letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 6px; } .hero-dash-head-version::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(201, 168, 104, 0.48); display: inline-block; } .hero-dash-note { position: relative; z-index: 1; margin: 0; padding: 16px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.045); font-family: var(--f-sans); font-size: 13.5px; line-height: 1.55; color: rgba(248, 246, 241, 0.68); } .hero-dash-note strong { color: #FFFFFF; font-weight: 650; } .hero-dash-body { display: grid; grid-template-columns: 1.05fr 1.4fr 1fr; gap: 0; position: relative; z-index: 1; } .hero-dash-col { padding: 22px 24px 26px; border-right: 1px solid rgba(255, 255, 255, 0.08); position: relative; min-height: 220px; } .hero-dash-col:last-child { border-right: 0; } @media (max-width: 1024px) { .hero-dash-body { grid-template-columns: 1fr 1fr; } .hero-dash-col:nth-child(2) { border-right: 0; } .hero-dash-col:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, 0.08); min-height: auto; } } @media (max-width: 640px) { .hero-dash-note { padding: 13px 18px; font-size: 12.5px; } .hero-dash-body { grid-template-columns: 1fr; } .hero-dash-col { border-right: 0; border-bottom: 1px solid var(--rule); min-height: auto; } .hero-dash-col:last-child { border-bottom: 0; } } .hero-dash-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(248, 246, 241, 0.9); font-weight: 700; } .hero-dash-status .pulse { width: 7px; height: 7px; border-radius: 50%; background: #8FA6FF; box-shadow: 0 0 0 0 rgba(143, 166, 255, 0.65); animation: dash-pulse 2.4s ease-in-out infinite; } @keyframes dash-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 166, 255, 0.58); transform: scale(1); } 50% { box-shadow: 0 0 0 7px rgba(143, 166, 255, 0); transform: scale(0.9); } } .hero-dash-brand { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; font-weight: 650; } .hero-dash-section { margin-bottom: 0; } .hero-dash-label { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(201, 168, 104, 0.82); margin: 0 0 14px; font-weight: 600; } /* Narrative-driven "Now handling" line — JS swaps content */ .hero-dash-now { position: relative; min-height: 96px; display: flex; align-items: flex-start; } .hero-dash-now-active { margin: 0; font-family: var(--f-sans); font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); font-weight: 500; letter-spacing: -0.012em; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); display: block; width: 100%; } .hero-dash-now-active.is-fading { opacity: 0; transform: translateY(-4px); } /* Today counter — single column tall stack inside its dashboard column */ .hero-dash-stats { display: grid; grid-template-columns: 1fr; gap: 14px; } .hero-dash-stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .hero-dash-stat:last-child { border-bottom: 0; padding-bottom: 0; } .hero-dash-stat-num { font-family: var(--f-sans); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -0.035em; color: #FFFFFF; font-feature-settings: "tnum"; transition: color 0.4s var(--ease); min-width: 44px; } .hero-dash-stat-num.is-tick { color: #C9A868; } .hero-dash-stat-key { font-size: 12px; font-family: var(--f-sans); color: rgba(248, 246, 241, 0.63); letter-spacing: -0.005em; font-weight: 500; } /* Recent feed */ .hero-dash-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; min-height: 150px; } .hero-dash-event { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; font-size: 12.5px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); animation: dash-event-in 0.55s var(--ease) both; } .hero-dash-event:last-child { border-bottom: 0; } .hero-dash-arrow { color: #C9A868; font-weight: 700; font-family: var(--f-mono); line-height: 1; } .hero-dash-event-text { color: rgba(255, 255, 255, 0.86); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-dash-event-time { font-family: var(--f-mono); font-size: 10.5px; color: rgba(248, 246, 241, 0.42); letter-spacing: 0; } @keyframes dash-event-in { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } } .hero-dash-event.is-fading { animation: dash-event-out 0.4s var(--ease) both; } @keyframes dash-event-out { 0% { opacity: 1; max-height: 24px; margin-top: 0; } 100% { opacity: 0; max-height: 0; margin-top: -8px; } } @media (max-width: 1024px) { .hero-dash-col { padding: 18px 20px 22px; min-height: auto; } .hero-dash-now { min-height: 80px; } .hero-dash-now-item { font-size: 17px; } .hero-dash-stat-num { font-size: 24px; } } @media (max-width: 480px) { .hero-dash-head { padding: 14px 18px; } .hero-dash-col { padding: 16px 18px 20px; } .hero-dash-now-item { font-size: 16px; } .hero-dash-stat-num { font-size: 22px; } .hero-dash-event { font-size: 11.5px; } } /* Live growth command center widget (shown in hero) */ .live-widget { background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; padding: 24px 28px; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.02), 0 24px 48px -12px rgba(10, 10, 10, 0.08), 0 8px 16px -4px rgba(10, 10, 10, 0.04); font-family: var(--f-sans); } .live-widget-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; } .live-widget-title { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); font-weight: 600; margin: 0; } .live-widget-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10px; color: var(--accent); font-weight: 500; } .live-widget-status .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; } .live-widget-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; } .live-widget-row:last-child { border-bottom: 0; } .live-widget-label { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; } .live-widget-label-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .live-widget-value { font-family: var(--f-mono); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .live-widget-value strong { color: var(--accent); } .live-widget-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font-family: var(--f-mono); font-size: 11px; color: var(--ink-softer); display: flex; justify-content: space-between; } /* ============================================================ STATS SECTION — by the numbers ============================================================ */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .stat { padding: 48px 32px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; } .stat:last-child { border-right: 0; } .stat-num { font-family: var(--f-sans); font-weight: 300; font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -0.025em; color: var(--ink); margin: 0; font-feature-settings: "tnum"; } .stat-num span { font-size: 0.5em; color: var(--ink-softer); font-weight: 300; margin-left: 2px; letter-spacing: -0.01em; } .stat-label { font-family: var(--f-sans); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; color: var(--ink); margin: 0; } .stat-body { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 0; } @media (max-width: 980px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--rule); } } @media (max-width: 600px) { .stats { grid-template-columns: 1fr; } .stat { border-right: 0; border-bottom: 1px solid var(--rule); } .stat:last-child { border-bottom: 0; } } /* ============================================================ REVIEWS DASHBOARD MOCKUP ============================================================ */ .review-feed { display: flex; flex-direction: column; gap: 14px; } .review-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; } .review-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .review-card-author { font-family: var(--f-sans); font-weight: 600; font-size: 13px; color: var(--ink); margin: 0; } .review-card-stars { font-family: var(--f-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; } .review-card-text { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 12px; font-style: italic; } .review-card-reply { background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; position: relative; } .review-card-reply-head { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--accent); font-weight: 600; margin: 0 0 6px; } .review-card-reply-text { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 0 0 12px; } .review-card-actions { display: flex; gap: 8px; } .review-action { font-family: var(--f-sans); font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 100px; cursor: pointer; border: 0; } .review-action.is-primary { background: var(--ink); color: var(--bg); } .review-action.is-ghost { background: var(--bg); border: 1px solid var(--rule); color: var(--ink); } /* ============================================================ COMPARISON TABLE — DIY / Generic Agency / Us ============================================================ */ .compare { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0; margin-top: 56px; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--bg); } .compare-cell { padding: 20px 24px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; } .compare-cell:last-child, .compare-cell.is-last-col { border-right: 0; } .compare-row:last-child .compare-cell, .compare-cell.is-bottom { border-bottom: 0; } .compare-h { font-family: var(--f-sans); font-weight: 600; background: var(--paper); color: var(--ink); font-size: 13px; letter-spacing: -0.01em; } .compare-h.is-us { background: var(--ink); color: var(--bg); font-weight: 700; } .compare-row-label { font-weight: 500; color: var(--ink); } .compare-cell .check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--f-mono); font-size: 12px; font-weight: 700; } .compare-cell .check.is-yes { background: var(--accent-soft); color: var(--accent); } .compare-cell .check.is-no { background: #FBEAEA; color: #A33A3A; } .compare-cell .check.is-mid { background: var(--paper); color: var(--ink-softer); } .compare-row { display: contents; } @media (max-width: 880px) { /* Compare → vertical card-per-row layout on mobile */ .compare { grid-template-columns: 1fr; border: 0; background: transparent; gap: 12px; } .compare-row { display: grid; grid-template-columns: 1fr; background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; padding: 0; overflow: hidden; } .compare-row.is-header { display: none; } .compare-cell { padding: 14px 18px; border-right: 0; border-bottom: 1px solid var(--rule-soft); display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-soft); } .compare-cell:last-child { border-bottom: 0; } .compare-row .compare-row-label, .compare-row .compare-cell:first-child { font-weight: 600; color: var(--ink); background: var(--paper); font-size: 14px; border-bottom: 1px solid var(--rule); letter-spacing: -0.015em; justify-content: flex-start; } /* Add column labels via data-col attribute */ .compare-cell[data-col]::before { content: attr(data-col); font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-softer); font-weight: 500; } .compare-cell[data-col].is-us-mobile { background: var(--ink); color: var(--bg); } .compare-cell[data-col].is-us-mobile::before { color: var(--accent-pale); } } /* ============================================================ MOBILE GLOBAL TIGHTENING ============================================================ */ @media (max-width: 760px) { /* Tighter section padding on mobile */ :root { --section-y: clamp(60px, 12vw, 96px); --hero-y: clamp(80px, 18vw, 120px); --pad-x: 22px; } /* Mockup body reduces padding on mobile */ .ui-mockup-body { padding: 18px 16px; } .ui-mockup-header { padding: 10px 14px; } .ui-mockup-url { font-size: 10px; padding: 4px 10px; } /* Hero CTAs stack on small phones */ .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { justify-content: center; } /* Tighter section eyebrow + headline on mobile */ .section-h { margin-bottom: 24px; } .section-sub { margin-bottom: 36px; font-size: 16px; } .stats { margin-top: 32px; } .tiers, .stages, .process-steps, .insights-grid, .compare, .faq { margin-top: 36px; } /* Diagram cleaner on mobile */ .diagram { padding: 24px 16px; margin: 36px 0; } /* Live widget — reduce padding */ .live-widget { padding: 18px 20px; } .live-widget-row { padding: 10px 0; } /* Final CTA tighter */ .final-cta h2 { line-height: 1.04; } /* Footer mobile compact */ .footer { padding: 56px 22px 36px; } } @media (max-width: 480px) { /* Hero headline a touch smaller on tiny screens */ .hero-headline { font-size: 56px; } /* Mockup widths cap */ .ui-mockup { border-radius: 10px; } .ui-mockup-header { padding: 8px 12px; gap: 6px; } .ui-mockup-dot { width: 9px; height: 9px; } /* Chat messages smaller */ .chat-message-bubble { font-size: 13px; padding: 10px 12px; } .chat-message-avatar { width: 28px; height: 28px; font-size: 11px; } /* Report rows tighter */ .report-head-title { font-size: 16px; } .report-row { font-size: 12px; padding: 10px 0; } .report-row-value { font-size: 12px; } .report-total-value { font-size: 22px; } /* Pipeline cards tighter */ .pipeline-card { padding: 8px 10px; } .pipeline-card-name { font-size: 12px; } .pipeline-card-meta { font-size: 9px; } /* Review cards */ .review-card { padding: 12px 14px; } .review-card-text { font-size: 12px; } .review-card-reply { padding: 10px 12px; } .review-card-reply-text { font-size: 12px; } } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq { margin-top: 56px; border-top: 1px solid var(--rule); } .faq-item { border-bottom: 1px solid var(--rule); } .faq-q { width: 100%; background: transparent; border: 0; padding: 28px 0; font-family: var(--f-sans); font-weight: 600; font-size: clamp(17px, 2vw, 22px); letter-spacing: -0.02em; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; transition: color var(--t-fast) var(--ease); } .faq-q:hover { color: var(--accent); } .faq-q-icon { font-family: var(--f-mono); font-size: 18px; color: var(--accent); font-weight: 500; transition: transform var(--t-med) var(--ease); flex-shrink: 0; } .faq-item.is-open .faq-q-icon { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t-med) var(--ease), padding var(--t-med) var(--ease); font-size: 15px; line-height: 1.65; color: var(--ink-soft); } .faq-item.is-open .faq-a { max-height: 400px; padding: 0 0 28px; } .faq-a p { margin: 0 0 14px; max-width: 64ch; } .faq-a p:last-child { margin-bottom: 0; } /* ============================================================ FINAL CTA — full-bleed black with form preview teaser ============================================================ */ .final-cta { background: var(--black); color: rgba(255, 255, 255, 0.92); padding: var(--section-y) var(--pad-x); text-align: center; } .final-cta-inner { max-width: 820px; margin: 0 auto; } .final-cta-eyebrow { font-family: var(--f-mono); font-size: 12px; color: var(--accent-pale); margin: 0 0 24px; font-weight: 500; } .final-cta h2 { font-family: var(--f-sans); font-weight: 400; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.14; letter-spacing: -0.022em; color: rgba(255, 255, 255, 1); margin: 0 0 20px; font-feature-settings: "ss01", "cv11"; } .final-cta h2 em { font-style: normal; font-weight: 400; color: rgba(255, 255, 255, 0.6); letter-spacing: -0.022em; } .final-cta p { font-size: clamp(17px, 1.8vw, 21px); color: rgba(255, 255, 255, 0.72); max-width: 56ch; margin: 0 auto 48px; line-height: 1.55; } .final-cta .btn-primary { background: var(--bg); color: var(--ink); } .final-cta .btn-primary:hover { background: var(--accent); color: var(--bg); } /* Content calendar mockup */ .calendar { background: var(--bg); } .calendar-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; } .calendar-month { font-family: var(--f-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 0; color: var(--ink); } .calendar-meta { font-family: var(--f-mono); font-size: 12px; color: var(--ink-softer); } .calendar-meta strong { color: var(--accent); font-weight: 600; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .calendar-day-h { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-softer); text-align: center; padding: 8px 0; } .calendar-cell { aspect-ratio: 1; background: var(--paper); border-radius: 5px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; position: relative; min-height: 64px; overflow: hidden; } .calendar-cell.is-empty { background: transparent; } .calendar-cell.is-today { background: var(--accent-soft); outline: 1px solid var(--accent); } .calendar-cell-date { font-family: var(--f-mono); color: var(--ink-soft); font-size: 10px; font-weight: 500; } .calendar-post { background: var(--accent); color: var(--bg); padding: 2px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-sans); } .calendar-post.is-fb { background: var(--ink); } .calendar-post.is-reel { background: var(--accent-deep); } .calendar-post.is-story { background: var(--ink-soft); } /* Inquiry board mockup */ .pipeline { background: var(--bg); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .pipeline-col { background: var(--paper); border-radius: 8px; padding: 14px; min-height: 280px; } .pipeline-col-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); } .pipeline-col-name { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-weight: 600; } .pipeline-col-count { font-family: var(--f-mono); font-size: 11px; color: var(--accent); font-weight: 600; } .pipeline-card { background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; } .pipeline-card-name { font-weight: 600; color: var(--ink); margin: 0 0 4px; font-size: 13px; letter-spacing: -0.01em; } .pipeline-card-meta { font-family: var(--f-mono); font-size: 10px; color: var(--ink-softer); } .pipeline-card-source { display: inline-block; margin-top: 6px; padding: 2px 6px; background: var(--accent-soft); color: var(--accent-deep); border-radius: 3px; font-family: var(--f-mono); font-size: 9px; font-weight: 600; } @media (max-width: 880px) { .calendar-grid { font-size: 10px; } .calendar-cell { min-height: 52px; padding: 4px 5px; } .calendar-post { font-size: 8px; padding: 1px 3px; } .calendar-month { font-size: 16px; } /* Pipeline → horizontal snap-scroll on mobile */ .pipeline { grid-template-columns: 220px 220px 220px 220px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--pad-x) * -0.5); padding-left: calc(var(--pad-x) * 0.5); padding-right: calc(var(--pad-x) * 0.5); } .pipeline-col { scroll-snap-align: start; flex-shrink: 0; min-height: 240px; } .pipeline::-webkit-scrollbar { height: 4px; } .pipeline::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; } } @media (max-width: 600px) { /* Calendar — even tighter on small phones */ .calendar-cell { min-height: 42px; padding: 3px 4px; } .calendar-cell-date { font-size: 9px; } .calendar-post { font-size: 0; padding: 2px; border-radius: 2px; min-height: 4px; } /* Show colored dot only on mobile */ .calendar-day-h { font-size: 9px; padding: 4px 0; } } /* Stylized AI receptionist conversation — inside ui-mockup */ .chat-message { display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-start; } .chat-message-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ink); flex-shrink: 0; } .chat-message.is-ai .chat-message-avatar { background: var(--ink); color: var(--bg); border-color: var(--ink); } .chat-message-bubble { flex: 1; background: var(--paper); padding: 12px 16px; border-radius: 14px; border-top-left-radius: 4px; font-size: 14px; line-height: 1.5; color: var(--ink); } .chat-message.is-ai .chat-message-bubble { background: var(--ink); color: rgba(255, 255, 255, 0.94); border-top-left-radius: 14px; border-top-right-radius: 4px; font-weight: 400; } .chat-message-meta { font-family: var(--f-mono); font-size: 11px; color: var(--ink-softer); margin-top: 4px; } /* ============================================================ 8-STAGE SYSTEM DIAGRAM (clean tech feel) ============================================================ */ .diagram { margin: 64px 0; padding: 48px 32px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; } .diagram-stages { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; position: relative; } .diagram-stage { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 4px; } .diagram-stage::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 1px; background: var(--rule); } .diagram-stage:first-child::before { display: none; } .diagram-stage-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); position: relative; z-index: 1; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; } .diagram-stage-dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .diagram-stage-num { font-family: var(--f-mono); font-size: 11px; color: var(--ink-softer); margin: 0 0 6px; } .diagram-stage-title { font-family: var(--f-sans); font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0; } @media (max-width: 880px) { .diagram { padding: 36px 24px; } .diagram-stages { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; } .diagram-stage::before { display: none; } } /* ============================================================ STAGE LIST ============================================================ */ .stages { margin-top: 32px; border-top: 1px solid var(--rule); } .stage-row { display: grid; grid-template-columns: 80px 1.3fr 2fr; gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--rule); align-items: baseline; transition: background var(--t-med) var(--ease); } .stage-row:hover { background: var(--paper); } .stage-num { font-family: var(--f-mono); font-weight: 500; font-size: 14px; color: var(--accent); letter-spacing: 0; } .stage-title { font-family: var(--f-sans); font-weight: 400; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.18; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.018em; } .stage-tag { font-family: var(--f-mono); font-size: 12px; color: var(--accent); margin: 0; } .stage-body { font-size: 15px; color: var(--ink-soft); line-height: 1.65; margin: 0; max-width: 60ch; } @media (max-width: 800px) { .stage-row { grid-template-columns: 56px 1fr; gap: 16px; padding: 28px 0; } .stage-body { grid-column: 2; margin-top: 12px; } .stage-title { font-size: 20px; } } /* ============================================================ TIERS — clean cards ============================================================ */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } .tier { background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; padding: 40px 32px; display: flex; flex-direction: column; gap: 24px; transition: border-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease); } .tier:hover { border-color: var(--ink); transform: translateY(-2px); } .tier.is-featured { background: var(--ink); border-color: var(--ink); color: var(--bg); } .tier.is-featured:hover { transform: translateY(-2px); } .tier-eyebrow { font-family: var(--f-mono); font-size: 11px; color: var(--accent); margin: 0; font-weight: 500; } .tier-name { font-family: var(--f-sans); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.1; margin: 0; color: var(--ink); letter-spacing: -0.022em; } .tier.is-featured .tier-name { color: var(--bg); } .tier-name em { font-style: italic; color: var(--accent); font-weight: 600; letter-spacing: -0.02em; } .tier.is-featured .tier-name em { color: var(--accent-pale); } .tier-blurb { font-size: 15px; color: var(--ink-soft); line-height: 1.5; margin: 0; } .tier.is-featured .tier-blurb { color: rgba(255, 255, 255, 0.72); } .tier-price { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 20px 0; margin: 0; } .tier.is-featured .tier-price { border-color: rgba(255, 255, 255, 0.16); } .tier-price-setup { font-family: var(--f-sans); font-weight: 700; font-size: 32px; letter-spacing: -0.03em; color: var(--ink); display: block; line-height: 1; } .tier.is-featured .tier-price-setup { color: var(--bg); } .tier-price-setup span { font-family: var(--f-mono); font-size: 11px; color: var(--ink-softer); font-weight: 500; margin-left: 6px; } .tier.is-featured .tier-price-setup span { color: rgba(255, 255, 255, 0.5); } .tier-price-mo { font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); margin-top: 10px; } .tier.is-featured .tier-price-mo { color: rgba(255, 255, 255, 0.7); } .tier-price-mo strong { color: var(--ink); font-weight: 700; } .tier.is-featured .tier-price-mo strong { color: var(--bg); } .tier-includes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .tier-includes li { font-size: 13px; color: var(--ink-soft); line-height: 1.55; padding-left: 22px; position: relative; } .tier.is-featured .tier-includes li { color: rgba(255, 255, 255, 0.85); } .tier-includes li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 600; } .tier-exit { font-size: 12px; color: var(--ink-softer); border-top: 1px solid var(--rule-soft); padding-top: 16px; margin: 0; font-style: italic; } .tier.is-featured .tier-exit { color: rgba(255, 255, 255, 0.58); border-color: rgba(255, 255, 255, 0.12); } @media (max-width: 980px) { .tiers { grid-template-columns: 1fr; gap: 16px; } } /* ============================================================ PROCESS STEPS ============================================================ */ .process-steps { display: flex; flex-direction: column; gap: 0; margin-top: 56px; border-top: 1px solid var(--rule); } .process-step { display: grid; grid-template-columns: 80px 1.3fr 2fr; gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--rule); align-items: start; transition: background var(--t-med) var(--ease); } .process-step:hover { background: var(--paper); } .process-step-num { font-family: var(--f-mono); font-weight: 500; font-size: 14px; color: var(--accent); } .process-step-title { font-family: var(--f-sans); font-weight: 400; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.18; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.018em; } .process-step-meta { font-family: var(--f-sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--accent); margin: 0; } .process-step-body { font-size: 15px; color: var(--ink-soft); line-height: 1.65; margin: 0; } @media (max-width: 880px) { .process-step { grid-template-columns: 56px 1fr; gap: 16px; padding: 32px 0; } .process-step-body { grid-column: 2; margin-top: 14px; } .process-step-title { font-size: 22px; } } /* ============================================================ FOUNDERS — clean type, no photography ============================================================ */ .founders { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 56px; align-items: start; } .founder-card { background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; padding: 48px 40px; transition: border-color var(--t-fast) var(--ease); } .founder-card:hover { border-color: var(--ink); } .founder-mono { font-family: var(--f-mono); font-size: 12px; color: var(--accent); margin: 0 0 16px; font-weight: 500; } .founder-name { font-family: var(--f-sans); font-weight: 400; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.1; margin: 0 0 8px; color: var(--ink); letter-spacing: -0.022em; } .founder-role { font-size: 14px; color: var(--ink-soft); margin: 0 0 24px; } .founder-bio { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 50ch; } @media (max-width: 880px) { .founders { grid-template-columns: 1fr; gap: 20px; } .founder-card { padding: 36px 28px; } } /* ============================================================ INSIGHTS GRID — clean cards ============================================================ */ .insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } .insight-card { background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; padding: 32px 28px; transition: border-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease); display: flex; flex-direction: column; gap: 14px; } .insight-card:hover { border-color: var(--ink); transform: translateY(-2px); } .insight-card-meta { font-family: var(--f-mono); font-size: 11px; color: var(--accent); margin: 0; font-weight: 500; } .insight-card-title { font-family: var(--f-sans); font-weight: 400; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.2; color: var(--ink); margin: 0; letter-spacing: -0.018em; } .insight-card-status { font-size: 13px; color: var(--ink-softer); margin: 0; margin-top: 8px; } @media (max-width: 980px) { .insights-grid { grid-template-columns: 1fr; gap: 16px; } } /* ============================================================ APPLY FORM ============================================================ */ .apply-form { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 56px 48px; margin-top: 56px; max-width: 720px; margin-left: auto; margin-right: auto; } .form-section { margin-bottom: 36px; } .form-section:last-of-type { margin-bottom: 28px; } .form-section-h { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-softer); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; border-bottom: 1px solid var(--rule); padding-bottom: 12px; width: 100%; } .form-section-h::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field { margin-bottom: 22px; } .field:last-child { margin-bottom: 0; } .field-label { display: block; font-family: var(--f-sans); font-size: 13px; color: var(--ink); margin-bottom: 8px; font-weight: 500; letter-spacing: -0.005em; } .field-label .required { color: var(--accent); font-weight: 400; margin-left: 2px; } .field-hint { font-size: 13px; line-height: 1.55; color: var(--ink-softer); margin: 0 0 10px; font-style: italic; } .field-input, .field-select, .field-textarea { width: 100%; font-family: var(--f-sans); font-size: 15px; background: #ffffff; border: 1px solid var(--rule); border-radius: 8px; color: #14161d; padding: 12px 14px; outline: none; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); -webkit-appearance: none; appearance: none; } .field-input::placeholder, .field-textarea::placeholder { color: #9aa0ad; } .field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44, 95, 255, 0.10); } .field-textarea { resize: vertical; min-height: 150px; line-height: 1.55; padding: 14px 16px; } .field-select { /* custom dropdown arrow */ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A8198' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; } .form-submit { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #ffffff; border: 0; padding: 14px 26px; margin-top: 16px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; border-radius: 8px; cursor: pointer; transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); font-family: var(--f-sans); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 6px 18px -4px rgba(15, 17, 23, 0.30), 0 2px 5px -1px rgba(44, 95, 255, 0.18); } .form-submit:hover { background: #1E4FE0; transform: translateY(-1px); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset, 0 12px 28px -6px rgba(15, 17, 23, 0.40), 0 4px 10px -2px rgba(44, 95, 255, 0.30); } .form-submit .arrow { font-size: 16px; transition: transform var(--t-med) var(--ease); } .form-submit:hover .arrow { transform: translateX(4px); } .form-foot { margin-top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-softer); text-align: left; } .form-success { display: none; font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--accent-soft); border: 1px solid var(--accent-pale); border-radius: 8px; padding: 20px 24px; margin-top: 24px; } .form-success.is-visible { display: block; } @media (max-width: 760px) { .apply-form { padding: 32px 24px; } .field-row { grid-template-columns: 1fr; gap: 0; } } /* ============================================================ PHILOSOPHY — long-form pull-quotes ============================================================ */ .pull { font-family: var(--f-sans); font-weight: 500; font-style: italic; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.28; color: var(--ink); border-left: 2px solid var(--accent); padding: 12px 0 12px 28px; margin: 56px 0; max-width: 760px; letter-spacing: -0.022em; } /* ============================================================ DARK SECTION (true black, high-impact) ============================================================ */ .section.is-dark { background: var(--black); color: rgba(255, 255, 255, 0.92); } .section.is-dark .section-eyebrow { color: var(--accent-pale); } .section.is-dark .section-h { color: rgba(255, 255, 255, 1); } .section.is-dark .section-h em { color: var(--accent-pale); } .section.is-dark .section-sub { color: rgba(255, 255, 255, 0.72); } .section.is-dark .prose p { color: rgba(255, 255, 255, 0.85); } .section.is-dark .pull { color: rgba(255, 255, 255, 0.96); border-left-color: var(--accent-pale); } .section.is-dark .display-quote { color: rgba(255, 255, 255, 0.96); } .section.is-dark .display-quote em { color: var(--accent-pale); } /* ============================================================ INDIGO SECTION — secondary high-impact moment Deep indigo with champagne gold accents. Luxury watch dial. ============================================================ */ .section.is-indigo { background: radial-gradient(ellipse at 85% 15%, rgba(44, 95, 255, 0.18) 0%, transparent 55%), radial-gradient(ellipse at 15% 90%, rgba(44, 95, 255, 0.10) 0%, transparent 55%), var(--black); color: rgba(255, 255, 255, 0.92); position: relative; overflow: hidden; } .section.is-indigo::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 1px; background: var(--accent); box-shadow: 0 0 12px rgba(44, 95, 255, 0.5); } .section.is-indigo .section-eyebrow { color: var(--accent-pale); } .section.is-indigo .section-h { color: #FFFFFF; } .section.is-indigo .section-h em { color: var(--accent-pale); } .section.is-indigo .section-sub { color: rgba(248, 246, 241, 0.72); } .section.is-indigo .display-quote { color: #FFFFFF; } .section.is-indigo .display-quote em { color: var(--accent-pale); } .section.is-indigo .prose p { color: rgba(248, 246, 241, 0.86); } .section.is-indigo .prose strong { color: #FFFFFF; } .section.is-indigo .attribution { color: var(--accent-pale); } .section.is-indigo .btn-primary { background: var(--accent); color: var(--ink); } .section.is-indigo .btn-primary:hover { background: var(--bg); color: var(--ink); } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--rule); padding: 80px var(--pad-x) 48px; background: var(--bg); } .footer-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; align-items: start; } .footer-mark { font-family: var(--f-sans); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 14px; } .footer-mark .dot { color: var(--accent); margin: 0 1px; } .footer-tagline { font-size: 14px; color: var(--ink-soft); max-width: 360px; margin: 0; line-height: 1.55; } .footer-col-h { font-family: var(--f-sans); font-size: 15px; color: var(--ink); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); font-weight: 500; letter-spacing: -0.005em; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 14px; color: var(--ink-soft); transition: color var(--t-fast) var(--ease); } .footer-col a:hover { color: var(--ink); } .footer-bottom { max-width: var(--max-w); margin: 56px auto 0; border-top: 1px solid var(--rule); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-sans); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); } .footer-bottom .dot { color: var(--accent); } @media (max-width: 880px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; } } @media (max-width: 480px) { .footer-inner { grid-template-columns: 1fr; } } /* ============================================================ REVEAL ANIMATIONS ============================================================ */ .reveal { opacity: 1; transform: none; } html.js-revealing .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); will-change: opacity, transform; } html.js-revealing .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js-revealing .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } @media (max-width: 1100px) { .page-head-visual .page-head-inner { grid-template-columns: 1fr; gap: 40px; } .hero-visual-card { min-height: auto; } } @media (max-width: 720px) { .page-head.page-head-visual { padding-top: 92px; padding-bottom: 64px; } .hero-visual-card { padding: 18px; border-radius: 12px; } .hero-visual-card::after { inset: 10px; } .hero-visual-top { align-items: flex-start; flex-direction: column; gap: 6px; } .path-flow { grid-template-columns: repeat(2, 1fr); } .path-flow::before { display: none; } .path-repair { grid-template-columns: 1fr; } .repair-core { min-width: 0; min-height: 54px; } .launch-lanes { grid-template-columns: 1fr; } .launch-lanes::before { left: 50%; right: auto; top: 64px; bottom: 64px; width: 1px; height: auto; } .lane-label { min-height: 38px; } .lane-step { min-height: auto; } .launch-output div { display: grid; grid-template-columns: 1fr 1fr; } .launch-output strong { text-align: center; } .belief-center { min-height: 330px; } .belief-center::before { width: 240px; height: 240px; } .belief-center::after { width: 168px; height: 168px; } .belief-ring span { font-size: 10.5px; line-height: 1.15; padding: 8px 9px; } .belief-ring span:nth-child(1) { left: 0; top: 8%; } .belief-ring span:nth-child(2) { right: 0; top: 8%; } .belief-ring span:nth-child(3) { left: 0; top: 44%; } .belief-ring span:nth-child(4) { right: 0; top: 44%; } .belief-ring span:nth-child(5) { left: 2%; bottom: 8%; } .belief-ring span:nth-child(6) { right: 3%; bottom: 8%; } .system-orbit, .launch-cycle { display: block; min-height: 340px; margin-top: 10px; } .system-orbit::before, .launch-cycle::before { left: 50%; right: auto; top: 50%; bottom: auto; width: 300px; height: 300px; transform: translate(-50%, -50%); } .system-orbit::after, .launch-cycle::after { width: 190px; } .system-core, .launch-core { width: 118px; height: 118px; padding: 15px; } .system-core strong, .launch-core strong { font-size: 12px; } .system-orbit .path-node, .launch-cycle .lane-step { width: 78px; min-height: 64px; padding: 8px; } .system-orbit .path-node strong, .launch-cycle .lane-step strong { font-size: 10.5px; } .launch-cycle .lane-step small { display: none; } .path-repair { margin-top: 8px; } } /* ============================================================ UTILITY ============================================================ */ .center { text-align: center; } .center.section-h { margin-left: auto; margin-right: auto; } .display-quote { font-family: var(--f-sans); font-weight: 400; font-size: clamp(22px, 2.8vw, 36px); line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); margin: 0; max-width: 30ch; font-feature-settings: "ss01", "cv11"; } .display-quote em { font-style: italic; color: var(--ink-soft); font-weight: 400; letter-spacing: -0.018em; } .attribution { font-family: var(--f-mono); font-size: 12px; color: var(--accent); margin-top: 28px; display: inline-block; } /* Override v3-v5 imagery classes — disable so old images don't render */ .image-band, .image-text-band, .founder-img, .insight-card-img { display: none !important; } /* ============================================================ HERO — CENTER-STAGE TYPOGRAPHIC (homepage) LeftClick-style: massive declarative claim + tight subline ============================================================ */ .hero.is-typographic { padding: clamp(120px, 16vw, 220px) var(--pad-x) clamp(100px, 12vw, 160px); text-align: center; } .hero.is-typographic .hero-inner { max-width: 1200px; margin: 0 auto; } .hero.is-typographic .hero-copy { max-width: 1100px; margin: 0 auto; text-align: center; } .hero.is-typographic .hero-headline { font-family: var(--f-sans); font-weight: 400; font-size: clamp(48px, 7.4vw, 112px); line-height: 1.12; letter-spacing: -0.028em; color: var(--ink); max-width: 18ch; margin: 0 auto 36px; } /* em styling inherits from v20-dark.css: italic + accent-pale cobalt */ .hero.is-typographic .hero-sub { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 640px; margin: 0 auto 44px; font-weight: 400; } .hero.is-typographic .hero-actions { justify-content: center; margin: 0; } @media (max-width: 760px) { .hero.is-typographic { padding-top: 96px; padding-bottom: 72px; } .hero.is-typographic .hero-headline { letter-spacing: -0.022em; } } /* Eyebrow above headline — Aesop-style quiet preamble, not a mono "tag" */ .hero.is-typographic .hero-eyebrow-line { font-family: var(--f-display, var(--f-sans)); font-style: italic; font-weight: 400; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.5; color: var(--ink-soft); letter-spacing: 0; margin: 0 auto 28px; max-width: 38ch; } /* Microline below CTA — quiet trust signal for AI-skeptical operators */ .hero.is-typographic .hero-microline { font-family: var(--f-sans); font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--ink-softer); letter-spacing: 0.01em; margin: 28px auto 0; max-width: 48ch; } /* Tighten the new shorter headline — slightly larger since it's two short lines */ .hero.is-typographic .hero-headline { max-width: 14ch; } /* ============================================================ HERO BACKGROUND FX — ambient drift + cursor/finger spotlight Universal: always-on ambient layer (drift), responsive layer (spotlight) activated by mouse/touch input. ============================================================ */ /* ============================================================ HERO FX v2 — aurora + constellation behind crisp headline ============================================================ */ /* Default cursor-near token (driven by JS) so the aurora has a value */ .hero.is-typographic { --mouse-x: 50%; --mouse-y: 50%; --cursor-near: 0; } /* ==================================================================== CINEMATIC PHOTOGRAPHIC HERO — Kinfolk/Monocle moody-editorial aesthetic. Layered directional light + deep vignette + film grain. If a real photo is later dropped at /images/hero-bg.jpg, swap the base linear-gradient for: url('/images/hero-bg.jpg') center / cover no-repeat ==================================================================== */ .hero.is-typographic::before { background: /* Vignette pushing attention to the center of the hero */ radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55) 100%), /* Warm window-key light from upper-left */ radial-gradient(ellipse 55% 70% at 12% 16%, rgba(244, 215, 165, 0.22), transparent 60%), /* Cool ambient bounce from upper-right */ radial-gradient(ellipse 50% 60% at 90% 20%, rgba(120, 152, 200, 0.16), transparent 60%), /* Deep shadow plate at bottom */ radial-gradient(ellipse 80% 50% at 50% 100%, rgba(5, 7, 12, 0.7), transparent 70%), /* Subtle horizontal warm/cool split — like firelight vs window light */ linear-gradient(105deg, rgba(28, 22, 16, 0.4) 0%, transparent 35%, transparent 60%, rgba(14, 18, 28, 0.5) 100%), /* Deep navy-black base */ linear-gradient(180deg, #1A1C24 0%, #0E1018 55%, #06080E 100%); animation: none; will-change: auto; } /* Film grain noise overlay — SVG fractal noise, scaled small + tiled */ .hero.is-typographic::after { background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; background-repeat: repeat; opacity: 0.10; mix-blend-mode: overlay; mask-image: none; -webkit-mask-image: none; } /* Canvas is now the gradient-mesh layer — visible, sits between base + grain */ .hero.is-typographic .hero-fx-canvas { display: block; z-index: 0; } /* Ensure the grain overlay sits ABOVE the mesh canvas */ .hero.is-typographic::after { z-index: 1; } /* CONSTELLATION CANVAS — full-hero background layer drawn by JS, behind text */ .hero.is-typographic .hero-fx-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; width: 100% !important; height: 100% !important; } /* System cursor stays visible in the hero — no custom-cursor transformation */ /* Headline stays crisp; sits above the constellation canvas */ .hero.is-typographic .hero-copy { position: relative; z-index: 2; } /* LIQUID SHIMMER on headline words — true color-paint technique using transparent text fill + two-layer background gradient. Bottom layer = the text's natural color; top layer = a soft spot of shimmer color that fades in around the cursor. The shimmer ACTUALLY paints its color through the text glyph (works for any contrast direction — light text + dark shimmer or vice versa). padding/margin compensation keeps italic descenders (g, y) from clipping. */ .hero.is-typographic .shimmer-word { position: relative; display: inline-block; padding-bottom: 0.18em; margin-bottom: -0.18em; --shimmer-x: 50%; --shimmer-on: 0; background-image: linear-gradient( 105deg, transparent 0%, transparent calc(var(--shimmer-x, 50%) - 16%), rgba(255, 255, 255, var(--shimmer-on, 0)) var(--shimmer-x, 50%), transparent calc(var(--shimmer-x, 50%) + 16%), transparent 100% ), linear-gradient(0deg, currentColor, currentColor); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: --shimmer-x 0.3s ease; cursor: default; } /* "Less to manage." (white default) → cursor reveals a COBALT BLUE shimmer spot */ .hero.is-typographic .hero-headline > .shimmer-word { background-image: linear-gradient( 105deg, transparent 0%, transparent calc(var(--shimmer-x, 50%) - 16%), rgba(138, 158, 255, var(--shimmer-on, 0)) var(--shimmer-x, 50%), transparent calc(var(--shimmer-x, 50%) + 16%), transparent 100% ), linear-gradient(0deg, currentColor, currentColor); } /* Hover state — let the shimmer come through over the text fill */ .hero.is-typographic .shimmer-word:hover { -webkit-text-fill-color: transparent; } .hero.is-typographic em .shimmer-word:hover { -webkit-text-fill-color: transparent; } /* Reduced-motion fallback */ @media (prefers-reduced-motion: reduce) { .hero.is-typographic::before { animation: none; } .hero.is-typographic .hero-fx-canvas { display: none; } .hero.is-typographic .shimmer-word { background-image: none; -webkit-text-fill-color: currentColor !important; } }