From e7da18a9399703798e5a392ee2881377f38752fe Mon Sep 17 00:00:00 2001
From: cverorg <292680828+cverorg@users.noreply.github.com>
Date: Fri, 28 Aug 2026 20:54:47 +0900
Subject: [PATCH] sitetile: the header always paints the page background;
 `header: solid` is a real value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A sticky header with no background lets the page scroll through it — measured on a built site
as computed background rgba(0,0,0,0) while position: sticky. The base .rf-header now carries
var(--gd-bg); `header: translucent` still layers its 86% + blur on top; `header: solid` names
the floor explicitly instead of being silently ignored. Two checks added to section-inset.test.mjs.
---
 packages/sitetile/astro/src/styles/site.css | 6 ++++++
 packages/sitetile/section-inset.test.mjs    | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/packages/sitetile/astro/src/styles/site.css b/packages/sitetile/astro/src/styles/site.css
index 4f57e9f..64fdcea 100644
--- a/packages/sitetile/astro/src/styles/site.css
+++ b/packages/sitetile/astro/src/styles/site.css
@@ -91,7 +91,13 @@ img { max-width: 100%; height: auto; }
   display: flex; align-items: center; gap: var(--gd-gap);
   padding: 1rem clamp(1rem, 4vw, 3rem);
   border-bottom: 1px solid var(--gd-border);
+  /* A header has a floor: the page background. Without it a sticky header lets the page scroll
+     through it (measured on a built site: computed background rgba(0,0,0,0) while sticky).
+     `header: translucent` below still layers its 86% + blur on top; `header: solid` is now a
+     real, explicit value that means exactly this floor. */
+  background: var(--gd-bg);
 }
+body[data-header="solid"] .rf-header { background: var(--gd-bg); }
 .rf-logo { font-weight: 700; font-size: 1.125rem; color: var(--gd-text); text-decoration: none; }
 .rf-nav { display: flex; gap: 1.25rem; }
 .rf-nav a { color: var(--gd-muted); text-decoration: none; }
diff --git a/packages/sitetile/section-inset.test.mjs b/packages/sitetile/section-inset.test.mjs
index 8eba3e5..8c017cc 100644
--- a/packages/sitetile/section-inset.test.mjs
+++ b/packages/sitetile/section-inset.test.mjs
@@ -258,3 +258,11 @@ test('🩸 CONTROL: the inline-span rule stays scoped to span, so it can never r
 });
 
 console.log(`  ${passed} passed`);
+
+// A sticky header must not let the page scroll through it: the base .rf-header carries the page
+// background, and `header: solid` names that floor explicitly (2026-08-28).
+{
+  const base = CSS.match(/\.rf-header \{[^}]*\}/);
+  assert.ok(base && /background:\s*var\(--gd-bg\)/.test(base[0]), '.rf-header base rule paints the page background');
+  assert.ok(/body\[data-header="solid"\] \.rf-header \{[^}]*background:\s*var\(--gd-bg\)/.test(CSS), 'header: solid is a real treatment value');
+}