/* theme.css, the colour variants of the V1 site. The site has exactly one accent colour and it is set in five places in style.css. Everything downstream, the headline span, the button underline, the rules, the form's chosen states, the cursor wash and the WebGL plates, reads those five. So a whole recolour is this file, and nothing else moves: no copy changes, no layout changes, no second copy of the HTML to keep in step. Live by adding ?theme=gold, ?theme=yellow or ?theme=champagne to any page. No parameter is the ORANGE, which became the site's colour on the evening of 2026-09-17 and is set in style.css. ?theme=orange still resolves, to the same values, so older links keep working. theme.js sets data-theme on from the URL. It runs inline in for a reason: build3-fields.js reads --accent off the document with getComputedStyle when the module loads, and a colour read before the theme lands would leave the eight plates and the hero gold on a yellow page. */ /* ---------- gold ---------- The site's colour for one day, 2026-09-17, between the champagne and the orange. Kept so the three can be put side by side. Nothing links to it. */ :root[data-theme="gold"] { --accent: #FFC842; --accent-deep: #A8801F; --accent-mid: #FFDB84; --accent-light: #FFF3D2; --accent-rgb: 255, 200, 66; } /* ---------- yellow ---------- Moved up the hue from where it started. The first pass was #FFC933, which sat a single point away from the gold Sabby chose (#FFC842) and made two of the three links the same picture. This one is a true yellow rather than a bright gold: less red in it, so the difference is visible side by side instead of only in a colour picker. */ :root[data-theme="yellow"] { --accent: #FFE04A; --accent-deep: #A89424; --accent-mid: #FFEB8C; --accent-light: #FFF9DC; --accent-rgb: 255, 224, 74; } /* ---------- champagne ---------- The original, kept because it was the site's colour until today and losing it would mean nobody can compare back. Nothing links to it; it is here for ?theme=champagne. */ :root[data-theme="champagne"] { --accent: #E0C787; --accent-deep: #948359; --accent-mid: #E5CF97; --accent-light: #FFF6E0; --accent-rgb: 224, 199, 135; } /* ---------- orange ---------- Anthropic's coral (#D97757) is the reference, opened up in saturation and brightness so it reads at 12px label size on black, which the flat brand value does not. Hue is held in the Claude range rather than pulled towards a safety-cone orange. */ :root[data-theme="orange"] { --accent: #F07A47; --accent-deep: #A3502C; --accent-mid: #F79C6E; --accent-light: #FFE3D2; --accent-rgb: 240, 122, 71; } /* The select chevron is a data URI, so its stroke can't take a custom property. It's the one thing in the site that has to be restated per theme. */ :root[data-theme="yellow"] .form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFE04A' stroke-width='1.4'/%3E%3C/svg%3E"); } :root[data-theme="champagne"] .form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E0C787' stroke-width='1.4'/%3E%3C/svg%3E"); } :root[data-theme="orange"] .form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F07A47' stroke-width='1.4'/%3E%3C/svg%3E"); } :root[data-theme="gold"] .form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFC842' stroke-width='1.4'/%3E%3C/svg%3E"); }