[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-026-Rococo-Romantic-Narrative":3},"**ROLE & MISSION**\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-quality landing page in a single first attempt** — output the full, final code for every file with no outlines, no partial builds, and no clarifying questions. The deliverable is a luxury-editorial landing page in the theme **\"Rococo Romantic Narrative\"**: elegant, dreamy, whimsical, ornate 18th-century romance in pastels and gold.\n\n---\n\n**CREATIVE BRIEF — THEME: \"ROCOCO ROMANTIC NARRATIVE\"**\n\n**Narrative Concept:** The page belongs to a fictional luxury brand, **The Gilded Rose** — an 18th-century-style atelier that composes, embellishes, and delivers handcrafted romantic love letters and gift parcels. Every section must advance this single narrative with coherent, finished copy.\n\n**Mood, Keywords & Category:** rococo, romantic, pastel, gold, floral, ornate, cherubs, soft, luxury, dreamy, whimsical; era: 18th century; output category: **Luxury & Editorial** (generous whitespace, editorial typography, chapter-style section labels, refined ornamental detail).\n\n**Color Palette (Light Mode — the default):**\n- Background `#FDF6F0` (warm cream — never pure white; use `#FEFEFE` where a near-white surface is required)\n- Text `#6B4C40` (warm cocoa brown)\n- Gold accent `#EBC97A`\n- Pastels: Pale Pink `#FADADD`, Sky Blue `#C6E2FF`, Mint Green `#D0F0C0`\n\n**Signature Visual Effects (CSS-only unless noted):**\n- **Soft watercolor wash:** layered radial gradients — the hero must use the spec gradient `radial-gradient(circle, #FDF6F0 0%, #FADADD 100%)`; other sections receive subtle pastel washes at reduced opacity.\n- **Flowing golden ribbons:** gradient hairline dividers and curved pseudo-element flourishes.\n- **Ethereal glow:** soft gold\u002Fpink halo shadows behind display elements — never behind body text.\n- **Cherubs & blooming roses:** render via remote placeholder images (e.g., `https:\u002F\u002Fpicsum.photos\u002F...`) with descriptive `alt` text and a replacement comment, or pure-CSS ornamental medallions (gradient rings, petal shapes via `border-radius`). **Inline SVG and local image files are forbidden.**\n- Ornate double-border frames, gentle floating ornament animations, and an optional editorial drop cap on the hero paragraph.\n\n**Typography & Icons (Google Fonts mandatory):**\n- `--font-display: 'Great Vibes', cursive` — per the source spec; the spec's global `font-family: 'Great Vibes'` is honored as the display face only: brand wordmark, hero headline, small ornamental accents. **Never for body copy, labels, buttons, or long text** (script fonts fail legibility at small sizes).\n- `--font-heading: 'Cormorant Garamond', serif` — section headings, card titles, prices, pull quotes.\n- `--font-base: 'Jost', sans-serif` — body copy, navigation, buttons (letter-spaced uppercase), forms.\n- Icons: **Google Material Symbols (Rounded)** exclusively (`material-symbols-rounded` class). Inline SVGs, local icon files, and emoji-as-icons are forbidden.\n\n**Copy Direction:** All user-facing copy in English, written in a romantic, whimsical, luxury-editorial voice — e.g., section eyebrows styled as chapters (\"Chapter the First — The Art of Correspondence\") and hero copy in the spirit of \"An Atelier of Romantic Correspondence · Est. 1745\" \u002F \"Where Love Is Written in Gold.\" Real, finished copy everywhere; lorem ipsum is forbidden.\n\n---\n\n**PAGE BLUEPRINT — REQUIRED SECTIONS, IN THIS ORDER**\n\n**Sticky Header:** Brand wordmark (Great Vibes), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), a gold `.btn--primary` \"Reserve Your Letter\" linking to the Final CTA, and the dark-mode toggle. Translucent cream `backdrop-blur` surface with a gold hairline bottom border. On mobile, links collapse behind a hamburger disclosure panel (ARIA-correct, Esc-to-close, layered with `--z-dropdown`).\n\n**1. Hero:** ~90vh; watercolor radial-gradient backdrop with ethereal glow; ornate frame; eyebrow label; Great Vibes headline with fluid `clamp()` sizing (~3rem–6rem); Cormorant subheadline; primary gold CTA + ghost secondary CTA; scroll cue; floating cherub\u002Frose ornaments (subtle loop, reduced-motion-safe).\n\n**2. Features — 3 Cards:** Flexbox row → column on mobile; each card `flex: 1`. Gold-ringed Material Symbol medallion, Cormorant title, Jost body copy. Rotate pastel accents across the three cards: pink \u002F sky blue \u002F mint. Implement the full card state system (see 2.2).\n\n**3. How It Works — 3 Steps:** Semantic `\u003Col>`; Roman numerals I · II · III inside gold medallions; a golden-ribbon connector (horizontal on desktop, vertical on mobile); step title + copy for Compose → Embellish → Deliver.\n\n**4. Testimonials:** 3 quote cards; oversized gold quotation glyph; italic Cormorant pull quote; five-star rating using `star` icons (apply the `FILL` font-variation) with `aria-label=\"Rated 5 out of 5 stars\"`; reviewer name and role; CSS initials medallion as avatar (no external avatar images).\n\n**5. Pricing — 3 Tiers:** \"The Love Letter\" \u002F \"The Grand Declaration\" (featured) \u002F \"The Royal Commission\". Featured card: gold border, glow, slight elevation, and a text badge \"Most Beloved\" (state must never rely on color alone). Feature lists with `check` icons; per-tier CTAs (featured = solid gold, others = outline).\n\n**6. FAQ — Accordion:** 5–6 items (delivery, customization, wax seals, letter privacy, returns). Button + panel pattern with `aria-expanded`\u002F`aria-controls` and `role=\"region\"`; `expand_more` icon rotating 180°; CSS-animated open\u002Fclose (e.g., `grid-template-rows: 0fr → 1fr` — no JS height measuring); fully keyboard operable; Esc closes. **No modals or popups exist on this page — do not introduce any.**\n\n**7. Final CTA:** Full-width watercolor panel with ethereal glow and ornamental frame; Great Vibes headline; email-capture form implementing the complete input and button state systems (see 2.1 and 2.3): client-side validation, loading spinner, inline success\u002Ferror messages inside an `aria-live=\"polite\"` region. No `alert()`.\n\n**8. Footer:** Brand + short blurb + social presence as elegant text links (Material Symbols has no brand logos — do not fake them with SVG); three secondary-link columns (Atelier \u002F Assistance \u002F Legal); copyright bar. Secondary links may use `href=\"#\"`.\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- Every design property, layout rule, and state is applied through 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**\nDefine all tokens in `:root` and override them in the dark theme:\n- **Colors:** `--primary: #EBC97A` (gold), `--secondary: #FADADD`, `--bg-primary: #FDF6F0`, `--bg-secondary: #FEFEFE`, `--text-primary: #6B4C40`, `--text-secondary` (muted brown, e.g., `#7D6157`), `--text-success: #3F7B53`, `--text-error: #B23A48`, `--border-default: #EAD9CD`, `--border-error`, `--border-success`. Theme extras: `--gold-deep: #D4AF6A`, `--pastel-pink: #FADADD`, `--pastel-blue: #C6E2FF`, `--pastel-mint: #D0F0C0`.\n- **Contrast pairing:** every light background token pairs with a dark text token and every dark background with a light text token — enforced in both themes. Gold `#EBC97A` must never be used as a text color on light backgrounds; in light mode gold is reserved for borders, ornaments, icon medallions, and button fills paired with `--text-primary` text. Gold text is permitted only on dark backgrounds.\n- Every text\u002Fbackground pair must pass WCAG AA (4.5:1 body, 3:1 large text); adjust token values if verification fails.\n- **Shape & depth:** `--radius-sm` (4px), `--radius-md` (12px), `--radius-lg` (24px), `--shadow-sm`, `--shadow-md` (warm-tinted, derived from `#6B4C40`).\n- **Motion & space:** `--spacing-gap` (1.5rem), `--transition-fast` (150ms), `--transition-normal` (300ms), `--ease-standard` (cubic-bezier(0.4, 0, 0.2, 1)).\n- **Layering:** `--z-dropdown` (100), `--z-modal` (1000), `--z-toast` (1100); the sticky header and mobile nav panel use the dropdown layer.\n\n**1.3 Mandatory Dark Mode Support**\n- **Exception:** Although the source style spec marked dark mode unsupported, it is mandatory here — implement a \"Midnight Salon\" palette that extends the Rococo mood: deep plum backgrounds (`--bg-primary: #2B2130`, `--bg-secondary: #372B3D`), cream text (`--text-primary: #F5EAE0`, `--text-secondary: #CBB9B0`), preserved gold `#EBC97A` (gold text permitted on dark), pastels used only as low-alpha washes and glows.\n- Provide dark tokens via `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`; the class wins when applied.\n- **Persistence:** store the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. The header toggle shows `light_mode`\u002F`dark_mode` Material Symbols with correct `aria-pressed` and `aria-label` state.\n- Theme switching must happen entirely through variable overrides — zero HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- Mobile-first: feature, step, testimonial, pricing, and footer columns collapse to single columns on small viewports; nav links collapse behind the disclosure panel. No horizontal scrolling at any width from 320px up. Anchor navigation uses CSS smooth scrolling with `scroll-margin-top` offsets for the sticky header (disabled under `prefers-reduced-motion`).\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS (via CDN) or clean custom CSS organized with `@layer`\u002F`@apply` conventions — the deliverable must run with zero build steps. All utility classes must map back to the CSS variables or to generic reusable component classes (`.btn`, `.card`, `.input-group`); never hard-code hex values in utilities.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Great Vibes, Cormorant Garamond (400–700 + italics), and Jost via Google Fonts `\u003Clink>` tags; bind them to `--font-display`, `--font-heading`, `--font-base`.\n- Load the official Google Material Symbols (Rounded) stylesheet; every icon is a `\u003Cspan class=\"material-symbols-rounded\">icon_name\u003C\u002Fspan>`.\n- Inline SVGs, local icon files, and emoji-as-icons are forbidden.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements** — all states as CSS classes:\n- **Default:** `.btn` uses `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum touch target 44×44px, Jost label in letter-spaced uppercase. Variants: `.btn--primary` (gold fill + brown text), `.btn--ghost` (gold hairline border, theme text color), `.btn--danger` (defined and distinct in both themes even though this page triggers no destructive action).\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n- **Focus:** distinct ring via `outline` using `--gold-deep`, 2px offset — visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** disables interaction, prevents double-clicks, and renders a CSS spinner (rotating `progress` Material Symbol or border spinner) without distorting button dimensions.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Card Component Requirements:**\n- **Default:** `.card` — flexible Flexbox layout, `--bg-secondary` surface, `--border-default` hairline, `--radius-lg`, `--shadow-sm`.\n- **Hover:** elevation shift + `transform: translateY(-2px)`.\n- **Focus-within:** gold border highlight when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** `.card--loading` shimmer animation defined in CSS to prevent layout jumps.\n- **Empty state:** `.card--empty` fallback layout with a Material Symbol and guidance text, defined in CSS.\n- **Featured:** `.card--featured` for the highlighted pricing tier.\n\n**2.3 Form & Input Requirements:**\n- **Structure:** `.input-group` — flex container wrapping a `\u003Clabel>`, the input field, and a dedicated error-feedback element.\n- **States:** empty, focused (gold ring), filled, valid (success border + `check` icon), invalid (error border, `--text-error` message, `error` icon, `aria-invalid=\"true\"`, `aria-describedby`), disabled, read-only — all as CSS classes.\n- The Final CTA email form implements every state live; validation runs in `script.js` with inline messages in an `aria-live=\"polite\"` region.\n\n**2.4 FAQ Accordion Requirements:**\n- **Structure:** `\u003Cbutton class=\"faq__trigger\" aria-expanded=\"false\" aria-controls=\"…\">` + `\u003Cdiv class=\"faq__panel\" role=\"region\" aria-labelledby=\"…\">`.\n- **States:** collapsed, hover, focus-visible ring, expanded (icon rotates 180°, panel animates via CSS).\n- **Keyboard:** Enter\u002FSpace toggle; Esc closes the open item; arrow keys move between triggers.\n- **No modals\u002Fpopups in this build** — the accordion is the only disclosure component.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography and flexible widths; zero horizontal overflow from 320px up.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)`; all decorative loops (floating ornaments, shimmer, glow pulse) and transitions respect `prefers-reduced-motion: reduce`.\n- **Accessibility (a11y):** AA contrast in both light and dark modes; never rely on color alone to communicate state (pair icons with text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); exactly one `h1` with a logical heading hierarchy; a visually hidden skip-to-content link; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for all dynamic feedback.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** none on this page, but `.btn--danger` must still be defined and visually distinct in both themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, and `script.js`. The only script reference is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no inline script blocks. (Google Fonts\u002FMaterial Symbols and, if used, the Tailwind CDN are external `\u003Clink>`\u002F`\u003Cscript src>` references and permitted.)\n- **Naming convention:** BEM (`block__element--modifier`) across the entire deliverable — e.g., `.hero__title`, `.card--featured`, `.faq__trigger`. Never mix conventions.\n- **Copy:** all user-facing copy in English, fully written in the romantic editorial voice; lorem ipsum is forbidden. Placeholder imagery is allowed only for genuinely unsourceable artwork (cherubs\u002Froses), via remote URLs with descriptive `alt` text and replacement comments.\n- **JavaScript scope:** theme toggle + `localStorage` persistence; mobile nav disclosure; FAQ accordion; Final CTA validation with loading\u002Fsuccess\u002Ferror states (simulated async); optional reduced-motion-safe scroll reveals — content must be fully visible without JS.\n- **Acceptance check — verify before output:** zero inline styles; every color, spacing, and motion value token-driven; dark mode complete with working toggle and persistence; all button, input, card, and accordion states styled; both themes pass contrast; the full page is delivered complete on the first attempt.\n",1791954980036]