/** * v111-additions.css * * Fixes: * 1. Token opacity — tokens stay at fixed opacity when menu opens; no glitch/fade * 2. Auth bar gone when logged in → header/leaderboard shift down correctly * 3. Mobile TOP TRACKS — no gap, correct position, menus open BELOW the bar * 4. Responsive text sizing — fluid clamp() base font, proper scaling everywhere * 5. Sign-in page — fully responsive, nicely scaled on all screen sizes * 6. Sign-up page — social section guarded (no critical error) * 7. Preload improvements — reduce layout shift */ /* ═══════════════════════════════════════════════════════════════════ 1. TOKEN OPACITY FIX Tokens must stay at their original opacity at all times while the panel is open. Remove the fade-in delay so they never glitch. ═══════════════════════════════════════════════════════════════════ */ /* Override v102: lock tokens at constant opacity when panel is open. No transition, no delay, no opacity animation — instant & stable. */ .cb-offcanvas .cb-menu-dyn-layer { opacity: 0 !important; transition: none !important; } .cb-offcanvas.open .cb-menu-dyn-layer { opacity: 0.70 !important; transition: none !important; } /* While closing, fade tokens out instantly so there's no half-visible flash */ .cb-offcanvas.cb-link-closing .cb-menu-dyn-layer, .cb-offcanvas:not(.open) .cb-menu-dyn-layer { opacity: 0 !important; transition: none !important; } /* ═══════════════════════════════════════════════════════════════════ 2. AUTH BAR GONE WHEN LOGGED IN — adjust offsets for logged-in users When user is logged in the .cb-auth-bar is not rendered (26px less). We apply a body.logged-in adjustment so header/leaderboard/offcanvas all stack correctly without the top bar. ═══════════════════════════════════════════════════════════════════ */ /* WP adds .logged-in to automatically */ body.logged-in .cb-site-header { top: 0 !important; } body.logged-in .cb-leaderboard-bar { top: 50px !important; } body.logged-in #cb-site-wrapper { padding-top: calc(50px + 32px) !important; } body.logged-in .cb-offcanvas { top: calc(50px + 32px) !important; } /* Mobile: logged-in adjustments */ @media (max-width: 600px) { body.logged-in .cb-site-header { top: 0 !important; } body.logged-in .cb-leaderboard-bar { top: 44px !important; } body.logged-in #cb-site-wrapper { padding-top: calc(44px + 32px) !important; } body.logged-in .cb-offcanvas { top: calc(44px + 32px) !important; } } /* ═══════════════════════════════════════════════════════════════════ 3. MOBILE TOP TRACKS — fix gap & overlap The auth bar is 26px, header is 44px on mobile (not 50px). Override v96 values for mobile breakpoint. Offcanvas must start below leaderboard bar, not just the header. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { /* Header sits just below auth bar */ .cb-site-header { top: 26px !important; } /* Leaderboard: auth (26) + mobile header (44) */ .cb-leaderboard-bar { top: calc(26px + 44px) !important; } /* Page wrapper pushed below all three bars */ #cb-site-wrapper { padding-top: calc(26px + 44px + 32px) !important; } /* ▶ CRITICAL: Off-canvas panels open BELOW the leaderboard bar ◀ */ .cb-offcanvas { top: calc(26px + 44px + 32px) !important; } /* Leaderboard z-index must be ABOVE offcanvas panels on mobile so the bar never gets covered by the sliding menus */ .cb-leaderboard-bar { z-index: calc(var(--cb-z-offcanvas, 14500) + 100) !important; } /* Auth bar z-index above everything on mobile */ .cb-auth-bar { z-index: calc(var(--cb-z-header, 20000) + 10) !important; } } /* Extra small screens */ @media (max-width: 400px) { .cb-leaderboard-bar { top: calc(26px + 44px) !important; } #cb-site-wrapper { padding-top: calc(26px + 44px + 32px) !important; } .cb-offcanvas { top: calc(26px + 44px + 32px) !important; } } /* ═══════════════════════════════════════════════════════════════════ 4. RESPONSIVE TEXT SIZING Base font uses clamp() so text scales naturally from mobile → desktop. Prevents text from being too tiny on mobile or too wide on desktop. ═══════════════════════════════════════════════════════════════════ */ :root { /* Fluid base: 13px on mobile, up to 15px on wide screens */ --cb-base-font: clamp(13px, 1.1vw + 10px, 15px); } /* Page content: never overflow on any device */ .cb-page { width: 100%; box-sizing: border-box; padding: clamp(1.8rem, 5vw, 4.6rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 6vw, 6rem); max-width: 1200px; } /* Page titles: fluid scale */ .cb-page-title { font-size: clamp(0.85rem, 2.5vw, 1.10rem) !important; } /* Body text / subtitles */ .cb-page-subtitle { font-size: clamp(0.52rem, 1.2vw, 0.60rem); max-width: min(760px, 90vw); } /* Generic content text — prevent overflow on narrow viewports */ .cb-page p, .cb-page li, .cb-page td, .cb-page span:not(.cb-page-title) { max-width: 100%; word-break: break-word; overflow-wrap: break-word; } /* ═══════════════════════════════════════════════════════════════════ 5. SIGN-IN PAGE — fully responsive, nicely scaled ═══════════════════════════════════════════════════════════════════ */ .cb-signin-page { max-width: min(1000px, 96vw) !important; margin: 0 auto !important; padding: clamp(1.5rem, 4vw, 3rem) clamp(0.8rem, 3vw, 1.5rem) clamp(3rem, 6vw, 5rem) !important; box-sizing: border-box !important; } .cb-signin-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px) !important; gap: clamp(1.5rem, 4vw, 3rem) !important; align-items: start !important; } @media (max-width: 760px) { .cb-signin-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } } /* WooCommerce forms inside signin: proper scaling */ .cb-wc-auth-wrap .woocommerce, .cb-wc-auth-wrap .woocommerce-page { font-size: clamp(0.54rem, 1.1vw, 0.60rem) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .cb-wc-auth-wrap .woocommerce input[type="text"], .cb-wc-auth-wrap .woocommerce input[type="email"], .cb-wc-auth-wrap .woocommerce input[type="password"] { font-size: clamp(0.52rem, 1vw, 0.58rem) !important; padding: clamp(0.4rem, 1.2vw, 0.55rem) clamp(0.5rem, 1.5vw, 0.75rem) !important; width: 100% !important; box-sizing: border-box !important; max-width: 100% !important; border-radius: 0 !important; } .cb-wc-auth-wrap .woocommerce label { font-size: clamp(0.50rem, 1vw, 0.56rem) !important; display: block !important; margin-bottom: 0.3rem !important; } .cb-wc-auth-wrap .woocommerce button.button, .cb-wc-auth-wrap .woocommerce input[type="submit"] { font-family: 'JetBrains Mono', monospace !important; font-size: clamp(0.54rem, 1vw, 0.60rem) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 0.6rem 1.2rem !important; border-radius: 0 !important; width: 100% !important; cursor: pointer !important; } /* Social login notice text */ .cb-social-notice-text { font-size: clamp(0.50rem, 1vw, 0.56rem) !important; line-height: 1.6 !important; } /* Benefits list */ .cb-benefits-list li { font-size: clamp(0.52rem, 1.1vw, 0.58rem) !important; } /* Signin header */ .cb-page-header .cb-page-title { font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important; } .cb-page-header .cb-page-subtitle { font-size: clamp(0.52rem, 1.2vw, 0.60rem) !important; } /* Section title */ .cb-section-title { font-size: clamp(0.60rem, 1.5vw, 0.76rem) !important; } /* ═══════════════════════════════════════════════════════════════════ 6. SIGN-UP PAGE — fluid & safe ═══════════════════════════════════════════════════════════════════ */ .cb-signup-page { max-width: min(520px, 96vw) !important; margin: 0 auto !important; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(0.8rem, 3vw, 1.5rem) clamp(3rem, 6vw, 5rem) !important; box-sizing: border-box !important; } .cb-signup-wrap { width: 100% !important; box-sizing: border-box !important; } .cb-signup-title { font-size: clamp(0.85rem, 2.5vw, 1.1rem) !important; } .cb-signup-sub { font-size: clamp(0.50rem, 1.2vw, 0.56rem) !important; } .cb-form-input { font-size: clamp(0.52rem, 1.1vw, 0.58rem) !important; padding: clamp(0.4rem, 1.2vw, 0.55rem) clamp(0.5rem, 1.5vw, 0.75rem) !important; width: 100% !important; box-sizing: border-box !important; } .cb-form-label { font-size: clamp(0.46rem, 1vw, 0.52rem) !important; } .cb-form-submit { font-size: clamp(0.54rem, 1vw, 0.60rem) !important; padding: clamp(0.55rem, 1.5vw, 0.7rem) 1.2rem !important; width: 100% !important; } /* Social login section on signup — only show if rendered */ .cb-signup-social { margin-top: 1.5rem !important; padding-top: 1rem !important; border-top: 1px solid var(--cb-border-soft, #ececec) !important; } .cb-form-divider { display: flex !important; align-items: center !important; gap: 0.7rem !important; margin: 1rem 0 0.8rem !important; font-size: clamp(0.48rem, 1vw, 0.54rem) !important; color: #aaa !important; letter-spacing: 0.04em !important; } .cb-form-divider::before, .cb-form-divider::after { content: '' !important; flex: 1 !important; height: 1px !important; background: #e5e5e5 !important; } /* ── Mobile signup adjustments ── */ @media (max-width: 600px) { .cb-form-row--2 { grid-template-columns: 1fr !important; } .cb-signup-title { font-size: 0.90rem !important; } } /* ═══════════════════════════════════════════════════════════════════ 7. GLOBAL RESPONSIVE OVERFLOW PREVENTION Ensure nothing stretches wider than the viewport on any device. ═══════════════════════════════════════════════════════════════════ */ html, body { overflow-x: hidden !important; max-width: 100% !important; } #cb-site-wrapper, #cb-main, .cb-page, .cb-signin-page, .cb-signup-page, .cb-dashboard-page { max-width: 100vw !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* WooCommerce pages: never wider than viewport */ .woocommerce, .woocommerce-page, .woocommerce-checkout, .woocommerce-cart { max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Tables: scroll horizontally instead of overflowing */ .cb-page table, .woocommerce table { width: 100% !important; table-layout: auto !important; overflow-x: auto !important; display: block !important; max-width: 100% !important; } /* ═══════════════════════════════════════════════════════════════════ 8. PRELOAD / PERFORMANCE — prevent layout shift on load ═══════════════════════════════════════════════════════════════════ */ /* Reserve space for the fixed bars so content doesn't jump on load */ #cb-main { /* Will be overridden by logged-in / logged-out media queries above. Default: auth (26) + header (50) + leaderboard (32) */ min-height: calc(100vh - 108px) !important; } /* Prevent invisible content flash before palette JS runs */ .cb-offcanvas { will-change: transform; } /* Smooth scroll */ html { scroll-behavior: smooth; } /* Font display: ensure text is always visible, never invisible */ body { font-display: swap; }