/* Shared top-bar chrome for every Deviant.x subpage. Identical to the main landing's
, so navigating between /, /potidaea/, /anthemus/, /agora/, /katalogos/, /artemision/ never changes the header. Tokens (--sky-*, --ink-*, --muted, --acid, --acid-glow, --acid-halo, --border) are defined per-page. If a token is missing, the fallback in each rule below keeps the header from breaking. */ body { padding-top: 58px; } /* clear the fixed header */ /* Desktop: reserve the right gutter for the vertical sub-nav rail so it never overlaps hero / body content. Kept in sync with the .sub-nav breakpoint below (matches its 900px flip to a horizontal top-band). */ @media (min-width: 901px) { body { padding-right: 200px; } } .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100; background: rgba(5, 5, 5, 0.82); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .site-header .topbar { max-width: 1180px; margin: 0 auto; padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; } .site-header .topbar-right { display: flex; align-items: center; gap: 28px; } .site-header .wordmark { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink-bright, #f1f4fa); text-decoration: none; line-height: 1; } .site-header .wordmark::after { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--acid, #d6ff3d); border-radius: 50%; margin-left: 7px; vertical-align: middle; transform: translateY(-2px); box-shadow: 0 0 6px var(--acid-glow, rgba(214, 255, 61, 0.55)), 0 0 14px var(--acid-halo, rgba(214, 255, 61, 0.22)); } .site-header .nav { display: flex; gap: 36px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted, #6a7488); } .site-header .nav a { color: var(--muted, #6a7488); text-decoration: none; transition: color 0.3s ease; } .site-header .nav a:hover { color: var(--ink-bright, #f1f4fa); } .site-header .nav a[aria-current="page"] { color: var(--acid, #c6ff00); text-shadow: 0 0 6px rgba(198, 255, 0, 0.55), 0 0 18px rgba(198, 255, 0, 0.30); } @media (max-width: 720px) { .site-header .topbar { padding: 12px 20px; } .site-header .nav { display: none; } } /* -------- Sub-nav — vertical right-side rail -------- Fixed rail on desktop (vertically centred, right edge). Each subpage owns its own section-anchor set + a primary CTA. A ↑ Top anchor is included at the tail to jump back to the page's #top hero. Use with: On narrow viewports the rail flips to a compact horizontal band at the top so it never covers content. */ .sub-nav { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 90; background: rgba(5, 5, 5, 0.72); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); } .sub-nav .sub-nav-in { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 168px; } .sub-nav .sub-nav-links { display: flex; flex-direction: column; gap: 2px; font-family: 'DM Sans', system-ui, sans-serif; } .sub-nav .sub-nav-links a { color: var(--ink-soft, #b9c0cf); text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; text-align: right; padding: 8px 12px; border-radius: 8px; border: 1px solid transparent; transition: color .2s ease, border-color .2s ease, background .2s ease; } .sub-nav .sub-nav-links a:hover { color: var(--ink-bright, #f1f4fa); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); } .sub-nav .sub-nav-links a[aria-current="true"], .sub-nav .sub-nav-links a.is-active { color: var(--acid, #c6ff00); border-color: rgba(198, 255, 0, 0.28); background: rgba(198, 255, 0, 0.06); } .sub-nav .sub-nav-cta { font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--sky-deep, #050505); background: var(--acid, #c6ff00); padding: 10px 14px; border-radius: 10px; text-decoration: none; text-align: center; box-shadow: 0 0 18px var(--acid-halo, rgba(198,255,0,0.34)); transition: transform .25s ease, box-shadow .25s ease; white-space: nowrap; } .sub-nav .sub-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 0 26px var(--acid-glow, rgba(198,255,0,0.55)); } .sub-nav .sub-nav-top { display: block; text-align: center; font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; line-height: 1; color: var(--muted, #6a7488); text-decoration: none; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; transition: color .2s ease, border-color .2s ease, background .2s ease; margin-top: 2px; } .sub-nav .sub-nav-top:hover { color: var(--acid, #c6ff00); border-color: rgba(198, 255, 0, 0.28); background: rgba(198, 255, 0, 0.06); } /* Below 900px, flip to a compact horizontal band at the top so the rail never covers narrow-screen content. */ @media (max-width: 900px) { .sub-nav { position: sticky; top: 58px; right: auto; left: 0; transform: none; border-radius: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 10px 16px; box-shadow: none; background: rgba(5, 5, 5, 0.85); } .sub-nav .sub-nav-in { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; max-width: 1180px; margin: 0 auto; } .sub-nav .sub-nav-links { flex-direction: row; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; } .sub-nav .sub-nav-links::-webkit-scrollbar { display: none; } .sub-nav .sub-nav-links a { text-align: left; padding: 6px 10px; white-space: nowrap; } .sub-nav .sub-nav-cta { padding: 8px 14px; font-size: 12px; } .sub-nav .sub-nav-top { display: none; } }