Steampunk demo
Steampunk

A retro-futuristic style blending Victorian elegance with steam-powered machinery, featuring brass gears, copper pipes, riveted metal, and sepia-toned industrial ornamentation.
Category: Fantasy & Sci-Fi
Era: Victorian Retro-Futurism (1880s-inspired)
Prompt: 19.6 KB · 2685 words
# SYSTEM PROMPT — STEAMPUNK LANDING PAGE: FULL BUILD SPECIFICATION

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page specified below in a single first attempt. The design fuses Victorian elegance with steam-powered mechanical aesthetics — brass gold, dark leather, copper, and aged parchment — decorated with rotating gears, riveted brass borders, leather textures, Victorian ornamental frames, drifting steam fog, mechanical gauge indicators, and copper metallic text effects. Every section, state, and interaction defined here is mandatory.

---

## 0. PROJECT BRIEF

* **Theme:** Steampunk — Victorian-Mechanical, Brass, Gears, Retro-Futuristic. Era: Victorian England meets Industrial Revolution fiction.
* **Product concept:** The page promotes a coherent fictional product — *Aetherworks Automata: hand-crafted clockwork companion automatons* (or an equivalent steampunk invention you keep consistent across all copy).
* **Sections (in this exact order):** Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.
* **Modes:** Light mode ("Workshop Daylight" — aged parchment and leather) and Dark mode ("Midnight Workshop" — dark leather and mahogany) must both be fully themed.
* **Copy:** All user-facing copy in **English**, written in a flavored-but-clear Victorian tone. No lorem ipsum anywhere — write real, coherent, themed copy for every heading, paragraph, button, testimonial, FAQ answer, and footer link.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* All styling lives exclusively in `style.css`. **Forbidden:** the `style="..."` attribute anywhere in the HTML.
* All design properties, layout rules, and states are targeted via class or ID selectors only.
* HTML must remain clean, semantic (header, nav, main, section, article, footer), and agnostic of visuals — a full retheme must be possible by editing `style.css` alone.
* **Forbidden:** inline event handlers (`onclick`, `onsubmit`, etc.). All behavior is attached via `addEventListener` in `script.js`.

### 1.2 CSS Variables & Theme Tokens
Define **exactly these tokens** in `:root` (Light mode default):

```css
:root {
  /* Color tokens — Light Mode */
  --primary: #B5A642;          /* Brass Gold */
  --primary-ink: #6E5F1F;      /* Darkened brass — the ONLY brass tone permitted for text on light backgrounds */
  --secondary: #B87333;        /* Copper */
  --bg-primary: #E8D5B0;       /* Aged Parchment */
  --bg-secondary: #F3E7CB;     /* Lighter parchment for elevated surfaces (cards, inputs, panels) */
  --text-primary: #3C1F0A;     /* Dark Leather */
  --text-secondary: #5A4E3D;   /* Smoke-leather grey — accessible derivative of Steam Grey #6B6B6B */
  --text-success: #1F6E63;     /* Darkened Verdigris — readable on parchment */
  --text-error: #9C2B12;       /* Ember red */
  --border-default: #B5A642;
  --border-success: #43B3AE;
  --border-error: #9C2B12;

  /* Decorative accents (non-text use) */
  --accent-copper: #B87333;
  --accent-rivet: #A0A0A0;    /* Rivet Silver */
  --accent-mahogany: #4E1A0A; /* Deep Mahogany */
  --steam-grey: #6B6B6B;      /* Steam Grey — decorative shadows/borders only, never body text */

  /* Typography */
  --font-display: 'Cinzel', Georgia, serif;
  --font-base: 'Special Elite', 'Courier New', monospace;

  /* Shape, depth, motion */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 2px 2px 0 var(--steam-grey);       /* Hard Victorian print offset */
  --shadow-md: 4px 4px 0 rgba(78, 26, 10, 0.45);
  --inset-vignette: inset 0 0 20px rgba(60, 31, 10, 0.2);
  --text-emboss: 1px 1px 2px rgba(0, 0, 0, 0.3);
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-ratchet: steps(12, end);                 /* Mechanical gear-tick easing */

  /* Layering */
  --z-dropdown: 10;
  --z-modal: 100;
  --z-toast: 200;
}
```

* **Dark mode tokens** (applied via `.dark` class — see 1.3): `--primary: #C9B458; --primary-ink: #C9B458; --secondary: #C98A4B; --bg-primary: #1C0E06; --bg-secondary: #2B160A; --text-primary: #E8D5B0; --text-secondary: #A0A0A0; --text-success: #43B3AE; --text-error: #E06A45; --border-default: #C9B458; --border-success: #43B3AE; --border-error: #E06A45; --steam-grey: #3A3A3A; --shadow-sm: 2px 2px 0 #000; --shadow-md: 4px 4px 0 rgba(0,0,0,0.6); --inset-vignette: inset 0 0 20px rgba(0,0,0,0.5);`
* **Contrast pairing (mandatory, every theme):** every light background token pairs with a dark text token and every dark background token pairs with a light text token. Never place `--primary` (raw brass) as text on parchment — use `--primary-ink` for brass-toned text in light mode. Raw `#43B3AE` verdigris is text-safe only on dark backgrounds; use the darkened `--text-success` on light ones.
* **Never use `#ffffff`.** The lightest surface is parchment-based; if a near-white is unavoidable, use `#fefefe`.
* **Base panel recipe (theme signature):** `border: 3px solid var(--border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);` with `--inset-vignette` added to large panels and `--text-emboss` permitted on display headings.

### 1.3 Mandatory Dark Mode Support
* Implement dark tokens under a `.dark` class on `<html>` **and** under `@media (prefers-color-scheme: dark) { :root:not(.light) { ... } }` so no-JS visitors still get dark mode.
* `script.js` reads `localStorage` (key: `steampunk-theme`); if a stored choice exists it sets `.dark` or `.light`; otherwise the media query governs. The toggle button flips the class, persists the choice, and updates `aria-pressed` and `aria-label` correctly.
* Background, text, border, shadow, fog, and texture tokens must all switch seamlessly — **no HTML restructuring** for either mode. Dark mode is "Midnight Workshop": near-black leather backgrounds, parchment text, brightened brass/copper accents, darker smoke fog.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified (e.g., top-aligned card text columns, stacked label/input groups — comment the exception in CSS).
* Mobile-first: multi-column rows (features, steps, pricing, testimonials, footer columns) collapse to single-column stacks at small viewports. **No horizontal scrolling at any width down to 320px.**

### 1.5 Framework Default & Tailwind CSS Integration
* Use Tailwind CSS as the utility engine, but keep markup clean: Tailwind utilities are applied **inside `style.css` via `@layer components` / `@apply`** so HTML carries only BEM class names. All utilities must map back to the CSS variables above (e.g., `@apply flex items-center gap-4;` with colors always via `var(--...)`).
* Maintain the generic reusable component classes `.btn`, `.card`, `.input-group` as the base of the component system.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* Load via Google Fonts `<link>` (with `preconnect`): **Cinzel** (weights 400/700/900) bound to `--font-display` for headings, buttons, and names; **Special Elite** (400) bound to `--font-base` for body copy, labels, and quotes (set body at ≥18px with generous line-height for typewriter readability).
* All functional/UI icons are **Google Material Symbols Rounded** (standard Google Fonts stylesheet, `font-variation-settings` configured). Never use raw inline SVGs or local icon files for UI icons.
* **Exception clause (theme requirement):** decorative gear/cog inline SVGs are the *sole* permitted inline-SVG exception; every gear must be `aria-hidden="true"` and `focusable="false"`, and every functional icon must still be a Material Symbol.

### 1.7 Steampunk Visual Signature Recipes (all CSS-generated — no external image files)
* **Gears:** inline SVG cogs (per the 1.6 exception) placed as decorative clusters. Hero gears idle-rotate slowly (`animation: rotate 60s linear infinite`); on hover they accelerate or tick using `--ease-ratchet`. Interlocking pairs rotate in opposite directions. All rotation stops under `prefers-reduced-motion`.
* **Rivet borders:** a `.rivet-frame` modifier rendering four corner rivets via a pseudo-element using layered `radial-gradient()` dots in `--accent-rivet` with inset shading.
* **Leather texture:** CSS-only layered gradients (radial speckle + repeating-linear grain) on hero, final CTA, and footer panels; built from token-driven rgba overlays so it adapts to dark mode.
* **Victorian ornamental frames:** `.ornament-frame` — double brass border with corner flourishes via pseudo-elements; used around section headings and the hero headline block.
* **Steam/fog overlays:** absolutely positioned, `pointer-events: none`, `aria-hidden` gradient layers at low opacity with a slow drift keyframe; a darker smoke variant in dark mode.
* **Mechanical gauges:** circular dials with a brass bezel, tick ring via `repeating-conic-gradient()`, and a needle (`::after`) rotated by a `--needle-angle` custom property; needles sweep in when scrolled into view.
* **Copper metallic text:** `linear-gradient` copper sheen with `background-clip: text` (solid `--secondary` fallback) on the hero headline and price figures.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button (`.btn` + modifiers `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; Cinzel, uppercase, letter-spaced. Primary = brushed-brass gradient plate with inset highlight; secondary = copper; ghost = transparent with brass border; danger = ember red, visually distinct in **both** themes.
* **Hover:** sheen/brightness shift, shadow grows, `cursor: pointer`; any gear icon inside the button ticks.
* **Focus:** distinct `:focus-visible` ring (3px offset outline in `--primary`, visible on both themes).
* **Active:** `transform: scale(0.97)` click feedback.
* **Loading (`.is-loading`):** `aria-busy="true"`, interactions blocked to prevent double-clicks, CSS spinner or rotating Material `settings` icon rendered **without changing button dimensions** (fixed `min-width`).
* **Disabled (`.is-disabled` / `[disabled]`):** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, `aria-disabled="true"`.
* **Success/Error feedback:** `.btn--success` / `.btn--error` tint via `--text-success` / `--text-error` — always accompanied by an icon and/or text change, never color alone.

### 2.2 Card (`.card`)
* **Default:** flexible flexbox layout, `--bg-secondary` surface, 3px brass border, `--radius-sm`, `--shadow-sm`, `.rivet-frame` accents; card text columns may top-align as a justified exception.
* **Hover (interactive cards):** `transform: translateY(-2px)` plus shadow elevation shift; corner gear decoration spins.
* **Focus-within:** border brightens to copper when any child link/button is focused.
* **Loading (`.card--skeleton`):** brass-tinted shimmer sweep animation that preserves exact card dimensions (no layout jump).
* **Empty state:** structured fallback with a Material icon inside a brass ring plus clear guidance text.

### 2.3 Form & Input (`.input-group`)
* **Structure:** flex container wrapping a `<label>`, the input, a status icon slot, and a dedicated error-message element that exists in the DOM at all times (empty when valid) to prevent layout shift.
* **States:** empty; focused (3px brass outline ring); filled; valid (`.is-valid` — verdigris border + check icon); invalid (`.is-invalid` — ember border, error icon, error text tied to `aria-live="polite"` and `aria-describedby`); disabled; read-only. State is never communicated by color alone.

### 2.4 Modal / Popup (`.modal`)
* **States:** opening (fade + scale 0.96→1 via CSS transition), open, loading (submit button enters `.is-loading`), success (inline verdigris check + confirmation message), error (invalid fields flagged per 2.3), closing (reverse transition, then hidden).
* **UX:** centered flex container (`align-items: center; justify-content: center`), steam-smoke backdrop overlay with subtle blur, Material `close` icon button (aria-label "Close dialog"), `role="dialog"` + `aria-modal="true"` + `aria-labelledby`, keyboard focus trapped inside, closes via `Esc` and backdrop click, focus restored to the trigger on close, body scroll locked while open.
* **Purpose on this page:** each Pricing CTA opens a "Commission Request" modal (tier name + brief form) exercising all states above.

### 2.5 Toast (`.toast`)
* Fixed bottom placement, `z-index: var(--z-toast)`, riveted brass panel, `role="status"` with `aria-live="polite"`, Material icon + text, auto-dismiss after 4s with exit animation, dismissible, stacks without overlap conflicts.

### 2.6 Accordion (`.faq-item`)
* Question is a native `<button>`: full-width flex (`align-items: center; justify-content: space-between`) with a Material `expand_more` icon rotating 180° when open; `aria-expanded` + `aria-controls` wired correctly; panel expands via smooth CSS height transition; fully keyboard operable.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid sizing, breakpoints at 640/768/1024px, zero horizontal overflow at any width.
* **Smooth animations:** every state change transitions with `var(--transition-normal)`. Under `prefers-reduced-motion: reduce`, disable gear rotation, fog drift, needle sweeps, shimmer, and bounce cues; reveals appear instantly and transitions collapse to opacity-only.
* **Accessibility:** body-text contrast ≥ 4.5:1 in **both** modes (this is why `--primary-ink` and darkened verdigris exist); never color-only state communication; semantic HTML5 landmarks; one `h1` (hero) with logical h2/h3 hierarchy; a "Skip to main content" link; visible `:focus-visible` styles everywhere; full keyboard operability for nav, theme toggle, accordion, modal, and forms; `aria-live` regions for form errors, toasts, and loading feedback.
* **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.
* **Destructive actions:** `.btn--danger` is unmistakable in both light and dark themes.
* **Themed micro-interactions:** gear hover-tick, button press scale, card lift, gauge needle sweep on scroll-reveal (IntersectionObserver adding `.is-revealed`), drifting fog, sheen sweep on primary-button hover. Reveal-hiding classes may only apply when JS is available (progressive enhancement — content visible without JS).

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one `<script src="script.js" defer>` in `<head>` — no other inline scripts, no inline styles, no inline handlers.
* **Naming:** BEM is the single convention for every custom class (`.hero__title`, `.pricing-card--featured`, `.faq-item__question`); Tailwind exists only inside `@layer`/`@apply`. Never mix conventions.
* **No unrequested placeholders:** all copy is real themed English; `href="#"` is permitted only for genuinely unspecified external targets (footer legal/company links); every in-page nav anchor must resolve to a real section ID.
* **No external images:** all visuals are CSS gradients, the permitted gear SVGs, or Material Symbols; avatars are CSS initials medallions.
* Include `<meta name="viewport">`, `lang="en"`, a themed `<title>`, and a meta description.

---

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

### 5.1 Header & Navigation
Fixed header on a parchment/leather bar with a brass bottom border: Cinzel wordmark with copper metallic text; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle (Material `dark_mode`/`light_mode`, correct `aria-pressed`/`aria-label`); a slim "pressure pipe" scroll-progress bar (brass track, copper fill, `role="progressbar"` with JS-updated `aria-valuenow`). Mobile: Material `menu` hamburger opens a dropdown panel (`aria-expanded`, Esc closes, focus moves to first link, closes on link activation).

### 5.2 Hero
Near-full-viewport flex-centered column on leather texture with fog layers. An `.ornament-frame` wraps the `h1` (Cinzel, copper metallic gradient, `--text-emboss`) and Special Elite subheadline. CTAs: `.btn--primary` ("Commission Your Automaton" → opens the modal) and `.btn--ghost` ("Explore the Workshop" → anchors to Features). A cluster of three interlocking gear SVGs idles and accelerates on hover. A decorative gauge badge accompanies a real stat line (e.g., "10,000 automatons stoked to date"). Bouncing Material scroll cue (disabled under reduced motion).

### 5.3 Features (3 cards)
Section heading in an `.ornament-frame`; three `.card.rivet-frame` components in a flex row → column. Each: Material icon in a brass ring (e.g., `precision_manufacturing`, `bolt`, `verified`), Cinzel `h3`, Special Elite body. Suggested angles: Precision Clockwork Hearts / Self-Winding Perpetual Motors / Everlasting Brass Construction (finalize coherently). Hover lift + corner gear spin; `:focus-within` border highlight.

### 5.4 How It Works (3 steps)
Three steps in a flex row → column, joined by a dotted brass pipe (`::before` line; vertical on mobile). Each step: a gauge dial whose needle sweeps on scroll-reveal, containing the step number; Cinzel `h3`; Special Elite text. Steps: 1) Choose Your Chassis, 2) Select Your Gadgetry, 3) We Forge & Deliver.

### 5.5 Testimonials
Three parchment-letter quote cards (flex row → column): Material `format_quote` in brass, Special Elite quote, attribution with a CSS brass initials medallion (no images), Cinzel name, `--text-secondary` title (e.g., "Professor E. Blackwood — Royal Academy of Tinkers"). Optional copper wax-seal accent.

### 5.6 Pricing (3 tiers)
Three `.pricing-card` tiers: **Apprentice / Artificer / Grand Machinist**. The middle tier is `.pricing-card--featured`: double brass frame, riveted "Most Prestigious" plaque badge, elevated shadow. Each card: Cinzel tier name, price figure with copper metallic text + billing period, feature list with verdigris Material `check` icons, and a CTA (featured = `.btn--primary`, others = `.btn--ghost`) that opens the Commission Modal with the tier pre-noted. Hover lift; `:focus-within` highlight.

### 5.7 FAQ
Four to six `.faq-item` accordions (per 2.6) covering airship shipping, warranty, aether safety, returns, and customization — parchment panels with brass borders.

### 5.8 Final CTA
Full-width leather panel with fog overlay and `.ornament-frame`: Cinzel `h2`, then a newsletter `.input-group` (email) + `.btn--primary` ("Join the Guild"). Flow: invalid/empty → inline ember error with icon + `aria-live`; valid → button loading → success state + toast ("Welcome to the Guild — your first dispatch arrives by airship post."). Use `novalidate` with accessible custom messaging.

### 5.9 Footer
Riveted brass top border; flex row wrap → column: brand column (wordmark + one-line tagline), "Workshop" anchor links, "Company" secondary links (About, Careers, Press — `href="#"`), "Legal" (Privacy, Terms — `href="#"`), and social Material icons with `aria-label`s. Bottom bar: copyright + flavor line ("Stoked by steam since 1887"). All links show hover brass-underline and `:focus-visible` rings.

---

## 6. ACCEPTANCE CHECKLIST (self-verify before delivering)

* Zero inline styles, zero inline handlers, one deferred script, BEM-only markup classes.
* Full token set defined; contrast pairing holds in both themes; no `#ffffff` anywhere.
* Dark mode works via `.dark` class + media-query fallback, persists in `localStorage`, toggle exposes correct ARIA state.
* All button states (default/hover/focus/active/loading/disabled/success/error) and all card/input/modal/accordion/toast states implemented.
* Every interactive element ≥44px, keyboard operable, visibly focused, with mandatory feedback.
* `prefers-reduced-motion` honored; no horizontal scroll at 320px; all copy real, English, steampunk-coherent.