[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-134-Memphis-Design":3},"# SYSTEM PROMPT — CODING AI BUILD SPECIFICATION\n\n**Project:** Complete \"Memphis Design\" Landing Page — Single-Attempt, Production-Quality Build\n**Output Category:** Retro & Pop (1980s Postmodern)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the full landing page in one attempt. The visual theme is **Memphis Design**: bold geometric shapes (triangles, squiggles, circles), bright clashing colors, playful patterns, dotted textures, asymmetric layouts, and decorative abstract elements — all executed with **pure CSS** (no images, no inline SVGs).\n\n**Fictional Product:** Invent a coherent fictional product (e.g., a playful creative\u002Fdesign SaaS) with a short, punchy brand name fitting the 80s Memphis mood. Write **real, complete English copy** for every section — headlines, subcopy, feature descriptions, testimonial quotes, pricing details, FAQ answers, footer text. Lorem ipsum is prohibited.\n\n**Required Sections (in order):** Sticky Header\u002FNav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials (3 quotes) → Pricing (3 tiers) → FAQ (accordion, 5–6 items) → 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.\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 semantic and clean; restyling the site must require editing only the CSS file.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all tokens in `:root` and override per theme. Map the Memphis palette as follows:\n\n**Light Mode (default):**\n* `--primary: #FF71CE` (Hot Pink), `--secondary: #6A7BB4` (Blue Purple), `--accent-yellow: #FFCE5C`, `--accent-teal: #86CCCA`\n* `--bg-primary: #FEF9F0` (warm cream — never `#ffffff`; where a near-white is unavoidable use `#fefefe`), `--bg-secondary: #FFF6E5`\n* `--text-primary: #221E33`, `--text-secondary: #5A5470`, `--text-success: #0E8A5F`, `--text-error: #D6304C`\n* `--border-default: #221E33` (Memphis uses thick, bold outlines — default borders are 2px solid), `--border-error`, `--border-success`\n\n**Dark Mode:** `--bg-primary: #171233`, `--bg-secondary: #241E52`, `--text-primary: #FEF9F0`, `--text-secondary: #B8B0D9`, `--secondary: #9DB1F0` (lightened for contrast), `--text-success: #4ADE9C`, `--text-error: #FF6B81`, `--border-default: #FEF9F0`.\n\n* **Contrast Pairing:** Every light background token pairs with dark text; every dark background token pairs with light text — enforced in both themes. Accent fills (yellow\u002Fpink\u002Fteal) must always carry `--text-primary` (dark ink) in light mode. Verify 4.5:1 for body text and 3:1 for large display text in both modes.\n* **Radius & Shadows:** `--radius-sm: 0px`, `--radius-md: 4px`, `--radius-lg: 12px` (Memphis is sharp; circles use `border-radius: 50%`). `--shadow-sm` and `--shadow-md` must be **hard offset shadows with zero blur** (e.g., `4px 4px 0` \u002F `8px 8px 0` in accent colors) — 80s poster style, not soft modern shadows.\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1)` (bouncy, playful easing).\n* **Elevation:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n* **Fonts:** `--font-display`, `--font-base` (see 1.6).\n\n### 1.3 Mandatory Dark Mode Support\n* Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`.\n* **Theme Switching:** Background and text variables must swap seamlessly with zero HTML restructuring. If `mix-blend-mode` overlays are used, switch blend values per theme (e.g., `multiply` in light, `screen` in dark) via CSS only.\n* **Persistence:** Store the user's choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Provide a visible toggle in the header using Material Symbols `light_mode`\u002F`dark_mode` icons with correct `aria-pressed` and `aria-label` state.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with **Flexbox** (Tailwind flex utilities). Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified in comments.\n* **Mobile-First:** Rows convert to columns on small viewports; no horizontal scrolling at any width. Decorative Memphis shapes must never cause overflow — clip them with `overflow: hidden` on their section containers.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n* Use Tailwind CSS (CDN) for **layout utilities only** (flex, gap, padding, responsive breakpoints).\n* All Memphis components, shapes, and effects live in `style.css` as reusable BEM classes (`.btn`, `.card`, `.input-group`, `.shape-triangle`, etc.), ideally within `@layer components`. Never mix naming conventions.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load Google Fonts via `\u003Clink>`: **'Archivo Black'** for display headings (`--font-display`) and **'Space Grotesk'** for body text (`--font-base`). Headings are bold, uppercase, and geometric.\n* **Icons:** Use Google Material Symbols (Rounded set) via `\u003Clink>`. **Inline SVGs and local icon files are forbidden.**\n* **Decorative Memphis art must be pure CSS:** triangles via `clip-path: polygon()`, circles via `border-radius: 50%`, squiggles\u002Fzigzags via `repeating-linear-gradient`\u002F`repeating-radial-gradient`, dotted textures via `radial-gradient` pattern backgrounds, tilted elements via `transform: rotate()`, dashed\u002Fdotted accent borders via `border` styles. All decorative layers must be `aria-hidden=\"true\"` and `pointer-events: none`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`)\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; 2px solid `--border-default`; hard offset shadow; bold uppercase label.\n* **Hover:** Shadow offset grows and button translates slightly (`translate(-2px, -2px)`); `cursor: pointer`.\n* **Focus:** Distinct visible ring — 3px `outline` in `--secondary` with 2px offset — must remain visible over patterned backgrounds.\n* **Active\u002FPressed:** `transform: scale(0.97)` and shadow flattens toward the button.\n* **Loading (`.is-loading`):** Disables interaction, prevents double-clicks, renders a CSS spinner (border-top animation) or rotating Material icon without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** Temporary feedback states driven by `--text-success` \u002F `--text-error`, announced via an `aria-live` region.\n* `.btn--danger` must be visually distinct in both light and dark themes.\n\n### 2.2 Card Component (`.card`)\n* **Default:** Flexbox layout, `--bg-secondary` fill, 2px solid `--border-default`, hard offset shadow, and a slight alternating rotation (`-1deg` \u002F `1deg`) for Memphis asymmetry.\n* **Hover:** `transform: translateY(-2px)` with a growing hard shadow (rotation straightens).\n* **Focus-within:** Border color shifts to `--primary` when a child link\u002Fbutton receives focus.\n* **Loading (`.card--skeleton`):** Shimmer keyframe animation defined in CSS that preserves layout dimensions.\n* **Empty State:** Structured fallback with a Material icon and clear guidance text.\n\n### 2.3 Form & Input Requirements (`.input-group`)\n* **Structure:** Flex container wrapping a `\u003Clabel>`, the input field, and a dedicated error feedback element (`\u003Cp>` with `aria-live=\"polite\"`).\n* **States:** Empty, Focused (outline ring), Filled, Valid (success border + `check_circle` Material icon), Invalid (error border, `--text-error` message + `error` icon), Disabled, Read-only. Never communicate state by color alone — always pair with icon and text.\n\n### 2.4 FAQ Accordion & Modal\u002FPopup Requirements\n* **Accordion:** Each item is a `\u003Cbutton aria-expanded aria-controls>` header plus a `\u003Cdiv role=\"region\">` panel; Material `expand_more` icon rotates 180° on open; panel height animates via `var(--transition-normal)`; fully keyboard operable.\n* **Modal (if any dialog is added):** Centered flex container (`align-items: center`), backdrop overlay, Material icon close button, keyboard focus trapping, closing via `Esc` or overlay click, and animated opening\u002Fclosing states.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing, standard breakpoints, zero horizontal overflow.\n* **Smooth Animations:** CSS transitions on all state changes; decorative shapes may gently float\u002Fbob (6–10s loops) and icon badges may rotate on hover. **All motion must be disabled under `prefers-reduced-motion`.**\n* **Accessibility (a11y):** Sufficient contrast in both modes; semantic HTML5; correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, success, and loading; a skip-to-content link; decorative shapes marked `aria-hidden=\"true\"`.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive\u002FDistinct Actions:** `.btn--danger` visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond one deferred `script.js` reference.\n* **Naming:** BEM throughout all custom classes; Tailwind utilities for layout only; never mix conventions.\n* **No Unrequested Placeholders:** All copy is real and themed; `href=\"#\"` is permitted only for footer\u002Fsocial links with no real target.\n* **script.js must implement:** theme toggle (localStorage + `prefers-color-scheme` fallback + `aria-pressed` sync), FAQ accordion logic, email validation (regex, blur + submit, `aria-live` error, simulated loading → success button state), smooth anchor scrolling, and IntersectionObserver reveal animations (reduced-motion aware).\n\n---\n\n## 5. SECTION-BY-SECTION BUILD SPEC\n\n### 5.0 Header (Sticky)\nFlex row: text logo with a small CSS shape mark, nav links, theme toggle, CTA button. Solid `--bg-primary` with a 2px bottom border. On mobile, nav links collapse into a JS-toggled menu (`aria-expanded`\u002F`aria-controls`). Nav links get a squiggle underline on hover (repeating-gradient) and visible focus rings.\n\n### 5.1 Hero\nAsymmetric flex layout: left column with a display-font headline (key words highlighted with a `--accent-yellow` marker background via a CSS class), subcopy, and two CTAs (`.btn--primary` + `.btn--ghost`); right column with a pure-CSS Memphis collage (rotated `clip-path` triangles, circles, squiggles, a dotted-pattern panel). Background uses layered low-opacity repeating dot\u002Fconfetti patterns. Floating shapes animate subtly. Stacks to a single column on mobile.\n\n### 5.2 Features — 3 Cards\nThree `.card` blocks, each with a unique accent (pink \u002F yellow \u002F teal): a Material icon inside a geometric badge (rotated square, circle, and `clip-path` triangle respectively), a title, and real descriptive copy. Hover\u002Ffocus-within per §2.2.\n\n### 5.3 How It Works — 3 Steps\nNumbered steps with large display-font numerals inside accent shapes, connected by a dashed\u002Fsquiggle CSS connector (horizontal on desktop, vertical or hidden on mobile). Alternate slight rotations on desktop only.\n\n### 5.4 Testimonials — 3 Cards\nEach card: quote, CSS-generated initials avatar (accent-colored circle or rotated square with initials), name, role, and a 5-star rating using Material `star` icons plus visually-hidden text (\"Rated 5 out of 5\"). Alternate rotations; straighten on hover.\n\n### 5.5 Pricing — 3 Tiers\nMiddle tier is featured: elevated, thicker border, larger hard shadow, and a rotated \"MOST POPULAR\" badge. Prices in `--font-display`; feature lists with Material `check_circle` icons; each tier gets a CTA (featured uses `.btn--primary`, others `.btn--ghost`).\n\n### 5.6 FAQ\nAccordion per §2.4 with 5–6 real questions and answers about the fictional product.\n\n### 5.7 Final CTA\nFull-width band with a bold pattern background and a `mix-blend-mode` overlay (kept below content legibility). Display headline plus an email capture form per §2.3: submit button shows loading → success state with an `aria-live` confirmation message.\n\n### 5.8 Footer\nFlex\u002Fgrid layout: brand block, 2–3 columns of secondary links, social icons (Material Symbols inside bordered circles), and a copyright line. 2px top border; all links have hover and focus states.\n",1791954982126]