Refactor hero/nav layout to use standard positioning

[anthonybailey]

Problem

The homepage hero/nav layout causes overlap when the nav exceeds its expected height.

Current pattern in UniversalNavbar.svelte:

nav.move-up {
    margin-top: min(-100vh, calc(-1 * var(--hero-min-height)));
    height: 0;
}

This pulls the nav up over the hero with negative margin, then uses height: 0 to prevent it affecting layout below.

The assumption that was never true

The pattern assumes fixed nav height, but the nav height was variable from the start:

1. Logo positioning (introduced in same commit): The logo can be on the same row as links OR wrap to its own row, depending on viewport width. Complex --check-desktop/--check-mobile logic detects this. Nav height: 1 or 2 rows.

2. flex-wrap on nav-links: Links can wrap at narrow viewports.

3. Campaign nav (current branch): Adds an explicit second row of links.

The logo wrapping was already the elephant in the room. Campaign nav just makes the problem more visible.

History

The Nov 2024 layout overhaul (6cfaed2) switched from a vertical nav to horizontal, introducing both the variable-height nav AND the fixed-height assumption in the same commit.

Proposed fix

Use a standard layout pattern where nav takes its natural height and hero adjusts accordingly. No assumptions about nav height required.

Related

• Feature branch feature/campaign-nav exposes this
• Original pattern: 6cfaed2

---

🤖 Generated with Claude Code

[Wituareard]

iirc I couldn't find another solution solution to properly get the hero behind the navbar without JS and figured it wouldn't be a problem since the tagline was supposed to be centered on the screen anyway

[Wituareard]

Also the layout itself wasn't changed in that commit, only the implementation. The navbar could always be 3+ rows (if the items cover multiple rows themselves)