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'); +}