[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-733-DEPARTURES-the-split-flap-board":3},"# BUILD PROMPT — CODING AGENT BRIEF\n\n**Project:** \"DEPARTURES — The Split-Flap Board\" — Complete Artistic\u002FCreative Landing Page\n**Delivery:** Single complete build, first attempt, production quality. No partial output, no stubs, no \"TODO\" sections.\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. You are building a complete, single-page artistic landing page themed around vintage airport split-flap departure boards (Solari boards), reimagined with 2020s contemporary styling. The page markets a fictional product named **DEPARTURES** — a creative launchpad tool that takes ideas from \"runway\" to \"departure\" — with all copy written in flight\u002Fdeparture vocabulary.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* **No Inline CSS:** The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and interactive states must be targeted via class or ID selectors defined in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic — changing the theme must require editing `style.css` only, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens (DEPARTURES Palette)\nAll visual tokens must live in `:root` (light) and be overridden in `.dark` \u002F `@media (prefers-color-scheme: dark)`. Required base structure:\n\n```css\n:root {\n  \u002F* Palette — DEPARTURES *\u002F\n  --primary: #ffb52e;          \u002F* amber — signature split-flap accent *\u002F\n  --secondary: #8a7a58;        \u002F* bronze — muted accent *\u002F\n  --bg-primary: #e8dcc0;       \u002F* warm cream — page background (never #ffffff) *\u002F\n  --bg-secondary: #0d0b08;     \u002F* deep espresso — board panels \u002F dark surfaces *\u002F\n  --bg-card: #efe4cc;          \u002F* neumorphic card surface on cream *\u002F\n  --text-primary: #16130e;     \u002F* espresso text on cream *\u002F\n  --text-secondary: #6b5d3d;   \u002F* darkened bronze — AA-safe on cream for small text *\u002F\n  --text-on-dark: #e8dcc0;     \u002F* cream text on dark surfaces *\u002F\n  --text-success: #256b45;\n  --text-error: #b3362b;\n  --border-default: rgba(22, 19, 14, 0.18);\n  --border-error: rgba(179, 54, 43, 0.6);\n  --border-success: rgba(37, 107, 69, 0.6);\n\n  --radius-sm: 4px;   \u002F* flap tiles *\u002F\n  --radius-md: 12px;  \u002F* buttons, inputs *\u002F\n  --radius-lg: 22px;  \u002F* cards, board panels *\u002F\n\n  --shadow-sm: 0 2px 6px rgba(22, 19, 14, 0.10);\n  --shadow-md: 0 10px 30px rgba(22, 19, 14, 0.18);\n  --shadow-neu: 8px 8px 18px rgba(22, 19, 14, 0.14), -8px -8px 18px rgba(255, 252, 240, 0.85);\n  --shadow-neu-inset: inset 4px 4px 10px rgba(22, 19, 14, 0.15), inset -4px -4px 10px rgba(255, 252, 240, 0.8);\n\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms;\n  --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n\n  --z-dropdown: 100;\n  --z-modal: 1000;\n  --z-toast: 1100;\n\n  --font-display: 'Bebas Neue', sans-serif;  \u002F* signage-style headings *\u002F\n  --font-mono: 'IBM Plex Mono', monospace;   \u002F* board tiles, codes, labels *\u002F\n  --font-base: 'Inter', sans-serif;          \u002F* body copy *\u002F\n}\n```\n\nDark theme overrides (minimum): `--bg-primary: #0a0806; --bg-secondary: #16130e; --bg-card: #14110c; --text-primary: #e8dcc0; --text-secondary: #b8a988; --text-success: #6fce97; --text-error: #ff9a8a; --border-default: rgba(232, 220, 192, 0.16);` plus darkened `--shadow-*` and neumorphic shadow tokens (`rgba(0,0,0,0.55)` dark side \u002F `rgba(255,240,210,0.05)` light side). Amber `--primary` remains constant in both themes.\n\n* **Contrast Pairing (mandatory, both themes):** cream\u002Flight backgrounds pair only with espresso\u002Fbronze-dark text; espresso\u002Fdark backgrounds pair only with cream or amber text. Verify every surface pairing in both themes.\n* **Never use `#ffffff`.** If a near-white is ever genuinely needed, use `#fefefe`. The cream `--bg-primary` is the intended light background.\n\n### 1.3 Mandatory Dark Mode Support\n* **Implementation:** Define dark tokens under both `.dark` and `@media (prefers-color-scheme: dark)`, structured so the `.dark` class can override the media query (e.g., `:root:not(.light)` logic or equivalent).\n* **Default Presentation — Explicit Exception Clause:** The style specification selects **Light as the primary mode**; therefore Light is the default presentation and the fallback on first visit when no preference is stored. Dark Mode is nonetheless **mandatory** and must be fully designed, toggleable, and polished.\n* **Persistence:** Store the user's choice in `localStorage` (e.g., key `departures-theme`); fall back to `prefers-color-scheme` on first visit. Provide a visible toggle in the header with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), using Material Symbols `dark_mode` \u002F `light_mode`.\n* **No Theme Flash — Explicit Exception Clause:** A **single one-line inline script** in `\u003Chead>` that applies the persisted theme class to `\u003Chtml>` before first paint is the ONLY permitted deviation from the no-inline-script rule, solely to prevent a flash of wrong theme.\n\n### 1.4 Flexbox Layout, Mobile-First & Authorized Grid Usage\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` (`items-center`) unless an explicitly justified exception applies (documented exception: `stretch` inside cards so child buttons\u002Flists fill the card width).\n* **Mobile-First:** All layouts must be responsive out of the box — multi-column rows collapse to a single column on small viewports, type scales fluidly via `clamp()`, and horizontal scrolling is forbidden in any viewport width.\n* **Grid Exception — Explicit Exception Clause:** The source style spec explicitly demands **CSS Grid**, which is therefore authorized for: (a) the split-flap board module, (b) the hero two-column layout, (c) feature\u002Fpricing\u002Ftestimonial\u002Fstep card rows, and (d) footer columns. All flex containers used elsewhere must still default to `align-items: center`.\n\n### 1.5 Framework Default\n* Use **Tailwind CSS** or clean custom CSS driven by Tailwind's `@layer` \u002F `@apply` directives. Given the heavy custom animation work (neumorphism, flap keyframes), custom CSS in `style.css` organized by sections\u002Fcomponents is fully acceptable.\n* All utilities must map back to the CSS variables and reusable generic class names (`.btn`, `.card`, `.input-group`, `.board`, `.faq__item`). Do not hardcode hex values in component rules — reference `var(--...)`.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Fonts via Google Fonts `\u003Clink>` tags** (with `preconnect`, not `@import`): `Bebas Neue` (display), `Inter` (body), `IBM Plex Mono` (board\u002Fmono). Bind them to `--font-display`, `--font-base`, `--font-mono`.\n* **Icons:** Use **Google Material Symbols (Outlined)** via the standard Google Fonts link. **Raw inline SVGs and local icon files are forbidden.** All icons must be `aria-hidden=\"true\"` with adjacent visible or visually-hidden text labels.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn` + variants)\nAll states styled via CSS classes only:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target **44×44px**, `border-radius: var(--radius-md)`, `font-family: var(--font-mono)` uppercase for labels, `transition: var(--transition-normal) var(--ease-standard)`.\n* **Variants:** `.btn-primary` (amber gradient `linear-gradient(180deg, #ffc85c, #ffb52e)` with espresso `--text-primary` text and subtle text-shadow), `.btn-secondary` (neumorphic cream surface, espresso text, `var(--shadow-neu)`), `.btn-dark` (espresso surface, cream text — used on dark panels), `.btn-danger` (see 3.5).\n* **Hover:** brightness shift (`filter: brightness(1.05)`) and\u002For shadow lift; `cursor: pointer`.\n* **Focus:** Distinct `:focus-visible` ring — `outline: 2px solid var(--primary); outline-offset: 2px;` plus an inner dark ring via `box-shadow` for contrast on amber surfaces. Ring must be clearly visible on both cream and dark backgrounds.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** disables interaction (pointer-events none, `aria-busy=\"true\"`), renders a rotating Material Symbol `sync` (or CSS ring spinner) without changing button dimensions (fixed `min-width`).\n* **Disabled:** `opacity: 0.5; filter: grayscale(0.6); cursor: not-allowed;`.\n* **Success\u002FError (`.is-success`, `.is-error`):** temporary feedback styles driven by `--text-success` \u002F `--text-error` (border + icon color shift; never color alone — swap icon glyph too).\n\n### 2.2 Card Component (`.card` + variants)\n* **Default:** Flex\u002Fgrid layout with `var(--bg-card)` surface, `var(--radius-lg)`, subtle `var(--border-default)` border, neumorphic `var(--shadow-neu)`.\n* **Hover (interactive cards):** `transform: translateY(-2px)` + shadow shift to `var(--shadow-md)`.\n* **Focus-within:** card border highlights (`--primary`) when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define `.skeleton` shimmer in CSS (`background: linear-gradient(90deg, ...); background-size: 200%; animation: shimmer 1.5s infinite`) so no layout jump occurs — the classes must exist and be reusable.\n* **Empty State:** Define a structured `.state-empty` fallback: large Material Symbol + short guidance text.\n* **Variants required:** `.card-neu` (features\u002Fsteps), `.card-fare` (pricing), `.card-boarding` (testimonials — see 6.5).\n\n### 2.3 Form & Input Component (`.input-group`)\nUsed in the Final CTA email capture:\n* **States — all styled:** Empty, Focused (focus ring per 2.1), Filled, Valid (success border + `check` Material Symbol, colored via `--text-success`), Invalid (error border via `--border-error`, error text in `--text-error`, `error` icon, `aria-invalid=\"true\"`, `aria-describedby` pointing to error message), Disabled, Read-only.\n* **Structure:** Flex column wrapping a `\u003Clabel>` (mono, uppercase, letter-spaced), the input (neumorphic inset surface `var(--shadow-neu-inset)`), and a **dedicated error feedback container** with `aria-live=\"polite\"`.\n* Validation fires on blur and on submit; inline messages only — `alert()` is forbidden.\n\n### 2.4 Modal \u002F Popup Component\nEach pricing tier includes a \"Fare details\" link that opens a modal:\n* **States:** Opening (fade + slight `scale(0.96)→1`), Open, Loading (brief simulated fare-rule fetch with spinner), Success\u002FError feedback inside, Closing (reverse animation) — all via CSS transitions\u002Fclasses.\n* **UX:** Centered flex container (`align-items: center; justify-content: center`), dimmed\u002Fblur backdrop, close button using Material Symbol `close` with `aria-label=\"Close dialog\"`, full keyboard focus trap, `Esc` and overlay-click both close, focus returns to the triggering link. `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby` pointing at the modal title. Layered at `var(--z-modal)`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n### 3.1 Responsive by Default\n* Fluid `clamp()` type scale (e.g., `h1: clamp(2.75rem, 6vw, 5rem)`), fluid section padding (`clamp(4rem, 10vw, 7rem)`), breakpoints for column collapse. Zero horizontal overflow at any width, including 320px.\n\n### 3.2 Smooth Animations & Motion Discipline\n* Every state change transitions with `var(--transition-normal) var(--ease-standard)`.\n* Required keyframes: `flap-in` (split-flap entry, see 5.2), `shimmer`, `status-pulse` (BOARDING status), scroll-cue bounce, `spin` (loading).\n* **`prefers-reduced-motion: reduce`:** disables flap cycles, parallax\u002Ftilt, pulses, and smooth scrolling; renders a static, fully legible board; caps any remaining opacity fades at 200ms. This is non-negotiable.\n\n### 3.3 Accessibility (a11y)\n* Semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`), logical heading order (one `h1`), skip-to-content link.\n* WCAG AA contrast in **both** modes; if bronze `#8a7a58` fails AA for small text on cream, use the darkened `--text-secondary` and reserve raw bronze for large\u002Fdecorative text.\n* **Never color alone:** board statuses (BOARDING \u002F ON TIME \u002F DELAYED \u002F DEPARTED) differ by label text and may pair a Material Symbol icon; the BOARDING pulse is decorative, not informational.\n* Keyboard operability for: mobile menu, accordion, modal, form. Logical DOM\u002Ffocus order; visible focus everywhere.\n* `aria-live` regions for form errors and submission feedback. The ambient board animation must NOT spam screen readers — announce nothing per-tile; provide a visually-hidden static description of the board.\n\n### 3.4 Mandatory Visual Feedback\nEvery click, hover, focus, and submission triggers a visible state change (button transforms, card lifts, accordion expansion, tile flips, form state styles).\n\n### 3.5 Destructive Actions\nDefine `.btn-danger` (e.g., footer \"Delete account\" style link if included) — visually distinct red in **both** light and dark themes, never relying on hover alone.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n### 4.1 File Structure\n* Three files: `index.html`, `style.css`, `script.js`. The only script tag is `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — plus the single authorized one-line theme bootstrap in `\u003Chead>` (per 1.3). No other inline scripts.\n* All animations, layout, and theming live in `style.css`; all behavior (theme toggle, flap orchestration, accordion, modal, validation, parallax) lives in `script.js`, vanilla JS only, no frameworks, no console errors, everything degrades gracefully without JS.\n\n### 4.2 Naming Convention\n* **BEM only**, consistently across the entire deliverable: `.board__tile`, `.card-fare__price`, `.faq__item--open`, `.hero__cta`. Never mix conventions.\n\n### 4.3 Copy Rules\n* **All user-facing copy in English.** No lorem ipsum, no placeholder text — write real, thematic, on-brand copy per Section 6. Fictional names, routes, and fares are expected content, not placeholders.\n\n---\n\n## 5. THEME DIRECTION — \"DEPARTURES, THE SPLIT-FLAP BOARD\"\n\n### 5.1 Concept & Mood\nMid-century Solari departure board reimagined for the 2020s: warm **cream paper** venue (`#e8dcc0`) with soft neumorphic embossing, deep **espresso hardware** panels (`#0d0b08`, `#16130e`, `#0a0806`), and glowing **amber** (`#ffb52e`) — the classic split-flap yellow. Typography is signage-inspired: condensed caps display (Bebas Neue), technical monospace details (IBM Plex Mono), clean body (Inter). Flight metaphor throughout: ideas are \"flights,\" launching is \"departing,\" plans are \"fare classes.\"\n\n### 5.2 Signature Module: The Split-Flap Board (`.board`)\n* **Panel:** Dark `--bg-secondary` surface, `var(--radius-lg)`, inset shadow for depth, faint top sheen gradient, a mono header row (`DEPARTURES` + a live local-time clock) and column labels: `FLIGHT · DESTINATION · GATE · STATUS`.\n* **Tiles:** Each character sits in a tile (`.board__tile`) — square, `var(--radius-sm)`, background slightly lighter than the panel (`#1a1610`), inset shadow, and a **center horizontal hairline** (`::after`, 1px, darker) reproducing the flap split. Characters: `var(--font-mono)`, uppercase, cream or amber, subtle amber `text-shadow: 0 0 6px rgba(255,181,46,.35)`. Size via `clamp()` for responsiveness.\n* **Animation:** On load, tiles flip to final characters — `transform-origin: center; animation: flap-in` rotating through `rotateX(-92deg) → 0` with `perspective` on the parent wrapper, staggered `animation-delay` per tile. Every few seconds, JS updates one row (destination\u002Fstatus) with rapid sequential flapping, swapping the character at the 90° midpoint.\n* **Graceful degradation:** The final board content is hardcoded and fully readable without JS; JS only animates. Static under reduced motion.\n* **Sample rows** (write in this format): `DP-204 · TOKYO · B12 · BOARDING`, `DP-117 · LISBON · A04 · ON TIME`, `DP-326 · NYC\u002FJFK · C07 · DELAYED`, `DP-058 · BERLIN · B02 · DEPARTED`, `DP-441 · SÃO PAULO · A11 · ON TIME` — 5–6 rows.\n\n### 5.3 Effects (all required by the style spec)\n* **Neumorphism:** Cards and secondary buttons on cream use `var(--shadow-neu)`; inputs and tile wells use `var(--shadow-neu-inset)`. Dark-mode neumorphic shadows per 1.2. Neumorphism must never compromise focus visibility.\n* **Gradients:** Amber button gradient (2.1), a warm radial amber glow behind the hero, subtle vertical sheen on the board panel, optional gradient accent on one hero display word.\n* **3D\u002FParallax:** Hero board wrapped in a `perspective` container with a mouse-move tilt of max ±4° (`requestAnimationFrame`, disabled on touch and reduced motion) plus subtle scroll parallax on the background glow via `transform: translateY`. Tiles layered with slight `translateZ`.\n* **Text Shadows:** Board character glow (5.2) and a faint relief text-shadow on display headings.\n* **Keyframe\u002FTransition tech:** CSS Grid, Flexbox, keyframe animations, transitions, transforms, gradients, box shadows, text shadows, border radius — all must appear in the final CSS.\n\n---\n\n## 6. PAGE SECTION SPECIFICATIONS\n\n### 6.1 Global Header & Navigation\nSticky, blurred cream (dark in dark mode), logo `DEPARTURES` in `var(--font-display)` with an amber flap-square accent; anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with smooth scroll + `scroll-margin-top`; theme toggle (per 1.3); compact primary CTA \"Book a seat\". Mobile: `menu` Material Symbol opens a dropdown panel at `var(--z-dropdown)` — `aria-expanded`, `aria-controls`, keyboard operable, `Esc` closes.\n\n### 6.2 Hero\nTwo-column grid (copy + board) collapsing to one column. Mono eyebrow `NOW BOARDING · GATE 26`; `h1` in Bebas (suggested: **\"NOW BOARDING: IDEAS WORTH LAUNCHING\"** with amber gradient on the key word); supporting subcopy; CTAs: `.btn-primary` \"Start boarding\" (→ Final CTA) and `.btn-secondary` \"View flight classes\" (→ Pricing); mono trust row (e.g., `12,409 IDEAS DEPARTED · 98% ON-TIME LAUNCHES`). Right column: the split-flap board (5.2) with parallax tilt. Bouncing `keyboard_arrow_down` or `flight` scroll cue linking to Features.\n\n### 6.3 Features — 3 Cards\nGrid `3 → 1` (tablet intermediate allowed). Each `.card-neu`: amber chip with a Material Symbol (`alt_route`, `groups`, `insights` or similar), mono eyebrow (`AMENITY 01\u002F02\u002F03`), title, 2–3 sentences of real copy. Suggested features: **Runway** (idea planning), **Crew** (collaboration), **Tower** (launch analytics). Hover lift + focus-within per 2.2.\n\n### 6.4 How It Works — 3 Steps\nBoarding sequence: `01 CHECK IN` (capture the idea), `02 BOARD` (assign the crew), `03 DEPART` (launch). Oversized mono step numbers, Material Symbol per step, neumorphic step cards, connected by a dashed bronze line that animates\u002Ffills on scroll (IntersectionObserver; static under reduced motion).\n\n### 6.5 Testimonials\nThree `.card-boarding` cards styled as **boarding passes**: cream surface, perforated left edge (punched holes via radial-gradient + dashed divider), mono route codes (`LIS → BER`), fictional passenger name + role, real quote, star rating (`star` Material Symbols with accessible label), barcode strip via `repeating-linear-gradient`. Grid `3 → 1`, hover lift.\n\n### 6.6 Pricing — 3 Tiers\nFare classes: **ECONOMY** ($0), **BUSINESS** (featured, e.g., $24\u002Fmo), **FIRST CLASS** (e.g., $59\u002Fmo). Grid `3 → 1`; featured middle card is dark board-styled (espresso surface, cream text, amber CTA) with a mono amber `MOST POPULAR` tag, slightly elevated. Each tier: fare list with `check` icons, CTA button, and a \"Fare details\" link opening the spec-compliant modal (2.4). Featured card must remain distinct in both themes.\n\n### 6.7 FAQ — Accordion\n5–6 thematic questions (e.g., \"Can I change my flight plan mid-journey?\"). Accessible accordion: `\u003Cbutton>` with `aria-expanded` + `aria-controls`, region panel animated via CSS (grid-template-rows or max-height transition), `expand_more` icon rotating 180°, keyboard operable, multiple panels may stay open.\n\n### 6.8 Final CTA\nFull-width dark board panel (espresso background, amber glow). Display heading in Bebas (suggested: **\"CLEARED FOR DEPARTURE\"**), short subcopy, the email signup `.input-group` (2.3) with `.btn-primary` \"Get my boarding pass\" — inline success confirmation via `aria-live`, optional toast at `var(--z-toast)`. Include a small decorative flap row spelling \"DEPART\".\n\n### 6.9 Footer with Secondary Links\nEspresso strip (both themes). Columns: brand + tagline + social Material Symbol icons (aria-labeled, `href=\"#\"`), then **Product**, **Company**, **Support** link columns (secondary links, real labels: Features, Pricing, FAQ, About, Careers, Contact, Help Center, Status). Legal row: dynamic copyright year (JS), Privacy\u002FTerms\u002FCookies links. All text meets contrast pairing rules.\n\n---\n\n## 7. ACCEPTANCE CHECKLIST (verify before delivering)\n\n1. Zero `style=\"...\"` attributes; zero inline SVGs; single deferred `script.js` + one-line theme bootstrap.\n2. All Section 1.2 tokens present in both light and dark themes; contrast pairing holds everywhere.\n3. Theme toggle persists via `localStorage`, respects `prefers-color-scheme`, correct ARIA states.\n4. No horizontal scroll at 320px; all grids collapse correctly.\n5. Every button\u002Finput\u002Fcard state in Section 2 exists in CSS.\n6. Modal passes focus trap, `Esc`, overlay click, focus restore, animated open\u002Fclose.\n7. Split-flap board animates on load, updates periodically, is static\u002Freadable without JS and under reduced motion.\n8. All animations gated by `prefers-reduced-motion`.\n9. All copy is real English flight-metaphor copy — no lorem ipsum.\n10. BEM naming used consistently; no hardcoded hex values in component rules.\n11. Keyboard-only walkthrough completes: nav → sections → pricing modal → FAQ → CTA form → footer.\n12. All icons are Google Material Symbols, `aria-hidden`, with accessible labels.\n",1791954991937]