WEB-UX-001 — Keep fixed navigation from covering page content #170

Outcome

Keep the persistent site navigation from covering the first heading or content on pages without a hero image. Fix the shared layout boundary; do not add decorative placeholder banners.

Report and evidence

At 2026-07-13T04:20Z, live /events at 1280px measured the fixed navigation from y=0 through y=88 while #main-content began at y=0 and its heading at y=16. The heading was inside the navigation overlay.

Source at e1f887203e4ba75d22908f3ef51259a339aaaa08 confirms:

• src/components/navbar.css fixes a 5.5rem navigation at the viewport top.
• #main-content reserves no navigation clearance.
• Hero pages compensate inconsistently with 5rem or 3rem top margins.
• Account, Shop, Events, login, legal, loading, and similar routes have no offset.

Invariant

First visible page content must begin at or below the persistent navigation at desktop, phone width, and zoomed layouts. Hero and non-hero routes must share one navigation-height contract without a second gap.

Atomic scope

Owned only after a timestamped claim:

• src/index.css
• src/components/navbar.css
• src/pages/home/home.css
• one new focused CSS layout regression test

Expected implementation: define one shared navigation-height custom property, use it for the fixed navigation and #main-content top clearance, then remove legacy hero offsets that would double the gap.

Explicit exclusions

• No page component, route, heading, link, content, image, or placeholder-banner changes
• No src/App.jsx, Auth, Login, Account, service, Firebase, Functions, Rules, provider, workflow, security, commerce, or payment changes
• No announcement-banner redesign
• No root security/operations documentation changes
• No officer procedure change unless implementation changes an officer task
• Never touch public/sitemap.xml

This stays clear of active parent #120 and its Auth/account/email recovery scope.

Acceptance

• Add a regression test that fails on the current no-clearance layout and passes only when the shared height contract clears #main-content and legacy hero offsets are gone.
• Verify desktop and phone browser geometry for /events, /shop, a hero route, and Home: first visible content top is at or below navigation bottom, without a doubled gap.
• Verify Skip to content and the phone navigation menu.
• Run the focused test, frontend suite, strict changed-file lint, SPA safety test, and diagnostic production build.
• Review for unintended content, auth, accessibility, or route changes.

Failure cases and compatibility

Stop if the fix depends on route-specific page edits, placeholder assets, dynamic member data, or changed navigation behavior. This is a CSS-only backward-compatible correction with no migration.

Officer handoff

• Officer impact: page titles and controls remain visible below navigation, including on phones.
• Officer documentation: None expected — no officer procedure, destination, permission, public wording, or deployment duty changes.
• Deployment evidence: record source, tests, merge, website publication, runmprc.com, Firebase, and providers separately.

Coordination

Creating this issue does not claim it. Before editing, re-read state/comments, assign one agent, add status:in-progress, post an exact UTC claim with branch and owned paths, and re-check for overlap.