/* =========================================================================== * hud.css — the ONE canonical top navigation, shared by every page. * Linked in each page's (before first paint → no reflow/jank) and * written with .top-nav-scoped selectors so it overrides any page's own nav * CSS regardless of load order. Change the HUD here, once, for all pages. * Relies on the per-page CSS variables (--surface, --border, --accent, …). * * Layout: row 1 = logo + lang/theme/logout (always one line); row 2 = ALL nav * links, full width, wrapping onto 2 (or more, on very narrow screens) lines * instead of hiding items behind an overflow menu or a horizontal scrollbar. * ========================================================================= */ /* The scrollbar must never decide the layout: without a stable gutter a short page (no scrollbar) centres ~10px to the right of a long one, and the whole nav appears to shift as you switch tabs. */ html{ scrollbar-gutter:stable; } .top-nav{ position:sticky; top:0; z-index:100; background:var(--surface); border-bottom:1px solid var(--border); /* Decoupled from each page's own body font — some pages load the Inter webfont, some don't, which used to render the exact same nav in two different typefaces (and a 1px height difference) depending on page. The nav always requests Inter (falls back the same way everywhere). */ font-family:'Inter',system-ui,-apple-system,sans-serif; } .top-nav .nav-inner{ /* same content width as .main (see the Paper block) — nav and page edges stay aligned, and nothing shifts when switching tabs */ max-width:1480px; margin:0 auto; padding:10px 22px; display:flex; flex-wrap:wrap; align-items:center; row-gap:8px; gap:18px; min-height:58px; justify-content:flex-start; /* override any space-between */ } .top-nav .logo{ font-size:16px; font-weight:800; color:var(--accent); text-decoration:none; letter-spacing:-.2px; white-space:nowrap; flex-shrink:0; } .top-nav .nav-right{ /* flex-basis 0 (not auto): with basis:auto the nav-inner line-break is decided against this block's MAX-content (the full link row), so past a threshold the whole control row — zen button included — dropped below the logo. Basis 0 never trips that check: logo + controls share row 1 at every width, links wrap inside as usual. */ margin-left:auto; flex:1 1 0; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; row-gap:8px; } /* nav-links takes a row of its own (row 2) whenever it doesn't fit next to the lang/theme/logout controls on row 1 */ .top-nav .nav-links{ order:2; flex:1 1 100%; min-width:0; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:5px 6px; } .top-nav .nav-links a{ padding:7px 11px; border-radius:8px; font-size:13px; font-weight:600; line-height:1; color:var(--text-muted); text-decoration:none; white-space:nowrap; transition:background .15s, color .15s; } .top-nav .nav-links a:hover{ background:var(--surface-2); color:var(--text); } .top-nav .nav-links a.active{ background:var(--accent); color:#fff; } /* lang switch (stays on row 1, next to theme/logout) */ .top-nav .lang-switch{ order:1; display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; height:38px; flex-shrink:0; } .top-nav .lang-switch button{ font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:.03em; padding:0 12px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; transition:all .15s; } .top-nav .lang-switch button:hover{ color:var(--text); } .top-nav .lang-switch button.active{ background:var(--accent); color:#fff; } /* theme toggle */ .top-nav .theme-toggle{ order:1; width:38px; height:38px; flex-shrink:0; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); cursor:pointer; color:var(--text-muted); display:flex; align-items:center; justify-content:center; padding:0; } .top-nav .theme-toggle svg{ width:18px; height:18px; } :root:not([data-theme="light"]) .top-nav .icon-sun{ display:none; } :root[data-theme="light"] .top-nav .icon-moon{ display:none; } /* logout + "logged in as" — filled by i18n.js from the brevo-me cache */ .top-nav .logout-btn{ order:1; display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 11px; flex-shrink:0; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text-muted); text-decoration:none; font-size:12.5px; font-weight:600; transition:all .15s; } .top-nav .logout-btn:hover{ color:var(--red,#a3392b); border-color:var(--red,#a3392b); } .top-nav .logout-btn svg{ width:17px; height:17px; } /* reserve room so filling the username never shifts the siblings (no jank) */ .top-nav .nav-user{ display:inline-block; min-width:70px; text-align:right; font-weight:700; color:var(--text); white-space:nowrap; } @media (max-width:760px){ .top-nav .nav-inner{ gap:8px; padding:8px 12px; } .top-nav .nav-links a{ padding:6px 9px; font-size:12.5px; } .top-nav .nav-user{ display:none; } } /* =========================================================================== * Editorial type system — the one thing kept from the design round. * Serif for headings, monospaced tabular figures for every number, letter- * spaced mono for micro-labels. Applied HERE so all seven pages inherit it * from one file: no page structure, layout or colour is touched, only type. * ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* Headings speak in the serif — page titles, section heads, card titles. */ .page-intro h1, .section-header h2, .card-head > span:first-child, .ca-card-title, .wkd-head h2, h1.page-title{ font-family:'Source Serif 4',Georgia,serif; font-weight:600; letter-spacing:-.01em; } /* Every number is monospaced and tabular, so columns line up digit-for-digit and a figure never reflows as it updates. */ .kpi .v, .ca-big, .mono, .ln, .wp-count, td.mono, .num, .kpi-v, table tbody td:not(.kw):not(.ex-subj):not(.ca-subj){ font-variant-numeric:tabular-nums; } /* Mono family for the cells that actually hold figures. Pages mark these either with .mono or by right-aligning them inline; Word Performance's table does neither, so its non-label columns are named directly. */ .kpi .v, .ca-big, .mono, td.mono, .num, .kpi-v, table tbody td[style*="text-align:right"], #wp-table tbody td:not(.kw){ font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; letter-spacing:-.02em; } /* Column headers and small caps-y labels: mono, letterspaced, quiet. */ table thead th, .kpi .l, .rng-label, .ca-card-sub, .ledger-sub{ font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; } /* =========================================================================== * The Paper — project-wide editorial skin (from the "Readership File" design * round). hud.css is linked AFTER each page's own