[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-824-Asymmetric-Broken-Grid":3},"# BUILD PROMPT — Complete Landing Page · Theme: \"Asymmetric \u002F Broken Grid\"\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-grade landing page on the first attempt. The page sells a fictional editorial-layout tool for designers and creative teams, brand name **OFFSET**. Every rule below is mandatory. All user-facing copy must be written in **English** (translate any non-English source material before use).\n\n---\n\n## 1. THEME DIRECTION — ASYMMETRIC \u002F BROKEN GRID\n\n**1.1 Identity**\n- **Style:** claude-artisan\u002Fminimal-organic, editorial, expressive, 2017–present.\n- **Keywords:** broken grid, offset layout, intentional off-grid, overlapping elements, dynamic tension and asymmetry, layered z-depth, diagonal flow.\n- **Reference world:** Awwwards agency sites, fashion lookbooks.\n\n**1.2 Signature Moves (all mandatory, applied consistently)**\n- **Hard offset shadows, zero blur:** `--shadow-sm: 4px 4px 0`, `--shadow-md: 8px 8px 0`, `--shadow-lg: 14px 14px 0` — solid, never diffused.\n- **Slight rotation off-axis:** `--tilt-1: rotate(-1.4deg)`, `--tilt-2: rotate(1.1deg)` on cards, buttons, badges, nav, and media blocks.\n- **Overlap via negative margin:** `--overlap: -14px` for stacked\u002Fadjacent cards, testimonial clusters, and hero media over headline.\n- **Hard edges:** all radii are `0px` (tension comes from position, not softness); only pills (`--radius-pill: 999px`) for badges.\n- **Thick borders:** 2–3px solid `--color-border` on cards, inputs, nav, media.\n- **Diagonal flow:** every section composes content along a descending\u002Fascending diagonal — alternate left\u002Fright alignment, staggered card offsets, stepped step blocks. No perfectly centered, symmetric stacks anywhere except where explicitly required (modal backdrop centering).\n\n**1.3 Tension vs. Legibility Guards**\n- Rotation stays within ±1.5deg; interactive elements must keep a minimum 44×44px effective touch target after transforms.\n- Overlapping elements must never cover text or interactive controls; use `--z-dropdown\u002F--z-modal\u002F--z-toast`-tier stacking for layered surfaces.\n- Off-grid composition must never create horizontal overflow (see 2.4).\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.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 is defined in `style.css` and targeted via classes\u002FIDs.\n- **Minimal HTML modifications:** HTML stays semantic and style-agnostic — restyling the site must require editing `style.css` only.\n\n**2.2 CSS Variables & Theme Tokens**\nStore all tokens in `:root` using the reference spec's vocabulary, **plus** the mandatory semantic aliases. Light mode block:\n\n```css\n:root {\n  \u002F* color *\u002F\n  --color-bg: #f5f4f0;\n  --color-surface: #fefefe;            \u002F* near-white, never #ffffff *\u002F\n  --color-surface-strong: #101010;\n  --color-border: #101010;\n  --color-text: #101010;\n  --color-text-muted: #55534c;\n  --color-primary: #ff3d1a;\n  --color-accent: #1a1aff;\n  --text-success: #0e7a44;  --text-error: #c0180c;\n  --border-success: #0e7a44; --border-error: #c0180c;\n  \u002F* mandatory aliases *\u002F\n  --primary: var(--color-primary);   --secondary: var(--color-accent);\n  --bg-primary: var(--color-bg);     --bg-secondary: var(--color-surface);\n  --text-primary: var(--color-text); --text-secondary: var(--color-text-muted);\n  --border-default: var(--color-border);\n  \u002F* radius \u002F shadow \u002F spacing \u002F motion *\u002F\n  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 999px;\n  --shadow-sm: 4px 4px 0 rgba(16,16,16,0.9);\n  --shadow-md: 8px 8px 0 rgba(16,16,16,0.9);\n  --shadow-lg: 14px 14px 0 rgba(16,16,16,0.9);\n  --spacing-gap: 24px;\n  --transition-fast: 120ms; --transition-normal: 240ms;\n  --ease-standard: cubic-bezier(0.7, 0, 0.3, 1);\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  \u002F* type *\u002F\n  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;\n  --font-base: var(--font-sans);\n  --font-display: var(--font-sans);\n  --font-mono: 'JetBrains Mono', ui-monospace, monospace;\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  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;\n  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --tilt-1: rotate(-1.4deg); --tilt-2: rotate(1.1deg); --overlap: -14px;\n}\n```\n\n- **Contrast pairing (mandatory):** every light background token pairs with dark text, every dark background token pairs with light text — enforced in both modes. Any element using `--color-primary` as background keeps `#101010` text; accent backgrounds use white text on light-mode accent and `#101010` text on dark-mode accent.\n\n**2.3 Mandatory Dark Mode Support**\nThe source spec declares no modes and demands validation in light and dark before publishing — therefore dark mode is mandatory, not optional.\n- **Token strategy:** duplicate this dark set under **both** `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` **and** `:root.dark { … }`; define `:root.light { … }` to force light explicitly:\n\n```css\n\u002F* dark values *\u002F\n--color-bg: #101010; --color-surface: #1a1a19; --color-surface-strong: #f5f4f0;\n--color-border: #f5f4f0; --color-text: #f5f4f0; --color-text-muted: #a6a29a;\n--color-primary: #ff3d1a; --color-accent: #6f6fff;          \u002F* lightened for dark bg *\u002F\n--text-success: #58c98b; --text-error: #ff6b5e;\n--border-success: #58c98b; --border-error: #ff6b5e;\n--shadow-sm: 4px 4px 0 rgba(245,244,240,0.9);\n--shadow-md: 8px 8px 0 rgba(245,244,240,0.9);\n--shadow-lg: 14px 14px 0 rgba(245,244,240,0.9);            \u002F* light hard shadows on dark bg *\u002F\n```\n\n- **Inversion logic:** `--color-surface-strong` inverts per mode (dark panel in light mode, light panel in dark mode) and its inner text token flips accordingly — never dark-on-dark or light-on-light.\n- **Theme switching:** zero HTML restructuring required — only CSS variable flips.\n- **Persistence:** `script.js` reads `localStorage` (\"theme\"); on first visit falls back to `prefers-color-scheme`; applies `.dark` or `.light` on `\u003Chtml>`.\n- **Toggle control:** visible button in the nav (Material Symbols `dark_mode` \u002F `light_mode`), with correct `aria-pressed` and `aria-label` state, and `cursor: pointer`.\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with **Flexbox** (`display: flex` \u002F Tailwind flex utilities).\n- **Default alignment rule:** every flex container defaults to `align-items: center` (`items-center`) unless an explicitly justified exception exists (e.g., stretched pricing cards).\n- **Mobile-first:** rows become columns below ~768px; reduce\u002Fremove negative-margin overlaps on small viewports so nothing is obscured; prevent horizontal scrolling — apply `overflow-x: clip` on `body` as a safety net for rotated\u002Foverlapping elements and verify at 320px.\n\n**2.5 Framework Default & Tailwind CSS Integration**\n- Use **Tailwind CSS** (Play CDN permitted) for layout utilities (`flex`, `items-center`, `gap-*`, responsive prefixes).\n- All utility usage maps back to CSS variables or the reusable component classes from the reference spec: `.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge` — implemented in `style.css` (via `@layer components` \u002F `@apply` or clean custom CSS), never restyled ad hoc in markup.\n\n**2.6 Typography & Icons (Google Fonts Mandatory)**\n- **Text:** load **Archivo** (weights 400–900) and **JetBrains Mono** from Google Fonts via `\u003Clink>`; bind to `--font-base`, `--font-display`, and `--font-mono`.\n- **Exception clause:** the reference token 'Neue Haas Grotesk' is proprietary and unavailable on Google Fonts — substitute Archivo as the grotesk while retaining the `'Helvetica Neue', Arial` fallback chain.\n- **Icons:** Google Material Symbols only, via `\u003Clink>` and ligature spans (e.g., `\u003Cspan class=\"material-symbols-outlined\">arrow_forward\u003C\u002Fspan>`). **Raw inline SVGs and local icon files are forbidden.**\n- **Images (optional):** placeholder photography allowed only via `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F\u003Cw>\u002F\u003Ch>`, with descriptive `alt` text, explicit `width`\u002F`height`, `loading=\"lazy\"` below the fold, and a CSS grayscale\u002Fcontrast filter so imagery stays palette-cohesive in both modes.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Button (`.btn`, `.btn--primary`, `.btn--loading`, `.btn--success`, `.btn--error`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px; `border: 2px solid var(--color-border); box-shadow: var(--shadow-sm); transform: var(--tilt-1);` bold `--text-base` type; `--radius-md` (0px).\n- **Hover:** `transform: translate(-2px,-2px) var(--tilt-1); box-shadow: var(--shadow-md); cursor: pointer;` (use `transition: var(--transition-fast) var(--ease-standard)` on transform\u002Fshadow).\n- **Focus:** distinct focus ring for keyboard navigation — `.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }`.\n- **Active\u002FPressed:** `transform: translate(0,0) scale(0.97) var(--tilt-1); box-shadow: var(--shadow-sm);`.\n- **Loading:** `.btn--loading` sets `aria-busy=\"true\"`, disables interaction and prevents double-clicks (`pointer-events: none`), and renders a CSS-only spinner (animated border circle) or animated Material icon **without changing button dimensions** (reserve spinner space).\n- **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed; transform: none; box-shadow: none;`.\n- **Success\u002FError:** temporary feedback classes swap border\u002Ftext to `--text-success`\u002F`--text-error` with a check\u002Ferror Material icon and an `aria-live` announcement; `.btn--primary` uses `--color-primary` background with `#101010` text in both modes.\n- **Destructive:** no destructive actions are expected; if any `.btn-danger` is introduced it must be visually distinct (error tokens) in both light and dark.\n\n**3.2 Card (`.card`, `.card--feature`, `.card--testimonial`, `.card--pricing`, `.card--inverted`, `.card--empty`, `.card--skeleton`)**\n- **Default:** flexible Flexbox column, `background: var(--color-surface); border: 3px solid var(--color-border); box-shadow: var(--shadow-md); padding: var(--space-6); transform: var(--tilt-2);` with `.card:nth-of-type(2n) { transform: var(--tilt-1); margin-top: var(--overlap); }` for the broken-grid rhythm.\n- **Hover:** `transform: translate(-2px,-2px) var(--tilt-2); box-shadow: var(--shadow-lg);`.\n- **Focus-within:** when a child link\u002Fbutton receives focus, the card border shifts to `--color-accent`.\n- **Loading (skeleton):** `.card--skeleton` shimmer via animated `linear-gradient` in CSS, fixed `min-height`, no layout jumps.\n- **Empty state:** `.card--empty` fallback layout with one Material icon, clear guidance text, and an action button.\n- **Inverted:** `.card--inverted` uses `--color-surface-strong` with the mode-appropriate paired text color.\n\n**3.3 Form & Input (`.input`, `.input-group`)**\n- **Structure:** flex container wrapping a `\u003Clabel>` (bound with `for`), the input, and a dedicated error-feedback container (`aria-live=\"polite\"`).\n- **States (all styled via classes):** empty; focused (`border-color: var(--color-accent); box-shadow: 4px 4px 0 rgba(26,26,255,0.4);` with mode-aware accent); filled; valid (`--border-success` + check icon); invalid (`--border-error`, `--text-error` message, error icon); disabled (reduced opacity, `not-allowed`); read-only.\n- **Behavior:** `script.js` handles the Final CTA newsletter form — prevent default, simulate loading (`.btn--loading`, ~1.2s), then success state with icon and `aria-live` status. Client-side email validation only; no backend.\n\n**3.4 FAQ Accordion**\n- Use native semantic `\u003Cdetails>`\u002F`\u003Csummary>` pairs (no JS required), styled per theme: 2px borders, mono question numbering, Material `expand_more` icon rotating 180° on `[open]`, hover and `:focus-visible` feedback on `summary`.\n- Smooth open\u002Fclose via CSS transition (opacity\u002Ftransform), disabled under `prefers-reduced-motion`. Never rely on color alone to indicate open state.\n\n**3.5 Modal \u002F Popup (only if you introduce one — not required for this page)**\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n- **UX:** centered flex container (`align-items: center; justify-content: center`), backdrop overlay, Material icon close button, keyboard focus trapping, closeable via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`.\n\n---\n\n## 4. PAGE COMPOSITION — SECTION-BY-SECTION BLUEPRINT\n\nOrder: nav → Hero → Features → How It Works → Testimonials → Pricing → FAQ → Final CTA → Footer.\n\n**4.0 Global Nav (`.nav`)**\nSticky top nav per the reference spec: `display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); background: var(--color-surface); border-bottom: 3px solid var(--color-border); transform: skewX(-1deg);` — containing the OFFSET wordmark (display font), 3–4 anchor links (Features, How it works, Pricing, FAQ) with `:focus-visible` rings and hover underline, the theme toggle (2.3), and a primary CTA button. Below ~768px the links wrap or stack in a column — no horizontal scroll. Include a visually hidden skip link and use CSS smooth scrolling (guarded by `prefers-reduced-motion`).\n\n**4.1 Hero**\nOff-center editorial composition: tilted mono kicker badge (`.badge`, pill radius, `--tilt-1`), oversized display headline (`clamp(2.5rem, 8vw, var(--text-5xl))`, uppercase, tight leading), one muted supporting sentence, and a CTA cluster of `.btn--primary` + default `.btn`. Layered z-depth: a tilted, 3px-bordered, `--shadow-lg` media block (grayscale picsum image, `--tilt-1`) overlaps the headline using negative margin and a `--z-*` token, pushing the section's flow diagonally down-right. All text remains fully readable; nothing interactive is overlapped.\n\n**4.2 Features — 3 cards**\nSection header with mono index label (e.g., \"01 — FEATURES\") tilted slightly. Three `.card--feature` blocks in a flex row: alternating tilts, staggered vertical offsets (diagonal descent), each containing a Material icon inside a 2px-bordered square chip, a bold title, and 1–2 lines of muted copy. On mobile: single column, tilts kept subtle, overlaps removed.\n\n**4.3 How It Works — 3 steps**\nDiagonal staircase: step 2 and step 3 progressively offset (progressive `margin-top`), never aligned. Each step: a tilted mono number badge (01 \u002F 02 \u002F 03), short bold title, brief text, and an arrow Material icon suggesting flow direction. Mobile: column order preserved, offsets reset.\n\n**4.4 Testimonials**\nEditorial cluster: one large `.card--inverted` pull-quote (layered on top via negative margins and z tokens) overlapping two smaller tilted `.card--testimonial` cards. Mono attributions with fictional names\u002Froles; optional small grayscale avatar images with 2px borders. Text on the inverted card obeys the contrast pairing rule in both modes.\n\n**4.5 Pricing — 3 tiers**\nThree `.card--pricing` blocks: Free \u002F Studio \u002F Team with realistic prices (e.g., $0, $16\u002Fmo, $39\u002Fmo) in display type, mono period labels, feature lists with Material check icons, and one CTA button per tier. The featured middle tier uses `.card--inverted` + a tilted pill badge \"MOST POPULAR\" (`--color-primary` background, `#101010` text), `--shadow-lg`, slight negative translate to overlap neighbors (z-token layering, nothing covered). Mobile: single column, featured tier visually distinct.\n\n**4.6 FAQ**\nConstrained but deliberately off-center container, tilted mono section label, 6 realistic Q&A `\u003Cdetails>` items per 3.4. Reuse no modals.\n\n**4.7 Final CTA**\nFull-bleed `.card--inverted`-style panel (`--color-surface-strong` background, paired inverted text in both modes): oversized display headline, one supporting line, the email-capture form per 3.3 (`.input` + `.btn--primary` with loading → success flow and `aria-live` feedback), a mono trust microcopy line (\"No credit card · Cancel anytime\"), and one or two tilted decorative border\u002Fshadow elements for layered depth.\n\n**4.8 Footer with secondary links**\nContinues the inverted panel or sits on `--color-bg` with a 3px top border. Flex-wrap layout (`align-items: center` default): brand wordmark + one-line description, three link groups (Product, Company, Legal) as anchor lists, social links with Material icons and `aria-label`s, and a mono copyright line. Links: hover underline with 3px offset, visible `:focus-visible` ring, `--text-secondary`-colored but never color-only meaning. Wraps to column on mobile without overflow.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` type, responsive breakpoints, zero horizontal overflow at 320px — verify especially around rotated\u002Foverlapping elements.\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes (shadows, transforms, colors, accordion). Under `prefers-reduced-motion: reduce`: remove tilts, transitions, spinner motion, icon rotation, and scroll-reveal animation entirely (content fully visible without motion).\n- **Progressive enhancement:** any scroll-reveal must not hide content when JS fails — elements are visible by default.\n- **Accessibility (a11y):** semantic landmarks (`header`, `main`, `section[aria-labelledby]`, `footer`), a single `h1` with logical heading order, contrast ≥ 4.5:1 for text and ≥ 3:1 for focus rings\u002Fborders in **both light and dark**, never color-only state (always icon + text + border), full keyboard operability with logical DOM\u002Ffocus order, and `aria-live` regions for dynamic feedback (form success\u002Ferror, loading states).\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Stacking discipline:** nav \u003C dropdown (`--z-dropdown`) \u003C modal (`--z-modal`) \u003C toast (`--z-toast`); no layered component may obscure interactive content.\n\n---\n\n## 6. COPY & CONTENT DIRECTION (ENGLISH ONLY)\n\n- **Brand:** OFFSET — a fictional editorial layout tool for designers and creative teams. Tone: editorial, confident, punchy; body copy in sentence case; labels\u002Fkickers in uppercase mono with letter-spacing.\n- Write **real, finished English copy** for every section — headline, feature titles\u002Fdescriptions, step titles, testimonial quotes with invented names\u002Froles, pricing tiers and feature lists, 6 FAQ Q&As, CTA, and footer text. **No lorem ipsum.**\n- **Copy locale exception:** although the source specification was drafted in Portuguese, all user-facing copy, labels, aria-labels, and comments must be delivered in English; keep all class names, variable names, and file names in ASCII English.\n\n---\n\n## 7. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** three separate files — `index.html`, `style.css`, `script.js`. The only script reference in HTML is `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`; external CDN references for Google Fonts, Material Symbols, and Tailwind are permitted.\n- **CSS organization:** `@layer` order — tokens → base → components (`nav`, `btn`, `card`, `input`, `badge`, `details`) → utilities; include the base rules from the reference spec (body reset, component classes, reduced-motion guard) and extend them per Sections 1–4.\n- **Naming convention:** BEM only, consistent everywhere (`btn--primary`, `card--inverted`, `nav__link`) — never mix conventions.\n- **script.js scope:** theme toggle with `localStorage` persistence (2.3) and the newsletter form simulation (3.3). No other behavioral JS unless specified.\n- **No unrequested placeholders:** since full copy direction is provided (Section 6), submit complete copy; placeholder imagery is allowed only via the picsum rule in 2.6.\n- **Pre-publication QA (mandatory, per source spec):** validate the page in **both light and dark modes**, at 320px\u002F768px\u002Fdesktop widths, with keyboard only, and with reduced motion enabled — fix all contrast, overflow, and focus issues before delivering.\n- Deliver everything in a single complete response: final `index.html`, `style.css`, and `script.js`, ready to run as-is.\n",1791954993901]