/* ========================================================= BSA Global Theme Variables (used across all pages) ========================================================= */ :root{ --bsa-blue:#004080; --bsa-red:#E60028; --text:#0f172a; --muted: rgba(15,23,42,0.72); --page:#f5f7fb; --card:#ffffff; --radius:16px; --nav-border: rgba(15,23,42,0.10); } /* ========================================================= GLOBAL SCROLL RULE (mobile-safe) - Let be the scroller (best for mobile/iOS) - Keep body from becoming a separate scroll container - Always prevent horizontal overflow ========================================================= */ html{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; } body{ margin: 0; min-height: 100%; overflow-x: hidden; overflow-y: visible; /* Base typography + background */ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color: var(--text); background: var(--page); } /* ========================================================= Layout helpers ========================================================= */ .container{ max-width: 1100px; margin-left: auto; margin-right: auto; } .muted{ color: rgba(15,23,42,0.68); } .page{ padding: 56px 0; } /* ========================================================= Liquid Ether (React mount) – IMPORTANT FIX Prevent canvas layers (100vw/100vh) from affecting layout ========================================================= */ #root, #etherTint{ position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; overflow: hidden !important; pointer-events: none; } #root canvas, #root svg{ display: block; width: 100% !important; height: 100% !important; max-width: 100%; } /* Extra safety: sometimes 100vw causes a tiny horizontal scroll on desktop */ #root *{ max-width: 100%; }