/* Canonical design tokens (B01) — pulled in here too so pages that inject the shared nav but don't load the full style.css (embed / standalone surfaces) still resolve the design vocabulary. The --nv-* fallbacks below remain as a belt-and-braces default if neither stylesheet is present. */ @import url('/tokens.css'); /* ───────────────────────────────────────────────────────────────────────── three.ws shared site navigation Single source of truth for the global header. Mirrors the homepage nav (pages/home.html) so every page that injects #nav-container looks identical to the homepage. Self-contained: design tokens fall back to the homepage palette when a host page doesn't define them. ───────────────────────────────────────────────────────────────────────── */ /* The header-height reservation that keeps a page from shifting when nav.js injects the header lives in tokens.css, not here: nav.css is injected by nav.js itself, so it always arrives too late to reserve anything on a page that does not also link it in . See "Injected-nav height reservation" in public/tokens.css. */ .nav, .nav-drawer { --nv-bg: var(--bg, #050505); --nv-surface-1: var(--surface-1, #111111); --nv-surface-2: var(--surface-2, #181818); --nv-hairline: var(--hairline, #1c1c1c); --nv-hairline-strong: var(--hairline-strong, #2a2a2a); --nv-text: var(--text, #f6f6f6); --nv-text-2: var(--text-2, #a8a8a8); --nv-text-3: var(--text-3, #6a6a6a); --nv-text-4: var(--text-4, #4a4a4a); --nv-font-display: var(--font-display, "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif); --nv-font-mono: var(--font-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace); box-sizing: border-box; } .nav *, .nav-drawer * { box-sizing: border-box; } /* ── NAV ─────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--nv-hairline); /* Token-driven so the header flips under [data-theme='light']; falls back to the near-black brand bar when no theme var is set (dark default). */ background: var(--nv-bar-bg, rgba(5,5,5,0.82)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); } .nav a { color: inherit; text-decoration: none; } .nav button { font-family: inherit; cursor: pointer; } .nav-inner { display: flex; align-items: center; gap: 32px; padding: 16px 32px; max-width: 1440px; margin: 0 auto; } .nav .brand { display: flex; align-items: center; gap: 10px; font-family: var(--nv-font-display); font-weight: 600; letter-spacing: -0.025em; font-size: var(--text-base); color: var(--nv-text); flex-shrink: 0; } .nav .brand-mark { width: 24px; height: 24px; border-radius: 5px; display: block; flex-shrink: 0; } .nav-main { display: flex; align-items: center; gap: 2px; margin-left: 12px; flex: 1; } .nav-main > a { display: inline-flex; align-items: center; padding: 7px 12px; font-size: var(--text-ui); font-weight: 450; color: var(--nv-text-2); transition: color 0.12s; } .nav-main > a:hover, .nav-main > a[aria-current="page"] { color: var(--nv-text); } .nav-mi[aria-current="page"] .nav-mi-t { color: var(--nv-text); } .nav-mi[aria-current="page"] { background: var(--nv-surface-1); } .nav-drawer a[aria-current="page"] { color: var(--nv-text); background: var(--nv-surface-1); } .nav-end { display: flex; align-items: center; gap: 4px; } .nav-end a { display: inline-flex; align-items: center; padding: 7px 12px; font-size: var(--text-ui); font-weight: 450; color: var(--nv-text-2); transition: color 0.12s, border-color 0.15s, background 0.15s; } .nav-end a:hover { color: var(--nv-text); } .nav-end .console { color: var(--nv-text); font-weight: 500; border: 1px solid var(--nv-hairline-strong); padding: 7px 16px; border-radius: 7px; margin-left: 6px; } .nav-end .console:hover { border-color: var(--nv-text); background: rgba(255,255,255,0.04); } .nav-end [hidden] { display: none; } /* $THREE holder tier chip. The chip's own look (pill, tier colours) is injected by src/three-access.js (.tg-badge / .tg-tier-*), but `.nav-end a` would override its colour + padding at higher specificity — so restate the tier palette here, scoped above `.nav-end a`, to let the chip read true. */ .nav-end .nav-tier-badge:not([hidden]) { display: inline-flex; align-items: center; margin: 0 2px; } .nav-end .nav-tier-badge a { padding: 5px 11px; font-weight: 600; color: #6ee7a8; } .nav-end .nav-tier-badge a:hover { color: #8af0c0; } .nav-end .nav-tier-badge a.tg-tier-silver { color: #cfd6e4; } .nav-end .nav-tier-badge a.tg-tier-gold, .nav-end .nav-tier-badge a.tg-tier-genesis { color: #f5c451; } /* Collapse the chip to just the ◆ on the tightest viewports — the link's aria-label keeps the tier reachable and announced; no layout regression at any breakpoint. */ @media (max-width: 520px) { .nav-end .nav-tier-badge .tg-tier-label { display: none; } .nav-end .nav-tier-badge a { padding: 5px 8px; } } /* Global search button — opens the Cmd-K command palette */ .nav-search-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: var(--text-ui); font-weight: 450; color: var(--nv-text-2); background: none; border: 1px solid var(--nv-hairline-strong); border-radius: 7px; font-family: inherit; cursor: pointer; transition: color 0.12s, border-color 0.15s, background 0.15s; } .nav-search-btn:hover { color: var(--nv-text); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); } .nav-search-btn:active { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); } .nav-search-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.4); outline-offset: 2px; } .nav-search-ico { width: 14px; height: 14px; flex-shrink: 0; } .nav-search-label { font-size: var(--text-md); } .nav-search-hint { font-family: var(--nv-font-mono, ui-monospace, monospace); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; color: var(--nv-text-2); background: var(--nv-surface-1); border: 1px solid var(--nv-hairline-strong); border-radius: 4px; padding: 2px 5px; } @media (max-width: 1080px) { .nav-search-label { display: none; } .nav-search-hint { display: none; } /* Collapse to a square icon button that matches the notifications bell, instead of a wide pill wrapping a tiny off-balance icon. */ .nav-search-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 8px; border-color: transparent; } .nav-search-ico { width: 16px; height: 16px; } } /* ── Notifications bell button ───────────────────────────────── */ .nav-notif-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--nv-text-2); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-family: inherit; transition: color 0.12s, border-color 0.15s, background 0.15s; flex-shrink: 0; } .nav-notif-btn:hover { color: var(--nv-text); border-color: var(--nv-hairline-strong); background: rgba(255,255,255,0.04); } .nav-notif-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.4); outline-offset: 2px; } .nav-notif-btn[aria-expanded="true"] { color: var(--nv-text); border-color: var(--nv-hairline-strong); background: rgba(255,255,255,0.06); } .nav-notif-ico { display: block; } .nav-notif-badge { position: absolute; top: 4px; right: 4px; min-width: 14px; height: 14px; padding: 0 3px; background: #ef4444; color: #fff; font-size: var(--text-xs); font-weight: 700; line-height: 14px; border-radius: 7px; text-align: center; border: 1.5px solid var(--nv-bg, #050505); pointer-events: none; } /* ── Theme toggle (dark ⇄ light) ───────────────────────────────── Same 36×36 icon-button chrome as the notifications bell. Shows the moon in dark (click → go light) and the sun in light (click → go dark); the icon swap is driven purely by the [data-theme] attribute on , so it is correct on first paint with no JS. */ .nav-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--nv-text-2); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-family: inherit; transition: color 0.12s, border-color 0.15s, background 0.15s; flex-shrink: 0; } .nav-theme-btn:hover { color: var(--nv-text); border-color: var(--nv-hairline-strong); background: var(--nv-tint, rgba(255,255,255,0.04)); } .nav-theme-btn:active { background: var(--nv-tint-strong, rgba(255,255,255,0.08)); } .nav-theme-btn:focus-visible { outline: 2px solid var(--focus-ring-color, rgba(255,255,255,0.4)); outline-offset: 2px; } .nav-theme-ico { display: block; } .nav-theme-ico.sun { display: none; } /* In light mode, show the sun (offering a return to dark) and hide the moon. */ :root[data-theme='light'] .nav-theme-ico.moon { display: none; } :root[data-theme='light'] .nav-theme-ico.sun { display: block; } /* Light-mode nav polish — the shared header buttons hardcode faint white-tint hovers that wash out on a light bar; remap them to faint ink tints so hover and active states stay legible. */ :root[data-theme='light'] .nav-search-btn:hover, :root[data-theme='light'] .nav-notif-btn:hover, :root[data-theme='light'] .nav-end .console:hover { border-color: var(--nv-hairline-strong); background: rgba(15, 18, 28, 0.05); } :root[data-theme='light'] .nav-search-btn:active, :root[data-theme='light'] .nav-notif-btn[aria-expanded="true"] { background: rgba(15, 18, 28, 0.08); } /* The three floating nav surfaces (dropdown, notifications popover, mobile drawer) were authored as opaque near-black panels, but the text inside them is token-driven and flips to dark ink under [data-theme='light'] — so in light mode every menu on every page rendered dark ink on a dark panel. The panels flip with the ink; their shadows stay dark, which is correct on a light canvas too. */ :root[data-theme='light'] .nav-pop { background: rgba(255, 255, 255, 0.98); box-shadow: 0 10px 40px rgba(15, 18, 28, 0.14), 0 2px 8px rgba(15, 18, 28, 0.08); } :root[data-theme='light'] .notif-panel { background: #ffffff; border-color: var(--stroke-strong, rgba(15, 18, 28, 0.16)); box-shadow: 0 8px 40px rgba(15, 18, 28, 0.18), 0 2px 8px rgba(15, 18, 28, 0.1); } :root[data-theme='light'] .nav-drawer { background: rgba(255, 255, 255, 0.97); } /* Scrollbar thumb + any white-tint separators inside the popovers need the same inversion, or they vanish against the now-light panel. */ :root[data-theme='light'] .nav-pop::-webkit-scrollbar-thumb { background: rgba(15, 18, 28, 0.18); } /* ── Notifications popover panel ─────────────────────────────── */ .notif-panel { position: fixed; z-index: 9999; width: 360px; max-height: 480px; background: #0d0d0d; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4); display: flex; flex-direction: column; overflow: hidden; animation: notif-in 0.14s ease; } @keyframes notif-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .notif-panel-title { font-size: var(--text-md); font-weight: 600; color: rgba(255,255,255,0.9); letter-spacing: -0.01em; } .notif-mark-all { background: none; border: 0; padding: 3px 8px; border-radius: 6px; font-size: var(--text-2xs); font-weight: 500; color: rgba(255,255,255,0.4); cursor: pointer; font-family: inherit; transition: color 0.12s, background 0.12s; } .notif-mark-all:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); } .notif-mark-all:focus-visible { outline: 2px solid rgba(255,255,255,0.3); outline-offset: 1px; } .notif-mark-all:disabled { opacity: 0.45; cursor: default; } .notif-prefs-link { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-size: var(--text-sm); color: rgba(255,255,255,0.4); text-decoration: none; line-height: 1; transition: color 0.12s, background 0.12s; } .notif-prefs-link:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); } .notif-prefs-link:focus-visible { outline: 2px solid rgba(255,255,255,0.3); outline-offset: 1px; } .notif-panel-body { overflow-y: auto; flex: 1; } .notif-panel-body::-webkit-scrollbar { width: 4px; } .notif-panel-body::-webkit-scrollbar-track { background: transparent; } .notif-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; } .notif-panel-viewall { display: block; text-align: center; padding: 10px; flex-shrink: 0; font-size: var(--text-sm); font-weight: 500; color: rgba(255,255,255,0.5); border-top: 1px solid rgba(255,255,255,0.08); text-decoration: none; transition: color 0.12s, background 0.12s; } .notif-panel-viewall:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.04); } .notif-panel-viewall:focus-visible { outline: 2px solid rgba(255,255,255,0.3); outline-offset: -2px; } /* notification rows */ .notif-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: background 0.1s; } .notif-row:last-child { border-bottom: 0; } .notif-row:hover { background: rgba(255,255,255,0.04); } .notif-row:focus-visible { outline: 2px solid rgba(255,255,255,0.3); outline-offset: -2px; border-radius: 2px; } .notif-row.is-unread { background: rgba(255,255,255,0.025); } .notif-row.is-unread:hover { background: rgba(255,255,255,0.05); } .notif-type-icon { font-size: 16px; line-height: 1; margin-top: 2px; flex-shrink: 0; } .notif-row-body { flex: 1; min-width: 0; } .notif-row-msg { font-size: var(--text-md); color: rgba(255,255,255,0.82); line-height: 1.45; word-break: break-word; } .notif-row.is-unread .notif-row-msg { color: rgba(255,255,255,0.95); font-weight: 500; } .notif-row-time { font-size: var(--text-2xs); color: rgba(255,255,255,0.35); margin-top: 2px; } .notif-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; flex-shrink: 0; margin-top: 5px; align-self: flex-start; } /* empty / logged-out states */ .notif-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 20px; text-align: center; gap: 6px; } .notif-empty-icon { font-size: 28px; line-height: 1; margin-bottom: 4px; } .notif-empty-title { font-size: var(--text-md); font-weight: 600; color: rgba(255,255,255,0.75); } .notif-empty-sub { font-size: var(--text-sm); color: rgba(255,255,255,0.38); line-height: 1.5; max-width: 240px; } .notif-signin-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 8px 18px; border-radius: 8px; font-size: var(--text-md); font-weight: 500; color: #fff; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); text-decoration: none; transition: background 0.12s, border-color 0.12s; /* Shared by the sign-in link and the retry