Victorian demo
Victorian

An extremely ornate Victorian-era style featuring elaborate flourishes, calligraphic typography, and antique decorative details evoking 19th-century elegance and steampunk charm.
Category: Cultural & Heritage
Era: Victorian Era (1837–1901)
Prompt: 13.6 KB · 1820 words
# CODING AGENT PROMPT — "VICTORIAN" ORNATE LANDING PAGE

**Role & Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality **Victorian-era landing page** on the first attempt — no clarifying questions, no partial output. Deliver the full, working code for every file listed in Section 4.

**Project Brief:**
- **Theme:** Victorian — ornate, elegant, intricate florals, 1837–1901, calligraphy, vintage, steampunk-adjacent decorative, rich colors, historically detailed atmosphere.
- **Sections (in this exact order):** Sticky Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.
- **Palette:** Deep Burgundy `#800020`, Antique Gold `#C9A84C`, Midnight Green `#004953`, Ivory `#FFFFF0`; supporting Plum `#8E4585`, Copper `#B87333`, Sage `#8A9A5B`, Warm Taupe `#8B7D6B`.
- **Typography:** `'Playfair Display', serif` mixed with `'Great Vibes', cursive` for calligraphic accents; `letter-spacing: 0.05em` on headings, labels, and buttons.
- **Signature effects:** damask pattern backgrounds, ornate gold divider lines, Victorian frame corners, gold-glow hover states, 500ms scroll-triggered reveal animations.

**Section-by-Section Requirements:**
1. **Header/Nav (sticky):** Brand wordmark in Great Vibes; anchor links to every section with gold underline-flourish hover; visible dark/light theme toggle; accessible hamburger → slide-down panel on mobile (z-index `--z-dropdown`).
2. **Hero:** Full-viewport flex-centered column; layered damask background; inset ornate gold frame with floral corner ornaments; Great Vibes eyebrow line, Playfair Display 900 headline (`clamp()` sizing), supporting copy, two CTAs (`.btn--primary` + `.btn--secondary`), scroll cue (Material Symbol `keyboard_arrow_down`).
3. **Features:** Section heading pattern (Great Vibes eyebrow + Playfair h2 + ornate divider); 3 cards, each with a Material Symbol icon inside a gold-bordered circular medallion, Playfair h3, and real copy.
4. **How It Works:** 3 numbered ornate medallions (Midnight Green accent) connected by a gold hairline on desktop (hidden on mobile); step title + description each.
5. **Testimonials:** 3 quote cards with oversized decorative quotation marks, italic Playfair quotes, and attributions (name + role).
6. **Pricing:** 3 equal-height tiers; the middle tier is featured ("Most Favoured" gold badge, stronger border, gold glow, slight desktop scale); each tier has a name, price, check-bulleted feature list, and CTA button.
7. **FAQ:** Accessible accordion, 5–6 themed questions, gold-bordered panels, animated expand/collapse.
8. **Final CTA:** Full-width burgundy band with damask overlay and gold frame; Playfair headline, subcopy, and an email capture form (`.input-group`) with a gold submit button.
9. **Footer:** Brand wordmark + tagline, 2–3 columns of secondary links, circular gold-bordered social icon buttons (Material Symbols with `aria-label`), copyright bar with ornate top border.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **The `style="..."` attribute is forbidden anywhere in the HTML.**
- Target every design property, layout rule, and state via class or ID selectors only.
- HTML stays clean, semantic, and styling-agnostic — restyling the entire site must require editing `style.css` only, never the markup.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` and override them per theme:

- **Colors (light theme):** `--primary: #800020`; `--secondary: #C9A84C`; `--accent: #004953`; `--bg-primary: #FFFFF0`; `--bg-secondary: #F7F0DE`; `--text-primary: #2A1A0A`; `--text-secondary: #6E5F4E` (darkened Warm Taupe for AA contrast — raw `#8B7D6B` is decorative only); `--text-success: #4E5D2A` (darkened Sage); `--text-error: #9B1C1C`; `--border-default: #C9A84C`; `--border-success: #8A9A5B`; `--border-error: #9B1C1C`; decorative accents `--plum: #8E4585`, `--copper: #B87333`, `--sage: #8A9A5B`, `--taupe: #8B7D6B`.
- **Contrast pairing (mandatory, every theme):** light backgrounds pair with dark text tokens, dark backgrounds pair with light text tokens. Gold `#C9A84C` must **never** be used as body-text color on ivory — reserve it for borders, ornaments, large display accents, and text on dark backgrounds only. Verify ≥ 4.5:1 for text and ≥ 3:1 for large text/UI in both themes.
- **Light background:** Ivory `#FFFFF0` is the light `--bg-primary` (never pure white); if a near-white is ever needed, use `#fefefe`, never `#ffffff`.
- **Radius & shadows:** `--radius-sm: 2px`; `--radius-md: 4px`; `--radius-lg: 8px` (Victorian frames are sharp — ornaments carry the character, not rounding); `--shadow-sm: 0 2px 8px rgba(42,26,10,0.08)`; `--shadow-md: 0 4px 20px rgba(201,168,76,0.2)`; `--shadow-glow: 0 0 0 1px rgba(201,168,76,0.35), 0 8px 32px rgba(201,168,76,0.45)`.
- **Spacing & transitions:** `--spacing-gap: 1.5rem`; `--spacing-section: clamp(4rem, 10vw, 7.5rem)`; `--transition-fast: 150ms`; `--transition-normal: 300ms`; `--transition-reveal: 500ms`; `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- **Elevation:** `--z-dropdown: 1000`; `--z-modal: 2000`; `--z-toast: 3000` — no ad-hoc z-index values.
- **Typography tokens:** `--font-base: 'Playfair Display', Georgia, serif`; `--font-accent: 'Great Vibes', cursive`.

**1.3 Mandatory Dark Mode**
- Dark mode **must** be fully defined via tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class: `--bg-primary: #1B0E13`; `--bg-secondary: #2A161E`; `--text-primary: #FFFFF0`; `--text-secondary: #C9B48A`; `--primary: #9A1F3D` (brightened burgundy); `--secondary: #C9A84C`; `--accent: #1B6B77`; `--text-success: #A9C07A`; `--text-error: #E8A0A0`; borders stay gold. Adjust any token as needed to pass contrast checks.
- Theme switching swaps variables only — zero HTML restructuring.
- Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit; initialize at the top of `script.js`. The header toggle must expose correct `aria-pressed` and `aria-label` ("Switch to dark mode" / "Switch to light mode") and swap Material Symbol icons (`dark_mode` / `light_mode`).

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox (or Tailwind flex utilities).
- Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified in a CSS comment (e.g., `stretch` for equal-height pricing cards).
- Mobile-first: multi-column rows collapse to single columns on small viewports; fluid `clamp()` typography; **zero horizontal scrolling at any width**.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (or clean custom CSS driven by Tailwind's `@layer` / `@apply` directives). Map all utilities back to the CSS variables above and to reusable component classes: `.btn`, `.card`, `.input-group`, `.section-divider`, `.ornate-frame`, `.faq-item`.
- Never mix naming conventions (see Section 4).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Google Fonts** via `<link>` with preconnect: Playfair Display (400, 700, 900 + italics) and Great Vibes (400). Bind them to `--font-base` and `--font-accent`.
- All functional icons are **Google Material Symbols** (Rounded). Raw inline SVGs and local icon files are forbidden.
- **Explicit exception — decorative ornaments only:** the intricate floral borders, Victorian frame corners, damask patterns, and ornate dividers may be implemented exclusively as SVG data URIs inside `style.css` (via `background-image`, `border-image-source`, or `::before`/`::after`); inline `<svg>` elements in HTML remain strictly forbidden, and all functional icons must remain Material Symbols.

**1.7 Victorian Ornamentation & Visual Effects**
- **Damask backgrounds:** layered CSS backgrounds (SVG data URIs or repeating gradients) at low opacity (≤ 0.08 light / ≤ 0.12 dark) so text contrast is preserved; richer layering on Hero and Final CTA.
- **Ornate dividers:** between every major section — gold gradient hairlines with a central flourish (SVG data URI or a gold-styled Material Symbol such as `filter_vintage`).
- **Victorian frame corners:** on the Hero panel, feature cards, and pricing cards via pseudo-elements or `border-image` with SVG data URIs.
- **Gold-glow hover:** interactive cards and buttons transition their `box-shadow` to `--shadow-glow`.
- **Scroll reveals:** 500ms fade + rise (`opacity: 0; translateY(24px)` → visible) driven by an IntersectionObserver adding `.is-visible`; fully disabled under `prefers-reduced-motion` (content must remain visible without it).

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target; Playfair Display with `letter-spacing: 0.05em`. Primary = burgundy fill + ivory text + gold border; Secondary = transparent + gold border + burgundy text (gold text in dark mode).
- **Hover:** `brightness(1.08)` + gold-glow shadow; `cursor: pointer`.
- **Focus:** distinct gold focus ring (2px `outline` with offset, or `box-shadow`) visible in both themes for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** disables interaction and double-clicks; renders a CSS gold-ring spinner or animated Material Symbol without changing button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary state classes driven by `--text-success` / `--text-error`, always paired with an icon (`check_circle` / `error`) and `aria-live` text — never color alone.

**2.2 Card Component (`.card` — features, pricing, testimonials)**
- **Default:** flexible Flexbox column layout; `--bg-secondary` fill; `2px solid var(--border-default)`; ornate corner frames; `--shadow-sm`; equal heights via justified `stretch`.
- **Hover:** `transform: translateY(-2px)` + shadow shift to gold glow.
- **Focus-within:** border brightens/glows when a child link or button receives focus.
- **Loading (skeleton):** shimmer animation defined in CSS to prevent layout jumps (for any async content).
- **Empty state:** fallback layout with a Material Symbol and guidance text (define the styles even if unused on this page).

**2.3 Form & Input Requirements (`.input-group` — Final CTA email capture)**
- **Structure:** flex container wrapping a `<label>`, the `<input type="email">`, and a dedicated error-feedback element with `aria-live="polite"`.
- **States (all styled via classes/pseudo-classes):** empty, focused (gold outline ring), filled, valid (success border + check icon), invalid (error border, error text, error icon, message), disabled, read-only.
- Never rely on color alone — every error/success pairs an icon with text.

**2.4 FAQ Accordion & Modal/Popup**
- **FAQ accordion:** button + region pattern (or `<details>`/`<summary>`) with `aria-expanded`, `aria-controls`, and panel IDs; animated expand/collapse via CSS (`grid-template-rows` or `max-height`) using `--transition-normal`; gold plus/minus Material Symbol rotates on toggle; fully keyboard operable; visible focus states.
- **Modal/popup (only if any overlay is used, e.g., a plan-details dialog):** centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click; opening/open/loading/success/closing states all animated via CSS transitions.

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, standard breakpoints, no horizontal overflow anywhere.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; all motion (reveals, spins, bounces) disabled under `prefers-reduced-motion`.
- **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, correct h1–h3 hierarchy); a skip-to-content link; correct ARIA roles/labels on the accordion, theme toggle, mobile menu, and form feedback; logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, loading, and success feedback.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** `.btn--danger` must be visually distinct in both themes using `--text-error` tones.
- **Copy:** all user-facing copy in **English**, written in-theme (elegant Victorian voice — e.g., a fictional atelier/bespoke workshop brand). Write real headlines, feature descriptions, 3 named testimonials, 3 complete pricing tiers, 5–6 FAQ answers, and footer labels. **Lorem ipsum is prohibited.**

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, and `script.js`. The HTML contains exactly one `<script src="script.js" defer>` reference — no other inline `<script>` blocks.
- **Naming convention:** BEM (`block__element--modifier`) for every custom class (`.btn--primary`, `.card--featured`, `.input-group__error`, `.faq-item__summary`); Tailwind utilities only for layout/spacing. One convention, everywhere — never mixed.
- **Section IDs:** `#hero`, `#features`, `#how-it-works`, `#testimonials`, `#pricing`, `#faq`, `#cta`; anchor navigation uses smooth scrolling (disabled under reduced motion).
- **No unrequested placeholders:** every section ships complete with real themed copy; placeholders only where content was genuinely unspecified.
- **Final QA pass before output:** verify both themes side by side — contrast ratios, keyboard-only navigation through nav → cards → accordion → form → footer, reduced-motion behavior, and zero horizontal scroll at 320px, 768px, and 1440px.