/* ============================================================ themes.css - the DIRECTION layer. Loaded after tokens.css. Two independent axes, and every combination has to work: 1. DIRECTION: handbill / press / night. Chosen by Wes, set as data-direction on by the boot script in index.html and by js/direction.js. 2. The viewer's system light-or-dark setting, which is not a choice anyone on this page makes. So each direction that overrides anything declares its tokens TWICE: once for light, once inside the same prefers-color-scheme query tokens.css uses. Selectors here are :root[data-direction="..."], one point more specific than the plain :root in tokens.css, so a direction always wins over the base palette in whichever half of the light/dark axis it is declared in. That is also why a direction must not declare a token in only one half: the light value would leak into dark. Each block below is complete on purpose. This file is TOKENS ONLY. The two directions that also change the shape of the page rather than just its colour keep those rules in css/directions.css, which loads after sections.css. --proof and --proof-soft, the proofreader's pencil, are marks written ON the proof rather than printed as part of it (see proof.css), so they stay the same blue in handbill and in night. Press is the one exception, and it is forced: press exists to have no blue on it anywhere, and a blue pencil laid on a page with no blue in it is the first thing the eye finds. Press writes its queries in magenta instead. See the block below. ============================================================ */ /* ============================================================ DIRECTION 1: HANDBILL. The site as built and as shipped in the first proof: aged cream, letterpress black, the cobalt hero full bleed, one red stamp. It overrides NOTHING. There are no [data-direction="handbill"] rules anywhere in this file, on purpose: handbill IS the tokens.css palette, light and dark, unedited, so it cannot drift from it and cannot regress when the other two are designed. If handbill ever needs a token of its own, that token belongs in tokens.css. ============================================================ */ /* ============================================================ DIRECTION 2: PRESS. "The answer to it is very blue." Two colour, no blue anywhere, the hero carried as a red-filter monochrome plate (assets/hero/variants/press_redfilter.jpg, wired up in content.js) and every other photograph on the page pulled from the same plate family by tools/press_monochrome.py. See docs/theme-directions.md. ============================================================ */ /* Press, light: the sheet by daylight. Same aged cream and same letterpress black as handbill, because it is the same paper stock and the same ink. What changes is that every colour that carried blue has been taken out of the system and given to a warm neighbour, and the photographs come off a dark plate instead of a colour one, so the page reads two-colour: cream and warm black, with the single stamp red. THE ONE RULE: no blue anywhere. Not in --denim, not in --sky, not in the hero gradient, not in the pencil the queries are written in, not in the grain. If anything here renders blue, press has failed at the single job it exists to do. --sky, --hero-sky-* and --cream are measured, not chosen. --sky is the mean of the plate's sky; the three hero-sky values are its left edge at the top, at 55 percent and at the bottom, the same technique that took the cobalt values in tokens.css off the colour photograph. They are the ground the hero paints on before the photo lands, so they have to match the photo. --cream stays cream: measured on that sky, cream is 7.5:1 and ink is 2.0:1, so the hope of putting black type back on the hero is settled and the answer is no. */ :root[data-direction="press"] { --paper: #F2EDDE; /* his logo's own ground, unchanged */ --paper-deep: #E8E2CE; --ink: #1C1915; --ink-soft: #4A443A; --bark: #6E6355; --sky: #4E4A43; /* warm dark grey, the plate's own sky */ --denim: #6E6355; /* links go bark brown. No blue in press. */ --sawdust: #D9BE92; --stamp: #A63A24; /* the only chroma on the sheet */ /* On the plate the paper red drops to 1.4:1 and disappears. The stamp on the hero is inked one step brighter so it still reads as pressed onto the photograph; the footer stamp, which sits on cream, keeps the dried-stamp red above. */ --stamp-hero: #C9552E; /* The proofreader's pencil, in magenta rather than blue. Magenta is the fourth process ink, so it still reads as apparatus rather than as printed matter, and it is as far from both the warm black and the earth red as a mark can get without turning into either of them. */ --proof: #8E2F6B; --proof-soft: rgba(142, 47, 107, 0.10); --bar-press: #2A251E; --bar-sub: #D9BE92; /* Sampled from press_redfilter.jpg, left edge, top to bottom. */ --hero-sky-top: #4D4842; --hero-sky-mid: #59544D; --hero-sky-low: #625E55; --cream: #F2EDDE; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Press, dark: the same sheet at night. The paper stock does not change, so the ground is the same warm charcoal handbill uses after dark and the type is the same bone. Everything that carried blue is warm here too: the night slate behind photographs becomes a warm dark grey off the plate, links go pale bark, and the pencil stays magenta. --bark is one step lighter than the handbill value because it sets 13px kickers and 15px star rows: at #857A6B those are 4.34:1 on this ground and fail AA, and at #918675 they are 5.10:1 and pass. The hero tokens do not change with the scheme: the photograph is the same photograph at 3pm and at 3am. */ @media (prefers-color-scheme: dark) { :root[data-direction="press"] { --paper: #17150F; --paper-deep: #211E16; --ink: #ECE5D3; --ink-soft: #B3AA95; --bark: #918675; --sky: #3B372F; /* the plate's sky, banked down for night */ --denim: #A79880; /* pale bark. No blue in press. */ --sawdust: #C9A96E; --stamp: #C7532F; --stamp-hero: #C9552E; --proof: #D890B8; --proof-soft: rgba(216, 144, 184, 0.12); --bar-press: #D9D2C2; /* the bar is bone at night; press warms it */ --bar-sub: #6B5326; /* on bone, so the sawdust note has to darken */ --hero-sky-top: #4D4842; --hero-sky-mid: #59544D; --hero-sky-low: #625E55; --cream: #F2EDDE; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0 0.83 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } } /* ============================================================ DIRECTION 3: NIGHT. The 11pm call. Charcoal ground, bone type, the cobalt hero contained instead of removed: it keeps the full colour photograph, held inside a bordered plate with a wide charcoal margin, with the headline, the number and the stamp on the charcoal ABOVE it. Night is the only direction where the photograph is not the page's ground, and that structural difference lives in css/directions.css. See docs/theme-directions.md. ============================================================ */ /* Night, light: a direction is not a colour scheme. Night stays night even when the viewer's system is set to light, which is why the two axes are kept apart. These are the values docs/theme-directions.md specifies, with one refinement: --bark is #918675 rather than #857A6B, because --bark sets the 13px kickers and the 15px star rows and the specified value is 4.34:1 on this ground, under AA. #918675 is 5.10:1. --cream is the one token that moves furthest from its usual job. Everywhere else it means "the ink the hero type takes when it is set into the sky". In night the hero type is not on the sky; it is on the charcoal above the plate, so it takes the page's own bone at 14.5:1 and the sky keeps the photograph. */ :root[data-direction="night"] { --paper: #17150F; /* warm charcoal, never blue-black */ --paper-deep: #211E16; --ink: #ECE5D3; /* bone */ --ink-soft: #B3AA95; --bark: #918675; --sky: #33404C; /* night slate behind contained photos */ --denim: #8FA6BD; --sawdust: #C9A96E; --stamp: #C7532F; /* brightened; it reads like a lit sign */ /* The stamp in night is pressed on the charcoal above the plate, never on the photograph, so it is simply the stamp. */ --stamp-hero: #C7532F; --proof: #7FA8D4; --proof-soft: rgba(127, 168, 212, 0.12); --bar-press: #D8CFBA; --bar-sub: #6B5326; /* the bar is bone in night, in both schemes */ /* The cobalt is kept, and contained. These paint the plate before the photograph lands in it. */ --hero-sky-top: #2F67C0; --hero-sky-mid: #387BE3; --hero-sky-low: #4189F4; --cream: #ECE5D3; /* bone: night's hero type is on paper */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0 0.83 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Night, dark: the viewer's night setting on top of the night direction. The same room with the lights one notch further down, and the stamp one notch further up, and nothing else moved: night has to be recognisably the same page whichever way the viewer's phone is set. */ @media (prefers-color-scheme: dark) { :root[data-direction="night"] { --paper: #12100B; --paper-deep: #1C1912; --ink: #ECE5D3; --ink-soft: #B3AA95; --bark: #918675; --sky: #33404C; --denim: #8FA6BD; --sawdust: #C9A96E; --stamp: #D2603A; --stamp-hero: #D2603A; --proof: #7FA8D4; --proof-soft: rgba(127, 168, 212, 0.12); --bar-press: #D8CFBA; --bar-sub: #6B5326; --hero-sky-top: #2F67C0; --hero-sky-mid: #387BE3; --hero-sky-low: #4189F4; --cream: #ECE5D3; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0 0.83 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } }