[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-701-Exaggerated-Minimalism":3},"# SYSTEM PROMPT — LANDING PAGE BUILD: \"EXAGGERATED MINIMALISM\"\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt — no stubs, no \"coming soon\" blocks, no lorem-ipsum-only sections.\n\n**Objective:** Deliver a single-page marketing site in the **Exaggerated Minimalism** style: ultra-clean, spacious, bold-type, restrained. Loud minimal — oversized typography, extreme negative space, black\u002Fwhite with ONE accent, statement design, 2020s modern. **Full Light mode AND full Dark mode are mandatory and equally polished.**\n\n**Sections (in this order):** Sticky Header (nav + theme toggle) → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ (accordion) → Final CTA → Footer with secondary links.\n\n**Prime directive:** The typography IS the visual. No photos, no illustrations, no gradients, no decorative shapes. Negative space, hairline borders, and one accent color carry the entire design.\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`. **Forbidden:** any `style=\"...\"` attribute, any `\u003Cstyle>` blocks in HTML.\n* All layout, design properties, and states are targeted via class\u002FID selectors only.\n* HTML stays clean and semantic; changing the entire look must require editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (light) and override in dark scope. **Light mode tokens:**\n```css\n:root {\n  \u002F* Palette — black\u002Fwhite + ONE accent *\u002F\n  --bg-primary: #FEFEFE;\n  --bg-secondary: #F4F4F2;\n  --text-primary: #000000;\n  --text-secondary: #454545;\n  --accent: #FF4D00;          \u002F* the ONLY accent hue *\u002F\n  --accent-deep: #C63C00;     \u002F* same hue, darkened — for body-size accent text on light bg (AA) *\u002F\n  --border-default: #E6E6E3;\n  --text-success: #0A7A00;  --text-error: #C0001E;\n  --border-success: #0A7A00; --border-error: #C0001E;\n  \u002F* Shape & depth — theme override: sharp corners, near-zero elevation *\u002F\n  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;\n  --shadow-sm: 0 1px 2px rgb(0 0 0 \u002F 0.04);\n  --shadow-md: 0 4px 12px rgb(0 0 0 \u002F 0.06);\n  \u002F* Spacing & motion *\u002F\n  --spacing-gap: clamp(1.5rem, 4vw, 3rem);\n  --space-section: clamp(8rem, 16vw, 16rem);  \u002F* NEVER below 8rem — massive whitespace is the style *\u002F\n  --transition-fast: 120ms; --transition-normal: 240ms;\n  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n  \u002F* Typography *\u002F\n  --font-base: 'Inter', sans-serif;   \u002F* Google Fonts: 400 \u002F 500 \u002F 700 \u002F 900 *\u002F\n  --display-size: clamp(3rem, 10vw, 12rem);\n  --display-weight: 900;\n  --display-tracking: -0.05em;\n  --display-leading: 0.92;\n  --h2-size: clamp(2.25rem, 6vw, 5.5rem);\n  --body-size: clamp(1rem, 1.1vw, 1.125rem); \u002F* body measure max-width: 36rem *\u002F\n}\n```\n* **Contrast pairing (mandatory in every theme):** light background token pairs with dark text token, dark background token pairs with light text token. Verify pairing in both light and dark.\n* **Dark mode tokens** (under `@media (prefers-color-scheme: dark)` AND `.dark` class): `--bg-primary: #000000; --bg-secondary: #0C0C0C; --text-primary: #FEFEFE; --text-secondary: #A8A8A6; --border-default: #232323; --accent: #FF4D00; --text-success: #4ADE80; --text-error: #FF6B6B; --border-success: #4ADE80; --border-error: #FF6B6B;` (shadows near-invisible in dark scope).\n* **Exception clause (theme conflict):** The source palette lists `#FFFFFF`; per project standard, all near-white surfaces and text use `#FEFEFE`. Pure `#FFFFFF` is permitted only as foreground text on black if a pixel-pure white wordmark is required — never as a background.\n* **Exception clause (shape conflict):** Typical rounded-corner defaults are overridden by this theme: all radius tokens resolve to `0px` (sharp corners). Tokens remain defined for future reuse.\n* **Accent discipline:** `--accent` is used sparingly and only for: one highlighted word per display headline, focus rings, hover\u002Factive borders, the primary CTA button, step numerals, the \"Most popular\" tag, and small index kickers. Body-size accent text on light backgrounds uses `--accent-deep`. No second hue anywhere.\n\n**1.3 Mandatory Dark Mode**\n* Implement via both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`; the class must win over the media query once set.\n* **Persistence:** store the user's choice in `localStorage`; first visit falls back to `prefers-color-scheme`.\n* **No flash of wrong theme:** the ONLY permitted inline script is a ≤5-line bootstrap in `\u003Chead>` that reads storage\u002Fsystem preference and sets `.dark` before first paint. All other JS lives in `script.js` (deferred).\n* **Visible toggle** in the header: an icon button using Google Material Symbols (`dark_mode` \u002F `light_mode`), with correct `aria-pressed` state and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"). Set `color-scheme` appropriately.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox.\n* **Every flex container defaults to `align-items: center`** unless an exception is documented with a CSS comment. Permitted, documented exceptions: text-block interiors and card content columns may use `flex-start` for editorial readability.\n* Mobile-first: grids and rows collapse to single columns on small viewports; **no horizontal scrolling at any width down to 320px** — the display headline must wrap safely (`overflow-wrap: break-word`).\n\n**1.5 Framework**\n* Choose exactly ONE: Tailwind CSS (utilities mapped back to the CSS variables above via arbitrary values or `@layer`\u002F`@apply`) OR hand-authored custom CSS in `style.css` driven by the same tokens. Never mix. Utility classes must map to reusable component classes (`.btn`, `.card`), not ad-hoc one-offs.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Google Fonts** (`\u003Clink>` or `@import`): Inter at 400, 500, 700, 900. Bind to `--font-base`. The 900 weight is the identity of this theme — display headlines must always render at 900.\n* Icons: **Google Material Symbols** (e.g., `arrow_forward`, `check`, `expand_more`, `dark_mode`, `format_quote`). **Forbidden:** raw inline SVGs, local icon files, emoji-as-icons, any other icon library.\n* Canonical display rule (normalize the source spec's invalid `clamp` syntax to the comma-separated form):\n```css\n.hero__title {\n  font-size: var(--display-size);      \u002F* clamp(3rem, 10vw, 12rem) *\u002F\n  font-weight: var(--display-weight);  \u002F* 900 *\u002F\n  letter-spacing: var(--display-tracking); \u002F* -0.05em *\u002F\n  line-height: var(--display-leading);  \u002F* 0.92 *\u002F\n  color: var(--text-primary);\n}\n```\n\n---\n\n## 2. PAGE BLUEPRINT & SECTION-BY-SECTION REQUIREMENTS\n\n**2.1 Sticky Header:** hairline bottom border; text-only wordmark (900 weight, uppercase, tight tracking); anchor nav links (Features, How It Works, Pricing, FAQ) hidden below 768px; theme toggle per §1.3; compact \"Get started\" anchor-CTA. Solid background with backdrop blur; no scroll-shrink gimmicks.\n\n**2.2 Hero:** `min-height: 100svh`, flex-centered; small uppercase kicker above; `h1` at `--display-size` (max 1–4 words, ONE word in accent); subline ≤ 36rem wide; two buttons (primary + ghost). Vertical padding ≥ 8rem. No imagery.\n\n**2.3 Features:** section padding `--space-section`; section header = numbered kicker (\"01 — Features\", accent) + `h2` at `--h2-size`; 3 cards in a grid (1 column mobile → 3 columns ≥1024px). Each card: large Material Symbol in accent, `h3`, short body copy in `--text-secondary`, hairline border, no shadows.\n\n**2.4 How It Works:** 3 steps; oversized numerals `01 \u002F 02 \u002F 03` at `clamp(4rem, 8vw, 8rem)`, weight 900, accent color; each step gets an `h3` and one line of copy; hairline separators; stacked on mobile.\n\n**2.5 Testimonials:** 3 quote cards; quote text at `clamp(1.25rem, 2vw, 1.75rem)` weight 700 with an oversized quotation mark; author in small caps + role in `--text-secondary`. **No avatars, no photos.**\n\n**2.6 Pricing:** 3 tiers in a grid; middle tier highlighted with a 2px accent border and a small uppercase accent tag \"Most popular\" (text label — never color-only); price numerals large and 900; feature lists with small Material `check` icons; each tier one CTA — accent button on the middle tier, ghost buttons on the others; per-period label and fine print in `--text-secondary`.\n\n**2.7 FAQ:** 5–6 items using native `\u003Cdetails>` \u002F `\u003Csummary>` (keyboard-accessible by default); bold summary with trailing Material `expand_more` icon rotating 180° on `[open]`; hairline dividers between items; generous padding; animated open where supported. No JS required; an exclusive-open behavior is optional — if implemented, keep native semantics intact and respect reduced motion.\n\n**2.8 Final CTA:** full-bleed inverted section — light mode: solid black background, `#FEFEFE` text; dark mode: solid `#FEFEFE` background, black text (implement via a `--invert` modifier class that locally swaps bg\u002Ftext tokens). One display-size statement line (ONE accent word) and a single large accent button. Massive padding (`--space-section`).\n\n**2.9 Footer:** top hairline border; columns (stacked on mobile): wordmark + one-line tagline; link groups (Product: Features \u002F Pricing \u002F FAQ — real page anchors; Company and Legal groups: `href=\"#\"` stubs permitted only because those pages are out of scope); icon-only social links using Material Symbols, each with a descriptive `aria-label`; copyright line with current year injected by JS.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons** — base class `.btn` with modifiers `.btn--solid` (token-inverted: black bg \u002F `--bg-primary` text, auto-inverts per theme), `.btn--accent` (accent bg, black text — ≥ 6:1 contrast in both themes), `.btn--ghost` (transparent, 1px border). Base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px touch target; bold, small, uppercase, slightly tracked label.\n* **Hover:** visible shift (invert fill or accent border), `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring via `outline: 3px solid var(--accent); outline-offset: 2px;` for keyboard navigation.\n* **Active:** `transform: scale(0.97)` click feedback.\n* **Loading:** `.btn.is-loading` — `pointer-events: none`, spinner via animated rotating Material `progress_activity` symbol, button dimensions must not change. Define the full state set in CSS even where this static page never triggers it (component must stay reusable).\n* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`.\n* **Success\u002FError:** `.btn.is-success` \u002F `.btn.is-error` feedback classes styled from `--text-success` \u002F `--text-error` tokens.\n* No destructive actions exist in this deliverable; do not add any.\n\n**3.2 Cards** (features, testimonials, pricing tiers)\n* **Default:** flex column, `--bg-secondary`, 1px `--border-default`, `--radius-lg` (0px — sharp), padding `clamp(2rem, 4vw, 3rem)`.\n* **Hover (interactive cards only):** `transform: translateY(-2px)` + border shifts to accent — elevation via borders, NOT shadows.\n* **Focus-within:** border highlights when a child link\u002Fbutton is focused.\n* **Skeleton & Empty:** define `.card--skeleton` (shimmer keyframes, fixed heights to prevent layout jumps) and `.card--empty` (Material Symbol + guidance text) in CSS for reuse, even if unused here.\n\n**3.3 Accordion (FAQ):** states per §2.7 — summary hover (text → `--accent-deep`), `:focus-visible` ring, icon rotation on open, transition timing from `--transition-fast`.\n\n**3.4 Modal:** out of scope — do NOT add a modal or any popup. (If one is ever required later: opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states animated via CSS, centered flex backdrop, Material Icon close button, focus trap, Esc + overlay-click close.)\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` sizing everywhere; zero horizontal overflow at any viewport ≥ 320px; test the hero headline with the longest word.\n* **Smooth animations:** every state change transitions with `var(--transition-fast)` \u002F `var(--transition-normal)`; `@media (prefers-reduced-motion: reduce)` must disable transforms, animations, and `scroll-behavior`.\n* **Accessibility (a11y):** semantic landmarks (`header`, `nav[aria-label]`, `main`, each `section[aria-labelledby]`, `footer`); exactly one `h1` (hero); logical heading order; a visually-hidden-until-focused skip-to-content link; `:focus-visible` on every interactive element; AA contrast in BOTH themes (use `--accent-deep` for body-size accent text on light backgrounds); never rely on color alone to communicate state; icon-only controls always carry `aria-label`; smooth anchor scrolling with `scroll-padding-top` matching header height.\n* **Mandatory visual feedback:** every click, hover, and focus on any interactive element triggers a visible state change.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond (a) the single permitted ≤5-line theme bootstrap in `\u003Chead>` per §1.3 and (b) one deferred `script.js` reference.\n* **Naming:** BEM exclusively and consistently (`.hero__title`, `.card--pricing`, `.btn--accent`, `.faq__summary`…). Never mix conventions, never invent one-off utility names.\n* **Copy:** author original, punchy English copy throughout — invent ONE coherent fictional product and keep every headline, benefit, step, quote, price, and FAQ consistent with it. Headlines are short bold statements; no lorem ipsum anywhere. `href=\"#\"` stubs are permitted only for footer pages genuinely out of scope.\n* **Assets:** no external images, no photos, no illustrations, no inline SVGs, no icon sources other than Google Material Symbols, no fonts other than the specified Google Font.\n* **JS scope:** theme toggle + persistence + no-FOUC bootstrap, current-year stamp, and (optional) an IntersectionObserver adding `.is-visible` for subtle scroll reveals that respect reduced motion. Nothing else — no libraries, no trackers.\n* **Pre-completion QA checklist:** toggle works and persists across reload; both themes pass AA contrast; full keyboard-only pass; no horizontal scroll at 320px; reduced motion honored; zero inline styles; zero inline SVGs; every section from §2 present and fully populated.\n",1791954991453]