[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-093-Steampunk-Nebula-Explorer":3},"# Coding Agent Directive: Build the \"Steampunk Nebula Explorer\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page on the first attempt. Write **all user-facing copy in English**.\n\n**Project Brief:**\n- **Theme:** Steampunk Nebula Explorer — adventurous, industrial, imaginative retro-future \u002F vintage sci-fi.\n- **Keywords:** steampunk, space, nebula, gear, brass, copper, cosmic, vintage sci-fi, explorer style, cosmic industrial.\n- **Brand persona:** \"The Nebula Explorers' Guild\" — a Victorian aether-travel bureau charting nebulae aboard brass skyships. All copy must adopt this adventurous, imaginative, industrial tone.\n- **Visual language to render in pure CSS:** interlocking brass gears, copper piping, torn parchment containers, weathered paper grain, brushed bronze metal, cosmic void, nebula glow.\n- **Page sections (in order):** Sticky Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n- **Signature look (from the style spec — must be expressed via tokens and classes, never inlined):** `background-color: #0d1b33; color: #b5a642; font-family: 'Rye'; border: 2px solid #cd7f32; box-shadow: 0 0 15px #5d3a9b;`\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 defined in `style.css`.\n- **Minimal HTML Modifications:** HTML must remain clean, semantic (HTML5 landmarks: `header`, `nav`, `main`, `section`, `article`, `footer`), and agnostic of visual styling — retheming the site must require editing only the CSS file.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root` (dark\u002Fcosmic defaults) and override in a `.light` theme class. Never hard-code hex values inside component rules.\n\n**Dark theme — \"Cosmic Void\" (default, defined in `:root` and `.dark`):**\n\n| Token | Value | Usage |\n|---|---|---|\n| `--bg-primary` | `#0d1b33` | Cosmic void page background |\n| `--bg-secondary` | `#16264a` | Cards, panels, header |\n| `--bg-tertiary` | `#1d3055` | Hover surfaces, inputs |\n| `--primary` | `#cd7f32` | Copper: primary buttons, links, signature borders |\n| `--secondary` | `#b5a642` | Brass: headings, icons, focus rings |\n| `--text-primary` | `#f2e8d3` | Starlight cream body text |\n| `--text-secondary` | `#b5a642` | Brass secondary text |\n| `--text-on-primary` | `#1c1208` | Text on copper fills |\n| `--text-success` | `#8fce9e` | Verdigris patina |\n| `--text-error` | `#e8705f` | Ember |\n| `--border-default` | `#cd7f32` | Signature 2px copper frames (hairlines may use `rgba(205,127,50,.45)`) |\n| `--border-success` \u002F `--border-error` | `#8fce9e` \u002F `#e8705f` | State borders |\n| `--copper` \u002F `--brass` \u002F `--nebula` \u002F `--star-white` | `#b87333` \u002F `#b5a642` \u002F `#5d3a9b` \u002F `#ffffff` | Palette accents |\n| `--glow-nebula` | `0 0 15px #5d3a9b` | Signature nebula glow |\n\n**Light theme — \"Workshop Parchment\" (`.light` overrides):** `--bg-primary: #ece0c6` (aged parchment, never pure white); `--bg-secondary: #f5eeda` (use `#fefefe` only where a near-white surface is genuinely needed, e.g., input fills); `--bg-tertiary: #e2d3b2`; `--primary: #9c5a1f` (burnt copper, AA on parchment); `--secondary: #8a6d1d`; `--text-primary: #2b1d0e`; `--text-secondary: #6b4f2a`; `--text-on-primary: #fdf6e3`; `--text-success: #2e6b45`; `--text-error: #b23c2a`; `--border-default: #b87333`; `--glow-nebula: 0 0 12px rgba(93,58,155,.35)`.\n\n**Shared tokens:** `--radius-sm: 2px; --radius-md: 6px; --radius-lg: 12px` (steampunk is angular — torn parchment cards may replace radius with `clip-path` edges); `--shadow-sm: 0 2px 6px rgba(4,10,24,.4)`; `--shadow-md: 0 8px 24px rgba(4,10,24,.5)`; `--spacing-gap: 1.5rem`; `--transition-fast: 150ms`; `--transition-normal: 300ms`; `--ease-standard: cubic-bezier(.4,0,.2,1)`; `--z-header: 100`; `--z-dropdown: 1000`; `--z-modal: 2000`; `--z-toast: 3000`; `--font-display: 'Rye', serif`; `--font-base: 'Alegreya', serif`.\n\n**Contrast Pairing (mandatory, both themes):** every light background token pairs with dark text, every dark background token pairs with light text. Verify WCAG AA (4.5:1 body text, 3:1 large text and UI borders) in **both** themes; if a derived tone fails, adjust the derived tone — never the brand anchors above.\n\n### 1.3 Mandatory Dark Mode Support\n- **Dark-native design:** The Cosmic Void dark theme is the canonical, default presentation.\n- **Implementation:** Define dark tokens in `:root`\u002F`.dark` and parchment overrides in `.light`, applied as a class on `\u003Chtml>`. Also set `color-scheme: dark` \u002F `light` accordingly. Background and text variables must switch seamlessly with zero HTML restructuring.\n- **Theme Switching:** Provide a visible toggle in the header using Google Material Symbols (`dark_mode` \u002F `light_mode`) with correct `aria-pressed` (true when dark is active) and a descriptive `aria-label`.\n- **Persistence:** Store the choice in `localStorage` (key `nebula-theme`); on first visit fall back to `prefers-color-scheme`, defaulting to dark when no preference exists.\n- **Exception clause (theme-native dark):** because this theme is specified as full dark mode, dark is the brand default; the light \"Workshop Parchment\" variant exists to satisfy mandatory dual-theme accessibility, not to replace the canonical look.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with **Flexbox**. Every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., form field stacks and long-form card text may use `stretch`\u002F`flex-start` for readability).\n- Mobile-first: card rows, pricing tiers, steps, and footer columns stack in a single column on small viewports and expand to multi-column rows at ≥768px. Prevent horizontal scrolling at every breakpoint (fluid `clamp()` typography, wrapping flex, `max-width` containers).\n\n### 1.5 Styling Approach & Component Class API\n- Use clean custom CSS organized in `@layer` blocks (`tokens`, `base`, `components`, `utilities`) — or Tailwind utilities mapped to the same tokens via `@layer`\u002F`@apply` if preferred. Never mix approaches.\n- Expose themed components as reusable classes: `.btn`, `.card`, `.input-group`, `.nav-link`, `.pricing-card`, `.faq-item`, `.toast`, `.modal`. All colors, radii, shadows, and motion must reference `var(--...)` tokens.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load Google Fonts via `\u003Clink>` (with `preconnect`): **Rye** for display headings (`--font-display`) and **Alegreya** for body text (`--font-base`). Rye must never be used for body copy or long paragraphs.\n- **Icons:** Use Google Material Symbols (Outlined) via the official `\u003Clink>`. Raw inline SVGs, local icon files, and emoji-as-icons are all forbidden.\n- **Decorative CSS techniques (no images required):**\n  - **Nebula backdrop:** layered `radial-gradient`s (`--nebula`, deep indigo) over `--bg-primary` with a vignette; optional slow drift animation.\n  - **Star field:** pseudo-element layers of `box-shadow` star dots with staggered twinkle keyframes.\n  - **Gears:** oversized Material Symbols `settings` glyphs in brass\u002Fcopper at varying sizes\u002Fopacities with slow rotation (30–90s linear infinite), or pure-CSS gears via `repeating-conic-gradient` teeth + radial core.\n  - **Copper piping:** bronze `linear-gradient` strips with rivet dots (`radial-gradient`) and elbow joints (bordered pseudo-elements) — used in the How It Works connector and section dividers.\n  - **Torn parchment:** `clip-path: polygon(...)` irregular edges over parchment fills with weathered-grain overlay gradients; in dark mode, testimonial parchment stays cream (`#f0e4c8`) with `#2b1d0e` text for striking contrast.\n  - **Brushed bronze:** fine `repeating-linear-gradient` micro-stripes overlaid on copper\u002Fbrass fills (buttons, badges, medallions).\n  - All decorative layers: `aria-hidden=\"true\"`, `pointer-events: none`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component\n- **Default:** `.btn` — `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, uppercase letter-spaced label in `--font-base` 600. Variants: `.btn--primary` (copper fill + brushed texture + `--text-on-primary`), `.btn--brass` (2px brass outline, brass text), `.btn--ghost`, `.btn--danger` (ember — visually distinct in **both** themes).\n- **Hover:** `brightness(1.1)` plus `box-shadow: var(--glow-nebula)`; `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring — `outline: 2px solid var(--secondary); outline-offset: 2px`.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** sets `aria-busy=\"true\"`, blocks pointer events to prevent double-clicks, and renders a CSS spinner or rotating Material `progress_activity` icon **without changing button dimensions** (reserve the icon slot).\n- **Disabled:** `opacity: 0.5`, `filter: grayscale(.6)`, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback driven by `--text-success` \u002F `--text-error`, always paired with an icon and text — never color alone.\n\n### 2.2 Card Component\n- **Default:** `.card` — flex column, `background: var(--bg-secondary)`, signature `border: 2px solid var(--border-default)`, `border-radius: var(--radius-md)` (or torn-parchment `clip-path` variant `.card--parchment`), `box-shadow: var(--shadow-sm)`.\n- **Hover (interactive cards):** `transform: translateY(-2px)`, `--shadow-md`, intensified nebula glow, corner gear rotation accent.\n- **Focus-within:** border brightens to `--secondary` when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** `.card--skeleton` shimmer animation defined in CSS; reserved dimensions prevent layout jumps.\n- **Empty State:** `.empty-state` fallback layout with a Material icon and clear guidance text.\n\n### 2.3 Form & Input Requirements\n- **Structure:** `.input-group` — flex container wrapping a `\u003Clabel>`, the input, and a dedicated error feedback container (`.input-group__error`, `aria-live=\"polite\"`, min-height reserved).\n- **States (all styled via classes\u002Fpseudo-classes):** empty, focused (brass ring via `box-shadow`), filled, valid (success border + check icon), invalid (error border + error icon + message text), disabled, read-only. Error\u002Fsuccess are never communicated by color alone.\n\n### 2.4 Modal \u002F Popup Requirements\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated with CSS transitions (fade + scale).\n- **UX:** centered flex container (`align-items: center; justify-content: center`), backdrop overlay (void + nebula tint), Material `close` icon button, keyboard focus trapping with focus returned to the trigger on close, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"` + `aria-labelledby`, body scroll locked while open.\n\n### 2.5 FAQ Accordion\n- Each item: `\u003Cbutton class=\"faq-item__trigger\" aria-expanded aria-controls>` + panel (`role=\"region\"`), animated via `grid-template-rows: 0fr → 1fr`; Material `expand_more` chevron rotates 180°; fully keyboard operable.\n\n### 2.6 Toast\n- Fixed bottom-right, `role=\"status\"` \u002F `aria-live=\"polite\"`, auto-dismiss after ~4s with close button, stacked at `--z-toast`.\n\n---\n\n## 3. LANDING PAGE SECTION BLUEPRINT\n\nWrite real, thematic English copy throughout — lorem ipsum is forbidden.\n\n- **3.1 Header (sticky):** Guild logo (rotating CSS gear + wordmark), nav links (Features, The Expedition, Chronicles, Fares, FAQ), theme toggle, CTA `.btn--primary` \"Book Passage\". Collapses to an accessible hamburger menu (`aria-expanded`\u002F`aria-controls`) below 768px. Include a \"Skip to main content\" link.\n- **3.2 Hero:** full-viewport cosmic void with nebula gradients, twinkling stars, and interlocking rotating gears; eyebrow badge (\"Est. 1889 — Aether Travel Bureau\"), single `\u003Ch1>` in Rye (e.g., \"Chart the Untamed Nebulae Aboard a Brass Skyship\"), adventurous subcopy, dual CTAs (\"Book Your Passage\" → pricing; \"View the Star Charts\" → features), and a playful stats strip (nebulae charted, skyships afloat, expeditions returned).\n- **3.3 Features (3 cards):** \"Orrery Navigation\" (icon `explore`), \"Aether Propulsion\" (icon `rocket_launch`), \"Cartographer's Logbook\" (icon `menu_book`) — each a `.card` with brass medallion icon, Rye title, and 2–3 sentences of copy; gear-corner accents.\n- **3.4 How It Works (3 steps):** ordered list (`\u003Col>`) — 1. Calibrate the Orrery, 2. Board the Skyship, 3. Chart the Nebula. Step numbers sit in brass gear medallions connected by copper piping (horizontal on desktop, vertical on mobile).\n- **3.5 Testimonials (3 quotes):** torn-parchment `.card--parchment` quote cards with fictional explorers (e.g., \"Captain Isadora Blackwood, Aether Navigator\"), Material `star` ratings with accessible labels (\"Rated 5 out of 5\"), and brass avatar medallions.\n- **3.6 Pricing (3 tiers):** Stowaway \u002F Navigator (featured — brass double frame, nebula glow, \"Most Popular\" plaque) \u002F Grand Explorer. Each `.pricing-card` lists features with check icons and a \"Reserve Berth\" button opening the modal. Include a monthly\u002Fannual segmented toggle (`role=\"radiogroup\"`) — price updates are animated and announced via `aria-live=\"polite\"`.\n- **3.7 FAQ (5–6 items):** aether-travel safety, packing list, expedition duration, cancellations and refunds, accessibility aboard skyships, void weather.\n- **3.8 Final CTA:** full-width nebula-glow band, Rye headline (\"The Nebula Awaits, Explorer\"), and the `.input-group` email signup — validate client-side (`novalidate` + custom logic): invalid → error state + `aria-live` message; valid → button loading → success state + inline confirmation + toast.\n- **3.9 Footer:** brand column with tagline, three secondary link groups (Expedition, The Society, Support), social icon links with `aria-label`s, dynamic copyright year, legal links.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid `clamp()` sizing, breakpoints at 480\u002F768\u002F1024px, zero horizontal overflow at any width.\n- **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; gear rotation, star twinkle, nebula drift, shimmer, and scroll-reveal (IntersectionObserver adding `.is-visible`) must all be disabled under `prefers-reduced-motion: reduce` (also set `scroll-behavior: auto`); content must never stay hidden if JS fails.\n- **Accessibility (a11y):** AA contrast in both Cosmic Void and Workshop Parchment modes; never rely on color alone; semantic HTML5 landmarks; correct ARIA on the toggle, mobile menu, accordion, modal, billing toggle, and ratings; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, loading, and toasts; `scroll-margin-top` on sections for the sticky header.\n- **Mandatory Visual Feedback:** every click, hover, focus, and submission triggers a visible state change.\n- **Destructive Actions:** `.btn--danger` must be visually distinct in both themes.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks and no inline event handlers — only a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` entry point; all JS is vanilla (no external libraries) and uses `addEventListener`.\n- **Naming Convention:** strict BEM throughout (`.btn--primary`, `.pricing-card__badge`, `.faq-item__trigger`) — never mix conventions.\n- **Copy:** real, themed English copy for every section; placeholders are permitted only where content was genuinely unspecified by this brief.\n- **Final QA (self-verify before delivering):** theme toggle persists across reloads; both themes pass contrast checks; all interactive states (hover\u002Ffocus\u002Factive\u002Floading\u002Fdisabled\u002Fsuccess\u002Ferror) are styled; keyboard-only navigation reaches and operates every control; modal traps focus and closes via `Esc`; reduced-motion disables all decorative animation; no horizontal scroll from 320px upward; zero inline styles or inline SVGs.\n",1791954981296]