/* ========================================================= Section transitions --------------------------------------------------------- Replaces flat section-to-section cutoffs with soft blends, gentle curves, subtle diagonals, and shadowed overlaps. Pure decoration — no section content touched, no new colors (everything below reads from the existing :root tokens already used site-wide). Full-bleed: every shape uses left:0/right:0 against its own section, which is already a full-viewport-width block (no side padding/max-width on the section itself — only its inner .container is constrained). This is deliberately used instead of width:100vw — 100vw is wider than the visible viewport whenever a vertical scrollbar is present, and this codebase already avoids overflow-x:hidden on / on purpose (breaks position:sticky for the pinned hero — see css/style.css's own comment on that), so there'd be nothing to clip the 100vw overhang back down. left:0/right:0 against a relatively-positioned full-width section reaches the same true edges with no scrollbar-gap risk. Every shape that meets a hard boundary overlaps it by 1-2px to kill subpixel hairlines between sections. Two boundaries are intentionally left alone: - Hero → Hero Statement already has its own bespoke scroll-scrubbed darken/blur transition (see updateIndicatorAndOverlay() in main.js) — adding a second effect here would compete with it. - Gallery → Featured Mix is already a perfect color match (both resolve to the same --color-bg) — nothing to blend. Services is the one section with interactive content (carousel, arrows, dots) sharing the box with a transition — its decorative layers are dedicated elements (.services-transition-top/-bottom), not pseudo-elements of .services-section itself, specifically so they can never paint over or intercept the carousel regardless of DOM/paint order. See index.html for the wrapper structure: .services-section > .services-transition-top (decorative, z-index:0) > .services-content (real content, z-index:1) > .services-transition-bottom (decorative, z-index:0) ========================================================= */ /* ---- Hero Statement → Intro Reveal ------------------------- Both sections are transparent (same particle canvas shows through both) — already seamless, no shape needed. */ /* ---- Intro Reveal → Stats: soft blend ----------------------- */ .stats { position: relative; } .stats::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: calc(var(--space-16) + 2px); background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-bg-alt) 55%, transparent)); pointer-events: none; z-index: 0; } /* ---- Stats → About: gentle curve ---------------------------- A wide, shallow arc "bites" upward out of Stats' own bottom padding, colored to match About's effective background. */ .stats::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: calc(var(--space-12) + 2px); background: var(--color-bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: scaleX(1.15); pointer-events: none; z-index: 0; } .stats-grid { position: relative; z-index: 1; } /* ---- Services: dedicated decorative layers ------------------- See index.html — .services-transition-top/-bottom are real sibling elements of .services-content, not pseudo-elements of .services-section, so they can never paint over the carousel. */ .services-section { position: relative; } .services-content { position: relative; z-index: 1; } .services-transition-top, .services-transition-bottom { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0; } /* About → Services: very soft diagonal reveal — a gentle slanted band (not a pointed triangle — all four corners survive, only the top edge tilts), in Services' own tone. */ .services-transition-top { top: -2px; height: calc(var(--space-16) + 2px); background: color-mix(in srgb, var(--color-bg-alt) 95%, transparent); clip-path: polygon(0 32%, 100% 0%, 100% 100%, 0% 100%); } /* Services → Gallery: layered overlap with subtle shadow — a soft surface spills below Services' own edge into Gallery's top whitespace, with a gentle cast shadow underneath. */ .services-transition-bottom { bottom: calc(-1 * var(--space-8)); height: var(--space-16); background: color-mix(in srgb, var(--color-bg-alt) 88%, transparent); box-shadow: 0 32px 64px -30px rgba(0, 0, 0, 0.55); } /* ---- Gallery → Featured Mix ---------------------------------- Gallery is transparent (shows body's --color-bg) and Featured Mix is opaque --color-bg — literally the same color already, nothing to blend. */ /* ---- Featured Mix → Performed: soft blend --------------------- */ .performed { position: relative; } .performed::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: calc(var(--space-12) + 2px); background: linear-gradient(to bottom, var(--color-bg), transparent); pointer-events: none; z-index: 0; } /* ---- Performed → Mixes: gentle asymmetric curve --------------- Off-center corner radii keep this from reading as a perfectly symmetric dome. */ .performed::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: calc(var(--space-12) + 2px); background: color-mix(in srgb, var(--color-bg-alt) 95%, transparent); border-radius: 0 0 60% 40% / 0 0 100% 100%; pointer-events: none; z-index: 0; } .performed-head, .logo-marquee { position: relative; z-index: 1; } /* ---- Mixes → Reviews: soft blend ------------------------------- */ #testimonials { position: relative; } #testimonials::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: calc(var(--space-12) + 2px); background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg-alt) 35%, transparent), transparent); pointer-events: none; z-index: 0; } #testimonials > .container { position: relative; z-index: 1; } /* ---- Reviews → Booking: clean angled transition ---------------- The one real dark-to-white seam on the page. A confident, gentle diagonal carries the dark tone into white rather than cutting instantly. */ #contact::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: calc(var(--space-24) + 2px); /* #contact re-declares --color-bg to white for its own light theme (see the #contact custom-property override elsewhere in style.css), so var(--color-bg) here would resolve to white, not the dark tone this gradient needs to start from — hence the literal hex, matching :root's --color-bg value exactly. */ background: linear-gradient(to bottom, #0b0a09 0%, #ffffff 100%); clip-path: polygon(0 0, 100% 0, 100% 58%, 0 100%); pointer-events: none; z-index: 0; } /* ---- Booking → FAQ: minimal overlapping white surface ----------- A white surface spills below Booking's own edge into FAQ's dark top, fading to nothing before it reads as a hard block — the white "bleeds" rather than stops. */ #contact::after { content: ""; position: absolute; bottom: calc(-1 * var(--space-12)); left: 0; right: 0; height: var(--space-16); background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)); pointer-events: none; z-index: 0; } #contact .container { position: relative; z-index: 1; } /* ---- FAQ → Footer: smooth premium fade -------------------------- */ .footer { position: relative; } .footer::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: calc(var(--space-16) + 2px); background: linear-gradient(to bottom, transparent, color-mix(in srgb, #060504 88%, transparent)); pointer-events: none; z-index: 0; } .footer > .container { position: relative; z-index: 1; }