2026-08-20 — Spline hang blur scrim

Summary

Scrolling page content under the hanging contrast-band threads is blurred and cream/asphalt-screened. Frost is a fixed sibling of the sticky header (not sticky children), so backdrop-filter can see page content scrolling behind the bar. Chrome frost covers the top bar; hang frost overlaps the lower chrome into the splines and fades into the page. A follow-up in-header overlay mutes the SVG threads under search + toolbar (fixed frost cannot blur splines that paint above it).

Highlights

  • Root cause of invisible blur: backdrop-filter on descendants of position: sticky does not blur content scrolling behind the sticky header, and prior scrim washes were ~72–94% opaque so any frost was imperceptible. Inspect .ftn-header-frost / .ftn-header-chrome-scrim / .ftn-header-hang-scrim (not .ftn-contrast-band).

  • .ftn-header-frost is position: fixed; z-index: 49 (under sticky chrome z-50), height: 0 with overflowing scrim children.

  • Chrome scrim: height --ftn-header-height; translucent wash + blur(20px); mask softens into the spline seam.

  • Hang scrim: top: calc(var(--ftn-header-height) - var(--ftn-hang-scrim-lift)) (--ftn-hang-scrim-lift = 0.4 × --ftn-band-height); height = lift + --ftn-spline-hang + --ftn-hang-scrim-drop; stronger blur(28px) with a fade mask into the page.

  • Over-spline frost: .ftn-header-chrome-over-splines sits inside the sticky header between the band (z-index 5) and chrome (z-index 10) at z-index 7. Same blur(20px) family + translucent wash; mask fades into the hang so threads stay readable below the bar. This layer can backdrop-blur the SVG; the fixed stack cannot.

  • Stacking: page content → fixed frost → sticky header (splines 5 → over-spline frost 7 → search + toolbar 10). Band overflow stays visible. Frosted search field and Fan|Owner chrome are unchanged. Dark mode uses a slightly heavier asphalt wash.