, i.e. the whole page) is what must be sticky, not brand.css's .commandcard-wrap inside it. It sticks just below the top bar (which is itself sticky, 66px tall incl. border) with a lower z-index so the language select in the top bar stays clickable. */ [data-lr-mount="commandbar"] { position: sticky; top: 66px; z-index: 55; /* 2026-09-09, Unit 3: #lr-main no longer pads, so the negative-margin hack that escaped that padding is gone. What is left is the previous version's own -26px pull up over the hero's bottom edge. */ margin-top: -26px; margin-bottom: 0; } [data-lr-mount="commandbar"] .commandcard-wrap { position: static; margin: 0; } /* 2026-09-11: with the Explore Data button (B2) the five controls measured 1,139px against a 1,128px card interior at a 1280px viewport, so the card wrapped to two rows in English. Tighter gaps keep it on one row down to ~1,250px; below that it wraps as designed. */ [data-lr-mount="commandbar"] .commandcard { gap: 12px 16px; padding: 12px 14px; } [data-lr-mount="commandbar"] .cc-group { gap: 16px; } [data-lr-mount="commandbar"] .cc-group--right { gap: 10px; } @media (max-width: 700px) { [data-lr-mount="commandbar"] { position: static; margin-top: 14px; } } /* 2026-09-09 (Ben): "Current view: …" — the active scenario, in italics, under the command card and above the page header. Only present in the personalized view; scrolls away with the page like any other content. */ .lr-current-view { margin: 14px 0 4px; color: var(--muted); font-size: 14px; } .lr-current-view em { font-style: italic; } /* ========================================================================= 8. Unit 3 (2026-09-09) — lr-blocks.css retired. assets/css/lr-blocks.css was v4's own generic block stylesheet. Every component it styled now renders in one of the previous version's own brand.css components instead (.case-feature/.cfstat, .vcar, .taki, .quotebox/.qmodal, .card.chart-card, .report-callout, .wtd, .profstrip), so the file is deleted and its is gone from the shell template. What is left of it lands here, and only this: the handful of rules with no brand.css component of their own (a page notice, a plain list, the generic callout, the tablet deck), plus the small additions the new markup needs. Nothing below invents a colour, radius or spacing — every value is a brand.css token. ====================================================================== */ /* ---- ONE body type, site-wide (2026-09-10, polish 1, Ben) -------------- Every page's body text is the Executive Summary's body text. The values are brand.css's `.case-feature__prose p` — 19px / 1.78 / #e2eaf7, the type Ben signed off on for the feature block — lifted into four custom properties so every other prose selector can POINT at them rather than carry its own copy of the numbers. Change the type here and the whole site moves together; nothing below this block hard-codes a body size or colour. The measure is brand.css's own --measure-body (72ch), unchanged. Deliberate exception: `.quotebox--analysis`'s pulled quote keeps its own 19.5px italic (Ben), and headings, kickers, eyebrows, notes, chart chrome and the .cfstat number are not body text and are untouched. */ :root { --body-size: 19px; --body-lh: 1.78; --body-color: #ffffff; --body-measure: var(--measure-body, 72ch); } /* ---- METRIC CALLOUT type (2026-09-10, polish 3, Ben) ------------------ A metric callout's supporting lines — the label under the number, the analyst's delta sentence and §4.6's compare row — are NOT body text. They are a caption on a big number, in both metric components (.cfstat in the feature block's Key Metrics column, .taki__metric anywhere else), so they get their own two tokens rather than 19px/1.78 body type or a hard-coded number at each selector. Change the pair here and every metric callout on the site moves together. --metric-accent is the light blue the metric VALUE is drawn in (brand.css's .cfstat__n gradient runs #77CFF2 -> var(--blue-300), which are the same colour, and .taki__metric .n is flat var(--blue-300)) — so this token IS --blue-300, named for the job it does here. Ben's rule: every metric subtext that is not a literal rise (green) or a fall/warning (red) is drawn in the value's own light blue, never in white/body colour. The recommendations list's bold lead sentence (§ .wtd-item__lead) reads the same token: one page accent, one definition. */ :root { --metric-size: 16px; --metric-lh: 1.3; --metric-accent: var(--blue-300); } /* ---- CHART LABEL type (2026-09-10, polish 4, Ben) --------------------- ONE size and ONE colour for every piece of text a chart DRAWS: axis tick labels, category labels, value labels, series labels and legend items, in every chart type. Before this the engine carried a per-renderer scatter of 10px / 10.5px / 11px / 11.5px / 12px / 12.5px / 13px literals, so an axis tick was a different size on a line chart, a column chart and a box plot, and the doughnut's legend was a different size again from the bar legend. --chart-label-size is read by the SVG renderers as well as by CSS: SVG presentation attributes cannot understand var(), so fcr-chart-core.js and fcr-chart-core-ext.js resolve this property once per render through getComputedStyle (labelSize(), the same trick resolveColor() has always used for colours) and write the number into `font-size`. Since polish 2 every renderer sizes its viewBox to the card's real pixel width, so 13 in the viewBox IS 13px on screen at every card width. --chart-label-color is the card's own footer-note colour (--text-soft), so a label, a base line and a subtitle are one family. Two deliberate exceptions keep their own ink, because they are not "a label on the card background": a value label drawn INSIDE a coloured segment (contrast ink picked per segment colour — a muted grey on a green bar is unreadable), and the D4 reader-highlight treatments, which are an emphasis state. Only the SIZE is universal for those two. */ :root { --chart-label-size: 13px; --chart-label-color: var(--text-soft); } /* ---- page-level notices (renderEditionLine / the empty-page notice) ---- */ .lr-empty-notice, .lr-edition-line { font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 18px; } /* ---- prose runs outside the feature block ----------------------------- brand.css's .report-prose supplies the paragraph type; it has no measure of its own, and unbounded 16px lines at 1280px are unreadable. */ .report-prose { max-width: 82ch; } .report-prose > p:last-child { margin-bottom: 0; } .report-prose + .report-prose { margin-top: 16px; } .report-prose a, .case-feature__prose a, .taki__body a { color: var(--blue-300); text-decoration: underline; text-underline-offset: 2px; } /* ---- a subheader and a list rendered through the generic block list ---- (the tablet deck, and any page shape the composer hands straight to renderBlockList — a section page's own subheaders become .taki rows) */ .lr-sub { font-size: 20px; color: var(--text); margin-top: 36px; } .lr-list { margin: 0 0 20px; padding-left: 22px; color: var(--text-body); font-size: 15px; line-height: 1.6; } .lr-list li { margin-bottom: 8px; } .lr-list li:last-child { margin-bottom: 0; } /* ---- {{callout}} -> the analyst's aside (2026-09-10, Unit 4A) ---------- brand.css has no callout component, but it HAS this box: `.wtd`, the previous version's teal-rule "what to do" callout. The analyst callout is that box with no label — Futurum speaking in its own voice inside the analysis, not a labelled instruction — so it reuses .wtd's own values (3px blue left rule, the same padding, the same tint and corner) rather than inventing a second highlighted box. Full width, unlike .wtd: a callout in the report flow is the section's own aside, not a note inside a card. Replaces v4's amber `.lr-callout`. */ .analyst-callout { margin: 22px 0; padding: 14px 16px 14px 18px; border-left: 3px solid var(--blue); background: rgba(7, 167, 232, .07); border-radius: 0 10px 10px 0; } .analyst-callout p { margin: 0 0 12px; font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); } .analyst-callout > :last-child { margin-bottom: 0; } .analysis .analyst-callout { margin: 16px 0 0; } /* ---- the feature block's side column --------------------------------- brand.css's .cfstat is the previous version's own two-line stat (number + label). A metric carries two more reader-facing lines it has to keep: §4.6's comparison row (the normalized whole-sample figure personalization bumped off the headline) and the analyst's own delta sentence. 2026-09-10, polish 1 (Ben): both lines are body size and italic, one line each, and they take their colour from the delta's `dir` word — green for a literal rise, red for a fall or a `warn`, and plain body colour for a `note` and for no icon at all. The benchmark rows ("Leaders 74%") are gone: `bench` stays in metrics.yaml as analyst data and is rendered nowhere, so .cfstat__bench / .cfstat__bench-row no longer exist. */ /* 2026-09-10, polish 3 (Ben): all three lines are 16px/1.3 through the --metric-* tokens above (not body type), and the colour rule is now closed: green for `up`, red for `down`/`warn`, and the metric value's own light blue for EVERY other case — `note`, no icon at all, and the compare row. 2026-09-10 (Ben): the LABEL stays in the white body colour; only the subtext lines take the light blue. Value blue / label white / subtext blue. */ .cfstat__l, .cfstat__delta, .cfstat__cmp { font-size: var(--metric-size); line-height: var(--metric-lh); color: var(--metric-accent); } .cfstat__l { margin-top: 6px; color: var(--body-color); } .cfstat__delta, .cfstat__cmp { font-style: italic; margin-top: 6px; } .cfstat__delta--up { color: var(--green-300); } .cfstat__delta--down, .cfstat__delta--warn { color: var(--red); } /* --note and --none keep the light blue set above: they are interesting, not good or bad. */ /* The dir icon, inline before the delta text: it takes the line's own colour and rides the text's own size. */ .mico { width: .78em; height: .78em; flex: none; vertical-align: -.03em; } /* The authored words drawn INSIDE the big value ("Only 2.9%"). 2026-09-10, polish 3 (Ben): the affix is drawn at the SAME size, weight and fill as the number itself — the earlier 0.72em step is gone. `1em` rather than no declaration at all, so the rule is explicit and a later stylesheet cannot re-shrink it by accident; the colour/gradient needs no declaration (brand.css clips .cfstat__n's gradient to the text of the whole element, and -webkit-text-fill-color inherits). */ .cfstat__n, .taki__metric .n { text-wrap: balance; } .cfstat__n .n__pre, .cfstat__n .n__suf, .taki__metric .n .n__pre, .taki__metric .n .n__suf { font-size: 1em; font-weight: inherit; color: inherit; } /* Ben: "the hover effect used to be a little smoother." The v3 markup took its transform transition from brand.css's `.reveal` rule (transform .2s ease) — which the .cfstat markup carries again as of polish 1 — and this softens the grow into a longer eased curve, leaving the reveal's own opacity fade to brand.css. */ .case-feature__side .cfstat { transition: opacity .45s ease, transform .34s cubic-bezier(.22, .7, .25, 1); } @media (prefers-reduced-motion: reduce) { .case-feature__side .cfstat { transition: none; } } /* ---- metric tiles ---------------------------------------------------- brand.css's .taki__metrics is built for the previous version's three tiles; a metric row is 1 or 2 (2026-09-10, polish 1: the exec-summary rows are exactly two, and a modal carries no metric at all). The delta line gets the same treatment as the .cfstat one — body size, italic, coloured by `dir`. */ .taki__metrics--1 { grid-template-columns: minmax(0, 1fr); } .taki__metrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .taki__metrics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2026-09-10, polish 3 (Ben): the tile's three supporting lines read the same --metric-* tokens and the same closed colour rule as the .cfstat ones — the two components can never disagree about metric caption type. `.src` is §4.6's compare row (renderMetricTile's `.src.src--cmp`). */ .taki__metric .l, .taki__metric .delta, .taki__metric .src { font-size: var(--metric-size); line-height: var(--metric-lh); color: var(--metric-accent); } /* 2026-09-10 (Ben): label white, subtext blue — same rule as .cfstat__l. */ .taki__metric .l { margin-top: 6px; color: var(--body-color); } .taki__metric .delta { font-style: italic; margin-top: 6px; } .taki__metric .src { font-style: italic; margin-top: 5px; } .taki__metric .delta--up { color: var(--green-300); } .taki__metric .delta--down, .taki__metric .delta--warn { color: var(--red); } @media (max-width: 640px) { .taki__metrics, .taki__metrics--2, .taki__metrics--4 { grid-template-columns: minmax(0, 1fr); } } /* ---- Key Insights rows: the kicker and title are links ---------------- Ben: the underline appears on hover/focus only, so the row still reads as a heading rather than as a link list. */ /* 2026-09-10, polish 1 (Ben): the body text INSIDE a Key Insights row is the same body type as everywhere else. brand.css's `.taki__body` carries the tokens, but renderTakiRow() emits the subsection's paragraphs through the ordinary paraHtml() (they keep their own tids), so the row's text column needs the same three tokens by selector. */ .taki__text p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); max-width: var(--body-measure); } .taki__text p:last-child { margin-bottom: 0; } .taki__kicker a, .taki__heading a { color: inherit; text-decoration: none; } .taki__kicker a:hover, .taki__kicker a:focus-visible, .taki__heading a:hover, .taki__heading a:focus-visible { text-decoration: underline; } .taki__kicker a { display: inline-flex; align-items: center; gap: 2px; } .taki__kicker-arrow { width: 13px; height: 13px; flex: none; } .taki__side > .quotebox { margin-top: 0; } .taki__metrics + .quotebox { margin-top: 4px; } .quotebox:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,167,232,.35); } /* ---- What To Do Next: a plain list (2026-09-10, polish 1, Ben) --------- The coloured `.wtd` boxes are gone. Each recommendation is one list item: a small themed icon on the left, aligned to the first line, the first sentence bold, the rest ordinary body text, comfortable air between items, no background and no border. The `wtd` prefix is kept so the component keeps the name the renderer and the tests already use. */ .wtd-list { list-style: none; margin: 6px 0 0; padding: 0; } .wtd-item { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 0; background: none; border: 0; } .wtd-item + .wtd-item { margin-top: 26px; } .wtd-item__ico { width: 18px; height: 18px; flex: none; color: var(--blue); /* Centred on the first line's cap height rather than its box top, so the glyph sits with the text at any body size. */ margin-top: calc((var(--body-size) * var(--body-lh) - 18px) / 2); } .wtd-item__t { margin: 0; font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); max-width: 88ch; } /* 2026-09-10, polish 3 (Ben): the bold FIRST SENTENCE is drawn in the page's light blue accent — the same --metric-accent the metric values use — and stays bold. The rest of the item keeps the body colour set above. The renderer gives the a class of its own (.wtd-item__lead) so the accent can never leak onto an authored **bold** phrase later in the sentence. */ .wtd-item__t b { color: var(--text); font-weight: 700; } .wtd-item__t b.wtd-item__lead { color: var(--metric-accent); font-weight: 700; } /* ---- chart cards ------------------------------------------------------ brand.css styles .card.chart-card and .grid-2; these two are what the pairing needs on top: cards top-aligned in the row (a tall card must not stretch a short one) and the row's own vertical rhythm. */ .lr-chart-grid { align-items: start; margin-top: 14px; } /* The card is a
(its head is a real
, so the figure has an accessible name) where the previous version used a plain
. A
carries the UA's own `margin: 1em 40px`, which would inset every chart 40px inside its own column; the previous version's spacing is the margin-top below and nothing else. */ figure.chart-card { margin: 14px 0 0; } .lr-chart-grid > figure.chart-card { margin-top: 0; } .chart-card__title { margin: 0; } /* 2026-09-16 (a11y fix, nested-interactive): the figure itself is no longer role="button"/tabindex (a clickable figure around real