/* ============================================================================ Shared site chrome — header, nav, promo-bar offsets, sidebar ads. Every page ships its own inline copy of the header CSS, and the copies had drifted (different heights, breakpoints, a 36px nav push on desktop). This file is linked last in on every page with a .site-header and uses an `html body` prefix so it wins over the per-page rules without relying on source order. ============================================================================ */ :root { --header-h: 60px; --promo-h: 0px; } html.has-premium-promo { --promo-h: 36px; } @media (max-width: 640px) { html.has-premium-promo { --promo-h: 40px; } } /* ─── Header bar: one fixed height everywhere ──────────────────────────── */ html body .site-header { top: var(--promo-h); height: var(--header-h); padding: 0 20px; display: flex; align-items: center; /* backdrop-filter makes the header the containing block for the fixed mobile menu inside it, so the menu is positioned relative to the header (top: var(--header-h)), not the viewport. Set it here so that holds on every page. */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html body .header-content { width: 100%; min-width: 0; gap: 12px; } html body .header-brand { min-width: 0; flex-shrink: 1; white-space: nowrap; } html body .header-brand > span:not(.header-logo) { overflow: hidden; text-overflow: ellipsis; } html body .header-nav a { white-space: nowrap; } html body .mobile-menu-toggle { min-width: 44px; min-height: 44px; flex-shrink: 0; } /* ─── Desktop / laptop: inline nav, never wraps ────────────────────────── */ @media (min-width: 1025px) { html body .header-nav, html.has-premium-promo body .header-nav { margin-top: 0; flex-wrap: nowrap; } } @media (min-width: 1025px) and (max-width: 1200px) { html body .header-nav { gap: 2px; } html body .header-nav a { padding: 7px 10px; font-size: 0.85rem; } html body .header-nav a.is-premium-cta { padding-right: 40px !important; } html body .header-brand { font-size: 1.15rem; } } /* ─── Phones, tablets and small laptops: hamburger menu ────────────────── */ @media (max-width: 1024px) { html body .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; } html body .header-nav, html.has-premium-promo body .header-nav { position: fixed; top: var(--header-h); left: 0; right: 0; margin-top: 0; max-height: calc(100vh - var(--promo-h) - var(--header-h)); overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 16px 16px; background: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-120%); opacity: 0; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; z-index: 999; } html body .header-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; } /* Dark-themed pages (/premium/) use light link text: keep the menu dark. */ html body .site-header--dark .header-nav { background: #1A0B1E; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } html body .header-nav a { width: 100%; text-align: center; padding: 12px 20px; font-size: 1rem; } } @media (max-width: 768px) { html body .header-brand { font-size: 1.1rem; } html body .header-logo { font-size: 1.3rem; } } @media (max-width: 360px) { html body .site-header { padding: 0 12px; } html body .header-brand { font-size: 1rem; } } /* ─── Homepage "screens" are position:fixed, so offset them explicitly ─── */ html body .screen { top: calc(var(--promo-h) + var(--header-h)); height: calc(100% - var(--promo-h) - var(--header-h)); } html.screenshot-mode body .screen { top: 0; height: 100%; } /* ─── Sidebar ads: only where there is real room beside the content ────── */ html body .sidebar-ad { top: calc(var(--promo-h) + var(--header-h) + 16px); display: none; } @media (min-width: 1400px) { html body .sidebar-ad { display: block; } } /* ─── Long URLs/emails in copy must wrap instead of widening the page ──── */ html body p a, html body li a, html body td { overflow-wrap: anywhere; } /* ─── Tap targets (≥ 36–44px) and minimum legible text on phones ───────── */ html body .header-brand { padding-top: 8px; padding-bottom: 8px; } html body .countdown-item small { font-size: 0.7rem; letter-spacing: 0.3px; } html body .hero-quick-links a { display: inline-block; padding: 8px 6px; } html body .scroll-hint { display: inline-block; padding: 10px 16px; } html body .keyword-tag { display: inline-flex; align-items: center; min-height: 38px; } @media (max-width: 768px) { html body .premium-hero-feat { font-size: 0.75rem; } html body .premium-hero-cta-pill { font-size: 0.72rem; } html body footer a, html body .site-footer a, html body .back-links a { display: inline-block; padding-top: 9px; padding-bottom: 9px; } } /* ─── Keyboard focus that's actually visible on the pink theme ─────────── */ html body .header-nav a:focus-visible, html body .mobile-menu-toggle:focus-visible, html body .header-brand:focus-visible { outline: 3px solid #c2185b; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html body .header-nav { transition: none; } }