[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-142-70s-Psychedelic-Flower-Power":3},"# CODING AGENT PROMPT — Build the \"70s Psychedelic Flower Power\" Landing Page\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page **on the first attempt** — no clarifying questions, no stubs, no TODOs. Every rule in this document is mandatory. Generate the final code immediately after reading it.\n\n**Objective:** A single-page, fully responsive landing page in the **70s Psychedelic Flower Power** style (Playful, Whimsical, Educational), containing: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links**, plus a sticky header with anchor navigation and a theme toggle.\n\n---\n\n## 0. THEME SPECIFICATION & DESIGN DIRECTION\n\n**0.1 Mood & Keywords**\n70s, psychedelic, retro, flower, groovy, wavy, colorful, hippie. Bright retro colors, groovy typography, wavy lines, hippie aesthetic, flat vector illustration feel.\n\n**0.2 Color Palette & Token Mapping**\n\nLight mode — \"Sunshine Commune\" (default):\n\n| Token | Value | Usage |\n|---|---|---|\n| `--bg-primary` | `#FFF9C4` | Page background (butter yellow — never pure white) |\n| `--bg-secondary` | `#fefefe` | Card\u002Fsurface background (use `#fefefe`, never `#ffffff`) |\n| `--text-primary` | `#2A0A4A` | Headings & body text (deep purple) |\n| `--text-secondary` | `rgba(42, 10, 74, 0.75)` | Supporting text |\n| `--primary` | `#FF6E40` | Sunset Orange — CTAs, borders, highlights |\n| `--secondary` | `#9C27B0` | Purple Haze — fills, focus rings, hard shadows |\n| `--accent-green` | `#69F0AE` | Groovy Green — **decorative only in light mode** (too light for text on light backgrounds) |\n| `--accent-yellow` | `#FFD740` | Sunshine Yellow — badges, fills, rainbow strips |\n| `--text-success` | `#1B5E20` | Readable success text |\n| `--text-error` | `#B71C1C` | Readable error text |\n| `--border-default` | `rgba(42, 10, 74, 0.2)` | Standard borders |\n| `--border-success` | `#1B5E20` | Valid input borders |\n| `--border-error` | `#B71C1C` | Invalid input borders |\n\nDark mode — \"Midnight Haze\" (mandatory, see §1.3):\n\n| Token | Value |\n|---|---|\n| `--bg-primary` | `#1A0B2E` (midnight purple) |\n| `--bg-secondary` | `#2A1244` |\n| `--text-primary` | `#FFF9C4` |\n| `--text-secondary` | `rgba(255, 249, 196, 0.75)` |\n| `--primary` | `#FF6E40` |\n| `--secondary` | `#CE93D8` (lightened Purple Haze for text\u002Fborder legibility; keep `#9C27B0` for fills) |\n| `--accent-green` | `#69F0AE` (now also valid as success text) |\n| `--accent-yellow` | `#FFD740` |\n| `--text-success` | `#69F0AE` |\n| `--text-error` | `#FF8A80` |\n| `--border-default` | `rgba(255, 249, 196, 0.25)` |\n| `--border-success` | `#69F0AE` |\n| `--border-error` | `#FF8A80` |\n\n**0.3 Typography**\n- `--font-display: 'Chewy', cursive` (Google Fonts) — logo, all headings, buttons.\n- `--font-base: 'Quicksand', sans-serif` (Google Fonts, weights 400–700) — body copy for legibility; Chewy is display-only.\n- Fluid sizing via `clamp()`; strict `h1 → h2 → h3` hierarchy.\n\n**0.4 Icons**\n- Use **Google Material Symbols Rounded** (FILL 1) loaded via Google Fonts `\u003Clink>`.\n- Suggested glyphs: `filter_vintage`, `local_florist`, `emoji_nature`, `wb_sunny`, `self_improvement`, `favorite`, `star`, `check_circle`, `celebration`, `music_note`, `mail`, `arrow_forward`, `expand_more`, `light_mode`, `dark_mode`, `menu`, `close`.\n- **Forbidden:** inline SVGs, local icon files, emoji-as-icons, any non-Google icon source.\n\n**0.5 Signature 70s Visual Language (CSS-only)**\n- **Organic blob shapes:** `border-radius: 50% 20% \u002F 10% 40%` (token `--radius-blob`); vary corner values per card for a handmade feel.\n- **Thick groovy borders:** `5px solid` accent colors (token `--border-groovy: 5px solid var(--primary)`).\n- **Wavy rainbow borders\u002Fdividers:** build from `repeating-linear-gradient` strips (orange → yellow → green → purple) and scalloped edges via `radial-gradient` or layered pseudo-elements — pure CSS, no images.\n- **Daisies, mushrooms, peace motifs:** CSS-drawn (box-shadow petal trick, border-radius blobs) and\u002For Material Symbols glyphs.\n- **Flat vector feel:** solid fills, hard offset shadows (e.g., `box-shadow: 6px 6px 0 var(--secondary)`), no photorealism, no glossy gradients.\n- Subtle dot\u002Fflower background texture via `repeating-radial-gradient` is allowed.\n\n**0.6 Section Map & Content Requirements**\nDefine **one coherent fictional product concept** (e.g., \"Flower Power Academy — a playful online course platform teaching 70s art, music & culture\") and write all copy consistently around it.\n1. **Header (sticky):** Chewy text wordmark, anchor links (Features, How It Works, Pricing, FAQ), theme toggle, CTA button. Mobile: hamburger → dropdown panel (`--z-dropdown`, `aria-expanded`, closes on `Esc` and on link click).\n2. **Hero:** eyebrow badge, `h1` headline, subcopy, primary + secondary CTA, CSS flower-field decoration, wavy bottom divider; optional slow-floating daisies (reduced-motion safe).\n3. **Features:** exactly 3 cards — Material Symbol icon, title, 2–3 sentence description.\n4. **How It Works:** 3 numbered steps (01\u002F02\u002F03) joined by a wavy dashed CSS connector; stacks vertically on mobile.\n5. **Testimonials:** 3 cards — quote, star rating (Material `star` icons + `aria-label=\"Rated 5 out of 5 stars\"`), avatar as **initials in a groovy gradient circle** (no external images), name + role.\n6. **Pricing:** 3 tiers; middle tier featured (`.card--featured`) with rainbow border, \"Most Groovy\" badge, slight scale; per-tier feature list with `check_circle` icons; each tier CTA enters loading state on click, then confirms via toast.\n7. **FAQ:** 5–6 items using native `\u003Cdetails>\u002F\u003Csummary>` (styled) or `button` + `aria-expanded`; rotating chevron; fully keyboard operable.\n8. **Final CTA:** rainbow-bordered banner with newsletter email form (§2.3); success → button success state + success modal (§2.4) and\u002For toast.\n9. **Footer:** brand blurb, secondary link groups (About, Resources, Legal), social links (text links or generic Material icons with `aria-label` — brand logos are forbidden), copyright, back-to-top link.\n\nAll user-facing copy: original, on-theme **English** (groovy, warm, clear). **No lorem ipsum.**\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`. **Explicitly forbidden:** `style=\"...\"` attributes anywhere in the HTML.\n- Target everything via class or ID selectors only.\n- HTML remains clean, semantic, and style-agnostic — re-theming the site must require CSS edits only, never markup changes.\n\n**1.2 CSS Variables & Theme Tokens**\n- Store all tokens in `:root` (and theme overrides). Mandatory set: `--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` — plus theme extensions `--font-display`, `--font-base`, `--accent-green`, `--accent-yellow`, `--radius-blob`, `--border-groovy`.\n- Suggested values: `--radius-sm: 8px; --radius-md: 18px; --radius-lg: 32px; --spacing-gap: 1.5rem; --transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.68, -0.55, 0.27, 1.55)` (groovy overshoot); `--z-dropdown: 100; --z-modal: 200; --z-toast: 300`; hard 70s shadows (`--shadow-md: 6px 6px 0 …`) overridden per theme.\n- **Contrast pairing rule:** every light background token pairs with a dark text token and vice versa — enforced in **both** themes, not just the default.\n- Never use `#ffffff`; use `#fefefe` where a near-white is needed.\n\n**1.3 Mandatory Dark Mode**\n- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` **and** a `.dark` class; provide a `.light` class override so an explicit user choice always wins.\n- Include a visible toggle (Material `light_mode`\u002F`dark_mode` icon) with correct `aria-pressed` and `aria-label` state; persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit; switching themes must require zero HTML restructuring.\n- **Exception note:** the source style spec listed dark mode as \"✗ No\" — this is overridden: dark mode is a mandatory deliverable, delivered as the \"Midnight Haze\" variant (§0.2) with polish equal to light mode.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment.\n- Mobile-first: rows convert to columns on small viewports; **zero horizontal scrolling** at any width; fluid `clamp()` sizing throughout.\n\n**1.5 Framework Default**\n- Use Tailwind CSS (CDN) **or** clean custom CSS driven by `@layer`\u002F`@apply`. All utilities must map back to the CSS variables; generic reusable classes `.btn`, `.card`, `.input-group` are required regardless of approach.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Chewy + Quicksand and Material Symbols Rounded via Google Fonts `\u003Clink>` tags in `\u003Chead>`. No other font or icon sources permitted.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n- `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target **44×44px**; Chewy label text; blob-ish radius; optional `--border-groovy`.\n- Variants: `.btn--primary` (orange fill, `#2A0A4A` text), `.btn--secondary` (purple fill, light text), `.btn--ghost` (transparent, groovy border), `.btn--danger` (visually distinct in **both** themes).\n- **Hover:** brightness\u002Fshadow shift plus a playful tilt (e.g., `rotate(-1deg)`); `cursor: pointer`.\n- **Focus:** distinct focus ring via `box-shadow` using `--secondary`; visible for keyboard navigation.\n- **Active:** `transform: scale(0.97)` click feedback.\n- **Loading (`.is-loading`):** blocks pointer events, prevents double-clicks, renders a CSS spinner or animated Material icon **without changing button dimensions**.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (used on form submission).\n\n**2.2 Card Component** (Features, Pricing tiers, Testimonials)\n- **Default:** flexible Flexbox layout, `--bg-secondary` surface, `--border-default` + elevation, blob radius variants.\n- **Hover:** `transform: translateY(-2px)` + shadow shift (hard shadow grows\u002Foffsets).\n- **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** `.card--skeleton` shimmer animation defined in CSS keyframes — layout-stable, `prefers-reduced-motion` safe.\n- **Empty state:** `.empty-state` pattern (Material icon + clear guidance text) defined for any dynamically filtered area.\n\n**2.3 Form & Input Requirements** (Final CTA newsletter form)\n- Structure: `.input-group` flex container wrapping a `\u003Clabel>`, the `\u003Cinput>`, and a **dedicated error feedback element** with `aria-live=\"polite\"`.\n- States: empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border + error icon + message text), disabled, read-only.\n- Validate the email with a regex in `script.js`; feedback is **never color-only** — always icon + text + border together.\n\n**2.4 Modal \u002F Popup Requirements** (newsletter success dialog)\n- States: opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions (scale + fade with `--ease-standard`).\n- Centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard **focus trap**, close via `Esc` or overlay click, focus returns to the trigger, `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`.\n- **Toast:** `.toast` fixed to bottom, stacked above all layers via `--z-toast`, `aria-live` announcement, auto-dismiss, success\u002Ferror variants.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, standard breakpoints, no horizontal overflow anywhere.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; `@media (prefers-reduced-motion: reduce)` disables floats, shimmer, spinners, and tilts (opacity-only fallbacks).\n- **Accessibility (a11y):** ≥ 4.5:1 contrast for body text in **both** themes; never rely solely on color to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, logical heading order); correct ARIA roles\u002Flabels on custom widgets (nav toggle, accordion, modal); logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); a skip-to-content link; `aria-live` regions for form errors, toasts, and loading states.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** any destructive link (e.g., footer \"Unsubscribe\") must be visually distinct in both light and dark themes.\n- **Theme motion:** subtle floating daisies and gentle wavy hover wiggles are encouraged — decorative animation must never block interaction or readability.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, and `script.js`. Exactly **one** `\u003Cscript src=\"script.js\" defer>` — no other inline `\u003Cscript>` blocks.\n- **Naming convention:** BEM consistently across the entire deliverable (`.btn`, `.btn--primary`, `.card`, `.card--featured`, `.hero__title`, `.nav__toggle`, `.faq__summary`…). Never mix conventions.\n- **`\u003Chead>`:** Google Fonts + Material Symbols links, `\u003Cmeta name=\"color-scheme\" content=\"light dark\">`, responsive viewport meta.\n- **No external images:** avatars are initials in gradient circles; all illustration is CSS + Material Symbols.\n- **No unrequested placeholders:** author complete, real, on-theme English copy for every section — lorem ipsum is prohibited; placeholders are allowed only where content was genuinely left unspecified (none expected here).\n- **Complete first attempt:** deliver the full, runnable page in one response — all nine areas built, both themes functional, every component state in §2 implemented. No TODOs, no truncated code, no follow-up dependencies.\n",1791954982161]