--

public/assets/css/style-extra.css

@@ -1,3 +1,15 @@
+main {
+    view-transition-name: main-content;
+    padding-top: 60px;
+}
+main > *:first-child {
+    margin-top: 16px;
+}
+footer {
+    view-transition-name: footer-content;
+}
+
+/* Progressive Blur */
 header {
     background-color: transparent;
     overflow: hidden;
@@ -8,23 +20,12 @@ header::before {
     inset: 0;
     z-index: -1;
     backdrop-filter: blur(12px);
-    background: linear-gradient(to bottom, var(--color-dark-grey) 0%, transparent 50%), color-mix(in srgb, var(--color-dark-grey) 50%, transparent);
-    mask-image: linear-gradient(to bottom,
-        black 0%,
-        black 50%,
-        transparent 100%
+    background: color-mix(in srgb, var(--color-dark-grey) 50%, transparent);
+    mask-image: linear-gradient(to top,
+        transparent 0%,
+        black 75%
     );
 }
-main {
-    view-transition-name: main-content;
-    padding-top: 60px;
-}
-main > *:first-child {
-    margin-top: 16px;
-}
-footer {
-    view-transition-name: footer-content;
-}
 
 /* Fonts */
 @font-face {