[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-406-Neoclassicism":3},"# Neoclassicism Landing Page — Build Specification for Coding Agent\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-ready landing page in a single pass — no drafts, no TODOs, no placeholder stubs.\n\n**Project Brief:**\n- **Theme:** Neoclassicism (1760s–1830s Greco-Roman revival). Strict symmetric composition, centered layouts, column\u002Fpediment motifs used as *structural framing, not decoration*. Cream\u002Fmarble-white surfaces with muted gold and deep ink accents. Serif type evoking carved stone. Reference moods: the Panthéon in Paris, Jacques-Louis David's history paintings, Wedgwood's Jasperware relief medallions.\n- **Sections (in order):** Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), Final CTA (newsletter form), Footer with secondary links.\n- **Source note (translated from spec):** The source palette does not declare light\u002Fdark modes — you must author a dark mode and validate contrast in **both** light and dark before considering the work complete.\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. All styling lives in `style.css`.\n- **Class\u002FID Selectors Only:** Every design property, layout rule, and state is applied via class or ID selectors.\n- **Minimal HTML Modifications:** HTML stays semantic and styling-agnostic (`header`, `nav`, `main`, `section`, `footer`, `h1–h3` hierarchy). Changing the site's look must require editing only `style.css`.\n\n### 1.2 CSS Variables & Theme Tokens\nAdopt the following token block as the **canonical foundation** of `style.css` (extend it, do not rename its variables):\n\n```css\n\u002F* Neoclassicism — design tokens *\u002F\n\u002F* 1760s–1830s | Symmetric Greco-Roman revival: marble, muted gold, ink, restraint *\u002F\n:root {\n\u002F* color *\u002F\n--color-bg: #f2ede0;\n--color-surface: #faf7ef;\n--color-surface-2: #e3dbc7;\n--color-text: #1f2733;\n--color-text-muted: #5a5850;\n--color-primary: #8a6d3b;\n--color-accent: #2f3b52;\n--color-marble-vein: #c9c0a8;\n--color-ink: #14181f;\n\u002F* radius *\u002F\n--radius-sm: 0px;\n--radius-md: 2px;\n--radius-lg: 4px;\n--radius-pill: 999px;\n\u002F* shadow *\u002F\n--shadow-plinth: 0 1px 0 #ffffff inset, 0 10px 22px rgba(31,39,51,0.14);\n--shadow-relief: 0 1px 2px rgba(31,39,51,0.22);\n\u002F* blur *\u002F\n--blur-none: 0px;\n\u002F* font *\u002F\n--font-sans: 'EB Garamond', 'Trajan Pro', 'Cinzel', 'Georgia', serif;\n--font-display: 'Cinzel', 'Trajan Pro', serif;\n--font-mono: ui-monospace, monospace;\n\u002F* text *\u002F\n--text-xs: 0.75rem;\n--text-sm: 0.875rem;\n--text-base: 1rem;\n--text-lg: 1.125rem;\n--text-xl: 1.375rem;\n--text-2xl: 1.75rem;\n--text-3xl: 2.25rem;\n--text-4xl: 3rem;\n--text-5xl: 4rem;\n\u002F* space *\u002F\n--space-1: 4px;\n--space-2: 8px;\n--space-3: 12px;\n--space-4: 16px;\n--space-6: 24px;\n--space-8: 32px;\n--space-12: 48px;\n--space-16: 64px;\n--space-24: 96px;\n\u002F* ease *\u002F\n--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n\u002F* extra: pediment cap + fluted-column divider *\u002F\n--pediment-cap: linear-gradient(180deg, var(--color-surface-2) 0 3px, transparent 3px);\n--fluted-divider: repeating-linear-gradient(90deg, var(--color-marble-vein) 0 1px, transparent 1px 10px);\n}\n```\n\n- **Mandatory semantic aliases:** In addition to the block above, define and use these tokens, mapped to the palette: `--primary: var(--color-primary)`, `--secondary: var(--color-accent)`, `--bg-primary: var(--color-bg)`, `--bg-secondary: var(--color-surface)`, `--text-primary: var(--color-text)`, `--text-secondary: var(--color-text-muted)`, `--border-default: var(--color-marble-vein)`.\n- **Success\u002FError tokens (not in source palette — derive in-theme):** `--text-success` \u002F `--border-success` as a muted laurel green (e.g., `#4a6741` light mode) and `--text-error` \u002F `--border-error` as a deep oxblood red (e.g., `#8c3a2e` light mode). Both must pass WCAG AA contrast in light **and** dark modes.\n- **Required additions:** `--shadow-sm: var(--shadow-relief)`, `--shadow-md: var(--shadow-plinth)`, `--spacing-gap: var(--space-6)`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.\n- **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforced in both themes, not just the default.\n- **Light Mode Background:** Never pure white. The cream `#f2ede0` is the page ground; if a near-white is needed, use `#fefefe`, never `#ffffff`.\n\n### 1.3 Mandatory Dark Mode Support\n- **Implementation:** Author a dark mode (\"Ink & Marble\") since the source does not declare one. Provide tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>` (class wins when present). Starting point — verify and adjust until AA passes:\n\n```css\n.dark {\n--color-bg: #14181f;\n--color-surface: #1f2733;\n--color-surface-2: #2a3444;\n--color-text: #f2ede0;\n--color-text-muted: #b5ae9d;\n--color-primary: #c9a86a;\n--color-accent: #93a7c7;\n--color-marble-vein: #3d4657;\n--color-ink: #e9e2cf;\n}\n```\n\n- **Theme Switching:** Background and text variables must swap seamlessly with no HTML restructuring; shadows may deepen for legibility on dark grounds.\n- **Persistence:** Store the user's choice in `localStorage` (e.g., key `theme`); on first visit fall back to `prefers-color-scheme`. Provide a visible toggle control in the nav with correct `aria-pressed` and `aria-label` state (see 2.6).\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- **Flexbox for structure:** Build all layout containers with `display: flex`.\n- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is justified in a CSS comment (the single permitted exception: equal-height card rows may use `align-items: stretch` for symmetric card grids).\n- **Mobile-Friendly First:** All flex rows convert to columns on small viewports (`flex-direction: column` under your mobile breakpoint); use `flex-wrap` and `clamp()` for fluid type; horizontal scrolling is forbidden at any width.\n\n### 1.5 Styling Approach & Naming Convention\n- **Clean custom CSS** in `style.css` — the provided base component classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`) are the foundation; extend them, do not rewrite their token references. If you introduce Tailwind, it may only be used via `@layer`\u002F`@apply` mapping back to these variables — never mix raw utility classes with BEM.\n- **One convention — BEM** — everywhere: `.btn--primary`, `.card--featured`, `.faq__item`, `.footer__links`. Never mix conventions in a single deliverable.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load **Cinzel** (display\u002Fheadings\u002Fbuttons — carved Roman capitals; it stands in for Trajan Pro, which is not a webfont) and **EB Garamond** (body paragraphs — readable serif at text sizes) via Google Fonts `\u003Clink>` tags in `\u003Chead>`. Bind them to `--font-display` and `--font-sans` per the token block. Headings and buttons are uppercase with generous letter-spacing (`.06em`+), evoking carved inscription.\n- **Icons:** Use **Google Material Symbols (Outlined)** loaded via Google Fonts. Raw inline SVGs, local icon files, and emoji-as-icons are explicitly forbidden. Use icons with restraint — the theme demands it (feature medallions, form validation, FAQ chevron, theme toggle, close buttons only).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component\nStyle all states via CSS classes, extending the provided `.btn` base:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; uppercase letterspaced per the base class.\n- **Hover:** Inset gold ring + relief shadow (per provided base), `cursor: pointer`.\n- **Focus:** Distinct `:focus-visible` ring using `--color-accent` with 3px offset for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)` with shadow removed — tactile \"stamp\" feedback.\n- **Loading (`.btn--loading`):** Disables pointer events, prevents double-clicks\u002Fdouble-submits, and renders a CSS spinner (border-based, `currentColor`) or rotating Material Symbol — without changing button dimensions (reserve spinner space or overlay absolutely).\n- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`, no shadow.\n- **Success\u002FError (`.btn--success`, `.btn--error`):** Temporary post-submit feedback driven by `--text-success` \u002F `--text-error`, announced to screen readers via an `aria-live` region.\n- **Variants:** `.btn--primary` (accent ground, surface text — per provided base), `.btn--secondary` (surface ground, ink border), and `.btn--danger` (oxblood `--text-error` ground) — the danger variant must be visually distinct in **both** light and dark themes.\n\n### 2.2 Card Component\nExtend the provided `.card` (surface ground, `--pediment-cap` image, marble-vein border, plinth shadow, centered text):\n- **Default:** Flexible flexbox layout, symmetric internal spacing.\n- **Hover (interactive cards):** `transform: translateY(-2px)` plus a shadow shift.\n- **Focus-within:** Card border shifts to `--color-accent` when any child link\u002Fbutton receives focus.\n- **Loading (`.card--skeleton`):** Shimmer animation defined in CSS (gradient sweep keyframes) to prevent layout jumps; shimmer is disabled under `prefers-reduced-motion`.\n- **Empty (`.card--empty`):** Structured fallback with a Material Symbol icon and clear guidance text.\n\n### 2.3 Form & Input Requirements\nThe Final CTA contains a newsletter form; apply these rules to every input:\n- **States:** Empty, Focused (accent underline per provided base **plus** a soft `box-shadow` ring), Filled, Valid (`--border-success` underline + `check_circle` Material icon), Invalid (`--border-error` underline, error icon, red message text), Disabled, Read-only.\n- **Structure:** Flex column container wrapping a visible `\u003Clabel for=\"...\">`, the `.input` field, and a dedicated error feedback `\u003Cp>` bound with `aria-live=\"polite\"`. Never communicate state by color alone — always pair color with icon and text.\n\n### 2.4 Modal \u002F Popup Requirements\nIf any dialog is included (optional — e.g., a plan-details or legal dialog), it must satisfy: **States** — Opening, Open, Loading, Success\u002FError, Closing, all animated via CSS transitions; **UX** — centered flex container (`align-items: center`), backdrop overlay at `--z-modal`, Material Symbol close button, keyboard focus trapping, restore focus on close, closable via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`.\n\n### 2.5 Accordion (FAQ)\n- Use native `\u003Cdetails>`\u002F`\u003Csummary>` (or a `button` + region pattern with `aria-expanded`\u002F`aria-controls` if scripting single-open behavior).\n- Summary row: symmetric, uppercase small-caps question text, Material Symbol `expand_more` chevron rotating 180° on open.\n- Animate open\u002Fclose via a CSS height technique; fall back to instant toggle under `prefers-reduced-motion`. Fully keyboard operable.\n\n### 2.6 Theme Toggle\n- Icon-only button in the nav using Material Symbols (`dark_mode` \u002F `light_mode`), swapping icon with the theme.\n- Correct `aria-pressed` and dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"); persists via `localStorage`; falls back to `prefers-color-scheme` on first visit; toggles `.dark` on `\u003Chtml>` with no layout shift.\n\n---\n\n## 3. PAGE SECTION SPECIFICATIONS\n\nAll sections are **strictly symmetric and centered**, separated by `--space-24` rhythm, with ornament confined to structural framing (pediment caps, fluted dividers, relief medallions) — never floating decoration.\n\n- **3.1 Header\u002FNav:** Sticky `.nav` per provided base (gold bottom border + marble-vein `::after`). Brand wordmark in Cinzel, centered anchor links to each section, theme toggle. On mobile: brand + toggle + a menu button revealing a dropdown panel at `--z-dropdown` (keyboard operable, `Esc` closes).\n- **3.2 Hero:** Centered flex column, ~85vh min-height. A CSS-drawn pediment\u002Fentablature rule (borders\u002Fgradients only — no images) frames the content structurally. Eyebrow `.badge`, `h1` in Cinzel via `clamp()`, restrained lede in EB Garamond, two CTAs (`.btn--primary` + `.btn--secondary`), `--fluted-divider` separator beneath. Subtle marble-vein background texture via CSS gradients.\n- **3.3 Features:** Exactly 3 `.card` items in a symmetric flex row (wraps to a single column on mobile). Each: circular relief medallion containing a Material Symbol (Jasperware reference), `h3`, body text. Apply hover\u002Ffocus-within states per 2.2.\n- **3.4 How It Works:** 3 steps marked with Roman numerals **I \u002F II \u002F III** in medallions, connected by a fluted divider line on desktop, stacked symmetrically on mobile. Each step: numeral, `h3`, description.\n- **3.5 Testimonials:** 3 quotes in a symmetric layout. Oversized Cinzel quotation mark, centered quote text, attribution with initials medallion (no photos), name, and role.\n- **3.6 Pricing:** 3 tiers; the middle tier is `.card--featured` — elevated with `--color-surface-2` or accent border, a \"Recommended\" `.badge`, and slightly stronger shadow. Each tier: name, price, feature list with `check` Material icons, CTA button per 2.1. The featured tier must remain distinct in both light and dark modes.\n- **3.7 FAQ:** Accordion per 2.5 with 5–6 real questions and answers written in the theme's voice.\n- **3.8 Final CTA:** Pediment-framed centered panel: headline, supporting line, newsletter form per 2.3 (email `.input` + `.btn--primary` submit). Submit flow: loading state → success feedback (button success state + inline confirmation message in an `aria-live` region).\n- **3.9 Footer:** `--fluted-divider` top rule, centered composition. Secondary link groups (e.g., Explore, Company, Legal) with clearly labeled, focusable links — anchor to page sections where possible; `href=\"#\"` is permitted only for genuinely unspecified targets. Small print line beneath, stacked symmetrically on mobile.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow at any viewport.\n- **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; a global `prefers-reduced-motion` block disables transforms, shimmer, chevron rotation, and smooth scrolling.\n- **Accessibility (a11y):** Semantic HTML5 landmarks, logical heading hierarchy, skip-to-content link, visible `:focus-visible` styles everywhere, full keyboard operability (no mouse-only interactions), WCAG AA contrast in both modes, never color-only state communication, and `aria-live` regions for dynamic feedback (form errors, submit success, theme change).\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 light and dark themes.\n- **Anchor Navigation:** Smooth-scroll to sections, respecting reduced motion.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Three separate files — `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` entry point; Google Fonts `\u003Clink>` tags in `\u003Chead>`.\n- **Naming Convention:** BEM exclusively, extending the provided `.btn--primary` modifier pattern. Never mix conventions.\n- **Copy:** All user-facing copy written in **English**, authored in-theme — stately, restrained, with carved-stone gravitas (invent a fitting brand name). No lorem ipsum; real headlines, feature copy, testimonials, pricing, and FAQ answers are required. Placeholder `href=\"#\"` is permitted only for genuinely unspecified footer\u002Flegal targets.\n- **Completion Gate:** Before declaring the work done, validate every text\u002Fbackground pairing in **both light and dark modes** (the source palette declared none) and fix any AA failures. The deliverable must run correctly in a browser on the first attempt.\n",1791954986229]