[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-412-Normcore":3},"# CODING-AGENT PROMPT — \"NORMCORE\" LANDING PAGE (COMPLETE BUILD, FIRST ATTEMPT)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt. Generate the final code immediately, following every rule in this document. Do not ask clarifying questions — where copy is unspecified, write it yourself in the voice defined in Section 0.5.\n\n**Objective:** A single-page marketing site themed **Normcore**, containing, in order: Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 0. THEME DIRECTION — NORMCORE\n\n**0.1 Definition:** Anti-fashion minimalism. Era: 2013–present. Keywords: neutral, generic, unbranded plainness, beige\u002Fgray\u002Fdenim ordinariness, anti-trend, blends in, comfort over statement.\n\n**0.2 The Signature Move:** The deliberate **absence** of a signature move. Flat beige\u002Fgray surfaces, a plain 1px rule (`--plain-rule`), and exactly one muted denim accent line (`--generic-accent-line`) reused sparingly on the nav and inputs. Anything more would read as a \"look,\" which Normcore rejects.\n\n**0.3 Forbidden:** Gradients, glassmorphism, glow\u002Fneon, expressive display typefaces, large transforms, decorative illustrations, emoji in UI copy, star ratings, avatar photos, brand flourishes, and any effect that draws attention to itself.\n\n**0.4 Comfort Over Statement:** Generous whitespace, readable line lengths (max ~65ch per paragraph), comfortable touch targets, barely-there shadows.\n\n**0.5 Copy Direction:** All user-facing copy in plain, understated **English**. Hype-free, plain-spoken, generic-utilitarian tone (e.g., \"It works. That's the pitch.\"). Invent a deliberately generic, unbranded product concept (e.g., a no-frills notes or task utility) with a plain one-word name. No lorem ipsum anywhere.\n\n**0.6 Canonical Reference:** The token sheet in §1.2 is the canonical reference specification (`references\u002F00-flagship-implementation-specs\u002Fnormcore.md`). Reproduce it faithfully as the foundation of `style.css`, with all comments in English.\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. No inline `\u003Cstyle>` blocks.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML stays clean, semantic, and style-agnostic. Changing the site's look must require editing only the CSS file, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all tokens in `:root` and override per theme. Reproduce this canonical sheet (extend, never rename):\n\n```css\n:root {\n  color-scheme: light;\n  \u002F* color — light theme (default) *\u002F\n  --color-bg: #e9e7e2;\n  --color-surface: #f5f4f1;\n  --color-surface-strong: #dcdad4;\n  --color-border: #b8b5ad;\n  --color-text: #2f2e2b;\n  --color-text-muted: #6a6862;\n  --color-primary: #4a5568;\n  --color-accent: #7c8a99;\n  --color-denim: #5c7189;\n  \u002F* mandatory semantic aliases *\u002F\n  --primary: var(--color-primary);\n  --secondary: var(--color-accent);\n  --bg-primary: var(--color-bg);\n  --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text);\n  --text-secondary: var(--color-text-muted);\n  --border-default: var(--color-border);\n  --text-success: #4d6b54;\n  --text-error: #a34d42;\n  --border-success: #4d6b54;\n  --border-error: #a34d42;\n  \u002F* radius: nothing special, off-the-shelf default corners *\u002F\n  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px;\n  \u002F* shadow: barely there, no statement *\u002F\n  --shadow-sm: 0 1px 2px rgba(47,46,43,0.08);\n  --shadow-md: 0 2px 6px rgba(47,46,43,0.1);\n  --shadow-lg: 0 6px 14px rgba(47,46,43,0.12);\n  \u002F* font — Roboto (Google Fonts) with the generic system stack behind it, on purpose *\u002F\n  --font-base: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\n  --font-sans: var(--font-base);\n  --font-display: var(--font-base);\n  --font-mono: ui-monospace, 'Courier New', monospace;\n  \u002F* text scale *\u002F\n  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3.25rem;\n  \u002F* space *\u002F\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;\n  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --spacing-gap: var(--space-4);\n  \u002F* transitions *\u002F\n  --ease-standard: ease;\n  --transition-fast: 140ms var(--ease-standard);\n  --transition-normal: 240ms var(--ease-standard);\n  \u002F* elevation *\u002F\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n  \u002F* the \"signature move\": the absence of one *\u002F\n  --plain-rule: 1px solid var(--color-border);\n  --generic-accent-line: 2px solid var(--color-denim);\n}\n\n\u002F* Dark theme — same tokens, inverted, contrast pairing preserved *\u002F\n.dark {\n  color-scheme: dark;\n  --color-bg: #262522;\n  --color-surface: #31302c;\n  --color-surface-strong: #3d3b36;\n  --color-border: #55534b;\n  --color-text: #e9e7e2;\n  --color-text-muted: #a09d94;\n  --color-primary: #8f9db0;\n  --color-accent: #a4b2c1;\n  --color-denim: #89a0ba;\n  --text-success: #8fae96; --text-error: #d08a80;\n  --border-success: #8fae96; --border-error: #d08a80;\n  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);\n  --shadow-md: 0 2px 6px rgba(0,0,0,0.4);\n  --shadow-lg: 0 6px 14px rgba(0,0,0,0.45);\n}\n@media (prefers-color-scheme: dark) {\n  :root:not(.light) { \u002F* identical overrides as .dark *\u002F }\n}\n```\n\n* **Contrast Pairing (mandatory in every theme):** Light backgrounds pair with dark text; dark backgrounds pair with light text. In dark mode, `.btn--primary` must override to `background: var(--color-denim); color: #262522;` (lightened denim + dark text) to preserve pairing.\n* **No Pure White:** Never use `#ffffff`. The theme's near-white is `#f5f4f1`; if a brighter white is ever unavoidable, use `#fefefe`.\n* **Base components:** Adopt the canonical base classes verbatim (comments translated to English): `body`, `.nav` (flex, gap `--space-4`, surface background, `border-bottom: var(--plain-rule)`, `border-top: var(--generic-accent-line)`), `.btn` (+ `:hover`, `:active`, `:focus-visible`, `[disabled]`, `--primary`), `.card`, `.input` (+ `::placeholder`, `:focus`), `.badge`, and the reduced-motion guard. Extend them per Sections 2–3; do not restyle them into a \"look.\"\n\n**1.3 Mandatory Dark Mode Support**\n* Dark mode **must** be defined: tokens under both `@media (prefers-color-scheme: dark)` (guarded by `:root:not(.light)`, so no-JS users get their system theme with no flash) and a `.dark` class on `\u003Chtml>`.\n* **Theme Switching:** Background and text variables must switch seamlessly with zero HTML restructuring.\n* **Persistence:** Store the choice in `localStorage` (key `theme`: `'light'` or `'dark'`); fall back to `prefers-color-scheme` on first visit. Provide a **visible toggle button in the nav** on all viewports: `\u003Cbutton class=\"btn btn--theme\">` with a Google Material Symbol (`dark_mode` \u002F `light_mode`), `aria-pressed=\"true\"` when dark mode is active, and `aria-label=\"Toggle dark theme\"`. `script.js` applies the stored class on load, flips it on click, and syncs `aria-pressed`, `aria-label`, and the icon ligature.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox.\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., pricing cards use `align-items: stretch` for equal heights; card interiors use `flex-direction: column` with `align-items: flex-start` for text blocks).\n* **Mobile-Friendly First:** Rows convert to columns below 768px (stack earlier below 640px where content demands). No horizontal scrolling at any viewport down to 320px. Fluid type via `clamp()` where the scale jumps.\n\n**1.5 Styling Approach & Naming Convention**\n* Use **clean, hand-written custom CSS** extending the canonical token sheet — no frameworks, no build step, no utility-class soup. Every class must be a generic, reusable component class mapped to the tokens (`.btn`, `.card`, `.input-group`).\n* **One Convention Only:** BEM (`block__element--modifier`), consistent with the canonical `.btn--primary` pattern. Never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Load **Roboto** (weights 400, 500) from Google Fonts via `\u003Clink>` with `preconnect`, and bind it to `--font-base` with the generic system stack as fallback. **Exception clause:** the Normcore spec demands \"the most generic system stack available, on purpose\" — Roboto is the one Google Font that satisfies both the Google Fonts requirement and the generic-utilitarian aesthetic; loading any expressive or display Google Font is forbidden.\n* **Icons:** Use **Google Material Symbols (Outlined)** via the Google Fonts link for every icon (e.g., `menu`, `close`, `check`, `expand_more`, `dark_mode`, `light_mode`, `error`, `check_circle`). Raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Base per canonical sheet: 500-weight `--text-base`, padding `--space-3 --space-6`, `--radius-md`, surface background, `--plain-rule` border, `--shadow-sm`, `cursor: pointer`.\n* **Hover:** Background shifts to `--color-surface-strong` and shadow to `--shadow-md`. No color statements.\n* **Focus:** `:focus-visible` ring via `outline: 2px solid var(--color-accent); outline-offset: 2px;` for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)` with shadow back to `--shadow-sm`.\n* **Loading (`.is-loading` + `disabled`):** Blocks pointer events to prevent double-clicks; hides the label with `visibility: hidden` and renders an absolutely-centered CSS spinner (`border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;` spinning) so button dimensions never change.\n* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`, no hover\u002Factive effects.\n* **Success\u002FError:** `.is-success` (success border + `check_circle` icon + `--text-success`) and `.is-error` (error border + `error` icon + `--text-error`) as temporary feedback states, driven by the CSS variables.\n* **Variants:** `.btn` (default), `.btn--primary` (denim background, `#f5f4f1` text; dark-mode override per §1.2), and `.btn--danger` (muted brick `#a34d42` background, light text, visually distinct in both themes) — define `.btn--danger` even though no destructive action exists in the specified sections.\n\n**2.2 Card**\n* **Default:** Flex column, `--bg-secondary` surface, `--plain-rule` border, `--radius-lg`, `--shadow-sm`, padding `--space-6`.\n* **Hover:** Shadow shifts to `--shadow-md` only. No `translateY` — movement reads as a \"look,\" which Normcore rejects.\n* **Focus-within:** Border color shifts to `--color-accent` when a child link\u002Fbutton receives focus (define the rule; apply if any card contains a focusable child).\n* **Loading (Skeleton):** Define `.skeleton` in CSS with a plain opacity-pulse animation (no gradient shimmer — gradients are forbidden) to prevent layout jumps; apply to any asynchronously rendered content.\n* **Empty State:** Define a `.card--empty` fallback layout: a muted Google Material Symbol, one line of plain guidance text, centered.\n\n**2.3 Form & Input**\n* **States:** Empty; Focused (accent border + `box-shadow: 0 0 0 3px rgba(124,138,153,0.25)` per canonical sheet); Filled; Valid (`.input--valid`: success border + `check` icon); Invalid (`.input--invalid`: `--border-error` border, the `--generic-accent-line` left border recolored to `--border-error`, error icon, red message text via `--text-error`); Disabled; Read-only.\n* **Structure:** `.input-group` flex container wrapping a visible `\u003Clabel>`, the `.input` field (min height 44px, `--generic-accent-line` left border per canonical sheet), and a dedicated error feedback element `\u003Cp class=\"input-group__error\" aria-live=\"polite\">` referenced by the input's `aria-describedby`. Never placeholder-only labels. Never communicate errors by color alone — icon + text + border.\n\n**2.4 Modal \u002F Popup (Conditional)**\n* The specified sections require **no modal** — do not add one. If an overlay ever becomes necessary, it must have: animated Opening\u002FOpen\u002FLoading\u002FSuccess\u002FError\u002FClosing states via CSS transitions; a centered flex container (`align-items: center; justify-content: center`); a dimmed backdrop at `--z-modal`; a Google Material Symbol close button; keyboard focus trapping; `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; close via `Esc` and overlay click; body scroll lock.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing, breakpoints at 640\u002F768\u002F1024px, zero horizontal overflow (test at 320px). `html { scroll-behavior: smooth; }` for anchor navigation.\n* **Smooth Animations:** All state changes transition via `var(--transition-fast)` (micro) or `var(--transition-normal)` (panels, accordion). Respect `prefers-reduced-motion: reduce` with a global animation\u002Ftransition\u002Fscroll-behavior kill switch.\n* **Accessibility (a11y):** WCAG AA contrast in **both** light and dark modes (≥4.5:1 body text, ≥3:1 large text and UI borders — verify the muted tokens in both themes). Never rely on color alone for state. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), one `h1`, logical heading order, a \"Skip to content\" link as the first focusable element, visible `:focus-visible` rings everywhere, full keyboard operability (no mouse-only interactions), and `aria-live` regions for dynamic feedback (form errors, loading, success).\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** `.btn--danger` must be visually distinct in both themes (defined per §2.1).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, `script.js`. The only script reference is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No other inline `\u003Cscript>` blocks. All Google Fonts links (`Roboto` + Material Symbols) in `\u003Chead>` with `preconnect`. `lang=\"en\"`, meta viewport, plain meta description, plain `\u003Ctitle>`.\n* **Naming Convention:** BEM only, across the entire deliverable.\n* **No Unrequested Placeholders:** The user supplied no copy, so write complete, real English copy in the Normcore voice (§0.5). Lorem ipsum, emoji, and TODO stubs are forbidden.\n* **script.js Scope (vanilla JS only, no libraries):** (a) theme toggle + `localStorage` persistence + ARIA\u002Ficon sync; (b) mobile nav menu toggle; (c) Final CTA form validation with loading → success simulation. Nothing else.\n\n---\n\n## 5. PAGE SECTION BUILD SHEET\n\n**5.1 Header\u002FNav:** Sticky `\u003Cheader class=\"nav\">` per the canonical sheet (surface background, `--plain-rule` bottom, `--generic-accent-line` top). Plain-text wordmark (500 weight, no logo icon), anchor links (Features, How it works, Pricing, FAQ) with underline on hover\u002Ffocus, theme toggle (§1.3), and a `.btn--primary` \"Get started\" CTA. Below 768px, links collapse into a `.nav__menu` panel toggled by a `.nav__toggle` button (Material `menu`\u002F`close`): `aria-expanded`, `aria-controls`, Escape closes and returns focus, panel uses `--z-dropdown`, links close the menu on activation.\n\n**5.2 Hero:** `.badge` with a plain line (\"No account needed\"), `\u003Ch1>` at `clamp(--text-3xl, --text-5xl)` and 500 weight (max ~20 words, plain promise), `--text-secondary` subcopy at `--text-lg` (max 65ch), and a CTA row: `.btn--primary` \"Get started\" + `.btn` \"How it works\" (flex, gap `--spacing-gap`, wrapping to full-width column below 640px). Optional plain photograph or solid `--color-surface-strong` block with `--plain-rule` border and real alt text — no gradients or illustration.\n\n**5.3 Features (3 cards):** `\u003Csection id=\"features\">` with plain `\u003Ch2>` and one muted intro line. `.features__grid`: flex, wrap, gap `--space-6`; three `.card`s (`flex: 1 1 280px`), each with a muted Material Symbol, `\u003Ch3>`, and a plain description. Card states per §2.2.\n\n**5.4 How It Works (3 steps):** `\u003Csection id=\"how-it-works\">`. `.steps` flex row (column on mobile), three `.step`s separated by `--plain-rule` (inline-start borders on desktop, top borders on mobile). Each step: a `01 \u002F 02 \u002F 03` numeral in `--font-mono` and `--text-secondary`, an `\u003Ch3>`, and a plain description.\n\n**5.5 Testimonials:** Three `\u003Cfigure class=\"card\">` blocks in a flex-wrap grid: `\u003Cblockquote>\u003Cp>` quote at `--text-lg`, `\u003Cfigcaption>` attribution in `--text-sm`\u002F`--text-secondary` (\"— Dana, customer since 2021\"). Generic first names only. No star ratings, no photos; an optional plain initials disc on `--color-surface-strong` is allowed.\n\n**5.6 Pricing (3 tiers):** `\u003Csection id=\"pricing\">` with plain `\u003Ch2>` and sub-line (\"Plain prices. Cancel whenever.\"). Flex-wrap grid of three `.card--tier`s (documented `align-items: stretch` exception; inner flex column with `margin-top: auto` on the CTA for equal heights). Tiers named **Basic \u002F Standard \u002F Pro** with plain integer prices ($0 \u002F $8 \u002F $15 per month). The middle tier is `.card--featured`: `--generic-accent-line` top border + `.badge` \"Most common\" — no other highlight. Each tier: `\u003Ch3>`, price line, `\u003Cul>` of plain features with Material `check` icons, and a CTA (featured: `.btn--primary`; others: `.btn`) linking to `#cta`.\n\n**5.7 FAQ:** `\u003Csection id=\"faq\">` with 4–6 **native** `\u003Cdetails class=\"faq__item\">` (no JS accordion). Each `\u003Csummary>` wraps an `\u003Ch3>` question plus a Material `expand_more` icon that rotates 180° via `details[open]` with `var(--transition-fast)`. Items separated by `--plain-rule`; summary has comfortable padding, `cursor: pointer`, hover surface shift, and `:focus-visible` ring. Native keyboard\u002Fscreen-reader behavior must remain intact.\n\n**5.8 Final CTA:** `\u003Csection id=\"cta\">`, centered. Plain `\u003Ch2>`, one muted line, then `\u003Cform class=\"input-group\" novalidate>` (flex, gap `--spacing-gap`, column on mobile): visible `\u003Clabel>`, `\u003Cinput class=\"input\" type=\"email\" required>`, `.btn--primary` submit. Flow: on submit, prevent default → validate → **invalid:** `.input--invalid` + message (\"Enter a valid email address.\") in the `aria-live` error container, focus the input → **valid:** button enters `.is-loading` (spinner, dimensions fixed, double-clicks blocked), input disabled → after ~900ms: button `.is-success` (\"Done\" + `check_circle`), announce \"You're on the list.\" via a polite live region, input read-only. Errors clear on the next keystroke.\n\n**5.9 Footer:** `\u003Cfooter class=\"footer\">` on `--bg-primary` with a `--plain-rule` top border. Flex-wrap columns (column on mobile): wordmark + one plain line (\"Made to be used, not admired.\"); secondary links (About, Help, Privacy, Terms, Status, Contact) as a `\u003Cul>` of `--text-secondary` anchors with underline on hover\u002Ffocus; small print \"© 2025 [Product]. All rights reserved.\"\n\n---\n\n## 6. PRE-PUBLISH VALIDATION CHECKLIST\n\nThe source specification does not declare color modes — therefore, **before publishing, validate every section in both light and dark mode**: backgrounds, text, muted text, borders, shadows, focus rings, primary-button pairing, badges, inputs, and footer. Additionally pass: (a) a keyboard-only run (skip link, nav toggle, FAQ, form, theme toggle); (b) a 320px-viewport run with zero horizontal scroll; (c) a `prefers-reduced-motion` run; (d) zero inline styles, a single deferred script, no console errors, valid HTML; (e) all copy real, plain English — no lorem ipsum, no emoji.\n",1791954986497]