[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-266-Dreamcore":3},"# CODING AGENT PROMPT — \"DREAMCORE\" LANDING PAGE (COMPLETE BUILD, FIRST ATTEMPT)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-ready landing page in a single pass — no partial output, no \"to be continued.\"\n\n**Theme:** **Dreamcore** (oneiric core) — hazy surreal dreamlike scenes, nostalgic uncanny imagery, soft glow, impossible spaces, balanced between comforting and unsettling. Era: 2020–present internet aesthetic. Output category: Retro & Pop.\n\n**Sections required (in this order):** Sticky Navigation, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**Language:** All user-facing copy must be written in **English**.\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 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 (HTML5 landmarks: `header`, `nav`, `main`, `section`, `footer`), and agnostic of visual styling — changing the look must only require editing the CSS file.\n\n### 1.2 CSS Variables & Theme Tokens\nAdopt the Dreamcore token set below as the canonical `:root` block, then **extend it** with the mandatory semantic tokens the source spec omits: `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n```css\n\u002F* Dreamcore — design tokens *\u002F\n\u002F* 2020–present | Surreal dream\u002Fnostalgia internet aesthetic *\u002F\n:root {\n  \u002F* color *\u002F\n  --color-bg: #f3e9f7;\n  --color-surface: #fdf6ff;\n  --color-surface-strong: #ecd9f2;\n  --color-border: #d9b8e8;\n  --color-text: #3a1f4d;\n  --color-text-muted: #6d4a80;\n  --color-primary: #c04fd6;\n  --color-accent: #f4c96b;\n  --color-glow: #ffe9a8;\n  \u002F* radius *\u002F\n  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px;\n  \u002F* shadow *\u002F\n  --shadow-sm: 0 2px 10px rgba(150, 70, 170, 0.14);\n  --shadow-md: 0 8px 28px rgba(150, 70, 170, 0.20);\n  --shadow-lg: 0 20px 50px rgba(150, 70, 170, 0.26);\n  --shadow-glow: 0 0 32px rgba(255, 233, 168, 0.55);\n  \u002F* font *\u002F\n  --font-sans: 'Quicksand', 'Comic Neue', system-ui, sans-serif;\n  --font-display: 'Cormorant Garamond', 'Playfair Display', serif;\n  \u002F* text scale, spacing, ease — as provided *\u002F\n  \u002F* signature: hazy nostalgic glow halo behind surfaces + soft radial mist bg *\u002F\n  --bg-mist: radial-gradient(60% 50% at 20% 0%, #ffe9a8 0%, transparent 60%),\n             radial-gradient(70% 60% at 90% 100%, #b8dfff 0%, transparent 55%),\n             var(--color-bg);\n  --glow-ring: 0 0 0 6px rgba(255, 233, 168, 0.35);\n}\n```\n\n* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforce this in **every** theme, not just the default.\n* **Light Mode Background:** Never pure white. The mist base `#f3e9f7` is the page background; if a near-white is needed, use `#fefefe`, never `#ffffff`.\n* **Radius & Shadows:** Use the provided `--radius-*`, `--shadow-*`, `--shadow-glow`, and `--glow-ring` tokens consistently.\n* **Spacing & Transitions:** Use the provided `--space-*` scale; define `--transition-fast: 150ms` and `--transition-normal: 300ms`, both paired with `--ease-standard: cubic-bezier(0.2, 0, 0, 1)`.\n* **Elevation\u002FStacking:** Define `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` so layered components never collide.\n\n### 1.3 Mandatory Dark Mode Support (\"Night Dream\" Mode)\nThe source spec declares light mode only — you **must** design and ship a dark mode and validate both before publishing.\n\n* **Palette Derivation:** Create a \"night dream\" palette: deep indigo-violet backgrounds, moonlit lavender surfaces, pale lilac text. Brighten `--color-primary` for AA contrast on dark surfaces; retain `--color-accent` and `--color-glow` as dream-light sources; retune `--bg-mist` to moonlit tones (glow becomes moonlight). All values must pass WCAG AA contrast.\n* **Implementation:** Provide dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. Background and text variables must switch seamlessly with zero HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle in the nav with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\") and a Google Material icon.\n* **Validation Gate:** Verify both modes visually and for contrast before declaring the build complete.\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 exception is justified in a CSS comment.\n* Mobile-first: single column on small screens, wrapping to multi-column at ≥768px. Zero horizontal scrolling at any viewport ≥320px.\n\n### 1.5 Class System & Framework\n* The provided Dreamcore component classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) are the **canonical design system** — start from the provided base component CSS and extend it. Use clean custom CSS with the BEM-lite convention already established (`block`, `block--modifier`, `block__element`).\n* If you use Tailwind, utilities must be composed via `@layer` \u002F `@apply` into these same class names. **Never mix conventions** — one naming system across the entire deliverable.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Google Fonts — Quicksand (base), Cormorant Garamond (display; use italic for oneiric headlines), with Comic Neue \u002F Playfair Display as declared fallbacks. Load via `\u003Clink>` with `preconnect`; bind to `--font-sans` and `--font-display`.\n* **Icons:** Google Material Symbols (Rounded style suits the theme). **Inline SVGs, local icon files, and emoji-as-icons are forbidden.**\n\n---\n\n## 2. DREAMCORE VISUAL DIRECTION (SIGNATURE LOOK)\n\n* **Signature Move:** A soft nostalgic glow halo — radial mist background plus diffuse glow shadow (`--shadow-glow` \u002F `--glow-ring`) — wraps the nav, cards, and primary buttons, evoking hazy, uncanny dream light that sits between comforting and unsettling.\n* **Mist Background:** `body` uses `--bg-mist` with `background-attachment: fixed` (warm glow top-left, cool blue bottom-right). Retune the mist for dark mode per 1.3.\n* **Impossible Spaces:** Layered depth — floating CSS glow orbs in the hero, gently overlapping or offset elements, oversized display type. Nothing should feel rigidly grid-locked.\n* **Nostalgic Uncanny:** Pill shapes, soft blurred edges, slightly unexpected scale shifts. Keep it gentle — a whisper of unease, never horror.\n* **Soft Glow:** Subtle `text-shadow` halos on display headings only (never at the cost of AA contrast); `--glow-ring` focus states; `--shadow-glow` on interactive surfaces.\n* **Imagery:** Build atmosphere primarily with CSS gradients and mist. If photos are used (hero visual, testimonial avatars), use picsum placeholders treated with a hazy duotone\u002Fblur overlay so they read as dream fragments. Decorative images get `alt=\"\"`.\n* **Motion Mood:** Slow, drifting transitions (`var(--transition-normal)` or slower); gentle floating idle animations; everything disabled under `prefers-reduced-motion`.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n### 3.1 Buttons (`.btn`, `.btn--primary`, `.btn--ghost`)\n* **Default:** Flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem`); minimum touch target 44×44px; pill radius.\n* **Hover:** `--shadow-md` + `--glow-ring`, `translateY(-1px)`, `cursor: pointer`.\n* **Focus:** `.btn:focus-visible` — `outline: 2px solid var(--color-primary); outline-offset: 3px` for keyboard navigation.\n* **Active\u002FPressed:** Extend the provided base CSS — pressed state must render `transform: scale(0.97)`.\n* **Loading:** `.btn--loading` (or `[data-loading]`) — disables pointer events, prevents double submission, renders a CSS border-spinner or animated Material icon **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n* **Success\u002FError:** Transient `.btn--success` \u002F `.btn--error` styles driven by `--text-success` \u002F `--text-error`, announced via `aria-live`.\n\n### 3.2 Cards (`.card`)\n* **Default:** Flexible flexbox layout, `--color-surface` background, `1px solid var(--color-border)`, `--radius-lg`, `--shadow-md` + `--shadow-glow`.\n* **Hover (interactive cards):** `translateY(-2px)` + `--shadow-lg` + intensified glow.\n* **Focus-within:** Border color shifts to `--color-primary` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** `.card--skeleton` shimmer animation (CSS gradient sweep) with stable dimensions — no layout jump.\n* **Empty State:** `.card--empty` fallback layout with a Material icon and clear guidance text.\n\n### 3.3 Forms & Inputs (`.input`)\n* **States:** Empty, Focused (`--color-primary` border + `--glow-ring`), Filled, Valid (`--border-success` + check icon), Invalid (`--border-error`, error text in `--text-error`, error icon), Disabled, Read-only.\n* **Structure:** Flex `.input-group` wrapping a `\u003Clabel>`, the input, and a dedicated error feedback container. Errors link via `aria-describedby`; the error container is an `aria-live=\"polite\"` region.\n* **Submit Flow:** Button enters loading → success; confirmation renders inline plus a toast; no page reload.\n\n### 3.4 FAQ Accordion\n* Each item: `\u003Cbutton aria-expanded aria-controls>` trigger + panel region; Material `expand_more` icon rotating 180° on open; smooth CSS height transition (e.g., `grid-template-rows: 0fr → 1fr`); fully keyboard operable; choose single-open or multi-open and be consistent.\n* **If any true modal is added** (e.g., plan details): animate open\u002Fclose via CSS, backdrop overlay, Material icon close button, keyboard focus trapping, close on `Esc` and overlay click, layered at `--z-modal`.\n\n### 3.5 Toasts\n* Form success\u002Ferror feedback appears at `--z-toast`; `role=\"status\"` \u002F `aria-live`; auto-dismiss with an accessible close control; styled with card tokens.\n\n### 3.6 Navigation (`.nav`)\n* Sticky pill nav: logo (Material icon + wordmark), anchor links, theme toggle (per 1.3), primary CTA.\n* **Mobile:** Hamburger (Material icon) reveals a dropdown menu at `--z-dropdown`; `aria-expanded`, `Esc` closes, focus managed — no mouse-only interactions.\n* Anchor links smooth-scroll; sections get `scroll-margin-top` so the sticky nav never covers headings.\n\n---\n\n## 4. SECTION-BY-SECTION REQUIREMENTS\n\n### 4.1 Hero\n* Full-bleed mist scene with floating CSS glow orbs (`aria-hidden`, `pointer-events: none`).\n* `.badge` pill above the headline; `\u003Ch1>` in Cormorant Garamond italic at display scale (fluid `clamp()` from mobile to `--text-5xl`); oneiric but comprehensible value copy; subhead in Quicksand (`--text-lg`, `--color-text-muted`).\n* Two CTAs: `.btn--primary` + `.btn` ghost secondary, both ≥44px, wired to scroll targets (pricing \u002F final CTA).\n* Optional picsum visual inside a `.card` with haze overlay.\n\n### 4.2 Features — 3 Cards\n* Flex grid: 1 column mobile → 3 columns ≥768px.\n* Each `.card`: glow icon chip (Material icon in a circular chip or `.badge`), title (`--text-xl`), description (`--text-base`, muted). Real English copy — no lorem ipsum.\n* Hover lift + glow; focus-within border highlight.\n\n### 4.3 How It Works — 3 Steps\n* Numbered 01 \u002F 02 \u002F 03 in the display font; a connecting dotted \"dream-thread\" line via CSS (hidden or vertical on mobile).\n* Each step: Material icon, short title, 1–2 sentence description. Vertical stack on mobile, horizontal ≥768px.\n\n### 4.4 Testimonials\n* 3 quote `.card`s: quote in italic Cormorant Garamond, avatar (picsum circle or Material icon initial), name + role, 5 Material star icons (rating conveyed via `aria-label`, never color alone).\n* Static flex grid (accessible by default); define `.card--skeleton` shimmer classes for future async use.\n\n### 4.5 Pricing — 3 Tiers\n* 3 `.card`s: tier name, price (`--text-3xl` display font with `\u002Fmonth` caption), feature list with Material check icons, CTA button.\n* Featured middle tier: `.card--featured` — elevated shadow, glow ring, `.badge` \"Most Dreamed Of\", `.btn--primary`; other tiers use `.btn`. The featured tier must be visually distinct in **both** light and dark modes.\n\n### 4.6 FAQ\n* 5–6 real English Q&As about the product; accordion per 3.4.\n\n### 4.7 Final CTA\n* Full-width band with intensified mist + glow; display headline; email `.input-group` + `.btn--primary` submit per 3.3; inline success confirmation + toast; `aria-live` announcements.\n\n### 4.8 Footer\n* Secondary links: About, Dream Journal, Privacy, Terms, Contact + social icons (Material, each with `aria-label`).\n* Muted text (`--color-text-muted`) that still passes AA in both modes; copyright line; optional back-to-top link.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing via `clamp()`; breakpoints without horizontal overflow at any width ≥320px.\n* **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; scroll-reveal animations allowed only if content is fully visible without JS and fully disabled under `prefers-reduced-motion`.\n* **Accessibility (a11y):** WCAG AA contrast in light AND dark; never rely on color alone to communicate state; semantic HTML5 with a strict `h1 → h3` hierarchy; correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; skip-to-content link; `aria-live` regions for all dynamic feedback.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive\u002FDistinct Actions:** Any danger-style action must be visually distinct and legible in both themes (define the tokens even if unused on this page).\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. A single deferred `\u003Cscript src=\"script.js\" defer>` entry point; no inline `\u003Cscript>` blocks; no `style=\"\"` attributes anywhere.\n* **Naming Convention:** One BEM-lite system throughout (`.block`, `.block--modifier`, `.block__element`), matching the provided Dreamcore classes.\n* **Copy:** All user-facing copy in English, thematically Dreamcore (hazy, nostalgic, gently uncanny) yet clear and conversion-focused. No lorem-ipsum-only sections; picsum placeholders only for genuinely unspecified imagery.\n* **Fonts\u002FIcons:** Google Fonts + Google Material Symbols via CDN links.\n* **Validation Gate (before declaring complete):** zero inline styles; dark mode works via toggle AND system preference and persists across reload; no horizontal scroll at 320px; full keyboard-only pass from nav through every section to footer; AA contrast verified in both modes; every interactive element has hover, focus, active, and (where applicable) loading\u002Fdisabled states.\n",1791954984132]