[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-405-Memphis":3},"# CODING AI PROMPT — Memphis-Style Landing Page (Full Build, First Attempt)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-ready, single-page landing page in the **Memphis** style (1980s Memphis Group: vibrant, geometric, bold, postmodern, playful, anti-minimalist) on the **first attempt**. No drafts, no partial output — deliver the full final code.\n\n**Objective:** A landing page with the following sections: **Sticky Header (with theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), Final CTA (with email capture form), Footer (with secondary links).**\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. All styling lives in `style.css`.\n* **Class\u002FID Selectors Only:** Every design property, layout rule, and state must be targeted via class or ID selectors.\n* **Minimal HTML Modifications:** HTML must remain semantic and style-agnostic. Reskinning the page must only require editing `style.css`. Decorative Memphis shapes are positioned\u002Fstyled exclusively via CSS classes and pseudo-elements (`::before`\u002F`::after`) — never via inline styles or presentational attributes.\n\n### 1.2 CSS Variables (`var(--...)`) & Theme Tokens\nStore **all** visual tokens in `:root` and override them in the dark theme. Mandatory tokens:\n\n* **Brand Colors:** `--primary: #FF1493` (hot pink), `--secondary: #0066FF` (electric blue), `--accent-yellow: #FFD700`, `--accent-red: #FF3333`, `--mint: #00E5A0`, `--coral: #FF7F50`, `--purple: #9B59B6`, `--turquoise: #1ABC9C`.\n* **Surfaces:** `--bg-primary: #FEFEFE` (**never `#FFFFFF`** — the light background must be `#FEFEFE` with CSS pattern overlays), `--bg-secondary` (card\u002Fpanel surface).\n* **Text:** `--text-primary`, `--text-secondary`, `--text-success` (map to `--mint`), `--text-error` (map to `--accent-red`).\n* **Borders:** `--border-default` (3px solid, per the Memphis spec) driven by `--border-color`; `--border-error`, `--border-success`.\n* **Contrast Pairing (mandatory, both themes):** Light backgrounds pair with dark text; dark backgrounds pair with light text. Specifically: hot pink, yellow, mint, coral, and red fills must pair with near-black text (`#111111`-family) for AA contrast; electric blue (`#0066FF`) pairs with white text. **Never** place yellow text on light backgrounds or white text on hot pink\u002Fyellow fills for body-size copy.\n* **Radius:** `--radius-sm`, `--radius-md`, `--radius-lg` all set to `0px` (Memphis = sharp corners); `--radius-circle: 50%` reserved for circles, icon tiles, and avatar dots.\n* **Shadows (Memphis signature — hard offset, zero blur):** `--shadow-sm: 4px 4px 0 var(--shadow-color)`, `--shadow-md: 8px 8px 0 var(--shadow-color)`, where `--shadow-color` is near-black in light mode and a bright accent in dark mode. No soft\u002Fblurred drop shadows anywhere.\n* **Spacing & Motion:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard`, plus `--rotate-decor: 6deg` and `--rotate-hover: 3deg` for playful rotation.\n* **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent stacking conflicts.\n\n### 1.3 Mandatory Dark Mode Support (Full)\n* **Implementation:** Define the full dark palette under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. Dark mode is a **full** reskin: deep navy\u002Fpurple background (e.g., `#16162A`-family), light text (`#FEFEFE`-family), borders and hard shadows switching to bright accent colors so the geometric shapes keep popping.\n* **Theme Switching:** Background and text tokens must flip via CSS variables only — zero HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and expose a **visible toggle button** in the header (Google Material Symbol `dark_mode`\u002F`light_mode`) with correct `aria-pressed` and `aria-label` state, updated by `script.js`.\n* **Contrast:** Every token pairing must pass WCAG AA in **both** light and dark modes.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with **Flexbox** (`display: flex` \u002F Tailwind flex utilities).\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n* **Mobile-Friendly First:** All rows (feature cards, pricing tiers, steps, footer columns) collapse to columns on small viewports. **No horizontal scrolling at any breakpoint.** Decorative absolute-positioned shapes must never cause overflow — clip them within their section (`overflow: hidden` on decorated sections).\n\n### 1.5 Framework Default & Tailwind CSS Integration\n* Use **Tailwind CSS** (or clean custom CSS organized in Tailwind's `@layer` with `@apply`) unless another framework is requested.\n* All utility values must map back to the CSS variables above — **no raw hex values in markup or utilities**. Reusable component classes (`.btn`, `.card`, `.input-group`, `.accordion__item`) must exist as single-source definitions.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Poppins** from Google Fonts via `\u003Clink>` (weights 400;600;700;800;900). Headings and display text use **700–900** weights per the Memphis spec; body copy may use 400\u002F600 for readability. Bind via `--font-base: 'Poppins', sans-serif`.\n* **Icons:** Use **Google Material Symbols** (Rounded style) for every icon (features, stars, checks, chevrons, social, theme toggle). Raw inline `\u003Csvg>` icons and local icon files are **forbidden**.\n* **Squiggle Exception Clause:** The Memphis spec calls for squiggly\u002Fzigzag borders via SVG — implement these **CSS-only** (repeating gradients, `border-image`, `clip-path: polygon()`) or as SVG **data-URIs inside `style.css` backgrounds**; never as inline `\u003Csvg>` markup in the HTML. This exception applies to decorative squiggles only — icons remain Google Material Symbols exclusively.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\nStyle all states via CSS classes (`.btn` + BEM variants: `.btn--primary`, `.btn--secondary`, `.btn--outline`, `.btn--danger`):\n\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target **44×44px**. Memphis treatment: 3px solid border, hard offset shadow (`--shadow-sm`), sharp corners, bold 700+ text.\n* **Hover:** `cursor: pointer`; translate `(-2px, -2px)` with the shadow growing to `--shadow-md` and a subtle `rotate(var(--rotate-hover))` tilt. Brightness must not break contrast.\n* **Focus:** Distinct, thick focus ring (offset `outline` or `box-shadow` using `--secondary`) for keyboard navigation — visible in both themes.\n* **Active\u002FPressed:** `transform: scale(0.97)` with the shadow collapsing to `0` (button \"stamps\" down).\n* **Loading:** Disables interaction, prevents double-clicks, and renders a CSS spinner or animated Google Material Symbol (`progress`\u002F`sync` with a CSS rotation animation) **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no shadow shift.\n* **Success\u002FError:** Temporary feedback styles driven by `--text-success` \u002F `--text-error` tokens (e.g., the Final CTA submit flips to a mint success state with a `check_circle` icon).\n* **Danger:** `.btn--danger` uses vivid red `#FF3333` with near-black text, visually distinct in **both** themes.\n\n### 2.2 Card Component Requirements\nApplies to Feature cards, Testimonial cards, and Pricing tiers (`.card`):\n\n* **Default:** Flexbox column layout, `--bg-secondary` surface, 3px solid border, `--shadow-sm`, `--radius-md` (0px).\n* **Hover:** `transform: translateY(-2px)` plus a subtle tilt up to `3deg` maximum (playful but usable); shadow grows to `--shadow-md`. Decorative corner shapes on cards may rotate the full **5–15deg** on hover.\n* **Focus-within:** Card border shifts to `--secondary` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define shimmer animation classes in CSS (gradient sweep) so any async content slot never causes layout jumps.\n* **Empty State:** Define a reusable fallback pattern — large Google Material Symbol + short guidance text — available if any dynamic slot renders nothing.\n\n### 2.3 Form & Input Requirements (Final CTA email capture)\n* **States — all styled:** Empty, Focused (thick accent outline ring), Filled, Valid (mint border + `check_circle` icon), Invalid (`--border-error`, red helper text + `error` icon), Disabled, Read-only.\n* **Structure:** `.input-group` as a flex container wrapping: `\u003Clabel>`, the `\u003Cinput>`, and a dedicated error feedback element with `aria-live=\"polite\"`. Errors must be communicated by text + icon, **never color alone**.\n\n### 2.4 FAQ Accordion (Custom Widget) & Overlay Rules\n* **Accordion:** Each FAQ item = a `\u003Cbutton>` (with `aria-expanded` and `aria-controls`) + a content region (`role=\"region\"`, `aria-labelledby`). The chevron (Material Symbol `expand_more`) rotates 180° via CSS transition. Open\u002Fclose animated in pure CSS (e.g., `grid-template-rows: 0fr → 1fr`). Fully keyboard operable; no mouse-only interactions.\n* **Modals:** Not required for this page. If any overlay is introduced (e.g., a mobile menu panel), it must follow modal rules: backdrop, `Esc` to close, overlay-click close, focus trapping, and animated open\u002Fclose via CSS transitions.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES (Memphis Motion Language)\n\n* **Responsive by Default:** Fluid type and spacing; no horizontal overflow at any width.\n* **Memphis Motion:** Apply pop-in entrance animations (`scale(0.9) rotate(-4deg) → scale(1) rotate(0)` with a slight overshoot ease) to sections and cards on scroll-in, staggered floating\u002Fwobble on decorative shapes, and **5–15deg playful rotation on hover for decorative geometric elements** (buttons\u002Fcards cap at 3deg for usability). All motion uses `transition: var(--transition-normal)` and **must be fully disabled under `prefers-reduced-motion`**.\n* **Accessibility (a11y):** WCAG AA contrast in both themes; never rely on color alone for state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); correct ARIA on the accordion, theme toggle, and any custom widget; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form feedback. All decorative shapes: `aria-hidden=\"true\"`, `pointer-events: none`, and layered below content via z-index tokens.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** Any delete\u002Fdanger action is visually distinct in both themes via `.btn--danger`.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Three separate files — `index.html`, `style.css`, `script.js`. The HTML contains exactly **one** `\u003Cscript>` tag, `defer`-red, pointing at `script.js`. No inline `\u003Cscript>` blocks, no inline styles.\n* **Naming Convention:** **BEM** (`block__element--modifier`) exclusively across HTML classes and CSS. Never mix conventions.\n* **Copy:** Write all user-facing copy in **English** with an energetic, fun, bold Memphis brand voice. Invent a coherent fictional brand (product name, tagline, feature names, testimonial personas, pricing plan names, FAQ questions). **No lorem ipsum** — every section ships with real, themed copy.\n\n---\n\n## 5. PAGE BUILD SPEC — SECTION BY SECTION\n\n1. **Sticky Header:** Brand wordmark (two-tone Poppins 900), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), the **dark-mode toggle** (per 1.3), and a hamburger (Material Symbol `menu`) that opens a keyboard-accessible slide-down panel on mobile.\n2. **Hero:** Dotted-pattern background (CSS `radial-gradient` repeat) plus scattered decorations — CSS triangles (`clip-path: polygon()`), circles (`border-radius: 50%`), zigzag strips, and squiggles (per the 1.6 exception) — all `aria-hidden`. Oversized Poppins 900 headline with per-word accent colors applied via classes, subheadline, two CTAs (`.btn--primary` + `.btn--outline`), and a rotated \"sticker\" badge. Staggered pop-in on load.\n3. **Features (3 cards):** Section heading with a squiggle underline; three `.card`s, each with a rotated colored icon tile (Material Symbol), title, and description — each card using a different palette accent (pink \u002F blue \u002F yellow family).\n4. **How It Works (3 steps):** Three numbered circles (thick borders, alternating accent colors) connected by a dashed\u002Fzigzag CSS line; step title + text; vertical stack on mobile.\n5. **Testimonials:** Three quote cards with star ratings (Material Symbol `star`, plus `aria-label=\"Rated 5 out of 5\"`), quote, avatar rendered as a CSS accent-colored circle with bold initials (**no external images**), name and role. Alternating accent borders.\n6. **Pricing (3 tiers):** Three `.card`s; the middle tier is the highlighted plan with a rotated hot-pink \"MOST POPULAR\" sticker badge, distinct background, and slight scale\u002Felevation. Each tier: plan name, large price, feature list with `check` icons, and a full-state `.btn` CTA (popular tier uses `.btn--primary`, others `.btn--outline`).\n7. **FAQ:** Accordion per **2.4** — 5–6 real Q&A items, thick-bordered, chevron rotation, animated expansion.\n8. **Final CTA:** Full-width bold band (electric blue or hot pink fill with a subtle pattern overlay, correct text pairing per 1.2), headline, and the email capture form per **2.3** with client-side validation, a simulated loading state (~1s), and a success state announced via `aria-live`.\n9. **Footer:** Contrasting band; brand + tagline, 2–3 secondary link columns (Product \u002F Company \u002F Support), social icon buttons (Material Symbols with focus rings), and a copyright line. Link hover: accent color shift + underline.\n\n---\n\n## 6. JAVASCRIPT REQUIREMENTS (`script.js` only)\n\n* **Theme toggle:** Read `localStorage` → fall back to `prefers-color-scheme` → toggle `.dark` on `\u003Chtml>`, swap the Material Symbol, and sync `aria-pressed`\u002F`aria-label`.\n* **Accordion:** Toggle `aria-expanded` and the open class per FAQ item.\n* **Reveal animations:** `IntersectionObserver` adds an `.is-visible` class for pop-ins; fully skipped when `prefers-reduced-motion` is set.\n* **Form:** Validate the email (regex), render valid\u002Finvalid states per 2.3, simulate submit loading → success with `aria-live` announcement.\n* **Navigation:** Smooth anchor scrolling (respecting reduced motion) and the mobile menu panel toggle.\n* No other JavaScript. No external JS libraries. Keep the script minimal, commented, and organized by feature.\n\n**Output the complete final code for `index.html`, `style.css`, and `script.js` now — fully styled, fully responsive, dark-mode-ready, accessible, and true to the Memphis aesthetic — in a single response.**\n",1791954986221]