[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-753-DOUGH-TIME-a-claymorphic-kitchen-companion":3},"# BUILD PROMPT — \"DOUGH TIME\" Landing Page (Claymorphic Kitchen Companion)\n\n**Your Role:** Senior Frontend Engineer & Expert UI Designer. Build the complete, production-ready landing page described below in a single attempt. All user-facing copy must be written in **English**, fully thematic (baking\u002Fkitchen language), real — no lorem ipsum.\n\n**Project Brief:**\n- **Theme:** DOUGH TIME — a claymorphic kitchen timer companion. 2020s contemporary aesthetic: soft, inflated, \"squishy dough\" UI with pastel cream\u002Fmint\u002Fblush surfaces, pillowy shadows, and playful time-based micro-animations.\n- **Sections (in 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- **Palette:** Cream base `#fff9ee` \u002F `#fdf3dc`, mint `#cfe3b4`, sage `#b7d496`, blush `#ffd9e0`, pink `#ffb9c8`.\n- **Effects:** Claymorphism (soft neumorphic dual-shadows), gradients, glow, micro-animations, hover transforms.\n- **CSS techniques:** Flexbox, keyframe animations, transitions, transforms, gradients, box shadows, subtle text shadows, large border radii, `aspect-ratio`.\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 applied via class or ID selectors defined in `style.css`.\n- **Semantic, Presentation-Agnostic HTML:** Use semantic HTML5 elements (`header`, `nav`, `main`, `section`, `footer`, `h1`–`h3` hierarchy). The markup must remain clean and agnostic of visual styling — re-theming must only require editing `style.css`.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root`, and re-map them under the dark theme. Suggested values (verify contrast before finalizing):\n\n```css\n:root {\n  \u002F* Surfaces & brand *\u002F\n  --bg-primary: #fff9ee;      \u002F* near-white cream — NEVER #ffffff; use #fefefe if a white is truly needed *\u002F\n  --bg-secondary: #fdf3dc;    \u002F* cream panel *\u002F\n  --surface-mint: #cfe3b4;\n  --surface-blush: #ffd9e0;\n  --primary: #b7d496;\n  --secondary: #ffb9c8;\n  \u002F* Text — dark warm tokens paired against light backgrounds *\u002F\n  --text-primary: #3b3226;    \u002F* suggested — must pass WCAG AA on --bg-primary *\u002F\n  --text-secondary: #7a6b54;   \u002F* suggested — must pass AA on --bg-secondary *\u002F\n  --text-success: #3e6b2f;\n  --text-error: #b3454e;\n  \u002F* Borders *\u002F\n  --border-default: #e9dcc2;\n  --border-error: #b3454e;\n  --border-success: #3e6b2f;\n  \u002F* Shape, depth, motion *\u002F\n  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 32px; --radius-pill: 999px;\n  --shadow-sm: 0 2px 6px rgba(120,100,70,.14);\n  --shadow-md: 0 6px 18px rgba(120,100,70,.18);\n  --shadow-clay-raised: 14px 14px 28px rgba(120,100,70,.22), -10px -10px 24px rgba(255,255,255,.9),\n                        inset 3px 3px 8px rgba(255,255,255,.55), inset -4px -4px 10px rgba(120,100,70,.12);\n  --shadow-clay-pressed: inset 6px 6px 14px rgba(120,100,70,.22), inset -6px -6px 14px rgba(255,255,255,.7);\n  --glow-mint: 0 0 40px rgba(183,212,150,.55);\n  --glow-pink: 0 0 40px rgba(255,185,200,.55);\n  --text-shadow-soft: 0 2px 0 rgba(255,255,255,.6);\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1); \u002F* springy, dough-like *\u002F\n  --font-display: 'Baloo 2', sans-serif;\n  --font-base: 'Nunito', sans-serif;\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n}\n```\n\n- **Contrast Pairing (mandatory in every theme):** Light background tokens must pair with dark text tokens; dark background tokens must pair with light text tokens. Re-verify pairing after defining the dark palette.\n- **Clay shadows and text shadows must be redefined (inverted tints) in dark mode.**\n\n### 1.3 Mandatory Dark Mode Support\n- **Tokens:** Define a complete dark palette (suggested anchors: `--bg-primary: #241f17`, `--bg-secondary: #2e2820`, `--text-primary: #fdf3dc`, `--text-secondary: #cbbfa4`, brighter `--primary: #a9cd86`, translucent cream borders — verify AA) under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`, so switching never requires HTML restructuring.\n- **Toggle & Persistence:** Implement a visible sun\u002Fmoon toggle (Material Symbols) in the header with correct `aria-pressed` and `aria-label`. Persist the user's choice in `localStorage` and restore it on revisit.\n- **Exception (per user spec):** Light mode is the requested default presentation — on first visit (no saved preference), default to **Light** rather than `prefers-color-scheme`; the fully-defined Dark mode remains mandatory and switchable via the toggle.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structure with **Flexbox** (`display: flex` \u002F Tailwind flex utilities).\n- **Default Alignment Rule:** Every flex container must default to `align-items: center` (`items-center`) unless an exception is justified (e.g., multi-line text columns may use `flex-start`) — document any exception with a CSS comment.\n- **Mobile-first:** Single-column stacks below ~768px; multi-column rows (features, steps, pricing, footer) above. No horizontal scrolling at any viewport width. Add `scroll-margin-top` to anchored sections to offset the sticky header.\n\n### 1.5 Styling Scope & Tailwind\n- Use Tailwind CSS (CDN, dark variant set to class-based) **for layout utilities only** (flex, grid, gap, padding, responsive prefixes).\n- All visual identity — colors, clay shadows, radii, gradients, animations, and every component state — must live in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, etc.) mapped to the CSS variables above. Never hardcode theme values as arbitrary utility values.\n\n### 1.6 Google Fonts & Icons (Mandatory)\n- **Fonts:** Load `Baloo 2` (display\u002Fheadings) and `Nunito` (body) from Google Fonts via `\u003Clink>` with `preconnect`; bind to `--font-display` and `--font-base`.\n- **Icons:** Use **Google Material Symbols (Rounded variant)** exclusively — the rounded glyphs match the clay aesthetic. Raw inline SVGs and local icon files are forbidden.\n- **Favicon:** omit — do not add local icon files.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`, modifiers `.btn--primary`, `.btn--secondary`, `.btn--danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-pill)`, clay-raised shadow, gradient fills (primary: `#b7d496 → #cfe3b4` at 135deg).\n- **Hover:** Brightness\u002Fshadow shift with `cursor: pointer`.\n- **Focus:** Distinct `:focus-visible` ring built from CSS variables (outline\u002Fbox-shadow) for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)` squish feedback.\n- **Loading (`.is-loading`):** Disable interaction, prevent double-clicks, show a rotating Material Symbol (`progress_activity`) spinner — button dimensions must not change.\n- **Disabled (`disabled` attr):** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success`, `.is-error`):** Temporary feedback swapping icon to `check_circle`\u002F`error` with colors from `--text-success`\u002F`--text-error`.\n- **Danger:** Define `.btn--danger` (warm red fill\u002Fborder) with distinct appearance and AA contrast in both Light and Dark themes, even though this landing page uses it sparingly.\n\n### 2.2 Card Component (`.card`)\n- **Default:** Flexible flexbox layout, `background: var(--bg-secondary)`, `border-radius: var(--radius-lg)`, subtle `--border-default` edge + `--shadow-clay-raised` elevation.\n- **Hover:** `transform: translateY(-2px)` with shadow shift (`transition: var(--transition-normal) var(--ease-standard)`).\n- **Focus-within:** Card border\u002Fglow highlights when an inner link or button receives focus.\n- **Loading (`.card--loading`):** Skeleton shimmer keyframe styling that prevents layout jumps — define it in CSS even if unused statically.\n- **Empty state (`.card--empty`):** Structured fallback with a large Google Material Symbol and short guidance text — define it in CSS as production-ready.\n\n### 2.3 Form & Input (`.input-group` — used for the Final CTA email opt-in)\n- **Structure:** Flex container wrapping a `\u003Clabel>`, an `\u003Cinput type=\"email\" required>` (with `autocomplete=\"email\"`), and a dedicated error feedback element linked via `aria-describedby`, wrapped in an `aria-live=\"polite\"` region.\n- **States (all styled):** Empty, focused (outline ring via variables), filled, valid (`.is-valid`: success border + `check_circle` icon), invalid (`.is-invalid`: error border, red text, `error` icon, message), disabled, read-only. Never rely on color alone — pair every state with an icon and\u002For text message.\n\n### 2.4 Modal \u002F Popup — Out of Scope\n- No modal or popup dialogs are requested. **Do not add any.** (If scope ever changes, any modal must implement: opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing CSS-animated states, centered flex overlay, Material Symbol close button, keyboard focus trap, and Esc\u002Foverlay-click dismissal.)\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid sizing, breakpoints without horizontal overflow, 44px minimum touch targets everywhere.\n- **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; all keyframes and transitions must be disabled\u002Fminimized under `@media (prefers-reduced-motion: reduce)` (also disable `scroll-behavior: smooth` there).\n- **Accessibility (a11y):** WCAG AA contrast in both Light and Dark modes (verify text tokens ≥ 4.5:1, adjust suggested values if needed). Semantic HTML5 elements; correct ARIA on the FAQ accordion (`aria-expanded`, `aria-controls`, panel `role=\"region\"` + `aria-labelledby`), `aria-pressed`\u002F`aria-label` on the theme toggle; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions, visible focus everywhere); `aria-live` regions for form feedback. Decorative blobs\u002Fgraphics get `aria-hidden=\"true\"`.\n- **Mandatory Visual Feedback:** Every click, hover, anchor jump, and submission triggers a visible state change.\n- **Destructive Actions:** `.btn--danger` must be visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** Separate `index.html`, `style.css`, `script.js`. Only one `\u003Cscript>` tag allowed: a single deferred reference to `script.js`. Include `\u003Chtml lang=\"en\">`, meta viewport, title (\"DOUGH TIME — The Claymorphic Kitchen Timer\"), and meta description.\n- **Naming Convention:** BEM throughout (`.hero__title`, `.card--featured`, `.btn--primary`, `.faq__trigger`, `.footer__links`) — Tailwind layout utilities are the only permitted additional classes; never mix other naming conventions.\n- **JS scope (all inside `script.js`):** theme toggle + `localStorage` persistence, FAQ accordion toggling, smooth anchor scrolling, email form client-side validation with a simulated submit (loading → success, with `aria-live` feedback), dynamic footer year. No other behavioral JS.\n- **No Unrequested Placeholders:** Write real, thematic English copy for every heading, paragraph, testimonial, tier, and FAQ answer. No lorem ipsum.\n\n---\n\n## 5. CLAYMORPHIC VISUAL LANGUAGE\n\n- **Clay surfaces:** Every raised element uses `--shadow-clay-raised` (dark drop shadow + white top-left light + inset highlight rim) with `--radius-lg` or larger — the \"inflated dough\" look. Pressed\u002Finset elements (input fields, step badges) use `--shadow-clay-pressed`.\n- **Gradients:** Hero backdrop uses layered soft radial gradients (mint + blush blobs); Final CTA band uses a `#cfe3b4 → #ffd9e0` linear gradient; primary buttons use the `#b7d496 → #cfe3b4` gradient.\n- **Glow:** `--glow-mint` on the hero timer and `--glow-pink` on the Final CTA panel.\n- **Text shadows:** Subtle `--text-shadow-soft` on display headings only — never at the cost of AA contrast; invert for dark mode.\n- **Keyframe inventory (define all in `style.css`):**\n  - `dough-rise` — breathing `scale(1 ↔ 1.03)`, 4s ease-in-out infinite (hero timer)\n  - `tick-tock` — 360° rotation, 60s linear infinite (timer second hand)\n  - `blob-float` — alternating `translateY(±10px)`, 6s (decorative background blobs)\n  - `shimmer` — skeleton loading sweep\n  - `spin` — loading spinner\n- **Aspect-ratio:** Hero timer face and testimonial avatar circles use `aspect-ratio: 1` (never fixed px heights).\n\n---\n\n## 6. PAGE SECTIONS & CONTENT DIRECTION\n\n- **Header (sticky):** Translucent clay bar (background color + `backdrop-filter: blur`) below `--z-dropdown`. Logo (Material Symbol `timer` + \"DOUGH TIME\" wordmark in `--font-display`), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, compact \"Get Started\" primary button. On small screens, hide the secondary nav links (keep logo, toggle, CTA) — never overflow.\n- **Hero:** `\u003Ch1>` \"DOUGH TIME\" with playful display styling + tagline (\"The claymorphic kitchen companion that times every rise, proof, and bake\") + sub-copy. Two CTAs: \"Start Your First Timer\" (primary, anchors to Pricing) and \"See How It Works\" (secondary, anchor). Right side: circular clay timer mock — `aspect-ratio: 1` face, gradient ring, `bakery_dining` Material Symbol, a rotating second-hand element (`tick-tock`), digital readout \"00:45\" with `font-variant-numeric: tabular-nums`, `dough-rise` breathing, `--glow-mint`. Floating `aria-hidden` blob decorations behind (`blob-float`).\n- **Features (3 `.card`s):** \"Proof-Perfect Timers\" (`hourglass_top`), \"Recipe-Synced Reminders\" (`sync` \u002F `restaurant`), \"Gentle Kitchen Alerts\" (`notifications`) — icon in a clay bubble, title, description, \"Learn more\" link (exercises card `:focus-within`). Row → column on mobile.\n- **How It Works (3 steps):** \"Set It\" (`add_circle`), \"Let It Rise\" (`trending_up`), \"Bake On Cue\" (`local_fire_department`) — numbered clay badges (01\u002F02\u002F03, `--shadow-clay-pressed`) connected by a dashed line that hides cleanly on mobile column layout.\n- **Testimonials (3 `.card`s):** Quotes from home bakers; clay monogram avatars (styled initials in gradient circles, `aspect-ratio: 1`), name + role, 5-star row using Material Symbols `star` with `font-variation-settings: 'FILL' 1`.\n- **Pricing (3 `.card--tier`s):** \"Starter Dough\" (Free), \"Rising Star\" (`--featured`: \"Most Popular\" pill badge, `--shadow-clay-raised` + gradient border + slight desktop scale), \"Full Oven\" — each with a real feature list and a CTA button (featured: primary; others: secondary).\n- **FAQ (accessible accordion, 5 real questions):** e.g., \"Does DOUGH TIME work offline?\", \"Can I sync timers across devices?\", \"What happens if my dough overproofs?\", \"Can I cancel anytime?\". Independent toggle per item; CSS height animation (e.g., `grid-template-rows: 0fr → 1fr`).\n- **Final CTA:** Gradient band (`#cfe3b4 → #ffd9e0`) with `--glow-pink`, headline (\"Give every dough its moment\"), and the email opt-in `.input-group` (label + input + \"Join the Waitlist\" button) wired to the loading → success flow with `aria-live` feedback.\n- **Footer with secondary links:** Brand blurb, three secondary link columns (Product, Company, Support), social row (Material Symbols with `aria-label`s), bottom bar with dynamic-year copyright and legal links. All links show visible focus states.\n\n**Deliver the complete, working `index.html`, `style.css`, and `script.js` now, in one response — Light mode as default, Dark mode fully implemented and toggleable, zero inline CSS, zero inline SVGs.**\n",1791954992167]