/* ============================================================ FACTORY — snap.css (experimental scroll-snap variant) Loaded by the homepage via . Proximity snapping: each section top is a snap point, but tall sections (taller than the viewport) scroll naturally — the snap simply re-engages as you approach the next section's top. ============================================================ */ /* The scroll container is the document itself. Proximity (not mandatory) so over-height sections never trap content. */ html:has(body[data-snap]) { scroll-snap-type: y proximity; scroll-padding-top: 0; } /* Every top-level section becomes a snap target and fills the viewport. min-height (not height) lets tall content grow past the fold and scroll. */ body[data-snap] .hero, body[data-snap] main > section { scroll-snap-align: start; scroll-snap-stop: normal; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } /* Sections whose content reliably exceeds the viewport: keep them as snap points at the top, but don't vertically center (content would clip) and let them be as tall as needed. Snap re-engages at the next top. */ body[data-snap] #work, body[data-snap] #work-marquee, body[data-snap] #capabilities, body[data-snap] #clients { justify-content: flex-start; } /* The Work: keep its container full-width so the heading/subline stay left-aligned (the flex-column section was shrink-wrapping + centering it). */ body[data-snap] #work .work__inner, body[data-snap] #capabilities .capabilities__inner, body[data-snap] #capabilities .section__head { width: 100%; align-self: stretch; } /* The footer fills the screen too — but keep its normal block flow (text-left / map-right) and cap the map so it doesn't scale with 100svh. */ body[data-snap] .site-footer { scroll-snap-align: start; min-height: 100dvh; display: block; padding-top: 0; } /* Footer text block floats vertically centered in the full-height footer */ body[data-snap] .site-footer__top { min-height: 100dvh; justify-content: center; } /* thank-you panel is a full-screen snap target after the footer */ body[data-snap] #thanks { scroll-snap-align: start; } /* Hero centers its own lockup (row + align-items:center) — undo the column/stretch from the generic section rule so content sits centered. */ body[data-snap] .hero { flex-direction: row; align-items: center; justify-content: flex-start; } /* Respect reduced-motion: disable snapping entirely. */ @media (prefers-reduced-motion: reduce) { html:has(body[data-snap]) { scroll-snap-type: none; } } /* Small screens: snapping on short viewports with tall sections is more annoying than helpful — fall back to normal scrolling under 900px. */ @media (max-width: 900px) { html:has(body[data-snap]) { scroll-snap-type: none; } /* content sections fall back to natural height, but the hero always fills the screen */ body[data-snap] main > section { min-height: auto; } body[data-snap] .hero { min-height: 100svh; } /* footer: map stacks on top, text block anchors to the bottom and grows upward so the links never get pushed off-screen */ body[data-snap] .site-footer { min-height: 0; overflow: visible; } body[data-snap] .site-footer__top { min-height: 0; justify-content: flex-end; padding-bottom: 50px; } } /* Footer: below 900px the map stacks on top — collapse the centering height so the text starts right after the map (no big red gap), and let content grow freely (the desktop overflow:hidden was clipping the stacked links). */ @media (max-width: 900px) { body[data-snap] .site-footer { min-height: 0; overflow: visible; } body[data-snap] .site-footer__top { min-height: 0; justify-content: flex-start; padding-top: var(--section-y); padding-bottom: var(--section-y); } }