[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-658-Capsule":3},"# SYSTEM PROMPT — BUILD THE \"CAPSULE\" LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-ready Landing Page in a single attempt** — full final code, no questions, no partial output. The page must fully embody the **\"Capsule\"** design system: Modular, Y2K, Pastel-Pop, Pill-Shaped, 2020s Modern.\n\n**Required sections, in this order:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer (with secondary links).\n\n---\n\n## 0. THEME SPECIFICATION — \"CAPSULE\"\n\n**0.1 Theme Identity**\n- **Keywords:** Pill-shaped cards, Y2K, pastel-pop, modular, Bodoni Moda, playful, modern, warm bone.\n- **Mood:** Optimistic, playful, sticker-like Y2K chrome rendered with flat, solid pastel capsule shapes — no gradients required; keep fills flat and shapes chunky.\n- **Signature DNA:** Everything reads as a capsule — `border-radius: 999px` pills for buttons, badges, nav, inputs, and stadium-silhouette cards.\n\n**0.2 Color Palette (exact values — bind to tokens in 1.2)**\n- Background (warm bone): `#F5F5F0` · Foreground: `#1A1A1A` · Coral: `#E85D4E`\n- Pastel-pop secondaries: Lime `#C4D94E`, Lavender `#C5B5E0`, Sky `#8BB4F7`, Violet `#A06CE8`\n- Use the full pastel-pop palette as rotating solid blocks across sections and cards.\n\n**0.3 Typography**\n- Display: `'Bodoni Moda', serif` — hero headlines, section titles, prices.\n- Body\u002FUI: `'Space Grotesk', sans-serif`.\n\n**0.4 Visual Effects**\n- Smooth hover transitions of **200–250ms** on all interactive elements.\n- Subtle lift shadows (translateY + soft shadow growth on hover).\n- Pill-shaped card badges (`border-radius: 999px; padding: 0.5rem 1.5rem`).\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in a dedicated `style.css` file. The `style=\"...\"` attribute is **forbidden anywhere in the HTML**.\n- All design properties, layout rules, and states must be targeted via class or ID selectors only.\n- HTML must remain clean, semantic (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`), and agnostic of visual styling — reskinning the site must only require editing the CSS file, never the markup.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nStore all tokens in `:root` (mirrored under the dark-mode scope):\n- **Colors:** `--primary: #E85D4E` (coral), `--secondary: #C4D94E` (lime), `--accent-lavender: #C5B5E0`, `--accent-sky: #8BB4F7`, `--accent-violet: #A06CE8`, `--bg-primary: #F5F5F0`, `--bg-secondary: #fefefe` (near-white card surface; **never `#ffffff`**), `--text-primary: #1A1A1A`, `--text-secondary` (warm gray, AA-safe), `--text-success`, `--text-error`, `--border-default` (warm, e.g., `#E5E0D3`), `--border-error`, `--border-success`.\n- **Contrast Pairing (enforced):** every light background token (bone, `#fefefe`, lime, lavender, sky) must pair with dark text (`#1A1A1A`); the dark-mode background pairs with light text (`#F5F5F0`). On coral `#E85D4E` fills, use `#1A1A1A` text for AA compliance — `#fefefe` text on coral is permitted only for large display type.\n- **Radius & Shadows:** `--radius-pill: 999px` (signature), `--radius-sm: 12px`, `--radius-md: 24px`, `--radius-lg: 40px` (fallback for tall cards only), `--shadow-sm`, `--shadow-md` (subtle lift shadows).\n- **Spacing & Motion:** `--spacing-gap`, `--transition-fast: 200ms`, `--transition-normal: 250ms`, `--ease-standard`, optional `--ease-playful: cubic-bezier(0.34, 1.56, 0.64, 1)` for pop micro-interactions.\n- **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class: deep warm charcoal background (`#1A1A18`), bone text (`#F5F5F0`), brightened pastels (e.g., coral `#F07A6C`, lime `#D4E876`, lavender `#D5C8EC`, sky `#A3C6FA`, violet `#B98CF0`) — with dark text on pastel fills to preserve the pairing rule and AA contrast.\n- Theme switching swaps CSS variables only — zero HTML restructuring.\n- Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit; include a visible pill-shaped toggle with correct `aria-pressed` and `aria-label` states.\n- **Exception clause:** the source style spec marks Dark Mode as \"None\"; this rule overrides it — a dark \"Capsule\" variant is mandatory and must preserve the Y2K pastel-pop identity in both schemes.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container must default to `align-items: center` unless an explicitly commented exception exists.\n- Mobile-first: rows convert to columns on small viewports, fluid sizing via `clamp()`; **no horizontal scrolling at any width from 320px up**.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS (or clean custom CSS via Tailwind's `@layer`\u002F`@apply`). All utilities must map back to the CSS variables and generic reusable classes: `.btn`, `.card`, `.input-group`, `.badge-pill`, `.section`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Bodoni Moda** (display) and **Space Grotesk** (body) via Google Fonts `\u003Clink>` tags with `preconnect`; bind to `--font-display` and `--font-base`.\n- Icons: Google Material Symbols (Rounded style) only. **Inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — pill-shaped (`--radius-pill`), padding `0.5rem 1.5rem`, minimum 44×44px touch target.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`, 200–250ms transition.\n- **Focus:** distinct keyboard focus ring via `outline`\u002F`box-shadow` using CSS variables (e.g., `--accent-sky`), never removed.\n- **Active:** `transform: scale(0.97)` press feedback.\n- **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material icon without distorting button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback states driven by `--text-success` \u002F `--text-error`. `.btn-danger` must be visually distinct from coral in **both** themes.\n\n**2.2 Card Component (Features, Pricing, Testimonials)**\n- **Default:** flexible Flexbox layout, capsule silhouette — `border-radius: var(--radius-pill)` where content allows (use `--radius-lg` only if 999px would clip tall content); solid pastel-pop fills (feature trio: lime, lavender, sky), subtle borders, `--shadow-sm`, generous padding.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md`.\n- **Focus-within:** border shifts to `--primary` when a child link\u002Fbutton is focused.\n- **Loading (Skeleton):** CSS shimmer animation with stable dimensions, if any content loads asynchronously.\n- **Empty State:** Material icon + clear guidance text structure.\n\n**2.3 Form & Input Component (Final CTA email capture)**\n- **Structure:** flex `.input-group` wrapping a label, a pill-shaped input, and a dedicated error feedback container.\n- **States:** Empty, Focused (outline ring via variables), Filled, Valid (success border + check icon), Invalid (error border, `--text-error` message + error icon, announced via `aria-live`), Disabled, Read-only.\n\n**2.4 Modal \u002F Popup Component (applies to the mobile navigation drawer and any popup used)**\n- **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n- **UX:** centered flex container (`align-items: center`), backdrop overlay, Material icon close button, keyboard focus trapping, close via `Esc` or overlay click, `role=\"dialog\"` + `aria-modal`.\n\n**2.5 Landing-Page-Specific Components**\n- **Pill Nav (sticky):** floating capsule navbar — brand, links, theme toggle, CTA button; collapses into an icon-triggered drawer on mobile following 2.4 rules.\n- **Pill Badges:** eyebrow\u002Fcategory chips on every section — `border-radius: 999px; padding: 0.5rem 1.5rem`, each in a rotating pastel from the palette.\n- **Hero:** Bodoni Moda display headline, badge pill, dual CTAs, decorative flat capsule shapes built in pure CSS (solid pastel pills, no external images).\n- **How It Works:** three numbered pill steps (1–2–3) in coral, lime, and violet.\n- **Testimonials:** capsule quote cards; avatars as pastel circles with initials (no external images).\n- **Pricing:** 3 capsule tiers; middle tier highlighted with a pastel fill and a \"Most Popular\" pill badge; prices in Bodoni Moda; feature lists with Material check icons.\n- **FAQ:** accordion with pill trigger rows — `aria-expanded` buttons, animated expand\u002Fcollapse (`grid-template-rows` or `max-height` transition), rotating chevron Material icon, full keyboard operability.\n- **Footer:** brand block, grouped secondary links, Material-symbol social buttons, copyright line.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid type\u002Fspacing via `clamp()`; no horizontal overflow at any breakpoint.\n- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes (200–250ms); respect `prefers-reduced-motion` (disable transforms, spinners, shimmer).\n- **Accessibility (a11y):** WCAG AA contrast in Light and Dark modes; **never rely on color alone** to communicate state (pair icons + text with every color signal); semantic HTML5; correct ARIA roles\u002Flabels on the theme toggle, accordion, drawer, and custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).\n- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive Actions:** any `.btn-danger`\u002Fdelete action must be visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** separate `index.html`, `style.css`, and `script.js` files. No inline `\u003Cscript>` blocks — only a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` entry-point reference.\n- **Naming Convention:** one convention only — BEM across the entire deliverable (`.hero`, `.hero__title`, `.card--lime`, `.faq__trigger--open`); Tailwind utilities permitted for structural layout only; never mix conventions.\n- **Copy Rules:** author original, realistic English marketing copy for one coherent fictional product concept fitting the \"Capsule\" identity (e.g., a capsule-wardrobe or capsule-content planning app). **No lorem ipsum**; no unrequested placeholder content.\n- **Acceptance Checklist (self-verify before final output):** zero inline styles · dark mode toggle works and persists · 44px minimum touch targets · all component states from Section 2 implemented · no horizontal scroll below 320px+ · fonts\u002Ficons from Google only (Bodoni Moda, Space Grotesk, Material Symbols) · consistent BEM naming · all 8 sections present in order · transitions within 200–250ms.\n",1791954990531]