[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-338-Swiss-Modern":3},"# CODING AGENT PROMPT — COMPLETE LANDING PAGE: \"SWISS MODERN\" (Minimalism & Swiss)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt — a single, finished, production-grade deliverable with no TODOs, no stubs, and no follow-up questions. The page must be fully functional, accessible, responsive, and visually precise.\n\n**Landing Page Theme:** Swiss Modern — Clean, Precise, Bauhaus-Inspired, Geometric (1920s Bauhaus + 2024 Modern).\n**Sections to build:** Header\u002FNavigation, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 0. THEME & STYLE SPECIFICATION\n\n**0.1 Design Identity**\n- Keywords: swiss, modern, bauhaus, clean, precise, Archivo, Nunito, visible grid, asymmetric, geometric shapes, red accent, black white.\n- The result must feel like a 1920s Bauhaus poster rebuilt with 2024 engineering: pure geometry, hard edges, visible structure, and a single red focal accent.\n\n**0.2 Color Palette (Light Mode)**\n- Primary: Pure White `#ffffff`, Pure Black `#000000`, Red Accent `#ff3300`.\n- Secondary: Light Grey `#f5f5f5`, Medium Grey `#cccccc`, Dark Grey `#333333`.\n\n**0.3 Typography**\n- Headings\u002Fdisplay: **Archivo** weight 800 (700 for sub-headings); uppercase kickers with wide letter-spacing.\n- Body: **Nunito** weight 400 (700 for emphasis).\n- Precise hierarchy: oversized Hero display headline, stepped Archivo sizes per section heading (`h1` → `h2` → `h3`), generous whitespace.\n\n**0.4 Visual Effects**\n- Visible grid lines (60px × 60px) as background texture.\n- Asymmetric layouts: offset columns, staggered cards, 7\u002F5 splits.\n- Geometric shapes — circles, rectangles, lines — built purely with CSS (bordered `div`s), never SVG.\n- Red accent `#ff3300` as the single focal color; clean transitions at 200ms.\n\n**0.5 Provided CSS Technical — implement exactly, with values bound to CSS variables**\n```css\n.accent-red { color: var(--secondary); }            \u002F* --secondary: #ff3300 *\u002F\n.grid-visible { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 60px 60px; }\n.geo-shape  { position: absolute; }\n.geo-circle { border: 2px solid var(--primary); border-radius: 50%; }\n.geo-rect   { border: 2px solid var(--secondary); }\n```\nKeep these exact class names and behaviors; binding to variables lets dark mode invert them automatically.\n\n---\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 anywhere in the HTML.\n- All design properties, layout rules, and states are applied via class or ID selectors only.\n- HTML must remain clean, semantic, and style-agnostic: re-theming the page must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (light) and override under `.dark` \u002F `@media (prefers-color-scheme: dark)`:\n- **Colors (required):** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- **Swiss mapping (light mode):** `--primary: #000000`, `--secondary: #ff3300`, `--bg-primary: #ffffff`, `--bg-secondary: #f5f5f5`, `--text-primary: #000000`, `--text-secondary: #333333`, `--text-success: #0a7d33`, `--text-error: #d40000`, `--border-default: #000000`, `--border-error: #d40000`, `--border-success: #0a7d33`. Also define `--grey-medium: #cccccc`, `--on-primary` (text color placed on `--primary` surfaces), `--font-display`, `--font-base`, `--grid-line`, `--grid-size: 60px`.\n- **Contrast Pairing:** every light background token must pair with a dark text token and every dark background token with a light text token — enforced for every theme, not just the default (e.g., `.btn-primary { background: var(--primary); color: var(--on-primary); }` must flip correctly in dark mode).\n- **Light Mode Background:** do not default to pure white; pick a background fitting the theme's mood, and where a near-white is needed use `#fefefe` instead of `#ffffff`. **Exception:** the Swiss Modern specification explicitly requires Pure White `#ffffff` as the light-mode background — this overrides the default; set `--bg-primary: #ffffff` in light mode.\n- **Radius & shadows:** `--radius-sm`, `--radius-md`, `--radius-lg` (set all to `0px` — Swiss Modern demands sharp corners; the tokens exist so a future theme can change them without markup edits); `--shadow-sm: 4px 4px 0 var(--primary)`, `--shadow-md: 8px 8px 0 var(--primary)` (hard Bauhaus offset shadows that auto-invert in dark mode).\n- **Spacing & transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 200ms`, `--ease-standard: cubic-bezier(0.25, 0.25, 0, 1)`.\n- **Elevation\u002Fstacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` — no ad-hoc z-index values.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark mode must always be defined: provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`.\n- Swiss dark palette: `--bg-primary: #0a0a0a`, `--bg-secondary: #141414`, `--text-primary: #fefefe`, `--text-secondary: #cccccc`, `--primary: #fefefe`, `--on-primary: #000000`, `--border-default: #fefefe`, `--grid-line: rgba(255,255,255,0.06)`, plus brighter `--text-error` \u002F `--text-success` variants for contrast; keep `--secondary: #ff3300` (it holds ≥ 4.5:1 against `#0a0a0a` for large text and accents).\n- 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 expose a visible toggle with correct `aria-pressed` \u002F `aria-label` state.\n- **Exception:** the source specification marked Dark Mode as \"✗ No\" — this is explicitly overridden: dark mode support is mandatory for this build and must be implemented to the full standard above.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox (`display: flex` \u002F Tailwind flex utilities).\n- Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified in a CSS comment (e.g., editorial text blocks set to `flex-start` for the asymmetric Swiss rhythm).\n- Mobile-first: all flex rows must collapse to columns on small viewports; prevent horizontal scrolling at every breakpoint down to 320px.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS (Play CDN) for layout utilities; all theme styling lives in `style.css`.\n- Utilities must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`, `.faq-item`); never hardcode hex values inside utility compositions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Archivo** (700, 800) and **Nunito** (400, 700) via Google Fonts `\u003Clink>` tags; bind `--font-display: 'Archivo'` and `--font-base: 'Nunito'`.\n- Load **Google Material Symbols** for every functional icon (`menu`, `close`, `check`, `expand_more`, `arrow_forward`, `dark_mode`\u002F`light_mode`, `format_quote`, etc.).\n- Raw inline SVGs and local icon files are forbidden. Decorative geometry is CSS-only (`.geo-shape`, `.geo-circle`, `.geo-rect`).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements** — all states via CSS classes:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` sharp corners, Archivo 700 uppercase label with letter-spacing, minimum touch target 44×44px. Variants: `.btn-primary` (black fill \u002F white text; auto-inverts in dark mode), `.btn-accent` (red `#ff3300` fill \u002F white text), `.btn-outline` (2px black border, transparent fill), `.btn-danger` (error-red fill — visually distinct in both themes).\n- **Hover:** precise Swiss shift — background inversion or appearance of the hard offset shadow (`--shadow-sm`), plus `cursor: pointer`.\n- **Focus:** distinct `outline: 2px solid var(--secondary); outline-offset: 2px;` ring for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** disables pointer events, prevents double-clicks, renders an animated Google icon or CSS spinner without changing button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error`, never color alone — always paired with an icon or text change.\n\n**2.2 Card Component Requirements** (`.card` — used by Features, Testimonials, Pricing):\n- **Default:** flexible Flexbox layout, 2px `--border-default` border, `--bg-secondary` or white surface, sharp corners, no soft blur shadows.\n- **Hover:** `transform: translateY(-2px)` plus hard offset shadow `--shadow-sm` (desktop only).\n- **Focus-within:** border shifts to `--secondary` (red) when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** shimmer animation defined in CSS, preserving final dimensions to prevent layout jumps.\n- **Empty state:** structured fallback layout featuring a Google icon and clear guidance text.\n\n**2.3 Form & Input Requirements** (email capture in the Final CTA):\n- **Structure:** flex `.input-group` wrapping a visible `\u003Clabel>`, the input, and a dedicated error-feedback container.\n- **States:** empty; focused (2px red outline ring); filled; valid (success border + check icon); invalid (error border, `--text-error` message + error icon, tied via `aria-describedby` and announced in an `aria-live` region); disabled; read-only.\n- **Swiss input style:** 2px black border, white surface, Nunito text; focus and error states recolor the border via tokens.\n\n**2.4 Modal \u002F Popup Requirements** (governs the mobile navigation overlay and any other overlay):\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via `transition: var(--transition-normal)`.\n- **UX:** flex container, backdrop overlay, Google icon close button, keyboard focus trapping, close via `Esc` and overlay click, focus returned to the trigger on close.\n- The FAQ must be an accordion, not a modal (see 5.7).\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography and breakpoints without horizontal overflow; verify at 320px, 768px, and 1024px+.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable transforms, shimmer, and smooth scrolling; keep opacity-only fades).\n- **Accessibility (a11y):** sufficient contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); a skip-to-content link; correct ARIA roles\u002Flabels on the theme toggle, mobile menu, and accordion; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors and success feedback.\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.\n- **Decorative geometry:** all `.geo-shape` elements are `aria-hidden=\"true\"` with `pointer-events: none` so they never intercept clicks or screen readers.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference; no inline styles anywhere.\n- **Naming convention:** one fixed, flat kebab-case convention matching the provided spec classes — `.accent-red`, `.grid-visible`, `.geo-shape`, `.geo-circle`, `.geo-rect`, plus `.btn`, `.btn-primary`, `.card`, `.card-featured`, `.input-group`, `.faq-item`, `.theme-toggle`, etc. Never mix conventions (no BEM, no camelCase).\n- **Copy:** invent one coherent fictional product (e.g., a precision grid-based design tool) and write all user-facing copy in English — short, declarative, Swiss-precise sentences. No lorem ipsum; no placeholder-only sections.\n- **Completeness:** deliver the finished page in one pass — all sections, all states, both themes.\n\n---\n\n## 5. PAGE STRUCTURE & SECTION REQUIREMENTS\n\n**5.1 Header (sticky navigation — required infrastructure for anchor links and the mandatory theme toggle)**\n- White surface with a 2px black bottom border; flex row: geometric logo mark (CSS red square + black circle + Archivo wordmark), anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with smooth scrolling, the theme toggle (Material Symbol `dark_mode`\u002F`light_mode`, `aria-pressed`, `aria-label`), and a mobile menu button opening the overlay per 2.4.\n\n**5.2 Hero**\n- `.grid-visible` background; asymmetric 7\u002F5 flex split — copy left, geometric composition right (`.geo-circle`, `.geo-rect`, rules\u002Flines).\n- Oversized Archivo 800 headline (`clamp(2.5rem, 6vw, 5rem)`) with exactly one word in `.accent-red`; Nunito lede below; primary `.btn-primary` CTA + `.btn-outline` secondary CTA; a 3-metric stats strip aligned to the grid.\n\n**5.3 Features (3 cards)**\n- Section header: red uppercase kicker + Archivo `h2`.\n- Three `.card` components in an asymmetric grid (middle card offset with `translateY` on desktop); each pairs a CSS geometric icon composition or Material Symbol with an Archivo `h3` and Nunito body; exactly one card carries the red accent detail; hover\u002Ffocus-within per 2.2.\n\n**5.4 How It Works (3 steps)**\n- Three steps in a flex row (column on mobile): giant Archivo numerals `01 \u002F 02 \u002F 03` (one in `.accent-red`), connected by a 2px line (horizontal on desktop, vertical on mobile), each with a step title and one-sentence body.\n\n**5.5 Testimonials**\n- Three quote `.card`s in a staggered\u002Fasymmetric arrangement; `.geo-circle` avatar with initials; red Material Symbol `format_quote` accent; name (Archivo 700) + role (Nunito, `--text-secondary`).\n\n**5.6 Pricing (3 tiers)**\n- Three `.card` tiers in a 3-column grid (1 column on mobile); the middle tier is `.card-featured`: 2px red border, hard offset shadow `--shadow-md`, a red \"Most popular\" tag, and the strongest CTA (`.btn-accent`); other tiers use `.btn-outline` \u002F `.btn-primary`.\n- Each tier: Archivo tier name, large Archivo price, Nunito feature list with Material Symbol `check` icons.\n\n**5.7 FAQ**\n- Accessible accordion: 5–6 items; each question is a `\u003Cbutton>` with `aria-expanded` + `aria-controls`; answer region animated via CSS (`grid-template-rows: 0fr → 1fr` or equivalent) at `var(--transition-normal)`; Material Symbol `expand_more` chevron rotating 180°; fully keyboard operable.\n\n**5.8 Final CTA**\n- Inverted block: black surface (light mode) \u002F `--bg-secondary` with white border (dark mode); oversized white Archivo headline with one `.accent-red` word; decorative `.geo-shape` accents; email-capture form per 2.3 with `.btn-accent` submit.\n- Inline success state (check icon + confirmation message in an `aria-live` region) and inline error state — no page reload, no `alert()`.\n\n**5.9 Footer**\n- Inverted surface (black in light mode \u002F `#141414` in dark mode); flex\u002Fgrid columns of secondary links (Product, Company, Legal — real English labels; link to page sections where applicable, `href=\"#\"` only where no target genuinely exists); social links as Material Symbols; copyright line; repeated small geometric logo mark.\n\n---\n\n## 6. DEFINITION OF DONE\n\n- Zero `style=\"...\"` attributes; zero inline `\u003Cscript>` beyond the deferred entry point; zero inline SVGs.\n- Dark mode fully functional: toggle persists via `localStorage`, defaults to `prefers-color-scheme`, and all tokens plus `.grid-visible` \u002F `.geo-*` invert correctly.\n- Full keyboard pass: skip link, focus rings, accordion, mobile menu, and form all operable without a mouse.\n- No horizontal scrolling at 320px; every interaction shows visible feedback within 200ms; `prefers-reduced-motion` respected.\n- All copy is real, English, and on-brand; all fonts and icons load from Google Fonts \u002F Google Material Symbols.\n",1791954985216]