McBling demo
McBling

A flashy mid-2000s pop-culture glamour aesthetic defined by glitter, rhinestones, hot pink, and celebrity-driven excess.
Category: Retro & Pop
Era: Mid-2000s Retro
Prompt: 13.8 KB · 1828 words
# SYSTEM PROMPT — Build the "Sparklr" McBling Landing Page (Retro & Pop)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. Do not ask clarifying questions; deliver final code.

**Product concept:** *Sparklr* — a fictional VIP glam rewards app. All user-facing copy must be written by you, in English, in the McBling voice: playful early-2000s tabloid-celebrity slang ("bling," "VIP," "xoxo," "obsessed," "certified glam"). No lorem ipsum anywhere.

**Art direction (McBling, 2003–2008):** Paris Hilton / flip-phone / early-MySpace glam. Rhinestones, glitter, hot pink + gold, velour softness, ostentatious playful excess, retrofuturism. Signature move: the `--rhinestones` gem-scatter layered over the `--glitter-fill` hot-pink→gold gradient, rimmed with the white inset `--shadow-bling` highlight — repeated on the nav, primary buttons, and badges. All decoration must be CSS-crafted (gradients, rhinestone scatters, Google Material Symbols clusters); no image assets are required.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- All styling lives in `style.css`. **Forbidden:** the `style="..."` attribute anywhere in the HTML.
- Target every design property, layout rule, and state via class or ID selectors only.
- HTML stays clean, semantic, and style-agnostic: reskinning the page must require editing CSS only, never markup.

### 1.2 CSS Variables & Theme Tokens
Define all tokens in `:root` (dark theme as default) and override them for the light theme. Mandatory semantic tokens plus the McBling extended set:

```css
:root {
  /* mandatory semantic tokens — dark (default) values */
  --primary: #ff2ea6;
  --secondary: #ffd23f;
  --bg-primary: #2a0a1f;
  --bg-secondary: #3d0f2c;
  --text-primary: #fff2fa;
  --text-secondary: #e8b8d8;
  --text-success: #7bffb8;
  --text-error: #ff6b7d;
  --border-default: rgba(255, 214, 240, 0.35);
  --border-success: rgba(123, 255, 184, 0.55);
  --border-error: rgba(255, 107, 125, 0.65);
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(255,46,166,0.30);
  --shadow-md: 0 6px 20px rgba(255,46,166,0.35);
  --spacing-gap: 16px;
  --transition-fast: 150ms; --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
  --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;
  /* McBling extended tokens */
  --surface-strong: #52123c;
  --rhinestone: #9be8ff;
  --gold: #ffcf5c;
  --radius-pill: 999px;
  --shadow-lg: 0 14px 40px rgba(255,46,166,0.40);
  --shadow-bling: 0 0 0 2px rgba(255,255,255,0.55) inset, 0 0 18px rgba(255,210,63,0.55);
  --glitter-fill: linear-gradient(135deg, #ff2ea6 0%, #ff7ac6 35%, #ffd23f 100%);
  --rhinestones: radial-gradient(circle at 10% 20%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 40% 70%, #9be8ff 0 2px, transparent 2.5px),
    radial-gradient(circle at 70% 30%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 90% 80%, #ffd23f 0 2px, transparent 2.5px),
    radial-gradient(circle at 55% 15%, #fff 0 1.5px, transparent 2px);
  /* fonts (Google Fonts — see 1.6) */
  --font-display: 'Shrikhand', 'Titan One', cursive;
  --font-script: 'Pacifico', cursive;
  --font-base: 'Baloo 2', system-ui, sans-serif;
  /* type + space scales from the reference spec (--text-xs … --text-5xl, --space-1 … --space-24) */
}
```

- **Light theme overrides** (`.theme-light` on `<html>`): `--bg-primary: #ffe9f5; --bg-secondary: #ffd9ec; --surface-strong: #ffc4e3; --text-primary: #3d0f2c; --text-secondary: #7a2b5e; --border-default: rgba(61,15,44,0.22); --text-success: #0c6b45; --text-error: #c11a4a;` with lighter pink shadows. Body background: dark = `radial-gradient(120% 100% at 50% 0%, #52123c 0%, #2a0a1f 70%)`; light = `radial-gradient(120% 100% at 50% 0%, #fff2fa 0%, #ffe9f5 70%)`.
- **Contrast pairing is mandatory in every theme:** light backgrounds pair with dark plum text; dark backgrounds pair with light pink text. Never use `--secondary`/`--gold` as text color on light backgrounds (fails contrast) — gold is a fill only, always paired with `--text-primary` on top.
- Light mode must not default to pure white; use `#fefefe` only where a near-white surface is genuinely needed.
- You may fine-tune values, but token names, pairing rules, and the `--glitter-fill`/`--rhinestones`/`--shadow-bling` signature must be preserved.

### 1.3 Mandatory Light & Dark Mode
- The source specification does not declare modes; you must define and validate **both** before publishing.
- Implement via a `.theme-light` / `.theme-dark` class on `<html>` plus `@media (prefers-color-scheme: …)` as the first-visit fallback; also set `color-scheme` accordingly. Switching themes must require zero HTML restructuring.
- Persist the user's choice in `localStorage`; on first visit, follow `prefers-color-scheme`.
- Include a visible toggle in the nav: Google Material Symbol (`light_mode` / `dark_mode`), correct `aria-pressed` and `aria-label` ("Switch to light/dark theme"), keyboard operable, with a visible focus ring.
- Validate WCAG AA in both themes: 4.5:1 body text, 3:1 large text and UI components. Pay special attention to hot pink and gold on light backgrounds.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- Mobile-first: all rows convert to columns on small viewports (e.g., ≤768px); no horizontal scrolling at any width; all interactive targets ≥44×44px.

### 1.5 CSS Approach
- The source spec supplies a custom token-driven CSS foundation, so per the framework rule's exception, build with **clean vanilla CSS organized by the token system** (optionally via `@layer tokens, base, components, sections, utilities`) instead of Tailwind. All reusable classes (`.btn`, `.card`, `.input`, `.badge`, `.nav`) must map back to the CSS variables.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- Load via `<link>`: `Shrikhand` (display), `Pacifico` (script accents, the Curlz MT vibe), `Baloo 2` (body, the rounded Comic Sans vibe), weights 400–800. Bind them to `--font-display`, `--font-script`, `--font-base`.
- **Exception clause:** the source spec names Comic Sans MS / Curlz MT; substitute the Google Fonts equivalents above — the Google Fonts rule stands.
- Icons: Google Material Symbols **Rounded**, FILL 1 (solid bling look), loaded via `<link>`. **Forbidden:** raw inline SVGs, local icon files, emoji used as icons. Decorative icons get `aria-hidden="true"`.

---

## 2. PAGE STRUCTURE & SECTION SPECIFICATIONS

Global: skip link, `<header>/<nav>`, `<main>`, `<footer>`; one `<h1>` (hero); each section is a `<section aria-labelledby>` with an `<h2>`; fluid type via `clamp()` on display sizes.

### 2.1 Header & Navigation
Sticky pill nav per the `.nav` spec: `--rhinestones` over `--glitter-fill`, `--shadow-md` + `--shadow-bling`, `--radius-pill`, flex `align-items: center`. Contains: Sparklr wordmark (display font, gradient text with solid fallback), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA "Join the VIP." On mobile, links wrap or collapse behind an accessible hamburger (`aria-expanded`, keyboard operable) — never overflow. Sticky layer uses `--z-dropdown`.

### 2.2 Hero
Glitter badge (`.badge`), giant `<h1>` in `--font-display` with `--glitter-fill` text gradient (solid `--text-primary` fallback), on-voice subheadline, CTA pair (`.btn--primary` + `.btn--secondary`), decorative CSS rhinestone/sparkle cluster (Material Symbols `diamond`, `auto_awesome`, `star`, `aria-hidden`, gentle twinkle animation), and a social-proof strip (five gold `star` icons + "Loved by 10,000+ certified VIPs").

### 2.3 Features — 3 Cards
Three `.card` components, each: glitter icon badge (Material Symbol), `<h3>` title, description. Suggested themes: Rhinestone Rewards, Instant Glam Cam, VIP Secret Perks. Hover: `translateY(-2px)` + shadow shift; `:focus-within` border highlight.

### 2.4 How It Works — 3 Steps
Numbered glitter pill badges (1/2/3), Material Symbol icons, connecting dotted sparkle line (CSS), flex row → column on mobile. Suggested steps: Snap It Up → Rack Up Rhinestones → Cash In the Glam.

### 2.5 Testimonials
Three quote cards: five gold stars, tabloid-style pull quotes, avatar as initials inside a rhinestone-styled circle (no external images), fictional name + `@handle` (MySpace "Top 8" energy), plus a "Certified Bling" badge.

### 2.6 Pricing — 3 Tiers
Three cards; the middle tier is featured: "Most Bling" badge, `--shadow-bling` + glitter border, slightly scaled up, remaining fully readable in both themes. Suggested names: Broke Chic (Free), Certified Bling ($9/mo, featured), Full Royal Treatment ($19/mo). Feature checklists use `check_circle` icons; per-tier CTAs (featured = `.btn--primary`, others = `.btn`).

### 2.7 FAQ
Five to six Q&As (e.g., "Does it work on my flip phone?"). Accessible accordion: prefer native `<details>/<summary>` styled as buttons with a rotating `expand_more` icon, or a JS accordion with `button[aria-expanded]` + region. Keyboard operable; open state shown by icon rotation + `aria-expanded`, never color alone.

### 2.8 Final CTA
Full-width glitter panel (`--rhinestones` + `--glitter-fill`) with dark plum text and white text-shadow for contrast. `<h2>`, then an email capture form (see 3.3): label, `.input`, `.btn--primary` submit. On submit: button enters loading (simulated ~1s), then success state; invalid email shows inline error. Feedback via `aria-live="polite"` region — no modal required.

### 2.9 Footer
`--bg-secondary` background; columns of secondary links (Product, Company, Social, Legal), copyright with dynamic year, back-to-top link, "Made with" + `favorite` icon. All links show visible focus rings.

---

## 3. COMPONENT DESIGN SPECIFICATIONS

### 3.1 Buttons
All states via CSS classes only. **Default:** flex, `align-items: center; justify-content: center; gap: 0.5rem`, min 44×44px, `--radius-pill`, `transition: transform var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard)`. **Hover:** lift/scale + shadow shift, `cursor: pointer`. **Focus-visible:** 2px `--rhinestone` outline, 2px offset. **Active:** `transform: scale(0.97)` press feedback (this overrides the source CSS's `:active` reset). **Loading (`.is-loading`):** `pointer-events: none`, `aria-busy="true"`, CSS spinner via `::after` border animation, button dimensions unchanged, double-clicks impossible. **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`, no transform. **Success/Error (`.is-success`, `.is-error`):** temporary feedback using `--text-success`/`--text-error` tokens. Variants: `.btn--primary` (glitter/rhinestone fill, dark plum text, bling shadow), `.btn--secondary` (`--surface-strong`), `.btn--danger` if ever needed — visually distinct in both themes.

### 3.2 Cards
**Default:** flex column, `--bg-secondary` surface, `--border-default`, `--radius-lg`, `--shadow-md`, tokenized padding. **Hover (interactive cards):** `translateY(-2px)` + elevation shift. **Focus-within:** border highlights when a child control is focused. **Skeleton (`.card--skeleton`):** shimmer keyframes (gradient sweep), no layout shift, `aria-busy`. **Empty (`.card--empty`):** centered Material Symbol + guidance text. Skeleton and empty classes must be defined in the stylesheet.

### 3.3 Forms & Inputs
Structure: flex column `.input-group` wrapping `<label>`, `.input`, and a dedicated error container. States: empty, `:focus` (gold ring: `--secondary` border + 3px gold glow), filled, `.is-valid` (success border + `check_circle` icon), `.is-invalid` (`--border-error`, `--text-error` message + `error` icon, `aria-invalid="true"`, message linked via `aria-describedby`), `[disabled]`, `[readonly]`. Placeholder uses `--text-secondary`. Dynamic messages announce via `aria-live="polite"`.

### 3.4 Modal / Dialog (conditional)
If any overlay is implemented (not required by this page), it must have: centered flex container, backdrop, Material Symbol close button, focus trapping, Esc and overlay-click closing, CSS-animated open/close, loading/success/error states, and `--z-modal` stacking.

---

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, breakpoints, zero horizontal overflow.
- **Smooth animations:** every state change transitions with `--transition-fast`/`--transition-normal` and the springy `--ease-standard`. Respect `prefers-reduced-motion`: disable transforms, shimmer, twinkle, and smooth scrolling.
- **Accessibility:** AA contrast in both themes; never color-only state (pair icons + text for errors, success, accordion state); semantic HTML5; correct ARIA on custom widgets; logical focus order; full keyboard operability; `aria-live` for form feedback; visible focus rings everywhere.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **McBling micro-interactions:** subtle sparkle twinkle on decorative icons, gentle shimmer sweep on glitter surfaces, bling-glow pulse on primary CTA hover — all reduced-motion gated.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `<style>` or `<script>` blocks; the HTML references exactly one `<script src="script.js" defer>`.
- **Naming:** BEM consistently (`.nav__link`, `.btn--primary`, `.pricing-card--featured`, `.faq-item__question`) — never mix conventions.
- **JS scope:** theme toggle + `localStorage`, FAQ (if not `<details>`), newsletter validation demo with loading→success, smooth anchor scrolling, optional reduced-motion-aware scroll reveals. No libraries or CDNs beyond Google Fonts and Material Symbols.
- **Copy:** all user-facing copy in English, McBling voice, real content for every section — placeholders only where content was genuinely unspecified.
- Deliver the complete code on the first attempt.