fix: banner pushing hero below viewport fold

[RisingOrange]

Fixes #661

What

When a banner is active, the hero section (height: 100vh) starts below it and extends off-screen, breaking the full-viewport effect.

Before	After

Note: The screenshots also show how the mobile layout is incorrectly used on vertical desktop instead of the desktop layout. This will be fixed by #668

How

Key changes:

• New page-top wrapper wraps both the banners and hero-section. On hero pages it becomes a height: 100dvh flex column, so its children share the full viewport height.
• Banners moved inside page-top (previously they were in normal flow above .layout). They take their natural height, leaving the rest for the hero.
• hero-section moved out of .layout and into page-top, where it gets flex: 1 to fill whatever space the banners don't use.
• Hero height changed from 100vh to 100%, so it fills its flex parent instead of the full viewport.
• Nav width explicitly constrained to min(var(--page-width), 100vw - 6rem) — the nav is absolutely positioned inside hero-section, which moved from the width-constrained .layout to full-width page-top. This constraint replicates the width it previously inherited, keeping all container-query-based layout calculations unchanged.
• Flex overflow fix — min-height: 0 on .hero-section overrides the flex item default min-height: auto, which caused the hero image's intrinsic size to inflate the flex item on wide viewports, squishing banners to zero height (Firefox). flex-shrink: 0 on banner elements prevents future shrinkage. .hero min-height capped with min() to avoid overflow on short viewports.

Before (hero page):

<BannerOrNearbyEvent />           <!-- normal flow, pushes layout down -->
<CampaignBanner />                <!-- normal flow, pushes layout down -->
<div class="layout hero-page">
  <div class="hero-section">      <!-- position: relative -->
    <Hero />                      <!-- height: 100vh — overflows viewport -->
    <Header />                    <!-- nav: position: absolute over hero -->
  </div>
  <main /><Footer />
</div>

After (hero page):

<div class="page-top hero-page">  <!-- NEW: height: 100dvh; flex column -->
  <BannerOrNearbyEvent />         <!-- takes natural height -->
  <CampaignBanner />              <!-- takes natural height -->
  <div class="hero-section">      <!-- flex: 1; min-height: 0; position: relative -->
    <Hero />                      <!-- height: 100% — fills remaining space -->
    <Header />                    <!-- nav: position: absolute over hero -->
  </div>
</div>
<div class="layout hero-page">    <!-- hero-section moved to page-top -->
  <main /><Footer />
</div>

Testing

• Homepage with active banner: hero bottom at viewport fold at scroll position 0
• Dismiss banner: hero expands to fill full 100dvh
• Resize viewport: hero adjusts without JS
• Nav layout unchanged at desktop, ~850px, and mobile widths
• Non-hero pages: layout unchanged
• Wide viewport (2560px+) with banner: banner visible, hero fills remaining space (Firefox)

[netlify]

👷 Deploy request for pauseai pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	547d1fa

[Wituareard]

Seems to cut off the banner under Firefox for wide viewports

[RisingOrange]

@Wituareard

Seems to cut off the banner under Firefox for wide viewports

Good catch! Fixed in 547d1fa