Baroque / Rococo demo
Baroque / Rococo

An opulent historical style featuring gilded ornamentation, dramatic contrasts, curving asymmetrical forms, and pastel flourishes inspired by 17th-century Baroque grandeur and 18th-century Rococo elegance.
Category: Cultural & Heritage
Era: 17th–18th Century
Prompt: 16.0 KB · 2159 words
# BUILD PROMPT — "Baroque / Rococo" Landing Page (Era 1600–1780)

**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.

**Mission:** A theatrical, aristocratic landing page in the Baroque / 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.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives exclusively in `style.css`. The `style="..."` attribute is forbidden anywhere in the HTML.
* Target every visual property, layout rule, and state via class or ID selectors only.
* Keep HTML semantic and style-agnostic (`header`, `nav`, `main`, `section`, `footer`, `h1–h3`, `ol`, `details`/`summary`, `form`, `label`, `button`), so the entire look could be re-skinned by editing CSS alone.
* Never introduce presentation-only wrapper tags where a pseudo-element (`::before`/`::after`) can achieve the same effect.

**1.2 CSS Variables & Theme Tokens**
Define 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`).

* **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` / `--border-success: #a3c47f` (soft verdigris); `--text-error` / `--border-error: #ef8a8a` (bright rose, distinct from the crimson `--primary`).
* **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` / `--accent` / `--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` / `--border-success: #4a6b2f`; `--text-error` / `--border-error: #b3261e`.
* **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.
* **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)`.
* **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).
* **Stacking:** define `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` and use them for the mobile menu, any overlay, and toasts respectively.

**1.3 Mandatory Dark Mode Support**
* Implement themes as: `:root` carries Light tokens; a `.dark` class on `<html>` 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.
* `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.
* Provide a visible toggle button in the nav: Material Symbols `dark_mode`/`light_mode` icon swap, correct `aria-pressed` state, and a dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme"). Theme swaps must require zero HTML restructuring.

**1.4 Flexbox Layout & Mobile-First Alignment**
* 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).
* 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 <min>` so nothing overflows. No horizontal scrolling from 320px to 1920px.
* All interactive targets meet a minimum 44×44px touch area.

**1.5 Framework & Naming Convention**
* 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`/`@apply` and the semantic class names below are retained. Never mix conventions.
* 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`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Google Fonts via `<link>` 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).
* 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.
* All scrollwork, cartouches, and flourishes must be built from CSS only: the asymmetric `--radius-lg`, `--gilt-frame` double borders, pseudo-element corner arcs, radial/conic gradients, `repeating-linear-gradient` brocade texture (low alpha, both modes), and Material Symbols glyphs. No external raster/vector assets for ornament. Every purely decorative element carries `aria-hidden="true"`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
All states as CSS classes on `.btn` / `.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.
* **Default:** minimum 44×44px; crimson `.btn--primary` pairs `#8c1c2b` with cream text in both themes.
* **Hover:** elevation/brightness shift via `--shadow-md`, `cursor: pointer`.
* **Focus:** distinct visible ring — `:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }`.
* **Active/Pressed:** `transform: scale(0.97)`.
* **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.
* **Disabled (`.btn[disabled]`):** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success / Error (`.btn--success`, `.btn--error`):** temporary feedback tints driven by `--text-success`/`--text-error` with a matching Material icon, then revert.

**2.2 Card Component**
* **Default:** flexible Flexbox layout, `--bg-secondary` surface, `--gilt-frame` border, `--radius-lg` cartouche corners, `--shadow-lg` + `--shadow-inset-gilt`.
* **Hover:** `transform: translateY(-2px)` plus shadow deepening.
* **Focus-within:** gilded border intensifies when a child link/button receives focus.
* **Loading:** define `.skeleton` shimmer (animated gradient sweep) sized to prevent layout jumps; use if any content renders asynchronously.
* **Empty state:** define `.empty-state` — centered Material icon, guidance text — available for any list that can render empty.

**2.3 Form & Input Component**
* **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.
* **Structure:** a flex `.form__group` wrapping `<label>`, the `.input` field, and a dedicated `.form__feedback` container (bound to `aria-live="polite"` or `role="alert"` for errors) placed below the field.

**2.4 Modal / Popup**
No modal is required for this page. If any overlay is added (e.g., a terms dialog), it must implement: opening/open/loading/success/closing 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.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid type via `clamp()` on the `--text-*` scale; nothing overflows; long words wrap.
* **Smooth animations:** every state change transitions with `var(--transition-fast/normal) 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).
* **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/questions); ARIA roles/labels on every custom widget; logical DOM/focus 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.
* **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.
* **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`.

---

## 4. BAROQUE / ROCOCO ART DIRECTION

* **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.
* **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.
* **Cartouches:** the asymmetric `--radius-lg: 34px 8px 34px 8px` defines card and hero framing; medallions and badges use `--radius-pill`.
* **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.
* **Eyebrow labels:** Cormorant Garamond, `text-transform: uppercase`, widened letter-spacing, `--accent` color — one per section.
* **Brocade texture:** optional faint `repeating-linear-gradient` overlay on hero/banner backgrounds, alpha ≤0.05, present in both themes.

---

## 5. LANDING PAGE SECTION-BY-SECTION SPECIFICATION

Write 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.

* **Nav (sticky):** wordmark in `--font-display`; links with gold underline-growth on hover/focus; theme toggle (§1.3); primary CTA. Mobile: Material `menu` button with `aria-expanded`/`aria-controls` opening a column panel at `--z-dropdown`; closes on `Esc` and link click; focus returns to the toggle.
* **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`/`height` and descriptive `alt`.
* **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.
* **How It Works (3 steps):** semantic `<ol>`; 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.
* **Testimonials (3):** quote cards with oversized decorative quotation marks (CSS `::before` in `--accent`), small-caps attributions (name, title), hover elevation per §2.2.
* **Pricing (3 tiers):** a Monthly/Annually 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.
* **FAQ:** native `<details class="faq__item">` / `<summary>` 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).
* **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.
* **Footer with secondary links:** multi-column flex (wrap → column mobile); brand + one-line tagline; grouped secondary links (Explore / Company / 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 `<html>`, so no-JS users see all content).

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, `script.js`. The only script reference is a single `<script src="script.js" defer></script>`; no inline `<script>` blocks, no inline CSS.
* **Head:** Google Fonts preconnect + stylesheet link, Material Symbols stylesheet link, and the deferred script tag.
* **Naming:** BEM only, consistent across all three files; never mix conventions.
* **Copy:** all user-facing text in English; placeholders only where content is genuinely unspecifiable — otherwise write finished themed copy.
* **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.