/* The top bar shared by every public marketing page (index.php, faq.php, privacy_policy.php, terms_of_service.php) via includes/site_header.php — one stylesheet so the four pages can't drift apart. Sticky, and collapses to a hamburger menu at 1080px and below (driven by assets/site-header.js). */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 50; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.6; } .topbar * { box-sizing: border-box; } .brand-link { display: flex; align-items: center; gap: 8px; font-size: 1.3em; font-weight: 600; letter-spacing: -0.02em; color: #1568c4; text-decoration: none; } .brand-logo { width: 30px; height: 30px; } .topbar-links { display: flex; align-items: center; gap: 26px; font-size: 0.95em; } .topbar-links a { text-decoration: none; color: #374151; font-weight: 500; white-space: nowrap; } .topbar-links a:hover { color: #1568c4; } /* .topbar-links a's color otherwise beats .btn-primary's on specificity (class+element vs just class), turning the Sign Up button's white text dark-on-blue and unreadable. */ .topbar-links a.btn { color: #fff; } .topbar-links a.btn:hover { color: #fff; } /* Hamburger button — hidden on desktop, shown (only when JS is running, see the .js class set in each page's ) once the nav items (six links plus a Sign up button) no longer fit on one row. Without JS the links simply stay visible and wrap, so the nav can never end up hidden with no way to open it. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; color: #374151; font-size: 1.35em; cursor: pointer; padding: 0; } @media (max-width: 1080px) { .topbar { flex-wrap: wrap; padding: 12px 20px; } .js .nav-toggle { display: inline-flex; } .js .topbar-links { display: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin-top: 10px; font-size: 1em; } .js .topbar.is-open .topbar-links { display: flex; } .js .topbar-links a { padding: 14px 4px; border-top: 1px solid #f1f2f4; } .js .topbar-links a.btn { margin-top: 10px; padding: 12px; text-align: center; border-top: 0; } /* No JS: keep the links visible and let them wrap as whole items. */ .topbar-links { flex-wrap: wrap; gap: 6px 18px; } } @media (max-width: 640px) { .topbar { font-size: 16px; } }