/* Site-wide slides: the homepage's scroll on every page. slides.js adds .hx-slides to and .hx-slide to each top-level section. Slides are at least one screen tall, never clipped: a section that runs longer scrolls through before the next one snaps in. */ html.hx-slides { scroll-snap-type: y mandatory; scroll-padding-top: 64px; scroll-behavior: smooth; } /* A body with overflow set (often to hide sideways spill) becomes its own scroll container and swallows the snap points. clip hides the spill without that. */ html.hx-slides, html.hx-slides body { overflow-x: clip; overflow-y: visible; } html.hx-slides { overflow-y: auto; } html.hx-slides .hx-slide { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; scroll-snap-stop: always; /* Pages give sections a scroll-margin for anchor links; scroll-padding-top already clears the header, so a margin here would leave a strip of the previous slide showing. */ scroll-margin-top: 0 !important; /* beats the inline margin AutoSectionChrome sets */ } html.hx-slides .hx-slide > :not([aria-hidden="true"]):not(.absolute):not(.fixed) { width: 100%; } html.hx-slides .hx-slide-end { scroll-snap-align: end; } @media (prefers-reduced-motion: reduce) { html.hx-slides { scroll-snap-type: y proximity; scroll-behavior: auto; } } /* Back to top */ .hx-top { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 65; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 999px; background: rgba(29, 29, 31, .88); color: #fff; box-shadow: 0 10px 30px -10px rgba(29, 29, 31, .55), inset 0 0 0 1px rgba(212, 165, 116, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; opacity: 0; transform: translateY(12px) scale(.92); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background .2s ease; } .hx-top.is-shown { opacity: 1; transform: none; pointer-events: auto; } .hx-top:hover { background: #1d1d1f; } .hx-top:hover svg { transform: translateY(-2px); } .hx-top:focus-visible { outline: 2px solid #d4a574; outline-offset: 3px; } .hx-top svg { width: 20px; height: 20px; transition: transform .2s ease; } .hx-top svg path { stroke: url(#hx-top-gold); } @media (prefers-reduced-motion: reduce) { .hx-top, .hx-top svg { transition: none; } } @media print { .hx-top { display: none; } }