/* ===================================================================== NOON — CANONICAL SITE NAV One chrome, every page. Desktop = top bar. Mobile = hamburger. Replaces the five different nav/corner patterns that had accumulated. Pages that include this file must also include /assets/_nav.html as the first child of , OR copy the nav markup pattern inline. ===================================================================== */ .nb-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(20px, 4vw, 56px); font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace); background: rgba(15, 15, 14, 0.78); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid rgba(184, 153, 104, 0.15); transition: background 280ms ease, border-color 280ms ease; } .nb-nav--solid { background: rgba(15, 15, 14, 0.96); border-bottom-color: rgba(184, 153, 104, 0.30); } /* Body padding so fixed nav doesn't cover hero content */ body.has-nb-nav { padding-top: 60px; } @media (max-width: 760px) { body.has-nb-nav { padding-top: 56px; } } /* ---------- Brand cluster ---------- */ .nb-nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .nb-nav__mark { width: 26px; height: 26px; display: block; overflow: visible; flex-shrink: 0; } .nb-nav__word { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-weight: 500; font-style: normal; font-size: 22px; line-height: 1; letter-spacing: -0.012em; color: var(--paper, #F2EBD9); } .nb-nav__sub { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; color: var(--paper-3, #A8A08B); padding-left: 14px; margin-left: 14px; border-left: 1px solid rgba(184, 153, 104, 0.25); } @media (max-width: 760px) { .nb-nav__sub { display: none; } .nb-nav__word { font-size: 20px; } } /* ---------- Desktop nav row — presidential register ---------- Inter, ALL CAPS, small size with refined tracking. The Hermes / Apple / NYT masthead pattern. Fraunces is reserved for display and editorial body type; the nav is the UI sans layer. */ .nb-nav__menu { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; } .nb-nav__menu li { display: inline-flex; align-items: center; } .nb-nav__link { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-style: normal; font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-2, #DCD4BD); text-decoration: none; padding: 10px 12px; position: relative; transition: color 220ms ease; white-space: nowrap; } .nb-nav__link:hover { color: var(--paper, #F2EBD9); } .nb-nav__link[aria-current="page"] { color: var(--paper, #F2EBD9); } .nb-nav__link[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px; background: var(--brass, #B89968); opacity: 0.7; } /* Group separators — thin vertical brass rules between the three sets */ .nb-nav__sep { display: inline-block; width: 1px; height: 14px; background: rgba(184, 153, 104, 0.32); margin: 0 12px; align-self: center; flex-shrink: 0; } /* ---------- Hamburger toggle ---------- */ .nb-nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; font: inherit; color: var(--paper, #F2EBD9); } .nb-nav__toggle:focus-visible { outline: 1px solid var(--ember, #E97E2D); outline-offset: 2px; } .nb-nav__toggle-icon { display: block; width: 22px; height: 16px; position: relative; } .nb-nav__toggle-icon span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--paper, #F2EBD9); border-radius: 1px; transition: transform 280ms ease, opacity 240ms ease, top 280ms ease; } .nb-nav__toggle-icon span:nth-child(1) { top: 2px; } .nb-nav__toggle-icon span:nth-child(2) { top: 7.5px; } .nb-nav__toggle-icon span:nth-child(3) { top: 13px; } .nb-nav[data-open="true"] .nb-nav__toggle-icon span:nth-child(1) { top: 7.5px; transform: rotate(45deg); } .nb-nav[data-open="true"] .nb-nav__toggle-icon span:nth-child(2) { opacity: 0; } .nb-nav[data-open="true"] .nb-nav__toggle-icon span:nth-child(3) { top: 7.5px; transform: rotate(-45deg); } /* ---------- Mobile drawer ---------- */ @media (max-width: 760px) { .nb-nav__menu { position: fixed; top: 56px; left: 0; right: 0; background: rgba(15, 15, 14, 0.985); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(184, 153, 104, 0.30); flex-direction: column; padding: 18px clamp(20px, 5vw, 36px) 28px; gap: 0; transform: translateY(-100%); pointer-events: none; opacity: 0; transition: transform 320ms cubic-bezier(.22,.61,.36,1), opacity 240ms ease; } .nb-nav__menu li { display: block; } .nb-nav__link { display: block; padding: 16px 0; font-size: 13px; letter-spacing: 0.18em; border-bottom: 1px solid rgba(184, 153, 104, 0.12); } .nb-nav__sep { display: block; width: auto; height: 1px; background: rgba(184, 153, 104, 0.45); margin: 14px 0; } .nb-nav__link[aria-current="page"]::after { display: none; } .nb-nav__toggle { display: inline-flex; } .nb-nav[data-open="true"] .nb-nav__menu { transform: translateY(0); opacity: 1; pointer-events: auto; } } /* Prevent body scroll while drawer is open on mobile */ body.nb-nav-open { overflow: hidden; } @media (min-width: 761px) { body.nb-nav-open { overflow: auto; } } @media (prefers-reduced-motion: reduce) { .nb-nav, .nb-nav__menu, .nb-nav__toggle-icon span { transition: none; } }