[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-666-Mat":3},"# CODING-AI PROMPT — BUILD THE \"MAT\" LANDING PAGE (Mid-Century Modern · Tactile · Warm-Analog · Craft)\n\n**Your Role:** Senior Frontend Engineer & Expert UI Designer. Produce the complete, production-grade landing page on the first attempt: `index.html`, `style.css`, and `script.js`. No mockups, no partial output, no TODOs.\n\n**Theme — \"Mat\":** Mid-Century Modern, Tactile, Warm-Analog, Craft. Keywords: dark sage, bone paper, burnt-orange, mid-century, tactile, craft, considered. Design intent: a dark sage canvas, bone paper cards, burnt-orange rule accents, 1px translucent burnt-orange borders — warm, design-led, intentional analog feel.\n\n**Source-Spec Reconciliation (authoritative):** Where the raw direction gives approximate colors (#4A5A4A, #F0EAD0, #C4603C), standardize on the structured palette: Bg `#232e26`, Bg Alt `#2e3d30`, Fg\u002FBone `#f0e8d2`, Bg Light `#ede6d0`, Accent `#c07030`, Wood `#7a4e24`. All accent borders are `1px solid rgba(192, 112, 48, 0.3)`.\n\n**Copy Locale:** All user-facing copy in English. Commit to one coherent brand story — \"Mat,\" a mid-century-inspired studio crafting considered home goods — and write original, concise, confident marketing copy for every section. No lorem ipsum anywhere; invent realistic names, roles, prices, and questions.\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` only. Forbidden: `style=\"...\"` attributes, `\u003Cstyle>` blocks, and presentational attributes in HTML.\n* Target everything via class\u002FID selectors. HTML stays semantic and style-agnostic — a full re-theme must be achievable by editing `style.css` alone.\n\n**1.2 CSS Variables & Theme Tokens (store ALL of these in `:root`)**\n* Colors: `--primary: #c07030` (burnt orange), `--secondary: #7a4e24` (wood), `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* Dark mode (canonical): `--bg-primary: #232e26`, `--bg-secondary: #2e3d30`, `--text-primary: #f0e8d2`, `--text-secondary: rgba(240,232,210,0.72)`, `--border-default: rgba(192,112,48,0.3)`.\n* Light mode (via `html.light`): `--bg-primary: #ede6d0`, `--bg-secondary: #fefefe`, `--text-primary: #232e26`, `--text-secondary: rgba(35,46,38,0.72)`, `--border-default: rgba(122,78,36,0.35)`. Never use `#ffffff`; the only near-white allowed is `#fefefe`.\n* Never-swapping brand tokens (used by Hero, Final CTA, Footer in both themes): `--bg-deep: #232e26`, `--text-on-deep: #f0e8d2`.\n* Card inversion tokens: `--card-bg` \u002F `--card-text` — dark mode: bone `#f0e8d2` cards with `#232e26` text; light mode: dark sage `#232e26` cards with bone text. This preserves the signature paper-on-sage \u002F sage-on-paper rhythm.\n* Accessibility-driven accent derivatives (mandatory, since `#c07030` cannot carry small text on either canvas): `--accent-strong: #9a4f1c` (filled buttons\u002Fbadges; ≈4.9:1 with bone text), `--accent-bright: #d98e4a` (small accent text on dark sage only, ≈5.3:1), `--secondary` wood for small accent text on bone surfaces (≈5.9:1). Pure `#c07030` is reserved for rules, borders, icon chips, and display text ≥24px (3:1 large-text rule).\n* Suggested state colors (verify ≥4.5:1 in both modes): dark `--text-success: #a8bf7a`, `--text-error: #e58a70`; light `--text-success: #55652e`, `--text-error: #b3402a`. Matching `--border-success` \u002F `--border-error` tokens required.\n* Geometry, depth, motion, stacking: `--radius-sm: 6px`, `--radius-md: 14px`, `--radius-lg: 24px`, `--shadow-sm: 0 2px 6px rgba(20,28,22,0.28)`, `--shadow-md: 0 12px 28px rgba(20,28,22,0.34)` (warm-tinted shadows), `--spacing-gap: 1rem`, `--transition-fast: 200ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.4,0,0.2,1)`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100` (define all, even if unused).\n* Contrast pairing law: every light background token pairs with a dark text token and vice versa — enforce in both themes, for every token set.\n\n**1.3 Mandatory Dark Mode Support (\"Full dark \u002F Partial light\")**\n* Dark sage is the canonical default: `:root` holds dark tokens. Light mode is a partial theme: content sections, header, and cards swap to bone paper, while Hero, Final CTA, and Footer intentionally keep the dark sage `--bg-deep` canvas in both themes.\n* Implement switching via the `.light`\u002F`.dark` classes on `\u003Chtml>` plus a `@media (prefers-color-scheme: light)` fallback scoped to `html:not(.light):not(.dark)` so the correct theme applies even before\u002Fwithout JS (no wrong-theme flash). Set `color-scheme: dark` \u002F `light` accordingly.\n* Visible toggle in the header (44×44 `.icon-btn`, Material Symbols `dark_mode`\u002F`light_mode`): `aria-pressed` reflects dark state, `aria-label` updates (\"Switch to light theme\"\u002F\"Switch to dark theme\"), choice persists in `localStorage` (key `mat-theme`), falls back to `prefers-color-scheme` on first visit. Theme swap animates background\u002Ftext colors over 200ms.\n* No HTML restructuring may be needed to switch themes — tokens only.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless a CSS comment documents a justified exception.\n* Mobile-first: single column base; breakpoints at `min-width: 640px` and `1024px` promote grids to 3 columns via flex-wrap + flex-basis. No horizontal scrolling at any width down to 320px (decorative elements must be clipped inside their section).\n* Anchor links get `scroll-margin-top: 5rem`; enable `scroll-behavior: smooth` only inside `@media (prefers-reduced-motion: no-preference)`.\n\n**1.5 Styling Approach — Single Flat Class Vocabulary (No Framework)**\n* Hand-authored vanilla CSS in `style.css` (the source spec supplies plain CSS technical direction — no CSS framework, no build step; Google Fonts\u002FIcons CDN links are the only external references).\n* One consistent kebab-case component vocabulary, never mixed with any other convention: `.container`, `.section`, `.section--alt`, `.section-rule`, `.eyebrow`, `.lead`, `.visually-hidden`, `.grid-3`, `.stack`, `.btn`, `.btn-primary`, `.btn-outline`, `.btn-danger`, `.btn-lg`, `.icon-btn`, `.card`, `.card-featured`, `.card-skeleton`, `.card-empty`, `.badge`, `.input-group`, `.field-error`, plus section-scoped prefixes (`.hero-`, `.features-`, `.steps-`, `.testimonials-`, `.pricing-`, `.faq-`, `.cta-`, `.footer-`, `.nav-`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via `\u003Clink>` with `preconnect`: **Jost** (400;500;600;700) as `--font-base`, and **Bricolage Grotesque** (600;700;800) as `--font-display`. Bricolage Grotesque is reserved for the Hero headline and Final CTA headline; section `\u003Ch2>`s use Jost 700; eyebrows use Jost 600, uppercase, letter-spaced.\n* Icons: Google Material Symbols (Rounded) via `\u003Clink>`; size icons explicitly to avoid layout shift. Forbidden: raw inline SVGs, local icon files, emoji as icons, any other icon set. Decorative icons get `aria-hidden=\"true\"`; meaningful icons get visually-hidden text.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (all states via CSS classes)**\n* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, `--radius-sm`.\n* `.btn-primary`: background `--accent-strong`, text bone (AA-safe). `.btn-outline`: transparent bg, 1.5px border + text in the section's `--text-primary`. `.btn-danger` must be defined and visually distinct in both themes (error-red on sage in dark, terracotta on bone in light) even though this page uses none.\n* Hover: `brightness(1.08)` plus `--shadow-sm`, `cursor: pointer` (200ms).\n* Focus: distinct `:focus-visible` ring — 2px outline in `--accent-bright` (dark surfaces) \u002F `--secondary` (light surfaces), 2px offset, always visible.\n* Active: `transform: scale(0.97)` (250ms).\n* Loading (`.is-loading`): `aria-busy=\"true\"`, pointer-events disabled to prevent double-clicks, CSS border spinner that preserves button dimensions.\n* Disabled: `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* Success\u002FError feedback states: temporary styles driven by `--text-success`\u002F`--text-error` with a Material Symbols icon swap.\n\n**2.2 Card Component (Features, Testimonials, Pricing)**\n* Default: Flexbox column, `--card-bg` background, `1px solid --border-default`, `--radius-md`, generous padding, equal heights across a row.\n* Hover: `transform: translateY(-2px)` + `--shadow-md` + border alpha strengthened to 0.5 — the \"subtle lift\" signature.\n* Focus-within: card border highlights in accent when a child link\u002Fbutton receives focus.\n* Define `.card-skeleton` (shimmer keyframe animation) and `.card-empty` (Material Symbol + guidance text) in CSS for dynamic reuse, even though the static page doesn't render them.\n* `.card-featured` (pricing): 3px solid accent top border, \"Most Popular\" text badge (accent-strong bg, bone text), slight elevation.\n\n**2.3 Form & Input (Final CTA email capture)**\n* Structure: `.input-group` flex column wrapping label, input, and a dedicated `.field-error` container (`aria-live=\"polite\"`).\n* States: empty (1px `--border-default`), focused (accent ring), filled, valid (success border + check icon), invalid (error border, `aria-invalid=\"true\"`, `aria-describedby`, error icon + message text — never color alone), disabled, read-only. Minimum 44px height; placeholder text must meet AA contrast.\n\n**2.4 Disclosure (FAQ) & Modal Contingency**\n* This page requires no modals; do not add one. If any overlay were introduced, it must follow the full modal spec: animated open\u002Fclose, backdrop, Material Symbol close button, focus trap, Esc + overlay-click close, loading\u002Fsuccess\u002Ferror states.\n* FAQ accordion: each question is `\u003Ch3>\u003Cbutton aria-expanded aria-controls>`; panels are `role=\"region\"` + `aria-labelledby`; Material Symbols `expand_more` chevron rotates 180° (250ms); height animates via `grid-template-rows: 0fr→1fr`; rows separated by 1px `--border-default` with subtle hover background; fully keyboard operable; answers remain visible when JS is unavailable (JS applies the collapsed state, not the markup).\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` typography and paddings; zero horizontal overflow.\n* **Smooth animations:** all state changes use `--transition-fast`\u002F`--transition-normal` with `--ease-standard` (the mandated 200–250ms window). Include a global `@media (prefers-reduced-motion: reduce)` block collapsing animations\u002Ftransitions and smooth scroll.\n* **Accessibility:** AA contrast in both modes using the pairings in 1.2; never communicate state by color alone (badges, errors, and the featured tier all carry text\u002Ficons); semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); one `\u003Ch1>`; logical DOM\u002Ffocus order; skip link as first focusable element; visible focus everywhere; `aria-live` for form feedback.\n* **Mandatory visual feedback:** every interactive element responds to hover, focus, and activation — nav underline transitions, card lifts, chevron rotation, button press scale, theme toggle icon\u002Fpressed swap.\n* **Destructive actions:** none on this page; `.btn-danger` remains defined per 2.1 for both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* Exactly three files: `index.html`, `style.css`, `script.js`. A single `\u003Cscript defer src=\"script.js\">` — no inline scripts, no `\u003Cstyle>` blocks. `\u003Chead>` includes `lang=\"en\"`, viewport meta, title, and meta description.\n* No external image files: all visuals are CSS-drawn (gradients, borders, pseudo-elements) plus Material Symbols; avatars are initial monograms. No lorem ipsum; placeholders only for genuinely unspecified future routes (footer secondary links may use `href=\"#\"`).\n* `script.js` scope (wrapped, strict mode, no console errors): theme init\u002Ftoggle\u002Fpersistence with `aria-pressed` sync; mobile menu toggle with `aria-expanded` + Esc close; FAQ enhancement; CTA email validation (loading → success\u002Ferror states, double-submit prevention); reduced-motion awareness via `matchMedia`. Nothing else.\n* **Acceptance criteria:** keyboard-only pass works end to end; both themes pass AA; no horizontal scroll at 320px; reduced-motion disables all movement.\n\n---\n\n## 5. PAGE COMPOSITION (build in this order)\n\n**5.0 Header (required infrastructure):** sticky top (`--z-dropdown`), background swaps with theme, 1px `--border-default` bottom edge. Contains: \"Mat\" wordmark with a small burnt-orange rule\u002Fsquare mark; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ) with 200ms underline hover; theme toggle; compact outline CTA; on mobile, a Material Symbols `menu` `.icon-btn` toggling a flex dropdown panel (`aria-expanded`, Esc closes).\n\n**5.1 Hero — `--bg-deep`:** centered flex column, max-width 720px. Letterspaced uppercase eyebrow in `--accent-bright`; `\u003Ch1>` in Bricolage Grotesque 800, `clamp(2.5rem, 6vw, 4.5rem)`, bone, with one accent-colored display word; Jost subhead in `--text-on-deep` at 0.72–0.8 alpha; primary + outline CTAs. Add 2–3 pure-CSS mid-century motifs (`.hero-decor`, `aria-hidden`): an atomic starburst (repeating-conic-gradient), concentric arcs (clipped border circles), and a dot-grid tile — in accent, wood, and bone at low alpha; absolutely positioned, clipped by `overflow: hidden`, scaled down or hidden below 640px.\n\n**5.2 Features — `--bg-secondary`:** eyebrow + Jost 700 `\u003Ch2>` + lead, topped by a 64×3px burnt-orange `.section-rule`. Three bone-paper `.card`s (flex, 1→3 columns): 48px circular icon chip (accent at 15% alpha, accent icon), `\u003Ch3>`, description, \"Learn more\" text link with arrow icon (focus-within highlights the card). Hover lift per 2.2.\n\n**5.3 How It Works — `--bg-primary`:** three steps connected by a 1px burnt-orange rule (horizontal desktop, vertical mobile) running behind the markers. Each step: solid `--accent-strong` circle with bone Bricolage numeral \"1\u002F2\u002F3\", Material Symbol, `\u003Ch3>`, text. Flex row desktop \u002F column mobile.\n\n**5.4 Testimonials — `--bg-secondary`:** three quote cards: accent `format_quote` icon, quote body, a five-star row (Material Symbols `star` in `--secondary`, with visually-hidden \"Rated 5 out of 5\"), author row with 44px monogram avatar (wood or accent-strong circle, bone initials), name, and role. Subtle hover lift.\n\n**5.5 Pricing — `--bg-primary`:** three `.card`s named to fit the brand; middle is `.card-featured` (badge, accent top border, `--shadow-md`, slight scale on desktop). Price figures in Bricolage Grotesque 700 with \"\u002Fmonth\" secondary text; feature lists with Material Symbols `check` in success color. Featured tier gets full-width `.btn-primary`; others `.btn-outline`; all button states apply. One line of fine print beneath the grid.\n\n**5.6 FAQ — `--bg-secondary`:** centered max-width 760px, five Q&As per spec 2.4.\n\n**5.7 Final CTA — `--bg-deep`:** centered flex column; accent rule above a Bricolage Grotesque 800 headline with an accent word; supporting text; the email `.input-group` per spec 2.3 with `.btn-primary` submit (\"Join the list\" → loading → success state with `check_circle` + confirmation text announced via `aria-live`); microcopy privacy note in secondary text.\n\n**5.8 Footer — `--bg-deep`:** brand block (wordmark, one-line blurb, icon-only social links using available Material Symbols such as `mail`, `rss_feed`, `public`, each with `aria-label` and 44px targets); two to three columns of secondary links (hover: underline + `--text-on-deep` transition); bottom bar with 1px `rgba(192,112,48,0.3)` top border, copyright, and a \"Back to top\" `.icon-btn` anchor.\n\nAlternate section backgrounds exactly as listed (`--bg-secondary` → `--bg-primary` → …) so the light\u002Fdark rhythm reads in both themes. Deliver the finished code for all three files in one response.\n",1791954990946]