[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-463-Coquette":3},"**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a **single attempt** — full code, no clarifying questions, no TODOs, no truncated output.\n\n**Theme:** **Coquette** — soft pastel, romantic, delicate florals, bows, lace, charming silhouettes, feminine, dainty, Valentine-like. Mood keywords: blush pink, soft cream, dusty rose, pearl white, lavender, soft gold, baby blue, warm ivory; thin elegant serif with script accents; hairline borders (0.5–1px); feathered shadow edges; gentle pink gradients.\n\n**Sections (in this order):** sticky header (site chrome), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), Final CTA (with email capture), 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 a dedicated `style.css`. **Forbidden:** any `style=\"...\"` attribute in the HTML.\n* All design properties, layout rules, and states are targeted via class or ID selectors only.\n* HTML stays clean, semantic, and style-agnostic — re-theming the page must require editing CSS only, never markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (and theme classes) as CSS variables:\n\n* **Colors (light\u002Fdefault):** `--primary: #D4A0A0` (Dusty Rose), `--secondary: #D8C4E8` (Lavender), `--bg-primary: #FFF8F0` (Soft Cream), `--bg-secondary: #F8F0F0` (Pearl White), `--bg-accent: #FFD6E0` (Blush Pink), `--bg-ivory: #FFF5E6` (Warm Ivory), `--text-primary: #6A4A5A` (deep plum-mauve), `--text-secondary: #8A6474` (muted mauve), `--text-success: #5F7A6A` (muted sage), `--text-error: #B85C6C` (dusty raspberry), `--border-default: rgba(212,160,160,0.4)`, `--border-success`, `--border-error`, `--accent-gold: #D4C090`, `--accent-blue: #B8D8E8`.\n* **Contrast Pairing (enforced in every theme):** every light background token (blush, cream, ivory, pearl) pairs with `#6A4A5A` text; every dark background pairs with light blush-tinted text. Never place white text on blush or dusty-rose fills (fails contrast). Primary CTA = blush fill + deep plum text. Verify all pairings ≥ 4.5:1 for body text, ≥ 3:1 for large text and UI borders.\n* **Light background rule:** never default to pure white; the page background is `#FFF8F0`. If a near-white is needed, use `#fefefe`, never `#ffffff`.\n* **Radius & Shadows:** `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 24px`, `--shadow-sm: 0 2px 12px rgba(255,214,224,0.3)`, `--shadow-md: 0 8px 28px rgba(212,160,160,0.28)` — feathered edges only (large blur, low opacity, no hard edges).\n* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`.\n* **Typography tokens:** `--font-base: 'Cormorant Garamond', serif`, `--font-accent: 'Dancing Script', cursive`. Base body: `font-weight: 300; letter-spacing: 0.04em; line-height: 1.7`. Base surface style: `border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm)`.\n\n**1.3 Mandatory Dark Mode — \"Midnight Coquette\"**\n* **Exception (theme conflict):** the Coquette spec marks dark mode \"Not Recommended\" — dark mode is nevertheless mandatory; implement it as a \"Midnight Coquette\" variant built from deep plum\u002Fmauve tones (pure black `#000000` is forbidden) so the romantic mood survives.\n* Dark tokens: `--bg-primary: #2A1F26`, `--bg-secondary: #382B34`, `--bg-accent: #4A3540`, `--text-primary: #F8E8EE`, `--text-secondary: #C9AEBB`, borders `rgba(212,160,160,0.3)`, shadows become deep-plum glows with a faint blush rim. Re-verify all contrast pairings.\n* Implement via **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`: the media query serves system-preference users with zero flash; the class serves the persisted manual choice.\n* **Persistence:** store the choice in `localStorage` (e.g., key `coquette-theme`), fall back to `prefers-color-scheme` on first visit, and apply the stored theme as the very first operation in `script.js`. Provide a visible toggle in the header (Material Symbol `light_mode`\u002F`dark_mode`) with correct `aria-pressed` and `aria-label` state.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structure with Flexbox. Every flex container **defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., text blocks needing `stretch`).\n* Mobile-first: all flex rows wrap to columns below 768px; no horizontal scrolling at any viewport width from 320px up; content sits in a centered `max-width: 1140px` container.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS via the Play CDN with an inline `tailwind.config` that maps colors and fonts to the CSS variables above. Reusable component classes (`.btn`, `.card`, `.input-group`, `.accordion-item`) are defined in `style.css` using `@layer components` with `@apply` or plain CSS bound to variables. Utilities must never hardcode hex values that duplicate tokens.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Cormorant Garamond** (300\u002F400\u002F500\u002F600 + italics) and **Dancing Script** (400\u002F500) from Google Fonts via `\u003Clink>`; bind to `--font-base` and `--font-accent`.\n* Script accents (`Dancing Script`) are reserved for flourishes only — hero accent word, section eyebrow labels, badge text, step numerals, quotation marks — never for body copy or button labels (legibility).\n* Icons: **Google Material Symbols (Rounded variant)** via `\u003Clink>`. Local icon files are forbidden.\n* **Exception (icon conflict):** Material Symbols ships no bow, lace, or ribbon glyphs — decorative bow\u002Fribbon\u002Ffloral ornaments are the *only* permitted inline SVG (or CSS-drawn) elements, and must be `aria-hidden=\"true\"` with `pointer-events: none`; every functional icon (buttons, steps, stars, chevrons, social, toggle) must still be a Material Symbol.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`, `.btn-primary`, `.btn-outline`, `.btn-ghost`, `.btn-danger`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; Cormorant Garamond 500.\n* **Hover:** slight `scale(1.02)` + blush glow (`box-shadow: 0 6px 20px rgba(255,214,224,0.55)`); `cursor: pointer`.\n* **Focus:** distinct 2px dusty-rose outline with 3px offset via `:focus-visible`, visible on both cream and plum backgrounds.\n* **Active:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** `aria-busy=\"true\"`, pointer events disabled (prevents double-clicks), CSS spinner or animated `progress_activity` Material Symbol that does not shift button dimensions (fixed `min-width`).\n* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback classes tinting border\u002Ftext with `--text-success` \u002F `--text-error`, announced via `aria-live`.\n* **`.btn-danger`:** dusty raspberry tint, visually distinct in both light and dark themes.\n\n**2.2 Card Component (`.card`)**\n* **Default:** `--bg-secondary` fill, `1px solid var(--border-default)`, `border-radius: var(--radius-md)`, `box-shadow: var(--shadow-sm)`, flex layout.\n* **Hover (interactive):** `translateY(-2px)` + `--shadow-md` blush glow.\n* **Focus-within:** border shifts to higher-alpha dusty rose when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** `.card--skeleton` shimmer keyframes (gradient sweep) matching final dimensions — no layout jump.\n* **Empty state:** centered Material Symbol (`local_florist` or `favorite`) plus gentle guidance text.\n\n**2.3 Form & Input Requirements (`.input-group`)**\n* **Structure:** flex wrapper containing label, input, and a dedicated error-feedback container (`aria-live=\"polite\"`).\n* **States:** empty, focused (dusty-rose ring + blush tint), filled, valid (sage border + `check` icon), invalid (raspberry border + `error` icon + message text — never color alone), disabled, read-only.\n* The Final CTA email capture must validate in JS: submit → button loading → success (sage message with heart icon) or error (raspberry message), all announced via `aria-live`.\n\n**2.4 Modal \u002F Popup (Conditional)**\n* No modal is required by the section list — do not invent one. If any overlay becomes genuinely necessary: centered flex container (`align-items: center; justify-content: center`), plum-tinted backdrop with blur, CSS-transitioned open\u002Fclose states, Material Symbol close button (44px), `Esc` and overlay-click close, keyboard focus trap, `role=\"dialog\"` + `aria-modal=\"true\"`, `z-index: var(--z-modal)`.\n\n**2.5 FAQ Accordion (`.accordion`)**\n* Each item: trigger `\u003Cbutton>` with `aria-expanded` + `aria-controls`, panel with `role=\"region\"` + `aria-labelledby`; `expand_more` Material Symbol chevron rotating 180° on open.\n* Panel height animates via CSS (grid `0fr → 1fr` technique or `max-height`), respecting `prefers-reduced-motion`.\n* Fully keyboard operable (Tab, Enter, Space); first item open by default; no mouse-only interactions.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` typography, breakpoints without horizontal overflow.\n* **Smooth animations:** every state change uses `transition: var(--transition-normal) var(--ease-standard)`; wrap all transforms\u002Fanimations in `@media (prefers-reduced-motion: reduce)` to disable them.\n* **Accessibility:** semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, logical `h1→h3` order), skip-to-content link, ARIA roles\u002Flabels on all custom widgets, logical DOM\u002Ffocus order, full keyboard operability, `aria-live` regions for dynamic feedback. Never rely on color alone — pair success\u002Ferror tints with icons and text.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Decorative elements** (bows, lace, florals) are `aria-hidden`, non-interactive, and never obscure content or targets.\n\n---\n\n## 4. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATION\n\n**Chrome — Sticky Header:** brand wordmark in Dancing Script; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle (per 1.3); translucent blush-tinted `backdrop-blur` with a hairline lace bottom border; on mobile, links collapse behind a menu button opening an accessible dropdown panel (`--z-dropdown`). Smooth-scroll anchors with `scroll-margin-top`.\n\n**4.1 Hero:** `min-height: 90vh` centered flex column over a gentle pink gradient (`linear-gradient(160deg, #FFF8F0, #FFD6E0 55%, #F8F0F0)`), a soft CSS floral overlay (layered radial-gradients ≤ 8% opacity), and scalloped lace edges top and bottom built from repeating radial-gradients on pseudo-elements. Dancing Script eyebrow, Cormorant H1 with one script\u002Fitalic accent word, subcopy, two CTAs (`.btn-primary` + `.btn-outline`), decorative corner bows (permitted SVG\u002FCSS) with a slow 6s floating animation, and a trust row (gold Material Symbol stars + short line).\n\n**4.2 Features — 3 cards:** flex row wrapping to column. Each `.card`: blush-tinted circle holding a Material Symbol (`favorite`, `local_florist`, `auto_awesome`), Cormorant title, body text, thin lace divider along the card top. Alternate icon-circle tints: blush, lavender, baby blue. Hover lift + glow; focus-within border highlight.\n\n**4.3 How It Works — 3 steps:** flex row → column. Steps numbered `01 \u002F 02 \u002F 03` in Dancing Script, joined by a dotted dusty-rose connector line (CSS pseudo-element, hidden on mobile). Each step: Material Symbol in a pearl circle, title, description.\n\n**4.4 Testimonials:** warm-ivory band. Three `.card`s: oversized Dancing Script quotation mark, quote in Cormorant italic, five gold (`--accent-gold`) Material Symbol `star` icons, avatar as a CSS circle with a Dancing Script initial (no external images), name + role. Hover lift + glow.\n\n**4.5 Pricing — 3 tiers:** three `.card`s; the middle tier is featured — slightly scaled, blush gradient or 1.5px soft-gold border, a \"Most Loved\" Dancing Script badge with a bow ornament, elevated shadow. Large Cormorant price, feature list with sage `check` Material Symbols, per-tier CTA (primary on featured, outline on others). All hover\u002Ffocus\u002Fdisabled button states per 2.1.\n\n**4.6 FAQ:** 5–6 themed Q&As in the accordion per 2.5, on a pearl-white band with hairline borders.\n\n**4.7 Final CTA:** full-width blush-gradient band with lace borders top and bottom, centered flex column: bow ornament, Dancing Script headline, one short line, inline email-capture `.input-group` (input + `.btn-primary`) with loading\u002Fsuccess\u002Ferror behavior per 2.3, plus a small privacy note.\n\n**4.8 Footer:** blush-tinted pearl background with a top lace border. Brand wordmark + tagline; secondary link groups (Explore, Company, Support — real accessible names, `href=\"#\"` acceptable since destinations are unspecified); social icons as Material Symbols with visible focus rings; copyright line with a small heart icon. Link hover = dusty-rose underline flourish (animated `text-decoration` offset).\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one script reference — `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — and no other inline `\u003Cscript>` blocks. `\u003Chead>` contains only the Google Fonts, Material Symbols, and Tailwind CDN links plus meta tags.\n* **Naming convention:** BEM (`block__element--modifier`) for every custom class, consistently — never mixed with ad-hoc class names. Tailwind utilities are allowed for layout only.\n* **Copy:** all user-facing copy in **English**, written fully on-theme (romantic, dainty, charming — e.g., \"Wrap your world in ribbon and rose\"). No lorem ipsum. Invent one coherent fictional brand name and keep it consistent across header, hero, CTA, and footer.\n* **First-attempt completeness:** every section fully built with all states implemented; finish with a self-check — no horizontal scroll at 320px, full keyboard journey (nav → FAQ → form) works, both themes toggle and persist, all contrast pairings pass, reduced motion respected.\n",1791954987552]