Retro Arcade Pixel demo
Retro Arcade Pixel

A nostalgic pixel-art style inspired by 1980s arcade cabinets, featuring chunky 8-bit graphics, vibrant neon accents, and playful retro gaming aesthetics.
Category: Retro & Pop
Era: 1980s Retro
Prompt: 6.9 KB · 927 words
# System Prompt: Retro Arcade Pixelado Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Retro Arcade Pixelado** landing page for an online classic arcade on the **first attempt**. Follow every rule below strictly.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling must live in a dedicated `style.css` file. **Forbidden:** the `style="..."` attribute anywhere in HTML.
* Target every element via class/ID selectors only.
* HTML must remain semantic and style-agnostic: changing the theme requires editing only CSS.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` and theme classes:

* **Colors:** `--primary: #0000FF` (Electric Blue), `--secondary: #FF0000` (Cherry Red), `--accent-yellow: #FFFF00`, `--accent-green: #00FF00`, `--accent-purple: #800080`, `--accent-cyan: #00FFFF`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success: #00FF00`, `--text-error: #FF0000`, `--border-default: #00FFFF`, `--border-error`, `--border-success`.
* **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforced in both light and dark themes.
* **Light Mode Background:** Do not use pure white; use `#fefefe` where near-white is required. Light mode should evoke a faded CRT-beige arcade cabinet tone.
* **Radius/Shadows:** `--radius-sm: 0` (pixel aesthetic = sharp corners), `--radius-md: 2px`, `--radius-lg: 4px`, `--shadow-sm`, `--shadow-md` (hard, offset pixel shadows, e.g. `4px 4px 0 #000000`).
* **Spacing/Transitions:** `--spacing-gap`, `--transition-fast: 120ms`, `--transition-normal: 250ms`, `--ease-standard: steps(4, end)` (stepped easing to preserve the 8-bit feel).
* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode**
* Dark mode is the **default aesthetic** (arcade CRT black `#000000` with `#FFFF00` text and `2px 2px #FF0000` text-shadow accents). Provide full light mode tokens too.
* Implement via `@media (prefers-color-scheme: dark)` **and** a `.dark` class toggle.
* Persist choice in `localStorage`, falling back to `prefers-color-scheme`; include a visible toggle with correct `aria-pressed`/`aria-label` states. Theme switching must not touch HTML structure.

**1.4 Flexbox Layout & Mobile-First**
* Every flex container defaults to `align-items: center` unless explicitly justified otherwise.
* Mobile-first: rows collapse to columns on small viewports; **zero horizontal scrolling** at any breakpoint.

**1.5 Framework Default**
* Use Tailwind CSS (or custom CSS via `@layer`/`@apply`) with all utilities mapped to the CSS variables above and generic reusable classes (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Google Font **"Press Start 2P"** bound to `--font-base` (fallback: a readable body font such as Inter for long paragraphs — 8-bit display font for headings/labels only, for accessibility).
* **Icons:** Google Material Symbols only. **Forbidden:** raw inline SVGs or local icon files.
* **Exception clause:** Pixel-art decorative graphics must be built with pure CSS (box-shadow pixel grids, gradients) — never inline SVG.

---

## 2. COMPONENT SPECIFICATIONS

**2.1 Buttons (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`)**
* Default: flex, `align-items: center; justify-content: center; gap: 0.5rem`; min 44×44px; 2px solid `#00FFFF` borders; hard pixel shadow.
* Hover: brightness/shadow shift, `cursor: pointer`.
* Focus: distinct pixel-outline focus ring from CSS variables for keyboard nav.
* Active: `transform: scale(0.97)` + a quick "glitch" offset.
* Loading: disabled interaction, CSS spinner (rotating Material Icon), no dimension distortion.
* Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* Success/Error feedback via `--text-success`/`--text-error`.

**2.2 Cards (Features ×3, Pricing ×3, Testimonials)**
* Default: flexbox layout, `--bg-secondary`, 2px `#00FFFF` borders, hard pixel shadows.
* Hover: `translateY(-2px)` + shadow shift.
* `:focus-within`: highlighted cyan border when a child control is focused.
* Skeleton shimmer animation defined in CSS.
* Empty state: Material Icon + guidance text.

**2.3 Forms (FAQ contact / newsletter in Final CTA)**
* States: empty, focused (outline ring), filled, valid (green border/icon), invalid (`#FF0000` border, error icon, error text), disabled, read-only.
* Structure: flex container wrapping label, input, and dedicated error container.

**2.4 Modal (FAQ answers may expand inline; any popup)**
* States: opening, open, loading, success/error, closing — all CSS-transitioned (fast glitch/fade).
* Centered flex, backdrop overlay, Material Icon close button, focus trapping, `Esc` and overlay-click close.

---

## 3. CORE UX & MICRO-INTERACTIONS

* **CRT Effects:** Global `crt-scanline` overlay animation (`animation: crt-scanline 5s linear infinite`), scanline-textured borders via repeating-linear-gradient, subtle screen-flicker on section transitions.
* **Glitch Transitions:** Section reveals use fast glitch/fade keyframe animations; respect `prefers-reduced-motion` (fall back to instant fades).
* **Sound Micro-Interaction:** "Blip" click sound on interactive elements via Web Audio API oscillator (no external audio files); must be mutable and off-by-default-safe (respect user gesture requirements).
* **Accessibility:** Sufficient contrast in both themes; never color-only state communication; semantic HTML5; correct ARIA roles/labels; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback.
* **Mandatory Feedback:** Every click/hover/submission triggers a visible state change.
* **Destructive actions:** `.btn-danger` visually distinct in both themes.

---

## 4. DELIVERABLE

* **Files:** `index.html`, `style.css`, `script.js` — single deferred `<script src="script.js" defer>` entry only; no other inline scripts.
* **Sections (in order):**
  1. **Hero** — pixel-art CSS graphic, 8-bit headline with `text-shadow: 2px 2px #FF0000`, primary CTA button.
  2. **Features** — 3 cards (e.g., "500+ Classic Games", "Global Leaderboards", "Play Instantly in Browser").
  3. **How It Works** — 3 numbered steps with connecting pixel dotted line.
  4. **Testimonials** — 3 player quotes with avatar placeholders and star ratings.
  5. **Pricing** — 3 tiers (Free "Coin-Op", Pro "High Score", Arcade "Full Cabinet") with highlighted middle tier.
  6. **FAQ** — accessible accordion (`<details>`/`<summary>` or ARIA widget).
  7. **Final CTA** — newsletter signup form with validation states.
  8. **Footer** — secondary links, social icons (Material Symbols), copyright.
* **Naming:** One consistent convention (BEM or fixed utility set) throughout — never mix.
* **Copy:** All user-facing copy in **English**, real arcade-themed content — no lorem ipsum.
* **Responsive:** Fluid, no horizontal overflow, tested mentally at 320px → desktop widths.

Generate the complete final code immediately.