[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-097-Estilo-de-Litografia-de-Precisao":3},"# CODING AGENT SYSTEM PROMPT — \"PRECISION LITHOGRAPHY\" EUV LANDING PAGE\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. Theme: **Precision Lithography Style** — an industrial, scientific, precise landing page for EUV semiconductor lithography technology, set in the \"2026+ Microchip Revolution\" era. Output category: Industrial & Mechanical. All user-facing copy must be written in **English**.\n\n---\n\n## 0. PROJECT BRIEF & DESIGN DIRECTION\n\n**0.1 Required Page Sections (in this exact order):**\n1. Sticky Header — brand logo, nav links, theme toggle, CTA button, mobile hamburger\n2. Hero — headline, subheadline, dual CTAs, EUV beam visualization, data readout strip\n3. Features — exactly **3 cards**\n4. How It Works — exactly **3 steps** with a manufacturing process animation\n5. Testimonials — 3 quote cards\n6. Pricing — 3 tiers, middle tier visually featured\n7. FAQ — accessible accordion\n8. Final CTA — full-width band with email capture form\n9. Footer — secondary link columns plus legal line\n\n**0.2 Visual Direction (all effects must be built in pure CSS — no images, no inline SVG):**\n- **EUV light beam visualizations** — implemented as the spec-named class `.euv-beam-animation`\n- **Complex machine diagrams** — implemented as the spec-named class `.machine-diagram`\n- Subtle high-tech glows on components (box-shadow glows using Electric Blue)\n- Clean, technical typography (see 0.4)\n- Data micro-interactions (animated counters, monospace readouts that tick on scroll\u002Fhover)\n- Modular elements (bordered panels, strict grid rhythm, machined-edge containers)\n- Manufacturing process animations (a beam\u002Fpulse traveling through the 3-step process track)\n\n**0.3 Color Palette → CSS Variable Token Map:**\n\nLight theme (`:root`):\n- `--primary: #003366` (Scientific Blue) · `--secondary: #00BFFF` (Electric Blue)\n- `--bg-primary: #fefefe` — **Exception clause:** the source spec lists `#FFFFFF`; architecture forbids pure white, so use `#fefefe` everywhere a white surface is needed.\n- `--bg-secondary: #F4F6F9` (cleanroom gray; the hero\u002Fsection gradient uses `linear-gradient(to bottom, #F8F8F8, #fefefe)` per the spec baseline)\n- `--text-primary: #003366` · `--text-secondary: #36454F` (Dark Gray)\n- `--text-success: #0A8A3C` — **Exception clause:** the spec's `#00FF00` green fails contrast on light backgrounds; reserve `#00FF00` strictly for glow accents and dark-mode surfaces, never as text on light backgrounds.\n- `--text-error: #C62828` · `--border-default: #D3D3D3` · `--border-success` \u002F `--border-error` derived from the success\u002Ferror tokens\n- Accent roles: **Silver `#C0C0C0`** = metallic accents, dividers, diagram strokes; **Orange `#FFA500`** = highlight\u002Fwarning accent only (featured pricing badge, \"hot\" process markers) — never the error color and never as low-contrast text.\n\nDark theme (`.dark` class and `@media (prefers-color-scheme: dark)`):\n- `--bg-primary: #0A1626` (deep scientific navy) · `--bg-secondary: #10233B`\n- `--text-primary: #EAF2FA` · `--text-secondary: #C0C0C0` (Silver)\n- Interactive accents switch to `#00BFFF`; primary buttons in dark mode use an Electric Blue background paired with dark navy text\n- `--text-success: #00FF00` (permitted here — passes contrast on dark navy) · `--text-error: #FF6B6B` · `--border-default: #2C4A6B`\n\n**Contrast pairing is mandatory in every theme:** any light background token must pair with a dark text token, and any dark background token must pair with a light text token. Verify every surface\u002Fbutton pair in both themes.\n\n**0.4 Typography & Icons:**\n- `--font-base: 'Source Sans 3'` — **Exception clause:** the spec names \"Source Sans Pro\"; load its current Google Fonts successor **Source Sans 3** via `\u003Clink>` with `preconnect`.\n- `--font-mono: 'IBM Plex Mono'` — for data readouts, spec labels, coordinates, step numbers, and technical annotations.\n- **Icons:** Google Material Symbols (Outlined variable font) loaded via Google Fonts. **Inline SVGs and local icon files are explicitly forbidden.**\n\n**0.5 Industrial Form Language:**\n- `--radius-sm: 2px` · `--radius-md: 4px` · `--radius-lg: 8px` (sharp, machined edges — nothing pill-shaped)\n- `--shadow-sm: 0 2px 5px rgba(0,0,0,0.05)` (per spec) · `--shadow-md: 0 8px 24px rgba(0,20,45,0.12)`\n- `--spacing-gap: 1.5rem` · `--transition-fast: 150ms` · `--transition-normal: 300ms` · `--ease-standard: ease-in-out` (spec baseline: `0.3s ease-in-out`)\n- `--z-dropdown: 100` · `--z-modal: 1000` · `--z-toast: 1100`\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:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n- **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the site's look must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\n- All visual tokens defined in **0.3** and **0.5** must live in `:root` (light) and be overridden in `.dark` \u002F `prefers-color-scheme: dark`.\n- No hardcoded hex values may appear inside component rules — every color, radius, shadow, and transition must reference a CSS variable.\n\n**1.3 Mandatory Dark Mode Support**\n- **Note:** The source style specification flagged Dark Mode as not required; per mandatory architecture standards, **full Dark Mode support is required** and must be implemented as defined here.\n- Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector; background and text variables must switch seamlessly with zero HTML restructuring.\n- **Persistence:** Store the user's choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and render a visible toggle (header) with correct `aria-pressed` and `aria-label` states, swapping the Material Symbol (`dark_mode` \u002F `light_mode`).\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with **Flexbox** (`display: flex` \u002F Tailwind flex utilities).\n- **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n- **Mobile-first:** all rows must collapse to columns on small viewports; **horizontal scrolling is prohibited at any width.**\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use **Tailwind CSS (Play CDN)** for layout, spacing, and responsive utilities only.\n- All colors, typography, shadows, radii, and component states must be defined in `style.css` as reusable classes (`.btn`, `.card`, `.input-group`, `.euv-beam-animation`, `.machine-diagram`) driven by CSS variables. Never hardcode colors in arbitrary-value utility classes.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Source Sans 3 and IBM Plex Mono from Google Fonts; bind them to `--font-base` and `--font-mono`.\n- Use Google Material Symbols for every icon. Raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements** (classes: `.btn`, `.btn--primary`, `.btn--outline`, `.btn--danger`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target **44×44px**.\n- **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n- **Focus:** distinct focus ring built from CSS variables (`outline`\u002F`box-shadow`) for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon **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` must be visually distinct in **both** themes.\n\n**2.2 Card Component Requirements** (`.card`, used by Features, Testimonials, Pricing)\n- **Default:** flexible Flexbox layout, subtle border (`--border-default`) and elevation using `--bg-secondary` and shadow variables.\n- **Hover:** shadow shift plus `transform: translateY(-2px)`.\n- **Focus-within:** card border highlights in `--secondary` when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** define a shimmer `@keyframes` and a `.card--skeleton` utility in the stylesheet as part of the design system.\n- **Empty State:** define a structured fallback pattern (Google Icon + guidance text) as a reusable `.card--empty` class.\n\n**2.3 Form & Input Requirements** (`.input-group`, used in the Final CTA)\n- **States:** Empty, Focused (outline ring), Filled, Valid (success border + check icon), Invalid (error border, error text, error icon), Disabled, Read-only — all as CSS classes.\n- **Structure:** Flex container wrapping a `\u003Clabel>`, the input, and a dedicated error-feedback element wired to an `aria-live` region.\n\n**2.4 Modal \u002F Popup Requirements** (`.modal`, triggered from the Hero)\n- **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n- **UX Features:** centered flex container (`align-items: center`), backdrop overlay, Google Icon close button (`aria-label=\"Close\"`), keyboard **focus trapping**, close via `Esc` and overlay click, body scroll locked while open.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid sizing and breakpoints with zero horizontal overflow.\n- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; **all beam sweeps, counters, and process animations must be disabled or reduced under `prefers-reduced-motion`.**\n- **Accessibility (a11y):** sufficient contrast in Light and Dark modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, single `h1`); correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, loading, success).\n- **Mandatory Visual Feedback:** every click, hover, and submission must trigger a visible state change.\n- **Destructive Actions:** `.btn--danger` must be visually distinct in both themes (defined in the design system even if unused on this page).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** three separate files — `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred `script.js` entry-point reference (plus the Tailwind CDN and Google Fonts links in `\u003Chead>`).\n- **Naming Convention:** **BEM** consistently (`.hero__title`, `.pricing-card--featured`, `.faq__summary`). The two spec-mandated classes `.euv-beam-animation` and `.machine-diagram` are retained verbatim as named component classes. Never mix conventions.\n- **No Unrequested Placeholders:** write realistic, specific English copy for a fictional EUV lithography systems company (invent a plausible brand name); **lorem ipsum is prohibited anywhere**. Technical claims should be plausible for EUV lithography (13.5 nm wavelength, nanometer-scale resolution, wafer throughput).\n\n---\n\n## 5. LANDING PAGE SECTION-BY-SECTION SPECIFICATIONS\n\n**5.1 Header:** sticky; `background: var(--bg-primary)`, `border-bottom: 1px solid var(--border-default)`, `box-shadow: 0 2px 5px rgba(0,0,0,0.05)` (per spec baseline). Flex row, `align-items: center`; collapses to a hamburger menu on mobile (toggle button with `aria-expanded`, animated panel). Nav links get an Electric Blue underline on hover and a visible focus ring. Theme toggle per rule 1.3.\n\n**5.2 Hero:** two-column flex on desktop (copy left, visualization right), single column on mobile. Headline + subheadline in `--font-base`; primary CTA `.btn--primary` (\"Request a System Demo\") and secondary CTA `.btn--outline` (\"View Process Diagram\") which opens the modal (5.10). Right column: `.euv-beam-animation` — a pure-CSS animated EUV beam built from layered `linear-gradient` beams (Electric Blue core, Silver halo) with keyframed sweep\u002Fpulse and a subtle glow. Below the copy: a monospace data readout strip in `--font-mono` (e.g., `WAVELENGTH 13.5 NM · RESOLUTION ≤ 8 NM · THROUGHPUT 200 WPH`) with animated counters triggered on load\u002Fscroll.\n\n**5.3 Features:** exactly 3 `.card` modules in a responsive 3-column → 1-column flex layout. Each card: a Material Symbol icon inside a bordered \"component socket\" square, a title, and a description. Apply the full card state set from 2.2.\n\n**5.4 How It Works:** exactly 3 steps in a horizontal track on desktop (vertical on mobile). A CSS-animated beam\u002Fpulse travels along the connecting track (the manufacturing process animation). Each step: monospace numbered marker (`01` \u002F `02` \u002F `03`), Material Symbol, title, description. Staggered scroll-reveal via `IntersectionObserver` as progressive enhancement — content must be fully visible without JS.\n\n**5.5 Testimonials:** 3 quote cards. CSS-built initials avatar (circle, `--primary` background, light text), `format_quote` Material Symbol, quote, name, role, company. Full card hover\u002Ffocus-within states.\n\n**5.6 Pricing:** 3 tiers; the middle tier gets `.pricing-card--featured` — Electric Blue border, subtle glow, and a monospace uppercase \"RECOMMENDED\" badge (Orange accent allowed for the badge with accessible pairing). Each tier: name, price, feature list with `check` Material Symbols, and a CTA button (featured tier uses `.btn--primary`; others `.btn--outline`).\n\n**5.7 FAQ:** native `\u003Cdetails>` \u002F `\u003Csummary>` accordion (no JS required). Summary is a flex row, `align-items: center`, `justify-content: space-between`, with an `expand_more` Material Symbol rotating 180° when open. Visible focus ring on summary; smooth expansion respecting reduced motion.\n\n**5.8 Final CTA:** full-width band with a Scientific Blue → Electric Blue gradient (light mode) \u002F navy glow (dark mode). Contains a headline and an email-capture `.input-group` per 2.3: label, input, and a `.btn--primary` submit that demonstrates **Loading** (CSS spinner, dimension-stable), **Success** (check icon, `--text-success`, `aria-live` announcement), and **Error** (invalid email: `--border-error`, error icon, `--text-error` message, `aria-live`). Simulate the request with a JS timeout — no backend.\n\n**5.9 Footer:** secondary link columns (Product, Company, Resources, Legal), repeated brand mark, copyright line, and text links with hover\u002Ffocus states. Dark-mode-safe styling via variables.\n\n**5.10 Modal — Process Diagram:** opened from the Hero's secondary CTA. Backdrop overlay, centered flex container, and inside it the `.machine-diagram`: a pure-CSS schematic of an EUV lithography machine — bordered modular blocks connected by animated beam lines, pulsing nodes, and monospace labels (`LIGHT SOURCE`, `OPTICS CHAIN`, `WAFER STAGE`). Must implement the complete modal spec from 2.4 (focus trap, `Esc`, overlay click, open\u002Fclose animations, scroll lock).\n\n---\n\n## 6. FINAL QUALITY CHECKLIST (verify before submitting)\n\n- Zero occurrences of `style=\"...\"` in the HTML; zero inline SVGs; zero hardcoded hex values outside `:root`\u002F`.dark`.\n- Dark mode toggle works, persists via `localStorage`, and every surface passes contrast pairing in both themes.\n- Full keyboard pass: header nav, buttons, FAQ accordion, modal (focus trap + `Esc`), form — all operable without a mouse.\n- No horizontal scroll at 320px width; all flex containers default to `align-items: center`.\n- `prefers-reduced-motion` disables beam sweeps, counters, and reveals.\n- All copy is realistic English; no lorem ipsum; BEM naming is consistent throughout.\n",1791954981634]