/* Lifted from templates/cms/_brand_tokens.html on 13 Sep 2026. Byte-identical apart from the font URLs: {% static 'website/fonts/x' %} became ../website/fonts/x, which resolves against THIS file's own URL (/static/css/brand.css -> /static/website/fonts/x). 6 of them. On 67 of the 73 logged-in pages -- the most-repeated block on the site, 453 KB of it re-sent because inline CSS cannot be cached. */ :root{ /* The page itself -- the canvas everything sits on. Kev, 25 Aug: "can you change the background white to fbfbf9 ... across the site". It was NINE different near-whites across 46 body rules (#f4f5f7, #f5f5f5, #f0f1f3, #f7f7f7, #fff and four more), none of them chosen against the others. Cards and panels stay #fff on purpose, so they lift off this. */ --page:#fbfbf9; /* The accent itself. */ --accent:#1f2327; /* The same colour as raw channels, for the rgba() glows and shadows that need an alpha: rgba(var(--accent-rgb),.13). */ --accent-rgb:31,35,39; /* What used to be #fff6f0 and #fff8f4 -- the wash behind an ACTIVE control. Both were the accent at a few percent, so both are one token now; a peach wash left under black text reads as something nobody got round to. #ecebe7 -- Kev, 25 Aug. The first neutral I picked, #f2f3f5, was a grey with a BLUE bias, and once the canvas went warm (#fbfbf9) a selected menu item read as a cool patch sitting on a warm surface rather than a deeper shade of it. This one is the canvas, darkened; it belongs to the same family. */ --accent-tint:#ecebe7; /* Hover/pressed, a step up from the accent rather than a separate colour. */ --accent-hover:#33383d; /* ROLLOVER, the rung between the canvas and a selected item. Kev, 25 Aug: "fix the other grey highlights and roll overs to use the beige pallet". The site had 250 cool-grey background values in 46 shades, and the ones on :hover were the worst of it -- #f4f5f7, a grey with a blue bias, was the old page colour, so a rollover used to be "the page showing through". Once the canvas went warm that stopped being true and the hover read as a cold patch that barely moved against #fbfbf9. So the three surfaces are now one family, each a step darker than the last: --page #fbfbf9 rest --hover #f8f7f4 pointing at it --accent-tint #ecebe7 chosen Interactive states came first; the surfaces below followed. HALVED, Kev, 25 Aug: "make rollover highlight 50% as dark". A rollover's darkness is the step it sits BELOW the surface around it, so that step is what was halved: it was 7,8,10 below the canvas and is now 4,4,5. Measuring from white instead would have given #faf9f7, two units off the canvas and effectively invisible -- a hover you cannot see is not a lighter hover. */ --hover:#f8f7f4; /* SURFACES -- a filled thing that is not reacting to you: a table header, a well, a badge, an image placeholder. Kev, 25 Aug: "look for other css that uses grey such as the calendar etc and transition to a very light beige scheme." Two rungs, because the greys they replace were two: a light fill you read THROUGH (#f9fafb, #f7f8fa, #fafbfc, #f8f9fa and a dozen near-identical others) and a heavier one you read AGAINST (#e2e4e8, #e5e7eb, #e8e7e7). Flattening both to one value would have lost the distinction that made a badge legible on a header. */ --surface:#f7f6f2; --surface-2:#eeece7; /* BORDERS. Kev, 25 Aug, on the plan-set panel: #e9e9e7. The site's rules and outlines are still cool greys (#e2e4e8, #eef0f2, #e5e7eb) left over from the old palette -- a warm panel with a blue-grey line round it reads as two different designs meeting at the edge. This is that line, warmed. Only the plan-set panel uses it so far; the rest is a pass of its own. */ --border:#e9e9e7; /* THE PRODUCT PHOTO GROUND. Kev, 26 Aug: the padded container behind a product image should be "same as image bg". It is #e8e8e8 because that is what the images ARE: every .webp in media/product_images carries an opaque #e8e8e8 square baked in (checked across 120 of the 482 -- 118 exactly that, 2 a shade off at #e8e7e7). The containers were --surface-2 beige, so each photo sat as a grey tile on a warm one and the join showed as a box. Deliberately NOT a palette colour, and the one cool value in this file: it is dictated by the assets, not chosen. Re-export the images on a warm ground and this should follow them, not the other way round. */ --product-bg:#e8e8e8; /* ── LOWLIGHTS ─────────────────────────────────────────────────────────── The warm family carried DOWN past the border. The site had none of these: every dark neutral on it was a cool grey left from the old palette, which is why a caption on a beige panel read a shade the wrong temperature. Same hue 45 as everything above, saturation easing off as it darkens. */ --muted:#aca591; /* captions, secondary text */ --rule:#7f7966; /* a divider drawn on a filled surface */ --deep:#535046; /* the warm end of the dark half */ /* ── THE INVERSE PAIR ──────────────────────────────────────────────────── Charcoal and white, so a page can be flipped. --accent IS the charcoal -- deliberately reused rather than joined by a second near-black. On an inverted page the type is --ink, cream at high lightness, not #fff: it keeps the warm family intact and reads better over a long screen. */ --char:#1f2327; /* the ground of an inverted page (= --accent) */ --char-2:#2b3036; /* a card sitting on that ground */ --char-3:#3c4249; /* its edge, and disabled text */ --ink:#f4f3ee; /* type on charcoal */ /* ── THE COOL ACCENT ───────────────────────────────────────────────────── Cream sits at hue 45, so its complement is 225 -- a blue. That is 180 degrees round the wheel, not a taste call, and it is why the near-black already here has never clashed with the beige: at hue 210 it was sitting near cream's complement all along without anyone choosing it. SLATE, the exact complement. Four values, because an accent needs all four or it borrows a hover from somewhere else -- and --cool-lift is not decoration: slate scores 7.5:1 on the cream page and 2.0:1 on charcoal, so one value cannot serve both grounds and "invert a page" would not work. The lift was found by walking lightness up until it cleared 4.5:1. NOT wired to buttons. --accent stays charcoal, which is what Kev asked for on 25 Aug ("change the current highlight of orange to black"). This is the SECONDARY: links, active states, a figure worth looking at. Making it the primary is one line -- set --accent to var(--cool) -- and that is the only change it takes, which is the whole point of these being tokens. */ --cool:#405082; /* 7.54:1 on --page */ --cool-tint:#ebeef7; /* the wash behind it */ --cool-deep:#313d63; /* pressed */ --cool-lift:#7988b4; /* the same accent on charcoal -- 4.51:1 */ } @font-face{font-family:'Martel Sans';font-style:normal;font-weight:400;font-display:swap; src:url("../website/fonts/martel-sans-400-latin.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Martel Sans';font-style:normal;font-weight:400;font-display:swap; src:url("../website/fonts/martel-sans-400-latin-ext.woff2") format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Martel Sans';font-style:normal;font-weight:700;font-display:swap; src:url("../website/fonts/martel-sans-700-latin.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Martel Sans';font-style:normal;font-weight:700;font-display:swap; src:url("../website/fonts/martel-sans-700-latin-ext.woff2") format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Martel Sans';font-style:normal;font-weight:800;font-display:swap; src:url("../website/fonts/martel-sans-800-latin.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Martel Sans';font-style:normal;font-weight:800;font-display:swap; src:url("../website/fonts/martel-sans-800-latin-ext.woff2") format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF} /* ── A FALLBACK THAT OCCUPIES MARTEL'S SPACE, SO THE SWAP DOES NOT MOVE ── 136, 9 Sep 2026. PageSpeed had the home page at 92 with CLS 0.126, and Lighthouse named the cause exactly: "Web font loaded", three times, shifting
. WHY IT SHIFTS SO MUCH. Measured from the actual woff2 files with fontTools, not estimated: Martel Sans ascent 115% descent 67% = 182% of em Arial ascent 90.5% descent 21.2% = 112% of em Martel needs SIXTY PERCENT more vertical room than the fallback, so every line of text moves when the real font arrives. font-display:swap is right and stays -- the note below is correct that on a phone on a roof the fallback may be all anyone sees -- but swap without matched metrics means a guaranteed reflow. These overrides are computed, not guessed: size-adjust is Martel's average lowercase advance divided by Arial's, and ascent/descent are Martel's own divided by that adjustment so they survive the scaling. Two weights, because the advances differ (529 vs 564 units at 1000 upm). The fallback still renders instantly. It now simply occupies the same space, so the swap is invisible rather than jarring. */ @font-face{font-family:'Martel Fallback';font-weight:400;font-style:normal; src:local('Arial'),local('Helvetica'),local('Liberation Sans'); size-adjust:109.84%;ascent-override:104.70%;descent-override:61.36%;line-gap-override:0%} @font-face{font-family:'Martel Fallback';font-weight:700;font-style:normal; src:local('Arial Bold'),local('Arial'),local('Helvetica'),local('Liberation Sans'); size-adjust:117.04%;ascent-override:98.26%;descent-override:57.59%;line-gap-override:0%} :root{ /* The brand face, with a real fallback stack -- font-display:swap means the fallback is what people see for the first few hundred milliseconds, and on a phone on a roof that may be all they see. */ --font-brand:'Martel Sans','Martel Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,Helvetica,sans-serif; } /* WHERE IT IS USED: headings and buttons, as asked -- the places that carry the brand. Body text stays on the system stack: Martel Sans is a display-leaning face with a tall x-height and long ascenders, and a table of plan sets set in it reads slower than one set in Arial. */ h1,h2,h3,h4,h5,h6, .tool-header-title h1, button,.btn,.smd-btn,.sj-go,.ps-go,input[type=submit], .nav-links>li>a,.nav-logo{font-family:var(--font-brand)}