/* ===================================================================== VistleTech — "instrument in the dark" Dark premium landing. Warm espresso canvas, one amber signal, one cool teal data-accent. Built vanilla; no framework. ===================================================================== */ /* ----- Fonts -------------------------------------------------------- */ /* Clash Display + General Sans via Fontshare, Geist Mono via Google. Links are in with preconnect; @font-face handled by those CSS. */ /* ----- Tokens ------------------------------------------------------- */ :root { /* Canvas + surfaces (warm near-black; the surface IS the brand) */ --void: oklch(0.118 0.009 52); --bg: oklch(0.155 0.012 54); --surface: oklch(0.196 0.014 56); --surface-2: oklch(0.236 0.016 58); --surface-3: oklch(0.282 0.018 60); /* Typographic controls */ --body-weight: 400; --body-lh: 1.6; /* Motion speeds */ --dur-hover: 250ms; --dur-active: 100ms; --ease-decel: cubic-bezier(0.25, 1, 0.5, 1); /* Hairlines + highlights (warm-tinted, never pure gray) */ --line: oklch(1 0 0 / 0.09); --line-strong: oklch(1 0 0 / 0.16); --inner-light: oklch(1 0 0 / 0.14); /* Ink */ --text: oklch(0.965 0.012 78); --text-muted: oklch(0.79 0.018 72); --text-dim: oklch(0.66 0.02 68); /* Amber signal — the single brand-carrying color */ --signal: oklch(0.79 0.155 64); --signal-bright: oklch(0.85 0.15 72); --signal-deep: oklch(0.62 0.16 48); --signal-glow: oklch(0.79 0.155 64 / 0.5); --signal-wash: oklch(0.79 0.155 64 / 0.12); /* Teal data-accent — readouts only, used sparingly */ --data: oklch(0.82 0.1 196); --data-deep: oklch(0.66 0.1 200); /* Status */ --ok: oklch(0.82 0.13 158); --warn: oklch(0.83 0.14 78); --bad: oklch(0.72 0.17 28); /* Type */ --font-display: "Clash Display", "General Sans", system-ui, sans-serif; --font-body: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; /* Radii */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* Depth — soft, diffused, warm; never harsh black drop-shadows */ --shadow-soft: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 30px 60px -28px oklch(0.06 0.02 50 / 0.9); --shadow-lift: 0 1px 0 oklch(1 0 0 / 0.08) inset, 0 40px 90px -30px oklch(0.04 0.02 50 / 0.95); --shadow-signal: 0 0 0 1px var(--signal-wash), 0 24px 60px -24px var(--signal-glow); --shadow-data: 0 0 0 1px oklch(0.82 0.1 196 / 0.12), 0 24px 60px -26px oklch(0.66 0.1 200 / 0.45); /* Motion */ --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-soft: cubic-bezier(0.32, 0.72, 0, 1); /* Layout */ --max: 1200px; --wide: 1360px; --gutter: clamp(1.25rem, 4vw, 3rem); /* z-index scale (semantic, never arbitrary) */ --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-grain: 400; --z-cursor: 500; color-scheme: dark; } /* ----- Reset -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100dvh; background: radial-gradient(120% 80% at 88% -10%, var(--signal-wash), transparent 55%), radial-gradient(90% 70% at -10% 0%, oklch(0.82 0.1 196 / 0.06), transparent 60%), var(--bg); color: var(--text); font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); font-weight: var(--body-weight, 400); line-height: var(--body-lh, 1.6); letter-spacing: 0.002em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; cursor: pointer; } button { font: inherit; color: inherit; cursor: pointer; } ::selection { background: var(--signal); color: oklch(0.16 0.012 54); } /* ----- Scrollbars --------------------------------------------------- */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--surface-3) var(--bg); } /* WebKit / Blink (Chrome, Edge, Safari) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; transition: background 0.25s; } ::-webkit-scrollbar-thumb:hover { background: var(--signal); } ::-webkit-scrollbar-corner { background: var(--bg); } /* Background grid */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px, 48px 48px; pointer-events: none; opacity: 0.65; } /* Film grain — fixed, GPU-safe, barely there */ body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ----- A11y helpers ------------------------------------------------- */ .skip-link { position: fixed; top: 1rem; left: 1rem; z-index: var(--z-overlay); padding: 0.75rem 1.1rem; border-radius: var(--r-pill); background: var(--signal); color: oklch(0.16 0.012 54); font-weight: 600; transform: translateY(-180%); transition: transform 0.3s var(--ease-expo); } .skip-link:focus { transform: translateY(0); } :focus-visible { outline: 2px solid var(--signal-bright); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ----- Shared layout ----------------------------------------------- */ .shell { width: min(100% - calc(var(--gutter) * 2), var(--max)); margin-inline: auto; } main > section { position: relative; padding-block: clamp(5rem, 11vh, 9.5rem); scroll-margin-top: clamp(6rem, 12vh, 8.5rem); } @supports (content-visibility: auto) { main > section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 1000px; } .proof { contain-intrinsic-size: auto 650px; } .contact { contain-intrinsic-size: auto 1250px; } } .bezel-core, .panel, .ba-frame, .dm-h-container, .faqtp-panel, .ops-desk-core { contain: layout style; } .instrument, .ops-desk-bezel, .ba-frame, .dm-h-container, .faqtp-panel, .country-dropdown, .form-success { backface-visibility: hidden; transform: translateZ(0); } .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; } /* Section lead block */ .lead-block { max-width: 100%; } .lead-block h2 { margin: 0.6rem 0 0; max-width: 26ch; } .lead-block p { margin: 1rem 0 0; color: var(--text-muted); text-wrap: pretty; max-width: 46ch; } /* Signals section header split (asymmetric layout) */ .signals .lead-block { max-width: 100%; } .signals .v1-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.1em; display: block; margin-bottom: 0.75rem; } .signals .v1-title { font-family: var(--font-display); font-size: clamp(2.0rem, calc(2.8 * 1.2vw + 1rem), 4.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: var(--text); margin: 0; } .signals .v1-highlight { color: var(--data); text-shadow: 0 0 16px var(--data); transition: text-shadow 0.3s ease; } .signals .v1-right-col { display: flex; flex-direction: column; gap: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; } .signals .v1-telemetry { display: flex; flex-wrap: wrap; gap: 1rem; font-family: var(--font-mono); font-size: 0.68rem; } .signals .v1-telemetry-row { display: flex; gap: 0.4rem; background: var(--surface); padding: 0.25rem 0.6rem; border-radius: var(--r-sm); border: 1px solid var(--line); } .signals .v1-label { color: var(--text-dim); } .signals .v1-val { color: var(--text); font-weight: 600; } .signals .v1-val.val-green { color: var(--ok); } .signals .v1-desc { margin: 0; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6; color: var(--text-dim); max-width: 45ch; } .signals .v2-signals-native { width: 100%; max-width: 100%; } .signals .v2-signals-native .v1-title { max-width: 13.5ch; font-size: clamp(2.4rem, 1.25rem + 3.9vw, 4.85rem); line-height: 0.98; letter-spacing: 0; } .signals .v2-signals-native .v2-native-mark { color: var(--signal); } .signals .v2-signals-native .v1-right-col { justify-content: end; } .signals .v2-signals-native .v1-telemetry-row { min-height: 32px; align-items: center; } .signals .v2-signals-native .v1-desc { max-width: 43ch; } @media (min-width: 900px) { .signals .lead-block { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: flex-end; } .signals .v1-right-col { border-top: none; border-left: 1px solid var(--line); padding-top: 0; padding-left: clamp(1.5rem, 3vw, 3rem); } } @media (max-width: 900px) { .signals .v2-signals-native { display: block; } .signals .v2-signals-native .v1-title { max-width: 12ch; } .signals .v2-signals-native .v1-right-col { margin-top: 1.5rem; } } /* A single, deliberate section signature (NOT a per-section eyebrow: it carries a live status reading, used only on major section heads) */ .section-sig { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .section-sig::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-wash); } /* ----- Typography --------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: 0; text-wrap: balance; margin: 0; } h1 { font-size: clamp(3rem, 1.7rem + 5vw, 5.45rem); font-weight: 600; } h2 { font-size: clamp(2.15rem, 1.35rem + 3vw, 3.75rem); } h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); letter-spacing: 0; } p, li, .v2-content { text-wrap: pretty; } .accent-brand { color: var(--signal-fg) !important; } .accent-data { color: var(--data-fg) !important; } .gauge-num b, .dm-h-dial-val, .workspace-header .lead-score b, .mono { font-variant-numeric: tabular-nums; } /* ----- Buttons ------------------------------------------------------ */ .btn { --btn-bg: var(--surface-2); --btn-fg: var(--text); position: relative; display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.95rem 0.85rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em; white-space: nowrap; /* Snappy exit transitions */ transition: transform 150ms var(--ease-decel), background 150ms var(--ease-decel), border-color 150ms var(--ease-decel), box-shadow 150ms var(--ease-decel); will-change: transform; } .btn:hover { /* Smoother enter transitions */ transition: transform 250ms var(--ease-decel), background 250ms var(--ease-decel), border-color 250ms var(--ease-decel), box-shadow 250ms var(--ease-decel); } .btn:active { transform: scale(0.96); transition: transform var(--dur-active) var(--ease-decel); } /* Button-in-button trailing icon */ .btn .btn-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: oklch(1 0 0 / 0.08); transition: transform 0.5s var(--ease-soft), background 0.4s var(--ease-quart); } .btn .btn-ico svg { width: 15px; height: 15px; transition: transform 0.5s var(--ease-soft); } .btn:hover .btn-ico { background: oklch(1 0 0 / 0.16); } .btn:hover .btn-ico svg { transform: translate(2px, -2px); } .btn-primary { --btn-bg: var(--signal); --btn-fg: oklch(0.17 0.02 52); border-color: transparent; box-shadow: var(--shadow-signal); } .btn-primary .btn-ico { background: oklch(0.17 0.02 52 / 0.16); } .btn-primary:hover { --btn-bg: var(--signal-bright); box-shadow: 0 0 0 1px var(--signal-wash), 0 26px 70px -22px var(--signal-glow); } .btn-primary:hover .btn-ico { background: oklch(0.17 0.02 52 / 0.26); } .btn-ghost { --btn-bg: transparent; padding-inline: 1.4rem; } .btn-ghost:hover { background: var(--surface); border-color: var(--line-strong); } /* ----- Header / floating island nav -------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); display: block; } .nav-fullwidth { width: calc(100% - 2.5rem); max-width: 1800px; margin: 1rem auto 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--nav-bg); backdrop-filter: blur(18px) saturate(1.3); padding: 0.5rem 1.25rem; display: flex; justify-content: center; box-shadow: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 10px 25px -8px oklch(0.06 0.02 50 / 0.75); pointer-events: auto; transition: width 0.3s var(--ease-soft), margin 0.3s var(--ease-soft), padding 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft), border-radius 0.3s var(--ease-soft), backdrop-filter 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft); } .site-header[data-scrolled="true"] .nav-fullwidth { margin-top: 0.6rem; background: var(--nav-bg-scrolled); border-color: var(--line-strong); box-shadow: 0 1px 0 oklch(1 0 0 / 0.08) inset, 0 16px 35px -18px oklch(0.03 0.02 50 / 0.9); } .nav-fullwidth .nav-container { width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-fullwidth .nav-actions { display: flex; align-items: center; gap: 1rem; } .nav-fullwidth .brand { margin-right: 0; } .brand { display: inline-flex; align-items: center; gap: 0.65rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin-right: auto; } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, var(--signal-bright), var(--signal-deep)); color: oklch(0.18 0.02 52); font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; letter-spacing: -0.02em; box-shadow: 0 0 0 1px oklch(1 0 0 / 0.12) inset, 0 8px 20px -8px var(--signal-glow); } .nav-links { display: flex; align-items: center; gap: clamp(0.2rem, 1.2vw, 1.2rem); } .nav-links a { position: relative; padding: 0.45rem 0.85rem; font-size: 0.94rem; color: var(--text-muted); border-radius: var(--r-pill); transition: color 0.22s var(--ease-expo), transform 0.22s var(--ease-expo); display: inline-flex; align-items: center; } /* Premium capsule backdrop reveal on hover */ .nav-links a::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-pill); background: oklch(0.79 0.155 64 / 0.06); /* subtle amber wash */ border: 1px solid oklch(0.79 0.155 64 / 0.12); opacity: 0; transform: scale(0.9); transition: opacity 0.22s var(--ease-expo), transform 0.22s var(--ease-expo); z-index: -1; } /* Accent dot indicator on hover */ .nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 0.25rem; width: 3px; height: 3px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 6px var(--signal-glow); transform: translateX(-50%) scale(0); transition: transform 0.22s var(--ease-expo); } .nav-links a:hover { color: var(--signal-bright); transform: translateY(-1px); } .nav-links a:hover::before { opacity: 1; transform: scale(1); } .nav-links a:hover::after { transform: translateX(-50%) scale(1); } .nav-cta { margin-left: clamp(0.4rem, 1.5vw, 1rem); } /* Hamburger */ .nav-toggle { display: none; position: relative; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); } .nav-toggle span { position: absolute; left: 50%; top: 50%; width: 17px; height: 1.6px; background: var(--text); border-radius: 2px; transition: transform 0.45s var(--ease-soft), opacity 0.3s var(--ease-quart); } .nav-toggle span:nth-child(1) { transform: translate(-50%, -5px); } .nav-toggle span:nth-child(2) { transform: translate(-50%, 0); } .nav-toggle span:nth-child(3) { transform: translate(-50%, 5px); } body[data-menu="open"] .nav-toggle span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); } body[data-menu="open"] .nav-toggle span:nth-child(2) { opacity: 0; } body[data-menu="open"] .nav-toggle span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); } /* Mobile menu overlay */ .nav-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; flex-direction: column; justify-content: center; gap: 0.25rem; padding: var(--gutter); background: oklch(0.118 0.01 52 / 0.92); backdrop-filter: blur(26px); opacity: 0; transition: opacity 0.4s var(--ease-quart); } .nav-overlay a { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 600; letter-spacing: -0.02em; padding: 0.4rem 0; color: var(--text); opacity: 0; transform: translateY(24px); } .nav-overlay .overlay-foot { margin-top: 2rem; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-dim); } body[data-menu="open"] .nav-overlay { display: flex; opacity: 1; } body[data-menu="open"] .nav-overlay a { animation: menuItemIn 0.6s var(--ease-expo) forwards; } body[data-menu="open"] .nav-overlay a:nth-child(1) { animation-delay: 0.06s; } body[data-menu="open"] .nav-overlay a:nth-child(2) { animation-delay: 0.12s; } body[data-menu="open"] .nav-overlay a:nth-child(3) { animation-delay: 0.18s; } body[data-menu="open"] .nav-overlay a:nth-child(4) { animation-delay: 0.24s; } body[data-menu="open"] .nav-overlay a:nth-child(5) { animation-delay: 0.30s; } @keyframes menuItemIn { to { opacity: 1; transform: translateY(0); } } /* ----- Hero --------------------------------------------------------- */ .hero { width: min(100% - calc(var(--gutter) * 2), var(--wide)); padding-top: clamp(7.4rem, 15vh, 10.75rem); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero-copy { max-width: none; } .hero-status { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.85rem 0.4rem 0.65rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--text-muted); } .hero-status .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2.4s var(--ease-quart) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 oklch(0.82 0.13 158 / 0.5); } 70% { box-shadow: 0 0 0 9px oklch(0.82 0.13 158 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.82 0.13 158 / 0); } } .hero h1 { margin-top: 1.5rem; max-width: 12ch; } .hero h1 .accent { color: var(--signal); filter: drop-shadow(0 14px 34px var(--signal-glow)); } .hero-lede { margin-top: 1.5rem; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--text-muted); max-width: 42ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; } .hero-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line); overflow: hidden; box-shadow: var(--shadow-soft); } .hero-ledger span { min-height: 112px; padding: 1rem; background: linear-gradient(180deg, oklch(1 0 0 / 0.035), transparent), var(--surface); color: var(--text-dim); font-size: 0.84rem; line-height: 1.45; } .hero-ledger b { display: block; margin-bottom: 0.35rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--data); } .hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-top: 2.4rem; font-size: 0.9rem; color: var(--text-dim); } .hero-trust strong { color: var(--text); font-weight: 600; } .hero-trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-dim); } /* ----- Double-bezel container (machined hardware) ------------------- */ .bezel { padding: 7px; border: 1px solid var(--line); border-radius: var(--r-xl); background: oklch(1 0 0 / 0.025); box-shadow: var(--shadow-lift); } .bezel-core { border: 1px solid var(--line); border-radius: calc(var(--r-xl) - 7px); background: radial-gradient(120% 100% at 100% 0%, var(--signal-wash), transparent 50%), var(--surface); box-shadow: 0 1px 0 var(--inner-light) inset; } /* ----- Hero instrument --------------------------------------------- */ .instrument { padding: clamp(1.25rem, 2.5vw, 1.75rem); } .inst-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .inst-title { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .inst-live { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--data); } .inst-live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--data); animation: pulse 2s infinite; } .inst-gauge { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 1.75rem); align-items: center; padding: clamp(1.1rem, 3vw, 1.6rem) 0; } .gauge-ring { position: relative; width: clamp(120px, 30vw, 150px); aspect-ratio: 1; } .gauge-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gauge-track { fill: none; stroke: var(--line); stroke-width: 7; } .gauge-value { fill: none; stroke: url(#gaugeGrad); stroke-width: 7; stroke-linecap: round; } .gauge-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .gauge-num b { font-family: var(--font-mono); font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 500; letter-spacing: -0.03em; color: var(--text); line-height: 1; } .gauge-num span { display: block; margin-top: 0.3rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); opacity: 0.6; } .gauge-caption { font-size: 0.92rem; color: var(--text-muted); } .gauge-caption b { display: block; margin-bottom: 0.35rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text); } /* Signal readout rows */ .inst-rows { display: grid; gap: 0.55rem; padding-top: 1rem; border-top: 1px solid var(--line); } .inst-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem; } .inst-row .label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); } .inst-row .meter { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; } .inst-row .meter i { display: block; height: 100%; width: var(--fill, 50%); border-radius: 999px; background: linear-gradient(90deg, var(--signal-deep), var(--signal)); transform-origin: left; transform: scaleX(0); } .inst-row[data-state="good"] .meter i { background: linear-gradient(90deg, var(--data-deep), var(--data)); } .inst-row .verdict { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--warn); } .inst-row[data-state="good"] .verdict { color: var(--data); } .inst-row[data-state="bad"] .verdict { color: var(--bad); } /* Pipeline strip */ .inst-pipe { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .inst-pipe .stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em; color: var(--text-dim); } .inst-pipe .stage .node { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); box-shadow: 0 0 0 1px var(--line) inset; transition: background 0.4s, box-shadow 0.4s; } .inst-pipe .stage[data-active="true"] { color: var(--signal); } .inst-pipe .stage[data-active="true"] .node { background: var(--signal); box-shadow: 0 0 0 4px var(--signal-wash); } .inst-pipe .rail { position: absolute; left: 8%; right: 8%; top: calc(1.1rem + 5px); height: 1px; background: var(--line); } .inst-pipe .rail i { position: absolute; top: 50%; left: 0; width: 22px; height: 3px; margin-top: -1.5px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--signal)); filter: drop-shadow(0 0 6px var(--signal-glow)); } /* ----- Proof strip (Interactive System Pipeline) ------------------ */ .proof { background: oklch(0.13 0.01 52 / 0.5); border-block: 1px solid var(--line); padding-block: clamp(3rem, 7vh, 5rem) !important; } .proof .v2-timeline-container { position: relative; width: 100%; } .proof .v2-rail-wrapper { position: absolute; left: 16%; right: 16%; top: 9px; height: 1px; background: var(--line); z-index: 1; opacity: 1; /* Baked-in: accent = 1 */ } .proof .v2-rail { display: block; width: 100%; height: 100%; position: relative; } .proof .v2-rail i { position: absolute; top: 50%; left: 0; width: 60px; height: 3px; margin-top: -1.5px; border-radius: var(--r-pill); background: linear-gradient(90deg, transparent, var(--signal)); filter: drop-shadow(0 0 6px var(--signal-glow)); animation: v2PulseTravel 6s infinite linear; } .proof .v2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 4rem); position: relative; z-index: 2; } .proof .v2-step { display: flex; flex-direction: column; align-items: center; text-align: center; } .proof .v2-node-wrapper { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; background: var(--bg); border-radius: 50%; } .proof .v2-node { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line); transition: all 0.3s ease; } .proof .v2-step:hover .v2-node { background: var(--signal); box-shadow: 0 0 10px var(--signal-glow); } .proof .v2-content { display: flex; flex-direction: column; align-items: center; } .proof .v2-badge { font-family: var(--font-mono); font-size: 0.7rem; color: var(--signal-fg); background: var(--signal-wash); border: 1px solid var(--line-strong); padding: 0.15rem 0.5rem; border-radius: var(--r-sm); display: inline-block; margin-bottom: 0.75rem; } .proof .n { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); font-weight: 500; color: var(--text); line-height: 1.2; margin-bottom: 0.5rem; } .proof .n em { font-style: normal; color: var(--data-fg); } .proof p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-dim); max-width: 28ch; } /* Baked-in: stagger = true */ .proof .v2-step:nth-child(even) { margin-top: 2rem; } .proof .v2-step:nth-child(even) .v2-node-wrapper { margin-bottom: 0; margin-top: 1.5rem; order: 2; } .proof .v2-step:nth-child(even) .v2-content { order: 1; } @keyframes v2PulseTravel { 0% { left: 0%; } 100% { left: 100%; } } @media (max-width: 900px) { .proof .v2-rail-wrapper { display: none; } .proof .v2-grid { grid-template-columns: 1fr; gap: 2rem; } .proof .v2-step { flex-direction: row; text-align: left; align-items: flex-start; gap: 1.25rem; } .proof .v2-node-wrapper { margin-bottom: 0; margin-top: 0.25rem; flex-shrink: 0; } .proof .v2-content { align-items: flex-start; } /* Baked-in: stagger = true media adjustments */ .proof .v2-step:nth-child(even) { margin-top: 0; } .proof .v2-step:nth-child(even) .v2-node-wrapper { margin-top: 0.25rem; order: 0; } .proof .v2-step:nth-child(even) .v2-content { order: 1; } .proof p { max-width: 100%; } } /* ----- Signals (diagnostic panels, asymmetric) --------------------- */ .signals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.2vw, 1.4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); } .panel { padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); transition: transform 0.6s var(--ease-soft), border-color 0.4s, box-shadow 0.6s; } .panel:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-lift); } .panel-feature { grid-column: span 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; background: radial-gradient(120% 120% at 100% 0%, var(--signal-wash), transparent 55%), var(--surface); } .panel h3 { margin-bottom: 0.7rem; } .panel p { margin: 0; color: var(--text-muted); } .panel .panel-tag { display: inline-block; margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--data); } /* mini score viz inside feature panel */ .mini-score { display: grid; gap: 0.6rem; } .mini-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem; } .mini-row .bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; } .mini-row .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--signal-deep), var(--signal)); } .mini-row span { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-dim); } /* ----- Work --------------------------------------------------------- */ .work-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .work-left { display: flex; flex-direction: column; } .work-left .lead-block { margin-bottom: clamp(2rem, 4vw, 2.75rem); } .work-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .work-list li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); } .work-list li:last-child { border-bottom: 1px solid var(--line); } .work-list .idx { width: 9px; height: 9px; margin-top: 0.65rem; border-radius: 2px; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-wash); transform: rotate(45deg); } .work-list h3 { margin: 0 0 0.4rem; font-size: 1.2rem; } .work-list p { margin: 0; color: var(--text-muted); font-size: 0.96rem; } /* Delivery map */ .delivery-map { padding: clamp(1.5rem, 4vw, 2.25rem); } .dm-liveboard { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, var(--signal-wash), transparent 54%), linear-gradient(180deg, oklch(1 0 0 / 0.035), transparent 32%), var(--surface); } .dm-liveboard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .dm-liveboard-sub { margin: 0.35rem 0 0; max-width: 29ch; color: var(--text-dim); font-size: 0.86rem; line-height: 1.45; } .dm-liveboard-state { flex: none; min-height: 32px; display: inline-flex; align-items: center; color: var(--data); font-size: 0.66rem; letter-spacing: 0.08em; } .dm-liveboard-rail { height: 2px; margin: 1rem 0; border-radius: var(--r-pill); background: var(--line); overflow: hidden; } .dm-liveboard-rail span { display: block; width: 58%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--signal-deep), var(--signal), var(--data)); transform-origin: left; } .dm-liveboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .dm-liveboard-card { position: relative; min-height: 142px; display: flex; flex-direction: column; justify-content: space-between; gap: 0.7rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: oklch(1 0 0 / 0.028); transition: transform 0.35s var(--ease-soft), border-color 0.3s var(--ease-quart), background 0.3s var(--ease-quart); } .dm-liveboard-card::after { content: ""; position: absolute; inset: 0.7rem; border-radius: calc(var(--r-md) - 6px); border: 1px solid transparent; pointer-events: none; transition: border-color 0.3s var(--ease-quart); } .dm-liveboard-card:hover, .dm-liveboard-card:focus-within { transform: translateY(-3px); border-color: var(--line-strong); background: oklch(1 0 0 / 0.045); } .dm-liveboard-card:hover::after, .dm-liveboard-card:focus-within::after { border-color: oklch(1 0 0 / 0.07); } .dm-liveboard-card.is-active { border-color: oklch(0.79 0.155 64 / 0.35); background: radial-gradient(110% 120% at 100% 0%, var(--signal-wash), transparent 62%), oklch(1 0 0 / 0.035); } .dm-liveboard-code { color: var(--data); font-size: 0.64rem; letter-spacing: 0.08em; } .dm-liveboard h3 { margin: auto 0 0; font-size: clamp(1.12rem, 1rem + 0.6vw, 1.42rem); } .dm-liveboard p:not(.dm-liveboard-sub) { margin: 0; color: var(--text-dim); font-size: 0.88rem; line-height: 1.45; } .dm-liveboard-sweep { position: absolute; inset: auto 1.2rem 1rem 1.2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--signal), transparent); opacity: 0.7; transform: translateX(-40%); animation: dmLiveSweep 3.5s var(--ease-expo) infinite; pointer-events: none; } @keyframes dmLiveSweep { 0% { transform: translateX(-40%); } 55% { transform: translateX(20%); } 100% { transform: translateX(40%); } } .map-flow { display: grid; gap: 0; } .map-stage { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 0.4rem 0 1.5rem 0; } .map-stage:last-child { padding-bottom: 0; } .map-stage .marker { position: relative; display: grid; place-items: center; width: 30px; } .map-stage .marker .ring { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); box-shadow: 0 0 0 1px var(--line) inset; z-index: 1; } .map-stage[data-active="true"] .marker .ring { background: var(--signal); box-shadow: 0 0 0 5px var(--signal-wash); } .map-stage:not(:last-child) .marker::after { content: ""; position: absolute; top: 18px; bottom: -14px; width: 1px; background: var(--line); } .map-stage[data-active="true"]:not(:last-child) .marker::after { background: linear-gradient(var(--signal), var(--line)); } .map-stage .body b { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; } .map-stage .body span { font-size: 0.9rem; color: var(--text-muted); } .map-stage[data-active="true"] .body b { color: var(--signal); } /* ----- Process (a real ordered sequence — numbers earn their place) - */ .process-steps { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); } .step { position: relative; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); } /* Flow marker conveys order without numeric scaffolding; an arrow joins the cards left-to-right on wide viewports. */ .step .step-mark { display: block; width: 26px; height: 26px; margin-bottom: 1.3rem; border-radius: 8px; background: var(--signal-wash); box-shadow: 0 0 0 1px var(--signal-wash) inset; position: relative; } .step .step-mark::before { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal-glow); } .process-steps .step:not(:last-child)::after { content: ""; position: absolute; top: clamp(1.5rem, 3vw, 2rem); right: calc(-1 * clamp(1rem, 2.5vw, 1.5rem) / 2 - 4px); width: 7px; height: 7px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: translateY(9px) rotate(45deg); } .step h3 { margin: 0 0 0.6rem; } .step p { margin: 0; color: var(--text-muted); font-size: 0.96rem; } /* -------------------------------------------------------------------- */ /* Before / After comparison section */ /* -------------------------------------------------------------------- */ @property --ba-pos { syntax: ""; inherits: true; initial-value: 88%; } @keyframes baSweepIn { from { --ba-pos: 88%; } to { --ba-pos: 50%; } } @keyframes baChatPulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.2); opacity: 0; } } @keyframes baChatPulseMid { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(1.6); opacity: 0; } } .ba-section { padding-block: var(--section-gap); } .ba-display { background: var(--void); border-radius: calc(var(--r-xl) + 12px); padding: 1.125rem; border: 1px solid var(--line); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.04); } .ba-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } /* ── Mockup frame ── */ .ba-interactive { display: flex; flex-direction: column; gap: 0.75rem; } .ba-frame { position: relative; --ba-pos: 12%; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 0 0 1px var(--line-strong), 0 32px 80px oklch(0 0 0 / 0.45), 0 8px 20px oklch(0 0 0 / 0.25); cursor: col-resize; user-select: none; touch-action: pan-y; background: #1c1812; } /* Reveal sweep when entering viewport */ html.js .ba-frame.sweep-active { animation: baSweepIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } html.js .ba-frame.sweep-done { --ba-pos: 50%; transition: --ba-pos 0.08s linear; } @media (prefers-reduced-motion: reduce) { html.js .ba-frame.sweep-active { animation: none; --ba-pos: 50%; } } /* Tab bar — replaces browser chrome, houses the Before/After drag pill */ .ba-tab-bar { display: flex; align-items: center; justify-content: center; padding: 0.65rem 0.875rem; flex-shrink: 0; } .ba-tab-pill { position: relative; width: 100%; height: 30px; border-radius: 999px; border: 1px solid var(--line); overflow: hidden; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; } .ba-tab-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; transition: none; } .ba-tab-seg--before { left: 0; right: calc(100% - var(--ba-pos)); background: var(--surface-2); color: var(--text-muted); padding-left: 0.875rem; justify-content: flex-start; } .ba-tab-seg--after { left: var(--ba-pos); right: 0; background: #0c1410; color: #52d9a0; padding-right: 0.875rem; justify-content: flex-end; } /* Hairline split between segments */ .ba-tab-pill::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 1.5px; background: var(--line-strong, oklch(0.4 0.01 54)); transform: translateX(-50%); z-index: 2; pointer-events: none; } /* Grip circle — sits on the hairline at the split point */ .ba-tab-grip { position: absolute; top: 50%; left: var(--ba-pos); transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: oklch(0.97 0.004 54); border: 1.5px solid oklch(0.5 0.01 54 / 0.35); box-shadow: 0 1px 8px oklch(0 0 0 / 0.35); z-index: 3; pointer-events: none; flex-shrink: 0; } /* Viewport wrapper — scopes absolute children below chrome */ .ba-viewport { position: relative; overflow: hidden; } /* Before / After SVG layers */ .ba-layer { display: block; line-height: 0; } .ba-layer svg { display: block; width: 100%; height: auto; } .ba-before-layer { position: relative; } .ba-after-layer { position: absolute; inset: 0; /* clip from left → after (good) site reveals from the right */ clip-path: inset(0 0 0 var(--ba-pos)); } /* Drag hint text */ .ba-hint { text-align: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.06em; margin: 0; } /* Viewport drag cursor feedback */ .ba-viewport { cursor: ew-resize; } /* ── Right copy ── */ .ba-copy { display: flex; flex-direction: column; gap: 0; } .ba-lede { font-size: clamp(0.95rem, 1.5vw, 1.05rem); color: var(--text-muted); line-height: 1.7; max-width: 46ch; margin: 1rem 0 1.75rem; } .ba-features { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .ba-features li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: var(--text-muted); line-height: 1.55; } .ba-features li strong { color: var(--text); } .ba-check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: oklch(0.79 0.155 64 / 0.12); border: 1.5px solid oklch(0.79 0.155 64 / 0.35); margin-top: 0.15rem; position: relative; } .ba-check::after { content: ""; position: absolute; inset: 4px 4px 6px 5px; border-left: 1.5px solid var(--signal); border-bottom: 1.5px solid var(--signal); transform: rotate(-45deg) translateY(-1px); } /* Tab after-segment stays forest dark in light theme — it represents the client site's identity */ :root[data-theme="light"] .ba-tab-seg--before { background: oklch(0.88 0.006 54); color: oklch(0.4 0.015 54); } /* ── Responsive ── */ @media (max-width: 900px) { .ba-grid { grid-template-columns: 1fr; } .ba-interactive { order: 1; } .ba-copy { order: 0; } } /* ----- Contact / form ---------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contact-copy { position: sticky; top: 7rem; max-width: 40ch; } .contact-copy h2 { margin-top: 1rem; } .contact-copy p { margin-top: 1.2rem; color: var(--text-muted); } .contact-reassure { margin-top: 2rem; display: grid; gap: 0.75rem; } .contact-reassure li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; list-style: none; font-size: 0.94rem; color: var(--text-muted); } .contact-reassure li svg { width: 18px; height: 18px; color: var(--signal); margin-top: 0.15rem; } .contact-reassure { padding: 0; margin-block: 2rem 0; } .lead-form { padding: clamp(1.5rem, 4vw, 2.25rem); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @keyframes fieldInputPulse { 0% { box-shadow: 0 0 0 0 oklch(0.79 0.155 64 / 0); } 45% { box-shadow: 0 0 0 4px oklch(0.79 0.155 64 / 0.13); } 100% { box-shadow: 0 0 0 0 oklch(0.79 0.155 64 / 0); } } .field { position: relative; display: grid; gap: 0.45rem; margin-bottom: 1rem; align-content: start; } .field > span { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.01em; } .optional-badge { font-size: 0.74rem; font-weight: 450; color: var(--text-dim); margin-left: 0.25rem; } .field input, .field textarea { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, oklch(1 0 0 / 0.026), transparent 48%), var(--void); color: var(--text); font-family: var(--font-body); font-size: 1rem; font-weight: 450; letter-spacing: 0.006em; line-height: 1.35; transition: background 0.3s var(--ease-quart), border-color 0.3s var(--ease-quart), box-shadow 0.3s var(--ease-quart), color 0.2s var(--ease-quart); } .field textarea { resize: vertical; min-height: 7rem; } .field input::placeholder, .field textarea::placeholder { color: var(--text-dim); opacity: 1; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); } .field.is-filled input:not(.phone-number-input), .field.is-filled textarea { background: radial-gradient(70% 120% at 100% 0%, oklch(0.79 0.155 64 / 0.045), transparent 62%), linear-gradient(180deg, oklch(1 0 0 / 0.036), transparent 52%), var(--void); border-color: oklch(0.79 0.155 64 / 0.22); } .field.is-typing input:not(.phone-number-input), .field.is-typing textarea, .field.is-typing .phone-field { animation: fieldInputPulse 0.36s var(--ease-quart); } .field.has-error input:not(.phone-number-input), .field.has-error textarea, .field.has-error .phone-field, .field input:not(.phone-number-input):user-invalid, .field textarea:user-invalid { border-color: var(--bad); } .field.has-error input:not(.phone-number-input):focus, .field.has-error textarea:focus, .field.has-error .phone-field:focus-within { box-shadow: 0 0 0 3px oklch(0.72 0.17 28 / 0.16); } .field-error, .field-hint { margin: -0.05rem 0 0; font-size: 0.78rem; line-height: 1.35; } .field-error { min-height: 1.05em; color: var(--bad); opacity: 1; transform: translateY(0); transition: opacity 0.18s var(--ease-quart), transform 0.18s var(--ease-quart); } .field-error:empty { opacity: 0; transform: translateY(-2px); } .field-hint { color: var(--text-dim); } .field-hint:empty { display: none; } /* ----- Phone field — custom country dropdown + number input -------- */ .phone-field { display: flex; align-items: stretch; width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, oklch(1 0 0 / 0.026), transparent 48%), var(--void); position: relative; /* no overflow:hidden — lets the list escape */ transition: background 0.3s var(--ease-quart), border-color 0.3s var(--ease-quart), box-shadow 0.3s var(--ease-quart); } .field.is-filled .phone-field { background: radial-gradient(70% 120% at 100% 0%, oklch(0.79 0.155 64 / 0.045), transparent 62%), linear-gradient(180deg, oklch(1 0 0 / 0.036), transparent 52%), var(--void); border-color: oklch(0.79 0.155 64 / 0.22); } .phone-field:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); } /* Trigger button */ .phone-country-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; border-right: 1px solid var(--line); transition: border-color 0.3s var(--ease-quart); } .phone-field:focus-within .phone-country-wrap { border-right-color: oklch(0.79 0.155 64 / 0.25); } .country-trigger { display: flex; align-items: center; gap: 0.4rem; padding: 0.85rem 0.65rem 0.85rem 0.85rem; background: transparent; border: none; border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px); outline: none; color: var(--text); white-space: nowrap; } .country-trigger:focus-visible { outline: 2px solid var(--signal-bright); outline-offset: -2px; border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px); } .ct-flag { font-size: 1.1rem; line-height: 1; } .ct-code { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.01em; color: var(--text-muted); } .ct-chevron { width: 10px; height: 6px; color: var(--text-dim); transition: transform 0.25s var(--ease-expo), color 0.2s; flex-shrink: 0; } .country-trigger[aria-expanded="true"] .ct-chevron { transform: rotate(180deg); color: var(--signal); } /* Country dropdown container — positioned, animated wrapper */ @keyframes countryDropIn { from { opacity: 0; transform: translateY(-8px) scale(0.975); filter: blur(3px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes countryDropOut { from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } to { opacity: 0; transform: translateY(-5px) scale(0.985); filter: blur(2px); } } @keyframes countryOptionIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .country-dropdown { position: absolute; top: calc(100% + 6px); left: -1px; min-width: 240px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lift); z-index: var(--z-overlay); overflow: hidden; transform-origin: 1rem top; will-change: transform, opacity, filter; animation: countryDropIn 0.24s var(--ease-expo) both; } .country-dropdown.is-closing { pointer-events: none; animation: countryDropOut 0.14s var(--ease-quart) both; } .country-dropdown[hidden] { display: none; animation: none; } @media (prefers-reduced-motion: reduce) { .country-dropdown, .country-dropdown.is-closing, .country-dropdown:not([hidden]) .country-list li:nth-child(-n+10) { animation: none; } .field.is-typing input, .field.is-typing textarea, .field.is-typing .phone-field { animation: none; } } /* Search bar inside dropdown */ .country-search-wrap { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 1; } .co-search-ico { width: 13px; height: 13px; color: var(--text-dim); flex-shrink: 0; transition: color 0.18s; } .country-search-wrap:focus-within .co-search-ico { color: var(--signal); } .country-search-input { flex: 1; border: none; background: transparent; color: var(--text); font-family: var(--font-mono); font-size: 0.8rem; outline: none; min-width: 0; } .country-search-input::placeholder { color: var(--text-dim); } /* Scrollable country list — normal flow inside dropdown */ .country-list { max-height: 220px; overflow-y: auto; list-style: none; margin: 0; padding: 0.3rem; } .country-list li { display: flex; align-items: center; gap: 0.55rem; padding: 0.48rem 0.7rem; border-radius: calc(var(--r-md) - 6px); transition: background 0.15s, color 0.15s; outline: none; cursor: default; } .country-dropdown:not([hidden]) .country-list li:nth-child(-n+10) { animation: countryOptionIn 0.2s var(--ease-expo) both; } .country-dropdown:not([hidden]) .country-list li:nth-child(1) { animation-delay: 18ms; } .country-dropdown:not([hidden]) .country-list li:nth-child(2) { animation-delay: 28ms; } .country-dropdown:not([hidden]) .country-list li:nth-child(3) { animation-delay: 38ms; } .country-dropdown:not([hidden]) .country-list li:nth-child(4) { animation-delay: 48ms; } .country-dropdown:not([hidden]) .country-list li:nth-child(5) { animation-delay: 58ms; } .country-dropdown:not([hidden]) .country-list li:nth-child(6) { animation-delay: 68ms; } .country-dropdown:not([hidden]) .country-list li:nth-child(7) { animation-delay: 78ms; } .country-dropdown:not([hidden]) .country-list li:nth-child(8) { animation-delay: 88ms; } .country-dropdown:not([hidden]) .country-list li:nth-child(9) { animation-delay: 98ms; } .country-dropdown:not([hidden]) .country-list li:nth-child(10) { animation-delay: 108ms; } .country-list li[hidden] { display: none; } .country-list li:focus-visible { outline: 2px solid var(--signal-bright); outline-offset: -2px; } .co-flag { font-size: 1rem; line-height: 1; flex-shrink: 0; } .co-name { flex: 1; font-size: 0.88rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); flex-shrink: 0; } .country-list li:hover { background: var(--surface-2); } .country-list li:hover .co-name { color: var(--text); } .country-list li[aria-selected="true"] { background: var(--signal-wash); } .country-list li[aria-selected="true"] .co-name { color: var(--text); } .country-list li[aria-selected="true"] .co-code { color: var(--signal); } /* No-results message */ .country-no-results { padding: 0.6rem 1rem 0.75rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); text-align: center; } .country-no-results[hidden] { display: none; } /* Phone number input override */ .phone-field .phone-number-input { flex: 1; align-self: stretch; min-width: 0; width: auto; min-height: 0; padding: 0.85rem 1rem; border: none; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); font-family: var(--font-body); font-size: 1rem; font-weight: 450; letter-spacing: 0.006em; line-height: 1.35; outline: none; transition: none; } .phone-field .phone-number-input:focus { border-color: transparent; box-shadow: none; } .phone-field .phone-number-input::placeholder { color: var(--text-dim); opacity: 1; } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-foot { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 1rem; margin-top: 0.5rem; } .form-foot .btn { justify-self: start; } .form-status { margin: 0; font-size: 0.9rem; color: var(--text-dim); min-height: 1.2em; max-width: 34ch; min-width: 0; text-wrap: pretty; } .form-status[data-tone="success"] { color: var(--ok); } .form-status[data-tone="error"] { color: var(--bad); } .form-status[data-tone="pending"] { color: var(--data); } /* Turnstile bot-check — sits in the form flow just above the submit row */ .form-verify { margin-top: 0.35rem; min-height: 65px; /* reserve the widget height so loading doesn't shift the form */ } .form-verify .cf-turnstile { display: block; } /* Form success panel — instrument acknowledgement */ @keyframes checkDraw { from { stroke-dashoffset: 42; } to { stroke-dashoffset: 0; } } @keyframes fsBarFill { from { width: 0%; } to { width: 100%; } } @keyframes fsBarGlowMove { from { left: -30%; } to { left: 110%; } } @keyframes fsPanelIn { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes fsRingPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0; } } @keyframes formFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); filter: blur(2px); } } .lead-form.is-submitted { animation: formFadeOut 0.3s cubic-bezier(0.4, 0, 1, 1) both; pointer-events: none; } .form-success { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem); gap: 0; min-height: 420px; } .form-success[hidden] { display: none; } html.js .form-success:not([hidden]) { animation: fsPanelIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } .fs-check-wrap { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.75rem; } .fs-burst { position: absolute; inset: -50px; width: 200px; height: 200px; pointer-events: none; } .fs-check { width: 72px; height: 72px; position: relative; z-index: 1; } .fs-check-path { stroke-dasharray: 42; stroke-dashoffset: 42; } html.js .fs-check-path.is-drawn { animation: checkDraw 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; } .fs-ring-pulse { transform-box: fill-box; transform-origin: center; } html.js .fs-ring-pulse.is-pulsed { animation: fsRingPulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) 0.5s forwards; } .fs-ref { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; } .fs-ref-badge { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--data); padding: 0.18em 0.5em; border: 1px solid oklch(0.82 0.1 196 / 0.3); border-radius: 4px; line-height: 1; } .fs-ref-code { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--data); } .fs-heading { font-family: var(--font-display); font-size: clamp(1.4rem, 3.5vw, 1.95rem); font-weight: 600; color: var(--text); margin: 0 0 0.6rem; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; } .fs-body { font-size: 0.95rem; color: var(--text-muted); max-width: 34ch; line-height: 1.65; margin: 0 0 2rem; } .fs-bar-wrap { position: relative; width: 100%; max-width: 280px; height: 2px; background: var(--line); border-radius: 1px; overflow: hidden; margin: 0 0 0.55rem; } .fs-bar { position: absolute; inset: 0; width: 0%; background: var(--signal); border-radius: 1px; } .fs-bar-glow { position: absolute; top: -3px; left: -30%; width: 30%; height: 8px; background: radial-gradient(ellipse at center, oklch(0.79 0.155 64 / 0.5) 0%, transparent 70%); pointer-events: none; } html.js .fs-bar.is-filling { animation: fsBarFill 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; } html.js .fs-bar-glow.is-filling { animation: fsBarGlowMove 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; } .fs-bar-label { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.05em; } @media (prefers-reduced-motion: reduce) { .lead-form.is-submitted { animation: none; opacity: 0; } .form-success:not([hidden]) { animation: none; } .fs-check-path.is-drawn { animation: none; stroke-dashoffset: 0; } .fs-ring-pulse.is-pulsed { animation: none; opacity: 0; } .fs-bar.is-filling { animation: none; width: 100%; } .fs-bar-glow.is-filling { animation: none; } } .btn[disabled] { opacity: 0.6; pointer-events: none; } /* ----- Footer ------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vh, 3.5rem); } .footer-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .footer-grid .brand { margin-right: 0; } .footer-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.88rem; color: var(--text-dim); } /* Hide custom cursor entirely while dragging the B/A slider */ html.ba-dragging, html.ba-dragging * { cursor: none !important; } html.ba-dragging .cursor-dot, html.ba-dragging .cursor-ring { opacity: 0 !important; pointer-events: none; } /* ----- Custom cursor ----------------------------------------------- */ html.js.has-cursor, html.js.has-cursor *:not(input):not(textarea) { cursor: none !important; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: var(--z-cursor); will-change: transform; opacity: 0; transition: opacity 0.4s var(--ease-quart); } /* Dot — 6 px solid amber, instant tracking */ .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--signal); box-shadow: 0 0 6px var(--signal-glow); transition: opacity 0.4s var(--ease-quart), width 0.22s var(--ease-expo), height 0.22s var(--ease-expo), margin 0.22s var(--ease-expo), background 0.22s var(--ease-expo), box-shadow 0.22s var(--ease-expo); } /* Ring — 30 px stroke, lerp-lagged behind dot */ .cursor-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid oklch(0.79 0.155 64 / 0.42); background: transparent; transition: opacity 0.4s var(--ease-quart), width 0.38s var(--ease-expo), height 0.38s var(--ease-expo), margin 0.38s var(--ease-expo), border-color 0.38s var(--ease-expo), background 0.38s var(--ease-expo); } /* Hover interactive elements — ring expands + fills subtly, dot shrinks */ html.cursor-on-interactive .cursor-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--signal-bright); box-shadow: 0 0 8px var(--signal-glow); } html.cursor-on-interactive .cursor-ring { width: 42px; height: 42px; margin: -21px 0 0 -21px; border-color: oklch(0.85 0.15 72 / 0.55); background: oklch(0.79 0.155 64 / 0.05); } /* Press — both snap inward */ html.cursor-pressed .cursor-dot { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: var(--signal-bright); } html.cursor-pressed .cursor-ring { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-color: oklch(0.85 0.15 72 / 0.75); } /* Hide custom cursor and ensure standard browser cursor is completely hidden on buttons/CTAs */ html.js.has-cursor.cursor-hidden .cursor-dot, html.js.has-cursor.cursor-hidden .cursor-ring { opacity: 0 !important; pointer-events: none; } html.js.has-cursor.cursor-hidden, html.js.has-cursor.cursor-hidden * { cursor: none !important; } /* Touch / coarse pointer / reduced motion — hide entirely */ @media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } html.js.has-cursor, html.js.has-cursor *:not(input):not(textarea) { cursor: auto !important; } } @media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring { display: none; } html.js.has-cursor, html.js.has-cursor *:not(input):not(textarea) { cursor: auto !important; } } /* ----- Scroll reveal (enhances an already-visible default) --------- */ html.js.motion .reveal { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo), filter 0.8s var(--ease-expo); } html.js.motion .reveal.is-in { opacity: 1; transform: none; filter: none; } html.js.motion [data-stagger] > * { transition-delay: calc(var(--i, 0) * 80ms); } /* ----- Scroll-driven animations (CSS timelines, progressive) -------- */ /* All gated behind @supports + no-preference, so unsupported browsers and reduced-motion users get a fully static, legible page. */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--z-nav); transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--signal-deep), var(--signal), var(--signal-bright)); box-shadow: 0 0 12px var(--signal-glow); pointer-events: none; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .scroll-progress { animation: progressGrow linear both; animation-timeline: scroll(root block); } @keyframes progressGrow { to { transform: scaleX(1); } } } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Hero instrument parallax drift */ .hero-visual .bezel { animation: parallaxDrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } @keyframes parallaxDrift { from { transform: translateY(34px); } to { transform: translateY(-34px); } } /* Delivery map line fills as the section crosses the viewport */ .map-flow { --scan: 0%; animation: mapScan linear both; animation-timeline: view(); animation-range: entry 25% cover 70%; } @keyframes mapScan { to { --scan: 100%; } } } } /* Register the custom property so it can animate */ @property --scan { syntax: ""; inherits: true; initial-value: 0%; } .map-flow .map-stage .marker::after { background: linear-gradient(var(--signal), var(--signal)) no-repeat, var(--line); background-size: 100% var(--scan, 0%), 100% 100%; } /* ----- Responsive --------------------------------------------------- */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 7.2rem; } .hero-copy, .hero-lede { max-width: 100%; } .hero-ledger { max-width: 760px; } .outcome-grid { grid-template-columns: 1fr; } .outcome { min-height: 0; } .outcome-kicker { margin-bottom: clamp(1.5rem, 8vw, 2.8rem); } .work-grid, .contact-grid, .ba-grid { grid-template-columns: 1fr; } .ba-interactive { order: 2; } .ba-copy { order: 1; } .work-left .lead-block { margin-bottom: clamp(1.5rem, 3vw, 2rem); } .contact-copy { position: static; } .panel-feature { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; } .process-steps .step:not(:last-child)::after { display: none; } } @media (max-width: 720px) { h1 { font-size: clamp(2.7rem, 2.12rem + 3.4vw, 3.3rem); } .nav-links, .nav-cta { display: none; } .nav-toggle { display: block; } .hero-ledger { grid-template-columns: 1fr; } .hero-ledger span { min-height: 0; } .signals-grid { grid-template-columns: 1fr; } .dm-liveboard-head { display: grid; } .dm-liveboard-grid { grid-template-columns: 1fr; } .panel-feature { grid-column: span 1; } .form-grid { grid-template-columns: 1fr; } .form-foot { grid-template-columns: 1fr; } .form-foot .btn { justify-self: stretch; } .form-status { max-width: 100%; } .inst-gauge { grid-template-columns: 1fr; justify-items: center; text-align: center; } } /* ----- Reduced motion ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } html.js.motion .reveal { opacity: 1; transform: none; filter: none; } .hero-status .pulse, .inst-live .pulse, .dm-liveboard-sweep { animation: none; } .dm-liveboard-card { transition: none; } /* Fill progressive indicators/gauges to final states immediately */ .v2-rail i { animation: none !important; transform: scaleY(1) !important; } .gauge-value { animation: none !important; stroke-dashoffset: 39 !important; } .scroll-progress { animation: none !important; transform: scaleX(1) !important; } .v2-node { animation: none !important; } .nav-fullwidth { animation: none !important; } } /* ===================================================================== THEME LAYER — dark (default) + light, animated cards, marketing blocks Appended last so these rules win over earlier equal-specificity ones. ===================================================================== */ /* Theme-aware tokens (dark defaults mirror the originals) */ :root { --signal-fg: var(--signal); /* amber used as TEXT */ --data-fg: var(--data); /* teal used as TEXT */ --warn-fg: var(--warn); --bad-fg: var(--bad); --ok-fg: var(--ok); --grain-opacity: 0.035; --grain-blend: overlay; --nav-bg: oklch(0.155 0.012 54 / 0.86); --nav-bg-scrolled: oklch(0.142 0.012 54 / 0.94); --overlay-bg: oklch(0.118 0.01 52 / 0.92); --proof-bg: oklch(0.13 0.01 52 / 0.5); } :root[data-theme="light"] { /* Surfaces — precision warm-off-white, the instrument in daylight. Hue 54° = espresso axis, chroma capped below 0.005. Neutral high-end paper. */ --void: oklch(0.958 0.003 54); /* lightest recessed surface */ --bg: oklch(0.988 0.002 54); /* page canvas — breath of warmth */ --surface: oklch(1 0 0); /* pure white cards / panels */ --surface-2: oklch(0.978 0.003 54); /* slightly lifted cards */ --surface-3: oklch(0.954 0.004 54); /* bezel inner shells */ /* Hairlines — warm-grounded, calibrated for legibility */ --line: oklch(0.24 0.018 52 / 0.1); --line-strong: oklch(0.24 0.018 52 / 0.18); --inner-light: oklch(1 0 0 / 0.65); /* Text — deep espresso ink; near-black with the brand's own hue */ --text: oklch(0.18 0.022 48); /* espresso near-black */ --text-muted: oklch(0.38 0.018 52); /* warm dark-mid */ --text-dim: oklch(0.55 0.013 56); /* warm gray */ /* Signal (amber) — deepened for AA contrast on white */ --signal: oklch(0.65 0.17 54); --signal-bright: oklch(0.70 0.17 58); --signal-deep: oklch(0.56 0.17 46); --signal-glow: oklch(0.65 0.17 54 / 0.3); --signal-wash: oklch(0.65 0.17 54 / 0.09); --signal-fg: oklch(0.46 0.18 44); /* amber-as-text, passes AA */ /* Data — deep cobalt replaces teal in light mode; warmer against the espresso canvas, reads as precision/technical, contrasts amber cleanly */ --data: oklch(0.46 0.13 248); --data-deep: oklch(0.40 0.13 252); --data-fg: oklch(0.40 0.13 252); /* Semantic text tokens */ --warn-fg: oklch(0.50 0.14 62); --bad-fg: oklch(0.50 0.19 25); --ok-fg: oklch(0.47 0.14 155); /* Shadows — purposeful warm-grounded depth (Apple-calibrated) */ --shadow-soft: 0 1px 0 oklch(1 0 0 / 0.7) inset, 0 2px 6px oklch(0.3 0.025 52 / 0.06), 0 16px 40px -18px oklch(0.3 0.025 52 / 0.14); --shadow-lift: 0 1px 0 oklch(1 0 0 / 0.8) inset, 0 4px 14px oklch(0.3 0.025 52 / 0.08), 0 28px 64px -24px oklch(0.3 0.025 52 / 0.2); --shadow-signal: 0 0 0 1px oklch(0.65 0.17 54 / 0.14), 0 18px 52px -18px oklch(0.65 0.17 54 / 0.26); --shadow-data: 0 0 0 1px oklch(0.56 0.12 210 / 0.1), 0 18px 52px -20px oklch(0.48 0.12 214 / 0.22); /* Grain & navigation */ --grain-opacity: 0.016; --grain-blend: multiply; --nav-bg: oklch(0.998 0.002 54 / 0.88); --nav-bg-scrolled: oklch(0.998 0.002 54 / 0.96); --overlay-bg: oklch(0.99 0.002 54 / 0.96); --proof-bg: oklch(0.972 0.003 54 / 0.8); color-scheme: light; /* Optical typographic adjustments */ --body-weight: 450; --body-lh: 1.65; } /* Tab bar in light theme */ :root[data-theme="light"] .ba-tab-pill { border-color: oklch(0.7 0.01 54 / 0.4); } :root[data-theme="light"] .ba-frame { box-shadow: 0 0 0 1px oklch(0.7 0.01 54 / 0.25), 0 32px 80px oklch(0 0 0 / 0.12), 0 8px 20px oklch(0 0 0 / 0.08); } /* Light theme custom desaturated background glows */ :root[data-theme="light"] body { background: radial-gradient(120% 80% at 88% -10%, oklch(0.65 0.17 54 / 0.04), transparent 55%), radial-gradient(90% 70% at -10% 0%, oklch(0.56 0.12 210 / 0.03), transparent 60%), var(--bg); } /* Re-point literals onto theme tokens */ body::after { opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); } .nav-fullwidth { background: var(--nav-bg); } .site-header[data-scrolled="true"] .nav-fullwidth { background: var(--nav-bg-scrolled); } .nav-overlay { background: var(--overlay-bg); } .proof { background: var(--proof-bg); } .hero h1 .accent { color: var(--signal-fg); } .proof-item .n em { color: var(--signal-fg); } .panel .panel-tag { color: var(--data-fg); } .inst-live { color: var(--data-fg); } .inst-row .verdict { color: var(--warn-fg); } .inst-row[data-state="good"] .verdict { color: var(--data-fg); } .inst-row[data-state="bad"] .verdict { color: var(--bad-fg); } .map-stage[data-active="true"] .body b { color: var(--signal-fg); } .form-status[data-tone="success"] { color: var(--ok-fg); } .form-status[data-tone="error"] { color: var(--bad-fg); } .form-status[data-tone="pending"] { color: var(--data-fg); } /* Smooth, scoped theme crossfade (no transform clobbering) */ :where(body, .nav-fullwidth, .bezel, .bezel-core, .panel, .outcome, .field input, .field textarea, .faq-item, .proof, .site-footer, .theme-toggle, .btn-ghost) { transition: background-color 0.35s var(--ease-quart), border-color 0.35s var(--ease-quart), color 0.35s var(--ease-quart); } /* ----- Theme toggle ------------------------------------------------- */ .theme-toggle { display: grid; place-items: center; width: 44px; /* Increased to minimum 44px for a11y touch target */ height: 44px; /* Increased to minimum 44px for a11y touch target */ flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-muted); /* Snappy exit transition */ transition: color 150ms var(--ease-decel), border-color 150ms var(--ease-decel), transform 250ms var(--ease-soft); } .theme-toggle:hover { color: var(--signal-fg); border-color: var(--line-strong); /* Smoother enter transition */ transition: color 250ms var(--ease-decel), border-color 250ms var(--ease-decel); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle svg { width: 18px; height: 18px; } [data-theme="dark"] .theme-toggle .ico-moon, [data-theme="light"] .theme-toggle .ico-sun { display: none; } /* ----- Results / audit output -------------------------------------- */ .outcome-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 0.875fr)); gap: clamp(1rem, 2.2vw, 1.4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); } .outcome { display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; padding: clamp(1.35rem, 2.6vw, 1.9rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(80% 70% at 20% 0%, oklch(0.82 0.1 196 / 0.08), transparent 58%), var(--surface); box-shadow: var(--shadow-soft); transition: transform 0.6s var(--ease-soft), border-color 0.4s, box-shadow 0.6s; } .outcome:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-data); } .outcome-wide { grid-column: span 1; background: linear-gradient(135deg, var(--signal-wash), transparent 42%), radial-gradient(90% 80% at 90% 0%, oklch(0.82 0.1 196 / 0.08), transparent 58%), var(--surface); box-shadow: var(--shadow-signal); } .outcome-kicker { display: inline-flex; align-self: flex-start; margin-bottom: clamp(2rem, 5vw, 4.2rem); padding: 0.28rem 0.58rem; border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--data); background: oklch(1 0 0 / 0.03); } .outcome-wide .outcome-kicker { color: var(--signal); } .outcome h3 { max-width: 16ch; font-size: clamp(1.35rem, 1.03rem + 1.1vw, 2rem); line-height: 1.05; color: var(--text); } .outcome-wide h3 { max-width: 18ch; font-size: clamp(1.6rem, 1rem + 1.7vw, 2.45rem); } .outcome p { margin: 1.2rem 0 0; max-width: 55ch; color: var(--text-muted); font-size: 0.96rem; } /* ----- FAQ ---------------------------------------------------------- */ .faq-list { max-width: 760px; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0.2rem; font-family: var(--font-display); font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem); font-weight: 600; letter-spacing: -0.01em; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--signal-fg); } .faq-mark { position: relative; width: 15px; height: 15px; flex: none; } .faq-mark::before, .faq-mark::after { content: ""; position: absolute; background: var(--signal-fg); border-radius: 2px; } .faq-mark::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } .faq-mark::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); transition: transform 0.3s var(--ease-quart); } .faq-item[open] .faq-mark::after { transform: translateX(-50%) scaleY(0); } .faq-body { padding: 0 0 1.4rem; max-width: 64ch; color: var(--text-muted); } .faq-body p { margin: 0; } .faq-item[open] .faq-body { animation: faqIn 0.35s var(--ease-expo); } @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ----- Responsive (new sections) ----------------------------------- */ @media (max-width: 820px) { .outcome-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-body { animation: none; } } /* --- delivery-map: status-grid --- */ .dm1 { background: var(--surface); border-radius: var(--r-xl); padding: 1.5rem; border: 1px solid var(--line); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 1rem; height: 100%; box-sizing: border-box; } .dm1-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .dm1-label { font-size: 0.78rem; color: var(--text-muted); } .dm1-count { font-family: var(--font-mono); font-size: 0.64rem; color: var(--signal); letter-spacing: 0.07em; } .dm1-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; flex: 1; } .dm1-tile { background: var(--void); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; } .dm1-tile--on { background: radial-gradient(130% 120% at 100% 0%, var(--signal-wash), transparent 60%), var(--void); border-color: oklch(0.79 0.155 64 / 0.24); } .dm1-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text); line-height: 1.1; } .dm1-desc { font-size: 0.8rem; color: var(--text-dim); line-height: 1.42; flex: 1; } .dm1-tile--on .dm1-desc { color: var(--text-muted); } .dm1-badge { font-family: var(--font-mono); font-size: 0.59rem; letter-spacing: 0.09em; padding: 0.13rem 0.42rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-dim); align-self: flex-start; margin-top: 0.3rem; } .dm1-badge--on { background: var(--signal-wash); color: var(--signal); } /* --- faq: terminal-panel --- */ .faqtp { padding: 6.5rem 0; } .faqtp-lede { margin-bottom: 2.5rem; } .faqtp-lede h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; } .faqtp-sub { display: block; margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); } .faqtp-grid { display: grid; grid-template-columns: 1fr 1.1fr; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--line); gap: 1px; } .faqtp-qs { background: var(--void); } .faqtp-q { width: 100%; text-align: left; display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.25rem; border: none; background: transparent; cursor: pointer; border-bottom: 1px solid var(--line); transition: background 0.2s; position: relative; } .faqtp-q:last-child { border-bottom: none; } .faqtp-q:hover { background: oklch(1 0 0 / 0.025); } .faqtp-q.is-active { background: oklch(1 0 0 / 0.04); } .faqtp-q:focus-visible { outline: 2px solid var(--signal-bright); outline-offset: -3px; } .faqtp-code { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); flex-shrink: 0; width: 2.4rem; transition: color 0.2s; } .faqtp-q.is-active .faqtp-code { color: var(--signal); } .faqtp-qtext { flex: 1; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--text-muted); line-height: 1.3; transition: color 0.2s; } .faqtp-q.is-active .faqtp-qtext { color: var(--text); } .faqtp-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); opacity: 0; transition: opacity 0.2s; box-shadow: 0 0 6px var(--signal-glow); } .faqtp-q.is-active .faqtp-dot { opacity: 1; } .faqtp-panel { position: relative; overflow: hidden; background: var(--surface); display: grid; } .faqtp-scan { position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, transparent, var(--signal), var(--signal-bright), transparent); transform: translateX(-100%); z-index: 2; pointer-events: none; } .faqtp-scan.is-scanning { animation: faqtp-sweep 0.55s var(--ease-expo) forwards; } @keyframes faqtp-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .faqtp-answer { grid-area: 1 / 1; padding: 2rem 1.75rem; opacity: 0; transform: translateY(10px); transition: opacity 0.35s var(--ease-expo), transform 0.35s var(--ease-expo); pointer-events: none; } .faqtp-answer.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .faqtp-answer.is-exit { opacity: 0; transform: translateY(-10px); } .faqtp-answer p { font-size: 0.97rem; line-height: 1.7; color: var(--text-dim); } .faqtp-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--signal); margin-left: 2px; vertical-align: text-bottom; animation: faqtp-blink 1s step-end infinite; } @keyframes faqtp-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } @media (max-width: 700px) { .faqtp-grid { grid-template-columns: 1fr; } .faqtp-qs { border: 0; } .faqtp-panel { min-height: 240px; } } @media (prefers-reduced-motion: reduce) { .faqtp-grid, .faqtp-lede h2, .faqtp-answer { transition: none !important; } .faqtp-scan { animation: none !important; } .faqtp-cursor { animation: none !important; } .faqtp-answer.is-active { opacity: 1; transform: none; } } /* --- delivery-map: custom hub dashboard (Variant 1) --- */ .dm-h-container { --local-accent: var(--data); --local-accent-glow: oklch(0.82 0.1 196 / 0.45); display: block; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-soft); position: relative; } .dm-h-header { text-align: center; margin-bottom: 2rem; } .dm-h-title { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); margin-bottom: 0.25rem; } .dm-h-subtitle { font-size: 0.82rem; color: var(--text-dim); } .dm-h-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center; } .dm-h-visual { display: flex; justify-content: center; align-items: center; position: relative; padding: 1rem; } .dm-h-dial { width: 180px; height: 180px; position: relative; border-radius: 50%; border: 2px dashed var(--line); display: flex; justify-content: center; align-items: center; } .dm-h-dial-inner { width: 130px; height: 130px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 0 30px var(--local-accent-glow), 0 0 60px calc(var(--local-accent-glow) * 0.5); transition: box-shadow 0.3s var(--ease-expo); } .dm-h-dial-title { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.05em; } .dm-h-dial-val { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--local-accent); } .dm-h-dial-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--local-accent); box-shadow: 0 0 15px var(--local-accent), 0 0 30px var(--local-accent); left: calc(50% - 6px); top: calc(50% - 6px); transform: rotate(-90deg) translate(90px) rotate(90deg); /* Default stage 1 position */ transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Transform mapping driven by data-active-stage */ .dm-h-container[data-active-stage="1"] .dm-h-dial-dot { transform: rotate(-90deg) translate(90px) rotate(90deg); } .dm-h-container[data-active-stage="2"] .dm-h-dial-dot { transform: rotate(0deg) translate(90px) rotate(0deg); } .dm-h-container[data-active-stage="3"] .dm-h-dial-dot { transform: rotate(90deg) translate(90px) rotate(-90deg); } .dm-h-container[data-active-stage="4"] .dm-h-dial-dot { transform: rotate(180deg) translate(90px) rotate(-180deg); } .dm-h-steps { display: flex; flex-direction: column; gap: 0.25rem; } .dm-h-step { border-left: 2px solid var(--line); padding: 0.85rem 0.75rem 0.85rem 1rem; position: relative; cursor: pointer; transition: border-color 0.3s var(--ease-expo), background-color 0.3s var(--ease-expo); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .dm-h-step:hover { background-color: oklch(1 0 0 / 0.025); } .dm-h-step.is-active { border-left-color: var(--local-accent); background-color: oklch(1 0 0 / 0.055); padding-bottom: 1rem; } .dm-h-step:focus-visible { outline: 2px solid var(--local-accent); outline-offset: 2px; background-color: oklch(1 0 0 / 0.03); } .dm-h-step-meta { font-family: var(--font-mono); font-size: 0.62rem; color: var(--local-accent); letter-spacing: 0.05em; } .dm-h-step h3 { font-size: 0.95rem; color: var(--text); margin: 0.15rem 0; } .dm-h-step p { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.4; } @media (max-width: 768px) { .dm-h-layout { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .dm-h-dial-dot, .dm-h-step { transition: none !important; } } /* ===================================================================== Overdrive Mode styles ===================================================================== */ /* --- CRT scanner scanline & texture --- */ .faqtp-panel, .bezel-core.instrument { position: relative; } .faqtp-panel::after, .bezel-core.instrument::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, oklch(1 0 0 / 0.015) 0px, oklch(1 0 0 / 0.015) 1px, transparent 1px, transparent 3px ); pointer-events: none; z-index: 5; opacity: 0.85; } .faqtp-panel { filter: url("#crt-warp"); } /* --- Form submit loader animations --- */ .btn .ico-loader { display: none; width: 14px; height: 14px; stroke: currentColor; stroke-dasharray: 45; stroke-dashoffset: 0; animation: btn-spin 1.1s linear infinite, btn-dash 1.5s ease-in-out infinite; } .btn.is-loading .ico-arrow { display: none; } .btn.is-loading .ico-loader { display: block; } @keyframes btn-spin { to { transform: rotate(360deg); } } @keyframes btn-dash { 0% { stroke-dashoffset: 45; } 50% { stroke-dashoffset: 12; transform: rotate(135deg); } 100% { stroke-dashoffset: 45; transform: rotate(450deg); } } /* --- View Transitions API animations for FAQ --- */ .faqtp-answer.is-active { view-transition-name: faq-answer; } ::view-transition-old(faq-answer) { animation: 90ms var(--ease-quart) both fade-out; } ::view-transition-new(faq-answer) { animation: 200ms var(--ease-quart) 90ms both fade-in, 320ms var(--ease-expo) slide-up; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { transform: translateY(16px); } to { transform: translateY(0); } } /* --- Scroll-driven animations --- */ @supports (animation-timeline: view()) { /* Timeline rail fill */ .v2-rail i { animation: rail-fill-scroll linear both; animation-timeline: view(); animation-range: entry 10% exit 85%; transform-origin: top; } /* Timeline nodes glow */ .v2-node { animation: node-glow-scroll linear both; animation-timeline: view(); animation-range: entry 35% exit 65%; } /* Hero Gauge sweeps from 100% (empty) to 39% (score 61) */ .gauge-value { animation: gauge-fill-scroll linear both; animation-timeline: view(); animation-range: entry 25% cover 55%; } } @supports (animation-timeline: scroll()) { /* Shrink floating header nav bar smoothly over initial scroll path */ .nav-fullwidth { animation: nav-shrink-scroll linear both; animation-timeline: scroll(root); animation-range: 0 100px; } } @keyframes rail-fill-scroll { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes node-glow-scroll { 0%, 100% { background: var(--line-strong); box-shadow: none; } 50% { background: var(--signal); box-shadow: 0 0 14px var(--signal); } } @keyframes gauge-fill-scroll { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 39; } } @keyframes nav-shrink-scroll { to { margin-top: 0.5rem; padding-top: 0.35rem; padding-bottom: 0.35rem; background: var(--nav-bg-scrolled); border-color: var(--line-strong); box-shadow: 0 1px 0 oklch(1 0 0 / 0.08) inset, 0 16px 35px -18px oklch(0.03 0.02 50 / 0.9); } } /* ========================================================================== VISTLETECH OPS DESK (DASHBOARD PREVIEW SECTION) ========================================================================== */ .ops-desk { padding-block: clamp(5rem, 11vh, 9.5rem); position: relative; } .ops-desk-hint { text-align: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; margin-top: -1.5rem; margin-bottom: 1.5rem; } .ops-desk-head { max-width: var(--ch-headline); margin-bottom: clamp(2.5rem, 6vh, 4.5rem); } .ops-desk-intro { margin-top: 1.2rem; color: var(--text-muted); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height: 1.6; } /* Outer layout */ .ops-desk-bezel { width: 100%; } .ops-desk-core { background: var(--surface); display: flex; flex-direction: column; padding: 0 !important; /* overrides standard padding to fit topbar flush */ overflow: hidden; } /* Top Status Bar */ .ops-desk-top { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: var(--void); border-bottom: 1px solid var(--line); } .ops-desk-brand { display: flex; align-items: center; gap: 0.6rem; } .ops-desk-brand .brand-mark { background: var(--signal); color: var(--void); font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; padding: 0.15rem 0.35rem; border-radius: 4px; letter-spacing: 0.02em; } .ops-desk-brand .brand-name { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0.02em; } .ops-desk-status { display: flex; align-items: center; gap: 0.5rem; } .ops-desk-status .label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.02em; } /* Pulse indicator */ .pulse-green { width: 7px; height: 7px; background: var(--ok); border-radius: 50%; position: relative; } .pulse-green::after { content: ""; position: absolute; inset: -3px; border: 1px solid var(--ok); border-radius: 50%; animation: pulse-ring-glow 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite; } @keyframes pulse-ring-glow { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } } /* Inner Body: Sidebar + Workspace */ .ops-desk-body { display: grid; grid-template-columns: 280px 1fr; min-height: 480px; } /* Sidebar: Leads list */ .ops-leads-sidebar { border-right: 1px solid var(--line); background: var(--void); display: flex; flex-direction: column; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); } .sidebar-header .label { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); letter-spacing: 0.05em; text-transform: uppercase; } .sidebar-header .badge { font-family: var(--font-mono); font-size: 0.68rem; background: var(--surface-2); color: var(--text-muted); padding: 0.15rem 0.45rem; border-radius: 99px; border: 1px solid var(--line); } .ops-leads-list { display: flex; flex-direction: column; overflow-y: auto; } /* Lead Item Button */ .ops-lead-item { width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; cursor: pointer; outline: none; transition: background 0.22s var(--ease-quart); } .ops-lead-item:hover { background: var(--surface); } .ops-lead-item.is-active { background: var(--surface-2); position: relative; } .ops-lead-item.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal); } .ops-lead-item .lead-meta { display: flex; flex-direction: column; gap: 0.2rem; } .ops-lead-item .company { font-family: var(--font-body); font-weight: 550; font-size: 0.95rem; color: var(--text); letter-spacing: -0.01em; } .ops-lead-item .time { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); } /* Status Badges */ .status-badge { display: inline-block; align-self: start; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.03em; padding: 0.18rem 0.45rem; border-radius: 4px; text-transform: uppercase; } .status-badge.chatbot { background: oklch(0.79 0.155 64 / 0.08); border: 1px solid oklch(0.79 0.155 64 / 0.2); color: var(--signal); } .status-badge.form-capture { background: oklch(0.82 0.1 196 / 0.08); border: 1px solid oklch(0.82 0.1 196 / 0.2); color: var(--data); } .status-badge.manual { background: oklch(0.66 0.02 68 / 0.12); border: 1px solid oklch(0.66 0.02 68 / 0.25); color: var(--text-muted); } /* Workspace panel */ .ops-workspace { display: flex; flex-direction: column; padding: 1.8rem; background: var(--surface); min-width: 0; /* allows text wrapping inside flex */ } .workspace-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1.4rem; gap: 1rem; } .workspace-header .lead-title { font-family: var(--font-display); font-size: clamp(1.3rem, 3.5vw, 1.65rem); font-weight: 600; color: var(--text); margin: 0; } .workspace-header .lead-score { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); } .workspace-header .lead-score b { color: var(--signal); font-size: 1.1rem; font-weight: 600; } /* Workspace Info Grid */ .workspace-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 1.8rem; } .meta-item { display: flex; flex-direction: column; gap: 0.35rem; } .meta-item .label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.06em; } .meta-item .val { font-family: var(--font-body); font-size: 0.95rem; color: var(--text); font-weight: 450; } .meta-item .val.accent-teal { color: var(--data); font-weight: 500; } /* AI Outreach Draft Window */ .workspace-draft-box { flex: 1; display: flex; flex-direction: column; background: var(--void); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .draft-header { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1.1rem; background: oklch(1 0 0 / 0.015); border-bottom: 1px solid var(--line); } .draft-header .label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.05em; text-transform: uppercase; } .draft-header .badge { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.02em; padding: 0.15rem 0.4rem; border-radius: 4px; } .draft-header .badge.draft-status { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--line); } .draft-header .badge.draft-status.is-ready { background: oklch(0.82 0.13 158 / 0.08); border: 1px solid oklch(0.82 0.13 158 / 0.2); color: var(--ok); } .draft-body { flex: 1; padding: 1.2rem; overflow-y: auto; min-height: 180px; } .draft-content { margin: 0; font-family: var(--font-body); font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); white-space: pre-wrap; word-break: break-word; } .draft-content.typing { color: var(--text); border-right: 2px solid var(--signal); animation: draft-caret-blink 0.75s step-end infinite; } @keyframes draft-caret-blink { from, to { border-color: transparent; } 50% { border-color: var(--signal); } } .draft-actions { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1.1rem; border-top: 1px solid var(--line); background: oklch(1 0 0 / 0.01); } .btn-sm { font-size: 0.78rem; padding: 0.5rem 1rem; } /* Custom layout responsive overrides */ @media (max-width: 860px) { .ops-desk-body { grid-template-columns: 1fr; min-height: auto; } .ops-leads-sidebar { border-right: none; border-bottom: 1px solid var(--line); } .ops-leads-list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.4rem 0.8rem; gap: 0.6rem; scrollbar-width: none; /* Hide scrollbar for Firefox */ } .ops-leads-list::-webkit-scrollbar { display: none; /* Hide scrollbar for Chrome/Safari/Edge */ } .ops-lead-item { border: 1px solid var(--line); border-radius: var(--r-md); width: 260px; flex-shrink: 0; scroll-snap-align: start; padding: 1rem; } .ops-lead-item.is-active::before { left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 3px; } .workspace-meta-grid { grid-template-columns: 1fr; gap: 0.8rem; } .workspace-header { flex-direction: column; align-items: flex-start; gap: 0.4rem; } } /* =================================================================== DESKTOP VIEWPORT-FIT — each section fills one screen height Applied at ≥ 960px where screens are tall enough for single-section views. Content is vertically centered within each viewport frame. Uses min-height (not height) so sections grow gracefully if content exceeds the viewport — no clipping, no overflow: hidden. =================================================================== */ @media (min-width: 960px) { main > section { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 5vh, 5rem); } /* Prevent flex children from shrinking below their natural height */ main > section > * { flex-shrink: 0; } /* Hero — extra top clearance for the fixed navigation bar */ .hero { padding-top: clamp(7rem, 13vh, 10rem); } /* Ops Desk — has its own padding-block; override to match viewport-fit */ .ops-desk { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 5vh, 5rem); } /* Proof — lightweight timeline strip, doesn't need full viewport */ .proof { min-height: 65vh; min-height: 65dvh; } /* Contact — the form is very long; top-align instead of centering */ .contact { justify-content: flex-start; padding-top: clamp(6rem, 10vh, 8rem); } } /* Safeguard: on very short viewports (e.g. windowed ultrawides at 21:9) revert to natural flow so content isn't cramped */ @media (min-width: 960px) and (max-height: 700px) { main > section, .ops-desk { min-height: auto; display: block; padding-block: clamp(4rem, 8vh, 7rem); } } /* =================================================================== SMALL PHONES (≤ 480px) Compressed layout: tighter gutters, smaller type scale, stacked CTAs, and simplified grid layouts for narrow portrait screens. =================================================================== */ @media (max-width: 480px) { :root { --gutter: 1rem; } h1 { font-size: clamp(2.1rem, 1.5rem + 3.2vw, 2.8rem); } h2 { font-size: clamp(1.6rem, 1rem + 3vw, 2.2rem); } h3 { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); } main > section { padding-block: clamp(2.5rem, 6vh, 3.5rem); } /* Stack hero CTAs vertically on small screens */ .hero-actions { flex-direction: column; gap: 0.6rem; } .hero-actions .btn { width: 100%; justify-content: center; text-align: center; } /* Tighter card padding */ .panel { padding: 1.1rem; } /* Smaller FAQ question buttons */ .faqtp-q { font-size: 0.7rem; padding: 0.45rem 0.55rem; } /* Outcome cards */ .outcome { padding: clamp(1.1rem, 2.5vw, 1.5rem); } /* Before/After copy sizing */ .ba-lede { font-size: 0.9rem; } .ba-features li { font-size: 0.88rem; } /* Contact reassurance list */ .contact-reassure { gap: 0.5rem; } .contact-reassure li { font-size: 0.85rem; } } /* =================================================================== TABLETS LANDSCAPE / SMALL LAPTOPS (901px – 1024px) Intermediate layout adjustments for screens between tablet and full desktop. Tightens grid gaps and column ratios. =================================================================== */ @media (max-width: 1024px) and (min-width: 901px) { .hero-grid { grid-template-columns: 1.3fr 0.7fr; gap: clamp(1.5rem, 3vw, 2.5rem); } .ba-grid { gap: clamp(1.5rem, 3vw, 2rem); } .work-grid { gap: clamp(1.5rem, 3vw, 2.5rem); } .contact-grid { gap: clamp(1.5rem, 3vw, 2.5rem); } } /* =================================================================== LARGE MONITORS (≥ 1440px) Wider content area and slightly larger typography for spacious desktop layouts typical of QHD / 2K displays. =================================================================== */ @media (min-width: 1440px) { :root { --max: 1320px; } h1 { font-size: clamp(4rem, 2rem + 3.5vw, 5.8rem); } } /* =================================================================== ULTRAWIDE MONITORS (≥ 1920px) Content capped to prevent uncomfortable line lengths and layout stretching on 4K UHD and ultrawide displays. =================================================================== */ @media (min-width: 1920px) { :root { --max: 1440px; } body { font-size: 1.06rem; } } /* =================================================================== SUPER-ULTRAWIDE / 32:9 (≥ 2560px) Hard content cap for 5120×1440 and similar aspect ratios to prevent the layout from becoming uncomfortably wide. =================================================================== */ @media (min-width: 2560px) { :root { --max: 1560px; } }