RALLY — Pong, Reconsidered demo
RALLY — Pong, Reconsidered

A minimalist arcade-inspired aesthetic reimagining classic Pong with stark geometric shapes, glowing monochrome elements, and playful interactive motion.
Category: Retro & Pop
Era: 1970s Retro
Prompt: 10.9 KB · 1525 words
# BUILD PROMPT — "RALLY: Pong, Reconsidered" Landing Page

**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.

**PROJECT BRIEF**

- **Theme:** RALLY — pong, reconsidered. An interactive/game landing page for a minimalist, contemporary reimagining of classic Pong: a warm paper-like canvas, soft neumorphic surfaces, and recurring paddle-and-ball motifs.
- **Era & Mood:** 2020s Contemporary — calm, tactile, playful but restrained.
- **Palette:** Canvas `#f4f1ea`, raised surface `#fdfcf8`, ink `#191713`, warm gray `#a39d8f`. Pure `#ffffff` is forbidden anywhere; `#fdfcf8` is the theme's near-white.
- **Signature Effects:** Neumorphism (soft dual shadows), hover effects, transitions, transforms, `aspect-ratio`.
- **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.
- **All user-facing copy must be written in English.**

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No inline styles:** the `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID selectors only:** every design property, layout rule, and state lives in `style.css`.
- **Style-agnostic markup:** retheming the entire page must require editing only the CSS file, never the HTML.

### 1.2 CSS Variables & Theme Tokens
Define the full token sheet in `:root` and reference everything via `var(--...)`:

- **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`.
- **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.
- **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/inset), 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).
- **Typography tokens:** `--font-display: 'Space Grotesk'` (headings, scores, numerals), `--font-base: 'Inter'` (body).

### 1.3 Mandatory Dark Mode
- **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.
- **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.
- **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`/`--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.
- **Toggle:** a visible header button using Google Material Symbols (`dark_mode` / `light_mode`) with `aria-pressed` and a descriptive `aria-label`; persist the choice in `localStorage`; fall back to `prefers-color-scheme` on first visit.

### 1.4 Flexbox Layout & Mobile-First
- Build all layout structure with Flexbox; **every flex container defaults to `align-items: center`** unless there is an explicitly justified exception.
- **Mobile-first:** rows collapse to columns on small viewports; **no horizontal scrolling at any width from 320px up**.

### 1.5 Framework
- Use Tailwind CSS with component classes composed via `@layer` / `@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.

### 1.6 Typography & Icons (Google Only)
- Load Space Grotesk + Inter via Google Fonts `<link>` tags and bind them to the font tokens.
- All icons via Google Material Symbols (Rounded variant): `<span class="material-symbols-rounded">…</span>`. **Inline SVGs and local icon files are forbidden.**

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)
- **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`.
- **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/Error:** temporary feedback styles via `--text-success` / `--text-error`. Define `.btn--danger` as visually distinct in both themes.

### 2.2 Cards (`.card` — features, testimonials, pricing)
- **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/button 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.

### 2.3 Form & Input (Final CTA email capture)
- **Structure:** flex column — `<label>`, a neumorphic **inset** input, and a dedicated error-feedback container wired to `aria-live="polite"`.
- **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.

### 2.4 FAQ Accordion (no modals or popups are permitted on this page)
- Button + region pattern: each trigger is a `<button>` 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.

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid type and spacing; zero horizontal overflow.
- **Mandatory visual feedback:** every hover, click, and submission triggers a visible state change.
- **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.
- **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.
- **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.

## 4. SECTION-BY-SECTION BUILD REQUIREMENTS

Write real, polished English copy — **lorem ipsum is forbidden**. The copy below may be used directly or lightly varied.

1. **Sticky Nav:** wordmark "RALLY", links to Features / How It Works / Pricing / FAQ, theme toggle, compact `.btn--primary` "Play now".
2. **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/9`, a dashed center line (repeating-linear-gradient), two ink paddles and a ball built purely from styled elements (no SVG/images) 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.
3. **Features (3 cards):** icon tiles in neumorphic circles (`aspect-ratio: 1/1`) — `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).
4. **How It Works (3 steps):** numerals `01 / 02 / 03` in inset neumorphic circles — "Pick your paddle" / "Enter the rally" / "Master the spin" — joined by the dashed pong center-line motif.
5. **Testimonials (3 cards):** initials avatars in inset circles, quote, star rating via Material Symbols with a text-equivalent label, name + role. Hover lift applies.
6. **Pricing (3 tiers):** Rookie (Free) / Rally (featured — "Most popular" badge, elevated shadow) / Legend. Each card: tier name, price, feature list with `check` icons, and a CTA (primary button on the featured tier, secondary elsewhere).
7. **FAQ:** 5–6 accordions covering controller support, offline play, "is it really just pong?", accessibility, and cancellation.
8. **Final CTA:** centered neumorphic panel — "Your serve." with the email capture from spec 2.3, `.btn--primary` "Join the rally", and small print below.
9. **Footer:** wordmark + tagline; secondary link groups (Game / Company / Support) as **text links only** (Material Symbols has no brand logos); bottom bar with a © line and Terms / Privacy links.

## 5. DELIVERABLES & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, and `script.js`; a single deferred `<script src="script.js" defer>` — no other inline script blocks.
- **Naming:** one consistent convention throughout — BEM (`.hero__title`, `.card--featured`, `.accordion__panel`); never mix conventions.
- **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.
- **No unrequested placeholders:** all copy is real content; placeholders are allowed only where content was genuinely unspecified.
- Output the complete, runnable code for all three files.