[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-044-Industrial-Workbench-Schematic":3},"# System Prompt: Build \"Industrial Workbench Schematic\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Follow every rule below strictly. Do not ask clarifying questions; make sensible decisions where unspecified.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling must live in a dedicated `style.css` file. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n- Target all design properties, layout rules, and states exclusively via class or ID selectors.\n- HTML must remain clean, semantic, and style-agnostic: changing the site's look requires editing only CSS, never markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all visual tokens in `:root`:\n- Colors: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- Industrial palette mapping: `--bg-primary: #cfd3d6` (brushed steel background), `--text-primary: #1f1f1f`, `--primary: #ffc107` (accent), `--secondary: #8B4513` (rust), plus tokens for Steel `#71797E`, Rubber Black `#2B2B2B`, and Caution Yellow `#FFD700`.\n- Contrast pairing: every light background token pairs with dark text, every dark background token pairs with light text. Where a near-white is needed, use `#fefefe`, never `#ffffff`.\n- Structure tokens: `--radius-sm`, `--radius-md`, `--radius-lg` (keep radii small — 4px max — industrial hardware is not rounded), `--shadow-sm`, `--shadow-md` (realistic soft drop shadows), `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode Support**\n- The source spec marks Light\u002FDark as \"Full \u002F No\" — however, **dark mode is mandatory regardless**: define dark tokens under `@media (prefers-color-scheme: dark)` AND a `.dark` class. Dark mode should read as \"garage at night\": Rubber Black `#2B2B2B` backgrounds, brushed-metal dark textures, Caution Yellow `#FFD700` accents, light text.\n- Theme switching must not require HTML restructuring; persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit.\n- Include a visible toggle control with correct `aria-pressed` \u002F `aria-label` state, styled as a metal toggle switch or tool-switch aesthetic.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an explicitly justified exception exists.\n- Mobile-first: all rows (feature cards, pricing tiers, steps, footer columns) collapse to single-column stacks on small viewports. No horizontal scrolling at any breakpoint.\n\n**1.5 Framework**\n- Use Tailwind CSS (CDN or build) or clean custom CSS driven by Tailwind's `@layer` \u002F `@apply`. All utilities must map back to CSS variables or reusable class names (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Text: load **Roboto Condensed** via Google Fonts `\u003Clink>` and bind to `--font-base`. Headings may use a heavier condensed weight; body copy in regular weight.\n- Icons: **Google Material Symbols** only. Inline SVGs and local icon files are forbidden.\n- Industrial texture: apply the brushed aluminum background image (`https:\u002F\u002Fwww.transparenttextures.com\u002Fpatterns\u002Fbrushed-alum.png`) via CSS only, layered over `--bg-primary`. Simulate scratches, metallic plaques, and workshop tool borders with CSS gradients\u002Fborders — never with extra markup.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target. Style as metal plaques: 4px solid `#444` borders, 4px radius, brushed texture, caution-yellow primary variant.\n- Hover: brightness\u002Fshadow shift, `cursor: pointer`.\n- Focus: distinct focus ring via CSS variables for keyboard navigation.\n- Active: `transform: scale(0.97)`.\n- Loading: disables interaction, prevents double-clicks, renders an animated Google Icon spinner without changing button dimensions.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- Success\u002FError: temporary feedback states driven by `--text-success` \u002F `--text-error`.\n- `.btn-danger` (destructive) must be visually distinct in both themes.\n\n**2.2 Cards (Features, Pricing, Testimonials)**\n- Default: flexible Flexbox layout, `--bg-secondary` surfaces, 4px solid borders evoking metal plates or tool-etched edges, soft realistic drop shadows.\n- Hover: `transform: translateY(-2px)` and shadow elevation shift.\n- Focus-within: border highlight when a child link\u002Fbutton receives focus.\n- Loading: CSS shimmer skeleton animation with no layout shift.\n- Empty state: Google Icon + guidance text fallback structure.\n\n**2.3 Forms (FAQ search, CTA email capture, newsletter in footer)**\n- States: empty, focused (outline ring), filled, valid (success border\u002Ficon), invalid (error border, red text, error icon), disabled, read-only.\n- Structure: flex container wrapping label, input, and a dedicated error feedback container with `aria-live=\"polite\"`.\n- Style inputs as recessed metal panels (inset shadows, dark inner border).\n\n**2.4 Modals (FAQ answers may open in a modal)**\n- States: opening, open, loading, success\u002Ferror, closing — all CSS-transition animated.\n- Centered flex container, backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` and overlay clicks.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.\n- **Accessibility:** sufficient contrast in both modes; never rely on color alone; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); ARIA roles\u002Flabels on custom widgets (toggles, accordions, modals); logical focus order; full keyboard operability; `aria-live` regions for form errors, toasts, and loading states.\n- **Mandatory visual feedback** for every click, hover, and submission.\n- **Industrial flavor:** caution-yellow hazard stripe accents (CSS gradients) on section dividers or CTA bars; metallic plaque styling for section headings; rust `#8B4513` for secondary emphasis — but never at the cost of contrast.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n**Sections required (in order):**\n1. **Hero** — headline, subcopy, primary CTA button, secondary link; brushed-metal backdrop with subtle tool\u002Fworkshop texture; mobile-stacked flex layout.\n2. **Features** — 3 cards, each with a Google Material Symbol icon, title, and description.\n3. **How It Works** — 3 numbered steps with connecting visual flow (CSS-only connectors), each step on a metal plaque.\n4. **Testimonials** — 3 quote cards with attribution.\n5. **Pricing** — 3 tiers; middle tier visually elevated as \"recommended\" (caution-yellow highlight border).\n6. **FAQ** — accessible accordion (`\u003Cdetails>`\u002F`\u003Csummary>` or ARIA accordion), keyboard operable.\n7. **Final CTA** — full-width section with hazard-stripe accent bar and email capture form.\n8. **Footer** — secondary links grouped in flex columns, newsletter signup, copyright, theme toggle.\n\n**Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond one deferred entry-point reference. All user-facing copy in English, written to fit the rugged workshop\u002Fhardware tone (e.g., \"Built to last. Backed by pros.\"). No lorem ipsum — write real copy.\n\n**Naming:** one consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.\n",1791954980631]