[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-778-SOUNDS-OF-EARTH-the-golden-record":3},"# CODING PROMPT — Landing Page: \"SOUNDS OF EARTH — The Golden Record\"\n\n**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single attempt. Theme: **\"SOUNDS OF EARTH — The Golden Record\"**, a tribute to the Voyager Golden Record. Style: **Neumorphism, 2020s Digital era**, with golden gradients, keyframe animation, transforms, and rich hover\u002Fmotion design. Output the final code immediately — no questions, no partial deliverables.\n\n**Required sections (in page order):** Sticky Header (hosts nav + mandatory theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), Final CTA (email capture), Footer with secondary links.\n\n---\n\n## 1. THEME & CREATIVE DIRECTION\n\n**1.1 Concept & Mood**\n* Evoke the physical Golden Record artifact: gold-plated copper disc, concentric grooves, warm cosmic ambience — part museum piece, part invitation to the stars.\n* Write all user-facing copy in polished **English**, original and on-theme (115 images, greetings in 55 languages, ~90 minutes of music, the sounds of Earth, launched 1977, now in interstellar space). **No lorem ipsum anywhere.**\n\n**1.2 Color System (exact palette)**\n* **Light mode tokens:** `--bg-primary: #e0d4bc` (page + neumorphic base surface), `--bg-secondary` slightly lighter warm cream for raised surfaces, `--text-primary: #16120c`, `--text-secondary: #8a7a5e` (darken, e.g. `#6f6049`, wherever it fails 4.5:1 contrast), `--primary: #d4b46a`, `--secondary: #1a1408`. Do not default to pure white; any near-white surface must use `#fefefe`, never `#ffffff`.\n* **Dark mode tokens:** `--bg-primary: #0a0806`, `--bg-secondary: #16120c`, `--text-primary: #e0d4bc`, `--text-secondary` lightened warm tone (e.g. `#a89778`) passing 4.5:1, gold accents retained.\n* **Gold usage rule:** `#d4b46a` is an accent for icons, borders, gradient fills, and text on dark backgrounds only — never gold body text on the cream background.\n\n**1.3 Neumorphism Treatment**\n* Define dual-shadow elevation tokens per theme: `--neu-raised` (extruded) and `--neu-pressed` (inset). Light mode: warm dark shadow bottom-right + light highlight top-left. Dark mode: deep shadow + subtle gold-tinted highlight.\n* Every neumorphic interactive element must **also** carry a visible `1px` border (`--border-default`) and a distinct focus ring — never rely on shadows alone to communicate boundaries or state.\n\n**1.4 Signature Hero Element — The Spinning Record (pure CSS)**\n* A circular disc: `border-radius: 50%`, `aspect-ratio: 1\u002F1`, fluid size via `clamp()`.\n* Grooves via `repeating-radial-gradient`; gold surface via layered `radial-gradient`\u002F`conic-gradient` (`#d4b46a → #8a7a5e → #1a1408`); center label circle containing real text \"SOUNDS OF EARTH\".\n* Continuous slow spin via `@keyframes` `rotate` (e.g., 24s linear infinite) plus ambient pulsing orbit rings (scale + opacity keyframes). All motion replaced with static styling under `prefers-reduced-motion`.\n* **No images and no inline SVG for this element** — gradients, borders, and text only.\n\n**1.5 Motion & Effects**\n* Required keyframes: record spin, orbit pulse, hero gradient drift\u002Fshimmer, skeleton shimmer, button spinner, icon hover micro-rotation.\n* Transitions on color\u002Fshadow\u002Ftransform use `var(--transition-normal)`; hover lift `translateY(-2px)`; press `scale(0.97)`.\n* Gold gradients (`linear-gradient(135deg, #d4b46a, #8a7a5e)`) on primary buttons, the featured pricing tier, and badges.\n\n**1.6 Typography & Icons (Google only)**\n* Google Fonts: **Space Grotesk** (600\u002F700) for headings, **Inter** (400\u002F500\u002F600) for body. Bind via `--font-heading` \u002F `--font-base`, loaded with `\u003Clink>` + preconnect.\n* Icons: **Google Material Symbols (Outlined)** via the icon font. **Explicitly forbidden: raw inline SVGs and local icon files.**\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. **The `style=\"...\"` attribute is forbidden in HTML.**\n* All design properties, layout, and states are targeted exclusively via class\u002FID selectors.\n* HTML remains clean, semantic, and style-agnostic — reskinning must only require editing the CSS file.\n\n**2.2 CSS Variables & Theme Tokens**\n* Store every token in `:root` (theme overrides in `[data-theme=\"dark\"]` and\u002For `.dark`): the full color set from §1.2 plus `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* Geometry & motion: `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* Stacking: `--z-dropdown` (sticky header \u002F mobile nav), `--z-modal`, `--z-toast` — no ad-hoc z-index values.\n* **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens, dark background tokens pair with light text tokens.\n\n**2.3 Mandatory Dark Mode Support**\n* Dark mode must be fully implemented with seamless token switching (no HTML restructuring).\n* **Exception clause (per style spec):** Light mode is the **default** presentation on first visit; dark mode remains a first-class, fully built, toggleable experience — do not drop it.\n* Persistence via `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle in the header using Material Symbols (light\u002Fdark icons) with correct `aria-pressed` and `aria-label`.\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox. Every flex container **defaults to `align-items: center`** unless a documented exception exists (e.g., FAQ answer text alignment).\n* Mobile-first: multi-column rows collapse to `flex-direction: column` at breakpoints; `flex-wrap` where content can grow; **no horizontal scrolling at any viewport width**.\n\n**2.5 Framework & Naming**\n* Use clean, hand-written semantic CSS (BEM, e.g., `.hero__record`, `.card--featured`, `.btn--secondary`) in `style.css` — bespoke neumorphic shadows, gradients, and keyframes demand real CSS. Never mix BEM with utility-class conventions.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons — style every state via CSS classes**\n* **Default:** flex layout (`align-items: center; justify-content: center; gap: 0.5rem`), minimum touch target 44×44px.\n* **Hover:** brightness\u002Fshadow shift, `cursor: pointer`. **Focus:** distinct ring via CSS variables. **Active:** `scale(0.97)`.\n* **Loading:** disables interaction, prevents double-clicks, shows a CSS-animated spinner (border-based ring or spinning Material Symbol `progress_activity`) **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary states for form submission using `--text-success` \u002F `--text-error` (icon + text, never color alone).\n\n**3.2 Cards (Features, Testimonials, Pricing tiers)**\n* **Default:** flexible flex layout, `--bg-secondary`, subtle border, neumorphic elevation.\n* **Hover:** shadow shift + `translateY(-2px)`. **Focus-within:** border highlights when a child link\u002Fbutton gains focus.\n* **Loading:** skeleton shimmer classes defined in CSS (no layout jumps). **Empty state:** structured fallback with a Google Icon and guidance text.\n\n**3.3 Forms & Inputs (Final CTA email capture)**\n* Structure: flex container wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error-feedback container.\n* States: empty, focused (outline ring), filled, valid (success border + icon), invalid (error border + icon + red text message), disabled, read-only. Neumorphic inset styling is allowed but the visible border + focus ring are mandatory.\n* Errors are announced via an `aria-live=\"polite\"` region; never communicated by color alone.\n\n**3.4 Accordion (FAQ) & Modal\u002FPopup**\n* FAQ must be an **accordion**, not a modal: `\u003Cbutton aria-expanded aria-controls>` headers, chevron Material Symbol rotating on open, animated height via CSS transition, full keyboard operability.\n* No modals are required. If any overlay\u002Fpopup is introduced, it must follow: open\u002Fclose animations via CSS, centered flex overlay with backdrop, Material Symbol close button, focus trapping, `Esc` and backdrop-click dismissal, and `--z-modal` stacking.\n\n---\n\n## 4. PAGE STRUCTURE & SECTION REQUIREMENTS\n\n**4.1 Sticky Header:** Wordmark (\"SOUNDS OF EARTH\"), anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, \"Get Access\" CTA. On mobile, the nav collapses behind a Material Symbols hamburger button (`aria-expanded`, `Esc` closes).\n\n**4.2 Hero:** Eyebrow (\"A message from Earth, launched 1977\"), single `\u003Ch1>`, subcopy, primary + secondary CTAs, the spinning golden record (§1.4), and a neumorphic stats row (115 images · 55 languages · 90 min of music · interstellar space).\n\n**4.3 Features — 3 cards:** \"90 Minutes of Music\", \"Greetings in 55 Languages\", \"115 Images of Earth\" (or equivalent on-theme set), each with a Material Symbol icon, short copy, and full card-state behavior (§3.2).\n\n**4.4 How It Works — 3 steps:** numbered neumorphic tiles (\"01 Capture — curate the sounds of Earth\", \"02 Etch — press them into gold-plated copper\", \"03 Voyage — carry them beyond the heliosphere\"), connected by a gold gradient line; row → column on mobile.\n\n**4.5 Testimonials — 3 cards:** fictional homage quotes (e.g., a radio astronomer, a sound engineer, a science educator) with avatars built as gold-gradient circles containing the person's initials (no images\u002FSVGs), name, role.\n\n**4.6 Pricing — 3 tiers:** e.g., \"Echo\" (free listener), \"Voyager\" (featured — gold gradient border, elevated shadow, \"MOST POPULAR\" badge), \"Golden Record\" (premium). Feature lists use Material Symbols check icons. Include a Monthly\u002FYearly toggle that updates prices with an `aria-live` announcement and visible pressed state.\n\n**4.7 FAQ:** 4–5 themed questions (What is the Golden Record? Why gold? How long will it last? Can I listen? How far has it traveled?) using the accordion spec (§3.4).\n\n**4.8 Final CTA:** full-width neumorphic panel with gradient accents, `\u003Ch2>`, supporting copy, and the email capture form implementing all states in §3.3, ending in a visible success confirmation.\n\n**4.9 Footer:** brand + tagline, secondary link groups (Explore: Features, Pricing, FAQ · About: Story, Contact · Legal: Privacy, Terms), social icons via Material Symbols, copyright line, back-to-top link.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` typography, breakpoint-driven column collapses, zero horizontal overflow.\n* **Smooth animations:** CSS transitions on all state changes; every keyframe animation respects `prefers-reduced-motion` with a static fallback.\n* **Accessibility:** semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), one `\u003Ch1>` with logical heading order, skip-to-content link, visible `:focus` rings, full keyboard operability for nav, accordion, toggle, and form, ARIA roles\u002Flabels on all custom widgets, `aria-live` regions for dynamic feedback (form results, pricing toggle), WCAG-AA contrast in **both** light and dark modes.\n* **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.\n* **Destructive\u002Fdistinct actions:** any danger-style action uses a `.btn--danger` class that is distinct in both themes.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. The only inline `\u003Cscript>` allowed is the single deferred entry-point reference to `script.js`.\n* **script.js scope:** theme toggle + persistence, mobile nav toggle, FAQ accordion, pricing billing toggle, email form validation with loading\u002Fsuccess\u002Ferror states, optional scroll-reveal via IntersectionObserver (disabled under reduced-motion).\n* **Naming:** one convention (BEM) across the entire deliverable — never mix conventions.\n* **Copy:** all user-facing text in English, thematically written per §1.1; no lorem ipsum, no placeholder components beyond those specified.\n* **Definition of done:** zero inline styles, zero inline SVGs, zero local icon files, dark mode toggleable and persisted, all component states present, both themes pass contrast checks, no horizontal scroll from 320px upward.\n",1791954992660]