diff --git a/src/pages/index.astro b/src/pages/index.astro index 01e418d..00e7860 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -15,11 +15,11 @@ const canonical = new URL('/', Astro.site); hand those 120px to the page, so no element and no viewport unit reaches them — see the note on .ambient for what actually resolves it. --> - + {title} @@ -162,8 +162,17 @@ const canonical = new URL('/', Astro.site); min-height: 100svh; overflow-x: hidden; color: var(--ink); - /* No background here: html paints the canvas, so the fixed ambient layer below - (negative z-index) is not covered by body's own background box. */ + /* Safari 26 paints the rubber-band overscroll gap from body's computed + background-color and from nowhere else — not theme-color (ignored now), not the + canvas. Transparent here meant Safari's own dark-scheme grey, which is the bar + that split from the page on every bounce, on macOS and iOS alike. So body must + carry --paper. That used to be forbidden: .ambient sits at z-index -2, and + against the root stacking context body's background paints on top of every + negative-z layer, burying the field entirely (the every-pixel-exactly-#0a100c + failure). isolation makes body the stacking context instead, which flips that + order — body's background first, then its negative-z children above it. */ + isolation: isolate; + background-color: var(--paper); font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } @@ -185,6 +194,11 @@ const canonical = new URL('/', Astro.site); height: 100lvh; overflow: hidden; pointer-events: none; + /* Visually inert — the canvas beneath is already this colour — but Safari 26 + derives its chrome tint by sampling fixed elements at the viewport edges before + it falls back to body, and a transparent answer from this layer hands the + toolbar its default grey instead of the page's own dark. */ + background-color: var(--paper); } /* The grey bar, properly. @@ -360,6 +374,7 @@ const canonical = new URL('/', Astro.site); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; + user-select: none; } .card-index,