[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-786-RALLY-pong-reconsidered":3},"# BUILD PROMPT — \"RALLY: Pong, Reconsidered\" Landing Page\n\n**ROLE:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page described below in a single attempt. Do not ask clarifying questions — make expert decisions where details are unspecified.\n\n**PROJECT BRIEF**\n\n- **Theme:** RALLY — pong, reconsidered. An interactive\u002Fgame landing page for a minimalist, contemporary reimagining of classic Pong: a warm paper-like canvas, soft neumorphic surfaces, and recurring paddle-and-ball motifs.\n- **Era & Mood:** 2020s Contemporary — calm, tactile, playful but restrained.\n- **Palette:** Canvas `#f4f1ea`, raised surface `#fdfcf8`, ink `#191713`, warm gray `#a39d8f`. Pure `#ffffff` is forbidden anywhere; `#fdfcf8` is the theme's near-white.\n- **Signature Effects:** Neumorphism (soft dual shadows), hover effects, transitions, transforms, `aspect-ratio`.\n- **Required Sections (in order):** Sticky nav shell → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n- **All user-facing copy must be written in English.**\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **No inline styles:** the `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID selectors only:** every design property, layout rule, and state lives in `style.css`.\n- **Style-agnostic markup:** retheming the entire page must require editing only the CSS file, never the HTML.\n\n### 1.2 CSS Variables & Theme Tokens\nDefine the full token sheet in `:root` and reference everything via `var(--...)`:\n\n- **Colors:** `--primary: #191713` (ink — headings, primary buttons); `--secondary: #a39d8f` (warm gray — decorative accents, borders, secondary buttons); `--bg-primary: #f4f1ea` (page canvas); `--bg-secondary: #fdfcf8` (raised surfaces); `--text-primary: #191713`; `--text-secondary: #6f6a5c` (readable warm gray — **`#a39d8f` fails text contrast on `#f4f1ea`, so restrict it to decorative use only**); `--text-success: #3e7c58`; `--text-error: #b3432b`; `--border-default: rgba(163,157,143,0.4)`; `--border-error`; `--border-success`.\n- **Contrast pairing:** every light background token pairs with dark text and every dark background with light text, in both themes. Body text ≥ 4.5:1, large text ≥ 3:1.\n- **Neumorphic depth tokens:** `--shadow-out` (raised, e.g. `6px 6px 14px rgba(25,23,19,0.14), -6px -6px 14px rgba(255,255,255,0.9)`), `--shadow-out-lg`, `--shadow-in` (pressed\u002Finset), plus generic `--shadow-sm`, `--shadow-md`; radii `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg: 24px`; `--spacing-gap`; `--transition-fast: 150ms`; `--transition-normal: 250ms`; `--ease-standard: cubic-bezier(0.4,0,0.2,1)`; `--z-dropdown`, `--z-modal`, `--z-toast` (defined even if unused).\n- **Typography tokens:** `--font-display: 'Space Grotesk'` (headings, scores, numerals), `--font-base: 'Inter'` (body).\n\n### 1.3 Mandatory Dark Mode\n- **Exception clause:** the source theme marks Light as the sole mode — Light remains the default experience, but dark mode must still be fully defined and toggleable.\n- **Implementation:** light defaults in `:root`; dark overrides in a `.dark` class **and** in `@media (prefers-color-scheme: dark)` scoped as `:root:not(.light)`, so the explicit toggle always wins over the OS preference. Set the `color-scheme` property per theme so native controls adapt.\n- **Dark tokens derived from the palette:** `--bg-primary: #191713`, `--bg-secondary: #211e18`, `--text-primary: #fdfcf8`, `--text-secondary: #b3ac9d`, borders `rgba(163,157,143,0.28)`, lightened `--text-success`\u002F`--text-error`, and **redefined neumorphic shadows** (deep black outer shadow + faint light rim, e.g. `8px 8px 18px rgba(0,0,0,0.55), -8px -8px 18px rgba(255,255,255,0.04)`). Every surface, card, button, and court must re-map with zero HTML changes.\n- **Toggle:** a visible header button using Google Material Symbols (`dark_mode` \u002F `light_mode`) with `aria-pressed` and a descriptive `aria-label`; persist the choice in `localStorage`; fall back to `prefers-color-scheme` on first visit.\n\n### 1.4 Flexbox Layout & Mobile-First\n- Build all layout structure with Flexbox; **every flex container defaults to `align-items: center`** unless there is an explicitly justified exception.\n- **Mobile-first:** rows collapse to columns on small viewports; **no horizontal scrolling at any width from 320px up**.\n\n### 1.5 Framework\n- Use Tailwind CSS with component classes composed via `@layer` \u002F `@apply` (or clean custom CSS mapped to the same tokens). All utilities must resolve to the variables above; reusable component classes: `.btn`, `.card`, `.input-group`, etc.\n\n### 1.6 Typography & Icons (Google Only)\n- Load Space Grotesk + Inter via Google Fonts `\u003Clink>` tags and bind them to the font tokens.\n- All icons via Google Material Symbols (Rounded variant): `\u003Cspan class=\"material-symbols-rounded\">…\u003C\u002Fspan>`. **Inline SVGs and local icon files are forbidden.**\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem`; minimum touch target 44×44px. Primary = ink fill with light text; secondary = neumorphic raised. Never rely on shadow alone for affordance — pair with clear labels and `cursor: pointer`.\n- **Hover:** deepened shadow or `translateY(-1px)`; **Focus:** distinct visible ring built from CSS variables; **Active:** `transform: scale(0.97)` (neumorphic secondaries switch to `--shadow-in`); **Loading:** disables interaction, prevents double-clicks, shows a rotating Material Symbol spinner without distorting button dimensions; **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`; **Success\u002FError:** temporary feedback styles via `--text-success` \u002F `--text-error`. Define `.btn--danger` as visually distinct in both themes.\n\n### 2.2 Cards (`.card` — features, testimonials, pricing)\n- **Default:** flex column, `--radius-lg`, neumorphic raised on the canvas; **Hover:** `translateY(-2px)` plus deepened shadow; **Focus-within:** visible border accent (never shadow-only) when a child link\u002Fbutton receives focus — critical for keyboard users on neumorphic surfaces; **Loading:** a skeleton shimmer keyframe pattern; **Empty:** structured fallback with a Material Symbol and guidance text.\n\n### 2.3 Form & Input (Final CTA email capture)\n- **Structure:** flex column — `\u003Clabel>`, a neumorphic **inset** input, and a dedicated error-feedback container wired to `aria-live=\"polite\"`.\n- **States:** empty, focused (ring), filled, valid (success border + check icon), invalid (error border, error icon, message in `--text-error`), disabled, read-only — all via CSS classes, never color alone.\n\n### 2.4 FAQ Accordion (no modals or popups are permitted on this page)\n- Button + region pattern: each trigger is a `\u003Cbutton>` with `aria-expanded` and `aria-controls`; panels animate via CSS transition with a rotating chevron Symbol; fully keyboard operable; answers must exist in the DOM and remain discoverable if JS fails.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type and spacing; zero horizontal overflow.\n- **Mandatory visual feedback:** every hover, click, and submission triggers a visible state change.\n- **Smooth animations:** apply `transition: var(--transition-normal)` to all state changes; **respect `prefers-reduced-motion`** — disable the rally animation, transforms, and smooth scrolling, and replace the court with a composed static frame.\n- **Accessibility:** semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), one `h1` with logical heading order, a skip link, visible focus states on all controls, `aria-hidden=\"true\"` on the decorative court, contrast verified in both Light and Dark modes, and no state communicated by color alone.\n- **Sticky header:** neumorphic bar that gains a shadow class on scroll (minimal JS); anchor links smooth-scroll with `scroll-margin-top` so section headings are never hidden under the nav.\n\n## 4. SECTION-BY-SECTION BUILD REQUIREMENTS\n\nWrite real, polished English copy — **lorem ipsum is forbidden**. The copy below may be used directly or lightly varied.\n\n1. **Sticky Nav:** wordmark \"RALLY\", links to Features \u002F How It Works \u002F Pricing \u002F FAQ, theme toggle, compact `.btn--primary` \"Play now\".\n2. **Hero:** two columns (stacked on mobile) — kicker badge \"PONG, RECONSIDERED\", `h1` \"Every rally tells a story.\", subcopy selling minimalist physics-driven pong, `.btn--primary` \"Play the rally\" + `.btn--secondary` \"See how it works\". Right: an **interactive neumorphic court** — a panel with `aspect-ratio: 16\u002F9`, a dashed center line (repeating-linear-gradient), two ink paddles and a ball built purely from styled elements (no SVG\u002Fimages) auto-playing a rally loop via transform-only CSS keyframes (JS pointer-follow on the near paddle optional), plus retro score digits in Space Grotesk (\"03 — 05\"). The court is decorative only.\n3. **Features (3 cards):** icon tiles in neumorphic circles (`aspect-ratio: 1\u002F1`) — `sports_esports` \"True-feel physics\" (spin, momentum, weight), `devices` \"Play anywhere\" (one hand-off, any screen), `self_improvement` \"Quiet by design\" (calm canvas, zero noise).\n4. **How It Works (3 steps):** numerals `01 \u002F 02 \u002F 03` in inset neumorphic circles — \"Pick your paddle\" \u002F \"Enter the rally\" \u002F \"Master the spin\" — joined by the dashed pong center-line motif.\n5. **Testimonials (3 cards):** initials avatars in inset circles, quote, star rating via Material Symbols with a text-equivalent label, name + role. Hover lift applies.\n6. **Pricing (3 tiers):** Rookie (Free) \u002F Rally (featured — \"Most popular\" badge, elevated shadow) \u002F Legend. Each card: tier name, price, feature list with `check` icons, and a CTA (primary button on the featured tier, secondary elsewhere).\n7. **FAQ:** 5–6 accordions covering controller support, offline play, \"is it really just pong?\", accessibility, and cancellation.\n8. **Final CTA:** centered neumorphic panel — \"Your serve.\" with the email capture from spec 2.3, `.btn--primary` \"Join the rally\", and small print below.\n9. **Footer:** wordmark + tagline; secondary link groups (Game \u002F Company \u002F Support) as **text links only** (Material Symbols has no brand logos); bottom bar with a © line and Terms \u002F Privacy links.\n\n## 5. DELIVERABLES & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, and `script.js`; a single deferred `\u003Cscript src=\"script.js\" defer>` — no other inline script blocks.\n- **Naming:** one consistent convention throughout — BEM (`.hero__title`, `.card--featured`, `.accordion__panel`); never mix conventions.\n- **JS scope:** theme toggle + persistence, accordion behavior, sticky-header shadow, form feedback, and optional court enhancement — all progressive enhancement; the page must not break with JS disabled.\n- **No unrequested placeholders:** all copy is real content; placeholders are allowed only where content was genuinely unspecified.\n- Output the complete, runnable code for all three files.\n",1791954992817]