/* ============================================================
The Watchtower, News section for CDO.me
Two modes: default (light) + batman (dark HUD).
IMPORTANT: Batman tokens are scoped to .wt-shell ONLY.
The primary CDO.me nav and the main cdo-footer never change,
regardless of mode. Accessibility is the design goal; WCAG AA
contrast is the minimum floor on text + interactive UI.
============================================================ */
/* Fonts are loaded via in each news page head (preconnect +
stylesheet) instead of @import here. Reason: @import is render-
blocking and serializes after the CSS bytes finish downloading,
while a parallel can start the font request earlier and
the preconnect hint can warm the gstatic connection sooner.
Required faces: Playfair Display ital,wght 0/1×{400,700,900/400,700}
and Source Serif 4 ital,opsz,wght 0/1×8..60×{400,600,700/400,600}. */
/* ------------------------------------------------------------
1. Token layer, scoped to .wt-shell. Nothing here leaks out.
------------------------------------------------------------ */
/* Mini masthead lives OUTSIDE .wt-shell on article pages, so it needs its
own scope for --wt-logo-fill. Same default/batman values as the shell. */
.wt-mini,
.wt-shell {
--wt-logo-fill: #283a31;
}
html[data-mode="batman"] .wt-mini,
html[data-mode="batman"] .wt-shell {
--wt-logo-fill: #ece7dc;
}
/* Prevent browser visited-link purple from leaking into the logo . */
.wt-mini__logo,
.wt-mini__logo:visited,
.wt-masthead__logo a,
.wt-masthead__logo a:visited {
color: var(--wt-logo-fill);
}
.wt-shell {
/* Keep Calm - warm paper, calm green/sage, soft clay accent (light mode) */
--wt-page-bg: #f7f4ee; /* warm paper */
--wt-surface: #fffdf9; /* card surface, faintly warm white */
--wt-card-bg: #fffdf9; /* card token used by auth/account/inputs; must track surface */
--wt-rule: #e4ddcf; /* warm hairline */
--wt-rule-strong: #283a31;
--wt-ink: #26302b; /* deep forest charcoal, 11.8:1 on paper */
--wt-ink-soft: #475048; /* secondary, 7.4:1 */
--wt-ink-quiet: #5f6a60; /* quiet, 5.0:1 on paper, passes AA small text */
--wt-eyebrow: #5f6a60;
--wt-link: #2c5f4e; /* calm green, 5.6:1 on paper */
--wt-link-hover: #1f4638;
--wt-accent: #2c5f4e;
--wt-chip-bg: #ede7da;
--wt-chip-border: #ddd4c2;
--wt-chip-ink: #34403a;
--wt-logo-fill: #283a31;
--wt-toggle-fill: #283a31;
--wt-toggle-bg: transparent;
--wt-img-filter: none;
--wt-btn-bg: #2c5f4e;
--wt-btn-bg-hover: #1f4638;
--wt-btn-ink: #fffdf9;
--wt-panel-bg: #eef3ec; /* soft sage panel */
--wt-panel-border: #d6e0d2;
--wt-warm: #be6b45; /* clay accent, warmth, used sparingly */
--wt-crisis-bg: #edf1ea;
--wt-crisis-border: #d8e0d3;
--wt-crisis-ink: #3a463f;
/* Typography */
--wt-font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--wt-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--wt-font-ui: var(--font-family-body, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
/* Aliases used by the layout=c (NYT-style) rules. Without these the
`font:` shorthands containing var(--cdo-sans) become invalid and
font-family falls through to the body serif, which is why eyebrows
and meta rendered in serif instead of Inter. */
--cdo-sans: var(--wt-font-ui);
--cdo-serif: var(--wt-font-body);
}
/* ---- Calm "dim / night" mode tokens, scoped to the shell ----
A warm, low-glare dark theme for reading at night. Purely visual,
it never changes article content (the content lens is always default). */
html[data-mode="batman"] .wt-shell {
--wt-page-bg: #161a18; /* warm green-charcoal */
--wt-surface: #1e2522;
--wt-card-bg: #1e2522; /* keeps auth/account cards dark; was undefined (white fallback) */
--wt-rule: #2c342f;
--wt-rule-strong: #b9c7b7;
--wt-ink: #ece7dc; /* warm paper text, 13.6:1 on #161a18 */
--wt-ink-soft: #c2cabb; /* secondary, 9.3:1 */
--wt-ink-quiet: #93a093; /* quiet, 5.2:1 */
--wt-eyebrow: #a9b6a7;
--wt-link: #8fd0b4; /* soft mint, 8.9:1 */
--wt-link-hover: #b9e7d1;
--wt-accent: #8fd0b4;
--wt-chip-bg: rgba(143, 208, 180, 0.10);
--wt-chip-border: rgba(143, 208, 180, 0.32);
--wt-chip-ink: #b9e7d1;
--wt-logo-fill: #ece7dc;
--wt-toggle-fill: #b9c7b7;
--wt-toggle-bg: rgba(185, 199, 183, 0.08);
/* Gentle dim of imagery so photos don't glare against a dark page. */
--wt-img-filter: brightness(0.9) contrast(1.02);
--wt-btn-bg: #8fd0b4;
--wt-btn-bg-hover: #b9e7d1;
--wt-btn-ink: #10140f;
--wt-panel-bg: rgba(143, 208, 180, 0.07);
--wt-panel-border: rgba(143, 208, 180, 0.26);
--wt-warm: #cdb89a;
--wt-crisis-bg: rgba(185, 199, 183, 0.08);
--wt-crisis-border: rgba(185, 199, 183, 0.26);
--wt-crisis-ink: #c2cabb;
}
/* ------------------------------------------------------------
1a. CLS reservation, every JS-rendered on the news
surface is empty until JS lands content (homepage, pulse,
open category pages). Without a min-height the footer paints
inside the viewport during the ~500ms loading window, then
shifts ~3000px when content lands. Reserves ~1 viewport so
the shift happens below the fold.
Excludes gated mains (current-customers, target-customers,
competitors), those stay empty until unlock, and reserving
80vh would create awkward whitespace.
------------------------------------------------------------ */
main[data-wt-home],
main[data-wt-pulse],
main[data-wt-category]:not([data-wt-requires-unlock]) {
min-height: 80vh;
}
/* ------------------------------------------------------------
1b. Skip link, WCAG 2.4.1 Bypass Blocks. First focusable
element on the page; jumps over the nav/masthead to .
------------------------------------------------------------ */
.wt-skip-link {
position: absolute;
left: 12px;
top: -40px;
/* The skip link sits on , OUTSIDE .wt-shell where the tokens live, so
the vars never resolve; without solid fallbacks it rendered white text on
a transparent background (invisible to keyboard users on focus). */
background: var(--wt-ink, #26302b);
color: var(--wt-btn-ink, #fff);
padding: 10px 16px;
border-radius: 4px;
font: 600 14px/1 var(--wt-font-ui);
text-decoration: none;
z-index: 100;
transition: top 120ms ease;
}
.wt-skip-link:focus {
top: 12px;
outline: 2px solid var(--wt-link);
outline-offset: 2px;
}
/* Visually-hidden utility - content stays in the AT tree (screen
readers, search engines, no-JS fallback) but disappears from the
visual layout. Used on the static