[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-196-Construtivismo-Literario-Experimental":3},"**ROLE:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page specified below and deliver final, production-ready code on the first attempt. Every rule in this document is mandatory.\n\n---\n\n## 0. PROJECT BRIEF & ART DIRECTION\n\n**0.1 Theme:** \"Experimental Literary Constructivism\" — an artistic, experimental, narrative-driven landing page for an independent experimental-literature book publisher. Era: 2026+ Visual Narratives. Tone: geometric, dynamic, unconventional, creative, engaging, modern.\n\n**0.2 Sections (in this order):** Sticky header (brand + anchor nav + theme toggle) → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA (with email capture) → Footer with secondary links.\n\n**0.3 Palette (map to tokens):**\n- Core: Black `#000000`, White `#FFFFFF`, Dark Red `#8B0000` (primary brand color), Charcoal `#36454F`\n- Accents: Ochre `#CC7722`, Teal `#008080`, Olive `#6B8E23`, Burnt Orange `#CC5500`\n\n**0.4 Mandatory Visual Language:**\n- Text-and-image collages with layered overlays — implement and use the class `.text-collage`.\n- Geometric shapes framing content — implement and use the class `.geometric-frame`.\n- Contrasting sans-serif + serif typography (PT Sans vs. PT Serif).\n- Asymmetrical, narrative-driven layouts — each section visually continues a story; avoid uniform centered stacks.\n- Hover micro-interactions that reveal hidden text (must also work on keyboard focus and touch — never hover-only).\n- Abstract \"page-turn\" transition effect — implement and use the class `.page-turn-effect` for section entrances\u002FCTA interactions.\n- Signature CSS from the spec: `border-bottom: 3px solid #8B0000` (header, footer, geometric rules), `transform: skewX(2deg)` (decorative blocks and button shells only — never skew body copy; counter-skew inner content so text stays upright), and `transition: all 0.4s ease-in-out` (expose as tokens, see 1.2).\n- Sharp corners and hard-edged offset shadows (e.g., `4px 4px 0` black) instead of soft blurs — this is the constructivist signature.\n\n**0.5 Language:** All user-facing copy must be written in English. Author original, thematic copy for the publisher (invent a fitting press name, hero headline, feature titles, step titles, testimonial quotes, tier names\u002Fprices, FAQ Q&As, CTA copy, footer labels). No lorem ipsum anywhere.\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- Target all design properties, layout rules, and states via class or ID selectors only.\n- Keep HTML semantic and styling-agnostic: restyling the site must require editing only the CSS file, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine in `:root` (values shown are the light-theme defaults):\n- Colors: `--primary: #8B0000`, `--secondary: #36454F`, `--bg-primary: #fefefe`, `--bg-secondary: #F4F1EA` (paper-tinted surface), `--text-primary: #000000`, `--text-secondary: #36454F`, `--text-success: #6B8E23`, `--text-error: #CC5500`, `--border-default: #36454F`, `--border-error: #CC5500`, `--border-success: #6B8E23`.\n- Accents: `--accent-ochre: #CC7722`, `--accent-teal: #008080`, `--accent-olive: #6B8E23`, `--accent-burnt: #CC5500`, plus `--ink-black: #000000` and `--paper-white: #FFFFFF`.\n- Geometry: `--radius-sm: 0`, `--radius-md: 2px`, `--radius-lg: 4px` (sharp constructivist corners), `--shadow-sm` and `--shadow-md` as hard offset shadows (e.g., `4px 4px 0` \u002F `8px 8px 0` in `--ink-black`).\n- Motion & spacing: `--spacing-gap`, `--transition-fast: 0.15s`, `--transition-normal: 0.4s`, `--ease-standard: ease-in-out` (the spec's `all 0.4s ease-in-out` is expressed as `transition: var(--transition-normal) var(--ease-standard)`).\n- Stacking: `--z-dropdown`, `--z-modal`, `--z-toast` (e.g., 1000 \u002F 2000 \u002F 3000).\n- Typography: `--font-base: 'PT Sans', sans-serif`, `--font-serif: 'PT Serif', serif`.\n- **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforce this in both themes.\n- **Pure-white exception clause:** the page canvas must use `#fefefe`, not `#ffffff`; `#FFFFFF` is permitted only as the fill of collage cutout panels and geometric shapes, per the spec's `background: #FFFFFF`.\n\n**1.3 Mandatory Dark Mode**\n- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class: e.g., `--bg-primary: #0D0D0D`, `--bg-secondary: #1C1C1C`, `--text-primary: #fefefe`, `--text-secondary: #B9C0C6`, `--border-default: #3A3F45`.\n- Dark mode must lighten accent tokens used as text\u002Fborders so contrast stays ≥ 4.5:1 (starting points, to be verified: red `#E06650`, ochre `#E8934A`, teal `#3FA9A5`, olive `#A3B862`, burnt orange `#F07850`). Filled primary buttons may keep `#8B0000` with `#fefefe` text in both themes.\n- Default first paint must come from the media query (no flash of wrong theme); the `.dark`\u002Flight class is layered by `script.js` for persisted overrides.\n- Theme toggle button in the header: visible, keyboard operable, with correct `aria-pressed` and `aria-label` state. Persist choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Switching themes must require zero HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless there is an explicitly commented exception (e.g., `stretch` for collage columns).\n- Mobile-first: rows convert to columns on small viewports; no horizontal scrolling at any width; minimum touch targets of 44×44px.\n\n**1.5 Framework Default**\n- Use clean, modern vanilla CSS (the spec supplies raw CSS), organized with `@layer` ordering: tokens → base → layout → components → utilities. No CSS frameworks.\n- All repeated patterns must map to reusable classes: `.btn`, `.card`, `.input-group`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load PT Sans and PT Serif via Google Fonts `\u003Clink>` tags; bind to `--font-base` and `--font-serif`. Use the serif for display headlines, oversized numerals, and pull quotes; the sans for body, UI, and labels — the contrast between them is a core design device.\n- All icons come from Google Material Symbols (Outlined), ligature-based. Raw inline SVGs and local icon files are forbidden. Decorative icons get `aria-hidden=\"true\"`; meaningful icons are paired with text labels.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\nStyle all states via CSS classes; base layout: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px.\n- **Default:** variant fills — `.btn--primary` (dark red), `.btn--secondary` (charcoal\u002Foutline), `.btn--ghost`. Constructivist touch: the button shell may carry `transform: skewX(2deg)` with an inner counter-skewed label; the skew straightens to `0deg` on hover.\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)` click feedback.\n- **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol without changing button dimensions; expose `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error`, always paired with an icon and\u002For text (never color alone).\n- **Danger:** `.btn--danger` must be visually distinct in both light and dark themes.\n\n**2.2 Cards**\n- **Default:** flexible Flexbox layout on `--bg-secondary` with subtle borders and hard offset elevation via tokens.\n- **Hover:** `transform: translateY(-2px)` and\u002For skew shift plus shadow change.\n- **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** shimmer animation defined in CSS to prevent layout jumps.\n- **Empty State:** fallback layout with a Material icon and clear guidance text.\n- Variants required: `.card--feature`, `.card--pricing` (featured tier), `.card--testimonial`.\n\n**2.3 Forms & Inputs (Final CTA email capture)**\n- Structure: a flex `.input-group` wrapping a `\u003Clabel>`, the input, and a dedicated error-feedback container.\n- States: empty, focused (outline ring), filled, valid (success border + icon), invalid (error border, error text, error icon, `aria-invalid`, `aria-describedby`), disabled, read-only.\n- Submit button implements the full loading → success\u002Ferror cycle; feedback messages render in an `aria-live=\"polite\"` region.\n\n**2.4 FAQ Accordion**\n- Build with semantic `\u003Cdetails>\u002F\u003Csummary>` or a button + region pattern with `aria-expanded` \u002F `aria-controls`.\n- Fully keyboard operable; open\u002Fclose animated via CSS transitions (tokens); Material icon chevron rotates on expand; the reveal may use the `.page-turn-effect` flavor.\n\n**2.5 Overlays (conditional)**\nOnly include an overlay if the design genuinely needs one (e.g., a \"look inside\" preview). If included: opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states all animated via CSS; centered flex container (`align-items: center`); backdrop; Material icon close button; keyboard focus trap; closes via `Esc` and backdrop click; `aria-modal` and `role=\"dialog\"`.\n\n**2.6 Section-by-Section Requirements**\n- **Header (sticky):** serif brand wordmark, anchor nav (flex; collapses to an accessible hamburger below the mobile breakpoint — `aria-expanded`, `aria-controls`, `Esc` closes, uses `--z-dropdown`), theme toggle; `border-bottom: 3px solid var(--primary)`.\n- **Hero:** asymmetric `.text-collage` composition — overlapping text blocks and image panels inside `.geometric-frame` shapes; one `\u003Ch1>` mixing serif display type with sans accents; subcopy; primary + secondary CTAs; decorative geometric shapes (ochre\u002Fteal\u002Fcharcoal) that never obscure text or cause overflow; scroll cue hinting at the page-turn motif.\n- **Features (3 cards):** three `.card--feature` elements, each with a Material icon in a geometric chip, a title, and a hidden description revealed by hover **and** `:focus-within` **and** a tap\u002Fkeyboard-accessible mechanism (never hover-only).\n- **How It Works (3 steps):** oversized serif numerals 01\u002F02\u002F03, steps connected by a geometric rule, alternating asymmetric alignment, staggered entrance animation triggered on scroll (disabled under reduced motion).\n- **Testimonials:** three `.card--testimonial` serif pull quotes with oversized quotation glyphs, subtle rotational offsets that straighten on hover\u002Ffocus, attributions with names and roles.\n- **Pricing (3 tiers):** three `.card--pricing` cards; the middle tier is featured with a `.geometric-frame`, a badge combining icon + text (e.g., \"Editor's Choice\" — never color alone), distinct styling in both themes; serif prices; feature lists with Material check icons; one CTA button per tier with full state support.\n- **FAQ:** 5–6 authored Q&A items per 2.4.\n- **Final CTA:** full-bleed dark red (`--primary`) geometric block with skewed edge dividers; serif headline; light text on the dark red (contrast pairing); email capture form per 2.3.\n- **Footer:** multi-column flex layout that wraps to a single column on mobile; secondary links (About, Catalog, Submissions, Events, Contact, Privacy, Terms); social links as labeled Material icons; copyright line; `border-top: 3px solid var(--primary)` mirroring the header.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, defined breakpoints, zero horizontal overflow.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)` \u002F `var(--transition-fast)` and `var(--ease-standard)`.\n- **Reduced motion:** under `prefers-reduced-motion`, disable the page-turn effect, shimmer, skew transitions, entrance animations, and all transforms.\n- **Accessibility:** ≥ 4.5:1 text contrast in both modes; never rely on color alone; semantic HTML5 (`header`, `nav`, `main`, `section`, `article`, `footer`) with a single `\u003Ch1>` and logical heading order; correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; a skip-to-content link; `aria-live` regions for form and loading feedback.\n- **Contrast guardrails:** ochre and teal on light backgrounds are reserved for large display type (≥ 24px \u002F 18.66px bold), borders, and decorative shapes; small text uses black\u002Fcharcoal.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Decorative imagery:** prefer CSS-only geometric compositions; if photos are used, load seeded `picsum.photos` images with meaningful `alt` text and `loading=\"lazy\"`; purely decorative shapes are `aria-hidden`.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, and `script.js`. The HTML contains exactly one `\u003Cscript src=\"script.js\" defer>` reference and no other inline script blocks; no inline styles anywhere.\n- **Naming:** BEM convention throughout the deliverable — never mix conventions. The spec-mandated classes `.text-collage`, `.geometric-frame`, and `.page-turn-effect` are reserved block names and must be defined in `style.css` and used in the markup.\n- **Copy:** all user-facing copy in English, authored to theme; no lorem ipsum, no TODOs, no unrequested placeholders.\n- **Output:** deliver the complete, runnable code for all three files in a single response, on the first attempt, with no explanatory filler beyond the code.\n",1791954983108]