/** * SK CRITICAL CSS * ================ * * Bare-minimum layout primitives that MUST be in the cascade before * first paint to prevent CLS / "page shake". Specifically: the body's * top padding (offsetting the fixed nav) and the nav element's fixed * position + height. * * sk-nav.js still injects its full canonical stylesheet at runtime, * but by then this file has already applied — so the nav doesn't * jump down 64-80px after the page paints. * * Loaded via in every page's so it's * render-blocking. The file is tiny (<1 KB) — it costs almost nothing. */ /* Body offset so content doesn't slide under the fixed nav. Matches * the heights below at each breakpoint. */ body { padding-top: 80px; } /* Fixed nav — height stays consistent regardless of inline children * (logo / links / wallet) so the body offset above never feels wrong. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 80px; display: flex; align-items: center; background: rgba(3, 10, 6, 0.78); border-bottom: 1px solid rgba(46, 204, 113, 0.12); box-sizing: border-box; } @media (max-width: 880px) { body { padding-top: 72px; } .nav { height: 72px; } } @media (max-width: 600px) { body { padding-top: 64px; } .nav { height: 64px; } } /* Reserve a stable slot for the wallet widget so its async mount * doesn't reflow the rest of the nav. 50px is enough for the * PFP hex on mobile (42px) + breathing room. */ .nav-right { min-width: 50px; min-height: 42px; } @media (max-width: 430px) { .nav-right { min-width: 44px; } } /* Stop counter-animation digit-width shuffle on every stat number * site-wide: tabular-nums forces equal-width digits. */ .comm-stat-value, .about-stat-value, .analytics-value, [data-counter] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Respect users with reduced-motion preference — skip every * decorative infinite animation. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================ * 2026-05-13: LEGACY WALLET UI BAN — render-blocking, cannot be * defeated by inline style or by sk-wallet-widget's JS-based hide. * Every page used to ship its own connect button + balance pill + * gold PFP hex inside .nav-wallet-wrap. sk-wallet-widget owns the * wallet UI now (logo + menu + hex), so the legacy nodes must * NEVER render — they were bleeding over the COMMUNITY menu label * with their gold-themed 'connected' state. * ============================================================ */ .nav #connectWalletBtn, .nav .connect-wallet-btn, .nav #walletBalance, .nav .wallet-balance, .nav #walletDropdown, .nav .wallet-dropdown, .nav #navPfp, .nav .nav-pfp { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important; }