/* ============================================================================= scroll.css - Scroll & scrollbar system (C0 · Spec §9) THE one place to edit scroll behavior + scrollbar visibility. Flip the attribute to switch modes: visible → always-on custom themed bar (DEFAULT) hidden → thin auto-hide / overlay bar ============================================================================= */ /* ---- Smooth in-page anchor scrolling (disabled for reduced-motion) -------- */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-sm)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---- DEFAULT: always-visible custom themed scrollbar ---------------------- */ [data-scrollbar="visible"] { scrollbar-width: auto; scrollbar-color: var(--text-muted) var(--surface-2); } [data-scrollbar="visible"]::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); } [data-scrollbar="visible"]::-webkit-scrollbar-track { background: var(--surface-2); } [data-scrollbar="visible"]::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: var(--radius-pill); border: 3px solid var(--surface-2); /* inset look */ } [data-scrollbar="visible"]::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ---- ALT: thin auto-hide / overlay scrollbar ------------------------------ */ [data-scrollbar="hidden"] { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } [data-scrollbar="hidden"]::-webkit-scrollbar { width: 8px; height: 8px; } [data-scrollbar="hidden"]::-webkit-scrollbar-track { background: transparent; } [data-scrollbar="hidden"]::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--radius-pill); } [data-scrollbar="hidden"]:hover::-webkit-scrollbar-thumb, [data-scrollbar="hidden"]:focus-within::-webkit-scrollbar-thumb { background: var(--border); } /* ---- Scroll-to-top button (reveals via .reveal - §4; logic in scroll.js) -- */ .to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: var(--z-overlay); display: grid; place-items: center; width: 48px; height: 48px; background: var(--surface); color: var(--primary); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-md); pointer-events: none; /* off until .is-visible (set by scroll.js) */ opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { color: var(--primary-hover); border-color: var(--primary); } .to-top svg { width: 20px; height: 20px; } @media (prefers-reduced-motion: reduce) { .to-top { transition: opacity var(--dur) linear; transform: none; } }