/* Global navigation bar — single source of truth.
* Built and injected by web/js/nav.js from the NAV config.
* Loaded via @import in theme.css, so it lands in on every nav page.
* Pairs with the dropdown (.nav-dropdown/.nav-menu) + mobile drawer rules
* that live in theme.css; this file owns the desktop bar, brand, category
* dropdowns, and the global search box.
*/
/* ── Bar ── */
.tab-nav, .site-nav {
display: flex;
align-items: center;
gap: 2px;
min-height: 64px;
padding: 0 32px;
border-bottom: 1px solid var(--border);
background: var(--bg);
position: sticky;
top: 0;
z-index: 100;
flex-shrink: 0; /* don't collapse inside flex-column page bodies */
overflow: visible; /* let dropdowns/search results escape the bar */
}
/* ── Brand ── */
.nav-brand {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 4px 22px 4px 0;
margin-right: 10px;
border-right: 0;
text-decoration: none;
color: var(--accent);
user-select: none;
}
.nav-brand-img { height: 31px; width: auto; display: block; }
/* The source SVG is gold; the filter fakes the brand green on the raw ![]()
* until nav.js swaps in the inlined currentColor copy, which follows the
* user's accent choice instead. */
img.nav-brand-img { filter: hue-rotate(58deg) saturate(.95); }
svg.nav-brand-img { color: var(--accent); }
/* ── Top-level links + category toggles ── */
.tab-nav a, .site-nav a {
padding: 21px 15px 19px;
font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--muted-dim);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
}
.tab-nav a:hover, .site-nav a:hover { color: var(--muted); }
.tab-nav a.active, .site-nav a.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* The brand link is exempt from the link reset above. */
.nav-brand.active, .nav-brand:hover { border-bottom-color: transparent; }
/* Category dropdown toggle keeps the link styling but never underlines on hover
* until active; the caret signals it opens a menu. */
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown.active > .nav-dropdown-toggle {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* ── Width priority when the bar runs out of room ──
* auth.js appends its cluster after the search, making it the last flex item
* and so the first thing the browser squeezes — which clipped "★ Watchlist",
* the gear and "Sign in" rather than narrowing something that could afford
* it. Pin the cluster and the brand; the search field gives up width instead,
* since it is the only item that still works smaller. The category toggles
* are nowrap, so shrinking them would overflow their box rather than
* truncate — they step down by font size in the media queries instead.
*/
.auth-nav-slot { flex-shrink: 0; }
/* ── Global search ── */
.nav-search {
position: relative;
/* Fills the free run between the last category tab and the auth cluster
* (auth.js appends the cluster after this) — a command-bar presence rather
* than a small pill floating in empty space. The cap keeps it from touching
* either neighbour on very wide bars; the auto margins center it once the
* cap is hit. */
margin-left: auto;
margin-right: auto;
flex: 1 1 auto;
max-width: 560px;
/* Shrinkable, unlike the auth cluster below: when the bar runs out of room
* the search field is the one item that still works at a smaller size. */
min-width: 148px;
}
.nav-search-input {
width: 100%;
padding: 7px 30px 7px 32px;
background: var(--bg-chip);
border: 1px solid var(--muted-dim);
border-radius: 999px;
color: var(--text);
font-family: inherit;
font-size: 0.8rem;
outline: none;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.nav-search-input::placeholder { color: var(--muted); }
.nav-search-input:hover { border-color: var(--muted); }
/* "/" keycap hint — the recognizable search affordance; sized inside the
* field so the bar's height is untouched. */
.nav-search-kbd {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
padding: 1px 6px;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--muted);
font: 500 0.68rem/1.4 var(--font-mono, monospace);
pointer-events: none;
}
.nav-search:focus-within .nav-search-kbd,
.nav-search.in-drawer .nav-search-kbd { display: none; }
.nav-search-input:focus {
border-color: var(--accent);
box-shadow: var(--ring);
}
.nav-search-icon {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: var(--accent);
font-size: 0.95rem;
pointer-events: none;
opacity: 0.85;
}
.nav-search-results {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 340px;
max-width: 86vw;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
max-height: 70vh;
overflow-y: auto;
text-align: left;
box-shadow: var(--shadow-3);
z-index: 300;
display: none;
}
.nav-search-results.open { display: block; }
.nav-search-group {
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-dim);
padding: 10px 14px 6px;
background: var(--bg-panel);
position: sticky;
top: 0;
border-bottom: 1px solid var(--border-soft);
}
/* Selectors are prefixed with .nav-search so they outrank the `.tab-nav a`
* link reset (which would otherwise force uppercase + letter-spacing). */
.nav-search .nav-search-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 9px 14px;
text-decoration: none;
color: var(--text-soft);
font-size: 0.82rem;
cursor: pointer;
border-bottom: 1px solid var(--border-soft);
text-transform: none;
letter-spacing: 0;
font-weight: 500;
margin: 0;
}
.nav-search .nav-search-item:last-child { border-bottom: none; }
.nav-search .nav-search-item:hover,
.nav-search .nav-search-item.active { background: var(--bg-card); color: var(--text-soft); }
.nav-search-item .s-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; }
.nav-search-item .s-tick {
font-weight: 600; color: var(--text-strong);
font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.nav-search-item .s-name {
color: var(--muted); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.nav-search-item .s-meta { font-size: 0.68rem; color: var(--muted-dim); flex-shrink: 0; }
.nav-search-empty { padding: 16px 14px; font-size: 0.8rem; color: var(--muted-dim); text-align: center; }
/* ── Responsive: collapse into the hamburger drawer (theme.css) ── */
@media (max-width: 1100px) {
.nav-search { flex-basis: 180px; }
}
@media (max-width: 960px) {
/* The drawer rules in theme.css hide the links + category dropdowns; the
* search box has no drawer equivalent, so hide it in the bar. With search
* gone, the auth cluster takes over the right-push. */
.nav-search { display: none; }
.auth-nav-slot { margin-left: auto; }
.tab-nav, .site-nav { padding: 0 12px; }
}
/* ── Blended variant ──────────────────────────────────────────────────────
* Opt in with class="nav-blend" on . The bar leaves the flow and sits
* over the hero with no background of its own, so the hero's gradient runs
* behind it and brand/tabs/search read as part of the opening section. Once
* the page scrolls, .condensed (added by nav.js) pins it and fades in a
* full-bleed background.
*
* Everything here is scoped under .nav-blend — pages that don't opt in are
* untouched, so this can be rolled out one page at a time.
*/
.nav-blend { --nav-blend-h: 62px; } /* clears the scaled-up bar (~51px) */
.nav-blend .tab-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
max-width: 1440px; /* align the bar's contents with .hero-inner */
margin: 0 auto;
padding: 0 20px;
background: none;
border-bottom: none;
z-index: 120;
}
/* Full-bleed backdrop, painted behind the bar's own children. Sits in the
* bar's stacking context (z-index above), so a negative z-index here drops it
* behind the links without escaping to the page below. */
.nav-blend .tab-nav::before {
content: '';
position: absolute;
inset: 0 calc(50% - 50vw);
z-index: -1;
background: var(--bg);
border-bottom: 1px solid var(--border);
opacity: 0;
transition: opacity 0.18s ease-out;
}
.nav-blend .tab-nav.condensed::before { opacity: 1; }
/* Over the hero the bar is chrome-less; the brand divider and the search
* field's solid fill both read as seams, so soften them until it condenses. */
.nav-blend .tab-nav:not(.condensed) .nav-brand { border-right-color: transparent; }
.nav-blend .tab-nav:not(.condensed) .nav-search-input {
background: rgb(var(--accent-rgb) / 0.04);
border-color: var(--border-soft);
}
/* ── Presence over the hero ──
* The default bar is deliberately quiet: 0.74rem uppercase in --muted-dim,
* sized to sit under dense pages without competing with them. Over a hero it
* reads as an afterthought, so the blended bar scales the category toggles and
* the search field up and lifts them out of the dim end of the ramp. */
.nav-blend .tab-nav .nav-dropdown-toggle {
padding: 20px 16px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.045em;
color: var(--text-soft);
}
.nav-blend .tab-nav .nav-dropdown-toggle:hover { color: var(--text-strong); }
.nav-blend .tab-nav .nav-dropdown.open > .nav-dropdown-toggle,
.nav-blend .tab-nav .nav-dropdown.active > .nav-dropdown-toggle { color: var(--accent); }
/* A one-link group renders as a bare , so it has no .nav-dropdown parent to
* carry .active — and the toggle rule above would otherwise out-specify the
* generic `.tab-nav a.active` that colours it in the default bar. */
.nav-blend .tab-nav .nav-direct.active { color: var(--accent); }
.nav-blend .tab-nav .nav-caret { opacity: 0.5; font-size: 0.72em; }
.nav-blend .tab-nav .nav-brand-img { height: 34px; }
.nav-blend .tab-nav .nav-search { flex-basis: 300px; }
/* The scaled-up bar needs roughly 250px more than the default one, so it runs
* out of room earlier. Step the type and the field back down before anything
* reaches the auth cluster. */
@media (max-width: 1440px) {
.nav-blend .tab-nav .nav-dropdown-toggle { padding: 20px 12px; font-size: .87rem; }
.nav-blend .tab-nav .nav-search { flex-basis: 230px; }
}
@media (max-width: 1240px) {
.nav-blend .tab-nav .nav-dropdown-toggle { padding: 19px 9px; font-size: .82rem; letter-spacing: 0; }
.nav-blend .tab-nav .nav-search { flex-basis: 180px; }
.nav-blend .tab-nav .nav-brand { padding-right: 10px; margin-right: 4px; }
}
.nav-blend .tab-nav .nav-search-input {
padding: 10px 34px 10px 36px;
font-size: 0.88rem;
}
.nav-blend .tab-nav .nav-search-icon { font-size: 1.05rem; opacity: 1; }
/* Surfaces the "/" focus shortcut nav.js already listens for. Hidden once the
* field is in use so it never sits under typed text. */
.nav-blend .tab-nav .nav-search::after {
content: '/';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
padding: 1px 7px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.68rem;
line-height: 1.4;
color: var(--muted-dim);
pointer-events: none;
transition: opacity 0.15s;
}
.nav-blend .tab-nav .nav-search:focus-within::after { opacity: 0; }
/* Pinned, the bar is chrome again rather than the headline — ease the scale
* back down so it stops competing with the page it is sitting on. */
.nav-blend .tab-nav.condensed .nav-dropdown-toggle { padding: 17px 15px; font-size: 0.84rem; }
.nav-blend .tab-nav.condensed .nav-brand-img { height: 30px; }
.nav-blend .tab-nav.condensed .nav-search { flex-basis: 250px; }
.nav-blend .tab-nav.condensed .nav-search-input { padding: 8px 30px 8px 34px; font-size: 0.84rem; }
.nav-blend .tab-nav.condensed {
position: fixed;
animation: nav-blend-drop 0.22s ease-out;
}
@keyframes nav-blend-drop {
from { transform: translateY(-100%); }
to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.nav-blend .tab-nav.condensed { animation: none; }
.nav-blend .tab-nav::before { transition: none; }
}
/* Reserving the bar's height differs by page shape:
* - .nav-blend-hero: the hero itself pads, so its gradient runs up behind the
* bar and the two genuinely blend.
* - plain .nav-blend: no hero to paint behind, so the body reserves instead.
* Not usable on pages whose body is a height:100% flex column (pulse, macro):
* those size their content off the bar being in flow. Leave them unopted. */
.nav-blend-hero .hero { padding-top: var(--nav-blend-h); }
.nav-blend:not(.nav-blend-hero) { padding-top: var(--nav-blend-h); }
@media (max-width: 960px) {
.nav-blend .tab-nav { padding: 0 12px; }
}
/* ── Site footer (injected by nav.js) ─────────────────────────────────── */
.gt-footer {
margin-top: 48px;
border-top: 1px solid var(--border);
background: var(--bg-panel);
}
.gt-footer-inner {
max-width: 2200px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px 24px;
flex-wrap: wrap;
font-size: 0.72rem;
color: var(--muted);
}
.gt-footer-links { display: flex; gap: 16px; }
.gt-footer-links a { color: var(--muted); text-decoration: none; }
.gt-footer-links a:hover { color: var(--accent); }
@media (max-width: 700px) {
.gt-footer-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}