[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-395-Anthropomorphic":3},"# BUILD SPECIFICATION — \"Anthropomorphic\" Storybook Landing Page (Coding Agent Prompt)\n\n**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page on the first attempt. Every rule below is mandatory unless explicitly marked optional.\n\n**The Product:** Invent one coherent anthropomorphic character brand for the entire page (e.g., a woodland goods company or storybook club run by animal characters). All user-facing copy must be written in **English**, in a whimsical, charming, storybook voice, with real content — no lorem ipsum.\n\n**Required Sections:** Sticky Header, Hero, Features (3 cards), How It Works (3 steps), Testimonials (3 quotes), Pricing (3 tiers), FAQ (accordion), Final CTA (email capture), Footer with secondary links.\n\n---\n\n## 1. Architecture Rules (Mandatory)\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute, inline `\u003Cstyle>` blocks, and presentation attributes are **forbidden**.\n- Target everything via class\u002FID selectors. HTML must remain semantic (`header`, `nav`, `main`, `section`, `article`, `footer`) and visually agnostic — re-skinning the site must only require editing `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root` and the dark theme class. Use this exact scaffold (you may extend it, never remove from it):\n\n```css\n:root {\n  \u002F* Colors — Light \"Storybook Morning\" theme *\u002F\n  --primary: #E8A840;          \u002F* Warm Honey — borders, fills, accents *\u002F\n  --secondary: #87CEEB;        \u002F* Sky Blue — focus rings, secondary accents *\u002F\n  --bg-primary: #FFF5E1;       \u002F* Soft Cream — page background *\u002F\n  --bg-secondary: #FEFEFE;      \u002F* card surfaces (never #ffffff) *\u002F\n  --text-primary: #5C3D2E;     \u002F* Forest Brown — headings & body *\u002F\n  --text-secondary: #8A6D57;    \u002F* muted brown *\u002F\n  --text-success: #6B8E4E;      \u002F* Leaf Green *\u002F\n  --text-error: #C7442E;        \u002F* warm brick red, harmonized with Sunset Orange *\u002F\n  --border-default: #E8A840;\n  --border-error: #C7442E;\n  --border-success: #6B8E4E;\n\n  \u002F* Secondary palette accents (rotate across cards\u002Fsteps\u002Favatars) *\u002F\n  --accent-pink: #F5C6C6;\n  --accent-green: #6B8E4E;\n  --accent-orange: #E87040;\n  --accent-lavender: #B8A9D4;\n\n  \u002F* Shape & depth *\u002F\n  --radius-sm: 20px;\n  --radius-md: 24px;\n  --radius-lg: 30px;\n  --shadow-sm: 4px 4px 0 rgba(92, 61, 46, 0.15);\n  --shadow-md: 6px 6px 0 rgba(92, 61, 46, 0.22);\n\n  \u002F* Spacing, motion, layering, type *\u002F\n  --spacing-gap: 1.5rem;\n  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);\n  --transition-fast: 150ms ease-out;\n  --transition-normal: 300ms var(--ease-standard);\n  --z-dropdown: 1000;\n  --z-modal: 2000;\n  --z-toast: 3000;\n  --font-base: 'Nunito', sans-serif;\n}\n\n.dark {\n  --bg-primary: #2B1F17;\n  --bg-secondary: #3A2A1F;\n  --text-primary: #FFF5E1;\n  --text-secondary: #D9C3AC;\n  --text-success: #9BC178;\n  --text-error: #F2937B;\n  --border-success: #9BC178;\n  --border-error: #F2937B;\n  --shadow-sm: 4px 4px 0 rgba(0, 0, 0, 0.35);\n  --shadow-md: 6px 6px 0 rgba(0, 0, 0, 0.45);\n}\n```\n\n- **Contrast pairing law:** every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in **both** themes. Warm Honey (`#E8A840`) must never be used as text on cream backgrounds (fails contrast); it is reserved for borders, fills, and accents. Forest Brown text on Honey fills passes (≈4.7:1); verify ≥ 4.5:1 any time you adjust a value.\n- Never use `#ffffff`; near-white surfaces use `#FEFEFE`.\n\n**1.3 Mandatory Dark Mode**\n- Dark tokens must be defined under a `.dark` class selector **and** `@media (prefers-color-scheme: dark)` (guard the media query with `:not(.light)` so the explicit class always wins).\n- Provide a visible theme toggle in the header: an icon button using Material Symbols `light_mode` \u002F `dark_mode`, with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\") and icon swap.\n- Persist the choice in `localStorage` (key `theme`, values `light`\u002F`dark`); on first visit fall back to `prefers-color-scheme`; apply the theme **before first paint** to prevent flash-of-wrong-theme; announce the change through a visually-hidden `aria-live` region.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container **defaults to `align-items: center`** unless there is an explicitly justified exception (e.g., multi-line text columns inside cards may use `flex-start` — document each exception with a CSS comment).\n- Mobile-first: multi-column rows collapse to columns below 768px; no horizontal scrolling at any viewport (test down to 320px); fluid `clamp()` typography and spacing.\n\n**1.5 CSS Approach**\n- Use handcrafted, framework-free custom CSS in `style.css` — the hand-drawn storybook aesthetic requires bespoke values utilities cannot express. If you opt for Tailwind instead, every utility must map back to the tokens above via `@layer`\u002F`@apply` and generic component classes (`.btn`, `.card`, `.input-group`) — no raw arbitrary values.\n\n**1.6 Typography & Icons — Google Only**\n- Text: load **Nunito** (weights 400, 600, 700, 800, 900) via Google Fonts `\u003Clink>` in `\u003Chead>`, bound to `--font-base`. Headings use weight 800–900 for the rounded, friendly storybook voice.\n- Icons: **Google Material Symbols Rounded** (FILL 1 for character accents) via Google Fonts. Inline SVGs, local icon files, and emoji-as-icons are **strictly forbidden**.\n\n---\n\n## 2. Component Specifications\n\n**2.1 Buttons — `.btn` + BEM modifiers**\n- Base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, `border-radius: var(--radius-md)`, Nunito 700, `transition: transform var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-fast)`.\n- Variants: `.btn--primary` (Honey fill, Forest Brown text, 2px border, `--shadow-sm`), `.btn--secondary` (cream fill, Honey border), `.btn--ghost`, `.btn--danger` (brick\u002Fcoral — visually distinct in both themes).\n- **Hover:** sticker-lift — `translateY(-2px)` with shadow growing to `--shadow-md`, `cursor: pointer`.\n- **Focus-visible:** `outline: 3px solid var(--secondary); outline-offset: 2px` — never remove or replace with nothing.\n- **Active\u002Fpressed:** `transform: scale(0.97)`.\n- **Loading** (`.btn--loading` \u002F `aria-busy=\"true\"`): `pointer-events: none`, prevents double submits, CSS spinner (rotating border circle in the text color) swaps in via opacity; button dimensions must not change.\n- **Disabled:** `opacity: 0.5; filter: grayscale(0.5); cursor: not-allowed;` no hover transform.\n- **Success\u002FError:** `.btn--success`, `.btn--error` — temporary feedback states swapping in `check_circle` \u002F `error` Material Symbols plus token colors; used for form submission feedback.\n\n**2.2 Cards — `.card`**\n- Base: `background: var(--bg-secondary); border: 2px solid var(--border-default); box-shadow: var(--shadow-sm);` flex column with `gap: var(--spacing-gap)`; use **asymmetric border-radius** for the hand-drawn feel (e.g., `24px 28px 22px 26px`).\n- **Hover:** `translateY(-2px)` (up to `-4px` with a slight `rotate(-0.5deg)` for this theme) + `--shadow-md`, bouncy ease.\n- **Focus-within:** border shifts to `var(--secondary)` when a child link\u002Fbutton receives focus.\n- **Loading (`.card--skeleton`):** shimmer gradient animation that causes zero layout shift when real content swaps in.\n- **Empty state (`.card--empty`):** Material Symbol + clear guidance text fallback.\n\n**2.3 Forms & Inputs — `.input-group`**\n- Structure: flex column wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a dedicated error `\u003Cp>` wired via `aria-describedby`; error container has `aria-live=\"polite\"`.\n- Style every state in CSS: empty, `:focus` (Sky Blue ring), filled, valid (`.is-valid` — success border + `check_circle` icon), invalid (`.is-invalid` — error border, error text, `error` icon; never color alone — icon + message), `:disabled`, `[readonly]`.\n- Inputs: `border-radius: var(--radius-sm)`, 2px borders, minimum 44px height.\n\n**2.4 Modal — Pricing plan details**\n- Each pricing tier includes a \"View details\" trigger that opens a storybook modal.\n- Overlay: fixed, `display: flex; align-items: center; justify-content: center;`, `background: rgba(92, 61, 46, 0.5)`, `z-index: var(--z-modal)`.\n- Dialog: `--bg-secondary`, asymmetric `--radius-lg`, 2px Honey border, `--shadow-md`; entrance animates `scale(0.9) → 1` with the bouncy ease; closing reverses.\n- States: opening, open, `.modal--loading` (spinner), success\u002Ferror, closing — all CSS-transitioned.\n- UX: close button with Material Symbol `close` (44px target), `Esc` closes, overlay click closes, keyboard focus is trapped inside while open, focus returns to the trigger on close; `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`.\n\n**2.5 FAQ Accordion**\n- Button-per-question pattern: `aria-expanded` + `aria-controls`; answer region with `role=\"region\"`.\n- Chevron Material Symbol rotates 180° on open; panel height animates in pure CSS (e.g., `grid-template-rows: 0fr → 1fr` technique); fully keyboard operable.\n\n**2.6 Header & Mobile Menu**\n- Sticky header: translucent `--bg-primary` + `backdrop-filter: blur(8px)`, 2px Honey bottom border, flex row with `align-items: center`.\n- Contains: brand mark (Material Symbol in a Honey circle + brand name), anchor navigation, theme toggle (per 1.3), primary CTA.\n- Mobile: nav collapses behind a hamburger (`menu` \u002F `close` symbols, `aria-expanded`, panel layered at `--z-dropdown`); closes on link click and `Esc`.\n- Apply `scroll-margin-top` to sections equal to header height; `scroll-behavior: smooth` on `html` (disabled under reduced motion).\n\n---\n\n## 3. Core UX & Micro-Interaction Rules\n\n**3.1 Responsive by Default** — fluid sizing, wrapping flex rows, zero horizontal overflow at any breakpoint.\n\n**3.2 Smooth Animations** — every state change transitions with `var(--transition-normal)`; entrance animations are staggered and bouncy; under `prefers-reduced-motion: reduce`, remove all transforms, floats, and bounces (opacity-only or none).\n\n**3.3 Accessibility** — skip link; landmark elements; logical `h1 → h2 → h3` order; full keyboard operability (no mouse-only interactions); visible focus everywhere; ≥ 4.5:1 contrast in both themes; state is never communicated by color alone; `aria-live` regions for form results and theme changes.\n\n**3.4 Mandatory Visual Feedback** — every click, hover, and submission triggers a visible state change.\n\n**3.5 Distinct\u002FDestructive Actions** — `.btn--danger` must be visually distinct in both light and dark themes.\n\n---\n\n## 4. Deliverables & Output Format\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. Only one `\u003Cscript src=\"script.js\" defer>` — no inline script blocks, no inline styles.\n- **Naming:** BEM only (`.card`, `.card__title`, `.card--featured`) — one consistent convention, never mixed.\n- **Copy:** real, whimsical English copy throughout; placeholders only where content was genuinely left unspecified.\n- **Head:** Google Fonts links for Nunito and Material Symbols Rounded.\n\n---\n\n## 5. Theme Direction — \"Anthropomorphic\"\n\n**5.1 Mood** — Whimsical, character-driven, playful, vintage (Victorian illustration → modern mascot design). The page should read as a storybook world where animal characters run the brand: charming, relatable, warm.\n\n**5.2 Color Usage** — Cream page, Forest Brown text, Honey borders\u002Faccents; rotate the secondary palette (Sky Blue, Blush Pink, Leaf Green, Sunset Orange, Lavender) across feature cards, step badges, and testimonial avatars. The footer inverts to a Forest Brown surface with cream text in light mode.\n\n**5.3 Signature Effects (all CSS-only)**\n- **Hand-drawn borders:** 2px solid Honey plus asymmetric border-radius (`24px 28px 22px 26px` style).\n- **Sticker shadows:** hard offset `4px 4px 0` — never blurry.\n- **Bouncy motion:** `cubic-bezier(0.34, 1.56, 0.64, 1)` on hovers, entrances, and the modal.\n- **Storybook transitions:** scalloped section edges built from `repeating radial-gradient` dividers; a dashed \"forest path\" connecting the How-It-Works steps.\n- **Warm gradients:** hero and Final CTA use warm gradient backgrounds (honey-tinted cream → soft peach in light mode; deep brown → warm umber in dark mode).\n- **Gentle float:** looping `translateY(±6px)` animation on hero mascot elements.\n\n**5.4 Characters Without SVG** — build mascots purely from CSS shapes + Material Symbols: rounded \"face\" circles with `pets`, `cruelty_free`, `flutter_dash`, or `sentiment_satisfied` symbols; ear shapes via pseudo-element circles; floating leaf\u002Fstar\u002Fheart symbol badges. No images, no SVG.\n\n---\n\n## 6. Section-by-Section Requirements\n\n**6.1 Header** — per 2.6.\n\n**6.2 Hero** — two-column flex (copy left, mascot scene right; stacked on mobile). Eyebrow badge, `h1` (Nunito 900), subcopy, `.btn--primary` + `.btn--secondary`, and a trust row (paw avatars + \"Loved by 10,000 woodland friends\" + filled `star` symbols). Mascot scene: one large asymmetric-radius card containing the CSS character composition plus 2–3 floating symbol badges. Warm gradient background with a scalloped bottom edge; staggered bounce-in entrance.\n\n**6.3 Features** — section heading (eyebrow + `h2` + copy), then three `.card`s in a wrapping flex row (`flex: 1 1 280px`), each with a unique accent (Sky Blue \u002F Blush Pink \u002F Leaf Green), a Material Symbol in an accent badge, an `h3`, and 2–3 lines of copy. Hover per 2.2.\n\n**6.4 How It Works** — three steps in a flex row (column on mobile): numbered Honey badges (1\u002F2\u002F3 with brown numerals), Material Symbol, `h3`, copy — connected by a 3px dashed Honey path (horizontal on desktop, vertical on mobile).\n\n**6.5 Testimonials** — three quote cards: filled `star` rating, quote, avatar (accent-colored circle + character symbol or initials), character name and role (e.g., \"Barnaby the Badger — Village Baker\"). On first load the cards render in `.card--skeleton` shimmer briefly, then populate — demonstrating the 2.2 skeleton state with zero layout shift.\n\n**6.6 Pricing** — three tier cards: \"Acorn\" (starter), \"Honeycomb\" (featured: thicker Honey border, \"Most Popular\" ribbon badge, `--shadow-md`, slight desktop scale), \"Grand Oak\" (premium). Each contains tier name, price, tagline, a feature list with `check_circle` symbols, a CTA (featured = `.btn--primary`, others = `.btn--secondary`), and a \"View details\" trigger opening the 2.4 modal. Row → column on mobile.\n\n**6.7 FAQ** — five to six storybook-toned Q&As in a narrow (max-width ~760px) container, accordion per 2.5.\n\n**6.8 Final CTA** — full-width warm gradient banner with scalloped top and bottom edges, decorative corner symbols, `h2`, copy, and an email-capture `.input-group` + `.btn--primary`: on submit the button enters loading (simulated ~800ms), then success (green + `check_circle` + aria-live \"Welcome to the club!\") or error for invalid email (per 2.3). Microcopy: \"No spam — only postcards.\"\n\n**6.9 Footer** — Forest Brown surface (light mode) \u002F elevated brown (dark mode) with cream text. Brand + tagline, three secondary link columns (Company: About, Careers, Contact; Resources: Help Center, Storybook, Community; Legal: Privacy, Terms), social icon buttons (Material Symbols), and a copyright line with JS-injected year.\n\n---\n\n## 7. JavaScript Behavior (`script.js` only)\n\n- Theme init\u002Ftoggle\u002Fpersistence per 1.3, applied pre-paint.\n- Mobile menu ARIA toggle per 2.6.\n- FAQ accordion ARIA per 2.5.\n- Modal manager per 2.4 (open\u002Fclose, focus trap, `Esc`, overlay click, focus return).\n- Newsletter validation + simulated submit with loading\u002Fsuccess\u002Ferror states and `aria-live` announcements per 2.3 \u002F 6.8.\n- Testimonial skeleton → content reveal per 6.5.\n- Footer year injection.\n- JS never writes inline styles — all state changes are class toggles that `style.css` already styles.\n\n---\n\n## 8. Definition of Done\n\nZero inline styles\u002Fscripts; BEM throughout; both themes pass contrast; a keyboard-only walkthrough works end to end (nav → FAQ → pricing modal → form); `prefers-reduced-motion` respected; no horizontal scroll from 320px up; all nine sections present with real, whimsical English copy.\n",1791954986153]