# 行前旅程 — Design Specification

- Concept: `行前旅程` (Journey Before Arrival)
- Pack path: `docs/design-references/customer-overhaul/`
- Assets: `../../../public/brand/plk-logo.svg`, `../../../public/camps/pak-tam-chung.jpg`, `../../../public/camps/tai-tong.jpg`
- Runtime impact: none (static reference only)

## Product principle

Customers should feel they are preparing a real outdoor camp trip—destination clear, journey visible, next preparation step unmistakable—while every amount, status, and rule remains a trustworthy PLK civic service.

## Shell architecture

### Desktop (≥1024px)

```
┌ BrandChip (logo · service name · user · text nav) ──────────────┐
├ JourneyRail (vertical) ┬ Main stage (photo-led + content) ─────┤
│  選營                    │  PhotoHero / content chapters         │
│  組裝行程                 │                                         │
│  確認費用                 │                                         │
│  行前準備                 │                                         │
│  入營                    │                                         │
└────────────────────────┴─────────────────────────────────────────┘
```

### Mobile (≤767px)

- Compact brand chip with menu sheet
- Route ribbon (current phase + next action text)—never a full 5-dot horizontal stepper crowded with labels
- Bottom dock: 探索 · 我的營期 · 文件 · 我
- Sticky primary action sits above dock; content has bottom padding to avoid collision

## Journey phase mapping (presentational only)

| Domain state | Journey phase | Primary action example |
|---|---|---|
| No booking | 選營 | 開始探索營地 |
| Draft / application in progress | 組裝行程 | 繼續填寫 |
| Pending payment | 確認費用 | 前往模擬付款 |
| Confirmed / deposit paid | 行前準備 | 查看行程安排 |
| Checked-in | 入營 | 出示入營證 |
| Completed | 入營 complete | 查看文件紀錄 |
| Cancelled | Last valid + seal | 查看紀錄 |

## Visual tokens

| Role | Token | Value |
|---|---|---|
| Canvas | `--sky-mist` | `#E8F4FC` |
| Surface | `--white` | `#FFFFFF` |
| Ink | `--ink` | `#15202B` |
| Muted | `--ink-soft` | `#3D4F5F` |
| Primary | `--trail` | `#0D9F4F` |
| Sky | `--sky` | `#2B9BD6` |
| Sunrise | `--sun` | `#F2B91F` |
| Coral | `--coral` | `#E5473A` |
| Zone PTC | `--zone-ptc` | `#0D9F4F` |
| Zone TT | `--zone-tt` | `#2B9BD6` |
| Border | `--line` | `#C5D6E4` |
| Focus | `--focus` | `#0A6B9A` |

Typography: system stacks only (no remote fonts). Chinese UI ≥14px. No negative letter-spacing. No `vw` font scaling.

## Motion

| Motion | Duration | Use |
|---|---|---|
| Photo hero enter | 400–520ms | Opacity + soft translateY |
| Destination stagger | 220ms + 60ms delay | Results reveal |
| Route marker | 200ms | Phase change |
| Quote spine expand | 240ms | Height/opacity |
| Success transform | 450ms | Payment success state |
| Mobile dock | 200ms | Sheet open |

All disabled under `prefers-reduced-motion`.

## Files

| File | Route analogue |
|---|---|
| `dashboard.html` | `/portal` |
| `availability.html` | `/portal/availability` |
| `individual-booking.html` | `/booking` |
| `group-application.html` | `/group-booking` |
| `payment.html` | `/portal/payments/:id` |
| `booking-detail.html` | `/portal/bookings/:id` |
| `documents.html` | `/portal/documents` |
| `profile.html` | `/portal/profile` |
| `index.html` | Catalogue |
| `shared.css` | System |
| `shared.js` | Nav/menu/payment demo interactions |
| `concept-report.md` | Phases 1–3 |
| `validation/` | Playwright artifacts |

## Accessibility

- Skip link, landmarks, labeled controls
- Focus ring 3px on `--focus`
- Status not by color alone (seal text + shape)
- ≥44×44 targets; Chinese readable at 375px
- No horizontal overflow at 375 / 390 / 768 / 1280 / 1440