background gradient for site-header

css/style.css

@@ -55,6 +55,7 @@
 
 :root {
   color-scheme: light dark;
+  background-color: light-dark(##F7F7F7, #121212);
   
   /* Primitive tokens: raw design values */
   --color-neutral-100: #F7F7F7;
@@ -87,6 +88,21 @@
   --color-orange-800: #933D00;
   --color-orange-900: #7A2C00;
   
+  --shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
+  --shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
+  
+  --gradient-stop-1-light: #f7f7f7;
+  --gradient-stop-1-dark:  #121212;
+  
+  --gradient-stop-2-light: #f7f7f7;
+  --gradient-stop-2-dark:  #121212;
+  
+  --gradient-stop-3-light: #f7f7f780;
+  --gradient-stop-3-dark:  #12121280;
+  
+  --gradient-stop-4-light: #f7f7f700;
+  --gradient-stop-4-dark:  #12121200;
+  
   --text-h1: clamp(2.25rem, 1.9rem + 1.1vw, 3rem);
   --text-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem);
   --text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
@@ -128,9 +144,6 @@
   --radius-xl: 2rem;
   --radius-xxl: 2.5rem;
   
-  --shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
-  --shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
-
 
   /* Semantic tokens: contextual usage */
   --color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
@@ -471,23 +484,16 @@ button:visited, .button-primary:visited, .logo:visited {
   top: 0;
   padding-top: max(1px, env(safe-area-inset-top));
   z-index: 100;
-  background: linear-gradient(
+  background-image: linear-gradient(
     180deg,
-    light-dark(var(--color-neutral-100), var(--color-neutral-900)) 80%,
-    light-dark(rgba(247,247,247,0), rgba(18,18,18,0)) 100%
+    light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
+    6%,
+    light-dark(var(--gradient-stop-2-light), var(--gradient-stop-2-dark)) 12%,
+    44%,
+    light-dark(var(--gradient-stop-3-light), var(--gradient-stop-3-dark)) 60%,
+    76%,
+    light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100%
   );
-  /* -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
-  -webkit-mask-image: linear-gradient(
-    to top,
-    rgba(18,18,18,0) 0%,
-    rgba(18,18,18,1.00) 16%
-  );
-  mask-image: linear-gradient(
-    to top,
-    rgba(18,18,18,0) 0%,
-    rgba(18,18,18,1.00) 16%
-  ); */
 }
 
 .menu-bar {