/** * Bodybuilding - Main Stylesheet * * Clean modern design system - light mode, mobile-first. * Matches strongman design system exactly with bb- prefix. * All styles scoped to .bb-app to prevent WordPress conflicts. * * @package Bodybuilding * @since 2.0.0 */ /* ========================================================================== 0. BRAND FONTS - Archivo + IBM Plex Mono (self-hosted, no external request) Replaced DM Sans on 2026-07-29 with the Iron & Bone design. Both faces are OFL and are served from public/fonts/ rather than fonts.googleapis.com the way the design prototype does. The Foxiz theme already opens a connection to Google Fonts, so this is not about avoiding a new third party - it is about not adding two more render-blocking families to a request the plugin does not control. Same call already made for the flag images. Archivo is the VARIABLE cut and carries two axes in one file: weight 400-800 and width 75-125%. The width axis is load-bearing, not a nicety - every display heading in the design sets font-stretch between 84% and 90%, and a static cut would silently render those at 100% and reflow the hero. IBM Plex Mono is static at 400/500/600 because every figure in the design picks one of exactly those three. It is the face that makes placements line up: see --bb-font-mono and the tabular-nums base rule. latin-ext covers accented athlete names (Bjornsson, Krizo, Choopan). font-display:swap keeps first paint unblocked. ========================================================================== */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 75% 125%; font-display: swap; src: url('../fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 75% 125%; font-display: swap; src: url('../fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plex-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Every figure lines up. This is the single rule that makes a column of placements read as a record rather than as prose, and it is why the design puts IBM Plex Mono on numbers everywhere. Scoped to .bb-app so the theme's own type is untouched. */ .bb-app { font-variant-numeric: tabular-nums; } /* * Full-bleed page ground. * * .bb-app is 356px wide inside a 375px viewport, so painting only the wrapper * leaves a white gutter down both sides of every phone screen and the bone * ground reads as a stripe rather than a page. * * A fixed layer rather than a body rule, because every design token including * --bb-bone is declared on .bb-app and nowhere else. `body { background: * var(--bb-bone) }` resolves against a scope that has never heard of the token * and paints nothing, and hardcoding the hex would put a literal back into the * one file the token ratchet guards. This keeps the single token owner. */ /* * BOUND TO .bb-app, NOT FIXED TO THE VIEWPORT. This layer was position:fixed with * inset:0, and it painted over the theme footer on every plugin page. * * Why a z-index:-1 layer ended up ON TOP of anything: .bb-app is position:static, so * the pseudo joins the nearest ancestor stacking context, which is the theme's * `.site-wrap { z-index: 1 }`. The footer sits OUTSIDE .site-wrap, so the whole * site-wrap layer paints above it - and a fixed inset:0 sheet inside that layer * therefore covered the footer at every scroll position, at full viewport size. The * -1 only ordered it behind .bb-app's own content, never behind the footer. * * It hid from every diagnostic: pointer-events:none kept elementFromPoint returning * the footer's own links, and because the rule targets .bb-app it never appeared when * enumerating rules that match footer elements. The footer measured perfectly - right * height, right colour, 912 characters of innerText - and simply had a cream sheet * painted over it. * * Absolute + full-bleed keeps the reason the layer exists. .bb-app is 356px wide in a * 375px viewport, so painting only the wrapper leaves a white gutter down both sides of * a phone screen. This still reaches both viewport edges, and still resolves --bb-bone * in the scope that owns it, so the token stays in one place and no hex literal comes * back into the file the ratchet guards. What it cannot do any more is extend past * .bb-app's own box, which is where the footer begins. */ .bb-app { position: relative; } .bb-app::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-50vw + 50%); width: 100vw; max-width: 100vw; z-index: -1; background: var(--bb-bone); pointer-events: none; } /* * The plugin owns hiding. Every empty state, panel and toggled block in here is * shown and hidden with the `hidden` attribute, and the UA rule for it is plain * `display: none`, which loses to any author `display` declaration. Components * like .bb-empty-state (flex) and .bb-compare-h2h-grid (grid) declare one, so * `hidden` only worked because the Foxiz theme's main.css happens to carry a * bare `[hidden] { display: none }` that loads after this file. That is enqueue * order, not a contract: reorder the styles and every hidden block appears. * * Verified in the browser rather than reasoned about. A standalone page with * `.g { display: grid }` plus `hidden` computes `grid`, so the attribute alone is * genuinely not enough. Compare had already hit this and shipped an inline * `#bb-compare-app [hidden] { display: none !important }` patch, which is the same * conclusion reached one route at a time; this replaces it for every route. * * `!important` is deliberate: it has to beat component display declarations, * which is exactly what that inline patch needed too. */ .bb-app [hidden] { display: none !important; } /* * Baseline focus ring for everything focusable inside the plugin. * * 43 :focus-visible rules already existed, one per component, and no baseline. So * every component added since had to remember, and five did not: measured on * /olympia/, .bb-olympia-div-winner, .bb-olympia-year-num-link, * .bb-olympia-open-name, .bb-state-action and .bb-nav-dropdown-trigger all computed * outline-style: none and box-shadow: none, with zero :focus or :focus-visible rules * anywhere in the stylesheet for the first three. A keyboard user tabbing the * results grid - the actual content of the page - got no feedback at all. * * Per-component rules keep winning over this: .bb-app .bb-btn:focus-visible is three * classes against this rule's two-classes-plus-an-element, and this sits near the top * of the file so a later rule also wins any genuine tie. So a component that wants a * different treatment still gets it; a component whose author forgot gets a visible * ring instead of nothing. * * Uses the existing --bb-focus-ring-* tokens rather than new values. * * !important is not laziness here, it is the only thing that works. The Foxiz theme * strips focus outlines with !important of its own, verified by reading the parsed * CSSOM rather than guessing: * * button, input, optgroup, select, textarea { outline: none !important } * button { outline: none !important } * select { outline: none !important } * input[type=text|tel|password|...] { outline: none !important } * input[type=submit], .is-btn, .button, ... { outline: none !important } * * So every button and form control in the plugin had NO keyboard focus indicator at * all, on every route, and no amount of plugin specificity could recover it. That is * why the components which did work were the ones that are anchors or spans with * tabindex, not buttons. A focus indicator must not be silently defeatable, which is * exactly the case !important exists for. */ .bb-app a:focus-visible, .bb-app button:focus-visible, .bb-app summary:focus-visible, .bb-app input:focus-visible, .bb-app select:focus-visible, .bb-app textarea:focus-visible, .bb-app [tabindex]:focus-visible { outline: var(--bb-focus-ring-width) solid var(--bb-focus-ring-color) !important; outline-offset: var(--bb-focus-ring-offset) !important; } .bb-app .bb-trust-panel, .bb-app .bb-filter-state, .bb-app .bb-starter-panel, .bb-app .bb-hero-start { background: var(--bb-surface-raised); border: 1px solid var(--bb-border); border-radius: 6px; box-shadow: none; } .bb-app .bb-trust-panel, .bb-app .bb-starter-panel { display: grid; /* * Two columns need 240px for the second plus a gutter plus this panel's own * 24px of padding on each side. Below roughly 560px that no longer fits, and * the grid held its column anyway: on a 390px screen the panel measured * 354px and its children 475px, hanging 146px past the edge - the largest * single overflow in the sweep. auto-fit collapses to one column instead of * forcing a width the viewport does not have. */ grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; align-items: start; margin: 24px 0; padding: 24px; } /* A grid item defaults to min-width:auto, which is min-content, so it refuses to shrink below its widest unbreakable run and drags the column with it - the column resolved to 475px inside a 354px panel. min-width:0 lets it shrink and the text wrap as it already knows how to. */ .bb-app .bb-starter-panel > * { min-width: 0; } .bb-app .bb-trust-eyebrow, .bb-app .bb-starter-eyebrow { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(217, 139, 74, 0.12); color: #7a5207; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .bb-app .bb-trust-panel h2, .bb-app .bb-starter-panel h2 { margin: 0 0 8px; color: var(--bb-text-primary); /* The card tier. This was clamp(1.25rem, 2vw, 1.65rem), landing on 25.6px - a value on no tier at all, and the last thing keeping a heading off the scale. A panel heading is a card title, and claude-design sets those at 24 flat: a card's own edge already separates it, so it does not need to scale with the viewport the way a page-level section heading does. */ font-size: var(--bb-fs-xl); letter-spacing: normal; } .bb-app .bb-trust-panel p, .bb-app .bb-starter-panel p { color: var(--bb-text-secondary); line-height: 1.65; } .bb-app .bb-trust-list, .bb-app .bb-starter-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .bb-app .bb-trust-list li, .bb-app .bb-starter-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--bb-text-secondary); font-size: 14px; line-height: 1.5; } .bb-app .bb-trust-list li::before, .bb-app .bb-starter-list li::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--bb-primary); box-shadow: 0 0 0 4px rgba(178, 58, 53, 0.1); } .bb-app .bb-filter-state { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 14px 0 24px; padding: 14px 16px; } .bb-app .bb-filter-state-main, .bb-app .bb-filter-state-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .bb-app .bb-state-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border-radius: 999px; background: rgba(34, 28, 24, 0.08); color: var(--bb-navy-mid); font-size: 12px; font-weight: 700; } .bb-app .bb-state-chip--muted { background: var(--bb-gray-100); color: #6e665e; } .bb-app .bb-state-action { display: inline-flex; align-items: center; /* Was 30px, under the plugin's own --bb-touch-min. This is the retry/clear control inside an empty state, so it is the one thing on the surface a visitor needs to hit, and it was the smallest target on the page. */ min-height: var(--bb-touch-min); padding: 6px 14px !important; border: 1px solid var(--bb-border) !important; /* Pill by intent; through the token so it cannot drift from the other pills. */ border-radius: var(--bb-radius-full) !important; background: #fff !important; color: var(--bb-text-primary) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer; transition: border-color 150ms ease, transform 150ms ease; } .bb-app .bb-state-action:hover { border-color: var(--bb-primary) !important; transform: translateY(-1px); } .bb-app .bb-hero-start { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; width: min(720px, 100%); /* * Left, not auto-centred. The hero was built centred and the old 600px content cap * hid it, because a 720px form inside a 600px column simply filled it. Once the cap * came off with the champions board, the form and the path pills centred themselves * under a left-aligned headline, which read as two different layouts stacked. */ margin: 26px 0 18px; padding: 10px; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18); } .bb-app .bb-hero-start input { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: #fff; color: var(--bb-text-primary); font-size: 15px; padding: 0 16px; } .bb-app .bb-hero-paths { display: flex; /* Left, to match the headline and the search box above it. */ justify-content: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .bb-app .bb-hero-path { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9) !important; font-size: 13px; font-weight: 700; } .bb-app .bb-starter-code { margin: 0; padding: 16px; border-radius: 14px; background: var(--bb-navy); color: var(--bb-on-dark); font-family: var(--bb-font-mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-x: auto; } @media (max-width: 760px) { .bb-app .bb-trust-panel, .bb-app .bb-starter-panel, .bb-app .bb-hero-start { grid-template-columns: 1fr; } .bb-app .bb-filter-state { align-items: stretch; flex-direction: column; } } /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ .bb-app, .bb-editorial-post { /* .bb-editorial-post is here because a bound editorial post renders on the THEME's layout, so its article body sits outside any .bb-app scope. Rules written for that body resolved every var() to nothing, and a declaration with an unresolved var is dropped whole - so a border-bottom read as "2px solid " and simply did not paint, silently, while the literal font-size beside it applied. Hosting the tokens on the layout wrapper too is what makes the token layer reachable there. It shares only the tokens: the page-ground .bb-app::before is a separate rule and this wrapper deliberately does not get it. Editorial data-authority system. Near-monochrome warm-paper base with a single restrained oxblood accent. This block is the ONE source of truth for every .bb-app design token (consolidated 2026-06-20 from the two former lower token layers); change a token here and nowhere else. NOTE: .bb-report-modal (defined later) intentionally mirrors these tokens with literal values because it renders on document.body (outside .bb-app scope, so it cannot inherit the vars). Keep that mirror in lockstep when a core token changes. */ /* ---- Iron & Bone base ramp ------------------------------------------- Adopted 2026-07-29 from Claude Design project 426d8189. This is the one place a colour is chosen; every semantic token below resolves to one of these, so no rule outside this block should carry a literal hex. Rationale and the four owner decisions: DESIGN-IRON-AND-BONE.md. There is no blue here, and that is deliberate. UI-72 documented three jobs the old --bb-navy-mid (#12365a) was carrying; reading all 17 design pages retired every one of them: 1. gradient light end -> there are no gradients, dark surfaces are flat ink with a 1px vertical rule texture 2. male gender coding -> DROPPED by owner decision, gender is now labelled text tabs (All / Men / Women) 3. athlete B / series 2 -> ink, opposite the oxblood athlete A Keep public/js/bb-charts.js SERIES_2 in step with --bb-chart-series-2. */ --bb-ink: #221c18; --bb-bone: #faf6ef; --bb-paper: #ffffff; /* Text on dark surfaces. Was a raw #fffdf8 repeated ten times across the file with no owner, which is what the ratchet exists to catch. */ --bb-on-dark: #fffdf8; --bb-tint: #f0e9dc; --bb-tint-2: #e2d8c6; --bb-oxblood: #a8372a; --bb-oxblood-hover: #85291f; --bb-amber: #d98b4a; --bb-amber-dark: #8f5a1e; --bb-amber-deep: #7a4c19; --bb-warm-grey: #5a524a; --bb-warm-grey-2: #6b6259; --bb-moss: #45723f; --bb-moss-dark: #2f5129; --bb-moss-light: #8fbd86; /* Validation only. Deviation B: kept off the brand oxblood so an invalid field never wears the same colour as a link or a first-place badge. */ --bb-danger: #8f2420; /* Dark surface treatment for heroes and headers. The design does not use a gradient at all: it is a FLAT ink field with a barely-there top wash and a 78px vertical rule texture, which is what makes the hero read like ruled ledger paper rather than a hero banner. This exists as a token because nine separate rules used to build the dark surface by hand as `linear-gradient(135deg, var(--bb-navy) 0%, #1a3a5c 100%)` - token for the first stop, hardcoded BLUE for the last. Repointing --bb-navy to ink therefore left every hero running warm ink into blue, which looked worse than before it was touched. One owner. */ --bb-dark-wash: linear-gradient(180deg, rgba(250, 246, 239, 0.05) 0%, rgba(250, 246, 239, 0) 46%), repeating-linear-gradient(90deg, rgba(250, 246, 239, 0.035) 0 1px, transparent 1px 78px); /* ---- Semantic layer (brief DESIGN-IMPLEMENTATION.md §2) --------------- These are the names the brief specifies. Each points at the primitive above that already holds the value, which is ordinary token architecture - a primitive plus a semantic alias is NOT the "one value, two owners" trap. That trap was a LITERAL duplicating a token, as in `var(--bb-navy-mid, #0f3460)`, where the fallback silently disagreed with the token it was backing up. --bb-navy is kept for #221c18 only because 17k lines resolve through it. The brief's own annotation calls it "warm charcoal, no blue", so the honest primitive is --bb-ink and that is what everything resolves to. */ --bb-surface-raised: var(--bb-paper); --bb-surface-sunken: var(--bb-tint); --bb-amber-on-dark: var(--bb-amber); --bb-amber-on-light: var(--bb-amber-dark); --bb-status-ok: var(--bb-moss); --bb-cat-analysis: var(--bb-moss-dark); /* Navy: dark surfaces for headers, heroes, footer. Names kept so the 17k lines of existing rules keep resolving; the values are now ink. --bb-navy-light and --bb-navy-mid-light were deleted here: both had ZERO consumers in any stylesheet, template or script, so they were names with nothing behind them. --bb-navy-mid SURVIVES on a deadline, not on merit. It is misnamed - it resolves to ink and there is no navy - but it still has 26 consumers in this file plus athletes/profile.php:297, and Phase 0 is not allowed to edit templates. DELETE IT once that template is rebuilt: its real role is "the B side" (athlete B, series 2, the second half of a split bar), so its consumers want --bb-ink directly. Same deadline applies to --bb-data-blue below, which no rule in this file uses but eight template references still do. */ --bb-navy: var(--bb-ink); --bb-navy-mid: var(--bb-ink); /* Record-trust status ramp, used by the .bb-confidence badge. Still a SIGNAL and still deliberately NOT oxblood, so a trust indicator never wears the same colour as every other accented control. The step was blue-after-green for colour-blind safety; with blue retired it is now moss / amber / grey, matching the qualified / bubble / out ramp the design uses on Road to Olympia. Hue does less work here than it did, which is safe because every one of these chips carries its own text label - the colour reinforces the word, it never replaces it. */ --bb-status-high: var(--bb-moss-dark); --bb-status-high-soft: rgba(47, 81, 41, 0.1); --bb-status-medium: var(--bb-amber-dark); --bb-status-review: var(--bb-warm-grey-2); /* Accent: folded into the oxblood primary (one accent, gold retired) */ --bb-accent: var(--bb-oxblood); --bb-accent-hover: var(--bb-oxblood-hover); --bb-accent-light: rgba(168, 55, 42, 0.1); --bb-accent-soft: rgba(168, 55, 42, 0.13); /* On ink, oxblood is too low-contrast to carry an accent; the design uses amber for every on-dark eyebrow, countdown figure and result number. */ --bb-accent-on-dark: var(--bb-amber); /* Green */ --bb-green: var(--bb-moss); --bb-green-soft: rgba(69, 114, 63, 0.1); --bb-green-400: var(--bb-moss-light); --bb-green-500: var(--bb-moss); --bb-green-600: var(--bb-moss-dark); --bb-green-700: var(--bb-moss-dark); /* Warm gray neutrals. 400-800 were blue-greys (#5f6978, #6b7688, #5a6577, #3d4555, #2a2f3d) sitting under a "warm-paper palette" heading - the lightest four were warm and the darkest five were not, which is why text on this ramp read cold against the paper it sat on. Now warm throughout. */ --bb-gray-50: #f6f3ed; --bb-gray-100: #eee8dd; --bb-gray-200: #dfd7cb; --bb-gray-300: #cfc4b6; --bb-gray-400: #8a8076; --bb-gray-500: var(--bb-warm-grey-2); --bb-gray-600: var(--bb-warm-grey); --bb-gray-700: #3d372f; --bb-gray-800: #2c2620; --bb-gray-900: var(--bb-navy); /* Semantic aliases */ /* * The page is bone and a raised surface is paper. That is what Iron & Bone * always described and the reverse of what shipped: .bb-app declared 166 * tokens and no background, so the page took the theme's white while every * card filled with --bb-surface = bone. Measured on /olympia/2025/ at 375px, * a card sat 5/255 per channel from its own page with no shadow, which is * why every card in the plugin read as flat. * * One token carries the fix. All 96 background uses of --bb-surface are * raised things - cards, menus, dropdowns, inputs, tabs, table rows - and * not one of them is a page, so flipping it here lifts every one of them at * once instead of repainting 96 rules by hand. */ --bb-bg: var(--bb-bone); --bb-surface: var(--bb-paper); --bb-border: rgba(34, 28, 24, 0.14); --bb-border-strong: rgba(34, 28, 24, 0.26); --bb-text-primary: var(--bb-ink); --bb-text-secondary: var(--bb-warm-grey); --bb-text-muted: var(--bb-warm-grey-2); /* CTA uses primary accent */ --bb-cta: var(--bb-primary); --bb-cta-hover: var(--bb-primary-hover); --bb-cta-light: var(--bb-primary-light); /* Semantic status */ --bb-success: var(--bb-moss); --bb-success-light: rgba(69, 114, 63, 0.1); --bb-verified: var(--bb-moss-dark); --bb-warning: var(--bb-amber); --bb-warning-light: rgba(217, 139, 74, 0.12); --bb-error: var(--bb-danger); --bb-error-light: rgba(143, 36, 32, 0.1); /* Data-visualization scale (charts, scores, and calculator bands). Was a stock Tailwind-ish spectrum - blue/lime/yellow/purple/rose - that shared nothing with the product palette. Rebuilt inside the warm ramp so a chart cannot introduce a hue the rest of the page never uses. */ --bb-data-blue: var(--bb-ink); --bb-data-green: var(--bb-moss); --bb-data-lime: var(--bb-moss-light); --bb-data-yellow: var(--bb-amber); --bb-data-orange: var(--bb-amber-dark); --bb-data-purple: #6d4a5c; --bb-data-neutral: var(--bb-warm-grey-2); --bb-data-rose: var(--bb-oxblood); /* Typography: Archivo for text, IBM Plex Mono for every figure. Both are self-hosted (see class-bodybuilding-template-loader.php) rather than pulled from fonts.googleapis.com the way the design prototype does. The theme already opens that connection, so this is about weight and control, not about adding a third party - same call as the flag images. Archivo is the variable cut: display sizes run font-stretch 84-90%. */ --bb-font-heading: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bb-font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bb-font-sans: var(--bb-font-body); --bb-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Spacing */ --bb-space-1: 0.25rem; --bb-space-2: 0.5rem; --bb-space-3: 0.75rem; --bb-space-4: 1rem; --bb-space-5: 1.25rem; --bb-space-6: 1.5rem; --bb-space-8: 2rem; --bb-space-10: 2.5rem; --bb-space-12: 3rem; --bb-space-16: 4rem; --bb-space-20: 5rem; --bb-space-24: 6rem; --bb-space-0-5: 0.125rem; --bb-space-1-5: 0.375rem; --bb-space-2-5: 0.625rem; --bb-space-3-5: 0.875rem; /* Font sizes, in px. * * These were rem, and every value was an exact division of 16: 0.8125rem is * 13/16, 0.9375rem is 15/16, 1.3125rem is 21/16. The names encode the same * intent (fs-15, fs-21, fs-22). So the scale was computed against a 16px * root, but the root here is 15px, which silently rendered the entire scale * about 6% under its designed size: fs-15 came out at 14.06px, fs-label at * 12.2px, fs-2xs at 10.3px, and the smallest observed text on a page was * 10.6px. That is the "some fonts are too small" report, and it was one * cause across every route, not a per-component mistake. * * px restores the designed sizes and makes the token names true. It matches * a decision this stylesheet already made: .bb-app pins body copy with * `font-size: 15px`, and --bb-fs-page-title is px for the same reason. The * trade-off is that a reader's browser default font-size no longer scales * this text; browser zoom, which is what people actually use, still does. */ --bb-fs-2xs: 11px; --bb-fs-xs: 12px; --bb-fs-label: 13px; --bb-fs-compact: 13.5px; --bb-fs-sm: 14px; --bb-fs-15: 15px; --bb-fs-base: 16px; --bb-fs-md: 18px; --bb-fs-lg: 20px; --bb-fs-21: 21px; --bb-fs-22: 22px; --bb-fs-xl: 24px; /* 32, not 30. Measured across all 15 claude-design prototypes: their section headings sit on 34 / 32 / 26 / 24 / 22 and 30 is not among them. This token drove 62 of the plugin's 124 rendered H2s, so a single wrong value here was most of the "headings don't match the prototype" complaint. */ --bb-fs-2xl: 32px; /* The prototype's secondary section tier. It had no token, so pages reached for 1.6rem (25.6px) or 28px and drifted apart. */ --bb-fs-26: 26px; --bb-fs-3xl: 36px; /* Display tier: the page H1 (athlete name, contest name, olympia year, hub hero) towers over section H2s. Editorial data-authority = big type, three clear steps (display / section / label). */ --bb-fs-4xl: 3rem; --bb-fs-display: clamp(2.75rem, 5vw, 4.5rem); /* The page title, one size for every route. Thirteen different h1 classes existed and --bb-fs-display was applied by four separate selectors, while base .bb-page-title stayed at clamp(1.5rem, 5vw, 2rem), so a title's size depended on which ancestor happened to match: 32.8px on contest and Olympia, 60.5px on the hub, 72px on athlete and division. Same role, three sizes. 30px floor so a long title does not swallow a 375px viewport, 64px cap so the athlete hero stays authoritative without shouting, and about 44px on a 1050px laptop. One clamp replaces the per-hero media queries that used to shrink each title to its own separate mobile size. The floor read 38px until 2026-08-06 while this comment claimed 32, which is how it drifted unnoticed: on a phone the floor is the only value that ever applies, so it was setting a desktop number on every handset. */ /* px, not rem, deliberately. The rem floor resolved differently between routes (30px on most, 31.2px on Arnold and compare) because the root font size is not identical everywhere, which defeats the whole point of one token. This plugin already pins body text with `font-size: 15px` on .bb-app, so px here is consistent with that existing decision. */ --bb-fs-page-title: clamp(30px, 4.8vw, 64px); /* Page-title ladder. claude-design sizes the title by the page's rank and measures 74 / 68 / 64 / 62 / 60 / 58 / 52 / 46 across the 13 routes; live pinned every one to 64. Five named tiers put every route within 4px of the prototype without reopening per-hero sizing - the tier redefines --bb-fs-page-title in context, so every h1 rule keeps resolving through the one token that test-page-title-scale.mjs guards. */ /* 2026-08-06: every floor lowered, because on a phone the floor IS the size. 4.8vw is 18px at 375px, so the preferred value never wins on any handset and the min was doing all the work at a desktop-sized number. Measured at 375px before the change: the hub h1 ran 42px over four lines and 160px tall, 12 routes on the 38px tier ran to three and four lines, and the longest title on that tier is 43 characters. New floors are set from the longest title in each tier, targeting two lines, and three for the hub, whose h1 is a marketing sentence rather than an entity name. */ /* * Was clamp(34px, 5.4vw, 72px). 72px is a poster, not a page title: on the hub it * pushed the eyebrow, headline, description and stat row far enough down that the * hero filled a 1440x900 viewport on its own and the content below it needed a * scroll to exist. Dropped to the 54px rung the detail tier already occupies, so * this stays ON the established ladder instead of inventing an off-ladder size - * which is the drift test-page-title-scale.mjs exists to catch. * * The floor moves 34px to 30px with it. On a phone the floor is the ONLY value that * ever applies (4.1vw is 16px at 390px, so the preferred value never wins), so the * floor is the phone size and 34px over four wrapped lines was the worst of it. */ --bb-fs-page-title-hero: clamp(30px, 4.1vw, 54px); --bb-fs-page-title-entity: clamp(30px, 4.5vw, 60px); --bb-fs-page-title-detail: clamp(28px, 4.1vw, 54px); --bb-fs-page-title-compact: clamp(26px, 3.6vw, 46px); /* Uppercase is a tier property, not a global. It costs about 12% more width and removes word shape, which is invisible on a one-line desktop hero and is the single biggest reason a phone title wraps to four lines. Declared as a token so the mobile override can narrow it to heroes without adding a selector per hero, the same way --bb-fs-page-title works. */ --bb-page-title-transform: uppercase; /* ====================================================================== Radii. This was not a scale. It read 6 -> 10 -> 12 -> 8 -> 10, so `lg` was smaller than `md` and `xl` was identical to the base. Names are how people choose a token, and the most-used one in the whole stylesheet, `--bb-radius-lg` at 99 call sites, was the one whose name lied. That is why the rendered site carried eight different corner radii while every author believed they were using the design system. The values come from measuring claude-design rather than taste: across 12 prototype pages the button radius is 4px (54 of 111 controls), with 3px on smaller chips and 0px on deliberately square surfaces. Nothing held 4px, so the 25 places that wanted it had to hardcode it. `--bb-radius-lg` deliberately keeps its 8px. It is correct where it is used, and moving it would silently restyle 99 sites to chase a naming problem. Monotonicity is restored by bringing `md` down under it, not by pushing `lg` up. ====================================================================== */ --bb-radius-xs: 2px; --bb-radius-sm: 3px; --bb-radius: 4px; /* base = the design's button corner */ --bb-radius-md: 6px; --bb-radius-lg: 8px; /* unchanged: 99 call sites */ --bb-radius-xl: 12px; --bb-radius-2xl: 24px; --bb-radius-full: 9999px; /* Soft card shadows (warm near-black, consolidated from later layers) */ --bb-shadow-sm: 0 1px 2px rgba(34, 28, 24, 0.06), 0 1px 1px rgba(34, 28, 24, 0.04); --bb-shadow: 0 16px 40px rgba(34, 28, 24, 0.07); --bb-shadow-md: 0 18px 46px rgba(34, 28, 24, 0.11); --bb-shadow-lg: 0 26px 70px rgba(34, 28, 24, 0.15); /* Focus ring */ --bb-focus-ring-color: var(--bb-primary); --bb-focus-ring-width: 2px; --bb-focus-ring-offset: 2px; /* Transitions */ --bb-transition-fast: 150ms; --bb-transition: 150ms ease; --bb-transition-normal: 200ms; --bb-transition-slow: 300ms ease; --bb-ease-out: cubic-bezier(0.33, 1, 0.68, 1); --bb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Animation stagger */ --bb-stagger: 60ms; /* Font weights */ --bb-weight-normal: 400; --bb-weight-medium: 500; --bb-weight-semibold: 600; --bb-weight-bold: 700; --bb-weight-extrabold: 800; /* Level colors */ --bb-level-beginner: #8a8076; --bb-level-novice: var(--bb-moss); --bb-level-intermediate: var(--bb-warm-grey); --bb-level-advanced: var(--bb-primary); --bb-level-elite: var(--bb-amber); /* Championship gold - ONE canonical winner/medal gold token. Phase 0: the product previously carried three golds (--bb-accent var(--bb-amber), --bb-gold var(--bb-amber), and an inline var(--bb-amber) in the Olympia widget). The inline hex is already routed through --bb-accent; this names the remaining medal gold as one source so every "winner/champion/medal" gold resolves from it. Value stays the bright medal gold: the rank-badge gradient carries dark text (--bb-gold-text) that needs the lighter gold to keep AA contrast, and "winner gold" reads as bright gold. --bb-accent stays the distinct amber UI-accent (warnings/elite), per the token roles. */ /* Iron & Bone, 2026-07-29: the medal set now resolves to the warm ramp. The note above says "value stays the bright medal gold" and reasons about AA contrast for the rank badge, which was sound in isolation - but var(--bb-amber), #c0c0c0 and #cd7f32 are three saturated hues that appear nowhere else in the design, and bright gold on cream is the worst contrast pair on the page. The prototype carries rank with an inverted ink card and an amber chip, never with a metal colour. Kept as tokens rather than deleted because the names are load-bearing in ~30 rules (ribbons, rank badges, champion pills). Repointing is what makes "gold retired" - claimed in the --bb-accent comment since 2026-06-20 and not true until now - actually hold. */ /* Brief §2 splits the champion gold by surface: #8f5a1e on light, #d98b4a on dark. It resolves to the ON-LIGHT value because that is what its ~35 consumers actually are - `color:` on champion names, credentials, table rows and era chips, all sitting on bone. The on-dark amber #d98b4a as text on #faf6ef is roughly 2.4:1, so pointing this at it would have put a contrast failure on every champion label in the plugin. On a dark surface, use --bb-amber-on-dark directly. */ --bb-gold-champion: var(--bb-amber-on-light); /* Rank badge colors (medal gradient resolves from the championship gold) */ --bb-gold: var(--bb-amber-on-light); --bb-gold-end: var(--bb-amber-deep); --bb-gold-text: var(--bb-bone); --bb-silver: #b8ada0; --bb-silver-end: #a0958a; --bb-silver-text: var(--bb-ink); --bb-bronze: var(--bb-amber-dark); --bb-bronze-end: var(--bb-amber-deep); --bb-bronze-text: var(--bb-bone); /* Container */ --bb-container: 1240px; /* Touch-target floor (WCAG 2.5.5). Bake the 44px minimum at the token level so interactive controls never re-litigate it per component. Usable in min-height / min-width (NOT in @media conditions - custom properties are not valid in media-query feature tests). */ --bb-touch-min: 44px; /* ---------------------------------------------------------------------- BREAKPOINT SCALE (standard, named). CSS custom properties cannot be used inside @media conditions, so this is the documented convention every component should target rather than inventing new ad-hoc widths: --bb-bp-sm : 480px (phone -> large phone) --bb-bp-md : 768px (tablet portrait; table stacked-card threshold) --bb-bp-lg : 1024px (tablet landscape / small laptop) --bb-bp-xl : 1240px (matches --bb-container; desktop max) New media queries MUST use one of these four values. Existing ad-hoc breakpoints are left in place (rewriting them blind would shift layout behavior); migrate opportunistically when a component is touched. ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- CHART TOKENS (Wave 1 viz foundation, see UI-REVAMP plan 2.2 + 4). One visual language for every chart in the .bb-chart kit. The two-series comparison contract is A = crimson (series-1), B = navy (series-2), enforced both here and in bb-charts.js so a two-athlete chart always reads the same way. ---------------------------------------------------------------------- */ --bb-chart-series-1: var(--bb-primary); /* crimson - series 1 / athlete A */ --bb-chart-series-2: var(--bb-navy-mid); /* navy - series 2 / athlete B */ --bb-chart-gold: var(--bb-gold-champion); /* winner / rank-1 emphasis */ --bb-chart-axis: var(--bb-gray-600); /* axis tick labels */ --bb-chart-grid: rgba(34, 28, 24, 0.08); /* gridlines (warm ink at low alpha) */ --bb-chart-track: var(--bb-gray-100); /* inline dominance-bar track */ /* Merged 2026-06-20 from the two former lower .bb-app token layers, making this the single source of truth. The accent is one restrained oxblood; --bb-primary (and -hover/-light/-soft) is consumed by --bb-cta, --bb-focus-ring-color, --bb-level-advanced and --bb-chart-series-1. */ --bb-primary: var(--bb-oxblood); --bb-primary-hover: var(--bb-oxblood-hover); --bb-primary-light: rgba(168, 55, 42, 0.08); --bb-primary-soft: rgba(168, 55, 42, 0.13); --bb-border-soft: rgba(34, 28, 24, 0.09); --bb-control-bg: #ffffff; --bb-control-bg-hover: var(--bb-gray-50); --bb-text-tertiary: #6e665e; } /* ========================================================================== 2. RESET & BASE ========================================================================== */ .bb-app { font-family: var(--bb-font-body) !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--bb-text-primary) !important; background-color: var(--bb-bg) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bb-app *, .bb-app *::before, .bb-app *::after { box-sizing: border-box; } /* Control metrics, declared so the host theme cannot supply them. * * The theme puts line-height:40px on buttons. No control in this plugin declared * its own, so every one inherited a 40px line box whatever its font size, and * the taller the gap the more the label looked crammed: bb-methodology-toggle at * 12px/40px was 51px tall, bb-kit-btn 13px/40px was 56px, bb-filter-btn, * bb-filter-tab and bb-fantasy-tab 14px/40px were 60-62px, bb-faq-question * 16px/40px was 72px. Seven classes, one cause, and any control added later * would inherit it too. * * Only line-height. A blanket min-height was tried here to also satisfy the * audit's undersized-target finding and it broke real layout: the career * timeline's dots are