[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-482-Space-Western":3},"# CODING-AI PROMPT — COMPLETE LANDING PAGE BUILD · THEME: \"SPACE WESTERN\"\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready Landing Page described below on the first attempt, in a single pass. Every rule in this specification is mandatory — where your habits conflict with a rule, the rule wins.\n\n---\n\n## 0. PROJECT BRIEF & ART DIRECTION\n\n**0.1 Theme & Mood** — \"Space Western\" (claude-artisan\u002Fretrofuturism, 1950s–present): science-fiction storytelling that borrows frontier motifs — dusty horizons, saloons, wanted posters, stamped labels, and practical, lived-in spacecraft. Reference moods: Cowboy Bebop, Firefly, the machinery of frontier science fiction.\n\n**0.2 Visual Language & Effects** — Dusty desert neutrals against nocturnal space; stenciled utility type; star-map details; weathered panels with 1px dust-tone borders; stamped monospace labels; frontier red accents; layered shadow and blur (dust-gradient haze, blurred sticky nav floating over the star field). All decorative art — star fields, orbit dashes, dust haze, rivets, stamp frames — must be built with pure CSS (gradients, box-shadows, pseudo-elements). No images, no SVG.\n\n**0.3 Dual-Mode Mandate** — The source style declares no light\u002Fdark modes; you must design, build, and validate **both** themes before delivery. Dark (\"Nocturnal Space\") is the brand default; Light (\"Dusty Desert\") is its sun-bleached counterpart. Both must pass the contrast checks in Section 3.\n\n**0.4 Design Token Contract** — Map the source palette onto these mandatory token names:\n\n*Dark theme (default, defined on `:root`):*\n- `--bg-primary: #17151a` (nocturnal void) · `--bg-secondary: #272129` (weathered panel) · extra `--surface-raised: #44363a`\n- `--text-primary: #f5e5c8` · `--text-secondary: #c6ae91`\n- `--primary: #d56b3e` (frontier red) · `--secondary: #74bcc1` (star-chart teal) · extra `--dust: #b58b61`\n- `--border-default`: derive from `--dust` (solid or alpha-reduced)\n- `--text-success` \u002F `--border-success`: desaturated green family that reads on dark (e.g., `#8fb573`)\n- `--text-error` \u002F `--border-error`: a true red clearly distinct from `--primary` (e.g., `#e5484d`)\n\n*Light theme (overrides under the light theme class — starting values; tune until WCAG AA passes):*\n- `--bg-primary: #efe6d4` (sun-bleached sand — never pure white; use `#fefefe` only where a near-white is genuinely required) · `--bg-secondary: #e4d7bd` · `--surface-raised: #d9c9a9`\n- `--text-primary: #2a2119` · `--text-secondary: #6b5a44`\n- `--primary: #c05323` (darkened for AA on sand; keep `#d56b3e` for large display fills) · `--secondary: #1e6b72` · `--dust: #8a6544`\n- Success\u002Ferror tokens re-tuned for light backgrounds\n\n*Shared tokens:*\n- Radius: `--radius-sm: 2px` · `--radius-md: 6px` · `--radius-lg: 12px` · `--radius-pill: 999px`\n- Shadows: `--shadow-sm` (subtle lift) · `--shadow-md` = `0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px rgba(0,0,0,.3)` (re-tint the inset highlight for light mode) · signature `--shadow-stamp: 3px 3px 0` hard offset in the current `--text-primary` tone\n- Spacing: source scale `--space-1 … --space-24` plus `--spacing-gap: var(--space-4)`\n- Motion: `--ease-standard: cubic-bezier(.2,.75,.3,1)` · `--transition-fast: .15s var(--ease-standard)` · `--transition-normal: .3s var(--ease-standard)`\n- Type scale: `--text-xs: .75rem` through `--text-5xl: 4rem` (use `clamp()` for `--text-2xl` and above)\n- Stacking: `--z-dropdown`, `--z-modal`, `--z-toast` — strictly ordered values\n- Signature: `--dust-gradient: linear-gradient(160deg, rgba(181,139,97,.28), transparent 52%)` (re-tune alpha for light mode)\n\n**0.5 Typography & Icon Direction** — Stenciled display type for headlines and wordmark (uppercase, generous letter-spacing); utility sans for body; monospace for stamped labels, coordinates, prices, and attributions. Icons: Google Material Symbols, frontier\u002Fspace vocabulary (e.g., `rocket_launch`, `explore`, `route`, `shield`, `handshake`, `receipt_long`, `pin_drop`, `star`, `check`, `close`, `expand_more`, `light_mode`, `dark_mode`, `arrow_forward`, `mail`). Decorative icons get `aria-hidden=\"true\"`; icon-only controls get `aria-label`.\n\n**0.6 Page Section Map (build in this order; write real English copy for every section — Space Western flavor lives in labels, stamps, and names while body copy stays plain and scannable; no lorem ipsum):**\n\n1. **Header \u002F Sticky Nav** — stencil brand wordmark (invent one fitting name, e.g., \"RED DUST FREIGHT CO.\", used consistently site-wide); anchor links: Features, How It Works, Testimonials, Pricing, FAQ; theme toggle; compact `.btn` \"Book Passage\". Sticky with `backdrop-filter: blur()` over the star field; wraps\u002Fstacks at ≤620px.\n2. **Hero** — dashed-border stamp badge in mono (e.g., \"TRANSMISSION \u002F\u002F OUTER-RIM SUPPLY LINES\"); single stencil `h1` stating the core promise (direction: \"Frontier freight, delivered before dawn.\"); 1–2 sentence muted subcopy; CTA pair: `.btn--primary` \"Book a Cargo Run\" (scrolls to Pricing) + `.btn` \"View the Star Charts\" (scrolls to Features); decorative mono coordinates line; star-map backdrop via a fixed, `pointer-events: none` CSS star field plus `--dust-gradient` haze.\n3. **Features — 3 cards** — auto-fit row of `.card`s: Material icon in a stamped chip, stencil `h3`, 2–3 sentence muted copy, mono stamp tag. Angles: armored cargo (`shield`), live star-chart routing (`explore`), frontier-grade support (`handshake`).\n4. **How It Works — 3 steps** — mono step stamps \"01 \u002F 02 \u002F 03\"; dashed CSS connector between steps (horizontal on desktop, vertical on mobile); each step: icon, stencil title, copy. Flow: file the manifest → route is plotted → cargo delivered.\n5. **Testimonials — 3 quote cards** — quote in body font; star rating via Material `star` icons (mix 4s and 5s); mono attribution (\"— NAME · VESSEL\u002FCOMPANY\"); CSS-only monogram avatar chip.\n6. **Pricing — 3 tiers** — theme-voiced names (e.g., Drifter \u002F Marshal \u002F Syndicate); middle tier highlighted with a `--primary` border, stamped \"RECOMMENDED\" badge, `--shadow-md` elevation, and `.btn--primary`; outer tiers use `.btn`. Mono\u002Fdisplay price with flavor unit (\"per cycle\"); 4–6 `check`-icon features per tier. All CTAs scroll to the Final CTA.\n7. **FAQ — 4–6 items** — real questions in theme voice; accordion behavior per §2.5.\n8. **Final CTA** — full-bleed weathered band (dust border, panel shadow, dust gradient): stencil headline, short copy, email-capture `.input-group` + `.btn--primary` \"Join the Manifest\" with full form-state behavior and `aria-live` feedback.\n9. **Footer** — brand + one-line tagline; 2–3 groups of secondary links (e.g., Company, Routes, Legal — real English labels; `href=\"#\"` permitted only for these unspecified destinations); bottom bar with mono stamp (\"© 2071 RED DUST FREIGHT CO. — ALL ROUTES RESERVED\") and a \"Back to top\" link.\n\nKeep the source `.wrap` primitive (max-width 880px, centered, generous padding) as the content container; full-bleed backdrops (hero, final CTA) may exceed it.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML. No `\u003Cstyle>` blocks.\n- Target all design properties, layout rules, and states via class or ID selectors only.\n- HTML stays clean, semantic (header\u002Fnav\u002Fmain\u002Fsection\u002Farticle\u002Ffooter), and agnostic of visuals — changing the look must require editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\n- Every visual value must come from a `var(--...)` token defined in §0.4; no raw hex\u002Fsizing literals inside component rules.\n- **Contrast pairing:** any light background token must pair with a dark text token and any dark background token with a light text token — enforce the pairing in **both** themes, not just the default.\n- Light-mode base is sun-bleached sand, never pure white; use `#fefefe` only where a near-white is genuinely required.\n- Keep the CSS header comment: `\u002F* Space Western — design tokens (generated from style_catalog.json) *\u002F` plus a reference-specification comment.\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark tokens on `:root` (brand default) and light overrides via a theme class on `\u003Chtml>` (`.light`\u002F`.dark` class swap — pick one convention and stick to it).\n- First visit: read `prefers-color-scheme`; if it resolves to light, start light, otherwise start dark. Persist the user's choice in `localStorage` (e.g., key `space-western-theme`); the stored choice always wins on return.\n- The nav must contain a visible toggle: icon-only button with `aria-label` (\"Switch to light theme\" \u002F \"Switch to dark theme\"), `aria-pressed` reflecting current state, and `light_mode`\u002F`dark_mode` Material icon swap.\n- Theming must be pure variable swaps — no HTML restructuring, no duplicate stylesheets, no inline style writes.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is justified in a CSS comment (e.g., text columns use `flex-start`).\n- Mobile-first: rows collapse to columns at the source's 620px breakpoint (add one mid breakpoint if needed); zero horizontal scrolling from 320px up.\n- **Exception:** the source `.grid` primitive may retain CSS Grid (`repeat(auto-fit, minmax(220px,1fr))`) for the Features and Pricing card rows; every other layout must be Flexbox.\n\n**1.5 Styling Approach**\n- The source specification ships a custom CSS token system, which counts as the requested styling approach: build with clean, framework-free semantic CSS. Do not introduce Tailwind or any other framework. All classes must map back to CSS variables and reusable primitives (`.btn`, `.card`, `.input-group`, `.badge`, `.nav`, `.wrap`, `.grid`, `.row`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Google Fonts via `\u003Clink>` with `preconnect` and bind them to tokens: `--font-display: 'Saira Stencil One', Georgia, serif` (alternatives: 'Big Shoulders Stencil Display'); `--font-sans: 'Barlow', Arial, Helvetica, sans-serif`; `--font-mono: 'Courier Prime', 'Courier New', monospace`.\n- **Exception:** the source token file lists Arial, Georgia, and 'Courier New' — retain them only as fallbacks in each stack; the primary faces must be the Google Fonts above.\n- Icons: Google Material Symbols (Outlined) loaded from Google Fonts. Raw inline SVGs, local icon files, and emoji-as-icons are explicitly forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons** — style all states via classes:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target. Variants: `.btn`, `.btn--primary` (frontier red + `--shadow-stamp`), `.btn--ghost`, `.btn--danger`.\n- **Hover:** visible brightness\u002Fshadow shift with `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring built from `--secondary` (3px outline, 3px offset) for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)` click feedback.\n- **Loading:** `.is-loading` — disables interaction, prevents double-clicks, renders a CSS spinner or pulsing Material icon without changing button dimensions; set `aria-busy=\"true\"` via JS.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`, no transforms.\n- **Success\u002FError:** `.is-success` \u002F `.is-error` — temporary feedback driven by `--text-success` \u002F `--text-error` with an icon swap, announced via `aria-live`.\n\n**2.2 Cards** — for Features, Testimonials, and Pricing:\n- **Default:** Flexbox column layout, `--bg-secondary` surface, `1px solid var(--dust)` border, `--shadow-md`, spacing via `--spacing-gap`.\n- **Hover:** `transform: translateY(-2px)` plus shadow deepening on interactive cards.\n- **Focus-within:** border shifts to `--secondary` when a child control receives focus.\n- **Loading (Skeleton):** define `.card--skeleton` shimmer keyframes that prevent layout jumps (available for dynamic slots).\n- **Empty State:** define `.card--empty` — Material icon plus clear guidance text.\n\n**2.3 Forms & Inputs** — the Final CTA email capture:\n- **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the input, and a dedicated error\u002Ffeedback container (`\u003Cp aria-live=\"polite\">`).\n- **States:** empty; focused (accent ring); filled; valid (`--border-success` + check icon); invalid (`--border-error`, error text + icon, `aria-invalid=\"true\"`, `aria-describedby`); disabled; read-only.\n- Validate on submit; error and success copy in English; never rely on color alone — always pair color with an icon and text message.\n\n**2.4 Modal \u002F Popup (Conditional)** — not required by the section map; if you introduce any dialog, it must use a centered flex container (`align-items: center`), a backdrop overlay, a Material `close` icon button, keyboard focus trapping, close via `Esc` and overlay click, and CSS-animated open\u002Fclose states.\n\n**2.5 FAQ Accordion (Required)** — implement accessibly with either native `\u003Cdetails>`\u002F`\u003Csummary>` (preferred: works without JS) or the `button[aria-expanded]` + region pattern:\n- Summary row: flex, `align-items: center`, question in display font, `expand_more` icon rotating 180° on open via CSS transition.\n- Open\u002Fclose animated in CSS (e.g., `grid-template-rows: 0fr\u002F1fr` technique), respecting `prefers-reduced-motion`.\n- Visible `:focus-visible` ring on the summary\u002Fbutton, hover feedback, full keyboard operability.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` sizing, breakpoints per §1.4, no horizontal overflow at any width from 320px.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; keep the source `prefers-reduced-motion: reduce` kill-switch block verbatim in spirit (all animations\u002Ftransitions collapse to ~0ms).\n- **Accessibility (a11y):** WCAG AA contrast in **both** light and dark modes (per the source note, validate both before publishing). Never communicate state by color alone. Semantic HTML5 landmarks, a single `h1`, logical heading order, a skip-to-content link, correct ARIA roles\u002Flabels on the accordion and theme toggle, logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, success, loading).\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** define `.btn-danger` so it is visually distinct from all other buttons in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, and `script.js`. A single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`); zero inline `\u003Cscript>` blocks, zero `\u003Cstyle>` blocks, zero `style=\"...\"` attributes.\n- **Naming convention:** BEM (`block__element--modifier`), consistent with the source primitives (`.btn`, `.btn--primary`, `.card`, `.input`, `.badge`, `.nav`, `.wrap`, `.grid`, `.row`). Never mix conventions.\n- **JS scope (only):** theme toggle + `localStorage` persistence; FAQ accordion behavior (if not native `\u003Cdetails>`); newsletter validation + success\u002Ferror feedback; smooth-scroll enhancement for anchor links. The page must remain fully readable and navigable with JavaScript disabled.\n- **No unrequested placeholders:** write real English copy for every section in the Space Western voice; `href=\"#\"` is allowed only for the genuinely unspecified footer link destinations.\n- **Acceptance checklist (validate before publishing):** both themes pass AA contrast; toggle persists and respects `prefers-color-scheme` on first visit; no horizontal scroll from 320–1440px; complete keyboard-only pass; all button and input states implemented per §2; `prefers-reduced-motion` respected; zero inline styles\u002Fscripts; all user-facing copy in English.\n",1791954988035]