# Team hover portrait grid > **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 team section for **Halden**, an Oslo design studio. Six people sit in a 3×2 grid. Each cell is a geometric “portrait” — layered SVG rectangles, circles, and gradients in wine, gold, and cream — not photographs and not initials discs. At rest only the italic Bodoni name sits on the picture. Hover or keyboard focus drops a 78% ink veil over 320ms and reveals role (gold uppercase), a one-line bio, and a `mailto:` link. No JavaScript. The first frame is the six pictures with names already on them. ## Reference behaviour 1. Initial state: cream page `#F3EBE3`, 56px nav (italic “Halden” 22px Bodoni, Work / Index / Visit, wine `studio@halden.studio`). Lead: kicker “THE STUDIO · OSLO”, heading “Six people, one room”, right meta “HOVER A PORTRAIT”. Six portraits fill the remaining height. Names visible; role, bio, and email hidden (`max-height:0; opacity:0`). 2. Hover a card: `.veil` opacity 0 → 1 over 320ms; `.more` max-height 0 → 140px, opacity 0 → 1, translateY 8px → 0 over 320ms / 180ms. The SVG stays put underneath. 3. Focus-within a card (tab onto the card, then onto the email): same reveal. A 2px wine outline, 3px offset, sits on the card. 4. Hover the email: colour `--gold`. The underline is gold at rest (`text-decoration-color: var(--gold)`, offset 3px). 5. Leave the card: veil and `.more` reverse on the same clocks. 6. Tab order: brand → Work → Index → Visit → studio email → Mira card → Mira mail → Jonas card → Jonas mail → … through Henrik. 7. Reduced motion: veil and `.more` durations become 1ms; translate is forced to none. Reveal still happens. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────┐ │ Halden Work Index Visit studio@halden.studio │ 56 │ THE STUDIO · OSLO HOVER A PORTRAIT │ │ Six people, one room │ │ ┌──────────────┬──────────────┬──────────────┐ │ │ │ Mira │ Jonas │ Amara │ │ │ │ (wine/gold │ (diag split) │ (offset sq) │ │ │ │ circles) │ │ │ │ │ ├──────────────┼──────────────┼──────────────┤ gap 14 │ │ │ Piet │ Clara │ Henrik │ │ │ │ (ellipse + │ (5 bands + │ (gold fall │ │ │ │ triangle) │ circle) │ + circle) │ │ │ └──────────────┴──────────────┴──────────────┘ │ └──────────────────────────────────────────────────────────────────────┘ pad 56 ``` - `