Nav header fix

This commit is contained in:
Greg Kilmer
2026-08-06 17:40:58 -04:00
parent a2a34bfd66
commit baaf00661a
2 changed files with 12 additions and 5 deletions
+8 -4
View File
@@ -37,7 +37,6 @@ const isActive = (href: string) =>
// MobileMenu expects the { items: [] }[] shape. // MobileMenu expects the { items: [] }[] shape.
const groups = [{ items: storeNav }]; const groups = [{ items: storeNav }];
--- ---
---
<header <header
id="store-nav" id="store-nav"
data-nav data-nav
@@ -93,13 +92,18 @@ const groups = [{ items: storeNav }];
</header> </header>
<style> <style>
/* Same nebula band treatment as the main NavBar. */ /* The store nav uses a SOLID opaque band (not the main NavBar's translucent
gradient), because the store index hero renders a bright animated field
plus a gold label right at the top edge. A translucent nav let that hero
content bleed through, making the nav read as if it sat behind the hero.
Solid + a hairline border keeps it a clearly distinct bar at all times. */
[data-nav-inner] { [data-nav-inner] {
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(8, 10, 32, 0.92) 0%, rgb(8, 10, 32) 0%,
rgba(12, 14, 40, 0.86) 100% rgb(12, 14, 40) 100%
); );
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
} }
[data-nav].scrolled [data-nav-inner] { [data-nav].scrolled [data-nav-inner] {
backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px);
+4 -1
View File
@@ -32,7 +32,10 @@ const orderHref = "/store/order";
<StoreLayout title="Store — Proxy MTG Cards & 3D-Printed Deck Boxes"> <StoreLayout title="Store — Proxy MTG Cards & 3D-Printed Deck Boxes">
{/* --- Hero --- */} {/* --- Hero --- */}
<section class="relative overflow-hidden pb-8 pt-28 sm:pt-32"> {/* pt-36/sm:pt-40 gives the bright hero content clear breathing room below
the solid fixed StoreNav (64px tall), so the gold label and nav never
visually crowd each other. */}
<section class="relative overflow-hidden pb-8 pt-36 sm:pt-40">
<AnimatedBackground client:idle className="vt-sky" /> <AnimatedBackground client:idle className="vt-sky" />
<div <div