/* ═══════════════════════════════════════════════════════════════════ ★ BRAND PALETTE — THE SINGLE SOURCE OF TRUTH ★ These seven values are the ONLY colours on the site (plus black/white). To recolour anything, change it HERE — once. The nav, all three unit engines (.thub / .tchap / .u1), the feedback states, and the gradient mesh all reference these variables, so one edit updates everywhere. Each colour has two forms: --c-pink the hex, used like color: var(--c-pink) --c-pink-rgb the r,g,b triplet, used like rgba(var(--c-pink-rgb), .3) (Standalone sims in /sims are separate iframe documents and carry their own copy — they don't see these. They're folded in as each is reworked.) ═══════════════════════════════════════════════════════════════════ */ :root{ --c-purple:#B026FF; --c-purple-rgb:176,38,255; /* Laser Purple */ --c-cyan:#00FFFF; --c-cyan-rgb:0,255,255; /* Hyper Cyan */ --c-pink:#FF007F; --c-pink-rgb:255,0,127; /* Hot Neon Pink */ --c-orange:#FF5F1F; --c-orange-rgb:255,95,31; /* Electric Orange */ --c-green:#39FF14; --c-green-rgb:57,255,20; /* Radioactive Lime */ --c-blue:#1F51FF; --c-blue-rgb:31,81,255; /* Electric Blue */ --c-gold:#FFEA00; --c-gold-rgb:255,234,0; /* Cyber Yellow/Gold */ --c-blue-new:#0096FF; --c-blue-new-rgb:0,150,255; /* Laser Blue */ /* ── RIGHT AND WRONG, AND NOTHING ELSE ────────────────────────────── Owner, 1 Sep 2026: "I actually believe that green/red are the ways to go. You could add a darker green that isn't used on site and red (which isn't used on site) would be better than students trying to differentiate." He is right on both counts. There was no red token at all, and the green above is Radioactive Lime — an ACCENT, used on borders, kickers and headings all over the notebook, so it can never mean "you got it" on its own. These two are deliberately outside the neon set and are used for exactly one thing anywhere in the notebook: telling a student they were right or wrong. Seeing either one anywhere else is a bug. They are never the only signal. Every verdict carries a ✓ or ✗ and the word as well, because red/green is the common colour-blind pair — about one boy in twelve — and these students are already reading at a disadvantage without being asked to decode a hue. */ --c-ok:#16B364; --c-ok-rgb:22,179,100; /* deep green — RIGHT */ --c-no:#E5484D; --c-no-rgb:229,72,77; /* true red — WRONG */ } /* ═══════════════════════════════════════════════════════════════════ ★ NOIR — the second palette (owner, 26 Aug 2026) ★ "Noir isn't monochrome — it's specific and deliberate." A look for students who need less colour, not less contrast: structure reads by VALUE (light against dark), so every distinction survives any kind of colour vision. Sampled from the owner's own strip: black, cream, brass, slate — and a LITTLE crimson, on purpose, in the pink slot and nowhere else. Same eight tokens, so everything token-driven flips at once. The solids-only rules (no gradients, dark ground, solid logo, pencil artwork) live in style.css and pageContent.css under html[data-theme="noir"]. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ MATRIX — ported from notebookCS, 5 Sep 2026, at Robin's request ("you know I'm going to ask you to add it as an option for AP too"). Identical values on purpose: the same theme in both notebooks, so a student moving between courses sees the same green. Built originally by tools/build-themes.py in CS against its contrast and distinctness gates, so these are checked numbers rather than picked ones. ═══════════════════════════════════════════════════════════════════ */ :root[data-theme="matrix"]{ --c-ground:#0a0a0f; --c-ground-rgb:10,10,15; /* the four Robin named, kept under their own names so a page can reach for "the dark one" without knowing which slot it is in */ --t-base:#003B00; --t-base-rgb:0,59,0; --t-mid:#008F11; --t-mid-rgb:0,143,17; --t-title:#00FF41; --t-title-rgb:0,255,65; --c-cyan:#00C42F; --c-cyan-rgb:0,196,47; --c-purple:#7CFF9E; --c-purple-rgb:124,255,158; --c-gold:#9BFF3C; --c-gold-rgb:155,255,60; --c-pink:#00FF41; --c-pink-rgb:0,255,65; --c-blue-new:#00E39A; --c-blue-new-rgb:0,227,154; --c-orange:#C6FF6B; --c-orange-rgb:198,255,107; --c-green:#00A86B; --c-green-rgb:0,168,107; --c-blue:#BFFFD6; --c-blue-rgb:191,255,214; } /* ═══════════════════════════════════════════════════════════════════ ★ '90s — the joke theme, and it passes the same gates as the others ★ Robin, 7 Sep 2026: "let's have a little fun in case I die in my sleep... Let's make one more theme in NBAP called '90's" — then "square boxes, save green for the border, crappy looking tables... the works!" THE COLOURS ARE THE NETSCAPE WEB-SAFE PALETTE, which is the actual reason a 1997 homepage looked like this: 256-colour displays, and a 216-colour cube everybody designed inside. Pure #0000FF is the one that got away — it is the real Netscape link blue and it scores 4.49 against black, which fails the 4.5 body-text line by a hundredth. Lifted to #5588FF. Every other slot is period-correct. Both gates were run before this was written, using notebookCS's own tools/build-themes.py maths rather than a second implementation: every slot at 4.5:1 on this ground, every pair at dE >= 10. The closest pair here is cyan/blue-new at 35.9, which is miles clear — 1997 did not do subtle. ═══════════════════════════════════════════════════════════════════ */ :root[data-theme="90s"]{ --c-ground:#000000; --c-ground-rgb:0,0,0; /* named slots, same contract as matrix: the starfield reads these */ --t-base:#333366; --t-base-rgb:51,51,102; --t-mid:#C0C0C0; --t-mid-rgb:192,192,192; /* silver — the stars */ --t-title:#FFFF00; --t-title-rgb:255,255,0; --c-cyan:#00FFFF; --c-cyan-rgb:0,255,255; /* aqua 16.75 */ --c-purple:#CC00FF; --c-purple-rgb:204,0,255; /* 5.01 */ --c-pink:#FF0099; --c-pink-rgb:255,0,153; /* 5.71 */ --c-gold:#FFFF00; --c-gold-rgb:255,255,0; /* yellow 19.56 */ --c-green:#00FF00; --c-green-rgb:0,255,0; /* lime 15.30 */ --c-orange:#FF9900; --c-orange-rgb:255,153,0; /* 9.81 */ --c-blue:#5588FF; --c-blue-rgb:85,136,255; /* lifted 6.35 */ --c-blue-new:#00CCFF; --c-blue-new-rgb:0,204,255; /* 11.08 */ } :root[data-theme="noir"]{ --c-purple:#8E8E93; --c-purple-rgb:142,142,147; /* smoke gray */ --c-cyan:#EFE3D3; --c-cyan-rgb:239,227,211; /* cream */ /* THE PINK SLOT CARRIES TYPE, so it takes the READABLE crimson, not the nav's deep one. Measured 2 Sep 2026: every low-contrast text node in noir across all 28 topics — 99 of them, headings, bold words, code tokens, labels, the Show Blocks button — was #A0181F on near-black at 2.49, which is under the line for large text let alone body. The note below this block already said so and named the cure; the slot had just never been switched to it. The deep crimson keeps its own name and still does grounds, rules and edges, so the nav is untouched. */ --c-pink:#D94A52; --c-pink-rgb:217,74,82; /* crimson, readable */ --c-orange:#A8842C; --c-orange-rgb:168,132,44; /* deep brass */ --c-green:#CBBFA8; --c-green-rgb:203,191,168; /* stone */ --c-blue:#6E6E70; --c-blue-rgb:110,110,112; /* slate */ --c-gold:#CBA135; --c-gold-rgb:203,161,53; /* brass */ --c-blue-new:#8A8578; --c-blue-new-rgb:138,133,120; /* ash */ /* ── THE WORKING SET (owner, 30 Aug 2026) ──────────────────────── "The correct colors for the theme is the crimson and light beige from the nav-bar." So those two are named here under their own names and everything downstream reaches for THESE, not for the eight slots above. The slots still exist because the whole site is token-driven and they make it flip at once; this pair is what the theme actually IS. TWO CRIMSONS, and the second one is not a second colour. The nav's crimson is deep — #A0181F on near-black measures about 2:1, which is under the line for large type, which is why crimson kept getting used for a rule or an edge and then quietly avoided for anything a student has to read. So: the deep one keeps grounds, rules, edges and small caps, and a LIFTED stop of the same red does the type. At the .055 alpha a ground carries, the two are indistinguishable — it only separates them where the colour lands on a word. Want the type darker? Move --n-crimson-lit and nothing else. */ --n-crimson:#A0181F; --n-crimson-rgb:160,24,31; /* the nav's crimson */ /* 4.75 against the noir ground, so it clears AA for body text and not just for headings. #C9333C reached only 3.78 — fine for a title, short for a bold word inside a sentence, which is most of what this colour actually lands on. Owner, 2 Sep 2026: "some of the text can't be read because it's either red on red." It is close to the reserved wrong-red, and that is survivable because a verdict never leans on hue alone — it carries a check or a cross and the word as well. */ --n-crimson-lit:#D94A52; --n-crimson-lit-rgb:217,74,82; /* same red, readable as type */ --n-cream:#EFE3D3; --n-cream-rgb:239,227,211; /* the nav's light beige */ --n-brass:#CBA135; --n-brass-rgb:203,161,53; /* the supporting third */ /* DARK GREY, FOR TEXT THAT SITS ON TOP OF SOMETHING FILLED. Owner, 2 Sep 2026, on cream letters over a pale blue block in the 2.2 hero: "make all text that covers any other colored thing — dark grey." Not black: black on a noir ground would look like a hole, and this only ever lands on a light or coloured fill, never on the page itself. */ --n-ink:#22201C; --n-ink-rgb:34,32,28; --n-stone:#CBBFA8; --n-stone-rgb:203,191,168; --n-ash:#8A8578; --n-ash-rgb:138,133,120; }