# Stacked 3D tabs > **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 The features section for "Nightjar", an invented sleeper-train operator. Four vertical tabs on the left (Pick your berth, See the night, Order breakfast, Board offline) control four product cards on the right that sit as a physical stack in perspective: the active card at the front, the other three stepping back 90px in depth and 34px up each, their headers peeking over the top so you can read what is behind. Choosing a tab sends the cards round: each one moves to its new depth on the same 640ms expo-out curve. The thing to copy: one custom property, `--d` (depth), drives position, tilt and dimming, and the browser's 3D sort handles the overlap. ## Reference behaviour 1. Initial state: tab 1 selected; the berth card is in front; behind it, in order, the route, breakfast and ticket cards, each header visible above the one in front. 2. Click a tab: the cards re-deal. Depth for each card is `(index − active + 4) % 4`. The old front card travels back and up to its new slot while the chosen one comes forward; all move together over 640ms. 3. Click a card that is behind: it comes to the front (same as its tab). 4. Keyboard on the tablist: Up/Left previous, Down/Right next (wrapping), Home first, End last. The newly selected tab takes focus (automatic activation). Keys 1 to 4 anywhere jump to that tab. 5. The selected tab gets a `--bg-2` fill, full-ink title and a 2px coral bar on the left rule that grows from its centre over 240ms. 6. Berth card: three radio cards (Couchette 4 €89, Sleeper 2 €164 selected, Deluxe 1 €238), each with a tiny cabin plan; your berth is drawn in coral. Selecting one updates the total. 7. Route card: seven stops on a 2px line from Amsterdam Centraal 19:58 to Wien Hauptbahnhof 08:12; night stops are dotted and grey ("no doors open"). 8. Breakfast card: two dishes with − and + steppers (0 to 4); the total updates (€9.50 initially). 9. Ticket card: AMS to VIE, six fields, a 21 × 21 ticket code with three finder squares, and a perforated strip "Valid offline until 08:12, Sat 15 Nov." 10. Only the front card is interactive and exposed to assistive tech; the others are `aria-hidden` and their contents are `inert`. ## Structure ``` 1280 × 800 ┌──────────── wrap 1200 max, padding 34 / 44 / 22 · grid 400px 1fr, gap 56 ──────────────┐ │ Nightjar sleeper trains (coral 13) │ ┌─ header d=3 ───────────────┐ │ │ Go to sleep in Amsterdam. │ ┌─┴─ header d=2 ───────────────┴─┐ │ │ Wake up in Vienna. (46px, 800) │ ┌─┴─── header d=1 ─────────────────┴─┐ │ │ lede (36ch) │ ┌─┴───── front card d=0 ───────────────┴┐│ │ ┃ Pick your berth [1] │ │ 56px header: title · meta ││ │ ┃ Seat, couchette or a cabin… │ │ body 20/22 padding: working screen ││ │ │ See the night [2] │ │ ││ │ │ Order breakfast [3] │ │ 400px tall ││ │ │ Board offline [4] │ └────────────────────────────────────────┘│ │ hint │ stage 540 tall, stack inset 118 0 0 │ │──────────────────────────────── footer hairline ─────────────────────────────────────── │ └──────────────────────────────────────────────────────────────────────────────────────────┘ ``` - Left: `.kicker`, `

`, `.lede`, `
` with four `