From 346867b46832dd762d20783879b1f8e37aebd031 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 10 May 2026 18:06:32 +0200 Subject: [PATCH] fix(insights): isolate hero glow from sticky section nav The hero band's glow-purple box-shadow bled through the sticky section nav (bg-background/80 + backdrop-blur) so the nav painted with a faint purple cast on scroll. Add `isolate` to the hero container so the shadow stays z-trapped inside its own stacking context. Fixes Design-HIGH-4. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/insights/hero-strip.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/insights/hero-strip.tsx b/src/components/insights/hero-strip.tsx index 68430dcef..52a58a0a6 100644 --- a/src/components/insights/hero-strip.tsx +++ b/src/components/insights/hero-strip.tsx @@ -182,7 +182,12 @@ export function HeroStrip({ data-slot="insights-hero-strip" className={cn( "hero-gradient glow-purple animate-insight-in", - "relative overflow-hidden rounded-xl px-4 py-5 sm:px-6 sm:py-6", + // `isolate` creates a new stacking context so the purple glow + // box-shadow stays z-trapped inside the hero band — without + // it the shadow bled through the sticky section nav below + // (the nav uses bg-background/80 + backdrop-blur, which the + // shadow leaked through). + "relative isolate overflow-hidden rounded-xl px-4 py-5 sm:px-6 sm:py-6", )} > {/*