/* Cart, checkout, order-complete and account pages — shared by every theme. Colours and fonts come from the active theme's CSS custom properties (with fallbacks for the internal base theme). Linked from the pages themselves and from the header partial. */ :root { --c-primary: var(--color-primary, #0f172a); --c-accent: var(--color-accent, #4f46e5); --c-bg: var(--color-background, #ffffff); --c-text: var(--color-text, #0f172a); --c-line: color-mix(in srgb, var(--c-text) 12%, transparent); --c-line-strong: color-mix(in srgb, var(--c-text) 25%, transparent); --c-soft: color-mix(in srgb, var(--c-text) 5%, var(--c-bg)); --c-muted: color-mix(in srgb, var(--c-text) 62%, var(--c-bg)); --c-accent-soft: color-mix(in srgb, var(--c-accent) 12%, var(--c-bg)); --c-ok: #15803d; --c-ok-bg: #dcfce7; --c-warn: #b45309; --c-warn-bg: #fef3c7; --c-danger: #b91c1c; --c-danger-bg: #fee2e2; --c-info: #0369a1; --c-info-bg: #e0f2fe; --c-radius: 14px; --c-radius-sm: 10px; --c-shadow: 0 10px 30px color-mix(in srgb, var(--c-text) 8%, transparent); } /* The *derived* tokens are restated on `body`, and that is not a duplicate of the block above. A custom property's `var()`s resolve against the element the property is declared on, so a token mixed in `:root` is mixed against ``'s values — while every theme re-points the palette from `body.theme-`, one element lower. Each theme restates five of these six by hand; `--c-accent-soft` is the one none of the six ever did, so on all six it stayed `mix(accent 12%, var(--color-background))` — the mode-static legacy setting — and rendered a near-white panel in dark mode under `--c-text` ink that *does* follow the palette. Ratio 1.03 on the account nav's current item, the applied-discount pill, the download box and the cookie panel: the menu item you were standing on was the one you could not read. Declared on `body` at (0,0,1) so a theme's own `body.theme-` block still wins. */ body { --c-line: color-mix(in srgb, var(--c-text) 12%, transparent); --c-line-strong: color-mix(in srgb, var(--c-text) 25%, transparent); --c-soft: color-mix(in srgb, var(--c-text) 5%, var(--c-bg)); --c-muted: color-mix(in srgb, var(--c-text) 62%, var(--c-bg)); --c-accent-soft: color-mix(in srgb, var(--c-accent) 12%, var(--c-bg)); --c-shadow: 0 10px 30px color-mix(in srgb, var(--c-text) 8%, transparent); } [x-cloak] { display: none !important; } /* Accessibility utilities the *shared* partials depend on (the search form's label, the switchers' labels, the skip link in the page shell). They live here, in the stylesheet every theme loads, because a theme that forgot them did not merely look plain — it printed "Search products" and "Skip to content" as visible body text on every page. Wrapped in :where() so they carry zero specificity and any theme's own rule still wins. */ :where(.sr-only) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :where(.skip-link) { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: 0.6rem 1rem; border-radius: var(--c-radius-sm); background: var(--c-primary); color: var(--c-bg); font-weight: 600; text-decoration: none; } :where(.skip-link):focus { top: 1rem; } /* ...but zero specificity also loses to a theme's own blanket anchor rule, and every theme has one: `body.theme- a { color: inherit }` (0,2,1) beat `:where(.skip-link)` (0,0,0), so the link took the body's ink on a background that *is* the body's ink. Ratio 1.00 — the skip link was invisible on atelier and marquee at the one moment it exists, when a keyboard user has just tabbed onto it. Restated here at a specificity that clears that rule, and on :focus because that is the only time it is on screen. A theme that wants its own goes one higher, from `body.theme- .skip-link:focus`. */ a.skip-link:focus, a.skip-link:focus-visible { background: var(--c-primary); color: var(--c-bg); } /* The announcement bar is the theme's to colour (every one of them styles `.announcement`), but an announcement that links somewhere is new, and no theme has a rule for the anchor inside it. Every theme's blanket `body.theme- a { color: inherit }` already gives it the bar's own ink; this only makes it look like a link. */ .announcement a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* A link inside a sentence is only a link if it looks like one. Every theme opens with `body.theme- :where(a) { color: inherit; text-decoration: none }`, which is right for a menu entry, a product card and a footer column — there, position is what says "link" — and wrong for a run of text, where nothing else does. So "By placing this order you agree to our Terms and conditions…", "Already have an account? Sign in", the cookie notice's links out and a merchant's own prose all read as plain words in a colour a palette may well have made identical to the ink around them. Scoped to prose: a paragraph, a list item or a definition inside one, plus the rich-text containers where a merchant's own words live. `:where(a)` carries no specificity, so one class is enough to beat it — the leading `body` is there because a theme may reach the same anchor at (0,2,1) and this has to win that too. Anything that is a *control* wearing an anchor opts out by class. `.text-link` does not: "Already have an account? Sign in" is the same sentence case, and the class is only left alone where it stands on its own in a card or a table row, which is not a run of text and is not matched here. */ body :is(p, li, dd) a:not(.btn):not(.btn-outline):not(.btn-accent):not(.pill):not(.ck-btn), body :is(.product-description, .lesson-body, .policy-doc, .ck-page, .rich-text) a:not(.btn):not(.text-link) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: from-font; } /* ---- Page scaffold ---------------------------------------------------------------------- */ .commerce-page { padding: clamp(2rem, 5vw, 3.5rem) 0; } .commerce-page > .container + .container { margin-top: 2rem; } .page-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .page-head h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); } /* `body `: a theme's `p { margin: 0 }` is (0,1,2) and beat the bare rule, so every account page's standfirst sat on its heading. `stacked-text` asks this of a heading since it could not before. */ body .page-head p { color: var(--c-muted); margin-top: 0.35rem; } .c-muted { color: var(--c-muted); } .c-small { font-size: 0.875rem; } .c-flow > * + * { margin-top: 1rem; } .notice { padding: 0.75rem 1rem; border-radius: var(--c-radius-sm); font-size: 0.925rem; border: 1px solid transparent; } .notice-ok { background: var(--c-ok-bg); color: var(--c-ok); } .notice-warn { background: var(--c-warn-bg); color: var(--c-warn); } .notice-danger { background: var(--c-danger-bg); color: var(--c-danger); } .notice-info { background: var(--c-info-bg); color: var(--c-info); } .notice ul { margin: 0; padding-left: 1rem; } .messages-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; } /* Django's flash messages, emitted by `base.html` for every storefront page and by the delivery checkout step. `.store-messages`, `.alert` and `.alert-*` were all defined in exactly one place: `static/css/dashboard.css`. So a message that a discount code was rejected, or that an address was saved, printed as a bare paragraph in the page's body ink — on all seven themes, wherever a view redirected rather than rendering its own copy. The signal is carried in the **border**, and the text stays `--c-text` on `--c-soft`, which is legible by construction — the same conclusion the pay screens reached. `.notice-*` and `.pill-*` below still take a status colour on a tint of itself, which is the pairing that measured 2.74:1 to 3.85:1 on the old palettes and 1.51:1 on the one theme that never re-pointed `--c-warn-bg`. **That is no longer true**: rebuilding the palettes fixed it, and all four pairs now measure 4.51:1 or better on all seven themes (`tests/themes/test_status_contrast_browser.py`). Left as they are, because a component that passes is not a component to rewrite — but the border-and-body-ink shape above is still the safer one for anything new, since it cannot be broken by a palette change. */ .store-messages { display: grid; gap: 0.5rem; margin-block: 1.25rem 0.5rem; } .alert { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--c-line-strong); border-left-width: 3px; border-radius: var(--c-radius-sm); background: var(--c-soft); color: var(--c-text); font-size: 0.925rem; } .alert-success { border-left-color: var(--c-ok); } .alert-info { border-left-color: var(--c-accent); } .alert-warning { border-left-color: var(--c-warn); } .alert-error, .alert-danger { border-left-color: var(--c-danger); } .pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: capitalize; background: var(--c-soft); color: var(--c-muted); } .pill-ok { background: var(--c-ok-bg); color: var(--c-ok); } .pill-warn { background: var(--c-warn-bg); color: var(--c-warn); } .pill-danger { background: var(--c-danger-bg); color: var(--c-danger); } .pill-info { background: var(--c-info-bg); color: var(--c-info); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; } /* A text link. `.btn-link` used to be a second name for this, defined here at weight 600 while every theme defines `.text-link` at its own weight and size — so the cart had both on one screen and Addresses used one while the order beside it used the other. Two names, two renderings, adjacent tabs of the same account. One name now. Only the