/* fcc-editorial-tokens.css
* ------------------------------------------------------------------
* Editorial layer for the fcc.cc design refresh.
* Load AFTER fcc-tokens.css and AFTER fcc-theme-boot.js.
*
*
*
*
*
*
* What this adds on top of fcc-tokens.css:
* 1. A 4-step ink hierarchy (--ink, --ink-2, --ink-3, --ink-4) so body
* copy, meta text, captions, and subtle UI all sit on one scale instead
* of every component hand-picking rgba(255,255,255,.5).
* 2. A secondary rule color (--rule-2) for nested borders inside cards.
* 3. A four-token accent ramp (--accent, --accent-2, --accent-wash, --accent-ink)
* tuned to the current theme mode. Light mode gets a saturated editorial
* red; dark mode gets a pastel version that reads at the same contrast.
* 4. Surface aliases (--paper, --paper-2, --paper-3, --rule) that match the
* Commons design tokens. Cheap to adopt; purely additive.
*
* Key assumption:
* fcc-theme-boot.js (v2) sets `data-mode="dark"` or `data-mode="light"` on
* . This stylesheet keys off that attribute instead of branching on
* individual preset names, so any future themes added to the PRESETS table
* in the boot script automatically pick up the right ink scale.
* ------------------------------------------------------------------ */
/* ── Defaults (applied before data-mode is set; mirror dark) ────────────── */
:root {
/* Paper / surface aliases. These map the Commons design vocabulary onto
the live site's canonical tokens. Everything downstream can keep using
--bg / --panel; these are for editorial code that wants "paper" naming. */
--paper: var(--bg);
--paper-2: var(--panel);
--paper-3: var(--panel-2);
--rule: var(--border);
/* Ink hierarchy — defaults are dark-mode values; overridden below.
Penny Press direction: warm cream rather than cool grey. */
--ink: var(--text);
--ink-2: #c8c0b0; /* body-secondary (warm cream) */
--ink-3: #8a8276; /* meta / captions / tracked caps */
--ink-4: #5a564e; /* very dim — kickers when inactive */
--rule-2: #24282f; /* nested borders inside cards */
/* Accent ramp — editorial red (Penny Press), the only accent. */
--accent: #d4593f;
--accent-2: #e87a5e;
--accent-wash: color-mix(in srgb, #d4593f 14%, transparent);
--accent-ink: #0d0e10; /* text color used on top of solid accent fills */
/* Whisker geometry — drives section-head accent rule width/height. */
--whisker-w: 56px;
--whisker-h: 3px;
/* home-field-bulletin.css and home-inline.css read this alias. */
--fcc-editorial-red: var(--accent);
}
/* ── Dark mode — explicit, overrides defaults when boot sets data-mode ──── */
html[data-mode="dark"] {
--ink: var(--text);
--ink-2: #c8c0b0;
--ink-3: var(--text-dim);
--ink-4: #5a564e;
--rule-2: color-mix(in srgb, var(--border) 65%, transparent);
--accent: #d4593f;
--accent-2: #e87a5e;
--accent-wash: color-mix(in srgb, #d4593f 14%, transparent);
--accent-ink: #0d0e10;
}
/* Penny — explicit preset binding so theme-picker selection re-applies the
ramp even when the user lands from a light-mode preset. */
html[data-fcc-v2-theme-preset="penny"] {
--accent: #d4593f;
--accent-2: #e87a5e;
--accent-wash: color-mix(in srgb, #d4593f 14%, transparent);
--accent-ink: #0d0e10;
}
/* Ochre — amber accent variant. */
html[data-fcc-v2-theme-preset="ochre"] {
--accent: #d4a445;
--accent-2: #e8bd6a;
--accent-wash: color-mix(in srgb, #d4a445 12%, transparent);
--accent-ink: #14110d;
}
/* Forest (ivy) — keep red accent ramp under Penny Press; just widen the wash
so it reads on green bg. */
html[data-fcc-v2-theme-preset="forest"] {
--accent-wash: color-mix(in srgb, #d4593f 14%, transparent);
}
/* ── Light mode — warm ink scale, saturated editorial red ───────────────── */
html[data-mode="light"] {
--ink: var(--text);
--ink-2: #3d3a36;
--ink-3: var(--text-dim);
--ink-4: #9d988e;
--rule-2: color-mix(in srgb, var(--border) 70%, transparent);
--accent: #a33827; /* deeper red for paper readability */
--accent-2: #b84a38;
--accent-wash: color-mix(in srgb, #a33827 8%, transparent);
--accent-ink: #ffffff; /* white-on-red fills */
}
/* Newsprint is warmer; push the paper aliases to reflect that warmth. */
html[data-fcc-v2-theme-preset="newsprint"] {
--paper-3: #ebe4cd;
--ink-4: #a39c88;
}
/* ── Mode-aware surface tweaks ──────────────────────────────────────────── */
/* Panel shadows: dark uses deep black, light uses warm gray with alpha.
Components that import fcc-tokens.css can pick --shadow-paper to get the
right treatment automatically. */
html[data-mode="dark"] { --shadow-paper: 0 4px 16px rgba(0, 0, 0, 0.35); }
html[data-mode="light"] { --shadow-paper: 0 1px 2px rgba(42, 36, 24, 0.06), 0 4px 16px rgba(42, 36, 24, 0.08); }
/* ── Utility classes (optional — pages can opt in) ─────────────────────── */
.paper { background: var(--paper); color: var(--ink); }
.paper-2 { background: var(--paper-2); color: var(--ink); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }
.ink-4 { color: var(--ink-4); }
.rule-top { border-top: 1px solid var(--rule); }
.rule-bottom { border-bottom: 1px solid var(--rule); }
.rule-2-top { border-top: 1px solid var(--rule-2); }
/* Accent text + fill helpers used by callouts, tab indicators, pill counts */
.accent-text { color: var(--accent); }
.accent-wash { background: var(--accent-wash); color: var(--accent); }
.accent-fill { background: var(--accent); color: var(--accent-ink); }
/* ── Light-mode regression hotfixes ─────────────────────────────────────── *
* The live site currently assumes dark everywhere, so a lot of components
* reach for rgba(255,255,255,…) borders and dark-colored shadows. These
* selectors flip the most common offenders to tokenized values when the
* page is rendering under a light theme. Targeted — no mass !important.
* ------------------------------------------------------------------------- */
html[data-mode="light"] .card,
html[data-mode="light"] .pill,
html[data-mode="light"] .panel,
html[data-mode="light"] .about-panel,
html[data-mode="light"] .status-banner {
border-color: var(--border);
background: var(--panel);
color: var(--text);
box-shadow: var(--shadow-paper);
}
/* White-on-transparent borders disappear on paper — use rule color instead */
html[data-mode="light"] *[style*="rgba(255, 255, 255"] { /* documentation only; not a selector you'd rely on */ }
/* Common utility selectors the live codebase uses for "soft surfaces" */
html[data-mode="light"] .fcc-v2-themebox {
background: rgba(255, 255, 255, 0.92);
border-color: var(--border);
box-shadow: var(--shadow-paper);
}
html[data-mode="light"] .fcc-v2-themebox-title { color: var(--ink-3); }
html[data-mode="light"] .fcc-global-top-btn,
html[data-mode="light"] #backToTopBtn,
html[data-mode="light"] .back-to-top,
html[data-mode="light"] .scroll-to-top,
html[data-mode="light"] .to-top {
background: rgba(255, 255, 255, 0.92) !important;
color: var(--text) !important;
border-color: var(--border) !important;
box-shadow: var(--shadow-paper) !important;
}
/* Pages that toggle local dark mode via data-theme="dark" (e.g. the
* fcc-library reader's Dark button) keep data-mode="light" if the FCC
* site-wide preset is light. Without this override, the light-mode
* Top-button rule above paints cream-on-cream because var(--text)
* cascades through the page's local dark tokens to a light value.
* Mirror the base dark styling from fcc-v2-controls.css. */
html[data-theme="dark"] .fcc-global-top-btn,
html[data-theme="dark"] #backToTopBtn,
html[data-theme="dark"] .back-to-top,
html[data-theme="dark"] .scroll-to-top,
html[data-theme="dark"] .to-top {
background: rgba(8, 10, 14, 0.86) !important;
color: #f5f6f7 !important;
border-color: rgba(255, 255, 255, 0.24) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38) !important;
}
/* Overlays & scrims */
html[data-mode="light"] { --overlay-light: rgba(0, 0, 0, 0.04);
--overlay-med: rgba(0, 0, 0, 0.08);
--overlay-heavy: rgba(0, 0, 0, 0.35); }
/* ── Newspaper-signature section heads ──────────────────────────────── *
* Penny Press direction: the .section-head treatment is the sitewide
* signature. Thin ink rule beneath the title, 56×3px editorial-red
* whisker on the leading edge. Applied to every .section-head whether
* the host page opts in via body.fcc-editorial-page or not. Commons
* pages already share .section-head — they pick up the whisker via
* this rule now too. Typography overrides below stay scoped to
* fcc-editorial-page so they don't clobber commons.css's heading rules.
* -------------------------------------------------------------------- */
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid var(--text, currentColor);
padding-bottom: 0.55rem;
margin-bottom: 1.1rem;
position: relative;
}
.section-head::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
height: var(--whisker-h, 3px);
width: var(--whisker-w, 56px);
background: var(--accent, #d4593f);
}
body.fcc-editorial-page .section-head .section-title,
body.fcc-editorial-page .section-head > h2,
body.fcc-editorial-page .section-head > h3 {
margin: 0;
font-family: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif;
font-weight: 700;
font-size: clamp(1.2rem, 2.4vw, 1.55rem);
letter-spacing: -0.01em;
line-height: 1.2;
}
body.fcc-editorial-page .section-head .section-link,
body.fcc-editorial-page .section-head .hint,
body.fcc-editorial-page .section-head .hint-link {
font-family: Inter, system-ui, -apple-system, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dim, var(--ink-3, #9aa3b2));
white-space: nowrap;
text-decoration: none;
font-weight: 500;
}
body.fcc-editorial-page .section-head .section-link:hover,
body.fcc-editorial-page .section-head .hint-link:hover {
color: var(--text, currentColor);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--accent, currentColor);
}
/* Editorial pages: default
and inline dividers get the same red-
whisker treatment used on section heads, so the page has one
consistent typographic signature. */
body.fcc-editorial-page hr {
border: 0;
border-top: 1px solid var(--border, var(--text, currentColor));
margin: 1.5rem 0;
position: relative;
height: 0;
}
body.fcc-editorial-page hr::before {
content: "";
position: absolute;
left: 0;
top: -1px;
height: 1px;
width: 56px;
background: var(--accent, #d4593f);
}
/* Small-caps eyebrow utility — editorial pages can opt-in on any element
with class="eyebrow" to get the tracked small-caps label treatment
used across Commons section intros. */
body.fcc-editorial-page .eyebrow {
display: inline-block;
font-family: Inter, system-ui, -apple-system, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-dim, var(--ink-3, #9aa3b2));
font-weight: 500;
margin-bottom: 0.6rem;
}
/* ── Newspaper-signature dash heads (front-page desktop dashboard) ────
* The fcc.cc home uses .home-dash-head / .home-dash-title / .home-dash-link
* instead of the .section-head vocabulary. These rules port the same
* editorial signature (ink rule + red whisker + serif title + tracked caps
* microcopy) onto that variant so the front page matches the rest of the
* editorial treatment. Scoped inside html.desktop-v2-enabled because the
* existing .home-dash-* rules that we override live under that scope.
* -------------------------------------------------------------------- */
html.desktop-v2-enabled body.fcc-editorial-page .home-dash-head {
border-bottom: 1px solid var(--text, currentColor);
padding-bottom: 0.55rem;
margin-bottom: 1.1rem;
position: relative;
}
html.desktop-v2-enabled body.fcc-editorial-page .home-dash-head::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
height: 1px;
width: 56px;
background: var(--accent, #d4593f);
}
html.desktop-v2-enabled body.fcc-editorial-page .home-dash-title {
font-family: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif;
font-weight: 700;
font-size: clamp(1.2rem, 2.4vw, 1.55rem);
letter-spacing: -0.01em;
line-height: 1.2;
}
html.desktop-v2-enabled body.fcc-editorial-page .home-dash-link {
font-family: Inter, system-ui, -apple-system, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
color: var(--text-dim, var(--ink-3, #9aa3b2));
text-decoration: none;
white-space: nowrap;
}
html.desktop-v2-enabled body.fcc-editorial-page .home-dash-link:hover,
html.desktop-v2-enabled body.fcc-editorial-page .home-dash-link:focus-visible {
color: var(--text, currentColor);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--accent, currentColor);
}
/* Retired meta-bar (ef6fa69c5, 2026-05-16). Sitewide hide so cached fcc-editorial.js
* still drawing the bar on returning visitors gets neutralised immediately, instead
* of waiting up to 7d for the immutable /shared/ cache to expire. */
.fcc-meta-bar { display: none !important; }