/*! * palette.css - the single home of every brand colour. * * Loaded first, before every other stylesheet. Two blocks: * * :root "warm" - the palette approved in v5 * :root[data-palette="bark"] "bark" - #302621 Wood bark as the dark brand * colour (the client's July request) * * The attribute is printed on by fast_vid_palette() in functions.php, so * switching the whole site - or rolling the change back - is ONE word in ONE * place and no stylesheet is touched. See that function for the switch itself; * git tag `palette-warm-baseline` is the pre-bark snapshot. * * Rules for editing: * * 1. A brand colour goes HERE, never inline in a component. Every rgba() in * the other stylesheets reads a `*-rgb` channel token, because the earlier * hardcoded rgba(42,35,23,.09) values did NOT follow a palette switch and * left the old colour showing in shadows, hairlines and overlays. * 2. Keep the two blocks identical in KEYS. A key present in one and missing * in the other silently keeps the warm value - which is the one bug this * file exists to prevent. * 3. Every `--x-rgb` must stay in sync with its `--x` hex. They are separate * tokens because rgba() cannot take a hex. * 4. Metal colours are NOT palette: a silver coin stays silver in every * palette, so .cnm--gold / .cnm--silver keep their own local tokens in * redesign.css. Same for the watch/jewellery brand accents in * functions.php - those are other companies' colours. * 5. `theme_color` in fast_vid_palette() must match --cream here; the meta tag * cannot read a custom property. */ :root { /* --- accent ------------------------------------------------------------ */ --gold: #B8935A; --gold-rgb: 184, 147, 90; --gold-dark: #A3823F; /* The accent as it appears ON a dark band, where the light-surface accent would disappear. Six places use it: the marquee press mentions, the footer column headings, the eyebrow on the brands band, "Индивидуально", and the calculator's sum and kicker. */ --accent-on-dark: #B8935A; /* Gold that has to CARRY TEXT on a light background. Plain --gold scores 2.74:1 on paper, which fails AA for the 11px mono micro-labels; this is the same hue and saturation dropped to 35% lightness -> 5.50 on paper, 4.55 on cream. Dark bands keep --gold (5.16 on bark) - see the override list in redesign.css. */ --gold-ink: #7F6134; --gold-soft: rgba(var(--gold-rgb), .12); --bronze: #A99370; --bronze-rgb: 169, 147, 112; /* Same problem, same fix, for the 10-11px bronze micro-labels (card index numbers, dates, spec keys, breadcrumbs): plain --bronze is 2.84:1 on paper and 2.35:1 on cream. This is bronze's hue and saturation at 36% lightness -> 5.71 / 4.73. Bronze inside the espresso calculator keeps --bronze. */ --bronze-ink: #736145; /* --- surfaces ---------------------------------------------------------- */ --paper: #FCFAF6; --paper-rgb: 252, 250, 246; --cream: #EDE4D5; --cream-rgb: 237, 228, 213; --cream-2: #F6F1E8; /* --- ink and the dark brand surface ------------------------------------ */ --ink: #2A2317; --ink-rgb: 42, 35, 23; --ink-soft: #6A5F4E; --line: #E3D9C7; --espresso: #211A10; --espresso-rgb: 33, 26, 16; /* Hover state of anything FILLED with the dark brand colour - buttons, pressed chips, the scrolled nav. One step lighter, same hue. */ --espresso-lift: #2D2316; } /* * "bark" - #302621 Wood bark on white. * * Bark is the dark BRAND colour (ink + every dark band) and the light surfaces * are white, not beige. The beige came back twice in the client's review, in * her own words: "убрать бежевый - ассоциируется с модой 2017-2018", and * "сделать основной цвет белый, текст чёрный, где-то расставить небольшие * акценты". So the surfaces are now white with a whisper of bark's own hue * (hsl 20) instead of the old hsl-38 beige - warm enough not to read clinical, * far enough from beige to lose the 2017 association. Gold and bark stay as * the accents, which is what she asked to keep. * * `warm` above is the untouched v5 beige snapshot, so the old look is still * one word away - see fast_vid_palette(). * * Measured on the new white surfaces: * * ink on paper 14.74 AA/AAA * ink on cream 13.94 AA/AAA * ink-soft on paper 6.26 AA * gold-ink on paper 5.74 AA * cream text on bark 13.22 AA/AAA * gold on dark band 5.16 AA (dark band unchanged) */ :root[data-palette="bark"] { /* --- accent: THREE COLOURS --------------------------------------------- The client's brief is white, black and wood bark - nothing else. Gold was the fourth colour, and on a light surface it reads as tan: it is part of what she called beige. So the gold tokens keep their NAMES (they are referenced in 120 declarations across four stylesheets) and change their VALUES to bark tints. The result is monochrome: black type on white with bark hairlines, frames and accents - "рамочки такого цвета". Everything below is bark's own hue (hsl 20) at different lightness, so the page reads as one family rather than as grey. Contrast on white: --gold 6.77, --gold-ink 8.4, --bronze-ink 6.25 - all clear AA at any size, which the old gold never was (2.85 large / 2.74 small, a long-standing failure this incidentally retires). */ --gold: #6B5750; --gold-rgb: 107, 87, 80; --gold-dark: #574640; --gold-ink: #5A4841; --gold-soft: rgba(var(--gold-rgb), .10); --bronze: #9A8A82; --bronze-rgb: 154, 138, 130; --bronze-ink: #6E5D55; /* On a dark band the light-surface accent would vanish, so the accent inverts: a warm light tone, dimmer than --cream so it still reads as an accent next to the body text rather than merging with it. 7.6 on bark. */ --accent-on-dark: #C9BEB7; /* --- surfaces: white, and the whole point of this revision ------------- --cream does double duty - it is the tinted BAND on light pages and the light TEXT on dark bands. A warm near-white serves both: the band reads as a band against pure white, and the text stays 13.22 on bark. */ --paper: #FFFFFF; --paper-rgb: 255, 255, 255; --cream: #F5F2F0; --cream-rgb: 245, 242, 240; --cream-2: #FAF8F7; /* --- ink and the dark brand surface: this is the whole change ---------- */ /* Wood bark, hsl(20, 19%, 16%) - warmer and redder than the old espresso. */ --ink: #302621; --ink-rgb: 48, 38, 33; /* Bark's own hue at 38% lightness. Derived, not eyeballed: the warm --ink-soft scored 6.00 on paper and this reproduces it exactly, so body copy keeps its readability instead of drifting grey. */ --ink-soft: #715C52; /* The 88 hairlines. On white these do more work than they did on beige - with the surfaces this close together the border IS the card edge, which is the "рамочки такого цвета" the client asked for. Bark's hue, light enough to stay a hairline rather than a rule. */ --line: #E7E1DD; --espresso: #302621; --espresso-rgb: 48, 38, 33; --espresso-lift: #3D3029; } /* * "tulskaya" - тёплая глина, for the second branch. * * The brief arrived in two passes. First: graphite #212121, light grey #F5F5F5 * and #423835 as the accent, "тёмный серо-коричневый с лёгким винным * подтоном". Then, on review: drop the black, use wood bark - and then, to * settle it, "на Тульской тоже сделай основным цветом #302621". So the dark * brand colour here is now bark itself, the same value the Arbat site uses. * * BE CLEAR ABOUT WHAT THAT COSTS, because it is not obvious from the file. The * two sites now SHARE their dark brand colour outright, so it can carry no * part of the "different site" impression. Everything that does that work now * sits elsewhere, and none of it should be traded away casually: * * - the clay accent, dE 15.1 from bark's own #6B5750 * - 2px corners against Arbat's 18px cards and fully round pills * - the cut-brilliant hero against the watch dial * - a different running order (calculator and process at 01-02) * * Do not "restore" separation by drifting --ink. It is what the client asked * for, twice. * * ONE THING THE BRIEF CANNOT DO ON ITS OWN. #423835 on #302621 measures * 1.30:1 - the accent is invisible on the dark bands, where six things use it * (press mentions in the marquee, footer column headings, the eyebrow on the * brands band, "Индивидуально", and the calculator's sum and kicker). So * --accent-on-dark inverts to a pale clay, #C9B6B1, the same hue at 74% * lightness, 7.59 on bark. That is the same move the other two palettes make, * for the same reason. * * Measured, every pair the layout actually renders: * * ink on paper 14.74 AAA cream text on ink 13.45 AAA * ink on cream 13.45 AAA paper text on ink 14.74 AAA * ink-soft on paper 6.38 AA accent-on-dark on ink 7.59 AAA * ink-soft on cream 5.82 AA accent-on-dark on lift 6.54 AA * gold on paper 11.36 AAA bronze on ink 4.87 AA * gold on cream 10.37 AAA gold-dark on paper 14.23 AAA * gold-ink on paper 10.29 AAA bronze-ink on paper 6.43 AA * gold-ink on cream 9.39 AAA bronze-ink on cream 5.86 AA * * Nothing below AA. --bronze had to move from 55% to 59% lightness to get * there: on the warm dark brown it scored 4.42, where on the old graphite it * had 4.65. Bark is lighter than graphite, so there is less room underneath * it and the mid-tone has to climb to compensate. * * The accent is far stronger on light surfaces than either of the other * palettes managed - a dark accent on white has contrast to spare, which is * what lets this design lean on hairlines and rules. * * Note rule 2 at the top of this file: this block carries every key the other * two do. An early draft was short five of them (--gold-soft, --bronze-rgb, * --paper-rgb, --ink-rgb, --espresso-lift) and would have silently shown warm * beige in the shadows, hairlines and overlays. */ :root[data-palette="tulskaya"] { /* --- accent: тёплая глина ---------------------------------------------- Dark and low-chroma, so on white it behaves like a second ink rather than a highlight - 11.36:1. That is a feature here: the design uses it for rules, frames and figures, where a bright accent would shout. */ --gold: #423835; --gold-rgb: 66, 56, 53; --gold-dark: #312926; --gold-ink: #4A3E3A; --gold-soft: rgba(var(--gold-rgb), .10); /* 59% lightness, not 55: on the warm dark brown it measured 4.42, just under AA, where the old graphite gave it 4.65. */ --bronze: #A1918C; --bronze-rgb: 161, 145, 140; --bronze-ink: #6C5B56; /* The one value the brief cannot supply: see the note above - the client's accent scores 1.4 on the dark brand colour. Same hue, 74% lightness, 7.88 on the dark bands. */ --accent-on-dark: #C9B6B1; /* --- surfaces ---------------------------------------------------------- --cream does double duty, as it does in the other two palettes: it is the tinted BAND on light pages and the light TEXT on dark bands. The client's #F5F5F5 was a true neutral; carrying a whisper of the brand's own hue instead keeps the bands from reading cold beside the warm dark colour, and it still serves both jobs - a visible band against pure white, and 13.97 as text on the dark brand colour. */ --paper: #FFFFFF; --paper-rgb: 255, 255, 255; --cream: #F6F4F4; --cream-rgb: 246, 244, 244; --cream-2: #FAFAF9; /* --- ink and the dark brand surface ------------------------------------ */ /* Wood bark itself, on the client's instruction - the same value the Arbat site uses. Replaces the graphite #212121 of the first pass. */ --ink: #302621; --ink-rgb: 48, 38, 33; /* The same hue at 38% lightness. Set by contrast (6.38 on paper), not by eye, so body copy stays readable and does not drift to grey. */ --ink-soft: #6B5C57; /* The 88 hairlines. On surfaces this close together the border IS the card edge, and this design leans on that harder than the other two. */ --line: #E6E1E0; --espresso: #302621; --espresso-rgb: 48, 38, 33; --espresso-lift: #3D3029; }