/* ============================================================================= ADRECTIVE — install protocol stylesheet Cinematic dark · Geist sans · Instrument Serif italic accent · Geist Mono labels Conversion-built. Owner-grade typography. Template-ready. ========================================================================== */ :root { color-scheme: dark; /* Surface */ --bg: #030303; --bg-2: #060606; --bg-3: #080808; --panel: #0a0a0a; --panel-2: #0f0f0f; --panel-3: #141414; /* Lines */ --line: rgba(255, 255, 255, 0.085); --line-bright: rgba(255, 255, 255, 0.22); --line-soft: rgba(255, 255, 255, 0.045); --hairline: 1px solid var(--line); --hairline-bright: 1px solid var(--line-bright); /* Ink */ --text: #f4f4f1; --muted: #a1a19c; --dim: #5a5a55; --ink: #050505; --white: #ffffff; --warm: #efe7d7; --signal: #e8c98c; --signal-soft: rgba(232, 201, 140, 0.18); /* Type */ --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --serif: "Instrument Serif", "Times New Roman", serif; /* Layout */ --shell-max: 1440px; --gutter: clamp(20px, 4vw, 56px); --section-pad: clamp(80px, 11vw, 160px); --side-rail: 56px; /* Easing — tuned for buttery, video-grade motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* "expo-out" — sharper, more satisfying landing */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-cinematic: cubic-bezier(0.19, 1, 0.22, 1); /* extra-snappy for hero moments */ } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; font-feature-settings: "ss01", "ss02", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html { scroll-behavior: smooth; } body { position: relative; min-height: 100vh; overflow-x: hidden; } body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; } body::before { /* Vignette overlay only — solid base color lives on itself, leaving the aurora (z-index: -2) visible through this layer. */ background: radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, 0.05), transparent 60%), radial-gradient(ellipse at 85% 110%, rgba(232, 201, 140, 0.05), transparent 50%); } body::after { opacity: 0.32; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); /* Film grain — 8 discrete steps so the noise scintillates like real 35mm grain instead of smooth-sliding. Pure CSS background- position animation, composited on the GPU, no measurable cost. */ animation: grain-shift 7s steps(8) infinite; } @keyframes grain-shift { 0% { background-position: 0% 0%; } 10% { background-position: -7% -12%; } 20% { background-position: -18% 6%; } 30% { background-position: 9% -27%; } 40% { background-position: -6% 28%; } 50% { background-position: -17% 11%; } 60% { background-position: 18% 1%; } 70% { background-position: 1% 17%; } 80% { background-position: 4% 38%; } 90% { background-position: -12% 12%; } 100% { background-position: 0% 0%; } } /* ---------- AURORA — drifting gradient mesh (zero-JS) ------------------ */ .aurora { position: fixed; inset: 0; z-index: -2; /* behind body::before vignette */ pointer-events: none; overflow: hidden; } .aurora-blob { position: absolute; width: 80vw; height: 80vw; max-width: 1400px; max-height: 1400px; border-radius: 50%; filter: blur(80px); opacity: 0.78; will-change: transform; } .aurora-blob--gold { background: radial-gradient(circle at 50% 50%, rgba(232, 201, 140, 0.85), rgba(232, 201, 140, 0.32) 28%, transparent 62%); top: -25%; left: -16%; animation: aurora-drift-a 42s ease-in-out infinite; } .aurora-blob--cream { background: radial-gradient(circle at 50% 50%, rgba(239, 231, 215, 0.55), rgba(239, 231, 215, 0.18) 30%, transparent 62%); top: 26%; right: -22%; opacity: 0.62; animation: aurora-drift-b 58s ease-in-out infinite; } .aurora-blob--deep { background: radial-gradient(circle at 50% 50%, rgba(70, 100, 168, 0.62), rgba(70, 100, 168, 0.22) 30%, transparent 62%); bottom: -32%; left: 16%; opacity: 0.82; animation: aurora-drift-c 49s ease-in-out infinite; } @keyframes aurora-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 33% { transform: translate3d(14vw, 8vh, 0) rotate(28deg) scale(1.08); } 66% { transform: translate3d(-6vw, 14vh, 0) rotate(-18deg) scale(0.95); } } @keyframes aurora-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 40% { transform: translate3d(-22vw, -10vh, 0) rotate(-25deg) scale(1.12); } 75% { transform: translate3d(-8vw, 6vh, 0) rotate(15deg) scale(0.92); } } @keyframes aurora-drift-c { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 30% { transform: translate3d(12vw, -18vh, 0) rotate(40deg) scale(1.06); } 60% { transform: translate3d(-14vw, -8vh, 0) rotate(-22deg) scale(0.9); } } /* Reduce-motion respect (toggle + system preference) */ html.no-motion .aurora-blob, html.no-motion body::after { animation: none !important; } @media (prefers-reduced-motion: reduce) { .aurora-blob, body::after { animation: none; } } @media (max-width: 720px) { /* Cheaper blur on mobile GPUs */ .aurora-blob { filter: blur(64px); } } /* ---------- ARCHITECTURAL GRID — site-wide drafting plate ------------- */ /* Twelve vertical 1px columns plus faint horizontal rules every ~14vh, masked toward a soft ellipse so edges of the viewport fall to black. Sits above the aurora, below the film grain. */ .bg-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.042) 0, rgba(255, 255, 255, 0.042) 1px, transparent 1px, transparent 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 0, rgba(255, 255, 255, 0.022) 1px, transparent 1px, transparent 100%); background-size: calc(100% / 12) 100%, 100% 14vh; background-position: 0 0, 0 0; -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 42%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%); mask-image: radial-gradient(ellipse 75% 60% at 50% 42%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%); } @media (max-width: 720px) { /* Six columns on phones so lines stay visible without crowding text. */ .bg-grid { background-size: calc(100% / 6) 100%, 100% 14vh; } } /* ---------- NEURAL FIELD — canvas lattice behind the hero ------------- */ .neural-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.55; mix-blend-mode: screen; transition: opacity 700ms var(--ease-out); } html.no-motion .neural-field { display: none; } /* ---------- SECTION SCAN SWEEP — one-pixel scanner per section -------- */ /* Injected as a child element by script.js so we don't collide with the existing .scene::after divider draw-in. */ .scene-scan { position: absolute; left: 0; right: 0; top: -2%; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.82) 50%, rgba(255, 255, 255, 0) 94%, transparent 100% ); box-shadow: 0 0 14px rgba(255, 255, 255, 0.42); opacity: 0; z-index: 3; will-change: top, opacity; } .scene.is-scanning .scene-scan { animation: scene-scan 1900ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes scene-scan { 0% { top: -2%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 102%; opacity: 0; } } html.no-motion .scene-scan { display: none; } @media (prefers-reduced-motion: reduce) { .scene-scan { display: none; } } /* ---------- CURSOR ATMOSPHERE — pointer-following light halo ---------- */ /* A wide, very soft white radial that follows the cursor at 6% opacity, screen-blended so it only adds light. Disabled on touch and in no-motion. The custom cursor lives at int-max z-index, so this halo sits under the cursor dot/ring but above every content layer. */ .cursor-atmosphere { position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient( circle 540px at var(--cx, 50%) var(--cy, 50%), rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.022) 28%, transparent 62% ); mix-blend-mode: screen; opacity: 0; transition: opacity 480ms var(--ease-out); } body.has-pointer .cursor-atmosphere { opacity: 1; } html.no-motion .cursor-atmosphere { display: none; } @media (prefers-reduced-motion: reduce) { .cursor-atmosphere { display: none; } } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: 0; background: transparent; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--signal); color: var(--ink); } /* ---------- TYPOGRAPHY -------------------------------------------------- */ h1, h2, h3, h4, h5, p { margin: 0; } h1 { font-family: var(--sans); font-weight: 300; font-size: clamp(48px, 7.4vw, 110px); line-height: 0.94; letter-spacing: -0.028em; color: var(--white); } h2 { font-family: var(--sans); font-weight: 300; font-size: clamp(36px, 5vw, 72px); line-height: 0.99; letter-spacing: -0.024em; color: var(--white); } h3 { font-family: var(--sans); font-weight: 400; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.18; letter-spacing: -0.008em; color: var(--white); } p { color: var(--muted); line-height: 1.55; font-size: 16px; } /* SERIF — italic accent (ALWAYS pair with sans) */ .serif, .serif-block em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.012em; color: var(--warm); } .serif-block { display: block; } .serif-block em { font-size: 1.04em; line-height: 0.92; } /* MONO — labels, tickers, metadata */ .mono { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* EYEBROW */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 32px; padding: 8px 14px; border: var(--hairline); background: rgba(255, 255, 255, 0.025); font-family: var(--mono); color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; } .eyebrow > span { display: inline-block; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); animation: pulseDot 2.6s var(--ease-in-out) infinite; } @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } } /* SPLIT TEXT (kinetic headline) */ .word { display: inline-block; overflow: hidden; vertical-align: top; margin-right: 0.18em; } .word > i { display: inline-block; font-style: inherit; transform: translateY(120%); transition: transform 1100ms var(--ease-out); /* will-change set inline by JS for the brief reveal window only */ } [data-split].is-visible .word > i { transform: translateY(0); } [data-split].is-visible .word { transition-delay: var(--word-delay, 0ms); } /* ---------- BUTTONS ----------------------------------------------------- */ .button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border: 1px solid transparent; background: var(--white); color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; overflow: hidden; isolation: isolate; transition: translate 120ms var(--ease-out), scale 240ms var(--ease-out), background 240ms var(--ease-out), color 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); } .button::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(232, 201, 140, 0.28), transparent 60%); opacity: 0; transition: opacity 220ms var(--ease-out); z-index: -1; } .button:hover::before { opacity: 1; } .button::after { content: "→"; display: inline-block; font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; transform: translateX(0); transition: transform 240ms var(--ease-out); } .button:hover::after { transform: translateX(5px); } .button-primary { background: var(--white); color: var(--ink); box-shadow: 0 18px 60px rgba(255,255,255,0.06), inset 0 0 0 1px transparent; } .button-primary:hover { background: var(--warm); box-shadow: 0 28px 90px rgba(232,201,140,0.22), inset 0 0 0 1px rgba(0,0,0,0.05); /* `scale` (individual property) — does not fight inline `translate` set by the magnetic JS handler. Old `transform: translateY(-1px)` was conflicting and causing the perceived pause-then-snap. */ scale: 1.015; } .button-ghost { background: transparent; color: var(--text); border-color: var(--line-bright); } .button-ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--white); color: var(--white); } /* ---------- LAYOUT PRIMITIVES ------------------------------------------- */ .scene { position: relative; padding: var(--section-pad) var(--gutter); border-bottom: var(--hairline); } .cinematic-scene { isolation: isolate; } /* ---------- PAGE LOAD CURTAIN — cinematic boot sequence -------------- */ /* Sequence: 0.0s screen black → 0.2s orb dot ignites → 0.5s orb expands + horizontal scan lines sweep outward → 0.9s brand text fades in → 1.3s status text types in → 1.9s status flips to "Ready" + flash → 2.0s curtain SPLITS (top slides up, bottom slides down) revealing page. */ .page-curtain { position: fixed; inset: 0; z-index: 200; background: transparent; display: grid; place-items: center; pointer-events: none; overflow: hidden; } /* Two halves that split apart on .is-loaded */ .curtain-split { position: absolute; left: 0; right: 0; height: 50%; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255, 255, 255, 0.025), transparent 70%), linear-gradient(180deg, #050507, var(--bg) 60%, #020203); z-index: 1; transition: transform 1200ms cubic-bezier(0.76, 0, 0.24, 1) 60ms; } .curtain-split--top { top: 0; border-bottom: 1px solid rgba(232, 201, 140, 0.4); } .curtain-split--bottom { bottom: 0; border-top: 1px solid rgba(232, 201, 140, 0.4); } .is-loading .curtain-split--top { transform: translateY(0); } .is-loading .curtain-split--bottom { transform: translateY(0); } .is-loaded .curtain-split--top { transform: translateY(-101%); } .is-loaded .curtain-split--bottom { transform: translateY(101%); } /* Center stage holds orb + scan lines + text */ .curtain-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 28px; opacity: 1; transition: opacity 320ms var(--ease-out); } .is-loaded .curtain-stage { opacity: 0; transition-delay: 0ms; } /* Orb that ignites from a tiny dot to full glow */ .curtain-orb { position: relative; width: 96px; height: 96px; display: grid; place-items: center; animation: curtain-orb-expand 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes curtain-orb-expand { 0% { transform: scale(0.05); opacity: 0; } 20% { opacity: 1; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } .curtain-orb-glow { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.98), rgba(232, 201, 140, 0.62) 28%, rgba(0, 0, 0, 0.92) 72%); box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.14), inset 0 0 60px rgba(0, 0, 0, 0.85), 0 0 60px rgba(232, 201, 140, 0.45), 0 0 140px rgba(232, 201, 140, 0.2), 0 0 260px rgba(255, 255, 255, 0.08); filter: blur(0.4px); animation: orbBreath 3.2s var(--ease-in-out) infinite; } .curtain-orb-core { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 18px rgba(255, 255, 255, 0.95), 0 0 48px rgba(232, 201, 140, 0.5); transform: translate(-22%, -18%); } .curtain-orb-ring { position: absolute; inset: 0; border: 1px solid rgba(232, 201, 140, 0.22); border-radius: 50%; pointer-events: none; } .curtain-orb-ring--1 { animation: curtain-ring-expand 1400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; } .curtain-orb-ring--2 { animation: curtain-ring-expand 1400ms cubic-bezier(0.16, 1, 0.3, 1) 420ms both; } .curtain-orb-ring--3 { animation: curtain-ring-expand 1400ms cubic-bezier(0.16, 1, 0.3, 1) 640ms both; } @keyframes curtain-ring-expand { 0% { transform: scale(0.6); opacity: 0; border-color: rgba(232, 201, 140, 0.7); } 20% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; border-color: rgba(232, 201, 140, 0.05); } } /* Horizontal scan lines sweeping outward from center */ .curtain-scan { position: absolute; left: 50%; height: 1px; width: 0; background: linear-gradient(90deg, transparent, var(--signal), transparent); box-shadow: 0 0 14px rgba(232, 201, 140, 0.55); transform: translateX(-50%); animation: curtain-scan-sweep 1300ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both; } .curtain-scan--up { top: calc(50% - 80px); } .curtain-scan--down { top: calc(50% + 80px); } @keyframes curtain-scan-sweep { 0% { width: 0; opacity: 0; } 20% { opacity: 1; } 100% { width: 88vw; opacity: 0.4; } } /* Brand text below orb — letter by letter */ .curtain-text { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); opacity: 0; transform: translateY(6px); animation: curtain-text-in 600ms var(--ease-out) 900ms forwards; } .curtain-text-sep { color: var(--dim); } .curtain-text-line--status { color: var(--signal); font-weight: 600; } @keyframes curtain-text-in { to { opacity: 1; transform: translateY(0); } } /* Loading status bar — fills in over the boot sequence */ .curtain-status { display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: curtain-text-in 500ms var(--ease-out) 1100ms forwards; } .curtain-status-bar { position: relative; width: 160px; height: 1px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .curtain-status-fill { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, transparent, var(--signal) 30%, var(--positive)); box-shadow: 0 0 10px rgba(232, 201, 140, 0.55); animation: curtain-status-fill 900ms cubic-bezier(0.4, 0, 0.2, 1) 1200ms both; } @keyframes curtain-status-fill { to { width: 100%; } } .curtain-status-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim); transition: color 240ms var(--ease-out); } .curtain-status-label.is-ready { color: var(--positive); } /* Flash burst when the curtain opens */ .curtain-flash { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 30% at 50% 50%, rgba(232, 201, 140, 0.4), transparent 70%); opacity: 0; z-index: 3; pointer-events: none; } .is-loaded .curtain-flash { animation: curtain-flash 700ms var(--ease-out) forwards; } @keyframes curtain-flash { 0% { opacity: 0; transform: scale(1); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } } @media (prefers-reduced-motion: reduce) { .curtain-orb, .curtain-orb-ring, .curtain-scan, .curtain-text, .curtain-status, .curtain-status-fill, .curtain-flash { animation: none; } .curtain-text, .curtain-status { opacity: 1; transform: none; } } /* ---------- SCROLL PROGRESS -------------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 40; pointer-events: none; background: rgba(255,255,255,0.04); } .scroll-progress-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--signal), var(--white)); box-shadow: 0 0 14px rgba(232,201,140,0.5); transition: width 80ms linear; } /* ---------- SIDE RAIL --------------------------------------------------- */ .side-rail { position: fixed; left: 0; top: 0; z-index: 22; width: var(--side-rail); height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 0; border-right: var(--hairline); background: rgba(3,3,3,0.6); backdrop-filter: blur(8px); pointer-events: none; } .side-rail-mark { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--warm); letter-spacing: -0.02em; } .side-rail-text { font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--dim); writing-mode: vertical-rl; transform: rotate(180deg); } .side-rail-tick { width: 1px; height: 80px; background: linear-gradient(180deg, transparent, var(--signal), transparent); opacity: 0.6; } /* ---------- HEADER ------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 16px var(--gutter) 16px calc(var(--side-rail) + var(--gutter)); border-bottom: var(--hairline); background: rgba(3, 3, 3, 0.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); font-weight: 500; letter-spacing: 0.0em; } .brand-mark { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.96), rgba(232,201,140,0.62) 38%, rgba(0,0,0,0.95) 75%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 1px rgba(255,255,255,0.06), 0 0 22px rgba(232,201,140,0.22); } .brand-name { font-size: 16px; letter-spacing: -0.005em; } .brand-rev { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); padding-left: 12px; margin-left: 4px; border-left: var(--hairline); } .primary-nav { display: flex; justify-content: center; gap: 28px; } .primary-nav a { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; letter-spacing: -0.005em; color: var(--muted); transition: color 200ms var(--ease-out); } .primary-nav .nav-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--dim); transition: color 200ms var(--ease-out); } .primary-nav a:hover { color: var(--white); } .primary-nav a:hover .nav-num { color: var(--signal); } .header-cta { height: 42px; padding: 0 18px; font-size: 11px; letter-spacing: 0.18em; } /* ---------- HERO -------------------------------------------------------- */ .hero { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); padding-left: calc(var(--side-rail) + var(--gutter)); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 38%, rgba(232, 201, 140, 0.10), transparent 38%), radial-gradient(circle at 12% 90%, rgba(255, 255, 255, 0.04), transparent 40%); pointer-events: none; z-index: 0; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 80px); align-items: center; max-width: var(--shell-max); margin: 0 auto; } .hero-copy { max-width: 760px; } .hero h1 { margin-bottom: 30px; } .hero-lede { max-width: 580px; margin: 0 0 36px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--text); opacity: 0.86; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 56px; } /* HERO PROOF */ .hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; border: var(--hairline); background: var(--line); } .hero-proof > div { position: relative; padding: 22px 24px; background: rgba(8,8,8,0.78); overflow: hidden; } .hero-proof > div::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(232,201,140,0.06), transparent 60%); opacity: 0; transition: opacity 260ms var(--ease-out); } .hero-proof > div:hover::before { opacity: 1; } .hero-proof dt { margin: 0 0 6px; font-family: var(--sans); font-size: clamp(28px, 2.4vw, 36px); font-weight: 300; color: var(--white); letter-spacing: -0.024em; font-feature-settings: "tnum" 1, "lnum" 1; } .hero-proof dd { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; } /* HERO ORB */ .hero-orb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.05; max-width: 540px; margin-left: auto; justify-self: end; } .orb-frame { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border: var(--hairline); background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,0.018), transparent 70%), var(--panel); overflow: hidden; } .orb-corner { position: absolute; width: 16px; height: 16px; border: 1px solid var(--signal); opacity: 0.7; } .orb-corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; } .orb-corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; } .orb-corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; } .orb-corner--br { bottom: 12px; right: 12px;border-left: 0; border-top: 0; } .orb-stage { position: absolute; inset: 32px; display: grid; place-items: center; } .orb-glow { position: absolute; inset: 12% 12% 16% 12%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92), rgba(232, 201, 140, 0.6) 28%, rgba(0,0,0,0.95) 70%); box-shadow: inset 0 0 60px rgba(255,255,255,0.12), inset 0 0 140px rgba(0,0,0,0.85), 0 0 120px rgba(232, 201, 140, 0.2), 0 0 200px rgba(255, 255, 255, 0.06); filter: blur(0.4px); animation: orbBreath 7.5s var(--ease-in-out) infinite; } .orb-grain { position: absolute; inset: 12% 12% 16% 12%; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: 0.45; pointer-events: none; } .orb-core { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--white); box-shadow: 0 0 30px rgba(255,255,255,0.95), 0 0 80px rgba(232,201,140,0.5); transform: translate(-32%, -28%); animation: orbDrift 9s var(--ease-in-out) infinite; } .orb-ring { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.06); border-radius: 50%; pointer-events: none; } .orb-ring-1 { inset: 6%; } .orb-ring-2 { inset: 18%; border-color: rgba(255,255,255,0.04); } .orb-ring-3 { inset: 32%; border-color: rgba(232,201,140,0.22); box-shadow: 0 0 30px rgba(232,201,140,0.10); animation: spinRing 22s linear infinite; } .orb-orbit { position: absolute; inset: -2%; width: 104%; height: 104%; pointer-events: none; animation: spinRing 28s linear infinite; } .orbit-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 1; stroke-dasharray: 2 6; } .orbit-mark { fill: none; stroke: var(--signal); stroke-width: 1.4; stroke-dasharray: 4 1064; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(232,201,140,0.7)); } .orb-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--white); opacity: 0.65; box-shadow: 0 0 8px rgba(255,255,255,0.7); } .orb-particle.p1 { animation: particleA 11s linear infinite; } .orb-particle.p2 { animation: particleB 13s linear infinite; } .orb-particle.p3 { animation: particleC 9s linear infinite; } .orb-meta { position: absolute; bottom: 18px; left: 22px; display: flex; gap: 28px; } .orb-meta > div { display: flex; flex-direction: column; gap: 2px; } .orb-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); } .orb-meta em { font-family: var(--mono); font-size: 11px; font-style: normal; letter-spacing: 0.04em; color: var(--white); } .orb-readout { position: absolute; top: 22px; right: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: var(--hairline); background: rgba(0,0,0,0.6); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .readout-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulseDot 1.6s var(--ease-in-out) infinite; } @keyframes orbBreath { 0%, 100% { transform: scale(1); filter: blur(0.4px); } 50% { transform: scale(1.04); filter: blur(0.8px); } } @keyframes orbDrift { 0%, 100% { transform: translate(-32%, -28%); } 50% { transform: translate(-22%, -16%); } } @keyframes spinRing { to { transform: rotate(360deg); } } @keyframes particleA { 0% { transform: translate(-90px, -40px); opacity: 0; } 20% { opacity: 0.7; } 100% { transform: translate(80px, -120px); opacity: 0; } } @keyframes particleB { 0% { transform: translate(60px, 60px); opacity: 0; } 30% { opacity: 0.7; } 100% { transform: translate(-110px, -80px); opacity: 0; } } @keyframes particleC { 0% { transform: translate(-20px, 100px); opacity: 0; } 35% { opacity: 0.7; } 100% { transform: translate(120px, -60px); opacity: 0; } } /* ---------- LIVE PILL (talk to Nina) ----------------------------------- */ .live-pill { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 56px; padding: 10px 16px 10px 14px; border: 1px solid var(--signal); background: rgba(232, 201, 140, 0.06); color: var(--warm); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: background 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .live-pill:hover { background: rgba(232, 201, 140, 0.12); box-shadow: 0 0 0 1px rgba(232, 201, 140, 0.5), 0 0 32px rgba(232, 201, 140, 0.18); transform: translateY(-1px); } .live-pill .live-label em { font-family: var(--serif); font-style: italic; font-size: 1.18em; letter-spacing: -0.01em; color: var(--white); margin: 0 2px; text-transform: none; } .live-pill .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal); animation: pulseDot 1.4s var(--ease-in-out) infinite; } .live-pill .live-arrow { font-family: var(--sans); font-size: 14px; letter-spacing: 0; color: var(--white); transition: transform 220ms var(--ease-out); } .live-pill:hover .live-arrow { transform: translateX(4px); } /* ---------- ORB AS TRIGGER --------------------------------------------- */ .hero-orb[role="button"] { cursor: pointer; } .hero-orb[role="button"]:focus { outline: none; } .hero-orb[role="button"]:focus-visible .orb-frame { box-shadow: 0 0 0 2px var(--signal), 0 0 60px rgba(232,201,140,0.32); } .hero-orb[role="button"]:hover .orb-frame { box-shadow: 0 0 0 1px rgba(232,201,140,0.45), 0 60px 140px rgba(232,201,140,0.18); } .orb-prompt { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); white-space: nowrap; opacity: 0; transition: opacity 240ms var(--ease-out); } .hero-orb[role="button"]:hover .orb-prompt { opacity: 1; } /* ---------- CUSTOM CURSOR ---------------------------------------------- */ /* Centering done via negative margin — keeps transform property purely for JS-driven position. Avoids fighting CSS hover scale. */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 2147483647; pointer-events: none; border-radius: 50%; opacity: 0; /* Modern CSS: translate + scale are individual properties, animate independently — no compound transform parsing per frame. */ translate: 0 0; will-change: translate, scale, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: opacity 220ms var(--ease-out), scale 200ms var(--ease-out), border-color 220ms var(--ease-out), background 220ms var(--ease-out); } .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--white); /* drop-shadow: cheaper than box-shadow on moving elements */ filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)); } .cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid rgba(232, 201, 140, 0.55); background: transparent; scale: 1; } body.has-pointer .cursor-dot, body.has-pointer .cursor-ring { opacity: 1; } /* Hover state — pure scale, no width/height layout */ body.cursor-active .cursor-ring { scale: 1.8; border-color: rgba(232, 201, 140, 0.95); background: rgba(232, 201, 140, 0.06); } body.cursor-active .cursor-dot { scale: 0.66; background: var(--signal); filter: drop-shadow(0 0 9px var(--signal)); } /* Hide native cursor on fine-pointer devices */ @media (pointer: fine) { body.has-pointer { cursor: none; } body.has-pointer a, body.has-pointer button, body.has-pointer .hero-orb, body.has-pointer [role="button"], body.has-pointer input, body.has-pointer select, body.has-pointer textarea { cursor: none; } } html.no-motion .cursor-dot, html.no-motion .cursor-ring { display: none; } /* ---------- HERO MOUSE SPOTLIGHT --------------------------------------- */ .hero-spotlight { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( 400px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 201, 140, 0.07), transparent 60% ); opacity: 0; transition: opacity 600ms var(--ease-out); /* mix-blend-mode removed — costed a full recomposite per cursor frame */ } .hero[data-hero-spotlight]:hover .hero-spotlight, body.has-pointer .hero[data-hero-spotlight] .hero-spotlight { opacity: 1; } html.no-motion .hero-spotlight { display: none; } /* ---------- SIDE RAIL — LIVE SECTION INDICATOR ------------------------- */ .side-rail-index { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--signal); opacity: 0.8; transition: opacity 320ms var(--ease-out); } .side-rail-text { transition: opacity 320ms var(--ease-out); } .side-rail.is-changing .side-rail-text, .side-rail.is-changing .side-rail-index { opacity: 0.2; } /* ---------- OUTCOME CARD — CURSOR-FOLLOW LIGHT ------------------------- */ .outcome-card { /* Existing styles — augment with cursor-driven gradient */ } .outcome-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 220px circle at var(--lx, 50%) var(--ly, 50%), rgba(232, 201, 140, 0.16), transparent 60% ); opacity: 0; transition: opacity 240ms var(--ease-out); mix-blend-mode: screen; z-index: 0; } .outcome-card:hover::after { opacity: 1; } .outcome-card > * { position: relative; z-index: 1; } html.no-motion .outcome-card::after { display: none; } /* ---------- SECTION DIVIDER DRAW-IN ------------------------------------ */ .scene { border-bottom: 0; position: relative; } .scene::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: var(--line); transition: width 1400ms var(--ease-out); } .scene.is-divider-drawn::after { width: 100%; } /* Special divider tone for cinematic scenes — gold accent */ .cinematic-scene::after { background: linear-gradient( 90deg, transparent, var(--line) 8%, var(--line) 60%, rgba(232, 201, 140, 0.35) 88%, transparent ); } html.no-motion .scene::after { width: 100%; } /* ---------- AUDIO-REACTIVE PAGE (when Clovis is speaking) -------------- */ /* When Clovis is speaking, ripple gold accent across the page chrome. --orb-volume is set on :root so any element can subscribe. */ body.clovis-speaking .scroll-progress-fill { background: linear-gradient(90deg, var(--signal), var(--white), var(--signal)); box-shadow: 0 0 calc(14px + var(--orb-volume, 0) * 22px) rgba(232,201,140,calc(0.5 + var(--orb-volume, 0) * 0.5)); } body.clovis-speaking .side-rail-tick { background: linear-gradient(180deg, transparent, var(--signal), transparent); opacity: calc(0.5 + var(--orb-volume, 0) * 0.5); box-shadow: 0 0 calc(8px + var(--orb-volume, 0) * 24px) rgba(232,201,140,0.5); } body.clovis-speaking .site-header .brand-mark { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 1px rgba(255,255,255,0.06), 0 0 calc(22px + var(--orb-volume, 0) * 28px) rgba(232,201,140,calc(0.32 + var(--orb-volume, 0) * 0.5)); } body.clovis-speaking .side-rail-mark { text-shadow: 0 0 calc(6px + var(--orb-volume, 0) * 12px) var(--signal); } body.clovis-listening .scroll-progress-fill { background: linear-gradient(90deg, rgba(180,200,255,0.6), var(--white)); } html.no-motion body.clovis-speaking .scroll-progress-fill, html.no-motion body.clovis-speaking .side-rail-tick, html.no-motion body.clovis-speaking .brand-mark { box-shadow: none; text-shadow: none; } /* ---------- LETTER SCRAMBLE -------------------------------------------- */ [data-scramble] .word > i { font-feature-settings: "tnum" 1, "lnum" 1; } .scrambling { /* During scramble, treat each char with consistent width */ font-variant-numeric: tabular-nums; } /* ---------- OUTCOME FOCUS / DEFOCUS (pin-feel scroll) ------------------ */ .outcome-card { transition: background 320ms var(--ease-out), transform 520ms var(--ease-out), opacity 520ms var(--ease-out), filter 520ms var(--ease-out), box-shadow 520ms var(--ease-out); } .outcome-card.is-focus { transform: translateY(-4px) scale(1.012); box-shadow: 0 0 0 1px rgba(232,201,140,0.42) inset, 0 60px 140px rgba(0,0,0,0.6), 0 0 80px rgba(232,201,140,0.18); background: radial-gradient(circle at 100% 0%, rgba(232,201,140,0.16), transparent 40%), linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%), var(--panel-2); z-index: 2; } .outcome-card.is-defocus { opacity: 0.55; filter: saturate(0.7); transform: scale(0.985); } html.no-motion .outcome-card.is-focus, html.no-motion .outcome-card.is-defocus { transform: none !important; opacity: 1 !important; filter: none !important; } /* ---------- MARQUEE CLICK ACCELERATION --------------------------------- */ .marquee-track[data-fast="1"] { animation-duration: 6s !important; } .marquee { cursor: pointer; } /* ---------- ORB INTERIOR — pointer transparent ------------------------- */ /* The orb has a dozen decorative inner elements (glow, rings, particles, corners, readout, meta). Pointer events on those children were causing pointerover/pointerout to fire constantly inside the orb, flickering the cursor-active state. Make them all transparent to pointer events so the orb container handles all pointer interaction cleanly. */ .hero-orb > *, .hero-orb > * > * { pointer-events: none; } /* Buttons — same problem with ::before/::after pseudo-elements. The pseudos can't have pointer-events targeted directly via JS, but as long as the button itself catches enter/leave (above), this is fine. */ /* ---------- ORB AS CLOVIS CALL INTERFACE ------------------------------- */ .hero-orb[role="button"] { cursor: pointer; outline: none; } .hero-orb[role="button"]:focus-visible .orb-frame { box-shadow: 0 0 0 2px var(--signal), 0 0 60px rgba(232,201,140,0.32); } .hero-orb[role="button"]:hover .orb-frame { box-shadow: 0 0 0 1px rgba(232,201,140,0.45), 0 60px 140px rgba(232,201,140,0.18); } /* End-call hint pill — only visible during a call */ .orb-end-hint { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); white-space: nowrap; opacity: 0; transition: opacity 240ms var(--ease-out); pointer-events: none; } .hero-orb[data-state="listening"] .orb-end-hint, .hero-orb[data-state="speaking"] .orb-end-hint, .hero-orb[data-state="connecting"] .orb-end-hint { opacity: 1; } /* Readout dot color/pulse per state */ .hero-orb[data-state="idle"] .readout-dot { background: var(--signal); } .hero-orb[data-state="connecting"] .readout-dot { background: var(--signal); animation: pulseDot 0.8s var(--ease-in-out) infinite; } .hero-orb[data-state="listening"] .readout-dot { background: var(--white); box-shadow: 0 0 12px var(--white); } .hero-orb[data-state="speaking"] .readout-dot { background: var(--signal); box-shadow: 0 0 16px var(--signal); animation: pulseDot 0.6s var(--ease-in-out) infinite; } .hero-orb[data-state="error"] .readout-dot { background: #ff7a7a; box-shadow: 0 0 12px rgba(255,122,122,0.6); } /* Glow intensifies on speaking, calms on listening */ .hero-orb[data-state="listening"] .orb-glow, .hero-orb[data-state="speaking"] .orb-glow { animation-play-state: paused; } .hero-orb[data-state="speaking"] .orb-glow { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.98), rgba(232,201,140,0.78) 28%, rgba(0,0,0,0.95) 70%); box-shadow: inset 0 0 60px rgba(255,255,255,0.18), inset 0 0 140px rgba(0,0,0,0.78), 0 0 calc(140px + var(--orb-volume, 0) * 120px) rgba(232,201,140, calc(0.22 + var(--orb-volume, 0) * 0.45)), 0 0 240px rgba(255,255,255, calc(0.06 + var(--orb-volume, 0) * 0.18)); transform: scale(calc(1 + var(--orb-volume, 0) * 0.06)); transition: transform 80ms linear, box-shadow 120ms var(--ease-out); } .hero-orb[data-state="listening"] .orb-glow { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.85), rgba(180,200,255,0.32) 32%, rgba(0,0,0,0.95) 70%); box-shadow: inset 0 0 60px rgba(255,255,255,0.10), inset 0 0 140px rgba(0,0,0,0.85), 0 0 100px rgba(255,255,255, calc(0.06 + var(--orb-input-volume, 0) * 0.22)), 0 0 180px rgba(180,200,255, calc(0.04 + var(--orb-input-volume, 0) * 0.18)); transform: scale(calc(1 + var(--orb-input-volume, 0) * 0.04)); transition: transform 80ms linear, box-shadow 120ms var(--ease-out); } /* Inner core glows white during listening */ .hero-orb[data-state="listening"] .orb-core { background: var(--white); box-shadow: 0 0 calc(30px + var(--orb-input-volume, 0) * 40px) rgba(255,255,255, calc(0.95 + var(--orb-input-volume, 0) * 0.05)), 0 0 calc(80px + var(--orb-input-volume, 0) * 80px) rgba(180,200,255, calc(0.5 + var(--orb-input-volume, 0) * 0.4)); } /* Connecting state — rings spin faster, ring color hot */ .hero-orb[data-state="connecting"] .orb-orbit { animation-duration: 4s; } .hero-orb[data-state="connecting"] .orb-ring-3 { animation-duration: 6s; border-color: var(--signal); } /* Active corners */ .hero-orb[data-state="listening"] .orb-corner, .hero-orb[data-state="speaking"] .orb-corner { border-color: var(--signal); opacity: 1; } /* ---------- ORB IGNITION — high-quality click feedback ---------------- */ /* Fires on every click as immediate tactile feedback while the voice layer spins up. Four coordinated channels: dual shockwave rings (::before / ::after on .hero-orb, which sit outside .orb-frame's overflow clip so they expand past the panel edge), a sub-second tactile press on the frame, brightness flash on the glow, and a quick brightness pulse on the concentric rings. Keyframes return to identity so re-clicks replay cleanly after the class is force-reflowed and re-added by JS. */ .hero-orb::before, .hero-orb::after { content: ""; position: absolute; top: 50%; left: 50%; width: 64%; height: 64%; border: 1.5px solid rgba(232, 201, 140, 0.9); border-radius: 50%; transform: translate(-50%, -50%) scale(0.18); opacity: 0; pointer-events: none; z-index: 5; box-shadow: 0 0 24px rgba(232, 201, 140, 0.55), inset 0 0 18px rgba(232, 201, 140, 0.22); will-change: transform, opacity; } .hero-orb.is-igniting::before { animation: orb-ignition-ring 820ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-orb.is-igniting::after { animation: orb-ignition-ring 920ms 120ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes orb-ignition-ring { 0% { transform: translate(-50%, -50%) scale(0.18); opacity: 0; border-width: 1.5px; } 12% { opacity: 1; } 60% { opacity: 0.55; } 100% { transform: translate(-50%, -50%) scale(1.42); opacity: 0; border-width: 0.4px; } } .hero-orb.is-igniting .orb-frame { animation: orb-press 540ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes orb-press { 0% { transform: scale(1); } 18% { transform: scale(0.972); } 55% { transform: scale(1.014); } 100% { transform: scale(1); } } .hero-orb.is-igniting .orb-corner { animation: orb-corner-snap 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes orb-corner-snap { 0% { opacity: 0.7; border-color: var(--signal); } 28% { opacity: 1; border-color: var(--white); } 60% { opacity: 1; border-color: var(--signal); box-shadow: 0 0 14px rgba(232,201,140,0.55); } 100% { opacity: 0.7; border-color: var(--signal); box-shadow: none; } } .hero-orb.is-igniting .orb-glow { animation: orb-glow-flash 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes orb-glow-flash { 0% { filter: blur(0.4px) brightness(1); } 18% { filter: blur(0.4px) brightness(1.75); } 60% { filter: blur(0.4px) brightness(1.22); } 100% { filter: blur(0.4px) brightness(1); } } .hero-orb.is-igniting .orb-ring-1, .hero-orb.is-igniting .orb-ring-2 { animation: orb-ring-pulse 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes orb-ring-pulse { 0% { border-color: rgba(255, 255, 255, 0.06); } 28% { border-color: rgba(255, 255, 255, 0.42); } 100% { border-color: rgba(255, 255, 255, 0.06); } } /* Brief readout flash so the badge confirms the press too. */ .hero-orb.is-igniting .orb-readout { animation: orb-readout-flash 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes orb-readout-flash { 0% { border-color: var(--line); background: rgba(0,0,0,0.6); } 35% { border-color: rgba(232, 201, 140, 0.85); background: rgba(232,201,140,0.08); color: var(--white); } 100% { border-color: var(--line); background: rgba(0,0,0,0.6); } } html.no-motion .hero-orb::before, html.no-motion .hero-orb::after { display: none; } html.no-motion .hero-orb.is-igniting .orb-frame, html.no-motion .hero-orb.is-igniting .orb-corner, html.no-motion .hero-orb.is-igniting .orb-glow, html.no-motion .hero-orb.is-igniting .orb-ring-1, html.no-motion .hero-orb.is-igniting .orb-ring-2, html.no-motion .hero-orb.is-igniting .orb-readout { animation: none !important; } /* ---------- INDUSTRIES MARQUEE ----------------------------------------- */ .industries { padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(28px, 3vw, 44px); padding-left: var(--side-rail); background: var(--bg-2); overflow: hidden; } .marquee { position: relative; width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: inline-flex; align-items: center; gap: 36px; white-space: nowrap; animation: marqueeRoll 48s linear infinite; will-change: transform; } .marquee span { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.7vw, 26px); color: var(--text); letter-spacing: -0.012em; flex-shrink: 0; } .marquee .dot { font-family: var(--sans); font-style: normal; color: var(--signal); font-size: clamp(20px, 1.7vw, 26px); } @keyframes marqueeRoll { to { transform: translateX(-50%); } } html.no-motion .marquee-track { animation: none; } /* ---------- PAIN -------------------------------------------------------- */ .pain { background: linear-gradient(180deg, rgba(255,255,255,0.014), transparent 60%), var(--bg); padding-left: calc(var(--side-rail) + var(--gutter)); } .pain-inner { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); grid-template-areas: "copy right" "grid right"; gap: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 88px); max-width: var(--shell-max); margin: 0 auto; } .pain-copy { grid-area: copy; max-width: 460px; align-self: start; } .pain-grid { grid-area: grid; } .pain-right { grid-area: right; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); min-width: 0; } @media (max-width: 980px) { .pain-inner { grid-template-columns: 1fr; grid-template-areas: "copy" "right" "grid"; } } .pain-copy p { margin-top: 24px; max-width: 420px; } .pain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: var(--hairline); background: var(--line); position: relative; } .pain-grid article { position: relative; padding: 36px 32px 36px; background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 70%), var(--panel); min-height: 240px; transition: background 280ms var(--ease-out); } .pain-grid article::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 1px; background: var(--signal); transition: width 600ms var(--ease-out); } .pain-grid article.is-visible::after { width: 40%; } .pain-grid article:hover { background: linear-gradient(180deg, rgba(232,201,140,0.05), transparent 70%), var(--panel-2); } .pain-num { display: block; margin-bottom: 22px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; color: var(--dim); text-transform: uppercase; } .pain-grid h3 { margin-bottom: 14px; max-width: 380px; } .pain-grid p { font-size: 15px; max-width: 420px; } /* ---------- OUTCOMES ---------------------------------------------------- */ .outcomes { background: var(--bg-2); padding-left: calc(var(--side-rail) + var(--gutter)); } .outcomes-head { max-width: var(--shell-max); margin: 0 auto clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px 80px; align-items: end; } .outcomes-head h2 { margin-bottom: 0; } .outcomes-head p { max-width: 520px; font-size: 17px; line-height: 1.55; } .outcomes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: var(--shell-max); margin: 0 auto; border: var(--hairline); background: var(--line); } .outcome-card { position: relative; display: flex; flex-direction: column; padding: 38px 32px 40px; background: radial-gradient(circle at 100% 0%, rgba(232,201,140,0.06), transparent 32%), linear-gradient(180deg, rgba(255,255,255,0.018), transparent 60%), var(--panel); min-height: 560px; overflow: hidden; transition: background 320ms var(--ease-out); } .outcome-card::before { content: ""; position: absolute; inset: 0; border: 1px solid transparent; background: linear-gradient(135deg, transparent, rgba(232,201,140,0.42), transparent) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 320ms var(--ease-out); pointer-events: none; } .outcome-card:hover::before { opacity: 1; } .outcome-card:hover { background: radial-gradient(circle at 100% 0%, rgba(232,201,140,0.14), transparent 38%), linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%), var(--panel-2); } .outcome-card header { display: flex; flex-direction: column; gap: 18px; padding-bottom: 22px; border-bottom: var(--hairline); margin-bottom: 22px; } .outcome-card header span { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; color: var(--dim); text-transform: uppercase; } .outcome-card header strong { font-family: var(--sans); font-weight: 300; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; color: var(--white); letter-spacing: -0.022em; } .outcome-tag { margin-bottom: 22px; font-size: 13px; color: var(--muted); } .outcome-card ul { margin: 0 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .outcome-card ul li { position: relative; padding-left: 22px; color: var(--text); opacity: 0.85; font-size: 14.5px; line-height: 1.5; } .outcome-card ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--signal); } .outcome-result { margin-top: auto; padding-top: 18px; border-top: var(--hairline); color: var(--warm); font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; } .outcomes-mantra { max-width: var(--shell-max); margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; color: var(--text); font-size: clamp(20px, 1.8vw, 26px); font-weight: 300; letter-spacing: -0.014em; } .outcomes-mantra .serif { color: var(--warm); } /* ============================================================================= CINEMATIC BEFORE / AFTER (replaces the old outcomes-grid card layout) Three rows. Each row: a "before" stage (dim, leads leaking) and an "after" stage (bright, leads captured), with a dividing arrow between them. Canvas animations drive the dots; CSS handles the device mockups and outcome counters. Visual-first — copy is intentionally sparse. ========================================================================== */ .outcomes { --loss: #cc7a6e; --loss-bright: #e89d92; --loss-dim: #7d4d46; } .ba-head { max-width: var(--shell-max); margin: 0 auto clamp(48px, 6vw, 84px); text-align: left; } .ba-head h2 { margin: 14px 0 0 0; } .ba-stack { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); max-width: var(--content-ultra, 1450px); margin: 0 auto; } .ba-row { position: relative; display: flex; flex-direction: column; gap: 18px; } .ba-row-head { display: flex; align-items: baseline; gap: 16px; padding-left: 4px; } .ba-row-num { font-family: var(--serif); font-style: italic; font-size: clamp(32px, 3.4vw, 46px); color: var(--warm); letter-spacing: -0.014em; line-height: 1; } .ba-row-name { font-family: var(--sans); font-size: clamp(20px, 1.8vw, 26px); color: var(--text); letter-spacing: -0.014em; font-weight: 300; } .ba-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; isolation: isolate; } .ba-col { position: relative; display: flex; flex-direction: column; border: var(--hairline); padding: 22px 22px 24px; min-height: 380px; isolation: isolate; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 28px 60px -28px rgba(0, 0, 0, 0.65); transition: border-color 600ms var(--ease-out), box-shadow 600ms var(--ease-out); } /* BEFORE — drained, low energy, cold field. */ .ba-col--before { background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(204, 122, 110, 0.04), transparent 70%), linear-gradient(180deg, #08070a, #050507 60%, #030305); filter: saturate(0.55) brightness(0.85); } /* AFTER — full color, energized field. */ .ba-col--after { background: radial-gradient(ellipse 80% 60% at 50% 25%, rgba(232, 201, 140, 0.06), transparent 70%), radial-gradient(ellipse 60% 50% at 50% 95%, rgba(125, 212, 164, 0.06), transparent 70%), linear-gradient(180deg, var(--panel), var(--panel-2) 60%, var(--bg-3)); } /* Faint structural grid under every stage — drafting plate. */ .ba-col::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 100%); background-size: calc(100% / 14) 100%; pointer-events: none; z-index: 0; } /* Subtle slow scan-line on the AFTER side only — implies "live system". */ .ba-col--after::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.022) 49.7%, rgba(232, 201, 140, 0.16) 50%, rgba(232, 201, 140, 0.16) calc(50% + 1px), rgba(255, 255, 255, 0.022) 50.3%, transparent 100%); background-size: 100% 260%; background-position: 0% -120%; pointer-events: none; opacity: 0.5; z-index: 1; animation: ba-scan 11s linear infinite; } @keyframes ba-scan { 0% { background-position: 0% -120%; } 100% { background-position: 0% 120%; } } html.no-motion .ba-col--after::after { animation: none; opacity: 0.18; } /* ---------- Status pill (top of each column) ---------------------- */ .ba-status { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: var(--hairline); background: rgba(0, 0, 0, 0.55); font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; } .ba-status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .ba-status--off { color: var(--loss-bright); border-color: rgba(204, 122, 110, 0.32); } .ba-status--off .ba-status-dot { background: var(--loss); box-shadow: 0 0 8px rgba(204, 122, 110, 0.55); } .ba-status--on { color: var(--positive); border-color: rgba(125, 212, 164, 0.45); } .ba-status--on .ba-status-dot { background: var(--positive); box-shadow: 0 0 10px rgba(125, 212, 164, 0.65); animation: ba-status-pulse 1.8s var(--ease-in-out) infinite; } @keyframes ba-status-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(125, 212, 164, 0.55); transform: scale(1); } 50% { box-shadow: 0 0 18px rgba(125, 212, 164, 0.85); transform: scale(1.15); } } html.no-motion .ba-status--on .ba-status-dot { animation: none; } /* ---------- Stage (canvas + device mockup) ----------------------- */ .ba-stage { position: relative; z-index: 2; flex: 1; margin: 18px 0; display: grid; place-items: center; min-height: 200px; } .ba-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* Devices sit above the canvas. */ .ba-device { position: relative; z-index: 1; pointer-events: none; } /* PHONE mock */ .ba-device--phone { width: 88px; height: 152px; border: 1.5px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.55); position: relative; border-radius: 14px; padding: 14px 8px; display: flex; align-items: center; justify-content: center; } .ba-device--phone::before { content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 28px; height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; } .ba-device-screen { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.03); border-radius: 6px; display: grid; place-items: center; } .ba-device-badge { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--loss-bright); text-align: center; line-height: 1.4; padding: 4px 6px; border: 1px solid rgba(204, 122, 110, 0.35); background: rgba(204, 122, 110, 0.06); } .ba-device--phone.ba-device--off { box-shadow: 0 0 0 1px rgba(204, 122, 110, 0.18); } /* ORB mock (after side, row 1) — DNA of the hero orb at miniature scale */ .ba-device--orb { width: 140px; height: 140px; display: grid; place-items: center; } .ba-orb-frame { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 60%), var(--panel); border: var(--hairline); } .ba-orb-corner { position: absolute; width: 11px; height: 11px; border: 1px solid var(--signal); opacity: 0.85; } .ba-orb-corner--tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; } .ba-orb-corner--tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; } .ba-orb-corner--bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; } .ba-orb-corner--br { bottom: 6px; right: 6px;border-left: 0; border-top: 0; } .ba-orb-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95), rgba(232, 201, 140, 0.6) 28%, rgba(0, 0, 0, 0.95) 72%); box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.12), inset 0 0 60px rgba(0, 0, 0, 0.85), 0 0 48px rgba(232, 201, 140, 0.22), 0 0 96px rgba(255, 255, 255, 0.05); filter: blur(0.4px); animation: orbBreath 7.5s var(--ease-in-out) infinite; } .ba-orb-core { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 32px rgba(232, 201, 140, 0.5); transform: translate(-26%, -22%); animation: orbDrift 9s var(--ease-in-out) infinite; } html.no-motion .ba-orb-glow, html.no-motion .ba-orb-core { animation: none; } /* LAPTOP mock */ .ba-device--laptop { width: 200px; display: flex; flex-direction: column; align-items: center; } .ba-laptop-screen { width: 100%; height: 116px; border: 1.5px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.55); padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; position: relative; } .ba-laptop-screen--branded { border-color: rgba(255, 255, 255, 0.25); background: linear-gradient(180deg, rgba(232, 201, 140, 0.08), transparent 40%), rgba(0, 0, 0, 0.65); } .ba-laptop-load { height: 2px; background: rgba(255, 255, 255, 0.06); position: relative; } .ba-laptop-load i { display: block; height: 100%; width: var(--w, 50%); background: var(--loss); box-shadow: 0 0 6px rgba(204, 122, 110, 0.55); } .ba-laptop-bar { height: 6px; background: rgba(255, 255, 255, 0.06); width: 100%; } .ba-laptop-bar--short { width: 62%; } .ba-laptop-header { height: 8px; background: linear-gradient(90deg, rgba(232, 201, 140, 0.5), rgba(232, 201, 140, 0.15)); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ba-laptop-hero { flex: 1; background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 60%), rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); } .ba-laptop-cta { height: 14px; background: var(--white); width: 60%; align-self: flex-start; } .ba-laptop-chat { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--signal); display: grid; place-items: center; box-shadow: 0 0 14px rgba(232, 201, 140, 0.65); animation: ba-chat-pulse 1.6s var(--ease-in-out) infinite; } .ba-laptop-chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); } @keyframes ba-chat-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(232, 201, 140, 0.5); transform: scale(1); } 50% { box-shadow: 0 0 18px rgba(232, 201, 140, 0.85); transform: scale(1.08);} } html.no-motion .ba-laptop-chat { animation: none; } .ba-laptop-base { width: 110%; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 0 0 4px 4px; margin-top: -1px; } /* MAP mock — for the ads row */ .ba-map { position: relative; width: 220px; height: 160px; border: 1.5px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.55); overflow: hidden; } .ba-map--off { border-color: rgba(204, 122, 110, 0.25); } .ba-map-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent calc(100% / 7)), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent calc(100% / 5)); background-size: calc(100% / 7) 100%, 100% calc(100% / 5); pointer-events: none; } .ba-map-radius { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; } .ba-map-radius--wide { width: 96%; aspect-ratio: 1; border: 1px dashed rgba(204, 122, 110, 0.4); background: radial-gradient(circle, rgba(204, 122, 110, 0.04), transparent 70%); } .ba-map-radius--tight { width: 36%; aspect-ratio: 1; border: 1px solid rgba(232, 201, 140, 0.55); background: radial-gradient(circle, rgba(232, 201, 140, 0.08), transparent 70%); box-shadow: 0 0 22px rgba(232, 201, 140, 0.3); animation: ba-radius-pulse 2.4s var(--ease-in-out) infinite; } @keyframes ba-radius-pulse { 0%, 100% { box-shadow: 0 0 18px rgba(232, 201, 140, 0.28); } 50% { box-shadow: 0 0 30px rgba(232, 201, 140, 0.55); } } html.no-motion .ba-map-radius--tight { animation: none; } .ba-map-bullseye { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal); } .ba-map-pin { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%); } .ba-map-pin--miss { background: rgba(204, 122, 110, 0.5); box-shadow: 0 0 8px rgba(204, 122, 110, 0.4); opacity: 0.6; } .ba-map-pin--hit { background: var(--positive); box-shadow: 0 0 10px rgba(125, 212, 164, 0.7); } /* ============================================================================= RICH MOCKUPS — iPhone, browser/site, Facebook ad Replace the simple shape devices with detailed, recognizable platform mockups. Real status bars, real-feel notifications, real browser chrome, real Meta logo + Facebook ad layout, real Google + BBB trust badges. ========================================================================== */ /* ---------- iPhone (rows 1 before + after) ----------------------- */ .iphone { position: relative; z-index: 1; width: 214px; height: 432px; border-radius: 44px; /* Titanium frame: subtle metallic gradient that suggests rounded edges */ background: linear-gradient(135deg, #3a3a3d 0%, #1d1d1f 18%, #0a0a0c 42%, #0a0a0c 58%, #1d1d1f 82%, #3a3a3d 100%); padding: 4px; box-shadow: /* Inner bezel highlight */ inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.6), inset 1px 0 0 rgba(255, 255, 255, 0.04), inset -1px 0 0 rgba(255, 255, 255, 0.04), /* Outer hairline */ 0 0 0 0.5px rgba(255, 255, 255, 0.08), /* Floor shadow */ 0 30px 60px -28px rgba(0, 0, 0, 0.9), 0 60px 100px -50px rgba(0, 0, 0, 0.6); pointer-events: none; } /* Side rail glints — suggests rounded titanium edges */ .iphone::before, .iphone::after { content: ""; position: absolute; top: 14%; height: 72%; width: 1px; pointer-events: none; z-index: 2; } .iphone::before { left: 0.5px; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.18) 20%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.18) 80%, transparent 100%); } .iphone::after { right: 0.5px; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.12) 70%, transparent 100%); } /* Side buttons */ .iphone-btn { position: absolute; background: linear-gradient(180deg, #2a2a2d, #0f0f11); border-radius: 1px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.5); z-index: 2; pointer-events: none; } .iphone-btn--power { right: -1.5px; top: 116px; width: 2.5px; height: 56px; } .iphone-btn--vol-up { left: -1.5px; top: 96px; width: 2.5px; height: 32px; } .iphone-btn--vol-dn { left: -1.5px; top: 136px; width: 2.5px; height: 32px; } .iphone-btn--action { left: -1.5px; top: 60px; width: 2.5px; height: 18px; } .iphone-notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 84px; height: 26px; background: #000; border-radius: 14px; z-index: 3; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06), inset 0 -1px 2px rgba(255, 255, 255, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.8); } /* Camera lens inside the Dynamic Island */ .iphone-notch::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 6.5px; height: 6.5px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #3a3a4a 0%, #0a0a14 40%, #000 100%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 0 2px rgba(80, 100, 160, 0.2); } /* Tiny sensor dot on the left */ .iphone-notch::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 3.5px; height: 3.5px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #2a2a3a, #050508); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); } .iphone-screen { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 40px; background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%), linear-gradient(180deg, #0c0c10, #050507 70%, #030305); overflow: hidden; display: flex; flex-direction: column; padding: 0 14px 16px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.95), inset 0 0 0 2px rgba(255, 255, 255, 0.025), inset 0 1px 8px rgba(0, 0, 0, 0.6); } /* Screen glare — subtle diagonal sheen */ .iphone-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.018) 45%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.018) 55%, transparent 70%, transparent 100%); pointer-events: none; z-index: 4; border-radius: inherit; } .iphone--locked .iphone-screen { filter: brightness(0.94); } /* Subtle lock-screen wallpaper hint */ .iphone--locked .iphone-screen { background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(40, 50, 80, 0.18), transparent 60%), radial-gradient(ellipse 100% 60% at 50% 100%, rgba(60, 50, 40, 0.12), transparent 70%), linear-gradient(180deg, #0a0a10, #050507 60%, #030305); } .iphone-status { display: flex; align-items: center; justify-content: space-between; padding: 18px 2px 0; font-family: var(--sans); font-size: 11px; color: var(--text); font-weight: 600; letter-spacing: -0.005em; min-height: 32px; position: relative; z-index: 2; } .iphone-status-time { font-feature-settings: "tnum"; letter-spacing: 0; font-weight: 600; font-size: 11.5px; } .iphone-status-icons { display: inline-flex; align-items: center; gap: 3px; color: var(--text); } .iphone-icon { width: 10px; height: 7.5px; } .iphone-icon--battery { width: 16px; height: 8px; } /* Lock screen big clock */ .iphone-clock { display: flex; flex-direction: column; align-items: center; margin: 26px 0 20px; text-align: center; } .iphone-clock-day { font-family: var(--sans); font-size: 11px; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.01em; margin-bottom: 6px; font-weight: 600; } .iphone-clock-time { font-family: var(--sans); font-size: 58px; font-weight: 200; color: #fff; letter-spacing: -0.045em; line-height: 1; font-feature-settings: "tnum"; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4); } /* Notification stack (BEFORE side) */ .iphone-notifs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: hidden; } .iphone-notif { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 8px 10px; background: rgba(255, 255, 255, 0.13); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border-radius: 14px; border: 0.5px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.18); } .iphone-notif--missed { background: rgba(255, 255, 255, 0.13); } .iphone-notif-icon { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex-shrink: 0; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; } .iphone-notif-icon::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 40%); pointer-events: none; } .iphone-notif-icon--phone { background: linear-gradient(180deg, #4ad662, #2a9c40); } .iphone-notif-icon--phone svg { width: 15px; height: 15px; position: relative; z-index: 1; } .iphone-notif-icon--voicemail { background: linear-gradient(180deg, #5dabff, #2f7fda); } .iphone-notif-icon--voicemail svg { width: 15px; height: 15px; position: relative; z-index: 1; } .iphone-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .iphone-notif-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.01em; text-transform: uppercase; } .iphone-notif-app { color: var(--text); font-weight: 600; } .iphone-notif-time { color: rgba(255, 255, 255, 0.5); font-weight: 400; } .iphone-notif-title { font-family: var(--sans); font-size: 11.5px; color: var(--text); font-weight: 500; line-height: 1.2; } .iphone-notif--missed .iphone-notif-title { color: var(--loss-bright); } .iphone-notif-detail { font-family: var(--sans); font-size: 10px; color: rgba(255, 255, 255, 0.55); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .iphone-notif-more { text-align: center; font-family: var(--sans); font-size: 10px; color: rgba(255, 255, 255, 0.4); padding: 4px 0 0; } /* AFTER iPhone — Clovis banner + calendar */ .iphone-banner { margin-top: 10px; display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 10px; background: linear-gradient(180deg, rgba(232, 201, 140, 0.15), rgba(125, 212, 164, 0.08)); border-radius: 12px; border: 1px solid rgba(232, 201, 140, 0.35); box-shadow: 0 0 18px rgba(232, 201, 140, 0.2); } .iphone-banner-icon { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: #050505; border: 1px solid rgba(232, 201, 140, 0.35); } .iphone-banner-orb { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95), rgba(232, 201, 140, 0.55) 30%, rgba(0, 0, 0, 0.85) 75%); box-shadow: 0 0 8px rgba(232, 201, 140, 0.6); } .iphone-banner-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .iphone-banner-head { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--sans); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; } .iphone-banner-app { color: var(--signal); font-weight: 600; } .iphone-banner-time { color: rgba(255, 255, 255, 0.5); font-weight: 400; letter-spacing: 0.02em; } .iphone-banner-title { font-family: var(--sans); font-size: 12px; color: var(--text); font-weight: 500; line-height: 1.2; } .iphone-banner-detail { font-family: var(--sans); font-size: 10.5px; color: var(--positive); font-weight: 500; font-feature-settings: "tnum"; } /* Calendar widget */ .iphone-cal { margin-top: 10px; padding: 10px 8px 4px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.06); flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .iphone-cal-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .iphone-cal-label { font-family: var(--sans); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(232, 201, 140, 0.85); font-weight: 600; } .iphone-cal-date { font-family: var(--sans); font-size: 9px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.04em; } .iphone-cal-list { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden; } .iphone-cal-slot { display: grid; grid-template-columns: 44px 1fr auto; gap: 6px; padding: 5px 4px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .iphone-cal-slot:last-child { border-bottom: 0; } .iphone-cal-slot--top { background: rgba(232, 201, 140, 0.07); border-radius: 6px; border-bottom-color: transparent; padding: 6px 6px; margin: -2px 0 2px; } .iphone-cal-time { font-family: var(--sans); font-size: 9.5px; color: rgba(255, 255, 255, 0.65); font-feature-settings: "tnum"; } .iphone-cal-slot--top .iphone-cal-time { color: var(--signal); font-weight: 600; } .iphone-cal-job { display: flex; flex-direction: column; gap: 0; min-width: 0; } .iphone-cal-name { font-family: var(--sans); font-size: 10.5px; color: var(--text); font-weight: 500; line-height: 1.15; } .iphone-cal-tag { font-family: var(--sans); font-size: 8.5px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; } .iphone-cal-amt { font-family: var(--mono); font-size: 10px; color: var(--positive); font-feature-settings: "tnum"; font-weight: 500; } .iphone-cal-slot--top .iphone-cal-amt { color: var(--positive-bright); } /* ---------- Browser + website (row 2) --------------------------- */ .browser { position: relative; z-index: 1; width: 100%; max-width: 380px; border-radius: 8px; overflow: hidden; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 60px -22px rgba(0, 0, 0, 0.8); pointer-events: none; } .browser--bad { filter: saturate(0.7); } .browser-chrome { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(180deg, #18181b, #0e0e10); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .browser-buttons { display: inline-flex; gap: 5px; } .browser-buttons i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .browser-buttons i:nth-child(1) { background: #ff5f57; } .browser-buttons i:nth-child(2) { background: #ffbd2e; } .browser-buttons i:nth-child(3) { background: #28c840; } .browser-url { flex: 1; padding: 4px 10px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, 0.7); letter-spacing: 0; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .browser-url--insecure { color: rgba(204, 122, 110, 0.85); } .browser-url--insecure::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 50%; position: relative; flex-shrink: 0; } .browser-url--secure { color: var(--positive); } .browser-lock { width: 10px; height: 12px; flex-shrink: 0; } .browser-load { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; } .browser-load i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .browser-load--slow { color: var(--loss-bright); } .browser-load--slow i { background: var(--loss); box-shadow: 0 0 6px rgba(204, 122, 110, 0.55); } .browser-load--fast { color: var(--positive); } .browser-load--fast i { background: var(--positive); box-shadow: 0 0 8px rgba(125, 212, 164, 0.65); } .browser-load em { font-style: normal; } .browser-page { position: relative; background: #f4f1ea; color: #1a1a1a; min-height: 240px; display: flex; flex-direction: column; } .browser-page--bad { background: #ece7da; color: #2a2a2a; } .browser-page--good { background: linear-gradient(180deg, #fafaf7 0%, #efece6 100%); } /* BAD site internals */ .page-bad-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: #1e3a52; color: #f0e8d8; } .page-bad-logo { font-family: "Times New Roman", serif; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .page-bad-nav { font-family: var(--sans); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240, 232, 216, 0.6); } .page-bad-hero { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 12px; flex: 1; } .page-bad-image { position: relative; background: linear-gradient(135deg, #7e8993, #4f5862); border: 1px solid rgba(0, 0, 0, 0.15); min-height: 100px; display: grid; place-items: center; } .page-bad-image-tag { font-family: var(--sans); font-size: 8px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; padding: 3px 6px; background: rgba(0, 0, 0, 0.4); } .page-bad-copy { display: flex; flex-direction: column; gap: 6px; } .page-bad-headline { font-family: "Times New Roman", serif; font-size: 13px; font-weight: 700; color: #1a1a1a; line-height: 1.2; margin-bottom: 2px; } .page-bad-line { display: block; height: 5px; background: rgba(0, 0, 0, 0.15); width: 100%; } .page-bad-line--short { width: 60%; } .page-bad-phone { font-family: var(--sans); font-size: 10px; color: #1e3a52; font-weight: 600; margin-top: 4px; } .page-bad-footer { background: #d4cdb8; padding: 6px 12px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .page-bad-built { font-family: var(--sans); font-size: 9px; color: #5a5a5a; letter-spacing: 0.04em; } /* GOOD site internals -------------------------------------------- */ .browser-page--good { background: radial-gradient(ellipse 80% 50% at 88% 8%, rgba(232, 201, 140, 0.18), transparent 65%), radial-gradient(ellipse 70% 40% at 8% 92%, rgba(184, 153, 104, 0.08), transparent 60%), linear-gradient(180deg, #fbf9f4 0%, #f1ede4 100%); } /* Image-backed variant: replaces the hand-built CSS mockup with a real landing-page screenshot. Cropped to "above-the-fold" via aspect-ratio so the column height stays in step with the BEFORE column. */ .browser-page--img { background: #ffffff; min-height: 0; padding: 0; display: block; aspect-ratio: 934 / 1100; overflow: hidden; } .browser-page-img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top center; } /* -- Site reel (three landing pages, browser-framed carousel) ---- */ .site-reel { position: relative; z-index: 1; width: 100%; max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .site-reel .browser { margin: 0; max-width: none; } .site-reel-rail { position: relative; } .site-reel-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; opacity: 0; transform: scale(1.015); visibility: hidden; transition: opacity 720ms cubic-bezier(0.32, 0.72, 0, 1), transform 920ms cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; z-index: 1; } .site-reel-slide.is-active { opacity: 1; transform: scale(1); visibility: visible; z-index: 2; transition-delay: 60ms; } .site-reel-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 2px 4px 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .site-reel-status { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: rgba(232, 201, 140, 0.85); } .site-reel-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 6px rgba(125, 212, 164, 0.65); } .site-reel-status span[data-site-reel-industry] { color: rgba(255, 255, 255, 0.85); font-weight: 600; } .site-reel-controls { display: inline-flex; align-items: center; gap: 6px; justify-self: center; } .site-reel-dot { width: 18px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); transition: background 320ms ease, width 320ms ease; cursor: pointer; } .site-reel-dot:hover { background: rgba(255, 255, 255, 0.3); } .site-reel-dot--active { background: #e8c98c; width: 28px; } .site-reel-counter { justify-self: end; font-feature-settings: "tnum"; color: rgba(255, 255, 255, 0.6); } .site-reel-counter em { font-style: normal; color: rgba(255, 255, 255, 0.95); font-weight: 600; } .site-reel-counter-sep { display: inline-block; margin: 0 4px; opacity: 0.5; } /* Top announcement strip */ .page-good-strip { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 14px; background: linear-gradient(90deg, #0a0a0a 0%, #1a1208 50%, #0a0a0a 100%); color: #f1ede4; font-family: var(--sans); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid rgba(232, 201, 140, 0.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-good-strip-dot { width: 5px; height: 5px; border-radius: 50%; background: #7dd4a4; box-shadow: 0 0 5px rgba(125, 212, 164, 0.7); flex: 0 0 auto; animation: ba-status-pulse 1.8s var(--ease-in-out) infinite; } .page-good-strip-sep { color: rgba(232, 201, 140, 0.6); } html.no-motion .page-good-strip-dot { animation: none; } /* Header / sticky nav */ .page-good-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); } .page-good-logo { font-family: var(--sans); font-size: 12px; font-weight: 600; color: #0a0a0a; letter-spacing: -0.012em; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; } .page-good-logo-text { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; } .page-good-logo em { font-style: italic; font-family: var(--serif); color: #b89968; font-weight: 400; } .page-good-logo-mark { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff7e2, #d9b67c 40%, #6e4a1c 75%, #2a1d0c); box-shadow: 0 0 8px rgba(184, 153, 104, 0.55), inset 0 0 0 0.5px rgba(255, 255, 255, 0.3); } .page-good-nav { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 9px; letter-spacing: 0.01em; color: #5a5249; flex: 0 0 auto; white-space: nowrap; } .page-good-nav-phone { display: inline-flex; align-items: center; gap: 5px; color: #0a0a0a; font-weight: 600; font-feature-settings: "tnum"; letter-spacing: 0.01em; font-size: 9.5px; white-space: nowrap; } .page-good-nav-phone svg { width: 9px; height: 9px; color: #b89968; flex: 0 0 auto; } .page-good-nav strong { font-weight: 600; padding: 5px 10px; background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%); color: #fff; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.15); font-size: 9px; letter-spacing: 0.02em; white-space: nowrap; } /* Hero band */ .page-good-hero { padding: 14px 16px 12px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr); gap: 14px; align-items: start; } .page-good-hero-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .page-good-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: #8a6f3f; font-weight: 700; } .page-good-eyebrow-dot { width: 4px; height: 4px; border-radius: 50%; background: #cc6b54; box-shadow: 0 0 4px rgba(204, 107, 84, 0.65); animation: ba-status-pulse 1.6s var(--ease-in-out) infinite; } html.no-motion .page-good-eyebrow-dot { animation: none; } .page-good-headline { font-family: var(--sans); font-size: 16px; font-weight: 300; color: #0a0a0a; letter-spacing: -0.025em; line-height: 1.1; display: block; } .page-good-headline em { font-family: var(--serif); font-style: italic; font-weight: 400; color: #1a1a1a; } .page-good-sub { font-family: var(--sans); font-size: 9.5px; color: #5a5249; line-height: 1.4; font-weight: 400; margin-top: 1px; letter-spacing: 0; } .page-good-cta-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; } .page-good-cta { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%); color: #fff; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 7px 8px 7px 12px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.18); } .page-good-cta-arrow { width: 16px; height: 16px; border-radius: 999px; background: rgba(232, 201, 140, 0.25); display: grid; place-items: center; color: #e8c98c; } .page-good-cta-arrow svg { width: 10px; height: 10px; } .page-good-cta-alt { font-family: var(--sans); font-size: 8.5px; color: #8a7e6c; letter-spacing: 0.02em; font-style: italic; } .page-good-trust { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .trust-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px; font-family: var(--sans); font-size: 8.5px; color: #1a1a1a; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .trust-google { width: 11px; height: 11px; } .trust-stars { color: #fbbc05; font-size: 8.5px; letter-spacing: -1px; } .trust-rating { color: #1a1a1a; font-weight: 700; } .trust-count { color: #8a7e6c; font-weight: 500; font-size: 8px; } .trust-badge--bbb { background: #0a3d62; color: #fff; border-color: #0a3d62; font-weight: 700; letter-spacing: 0.02em; } /* Hero feature card — Next available */ .page-good-hero-card { position: relative; padding: 11px 12px 10px; border-radius: 10px; background: linear-gradient(180deg, #0a0a0a 0%, #1a1208 100%); color: #f1ede4; border: 1px solid rgba(232, 201, 140, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 22px -8px rgba(0, 0, 0, 0.35), 0 0 24px -8px rgba(232, 201, 140, 0.4); display: flex; flex-direction: column; gap: 4px; min-width: 0; } .page-good-hero-card-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--sans); font-size: 7.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232, 201, 140, 0.7); font-weight: 600; } .page-good-hero-card-pulse { width: 5px; height: 5px; border-radius: 50%; background: #7dd4a4; box-shadow: 0 0 6px rgba(125, 212, 164, 0.8); animation: ba-status-pulse 1.4s var(--ease-in-out) infinite; } html.no-motion .page-good-hero-card-pulse { animation: none; } .page-good-hero-card-time { display: flex; align-items: baseline; gap: 3px; margin-top: 1px; } .page-good-hero-card-num { font-family: var(--sans); font-size: 26px; font-weight: 200; letter-spacing: -0.04em; line-height: 1; color: #fff7e2; font-feature-settings: "tnum"; } .page-good-hero-card-ampm { font-family: var(--sans); font-size: 10px; font-weight: 500; color: rgba(232, 201, 140, 0.7); letter-spacing: 0.06em; } .page-good-hero-card-date { font-family: var(--sans); font-size: 9px; color: rgba(255, 247, 226, 0.55); letter-spacing: 0.02em; margin-bottom: 6px; } .page-good-hero-card-tech { display: flex; align-items: center; gap: 6px; padding: 5px 0 7px; border-top: 1px solid rgba(232, 201, 140, 0.18); } .page-good-hero-card-avatar { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #d9b67c, #6e4a1c 70%, #2a1d0c); border: 1px solid rgba(232, 201, 140, 0.35); flex: 0 0 auto; } .page-good-hero-card-tech-meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .page-good-hero-card-tech-name { font-family: var(--sans); font-size: 9.5px; font-weight: 600; color: #fff7e2; letter-spacing: -0.005em; } .page-good-hero-card-tech-role { font-family: var(--sans); font-size: 7.5px; color: rgba(232, 201, 140, 0.55); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px; } .page-good-hero-card-cta { display: inline-flex; align-items: center; justify-content: space-between; padding: 5px 10px; border-radius: 6px; background: rgba(232, 201, 140, 0.14); border: 1px solid rgba(232, 201, 140, 0.32); font-family: var(--sans); font-size: 9px; color: #f5e1b3; font-weight: 600; letter-spacing: 0.04em; } /* Services strip */ .page-good-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 4px 16px; padding: 10px 0; background: rgba(0, 0, 0, 0.05); border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.05); background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3)); } .page-good-service { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 4px; border-right: 1px solid rgba(0, 0, 0, 0.06); position: relative; } .page-good-service:last-child { border-right: 0; } .page-good-service-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, rgba(232, 201, 140, 0.4), rgba(184, 153, 104, 0.15)); color: #6e4a1c; border: 1px solid rgba(184, 153, 104, 0.25); } .page-good-service-ico svg { width: 13px; height: 13px; } .page-good-service-name { font-family: var(--sans); font-size: 8.5px; color: #2a2a2a; font-weight: 600; letter-spacing: 0.01em; text-align: center; } /* Review snippet */ .page-good-review { margin: 4px 16px 14px; padding: 9px 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)); border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; gap: 3px; } .page-good-review-stars { color: #fbbc05; font-size: 9.5px; letter-spacing: 0.5px; } .page-good-review-text { font-family: var(--sans); font-size: 9.5px; color: #2a2a2a; line-height: 1.35; font-weight: 400; font-style: italic; } .page-good-review-meta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 8.5px; color: #5a5249; letter-spacing: 0.02em; font-weight: 500; margin-top: 2px; } .page-good-review-avatar { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #e8c98c, #8a6f3f 70%, #3a2810); flex: 0 0 auto; } .page-good-review-verified { display: inline-flex; color: #3b9b6b; margin-left: 2px; } .page-good-review-verified svg { width: 9px; height: 9px; } /* Floating chat bubble */ .page-good-chat { position: absolute; bottom: 12px; right: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%); border-radius: 999px; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 18px rgba(232, 201, 140, 0.35); border: 1px solid rgba(232, 201, 140, 0.4); } .page-good-chat-orb { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, #e8c98c 30%, #1a1208); box-shadow: 0 0 6px rgba(232, 201, 140, 0.7); animation: ba-status-pulse 1.6s var(--ease-in-out) infinite; } .page-good-chat-text { display: flex; flex-direction: column; line-height: 1.1; } .page-good-chat-name { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: -0.005em; } .page-good-chat-sub { font-family: var(--sans); font-size: 7.5px; color: rgba(232, 201, 140, 0.65); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px; } html.no-motion .page-good-chat-orb { animation: none; } /* ---------- Facebook ad (row 3) ---------------------------------- */ .fbad { position: relative; z-index: 1; width: 100%; max-width: 320px; background: #fff; color: #1c1e21; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 28px 60px -22px rgba(0, 0, 0, 0.7); font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; pointer-events: none; } .fbad--bad { filter: saturate(0.78); } .fbad-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; } .fbad-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: -apple-system, Arial, sans-serif; font-size: 12px; font-weight: 700; flex-shrink: 0; } .fbad-avatar--bad { background: linear-gradient(135deg, #6b7785, #3e4754); color: #d4d4d4; } .fbad-avatar--good { background: linear-gradient(135deg, #0a0a0a, #1a1208); position: relative; } .fbad-avatar-mark { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, #e8c98c 30%, #1a1208); box-shadow: 0 0 6px rgba(232, 201, 140, 0.7); } .fbad-page { flex: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; } .fbad-page-name { font-size: 12.5px; color: #050505; font-weight: 600; letter-spacing: -0.012em; display: inline-flex; align-items: center; gap: 4px; } .fbad-meta-mark { width: 12px; height: 12px; flex-shrink: 0; } .fbad-verified { width: 12px; height: 12px; flex-shrink: 0; } .fbad-page-meta { font-size: 10.5px; color: #65676b; margin-top: 1px; } .fbad-managed { color: #b89968; font-weight: 500; } .fbad-dots { color: #65676b; font-size: 16px; padding: 0 4px; } .fbad-copy { padding: 0 12px 10px; font-size: 11.5px; color: #050505; line-height: 1.36; } .fbad-copy--bad { color: #1c1e21; font-style: italic; } .fbad-copy strong { font-weight: 700; color: #050505; } .fbad-image { position: relative; width: 100%; aspect-ratio: 1.91 / 1; background: #ddd; overflow: hidden; } .fbad-image--bad { position: relative; background: /* film grain hint */ radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0, 0, 0, 0.25), transparent 80%), /* washed sun */ radial-gradient(ellipse 35% 50% at 78% 35%, rgba(255, 220, 160, 0.55), transparent 65%), /* dingy sky → ground */ linear-gradient(180deg, #8a9aa5 0%, #a3a89c 55%, #6e6a52 100%); display: grid; place-items: center; overflow: hidden; } /* Faked stock-photo elements — vague suburban backyard scene */ .fbad-stock-sky { position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(200, 220, 230, 0.25), transparent 80%); } .fbad-stock-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, rgba(110, 120, 70, 0.6), rgba(60, 65, 35, 0.85)); } .fbad-stock-house { position: absolute; left: 10%; bottom: 28%; width: 32%; height: 38%; background: linear-gradient(180deg, #b8a78c 0%, #826e54 100%); border-top: 12px solid #4a3a2a; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2); filter: saturate(0.6); } .fbad-stock-house::before { content: ""; position: absolute; left: 60%; top: 38%; width: 22%; height: 50%; background: rgba(40, 50, 60, 0.65); box-shadow: -50% 0 0 rgba(40, 50, 60, 0.65); } .fbad-stock-house::after { content: ""; position: absolute; left: -2px; top: -16px; border-left: 64px solid transparent; border-right: 64px solid transparent; border-bottom: 18px solid #5a4434; width: 0; height: 0; transform: translateX(0); filter: saturate(0.5); } .fbad-stock-ac { position: absolute; left: 38%; bottom: 28%; width: 14%; height: 18%; background: linear-gradient(180deg, #b0b4b8 0%, #6a6e72 100%); border: 1.5px solid rgba(0, 0, 0, 0.3); filter: saturate(0.5); } .fbad-stock-ac::before, .fbad-stock-ac::after { content: ""; position: absolute; left: 15%; right: 15%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 2px, transparent 2px 4px); } .fbad-stock-ac::before { top: 20%; height: 60%; } .fbad-stock-ac::after { display: none; } .fbad-stock-tree { position: absolute; right: 6%; bottom: 24%; width: 18%; height: 50%; background: radial-gradient(ellipse 100% 70% at 50% 30%, #5a6e3a 0%, transparent 70%), radial-gradient(ellipse 80% 50% at 50% 50%, #6a7a44 0%, transparent 75%); filter: saturate(0.55); } .fbad-stock-tree::after { content: ""; position: absolute; left: 45%; bottom: 0; width: 8%; height: 30%; background: #4a3a26; } .fbad-stock-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); font-family: var(--mono); font-size: 13px; letter-spacing: 0.28em; color: rgba(255, 255, 255, 0.32); text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.2); pointer-events: none; z-index: 1; font-weight: 700; } .fbad-stock { position: absolute; bottom: 6px; left: 6px; color: rgba(255, 255, 255, 0.65); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; background: rgba(0, 0, 0, 0.55); padding: 3px 8px; border-radius: 2px; z-index: 2; } .fbad-stock-icon { width: 11px; height: 11px; opacity: 0.7; } .fbad-image--good { background: #050505; } .fbad-creative { position: relative; width: 100%; height: 100%; overflow: hidden; } /* Layered atmospheric background — sun (heat) bleeding from right, subtle teal/green (cool) wash from bottom-left. Tells the story before any text is read. */ .fbad-creative-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 35% 60% at 90% 40%, rgba(255, 170, 100, 0.42), transparent 65%), radial-gradient(ellipse 40% 50% at 12% 100%, rgba(125, 212, 164, 0.22), transparent 70%), radial-gradient(ellipse 100% 100% at 50% 50%, rgba(20, 14, 8, 1), rgba(5, 4, 3, 1)); } .fbad-creative-sun { position: absolute; top: -28%; right: -8%; width: 56%; height: 130%; background: radial-gradient(circle at center, rgba(255, 210, 140, 0.55) 0%, rgba(255, 180, 100, 0.25) 35%, transparent 70%); filter: blur(2px); pointer-events: none; } .fbad-creative-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(232, 201, 140, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 201, 140, 0.04) 1px, transparent 1px); background-size: 32px 32px; background-position: 0 0; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 80%); pointer-events: none; } .fbad-creative-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Thermostat dial — anchored top-right, off-center for hierarchy */ .fbad-creative-gauge { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 84px; height: 84px; z-index: 2; filter: drop-shadow(0 0 18px rgba(232, 201, 140, 0.35)); } .fbad-creative-gauge-svg { width: 100%; height: 100%; display: block; } .fbad-creative-gauge-readout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; pointer-events: none; } .fbad-creative-gauge-temp { font-family: var(--sans); font-size: 26px; font-weight: 200; color: #fff; letter-spacing: -0.04em; line-height: 1; font-feature-settings: "tnum"; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); } .fbad-creative-gauge-temp em { font-style: normal; font-family: var(--sans); color: #7dd4a4; font-weight: 300; margin-left: 1px; } .fbad-creative-gauge-state { font-family: var(--sans); font-size: 7px; letter-spacing: 0.22em; text-transform: uppercase; color: #7dd4a4; font-weight: 600; margin-top: 1px; } /* Bottom-left content stack (the message) */ .fbad-creative-content { position: absolute; left: 14px; bottom: 14px; right: 110px; display: flex; flex-direction: column; gap: 4px; z-index: 2; } .fbad-creative-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 7.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #e8c98c; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .fbad-creative-pulse { width: 5px; height: 5px; border-radius: 50%; background: #cc6b54; box-shadow: 0 0 6px rgba(204, 107, 84, 0.8); animation: ba-status-pulse 1.4s var(--ease-in-out) infinite; } html.no-motion .fbad-creative-pulse { animation: none; } .fbad-creative-headline { font-family: var(--sans); font-size: 18px; font-weight: 300; color: #fff; letter-spacing: -0.025em; line-height: 1.05; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 2px 12px rgba(0, 0, 0, 0.5); margin-top: 2px; } .fbad-creative-headline em { font-family: var(--serif); font-style: italic; font-weight: 400; color: #e8c98c; } .fbad-creative-headline--accent { font-family: var(--serif); font-style: italic; font-weight: 400; color: #e8c98c; } .fbad-creative-offer { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; font-family: var(--sans); font-size: 9px; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.02em; padding: 5px 9px; background: rgba(0, 0, 0, 0.45); border-radius: 999px; border: 0.5px solid rgba(232, 201, 140, 0.4); margin-top: 4px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); width: max-content; max-width: 100%; } .fbad-creative-offer strong { color: #7dd4a4; font-weight: 700; font-feature-settings: "tnum"; } .fbad-creative-offer-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(232, 201, 140, 0.6); flex: 0 0 auto; } .fbad-creative-offer .trust-stars { font-size: 8.5px; } /* Urgency micro-tag (top-left) */ .fbad-creative-urgent { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; background: linear-gradient(180deg, rgba(204, 107, 84, 0.95), rgba(180, 80, 60, 0.95)); border-radius: 999px; border: 0.5px solid rgba(255, 200, 180, 0.3); font-family: var(--sans); font-size: 7.5px; color: #fff; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2), 0 2px 8px rgba(204, 107, 84, 0.35); z-index: 3; } .fbad-creative-urgent-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, 0.9); animation: ba-status-pulse 1.1s var(--ease-in-out) infinite; } html.no-motion .fbad-creative-urgent-dot { animation: none; } /* Brand bug (bottom-right) */ .fbad-creative-brand { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 4px; background: rgba(0, 0, 0, 0.55); border-radius: 999px; border: 0.5px solid rgba(232, 201, 140, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--sans); font-size: 8.5px; color: #f5e1b3; font-weight: 600; letter-spacing: -0.01em; z-index: 2; } .fbad-creative-brand-mark { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff7e2, #d9b67c 40%, #6e4a1c 75%, #2a1d0c); box-shadow: 0 0 6px rgba(232, 201, 140, 0.6), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25); flex: 0 0 auto; } .fbad-creative-brand-text { white-space: nowrap; } .fbad-creative-brand-text em { font-family: var(--serif); font-style: italic; font-weight: 400; color: #b89968; margin-left: 2px; } /* "Custom creative — built by Adrective" stamp anchored top-right */ .fbad-creative-tag { position: absolute; top: 10px; right: 10px; font-family: var(--mono); font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232, 201, 140, 0.9); padding: 3px 7px; background: rgba(0, 0, 0, 0.6); border: 0.5px solid rgba(232, 201, 140, 0.4); border-radius: 2px; z-index: 4; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; } .fbad-cta-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 10px 12px; background: #f0f2f5; border-top: 1px solid rgba(0, 0, 0, 0.06); gap: 10px; } .fbad-cta-domain { display: none; } .fbad-cta-bar { display: flex; flex-direction: column; min-width: 0; } .fbad-cta-title { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #65676b; font-weight: 600; } .fbad-cta-sub { font-size: 12.5px; color: #050505; font-weight: 600; margin-top: 2px; letter-spacing: -0.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fbad-cta-btn { background: #e4e6eb; color: #050505; padding: 8px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .fbad-cta-btn--bad { background: #d8dadf; color: #65676b; } .fbad-engage { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-top: 1px solid #e4e6eb; font-size: 10.5px; color: #65676b; } .fbad-engage--bad { color: #8e919a; } .fbad-stat { display: inline-flex; align-items: center; gap: 4px; } .fbad-stat svg { width: 12px; height: 11px; opacity: 0.7; } .fbad-targeting { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; background: #f0f2f5; border-top: 1px solid #e4e6eb; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; } .fbad-targeting--bad { color: #8e919a; } .fbad-targeting-key { color: #65676b; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; } .fbad-targeting-val { color: #050505; font-weight: 700; font-feature-settings: "tnum"; } .fbad-targeting--bad .fbad-targeting-val { color: #1c1e21; } .fbad-targeting-tag { color: #65676b; font-style: italic; } .fbad-targeting--bad .fbad-targeting-tag { color: var(--loss); font-style: normal; } .fbad-targeting:not(.fbad-targeting--bad) .fbad-targeting-tag { color: #1b7c41; } /* ============================================================ CREATIVE REEL — replaces single FB ad on the AFTER side of the ads row. Shows three live ads across three industries with distinct brand treatments. The point is adaptation, not one look. ============================================================ */ .fbad--hidden { display: none !important; } .creative-reel { position: relative; z-index: 1; width: 100%; max-width: 380px; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(232, 201, 140, 0.06), transparent 70%), linear-gradient(180deg, #0e0e10 0%, #07070a 100%); border: 1px solid rgba(232, 201, 140, 0.18); border-radius: 14px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 28px 60px -22px rgba(0, 0, 0, 0.7), 0 0 30px -10px rgba(232, 201, 140, 0.18); font-family: var(--sans); pointer-events: none; } /* Header — Adrective Studio identity + tally */ .creative-reel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 10px; border-bottom: 1px solid rgba(232, 201, 140, 0.1); } .creative-reel-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .creative-reel-brand-mark { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff7e2, #d9b67c 40%, #6e4a1c 75%, #2a1d0c); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25), 0 0 10px rgba(232, 201, 140, 0.4); flex: 0 0 auto; } .creative-reel-brand-meta { display: flex; flex-direction: column; min-width: 0; } .creative-reel-brand-name { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #f5e1b3; letter-spacing: -0.012em; line-height: 1.1; } .creative-reel-verified { width: 11px; height: 11px; flex: 0 0 auto; } .creative-reel-brand-sub { font-size: 8.5px; color: rgba(232, 201, 140, 0.55); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-top: 1px; line-height: 1.1; } .creative-reel-tally { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 0 0 auto; } .creative-reel-tally-key { font-size: 7.5px; color: rgba(232, 201, 140, 0.6); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; } .creative-reel-tally-val { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: rgba(255, 255, 255, 0.75); font-feature-settings: "tnum"; letter-spacing: 0.02em; } .creative-reel-tally-val em { font-style: normal; color: #f5e1b3; font-weight: 700; } .creative-reel-tally-sep { width: 2px; height: 2px; border-radius: 50%; background: rgba(232, 201, 140, 0.45); } /* Rail — single-slide carousel. One card visible at a time. Height set to match the dominant ad aspect (HVAC = 2:3 portrait). Card art ends up at ~352×528 so the HVAC creative fills cleanly; slightly wider ads (dental, med spa) get small top/bottom bars that blend with the card background. */ .creative-reel-rail { position: relative; padding: 14px; height: 600px; overflow: hidden; } /* Generic card — absolutely positioned, swapped via .is-active */ .creative-reel-card { position: absolute; top: 14px; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #0a0a0a; border: 0.5px solid rgba(255, 255, 255, 0.06); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.7), inset 0 0.5px 0 rgba(255, 255, 255, 0.06); opacity: 0; transform: translateX(30px) scale(0.98); transition: opacity 720ms cubic-bezier(0.32, 0.72, 0, 1), transform 720ms cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; visibility: hidden; z-index: 1; } .creative-reel-card.is-prev { transform: translateX(-30px) scale(0.98); } .creative-reel-card.is-active { opacity: 1; transform: translateX(0) scale(1); visibility: visible; z-index: 2; transition-delay: 80ms; } .creative-reel-card-art { position: relative; flex: 1; min-height: 480px; overflow: hidden; } .creative-reel-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; z-index: 1; } /* Per-industry edge color so contain-mode bars blend with the ad */ .creative-reel-card--hvac .creative-reel-card-art { background: #0a1a3a; } .creative-reel-card--dental .creative-reel-card-art { background: linear-gradient(180deg, #f4faf8 0%, #e3ecdd 60%, #1f3a3e 100%); } .creative-reel-card--medspa .creative-reel-card-art { background: #0a0608; } /* "Sample creative" disclaimer tag — visible on every card */ .creative-reel-sample-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; background: rgba(0, 0, 0, 0.6); border-radius: 999px; border: 0.5px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, 0.92); z-index: 5; } .creative-reel-sample-tag--dental { background: rgba(31, 58, 62, 0.85); color: #fff; border-color: rgba(255, 255, 255, 0.25); } .creative-reel-sample-tag--medspa { background: rgba(40, 25, 12, 0.78); color: #f5e1b3; border-color: rgba(232, 201, 140, 0.4); } .creative-reel-sample-dot { width: 5px; height: 5px; border-radius: 50%; background: #cc7a6e; box-shadow: 0 0 4px rgba(204, 122, 110, 0.8); } .creative-reel-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px 10px; font-size: 11px; font-weight: 500; border-top: 0.5px solid rgba(255, 255, 255, 0.08); } .creative-reel-card-brand { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .creative-reel-card-brand em { font-style: italic; font-family: var(--serif); font-weight: 400; margin-left: 2px; } .creative-reel-card-brand-mark { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; } .creative-reel-card-metric { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; font-feature-settings: "tnum"; text-transform: uppercase; flex: 0 0 auto; padding: 3px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.04); border: 0.5px solid rgba(255, 255, 255, 0.08); } .creative-reel-card-industry { position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; z-index: 4; } /* Shared copy inside cards */ .creative-reel-card-copy { position: absolute; inset: auto 16px 16px 16px; display: flex; flex-direction: column; gap: 4px; z-index: 3; max-width: 78%; } .creative-reel-card-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1; margin-bottom: 2px; } .creative-reel-card-head { font-size: 22px; font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; margin-top: 2px; } .creative-reel-card-head em { font-family: var(--serif); font-style: italic; font-weight: 400; } .creative-reel-card-head strong { font-weight: 700; font-feature-settings: "tnum"; } .creative-reel-card-offer { display: inline-block; align-self: flex-start; padding: 5px 13px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; margin-top: 8px; white-space: nowrap; } .creative-reel-card-offer strong { font-feature-settings: "tnum"; font-weight: 700; } /* ---------- Card 1 · HVAC (dark + gold thermostat) ---------- */ .creative-reel-card--hvac { background: radial-gradient(ellipse 60% 60% at 80% 30%, rgba(232, 201, 140, 0.4), transparent 65%), linear-gradient(180deg, #1a1208 0%, #050505 100%); } .creative-reel-card--hvac .creative-reel-card-foot { background: #050505; color: #f5e1b3; } .creative-reel-card-brand-mark--hvac { background: radial-gradient(circle at 30% 28%, #fff7e2, #d9b67c 50%, #2a1d0c); box-shadow: 0 0 4px rgba(232, 201, 140, 0.5); } .creative-reel-card-industry--hvac { background: rgba(232, 201, 140, 0.15); border: 0.5px solid rgba(232, 201, 140, 0.4); color: #f5e1b3; } .creative-reel-card--hvac .creative-reel-card-eyebrow { color: #e8c98c; } .creative-reel-card--hvac .creative-reel-card-head { color: #fff; } .creative-reel-card--hvac .creative-reel-card-head em { color: #e8c98c; } .creative-reel-card-offer--hvac { background: rgba(125, 212, 164, 0.18); border: 0.5px solid rgba(125, 212, 164, 0.5); color: #b9f0cf; } .creative-reel-card-offer--hvac strong { color: #7dd4a4; } .creative-reel-card--hvac .creative-reel-card-metric { color: #7dd4a4; border-color: rgba(125, 212, 164, 0.25); background: rgba(125, 212, 164, 0.06); } /* HVAC copy stays on the left since the gauge takes the right side */ .creative-reel-card--hvac .creative-reel-card-copy { max-width: 58%; inset: auto auto 18px 18px; } .creative-reel-art-bg--hvac { position: absolute; inset: 0; } .creative-reel-art-sun { position: absolute; top: -25%; right: -10%; width: 55%; height: 130%; background: radial-gradient(circle, rgba(255, 200, 130, 0.5) 0%, transparent 60%); filter: blur(3px); pointer-events: none; } .creative-reel-art-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .creative-reel-art-gauge { position: absolute; top: 50%; right: 22px; transform: translateY(-58%); width: 124px; height: 124px; filter: drop-shadow(0 0 18px rgba(232, 201, 140, 0.45)); z-index: 2; } .creative-reel-art-gauge svg { width: 100%; height: 100%; display: block; } .creative-reel-art-gauge-temp { position: absolute; inset: 0; display: grid; place-items: center; font-size: 36px; font-weight: 200; color: #fff; letter-spacing: -0.04em; font-feature-settings: "tnum"; line-height: 1; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); } .creative-reel-art-gauge-temp em { font-style: normal; color: #7dd4a4; font-weight: 300; font-size: 24px; } /* ---------- Card 2 · DENTAL (clean white + mint) ---------- */ .creative-reel-card--dental { background: linear-gradient(180deg, #f4faf8 0%, #e6f1ed 100%); } .creative-reel-card--dental .creative-reel-card-foot { background: #fff; color: #1f3a3e; } .creative-reel-card-brand-mark--dental { background: radial-gradient(circle at 30% 28%, #c5e8df, #5fb5a0 60%, #1f3a3e); box-shadow: 0 0 4px rgba(95, 181, 160, 0.5); } .creative-reel-card-industry--dental { background: rgba(31, 58, 62, 0.08); border: 0.5px solid rgba(31, 58, 62, 0.2); color: #1f3a3e; } .creative-reel-card-copy--dental { inset: auto 10px 10px 10px; } .creative-reel-card-eyebrow--dental { color: #4a9985; } .creative-reel-card-head--dental { color: #0e2e2e; } .creative-reel-card-head--dental em { color: #4a9985; } .creative-reel-card-head--dental strong { color: #0e2e2e; } .creative-reel-card-offer--dental { background: #c5e8df; border: 0.5px solid rgba(74, 153, 133, 0.4); color: #1f3a3e; } .creative-reel-card--dental .creative-reel-card-metric { color: #4a9985; } .creative-reel-art-bg--dental { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 28%, rgba(197, 232, 223, 0.9), transparent 65%), linear-gradient(180deg, #f4faf8 0%, #e6f1ed 100%); } .creative-reel-art-glow--dental { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); width: 60%; height: 42%; background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, transparent 70%); filter: blur(6px); } .creative-reel-art-smile { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); width: 56%; height: 50%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)); } .creative-reel-art-sparkle { position: absolute; width: 10px; height: 10px; background: radial-gradient(circle at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%); z-index: 2; } .creative-reel-art-sparkle::before, .creative-reel-art-sparkle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, rgba(74, 153, 133, 0.6) 50%, transparent 60%); } .creative-reel-art-sparkle::after { transform: rotate(90deg); } .creative-reel-art-sparkle--1 { top: 22%; left: 22%; } .creative-reel-art-sparkle--2 { top: 14%; right: 22%; } /* ---------- Card 3 · MED SPA (luxury cream + dark) ---------- */ .creative-reel-card--medspa { background: linear-gradient(180deg, #fbf6ec 0%, #1f1812 100%); } .creative-reel-card--medspa .creative-reel-card-foot { background: #1a140e; color: #f5e1b3; border-top-color: rgba(232, 201, 140, 0.15); } .creative-reel-card-brand-mark--medspa { background: radial-gradient(circle at 30% 28%, #fff7e2, #e8c98c 50%, #6e4a1c); box-shadow: 0 0 4px rgba(232, 201, 140, 0.6); } .creative-reel-card-industry--medspa { background: rgba(40, 25, 12, 0.6); border: 0.5px solid rgba(232, 201, 140, 0.35); color: #f5e1b3; backdrop-filter: blur(4px); } .creative-reel-card-copy--medspa { inset: auto 10px 10px 10px; } .creative-reel-card-eyebrow--medspa { color: #fff7e2; text-shadow: 0 1px 6px rgba(40, 25, 12, 0.4); } .creative-reel-card-head--medspa { color: #fff7e2; } .creative-reel-card-head--medspa em { color: #e8c98c; } .creative-reel-card-head--medspa strong { color: #fff7e2; } .creative-reel-card-offer--medspa { background: rgba(232, 201, 140, 0.18); border: 0.5px solid rgba(232, 201, 140, 0.5); color: #f5e1b3; } .creative-reel-card--medspa .creative-reel-card-metric { color: #e8c98c; } .creative-reel-art-bg--medspa { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 28%, rgba(255, 230, 195, 1), transparent 70%), linear-gradient(180deg, #fbf6ec 0%, #c8b292 38%, #1f1812 100%); } .creative-reel-art-glow--medspa { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 50%; height: 50%; background: radial-gradient(circle, rgba(255, 240, 210, 0.95) 0%, transparent 65%); filter: blur(3px); } .creative-reel-art-rings { position: absolute; top: -8%; left: 50%; transform: translateX(-50%); width: 56%; height: 80%; filter: drop-shadow(0 0 14px rgba(232, 201, 140, 0.55)); } .creative-reel-art-orb { position: absolute; top: 17%; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff7e2, #e8c98c 35%, #6e4a1c 80%, #2a1d0c); box-shadow: 0 0 22px rgba(232, 201, 140, 0.8), inset 0 0 0 0.5px rgba(255, 255, 255, 0.4); z-index: 2; } /* Footer — status + carousel dots */ .creative-reel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 10px; border-top: 1px solid rgba(232, 201, 140, 0.1); } .creative-reel-status { display: inline-flex; align-items: center; gap: 6px; font-size: 8.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); font-style: italic; } .creative-reel-status-dot { width: 5px; height: 5px; border-radius: 50%; background: #7dd4a4; box-shadow: 0 0 5px rgba(125, 212, 164, 0.8); animation: ba-status-pulse 1.6s var(--ease-in-out) infinite; flex: 0 0 auto; } html.no-motion .creative-reel-status-dot { animation: none; } .creative-reel-controls { display: inline-flex; align-items: center; gap: 4px; } .creative-reel-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(232, 201, 140, 0.25); } .creative-reel-dot--active { background: #e8c98c; box-shadow: 0 0 4px rgba(232, 201, 140, 0.7); width: 14px; border-radius: 999px; } /* Responsive */ @media (max-width: 980px) { .iphone { width: 168px; height: 320px; } .iphone-clock-time { font-size: 38px; } .browser { max-width: 100%; } .fbad { max-width: 100%; } .creative-reel { max-width: 100%; } } @media (max-width: 640px) { .iphone { width: 156px; height: 296px; } .iphone-screen { padding: 0 8px 8px; } .iphone-clock-time { font-size: 34px; } .iphone-notif { padding: 6px 8px; } .iphone-notif-title { font-size: 10.5px; } .iphone-notif-detail { font-size: 9px; } .browser-page { min-height: 200px; } .page-good-headline { font-size: 14px; } .fbad-creative-headline { font-size: 17px; } } /* ---------- Outcome (bottom of each column) ---------------------- */ .ba-outcome { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: var(--hairline); } .ba-outcome--loss { border-top-color: rgba(204, 122, 110, 0.22); } .ba-outcome--gain { border-top-color: rgba(125, 212, 164, 0.32); } .ba-arrow { width: 14px; height: 14px; position: relative; display: inline-block; margin-bottom: 4px; } .ba-arrow--down::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--loss) 50%, transparent 50%); mask: linear-gradient(135deg, #000 50%, transparent 50%); -webkit-mask: linear-gradient(135deg, #000 50%, transparent 50%); } .ba-arrow--down { border-right: 2px solid var(--loss); border-bottom: 2px solid var(--loss); transform: rotate(45deg); width: 10px; height: 10px; filter: drop-shadow(0 0 4px rgba(204, 122, 110, 0.45)); } .ba-arrow--down::before { display: none; } .ba-arrow--up { border-left: 2px solid var(--positive); border-top: 2px solid var(--positive); transform: rotate(45deg); width: 10px; height: 10px; filter: drop-shadow(0 0 6px rgba(125, 212, 164, 0.55)); } .ba-arrow--up::before { display: none; } .ba-num { font-family: var(--mono); font-size: clamp(34px, 3.8vw, 46px); letter-spacing: -0.01em; font-weight: 300; font-feature-settings: "tnum"; color: var(--loss-bright); text-shadow: 0 0 24px rgba(204, 122, 110, 0.22); line-height: 1; } .ba-num--pos { color: var(--positive); text-shadow: 0 0 28px rgba(125, 212, 164, 0.32); } .ba-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .ba-col--before .ba-lbl { color: var(--loss-dim); } /* ---------- Bridge (divider between before and after) ------------ */ .ba-bridge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 14px; position: relative; } .ba-bridge-line { width: 1px; flex: 1; background: linear-gradient(180deg, transparent 0%, rgba(232, 201, 140, 0.45) 30%, rgba(232, 201, 140, 0.45) 70%, transparent 100%); } .ba-bridge-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--signal); white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 0; } /* ---------- Mantra at the bottom --------------------------------- */ .ba-mantra { max-width: var(--shell-max); margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; color: var(--text); font-size: clamp(20px, 1.8vw, 26px); font-weight: 300; letter-spacing: -0.014em; } .ba-mantra .serif { font-family: var(--serif); font-style: italic; color: var(--warm); } /* ---------- Reveal-on-enter — stagger after with a delay --------- */ .ba-row .ba-col--before { opacity: 0; transform: translate3d(-18px, 0, 0); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); } .ba-row .ba-col--after { opacity: 0; transform: translate3d(18px, 0, 0); transition: opacity 720ms 360ms var(--ease-out), transform 720ms 360ms var(--ease-out); } .ba-row .ba-bridge { opacity: 0; transition: opacity 720ms 240ms var(--ease-out); } .ba-row.is-visible .ba-col--before, .ba-row.is-visible .ba-col--after { opacity: 1; transform: translate3d(0, 0, 0); } .ba-row.is-visible .ba-bridge { opacity: 1; } html.no-motion .ba-row .ba-col--before, html.no-motion .ba-row .ba-col--after, html.no-motion .ba-row .ba-bridge { opacity: 1; transform: none; transition: none; } /* ---------- Responsive ------------------------------------------- */ @media (max-width: 980px) { .ba-pair { grid-template-columns: 1fr; gap: 14px; } .ba-bridge { flex-direction: row; padding: 0; justify-content: center; } .ba-bridge-line { width: auto; height: 1px; flex: 0 1 80px; background: linear-gradient(90deg, transparent, rgba(232, 201, 140, 0.5) 50%, transparent); } .ba-bridge-label { writing-mode: horizontal-tb; transform: none; padding: 4px 12px; } .ba-col { min-height: 320px; } .ba-row .ba-col--before { transform: translate3d(0, -12px, 0); } .ba-row .ba-col--after { transform: translate3d(0, 12px, 0); } } @media (max-width: 640px) { .ba-col { padding: 18px 16px 20px; min-height: 280px; } .ba-device--phone { width: 76px; height: 132px; } .ba-device--orb { width: 116px; height: 116px; } .ba-device--laptop { width: 168px; } .ba-laptop-screen { height: 96px; } .ba-map { width: 186px; height: 132px; } .ba-num { font-size: clamp(28px, 9vw, 38px); } } /* ---------- AUDIT ------------------------------------------------------- */ .audit { background: radial-gradient(ellipse at 80% 18%, rgba(232,201,140,0.10), transparent 50%), linear-gradient(180deg, var(--bg) 0%, #050505 100%); padding-left: calc(var(--side-rail) + var(--gutter)); } .audit-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(48px, 7vw, 100px); align-items: center; max-width: var(--shell-max); margin: 0 auto; } .audit-copy { max-width: 540px; } .audit-copy h2 { margin-bottom: 28px; } .audit-copy p { margin-bottom: 28px; font-size: 17px; line-height: 1.55; color: var(--text); opacity: 0.84; } .audit-promise { margin: 0 0 36px; padding: 0; list-style: none; display: grid; gap: 12px; } .audit-promise li { position: relative; padding: 14px 16px 14px 40px; border: var(--hairline); background: rgba(255,255,255,0.02); font-size: 14.5px; color: var(--text); } .audit-promise li::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: grid; place-items: center; font-size: 11px; color: var(--ink); background: var(--signal); border-radius: 50%; } .audit-promise strong { color: var(--white); font-weight: 500; margin-right: 6px; } /* AUDIT CARD */ .audit-card { position: relative; padding: 0; border: var(--hairline-bright); background: radial-gradient(circle at 100% 0%, rgba(232,201,140,0.10), transparent 38%), linear-gradient(180deg, rgba(255,255,255,0.028), transparent 60%), var(--panel); box-shadow: 0 60px 140px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.02) inset; overflow: hidden; } .audit-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 32px); pointer-events: none; opacity: 0.55; } .audit-card-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: var(--hairline); background: rgba(255,255,255,0.018); } .audit-card-tag { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); } .audit-card-head em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); } .audit-card-meta { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--hairline); } .audit-card-meta > div { padding: 14px 24px; border-right: var(--hairline); display: flex; flex-direction: column; gap: 4px; } .audit-card-meta > div:last-child { border-right: 0; } .audit-card-meta span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } .audit-card-meta strong { font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--white); letter-spacing: -0.005em; } .audit-list { position: relative; margin: 0; padding: 4px 0; list-style: none; } .audit-list li { display: grid; grid-template-columns: auto 1fr 80px; align-items: center; gap: 18px; padding: 16px 24px; border-bottom: var(--hairline); transition: background 220ms var(--ease-out); opacity: 0; transform: translateX(-8px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), background 220ms var(--ease-out); } .is-visible .audit-list li, .audit-card.is-visible li { opacity: 1; transform: translateX(0); } .audit-list li:last-child { border-bottom: 0; } .audit-list li:hover { background: rgba(232,201,140,0.04); } .audit-list li:nth-child(1) { transition-delay: 100ms; } .audit-list li:nth-child(2) { transition-delay: 200ms; } .audit-list li:nth-child(3) { transition-delay: 300ms; } .audit-list li:nth-child(4) { transition-delay: 400ms; } .audit-list li:nth-child(5) { transition-delay: 500ms; } .audit-step { width: 38px; height: 38px; display: grid; place-items: center; border: var(--hairline); font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--warm); } .audit-list strong { display: block; margin-bottom: 2px; color: var(--white); font-weight: 500; font-size: 15px; letter-spacing: -0.005em; } .audit-list em { font-style: normal; font-size: 13px; color: var(--muted); } .audit-bar { position: relative; display: block; width: 100%; height: 3px; background: rgba(255,255,255,0.06); overflow: hidden; } .audit-bar i { position: absolute; inset: 0; width: var(--p, 0%); background: linear-gradient(90deg, var(--signal), rgba(232,201,140,0.4)); transform-origin: left; animation: barGrow 1400ms var(--ease-out) both; } .audit-card-foot { position: relative; margin: 0; padding: 18px 24px; border-top: var(--hairline); background: rgba(255,255,255,0.012); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .audit-scan { position: absolute; top: 0; left: 0; width: 100%; height: 80px; pointer-events: none; background: linear-gradient(180deg, rgba(232,201,140,0.0), rgba(232,201,140,0.10), rgba(232,201,140,0.0)); mix-blend-mode: screen; opacity: 0.7; animation: scanLine 6s var(--ease-in-out) infinite; } @keyframes barGrow { from { width: 0; } to { width: var(--p, 0%); } } @keyframes scanLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(900%); } } /* ---------- PARTNERSHIP ------------------------------------------------- */ .partnership { background: var(--bg); padding-left: calc(var(--side-rail) + var(--gutter)); } .partnership-inner { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(48px, 7vw, 96px); align-items: start; max-width: var(--shell-max); margin: 0 auto; } .partnership-copy { max-width: 480px; } .partnership-copy p { margin-top: 24px; font-size: 17px; line-height: 1.55; color: var(--text); opacity: 0.86; } .partnership-mantra { margin: 32px 0 0; padding: 24px 26px; border-left: 2px solid var(--signal); background: rgba(232,201,140,0.04); color: var(--warm); font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; } .partnership-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: var(--hairline); background: var(--line); } .partnership-points article { position: relative; padding: 32px 30px; background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 60%), var(--panel); min-height: 220px; transition: background 260ms var(--ease-out); } .partnership-points article:hover { background: linear-gradient(180deg, rgba(232,201,140,0.05), transparent 60%), var(--panel-2); } .point-num { display: block; margin-bottom: 18px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--warm); letter-spacing: -0.01em; } .partnership-points strong { display: block; margin-bottom: 12px; font-family: var(--sans); font-weight: 400; font-size: 19px; color: var(--white); letter-spacing: -0.012em; } .partnership-points p { font-size: 14.5px; line-height: 1.5; color: var(--muted); } /* ---------- PROCESS ----------------------------------------------------- */ .process { background: var(--bg-2); padding-left: calc(var(--side-rail) + var(--gutter)); } .process-head { max-width: var(--shell-max); margin: 0 auto clamp(40px, 5vw, 64px); } /* ============================================================================= LIVE FRONT-OFFICE DECK (demo) A four-panel bento dashboard showing Clovis handling a call, scoring & booking into a calendar, ticking up live revenue + always-on stats, and running parallel work in an activity stream — all simultaneously, under a perspective tilt that's scroll-bound. Pure HTML/CSS/Canvas, paused off-screen, loops on re-entry. Hardware-accelerated (transform/opacity). ========================================================================== */ .demo-deck { /* Semantic green for positive financial values — distinct from the gold AI accent. Gold = system action / signal. Green = positive financial outcome. Desaturated so it reads "Linear/Stripe positive" instead of neon. */ --positive: #7dd4a4; --positive-bright: #a8edc4; --positive-dim: #5b9678; max-width: var(--content-ultra, 1450px); margin: 0 auto clamp(56px, 7vw, 96px); padding: 0; } .demo-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 0 4px; } .demo-caption-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } .demo-caption-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } /* ---------- Human headline above the deck ----------------------------- */ /* Frames the demo for a non-technical buyer: a single sharp claim plus a plain-language sub-line that sets the scenario time (9:47 PM). Sits between the mono caption (system identity) and the live narration banner (running translation of the demo). */ .demo-headline { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; padding: 0 4px; max-width: 880px; } .demo-h3 { margin: 0; font-family: var(--sans); font-weight: 300; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -0.018em; color: var(--text); } .demo-h3-italic { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.012em; color: var(--warm); } .demo-sub { margin: 0; font-family: var(--sans); font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.55; color: var(--muted); max-width: 64ch; } /* ---------- Narration banner (phase-driven, plain English) ------------ */ /* A single line of human commentary above the deck that updates in real-time as the demo plays. Acts as a teleprompter for the visual action: the contractor sees the meaning, not the metadata. */ .demo-narration { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 14px 18px; border: var(--hairline); background: linear-gradient(90deg, rgba(232, 201, 140, 0.04), transparent 60%), rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); position: relative; overflow: hidden; } .demo-narration::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--signal); box-shadow: 0 0 14px rgba(232, 201, 140, 0.55); } .demo-narration-tag { flex-shrink: 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--signal); padding: 4px 8px; border: 1px solid rgba(232, 201, 140, 0.45); background: rgba(232, 201, 140, 0.05); } .demo-narration-text { flex: 1; font-family: var(--sans); font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.45; color: var(--text); letter-spacing: -0.005em; font-weight: 300; /* Fade-cross-fade between narration updates. The JS swaps the text under an `.is-changing` class that fades to dim, then back. */ opacity: 1; transition: opacity 280ms var(--ease-out), color 280ms var(--ease-out); } .demo-narration-text.is-changing { opacity: 0.18; } .demo-narration-text em { font-style: italic; font-family: var(--serif); font-weight: 400; color: var(--warm); letter-spacing: -0.003em; } .demo-narration-text strong { color: var(--positive, #7dd4a4); font-weight: 400; font-feature-settings: "tnum"; } @media (max-width: 760px) { .demo-narration { padding: 12px 14px; gap: 12px; flex-direction: column; align-items: flex-start; } .demo-narration-text { font-size: 15px; } .demo-headline { gap: 10px; } } /* ---------- Workflow flow indicator (4 steps) ------------------------- */ /* Four numbered markers connected by hairlines. Each marker fills as the corresponding step starts; previous steps stay "done" (gold), the active marker pulses, future markers stay dim. The labels read like a process diagram: Answers → Books → Earns → Updates. */ .demo-flow { list-style: none; margin: 0 0 24px 0; padding: 16px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; border: var(--hairline); background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 60%), rgba(0, 0, 0, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .demo-flow-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 12px; z-index: 1; } /* Connector line between markers — drawn between centers, behind nodes. */ .demo-flow-step:not(:last-child)::after { content: ""; position: absolute; top: 12px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 1px; background: rgba(255, 255, 255, 0.08); z-index: 0; transition: background 480ms var(--ease-out); } .demo-flow-step.is-done::after, .demo-flow-step.is-active::after { background: linear-gradient(90deg, rgba(232, 201, 140, 0.6), rgba(232, 201, 140, 0.25)); } .demo-flow-marker { position: relative; z-index: 2; width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, 0.18); background: var(--bg); font-family: var(--mono); font-size: 10.5px; color: var(--muted); display: inline-grid; place-items: center; letter-spacing: 0; transition: border-color 360ms var(--ease-out), color 360ms var(--ease-out), box-shadow 360ms var(--ease-out), background 360ms var(--ease-out), transform 360ms var(--ease-out); } .demo-flow-step.is-done .demo-flow-marker { border-color: rgba(232, 201, 140, 0.65); background: rgba(232, 201, 140, 0.1); color: var(--warm); } .demo-flow-step.is-active .demo-flow-marker { border-color: var(--signal); background: rgba(232, 201, 140, 0.08); color: var(--signal); transform: scale(1.08); box-shadow: 0 0 0 3px rgba(232, 201, 140, 0.12), 0 0 18px rgba(232, 201, 140, 0.5); animation: flow-marker-pulse 1.7s var(--ease-in-out) infinite; } @keyframes flow-marker-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(232, 201, 140, 0.12), 0 0 14px rgba(232, 201, 140, 0.45); } 50% { box-shadow: 0 0 0 4px rgba(232, 201, 140, 0.20), 0 0 28px rgba(232, 201, 140, 0.7); } } /* Step 3 (Earns) takes a green pulse when active — matches the semantic of the panel it's connected to. */ .demo-flow-step[data-step="3"].is-active .demo-flow-marker { border-color: var(--positive, #7dd4a4); background: rgba(125, 212, 164, 0.08); color: var(--positive, #7dd4a4); box-shadow: 0 0 0 3px rgba(125, 212, 164, 0.14), 0 0 22px rgba(125, 212, 164, 0.6); animation: flow-marker-pulse-green 1.7s var(--ease-in-out) infinite; } @keyframes flow-marker-pulse-green { 0%, 100% { box-shadow: 0 0 0 3px rgba(125, 212, 164, 0.14), 0 0 16px rgba(125, 212, 164, 0.5); } 50% { box-shadow: 0 0 0 4px rgba(125, 212, 164, 0.22), 0 0 30px rgba(125, 212, 164, 0.75);} } .demo-flow-step[data-step="3"].is-done .demo-flow-marker { border-color: rgba(125, 212, 164, 0.6); background: rgba(125, 212, 164, 0.08); color: var(--positive, #7dd4a4); } .demo-flow-label { font-family: var(--sans); font-size: 13px; letter-spacing: -0.005em; color: var(--muted); font-weight: 400; transition: color 320ms var(--ease-out); } .demo-flow-step.is-done .demo-flow-label { color: var(--text); } .demo-flow-step.is-active .demo-flow-label { color: var(--text); } .demo-flow-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); transition: color 320ms var(--ease-out); } .demo-flow-step.is-active .demo-flow-sub { color: var(--muted); } html.no-motion .demo-flow-step.is-active .demo-flow-marker { animation: none; } @media (max-width: 760px) { .demo-flow { padding: 12px 12px; gap: 4px; } .demo-flow-step { padding: 0 4px; } .demo-flow-label { font-size: 11.5px; } .demo-flow-sub { display: none; } .demo-flow-step:not(:last-child)::after { top: 12px; left: calc(50% + 14px); right: calc(-50% + 14px); } } /* ---------- Panel spotlight (synced to flow step) -------------------- */ /* When the deck has data-active-panel set, every panel except the active one fades back slightly so the eye locks onto the active one. The active panel gets a gold border halo + tiny scale lift + a deeper ambient drop, like a single instrument lit on a dark stage. */ .demo-deck-grid[data-active-panel] .demo-panel { transition: opacity 480ms var(--ease-out), filter 480ms var(--ease-out), border-color 480ms var(--ease-out), box-shadow 480ms var(--ease-out), transform 720ms var(--ease-out); } .demo-deck-grid[data-active-panel] .demo-panel:not(.is-active) { opacity: 0.55; filter: saturate(0.7) brightness(0.92); } .demo-deck-grid[data-active-panel] .demo-panel:not(.is-active) .panel-corner { opacity: 0.25; } .demo-deck.is-revealed .demo-panel.is-active { border-color: rgba(232, 201, 140, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(232, 201, 140, 0.22), 0 44px 90px -22px rgba(0, 0, 0, 0.78), 0 0 80px rgba(232, 201, 140, 0.12); transform: translate3d(0, 0, 0) scale(1.006); } .demo-deck.is-revealed .demo-panel.is-active .panel-corner { opacity: 1; border-color: var(--signal); } /* Green-tinted halo for the Money panel only — matches its semantics. */ .demo-deck.is-revealed .demo-panel[data-panel="pulse"].is-active { border-color: rgba(125, 212, 164, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(125, 212, 164, 0.22), 0 44px 90px -22px rgba(0, 0, 0, 0.78), 0 0 90px rgba(125, 212, 164, 0.15); } .demo-deck.is-revealed .demo-panel[data-panel="pulse"].is-active .panel-corner { border-color: var(--positive, #7dd4a4); } @media (prefers-reduced-motion: reduce) { .demo-deck-grid[data-active-panel] .demo-panel:not(.is-active) { opacity: 0.78; filter: none; } .demo-deck.is-revealed .demo-panel.is-active { transform: translate3d(0, 0, 0); } } /* 3D stage — establishes perspective so the grid can tilt in space. */ .demo-stage-3d { perspective: 2200px; perspective-origin: 50% 28%; isolation: isolate; } .demo-deck-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: minmax(380px, auto) minmax(280px, auto); grid-template-areas: "call calendar" "pulse calendar" "activity calendar"; gap: 14px; transform-style: preserve-3d; transform: rotateX(var(--deck-rx, 0deg)) rotateY(var(--deck-ry, 0deg)); transition: transform 420ms var(--ease-out); will-change: transform; } @media (min-width: 1100px) { .demo-deck-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr) minmax(0, 0.95fr); grid-template-rows: minmax(420px, auto) minmax(260px, auto); grid-template-areas: "call call calendar" "pulse activity calendar"; } } /* ---------- Base panel ------------------------------------------------ */ .demo-panel { position: relative; isolation: isolate; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,255,255,0.04), transparent 70%), linear-gradient(180deg, var(--panel), var(--panel-2) 60%, var(--bg-3)); border: var(--hairline); /* Inner top highlight + soft ambient drop — physical hardware feel borrowed from the high-end-visual-design Doppelrand principle, kept subtle so it doesn't fight the cinematic monochrome surface. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 0 0 1px rgba(255, 255, 255, 0.012), 0 28px 60px -28px rgba(0, 0, 0, 0.65); overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translate3d(0, 18px, -40px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); transition-delay: calc(var(--panel-i, 0) * 110ms); will-change: transform, opacity; } .demo-deck.is-revealed .demo-panel { opacity: 1; transform: translate3d(0, 0, 0); } .demo-panel[data-panel="call"] { grid-area: call; --panel-i: 0; } .demo-panel[data-panel="calendar"] { grid-area: calendar; --panel-i: 1; } .demo-panel[data-panel="pulse"] { grid-area: pulse; --panel-i: 2; } .demo-panel[data-panel="activity"] { grid-area: activity; --panel-i: 3; } /* Faint structural grid + scan line — every panel feels live. */ .demo-panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 100%); background-size: calc(100% / 18) 100%; pointer-events: none; z-index: 0; } .demo-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.025) 49.7%, rgba(232,201,140,0.16) 50%, rgba(232,201,140,0.16) calc(50% + 1px), rgba(255,255,255,0.025) 50.3%, transparent 100%); background-size: 100% 260%; background-position: 0% -120%; pointer-events: none; opacity: 0.5; z-index: 1; animation: panel-scan 11s linear infinite; animation-delay: calc(var(--panel-i, 0) * -2.4s); } @keyframes panel-scan { 0% { background-position: 0% -120%; } 100% { background-position: 0% 120%; } } html.no-motion .demo-panel::after { animation: none; opacity: 0.16; } /* Reticle brackets on each panel. */ .panel-corner { position: absolute; width: 12px; height: 12px; border: 1px solid var(--signal); opacity: 0.55; z-index: 4; pointer-events: none; transition: opacity 320ms var(--ease-out); } .panel-corner--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; } .panel-corner--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; } .panel-corner--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; } .panel-corner--br { bottom: 8px; right: 8px;border-left: 0; border-top: 0; } .demo-panel:hover .panel-corner { opacity: 0.9; } /* ---------- Panel head / foot ----------------------------------------- */ .panel-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px 12px; border-bottom: var(--hairline); background: rgba(0,0,0,0.45); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .panel-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px 14px; border-top: var(--hairline); background: rgba(0,0,0,0.45); margin-top: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .panel-title { flex: 1; text-align: center; font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; text-transform: none; color: var(--text); font-weight: 400; } .panel-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); } .panel-meta em { font-style: normal; color: var(--text); font-feature-settings: "tnum"; } .panel-meta em[data-positive] { color: var(--positive); } .panel-meta-key { color: var(--dim); font-size: 9.5px; letter-spacing: 0.22em; } .panel-sep { color: var(--dim); } .panel-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px; border: var(--hairline); background: rgba(0,0,0,0.55); color: var(--muted); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; } .panel-tag--live { color: var(--white); } .panel-tag--quiet { color: var(--muted); } .panel-tag--gold-quiet { color: var(--warm); border-color: rgba(232,201,140,0.35); } .panel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); transition: background 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .panel-dot--white { background: var(--white); box-shadow: 0 0 8px rgba(255,255,255,0.55); } .panel-dot--pulse { background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: panel-dot-pulse 1.6s var(--ease-in-out) infinite; } @keyframes panel-dot-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(232,201,140,0.5); transform: scale(1); } 50% { box-shadow: 0 0 16px rgba(232,201,140,0.9); transform: scale(1.18); } } html.no-motion .panel-dot--pulse { animation: none; } /* ============================================================ PANEL 1 · LIVE CALL CONSOLE Two-rail layout: caller transcript (left) + Clovis orb (center) + Clovis transcript (right). Waveforms above each transcript. ============================================================ */ .call-stage { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr clamp(160px, 18vw, 220px) 1fr; gap: 1px; background: var(--line); flex: 1; } .call-side { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px; background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 60%), var(--panel); min-height: 220px; } .call-side-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); } .call-wave { width: 100%; height: 44px; display: block; opacity: 0.45; transition: opacity 320ms var(--ease-out); } .demo-panel[data-active-channel="caller"] .call-side--caller .call-wave, .demo-panel[data-active-channel="clovis"] .call-side--clovis .call-wave { opacity: 1; } .call-transcript { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--text); display: flex; flex-direction: column; gap: 8px; flex: 1; } .call-transcript--clovis p { color: var(--warm); } .call-transcript p { margin: 0; opacity: 0; transform: translateY(4px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); } .call-transcript p.is-visible { opacity: 1; transform: translateY(0); } .call-transcript p.is-typing::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--white); animation: demo-caret 0.9s steps(2) infinite; } @keyframes demo-caret { 50% { opacity: 0; } } /* Orb column — center stage */ .call-orb-wrap { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 16px 12px; background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(232,201,140,0.05), transparent 70%), var(--panel-2); border-left: var(--hairline); border-right: var(--hairline); } /* Clovis orb — DNA of the hero orb at smaller scale, fully reactive. */ .call-orb-frame { position: relative; width: clamp(120px, 14vw, 168px); height: clamp(120px, 14vw, 168px); display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 60%), var(--panel); border: var(--hairline); overflow: visible; } .call-orb-corner { position: absolute; width: 10px; height: 10px; border: 1px solid var(--signal); opacity: 0.85; } .call-orb-corner--tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; } .call-orb-corner--tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; } .call-orb-corner--bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; } .call-orb-corner--br { bottom: 6px; right: 6px;border-left: 0; border-top: 0; } .call-orb-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.95), rgba(232,201,140,0.62) 28%, rgba(0,0,0,0.95) 72%); box-shadow: inset 0 0 36px rgba(255,255,255,0.12), inset 0 0 80px rgba(0,0,0,0.86), 0 0 60px rgba(232,201,140,0.18), 0 0 110px rgba(255,255,255,0.05); filter: blur(0.4px); animation: orbBreath 7.5s var(--ease-in-out) infinite; transform: scale(calc(1 + var(--orb-amp, 0) * 0.07)); transition: box-shadow 220ms var(--ease-out); will-change: transform, box-shadow; } .call-orb-grain { position: absolute; inset: 14%; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: 0.42; pointer-events: none; } .call-orb-core { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--white); box-shadow: 0 0 calc(20px + var(--orb-amp, 0) * 22px) rgba(255,255,255,0.95), 0 0 calc(48px + var(--orb-amp, 0) * 36px) rgba(232,201,140,0.5); transform: translate(-26%, -22%) scale(calc(1 + var(--orb-amp, 0) * 0.18)); animation: orbDrift 9s var(--ease-in-out) infinite; transition: box-shadow 180ms var(--ease-out); } .call-orb-ring { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.06); border-radius: 50%; pointer-events: none; } .call-orb-ring-1 { inset: 8%; } .call-orb-ring-2 { inset: 22%; border-color: rgba(255,255,255,0.04); } .call-orb-ring-3 { inset: 36%; border-color: rgba(232,201,140,0.22); animation: spinRing 22s linear infinite; } .call-orb-orbit { position: absolute; inset: -3%; width: 106%; height: 106%; pointer-events: none; animation: spinRing 24s linear infinite; } .call-orbit-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 0.5; stroke-dasharray: 1.5 4; } .call-orbit-mark { fill: none; stroke: var(--signal); stroke-width: 0.8; stroke-dasharray: 4 296; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(232,201,140,0.7)); } .demo-panel[data-active-channel="clovis"] .call-orb-glow { box-shadow: inset 0 0 36px rgba(255,255,255,0.18), inset 0 0 80px rgba(0,0,0,0.72), 0 0 calc(70px + var(--orb-amp, 0) * 50px) rgba(232,201,140,0.5), 0 0 calc(140px + var(--orb-amp, 0) * 80px) rgba(255,255,255,0.08); } .demo-panel[data-active-channel="clovis"] .call-orb-ring-3 { border-color: rgba(232,201,140,0.45); } html.no-motion .call-orb-glow, html.no-motion .call-orb-core, html.no-motion .call-orb-orbit, html.no-motion .call-orb-ring-3 { animation: none; } /* ---------- DEMO ORB IGNITION ---------------------------------------- */ /* Mirror of the hero-orb ignition (the click feedback on the landing page) — fires when the call is picked up so the demo orb has the same tactile "powering on" moment. Dual shockwave rings (::before/::after on .call-orb-frame, which sit outside its border and expand past the panel edge), a sub-second frame press, corner bracket snap, glow flash, and concentric ring pulse. */ .call-orb-frame::before, .call-orb-frame::after { content: ""; position: absolute; top: 50%; left: 50%; width: 70%; height: 70%; border: 1.4px solid rgba(232, 201, 140, 0.9); border-radius: 50%; transform: translate(-50%, -50%) scale(0.18); opacity: 0; pointer-events: none; z-index: 6; box-shadow: 0 0 22px rgba(232, 201, 140, 0.55), inset 0 0 16px rgba(232, 201, 140, 0.22); will-change: transform, opacity; } .call-orb-wrap.is-igniting .call-orb-frame::before { animation: call-orb-ignite 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .call-orb-wrap.is-igniting .call-orb-frame::after { animation: call-orb-ignite 860ms 110ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes call-orb-ignite { 0% { transform: translate(-50%, -50%) scale(0.18); opacity: 0; border-width: 1.4px; } 12% { opacity: 1; } 60% { opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; border-width: 0.4px; } } .call-orb-wrap.is-igniting .call-orb-frame { animation: call-orb-press 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes call-orb-press { 0% { transform: scale(1); } 18% { transform: scale(0.97); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } } .call-orb-wrap.is-igniting .call-orb-corner { animation: call-orb-corner-snap 540ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes call-orb-corner-snap { 0% { opacity: 0.85; border-color: var(--signal); } 28% { opacity: 1; border-color: var(--white); } 60% { opacity: 1; border-color: var(--signal); box-shadow: 0 0 10px rgba(232,201,140,0.55); } 100% { opacity: 0.85; border-color: var(--signal); box-shadow: none; } } .call-orb-wrap.is-igniting .call-orb-glow { animation: call-orb-glow-flash 680ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes call-orb-glow-flash { 0% { filter: blur(0.4px) brightness(1); } 18% { filter: blur(0.4px) brightness(1.7); } 60% { filter: blur(0.4px) brightness(1.22);} 100% { filter: blur(0.4px) brightness(1); } } .call-orb-wrap.is-igniting .call-orb-ring-1, .call-orb-wrap.is-igniting .call-orb-ring-2 { animation: call-orb-ring-pulse 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes call-orb-ring-pulse { 0% { border-color: rgba(255,255,255,0.06); } 28% { border-color: rgba(255,255,255,0.42); } 100% { border-color: rgba(255,255,255,0.06); } } html.no-motion .call-orb-frame::before, html.no-motion .call-orb-frame::after { display: none; } html.no-motion .call-orb-wrap.is-igniting .call-orb-frame, html.no-motion .call-orb-wrap.is-igniting .call-orb-corner, html.no-motion .call-orb-wrap.is-igniting .call-orb-glow, html.no-motion .call-orb-wrap.is-igniting .call-orb-ring-1, html.no-motion .call-orb-wrap.is-igniting .call-orb-ring-2 { animation: none !important; } .call-orb-state { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim); padding: 4px 8px; border: var(--hairline); background: rgba(0,0,0,0.5); transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out); } .demo-panel[data-phase="ringing"] .call-orb-state, .demo-panel[data-phase="answering"] .call-orb-state { color: var(--signal); border-color: rgba(232,201,140,0.45); } .demo-panel[data-phase="active"] .call-orb-state, .demo-panel[data-phase="resolving"] .call-orb-state { color: var(--white); border-color: rgba(255,255,255,0.25); } .demo-panel[data-phase="resolved"] .call-orb-state { color: var(--warm); border-color: rgba(232,201,140,0.55); } /* Call panel status dot inherits live phase. */ .demo-panel[data-phase="ringing"] [data-call-dot], .demo-panel[data-phase="answering"] [data-call-dot] { background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulseDot 0.7s var(--ease-in-out) infinite; } .demo-panel[data-phase="active"] [data-call-dot], .demo-panel[data-phase="resolving"] [data-call-dot] { background: var(--white); box-shadow: 0 0 12px var(--white); } .demo-panel[data-phase="resolved"] [data-call-dot] { background: var(--signal); box-shadow: 0 0 14px var(--signal); } /* Call panel footer — running actions list. */ .call-actions { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; flex: 1; justify-content: flex-end; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; } .call-actions li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: var(--hairline); background: rgba(0,0,0,0.45); color: var(--muted); opacity: 0; transform: translateY(4px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), border-color 320ms var(--ease-out), color 320ms var(--ease-out); } .call-actions li.is-visible { opacity: 1; transform: translateY(0); } .call-actions li.is-highlight { border-color: rgba(232,201,140,0.55); color: var(--warm); } /* ============================================================ PANEL 2 · CALENDAR — scored slots, the target slot books live ============================================================ */ .cal-legend { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 20px; border-bottom: var(--hairline); font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } .cal-legend-item { display: inline-flex; align-items: center; gap: 6px; } .cal-legend-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .cal-legend-dot--gold { background: var(--signal); box-shadow: 0 0 8px rgba(232,201,140,0.65); } .cal-legend-dot--open { background: transparent; border: 1px solid var(--dim); } .cal-slots { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; position: relative; z-index: 2; overflow: hidden; } .cal-slot { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: var(--hairline); border-color: rgba(255,255,255,0.07); background: rgba(0,0,0,0.35); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); opacity: 0; transform: translateY(6px); transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out), border-color 360ms var(--ease-out), background 360ms var(--ease-out); } .cal-slot.is-revealed { opacity: 1; transform: translateY(0); } .cal-slot--empty { color: var(--dim); } .cal-slot--empty .cal-slot-status { color: var(--dim); } .cal-slot--scheduled .cal-slot-tech { color: var(--text); } .cal-slot--scheduled .cal-slot-status { color: var(--muted); } /* Target slot — initially "ranking", lifts to "booked" gold on the call resolving. The booking moment is its own micro-animation. */ .cal-slot--target { border-color: rgba(232,201,140,0.4); background: rgba(232,201,140,0.03); } .cal-slot--target.is-booking { animation: cal-slot-book 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes cal-slot-book { 0% { transform: translateY(0) scale(1); border-color: rgba(232,201,140,0.4); box-shadow: 0 0 0 rgba(232,201,140,0); } 40% { transform: translateY(-2px) scale(1.02); border-color: rgba(232,201,140,1); box-shadow: 0 0 28px rgba(232,201,140,0.35); } 100% { transform: translateY(0) scale(1); border-color: rgba(232,201,140,0.7); box-shadow: 0 0 14px rgba(232,201,140,0.12); } } .cal-slot--target.is-booked { border-color: rgba(232,201,140,0.7); background: rgba(232,201,140,0.06); color: var(--text); } .cal-slot--target.is-booked .cal-slot-status { color: var(--warm); } .cal-slot--target.is-booked .cal-slot-value { color: var(--positive); } /* Inline highlight span anywhere in the deck — green positive value. */ [data-positive-text] { color: var(--positive); font-feature-settings: "tnum"; } .cal-slot-time { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text); } .cal-slot-tech { display: flex; align-items: center; gap: 8px; min-width: 0; } .cal-slot-tech-avatar { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(0,0,0,0.6) 75%); display: inline-grid; place-items: center; font-family: var(--mono); font-size: 8px; color: var(--muted); letter-spacing: 0; text-transform: uppercase; } .cal-slot-job { font-family: var(--sans); font-size: 12.5px; color: var(--text); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cal-slot-value { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em; } .cal-slot-score { display: inline-flex; gap: 2px; align-items: center; } .cal-slot-score i { width: 3px; height: 9px; background: rgba(255,255,255,0.15); display: inline-block; } .cal-slot-score i.is-on { background: var(--muted); } .cal-slot--target .cal-slot-score i.is-on { background: var(--signal); } .cal-slot--target .cal-slot-score i.is-on:nth-child(-n+3) { box-shadow: 0 0 6px rgba(232,201,140,0.6); } .cal-slot-status { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; min-width: 84px; text-align: right; } /* Money inside the slot status — green, distinct from the status label. */ .cal-slot-money { color: var(--positive); letter-spacing: 0; font-feature-settings: "tnum"; } .cal-slot--target.is-booked .cal-slot-money { color: var(--positive-bright); } .demo-panel[data-cal-state="booking"] .cal-slot--target .cal-slot-status::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; background: var(--signal); border-radius: 50%; box-shadow: 0 0 8px var(--signal); animation: pulseDot 0.6s var(--ease-in-out) infinite; vertical-align: 1px; } /* ============================================================ PANEL 3 · LIVE PULSE — money ticker + always-on ring ============================================================ */ .demo-panel--pulse { display: flex; flex-direction: column; } .pulse-money { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 6px; padding: 22px 24px 8px; font-family: var(--mono); color: var(--text); } .pulse-money-cur { font-size: clamp(20px, 2vw, 26px); color: var(--positive-dim); } .pulse-money-num { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.02em; font-weight: 300; font-feature-settings: "tnum"; color: var(--positive); text-shadow: 0 0 28px rgba(125, 212, 164, 0.18); transition: text-shadow 320ms var(--ease-out), color 320ms var(--ease-out); } /* While the bump is running, amplify the green glow and lift to the brighter mint — visually punctuates the "+$1,840 just landed" moment. */ .pulse-money-num.is-glowing { color: var(--positive-bright); text-shadow: 0 0 24px rgba(168, 237, 196, 0.85), 0 0 56px rgba(125, 212, 164, 0.55), 0 0 96px rgba(125, 212, 164, 0.32); animation: pulse-money-num-glow 1700ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes pulse-money-num-glow { 0% { transform: scale(1); } 22% { transform: scale(1.024); } 100% { transform: scale(1); } } html.no-motion .pulse-money-num.is-glowing { animation: none; } .pulse-money-tick { position: relative; margin-left: 12px; padding: 4px 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); border: var(--hairline); background: rgba(0,0,0,0.45); align-self: center; opacity: 0; transform: translateY(2px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), color 320ms var(--ease-out), border-color 320ms var(--ease-out); } .pulse-money-tick.is-bumping { opacity: 1; transform: translateY(0); color: var(--positive-bright); border-color: rgba(125, 212, 164, 0.55); background: rgba(125, 212, 164, 0.06); animation: pulse-money-glow 1600ms var(--ease-out); } @keyframes pulse-money-glow { 0% { box-shadow: 0 0 0 rgba(125, 212, 164, 0); } 20% { box-shadow: 0 0 22px rgba(125, 212, 164, 0.45); } 100% { box-shadow: 0 0 0 rgba(125, 212, 164, 0); } } .pulse-stats { list-style: none; margin: 0; padding: 4px 24px 12px; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; } .pulse-stats li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); } .pulse-stats li:last-child { border-bottom: 0; } .pulse-stat-key { color: var(--muted); text-transform: uppercase; letter-spacing: 0.18em; font-size: 9.5px; } .pulse-stat-val { font-style: normal; color: var(--text); font-size: 13px; letter-spacing: 0; } .pulse-stat-bar { grid-column: 1 / -1; height: 2px; background: rgba(255,255,255,0.05); position: relative; overflow: hidden; } .pulse-stat-bar i { position: absolute; inset: 0; width: var(--w, 0%); background: linear-gradient(90deg, rgba(232,201,140,0.6), rgba(255,255,255,0.4)); transform-origin: left center; transform: scaleX(0); animation: pulse-bar-grow 1200ms var(--ease-out) forwards; animation-delay: 480ms; } @keyframes pulse-bar-grow { to { transform: scaleX(1); } } .pulse-always { margin-top: auto; position: relative; z-index: 2; display: flex; gap: 18px; align-items: center; padding: 16px 22px 18px; border-top: var(--hairline); background: rgba(0,0,0,0.45); } .pulse-ring { position: relative; width: 72px; height: 72px; flex-shrink: 0; } .pulse-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); } .pulse-ring-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 2; } .pulse-ring-arc { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 276; stroke-dashoffset: 14; filter: drop-shadow(0 0 6px rgba(232,201,140,0.55)); animation: pulse-ring-cycle 14s linear infinite; } @keyframes pulse-ring-cycle { 0% { stroke-dashoffset: 276; } 100% { stroke-dashoffset: -276; } } html.no-motion .pulse-ring-arc { animation: none; stroke-dashoffset: 14; } .pulse-ring-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .pulse-ring-num { display: block; font-family: var(--mono); font-size: 19px; color: var(--text); letter-spacing: 0; font-feature-settings: "tnum"; } .pulse-ring-lab { display: block; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); margin-top: 2px; } .pulse-always-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pulse-always-line { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text); } .pulse-always-line--dim { color: var(--dim); font-size: 10.5px; } .pulse-always-line--gold { color: var(--warm); font-size: 10.5px; } /* ============================================================ PANEL 4 · ACTIVITY STREAM — parallel work, rotating list ============================================================ */ .activity-stream { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 2; flex: 1; } .activity-stream li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: var(--hairline); border-color: rgba(255,255,255,0.06); background: rgba(0,0,0,0.4); font-family: var(--mono); font-size: 11px; color: var(--muted); opacity: 0; transform: translateY(-4px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out), border-color 320ms var(--ease-out), background 320ms var(--ease-out); } .activity-stream li.is-visible { opacity: 1; transform: translateY(0); } .activity-stream li.is-leaving { opacity: 0; transform: translateY(6px); } .activity-stream li[data-weight="hot"] { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); } .activity-stream li[data-weight="gold"] { border-color: rgba(232,201,140,0.45); background: rgba(232,201,140,0.05); color: var(--warm); } .activity-stream-icon { width: 12px; height: 12px; border-radius: 50%; background: var(--dim); display: inline-block; } .activity-stream li[data-weight="hot"] .activity-stream-icon { background: var(--white); box-shadow: 0 0 10px var(--white); animation: pulseDot 0.9s var(--ease-in-out) infinite; } .activity-stream li[data-weight="gold"] .activity-stream-icon { background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulseDot 0.8s var(--ease-in-out) infinite; } .activity-stream-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .activity-stream-label .activity-key { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } .activity-stream-label .activity-val { font-family: var(--sans); font-size: 13px; color: var(--text); letter-spacing: 0; } .activity-stream li[data-weight="gold"] .activity-val { color: var(--warm); } .activity-stream-amt { font-family: var(--mono); font-size: 10.5px; color: var(--text); letter-spacing: 0.04em; white-space: nowrap; font-feature-settings: "tnum"; } .activity-stream-amt[data-positive] { color: var(--positive); } .activity-stream li[data-weight="gold"] .activity-stream-amt[data-positive] { color: var(--positive-bright); } /* ============================================================ Responsive collapse ============================================================ */ @media (max-width: 1100px) { .demo-deck-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "call call" "calendar calendar" "pulse activity"; } .call-stage { grid-template-columns: 1fr 180px 1fr; } } @media (max-width: 760px) { .demo-deck-grid { grid-template-columns: 1fr; grid-template-areas: "call" "calendar" "pulse" "activity"; } .call-stage { grid-template-columns: 1fr; } .call-side { min-height: 140px; } .call-orb-wrap { border-left: 0; border-right: 0; border-top: var(--hairline); border-bottom: var(--hairline); } .call-orb-frame { width: 130px; height: 130px; } .panel-head { flex-wrap: wrap; gap: 8px; padding: 12px 14px 10px; } .panel-foot { flex-wrap: wrap; gap: 8px; padding: 10px 14px 12px; } .pulse-money { padding: 16px 16px 6px; } .pulse-stats { padding: 4px 16px 10px; } .pulse-always { padding: 14px 16px; } .cal-slots { padding: 10px 12px; } .cal-slot { grid-template-columns: 44px 1fr auto; } .cal-slot .cal-slot-score { display: none; } .demo-caption { flex-direction: column; gap: 6px; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .demo-panel { transition: none; opacity: 1; transform: none; } .demo-panel::after { animation: none; } .call-orb-glow, .call-orb-core, .call-orb-orbit, .call-orb-ring-3 { animation: none; } .pulse-ring-arc { animation: none; } .panel-dot--pulse { animation: none; } } .process-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; max-width: var(--shell-max); margin: 0 auto; padding: 0; list-style: none; border: var(--hairline); background: var(--line); } .process-rail li { position: relative; padding: 36px 28px 38px; background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 60%), var(--panel); min-height: 280px; overflow: hidden; transition: background 260ms var(--ease-out); } .process-rail li:hover { background: linear-gradient(180deg, rgba(232,201,140,0.05), transparent 60%), var(--panel-2); } .process-rail .step { display: block; margin-bottom: 32px; font-family: var(--serif); font-style: italic; font-size: 38px; color: var(--warm); letter-spacing: -0.012em; } .process-rail strong { display: block; margin-bottom: 12px; font-family: var(--sans); font-weight: 400; font-size: 22px; color: var(--white); letter-spacing: -0.014em; } .process-rail p { font-size: 14.5px; color: var(--muted); line-height: 1.5; } .rail-line { position: absolute; top: 56px; right: -10px; width: 22px; height: 1px; background: var(--signal); opacity: 0.6; } .rail-line::after { content: "→"; position: absolute; right: -2px; top: -8px; font-size: 14px; color: var(--signal); font-family: var(--sans); } /* ---------- APPLY (FINAL CTA + FORM) ----------------------------------- */ .apply { background: radial-gradient(ellipse at 18% 16%, rgba(232,201,140,0.10), transparent 50%), var(--bg); padding-left: calc(var(--side-rail) + var(--gutter)); } .apply-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 96px); align-items: start; max-width: var(--shell-max); margin: 0 auto; } .apply-copy { max-width: 480px; } .apply-copy h2 { margin-bottom: 28px; } .apply-copy p { font-size: 17px; line-height: 1.55; color: var(--text); opacity: 0.86; margin-bottom: 28px; } .apply-marks { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; border: var(--hairline); background: var(--line); } .apply-marks li { display: grid; grid-template-columns: 36px 1fr; align-items: center; padding: 14px 18px; background: var(--panel); font-size: 14px; color: var(--text); letter-spacing: 0.005em; } .apply-marks li span { font-family: var(--serif); font-style: italic; color: var(--warm); font-size: 16px; } /* APPLY FORM */ .apply-form { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 32px; border: var(--hairline-bright); background: linear-gradient(180deg, rgba(255,255,255,0.024), transparent 70%), var(--panel); box-shadow: 0 60px 140px rgba(0,0,0,0.6); } .apply-form::before { content: "Application · 0xA"; position: absolute; top: -10px; left: 24px; padding: 0 8px; background: var(--bg); font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } .apply-form label { display: flex; flex-direction: column; gap: 8px; position: relative; } .apply-form label.span { grid-column: 1 / -1; } .apply-form span { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; } .apply-form input, .apply-form select, .apply-form textarea { width: 100%; padding: 14px 16px; border: var(--hairline); background: rgba(0,0,0,0.42); color: var(--white); font-family: var(--sans); font-size: 15px; letter-spacing: -0.005em; outline: none; transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } .apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus { border-color: var(--signal); background: rgba(232,201,140,0.04); box-shadow: 0 0 0 1px var(--signal-soft), 0 0 32px rgba(232,201,140,0.10); } .apply-form textarea { resize: vertical; min-height: 120px; } .apply-form button { grid-column: 1 / -1; width: 100%; height: 56px; margin-top: 8px; } .form-fineprint { grid-column: 1 / -1; margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); text-align: center; } /* Honeypot — visually hidden but still focusable so accessibility tools don't flag a missing label, while bots cheerfully tick it. */ .apply-form-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Submit button — loading state */ .apply-form-submit { position: relative; } .apply-form-submit-spinner { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.95); opacity: 0; animation: apply-spin 0.8s linear infinite; pointer-events: none; } .apply-form.is-submitting .apply-form-submit-label { opacity: 0.35; } .apply-form.is-submitting .apply-form-submit-spinner { opacity: 1; } .apply-form.is-submitting button { cursor: progress; } @keyframes apply-spin { to { transform: rotate(360deg); } } /* Inline error */ .apply-form-error { grid-column: 1 / -1; margin: 4px 0 -4px; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: #f3c2b2; background: rgba(204, 107, 84, 0.08); border: 1px solid rgba(204, 107, 84, 0.35); border-radius: 8px; } .apply-form-error a { color: #f5d4ad; text-decoration: underline; text-underline-offset: 2px; } /* ===== Success screen with Cal.com embed ===== */ .apply-success { /* Sits in the same grid cell the form vacated. */ display: flex; flex-direction: column; gap: 24px; padding: 28px; background: radial-gradient(ellipse 70% 45% at 88% 6%, rgba(232, 201, 140, 0.10), transparent 60%), linear-gradient(180deg, rgba(20, 16, 10, 0.94) 0%, rgba(8, 7, 5, 0.96) 100%); border: 1px solid rgba(232, 201, 140, 0.18); border-radius: 14px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7), inset 0 0.5px 0 rgba(255, 255, 255, 0.04); } .apply-success[hidden] { display: none; } .apply-success-head { display: flex; flex-direction: column; gap: 10px; } .apply-success-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 4px 10px 4px 9px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--positive); background: rgba(125, 212, 164, 0.08); border: 1px solid rgba(125, 212, 164, 0.3); border-radius: 999px; } .apply-success-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 8px rgba(125, 212, 164, 0.7); } .apply-success-title { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.01em; color: var(--warm); line-height: 1.15; } .apply-success-sub { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.65); max-width: 52ch; } .apply-success-sub a { color: var(--warm); text-decoration: underline; text-underline-offset: 2px; } /* Cal.com inline embed container — let the embed take full width but cap height so the booker doesn't run off long pages. */ .apply-success-cal { position: relative; width: 100%; min-height: 580px; border-radius: 12px; overflow: hidden; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.06); } .apply-success-cal iframe { width: 100% !important; height: 100% !important; min-height: 580px; border: 0 !important; } /* Mobile — give the booker more vertical room */ @media (max-width: 640px) { .apply-success { padding: 18px; gap: 18px; } .apply-success-cal { min-height: 720px; } .apply-success-cal iframe { min-height: 720px; } } /* ---------- FOOTER ------------------------------------------------------ */ .site-footer { padding: clamp(64px, 8vw, 96px) var(--gutter) clamp(36px, 4vw, 48px); padding-left: calc(var(--side-rail) + var(--gutter)); background: #020202; border-top: var(--hairline); } .footer-inner { display: flex; flex-direction: column; gap: 32px; max-width: var(--shell-max); margin: 0 auto; } .footer-top { display: grid; grid-template-columns: auto 1fr auto; gap: 32px 48px; align-items: center; } .footer-brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--white); } .footer-mantra { text-align: center; font-size: clamp(18px, 1.6vw, 22px); color: var(--text); font-weight: 300; letter-spacing: -0.012em; } .footer-mantra .serif { color: var(--warm); } .footer-meta { display: flex; gap: 24px; justify-self: end; } .footer-meta a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; transition: color 180ms var(--ease-out); } .footer-meta a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: var(--hairline); font-family: var(--mono); font-size: 10.5px; color: var(--dim); letter-spacing: 0.18em; text-transform: uppercase; } /* ---------- MOTION TOGGLE / SKIP / GLOBAL UTIL ------------------------- */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; background: var(--white); color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; transform: translateY(-140%); transition: transform 220ms var(--ease-out); } .skip-link:focus { transform: translateY(0); } .motion-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 25; display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border: var(--hairline); background: rgba(0, 0, 0, 0.72); color: var(--muted); cursor: pointer; backdrop-filter: blur(12px); transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out); } .motion-toggle:hover { border-color: var(--white); color: var(--white); } .motion-toggle span, .motion-toggle strong { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .motion-toggle strong { color: var(--white); } /* ---------- REVEAL / DEPTH MOTION -------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(44px) scale(0.985); transition: opacity 1100ms var(--ease-cinematic), transform 1100ms var(--ease-cinematic); transition-delay: var(--reveal-delay, 0ms); /* will-change set inline by JS only while animating in, then removed — keeps GPU layer count low. */ } [data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); } [data-tilt] { transition: transform 500ms var(--ease-out); /* No persistent will-change — it'd create a layer for every outcome card even when idle. JS-set hover doesn't need it for a brief tilt. */ } .depth-layer { transition: transform 600ms var(--ease-out); /* will-change removed — was creating a permanent GPU layer on the orb and audit card just to support occasional parallax. */ } /* ---------- REDUCED MOTION --------------------------------------------- */ html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html.no-motion [data-reveal] { opacity: 1; transform: none !important; } html.no-motion .word > i { transform: translateY(0) !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .word > i { transform: translateY(0) !important; } } /* ---------- RESPONSIVE -------------------------------------------------- */ @media (max-width: 1080px) { .hero-grid, .pain-inner, .audit-shell, .partnership-inner, .apply-inner { grid-template-columns: 1fr; } .outcomes-head { grid-template-columns: 1fr; } .hero-orb { max-width: 460px; margin: 0 auto; } .outcomes-grid { grid-template-columns: 1fr 1fr; } .process-rail { grid-template-columns: 1fr 1fr; } .partnership-points { grid-template-columns: 1fr 1fr; } .rail-line { display: none; } } /* ---------- SCROLL-LINKED PARALLAX (modern CSS, progressive enhancement) --- `animation-timeline: scroll()` and `view()` ship in Chrome 115+, Edge, Safari 17.4+. No-ops gracefully in older browsers. Zero JS overhead — the compositor drives the animation directly from scroll position. */ @supports (animation-timeline: scroll()) { /* Hero orb — gentle vertical drift as user scrolls past hero */ .hero-orb { animation: heroOrbDrift linear both; animation-timeline: scroll(root); animation-range: 0 90vh; } @keyframes heroOrbDrift { to { translate: 0 -52px; } } /* Audit card — drifts in slightly as section enters viewport */ .audit-card { animation: auditCardLift linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; } @keyframes auditCardLift { from { transform: translateY(48px); } to { transform: translateY(0); } } /* Marquee — slows when user is scrolling fast (reduces visual jitter) */ /* Hero proof grid — items rise sequentially as section anchors */ .hero-proof > div { animation: proofRise linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; } @keyframes proofRise { from { opacity: 0.4; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Side rail mark — slightly pulses as user scrolls (subtle) */ .side-rail-mark { animation: sideRailPulse linear both; animation-timeline: scroll(root); animation-range: 0 100%; } @keyframes sideRailPulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.5; } } } /* Cleaner anchor landings — when you click a nav link, target sits with breathing room instead of clipping under the sticky header */ html { scroll-padding-top: 80px; } @media (max-width: 720px) { :root { --side-rail: 0px; } .side-rail { display: none; } .site-header { padding: 14px 16px; gap: 12px; grid-template-columns: 1fr auto; } .primary-nav { display: none; } .brand-rev { display: none; } .header-cta { height: 38px; padding: 0 14px; font-size: 10.5px; } h1 { font-size: clamp(40px, 11vw, 56px); } h2 { font-size: clamp(30px, 9vw, 44px); } .hero-proof { grid-template-columns: 1fr; } .pain-grid, .outcomes-grid, .process-rail, .partnership-points { grid-template-columns: 1fr; } .apply-form { grid-template-columns: 1fr; padding: 24px; } .footer-top { grid-template-columns: 1fr; text-align: center; } .footer-meta { justify-self: center; } .audit-card-meta { grid-template-columns: 1fr; } .audit-card-meta > div { border-right: 0; border-bottom: var(--hairline); } .audit-card-meta > div:last-child { border-bottom: 0; } .marquee-track { gap: 24px; } } /* ============================================================================= LIVE ACTIVITY TICKER (floating bottom-left) Cycles real-feeling events to make the site feel inhabited. Slides in from the bottom, holds for ~6 seconds, slides out. Hidden during hero + apply. ========================================================================== */ .live-ticker { position: fixed; left: clamp(16px, 4vw, 96px); bottom: 28px; z-index: 80; pointer-events: none; max-width: min(360px, calc(100vw - 32px)); opacity: 0; transform: translate3d(-12px, 14px, 0); transition: opacity 520ms var(--ease-out), transform 720ms var(--ease-out); will-change: transform, opacity; } .live-ticker.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .live-ticker-card { display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 14px; padding: 14px 18px 14px 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 60%), rgba(8, 8, 9, 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: var(--hairline); border-left: 2px solid var(--signal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px -22px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(232, 201, 140, 0.08); position: relative; } .live-ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 12px rgba(125, 212, 164, 0.75); animation: ba-status-pulse 1.6s var(--ease-in-out) infinite; align-self: start; margin-top: 6px; } html.no-motion .live-ticker-dot { animation: none; } .live-ticker-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .live-ticker-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal); font-weight: 600; } .live-ticker-text { font-family: var(--sans); font-size: 13px; letter-spacing: -0.005em; color: var(--text); line-height: 1.3; font-weight: 400; } .live-ticker-text strong { color: var(--positive); font-weight: 500; font-feature-settings: "tnum"; } .live-ticker-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--muted); } .live-ticker.is-changing .live-ticker-body { opacity: 0.18; transition: opacity 220ms var(--ease-out); } .live-ticker .live-ticker-body { transition: opacity 280ms var(--ease-out); } /* Hide when scrolled away from the page entirely. */ body.live-ticker-paused .live-ticker { opacity: 0; transform: translate3d(-12px, 14px, 0); } @media (max-width: 720px) { .live-ticker { left: 12px; right: 12px; bottom: 12px; max-width: none; } .live-ticker-card { padding: 12px 14px 12px 12px; } .live-ticker-text { font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { .live-ticker { transition: opacity 240ms ease; transform: none !important; } } /* ============================================================================= PAIN SECTION — LIVE LEAK COUNTER A prominent ticker between the headline and the four leak cards. The number rises continuously while the user is on the page — by the time they finish reading the section, they've watched several thousand dollars evaporate. ========================================================================== */ .pain-leak { max-width: var(--shell-max); margin: clamp(36px, 4.5vw, 56px) 0 clamp(40px, 5vw, 64px); } .pain-leak-frame { position: relative; isolation: isolate; padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px); background: radial-gradient(ellipse 60% 60% at 30% 30%, rgba(204, 122, 110, 0.06), transparent 70%), linear-gradient(180deg, var(--panel), var(--panel-2) 60%, var(--bg-3)); border: var(--hairline); border-left: 2px solid var(--loss); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 32px 70px -28px rgba(0, 0, 0, 0.65); overflow: hidden; } .pain-leak-frame::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 100%); background-size: calc(100% / 18) 100%; pointer-events: none; z-index: 0; } .pain-leak-corner { position: absolute; width: 14px; height: 14px; border: 1px solid var(--loss); opacity: 0.55; pointer-events: none; z-index: 2; } .pain-leak-corner--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; } .pain-leak-corner--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; } .pain-leak-corner--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; } .pain-leak-corner--br { bottom: 10px; right: 10px;border-left: 0; border-top: 0; } .pain-leak-head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; } .pain-leak-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid rgba(204, 122, 110, 0.4); background: rgba(204, 122, 110, 0.06); color: var(--loss-bright); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; align-self: flex-start; white-space: nowrap; } .pain-leak-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--loss); box-shadow: 0 0 10px var(--loss); animation: pain-leak-pulse 1.4s var(--ease-in-out) infinite; } @keyframes pain-leak-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(204, 122, 110, 0.45); transform: scale(1); opacity: 0.85; } 50% { box-shadow: 0 0 16px rgba(204, 122, 110, 0.85); transform: scale(1.2); opacity: 1; } } html.no-motion .pain-leak-pulse { animation: none; } .pain-leak-label { font-family: var(--sans); font-size: clamp(13.5px, 1.1vw, 15.5px); line-height: 1.4; color: var(--muted); max-width: 56ch; letter-spacing: -0.005em; } .pain-leak-amount { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 8px; margin: clamp(18px, 2.4vw, 28px) 0 clamp(16px, 2vw, 22px); font-family: var(--mono); color: var(--loss-bright); } .pain-leak-cur { font-size: clamp(28px, 3vw, 40px); color: var(--loss); opacity: 0.85; } .pain-leak-num { font-size: clamp(54px, 7.2vw, 96px); letter-spacing: -0.02em; line-height: 1; font-weight: 300; font-feature-settings: "tnum"; color: var(--loss-bright); text-shadow: 0 0 28px rgba(204, 122, 110, 0.32), 0 0 64px rgba(204, 122, 110, 0.18); } .pain-leak-foot { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding-top: clamp(14px, 2vw, 20px); border-top: var(--hairline); } .pain-leak-stat { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .pain-leak-stat em { font-style: normal; color: var(--text); font-feature-settings: "tnum"; } .pain-leak-sep { color: var(--dim); font-family: var(--mono); } @media (max-width: 640px) { .pain-leak-foot { gap: 6px 10px; } .pain-leak-stat { font-size: 9.5px; letter-spacing: 0.08em; } .pain-leak-sep { display: none; } } /* ============================================================================= AUDIT CARD — SCARCITY + TIMING BADGES + STACKED PAGES Makes the audit deliverable feel like a real physical document with urgency. The stacked-page shadows imply a multi-page report behind it. ========================================================================== */ .audit-card--stacked { position: relative; isolation: isolate; } .audit-card-stack { position: absolute; inset: 0; background: linear-gradient(180deg, var(--panel-2), var(--bg-3)); border: var(--hairline); z-index: -1; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 22px 50px -24px rgba(0, 0, 0, 0.6); } .audit-card-stack--1 { transform: translate3d(6px, 8px, 0) rotate(0.6deg); opacity: 0.7; } .audit-card-stack--2 { transform: translate3d(12px, 16px, 0) rotate(1.2deg); opacity: 0.4; } .audit-card-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .audit-card-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .audit-card-badge--scarcity { color: var(--positive); border: 1px solid rgba(125, 212, 164, 0.45); background: rgba(125, 212, 164, 0.06); font-weight: 600; } .audit-card-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 8px var(--positive); animation: ba-status-pulse 1.7s var(--ease-in-out) infinite; } html.no-motion .audit-card-badge-dot { animation: none; } .audit-card-badge-dot ~ span { color: var(--positive-bright); } .audit-card-badge--scarcity span[data-audit-slots] { color: var(--white); font-weight: 700; font-feature-settings: "tnum"; font-size: 12px; letter-spacing: 0; margin-right: -3px; } .audit-card-badge--timing { color: var(--warm); border: 1px solid rgba(232, 201, 140, 0.4); background: rgba(232, 201, 140, 0.05); } @media (max-width: 640px) { .audit-card-stack--1 { transform: translate3d(4px, 6px, 0) rotate(0.4deg); } .audit-card-stack--2 { transform: translate3d(8px, 12px, 0) rotate(0.8deg); } .audit-card-badges { gap: 6px; } .audit-card-badge { font-size: 9px; padding: 5px 10px; letter-spacing: 0.14em; } } /* ============================================================================= PAIN SECTION — LOST LEADS FEED + EXPENSIVE MATH Fills the previously blank right column beneath the live leak counter. Concrete pain proof (named customers, real dollars, named competitors). ========================================================================== */ /* ---------- Lost Leads Feed -------------------------------------- */ .pain-feed { position: relative; isolation: isolate; padding: 20px 22px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 60%), linear-gradient(180deg, var(--panel), var(--panel-2)); border: var(--hairline); border-left: 2px solid rgba(204, 122, 110, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 28px 60px -28px rgba(0, 0, 0, 0.65); overflow: hidden; } .pain-feed::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 100%); background-size: calc(100% / 14) 100%; pointer-events: none; z-index: 0; } .pain-feed-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .pain-feed-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid rgba(204, 122, 110, 0.4); background: rgba(204, 122, 110, 0.06); color: var(--loss-bright); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; } .pain-feed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--loss); box-shadow: 0 0 8px rgba(204, 122, 110, 0.65); animation: pain-leak-pulse 1.4s var(--ease-in-out) infinite; } html.no-motion .pain-feed-dot { animation: none; } .pain-feed-count { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .pain-feed-count em { font-style: normal; color: var(--loss-bright); font-weight: 700; font-size: 14px; font-feature-settings: "tnum"; } .pain-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; min-height: 220px; } .pain-feed-item { display: grid; grid-template-columns: 56px 1fr auto; align-items: start; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(0, 0, 0, 0.42); opacity: 0; transform: translateY(-6px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out), border-color 320ms var(--ease-out); } .pain-feed-item.is-visible { opacity: 1; transform: translateY(0); } .pain-feed-item.is-leaving { opacity: 0; transform: translateY(8px); } .pain-feed-item.is-fresh { border-color: rgba(204, 122, 110, 0.45); background: rgba(204, 122, 110, 0.05); } .pain-feed-time { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--loss-bright); font-feature-settings: "tnum"; white-space: nowrap; } .pain-feed-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pain-feed-name { font-family: var(--sans); font-size: 13.5px; color: var(--text); font-weight: 500; letter-spacing: -0.005em; line-height: 1.2; } .pain-feed-name em { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; margin-left: 4px; } .pain-feed-reason { font-family: var(--sans); font-size: 12px; color: var(--muted); line-height: 1.35; font-style: italic; } .pain-feed-competitor { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--dim); margin-top: 2px; } .pain-feed-competitor::before { content: "→ "; color: var(--dim); } .pain-feed-competitor em { font-style: normal; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(204, 122, 110, 0.6); text-decoration-thickness: 1px; } .pain-feed-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; } .pain-feed-num { font-family: var(--mono); font-size: 14.5px; color: var(--loss-bright); font-feature-settings: "tnum"; letter-spacing: -0.005em; } .pain-feed-tagline { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--loss); } .pain-feed-foot { position: relative; z-index: 1; margin-top: 14px; padding-top: 12px; border-top: var(--hairline); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); line-height: 1.4; } /* ---------- Expensive Math --------------------------------------- */ .pain-math { position: relative; isolation: isolate; padding: 22px 24px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 60%), linear-gradient(180deg, var(--panel), var(--panel-2)); border: var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 28px 60px -28px rgba(0, 0, 0, 0.65); overflow: hidden; } .pain-math-head { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: var(--hairline); } .pain-math-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); } .pain-math-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); } .pain-math-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; } .pain-math-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 4px 0; font-family: var(--mono); font-feature-settings: "tnum"; opacity: 0; transform: translateX(-6px); transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out); transition-delay: calc(var(--math-i, 0) * 120ms); } .pain-math-row[data-math-step="1"] { --math-i: 0; } .pain-math-row[data-math-step="2"] { --math-i: 1; } .pain-math-row[data-math-step="4"] { --math-i: 2; } .pain-math-row[data-math-step="5"] { --math-i: 3; } .pain-math-row[data-math-step="7"] { --math-i: 4; } .pain-math.is-visible .pain-math-row { opacity: 1; transform: translateX(0); } .pain-math-label { font-size: 12.5px; color: var(--muted); letter-spacing: 0; } .pain-math-val { font-size: 14.5px; color: var(--text); letter-spacing: -0.005em; } .pain-math-val--sub { color: var(--muted); } .pain-math-val--big { font-size: clamp(22px, 2.2vw, 28px); font-weight: 300; color: var(--loss-bright); text-shadow: 0 0 18px rgba(204, 122, 110, 0.28); } .pain-math-row--total .pain-math-label { color: var(--text); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 11px; } .pain-math-divider { height: 1px; background: var(--line); margin: 4px 0; opacity: 0; transform: scaleX(0); transform-origin: left center; transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out); transition-delay: calc(var(--math-i, 0) * 120ms); } .pain-math-divider[data-math-step="3"] { --math-i: 1.5; } .pain-math-divider[data-math-step="6"] { --math-i: 3.5; } .pain-math-divider--bold { background: var(--text); height: 1px; } .pain-math.is-visible .pain-math-divider { opacity: 1; transform: scaleX(1); } .pain-math-foot { position: relative; z-index: 1; margin-top: 16px; padding-top: 12px; border-top: var(--hairline); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); line-height: 1.4; } .pain-math-foot em { font-style: normal; color: var(--loss-bright); font-weight: 600; font-feature-settings: "tnum"; } @media (max-width: 640px) { .pain-feed-item { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 8px 10px; } .pain-feed-time { font-size: 9.5px; } .pain-feed-name { font-size: 12.5px; } .pain-feed-reason { font-size: 11.5px; } .pain-feed-num { font-size: 13px; } .pain-math-val--big { font-size: 22px; } } /* ============================================================================= PAIN — INDUSTRY LEAD-VALUE CALCULATOR Replaces the abstract live counter. Six local-service industries cycle on a ~7s rotation; each shows avg customer worth + per-week/month/year/5yr compound loss. Numbers tween between industries, tab indicator slides, subtle red glow on the peak yearly figure. Highest-impact visual the pain section has — directly answers "what does this cost ME?" ========================================================================== */ .pain-industry { position: relative; isolation: isolate; padding: clamp(22px, 2.8vw, 32px) clamp(22px, 2.8vw, 36px) clamp(20px, 2.4vw, 28px); background: radial-gradient(ellipse 60% 50% at 30% 20%, rgba(204, 122, 110, 0.08), transparent 70%), linear-gradient(180deg, var(--panel), var(--panel-2) 60%, var(--bg-3)); border: var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 32px 70px -26px rgba(0, 0, 0, 0.7); overflow: hidden; } .pain-industry::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 100%); background-size: calc(100% / 18) 100%; pointer-events: none; z-index: 0; } .pain-industry-corner { position: absolute; width: 13px; height: 13px; border: 1px solid var(--loss); opacity: 0.55; z-index: 3; pointer-events: none; } .pain-industry-corner--tl { top: 9px; left: 9px; border-right: 0; border-bottom: 0; } .pain-industry-corner--tr { top: 9px; right: 9px; border-left: 0; border-bottom: 0; } .pain-industry-corner--bl { bottom: 9px; left: 9px; border-right: 0; border-top: 0; } .pain-industry-corner--br { bottom: 9px; right: 9px;border-left: 0; border-top: 0; } .pain-industry-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .pain-industry-tag { display: inline-flex; align-items: center; gap: 9px; padding: 5px 11px; border: 1px solid rgba(204, 122, 110, 0.4); background: rgba(204, 122, 110, 0.06); color: var(--loss-bright); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; } .pain-industry-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--loss); box-shadow: 0 0 9px var(--loss); animation: pain-leak-pulse 1.4s var(--ease-in-out) infinite; } html.no-motion .pain-industry-pulse { animation: none; } .pain-industry-rotate { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); } .pain-industry-rotate em { font-style: normal; color: var(--text); font-feature-settings: "tnum"; font-weight: 600; } .pain-industry-title { position: relative; z-index: 1; margin: 0 0 16px 0; font-family: var(--sans); font-size: clamp(15px, 1.25vw, 17.5px); font-weight: 400; line-height: 1.4; letter-spacing: -0.005em; color: var(--text); max-width: 60ch; } .pain-industry-title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--warm); transition: color 320ms var(--ease-out); } .pain-industry-title-dim { color: var(--muted); font-family: var(--sans); } /* ---------- Industry tabs ---------------------------------------- */ .pain-industry-tabs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: clamp(18px, 2.2vw, 26px); padding: 5px; background: rgba(0, 0, 0, 0.4); border: var(--hairline); } .pain-industry-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 8px; background: transparent; border: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); cursor: pointer; transition: color 320ms var(--ease-out), background 320ms var(--ease-out); white-space: nowrap; min-width: 0; } .pain-industry-tab:hover { color: var(--muted); } .pain-industry-tab.is-active { color: var(--loss-bright); background: linear-gradient(180deg, rgba(204, 122, 110, 0.12), rgba(204, 122, 110, 0.04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(204, 122, 110, 0.35); } .pain-industry-icon { width: 14px; height: 14px; color: currentColor; flex-shrink: 0; } .pain-industry-tab.is-active .pain-industry-icon { color: var(--loss); } @media (max-width: 1100px) { .pain-industry-tabs { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .pain-industry-tab { font-size: 9px; padding: 7px 4px; letter-spacing: 0.06em; } .pain-industry-icon { width: 12px; height: 12px; } } /* ---------- Ticket value (hero number) --------------------------- */ .pain-industry-ticket { position: relative; z-index: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px; padding: 12px 0 16px; border-bottom: var(--hairline); } .pain-industry-ticket-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); font-weight: 600; } .pain-industry-ticket-val { font-family: var(--mono); font-size: clamp(36px, 4.4vw, 52px); line-height: 1; letter-spacing: -0.018em; color: var(--text); font-feature-settings: "tnum"; font-weight: 300; display: inline-flex; align-items: baseline; gap: 4px; transition: color 360ms var(--ease-out); } .pain-industry-ticket-val em { font-style: normal; font-size: clamp(22px, 2.6vw, 30px); color: var(--dim); font-weight: 400; } .pain-industry-ticket-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-left: auto; } /* When industry is mid-swap, briefly desaturate the values to hint that they're updating. JS adds .is-swapping for ~220ms. */ .pain-industry.is-swapping .pain-industry-ticket-val, .pain-industry.is-swapping .pain-industry-row-val { opacity: 0.4; transition: opacity 220ms var(--ease-out); } /* ---------- Loss stack (week/month/year) ------------------------- */ .pain-industry-stack { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 0 14px; } .pain-industry-row { display: grid; grid-template-columns: 110px auto 1fr; align-items: baseline; gap: 16px; padding: 4px 0; } .pain-industry-row-key { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .pain-industry-row-val { font-family: var(--mono); font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.008em; color: var(--text); font-feature-settings: "tnum"; font-weight: 400; display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; transition: color 360ms var(--ease-out); } .pain-industry-row-val em { font-style: normal; font-size: 14px; color: var(--dim); } .pain-industry-row-val--big { font-size: clamp(26px, 2.8vw, 34px); color: var(--loss-bright); font-weight: 300; text-shadow: 0 0 24px rgba(204, 122, 110, 0.28); } .pain-industry-row-val--big em { color: var(--loss); } .pain-industry-row-bar { position: relative; height: 3px; background: rgba(255, 255, 255, 0.04); overflow: hidden; } .pain-industry-row-bar i { position: absolute; inset: 0; width: var(--w, 0%); background: linear-gradient(90deg, rgba(204, 122, 110, 0.65), var(--loss-bright)); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 800ms var(--ease-out); } .pain-industry-row[data-period="week"] .pain-industry-row-bar i { --p: 0.20; } .pain-industry-row[data-period="month"] .pain-industry-row-bar i { --p: 0.55; } .pain-industry-row[data-period="year"] .pain-industry-row-bar i { --p: 1; } .pain-industry-row--peak .pain-industry-row-bar i { background: linear-gradient(90deg, var(--loss), var(--loss-bright)); box-shadow: 0 0 12px rgba(204, 122, 110, 0.45); } /* ---------- Footer summary (5-year) ------------------------------ */ .pain-industry-foot { position: relative; z-index: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: var(--hairline); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; } .pain-industry-foot-label { color: var(--muted); } .pain-industry-foot-arrow { color: var(--dim); } .pain-industry-foot-val { font-family: var(--mono); font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.008em; text-transform: none; color: var(--loss-bright); font-feature-settings: "tnum"; font-weight: 500; display: inline-flex; align-items: baseline; gap: 2px; text-shadow: 0 0 18px rgba(204, 122, 110, 0.22); } .pain-industry-foot-val em { font-style: normal; font-size: 13px; color: var(--loss); } .pain-industry-foot-tag { color: var(--muted); font-style: italic; } @media (max-width: 640px) { .pain-industry-row { grid-template-columns: 90px auto; } .pain-industry-row-bar { grid-column: 1 / -1; } .pain-industry-ticket-sub { margin-left: 0; } } /* ============================================================================= DONE-FOR-YOU CREATIVE Three components: (1) creative gallery horizontal rail of ad mockups, (2) you-vs-us responsibility split, (3) creative factory animation showing inputs → process → outputs. Sits between Outcomes and Audit so the prospect understands exactly what we make for them before the CTA. ========================================================================== */ .done-for-you { background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 60%), var(--bg-2); padding-left: calc(var(--side-rail) + var(--gutter)); } .dfy-head { max-width: var(--shell-max); margin: 0 auto clamp(48px, 6vw, 76px); } .dfy-head h2 { margin: 14px 0 18px 0; } .dfy-sub { margin: 0; font-family: var(--sans); font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.55; color: var(--muted); max-width: 68ch; } /* ---------- Creative gallery (horizontal scrolling rail) ---------- */ .dfy-gallery { max-width: var(--content-ultra, 1450px); margin: 0 auto clamp(56px, 7vw, 96px); } .dfy-gallery-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; padding: 0 4px; } .dfy-gallery-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid rgba(232, 201, 140, 0.4); background: rgba(232, 201, 140, 0.05); color: var(--warm); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; } .dfy-gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 9px var(--signal); animation: ba-status-pulse 1.7s var(--ease-in-out) infinite; } html.no-motion .dfy-gallery-dot { animation: none; } .dfy-gallery-counter { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .dfy-gallery-counter em { font-style: normal; color: var(--text); font-weight: 600; font-feature-settings: "tnum"; font-size: 13px; } /* Horizontal scrolling rail with snap. Hide native scrollbar. */ .dfy-gallery-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 0 18px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; mask-image: linear-gradient( 90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100% ); -webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100% ); } .dfy-gallery-rail::-webkit-scrollbar { height: 6px; } .dfy-gallery-rail::-webkit-scrollbar-track { background: transparent; } .dfy-gallery-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 0; } /* Each ad tile. */ .dfy-ad { flex: 0 0 auto; width: 260px; display: flex; flex-direction: column; scroll-snap-align: start; border: var(--hairline); background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 60%), var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 60px -28px rgba(0, 0, 0, 0.7); overflow: hidden; transition: transform 480ms var(--ease-out), border-color 380ms var(--ease-out), box-shadow 480ms var(--ease-out); position: relative; } .dfy-ad:hover { transform: translate3d(0, -3px, 0); border-color: rgba(232, 201, 140, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 36px 80px -28px rgba(0, 0, 0, 0.78), 0 0 28px rgba(232, 201, 140, 0.08); } .dfy-ad-creative { position: relative; aspect-ratio: 1 / 1; padding: 18px 18px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow: hidden; color: #fff; isolation: isolate; } .dfy-ad-creative::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 80% 25%, rgba(255, 255, 255, 0.18), transparent 70%), var(--ad-bg, linear-gradient(135deg, #1a1a1f, #050505)); z-index: -1; } .dfy-ad-creative::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%); z-index: -1; } .dfy-ad-creative-eyebrow { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ad-accent, var(--signal)); font-weight: 600; margin-bottom: 4px; } .dfy-ad-creative-headline { font-family: var(--sans); font-size: 22px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; color: #fff; } .dfy-ad-creative-accent { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: -0.01em; color: var(--ad-accent, var(--signal)); line-height: 1.1; margin-bottom: 8px; } .dfy-ad-creative-cta { display: inline-flex; align-self: flex-start; margin-top: 6px; padding: 6px 11px; background: #fff; color: #0a0a0a; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; } /* Per-industry creative palettes — varied but all on-brand. */ .dfy-ad-creative--hvac { --ad-bg: linear-gradient(135deg, #1a2638 0%, #0c1622 60%, #050a12 100%); --ad-accent: #9bd1e8; } .dfy-ad-creative--roofing { --ad-bg: linear-gradient(135deg, #2b1a14 0%, #14100c 60%, #0a0805 100%); --ad-accent: #e8c98c; } .dfy-ad-creative--medspa { --ad-bg: linear-gradient(135deg, #2a1820 0%, #170d12 60%, #0a0608 100%); --ad-accent: #e8b5c1; } .dfy-ad-creative--dental { --ad-bg: linear-gradient(135deg, #1a2024 0%, #0e1216 60%, #050709 100%); --ad-accent: #cfe2f0; } .dfy-ad-creative--plumbing { --ad-bg: linear-gradient(135deg, #14202b 0%, #0a121a 60%, #04080b 100%); --ad-accent: #8fc3d6; } .dfy-ad-creative--electrical { --ad-bg: linear-gradient(135deg, #2b2410 0%, #161208 60%, #080704 100%); --ad-accent: #f0d28e; } .dfy-ad-creative--auto { --ad-bg: linear-gradient(135deg, #2b1410 0%, #160a08 60%, #080403 100%); --ad-accent: #e8a18c; } .dfy-ad-creative--cleaning { --ad-bg: linear-gradient(135deg, #142028 0%, #0a1318 60%, #04080c 100%); --ad-accent: #b0d5e6; } .dfy-ad-creative--landscaping { --ad-bg: linear-gradient(135deg, #142214 0%, #0a130a 60%, #040805 100%); --ad-accent: #a8d5a8; } .dfy-ad-meta { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 14px; border-top: var(--hairline); background: rgba(0, 0, 0, 0.5); } .dfy-ad-brand { font-family: var(--sans); font-size: 11.5px; letter-spacing: -0.005em; color: var(--text); font-weight: 500; } .dfy-ad-fmt { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); } .dfy-gallery-foot { max-width: 64ch; margin: 12px auto 0; padding: 0 4px; text-align: center; } .dfy-gallery-credit { font-family: var(--sans); font-size: 13.5px; color: var(--muted); line-height: 1.55; font-style: italic; } /* ---------- You-vs-us split -------------------------------------- */ .dfy-split { max-width: var(--shell-max); margin: 0 auto clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); gap: 0; align-items: stretch; isolation: isolate; } .dfy-split-col { position: relative; padding: 28px 30px 30px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 60%), linear-gradient(180deg, var(--panel), var(--panel-2)); border: var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); min-height: 320px; } .dfy-split-col--you { background: radial-gradient(ellipse 70% 50% at 20% 30%, rgba(255, 255, 255, 0.025), transparent 70%), var(--bg-3); filter: saturate(0.7); } .dfy-split-col--us { background: radial-gradient(ellipse 70% 50% at 30% 20%, rgba(232, 201, 140, 0.05), transparent 70%), linear-gradient(180deg, var(--panel), var(--panel-2)); border-left: 2px solid rgba(232, 201, 140, 0.4); border-left-width: 2px; } .dfy-split-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: var(--hairline); } .dfy-split-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } .dfy-split-tag--us { color: var(--warm); } .dfy-split-count { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); } .dfy-split-count--us { color: var(--positive, #7dd4a4); font-weight: 600; } .dfy-split-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .dfy-split-list li { font-family: var(--sans); font-size: 15px; letter-spacing: -0.005em; line-height: 1.35; color: var(--muted); padding-left: 18px; position: relative; } .dfy-split-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: rgba(255, 255, 255, 0.18); } .dfy-split-list--us li { color: var(--text); } .dfy-split-list--us li::before { background: var(--signal); box-shadow: 0 0 6px rgba(232, 201, 140, 0.55); } .dfy-split-list li:last-child { color: var(--dim); font-style: italic; } .dfy-split-list--us li:last-child { color: var(--warm); font-style: normal; font-weight: 500; } /* Divider between you / us — vertical with arrow + "we handle" */ .dfy-split-divider { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; position: relative; } .dfy-split-divider::before, .dfy-split-divider::after { content: ""; width: 1px; flex: 1; background: linear-gradient(180deg, transparent 0%, rgba(232, 201, 140, 0.45) 50%, transparent 100%); } .dfy-split-divider-arrow { font-family: var(--sans); font-size: 24px; color: var(--signal); text-shadow: 0 0 14px rgba(232, 201, 140, 0.55); line-height: 1; } .dfy-split-divider-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--signal); white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 0; } /* ---------- Creative factory animation --------------------------- */ .dfy-factory { max-width: var(--content-ultra, 1450px); margin: 0 auto; padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3vw, 36px); background: radial-gradient(ellipse 60% 50% at 50% 20%, rgba(232, 201, 140, 0.05), transparent 70%), linear-gradient(180deg, var(--panel), var(--panel-2) 60%, var(--bg-3)); border: var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 32px 70px -26px rgba(0, 0, 0, 0.65); overflow: hidden; position: relative; } .dfy-factory-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: clamp(24px, 3vw, 32px); padding-bottom: 14px; border-bottom: var(--hairline); } .dfy-factory-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text); } .dfy-factory-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } .dfy-factory-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; min-height: 220px; position: relative; } /* ---------- 5-step process timeline ----------------------------- */ .dfy-steps { list-style: none; margin: 0; padding: clamp(24px, 3vw, 36px) 0 clamp(20px, 2.4vw, 28px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); position: relative; } /* Connecting line across the top — dashed by default, fills gold as the section enters viewport. */ .dfy-steps-line { position: absolute; top: clamp(54px, 6vw, 72px); left: 8%; right: 8%; height: 1px; background: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 4px, transparent 4px, transparent 9px ); pointer-events: none; z-index: 0; } .dfy-steps-line-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--signal), rgba(232, 201, 140, 0.45)); box-shadow: 0 0 10px rgba(232, 201, 140, 0.45); transition: width 2400ms cubic-bezier(0.16, 1, 0.3, 1) 320ms; } .dfy-factory.is-visible .dfy-steps-line-fill { width: 100%; } html.no-motion .dfy-steps-line-fill { width: 100%; transition: none; } .dfy-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; z-index: 1; opacity: 0; transform: translateY(10px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); transition-delay: calc(var(--step-d, 0) * 1ms); } .dfy-step[data-step-i="0"] { --step-d: 300; } .dfy-step[data-step-i="1"] { --step-d: 540; } .dfy-step[data-step-i="2"] { --step-d: 780; } .dfy-step[data-step-i="3"] { --step-d: 1020; } .dfy-step[data-step-i="4"] { --step-d: 1260; } .dfy-factory.is-visible .dfy-step { opacity: 1; transform: translateY(0); } .dfy-step-num { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: -0.012em; color: var(--warm); line-height: 1; } /* Node on the timeline line — small circle, gold border */ .dfy-step-node { position: relative; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(232, 201, 140, 0.5); background: var(--bg); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6); transition: border-color 460ms var(--ease-out), box-shadow 460ms var(--ease-out), transform 460ms var(--ease-out); transition-delay: calc(var(--step-d, 0) * 1ms); } .dfy-step-node-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); opacity: 0; transition: opacity 460ms var(--ease-out); transition-delay: calc(var(--step-d, 0) * 1ms + 200ms); } .dfy-factory.is-visible .dfy-step-node { border-color: var(--signal); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6), 0 0 14px rgba(232, 201, 140, 0.4); transform: scale(1.06); } .dfy-factory.is-visible .dfy-step-node-dot { opacity: 1; } /* Final step gets a green-accent node (semantic: "result") */ .dfy-step--final .dfy-step-node { border-color: rgba(125, 212, 164, 0.55); } .dfy-step--final .dfy-step-node-dot { background: var(--positive); box-shadow: 0 0 10px var(--positive); } .dfy-factory.is-visible .dfy-step--final .dfy-step-node { border-color: var(--positive); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6), 0 0 16px rgba(125, 212, 164, 0.55); } .dfy-step-body { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 220px; padding: 14px 14px 16px; border: var(--hairline); background: linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 60%), rgba(0, 0, 0, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); transition: border-color 360ms var(--ease-out), background 360ms var(--ease-out), transform 360ms var(--ease-out); } .dfy-step:hover .dfy-step-body { border-color: rgba(232, 201, 140, 0.35); background: linear-gradient(180deg, rgba(232, 201, 140, 0.03), transparent 60%), rgba(0, 0, 0, 0.4); transform: translateY(-2px); } .dfy-step--final:hover .dfy-step-body { border-color: rgba(125, 212, 164, 0.4); background: linear-gradient(180deg, rgba(125, 212, 164, 0.04), transparent 60%), rgba(0, 0, 0, 0.4); } .dfy-step-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--signal); margin-bottom: 4px; } .dfy-step-icon svg { width: 100%; height: 100%; } .dfy-step--final .dfy-step-icon { color: var(--positive); } .dfy-step-title { margin: 0; font-family: var(--sans); font-size: clamp(15px, 1.25vw, 17px); font-weight: 500; letter-spacing: -0.012em; color: var(--text); line-height: 1.2; } .dfy-step-desc { margin: 0; font-family: var(--sans); font-size: clamp(12.5px, 1vw, 13.5px); line-height: 1.5; color: var(--muted); letter-spacing: -0.005em; } .dfy-step-meta { margin-top: 4px; padding-top: 10px; width: 100%; border-top: var(--hairline); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); font-feature-settings: "tnum"; } .dfy-step-meta em { font-style: normal; color: var(--dim); letter-spacing: 0.16em; text-transform: uppercase; font-size: 9px; margin-right: 4px; } .dfy-step-meta--gain { color: var(--positive); } .dfy-step-meta--gain em { color: rgba(125, 212, 164, 0.55); } /* Responsive collapse */ @media (max-width: 1100px) { .dfy-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } .dfy-steps-line { display: none; } } @media (max-width: 640px) { .dfy-steps { grid-template-columns: 1fr; } .dfy-step-body { max-width: none; } } .dfy-factory-side { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; } .dfy-factory-inputs { align-items: flex-end; text-align: right; } .dfy-factory-outputs { align-items: flex-start; text-align: left; } .dfy-factory-side-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; } .dfy-factory-chip { display: inline-block; padding: 8px 14px; border: var(--hairline); background: rgba(0, 0, 0, 0.45); font-family: var(--sans); font-size: 12.5px; letter-spacing: -0.005em; color: var(--text); opacity: 0; transform: translateX(-12px); transition: opacity 540ms var(--ease-out), transform 540ms var(--ease-out), border-color 320ms var(--ease-out); } .dfy-factory-chip[data-chip="in-1"] { transition-delay: 200ms; } .dfy-factory-chip[data-chip="in-2"] { transition-delay: 380ms; } .dfy-factory-chip[data-chip="in-3"] { transition-delay: 560ms; } .dfy-factory-chip--out { opacity: 0; transform: translateX(12px); border-color: rgba(232, 201, 140, 0.45); background: rgba(232, 201, 140, 0.05); color: var(--warm); } .dfy-factory-chip--out[data-chip="out-1"] { transition-delay: 1100ms; } .dfy-factory-chip--out[data-chip="out-2"] { transition-delay: 1300ms; } .dfy-factory-chip--out[data-chip="out-3"] { transition-delay: 1500ms; } .dfy-factory.is-visible .dfy-factory-chip { opacity: 1; transform: translateX(0); } /* Center core — Adrective orb representing the creative team. */ .dfy-factory-core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; } .dfy-factory-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .dfy-factory-orb-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; } .dfy-factory-orb-frame { position: relative; width: 96px; height: 96px; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 60%), var(--panel); border: var(--hairline); } .dfy-factory-orb-corner { position: absolute; width: 9px; height: 9px; border: 1px solid var(--signal); opacity: 0.85; } .dfy-factory-orb-corner--tl { top: 5px; left: 5px; border-right: 0; border-bottom: 0; } .dfy-factory-orb-corner--tr { top: 5px; right: 5px; border-left: 0; border-bottom: 0; } .dfy-factory-orb-corner--bl { bottom: 5px; left: 5px; border-right: 0; border-top: 0; } .dfy-factory-orb-corner--br { bottom: 5px; right: 5px;border-left: 0; border-top: 0; } .dfy-factory-orb-glow { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.9), rgba(232, 201, 140, 0.55) 30%, rgba(0, 0, 0, 0.95) 72%); box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1), inset 0 0 40px rgba(0, 0, 0, 0.85), 0 0 40px rgba(232, 201, 140, 0.25); filter: blur(0.3px); animation: orbBreath 7.5s var(--ease-in-out) infinite; } .dfy-factory-orb-core { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--white); box-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 24px rgba(232, 201, 140, 0.5); transform: translate(-24%, -20%); animation: orbDrift 9s var(--ease-in-out) infinite; } html.no-motion .dfy-factory-orb-glow, html.no-motion .dfy-factory-orb-core { animation: none; } .dfy-factory-orb-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .dfy-factory-foot { margin-top: clamp(20px, 2.4vw, 28px); padding-top: 14px; border-top: var(--hairline); text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* ---------- Responsive ------------------------------------------- */ @media (max-width: 980px) { .dfy-split { grid-template-columns: 1fr; gap: 14px; } .dfy-split-divider { flex-direction: row; padding: 0; justify-content: center; } .dfy-split-divider::before, .dfy-split-divider::after { width: auto; height: 1px; flex: 0 1 80px; background: linear-gradient(90deg, transparent, rgba(232, 201, 140, 0.45) 50%, transparent); } .dfy-split-divider-label { writing-mode: horizontal-tb; transform: none; padding: 4px 12px; } .dfy-factory-flow { grid-template-columns: 1fr; gap: 24px; } .dfy-factory-inputs, .dfy-factory-outputs { align-items: center; text-align: center; } } @media (max-width: 640px) { .dfy-ad { width: 220px; } .dfy-ad-creative-headline { font-size: 18px; } .dfy-ad-creative-accent { font-size: 15px; } .dfy-split-col { padding: 22px 20px; } .dfy-split-list li { font-size: 13.5px; } } /* ============================================================================= FAQ — accordion. Sits right before the apply form to handle the last objection wave. One item open at a time. Smooth height tween via the grid-template-rows 0fr → 1fr trick (no JS measurement needed). ========================================================================== */ .faq { background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 60%), var(--bg-2); padding-left: calc(var(--side-rail) + var(--gutter)); } .faq-head { max-width: var(--shell-max); margin: 0 auto clamp(40px, 5vw, 64px); } .faq-head h2 { margin: 14px 0 18px 0; } .faq-sub { margin: 0; font-family: var(--sans); font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.55; color: var(--muted); max-width: 60ch; } .faq-list { list-style: none; margin: 0 auto; padding: 0; max-width: var(--shell-max); border-top: var(--hairline); } .faq-item { border-bottom: var(--hairline); position: relative; isolation: isolate; transition: background 320ms var(--ease-out); } .faq-item:hover { background: rgba(255, 255, 255, 0.014); } .faq-item.is-open { background: linear-gradient(180deg, rgba(232, 201, 140, 0.025), transparent 60%), rgba(0, 0, 0, 0.18); } /* Trigger button (the question row) */ .faq-trigger { width: 100%; display: grid; grid-template-columns: 56px 1fr 36px; align-items: center; gap: clamp(14px, 1.4vw, 20px); padding: clamp(20px, 2.4vw, 28px) clamp(8px, 1vw, 16px) clamp(20px, 2.4vw, 28px) clamp(8px, 1vw, 16px); background: transparent; border: 0; cursor: pointer; font-family: var(--sans); text-align: left; color: var(--text); transition: color 320ms var(--ease-out); } .faq-trigger:hover { color: var(--white); } .faq-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(232, 201, 140, 0.45); } .faq-q-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); transition: color 320ms var(--ease-out); } .faq-item.is-open .faq-q-num { color: var(--signal); } .faq-q { font-family: var(--sans); font-size: clamp(17px, 1.55vw, 22px); letter-spacing: -0.014em; line-height: 1.25; font-weight: 400; color: var(--text); } .faq-item.is-open .faq-q { color: var(--warm); } /* Plus / minus toggle — two crossed bars that rotate to form X/+ */ .faq-toggle { width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, 0.18); display: inline-grid; place-items: center; position: relative; flex-shrink: 0; justify-self: end; transition: border-color 360ms var(--ease-out), background 360ms var(--ease-out), transform 460ms cubic-bezier(0.16, 1, 0.3, 1); } .faq-toggle-bar { position: absolute; background: var(--text); transition: background 360ms var(--ease-out), transform 460ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms var(--ease-out); } .faq-toggle-bar--h { width: 12px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .faq-toggle-bar--v { width: 1.5px; height: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .faq-item.is-open .faq-toggle { border-color: var(--signal); background: rgba(232, 201, 140, 0.08); transform: rotate(45deg); } .faq-item.is-open .faq-toggle-bar { background: var(--signal); } /* Answer container — grid 0fr → 1fr trick for smooth height tween */ .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 460ms cubic-bezier(0.16, 1, 0.3, 1), opacity 340ms var(--ease-out); opacity: 0; } .faq-answer-inner { overflow: hidden; min-height: 0; } .faq-item.is-open .faq-answer { grid-template-rows: 1fr; opacity: 1; } .faq-answer-inner > * { padding: 0 36px clamp(20px, 2.2vw, 28px) clamp(64px, 5vw, 76px); margin: 0; } .faq-answer-inner > * + * { padding-top: 10px; } .faq-answer p { font-family: var(--sans); font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.65; color: var(--muted); max-width: 78ch; } .faq-answer p strong { color: var(--text); font-weight: 500; } .faq-answer p em { font-style: italic; color: var(--warm); } /* Special pricing pill inside the answer */ .faq-price { display: inline-block; padding: 3px 10px; margin: 0 2px; font-family: var(--mono); font-size: 0.92em; color: var(--positive, #7dd4a4); border: 1px solid rgba(125, 212, 164, 0.4); background: rgba(125, 212, 164, 0.06); letter-spacing: -0.005em; font-feature-settings: "tnum"; white-space: nowrap; } /* Footer line under all questions */ .faq-foot { max-width: var(--shell-max); margin: clamp(32px, 4vw, 48px) auto 0; text-align: center; } .faq-foot-line { display: inline-block; padding: 14px 24px; border: var(--hairline); background: rgba(0, 0, 0, 0.32); font-family: var(--sans); font-size: 14.5px; letter-spacing: -0.005em; color: var(--muted); } .faq-foot-line a { color: var(--warm); text-decoration: none; border-bottom: 1px solid rgba(232, 201, 140, 0.4); transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out); } .faq-foot-line a:hover { color: var(--white); border-bottom-color: var(--white); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .faq-answer { transition: opacity 200ms ease; } .faq-toggle { transition: none; } .faq-toggle-bar { transition: none; } } @media (max-width: 640px) { .faq-trigger { grid-template-columns: 40px 1fr 28px; gap: 12px; padding: 16px 4px; } .faq-q-num { font-size: 10px; } .faq-q { font-size: 16px; } .faq-toggle { width: 24px; height: 24px; } .faq-answer-inner > * { padding: 0 12px 18px 52px; } } /* ============================================================================= ANNOUNCEMENT BAR — current offer, top of page, above header Tall, attention-grabbing. Slow continuous shimmer sweeps across; pulsing green dot; oversized price; bright filled CTA. Stays cinematic — no neon. ========================================================================== */ .announce-bar { position: relative; z-index: 50; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(125, 212, 164, 0.08), transparent 70%), linear-gradient(180deg, rgba(125, 212, 164, 0.05), transparent 60%), rgba(6, 6, 8, 0.96); border-top: 1px solid rgba(125, 212, 164, 0.45); border-bottom: 1px solid rgba(125, 212, 164, 0.5); box-shadow: inset 0 1px 0 rgba(168, 237, 196, 0.18), 0 0 32px rgba(125, 212, 164, 0.12), 0 8px 28px -10px rgba(0, 0, 0, 0.6); } /* Sweeping shimmer — slow gold/green highlight sliding left→right */ .announce-shimmer { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient( 100deg, transparent 0%, transparent 30%, rgba(168, 237, 196, 0.10) 45%, rgba(232, 201, 140, 0.14) 50%, rgba(168, 237, 196, 0.10) 55%, transparent 70%, transparent 100% ); background-size: 200% 100%; background-position: -50% 0; animation: announce-sweep 5.6s linear infinite; mix-blend-mode: screen; } @keyframes announce-sweep { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } } html.no-motion .announce-shimmer { animation: none; opacity: 0.25; } .announce-bar-inner { position: relative; z-index: 1; max-width: var(--content-ultra, 1450px); margin: 0 auto; padding: 16px clamp(18px, 3vw, 36px); display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); } /* Tag pill — "Limited offer · this month" */ .announce-tag { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid rgba(125, 212, 164, 0.6); background: rgba(125, 212, 164, 0.10); color: var(--positive-bright); font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; white-space: nowrap; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(168, 237, 196, 0.18), 0 0 16px rgba(125, 212, 164, 0.22); } .announce-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--positive-bright); box-shadow: 0 0 12px var(--positive-bright); animation: announce-dot-pulse 1.4s var(--ease-in-out) infinite; } @keyframes announce-dot-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(168, 237, 196, 0.6); transform: scale(1); } 50% { box-shadow: 0 0 20px rgba(168, 237, 196, 1); transform: scale(1.3); } } html.no-motion .announce-pulse { animation: none; } /* Message block — price gets visual hierarchy */ .announce-msg { flex: 1; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; font-family: var(--sans); font-size: clamp(13.5px, 1.1vw, 15.5px); color: var(--text); letter-spacing: -0.005em; line-height: 1.35; } /* Oversized price — the star of the bar */ .announce-price { display: inline-flex; align-items: baseline; gap: 6px; margin: 0 4px; } .announce-price-cur { font-family: var(--mono); font-size: clamp(15px, 1.3vw, 18px); color: var(--positive); font-feature-settings: "tnum"; } .announce-price-num { font-family: var(--mono); font-size: clamp(22px, 1.95vw, 28px); font-weight: 500; letter-spacing: -0.015em; color: var(--positive-bright); font-feature-settings: "tnum"; text-shadow: 0 0 18px rgba(168, 237, 196, 0.55), 0 0 36px rgba(125, 212, 164, 0.3); } .announce-price-mod { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--positive); padding: 2px 7px; border: 1px solid rgba(125, 212, 164, 0.45); background: rgba(125, 212, 164, 0.06); align-self: center; margin-left: 4px; } /* Supporting points after the price */ .announce-points { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 10px; font-family: var(--sans); font-size: clamp(12px, 1vw, 13.5px); color: var(--muted); } .announce-point { white-space: nowrap; } .announce-point--italic { font-family: var(--serif); font-style: italic; color: var(--warm); font-size: 1.02em; } .announce-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--dim); margin: 0 4px; } /* CTA — pure bright fill, the loudest element on the page */ .announce-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: linear-gradient(180deg, #b9f0cf 0%, #7dd4a4 100%); color: #001a09; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em; font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid #b9f0cf; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0 28px rgba(168, 237, 196, 0.7), 0 0 56px rgba(125, 212, 164, 0.35), 0 6px 16px -4px rgba(0, 0, 0, 0.55); transition: background 240ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 240ms var(--ease-out); } .announce-cta:hover { background: linear-gradient(180deg, #d8f7e3 0%, #a8edc4 100%); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0 40px rgba(168, 237, 196, 0.95), 0 0 80px rgba(125, 212, 164, 0.5), 0 10px 22px -6px rgba(0, 0, 0, 0.7); } .announce-cta-arrow { font-size: 16px; line-height: 1; transition: transform 240ms var(--ease-out); } .announce-cta:hover .announce-cta-arrow { transform: translateX(3px); } /* Responsive */ @media (max-width: 1100px) { .announce-points .announce-point--italic { display: none; } .announce-points .announce-dot:last-of-type { display: none; } } @media (max-width: 860px) { .announce-bar-inner { flex-wrap: wrap; padding: 12px 16px; gap: 10px 14px; } .announce-msg { flex-basis: 100%; order: 2; gap: 4px 10px; } .announce-points { flex-basis: 100%; } .announce-cta { order: 3; } .announce-tag { order: 1; } } @media (max-width: 560px) { .announce-price-num { font-size: 22px; } .announce-cta { padding: 10px 14px; font-size: 12px; } .announce-msg { font-size: 12.5px; } } /* Audit CTA pricing-clarification line — sits between the audit promise and the apply button so the prospect knows the offer is à la carte. */ .audit-pricing-note { margin: 20px 0 22px; padding: 14px 16px; border: var(--hairline); border-left: 2px solid rgba(125, 212, 164, 0.45); background: rgba(0, 0, 0, 0.32); font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--muted); letter-spacing: -0.005em; max-width: 56ch; } .audit-pricing-note em { font-style: normal; color: var(--positive); font-family: var(--mono); font-size: 12.5px; font-feature-settings: "tnum"; } .audit-pricing-key { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--positive); } /* ============================================================================= LEGAL PAGE — privacy policy and similar reference documents. Same dark brand atmosphere as the main site, but stripped of the heavy chrome (no curtain, side rail, custom cursor, demo animations). Optimized for long-form readability with a clean type rhythm and a sticky-feel TOC. ========================================================================== */ .legal-page { min-height: 100dvh; } .legal-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: clamp(16px, 2vw, 24px) clamp(20px, 4vw, 56px); border-bottom: var(--hairline); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .legal-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: var(--hairline); background: rgba(0, 0, 0, 0.4); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out); } .legal-back:hover { color: var(--text); border-color: rgba(232, 201, 140, 0.45); } .legal-back-arrow { font-size: 14px; color: var(--signal); transition: transform 280ms var(--ease-out); } .legal-back:hover .legal-back-arrow { transform: translateX(-3px); } .legal-main { position: relative; z-index: 2; padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 48px) clamp(80px, 10vw, 140px); } .legal-article { max-width: 880px; margin: 0 auto; } /* Head / title block */ .legal-head { margin-bottom: clamp(48px, 6vw, 72px); padding-bottom: clamp(36px, 5vw, 56px); border-bottom: var(--hairline); } .legal-title { margin: 16px 0 28px 0; font-family: var(--sans); font-weight: 300; font-size: clamp(40px, 5.6vw, 72px); letter-spacing: -0.02em; line-height: 1.04; color: var(--text); } .legal-title-italic { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--warm); letter-spacing: -0.012em; margin-top: 4px; } .legal-meta { display: flex; flex-direction: column; gap: 6px; margin: 0 0 32px 0; padding: 16px 18px; border: var(--hairline); background: rgba(0, 0, 0, 0.32); border-left: 2px solid var(--signal); } .legal-meta-row { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); display: inline-flex; align-items: baseline; gap: 10px; } .legal-meta-key { color: var(--dim); letter-spacing: 0.22em; text-transform: uppercase; font-size: 9.5px; font-weight: 600; min-width: 80px; } .legal-meta-row em { font-style: normal; color: var(--text); } .legal-intro { font-family: var(--sans); font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.6; color: var(--muted); max-width: 64ch; margin: 0; } .legal-intro a, .legal-section a, .legal-closer a { color: var(--warm); text-decoration: none; border-bottom: 1px solid rgba(232, 201, 140, 0.35); transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out); } .legal-intro a:hover, .legal-section a:hover, .legal-closer a:hover { color: var(--white); border-bottom-color: var(--white); } /* Table of contents */ .legal-toc { margin: 0 0 clamp(56px, 7vw, 88px) 0; padding: 22px 24px 26px; border: var(--hairline); background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 60%), rgba(0, 0, 0, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .legal-toc-label { display: block; margin-bottom: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--signal); } .legal-toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 24px; counter-reset: toc; } .legal-toc-list li { counter-increment: toc; } .legal-toc-list a { display: inline-flex; align-items: baseline; gap: 10px; padding: 4px 0; font-family: var(--sans); font-size: 14px; color: var(--muted); text-decoration: none; border: 0; letter-spacing: -0.005em; transition: color 240ms var(--ease-out); } .legal-toc-list a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--dim); min-width: 22px; } .legal-toc-list a:hover { color: var(--text); } .legal-toc-list a:hover::before { color: var(--signal); } /* Section blocks */ .legal-section { margin: 0 0 clamp(48px, 5vw, 64px) 0; scroll-margin-top: 100px; } .legal-section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: var(--hairline); } .legal-section-num { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); color: var(--warm); letter-spacing: -0.012em; line-height: 1; flex-shrink: 0; } .legal-section h2 { margin: 0; font-family: var(--sans); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.014em; line-height: 1.18; color: var(--text); } .legal-section h3, .legal-h3 { margin: clamp(20px, 2.4vw, 28px) 0 10px; font-family: var(--sans); font-weight: 500; font-size: clamp(15px, 1.25vw, 17px); letter-spacing: -0.005em; color: var(--warm); } .legal-section p { margin: 0 0 14px 0; font-family: var(--sans); font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.7; color: var(--muted); max-width: 72ch; } .legal-section p strong { color: var(--text); font-weight: 500; } .legal-section p em { font-style: italic; color: var(--warm); } /* Lists */ .legal-list { list-style: none; margin: 0 0 18px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .legal-list li { position: relative; padding-left: 22px; font-family: var(--sans); font-size: clamp(14px, 1.1vw, 15.5px); line-height: 1.6; color: var(--muted); max-width: 72ch; } .legal-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--signal); opacity: 0.7; } .legal-list li strong { color: var(--text); font-weight: 500; } .legal-list li em { font-style: italic; color: var(--warm); } /* Retention table */ .legal-table-wrap { margin: 0 0 18px 0; border: var(--hairline); background: rgba(0, 0, 0, 0.32); overflow-x: auto; } .legal-table { width: 100%; border-collapse: collapse; } .legal-table th, .legal-table td { text-align: left; padding: 12px 18px; font-family: var(--sans); font-size: 14px; line-height: 1.5; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .legal-table th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal); background: rgba(232, 201, 140, 0.04); font-weight: 600; } .legal-table td { color: var(--text); } .legal-table tr:last-child td { border-bottom: 0; } .legal-table tbody tr:hover { background: rgba(255, 255, 255, 0.018); } /* Contact block */ .legal-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 18px 0; } .legal-contact-block { padding: 16px 18px; border: var(--hairline); background: rgba(0, 0, 0, 0.32); display: flex; flex-direction: column; gap: 6px; } .legal-contact-key { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } .legal-contact-block a { color: var(--warm); text-decoration: none; border-bottom: 1px solid rgba(232, 201, 140, 0.35); transition: color 240ms var(--ease-out); font-family: var(--mono); font-size: 13px; } .legal-contact-block a:hover { color: var(--white); border-bottom-color: var(--white); } .legal-contact-block span { font-family: var(--sans); font-size: 14px; color: var(--text); line-height: 1.4; } .legal-closer { margin-top: clamp(24px, 3vw, 32px) !important; padding-top: clamp(20px, 2.4vw, 28px); border-top: var(--hairline); font-family: var(--sans); font-size: clamp(15px, 1.2vw, 16.5px); color: var(--text); font-weight: 400; } .legal-closer .serif { font-family: var(--serif); font-style: italic; color: var(--warm); } /* Mobile */ @media (max-width: 640px) { .legal-header { flex-direction: row; flex-wrap: wrap; gap: 10px; } .legal-back { font-size: 9.5px; padding: 6px 10px; } .legal-meta-row { flex-direction: column; gap: 2px; } .legal-meta-key { min-width: 0; } .legal-toc-list { grid-template-columns: 1fr; } .legal-table th, .legal-table td { padding: 10px 12px; font-size: 12.5px; } .legal-table th { font-size: 9px; letter-spacing: 0.18em; } }