[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-514-Teslapunk":3},"# Teslapunk Landing Page — Build Specification Prompt\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Teslapunk Landing Page** on the first attempt. Follow every rule below without exception. All user-facing copy must be written in **English**.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in a dedicated `style.css` file. **Forbidden:** any `style=\"...\"` attribute in HTML.\n* All design properties, layout rules, and states are targeted via class or ID selectors only.\n* HTML stays clean, semantic, and style-agnostic — changing the theme must never require markup edits.\n\n**1.2 CSS Variables & Theme Tokens**\nUse the provided Teslapunk token set inside `:root`, extended with the standard aliases:\n* **Colors:** `--primary: #4fd8ff`, `--secondary: #d98a3d`, `--bg-primary: #060b1a`, `--bg-secondary: #0d1830`, `--text-primary: #eaf4ff`, `--text-secondary: #9fb8d9`, `--text-success`, `--text-error`, `--border-default: #a8622f`, `--border-error`, `--border-success`, plus `--color-brass: #c9a24b`, `--color-copper: #a8622f`, `--color-surface-2: #142544`.\n* **Contrast Pairing:** Every light background pairs with dark text and vice versa — enforce in both light and dark themes. Light-mode surfaces must use `#fefefe` (never `#ffffff`) tinted toward the midnight-blue mood (e.g., `#f2f6fb`).\n* **Radius\u002FShadows\u002FSpacing\u002FTransitions:** `--radius-sm: 3px`, `--radius-md: 10px`, `--radius-lg: 22px`, `--radius-pill: 999px`, `--shadow-sm`, `--shadow-md`, `--shadow-arc`, `--shadow-brass`, `--spacing-gap: 24px`, `--transition-fast: .15s`, `--transition-normal: .25s`, `--ease-standard: cubic-bezier(0.2, 0.8, 0.3, 1)`.\n* **Elevation:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n* **Signature effects:** `--arc-gradient`, `--brass-trim`, `--bg-image` as defined in the reference tokens.\n\n**1.3 Mandatory Dark Mode Support**\n* Teslapunk is dark-native: `:root` defaults to the midnight-blue dark palette. Define a light-mode token set under `@media (prefers-color-scheme: light)` and a `.light` class override.\n* Provide a visible theme toggle button (Google Material Symbols icon: `dark_mode` \u002F `light_mode`) with correct `aria-pressed` and `aria-label`.\n* Persist choice via `localStorage`; fall back to `prefers-color-scheme` on first visit. Switching themes must require zero HTML restructuring.\n* Validate contrast in **both** light and dark before finishing — the source spec explicitly requires validation in both modes.\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 explicitly justified exception exists (e.g., feature card grids may use `stretch` — document why).\n* All rows must collapse to columns on small viewports. No horizontal scrolling at any breakpoint.\n\n**1.5 Framework Default**\n* Use clean custom CSS driven by the provided component classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) plus BEM naming for new components. Never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via Google Fonts `\u003Clink>`: **Cinzel** (display headings), **Cormorant** (body serif), **JetBrains Mono** (labels, step numbers, pricing figures).\n* Icons: **Google Material Symbols** only. **Forbidden:** raw inline SVGs or local icon files.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target.\n* Hover: arc glow (`--shadow-arc`) + `translateY(-1px)`, `cursor: pointer`.\n* Focus: distinct `:focus-visible` ring in `--color-primary`.\n* Active\u002FPressed: `transform: scale(0.97)`.\n* Loading: disables interaction, renders an animated CSS spinner (no dimension shift).\n* Disabled: `opacity: .45`, greyscale, `cursor: not-allowed`.\n* Success\u002FError: temporary feedback states driven by `--text-success` \u002F `--text-error`.\n* `.btn-danger` (destructive actions, e.g., \"Cancel subscription\" in pricing) must be visually distinct in both themes.\n\n**2.2 Cards (Features, Pricing, Testimonials)**\n* Default: Flexbox layout, `--color-surface` background with `--arc-gradient` overlay, brass-trim top border (`border-image: var(--brass-trim) 1`), `--shadow-brass`.\n* Hover: `translateY(-2px)` + intensified arc shadow.\n* `:focus-within`: highlighted brass\u002Fprimary border when a child link\u002Fbutton gains focus.\n* Skeleton shimmer animation for any async-loaded content.\n* Empty state fallback layout with Google Icon + guidance text where applicable.\n\n**2.3 Forms & Inputs (Final CTA email capture, FAQ search if included)**\n* Flex container wrapping label, `.input` field, and a dedicated error feedback container.\n* States: empty, focused (arc ring), filled, valid (success border + icon), invalid (error border, red text, error icon), disabled, read-only.\n* Validation feedback announced via `aria-live=\"polite\"`.\n\n**2.4 Modal \u002F Popup (FAQ answers may expand inline — no modal required)**\n* If any modal exists: opening\u002Fopen\u002Fclosing animated via CSS transitions, centered flex container, backdrop overlay, Google Icon close button, focus trapping, closes on `Esc` and overlay click.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, no horizontal overflow, mobile-first breakpoints.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` (disable transforms and crackling-glow pulses).\n* **Accessibility:** semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`), ARIA labels on the theme toggle and FAQ accordions, logical focus order, full keyboard operability, sufficient contrast in both modes, never color-only state communication.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Teslapunk signature:** crackling blue-white arc-lightning glow (`--shadow-arc`, `--arc-gradient`) paired with polished brass\u002Fcopper coil trim (`--brass-trim`) repeated across hero, cards, pricing tiers, and CTA. A subtle CSS-animated \"arc crackle\" pulse on the hero primary button and filament-glow text-shadow on display headings — all disabled under `prefers-reduced-motion`.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n**4.1 Required Sections (in order)**\n1. **Hero** — display headline, subcopy, primary `.btn--primary` CTA + secondary `.btn`, arc-gradient backdrop, badge (\"Wireless Age, Est. 1899\").\n2. **Features** — 3 `.card` components with Google Icons, headings, and copy.\n3. **How It Works** — 3 numbered steps using `--font-mono` numerals, brass-trim connectors.\n4. **Testimonials** — 3 quote cards with attributed names\u002Froles.\n5. **Pricing** — 3 tiers as cards; middle tier highlighted with arc glow and a \"Most Popular\" `.badge`; each with a CTA button.\n6. **FAQ** — accessible accordion (`\u003Cdetails>`\u002F`\u003Csummary>` or ARIA pattern), keyboard operable, animated open\u002Fclose.\n7. **Final CTA** — full-width section with email `.input` + `.btn--primary`, inline validation feedback.\n8. **Footer** — secondary links, theme toggle, copyright.\n\n**4.2 File Structure**\n* Separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond one deferred entry-point reference. No inline CSS.\n* All copy in English. No lorem ipsum — write real, on-theme Teslapunk copy (wireless electricity optimism, coil demonstrations, \"the future is already humming\").\n* Naming: BEM consistently across the entire deliverable.\n\nGenerate the complete, final code now — all three files, fully styled, both themes validated.\n",1791954988508]