/* assets/css/mobile-menu.css — mobile nav opens from a fixed control on (outside page chrome) */ :root { --cyan: #39d6ff; --green: #74f7b2; --text: #eaffff; --muted: #8fb7c8; } /* Legacy in-nav buttons removed by JS; hide any stray .mobile-menu-btn except the body FAB */ .mobile-menu-btn:not(#sx-mobile-nav-fab) { display: none !important; } #sx-mobile-nav-fab { display: none; box-sizing: border-box; position: fixed; /* Below sticky hub / learn nav (~60–62px) + small gap; clears most header rows */ top: calc(env(safe-area-inset-top, 0px) + 72px); right: 0; left: auto; bottom: auto; transform: none; transform-origin: center right; /* Above nav strips, modals, and AI widgets */ z-index: 20000; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 28px; min-height: 0; padding: 8px 3px 10px; margin: 0; border: 1px solid rgba(57, 214, 255, 0.34); border-right: none; border-radius: 12px 0 0 12px; background: linear-gradient(180deg, rgba(6, 18, 36, 0.96), rgba(2, 11, 24, 0.98)); box-shadow: -6px 10px 26px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04); color: var(--text); font-family: 'Syne', 'DM Sans', system-ui, sans-serif; font-weight: 800; cursor: pointer; line-height: 1; transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s ease, opacity 0.15s ease; } #sx-mobile-nav-fab:active { transform: scale(0.94); opacity: 0.92; } #sx-mobile-nav-fab:hover { border-color: rgba(247, 136, 47, 0.65); color: #f7882f; } #sx-mobile-nav-fab[aria-expanded='true'] { border-color: rgba(247, 195, 49, 0.55); color: #f7c331; } #sx-mobile-nav-fab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } .sx-mobile-nav-fab-icon { font-size: 0.95rem; line-height: 1; } .sx-mobile-nav-fab-text { writing-mode: vertical-rl; text-orientation: mixed; font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; } @media (max-width: 980px) { #sx-mobile-nav-fab { display: flex !important; visibility: visible !important; pointer-events: auto !important; } /* Reserve a slim gutter so page text does not run under the docked tab */ body { padding-right: max(30px, env(safe-area-inset-right, 0px)); } /* Hub pages: allow wrapped mobile panel; override inline `nav{height:60px}` on blog/market/holder */ nav.surferx-hub-nav { position: relative; flex-wrap: wrap; align-items: center; row-gap: 8px; min-height: 60px; height: auto !important; max-height: none; overflow: visible; } /* Learn Hub home (index): sticky + auto height so the link panel grows in flow (matches hub pages; avoids overlay) */ nav.nav { position: sticky !important; top: 0; z-index: 900; min-height: 62px; height: auto !important; max-height: none; left: auto !important; right: auto !important; width: 100%; box-sizing: border-box; flex-wrap: wrap; align-items: center; row-gap: 8px; } /* Index: ticker strip follows nav in flow (only index defines .mstrip) */ body .mstrip { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: 100%; box-sizing: border-box; z-index: auto; } /* Index: header is in-flow — drop spacer that assumed fixed nav + strip */ body .main { padding-top: 1.25rem !important; } nav.nav .nav-page-links, nav.surferx-hub-nav .nav-links { order: 50; flex-basis: 100%; width: 100%; flex-direction: column; align-items: stretch; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease; padding: 0; margin: 0; gap: 0; } nav.nav.nav-open .nav-page-links, nav.surferx-hub-nav.nav-open .nav-links { max-height: 560px; opacity: 1; pointer-events: auto; padding: 12px 0 8px; gap: 6px; display: flex !important; } nav.nav.nav-open .nav-page-links a, nav.surferx-hub-nav.nav-open .nav-links a { padding: 10px 12px; border-radius: 10px; background: rgba(29, 233, 255, 0.06); } /* Optional sx-nav + sx-topbar pattern */ .sx-nav { position: absolute; top: 100%; left: 0; right: 0; background: linear-gradient(180deg, rgba(3, 8, 18, 0.95), rgba(7, 21, 34, 0.92)); border-bottom: 1px solid rgba(57, 214, 255, 0.14); backdrop-filter: blur(12px); flex-direction: column; padding: 12px; gap: 8px; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 999; } .sx-nav.nav-open { max-height: 500px; opacity: 1; pointer-events: auto; } .sx-nav a { padding: 12px 14px; border-radius: 10px; font-size: 14px; } .sx-topbar { position: relative; flex-direction: column; align-items: stretch; } .sx-topbar > * { flex: 1; } } @media (max-width: 640px) { #sx-mobile-nav-fab { top: calc(env(safe-area-inset-top, 0px) + 68px); width: 26px; padding: 7px 2px 9px; gap: 3px; border-radius: 10px 0 0 10px; } .sx-mobile-nav-fab-icon { font-size: 0.88rem; } .sx-mobile-nav-fab-text { font-size: 6px; letter-spacing: 0.12em; } .sx-nav.nav-open { max-height: 420px; } .sx-nav a { text-align: center; padding: 11px 12px; font-size: 13px; } } .sx-nav a:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; } nav.nav .nav-page-links a:focus-visible, nav.surferx-hub-nav .nav-links a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }