[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-478-Vintage-Lithograph-Victorian":3},"# BUILD SPECIFICATION — LANDING PAGE: \"VINTAGE LITHOGRAPH \u002F VICTORIAN\"\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Deliver a complete, production-quality landing page in a **single attempt** — final code only, no drafts, no TODOs, no stubs.\n\n**Concept:** A single-page marketing site rendered as an 1800s Victorian lithograph: hand-drawn ornament, ribbon banners, vignette borders, parchment grain, watercolor washes, ink stipple, and decorative scrollwork — all achieved in CSS. Invent one coherent fictional brand (e.g., a Victorian printing atelier or artisan studio) and write every string of copy in its voice, in **English**.\n\n**Page order:** Skip link → Sticky Header → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n\n---\n\n## DESIGN BRIEF & ART DIRECTION\n\n**Aesthetic keywords:** hand-drawn lithograph, ornamental ribbons, vignette borders, parchment grain, watercolor wash, ink stipple, antiquated, scholarly, art nouveau, 1800s Victorian Revival.\n\n**CSS-rendered effects (no image assets):**\n- **Parchment grain:** layered radial\u002Frepeating gradients and\u002For a data-URI noise texture declared in `style.css`.\n- **Ink stipple:** fields of tiny radial-gradient dots on section edges, medallions, and dividers.\n- **Watercolor washes:** large blurred radial-gradients on overlay layers using `mix-blend-mode: multiply`.\n- **Vignette:** fixed full-viewport `radial-gradient` overlay darkening the page edges.\n- **Ribbon banners:** CSS shapes (`clip-path` + pseudo-elements) for section headers and the pricing badge.\n- **Scrollwork & fleuron dividers:** ornamental rules between sections; corner flourishes framing the hero.\n- **Soft diffuse daylight:** broad warm gradients as the base light.\n- **Scroll reveals:** elements fade\u002Frise and ribbons \"unfurl\" as they enter the viewport.\n\n**Theme tokens — Light (default), declared in `:root`:**\n\n| Token | Value | Use |\n|---|---|---|\n| `--primary` | `#E85D35` Vermillion | CTA fills, ribbons, accents |\n| `--secondary` | `#223A70` Navy | Links, featured pricing, focus rings |\n| `--bg-primary` | `#F0E3CE` Aged Parchment | Page background |\n| `--bg-secondary` | `#E9DABF` Deeper Parchment | Cards, panels, header |\n| `--text-primary` | `#0D0D15` Ink Black | Headings, body |\n| `--text-secondary` | `#4A4A4A` Charcoal | Muted copy |\n| `--text-success` | `#4F6B45` Botanical Green | Success states |\n| `--text-error` | `#8E2B2B` Oxblood | Error states (distinct from Vermillion) |\n| `--border-default` | `#8B7355` Warm Brown | Ornamental borders |\n| `--border-error` \u002F `--border-success` | `#8E2B2B` \u002F `#4F6B45` | State borders |\n\nSupplementary decorative tokens: `--accent-tan: #D4A574`, `--accent-brown: #8B7355` (washes, highlights, stipple).\n\n**Theme tokens — Dark (`.dark`):** `--bg-primary: #14110B` (deep sepia ink — never pure black), `--bg-secondary: #1F1A12`, `--text-primary: #F0E3CE`, `--text-secondary: #C9B694`, `--primary: #F0703F`, `--secondary: #8FA6D9`, `--text-success: #8FB573`, `--text-error: #E08A76`, `--border-default: #9A8464`, with `--border-error`\u002F`--border-success` matched to their text tokens. Re-tune textures in dark mode: reduce grain opacity, soften washes, deepen the vignette, lighten stipple flecks.\n\n**Contrast guidance:** Vermillion is a fill\u002Fborder accent — text placed on Vermillion fills must be Ink Black; Vermillion used *as text* only at large display sizes (darken to `#C7481F` for small accents). Verify ≥ 4.5:1 for body text and ≥ 3:1 for large text\u002FUI in **both** themes.\n\n**Typography (Google Fonts only):** `--font-display: 'Playfair Display'` (headings, prices), `--font-base: 'Cormorant Garamond'` (all body text binds here), `--font-script: 'Great Vibes'` (eyebrows, signatures, drop caps). Load via `\u003Clink>` with preconnect.\n\n**Icons:** Google Material Symbols (Rounded), ink-colored, classic glyphs (`history_edu`, `auto_stories`, `draw`, `workspace_premium`, `mail`, `check`, `expand_more`, `close`, `south`, `light_mode`\u002F`dark_mode`).\n\n---\n\n## PAGE MAP & SECTION REQUIREMENTS\n\n- **Skip link:** first focusable element; visually hidden until focused.\n- **Header (sticky):** slim bar on `--bg-secondary` with a hairline ornamental bottom rule; brand wordmark (display font), anchor links to all sections (hidden below `md`), and the theme toggle (always visible). On scroll, a JS-toggled class deepens its shadow and tightens padding.\n- **Hero:** ~90vh; layered parchment + watercolor washes + vignette; script-font eyebrow on a small ribbon; display H1; supporting copy; primary filled CTA + secondary outline CTA; ornamental scrollwork frame with corner flourishes; animated scroll cue (`south` icon). Staggered load-in reveal.\n- **Features:** ribbon-banner section title; 3 `.card`s (3-column → 1-column): Material Symbol inside a double-ring medallion, title, 2–3 lines of copy. Hover lift; focus-within highlight.\n- **How It Works:** 3 steps with Roman numerals (I, II, III) in medallions, joined by an ornamental dotted rule (horizontal on desktop, vertical on mobile); step title + copy.\n- **Testimonials:** 3 quote cards; oversized ornate quotation glyph via `::before`; italic quote; attribution with a script-font name flourish; per-card watercolor accent (Vermillion \u002F Navy \u002F Tan).\n- **Pricing:** 3 tiers; middle tier `.card--featured`: elevated, \"Most Favored\" ribbon badge, distinct CTA; each tier: name, large price + billing note, feature list with `check` icons, CTA button (primary on featured, outline elsewhere). The featured tier must remain distinct in both themes.\n- **FAQ:** 5–6 accessible accordion items: `\u003Cbutton aria-expanded>` + panel (`id` \u002F `aria-labelledby`); `expand_more` icon rotates 180°; animated height; fully keyboard operable. No modals in this section.\n- **Final CTA:** full-bleed band with the strongest wash + vignette; headline, copy, and an email-capture `.input-group` + `.btn--primary` running Loading → Success\u002FError feedback (see 2.1 \u002F 2.3); microcopy beneath.\n- **Footer:** 4 columns → stacked on mobile: brand + tagline; two secondary link groups (English labels, e.g., \"Atelier\", \"Company\"); social\u002Fcontact row with Material Symbols; ornamental divider; copyright line. All links have visible hover\u002Ffocus states.\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:** every color, layout, and state rule lives in `style.css`, targeted via class\u002FID selectors.\n- **Minimal HTML modifications:** HTML stays semantic and style-agnostic — a full re-theme must be achievable by editing `style.css` alone.\n\n### 1.2 CSS Variables & Theme Tokens\n- Declare the full token set from the Design Brief in `:root`; override under `.dark` (and `@media (prefers-color-scheme: dark)` as the no-JS fallback).\n- **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in both themes.\n- **Light mode background** is Aged Parchment, never pure white; if a near-white is ever required, use `#fefefe`, not `#ffffff`.\n- Also define: `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px` (Victorian corners stay sharp; radii apply to pills\u002Fbadges only), `--shadow-sm: 0 1px 4px rgba(13,13,21,0.10)`, `--shadow-md: 0 8px 24px rgba(13,13,21,0.16)`, `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.25, 0.8, 0.25, 1)`, and `--z-dropdown`, `--z-modal`, `--z-toast` for layered components.\n\n### 1.3 Mandatory Dark Mode Support\n- Provide dark tokens via the `.dark` class AND `@media (prefers-color-scheme: dark)`; switching themes swaps variables only — no HTML restructuring.\n- Persist the user's choice in `localStorage` (fall back to `prefers-color-scheme` on first visit); initialize at the top of `script.js`, applying `.dark` to `\u003Chtml>` as early as possible.\n- The header carries a visible toggle (sun\u002Fmoon Material Symbols) with correct `aria-pressed` and a descriptive `aria-label` that updates with state.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with Flexbox (Tailwind flex utilities or CSS flex).\n- **Default alignment:** every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- **Mobile-first:** rows collapse to columns on small viewports; zero horizontal scrolling from 320px up.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n- Use Tailwind CSS via CDN for structural utilities only (flex, grid, gaps, responsive prefixes).\n- All visual theming — colors, fonts, textures, effects, states — resolves through CSS variables and reusable component classes (`.btn`, `.card`, `.input-group`) authored in `style.css`. Never hardcode hex values in utilities.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- Load all typefaces from Google Fonts via `\u003Clink>`; bind default text to `--font-base`.\n- Icons come exclusively from Google Material Symbols. Raw inline `\u003Csvg>` elements and local icon files are forbidden.\n- **Exception clause:** ornamental scrollwork\u002Fflourish *decorations* may be embedded as data-URI SVGs inside `style.css` (`background-image` \u002F `border-image`) only — never as inline `\u003Csvg>` nodes in the HTML.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`; modifiers `.btn--primary`, `.btn--secondary`, `.btn--outline`, `.btn--danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; display font, letter-spaced small caps.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n- **Focus:** distinct ring built from CSS variables (e.g., double `box-shadow` ring in `--secondary`) — visible in both themes.\n- **Active:** `transform: scale(0.97)`.\n- **Loading:** disables pointer events, prevents double-clicks, shows a CSS spinner or rotating Material Symbol without changing button dimensions; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styling driven by `--text-success` \u002F `--text-error` (icon + label swap), announced via `aria-live`.\n\n### 2.2 Card Component (`.card`, `.card--featured`)\n- **Default:** flexbox layout on `--bg-secondary`, ornamental Warm Brown border (doubled via `box-shadow`), `--shadow-sm`.\n- **Hover:** `transform: translateY(-2px)` plus shadow elevation.\n- **Focus-within:** border highlights when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** shimmer animation class defined in CSS; preserves final dimensions to prevent layout jumps.\n- **Empty state:** fallback layout with a Material Symbol and clear guidance copy.\n\n### 2.3 Form & Input (`.input-group`)\n- **Structure:** flex container wrapping a `\u003Clabel>`, the input, and a dedicated error-feedback element.\n- **States:** empty, focused (outline ring), filled, valid (success border + `check` icon), invalid (error border, `--text-error` message + error icon), disabled, read-only.\n- Errors render in an `aria-live=\"polite\"` container tied to the input via `aria-describedby`; never color-only — always icon + text.\n\n### 2.4 Modal \u002F Popup (applies to any overlay introduced; the FAQ remains accordion-based)\n- **States:** opening, open, loading, success\u002Ferror, closing — all CSS-transitioned.\n- **UX:** centered flex overlay (`align-items: center`), backdrop, Material Symbol `close` button, keyboard focus trap, close via `Esc` and backdrop click, `role=\"dialog\"` + `aria-modal`, stacking from `--z-modal`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type and sizing via `clamp()`; no overflow at any viewport.\n- **Smooth animations:** every state change uses `transition: var(--transition-normal)`; honor `prefers-reduced-motion` by disabling scroll reveals, the scroll-cue bob, spinner rotation, and parallax — content stays fully visible and usable.\n- **Scroll reveals:** IntersectionObserver toggles a visibility class; elements are visible by default when JS is unavailable.\n- **Accessibility:** AA contrast in both themes; never rely on color alone to communicate state; semantic HTML5 (`header`, `main`, `section`, `nav`, `footer`); ARIA on the accordion, theme toggle, and any custom widget; logical DOM\u002Ffocus order; complete keyboard operability; `aria-live` regions for form feedback and dynamic status.\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n- **Destructive actions:** `.btn--danger` (Oxblood) must be visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js`. The only project script tag is `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`; external CDN references (Tailwind, Google Fonts, Material Symbols) are permitted in `\u003Chead>`.\n- **Naming:** one convention throughout — BEM (`block__element--modifier`, e.g., `.pricing-tier__price`, `.card--featured`). Never mix conventions.\n- **Copy:** no lorem ipsum anywhere. Author real, on-theme English copy for the invented brand across all sections; placeholders only where content is genuinely unknowable.\n- **Completeness:** all sections, all component states, dark mode, and every interaction delivered in this single attempt — no TODOs, no stubs, no deferred work.\n",1791954987817]