/* ============================================================================ CONTRARIAN CORPUS — DESIGN TOKENS (v2 — light-first, emil-engineered) Single source of truth for color, type, space, motion, elevation. Light is the default; dark mode flips the same named vars so components never need conditionals. Theme is toggled via [data-theme="dark"] on . ============================================================================ */ :root { /* ─── SURFACES (light theme) ───────────────────────────────────────────── Warm off-white palette so the ~white slide imagery feels native. Numerical scale (1→12) lets us flip with zero semantic remapping. */ --gray-1: #FBF9F4; /* page bg */ --gray-2: #F5F2EB; /* section alt */ --gray-3: #EFEBE2; /* card bg */ --gray-4: #E5E0D4; /* card hover */ --gray-5: #D4CEC0; /* divider line */ --gray-6: #B5AE9D; /* muted text */ --gray-7: #8C8577; /* tertiary text */ --gray-8: #635D52; /* secondary text */ --gray-9: #3E3930; /* body text */ --gray-10: #2A2620; /* strong text */ --gray-11: #1A1713; /* h1 / numbers */ --gray-12: #0D0B08; /* extreme contrast */ /* Semantic aliases — never reference raw grays in components. */ --bg-0: var(--gray-1); --bg-1: var(--gray-2); --bg-2: var(--gray-3); --bg-3: var(--gray-4); --bg-4: var(--gray-5); --text-0: var(--gray-11); /* h1 / numbers / strong */ --text-1: var(--gray-10); /* body default */ --text-2: var(--gray-8); /* secondary / labels */ --text-3: var(--gray-7); /* tertiary / metadata */ --text-4: var(--gray-6); /* faint / placeholder */ --text-5: var(--gray-5); /* disabled */ /* Borders via shadow-spread (blends over colored backgrounds) */ --border-0: rgba(20, 16, 10, 0.05); --border-1: rgba(20, 16, 10, 0.09); --border-2: rgba(20, 16, 10, 0.16); --border-3: rgba(20, 16, 10, 0.24); /* ─── ACCENT — brand constant across themes ─────────────────────────── */ --accent: #C15F38; --accent-hover: #A94E2B; --accent-pressed: #8D3F22; --accent-faint: rgba(193, 95, 56, 0.08); --accent-line: rgba(193, 95, 56, 0.28); /* Semantic accents (same hue across themes; tone tunes per mode) */ --success: #1F7A4D; --warning: #A87200; --danger: #B84038; --info: #2E6DA8; /* Chart palette — editorial, readable on both themes */ --c-1: #C15F38; --c-2: #D19935; --c-3: #1F7A4D; --c-4: #2E6DA8; --c-5: #7A5AA3; --c-6: #B54E78; --c-7: #B84038; --c-8: #CD7A2E; --c-9: #3D8F5E; --c-10: #2D7F93; --c-11: #5A6CB8; --c-12: #A04E85; /* ─── SPACING (4-based, do not use raw px) ─────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ─── TYPOGRAPHY — 3 families, hard stop ─────────────────────────── */ --font-serif: 'Instrument Serif', 'Source Serif 4', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Scale — softened at top end; h1 often doesn't need 84px */ --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 26px; --t-2xl: 32px; --t-3xl: 42px; --t-4xl: 56px; --t-5xl: 72px; --lh-tight: 1.08; --lh-snug: 1.22; --lh-base: 1.5; --lh-relaxed: 1.65; --w-light: 300; --w-normal: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --ls-tight: -0.022em; --ls-snug: -0.010em; --ls-base: 0; --ls-wide: 0.04em; --ls-wider: 0.08em; --ls-widest: 0.12em; /* ─── RADII ───────────────────────────────────────────────────────── */ --r-1: 3px; --r-2: 4px; --r-3: 6px; --r-4: 8px; --r-5: 12px; --r-6: 16px; --r-7: 24px; --r-full: 999px; /* ─── ELEVATION (light-adjusted) ──────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(20, 16, 10, 0.06); --shadow-2: 0 4px 12px rgba(20, 16, 10, 0.08), 0 1px 2px rgba(20, 16, 10, 0.04); --shadow-3: 0 12px 32px rgba(20, 16, 10, 0.12), 0 2px 6px rgba(20, 16, 10, 0.05); --shadow-4: 0 24px 60px rgba(20, 16, 10, 0.16), 0 4px 12px rgba(20, 16, 10, 0.07); --shadow-glow: 0 0 0 3px rgba(193, 95, 56, 0.14); --hairline: 1px; @media (min-resolution: 2dppx) { --hairline: 0.5px; } /* ─── MOTION — emil easing tokens ─────────────────────────────────── */ /* Defaults optimized for UI. Use ease-out for enter/exit; ease-in-out for on-screen movement. */ --ease: cubic-bezier(0.32, 0.72, 0, 1); /* default (ease-out-ish) */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint (primary) */ --ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ease-out-quad */ --ease-out-snap: cubic-bezier(0.19, 1, 0.22, 1); /* ease-out-expo */ --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); /* ease-in-out-cubic */ --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* gentle pop */ --dur-instant: 80ms; /* color swaps, active state */ --dur-fast: 150ms; /* hover, micro-interactions */ --dur-base: 220ms; /* dropdowns, tooltips, cards */ --dur-slow: 320ms; /* modals, drawers */ --dur-page: 400ms; /* page transitions max */ /* ─── LAYOUT ──────────────────────────────────────────────────────── */ --max-text: 680px; --max-content: 1180px; --max-wide: 1340px; --grid-2: repeat(2, minmax(0, 1fr)); --grid-3: repeat(3, minmax(0, 1fr)); --grid-4: repeat(4, minmax(0, 1fr)); --grid-auto-md: repeat(auto-fill, minmax(280px, 1fr)); --grid-auto-lg: repeat(auto-fill, minmax(360px, 1fr)); /* ─── Z-INDEX SCALE ───────────────────────────────────────────────── */ --z-base: 1; --z-sticky: 10; --z-dropdown: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* ─── LEGACY ALIASES (so old components keep working) ─────────────── */ --w-bold: 700; --motion-fast: var(--dur-fast); --motion-base: var(--dur-base); } /* ============================================================================ DARK THEME — same named tokens, different values. No component changes. ============================================================================ */ [data-theme="dark"] { --gray-1: #0B0907; --gray-2: #12100C; --gray-3: #1A1713; --gray-4: #24201A; --gray-5: #2E2924; --gray-6: #4A4338; --gray-7: #7C7466; --gray-8: #A49C8C; --gray-9: #C9C2B4; --gray-10: #E4DED0; --gray-11: #F3EEE1; --gray-12: #FBF9F4; --border-0: rgba(255, 247, 232, 0.04); --border-1: rgba(255, 247, 232, 0.08); --border-2: rgba(255, 247, 232, 0.15); --border-3: rgba(255, 247, 232, 0.22); --accent: #D97757; --accent-hover: #E58B6B; --accent-pressed: #BE6444; --accent-faint: rgba(217, 119, 87, 0.10); --accent-line: rgba(217, 119, 87, 0.32); --success: #6EE7B7; --warning: #FBBF24; --danger: #F87171; --info: #93C5FD; --c-1: #D97757; --c-2: #E5B864; --c-3: #6EE7B7; --c-4: #93C5FD; --c-5: #C4B5FD; --c-6: #F0ABFC; --c-7: #FCA5A5; --c-8: #FDBA74; --c-9: #86EFAC; --c-10: #67E8F9; --c-11: #A5B4FC; --c-12: #F9A8D4; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-4: 0 24px 60px rgba(0, 0, 0, 0.7); --shadow-glow: 0 0 0 3px rgba(217, 119, 87, 0.22); } /* Respect user OS preference on first load (Alpine will then honor localStorage) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ============================================================================ RESET + GLOBAL BASELINES ============================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { background: var(--bg-0); color: var(--text-1); font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-base); font-feature-settings: "cv05", "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Numbers are tabular by default so counters & price-like values don't shift */ .mono, code, pre, .tabular, .t-mono { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } /* Headings — balance line breaks where supported */ h1, h2, h3, h4, h5 { text-wrap: balance; } /* Anchor targets clear a fixed header */ [id] { scroll-margin-top: 72px; } ::selection { background: var(--accent); color: var(--gray-1); } /* Disable transitions during theme switch to prevent flashes */ .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: none !important; animation: none !important; } /* ============================================================================ TYPE UTILITIES — one level per rung, no mixing ============================================================================ */ .t-display { font-family: var(--font-serif); font-size: var(--t-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--w-normal); color: var(--text-0); } .t-hero { font-family: var(--font-serif); font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--w-normal); color: var(--text-0); } .t-h1 { font-family: var(--font-serif); font-size: var(--t-3xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); font-weight: var(--w-normal); color: var(--text-0); } .t-h2 { font-family: var(--font-serif); font-size: var(--t-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); font-weight: var(--w-normal); color: var(--text-0); } .t-h3 { font-family: var(--font-serif); font-size: var(--t-xl); line-height: var(--lh-snug); font-weight: var(--w-normal); color: var(--text-0); } .t-h4 { font-family: var(--font-sans); font-size: var(--t-lg); line-height: var(--lh-snug); font-weight: var(--w-semi); color: var(--text-0); } .t-body { font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-base); font-weight: var(--w-normal); color: var(--text-1); } .t-body-lg, .t-lead { font-family: var(--font-sans); font-size: var(--t-md); line-height: var(--lh-relaxed); font-weight: var(--w-normal); color: var(--text-2); } .t-meta { font-family: var(--font-sans); font-size: var(--t-sm); line-height: var(--lh-snug); color: var(--text-3); } .t-label { font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-3); font-weight: var(--w-medium); } .t-eyebrow { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--accent); font-weight: var(--w-medium); } .t-mono { font-family: var(--font-mono); } .dim { color: var(--text-3); } .faint { color: var(--text-4); } /* ============================================================================ SURFACES ============================================================================ */ .surface { background: var(--bg-1); box-shadow: 0 0 0 var(--hairline) var(--border-1); border-radius: var(--r-5); } .surface-elevated { background: var(--bg-1); box-shadow: var(--shadow-2), 0 0 0 var(--hairline) var(--border-1); border-radius: var(--r-5); } /* ============================================================================ CARDS ============================================================================ */ .card { background: var(--bg-1); box-shadow: 0 0 0 var(--hairline) var(--border-1); border-radius: var(--r-5); padding: var(--s-6); transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } @media (hover: hover) { .card:hover { box-shadow: 0 0 0 var(--hairline) var(--border-2), var(--shadow-2); } } .card.is-interactive { cursor: pointer; } .card.is-interactive:active { transform: scale(0.99); transition-duration: var(--dur-instant); } /* ============================================================================ BUTTONS — tap targets, hover-off-touch, active state ============================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 36px; padding: var(--s-2) var(--s-4); border: 0; border-radius: var(--r-3); box-shadow: inset 0 0 0 var(--hairline) var(--border-1); background: transparent; font-family: var(--font-sans); font-size: var(--t-sm); font-weight: var(--w-medium); letter-spacing: var(--ls-snug); color: var(--text-1); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-instant) ease; } @media (hover: hover) { .btn:hover { background: var(--bg-2); } } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent); color: #FFFFFF; font-weight: var(--w-semi); box-shadow: 0 1px 2px rgba(20, 16, 10, 0.10); } @media (hover: hover) { .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } } .btn-ghost { color: var(--text-2); box-shadow: inset 0 0 0 var(--hairline) var(--border-1); } @media (hover: hover) { .btn-ghost:hover { color: var(--text-1); box-shadow: inset 0 0 0 var(--hairline) var(--border-2); } } .btn-sm { min-height: 28px; padding: var(--s-1) var(--s-3); font-size: var(--t-xs); } .btn-lg { min-height: 44px; padding: var(--s-3) var(--s-6); font-size: var(--t-base); } /* ============================================================================ TAGS / PILLS ============================================================================ */ .tag { display: inline-flex; align-items: center; padding: 2px var(--s-2); font-family: var(--font-sans); font-size: var(--t-xs); line-height: 1.3; letter-spacing: var(--ls-snug); border-radius: var(--r-1); background: var(--accent-faint); color: var(--accent); box-shadow: inset 0 0 0 var(--hairline) var(--accent-line); white-space: nowrap; } .tag-info { background: color-mix(in oklch, var(--info) 10%, transparent); color: var(--info); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--info) 30%, transparent); } .tag-success { background: color-mix(in oklch, var(--success) 10%, transparent); color: var(--success); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--success) 30%, transparent); } .tag-warning { background: color-mix(in oklch, var(--warning) 10%, transparent); color: var(--warning); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--warning) 30%, transparent); } .tag-danger { background: color-mix(in oklch, var(--danger) 10%, transparent); color: var(--danger); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--danger) 30%, transparent); } .tag-neutral { background: var(--bg-2); color: var(--text-2); box-shadow: inset 0 0 0 var(--hairline) var(--border-1); } .pill { border-radius: var(--r-full); padding: var(--s-1) var(--s-3); } /* ============================================================================ LAYOUT HELPERS ============================================================================ */ .container { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--s-6); } .content { max-width: var(--max-content); margin: 0 auto; padding: 0 var(--s-6); } .text-col { max-width: var(--max-text); } .stack-1 > * + * { margin-top: var(--s-1); } .stack-2 > * + * { margin-top: var(--s-2); } .stack-3 > * + * { margin-top: var(--s-3); } .stack-4 > * + * { margin-top: var(--s-4); } .stack-6 > * + * { margin-top: var(--s-6); } .stack-8 > * + * { margin-top: var(--s-8); } .row { display: flex; gap: var(--s-3); align-items: center; } .row-end { display: flex; gap: var(--s-3); align-items: center; justify-content: flex-end; } .row-between { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; } .grid { display: grid; gap: var(--s-4); } .grid-2 { display: grid; gap: var(--s-4); grid-template-columns: var(--grid-2); } .grid-3 { display: grid; gap: var(--s-4); grid-template-columns: var(--grid-3); } .grid-4 { display: grid; gap: var(--s-4); grid-template-columns: var(--grid-4); } .grid-auto{ display: grid; gap: var(--s-4); grid-template-columns: var(--grid-auto-md); } @media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .section { padding-block: var(--s-16); } .section-sm { padding-block: var(--s-10); } .section-lg { padding-block: var(--s-24); } .divider { border-top: var(--hairline) solid var(--border-1); } /* ============================================================================ SCROLLBARS — only for small elements per emil guideline (Don't restyle the page scrollbar — browsers know best.) ============================================================================ */ .scroll-small::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-small::-webkit-scrollbar-track { background: transparent; } .scroll-small::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); } .scroll-small::-webkit-scrollbar-thumb:hover { background: var(--border-3); } /* ============================================================================ ANIMATION PRIMITIVES — reusable keyframes & .anim-* helpers ============================================================================ */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in-scale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .anim-fade { animation: fade-in var(--dur-base) var(--ease-out) both; } .anim-fade-up { animation: fade-in-up var(--dur-base) var(--ease-out) both; } .anim-pop { animation: fade-in-scale var(--dur-base) var(--ease-out) both; } /* Stagger helper — apply with inline style --delay: Nms */ [style*="--delay"] { animation-delay: var(--delay); } /* ============================================================================ ACCESSIBILITY: respect reduced-motion unconditionally ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Cloak Alpine.js elements until init */ [x-cloak] { display: none !important; } /* Accessibility — visually hidden, still read by screen readers. Use for s on complex tables or extra context on icon-only buttons. Never use `display: none` for this (screen readers skip it). */ .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; }