/* ========================================================================== STON.fi Cross-chain — Base Reset, body defaults, base typography. Keep tiny — element-level only. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* leave room for the floating glass nav (top:16px) when anchor-scrolling */ scroll-padding-top: calc(var(--header-h) + var(--header-offset) + 16px); background: var(--color-bg); width: 100%; max-width: 100%; /* Pair both axes. `overflow-x: hidden` + `overflow-y: visible` (the default) computes y to `auto` and on iOS Safari the root still rubber-bands sideways when any child is 1px too wide. `touch-action: pan-y` is what actually stops the finger pan. */ overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; touch-action: pan-y; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--color-fg); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; width: 100%; max-width: 100%; /* No overflow-x here. `hidden` computes overflow-y to `auto` and turns into a scrollport, which traps position:sticky (header, mission tabs) because the page actually scrolls on . `clip` avoids that scrollport but becomes a clip container — WebKit then shears off anything that hangs below the sticky header (Radar / STON.fi menus, hamburger drawer, wallet / profile panels). Sideways overflow is already clipped on . */ overscroll-behavior-x: none; touch-action: pan-y; } img, svg, video, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; transition: color var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease); } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; } input, textarea, select { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } hr { border: 0; border-top: var(--hairline); margin: var(--sp-5) 0; } /* Display & headings — Manrope, negative tracking on big sizes */ h1, h2, h3, h4 { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.5px; color: var(--color-fg); } h1 { font-size: 52px; } h2 { font-size: 36px; } h3 { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: 0; } h4 { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: 0; } p { margin: 0 0 var(--sp-4); } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; } ::selection { background: var(--color-cyan); color: #081020; } /* Focus ring — cyan, halo, on every interactive element by default */ :focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 2px; border-radius: var(--radius-sharp); } /* Reduced motion — respect user preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } html { scroll-behavior: auto; } }