[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-662-Creative-Mode":3},"# BUILD SPECIFICATION — \"CREATIVE MODE\" LANDING PAGE\n**Design-Studio · Multi-Accent · Expressive · Confident · 2020s Modern**\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page on the **first attempt**. This document is your binding specification — every rule is mandatory unless explicitly marked *(optional)*. Do not ask clarifying questions; make confident decisions within this spec.\n\n## 0. PROJECT BRIEF & VISUAL DIRECTION\n\n- **Theme:** Creative Mode — a design-led creative studio landing page on cream paper.\n- **Brand:** Fictional studio **\"Overprint®\"** (or invent an equally confident name; use it consistently everywhere).\n- **Sections, in this exact order:** Sticky Header → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials (3 quotes) → Pricing (3 tiers) → FAQ (5 items) → Final CTA (email capture) → Footer with secondary links.\n- **Binding visual direction:** Oversized, ultra-heavy Archivo Black headlines; cream paper surfaces; saturated multi-accent splashes (rotated chips, thick underline strokes, blob shapes) in green\u002Fpink\u002Forange\u002Fyellow; JetBrains Mono for all data, prices, numerals, and labels; Space Grotesk body; generous whitespace; alternate section backgrounds between `--bg-primary` and `--bg-secondary`, with one full-contrast band for the Final CTA. Nothing timid — expressive and confident.\n- **Palette constants (identical in both modes):** Ink `#0F0F0F` · Paper\u002FCream `#EFE9D9` · Cream 2 `#E4DCC4` · Green `#1F8A4C` · Pink `#F06CA8` · Orange `#E85A1F` · Yellow `#F5C518`.\n- **Accent distribution plan (prevent single-color monotony):** Hero highlights use pink block + yellow\u002Fgreen underline strokes; the three Feature cards cycle green → pink → orange; the three Process steps cycle green → pink → orange chips; Testimonial avatars\u002Fquote icons cycle pink → orange → green; Pricing tiers are green \u002F featured-ink-with-yellow \u002F orange; FAQ active accent is green; the CTA band and Footer each get a 4-color signature gradient rule (green→yellow→orange→pink).\n- **Copy:** Author original, confident, expressive marketing copy in **English only**. Lorem ipsum is forbidden.\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.\n- **Class\u002FID Selectors Only:** Every visual property, layout rule, and state is applied via class or ID selectors in `style.css`.\n- **Minimal HTML Modifications:** HTML stays clean, semantic, and style-agnostic. Reskinning the site must require editing `style.css` only — never the markup.\n- **No `\u003Cstyle>` blocks** and no styling `\u003Cscript>` logic inside `index.html`.\n\n### 1.2 CSS Variables & Theme Tokens\nAll tokens live in `:root`; theme switching redefines them under `.dark` (class on `\u003Chtml>`) and `@media (prefers-color-scheme: dark)`. Use these **exact** names:\n\n**Light mode (default — cream paper):**\n```css\n:root {\n  \u002F* Type *\u002F\n  --font-display: 'Archivo Black', sans-serif;\n  --font-base: 'Space Grotesk', sans-serif;\n  --font-mono: 'JetBrains Mono', monospace;\n  \u002F* Palette constants *\u002F\n  --ink: #0F0F0F; --paper: #EFE9D9; --cream-2: #E4DCC4;\n  \u002F* Surfaces & text *\u002F\n  --bg-primary: #EFE9D9; --bg-secondary: #E4DCC4; --bg-card: #F6F1E4;\n  --bg-inset: #fefefe; \u002F* never #ffffff anywhere *\u002F\n  --text-primary: #0F0F0F; --text-secondary: #4A4638;\n  \u002F* Accents *\u002F\n  --primary: #1F8A4C; --primary-strong: #166B3B; --secondary: #F06CA8;\n  --accent-orange: #E85A1F; --accent-yellow: #F5C518;\n  \u002F* Semantic *\u002F\n  --text-success: #17703E; --text-error: #C0261B;\n  --border-default: rgba(15,15,15,0.15); --border-success: #17703E; --border-error: #C0261B;\n  --focus-ring: #0F0F0F; --band-focus-ring: #F5C518;\n  \u002F* Inverted bands *\u002F\n  --cta-band-bg: #0F0F0F; --cta-band-text: #EFE9D9;\n  --card-feature-bg: #0F0F0F; --card-feature-text: #EFE9D9;\n  \u002F* Shape, depth, motion, stacking *\u002F\n  --radius-sm: 6px; --radius-md: 14px; --radius-lg: 28px; --radius-pill: 999px;\n  --shadow-sm: 0 2px 8px rgba(15,15,15,0.10); --shadow-md: 0 14px 32px rgba(15,15,15,0.16);\n  --spacing-gap: 1.5rem; --section-pad: clamp(4rem, 10vw, 7.5rem);\n  --transition-fast: 200ms; --transition-normal: 250ms;\n  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);\n  --z-header: 50; --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;\n}\n```\n**Dark mode (redefine in both `.dark` and the media query):**\n```css\n--bg-primary: #141310; --bg-secondary: #1E1C16; --bg-card: #1B1915; --bg-inset: #0F0F0F;\n--text-primary: #EFE9D9; --text-secondary: #C7C0AB;\n--primary: #2FAE63; --primary-strong: #1F8A4C;\n--text-success: #3CB671; --text-error: #FF7A70;\n--border-default: rgba(239,233,217,0.16); --border-success: #3CB671; --border-error: #FF7A70;\n--focus-ring: #EFE9D9; --band-focus-ring: #0F0F0F;\n--cta-band-bg: #EFE9D9; --cta-band-text: #0F0F0F;      \u002F* paper inversion *\u002F\n--card-feature-bg: #EFE9D9; --card-feature-text: #0F0F0F;\n--shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --shadow-md: 0 14px 32px rgba(0,0,0,0.55);\n```\n- **Contrast pairing matrix (enforced for every fill\u002Ftext combination, both modes):** Green `#1F8A4C` fill → white text **only** at large sizes (≥24px, or ≥18.66px bold); small white labels require `--primary-strong` fill (6.5:1). Pink, orange, and yellow fills → **ink** text (6.7:1 \u002F 5.4:1 \u002F 11.7:1). Ink\u002Fpaper band backgrounds → paper\u002Fink text respectively. Accent-colored small text directly on cream is **forbidden** — accents are decorative or large-display only; body text is always `--text-primary`.\n- **No pure white:** Light backgrounds are cream family; use `#fefefe` only where a near-white is genuinely needed (inputs, chips).\n- **Verify every pairing** at ≥4.5:1 for body text and ≥3:1 for large text and UI components in **both** modes.\n\n### 1.3 Mandatory Dark Mode Support\n- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class; switching themes must only swap variables — zero HTML restructuring.\n- **Persistence:** Store the choice in `localStorage` (key `overprint-theme`); on first visit fall back to `prefers-color-scheme`. `script.js` applies the class to `\u003Chtml>` as early as possible on load.\n- **Visible toggle control** in the header: icon button (min 44×44px), Material Symbols `dark_mode` \u002F `light_mode` icon swap, `aria-pressed` reflecting state, and an `aria-label` that updates (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- **Spec Exception:** The Creative Mode source spec declares \"Dark: ✗ None\"; per this specification's mandatory architecture, dark mode remains fully required and must be implemented as the ink↔paper inversion defined in §1.2 with identical accent hues.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- **Flexbox only** for all layout structure (`display: flex`, wrap, direction).\n- **Default alignment rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly declared. Authorized exceptions in this build: `.step` and `.accordion__item` content stacks use `align-items: flex-start` (justified: top-aligned reading flow); `.footer__col` uses `flex-start`.\n- **Mobile-first:** All multi-column rows collapse to a single column below ~860px via `flex-wrap` and flexible basis (`flex: 1 1 \u003Cmin>`); prevent horizontal scrolling at every viewport width (`overflow-x: clip` on `body`).\n- **Authorized technique exception:** CSS Grid (`grid-template-rows: 0fr → 1fr`) is permitted **only** as the FAQ panel height-reveal animation technique — never for page layout.\n\n### 1.5 Framework Default & CSS Approach\n- Build with **clean custom CSS** in `style.css`, organized in cascade-ordered layers (comments or `@layer`): `tokens → base → layout → components → states → utilities`.\n- Tailwind CSS is permitted *(optional)* — Play CDN or `@layer`\u002F`@apply` — but all colors, shadows, radii, and transitions must resolve to the CSS variables above; hardcoded hex values outside `:root`\u002F`.dark` token definitions are forbidden.\n- **One consistent naming convention:** BEM (`block__element--modifier`) for all component classes; generic layout primitives defined once (`.container`, `.stack`, `.cluster`, `.section`, `.section--band`, `.section-head`); state hooks via `.is-*` (`.is-open`, `.is-loading`, `.is-success`, `.is-error`, `.is-scrolled`). Never mix conventions.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- Include in `\u003Chead>`: Google Fonts links for **Archivo Black** (display), **Space Grotesk** 400\u002F500\u002F700 (body), **JetBrains Mono** 400\u002F700 (data), plus **Material Symbols Outlined**. Bind them to `--font-display`, `--font-base`, `--font-mono`.\n- **Role rules:** Archivo Black is used **only** for the brand wordmark, H1\u002FH2, card\u002Ftier\u002Fstep titles, and the marquee — never body copy. Space Grotesk for body, nav, buttons, links. JetBrains Mono for eyebrows, numerals, prices, data strips, labels, small print (often uppercase with wide tracking).\n- **Icons:** Google Material Symbols exclusively (`\u003Cspan class=\"material-symbols-outlined\">name\u003C\u002Fspan>`). **Raw inline SVGs and local icon files are forbidden.**\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--outline`, `.btn--accent`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px; `--radius-pill`; 700-weight Space Grotesk label; `transition: all var(--transition-fast) var(--ease-standard)`.\n- **Variants:** `--primary` = `--primary-strong` fill + white label; `--outline` = 2px `--text-primary` border, transparent fill, `--text-primary` label, hover fills with `--text-primary` bg and `--bg-primary` label; `--accent` = yellow fill + ink label (used on ink surfaces).\n- **Hover:** brightness lift + `--shadow-sm`; cursor pointer.\n- **Focus-visible:** `outline: 3px solid var(--focus-ring); outline-offset: 2px;` (inside inverted bands use `--band-focus-ring`).\n- **Active\u002Fpressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** disable pointer events, block double-clicks, render a CSS spinner (border spinner on `::after` or animated `progress` Material icon) **without changing button dimensions**; set `aria-busy=\"true\"`.\n- **Disabled (`.is-disabled` \u002F `disabled`):** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback using `--text-success` \u002F `--text-error` tokens plus a `check_circle` \u002F `error` Material icon — never color alone; confirm via an `aria-live` region.\n\n### 2.2 Card Component (`.feature-card`, `.testimonial-card`, `.pricing-card`)\n- **Default:** flex column; `--bg-card` surface; 1px `--border-default`; `--radius-lg`; `--shadow-sm`; padding `--spacing-gap` or more; `transition: transform var(--transition-normal) var(--ease-standard), box-shadow …`.\n- **Hover (interactive cards only):** `transform: translateY(-4px)` + `--shadow-md` (the \"subtle lift\" effect).\n- **Focus-within:** border shifts to `--primary` when a child link\u002Fbutton is focused (in addition to the child's own focus ring).\n- **Skeleton\u002FEmpty states:** Not required — all cards are static marketing content; do not ship dead CSS for them.\n- Each card family differentiates by **icon + title + accent modifier** (`.feature-card--green\u002F--pink\u002F--orange`), never by color alone.\n\n### 2.3 Form & Input (Final CTA email capture, `.input-group`)\n- **Structure:** flex container wrapping a real `\u003Clabel>` (`.visually-hidden` allowed), the `\u003Cinput>`, and a dedicated `.input-group__message` feedback container with `role=\"status\"` \u002F `aria-live=\"polite\"`.\n- **States (all styled in CSS):** empty; focused (`--band-focus-ring` ring on the band); filled; valid (success border + `check_circle` icon + `--text-success` message); invalid (`--border-error` + `error` icon + `--text-error` message, `aria-invalid=\"true\"`); disabled; read-only.\n- Input surface uses `--bg-inset` with `--text-primary` text; min-height 48px; `--radius-md`.\n\n### 2.4 FAQ Accordion (`.accordion__trigger` \u002F `.accordion__panel`)\n- **Markup:** each trigger is a `\u003Cbutton>` with `aria-expanded` + `aria-controls`; each panel has `role=\"region\"` + `aria-labelledby`.\n- **States:** trigger hover (background tint), focus-visible ring, expanded (chevron `expand_more` icon rotates 180° over 200ms, item gains a green left accent bar — rotation + border + ARIA, never color alone).\n- **Animation:** panel reveal via `grid-template-rows: 0fr → 1fr` (authorized in §1.4); `overflow: hidden; min-height: 0` on content.\n- Fully keyboard operable (native buttons); independent open\u002Fclose per item allowed.\n\n### 2.5 Overlay Panels & Modals (mobile nav)\n- The mobile nav panel is a fixed overlay at `--z-dropdown` (above the `--z-header` header), `--bg-primary` surface, animated in\u002Fout (translate + opacity, 250ms).\n- **Open\u002FClose states animated via CSS**; toggle button carries `aria-expanded`; `Esc` closes; focus moves into the panel on open and returns to the toggle on close; body scroll is locked while open.\n- If any true modal is added *(optional)*, it must additionally: center via flex (`align-items: center`), use `--z-modal`, dim the page with a backdrop, trap focus, close on overlay click and `Esc`, and show Open\u002FLoading\u002FSuccess\u002FError\u002FClosing states with CSS transitions.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via `clamp()` — H1 `clamp(3rem, 9vw, 7.5rem)`, H2 `clamp(2rem, 5vw, 3.5rem)`, card titles `clamp(1.25rem, 2vw, 1.5rem)`, body `1.0625rem\u002F1.65`; no horizontal overflow at any width.\n- **Smooth animations:** every state change transitions in 200–250ms with `--ease-standard`; every hover\u002Fclick produces visible feedback (lift, fill, underline, icon motion).\n- **Reduced motion:** ship a global block — inside `@media (prefers-reduced-motion: reduce)`, force `animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important` for `*, *::before, *::after`. The marquee pauses; lifts\u002Fscales are suppressed; accordion still functions instantly.\n- **Accessibility (a11y):** semantic landmarks (`header`, `main`, `footer`), one `h1` only, each `\u003Csection>` labeled via `aria-labelledby`; skip-to-content link visible on focus; logical DOM\u002Ffocus order; full keyboard operability — no mouse-only interactions; correct ARIA on all custom widgets; `aria-live` for form feedback; decorative icons\u002Fspans marked `aria-hidden=\"true\"`; contrast verified per §1.2 in both modes.\n- **Destructive actions:** none expected; if one is ever added, style it with `.btn--danger` using `--text-error`\u002F`--border-error`, visually distinct in **both** themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — three separate files. `index.html` contains **one** `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference and nothing else script-like; all JavaScript lives in `script.js`.\n- `\u003Chead>` includes: title (\"Overprint® — Design Studio…\" style), meta description, viewport tag, the Google Fonts + Material Symbols links, and the stylesheet.\n- **Naming:** BEM + the fixed primitives\u002Fstate hooks of §1.5, used consistently across all three files.\n- **Copy:** original, realistic English studio copy; `href=\"#\"` placeholders are permitted **only** for footer links with no in-page target (e.g., Privacy\u002FTerms); everything else is fully written.\n- No unused\u002Fdead CSS or JS; zero console errors; all interactive elements wired to real behavior.\n\n## 5. SECTION-BY-SECTION BUILD SPECIFICATION\n\n### 5.1 Sticky Header\nSticky top, `--z-header`, `--bg-primary` with `--border-default` bottom edge; `.is-scrolled` (toggled by JS at scrollY > 8) adds `--shadow-sm`. Flex row, `align-items: center`, space-between: Archivo Black wordmark \"OVERPRINT®\" (accent-colored ®), anchor nav (Features, Process, Pricing, FAQ), theme toggle (§1.3), a compact `.btn--primary` \"Start a project\", and a hamburger `nav-toggle` (Material `menu`\u002F`close` icon) below 860px that opens the §2.5 panel. Nav links: Space Grotesk, comfortable tap padding, hover underline-offset transition, visible focus rings.\n\n### 5.2 Hero\n`min-height: calc(100svh - 72px)`; centered flex column; two or three absolutely-positioned decorative accent blobs\u002Frotated squares via `::before\u002F::after` behind content. Eyebrow in mono uppercase wide-tracked green (\"● DESIGN STUDIO — EST. 2018\"). H1 in Archivo Black, `line-height: 0.95`, with 2–3 words wrapped in accent treatments: pink rotated chip (ink text), yellow and green thick underline strokes. Subhead Space Grotesk `--text-secondary`, max-width ~46ch. Dual CTAs (`.btn--primary` \"Start a project\" + `.btn--outline` \"See our work\"). Bottom data strip in JetBrains Mono separated by accent-colored bullets (\"EST. 2018 \u002F 214 PROJECTS \u002F 31 AWARDS \u002F 4 COUNTRIES\"). Directly below: a full-width marquee band with top\u002Fbottom borders — Archivo Black uppercase items (\"BRANDING ✦ DIGITAL ✦ MOTION ✦ STRATEGY\") scrolling via CSS keyframes with duplicated content; disabled under reduced motion.\n\n### 5.3 Features (3 cards)\nStandard section pattern: `--bg-primary`, `--section-pad`, `.section-head` with mono eyebrow + H2. `.features__grid` is a flex-wrap row, gap `--spacing-gap`, cards `flex: 1 1 300px`. Each `.feature-card`: 56px accent icon tile (`--radius-md`, accent per modifier, ink Material icon: `palette` \u002F `devices` \u002F `movie`), Archivo Black H3, Space Grotesk body, and a \"Learn more\" link with `arrow_forward` that translates 4px on hover. Card hover lift per §2.2; focus-within per §2.2.\n\n### 5.4 How It Works (3 steps)\nBand on `--bg-secondary`. Three `.step` columns (flex-wrap, collapse below 900px, dashed connector line via pseudo-element on desktop only, `aria-hidden`). Each step: a rotated (−2deg) accent chip numeral (\"01\" green, \"02\" pink, \"03\" orange — accent bg with ink mono bold numerals), Archivo Black step title, short Space Grotesk copy.\n\n### 5.5 Testimonials (3 quotes)\n`--bg-primary`. Flex-wrap row of three `.testimonial-card`s. Each: oversized decorative `format_quote` Material icon in the card's accent, quote in Space Grotesk, author row with 48px circle avatar (accent bg + bold ink initials), name (700) and role in mono uppercase `--text-secondary`. *(Optional)* a 5-star rating rendered as an ink pill containing yellow `star` icons (never yellow stars directly on cream — fails contrast; identical treatment in dark mode).\n\n### 5.6 Pricing (3 tiers)\nBand on `--bg-secondary`. Three `.pricing-card`s (flex-wrap). Tier identities: green \u002F featured \u002F orange. Featured middle card uses `--card-feature-bg`\u002F`--card-feature-text` (ink card on cream in light mode; paper card in dark mode), is elevated (`translateY(-6px)` + `--shadow-md` on desktop only, no scale on mobile), and carries an absolutely-positioned \"MOST POPULAR\" badge (yellow pill, ink mono uppercase text) that never causes layout shift. Prices in JetBrains Mono ~2.75rem with a mono suffix (\"\u002Fproject\"). Feature lists use `check_circle` icons — green on cream cards, yellow on the featured ink card — plus text. CTAs: featured → `.btn--accent`; others → `.btn--outline`. No billing toggle.\n\n### 5.7 FAQ (5 items)\n`--bg-primary`; centered max-width 760px; five Q&As with realistic studio copy (timelines, revisions, file ownership, process, collaboration) built exactly per §2.4.\n\n### 5.8 Final CTA\nFull-contrast band: `--cta-band-bg`\u002F`--cta-band-text` (ink band in light mode, paper band in dark mode), `--section-pad`, topped by the 6px four-color signature gradient rule, with one or two low-opacity accent splashes positioned away from text. Archivo Black H2, short supporting line, then the §2.3 email form in a flex-wrap row (max-width 560px): email input `flex: 1 1 240px` + `.btn--primary` submit \"Send it\". Focus rings inside the band use `--band-focus-ring`. On submit: validate → `.is-loading` (1.2s simulated) → `.is-success` with `check_circle` icon and an `aria-live` confirmation (\"Got it — we'll reply within 24 hours.\"); the input disables on success.\n\n### 5.9 Footer\n`--bg-secondary`, topped by the same 4-color gradient rule. Flex-wrap columns: brand block (wordmark, one-line tagline, mono address) + link columns (Explore: in-page anchors; Studio: About\u002FCareers\u002FJournal `href=\"#\"`; Contact: mono email + phone). Social row: mono uppercase text links (\"INSTAGRAM\", \"DRIBBBLE\", \"LINKEDIN\") each with a `north_east` Material icon. Bottom bar, flex space-between: \"© \u003Ccurrent year> Overprint®\" (year injected by JS), Privacy · Terms, and a mono sign-off line. Link hover: `--primary` color + underline offset; visible focus rings.\n\n### 5.10 JavaScript Behavior Contract (`script.js`)\n`'use strict'`, single IIFE, no globals; `defer` entry point only. Implement exactly: **(1)** theme init + toggle per §1.3; **(2)** header `.is-scrolled`; **(3)** mobile nav panel per §2.5 (aria-expanded, Esc, scroll lock, focus management); **(4)** FAQ accordion toggling `aria-expanded`; **(5)** smooth in-page anchor scrolling honoring `prefers-reduced-motion`; **(6)** CTA form validation, loading, and success flow per §5.8; **(7)** footer year injection. No other scripts, no console errors.\n",1791954990584]