/* ============================================================ site.css — Unified editorial design system for jacobrakai.org ------------------------------------------------------------ ONE design language, applied to EVERY page via both layouts (base.njk + editorial.njk). This file is loaded LAST so it layers on top of the existing per-page CSS as overrides — the doodle SVG art and page markup are never touched, only the surrounding typography, palette and dark-mode wiring. Design tokens: display : Playfair Display (serif, headings) body : Source Serif 4 (readable serif, long-form prose) mono : JetBrains Mono (eyebrows / labels / code) Palette (light): warm cream #faf6f0 / ink #211d18 / coral #e0503a Dark mode : single mechanism — data-theme="dark" on , with a prefers-color-scheme fallback. ============================================================ */ /* ---- Editorial fonts (self-hosted, CSP-safe) ---- */ @font-face{font-family:'Playfair Display';src:url('/fonts/playfair-display-regular.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap} @font-face{font-family:'Playfair Display';src:url('/fonts/playfair-display-italic.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap} @font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-regular.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap} @font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap} @font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-regular.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap} /* ---- Font-token override: re-skins ALL styles-v2 / doodles / feed / demos chrome to the editorial pairing at once ---- */ :root{ --font-display:'Playfair Display',Georgia,'Times New Roman',serif; --font-body:'Source Serif 4',Georgia,'Times New Roman',serif; --font-handwritten:'Playfair Display',Georgia,serif; --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* align the essay reading surface to the editorial signature */ --essay-accent:#b23a25; --essay-paper:#faf6f0; --essay-border:#ece3d6; /* --accent (#e0503a) is ~3.6:1 on the cream #faf6f0 — fine for LARGE headings/borders/decoration (needs 3:1) but FAILS AA for small text. --accent-ink is a deeper brick coral that reaches 5.53:1 on #faf6f0, used for links / labels / nav / small UI. Dark-mode coral already passes (~6:1) so --accent-ink == --accent there. */ --accent-ink:#b23a25; } /* ============================================================ DARK MODE — one mechanism for the whole site. styles-v2 semantic tokens use --black/--white as ink/paper, so swapping them (ink->light, paper->dark) flips cards, nav, tables and buttons cleanly. The editorial-page tokens (--ink/--paper/…) are flipped alongside so home/building/indexes go dark too. ============================================================ */ [data-theme="dark"]{ /* styles-v2 (content chrome) tokens */ --bg:#17130f; --text:#f4ede1; --text-muted:#b7ab99; --accent:#f2694f; --accent-ink:#f2694f; --black:#f4ede1; --white:#211b15; --line:#3a3128; --accent-soft:#3a241d; --shadow-color:rgba(0,0,0,.55); /* editorial-page tokens (home / building / essays-idx / doodles-idx) */ --paper:#211b15; --ink:#f4ede1; --dim:#b7ab99; --faint:#8a7d6c; /* essay reading surface */ --essay-ink:#e7e0d3; --essay-paper:#1f1b16; --essay-accent:#f2694f; --essay-muted:#b7ab99; --essay-border:#3a3128; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#17130f; --text:#f4ede1; --text-muted:#b7ab99; --accent:#f2694f; --accent-ink:#f2694f; --black:#f4ede1; --white:#211b15; --line:#3a3128; --accent-soft:#3a241d; --shadow-color:rgba(0,0,0,.55); --paper:#211b15; --ink:#f4ede1; --dim:#b7ab99; --faint:#8a7d6c; --essay-ink:#e7e0d3; --essay-paper:#1f1b16; --essay-accent:#f2694f; --essay-muted:#b7ab99; --essay-border:#3a3128; } } /* Nav bar hardcodes a cream translucent background on every page (styles-v2 + the four editorial pages) — override it for dark. */ [data-theme="dark"] .topnav{background:rgba(23,19,15,.85);border-bottom-color:var(--line)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .topnav{background:rgba(23,19,15,.85);border-bottom-color:var(--line)} } /* ============================================================ THEME TOGGLE button (rendered in every nav; wired by main.js on content pages and by an inline script on editorial pages). Fully styled here so it also works on the editorial pages, which do not load styles-v2.css. ============================================================ */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;flex:none;margin-left:1.1rem; border:1px solid var(--line,#ece3d6);border-radius:50%; background:transparent;color:var(--text,var(--ink,#211d18)); font-size:1rem;line-height:1;cursor:pointer; transition:border-color .15s,color .15s,background .15s} .theme-toggle:hover{border-color:var(--accent);color:var(--accent)} .theme-toggle .icon-sun{display:none} .theme-toggle .icon-moon{display:inline} [data-theme="dark"] .theme-toggle .icon-sun{display:inline} [data-theme="dark"] .theme-toggle .icon-moon{display:none} @media (prefers-color-scheme: dark){ html:not([data-theme]) .theme-toggle .icon-sun{display:inline} html:not([data-theme]) .theme-toggle .icon-moon{display:none} } /* ============================================================ EDITORIAL POLISH (styles-v2 chrome, which loads before this file — page-specific files edit their own headings directly). Nudge headings designed for the old condensed display face into the mixed-case Playfair treatment used on the homepage. ============================================================ */ .legal-title,.error-title,.section-title{ text-transform:none;letter-spacing:-.01em;font-weight:500} .section-subtitle{transform:none} /* ============================================================ AA CONTRAST — small-text accent. The editorial pages + styles-v2 nav paint links / labels / nav / small UI in the bright coral var(--accent) (#e0503a, ~3.6:1 on the cream — passes for large text only). Repaint those SMALL-text uses with var(--accent-ink) (#b23a25, 5.53:1 in light; == coral in dark). LARGE / decorative accent (h1 em, h2 em, .mnum, borders, underlines, ::selection, cursor, hover backgrounds) is deliberately LEFT bright. site.css loads after both the editorial inline