[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-034-Claymation-3D-Illustration":3},"# SYSTEM PROMPT — \"Claymates\" Claymation 3D Illustration Landing Page (Single-Attempt Full Build)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-ready landing page in one single response** — every file fully coded, no snippets, no TODOs, no clarifying questions. The code must run by simply opening `index.html`.\n\n---\n\n## 0. PROJECT BRIEF\n\n- **Theme:** Claymation 3D Illustration — whimsical, approachable, warm. **Era:** Digital Craft. **Output category:** Playful & Youth.\n- **Style keywords:** clay, claymation, 3d, plasticine, soft, rounded, cute, handmade, stop-motion aesthetic, soft matte clay, surface imperfections, soft global illumination, button embellishments, speech bubbles.\n- **Fictional product:** Invent ONE coherent fictional product (suggested: **\"Claymates\"** — a friendly app for sculpting and animating little clay stories) and write ALL copy around it. Tone: playful, youthful, warm, encouraging. All user-facing copy in **English**.\n- **Sections (in this order):** Sticky Header\u002FNav → 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 lives in `style.css`. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n- All design properties, layout rules, and states are applied via class\u002FID selectors only.\n- HTML must remain clean, semantic, and styling-agnostic — changing the look must never require markup edits.\n\n**1.2 CSS Variables & Theme Tokens (define in `:root`)**\n- **Colors:** `--primary: #FF8A5B` (clay orange — all primary actions), `--secondary: #FFE082` (soft yellow), `--bg-primary: #AEE2F6` (sky-blue page background — the page must **never** default to pure white), `--bg-secondary: #FEFEFE` (cloud-white surfaces; per the no-pure-white rule, implement the palette's \"Cloud White #FFFFFF\" as `#FEFEFE` for every surface\u002Fbackground — `#FFFFFF` may never appear as a background), `--text-primary: #4A3B32` (warm brown), `--text-secondary: #6E5D51`, `--text-success: #4E7B34` (darkened, contrast-safe green), `--text-error: #C24C3C` (warm clay red), `--border-default: rgba(74,59,50,0.15)`, `--border-error`, `--border-success`, plus `--accent-grass: #AED581` (decorative only).\n- **Contrast pairing (mandatory in every theme):** light background ↔ dark text; dark background ↔ light text. `#FF8A5B` buttons must use `#4A3B32` text — never white-on-orange. `#FFE082` and `#AED581` are surface\u002Fdecoration colors only, never body-text colors.\n- **Radius & shadows:** `--radius-sm: 12px`, `--radius-md: 18px`, `--radius-lg: 25px`, `--shadow-sm: 3px 3px 6px rgba(0,0,0,0.15)`, `--shadow-md: 5px 5px 10px rgba(0,0,0,0.2)`.\n- **Spacing & motion:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4,0,0.2,1)`, optional `--ease-squish: cubic-bezier(0.34,1.56,0.64,1)`.\n- **Stacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` (a `--z-header` token may be added for the sticky nav).\n\n**1.3 Mandatory Dark Mode Support**\n- Define a complete dark token set under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class. Provide a visible toggle (Material Symbols sun\u002Fmoon) with correct `aria-pressed`\u002F`aria-label`, persisted via `localStorage`.\n- The dark palette must be a warm **\"Moonlit Clay\"** variant — deep plum-brown backgrounds (e.g., `--bg-primary: #2E2533`, `--bg-secondary: #3B3040`), warm cream text (e.g., `--text-primary: #F6EBDD`), retained `#FF8A5B` accent. **No neutral-gray dark mode** — it must preserve the claymation mood and pass 4.5:1 contrast.\n- **Exception (user spec: \"Light: Full \u002F Dark: No\"):** the site must default to **light mode on first visit** (overriding the `prefers-color-scheme` fallback); dark mode remains fully implemented and reachable only via the toggle.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- Mobile-first: rows collapse to columns below ~768px, fluid type via `clamp()`, **zero horizontal scrolling** at any viewport width.\n\n**1.5 Framework Default**\n- Use Tailwind CSS via CDN for **structural utilities only** (flex\u002Fgrid\u002Fspacing\u002Fresponsive). Every color, radius, shadow, and font must come from the CSS variables above, applied through semantic component classes (`.btn`, `.card`, `.input-group`) defined in `style.css`. No hardcoded hex values in markup or Tailwind arbitrary values.\n\n**1.6 Typography & Icons (Google Only — Mandatory)**\n- Load **Google Fonts**: `Fredoka One` (display\u002Fheadings, per spec `font-family: 'Fredoka One', cursive`) and `Fredoka` (body, weights 400–600, for long-copy readability). Bind via `--font-display` and `--font-base`.\n- Icons: **Material Symbols Rounded** exclusively. Inline SVGs, local icon files, and emoji-as-icons are **forbidden**.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn` + variants)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, `--radius-lg` with slightly irregular values (e.g., `25px 27px 23px 28px`) for a handmade feel, clay shadow `--shadow-md`, subtle inset top highlight (`inset 0 2px 0 rgba(255,255,255,0.35)`) for soft global illumination.\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`. **Focus-visible:** distinct ring from `--primary`, visible in both themes. **Active:** clay-squish `transform: scale(0.94)` with `--ease-squish`.\n- **Loading (`.is-loading`):** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback driven by `--text-success`\u002F`--text-error`, always paired with an icon and an `aria-live` announcement — never color-only.\n- **Variants:** `.btn--primary` (orange\u002Fbrown text), `.btn--secondary` (soft yellow\u002Fbrown text), `.btn--ghost` (transparent, brown border), `.btn--danger` (visually distinct warm red in both themes).\n\n**2.2 Card Component (`.card`)**\n- **Default:** flexible Flexbox layout, `--bg-secondary`, 2px `--border-default`, `--radius-lg`, `--shadow-md`.\n- **Hover:** `transform: translateY(-2px)` + shadow growth (feature\u002Fpricing cards). **Focus-within:** border highlights in `--primary` when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** define a `.card--skeleton` shimmer keyframe that preserves layout. **Empty state:** define a fallback pattern with a Material Symbol and guidance text.\n\n**2.3 Form & Input Requirements (`.input-group`)**\n- Structure: flex container wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error-feedback element (`aria-describedby` \u002F `aria-live`).\n- **States:** empty, focused (ring), filled, valid (success border + check icon), invalid (error border + icon + message), disabled, read-only.\n- The Final CTA email form must validate on submit, show inline errors, enter a loading state, and morph to success with a toast.\n\n**2.4 Accordion (FAQ) & Modal**\n- **FAQ:** `\u003Cbutton>` triggers with `aria-expanded` + `aria-controls`; panels animate via CSS `grid-template-rows: 0fr → 1fr` (no JS height math); rotating chevron Material Symbol; fully keyboard operable.\n- **Modal:** not required by the section list; if any dialog is introduced, it must use a backdrop, centered flex container, `Esc`\u002Foverlay-click close, focus trapping, CSS-animated open\u002Fclose, and `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES (Claymation Motion Language)\n\n- **Responsive by default;** no horizontal overflow at any breakpoint.\n- **State transitions** use `var(--transition-normal)` and `--ease-standard`.\n- **Stop-motion charm:** idle\u002Fdecorative animations (mascot bob, drifting clouds, badge wiggle) may use `steps()` timing for a stop-motion feel — keep them subtle.\n- **Squish physics:** buttons and cards compress on press with a bouncy ease, like real clay.\n- **`prefers-reduced-motion`:** disable all decorative\u002Fstepped\u002Fsquish animations; keep opacity-only fallbacks.\n- **Accessibility:** semantic landmarks (`header\u002Fnav\u002Fmain\u002Fsection\u002Ffooter`), logical `h1→h3` hierarchy, skip link, visible focus everywhere, ≥4.5:1 body-text contrast in **both** themes, never color-only state, `aria-live` regions for form feedback and toasts, full keyboard operability.\n- **Mandatory visual feedback** on every click, hover, and submission.\n- **Pure-CSS clay visual language (no images allowed):** matte surfaces (soft radial gradients for global illumination, inset highlights — no gloss), irregular border-radii, thumbprint dents via inset shadows, subtle surface imperfection via layered `repeating-radial-gradient` noise, speech-bubble tails via pseudo-elements, and a hero clay scene (sun, clouds, mascot, grass hill in `--accent-grass`) built from layered CSS shapes and pseudo-elements only.\n\n---\n\n## 4. PAGE SECTIONS & CONTENT REQUIREMENTS\n\n1. **Header (sticky):** clay-blob logo + wordmark, anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, CTA button; accessible hamburger menu below 768px (`aria-expanded`, `--z-dropdown`); smooth-scroll anchors.\n2. **Hero:** `h1` headline, subhead, primary + secondary CTA, animated CSS clay scene per Section 3.\n3. **Features:** 3 `.card` blocks, each with a clay icon badge (Material Symbol inside a clay circle), title, and copy.\n4. **How It Works:** 3 steps with numbered clay badges (1\u002F2\u002F3), one Material Symbol per step, dashed connector line on desktop, stacked column on mobile.\n5. **Testimonials:** 3 speech-bubble cards (pseudo-element tails), clay avatar blobs with initials, name + role, 5-star rating using Material Symbols `star` with an `aria-label`.\n6. **Pricing:** 3 tiers; middle tier highlighted with a \"Most Popular\" clay badge, elevated shadow, and `--primary` border; each tier has name, price, feature list (check icons), and CTA. Optional monthly\u002Fyearly toggle — if included, it must be an `aria-pressed` segmented control with `aria-live` price updates.\n7. **FAQ:** 5–6 Q&As implementing the accordion spec (2.4).\n8. **Final CTA:** headline + email-capture form per 2.3, with a success toast (`role=\"status\"`, `--z-toast`).\n9. **Footer:** secondary link groups (Product \u002F Company \u002F Support), social icons (Material Symbols with `aria-label`s), copyright line.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cstyle>` blocks; only a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` entry point.\n- **Naming:** one consistent **BEM** convention (`.btn`, `.btn--primary`, `.card__title`, `.faq__item`) plus `.is-*` state classes for JS-toggled states — never mix conventions.\n- **JS scope:** theme toggle + `localStorage`, mobile menu, FAQ accordion, form validation with loading\u002Fsuccess\u002Ferror states, toast, smooth scroll, and an optional reduced-motion-safe scroll-reveal via `IntersectionObserver`. No JS libraries beyond the Tailwind CDN.\n- **Copy:** original, playful English copy for the invented product — lorem ipsum and empty stub sections are prohibited.\n- **Output:** the complete code for all three files in this single response, ready to run.\n",1791954980577]