[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-216-Editorial-Investigativo-Sobrio":3},"# BUILD SPECIFICATION — LANDING PAGE: \"SOBER INVESTIGATIVE EDITORIAL\" (Editorial Investigativo Sóbrio)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page defined below on the first attempt. Generate the final code immediately — no clarifying questions, no partial deliverables.\n\n**Project Brief:** A complete, single-page landing page for an investigative journalism platform. Output category: **Luxury & Editorial**. Personality: serious, informative, authoritative, trustworthy, clean, structured, deep. Era: 2026+ \"Critical Information.\"\n\n**Design Direction:** Design a serious, informative editorial landing page. Use classic serif typography for headlines and sans-serif for body text; newspaper-like column layouts; black-and-white or sepia-toned imagery; infographic and data-graphic elements; micro-interactions that highlight important text; direct, distraction-free section transitions; dark grey and deep red accents; an authoritative, trustworthy feel.\n\n**Required Sections (in this exact order):** Header\u002FMasthead with navigation + theme toggle → 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 lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* Target all design properties, layout rules, and states exclusively via class or ID selectors.\n* Keep HTML semantic and styling-agnostic: changing the site's look must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (light theme) and override under `.dark` \u002F `@media (prefers-color-scheme: dark)`:\n* **Colors (light \"Day Edition,\" default):** `--primary: #2C3E50` (dark grey — headlines, primary buttons, masthead); `--secondary: #001F3F` (navy — data graphics, featured surfaces); `--accent: #8B0000` (deep red — kickers, emphasis, danger); `--ochre: #CC7722` (infographic highlight and `.text-highlight-subtle` fill — graphic\u002Flarge use only, never small body text); `--olive: #6B8E23` (success icons\u002Fborders; darken to `#5A731C` for small success text to preserve AA contrast); `--bg-primary: #FEFEFE`; `--bg-secondary: #F5F3EE` (aged-paper grey for cards and alternating sections); `--bg-muted: #E0E0E0` (infographic tracks, dividers); `--text-primary: #2C3E50`; `--text-secondary: #5D6D7E`; `--text-success: #6B8E23`; `--text-error: #8B0000`; `--border-default: #C0C0C0`; `--border-success: #6B8E23`; `--border-error: #8B0000`.\n* Reserve pure black `#000000` for the hero display headline and masthead wordmark only.\n* **Exception clause:** the source specification listed `#FFFFFF` as the background; per mandatory architecture pure white is forbidden — map every white usage to `#FEFEFE`.\n* **Contrast pairing:** every light background token pairs with dark text tokens, and every dark background token pairs with light text tokens — enforced in every theme, not only the default.\n* **Shape & depth:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px` (editorial = crisp edges, used sparingly); `--shadow-sm: 0 1px 3px rgba(28,37,48,.08)`; `--shadow-md: 0 6px 18px rgba(28,37,48,.14)`.\n* **Motion & space:** `--spacing-gap: 1.5rem`; `--transition-fast: .15s ease-in-out`; `--transition-normal: all .3s ease-in-out` (per source spec — scope `all` to the concrete properties being animated wherever possible); `--ease-standard: ease-in-out`.\n* **Stacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` — layered components must never conflict.\n\n**1.3 Mandatory Dark Mode — \"Night Edition\"**\n* Define full dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class: `--bg-primary: #10161D`; `--bg-secondary: #1A222C`; `--bg-muted: #26303C`; `--text-primary: #E9E6E0`; `--text-secondary: #A8B2BC`; `--border-default: #3A4654`; lightened text accents: red → `#E08579`, olive → `#A9C16C`, ochre → `#E39A55`. `.btn-primary` inverts to a light paper fill with dark text; the navy featured pricing surface keeps light text.\n* Theme switching must require zero HTML restructuring — variable overrides only.\n* Provide a visible header toggle (Material Symbol `dark_mode`\u002F`light_mode`) with correct `aria-pressed` and `aria-label` (\"Switch to Night Edition\" \u002F \"Switch to Day Edition\"); persist the choice via `localStorage`, falling back to `prefers-color-scheme` on first visit.\n* **Exception clause:** the source specification marked dark mode as not required (\"✗\"); per mandatory architecture it must still be fully implemented as specified, with the light Day Edition as the default.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified.\n* Mobile-first: all rows convert to columns below 768px; newspaper columns collapse to one; no horizontal scrolling at any width from 320px up.\n\n**1.5 Framework Default & CSS Organization**\n* Use clean custom CSS organized with Tailwind-style `@layer` \u002F `@apply` discipline (base → components → utilities). Every utility or component class must resolve back to the CSS variables and the reusable classes `.btn`, `.card`, `.input-group`, `.report-column`, `.infographic-element`, `.text-highlight-subtle`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via `\u003Clink>` in `\u003Chead>`: **Merriweather** (400\u002F700\u002F900 + italic) for all headings, and **Source Sans 3** (400\u002F600\u002F700) for body and UI. Bind `--font-heading: 'Merriweather', Georgia, serif` and `--font-base: 'Source Sans 3', 'Helvetica Neue', sans-serif`.\n* Body copy: `line-height: 1.8` (per source spec). Headlines: Merriweather with tight leading (1.1–1.2).\n* All icons are Google Material Symbols (Outlined). Raw inline SVGs and local icon files are forbidden.\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button (`.btn`)**\n* Base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; Source Sans 3 at 600 weight.\n* **States (all via CSS classes):** **Hover** — brightness\u002Fshadow shift, `cursor: pointer`; **Focus** — distinct ring (`outline: 2px solid var(--secondary); outline-offset: 2px`) visible in both themes; **Active** — `transform: scale(0.97)`; **Loading** — interactions disabled (prevents double-clicks), CSS spinner or rotating Material `progress` icon, button dimensions unchanged; **Disabled** — `opacity: .5`, greyscale, `cursor: not-allowed`; **Success\u002FError** — temporary feedback driven by `--text-success` \u002F `--text-error`.\n* **Variants:** `.btn-primary` (dark grey fill, light text; inverts in Night Edition); `.btn-secondary` (outlined, transparent); `.btn-accent` \u002F `.btn-danger` (deep red `#8B0000` fill — reserved for the Final CTA and destructive actions; visually distinct in both themes); `.btn-ghost`.\n\n**2.2 Card (`.card`)**\n* **Default:** flexbox column on `--bg-secondary`, 1px `--border-default`, `--radius-md`, `--shadow-sm`.\n* **Hover:** `transform: translateY(-2px)` + `--shadow-md` via `var(--transition-normal)`. **Focus-within:** border highlights in `--secondary` when a child link\u002Fbutton gains focus. **Loading:** `.card--skeleton` shimmer keyframes defined in CSS (no layout jump). **Empty state:** centered Material Symbol + clear guidance text.\n\n**2.3 Form & Input (`.input-group`)**\n* Structure: flex container wrapping `\u003Clabel>`, the field, and a dedicated error-feedback element with `aria-live=\"polite\"`.\n* **States:** empty, focused (outline ring), filled, valid (`--border-success` + check icon), invalid (`--border-error`, red message + error icon — never color-only), disabled, read-only. Inputs min-height 44px.\n\n**2.4 Modal \u002F Dialog (governs any overlay used)**\n* **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n* Centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button (44px), keyboard focus trap, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal` + labelled title.\n\n## 3. PAGE SECTION BLUEPRINT — EDITORIAL VISUAL LANGUAGE\n\n**3.1 Global Editorial Language**\n* Section transitions are direct and distraction-free: hairline rules (`border-bottom: 1px solid var(--border-default)`), generous whitespace, no parallax or scroll-jacking; only quick, subtle fades, respecting `prefers-reduced-motion`.\n* Kickers: small-caps, letter-spaced sans labels in deep red above every section title; section titles in Merriweather.\n* Image treatment: all photos rendered black-and-white\u002Fsepia via CSS (`filter: grayscale(1) sepia(.15) contrast(1.05)`) — never rely on pre-processed assets; hover eases the filter slightly.\n* `.report-column`: newspaper text container — `column-count: 2` at ≥768px, `column-gap: 2.5rem`, `column-rule: 1px solid var(--border-default)`; single column on mobile.\n* `.infographic-element`: data graphics built purely with HTML+CSS (flex stat bars, hairline rules, counters) using navy\u002Fochre\u002Folive on `--bg-muted` tracks; each carries a visible caption or `aria-label` text alternative.\n* `.text-highlight-subtle`: important phrases receive a subtle highlighter micro-interaction — a low-opacity `--ochre` background sweep or animated underline on hover\u002Ffocus — always paired with `font-weight: 700` so emphasis is never color-only.\n\n**3.2 Header \u002F Masthead**\n* Sticky, `--bg-primary`, `border-bottom: 1px solid var(--border-default)`, z-index from `--z-dropdown`. Merriweather 900 wordmark + tagline; anchor nav (Features, Method, Testimonials, Pricing, FAQ); theme toggle. Mobile: nav stacks vertically or scrolls as a row without page overflow. Include a skip-to-content link.\n\n**3.3 Hero**\n* Kicker line, display headline in Merriweather (black `#000000`, fluid `clamp()` sizing), dek paragraph, and a byline rule (\"By the Newsroom · date\") over a hairline border.\n* CTAs: `.btn-primary` \"Read the Latest Investigation\" + a text link with deep-red underline \"Our Methodology\".\n* A `.report-column` lead excerpt with a drop cap, plus a sepia-toned hero image.\n* Data strip: three `.infographic-element` stat blocks (e.g., \"140+ investigations published,\" \"100% reader-funded,\" \"32 documents per report\") — optional JS count-up, disabled under reduced motion.\n\n**3.4 Features — 3 Cards**\n* Section kicker + title; three `.card` components in a flex row → column. Each: Material Symbol in a bordered square, Merriweather card title, sans body copy, thin top rule in `--secondary`. Suggested themes: Deep-Dive Investigations, Data & Infographics, Independent Analysis. All card states per 2.2.\n\n**3.5 How It Works — 3 Steps**\n* Steps 01 \u002F 02 \u002F 03 in large Merriweather numerals connected by a thin horizontal rule (vertical stack on mobile); each step: numeral, Material Symbol, title, description. Style the connector as an `.infographic-element` timeline.\n\n**3.6 Testimonials**\n* Three editorial pull-quotes: large Merriweather quotation with `.text-highlight-subtle` on key phrases, attribution in small caps (name, role, outlet), thin left border in `--accent`, circular sepia avatar via the CSS filter. Flex row → column.\n\n**3.7 Pricing — 3 Tiers**\n* Three `.card` tiers: \"Reader\" (free), \"Subscriber\" (featured), \"Institution\" (contact). Featured card: `--secondary` navy fill with light text (contrast pairing enforced), `--shadow-md`, ochre \"Most Read\" badge; others on `--bg-secondary` with top rules. Each: tier name, Merriweather price, feature list with Material check icons, `.btn` (featured tier uses the inverted light button). All button states per 2.1.\n\n**3.8 FAQ**\n* 5–6 items as an accessible accordion: native `\u003Cdetails>\u002F\u003Csummary>` or ARIA `button` + region (`aria-expanded`, `aria-controls`). Merriweather questions, sans answers, hairline separators, Material chevron rotating 180° on open, smooth CSS height transition, 44px touch targets, fully keyboard operable.\n\n**3.9 Final CTA**\n* Full-width band on `--primary` with light text (Night Edition: sits on `--bg-secondary` with a hairline border). Serif headline, supporting line, and an email-capture `.input-group`: label + input + `.btn-accent` \"Subscribe\". Inline validation per 2.3 with `aria-live` feedback; on success, show an inline olive check icon + confirmation message — no page reload.\n\n**3.10 Footer**\n* `--bg-secondary`, `border-top: 1px solid var(--border-default)`. Columns: wordmark + one-line mission statement; secondary links (About, Ethics & Standards, Methodology, Corrections Policy, Contact, Privacy, Terms); bottom bar: \"© 2026 {Publication} · Reader-funded · Independently verified.\" Links use descriptive real labels (`href=\"#...\"` acceptable).\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` typography and breakpoints without horizontal overflow.\n* **Smooth animations:** `var(--transition-normal)` on all state changes; `prefers-reduced-motion` disables sweeps, count-ups, and transforms.\n* **Accessibility (a11y):** semantic HTML5 (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`article`\u002F`footer`), a single `h1`, logical DOM\u002Ffocus order, full keyboard operability (no mouse-only interactions), ARIA roles\u002Flabels on custom widgets, `aria-live` regions for form errors and loading states, WCAG AA contrast (≥4.5:1) in both Day and Night editions, and never color-only state communication.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive actions:** `.btn-danger` deep red, visually distinct in both themes.\n* **Copy:** all user-facing copy in English, written in an authoritative editorial voice — real copy, never lorem ipsum (placeholders only for genuinely unspecified content such as image URLs, which may use `https:\u002F\u002Fpicsum.photos` with the mandatory grayscale\u002Fsepia filter treatment).\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks and no inline CSS — the HTML references only a single deferred entry point (`\u003Cscript src=\"script.js\" defer>`).\n* **Naming:** one consistent BEM convention throughout (`.hero__title`, `.card--featured`, `.pricing__tier`). **Exception:** the three source-mandated classes `.report-column`, `.infographic-element`, `.text-highlight-subtle` are retained verbatim as spec-required utilities.\n* **Assets:** Google Fonts (Merriweather, Source Sans 3) and Material Symbols loaded via `\u003Clink>` in `\u003Chead>`.\n* **Output:** generate the complete final code for all three files in a single response, on the first attempt.\n",1791954983193]