/* * Shared site header / navigation. * Single source of truth for the top nav across every page. The markup is * injected server-side from src/siteNav.js into the placeholder, * and these styles are loaded last in so they win over any page-level * header styles. Do not duplicate nav styles in individual pages. */ header { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid #e5e5e5; padding: 16px 0; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); } .header-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .header-content .logo { font-size: 1.25rem; font-weight: 800; color: #1a1a1a; text-decoration: none; display: flex; flex-direction: row; align-items: center; gap: 10px; letter-spacing: 0.08em; } .header-content .logo:hover { text-decoration: none; } .header-content .logo-mark { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; } .header-nav { display: flex; gap: 22px; align-items: center; } .header-nav .header-nav-link { color: #737373; text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color 0.2s; } .page-link-arrow { display: inline-flex; align-items: baseline; gap: 4px; } .page-link-arrow::after { content: "↗"; font-size: 0.78em; font-weight: 700; line-height: 1; opacity: 0.7; transform: translateY(-0.08em); } .header-nav .header-nav-link:hover { color: #f97316; text-decoration: none; } .header-nav .header-nav-link[aria-current="page"] { color: #f97316; font-weight: 600; } .header-nav .header-cta { padding: 9px 16px; background: #f97316; color: #ffffff; border-radius: 10px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background 0.2s, transform 0.2s; white-space: nowrap; } .header-nav .header-cta:hover { background: #ea580c; transform: translateY(-1px); text-decoration: none; } .nav-toggle { display: none; } .nav-toggle-btn { display: none; width: 42px; height: 42px; border: 1px solid #e5e5e5; border-radius: 10px; background: #ffffff; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .nav-toggle-btn span, .nav-toggle-btn span::before, .nav-toggle-btn span::after { display: block; width: 18px; height: 2px; background: #1a1a1a; border-radius: 999px; content: ""; position: relative; } .nav-toggle-btn span::before { position: absolute; top: -6px; } .nav-toggle-btn span::after { position: absolute; top: 6px; } /* Collapse to a menu button whenever the full row would be cramped. */ @media (max-width: 980px) { .header-content { position: relative; } .nav-toggle-btn { display: inline-flex; } .header-nav { position: absolute; top: calc(100% + 16px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 4px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 12px; box-shadow: 0 24px 70px rgba(16, 24, 40, 0.14); z-index: 50; } .nav-toggle:checked ~ .header-nav { display: flex; } .header-nav .header-nav-link { font-size: 0.9375rem; padding: 12px; border-radius: 10px; } .header-nav .header-cta { padding: 12px; text-align: center; margin-top: 6px; } }