/* ============================================================ Revspot Design Language v4 — Tokens Two registers: warm paper (marketing) + dark workbench (product). The contrast itself carries the brand. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ---------- Light surface (paper / marketing) ---------- */ --paper: #FAF8F3; /* page bg, warm off-white */ --paper-2: #F4F1E9; /* secondary surfaces, pills, partner strip */ --paper-3: #ECE7DB; /* tertiary chips, number badges */ --hairline: #E5DFCF; /* default borders */ --hairline-2: #D4CCB7; /* stronger borders, hovers */ --ink: #111111; /* primary text + ink CTA fill */ --ink-2: #2B2A27; /* body copy */ --ink-3: #6B6760; /* meta, captions, mono labels */ /* ---------- Dark surface (Agent Workbench) ---------- */ --d-bg: #111315; /* workbench background */ --d-bg-2: #17191C; /* card fill */ --d-bg-3: #1E2125; /* active tab, badge fill */ --d-line: #2A2D31; /* default dark borders */ --d-line-2: #3A3E44; /* stronger dark borders */ --d-ink: #F1EFEA; /* dark surface primary text */ --d-ink-2: #B7B5AF; /* dark surface body */ --d-ink-3: #7A7872; /* dark surface meta */ /* ---------- Accents — earn their use ---------- */ --agent: #4DA3FF; /* agent at work (light) */ --agent-deep: #2F6FCC; /* Door 2 accent */ --agent-soft: #C9DFFA; /* soft halo */ --d-agent: #6FB6FF; /* agent on dark */ --d-agent-2: #9CCBFF; /* agent halo on dark */ --amber: #D6A24A; /* qualified-output base */ --amber-deep: #A87520; /* Door 1 accent, brand mark */ --amber-soft: #F2E2BD; /* eyebrow halo */ --d-amber: #E6BC74; /* qualified buyer output on dark */ --amber-line-d: #5C4622; /* qualified buyer card border on dark */ --green: #4FA37A; /* "live" status indicator ONLY */ /* ---------- Type — three families ---------- */ --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Inter', sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---------- Scale ---------- */ --fs-h1: clamp(44px, 5.4vw, 78px); --fs-h2: clamp(34px, 4vw, 54px); --fs-h3: 30px; /* door title */ --fs-h4: 22px; /* zone title */ --fs-lead: 18px; /* hero sub */ --fs-body: 14.5px; /* door body */ --fs-ui: 13.5px; /* UI */ --fs-mono: 10.5px; /* eyebrows, labels */ --fs-mono-lg: 11px; --lh-display: 0.98; --lh-tight: 1.12; --lh-body: 1.5; --lh-ui: 1.35; --track-display: -0.022em; --track-h2: -0.02em; --track-h3: -0.018em; --track-ui: -0.005em; --track-mono: 0.14em; /* 0.1–0.18em range */ --track-mono-lg: 0.18em; /* ---------- Geometry ---------- */ --w-marketing: 1320px; --w-hero: 1480px; --pad-desk: 40px; --pad-mob: 20px; --rhythm: 120px; --r-chip: 6px; --r-card: 10px; --r-input: 9px; --r-strip: 14px; --r-door: 16px; --r-workbench: 18px; --r-pill: 999px; /* hairlines, not shadows */ --bw: 1px; /* shadows reserved for workbench */ --shadow-workbench: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -20px rgba(0,0,0,0.55), 0 12px 24px -12px rgba(0,0,0,0.45); /* motion */ --ease: cubic-bezier(.4,.0,.2,1); --t-pulse: 1.6s; --t-travel: 2.4s; --t-enter: 420ms; } /* ============================================================ Base elements — semantic tokens applied ============================================================ */ html, body { background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); text-wrap: balance; margin: 0; } h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--track-display); } h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--track-h2); } h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: var(--track-h3); } h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.012em; } h1 em, h2 em, h3 em, h4 em { font-style: italic; } p { margin: 0; } .ui-label, .eyebrow, .mono, code, kbd { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-3); } /* eyebrow pill — sets register before H1 */ .eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: var(--r-pill); border: var(--bw) solid var(--hairline); background: var(--paper-2); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-2); } .eyebrow-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--amber-deep); box-shadow: 0 0 0 4px var(--amber-soft); } /* dark surface application */ .dark, .dark body, [data-surface="dark"] { background: var(--d-bg); color: var(--d-ink-2); } [data-surface="dark"] h1, [data-surface="dark"] h2, [data-surface="dark"] h3, [data-surface="dark"] h4 { color: var(--d-ink); } [data-surface="dark"] .ui-label, [data-surface="dark"] .eyebrow, [data-surface="dark"] .mono { color: var(--d-ink-3); } /* ============================================================ Motion tokens (3 only) — respect reduced motion ============================================================ */ @keyframes rev-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(79,163,122,0.55); } 50% { box-shadow: 0 0 0 6px rgba(79,163,122,0.0); } } @keyframes rev-pulse-amber { 0%,100% { box-shadow: 0 0 0 0 rgba(230,188,116,0.55); } 50% { box-shadow: 0 0 0 6px rgba(230,188,116,0.0); } } @keyframes rev-travel { 0% { transform: translateX(-30%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } } @keyframes rev-enter { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }