/* * This site's tokens. Every value the design spends, declared once. * * ⚠️ THEY USED TO LIVE IN THE FRAMES, AND THE FRAMES DISAGREED. * * Each drawing arrives with its own scale and `mockup-decompose.php frame` * promoted all of it to `html:root` on every page. Two drawings meant two * scales: 28 tokens held different values across the home page's frame and the * fragrance page's, including every step of the type scale and every step of * the space scale. `--text-m` was 1.6rem in one and 1.3rem in the other. * * Nothing broke, because CSS does not break. The alphabet decided: the * fragrance frame sorts last, so the whole site rendered at its scale - and an * article drawn for 1.6rem body text came out at 1.3rem, which is the visible * end of something that had been silent for two drawings. * * ⚠️ THE VALUES BELOW ARE THE FRAGRANCE PAGE'S, deliberately. They are what * the site already renders, so declaring them here changes nothing and settles * the question. Changing one now is a design decision made in one place, which * is what a token is for. * * A frame may no longer declare a token: `mockup-decompose.php` strips them on * promotion, because a value that belongs to the site cannot arrive with a * drawing. */ html:root { /* type stacks */ --font-sans: "Plus Jakarta Sans", system-ui, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* surfaces + lines */ --color-page: var(--white, #ffffff); --color-page-veil: rgba(255, 255, 255, 0.92); --color-surface: var(--white, #ffffff); --color-surface-sunk: var(--base-ultra-light, #fafaf9); /* ⚠️ ACSS's base-semi-light to four decimal places, written as a hex, so * it could not follow the palette. Same colour, now from ACSS. */ --color-surface-sunk-2: var(--base-semi-light, #f4f4f3); --color-surface-hover: var(--base-light, #f7f7f6); --color-border: var(--base-semi-dark, #ececeb); --color-border-soft: #f0f0ef; --color-border-strong: var(--base-dark, #d6d6d3); --color-hairline: var(--base-semi-light, #f4f4f3); --color-track: var(--base-semi-light, #f4f4f3); --color-track-soft: var(--base-light, #f7f7f6); /* text */ --color-text: var(--neutral-dark, #17161a); --color-text-body: var(--neutral-semi-dark, #3d3d45); /* * ⚠️ 4.97:1 AGAINST WHITE. #8a8a94 was 3.42:1, which fails WCAG AA for * body text and was failing on seven pages. * * This value is the one the HOME PAGE's drawing used. Two drawings * disagreed about the same token and the accessible one lost, silently, * because the other file sorted later in the alphabet (D115). */ /* ⚠️ 4.97 on white but 4.43 on a sunk surface, which is where a form label sits. */ --color-text-muted: var(--neutral, #6a6a74); /* * ⚠️ 4.6:1. Faint is a role, not a licence: anything a reader has to read * clears the same floor as everything else. If something needs to recede * further than this, it wants less weight or less size, not less contrast. */ /* ⚠️ 4.62 on white, 4.43 on a sunk surface, which is where a form * label and a quiet note actually sit. 5.12 at #6a6a74. */ --color-text-dim: var(--neutral-light, #74747e); --color-text-quiet: #6f6f79; /* * ⚠️ THE FLOOR, AND SIX TOKENS WERE UNDER IT. * * The scale ran down to 10px and the greys down to 1.75:1, which is a * legitimate thing for a drawing to contain - a designer reaches for a * quieter step and there is always a quieter step. There is not. WCAG puts * body text at 4.5:1 and this project puts it at 12px, so below those two * numbers the steps are not quieter, they are unreadable. * * --text-3xs 1rem -> 1.2rem * --text-2xs 1.05rem -> 1.2rem * --text-xs-2 1.15rem -> 1.2rem * --color-text-dim #a3a3ad 2.50:1 -> #74747e 4.62:1 * --color-text-ghost #c3c3ca 1.75:1 -> #74747e 4.62:1 (token now gone) * * ⚠️ THEY KEEP THEIR NAMES ON PURPOSE. Three type steps now hold one * value and two greys hold another, which looks like waste and is the honest * record: the design asked for five distinctions and the floor allows two. * Deleting the names would push the decision out to every rule that uses * one, and the next drawing would invent them again. * * ⚠️ AND `--color-on-accent-soft` IS NOT THE ACCENT. It is the ink you * put ON `--color-accent-soft`, and it was the accent itself: 3.09:1 on the * pale blue it sits on. Even `--color-accent-ink` only reaches 3.96 there, * because the background is not white. 0.5 lightness gets 5.13. */ --color-on-accent: var(--white, #ffffff); /* accent + status */ --color-accent: var(--primary, oklch(0.62 0.19 258)); --color-accent-hover: var(--primary-hover, oklch(0.56 0.19 258)); --color-accent-soft: var(--primary-light, oklch(0.94 0.05 258)); --color-on-accent-soft: var(--primary-semi-dark, oklch(0.5 0.19 258)); /* * ⚠️ THE ACCENT AS TEXT IS A DIFFERENT COLOUR FROM THE ACCENT AS A FILL. * * `--color-accent` on white is 3.72:1 and needs 4.5. It is fine as a fill with * white on it, which is most of what it does; it fails the moment it is used * for words on a light background, which is what a ghost button and a link * are. `Show more` was failing on every archive. * * This is the palette's own darker blue - the one `--color-accent-hover` * already uses - given a name for its second job rather than a new colour * being invented. 4.77:1 on white. */ --color-accent-ink: var(--primary-hover, oklch(0.56 0.19 258)); /* * ⚠️ THE FILLED BUTTON HAD NO HOVER. Its resting background is * --color-accent-ink and its hover was --color-accent-hover, and those * two are the same value: 0.56, both of them --primary-hover. * --color-accent-hover is a correct hover for --color-accent at 0.62; * it is not one for a button that already sits at 0.56. */ --color-accent-ink-hover: var(--primary-semi-dark, oklch(0.5 0.19 258)); /* * ⚠️ ACSS COLOURS EVERY LINK --primary, AND THIS SITE'S LINKS ARE TEXT. * * Its rule is `color: var(--link-color, var(--primary))`. That fallback is * the extension point: define --link-color and ACSS uses it, with no * override rule and no specificity fight. * * This site's design says `a { color: var(--color-text) }` - a link is text * unless something says otherwise, and `.ov-prose a` is what says otherwise. * ACSS inverted that, which is why card titles, story links and the names in * the account lists all turned blue. They also failed contrast doing it: * --color-accent is 3.72:1 on white, against the 4.5 the mobile gate wants. */ --link-color: var(--color-text); --link-color-hover: var(--color-accent-ink); --color-success: var(--success, oklch(0.72 0.17 152)); /* * ⚠️ 2.31:1 BOTH WAYS ROUND at 0.72: as words on white, and as a fill * under white words. `Same house` and every `2026` in the sidebar. 4.96 at * 0.52, and the lighter one stays what it is for tints and borders. */ --color-success-ink: var(--success-semi-dark, oklch(0.52 0.17 152)); --color-success-soft: var(--success-light, oklch(0.94 0.05 152)); /* ⚠️ 2.90:1 at 0.66, on a token whose NAME is `-text`. 4.96 at 0.52. */ --color-success-text: var(--success-semi-dark, oklch(0.52 0.17 152)); --color-check: var(--success, oklch(0.72 0.17 152)); --color-warning: var(--warning, oklch(0.72 0.17 55)); /* * ⚠️ The amber as TYPE rather than as a fill or a star. 2.36:1 at 0.72, which * is not readable text at any size; 4.62 at 0.52. The card's score wears this * and the star keeps the lighter one, which is the same split every other * `-ink` on this list exists for. */ --color-warning-ink: var(--warning-semi-dark, oklch(0.52 0.17 55)); --color-error: var(--danger, oklch(0.72 0.17 5)); /* * ⚠️ The error red as a FILL under white type: 2.70:1 at 0.72. The * `LIVE POLL` chip wears it. 5.34 at 0.55, and the lighter one stays what it * is for borders and tints. */ --color-error-ink: var(--danger-semi-dark, oklch(0.52 0.17 5)); /* * ⚠️ A LITERAL, BECAUSE ACSS'S DANGER LADDER HAS NO STEP HERE. It runs * 0.52 to 0.15 with nothing between, and 0.15 is a near-black maroon: a * hover that dark reads as a different button rather than a pressed one. * 0.46 is the same 0.06 step the accent pair uses (0.56 -> 0.50), and it * is 7.84:1 under white against the resting 6.04:1. */ --color-error-ink-hover: oklch(0.46 0.17 5); --color-error-hover: var(--danger-hover, oklch(0.66 0.17 5)); /* * ⚠️ THE GREEN HAD NO HOVER STEP, so `.ov-btn--yes` hovered to the colour it * already was. Error has had one since it was written; this is the same line * for success, off ACSS's own ladder rather than a number chosen here. */ --color-success-hover: var(--success-hover, oklch(0.66 0.17 152)); --color-error-soft: var(--danger-light, oklch(0.94 0.05 5)); --color-purple: var(--tertiary, oklch(0.72 0.17 300)); --color-purple-soft: var(--tertiary-light, oklch(0.94 0.05 300)); /* ⚠️ 3.32:1 at 0.66, on a token named `-text`. 5.23 at 0.55. */ --color-purple-text: oklch(0.55 0.17 300); --color-teal: var(--secondary, oklch(0.72 0.14 195)); /* * ⚠️ THE TWO STEPS EVERY OTHER HUE HAS. Accent, success and error each carry * a `-soft` tint and an `-ink` dark; teal carried only the mid tone, so * anything wanting a teal chip had to invent one. Same lightness and chroma * as the rest of the family, hue unchanged. */ --color-teal-soft: var(--secondary-light, oklch(0.94 0.05 195)); /* * ⚠️ 4.05:1 ON `--color-teal-soft` AT 0.52, and ACSS's secondary ladder * jumps 0.52 to 0.25. 0.46 is the same step the danger pair takes, and no * gate reported this one: the only thing wearing it is a "day" chip, which * none of the seventeen checked pages happens to render. */ --color-teal-ink: oklch(0.46 0.14 195); --color-yellow: var(--accent, oklch(0.82 0.15 90)); --color-selection: oklch(0.9 0.09 152); /* pyramid tiers */ --color-tier-top: var(--accent, oklch(0.82 0.15 90)); --color-tier-top-tint: var(--accent-ultra-light, oklch(0.97 0.03 90)); --color-tier-top-line: var(--accent-semi-light, oklch(0.92 0.05 90)); --color-tier-mid: var(--tertiary, oklch(0.72 0.17 300)); /* ⚠️ 2.64:1 as a fill under white type: the reply count on a thread. */ --color-tier-mid-ink: var(--tertiary-semi-dark, oklch(0.52 0.17 300)); --color-tier-mid-tint: var(--tertiary-ultra-light, oklch(0.97 0.03 300)); --color-tier-mid-line: var(--tertiary-semi-light, oklch(0.92 0.05 300)); --color-tier-base: var(--warning, oklch(0.72 0.17 55)); --color-tier-base-tint: var(--warning-ultra-light, oklch(0.97 0.03 55)); --color-tier-base-line: var(--warning-semi-light, oklch(0.92 0.05 55)); /* avatar + swatch tints */ --color-avatar-purple: oklch(0.9 0.06 300); --color-avatar-pink: oklch(0.9 0.07 5); --color-avatar-yellow: oklch(0.9 0.07 90); --color-avatar-blue: oklch(0.9 0.07 258); --color-avatar-green: oklch(0.9 0.07 152); --color-star-off: var(--base-semi-light, #f4f4f3); --color-star-glyph-off: #c9c9c6; --color-ring: #b4b4bd; /* the poll's "no" button, left from the trending-poll card */ --color-trend-border-strong: oklch(0.88 0.05 90); /* space */ --space-3xs: 0.2rem; --space-2xs: 0.4rem; --space-2xl: var(--space-xxl, 2.8rem); --space-3xl: 4rem; --space-4xl: 9rem; /* type sizes (1rem = 10px) */ /* * ⚠️ 1.2rem, NOT 1.1. Eleven pixels is below the 12px floor * `check-mobile.js` holds every page to, and it was failing on eight of * them - facet counts, timestamps, captions, the small print of the whole * site. It read as one problem per page and was one value. * * ⚠️ This now equals --text-s, which means the bottom of the scale had a * step nobody could see. Collapsing them properly is a design decision; * leaving two names for one size is the smaller wrong until then. */ --text-2xl: var(--text-xxl, 2.2rem); --text-stat: 3.4rem; --text-stat-l: 3.8rem; --text-title: 3.6rem; /* * ⚠️ THE PAGE TITLE, FLUID, AND IT USED TO BE A CLASS ON ONE HEADING. * * `.ov-article-title` carried the whole treatment - serif, 5.4rem, its own * media query - so a page got the site's title style only by remembering to * ask for it. The fragrance archive did not ask, and rendered its own name at * 22px, smaller than the card titles under it. Three other archives still do * not ask. * * A heading level is a global decision, so it lives in the theme style, and * this is the value it reads. * * ⚠️ AND THE VALUE IS ACSS'S. This was its own `clamp()`, with the same * 36-54px ends as ACSS's `--h1` and a different slope between them, so the * two drew the same title at two sizes depending on which rule won. ACSS's * element rule loads last and always did win on a bare h1; this is the name * the Bricks theme style asks for, and now it asks ACSS. */ --text-h1: var(--h1); --text-display: 7.2rem; /* radii */ --radius-2xs: 0.2rem; /* * ⚠️ NOT var(--radius). ACSS's --radius is 5px, an ABSOLUTE length; this is * 0.3rem, and at this site's 10px root that is 3px. The adapter compares rem * at 16px per rem, read the gap as 0.2px rather than 2px, and let it through. */ --radius-xs: 0.3rem; --radius-s: 0.6rem; --radius-s-3: 0.8rem; --radius-m: 1rem; --radius-m-2: 1.2rem; --radius-m-3: 1.3rem; --radius-m-4: 1.4rem; --radius-l: 1.6rem; --radius-l-2: 1.8rem; --radius-xl: 2rem; --radius-2xl: 2.4rem; --radius-full: 99rem; /* Hover is a colour, set per site like one (D223). */ --hover-ground: var(--primary-ultra-light); --hover-ink: var(--primary-semi-dark); /* * controls + frame * * ⚠️ THREE SIZES, AND THE SCALE HAD TWO WHILE THE DESIGN USED THREE. * * A page's main search bar is not the same control as a button in a toolbar, * and the brands drawing said so: 50px against 30px. With only two sizes the * choice was to shrink the search bar or grow every button on the site, and * both were wrong. `--l` is the large one, for the control a page is ABOUT. * * `check-controls.js` measures one height, one radius and one type size per * BAND. Three bands, three sets of numbers, and a control still cannot invent * its own. */ --control-h: 3rem; --control-h-s: 2.6rem; --control-h-l: 5rem; --control-px: 1.5rem; --control-px-s: 1.2rem; --control-px-l: 1.8rem; /* * The sidebar a faceted browse sits in. * * 300 and not 260: at the narrower width `United States of America` wrapped * to two lines and the panels had no room to breathe. Stated once so the two * archives cannot disagree about it, which they did. */ --width-sidebar: 30rem; --tap-min: 2.4rem; --border-hair: 0.1rem; --border-thick: 0.15rem; --border-mark: 0.2rem; /* * ⚠️ THE SITE'S CONTENT WIDTH, NOT THE DRAWING'S. * * This is `bricks_global_settings.contentWidth`, which is what the builder * lays out against and what every page is actually as wide as. The drawing * said 156rem; the importer appended the real value after it, and stripping * the drawing's token block took that correction with it. */ --width-page: 1280px; --sticky-top: 9.6rem; --shadow-card: 0 0.1rem 0.2rem rgba(20, 20, 30, 0.04); --hatch-l: repeating-linear-gradient(135deg, #f6f6f5 0 0.8rem, #fbfbfa 0.8rem 1.6rem); --hatch-s: repeating-linear-gradient(135deg, #f6f6f5 0 0.6rem, #fbfbfa 0.6rem 1.2rem); /* sample bar widths - presentation only, overridden per row by data-ov-bind-style */ --sample-w-accord: 100%; --sample-w-perf: 80%; --sample-w-season: 94%; --sample-w-poll: 37%; /* ---------------------------------------------- promoted from the component stylesheets, where they were literals. Same values. */ /* ⚠️ 0.063 from --color-accent-ink, so NOT the same blue. pages.css says the control system converged on --color-accent-ink and the header never followed. Converging is a one-line change here, and visible. */ /* was declared on .ov-card--byline, .ov-head and one grid, identically */ /* * ⚠️ NOT `--color-success-ink`, WHICH IS 4.21:1 ON THE SOFT GREEN. The same * correction `--color-on-accent-soft` already carries, one family over: the * ink that reads on white does not automatically read on a tint of itself. * ACSS puts `--success-hover` at 0.472, which is the step this needs, so * this one is a token rather than the literal `--color-error-ink-hover` is. */ --color-on-success-soft: var(--success-hover, oklch(0.472 0.175 152)); /* same three components. Also used bare as the count badge background */ --color-on-error-soft: var(--color-error-ink); } /* ========================================================================== * LIGHT AND DARK (D222). * * `data-ov-scheme` is on because this site's palette switches, and * Bricks' switch sets `data-brx-theme`, which ACSS turns into `color-scheme`. * Each role below is a `light-dark()` pair: the LIGHT half is exactly the * value the block above resolves to today, so the light site does not move * by one step, and the dark half is designed here. * * ⚠️ LITERAL LIGHT HALVES, ON PURPOSE. The ACSS ramps mirror for the design * kit and for drawings, which moved `--base-semi-dark` from a pale grey to a * dark one; every role above that named such a shade would have darkened in * light mode. The light values are the ones those shades held, to four * places. Roles above that already sit on a pair that mirrors (the tints, * the inks, the soft fills) flip with ACSS and are not restated. * * `html:root[data-ov-scheme]` (0-2-1) beats the platform's scheme block * (0-2-0) and the block above (0-1-1). * ========================================================================== */ html:root[data-ov-scheme] { --color-page: light-dark(#ffffff, oklch(0.17 0.006 286)); --color-page-veil: light-dark(rgba(255, 255, 255, 0.92), oklch(0.17 0.006 286 / 0.92)); --color-surface: light-dark(#ffffff, oklch(0.215 0.007 286)); --color-surface-sunk: light-dark(oklch(0.985 0.0013 106), oklch(0.195 0.006 286)); --color-surface-sunk-2: light-dark(oklch(0.967 0.0013 106), oklch(0.25 0.007 286)); --color-surface-hover: light-dark(oklch(0.976 0.0013 106), oklch(0.26 0.008 286)); --color-border: light-dark(oklch(0.943 0.0013 106), oklch(0.32 0.008 286)); --color-border-soft: light-dark(#f0f0ef, oklch(0.28 0.008 286)); --color-border-strong: light-dark(oklch(0.875 0.0041 106), oklch(0.44 0.01 286)); --color-hairline: light-dark(oklch(0.967 0.0013 106), oklch(0.27 0.008 286)); --color-track: light-dark(oklch(0.967 0.0013 106), oklch(0.3 0.008 286)); --color-track-soft: light-dark(oklch(0.976 0.0013 106), oklch(0.26 0.008 286)); --color-text: light-dark(oklch(0.203 0.008 286), oklch(0.96 0.004 286)); --color-text-body: light-dark(oklch(0.363 0.0137 286), oklch(0.88 0.006 286)); --color-text-muted: light-dark(oklch(0.528 0.0155 286), oklch(0.77 0.01 286)); --color-text-dim: light-dark(oklch(0.562 0.0153 286), oklch(0.75 0.01 286)); --color-text-quiet: light-dark(#6f6f79, oklch(0.75 0.01 286)); /* The accent as words goes lighter on dark, and the ink on a filled button (--color-on-accent, --white) flips to dark with it. */ --color-on-accent: var(--white, #ffffff); --color-accent-ink: light-dark(oklch(0.56 0.19 258), oklch(0.74 0.14 258)); --color-accent-ink-hover: light-dark(oklch(0.5 0.19 258), oklch(0.8 0.11 258)); --color-accent-soft: var(--primary-light, oklch(0.94 0.05 258)); --color-on-accent-soft: var(--primary-semi-dark, oklch(0.5 0.19 258)); --color-success-ink: var(--success-semi-dark, oklch(0.52 0.17 152)); --color-warning-ink: var(--warning-semi-dark, oklch(0.52 0.17 55)); --color-error-ink-hover: light-dark(oklch(0.46 0.17 5), oklch(0.82 0.1 5)); --color-purple-text: light-dark(oklch(0.55 0.17 300), oklch(0.8 0.1 300)); --color-teal-ink: light-dark(oklch(0.46 0.14 195), oklch(0.8 0.09 195)); --color-selection: light-dark(oklch(0.9 0.09 152), oklch(0.4 0.09 152)); --color-avatar-purple: light-dark(oklch(0.9 0.06 300), oklch(0.4 0.08 300)); --color-avatar-pink: light-dark(oklch(0.9 0.07 5), oklch(0.4 0.08 5)); --color-avatar-yellow: light-dark(oklch(0.9 0.07 90), oklch(0.4 0.07 90)); --color-avatar-blue: light-dark(oklch(0.9 0.07 258), oklch(0.4 0.08 258)); --color-avatar-green: light-dark(oklch(0.9 0.07 152), oklch(0.4 0.08 152)); --color-star-off: light-dark(oklch(0.967 0.0013 106), oklch(0.32 0.008 286)); --color-star-glyph-off: light-dark(#c9c9c6, oklch(0.5 0.01 286)); --color-ring: light-dark(#b4b4bd, oklch(0.5 0.01 286)); --color-trend-border-strong: light-dark(oklch(0.88 0.05 90), oklch(0.45 0.06 90)); --color-on-success-soft: light-dark(oklch(0.472 0.175 152), oklch(0.84 0.1 152)); /* The gender tints are Bricks palette colours, fixed; their dark twins here. */ --color-gender-female: light-dark(#fbe4ef, oklch(0.32 0.07 350)); --color-gender-female-ink: light-dark(#d11e6c, oklch(0.7 0.17 355)); --color-gender-female-on: light-dark(#8a1250, oklch(0.86 0.08 350)); --color-gender-male: light-dark(#dcecf8, oklch(0.32 0.06 245)); --color-gender-male-ink: light-dark(#1f7ac9, oklch(0.72 0.13 245)); --color-gender-male-on: light-dark(#0e4f78, oklch(0.86 0.07 245)); --color-gender-unisex: light-dark(#dff0e7, oklch(0.32 0.05 165)); --color-gender-unisex-ink: light-dark(#159c84, oklch(0.72 0.12 170)); --color-gender-unisex-on: light-dark(#0d5c39, oklch(0.86 0.07 160)); } /* ========================================================================== * THE SITE FOUNDATION, ADOPTED 2026-08-30. * * ⚠️ THESE 4 RULES WERE IN A PROMOTED FRAME, and one of them is the * typeface of the whole site. site-frame-mock4.css, derived from a drawing of * a fragrance page nobody has built, was the only file on this install * declaring a font-family for body. Held back and measured, the home page * changed in 222 places, the article in 157 and each archive in about 100, * almost all of it one inherited font falling back to system-ui. * * They are here rather than in modules.css because nothing else styles a bare * element, so moving them earlier in the cascade cannot stop an override that * something was relying on. * ========================================================================== */ html { font-size: 62.5%; } /* ========================================================================== * HEADINGS. * * ⚠️ THE ROOT IS 62.5% AND NOTHING SET h2 TO h6, so every heading with no class * of its own inherited a BROWSER DEFAULT computed against a 10px root: * * h2 16px h3 14px h4 14px h5 13px h6 12px * * h3 and h4 identical, h6 the size of body copy, and no hierarchy anywhere. It * reads as a styling bug on every page that ever writes a bare heading, and the * only reason it was survivable is that this site's headings nearly all carry a * class that sets a size. * * ⚠️ A CLASS STILL WINS. `.ov-sec-title`, `.oview-footer__heading` and the rest * name a size, and one class beats a bare element selector - so this changes * unstyled headings and nothing else. * ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; text-wrap: balance; } /* * ⚠️ INSTRUMENT SERIF HAS NO BOLD, SO 700 ASKS THE BROWSER TO INVENT ONE. * * The family ships 400 normal and 400 italic and nothing else. At font-weight * 700 the browser synthesises a fake bold by smearing the outlines, which is * the thick, slightly wrong h1 on every archive. The rule above has always * said 700; it never showed, because Bricks' theme style declares `h1 { * font-weight: 400 }` inline and, at equal specificity, came last. * * ACSS now declares `h1 ... { font-weight: var(--heading-font-weight) }` and * its stylesheet loads after that inline block, so 700 started winning and the * synthetic bold appeared. Three declarations, all 0-0-1, decided by load * order - which is why this needs 0-0-2 rather than another 700 somewhere. * * h2 to h6 stay at 700: they are set in Plus Jakarta Sans, which really does * ship a 700. */ html h1 { font-weight: 400; } /* * ⚠️ ACSS'S HEADING SCALE, NOT A SECOND ONE. * * These read `--text-3xl`, `--text-2xl`, `--text-xl-2` and the rest: a heading * scale of the site's own, sitting under ACSS's `h1 { font-size: var(--h1) }` * and losing to it on load order on every page. Two scales for one element, * one of which never rendered, is how the next person edits the wrong one. * * `acss-roles.json` already sets `h1-min` to `h5-max` to this site's sizes, so * the numbers are the same numbers. What is left here is the floor for ACSS * switched off, and the `:root` block at the end of this file carries it. */ h1 { font-size: var(--h1); line-height: 1.05; } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } h4 { font-size: var(--h4); } h5 { font-size: var(--h5); } h6 { font-size: var(--h6); } body { margin: 0; background: var(--color-page); font-family: var(--font-sans); color: var(--color-text); -webkit-font-smoothing: antialiased; } a { color: var(--color-text); text-decoration: none; } /* * ⚠️ NOT ON ANYTHING THAT PAINTS ITS OWN BACKGROUND. `a:hover` scores 0-1-1 and * a button's own colour rule scores 0-1-0, so this repainted the label of every * button that happens to be a link - to --color-accent-ink, which is exactly * the filled button's background. White text turned blue on blue and the label * disappeared on hover. It looked like a broken button; it was a link rule * reaching too far. * * ⚠️ AND IT REACHED PAST THE FIRST FIX. A filter chip is the same thing wearing * a different word: a link drawn as a filled control, `.oview-chip:hover` at * 0-2-0 losing to this at 0-2-1, and "Female" vanishing into its own blue the * moment a reader pointed at the thing they wanted to remove. * * ⚠️ AND THE THIRD ONE ARRIVED, WHICH IS WHERE THE LIST OF NAMES STOPS. The * account page's collection tabs are the fragrance page's collection buttons * worn by links, and they went blue on hover for the third time in one file's * history. Two names was a pattern; three is a rule stated wrongly. * * `:not([role])` is the rule stated properly: a link that declares a control * role IS a control, whatever it is called, and prose links never carry one. * The two names stay because a `.oview-btn` and a `.oview-chip` do not declare * a role and it would be wrong to make them - they are already anchors doing * what anchors do. */ a:hover:not([class*="btn"]):not([class*="chip"]):not([role]) { color: var(--color-accent-ink); } /* * Handed to ACSS. * * These names exist in ACSS too, so they cannot be aliased: `--text-m: * var(--text-m)` is a cycle. They are declared here on `:root` rather than * `html:root` on purpose. `:root` ties with ACSS's own declaration and loses * on load order, so ACSS drives them - and if ACSS is ever switched off, * these values apply again instead of the tokens vanishing. * * Do not move these back into the html:root block. That block wins outright, * and the site would silently stop following the scale. */ :root { --text-xs: 1.2rem; --text-m: 1.3rem; --text-l: 1.4rem; --text-xl: 1.6rem; --space-xs: 0.6rem; --space-s: 0.8rem; --space-m: 1rem; --space-l: 1.5rem; --space-xl: 2rem; --space-xxl: 2.8rem; /* The heading scale, for the same reason and in the same place. */ --h1: clamp(3.6rem, 2.4vw + 2.6rem, 5.4rem); --h2: 3.2rem; --h3: 2.2rem; --h4: 1.8rem; --h5: 1.6rem; --h6: 1.4rem; } /* ========================================================================== * ONE GUTTER PER EDGE. * ========================================================================== */ /* * ⚠️ TWO GUTTERS WERE STACKING, AND ONLY ONE OF THEM IS RESPONSIVE. * * Bricks' theme style sets `.brxe-container { padding-inline: var(--space-3xl) }` * - a flat 40px - and ACSS pads every top-level section with `var(--gutter)`, * which runs 18px at 390 up to 80px at 1366. They add up: 58px each side on a * 390px phone, leaving 274px of usable width, and the same again at the far * end of the desktop range. * * The section's gutter is the one to keep. It is responsive, it is set in one * place for every site on the platform, and it already applies to the header * wrapper - so keeping it is what makes the bar and the page agree. * * Scoped to a container that is a DIRECT CHILD of a section, because that is * exactly the set ACSS has already inset. A container nested deeper is inside * something else's padding and keeps its own. */ section > .brxe-container { padding-inline: 0; }