Stillwater Spa

# Stillwater — Wellness & Spa Website

## Goal
Build a production-ready wellness & spa website called "Stillwater". Overall vibe: exhale — slow, quiet, tactile; every element unhurried. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: mist #F3F4F1, deep moss #2F3B33 text, sage #9CAF97 accents; imagery duotoned toward sage
- **Typography**: low-contrast serif for display (44-64px, normal weight, 1.15 line-height), airy sans body with 1.7 line-height
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Navbar** — transparent over hero, moss text; center logo, 'Book a visit' outline button right.
2. **Hero** — full-viewport slow-zoom image of water texture; headline fades in word by word about coming back to yourself; single CTA.
3. **Rituals** — 3 tall cards (image top, name in serif, 60-min / price line, 'Details' text link); cards separated by generous 48px gutters.
4. **Philosophy** — centered max-w-prose paragraph in serif with oversized opening quote mark; sage thin rule above and below.
5. **Spaces gallery** — horizontal drag-scroll gallery of 5 interior photos with rounded 24px corners and captions.
6. **Gift card banner** — split: text left, soft-focus image right, 'Give stillness' CTA.
7. **Visit info** — 2-col: hours & location with a muted custom-styled map embed placeholder; 'Getting here' notes.
8. **Footer** — single row: logo, 3 links, Instagram icon; lots of whitespace.

## Motion
- Everything slower than usual: 700-900ms durations, ease-out quads; hero zoom runs 20s subtle 1.0→1.06.
- Ritual cards reveal with 120ms stagger, translate 24px only.
- Gallery uses momentum drag with 0.92 friction; edges have soft gradient masks.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Booking CTA opens a calm modal: service select, date, time chips — all in palette, no harsh borders.
- Add a barely-visible grain overlay (2% opacity) site-wide for tactility.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.