/* ============================================================ Quietwork palettes ============================================================ Every colour on the site resolves through the tokens below. Nothing else in the CSS carries a raw hex, so a palette is swapped here and nowhere else. Loaded BEFORE site.css, which keeps only the non-colour tokens (font, measure, gutter, radius). TO CHANGE THE ACTIVE PALETTE, MOVE ONE LINE. The `:root,` selector marks whichever block is live. Cut it from the block it is on and paste it above another. That is the whole operation. TO COMPARE WITHOUT EDITING ANYTHING, add ?palette=indigo (or =slate) to any URL. The choice is remembered until you pass a different one. The inline snippet in each applies it before first paint, so there is no flash of the wrong palette. Both that snippet and this comment can be deleted once a palette is settled. ADDING A PALETTE: copy a block, rename it, change the eight source colours at the top of it. The derived values below them are solved to contrast targets rather than picked, so re-solve them rather than eyeballing: the targets are written against each one. ============================================================ */ /* ---- Slate. Supplied by Owen 2026-08-26. ACTIVE. ---------------------- Source colours: #000000, #93a3b7, #111729, #2764ec. Only three of the four can carry text on white. #93a3b7 measures 2.57:1 there, below even the 3:1 a border needs, so it is never text or a boundary on a light ground. Its jobs are the figures band, where black sits on it at 8.16:1, and muted text on the navy, where it reaches 6.93:1. Everything else in its hue is solved down from it. */ :root, [data-palette="slate"] { --bg: #FFFFFF; --bg-alt: #F7F8F9; /* cool off-white, palette hue at 45% sat */ --bg-ink: #111729; /* supplied. 17.82:1 with white */ --text: #000000; /* supplied. 21:1 on white */ --text-muted: #586B84; /* solved to 5.45:1, matching the margin the previous palette held rather than the 4.5 floor */ --text-onink: #F4F5F7; --link-onink: #467BEF; /* solved to 4.53:1 on the navy */ --line-onink: #2D3239; --shadow-toast: 0 6px 16px -6px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.08); --accent: #2764EC; /* supplied. 5.10:1 as text on white, 5.10:1 with white on it */ --accent-dark: #124DD1; /* solved to 6.98:1, for hover */ --accent-wash: #E7EDFB; /* Second accent. The amber is gone with the indigo it was chosen against. #93a3b7 takes the figures band on the same terms: black on it measures 8.16:1 where the amber measured 8.07:1, so the ink-only rule stands unchanged and white on it is still prohibited. */ --accent-2: #93A3B7; /* The hero ground travels between these three as the pointer moves. They are palette colours, not derived ones, which is the point: the hero is the one place the palette gets to be seen at full size. ⚠️ #93a3b7 is deliberately NOT here. White on it is 2.57:1 and the hero sets everything in white, so it is the one supplied colour that cannot be a hero ground. Any replacement must clear 4.5:1 with white. */ /* The hero centre. Everything else is reached by moving away from it. */ --lede-centre: #2764EC; /* accent, white 5.10:1 */ /* The ring, clockwise from due right. The hero blends from the centre colour toward whichever of these the pointer is heading for. ⚠️ The two warm ones CANNOT carry white text: honey is 1.91:1 and pink 2.92:1. That is fine here and only here, because the hero picks its own text colour per frame (--lede-fg) instead of assuming white. Nowhere else on the site may use them behind white. */ /* The sign-off band. Bubblegum Pink at full strength, which means the type on it is dark: white is 2.92:1 there and the brand blue 1.75:1, so neither the usual white heading nor the usual blue highlight can survive. */ --signoff-bg: #FC6471; /* A deep wine drawn from the ground's own hue (355), not the site ink. The ink is #111729, a COLD navy, and against a warm coral it reads as a borrowed colour sitting on top rather than type belonging to the band. 5.42:1, so it clears the floor for the small meta line too. One colour, not two: the highlight was black against navy and the split between two darks read as an accident rather than emphasis. At this size the scale does the work the colour was trying to do. */ --signoff-fg: #49090E; /* 5.42:1 on the pink */ --signoff-hi: #49090E; --lede-r1: #F6AE2D; /* Honey Bronze, ink text 11.01:1 */ --lede-r2: #FC6471; /* Bubblegum Pink, ink text 7.20:1 */ --lede-r3: #111729; /* ink, white 17.82:1 */ --lede-r4: #000000; /* black, white 21.00:1 */ --line: #E7E9EC; /* dividers only, no contrast floor */ --line-strong: #8496AD; /* solved to 3.02:1, control boundaries */ /* On the ink ground. Solved to the ratios the indigo palette held there: 10.88:1 for body, 6.90:1 for captions. */ --line-onink-strong: #53667C; /* solved to 3.02:1 on the navy: a control boundary needs 3:1 there just as it does on white, and --line-onink at #2D3239 is a divider, far too quiet to bound a control */ --text-onink-muted: #C2CBD7; --text-onink-quiet: #92A3B6; --placeholder: #627892; /* 4.54:1, same as the indigo placeholder */ --onaccent-hover: #E4E9F4; --scroll-thumb: #C8CED5; --scroll-thumb-hover: #ABB4BF; /* Semantic, not brand. Identical across palettes on purpose: green means the same thing whatever the accent is. Tokenised anyway so the no-raw-hex rule has no exceptions to argue about. */ --ok-bg: #EAF6EF; --ok-line: #B9E0CB; --warn-bg: #FDECEA; --warn-line:#F3C2BD; --warn-link:#8C1D18; --logo-band: #F4F4F4; --tile: #F3F5F7; --scrim-ink: rgba(17, 23, 41, 0.78); --scrim-clear: rgba(17, 23, 41, 0); --ok: #1D7A4D; /* semantic, not brand: carried across palettes */ --warn: #B3261E; } /* ---- Indigo. The 2026-08 original, kept so it can be returned to. ------ Accent #4A5EDA was the brand accent from the rebuild until 2026-08-26 and `brand-rules.md` called it not to be changed. Owen changed it. This block is the whole of what it was. */ [data-palette="indigo"] { --bg: #FFFFFF; --bg-alt: #F7F7F5; --bg-ink: #14161C; --text: #1A1A1A; /* 17.4:1 on white */ --text-muted: #6A6A6A; /* 5.4:1. The brand sheet's #7A7A7A is 4.29:1 and fails AA */ --text-onink: #F4F5F7; --link-onink: #A9B5F5; --line-onink: #2A2E38; --shadow-toast: 0 6px 16px -6px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.08); --accent: #4A5EDA; /* 5.38:1 as text on white, 5.38:1 with white on it */ --accent-dark: #3A4CBF; --accent-wash: #F0F2FE; --accent-2: #E8A33D; /* amber. 8.07:1 with ink text, ink only */ --lede-centre: #4A5EDA; --signoff-bg: #E8A33D; /* this palette's amber */ --signoff-fg: #1A1A1A; /* 8.07:1 on the amber */ --signoff-hi: #000000; --lede-r1: #E8A33D; /* the amber this palette already had */ --lede-r2: #A9B5F5; --lede-r3: #14161C; --lede-r4: #000000; --line: #E0E0E0; --line-strong: #8C8C8C; --line-onink-strong: #626262; /* 2.96:1 on the indigo ink, its 3:1 point */ --text-onink-muted: #C6C9D2; /* 10.92:1 on the ink */ --text-onink-quiet: #9AA0AC; /* 6.89:1 on the ink */ --placeholder: #767676; /* 4.54:1 on white */ --onaccent-hover: #E8EAF0; --scroll-thumb: #CFCFCF; --scroll-thumb-hover: #B4B4B4; --ok-bg: #EAF6EF; --ok-line: #B9E0CB; --warn-bg: #FDECEA; --warn-line:#F3C2BD; --warn-link:#8C1D18; --logo-band: #F4F4F4; --tile: #F4F4F2; --scrim-ink: rgba(20, 22, 28, 0.78); --scrim-clear: rgba(20, 22, 28, 0); --ok: #1D7A4D; --warn: #B3261E; }