diff --git a/templates/club-layout.html b/templates/club-layout.html index 24c00d1..92804e3 100644 --- a/templates/club-layout.html +++ b/templates/club-layout.html @@ -29,15 +29,58 @@ padding: 0 15px; } + /* HERO with image + hover video, layout preserved */ .hero-banner { min-height: 580px; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.95)), - url('https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/club-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-gallery-1760556106860.jpg') center/cover; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 45px; + overflow: hidden; + } + + /* Background image layer (your original image) */ + .hero-bg-image { + position: absolute; + inset: 0; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.95)), + url('https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/club-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-gallery-1760556106860.jpg') center/cover; + z-index: 0; + opacity: 1; + transition: opacity 0.5s ease; + } + + /* Background video layer */ + .hero-bg-video { + position: absolute; + inset: 0; + z-index: 0; + opacity: 0; + pointer-events: none; + transition: opacity 0.5s ease; + } + + .hero-bg-video iframe { + width: 100%; + height: 100%; + border: 0; + } + + /* When video is ready, allow hover to fade image → video */ + .hero-banner.video-ready:hover .hero-bg-video { + opacity: 1; + } + + .hero-banner.video-ready:hover .hero-bg-image { + opacity: 0; + } + + /* Foreground content stays on top exactly where it was */ + .banner-top, + .banner-bottom { + position: relative; + z-index: 1; } .banner-top { @@ -88,7 +131,7 @@ .stats-row { display: flex; gap: 50px; - margin-top: 35px; + /*margin-top: 35px;*/ flex-wrap: wrap; } @@ -228,7 +271,6 @@ height: 160px; object-fit: cover; width: 100%; - margin-bottom: 15px; } .grid-packages { @@ -801,7 +843,7 @@ flex: 1; height: 6px; border-radius: 999px; - background: #e5e7eb; + background: #e2e8f0; overflow: hidden; } @@ -864,11 +906,24 @@
-
+
+ +
+
+ + +
+ +