[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-561-Soft-Maximalism":3},"# System Prompt: Build a \"Soft Maximalism\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Deliver only `index.html`, `style.css`, and `script.js` — no inline CSS, no inline `\u003Cscript>` blocks beyond a single deferred entry-point reference.\n\n**Theme:** Soft Maximalism — Controlled Chaos, Bold Typography, Scroll-Reactive, Layered Animation (2025–2026 Gen-Z Energy).\n**Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\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`. The `style=\"...\"` attribute is forbidden in HTML.\n* All design properties, layout rules, and states are targeted via class selectors (one consistent convention — BEM or a fixed utility set, never mixed).\n* HTML stays semantic and clean; changing the theme must require editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all tokens in `:root` and theme classes:\n* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Base palette:** Base Black `#0A0A0A`, Off-White `#FAFAFA`, Warm Gray `#2D2D2D`.\n* **Pop accents (one disruptive pop per section):** Pop Magenta `#FF2D6F`, Pop Yellow `#FFE600`, Electric Blue `#3D5AFE`, Lime Green `#76FF03`. Assign each section exactly one pop color used boldly (background block, oversized word, or CTA) against a controlled base — never all pops in one section.\n* **Contrast pairing:** every light background pairs with dark text, every dark background with light text — enforced in both themes. Light mode must not default to pure white; use `#FAFAFA` \u002F `#fefefe` where near-white is needed.\n* **Radius, shadows, spacing, transitions:** `--radius-sm\u002Fmd\u002Flg`, `--shadow-sm\u002Fmd`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent layered-component conflicts.\n\n**1.3 Mandatory Dark Mode**\n* Define dark tokens under `@media (prefers-color-scheme: dark)` AND a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`.\n* Theme toggle in the header: visible button, correct `aria-pressed`\u002F`aria-label`, persists via `localStorage`, falls back to `prefers-color-scheme` on first visit. No HTML restructuring needed to switch.\n* All four pop colors must retain sufficient contrast in both modes (adjust token values per theme if needed).\n\n**1.4 Flexbox Layout & Mobile-First**\n* All layout containers use Flexbox and default to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n* Mobile-first and fully responsive: rows collapse to columns on small viewports, `overflow-x: hidden` globally, no horizontal scrolling at any breakpoint.\n\n**1.5 Framework**\n* Use Tailwind CSS (CDN or build) or clean custom CSS via `@layer`\u002F`@apply`. All utilities must map back to the CSS variables above or generic reusable classes (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Google Fonts via `\u003Clink>`\u002F`@import` — a bold display face (e.g., Archivo Black, Anton, or Space Grotesk 800\u002F900) for headlines bound to `--font-display`, plus a readable body face (Inter or Roboto) bound to `--font-base`.\n* Icons: Google Material Symbols only. Raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. COMPONENT SPECIFICATIONS\n\n**2.1 Buttons**\n* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target.\n* Hover: brightness\u002Fshadow shift + `cursor: pointer`; bold maximalist hover allowed (e.g., `transform: scale(1.05) rotate(-1deg)`).\n* Focus: distinct visible focus ring using CSS variables for keyboard navigation.\n* Active: `transform: scale(0.97)`.\n* Loading: disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon without changing button dimensions.\n* Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* Success\u002FError: temporary feedback states driven by `--text-success` \u002F `--text-error`.\n* `.btn-danger` \u002F destructive actions visually distinct in both themes.\n\n**2.2 Cards (Features, Pricing, Testimonials)**\n* Default: flexible Flexbox layout, `--bg-secondary`, subtle borders, elevation via `--shadow-*`.\n* Hover: `transform: translateY(-2px)` or dramatic scale\u002Frotate consistent with the theme.\n* `:focus-within`: highlighted border when a child link\u002Fbutton gains focus.\n* Loading: skeleton shimmer animation defined in CSS (no layout jumps).\n* Empty state: Google Icon + clear guidance text fallback.\n\n**2.3 Forms (Final CTA email capture, FAQ search if present)**\n* States: empty, focused (outline ring), filled, valid (success border\u002Ficon), invalid (error border, red text, error icon), disabled, read-only.\n* Structure: flex container wrapping label, input, and a dedicated error feedback element with `aria-live=\"polite\"`.\n\n**2.4 FAQ Accordion**\n* Semantic `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-compliant custom disclosure; fully keyboard operable; animated open\u002Fclose via CSS transitions (400–600ms).\n\n---\n\n## 3. CORE UX, A11Y & SOFT-MAXIMALIST MOTION RULES\n\n* **Oversized typography:** Hero and section headlines use `font-size: clamp(3rem, 10vw, 8rem); font-weight: 800–900;` filling up to ~80% of viewport width, breaking traditional margins (negative margins \u002F full-bleed allowed) while remaining readable.\n* **Scroll-reactive layering:** Use `IntersectionObserver` and\u002For CSS scroll-driven animations (`animation-timeline: scroll()`) for reveal, parallax, and rotate\u002Fscale-on-scroll effects. Layered elements may overlap using `mix-blend-mode: difference\u002Fexclusion` for text-over-image\u002Ftext-over-text effects.\n* **Sticky layering:** Use `position: sticky` for layered section transitions where appropriate.\n* **Transitions:** `transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1)` (400–600ms range) with dramatic easing; `scroll-behavior: smooth` for anchor navigation.\n* **Reduced motion:** All animations respect `@media (prefers-reduced-motion: reduce)` — disable parallax, blend-mode flicker, and transforms; keep content fully accessible.\n* **Accessibility:** Sufficient contrast in both Light and Dark modes; never rely on color alone to communicate state; semantic HTML5; correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, FAQ toggles, loading states).\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Usability intact despite chaos:** clear CTAs, readable body text (`--font-base`, ≥16px), logical section flow, skip-to-content link.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js` (deferred entry point only). No inline styles, no inline scripts.\n* **Naming:** one consistent convention across the whole deliverable.\n* **Copy:** Write all user-facing copy in **English** — energetic, youth-focused, Gen-Z tone matching the theme (no lorem ipsum; real labels, headlines, and microcopy for every section listed above).\n* **Content completeness:** All eight sections fully built with real content, correct heading hierarchy, and working anchor navigation from the header.\n* Output the final code immediately, complete on the first attempt.\n",1791954989112]