/* ============================================================ Timely — Scrollbar ------------------------------------------------------------ Replaces the browser's default chrome (white track + grey block) with a floating brown pill that matches the app's warm cream palette. The track stays fully transparent, so the page background shows through and the bar reads as an overlay rather than a gutter. Loaded on every page (marketing + authed app), last in so it wins over page-level inline styles. ============================================================ */ :root { /* --island-brand (#8D6E63) as RGB so the alpha steps below can share one source of truth. Kept literal — this file loads on marketing pages that never see app.css's variables. */ --scroll-thumb-rgb: 141, 110, 99; --scroll-size: 11px; /* total gutter width */ --scroll-inset: 3px; /* transparent border → how far the pill floats in */ } /* Firefox. Safe on every device: its thin scrollbars already overlay rather than reserve space. */ * { scrollbar-width: thin; scrollbar-color: rgba(var(--scroll-thumb-rgb), 0.38) transparent; } /* WebKit / Chromium. Scoped to real pointers on purpose: styling ::-webkit-scrollbar turns an auto-hiding overlay scrollbar into an always-visible one that reserves layout width. That is what we want on a desktop (where the default bar is the eyesore being replaced) and what we do NOT want on a phone, where the bar is invisible until you scroll and would otherwise start stealing 11px from every scrollable card. */ @media (hover: hover) and (pointer: fine) { ::-webkit-scrollbar { width: var(--scroll-size); height: var(--scroll-size); } /* No track, no corner, no stepper arrows — the pill is the whole design. */ ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-corner { background: transparent; border: 0; } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* The pill. The transparent border + padding-box clip is what floats it off the edge instead of filling the gutter. */ ::-webkit-scrollbar-thumb { background-color: rgba(var(--scroll-thumb-rgb), 0.30); border: var(--scroll-inset) solid transparent; background-clip: padding-box; border-radius: 999px; } /* Never let it shrink to an ungrabbable nub on long pages. */ ::-webkit-scrollbar-thumb:vertical { min-height: 44px; } ::-webkit-scrollbar-thumb:horizontal { min-width: 44px; } /* Darkens and fattens on approach (the border shrinks, so the pill grows into the gutter) — same idea as the Mac scroller. */ ::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--scroll-thumb-rgb), 0.52); border-width: 2px; } ::-webkit-scrollbar-thumb:active { background-color: rgba(var(--scroll-thumb-rgb), 0.72); border-width: 2px; } } /* Opt-out for carousels and chip rows, where any bar is noise. Add class="no-scrollbar" to the scrolling element. */ .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }