From 987022deb3cb5944fd34fefa2f2803790d468b76 Mon Sep 17 00:00:00 2001
From: sefaria <contact@larswinter.me>
Date: Tue, 28 Jul 2026 16:28:05 +0200
Subject: [PATCH] set header background to page color with blur

---
 css/style.css | 27 ++++++++++-----------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/css/style.css b/css/style.css
index 28e6d71..a5979b3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -481,26 +481,19 @@ button:active, .button-primary:active, .logo:active {
 /* Site header */
 
 .site-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: sticky;
   top: 0;
-  padding-top: max(1px, env(safe-area-inset-top));
   z-index: 100;
-  background-image: linear-gradient(
-    180deg,
-    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%
-  );
-  /* background: rgb(255 255 255 / 0.88); */
-  /* backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px); */
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--spacing-3);
+  padding-top: max(1px, env(safe-area-inset-top));
+  background:
+    color-mix(in srgb, var(--color-background) 60%, transparent);
+  -webkit-backdrop-filter: blur(6px) saturate(140%);
+  backdrop-filter: blur(6px) saturate(140%);
+
+  border-bottom: 1px solid color-mix(in srgb, var(--color-background) 10%, transparent);
 }
 
 .menu-bar {