/* ── Full-height sections + scroll-snap slide navigation ──────────────────── */ /* Everything is scoped under .slides on , which js/slides.js toggles */ /* only on viewports where full-height slides actually make sense. */ :root { --header-h: 0px; --slides-accent: #ffab24; } .slides { scroll-snap-type: y mandatory; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .slides { scroll-behavior: auto; } } .slides .wrapper { position: relative; } /* Header floats over the first slide so that scroll position 0 is a valid snap position (otherwise the browser snaps the header away on load). */ .slides .header { position: absolute; top: 0; left: 0; right: 0; } .slides .page > section { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; scroll-snap-stop: always; } /* A slide is centred in the viewport, so the section's own vertical padding is redundant — it only makes content overflow the screen sooner. Tall sections get it back, since there the padding is real breathing room. */ .slides .page > section > [class*="__cnt"] { width: 100%; padding-top: 0; padding-bottom: 0; } .slides .page > section._tall > [class*="__cnt"] { padding-top: 3.125rem; padding-bottom: 3.125rem; } .slides .page__main { position: relative; padding-top: var(--header-h); } .slides .main__cnt { padding-top: 0; } /* Sections whose content is taller than the viewport: keep the snap point at their top, but let the reader scroll through them freely. */ .slides .page > section._tall { justify-content: flex-start; scroll-snap-stop: normal; } .slides .footer { scroll-snap-align: end; } /* ── Dot navigation ───────────────────────────────────────────────────────── */ .slides-nav { display: none; } .slides .slides-nav { position: fixed; z-index: 60; top: 50%; right: clamp(0.75rem, 1.6vw, 1.75rem); transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 0.875rem; } .slides-nav__item { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0; background: none; border: 0; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; } .slides-nav__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--slides-accent); opacity: 0; transform: translateX(0.5rem); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .slides-nav__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #fff; opacity: 0.28; transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease; } .slides-nav__item:hover .slides-nav__dot, .slides-nav__item:focus-visible .slides-nav__dot { opacity: 0.75; } .slides-nav__item:hover .slides-nav__label, .slides-nav__item:focus-visible .slides-nav__label { opacity: 1; transform: none; } .slides-nav__item[aria-current="true"] .slides-nav__dot { opacity: 1; background-color: var(--slides-accent); transform: scale(1.5); } .slides-nav__item[aria-current="true"] .slides-nav__label { opacity: 1; transform: none; } /* ── Scroll hint on the first slide ───────────────────────────────────────── */ .slides-hint { display: none; } .slides .slides-hint { position: absolute; left: 50%; bottom: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; transform: translateX(-50%); font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; opacity: 0.45; transition: opacity 0.4s ease; pointer-events: none; } .slides .slides-hint._hidden { opacity: 0; } .slides-hint .icon { width: 1.125rem; height: 1.125rem; transform: rotate(-90deg); animation: slides-hint-bob 2s ease-in-out infinite; } @keyframes slides-hint-bob { 0%, 100% { transform: rotate(-90deg) translateX(0); } 50% { transform: rotate(-90deg) translateX(-0.375rem); } } @media (prefers-reduced-motion: reduce) { .slides-hint .icon { animation: none; } }