[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-789-MODULAR-the-patchbay-synth":3},"# CODING AGENT PROMPT — \"MODULAR — The Patchbay Synth\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page in a single pass — no follow-up questions, no stubs, no TODOs. All user-facing copy must be written in English.\n\n**Objective:** A fully responsive, accessible landing page for **MODULAR — the patchbay synth**, a contemporary (2020s) audio\u002Fmusic product. Visual language: warm neumorphism, synth-hardware motifs (knobs, jack sockets, patch cables), soft gradients, tactile hover feedback. **Light mode is the primary, default presentation.**\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives exclusively in `style.css`. **Forbidden:** `style=\"...\"` attributes, `\u003Cstyle>` blocks, and inline event handlers in the HTML.\n* All layout, design properties, and states are targeted via **class or ID selectors only**.\n* HTML must remain semantic and agnostic of visual styling — changing the site's entire look must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (light mode default):\n\n* **Colors:** `--primary: #3e2c1a` (deep brown — primary surfaces\u002Fbuttons), `--secondary: #8a7050` (warm tan accent), `--bg-primary: #d8cfc0` (warm cream page background), `--bg-secondary: #fefefe` (elevated card surfaces), `--text-primary: #171310`, `--text-secondary` (darkened derivative of `#8a7050`, e.g. `#5c4630`, to guarantee ≥4.5:1 on cream — do **not** use raw `#8a7050` as body text on `#d8cfc0`), `--text-success` (theme-harmonized green, e.g. `#2f6b4a`), `--text-error` (rust red, e.g. `#b3402b`), `--border-default: rgba(62,44,26,0.18)`, `--border-success`, `--border-error`.\n* **Contrast Pairing:** Every light background token pairs with a dark text token, and every dark background token pairs with a light text token — enforce this in **both** themes.\n* **Light Mode Background:** Never pure white. The cream `#d8cfc0` is the page canvas; use `#fefefe` only where a near-white surface is required. Never use `#ffffff`.\n* **Radii, Shadows & Neumorphism:** `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg: 28px` (rounded, tactile), `--shadow-sm`, `--shadow-md`, plus neumorphic tokens: `--shadow-neu-out` (dual shadow — dark `rgba(23,19,16,…)` bottom-right + light `rgba(254,254,254,…)` top-left) and `--shadow-neu-in` (inset variant for inputs, sockets, pressed states).\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent layered-component conflicts.\n* **Gradient Tokens:** `--gradient-warm: linear-gradient(135deg, #3e2c1a, #2c1e10)` (CTA panels, primary buttons), `--gradient-cable: linear-gradient(90deg, #8a7050, #d8cfc0, #8a7050)` (patch-cable decorations), `--gradient-panel` (subtle radial warmth for section backgrounds).\n* **Typography Tokens:** `--font-heading`, `--font-base`, `--font-mono` bound to the Google Fonts in 1.6.\n\n**1.3 Mandatory Dark Mode Support**\n* Dark mode **must be fully defined** under a `.dark` class selector that swaps only token values — zero HTML restructuring. Suggested dark tokens: `--bg-primary: #1c130a`, `--bg-secondary: #2c1e10`, `--text-primary: #d8cfc0`, `--text-secondary: #a8906d` (lightened `#8a7050` for contrast on dark), flipped neumorphic shadows (cream-tinted highlight, near-black dark shadow).\n* User theme choice persists via `localStorage` (e.g., key `modular-theme`). Provide a **visible toggle** in the header with correct `aria-pressed` state and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), using Material Symbols `dark_mode` \u002F `light_mode`.\n* **Exception clause:** Per the style specification's Light-first directive (✓ Light \u002F ○ Dark), the first-visit default must be **Light** regardless of `prefers-color-scheme`; the mandatory toggle and `localStorage` persistence remain fully implemented, and all dark tokens must still be built and maintained.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout container with Flexbox. Every flex container **must default to `align-items: center`** (`items-center`) unless a CSS comment documents an explicit exception.\n* Mobile-first: multi-column rows collapse to columns at sensible breakpoints (e.g., 640px \u002F 768px \u002F 1024px). **No horizontal scrolling** at any viewport ≥320px — decorative cable\u002Fgradient elements must be clipped or hidden so they never force `overflow-x`.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Build with clean, hand-authored CSS organized around the tokens above, **or** Tailwind utilities mapped 1:1 to the same CSS variables. Either way, all components must resolve to generic reusable classes (`.btn`, `.card`, `.input-group`); utility soup must not replace the token system.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via `\u003Clink>` in `\u003Chead>`: **Space Grotesk** (headings → `--font-heading`), **Inter** (body → `--font-base`), **Space Mono** (technical synth-panel labels such as \"MOD-01\", \"PATCH 03\", \"OUT\" → `--font-mono`).\n* Icons exclusively via **Google Material Symbols (Rounded variant)** stylesheet, referenced by ligature name (e.g., `cable`, `tune`, `graphic_eq`, `album`, `check_circle`, `expand_more`, `close`, `star`). **Explicitly forbidden:** raw inline SVGs, local icon files, emoji used as icons.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target **44×44px**, `--radius-md`.\n* **Primary:** `--gradient-warm` background with cream `#d8cfc0` text. **Hover:** `filter: brightness(1.08)` + `translateY(-1px)` + `cursor: pointer`. **Focus-visible:** distinct ring (2px `--secondary` outline, 3px offset) — neumorphism's low contrast must never hide keyboard focus. **Active\u002FPressed:** `transform: scale(0.97)` + inset neumorphic \"pressed\" shadow.\n* **Secondary:** raised neumorphic cream surface with `--text-primary`; hover expands the shadow; active presses it inward.\n* **Loading (`.is-loading`):** disables interaction and prevents double-clicks; renders Material Symbol `progress_activity` with a CSS rotation — button dimensions must not shift.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback styled from `--text-success` \u002F `--text-error`; never communicated by color alone — pair with an icon and `aria-live` text.\n* `.btn--danger` must be visually distinct in **both** themes (define it even if unused).\n\n**2.2 Card Component (`.card` — Features, Testimonials, Pricing)**\n* **Default:** neumorphic raised surface on the page background, `--radius-lg`, generous padding, flex column layout.\n* **Hover:** `transform: translateY(-2px)` plus expanded neumorphic shadow.\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n* **Skeleton:** define reusable shimmer `.skeleton` styles in CSS (no layout jumps) for any asynchronously populated content.\n* **Empty state:** structured `.card--empty` fallback with a Google Icon and clear guidance text.\n\n**2.3 Form & Input Component (`.input-group` — newsletter signup in the Final CTA)**\n* **Structure:** flex column wrapping a visible `\u003Clabel>` (linked via `for`\u002F`id`), the `\u003Cinput type=\"email\">` (inset neumorphic surface), and a dedicated error feedback element with `aria-live=\"polite\"`.\n* **States, all class\u002Fselector driven:** empty, `:focus` (outline ring in `--secondary`), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, error icon, red text, human-readable message — never color alone), disabled, read-only.\n* Submit follows the loading → success\u002Ferror sequence from 2.1, with a visible confirmation message (\"You're on the list\").\n\n**2.4 FAQ Accordion (`.faq__item`)**\n* Question is a `\u003Cbutton>` with `aria-expanded` + `aria-controls`; panel has `role=\"region\"` and `aria-labelledby`. Height animates via CSS (`grid-template-rows: 0fr → 1fr` or equivalent) over `--transition-normal`; Material Symbol `expand_more` rotates 180° when open. Fully keyboard operable (Enter\u002FSpace), visible focus, multiple items may be open simultaneously.\n\n**2.5 Modal \u002F Popup (`.modal` — Hero \"Watch the Demo\")**\n* **States:** opening (fade + scale from 0.96), open, loading (spinner in the panel body — simulate a short 800ms \"demo loading\" then reveal content), success\u002Ferror, closing (reverse animation).\n* **UX:** centered flex overlay (`align-items: center`) with `rgba(23,19,16,0.6)` backdrop blur; `role=\"dialog\"`, `aria-modal=\"true\"`, labelled by the modal title; Google Icon close button; keyboard focus trapping; close via `Esc` and overlay click; focus returns to the trigger; body scroll locked; rendered at `--z-modal`.\n\n---\n\n## 3. PAGE STRUCTURE & CONTENT (all copy in English — real, on-brand copy; no lorem ipsum)\n\n**3.1 Header (sticky):** Wordmark \"MODULAR\" (Space Grotesk, letter-spaced) with mono subtag \"the patchbay synth\"; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ); the theme toggle; compact primary \"Pre-order\" button. On mobile the nav collapses behind an accessible hamburger (`aria-expanded`\u002F`aria-controls`) opening a full-screen flex overlay menu at `--z-dropdown`.\n\n**3.2 Hero:** Split flex layout (copy left, CSS-built synth panel right; stacks on mobile). Copy: mono badge (\"OS 2.0 — NOW SHIPPING\"), `h1` featuring \"MODULAR\" with a gradient-text accent word, subheadline, dual CTAs — primary \"Pre-order — $499\" and secondary \"Watch the demo\" (opens the 2.5 modal). The synth panel is pure CSS: a neumorphic slab containing knobs (conic-gradient indicators that rotate on hover), jack sockets (inset radial-gradient circles), and patch cables (thick `--gradient-cable` pseudo-element curves); a subtle animated \"signal flow\" along the cables must disable under `prefers-reduced-motion`. No images, no SVG. Decorative art carries `aria-hidden=\"true\"`.\n\n**3.3 Features (3 cards):** Flex row → column. Each card: Material Symbol icon inside a neumorphic socket (`cable`, `tune`, `graphic_eq`), mono module label (\"MOD-01\"), `h3`, and realistic copy covering the patch matrix, analog-modeled engine, and CV\u002FMIDI connectivity. A decorative gradient cable links the cards on desktop only.\n\n**3.4 How It Works (3 steps):** Three numbered \"rack modules\" (01–03, mono numerals) connected by a gradient patch cable: \"Patch it\" → \"Shape it\" → \"Play it\", each with an icon and concise copy.\n\n**3.5 Testimonials (3 quotes):** Neumorphic quote cards; avatars are CSS gradient circles with initials (no images); fictional-but-realistic producer\u002Fengineer names and roles; 5-star ratings using Material Symbol `star`.\n\n**3.6 Pricing (3 tiers):** e.g., \"MODULAR Kit\" \u002F \"MODULAR Studio\" (featured) \u002F \"MODULAR Lifetime\". Each tier: name, price (mono font), feature list with `check_circle` icons, CTA (featured gets `.btn--primary`, others `.btn--secondary`). The featured card uses a gradient ring and a \"Most Popular\" badge, distinct in light **and** dark mode. Fine print under the grid.\n\n**3.7 FAQ (6 items):** Accordion per 2.4, covering compatibility (DAW\u002Fstandalone), shipping regions, warranty, firmware updates, returns, and system requirements.\n\n**3.8 Final CTA:** Full-width `--gradient-warm` panel with cream text, `h2`, supporting line, and the `.input-group` newsletter capture (email + subscribe) implementing all 2.3 states, plus decorative CSS jack\u002Fcable accents.\n\n**3.9 Footer:** Flex layout with wordmark + tagline, secondary link groups (Product, Resources, Company — docs, community, support, privacy, terms), social icons via Material Symbols, and copyright with a dynamically injected year. Links are 44px touch targets; columns stack on mobile. Include a skip-to-content link as the first focusable element.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` typography, standard breakpoints, zero horizontal overflow at any viewport.\n* **Smooth animations:** every state change transitions with `var(--transition-normal)` \u002F `var(--transition-fast)`; knobs rotate, cards lift, buttons press, chevrons flip. All animation is disabled or reduced under `@media (prefers-reduced-motion: reduce)`.\n* **Accessibility:** WCAG AA contrast in light **and** dark mode; never rely on color alone for state; semantic landmarks (`header`\u002F`nav`\u002F`main`\u002F`section[aria-labelledby]`\u002F`footer`); a single `h1` with logical heading order; full keyboard operability everywhere; `aria-live` regions for form feedback and dynamic messages; visible `:focus-visible` styling on all interactive elements — neumorphic subtlety must never mask focus.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* Decorative CSS artwork (knobs, cables, sockets) is purely visual — `aria-hidden=\"true\"`, never carries content.\n* Anchor navigation uses smooth scrolling, disabled under `prefers-reduced-motion`.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>` reference; zero inline `\u003Cstyle>` blocks, zero inline event handlers, zero `style=\"...\"` attributes.\n* **`\u003Chead>`:** Google Fonts links (Space Grotesk, Inter, Space Mono), Material Symbols Rounded stylesheet, viewport meta, descriptive `\u003Ctitle>` (\"MODULAR — The Patchbay Synth\"), meta description.\n* **Naming convention:** BEM only, used consistently (`.hero__title`, `.features__grid`, `.pricing-card__price`, `.faq__question`, `.theme-toggle`, `.modal__panel`). Never mix conventions.\n* **`script.js` (vanilla, no frameworks):** theme toggle + `localStorage` persistence (first visit defaults to Light); mobile menu; FAQ accordion; modal logic (open\u002Fclose, focus trap, `Esc`, overlay click, focus restoration); newsletter validation with simulated loading → success\u002Ferror and `aria-live` feedback; dynamic footer year.\n* **Copy:** realistic, on-brand English copy authored by you — placeholders only where content was genuinely left unspecified (none is anticipated here).\n* **Single pass:** deliver the complete, functional page in your first output — no stubs, no follow-ups.\n",1791954992901]