/* ============================================================ VAN BERKUM — One-page (scroll) styles for the home pages Loaded by index.html / en/index.html. Layered on style.css. ============================================================ */ html { scroll-behavior: smooth; /* Gentle snap: sections settle into view when scrolling slows near a boundary, but long sections (e.g. the bio) still scroll freely. */ scroll-snap-type: y proximity; } /* --- Per-section background crossfade ------------------------------- Two fixed full-screen layers (home + content). We fade between them as the hero section enters / leaves the viewport. JS toggles the `.show-content-bg` class on . */ .bg-layer { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 0.7s ease; } .bg-layer--home { opacity: 1; } .bg-layer--content { opacity: 0; } body.show-content-bg .bg-layer--home { opacity: 0; } body.show-content-bg .bg-layer--content { opacity: 1; } /* --- Sections ------------------------------------------------------- */ .op-section { scroll-margin-top: 0; scroll-snap-align: start; } /* Hero keeps the full-viewport centered home layout */ .op-hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--page-padding); position: relative; } /* Content sections: comfortably tall, content vertically centred */ .op-content { min-height: 100vh; display: flex; align-items: center; } .op-content .content-page { /* override the fixed 7rem top padding used on standalone pages — here vertical centring handles spacing, but keep clearance from the fixed header on shorter viewports */ padding-top: 6rem; padding-bottom: 4rem; } /* --- Single fixed logo: hidden on hero, shown once scrolled in ------ */ .content-logo { opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } body.show-content-bg .content-logo { opacity: 0.85; } /* --- Scroll cue on the hero ---------------------------------------- */ .scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-right: 2px solid var(--color-white); border-bottom: 2px solid var(--color-white); opacity: 0.7; animation: scroll-cue-bounce 1.8s ease-in-out infinite; } @keyframes scroll-cue-bounce { 0%, 100% { transform: translateX(-50%) rotate(45deg) translateY(0); opacity: 0.4; } 50% { transform: translateX(-50%) rotate(45deg) translateY(8px); opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scroll-cue { animation: none; } } @media (max-width: 768px) { /* On the one-pager the home logo sits inside the hero section, so it scrolls away naturally — recentre it like the standalone home. */ .op-content .content-page { padding-top: 5.5rem; } }