# Studio hours and booking > **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 visit page for Clay & Co, a fictional ceramics studio in Alcântara, Lisbon. Left: a kicker, a giant two-line italic email, a short hint, and a "Book 30 min" button. Right: an "Hours this week" table for Monday–Sunday and a timezone note. The button opens a native `

` with three fields (name, email, note). `showModal()` supplies the focus trap, Esc-to-close, and inert background. The studio feeling is clay dust and a fired-brick accent, not a marketing form with a map. ## Reference behaviour 1. Initial state: clay ground `#ebd8cc`. 64px nav: italic 28px "Clay & Co", links Work / Studio / Visit (`aria-current` on Visit). Main is a two-column split with a 1px hairline between. 2. Email `hello@` / `clayandco.studio` is 64px italic Cormorant, a `mailto:` link. Hover or focus draws a 2px accent underline from left over 320ms expo-out (`background-size` 0 → 100%). 3. Primary button "Book 30 min" is 48px tall, brick `#a34b38`, cream type, 4px radius. Hover darkens to `#8d3e2e`. Active scales to 0.98. 4. Hours table: caption "Hours this week" as italic 28px serif. Header row DAY / OPEN in 11px uppercase. Seven body rows, 11px vertical padding, 1px hairline between. Mon–Thu `10:00 – 18:00`, Fri `10:00 – 16:00`, Sat and Sun `Closed` in italic `--ink-3`. Tabular nums, times right-aligned. 5. Timezone note under the table: 16px clock SVG + "Times in Lisbon, Europe/Lisbon (WEST, UTC+1). Kiln days may close the floor at 15:00; we will write if your slot moves." 6. Clicking Book 30 min: `form.reset()`, remove `.ok`, `dialog.showModal()`, focus the name input. The panel is 420px, dust `#f4ece6`, 8px radius, scales from 0.96 and fades in over 280ms. Backdrop `rgba(46,32,24,.42)`. 7. Fields: Name (text, required, autocomplete=name), Email (email, required), Note (textarea, 3 rows, placeholder "What you would like to see"). Labels 11px uppercase above 1px bottom-border inputs. Focus turns the border `--accent`. 8. Submit: prevent default, add `.ok` to the form (hides fields and actions, shows "Request sent. We will write within a working day." in `--ok`). After 1200ms the dialog closes. Cancel, ×, Esc, and a click on the dialog element (the scrim) all close. On `close`, focus returns to Book 30 min. 9. Tab inside the open dialog cycles name → email → note → Cancel → Send → × → name. Page content behind is inert. 10. Reduced motion: dialog and underline transitions drop to 1ms. ## Structure ``` 1280 × 800 ┌────────────────────────────────────────────────────────────┐ │ Clay & Co Work Studio Visit │ 64 ├─────────────────────────────┬──────────────────────────────┤ │ STUDIO · APPOINTMENTS │ Hours this week │ │ hello@ │ DAY OPEN │ │ clayandco.studio │ Monday 10:00 – 18:00 │ │ A ceramics studio in │ … │ │ Alcântara. Write anytime… │ Saturday Closed │ │ [ Book 30 min ] │ Sunday Closed │ │ │ ⏱ Times in Lisbon, WEST… │ └─────────────────────────────┴──────────────────────────────┘ dialog 420, centred, when open ``` - `