/* * Sulfur — the yellow.vision palette. * An illuminated-manuscript triad tuned dark and occult: gold leaf on bitumen. * * Two registers, switched by [data-palette] on : * • Illuminated (default, :root) — the canonical gold-on-bitumen. * • Carcosa ([data-palette="carcosa"]) — a sallow, foxed shadow variant * for horror / apocalyptic contexts. * * Raw palette colours are exposed as named tokens; semantic tokens * (--bg, --text, --accent, …) map onto them and are what you should style with. */ /* ── Illuminated (canonical) ─────────────────────────────────────────── */ :root { /* raw palette */ --sulfur-gold: #E9B233; /* primary; gold leaf, not highlighter */ --oxblood: #6E1F1A; /* accents */ --bitumen: #15110E; /* baseline dark ground */ --ash: #3A332C; /* hairlines, borders */ --bone: #D8CFB8; /* body text on dark */ --vellum: #E7DCC2; /* light surfaces / headings */ /* semantic tokens */ --bg: var(--bitumen); --bg-raised: #1b1610; --bg-sunken: #100d0a; --text: var(--bone); --text-dim: color-mix(in srgb, var(--bone) 65%, transparent); --heading: var(--vellum); --accent: var(--sulfur-gold); --accent-2: var(--oxblood); --rule: var(--ash); /* glow used on the gold so it reads as illumination, not flat ink */ --accent-glow: 0 0 24px -6px color-mix(in srgb, var(--sulfur-gold) 55%, transparent); --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Spectral", Georgia, serif; } /* ── Carcosa (shadow sub-palette) ────────────────────────────────────── */ [data-palette="carcosa"] { /* raw palette */ --sallow-gold: #C9BB45; --foxing-sepia: #8A6A38; --pallid-verdigris: #5F6B53; --carcosa-ground: #14150F; --mold-ash: #36382B; --sour-vellum: #CBC09A; /* semantic tokens remapped onto the shadow palette */ --bg: var(--carcosa-ground); --bg-raised: #1b1c14; --bg-sunken: #0e0f0a; --text: var(--sour-vellum); --text-dim: color-mix(in srgb, var(--sour-vellum) 60%, transparent); --heading: var(--sour-vellum); --accent: var(--sallow-gold); --accent-2: var(--foxing-sepia); --rule: var(--mold-ash); --accent-glow: 0 0 22px -8px color-mix(in srgb, var(--sallow-gold) 45%, transparent); } /* ── Base element styling on the active palette ──────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 12%, var(--bg)) 0%, var(--bg) 55%) fixed, var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .4s ease; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; color: var(--heading); margin: 0 0 .4em; } a { color: var(--accent); } hr, .rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .7; margin: 2.5rem 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { transition: none; } }