/* * Base Styles - Reset and foundational styles */ * { box-sizing: border-box; } html { font-size: 16px; /* * Root canvas uses nav chrome color so Safari overscroll/rubber-band areas do not flash white. * Content canvas remains controlled by body/main layers below. */ min-height: 100vh; min-height: 100dvh; min-height: -webkit-fill-available; background-color: var(--bg-secondary); background-image: none; -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 { /* * Default page canvas uses --bg-primary. Desktop-class pointer devices override * base body color below to stabilize Safari chrome sampling during Turbo navigation. */ background-color: var(--bg-primary); background-image: var(--body-pattern), linear-gradient( to bottom, var(--bg-secondary) 0, var(--bg-secondary) env(safe-area-inset-top, 0px), transparent env(safe-area-inset-top, 0px) ), linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-primary) 100%); 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; min-height: 100dvh; min-height: -webkit-fill-available; padding-top: calc(var(--nav-fixed-height) + 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; } /* * Desktop-class pointer devices (e.g., Mac trackpad/mouse), even in narrow windows: * keep body base color aligned with nav chrome so Safari sampling during Turbo * navigation does not fall back to white. * * Touch/mobile devices keep bg-primary to avoid bottom-edge green bleed. */ @media (hover: hover) and (pointer: fine) { body { background-color: var(--bg-secondary); } } html[data-theme="dark"] body { background-image: var(--body-pattern), linear-gradient( to bottom, var(--bg-secondary) 0, var(--bg-secondary) env(safe-area-inset-top, 0px), transparent env(safe-area-inset-top, 0px) ), linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-primary) 100%); } /* * Main landmark: opaque page canvas so in-flow content doesn’t gap against body’s layered wash. */ #main-content { background-color: var(--bg-primary); }