/* * Base Styles - Reset and foundational styles */ * { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* overflow-x: clip prevents horizontal overflow without creating a scroll container. This is critical: overflow-x: hidden on makes the html element the scroll container on iOS Safari, which causes position:fixed elements (navbars) to get composited relative to the html scroll root instead of the viewport — producing the intermittent "navbars start scrolling with the page" bug. overflow-x: clip clips visually without creating a scroll container, keeping the viewport as the correct compositing root. Fallback: older browsers (iOS <15.4) keep hidden. */ overflow-x: hidden; overflow-x: clip; width: 100%; max-width: 100vw; } body { background: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; line-height: 1.6; min-height: 100vh; padding-top: calc(72px + env(safe-area-inset-top)); /* Same clip reasoning as html above — no scroll container on body either */ overflow-x: hidden; overflow-x: clip; font-weight: 400; width: 100%; max-width: 100vw; }