/* ========================================================================== base.css — Design tokens, reset, typography, core utilities Every other stylesheet depends on this file. Load it first. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS Light theme = warm cream. Dark theme = warm charcoal (not pure black — pure black + cream accents looks harsh; warm dark keeps brand cohesion). -------------------------------------------------------------------------- */ :root { /* Color — light (default) */ --bg: #FAF6F0; --bg-elevated: #FFFFFF; --bg-sunken: #F1EAE0; --text: #1C1917; --text-2: #57534E; --text-3: #8A8580; --line: rgba(28, 25, 23, 0.10); --line-strong: rgba(28, 25, 23, 0.22); --accent: #D85A30; --accent-strong: #B4451F; --accent-soft: #FAECE7; --accent-ink: #4A1B0C; /* text on accent-soft */ --ok: #1D9E75; --ok-soft: #E1F5EE; --ok-ink: #085041; /* Extra tag/pill hues — used where more than accent+ok are needed (e.g. the About masthead's hobby tags) */ --info-soft: #E7EEF6; --info-ink: #1F4066; --violet-soft: #F2EAF6; --violet-ink: #5B2E73; --gold-soft: #FBF1DC; --gold-ink: #7A4E0B; /* Scene color fed to Three.js via getComputedStyle (hero3d.js reads it) */ --scene-line: #D85A30; --scene-fog: #FAF6F0; /* Elevation — soft, diffuse, never glow */ --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05); --shadow-md: 0 6px 24px -8px rgba(28, 25, 23, 0.12); --shadow-lg: 0 24px 60px -20px rgba(28, 25, 23, 0.22); /* Typography */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Fluid type scale (min @ 360px viewport → max @ 1280px) */ --fs-hero: clamp(2.6rem, 1.2rem + 6.2vw, 5.4rem); --fs-h1: clamp(2rem, 1.2rem + 3vw, 3.2rem); --fs-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.35rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 7rem; /* Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 700ms; /* Layout */ --container: 1180px; --header-h: 72px; /* Z-index scale — one source of truth, no z-index wars */ --z-header: 100; --z-sidebar: 200; --z-modal: 300; --z-cursor: 400; --z-welcome: 500; color-scheme: light; } /* Dark theme — toggled by theme.js on */ .dark-theme { --bg: #14110E; --bg-elevated: #1D1915; --bg-sunken: #0E0C0A; --text: #F2ECE3; --text-2: #B8B0A5; --text-3: #7D766D; --line: rgba(242, 236, 227, 0.10); --line-strong: rgba(242, 236, 227, 0.24); --accent: #E8703F; --accent-strong: #F08A5D; --accent-soft: rgba(232, 112, 63, 0.14); --accent-ink: #F5C4B3; --ok: #2BB98A; --ok-soft: rgba(43, 185, 138, 0.14); --ok-ink: #9FE1CB; --info-soft: rgba(94, 158, 214, 0.16); --info-ink: #BFDBF7; --violet-soft: rgba(179, 120, 214, 0.16); --violet-ink: #E3C6F2; --gold-soft: rgba(230, 178, 64, 0.18); --gold-ink: #F2CE8A; --scene-line: #E8703F; --scene-fog: #14110E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.65); color-scheme: dark; } /* -------------------------------------------------------------------------- 2. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--text); background: var(--bg); min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* -------------------------------------------------------------------------- 3. TYPOGRAPHY -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { max-width: 62ch; text-wrap: pretty; } ::selection { background: var(--accent); color: #FFF8F4; } /* -------------------------------------------------------------------------- 4. ACCESSIBILITY BASELINE -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; top: -100%; left: var(--sp-4); z-index: calc(var(--z-welcome) + 1); padding: var(--sp-2) var(--sp-4); background: var(--text); color: var(--bg); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; } .skip-link:focus { top: var(--sp-4); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* -------------------------------------------------------------------------- 5. LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .container { width: min(var(--container), 100% - clamp(2rem, 6vw, 4rem)); margin-inline: auto; } .section { padding-block: clamp(var(--sp-5), 5vw, var(--sp-7)); } .section + .section { border-top: 1px solid var(--line); } /* -------------------------------------------------------------------------- 6. SHARED TEXT UTILITIES -------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); } .accent { color: var(--accent); } .text-2 { color: var(--text-2); } .mono { font-family: var(--font-mono); font-size: 0.9em; } /* -------------------------------------------------------------------------- 7. SCROLLBAR (subtle, brand-consistent) -------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* -------------------------------------------------------------------------- 8. REDUCED MOTION — global safety net animations.css adds finer-grained overrides on top of this. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }