[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-512-Terrazzo":3},"# CODING AGENT PROMPT — \"TERRAZZO\" LANDING PAGE (FULL BUILD)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page described below in a single attempt. Every rule in this document is mandatory. Where the provided design tokens conflict with a rule here, the rule wins and the explicit exception clause noted beside it applies.\n\n---\n\n## 0. PROJECT BRIEF & PAGE STRUCTURE\n\n**0.1 Theme:** \"Terrazzo\" — a speckled multicolor chip pattern composited on a solid warm ground; playful, tactile, retro-modern; the 2018-era graphic revival of ancient Venetian composite flooring. The signature move is a layered-radial-gradient \"chip\" texture applied to the nav, cards, and badges.\n\n**0.2 Product & Copy:** Invent one coherent fictional product\u002Fbrand that fits terrazzo's tactile, interior-design heritage (e.g., a surface-materials studio, a design toolkit, or a playful productivity product). Write **all user-facing copy in English** — realistic, on-brand marketing copy for every section. Lorem ipsum is forbidden.\n\n**0.3 Required Sections (in order):**\n- **Header\u002FNav:** sticky pill-shaped nav (per the `.nav` reference class) with logo, anchor links to each section, theme toggle, and a primary CTA. On mobile it collapses to a menu button opening an accessible dropdown panel (uses `--z-dropdown`).\n- **Hero:** badge, display headline, subhead, primary + secondary CTA buttons, a terrazzo-textured visual panel, and 2–3 proof stats.\n- **Features:** exactly 3 cards, each with a Google Material Symbol icon on a chip-colored tile (rotate chip-a\u002Fb\u002Fc), title, and description.\n- **How It Works:** exactly 3 numbered steps with chip-colored markers and a connector line on desktop, stacked on mobile.\n- **Testimonials:** 3 quote cards with initials-based avatars on chip-colored circles, name, role, and a star rating (icon plus accessible text label — never icon-only).\n- **Pricing:** 3 tiers; the middle tier is highlighted with a \"Most Popular\" badge using the terrazzo chip pattern; feature lists with check icons; one CTA button per tier.\n- **FAQ:** 5–6 accordion items (see 2.4).\n- **Final CTA:** terrazzo-textured panel with headline, email capture form (see 2.3), and privacy microcopy.\n- **Footer:** grouped secondary link columns (Product, Company, Resources, Legal), social icons via Material Symbols, and a copyright line.\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 anywhere in the HTML.\n- All design properties, layout rules, and states are applied via class or ID selectors only.\n- HTML stays semantic and style-agnostic: changing the site's look must require editing only CSS (plus the theme class toggled by JS).\n\n**1.2 CSS Variables & Theme Tokens**\nDefine the mandatory semantic token set in `:root`, populated with the Terrazzo palette:\n- **Colors:** `--primary: #e2574c; --secondary: #2f9e8f; --bg-primary: #f7f3ec; --bg-secondary: #fefefe; --bg-secondary-strong: #efe8db; --text-primary: #221f1a; --text-secondary: #5c564a; --text-success:` (a darkened, AA-contrast green derived from `#2f9e8f`, e.g. `#1e7f70`); `--text-error:` (a red visually distinct from `--primary`, e.g. `#b3261e`); `--border-default: #e0d6c2; --border-error:` (matching the error family); `--border-success: #2f9e8f`.\n- **Near-white exception clause:** the source palette lists surface `#ffffff`; per the near-white standard it is normalized to `#fefefe` everywhere a white surface is needed — never use `#ffffff` as a background.\n- **Terrazzo namespace:** keep the source spec's extra tokens — `--color-chip-a: #f2b705; --color-chip-b: #7c5cff; --color-chip-c: #2f9e8f; --color-chip-d: #e2574c;` plus `--terrazzo-chips` (the six layered radial gradients exactly as provided) and `--terrazzo-size: 140px 140px`. Components must consume the semantic tokens; the chip\u002Fpattern tokens feed the signature texture. If you reuse the reference component CSS verbatim, alias its `--color-*` references to the semantic tokens (e.g., `--color-surface: var(--bg-secondary)`) so there is a single source of truth.\n- **Radius & shadows:** `--radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px;` (plus `--radius-pill: 999px`); `--shadow-sm`, `--shadow-md` (plus `--shadow-lg`) exactly as given in the reference tokens.\n- **Spacing & transitions:** keep the `--space-*` and `--text-*` scales from the reference; add `--spacing-gap: 24px`, `--transition-fast: 0.15s`, `--transition-normal: 0.25s`, both bound to `--ease-standard: cubic-bezier(0.34, 1.4, 0.64, 1)`.\n- **Elevation:** define `--z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;` and use them for every layered component (mobile menu, any dialog, any toast).\n- **Contrast pairing:** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens — enforced in both light and dark themes. Body text must meet WCAG AA (4.5:1); large text and UI borders at least 3:1.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark mode is required even though the source spec does not declare it — the source instruction \"source does not declare modes; validate in both light and dark before publishing\" is a build requirement, not an option.\n- Implement dark tokens under a `.dark` class on `\u003Chtml>` that overrides the semantic tokens. Suggested starting values (validate contrast before publishing): `--bg-primary: #1b1915; --bg-secondary: #262219; --bg-secondary-strong: #2e2a20; --text-primary: #f4efe4; --text-secondary: #b5ac9c; --border-default: #3d3830;` with `--primary`\u002F`--secondary`\u002Fchips brightened just enough to stay visible on the dark ground (e.g., `--primary: #ec6a5f; --secondary: #3fb3a3`).\n- The terrazzo chip pattern must remain perceptible in dark mode: keep the chip hues but lighten\u002Fdesaturate them for the dark ground (re-map the chip variables or define a `--terrazzo-chips` override inside `.dark`).\n- Theme switching must not require HTML restructuring — only variable overrides.\n- **Persistence:** store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. The single deferred `script.js` must apply the theme class as its very first action to minimize flash.\n- Provide a visible toggle control (sun\u002Fmoon Material Symbol) with correct `aria-pressed` and `aria-label` that updates with state.\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 explicitly justified in a code comment (e.g., `stretch` for equal-height pricing cards).\n- Mobile-first: rows become columns at breakpoints; no horizontal scrolling at any viewport width; fluid type via the `--text-*` scale with `clamp()` where needed.\n\n**1.5 Framework Decision**\n- The reference spec is pure custom CSS, so build with clean, hand-written CSS (no framework), extending the provided component classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`) per Section 2. If you introduce Tailwind, it must be via `@layer`\u002F`@apply` mapping to the same tokens — but the default and expected path is custom CSS.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Google Fonts via `\u003Clink>`: Poppins as the primary sans bound to `--font-base`\u002F`--font-sans`, plus Nunito and Fraunces per the reference tokens (`--font-display` may pair Poppins\u002FFraunces for hero headlines).\n- Icons are Google Material Symbols (Rounded axis fits the playful mood), loaded via the official Google Fonts link with the `FILL`\u002F`wght` axes configured. Raw inline SVGs and local icon files are forbidden.\n\n**1.7 Terrazzo Signature Texture**\n- The chip pattern is built exclusively from the layered radial gradients in `--terrazzo-chips` composited over a solid ground (e.g., `background: var(--terrazzo-chips), var(--bg-secondary); background-size: var(--terrazzo-size);`). No images, no sprites.\n- Apply it to the nav, the highlighted pricing card, badges, and the hero\u002FFinal-CTA panels — as texture, never behind body text at full strength; keep text on solid or softened areas and verify readability in both themes.\n- Vary scale where the reference does (badges use a smaller `background-size`, e.g., `60px 60px`).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\nStyle all states via classes (base `.btn`; modifiers `.btn--primary`, `.btn--secondary`, `.btn--danger`):\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; pill radius per reference.\n- **Hover:** `translateY(-2px)` + `--shadow-md`, `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring using `--secondary` (outline + offset per reference).\n- **Active\u002FPressed:** add `transform: scale(0.97)` click feedback (in addition to the reference's return-to-baseline).\n- **Loading:** class-driven state that disables interaction, prevents double submits, and renders a CSS spinner (or animated Material Symbol) without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`, no transforms.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success`\u002F`--text-error` (used by the Final CTA form submit).\n- `.btn--danger` must be visually distinct from `.btn--primary` in both themes.\n\n**2.2 Cards**\n- **Default:** flexible Flexbox layout, `--bg-secondary` ground, `--border-default` border, `--radius-lg`, `--shadow-md`.\n- **Hover:** elevation shift and\u002For `translateY(-2px)`.\n- **Focus-within:** border highlight when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** define a shimmer animation utility class in CSS (no layout shift) and apply it to any region whose content renders dynamically.\n- **Empty State:** define a structured fallback (Material Symbol + guidance text) for any dynamic region that can return no content.\n\n**2.3 Forms & Inputs**\nThe Final CTA email form (and any other input) must account for: **Empty, Focused** (accent ring per the reference `.input:focus`), **Filled, Valid** (success border + check icon), **Invalid** (error border, error text, error icon, message rendered into a dedicated error container), **Disabled, Read-only**.\n- Structure: a flex `.input-group` wrapping label, input, and a dedicated error-feedback container; errors are announced via an `aria-live=\"polite\"` region; never color alone — pair color with icon + text.\n\n**2.4 FAQ Accordion (and Modal, if used)**\n- **Accordion:** each item header is a `\u003Cbutton>` with `aria-expanded`\u002F`aria-controls` toggling a panel (`role=\"region\"`, `aria-labelledby`); open\u002Fclose is animated via CSS only (e.g., `grid-template-rows: 0fr → 1fr`); a chevron Material Symbol rotates with the state; fully keyboard operable; respects `prefers-reduced-motion`.\n- **If any modal\u002Fdialog is introduced** (e.g., plan selection), it must implement: opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states animated via CSS, a centered flex container with backdrop overlay, a Material Symbol close button, keyboard focus trapping, close via `Esc` or overlay click, and `--z-modal` elevation.\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:** every state change transitions with `var(--transition-normal)` \u002F `var(--ease-standard)`; all motion is disabled under `prefers-reduced-motion: reduce`.\n- **Accessibility (a11y):** semantic HTML5 landmarks (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`), logical heading order with a single `h1`, a skip-to-content link, visible focus states everywhere, full keyboard operability (nav menu, accordion, forms, theme toggle), ARIA roles\u002Flabels on all custom widgets, `aria-live` regions for dynamic feedback (form errors, loading, success), and WCAG AA contrast in both themes. Never rely on color alone to communicate state.\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n- **Destructive actions:** any destructive action uses `.btn--danger` and is visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond the single deferred `script.js` reference; no inline CSS anywhere.\n- **Naming:** one consistent BEM convention across all classes (`.btn`, `.btn--primary`, `.card__title`, `.nav__link`, …), matching the reference spec's `.btn--primary` style. Never mix conventions.\n- **Copy:** realistic English marketing copy per 0.2 — no lorem ipsum and no placeholder text where real copy is expected; placeholders are permitted only for genuinely unspecified data (e.g., a fictional address).\n- **Completion:** ship the full page in one attempt — all sections, all component states, both themes — and validate contrast in light and dark before considering the work done.\n",1791954988499]