--

public/assets/css/style-extra.css

@@ -15,6 +15,7 @@ header {
     will-change: transform;
     background-color: transparent;
     overflow: hidden;
+    isolation: isolate;
 }
 header::after {
     content: '';
@@ -25,21 +26,24 @@ header::after {
     pointer-events: none;
 }
 .header-blur {
-    position: fixed;
+    position: absolute;
-    top: 0;
+    inset: 0;
-    left: 0;
+    z-index: -2;
-    right: 0;
-    z-index: 9;
     pointer-events: none;
 }
-.blur-layer {
+.header-blur > div {
     position: absolute;
     inset: 0;
     backdrop-filter: blur(var(--blur));
     -webkit-backdrop-filter: blur(var(--blur));
-    -webkit-mask-image: var(--mask);
+    -webkit-mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
-            mask-image: var(--mask);
+            mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
 }
+.header-blur > div:nth-child(1) { --blur: 1px;  --from: 0%;   --to: 20%;  }
+.header-blur > div:nth-child(2) { --blur: 2px;  --from: 20%;  --to: 40%;  }
+.header-blur > div:nth-child(3) { --blur: 4px;  --from: 40%;  --to: 60%;  }
+.header-blur > div:nth-child(4) { --blur: 8px;  --from: 60%;  --to: 80%;  }
+.header-blur > div:nth-child(5) { --blur: 16px; --from: 80%;  --to: 100%; }
 
 /* Fonts */
 @font-face {

public/assets/js/script-extra.js

@@ -3,35 +3,11 @@
     const header = document.querySelector('header');
     if (!header) return;
 
-    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 < 5; i++) container.appendChild(document.createElement('div'));
-    LAYERS.forEach(cfg => {
+    header.prepend(container);
-        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.offsetHeight + 'px'; };
-    sync();
-    if ('ResizeObserver' in window) new ResizeObserver(sync).observe(header);
-    else window.addEventListener('resize', sync);
 })();
 
 /* View Transition */