From bb87e290654bde3e24dca6200ef0cd3ee5060914 Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Tue, 17 Feb 2026 09:03:15 +0100 Subject: [PATCH] fix: footer hidden behind recipe hero parallax section The hero-section's scaleY transform created a stacking context that painted over the footer, and margin-bottom: -20vh over-compensated for the parallax gap, pulling the footer into the recipe cards. Derive margin-bottom from actual parallax parameters and make the footer position: relative so it paints above the transform layer. --- src/lib/components/Header.svelte | 1 + src/routes/[recipeLang=recipeLang]/+page.svelte | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index acb750be..c8b501c4 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -206,6 +206,7 @@ footer{ padding-block: 1rem; text-align: center; margin-top: auto; + position: relative; } @media screen and (max-width: 800px) { diff --git a/src/routes/[recipeLang=recipeLang]/+page.svelte b/src/routes/[recipeLang=recipeLang]/+page.svelte index 246d194d..ed05433b 100644 --- a/src/routes/[recipeLang=recipeLang]/+page.svelte +++ b/src/routes/[recipeLang=recipeLang]/+page.svelte @@ -130,7 +130,7 @@ /* ─── Hero parallax (same scaleY technique as TitleImgParallax) ─── */ .hero-section { --parallax-scale: 0.3; - margin-bottom: -20vh; + margin-bottom: calc(var(--parallax-scale) * (20vh - min(60vh, 520px))); transform-origin: center top; transform: translateY(-1rem) scaleY(calc(1 - var(--parallax-scale))); }