[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-370-Low-Poly":3},"# System Prompt — Build a \"Low Poly\" Art & Illustration Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page on the first attempt. Every rule below is mandatory and final — do not ask clarifying questions, do not leave TODOs or stubs.\n\n**Project Brief:**\n- **Theme:** Low Poly — visible triangular facets, flat shading, crystalline geometric forms, hard-stopped gradient facet lighting, stylized, game-adjacent indie art direction (era: 2012–present).\n- **Output Category:** Art & Illustration. Author original, specific English marketing copy for an Art & Illustration offering (e.g., a low-poly 3D illustration and game-asset studio). Invent a concise, fitting brand name. All user-facing copy must be written in English.\n- **Sections (in this exact order):** Hero; Features (3 cards); How It Works (3 steps); Testimonials; Pricing (3 tiers); FAQ; Final CTA; Footer with secondary links.\n- **Canonical token base:** the Low Poly reference specification (`references\u002F00-flagship-implementation-specs\u002Flow-poly.md`) supplied with this brief. Implement its tokens and base component classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) as the foundation; extend them, never contradict them.\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 and `\u003Cstyle>` blocks in HTML are forbidden.\n- Target all design properties, layout rules, and states via class or ID selectors only.\n- HTML must remain semantic (`header`, `nav`, `main`, `section`, `article`, `footer`) and visually agnostic — retheming the page must require CSS edits only, never markup changes.\n\n**1.2 CSS Variables & Theme Tokens**\n- Define the mandatory token set in `:root`: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n- Map the Low Poly dark palette (the default theme) into these tokens:\n```css\n--bg-primary: #1b2a4a;      --bg-secondary: #24365c;   \u002F* extended: --surface-strong: #2f4570 *\u002F\n--border-default: #3c5480;  --text-primary: #eef3fb;   --text-secondary: #aebedc;\n--primary: #ff7f5c;         --secondary: #46e0c8;      \u002F* extended: --facet-dark: #16223c *\u002F\n--radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px;  \u002F* extended: --radius-pill: 999px *\u002F\n--shadow-sm: 0 2px 6px rgba(0,0,0,.35); --shadow-md: 0 8px 20px rgba(0,0,0,.4);\n--ease-standard: cubic-bezier(0.2, 0, 0, 1);\n--transition-fast: 150ms;   --transition-normal: 250ms;\n\u002F* Signature custom properties — implement verbatim, never smooth the stops: *\u002F\n--facet-gradient: linear-gradient(135deg, var(--secondary) 0%, var(--secondary) 33%,\n  var(--primary) 33%, var(--primary) 66%, var(--surface-strong) 66%);\n--facet-corner: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 70%);\n```\n- Define `--text-success`\u002F`--border-success` and `--text-error`\u002F`--border-error` per theme. The error red must remain clearly distinguishable from the coral `--primary`; never communicate state by color alone (always pair with an icon and\u002For text).\n- **Contrast pairing:** every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in both themes, not just the default.\n- **Light mode:** derive a pale crystalline light theme (e.g., `--bg-primary: #eef3fb`, `--bg-secondary: #fefefe`, `--text-primary: #16223c`, `--text-secondary: #4a5d82`, `--border-default: #b9c7e4`). Never use `#ffffff`; use `#fefefe`. Where coral `#ff7f5c` fails WCAG AA as text on light backgrounds, define a darkened text-safe variant (e.g., `#c9502b`) for links\u002Flabels, while keeping `#ff7f5c` for facet-gradient fills paired with dark text (`#10192c`).\n\n**1.3 Mandatory Dark Mode**\n- Dark mode is the default presentation (it matches the source palette), but a complete, fully validated light theme must also be built. The source spec explicitly states: *the theme does not declare modes — validate in both light and dark before publishing.* Treat this as a hard acceptance criterion.\n- Implement token switching via a theme class\u002Fattribute on `\u003Chtml>` plus an `@media (prefers-color-scheme: dark)` fallback; switching must require zero HTML restructuring.\n- Provide a visible theme toggle in the nav on all viewports: a Google Material Symbols icon (`dark_mode`\u002F`light_mode`), correct `aria-pressed` and `aria-label` state, fully keyboard operable.\n- Persist the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. The deferred `script.js` applies the stored theme; the media-query default prevents a flash for first-time visitors.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., stretching equal-height pricing cards).\n- Mobile-first: rows collapse to columns on small viewports; no horizontal scrolling at any width; all interactive targets are at least 44×44px.\n\n**1.5 Framework & Class System**\n- Use Tailwind CSS (CDN) or clean custom CSS organized with `@layer`\u002F`@apply` — choose one approach. Every utility must map back to the CSS variables and the reusable class names (`.btn`, `.card`, `.input-group`, `.nav`, `.badge`).\n- Naming convention: BEM exclusively (consistent with `.btn--primary`). Never mix conventions.\n\n**1.6 Typography & Icons (Google Only)**\n- Load **Space Grotesk** (display + base) and **Rajdhani** (secondary) from Google Fonts via `\u003Clink>` with `preconnect`; bind them to `--font-base`\u002F`--font-display`.\n- All icons come from Google Material Symbols. Forbidden: raw inline SVGs, local icon files, emoji-as-icons. All decorative low-poly facets must be composed in pure CSS (layered gradients + `clip-path`) — never SVG and never images.\n\n**1.7 Low Poly Signature Visual Language**\n- The hard-stopped facet gradient (no smoothing) fills primary buttons and badges, and accents the nav and cards via clipped corners (`::before`\u002F`::after` with `clip-path: var(--facet-corner)`), exactly as in the reference base classes.\n- Flat shading only: crisp 1px borders, hard-edged shadows, small radii (2–6px). No soft blurs, no glassmorphism.\n- Hero backdrop: a faceted low-poly field built purely from layered CSS linear\u002Fconic gradients and `clip-path` pseudo-elements (crystalline triangles in `--primary`\u002F`--secondary`\u002F`--surface-strong` tones), plus a CSS-composed crystalline illustration (e.g., a faceted gem or low-poly mountain range). No external image dependencies anywhere on the page.\n\n---\n\n## 2. Component Design Specifications\n\n**2.1 Buttons**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px, weight 600.\n- **Hover:** brightness\u002Fshadow lift with `cursor: pointer`. **Focus:** distinct visible ring (`outline`\u002F`box-shadow`) built from CSS variables with offset. **Active:** `transform: scale(0.97)`.\n- **Loading:** disables interaction, prevents double-clicks, renders an animated Material Symbols icon or CSS spinner without changing button dimensions; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success`\u002F`--text-error` (used by the newsletter submit flow).\n- **Variants:** `.btn--primary` (facet-gradient fill, dark text `#10192c`, transparent border), `.btn--secondary` (surface-strong), and `.btn-danger` — visually distinct in both light and dark themes.\n\n**2.2 Cards**\n- **Default:** flexible Flexbox layout, `--bg-secondary` surface, 1px `--border-default`, `--shadow-md`, clipped facet corner accent.\n- **Hover:** `translateY(-2px)` plus shadow shift. **Focus-within:** border highlights when a child control (pricing CTA, link) receives focus.\n- **Loading:** define a `.card--skeleton` shimmer animation in CSS (no layout jumps) and apply it to the testimonial cards during a brief simulated initial load.\n- **Empty state:** define a `.card--empty` fallback pattern (Material icon + guidance text) as part of the card system.\n- **Pricing cards:** middle tier visually elevated (stronger border\u002Fshadow) with a \"Most popular\" `.badge` using the facet-gradient fill.\n\n**2.3 Forms & Inputs**\n- The Final CTA contains a newsletter email capture: a flex `.input-group` wrapping a visible `\u003Clabel>`, the `.input` field, and a dedicated error-feedback container.\n- **States:** empty, focused (accent ring per the reference `.input:focus`), filled, valid (success border + check icon), invalid (error border, `--text-error` message, error icon, `aria-invalid`), disabled, read-only.\n- Errors render inline in an `aria-live=\"polite\"` region linked via `aria-describedby`. No `alert()` or console-only feedback.\n\n**2.4 FAQ Accordion & Overlays**\n- FAQ: accessible accordion — `\u003Cdetails>`\u002F`\u003Csummary>` or button + region with `aria-expanded`\u002F`aria-controls`; fully keyboard operable; chevron Material icon rotates on open; height transition respects `prefers-reduced-motion`.\n- No modal is required by this brief; however, if you include any overlay, it must: center via flex (`align-items: center`), use a backdrop overlay, close on `Esc` and overlay clicks, trap keyboard focus, animate open\u002Fclose via CSS transitions, define loading\u002Fsuccess\u002Ferror states, and stack at `--z-modal`.\n\n---\n\n## 3. Core UX & Micro-Interaction Rules\n\n- **Responsive by default:** fluid type and spacing, standard breakpoints, zero horizontal overflow.\n- **Smooth animations:** transition all state changes with `var(--transition-normal)`\u002F`--ease-standard`; wrap every animation and transition in `prefers-reduced-motion: reduce` overrides.\n- **Accessibility:** WCAG AA contrast in both light and dark themes; never rely on color alone; semantic HTML5 landmarks; a single `h1` in the hero with logical heading order; logical DOM\u002Ffocus order; a skip-to-content link; full keyboard operability; `aria-live` regions for all dynamic feedback (form errors, loading, success).\n- **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change (nav-link facet underline, button states, card lifts, form feedback).\n- **Navigation:** sticky header; on mobile, a hamburger (Material icon `menu`) opens a dropdown panel at `--z-dropdown` with `aria-expanded`, `Esc`-to-close, and proper focus management.\n\n---\n\n## 4. Page Section Requirements\n\n- **Hero:** eyebrow `.badge`, `h1` headline + subheadline, primary CTA (`.btn--primary`) and secondary CTA, CSS-composed faceted crystalline backdrop; mobile-first stacking.\n- **Features:** exactly 3 cards, each with a Material Symbols icon in a faceted frame, a title, and 1–2 sentences of copy.\n- **How It Works:** 3 numbered steps with facet-gradient number badges connected by a gradient rule, each with short step copy.\n- **Testimonials:** 3 quote cards (quote icon, quote, name, role); use initials inside a `.badge` instead of photos; skeleton state on first load.\n- **Pricing:** 3 tiers with feature lists (Material check icons), a per-tier CTA button, and a highlighted middle tier.\n- **FAQ:** 5–6 genuine Q&A pairs relevant to the Art & Illustration offering.\n- **Final CTA:** full-width facet-accented panel with a headline and the validated newsletter form, including a loading → success feedback flow.\n- **Footer:** brand mark, secondary link groups (e.g., Product \u002F Company \u002F Resources), text links, copyright, styled correctly in both themes.\n\n---\n\n## 5. Deliverable & Output Format\n\n- **Files:** separate `index.html`, `style.css`, and `script.js`. The only script reference is a single deferred `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no other inline script blocks.\n- **script.js responsibilities:** theme toggle + `localStorage` persistence with `prefers-color-scheme` fallback, mobile menu, FAQ animation (if needed), newsletter validation and simulated submit (loading → success), and optional reduced-motion-aware scroll reveals.\n- **Naming:** BEM throughout — one convention, never mixed.\n- **Copy:** all user-facing text in English, original and specific to the Art & Illustration theme. Lorem ipsum is prohibited; placeholders are allowed only where content was genuinely left unspecified.\n- **Output:** deliver the complete, final code for all three files in a single response, ready to run as-is.\n",1791954985716]