/* ============================================================================ site-nav.css — SINGLE SOURCE for the site top navigation (.site-nav). Linked from every page so the bar is identical everywhere. Do NOT inline .site-nav rules in page templates anymore; edit this file instead. Uses var(--token, fallback) so it renders correctly even on pages whose token set differs slightly (the fallbacks are the canonical brand values). Markup expected on each page (right after ): ============================================================================ */ .site-nav { background: rgba(250, 248, 244, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border, #e2ddd4); /* Bar stays full-bleed; its content is constrained to a 1200px centered column to line up with the footer (.footer-inner, max-width 1200px), so the top and bottom bars are the same width on wide screens. */ padding: 0.7rem max(1.25rem, calc((100% - 1200px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 1200; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04); } /* The homepage JS toggles .scrolled; it's a no-op now (kept for compatibility). */ .site-nav.scrolled { transform: none; } .site-nav .brand { font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif); font-size: 1.25rem; font-weight: 700; color: var(--text, #1a1714); display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; line-height: 1; text-decoration: none; } .site-nav .brand:hover { text-decoration: none; } .site-nav .brand svg { color: var(--gold, #c49b2a); flex-shrink: 0; } .site-nav .brand em { font-style: italic; font-weight: 600; color: var(--primary, #7a5c10); } .site-nav .nav-links { display: flex; gap: 1.25rem; font-size: 0.92rem; } .site-nav .nav-links a { color: var(--text-muted, #6b6358); text-decoration: none; line-height: 1.6; } .site-nav .nav-links a:hover, .site-nav .nav-links a.active { color: var(--primary, #7a5c10); } @media (max-width: 600px) { .site-nav { padding: 0.6rem 0.9rem; gap: 0.6rem; } .site-nav .brand { font-size: 0.98rem; gap: 0.4rem; } .site-nav .brand svg { width: 16px; height: 16px; } .site-nav .nav-links { gap: 0.85rem; font-size: 0.82rem; } } @media (max-width: 380px) { .site-nav .nav-links a[href="/mission.html"] { display: none; } } [data-bs-theme="dark"] .site-nav { background: #1a1714; border-bottom-color: #3a3526; }