[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-829-Baroque-Rococo":3},"# BUILD PROMPT — \"Baroque \u002F Rococo\" Landing Page (Era 1600–1780)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single attempt — full markup, full stylesheet, full behavior. No partial deliverables, no apologies, no stubs.\n\n**Mission:** A theatrical, aristocratic landing page in the Baroque \u002F Rococo style — Versailles interiors, Fragonard paintings, gilded scrollwork and cartouche flourishes — containing: sticky Nav, 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 polished, opulent English.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives exclusively in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* Target every visual property, layout rule, and state via class or ID selectors only.\n* Keep HTML semantic and style-agnostic (`header`, `nav`, `main`, `section`, `footer`, `h1–h3`, `ol`, `details`\u002F`summary`, `form`, `label`, `button`), so the entire look could be re-skinned by editing CSS alone.\n* Never introduce presentation-only wrapper tags where a pseudo-element (`::before`\u002F`::after`) can achieve the same effect.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` and theme classes. The reference token sheet uses `--color-*` names — remap them to the canonical names below (retain the sheet's extra signature tokens verbatim: `--gilt-frame`, `--gilt-glow`, `--shadow-inset-gilt`, `--shadow-lg`, `--radius-pill`, `--space-1…24`, `--text-xs…5xl`, `--font-display`).\n\n* **Mandatory canonical tokens** (Dark theme values = source palette): `--bg-primary: #2a1116`, `--bg-secondary: #3a1a20`, plus extra `--bg-surface-strong: #4a232b`; `--text-primary: #f3e6d0`, `--text-secondary: #d8bfa0`; `--primary: #8c1c2b`; `--secondary: #c9a24b` and alias `--accent: #c9a24b`; `--border-default: #c9a24b`; `--text-success` \u002F `--border-success: #a3c47f` (soft verdigris); `--text-error` \u002F `--border-error: #ef8a8a` (bright rose, distinct from the crimson `--primary`).\n* **Derived Light (Rococo pastel) tokens:** `--bg-primary: #f6eee0` (warm ivory — never pure white; use `#fefefe` where a near-white is truly needed), `--bg-secondary: #efe1cc`, `--bg-surface-strong: #e9d8bd`; `--text-primary: #2a1116`, `--text-secondary: #6d5340`; `--primary: #8c1c2b` (pairs with cream text); `--secondary` \u002F `--accent` \u002F `--border-default: #9a742a` (deepened gilt — raw `#c9a24b` fails 3:1 on ivory and may be used only as low-alpha decoration inside `--gilt-glow`); `--text-success` \u002F `--border-success: #4a6b2f`; `--text-error` \u002F `--border-error: #b3261e`.\n* **Contrast pairing:** every light background token pairs with a dark text token and vice versa, enforced in both themes. Verify WCAG AA (4.5:1 body text, 3:1 large text, borders of interactive components) in **both** modes before publishing — the source spec explicitly did not declare modes (\"source does not declare modes; validate in light and dark before publishing\"), so this validation is a hard requirement, not a suggestion.\n* **Geometry & elevation:** keep `--radius-sm: 6px`, `--radius-md: 14px`, and the signature cartouche corner `--radius-lg: 34px 8px 34px 8px`; `--radius-pill: 999px`. Keep dark shadows as given; soften light-mode shadows (e.g., `rgba(74,35,43,0.16)` max alpha) and set light `--shadow-inset-gilt: inset 0 0 0 1px rgba(154,116,42,0.45)`.\n* **Spacing & motion:** map `--spacing-gap` to `var(--space-6)`; define `--transition-fast: 150ms` and `--transition-normal: 250ms`, always combined with `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)` (refactor the reference sheet's raw `.2s` transitions to use these).\n* **Stacking:** define `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` and use them for the mobile menu, any overlay, and toasts respectively.\n\n**1.3 Mandatory Dark Mode Support**\n* Implement themes as: `:root` carries Light tokens; a `.dark` class on `\u003Chtml>` carries Dark tokens; additionally duplicate the Dark token block inside `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` so system-preference users render correctly before JS runs.\n* `script.js` must, as its very first synchronous statements: read `localStorage` (key `baroque-theme`); apply `.dark` or `.light`; fall back to `prefers-color-scheme` on first visit; and persist every toggle change.\n* Provide a visible toggle button in the nav: Material Symbols `dark_mode`\u002F`light_mode` icon swap, correct `aria-pressed` state, and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"). Theme swaps must require zero HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout group with `display: flex`; every flex container defaults to `align-items: center` (`items-center`) unless a deviation is explicitly justified in a CSS comment (e.g., equal-height card stretching).\n* Mobile-first: all multi-column rows (feature cards, pricing tiers, testimonials, footer columns, nav) collapse to a single column under 768px; use `flex-wrap` and `flex: 1 1 \u003Cmin>` so nothing overflows. No horizontal scrolling from 320px to 1920px.\n* All interactive targets meet a minimum 44×44px touch area.\n\n**1.5 Framework & Naming Convention**\n* Preferred: clean custom CSS implementing the provided token sheet, extended per this spec. Tailwind is permitted only if every utility resolves back to the CSS variables via `@layer`\u002F`@apply` and the semantic class names below are retained. Never mix conventions.\n* One convention only: **BEM** (matching the reference `.btn--primary` pattern). Required blocks: `.nav`, `.hero`, `.features`, `.steps`, `.testimonials`, `.pricing`, `.faq`, `.cta`, `.footer`, `.card`, `.btn`, `.input`, `.badge`, `.toast`, `.flourish`, `.skeleton`, `.empty-state`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Google Fonts via `\u003Clink>` with `preconnect` and `display=swap`: **Cormorant Garamond** (body) and **Cinzel Decorative** (display). Bind `--font-base` to Cormorant Garamond and `--font-display` to Cinzel Decorative. Body text uses weight 500–600 with generous line-height for legibility at 16px+; headings use the display face with subtle gold letterpress `text-shadow` (≤1px, never a glow).\n* Icons: **Google Material Symbols (Rounded variant)** via the official stylesheet, used as ligature spans. Raw inline SVGs, local icon files, and icon fonts other than Material Symbols are forbidden — including for decorative ornament.\n* All scrollwork, cartouches, and flourishes must be built from CSS only: the asymmetric `--radius-lg`, `--gilt-frame` double borders, pseudo-element corner arcs, radial\u002Fconic gradients, `repeating-linear-gradient` brocade texture (low alpha, both modes), and Material Symbols glyphs. No external raster\u002Fvector assets for ornament. Every purely decorative element carries `aria-hidden=\"true\"`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\nAll states as CSS classes on `.btn` \u002F `.btn--primary`; base style: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` with the gilt-frame + gilt-glow treatment from the reference sheet.\n* **Default:** minimum 44×44px; crimson `.btn--primary` pairs `#8c1c2b` with cream text in both themes.\n* **Hover:** elevation\u002Fbrightness shift via `--shadow-md`, `cursor: pointer`.\n* **Focus:** distinct visible ring — `:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }`.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.btn--loading`):** disables interaction, blocks double-clicks (pointer-events none + `disabled`), renders a CSS spinner (border-based) or rotating Material Symbol, occupying the same box so dimensions never shift.\n* **Disabled (`.btn[disabled]`):** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success \u002F Error (`.btn--success`, `.btn--error`):** temporary feedback tints driven by `--text-success`\u002F`--text-error` with a matching Material icon, then revert.\n\n**2.2 Card Component**\n* **Default:** flexible Flexbox layout, `--bg-secondary` surface, `--gilt-frame` border, `--radius-lg` cartouche corners, `--shadow-lg` + `--shadow-inset-gilt`.\n* **Hover:** `transform: translateY(-2px)` plus shadow deepening.\n* **Focus-within:** gilded border intensifies when a child link\u002Fbutton receives focus.\n* **Loading:** define `.skeleton` shimmer (animated gradient sweep) sized to prevent layout jumps; use if any content renders asynchronously.\n* **Empty state:** define `.empty-state` — centered Material icon, guidance text — available for any list that can render empty.\n\n**2.3 Form & Input Component**\n* **States:** empty, focused (gold ring: `box-shadow: 0 0 0 3px rgba(201,162,75,0.25)` and border to `--accent`), filled, valid (success border + check icon), invalid (`.input--error` with `--border-error`, error icon, never color alone), disabled, read-only.\n* **Structure:** a flex `.form__group` wrapping `\u003Clabel>`, the `.input` field, and a dedicated `.form__feedback` container (bound to `aria-live=\"polite\"` or `role=\"alert\"` for errors) placed below the field.\n\n**2.4 Modal \u002F Popup**\nNo modal is required for this page. If any overlay is added (e.g., a terms dialog), it must implement: opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states animated with `--transition-normal`; a centered flex container (`align-items: center`) over a dimmed backdrop at `--z-modal`; a Material Symbols `close` button with `aria-label`; keyboard focus trapping; and dismissal via `Esc` and overlay click.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid type via `clamp()` on the `--text-*` scale; nothing overflows; long words wrap.\n* **Smooth animations:** every state change transitions with `var(--transition-fast\u002Fnormal) var(--ease-standard)`; a global `prefers-reduced-motion: reduce` block disables transforms, spinner animation, shimmer, toast sliding, and scroll-reveal (content must be fully visible with reduced motion and with JS disabled).\n* **Accessibility:** AA contrast in both light and dark; semantic HTML5 landmarks and heading order (one `h1` in the hero, `h2` per section, `h3` inside cards\u002Fquestions); ARIA roles\u002Flabels on every custom widget; logical DOM\u002Ffocus order; full keyboard operability (nav menu, FAQ, pricing toggle, form); `aria-live` regions for the form feedback, toasts, and pricing-billing updates; a visible-on-focus \"Skip to main content\" link.\n* **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.\n* **Destructive actions:** none expected; if any destructive control is added, style it with a distinct `.btn--danger` class that reads clearly in both light and dark modes using `--text-error`.\n\n---\n\n## 4. BAROQUE \u002F ROCOCO ART DIRECTION\n\n* **Concept split:** Dark mode = Baroque chiaroscuro — oxblood depths pierced by a dramatic gold spotlight (radial gradient at the top of the hero, e.g., `radial-gradient(ellipse at 50% 0%, rgba(201,162,75,0.22), transparent 60%)` layered on `--bg-primary`). Light mode = Rococo pastel frivolity — warm ivory surfaces, powder-toned accents, softened gilt.\n* **Signature move (repeat everywhere):** the gilded double-line frame `--gilt-frame` with the top-down gold wash `--gilt-glow`, echoing Versailles panel molding — on the nav, buttons, cards, pricing featured tier, FAQ items, and hero cartouche.\n* **Cartouches:** the asymmetric `--radius-lg: 34px 8px 34px 8px` defines card and hero framing; medallions and badges use `--radius-pill`.\n* **Flourish dividers:** a reusable `.flourish` component — gold rules flanking a centered Material Symbols ornament (e.g., `filter_vintage` or `auto_awesome`), `aria-hidden=\"true\"` — separating major sections.\n* **Eyebrow labels:** Cormorant Garamond, `text-transform: uppercase`, widened letter-spacing, `--accent` color — one per section.\n* **Brocade texture:** optional faint `repeating-linear-gradient` overlay on hero\u002Fbanner backgrounds, alpha ≤0.05, present in both themes.\n\n---\n\n## 5. LANDING PAGE SECTION-BY-SECTION SPECIFICATION\n\nWrite real, coherent English copy for a fictional brand (suggested: a luxury decorative-arts atelier or gilding membership, e.g., \"The Gilded Cartouche\"). Aristocratic, theatrical tone. No lorem ipsum.\n\n* **Nav (sticky):** wordmark in `--font-display`; links with gold underline-growth on hover\u002Ffocus; theme toggle (§1.3); primary CTA. Mobile: Material `menu` button with `aria-expanded`\u002F`aria-controls` opening a column panel at `--z-dropdown`; closes on `Esc` and link click; focus returns to the toggle.\n* **Hero:** eyebrow badge (`.badge`), `h1` in `--font-display` with clamp-scaled size and letterpress shadow, supporting paragraph in `--text-secondary`, two CTAs (`.btn--primary` + default `.btn`), spotlight gradient backdrop, `.flourish` divider beneath. Optional framed imagery: picsum placeholder inside a cartouche frame with explicit `width`\u002F`height` and descriptive `alt`.\n* **Features (3 cards):** flex row → column; each `.card` holds a Material icon inside a gilded circular medallion, `h3` display title, copy. Full card state set per §2.2.\n* **How It Works (3 steps):** semantic `\u003Col>`; Roman numerals I–III rendered as gilded medallions (decorative numerals `aria-hidden`, real list semantics intact); connector scrollwork (double gold rule) horizontal on desktop, vertical on mobile.\n* **Testimonials (3):** quote cards with oversized decorative quotation marks (CSS `::before` in `--accent`), small-caps attributions (name, title), hover elevation per §2.2.\n* **Pricing (3 tiers):** a Monthly\u002FAnnually segmented control (two buttons in a pill container, sliding gold indicator, `aria-pressed`, price swap announced via an `aria-live=\"polite\"` region, \"Two months complimentary\" badge on annual). Three `.card` tiers; the middle is `.card--featured` with a doubled gilt frame, `--shadow-lg`, \"Most Coveted\" badge, and `.btn--primary`; others use default `.btn`. Featured tier must not clip or lose keyboard access.\n* **FAQ:** native `\u003Cdetails class=\"faq__item\">` \u002F `\u003Csummary>` accordions (summary may wrap an `h3`); Material `expand_more` icon rotating 180° on `[open]`; gilded borders; optional height animation via the CSS grid-rows technique (instant open under reduced motion).\n* **Final CTA:** theatrical banner with intensified `--gilt-glow` and cartouche framing; `h2` display headline; email signup form exercising the full §2.3 state machine: submit → `.btn--loading` → client-side validation → invalid shows icon + text message in `.form__feedback` → valid shows `.btn--success` and fires a confirmation **toast**: fixed bottom, `--z-toast`, gilded cartouche, Material icon + message, `close` button with `aria-label`, auto-dismiss ~5s, `aria-live=\"polite\"` wrapper, reduced-motion aware.\n* **Footer with secondary links:** multi-column flex (wrap → column mobile); brand + one-line tagline; grouped secondary links (Explore \u002F Company \u002F Legal — e.g., About, Process, Contact, Privacy, Terms); social icon links (Material Symbols with `aria-label`); gilt top border; copyright bar. Script.js scope: theme logic, nav toggle, billing toggle, form handling, toast manager, and an optional IntersectionObserver reveal (applied only when JS adds a class to `\u003Chtml>`, so no-JS users see all content).\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. The only script reference is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`; no inline `\u003Cscript>` blocks, no inline CSS.\n* **Head:** Google Fonts preconnect + stylesheet link, Material Symbols stylesheet link, and the deferred script tag.\n* **Naming:** BEM only, consistent across all three files; never mix conventions.\n* **Copy:** all user-facing text in English; placeholders only where content is genuinely unspecifiable — otherwise write finished themed copy.\n* **Final self-check before publishing (both light and dark):** AA contrast pass; theme toggle persists across reload; zero horizontal scroll at 320px; keyboard-only walkthrough of nav, pricing toggle, FAQ, and form succeeds; visible focus rings everywhere; reduced-motion honored; all icons are Material Symbols; zero `style=\"...\"` attributes; skeleton and empty-state CSS defined.\n",1791954994015]