/* ============================================================ Sitewide mobile breakpoints. ONLY applies at narrow widths (max-width:720px / 480px) — desktop view is untouched. Loaded from /scripts/nav.js so every page gets it for free. ============================================================ */ /* ============================================================ Nav collapses to the hamburger below 1100px. The full desktop nav (logo + 4 link groups + sign-in/account + CTA) needs ~1070px wide signed-out, ~1220px signed-in. Below that the flex row crowds and the uppercase labels wrap onto 2-3 lines, bursting the fixed 64px bar. Collapsing to the hamburger here keeps the bar a clean single row at every width between this and 720px (the former dead-zone). The page CONTENT columns stay desktop until 720px — only the nav switches early. nav-inner keeps its 48px padding in this range so the logo stays aligned with page content. ============================================================ */ @media (max-width: 1100px) { #site-nav .nav-links { display: none !important; } #site-nav .nav-links.mobile-open { display: flex !important; position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #161410; border-bottom: 1px solid var(--border); padding: 8px 12px 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); max-height: calc(100vh - 64px); overflow-y: auto; } body.bounty-active #site-nav .nav-links.mobile-open { top: 96px; } #site-nav .nav-links.mobile-open > a, #site-nav .nav-links.mobile-open .nav-dropdown { width: 100%; padding: 14px 12px; border-bottom: 1px solid var(--border); } #site-nav .nav-links.mobile-open .nav-dropdown { flex-direction: column; align-items: stretch; padding: 0; } #site-nav .nav-links.mobile-open .nav-dropdown-trigger { width: 100%; padding: 14px 12px; justify-content: space-between; } /* M2 (2026-07-17): the sheet's dropdown groups are TAP-TO-EXPAND now, not force-opened — the old always-open panels made a 703px wall. nav.js toggles .open on the group; collapsed panels take no space. */ #site-nav .nav-links.mobile-open .nav-dropdown-panel { position: static !important; transform: none !important; box-shadow: none !important; background: transparent !important; border: none !important; min-width: 0 !important; padding: 0 0 8px 16px !important; margin: 0; display: none; } #site-nav .nav-links.mobile-open .nav-dropdown.open .nav-dropdown-panel { display: block; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } #site-nav .nav-links.mobile-open .nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); } /* Descriptions drop out of the sheet (they stay on desktop hover panels), and the four not-yet-live platforms collapse to the one summary line. */ #site-nav .nav-links.mobile-open .nav-dropdown-item-desc { display: none !important; } #site-nav .nav-links.mobile-open .nav-dropdown-item.soon { display: none !important; } #site-nav .nav-links.mobile-open .nav-more-soon { display: block !important; } #site-nav .nav-links.mobile-open .nav-dropdown-item { padding: 12px 14px; } #site-nav .nav-links.mobile-open .nav-dropdown-item-title { margin-bottom: 0; } /* The sheet glides in instead of popping (guarded for reduced motion), and the page behind it can't scroll while it's open. */ #site-nav .nav-links.mobile-open { animation: o2iNavSheetIn 0.18s ease-out; } @media (prefers-reduced-motion: reduce) { #site-nav .nav-links.mobile-open { animation: none; } } /* Hamburger toggle button — injected into the nav by nav.js */ #site-nav .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; padding: 0; margin-left: auto; } #site-nav .nav-burger svg { width: 18px; height: 18px; } } /* M2: nav-sheet scroll lock + slide-in keyframes (used by the <=1100px hamburger sheet above; nav.js toggles html.nav-sheet-open). */ html.nav-sheet-open, html.nav-sheet-open body { overflow: hidden; } @keyframes o2iNavSheetIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ---------- 720px and below (tablet portrait + phone landscape) ---------- */ @media (max-width: 720px) { /* Tighter container padding — 48px is way too much on a 360px screen */ .container { padding: 0 20px !important; } /* ---------- Nav ---------- */ /* On true phone widths, tighten the bar padding (logo no longer needs to align with the 48px content column — that drops to 20px too) and shrink the CTA so logo + burger + CTA fit a 360px row. */ #site-nav .nav-inner { padding: 0 16px !important; gap: 12px !important; } /* 44px min tap height on the bar controls (Apple HIG). The 64px bar has room; inner padding keeps the visual size compact. 2026-07-11. */ /* box-sizing:border-box is the real fix (Robert 2026-07-19: "Get my report is taller than the other nav boxes"). The burger + account chip are