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.
const groups = [{ items: storeNav }];
---
---
<header
id="store-nav"
data-nav
@@ -93,13 +92,18 @@ const groups = [{ items: storeNav }];
</header>
<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] {
background: linear-gradient(
180deg,
rgba(8, 10, 32, 0.92) 0%,
rgba(12, 14, 40, 0.86) 100%
rgb(8, 10, 32) 0%,
rgb(12, 14, 40) 100%
);
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
[data-nav].scrolled [data-nav-inner] {
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">
{/* --- 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" />
<div