--

public/assets/css/style-extra.css

@@ -32,12 +32,13 @@ header::after {
     z-index: 9;
     pointer-events: none;
 }
-.blur-strip {
+.blur-layer {
     position: absolute;
-    left: 0;
-    right: 0;
+    inset: 0;
     backdrop-filter: blur(var(--blur));
     -webkit-backdrop-filter: blur(var(--blur));
+    -webkit-mask-image: var(--mask);
+            mask-image: var(--mask);
 }
 
 /* Fonts */

public/assets/js/script-extra.js

@@ -3,29 +3,32 @@
     const header = document.querySelector('header');
     if (!header) return;
 
-    const STRIPS = 24;
-    const MAX_BLUR = 16;
+    const LAYERS = [
+        { blur: 1,  from:  0, to: 15 },
+        { blur: 3,  from: 15, to: 35 },
+        { blur: 6,  from: 35, to: 55 },
+        { blur: 10, from: 55, to: 75 },
+        { blur: 16, from: 75, to: 95 },
+    ];
 
     const container = document.createElement('div');
     container.className = 'header-blur';
     container.setAttribute('aria-hidden', 'true');
 
-    for (let i = 0; i < STRIPS; i++) {
-        const strength = 1 - i / (STRIPS - 1);
-        const blur = MAX_BLUR * Math.pow(strength, 1.6);
-        const strip = document.createElement('div');
-        strip.className = 'blur-strip';
-        strip.style.setProperty('--blur', blur.toFixed(2) + 'px');
-        strip.style.top = (i * 100 / STRIPS) + '%';
-        strip.style.height = (100 / STRIPS) + '%';
-        container.appendChild(strip);
-    }
+    LAYERS.forEach(cfg => {
+        const layer = document.createElement('div');
+        layer.className = 'blur-layer';
+        layer.style.setProperty('--blur', cfg.blur + 'px');
+        layer.style.setProperty(
+            '--mask',
+            `linear-gradient(to top, transparent ${cfg.from}%, black ${cfg.to}%)`
+        );
+        container.appendChild(layer);
+    });
 
     header.parentNode.insertBefore(container, header);
 
-    const sync = () => {
-        container.style.height = header.getBoundingClientRect().height + 'px';
-    };
+    const sync = () => { container.style.height = header.offsetHeight + 'px'; };
     sync();
     if ('ResizeObserver' in window) new ResizeObserver(sync).observe(header);
     else window.addEventListener('resize', sync);