[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-588-Claymation-3D":3},"# System Prompt: Build a \"Claymation 3D\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. All user-facing copy must be written in **English**.\n\n**Theme:** Claymation 3D — a playful, tactile, 3D clay-rendered aesthetic (2020s 3D Illustration era) with matte clay finishes, soft edges, warm colors, and squishy micro-interactions.\n\n**Required Sections:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), 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- **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID Selectors Only:** All styling, layout, and state rules must live in a dedicated `style.css` file, targeted via class or ID selectors.\n- **Minimal HTML Modifications:** HTML must remain semantic and styling-agnostic. Re-theming the page must require editing only `style.css`.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all visual tokens in `:root` (and theme classes) using CSS variables:\n- **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- **Claymation Palette Mapping:** Map the theme palette to tokens — Primary: Sky Blue `#AEE2F6`, Warm Brown `#4A3B32`, Coral Orange `#FF8A5B`, Leaf Green `#7EC466`; Secondary: Sunny Yellow `#FFD93D`, Soft Red `#E86F6F`. Use Warm Brown `#4A3B32` as the primary text color in light mode; use Sky Blue `#AEE2F6` (or a softened variant) as the light-mode `--bg-primary`. Never default to pure white — where a near-white is needed, use `#fefefe`.\n- **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce this in **both** light and dark themes.\n- **Shape & Depth Tokens:** `--radius-sm: 16px`, `--radius-md: 24px`, `--radius-lg: 32px` (clay requires generous 20px+ radii for soft edges), `--shadow-sm`, `--shadow-md`, plus a dedicated `--shadow-clay` token implementing a **soft multi-layer box-shadow** (e.g., a large diffuse ambient shadow plus a tighter contact shadow) to simulate clay depth on a studio surface.\n- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, plus `--ease-squish` (a bouncy easing curve, e.g., `cubic-bezier(0.34, 1.56, 0.64, 1)`).\n- **Elevation\u002FStacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts (FAQ accordion, sticky header, any toasts).\n\n### 1.3 Mandatory Dark Mode Support\n- **Implementation:** Define dark mode tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector. Dark mode should feel like a \"dimmed clay studio\": deep warm brown\u002Fcharcoal backgrounds (derived from `#4A3B32`) with the same clay accent colors, slightly desaturated via `filter: brightness` adjustments where appropriate.\n- **Theme Switching:** Background and text variables must switch seamlessly with zero HTML restructuring.\n- **Persistence:** Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle button with correct `aria-pressed` and `aria-label` states (e.g., in the header).\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with **Flexbox** (`display: flex` \u002F Tailwind flex utilities).\n- **Default Alignment Rule:** Every flex container must default to `align-items: center` unless there is an explicitly justified exception (documented in a CSS comment).\n- **Mobile-Friendly First:** Card grids (Features, Pricing) and step rows (How It Works) must stack into single columns on small viewports. No horizontal scrolling at any breakpoint.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n- Use Tailwind CSS (or clean custom CSS driven by Tailwind's `@layer` \u002F `@apply` directives). All utility classes must map back to CSS variables or reusable semantic class names (`.btn`, `.card`, `.input-group`, `.step`, `.faq-item`, `.pricing-tier`).\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load a rounded, friendly Google Font (e.g., Baloo 2, Quicksand, or Nunito) via `\u003Clink>` or `@import`, bound to `--font-base`. The typeface must feel soft and playful to match the clay aesthetic.\n- **Icons:** Use Google Material Symbols\u002FIcons exclusively. **Raw inline SVGs and local icon files are forbidden.** Use Material Symbols to represent feature icons, step numbers, testimonial avatars (icon-based), pricing checkmarks, FAQ chevrons, and the theme toggle.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\nStyle all states via CSS classes (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`):\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`. Minimum touch target 44x44px. Clay buttons must appear as extruded clay slabs: generous border-radius (`--radius-md`), the multi-layer `--shadow-clay`, and a matte finish (no glossy gradients).\n- **Hover:** Slight lift (`transform: translateY(-2px)`) with a deepened clay shadow and `cursor: pointer`.\n- **Focus:** A distinct focus ring using CSS variables (`outline` \u002F `box-shadow`) for keyboard navigation.\n- **Active\u002FPressed:** **Tactile press response** — `transform: scale(0.97)` combined with a squish deformation (`scaleX(1.03) scaleY(0.94)` feel) using `--ease-squish`, simulating pressing a finger into clay.\n- **Loading:** Disables interactions, prevents double-clicks, and renders an animated Google Icon spinner (or CSS spinner) without distorting button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** Temporary feedback states driven by `--text-success` \u002F `--text-error`.\n\n### 2.2 Card Component Requirements (Features, Pricing, Testimonials)\n- **Default:** Flexible Flexbox layout styled with `--bg-secondary`, soft borders, and `--shadow-clay` elevation. Cards must look like molded clay tiles with rounded corners (`--radius-lg`) and soft edges.\n- **Hover:** Elevation shift plus subtle transform (`transform: translateY(-4px)`), as if the clay tile is being picked up.\n- **Focus-within:** Card borders highlight when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** Define a shimmer animation in CSS to prevent layout jumps.\n- **Empty State:** A structured fallback layout featuring a Google Icon and clear guidance text.\n- **Clay Detail:** Apply subtle \"fingerprint imperfection\" texture via layered CSS radial-gradients or noise-like background patterns on card surfaces — never via external images.\n\n### 2.3 Form & Input Requirements (Final CTA email capture \u002F newsletter)\n- **States:** Empty, Focused (outline ring), Filled, Valid (success border + Google Icon), Invalid (error border, error text, error icon), Disabled, Read-only.\n- **Structure:** Flex container wrapping a label, input field, and a dedicated error feedback container. Inputs must be pill-shaped or generously rounded to match the clay aesthetic.\n- **Feedback:** Validation messages must be announced via an `aria-live` region.\n\n### 2.4 FAQ Accordion Requirements\n- **States:** Collapsed, Expanding, Open, Closing — all animated via CSS transitions (max-height or grid-template-rows technique).\n- **UX Features:** Each FAQ item is a clay tile; the chevron Google Icon rotates on open. Use `\u003Cdetails>\u002F\u003Csummary>` or ARIA-correct `button` + region pattern. Full keyboard operability. Only one item open at a time is acceptable if ARIA state is correct.\n- **Modal\u002FPopup Rule (if any dialog is used):** Centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click, with Opening\u002FOpen\u002FLoading\u002FSuccess\u002FError\u002FClosing states animated via CSS transitions.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES (Claymation-Specific)\n\nApply these globally:\n\n- **Clay Squish Animations:** Define a reusable `@keyframes squish` (scaleX\u002FscaleY deformation with `--ease-squish`) and apply it to interactive elements on hover\u002Factive — buttons, cards, pricing tiers, and step markers should feel like soft clay that deforms under touch.\n- **Bounce Effects:** Entrance animations for section content (staggered fade + slight bounce-in via `transform`) using `--ease-squish`.\n- **Isometric \u002F 3D Feel:** Apply `transform: perspective(...)` and subtle `rotateX\u002FrotateY` tilts to hero visual elements, step cards, or decorative clay shapes to create an isometric or slight-perspective composition. Decorative clay blobs\u002Fshapes in the Hero and Final CTA must be built purely with CSS (border-radius + `--shadow-clay`), never images.\n- **Soft Studio Lighting:** Simulate with soft, diffuse, multi-layer shadows and gentle top-light highlights (subtle inset highlights via `box-shadow: inset`) — matte finish only, no gloss.\n- **Responsive by Default:** Fluid sizing, no horizontal overflow at any viewport width.\n- **Smooth Animations:** All state changes use `transition: var(--transition-normal)`. **All animations must respect `prefers-reduced-motion`** — squish, bounce, and entrance animations must be disabled or reduced under this media query.\n- **Accessibility (a11y):** Sufficient contrast in both Light and Dark modes (Warm Brown text on Sky Blue passes; verify every token pairing). Never rely on color alone to communicate state. Semantic HTML5 elements (`header`, `main`, `section`, `nav`, `footer`), correct ARIA roles\u002Flabels on the accordion and theme toggle, logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, loading states).\n- **Mandatory Visual Feedback:** Every click, hover, or submission triggers a visible state change.\n- **Destructive Actions:** Any `.btn-danger` or delete-style action must be visually distinct (Soft Red `#E86F6F`-derived) in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Separate `index.html`, `style.css`, and `script.js` files. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`).\n- **Naming Convention:** Enforce one consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.\n- **Script Scope:** `script.js` may contain only: theme toggle logic (with `localStorage` persistence), FAQ accordion behavior, form validation\u002Ffeedback, and scroll-reveal\u002Fentrance animation triggers. No frameworks or build steps.\n- **Content:** Write realistic, polished English marketing copy for every section (no lorem ipsum). Feature cards, steps, testimonials, pricing tiers, and FAQ entries must contain plausible, theme-appropriate content (playful, warm tone matching the claymation aesthetic).\n- **No Unrequested Placeholders:** Do not add sections, components, or placeholder content beyond the specified list.\n\nGenerate the complete, final code now — `index.html`, `style.css`, and `script.js` — in a single response, on the first attempt.\n",1791954989550]