/* ══════════════════════════════════════════════════════════════════════ 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 4.7:1 for the few places red is the type colour; in light mode #c8102e already clears 5.8:1, so it reverts there. */ --tnc-red-text: #e5334f; } /* 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; } .eh-header { position: sticky; top: 0; z-index: 100; height: 64px; background: rgba(var(--tnc-bg-rgb),.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(var(--tnc-fg-rgb),.12); display: flex; align-items: center; } .eh-inner { max-width: 1140px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem); width: 100%; display: flex; align-items: center; gap: 2rem; } .eh-logo { flex-shrink: 0; display: flex; align-items: center; } .eh-logo img { height: 28px; width: auto; display: block; } .eh-nav { display: flex; align-items: center; gap: 2rem; flex: 1; justify-content: center; } .eh-nav a { font-family: "IBM Plex Sans", sans-serif; font-size: .82rem; font-weight: 400; letter-spacing: .04em; color: rgba(var(--tnc-fg-rgb),.78); transition: color .2s; white-space: nowrap; } .eh-nav a:hover { color: var(--tnc-fg); } .eh-actions { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; } .eh-theme-btn { background: none; border: none; color: rgba(var(--tnc-fg-rgb),.72); padding: .3rem; display: flex; align-items: center; transition: color .2s; } .eh-theme-btn:hover, .eh-theme-btn:focus-visible { color: var(--tnc-fg); outline: none; } .eh-theme-ico-moon { display: none; } html[data-theme="light"] .eh-theme-ico-sun { display: none; } html[data-theme="light"] .eh-theme-ico-moon { display: block; } .eh-search-btn { background: none; border: none; color: rgba(var(--tnc-fg-rgb),.72); padding: .3rem; display: flex; align-items: center; transition: color .2s; } .eh-search-btn:hover { color: var(--tnc-fg); } .eh-hamburger { display: none; background: none; border: none; color: rgba(var(--tnc-fg-rgb),.75); padding: .3rem; flex-direction: column; gap: 5px; } .eh-hamburger span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s, opacity .3s; } .eh-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .eh-hamburger.is-open span:nth-child(2) { opacity: 0; } .eh-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── THE COMPANY dropdown (desktop) ── */ .eh-dropdown { position: relative; display: flex; align-items: center; } .eh-dropdown-toggle { background: none; border: none; font-family: "IBM Plex Sans", sans-serif; font-size: .82rem; font-weight: 400; letter-spacing: .04em; color: rgba(var(--tnc-fg-rgb),.78); display: inline-flex; align-items: center; gap: .35rem; padding: 1.2rem 0; transition: color .2s; white-space: nowrap; } .eh-dropdown-toggle:hover, .eh-dropdown-toggle:focus-visible { color: var(--tnc-fg); outline: none; } .eh-dd-caret { font-size: .6rem; color: var(--tnc-red); transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1); } .eh-dropdown:hover .eh-dd-caret, .eh-dropdown:focus-within .eh-dd-caret, .eh-dropdown.is-open .eh-dd-caret { transform: rotate(180deg); } .eh-dropdown-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 200px; background: rgba(var(--tnc-bg-rgb),.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--tnc-fg-rgb),.12); border-top: 1px solid rgba(var(--tnc-red-rgb),.55); padding: .5rem 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .25s cubic-bezier(0.16, 1, 0.3, 1), visibility .2s; } .eh-dropdown:hover .eh-dropdown-panel, .eh-dropdown:focus-within .eh-dropdown-panel, .eh-dropdown.is-open .eh-dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .eh-dropdown-panel a { display: block; padding: .55rem 1.2rem; font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--tnc-fg-rgb),.65); transition: color .15s, background .15s; } .eh-dropdown-panel a:hover, .eh-dropdown-panel a:focus-visible { color: var(--tnc-red); background: rgba(var(--tnc-red-rgb),.07); outline: none; } /* ── THE COMPANY group (mobile overlay) ── */ .eh-mob-group { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .eh-mob-group-toggle { background: none; border: none; font-family: "Fraunces", serif; font-size: clamp(1.4rem,5vw,2rem); font-weight: 400; color: var(--tnc-fg); display: inline-flex; align-items: center; gap: .5rem; transition: color .2s; } .eh-mob-group-toggle:hover, .eh-mob-group-toggle[aria-expanded="true"] { color: var(--tnc-red); } .eh-mob-group-toggle .eh-dd-caret { font-size: .9rem; } .eh-mob-group-toggle[aria-expanded="true"] .eh-dd-caret { transform: rotate(180deg); } .eh-mob-group-links { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-bottom: .4rem; } .eh-mobile-overlay .eh-mob-group-links a { font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--tnc-fg-rgb),.7); } .eh-mobile-overlay .eh-mob-group-links a:hover { color: var(--tnc-red); } /* Mobile overlay nav */ .eh-mobile-overlay { display: none; position: fixed; inset: 64px 0 0 0; background: rgba(var(--tnc-bg-rgb),.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; } .eh-mobile-overlay.is-open { display: flex; } /* keep the header (logo, close button, breaking-news ticker) pinned on top while the mobile menu is open (fixes menu-open header scroll-away + banner overlap) */ body:has(.eh-mobile-overlay.is-open) .eh-header { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; } .eh-mobile-overlay a { font-family: "Fraunces", serif; font-size: clamp(1.4rem,5vw,2rem); font-weight: 400; color: var(--tnc-fg); transition: color .2s; } .eh-mobile-overlay a:hover { color: var(--tnc-red); } @media (max-width: 768px) { .eh-nav { display: none; } .eh-hamburger { display: flex; } } /* tn-nav-gap */ @media (max-width: 960px) { .eh-nav { gap: 1rem; } } .ef-footer { background: var(--tnc-surface); border-top: 1px solid rgba(var(--tnc-fg-rgb),.12); padding: 3rem 0 0; } .ef-footer-inner { max-width: 1140px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; } .ef-col-logo img { height: 26px; width: auto; margin-bottom: 1rem; } .ef-tagline { font-family: "JetBrains Mono", monospace; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--tnc-fg-rgb),.72); } .ef-social { display: flex; align-items: center; gap: 16px; margin-top: 1.4rem; } .ef-social a { display: inline-flex; color: rgba(var(--tnc-fg-rgb),.7); transition: color .2s ease, transform .2s ease; } .ef-social a:hover, .ef-social a:focus-visible { color: var(--tnc-fg); transform: translateY(-1px); outline: none; } .ef-social svg { display: block; width: 18px; height: 18px; fill: currentColor; } .ef-col-heading { font-family: "JetBrains Mono", monospace; font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--tnc-fg-rgb),.72); margin-bottom: 1.2rem; } .ef-col nav { display: flex; flex-direction: column; gap: .7rem; } .ef-col nav a { font-size: .88rem; color: rgba(var(--tnc-fg-rgb),.78); transition: color .2s; } .ef-col nav a:hover { color: var(--tnc-fg); } .ef-bottom { border-top: 1px solid rgba(var(--tnc-fg-rgb),.06); padding: 1.2rem clamp(1rem,4vw,2.5rem); max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .ef-copy { font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .1em; color: rgba(var(--tnc-fg-rgb),.72); } /* was an inline style="color:#c8102e" on the anchor — 3.4:1 on the footer surface. Class + --tnc-red-text instead, so it is styled here like the rest of the chrome and clears AA in both themes. */ .ef-bottom-support { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .85em; } .ef-support { color: var(--tnc-red-text); font-weight: 600; letter-spacing: .04em; } .ef-bottom-links { display: flex; gap: 1.4rem; } .ef-bottom-links a { font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .1em; color: rgba(var(--tnc-fg-rgb),.78); transition: color .2s; } .ef-bottom-links a:hover { color: var(--tnc-fg); } @media (max-width: 768px) { .ef-footer-inner { grid-template-columns: 1fr; gap: 2rem; } } .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--tnc-red); color: #fff; padding: .5rem 1rem; font-size: .85rem; z-index: 9999; } .skip-link:focus { top: 1rem; } /* tn slide-down search */ .eh-search-panel { position: fixed; top: 64px; left: 0; right: 0; z-index: 98; background: rgba(var(--tnc-bg-rgb),.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(var(--tnc-red-rgb),.45); transform: translateY(-110%); opacity: 0; visibility: hidden; transition: transform 380ms cubic-bezier(0.16,1,0.3,1), opacity 300ms ease, visibility 380ms; max-height: calc(100vh - 64px); max-height: calc(100svh - 64px); overflow-y: auto; } .eh-search-panel.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .eh-search-panel-inner { max-width: 680px; margin: 0 auto; padding: 1.4rem clamp(1rem,4vw,2.5rem); display: flex; align-items: center; gap: .9rem; } .eh-search-panel-inner svg { color: var(--tnc-red); flex-shrink: 0; } .eh-search-input { flex: 1; min-height: 44px; background: rgba(var(--tnc-input-tint-rgb),.06); border: 1px solid rgba(var(--tnc-input-tint-rgb),.15); color: var(--tnc-fg); font-family: "IBM Plex Sans", sans-serif; font-size: 1rem; padding: 0 1.1rem; border-radius: 4px; outline: none; transition: border-color .2s; } .eh-search-input::placeholder { color: rgba(var(--tnc-fg-rgb),.3); } .eh-search-input:focus { border-color: var(--tnc-red); } .eh-search-close { background: none; border: none; color: rgba(var(--tnc-fg-rgb),.55); font-size: 1.5rem; line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; transition: color .2s; } .eh-search-close:hover { color: var(--tnc-fg); } .eh-search-results { max-width: 680px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem) 1rem; text-align: left; } .eh-search-results .search-hit { display: block; padding: .8rem 1rem; border-top: 1px solid rgba(var(--tnc-input-tint-rgb),.06); text-decoration: none; color: inherit; transition: background .15s; } .eh-search-results .search-hit:hover { background: rgba(var(--tnc-red-rgb),.07); } .eh-search-results .search-hit-cat { font-family: "JetBrains Mono", monospace; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tnc-red-text); margin: 0 0 .25rem; } .eh-search-results .search-hit-title { font-size: .9rem; color: var(--tnc-fg); margin: 0; } .eh-search-results .search-hit-empty { padding: 1rem; font-size: .85rem; color: rgba(var(--tnc-fg-rgb),.45); text-align: center; } .eh-theme-btn, .eh-search-btn, .eh-hamburger, .eh-dropdown-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .eh-nav a { padding-top: .75rem; padding-bottom: .75rem; min-height: 44px; display: inline-flex; align-items: center; } .eh-mobile-overlay a, .eh-mob-group-toggle { min-height: 44px; display: inline-flex; align-items: center; } /* ── The Dispatch secondary bar ───────────────────────────────────────── The product sub-header that sits under the site header on every Dispatch surface: the wordmark plus the section links. Every item is a link to another page — there are no controls in here, so nothing in this bar can be mistaken for the category FILTER buttons further down /dispatch. The current section is marked with .is-current + aria-current="page". Deliberately NOT sticky. .eh-header above it is, and one sticky strip is enough: two of them need an offset that has to be recomputed every time the ticker shows or hides, which is exactly the bug /dispatch had. */ .dxsub { position: relative; z-index: 89; } .dxsub-bar { display: flex; align-items: center; gap: 20px; padding: 11px clamp(1rem, 4vw, 2.5rem); background: var(--tnc-surface); border-bottom: 1px solid rgba(var(--tnc-fg-rgb),.12); font-family: "IBM Plex Sans", -apple-system, system-ui, sans-serif; } .dxsub-mark { flex-shrink: 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 20px; color: var(--tnc-fg); text-decoration: none; } .dxsub-mark i { font-style: normal; color: var(--tnc-red); } .dxsub-nav { display: flex; align-items: center; gap: 18px; font-size: 13px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .dxsub-nav::-webkit-scrollbar { display: none; } .dxsub-link { padding: 3px 0; white-space: nowrap; text-decoration: none; /* .70 alpha: 8.9:1 dark / 6.1:1 light composited on --tnc-surface. */ color: rgba(var(--tnc-fg-rgb),.78); border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .dxsub-link:hover, .dxsub-link:focus-visible { color: var(--tnc-fg); outline: none; } .dxsub-link.is-current { color: var(--tnc-fg); border-bottom-color: var(--tnc-red); } @media (max-width: 560px) { .dxsub-bar { gap: 14px; } .dxsub-nav { gap: 14px; } .dxsub-link { min-height: 44px; display: inline-flex; align-items: center; } /* All four sections do not fit beside the wordmark on a phone, and the one that fell off the edge was whichever section you were currently in. The wordmark is the thing to drop: the site logo is directly above it. */ .dxsub-mark { display: none; } }