[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-663-Daisy-Days":3},"**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality **\"Daisy Days\"** landing page — an illustrated, cheerful, pastel, hand-drawn 2020s-modern experience — on the first attempt. Follow every rule below exactly.\n\n**Objective:** Deliver a single-page landing site with these sections in order: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.** All user-facing copy must be written in **English** (cheerful, wholesome, on-brand; no lorem ipsum).\n\n---\n\n### **1. STRICT RULES & ARCHITECTURE (MANDATORY)**\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* Keep all styling strictly inside a dedicated `style.css` file.\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 targeted via class or ID selectors.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and agnostic of visual styling so that changing the site's look requires modifying only the CSS file, not the markup.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nStore all visual tokens in `:root` (light theme) and override them under a `.dark` class and `@media (prefers-color-scheme: dark)`. Required tokens:\n\n* **Colors:** `--primary: #7ECDC0` (turquoise), `--secondary: #F7C8D4` (soft pink), `--bg-primary: #F5F0E6` (cream), `--bg-secondary: #FEFEFE` (never `#ffffff`), `--text-primary: #2D2D2D`, `--text-secondary: #5F574B`, `--text-success: #1F7A5C`, `--text-error: #C7463F`, `--border-default: #2D2D2D`, `--border-success: #1F7A5C`, `--border-error: #C7463F`.\n* **Daisy Days Extras:** `--ink: #2D2D2D`, `--pastel-butter: #FDE68A`, `--pastel-mint: #A8E6CF`, `--pastel-lavender: #D4A5E8`, `--pastel-peach: #FFCBA4`, `--border-ink: 3px solid var(--ink)`, `--shadow-chunky: 6px 6px 0 var(--shadow-color)`.\n* **Contrast Pairing:** Every light\u002Fpastel fill must pair with `#2D2D2D` ink text; every dark surface must pair with cream `#F5F0E6` text. Pastel-filled buttons and badges keep dark ink text in BOTH themes. Enforce this pairing for every theme.\n* **Dark Mode Tokens (\"Daisy Night\"):** `--bg-primary: #2B2536`, `--bg-secondary: #372F45`, `--text-primary: #F5F0E6`, `--text-secondary: #BFB3C9`, `--ink: #F5F0E6` (chalk-style outlines), `--shadow-color: #14101F`, `--text-success: #7BD8B0`, `--text-error: #F58E88`. Pastel accent tokens stay unchanged.\n* **Border Radius & Shadows:** `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 24px`, `--shadow-sm`, `--shadow-md`, plus the signature `--shadow-chunky` (6px solid offset, no blur) used on cards and buttons.\n* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 200ms`, `--transition-normal: 300ms`, `--ease-standard`, `--ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1)` for playful click feedback.\n* **Elevation\u002FStacking:** `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.\n\n**1.3 Mandatory Dark Mode Support**\n* **Implementation:** Define all dark tokens under `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`; background and text variables must switch seamlessly with no HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit; include a visible toggle button (Google Material Symbol `light_mode`\u002F`dark_mode`) with correct `aria-pressed` and `aria-label` states.\n* **Exception Clause:** The source style spec listed Dark Mode as \"None\" — dark mode remains mandatory per this architecture; implement it as a \"Daisy Night\" variant that preserves the pastel illustrated identity with fully compliant contrast.\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` (`items-center`) unless an exception is explicitly justified in a CSS comment (e.g., `.input-group` stacks and stretches; feature\u002Fpricing card rows use `stretch` for equal heights).\n* **Mobile-Friendly First:** All flex rows (Features, Steps, Pricing, Footer columns, nav) convert to columns on small viewports; prevent horizontal scrolling at every width; decorative absolutely-positioned artwork must be clipped by its `position: relative` parent.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS (Play CDN or compiled) with custom styles driven by `@layer` \u002F `@apply` directives.\n* Tailwind utilities are allowed only for structural layout (`flex`, `items-center`, `gap-*`, `flex-wrap`, breakpoints). All colors, radii, shadows, borders, and fonts must come from the CSS variables — never hardcode hex values in utilities or components.\n* Define reusable component classes in `style.css`: `.btn` (with variants), `.card`, `.input-group`, `.section`, `.container`, `.nav`, `.footer`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Fredoka One** (display: hero headline, section headings, buttons, prices) and **Quicksand** (body) from Google Fonts via `\u003Clink>` with `preconnect` and `display=swap`; bind them to `--font-display` and `--font-base`.\n* Use Google Material Symbols for all functional icons (features, check marks, stars, chevrons, close, theme toggle, social). Raw inline SVGs are forbidden for icons.\n* **Exception Clause:** Inline SVG is permitted exclusively for decorative hand-drawn daisy\u002Fstar\u002Frainbow artwork that defines this theme — every such SVG must carry `aria-hidden=\"true\"` and `focusable=\"false\"`, contain no text, and never serve as a functional icon.\n\n---\n\n### **2. COMPONENT DESIGN SPECIFICATIONS**\n\n**2.1 Button Component (`.btn`, BEM variants)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Fredoka One label, `var(--border-ink)`, `border-radius: var(--radius-md)`, `box-shadow: var(--shadow-chunky)`, minimum 44×44px touch target. Variants: `.btn--primary` (turquoise fill, ink text), `.btn--secondary` (pink fill), `.btn--butter`, `.btn--ghost` (transparent, ink border), `.btn--danger`.\n* **Hover:** `transform: scale(1.03)` over `var(--transition-fast)` (200ms) with `cursor: pointer`; shadow grows to 8px 8px.\n* **Focus:** Distinct `:focus-visible` ring — `outline: 3px solid var(--pastel-lavender); outline-offset: 3px;` visible in both themes.\n* **Active\u002FPressed:** Bouncy chunky press: `transform: translate(3px, 3px) scale(0.97); box-shadow: 3px 3px 0 var(--shadow-color);` using `var(--ease-bouncy)`.\n* **Loading (`.is-loading`):** Disables interaction, prevents double-clicks (`aria-busy=\"true\"`), renders a CSS spinner (rotating bordered circle or animated Material Symbol `progress`) without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, `filter: grayscale(1)`, `cursor: not-allowed`, no hover transform.\n* **Success\u002FError:** Temporary state classes swapping label to a Material Symbol (`check_circle` \u002F `error`) plus text, colored by `--text-success` \u002F `--text-error`, announced via an `aria-live=\"polite\"` region.\n\n**2.2 Card Component (`.card`, variants)**\n* **Default:** Flex column layout, `background: var(--bg-secondary)`, `border: var(--border-ink)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-chunky)`, `padding: var(--spacing-gap)`. Pastel tint variants `.card--butter`, `.card--mint`, `.card--lavender`, `.card--peach` distribute the pastel rainbow across Features, Steps, and Pricing; all pastel cards keep `#2D2D2D` text.\n* **Hover:** `transform: translateY(-4px)` (or `scale(1.03)` on icon badges) with shadow growth, 200ms transition.\n* **Focus-within:** Border color shifts to `var(--primary)` and shadow tints turquoise when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** `.card--skeleton` shimmer animation (animated gradient, respects `prefers-reduced-motion`) with fixed `min-height` to prevent layout jumps — apply to testimonials if content loads dynamically.\n* **Empty State:** `.card--empty` fallback with a large Google Material Symbol and clear guidance text if content is unavailable.\n\n**2.3 Form & Input Requirements (`.input-group`)**\n* **Structure:** Flex column wrapper (explicitly excepted from `align-items: center`; children stretch) containing a `\u003Clabel>`, the input, and a dedicated error-feedback container.\n* **States:** Empty, Focused (3px `var(--primary)` outline ring with offset), Filled, Valid (`--border-success` + `check_circle` icon), Invalid (`--border-error`, error icon, `--text-error` message, `aria-invalid=\"true\"`, `aria-describedby`), Disabled (opacity + not-allowed cursor), Read-only.\n* The error container must be an `aria-live=\"polite\"` region. Style inputs with `var(--border-ink)`, `border-radius: var(--radius-md)`, and Quicksand text; height ≥ 44px.\n\n**2.4 Modal \u002F Popup Requirements (if any modal is used, e.g., pricing details or mobile menu)**\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions (opacity + scale).\n* **UX Features:** Centered flex container (`align-items: center; justify-content: center`), ink-tinted backdrop overlay, Material Symbol `close` button (44px target), keyboard focus trapping with restoration on close, close via `Esc` or overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`.\n\n**2.5 Section-Specific Specifications**\n* **Global:** Cream background, scattered hand-drawn SVG daisies\u002Fstars as `aria-hidden` decorations near section edges, a skip-to-content link, single `\u003Ch1>` in the Hero, one `\u003Ch2>` per section, `\u003Cheader>`, `\u003Cnav>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cfooter>` landmarks.\n* **Hero:** Large fluid Fredoka One headline (`clamp()` sizing), Quicksand subcopy, dual CTAs (`.btn--primary` + `.btn--ghost`), hand-drawn SVG rainbow\u002Fdaisy cluster decorations that never overlap or obscure text in any viewport or theme.\n* **Features:** Three `.card` components (butter \u002F mint \u002F lavender tints) in a wrapping flex row → column on mobile; each card has a pastel circular icon badge (Google Material Symbol), an `\u003Ch3>` in Fredoka One, and a short Quicksand description.\n* **How It Works:** Three steps in a flex row → column; numbered Fredoka One badges (\"1\", \"2\", \"3\") in pastel circles with ink borders; a dashed ink connector line between steps (CSS pseudo-element) that rotates vertical on mobile.\n* **Testimonials:** Three quote `.card`s with pastel avatar circles containing initials (ink text), quote, name + role, and a 5-star rating built from Material Symbols `star` (butter color with ink outline effect, visible on both themes).\n* **Pricing:** Three tier cards; the middle card uses `.card--featured` (butter fill, \"Most Popular\" badge, slight `translateY(-8px)` lift on desktop), Fredoka One prices, feature lists with Material Symbol `check` per item, one `.btn` per tier (featured tier gets `.btn--primary`, others `.btn--ghost`).\n* **FAQ:** Accordion built from semantic `\u003Cdetails>`\u002F`\u003Csummary>` (or `button` + `aria-expanded`\u002F`aria-controls`), Material Symbol `expand_more` chevron rotating 180° on open, CSS-animated expansion, fully keyboard operable.\n* **Final CTA:** Full-width pastel rainbow gradient band (soft, low-contrast, ink text preserved), big Fredoka One headline, newsletter `.input-group` + `.btn--primary` with success\u002Ferror feedback states after submission.\n* **Footer:** `var(--bg-secondary)` or ink-bordered band; flex row → stacked columns; secondary links (About, Help, Privacy, Terms, Contact), Material Symbol social icons, copyright line; all links show `:focus-visible` rings.\n\n---\n\n### **3. CORE UX & MICRO-INTERACTION RULES**\n\n* **Responsive by Default:** Mobile-first with standard breakpoints (640\u002F768\u002F1024px), fluid `clamp()` typography, no horizontal overflow anywhere.\n* **Smooth Animations:** CSS transitions on all state changes using `var(--transition-fast)` \u002F `var(--transition-normal)`; playful hovers (`scale(1.03)`, 200ms) and bouncy clicks (`var(--ease-bouncy)`); fully respect `prefers-reduced-motion` by disabling transforms, shimmer, and bounce.\n* **Accessibility (a11y):** AA contrast in Light (\"Daisy Days\") and Dark (\"Daisy Night\") modes; never rely on color alone — pair every success\u002Ferror with an icon and text; semantic HTML5, correct ARIA roles\u002Flabels on the theme toggle, accordion, mobile menu (`aria-expanded`, `aria-controls`), and modal; logical DOM\u002Ffocus order; full keyboard operability for nav, accordion, toggle, and forms; `aria-live` regions for form errors and feedback messages.\n* **Mandatory Visual Feedback:** Every click, hover, focus, and submission must trigger a visible state change.\n* **Destructive Actions:** Define `.btn--danger` (error-red fill, cream text, ink border) and ensure it is visually distinct in both light and dark themes, even if unused in this landing page.\n\n---\n\n### **4. DELIVERABLE & OUTPUT FORMAT**\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` entry point. No inline styles anywhere.\n* **Naming Convention:** BEM (`block__element--modifier`) consistently across all custom classes — never mix conventions. Tailwind utilities appear only for structural layout and must never carry hardcoded colors.\n* **Copy:** Write original, cheerful, wholesome English copy that fits the Daisy Days brand (hero headline, feature titles\u002Fdescriptions, step titles, realistic testimonial names and quotes, tier names\u002Fprices\u002Ffeatures, FAQ questions\u002Fanswers, CTA text). Lorem ipsum is prohibited. Placeholders are allowed only for genuinely unspecified content.\n* **Theme Toggle & JS Scope:** `script.js` handles only: theme toggle with `localStorage` persistence, mobile menu open\u002Fclose, FAQ interactions (if not native `\u003Cdetails>`), modal behavior (if used), and form state feedback. Keep all visual styling in CSS.\n* **Language:** All copy, comments, class names, variable names, and file names in English\u002FASCII.\n",1791954990602]