[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-289-Fauvism":3},"# BUILD PROMPT — \"FAUVISM\" LANDING PAGE\n## Complete Specification for Coding AI — Single-Attempt, Production-Quality Build\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, responsive, one-page landing page in the **Fauvism** theme on the first attempt. Output the full, finished code — no questions, no partial deliverables.\n\n**Mission:** Translate the Fauvist movement (Les Fauves, 1904–1908 — Matisse, Derain, Vlaminck) into UI: wild, non-naturalistic, highly saturated clashing color; bold, flat, unmixed color fields applied \"straight from the tube\"; expressive, loose, brush-like edges and borders; hard offset shadows instead of blur. Mood anchors: Matisse's *Woman with a Hat* (1905) and Derain's Collioure harbor paintings — color used arbitrarily and fearlessly.\n\n**Page scope:** Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**Copy rules:** The output category is **Art & Illustration**. Invent one coherent fictional product in this space (e.g., an illustration studio, art print shop, or creative learning platform) and write complete, real **English** copy for every headline, paragraph, feature, step, quote, price tier, FAQ answer, and footer link. No lorem ipsum anywhere.\n\n**Mode mandate (translated from source):** The source spec declares no light\u002Fdark modes. You must therefore **define both a light and a dark theme and validate the page in both before considering it done.** A derived dark palette is provided in §1.2 — use it.\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 states must be targeted via class or ID selectors defined in `style.css`.\n* **Minimal HTML modifications:** HTML must remain clean, semantic, and styling-agnostic. Changing the look must only require editing `style.css`, never the markup.\n* **No behavioral attributes in HTML:** No `onclick` or similar inline handlers. All JavaScript behavior is attached in `script.js` via `addEventListener`, using `data-*` hooks (e.g., `data-theme-toggle`, `data-accordion-button`).\n\n### 1.2 CSS Variables & Theme Tokens\nStore **all** visual tokens in `:root` and the `.dark` theme class using CSS variables. Use exactly these light-mode tokens:\n\n```css\n:root {\n  \u002F* semantic core *\u002F\n  --bg-primary: #fff8ee;      \u002F* warm cream canvas *\u002F\n  --bg-secondary: #ffe9d1;    \u002F* peach field *\u002F\n  --surface: #fefefe;         \u002F* EXCEPTION: reference lists #ffffff; system rule mandates #fefefe *\u002F\n  --surface-2: #ffe9d1;\n  --text-primary: #1a1a1a;\n  --text-secondary: #5c4a3a;\n  --primary: #ff5e1a;         \u002F* hot orange *\u002F\n  --secondary: #1c3fab;       \u002F* cobalt *\u002F\n  --text-success: #00714f;    \u002F* viridian darkened for AA body text *\u002F\n  --text-error: #b0105a;      \u002F* magenta darkened for AA body text *\u002F\n  --border-default: #1a1a1a;\n  --border-success: #00a878;\n  --border-error: #d6146b;\n  \u002F* Fauvist hue fills (decorative fields) *\u002F\n  --viridian: #00a878;\n  --magenta: #d6146b;\n  --cobalt: #1c3fab;\n  \u002F* radius *\u002F\n  --radius-sm: 4px; --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px;\n  \u002F* hard offset shadows — ZERO blur *\u002F\n  --shadow-sm: 3px 3px 0 var(--magenta);\n  --shadow-md: 6px 6px 0 var(--secondary);\n  \u002F* (--shadow-bold \u002F --shadow-bold-sm from the reference are aliases of --shadow-md \u002F --shadow-sm) *\u002F\n  \u002F* typography *\u002F\n  --font-base: 'Fraunces', 'Playfair Display', Georgia, serif;\n  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;\n  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;\n  \u002F* spacing *\u002F\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;\n  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --spacing-gap: var(--space-4);\n  \u002F* motion *\u002F\n  --transition-fast: 150ms;\n  --transition-normal: 250ms;\n  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1); \u002F* springy, expressive *\u002F\n  \u002F* stacking *\u002F\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  \u002F* signature moves *\u002F\n  --brushstroke-border: 3px solid var(--border-default);\n  --clash-gradient: linear-gradient(105deg, #ff5e1a 0%, #d6146b 45%, #1c3fab 100%);\n  --footer-bg: #1a1a1a;\n  --footer-text: #fff8ee;\n}\n```\n\n**Mandatory dark-mode tokens** (apply under both `.dark` and `@media (prefers-color-scheme: dark)`):\n\n```css\n.dark {\n  --bg-primary: #1b120a;   \u002F* deep burnt umber *\u002F\n  --bg-secondary: #2a1a10;\n  --surface: #241811;\n  --surface-2: #3a2415;\n  --text-primary: #fff8ee;\n  --text-secondary: #d9c4ab;\n  --primary: #ff5e1a;       \u002F* fills unchanged *\u002F\n  --secondary: #8aa3ff;     \u002F* lightened cobalt for text\u002Flinks\u002Fborders on dark *\u002F\n  --cobalt: #1c3fab;        \u002F* fill only — always pair with cream text *\u002F\n  --viridian: #00a878;      \u002F* fill only — always pair with dark text *\u002F\n  --magenta: #d6146b;      \u002F* fill only — always pair with cream text *\u002F\n  --text-success: #2fd6a0;\n  --text-error: #ff6fa5;\n  --border-default: #fff8ee; \u002F* brushstroke border flips to cream *\u002F\n  --border-success: #0ac48b;\n  --border-error: #ff4d92;\n  --shadow-sm: 3px 3px 0 #ff4d92;\n  --shadow-md: 6px 6px 0 #8aa3ff;\n  --footer-bg: #0f0a06;\n  --footer-text: #fff8ee;\n}\n```\n\n**Contrast pairing rule (enforced in BOTH themes, not just the default):**\n\n| Fill \u002F background | Required text color |\n|---|---|\n| `--primary` #ff5e1a | `#1a1a1a` |\n| `--bg-secondary` \u002F `--surface-2` #ffe9d1 | `#1a1a1a` |\n| `--viridian` #00a878 | `#1a1a1a` |\n| `--cobalt` #1c3fab | `#fff8ee` |\n| `--magenta` #d6146b | `#fff8ee` |\n| Light `--bg-primary` #fff8ee | `#1a1a1a` |\n| Dark `--bg-primary` #1b120a | `#fff8ee` |\n\nNever place cream text on orange or viridian fills; never place dark text on cobalt or magenta fills.\n\n### 1.3 Mandatory Dark Mode Support\n* Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class applied to `\u003Chtml>` (guard the media query so it does not double-apply when `.dark` is active).\n* Theme switching must work purely through CSS variables — **no HTML restructuring**.\n* **Persistence:** Store the user's choice in `localStorage` (key: `fauvism-theme`). First visit falls back to `prefers-color-scheme`; if no preference is stored, also listen for live system changes.\n* **Visible toggle control** in the header: icon-only button using Material Symbols (`dark_mode` \u002F `light_mode`), minimum 44×44px, with `aria-pressed` and a dynamically updated `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n* Include `\u003Cmeta name=\"color-scheme\" content=\"light dark\">` and apply the theme as early as possible in `script.js` to minimize flash.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structure with **Flexbox** (`display: flex` or Tailwind flex utilities).\n* **Default alignment rule:** Every flex container defaults to `align-items: center` (`items-center`) unless an explicitly justified exception applies. Declared exceptions for this build: text-heavy vertical stacks (card bodies, form groups, accordion panels, footer link groups) may use `flex-start`\u002F`stretch` for readability.\n* **Mobile-first:** Base styles are single-column; `min-width` media queries (or Tailwind `sm\u002Fmd\u002Flg` prefixes) add multi-column rows. No horizontal scrolling at any viewport width down to 320px.\n* All interactive targets minimum 44×44px. Display typography uses fluid `clamp()` sizing built on the `--text-*` scale.\n\n### 1.5 Framework & Styling Approach\n* Primary approach: a **custom CSS design system in `style.css`** (tokens + reusable component classes: `.btn`, `.card`, `.input-group`, `.badge`, `.accordion`, etc.).\n* Optionally augment with **Tailwind CSS via the Play CDN** for structural utilities only (flex, spacing, responsive prefixes). Never hardcode hex colors in utilities; every visual value must resolve to a CSS variable or component class. No `\u003Cstyle>` blocks in `index.html`.\n* The base component classes from the reference spec (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) are the foundation — preserve their visual DNA (brushstroke border, hard offset shadow, springy ease) and extend them with the full state matrix in §3.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Fraunces** (weights 400–900, plus italics) and **Playfair Display** via Google Fonts `\u003Clink>` tags with `preconnect`. Bind to `--font-base` \u002F `--font-display`. Use Fraunces at heavy weights for display headlines.\n* **Icons:** Use **Google Material Symbols (Rounded)** via the official Google Fonts stylesheet. Render as `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">icon_name\u003C\u002Fspan>`. **Raw inline SVGs and local icon files are forbidden.**\n* Decorative icons get `aria-hidden=\"true\"`; icon-only interactive elements get `aria-label`.\n\n---\n\n## 2. THEME DIRECTION — FAUVISM VISUAL LANGUAGE\n\n* **2.1 Flat, unmixed color fields:** Backgrounds, cards, icon tiles, and section bands are single saturated hues applied in bold masses — as if squeezed straight from the tube. No subtle tints, no pastels, no soft gradients (the only permitted gradient is `--clash-gradient`, used sparingly: featured pricing frame and one decorative hero shape).\n* **2.2 Brushstroke borders & hard shadows:** Every component boundary uses `--brushstroke-border` (thick, solid, hand-drawn feel). Elevation is expressed exclusively through hard offset shadows (`--shadow-sm`, `--shadow-md`) — **zero blur** on component shadows. Blur is permitted only on modal\u002Fscrim overlays.\n* **2.3 Arbitrary, clashing color:** Color is assigned expressively, not naturalistically — a viridian section band, a cobalt testimonial field, an orange button on a magenta CTA. Adjacent hues should clash with energy. Always obey the §1.2 pairing table.\n* **2.4 Expressive motion:** Slight rotations (−1° to 1°) on hover, springy `--ease-standard` transitions, tilted testimonial cards that straighten on hover. Motion is punchy, never floaty.\n* **2.5 What this theme is NOT:** No glassmorphism, no soft drop-shadows, no muted neutrals, no thin hairline borders, no photorealism. If a choice feels safe and subtle, choose the bolder saturated option.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n### 3.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`, `.btn--success`, `.btn--error`, `.is-loading`)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px; Fraunces 700; `--radius-md`; `--brushstroke-border`; background `--surface-2` with `--text-primary`.\n* **Hover:** Background swaps to another saturated hue (base: `--viridian` with dark text; primary: `--magenta` with cream text and `--shadow-sm`), plus `translateY(-2px) rotate(-1deg)`; `cursor: pointer`.\n* **Focus:** `:focus-visible` renders a distinct ring — `outline: 3px solid var(--secondary); outline-offset: 3px` — visible in both themes.\n* **Active\u002FPressed:** `transform: scale(0.97)` (or `translateY(0) rotate(0)`).\n* **Loading (`.is-loading`):** `aria-busy=\"true\"`, interactions disabled, double-clicks prevented in JS; a CSS-only spinner (border-top animation in `currentColor`) replaces the label without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`, no transforms.\n* **Success\u002FError:** `.btn--success` (viridian fill, dark text) and `.btn--error` (magenta fill, cream text) as temporary feedback states — always paired with an icon and `aria-live` text, never color alone.\n* **Destructive:** Define `.btn--danger` (magenta fill, cream text) in the stylesheet, visually distinct in both themes, even if the page contains no destructive action.\n\n### 3.2 Cards (`.card`, `.card--featured`, `.card--skeleton`, `.card--empty`)\n* **Default:** Flex layout, `--surface` background, `--brushstroke-border`, `--radius-lg`, `--shadow-md`, generous `--space-6` padding.\n* **Hover:** `translateY(-2px)` with a slight rotation (−0.5°) and a larger hard shadow offset.\n* **Focus-within:** Border color shifts to `--secondary` when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** Define a shimmer keyframe class with reserved dimensions to prevent layout jumps (part of the system, even if unused on this static page).\n* **Empty state:** Define a fallback layout with a Material icon (e.g., `palette`) and clear guidance text.\n\n### 3.3 Forms & Inputs (`.input-group`, `.input`, `.input-group__error`)\n* **Structure:** Flex column wrapping a visible `\u003Clabel for>`, the input, and a dedicated error-feedback container with reserved `min-height` (no layout jump).\n* **States — all required:** empty, focused (cobalt border + `--shadow-sm` ring), filled, valid (`.is-valid`: viridian border + `check_circle` icon), invalid (`.is-invalid`: magenta border, `aria-invalid=\"true\"`, `error` icon, error message), disabled (`opacity: .5`, `cursor: not-allowed`), read-only (dashed border).\n* **Feedback:** The error\u002Fsuccess container is an `aria-live=\"polite\"` region. Submit flow: JS validates email format → invalid: message appears; valid: button enters `.is-loading` for ~1s → success message (\"You're on the list\") with `check_circle` in `--text-success`. No backend; simulate locally.\n\n### 3.4 FAQ Accordion (`.faq__item`, `.faq__item--open`)\n* Each question is a `\u003Cbutton>` (wrapped in `\u003Ch3>`) with `aria-expanded` and `aria-controls`; the panel has `role=\"region\"` + `aria-labelledby`.\n* Material `expand_more` icon rotates 180° on open, animated with `--transition-normal` `--ease-standard`.\n* Panels animate open\u002Fclosed via CSS (e.g., `grid-template-rows: 0fr → 1fr`). Fully keyboard operable; instant open\u002Fclose under `prefers-reduced-motion`.\n\n### 3.5 Modal \u002F Overlay (conditional)\nNo modal is required by this brief — do not add one unless a section genuinely needs it. If any overlay is implemented, it must have: centered flex container (`align-items: center`), scrim backdrop at `--z-modal` (blur allowed here only), `role=\"dialog\"` + `aria-modal` + labelledby, Material `close` icon button, keyboard focus trapping with focus return, close via `Esc` and scrim click, CSS-animated opening\u002Fopen\u002Fclosing states, and internal loading\u002Fsuccess\u002Ferror states.\n\n---\n\n## 4. PAGE SPECIFICATION — SECTION BY SECTION\n\n### 4.0 Header & Navigation\n* `\u003Cheader>` landmark, sticky, `--surface` background, `--brushstroke-border` bottom, `z-index: var(--z-dropdown)`.\n* `.nav` flex row, `align-items: center`, `justify-between`: brand wordmark (Fraunces 800, one word in `--primary`), anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with saturated hover color and visible focus, the theme toggle (§1.3), and a compact `.btn--primary` CTA.\n* **Mobile:** Links collapse behind a Material `menu` icon button; panel with column links, `aria-expanded`, `Esc` closes, focus returns to the toggle, panel at `--z-dropdown`.\n\n### 4.1 Hero\n* Two-column flex row (stacks to column below `lg`), `align-items: center`, on `--bg-primary`.\n* **Copy side:** `.badge` pill, `\u003Ch1>` in Fraunces 900 with fluid `clamp()` sizing — highlight one phrase with a **flat `--viridian` marker background and dark text** (never gradient text); supporting paragraph in `--text-secondary`; CTA row (`.btn--primary` + `.btn--secondary` anchor); small muted trust line.\n* **Visual side:** CSS-only Fauvist composition, `aria-hidden=\"true\"`, `pointer-events: none`: 3–5 overlapping flat shapes (tilted rounded rectangle, circle, asymmetric-radius blob) filled with orange\u002Fcobalt\u002Fviridian\u002Fmagenta, each with brushstroke border and hard shadow, slight rotations. Static by default; any gentle float animation must be wrapped in a motion-safe media query.\n\n### 4.2 Features (3 cards)\n* Section on a flat `--bg-secondary` field; kicker badge + `\u003Ch2>`.\n* Three `.card` elements in a flex row (column on mobile). Each: 56px icon tile with an arbitrary flat hue (card 1 orange, card 2 cobalt, card 3 viridian — icon color per §1.2 pairing), a Material icon (`brush`, `palette`, `auto_awesome` or similar), `\u003Ch3>`, and two lines of real copy.\n* Card hover and focus-within per §3.2.\n\n### 4.3 How It Works (3 steps)\n* Section on a flat **viridian field** with `#1a1a1a` text (bold Fauvist move; contrast verified).\n* Three steps in a flex row (column on mobile): oversized Fraunces numeral in a flat tile, Material icon, `\u003Ch3>`, description. Step tiles are `--surface` cards with brushstroke borders and cobalt hard shadows.\n* Dashed 3px connector line between steps on desktop; hidden on mobile.\n\n### 4.4 Testimonials\n* Section on a flat **cobalt field** with cream text.\n* Three quote cards (`--surface`, dark text), tilted alternately `rotate(-1deg)` \u002F `rotate(1deg)`, straightening on hover. Each: quote text, flat-color avatar circle containing the person's initials (pairing-correct text color), name, and role. Decorative `format_quote` Material icon allowed.\n\n### 4.5 Pricing (3 tiers)\n* Section on `--bg-primary`; three tiers in a flex row (column on mobile).\n* **Middle tier `.card--featured`:** 3px `--clash-gradient` frame (pseudo-element or border-image), slight scale-up on desktop, `.badge` \"Most popular\" (magenta fill, cream text), `--shadow-md`. Must remain equally distinct in dark mode.\n* Each tier: name, large Fraunces price, billing hint, feature list with Material `check` icons in `--text-success`, and a CTA (featured: `.btn--primary`; others: base `.btn`).\n\n### 4.6 FAQ\n* Section on `--bg-secondary`; content max-width ~760px, centered; `\u003Ch2>` + short intro; at least 5 real Q&A items built per §3.4.\n\n### 4.7 Final CTA\n* Full-bleed flat **magenta field**, cream text, brushstroke top and bottom borders.\n* `\u003Ch2>` display headline, one supporting line, and the email-capture form per §3.3: on desktop a flex row (`align-items: center`) of `.input` + `.btn--primary` (orange fill, dark text — deliberate clash); stacked column on mobile. Full state matrix + `aria-live` feedback required.\n\n### 4.8 Footer with Secondary Links\n* `--footer-bg` field with `--footer-text`; brushstroke top border.\n* Flex row wrap: brand block (wordmark, one-line tagline, social links as Material icon buttons with `aria-label`, 44px targets) + **three secondary link groups** (e.g., Product, Company, Support — 3–4 real-labeled links each; anchor to page sections where applicable).\n* Links: muted cream, hover to `--primary`, visible focus ring. Bottom bar: copyright (fictional brand, current year) and a \"Back to top\" link.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** Fluid sizing, mobile-first breakpoints, zero horizontal overflow at 320px.\n* **Smooth animations:** CSS transitions on every state change using `--transition-fast` \u002F `--transition-normal` and `--ease-standard`. A global `prefers-reduced-motion: reduce` block disables all transforms, rotations, spins, and panel animations.\n* **Accessibility (a11y):** WCAG AA contrast in **both light and dark modes** — validate, don't assume. Never communicate state by color alone (pair with icons\u002Ftext). Semantic HTML5 landmarks (`header`, `nav`, `main`, `footer`, `section` with `aria-labelledby`), a single `\u003Ch1>` in the hero with logical heading order, a skip-to-content link, visible focus everywhere, logical DOM\u002Ffocus order, full keyboard operability (no mouse-only interactions), and `aria-live` regions for all dynamic feedback (form results, theme changes announced where appropriate).\n* **Mandatory visual feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive actions:** `.btn--danger` must be visually distinct in both themes (defined in the system even if unused here).\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** Separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript defer src=\"script.js\">`). No `\u003Cstyle>` blocks in HTML. No inline styles or inline event handlers.\n* **Naming convention:** **BEM only** — `.block__element--modifier` (e.g., `.pricing-card--featured`, `.faq__item--open`). Never mix conventions. JavaScript hooks use `data-*` attributes, not styling classes.\n* **No unrequested placeholders:** All user-facing copy is real, themed English text. Placeholder text is not permitted anywhere on this page.\n* **Definition of Done — self-validate before submitting:**\n  1. Light and dark themes both render correctly; toggle persists across reload; first visit respects `prefers-color-scheme`.\n  2. Contrast spot-checks pass AA in both modes (headline on each colored field, button text on each fill, footer links).\n  3. No horizontal scroll at 320px; all layouts stack cleanly.\n  4. Full keyboard pass: skip link, nav, mobile menu, toggle, FAQ, form, all CTAs.\n  5. `prefers-reduced-motion` disables all animation.\n  6. Every button state in §3.1 exists in the stylesheet; form states in §3.3 all reachable.\n  7. Zero `style=\"...\"` attributes, zero inline handlers, zero inline SVGs, BEM consistent throughout.\n\nGenerate the complete, final code now.\n",1791954984534]