From 21b8d2c2233b513e7995f5b32b3720d1d71cd489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 8 Mar 2026 19:03:39 +0100
Subject: [PATCH] feat: transparent header at top, solid on scroll

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../frontend/src/lib/components/header/header.svelte     | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/lib/components/header/header.svelte b/packages/frontend/src/lib/components/header/header.svelte
index fde8bd4..5d0b396 100644
--- a/packages/frontend/src/lib/components/header/header.svelte
+++ b/packages/frontend/src/lib/components/header/header.svelte
@@ -19,6 +19,13 @@
   let { authStatus }: Props = $props();
 
   let isMobileMenuOpen = $state(false);
+  let scrolled = $state(false);
+
+  $effect(() => {
+    const onScroll = () => (scrolled = window.scrollY > 10);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  });
 
   const navLinks = [
     { name: $_("header.home"), href: "/" },
@@ -47,7 +54,7 @@
 </script>
 
 <header
-  class="sticky top-0 z-50 w-full bg-gradient-to-br from-card/85 via-card/90 to-card/80 backdrop-blur-xl shadow-2xl shadow-primary/20"
+  class={`sticky top-0 z-50 w-full backdrop-blur-xl transition-all duration-500 ${scrolled ? "bg-gradient-to-br from-card/85 via-card/90 to-card/80 shadow-2xl shadow-primary/20 border-b border-border/20" : "bg-transparent border-b border-transparent shadow-none"}`}
 >
   <div class="container mx-auto px-4">
     <div class="flex items-center justify-evenly h-16">