/* ══════════════════════════════════════════════════════════════════════ 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. COPIED VERBATIM from tnaado-media-next/css/chrome.css on 2026-09-08 for tnaado.ca (PROJECT REBOOT site 2). Two edits only: em dashes removed from these comments per the Reboot copy rule, and nothing else. It deliberately still carries the ticker, search-panel and Dispatch sub-bar rules this site never uses, because keeping the file byte-comparable with the newsroom's is worth more than the few unused kilobytes: chrome drift across properties is the exact failure this file was written to end. ══════════════════════════════════════════════════════════════════════ */ :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; } /* The brand column's two 10px mono rows, on light only. 2026-09-14, when links.tnaado.ca became the estate's first light property and this rule was measured on a real rendered page rather than computed. .62 computes to 4.97:1 against the chrome's own flat ground, which passes. It measured 4.42:1 in place, because the page paints a tinted wash behind its header and the label is not sitting on the flat ground the arithmetic assumed. .74 measures clear with room to spare and still reads as the quiet row beside the wordmark. SCOPED TO LIGHT so the ink properties are untouched: their own value was measured on ink and is correct there. */ [data-theme="light"] .eh-header .eh-brand-nav a, [data-theme="light"] .eh-header .eh-brand-nav .eh-dropdown-toggle { color: rgba(var(--tnc-fg-rgb), .74); } /* ── 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, and 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 `