/* * Hadron global navigation bar. * Loaded by demo.html, sectors.html, every sectors/.html, and * comparisons.html so visitors always have a way to jump between * the narrative, the sectors index, and the live comparisons page. */ /* * Standardised header, identical on every page regardless of how that page's * is sized (demo.html is full-width with a .wrap; live.html caps body * at 1200px; the sector pages cap at 1200px; all with their own padding). * The bar is a full-bleed sticky element (breaks out of any constrained * parent to span the viewport) and its CONTENT is centred and capped at a * single shared width so the logo/links/pill land in the same place on * every page. 1136px = the 1200px content body minus its 2x32px gutters, * so the nav content lines up with the page content too. */ html { overflow-x: clip; } /* contain the full-bleed bar, no h-scroll */ body:has(> .hadron-nav) { padding-top: 0; } /* nav sits flush to the top, no gap above */ .hadron-nav { position: sticky; top: 0; z-index: 100; box-sizing: border-box; width: 100vw; margin: 0 calc(50% - 50vw) 28px; /* full-bleed, independent of parent width */ padding: 14px max(24px, calc((100vw - 1136px) / 2)); /* centre + cap content at 1136px */ display: flex; align-items: center; gap: 28px; background: rgba(250, 250, 247, 0.92); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid #e5e2db; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; } .hadron-nav .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #11162a; } .hadron-nav .nav-logo { height: 20px; opacity: 0.85; } .hadron-nav .nav-product { font-weight: 700; letter-spacing: -0.01em; font-size: 16px; } .hadron-nav .nav-links { display: flex; gap: 4px; margin-left: 24px; } .hadron-nav .nav-links a { color: #6b7280; text-decoration: none; font-weight: 500; padding: 6px 12px; border-radius: 6px; transition: all 0.15s ease; } .hadron-nav .nav-links a:hover { color: #11162a; background: rgba(160, 120, 90, 0.06); } .hadron-nav .nav-links a.active { color: #a0785a; background: rgba(160, 120, 90, 0.08); } .hadron-nav .nav-status { margin-left: auto; display: flex; gap: 10px; align-items: center; } .hadron-nav .status-pill { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 4px; background: #f2f1ed; color: #6b7280; border: 1px solid #e5e2db; } .hadron-nav .nav-github { display: flex; align-items: center; gap: 6px; color: #6b7280; text-decoration: none; font-size: 12px; font-weight: 500; } .hadron-nav .nav-github:hover { color: #a0785a; } @media (max-width: 760px) { .hadron-nav { flex-wrap: wrap; gap: 12px; padding: 12px max(16px, calc((100vw - 1136px) / 2)); margin: 0 calc(50% - 50vw) 22px; } .hadron-nav .nav-links { margin-left: 0; } .hadron-nav .nav-status { margin-left: 0; } }