[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-800-LA-PUCE-the-smallest-show-on-earth":3},"# SYSTEM PROMPT — CODING AGENT BRIEF: \"LA PUCE — The Smallest Show on Earth\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page specified below in a single first attempt. Every rule in this document is mandatory unless explicitly marked optional. Treat conflict resolution as follows: mandatory rules always win, with the one exception clause noted in Rule 2.3.\n\n---\n\n## 1. PROJECT BRIEF & THEME DIRECTION\n\n**1.1 Concept**\n- Theme: *LA PUCE — the smallest show on earth*, a contemporary flea circus. Type: **Interactive\u002FGame**. Era: **2020s Contemporary**.\n- Mood: vintage big-top showmanship rendered with modern warmth — a cream canvas, near-black ink, saddle-brown and gold accents; physics-driven motion; every element feels tappable and alive.\n- Keywords: flea, circus, physics, interactive, game, animated, gradient.\n\n**1.2 Source Palette & Required Techniques**\n- Primary colors: `#16100b` (ink), `#e8dcc8` (cream), `#8a5a2e` (saddle brown).\n- Secondary colors: `#1d140c` (deep umber), `#ffd98a` (gold glow), `#a0865c` (tan).\n- Required effects: **Glow, Neumorphism, Gradients, Hover Effects**.\n- Required CSS techniques (all must appear in the final stylesheet): **Flexbox, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Border Radius, `aspect-ratio`**.\n\n**1.3 Copy & Content (English Only)**\n- Write **all** user-facing copy in **English**, in a confident ringmaster voice (\"Step right up…\", \"The smallest show on earth\"). **Lorem ipsum is forbidden.**\n- Author real, on-theme copy: Hero H1 \"LA PUCE\", tagline \"the smallest show on earth\", CTAs like \"Get Tickets\" \u002F \"Play the Demo\"; feature titles such as \"Genuine Flea Physics\", \"The Pocket Big Top\", \"Gold-Star Performers\"; steps \"Adopt a Star Flea → Rehearse the Routine → Raise the Curtain\"; pricing tiers \"Flea \u002F Ringmaster \u002F Big Top\"; testimonials from named \"performers and patrons\"; FAQ questions about the show. These are creative directions — refine freely, stay witty and legible.\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`. **Explicitly forbidden:** the `style=\"...\"` attribute anywhere in the HTML.\n- Target all design properties, layout rules, and states **only** via class or ID selectors.\n- HTML stays semantic and clean (`\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cfooter>`, `nav`, headings) — a full re-theme must be achievable by editing `style.css` alone.\n- All animations are defined as `@keyframes` plus classes in CSS — never as inline styles or JS-driven style mutations for visual state.\n\n**2.2 CSS Variables & Theme Tokens**\n- Store every visual token in `:root` (and in theme classes\u002Fqueries). Mandatory variable names: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n- **Light mode (default) mapping:** `--bg-primary: #e8dcc8`; `--bg-secondary: #f3ead9` (derived cream tint; where a near-white is required use `#fefefe`, **never** `#ffffff`); `--text-primary: #16100b`; `--primary: #8a5a2e`; `--secondary: #a0865c`; `--text-secondary:` a darkened shade of the brown\u002Ftan family that passes ≥ 4.5:1 on `--bg-primary` (do **not** use `#a0865c` for body-size text on cream); `--glow: #ffd98a` (accents, gradients, glow shadows).\n- **Dark mode mapping:** `--bg-primary: #16100b`; `--bg-secondary: #1d140c`; `--text-primary: #e8dcc8`; `--text-secondary: #a0865c`; `--primary: #ffd98a` (gold interactive accents paired with dark text); `--glow: #ffd98a`.\n- Add `--text-success`, `--text-error`, `--border-error`, `--border-success` in warm-harmonized values that pass contrast in **both** themes. Derived shades beyond the six source colors are permitted only where required for contrast and theme coherence.\n- **Contrast pairing is mandatory in every theme:** light backgrounds pair with dark text; dark backgrounds pair with light text — including inside buttons, badges, and toasts.\n- Add supporting tokens: `--font-base`, `--font-display`, a springy `--ease-bounce` (cubic-bezier) for hop\u002Fsquash motion, and neumorphic shadow pairs (light-source + dark-source box-shadows) that adapt per theme.\n\n**2.3 Mandatory Dark Mode Support — Source-Spec Exception Clause**\n- **Exception clause:** the source specification selects **Light as the primary theme**; therefore Light is the default presentation, but Dark mode is **still fully required** and must never be omitted.\n- Implement dark tokens under `@media (prefers-color-scheme: dark)` and\u002For a `.dark` class — switching themes must require zero HTML restructuring.\n- Provide a **visible theme toggle** in the header using Google Material Symbols (sun\u002Fmoon), with correct `aria-pressed` and a state-reflecting `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n- Persist the user's choice via `localStorage` (e.g., key `la-puce-theme`), falling back to `prefers-color-scheme` on first visit.\n- Retune glow and neumorphic shadows for dark surfaces (gold-tinted glows, softer highlights) so the dark theme is a first-class design, not an inversion.\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n- Flexbox is the layout backbone (Tailwind flex utilities acceptable).\n- **Every flex container must default to `align-items: center`** (`items-center`) unless an exception is explicitly justified (e.g., card content stacking — note the justification in a CSS comment).\n- Mobile-first: single-column stacks at the base breakpoint, expanding to multi-column at `md`\u002F`lg`. No horizontal scrolling at any width from 320px up.\n\n**2.5 Framework Default & Tailwind CSS Integration**\n- Default to **Tailwind CSS** (CDN build acceptable) or clean custom CSS organized via `@layer`\u002F`@apply`.\n- Every repeated pattern must exist as a **reusable semantic class** (`.btn`, `.card`, `.input-group`, `.section`) bound to CSS variables — no one-off utility soup for themable components.\n\n**2.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Google Fonts via `\u003Clink>`: one display face for headlines (e.g., **Fraunces** or **Bungee** — chunky, contemporary circus-poster energy) and one body face (**Inter**, **Poppins**, or **Nunito Sans**). Bind them to `--font-display` and `--font-base`; no system-font identity.\n- Icons: **Google Material Symbols** (Rounded variant) via the standard `\u003Clink>`, using ligature names (e.g., `star`, `check`, `expand_more`, `close`, `menu`, `local_fire_department`).\n- **Forbidden:** raw inline SVG icons, local icon files, emoji-as-icons. Material Symbols has no brand glyphs — render social links with generic glyphs (`share`, `alternate_email`, `public`) or text labels.\n\n---\n\n## 3. PAGE STRUCTURE & SECTION SPECIFICATIONS\n\nBuild exactly these sections, in order, inside `\u003Cmain>` (plus `\u003Cheader>`\u002F`\u003Cfooter>`):\n\n**3.0 Global Frame**\n- A visually hidden **skip-to-content link** that appears on focus.\n- Sticky `\u003Cheader class=\"site-header\">`: wordmark \"LA PUCE\", nav links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA \"Get Tickets\". Below ~768px, a Material `menu` button toggles a dropdown panel (`aria-expanded`, `aria-controls`, closes on Esc and outside click, stacks at `--z-dropdown`). On scroll, the header gains `--shadow-sm` and a solid background via a JS-toggled class.\n- Smooth anchor scrolling (guarded by `prefers-reduced-motion`), `scroll-margin-top` on every section, each `\u003Csection>` labeled via `aria-labelledby` pointing to its heading.\n\n**3.1 Hero**\n- Full-viewport flex column, centered. H1 \"LA PUCE\" (display face, oversized), tagline, one supporting line, two CTAs: primary \"Get Tickets\" and secondary \"Play the Demo\".\n- Visual centerpiece built **entirely in CSS** (gradients, `border-radius`, pseudo-elements, box-shadows — no image assets): a flea on a spotlight-lit stage over layered radial\u002Flinear gradients (gold `#ffd98a` glow bleeding into cream and brown vignettes). The stage keeps a stable `aspect-ratio` across viewports.\n- **Mandatory keyframe animation — \"flea hop\" with physics feel:** parabolic `translateY` arcs (multi-step keyframes or ease-out rise \u002F ease-in fall), squash-and-stretch on landing (`scaleX`\u002F`scaleY`), slight rotation; loop with varied timing so it feels alive. Pair with a synchronized spotlight glow-pulse keyframe.\n- **Interactive\u002Fgame layer:** hovering\u002Fclicking the stage makes the flea jump higher and triggers a gold glow burst; optionally a cursor-following spotlight via JS writing CSS variables — **only** under `(prefers-reduced-motion: no-preference)` and `(pointer: fine)`.\n- Gradient text on the H1 is allowed only if both gradient stops maintain ≥ 4.5:1 contrast against the hero background; otherwise use solid `--text-primary`.\n\n**3.2 Features — 3 Cards**\n- Section heading + three `.card` items (1 column mobile → 3 columns at `md`): Material Symbol icon inside a neumorphic circle chip, title, 2–3 line description.\n- Cards are **neumorphic** on the cream surface (dual box-shadows) with a gold glow ring on the icon chip upon hover; hover lifts `translateY(-2px)` with an elevation shift; `:focus-within` highlights the card border.\n- Copy per Rule 1.3.\n\n**3.3 How It Works — 3 Steps**\n- Three numbered steps (oversized display numerals 1\u002F2\u002F3, Material icon, short copy), connected by a dotted tightrope line (CSS border\u002Fgradient) that runs horizontally on wide viewports and vertically on mobile.\n- Steps: \"Adopt a Star Flea → Rehearse the Routine → Raise the Curtain\".\n- Scroll-reveal entrance via IntersectionObserver toggling a transition class (opacity + `translateY`); content must be visible without JS; the effect is skipped entirely under `prefers-reduced-motion`.\n\n**3.4 Testimonials — 3 Quotes**\n- Three `.card` quotes: gold quote icon, italic quote text, a 5-star rating rendered with Material `star` glyphs (wrap in `role=\"img\" aria-label=\"Rated 5 out of 5 stars\"`), a circular avatar (`aspect-ratio: 1`, gradient background, initials only — no photos), name, and descriptor.\n- Static trio; an auto-rotating carousel is optional only if it is keyboard-operable and pausable.\n\n**3.5 Pricing — 3 Tiers**\n- Tiers: \"Flea\" (free), \"Ringmaster\" (featured), \"Big Top\" (VIP). The featured tier gets a \"Most Popular\" badge with a gold glow, extra elevation, and a subtle scale — and it must remain fully visible without overflow at 320px (including on mobile, where it renders first or un-scaled).\n- Each tier: name, large display-face price, feature list with Material `check` glyphs, and a CTA button (featured tier uses the primary variant; others secondary). All card hover\u002Ffocus states per Rule 4.2.\n\n**3.6 FAQ — Accordion**\n- 5–6 themed questions using **native `\u003Cdetails>\u002F\u003Csummary>`**, fully styled: summary is a flex row (question + Material `expand_more` chevron), custom token-driven focus ring, chevron rotation via transition, clear open\u002Fclosed typography. A JS accordion-group behavior (opening one closes the others) is allowed but must preserve native semantics and keyboard operation; content must never depend on JS to be readable.\n\n**3.7 Final CTA**\n- Full-width band with the page's strongest gradient (cream → gold → brown, retuned for dark mode) and a large glow behind a display-face headline.\n- **Email capture form** using `.input-group` (label, email input, dedicated error container) + primary button \"Save My Seat\".\n- On submit: the button enters its **Loading** state (spinner, double-submit prevented), then a **Success** state with a confirmation message in an `aria-live` region. Invalid email shows error border + error icon + message text in the error container (`aria-live`) — never color alone.\n\n**3.8 Footer**\n- Flex layout that wraps on mobile: brand block (wordmark + one-liner), secondary link groups (Show \u002F Company \u002F Legal — 2–3 real links each, with hover\u002Ffocus feedback), social links (generic Material glyphs or text labels), copyright line with a JS-injected current year.\n- No dead visual clutter: every link is a real anchor with a meaningful accessible label.\n\n---\n\n## 4. COMPONENT DESIGN SPECIFICATIONS\n\n**4.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, `--radius-md`, transitions via tokens.\n- **Hover:** brightness\u002Fshadow shift + subtle gold glow, `cursor: pointer`.\n- **Focus:** distinct ring via `outline`\u002F`box-shadow` built from CSS variables, visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** interactions disabled, double-clicks prevented, CSS spinner or animated Google icon — button dimensions must not shift.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary `.is-success` \u002F `.is-error` feedback styles driven by `--text-success` \u002F `--text-error`.\n- **Destructive:** `.btn-danger` must be visually distinct in **both** light and dark themes; reserve it for destructive actions only.\n\n**4.2 Cards (`.card`)**\n- **Default:** flexible flex layout, `--bg-secondary` surface, `--border-default`, `--radius-lg`, `--shadow-sm`.\n- **Hover:** elevation shift + `transform: translateY(-2px)`.\n- **Focus-within:** border highlight when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** define a `.skeleton` shimmer utility (gradient sweep keyframe) matching card anatomy in the stylesheet, so future dynamic loading never causes layout jumps.\n- **Empty State:** define a structured fallback (Material icon + guidance text) for any region that could be dynamically empty.\n\n**4.3 Forms & Inputs (`.input-group`)**\n- Flex container wrapping a visible `\u003Clabel>` (tied via `for`\u002F`id`), the input, and a dedicated error-feedback container.\n- **All states styled:** empty, focused (token-driven ring), filled, valid (success border + check icon), invalid (error border + icon + red text + message), disabled, read-only.\n\n**4.4 Modal \u002F Overlay (conditional — do not add unrequested modals)**\n- Only if the design genuinely requires one (e.g., a \"Play the Demo\" trailer modal). If included: states for **opening, open, loading, success\u002Ferror, closing** — all animated via CSS transitions; centered flex container (`align-items: center`); backdrop overlay; Material `close` icon button; keyboard focus trap; closes on `Esc` and overlay click; correct `role=\"dialog\"`, `aria-modal`, labelling. All layered components must respect `--z-modal` \u002F `--z-toast` \u002F `--z-dropdown`.\n\n---\n\n## 5. VISUAL EFFECTS & MOTION DIRECTION\n\n**5.1 Glow** — gold `#ffd98a` box-shadows\u002Ftext-shadows on hover states, spotlight, and badges; in dark mode, glows widen (larger blur, higher alpha), tuned per theme.\n\n**5.2 Neumorphism** — dual box-shadows (light source top-left, dark bottom-right) on cards, icon chips, and inputs, on cream in light mode and umber in dark; **always** paired with a visible border or focus ring so affordance never depends on shadow alone.\n\n**5.3 Gradients** — hero backdrop, CTA band, avatar circles, badge fills; any gradient text must maintain AA contrast at both stops.\n\n**5.4 Keyframe Animations (mandatory set)** — flea hop arc with squash\u002Fstretch; spotlight glow pulse; gradient shimmer\u002Fsweep (skeletons, CTA band); chevron rotation; reveal transitions. Wrap all decorative loops in `@media (prefers-reduced-motion: no-preference)`.\n\n**5.5 Transforms & Transitions** — every interactive element transitions color\u002Fshadow\u002Ftransform via `--transition-fast`\u002F`--transition-normal`; transforms limited to `scale`, `translate`, `rotate`; never animate layout-triggering properties.\n\n**5.6 Hover Effects** — required on every link, button, card, pricing tier, and footer link; each produces a visible, token-driven change.\n\n**5.7 Aspect Ratio** — apply `aspect-ratio` to the hero stage, icon chips, avatars, and any media boxes so composition holds at every viewport.\n\n---\n\n## 6. CORE UX & ACCESSIBILITY RULES (NON-NEGOTIABLE)\n\n- Responsive by default: fluid sizing, breakpoint-driven layout, zero horizontal overflow at ≥ 320px.\n- Both themes meet WCAG AA contrast for every token pairing (text\u002Fbackground, button fills, icons).\n- Never rely on color alone to communicate state — always pair with icons or text.\n- Semantic HTML5 landmarks, a single `h1`, logical heading hierarchy, logical DOM\u002Ffocus order, visible focus indicators everywhere.\n- Full keyboard operability: nav, mobile menu, FAQ, forms, and any modal; `Esc` closes overlays; no mouse-only interactions.\n- ARIA correctness: `aria-expanded` on disclosure controls, `aria-pressed`\u002F`aria-label` on the theme toggle, `aria-live` for form\u002Ftoast feedback, `aria-labelledby` on sections.\n- Every click, hover, and submission must produce visible feedback.\n- `prefers-reduced-motion` fully honored — reduced-motion users get a static, fully legible page.\n\n---\n\n## 7. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. The HTML references the stylesheet and a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no other inline scripts or styles.\n- **JS scope (vanilla only, no frameworks, no build step):** theme toggle + persistence, mobile menu, scroll header state, accordion grouping (if used), form validation + submit simulation, IntersectionObserver reveals, optional pointer spotlight, dynamic footer year.\n- **Naming:** one convention only — **BEM** (e.g., `.hero__title`, `.card--featured`, `.input-group__error`). Never mix conventions; never define classes for markup that does not exist.\n- **Assets:** zero image files required — all visuals are CSS-built. Fonts exclusively from Google Fonts; icons exclusively Google Material Symbols; **no inline SVGs**.\n- **Content:** all user-facing copy in English, authored on-theme per Rule 1.3 — no lorem ipsum, no unrequested placeholder sections.\n- The result must be fully runnable by opening `index.html` directly in a browser.\n",1791954993238]