[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-660-Cobalt-Grid":3},"# SYSTEM PROMPT — BUILD THE \"COBALT GRID\" LANDING PAGE (FULL DELIVERABLE, FIRST ATTEMPT)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single attempt — no scaffolding, no partial output, no TODOs.\n\n**Product:** The page promotes **Gridline**, a fictional design-research desk where teams capture field notes, tag insights, and publish findings as research bulletins. Author all user-facing copy yourself, in English, in a studious, plain-spoken, editorial research-journal voice (no marketing hype).\n\n**Theme — \"Cobalt Grid\":** A 2010s-editorial design-research bulletin. Warm cream paper, electric cobalt ink, graph-paper grid overlay, Newsreader italic display headlines, Hanken Grotesk body, DM Mono for data\u002Flabels, stair-step pixel ornaments in cobalt, hairline rules, subtle lift shadows. Strictly bichromatic: only the cream family and the cobalt family appear.\n\n**Required sections (in order):** Sticky header w\u002F nav + theme toggle, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\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 anywhere in the HTML. Zero occurrences.\n* **Class Selectors Only:** All layout, design, and state styling must live in `style.css` and target classes\u002FIDs. All JavaScript does is toggle state classes and ARIA attributes — never write inline styles from JS.\n* **Minimal HTML Modifications:** Keep HTML semantic and style-agnostic. Changing the theme must only require editing `style.css`.\n\n### **1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` and the `.dark` theme class. Use these exact values:\n\n```css\n:root {\n  --primary: #1F2BE0;        \u002F* Ink — electric cobalt (actions, links, focus rings) *\u002F\n  --secondary: #5560E5;      \u002F* Ink-Soft (decorative fills, ornaments) *\u002F\n  --bg-primary: #F0EBDE;     \u002F* Paper *\u002F\n  --bg-secondary: #F7F3E9;   \u002F* Paper tint (card surfaces) *\u002F\n  --text-primary: #1F2BE0;   \u002F* 7.1:1 on paper *\u002F\n  --text-secondary: #5560E5; \u002F* LARGE text only — see rule below *\u002F\n  --text-success: #1F7A4B;  --text-error: #B3261E;\n  --border-default: rgba(31, 43, 224, 0.2);\n  --border-success: rgba(31, 122, 75, 0.5);\n  --border-error: rgba(179, 38, 30, 0.5);\n  --grid-line: rgba(31, 43, 224, 0.1);   \u002F* graph-paper overlay at 10% cobalt *\u002F\n  --ring: rgba(31, 43, 224, 0.15);\n\n  --font-display: 'Newsreader', Georgia, serif;      \u002F* headlines — always italic *\u002F\n  --font-base: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;\n  --font-mono: 'DM Mono', 'Courier New', monospace;\n\n  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;\n  --shadow-sm: 0 2px 10px rgba(31, 43, 224, 0.1);\n  --shadow-md: 0 10px 30px rgba(31, 43, 224, 0.16);\n  --spacing-gap: 1.5rem; --spacing-section: clamp(4rem, 12vh, 7rem);\n  --transition-fast: 200ms; --transition-normal: 250ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;\n}\n```\n\n* **Bichromatic exception:** the success\u002Ferror hues above are the only permitted non-palette colors, reserved strictly for validation feedback (borders, icons, helper text) — they never appear on brand surfaces, buttons, cards, or decoration.\n* **Secondary-text contrast rule:** `--text-secondary` (#5560E5) only reaches ~4.2:1 on paper, so it may only be used for text ≥ 24px (or ≥ 18.66px bold) and decorative UI metadata paired with an icon. All small body copy, eyebrows, and captions use `--text-primary`.\n* **Contrast pairing (every theme):** light backgrounds pair with dark ink text; dark backgrounds pair with light paper text. Verify pairing for the default theme, dark theme, featured pricing card, and CTA band.\n* **Light background rule:** the ground is `#F0EBDE`, never `#ffffff` (forbidden). If a near-white is ever needed, use `#fefefe` — otherwise stay in the paper tint family.\n* **Elevation tokens** are cobalt-tinted (not neutral gray) to preserve bichromatism.\n\n### **1.3 Mandatory Dark Mode Support**\n**Theme exception:** the source style sheet marks dark mode \"✗ None\" — dark mode is nonetheless mandatory under this architecture and must ship as the inverted bichromatic pairing below. Do not omit it.\n\n* Implement tokens twice: under `@media (prefers-color-scheme: dark)` (no-JS fallback) **and** a `.dark` class on `\u003Chtml>` (user override):\n\n```css\n.dark {\n  --primary: #F0EBDE;        \u002F* the \"ink\" inverts to paper — white-ink editorial *\u002F\n  --secondary: #5560E5;\n  --bg-primary: #0C1034;     \u002F* deep ink shade of cobalt *\u002F\n  --bg-secondary: #151A4D;\n  --text-primary: #F0EBDE;\n  --text-secondary: #A9B1F5; \u002F* lightened ink tint — passes 4.5:1 *\u002F\n  --text-success: #7ED9A6;  --text-error: #FF9C94;\n  --border-default: rgba(85, 96, 229, 0.35);\n  --border-success: rgba(126, 217, 166, 0.45);\n  --border-error: rgba(255, 156, 148, 0.45);\n  --grid-line: rgba(85, 96, 229, 0.14);\n  --ring: rgba(240, 235, 222, 0.12);\n  --shadow-sm: 0 2px 10px rgba(3, 5, 20, 0.4);\n  --shadow-md: 0 10px 30px rgba(3, 5, 20, 0.55);\n}\n```\n\n* Because `.btn--primary`, the featured pricing card, and the CTA band all use the `var(--primary)` \u002F `var(--bg-primary)` pairing, they invert automatically (cobalt-on-paper becomes paper-on-ink) with zero HTML changes.\n* **Persistence:** store choice in `localStorage` (`gridline-theme`); on first visit fall back to `prefers-color-scheme`. Set `color-scheme` accordingly.\n* **Toggle control:** a visible button in the sticky header showing Material Symbols `dark_mode` \u002F `light_mode`, with dynamic `aria-pressed` and `aria-label` (\"Activate dark theme\" \u002F \"Activate light theme\").\n\n### **1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout with Flexbox (or flex utilities). **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (permitted exceptions: text-heavy card bodies, form field stacks, footer columns — use `flex-start` there for readability and say why).\n* **Mobile-first:** all multi-column arrangements are single-column by default and expand to rows at ≥ 768px \u002F ≥ 1024px breakpoints. No horizontal scrolling at any width down to 320px. Fluid type via `clamp()`. Content container: `max-width: 1140px`, auto horizontal margins, `padding-inline: clamp(1.25rem, 5vw, 2.5rem)`.\n\n### **1.5 Framework & Styling Strategy**\nUse clean, hand-authored CSS in `style.css`, optionally organized with Tailwind's `@layer` discipline (`tokens, base, layout, components, utilities`) or Tailwind CDN — but **every component style must resolve to reusable class names** (`.btn`, `.card`, `.input-group`, `.section-head`) driven by the CSS variables in 1.2. Never hard-code hex values inside component rules.\n\n### **1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Fonts (Google Fonts only, loaded in `\u003Chead>`):** `Newsreader` (italic 400\u002F500\u002F600) for all display headlines — always `font-style: italic`; `Hanken Grotesk` (400–700) for body; `DM Mono` (400\u002F500) for eyebrows, numbers, prices, stats, attribution, and metadata. Bind them to `--font-display`, `--font-base`, `--font-mono`. Include `preconnect` hints.\n* **Icons:** Google Material Symbols (Outlined) via the Google Fonts stylesheet. **Raw inline SVGs and local icon files are forbidden.** All decorative CSS constructions (grid, stair-steps) must be `aria-hidden` from assistive technology.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### **2.1 Button**\nBase `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px, Hanken Grotesk 600, `border-radius: var(--radius-sm)`, `transition: all var(--transition-fast) var(--ease-standard)`.\n* **Variants:** `.btn--primary` (`background: var(--primary); color: var(--bg-primary)`); `.btn--secondary` (transparent, `1px solid var(--border-default)`, hover fills with an 8% ink tint + `--shadow-sm`); `.btn--paper` for the CTA band (`background: var(--bg-primary); color: var(--primary)`); `.btn--inverse` for the featured pricing card (outline in the card's text color, hover fills with `var(--bg-primary)` and flips text). Define `.btn-danger` styling for completeness even if unused.\n* **Hover:** brightness\u002Fshadow shift (200–250ms), `cursor: pointer`.\n* **Focus:** `:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }` — visible in both themes.\n* **Active:** `transform: scale(0.97)`.\n* **Loading (`is-loading` + `aria-busy=\"true\"`):** disables interaction, prevents double submits, overlays a 16px CSS ring spinner (border technique, 600ms spin) positioned absolutely so button dimensions never change.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary states — swap label icon for Material Symbols `check` \u002F `error`, adopt `--text-success` \u002F `--text-error` on icon and helper text, announce via `aria-live`, auto-revert after 3s.\n\n### **2.2 Card**\n* **Default:** `.card` — `background: var(--bg-secondary)`, `1px solid var(--border-default)`, `border-radius: var(--radius-md)`, generous padding, flex column.\n* **Hover (interactive cards):** `translateY(-2px)`, `box-shadow: var(--shadow-md)`, border shifts to a stronger cobalt tint, 250ms ease.\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n* **Skeleton:** define `.skeleton` shimmer keyframes (ink tint at 6%, gradient sweep) so loading never causes layout jumps.\n* **Empty state:** define `.empty-state` (Material Symbol + guidance text) pattern in CSS.\n\n### **2.3 Form & Input**\n`.input-group`: flex column (documented `flex-start` exception), wrapping label (Hanken 600, small), input (min-height 44px, `background: var(--bg-secondary)`, hairline cobalt border, `--radius-sm`), and a dedicated `.input-group__error` container.\n* **States:** empty, focused (`border-color: var(--primary)` + `box-shadow: 0 0 0 3px var(--ring)`), filled, valid (success border + `check` icon), invalid (`--border-error`, `error` icon, DM Mono message in `--text-error`, `aria-invalid=\"true\"`, `aria-describedby`), disabled, read-only. State is never communicated by color alone — always icon + text.\n\n### **2.4 Modal \u002F Overlay**\nThe core page flows must not depend on modals. **If** you add any overlay, it must implement: opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states animated with CSS transitions; backdrop overlay; `role=\"dialog\"` + `aria-modal=\"true\"`; Google Symbol close button; focus trapping; close via `Esc` and overlay click; centered flex container (`align-items: center`) at `--z-modal`.\n\n### **2.5 Landing Page Section Requirements**\n* **Sticky header:** paper ground with backdrop blur, hairline bottom border, `--z-dropdown`. Brand \"Gridline\" in Newsreader italic + DM Mono \"Vol. 01\" tag. Nav links (Hanken 500, uppercase, letter-spaced) anchor to sections; header CTA `.btn--primary` links to `#pricing`. Mobile (\u003C 768px): links collapse into a `menu` icon button toggling a dropdown panel (`aria-expanded`, `aria-controls`, `Esc`\u002Foutside-click close, focus moved in and returned). Include a skip-to-content link as the first focusable element.\n* **Hero:** near-full viewport (`min-height: 92vh`), vertically centered flex column. DM Mono eyebrow, `\u003Ch1>` in Newsreader italic `clamp(2.75rem, 7vw, 5.5rem)`, Hanken subhead, two CTAs (`.btn--primary` → `#pricing`, `.btn--secondary` → `#how`), and a DM Mono stat strip (3 stats, hairline separators, flex-wrap). Decorate with a stair-step pixel cluster (see 3.6).\n* **Features (3 cards):** each `.card` with a Material Symbol in a hairline-bordered cobalt tile, DM Mono index `01\u002F02\u002F03`, Newsreader italic `\u003Ch3>`, 2-line body. Topics: capturing field notes; tagging\u002Fsynthesizing insights; publishing bulletins. Full hover\u002Ffocus-within treatment per 2.2.\n* **How It Works (3 steps):** flex row → column on mobile; step numbers oversized in DM Mono; hairline rule connecting steps on desktop, stair-step ornament connectors; each step `\u003Ch3>` + body.\n* **Testimonials:** 3 quote cards; pull-quotes in Newsreader italic ~1.35rem with an oversized CSS quotation glyph (`::before`); DM Mono attribution (\"Name — Role, Company\", invented fictional people); hairline borders.\n* **Pricing (3 tiers):** e.g., Sketchbook ($0), Research Desk ($18\u002Fseat\u002Fmo, featured), Institute ($49\u002Fseat\u002Fmo) — prices in DM Mono. Feature lists (4–6 items) with Material Symbols `check`. Featured card: `background: var(--primary); color: var(--bg-primary)` with a DM Mono \"Most popular\" badge and `.btn--inverse`; other tiers use `.btn--secondary`. Responsive 3 → 1 columns.\n* **FAQ:** accordion of 6 items. Each item: `\u003Ch3>\u003Cbutton class=\"faq__question\">` (full-width flex, space-between, `aria-expanded`, `aria-controls`) + Material Symbols `expand_more` rotating 180° when open; answer panel animates open\u002Fclose (grid-rows or equivalent CSS technique, 250ms); hairline dividers between items; 6 authored Q&As (what it is, privacy, export, billing\u002Fseats, migration, accessibility).\n* **Final CTA:** full-bleed band — `background: var(--primary)`, `color: var(--bg-primary)`, with its own grid overlay drawn as a 10–12% tint of the band's text color via `::before`. Newsreader italic headline, email capture built on 2.3 with `.btn--paper` submit; on submit show loading (2.1) then success feedback + `role=\"status\"` toast at `--z-toast`. Stair-step ornaments in the corners.\n* **Footer:** hairline top rule; brand + one-line description; 4 columns of secondary links (Product \u002F Company \u002F Resources \u002F Legal, 4–6 links each, plausible anchors); DM Mono bottom row with copyright (dynamic year) and legal microcopy; links get hover underline (`text-underline-offset: 4px`) and visible focus rings. All decorative marks `aria-hidden`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n### **3.1 Responsive by Default**\nFluid type\u002Fspacing via `clamp()`; breakpoints at 768px\u002F1024px; zero horizontal overflow at 320px; no fixed-width containers.\n\n### **3.2 Motion & Transitions**\nAll state transitions run 200–250ms with `var(--ease-standard)` (the theme's signature pacing). Wrap every animation\u002Ftransition enhancement in `@media (prefers-reduced-motion: reduce)`: no transforms, no shimmer, instant accordion, `scroll-behavior: auto`. Smooth anchor scrolling only inside `@media (prefers-reduced-motion: no-preference)`.\n\n### **3.3 Accessibility**\nSemantic landmarks (`header`\u002F`main`\u002F`section[aria-labelledby]`\u002F`footer`); one `\u003Ch1>` (hero) with logical heading order; body text ≥ 4.5:1 in **both** themes; state never conveyed by color alone; all custom widgets carry correct ARIA; logical DOM\u002Ffocus order; every interaction keyboard-operable; `aria-live` regions for form errors, toasts, and loading feedback; `scroll-margin-top` on sections to offset the sticky header.\n\n### **3.4 Mandatory Visual Feedback**\nEvery hover, click, focus, and submission produces a visible state change (button scale\u002Fbrightness, card lift, accordion rotation, form ring, toast).\n\n### **3.5 Distinct Actions**\n`.btn-danger` (if used) must be visually distinct in both themes, never relying on color alone.\n\n### **3.6 Cobalt Grid Signature Effects (pure CSS, no SVG, no images)**\n* **Graph-paper grid overlay** on the page ground:\n```css\nbody::before { content: \"\"; position: fixed; inset: 0; z-index: -1; pointer-events: none;\n  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),\n                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);\n  background-size: 32px 32px; }\n```\n* **Stair-step pixels:** 8px cobalt modules ascending like steps, built with stacked `box-shadow` (or layered gradients) on an `aria-hidden` element — place clusters in the hero and step connectors.\n* **Hairline rules:** 1px `var(--border-default)` borders dividing sections, cards, list items, and footer columns.\n* **Lift shadows:** the cobalt-tinted `--shadow-sm` \u002F `--shadow-md` tokens; buttons\u002Fcards lift on hover with `translateY(-2px)`.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n### **4.1 File Structure**\nThree files only: `index.html`, `style.css`, `script.js`. One single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` in the head — no other inline `\u003Cscript>` blocks. Google Fonts + Material Symbols `\u003Clink>` tags in `\u003Chead>`.\n\n### **4.2 Naming Convention**\nBEM exclusively (`.hero__title`, `.card--featured`, `.btn--primary`, `.faq__question`, `.input-group__error`) built on the generic bases `.btn`, `.card`, `.input-group`. Never mix conventions, never invent classes without matching HTML.\n\n### **4.3 Copy & Content Rules**\nAuthor all copy in English — realistic and specific to a design-research product. **No lorem ipsum.** `href=\"#\"` placeholders are permitted only for genuinely non-existent destinations, and every such link needs a descriptive accessible name. No photographic\u002Fraster imagery — all visual interest comes from type, grid, hairlines, and stair-steps.\n\n### **4.4 Hard Prohibitions (auto-fail)**\n`style=\"...\"` attributes; inline SVGs; `#ffffff` anywhere; lorem ipsum; non-Google fonts or icon files; `alert()`\u002F`confirm()`; red\u002Fgreen outside the validation tokens; horizontal scrolling; color-only state signaling; hardcoded hex values inside component CSS.\n\n### **4.5 Definition of Done**\nBefore finishing, verify: all 9 areas present (header + 8 sections); both themes render with correct light\u002Fdark text pairing and ≥ 4.5:1 body contrast; theme choice persists and the toggle reports `aria-pressed`\u002F`aria-label` correctly; the email form demonstrates empty → focus → invalid → valid → loading → success states with `aria-live` feedback; the FAQ is fully keyboard-operable; every transition respects `prefers-reduced-motion`; the page is flawless at 320px, 768px, 1024px, and 1440px; zero violations of 4.4. Then output `index.html`, `style.css`, and `script.js` in full.\n",1791954990575]