@charset "UTF-8"; /* ===================================================================== MCO Boutique — one stylesheet, no build step. Order: tokens → fonts → reset → primitives → storefront → admin → print RTL is handled entirely with CSS logical properties (margin-inline, padding-inline-start, inset-inline-start, text-align:start). There is no second stylesheet and no [dir="rtl"] override block: setting dir="rtl" on flips the whole layout. Any new rule must use logical properties for the same reason. ===================================================================== */ /* ---------- tokens -------------------------------------------------- The site ships BOTH themes. Dark is the default and is Change Order 1 §1's palette unchanged; light is a second set of the same token names. How a theme is chosen, in order: 1. `data-theme="light"|"dark"` on , written by hydrate() from the `mco_theme` cookie — so the correct theme is in the very first byte of HTML and there is never a flash of the wrong one. The CSP is script-src 'self' with no nonces (security.php explains why), so the usual inline "set the theme before paint" script is not available to us; the cookie placeholder does the same job without one, and works with JavaScript switched off. 2. No attribute -> prefers-color-scheme, i.e. the operating system. The toggle in the header writes the cookie and flips the attribute at the same time, so switching is instant and survives the next request. TWO THINGS TO KNOW BEFORE EDITING: a. The light block below is written TWICE — once under prefers-color-scheme: light for visitors who have expressed no choice, once under [data-theme="light"] for visitors who have. A media query cannot be OR-ed with an attribute selector, so the duplication is unavoidable. **Keep the two lists identical.** b. --band (header, footer, USP strip, admin top bar) stays DARK in both themes, and --on-band therefore stays light in both. It is the club's brand strip, not page furniture, and holding it still keeps every rgba(255,255,255,…) hover and hairline that sits on it correct in both themes. If the client wants a light header, that is the one token to change — and then those rules need revisiting. CO1 §1 split two token roles apart rather than renaming in place, because the change order describes a dark site while the build it modified was a light one: --ink / --paper the page ground --text what --ink used to mean where it meant "text" --band what --ink used to mean where it meant "the dark strip behind the header, footer and USP row" --on-band text on that strip --on-gold text on a gold chip, which must stay dark That split is what made a second theme cheap: only the ground, the text and the hairlines move between themes. Recorded in README.md. ------------------------------------------------------------------- */ :root { /* --- theme-independent ------------------------------------------- */ /* brand — CO1 §1 */ --gold-1: #C9A24B; --on-gold: #231C18; /* text on a gold chip: dark in both themes */ /* The brand strip. Dark in both themes — see (b) above. */ --band: #1B1512; --on-band: #F4EEE6; /* Text on the brand red and on the error red. --on-band is a warm off-white, and on #CC3232 that lands at 4.48:1 — a hair under AA for body text. Pure white on the same red is 5.2:1, so the fix is the text, not CO1 §1's brand colour. --on-err has to flip: the dark theme's --err is a pale pink that needs dark text on it, the light theme's is a deep red that needs white. */ --on-red: #FFFFFF; /* Gold ON the strip. --gold-2 darkens to bronze in light mode so it can be read on a light page; that same bronze on the near-black strip is 3.4:1 and fails. Anything sitting on --band uses this instead. */ --gold-on-band: #D4AF6A; /* type */ --font-display: "MCO Display", "Oswald", "Arial Narrow", Impact, sans-serif; --font-body: "MCO Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-ar: "MCO Arabic", "Cairo", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; /* rhythm */ --wrap: 1180px; --gap: 1.25rem; --radius: 10px; --radius-lg: 16px; /* --- dark theme, the default (CO1 §1) ---------------------------- */ --red-1: #CC3232; --red-2: #AD2323; --gold-2: #D4AF6A; /* prices, links, accents ON THE GROUND */ /* ground */ --ink: #231C18; --paper: #231C18; --surface: #2C2420; --surface-2: #362D28; /* Image wells: the ground behind a product photo, a gallery frame or a not-yet-loaded placeholder. Its own token because a photo shot on white wants a different backdrop from a page panel, and because these were the hard-coded creams that punched light holes in the dark build. */ --well: #2C2420; --well-2: #362D28; /* The ground inside a text field. It was --band, which is right on a dark site (a shade below --surface) and wrong on a light one, where --band stays near-black and turned every input into a black box. */ --field: #1B1512; /* gold-tinted dividers, per the change order */ --line: rgba(212, 175, 106, .22); --line-strong: rgba(212, 175, 106, .38); /* type colours */ --text: #F4EEE6; --text-muted: #C9BFB4; --muted: #C9BFB4; --muted-2: #9C9088; /* status. The tints are translucent rather than pastel: a pale mint block on a #231C18 page reads as a hole punched in the design. */ --ok: #6DD39B; --ok-bg: rgba(109, 211, 155, .12); --warn: #E3B457; --warn-bg: rgba(227, 180, 87, .12); --err: #F2827F; --err-bg: rgba(242, 130, 127, .12); --on-err: #231C18; /* Two more status hues the nine pills of CO1 §3 need: "in delivery / shipped" and "returned". They were hard-coded pastels, which is fine on a dark ground and unreadable on a light one. */ --info: #8FBDF0; --info-bg: rgba(124, 174, 232, .16); --ret: #E8A09E; --ret-bg: rgba(242, 130, 127, .12); /* Shadows on a dark ground do almost nothing, so elevation is carried by the surface steps and the gold hairlines instead; these stay for the few places (toast, modal, popovers) that float above content. */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .28); --shadow-2: 0 10px 34px rgba(0, 0, 0, .5); --focus: 0 0 0 3px rgba(204, 50, 50, .35); /* Tells the browser to paint its OWN widgets to match — scrollbars, the