/* ========================================================================== The Extramile Media — THEME ========================================================================== This file is the whole theme. Change the values in the first block and the entire site follows: header, hero, cards, buttons, footer and dashboard. Nothing else in the project declares a colour. The platform colour is #e65c00. It appears below as --brand-500 and is used verbatim wherever a field of colour is what the eye reads: the rule under headings, hero and section gradients, chart marks, borders, focus rings and hover fills. It is deliberately NOT the workhorse token. Measured against white, #e65c00 is 3.56:1 — under the 4.5:1 WCAG AA floor for body text — and 62 of the 68 places the primary token is used sit next to text, either as the type colour or as a fill under white type. So --brand-700 is the same orange stepped down until it clears 4.5:1 both on white (5.0:1) and on the --brand-50 tint it sits on when a nav item or chip is hovered (4.5:1). The two differ in lightness only, at the same hue. The site reads as #e65c00 throughout and nothing on it is hard to read. To reskin for a client revision, edit ONLY the "BRAND" block below — and re-derive the ramp rather than pasting one hex into every rung: --brand-700 must still clear 4.5:1 against BOTH white and --brand-50. ========================================================================== */ :root{ /* ---------- BRAND — the only block you normally need to touch ---------- */ --brand-900:#ec5204; /* darkest — dark section grounds, scrim base */ --brand-800:#ef6617; /* dark ground, gradient partner */ --brand-700:#bf4a00; /* PRIMARY — text, and fills under white text */ --brand-600:#d35300; /* brighter step — decoration and icons only: white on it is 4.2:1, so no label may sit here */ --brand-500:#e65c00; /* THE PLATFORM COLOUR — marks, rules, large fills */ --brand-300:#ff8953; /* light step, for use on the dark grounds */ --brand-50:#fff0ea; /* tint — hover backgrounds, soft fills */ /* The second platform colour. Orange carries the brand; this navy carries the frame around it — top bar, live strip, footer, and the veil over every photograph. White on it is 12.6:1, so anything may sit on it. */ --navy:#1B2A7C; --navy-800:#16215f; /* one step down, for edges and inner rules #1B2A7C*/ --accent-700:#c97f22; /* gold, darkened for text on white */ --accent:#f0a340; /* ACCENT — from the logo */ --accent-300:#f6b372; --accent-50:#fdf5ea; --support-800:#0b5b53; --support-700:#0f766e; /* third colour: tags, checklists, success */ --support-50:#eef7f6; /* ---------- Neutrals ---------- */ --ink-900:#141821; --ink-700:#333a45; --ink-500:#5c6674; --ink-400:#7d8794; --ink-200:#d9dee5; --ink-100:#eceff3; --ink-50:#f6f8fa; --white:#fff; --whatsapp:#25d366; /* the platform's own green, used on the contact link */ --danger:#b3261e; --danger-50:#fdeceb; --warn:#a16207; --warn-50:#fff8e6; /* ---------- Charts ---------- Every one of these is an existing brand or neutral token, not a new colour: the charts follow a reskin like everything else. They were measured against the white panel rather than chosen by eye. A data mark needs 3:1: the platform orange is 3.56:1, the alternate teal 5.5:1 and the muted grey 3.6:1. The accent gold is deliberately absent — at 2.1:1 it fails as a mark, whatever it does as a button. The series is --brand-500, the platform colour itself, not the darker --brand-700 the rest of the site uses for text: nothing is ever printed on top of a bar or a line, so the mark is free to be the brand. There is no separate "soft" fill token on purpose. A translucent copy of the indigo would be a literal, and a literal stops following SiteSetting.brand_primary the moment a client changes it — the area fill is the series colour at fill-opacity instead. */ --chart-series:var(--brand-500); --chart-alt:var(--support-700); --chart-muted:var(--ink-400); --chart-grid:var(--ink-100); --chart-good:var(--support-700); --chart-warn:var(--warn); /* ---------- Brand veils ---------- The translucent brand: focus rings, scrims and the veils over hero and card imagery. These used to be rgba() literals sitting in styles.css, which meant twelve rules stayed indigo through a reskin — the hex test only ever looked for hexes, so nothing caught it. The focus ring is color-mix, so it follows --brand-700 including a client's dashboard override. The scrims are plain rgba because a browser that does not understand color-mix would drop the declaration and leave a modal backdrop transparent, which is a broken screen rather than a slightly wrong colour. They are hand-matched to --brand-900 and must be re-derived with it. */ --brand-ring:color-mix(in srgb, var(--brand-700) 22%, transparent); --scrim:rgba(27,42,124,.45); /* dashboard drawer behind content */ --scrim-strong:rgba(27,42,124,.55); /* modal and dialog backdrops */ --veil-1:rgba(27,42,124,.92); --veil-2:rgba(27,42,124,.78); --veil-3:rgba(27,42,124,.42); --veil-image:rgba(27,42,124,.92); /* over photography, for white text */ --veil-image-soft:rgba(27,42,124,.28); --ink-scrim:rgba(20,24,33,.72); /* neutral, over media thumbnails */ --ink-scrim-strong:rgba(20,24,33,.55); /* ---------- Hero ---------- The cyan lifts the second half of the headline off the veil. It is its own token rather than the accent gold, which at 3.4:1 over the veil is not a colour to set a headline in; this is 8.3:1. */ --hero-highlight:#22d3ee; --hero-badge-ink:#ffb37a; /* ---------- Shape ---------- */ --radius-s:6px; --radius:12px; --radius-l:20px; --shadow-s:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); --shadow-m:0 4px 8px -2px rgba(16,24,40,.08), 0 12px 24px -6px rgba(16,24,40,.10); --shadow-l:0 12px 24px -8px rgba(16,24,40,.12), 0 28px 56px -12px rgba(16,24,40,.16); --container:1200px; --header-h:96px; --font-sans:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-head:"Poppins","Inter","Segoe UI",Roboto,Arial,sans-serif; } /* -------------------------------------------------------------------------- Client overrides. SiteSetting.brand_primary and .brand_accent are written into a