# Full-screen mobile menu > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A full-screen navigation for a design studio's mobile site ("Marrow"). The header stays put while everything else changes: the three-line hamburger folds into an X, the page body colour animates from warm cream to deep navy, the underlying page fades and shrinks 2%, and five oversized Instrument Serif links slide up out of clipped rows one after another. Below them a row of small utility links and a pill-shaped language switch fade in last. The detail worth copying is that nothing is a separate panel; the page itself becomes the menu by changing colour, so there is no sheet edge and no scrim. ## Reference behaviour 1. Initial state: cream page. Header row (60px, starting at 54px from the top) holds the wordmark "Marrow" (30px serif) on the left and a 44px hamburger on the right. Below: a kicker, a 52px serif headline with an orange italic word, one paragraph and a three-row "Selected work" list. 2. Tap the hamburger: `body` gets `.open`. Over 420ms the background goes `#efe9df → #14213d` and text goes dark → cream. Over 240ms the top and bottom hamburger lines move to the middle (`top: 21px`) and rotate ±45°; the middle line fades and shrinks to 20% width over 160ms. 3. Simultaneously the page content fades to 0 and scales to .98 over 420ms and becomes `inert`. 4. Menu links (Work, Studio, Journal, Shop, Contact; 64px serif, superscript counts on Work and Journal) rise from `translateY(110%)` to `0` over 520ms `--ease-out`, each delayed 55ms more than the last (55, 110, 165, 220, 275ms). Each `
  • ` has `overflow: hidden` so the link appears to rise out of the row. 5. The footer block (small links row + language switch) fades in and rises 12px over 420ms with a 330ms delay. 6. Focus moves to the first menu link 120ms after opening. Escape or the X closes the menu; focus returns to the hamburger. 7. Tap a menu link: the menu closes (demo has no routing). 8. Tap EN / NO / DE: the white thumb slides to the pressed segment over 240ms with the sheet easing; `aria-pressed` updates. 9. Closing reverses everything with the same durations and no stagger; the menu becomes `visibility: hidden` after the 520ms link transition ends. ## Structure ``` 390 × 844 (54px status reserve above, 80px browser bar below) ┌──────────────────────────────────────┐ │ Marrow (=) │ fixed header, top 54, h 60 ├──────────────────────────────────────┤ closed: │ open: │ DESIGN STUDIO · BERGEN │ │ Work ²⁴ │ Objects that │ h1 52px serif │ Studio │ outlast their │ │ Journal ⁰³ │ trend. │ │ Shop │ paragraph (≤ 30ch) │ │ Contact │ ────────────────────────── │ │ │ Halden Chair, 2025 Furniture │ work list │ ───────────────────── │ Fjord Bank identity Brand │ │ Careers Press kit Newsletter Privacy │ Nord Post lamp series Lighting │ │ LANGUAGE ( EN | NO | DE ) │ │ │ │ (80px reserve) │ │ └──────────────────────────────────────┘ gutter 24px both states · links 64/1.08, gap 4 · switch 3×52×34 in a 1px pill ``` - `
    ` — fixed at `top: 54px`, `z-index: 20`; contains `` and `