[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-205-Circus-Carnival-Poster":3},"# SYSTEM PROMPT — \"Circus \u002F Carnival Poster\" Landing Page (Retro & Pop)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Code a complete, production-ready landing page on the first attempt in the **Circus \u002F Carnival Poster** style (1870s–1950s revival, \"Retro & Pop\" category).\n\n**Creative direction:** Bold red\u002Fgold\u002Fcream barber-pole stripes and gold starburst washes; tall theatrical condensed \"bill\" lettering; ornate double-line scrolled borders; high-energy showman excitement with \"step right up\" urgency. Mood references (visual direction only — never copy them into the copy): vintage big-top posters, Strobridge Lithographing Co. bills, state-fair midway signage. Required effects used throughout: layered poster shadows, blurred gold glows, starburst gradients.\n\n**Brand & copy:** Invent one original fictional brand and write ALL user-facing copy in English, in an authentic 1870s–1950s showman voice (\"Step right up!\", \"One night only!\"). Copy must be original — no lorem ipsum, no real trademarks (never use \"Barnum & Bailey\", \"Ringling\", or \"The Greatest Show on Earth\" in copy).\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- All design properties, layout rules, and states are applied exclusively via class or ID selectors.\n- HTML stays semantic and style-agnostic: retheming the page must never require markup changes.\n\n**1.2 CSS Variables & Theme Tokens**\n- Refactor the supplied reference CSS (Appendix) so every token is exposed under these canonical names in `:root`. The source `--color-*` names may be kept as one-line aliases (e.g., `--color-primary: var(--primary);`), but canonical names are the single source of truth.\n- **Light mode (\"Daybill\" — default):**\n\n| Token | Value | Role |\n|---|---|---|\n| `--bg-primary` | `#f2e6c9` | page canvas (cream) |\n| `--bg-secondary` | `#fdf8ec` | card \u002F paper surface |\n| `--bg-tertiary` | `#e8d6a8` | inset \u002F raised paper |\n| `--text-primary` | `#241812` | main text (dark on light) |\n| `--text-secondary` | `#5c4429` | muted text |\n| `--primary` | `#c81d25` | showman red (fills; pairs with `--cream` text) |\n| `--secondary` | `#1c2a52` | deep navy (frames, scroll borders, shadow offsets) |\n| `--accent` | `#d4a017` | gilded gold — fills\u002Fborders\u002Ficons only, never text on light backgrounds |\n| `--cream` | `#f2e6c9` | fixed light text for dark fills (both modes) |\n| `--text-success` | `#2e6b3e` | success text |\n| `--text-error` | `#9b1c1c` | error text |\n| `--border-default` | `#1c2a52` | double-line scroll borders |\n| `--border-success` | `#2e6b3e` | |\n| `--border-error` | `#9b1c1c` | |\n\n- **Dark mode (\"Midnight Midway\") — placement defined in 1.3:**\n\n| Token | Value |\n|---|---|\n| `--bg-primary` | `#131726` |\n| `--bg-secondary` | `#1c2a52` |\n| `--bg-tertiary` | `#27355f` |\n| `--text-primary` | `#f2e6c9` |\n| `--text-secondary` | `#cbb98e` |\n| `--primary` | `#e0524d` (accents, icons, large display text only) |\n| `--secondary` | `#8fa3d9` |\n| `--accent` | `#e9c46a` |\n| `--text-success` | `#57c97b` |\n| `--text-error` | `#f28b82` |\n| `--border-default` | `#d4a017` (gilded scroll borders) |\n| `--border-success` | `#57c97b` |\n| `--border-error` | `#f28b82` |\n\n- **Structural tokens (both modes):** `--radius-sm: 2px; --radius-md: 6px; --radius-lg: 14px; --radius-pill: 999px;` — `--shadow-sm: 0 3px 0 var(--secondary), 0 4px 10px rgba(28,19,10,0.3)` and `--shadow-md: 0 6px 0 var(--secondary), 0 10px 18px rgba(28,19,10,0.35)` (keep `--shadow-poster-sm`\u002F`--shadow-poster` as aliases); in dark mode shadows switch to near-black offsets (`0 3px 0 #0a0e1a` \u002F `0 6px 0 #0a0e1a` with deeper rgba). `--spacing-gap: 16px` plus the `--space-1…--space-24` scale. `--transition-fast: 120ms; --transition-normal: 240ms; --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1)`. `--z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200`.\n- **Theme patterns:** `--stripe-pattern: repeating-linear-gradient(135deg, var(--primary) 0 22px, var(--cream) 22px 44px)` (red\u002Fcream barber pole, kept in both modes — it reads as lit signage at night); `--starburst-gradient: radial-gradient(circle at 50% 0%, rgba(212,160,23,0.35), transparent 55%)` (dark mode: `rgba(233,196,106,0.14)`); `--scroll-border: 3px double var(--border-default)`.\n- **Contrast pairing (mandatory, both modes):** every light background token pairs with dark text tokens; every dark fill pairs with `--cream` or `--text-primary`. Never place text directly on `--stripe-pattern` — any striped element gets a solid inner chip for its label. Never introduce `#ffffff`; the lightest surface is `#fdf8ec` (if a near-white is ever required, use `#fefefe`).\n\n**1.3 Mandatory Dark Mode Support**\n- The source specification does not declare modes; you must design and validate dark mode before publishing.\n- Implement the dark token block twice: under a `.dark` class selector and under `@media (prefers-color-scheme: dark)` guarded by `:root:not(.light)`. The CSS media default prevents flash; JavaScript only applies an explicit user choice.\n- **Persistence:** store the choice in `localStorage`; first visit falls back to `prefers-color-scheme`; theme switching must never require HTML restructuring.\n- **Visible toggle in the nav:** a button with `aria-pressed` reflecting dark state, an updated `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), and a Google Material Symbols icon swap (`dark_mode` \u002F `light_mode`).\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- Card grids: `display: flex; flex-wrap: wrap; gap: var(--spacing-gap);` with children `flex: 1 1 280px` — never fixed-width rows that overflow.\n- All rows collapse to columns below ~768px; zero horizontal scrolling from 320px up; all touch targets ≥ 44×44px.\n\n**1.5 Styling Approach**\n- This build uses clean, hand-authored custom CSS in `style.css` — the supplied token\u002Fcomponent system replaces any framework. Do not import Tailwind, Bootstrap, or similar. (Exception clause: if Tailwind is used at all, every utility may only appear via `@layer`\u002F`@apply` composed inside the BEM classes defined below — never as scattered utility classes in the HTML.)\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load via `\u003Clink>` in `\u003Chead>`: **Bebas Neue** (display — tall condensed bill lettering), **Josefin Sans** (body), **Oswald** (secondary display\u002Ffallback). Bind `--font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif` and `--font-base: 'Josefin Sans', 'Oswald', system-ui, sans-serif` (keep `--font-sans` as an alias of `--font-base`).\n- Icons: **Google Material Symbols (Rounded)** via its Google Fonts stylesheet, rendered as `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">ticket\u003C\u002Fspan>`. Inline SVGs and local icon files are forbidden.\n- Icons are decorative by default; any icon that carries meaning must be paired with a text label or `aria-label`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\nStyle every state via CSS classes (BEM modifiers or `data-state` attributes) — never inline styles.\n\n**2.1 Button (`.btn`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` display font, min 44×44px. Variants: `.btn` (paper fill, navy border), `.btn--primary` (red fill, `--cream` text, `--shadow-md`), `.btn--ghost` (transparent, navy border). Define `.btn--danger` (visually distinct in both themes) even if unused on this page.\n- **Hover:** `translateY(-2px) rotate(-0.5deg)` plus shadow shift, `cursor: pointer`. **Focus:** distinct `:focus-visible` ring via `outline`\u002F`box-shadow` tokens. **Active:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** CSS spinner or animated Material icon inside the button; interactions disabled; double-clicks prevented; button dimensions must not change.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`, no transforms.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback driven by `--text-success` \u002F `--text-error`, always icon + text, never color alone.\n- **Dark mode:** restyle `.btn--primary` as a gilded ticket — `background: var(--accent); color: #1c2a52` — so the primary CTA holds ≥ 4.5:1 contrast; the brightened `--primary` red is reserved for accents and large display type.\n\n**2.2 Card (`.card`)**\n- **Default:** flexbox column; `background: var(--bg-secondary)` + `--starburst-gradient`; `border: var(--scroll-border)`; `border-radius: var(--radius-lg)`; `box-shadow: var(--shadow-sm)`; `padding: var(--space-6)`.\n- **Hover (interactive cards):** `translateY(-2px)` + shadow shift. **Focus-within:** border shifts to `--primary` when a child link\u002Fbutton is focused.\n- **Loading:** define `.card--skeleton` with a shimmer keyframe gradient sweep that preserves final layout dimensions.\n- **Empty:** define `.card--empty` with a centered Material icon and guidance text.\n\n**2.3 Form & Input (`.input-group`)**\n- Build the Final CTA email capture as a flex column wrapping: `\u003Clabel>`, `.input` field, and a dedicated error-feedback element.\n- **States:** empty; focused (red border + 3px ring via `box-shadow`); filled; valid (`--border-success` + check icon); invalid (`--border-error`, error text + error icon in the dedicated container — never color alone); disabled; read-only.\n- **Submit flow:** button enters `.is-loading`; simulate async (`setTimeout`), then flip to `.is-success` or `.is-error`; all dynamic feedback announced through an `aria-live=\"polite\"` status region; guard against double submission.\n\n**2.4 Modal (`.modal`) — \"Full ticket details\"**\n- Triggered from each Pricing tier's details control. **States:** opening (fade + scale in with `--ease-standard`), open, closing (reverse), plus loading\u002Fsuccess\u002Ferror content variants.\n- Centered flex overlay (`align-items: center; justify-content: center`), backdrop `rgba(19,23,38,0.6)` with `backdrop-filter: blur(4px)` (this is where the \"blur\" effect lives), `z-index: var(--z-modal)`.\n- Google Material Symbols close button; `role=\"dialog\" aria-modal=\"true\" aria-labelledby`; keyboard focus trapped inside; closes via `Esc` and overlay click; focus returns to the trigger; body scroll locked while open.\n\n**2.5 Accordion (`.faq`)**\n- Each item: `\u003Cbutton class=\"faq__trigger\" aria-expanded aria-controls>` + paired region; CSS-animated expand\u002Fcollapse; chevron Material icon rotates 180°; fully keyboard operable; animation removed under `prefers-reduced-motion`.\n\n---\n\n## 3. LANDING PAGE SECTION SPECIFICATIONS\n\nBuild in this order inside semantic landmarks (`header`, `nav`, `main` with exactly one `\u003Ch1>`, each `section` labeled via `aria-labelledby`, `footer`). Include a visible skip link.\n\n**3.1 Nav** — sticky; paper surface, bottom `--scroll-border`, `--shadow-sm`; brand wordmark in Bebas Neue; anchor links to all sections; theme toggle (1.3); compact `.btn--primary` CTA; below 768px collapses to a hamburger button (`aria-expanded`) opening a panel at `--z-dropdown`.\n\n**3.2 Hero** — full-width barber-stripe awning bar (`--stripe-pattern`, ~14px) at the top edge; badge kicker (\"ONE NIGHT ONLY\"-style, label on a solid chip per 1.2); giant Bebas Neue headline (uppercase, fluid `clamp()` up to `--text-5xl`); showman subcopy; two CTAs (`.btn--primary` \"Step right up\" + `.btn--ghost` anchor to Features). Decoration: layered `--starburst-gradient` plus a blurred gold glow (radial gradient or `filter: blur` on a pseudo-element) behind the headline — pure CSS, no images. Optional CSS marquee ticker (\"★ NOW BOOKING ★ …\") below the hero, paused under `prefers-reduced-motion`.\n\n**3.3 Features — 3 cards** — flex-wrap grid (1.4); each `.card`: Material Symbols icon in a starburst medallion (radial-gradient circle with `--scroll-border` ring), display-font title, body copy, optional text link; hover lift + focus-within per 2.2.\n\n**3.4 How It Works — 3 steps** — styled as circus bill acts: \"ACT I \u002F ACT II \u002F ACT III\" numbered medallions (striped or starburst), display-font step titles, copy; flex row with a dashed connector line on desktop, vertical connector in the mobile column.\n\n**3.5 Testimonials — \"What the papers say\"** — 3 `.card` press-clipping quotes: gold Material `star` rating icons (with `aria-label` stating the rating), quote in Josefin Sans, reviewer name + role, small \"verified\" badge chip; card states per 2.2.\n\n**3.6 Pricing — 3 admission tiers** — ticket-stub cards: striped header band (label on a solid chip), tier name in Bebas Neue, price in display type, feature list with Material `check` icons, one `.btn` per tier, perforated stub edge (dashed `border-top` or punched-circle radial gradients). Middle tier featured: slightly scaled, `--shadow-md`, starburst \"MOST POPULAR\" ribbon (solid chip label), distinct border. Each tier's \"Full ticket details\" control opens the modal (2.4). Include \"Cancel anytime\" microcopy in `--text-secondary`; `.btn--danger` stays defined per 2.1.\n\n**3.7 FAQ** — 5–6 original Q&As in showman tone, accordion per 2.5.\n\n**3.8 Final CTA** — full-width band: `--stripe-pattern` frame with a solid `--bg-secondary` inner panel (text never on stripes), starburst wash, big display headline, the email capture form (2.3), reassurance microcopy (\"No spam — ballyhoo only\").\n\n**3.9 Footer** — navy panel (`#1c2a52` light mode \u002F `#0d1322` dark mode) with `--cream` text; brand wordmark; 2–3 columns of secondary links (in-page anchors where possible, otherwise `href=\"#\"` placeholders that remain keyboard-focusable); Material Symbols icon buttons using generic icons (`mail`, `share`, `rss_feed` — no fake brand logos); copyright + small print; `--scroll-border` top edge.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, wrap-based grids, zero horizontal overflow from 320px up.\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; every click, hover, and submission produces visible feedback; all motion disabled under `prefers-reduced-motion: reduce`.\n- **Accessibility:** WCAG AA contrast in BOTH modes (validate every pairing from 1.2 before publishing); never communicate state by color alone; semantic HTML5 elements; correct ARIA roles\u002Flabels on the theme toggle, mobile menu, accordion, and modal; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form status, and any toast uses `--z-toast`.\n- **Layering:** dropdown \u003C modal \u003C toast via the `--z-*` tokens; no stacking conflicts.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- Exactly three files: `index.html`, `style.css`, `script.js`. The only script reference is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no inline script blocks, no inline styles.\n- `\u003Chead>` loads Google Fonts (Bebas Neue, Josefin Sans, Oswald) and Material Symbols Rounded via `\u003Clink>`.\n- **Naming:** BEM only (`block__element--modifier`), matching the supplied `.btn` \u002F `.card` \u002F `.input` \u002F `.badge` vocabulary — never mix conventions.\n- **`script.js` (progressive enhancement only):** theme toggle + persistence (1.3), mobile menu, accordion, modal manager (focus trap, `Esc`, overlay click, focus return), form validation + simulated submit with `aria-live` status, smooth anchor scrolling honoring reduced motion.\n- All user-facing copy in English, original showman voice, no lorem ipsum, no real trademarks. Where content is genuinely unspecified (feature names, testimonial names, prices), invent on-theme copy rather than placeholders.\n- Ship complete, runnable code on the first attempt: valid semantic HTML, no console errors, both themes fully designed and validated before you consider the work done.\n\n---\n\n## Appendix — Reference component baseline (refactor onto canonical tokens; extend with ALL states required in Section 2 — this is not complete)\n\n```css\n\u002F* Circus \u002F Carnival Poster — baseline. Disregard the \"references\u002F…\" comment from the source spec; it is metadata, not a file to load. *\u002F\nbody { margin: 0; color: var(--text-primary); font-family: var(--font-base); background: var(--bg-primary); background-image: var(--starburst-gradient); min-height: 100vh; }\n\n.nav { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-6); background: var(--bg-secondary); border-bottom: var(--scroll-border); box-shadow: var(--shadow-sm); }\n\n.btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font: 700 var(--text-base)\u002F1 var(--font-display); letter-spacing: .03em; color: var(--text-primary); padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); background: var(--bg-tertiary); border: 2px solid var(--border-default); cursor: pointer; transition: transform var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard); }\n.btn:hover { transform: translateY(-2px) rotate(-0.5deg); box-shadow: var(--shadow-sm); }\n.btn:active { transform: scale(0.97); }\n.btn:focus-visible { outline: 3px solid var(--border-default); outline-offset: 3px; }\n.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }\n.btn--primary { background: var(--primary); color: var(--cream); border: 2px solid var(--border-default); box-shadow: var(--shadow-md); }\n.btn--primary:hover { box-shadow: 0 8px 0 var(--secondary), 0 14px 22px rgba(28,19,10,0.4); }\n\n.card { background: var(--bg-secondary); background-image: var(--starburst-gradient); border-radius: var(--radius-lg); padding: var(--space-6); border: var(--scroll-border); box-shadow: var(--shadow-sm); }\n\n.input { width: 100%; box-sizing: border-box; color: var(--text-primary); font: var(--text-base) var(--font-base); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--bg-secondary); border: 2px solid var(--border-default); }\n.input::placeholder { color: var(--text-secondary); }\n.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(200,29,37,0.25); }\n\n\u002F* Badge: striped frame, label on a solid chip — never text directly on stripes *\u002F\n.badge { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--stripe-pattern); border: 2px solid var(--border-default); }\n.badge__label { display: inline-flex; align-items: center; gap: 0.4em; font: 700 var(--text-xs)\u002F1 var(--font-display); letter-spacing: 0.04em; padding: 0.4em 0.9em; border-radius: var(--radius-pill); background: var(--secondary); color: var(--cream); }\n\n@media (prefers-reduced-motion: reduce) { .btn, .card, .badge { transition: none; } .btn:hover { transform: none; } }\n```\n",1791954983144]