/* ============================================================================
style.css — GENERATED. Do not edit; edit the layer sources and re-run
`python3 consumer/web-index/gen-style-css.py` (see #958).
Single stylesheet entry for the Inventing Indices public site, concatenated
from the layers below so the browser resolves the whole cascade in ONE
render-blocking round-trip (the nested-import chain it replaced cost two).
Two-theme frontend (#191, spec consumer/docs/planning/two-theme-frontend.md):
fonts.css self-hosted Libre Franklin @font-face (#958)
tokens.css semantic token CONTRACT (names + invariant values)
theme-newspaper.css baseline theme values on :root (default, no-JS safe)
components.css shared markup/behavior styling — consumes tokens only
theme-bento.css [data-theme="bento"] overrides + treatments + grids
Pages keep linking ONLY this file, with the single ?v=SITE_ASSET_VERSION
cache tag. Nothing links the layer sources any more, so they no longer carry
(or need) their own ?v= tags. Theme switch = data-theme attribute on
(common.js).
========================================================================= */
/* ===== fonts.css ======================================== */
/* ============================================================================
fonts.css — self-hosted Libre Franklin (#958), first layer of style.css.
Replaces the render-blocking cross-origin
that used to sit on the critical path of every page on both surfaces.
The block between the >>> / <<< sentinels below is duplicated VERBATIM in
marketbrain/mb-style.css (the press section pages load only that sheet, never
style.css); mb-theme.test.cjs asserts the two copies stay byte-identical.
========================================================================= */
/* >>> libre-franklin @font-face (#958) — provenance, subset choice and the
deliberate absence of a ?v= tag: web-index/assets/fonts/README.md.
font-display: swap so text paints in the fallback stack immediately and is
never blocked on the font download. Root-absolute src: mb-style.css is loaded
from two different depths (press root, and marketbrain/ on the main domain)
and /assets/fonts/ resolves on both origins. The subsets are VARIABLE fonts,
hence one file per subset for the whole 500-700 span the old Google request
asked for.
ORDER IS LOAD-BEARING — latin-ext FIRST, latin LAST, exactly as Google's
stylesheet emitted them. The two unicode-ranges overlap on the combining
marks U+0304, U+0308 and U+0329, and a composite font face resolves a
codepoint by examining its faces in REVERSE definition order, so the LAST
matching rule wins. Listing latin last is what keeps those three glyphs
coming from the latin file the way they always have; swapping these two
blocks silently re-routes them (and pulls a second font file for text that
needed only the first). Do not "tidy" this into most-common-first. */
@font-face {
font-family: "Libre Franklin";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("/assets/fonts/libre-franklin-v20-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: "Libre Franklin";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("/assets/fonts/libre-franklin-v20-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* <<< libre-franklin @font-face */
/* ===== tokens.css ======================================== */
/* ============================================================================
tokens.css — the shared semantic token CONTRACT (two-theme frontend, #191).
Spec: consumer/docs/planning/two-theme-frontend.md. Components and layouts
consume ONLY these semantic tokens — never raw colors. Themes supply values:
theme-newspaper.css — baseline values on :root (newspaper is the default,
and the no-JS fallback)
theme-bento.css — overrides on :root[data-theme="bento"]
Every token listed here MUST be given a value by theme-newspaper.css; bento
overrides the subset it changes (unset tokens inherit newspaper values by
design — that is the "shared contract" working, not an omission).
CONTRACT (names + roles)
-- color, page/surfaces --
--c-bg page background
--c-surface card / panel / tooltip background
--c-surface-alt tinted surface (alternating rows, notes, callouts)
--c-inset inset strip background (market/NAV ticker band)
-- color, text --
--c-text primary body text
--c-text-mid prose emphasis tier between text and soft (#333 tier)
--c-text-soft secondary prose (#444 tier)
--c-text-muted metadata, labels, inactive
--c-heading headings, table header text, strong UI chrome
--c-link inline + nav link color on light surfaces
-- color, accents / feedback --
--c-accent primary decorative accent (rules, card top borders)
--c-accent-2 secondary decorative accent (bento uses a 2nd neon)
--c-accent-ink accent used AS TEXT on surfaces (must meet 4.5:1)
--c-line hairlines / borders
--c-pos positive change
--c-neg negative change
--c-data-dim secondary data ink (benchmark lines, chart tick marks)
--c-focus focus ring color (must meet 3:1 against --c-bg)
-- color, site header --
--c-header-bg / --c-header-fg / --c-header-fg-dim / --c-header-faint
--c-header-line borders inside the header (nav toggle, theme toggle)
--c-header-line-strong header border hover/active tint
--c-header-hover hover background for header links
-- color, chips --
--c-chip-bg / --c-chip-fg neutral chip
--c-chip-live-bg / --c-chip-live-fg "Live" status chip
--c-chip-beta-bg / --c-chip-beta-fg "Beta" status chip
-- shape --
--radius-xs / --radius-sm / --radius-md / --radius-lg / --radius-pill
--shadow-1 low elevation (hover on list items)
--shadow-2 card hover elevation
--shadow-3 high elevation (research cards)
--shadow-cta CTA hover elevation
-- layout / density --
--maxw content container width
--pad-x page horizontal padding
--gap-grid card grid gap
--gap-section vertical rhythm between page sections
--sp-main-top top padding of
-- type --
--font-sans body stack
--font-brand brand / heading stack
--font-display display serif (newspaper masthead voice)
--font-data numeric / data voice (bento switches to monospace)
--fs-body root body size
========================================================================= */
:root {
/* Theme-invariant structural tokens. Themed values live in theme files. */
--pad-x: 24px;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-brand: "Libre Franklin", "Segoe UI", Helvetica, Arial, sans-serif;
--fs-body: 15px;
}
/* ===== theme-newspaper.css ======================================== */
/* ============================================================================
theme-newspaper.css — baseline theme values (two-theme frontend, #191).
The newspaper theme IS the baseline: values live on :root so the site
renders newspaper with no data-theme attribute and no JS (progressive
enhancement / no-FOUC fallback). Palette extracted verbatim from the
pre-#191 style.css (institutional factsheet aesthetic, REB inventing#180):
brighter indigo header, sunny gold accent, warm paper row tint.
Newspaper needs no scoped component treatments — the shared component layer
in components.css, consuming these tokens, IS the newspaper rendering.
========================================================================= */
:root {
/* page / surfaces */
--c-bg: #ffffff;
--c-surface: #ffffff;
--c-surface-alt: #f8f6f0;
--c-inset: #f8fafc;
/* text */
--c-text: #1a1a1a;
--c-text-mid: #333333;
--c-text-soft: #444444;
--c-text-muted: #6b7280;
--c-heading: #13285c;
--c-link: #1f3d80;
/* accents / feedback */
--c-accent: #f0b429;
--c-accent-2: #f0b429;
--c-accent-ink: #94700b;
--c-line: #e2e5ea;
--c-pos: #1b7a43;
--c-neg: #b00020;
--c-data-dim: #9ca3af;
--c-focus: #1f3d80;
/* site header */
--c-header-bg: #13285c;
--c-header-fg: #ffffff;
--c-header-fg-dim: #cdd5e1;
--c-header-faint: rgba(255, 255, 255, 0.48);
--c-header-line: rgba(255, 255, 255, 0.3);
--c-header-line-strong: rgba(255, 255, 255, 0.5);
--c-header-hover: #1f3d80;
/* chips */
--c-chip-bg: #eef1f5;
--c-chip-fg: #6b7280;
--c-chip-live-bg: #e6f4ec;
--c-chip-live-fg: #1b7a43;
--c-chip-beta-bg: #f7efd4;
--c-chip-beta-fg: #8a6d12;
/* shape */
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-pill: 999px;
--shadow-1: 0 2px 10px rgba(10, 31, 68, 0.08);
--shadow-2: 0 4px 14px rgba(15, 23, 42, 0.1);
--shadow-3: 0 6px 18px rgba(15, 23, 42, 0.1);
--shadow-cta: 0 3px 10px rgba(10, 31, 68, 0.18);
/* layout / density */
--maxw: 1080px;
--gap-grid: 16px;
--gap-section: 36px;
--sp-main-top: 28px;
/* inventing#1420 round-1: .site-header's rendered height, the no-JS/pre-first-paint fallback
for .product-bar's sticky offset. common.js's initHeaderHeightTracking() (ResizeObserver on
.site-header) overrides this on once script runs, so the sticky offset self-corrects
for any header-height change (wrap, more nav entries, font-size) instead of drifting out of
sync with a hand-maintained px value. Bump this fallback alongside .site-header .bar's
min-height + border-bottom, same as the value it replaces. */
--site-header-height: 45px;
/* type */
--font-display: Georgia, "Times New Roman", Times, serif;
--font-data: var(--font-brand);
}
/* ===== components.css ======================================== */
/* ============================================================================
components.css — shared component + layout layer (two-theme frontend, #191).
One markup tree, two themes. Everything here consumes semantic tokens from
theme-newspaper.css (baseline, on :root) — never raw colors. Rendering
under these rules IS the newspaper theme; theme-bento.css re-skins by
overriding tokens and adding shallow [data-theme="bento"] treatments.
Region contract (homepage): declares its modules
once as direct children carrying data-region="markets|lead|top-stories|press".
Newspaper renders them in document flow (this file); bento maps them onto a
12-column grid (theme-bento.css). Component behavior is theme-invariant.
========================================================================= */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
min-height: 100%;
font-family: var(--font-sans);
color: var(--c-text);
background: var(--c-bg);
font-size: var(--fs-body);
line-height: 1.5;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
/* The markets strip bleeds to the viewport edge via 50%-50vw margins; clip
the sliver of 100vw that hides under the scrollbar instead of scrolling. */
overflow-x: clip;
}
a { color: var(--c-link); }
/* Focus visibility must hold in both themes (spec: a11y). */
:focus-visible {
outline: 2px solid var(--c-focus);
outline-offset: 2px;
}
/* On the dark header the page focus color has no contrast (newspaper navy on
navy); the accent meets 3:1 against the header in both themes. */
.site-header :focus-visible { outline-color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ---- header / nav ---- */
.site-header {
background: var(--c-header-bg);
color: var(--c-header-fg);
position: sticky;
top: 0;
z-index: 30;
/* #1373: declared in BOTH themes at the same 1px width so the header's rendered box
height never shifts between themes -- theme-bento.css only overrides border-color
below, it must never add/remove this border. Transparent on the newspaper baseline;
recolored to the neon seam in bento. inventing#1420: every sticky offset pinned to
this height (.product-bar below) now reads var(--site-header-height) rather than a
hardcoded px -- common.js's initHeaderHeightTracking() (ResizeObserver on .site-header)
keeps that variable equal to the REAL rendered height live, so this border and the
.bar's min-height only need to stay in sync with the no-JS/pre-first-paint FALLBACK
values declared in theme-newspaper.css's :root (and this file's 720px mobile override),
not with every consumer by hand. */
border-bottom: 1px solid transparent;
}
.site-header .bar {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--pad-x);
display: flex;
align-items: center;
min-height: 44px;
flex-wrap: wrap;
}
.nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--c-header-line);
color: var(--c-header-fg);
font-size: 20px;
line-height: 1;
padding: 6px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible { background: var(--c-header-hover); border-color: var(--c-header-line-strong); }
.brand-block {
display: flex;
align-items: center;
gap: 12px;
}
/* Pascal-triangle brand mark (#217, decided in #201): the favicon lattice, INVERTED
for in-header use (operator, 2026-07-27). It previously used a lighter-navy
(#1f3d80) tile intended to stand off the navy header, but that is only 1.36:1
against --c-header-bg #13285c — the tile was effectively invisible and the mark
read as loose dots floating on the bar, indistinguishable from the favicon's own
navy. A WHITE tile is 15.9:1 against the newspaper header and 14.4:1 against the
bento one, so the badge shape reads in both themes.
The apex uses #94700b (the --c-accent-ink value, the design system's "accent as
ink on a light surface" role) rather than the #f0b429 header gold: that gold is
only ~1.9:1 on white and would wash out at 26px.
The FAVICON keeps its navy tile — it sits on browser chrome, not on our bar.
Inlined as a data URI so ~400 hand-duplicated headers need no markup change; the
same rule ships in marketbrain/mb-style.css — keep them in sync. Brand-fixed
artwork: the URL-encoded colors are deliberately theme-invariant. */
.brand::before {
content: "";
flex: none;
width: 26px;
height: 26px;
margin-right: 9px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='white'/%3E%3Ccircle cx='32' cy='17' r='6' fill='%2394700b'/%3E%3Ccircle cx='23' cy='32' r='6' fill='%2313285c'/%3E%3Ccircle cx='41' cy='32' r='6' fill='%2313285c'/%3E%3Ccircle cx='14' cy='47' r='6' fill='%2313285c'/%3E%3Ccircle cx='32' cy='47' r='6' fill='%2313285c'/%3E%3Ccircle cx='50' cy='47' r='6' fill='%2313285c'/%3E%3C/svg%3E") center / contain no-repeat;
}
.brand {
display: inline-flex;
align-items: center;
color: var(--c-header-fg);
text-decoration: none;
font-family: var(--font-brand);
font-weight: 600;
font-size: 20px;
letter-spacing: 0.005em;
}
.brand .tick { color: var(--c-accent); }
.brand-tagline {
color: var(--c-header-faint);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1;
}
.site-nav {
display: flex;
gap: 2px;
flex-wrap: wrap;
margin-left: auto;
}
.site-nav a {
color: var(--c-header-fg-dim);
text-decoration: none;
padding: 6px 10px;
font-size: 13px;
border-radius: var(--radius-xs);
}
.site-nav a:hover { color: var(--c-header-fg); background: var(--c-header-hover); }
/* #1346 (Opus review round 1): also match aria-current="page" — the ~400 retained Tip Desk
article shells (marketbrain--*.html) still carry that attribute from before the
class="active" convention, and are not re-rendered/republished by every chrome change (see
marketbrain_render._migrate_article_chrome, which never touches site-header). Widening the
selector heals the whole archive with no republish; keep both branches in sync with the
other four copies (components.css mobile block, style.css x2, theme-bento.css,
marketbrain/mb-style.css x3). */
.site-nav a.active, .site-nav a[aria-current="page"] { color: var(--c-header-fg); border-bottom: 2px solid var(--c-accent); border-radius: 0; }
/* ---- dark-mode toggle (single icon button injected by common.js; state =
data-theme on , aria-pressed = dark on). The moon icon shows on the
light baseline; the bento theme layer swaps it for the sun. ---- */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-left: 14px;
padding: 0;
background: transparent;
border: 1px solid var(--c-header-line);
border-radius: var(--radius-pill);
color: var(--c-header-fg-dim);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { color: var(--c-header-fg); background: var(--c-header-hover); }
.theme-toggle__icon { display: block; }
.theme-toggle__icon--sun { display: none; }
/* ---- product sub-nav (per-product context bar under the company header) ---- */
.product-bar {
background: var(--c-bg);
border-bottom: 1px solid var(--c-line);
position: sticky;
/* inventing#1420 round-1 (the #1373 bug class recurring at a NEW trigger, 846-925px): a fixed
px offset assumes .site-header always renders at exactly one line's height, but
.site-header .bar and .site-nav both carry flex-wrap: wrap (by design, so the nav degrades
gracefully instead of overflowing) -- once the flat nav's item count/label widths outgrow
one line before the 720px hamburger breakpoint kicks in, the header silently grows a second
row and a hardcoded top here stops matching its REAL rendered height, so this bar rides up
under the header's bottom half. common.js's trackHeaderHeight() (ResizeObserver on
.site-header) sets --site-header-height to the header's live getBoundingClientRect().height
on load and on every resize/wrap/theme change, so this offset self-corrects for ANY future
header growth (more nav entries, longer labels, a font-size bump) with no breakpoint to
re-tune by hand. The px fallback covers the no-JS/pre-first-paint instant only -- .site-
header's 44px .bar min-height + the reserved 1px border-bottom (see the .site-header rule
above); bump it alongside that min-height, exactly as before. */
top: var(--site-header-height, 45px);
z-index: 19;
}
.product-bar .bar {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--pad-x);
display: flex;
align-items: center;
gap: 18px;
min-height: 46px;
flex-wrap: wrap;
}
.product-bar__title {
font-family: var(--font-brand);
font-weight: 600;
font-size: 15px;
color: var(--c-heading);
white-space: nowrap;
}
.product-nav {
display: flex;
gap: 2px;
flex-wrap: wrap;
overflow-x: auto;
}
.product-nav a {
color: var(--c-text-muted);
text-decoration: none;
padding: 12px 12px 10px;
font-size: 13.5px;
border-bottom: 2px solid transparent;
white-space: nowrap;
}
.product-nav a:hover { color: var(--c-heading); }
.product-nav a.active { color: var(--c-heading); font-weight: 600; border-bottom: 2px solid var(--c-accent); }
/* ---- Size Index pages (CAP-06): hero NAV figure + mini chart ---- */
.size-hero {
display: flex;
align-items: baseline;
gap: 14px;
margin: 6px 0 4px;
flex-wrap: wrap;
}
.size-hero__nav {
font-family: var(--font-data);
font-size: 36px;
font-weight: 700;
color: var(--c-heading);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.size-hero__change {
font-size: 16px;
font-variant-numeric: tabular-nums;
color: var(--c-text-muted);
}
.hero-change--pos { color: var(--c-pos); }
.hero-change--neg { color: var(--c-neg); }
.in-dev-note {
border: 1px solid var(--c-line);
border-left: 4px solid var(--c-accent);
background: var(--c-surface-alt);
border-radius: var(--radius-sm);
padding: 10px 14px;
margin: 14px 0;
color: var(--c-text-soft);
font-size: 14px;
max-width: 74ch;
}
.in-dev-note strong { color: var(--c-heading); }
svg.nav-chart {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--c-line);
border-radius: var(--radius-md);
background: var(--c-surface-alt);
padding: 4px;
}
.nav-chart__base {
stroke: var(--c-line);
stroke-dasharray: 3 3;
}
.nav-chart__trend { fill: none; }
.nav-chart__trend--pos { stroke: var(--c-pos); }
.nav-chart__trend--neg { stroke: var(--c-neg); }
.nav-chart__dot.nav-chart__trend--pos { fill: var(--c-pos); stroke: none; }
.nav-chart__dot.nav-chart__trend--neg { fill: var(--c-neg); stroke: none; }
.nav-chart__lbl {
fill: var(--c-text-muted);
font-size: 11px;
font-family: var(--font-sans);
}
/* ---- markets region: top-of-home NAV ticker (CAP-06) ----
Region contract: lives INSIDE as
. Newspaper renders the historical
full-bleed strip (negative 50%-50vw margins pull it out of the container);
bento re-maps it onto the grid as a contained tile. */
.nav-widget {
margin: calc(-1 * var(--sp-main-top)) calc(50% - 50vw) var(--sp-main-top);
border-bottom: 1px solid var(--c-line);
background: var(--c-inset);
padding: 9px max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
}
.nav-widget__grid {
display: flex;
align-items: baseline;
gap: 7px;
flex: 1 1 auto;
flex-wrap: wrap;
}
.nav-widget__cell {
border-left: 1px solid var(--c-line);
padding: 0 0 0 8px;
}
.nav-widget__cell--quality { border-left-color: var(--c-accent); }
/* #1346: each cell is a real link to its index page (a static, crawlable/no-JS nav path —
see index.html) styled to read exactly as the old non-link cell did. */
.nav-widget__link {
display: flex;
align-items: baseline;
gap: 5px;
color: inherit;
text-decoration: none;
}
.nav-widget__link:hover .nav-widget__label,
.nav-widget__link:hover .nav-widget__value { color: var(--c-accent); }
.nav-widget__label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--c-text-muted);
white-space: nowrap;
}
.nav-widget__value {
font-family: var(--font-data);
font-size: 15px;
font-weight: 600;
color: var(--c-heading);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.nav-widget__change {
font-size: 10px;
font-variant-numeric: tabular-nums;
color: var(--c-text-muted);
white-space: nowrap;
}
.nav-widget__change--pos { color: var(--c-pos); }
.nav-widget__change--neg { color: var(--c-neg); }
/* ---- company home: product cards + research teaser ---- */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--gap-grid);
}
/* Pipeline grids hold 5-up (size tiers) and 14-up (sectors) card sets; a narrower
min-track than the default product-grid lets 5 columns fit the content width
instead of wrapping a lone orphan card onto its own half-empty row. */
.product-grid--pipeline {
grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}
.product-card {
position: relative;
border: 1px solid var(--c-line);
border-top: 3px solid var(--c-accent);
border-radius: var(--radius-md);
padding: 20px 22px;
background: var(--c-surface);
display: flex;
flex-direction: column;
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.product-card--soon { border-top-color: var(--c-line); background: var(--c-surface-alt); }
.product-card:hover {
box-shadow: var(--shadow-2);
transform: translateY(-1px);
}
.product-card:focus-within {
box-shadow: 0 0 0 2px var(--c-focus);
}
.product-card h3 {
font-family: var(--font-brand);
font-size: 19px;
font-weight: 600;
color: var(--c-heading);
margin: 0 0 6px;
}
.product-card p { color: var(--c-text-soft); margin: 0 0 14px; }
.product-card .product-card__cta { margin-top: auto; }
.product-card__cta .btn {
white-space: nowrap;
}
/* ---- press region (home): The Tip Desk band ---- */
.home-marketbrain {
border-top: 3px solid var(--c-heading);
border-bottom: 1px solid var(--c-line);
padding: 24px 0 24px;
}
.home-marketbrain__masthead {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
align-items: end;
border-bottom: 2px solid var(--c-text);
padding-bottom: 18px;
}
.home-marketbrain__eyebrow {
color: var(--c-text-muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
margin: 0 0 8px;
text-transform: uppercase;
}
.home-marketbrain h2 {
border: 0;
color: var(--c-heading);
font-family: var(--font-display);
font-size: 38px;
font-weight: 700;
letter-spacing: 0;
line-height: 1.08;
margin: 0 0 10px;
padding: 0;
text-transform: none;
}
.home-marketbrain__masthead p:not(.home-marketbrain__eyebrow) {
color: var(--c-text-mid);
font-size: 16px;
margin: 0;
max-width: 78ch;
}
.home-marketbrain__cta {
border: 1px solid var(--c-heading);
border-radius: var(--radius-pill);
color: var(--c-heading);
font-size: 13px;
font-weight: 600;
padding: 8px 15px;
text-decoration: none;
white-space: nowrap;
}
.home-marketbrain__cta:hover {
background: var(--c-heading);
color: var(--c-bg);
}
.home-marketbrain__body {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 28px;
padding-top: 20px;
}
.home-marketbrain__latest {
border-left: 4px solid var(--c-accent);
padding-left: 18px;
}
.home-marketbrain__kicker {
color: var(--c-text-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
margin: 0 0 8px;
text-transform: uppercase;
}
.home-marketbrain__latest h3 {
color: var(--c-heading);
font-family: var(--font-brand);
font-size: 24px;
line-height: 1.18;
margin: 0 0 8px;
}
.home-marketbrain__latest h3 a {
color: inherit;
text-decoration: none;
}
.home-marketbrain__latest h3 a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.home-marketbrain__latest p {
color: var(--c-text-mid);
font-size: 16px;
margin-bottom: 8px;
}
.home-marketbrain__meta {
color: var(--c-text-muted) !important;
font-size: 12.5px !important;
margin: 0 !important;
}
.home-marketbrain__sections {
align-content: start;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.home-marketbrain__sections a {
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
color: var(--c-heading);
font-size: 12.5px;
font-weight: 600;
padding: 8px 10px;
text-decoration: none;
}
.home-marketbrain__sections a:hover {
border-color: var(--c-heading);
background: var(--c-surface-alt);
}
.status-chip {
display: inline-block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 9px;
border-radius: var(--radius-pill);
background: var(--c-chip-live-bg);
color: var(--c-chip-live-fg);
margin-left: 8px;
vertical-align: middle;
}
.status-chip--soon { background: var(--c-chip-bg); color: var(--c-chip-fg); }
.status-chip--beta { background: var(--c-chip-beta-bg); color: var(--c-chip-beta-fg); }
.title-chip { margin-left: 12px; }
/* ---- beta / fine-tuning notice ---- */
.beta-note {
border: 1px solid var(--c-line);
border-left: 4px solid var(--c-accent);
background: var(--c-surface-alt);
border-radius: var(--radius-sm);
padding: 10px 14px;
margin: 14px 0;
color: var(--c-text-soft);
font-size: 14px;
max-width: 74ch;
}
.beta-note strong { color: var(--c-heading); }
/* ---- AI-assisted analysis callout ---- */
.ai-note {
border: 1px solid var(--c-line);
border-left: 4px solid var(--c-accent);
background: var(--c-surface-alt);
border-radius: var(--radius-sm);
padding: 14px 18px;
color: var(--c-text-mid);
max-width: 74ch;
}
.ai-note strong { color: var(--c-heading); }
/* ---- layout ---- */
main {
max-width: var(--maxw);
margin: 0 auto;
padding: var(--sp-main-top) var(--pad-x) 28px;
width: 100%;
flex: 1 0 auto;
}
section { margin-bottom: var(--gap-section); }
main > section:last-child { margin-bottom: 0; }
h1 { font-size: 26px; margin: 0 0 4px; font-weight: 600; }
/* Visually hidden but available to screen readers / SEO (e.g. the homepage h1,
whose visible duplicate of the masthead wordmark was removed). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.page-header,
.hero {
margin-bottom: 40px;
}
.page-header h1,
.hero h1 {
font-family: var(--font-brand);
font-size: 33px;
font-weight: 700;
color: var(--c-heading);
letter-spacing: -0.01em;
margin: 4px 0 0;
}
.page-header h1::after,
.hero h1::after {
content: "";
display: block;
width: 54px;
height: 3px;
background: var(--c-accent);
border-radius: 2px;
margin: 12px 0 16px;
}
h2 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--c-heading);
border-bottom: 1px solid var(--c-line);
padding-bottom: 6px;
margin: 0 0 14px;
}
h3 { font-size: 15px; margin: 18px 0 6px; }
p { margin: 0 0 12px; }
.lead { font-size: 17px; color: var(--c-text-mid); max-width: none; }
.section-intro { max-width: none; color: var(--c-text-soft); }
.section-intro--wide { max-width: none; }
.muted { color: var(--c-text-muted); }
.asof { color: var(--c-text-muted); font-size: 12.5px; margin: 2px 0 14px; }
/* An "asof" line occasionally wraps a CTA link (e.g. "View all constituents"); give
it the same navy semibold, hover-only-underline treatment as other inline links
instead of the browser-default underlined blue. */
.asof a {
color: var(--c-heading);
font-weight: 600;
text-decoration: none;
}
.asof a:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---- hero stat pills ---- */
.pills { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0 8px; }
.pill {
border: 1px solid var(--c-line);
border-radius: var(--radius-md);
padding: 12px 18px;
min-width: 140px;
background: var(--c-surface-alt);
}
.pill .k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-muted); }
.pill .v { font-size: 22px; font-weight: 600; color: var(--c-heading); margin-top: 2px; }
/* ---- characteristics cards ---- */
.facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.fact {
border: 1px solid var(--c-line);
border-radius: var(--radius-md);
padding: 12px 14px;
background: var(--c-surface-alt);
}
.fact .k {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--c-text-muted);
}
.fact .v {
font-size: 16px;
font-weight: 600;
color: var(--c-heading);
margin-top: 3px;
line-height: 1.25;
}
/* ---- tables ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
table.data th, table.data td {
padding: 7px 10px;
text-align: right;
border-bottom: 1px solid var(--c-line);
white-space: nowrap;
}
table.data th:first-child, table.data td:first-child,
table.data th.l, table.data td.l { text-align: left; }
table.data thead th {
color: var(--c-heading);
font-weight: 600;
border-bottom: 2px solid var(--c-heading);
cursor: default;
user-select: none;
}
table.data.sortable thead th { cursor: pointer; }
table.data.sortable thead th:hover { background: var(--c-surface-alt); }
table.data tbody tr:nth-child(even) { background: var(--c-surface-alt); }
table.data td.num { font-variant-numeric: tabular-nums; }
.sort-ind { color: var(--c-accent-ink); font-size: 11px; }
.pos { color: var(--c-pos); }
.neg { color: var(--c-neg); }
.tag {
display: inline-block;
font-size: 11px;
padding: 1px 7px;
border-radius: var(--radius-pill);
background: var(--c-chip-bg);
color: var(--c-heading);
}
.tag.add { background: var(--c-chip-live-bg); color: var(--c-pos); }
/* ---- bars (sector weights) ---- */
.barlist { display: grid; grid-template-columns: 1fr; gap: 6px; max-width: 560px; }
.barlist .item { display: grid; grid-template-columns: 150px 1fr 56px; gap: 10px; align-items: center; }
.barlist .name { color: var(--c-text); font-size: 14px; }
.barlist .track { background: var(--c-surface-alt); border-radius: var(--radius-xs); height: 16px; overflow: hidden; }
.barlist .fill { display: block; background: var(--c-heading); height: 100%; }
.barlist .pct { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
/* ---- callout / placeholder ---- */
.callout {
border: 1px solid var(--c-line);
border-left: 4px solid var(--c-accent);
background: var(--c-surface-alt);
padding: 16px 18px;
border-radius: var(--radius-sm);
color: var(--c-text-soft);
}
.callout strong { color: var(--c-heading); }
.callout .back-link { margin-top: 8px; }
/* ---- news / press-release feed ---- */
.news-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
.news-item {
display: block;
border: 1px solid var(--c-line);
border-left: 4px solid var(--c-accent);
border-radius: var(--radius-sm);
padding: 14px 18px;
color: inherit;
text-decoration: none;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.news-item:hover {
box-shadow: var(--shadow-1);
transform: translateY(-1px);
}
.news-item__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.news-item__date { color: var(--c-text-muted); font-size: 13px; }
.news-item__title { margin: 2px 0 6px; font-size: 18px; color: var(--c-heading); }
.news-item__summary { margin: 0; color: var(--c-text-soft); font-size: 14px; }
.count-chip {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--c-text-muted);
margin-left: 6px;
}
.back-link { margin: 0 0 16px; font-size: 14px; }
.news-foot-link { margin-top: 22px; color: var(--c-text-muted); font-size: 14px; }
/* ---- toolbar ---- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar h2 { border: none; margin: 0; padding: 0; }
button.btn, a.btn {
border: 1px solid var(--c-heading);
background: var(--c-surface);
color: var(--c-heading);
padding: 7px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
cursor: pointer;
text-decoration: none;
}
button.btn:hover, a.btn:hover { background: var(--c-heading); color: var(--c-bg); }
/* Standalone navigational / CTA links render as pill buttons (not bare text). */
.link-cta,
.back-link a,
.article .article-back a {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--c-heading);
background: var(--c-surface);
color: var(--c-heading);
padding: 7px 15px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.link-cta:hover,
.back-link a:hover,
.article .article-back a:hover {
background: var(--c-heading);
color: var(--c-bg);
text-decoration: none;
transform: translateY(-1px);
box-shadow: var(--shadow-cta);
}
.back-link { margin: 0; }
.section-spaced { margin-top: 28px; }
/* ---- methodology prose ---- */
.prose { max-width: 74ch; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 5px; }
.prose code { background: var(--c-surface-alt); padding: 1px 5px; border-radius: var(--radius-xs); font-size: 13px; }
/* ---- research index ---- */
.research-list { list-style: none; margin: 0; padding: 0; }
.research-item {
position: relative;
border: 1px solid var(--c-line);
border-left: 4px solid var(--c-accent);
border-radius: var(--radius-md);
padding: 18px 20px;
margin-bottom: 14px;
max-width: 74ch;
transition: transform .15s ease, box-shadow .15s ease;
}
.research-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-3);
}
.research-item:focus-within { box-shadow: 0 0 0 2px var(--c-focus); }
.research-item__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 600;
color: var(--c-heading);
text-decoration: none;
}
/* The whole card is a click target: the title's overlay stretches over it. */
.research-item__title::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.research-item__title .arrow {
color: var(--c-accent-ink);
transition: transform .15s ease;
}
.research-item:hover .research-item__title .arrow { transform: translateX(4px); }
.research-item__summary { color: var(--c-text-soft); margin: 6px 0 8px; }
.research-item__meta { color: var(--c-text-muted); font-size: 12.5px; margin: 0; }
/* ---- Tip Desk front page ---- */
.marketbrain-feed { margin-top: 4px; }
.marketbrain-front {
display: grid;
gap: 22px;
}
.marketbrain-lead {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: end;
border-top: 3px solid var(--c-accent);
border-bottom: 1px solid var(--c-line);
padding: 20px 0 22px;
}
.marketbrain-lead h2 {
border: 0;
color: var(--c-heading);
font-family: var(--font-brand);
font-size: 28px;
font-weight: 700;
letter-spacing: 0;
line-height: 1.18;
margin: 0 0 10px;
padding: 0;
text-transform: none;
}
.marketbrain-lead h2 a,
.marketbrain-card h3 a,
.marketbrain-archive__row {
color: inherit;
text-decoration: none;
}
.marketbrain-lead h2 a:hover,
.marketbrain-card h3 a:hover,
.marketbrain-archive__row:hover .marketbrain-archive__title {
text-decoration: underline;
text-underline-offset: 3px;
}
.marketbrain-lead__dek {
color: var(--c-text-mid);
font-size: 17px;
margin: 0 0 10px;
max-width: 74ch;
}
.marketbrain-lead__cta {
align-self: end;
border: 1px solid var(--c-heading);
border-radius: var(--radius-pill);
color: var(--c-heading);
font-size: 13px;
font-weight: 600;
padding: 8px 15px;
text-decoration: none;
white-space: nowrap;
}
.marketbrain-lead__cta:hover {
background: var(--c-heading);
color: var(--c-bg);
}
.marketbrain-section-head {
align-items: center;
border-bottom: 1px solid var(--c-line);
display: flex;
justify-content: space-between;
margin: 6px 0 -4px;
}
.marketbrain-section-head h2 {
border: 0;
margin: 0;
padding: 0 0 7px;
}
.marketbrain-section-head--archive { margin-top: 4px; }
.marketbrain-archive__filter {
align-items: center;
display: flex;
gap: 8px;
padding-bottom: 7px;
}
.marketbrain-archive__filter-label {
color: var(--c-text-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.marketbrain-archive__filter select {
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
color: var(--c-heading);
background: var(--c-surface);
font: inherit;
font-size: 13px;
padding: 4px 8px;
}
.marketbrain-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.marketbrain-card {
border: 1px solid var(--c-line);
border-top: 3px solid var(--c-accent);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
min-height: 232px;
padding: 16px 17px;
background: var(--c-surface);
}
.marketbrain-card h3 {
color: var(--c-heading);
font-family: var(--font-brand);
font-size: 17px;
font-weight: 700;
line-height: 1.25;
margin: 0 0 8px;
}
.marketbrain-card__kicker,
.marketbrain-archive__series {
color: var(--c-text-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
margin: 0 0 8px;
text-transform: uppercase;
}
.marketbrain-card__dek {
color: var(--c-text-soft);
font-size: 14px;
margin: 0 0 12px;
}
.marketbrain-card__meta {
color: var(--c-text-muted);
font-size: 12.5px;
margin: auto 0 0;
}
.marketbrain-archive {
border-top: 1px solid var(--c-line);
}
.marketbrain-archive__row {
display: grid;
grid-template-columns: 132px 145px minmax(0, 1fr);
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid var(--c-line);
align-items: baseline;
}
.marketbrain-archive__date {
color: var(--c-text-muted);
font-size: 12.5px;
}
.marketbrain-archive__series {
margin: 0;
}
.marketbrain-archive__title {
color: var(--c-heading);
font-weight: 600;
}
.marketbrain-empty {
border: 1px solid var(--c-line);
border-radius: var(--radius-md);
color: var(--c-text-muted);
padding: 18px;
}
.marketbrain-empty p { margin: 0; }
/* ---- article (long-form research) ---- */
.article .article-back { margin: 0 0 14px; }
.article .article-meta { color: var(--c-text-muted); font-size: 12.5px; margin: 0 0 24px; }
/* Inline prose links: navy semibold, underline appears on hover only. The pill
selectors above are more specific, so .article-back stays a button. */
.prose a,
.article p a,
.article li a,
.site-footer .disclaimer a {
color: var(--c-heading);
font-weight: 600;
text-decoration: none;
}
.prose a:hover,
.article p a:hover,
.article li a:hover,
.site-footer .disclaimer a:hover {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1.5px;
}
.article p { max-width: 74ch; }
.article blockquote {
margin: 16px 0;
padding: 10px 16px;
border-left: 4px solid var(--c-accent);
background: var(--c-surface-alt);
color: var(--c-text-mid);
font-style: italic;
}
.article blockquote p { margin: 0; }
.article table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 6px 0 18px;
}
.article th, .article td {
padding: 7px 10px;
text-align: left;
border-bottom: 1px solid var(--c-line);
vertical-align: top;
}
.article thead th {
color: var(--c-heading);
font-weight: 600;
border-bottom: 2px solid var(--c-heading);
}
.article tbody tr:nth-child(even) { background: var(--c-surface-alt); }
.article hr { border: none; border-top: 1px solid var(--c-line); margin: 28px 0; }
.math-block {
margin: 16px 0;
padding: 6px 0;
text-align: center;
overflow-x: auto;
overflow-y: hidden;
}
.math-block math { font-size: 1.15em; }
/* ---- footer ---- */
.site-footer {
border-top: 1px solid var(--c-line);
background: var(--c-surface-alt);
color: var(--c-text-muted);
font-size: 12.5px;
flex: 0 0 auto;
}
.site-footer .inner { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--pad-x); }
.site-footer .disclaimer { max-width: none; }
.site-footer a { color: var(--c-link); }
.err { color: var(--c-neg); font-size: 14px; }
/* ---- performance chart ---- */
.range-btns {
display: flex;
gap: 4px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.range-btn {
border: 1px solid var(--c-line);
background: var(--c-surface);
color: var(--c-text-muted);
padding: 4px 12px;
border-radius: var(--radius-sm);
font-size: 12.5px;
cursor: pointer;
line-height: 1.4;
}
.range-btn:hover { border-color: var(--c-heading); color: var(--c-heading); }
.range-btn.active { border-color: var(--c-heading); background: var(--c-heading); color: var(--c-bg); }
.chart-container {
position: relative;
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
padding: 8px 4px 4px;
margin-bottom: 4px;
}
.chart-tooltip {
position: absolute;
pointer-events: none;
z-index: 10;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: 5px;
padding: 8px 12px;
box-shadow: var(--shadow-1);
font-size: 13px;
white-space: nowrap;
min-width: 158px;
}
.tt-date {
color: var(--c-text-muted);
font-size: 11px;
margin-bottom: 5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tt-row {
display: flex;
justify-content: space-between;
gap: 18px;
margin-top: 3px;
font-variant-numeric: tabular-nums;
}
.tt-navy { color: var(--c-heading); font-weight: 600; }
.tt-muted { color: var(--c-text-muted); }
.tt-gold { color: var(--c-accent-ink); font-weight: 600; }
.tt-diff { border-top: 1px solid var(--c-line); margin-top: 5px; padding-top: 5px; }
/* ============================================================
Mobile (phones / narrow tablets)
============================================================ */
@media (max-width: 720px) {
body { font-size: 16px; }
/* Overrides the :root fallback declared in theme-newspaper.css (45px, the DESKTOP .bar
height) for the pre-JS/no-JS instant at this breakpoint -- .site-header .bar grows to
min-height: 52px here, so the static fallback must grow with it too, exactly as before
common.js's initHeaderHeightTracking() takes over post-load. */
:root { --site-header-height: 53px; }
/* --- hamburger nav --- */
.site-header .bar { padding: 0 16px; min-height: 52px; }
.nav-toggle { display: block; order: 3; }
.brand-block { order: 1; }
.brand { font-size: 21px; }
.brand-tagline { display: none; }
.theme-toggle { order: 2; margin-left: auto; margin-right: 12px; }
.site-nav {
order: 4;
flex-basis: 100%;
display: none;
flex-direction: column;
gap: 0;
padding-bottom: 8px;
margin-left: 0;
}
.site-nav.open { display: flex; }
.site-nav a {
padding: 13px 8px;
font-size: 16px;
border-radius: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-nav a.active, .site-nav a[aria-current="page"] { border-bottom: 1px solid var(--c-accent); color: var(--c-accent); }
/* --- product sub-nav: horizontal scroll strip (institutional tab pattern) --- */
/* fallback only: .site-header .bar's 52px min-height + the reserved 1px border. JS keeps
--site-header-height live at every width (see the desktop .product-bar rule above); the
hamburger collapse means this breakpoint never sees the wrap defect itself, but the same
variable removes the need for two hand-maintained numbers to ever agree by luck. */
.product-bar { top: var(--site-header-height, 53px); }
.product-bar .bar {
padding: 0 16px;
gap: 0;
min-height: auto;
flex-direction: column;
align-items: stretch;
}
.product-bar__title { padding: 8px 0 2px; font-size: 14px; }
.product-nav {
flex-wrap: nowrap;
gap: 4px;
-webkit-overflow-scrolling: touch;
}
.product-nav a { padding: 10px 8px 8px; font-size: 13px; }
/* --- layout --- */
main { padding: 20px 16px 28px; }
.nav-widget {
margin: -20px calc(50% - 50vw) 20px;
padding: 10px 16px;
}
.nav-widget__grid {
gap: 8px 14px;
}
.nav-widget__cell {
padding-left: 10px;
}
.nav-widget__value {
font-size: 15px;
}
h1 { font-size: 22px; }
.page-header,
.hero { margin-bottom: 32px; }
.page-header h1,
.hero h1 { font-size: 26px; }
.lead { font-size: 16px; }
.title-chip {
display: inline-block;
margin: 8px 0 0;
}
.marketbrain-lead {
grid-template-columns: 1fr;
padding: 18px 0 20px;
}
.home-marketbrain {
padding: 22px 0 26px;
}
.home-marketbrain__masthead,
.home-marketbrain__body {
grid-template-columns: 1fr;
}
.home-marketbrain h2 {
font-size: 29px;
}
.home-marketbrain__cta {
justify-self: start;
}
.home-marketbrain__sections {
grid-template-columns: 1fr 1fr;
}
.marketbrain-lead h2 { font-size: 24px; }
.marketbrain-lead__dek { font-size: 16px; }
.marketbrain-lead__cta {
justify-self: start;
}
.marketbrain-grid {
grid-template-columns: 1fr;
}
.marketbrain-card {
min-height: 0;
}
.marketbrain-archive__row {
grid-template-columns: 1fr;
gap: 3px;
}
/* --- stat pills: full-width stack --- */
.pills { gap: 10px; }
.pill { flex: 1 1 100%; min-width: 0; }
/* --- characteristics: two-up cards on phones --- */
.facts { grid-template-columns: 1fr 1fr; gap: 10px; }
.fact { padding: 10px 12px; }
.fact .v { font-size: 15px; }
/* --- sector bars: stack name above the bar so names never clip --- */
.barlist { max-width: none; gap: 12px; }
.barlist .item {
grid-template-columns: 1fr auto;
grid-template-areas: "name pct" "track track";
column-gap: 10px;
row-gap: 4px;
}
.barlist .name { grid-area: name; font-size: 13px; }
.barlist .pct { grid-area: pct; }
.barlist .track { grid-area: track; }
/* --- generic tables scroll instead of clipping the page --- */
table.data { font-size: 13px; }
table.data th, table.data td { padding: 8px 8px; }
/* --- article tables scroll within their own box instead of the page --- */
.article table { display: block; overflow-x: auto; white-space: nowrap; font-size: 13px; }
.article th, .article td { white-space: normal; min-width: 8rem; }
/* --- constituents: render rows as tap-friendly cards --- */
table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
table.cards thead { display: none; }
table.cards tbody tr {
border: 1px solid var(--c-line);
border-radius: var(--radius-lg);
margin-bottom: 10px;
padding: 10px 12px;
background: var(--c-surface);
}
table.cards tbody tr:nth-child(even) { background: var(--c-surface); }
table.cards td {
border: none;
padding: 4px 0;
text-align: right;
display: flex;
justify-content: space-between;
align-items: baseline;
white-space: normal;
}
table.cards td::before {
content: attr(data-label);
color: var(--c-text-muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: left;
padding-right: 12px;
}
/* ticker = card title; hide its label and enlarge */
table.cards td.card-title {
font-size: 18px;
font-weight: 600;
color: var(--c-heading);
border-bottom: 1px dotted var(--c-line);
padding-bottom: 6px;
margin-bottom: 4px;
}
table.cards td.card-title::before { content: none; }
/* hide lower-value columns on mobile cards */
table.cards td.hide-mobile { display: none; }
.toolbar { gap: 8px; }
.toolbar h2 { font-size: 14px; }
}
/* ISX-06 — Indices directory: master NAV table change colours, family group rows,
and the live NAV line on the sector cards. Reuses the shared --c-pos/--c-neg tokens. */
.chg-pos { color: var(--c-pos); }
.chg-neg { color: var(--c-neg); }
#indices-table .row-group th {
text-align: left;
padding-top: 18px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--c-text-muted);
border-bottom: 2px solid var(--c-line);
}
.product-card__nav {
font-size: 14px;
color: var(--c-text-muted);
margin: 6px 0 0;
}
/* ---- WEB-11 — profitability robustness dashboard (bp#194) ---- */
.pf-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 16px 0;
}
.pf-controls label { font-size: 13px; }
.pf-controls select {
font-family: var(--font-sans);
font-size: 14px;
padding: 5px 8px;
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
background: var(--c-surface);
color: var(--c-text);
}
.pf-controls__note { font-size: 12.5px; }
.pf-chart-figure { margin: 0 0 8px; }
.pf-chart-figure figcaption {
font-size: 12.5px;
color: var(--c-text-muted);
margin-top: 6px;
}
svg.pf-dispersion-svg { width: 100%; height: auto; }
.pf-table-toggle {
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
padding: 10px 14px;
margin: 14px 0;
}
.pf-table-toggle summary {
cursor: pointer;
font-weight: 600;
color: var(--c-heading);
padding: 4px 0;
}
.pf-table-toggle[open] summary { margin-bottom: 8px; }
.pf-sensitivity-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.pf-sensitivity-grid h3 { font-size: 15px; margin: 0 0 8px; color: var(--c-heading); }
.pf-defs { margin: 0; }
.pf-defs dt { font-weight: 600; color: var(--c-heading); margin-top: 12px; }
.pf-defs dt:first-child { margin-top: 0; }
.pf-defs dd { margin: 2px 0 0; color: var(--c-text-soft); }
.pf-defs dd ul { margin: 6px 0 0; padding-left: 18px; }
.pf-source { font-size: 13px; color: var(--c-text-muted); margin-top: 12px; }
@media (max-width: 640px) {
.pf-controls { flex-direction: column; align-items: flex-start; }
}
/* Median-dot halo tracks the surface color so the dashboard reads correctly on
dark surfaces too (series colors themselves are categorical and theme-fixed). */
.pf-median-dot { stroke: var(--c-surface); stroke-width: 1; }
/* --- Economy Indicators page (#1371, Contract 19) ------------------------------------------
Dense 3-column grid, collapsing to 2 then 1 column at breakpoints (operator direction
2026-08-02: dense, more rows than the original 22-row proposal, still <=2 vertical screens
at desktop). One row per series: label + geo | latest value | delta | tiny sparkline | as-of. */
.ind-group { margin-top: 20px; }
.ind-group:first-child { margin-top: 0; }
.ind-group__title {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--c-text-muted);
margin: 0 0 6px;
border-bottom: 1px solid var(--c-line);
padding-bottom: 4px;
}
.ind-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px 16px;
}
.ind-row {
display: grid;
grid-template-columns: 1fr auto auto auto auto;
align-items: center;
gap: 6px;
padding: 5px 0;
border-bottom: 1px solid var(--c-line);
font-size: 12.5px;
line-height: 1.3;
}
.ind-row__label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--c-heading);
cursor: help;
}
.ind-row__geo {
color: var(--c-text-muted);
font-size: 10.5px;
font-weight: 600;
}
.ind-row__latest { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ind-row__units {
color: var(--c-text-muted);
font-size: 10px;
font-weight: 400;
margin-left: 2px;
}
.ind-row__delta {
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
color: var(--c-text-muted);
min-width: 3.5em;
}
.ind-row__delta.ind-delta--up { color: var(--c-pos); }
.ind-row__delta.ind-delta--down { color: var(--c-neg); }
.ind-spark { width: 44px; height: 16px; color: var(--c-text-muted); }
.ind-row__asof {
color: var(--c-text-muted);
font-size: 10.5px;
white-space: nowrap;
text-align: right;
}
.ind-group__sources {
margin: 8px 0 0;
font-size: 10.5px;
color: var(--c-text-muted);
line-height: 1.5;
}
.ind-group__sources strong { font-weight: 600; color: var(--c-text-soft); }
@media (max-width: 900px) {
.ind-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.ind-grid { grid-template-columns: 1fr; }
.ind-row {
grid-template-columns: 1fr auto;
grid-template-areas: "label latest" "delta asof" "spark spark";
}
/* Opus round-1 finding 9: grid-template-areas has no effect without a matching grid-area on
each child — before this, the rule was inert and the browser fell back to plain row-major
auto-placement (the sparkline landing mid-row instead of spanning full width). */
.ind-row__label { grid-area: label; }
.ind-row__latest { grid-area: latest; }
.ind-row__delta { grid-area: delta; }
.ind-spark { grid-area: spark; width: 100%; height: 20px; }
.ind-row__asof { grid-area: asof; }
}
/* ===== theme-bento.css ======================================== */
/* ============================================================================
theme-bento.css — bento theme: token overrides + component treatments +
layout maps (two-theme frontend, #191).
Character: modern modular bento grid over a cyberpunk night palette
(consumer/reference/color-palette-cyberpunk.md — graphite dusk surfaces,
electric cyan + neon magenta accents, sodium amber for caution states).
"Hints, not generic SaaS landing page": density and data seriousness stay;
surfaces, spans and glow do the talking. No italics anywhere in this theme.
Every selector is scoped under the root theme attribute and stays shallow:
[data-theme="bento"] + component/region target (spec FILE/STYLE ORG).
All rules assume the semantic token contract in tokens.css; anything not
overridden here intentionally inherits the newspaper baseline value.
========================================================================= */
/* ---- token overrides ---- */
:root[data-theme="bento"] {
/* page / surfaces (graphite dusk family) */
--c-bg: #2b2b31;
--c-surface: #32323a;
--c-surface-alt: #3a3a44;
--c-inset: #32323a;
/* text (phosphor family) */
--c-text: #e8e8f2;
--c-text-mid: #d8d8e6;
--c-text-soft: #b8b8c8;
--c-text-muted: #a4a4b8; /* faded signal, lightened to clear 4.5:1 on every surface */
--c-heading: #67dfff; /* scanline cyan — luminous but readable in bulk */
--c-link: #00d9ff; /* electric cyan */
/* accents / feedback */
--c-accent: #00d9ff;
--c-accent-2: #ff4fd8; /* neon magenta */
--c-accent-ink: #ff7ae6;
--c-line: #4a4a57;
--c-pos: #7ee787;
--c-neg: #ff6b81;
--c-data-dim: #8c8c9e;
--c-focus: #00d9ff;
/* site header */
--c-header-bg: #232329;
--c-header-fg: #e8e8f2;
--c-header-fg-dim: #b8b8c8;
--c-header-faint: #8c8c9e;
--c-header-line: rgba(0, 217, 255, 0.25);
--c-header-line-strong: rgba(0, 217, 255, 0.55);
--c-header-hover: #3a3a44;
/* chips */
--c-chip-bg: #3a3a44;
--c-chip-fg: #b8b8c8;
--c-chip-live-bg: rgba(126, 231, 135, 0.12);
--c-chip-live-fg: #7ee787;
--c-chip-beta-bg: rgba(217, 180, 91, 0.16);
--c-chip-beta-fg: #e6c97a;
/* shape: rounded, grouped, glowing */
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 18px;
--shadow-1: 0 0 0 1px rgba(0, 217, 255, 0.28), 0 4px 20px rgba(0, 0, 0, 0.45);
--shadow-2: 0 0 0 1px rgba(0, 217, 255, 0.35), 0 0 24px rgba(0, 217, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.5);
--shadow-3: 0 0 0 1px rgba(255, 79, 216, 0.35), 0 0 28px rgba(255, 79, 216, 0.14), 0 10px 28px rgba(0, 0, 0, 0.5);
--shadow-cta: 0 0 18px rgba(0, 217, 255, 0.35);
/* layout / density: wider selective gaps */
--maxw: 1180px;
--gap-grid: 18px;
--gap-section: 44px;
--sp-main-top: 32px;
/* type: no serif voice, terminal voice for data */
--font-display: var(--font-brand);
--font-data: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
scrollbar-color: #4a4a57 #2b2b31;
}
/* ---- atmosphere ---- */
[data-theme="bento"] body {
background:
repeating-linear-gradient(0deg, rgba(232, 232, 242, 0.02) 0 1px, transparent 1px 36px),
repeating-linear-gradient(90deg, rgba(232, 232, 242, 0.015) 0 1px, transparent 1px 36px),
radial-gradient(1100px 520px at 88% -10%, rgba(255, 79, 216, 0.07), transparent 60%),
radial-gradient(1250px 620px at -12% 0%, rgba(0, 217, 255, 0.08), transparent 55%),
var(--c-bg);
}
[data-theme="bento"] ::selection {
background: #ff4fd8;
color: #1c1c21;
}
/* ---- site header: dark chrome with a neon seam ---- */
/* #1373: recolor the border components.css already declares at 1px on the newspaper
baseline -- never add/remove border-bottom here, or the header's box height (and every
sticky offset pinned to it) shifts by 1px between themes and the whole bar's items
visibly jump. box-shadow is layout-neutral (no box space), safe to vary freely. */
[data-theme="bento"] .site-header {
background: linear-gradient(180deg, #232329, #26262e);
border-bottom-color: rgba(0, 217, 255, 0.35);
box-shadow: 0 1px 18px rgba(0, 217, 255, 0.12);
}
[data-theme="bento"] .brand .tick {
color: var(--c-link);
text-shadow: 0 0 12px rgba(0, 217, 255, 0.6);
}
[data-theme="bento"] .brand-tagline {
color: var(--c-accent-2);
text-shadow: 0 0 10px rgba(255, 79, 216, 0.4);
}
[data-theme="bento"] .site-nav a.active, [data-theme="bento"] .site-nav a[aria-current="page"] { border-bottom-color: var(--c-accent-2); }
[data-theme="bento"] .theme-toggle { color: var(--c-link); border-color: rgba(0, 217, 255, 0.4); }
[data-theme="bento"] .theme-toggle__icon--moon { display: none; }
[data-theme="bento"] .theme-toggle__icon--sun { display: block; }
/* ---- global voice ---- */
/* Terminal prefix on top-level section headers (h2 direct children of page
sections only — big display headings and toolbars keep their own voice). */
[data-theme="bento"] main > section > h2 {
color: var(--c-text-soft);
letter-spacing: 0.12em;
border-bottom-color: var(--c-line);
}
[data-theme="bento"] main > section > h2::before {
content: "// ";
color: var(--c-accent-2);
}
[data-theme="bento"] a:hover { text-shadow: 0 0 10px rgba(0, 217, 255, 0.45); }
[data-theme="bento"] .article blockquote { font-style: normal; }
/* ---- buttons + CTAs: cyan outline console keys ---- */
[data-theme="bento"] button.btn,
[data-theme="bento"] a.btn,
[data-theme="bento"] .link-cta,
[data-theme="bento"] .back-link a,
[data-theme="bento"] .article .article-back a {
background: transparent;
border-color: var(--c-link);
color: var(--c-link);
}
[data-theme="bento"] button.btn:hover,
[data-theme="bento"] a.btn:hover,
[data-theme="bento"] .link-cta:hover,
[data-theme="bento"] .back-link a:hover,
[data-theme="bento"] .article .article-back a:hover {
background: var(--c-link);
color: #16161a;
box-shadow: var(--shadow-cta);
}
[data-theme="bento"] .home-marketbrain__cta,
[data-theme="bento"] .marketbrain-lead__cta {
border-color: var(--c-accent-2);
color: var(--c-accent-2);
}
[data-theme="bento"] .home-marketbrain__cta:hover,
[data-theme="bento"] .marketbrain-lead__cta:hover {
background: var(--c-accent-2);
color: #16161a;
box-shadow: 0 0 18px rgba(255, 79, 216, 0.4);
}
/* ---- chips: status LEDs (static glow — no pulse animation, operator call
2026-07-18) ---- */
[data-theme="bento"] .status-chip {
border: 1px solid rgba(126, 231, 135, 0.5);
box-shadow: 0 0 8px rgba(126, 231, 135, 0.5);
}
[data-theme="bento"] .status-chip--beta,
[data-theme="bento"] .status-chip--soon {
box-shadow: none;
border-color: transparent;
}
[data-theme="bento"] .status-chip--beta { border-color: rgba(217, 180, 91, 0.45); }
/* ---- cards: contained tiles, neon on approach ---- */
[data-theme="bento"] .product-card {
border: 1px solid var(--c-line);
background: linear-gradient(180deg, #34343d, #2f2f37);
}
[data-theme="bento"] .product-card:hover {
border-color: rgba(0, 217, 255, 0.5);
box-shadow: var(--shadow-2);
transform: translateY(-2px);
}
[data-theme="bento"] .product-card--soon {
background: var(--c-surface-alt);
border-style: dashed;
}
[data-theme="bento"] .product-card p { color: var(--c-text-soft); }
/* ---- notes / callouts: amber caution strips ---- */
[data-theme="bento"] .beta-note,
[data-theme="bento"] .in-dev-note,
[data-theme="bento"] .ai-note,
[data-theme="bento"] .callout {
border-left-color: #d9b45b;
background: rgba(217, 180, 91, 0.07);
}
[data-theme="bento"] .beta-note strong,
[data-theme="bento"] .in-dev-note strong,
[data-theme="bento"] .ai-note strong,
[data-theme="bento"] .callout strong { color: #e6c97a; }
/* ---- news feed + research cards ---- */
[data-theme="bento"] .news-item {
border-left-color: var(--c-accent-2);
background: var(--c-surface);
}
[data-theme="bento"] .research-item { background: var(--c-surface); }
/* ---- tables: terminal readouts ---- */
/* Numeric cells and stat pills speak monospace in bento only (the newspaper
baseline inherits the body stack — do not move this into components.css). */
[data-theme="bento"] table.data td.num,
[data-theme="bento"] .pill .v { font-family: var(--font-data); }
[data-theme="bento"] table.data thead th { border-bottom-color: rgba(0, 217, 255, 0.55); }
[data-theme="bento"] table.data.sortable thead th:hover { background: rgba(0, 217, 255, 0.08); }
[data-theme="bento"] .barlist .fill {
background: linear-gradient(90deg, #00d9ff, #38bdf8);
box-shadow: 0 0 8px rgba(0, 217, 255, 0.35);
}
/* ---- footer ---- */
[data-theme="bento"] .site-footer {
background: #26262c;
border-top: 1px solid rgba(0, 217, 255, 0.2);
}
/* ============================================================================
PRESS region tile (data-region="press"): the newspaper band becomes a tall
contained module at every breakpoint — magenta editorial zone.
========================================================================= */
[data-theme="bento"] [data-region="press"] {
border: 1px solid var(--c-line);
border-radius: var(--radius-md);
background: linear-gradient(180deg, #34343d, #2f2f37);
padding: 20px;
display: flex;
flex-direction: column;
}
[data-theme="bento"] [data-region="press"] .home-marketbrain__masthead {
grid-template-columns: 1fr;
gap: 10px;
align-items: start;
border-bottom: 1px solid var(--c-line);
padding-bottom: 14px;
}
[data-theme="bento"] [data-region="press"] h2 {
font-size: 24px;
color: var(--c-text);
}
[data-theme="bento"] [data-region="press"] .home-marketbrain__eyebrow {
color: var(--c-accent-2);
text-shadow: 0 0 10px rgba(255, 79, 216, 0.35);
}
[data-theme="bento"] [data-region="press"] .home-marketbrain__masthead p:not(.home-marketbrain__eyebrow) {
font-size: 14px;
color: var(--c-text-soft);
}
[data-theme="bento"] [data-region="press"] .home-marketbrain__cta { justify-self: start; }
[data-theme="bento"] [data-region="press"] .home-marketbrain__body {
grid-template-columns: 1fr;
gap: 16px;
padding-top: 16px;
flex: 1;
align-content: start;
}
[data-theme="bento"] [data-region="press"] .home-marketbrain__latest {
border-left: 3px solid var(--c-accent-2);
}
[data-theme="bento"] [data-region="press"] .home-marketbrain__latest h3 {
color: var(--c-text);
font-size: 19px;
}
[data-theme="bento"] [data-region="press"] .home-marketbrain__latest h3 a:hover {
color: var(--c-link);
}
[data-theme="bento"] [data-region="press"] .home-marketbrain__latest p { font-size: 14px; }
[data-theme="bento"] [data-region="press"] .home-marketbrain__sections a {
background: rgba(0, 217, 255, 0.04);
border-color: var(--c-line);
border-radius: var(--radius-sm);
color: var(--c-heading);
}
[data-theme="bento"] [data-region="press"] .home-marketbrain__sections a:hover {
border-color: rgba(0, 217, 255, 0.5);
background: rgba(0, 217, 255, 0.1);
box-shadow: 0 0 12px rgba(0, 217, 255, 0.18);
}
/* ---- MARKETS region: colors at every breakpoint (tile-ification is
desktop-only, below). Values speak monospace cyan; a decorative feed label
replaces the plain strip voice. ---- */
[data-theme="bento"] [data-region="markets"] {
background: linear-gradient(180deg, #30303a, #2c2c34);
border-bottom: 1px solid rgba(0, 217, 255, 0.25);
}
[data-theme="bento"] [data-region="markets"] .nav-widget__value {
color: var(--c-link);
text-shadow: 0 0 8px rgba(0, 217, 255, 0.35);
}
[data-theme="bento"] [data-region="markets"] .nav-widget__cell { border-left-color: var(--c-line); }
[data-theme="bento"] [data-region="markets"] .nav-widget__cell--quality { border-left-color: var(--c-accent-2); }
/* ---- MARKETS region tile chrome (>= 721px: both grid maps place it as a
contained live-feed tile; mobile keeps the full-bleed strip). ---- */
@media (min-width: 721px) {
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] {
margin: 0;
padding: 16px 18px 14px;
border: 1px solid var(--c-line);
border-radius: var(--radius-md);
}
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"]::before {
content: "// LIVE NAV FEED";
display: block;
color: var(--c-accent-2);
font-family: var(--font-data);
font-size: 10.5px;
letter-spacing: 0.14em;
margin-bottom: 12px;
}
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] .nav-widget__grid {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] .nav-widget__cell {
border-left: none;
border-bottom: 1px dashed rgba(74, 74, 87, 0.9);
padding: 0 0 8px;
}
/* #1346: the cell's label/value/change are now wrapped in one
(a real link into the index page) — stretch it full width and put the space-between
spread it used to carry directly on .nav-widget__cell onto the link instead. */
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] .nav-widget__link {
display: flex;
justify-content: space-between;
width: 100%;
}
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] .nav-widget__cell:last-child {
border-bottom: none;
padding-bottom: 0;
}
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] .nav-widget__cell--quality {
border-bottom-color: rgba(255, 79, 216, 0.45);
}
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] .nav-widget__label {
font-size: 11px;
letter-spacing: 0.09em;
}
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] .nav-widget__value { font-size: 17px; }
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] .nav-widget__change { font-size: 11px; }
}
/* ---- LEAD / TOP-STORIES region tile chrome (#1346 Opus review round 2, MEDIUM 2): these two
regions lost their product-card children when the beta cards were deleted and were left as
bare, unstyled text sitting directly on the page background — everywhere else in the bento grid
map is a bordered/background tile (markets, press), so two bare text blocks next to two tiles
read as unfinished. Same treatment as markets/press's tile-ification, gated to the same
>= 721px range (mobile stays the documented "no mosaic forced onto narrow screens" plain flow,
surfaces/typography only). ---- */
@media (min-width: 721px) {
[data-theme="bento"] main[data-layout="home"] > [data-region="lead"],
[data-theme="bento"] main[data-layout="home"] > [data-region="top-stories"] {
border: 1px solid var(--c-line);
border-radius: var(--radius-md);
background: linear-gradient(180deg, #30303a, #2c2c34);
padding: 20px;
}
[data-theme="bento"] main[data-layout="home"] > [data-region="lead"] h2,
[data-theme="bento"] main[data-layout="home"] > [data-region="top-stories"] h2 {
font-size: 20px;
color: var(--c-text);
margin-bottom: 10px;
}
[data-theme="bento"] main[data-layout="home"] > [data-region="lead"] .section-intro,
[data-theme="bento"] main[data-layout="home"] > [data-region="top-stories"] .section-intro {
font-size: 14px;
color: var(--c-text-soft);
}
[data-theme="bento"] main[data-layout="home"] > [data-region="lead"] .section-intro a,
[data-theme="bento"] main[data-layout="home"] > [data-region="top-stories"] .section-intro a {
color: var(--c-link);
}
}
/* ============================================================================
HOME LAYOUT MAP — desktop (>= 981px): 12-column bento grid.
markets markets markets markets
lead lead stories stories
press press press press
markets full-width x1, lead 6x1, stories 6x1, press full-width x1. DOM order
(markets, lead, stories, press) is unchanged — placement is visual only, and
the region contract keeps reading/focus order coherent (spec CORE DECISION).
#1346 (Opus review round 1, MINOR 4): re-flowed from the pre-#1346 8x2 `lead`
tile. Both `lead` (AI-Enabled Indices) and `stories` (Traditional Indices) lost
their product-card grids to the beta-card deletion and are now a heading + one
line of copy each — an 8-column, 2-row tile left one of them as a large mostly
empty box next to the compact `markets`/`press` tiles. Putting `markets` full
width up top (matching its newspaper-theme full-bleed treatment) and `lead` /
`stories` side by side as equal, single-row tiles removes the empty space
without touching the region contract. */
@media (min-width: 981px) {
[data-theme="bento"] main[data-layout="home"] {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-areas:
"markets markets markets markets markets markets markets markets markets markets markets markets"
"lead lead lead lead lead lead stories stories stories stories stories stories"
"press press press press press press press press press press press press";
gap: var(--gap-grid);
align-items: stretch;
}
[data-theme="bento"] main[data-layout="home"] > section { margin-bottom: 0; }
[data-theme="bento"] main[data-layout="home"] > [data-region="lead"] { grid-area: lead; }
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] { grid-area: markets; }
[data-theme="bento"] main[data-layout="home"] > [data-region="top-stories"] { grid-area: stories; }
[data-theme="bento"] main[data-layout="home"] > [data-region="press"] { grid-area: press; }
/* #1346 (Opus review round 2, MEDIUM 2): `markets` widened from a narrow 4-column tile to the
full 12-column row here, but its interior `.nav-widget__grid` kept the single-column stack
the narrow tile needed — six full-width, space-between rows with the value/change columns
nowhere near aligned. Lay the 6 cells (Quality + 5 size tiers) out in a proper 3-column
interior grid instead, 2 rows of 3, so the wide tile reads as a compact feed grid rather than
six stretched rows. */
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] .nav-widget__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 24px;
}
/* `press` also grew to a full-width row here (was a narrow 4x2 tile) — give it the same
two-column interior split tablet already uses, so its content isn't one super-wide column. */
[data-theme="bento"] main[data-layout="home"] > [data-region="press"] .home-marketbrain__body {
grid-template-columns: minmax(0, 1fr) 280px;
}
}
/* ============================================================================
HOME LAYOUT MAP — tablet (721–980px): reduced span variation.
lead lead markets
press press press
stories stories stories
========================================================================= */
@media (min-width: 721px) and (max-width: 980px) {
[data-theme="bento"] main[data-layout="home"] {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"lead lead lead lead markets markets"
"press press press press press press"
"stories stories stories stories stories stories";
gap: var(--gap-grid);
}
[data-theme="bento"] main[data-layout="home"] > section { margin-bottom: 0; }
[data-theme="bento"] main[data-layout="home"] > [data-region="lead"] { grid-area: lead; }
[data-theme="bento"] main[data-layout="home"] > [data-region="markets"] { grid-area: markets; }
[data-theme="bento"] main[data-layout="home"] > [data-region="top-stories"] { grid-area: stories; }
[data-theme="bento"] main[data-layout="home"] > [data-region="press"] { grid-area: press; }
/* press keeps a two-column interior on tablet — it owns a full row here */
[data-theme="bento"] main[data-layout="home"] > [data-region="press"] .home-marketbrain__body {
grid-template-columns: minmax(0, 1fr) 240px;
}
}
/* Mobile (<= 720px): converge to the shared 1-column flow. Bento identity
stays via surfaces/typography only — no mosaic forced onto narrow screens
(spec RESPONSIVE). The markets strip bleeds full-width like newspaper but
keeps its dark feed styling from the base bento rules above. */