/* ============================================================ THE DARK THEME — warm black ground, mocha accent. Founder-directed. Applied by putting `data-theme="dark"` on or . It only redefines TOKENS, so every component inherits it without being touched — which is also the test of whether the token layer was ever real. WHY THIS SUITS THE MATERIAL, not just taste: the site's whole vocabulary is paperwork. On a light ground a white job sheet is nearly invisible and has to be pushed forward with borders and shadow. On a dark ground it is literally paper on a desk at night — the artefact becomes the brightest thing on the page with no help at all. The trade buyer is also reading this on a phone in a van at 7am, which is the one context where a dark page is kinder. ---- SUPERSEDED S143: THE PALETTE WAS A RAMP, IT IS NOW ONE COLOUR ---- This block used to carry a five-step brown ramp — coffee #6F4E37 for fills, mocha #A47864 as "THE SIGNATURE" text, caramel #C68B59 for hover — with a warning that coffee was fill-only at 2.54. The founder then removed the whole family: "dont use coffee anywhere, use this color only #decbb6 as the accent. i dont like the brown buttons." So there is now ONE accent, `--accent: #DECBB6`, and no ramp to get wrong. On this dark ground it measures 12.00, so unlike on a light ground it may be BOTH type and fill here. Fills carry ink on top, never white (1.58). The old ramp is described rather than deleted because the values above are the reason the ramp existed, and someone will otherwise reintroduce a second brown for "hover" and rediscover the 2.54 trap. ---- WHY A WARM BLACK AND NOT #0F0F0F ---- A blue-black next to a warm brown makes the brown read pink and accidental. #14100E costs 0.2 of contrast against the old cool black (15.42 vs 15.63) and makes the mocha read as chosen. That is the whole reason for it. ---- WHAT DOES NOT CHANGE ---- The paper artefacts stay WHITE. They are documents; tinting them to fit the theme would throw away the one thing the dark ground is buying us. Green survives ONLY as a live/success signal — a dot, a status word — never as a surface. It now has to share the page with a warm accent, so the old rule ("a signal, never a fill") matters more here, not less. ⚠️ NOT CREAM. A warm dark theme drifts toward beige surfaces if you let it, and cream backgrounds are on the founder's banned list — he reads that whole package as "looks like Claude made it". Mocha appears as ACCENT and as ink on paper. No surface on this site is ever beige. ============================================================ */ [data-theme="dark"] { /* grounds — warm, three steps so panels can separate without a border */ --paper: #14100E; --paper-2: #1E1815; --paper-3: #2A221E; /* type */ --ink: #EDE7E1; /* the role INVERTS: "ink" is the readable colour, and on a dark ground that is the off-white. Every component asking for var(--ink) gets the right thing for free. */ --ink-2: #C9C0B8; --ink-3: #9A9089; --ink-4: #7E756E; --line: #2C2521; --line-2: #3A312C; --white: #FFFFFF; /* unchanged — the paper stays paper */ /* the accent */ --brand: #DECBB6; --accent-ink: #DECBB6; /* on near-black the accent IS the legible one */ /* 12.00 on the dark ground. The one accent. */ --brand-lift: #EADCCB; /* a lift of the same accent, not a second colour */ --brand-deep: #DECBB6; /* no coffee anywhere — fills use the accent with ink on top */ --brand-hot: #00C766; /* the live/success signal, lifted for a dark ground */ --brand-wash: rgba(164,120,100,0.13); --brand-line: rgba(164,120,100,0.34); --alarm: #E8836B; /* the light-theme alarm red is unreadable here */ --alarm-dim: #F0A08B; /* 9.10 — the emphasis variant; the light theme darkened for contrast, a dark theme must LIGHTEN */ --alarm-wash: rgba(232,131,107,0.14); color-scheme: dark; } /* Buttons: the primary was ink-on-paper, which inverts to off-white on dark and loses all colour. A dark theme is where the accent earns its keep, so the primary becomes a mocha fill carrying white. */ [data-theme="dark"] .btn--brand, [data-theme="dark"] .hZ__cta { background: var(--brand-deep); color: var(--ink); } [data-theme="dark"] .btn--brand:hover, [data-theme="dark"] .hZ__cta:hover { background: #EADCCB; } [data-theme="dark"] .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; } /* The wordmark is a MASK filled with var(--ink) — it inverts for free. Noted because it looks like it needs work and does not. */ /* ============================================================ 🔴 PAPER SCOPE — the half of a dark theme that is always forgotten. The block above inverts `--ink` to an off-white, which is right for anything sitting on the dark ground. But this site deliberately keeps its artefacts WHITE — they are documents, and paper on a dark desk is the entire reason the dark theme suits the material. The moment both are true, every component inside a white artefact is drawing off-white text on white and vanishes. That is not a hypothetical: the first render of this theme had "Jane Morgan" and the one human row in the job log invisible, with no error and no failed check, because the token WAS applied correctly — just to a surface that had not inverted with it. A comment two blocks up cheerfully claimed components would inherit the theme "for free". They inherit it; free is the wrong word. So a white surface re-declares the light values locally. One scope class instead of patching each component, because the alternative is finding this again every time an artefact is added — and it fails silently every time. RULE: any element given a white or near-white background in dark mode MUST carry `.on-paper`, or be listed here. If you add an artefact and its text disappears, this is why. ============================================================ */ /* ⚠️ THIS LIST IS THE WHOLE THEME'S WEAK POINT AND IT WAS SHORT. When the dark theme went from one section to the WHOLE home page, 77 text elements went light-on-white in one step — every artefact whose class was not named here. The scope is correct; the list was incomplete, and an incomplete list fails silently and invisibly. The entries below were not guessed: the page was walked for every element painting a background above rgb(235,235,235), which returned cmp-card, mq, mq__lab, plat__p, sheet, t3C__ui, tsel__pill. ⚠️ THAT WALK HAS A BLIND SPOT: it reads `backgroundColor`, which is TRANSPARENT on an element painting only a `background-image`. The hero panel is a gradient, so it was missed and its buttons rendered off-white on off-white at 1.23:1. `.hf` is listed by hand for that reason. ADD A LIGHT SURFACE, ADD IT HERE — gradients included. */ [data-theme="dark"] .on-paper, [data-theme="dark"] .reel__sheet, [data-theme="dark"] .scene__card, [data-theme="dark"] .hZ__doc, [data-theme="dark"] .frag, [data-theme="dark"] .panel, [data-theme="dark"] .hZ__nav, [data-theme="dark"] .t3C__ui, [data-theme="dark"] .cmp-card, [data-theme="dark"] .mq, [data-theme="dark"] .mq__lab, [data-theme="dark"] .plat__p, [data-theme="dark"] .sheet, [data-theme="dark"] .hf, /* the gradient panel — see the blind-spot note */ [data-theme="dark"] .hf__card, [data-theme="dark"] .tsel__pill { --ink: #0F0F0F; --ink-2: #3F3F3F; --ink-3: #6B6B6B; --ink-4: #6E6E6E; --line: #E5E5E5; --line-2: #D4D4D4; --paper: #F6F7F8; /* knocked-through dots/holes drawn in the ground colour must use the PAPER's ground, not the page's */ --paper-2: #EBEDF0; --brand: #0B6B42; /* on white, the mocha fails contrast (2.1) — inside an artefact the accent reverts to the green signal */ --brand-hot: #00A855; --alarm: #C6412A; /* ⚠️ --alarm-dim belongs here too, and was missing. On the dark ground it is a LIGHT salmon (#F0A08B) built to read against black; inside a white artefact it sat on --alarm-wash at 1.8:1 — "Emergency callout" was very nearly unreadable. The scope's CLASS list has bitten twice; this is the same blind spot one dimension over, in its TOKEN list. When a token has a light-ground and a dark-ground value, BOTH have to be named here. */ --alarm-dim: #A82F1A; --alarm-wash: #FBECE9; color-scheme: light; } /* ============================================================ THE MARQUEE BANDS, ON THE HERO'S GRADIENT. Founder-directed. TWO WRONG ATTEMPTS BEFORE THIS ONE, both worth keeping: 1. GIVING THE LABEL AND FADES THEIR OWN COPY OF THE GRADIENT put a seam down the band. A gradient paints across the element's OWN width, so the label rendered a complete white-to-mocha ramp inside its 223px while the band rendered the same ramp across 1440. Two correct gradients that can never align — "two gradients instead of one". 2. MASKING THE ITEMS INSTEAD failed for a subtler reason: the mask went on `.mq__vp`, the scrolling TRACK, which begins 43px left of the band and is several times wider than it. Every stop was therefore in the wrong coordinate space — the left stop cleared 197px of a 223px label, so the item text showed through the label, and `calc(100% - 120px)` referred to the track's width, nowhere near the band's right edge. THE FIX IS `background-attachment: fixed`. It paints the gradient across the VIEWPORT rather than each element, so the band, the label and both fades share one coordinate space by definition — they cannot misalign, and no element needs to know another's width. Safe here specifically because the gradient is 90deg: a fixed background normally shifts as the page scrolls, but a horizontal ramp is unchanged by vertical scrolling. If this is ever rotated back to 180deg, `fixed` becomes wrong and the band will appear to slide. ============================================================ */ [data-theme="dark"] .mq, [data-theme="dark"] .mq--logos { --mq-grad: linear-gradient(90deg, #FFFFFF 0%, #FCF9F6 30%, #F1E4D8 62%, #DECBB6 100%); background: var(--mq-grad); background-attachment: fixed; border-block-color: rgba(31,26,22,0.10); } /* opaque again — items must not show through the label — but aligned to the band because both are painted against the viewport */ [data-theme="dark"] .mq__lab { background: var(--mq-grad); background-attachment: fixed; } [data-theme="dark"] .mq__lab::after { background: var(--mq-grad); background-attachment: fixed; mask-image: linear-gradient(90deg, #000 8%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 8%, transparent); } [data-theme="dark"] .mq::after { background: var(--mq-grad); background-attachment: fixed; mask-image: linear-gradient(90deg, transparent, #000); -webkit-mask-image: linear-gradient(90deg, transparent, #000); } /* ⚠️ `.paper2`'s DARK ANSWER. The utility in site.css darkens the two greys to clear 4.5 on the LIGHT #EBEDF0. On the dark theme `--paper-2` is #1E1815 and those same values would be near-black on near-black — a fix for one ground applied to its opposite. The ink slabs (`.sec--ink` + data-theme) are real sections of real pages, so a paper2 surface WILL end up inside one; it takes the theme's own greys, which are already solved against that ground. */ [data-theme="dark"] .paper2 { --ink-3: #9A9089; --ink-4: #7E756E; }