/* ============================================================================
Leif List SUPPLIER page — "Editorial / Navy" theme (page-specific surfaces)
----------------------------------------------------------------------------
Load order in :
../styles/theme.css (tokens · base · product cards · buttons)
../styles/theme-chrome.css (header · category sub-nav · footer)
./theme-supplier.css (THIS FILE — supplier score card, metric
bands, attribute pills, partner profile)
All rules scoped under `.ed-theme`; consume tokens, never raw hex. Semantic
colors (score ring, tier pills, strength/gap, metric tags) are intentionally
LEFT ALONE — they carry meaning. This file retunes surfaces + typography for
cohesion with the rest of the site. Flag off ⇒ inert ⇒ original page.
============================================================================ */
/* =========================================================
Card surfaces — white on the warm canvas, token border,
softer editorial shadow (the base uses a heavier drop).
========================================================= */
.ed-theme .card,
.ed-theme .supplier-card-header,
.ed-theme .supplier-section--summary,
.ed-theme .supplier-section--peers,
.ed-theme .supplier-section--checks {
background: var(--leif-surface);
border: 1px solid var(--leif-border);
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.ed-theme .card.supplier-card { background: transparent; border: none; box-shadow: none; }
/* Band dividers inside the header card */
.ed-theme .header-band + .header-band { border-top: 1px solid var(--leif-border); }
/* =========================================================
Typography — titles to ink @ weight 500 (base uses 800),
supporting text to neutrals.
========================================================= */
.ed-theme .supplier-section-title,
.ed-theme .supplier-section--checks h3,
.ed-theme .supplier-title { color: var(--leif-text); } /* weight: type-face section */
.ed-theme .supplier-section--checks .supplier-section-title { color: var(--leif-text); }
.ed-theme .header-type-label { color: var(--leif-text-secondary); }
.ed-theme .header-meta-item { color: var(--leif-text-secondary); }
.ed-theme .header-meta-item strong { color: var(--leif-text); }
.ed-theme .header-narrative-text { color: var(--leif-text); }
.ed-theme .supplier-section--summary p,
.ed-theme .supplier-section--summary #supplierSummary { color: var(--leif-text); }
.ed-theme .checks-subtitle { color: var(--leif-text-muted); }
.ed-theme .attr-group-label { color: var(--leif-text-secondary); }
/* "See full breakdown" / anchor links → green action */
.ed-theme .header-breakdown-link { color: var(--leif-action-clay); font-weight: 500; }
.ed-theme .header-breakdown-link:hover { color: var(--leif-action-clay-dark); }
/* =========================================================
Attribute pills — "yes" stays eco-green; neutral/unknown pills
fall back to token neutrals.
========================================================= */
.ed-theme .attr-pill--yes {
background: var(--leif-score-green-tint);
border-color: var(--leif-score-green);
color: var(--leif-score-green);
}
/* =========================================================
Partner profile (affiliate brands) — surfaces + typography.
Rules out-specify supplier-partner.css's #partnerProfile scope.
Semantic bits (tier pill, strengths/gaps, commit icons) untouched.
========================================================= */
.ed-theme #partnerProfile .partner-section-title { color: var(--leif-text); }
.ed-theme #partnerProfile .partner-section-subtitle { color: var(--leif-text-secondary); }
.ed-theme #partnerProfile .partner-title { color: var(--leif-text); }
.ed-theme #partnerProfile .partner-summary-body { color: var(--leif-text); }
.ed-theme #partnerProfile .partner-products-count { color: var(--leif-text-secondary); }
.ed-theme #partnerProfile .partner-affiliate-note { color: var(--leif-text-muted); }
.ed-theme #partnerProfile .partner-commit-col-title { color: var(--leif-text-secondary); }
.ed-theme #partnerProfile .partner-type-label { color: var(--leif-text-secondary); }
/* Disclosure banner → soft neutral card */
.ed-theme .partner-disclosure-banner,
.ed-theme #partnerProfile .partner-disclosure-banner {
background: var(--leif-canvas);
border: 1px solid var(--leif-border);
color: var(--leif-text-secondary);
}
.ed-theme #partnerProfile .partner-disclosure-content strong { color: var(--leif-text); }
/* Visit-site button → green action */
.ed-theme #partnerProfile .partner-visit-btn {
background: var(--leif-action-clay);
color: #fff;
border-radius: 999px;
}
.ed-theme #partnerProfile .partner-visit-btn:hover { background: var(--leif-action-clay-dark); }
/* =========================================================
Type faces — Fraunces (display) + Inter (body/UI), matching
the homepage's section 9 in homepage/theme-editorial.css.
Both faces are self-hosted (see ../styles/fonts.css for why
this is not a fonts.googleapis.com — the extension CSP
blocks that outright); supplier.html already links fonts.css
and preloads both latin woff2s.
Only the FACE, weight and tracking change — every font-size in
supplier.css is left alone, so nothing reflows. Scoped under
.ed-theme like the rest of this file, so ?theme=legacy still
renders the original system-ui page.
The long selector lists exist because supplier.css pins a raw
`system-ui …` / `'Inter', system-ui …` stack on ~20 component
classes; a bare `body` rule loses to every one of them. If you
add a font-family to supplier.css, add the selector here too.
========================================================= */
/* The base face + the h1/h2/h3 display rule now live in
../styles/theme-chrome.css, shared with every other themed page.
What stays here is supplier-only. */
/* Body / UI face — re-points supplier.css's hard-coded stacks.
.product-card-title is listed because it is an
("YOUR PRODUCT")
but reads as an eyebrow: 13px, uppercase, 0.1em tracking. It has to be
pulled back out of the display rule below. */
.ed-theme .header-meta-item,
.ed-theme .header-sector-delta,
.ed-theme .header-narrative-text,
.ed-theme .header-breakdown-link,
.ed-theme .supplier-section--summary p,
.ed-theme .supplier-section--summary #supplierSummary,
.ed-theme .supplier-section--peers > #supplierSummary,
.ed-theme .ai-interpretation-body,
.ed-theme .ai-disclaimer,
.ed-theme .alt-sort-toggle,
.ed-theme button,
.ed-theme input,
.ed-theme select,
.ed-theme textarea,
.ed-theme .product-card-title { font-family: var(--font-sans); }
/* Display face — the brand name, every section heading, the product
card titles, and the large stat numerals.
Product titles are here to match the homepage: there the card title is
an
that theme-editorial.css sweeps up with
its h1/h2/h3 display rule. The supplier page builds the same card with
an
(supplier.js) and the replacement cards use .suggested-title,
so neither is caught by the tag rule — both are named explicitly.
Stat numerals get the same treatment as the homepage's .score-step-num.
Small uppercase micro-copy stays out: labels set in a display serif
turn to mush. Line-height is left alone for the titles and numerals —
the homepage's 1.08 would clip the 2-line -webkit-line-clamp here.
h1/h2/h3 are not repeated here — theme-chrome.css already gives every
themed page the same face/weight/tracking on those tags. */
.ed-theme .supplier-title,
.ed-theme .supplier-section-title,
.ed-theme .supplier-section--checks h3,
.ed-theme .product-title,
.ed-theme .suggested-title,
.ed-theme #partnerProfile .partner-title,
.ed-theme #partnerProfile .partner-section-title {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.02em;
font-optical-sizing: auto;
}
/* Headings only — the stat numerals keep supplier.css's tight 1.1
leading, so they are left out of this rule. */
.ed-theme h1,
.ed-theme h2,
.ed-theme h3,
.ed-theme .supplier-title,
.ed-theme .supplier-section-title,
.ed-theme .supplier-section--checks h3,
.ed-theme #partnerProfile .partner-title,
.ed-theme #partnerProfile .partner-section-title { line-height: 1.15; }
/* =========================================================
Brand-detail switcher — four boxes, not one bar
---------------------------------------------------------
Certifications / Attributes / Controversies / Sources shipped as one
segmented bar with a pastel tint per segment. Split into four separate
offset-block buttons (theme.css --pop-shadow-ctl) so each reads as its own
thing, and drop the tints: the section is identified by its label and icon,
and colour on this page belongs to the rating.
========================================================= */
.ed-theme .summary-tabs {
border: none;
background: transparent;
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.ed-theme .summary-tab-bar {
background: transparent;
border-bottom: none;
gap: 12px;
padding: 2px 5px 6px 0;
flex-wrap: wrap;
}
.ed-theme .summary-tab,
.ed-theme .summary-tab--mauve,
.ed-theme .summary-tab--sage,
.ed-theme .summary-tab--slate,
.ed-theme .summary-tab--sky,
.ed-theme .summary-tab--amber,
.ed-theme .summary-tab--summary {
background: var(--leif-surface);
color: var(--ed-tile-ink);
border: 2px solid var(--ed-tile-ink);
border-bottom: 2px solid var(--ed-tile-ink);
border-radius: 12px;
box-shadow: var(--pop-shadow-ctl);
padding: 11px 14px;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
/* The separator rule between segments has no job once they are separate. */
.ed-theme .summary-tab + .summary-tab { border-left: 2px solid var(--ed-tile-ink); }
.ed-theme .summary-tab:hover {
background: var(--ed-tile-bg);
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--ed-tile-ink);
}
/* Open section: fully pressed into its block and filled, so which one you are
reading is unmistakable. */
.ed-theme .summary-tab.active,
.ed-theme .summary-tab--mauve.active,
.ed-theme .summary-tab--sage.active,
.ed-theme .summary-tab--slate.active,
.ed-theme .summary-tab--sky.active,
.ed-theme .summary-tab--amber.active,
.ed-theme .summary-tab--summary.active {
background: var(--ed-tile-ink);
color: #ffffff;
border-color: var(--ed-tile-ink);
border-bottom-color: var(--ed-tile-ink);
transform: translate(4px, 4px);
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
.ed-theme .summary-tab { transition: none; }
.ed-theme .summary-tab:hover,
.ed-theme .summary-tab.active { transform: none; }
}
/* =========================================================
Pillar outlook tiles — one box per pillar
---------------------------------------------------------
Environmental / Labor rights / Compliance sat in the right rail as three
faint grey panels reading as one block. Same offset-block treatment as the
section buttons, at the control-sized offset (theme.css --pop-shadow-ctl) —
these tiles are small, and a 7px block behind a 60px tile is too much.
Covers both rails: .likely-pillar-tile (estimated) and .pillar-wheel
(verified, with the score ring).
========================================================= */
.ed-theme .likely-pillar-tile,
.ed-theme .scorebody-col--right .pillar-wheel {
background: var(--leif-surface);
border: 2px solid var(--ed-tile-ink);
border-radius: 12px;
box-shadow: var(--pop-shadow-ctl);
}
/* The block eats into the gap below each tile, so the stack needs more room. */
.ed-theme .likely-pillars-grid { gap: 16px; }
.ed-theme .scorebody-col--right .pillar-wheels-row { gap: 16px; }
.ed-theme .likely-pillar-label { color: var(--ed-tile-ink); }
/* The rail's own divider is redundant once the tiles are boxed. */
.ed-theme .scorebody-col--right { border-left: none; }
/* =========================================================
Buy CTA — navy button on a deeper-navy block
---------------------------------------------------------
The button shipped with a 2.5s pulse that animates its shadow and fill. A
solid block behind an animated shadow reads as a glitch, so under this theme
the pulse gives way to the block and the button presses into it on hover and
click. Fill stays --leif-action-blue and the block is --leif-ink: same navy
family, so the buy button keeps its "blue = purchase" meaning and green stays
reserved for eco + Leif's own CTAs.
========================================================= */
.ed-theme .btn-cta-amazon {
animation: none;
background: var(--leif-action-blue);
box-shadow: 6px 6px 0 var(--leif-ink);
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.ed-theme .btn-cta-amazon:hover {
animation: none;
background: var(--leif-action-blue);
transform: translate(3px, 3px);
box-shadow: 3px 3px 0 var(--leif-ink);
}
/* Fully pressed on click — the block disappears under the button. */
.ed-theme .btn-cta-amazon:active {
transform: translate(6px, 6px);
box-shadow: none;
}
.ed-theme .btn-cta-amazon:focus-visible {
outline: 2px solid var(--leif-ink);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.ed-theme .btn-cta-amazon { transition: none; }
.ed-theme .btn-cta-amazon:hover { transform: none; box-shadow: 6px 6px 0 var(--leif-ink); }
}
/* =========================================================
Finding cards — navy rule, no block [REVERTIBLE BLOCK]
---------------------------------------------------------
Controversies and Certifications/positives items shipped white-on-white with
a grey hairline inside an already-white card, so they barely read as boxes.
A navy rule gives them the same white-and-navy family as everything else.
Deliberately NO offset block: on this page the block marks things you touch
(section buttons, pillar tiles, buy CTA) and these are read-only. It would
also be the third layer of navy shadow in one column.
To switch to blocks instead, uncomment the box-shadow below.
To remove entirely: delete this block (or git checkout this file).
========================================================= */
.ed-theme .ctx-list--controversies li,
.ed-theme .ctx-list--positives li {
border: 2px solid var(--ed-tile-ink);
border-radius: 12px;
/* box-shadow: var(--pop-shadow-ctl); */
}
.ed-theme .ctx-list--controversies li:hover,
.ed-theme .ctx-list--positives li:hover {
box-shadow: none;
border-color: var(--ed-tile-ink);
}
.ed-theme .summary-switcher-panels .ctx-list { gap: 12px; }
/* =========== end revertible block =========== */
/* =========================================================
Supplier card — no card [REVERTIBLE BLOCK]
---------------------------------------------------------
The brand scorecard sheds its white panel and sits directly on the canvas:
no background, border, shadow or horizontal band padding, so the content
starts at the page margin. The product card on the left keeps its panel —
only this one opens up. Pair with the pillar strip below.
========================================================= */
.ed-theme .supplier-card-header {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.ed-theme .supplier-card-header .header-band { padding-left: 0; padding-right: 0; }
.ed-theme .supplier-card-header .header-band--identity {
background: none;
border-radius: 0;
padding-top: 0;
}
.ed-theme .header-scorecard-main > .header-band--identity { border-radius: 0; }
/* The band dividers were card-internal furniture; on open canvas they read as
stray rules across the page. */
.ed-theme .supplier-card-header .header-band + .header-band { border-top: none; }
/* Section buttons + panels lose the card's 24px inset for the same reason. */
.ed-theme .summary-switcher { margin-left: 0; margin-right: 0; }
.ed-theme .summary-switcher-panels.summary-tab-panels { padding-left: 0; padding-right: 0; }
/* Type scales up with the box: this is a page-level surface now, not a boxed
card, and the prose runs the full content width — so the copy also takes a
readable measure cap instead of running edge to edge. */
.ed-theme .supplier-card-header .header-narrative-text,
.ed-theme .supplier-card-header .header-interpretation-text {
font-size: 16.5px;
line-height: 1.62;
/* No measure cap: the summary runs the same width as the section button row
below it, so both share the page's right margin. */
max-width: none;
}
.ed-theme .supplier-card-header .header-narrative-text .header-narrative-bullets li {
margin-bottom: 9px;
}
.ed-theme .supplier-card-header .supplier-title { font-size: 30px; }
/* =========================================================
Pillar outlook — horizontal strip under the title
---------------------------------------------------------
Same three tiles, same content, laid across instead of stacked in a rail.
auto-fit lets them wrap rather than crush on a narrow viewport. The tiles
keep the offset-block treatment from the section above.
========================================================= */
.ed-theme .scorebody-col--strip {
flex: none;
width: auto;
align-self: auto;
border-left: none;
padding: 2px 0 14px;
}
.ed-theme .scorebody-col--strip.header-band--pillars { display: block; }
.ed-theme .scorebody-col--strip .likely-pillars-grid,
.ed-theme .scorebody-col--strip .pillar-wheels-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
flex-direction: row;
}
/* In a rail the wheel boxes stretched to fill the column height; across the top
they size to their content. */
.ed-theme .scorebody-col--strip .pillar-wheel { flex: none; min-height: 0; }
/* The rail used to hide itself when a section opened, to give the panel the
card's full width. A strip costs one row, so it stays put and the page stops
reflowing every time you open a section. */
.ed-theme .supplier-card-header.section-open .scorebody-col--strip { display: block; }
/* =========== end revertible block =========== */
/* =========================================================
Pillar outlook — one plain row [REVERTIBLE BLOCK]
---------------------------------------------------------
No boxes, no pill chrome, no surface: each pillar is its label followed by
its rating (dot included, since the dot is the rating colour), and the three
are divided by a hairline. Reads as a single line of type under the title.
The per-pillar "From the brand's public disclosures" caption is hidden here —
it repeated three times across one row and broke the line. Provenance still
shows in the RESEARCHED / AI-ESTIMATED badge beside the PILLAR OUTLOOK label.
========================================================= */
.ed-theme .scorebody-col--strip .likely-pillars-grid {
display: flex;
flex-wrap: wrap;
grid-template-columns: none;
align-items: center;
gap: 8px 0;
}
.ed-theme .scorebody-col--strip .likely-pillar-tile {
flex: 0 1 auto;
flex-direction: row;
align-items: center;
gap: 7px;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
padding: 0 11px;
}
/* The hairline between pillars — the only chrome left in the row. */
.ed-theme .scorebody-col--strip .likely-pillar-tile + .likely-pillar-tile {
border-left: 1px solid var(--leif-border);
}
.ed-theme .scorebody-col--strip .likely-pillar-tile:first-child { padding-left: 0; }
.ed-theme .scorebody-col--strip .likely-pillar-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
/* The explainer, attached to the thing it explains. Replaces the orphaned
"Methodology" pill that used to float in the card's top-right corner. */
.ed-theme .how-we-rate-link {
margin-left: 2px;
padding: 0;
border: none;
background: none;
font: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--leif-action-clay, #8a5a3c);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.ed-theme .how-we-rate-link:hover { color: var(--leif-action-clay-dark, #6d4530); }
/* Belt and braces: the corner pill is no longer built, but a cached render
path must not resurrect it. */
.ed-theme .methodology-pill { display: none !important; }
/* ---- 2. Section nav ---------------------------------------------------- */
/* Summary is a real button on every viewport now — first in the row, and the
way back from any open panel. supplier.css hides it outside the phone
breakpoint; this sheet loads after, so it wins. */
.ed-theme .summary-tab--summary-pill { display: inline-flex; }
/* The bar sits between the pillar row and the content it swaps, so it holds
still whether the summary or a panel is showing. Rules above and below make
it read as the divider it now is. */
.ed-theme .summary-switcher {
margin-top: 18px;
padding: 14px 0 0;
border-top: 1px solid var(--leif-border);
}
.ed-theme .summary-switcher-panels.summary-tab-panels { padding-top: 4px; }
.ed-theme .header-scorecard-main > .scorebody-col--left { padding-top: 6px; }
/* "Back to summary" is retired — the Summary button does that job from a fixed
position. Any instance left in cached markup stays out of the layout. */
.ed-theme .summary-switcher-back { display: none !important; }
/* ---- 3. Panel content -------------------------------------------------- */
/* Evidence tier as a heading rather than a sentence: three groups run down the
Certifications tab and which one a claim sits in is the point. */
.ed-theme .ctx-group + .ctx-group { margin-top: 22px; }
.ed-theme .ctx-group-head {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 3px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.ed-theme .ctx-group-head svg { flex: none; }
.ed-theme .ctx-group-head--verified { color: var(--leif-score-green, #2e7d32); }
.ed-theme .ctx-group-head--sourced { color: var(--leif-text-secondary, #4b5563); }
.ed-theme .ctx-group-head--ai { color: #8a6e3c; }
.ed-theme .ctx-group-note {
margin: 0 0 12px;
font-size: 12px;
line-height: 1.5;
color: var(--leif-text-muted, #6b7280);
}
/* Divided list: badge + title on one line, detail below, hairline between.
Replaces the card-per-finding treatment, which spent a lot of chrome to say
what a rule between rows says for free. */
.ed-theme .summary-switcher-panels .ctx-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--leif-border);
}
.ed-theme .summary-switcher-panels .ctx-list > li {
display: block;
margin: 0;
padding: 13px 0;
border: none;
border-bottom: 1px solid var(--leif-border);
border-radius: 0;
background: none;
box-shadow: none;
}
.ed-theme .summary-switcher-panels .ctx-item-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.ed-theme .summary-switcher-panels .ctx-item-title {
font-size: 14.5px;
font-weight: 700;
line-height: 1.3;
color: var(--leif-text);
}
.ed-theme .summary-switcher-panels .ctx-item-detail {
margin-top: 5px;
font-size: 13.5px;
line-height: 1.55;
color: var(--leif-text-secondary);
}
.ed-theme .summary-switcher-panels .ctx-item-detail .ctx-concern-cite { margin-top: 5px; }
.ed-theme .summary-switcher-panels .ctx-item-head > .ctx-tag,
.ed-theme .summary-switcher-panels .ctx-item-head > .ctx-severity,
.ed-theme .summary-switcher-panels .ctx-item-head > .ctx-cert-impact { margin: 0; }
/* =========================================================
Open panels — no white slab [RESTORED]
---------------------------------------------------------
With the card gone the panels have to sit on canvas too. The base sheet
already resets the attributes panel, but the theme's card rule re-applied a
white surface at equal specificity and won on load order; this outranks it.
Deleted by accident during this session's cleanup pass (an over-greedy
regex aimed at dead pillar-tile rules) and restored here — its loss is what
put the Attributes panel back on a white card while the others stayed flat.
========================================================= */
.ed-theme .summary-switcher-panels .supplier-section--checks,
.ed-theme .summary-switcher-panels .ctx-section,
.ed-theme .summary-switcher-panels > .supplier-section {
background: transparent;
border: none;
box-shadow: none;
padding-left: 0;
padding-right: 0;
}
/* ---- 3b. Sources panel joins the divided list ------------------------- */
/* The divided-list pass reached four of the five panels and stopped at this
one. Its rows are `.ctx-list > li` like the rest, so the rules matched —
but the theme's source-card rule (`ul.ctx-list--fetched li.source-group`,
two element selectors deep) outranked them, and the panel kept its boxed
navy cards while Certifications and Controversies went flat. Reading the
five tabs in a row, that looked like two different pages.
Same treatment as every other panel now: a row per host, hairline between,
no box. The accordion still works — the chevron and the page count carry
it, which is what they were doing inside the box anyway. */
.ed-theme .summary-switcher-panels ul.ctx-list--fetched { gap: 0; }
.ed-theme .summary-switcher-panels ul.ctx-list--fetched li.source-group {
border: none;
border-bottom: 1px solid var(--leif-border);
border-radius: 0;
background: none;
box-shadow: none;
overflow: visible;
padding: 0;
}
/* The toggle IS the row, so it carries the row's padding and sits flush with
the panel's left edge like every other title line. */
.ed-theme .summary-switcher-panels .source-host-toggle {
padding: 13px 0;
border-radius: 0;
}
.ed-theme .summary-switcher-panels .source-host-toggle:hover {
background: none;
}
.ed-theme .summary-switcher-panels .source-host-toggle:hover .source-host {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Match the title scale the other panels use, so a host reads as the same
rank of thing as a certification or a finding. */
.ed-theme .summary-switcher-panels .source-host-toggle .source-host {
font-size: 14.5px;
font-weight: 700;
color: var(--leif-text);
}
/* The expanded pages are the row's detail — indented under it, no second rule
above them (the row's own hairline already closed the group). */
.ed-theme .summary-switcher-panels ol.source-cites {
border-top: none;
padding: 0 0 12px 2px;
}
.ed-theme .summary-switcher-panels ol.source-cites a {
padding: 6px 0;
border-radius: 0;
font-size: 13.5px;
color: var(--leif-text-secondary);
}
/* On the full page width the title no longer needs to stretch — that pushed
the arrow to the far right margin, a hand-span away from the link it
belongs to. It sits beside the title now. */
.ed-theme .summary-switcher-panels ol.source-cites .source-cite-title { flex: 0 1 auto; }
.ed-theme .summary-switcher-panels ol.source-cites a { justify-content: flex-start; }
.ed-theme .summary-switcher-panels ol.source-cites a:hover {
background: none;
color: var(--leif-action-clay, #8a5a3c);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---- 4. Product card --------------------------------------------------- */
/* The heart and check sat on the photograph at 85% white, so the product read
through them. Solid, with a rule and a shadow, they read as controls resting
on the image instead of stains in it. */
.ed-theme .product-card .product-heart-btn,
.ed-theme .product-card .product-purchased-btn {
background: #ffffff;
border: 1px solid rgba(0,0,0,.14);
box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.ed-theme .product-card .product-heart-btn:hover,
.ed-theme .product-card .product-purchased-btn:hover {
background: #ffffff;
border-color: rgba(0,0,0,.28);
}
/* The price keeps its row whether or not there is a number to put in it, so
the buy block doesn't reflow when a price lands (or fails to). */
.ed-theme .product-buy-block .product-price--buy {
min-height: 34px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ed-theme .product-price--buy .price-timestamp {
font-size: 9.5px;
font-weight: 400;
opacity: .75;
}
/* ---- 5. Replacements --------------------------------------------------- */
/* Left-aligned like every other block of type on the page. Centred card text
was the last centred thing here. */
.ed-theme .replacements-section .suggested-item {
align-items: stretch;
text-align: left;
}
.ed-theme .replacements-section .suggested-content { align-items: flex-start; }
.ed-theme .replacements-section .suggested-title a { text-align: left; }
/* Render what we have — but at the size a card IS, not stretched to eat the
row. auto-fit collapsed the empty tracks and blew three cards up to ~450px
each; the grid keeps its five fixed tracks instead, so three matches are
three normal cards followed by empty space. No grey placeholder boxes
either — the space is just space. */
.ed-theme .replacements-section .suggested-list {
grid-template-columns: repeat(5, minmax(0, 1fr));
justify-content: start;
}
.ed-theme .suggested-placeholder { display: none !important; }
/* Whose product it is — the one thing a cross-brand list has to say and the
title can't be trusted to carry. Fixed slot so cards stay aligned. */
.ed-theme .suggested-brand {
min-height: 15px;
margin: 0 0 5px;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
line-height: 1.25;
color: var(--leif-text-secondary, #4b5563);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* The price slot is a fixed row: a real number and the "See price on Amazon"
fallback occupy the same space, so a card without a price doesn't ride up. */
.ed-theme .suggested-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 3px 7px;
min-height: 30px;
align-content: center;
}
.ed-theme .suggested-price-amount { font-size: .84rem; font-weight: 700; }
/* Secondary to the price, not a second line of it. */
.ed-theme .suggested-price .price-timestamp {
flex-basis: 100%;
font-size: 8.5px;
font-weight: 400;
opacity: .7;
margin-top: 0;
}
.ed-theme .suggested-price .see-on-amazon-link { font-size: .78rem; }
@media (max-width: 640px) {
/* Phones keep the collapse-to-pills toggle, so the bar can sit tight to the
row above without a rule implying content below it. */
.ed-theme .summary-switcher { margin-top: 12px; padding-top: 12px; }
.ed-theme .supplier-card-header .header-band.scorebody-col--strip { margin-top: 10px; padding-top: 12px; }
}
/* =========================================================
Mobile — restore the reading order the desktop bar assumes
---------------------------------------------------------
At =<900px the stacked layout flattens .header-scorecard-main with
`display: contents` and hand-sorts what falls out: pillars order:1,
the summary paragraph order:2, everything else defaulting to 0. That
predates the section bar moving above the panels, and it put the page in
an order nobody chose — buttons and panel at 0 (so the AI disclaimer sat
directly under the brand name), pillars after them, and the summary the
bar controls stranded at the bottom.
Ordering every band explicitly, so phone and desktop read top-to-bottom
the same way: identity, ratings, buttons, whatever the buttons opened,
disclaimer last.
========================================================= */
@media (max-width: 900px) {
.ed-theme .supplier-card-header .header-band--identity { order: 0; }
.ed-theme .supplier-card-header .scorebody-col--right { order: 1; }
.ed-theme .supplier-card-header .summary-switcher { order: 2; }
.ed-theme .supplier-card-header .scorebody-col--left,
.ed-theme .supplier-card-header .header-band--interpretation,
.ed-theme .supplier-card-header .header-band--narrative { order: 3; }
.ed-theme .supplier-card-header .summary-switcher-panels { order: 4; }
.ed-theme .supplier-card-header .ctx-footer-disclaimer--relocated { order: 5; }
}
@media (max-width: 640px) {
/* The three pillar ratings show by default on phones now. They were
collapsed behind the Summary pill along with the narrative — but a
paragraph is worth hiding to save a screenful and three one-line ratings
are not: they are the substance of the page, and on a brand whose
headline sits below every pillar they are also the explanation for it.
Costs one short row; the narrative stays behind the button. */
.ed-theme .supplier-card-header .scorebody-col--right { display: block; }
/* The strip's own hairline is the divider here, so the stacked-layout rule
that puts a rule above the rail would double it. */
.ed-theme .supplier-card-header .scorebody-col--right { border-top-width: 1px; }
/* (The phone stacking of the pillar row moved to the header-rebuild block
at the end of this file, along with the markup it styles.) */
/* Carousel cards stretch to a common height, but the phone card puts the
price straight in the content column with nothing pushing it down — so a
card with no values badge floated its price up and the row read ragged.
Same bottom-pin the desktop footer already has. */
.ed-theme .suggested-item--scroll .suggested-price { margin-top: auto; }
/* The pills were `flex: 1 1 auto` + wrap, so each ROW stretched its own
items to fill it independently — three narrow ones above two wide ones,
with the widths set by how the labels happened to break. A grid instead:
every pill in a row is the same width, and the rows are even.
TWO per row on a phone, not three. Three fits the pills but not their
words — "Certifications" and "Controversies" both ellipsed at 366px,
and a truncated label is a worse button than a taller bar. Six columns
is the unit of measure: span 3 = half a row. An odd pill at the end
takes the full width rather than sitting beside a gap.
Desktop is untouched — this whole block is inside the phone breakpoint,
where the bar wraps. Above it the five buttons still sit on one line. */
.ed-theme .summary-tabs .summary-tab-bar {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 7px;
}
.ed-theme .summary-tabs .summary-tab-bar .summary-tab {
grid-column: span 3;
flex: none;
width: auto;
min-width: 0;
justify-content: center;
padding-left: 8px;
padding-right: 8px;
}
.ed-theme .summary-tabs .summary-tab-bar .summary-tab:last-child:nth-child(odd) {
grid-column: span 6;
}
/* Ellipsis stays as the last resort for a label longer than half a row. */
.ed-theme .summary-tabs .summary-tab-bar .summary-tab > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* =========== end revertible block =========== */
/* =========================================================
Supplier header rebuild [REVERTIBLE BLOCK]
---------------------------------------------------------
Four rows: section label, title + grade, meta line, rule + pillar row.
Colours, type and the spacing scale are the ones already in use — this
block changes what is in the rows and how they divide, not how they look.
========================================================= */
/* ---- Meta line --------------------------------------------------------- */
/* Separators are drawn between REAL segments only. The last visible segment
is tagged by syncMetaSeparators() in JS, because the old rules inferred
visibility from the text of an inline style attribute and left a dangling
dot whenever a later segment was empty. */
.ed-theme .header-meta-item.meta-item--last::after { content: none; }
.ed-theme .header-meta-item.meta-item--line-end::after { content: none; }
.ed-theme .header-meta-item:empty { display: none; }
/* The confidence word carries the sentence, so it gets the ink; the review
depth beside it stays secondary. */
.ed-theme .meta-confidence {
color: var(--leif-text);
font-weight: 700;
}
/* "how we rate" is a control that happens to sit in a line of prose — styled
as a link, built as a button so it is focusable and announces its popover. */
.ed-theme .how-we-rate-link {
padding: 0;
border: none;
background: none;
font: inherit;
color: var(--leif-action-clay, #8a5a3c);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.ed-theme .how-we-rate-link:hover { color: var(--leif-action-clay-dark, #6d4530); }
.ed-theme .how-we-rate-link:focus-visible {
outline: 2px solid var(--leif-action-clay, #8a5a3c);
outline-offset: 2px;
border-radius: 3px;
}
/* ---- Pillar row -------------------------------------------------------- */
/* The rule that opens the row, and the row itself: three pillars inline,
the concern chip riding at the end. */
.ed-theme .supplier-card-header .header-band.pillar-row-band {
border-top: 1px solid var(--leif-border);
margin-top: 14px;
padding: 14px 0 0;
}
.ed-theme .pillar-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 0;
}
.ed-theme .pillar-seg {
display: inline-flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
}
/* Gap note — only rendered when every pillar bands above the headline pill and
a scoring concern explains why (see renderLikelyPillarBand). Sits under the
row, quieter than it, because it is an explanation rather than a rating. */
.ed-theme .pillar-row-gap {
margin-top: 8px;
font-size: 12px;
line-height: 1.5;
color: var(--leif-text-muted, #5c6f65);
border-left: 2px solid var(--leif-border);
padding-left: 9px;
}
/* The separator belongs to the segment that follows it, so it is suppressed
on any segment that starts a line — including the first. .starts-line is
set by measurement (hideWrappedSeparators); CSS cannot see a wrap. */
.ed-theme .pillar-row > *::before {
content: '·';
padding: 0 10px;
color: var(--leif-border);
font-weight: 400;
}
.ed-theme .pillar-row > .starts-line::before { content: none; padding: 0; }
/* Label recedes, value advances — the row has to scan as three ratings, not
as a breadcrumb of equal-weight words. */
.ed-theme .pillar-seg-label {
font-size: 11.5px;
font-weight: 500;
letter-spacing: .01em;
color: var(--leif-text-muted, #6b7280);
}
.ed-theme .pillar-seg-value {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 14px;
font-weight: 700;
color: var(--leif-text);
}
.ed-theme .pillar-seg-dot {
width: 8px; height: 8px; border-radius: 50%; flex: none;
}
/* An unassessed pillar still appears — stated, in secondary text, so the
reader can see that three pillars exist and one is missing. */
.ed-theme .pillar-seg-value--none,
.ed-theme .pillar-seg-value--pending {
font-weight: 500;
font-style: italic;
color: var(--leif-text-muted, #6b7280);
}
/* ---- Concern chip ------------------------------------------------------ */
/* Ends the pillar row. A button, because it does something. */
.ed-theme .pillar-concern-chip {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 10px;
padding: 4px 9px;
border-radius: 999px;
font: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: .2px;
cursor: pointer;
white-space: nowrap;
background: #fff4e6;
border: 1px solid #f0cfa0;
color: #a34b00;
}
.ed-theme .pillar-concern-chip--high { background: #fdeceb; border-color: #f0b4b0; color: #c62828; }
.ed-theme .pillar-concern-chip--low { background: #f6f7f8; border-color: #d8dde2; color: #6b7280; }
.ed-theme .pillar-concern-chip:hover { filter: brightness(0.97); }
.ed-theme .pillar-concern-chip:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* When the chip wraps to its own line it lines up with the pillars, and its
separator goes with the wrap (handled by .starts-line above). */
.ed-theme .pillar-row > .pillar-concern-chip.starts-line { margin-left: 0; }
/* ---- "How we rate" popover -------------------------------------------- */
.hwr-popover,
.vm-popover {
position: absolute;
z-index: 10050;
display: none;
width: min(380px, calc(100vw - 24px));
padding: 18px 20px 16px;
background: var(--leif-surface, #fff);
border: 1px solid var(--leif-border, #e5e7eb);
border-radius: 14px;
box-shadow: 0 12px 34px rgba(0,0,0,.16);
color: var(--leif-text, #1f2937);
}
.hwr-popover.is-open,
.vm-popover.is-open { display: block; }
.hwr-popover:focus,
.vm-popover:focus { outline: none; }
.hwr-close {
position: absolute; top: 8px; right: 10px;
border: none; background: none; cursor: pointer;
font-size: 22px; line-height: 1;
color: var(--leif-text-muted, #6b7280);
padding: 4px 6px;
}
.hwr-close:hover { color: var(--leif-text, #1f2937); }
.hwr-title {
margin: 0 0 12px;
font-size: 17px;
font-weight: 700;
}
.hwr-scale-label {
margin: 0 0 7px;
font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase;
color: var(--leif-text-muted, #6b7280);
}
.hwr-scale {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 14px; padding: 0; list-style: none;
}
.hwr-rung {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--leif-border, #e5e7eb);
background: var(--leif-canvas, #fafaf8);
font-size: 11.5px; font-weight: 700;
}
.hwr-rung-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hwr-body p {
margin: 0 0 11px;
font-size: 13px;
line-height: 1.55;
color: var(--leif-text-secondary, #4b5563);
}
.hwr-body strong { color: var(--leif-text, #1f2937); }
.hwr-full-link {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 2px;
font-size: 12.5px; font-weight: 600;
color: var(--leif-action-clay, #8a5a3c);
text-decoration: none;
}
.hwr-full-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
/* The row already stacks one pillar per line on a phone, so the inline
separators would only ever lead a line — drop them and let the rule and
the line breaks do the dividing. */
.ed-theme .pillar-row { display: block; }
.ed-theme .pillar-row > *::before { content: none; padding: 0; }
.ed-theme .pillar-seg {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 7px 0;
}
.ed-theme .pillar-seg + .pillar-seg { border-top: 1px solid var(--leif-border); }
.ed-theme .pillar-concern-chip { margin: 10px 0 0; }
}
/* =========== end revertible block =========== */
/* ---- Values-match badge + its popover ---------------------------------- */
/* The badge is a