/* ============================================================ HELIOCASTLE — TOKENS Every colour, font and easing curve on the site starts here. Change --accent-rgb (or set data-accent on ) and every gold line, glow, icon and button follows. 15 palettes are ready below. ============================================================ */ /* ============================================================ ACCENT PALETTE The whole site takes its accent from --accent-rgb. Change that one triplet (or set data-accent on ) and every gold line, glow, icon, button and chart follows. Try one live: add ?palette to any URL for a swatch picker. Make it permanent: set data-accent on , or edit :root below. ============================================================ */ :root { /* tells the browser to draw native widgets — dropdown popups, date pickers, scrollbars — in dark mode instead of the light default */ color-scheme: dark; /* --- ANTIQUE GOLD (default) --- */ --accent-rgb: 200 164 106; --accent-light-rgb: 215 181 126; --accent-dark-rgb: 169 133 78; --accent-pale-rgb: 224 196 147; /* --- THEME INK --------------------------------------------------- Six tokens carry the whole light/dark switch. Dark is the default; theme-light.css redefines them under prefers-color-scheme and every panel, hairline, glow and shadow follows. */ --bg-rgb: 5 5 5; /* page ground, for translucent panels */ --ink-rgb: 255 255 255; /* foreground: text, hairlines, fills */ --emit-rgb: 255 252 244; /* light the monument gives off */ --emit-a: 1; /* how strongly that light reads */ --shadow-rgb: 0 0 0; /* cast shadows and vignette */ --shadow-a: 1; /* how heavy they sit */ /* --- THE SKY ------------------------------------------------------ A canvas cannot read a stylesheet, so the colours the starfield and the dissolving pillar paint with live here and the scripts look them up. That is the whole reason the sky can change theme at all: they used to be #ffffff written into the JavaScript, which is invisible on paper and impossible to theme. In light mode these become ink instead of light — see theme-light.css. Same sky, same drift, same constellation, drawn dark on a pale ground. */ --star-rgb: 255 255 255; /* the stars themselves */ --star-warm-rgb: 232 211 172; /* the gold-tinted few */ --star-link-rgb: 207 214 228; /* the constellation lines */ --star-a: 1; /* master strength */ --star-density: 1; /* how many, as a multiplier */ /* The monument's own colour. The dissolving pillar is painted on a canvas OVER the logo image, so it has to match the artwork rather than the sky — the shards and the pixels drawn into the PNG are the same stone coming apart. */ --mark-rgb: 255 255 255; --streak-head-rgb: 255 252 244; /* a shooting star's leading point */ --streak-tail-rgb: 215 181 126; /* and the trail behind it */ --bg: #050505; --surface: #101010; --surface-2: #141414; --text: #ffffff; --muted: #9a9a9a; /* every accent tone derives from the triplets above */ --gold: rgb(var(--accent-rgb)); --gold-light: rgb(var(--accent-light-rgb)); --gold-dark: rgb(var(--accent-dark-rgb)); --gold-pale: rgb(var(--accent-pale-rgb)); --gold-soft: rgb(var(--accent-rgb) / 0.35); --line: rgb(var(--ink-rgb) / 0.07); --serif: "Cormorant Garamond", "Times New Roman", serif; --sans: "Jost", "Segoe UI", system-ui, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --pad-x: clamp(24px, 5vw, 72px); } /* ---------- ready-made palettes ---------- Chosen in the admin under Appearance; the choice is stored in settings.accent and printed as data-accent on . Keep this list in sync with accent_palettes() in app/repo.php. */ /* warm */ :root[data-accent="amber"] { --accent-rgb: 224 168 74; --accent-light-rgb: 230 184 107; --accent-dark-rgb: 184 138 61; --accent-pale-rgb: 235 198 137; } :root[data-accent="copper"] { --accent-rgb: 193 122 78; --accent-light-rgb: 214 150 108; --accent-dark-rgb: 158 95 58; --accent-pale-rgb: 223 168 133; } :root[data-accent="ember"] { --accent-rgb: 235 116 42; --accent-light-rgb: 239 141 80; --accent-dark-rgb: 193 95 34; --accent-pale-rgb: 242 165 117; } :root[data-accent="champagne"] { --accent-rgb: 214 196 160; --accent-light-rgb: 232 219 194; --accent-dark-rgb: 178 160 126; --accent-pale-rgb: 238 227 206; } :root[data-accent="rose"] { --accent-rgb: 197 138 121; --accent-light-rgb: 217 166 152; --accent-dark-rgb: 163 108 92; --accent-pale-rgb: 228 186 174; } /* red */ :root[data-accent="ruby"] { --accent-rgb: 214 76 88; --accent-light-rgb: 221 108 118; --accent-dark-rgb: 175 62 72; --accent-pale-rgb: 228 139 146; } :root[data-accent="wine"] { --accent-rgb: 178 90 96; --accent-light-rgb: 203 122 128; --accent-dark-rgb: 143 66 72; --accent-pale-rgb: 216 150 155; } /* green */ :root[data-accent="emerald"] { --accent-rgb: 60 186 116; --accent-light-rgb: 95 198 141; --accent-dark-rgb: 49 153 95; --accent-pale-rgb: 128 210 165; } :root[data-accent="teal"] { --accent-rgb: 56 178 172; --accent-light-rgb: 92 192 187; --accent-dark-rgb: 46 146 141; --accent-pale-rgb: 126 205 201; } /* blue / violet */ :root[data-accent="sapphire"] { --accent-rgb: 74 130 246; --accent-light-rgb: 107 152 248; --accent-dark-rgb: 61 107 202; --accent-pale-rgb: 137 174 249; } :root[data-accent="violet"] { --accent-rgb: 168 85 247; --accent-light-rgb: 184 116 248; --accent-dark-rgb: 138 70 203; --accent-pale-rgb: 198 145 250; } :root[data-accent="amethyst"] { --accent-rgb: 150 120 200; --accent-light-rgb: 177 153 217; --accent-dark-rgb: 118 91 164; --accent-pale-rgb: 196 176 228; } /* neutral */ :root[data-accent="steel"] { --accent-rgb: 143 166 192; --accent-light-rgb: 163 182 203; --accent-dark-rgb: 117 136 157; --accent-pale-rgb: 182 197 214; } :root[data-accent="platinum"] { --accent-rgb: 186 192 199; --accent-light-rgb: 212 217 222; --accent-dark-rgb: 148 155 163; --accent-pale-rgb: 224 228 232; }