Sober Investigative Editorial demo
Sober Investigative Editorial

A serious, information-first editorial style with classic serif typography, restrained monochrome palettes, and structured newspaper-like grids suited to investigative journalism.
Category: Luxury & Editorial
Era: 2020s Modern
Prompt: 14.3 KB · 1914 words
# BUILD SPECIFICATION — LANDING PAGE: "SOBER INVESTIGATIVE EDITORIAL" (Editorial Investigativo Sóbrio)

**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.

**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."

**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.

**Required Sections (in this exact order):** Header/Masthead with navigation + theme toggle → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. The `style="..."` attribute is forbidden anywhere in the HTML.
* Target all design properties, layout rules, and states exclusively via class or ID selectors.
* Keep HTML semantic and styling-agnostic: changing the site's look must require editing only `style.css`, never the markup.

**1.2 CSS Variables & Theme Tokens**
Store every visual token in `:root` (light theme) and override under `.dark` / `@media (prefers-color-scheme: dark)`:
* **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/large use only, never small body text); `--olive: #6B8E23` (success icons/borders; 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`.
* Reserve pure black `#000000` for the hero display headline and masthead wordmark only.
* **Exception clause:** the source specification listed `#FFFFFF` as the background; per mandatory architecture pure white is forbidden — map every white usage to `#FEFEFE`.
* **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.
* **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)`.
* **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`.
* **Stacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` — layered components must never conflict.

**1.3 Mandatory Dark Mode — "Night Edition"**
* 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.
* Theme switching must require zero HTML restructuring — variable overrides only.
* Provide a visible header toggle (Material Symbol `dark_mode`/`light_mode`) with correct `aria-pressed` and `aria-label` ("Switch to Night Edition" / "Switch to Day Edition"); persist the choice via `localStorage`, falling back to `prefers-color-scheme` on first visit.
* **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.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified.
* Mobile-first: all rows convert to columns below 768px; newspaper columns collapse to one; no horizontal scrolling at any width from 320px up.

**1.5 Framework Default & CSS Organization**
* Use clean custom CSS organized with Tailwind-style `@layer` / `@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`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load via `<link>` in `<head>`: **Merriweather** (400/700/900 + italic) for all headings, and **Source Sans 3** (400/600/700) for body and UI. Bind `--font-heading: 'Merriweather', Georgia, serif` and `--font-base: 'Source Sans 3', 'Helvetica Neue', sans-serif`.
* Body copy: `line-height: 1.8` (per source spec). Headlines: Merriweather with tight leading (1.1–1.2).
* All icons are Google Material Symbols (Outlined). Raw inline SVGs and local icon files are forbidden.

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button (`.btn`)**
* Base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; Source Sans 3 at 600 weight.
* **States (all via CSS classes):** **Hover** — brightness/shadow 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/Error** — temporary feedback driven by `--text-success` / `--text-error`.
* **Variants:** `.btn-primary` (dark grey fill, light text; inverts in Night Edition); `.btn-secondary` (outlined, transparent); `.btn-accent` / `.btn-danger` (deep red `#8B0000` fill — reserved for the Final CTA and destructive actions; visually distinct in both themes); `.btn-ghost`.

**2.2 Card (`.card`)**
* **Default:** flexbox column on `--bg-secondary`, 1px `--border-default`, `--radius-md`, `--shadow-sm`.
* **Hover:** `transform: translateY(-2px)` + `--shadow-md` via `var(--transition-normal)`. **Focus-within:** border highlights in `--secondary` when a child link/button gains focus. **Loading:** `.card--skeleton` shimmer keyframes defined in CSS (no layout jump). **Empty state:** centered Material Symbol + clear guidance text.

**2.3 Form & Input (`.input-group`)**
* Structure: flex container wrapping `<label>`, the field, and a dedicated error-feedback element with `aria-live="polite"`.
* **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.

**2.4 Modal / Dialog (governs any overlay used)**
* **States:** opening, open, loading, success/error, closing — all animated via CSS transitions.
* 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.

## 3. PAGE SECTION BLUEPRINT — EDITORIAL VISUAL LANGUAGE

**3.1 Global Editorial Language**
* 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`.
* Kickers: small-caps, letter-spaced sans labels in deep red above every section title; section titles in Merriweather.
* Image treatment: all photos rendered black-and-white/sepia via CSS (`filter: grayscale(1) sepia(.15) contrast(1.05)`) — never rely on pre-processed assets; hover eases the filter slightly.
* `.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.
* `.infographic-element`: data graphics built purely with HTML+CSS (flex stat bars, hairline rules, counters) using navy/ochre/olive on `--bg-muted` tracks; each carries a visible caption or `aria-label` text alternative.
* `.text-highlight-subtle`: important phrases receive a subtle highlighter micro-interaction — a low-opacity `--ochre` background sweep or animated underline on hover/focus — always paired with `font-weight: 700` so emphasis is never color-only.

**3.2 Header / Masthead**
* 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.

**3.3 Hero**
* 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.
* CTAs: `.btn-primary` "Read the Latest Investigation" + a text link with deep-red underline "Our Methodology".
* A `.report-column` lead excerpt with a drop cap, plus a sepia-toned hero image.
* 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.

**3.4 Features — 3 Cards**
* 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.

**3.5 How It Works — 3 Steps**
* Steps 01 / 02 / 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.

**3.6 Testimonials**
* 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.

**3.7 Pricing — 3 Tiers**
* 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.

**3.8 FAQ**
* 5–6 items as an accessible accordion: native `<details>/<summary>` 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.

**3.9 Final CTA**
* 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.

**3.10 Footer**
* `--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).

## 4. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` typography and breakpoints without horizontal overflow.
* **Smooth animations:** `var(--transition-normal)` on all state changes; `prefers-reduced-motion` disables sweeps, count-ups, and transforms.
* **Accessibility (a11y):** semantic HTML5 (`header`/`nav`/`main`/`section`/`article`/`footer`), a single `h1`, logical DOM/focus order, full keyboard operability (no mouse-only interactions), ARIA roles/labels 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.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive actions:** `.btn-danger` deep red, visually distinct in both themes.
* **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://picsum.photos` with the mandatory grayscale/sepia filter treatment).

## 5. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks and no inline CSS — the HTML references only a single deferred entry point (`<script src="script.js" defer>`).
* **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.
* **Assets:** Google Fonts (Merriweather, Source Sans 3) and Material Symbols loaded via `<link>` in `<head>`.
* **Output:** generate the complete final code for all three files in a single response, on the first attempt.