/* ══════════════════════════════════════════════════════════════════════ TNAADO site chrome — header, footer, breaking-news ticker, and The Dispatch secondary bar. SINGLE SOURCE OF TRUTH. Every page links this file; no page restyles .eh-* / .ef-* / .dxsub-* inline. Self-contained by design. Every colour below resolves against a --tnc-* token declared in this file, never against a page's own palette. The old inline copies each borrowed whatever tokens their page happened to define (--ink / --text-rgb / --tn-fg-rgb / --chrome-fg / …), which is why no two of them rendered the same. Do not reintroduce a page token here: if the chrome needs a new colour, add a --tnc-* for it. Load it LAST in so it out-ranks any inline chrome CSS a page has not yet had removed. ══════════════════════════════════════════════════════════════════════ */ :root { --tnc-bg: #0a0a0a; /* chrome surface base */ --tnc-bg-rgb: 10, 10, 10; --tnc-fg: #f5f1e8; /* chrome primary text */ --tnc-fg-rgb: 245, 241, 232; --tnc-surface: #080808; /* footer + thin bars */ --tnc-input-tint-rgb: 255, 255, 255; --tnc-red: #c8102e; /* constant brand accent, both themes */ --tnc-red-rgb: 200, 16, 46; /* #c8102e is only 3.4:1 on the dark chrome surface, so it may style borders, underlines and chips but never small red TEXT. --tnc-red-text is the same hue lifted to 5.1-5.7:1 for the few places red is the type colour (raised 2026-08-05 from #e5334f/4.64:1 — real headroom over the 4.5 floor, and now the same value as base/variables.css's --red-text and retention.css's --tn-red-text, so header, page eyebrows and author bylines all match); in light mode #c8102e already clears 5.8:1, so it reverts there. */ --tnc-red-text: #e8455a; } /* Opt-in light mode only — never OS prefers-color-scheme. Set by the head script from localStorage['tn-theme']; anything other than 'dark' is light, so a first-time visitor gets light. */ [data-theme="light"] { --tnc-bg: #faf6ee; --tnc-bg-rgb: 250, 246, 238; --tnc-fg: #1a1510; --tnc-fg-rgb: 26, 21, 16; --tnc-surface: #f1ebdd; --tnc-input-tint-rgb: 26, 21, 16; --tnc-red-text: #c8102e; } /* ── breaking-news ticker, the strip above the header bar ─────────────── Markup lives inside the header region; hidden until the fetch fills it, and it fails closed to hidden rather than to an empty bar. */ .eh-header:has(.tn-ticker:not([hidden])) { height: auto; flex-direction: column; align-items: stretch; } .tn-ticker { display: flex; align-items: stretch; height: 30px; width: 100%; background: var(--tnc-surface); border-bottom: 1px solid rgba(var(--tnc-fg-rgb),.12); overflow: hidden; } .tn-ticker[hidden] { display: none; } .tn-ticker-label { flex-shrink: 0; display: flex; align-items: center; padding: 0 1rem; font-family: "JetBrains Mono", monospace; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tnc-red-text); border-right: 1px solid rgba(var(--tnc-fg-rgb),.12); } .tn-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: stretch; } .tn-ticker-track { display: flex; align-items: center; width: max-content; flex-shrink: 0; animation: tn-ticker-marquee 38s linear infinite; } .tn-ticker:hover .tn-ticker-track { animation-play-state: paused; } @keyframes tn-ticker-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tn-ticker-half { display: flex; align-items: center; flex-shrink: 0; } .tn-ticker-item { display: flex; align-items: center; white-space: nowrap; flex-shrink: 0; font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .06em; /* .62 alpha, not .65: measured 7.6:1 dark / 5.3:1 light on the bar's real composited surface. */ color: rgba(var(--tnc-fg-rgb),.78); transition: color .25s ease; } .tn-ticker-item:hover { color: var(--tnc-fg); } .tn-ticker-cat { color: var(--tnc-red-text); text-transform: uppercase; letter-spacing: .16em; margin-right: .55rem; } .tn-ticker-sep { color: var(--tnc-red-text); padding: 0 1rem; } @media (prefers-reduced-motion: reduce) { .tn-ticker-track { animation: none; } } /* Chrome links never inherit a page's link styling. Pages differ on whether they reset `a { text-decoration }` at all, and a page that doesn't was underlining every nav item and ticker headline. The chrome states it. */ .eh-header a, .eh-search-panel a, .eh-mobile-overlay a, .ef-footer a, .dxsub a { text-decoration: none; } /* Sticky, so it always sits above scrolling content by design — but a page whose hero is itself near-black (the /areas boundary map, any full-bleed dark photo section) used to read as "the map is overlapping the header": the old .92-opacity background + a 12%-alpha hairline gave almost no visual edge against content that dark, so header and content visually fused into one black field instead of reading as chrome-above-content. Root-cause fix, not a per-page patch: raise the header's own opacity so the blur has less to see through, and add a real (if soft) drop shadow — a shadow's own gradient still reads as depth against dark content, where a flat hairline border does not. */ .eh-header { position: sticky; top: 0; z-index: 100; height: 64px; /* No background/backdrop-filter on the sticky element itself — see ::before below. The previous fix (transform: translateZ(0) + will-change: transform, kept below as a cheap extra compositing hint) promotes the element to its own GPU layer but does NOT stop iOS Safari from re-deciding that layer's contents mid-scroll — it measurably still drops the header on a real iPhone. The verified fix (confirmed working on service.tnaado.ca, commit e9c22d1) is to never let the sticky/fixed element itself paint a background or backdrop-filter at all; put both on an absolutely positioned ::before behind its content instead. `!important` on the next two lines is deliberate, not a style hack: 34 pages still carry a stale, pre-chrome.css inline `