[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-203-Chromecore":3},"# CODING AGENT PROMPT — \"CHROMECORE\" LANDING PAGE (RETRO & POP)\n\n**Role & Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single pass — no clarifying questions, no partial drafts. Make expert decisions and deliver final, working code.\n\n**Theme Definition — Chromecore (claude-artisan\u002Fretrofuturism, 2020s evoking Y2K):** Liquid\u002Freflective chrome surfaces and type; silver, mercury, iridescent reflections; blobby metallic 3D forms; futuristic, sleek, cold. Signature move: liquid, blobby border-radii combined with an iridescent mercury-sheen overlay (diagonal white-highlight gradient) that reads as poured metal — repeated on the nav, primary button, badge, and cards.\n\n**Design Tokens (adopt verbatim in `:root`):**\n\n```css\n--color-bg: #e8eaf0; --color-surface: #f4f5f9; --color-surface-strong: #fefefe; \u002F* overrides source #ffffff — pure white forbidden *\u002F\n--color-border: #c3c8d6; --color-text: #1c1b2e; --color-text-muted: #4a4866;\n--color-primary: #a78bfa; --color-accent: #f472b6; --color-mint: #5eead4;\n--radius-sm: 16px; --radius-md: 28px; --radius-lg: 44px; --radius-pill: 999px;\n--shadow-sm: 0 2px 8px rgba(28,27,46,0.1); --shadow-md: 0 10px 26px rgba(167,139,250,0.22); --shadow-lg: 0 20px 48px rgba(244,114,182,0.24);\n--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);\n--iridescent: linear-gradient(120deg, #a78bfa 0%, #f472b6 33%, #5eead4 66%, #a78bfa 100%);\n--mercury-sheen: linear-gradient(160deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 35%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.1) 100%);\n```\nAlso adopt the full `--text-*` scale (0.75rem → 4rem) and `--space-*` scale (4px → 96px) from the reference specification.\n\n**Required Sections (in order):** Header\u002FNav · Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links.\n\n**Copy Rule:** All user-facing copy in English. Invent one coherent fictional product (suggested: a real-time 3D chrome-material design tool) and write real, themed marketing copy for every section. Lorem ipsum is forbidden.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- Target every design property, layout rule, and state via class\u002FID selectors only.\n- HTML must remain semantic and styling-agnostic: retheming the site requires editing `style.css` only, never the markup.\n- The Chromecore base classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) are the component foundation; extend them with BEM modifiers — never with inline styles or presentational attributes.\n\n**1.2 CSS Variables & Theme Tokens**\n- Store all tokens in `:root` as defined above, plus these mandatory semantic aliases (mapped, not duplicated): `--primary: var(--color-primary)`, `--secondary: var(--color-accent)`, `--bg-primary: var(--color-bg)`, `--bg-secondary: var(--color-surface)`, `--text-primary: var(--color-text)`, `--text-secondary: var(--color-text-muted)`, `--border-default: var(--color-border)`, `--spacing-gap: var(--space-4)`.\n- Add the missing mandatory tokens: `--text-success`, `--text-error`, `--border-success`, `--border-error` (success = mint-derived green; error = red distinct from `--color-accent`; both must pass AA contrast on their surfaces in both themes), `--transition-fast: 150ms`, `--transition-normal: 250ms` (both using `var(--ease-standard)`), `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`, and `--font-base` \u002F `--font-display` bound to the Google Fonts loaded per 1.6.\n- Preserve `--iridescent` and `--mercury-sheen` exactly as specified; they drive badges, primary buttons, chrome type, and card\u002Fnav surfaces.\n- Contrast pairing is mandatory per theme: every light background token pairs with a dark text token, and every dark background token pairs with a light text token.\n\n**1.3 Mandatory Dark Mode Support**\n- The source specification does not declare light\u002Fdark modes; you must define both and validate the page in each before considering it complete.\n- Implement dark tokens twice: under `@media (prefers-color-scheme: dark)` and under a `.dark` class on `\u003Chtml>` (the class wins when both apply). Suggested starting values (final values must pass AA): `--color-bg: #141321`, `--color-surface: #1c1b2e`, `--color-surface-strong: #26243f`, `--color-border: #3d3a5c`, `--color-text: #f4f5f9`, `--color-text-muted: #b8b6d4`; keep `#a78bfa` \u002F `#f472b6` \u002F `#5eead4`, lightening them if contrast requires.\n- Override `--mercury-sheen` in dark scope with a subtler cool-silver highlight gradient so surfaces read as dark liquid chrome, not washed-out white.\n- Theme toggle: a visible nav button using a Material Symbol (`dark_mode`\u002F`light_mode`) with correct `aria-pressed` and `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"). Persist the choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Switching themes must require zero HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox (Tailwind flex utilities or custom flex CSS).\n- Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., stretched equal-height pricing cards).\n- Mobile-first: single-column stacks promoting to multi-column at ≥768px and ≥1024px; no horizontal scrolling at any viewport; fluid type via `clamp()` mapped to the `--text-*` scale.\n\n**1.5 Framework Default: Tailwind CSS**\n- Use Tailwind CSS (Play CDN acceptable) as the utility layer. Define all component classes inside `@layer components` using `@apply`, driven by the Chromecore CSS variables; every utility must map back to a token or a generic reusable class (`.btn`, `.card`, `.input-group`).\n- Exception clause: the Tailwind CDN `\u003Cscript>` and the Google Fonts \u002F Material Symbols `\u003Clink>` tags are permitted in `\u003Chead>`; `script.js` remains the only custom script, referenced exactly once with `defer`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Google Fonts via `\u003Clink>` with preconnect: **Space Grotesk** (display) and **Inter** (base). Bind `--font-display` and `--font-base` accordingly. Exception clause: the source spec's system stacks (`'Segoe UI'`, `'Helvetica Neue'`, `system-ui`) are retained only as fallbacks after the Google Font families.\n- Icons: Google Material Symbols only (Rounded variant suits the blobby aesthetic), loaded once via the standard `\u003Clink>`. Inline SVGs, other icon fonts, and local icon files are forbidden.\n- Metal type: the hero H1 (and pricing figures, optionally) must render as liquid chrome via CSS-only gradient text — a silver\u002Fmercury\u002Firidescent gradient with `background-clip: text; color: transparent` — wrapped in `@supports` with a solid `var(--color-text)` fallback. An animated sheen sweep is allowed and must respect `prefers-reduced-motion`.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem`; minimum touch target 44×44px; `border-radius: var(--radius-pill)`; mercury-sheen surface per the base `.btn`.\n- Hover: `translateY(-2px) scale(1.02)` + `var(--shadow-md)`, `cursor: pointer`.\n- Focus: distinct `:focus-visible` ring built from `--color-primary` (outline\u002Fbox-shadow) for keyboard navigation.\n- Active\u002Fpressed: `scale(0.99)` transform feedback.\n- Loading: `aria-busy=\"true\"`, pointer events disabled to prevent double-clicks, CSS-only iridescent conic-gradient spinner that does not change button dimensions; label remains accessible.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`, no transforms.\n- Success\u002FError: temporary feedback states driven by `--text-success` \u002F `--text-error`, always pairing color with a Material Symbol + text (never color alone).\n- `.btn--primary` uses `var(--iridescent)` with white text — verify AA contrast. Any destructive variant (`.btn-danger`) must be visually distinct in both themes.\n\n**2.2 Card**\n- Default: `.card` per spec (surface + mercury sheen, `--radius-lg`, `--shadow-md`), flexible flexbox layout; inner text blocks may left-align as a justified exception, but card-level containers still default to `align-items: center`.\n- Hover: elevation shift to `var(--shadow-lg)` and\u002For `translateY(-2px)`.\n- Focus-within: border\u002Foutline highlight in `--color-primary` when any child link\u002Fbutton receives focus.\n- Loading: skeleton state with a mercury-shimmer animation (background-position keyframes over a silver gradient) that preserves final layout dimensions — no layout jumps.\n- Empty state: structured fallback with a Material Symbol and clear guidance copy.\n\n**2.3 Form & Input**\n- Account for all states: empty, focused (primary ring per base `.input`), filled, valid (mint border + check Material Symbol), invalid (error border + red text + error Material Symbol + message), disabled, read-only.\n- Structure: a flex-column `.input-group` wrapping a `\u003Clabel>` (with `for`), the `.input`, and a dedicated error\u002Fsuccess feedback container with `aria-live=\"polite\"`.\n- Never rely on color alone; every state pairs color with icon and\u002For text.\n\n**2.4 Modal \u002F Popup (if any dialog is used)**\n- States: opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n- Centered flex container (`align-items: center`) over a backdrop overlay; Material Symbol close button; keyboard focus trapping; close via `Esc` and overlay click; `role=\"dialog\"`, `aria-modal=\"true\"`, labelled by its heading.\n\n**2.5 FAQ Accordion**\n- Each question is a `\u003Cbutton>` with `aria-expanded` and `aria-controls`; each panel is a region labelled by its button.\n- Open\u002Fclose animated via CSS (height\u002Fopacity\u002Ftransform) with the chevron Material Symbol rotating; fully keyboard operable; visible focus state; state never communicated by color alone.\n- Choose one-open-at-a-time or multi-open and apply it consistently.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow, breakpoints at 640\u002F768\u002F1024px.\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; liquid overshoot easing; blob-morph (animated border-radius) and iridescent-shift keyframes for hero decor. Every animation is disabled under `prefers-reduced-motion: reduce`.\n- **Accessibility:** skip-to-content link; semantic landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); strict heading hierarchy h1 → h2 → h3; AA contrast in both light and dark; ARIA roles\u002Flabels on all custom widgets (theme toggle, accordion, mobile menu); logical DOM\u002Ffocus order; full keyboard operability — no mouse-only interactions; `aria-live` regions for dynamic feedback (form errors, confirmations, loading).\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Decorative elements:** all blobs\u002Fsheens are `aria-hidden=\"true\"` and never carry content.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- Three files: `index.html`, `style.css`, `script.js`. No inline styles; no inline scripts beyond the single deferred `script.js` reference (plus the permitted Tailwind CDN script per 1.5).\n- **Naming:** BEM exclusively, matching the provided `.btn--primary` pattern — never mix conventions.\n- **No unrequested placeholders:** real English copy everywhere per the brief; placeholders only where content was genuinely unspecified.\n- **`script.js` scope (vanilla JS only):** theme toggle + `localStorage` persistence + `prefers-color-scheme` fallback; mobile nav open\u002Fclose with focus management and `Esc`; FAQ accordion logic; Final CTA email validation with `aria-live` success\u002Ferror feedback; smooth anchor scrolling; optional IntersectionObserver reveal animations (reduced-motion aware). No other libraries.\n\n## 5. PAGE SECTION REQUIREMENTS\n\n**5.1 Header\u002FNav** — `.nav` pill (mercury sheen, `--radius-pill`) with a chrome-gradient wordmark logo, anchor links, theme toggle, and a `.btn--primary` CTA. Sticky with a translucent surface; on mobile, collapse links behind a Material Symbol menu button opening an accessible panel (`aria-expanded`, focus trap, `Esc` close, `--z-dropdown` layering).\n\n**5.2 Hero** — H1 in liquid-chrome metal type (largest `clamp()` scale), supporting subhead, `.badge` with a themed tagline, primary + secondary CTAs, and CSS-only blobby metallic 3D forms (morphing border-radius shapes filled with `--iridescent` and blurred mercury highlights, `aria-hidden`). Vertical rhythm via `--space-24`.\n\n**5.3 Features** — exactly 3 `.card` items in a responsive grid (1 → 3 columns). Each: Material Symbol inside an iridescent `.badge`, h3 title, description. Hover elevation + focus-within per 2.2.\n\n**5.4 How It Works** — exactly 3 steps, each with a chrome pill number badge (iridescent), h3, and description; a connecting gradient line on desktop that hides on mobile; stacks vertically on small viewports.\n\n**5.5 Testimonials** — 3 quote `.card` items with a `format_quote` Material Symbol, quote text, a chrome-circle avatar built from a `person` Material Symbol (no external images), name, role, and a star rating (Material Symbols with an `aria-label` such as \"Rated 5 out of 5\").\n\n**5.6 Pricing** — exactly 3 tiers. Middle tier marked \"Popular\": iridescent gradient-border technique + `.badge`, slightly elevated scale\u002Fshadow. Each tier: name, chrome-type price, feature list with `check` Material Symbols, and a CTA (`.btn--primary` on the popular tier, `.btn` elsewhere). Equal-height cards via a justified `align-items` exception.\n\n**5.7 FAQ** — accordion per 2.5 with 5–6 real, themed Q&A pairs.\n\n**5.8 Final CTA** — full-bleed band surfaced with `--iridescent` (or mercury surface + iridescent border), h2, short supporting line, and an email capture: `.input` + `.btn--primary` in a wrapping flex row (stacks on mobile). Validate per 2.3; on success, show an `aria-live` confirmation and swap the button into its success state per 2.1.\n\n**5.9 Footer** — grouped secondary link columns (Product, Company, Resources, Legal), social icons as Material Symbols with descriptive `aria-label`s, copyright line with dynamic year, muted text via `--text-secondary` with AA contrast in both themes.\n\n## 6. PRE-DELIVERY VALIDATION CHECKLIST\n\n- Zero `style=\"...\"` attributes; zero inline scripts beyond the permitted entries.\n- Light and dark both defined, toggleable, persisted, and AA-validated.\n- All buttons ≥44×44px with hover\u002Ffocus\u002Factive\u002Floading\u002Fdisabled states.\n- Keyboard-only pass: skip link → nav → all sections → footer, with visible focus everywhere.\n- `prefers-reduced-motion` honored for every animation.\n- No horizontal scroll from 320px up; no layout shift from skeletons.\n- BEM naming consistent; all copy real English; icons exclusively Google Material Symbols.\n",1791954983136]