[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-504-Swiss-Punk-New-Wave":3},"# CODING-AI PROMPT — SWISS PUNK \u002F NEW WAVE LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt — no partial output, no follow-up questions.\n\n**Theme:** Swiss Punk \u002F New Wave (1978–1990) — the Basel\u002FCalifornia rebellion against rigid International Style: deconstructed Swiss grids, tilted and layered typography, wide letter-spacing, stepped baselines, thick rules, photographic collage, Greiman-style digital gradients, hard offset shadows, brutalist hard edges. Art-direction references: April Greiman, *Does It Make Sense?* (1986); Wolfgang Weingart, *Typographische Monatsblätter*.\n\n**Objective:** Deliver `index.html`, `style.css`, and `script.js` implementing these sections: Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links. The source style specification did not declare light\u002Fdark modes — therefore you must design, implement, and validate **both light and dark themes** before publishing. All user-facing copy must be written in **English**.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\nAll styling lives in `style.css`:\n\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 are targeted via class or ID selectors.\n* **Minimal HTML Modifications:** HTML stays clean, semantic, and styling-agnostic — changing the site's look must require editing only the CSS file, never the markup.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nStore every visual token in `:root` using this canonical block (extend it, never rewrite the names):\n\n```css\n:root {\n  \u002F* color — Swiss Punk palette (light) *\u002F\n  --color-bg: #f1f0ea;\n  --color-surface: #fefefe; \u002F* mandatory override: never use #ffffff anywhere *\u002F\n  --color-surface-strong: #e7e5db;\n  --color-border: #16161a;\n  --color-text: #16161a;\n  --color-text-muted: #4c4c50;\n  --color-primary: #ff2e63;\n  --color-accent: #08b2e3;\n  --color-yellow: #ffd400;\n  --color-success: #086d48;\n  --color-error: #c41f2e;\n  \u002F* mandatory semantic aliases *\u002F\n  --primary: var(--color-primary);\n  --secondary: var(--color-accent);\n  --bg-primary: var(--color-bg);\n  --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text);\n  --text-secondary: var(--color-text-muted);\n  --text-success: var(--color-success);\n  --text-error: var(--color-error);\n  --border-default: var(--color-border);\n  --border-success: var(--color-success);\n  --border-error: var(--color-error);\n  \u002F* radius: rule-driven grid rebellion, hard edges *\u002F\n  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 999px;\n  \u002F* shadow: hard offset, no blur — layered print collage *\u002F\n  --shadow-sm: 3px 3px 0 var(--color-border);\n  --shadow-md: 5px 5px 0 var(--color-border);\n  --shadow-lg: 9px 9px 0 var(--color-border);\n  \u002F* font — Google Fonts, tight Swiss grotesk pushed wide *\u002F\n  --font-base: 'Archivo', 'Helvetica Neue', Arial, sans-serif;\n  --font-sans: var(--font-base);\n  --font-display: var(--font-base);\n  --font-mono: 'Space Mono', ui-monospace, monospace;\n  \u002F* text scale *\u002F\n  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;\n  --text-4xl: 3rem; --text-5xl: 4rem;\n  \u002F* space *\u002F\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;\n  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --spacing-gap: var(--space-4);\n  \u002F* motion *\u002F\n  --ease-standard: cubic-bezier(0.6, 0, 0.4, 1);\n  --transition-fast: 0.12s var(--ease-standard);\n  --transition-normal: 0.25s var(--ease-standard);\n  \u002F* stacking *\u002F\n  --z-nav: 90; --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n  \u002F* signature: deconstructed grid — tilt + hard shadow *\u002F\n  --tilt-deg: -2.5deg;\n  --rule-line: 3px solid var(--color-border);\n}\n```\n\n* **Contrast Pairing:** Every light background token pairs with dark text, every dark background token pairs with light text — enforced in both themes. Explicit Swiss Punk pairings: backgrounds using `--color-yellow` or `--color-accent` must always use `#16161a` text in **both** themes; backgrounds using `--color-primary` must use `#16161a` text for body-size copy (`#fefefe` permitted only for large display text ≥ `--text-2xl` bold). Verify final contrast ≥ 4.5:1 for body text and ≥ 3:1 for large text; adjust token lightness if a pairing fails.\n* **Light Mode Background:** Never pure white — the theme background is `#f1f0ea`; where a white surface is needed, use `#fefefe` (already tokenized above), never `#ffffff`.\n\n**1.3 Mandatory Dark Mode Support**\nDark mode must always be defined and validated:\n\n* **Dark Token Set:** Override the color tokens under a `.dark` class AND under `@media (prefers-color-scheme: dark) { :root:not(.light) { ... } }` (duplicate the same block in both places so no-JS visitors still get dark mode). Dark values: `--color-bg: #16161a; --color-surface: #1e1e24; --color-surface-strong: #282830; --color-border: #f1f0ea; --color-text: #f1f0ea; --color-text-muted: #a6a6ad; --color-success: #3ddc97; --color-error: #ff6b7a;` — keep `--color-primary`, `--color-accent`, `--color-yellow` unchanged. Inverting `--color-border` keeps the hard offset shadows visible on dark backgrounds.\n* **Theme Switching:** Background and text variables must flip 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 control in the nav with correct `aria-pressed` and `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\") and a Google Material icon (`dark_mode` \u002F `light_mode`). Apply the class via the single deferred script; the media-query fallback covers first paint.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment. The only permitted exceptions: stepped-baseline type stacks and collage clusters may use `align-items: flex-start` to preserve the staggered composition.\n* **Mobile-Friendly First:** All flex rows convert to columns on small viewports; no horizontal scrolling anywhere. Rotated elements must stay ≤ 3deg and be guarded with `overflow-x: hidden` on `body` as a safety net.\n\n**1.5 Framework Default**\nUse clean custom CSS extending the base classes in Section 5. Tailwind CSS is permitted only if every utility maps back to the CSS variables or the generic class names (`.btn`, `.card`, `.input-group`) via `@layer`\u002F`@apply`. Never mix naming conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n\n* **Text:** Load **Archivo** (weights 400–900) and **Space Mono** from Google Fonts via `\u003Clink>` tags with `preconnect`; bind them to `--font-base` and `--font-mono` as tokenized above.\n* **Icons:** Use Google Material Symbols (Rounded) loaded via `\u003Clink>`, instantiated as `\u003Cspan class=\"material-symbols-rounded\">icon_name\u003C\u002Fspan>`. Raw inline SVGs and local icon files are explicitly forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\nExtend the canonical `.btn` base from Section 5. All states styled via CSS classes:\n\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` uppercase, `letter-spacing: .08em`, 3px border, hard shadow, minimum touch target 44×44px.\n* **Hover:** `transform: rotate(var(--tilt-deg)) translate(-1px,-1px); box-shadow: var(--shadow-md); cursor: pointer;`\n* **Focus:** `.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }` — distinct in both themes.\n* **Active\u002FPressed:** `transform: translate(2px,2px); box-shadow: none;` — the shadow snaps flush.\n* **Loading:** `.btn.is-loading` disables pointer events, prevents double-clicks, sets `aria-busy=\"true\"`, and renders a CSS spinner (a rotating 1em square with a 3px border and one accent-colored edge — no blur) without changing button dimensions.\n* **Disabled:** `opacity: .5; filter: grayscale(1); cursor: not-allowed; transform: none;`\n* **Success\u002FError:** `.btn.is-success` \u002F `.btn.is-error` apply `--text-success` \u002F `--text-error` borders and icon feedback as temporary states.\n* **Variants:** `.btn--primary` (primary background, `#16161a` text per 1.2), `.btn--outline` (transparent, 3px border), `.btn--danger` (error background; `#fefefe` text in light mode, `#16161a` text in dark mode) — visually distinct in both themes.\n\n**2.2 Card Component**\nExtend the canonical `.card` base; add tilt modifiers (`.card--tilt-left { transform: rotate(-1deg); }`, `.card--tilt-right { transform: rotate(0.8deg); }`) and alternate them across grids:\n\n* **Default:** Flexbox layout, `--color-surface` background, 3px border, `--shadow-lg`, hard edges.\n* **Hover:** `transform: translateY(-2px)` plus a shadow shift (keep the hard offset, no blur).\n* **Focus-within:** Border color shifts to `--color-accent` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define `.card__skeleton` blocks with a shimmer keyframe animation (respect `prefers-reduced-motion`) that preserves final dimensions.\n* **Empty State:** Define `.card--empty` — a Google Material icon in a tilted tile plus clear English guidance text.\n\n**2.3 Form & Input Requirements**\nExtend the canonical `.input` base. Structure every field as `.input-group` wrapping: a `\u003Clabel>`, the input, and a dedicated `.input-group__error` container with `aria-live=\"polite\"`:\n\n* **States:** Empty, Focused (accent ring per Section 5), Filled, Valid (`.is-valid`: success border + check Material icon), Invalid (`.is-invalid`: error border, `--text-error` message, error icon), Disabled, Read-only.\n* The Final CTA newsletter form must implement real email validation with inline English error messages, a loading submit state, and a success confirmation.\n\n**2.4 Modal \u002F Popup Requirements**\nNo modal is required by the section list. If you add any overlay (e.g., a lightbox), it must have: opening\u002Fopen\u002Fclosing states animated via CSS transitions, a backdrop overlay, a centered flex container (`align-items: center`), a Google Material icon close button, keyboard focus trapping, `aria-modal`, closing via `Esc` and overlay clicks, and defined loading\u002Fsuccess\u002Ferror states, all layered at `var(--z-modal)`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid `clamp()` type sizing, breakpoints without horizontal overflow; hero display type scales from mobile to desktop.\n* **Smooth Animations:** `transition: var(--transition-fast)` on micro-interactions and `var(--transition-normal)` on state changes. Under `prefers-reduced-motion: reduce`, disable all rotations, marquees, shimmer, and transforms — keep only color changes.\n* **Accessibility (a11y):** Skip-to-content link; semantic landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); exactly one `\u003Ch1>`; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form feedback and any toast; never rely on color alone — pair every state with an icon and\u002For text; maintain ≥ 4.5:1 body-text contrast in **both** light and dark modes.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change — the tilt-and-snap shadow language IS the feedback system; use it consistently.\n* **Destructive Actions:** `.btn--danger` must be visually distinct in both themes.\n* **Marquee\u002FTicker:** If you add a New Wave ticker strip, mark the duplicated track `aria-hidden=\"true\"` and pause the animation under reduced motion.\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: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. Google Fonts and Material Symbols `\u003Clink>` tags live in `\u003Chead>`.\n* **Naming Convention:** BEM only (`block__element--modifier`), extending the base classes from Section 5 — one consistent convention across the entire deliverable, never mixed.\n* **No Unrequested Placeholders:** Author real, coherent English copy for a fictional product (suggested direction: a layout\u002Fdesign tool that \"breaks the grid,\" e.g., a brand like \"GRIDBREAK\") — no lorem ipsum. Photographic placeholders use only `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F\u003Cwidth>\u002F\u003Cheight>.jpg` with descriptive `alt` text.\n\n---\n\n## 5. SWISS PUNK \u002F NEW WAVE — CANONICAL BASE CLASSES & SIGNATURE MOVES\n\n**5.1 Canonical Base Classes (extend verbatim, do not rewrite):**\n\n```css\nbody { margin: 0; color: var(--color-text); font-family: var(--font-sans); background: var(--color-bg); }\n.nav { display: flex; gap: var(--space-4); align-items: center;\n  padding: var(--space-3) var(--space-6); background: var(--color-surface);\n  border: 3px solid var(--color-border); box-shadow: var(--shadow-md);\n  transform: rotate(-0.6deg); }\n.btn {\n  font: 700 var(--text-base)\u002F1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;\n  color: var(--color-text); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);\n  background: var(--color-yellow); border: 3px solid var(--color-border);\n  box-shadow: var(--shadow-sm); cursor: pointer;\n  transition: transform var(--transition-fast), box-shadow var(--transition-fast); }\n.btn:hover { transform: rotate(var(--tilt-deg)) translate(-1px,-1px); box-shadow: var(--shadow-md); }\n.btn:active { transform: translate(2px,2px); box-shadow: none; }\n.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }\n.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }\n.btn--primary { background: var(--color-primary); color: #16161a; }\n.card { background: var(--color-surface); color: var(--color-text);\n  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);\n  border: 3px solid var(--color-border); padding: var(--space-6);\n  transform: rotate(0.8deg); }\n.input {\n  width: 100%; box-sizing: border-box; color: var(--color-text); font: var(--text-base) var(--font-sans);\n  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);\n  background: var(--color-surface); border: 3px solid var(--color-border);\n  box-shadow: var(--shadow-sm); }\n.input::placeholder { color: var(--color-text-muted); }\n.input:focus { outline: none; border-color: var(--color-accent);\n  box-shadow: var(--shadow-sm), 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent); }\n.badge { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: var(--text-xs);\n  text-transform: uppercase; letter-spacing: .06em; padding: .3em .8em; border-radius: var(--radius-pill);\n  color: #16161a; background: var(--color-accent); border: 2px solid var(--color-border); }\n@media (prefers-reduced-motion: reduce) {\n  .btn { transition: none; } .btn:hover, .btn:active { transform: none; }\n}\n```\n\n**5.2 Signature Aesthetic Moves (apply throughout):**\n\n* **Deconstructed Swiss grid:** Compose on an underlying 12-column grid, then deliberately break it — overlapping type, rotated section labels, oversized marginal numerals (`01 \u002F 02 \u002F 03`) in `--font-mono`, and thick `--rule-line` dividers as structural elements.\n* **Tilted, layered type:** Hero headline in 2–3 stacked layers at different sizes\u002Frotations with negative margins and `z-index` layering; stepped baselines (each line indented further); wide tracking (≥ .08em) and uppercase for all display type and labels.\n* **Photographic collage:** Picsum images with 3px borders + hard offset shadows, slight rotations, overlapping placement, and duotone treatment (`filter: grayscale(1) contrast(1.1)` plus `mix-blend-mode: multiply\u002Fscreen` overlays in primary\u002Faccent).\n* **Greiman gradients:** Sparing `linear-gradient` blends (primary → accent) as image overlays or thin accent strips — never behind body text.\n* **Hard edges everywhere:** radius 0 on all components except pill badges.\n\n---\n\n## 6. PAGE SECTION SPECIFICATIONS\n\n* **6.1 Header\u002FNav:** Sticky `.nav` with tilted brand wordmark, anchor links (Features, How It Works, Pricing, FAQ), the theme toggle (per 1.3), and a `.btn--primary` CTA. On mobile, collapse links behind a menu button with `aria-expanded` and keyboard support — no horizontal scroll.\n* **6.2 Hero:** Layered tilted display headline (clamp-scaled, stepped baselines), supporting subcopy, two CTAs (`.btn--primary` + `.btn--outline`), a `.badge`, and a photographic collage cluster (per 5.2). Recommended: a repeating uppercase ticker strip below the hero (e.g., \"DECONSTRUCT THE GRID — NEW WAVE — 1978–1990 —\").\n* **6.3 Features:** Section label + thick rule; three `.card` blocks with alternating tilt modifiers, Material icons inside tilted icon tiles, headline, and body copy; full hover\u002Ffocus-within states per 2.2.\n* **6.4 How It Works:** Three steps with oversized numerals on stepped baselines, connecting `--rule-line` rules, alternating left\u002Fright alignment, and short English descriptions.\n* **6.5 Testimonials:** Three quote cards (one accent-colored variant), picsum avatars with hard borders, attributions in `--font-mono`, alternating tilts.\n* **6.6 Pricing:** Three tiers; the middle tier is featured (primary-colored 3px border, `--shadow-lg`, extra tilt, `.badge` reading e.g. \"MOST WAVE\"); feature lists with Material `check` icons; one `.btn` per tier. Optional monthly\u002Fannual toggle — if included, it must be a real accessible control with `aria-pressed` and visible price updates.\n* **6.7 FAQ:** Accessible accordion — either native `\u003Cdetails>\u002F\u003Csummary>` or `button` + region with `aria-expanded`\u002F`aria-controls`; animated open\u002Fclose via CSS transitions; a Material `add` icon that rotates to indicate state; fully keyboard operable; never color-only state.\n* **6.8 Final CTA:** Full-bleed band with `--color-primary` background and `#16161a` text (per 1.2 pairing), giant tilted type, and the newsletter `.input-group` implementing the complete state machine from 2.3 with `aria-live` feedback and a loading submit button.\n* **6.9 Footer:** Inverted block — in light mode use `#16161a` background with `#f1f0ea` text; in dark mode use `--color-surface-strong`. Include secondary link columns (Product, Company, Resources), Material Symbol social icons, a small tilted wordmark, and copyright line.\n\n---\n\n## 7. ACCEPTANCE CHECKLIST (validate before publishing)\n\n* Zero `style=\"...\"` attributes; zero inline SVGs; zero inline scripts beyond the single deferred entry point.\n* BEM naming consistent across all three files.\n* Dark mode: toggle works, persists via `localStorage`, falls back to `prefers-color-scheme`, correct `aria-pressed`\u002F`aria-label`, hard shadows remain visible on dark backgrounds.\n* Both themes pass contrast pairing rules from 1.2 at ≥ 4.5:1 body \u002F 3:1 large text.\n* No horizontal scroll at 320px, 768px, 1024px, 1440px; all flex rows collapse to columns on mobile.\n* Every interactive element has hover, focus-visible, and active feedback; all animations respect `prefers-reduced-motion`.\n* All eight sections present with real English copy; all images are picsum URLs with descriptive alt text.\n",1791954988244]