/* ========================================================================== tokens/theme-neo-brutalism.css — THEME SKIN: NEO-BRUTALISM (Micro-prompt 33) -------------------------------------------------------------------------- Selected by `data-theme="neo-brutalism"` on , which js/theme/theme-engine.js sets from the `zan_theme` setting. Linked after theme-default.css so it wins on source order wherever specificity ties. HOW THIS FILE WORKS — AND WHAT IT PROVES It overrides LAYER 1 (structure) and LAYER 2 (semantic colour) only. It never names a component. Every one of the 225 aliases in components.css is a `var()` reference, so re-pointing the primitives re-skins all of them and every rule that consumes them. If a component still looked like the default theme under this skin, the fault would be a raw value in that component's own CSS — which is exactly the check Micro-prompt 33 exists to run. The gaps it found are listed in ZANMARKETHTML_BUILD_LOG.md §19. THREE BLOCKS, AND WHY THEY ARE SHAPED THIS WAY 1. `:root[data-theme="neo-brutalism"]` mode-independent: radii, shadows, type weights, the Bootstrap geometry bridge. 2. `...:not([data-mode="dark"])` light colours. 3. `...[data-mode="dark"]` dark colours. The light block is scoped with `:not([data-mode="dark"])` deliberately. theme-default.css's dark block is `:root[data-mode="dark"]` — specificity 0-2-0, the same as a plain `:root[data-theme="neo-brutalism"]`. With both matching in dark mode, source order alone would decide, and the light colours would bleed into dark. Excluding dark from the light block removes the tie entirely instead of relying on link order. BORDERS AND SHADOWS ARE INK `--color-border` and `--color-border-strong` become the text colour, so every alias built on them — card, header, input, dropdown, table, divider, product card — turns into a hard ink rule in one move. Shadows are hard offsets in that same ink, and because `--color-text` flips per mode they are ink-on-paper in light and paper-on-ink in dark. That is an adjustment, not a blind inversion. GRADIENTS AND TRANSLUCENCY ARE GONE `--hero-bg-to` is pinned to `--hero-bg-from` so the hero's 135° gradient resolves to a flat fill; the photo scrim becomes a hard two-stop split instead of a soft fade; the brand wash over the hero art is switched off; and the on-brand chrome (app-bar rule, bottom-nav border, hero rule, hero ghost button) goes from translucent white to solid white. ========================================================================== */ /* ============================================================ STRUCTURE ==== */ /* Mode-independent. theme-default.css's dark block declares no radius, shadow or type weight, so these compete only with base.css's `:root` (0-1-0) and win on specificity — no `:not()` guard needed here. */ :root[data-theme="neo-brutalism"] { /* ---- radii: sharp, everywhere --------------------------------------- */ --radius-none: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; /* Squares the search pill, count badges, hero CTAs, hero pagination dots and the product card's wishlist / add-to-cart buttons — all of which consume this token rather than a literal 50%, so they follow. */ --radius-pill: 0; /* ---- borders: thick, everywhere the card alias is consumed ----------- `--card-border-width` (new in Micro-prompt 33) is the token the card rules read instead of a literal `1px`. `--bs-border-width` does the same job for every Bootstrap component and `.border*` utility. */ --card-border-width: 2px; /* ---- elevation: hard offsets, no blur -------------------------------- `var(--color-text)` resolves at the point of use, so the offset is ink in light mode and off-white in dark from one declaration. */ --shadow-xs: 2px 2px 0 var(--color-text); --shadow-sm: 3px 3px 0 var(--color-text); --shadow-md: 4px 4px 0 var(--color-text); --shadow-lg: 6px 6px 0 var(--color-text); --shadow-overlay: 8px 8px 0 var(--color-text); --shadow-pressed: inset 3px 3px 0 var(--color-text); /* ---- type: heavier across the board ---------------------------------- `--font-weight-heading` is consumed by the h1–h6 rule and .zm-hero-title, `--font-weight-body` by --bs-body-font-weight (both added in Micro-prompt 33; see the build log §19.4). */ --font-weight-body: 500; --font-weight-heading: 900; /* ---- layer-3 aliases that carry a raw number, not a reference -------- */ --button-font-weight: 800; --badge-font-weight: 800; --badge-font-size: 0.8125rem; /* ---- hero: flat, hard-edged, no soft blend --------------------------- */ --hero-bg-to: var(--hero-bg-from); /* flattens the 135° gradient */ --hero-art-tint-opacity: 0; /* no brand wash over the photo */ --hero-fade-image: linear-gradient( 90deg, var(--hero-bg-from) 0 58%, transparent 58% ); --hero-fade-image-mobile: linear-gradient( 90deg, var(--hero-bg-from) 0 66%, transparent 66% ); /* ---- on-brand chrome: solid, not translucent ------------------------- */ --appbar-rule: var(--color-brand-primary-contrast); --bnav-border: var(--color-brand-primary-contrast); --hero-welcome-text: var(--color-brand-primary-contrast); --hero-rule: var(--color-brand-primary-contrast); --hero-ghost-border: var(--color-brand-primary-contrast); /* ---- Bootstrap geometry bridge --------------------------------------- Bootstrap's utilities and components take their corners and widths from `--bs-*`, and several of them (`.rounded`, `.card`, `.form-control`, `.dropdown-menu`) apply those with `!important`. Re-pointing the geometry vars is the only way to de-Bootstrap a theme without writing `!important` of our own. Most Bootstrap radius vars derive from `--bs-border-radius`, so zeroing that one cascades; the explicit entries below are the ones Bootstrap hardcodes as literals rather than deriving. theme-default.css owns the `--bs-*` COLOUR projections; this file adds only the geometry it needs. */ --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; /* 5.3.0-alpha naming */ --bs-border-radius-2xl: 0; /* 5.3.x final naming — both set on purpose */ --bs-border-radius-pill: 0; --bs-border-width: 2px; --bs-box-shadow: var(--shadow-md); --bs-box-shadow-sm: var(--shadow-xs); --bs-box-shadow-lg: var(--shadow-lg); --bs-dropdown-border-width: 2px; --bs-modal-content-border-width: 2px; --bs-alert-border-width: 2px; --bs-toast-border-width: 2px; --bs-popover-border-width: 2px; --bs-accordion-border-width: 2px; --bs-list-group-border-width: 2px; } /* ================================================================ LIGHT ==== */ :root[data-theme="neo-brutalism"]:not([data-mode="dark"]) { /* ---- brand: the same red and gold, flattened ------------------------- */ --color-brand-primary: #C60409; --color-brand-primary-rgb: 198, 4, 9; --color-brand-primary-contrast: #FFFFFF; --color-brand-primary-hover: #A50307; --color-brand-primary-subtle: #FFE9E9; --color-brand-primary-raised: #E31E24; --color-brand-primary-deep: #C60409; /* pinned flat, as is --hero-bg-to */ --color-accent: #FADF09; --color-accent-rgb: 250, 223, 9; --color-accent-contrast: #111111; --color-accent-hover: #E8CE08; --color-brand-secondary: #364127; --color-brand-secondary-rgb: 54, 65, 39; --color-brand-secondary-contrast: #FFFFFF; /* ---- surfaces: flat paper -------------------------------------------- */ --color-surface: #FFFFFF; --color-surface-alt: #F2F2F0; --color-surface-sunken: #E8E8E4; --color-surface-inverse: #111111; --color-surface-overlay: rgba(17, 17, 17, 0.55); /* ---- text: harder ink than the default theme's #222222 --------------- */ --color-text: #111111; --color-text-muted: #555555; --color-text-subtle: #8C8C8C; --color-text-inverse: #FFFFFF; --color-link: #111111; --color-link-hover: #C60409; /* ---- borders: ink at every weight ------------------------------------ Everything built on these two tokens inherits the rule. */ --color-border: #111111; --color-border-strong: #111111; --color-border-rgb: 17, 17, 17; /* ---- state ----------------------------------------------------------- */ --color-danger: #C60409; --color-danger-rgb: 198, 4, 9; --color-danger-contrast: #FFFFFF; --color-danger-subtle: #FFE9E9; --color-danger-subtle-hover: #FFCFCF; --color-success: #1F7A3D; --color-success-rgb: 31, 122, 61; --color-success-contrast: #FFFFFF; --color-success-subtle: #E2F4E8; --color-success-subtle-hover: #C6E9D2; --color-warning: #E8C400; --color-warning-rgb: 232, 196, 0; --color-warning-contrast: #111111; --color-warning-subtle: #FFF6D1; --color-warning-subtle-hover: #FFEDAB; --color-info: #0D6EFD; --color-info-rgb: 13, 110, 253; /* ---- Bootstrap colour projections this theme moves ------------------- theme-default.css maps the `-rgb` twins that are `var()` references, so those follow automatically. Only the five it hardcodes as literals need restating here, or `rgba(var(--bs-*-rgb), a)` utilities would drift. */ --bs-body-color-rgb: 85, 85, 85; --bs-light-rgb: 242, 242, 240; --bs-dark-rgb: 17, 17, 17; --bs-link-color-rgb: 17, 17, 17; --bs-link-hover-color-rgb: 198, 4, 9; } /* ================================================================= DARK ==== */ :root[data-theme="neo-brutalism"][data-mode="dark"] { /* ---- brand: kept vivid, only the contrast surface flips -------------- */ --color-brand-primary: #E31E24; --color-brand-primary-rgb: 227, 30, 36; --color-brand-primary-contrast: #FFFFFF; --color-brand-primary-hover: #F0353B; --color-brand-primary-subtle: #2A1013; --color-brand-primary-raised: #F0353B; --color-brand-primary-deep: #E31E24; /* still flat */ --color-accent: #FFDD09; --color-accent-rgb: 255, 221, 9; --color-accent-contrast: #111111; --color-accent-hover: #FFE64A; --color-brand-secondary: #4A5837; --color-brand-secondary-rgb: 74, 88, 55; --color-brand-secondary-contrast: #FFFFFF; /* ---- surfaces: flat near-black, not the default theme's blue-grey --- */ --color-surface: #101012; --color-surface-alt: #1B1B1E; --color-surface-sunken: #0A0A0B; --color-surface-inverse: #F5F5F5; --color-surface-overlay: rgba(0, 0, 0, 0.7); /* ---- text: off-white, never pure #fff -------------------------------- */ --color-text: #F5F5F5; --color-text-muted: #A6A6A6; --color-text-subtle: #6E6E6E; --color-text-inverse: #101012; --color-link: #F5F5F5; --color-link-hover: #FFFFFF; /* ---- borders: LIGHT ink --------------------------------------------- Not a blind inversion of the light theme — on a dark surface the hard rule has to be light to read. The offset shadows read `--color-text`, so this makes them light too, from the one structure block. */ --color-border: #F5F5F5; --color-border-strong: #F5F5F5; --color-border-rgb: 245, 245, 245; /* ---- state ----------------------------------------------------------- Danger/success contrast is near-black rather than white here: the badges are small bold text, and black on the lifted red clears 6:1 where white on it does not. */ --color-danger: #F0353B; --color-danger-rgb: 240, 53, 59; --color-danger-contrast: #111111; --color-danger-subtle: #2E1214; --color-danger-subtle-hover: #45201F; --color-success: #3FBF6B; --color-success-rgb: 63, 191, 107; --color-success-contrast: #111111; --color-success-subtle: #10251A; --color-success-subtle-hover: #1B3A28; --color-warning: #FFDD09; --color-warning-rgb: 255, 221, 9; --color-warning-contrast: #111111; --color-warning-subtle: #2A2410; --color-warning-subtle-hover: #3D3418; --color-info: #4DD8EC; --color-info-rgb: 77, 216, 236; /* ---- Bootstrap colour projections, dark values ----------------------- */ --bs-body-color-rgb: 166, 166, 166; --bs-light-rgb: 27, 27, 30; --bs-dark-rgb: 245, 245, 245; --bs-link-color-rgb: 245, 245, 245; --bs-link-hover-color-rgb: 255, 255, 255; } /* =================================================== VENDOR HARDCODES ===== */ /* The only place in this file that names a selector, and it is deliberate. Bootstrap 5.3.0-alpha3 writes the four rules below with literals — two of them with `!important` — instead of routing them through `--bs-*`, so there is no variable to re-point. Overriding them here is the alternative to writing `!important` geometry into shared component CSS, which would change the default theme as well. Every selector is scoped to this theme, so no other theme or mode is touched. These four were not guessed at: they are exactly what the Micro-prompt 33 leakage probe reported after every token-level override was in place — see ZANMARKETHTML_BUILD_LOG.md §19.4. The `--bs-box-shadow*` vars set in the structure block above cover the same utilities on Bootstrap 5.3.0 final, which does read them. */ /* The offcanvas / modal dismiss button. Bootstrap hardcodes .375rem. */ :root[data-theme="neo-brutalism"] .btn-close { border-radius: var(--radius-none); } /* Checkboxes and radios (the category filter sidebar). Bootstrap hardcodes .25em. */ :root[data-theme="neo-brutalism"] .form-check-input { border-radius: var(--radius-none); } /* The page-header banner title. Bootstrap hardcodes `font-weight: 300` on the `.display-*` scale, so the biggest text on every page was the LIGHTEST — the opposite of this theme. There is no `--bs-display-font-weight` variable in 5.3.0-alpha3 to re-point. */ :root[data-theme="neo-brutalism"] .display-1, :root[data-theme="neo-brutalism"] .display-2, :root[data-theme="neo-brutalism"] .display-3, :root[data-theme="neo-brutalism"] .display-4, :root[data-theme="neo-brutalism"] .display-5, :root[data-theme="neo-brutalism"] .display-6 { font-weight: var(--font-weight-heading); } /* The shadow utilities, hardcoded with `!important` in 5.3.0-alpha3. */ :root[data-theme="neo-brutalism"] .shadow-sm { box-shadow: var(--shadow-xs) !important; } :root[data-theme="neo-brutalism"] .shadow { box-shadow: var(--shadow-md) !important; } :root[data-theme="neo-brutalism"] .shadow-lg { box-shadow: var(--shadow-lg) !important; }