/* ═══════════════════════════════════════════════════════════════════════ SCROLL.CSS — Full-screen section layout + cinematic reveal animations Class `has-slideshow` is set statically on . Sections are locked to 100svh. Scroll-snap (desktop only) snaps between sections natively. ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── 1. SECTION-FIT LAYOUT — each section = 100svh, edge to edge The navbar is position:fixed and overlays content — sections have NO built-in nav-height padding. anchor links use scroll-padding-top. ───────────────────────────────────────────────────────────────────── */ html.has-slideshow { scroll-behavior: auto; scroll-padding-top: var(--nav-height, 76px); } html.has-slideshow .hero, html.has-slideshow .about, html.has-slideshow .categories, html.has-slideshow .projects, html.has-slideshow .atelier, html.has-slideshow .andbold, html.has-slideshow .contact, html.has-slideshow .foot { height: 100svh; min-height: 100svh; max-height: 100svh; overflow: hidden; contain: layout paint; } @supports not (height: 100svh) { html.has-slideshow .hero, html.has-slideshow .about, html.has-slideshow .categories, html.has-slideshow .projects, html.has-slideshow .atelier, html.has-slideshow .andbold, html.has-slideshow .contact, html.has-slideshow .foot { height: 100vh; min-height: 100vh; max-height: 100vh; } } /* ── Vertical centering of content inside every slide ─────────── */ html.has-slideshow .about, html.has-slideshow .andbold, html.has-slideshow .atelier, html.has-slideshow .contact, html.has-slideshow .foot { display: flex; flex-direction: column; justify-content: center; align-items: stretch; } html.has-slideshow .about-grid, html.has-slideshow .andbold-grid { min-height: 0 !important; height: 100% !important; width: 100%; align-items: stretch; } html.has-slideshow .atelier-grid, html.has-slideshow .contact-grid { align-items: center !important; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-gutter); } /* ───────────────────────────────────────────────────────────────────── 2. CATEGORIES — compact 3-card row that fits 100svh ───────────────────────────────────────────────────────────────────── */ html.has-slideshow .categories { padding: clamp(12px, 2vh, 20px) var(--page-gutter) clamp(28px, 4vh, 48px) !important; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2.4vh, 32px); } html.has-slideshow .categories-header, html.has-slideshow .ch-grid, html.has-slideshow .categories-foot { max-width: var(--content-max); width: 100%; margin: 0 auto !important; padding: 0 !important; } html.has-slideshow .categories-header { flex: 0 0 auto; } html.has-slideshow .categories-foot { flex: 0 0 auto; } html.has-slideshow .ch-grid { flex: 1 1 auto; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: 1fr !important; gap: clamp(10px, 1.5vw, 16px) !important; min-height: 0; } html.has-slideshow .ch-card, html.has-slideshow .ch-card--hero, html.has-slideshow .ch-card--counter { aspect-ratio: unset !important; grid-column: auto !important; height: 100%; min-height: 0; } /* ───────────────────────────────────────────────────────────────────── 3. ATELIER / CONTACT — vertically centered in 100svh ───────────────────────────────────────────────────────────────────── */ html.has-slideshow .atelier, html.has-slideshow .contact { padding-top: clamp(16px, 2vh, 24px) !important; padding-bottom: clamp(16px, 2vh, 24px) !important; } /* ───────────────────────────────────────────────────────────────────── 4. FOOTER — its own centered slide ───────────────────────────────────────────────────────────────────── */ html.has-slideshow .foot { padding: clamp(60px, 8vh, 100px) var(--page-gutter) clamp(32px, 5vh, 56px) !important; gap: clamp(24px, 3vh, 44px); } html.has-slideshow .foot-top, html.has-slideshow .foot-cols, html.has-slideshow .foot-bottom { max-width: var(--content-max); width: 100%; margin: 0 auto !important; } /* ───────────────────────────────────────────────────────────────────── 5. SCROLL-SNAP (desktop only) On phones, sections use native free-scroll via the ≤768px overrides below. ───────────────────────────────────────────────────────────────────── */ /* scroll-snap removed — sections scroll freely (native-scroll mode) */ /* ═══════════════════════════════════════════════════════════════════════ REVEAL ANIMATIONS ═══════════════════════════════════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.82s cubic-bezier(0.22, 1, 0.36, 1), transform 0.82s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.10s; } .reveal[data-delay="2"] { transition-delay: 0.22s; } .reveal[data-delay="3"] { transition-delay: 0.36s; } .reveal[data-delay="4"] { transition-delay: 0.52s; } .section-kicker.reveal { transform: translateX(-18px); transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1), transform 0.62s cubic-bezier(0.22, 1, 0.36, 1); } .section-kicker.reveal.is-visible { transform: none; } /* Section headings: opacity-only fade. We deliberately do NOT use translateY here because the transform offset visually pushes the heading into the lede beneath it before .is-visible triggers, producing a collision. Opacity alone gives a clean reveal without risking layout overlap on any breakpoint. */ .about-heading.reveal, .categories-heading.reveal, .atelier-heading.reveal, .andbold-heading.reveal, .contact-heading.reveal { transform: none; transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1); } .about-photo-col.reveal, .andbold-photo-col.reveal { transform: scale(1.04); transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); } .about-photo-col.reveal.is-visible, .andbold-photo-col.reveal.is-visible { transform: scale(1); } .contact-form.reveal { transform: translateX(24px); transition: opacity 0.88s cubic-bezier(0.22, 1, 0.36, 1), transform 0.88s cubic-bezier(0.22, 1, 0.36, 1); } .contact-form.reveal.is-visible { transform: none; } .atelier-frame.reveal { transform: translateY(36px) scale(0.97); transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1), transform 1.0s cubic-bezier(0.22, 1, 0.36, 1); } .atelier-frame.reveal.is-visible { transform: none; } .categories-foot.reveal { transform: translateY(16px); } /* ───────────────────────────────────────────────────────────────────── 6. REDUCED MOTION ───────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .reveal { transform: none !important; transition: opacity 0.3s ease; } } /* ───────────────────────────────────────────────────────────────────── 7. TABLET (769 – 1024 px) ───────────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { html.has-slideshow .categories { overflow-y: auto; -webkit-overflow-scrolling: touch; } html.has-slideshow .ch-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; flex: 0 0 auto; height: auto !important; } html.has-slideshow .ch-card, html.has-slideshow .ch-card--hero, html.has-slideshow .ch-card--counter { height: auto !important; aspect-ratio: 4 / 3 !important; } html.has-slideshow .ch-card--hero { grid-column: 1 / -1 !important; aspect-ratio: 16 / 5 !important; } } /* ───────────────────────────────────────────────────────────────────── 7b. NARROW TABLET (≤ 960 px) About, Andbold and Contact grids collapse to 1-col at this width. Allow internal scroll so full-height sections don't clip content. ───────────────────────────────────────────────────────────────────── */ @media (max-width: 960px) { html.has-slideshow .about, html.has-slideshow .andbold, html.has-slideshow .contact { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Reset fixed height so 1-col stacked content scrolls naturally */ html.has-slideshow .about-grid, html.has-slideshow .andbold-grid { height: auto !important; min-height: 100svh !important; } /* Andbold: switch mask to vertical when video sits above text */ html.has-slideshow .andbold-photo-vid { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, rgba(0,0,0,0.70) 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 65%, rgba(0,0,0,0.70) 82%, transparent 100%); object-position: 50% 35%; } /* About: same vertical switch when photo stacks above text */ html.has-slideshow .about-photo-col img { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, rgba(0,0,0,0.70) 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 65%, rgba(0,0,0,0.70) 82%, transparent 100%); object-position: 50% 35%; } } /* ───────────────────────────────────────────────────────────────────── 7c. NARROW TABLET (≤ 860 px) Atelier grid collapses at this width. ───────────────────────────────────────────────────────────────────── */ @media (max-width: 860px) { html.has-slideshow .atelier { overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ───────────────────────────────────────────────────────────────────── 8. MOBILE (≤ 768 px) Sections allow internal scroll if content exceeds 100svh. Touch navigation is handled entirely by JS (slideshow.js non-passive touchmove prevents native scroll on swipe intent). No CSS snap here to avoid fighting the JS animation. ───────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { html.has-slideshow .categories { padding-top: calc(var(--nav-height, 76px) + clamp(12px, 2vh, 24px)) !important; padding-bottom: clamp(16px, 3vh, 28px) !important; gap: clamp(12px, 2vh, 20px); overflow-y: auto; /* Centre header + grid + cta stack within the slide */ align-items: center; text-align: center; } html.has-slideshow .categories-header { grid-template-columns: 1fr !important; text-align: center; gap: 12px !important; } html.has-slideshow .categories-header .section-kicker { justify-content: center !important; } html.has-slideshow .categories-heading, html.has-slideshow .categories-lede { grid-column: 1 !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } html.has-slideshow .ch-grid { grid-template-columns: 1fr !important; /* single column — each card fills width */ grid-auto-rows: auto !important; gap: 12px !important; width: 100%; } /* Every card shrinks to fit small-screen viewport height band */ html.has-slideshow .ch-card, html.has-slideshow .ch-card--hero, html.has-slideshow .ch-card--counter { grid-column: 1 / -1 !important; width: 100%; aspect-ratio: 16 / 9 !important; /* phone-friendly cinematic ratio */ max-height: 34vh !important; } /* Image fully fills its card and stays centred */ html.has-slideshow .ch-card-media { inset: 0 !important; } html.has-slideshow .ch-card-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } html.has-slideshow .categories-foot { justify-content: center; flex-direction: column; gap: 16px; } html.has-slideshow .categories-foot .cf-rule { display: none; } html.has-slideshow .atelier, html.has-slideshow .contact, html.has-slideshow .foot, html.has-slideshow .about, html.has-slideshow .andbold, html.has-slideshow .projects { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Projects: reset the 100svh clamp so the story + folder flow vertically within the slide and the whole composition fits without clipping. */ html.has-slideshow .projects { height: auto !important; min-height: 100svh !important; max-height: none !important; padding-top: calc(var(--nav-height, 76px) + clamp(12px, 2vh, 24px)) !important; padding-bottom: clamp(16px, 3vh, 28px) !important; display: flex; flex-direction: column; justify-content: center; } html.has-slideshow .atelier, html.has-slideshow .contact { padding-top: calc(var(--nav-height, 76px) + clamp(12px, 2vh, 24px)) !important; padding-bottom: clamp(16px, 3vh, 28px) !important; } /* About / Andbold stack on mobile */ html.has-slideshow .about-grid, html.has-slideshow .andbold-grid { grid-template-columns: 1fr !important; grid-template-rows: auto auto; height: auto !important; min-height: 100svh !important; } /* Andbold: vertical mask fades video into the text section below when stacked */ html.has-slideshow .andbold-photo-vid { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.85) 84%, rgba(0,0,0,0.35) 95%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.85) 84%, rgba(0,0,0,0.35) 95%, transparent 100%); object-position: 50% 35%; } /* About: same vertical mask treatment when stacked on mobile */ html.has-slideshow .about-photo-col img { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.85) 84%, rgba(0,0,0,0.35) 95%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.85) 84%, rgba(0,0,0,0.35) 95%, transparent 100%); object-position: 50% 35%; } /* Reveal — smaller initial offsets on small screens */ .reveal { transform: translateY(16px); } .section-kicker.reveal { transform: translateX(-10px); } .about-heading.reveal, .categories-heading.reveal, .atelier-heading.reveal, .andbold-heading.reveal, .contact-heading.reveal { transform: none; } /* opacity-only — no overlap */ .about-photo-col.reveal, .andbold-photo-col.reveal { transform: scale(1.02); } .contact-form.reveal { transform: translateX(12px); } .atelier-frame.reveal { transform: translateY(20px) scale(0.99); } } /* ───────────────────────────────────────────────────────────────────── 9. MOBILE NAVBAR CLEARANCE When a slide's content is taller than the viewport, `flex-center` vertical alignment causes the top of the content to overflow UP behind the fixed navbar. At ≤768px every slide anchors its content to the TOP of the padded area, which guarantees that nothing ever drifts behind the bar regardless of content height. ───────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { html.has-slideshow .about, html.has-slideshow .andbold, html.has-slideshow .atelier, html.has-slideshow .contact, html.has-slideshow .projects, html.has-slideshow .categories, html.has-slideshow .foot { justify-content: flex-start !important; align-items: stretch !important; } /* Bigger breathing buffer under the 64px mobile navbar so kickers / headings never brush the bar. */ html.has-slideshow .about, html.has-slideshow .andbold, html.has-slideshow .atelier, html.has-slideshow .contact, html.has-slideshow .projects, html.has-slideshow .categories { padding-top: calc(var(--nav-height, 64px) + clamp(20px, 4vh, 40px)) !important; } } /* ───────────────────────────────────────────────────────────────────── 10. ANDBOLD — proper column fade (all breakpoints) The photo column's video needs a soft gradient mask so it dissolves into the ink text column — same technique the about section uses. Target `.andbold-photo-vid` (the actual element) rather than an img. ───────────────────────────────────────────────────────────────────── */ html.has-slideshow .andbold-photo-vid { -webkit-mask-image: linear-gradient(to right, #000 0%, #000 68%, rgba(0,0,0,0.85) 82%, rgba(0,0,0,0.35) 94%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 68%, rgba(0,0,0,0.85) 82%, rgba(0,0,0,0.35) 94%, transparent 100%); } @media (max-width: 960px) { /* Photo sits above the text column → mask must be vertical. */ html.has-slideshow .andbold-photo-vid { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.70) 82%, rgba(0,0,0,0.25) 94%, transparent 100%) !important; mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.70) 82%, rgba(0,0,0,0.25) 94%, transparent 100%) !important; } /* Soft gradient strip that blends the video into the text column's ink background when stacked — same technique as the about section. */ .andbold-photo-col::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to bottom, transparent 0%, rgba(20, 18, 16, 0.55) 50%, #141210 100%); pointer-events: none; z-index: 3; } }