[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-080-Gatsby-Art-Deco-Noir":3},"# SYSTEM PROMPT — CODING AGENT\n\n**Build: \"Gatsby Art Deco Noir\" Landing Page (Luxury & Editorial)**\n\nAct as a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-quality landing page on the first attempt. All user-facing copy must be written in polished **English** with a luxury-editorial voice.\n\n---\n\n## PROJECT BRIEF\n\n* **Theme:** Gatsby Art Deco Noir — Sophisticated, Opulent, Dramatic.\n* **Era \u002F Mood:** Roaring 20s, Great Gatsby, black-and-gold luxury, geometric patterns, ornate borders, noir cinematic chiaroscuro.\n* **Fictional Concept (mandated for copy coherence):** The page promotes **\"The Gilded Hour\" — an exclusive private members' club**. Every headline, feature, testimonial, price tier, and FAQ answer must serve this single concept.\n* **Color Palette (exact values, non-negotiable):**\n  * Background `#050507` · Text `#F2E6CF` · Accent `#D4AF37`\n  * Gold Foil `#C5A059` · Velvet Black `#101010` · Champagne `#F7E7CE`\n* **Visual Effects to Implement:** intricate geometric borders, fan\u002Fsunburst motifs, metallic gold gradients, polished gold-leaf text, atmospheric glow, cinematic chiaroscuro vignettes.\n* **AI Visual Direction:** art deco landing page, great gatsby style, black and gold luxury, geometric patterns, ornate borders, elegant typography, noir aesthetic.\n* **CSS Technical Seeds (must be honored):** `background-color: #050507; color: #F2E6CF; font-family: 'Playfair Display', serif; border: 2px solid #D4AF37; background-image: linear-gradient(135deg, #050507 0%, #101010 100%);`\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* **Ornamentation Rule:** All deco motifs (sunburst rays, fan patterns, diamond nodes, stepped frames, chevron dividers) must be built with **pure CSS** — `repeating-conic-gradient`, `conic-gradient`, `repeating-linear-gradient`, `::before`\u002F`::after` pseudo-elements, rotated squares, and `clip-path`. Decorative empty `span`\u002F`div` elements marked `aria-hidden=\"true\"` are permitted.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* **No Inline CSS:** The `style=\"...\"` attribute is **explicitly forbidden** anywhere in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the site's look must only require editing the CSS file.\n* **No Inline JS Handlers:** All behavior is attached via `addEventListener` in `script.js`; inline `onclick`-style attributes are forbidden.\n\n### 1.2 CSS Variables & Theme Tokens\nAll visual tokens must live in `:root` and be consumed via `var(--...)`. Adopt this exact baseline (you may extend, never rename or remove):\n\n```css\n:root {\n  \u002F* Palette — Gatsby Art Deco Noir *\u002F\n  --primary: #D4AF37;          \u002F* metallic gold accent *\u002F\n  --secondary: #C5A059;        \u002F* gold foil *\u002F\n  --bg-primary: #050507;       \u002F* noir backdrop *\u002F\n  --bg-secondary: #101010;     \u002F* velvet black panels\u002Fcards *\u002F\n  --text-primary: #F2E6CF;     \u002F* cream *\u002F\n  --text-secondary: #C5A059;    \u002F* gold foil, secondary copy *\u002F\n  --text-success: #9CBF8B;      \u002F* champagne jade *\u002F\n  --text-error: #D96459;       \u002F* softened crimson *\u002F\n  --border-default: #D4AF37;    \u002F* ornate 2px frames per spec *\u002F\n  --border-subtle: rgba(212, 175, 55, 0.35);\n  --border-error: #D96459;\n  --border-success: #9CBF8B;\n  --champagne: #F7E7CE;        \u002F* highlight sheen *\u002F\n\n  \u002F* Signature gradients *\u002F\n  --gradient-noir: linear-gradient(135deg, #050507 0%, #101010 100%);\n  --gradient-gold: linear-gradient(135deg, #F7E7CE 0%, #D4AF37 38%, #C5A059 62%, #D4AF37 100%);\n\n  \u002F* Geometry & elevation *\u002F\n  --radius-sm: 0;   \u002F* art deco = sharp corners; never exceed --radius-lg *\u002F\n  --radius-md: 2px;\n  --radius-lg: 4px;\n  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.55);\n  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.65), 0 0 28px rgba(212, 175, 55, 0.14);\n  --z-dropdown: 1000;\n  --z-modal: 2000;\n  --z-toast: 3000;\n\n  \u002F* Rhythm & motion *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms;\n  --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n\n  \u002F* Type *\u002F\n  --font-base: 'Playfair Display', Georgia, serif;\n  --font-display: 'Playfair Display', Georgia, serif;\n  --font-label: 'Jost', sans-serif; \u002F* uppercase, letter-spaced eyebrows\u002Fnav\u002Fbuttons *\u002F\n}\n```\n\n* **Contrast Pairing (enforced everywhere):** Dark background tokens (`--bg-primary`, `--bg-secondary`) pair only with light text tokens (`--text-primary`, `--text-secondary`, `--champagne`). Light\u002Fmetallic surfaces (`--primary`, `--gradient-gold`) pair only with dark text `#050507`. Verify this pairing on every button, badge, and featured surface.\n* **Near-White Rule:** This theme uses no near-white surfaces; if one is ever absolutely required, use `#fefefe` — never `#ffffff`.\n\n### 1.3 Mandatory Dark-Native Theme\n* **Dark mode must always be fully defined** — here it is the native theme: all tokens above are noir values defined once in `:root`, and the page must render identically dark under both `prefers-color-scheme: light` and `prefers-color-scheme: dark` (no light overrides, no scheme-based token swaps).\n* **Exception — Dark-Only Theme:** Per the style specification (Light ✗ \u002F Dark ✓ Full), this build is intentionally dark-only — omit the light palette, omit the theme toggle and `localStorage` persistence entirely, and never alter tokens based on OS preference.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* **Flexbox Only:** Build all layout structures with `display: flex`. Card grids are flex containers with `flex-wrap: wrap` and `gap: var(--spacing-gap)`; items use `flex: 1 1 300px` and collapse to `flex-direction: column` below 768px.\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., text-heavy card interiors may use `flex-start`).\n* **Mobile-First:** Author all rules mobile-first with `min-width` media queries (480px \u002F 768px \u002F 1024px). Prevent horizontal scrolling at every viewport; decorative glows must be contained or clipped.\n\n### 1.5 Styling Approach\n* Author **clean custom CSS** in `style.css` organized with cascade layers: `@layer tokens, base, layout, components, utilities`.\n* Tailwind CSS is permitted only if the environment already provides it; any utility classes used must map back to the CSS variables or the generic reusable classes `.btn`, `.card`, `.input-group`.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Playfair Display** (body + display, weights 400–900, italic available) and **Jost** (labels) via Google Fonts `\u003Clink>` tags; bind them to `--font-base`, `--font-display`, `--font-label`. No other typefaces.\n* **Icons:** Use **Google Material Symbols** (Outlined) exclusively, loaded via the official stylesheet. **Raw inline SVGs and local icon files are explicitly forbidden.** Decorative icons get `aria-hidden=\"true\"`; meaningful icons get accessible text alternatives.\n* **Gold-Leaf Text:** Headline key phrases use `background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent;` with a solid `--primary` fallback.\n\n---\n\n## 2. COMPONENT & SECTION DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn` + modifiers)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `--font-label`, uppercase, letter-spaced.\n* **Variants:** `.btn--primary` (metallic `--gradient-gold` background, `#050507` text), `.btn--outline` (transparent, `2px solid var(--border-default)`, gold text), `.btn--danger` (crimson `--text-error` treatment, visually distinct from all gold actions).\n* **Hover:** Brightness lift + `--shadow-md` gold glow + a metallic sheen sweep via a `::after` gradient (disabled under reduced motion); `cursor: pointer`.\n* **Focus:** Distinct gold ring — `outline: 2px solid var(--primary); outline-offset: 3px;` — never remove it.\n* **Active:** `transform: scale(0.97)` click feedback.\n* **Loading (`.is-loading`):** Disables interaction, blocks double-clicks, swaps the label for a CSS spinner or animated Material Symbol (`progress_activity`) without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** Temporary feedback states driven by `--text-success` \u002F `--text-error` with a matching Material Symbol (`check` \u002F `error`).\n\n### 2.2 Card Component (`.card`)\n* **Default:** Flexible flexbox layout, `background: var(--bg-secondary)`, `border: 2px solid var(--border-default)` on ornate cards (feature, featured pricing) or `1px solid var(--border-subtle)` on quieter cards (testimonials), generous padding, `--radius-md`.\n* **Hover:** `transform: translateY(-2px)` + `--shadow-md` + border brightening.\n* **Focus-within:** Border shifts to full `--primary` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define a `.skeleton` class with a shimmer `@keyframes` in CSS to prevent layout jumps.\n* **Empty State:** Define a `.card--empty` fallback pattern: gold Material Symbol + clear guidance text.\n\n### 2.3 Form & Input (`.input-group`)\n* **Structure:** Flex container wrapping a real `\u003Clabel>`, the input, and a dedicated error-feedback element; stacks to column on mobile.\n* **States — all styled via classes:** Empty, Focused (gold outline ring + glow), Filled, Valid (`.is-valid`: `--border-success` + `check` icon), Invalid (`.is-invalid`: `--border-error`, `--text-error` message, `error` icon — never color alone), Disabled, Read-only.\n* **Feedback:** Errors and confirmations render in an `aria-live=\"polite\"` status region.\n\n### 2.4 Modal \u002F Overlay\n* No modal is part of the requested scope. If any overlay becomes strictly necessary, it must be a centered flex container (`align-items: center`) with backdrop, animated open\u002Fclose via `var(--transition-normal)`, Material Symbol close button, focus trapping, and `Esc`\u002Foverlay-click dismissal.\n\n### 2.5 Header & Navigation\n* Fixed header, `z-index: var(--z-dropdown)`; transparent at top, gains `rgba(5,5,7,0.92)` background + `1px solid var(--border-subtle)` bottom edge on scroll (JS toggles `.is-scrolled`).\n* Flex row: gradient-gold wordmark \"The Gilded Hour\" left; anchor links (Features, How It Works, Testimonials, Pricing, FAQ) in `--font-label` with an animated gold underline (`::after` scaleX 0→1 on hover\u002Ffocus); `.btn--outline` CTA right.\n* **Mobile (\u003C768px):** Links collapse behind a Material Symbol `menu`\u002F`close` button with correct `aria-expanded`\u002F`aria-controls`; panel is a flex column of full-width 44px-min links; closes on `Esc` and on link activation.\n\n### 2.6 Hero\n* Full-viewport (`min-height: 100svh`) flex column, centered, text-align center.\n* **Backdrop (chiaroscuro):** body-level `--gradient-noir` + hero-local atmospheric gold glow (`radial-gradient` pool at top center) + subtle sunburst fan via `repeating-conic-gradient` rays + dark vignette on the edges.\n* **Ornate Frame:** An inset double-line gold frame — outer `2px solid var(--border-default)`, inner `1px solid var(--border-subtle)` — with rotated-square diamond ornaments at the four corners (`aria-hidden` decorative elements).\n* **Content:** Letter-spaced gold eyebrow with flanking gradient lines; `h1` in `--font-display` (`clamp(2.75rem, 6vw, 5.5rem)`) with one key phrase in gold-leaf gradient text; subcopy in `--text-secondary` (max ~60ch); CTA row: `.btn--primary` \"Request an Invitation\" + `.btn--outline` \"Explore the Club\"; gentle bouncing scroll-cue icon linking to Features (reduced-motion gated).\n\n### 2.7 Features (3 Cards)\n* Reusable `.section-head` pattern: gold eyebrow, `--font-display` `h2` (one gradient-leaf word), subcopy.\n* Three `.card` items: Material Symbol icon (e.g., `diamond`, `wine_bar`, `nightlife`) in gold inside a rotated-45° diamond frame (icon counter-rotated), `--font-display` title, `--text-secondary` description.\n* All 2.2 states apply; icons are decorative (`aria-hidden`) with meaning carried by the titles\u002Fcopy.\n\n### 2.8 How It Works (3 Steps)\n* Three `.step` items in a flex row (column on mobile): Roman numerals **I \u002F II \u002F III** in `--font-display` inside gold-bordered circles\u002Fdiamonds, step title, description.\n* Desktop: steps joined by a horizontal gold gradient connector with central diamond nodes (`::after` pseudo-elements); mobile: vertical connector line. Hover: numeral frame glow.\n\n### 2.9 Testimonials\n* Three `.card--quote` items: oversized decorative `\"` glyph via `::before` in gold; a 5-star row using filled Material Symbol `star` icons (`aria-hidden`) plus visually-hidden text \"Rated 5 out of 5\" (never icons or color alone); italic `--font-display` quote; attribution with era-flavored fictional names (name in gold `--font-label` caps, role in `--text-secondary`).\n* Hover lift per 2.2.\n\n### 2.10 Pricing (3 Tiers)\n* Three `.card--pricing` items; middle tier `.card--featured`: `2px solid var(--border-default)` + gradient-gold border treatment, absolute \"Most Popular\" badge (`--gradient-gold` background, `#050507` text), visual priority on desktop without causing horizontal overflow.\n* Suggested on-theme tier names: **The Salon \u002F The Speakeasy (featured) \u002F The Penthouse**. Price in large `--font-display` numerals with champagne gradient + \"\u002Fmonth\" in `--text-secondary`.\n* Feature lists: gold Material Symbol `check` + text. CTAs: featured tier `.btn--primary`, others `.btn--outline`, full-width. Footnote line beneath the grid.\n\n### 2.11 FAQ (Accordion)\n* Centered column (max-width ~800px), 5–6 on-theme items, each `1px solid var(--border-subtle)`.\n* Question is a full-width `\u003Cbutton>` (`align-items: center`, `justify-content: space-between`, min-height 44px) with `aria-expanded`\u002F`aria-controls`; Material Symbol `expand_more` chevron rotates 180° on open.\n* Panel animates via `grid-template-rows: 0fr → 1fr` with `var(--transition-normal)`; JS enforces single-open behavior; answers in `--text-secondary`; keyboard operable with visible focus ring.\n\n### 2.12 Final CTA\n* Full-bleed band with sunburst `repeating-conic-gradient` rays, radial gold glow, and ornate double-line top\u002Fbottom borders with a chevron pattern strip.\n* Centered column: eyebrow, `h2` with gold-leaf phrase, subcopy, then `.input-group`: label + email input (`type=\"email\"`, required) + `.btn--primary` submit.\n* **Behavior (simulated, no backend):** Validate on submit → invalid: `.is-invalid` + `aria-live` error message; valid: `.is-loading` spinner (~900ms) → `.is-success` with `check` icon and \"Your invitation request has been received.\" in `--text-success`.\n\n### 2.13 Footer\n* Ornamental top border: chevron\u002Fdiamond pattern strip via `repeating-linear-gradient` + `1px solid var(--border-subtle)`.\n* Flex-wrap layout: brand column (gradient wordmark, one-line tagline, social icon row using available Material Symbols such as `mail`, `forum`, `rss_feed`, `share` — each a 44px target with `aria-label` and focus ring) + 2–3 secondary link columns (Club \u002F Company \u002F Legal).\n* Links: `--text-secondary`, hover to `--champagne` with underline; point to in-page anchors where targets exist. Bottom bar: dynamic copyright year via JS + a closing era-flavored line.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid `clamp()` typography; zero horizontal overflow at any width; decorations clipped.\n* **Smooth Animations:** Every state change transitions with `transition: var(--transition-normal) var(--ease-standard)`; all transforms, sheens, bounces, and ray animations are disabled under `@media (prefers-reduced-motion: reduce)` while color-only changes remain.\n* **Accessibility (a11y):** Contrast ≥ 4.5:1 for body text and ≥ 3:1 for large text\u002FUI edges in the noir palette; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); exactly one `h1` with logical heading order; a skip-to-content link visible on focus; global `:focus-visible` gold ring; full keyboard operability (no mouse-only interactions); `aria-live` regions for all dynamic feedback; state is never communicated by color alone; 44px minimum touch targets.\n* **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.\n* **Destructive Actions:** Any `.btn--danger` usage must be unmistakably distinct (crimson) against the gold\u002Fblack palette.\n* **Scroll Behavior:** `scroll-behavior: smooth` and `scroll-padding-top` (header offset), both wrapped in a reduced-motion guard.\n* **Optional Enhancement:** IntersectionObserver fade-up reveals — content must be visible without JS, and the effect must be reduced-motion gated.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, `script.js`. Only a single deferred entry point is allowed in the HTML (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`); no inline `\u003Cscript>` blocks, no inline styles, no inline handlers.\n* **Naming Convention:** BEM throughout — `.hero__title`, `.card--featured`, `.faq__panel` — with transient states as `.is-*` classes (`.is-open`, `.is-invalid`, `.is-loading`). Never mix conventions. Generic reusable classes `.btn`, `.card`, `.input-group` must exist and drive all variants.\n* **Copy Rules:** Write all user-facing copy in English, in a refined luxury-editorial voice consistent with \"The Gilded Hour\" concept. **No lorem ipsum.** Placeholders are permitted only where content is genuinely unknowable (e.g., notional legal links may use `href=\"#\"`).\n* **Fonts & Icons:** Google Fonts (Playfair Display, Jost) and Google Material Symbols via `\u003Clink>` tags only — no inline SVGs, no local icon files, no images.\n* **Final QA Checklist (verify before delivering):** zero inline CSS\u002Fhandlers; dark-only rendering under both OS schemes; all button\u002Fcard\u002Finput states defined; keyboard-only pass; no horizontal scroll; contrast targets met; reduced-motion respected; every requested section present in order.\n",1791954981228]