[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-567-Bauhaus-Risograph-Modern":3},"# System Prompt: Build a Bauhaus \u002F Risograph Modern Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page in a **Bauhaus \u002F Risograph Modern** style on the first attempt. All user-facing copy must be written in **English**.\n\n**Sections required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\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`. The `style=\"...\"` attribute is **forbidden** in HTML.\n* Target everything via class\u002FID selectors only. HTML must remain semantic and style-agnostic.\n* Changing the theme must require editing only the CSS file, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` and theme classes:\n* **Colors:** `--primary` (Bauhaus Red `#D94646`), `--secondary` (Steel Blue `#4A7BA7`), `--bg-primary` (Warm Paper `#F4F1E8`), `--bg-secondary`, `--text-primary` (Charcoal `#2D2D2D`), `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Bauhaus accents:** `--accent-yellow` (`#F4D03F`), `--accent-slate` (`#2E4053`), `--accent-grey` (`#95A5A6`).\n* **Contrast pairing:** Every light background token must pair with a dark text token and vice versa — enforce in both light and dark themes. Never use pure `#ffffff`; use `#fefefe` where near-white is needed.\n* **Geometry & motion:** `--radius-sm`, `--radius-md`, `--radius-lg` (keep radii minimal — Bauhaus favors sharp geometry), `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n* **Typography:** `--font-base` bound to a geometric Google Font (e.g., **Archivo**, **Space Grotesk**, or **Poppins**).\n\n**1.3 Mandatory Dark Mode**\n* Provide dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class. Dark mode uses Dark Slate `#2E4053`-derived backgrounds with Warm Paper text; Bauhaus Red, Steel Blue, and Yellow remain the accent palette with adjusted contrast.\n* Theme choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle with correct `aria-pressed` \u002F `aria-label` state. No HTML restructuring may be required to switch themes.\n\n**1.4 Layout — Grid + Flexbox, Mobile-First**\n* Use `display: grid` for section-level Bauhaus composition (strict grid alignment, asymmetric geometric blocks) and **Flexbox for all component internals**.\n* Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n* All layouts must be mobile-responsive out of the box (grid columns collapse, rows become columns). No horizontal scrolling at any viewport width.\n\n**1.5 Framework**\n* Use Tailwind CSS (or clean custom CSS driven by `@layer` \u002F `@apply`). All utilities must map back to CSS variables or reusable class names (`.btn`, `.card`, `.input-group`, `.pricing-tier`, `.faq-item`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load Google Fonts via `\u003Clink>` or `@import` for text; bind to `--font-base`.\n* Icons: **Google Material Symbols only**. Raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. BAUHAUS \u002F RISOGRAPH STYLE SPECIFICS\n\n* **Composition:** Grid-based, constructivist layouts — large geometric shapes (circles, triangles, rectangles) as decorative blocks using `clip-path: circle()` \u002F `clip-path: polygon()` on existing decorative elements.\n* **Risograph misregistration:** Recreate via layered pseudo-elements (`::before`\u002F`::after`) with `transform: translate(2px, -2px)`-style offsets and `mix-blend-mode: multiply` on overlapping shapes. Misregistration must be subtle (2–4px) and defined purely in CSS.\n* **Flat lighting:** No gradients, no glossy shadows — flat fills, hard edges, bold shape transitions.\n* **Animations:** Geometric shape animations and grid-based reveals on scroll (CSS transitions\u002Fkeyframes), all respecting `prefers-reduced-motion`.\n\n---\n\n## 3. COMPONENT REQUIREMENTS\n\n**3.1 Buttons** (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`)\n* Default: flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, min 44×44px touch target.\n* Hover: brightness\u002Fshadow shift, `cursor: pointer`. Focus: distinct focus ring via CSS variables. Active: `transform: scale(0.97)`.\n* Loading: disables interaction, prevents double-clicks, CSS spinner or animated Google Icon without dimensional change. Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`. Success\u002FError feedback states via `--text-success` \u002F `--text-error`.\n\n**3.2 Cards** (Features, Pricing, Testimonials)\n* Default: flex\u002Fgrid layout, `--bg-secondary`, subtle borders, flat elevation.\n* Hover: `transform: translateY(-2px)` or shadow shift. Focus-within: border highlight when a child link\u002Fbutton is focused.\n* Loading: CSS shimmer skeleton. Empty state: Google Icon + guidance text fallback.\n\n**3.3 Forms & Inputs** (FAQ search if included, newsletter signup in Footer\u002FFinal CTA)\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 dedicated error feedback container with `aria-live`.\n\n**3.4 FAQ**\n* Accordion built with semantic HTML (`\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-compliant custom widget), keyboard operable, animated open\u002Fclose via CSS transitions, visible focus states, chevron Google Icon rotation.\n\n**3.5 Modals \u002F Popups** (if any — e.g., pricing details)\n* Opening\u002FOpen\u002FLoading\u002FSuccess\u002FError\u002FClosing states animated via CSS. Centered flex container, backdrop overlay, Google Icon close button, focus trapping, `Esc` and overlay-click close.\n\n---\n\n## 4. UX, ACCESSIBILITY & DELIVERABLES\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* **A11y:** Sufficient contrast in both modes; never rely on color alone to communicate state; semantic HTML5; correct ARIA roles\u002Flabels; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).\n* **Visual feedback:** every click, hover, or submission triggers a visible state change.\n* **Destructive\u002Fdistinct actions:** `.btn-danger` visually distinct in both themes.\n* **File structure:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` beyond one deferred entry-point reference.\n* **Naming:** one consistent convention (BEM or fixed utility set) throughout — never mix.\n* **Copy:** all user-facing copy in English, real and meaningful (no lorem ipsum); placeholders only where content was genuinely unspecified.\n",1791954989193]