[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-771-GATEWORKS-a-logic-circuit-lab":3},"# SYSTEM PROMPT — BUILD ORDER FOR CODING AGENT\n\n**Project:** \"GATEWORKS\" — a complete, single-page marketing\u002Flanding site for a browser-based logic circuit lab.\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Produce the full, production-ready site on the **first attempt**. All copy, comments, class names, and file names must be in **English (ASCII)**.\n\n---\n\n## 0. PROJECT BRIEF & VISUAL DIRECTION\n\n**0.1 Theme & Mood**\n- **Name:** GATEWORKS — a logic circuit lab. **Type:** Industrial\u002FTechnical. **Era:** 2020s contemporary. **Keywords:** logic, circuit, industrial, technical.\n- **Design language:** precision lab-bench aesthetic — monochrome charcoal\u002Fslate palette, crisp 1px borders, small border radii, grid-aligned layout, generous whitespace, and mono-font technical microcopy (`\u002F\u002F SECTION_LABELS`, truth-table bits `0 | 1`, signal-trace motifs). The signature visual effect is **hover feedback on every interactive element**.\n\n**0.2 Color System — define exactly as CSS variables**\n\n*Light theme (canonical \u002F default):*\n- `--bg-primary: #e8e8f0` (page background — never `#ffffff`)\n- `--bg-secondary: #fefefe` (card\u002Fsurface backgrounds)\n- `--bg-inset: #c8ccd8` (inset panels, code chips, hero visual canvas)\n- `--primary: #14161c` (brand color, primary button fill — pairs with light text)\n- `--secondary: #262a34` (dark bands, e.g., final CTA — pairs with light text)\n- `--text-primary: #14161c` · `--text-secondary: #5a5f70` · `--border-default: #c8ccd8`\n- `--text-success: #1b7f3c` · `--border-success: #1b7f3c` · `--text-error: #b3261e` · `--border-error: #b3261e`\n\n*Dark theme (mandatory — see 1.3):*\n- `--bg-primary: #14161c` · `--bg-secondary: #262a34` · `--bg-inset: #2e3340`\n- `--primary: #c8ccd8` (primary button fill inverts — pairs with dark text `#14161c`)\n- `--secondary: #2e3340` · `--text-primary: #e8e8f0` · `--text-secondary: #c8ccd8` · `--border-default: #2e3340` (interactive borders may brighten to `#5a5f70` on hover)\n- `--text-success: #4ade80` · `--border-success: #4ade80` · `--text-error: #ff8a80` · `--border-error: #ff8a80`\n\n**Contrast pairing is mandatory in BOTH themes:** every light background token must pair with a dark text token, and every dark background token with a light text token. Verify ≥ 4.5:1 for body text and ≥ 3:1 for large text, borders, and UI components in both modes.\n\n**0.3 Typography (Google Fonts mandatory)**\n- Load with `\u003Clink>` + `preconnect`: **Space Grotesk** (600\u002F700 — display headings), **Inter** (400\u002F500\u002F600 — body), **JetBrains Mono** (400\u002F500 — technical accents).\n- Bind tokens: `--font-display: 'Space Grotesk'`, `--font-base: 'Inter'`, `--font-mono: 'JetBrains Mono'`. Use fluid `clamp()` sizing; body 16–18px; hero `h1` ≈ `clamp(2.25rem, 5vw, 3.75rem)`.\n\n**0.4 Icons (Google Material Symbols Outlined — mandatory)**\n- Load Material Symbols Outlined (Google Fonts, variable font) and style via `font-variation-settings` in CSS. **Never use inline SVGs, local icon files, or emoji as icons.**\n- Suggested icons: `memory`, `developer_board`, `grid_view`, `rule`, `show_chart`, `design_services`, `monitoring`, `ios_share`, `format_quote`, `check`, `expand_more`, `close`, `dark_mode`, `light_mode`, `progress_activity`, `error`, `mail`, `forum`, `arrow_forward`.\n\n**0.5 Copy Direction**\n- Write realistic, on-theme English marketing copy for **every** section — **no lorem ipsum anywhere**.\n- Voice: precise, engineer-to-engineer. Product concept: browser-based logic circuit design & simulation — drag-and-drop gates (AND, OR, NOT, XOR, NAND…), live truth tables, waveform simulation, Verilog\u002FPNG export, shareable links, classroom mode.\n- Mono-font microcopy conventions: eyebrow labels like `\u002F\u002F FEATURES`, component tags like `AND · OR · XOR`, pricing footnotes, footer legal line.\n\n---\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 design property, layout rule, and state must be targeted via class or ID selectors in `style.css`.\n- **Minimal HTML modifications:** HTML must stay clean, semantic, and styling-agnostic — changing the site's entire look must require editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\n- Store all tokens in `:root` (light) and override in the dark scope. Required tokens: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success` (values in 0.2), plus:\n- `--radius-sm: 2px`, `--radius-md: 6px`, `--radius-lg: 10px` (industrial crispness); `--shadow-sm`, `--shadow-md`; `--spacing-gap: 1.5rem` (plus a fluid section rhythm token, e.g., `--spacing-section: clamp(4rem, 8vw, 7rem)`); `--transition-fast: 120ms`, `--transition-normal: 240ms`, `--ease-standard: cubic-bezier(0.2, 0, 0.2, 1)`; `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark mode **must always be defined**: base dark tokens via `@media (prefers-color-scheme: dark)` plus explicit `[data-theme=\"dark\"]` \u002F `[data-theme=\"light\"]` overrides so switching requires no HTML restructuring.\n- **Persistence:** store the user's choice in `localStorage`; on first visit with no stored value, fall back to `prefers-color-scheme`. The Light theme is the canonical, reference design and must be fully polished first; the Dark theme must be equally complete.\n- **Toggle control:** visible theme toggle (Material Symbols `dark_mode`\u002F`light_mode`) with correct `aria-pressed` and dynamically updated `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structure with **Flexbox**.\n- **Default alignment rule:** every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., top-aligned text stacks inside cards).\n- **Mobile-friendly first:** all flex layouts must be responsive out of the box — rows convert to columns at breakpoints, no horizontal scrolling at any width from 320px up.\n\n**1.5 Styling Approach & Tailwind Integration**\n- Use clean, utility-disciplined custom CSS in `style.css` (Tailwind `@layer`\u002F`@apply` mindset, no build step). If you include Tailwind via its Play CDN, every utility must resolve to the CSS variables above. Either way, generic reusable classes — `.btn`, `.card`, `.input-group`, `.container`, `.section` — are mandatory, and all colors\u002Fsizes must reference `var(--...)`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- All text fonts come from Google Fonts and bind to `--font-base` \u002F `--font-display` \u002F `--font-mono` (0.3). All icons come from Google Material Symbols (0.4). Decorative circuit motifs must be **CSS-drawn** (borders, gradients, pseudo-elements) — never inline SVG or image files.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `--radius-sm`, `--font-base`.\n- **Hover:** visible brightness\u002Fshadow shift plus `transform: translateY(-2px)`, `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring built from CSS variables (`outline`\u002F`box-shadow`) for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)` click feedback.\n- **Loading (`.is-loading`):** interaction blocked (double-click prevention), rotating `progress_activity` Material Symbol spinner rendered **without changing button dimensions**.\n- **Disabled (`.is-disabled` \u002F `disabled`):** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback classes driven by `--text-success` \u002F `--text-error` + `--border-success` \u002F `--border-error`, never color-only (pair with an icon or text change).\n- `.btn--danger` must be visually distinct in **both** light and dark themes. Anchor-styled buttons share the same class system.\n\n**2.2 Card Component (`.card`, used by Features, Testimonials, Pricing)**\n- **Default:** flexible Flexbox layout (column stack inside), `--bg-secondary` surface, 1px `--border-default`, `--radius-md`, `--shadow-sm`.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md` + border brightening.\n- **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** define `.card--skeleton` with a CSS shimmer `@keyframes` animation that preserves layout dimensions.\n- **Empty state:** define `.card--empty` — structured fallback with a Google Icon and clear guidance text.\n\n**2.3 Form & Input Requirements (`.input-group` — used by the Final CTA email capture)**\n- **Structure:** flex container wrapping a `\u003Clabel>`, the input field, and a dedicated error-feedback container (with `aria-live=\"polite\"`).\n- **States — all styled via classes:** Empty, Focused (outline ring via variables), Filled, Valid (success border + `check` icon), Invalid (error border, `--text-error` message, `error` icon — never color-only), Disabled, Read-only.\n\n**2.4 Modal \u002F Popup (Hero \"Watch the Demo\" modal)**\n- **States:** Opening (fade + subtle scale via `--transition-normal`), Open, Loading (spinner state while the demo initializes), Error fallback (icon + retry message), Closing (reverse animation). All animation is CSS-driven.\n- **UX\u002Fa11y features:** centered flex overlay (`align-items: center`) with dimmed backdrop; Google Material Symbol `close` icon button (min 44×44px); keyboard focus trap; close via `Esc` and overlay click; `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; focus returns to the trigger on close; body scroll locked while open; use `--z-modal`.\n- **Content:** a CSS-animated logic-gate\u002Ftruth-table visual (mono-font `0|1` bits, pulsing traces) — all decorative parts `aria-hidden=\"true\"`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type\u002Fspacing via `clamp()`; breakpoints via flex-wrap and media queries; zero horizontal overflow from 320px up.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; a `@media (prefers-reduced-motion: reduce)` block disables transforms, animations, and transitions.\n- **Accessibility (a11y):** WCAG AA contrast in **both** modes; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), one `h1`, logical heading order; a \"Skip to content\" link; full keyboard operability (nav menu, accordion, modal, toggle, form) with no mouse-only interactions; logical DOM\u002Ffocus order; `aria-current` on active nav links; `aria-live` regions for form feedback and loading states.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark themes (define it even if unused on this page).\n- **Navigation UX:** sticky header; anchor links smooth-scroll (`scroll-behavior: smooth` + `scroll-margin-top` matching header height).\n- **Hover effects (theme signature):** nav links (color shift + underline slide), buttons, feature\u002Ftestimonial\u002Fpricing cards, FAQ chevron rotation, footer link underline slide.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n**4.1 File Structure**\n- Exactly three files: `index.html`, `style.css`, `script.js`. All CSS in `style.css`; `script.js` referenced once via a single `defer` entry-point tag. Google Fonts\u002FMaterial Symbols `\u003Clink>` tags in `\u003Chead>`. No other inline `\u003Cscript>` or `\u003Cstyle>` blocks. Vanilla JS only — no frameworks or external JS dependencies.\n\n**4.2 Naming Convention**\n- **BEM exclusively** (`block__element--modifier`) across the entire deliverable — never mix conventions. All class names ASCII English.\n\n**4.3 JavaScript Scope**\n- Implement: theme toggle with `localStorage` persistence (1.3); mobile nav disclosure (`aria-expanded`); FAQ accordion (2.4 pattern below); modal open\u002Fclose, focus trap, `Esc`\u002Foverlay close, focus restore; email form validation with loading → success flow and `aria-live` status; demo modal loading simulation. Respect `prefers-reduced-motion` in JS behavior.\n\n**4.4 No Unrequested Placeholders**\n- No lorem ipsum; all copy must be real, on-theme English per 0.5. No external image assets — all visuals are CSS-drawn or Material Symbols. Do not invent extra components beyond Sections 0–5 below.\n\n---\n\n## 5. PAGE SECTION REQUIREMENTS\n\n**5.1 Header (sticky, supporting structure):** logo \"GATEWORKS\" (Space Grotesk + `memory` icon glyph), primary links — Features, How It Works, Pricing, FAQ — theme toggle, and a compact `.btn--primary` \"Start Building\". Mobile: links collapse into an accessible disclosure menu (button + `aria-expanded` panel, keyboard operable). Solid background with 1px bottom border; `--z-dropdown`.\n\n**5.2 Hero:** two-column flex (text left, visual right; stacked column on mobile; `align-items: center`). Mono eyebrow `\u002F\u002F LOGIC CIRCUIT LAB`, `h1` headline, subheadline, primary CTA (anchors to Pricing) + secondary \"Watch the Demo\" (opens modal per 2.4). Visual: CSS-drawn circuit board — `repeating-linear-gradient` grid, bordered trace lines, pulsing node dots, gate chips with Material Symbols — all `aria-hidden`. Optional mono stat chips (e.g., `14 gate types · 0 setup · 100% in-browser`).\n\n**5.3 Features (3 cards):** section eyebrow `\u002F\u002F FEATURES` + heading + intro. Cards: **Visual Gate Builder** (`grid_view`), **Truth Table Engine** (`rule`), **Live Waveform Simulation** (`show_chart`) — each with an icon tile, mono tag (e.g., `AND · OR · XOR`), `h3`, copy, and a \"Learn more\" link. Card behavior per 2.2.\n\n**5.4 How It Works (3 steps):** mono numerals `01 \u002F 02 \u002F 03`, CSS connector line via pseudo-elements, icons (`design_services`, `monitoring`, `ios_share`). Steps: **Design** (drag gates onto the canvas) → **Simulate** (run signals, watch truth tables update live) → **Ship** (export Verilog\u002FPNG or share a link). Flex row on desktop, column on mobile.\n\n**5.5 Testimonials (3 cards):** `format_quote` icon, realistic quote, author name, role, mono company label, and a CSS initials-avatar circle (no images). Fictional but plausible companies\u002Froles. Hover raise per 2.2.\n\n**5.6 Pricing (3 tiers):** mono tier codes — **BREADBOARD** ($0: 3 boards, 8 basic gates, 1 collaborator, community projects), **FAB** ($19\u002Fmo: unlimited boards, all 14 gate types, waveform simulator, Verilog export, 5 collaborators), **FOUNDRY** ($49\u002Fuser\u002Fmo: everything in FAB, shared component libraries, version history, SSO, priority support). Each card: price, `check`-icon feature list, CTA button anchoring to the Final CTA form. Middle tier highlighted: \"MOST POPULAR\" mono badge, stronger border, `--shadow-md`, slight elevation. Feature lists must differ meaningfully per tier. Mono footnote (e.g., `* Prices in USD, per month`).\n\n**5.7 FAQ (accordion, 5 items):** realistic questions (installation-free browser use, export formats, classroom\u002Feducation use, trial limits, team discounts). Implementation: `\u003Cbutton aria-expanded aria-controls>` + panel, animated open\u002Fclose (e.g., `grid-template-rows: 0fr → 1fr`), `expand_more` icon rotating 180°, keyboard operable natively via buttons.\n\n**5.8 Final CTA (inverted band):** in Light mode a `--secondary` (`#262a34`) dark surface with light text; in Dark mode an elevated `--bg-secondary` panel with `--border-default`. Headline + copy + `.input-group` email capture (per 2.3): validate on submit → button `.is-loading` → success state (\"You're on the list\" + `check` icon) with `aria-live` announcement; invalid email shows the error state. All required copy in English.\n\n**5.9 Footer with secondary links:** brand block (logo, one-line mission, icon links: `mail`, `forum`, plus a generic social icon) + three link columns — **Product** (Features, Pricing, Changelog), **Resources** (Docs, Truth Table Guide, Community), **Company** (About, Careers, Contact) — plus a bottom bar with mono `© 2025 GATEWORKS` and Privacy\u002FTerms links. Link hovers per Section 3. Subtle top border separating from page.\n\n**Pre-submission verification:** all eight sections + header present; zero `style=\"...\"` attributes; zero inline SVGs; dark mode fully functional and persisted; all states in 2.1–2.4 styled; keyboard-only walkthrough succeeds (nav → FAQ → modal → form); no horizontal scroll at 320px; no lorem ipsum; no console errors.\n",1791954992627]