[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-650-Spotify-Dark-Immersive":3},"# BUILD SPECIFICATION — CODING AI PROMPT\n## Landing Page: \"Spotify Dark Immersive\" (2024–2026 Music Streaming Aesthetic)\n\n**Role.** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page described below **in a single attempt** — full code, no questions, no partial output, no follow-ups.\n\n**Theme.** Spotify Dark Immersive — near-black immersive canvas, Spotify Green as the single functional accent, pill-and-circle geometry, uppercase wide-tracked buttons, heavy shadows, album art as the only ambient color source. Keywords: `spotify`, `dark immersive`, `Spotify Green`, `near-black`, `pill buttons`, `circle controls`, `uppercase buttons`, `wide tracking`, `heavy shadows`, `album art`, `SpotifyMixUI`.\n\n**Visual Direction (authoritative, translated from source spec):** Near-black immersive canvas (`#121212`, `#181818`, `#1f1f1f`) where the UI recedes so the content can shine. Spotify Green (`#1ed760`) is the sole functional accent — reserved for play controls, active states, and primary CTAs. Pill buttons (radius `9999px`) and circular play controls (radius `50%`). Button labels are uppercase with wide letter-spacing (1.4px–2px). Heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) for elevated elements; card shadows (`rgba(0,0,0,0.3) 0px 8px 8px`). Inset border-shadow combo on inputs. Album art supplies the only ambient color. Compact typography (10px–24px UI range). White (`#ffffff`) primary text, Silver (`#b3b3b3`) secondary text, Border gray (`#4d4d4d`), Error red (`#f3727f`).\n\n**Page Map (all mandatory):** Global sticky Header → 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**.\n\n**Brand constraint:** Invent a fictional streaming brand (name, tagline, wordmark styled purely in CSS type). Do NOT reproduce Spotify's logo, wordmark, or any trademarked asset — the aesthetic is inspired-by only.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 — CSS-First Architecture & Zero Inline CSS**\n* All styling must live in a dedicated `style.css`. **Forbidden:** the `style=\"...\"` attribute anywhere in the HTML, inline `\u003Cstyle>` blocks, and inline event handlers (`onclick`, etc.).\n* All design properties, layout rules, and states must be targeted exclusively via class or ID selectors.\n* HTML must remain clean, semantic (`header`, `nav`, `main`, `section`, `footer`, single `h1`, logical `h2`–`h3` hierarchy), and visually agnostic — changing the look must never require touching the markup.\n\n**1.2 — CSS Variables & Theme Tokens (mandatory token contract)**\nDefine all visual tokens in `:root` exactly as follows (names are fixed; do not rename):\n\n| Token | Value | Token | Value |\n|---|---|---|---|\n| `--primary` | `#1ed760` | `--text-primary` | `#ffffff` |\n| `--primary-hover` | `#1fdf64` | `--text-secondary` | `#b3b3b3` |\n| `--on-primary` | `#000000` | `--text-success` | `#1ed760` |\n| `--bg-primary` | `#121212` | `--text-error` | `#f3727f` |\n| `--bg-secondary` | `#181818` | `--border-default` | `#4d4d4d` |\n| `--bg-tertiary` | `#1f1f1f` | `--border-success` | `#1ed760` |\n| — | — | `--border-error` | `#f3727f` |\n\nGeometry & motion tokens: `--radius-sm: 4px`, `--radius-md: 8px` (cards), `--radius-lg: 16px`, `--radius-pill: 9999px`, `--radius-circle: 50%`, `--shadow-sm: 0 8px 8px rgba(0,0,0,0.3)` (cards), `--shadow-md: 0 8px 24px rgba(0,0,0,0.5)` (elevated\u002Fplay controls), `--spacing-gap: 1rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.\n* **Contrast pairing (mandatory):** Dark backgrounds (`#121212\u002F#181818\u002F#1f1f1f`) pair exclusively with light text (`#ffffff\u002F#b3b3b3`). The green accent surface pairs exclusively with near-black text (`--on-primary`) — never white-on-green. This pairing must hold in every theme variant.\n* Define a focus-ring token (e.g., a `box-shadow` ring built from `--primary` with a `--bg-primary` gap) so focus is visible on near-black surfaces and bends around pill\u002Fcircle geometry.\n\n**1.3 — Mandatory Dark Mode & Theme Switching**\n* Dark is the default and primary presentation: all `:root` tokens above ARE the dark theme. No HTML restructuring may ever be required to switch themes.\n* Implement the mandatory theme-switching architecture with a `.theme-black` variant class that overrides only surfaces: `--bg-primary: #000000`, `--bg-secondary: #0a0a0a`, `--bg-tertiary: #121212` (all text, accent, border, shadow tokens unchanged).\n* Provide a **visible toggle control** in the header (Material Symbols icon button, ≥44px) with correct `aria-pressed` and a dynamic `aria-label` (e.g., \"Switch to Pure Black display\" \u002F \"Switch to Default Dark display\").\n* **Persistence:** store the user's choice in `localStorage`; on first visit with no stored value, default to Default Dark regardless of `prefers-color-scheme`.\n* **Exception (explicit):** Per the theme specification, a light mode is marked \"Not Recommended\" — therefore no light palette is shipped; the mandatory toggle switches between the two dark variants (Default Dark ↔ Pure Black\u002FAMOLED) instead of light\u002Fdark, preserving all switching, persistence, and ARIA requirements.\n\n**1.4 — Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox (`display: flex`; grids via flex-wrap or CSS Grid only where a grid is semantically required).\n* **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in CSS comments (the only pre-approved exceptions: multi-line text blocks inside testimonial\u002Ffeature cards and the FAQ question rows, which may use `flex-start`\u002F`space-between` for reading alignment).\n* Mobile-first: single-column at small viewports, scaling to multi-column at ≥768px\u002F≥1024px. No horizontal scrolling at any width from 320px up — use fluid `clamp()` sizing, `max-width: 100%`, and `min-width: 0` on flex children.\n\n**1.5 — Styling Framework & Class Naming**\n* Use clean custom CSS in `style.css`, organized with Tailwind's layered philosophy: `@layer` (or clearly commented sections) for **tokens → base → components → sections**. Do not use the Tailwind Play CDN or any build step; do not author utility-class soup in the markup.\n* **One naming convention only: BEM** (e.g., `.btn`, `.btn--primary`, `.card`, `.hero__eyebrow`, `.pricing-card--featured`, `.faq-item__trigger`). Never mix conventions; IDs are reserved for JS hooks and anchor targets only.\n\n**1.6 — Typography & Icons (Google Fonts Mandatory)**\n* Load **Figtree** from Google Fonts (weights 400\u002F700\u002F800) via `\u003Clink>` with `preconnect`, and bind it to `--font-base` with a stack ending in `system-ui` as fallback only.\n* **Exception (explicit):** Although the source spec lists `system-ui`, Google Fonts is mandatory — Figtree is the Circular-like substitute; `system-ui` may appear only as the last entry in the font stack.\n* Icons: Google **Material Symbols (Rounded)** via the Google Fonts stylesheet. **Forbidden:** raw inline SVGs, local icon files, emoji-as-icons. Solid-fill icon buttons (e.g., play) use `font-variation-settings: 'FILL' 1`.\n* **Type scale (compact):** micro-labels\u002Feyebrows 10–12px uppercase 700 with 1.4px–2px letter-spacing in `--text-secondary`; body copy 14–16px\u002F400, sentence case (uppercase+tracking is for buttons and micro-labels ONLY); card titles 16–18px\u002F700; section `h2` up to 24px. The 10px floor applies only to decorative micro-labels — functional body copy must be ≥14px for legibility. The single allowed exception to the compact range: the hero `h1` may scale responsively via `clamp(32px, 6vw, 56px)` at weight 800.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 — Buttons (Pill & Circular Controls)**\n* Base `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — pill radius (`--radius-pill`), `text-transform: uppercase`, `letter-spacing: 1.6px`, `font-weight: 700`, font-size 12–14px, minimum interactive target **44×44px** (visual padding rhythm of 8px 16px is allowed only where total height still ≥44px; primary CTAs use 12px 24px).\n* Variants: `.btn--primary` (background `--primary`, text `--on-primary`, hover background `--primary-hover` + `--shadow-md`); `.btn--secondary` (transparent, 1px `--border-default`... hover border\u002Ftext to `#ffffff`); `.btn--icon` (circular icon buttons, `--radius-circle`).\n* **Hover:** brightness\u002Fshadow shift + `cursor: pointer`. **Focus-visible:** the token-based ring from §1.2. **Active:** `transform: scale(0.97)`.\n* **Loading (`is-loading` + `aria-busy=\"true\"`):** disables pointer events to prevent double-clicks; swaps the label for a CSS spinner (border spinner in `currentColor`) or rotating Material icon; **button dimensions must not change** (fixed `min-width`).\n* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n* **Success\u002FError:** temporary `.is-success` \u002F `.is-error` feedback styles driven by `--text-success` \u002F `--text-error`, announced via the global `aria-live` region.\n* **Circular play controls (`.btn-play`):** 48–56px diameter, `--radius-circle`, green background, black `play_arrow` icon, `--shadow-md`; hover grows to `scale(1.06)`; click toggles `play_arrow` ↔ `pause` (Material icon text swap) and updates `aria-label` (\"Play preview\" \u002F \"Pause preview\").\n\n**2.2 — Cards**\n* Base `.card`: Flexbox layout, background `--bg-secondary`, radius `--radius-md` (8px), padding 16–24px, `--shadow-sm`, no visible border by default.\n* **Hover:** `transform: translateY(-2px)` + `--shadow-md` + background lift to `--bg-tertiary`; if the card contains a `.btn-play`, it scales in\u002Freveals on hover (the classic Spotify card-play pattern) while remaining keyboard-focusable at all times.\n* **Focus-within:** card border\u002Fring highlights in `--primary` when any child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** define a shimmer keyframe gradient (`#282828 → #3a3a3a`) for `.skeleton`; apply to album art images until they load — dimensions must be reserved so nothing shifts. **Empty\u002FFailure state:** a structured fallback with a Material icon (e.g., `music_note`) and short guidance text for any failed image.\n* Never rely on hover alone — every hover affordance must have a visible focus\u002Fkeyboard equivalent.\n\n**2.3 — Forms & Inputs (Final CTA email capture)**\n* Structure: `.input-group` — flex container wrapping a `\u003Clabel>`, the input, and a dedicated error-feedback container.\n* Input style: background `--bg-tertiary`, **inset border-shadow combo** (`box-shadow: inset 0 0 0 1px var(--border-default)`, no `border` property), pill radius to match the geometry system.\n* **States, all required:** Empty; Focused (inset ring swaps to 2px `--primary`); Filled; Valid (success ring + trailing `check` icon in `--text-success`); Invalid (error ring `--border-error`, `error` icon, red message text in `--text-error` — never color alone, always icon + text); Disabled (`opacity: 0.5`, `cursor: not-allowed`); Read-only.\n* Error messages live in the dedicated container, linked via `aria-describedby`; dynamic feedback announced through an `aria-live=\"polite\"` region.\n\n**2.4 — FAQ Accordion (Disclosure Component)**\n* Each item: `h3 > button.faq-item__trigger` with `aria-expanded` and `aria-controls`, controlling a region panel.\n* Trigger: flex, `align-items: center`, `justify-content: space-between`, background `--bg-secondary`, radius `--radius-md`, hover lifts to `--bg-tertiary`, focus-visible ring; trailing `expand_more` Material icon rotates 180° when open (`transition: var(--transition-normal)`).\n* Panel: animated open\u002Fclose via `grid-template-rows: 0fr → 1fr` (or equivalent height transition) using `--transition-normal`; under `prefers-reduced-motion`, state changes are instant.\n* Fully keyboard-operable (native `button`); allow multiple-open behavior; no mouse-only interactions anywhere.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid type\u002Fspacing via `clamp()`; breakpoints at 640\u002F768\u002F1024px; zero horizontal overflow from 320px upward.\n* **Smooth animations:** every state change transitions with `var(--transition-fast)`\u002F`var(--transition-normal)` and `--ease-standard`; **all** transforms, shimmers, and smooth scrolling are disabled under `@media (prefers-reduced-motion: reduce)`.\n* **Accessibility (a11y):** WCAG AA contrast in both dark variants (the `#b3b3b3`-on-`#121212` and black-on-green pairings pass — never white-on-green); never color alone to communicate state; semantic HTML5 landmarks; a visible skip-to-content link as the first focusable element; correct ARIA on the theme toggle, mobile menu, accordion, and icon-only buttons; logical focus order; full keyboard operability; one global `aria-live` region for form outcomes and toasts.\n* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change — nothing interactive may feel dead.\n* **Destructive\u002Fsecondary actions:** none exist on this page, but any \"Cancel\"-style link must remain visually distinct from primary CTAs in both dark variants.\n* Polish details: `::selection` styled green with black text; anchor scrolling uses `scroll-behavior: smooth` with `scroll-margin-top` accounting for the sticky header.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js` — separate, complete, runnable with no build step and no libraries. The HTML contains exactly one script reference: `\u003Cscript src=\"script.js\" defer>`. No inline `\u003Cscript>` blocks. `lang=\"en\"`, viewport meta, descriptive `\u003Ctitle>` and meta description.\n* **`script.js` behaviors (vanilla, `addEventListener` only):** (1) theme variant toggle with `localStorage` persistence and `aria-pressed` sync; (2) mobile menu open\u002Fclose (`aria-expanded`, closes on Esc and link click, layered at `--z-dropdown`); (3) FAQ accordion state sync; (4) email form — validate, show loading ≥1s, then success state + toast announcement via `aria-live` (or inline error); (5) play-button icon\u002F`aria-label` toggling; (6) smooth anchor scrolling + header shadow class on scroll; (7) skeleton removal on image load\u002Ffailure; (8) auto-updating footer year. Nothing else.\n* **Naming:** BEM everywhere, per §1.5 — never mix conventions.\n* **Content:** No lorem ipsum anywhere — write real, specific English marketing copy for the fictional brand. Placeholder imagery is permitted only via `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cunique-seed>\u002F\u003Cw>\u002F\u003Ch>.jpg` for album art and testimonial avatars, each with meaningful `alt` text.\n\n---\n\n## 5. SECTION-BY-SECTION BUILD SPECIFICATION\n\n* **Global Header (sticky):** fictional wordmark (CSS-styled type, weight 800), inline nav links (Features, How It Works, Pricing, FAQ) in 12px uppercase tracked `--text-secondary` that lift to white on hover\u002Ffocus, theme toggle (§1.3), primary green pill CTA \"Start Free\". Translucent `--bg-primary` with blur; gains a bottom shadow on scroll. Mobile: links collapse into a hamburger (`menu` icon) dropdown panel.\n* **Hero:** uppercase micro-eyebrow; `h1` at the clamp scale (§1.6); 14–16px silver subcopy; two actions — primary green pill \"Try Premium Free\" and secondary bordered pill \"Explore Plans\" (scrolls to Pricing); a collage of 3–4 seeded album-art cards (radius 8px, `--shadow-md`) with an overlapping 56px circular green play button; a stats micro-row (\"100M+ tracks · 600M+ listeners · New releases daily\") in 12px uppercase tracked silver.\n* **Features (3 cards):** `h2` + intro line; responsive grid (1 → 3 columns). Each `.card`: Material icon inside a 48px circle tinted `rgba(30,215,96,0.1)` with the glyph in `--primary`; 16–18px title; 14px silver body. Topics: personalized daily mixes, offline downloads, cross-device sync. Full card-state spec per §2.2.\n* **How It Works (3 steps):** numbered flow (1 → 3 columns → stacked mobile): 48px circular badge with green border or green fill + black numeral, step title, 14px description; optional 1px `--border-default` connector on desktop only.\n* **Testimonials (3 cards):** 48px circular seeded avatar, name (700, white), role (12px silver), 14–16px quote, five `star` Material icons in `--primary`; hover lift per §2.2.\n* **Pricing (3 tiers):** Free ($0), Premium ($9.99\u002Fmo, **featured**), Family ($14.99\u002Fmo). Featured card: `--bg-tertiary`, 2px `--border-success`, `--shadow-md`, a \"Most Popular\" pill badge (green bg, black 10px uppercase tracked text), slight `scale(1.02)` on desktop. Each card: tier name, price (24px\u002F700), feature list with green `check` icons, and a CTA — green primary pill on Premium, secondary outline pills elsewhere. State coverage per §2.1.\n* **FAQ:** intro + 6 accordion items covering: free tier contents, cancellation, device limits, student discount, offline mode, family sharing. Built per §2.4.\n* **Final CTA:** full-width elevated panel (`--bg-tertiary`, radius `--radius-lg`, `--shadow-md`, generous padding): `h2`, one silver line, and the email capture built per §2.3 — pill input + green pill submit \"Get Started\", with loading → success (\"You're on the list\" + `check`) or error flow announced via `aria-live`.\n* **Footer:** brand column (wordmark, one-line tagline, social icon buttons — 40px circles, 1px `--border-default`, hover to green); three secondary-link columns (Company: About \u002F Careers \u002F Press; Support: Help Center \u002F Contact \u002F Device Setup; Legal: Privacy \u002F Terms \u002F Cookies) in 12–14px silver lifting to white on hover\u002Ffocus; bottom bar with dynamic © year and brand name.\n\n---\n\n## 6. PRE-SUBMISSION QA CHECKLIST\n\n* Zero `style=\"...\"` attributes, inline `\u003Cscript>` blocks, inline SVGs, local icon files, or lorem ipsum.\n* Page loads dark by default; toggle switches dark variants; choice survives reload; `aria-pressed`\u002F`aria-label` always accurate.\n* Complete keyboard-only pass: skip link, nav, mobile menu, theme toggle, all buttons, accordion, form.\n* Focus rings visible on near-black; every interactive element ≥44×44px; no color-only state communication.\n* No horizontal scroll from 320px to 1920px; `prefers-reduced-motion` disables all movement.\n* Every button implements default\u002Fhover\u002Ffocus\u002Factive\u002Floading\u002Fdisabled\u002F(success|error where applicable); every card implements default\u002Fhover\u002Ffocus-within; every input implements all seven §2.3 states.\n* Single `h1`, intact heading hierarchy, all landmarks present, `aria-live` announcements firing.\n* Output the three complete files in one response — first attempt, production-ready.\n",1791954990461]