/* ========================================================= The SEO Consultant.ai — Foundations Colors + Type tokens. Import this file in every surface. ========================================================= */ /* Google Fonts are loaded via + preconnect in each page's — avoids the @import → font-CSS → font-file waterfall chain that was costing ~1s of LCP. Fonts: Fraunces (display), Inter (body), JetBrains Mono (code). */ :root { /* ------------------------------------------------------- COLOR — Ink on paper + a single confident accent. Richard's world is data, photography and long-form analysis, so the palette is quiet: warm off-white paper, near-black ink, and a single electric "signal" blue used sparingly for SEO/data highlights. Green/red are reserved for similarity scoring (matching the in-app convention from the cosine-similarity tools). ------------------------------------------------------- */ /* Paper + ink */ --paper: #F5F1EA; /* warm off-white, photographic matte */ --paper-2: #EEE8DC; /* card tint */ --paper-3: #E6DECD; /* subtle divider wash */ --ink: #15181C; /* near-black, slightly cool */ --ink-2: #2A2E34; --ink-3: #55595F; /* secondary text */ --ink-4: #8A8E93; /* tertiary / meta */ --rule: #D9D1BD; /* hairline */ /* Dark surface (used for stat blocks, code, spotlighted data) */ --graphite: #1B1E23; --graphite-2: #24272D; --graphite-3: #3A3E44; /* Signal — the one accent */ --signal: #2B6CFF; /* electric query blue */ --signal-ink: #1A4BC4; /* pressed / darker */ --signal-wash: #E5EDFF; /* tinted background */ /* Semantic — match the in-app similarity scoring colors (green ≥0.75, red <0.60, inherit between) */ --score-high: #2E7D4F; /* strong semantic match */ --score-high-wash: #E3F1E8; --score-mid: #B5842A; /* borderline */ --score-mid-wash: #F6EBD2; --score-low: #B33A3A; /* weak / content gap */ --score-low-wash: #F5DDDD; /* Photographic accents — from Richard's photography background. Used sparingly in editorial layouts. */ --tungsten: #C28547; /* warm print tone */ --dusk: #3E4A6B; /* cool shadow */ /* ------------------------------------------------------- TYPE — Base tokens ------------------------------------------------------- */ --font-display: 'Fraunces', 'Times New Roman', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Scale — editorial, not cramped */ --fs-hero: clamp(48px, 6.2vw, 88px); --fs-display: clamp(36px, 4.2vw, 56px); --fs-h1: clamp(30px, 3.2vw, 42px); --fs-h2: clamp(24px, 2.4vw, 32px); --fs-h3: 20px; --fs-lead: 19px; --fs-body: 16px; --fs-small: 14px; --fs-meta: 12px; --lh-display: 1.02; --lh-heading: 1.15; --lh-body: 1.55; --lh-dense: 1.3; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-eyebrow: 0.14em; /* ------------------------------------------------------- SPACING — 4px base, generous at the top end ------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Radii — mostly square, tiny rounding on inputs/buttons */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px; /* Borders — hairlines, not chunks */ --bw-hair: 1px; --bw-rule: 2px; /* Shadows — soft, photographic, rarely used */ --shadow-1: 0 1px 0 rgba(21,24,28,0.04), 0 1px 2px rgba(21,24,28,0.05); --shadow-2: 0 2px 4px rgba(21,24,28,0.06), 0 8px 24px rgba(21,24,28,0.07); --shadow-3: 0 8px 40px rgba(21,24,28,0.12); /* Motion */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); --ease-std: cubic-bezier(0.4, 0.0, 0.2, 1); --dur-fast: 120ms; --dur-std: 220ms; --dur-slow: 420ms; } /* ========================================================= SEMANTIC DEFAULTS — drop-in for plain HTML ========================================================= */ html, body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-5); text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); text-wrap: balance; } h3, .h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-heading); margin: 0 0 var(--space-3); } .display { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); text-wrap: balance; } .hero { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: var(--tracking-display); text-wrap: balance; } .eyebrow { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3); } .lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-2); text-wrap: pretty; } p { margin: 0 0 var(--space-4); text-wrap: pretty; } small, .meta { font-size: var(--fs-meta); color: var(--ink-4); letter-spacing: 0.02em; } code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; } code { background: var(--paper-2); border: 1px solid var(--rule); padding: 1px 6px; border-radius: var(--r-1); } a { color: var(--signal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-std); } a:hover { color: var(--signal-ink); } hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-7) 0; } ::selection { background: var(--signal-wash); color: var(--ink); }