[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-492-Streamline-Moderne":3},"# Landing Page Build Prompt — \"Streamline Moderne\" Theme\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete Landing Page on the first attempt. Deliver production-ready code — no placeholders where real copy is expected.\n\n**Theme:** Streamline Moderne (1930s Art Moderne) — aerodynamic curves, horizontal speed lines, rounded locomotive\u002Focean-liner silhouettes, silver\u002Fcream\u002Fchrome accents, sleek and futuristic-for-its-time.\n\n**Sections required:** 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- All styling lives in a dedicated `style.css` file. **Forbidden:** any `style=\"...\"` attribute in HTML.\n- All design properties, layout rules, and states must be targeted via class or ID selectors.\n- HTML must remain clean, semantic, and agnostic of visual styling — changing the look requires editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nUse the provided Streamline Moderne token block as your foundation, extended with these mandatory tokens:\n- Colors: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success` — map them onto the theme palette (`--primary: #16414d`, `--accent: #c9a34b`, `--chrome: #9aa7ac`, `--bg-primary: #f2efe9`, `--bg-secondary: #e6e2d8`, `--text-primary: #1c2226`, `--text-muted: #52605f`, `--border-default: #b9c1c6`).\n- **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce in both light and dark themes.\n- **Light Mode Background:** Never pure white; use `#fefefe` where a near-white surface is needed (map `--color-surface` accordingly).\n- Radius\u002Fshadows: `--radius-sm: 10px`, `--radius-md: 20px`, `--radius-lg: 40px`, `--radius-pill: 999px`; `--shadow-sm\u002Fmd\u002Flg` as specified.\n- Spacing\u002Ftransitions\u002Feasing: `--space-*` scale, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.16, 1, 0.3, 1)`.\n- Stacking: `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n- Theme motifs: keep `--speed-lines` (repeating horizontal chrome stripes) and `--chrome-band` (vertical chrome gradient) as signature decorative tokens.\n\n**1.3 Mandatory Dark Mode**\n- Define dark mode tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`; both must override the same variable names so switching requires zero HTML restructuring.\n- Dark palette suggestion: deep petrol `#0d1b20` background, `#12242b` surface, `#1c2226`-inverted text `#eef1f0`, muted `#9aa7ac`, primary shifts to a lighter teal `#3d7a8a`, accent gold `#d4b06a` — verify WCAG AA contrast in both modes before publishing.\n- Persist user choice via `localStorage`, falling back to `prefers-color-scheme` on first visit.\n- Include a visible theme toggle button (Google Icon `dark_mode`\u002F`light_mode`) with correct `aria-pressed` and `aria-label` states.\n\n**1.4 Flexbox Layout & Mobile-First**\n- Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment.\n- Mobile-first: multi-column rows (features, pricing tiers, steps) collapse to a single column on small viewports. No horizontal scrolling at any breakpoint.\n\n**1.5 Framework**\n- Use clean custom CSS driven by the provided token block (Tailwind optional via `@layer`\u002F`@apply` if you prefer, but the token variables and component classes below are mandatory). All utilities must map back to the theme variables and generic reusable class names (`.btn`, `.card`, `.input-group`, `.badge`, `.nav`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Text: load **Poppins** via Google Fonts `\u003Clink>` as `--font-sans`; load **Bebas Neue** as `--font-display` for headlines (period-appropriate condensed display). Bind both to variables.\n- Icons: **Google Material Symbols** only. **Forbidden:** raw inline SVGs, local icon files, or emoji icons.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons (`.btn`, `.btn--primary`, `.btn--danger`, `.btn--chrome`)**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — fully rounded pill (`--radius-pill`), minimum touch target 44×44px.\n- Hover: `transform: translateX(3px)` with `--shadow-md` shift and `cursor: pointer` (the \"speed\" nudge is the theme's signature interaction).\n- Focus: distinct `:focus-visible` ring using `--color-accent`, `outline-offset: 2px`.\n- Active\u002FPressed: `transform: scale(0.97)`.\n- Loading: `.is-loading` class — disables interaction, prevents double-clicks, swaps the label icon for an animated spinning Google Icon (`animation: spin`), without distorting button dimensions.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`, no transform.\n- Success\u002FError: temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n- `.btn--danger`: visually distinct destructive style in both light and dark themes.\n\n**2.2 Cards (`.card`)**\n- Default: Flexbox layout, `--radius-lg`, subtle border, `--shadow-md`, left speed-line band via `::before` (as specified in the token CSS).\n- Hover: `transform: translateY(-2px)` with `--shadow-lg` elevation shift.\n- `:focus-within`: highlight border in `--color-accent` when a child link\u002Fbutton receives focus.\n- Loading skeleton: shimmer animation class defined in CSS to prevent layout jumps.\n- Empty state: fallback layout with a Google Icon and clear guidance text.\n\n**2.3 Forms & Inputs (`.input`, `.input-group`)**\n- States: empty, focused (primary ring via `box-shadow` + `color-mix`), filled, valid (success border + check icon), invalid (error border, red text, error icon), disabled, read-only.\n- Structure: flex container wrapping label, input, and a dedicated error feedback element with `aria-live=\"polite\"`.\n\n**2.4 Modal \u002F FAQ Accordion**\n- FAQ may use native `\u003Cdetails>\u002F\u003Csummary>` styled via CSS, or a modal pattern if you choose modals: opening\u002Fopen\u002Fclosing animated with CSS transitions, centered flex overlay, backdrop, Google Icon close button, keyboard focus trapping, close via `Esc` and overlay click.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; wrap motion in `@media (prefers-reduced-motion: reduce)` to disable transforms\u002Fanimations.\n- **Accessibility:** WCAG AA contrast in both light and dark modes. Never rely on color alone to communicate state. Semantic HTML5 (`\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cnav>`, `\u003Cfooter>`), correct ARIA roles\u002Flabels on custom widgets (theme toggle, accordion), logical focus order, full keyboard operability.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Theme application:** apply the Streamline Moderne signature — repeating horizontal speed-line bands (`--speed-lines`) and chrome gradients (`--chrome-band`) on the nav, cards, buttons, hero, and footer; fully-rounded aerodynamic ends everywhere; nautical\u002Fmachine-form section dividers (rounded \"hull\" curves between sections).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — separate. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference. No inline CSS.\n- **Naming:** one consistent convention (BEM: `.card`, `.card__title`, `.card--featured`) across the entire deliverable — never mix conventions.\n- **Copy:** write all user-facing copy in **English**, in a 1930s Streamline Moderne voice — sleek, confident, machine-age optimism (e.g., \"Streamlined from bow to stern\", \"Built for speed, engineered for tomorrow\"). No lorem ipsum; write real headlines, feature copy, testimonial names\u002Fquotes, pricing tier details, and FAQ Q&As.\n- **Section content:** Hero (headline, subcopy, primary + secondary CTA, decorative speed-line motif), Features (3 cards with Google Icons), How It Works (3 numbered steps styled as a horizontal \"assembly line\" with chrome connectors), Testimonials (3 quotes), Pricing (3 tiers, middle tier `.card--featured` with a `.badge`), FAQ (5–6 questions), Final CTA (full-width band with `--chrome-band` or primary background), Footer (brand, secondary links, legal line).\n- **JS scope:** theme toggle with `localStorage` persistence, FAQ accordion behavior (if not native `\u003Cdetails>`), smooth scroll to anchors, and any form feedback — all in `script.js`.\n\nProduce the complete, working code now.\n",1791954988141]