/* ============================================================
Chronomation — Brand System v2 (midnight violet · royal)
============================================================ */
/* R25: font @import rules removed — fonts now loaded via parallel
in each HTML (before main.css). @import here was serial render-blocking:
the browser could only discover the font CSS *after* downloading + parsing main.css. */
:root {
/* Signature easing curve (spec §2.2 — single curve site-wide) */
--ease-signature: cubic-bezier(.22, .61, .36, 1);
/* Backgrounds — midnight violet, warmed a hair toward Anthropic's premium
ink (ANTHROPIC FEEL pt.2: a faint red-channel lift pulls the surfaces off
pure-cold violet without going brown — old values in comments). */
--bg-0: #0C0917; /* was #0B0917 — deep midnight, +1 R */
--bg-1: #15112A; /* was #13112A — panel, warmer */
--bg-2: #1D1838; /* was #1B1838 — raised surface */
--bg-3: #272148; /* was #252148 — elevated */
/* Ink — warm pearl on dark */
--ink-0: #F5F0E6;
--ink-1: #B4ACC0;
--ink-2: #9A96AB; /* R13: was #6F6A85 (3.82:1 fail), now 6.87:1 on bg-0 */
/* Accent — brand violet (matches user logo) */
--accent: #8B7BFF;
--accent-deep: #1F1A4D;
--accent-soft: #B2A4FF;
--accent-glow: rgba(139, 123, 255, 0.42);
/* Royal — champagne for "unreal" moments. Used SPARINGLY. */
--royal: #D4B886;
--royal-soft: #E6CEA5;
--royal-glow: rgba(212, 184, 134, 0.35);
/* Warm — Anthropic clay/coral (ANTHROPIC FEEL pt.2: nudged the warm family
from the old salmon (#D88A7A) toward Anthropic's signature terracotta
(~#D97757). Used for Chronos CA accents AND the new converging-frame
hairline. Old: warm #D88A7A · soft #E8B0A4 · glow rgba(216,138,122,…). */
--warm: #D97757; /* Anthropic clay */
--warm-soft: #E59A80; /* lighter clay for text/icons (contrast-safe) */
--warm-glow: rgba(217, 119, 87, 0.35);
/* Frame hairline accent — low-opacity warm clay line for the .anthropic-frame
converging border. Tunable in one place. */
--af-line: rgba(226, 133, 99, 0.7);
--af-glow: rgba(217, 119, 87, 0.22);
/* Section frame (the scroll-wrapping lines). A THICK soft band that bends
around the section then FADES, leaving a depth shadow + a warm-gold
off-white interior tint. */
--afs-w: 2.5px; /* line thickness (thin) */
--afs-line: rgba(186, 142, 96, 0.55); /* warm wrap line (fades out) */
--afs-shadow: rgba(120, 84, 44, 0.14); /* page depth shadow */
--afs-warm: rgba(208, 174, 110, 0.07); /* paper wash: gold-tinted off-white */
--afs-rail: rgba(168, 132, 88, 0.26); /* the side rails running down the page */
--afs-radius: 22px; /* soft-edged shape, not a square */
/* Lines */
--border: rgba(244, 239, 230, 0.08);
--border-strong: rgba(244, 239, 230, 0.16);
--grid-line: rgba(255, 255, 255, 0.035);
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-xl: 32px;
--r-pill: 999px;
--shadow-soft: 0 8px 30px -10px rgba(0, 0, 0, 0.5);
--shadow-accent: 0 18px 50px -16px var(--accent-glow);
--shadow-royal: 0 18px 50px -16px var(--royal-glow);
--pad-section: clamp(72px, 10vw, 140px);
--pad-x: clamp(20px, 5vw, 80px);
--max-w: 1280px;
}
/* ============================================================
LIGHT THEME — token overrides (#13)
============================================================ */
html.theme-light {
--bg-0: #FAF7F0; /* Warm parchment */
--bg-1: #F1ECE0; /* Panel */
--bg-2: #E8E0CF; /* Raised */
--bg-3: #DDD2BB; /* Elevated */
--ink-0: #1B1638; /* Deep midnight as ink */
--ink-1: #4A4365;
--ink-2: #665E7C; /* R13: was #847C9B (3.68:1 fail), now 5.68:1 on bg-0 */
--accent: #5C45D6; /* Deeper violet for contrast on light */
--accent-deep: #2E1F9F;
--accent-soft: #5E48E3; /* R13: was #7D6BE8 (3.82:1 fail), now 5.59:1 on bg-0 (link hover color) */
--accent-glow: rgba(92, 69, 214, 0.28);
--royal: #B89A55; /* Deeper champagne for light */
--royal-soft: #9A8045;
--royal-glow: rgba(184, 154, 85, 0.25);
--border: rgba(27, 22, 56, 0.10);
--border-strong: rgba(27, 22, 56, 0.20);
--grid-line: rgba(27, 22, 56, 0.04);
--shadow-soft: 0 8px 30px -10px rgba(27, 22, 56, 0.18);
}
html.theme-light .hero-mesh-canvas { opacity: 0.35; }
html.theme-light .grain { opacity: 0.02; mix-blend-mode: multiply; }
html.theme-light .hero-logo-svg .hand-h,
html.theme-light .hero-logo-svg .hand-m { stroke: #1B1638; }
html.theme-light .site-nav-inner {
background: rgba(250, 247, 240, 0.72);
}
html.theme-light .site-nav.scrolled .site-nav-inner {
background: rgba(250, 247, 240, 0.92);
}
html.theme-light .nav-links a,
html.theme-light .nav-links button { color: var(--ink-1); }
html.theme-light .nav-links a:hover,
html.theme-light .nav-links button:hover { color: var(--ink-0); }
html.theme-light .latency-tile,
html.theme-light .founder-presence,
html.theme-light .hero-since,
html.theme-light .live-pulse,
html.theme-light .toggle-cluster {
background: rgba(27,22,56,0.04);
border-color: var(--border);
color: var(--ink-1);
}
html.theme-light .live-pulse .n { color: var(--ink-0); }
html.theme-light .latency-tile .v { color: var(--ink-0); }
html.theme-light .activity-banner {
background: rgba(250,247,240,0.92);
color: var(--ink-0);
border-color: var(--border-strong);
}
html.theme-light .chrono-hint {
background: rgba(250,247,240,0.92);
color: var(--accent);
border-color: var(--border-strong);
}
html.theme-light .btn-ghost { color: var(--ink-1); border-color: var(--border-strong); }
html.theme-light .btn-ghost:hover { color: var(--ink-0); background: rgba(27,22,56,0.04); }
html.theme-light .lite-toggle { color: var(--ink-1); border-color: var(--border-strong); }
html.theme-light .brand-wordmark { color: var(--ink-0); }
html.theme-light .built-at-badge { background: rgba(27,22,56,0.04); }
html.theme-light *::selection { background: var(--accent); color: var(--bg-0); }
* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent); color: white; }
html { scroll-behavior: auto; }
body {
background: var(--bg-0);
color: var(--ink-0);
font-family: 'Satoshi', system-ui, -apple-system, sans-serif;
font-weight: 400;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'ss01' on, 'ss02' on;
overflow-x: hidden;
position: relative;
}
.tnum { font-variant-numeric: tabular-nums; }
/* === CROSS-PLATFORM MOBILE HARDENING (iOS + Android — identical) ===========
Zero-risk universal fixes so the site behaves the same on both phone OSes.
- text-size-adjust: stop iOS inflating body text when rotated to landscape.
- tap-highlight: kill the grey/blue flash on tap (set on , inherits).
- inner scrollers: momentum scroll + don't chain the scroll to the page
behind them (so flicking the chat to its end doesn't scroll the whole page;
iOS rubber-band & Android glow both honour overscroll-behavior).
- input font-size >= 16px on coarse pointers: iOS Safari auto-zooms the
viewport when you focus a field smaller than 16px — pinning it kills the
jarring zoom-in/out jump. Android is unaffected by the rule.
------------------------------------------------------------------------- */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
.ai-thread,
.lad-stack,
.chat-mock[data-chat-stack] {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
@media (pointer: coarse) {
input, textarea, select { font-size: max(16px, 1em); }
}
/* === /CROSS-PLATFORM MOBILE HARDENING === */
/* ============================================================
GRAIN OVERLAY
============================================================ */
.grain {
position: fixed; inset: 0; pointer-events: none; z-index: 1;
opacity: 0.05; mix-blend-mode: overlay;
background-image: url('/assets/img/noise-200.png');
background-repeat: repeat; background-size: 200px 200px;
/* PERF (iter 2): KEPT the overlay blend — at 0.05 on the near-black canvas the
overlay's highlight/shadow lift is the signature filmic grain; plain opacity
of the same noise reads as flat grey speckle (cheaper-looking) and isn't
worth the micro-gain. Instead, promote the grain to its own cached
compositor layer via translateZ(0). The grain sits at z-index:1 (only the
static page background paints *beneath* it, so its blend backdrop rarely
changes); caching its raster means unrelated repaints above it can't force a
synchronous re-blend pass. Zero visual change. */
transform: translateZ(0);
}
/* ============================================================
TYPOGRAPHY
============================================================ */
.display {
font-family: 'Clash Display', system-ui, sans-serif;
font-weight: 600; letter-spacing: -0.04em; line-height: 1.04;
font-display: optional;
}
.display-xl {
font-family: 'Clash Display', system-ui, sans-serif;
font-weight: 700;
font-size: clamp(2.4rem, 6.4vw, 5.4rem);
letter-spacing: -0.045em; line-height: 1.02;
font-display: optional;
}
.display-lg {
font-family: 'Clash Display', system-ui, sans-serif;
font-weight: 600;
font-size: clamp(2rem, 4.5vw, 3.4rem);
letter-spacing: -0.035em; line-height: 1.06;
font-display: optional;
}
.display-md {
font-family: 'Clash Display', system-ui, sans-serif;
font-weight: 600;
font-size: clamp(1.4rem, 2.6vw, 2.1rem);
letter-spacing: -0.025em; line-height: 1.14;
font-display: optional;
}
/* Editorial italic classes removed — reverted to brand fonts (Clash Display + Satoshi). */
.clock-tag {
font-family: 'Satoshi', sans-serif;
font-weight: 500;
font-size: clamp(0.92rem, 1.05vw, 1rem);
color: var(--accent-soft);
max-width: 38ch; margin: 0 auto;
letter-spacing: 0.01em;
line-height: 1.4;
}
.footer-sub {
margin-top: 40px; text-align: center;
font-family: 'Satoshi', sans-serif;
font-weight: 500;
font-size: 0.95rem; letter-spacing: 0.01em;
color: var(--accent-soft);
}
/* Shimmer word — back to Clash Display (display font), keeps the brand shimmer */
.shimmer-word {
font-family: 'Clash Display', sans-serif;
font-weight: 600;
letter-spacing: -0.04em;
background: linear-gradient(90deg, var(--accent-soft) 0%, var(--royal) 35%, var(--accent-soft) 70%, var(--royal) 100%);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 6s linear infinite;
}
.eyebrow {
font-family: 'Satoshi', system-ui, sans-serif;
font-weight: 500; font-size: 0.72rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent-soft); display: inline-block;
}
.eyebrow.warm { color: var(--warm-soft); }
.eyebrow.royal { color: var(--royal-soft); }
.eyebrow.muted { color: var(--ink-2); }
.lead {
font-size: clamp(1.05rem, 1.35vw, 1.22rem);
color: var(--ink-1); max-width: 64ch; line-height: 1.55;
}
p { color: var(--ink-1); max-width: 68ch; }
p strong { color: var(--ink-0); font-weight: 500; }
a { color: var(--ink-0); text-decoration: none; transition: color 200ms ease; }
a:hover { color: var(--accent-soft); }
:focus-visible {
outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}
/* ============================================================
LAYOUT
============================================================ */
.container {
max-width: var(--max-w); margin: 0 auto;
padding-left: var(--pad-x); padding-right: var(--pad-x);
position: relative; z-index: 2;
}
.section {
padding-top: var(--pad-section); padding-bottom: var(--pad-section);
position: relative;
}
.section-tight { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }
/* ============================================================
HERO
============================================================ */
.hero {
position: relative; overflow: hidden;
padding-top: 140px;
padding-bottom: clamp(64px, 8vw, 120px);
}
.hero-grid {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
/* CANVAS-BASED WEBGL MESH (replaces CSS mesh) */
.hero-mesh-canvas {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
pointer-events: none; opacity: 0.88;
/* Tight ellipse + closest-side keyword forces sharp fade by the corners. */
mask-image:
radial-gradient(ellipse closest-side at 50% 55%, black 0%, black 45%, transparent 95%),
linear-gradient(black, black);
mask-composite: intersect;
-webkit-mask-image:
radial-gradient(ellipse closest-side at 50% 55%, black 0%, black 45%, transparent 95%),
linear-gradient(black, black);
-webkit-mask-composite: source-in;
}
/* CSS fallback mesh */
.hero-mesh {
position: absolute; inset: -20%; z-index: 0;
filter: blur(80px); opacity: 0.45;
pointer-events: none;
background:
radial-gradient(60% 50% at 20% 30%, var(--accent) 0%, transparent 60%),
radial-gradient(50% 40% at 80% 70%, var(--accent-deep) 0%, transparent 60%),
radial-gradient(40% 35% at 60% 30%, var(--royal) 0%, transparent 70%);
animation: meshDrift 22s ease-in-out infinite alternate;
}
.hero-mesh.warm-led {
background:
radial-gradient(60% 50% at 20% 30%, var(--warm) 0%, transparent 60%),
radial-gradient(50% 40% at 80% 70%, var(--accent) 0%, transparent 60%),
radial-gradient(40% 35% at 60% 30%, var(--accent-deep) 0%, transparent 70%);
opacity: 0.40;
}
@keyframes meshDrift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(3%, -2%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .hero-mesh { animation: none; } }
/* ============================================================
NAV
============================================================ */
.site-nav {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 100; width: calc(100% - 32px); max-width: 1240px;
transition: all 360ms var(--ease-signature);
view-transition-name: nav;
}
.site-nav-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 14px 16px 14px 22px;
background: rgba(11, 9, 23, 0.62);
/* PERF: fixed frosted nav re-blurs everything scrolling behind it every
frame; blur(22px) is ~half-again the GPU cost of blur(13px) for a frost
that's visually near-identical. Dropped 22px -> 13px and nudged the base
bg opacity 0.55 -> 0.62 so the glass reads just as solid at the lower
radius. saturate kept for the premium colour pop. */
backdrop-filter: blur(13px) saturate(160%);
-webkit-backdrop-filter: blur(13px) saturate(160%);
border: 1px solid var(--border);
border-radius: var(--r-pill); box-shadow: var(--shadow-soft);
/* PERF (iter 2): isolate the frosted nav's own layout/style recalc from the
rest of the fixed region. `layout style` (NOT `paint`) is deliberate — the
nav carries a soft drop-shadow that paints OUTSIDE its box, so `contain:
paint` would clip it (visual regression). layout+style still scopes recalc
so internal reflow (e.g. the scrolled-state bg/border swap) can't dirty
siblings, and the backdrop-filter stays on its already-promoted parent
layer (.site-nav is position:fixed + transform). */
contain: layout style;
}
.site-nav.scrolled .site-nav-inner {
background: rgba(11, 9, 23, 0.78);
border-color: var(--border-strong);
}
.brand-logo {
display: flex; align-items: center; gap: 12px;
view-transition-name: logo;
}
.brand-logo .logo-img { height: 36px; width: auto; display: block; }
.brand-mark-wrap { display: inline-flex; align-items: center; justify-content: center; }
.brand-wordmark {
font-family: 'Clash Display', sans-serif;
font-weight: 600; font-size: 1.15rem;
letter-spacing: -0.035em;
color: var(--ink-0);
line-height: 1;
}
@media (max-width: 1080px) { .brand-wordmark { display: none; } }
.nav-links {
display: flex; align-items: center; gap: 4px; list-style: none;
}
.nav-links a, .nav-links button {
font-family: 'Satoshi', sans-serif; font-size: 0.875rem;
font-weight: 400;
color: var(--ink-1); padding: 8px 12px;
border-radius: var(--r-pill);
background: transparent; border: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
line-height: 1;
letter-spacing: inherit;
transition: color 200ms ease, background 200ms ease;
}
.nav-links a:hover, .nav-links button:hover {
color: var(--ink-0); background: rgba(244, 239, 230, 0.04);
}
.nav-links a[aria-current="page"] { color: var(--ink-0); }
/* Normalize caret SVG inside dropdown buttons — same size + vertical optical correction
so Products + More carets sit visually centered with the text baseline. */
.nav-links button > svg {
flex-shrink: 0;
transform: translateY(1px);
}
.nav-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.nav-wa {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.875rem;
background: var(--accent); color: white;
padding: 10px 18px; border-radius: var(--r-pill);
box-shadow: 0 8px 26px -10px var(--accent-glow);
transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.nav-wa:hover {
transform: translateY(-1px);
box-shadow: 0 14px 36px -10px var(--accent-glow);
background: var(--accent-soft); color: white;
}
.lite-toggle {
font-size: 0.75rem; color: var(--ink-2);
border: 1px solid var(--border); padding: 6px 10px;
border-radius: var(--r-pill); background: transparent; cursor: pointer;
letter-spacing: 0.06em; transition: all 200ms ease;
}
.lite-toggle:hover { color: var(--ink-0); border-color: var(--border-strong); }
.nav-dropdown { position: relative; }
.nav-flyout {
position: absolute; top: calc(100% + 12px); left: 50%;
transform: translateX(-50%) translateY(8px);
width: min(640px, 86vw);
background: var(--bg-1);
border: 1px solid var(--border-strong); border-radius: var(--r-lg);
padding: 22px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
opacity: 0; pointer-events: none;
transition: all 280ms var(--ease-signature);
}
.nav-dropdown:hover .nav-flyout,
.nav-dropdown:focus-within .nav-flyout {
opacity: 1; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.flyout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.flyout-col h6 {
font-family: 'Satoshi', sans-serif; font-size: 0.7rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-2); margin-bottom: 12px; font-weight: 500;
}
.flyout-link {
display: block; padding: 12px;
border-radius: var(--r-md);
background: rgba(255,255,255,0.02);
border: 1px solid var(--border); margin-bottom: 8px;
transition: all 200ms ease;
}
.flyout-link:hover {
background: rgba(139, 123, 255, 0.08);
border-color: rgba(139, 123, 255, 0.3);
transform: translateY(-1px);
}
.flyout-link strong {
display: block; color: var(--ink-0);
font-family: 'Clash Display', sans-serif; font-weight: 600;
font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 2px;
}
.flyout-link span { color: var(--ink-2); font-size: 0.8rem; }
.waitlist-mini { margin-top: 14px; display: flex; gap: 8px; }
.waitlist-mini input {
flex: 1; background: var(--bg-2); border: 1px solid var(--border);
color: var(--ink-0); padding: 9px 12px; border-radius: var(--r-pill);
font-family: inherit; font-size: 0.8rem; outline: none;
}
.waitlist-mini input:focus { border-color: var(--accent); }
.waitlist-mini button {
background: var(--accent); color: white; border: none;
padding: 9px 14px; border-radius: var(--r-pill);
font-family: inherit; font-size: 0.8rem; font-weight: 500;
cursor: pointer; transition: background 200ms ease;
}
.waitlist-mini button:hover { background: var(--accent-soft); }
.mobile-toggle {
display: none; background: transparent; border: 1px solid var(--border);
color: var(--ink-0); width: 40px; height: 40px; border-radius: 50%;
cursor: pointer; align-items: center; justify-content: center;
}
.mobile-toggle svg { width: 18px; height: 18px; }
.mobile-overlay {
position: fixed; inset: 0; z-index: 99;
background: var(--bg-0);
display: flex; flex-direction: column;
padding: 100px var(--pad-x) 40px;
transform: translateY(-100%);
transition: transform 480ms var(--ease-signature);
overflow-y: auto;
}
.mobile-overlay.is-open { transform: translateY(0); }
.mobile-overlay .mobile-links { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.mobile-overlay .mobile-links a {
font-family: 'Clash Display', sans-serif; font-weight: 600;
font-size: 1.8rem; letter-spacing: -0.03em; color: var(--ink-0);
padding: 12px 0; border-bottom: 1px solid var(--border);
opacity: 0; transform: translateY(8px);
transition: opacity 280ms ease, transform 280ms ease, color 200ms ease;
}
.mobile-overlay.is-open .mobile-links a { opacity: 1; transform: translateY(0); }
.mobile-overlay.is-open .mobile-links a:nth-child(1) { transition-delay: 80ms; }
.mobile-overlay.is-open .mobile-links a:nth-child(2) { transition-delay: 120ms; }
.mobile-overlay.is-open .mobile-links a:nth-child(3) { transition-delay: 160ms; }
.mobile-overlay.is-open .mobile-links a:nth-child(4) { transition-delay: 200ms; }
.mobile-overlay.is-open .mobile-links a:nth-child(5) { transition-delay: 240ms; }
.mobile-overlay.is-open .mobile-links a:nth-child(6) { transition-delay: 280ms; }
.mobile-overlay.is-open .mobile-links a:nth-child(7) { transition-delay: 320ms; }
.mobile-overlay.is-open .mobile-links a:nth-child(8) { transition-delay: 360ms; }
@media (max-width: 1080px) {
.nav-links, .nav-actions .lite-toggle { display: none; }
.mobile-toggle { display: inline-flex; }
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.95rem;
padding: 14px 24px; border-radius: var(--r-pill);
cursor: pointer; border: 1px solid transparent;
transition: all 220ms var(--ease-signature);
background: transparent; color: var(--ink-0); line-height: 1;
}
.btn-primary { background: var(--accent); color: white; box-shadow: 0 14px 40px -14px var(--accent-glow); }
.btn-primary:hover { background: var(--accent-soft); color: white; transform: translateY(-2px); box-shadow: 0 22px 50px -14px var(--accent-glow); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--ink-0); }
.btn-ghost:hover { border-color: var(--ink-0); background: rgba(244,239,230,0.04); transform: translateY(-1px); }
.btn-warm { background: var(--warm); color: var(--bg-0); box-shadow: 0 14px 40px -14px var(--warm-glow); }
.btn-warm:hover { background: var(--warm-soft); color: var(--bg-0); transform: translateY(-2px); }
.btn-arrow { transition: transform 220ms ease; display: inline-block; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-call {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; background: var(--bg-2);
border: 1px solid var(--border-strong); border-radius: var(--r-pill);
color: var(--ink-0); font-size: 0.875rem;
font-family: 'Satoshi', sans-serif; font-weight: 500;
transition: all 200ms ease; font-variant-numeric: tabular-nums;
}
.btn-call:hover { border-color: var(--accent); background: rgba(139,123,255,0.08); color: var(--ink-0); }
/* ============================================================
HERO LAYOUT + LOGO CLOCK
============================================================ */
.hero-layout {
display: grid; grid-template-columns: 1.15fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center; position: relative; z-index: 2;
}
@media (max-width: 1024px) { .hero-layout { grid-template-columns: 1fr; } }
.hero-content { max-width: 720px; }
.hero-eyebrow { margin-bottom: 22px; }
.hero-title { margin-top: 18px; margin-bottom: 28px; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
/* Hero logo presentation — real logo with parallax + sweeping needle */
.hero-logo-wrap {
position: relative;
display: flex; flex-direction: column;
align-items: center; gap: 28px;
transform-style: preserve-3d;
perspective: 1200px;
}
.hero-logo-stage {
position: relative;
width: clamp(320px, 38vw, 480px);
height: clamp(320px, 38vw, 480px);
transform-style: preserve-3d;
transition: transform 280ms var(--ease-signature);
}
.hero-logo-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
filter: drop-shadow(0 24px 80px var(--accent-glow));
}
.hero-logo-needle {
position: absolute;
/* Position over the speedometer face in the logo */
/* The needle sweeps based on current minute */
top: 50%; left: 50%;
width: 2px;
height: 24%;
background: linear-gradient(to top, transparent, var(--royal-soft));
transform-origin: bottom center;
transform: translate(-50%, -100%) rotate(0deg);
border-radius: 2px;
pointer-events: none;
filter: drop-shadow(0 0 6px var(--royal-glow));
transition: transform 1.2s var(--ease-signature);
}
.hero-logo-shimmer {
position: absolute; inset: 0;
pointer-events: none; border-radius: 50%;
opacity: 0;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
rgba(212, 184, 134, 0.4) 0%,
rgba(139, 123, 255, 0.2) 25%,
transparent 45%);
mix-blend-mode: screen;
transition: opacity 200ms ease;
will-change: opacity;
}
.clock-readout {
text-align: center; display: flex; flex-direction: column; gap: 8px;
}
.clock-time {
font-family: 'Clash Display', sans-serif;
font-size: clamp(1.6rem, 2.2vw, 1.9rem);
font-weight: 600; letter-spacing: -0.02em;
color: var(--ink-0); font-variant-numeric: tabular-nums;
}
.clock-zone { font-size: 0.85rem; color: var(--ink-2); letter-spacing: 0.02em; }
.scroll-cue {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 64px; color: var(--ink-2);
font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.scroll-cue svg { animation: bounce 1.8s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }
/* ============================================================
LIVE STATS PULSE
============================================================ */
.live-pulse {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: rgba(139, 123, 255, 0.08);
border: 1px solid rgba(139, 123, 255, 0.2);
border-radius: var(--r-pill);
font-size: 0.78rem; color: var(--ink-0);
font-variant-numeric: tabular-nums;
margin-bottom: 16px;
}
.live-pulse-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #4CD964;
box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7);
animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
0% { box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7); }
70% { box-shadow: 0 0 0 8px rgba(76, 217, 100, 0); }
100% { box-shadow: 0 0 0 0 rgba(76, 217, 100, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-pulse-dot { animation: none; } }
/* ============================================================
PRODUCT CARDS WITH 3D TILT
============================================================ */
.product-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 24px; margin-top: 56px;
}
@media (max-width: 1024px) { .product-grid { grid-template-columns: 1fr; } }
.product-card {
position: relative;
background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 40px; overflow: hidden;
transition: border-color 300ms ease, box-shadow 300ms ease;
isolation: isolate;
transform-style: preserve-3d;
will-change: transform;
}
.product-card::before {
content: ''; position: absolute; inset: 0;
border-radius: var(--r-xl);
padding: 1px;
background: linear-gradient(140deg, transparent 0%, var(--accent) 40%, transparent 70%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 380ms ease;
pointer-events: none; z-index: 2;
}
.product-card:hover { border-color: var(--border-strong); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5); }
.product-card:hover::before { opacity: 1; }
.product-card.warm::before { background: linear-gradient(140deg, transparent 0%, var(--warm) 40%, transparent 70%); }
/* Glass refraction on hover */
.product-card::after {
content: ''; position: absolute;
top: var(--my, 50%); left: var(--mx, 50%);
transform: translate(-50%, -50%);
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(178,164,255,0.18), transparent 70%);
pointer-events: none; opacity: 0;
transition: opacity 280ms ease;
z-index: 1; border-radius: 50%;
mix-blend-mode: screen;
}
.product-card.warm::after { background: radial-gradient(circle, rgba(232,176,164,0.18), transparent 70%); }
.product-card:hover::after { opacity: 1; }
.product-card-eyebrow {
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent-soft); margin-bottom: 24px; display: inline-block;
position: relative; z-index: 2;
}
.product-card.warm .product-card-eyebrow { color: var(--warm-soft); }
.product-card-title {
font-family: 'Clash Display', sans-serif; font-weight: 600;
font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.03em;
color: var(--ink-0); margin-bottom: 14px; line-height: 1.1;
position: relative; z-index: 2;
}
.product-card-tagline {
color: var(--ink-1); font-size: 1.02rem;
margin-bottom: 26px; max-width: 32ch;
position: relative; z-index: 2;
}
.product-card-bullets {
list-style: none; margin-bottom: 32px;
position: relative; z-index: 2;
}
.product-card-bullets li {
display: flex; align-items: flex-start; gap: 12px;
padding: 8px 0; color: var(--ink-1); font-size: 0.95rem;
}
.product-card-bullets li svg {
flex-shrink: 0; margin-top: 3px; color: var(--accent-soft);
}
.product-card.warm .product-card-bullets li svg { color: var(--warm-soft); }
.product-card-cta {
display: inline-flex; align-items: center; gap: 8px;
color: var(--ink-0); font-weight: 500; font-size: 0.95rem;
padding-bottom: 4px; border-bottom: 1px solid var(--border-strong);
transition: all 200ms ease; position: relative; z-index: 2;
}
.product-card-cta:hover { border-color: var(--accent); color: var(--accent-soft); gap: 12px; }
.product-card.warm .product-card-cta:hover { border-color: var(--warm); color: var(--warm-soft); }
.card-preview {
position: absolute; bottom: 100px; right: 40px;
width: 240px; opacity: 0;
transform: translateY(8px) scale(0.97);
transition: all 280ms var(--ease-signature);
pointer-events: none; z-index: 3;
}
.product-card:hover .card-preview { opacity: 1; transform: translateY(0) scale(1); }
@media (max-width: 600px) { .card-preview { display: none; } }
/* ============================================================
MINI CHAT BUBBLES + CA PREVIEW
============================================================ */
.bubble-stack {
display: flex; flex-direction: column; gap: 8px;
padding: 16px; background: #0B141A;
border-radius: var(--r-md);
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);
}
.bubble { padding: 9px 12px; border-radius: 12px; font-size: 0.85rem; max-width: 80%; line-height: 1.35; color: white; }
.bubble.in { background: #202C33; border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble.out { background: #005C4B; border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble .meta { font-size: 0.65rem; color: rgba(255,255,255,0.55); margin-top: 4px; display: block; font-variant-numeric: tabular-nums; }
.bubble.typing { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; background: #202C33; }
.bubble.typing span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.6); animation: typeDot 1.2s infinite; }
.bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes typeDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.ca-preview { background: #0E1014; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,0.06); padding: 16px; font-size: 0.78rem; color: var(--ink-0); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5); }
.ca-preview .pheader { color: var(--ink-2); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; }
.ca-preview .pfield { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ca-preview .pfield:last-child { border-bottom: none; }
.ca-preview .pfield .key { color: var(--ink-2); font-size: 0.72rem; }
.ca-preview .pfield .val { color: var(--ink-0); }
.ca-preview .chip { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 0.65rem; font-weight: 500; margin-left: 6px; }
.ca-preview .chip.g { background: rgba(34,197,94,0.15); color: rgb(74, 222, 128); }
.ca-preview .chip.a { background: rgba(245,158,11,0.15); color: rgb(251,191,36); }
/* ============================================================
COMPARISON TABLE
============================================================ */
.cmp-table {
width: 100%; border-collapse: separate; border-spacing: 0;
margin-top: 48px; font-variant-numeric: tabular-nums;
}
.cmp-table thead th {
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.85rem; color: var(--ink-2);
text-align: left; padding: 18px 22px;
border-bottom: 1px solid var(--border); vertical-align: bottom;
}
.cmp-table thead th.us {
color: var(--ink-0);
font-family: 'Clash Display', sans-serif; font-weight: 600;
font-size: 1rem; letter-spacing: -0.02em;
}
.cmp-table tbody td {
padding: 18px 22px; border-bottom: 1px solid var(--border);
font-size: 0.92rem; color: var(--ink-1); vertical-align: top;
}
.cmp-table tbody td:first-child {
color: var(--ink-2); font-weight: 500;
font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.cmp-table .us-col {
background: linear-gradient(180deg, rgba(139,123,255,0.06) 0%, rgba(139,123,255,0.02) 100%);
border-left: 1px solid rgba(139,123,255,0.2);
border-right: 1px solid rgba(139,123,255,0.2);
color: var(--ink-0); position: relative;
}
.cmp-table tbody tr:first-child .us-col { border-top: 1px solid rgba(139,123,255,0.3); }
.cmp-table tbody tr:last-child .us-col { border-bottom: 1px solid rgba(139,123,255,0.3); }
.cmp-wrap { overflow-x: auto; }
/* ============================================================
FOOTER + CHROME C
============================================================ */
.site-footer {
border-top: 1px solid var(--border);
padding: 80px var(--pad-x) 40px;
background: var(--bg-1); position: relative; z-index: 2;
view-transition-name: footer; overflow: hidden;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 2; }
.footer-grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr;
gap: 48px; margin-bottom: 64px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }
.footer-col h6 {
font-family: 'Satoshi', sans-serif; font-size: 0.7rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-2); margin-bottom: 18px; font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { color: var(--ink-1); font-size: 0.92rem; }
.footer-col ul a:hover { color: var(--ink-0); }
.footer-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand-row .logo-img { height: 40px; width: auto; display: block; }
.footer-tagline { font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.footer-blurb { color: var(--ink-1); font-size: 0.92rem; margin-bottom: 22px; max-width: 38ch; }
.footer-contact { font-size: 0.88rem; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.footer-contact a { color: var(--ink-1); }
.footer-contact a:hover { color: var(--accent-soft); }
.footer-bottom {
border-top: 1px solid var(--border); padding-top: 32px;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 0.78rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.footer-bottom-left p { font-size: inherit; color: inherit; max-width: none; line-height: 1.7; }
.footer-bottom-right { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-bottom-right a { color: var(--ink-2); }
.footer-bottom-right a:hover { color: var(--ink-0); }
/* Chrome C in footer — light tracing edge */
.footer-chrome-c {
position: absolute;
right: -120px; bottom: -100px;
width: 520px; height: 520px;
z-index: 1; opacity: 0.85;
pointer-events: none;
}
.footer-chrome-c svg { width: 100%; height: 100%; }
.footer-chrome-c .c-fill { fill: url(#chrome-grad); opacity: 0.20; }
.footer-chrome-c .c-edge {
fill: none; stroke: url(#chrome-edge-grad); stroke-width: 2;
opacity: 0.6;
}
@media (max-width: 700px) { .footer-chrome-c { width: 360px; height: 360px; right: -80px; bottom: -60px; opacity: 0.6; } }
/* ============================================================
FAB
============================================================ */
.fab-whatsapp {
position: fixed; bottom: 24px; right: 24px;
width: 56px; height: 56px; border-radius: var(--r-pill);
background: #25D366; color: white;
display: flex; align-items: center; justify-content: center; z-index: 90;
box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.4);
transition: all 280ms var(--ease-signature);
}
.fab-whatsapp:hover { transform: scale(1.05); background: #25D366; color: white; box-shadow: 0 18px 40px -8px rgba(37, 211, 102, 0.55); }
.fab-whatsapp svg { width: 28px; height: 28px; }
.fab-label {
position: absolute; right: calc(100% + 14px); top: 50%;
transform: translateY(-50%) translateX(8px);
background: var(--bg-2); color: var(--ink-0);
font-family: 'Satoshi', sans-serif; font-size: 0.85rem;
padding: 10px 16px; border-radius: var(--r-md);
border: 1px solid var(--border-strong); white-space: nowrap;
opacity: 0; pointer-events: none;
box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
transition: all 240ms ease;
}
.fab-whatsapp:hover .fab-label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (min-width: 768px) { .fab-whatsapp { bottom: 32px; right: 32px; } }
/* ============================================================
SECTION PRIMITIVES
============================================================ */
.belief-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 880px; }
.belief-grid p { font-size: 1.1rem; color: var(--ink-0); max-width: 64ch; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 32px 28px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); transition: all 280ms ease; }
.step:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.step .num {
font-family: 'Clash Display', sans-serif; font-weight: 200;
font-size: 4.5rem; letter-spacing: -0.05em;
background: linear-gradient(180deg, var(--accent-soft), var(--accent));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 0.9; margin-bottom: 18px; display: block;
font-variant-numeric: tabular-nums;
}
.step h4 { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink-0); margin-bottom: 8px; }
.step p { font-size: 0.95rem; color: var(--ink-1); max-width: none; }
.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 768px) { .trust-strip { grid-template-columns: 1fr; } }
.trust-item { padding: 28px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); }
.trust-item h5 { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink-0); margin-bottom: 10px; }
.trust-item p { font-size: 0.9rem; color: var(--ink-1); max-width: none; }
/* ============================================================
FINAL CTA + SHIMMER
============================================================ */
.final-cta { text-align: center; padding: clamp(96px, 14vw, 180px) var(--pad-x); position: relative; overflow: hidden; }
.final-cta h2 {
font-family: 'Clash Display', sans-serif; font-weight: 700;
font-size: clamp(3rem, 9vw, 7rem); letter-spacing: -0.05em;
line-height: 0.95; color: var(--ink-0); max-width: 14ch; margin: 0 auto 48px;
}
@keyframes shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .shimmer-word { animation: none; } }
.final-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ============================================================
SCROLL REVEALS
============================================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 600ms var(--ease-signature), transform 600ms var(--ease-signature); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease-signature), transform 600ms var(--ease-signature); }
.reveal.stagger.is-in > * { opacity: 1; transform: translateY(0); }
.reveal.stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal.stagger.is-in > *:nth-child(2) { transition-delay: 60ms; }
.reveal.stagger.is-in > *:nth-child(3) { transition-delay: 120ms; }
.reveal.stagger.is-in > *:nth-child(4) { transition-delay: 180ms; }
.reveal.stagger.is-in > *:nth-child(5) { transition-delay: 240ms; }
.reveal.stagger.is-in > *:nth-child(6) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.stagger > * { opacity: 1; transform: none; transition: none; } }
/* ============================================================
FORMS
============================================================ */
.form-stack { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.78rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.field input, .field textarea {
background: var(--bg-1); border: 1px solid var(--border-strong);
color: var(--ink-0); font-family: inherit; font-size: 0.95rem;
padding: 14px 16px; border-radius: var(--r-md);
outline: none; transition: border-color 200ms ease; resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 120px; }
.form-status { font-size: 0.85rem; color: var(--ink-1); min-height: 1.2em; }
.form-status.success { color: rgb(74, 222, 128); }
.form-status.error { color: rgb(251, 113, 133); }
/* ============================================================
PAGE UTILITIES
============================================================ */
.page-title-block { max-width: 800px; margin-bottom: 48px; }
.page-title-block h1 { margin-top: 18px; margin-bottom: 24px; }
.page-title-block .lead { margin-top: 8px; }
.center-block { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.center-block h2 { margin-top: 18px; margin-bottom: 22px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 1024px) { .three-col { grid-template-columns: 1fr; } }
.four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1024px) { .four-col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .four-col { grid-template-columns: 1fr; } }
.card {
background: var(--bg-1); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 28px;
transition: all 280ms ease;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.card h3, .card h4 { font-family: 'Clash Display', sans-serif; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-0); margin-bottom: 10px; }
.card h3 { font-size: 1.4rem; }
.card h4 { font-size: 1.15rem; }
.card p { font-size: 0.92rem; color: var(--ink-1); max-width: none; }
.card-icon {
width: 44px; height: 44px; border-radius: var(--r-md);
background: rgba(139, 123, 255, 0.12);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px; color: var(--accent-soft);
}
.card.warm-icon .card-icon { background: rgba(216, 138, 122, 0.14); color: var(--warm-soft); }
.card.royal-icon .card-icon { background: rgba(212, 184, 134, 0.14); color: var(--royal-soft); }
.founder-card {
background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
border: 1px solid var(--border); border-radius: var(--r-xl);
padding: 36px; transition: all 320ms ease;
}
.founder-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.founder-avatar { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 22px; position: relative; overflow: hidden; }
.founder-avatar.aman { background: conic-gradient(from 220deg at 60% 40%, #8B7BFF 0%, #B2A4FF 30%, #1F1A4D 60%, #8B7BFF 100%); }
.founder-avatar.aryan { background: conic-gradient(from 110deg at 40% 50%, #D4B886 0%, #8B7BFF 35%, #B2A4FF 70%, #D4B886 100%); }
.founder-avatar::after { content: ''; position: absolute; inset: 0; background: url('/assets/img/noise-200.png'); opacity: 0.18; mix-blend-mode: overlay; }
.founder-card h3 { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 4px; }
.founder-role { color: var(--accent-soft); font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; }
.founder-bio { color: var(--ink-1); font-size: 0.95rem; margin-bottom: 22px; max-width: none; }
.founder-links { display: flex; gap: 10px; flex-wrap: wrap; }
.pricing-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.pricing-card.lead { border-color: rgba(139,123,255,0.3); background: linear-gradient(180deg, rgba(139,123,255,0.04) 0%, var(--bg-1) 60%); }
.pricing-tier { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.pricing-tier .num { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: clamp(2rem, 3vw, 2.6rem); color: var(--ink-0); letter-spacing: -0.03em; }
.pricing-tier .lbl { color: var(--ink-2); font-size: 0.85rem; }
.pricing-meta { color: var(--ink-1); font-size: 0.9rem; max-width: none; }
.diagram { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; position: relative; }
@media (max-width: 1024px) { .diagram { grid-template-columns: repeat(2, 1fr); } }
.diag-node { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 16px; text-align: center; position: relative; }
.diag-node .icon { color: var(--warm-soft); margin-bottom: 10px; display: inline-block; }
.diag-node h6 { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--ink-0); margin-bottom: 6px; }
.diag-node p { font-size: 0.78rem; color: var(--ink-1); max-width: none; }
.check-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 28px; }
@media (max-width: 640px) { .check-list { grid-template-columns: 1fr; } }
.check-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-0); font-size: 0.95rem; }
.check-list li svg { flex-shrink: 0; color: var(--accent-soft); margin-top: 3px; }
.check-list.warm-list li svg { color: var(--warm-soft); }
/* ============================================================
CHAT MOCK (WhatsApp Agent demo)
============================================================ */
.chat-mock {
max-width: 480px; margin: 0 auto;
background: #0B141A; border-radius: var(--r-lg);
border: 1px solid rgba(255,255,255,0.08);
padding: 24px 18px;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
display: flex; flex-direction: column; gap: 10px;
min-height: 320px; position: relative;
}
/* Scripted-demo stack: cap height so new visitor bubbles don't push the
page down — they scroll inside the stack instead. Form (data-chat-form)
doesn't need this; it's just the input row. */
.chat-mock[data-chat-stack] {
max-height: min(60vh, 520px);
overflow-y: auto;
scroll-behavior: smooth;
/* Hide scrollbar visually but keep functionality (looks more like WhatsApp) */
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.chat-mock[data-chat-stack]::-webkit-scrollbar { width: 6px; }
.chat-mock[data-chat-stack]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.chat-mock[data-chat-stack]::-webkit-scrollbar-track { background: transparent; }
.chat-mock .bubble {
opacity: 0; transform: translateY(8px);
transition: opacity 480ms ease, transform 480ms var(--ease-signature);
white-space: pre-wrap; /* preserve single \n as soft line break inside a bubble */
}
.chat-mock .bubble.is-in { opacity: 1; transform: translateY(0); }
.chat-input { margin-top: 14px; display: flex; gap: 8px; background: rgba(255,255,255,0.04); border-radius: var(--r-pill); padding: 6px; border: 1px solid rgba(255,255,255,0.06); }
.chat-input input { flex: 1; background: transparent; border: none; color: var(--ink-0); padding: 8px 14px; font-family: inherit; font-size: 0.9rem; outline: none; }
.chat-input button { background: var(--accent); color: white; border: none; border-radius: var(--r-pill); padding: 8px 16px; font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 48px; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat .val {
font-family: 'Clash Display', sans-serif; font-weight: 600;
font-size: clamp(2rem, 3.5vw, 2.8rem); letter-spacing: -0.03em;
color: var(--accent-soft); display: block; line-height: 1; margin-bottom: 10px;
}
.stat .lbl { color: var(--ink-1); font-size: 0.85rem; max-width: none; }
.callout {
background: linear-gradient(180deg, rgba(139,123,255,0.04), rgba(139,123,255,0));
border: 1px solid rgba(139,123,255,0.18);
border-radius: var(--r-lg); padding: 32px; margin: 48px 0;
}
.callout.warm-callout { background: linear-gradient(180deg, rgba(216,138,122,0.04), rgba(216,138,122,0)); border-color: rgba(216,138,122,0.18); }
.callout.royal-callout { background: linear-gradient(180deg, rgba(212,184,134,0.04), rgba(212,184,134,0)); border-color: rgba(212,184,134,0.18); }
.callout p { font-size: 1.05rem; color: var(--ink-0); max-width: none; }
.callout p + p { margin-top: 14px; }
.callout ul { list-style: none; margin: 14px 0 0; padding: 0; }
.callout ul li { color: var(--ink-1); padding: 6px 0; font-size: 0.95rem; padding-left: 18px; position: relative; }
.callout ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft); }
.callout.warm-callout ul li::before { background: var(--warm-soft); }
.callout.royal-callout ul li::before { background: var(--royal-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.map-frame { width: 100%; aspect-ratio: 16/9; border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; }
.map-frame iframe { width: 100%; height: 100%; border: none; filter: grayscale(0.3) brightness(0.85); }
/* ============================================================
VIEW TRANSITIONS
============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 400ms;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.layered { position: relative; isolation: isolate; }
.layered > .layered-content { position: relative; z-index: 2; }
/* Toggle cluster (cursor / audio / motion) — follows user, bottom-left */
.toggle-cluster {
position: fixed; bottom: 24px; left: 24px;
z-index: 90; display: flex; gap: 8px; align-items: center;
padding: 6px;
background: rgba(11, 9, 23, 0.62);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
transition: opacity 320ms ease, transform 320ms ease;
}
.toggle-cluster.compact { padding: 5px; }
.toggle-cluster button {
width: 30px; height: 30px;
border-radius: 50%;
background: transparent; border: none;
color: var(--ink-2); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: color 200ms ease, background 200ms ease;
position: relative;
}
.toggle-cluster button:hover { color: var(--ink-0); background: rgba(255,255,255,0.05); }
.toggle-cluster button.on { color: var(--accent-soft); }
.toggle-cluster button.on::after {
content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}
.toggle-cluster .sep { width: 1px; height: 18px; background: var(--border-strong); }
@media (max-width: 700px) { .toggle-cluster { bottom: 16px; left: 16px; padding: 4px; } }
/* ============================================================
CHRONO DIAL — visible Time Machine entry (toggle cluster button)
============================================================ */
.toggle-cluster button[data-toggle="chrono"] {
width: 34px; height: 34px;
background: linear-gradient(140deg, rgba(178,164,255,0.14) 0%, rgba(212,184,134,0.10) 100%);
border: 1px solid rgba(212,184,134,0.45);
color: var(--royal-soft);
position: relative;
overflow: hidden;
}
.toggle-cluster button[data-toggle="chrono"]::before {
content: ''; position: absolute; inset: -50%;
background: conic-gradient(from 0deg, transparent 0deg, rgba(212,184,134,0.6) 35deg, transparent 90deg);
animation: chronoSweep 6s linear infinite;
}
.toggle-cluster button[data-toggle="chrono"] svg { position: relative; z-index: 1; }
.toggle-cluster button[data-toggle="chrono"]:hover {
border-color: var(--royal);
background: linear-gradient(140deg, rgba(178,164,255,0.22) 0%, rgba(212,184,134,0.18) 100%);
box-shadow: 0 0 24px -6px var(--royal-glow);
}
@keyframes chronoSweep { to { transform: rotate(360deg); } }
body.motion-off .toggle-cluster button[data-toggle="chrono"]::before { animation: none; opacity: 0.35; }
/* Hint pill that appears once on first visit pointing at the chrono dial */
.chrono-hint {
position: fixed; left: 76px; bottom: 26px;
background: rgba(11,9,23,0.92);
backdrop-filter: blur(12px);
border: 1px solid var(--border-strong);
padding: 10px 16px; border-radius: var(--r-pill);
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.85rem;
letter-spacing: 0.01em;
color: var(--accent-soft);
z-index: 91;
opacity: 0; transform: translateX(-8px);
transition: opacity 420ms ease, transform 420ms ease;
pointer-events: none;
white-space: nowrap;
}
.chrono-hint.visible { opacity: 1; transform: translateX(0); }
.chrono-hint::before {
content: ''; position: absolute; left: -6px; top: 50%;
width: 10px; height: 10px; background: rgba(11,9,23,0.92);
border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 640px) { .chrono-hint { display: none; } }
/* ============================================================
HERO TITLE — line-by-line reveal (the "old hero text" feel)
============================================================ */
.hero-title .reveal-line {
display: block;
overflow: hidden;
padding-bottom: 0.06em;
}
.hero-title .reveal-line > span {
display: inline-block;
transform: translateY(102%);
opacity: 0;
animation: heroLineUp 1100ms var(--ease-signature) forwards;
}
.hero-title .reveal-line:nth-child(1) > span { animation-delay: 320ms; }
.hero-title .reveal-line:nth-child(2) > span { animation-delay: 520ms; }
.hero-title .reveal-line:nth-child(3) > span { animation-delay: 760ms; }
.hero-title em.editorial-em {
font-family: 'Fraunces', 'Times New Roman', serif;
font-style: italic;
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 100;
background: linear-gradient(95deg, var(--royal-soft) 0%, var(--accent-soft) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.018em;
padding: 0 0.04em;
}
@keyframes heroLineUp {
from { transform: translateY(102%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
body.motion-off .hero-title .reveal-line > span,
@media (prefers-reduced-motion: reduce) {
.hero-title .reveal-line > span { transform: none; opacity: 1; animation: none; }
}
/* ============================================================
HERO LOGO — refined details (face highlight, ticks, sweep hand)
============================================================ */
.hero-logo-svg .face-highlight { pointer-events: none; }
.hero-logo-svg .face-label {
font-family: 'Satoshi', sans-serif; font-size: 9px; font-weight: 500;
fill: rgba(244,239,230,0.32); letter-spacing: 2px;
}
.hero-logo-svg .tick-major { stroke: rgba(244,239,230,0.55); stroke-linecap: round; }
.hero-logo-svg .tick-minor { stroke: rgba(244,239,230,0.22); stroke-linecap: round; }
.hero-logo-svg .hand-s circle { fill: var(--royal); }
/* Smooth sweeping seconds hand (no per-tick jump) */
.hero-logo-svg .hand-s {
transition: transform 120ms var(--ease-signature);
}
/* ============================================================
THEATRICAL TIME-MACHINE WARP
============================================================ */
.tm-warp {
position: fixed; inset: 0; z-index: 9999;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, rgba(178,164,255,0.95) 0%, rgba(11,9,23,1) 60%);
opacity: 0;
mix-blend-mode: screen;
transition: opacity 220ms ease;
}
.tm-warp.warping { opacity: 1; }
.tm-warp .rings {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.tm-warp .rings span {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
border: 1px solid rgba(244,239,230,0.6);
opacity: 0;
animation: warpRing 1200ms var(--ease-signature) forwards;
}
.tm-warp .rings span:nth-child(1) { animation-delay: 0ms; border-color: var(--accent-soft); }
.tm-warp .rings span:nth-child(2) { animation-delay: 120ms; border-color: var(--royal-soft); }
.tm-warp .rings span:nth-child(3) { animation-delay: 240ms; border-color: var(--accent); }
.tm-warp .rings span:nth-child(4) { animation-delay: 360ms; border-color: var(--royal); }
@keyframes warpRing {
0% { transform: scale(0.1); opacity: 0; }
20% { opacity: 1; }
100% { transform: scale(14); opacity: 0; }
}
.tm-warp .stamp {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
font-family: 'Clash Display', sans-serif; font-weight: 700;
font-size: clamp(2rem, 6vw, 4rem);
color: #F5F0E6;
letter-spacing: -0.04em;
text-shadow: 0 0 40px rgba(178,164,255,0.8);
opacity: 0;
animation: warpStamp 1200ms var(--ease-signature) forwards;
animation-delay: 200ms;
}
@keyframes warpStamp {
0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; letter-spacing: 0.3em; }
35% { opacity: 1; letter-spacing: -0.02em; }
85% { opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.06); opacity: 0; }
}
body.motion-off .tm-warp .rings span,
body.motion-off .tm-warp .stamp { animation: none; }
/* ============================================================
ANIMATIONS-OFF MODE
============================================================ */
body.motion-off *, body.motion-off *::before, body.motion-off *::after {
animation-duration: 0s !important;
animation-delay: 0s !important;
transition-duration: 0s !important;
}
body.motion-off .hero-mesh-canvas { display: none; }
body.motion-off .footer-chrome-c { opacity: 0.2; }
body.motion-off .hero-logo-stage { transform: none !important; }
/* ============================================================
11 PM WARM SHIFT
============================================================ */
/* DISABLED 2026-05-25 — the warm-shift was overriding theme-light's parchment
variables between 22:30 and 06:30, making the site unreadable at night in
light mode. JS no longer applies the class; the rules below are kept
commented for reference in case we want to revive a dark-mode-only version.
body.warm-shift {
--bg-0: #100A14;
--bg-1: #1A1118;
--bg-2: #21161C;
--accent: #C28FFF;
--accent-soft: #D9B5FF;
--royal: #E8B47A;
--accent-glow: rgba(194, 143, 255, 0.42);
--royal-glow: rgba(232, 180, 122, 0.40);
}
body.warm-shift .grain { opacity: 0.08; }
*/
/* ============================================================
HERO LOGO — inline SVG (no halo)
============================================================ */
.hero-logo-svg {
width: 100%; height: 100%;
display: block;
filter: drop-shadow(0 30px 90px var(--accent-glow)) drop-shadow(0 0 24px rgba(178,164,255,0.25));
overflow: visible;
}
.hero-logo-svg .flow-line {
stroke: url(#flow-grad);
stroke-width: 7;
stroke-linecap: round;
fill: none;
opacity: 1;
filter: drop-shadow(0 0 8px rgba(178,164,255,0.5));
}
.hero-logo-svg .c-body {
fill: url(#c-grad);
}
.hero-logo-svg .c-edge {
/* sharp inner highlight ring */
}
.hero-logo-svg .hand-h {
stroke: var(--ink-0);
stroke-linecap: round;
transition: transform 800ms var(--ease-signature);
transform-origin: 240px 240px;
filter: drop-shadow(0 0 6px rgba(245,240,230,0.4));
}
.hero-logo-svg .hand-m {
stroke: var(--ink-0);
stroke-linecap: round;
transition: transform 800ms var(--ease-signature);
transform-origin: 240px 240px;
filter: drop-shadow(0 0 6px rgba(245,240,230,0.4));
}
.hero-logo-svg .hand-s {
stroke-linecap: round;
transform-origin: 240px 240px;
}
.hero-logo-svg .subdial-face {
fill: #0B0917;
stroke: rgba(244,239,230,0.16);
stroke-width: 0.8;
}
.hero-logo-svg .subdial-sec {
stroke: var(--royal);
stroke-linecap: round;
transform-origin: 320px 320px;
}
.hero-logo-svg .subdial-tick {
stroke: rgba(244,239,230,0.45);
stroke-linecap: round;
}
/* Breathing */
@keyframes logoBreath {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.012); }
}
.hero-logo-stage { animation: logoBreath 6s ease-in-out infinite; }
body.motion-off .hero-logo-stage { animation: none; }
/* Hero title — line reveals handled by .reveal-line spans above. Subtle breath disabled to avoid jitter with reveals. */
.hero-title { transform-origin: left center; }
body.motion-off .hero-title { animation: none; }
/* ============================================================
(removed: FLOATING LIVE AGENT TILE — killed per REDESIGN-2026Q2 §1.6)
============================================================ */
/* ============================================================
TIME-MACHINE PORTAL MODAL
============================================================ */
.tm-modal {
position: fixed; inset: 0; z-index: 10000;
background: rgba(11, 9, 23, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 320ms ease;
}
.tm-modal.is-open { opacity: 1; pointer-events: auto; }
.tm-modal-inner {
background: var(--bg-1);
border: 1px solid var(--border-strong);
border-radius: var(--r-xl);
padding: 48px;
max-width: 640px; width: 90vw;
text-align: center;
box-shadow: 0 50px 120px -30px rgba(0,0,0,0.8);
transform: translateY(20px);
transition: transform 480ms var(--ease-signature);
}
.tm-modal.is-open .tm-modal-inner { transform: translateY(0); }
.tm-modal h3 {
font-family: 'Clash Display', sans-serif;
font-weight: 700; font-size: 2rem;
letter-spacing: -0.04em;
margin-bottom: 12px;
}
.tm-modal p { color: var(--ink-1); margin: 0 auto 32px; max-width: 36ch; }
.tm-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.tm-door {
padding: 28px 20px;
background: var(--bg-2);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
cursor: pointer; transition: all 280ms ease;
}
.tm-door:hover {
transform: translateY(-3px);
border-color: var(--royal);
box-shadow: 0 20px 50px -15px var(--royal-glow);
}
.tm-door .icon { font-size: 2rem; margin-bottom: 12px; }
.tm-door h4 {
font-family: 'Clash Display', sans-serif; font-weight: 600;
font-size: 1.2rem; letter-spacing: -0.02em;
color: var(--ink-0); margin-bottom: 6px;
}
.tm-door p {
color: var(--ink-2); font-size: 0.85rem;
max-width: none; margin: 0;
}
.tm-close {
background: transparent; border: none;
color: var(--ink-2); font-size: 0.85rem;
cursor: pointer; text-decoration: underline;
}
.tm-close:hover { color: var(--ink-0); }
@media (max-width: 600px) { .tm-doors { grid-template-columns: 1fr; } .tm-modal-inner { padding: 32px 24px; } }
/* Footer year click handle */
.tm-trigger { cursor: pointer; user-select: none; transition: color 200ms ease; }
.tm-trigger:hover { color: var(--royal-soft); }
/* ============================================================
PAST MODE (1996 Geocities energy)
============================================================ */
body.tm-past {
background: #F4E8C8 !important;
color: #2A1F0F !important;
font-family: 'Times New Roman', Times, serif !important;
}
body.tm-past * { font-family: inherit !important; }
body.tm-past .grain, body.tm-past .hero-grid,
body.tm-past .hero-mesh-canvas, body.tm-past .hero-mesh,
body.tm-past .footer-chrome-c, body.tm-past .toggle-cluster,
body.tm-past .cursor-hand, body.tm-past .cursor-trail-canvas,
body.tm-past .scroll-progress { display: none !important; }
body.tm-past .site-nav, body.tm-past .site-nav-inner {
background: #C9B689 !important;
border: 2px solid #6B4F2C !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
body.tm-past .nav-wa {
background: #6B4F2C !important; color: #F4E8C8 !important;
border-radius: 0 !important; box-shadow: none !important;
}
body.tm-past a { color: #1E40AF !important; text-decoration: underline !important; }
body.tm-past a:visited { color: #7C3AED !important; }
body.tm-past .display-xl, body.tm-past .display-lg, body.tm-past .display-md,
body.tm-past h1, body.tm-past h2, body.tm-past h3, body.tm-past h4, body.tm-past h5, body.tm-past h6 {
font-family: 'Times New Roman', Times, serif !important;
color: #2A1F0F !important;
letter-spacing: 0 !important;
font-weight: bold !important;
}
body.tm-past p, body.tm-past li, body.tm-past td, body.tm-past .lead { color: #2A1F0F !important; }
body.tm-past .card, body.tm-past .founder-card, body.tm-past .product-card,
body.tm-past .pricing-card, body.tm-past .callout, body.tm-past .step, body.tm-past .trust-item {
background: #FFFCEC !important;
border: 2px ridge #BFA46F !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.tm-past .btn, body.tm-past .btn-primary, body.tm-past .btn-ghost,
body.tm-past .btn-warm, body.tm-past .btn-call {
background: #C9B689 !important;
color: #2A1F0F !important;
border: 2px outset #BFA46F !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: 'Times New Roman', serif !important;
transform: none !important;
}
body.tm-past .btn:active { border-style: inset !important; }
body.tm-past .eyebrow {
font-family: 'Times New Roman', serif !important;
color: #8B0000 !important;
letter-spacing: 0.1em !important;
}
body.tm-past .shimmer-word {
background: none !important;
-webkit-text-fill-color: #8B0000 !important;
color: #8B0000 !important;
animation: none !important;
}
body.tm-past .hero-logo-stage, body.tm-past .hero-logo-svg { filter: none !important; }
body.tm-past .footer-bottom-left, body.tm-past .footer-bottom-right,
body.tm-past .footer-sub { color: #2A1F0F !important; }
body.tm-past::before {
content: 'Best viewed in Netscape Navigator 4.0 at 800×600 · ⊕ This site is under construction ⊕';
position: fixed; bottom: 0; left: 0; right: 0;
background: #6B4F2C; color: #F4E8C8;
font-family: 'Times New Roman', serif;
text-align: center; padding: 8px;
z-index: 99999; font-size: 0.85rem;
}
body.tm-past::after {
content: '◀ ◀ TIME MACHINE: VIEWING ARCHIVE.1996 ▶ ▶';
position: fixed; top: 0; left: 0; right: 0;
background: #8B0000; color: #FFD700;
text-align: center; padding: 4px;
font-family: 'Times New Roman', serif; font-weight: bold;
z-index: 99999; font-size: 0.8rem;
letter-spacing: 0.1em;
}
/* ============================================================
FUTURE MODE (2087 archive)
============================================================ */
body.tm-future {
background: #04060E !important;
}
body.tm-future .hero-mesh-canvas { filter: hue-rotate(170deg) saturate(1.4) brightness(0.9); }
body.tm-future .display-xl, body.tm-future .display-lg, body.tm-future .display-md,
body.tm-future h1, body.tm-future h2, body.tm-future h3 {
color: #C5F5FF !important;
text-shadow: 0 0 12px rgba(135, 245, 255, 0.5),
2px 0 0 rgba(255, 0, 220, 0.35),
-2px 0 0 rgba(0, 255, 220, 0.35);
}
body.tm-future p, body.tm-future li, body.tm-future td, body.tm-future .lead { color: #87E5FF !important; }
body.tm-future .eyebrow { color: #FF3DD9 !important; letter-spacing: 0.3em !important; }
body.tm-future .btn-primary { background: #00F0FF !important; color: #04060E !important; box-shadow: 0 0 40px rgba(0, 240, 255, 0.5) !important; }
body.tm-future .card, body.tm-future .founder-card, body.tm-future .product-card,
body.tm-future .pricing-card, body.tm-future .step {
background: rgba(0, 240, 255, 0.05) !important;
border: 1px solid rgba(0, 240, 255, 0.25) !important;
box-shadow: 0 0 30px rgba(0, 240, 255, 0.08) inset !important;
}
body.tm-future .shimmer-word {
background: linear-gradient(90deg, #00F0FF, #FF3DD9, #00F0FF) !important;
background-size: 200% 100% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
body.tm-future::before {
content: '';
position: fixed; inset: 0; pointer-events: none; z-index: 99998;
background: repeating-linear-gradient(0deg,
transparent 0px, transparent 2px,
rgba(0, 240, 255, 0.04) 2px, rgba(0, 240, 255, 0.04) 3px);
mix-blend-mode: overlay;
}
body.tm-future::after {
content: '▷ CHRONO-ARCHIVE.2087 ◁ RESTORED FROM THE CHRONOMATION ARCHIVE ◁ EST. 2026 ◁';
position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
background: linear-gradient(90deg, rgba(255, 0, 220, 0.2), rgba(0, 240, 255, 0.2));
color: #C5F5FF; font-family: 'Courier New', monospace; font-size: 0.78rem;
text-align: center; padding: 6px;
letter-spacing: 0.15em; text-shadow: 0 0 8px rgba(135, 245, 255, 0.8);
border-bottom: 1px solid rgba(0, 240, 255, 0.3);
}
body.tm-future .footer-sub { color: #FF3DD9 !important; text-shadow: 0 0 8px rgba(255, 0, 220, 0.5); }
/* TM exit button */
.tm-exit {
position: fixed; top: 72px; right: 24px; z-index: 99999;
background: var(--bg-2); color: var(--ink-0);
border: 1px solid var(--border-strong);
padding: 8px 14px; border-radius: var(--r-pill);
font-family: 'Satoshi', sans-serif; font-size: 0.78rem;
cursor: pointer; letter-spacing: 0.08em;
}
body.tm-past .tm-exit { background: #6B4F2C; color: #F4E8C8; border: 2px solid #8B0000; border-radius: 0; font-family: 'Times New Roman', serif; }
body.tm-future .tm-exit { background: rgba(0, 240, 255, 0.1); color: #00F0FF; border: 1px solid #00F0FF; font-family: 'Courier New', monospace; box-shadow: 0 0 20px rgba(0, 240, 255, 0.4); }
/* ============================================================
SCROLL PROGRESS SPEEDOMETER
============================================================ */
.scroll-progress {
position: fixed; top: 50%; right: 22px;
transform: translateY(-50%);
width: 56px; height: 56px;
z-index: 80; pointer-events: none;
opacity: 0; transition: opacity 400ms ease;
}
.scroll-progress.visible { opacity: 0.85; }
.scroll-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.scroll-progress circle { fill: none; }
.scroll-progress .track { stroke: rgba(255,255,255,0.06); stroke-width: 2; }
.scroll-progress .arc { stroke: var(--accent-soft); stroke-width: 2; stroke-linecap: round; }
.scroll-progress .needle {
position: absolute; inset: 0; pointer-events: none;
display: flex; align-items: center; justify-content: center;
transform-origin: center;
transition: transform 80ms linear;
}
.scroll-progress .needle::before {
content: ''; width: 2px; height: 18px;
background: linear-gradient(to top, transparent, var(--royal-soft));
border-radius: 2px; transform: translateY(-8px);
filter: drop-shadow(0 0 4px var(--royal-glow));
}
@media (max-width: 640px) { .scroll-progress { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }
/* ============================================================
LOADING INTRO
============================================================ */
.loading-intro {
position: fixed; inset: 0; z-index: 9998;
background: var(--bg-0);
display: flex; align-items: center; justify-content: center;
pointer-events: none;
animation: loadingFade 1400ms var(--ease-signature) forwards;
}
@keyframes loadingFade {
0% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
.loading-intro .pulse {
width: 220px; height: 220px; position: relative;
display: flex; align-items: center; justify-content: center;
}
.loading-intro .pulse img {
width: 100%; height: 100%; object-fit: contain;
filter: drop-shadow(0 8px 32px var(--accent-glow));
animation: loadingPulse 1200ms var(--ease-signature) forwards;
}
@keyframes loadingPulse {
0% { opacity: 0; transform: scale(0.92); }
100% { opacity: 1; transform: scale(1); }
}
.loading-intro .needle {
position: absolute; top: 50%; left: 50%;
width: 3px; height: 60px;
background: linear-gradient(to top, transparent, var(--royal-soft));
border-radius: 3px;
transform-origin: bottom center;
transform: translate(-50%, -100%) rotate(-90deg);
filter: drop-shadow(0 0 8px var(--royal-glow));
animation: needleSweep 1200ms var(--ease-signature) forwards;
}
@keyframes needleSweep {
0% { transform: translate(-50%, -100%) rotate(-130deg); opacity: 0; }
20% { opacity: 1; }
100% { transform: translate(-50%, -100%) rotate(130deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .loading-intro { display: none; } }
/* ============================================================
LIVE COUNTER CHIP (home hero)
============================================================ */
.live-counter {
display: inline-flex; align-items: baseline; gap: 8px;
font-family: 'Satoshi', sans-serif;
font-variant-numeric: tabular-nums;
}
.live-counter .n {
font-family: 'Clash Display', sans-serif; font-weight: 600;
color: var(--ink-0); font-size: 1.05rem; letter-spacing: -0.02em;
}
.live-counter .lbl { color: var(--ink-2); font-size: 0.78rem; }
/* ============================================================
DEMO VIDEO PLAYER
============================================================ */
.demo-video-frame {
position: relative; max-width: 720px; margin: 0 auto;
border-radius: var(--r-lg); overflow: hidden;
border: 1px solid var(--border-strong);
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
background: var(--bg-1);
aspect-ratio: 16/9;
}
.demo-video-frame video {
width: 100%; height: 100%; display: block;
object-fit: cover;
}
.demo-video-frame .video-overlay {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, rgba(11,9,23,0.0) 30%, rgba(11,9,23,0.6) 100%);
cursor: pointer;
transition: opacity 280ms ease;
}
.demo-video-frame.playing .video-overlay { opacity: 0; pointer-events: none; }
.demo-video-frame .play-btn {
width: 72px; height: 72px; border-radius: 50%;
background: var(--accent); color: white;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 18px 50px -16px var(--accent-glow);
transition: transform 200ms ease;
}
.demo-video-frame:hover .play-btn { transform: scale(1.06); }
/* ============================================================
PERSONALIZATION DEPTH GRID
============================================================ */
.embed-depth {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 36px;
}
@media (max-width: 768px) { .embed-depth { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .embed-depth { grid-template-columns: 1fr; } }
.embed-depth-item {
padding: 18px;
background: rgba(139,123,255,0.04);
border: 1px solid rgba(139,123,255,0.14);
border-radius: var(--r-md);
display: flex; gap: 12px; align-items: flex-start;
}
.embed-depth-item .num {
font-family: 'Clash Display', sans-serif; font-weight: 600;
font-size: 1.05rem; color: var(--accent-soft);
flex-shrink: 0; min-width: 22px;
}
.embed-depth-item p {
font-size: 0.88rem; color: var(--ink-0); max-width: none; line-height: 1.45;
}
/* ============================================================
CONFETTI CANVAS
============================================================ */
.confetti-canvas {
position: fixed; inset: 0;
pointer-events: none; z-index: 9999;
}
/* ============================================================
AUDIO TOGGLE
============================================================ */
.audio-toggle {
position: fixed; bottom: 24px; left: 130px;
z-index: 90; width: 36px; height: 36px;
background: rgba(11, 9, 23, 0.6);
backdrop-filter: blur(12px);
border: 1px solid var(--border-strong);
color: var(--ink-1); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 200ms ease;
}
.audio-toggle:hover { color: var(--ink-0); border-color: var(--ink-1); }
.audio-toggle.on { color: var(--accent-soft); border-color: rgba(139,123,255,0.4); }
@media (max-width: 640px) { .audio-toggle { display: none; } }
/* Flowy speed lines drift on the C */
@keyframes flowDrift {
0% { transform: translateX(-8px); opacity: 0.4; }
50% { opacity: 0.95; }
100% { transform: translateX(0); opacity: 0.5; }
}
.hero-logo-svg .flow-line:nth-child(1) { animation: flowDrift 3.2s ease-in-out infinite; }
.hero-logo-svg .flow-line:nth-child(2) { animation: flowDrift 2.8s ease-in-out infinite 0.3s; }
.hero-logo-svg .flow-line:nth-child(3) { animation: flowDrift 3.6s ease-in-out infinite 0.6s; }
.hero-logo-svg .flow-line:nth-child(4) { animation: flowDrift 3.0s ease-in-out infinite 0.9s; }
body.motion-off .hero-logo-svg .flow-line { animation: none; opacity: 0.7; }
/* ============================================================
LATENCY TILE (nav)
============================================================ */
.latency-tile {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: rgba(139, 123, 255, 0.06);
border: 1px solid rgba(139, 123, 255, 0.18);
border-radius: var(--r-pill);
font-family: 'Satoshi', sans-serif; font-size: 0.74rem;
color: var(--ink-1); font-variant-numeric: tabular-nums;
margin-right: 6px;
white-space: nowrap;
transition: all 200ms ease;
}
.latency-tile-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #4CD964;
box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7);
animation: livePulse 2.4s ease-out infinite;
}
.latency-tile .v { color: var(--ink-0); font-weight: 500; }
@media (max-width: 1180px) { .latency-tile { display: none; } }
/* ============================================================
MIRROR PILL / 3-MIN PILL
============================================================ */
.context-pill {
position: fixed; top: 84px; left: 50%;
transform: translateX(-50%) translateY(-20px);
padding: 10px 18px;
background: rgba(11, 9, 23, 0.85);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(212, 184, 134, 0.35);
border-radius: var(--r-pill);
font-family: 'Satoshi', sans-serif; font-size: 0.85rem;
color: var(--ink-0); z-index: 92;
display: inline-flex; align-items: center; gap: 10px;
opacity: 0; pointer-events: none;
transition: opacity 480ms ease, transform 480ms var(--ease-signature);
box-shadow: 0 20px 50px -15px var(--royal-glow);
}
.context-pill.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.context-pill .icon { color: var(--royal-soft); }
.context-pill .close {
background: transparent; border: none; color: var(--ink-2);
cursor: pointer; padding: 0; font-size: 1.1rem; line-height: 1;
margin-left: 4px;
}
.context-pill .close:hover { color: var(--ink-0); }
@media (max-width: 700px) {
.context-pill { left: 16px; right: 16px; transform: translateY(-20px); max-width: none; font-size: 0.8rem; }
.context-pill.visible { transform: translateY(0); }
}
/* ============================================================
A/B DEMO (whatsapp-agent page)
============================================================ */
.ab-demo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 36px;
}
@media (max-width: 768px) { .ab-demo { grid-template-columns: 1fr; } }
.ab-panel {
background: #0B141A;
border-radius: var(--r-lg);
border: 1px solid rgba(255,255,255,0.08);
padding: 18px;
display: flex; flex-direction: column; gap: 8px;
min-height: 280px;
position: relative;
}
.ab-panel .lbl {
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-2); margin-bottom: 4px;
display: flex; align-items: center; gap: 8px;
}
.ab-panel.us .lbl { color: var(--accent-soft); }
.ab-panel.them .lbl { color: var(--ink-2); }
.ab-controls {
text-align: center; margin: 18px auto 0; max-width: 480px;
}
.ab-prompt-row { display: flex; gap: 8px; margin-top: 12px; }
.ab-prompt-row input {
flex: 1; background: var(--bg-1); border: 1px solid var(--border-strong);
color: var(--ink-0); border-radius: var(--r-pill);
padding: 10px 14px; font-family: inherit; font-size: 0.9rem; outline: none;
}
.ab-prompt-row input:focus { border-color: var(--accent); }
.ab-prompt-row button {
background: var(--accent); color: white; border: none;
padding: 10px 18px; border-radius: var(--r-pill);
font-family: inherit; font-size: 0.85rem; font-weight: 500;
cursor: pointer;
}
/* Whisper mode (hold Shift) */
.whisper-hint {
text-align: center; color: var(--ink-2);
font-size: 0.8rem; margin-top: 14px;
font-family: 'Satoshi', sans-serif;
}
.whisper-hint kbd {
display: inline-block; padding: 2px 8px;
background: var(--bg-2); border: 1px solid var(--border-strong);
border-radius: 4px; font-size: 0.72rem; font-family: 'Satoshi', sans-serif;
color: var(--ink-0);
}
.whisper-overlay {
position: absolute; inset: 0;
background: rgba(11, 9, 23, 0.92);
border-radius: inherit;
padding: 18px; overflow-y: auto;
opacity: 0; pointer-events: none;
transition: opacity 200ms ease;
font-family: 'Courier New', monospace;
font-size: 0.78rem; color: var(--royal-soft);
z-index: 5;
}
.whisper-overlay h6 {
color: var(--accent-soft); font-family: 'Courier New', monospace;
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em;
margin-bottom: 10px; font-weight: 500;
}
.whisper-overlay code {
display: block; padding: 8px 10px;
background: rgba(139, 123, 255, 0.06);
border-left: 2px solid var(--accent-soft);
border-radius: 0 6px 6px 0;
margin-bottom: 8px;
color: var(--ink-0); font-size: 0.78rem;
word-break: break-word;
}
/* Helper class for scroll-driven C reveal */
.section-c-divider {
position: relative; padding: clamp(72px, 12vw, 140px) 0; overflow: hidden;
}
.section-c-divider .c-reveal {
position: absolute; top: 50%; left: 50%;
width: clamp(280px, 50vw, 720px);
height: clamp(280px, 50vw, 720px);
transform: translate(-50%, -50%);
opacity: 0.07;
pointer-events: none; z-index: 0;
transition: opacity 600ms ease, transform 600ms var(--ease-signature);
}
.section-c-divider.in-view .c-reveal {
opacity: 0.14;
transform: translate(-50%, -50%) scale(1.06);
}
body.motion-off .section-c-divider .c-reveal { transition: none; }
/* ============================================================
PHASE A — NEW FEATURES STYLES
============================================================ */
/* ---------- #1 Hero meta strip + Live since ---------- */
.hero-meta-strip {
margin-top: 32px;
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.hero-since {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: rgba(244, 239, 230, 0.04);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.78rem;
color: var(--ink-2);
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.hero-since .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-soft);
box-shadow: 0 0 8px var(--accent-glow);
}
.hero-since .label { color: var(--ink-2); }
.hero-since .date { color: var(--ink-0); font-weight: 500; }
.hero-since .sep { color: var(--ink-2); opacity: 0.5; }
.hero-since .elapsed { color: var(--accent-soft); font-weight: 500; }
/* ---------- #97 secondary CTA visual hierarchy ---------- */
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-cta-row .btn-secondary-link {
/* The text-only third link, lower-weight */
padding: 10px 16px;
background: transparent;
border: none;
color: var(--ink-2);
font-weight: 500;
}
.hero-cta-row .btn-secondary-link:hover { color: var(--ink-0); background: rgba(244,239,230,0.04); }
[data-audit-cta] {
border-color: var(--royal) !important;
color: var(--royal-soft) !important;
}
[data-audit-cta]:hover {
background: rgba(212,184,134,0.08) !important;
border-color: var(--royal-soft) !important;
color: var(--ink-0) !important;
}
/* ---------- #42 Founder presence dot ---------- */
.founder-presence {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 10px;
background: rgba(244, 239, 230, 0.03);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.72rem;
color: var(--ink-1);
letter-spacing: 0.02em;
white-space: nowrap;
}
.founder-presence .fp-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
background: var(--ink-2);
transition: background 320ms ease, box-shadow 320ms ease;
}
.founder-presence.online .fp-dot {
background: #4CD964;
box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7);
animation: livePulse 1.8s ease-out infinite;
}
.founder-presence.online .fp-label { color: var(--ink-0); }
.founder-presence.offline .fp-dot { background: #B89A55; }
.founder-presence.offline .fp-label { color: var(--ink-2); }
@media (max-width: 1280px) { .founder-presence { display: none; } }
/* ---------- #100 Live activity banner ---------- */
.activity-banner {
position: fixed; top: 92px; left: 50%;
transform: translate(-50%, -16px);
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px 8px 12px;
background: rgba(11,9,23,0.78);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.8rem; color: var(--ink-0);
letter-spacing: 0.01em;
z-index: 88;
opacity: 0;
transition: opacity 420ms ease, transform 420ms var(--ease-signature);
box-shadow: 0 14px 40px -16px rgba(0,0,0,0.5);
}
.activity-banner.visible { opacity: 1; transform: translate(-50%, 0); }
.activity-banner .ab-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #4CD964;
box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7);
animation: livePulse 1.8s ease-out infinite;
}
.activity-banner .ab-text { color: var(--ink-0); }
.activity-banner .ab-close {
width: 18px; height: 18px; border-radius: 50%;
border: none; background: transparent;
color: var(--ink-2); cursor: pointer; font-size: 0.9rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: color 200ms ease, background 200ms ease;
}
.activity-banner .ab-close:hover { color: var(--ink-0); background: rgba(255,255,255,0.05); }
@media (max-width: 768px) { .activity-banner { display: none; } }
/* ---------- #12 Speed-line tail extends on hover ---------- */
.hero-logo-stage:hover .hero-logo-svg .flow-line {
transition: stroke-width 600ms var(--ease-signature),
transform 800ms var(--ease-signature);
transform: translateX(-30px);
stroke-width: 8;
}
.hero-logo-svg .flow-line {
transition: stroke-width 400ms ease, transform 600ms ease;
}
/* ---------- mobile gating ---------- */
@media (max-width: 700px) {
.hero-meta-strip { margin-top: 18px; }
}
/* ============================================================
PHASE B — NEW STYLES
============================================================ */
/* ---------- #13 Theme toggle button (in nav) ---------- */
.theme-toggle {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(244,239,230,0.04);
border: 1px solid var(--border);
border-radius: 50%;
color: var(--ink-1);
cursor: pointer;
position: relative;
overflow: hidden;
transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.theme-toggle:hover { color: var(--ink-0); border-color: var(--border-strong); background: rgba(244,239,230,0.07); }
.theme-toggle .sun, .theme-toggle .moon {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
transition: transform 360ms var(--ease-signature), opacity 240ms ease;
}
.theme-toggle .moon { transform: rotate(0deg); opacity: 1; }
.theme-toggle .sun { transform: rotate(-90deg) scale(0.5); opacity: 0; }
html.theme-light .theme-toggle .moon { transform: rotate(90deg) scale(0.5); opacity: 0; }
html.theme-light .theme-toggle .sun { transform: rotate(0deg) scale(1); opacity: 1; }
html.theme-light .theme-toggle { background: rgba(27,22,56,0.04); }
@media (max-width: 768px) { .theme-toggle { display: none; } }
/* ---------- #6 Magnetic 'quietly' word ---------- */
.editorial-em {
display: inline-block;
will-change: transform;
transition: transform 420ms var(--ease-signature);
cursor: default;
}
body.motion-off .editorial-em { transform: none !important; }
/* ---------- #14 'Built at IST' badge ---------- */
.built-at-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: rgba(244,239,230,0.03);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.72rem;
color: var(--ink-2);
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
margin-top: 14px;
}
.built-at-badge .moon-icon {
width: 12px; height: 12px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--royal-soft);
}
.built-at-badge .ts { color: var(--ink-1); font-weight: 500; }
/* ---------- #17 Confetti ---------- */
.confetti-piece {
position: fixed;
width: 8px; height: 12px;
z-index: 9998;
pointer-events: none;
border-radius: 2px;
will-change: transform, opacity;
}
/* ---------- #25 Hover-rotate logo C in nav ---------- */
.brand-mark, .brand-logo-svg, .brand-mark-wrap svg {
transition: transform 1200ms var(--ease-signature);
transform-origin: center;
transform-box: fill-box;
}
.brand-logo:hover .brand-mark,
.brand-logo:hover .brand-logo-svg,
.brand-logo:hover .brand-mark-wrap svg { transform: rotate(360deg); }
body.motion-off .brand-mark, body.motion-off .brand-logo-svg, body.motion-off .brand-mark-wrap svg { transition: none; }
/* ---------- #27 Snappy form errors ---------- */
@keyframes formShake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}
input.input-error, textarea.input-error, select.input-error {
border-color: #E08770 !important;
background: linear-gradient(135deg, rgba(224,135,112,0.06) 0%, transparent 60%) !important;
box-shadow: 0 0 0 3px rgba(224,135,112,0.10), 0 0 24px -8px rgba(224,135,112,0.45) !important;
animation: formShake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.form-error-msg {
display: flex; align-items: center; gap: 6px;
margin-top: 8px;
padding: 6px 10px;
background: rgba(224,135,112,0.08);
border: 1px solid rgba(224,135,112,0.25);
border-radius: var(--r-sm);
font-family: 'Satoshi', sans-serif; font-size: 0.82rem; font-weight: 500;
color: #E8A18B;
}
.form-error-msg svg { flex-shrink: 0; opacity: 0.9; }
html.theme-light .form-error-msg { color: #B65A40; }
/* ---------- #11 Amplify 3D parallax — CSS smoothness ---------- */
.hero-logo-stage { perspective: 1200px; transform-style: preserve-3d; }
.hero-logo-svg { transition: transform 220ms var(--ease-signature); will-change: transform; }
/* ============================================================
PHASE B-TAIL — REMAINING 12 STYLES
============================================================ */
/* ---------- #4 Heartbeat micro-pulse (refined BPM) ---------- */
/* The live-pulse-dot animation already exists; we replace it with a more "heartbeat" rhythm */
@keyframes heartbeatPulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-glow); }
10% { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(178,164,255,0.18); }
18% { transform: scale(0.92); }
26% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(178,164,255,0.08); }
36% { transform: scale(1); box-shadow: 0 0 0 14px rgba(178,164,255,0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(178,164,255,0); }
}
.live-pulse-dot,
.ab-dot,
.fp-dot,
.founder-presence.online .fp-dot {
animation: heartbeatPulse 1.6s ease-in-out infinite !important;
}
/* ---------- #8 (removed: Founder voice-note button — killed per REDESIGN-2026Q2 §1.6) ---------- */
/* vnWave keyframe retained — also consumed by .bs-np-bars i (Backstage now-playing). */
@keyframes vnWave {
0%, 100% { height: 4px; }
50% { height: 14px; }
}
/* ---------- #19 Crystal hover on comparison rows ---------- */
.cmp-table tbody tr {
position: relative;
transition: background 280ms ease;
}
.cmp-table tbody tr::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(178,164,255,0.10) 50%, transparent 100%);
opacity: 0; pointer-events: none;
transform: translateX(-100%);
transition: opacity 320ms ease;
}
.cmp-table tbody tr:hover { background: rgba(178,164,255,0.03); }
.cmp-table tbody tr:hover::after {
opacity: 1;
animation: crystalSweep 1100ms var(--ease-signature) forwards;
}
@keyframes crystalSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
html.theme-light .cmp-table tbody tr:hover { background: rgba(92,69,214,0.04); }
html.theme-light .cmp-table tbody tr::after {
background: linear-gradient(90deg, transparent 0%, rgba(92,69,214,0.12) 50%, transparent 100%);
}
/* ============================================================
PHASE C — EASTER EGGS & LORE STYLES
============================================================ */
/* ---------- #29 BACKSTAGE PAGE ---------- */
.backstage-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 880px) { .backstage-grid { grid-template-columns: 1fr; } }
.backstage-card {
padding: 28px;
background: linear-gradient(180deg, rgba(178,164,255,0.04) 0%, transparent 100%);
border: 1px solid var(--border);
border-radius: var(--r-lg);
position: relative;
}
.bs-card-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 24px;
}
.bs-avatar {
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color: var(--ink-0);
font-family: 'Clash Display', sans-serif;
font-weight: 600; font-size: 1.4rem;
border-radius: 50%;
flex-shrink: 0;
}
.bs-id { flex: 1; }
.bs-name { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.2rem; }
.bs-role { font-size: 0.82rem; color: var(--ink-2); margin-top: 2px; }
.bs-status-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: rgba(76, 217, 100, 0.08);
border: 1px solid rgba(76, 217, 100, 0.25);
border-radius: var(--r-pill);
font-size: 0.7rem; color: #4CD964;
letter-spacing: 0.04em;
}
.bs-status-dot {
width: 6px; height: 6px; border-radius: 50%; background: #4CD964;
animation: heartbeatPulse 1.6s ease-in-out infinite;
}
.bs-now-playing {
padding: 18px;
background: rgba(244,239,230,0.03);
border: 1px solid var(--border);
border-radius: var(--r-md);
margin-bottom: 16px;
}
.bs-np-eyebrow {
font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent-soft); margin-bottom: 6px;
}
.bs-np-track {
font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: 1.1rem;
color: var(--ink-0); margin-bottom: 4px;
}
.bs-np-meta { font-size: 0.78rem; color: var(--ink-2); }
.bs-np-bars {
display: flex; align-items: flex-end; gap: 3px; height: 18px;
margin-top: 10px;
}
.bs-np-bars i {
display: block; width: 3px; background: var(--accent-soft); border-radius: 2px;
animation: vnWave 920ms ease-in-out infinite;
}
.bs-np-bars i:nth-child(1) { animation-delay: 0ms; }
.bs-np-bars i:nth-child(2) { animation-delay: 130ms; }
.bs-np-bars i:nth-child(3) { animation-delay: 260ms; }
.bs-np-bars i:nth-child(4) { animation-delay: 100ms; }
.bs-np-bars i:nth-child(5) { animation-delay: 380ms; }
.bs-np-bars i:nth-child(6) { animation-delay: 240ms; }
.bs-np-bars i:nth-child(7) { animation-delay: 480ms; }
.bs-focus { padding-top: 16px; border-top: 1px solid var(--border); }
.bs-focus-eyebrow {
font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--royal-soft); margin-bottom: 8px;
}
/* Deploy stack */
.deploy-stack { display: flex; flex-direction: column; gap: 12px; }
.deploy-row {
display: grid; grid-template-columns: 12px 1fr; gap: 16px; align-items: flex-start;
padding: 16px 20px;
background: rgba(244,239,230,0.02);
border: 1px solid var(--border);
border-radius: var(--r-md);
transition: border-color 220ms ease, background 220ms ease;
}
.deploy-row:hover { border-color: var(--border-strong); background: rgba(178,164,255,0.04); }
.dr-status {
width: 8px; height: 8px; border-radius: 50%; margin-top: 6px;
background: #4CD964; box-shadow: 0 0 6px rgba(76, 217, 100, 0.6);
}
.dr-status.failed { background: #E08770; box-shadow: 0 0 6px rgba(224, 135, 112, 0.6); }
.dr-title { font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: 1rem; }
.dr-sub { margin-top: 4px; font-size: 0.78rem; color: var(--ink-2); font-family: 'Satoshi', sans-serif; }
.dr-sub code {
background: rgba(178,164,255,0.10); padding: 1px 6px; border-radius: 4px;
color: var(--accent-soft); font-family: 'Source Code Pro', 'Courier New', monospace;
font-size: 0.76rem;
}
.dr-branch { color: var(--royal-soft); }
/* Studio stats */
.studio-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px;
}
.studio-stat {
padding: 24px;
background: rgba(244,239,230,0.02);
border: 1px solid var(--border);
border-radius: var(--r-md);
text-align: center;
transition: transform 280ms var(--ease-signature), border-color 220ms ease;
}
.studio-stat:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.ss-n {
font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 2rem;
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--royal-soft) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.ss-l {
font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-2);
}
/* Lore collector on /backstage */
.lore-collector {
margin-top: 36px;
padding: 32px;
background: rgba(178,164,255,0.04);
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
.lore-progress {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px;
background: rgba(11,9,23,0.6);
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
font-family: 'Satoshi', sans-serif; font-size: 0.85rem;
color: var(--accent-soft);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.lore-progress [data-lore-count] { color: var(--royal-soft); font-weight: 600; }
.lore-revealed { margin-top: 24px; padding: 24px; border-top: 1px solid var(--border); }
.lore-quote {
font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
font-variation-settings: "opsz" 144;
font-size: clamp(1.4rem, 2.6vw, 2rem);
line-height: 1.32;
color: var(--ink-0);
margin: 14px 0 0;
letter-spacing: -0.022em;
}
.lore-hint {
margin-top: 18px; font-size: 0.92rem; color: var(--ink-2);
}
.lore-hint .lore-tip { color: var(--ink-1); }
/* ---------- #32 Founder card modal ---------- */
.founder-card-modal {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 280ms ease; pointer-events: none;
}
.founder-card-modal.visible { opacity: 1; pointer-events: auto; }
.fcm-backdrop {
position: absolute; inset: 0;
background: rgba(11,9,23,0.78);
backdrop-filter: blur(14px) saturate(140%);
}
.fcm-card {
position: relative; z-index: 1;
max-width: 520px; width: calc(100% - 32px);
padding: 32px;
background: var(--bg-1);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
transform: scale(0.92) translateY(20px);
transition: transform 360ms var(--ease-signature);
}
.founder-card-modal.visible .fcm-card { transform: scale(1) translateY(0); }
.fcm-close {
position: absolute; top: 16px; right: 16px;
width: 32px; height: 32px;
background: rgba(244,239,230,0.04);
border: 1px solid var(--border);
border-radius: 50%; color: var(--ink-1); font-size: 1.2rem; line-height: 1;
cursor: pointer;
}
.fcm-close:hover { color: var(--ink-0); background: rgba(244,239,230,0.08); }
.fcm-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.fcm-avatar {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color: var(--ink-0);
font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.6rem;
border-radius: 50%;
}
.fcm-name { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.3rem; }
.fcm-role { font-size: 0.82rem; color: var(--ink-2); margin-top: 2px; }
.fcm-bio { color: var(--ink-1); line-height: 1.6; margin-bottom: 20px; }
.fcm-quote {
padding: 18px 22px;
background: rgba(178,164,255,0.06);
border-left: 3px solid var(--accent-soft);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
font-variation-settings: "opsz" 144;
font-size: 1.05rem; line-height: 1.45; color: var(--ink-0);
margin: 0 0 24px;
}
.fcm-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.fcm-easter {
margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
font-size: 0.78rem; color: var(--ink-2);
}
.fcm-easter code { background: rgba(178,164,255,0.10); padding: 1px 6px; border-radius: 4px; color: var(--accent-soft); font-family: 'Source Code Pro', monospace; font-size: 0.74rem; }
/* ---------- #40 (removed: Cookie chai banner — killed per REDESIGN-2026Q2 §1.6) ---------- */
/* ---------- #78 AI agent leaderboard ---------- */
.ldr-table {
background: rgba(244,239,230,0.02);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.ldr-row {
display: grid; grid-template-columns: 48px 1.4fr 80px 80px 2.5fr;
gap: 16px;
padding: 16px 22px;
border-bottom: 1px solid var(--border);
align-items: center;
transition: background 220ms ease;
}
.ldr-row:last-child { border-bottom: none; }
.ldr-row.ldr-head {
background: rgba(178,164,255,0.04);
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.66rem; letter-spacing: 0.18em; color: var(--ink-2);
text-transform: uppercase;
}
.ldr-row:not(.ldr-head):hover { background: rgba(178,164,255,0.05); }
.ldr-rank {
font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.4rem;
background: linear-gradient(135deg, var(--royal-soft) 0%, var(--accent-soft) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.ldr-agent { font-family: 'Clash Display', sans-serif; font-weight: 500; color: var(--ink-0); }
.ldr-score { font-family: 'Source Code Pro', monospace; color: var(--accent-soft); font-weight: 600; }
.ldr-convos { font-family: 'Source Code Pro', monospace; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.ldr-win { font-size: 0.88rem; color: var(--ink-1); line-height: 1.4; }
.ldr-foot {
margin-top: 12px; text-align: right;
font-size: 0.72rem; letter-spacing: 0.08em; color: var(--royal-soft);
}
@media (max-width: 880px) {
.ldr-row { grid-template-columns: 32px 1fr 60px; gap: 12px; padding: 12px 16px; }
.ldr-row > *:nth-child(4), .ldr-row > *:nth-child(5) { display: none; }
}
/* ---------- /letter page ---------- */
.letter-body { font-family: 'Satoshi', sans-serif; font-size: 1.04rem; line-height: 1.72; color: var(--ink-1); }
.letter-body p { margin-bottom: 1.4em; }
.letter-body strong { color: var(--ink-0); font-weight: 600; }
.letter-lead {
font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
font-variation-settings: "opsz" 144;
font-size: 1.3rem; line-height: 1.5; color: var(--ink-0);
margin-bottom: 2em !important;
padding-bottom: 1.4em;
border-bottom: 1px solid var(--border);
}
.letter-signoff { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); }
.ls-name {
font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
font-variation-settings: "opsz" 144; font-size: 1.6rem;
color: var(--ink-0);
}
.ls-role { font-size: 0.82rem; color: var(--ink-2); letter-spacing: 0.04em; }
/* ============================================================
PHASE D — AI PLACEHOLDER STYLES
============================================================ */
/* ---------- #68 Founder AI chat card ---------- */
.ai-card {
padding: 24px;
background: linear-gradient(180deg, rgba(178,164,255,0.04) 0%, transparent 100%);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
}
.ai-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.ai-avatar {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color: var(--ink-0);
font-family: 'Source Code Pro', monospace; font-weight: 600; font-size: 1.2rem;
border-radius: 50%;
}
.ai-name { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.05rem; }
.ai-status { font-size: 0.78rem; color: var(--ink-2); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.ai-status em { font-family: 'Fraunces', serif; font-style: italic; color: var(--royal-soft); }
.ai-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4CD964; animation: heartbeatPulse 1.6s ease-in-out infinite; }
.ai-id { flex: 1; }
.ai-placeholder-pill {
padding: 4px 8px;
background: rgba(212,184,134,0.10);
border: 1px solid rgba(212,184,134,0.35);
border-radius: var(--r-sm);
font-family: 'Source Code Pro', monospace; font-size: 0.62rem; letter-spacing: 0.14em;
color: var(--royal-soft);
}
.ai-thread {
min-height: 200px; max-height: 360px; overflow-y: auto;
padding: 8px 4px;
display: flex; flex-direction: column; gap: 10px;
margin-bottom: 14px;
}
.ai-bubble { max-width: 80%; padding: 10px 14px; border-radius: var(--r-md); }
.ai-bubble-bot { background: rgba(244,239,230,0.04); border: 1px solid var(--border); align-self: flex-start; }
.ai-bubble-user { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color: #fff; align-self: flex-end; }
.ai-bubble-text { font-family: 'Satoshi', sans-serif; font-size: 0.92rem; line-height: 1.45; }
.ai-typing-dots { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; }
.ai-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); animation: typingBounce 1.2s ease-in-out infinite; }
.ai-typing-dots span:nth-child(2) { animation-delay: 200ms; }
.ai-typing-dots span:nth-child(3) { animation-delay: 400ms; }
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-4px); opacity: 1; }
}
.ai-input-row { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.ai-input-row input {
flex: 1; padding: 12px 16px;
background: rgba(244,239,230,0.03); border: 1px solid var(--border);
border-radius: var(--r-pill); color: var(--ink-0);
font-family: 'Satoshi', sans-serif; font-size: 0.92rem;
outline: none;
}
.ai-input-row input:focus { border-color: var(--accent-soft); }
html.theme-light .ai-bubble-bot { background: rgba(27,22,56,0.03); }
html.theme-light .ai-input-row input { background: rgba(27,22,56,0.03); }
/* ---------- #69 Tour guide modal ---------- */
.tour-modal {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity 320ms ease;
}
.tour-modal.visible { opacity: 1; pointer-events: auto; }
.tm-backdrop { position: absolute; inset: 0; background: rgba(11,9,23,0.78); backdrop-filter: blur(14px) saturate(140%); }
.tm-panel {
position: relative; z-index: 1;
width: min(680px, calc(100% - 32px));
background: var(--bg-1);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
padding: 32px;
box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
transform: scale(0.92) translateY(20px);
transition: transform 360ms var(--ease-signature);
}
.tour-modal.visible .tm-panel { transform: scale(1) translateY(0); }
.tm-close {
position: absolute; top: 16px; right: 16px;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(244,239,230,0.04); border: 1px solid var(--border);
color: var(--ink-1); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.tm-close:hover { color: var(--ink-0); background: rgba(244,239,230,0.08); }
.tm-progress {
height: 3px; width: 100%;
background: rgba(244,239,230,0.06);
border-radius: 2px; margin-bottom: 24px; overflow: hidden;
}
.tm-progress-fill {
display: block; height: 100%;
background: linear-gradient(90deg, var(--accent) 0%, var(--royal) 100%);
transition: width 360ms var(--ease-signature);
}
.tm-eyebrow {
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent-soft); margin-bottom: 12px;
}
.tm-eyebrow-royal { color: var(--royal-soft); }
.tm-question {
font-family: 'Clash Display', sans-serif; font-weight: 600;
font-size: clamp(1.5rem, 2.6vw, 2rem);
letter-spacing: -0.024em;
color: var(--ink-0); margin: 0 0 24px;
}
.tm-options { display: flex; flex-direction: column; gap: 10px; }
.tm-option {
display: flex; align-items: center;
padding: 14px 18px;
background: rgba(244,239,230,0.03);
border: 1px solid var(--border);
border-radius: var(--r-md);
color: var(--ink-0); cursor: pointer; text-align: left;
font-family: 'Satoshi', sans-serif; font-size: 0.96rem;
transition: background 220ms ease, border-color 220ms ease, transform 240ms var(--ease-signature);
}
.tm-option:hover { background: rgba(178,164,255,0.08); border-color: var(--accent-soft); transform: translateX(4px); }
.tm-recommend-blurb { color: var(--ink-1); margin-bottom: 24px; line-height: 1.6; }
.tm-recommend-card {
padding: 24px;
background: linear-gradient(135deg, rgba(178,164,255,0.08) 0%, rgba(212,184,134,0.05) 100%);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
margin-bottom: 24px;
}
.tm-recommend-tag {
display: inline-block;
padding: 4px 10px;
background: rgba(178,164,255,0.10);
border: 1px solid var(--accent-soft);
border-radius: var(--r-sm);
font-family: 'Source Code Pro', monospace; font-size: 0.66rem; letter-spacing: 0.14em;
color: var(--accent-soft);
margin-bottom: 14px;
}
.tm-recommend-title {
font-family: 'Clash Display', sans-serif; font-weight: 600;
font-size: 1.6rem; letter-spacing: -0.02em;
background: linear-gradient(95deg, var(--accent-soft) 0%, var(--royal-soft) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.tm-recommend-meta { color: var(--ink-2); margin-top: 4px; font-size: 0.88rem; }
.tm-recommend-bullets {
margin: 18px 0 0; padding: 0 0 0 18px;
color: var(--ink-1); font-size: 0.92rem; line-height: 1.6;
}
.tm-recommend-bullets li { margin-bottom: 4px; }
.tm-recommend-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tm-honest {
margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
font-size: 0.78rem; color: var(--ink-2);
}
html.theme-light .tm-panel { background: var(--bg-0); }
.btn-tour {
background: rgba(212,184,134,0.06);
border-color: rgba(212,184,134,0.35);
color: var(--royal-soft) !important;
}
.btn-tour:hover { background: rgba(212,184,134,0.12) !important; color: var(--ink-0) !important; }
/* (#71 Hindi pill CSS removed in Round 2.3 escalation — see docs/REDESIGN-2026Q2.md §1.6.1) */
/* ---------- #72 Diagnose form ---------- */
.dg-host { padding: 28px; background: rgba(244,239,230,0.02); border: 1px solid var(--border); border-radius: var(--r-lg); }
.dg-progress { height: 3px; width: 100%; background: rgba(244,239,230,0.06); border-radius: 2px; overflow: hidden; margin-bottom: 18px; }
.dg-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent) 0%, var(--royal) 100%); transition: width 320ms var(--ease-signature); }
.dg-eyebrow { font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.22em; color: var(--accent-soft); margin-bottom: 14px; text-transform: uppercase; }
.dg-question { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: var(--ink-0); margin-bottom: 24px; line-height: 1.2; }
.dg-options { display: flex; flex-direction: column; gap: 10px; }
.dg-option { padding: 12px 16px; background: rgba(244,239,230,0.03); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink-0); cursor: pointer; text-align: left; font-family: 'Satoshi', sans-serif; font-size: 0.94rem; transition: all 220ms ease; }
.dg-option:hover { background: rgba(178,164,255,0.08); border-color: var(--accent-soft); transform: translateX(4px); }
.dg-form { display: flex; gap: 10px; }
.dg-form input { flex: 1; padding: 12px 16px; background: rgba(244,239,230,0.03); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--ink-0); font-family: 'Satoshi', sans-serif; font-size: 0.95rem; outline: none; }
.dg-form input:focus { border-color: var(--accent-soft); }
.dg-meta { margin-top: 16px; font-size: 0.74rem; color: var(--ink-2); }
.dg-meta kbd { padding: 1px 6px; background: rgba(178,164,255,0.10); border: 1px solid var(--border); border-radius: 4px; font-family: 'Source Code Pro', monospace; font-size: 0.72rem; color: var(--accent-soft); }
.dg-done { text-align: left; }
.dg-summary { margin: 24px 0; padding: 20px; background: rgba(178,164,255,0.04); border-left: 3px solid var(--accent-soft); border-radius: 0 var(--r-md) var(--r-md) 0; }
.dg-summary > div { display: flex; gap: 14px; margin-bottom: 8px; }
.dg-summary .dg-l { min-width: 100px; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ink-2); text-transform: uppercase; font-weight: 500; }
.dg-summary > div > span:last-child { color: var(--ink-0); flex: 1; }
/* ---------- #73 Case-study generator ---------- */
[data-case-study] { padding: 32px; background: linear-gradient(180deg, rgba(178,164,255,0.04) 0%, transparent 100%); border: 1px solid var(--border-strong); border-radius: var(--r-lg); }
.cs-eyebrow { font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.22em; color: var(--accent-soft); text-transform: uppercase; }
.cs-form { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; }
.cs-form textarea { padding: 14px 18px; background: rgba(244,239,230,0.03); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink-0); font-family: 'Satoshi', sans-serif; font-size: 0.95rem; outline: none; resize: vertical; line-height: 1.5; }
.cs-form textarea:focus { border-color: var(--accent-soft); }
.cs-form button { align-self: flex-start; }
.cs-output { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.cs-card { padding: 24px; background: linear-gradient(135deg, rgba(178,164,255,0.06) 0%, rgba(212,184,134,0.05) 100%); border: 1px solid var(--border-strong); border-radius: var(--r-md); animation: fadeUp 480ms var(--ease-signature); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.cs-card-eyebrow { font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.18em; color: var(--accent-soft); }
.cs-card-title { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.8rem; margin-top: 10px; background: linear-gradient(95deg, var(--accent-soft) 0%, var(--royal-soft) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; }
.cs-card-meta { color: var(--ink-2); margin-top: 4px; font-size: 0.88rem; }
.cs-card-block { margin-top: 20px; }
.cs-card-label { font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.18em; color: var(--royal-soft); text-transform: uppercase; margin-bottom: 8px; }
.cs-card-text { color: var(--ink-1); line-height: 1.55; }
.cs-card-bullets { margin: 8px 0 0; padding: 0 0 0 18px; color: var(--ink-1); font-size: 0.92rem; line-height: 1.7; }
.cs-card-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
/* ---------- #74 Live agent demo ---------- */
.lad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 880px) { .lad-grid { grid-template-columns: 1fr; } }
.lad-thread { background: rgba(244,239,230,0.02); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 280px; }
.lad-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: rgba(178,164,255,0.04); }
.lad-dot { width: 6px; height: 6px; border-radius: 50%; background: #4CD964; animation: heartbeatPulse 1.6s ease-in-out infinite; }
.lad-who { flex: 1; font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.85rem; color: var(--ink-0); }
.lad-tag { padding: 2px 8px; background: rgba(76,217,100,0.10); border: 1px solid rgba(76,217,100,0.3); border-radius: var(--r-sm); font-family: 'Source Code Pro', monospace; font-size: 0.6rem; letter-spacing: 0.14em; color: #4CD964; }
.lad-stack { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 260px; }
.lad-msg { max-width: 84%; padding: 8px 12px; border-radius: var(--r-md); font-family: 'Satoshi', sans-serif; font-size: 0.82rem; line-height: 1.4; animation: fadeUp 320ms var(--ease-signature); }
.lad-user { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color: var(--ink-0); align-self: flex-end; }
.lad-bot { background: rgba(244,239,230,0.04); border: 1px solid var(--border); color: var(--ink-0); align-self: flex-start; }
.lad-foot { text-align: center; margin-top: 22px; font-size: 0.78rem; color: var(--royal-soft); letter-spacing: 0.04em; }
/* ---------- #75 Multimodal demo ---------- */
.mm-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 880px) { .mm-wrap { grid-template-columns: 1fr; } }
.mm-stage { display: flex; flex-direction: column; gap: 14px; }
.mm-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; background: rgba(244,239,230,0.02); border: 2px dashed var(--border-strong); border-radius: var(--r-lg); text-align: center; cursor: pointer; transition: border-color 240ms ease, background 240ms ease; min-height: 320px; }
.mm-drop:hover { border-color: var(--accent-soft); background: rgba(178,164,255,0.04); }
.mm-drop-icon { font-size: 2.6rem; margin-bottom: 18px; opacity: 0.7; }
.mm-drop-text strong { display: block; font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--ink-0); }
.mm-drop-text span { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--ink-2); }
.mm-demo-btn { margin-top: 24px; }
.mm-results { padding: 24px; background: rgba(178,164,255,0.04); border: 1px solid var(--border-strong); border-radius: var(--r-lg); }
.mm-results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.mm-status { font-family: 'Source Code Pro', monospace; font-size: 0.74rem; color: var(--accent-soft); }
.mm-fields { display: flex; flex-direction: column; gap: 8px; }
.mm-field { display: flex; gap: 14px; padding: 8px 12px; background: rgba(244,239,230,0.02); border-left: 2px solid var(--accent-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; animation: fadeUp 240ms ease; }
.mm-f-label { min-width: 130px; font-family: 'Source Code Pro', monospace; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--ink-2); text-transform: uppercase; }
.mm-f-value { flex: 1; font-family: 'Satoshi', sans-serif; font-size: 0.92rem; color: var(--ink-0); }
.mm-calendar, .mm-reminders { margin-top: 18px; padding: 14px 18px; background: rgba(212,184,134,0.06); border: 1px solid rgba(212,184,134,0.25); border-radius: var(--r-md); animation: fadeUp 320ms ease; }
.mm-cal-head { font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.74rem; letter-spacing: 0.12em; color: var(--royal-soft); margin-bottom: 8px; text-transform: uppercase; }
.mm-cal-body { color: var(--ink-0); font-size: 0.92rem; line-height: 1.5; }
.mm-reminder-list { list-style: none; padding: 0; margin: 8px 0 0; }
.mm-reminder-list li { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 0.88rem; }
.mm-reminder-list li:last-child { border-bottom: none; }
.mm-rem-d { font-family: 'Source Code Pro', monospace; color: var(--royal-soft); font-weight: 600; }
.mm-rem-t { color: var(--ink-1); font-variant-numeric: tabular-nums; }
.mm-rem-m { color: var(--ink-2); font-size: 0.78rem; }
/* ---------- #76 Playbook builder ---------- */
.pb-wrap { padding: 36px; background: linear-gradient(135deg, rgba(178,164,255,0.05) 0%, rgba(212,184,134,0.04) 100%); border: 1px solid var(--border-strong); border-radius: var(--r-lg); }
.pb-head { margin-bottom: 28px; }
.pb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pb-label { display: flex; flex-direction: column; gap: 6px; }
.pb-label > span { font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.78rem; color: var(--ink-2); letter-spacing: 0.04em; }
.pb-label input, .pb-label textarea { padding: 12px 14px; background: rgba(244,239,230,0.03); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink-0); font-family: 'Satoshi', sans-serif; font-size: 0.92rem; outline: none; resize: vertical; }
.pb-label input:focus, .pb-label textarea:focus { border-color: var(--accent-soft); }
.pb-label-full { grid-column: 1 / -1; }
.pb-form button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 640px) { .pb-form { grid-template-columns: 1fr; } }
.pb-loading { padding: 24px; text-align: center; color: var(--ink-2); font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; }
.pb-output { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--border); }
.pb-doc { padding: 28px; background: var(--bg-0); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: 0 20px 60px -20px rgba(0,0,0,0.4); animation: fadeUp 480ms var(--ease-signature); }
.pb-doc-head { padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.pb-doc-pains { padding: 16px 18px; background: rgba(178,164,255,0.04); border-left: 3px solid var(--accent-soft); border-radius: 0 var(--r-md) var(--r-md) 0; margin-bottom: 24px; }
.pb-doc-label { font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.18em; color: var(--royal-soft); text-transform: uppercase; margin-bottom: 6px; }
.pb-doc-pains p { color: var(--ink-1); line-height: 1.55; margin: 0; }
.pb-doc-phases { display: flex; flex-direction: column; gap: 12px; }
.pb-phase { padding: 16px 18px; background: rgba(244,239,230,0.03); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color 220ms ease; }
.pb-phase:hover { border-color: var(--accent-soft); }
.pb-phase-tag { font-family: 'Source Code Pro', monospace; font-size: 0.68rem; letter-spacing: 0.12em; color: var(--accent-soft); margin-bottom: 6px; }
.pb-phase-title { font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: 1.08rem; color: var(--ink-0); }
.pb-phase-meta { margin-top: 4px; color: var(--ink-2); font-size: 0.86rem; }
.pb-phase-meta em { color: var(--royal-soft); font-style: italic; font-family: 'Fraunces', serif; }
.pb-doc-foot { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
/* ============================================================
PHASE E — TRUST & CONTENT STYLES
============================================================ */
/* ---------- #45 Trusted-by marquee ---------- */
.trusted-strip { padding: 36px 0; }
.trusted-strip-inner { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.trusted-eyebrow {
font-family: 'Satoshi', sans-serif; font-weight: 500;
font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-2);
}
.trusted-marquee {
width: 100%;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.trusted-track {
display: inline-flex; gap: 24px; align-items: center;
animation: trustedSlide 32s linear infinite;
white-space: nowrap;
padding: 12px 0;
}
@keyframes trustedSlide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
body.motion-off .trusted-track { animation: none; }
.trusted-item {
font-family: 'Clash Display', sans-serif; font-weight: 500;
font-size: 1.1rem;
color: var(--ink-1);
letter-spacing: -0.01em;
padding: 0 4px;
}
.trusted-dot { color: var(--accent-soft); font-size: 1.1rem; }
.trusted-note { font-size: 0.82rem; color: var(--ink-2); }
.trusted-link { color: var(--royal-soft); text-decoration: underline; text-underline-offset: 3px; }
.trusted-link:hover { color: var(--ink-0); }
/* ---------- #43 Deploy counter (footer strip) ---------- */
.deploy-counter-strip {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 28px; padding: 8px 14px;
background: rgba(76, 217, 100, 0.06);
border: 1px solid rgba(76, 217, 100, 0.18);
border-radius: var(--r-pill);
font-family: 'Satoshi', sans-serif; font-size: 0.8rem;
color: var(--ink-1); font-variant-numeric: tabular-nums;
}
.deploy-counter-strip .dcs-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #4CD964;
animation: heartbeatPulse 1.6s ease-in-out infinite;
}
.deploy-counter-strip strong { color: var(--ink-0); font-weight: 600; }
.deploy-counter-strip em { color: var(--accent-soft); font-style: italic; font-family: 'Source Code Pro', monospace; font-size: 0.74rem; }
.deploy-counter-strip .dcs-mock {
padding: 2px 6px;
background: rgba(212, 184, 134, 0.10);
border: 1px solid rgba(212, 184, 134, 0.3);
border-radius: var(--r-sm);
font-family: 'Source Code Pro', monospace; font-size: 0.62rem; letter-spacing: 0.14em;
color: var(--royal-soft);
margin-left: 4px;
}
/* ---------- #55 GitHub heatmap ---------- */
.gh-heatmap { margin-top: 18px; padding: 18px; background: rgba(244,239,230,0.02); border: 1px solid var(--border); border-radius: var(--r-md); overflow-x: auto; }
.gh-grid { display: inline-flex; gap: 3px; }
.gh-col { display: inline-flex; flex-direction: column; gap: 3px; }
.gh-cell { display: block; width: 10px; height: 10px; border-radius: 2px; }
.gh-l0 { background: rgba(244,239,230,0.06); }
.gh-l1 { background: rgba(178,164,255,0.30); }
.gh-l2 { background: rgba(178,164,255,0.55); }
.gh-l3 { background: rgba(178,164,255,0.80); }
.gh-l4 { background: var(--accent-soft); box-shadow: 0 0 4px var(--accent-glow); }
.gh-legend {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 14px;
font-family: 'Satoshi', sans-serif; font-size: 0.72rem; color: var(--ink-2);
}
.gh-legend span:not(.gh-l0):not(.gh-l1):not(.gh-l2):not(.gh-l3):not(.gh-l4) { padding: 0 4px; }
.gh-legend span.gh-l0,
.gh-legend span.gh-l1,
.gh-legend span.gh-l2,
.gh-legend span.gh-l3,
.gh-legend span.gh-l4 { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.gh-caption {
margin-top: 14px;
font-family: 'Satoshi', sans-serif; font-size: 0.86rem; color: var(--ink-1);
}
.gh-caption strong { color: var(--royal-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
html.theme-light .gh-l0 { background: rgba(27,22,56,0.05); }
/* ---------- #52 LinkedIn feed mock ---------- */
.li-feed { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.li-post { padding: 18px; background: rgba(244,239,230,0.02); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color 220ms ease; }
.li-post:hover { border-color: var(--border-strong); }
.li-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.li-avatar {
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #0A66C2 0%, #004182 100%);
color: #fff; font-family: 'Clash Display', sans-serif; font-weight: 600;
}
.li-meta { flex: 1; min-width: 0; }
.li-author { font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: 0.92rem; color: var(--ink-0); }
.li-role { font-size: 0.74rem; color: var(--ink-2); }
.li-ago { font-size: 0.7rem; color: var(--ink-2); margin-top: 2px; }
.li-logo {
width: 22px; height: 22px; border-radius: 4px;
background: #0A66C2; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 0.88rem;
font-style: italic;
}
.li-body { color: var(--ink-1); font-size: 0.92rem; line-height: 1.55; margin: 0 0 12px; }
.li-footer { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--ink-2); }
.li-react { color: var(--ink-1); }
/* ---------- About .trust-twocol two-column grid ---------- */
.trust-twocol { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; }
@media (max-width: 1024px) { .trust-twocol { grid-template-columns: 1fr; } }
/* ---------- #44 Client logos wall (empty state) ---------- */
.logo-wall {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px;
margin-top: 24px;
}
.logo-slot {
padding: 20px 16px;
background: rgba(244,239,230,0.02);
border: 1px dashed var(--border-strong);
border-radius: var(--r-md);
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 8px;
transition: border-color 240ms ease;
}
.logo-slot:hover { border-color: var(--accent-soft); border-style: solid; }
.logo-placeholder {
font-family: 'Source Code Pro', monospace; font-weight: 600; font-size: 0.66rem;
letter-spacing: 0.18em; color: var(--ink-2);
padding: 6px 14px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
.logo-slot span { font-family: 'Satoshi', sans-serif; font-size: 0.74rem; color: var(--ink-2); }
.logo-wall-note {
margin-top: 18px; text-align: center;
font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
font-variation-settings: "opsz" 144;
font-size: 0.94rem; color: var(--royal-soft);
}
/* ---------- #49 Review widgets placeholder ---------- */
.review-widget-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
margin-top: 24px;
}
.review-card {
padding: 22px;
background: rgba(244,239,230,0.02);
border: 1px dashed var(--border-strong);
border-radius: var(--r-md);
text-align: center;
}
.rc-platform {
font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.4rem;
color: var(--ink-0); margin-bottom: 10px;
letter-spacing: -0.02em;
}
.rc-status {
font-family: 'Satoshi', sans-serif; font-size: 0.84rem; color: var(--accent-soft);
margin-bottom: 8px;
}
.rc-meta {
font-family: 'Source Code Pro', monospace; font-size: 0.74rem; color: var(--ink-2);
letter-spacing: 0.04em;
}
/* ---------- /careers role cards ---------- */
.role-list { display: flex; flex-direction: column; gap: 16px; }
.role-card {
padding: 28px;
background: linear-gradient(180deg, rgba(178,164,255,0.04) 0%, transparent 100%);
border: 1px solid var(--border);
border-radius: var(--r-lg);
transition: border-color 240ms ease, transform 280ms var(--ease-signature);
}
.role-card:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
.role-tag {
font-family: 'Source Code Pro', monospace; font-size: 0.66rem; letter-spacing: 0.18em;
color: var(--accent-soft); margin-bottom: 8px;
}
.role-title { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; }
.role-blurb { color: var(--ink-1); margin: 10px 0 16px; line-height: 1.55; }
.role-bullets { margin: 0 0 16px; padding: 0 0 0 18px; color: var(--ink-1); font-size: 0.92rem; line-height: 1.7; }
.role-status {
padding-top: 14px; border-top: 1px solid var(--border);
font-family: 'Satoshi', sans-serif; font-size: 0.84rem; color: var(--ink-2);
}
.role-status strong { color: var(--royal-soft); font-weight: 500; }
/* ---------- Culture list ---------- */
.culture-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.culture-list li {
padding: 16px 18px;
background: rgba(244,239,230,0.02);
border-left: 3px solid var(--accent-soft);
border-radius: 0 var(--r-md) var(--r-md) 0;
color: var(--ink-1);
line-height: 1.55;
}
.culture-list li strong { color: var(--ink-0); font-weight: 600; }
.culture-list li a { color: var(--royal-soft); text-decoration: underline; text-underline-offset: 3px; }
/* ---------- /honest page ---------- */
.honest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 880px) { .honest-grid { grid-template-columns: 1fr; } }
.honest-item {
display: flex; gap: 14px;
padding: 18px;
background: rgba(224, 135, 112, 0.04);
border: 1px solid rgba(224, 135, 112, 0.20);
border-radius: var(--r-md);
}
.honest-mark {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(224, 135, 112, 0.15);
color: #E08770;
font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 1.2rem;
border-radius: 50%; flex-shrink: 0;
}
.honest-item > div:last-child { color: var(--ink-1); line-height: 1.5; }
.honest-item strong { color: var(--ink-0); font-weight: 600; }
.screwup-list { display: flex; flex-direction: column; gap: 14px; }
.screwup-card {
padding: 22px;
background: rgba(244,239,230,0.02);
border-left: 3px solid var(--royal);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.su-date {
font-family: 'Source Code Pro', monospace; font-size: 0.7rem; letter-spacing: 0.14em;
color: var(--royal-soft); margin-bottom: 8px;
}
.su-title { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.2rem; color: var(--ink-0); margin-bottom: 8px; }
.screwup-card p { color: var(--ink-1); margin: 0; line-height: 1.55; }
/* ---------- /open-source empty state ---------- */
.oss-empty {
text-align: center;
padding: 56px 32px;
background: rgba(178,164,255,0.04);
border: 1px dashed var(--border-strong);
border-radius: var(--r-lg);
}
.oss-empty-icon { font-size: 2.4rem; opacity: 0.6; }
.oss-roadmap {
max-width: 640px; margin: 28px auto 0;
display: flex; flex-direction: column; gap: 10px;
}
.oss-roadmap-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 16px;
background: rgba(244,239,230,0.03);
border: 1px solid var(--border);
border-radius: var(--r-sm);
font-family: 'Satoshi', sans-serif; font-size: 0.92rem;
color: var(--ink-1);
text-align: left;
}
.oss-tag {
padding: 2px 8px;
background: rgba(212, 184, 134, 0.12);
border: 1px solid rgba(212, 184, 134, 0.3);
border-radius: var(--r-sm);
font-family: 'Source Code Pro', monospace; font-size: 0.62rem; letter-spacing: 0.14em;
color: var(--royal-soft); flex-shrink: 0;
}
.oss-roadmap-row strong { color: var(--ink-0); font-family: 'Source Code Pro', monospace; font-size: 0.88rem; }
/* ============================================================
NAV — "MORE" DROPDOWN STYLES (compact)
============================================================ */
.has-flyout-more > button {
background: transparent;
border: none;
color: var(--ink-1);
font-family: 'Satoshi', sans-serif;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.005em;
cursor: pointer;
padding: 8px 0;
display: inline-flex; align-items: center; gap: 4px;
transition: color 200ms ease;
}
.has-flyout-more > button:hover,
.has-flyout-more:hover > button { color: var(--ink-0); }
.has-flyout-more > button > span { font-size: 0.78rem; opacity: 0.7; }
.nav-flyout-more {
min-width: 500px;
/* Inherit base .nav-flyout centering — drops directly UNDER the More button. */
}
/* If the centered flyout would clip the right edge of small viewports, nudge it left. */
@media (max-width: 1100px) {
.nav-flyout-more {
left: auto; right: 0;
transform: translateX(0) translateY(8px);
}
.nav-dropdown.has-flyout-more:hover .nav-flyout-more,
.nav-dropdown.has-flyout-more:focus-within .nav-flyout-more {
transform: translateX(0) translateY(0);
}
}
.flyout-grid-compact {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.flyout-link-compact {
padding: 12px 14px !important;
}
.flyout-link-compact strong {
font-size: 0.96rem !important;
display: flex; align-items: center; gap: 8px;
}
.flyout-link-compact span {
font-size: 0.78rem !important;
margin-top: 2px !important;
}
.flyout-tag {
display: inline-block;
padding: 2px 7px;
background: rgba(212, 184, 134, 0.10);
border: 1px solid rgba(212, 184, 134, 0.30);
border-radius: var(--r-sm);
font-family: 'Source Code Pro', monospace;
font-size: 0.58rem;
letter-spacing: 0.14em;
color: var(--royal-soft);
font-weight: 500;
}
/* ============================================================
LITE MODE
Enabled via localStorage.lite='1'. Boot script in of every
page sets html.lite-mode + html.motion-off before first paint.
Goal: minimize work for weak devices — kill expensive paint
operations (blur, gradients, mesh, shadows, custom italic fonts),
hide ornamental layers, fall back to system fonts.
Animations are already covered by .motion-off (line ~1375).
============================================================ */
/* Boot script sets class on — main.js mirrors to at startup.
Selector targets BOTH so styles apply pre- and post-bootstrap. */
html.lite-mode,
body.lite-mode {
/* Disable view-transitions API at the root */
view-transition-name: none;
}
/* Kill ALL backdrop-filter blur — extremely expensive on mobile GPUs */
html.lite-mode *,
html.lite-mode *::before,
html.lite-mode *::after,
body.lite-mode *,
body.lite-mode *::before,
body.lite-mode *::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Solid background — kill gradient mesh rendering on body */
html.lite-mode body,
body.lite-mode {
background-image: none !important;
}
/* Hide ornamental decorative layers (mesh, time-warp ring, footer flourish) */
html.lite-mode .hero-mesh,
html.lite-mode .hero-mesh-canvas,
html.lite-mode .bg-mesh,
html.lite-mode .footer-chrome-c,
html.lite-mode .tm-warp,
html.lite-mode .chrono-hint,
html.lite-mode .custom-cursor,
body.lite-mode .hero-mesh,
body.lite-mode .hero-mesh-canvas,
body.lite-mode .bg-mesh,
body.lite-mode .footer-chrome-c,
body.lite-mode .tm-warp,
body.lite-mode .chrono-hint,
body.lite-mode .custom-cursor {
display: none !important;
}
/* Flatten multi-layer box-shadows on cards/panels (GPU-heavy) */
html.lite-mode .card,
html.lite-mode .panel,
html.lite-mode .embed-depth,
html.lite-mode .belief-grid > *,
html.lite-mode .three-col > *,
html.lite-mode .stats-row > *,
html.lite-mode .flyout-link,
body.lite-mode .card,
body.lite-mode .panel,
body.lite-mode .embed-depth,
body.lite-mode .belief-grid > *,
body.lite-mode .three-col > *,
body.lite-mode .stats-row > *,
body.lite-mode .flyout-link {
box-shadow: none !important;
filter: none !important;
}
/* Drop Fraunces editorial italic accents — fall back to system serif.
Targets the inline-style accents added during the visual-richness restore
pass + the .eyebrow class + h2/h3 em variants. */
html.lite-mode em[style*="Fraunces"],
html.lite-mode .eyebrow,
body.lite-mode em[style*="Fraunces"],
body.lite-mode .eyebrow {
font-family: Georgia, 'Times New Roman', serif !important;
}
/* Cursor: revert to default if custom-cursor-on slipped through the JS gate */
html.lite-mode.custom-cursor-on,
html.lite-mode .custom-cursor-on,
body.lite-mode.custom-cursor-on {
cursor: auto !important;
}
/* Lite toggle button — show active state when lite mode is on */
html.lite-mode .lite-toggle,
body.lite-mode .lite-toggle {
background: rgba(178, 164, 255, 0.15) !important;
border-color: rgba(178, 164, 255, 0.5) !important;
color: var(--royal-soft, #B2A4FF) !important;
}
/* ============================================================
WELCOME MODAL (first-visit mode chooser)
Triggered by main.js initWelcomeFlow() when localStorage.modeChosen
is unset. 2 cards (Full / Lite). The recommended card gets a badge
based on a device-signal score (saveData, deviceMemory, etc.).
============================================================ */
.welcome-modal {
position: fixed;
inset: 0;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 240ms ease;
}
.welcome-modal.is-open { opacity: 1; pointer-events: auto; }
.welcome-modal.is-closing { opacity: 0; }
.welcome-backdrop {
position: absolute;
inset: 0;
background: rgba(11, 9, 23, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
}
.welcome-panel {
position: relative;
max-width: 760px;
margin: 9vh auto 0;
padding: 44px 40px 36px;
background: #16132A;
border: 1px solid rgba(178, 164, 255, 0.22);
border-radius: var(--r-lg, 16px);
box-shadow: 0 24px 64px -16px rgba(0,0,0,0.7);
text-align: center;
transform: translateY(-12px);
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.welcome-modal.is-open .welcome-panel { transform: translateY(0); }
.welcome-title {
font-size: 1.7rem;
margin: 0 0 8px;
color: var(--text, #F5F0E6);
letter-spacing: -0.01em;
}
.welcome-sub {
color: rgba(245, 240, 230, 0.65);
margin: 0 0 32px;
font-size: 0.96rem;
}
.welcome-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 18px;
}
@media (max-width: 600px) {
.welcome-cards { grid-template-columns: 1fr; }
.welcome-panel { margin: 5vh 14px 0; padding: 32px 22px; }
.welcome-title { font-size: 1.4rem; }
}
.welcome-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 22px 22px 20px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--r-md, 12px);
cursor: pointer;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
font: inherit;
color: inherit;
}
.welcome-card:hover {
transform: translateY(-2px);
border-color: rgba(178, 164, 255, 0.4);
background: rgba(255, 255, 255, 0.045);
}
.welcome-card.is-recommended {
border-color: rgba(178, 164, 255, 0.55);
background: rgba(178, 164, 255, 0.07);
}
.recommend-badge {
position: absolute;
top: -10px;
left: 18px;
display: inline-block;
padding: 4px 11px;
background: #8B7BFF;
color: #fff;
border-radius: 999px;
font-size: 0.66rem;
letter-spacing: 0.05em;
font-weight: 500;
text-transform: uppercase;
}
.welcome-card h3 {
margin: 0 0 10px;
font-size: 1.18rem;
color: var(--text, #F5F0E6);
letter-spacing: -0.005em;
}
.welcome-card p {
margin: 0 0 18px;
color: rgba(245, 240, 230, 0.62);
font-size: 0.9rem;
line-height: 1.5;
}
.welcome-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 9px 16px;
background: rgba(255, 255, 255, 0.08);
color: var(--text, #F5F0E6);
border-radius: var(--r-sm, 8px);
font-weight: 500;
font-size: 0.88rem;
transition: background 180ms ease;
}
.welcome-card.is-recommended .welcome-btn {
background: #8B7BFF;
color: #fff;
}
.welcome-card:hover .welcome-btn { background: rgba(255, 255, 255, 0.14); }
.welcome-card.is-recommended:hover .welcome-btn { background: #9c8eff; }
.welcome-foot {
margin: 0;
color: rgba(245, 240, 230, 0.4);
font-size: 0.78rem;
}
.welcome-foot kbd {
display: inline-block;
padding: 1px 6px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
font-family: 'Source Code Pro', monospace;
font-size: 0.72rem;
color: rgba(245, 240, 230, 0.7);
}
/* Light theme variants */
html.theme-light .welcome-panel { background: #FAF7F0; border-color: rgba(92, 69, 214, 0.18); }
html.theme-light .welcome-title,
html.theme-light .welcome-card h3 { color: #1A1530; }
html.theme-light .welcome-sub,
html.theme-light .welcome-card p { color: rgba(26, 21, 48, 0.65); }
html.theme-light .welcome-card { background: rgba(92, 69, 214, 0.02); border-color: rgba(26, 21, 48, 0.1); }
html.theme-light .welcome-card.is-recommended { background: rgba(139, 123, 255, 0.08); border-color: rgba(139, 123, 255, 0.45); }
html.theme-light .welcome-btn { background: rgba(26, 21, 48, 0.08); color: #1A1530; }
/* ============================================================
LCP NUDGE TOAST (post-load suggestion for slow renders)
Shown bottom-right after a 5s settle window if LCP > 4000ms.
One-time per device (gated by localStorage.lcpNudgeSeen).
============================================================ */
.lcp-toast {
position: fixed;
bottom: 24px;
right: 24px;
max-width: 360px;
z-index: 999;
background: #16132A;
border: 1px solid rgba(178, 164, 255, 0.28);
border-radius: var(--r-md, 12px);
box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.55);
transform: translateY(20px);
opacity: 0;
transition: transform 260ms ease, opacity 260ms ease;
}
.lcp-toast.is-open { transform: translateY(0); opacity: 1; }
.lcp-toast.is-closing { transform: translateY(20px); opacity: 0; }
.lcp-toast-inner { padding: 16px 18px; }
.lcp-toast-msg {
display: block;
font-size: 0.9rem;
color: var(--text, #F5F0E6);
margin-bottom: 12px;
line-height: 1.45;
}
.lcp-toast-msg strong { color: #B2A4FF; font-weight: 600; }
.lcp-toast-actions { display: flex; gap: 8px; }
.lcp-toast-btn {
padding: 7px 14px;
border-radius: var(--r-sm, 8px);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
border: none;
font-family: inherit;
}
.lcp-toast-primary { background: #8B7BFF; color: #fff; }
.lcp-toast-primary:hover { background: #9c8eff; }
.lcp-toast-dismiss {
background: transparent;
color: rgba(245, 240, 230, 0.55);
}
.lcp-toast-dismiss:hover { color: rgba(245, 240, 230, 0.85); }
@media (max-width: 480px) {
.lcp-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
html.theme-light .lcp-toast { background: #FAF7F0; border-color: rgba(139, 123, 255, 0.32); }
html.theme-light .lcp-toast-msg { color: #1A1530; }
html.theme-light .lcp-toast-dismiss { color: rgba(26, 21, 48, 0.55); }
html.theme-light .lcp-toast-dismiss:hover { color: rgba(26, 21, 48, 0.85); }
/* Welcome modal + toast should respect lite-mode if the user already
triggered lite from the toast → modal disappears on reload anyway,
but defensively kill backdrop blur for cheap rendering. */
html.lite-mode .welcome-backdrop,
body.lite-mode .welcome-backdrop {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* === WAVE-4-D1 SCROLL FRAME === */
/* Scroll-frame focus animation system (spec §2.1, §2.2, §2.8).
Two implementations behind one selector:
1. Modern path — animation-timeline: view() (compositor-driven, near-free)
2. Fallback path — JS IntersectionObserver writes --focus-amount, CSS reacts
Honors prefers-reduced-motion, html.lite-mode, html.motion-off. */
[data-focus-section] {
/* will-change is set lazily by the JS path; modern path uses compositor anyway.
Default vars so the fallback CSS is safe before the observer attaches. */
--focus-amount: 1;
transform-origin: 50% 50%;
}
/* ---- Modern path: native scroll-driven animation ---- */
/* ---- Continuous per-section focus-frame: RETIRED ----
This was a scroll-LINKED effect (every [data-focus-section] dimmed/lifted
continuously as it crossed the viewport, every frame, for the whole scroll).
Even compositor-only it ran on 15 sections at once — the difference between
the jittery homepage and the buttery chronos-ca page (which has zero of these).
Retired so the homepage matches chronos-ca: NO continuous scroll animation.
The dramatic entrance now comes from the one-shot .reveal below, which fires
once as a section enters and then stops. data-focus-section attributes remain
in the markup as harmless no-ops (the JS observer self-neutralizes). */
[data-focus-section] { opacity: 1; transform: none; }
/* ---- Kill switches ---- */
@media (prefers-reduced-motion: reduce) {
[data-focus-section] {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
html.lite-mode [data-focus-section],
html.motion-off [data-focus-section],
body.lite-mode [data-focus-section],
body.motion-off [data-focus-section] {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
/* === /WAVE-4-D1 SCROLL FRAME === */
/* === WAVE-4-D2 GYRO === */
.gyro-toggle {
display: none;
margin-top: 12px;
padding: 6px 14px;
font: inherit;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(245, 240, 230, 0.78);
background: rgba(139, 123, 255, 0.08);
border: 1px solid rgba(139, 123, 255, 0.32);
border-radius: 999px;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
-webkit-tap-highlight-color: transparent;
}
.gyro-toggle:hover,
.gyro-toggle:focus-visible { background: rgba(139, 123, 255, 0.16); color: #F5F0E6; outline: none; }
.gyro-toggle[aria-pressed="true"] { background: rgba(139, 123, 255, 0.22); color: #EDE4FF; border-color: rgba(212, 198, 255, 0.55); }
@media (max-width: 768px) and (pointer: coarse) {
.gyro-toggle { display: inline-flex; align-items: center; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .gyro-toggle { display: none !important; } }
body.lite-mode .gyro-toggle,
body.motion-off .gyro-toggle { display: none !important; }
.hero .display-xl[data-gyro-active],
.clock-readout[data-gyro-active] { transform-style: preserve-3d; transition: transform 80ms linear; }
/* === /WAVE-4-D2 GYRO === */
/* === WAVE-4-D3 WHATSAPP WIDGET === */
/* Mid-tier widget: launcher + popup (choice / form / done). Sits in the
same bottom-right spot as the existing .fab-whatsapp; when this widget
is mounted we hide the legacy fab so they don't stack. */
.wa-widget[data-wa-mounted] ~ .fab-whatsapp,
body:has(.wa-widget[data-wa-mounted]) .fab-whatsapp { display: none !important; }
.wa-widget { font-family: 'Satoshi', sans-serif; }
.wa-widget__launcher {
position: fixed; bottom: 16px; right: 16px;
width: 56px; height: 56px; border-radius: 999px;
background: #25D366; color: #FFFFFF; border: 0;
display: flex; align-items: center; justify-content: center;
z-index: 95; cursor: pointer;
box-shadow: 0 12px 28px -6px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18);
transform: translateY(8px) scale(0.92); opacity: 0; pointer-events: none;
transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, box-shadow 200ms ease;
-webkit-tap-highlight-color: transparent;
}
.wa-widget__launcher svg { width: 28px; height: 28px; position: relative; z-index: 1; }
.wa-widget[data-wa-visible] .wa-widget__launcher { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.wa-widget__launcher:hover { box-shadow: 0 18px 38px -8px rgba(37, 211, 102, 0.6), 0 2px 8px rgba(0, 0, 0, 0.22); }
.wa-widget__launcher:focus-visible { outline: 2px solid #F5F0E6; outline-offset: 3px; }
.wa-widget__pulse {
position: absolute; inset: 0; border-radius: inherit;
background: #25D366; opacity: 0.55; animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: 0.45; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } }
body.lite-mode .wa-widget__pulse,
body.motion-off .wa-widget__pulse,
html.lite-mode .wa-widget__pulse,
html.motion-off .wa-widget__pulse { animation: none !important; display: none; }
@media (prefers-reduced-motion: reduce) { .wa-widget__pulse { animation: none !important; display: none; } }
@media (min-width: 768px) { .wa-widget__launcher { bottom: 24px; right: 24px; } }
.wa-widget__popup {
position: fixed; bottom: 84px; right: 16px; left: 16px;
max-width: 360px; margin-left: auto;
background: #14110D; color: #F5F0E6;
border: 1px solid rgba(245, 240, 230, 0.12); border-radius: 18px;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.35);
z-index: 94; padding: 18px; overflow: hidden;
transform: translateY(12px) scale(0.97); opacity: 0; pointer-events: none;
transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease;
}
.wa-widget[data-wa-open] .wa-widget__popup { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
@media (min-width: 768px) { .wa-widget__popup { right: 24px; left: auto; width: 340px; max-width: 340px; bottom: 96px; } }
.wa-widget__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.wa-widget__eyebrow { margin: 0; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 240, 230, 0.55); }
.wa-widget__title { margin: 2px 0 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.wa-widget__close {
background: transparent; border: 0; color: rgba(245, 240, 230, 0.7);
width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 160ms ease, color 160ms ease;
}
.wa-widget__close:hover { background: rgba(245, 240, 230, 0.08); color: #F5F0E6; }
.wa-widget__close svg { width: 14px; height: 14px; }
.wa-widget__close:focus-visible { outline: 2px solid rgba(245, 240, 230, 0.7); outline-offset: 1px; }
.wa-widget__lead { margin: 0 0 12px; color: rgba(245, 240, 230, 0.78); font-size: 0.9rem; line-height: 1.45; }
.wa-widget__cta {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 12px 14px; border-radius: 12px; text-decoration: none;
border: 1px solid rgba(245, 240, 230, 0.12); background: rgba(245, 240, 230, 0.04);
color: #F5F0E6; cursor: pointer; text-align: left;
font: inherit; font-size: 0.92rem;
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.wa-widget__cta + .wa-widget__cta { margin-top: 8px; }
.wa-widget__cta:hover { background: rgba(245, 240, 230, 0.08); border-color: rgba(245, 240, 230, 0.22); }
.wa-widget__cta:focus-visible { outline: 2px solid #F5F0E6; outline-offset: 2px; }
.wa-widget__cta--primary { background: #25D366; color: #0A1F12; border-color: transparent; }
.wa-widget__cta--primary:hover { background: #2BDA6E; }
.wa-widget__cta-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.12); }
.wa-widget__cta--primary .wa-widget__cta-icon { background: rgba(0, 0, 0, 0.18); }
.wa-widget__cta-icon svg { width: 18px; height: 18px; }
.wa-widget__cta-body { display: flex; flex-direction: column; min-width: 0; }
.wa-widget__cta-line1 { font-weight: 600; line-height: 1.25; }
.wa-widget__cta-line2 { font-size: 0.78rem; opacity: 0.7; margin-top: 1px; }
.wa-widget__form { display: flex; flex-direction: column; gap: 10px; }
.wa-widget__field { display: flex; flex-direction: column; gap: 4px; position: relative; }
.wa-widget__label { font-size: 0.78rem; color: rgba(245, 240, 230, 0.7); letter-spacing: 0.02em; }
.wa-widget__label--soft span { color: rgba(245, 240, 230, 0.45); font-weight: 400; }
.wa-widget__field input,
.wa-widget__field textarea {
background: rgba(245, 240, 230, 0.05); color: #F5F0E6;
border: 1px solid rgba(245, 240, 230, 0.14); border-radius: 8px;
padding: 9px 11px; font: inherit; font-size: 0.9rem; resize: vertical;
transition: border-color 160ms ease, background 160ms ease;
}
.wa-widget__field textarea { min-height: 64px; }
.wa-widget__field input:focus,
.wa-widget__field textarea:focus { outline: none; border-color: #25D366; background: rgba(37, 211, 102, 0.06); }
.wa-widget__field input::placeholder,
.wa-widget__field textarea::placeholder { color: rgba(245, 240, 230, 0.35); }
.wa-widget__counter { position: absolute; bottom: 6px; right: 8px; font-size: 0.7rem; color: rgba(245, 240, 230, 0.4); pointer-events: none; }
.wa-widget__counter[data-wa-near] { color: #E8A35C; }
.wa-widget__counter[data-wa-over] { color: #E86C5C; }
.wa-widget__consent { margin: 4px 0 2px; font-size: 0.72rem; line-height: 1.45; color: rgba(245, 240, 230, 0.6); }
.wa-widget__consent em { font-style: normal; color: #F5F0E6; background: rgba(212, 184, 134, 0.18); padding: 1px 5px; border-radius: 4px; }
.wa-widget__consent a { color: rgba(245, 240, 230, 0.8); text-decoration: underline; text-underline-offset: 2px; }
.wa-widget__actions { display: flex; gap: 8px; margin-top: 4px; }
.wa-widget__back, .wa-widget__submit {
flex: 1; padding: 11px 14px; border-radius: 10px; font: inherit; font-weight: 600;
cursor: pointer; border: 1px solid rgba(245, 240, 230, 0.14);
background: rgba(245, 240, 230, 0.04); color: #F5F0E6;
transition: background 160ms ease, transform 120ms ease;
}
.wa-widget__back { flex: 0 0 auto; }
.wa-widget__submit { background: #25D366; color: #0A1F12; border-color: transparent; }
.wa-widget__submit:hover:not(:disabled) { background: #2BDA6E; }
.wa-widget__submit:disabled { opacity: 0.7; cursor: not-allowed; }
.wa-widget__back:hover { background: rgba(245, 240, 230, 0.1); }
.wa-widget__back:focus-visible, .wa-widget__submit:focus-visible { outline: 2px solid #F5F0E6; outline-offset: 2px; }
.wa-widget__error { margin: 6px 0 0; font-size: 0.8rem; color: #E86C5C; }
.wa-widget__error a { color: #F5F0E6; text-decoration: underline; }
.wa-widget__done { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.wa-widget__done h4 { margin: 4px 0 0; font-size: 1rem; font-weight: 600; }
.wa-widget__done p { margin: 0; font-size: 0.85rem; color: rgba(245, 240, 230, 0.7); }
.wa-widget__check { width: 36px; height: 36px; border-radius: 50%; background: rgba(37, 211, 102, 0.18); color: #25D366; display: flex; align-items: center; justify-content: center; }
.wa-widget__check svg { width: 20px; height: 20px; }
.wa-widget__done .wa-widget__cta { width: 100%; }
/* === /WAVE-4-D3 WHATSAPP WIDGET === */
/* === BREAKPOINT CONTRACT (R19) ===
Canonical breakpoints (use these unless component-specific reason otherwise):
- 480px: tight phone
- 640px: phone landscape / small tablet
- 768px: tablet
- 1024px: small desktop
- 1280px: large desktop
Custom breakpoints that intentionally diverge (retained):
- 540px (page-scoped only, none remain in main.css after R18 snaps)
- 560px: privacy.html / terms.html legal-page typography reflow
- 600px: .card-preview hide, .toggle-cluster, .tm-doors — micro-tweaks tied to specific component widths
- 700px: .toggle-cluster (dimensions), .context-pill (left/right/transform tweak), .footer-chrome-c (dimensioned chrome), .hero-meta-strip (margin tweak) — micro-dimension tweaks, not layout collapses
- 720px (page-scoped + .services hero): writing-template tight content column
- 800px: .footer-grid — footer collapse intentionally held at 800 (would clip at 768)
- 880px: .backstage-grid, .lad-grid, .mm-wrap, .honest-grid, work-detail asides — dimensioned for sidebar layouts
- 1080px: .nav-links hide + .brand-wordmark hide — exact width nav stops fitting
- 1100px: nav/hero content reflow
- 1180px: .latency-tile hide — fits between 1024 and 1280
Snaps applied in R18:
- 540 -> 480: .four-col, .embed-depth (general 1-col collapse)
- 760 -> 768: .activity-banner, .theme-toggle (display-none toggles, snap to tablet canonical)
- 980 -> 1024: .trust-twocol (two-col collapse, snap to small-desktop canonical)
Snaps applied in R19:
- 700 -> 640: .chrono-hint, .scroll-progress, .audio-toggle (display:none toggles); .check-list, .pb-form (grid 1-col collapse)
- 800 -> 768: .steps, .trust-strip, .two-col, .stats-row, .embed-depth, .ab-demo (generic grid collapses); .footer-grid HELD at 800 by exception
- 900 -> 1024: .hero-layout, .product-grid, .three-col, .four-col, .diagram (desktop grids collapsing just above tablet — snapped up to small-desktop canonical)
R19 audit: each candidate read for rule body. KEEP decisions kept where the rule sets a dimension (width/height/padding/margin/font-size) tuned to that exact viewport.
*/
/* === R3 A11Y === */
/* Skip-link: hidden until focused, then pinned top-left for keyboard users. */
.skip-link {
position: absolute; left: 8px; top: -40px;
z-index: 10000;
background: var(--accent, #8B7BFF); color: #0B0917;
padding: 10px 16px; border-radius: 6px;
font-weight: 600; font-size: 0.92rem; line-height: 1;
text-decoration: none;
transition: top 160ms ease;
min-height: 24px;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 8px;
outline: 2px solid #F5F0E6; outline-offset: 2px;
}
/* Stronger focus ring fallback for interactive surfaces that override the global rule
(some buttons/links set outline:none in component styles). Guarantees a visible focus. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
outline: 2px solid var(--accent, #8B7BFF);
outline-offset: 3px;
border-radius: 6px;
}
/* 2.5.5 Target Size (Min) — footer separator dots are decorative; ensure the
interactive links sandwiching them meet 24x24 CSS px. */
.footer-bottom-right a {
display: inline-block;
min-height: 24px;
padding: 4px 2px;
line-height: 1.4;
}
.footer-bottom-right > span[style*="ink-2"] {
/* visual separator dots — mark as decorative for AT */
pointer-events: none;
}
/* Reduced-motion respect for skip-link transition. */
@media (prefers-reduced-motion: reduce) {
.skip-link { transition: none; }
}
/* === /R3 A11Y === */
/* === R15 SCROLL PROGRESS === */
/* Pure-CSS 2px scroll-progress bar pinned to top of viewport. Uses the
scroll-driven `animation-timeline: scroll()` API (gated by @supports so
older engines simply skip it — no JS fallback by design). Honors
prefers-reduced-motion (bar appears filled, no animation), body.motion-off
and body.lite-mode (bar hidden). */
@supports (animation-timeline: scroll()) {
.scroll-progress-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--warm-soft, #d88a7a);
transform: scaleX(0);
transform-origin: left center;
z-index: 9999;
pointer-events: none;
will-change: transform;
animation: r15-scroll-progress linear;
animation-timeline: scroll(root);
}
@keyframes r15-scroll-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.scroll-progress-bar {
animation: none;
transform: scaleX(1);
}
}
body.motion-off .scroll-progress-bar,
body.lite-mode .scroll-progress-bar { display: none; }
}
/* === /R15 SCROLL PROGRESS === */
/* === R20 FEEL === */
/* Visible-motion round. All blocks honor prefers-reduced-motion and
body.lite-mode / body.motion-off (motion off, final state shown).
JS counterpart lives in the matching IIFE at the end of main.js. */
/* --- 1. Scroll-progress bar (works in EVERY browser) ---
Base styles always present so the JS-driven path (scaleX from
--scroll-progress on :root) renders everywhere, not just engines
that support animation-timeline: scroll(). The R15 @supports block
above is now a progressive enhancement on top of this. */
.scroll-progress-bar {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 3px;
transform-origin: 0 50%;
transform: scaleX(var(--scroll-progress, 0));
background: linear-gradient(90deg, var(--warm-soft), var(--accent-soft));
box-shadow: 0 0 10px -2px var(--accent-soft), 0 0 4px -1px var(--warm-soft);
z-index: 9999;
pointer-events: none;
will-change: transform;
/* Smooth the JS-written value slightly; reduced-motion drops this. */
transition: transform 90ms linear;
}
@media (prefers-reduced-motion: reduce) {
.scroll-progress-bar { transition: none; }
}
body.motion-off .scroll-progress-bar,
body.lite-mode .scroll-progress-bar { display: none !important; }
/* --- 2. Count-up (no extra styling needed; JS rewrites textContent).
Tabular alignment so digits don't jitter width during the animation. */
.metric-value, [data-countup] {
font-variant-numeric: tabular-nums;
}
/* --- 3. Card hover lift + glow --- */
.card, .trust-item, .step {
transition: transform 240ms var(--ease-signature),
box-shadow 240ms var(--ease-signature),
border-color 240ms var(--ease-signature);
}
@media (hover: hover) and (pointer: fine) {
.card:hover, .trust-item:hover, .step:hover {
transform: translateY(-4px);
border-color: var(--border-strong);
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(178, 164, 255, 0.18),
0 8px 30px -12px var(--accent-glow);
}
}
/* Kill the lift entirely under reduced-motion / lite / motion-off. */
@media (prefers-reduced-motion: reduce) {
.card, .trust-item, .step { transition: none; }
.card:hover, .trust-item:hover, .step:hover { transform: none; }
}
body.motion-off .card:hover, body.motion-off .trust-item:hover, body.motion-off .step:hover,
body.lite-mode .card:hover, body.lite-mode .trust-item:hover, body.lite-mode .step:hover {
transform: none;
box-shadow: none;
}
/* --- 4. Hero parallax (JS writes --hero-px / --hero-py on .hero) --- */
@media (hover: hover) and (pointer: fine) {
.hero[data-r20-parallax] .hero-content {
transform: translate3d(calc(var(--hero-px, 0) * 1px), calc(var(--hero-py, 0) * 1px), 0);
transition: transform 220ms var(--ease-signature);
will-change: transform;
}
.hero[data-r20-parallax] .hero-logo-wrap,
.hero[data-r20-parallax] .hero-logo-stage {
transform: translate3d(calc(var(--hero-px, 0) * -1.6px), calc(var(--hero-py, 0) * -1.6px), 0);
transition: transform 220ms var(--ease-signature);
will-change: transform;
}
}
@media (prefers-reduced-motion: reduce) {
.hero[data-r20-parallax] .hero-content,
.hero[data-r20-parallax] .hero-logo-wrap,
.hero[data-r20-parallax] .hero-logo-stage { transform: none; }
}
/* --- 5. Scroll-reveal — DRAMATIC + FAST (one-shot) ---
The drama now lives here, not in a continuous scroll effect. Bigger travel
(40px) for punch, snappy 460ms expo-out easing — cubic-bezier(.16,1,.3,1)
shoots the element up fast then eases into place (energetic + premium, no
bounce). Fires ONCE as a section enters (IntersectionObserver), then done —
so it reads as "more dramatic" while costing far LESS than the old
continuous per-frame effect. Compositor-only (transform + opacity).
Scoped to body.r20-reveal so above-the-fold hero is never hidden pre-JS. */
body.r20-reveal .reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 460ms cubic-bezier(.16, 1, .3, 1),
transform 460ms cubic-bezier(.16, 1, .3, 1);
}
body.r20-reveal .reveal.is-in {
opacity: 1;
transform: translateY(0);
}
body.r20-reveal .reveal.stagger > * {
opacity: 0;
transform: translateY(40px);
transition: opacity 460ms cubic-bezier(.16, 1, .3, 1),
transform 460ms cubic-bezier(.16, 1, .3, 1);
}
body.r20-reveal .reveal.stagger.is-in > * {
opacity: 1;
transform: translateY(0);
}
/* Snappier cascade: 55ms steps, up to 8 children. */
body.r20-reveal .reveal.stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
body.r20-reveal .reveal.stagger.is-in > *:nth-child(2) { transition-delay: 55ms; }
body.r20-reveal .reveal.stagger.is-in > *:nth-child(3) { transition-delay: 110ms; }
body.r20-reveal .reveal.stagger.is-in > *:nth-child(4) { transition-delay: 165ms; }
body.r20-reveal .reveal.stagger.is-in > *:nth-child(5) { transition-delay: 220ms; }
body.r20-reveal .reveal.stagger.is-in > *:nth-child(6) { transition-delay: 275ms; }
body.r20-reveal .reveal.stagger.is-in > *:nth-child(7) { transition-delay: 330ms; }
body.r20-reveal .reveal.stagger.is-in > *:nth-child(8) { transition-delay: 385ms; }
@media (prefers-reduced-motion: reduce) {
body.r20-reveal .reveal,
body.r20-reveal .reveal.stagger > * {
opacity: 1; transform: none; filter: none; transition: none;
}
}
/* === /R20 FEEL === */
/* === R21 FEEL === */
/* Premium signature-motion round. Three deliverables:
1. SVG stroke-draw on .c-reveal (JS arms it; CSS draws path + flow lines).
2. Slow conic-gradient border accent on .card.royal-icon (pure CSS, @property).
3. Magnetic pull transform on primary CTAs (JS writes --mag-x/--mag-y).
All honor prefers-reduced-motion + body.lite-mode + body.motion-off:
motion off, final states shown. JS counterpart is the R21 FEEL IIFE in main.js. */
/* --- 1. C-reveal stroke-draw --------------------------------------------
JS adds .c-reveal-armed (pre-draw), then .c-reveal-draw (run), or
.c-reveal-shown (instant final, motion-off). The SVG is fill-only, so we
overlay an animated stroke on the path + lines using stroke-dasharray /
stroke-dashoffset driven by the per-element --draw-len JS measured. */
.c-reveal .c-reveal-path,
.c-reveal .c-reveal-line {
stroke: #C9BCFF;
stroke-dasharray: var(--draw-len, 1200);
stroke-dashoffset: var(--draw-len, 1200);
}
.c-reveal .c-reveal-path {
stroke-width: 3;
fill-opacity: 0; /* fill fades in during the draw */
}
/* Armed = pre-draw resting state (lines invisible, fill hidden). */
.c-reveal-armed .c-reveal-line { opacity: 0; }
/* Run state. Path traces first; fill fades up; flow lines cascade L→R. */
.c-reveal-draw .c-reveal-path {
animation: r21-c-stroke 1200ms var(--ease-signature, cubic-bezier(0.22,1,0.36,1)) forwards,
r21-c-fill 900ms ease 360ms forwards;
}
.c-reveal-draw .c-reveal-line {
opacity: 1;
animation: r21-c-stroke 620ms var(--ease-signature, cubic-bezier(0.22,1,0.36,1)) forwards;
animation-delay: var(--draw-delay, 0ms);
stroke-dashoffset: var(--draw-len, 160); /* held until its delay elapses */
}
@keyframes r21-c-stroke {
to { stroke-dashoffset: 0; }
}
@keyframes r21-c-fill {
from { fill-opacity: 0; }
to { fill-opacity: 1; }
}
/* Instant-final path (motion-off / no-IO): no stroke overlay, fill as authored. */
.c-reveal-shown .c-reveal-path { stroke: none; stroke-dasharray: none; fill-opacity: 1; }
.c-reveal-shown .c-reveal-line { opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
.c-reveal .c-reveal-path,
.c-reveal .c-reveal-line {
animation: none !important;
stroke-dasharray: none; stroke-dashoffset: 0;
fill-opacity: 1; opacity: 1;
}
.c-reveal .c-reveal-path { stroke: none; }
}
body.motion-off .c-reveal .c-reveal-path,
body.lite-mode .c-reveal .c-reveal-path,
body.motion-off .c-reveal .c-reveal-line,
body.lite-mode .c-reveal .c-reveal-line {
animation: none !important;
stroke-dasharray: none; stroke-dashoffset: 0;
fill-opacity: 1; opacity: 1;
}
body.motion-off .c-reveal .c-reveal-path,
body.lite-mode .c-reveal .c-reveal-path { stroke: none; }
/* --- 2. Rotating conic-gradient border on .card.royal-icon ---------------
A slow-spinning conic gradient sits in a ::before behind the card content,
masked to a thin ring so only the edge shimmers. @property animates the
angle; @supports-not fallback shows a static gradient ring. */
@property --r21-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
.card.royal-icon { position: relative; isolation: isolate; }
.card.royal-icon::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1.5px; /* ring thickness */
background: conic-gradient(from var(--r21-angle),
rgba(178,164,255,0) 0deg,
rgba(178,164,255,0.15) 70deg,
rgba(232,222,255,0.95) 130deg,
rgba(140,123,255,0.55) 190deg,
rgba(178,164,255,0) 300deg,
rgba(178,164,255,0) 360deg);
/* Mask to a ring: fill minus content box = border only. */
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
z-index: 1;
animation: r21-border-spin 7s linear infinite;
}
/* Keep card's own content above the ring. */
.card.royal-icon > * { position: relative; z-index: 2; }
@keyframes r21-border-spin {
to { --r21-angle: 360deg; }
}
/* Fallback: no @property support → static (non-rotating) gradient ring so the
accent still reads, just without the sweep. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
.card.royal-icon::before {
background: linear-gradient(135deg,
rgba(232,222,255,0.85), rgba(140,123,255,0.35), rgba(178,164,255,0));
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
.card.royal-icon::before { animation: none; }
}
body.motion-off .card.royal-icon::before,
body.lite-mode .card.royal-icon::before { display: none; }
/* --- 3. Magnetic pull on primary CTAs -----------------------------------
JS writes --mag-x / --mag-y (≤6px) on flagged buttons. We compose the pull
with the existing hover lift in a single transform so they don't fight. */
.btn-primary[data-r21-magnetic] {
transform: translate(var(--mag-x, 0), var(--mag-y, 0));
transition: transform 240ms var(--ease-signature, cubic-bezier(0.22,1,0.36,1)),
background 200ms ease, box-shadow 200ms ease;
will-change: transform;
}
.btn-primary[data-r21-magnetic]:hover {
/* Keep the -2px lift AND the magnetic offset. */
transform: translate(var(--mag-x, 0), calc(var(--mag-y, 0) - 2px));
}
@media (prefers-reduced-motion: reduce) {
.btn-primary[data-r21-magnetic] { transform: none; transition: none; }
.btn-primary[data-r21-magnetic]:hover { transform: translateY(-2px); }
}
body.motion-off .btn-primary[data-r21-magnetic],
body.lite-mode .btn-primary[data-r21-magnetic] {
transform: none;
}
body.motion-off .btn-primary[data-r21-magnetic]:hover,
body.lite-mode .btn-primary[data-r21-magnetic]:hover {
transform: translateY(-2px);
}
/* === /R21 FEEL === */
/* === R22 FEEL === */
/* Item 1 — hero live-counter odometer intro.
A faint upward "settle" on the digit block while JS count-up runs, plus a
tabular-num lock so the comma + digits don't reflow during the roll. */
.live-counter .n[data-r22-odo] {
font-variant-numeric: tabular-nums;
display: inline-block;
will-change: transform, opacity;
}
.live-counter .n[data-r22-odo].r22-odo-run {
animation: r22OdoSettle 1.5s var(--ease-signature, cubic-bezier(0.16,1,0.3,1)) both;
}
@keyframes r22OdoSettle {
0% { transform: translateY(0.32em); opacity: 0.45; filter: blur(0.4px); }
55% { opacity: 1; filter: blur(0); }
100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
/* Item 2 — hero clock hand-sweep on first paint.
While .r22-clock-sweeping is on the SVG, JS hand-rendering is suppressed
(via window.__clockShouldRender) so these keyframes own the hands. We zero
the existing 800ms hand transitions for the duration so the sweep is crisp,
then the class drops and JS resumes (its own transition eases to real time). */
.hero-logo-svg.r22-clock-sweeping .hand-h,
.hero-logo-svg.r22-clock-sweeping .hand-m,
.hero-logo-svg.r22-clock-sweeping .hand-s {
transition: none !important;
}
.hero-logo-svg.r22-clock-sweeping .hand-h {
animation: r22SweepH 1.2s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-logo-svg.r22-clock-sweeping .hand-m {
animation: r22SweepM 1.2s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-logo-svg.r22-clock-sweeping .hand-s {
animation: r22SweepS 1.2s cubic-bezier(0.16,1,0.3,1) both;
}
/* Each hand spins from -120deg through a full revolution into place; the
second hand carries the most travel for the "coming alive" flourish. */
@keyframes r22SweepH {
0% { transform: rotate(-110deg); }
100% { transform: rotate(300deg); }
}
@keyframes r22SweepM {
0% { transform: rotate(-150deg); }
100% { transform: rotate(330deg); }
}
@keyframes r22SweepS {
0% { transform: rotate(-180deg); }
100% { transform: rotate(540deg); }
}
/* Center-jewel breathing glow — soft, continuous, signature life on the logo.
Runs always (not just on load); very low amplitude so it reads as "alive"
not "blinking". Targets the middle gradient circle of the 3-layer jewel. */
.hero-logo-svg .r22-jewel-glow {
transform-box: fill-box;
transform-origin: center;
animation: r22JewelBreathe 4s ease-in-out infinite;
will-change: opacity, transform;
}
@keyframes r22JewelBreathe {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.18); }
}
/* Reduced-motion / lite / motion-off → all R22 motion off, final states shown. */
@media (prefers-reduced-motion: reduce) {
.live-counter .n[data-r22-odo].r22-odo-run { animation: none; transform: none; opacity: 1; filter: none; }
.hero-logo-svg.r22-clock-sweeping .hand-h,
.hero-logo-svg.r22-clock-sweeping .hand-m,
.hero-logo-svg.r22-clock-sweeping .hand-s { animation: none; }
.hero-logo-svg .r22-jewel-glow { animation: none; opacity: 1; transform: none; }
}
body.lite-mode .live-counter .n[data-r22-odo].r22-odo-run,
body.motion-off .live-counter .n[data-r22-odo].r22-odo-run {
animation: none; transform: none; opacity: 1; filter: none;
}
body.lite-mode .hero-logo-svg.r22-clock-sweeping .hand-h,
body.lite-mode .hero-logo-svg.r22-clock-sweeping .hand-m,
body.lite-mode .hero-logo-svg.r22-clock-sweeping .hand-s,
body.motion-off .hero-logo-svg.r22-clock-sweeping .hand-h,
body.motion-off .hero-logo-svg.r22-clock-sweeping .hand-m,
body.motion-off .hero-logo-svg.r22-clock-sweeping .hand-s {
animation: none;
}
body.lite-mode .hero-logo-svg .r22-jewel-glow,
body.motion-off .hero-logo-svg .r22-jewel-glow {
animation: none; opacity: 1; transform: none;
}
/* === /R22 FEEL === */
/* === R24 FEEL === */
/* Three ambient-life deliverables. JS counterpart is the matching R24 FEEL
IIFE in main.js. All motion gated on prefers-reduced-motion + body.lite-mode
+ body.motion-off (sensible static states shown). Nothing above is touched;
we only add new selectors/keyframes. */
/* ---- Item 1: counter-bump flare ties jewel + live-pulse to the count ----
When the live counter increments, JS adds .r24-flare for ~400ms. The jewel
glow flares brighter (overlaying R22's always-on breathe — this is a louder,
shorter accent on top), and the live-pulse dot gives a synced ring pulse. */
.hero-logo-svg .r22-jewel-glow.r24-flare {
animation: r22JewelBreathe 4s ease-in-out infinite,
r24JewelFlare 420ms var(--ease-signature, cubic-bezier(.22,.61,.36,1)) both;
}
@keyframes r24JewelFlare {
0% { filter: drop-shadow(0 0 0 var(--royal-glow)); }
35% { filter: drop-shadow(0 0 9px var(--royal-soft)); }
100% { filter: drop-shadow(0 0 0 var(--royal-glow)); }
}
.live-pulse-dot.r24-flare {
animation: livePulse 1.8s ease-out infinite, r24DotFlare 420ms ease-out both;
}
@keyframes r24DotFlare {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.85); }
40% { transform: scale(1.5); box-shadow: 0 0 0 7px rgba(76, 217, 100, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 217, 100, 0); }
}
/* ---- Item 2: scroll-velocity-reactive divider sheen ----
JS drives --scroll-vel (0..1) on :root from a single rAF velocity loop. The
sheen is a faint moving gradient over the divider; opacity + sweep position
scale with velocity, settling to invisible when scroll stops. Subtle. */
.divider { position: relative; overflow: hidden; }
/* R27 FIX: compositor-only sheen. The ::after is a fixed gradient strip (45%
wide, painted once) that sweeps across via transform: translateX — no
per-frame background-position repaint. translate range -100%→100% of the
strip covers the full divider as --scroll-vel rises 0→1; opacity tracks
velocity and settles to 0 (invisible) at idle. Same faint moving highlight,
now entirely on the compositor. */
.divider::after {
content: "";
position: absolute; top: -1px; bottom: -1px;
left: 0; width: 45%;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
var(--royal-soft) 50%,
transparent 100%);
/* Sweep travels left→right as velocity rises; opacity tracks velocity. */
transform: translateX(calc((var(--scroll-vel, 0) * 322%) - 100%));
opacity: calc(var(--scroll-vel, 0) * 0.5);
transition: opacity 320ms ease-out;
will-change: transform, opacity;
}
/* ---- Item 3: link underline draw-on ----
Body-content text links get a left-origin scaleX underline on hover instead
of the browser default. Scoped to content regions and explicitly excluded
from .btn and nav links (which carry their own treatments). */
.lead a:not(.btn),
.essay-body a:not(.btn),
.essay-hero .lead a:not(.btn),
.prose a:not(.btn),
.footer-col a:not(.btn) {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 1.5px;
transition: background-size 240ms var(--ease-signature, cubic-bezier(.22,.61,.36,1));
}
.lead a:not(.btn):hover,
.lead a:not(.btn):focus-visible,
.essay-body a:not(.btn):hover,
.essay-body a:not(.btn):focus-visible,
.essay-hero .lead a:not(.btn):hover,
.essay-hero .lead a:not(.btn):focus-visible,
.prose a:not(.btn):hover,
.prose a:not(.btn):focus-visible,
.footer-col a:not(.btn):hover,
.footer-col a:not(.btn):focus-visible {
background-size: 100% 1.5px;
}
/* ---- Reduced-motion / lite / motion-off kill paths ---- */
@media (prefers-reduced-motion: reduce) {
.hero-logo-svg .r22-jewel-glow.r24-flare { animation: none; filter: none; }
.live-pulse-dot.r24-flare { animation: none; transform: none; box-shadow: none; }
.divider::after { display: none; }
.lead a:not(.btn), .essay-body a:not(.btn), .essay-hero .lead a:not(.btn),
.prose a:not(.btn), .footer-col a:not(.btn) {
transition: none; background-size: 0 0; text-decoration: underline;
}
}
body.lite-mode .hero-logo-svg .r22-jewel-glow.r24-flare,
body.motion-off .hero-logo-svg .r22-jewel-glow.r24-flare {
animation: none; filter: none;
}
body.lite-mode .live-pulse-dot.r24-flare,
body.motion-off .live-pulse-dot.r24-flare {
animation: none; transform: none; box-shadow: none;
}
body.lite-mode .divider::after,
body.motion-off .divider::after { display: none; }
body.lite-mode .lead a:not(.btn), body.motion-off .lead a:not(.btn),
body.lite-mode .essay-body a:not(.btn), body.motion-off .essay-body a:not(.btn),
body.lite-mode .essay-hero .lead a:not(.btn), body.motion-off .essay-hero .lead a:not(.btn),
body.lite-mode .prose a:not(.btn), body.motion-off .prose a:not(.btn),
body.lite-mode .footer-col a:not(.btn), body.motion-off .footer-col a:not(.btn) {
transition: none; background-size: 0 0; text-decoration: underline;
}
/* === /R24 FEEL === */
/* === R28 FEEL === */
/* Hero load choreography — a single ~1.6s "director's cut" arrival on first
paint. ANTI-FLASH CONTRACT: nothing here hides the hero by default. Every
hidden-then-revealed rule is SCOPED under `.hero.r28-seq`, a class JS adds
ONLY when motion is confirmed on (not reduced / lite / motion-off). So with
JS disabled, JS failed, or motion off, the hero renders fully visible with
zero animation. The headline (.reveal-line spans, 320/520/760ms heroLineUp)
already owns its own load animation — we DO NOT re-animate it here; the
delays below are tuned to slot AROUND its known timing so the whole hero
reads as one coordinated sequence rather than a pile-up.
Compositor-only: opacity + transform: translateY. No layout props animated. */
@keyframes r28HeroIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes r28HeroIgnite {
from { opacity: 0; }
to { opacity: 1; }
}
/* When sequenced, the animated members start hidden and ride r28HeroIn.
`forwards` pins them at the final visible state once done. */
.hero.r28-seq .hero-grid,
.hero.r28-seq .hero-mesh-canvas,
.hero.r28-seq .live-pulse,
.hero.r28-seq .hero-eyebrow,
.hero.r28-seq .lead,
.hero.r28-seq .hero-cta-row > .btn,
.hero.r28-seq .hero-meta-strip {
opacity: 0;
animation-duration: 600ms;
animation-timing-function: var(--ease-signature, cubic-bezier(.22,.61,.36,1));
animation-fill-mode: both;
will-change: opacity, transform;
}
/* 0ms — background establishes (grid + mesh fade/ignite, opacity-only). */
.hero.r28-seq .hero-grid,
.hero.r28-seq .hero-mesh-canvas {
transform: none;
animation-name: r28HeroIgnite;
animation-duration: 900ms;
animation-delay: 0ms;
}
/* ~150ms — small top elements (live-pulse + eyebrow) rise in together. */
.hero.r28-seq .live-pulse { animation-name: r28HeroIn; animation-delay: 150ms; }
.hero.r28-seq .hero-eyebrow { animation-name: r28HeroIn; animation-delay: 220ms; }
/* ~300-760ms — headline reveal-lines run on their OWN heroLineUp (untouched). */
/* ~700ms — lead paragraph fades up, after the last headline line lands. */
.hero.r28-seq .lead { animation-name: r28HeroIn; animation-delay: 700ms; }
/* ~850ms — CTA row buttons rise with a slight per-button stagger. */
.hero.r28-seq .hero-cta-row > .btn { animation-name: r28HeroIn; animation-delay: 850ms; }
.hero.r28-seq .hero-cta-row > .btn:nth-child(2) { animation-delay: 920ms; }
.hero.r28-seq .hero-cta-row > .btn:nth-child(3) { animation-delay: 990ms; }
.hero.r28-seq .hero-cta-row > .btn:nth-child(4) { animation-delay: 1060ms; }
/* ~1000ms — meta strip ("Live since") settles in last. */
.hero.r28-seq .hero-meta-strip { animation-name: r28HeroIn; animation-delay: 1040ms; }
/* In parallel from ~200ms the R22 hand-sweep already runs on load — left alone. */
/* Kill-switch: if motion gets turned off mid-sequence, OR a reduced-motion /
lite user somehow carries the class, force the final visible state instantly.
(Belt-and-suspenders — JS won't add .r28-seq in those modes to begin with.) */
body.motion-off .hero.r28-seq .hero-grid,
body.motion-off .hero.r28-seq .hero-mesh-canvas,
body.motion-off .hero.r28-seq .live-pulse,
body.motion-off .hero.r28-seq .hero-eyebrow,
body.motion-off .hero.r28-seq .lead,
body.motion-off .hero.r28-seq .hero-cta-row > .btn,
body.motion-off .hero.r28-seq .hero-meta-strip,
body.lite-mode .hero.r28-seq .hero-grid,
body.lite-mode .hero.r28-seq .hero-mesh-canvas,
body.lite-mode .hero.r28-seq .live-pulse,
body.lite-mode .hero.r28-seq .hero-eyebrow,
body.lite-mode .hero.r28-seq .lead,
body.lite-mode .hero.r28-seq .hero-cta-row > .btn,
body.lite-mode .hero.r28-seq .hero-meta-strip {
opacity: 1; transform: none; animation: none; will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
.hero.r28-seq .hero-grid,
.hero.r28-seq .hero-mesh-canvas,
.hero.r28-seq .live-pulse,
.hero.r28-seq .hero-eyebrow,
.hero.r28-seq .lead,
.hero.r28-seq .hero-cta-row > .btn,
.hero.r28-seq .hero-meta-strip {
opacity: 1; transform: none; animation: none; will-change: auto;
}
}
/* === /R28 FEEL === */
/* === ANTHROPIC FEEL === */
/* The converging hairline frame — Anthropic's signature "the border draws in
around the content block and its sharp corners soften into a rounded shape".
TECHNIQUE (compositor-friendly, ONE-SHOT, never scroll-linked):
- Each curated block gets `.anthropic-frame` (added by JS). It owns one
absolutely-positioned ::after pseudo-element that is a 1px hairline rounded
rect sitting just OUTSIDE the box (inset: -1px), pointer-events:none, on its
own z-index above the card surface but below content.
- PRE state (armed): the frame is drawn only as four short CORNER BRACKETS via
a `clip-path` polygon that exposes just the corners, border-radius is SHARP
(~3px), and opacity is low. This reads as a crisp technical bracket.
- IN state (`.af-in`, added once on enter): clip-path opens to the full
rectangle (the line "converges"/closes around the block), border-radius
transitions SHARP → SOFT (3px → 18px) — the "minimising from sharp into a
soft shape" — and opacity settles to the hairline value. One transition,
then static. Nothing here animates on scroll.
- Only clip-path + border-radius + opacity transition (all compositor-cheap;
no box-shadow/filter animation). ~720ms on the site's signature curve.
ANTI-FLASH / REVERSIBLE CONTRACT: the frame ::after only exists on
`.anthropic-frame`, which JS adds. With JS off/failed, or motion off, nothing
renders — the cards look exactly as before. The kill-switches below also pin
the final soft frame (no animation) under reduced-motion / lite / motion-off
so those users still get the premium framed look, just instantly. */
.anthropic-frame {
position: relative;
}
/* The hairline frame itself. Lives just outside the box so it never clips
content or the existing card border. Starts as corner brackets (clip-path)
with sharp corners; the .af-in state opens + softens it. */
.anthropic-frame::after {
content: '';
position: absolute;
inset: -1px;
z-index: 4; /* above card surface/gradient, below nothing vital */
pointer-events: none;
border: 1.5px solid var(--af-line);
border-radius: 3px; /* SHARP — softens to 18px in .af-in */
opacity: 0;
/* PRE state: expose only the four corner brackets (~22px arms). The polygon
traces an outer ring then cuts back along an inner ring everywhere except
near the corners, leaving four L-shaped brackets visible. */
clip-path: polygon(
0 0, 22px 0, 22px 2px, 2px 2px, 2px 22px, 0 22px,
0 calc(100% - 22px), 2px calc(100% - 22px), 2px calc(100% - 2px), 22px calc(100% - 2px), 22px 100%, 0 100%,
100% 100%, calc(100% - 22px) 100%, calc(100% - 22px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 22px), 100% calc(100% - 22px),
100% 0, calc(100% - 22px) 0, calc(100% - 22px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 22px, 100% 22px
);
transition:
clip-path 760ms var(--ease-signature),
border-radius 760ms var(--ease-signature),
box-shadow 760ms var(--ease-signature),
opacity 460ms var(--ease-signature);
will-change: clip-path, border-radius, opacity;
}
/* IN state — the line converges to a full rounded rect and corners soften. */
.anthropic-frame.af-in::after {
opacity: 1;
border-radius: 18px; /* SOFT — the "sharp minimising into a shape" */
/* Full rectangle: the bracket gaps close, so the hairline reads as a single
continuous frame "drawn in" around the block. */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
/* Soft clay glow settles in once — makes the frame clearly visible + premium
(was an invisible 34% hairline). One-shot transition, then static. */
box-shadow: 0 0 0 1px rgba(226, 133, 99, 0.10),
0 10px 40px -12px var(--af-glow);
}
/* Stagger when several frames enter together (JS sets --af-i 0..n on the row). */
.anthropic-frame { --af-i: 0; }
.anthropic-frame.af-in::after { transition-delay: calc(var(--af-i) * 90ms); }
.anthropic-frame.af-in::after { will-change: auto; } /* release after settle */
/* Kill-switches: reduced-motion / lite / motion-off → show the final soft frame
instantly, zero animation. (JS adds `.af-in` immediately in these modes too;
this is the belt-and-suspenders no-transition pin.) */
@media (prefers-reduced-motion: reduce) {
.anthropic-frame::after {
transition: none;
opacity: 1;
border-radius: 18px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
will-change: auto;
}
}
body.lite-mode .anthropic-frame::after,
body.motion-off .anthropic-frame::after,
html.lite-mode .anthropic-frame::after,
html.motion-off .anthropic-frame::after {
transition: none;
opacity: 1;
border-radius: 18px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
will-change: auto;
}
/* Lite mode strips most depth but should still show the premium frame clearly
(static, no animation). */
body.lite-mode .anthropic-frame::after,
html.lite-mode .anthropic-frame::after { opacity: 0.85; }
/* ---------------------------------------------------------------------------
SECTION FRAME + PAPER PAGE.
Two parts working together:
A) PER-SECTION WRAP (the motion). Thin pre-existing top & bottom lines bend
around the section's soft corners and wrap it, then DISSOLVE. This is now
a ONE-SHOT, self-timed animation triggered when the section enters view
(`.af-in`, added by JS) — NOT scrubbed to scroll. Decoupling from scroll
is what removes the "sticky" feel: clip-path is paint-bound, so scrubbing
it per scroll-frame stutters; played on its own clock it's smooth.
B) PAPER PAGE (the lasting result). One continuous sheet (`.paper-sheet`,
injected by JS into , sized to span everything BELOW the hero) holds
the gold-tinted wash + the two side RAILS running straight down the whole
page (wider than the text) + a soft page shadow. So the wrap dissolves and
"merges" into a single page that runs down the site.
Applies on all widths. Per-card frames suppressed (no double).
------------------------------------------------------------------------- */
.af-section { position: relative; }
/* A) the wrapping lines */
.af-section::before,
.af-section::after {
content: '';
position: absolute;
inset: -12px 6px; /* sides tuck in so the line stays on-screen */
z-index: 1; /* above the paper sheet, below text */
pointer-events: none;
border: var(--afs-w) solid var(--afs-line);
border-radius: var(--afs-radius);
filter: drop-shadow(0 1px 3px var(--afs-shadow));
/* one-shot, self-timed — smooth regardless of scroll speed */
transition: clip-path 820ms var(--ease-signature),
opacity 460ms var(--ease-signature) 700ms;
}
@media (min-width: 860px) {
.af-section::before, .af-section::after { inset: -14px; }
}
/* PRE: only the edge line shows (top line on ::before, bottom on ::after). */
.af-section::before { clip-path: inset(0 0 calc(100% - var(--afs-w)) 0); }
.af-section::after { clip-path: inset(calc(100% - var(--afs-w)) 0 0 0); }
/* IN (entered view): the halves open to the middle (wrap), then dissolve. */
.af-section.af-in::before { clip-path: inset(0 0 50% 0); opacity: 0; }
.af-section.af-in::after { clip-path: inset(50% 0 0 0); opacity: 0; }
/* No double frames: the section wrap + paper are the frame → suppress per-card. */
.anthropic-frame::after { display: none; }
/* B) the continuous paper sheet (JS positions top/height to clear the hero). */
.paper-sheet {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: min(calc(100% - 36px), 1180px); /* wider than the text column */
z-index: 0; /* behind all content */
pointer-events: none;
background: var(--afs-warm);
border-left: 1px solid var(--afs-rail);
border-right: 1px solid var(--afs-rail); /* the rails straight down the page */
border-radius: 26px 26px 0 0; /* soft top where the page begins */
box-shadow: 0 0 70px -26px var(--afs-shadow),
0 40px 90px -60px var(--afs-shadow);
opacity: 0;
transition: opacity 900ms var(--ease-signature);
}
.paper-sheet.paper-in { opacity: 1; }
/* Kill-switches: reduced-motion / lite / motion-off → no line motion; show the
paper statically (it's the page, not animation). */
@media (prefers-reduced-motion: reduce) {
.af-section::before, .af-section::after { transition: none; opacity: 0; }
.paper-sheet { transition: none; opacity: 1; }
}
html.lite-mode .af-section::before, html.lite-mode .af-section::after,
html.motion-off .af-section::before, html.motion-off .af-section::after,
body.lite-mode .af-section::before, body.lite-mode .af-section::after,
body.motion-off .af-section::before, body.motion-off .af-section::after {
transition: none; opacity: 0;
}
html.lite-mode .paper-sheet, html.motion-off .paper-sheet,
body.lite-mode .paper-sheet, body.motion-off .paper-sheet {
transition: none; opacity: 1;
}
/* === /ANTHROPIC FEEL === */