[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-683-Studio":3},"# BUILD PROMPT — \"STUDIO\" HIGH-VOLTAGE DESIGN-STUDIO LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page specified below in a single attempt — full files, no TODOs, no truncated output, no follow-up questions.\n\n**Design Identity:** A 2020s electric design-studio site. Near-black canvas (`#1c1c1c`) with electric yellow (`#f5d200`) used as BOTH foreground type and accent. Barlow 900 uppercase display typography, loud high-contrast micro-interactions, glow\u002Fshadow accents on the dark canvas, and periodic reversals to a yellow-paper mode (`#f5d200` background, near-black type) for breathing sections.\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* Target every visual property, layout rule, and state exclusively via class or ID selectors.\n* Keep HTML semantic, clean, and style-agnostic: a full visual re-theme must be achievable by editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\n* Define all visual tokens as CSS variables in `:root` (dark theme = default) and override them in a `.paper` theme class.\n* Dark theme (default): `--primary: #f5d200`, `--secondary: #242422`, `--accent: #f5d200`, `--bg-primary: #1c1c1c`, `--bg-secondary: #242422`, `--bg-inverted: #f5d200`, `--text-on-inverted: #1c1c1c`, `--text-primary: #f5d200`, `--text-secondary: #b8b7ab`, `--text-success: #4ade80`, `--text-error: #ff6b6b`, `--border-default: #3a3a36`, `--border-success: #4ade80`, `--border-error: #ff6b6b`, `--focus-ring: #f5d200`, `--shadow-glow: 0 0 24px rgba(245, 210, 0, 0.35)`.\n* Paper (light) theme overrides: `--bg-primary: #f5d200`, `--bg-secondary: #1c1c1c`, `--bg-inverted: #1c1c1c`, `--text-on-inverted: #f5d200`, `--text-primary: #1c1c1c`, `--text-secondary: #45412c`, `--text-success: #166534`, `--text-error: #b91c1c`, `--border-default: rgba(28, 28, 28, 0.35)`, `--border-success: #166534`, `--border-error: #b91c1c`, `--focus-ring: #1c1c1c`, `--shadow-glow: 0 0 24px rgba(28, 28, 28, 0.25)`.\n* Shared tokens (both themes): `--radius-sm: 0.125rem`, `--radius-md: 0.25rem`, `--radius-lg: 0.5rem` (sharp, loud look — keep radii small), `--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4)`, `--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5)`, `--spacing-gap: 1rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--z-dropdown: 1000`, `--z-modal: 1100`, `--z-toast: 1200`, `--font-base: 'Barlow', sans-serif`.\n* **Contrast pairing is mandatory in BOTH themes:** every light background pairs with dark text, every dark background with light text. Verify every surface\u002Fforeground combination.\n* Never use pure `#ffffff`; if a near-white is ever needed, use `#fefefe` (this theme should not need it — yellow paper is the light surface).\n\n**1.3 Mandatory Dark Mode & Theme Toggle**\n* This theme is dark-native: the near-black + electric-yellow presentation is the default and must be fully realized.\n* The mandatory light mode is the spec's \"yellow-paper reversal\": the `.paper` class flips the canvas to `#f5d200` with near-black type, while the inverted breathing sections automatically flip to near-black with yellow type — preserving the page's voltage rhythm in both modes.\n* Implement switching by toggling the theme class on `\u003Chtml>`; all changes flow through CSS variables — zero HTML restructuring.\n* First visit: honor `prefers-color-scheme` (fallback default: dark). Persist the user's choice via `localStorage` (e.g., key `studio-theme`) and apply it before first paint to prevent flash.\n* The header must contain a visible toggle button containing both Material Symbols icons (`dark_mode`, `light_mode`), shown\u002Fhidden purely via CSS based on the active theme class. JS must keep `aria-pressed` (true when paper mode is active) and a dynamic `aria-label` (e.g., \"Switch to yellow-paper mode\") in sync.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all structure with Flexbox (`display: flex`). Multi-card rows use `flex-wrap` with `flex-basis` — do not use CSS grid.\n* Every flex container **defaults to `align-items: center`** unless an exception is explicitly justified (permitted exceptions: text blocks inside cards may use `flex-start`; full-width children may use `stretch`).\n* Mobile-first: single-column stacks below `640px`; rows adapt at `768px`\u002F`1024px`. No horizontal scrolling at any viewport ≥ 320px (`overflow-wrap` on long words; the marquee track is contained with `overflow: hidden`).\n\n**1.5 Framework: Tailwind CSS (Structure Only)**\n* Load Tailwind via Play CDN. Use its utilities ONLY for structural layout (flex, alignment, gap, padding, max-width, wrap).\n* ALL colors, typography, borders, shadows, and effects come from semantic component classes in `style.css` bound to the CSS variables. No `dark:` variants, no arbitrary color values in markup, no inline Tailwind config script.\n* Required reusable classes: `.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`, `.card`, `.card--featured`, `.input-group`, `.section`, `.section--paper`, `.badge`, `.faq`, etc.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load Barlow from Google Fonts (weights 500, 700, 900) via `\u003Clink>`; bind to `--font-base`.\n* Display type: Barlow 900, `text-transform: uppercase`, tight leading (0.95–1.05). Hero headline: `clamp(3rem, 6vw, 6rem)`. Section headings: `clamp(2rem, 5vw, 5rem)`. Body copy: Barlow 500, normal sentence case, 1–1.125rem, line-height 1.6 — never uppercase body text.\n* Icons: Google Material Symbols (Outlined) via Google Fonts `\u003Clink>`. Inline SVGs and local icon files are **forbidden**.\n* Icon set to use: `bolt`, `check`, `check_circle`, `close`, `arrow_forward`, `format_quote`, `dark_mode`, `light_mode`, `menu`, `mail`, `alternate_email`, `error`, `expand_more`, plus `palette`, `animation`, `devices` for feature cards.\n\n---\n\n### **2. COMPONENT DESIGN SPECIFICATIONS**\n\n**2.1 Buttons**\n* `.btn`: `display: flex`, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, uppercase Barlow 700, minimum touch target 44×44px, `border-radius: var(--radius-md)`.\n* Variants: `.btn--primary` (accent fill, `--text-on-inverted` text — flips with theme), `.btn--ghost` (1px accent border + accent text), `.btn--danger` (visibly distinct red in BOTH themes).\n* Hover: bold color shift within `var(--transition-fast)` (150ms) — e.g., primary inverts to outline, ghost fills — plus `cursor: pointer` and a glow\u002Fbrightness shift.\n* Focus: distinct `:focus-visible` ring via `outline: 3px solid var(--focus-ring)` with offset. Never remove it.\n* Active: `transform: scale(0.97)` high-contrast pressed feedback.\n* Loading: `.btn--loading` blocks interaction and double-clicks (`pointer-events: none`, `aria-busy=\"true\"`), rendering a CSS border-spinner that does NOT distort button dimensions.\n* Disabled: `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* Success\u002FError: temporary `.btn--success` \u002F `.btn--error` states driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Cards**\n* `.card`: flex column, `background: var(--bg-secondary)`, 1px `var(--border-default)` border, `border-radius: var(--radius-md)`, generous padding.\n* Hover: `transform: translateY(-2px)` plus a shadow\u002Fglow shift (`--shadow-glow`) within 150ms.\n* Focus-within: card border highlights in `--accent` when a child link\u002Fbutton receives focus.\n* Skeleton\u002Fempty states: NOT applicable — all card content is authored static copy; do not invent skeleton loaders.\n\n**2.3 Forms & Inputs (Final CTA email capture)**\n* Structure: `.input-group` flex container (row ≥ 768px, column below) wrapping a visible `\u003Clabel>`, an `\u003Cinput type=\"email\">`, the submit `.btn`, and a dedicated error\u002Fstatus `\u003Cp>` bound to `aria-live=\"polite\"`.\n* Input states via classes: empty, focused (accent ring), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, `error` icon, error text in `--text-error` — never color alone), disabled, read-only.\n* Submit flow: prevent default → validate email format → on invalid: inline error + `aria-live` announcement → on valid: `.btn--loading` for ~1.2s → `.btn--success` + success message (\"We'll be in touch.\") announced via `aria-live` → reset after ~4s.\n\n**2.4 FAQ Accordion (no modal required)**\n* No modal\u002Fpopup is needed for this build — do not add one.\n* Build the FAQ from native `\u003Cdetails>`\u002F`\u003Csummary>` for free keyboard and a11y semantics; each `\u003Csummary>` wraps an `\u003Ch3>`.\n* Summary: uppercase Barlow 700; a chevron Material Symbol (`expand_more`) rotating 180° on `[open]`; items separated by `--border-default`.\n* Animate open\u002Fclose in pure CSS (grid-rows or max-height technique) with a graceful non-animated fallback; the rotation must respect `prefers-reduced-motion`.\n\n---\n\n### **3. CORE UX & MICRO-INTERACTION RULES**\n\n* **Responsive by default:** fluid sizing via `clamp()`; verify at 320px, 768px, 1024px, and 1440px with zero horizontal overflow.\n* **Smooth animations:** every state change transitions — 150ms for hover\u002Fcolor shifts, 300ms for layout\u002Freveal — using `--ease-standard`. Wrap all motion in `@media (prefers-reduced-motion: no-preference)`; reduced-motion users get no marquee scroll, no transforms, instant opacity changes.\n* **Accessibility (a11y):** WCAG AA contrast in BOTH themes (verify `--text-secondary` on both canvases). Never communicate state by color alone — always pair icons with text. Semantic HTML5 landmarks (`header`, `nav[aria-label]`, `main`, `section[aria-labelledby]`, `footer`), a skip-to-content link, exactly one `h1` with a logical h2→h3 hierarchy, full keyboard operability (Tab, Enter, Space, Esc), visible `:focus-visible` styles on every interactive element, and `aria-live` regions for all dynamic feedback (form errors, success, loading).\n* **Mandatory visual feedback:** every hover, click, and submission produces a visible state change.\n* **Destructive actions:** none on this page, but `.btn--danger` must still be defined and legible in both themes.\n\n---\n\n### **4. LANDING PAGE BLUEPRINT (all copy in English, realistic design-studio voice, NO lorem ipsum)**\n\nGeneral: this is a type-driven design — no photography or images anywhere. Avatars are initial-monogram circles styled in CSS. Alternate dark and paper sections to create voltage rhythm. Numbered section eyebrows (\"01\", \"02\"…) precede each h2.\n\n**4.0 Header (sticky):** Barlow 900 uppercase logo wordmark (e.g., \"VOLTAGE®\"); anchor nav (Services, Process, Pricing, FAQ); the theme toggle per 1.3; a mobile `menu`\u002F`close` toggle button (`aria-expanded`, `aria-controls`) revealing a flex-column nav panel — Esc closes it and returns focus to the toggle. Header sits at `--z-dropdown`.\n\n**4.1 Hero (dark):** full-viewport `min-height`; an eyebrow line; giant headline at `clamp(3rem, 6vw, 6rem)` Barlow 900 uppercase in `--text-primary` (e.g., \"WE MAKE BRANDS LOUD.\"); a one-sentence subhead in `--text-secondary`; two CTAs — `.btn--primary` \"Start a project\" with `arrow_forward` and `.btn--ghost` \"See our work\". Add a subtle yellow radial glow accent behind the type.\n\n**4.2 Marquee band (inverted strip):** a `--bg-inverted` strip with an infinite CSS-keyframe ticker of uppercase keywords (\"BRANDING\", \"MOTION\", \"WEB\", \"ART DIRECTION\", \"TYPE\") separated by `bolt` icons; duplicate the track with `aria-hidden=\"true\"` for a seamless loop; contain with `overflow: hidden`; disable animation under reduced motion.\n\n**4.3 Features \u002F Services (dark):** eyebrow \"01 — SERVICES\" + h2; three `.card`s in a flex-wrap row (1 column mobile → 3 columns ≥ 1024px), each with a Material Symbol icon (`palette` \u002F `devices` \u002F `animation`), an uppercase h3 (Brand Systems \u002F Digital Products \u002F Motion & Interaction), 2–3 sentences of copy, and a text link with `arrow_forward` that triggers the 2.2 focus-within highlight.\n\n**4.4 How It Works (paper section, `.section--paper`):** eyebrow \"02 — PROCESS\" + h2; three steps stacked on mobile, side-by-side ≥ 1024px: oversized Barlow 900 numerals 01\u002F02\u002F03, uppercase step titles (Brief it \u002F Build it \u002F Launch it), and short copy. Dark type on yellow here; flips automatically with the global theme per 1.3.\n\n**4.5 Testimonials (dark):** eyebrow \"03 — WORD ON THE STREET\" + h2; three quote `.card`s, each with a `format_quote` icon, a 1–2 sentence sentence-case quote, a monogram avatar circle, and a believable name + role\u002Fcompany.\n\n**4.6 Pricing (dark):** eyebrow \"04 — PRICING\" + h2; three tier cards in a flex-wrap row (e.g., Spark \u002F Studio \u002F Scale) with a per-project price, 4–5 feature lines each prefixed by `check` icons, and one CTA per tier. The middle tier uses `.card--featured`: 2px accent border + `--shadow-glow`, slight elevation, and a `.badge` \"MOST POPULAR\" (accent fill, `--text-on-inverted` text). Featured CTA is `.btn--primary`; the others are `.btn--ghost`.\n\n**4.7 FAQ (dark):** eyebrow \"05 — FAQ\" + h2; 5–6 `\u003Cdetails>` items per 2.4 with realistic Q&As (timelines, pricing model, revision rounds, handoff files, process).\n\n**4.8 Final CTA (paper section):** a giant uppercase headline (\"READY TO GET LOUD?\") plus the email capture `.input-group` per 2.3.\n\n**4.9 Footer (dark, on `--bg-secondary`):** logo + one-line tagline; secondary link columns (Studio: Work, About, Careers, Contact; Legal: Privacy, Terms); contact\u002Fsocial links using generic Material Symbols (`mail`, `alternate_email`, `public`), each with a descriptive `aria-label` — no brand logos; a copyright line.\n\n---\n\n### **5. DELIVERABLE & OUTPUT FORMAT**\n\n* **Files, exactly:** `index.html`, `style.css`, `script.js`. The only script reference in the HTML is a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. All external dependencies load via `\u003Clink>` CDNs (Tailwind Play, Google Fonts Barlow, Material Symbols).\n* **Naming convention:** one convention only — BEM (`block__element--modifier`) for all custom classes, with Tailwind utilities restricted to structure per 1.5. Never mix conventions, never invent one-off names.\n* **JavaScript scope (`script.js` only):** theme init\u002Ftoggle\u002Fpersistence (1.3), mobile menu open\u002Fclose (4.0), the email form validate → loading → success flow (2.3), and an optional IntersectionObserver reveal enhancement (sections visible by default without JS; disabled under reduced motion). Nothing else — no libraries, no dead code.\n* **Progressive enhancement:** with JS disabled, the page must remain fully readable and navigable (details\u002Fsummary and anchors still work).\n* **Copy:** 100% English, realistic design-studio voice; no lorem ipsum and no unrequested placeholder content — every label, heading, price, and feature line is final authored copy.\n* **Single attempt:** deliver complete, runnable code that works by opening `index.html`. Before finishing, verify: zero `style=` attributes, zero inline SVGs, zero inline scripts, the dark ↔ paper toggle persists across reload, a full keyboard pass (toggle, menu, links, form, FAQ), no horizontal scroll at 320px, AA contrast in both themes, and all animations respect `prefers-reduced-motion`.\n",1791954991118]