/* ===================================================================== MWI couture scroll (2026-08-11) Companion sheet to mwi-scroll.js. Sections here are lettered (S1..S3)\n on purpose: the numbered section space belongs to mwi-motion.css, and\n 59 is the portfolio duotone there. Deliberately small: the scroll feel itself is done in JS, and everything here is either brand dressing on the scrollbar or a native scroll behaviour that needs no script. Nothing in this file touches #mwi-header, its pseudo-elements, or any containing-block property -- Xpro's fixed off-canvas panel is a descendant of the header and traps if any of those land on it. ===================================================================== */ /* --------------------------------------------------------------------- S1 A scrollbar in the brand, not the browser's Desktop only. Gated on a fine pointer as well as width, so an iPad in landscape (1024+ but coarse) keeps the OS overlay scrollbar it is supposed to have. Antique gold #B9924E at low alpha over a warm track -- no pure black, per the design direction. --------------------------------------------------------------------- */ @media (min-width: 1025px) and (hover: hover) and (pointer: fine) { html { scrollbar-width: thin; scrollbar-color: rgba(185, 146, 78, .42) rgba(36, 26, 18, .05); } html::-webkit-scrollbar { width: 10px; } html::-webkit-scrollbar-track { background: rgba(36, 26, 18, .05); } /* The transparent border plus background-clip:content-box is what gives the thumb its inset -- a 4px pill floating in a 10px gutter, rather than a bar wedged against the viewport edge. */ html::-webkit-scrollbar-thumb { background: rgba(185, 146, 78, .42); background-clip: content-box; border: 3px solid transparent; border-radius: 999px; transition: background-color .45s cubic-bezier(.19, 1, .22, 1); } html::-webkit-scrollbar-thumb:hover { background: rgba(185, 146, 78, .72); background-clip: content-box; } } /* --------------------------------------------------------------------- S2 Mobile: keep native momentum, lose the chaining jerk The client chose native touch momentum over a JS inertia layer, so there is nothing to smooth here -- iOS and Android already run that off the main thread. What is worth removing is scroll CHAINING: an overscroll at the top or bottom currently propagates to the browser UI, which on Android arms pull-to-refresh and on iOS rubber-bands the whole page. `contain` keeps the bounce inside the document and makes the ends feel like a considered stop instead of a bounce. `-x` is NOT set here. Section 55 of mwi-motion.css already owns it as part of the iPhone side-pan fix; setting it again from a later sheet would quietly take ownership of that fix away from the section that documents it. --------------------------------------------------------------------- */ @media (max-width: 1024px) { html { overscroll-behavior-y: contain; } } /* --------------------------------------------------------------------- S3 Hooks mwi-scroll.js puts .mwi-cscroll-running on only while the inertia loop is actually settling. Nothing styles it today; it exists so a future effect can react to "the page is gliding" without adding its own scroll listener, and so the layer can be seen working in DevTools without a console. --------------------------------------------------------------------- */