[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-458-Regencycore":3},"# Regencycore Landing Page — Build Specification for Coding Agent\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page on the first attempt. Theme: **Regencycore** (Bridgerton-inspired Regency romance revival — pastel florals, empire silhouettes, pearls, ornate script, gilt frames, aristocratic, dreamy, floral, niche; era 2020–present).\n\n**Required sections:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**Source notes (translated from the original spec):** The source style specification does **not** declare light\u002Fdark modes and instructs to *validate in both light and dark before publishing* — you must therefore author the dark palette yourself and verify contrast in both modes. All user-facing copy must be written in **English**, in an aristocratic, romantic, lightly playful Regency tone. No lorem ipsum.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\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 in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the site's look must require editing only the CSS file, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nAdopt the following Regencycore token block **verbatim** as your design foundation in `:root`:\n\n```css\n:root {\n  \u002F* color *\u002F\n  --color-bg: #fbeef0;\n  --color-surface: #fffaf6;\n  --color-surface-strong: #f6e0e4;\n  --color-border: #e3b8c2;\n  --color-text: #4a2c3a;\n  --color-text-muted: #8a6274;\n  --color-primary: #c1436a;\n  --color-accent: #c9a35c;\n  --color-sage: #8fa583;\n  \u002F* radius *\u002F\n  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px;\n  \u002F* shadow *\u002F\n  --shadow-sm: 0 2px 6px rgba(193, 67, 106, 0.10);\n  --shadow-md: 0 8px 20px rgba(193, 67, 106, 0.14);\n  --shadow-lg: 0 18px 36px rgba(193, 67, 106, 0.16);\n  \u002F* font *\u002F\n  --font-sans: 'Cormorant Garamond', Georgia, serif;\n  --font-display: 'Great Vibes', 'Snell Roundhand', cursive;\n  --font-mono: ui-monospace, monospace;\n  \u002F* text scale, spacing, ease — per source spec *\u002F\n  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;\n  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);\n  \u002F* signature ornament: double gilt frame *\u002F\n  --gilt-frame: 1px solid var(--color-accent);\n  --gilt-outer: 2px solid var(--color-border);\n  --floral-wash: radial-gradient(120% 100% at 100% 0%, rgba(201,163,92,0.14), transparent 55%);\n}\n```\n\nYou **must** extend it with these mandatory semantic aliases and missing tokens:\n\n```css\n:root {\n  \u002F* semantic aliases *\u002F\n  --primary: var(--color-primary);\n  --secondary: var(--color-accent);\n  --bg-primary: var(--color-bg);\n  --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text);\n  --text-secondary: var(--color-text-muted);\n  --border-default: var(--color-border);\n  --font-base: var(--font-sans);\n  \u002F* state + motion + layering tokens *\u002F\n  --text-success: #4e6a45;   \u002F* darkened sage for AA contrast on light surfaces *\u002F\n  --text-error: #a12633;     \u002F* deep crimson, distinct from --color-primary *\u002F\n  --border-success: #8fa583;\n  --border-error: #a12633;\n  --spacing-gap: var(--space-6);\n  --transition-fast: 150ms;\n  --transition-normal: 280ms;\n  --z-dropdown: 100;\n  --z-modal: 200;\n  --z-toast: 300;\n}\n```\n\n* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforce this in **both** themes.\n* **Light Mode Background:** Never pure white; the spec's `#fbeef0` blush is the page background. Where a near-white is needed, use `#fefefe`, never `#ffffff`.\n* **Signature Ornament:** The double gilt frame (a slim gold hairline inset within a soft blush border, like a miniature portrait frame — implemented via `border` + `outline` with negative `outline-offset`) must repeat on the nav, every card, and the primary button. A script display face (`Great Vibes`) is used for headlines and brand marks.\n\n### 1.3 Mandatory Dark Mode Support\nDark mode **must** be authored by you (the source spec omits it) as a \"Midnight Salon\" palette — candlelit ballroom: deep aubergine\u002Fplum surfaces, blush-cream text, brightened gilt. Suggested starting values (validate and adjust for WCAG AA):\n\n```css\n--color-bg: #241a21; --color-surface: #2e222b; --color-surface-strong: #3b2b35;\n--color-border: #6b4a58; --color-text: #f6e8ed; --color-text-muted: #cfa9b8;\n--color-primary: #e093ab; --color-accent: #d9b878; --color-sage: #a9c0a0;\n--text-success: #a9c39d; --text-error: #f0929f; --border-success: #a9c0a0; --border-error: #f0929f;\n--shadow-sm\u002Fmd\u002Flg: deeper rose-black shadows (e.g., rgba(20,10,14,0.4)+);\n--floral-wash: radial-gradient(120% 100% at 100% 0%, rgba(217,184,120,0.10), transparent 55%);\n```\n\n* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` and `:root.dark { … }` so a stored class preference can override the OS setting without any HTML restructuring.\n* **Contrast Pairing in Dark:** The gilt hairline and blush borders must remain clearly visible on plum. Filled primary buttons in dark mode must flip to dark text (`#2b1c23`) on the lightened rose to preserve the pairing rule.\n* **Persistence:** Store the user's choice in `localStorage` (e.g., key `regencycore-theme`); fall back to `prefers-color-scheme` on first visit. Provide a visible toggle control in the nav — a gilt-framed pill button with a Google Material Symbol (`light_mode` \u002F `dark_mode`) — carrying correct `aria-pressed` and `aria-label` state, updated by `script.js`.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with **Flexbox** (and CSS Grid only for card grids).\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless there is an explicitly justified exception (e.g., `.input-group` stacks label\u002Finput\u002Ferror vertically and may use `flex-start`).\n* **Mobile-Friendly First:** Rows must convert to columns on smaller viewports; no horizontal scrolling at any width from 320px up. Test at 320px, 768px, 1024px, 1440px.\n\n### 1.5 Styling Approach — Custom CSS Design System\n* The provided Regencycore token stylesheet **is** the framework: implement with clean custom CSS in `style.css`. Do **not** introduce Tailwind or any other framework.\n* All component styles must map back to the CSS variables and generic reusable class names (`.btn`, `.card`, `.input`, `.badge`, `.nav`), extended with BEM elements\u002Fmodifiers.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Cormorant Garamond** (body\u002Fserif) and **Great Vibes** (script display) via Google Fonts `\u003Clink>` tags (with `preconnect`), bound to `--font-sans` \u002F `--font-base` and `--font-display`.\n* **Icons:** Use **Google Material Symbols Rounded** exclusively. Explicitly forbidden: raw inline SVGs, local icon files, emoji-as-icons, and external image assets. Decorative elements (pearls, florals, gilt flourishes) must be pure CSS — e.g., pearls as `radial-gradient` circles with highlight offsets, floral washes as layered gradients, dividers as dotted \"pearl strings.\"\n* Icon markup pattern: `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">icon_name\u003C\u002Fspan>`; control `FILL`\u002Fweight via a CSS class using `font-variation-settings`, never inline styles.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\nAdopt the source spec's base classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`) and extend them so every state below is fully styled via CSS classes.\n\n### 2.1 Button Component\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Minimum touch target 44×44px. Pill radius per spec.\n* **Hover:** `translateY(-1px)` lift with `--shadow-md` and `cursor: pointer`.\n* **Focus:** Distinct `:focus-visible` ring using `--color-primary` (`outline`\u002F`box-shadow`), visible in both themes.\n* **Active\u002FPressed:** `transform: scale(0.97)` click feedback.\n* **Loading:** `.btn--loading` (with `aria-busy=\"true\"` on the button) — disables pointer events, prevents double-clicks\u002Fsubmissions, and renders a CSS-only spinner (rotating ring using `currentColor`) without distorting button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no transform.\n* **Success\u002FError:** `.btn--success` \u002F `.btn--error` temporary feedback states driven by `--text-success` \u002F `--text-error` (used by the Final CTA form).\n* **Danger variant:** Define `.btn--danger` in the stylesheet (deep crimson fill, distinct in both light and dark) as part of the complete design system, even if the page contains no destructive action.\n* **Primary:** `.btn--primary` per spec (rose fill, gilt border); in dark mode it must satisfy the contrast pairing rule from 1.3.\n\n### 2.2 Card Component\n* **Default:** Flexible flexbox layout, `--color-surface` background, double gilt frame (`border` + inset `outline`), `--shadow-md`, `--radius-lg`.\n* **Hover:** `transform: translateY(-2px)` with elevation shift to `--shadow-lg`.\n* **Focus-within:** Card borders\u002Fgilt outline intensify when a child link or button receives focus.\n* **Loading (Skeleton):** `.card--skeleton` with a CSS shimmer animation (`@keyframes`) that preserves layout dimensions; demonstrate it on the Testimonials cards during a brief simulated load (~600ms), disabled under `prefers-reduced-motion`.\n* **Empty State:** `.card--empty` structured fallback with a Google Material Symbol and clear guidance text, defined in the stylesheet as part of the component system.\n\n### 2.3 Form & Input Requirements\nUsed by the Final CTA email capture (and any future form):\n* **States:** Empty, Focused (the spec's rose ring via `box-shadow` + `color-mix`), Filled, Valid (`.input--valid` — sage border + check Material Symbol), Invalid (`.input--invalid` — crimson border, `--text-error` message, error Material Symbol), Disabled, Read-only.\n* **Structure:** `.input-group` flex container (column; justified `flex-start` exception) wrapping a `\u003Clabel>`, the `.input` field, and a dedicated error feedback element (`id` referenced by `aria-describedby`, inside an `aria-live=\"polite\"` region).\n* **Never color-only:** Valid\u002Finvalid states must always pair color with an icon and\u002For text message.\n\n### 2.4 FAQ Accordion (Disclosure)\n* Build with native `\u003Cdetails>` \u002F `\u003Csummary>` for free keyboard operability — no mouse-only interactions.\n* **Summary:** Question in Cormorant serif + `expand_more` Material Symbol that rotates 180° when open; full-width touch target ≥44px tall; `cursor: pointer`.\n* **Panel:** Animated open\u002Fclose via CSS transition (e.g., `grid-template-rows` or `max-height` technique); animation disabled under `prefers-reduced-motion` while content remains fully accessible.\n* If you introduce any modal\u002Foverlay beyond this spec, it must follow standard modal rules (centered flex, backdrop, icon close button, focus trap, `Esc`\u002Foverlay-click close, `--z-modal`).\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid `clamp()` typography, responsive breakpoints, zero horizontal overflow.\n* **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; honor `prefers-reduced-motion` globally (disable transforms, lifts, shimmer, and scroll-behavior; keep the functional loading spinner).\n* **Accessibility (a11y):** WCAG AA contrast in both Light and Dark modes. Semantic HTML5 landmarks (`header`, `main`, `footer`, `section` with `aria-labelledby`), a single `h1`, logical heading hierarchy, skip-to-content link, `lang=\"en\"`, correct ARIA roles\u002Flabels on custom widgets (theme toggle, mobile menu), logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, success, loading).\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** `.btn--danger` must be visually distinct in both themes (see 2.1).\n* **Anchor Navigation:** `scroll-behavior: smooth` (reduced-motion aware) and `scroll-margin-top` on sections to offset the sticky nav.\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 deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`). No inline styles anywhere.\n* **Naming Convention:** BEM throughout (`block__element--modifier`), matching the spec's `.btn--primary` pattern — never mix conventions.\n* **Copy:** Write original, coherent English copy in a Regency tone (e.g., \"Request an Invitation,\" \"The Season Awaits,\" \"Most Sought After\"). Invent a consistent fictional offering (e.g., a members' social club for the modern season) and keep terminology consistent across all sections. Lorem ipsum is forbidden.\n* **No Unrequested Components:** Build exactly the eight requested sections plus the header\u002Fnav and theme toggle. Do not add carousels, chat widgets, cookie banners, or analytics.\n* **`script.js` scope:** theme init\u002Ftoggle\u002Fpersistence, mobile nav menu, Final CTA form validation + simulated submit (loading → success), footer current year. Optional: subtle IntersectionObserver reveal animations that never hide content when JS fails.\n\n---\n\n## 5. PAGE BLUEPRINT (SECTION-BY-SECTION)\n\n### 5.1 Header \u002F Nav\nSticky header wrapping the spec's `.nav` (gilt-framed, `--radius-lg`): script brand mark in `Great Vibes` (e.g., \"The Gilded Season\"), links to Features \u002F How It Works \u002F Testimonials \u002F Pricing \u002F FAQ, the theme toggle (1.3), and a compact `.btn--primary` \"Request an Invitation\" → `#cta`. On mobile (\u003C768px), links collapse into an accessible disclosure panel toggled by a button with `aria-expanded` \u002F `aria-controls`, hamburger\u002Fclose Material Symbols, `Esc` to close, no horizontal scroll.\n\n### 5.2 Hero\nNear-full-viewport (`min-height: 80vh`) centered flex column over `--floral-wash`: `.badge` eyebrow (e.g., \"Now Assembling the Season\"), `h1` in `Great Vibes` at `clamp()` display size, Cormorant lede paragraph, two CTAs (`.btn--primary` \"Request an Invitation\" → `#cta`; secondary `.btn` \"Peruse the Offerings\" → `#features`), and a CSS pearl-string divider. Optional decorative corner flourishes in pure CSS gradients only.\n\n### 5.3 Features — 3 Cards\nSection header (script eyebrow + serif `h2`), then a 1-col → 3-col responsive grid of `.card`s. Each card: Material Symbol inside a gilt-ringed circle, `h3` title, two–three lines of copy, and an inline text link. Apply hover lift and `:focus-within` gilt glow (2.2).\n\n### 5.4 How It Works — 3 Steps\nThree steps with ornate `Great Vibes` numerals (\"1\", \"2\", \"3\") inside gilt-ring circles, step titles and copy. On desktop, connect steps with a horizontal CSS pearl-string line; stack vertically on mobile with the line running vertically.\n\n### 5.5 Testimonials\nThree gilt-framed `.card`s, each with a script\u002FCSS oversized quotation mark or `format_quote` Material Symbol, one–two sentence quote, and a CSS pearl avatar (radial-gradient circle, no images) with an aristocratic English name and title (e.g., \"Lady Arabella Whitmore, Debutante of the Season\"). Demonstrate the skeleton shimmer on initial load (2.2).\n\n### 5.6 Pricing — 3 Tiers\nThree `.card`s in a responsive grid: e.g., \"The Debutante\" (entry), \"The Diamond\" (featured), \"The Duchess\" (premium). The featured middle tier uses `.card--featured` — intensified double gilt frame, `.badge` reading \"Most Sought After,\" stronger elevation, slight scale on desktop. Each tier: script name, price, feature list with `check` Material Symbols in sage, and a `.btn` (featured tier gets `.btn--primary`).\n\n### 5.7 FAQ\nFive–six `\u003Cdetails>`\u002F`\u003Csummary>` accordion items (2.4) inside a max-width column, styled with the gilt-frame language at `--radius-md`.\n\n### 5.8 Final CTA\nA dramatic full-width panel on `--color-surface-strong` with the double gilt frame: script `h2`, short persuasive line, and the email capture `.input-group` (label, pill `.input`, `.btn--primary` submit). Flow: empty → validate on submit → invalid shows `.input--invalid` + error icon + message in the `aria-live` region → valid shows `.btn--loading` (spinner, `aria-busy`) → `.btn--success` with check icon and a success message (\"Your card has been sent.\") announced via `aria-live`. Simulate the request with a timeout; no backend.\n\n### 5.9 Footer\nTop gilt hairline divider; script brand mark + one-line tagline; two–three columns of secondary links (\"The Estate,\" \"Correspondence,\" \"Fine Print\" — anchor to page sections where sensible, otherwise descriptive `href=\"#\"` links); social icon buttons (Material Symbols) with `aria-label`s; muted copyright line with the current year injected by JS.\n\n---\n\n## 6. ACCEPTANCE CHECKLIST\n\nBefore delivering, verify: zero inline styles; zero inline SVGs\u002Fimages; all tokens from 1.2 present; dark mode authored, toggleable, persisted, and AA-validated in both themes; every flex container defaults to `align-items: center` (documented exceptions only); all button states (hover\u002Ffocus\u002Factive\u002Floading\u002Fdisabled\u002Fsuccess\u002Ferror\u002Fdanger) styled; card hover\u002Ffocus-within\u002Fskeleton\u002Fempty states styled; form states complete with non-color-only feedback and `aria-live`; FAQ fully keyboard operable; no horizontal scroll 320–1440px; `prefers-reduced-motion` respected; BEM naming consistent; separate `index.html` \u002F `style.css` \u002F `script.js` with a single deferred script; all copy in themed English.\n",1791954987504]