Hero glass panel at bottom with layered parallax

- Hero text panel moved to bottom with frosted glass effect
  (blur 5px, dark semi-transparent background, hairline top border)
- Scroll arrow centered inside glass panel at the bottom
- Three-layer parallax: image 55%, text 65%, page 100%
- Zeremonie album date fixed (was future-dated, now visible)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/custom.css

@@ -41,9 +41,7 @@ section.hero {
   content: "";
   position: absolute;
   inset: 0;
-  background:
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 40%);
-    linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 45%),
-    linear-gradient(to top,   rgba(0, 0, 0, 0.35) 0%, transparent 20%);
 }
 
 .hero-fg {
@@ -53,7 +51,7 @@ section.hero {
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
   will-change: transform;
 }
@@ -61,10 +59,13 @@ section.hero {
 /* ── Hero content ─────────────────────────────────────── */
 
 .hero-content {
-  padding: 4rem 2rem 0;
-  text-align: center;
-  max-width: 900px;
   width: 100%;
+  padding: 2.5rem 3rem;
+  text-align: center;
+  background: rgba(10, 8, 6, 0.38);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(8px);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .hero-content h1 {
@@ -93,7 +94,10 @@ section.hero {
 /* ── Scroll arrow ─────────────────────────────────────── */
 
 .hero-scroll {
-  padding-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
   color: rgba(250, 250, 250, 0.6);
   animation: hero-fade-in 0.6s ease 0.6s both;
 }

assets/js/custom.js

@@ -12,15 +12,13 @@
     var s = window.scrollY;
     if (s > heroH) { ticking = false; return; }
 
-    // Background: moves at ~70% of scroll speed (30% slower)
+    // Background at 55%, text at 80% — both slower than normal, image slowest
-    if (heroBg) heroBg.style.transform = 'translateY(' + (s * 0.3) + 'px)';
+    if (heroBg) heroBg.style.transform = 'translateY(' + (s * 0.45) + 'px)';
+    if (heroFg) heroFg.style.transform = 'translateY(' + (s * 0.35) + 'px)';
 
-    // Foreground text: moves at ~85% of scroll speed (15% slower)
+    // Scroll arrow fades out over the first 30% of hero height
-    if (heroFg) heroFg.style.transform = 'translateY(' + (s * 0.15) + 'px)';
-
-    // Scroll arrow: fades out in the first 25% of the hero height
     if (heroScroll) {
-      heroScroll.style.opacity = Math.max(0, 1 - s / (heroH * 0.25)).toFixed(3);
+      heroScroll.style.opacity = Math.max(0, 1 - s / (heroH * 0.3)).toFixed(3);
     }
 
     ticking = false;

content/zeremonie/index.md

@@ -1,4 +1,4 @@
 ---
 title: "Zeremonie"
-date: 2026-06-20
+date: 2026-06-18
 ---

layouts/_default/home.html

@@ -8,13 +8,13 @@
         <div class="hero-content">
           <h1>{{ .Title }}</h1>
           {{ with .Params.tagline }}<p>{{ . }}</p>{{ end }}
-        </div>
+          <div class="hero-scroll" aria-hidden="true">
-        <div class="hero-scroll" aria-hidden="true">
+            <span class="hero-scroll-icon">
-          <span class="hero-scroll-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M6 9l6 6 6-6"/>
-              <path d="M6 9l6 6 6-6"/>
+              </svg>
-            </svg>
+            </span>
-          </span>
+          </div>
         </div>
       </div>
     </section>