[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-532-Ukiyo-e":3},"# BUILD SPECIFICATION — \"UKIYO-E\" LANDING PAGE\n\n**Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-quality landing page in a single attempt** — no partial deliverables, no TODOs, no truncation. The page promotes a fictional brand, **\"Floating World Press\"** — an online woodblock-print atelier offering courses and limited-edition prints. All user-facing copy must be written in **polished, original English** consistent with the theme.\n\n**Design language (Ukiyo-e, 1603–1868 Edo-period Japan):** Flat fields of warm washi-cream color bounded by **bold ink key-lines** (2.5px solid borders — the woodblock registration line), **hard offset shadows with zero blur** (stacked woodblock impressions), **vermillion seal-stamp (hanko) squares** as recurring accents, **Prussian blue \u002F wave blue** nature motifs (Mt Fuji, Hokusai's Great Wave), **asymmetric balance**, generous **negative space (ma)**, a subtle **paper-grain texture**, and deliberate 1px **\"misregistration\" shifts** on interaction. No soft blurs, no glassmorphism, no gradients between colors — only flat fills, key-lines, and hard shadows.\n\n**Sections required (in order):** Sticky Nav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling must live in `style.css`. **Explicitly forbidden:** any `style=\"...\"` attribute in the HTML.\n* All design properties, layout rules, and states must be targeted via class or ID selectors.\n* HTML must remain clean, semantic, and styling-agnostic — changing the site's look must only require editing `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root` using the block below (extend it, never rename the canonical `--color-*` tokens). The system aliases (`--primary`, `--bg-primary`, etc.) are **mandatory**:\n\n```css\n:root {\n  \u002F* Ukiyo-e light — warm washi paper, sumi ink, Prussian blue, vermillion *\u002F\n  --color-bg: #eee3c8;\n  --color-surface: #f6ecd2;\n  --color-surface-strong: #e6d7ac;\n  --color-border: #1c1a15;\n  --color-text: #1c1a15;\n  --color-text-muted: #4a4736;\n  --color-primary: #1d4e89;\n  --color-accent: #b23a2e;\n  --color-wave: #2f6f8f;\n  --color-success: #3e6b4f;\n  --color-error: #b23a2e;\n\n  \u002F* mandatory system aliases *\u002F\n  --primary: var(--color-primary);\n  --secondary: var(--color-accent);\n  --bg-primary: var(--color-bg);\n  --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text);\n  --text-secondary: var(--color-text-muted);\n  --text-success: var(--color-success);\n  --text-error: var(--color-error);\n  --border-default: var(--color-border);\n  --border-success: var(--color-success);\n  --border-error: var(--color-error);\n\n  \u002F* radius \u002F shadow \u002F spacing \u002F motion \u002F stacking *\u002F\n  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 2px; --radius-pill: 999px;\n  --shadow-sm: 2px 2px 0 rgba(28,26,21,0.15);\n  --shadow-md: 4px 4px 0 rgba(28,26,21,0.18);\n  --shadow-lg: 6px 6px 0 rgba(28,26,21,0.22);\n  --spacing-gap: 16px;\n  --transition-fast: 150ms var(--ease-standard);\n  --transition-normal: 250ms var(--ease-standard);\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n\n  \u002F* type *\u002F\n  --font-base: 'Zen Old Mincho', 'Noto Serif JP', Georgia, serif;\n  --font-display: 'Zen Old Mincho', 'Shippori Mincho', serif;\n\n  \u002F* signature tokens *\u002F\n  --keyline: 2.5px solid var(--color-border);\n  --seal-stamp: var(--color-accent);\n}\n```\n\n* **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforce this in both themes. The light background is `#eee3c8` (never pure white; use `#fefefe` only if a near-white is unavoidable).\n* **Dark palette (mandatory — the source spec does not declare modes; you must design and contrast-validate both light and dark before delivery):** a \"night print\" palette of deep sumi-ink indigo with an inverted cream key-line. Apply the exact block below under **both** a `.dark` class selector and `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }`:\n\n```css\n.dark {\n  --color-bg: #14181d;        \u002F* deep sumi-ink indigo *\u002F\n  --color-surface: #1c222a;\n  --color-surface-strong: #262e38;\n  --color-border: #e8ddc2;    \u002F* inverted cream key-line *\u002F\n  --color-text: #eee3c8;\n  --color-text-muted: #b3a88e;\n  --color-primary: #4a7fb5;   \u002F* lifted Prussian blue *\u002F\n  --color-accent: #d95c4a;    \u002F* lifted vermillion *\u002F\n  --color-wave: #5f9cba;\n  --color-success: #7fae8a;\n  --color-error: #d95c4a;\n  --shadow-sm: 2px 2px 0 rgba(0,0,0,0.45);\n  --shadow-md: 4px 4px 0 rgba(0,0,0,0.5);\n  --shadow-lg: 6px 6px 0 rgba(0,0,0,0.55);\n}\n```\n\n* Verify every text\u002Fsurface combination meets WCAG AA (4.5:1 body text, 3:1 large text and UI borders) in **both** modes; adjust token values upward if any pair fails.\n\n**1.3 Mandatory Dark Mode Support**\n* Dark mode must be fully functional: tokens switch via `.dark` \u002F media query with **no HTML restructuring**.\n* Provide a **visible theme toggle** in the nav (Google Material Symbol `dark_mode` \u002F `light_mode`) with correct `aria-pressed` and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n* Persist the user's choice in `localStorage` (key `theme`); on return visits apply it. On first visit, fall back to `prefers-color-scheme`. The JS must always set one of the classes `.dark` \u002F `.light` so the media query (guarded with `:not(.light)`) never fights the explicit choice.\n* First paint must be correct without JS (the media query handles it); a brief transition flip on a stored-choice mismatch is acceptable — **no inline scripts are permitted** to pre-paint.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox. **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., stretch-aligned card content columns).\n* Mobile-first: rows convert to columns on small viewports; **no horizontal scrolling at any width**; use `clamp()` for fluid typography between the `--text-*` scale steps.\n\n**1.5 Framework Choice**\n* Do **not** add a Tailwind build step. Write clean hand-authored CSS in `style.css`, organized with native CSS `@layer` in this order: `tokens` → `base` → `layout` → `components` → `sections` → `utilities`. All component styling uses the reusable class names defined below (`.nav`, `.btn`, `.card`, `.input`, `.badge`) — never one-off utility soup for theme styling.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via `\u003Clink>` (with `preconnect`): **Zen Old Mincho** (400–900), **Noto Serif JP** (400, 700), and **Shippori Mincho** (500, 800). Bind them to `--font-base` \u002F `--font-display`. Body text uses `--font-base`; all display headings use `--font-display` at heavy weights.\n* Icons: **Google Material Symbols Rounded** only. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji-as-icons. Decorative theme art (waves, Mt Fuji, wave dividers, paper grain) must be built **purely in CSS** (gradients, `clip-path`, borders, pseudo-elements) — no SVG assets.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; flat fill (`--color-surface`), `border: var(--keyline)`, `box-shadow: var(--shadow-sm)`, `cursor: pointer`.\n* **Hover:** `transform: translate(-1px, -1px)` with `--shadow-md` (the print \"lifts off the page\").\n* **Focus:** distinct `:focus-visible` ring using `outline: 2px solid var(--color-primary); outline-offset: 3px`.\n* **Active\u002FPressed:** `transform: translate(1px, 1px)` with `box-shadow: none` (the block is \"pressed into the paper\").\n* **Loading (`.btn--loading`, set `aria-busy=\"true\"`):** disables pointer events to prevent double-clicks, keeps exact button dimensions, and renders a CSS spinner — a small rotating vermillion seal-square (`@keyframes` rotation) paired with the text \"Working…\". No layout shift.\n* **Disabled (`[disabled]`):** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`, no transforms.\n* **Success\u002FError:** `.btn--success` \u002F `.btn--error` temporary feedback states driven by `--text-success` \u002F `--text-error` tokens (border + icon swap, never color alone).\n* **Variants:** `.btn--primary` (Prussian blue fill, cream `#f6ecd2` text), `.btn--accent` (vermillion fill, cream text), `.btn--ghost` (transparent, key-line appears on hover), `.btn--danger` (error-token fill, visually distinct in **both** light and dark themes).\n\n**2.2 Card Component (`.card`)**\n* **Default:** flat `--color-surface` fill, `border: var(--keyline)`, `box-shadow: var(--shadow-md)`, `border-radius: var(--radius-md)`, and a 16×16px vermillion seal-stamp via `.card::before` in the top-right corner.\n* **Hover:** elevation shift to `--shadow-lg` plus `transform: translateY(-2px)` **and** a signature 1px \"misregistration\" shift — the inner fill (a pseudo-element inset by the key-line) offsets 1px diagonally, echoing woodblock registration drift.\n* **Focus-within:** when a child link\u002Fbutton receives focus, the card border shifts to `--color-primary`.\n* **Loading (skeleton):** define `.card--skeleton` with a shimmer `@keyframes` animation over muted placeholder blocks sized to the final content — no layout jump when content swaps in.\n* **Empty state:** define `.empty-state` (centered Material Symbol, short guidance text) as part of the card system.\n\n**2.3 Form & Input Requirements**\n* The Final CTA contains an email-capture form. Structure: a flex `.input-group` wrapping a `\u003Clabel>`, an `.input` field, and a dedicated error-feedback container.\n* **States (all CSS-class driven):** Empty, Focused (key-line ring via `box-shadow` using `--color-primary`), Filled, Valid (success border + `check_circle` icon), Invalid (error border, `--text-error` message text + `error` icon, message announced via `aria-live=\"polite\"`), Disabled, Read-only.\n* `.input` base: full width, `--color-surface-strong` fill, `border: var(--keyline)`, placeholder in `--color-text-muted`. Never communicate a state by color alone — always pair color with an icon and\u002For text.\n\n**2.4 Modal \u002F Overlay Requirements (applies to the mobile navigation overlay)**\n* **States:** Opening, Open, Closing — all animated via CSS transitions (`--transition-normal`).\n* **UX:** fixed full-screen overlay with a dimmed backdrop (`rgba` of `--color-border`), stacked at `--z-modal`, centered flex container (`align-items: center`), a close button using Material Symbol `close`, **keyboard focus trapping**, body scroll lock, close via `Esc` and via backdrop click. Use `role=\"dialog\"`, `aria-modal=\"true\"`, and a labelled title.\n* **Toast (`.toast`):** fixed bottom, stacked at `--z-toast`, `aria-live=\"polite\"`, success\u002Ferror variants, auto-dismiss after ~4s, close button with Material Symbol `close`, slide\u002Ffade CSS transitions.\n\n---\n\n## 3. PAGE COMPOSITION — SECTION-BY-SECTION SPEC\n\n**3.0 Global Shell**\n* Skip-to-content link (visually hidden until focused), `\u003Cheader>` with sticky `.nav` (brand mark = wordmark + vermillion seal square via `.nav::after`, anchor links, theme toggle, primary CTA, hamburger `menu` icon below 768px), `\u003Cmain>` with one `\u003Csection>` per required block (each with an `id`, a heading, and `aria-labelledby`), and `\u003Cfooter>`.\n* Between major sections, render **wave divider bands**: CSS-only scallop patterns (repeating radial-gradients in `--color-wave` \u002F `--color-primary` on `--color-bg`).\n* Apply a global **paper-grain texture** via a fixed `body::after` overlay (layered repeating gradients at ≤4% opacity, `pointer-events: none`) that works in both light and dark modes without harming contrast.\n\n**3.1 Hero**\n* Asymmetric 60\u002F40 two-column flex (stacks on mobile). Left: a `.badge` (\"Edo-period craft, modern studio\"), display headline in `--font-display` up to `--text-5xl` (fluid via `clamp()`), muted subcopy, and two CTAs (`.btn--primary` \"Browse the Collection\", `.btn--ghost` \"Watch the Process\"). Below, an asymmetric 3-figure stat row. Exploit negative space — do not fill every pixel.\n* Right: **CSS-only art** — a Mt Fuji silhouette (Prussian blue `clip-path` polygon with a cream snow cap) rising over layered wave scallops referencing the Great Wave. Mark it `aria-hidden=\"true\"`; it must never capture focus or cause overflow.\n\n**3.2 Features (3 cards)**\n* Section heading + short intro, then three `.card` blocks (Material Symbols: `brush`, `landscape`, `print` — or equally thematic choices), each with title and 2–3 lines of copy. On desktop, stagger the middle card slightly (`translateY`) for asymmetric balance. Cards receive full hover\u002Ffocus-within behavior per 2.2.\n\n**3.3 How It Works (3 steps)**\n* Three steps in a flex row on desktop (column on mobile), connected by a CSS wave\u002Fdashed line. Each step: a vermillion seal-stamp square containing a kanji numeral (`一`, `二`, `三` — decorative, `aria-hidden=\"true\"`, with a visually-hidden \"Step 1\u002F2\u002F3\" text), a step title, and copy.\n\n**3.4 Testimonials**\n* Three quote cards (`.card`) with a `format_quote` Material Symbol, quote, name, and role. Offset one card for asymmetric balance. On page load, `script.js` shows `.card--skeleton` shimmer for ~900ms, then swaps in the real content with a fade (skipped entirely under `prefers-reduced-motion`).\n\n**3.5 Pricing (3 tiers)**\n* Three pricing cards; the middle \"Studio\" tier is featured: vermillion seal badge \"Most Popular\", `--shadow-lg`, slight scale\u002Foffset, `.btn--primary` CTA while flanking tiers use `.btn--ghost`. Each tier lists price, 4–5 features with `check_circle` icons, and a CTA with full button states per 2.1. Add a short footnote under the row.\n\n**3.6 FAQ**\n* 5–6 questions as a button-driven accordion: each trigger is a `\u003Cbutton>` with `aria-expanded` and `aria-controls`, chevron `expand_more` icon rotating 180° on open, panel animated via CSS (`grid-template-rows: 0fr → 1fr` or equivalent). Fully keyboard operable; no mouse-only interactions.\n\n**3.7 Final CTA**\n* Full-width band with a CSS wave-motif background, display headline, supporting line, and the email-capture form per 2.3. Submit flow: button enters `.btn--loading` → on valid email, `.btn--success` + toast \"You're on the list\" (`aria-live`); on invalid, inline error message + `.input` invalid state.\n\n**3.8 Footer**\n* Brand block (wordmark + seal square), 3 columns of secondary links (e.g., Atelier\u002FAbout, Process, Shipping & Care, Contact, Privacy, Terms — in-page `#` anchors are acceptable), small-print copyright line, and a back-to-top link. All links must be real, styled, focusable elements.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint, touch targets ≥44×44px.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; **respect `prefers-reduced-motion`** — disable transforms, shimmer, spinner rotation, and accordion\u002Ftoast motion.\n* **Accessibility (a11y):** AA contrast in both light and dark modes (validate before delivery); semantic HTML5 landmarks; correct ARIA roles\u002Flabels on the toggle, accordion, overlay, and toast; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, loading, and toasts; never rely on color alone.\n* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.\n* **Destructive actions:** any `.btn--danger` must be visually distinct in both themes.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, and `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference — no inline script blocks. Google Fonts and Material Symbols `\u003Clink>` tags in `\u003Chead>`.\n* **Naming:** strict **BEM** (`block__element--modifier`) for every custom class — never mix conventions.\n* **Copy:** real, polished English copy throughout — **no lorem ipsum**, no unrequested placeholders, no TODO comments, no console errors.\n* Deliver all three files complete on the first attempt.\n",1791954988684]