/* ============================================================ MISSION DRIVEN AI — Foundations Colors + Type, base + semantic CSS vars. All four brand fonts are self-hosted from /fonts/. No Google Fonts CDN dependency. Variable font where available, static cuts for DM Mono. THEMING — light is the default. Flip to dark with ONE attribute: (or set it on any wrapper element) Brand colors (ink / paper / gold / coral) never change; only the surface scale below remaps. See assets/theme-toggle.html for the one-button toggle snippet. ============================================================ */ /* -------- Cormorant Garamond · display + headlines -------- */ @font-face { font-family: 'Cormorant Garamond'; src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 300 700; font-style: italic; font-display: swap; } /* -------- DM Sans · body -------- */ @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-VariableFont.ttf') format('truetype-variations'), url('fonts/DMSans-VariableFont.ttf') format('truetype'); font-weight: 100 1000; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-Italic-VariableFont.ttf') format('truetype-variations'), url('fonts/DMSans-Italic-VariableFont.ttf') format('truetype'); font-weight: 100 1000; font-style: italic; font-display: swap; } /* -------- DM Mono · labels, eyebrows, stat captions, AND wordmark (no variable cut available) -------- */ @font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } /* -------- Wordmark uses DM Mono (above); no separate font needed. -------- */ :root { /* ---------- Color · Brand (theme-independent) ---------- */ --ink: #0a0a0f; /* canvas in dark mode, text in light mode */ --ink-rgb: 10,10,15; --paper: #f5f3ee; /* canvas in light mode, text in dark mode — never pure white */ --paper-rgb: 245,243,238; --gold: #c9a84c; /* primary accent — rules, fills, dark-mode text */ --gold-rgb: 201,168,76; --gold-light: #e8d5a3; /* soft accent — callouts on dark */ --gold-deep: #9c7c2e; /* darkened gold — legible accent TEXT on light grounds */ --gold-dim: rgba(201,168,76,0.15); --gold-line: rgba(201,168,76,0.35); --slate: #1c1c28; /* dark-mode secondary panel */ --slate-rgb: 28,28,40; --muted: #6b6b7e; /* ---------- Color · Coral (the "pop" — ration it) ---------- One signal color for genuinely big highlights only: a single hero stat, one alert, one lit cell in a chart. It out-shouts gold by design, so it is used sparingly. Never body text, never large fills. */ --coral: #E4586A; --coral-rgb: 228,88,106; --coral-strong: #EA5362; /* punchier read, if you want more snap */ --coral-dim: rgba(228,88,106,0.12); --coral-line: rgba(228,88,106,0.45); /* ---------- Color · Surface scale — LIGHT (default) ---------- */ --bg: var(--paper); /* #f5f3ee */ --bg-elev-1: #fbfaf6; /* raised card — warm, never pure white */ --bg-elev-2: #f1eee6; /* nested / inset surface */ --fg-1: var(--ink); /* primary text */ --fg-2: #55555f; /* secondary text (darker muted for AA on light) */ --fg-accent: var(--gold-deep); /* accent TEXT — darkened gold for contrast */ --fg-accent-soft:#b3933e; --rule-gold: rgba(201,168,76,0.55); --border-soft: rgba(10,10,15,0.10); --border-gold: rgba(201,168,76,0.55); --border-strong: rgba(10,10,15,0.22); --texture-line: rgba(10,10,15,0.04); --shadow-soft: 0 1px 2px rgba(10,10,15,0.04), 0 16px 36px -20px rgba(10,10,15,0.18); --shadow-gold-glow: 0 0 0 1px rgba(201,168,76,0.30), 0 0 36px -12px rgba(201,168,76,0.28); /* ---------- Color · Semantic (muted ERRC palette from deck) ---------- */ --success: #5f8064; --success-dim: rgba(95,128,100,0.15); --warning: #9c7c2e; --warning-dim: rgba(201,168,76,0.15); --danger: #a55a4f; --danger-dim: rgba(165,90,79,0.15); --info: #4d6680; --info-dim: rgba(77,102,128,0.15); --signal: var(--coral); /* the loud one */ --signal-dim: var(--coral-dim); /* ---------- Type · Families ---------- */ --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'DM Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; --font-wordmark: 'DM Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; /* wordmark: DM Mono Medium uppercase, ~0.22em tracking */ /* ---------- Type · Display ramp (Cormorant) ---------- */ --display-1-size: clamp(56px, 7.2vw, 104px); --display-1-line: 0.98; --display-1-track: -0.02em; --display-1-weight: 500; --display-2-size: clamp(40px, 4.6vw, 64px); --display-2-line: 1.02; --display-2-track: -0.015em; --display-2-weight: 500; --display-3-size: clamp(28px, 3vw, 40px); --display-3-line: 1.1; --display-3-track: -0.01em; --display-3-weight: 500; --display-4-size: clamp(22px, 2.2vw, 28px); --display-4-line: 1.2; --display-4-track: -0.005em; --display-4-weight: 500; /* ---------- Type · Body ramp (DM Sans) ---------- */ --body-1-size: 18px; --body-1-line: 1.6; --body-1-weight: 400; --body-2-size: 16px; --body-2-line: 1.6; --body-2-weight: 400; --body-3-size: 14px; --body-3-line: 1.55; --body-3-weight: 400; /* ---------- Type · Mono / labels ramp (DM Mono) ---------- */ --mono-1-size: 12px; --mono-1-track: 0.18em; --mono-1-weight: 400; --mono-2-size: 10px; --mono-2-track: 0.22em; --mono-2-weight: 500; /* ---------- Type · Stat numbers ---------- */ --stat-size: clamp(40px, 4.2vw, 56px); --stat-line: 1; --stat-track: -0.02em; --stat-weight: 500; /* ---------- Spacing ---------- */ --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; --section-y: clamp(80px, 10vw, 160px); /* ---------- Radii — restrained ---------- */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px; /* ---------- Borders ---------- */ --hair: 1px solid var(--border-soft); --hair-gold: 1px solid var(--border-gold); /* ---------- Motion ---------- */ --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 520ms; /* ---------- Texture / hero (theme-aware via --texture-line) ---------- */ --grid-bg: linear-gradient(var(--texture-line) 1px, transparent 1px) 0 0/60px 60px, linear-gradient(90deg, var(--texture-line) 1px, transparent 1px) 0 0/60px 60px; --hero-overlay: linear-gradient(135deg, rgba(10,10,15,0.55) 0%, rgba(10,10,15,0.95) 100%); --hero-glow: radial-gradient(60% 50% at 70% 30%, rgba(201,168,76,0.18), transparent 70%); } /* ============================================================ DARK MODE — one attribute flips the surface scale. Apply to for the whole page, or to any wrapper (e.g. the hero band / footer) to pin a dark island inside a light page. ============================================================ */ [data-theme="dark"] { --bg: var(--ink); --bg-elev-1: var(--slate); --bg-elev-2: #24243a; --fg-1: var(--paper); --fg-2: var(--muted); --fg-accent: var(--gold); --fg-accent-soft:var(--gold-light); --rule-gold: rgba(201,168,76,0.35); --border-soft: rgba(245,243,238,0.08); --border-gold: rgba(201,168,76,0.35); --border-strong: rgba(245,243,238,0.18); --texture-line: rgba(245,243,238,0.025); --shadow-soft: 0 1px 0 rgba(245,243,238,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6); --shadow-gold-glow: 0 0 0 1px rgba(201,168,76,0.18), 0 0 40px -10px rgba(201,168,76,0.25); --success: #7a9e7e; --info: #5f7b96; } /* ============================================================ SEMANTIC ELEMENT STYLES — bare tags pick these up automatically. ============================================================ */ html, body { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: var(--body-1-size); line-height: var(--body-1-line); font-weight: var(--body-1-weight); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur-base) var(--ease-editorial), color var(--dur-base) var(--ease-editorial); } h1, .h1 { font-family: var(--font-display); font-size: var(--display-1-size); line-height: var(--display-1-line); letter-spacing: var(--display-1-track); font-weight: var(--display-1-weight); color: var(--fg-1); margin: 0 0 var(--space-5); text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-size: var(--display-2-size); line-height: var(--display-2-line); letter-spacing: var(--display-2-track); font-weight: var(--display-2-weight); color: var(--fg-1); margin: 0 0 var(--space-5); text-wrap: balance; } h3, .h3 { font-family: var(--font-display); font-size: var(--display-3-size); line-height: var(--display-3-line); letter-spacing: var(--display-3-track); font-weight: var(--display-3-weight); color: var(--fg-1); margin: 0 0 var(--space-4); } h4, .h4 { font-family: var(--font-display); font-size: var(--display-4-size); line-height: var(--display-4-line); font-weight: var(--display-4-weight); color: var(--fg-1); margin: 0 0 var(--space-3); } /* Italic emphasis — the gold moment. One key word per headline. */ .em, h1 em, h2 em, h3 em, h4 em { font-style: italic; color: var(--fg-accent); font-weight: inherit; } p, .body { font-family: var(--font-body); font-size: var(--body-1-size); line-height: var(--body-1-line); color: var(--fg-1); margin: 0 0 var(--space-4); text-wrap: pretty; } p.small, .body-small { font-size: var(--body-2-size); color: var(--fg-2); } p.micro, .body-micro { font-size: var(--body-3-size); color: var(--fg-2); } a { color: var(--fg-accent); text-decoration: none; border-bottom: 1px solid var(--border-gold); transition: color var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) var(--ease-editorial); } a:hover { color: var(--fg-accent-soft); border-color: var(--fg-accent-soft); } code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg-accent); } /* ---------- Section label · DM Mono caps + 60px trailing line ---------- */ .section-label { display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--mono-1-size); font-weight: var(--mono-1-weight); letter-spacing: var(--mono-1-track); text-transform: uppercase; color: var(--fg-accent); } .section-label::after { content: ""; display: inline-block; width: 60px; height: 1px; background: var(--fg-accent); opacity: 0.7; } /* ---------- Stat number ---------- */ .stat-number { font-family: var(--font-display); font-size: var(--stat-size); font-weight: var(--stat-weight); line-height: var(--stat-line); letter-spacing: var(--stat-track); color: var(--fg-accent); } .stat-label { font-family: var(--font-mono); font-size: var(--mono-1-size); letter-spacing: var(--mono-1-track); text-transform: uppercase; color: var(--fg-2); } /* ---------- Coral accent helpers — ration these ---------- */ .accent-coral { color: var(--coral); } .dot-coral { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 999px; background: var(--coral); vertical-align: middle; } /* ---------- Divider · thin gold hairline ---------- */ hr, .divider { border: 0; height: 1px; background: var(--rule-gold); margin: var(--space-7) 0; } /* ---------- Selection ---------- */ ::selection { background: var(--gold); color: var(--ink); }