[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-013-Engineering-Blueprint-Schematic":3},"# LANDING PAGE BUILD SPEC — \"ENGINEERING BLUEPRINT SCHEMATIC\"\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page on the first attempt — one pass, no follow-up questions.\n\n**Project Brief:**\n- **Theme:** Engineering Blueprint Schematic — Technical, Precision, Engineered. Modern Industrial era. Keywords: blueprint, schematic, engineering, technical, grid, angular, wireframe, cyan, dark blue.\n- **Output Category:** Data & Engineering — the page promotes an engineering-grade data platform (e.g., precision data pipelines, telemetry, observability). Write all user-facing copy in English, grounded in this domain, in a technical tone.\n- **Sections (in this order):** Sticky Navigation, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n- **Visual Language:** exploded-view wireframes, angular leader lines with annotation labels, drafting grid background, technical iconography, neon-like line visibility. The page must read as an engineer's drafting sheet: dark blue paper, cyan schematic linework, orange annotation accents, monospaced type.\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. Target everything via class\u002FID selectors.\n- HTML stays semantic and style-agnostic: changing the theme must never require markup edits.\n\n**1.2 CSS Variables & Theme Tokens**\n- Define all tokens in `:root` (dark = default). No hardcoded hex values anywhere outside the token definitions — always `var(--...)`:\n\n```css\n:root {\n  --bg-primary: #0b1623;      \u002F* dark blue drafting paper *\u002F\n  --bg-secondary: #0f1e2e;   \u002F* elevated panel surface *\u002F\n  --text-primary: #f0f0f0;\n  --text-secondary: #8b9bb4; \u002F* dim annotation text *\u002F\n  --primary: #ff9f30;         \u002F* orange accent: CTAs, highlights, annotations *\u002F\n  --primary-contrast: #0b1623;\n  --secondary: #4dd0e1;       \u002F* schematic cyan: wireframes, leader lines, focus rings *\u002F\n  --grid-line: #1c2b3a;\n  --grid-size: 20px;\n  --text-success: #00ff9d;\n  --text-warning: #ff9f30;\n  --text-error: #ff5252;      \u002F* derived — source palette omits an error hue *\u002F\n  --border-default: #1c2b3a;\n  --border-success: #00ff9d;\n  --border-error: #ff5252;\n  --radius-sm: 0; --radius-md: 2px; --radius-lg: 4px; \u002F* angular theme: sharp corners *\u002F\n  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);\n  --shadow-md: 0 8px 24px rgba(0,0,0,.45);\n  --glow-cyan: 0 0 10px rgba(77,208,225,.28); \u002F* neon line visibility *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 250ms;\n  --ease-standard: cubic-bezier(.4, 0, .2, 1);\n  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;\n  --font-base: 'JetBrains Mono', monospace;\n  --font-body: 'Inter', sans-serif;\n}\n```\n\n- **Drafting grid background** (applied to `body` and reinforced in Hero\u002FFinal CTA panels via a `.blueprint-grid` class):\n\n```css\nbackground-color: var(--bg-primary);\nbackground-image: linear-gradient(var(--grid-line) 1px, transparent 1px),\n                  linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);\nbackground-size: var(--grid-size) var(--grid-size);\n```\n\n- **Contrast pairing (every theme):** dark backgrounds pair with light text; the orange fill pairs with `--primary-contrast` text. Light mode never uses pure `#ffffff` — use `#fefefe`.\n- **Light variant (\"Drafting Paper\") token overrides:** `--bg-primary: #fefefe; --bg-secondary: #eef2f7; --text-primary: #0b1623; --text-secondary: #46586e; --grid-line: #d8e1ea; --primary: #b45309; --primary-contrast: #fefefe; --secondary: #0e7490; --text-success: #00875a; --text-error: #d32f2f;` — accent hues are darkened specifically to preserve WCAG AA contrast on light paper.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark mode is fully defined via a `.dark` class \u002F `[data-theme]` attribute on `\u003Chtml>`; all token swaps happen in CSS with zero HTML restructuring.\n- Provide a visible theme toggle in the header (Material Symbol `dark_mode`\u002F`light_mode`) with correct `aria-pressed` and `aria-label` state. Persist the choice in `localStorage`; on first visit with no stored value, default to dark mode, honoring `prefers-color-scheme: light` by loading the drafting-paper variant.\n- **Exception (source spec):** the Engineering Blueprint Schematic specification designates a dark-first aesthetic (\"Light: No \u002F Dark: Full\") — dark is the default and dominant experience, and the light variant must remain a blueprint drafting-paper interpretation, never a generic light theme.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified.\n- Mobile-first: multi-column rows collapse to `flex-direction: column` below ~768px. No horizontal scrolling at any viewport width. Center content in a max-width container (~72rem).\n\n**1.5 Styling Approach**\n- Use clean custom CSS in `style.css`, optionally organized with `@layer` (tokens, base, components, utilities). Reusable component classes — `.btn`, `.card`, `.input-group`, `.blueprint-grid`, `.leader-line`, `.corner-brackets` — must map back to the CSS variables. Do not mix a utility framework with the BEM naming mandated in Section 4.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **JetBrains Mono** (400\u002F500\u002F700 — identity font for headings, nav, buttons, labels, annotations) and **Inter** (400\u002F500 — long-form body copy in Testimonials\u002FFAQ) via Google Fonts `\u003Clink>` tags, bound to `--font-base` \u002F `--font-body`.\n- Icons: **Google Material Symbols (Outlined)** only — e.g., `schema`, `precision_manufacturing`, `monitoring`, `task_alt`, `terminal`, `hub`, `insights`, `speed`, `expand_more`, `close`. Inline SVGs and local icon files are forbidden.\n\n**1.7 Blueprint Visual Effects (CSS-only)**\n- **Exploded-view wireframes:** compose from bordered `div`s (1px solid `var(--secondary)`), dashed connector lines, and `transform: translate\u002Frotate` offsets — no images, no SVG.\n- **Angular leader lines:** pseudo-element elbows (`border-left` + `border-bottom`) terminating in uppercase, letter-spaced annotation labels (\"FIG. 01\", \"SECTION A-A\", \"REV 2.4\") in `--text-secondary`.\n- **Corner brackets:** `::before`\u002F`::after` L-shaped borders in `--primary` or `--secondary` on cards and panels.\n- **Neon visibility:** `box-shadow: var(--glow-cyan)` on schematic lines and hover borders. All glow\u002Fpulse\u002Ffloat animations must be gated behind `@media (prefers-reduced-motion: no-preference)`.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button**\n- `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, uppercase JetBrains Mono label, sharp corners.\n- Variants: `.btn--primary` (fill `var(--primary)`, text `var(--primary-contrast)`), `.btn--secondary` (transparent, 1px cyan border, cyan text), `.btn--ghost`, `.btn--danger` (visually distinct in both themes).\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`, subtle glow. **Focus:** distinct ring via `outline: 2px solid var(--secondary); outline-offset: 2px;`. **Active:** `transform: scale(0.97)`. **Loading (`.is-loading`):** CSS spinner or rotating Material Symbol that preserves button dimensions, disables interaction, prevents double-clicks, sets `aria-busy=\"true\"`. **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success\u002FError:** temporary state classes tinting border\u002Ftext with `--text-success` \u002F `--text-error`.\n\n**2.2 Card**\n- **Default:** flexible flex column, `var(--bg-secondary)` surface, 1px `var(--border-default)`, corner brackets, sharp corners. **Hover:** `translateY(-2px)`, border shifts to `var(--secondary)`, `--shadow-md` + glow. **Focus-within:** border shifts to `var(--primary)` when a child link\u002Fbutton receives focus. **Loading:** shimmer skeleton animation defined in CSS to prevent layout jumps. **Empty state:** Material Symbol + clear guidance text fallback.\n\n**2.3 Form & Input**\n- `.input-group`: flex container wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error feedback element (`aria-live=\"polite\"`).\n- States: empty, focused (cyan ring), filled, valid (success border + check icon), invalid (error border + icon + message, `aria-invalid`, `aria-describedby`), disabled, read-only.\n\n**2.4 Modal \u002F Popup**\n- \"Request Demo\" dialog: `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; dark backdrop overlay; centered flex container (`align-items: center`); Opening\u002FOpen\u002FLoading\u002FSuccess\u002FError\u002FClosing states animated via CSS transitions; closes via `Esc`, overlay click, and a Material Symbol `close` button; keyboard focus is trapped inside and returns to the trigger on close.\n\n**2.5 Landing Page Section Blueprints**\n- **Sticky Navigation:** flex, `align-items: center`, `justify-content: space-between`; wordmark + technical Material Symbol; anchor links (Features, How It Works, Pricing, FAQ) with cyan underline-offset hover\u002Ffocus states; theme toggle (1.3); \"Request Demo\" `.btn--primary` opening the modal. Below 768px, collapses to a hamburger (`aria-expanded`) toggling a `--z-dropdown` flex-column panel.\n- **Hero:** two-column flex (copy + schematic), column on mobile. Eyebrow annotation with leader line (\"DWG NO. ENG-2025 · REV 2.4 · SCALE 1:1\"); H1 + subheadline in the data\u002Fengineering voice; primary CTA \"Start Building\" + secondary outlined \"View Documentation\"; CSS exploded-view wireframe with dashed leader lines and a \"FIG. 01 — PIPELINE SCHEMATIC\" label; status strip with pulsing success dot + \"ALL SYSTEMS NOMINAL\".\n- **Features (3 cards):** section header styled as a drawing title block (\"FIG. 02 — SYSTEM CAPABILITIES\"); three `.card` components in a flex row → column; each with a framed Material Symbol plate, index label (SYS-01…03), title, description, and a \"View spec →\" link (enables focus-within). Suggested topics: precision data pipelines, real-time telemetry, automated quality gates.\n- **How It Works (3 steps):** \"ASSEMBLY INSTRUCTIONS\" framing; three steps with oversized outlined numerals 01\u002F02\u002F03 joined by a dashed cyan connector (horizontal on desktop, vertical on mobile, pure CSS); step title + description each.\n- **Testimonials:** three cards styled as field\u002Finspection reports: quote, divider, author (name, role, company), and a metadata row with a success `task_alt` icon (\"VERIFIED · 99.99% UPTIME\").\n- **Pricing (3 tiers):** \"PROCUREMENT SPECIFICATIONS\"; Draft \u002F Engineer \u002F Enterprise; the middle tier is highlighted (orange border, \"RECOMMENDED SPEC\" label, elevated shadow); feature lists with success check icons; `.btn--primary` on the recommended tier, `.btn--secondary` elsewhere; the Enterprise CTA opens the modal. Optional monthly\u002Fannual billing toggle (`aria-pressed`, price changes announced via `aria-live`).\n- **FAQ:** native `\u003Cdetails>`\u002F`\u003Csummary>` accordion (keyboard-accessible without JS); summary shows the question plus an `expand_more` icon rotating 180° when open; smooth CSS open\u002Fclose animation respecting reduced motion; 5–6 Q&As.\n- **Final CTA:** full-width panel with intensified grid background + corner brackets; H2, short copy, and an email-capture `.input-group` + `.btn--primary` demonstrating the full state flow: focus → invalid (error message in `aria-live`) → valid (success border) → loading (spinner, disabled) → success (button success state + confirmation message).\n- **Footer:** flex\u002Fgrid columns — brand + tagline, secondary link groups (Product, Company, Resources), social icons (Material Symbols) with hover\u002Ffocus states; legal row with copyright and drafting annotations (\"SHEET 1 OF 1 · SCALE 1:1\").\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, breakpoints without horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; `prefers-reduced-motion` disables float\u002Fpulse\u002Fshimmer\u002Fscroll effects while preserving opacity-only feedback.\n- **Accessibility (a11y):** WCAG AA contrast in both themes; never rely on color alone — pair icons and text with every state; semantic landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); skip-to-content link; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, loading states, and dynamic feedback.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** any `.btn--danger` \u002F delete action must be visually distinct in both light and dark themes.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline styles, no inline scripts beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`), no inline SVGs. Include `lang=\"en\"`, viewport meta, title, and meta description.\n- **Naming:** BEM exclusively (`.hero__title`, `.feature-card__icon`, `.btn--primary`, …). Never mix conventions.\n- **`script.js` scope:** theme toggle + `localStorage` persistence + `prefers-color-scheme` fallback; mobile nav toggle; modal open\u002Fclose + focus trap + `Esc`; form validation + simulated async submit (loading → success); optional pricing billing toggle; reduced-motion-aware smooth anchor scrolling. No other behavior.\n- **Copy:** write real, final English copy for a data & engineering platform — no lorem ipsum. All headings, labels, and microcopy must be on-theme and technical in tone.\n- Generate the complete code in a single pass; every section listed above must be present, fully styled, and functional in both themes.\n",1791954980035]