From 8e25f9955ffa4023691f51a82986ffeae3f45793 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Tue, 2 Jun 2026 11:00:21 +0200
Subject: [PATCH] Fix light-mode header contrast over hero seam
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On wide viewports the hero's bright kintsugi seam sits under the
top-right nav cluster, where dark light-mode text and the toggle/GitHub
chips fight the gold. Add a contextual, light-only radial scrim anchored
to the corner: it feathers out by 70% (no hard edge), is faded via --hp
the moment the header glasses in on scroll, and is off below the mobile
drawer breakpoint. Dark mode needs no treatment (cream text reads fine
over the darker seam).

With the scrim carrying the corner, the toggle and GitHub counter become
refined hairline chips in light mode — neutral --ks-rule border, no fill
(the GitHub pill previously used the gold --ks-rule-strong and a solid
background).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 site/styles/home-rebuild.css |  3 +++
 site/styles/light-mode.css   | 35 +++++++++++++++++++++++++++++++++--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/site/styles/home-rebuild.css b/site/styles/home-rebuild.css
index 0d0dd4519..e840ee125 100644
--- a/site/styles/home-rebuild.css
+++ b/site/styles/home-rebuild.css
@@ -54,6 +54,9 @@
   backdrop-filter: saturate(calc(1 + 0.3 * var(--hp))) blur(calc(16px * var(--hp)));
 }
 
+/* The wide-viewport seam treatment is light-only and lives in light-mode.css.
+   Dark mode needs none: the cream nav text reads fine over the darker seam. */
+
 .hero-rebuild-art {
   position: absolute;
   inset: 0;
diff --git a/site/styles/light-mode.css b/site/styles/light-mode.css
index b83c1d603..fe7951f95 100644
--- a/site/styles/light-mode.css
+++ b/site/styles/light-mode.css
@@ -61,6 +61,10 @@ html.light .theme-toggle .theme-toggle-icon--dark {
   color: var(--ks-champagne);
 }
 
+/* Light mode: the toggle and the GitHub pill both read as refined hairline
+   chips — neutral hairline (--ks-rule, not the gold --ks-rule-strong), no fill.
+   The contextual seam scrim (below) carries them over the bright hero corner,
+   so neither needs a solid backing of its own. */
 html.light .kinpaku-chrome .theme-toggle {
   border-color: var(--ks-rule);
   color: var(--ks-text-muted);
@@ -81,6 +85,33 @@ html.light .kinpaku-chrome .site-header {
   border-bottom-color: var(--ks-rule);
 }
 
+/* Light-only seam treatment. The hero's bright kintsugi seam sits in the
+   top-right corner, under the nav cluster (Live + the hairline toggle/GitHub
+   chips, which carry no fill of their own). In light mode the dark text fights
+   the gold, so a strong radial scrim lifts it off — opaque at the top-right
+   corner, feathering to nothing by 70% so there's no hard edge. It's contextual,
+   not a blanket bar: localized to the corner and faded via --hp the instant the
+   header glasses in on scroll. Above the mobile drawer breakpoint only; dark
+   mode needs none (cream text reads over the seam). */
+@media (min-width: 761px) {
+  html.light .home-kinpaku .site-header::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: -24px;
+    width: min(720px, 50%);
+    z-index: -1;
+    pointer-events: none;
+    background: radial-gradient(
+      150% 170% at 100% 0%,
+      oklch(99% 0.01 95 / calc(0.95 * (1 - var(--hp)))) 0%,
+      oklch(99% 0.01 95 / calc(0.6 * (1 - var(--hp)))) 45%,
+      transparent 70%
+    );
+  }
+}
+
 html.light .kinpaku-chrome .site-header-menu {
   border-color: var(--ks-rule);
   color: var(--ks-text);
@@ -96,8 +127,8 @@ html.light .kinpaku-chrome .site-header-menu-line {
 }
 
 html.light .kinpaku-chrome .site-header-github {
-  border-color: var(--ks-rule-strong);
-  background: oklch(99% 0.008 95 / 0.88);
+  border-color: var(--ks-rule);
+  background: transparent;
   color: var(--ks-text);
   height: 36px;
   min-height: 36px;