[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-810-Airbrush-70s-80s-Illustration":3},"# Build Prompt — Coding AI Deliverable: \"Airbrush \u002F 70s-80s Illustration\" Landing Page\n\n**Role & Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single first attempt. Theme: **Airbrush \u002F 70s–1980s Illustration** — the golden age of airbrushed sci-fi paperback covers, van murals, and retro album\u002Fposter art. Required sections: Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links. All user-facing copy must be authored in **English**.\n\n**Theme Direction (enforce this identity everywhere):**\n- Keywords: airbrushed, van art, smooth gradient shading and soft glows, chrome, lasers, fantasy sci-fi scenes, highly polished rendered surfaces, retro album\u002Fposter illustration.\n- Palette (dark-native, from the source spec): background `#1a0f2e`, surface `#2b1b3d`, surface-strong `#3d2554`, border `#6b4a8a`, text `#fdf3e7`, text-muted `rgba(253,243,231,0.72)`, primary `#ff6b35` (sunset orange), accent `#ff2e88` (hot pink), chrome `#cbd5e1` (polished silver).\n- **Signature move:** a soft radial \"airbrushed\" highlight — a glowing sunset arc feathered to transparency — painted over every raised surface to simulate polished, rendered sci-fi shading. It must repeat consistently on the nav, every card, and primary buttons (use the provided `--airbrush-glow` token).\n- Shadows are **colored glows** (orange\u002Fpink), never neutral grays.\n- Light\u002FDark note (translated from source): *the source specification does not declare light\u002Fdark modes; the page must be validated in both light and dark before publishing.* Treat the deep-purple palette as the dark theme and design a full light adaptation (see 1.3).\n- All decorative artwork must be pure CSS: layered radial gradients (airbrush sun\u002Fhorizon arcs), laser gradient lines, starfield dots via gradients\u002Fbox-shadows, chrome lettering via `background-clip: text`. No raster images, no external image assets, no inline SVG.\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- Keep all styling strictly inside `style.css`. **Forbidden:** any `style=\"...\"` attribute in HTML.\n- Target every design property, layout rule, and state via class or ID selectors only.\n- HTML must remain clean, semantic, and styling-agnostic — a full retheme must be possible by editing CSS only.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine the mandated canonical token set in `:root`, seeded with the source-spec values:\n- Colors: `--primary: #ff6b35`, `--secondary: #ff2e88`, `--bg-primary: #1a0f2e`, `--bg-secondary: #2b1b3d`, `--bg-elevated: #3d2554`, `--text-primary: #fdf3e7`, `--text-secondary: rgba(253,243,231,0.72)`, `--border-default: #6b4a8a`, `--chrome: #cbd5e1`.\n- **Mandatory additions missing from the source spec** — you must define them with WCAG-compliant contrast: `--text-success`, `--text-error`, `--border-success`, `--border-error` (suggest luminous mint ~`#7ef0b0` and hot red ~`#ff5d73` for dark; deeper `#0e8f52` \u002F `#c81e3f` for light). Verify ≥ 4.5:1 for text on the paired background in **both** themes.\n- Keep the spec's supplementary tokens: `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg: 32px`, `--radius-pill: 999px`, `--shadow-sm\u002Fmd\u002Flg` (colored glow shadows), the full `--text-*` type scale, the `--space-*` scale, `--bg-image`, and `--airbrush-glow`.\n- Define the mandated tokens the spec lacks: `--spacing-gap` (map to `--space-6`), `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.3, 0, 0.15, 1)`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.\n- **Contrast pairing:** every dark background token pairs with a light text token, every light background token pairs with a dark text token — enforced in every theme, not just the default.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark mode must always be defined. The provided deep-purple palette is the **dark theme (default)**; additionally design a full **light theme**.\n- Light mode direction: warm cream backgrounds fitting the sunset\u002Fairbrush mood (e.g., `#fdf6ec` \u002F `#f8ecdc`); never default to pure white — where a near-white is required, use `#fefefe` instead of `#ffffff`. Text flips to deep purple (≈ `#241533`); primaries stay orange\u002Fpink but are tuned for AA contrast on cream; airbrush gradients and glows are re-tuned (softer opacity, darker glows) for the light background.\n- Implementation: light values in `:root`, dark overrides under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`, so switching requires zero HTML restructuring.\n- Persistence: store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme` (if the OS expresses no preference, apply the dark-native theme). Provide a visible toggle in the nav using a Google Material Symbol icon, with correct `aria-pressed` state and `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox (Tailwind flex utilities or equivalent custom classes).\n- Every flex container must default to `align-items: center` (`items-center`) unless an exception is explicitly justified in a CSS comment (e.g., `align-items: stretch` for equal-height pricing cards).\n- Mobile-first: rows collapse to columns on small viewports; zero horizontal scrolling at any width.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS, or clean custom CSS driven by Tailwind's `@layer` \u002F `@apply` directives. The provided seed CSS is the foundation — integrate its values via Tailwind theme extension or `@layer components`.\n- All utility classes must map back to CSS variables or reusable generic classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Text: load fonts from Google Fonts only, via `\u003Clink>` (with preconnect) or `@import`, bound to `--font-base`. **Exception clause:** the source spec requests 'Avenir Next', 'Century Gothic', and 'Eurostile', which are not Google Fonts — honor their character by loading Google equivalents (geometric sans for body, e.g., **Poppins** or **Questrial**; squared sci-fi display face for headings, e.g., **Chakra Petch** or **Michroma**) while keeping the original stacks as fallbacks: `--font-base: 'Poppins', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;` and `--font-display: 'Chakra Petch', 'Eurostile', 'Century Gothic', sans-serif;`.\n- Icons: Google Material Symbols only (e.g., `rocket_launch`, `auto_awesome`, `bolt`, `flare`, `check_circle`, `star`, `arrow_forward`, `menu`, `close`). **Forbidden:** raw inline SVGs and local icon files.\n- **Chrome lettering:** render the hero headline (and the featured pricing tier's accents) as polished chrome — a multi-stop silver gradient (`#f8fafc → #cbd5e1 → #94a3b8 → #e2e8f0`) with `background-clip: text` and a soft glow, plus a solid-color fallback for contrast; in light mode, use darker steel tones to preserve AA contrast.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component** (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger` if a destructive action exists)\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum touch target 44×44px, pill radius `--radius-pill`, display font.\n- `.btn--primary`: the signature `--airbrush-glow` layered over the orange→pink gradient, borderless, dark text `#1a0f2e`, weight 800.\n- Hover: brightness\u002Fshadow elevation shift with `translateY(-2px)`, `cursor: pointer`.\n- Focus: distinct visible ring on `:focus-visible` using `--chrome` or `--secondary` (`outline` or `box-shadow`) for keyboard navigation.\n- Active\u002Fpressed: `transform: scale(0.97)`.\n- Loading: `[aria-busy=\"true\"]` \u002F `.is-loading` — disables interaction, prevents double-clicks, and renders a CSS spinner or rotating Google icon **without changing button dimensions**.\n- Disabled: `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- Success\u002FError: temporary feedback styles driven by `--text-success` \u002F `--text-error` (used by the Final CTA form submit).\n\n**2.2 Card Component** (`.card` — used by Features, Testimonials, Pricing, FAQ panels)\n- Default: flexbox layout, `--bg-secondary`\u002F`--bg-elevated` surface, `1px solid var(--border-default)`, `--radius-lg`, colored glow `--shadow-md`, and the signature `--airbrush-glow` overlay.\n- Hover: `translateY(-2px)` plus glow elevation shift (pointer-fine devices only).\n- Focus-within: card border highlights when a child link\u002Fbutton receives focus.\n- Loading (skeleton): shimmer animation defined in CSS to prevent layout jumps.\n- Empty state: structured fallback with a Google Icon and clear guidance text.\n\n**2.3 Form & Input Requirements** (Final CTA email capture)\n- `.input` states: empty, focused (accent ring, e.g., `box-shadow: 0 0 0 3px rgba(255,46,136,0.3)`), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, error icon, error message in `--text-error` — never color-only: pair icon + message), disabled, read-only.\n- Structure: flex container wrapping a `\u003Clabel for>`, the `\u003Cinput>`, and a dedicated error-feedback `\u003Cp>` wired via `aria-describedby` and `aria-invalid`.\n- Submit flow: loading → success, announced via an `aria-live=\"polite\"` region.\n\n**2.4 FAQ Accordion & Overlays**\n- FAQ: accessible accordion — `\u003Cbutton aria-expanded aria-controls>` heading toggling a region panel; smooth CSS height\u002Fopacity transition; rotating chevron (Material Symbol); full keyboard operability; no mouse-only interaction.\n- If any modal\u002Fpopup is introduced, it must cover opening \u002F open \u002F loading \u002F success-error \u002F closing states (all CSS-animated), a centered flex container (`align-items: center`), backdrop overlay, Google-icon close button, keyboard focus trapping, Esc and overlay-click closing, and `--z-modal` \u002F `--z-toast` stacking. If none is required, do not invent one.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- Responsive by default: fluid `clamp()` typography, breakpoints, zero horizontal overflow.\n- Smooth animations: `transition: var(--transition-normal) var(--ease-standard)` on all state changes; respect `prefers-reduced-motion` — disable transforms, starfield twinkle, and spinner motion (keep opacity-safe fades).\n- Accessibility: AA contrast in **both light and dark**; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles\u002Flabels on the theme toggle, accordion, mobile menu, and pricing switch; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for all dynamic feedback (form errors, pricing updates, toasts).\n- Mandatory visual feedback: every click, hover, and submission triggers a visible state change.\n- Destructive actions (if any, e.g., \"Cancel plan\"): `.btn-danger` visually distinct in both themes.\n- Decorative section dividers: glowing 2px laser lines — `linear-gradient(90deg, var(--primary), var(--secondary))` with a soft glow — marked `aria-hidden=\"true\"`.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- Files: separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference.\n- Naming: one consistent **BEM** convention throughout (`.card`, `.card__title`, `.btn--primary`, `.faq__item`, `.pricing__tier`). Never mix conventions.\n- No unrequested placeholders: the user supplied no copy, so author original, on-theme English marketing copy for a fictional product in the retro sci-fi\u002Fchrome\u002Flaser spirit (e.g., a creative or design tool). **No lorem ipsum anywhere.** All labels, headings, and link text must be meaningful and internally consistent.\n- Preserve this provenance comment in `style.css`: `Reference specification: references\u002F00-flagship-implementation-specs\u002Fairbrush.md`.\n- Global head requirements: `\u003Chtml lang=\"en\">`, viewport meta, `\u003Cmeta name=\"color-scheme\" content=\"light dark\">`, unique `\u003Ctitle>` and meta description on theme, and a visually hidden skip-to-content link.\n\n## 5. PAGE SECTION REQUIREMENTS\n\n**5.1 Nav (persistent):** floating pill `.nav` with the `--airbrush-glow` surface; brand wordmark in the display font (chrome or gradient text); anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with a hover laser-underline effect; theme toggle (per 1.3); primary \"Get Started\" button. On mobile: hamburger (`menu` Material Symbol) opens a dropdown panel at `--z-dropdown`, fully keyboard operable with `aria-expanded`.\n\n**5.2 Hero:** full-viewport; layered `--bg-image` plus CSS-only airbrush artwork — a setting sun as a radial-gradient arc, a horizon laser line, scattered starfield dots; a `.badge` kicker; a display headline in chrome lettering or primary→accent gradient text; subcopy in `--text-secondary`; two CTAs (`.btn--primary` with `rocket_launch` icon + `.btn--ghost` with `arrow_forward`); a scroll cue.\n\n**5.3 Features (3 cards):** responsive grid (single column on mobile); each `.card` contains a gradient icon chip (Material Symbol), a title, and 2–3 lines of copy; hover lift and focus-within glow per 2.2.\n\n**5.4 How It Works (3 steps):** numbered steps connected on desktop by a glowing gradient laser line that collapses to a vertical stack on mobile; each step has a chrome-gradient number badge, a heading, and copy; optional scroll-reveal fades that respect reduced motion.\n\n**5.5 Testimonials:** 3 quote `.card`s; CSS gradient avatar circles with initials (no photos); italic quote, author name, role; a 5-star row using Material Symbol `star` with an `aria-label` on the group.\n\n**5.6 Pricing (3 tiers):** middle tier featured — scaled up, chrome gradient border, `--airbrush-glow` surface, `.badge` \"MOST POPULAR\"; every tier: name, price, feature list with `check_circle` icons, CTA (featured uses `.btn--primary`). Include a monthly\u002Fyearly billing toggle: a segmented control with `aria-pressed` (or radiogroup) states, prices updating with `aria-live=\"polite\"` and a CSS transition; verify the featured tier's contrast in **both light and dark** (explicit source requirement).\n\n**5.7 FAQ:** 5–6 realistic Q&A accordion items about the fictional product, built per 2.4.\n\n**5.8 Final CTA:** high-impact panel — `--airbrush-glow` over a primary→accent gradient or elevated surface with `--shadow-lg`; headline, supporting copy, and an email-capture form per 2.3 (label, input, `.btn--primary` submit). Success triggers the button's success state plus an inline `aria-live` confirmation; invalid input shows inline error feedback.\n\n**5.9 Footer:** multi-column secondary links (Product, Company, Resources, Legal) with authored labels; social icons as Material Symbols with `aria-label`; brand wordmark; copyright line with a dynamically generated year via `script.js`.\n\n## 6. FINAL VALIDATION CHECKLIST (before you submit)\n\n- Zero inline styles; zero inline SVGs; zero lorem ipsum.\n- Both light and dark themes render with AA contrast and correct toggle persistence (source spec explicitly requires validating light and dark before publishing).\n- All flex containers use `align-items: center` unless a commented exception exists; no horizontal scroll at any width from 320px up.\n- Every interactive element has visible default, hover, focus, active, loading, and disabled treatments.\n- All mandated tokens (`--text-success`, `--text-error`, `--border-success`, `--border-error`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--z-dropdown`, `--z-modal`, `--z-toast`) are defined and used.\n",1791954993293]