/* Bonded, night edition. Load after site.css. Riso on black stock, not an inversion: the day paper colour becomes the text ink, fluorescent pink keeps its value and glows, blue lifts to stay a readable ink, overlaps add light (screen) instead of taking it away (multiply), and the grain is the same speck map re-inked as pale fibre at half the alpha (src/tex/grain-night.png, made by scripts/texture-night.js from grain.png). Active when (a) the OS asks for dark and does not carry data-theme="day" (section 2), or (b) , whatever the OS says (section 1). Sections 1 and 2 are the same rules under two prefixes; keep them identical. Every rule is scoped to night, so the day edition computes exactly as it does without this file, whatever site.css does next. WCAG 2.x contrast on night paper #141318 (the grain lifts the paper by under 2% on average; AA holds on it): --ink #efe6d3 14.90 body text, names, rules --ink-2 #cbc2b0 10.46 meta lines, decks, taglines, captions --ink-3 #9b9386 6.08 crumbs, 10.5px price notes, placeholders, times --pink #ff48b0 5.99 numerals, separators, rules; AA even as small text --pink-deep #ff6fc1 7.30 bracket slugs, ledger ranks, selected-state underlines, numeral edges --pink-text #ff6fc1 7.30 bonded vote count --blue #3aa0e6 6.47 names, 11px handles, stamps --blue-deep #62b6f0 8.33 links, under-market prices, success line --red #ff5a4c 6.00 warning rule --red-deep #ff7468 7.00 warning stamp text, "cancel reply" --green #3cc07e 7.95 lab stamp paper on --ink (visit and post buttons, toast, skip link) 14.90; focus ring (--ink) 14.90 ink on --yellow #6e5700 (tapped "show more") 5.59 Bead inks (non-text, 3:1 minimum): blue #3aa0e6 6.47, orange #ff6c2f 6.55, teal #19ae9f 6.69, pink #ff48b0 5.99, unclassed #8f887c 5.26. Hue identity kept; blue and teal stay apart on hue (205 vs 174 deg), fill still splits solid from ring for colour-blind readers. */ /* ---------- 1. night by choice: ---------- */ :root[data-theme="night"] { color-scheme: dark; --paper: #141318; --paper-2: #1d1b21; --ink: #efe6d3; --ink-2: #cbc2b0; --ink-3: #9b9386; --pink: #ff48b0; --blue: #3aa0e6; --red: #ff5a4c; --green: #3cc07e; --yellow: #6e5700; --pink-deep: #ff6fc1; --blue-deep: #62b6f0; --red-deep: #ff7468; --pink-text: #ff6fc1; --grain: url(/assets/grain-night.png); /* the hand-drawn sort circle, redrawn in the glowing pink (site.css draws it in #c2187a) */ --circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M112 7C52 3 8 18 7 40c-1 21 44 35 99 34 55-1 89-15 88-37C193 15 150 3 84 11' fill='none' stroke='%23ff48b0' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); } :root[data-theme="night"] .c-repair, :root[data-theme="night"] .c-cognitive { --c: #3aa0e6; } :root[data-theme="night"] .c-metabolic, :root[data-theme="night"] .c-longevity { --c: #ff6c2f; } :root[data-theme="night"] .c-growth, :root[data-theme="night"] .c-immune { --c: #19ae9f; } :root[data-theme="night"] .c-skin, :root[data-theme="night"] .c-sexual { --c: #ff48b0; } :root[data-theme="night"] .c-other { --c: #8f887c; } /* overprint adds light on black stock; the lockups stay isolated in site.css so the blend never leaves them */ :root[data-theme="night"] .plate span, :root[data-theme="night"] .t1 .num, :root[data-theme="night"] .t2 .num, :root[data-theme="night"] .vp-head .num, :root[data-theme="night"] .t1 .name, :root[data-theme="night"] .t2 .name, :root[data-theme="night"] .vp-head .name, :root[data-theme="night"] .st-warn, :root[data-theme="night"] .prose > p:first-of-type::first-letter { mix-blend-mode: screen; } :root[data-theme="night"] ::selection { background: #ffe14d; color: #141318; } :root[data-theme="night"] .press { background: rgba(20, 19, 24, .55); mix-blend-mode: screen; } :root[data-theme="night"] .press:not(.cl) { color: var(--pink); } :root[data-theme="night"] a.st:hover { background: rgba(255, 90, 76, .12); } :root[data-theme="night"] .embed pre { background: rgba(239, 230, 211, .06); } :root[data-theme="night"] .f textarea { border-left-color: rgba(255, 72, 176, .6); background-image: repeating-linear-gradient(transparent 0 28px, rgba(58, 160, 230, .3) 28px 29px); } :root[data-theme="night"] .spark path + path { stroke: var(--blue); } :root[data-theme="night"] .k-peptide .pp-name { text-shadow: .028em .02em 0 rgba(58, 160, 230, .85); } :root[data-theme="night"] .dateline:not(.stoppress) > span:first-child::after { content: ", night edition"; } /* ---------- 2. night by the reader's OS, unless they picked day ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) { color-scheme: dark; --paper: #141318; --paper-2: #1d1b21; --ink: #efe6d3; --ink-2: #cbc2b0; --ink-3: #9b9386; --pink: #ff48b0; --blue: #3aa0e6; --red: #ff5a4c; --green: #3cc07e; --yellow: #6e5700; --pink-deep: #ff6fc1; --blue-deep: #62b6f0; --red-deep: #ff7468; --pink-text: #ff6fc1; --grain: url(/assets/grain-night.png); --circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M112 7C52 3 8 18 7 40c-1 21 44 35 99 34 55-1 89-15 88-37C193 15 150 3 84 11' fill='none' stroke='%23ff48b0' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); } :root:not([data-theme="day"]) .c-repair, :root:not([data-theme="day"]) .c-cognitive { --c: #3aa0e6; } :root:not([data-theme="day"]) .c-metabolic, :root:not([data-theme="day"]) .c-longevity { --c: #ff6c2f; } :root:not([data-theme="day"]) .c-growth, :root:not([data-theme="day"]) .c-immune { --c: #19ae9f; } :root:not([data-theme="day"]) .c-skin, :root:not([data-theme="day"]) .c-sexual { --c: #ff48b0; } :root:not([data-theme="day"]) .c-other { --c: #8f887c; } :root:not([data-theme="day"]) .plate span, :root:not([data-theme="day"]) .t1 .num, :root:not([data-theme="day"]) .t2 .num, :root:not([data-theme="day"]) .vp-head .num, :root:not([data-theme="day"]) .t1 .name, :root:not([data-theme="day"]) .t2 .name, :root:not([data-theme="day"]) .vp-head .name, :root:not([data-theme="day"]) .st-warn, :root:not([data-theme="day"]) .prose > p:first-of-type::first-letter { mix-blend-mode: screen; } :root:not([data-theme="day"]) ::selection { background: #ffe14d; color: #141318; } :root:not([data-theme="day"]) .press { background: rgba(20, 19, 24, .55); mix-blend-mode: screen; } :root:not([data-theme="day"]) .press:not(.cl) { color: var(--pink); } :root:not([data-theme="day"]) a.st:hover { background: rgba(255, 90, 76, .12); } :root:not([data-theme="day"]) .embed pre { background: rgba(239, 230, 211, .06); } :root:not([data-theme="day"]) .f textarea { border-left-color: rgba(255, 72, 176, .6); background-image: repeating-linear-gradient(transparent 0 28px, rgba(58, 160, 230, .3) 28px 29px); } :root:not([data-theme="day"]) .spark path + path { stroke: var(--blue); } :root:not([data-theme="day"]) .k-peptide .pp-name { text-shadow: .028em .02em 0 rgba(58, 160, 230, .85); } :root:not([data-theme="day"]) .dateline:not(.stoppress) > span:first-child::after { content: ", night edition"; } } /* ---------- 3. the edition switch: