/* ---- brand.css ---- */ /* ================================================================ MC KICKBOXING & FITNESS UK — BRAND ================================================================ The club's entire visual identity. Loaded straight after the shared assets/css/style.css, which it overrides; everything else — layout, components, both themes — comes from that shared file and is not copied or edited per client. This is also the file that goes to AMM, so the dynamic pages and this index page are guaranteed to be the same brand. WHERE THESE VALUES CAME FROM ------------------------------------------------------------------ --brand is sampled off the club's FLAT logo (the black-and-red wordmark in their folder), not the chrome badge. The chrome version shades its red from #840000 through to #dd0809 to fake metal, so there is no single colour to take from it; the flat artwork states the brand red once, as #d21e14, and that is what is used here — unaltered, because it already clears AA: ratio(#d21e14, #ffffff) = 5.34 text on the fill AA ratio(#ff5f55, #0a0a0a) = 6.62 accent text, dark theme AA ratio(#9e1009, #f1efea) = 7.22 accent text, light theme AA ratio(#9e1009, #ffffff) = 8.29 accent text, affiliate band ratio(#5a0a06, #ffffff) = 14.18 nav dropdown ground The badge's chrome is the third colour in their identity, and it is deliberately NOT a token. Chrome is a gradient, not a colour; faked with a flat grey it just reads as dead metal. It stays where it belongs — in the logo artwork — and the page uses the template's own neutrals around it. Do not add --brand-bright: it is derived in style.css from --brand-on-dark and --brand-on-light, and setting it here would break the light theme. ================================================================ */ :root { --brand: #d21e14; /* the fill: buttons, ticker, badges, calendar days */ --brand-deep: #5a0a06; /* shadow / gradient partner, and the nav dropdown ground */ --brand-rgb: 210,30,20; /* --brand as r,g,b — every low-alpha brand tint tracks this */ --on-brand: #ffffff; /* text ON a --brand fill. Fixed in both themes. */ --brand-on-dark: #ff5f55; /* accent text on the always-dark hero / CTA / dropdown */ --brand-on-light: #9e1009; /* accent text on light mode and the white affiliate band */ }