/* SNHP arena — shared top navigation. Everything is scoped under .snhp-nav and colors are hardcoded (not inherited from each page's own CSS vars) so the bar renders IDENTICALLY over every page. Dark pixel-gothic, kin to the arena: violet hairline, gold active, mono type. Sits at z-index 28 — above the HUD (<=26) and page content, but below the full-screen 3D replay theater (z-index 50) so a replay still covers it. */ .snhp-nav { position: sticky; top: 0; z-index: 28; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 7px 16px; background: rgba(11, 9, 22, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(167, 139, 250, 0.22); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38); font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; -webkit-font-smoothing: antialiased; } .snhp-nav *, .snhp-nav *::before, .snhp-nav *::after { box-sizing: border-box; } .snhp-nav__logo { flex: 0 0 auto; user-select: none; color: #a78bfa; font-size: 14px; line-height: 1; letter-spacing: 0.18em; font-weight: 700; filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.55)); } .snhp-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; /* basis 0 + grow: take the space left of the logo and wrap the pills within it on narrow viewports, instead of overflowing in one line */ flex: 1 1 0; min-width: 0; } .snhp-nav__list li { margin: 0; padding: 0; list-style: none; } .snhp-nav a { display: inline-block; padding: 6px 10px; border-radius: 8px; border: 1px solid transparent; color: #a29dbb; font-size: 12px; letter-spacing: 0.03em; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: color .14s ease, background .14s ease, border-color .14s ease; } .snhp-nav a:hover { color: #f0eff5; background: rgba(167, 139, 250, 0.12); } .snhp-nav a:focus-visible { outline: 2px solid #c4b1ff; outline-offset: 2px; } /* current page — warm gold, the arena's accent */ .snhp-nav a.is-active, .snhp-nav a[aria-current="page"] { color: #ffe08a; background: rgba(255, 224, 138, 0.12); border-color: rgba(255, 224, 138, 0.34); } /* narrow viewports: the row simply wraps to two lines — no toggle, no JS */ @media (max-width: 640px) { .snhp-nav { padding: 6px 12px; gap: 9px; } .snhp-nav a { padding: 5px 8px; font-size: 11.5px; } } @media (max-width: 384px) { .snhp-nav { gap: 7px; } .snhp-nav a { padding: 5px 7px; font-size: 11px; letter-spacing: 0.02em; } } /* the wordmark is a link in the shared nav — kill the underline, keep the glow */ a.snhp-nav__logo { text-decoration: none; } a.snhp-nav__logo:hover { color: #c4b1ff; } a.snhp-nav__logo:focus-visible { outline: 2px solid #c4b1ff; outline-offset: 2px; border-radius: 4px; } /* overlay variant: for fullscreen canvas pages (workshop) whose fixed stage would paint over a sticky bar — float above it instead of taking flow space */ .snhp-nav--overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000; /* above any in-page app chrome, below nothing of ours */ } /* ── auto-hide ────────────────────────────────────────────────────────── The bar slides out of view once the reader scrolls into the page, and returns on scroll-up, scroll-to-top, a hover at the top edge, or keyboard focus. nav.js toggles .is-hidden; overlay pages (which keep a persistent reserved strip) and any page with data-snhp-nav-autohide="off" never get the .snhp-nav--autohide class, so they stay put. Positioned `fixed` rather than the base `sticky`: every content page sets `overflow-x: hidden` on /, which turns the body into a scroll container and quietly defeats a sticky bar (it scrolls away instead of pinning). Fixing it to the viewport is what makes the slide-out/return actually land. nav.js drops in a same-height spacer so the now-out-of-flow bar doesn't let the page jump up under it. */ .snhp-nav--autohide { position: fixed; top: 0; left: 0; right: 0; transition: transform .2s ease; will-change: transform; } .snhp-nav--autohide.is-hidden { transform: translateY(-100%); } /* the flow spacer standing in for the fixed bar; its height is set by nav.js */ .snhp-nav__spacer { flex: 0 0 auto; } /* honour a reduced-motion preference — snap rather than slide */ @media (prefers-reduced-motion: reduce) { .snhp-nav--autohide { transition: none; } } /* the invisible strip pinned to the very top: hovering it pulls the bar back. It sits just under the bar (which covers it when shown) and, on touch, must never intercept taps — only a fine pointer arms it. */ .snhp-nav__revealzone { position: fixed; top: 0; left: 0; right: 0; height: 16px; z-index: 27; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .snhp-nav__revealzone { pointer-events: auto; } } /* ── shared footer: injected by nav.js on every non-archive page ── Archive lives here only, muted; the rest are the load-bearing exits. */ .snhp-foot { box-sizing: border-box; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 48px; padding: 18px 20px 28px; border-top: 1px solid rgba(167, 139, 250, 0.18); font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.02em; } .snhp-foot * { box-sizing: border-box; } .snhp-foot a { text-decoration: none; } .snhp-foot__arch { color: #6f6a86; } .snhp-foot__arch:hover { color: #a29dbb; } .snhp-foot__links { display: flex; flex-wrap: wrap; gap: 16px; } .snhp-foot__links a { color: #8fd0ff; } .snhp-foot__links a:hover { color: #c4e6ff; } .snhp-foot a:focus-visible { outline: 2px solid #c4b1ff; outline-offset: 2px; border-radius: 4px; }