[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-480-Space-Age-Pop":3},"# System Prompt: Build \"Space Age Pop\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Space Age Pop** Landing Page on the first attempt. Theme: 1957–1972 retrofuturism — sleek white surfaces with primary color pops, molded plastic, spherical\u002Fpod forms, chrome bevels, op-art geometric patterns, and astronaut-era optimism (think *2001: A Space Odyssey* interiors and Panton furniture).\n\n**Sections to build:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\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`. **Forbidden:** the `style=\"...\"` attribute anywhere in HTML.\n* Target everything via class\u002FID selectors. HTML stays semantic and style-agnostic.\n* All user-facing copy in **English**.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` exactly as specified (translate and keep names ASCII\u002FEnglish):\n\n* **Colors:** `--color-bg: #f4f2ec`, `--color-surface: #ffffff`, `--color-surface-strong: #eceae2`, `--color-border: #d8d4c6`, `--color-text: #1c1b17`, `--color-text-muted: #5a564a`, `--color-primary: #e8542a`, `--color-accent: #2f8fd4`, `--color-chrome: #c7ccd1`, `--color-sun: #f2b705`.\n* **Radius (pod\u002Forb forms):** `--radius-sm: 12px`, `--radius-md: 24px`, `--radius-lg: 48px`, `--radius-pill: 999px`.\n* **Shadows:** `--shadow-sm\u002Fmd\u002Flg` plus `--shadow-chrome: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -6px 10px rgba(0,0,0,0.08)`.\n* **Fonts:** `--font-sans: 'Poppins', system-ui, sans-serif` (load Poppins via Google Fonts; map `--font-display` to Poppins heavy weights — Century Gothic\u002FCooper Black are not on Google Fonts).\n* **Spacing\u002FEasing:** `--space-1…--space-24`, `--ease-standard: cubic-bezier(0.34, 1.2, 0.64, 1)`, `--ease-entrance`, `--ease-exit`.\n* **Signature effects:** `--starburst: repeating-conic-gradient(from 0deg, var(--color-sun) 0deg 8deg, transparent 8deg 20deg)` and `--chrome-gradient: linear-gradient(135deg, #fdfdfd, #c7ccd1 45%, #fdfdfd 55%, #a9afb5)`.\n* **Contrast pairing:** light backgrounds always pair with `--color-text`; dark surfaces pair with light text. Use `#fefefe` instead of `#ffffff` where a near-white is needed beyond `--color-surface`.\n* **Stacking:** `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200`.\n\n**1.3 Mandatory Dark Mode**\n* Provide a full dark token set under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>` that overrides the same variables (e.g., `--color-bg: #14130f`, `--color-surface: #1f1e19`, `--color-text: #f4f2ec`, adjusted primary\u002Faccent for contrast).\n* Persist theme choice via `localStorage`, fall back to `prefers-color-scheme` on first visit. Include a visible toggle button in the nav with `aria-pressed` and `aria-label=\"Toggle dark mode\"`, using a Google Material Symbol icon (`dark_mode` \u002F `light_mode`).\n* Validate both light and dark modes before publishing — the source spec did not declare modes, so both must be verified.\n\n**1.4 Flexbox Layout & Mobile-First**\n* Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n* All rows (feature grid, pricing tiers, testimonials) collapse to a single column on small viewports. No horizontal scrolling at any width.\n\n**1.5 Framework**\n* Use Tailwind CSS via CDN **or** clean custom CSS in `style.css` driven by the provided component classes — pick one approach and keep it consistent. Map utilities back to the CSS variables and generic classes (`.btn`, `.card`, `.input`, `.badge`, `.nav`).\n\n**1.6 Typography & Icons**\n* Load **Poppins** from Google Fonts (`\u003Clink>` or `@import`) and bind to `--font-sans`\u002F`--font-display`.\n* Use **Google Material Symbols** for all icons. **Forbidden:** raw inline SVGs or local icon files.\n\n---\n\n## 2. COMPONENT SPECIFICATIONS\n\n**2.1 Buttons**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` pill radius (`--radius-pill`), chrome gradient background, `--shadow-sm` + `--shadow-chrome`, min 44×44px touch target.\n* **Hover:** `translateY(-2px) scale(1.02)` with `--shadow-md`, `cursor: pointer`.\n* **Focus-visible:** `outline: 2px solid var(--color-accent); outline-offset: 2px`.\n* **Active:** pressed reset (`translateY(0) scale(1)`).\n* **Loading:** disabled interaction, CSS spinner that doesn't distort button dimensions.\n* **Disabled:** `opacity: .5`, `cursor: not-allowed`, no transform.\n* **Primary variant:** `.btn--primary` — `--color-primary` background, `#fff` text. **Danger variant:** `.btn-danger` visually distinct in both themes.\n\n**2.2 Cards**\n* **Default:** `--color-surface` background, `--radius-lg` (pod form), `--shadow-md` + `--shadow-chrome`, 1px `--color-border`.\n* **Hover:** `translateY(-2px)` with `--shadow-lg`.\n* **Focus-within:** accent border highlight when a child link\u002Fbutton gets focus.\n* **Skeleton:** shimmer animation for loading states. **Empty state:** Google Icon + guidance text.\n\n**2.3 Forms & Inputs**\n* Newsletter signup in the Final CTA \u002F Footer: flex container wrapping label, `.input` field (chrome-inset shadow, `--radius-md`), and a dedicated error feedback element.\n* States: empty, focused (accent ring via `box-shadow: 0 0 0 3px color-mix(...)`), filled, valid (success border + icon), invalid (error border, red text, error icon), disabled, read-only. Never rely on color alone — pair with icons\u002Ftext.\n\n**2.4 FAQ Accordion \u002F Modal-like patterns**\n* Animated open\u002Fclose via CSS transitions (`--ease-standard`), keyboard operable, `aria-expanded` on triggers, `aria-live` for dynamic feedback. Esc closes where applicable.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTIONS\n\n* **Signature Space Age move:** repeat the pod radius + chrome bevel on the nav, buttons, and cards; use the `--starburst` op-art accent sparingly on badges (e.g., \"New\", pricing \"Popular\" tier).\n* Decorative pod\u002Fsphere shapes (CSS circles with `--chrome-gradient`) in the Hero — pure CSS, no images required.\n* Smooth transitions on all state changes; respect `prefers-reduced-motion: reduce` (disable transforms\u002Fanimations).\n* **A11y:** sufficient contrast in both modes, semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`), logical focus order, full keyboard operability, ARIA labels on custom widgets.\n* Every click\u002Fhover\u002Fsubmit triggers visible feedback.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js`. Only one deferred `\u003Cscript src=\"script.js\" defer>` reference in HTML — no inline script blocks.\n* **Naming:** one consistent convention (the provided `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`, `.nav` BEM-style set) — never mix conventions.\n* **Content:** write real, themed English copy for every section (no lorem ipsum). Pricing tiers need real plan names, prices, and feature lists; testimonials need names, roles, and quotes; FAQ needs at least 4 real Q&As.\n* No unrequested placeholders. All copy, class names, and file names in English\u002FASCII.\n",1791954988026]