qumo-website/openspec/changes/step-003-navigation-bar/specs/navigation/spec.md

ADDED Requirements

Requirement: Nav renders logo linking to homepage

The navigation bar SHALL display the Qumo wordmark logo (logo-wide.svg inlined as SVG) on the left side, wrapped in an <a> tag linking to the locale-appropriate homepage (/ for EN, /nl for NL). The logo fill SHALL use currentColor so it inherits the Snow text color on the Midnight nav background.

Scenario: Logo is visible on dark background

• WHEN the page renders with Nav.astro included
• THEN the logo SVG SHALL have class="text-snow" (or equivalent) so its paths render as Snow (#F3F3F3) on the Midnight background

Scenario: Logo links to locale homepage

• WHEN the user is on an English page and clicks the logo
• THEN the browser SHALL navigate to /

Scenario: Logo links to NL homepage on Dutch pages

• WHEN the user is on a Dutch page (/nl/...) and clicks the logo
• THEN the browser SHALL navigate to /nl

---

Requirement: Nav renders three page links

The navigation bar SHALL render three links: Services (→ /#services), AI Launchpad (→ /ai-launchpad), About (→ /about). Label text SHALL come from the nav.links array in the locale content JSON. On Dutch pages, links SHALL point to /nl#services, /nl/ai-launchpad, /nl/about.

Scenario: EN nav links render with correct hrefs

• WHEN the page locale is en
• THEN the three links SHALL have href values /#services, /ai-launchpad, /about with labels "Services", "AI Launchpad", "About"

Scenario: NL nav links render with correct hrefs

• WHEN the page locale is nl
• THEN the three links SHALL have href values /nl#services, /nl/ai-launchpad, /nl/about with labels "Diensten", "AI Launchpad", "Over Ons"

---

Requirement: Nav renders Connect CTA button

The navigation bar SHALL render a "Connect" CTA button on the right side linking to /contact (EN) or /nl/contact (NL), with the wum-arrow.svg chevron icon inline. The button SHALL be styled distinctly from nav links (border or background treatment matching the staging site).

Scenario: Connect button links to contact page

• WHEN the page locale is en
• THEN a button or link with label "Connect" and href="/contact" SHALL be present in the nav

Scenario: NL Connect button uses Dutch label and NL href

• WHEN the page locale is nl
• THEN the CTA SHALL display "Verbind" and link to /nl/contact

---

Requirement: Nav renders language switcher

The navigation bar SHALL render a language switcher that links to the alternate locale version of the current page. The current locale SHALL be shown as active/non-linked; the alternate SHALL be a clickable link.

Scenario: EN page shows NL as switchable link

• WHEN the current page is /about
• THEN the language switcher SHALL show "EN" (active, non-linked) and "NL" linking to /nl/about

Scenario: NL page shows EN as switchable link

• WHEN the current page is /nl/ai-launchpad
• THEN the language switcher SHALL show "NL" (active, non-linked) and "EN" linking to /ai-launchpad

---

Requirement: Nav is fixed and transitions background on scroll

The <nav> element SHALL be position: fixed at the top of the viewport with z-index above page content. On page load it SHALL have a transparent background. After the user scrolls more than 20px, it SHALL transition to a solid Midnight (#102022) background. The transition SHALL be smooth (CSS transition-colors).

Scenario: Nav is transparent on page load

• WHEN a page loads and window.scrollY is 0
• THEN the nav background SHALL be transparent

Scenario: Nav becomes solid after scrolling

• WHEN the user scrolls more than 20px down the page
• THEN the nav background SHALL be bg-midnight (solid #102022)

Scenario: Nav returns to transparent when scrolled back to top

• WHEN the user scrolls back to within 20px of the top
• THEN the nav background SHALL return to transparent

---

Requirement: Nav collapses to hamburger menu on mobile

On viewports below md breakpoint (768px), the three nav links, language switcher, and Connect CTA SHALL be hidden. A hamburger button SHALL be shown. Clicking the hamburger SHALL reveal a full-width slide-in mobile menu containing all nav links, the language switcher, and the Connect CTA.

Scenario: Desktop nav links are hidden on mobile

• WHEN viewport width is below 768px
• THEN the desktop nav links SHALL have class including hidden (or equivalent responsive class)

Scenario: Hamburger button opens mobile menu

• WHEN the hamburger button is clicked
• THEN the mobile menu panel SHALL become visible and aria-expanded="true" SHALL be set on the button

Scenario: Hamburger button closes mobile menu

• WHEN the mobile menu is open and the hamburger button is clicked again
• THEN the mobile menu SHALL close and aria-expanded="false" SHALL be set on the button

Scenario: Mobile menu contains all nav items

• WHEN the mobile menu is open
• THEN it SHALL contain all three page links, the language switcher, and the Connect CTA