Brazilian Journalistic Modernism demo
Brazilian Journalistic Modernism

A structured, dynamic editorial style inspired by Brazilian modernism and azulejo tilework, featuring bold typography, rhythmic grids, and vibrant cultural color palettes.
Category: Cultural & Heritage
Era: 1950s Mid-Century Modern
Prompt: 17.1 KB · 2324 words
# CODING AGENT PROMPT — Complete Landing Page: "Modernismo Jornalístico Brasileiro" (Brazilian Journalistic Modernism)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt — deliver the full, final, production-quality code in a single pass. No clarifying questions, no partial scaffolding, no "rest of the code follows."

**Product:** A landing page for a Brazilian cultural news portal in the style **"Modernismo Jornalístico Brasileiro" (Brazilian Journalistic Modernism)** — structured, dynamic, informative, cultural; era **"2026+ — Culture in Motion"**; output category: **Cultural & Heritage**.

**Sections (in this exact order):** Sticky Header + Navigation, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

**Theme interpretation (source spec translated to English):**
- **Keywords:** news, culture, events, Brazilian, modernism, structured, dynamic, informative, artistic, engaging.
- **Visual direction:** grid layouts with content blocks resembling azulejo (tile) panels; contrasting sans-serif and serif typography for hierarchy; featured cultural event images; hover micro-interactions with border highlight and shadow; content "reveal" section transitions; earthy red and sky blue accents; an informative, engaging editorial feel.
- **Signature aesthetic:** flat "tile" blocks with `1px solid #E0E0E0` borders and a hard offset shadow `2px 2px 0px` in Earth Red (`#A52A2A`), sharp corners, generous editorial whitespace — modernist print design translated to the web.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling must live in a dedicated `style.css`. The `style="..."` attribute is **forbidden** anywhere in the HTML.
- Every design property, layout rule, and state must be targeted via class or ID selectors.
- HTML must remain clean, semantic, and style-agnostic: re-theming the page must require editing only `style.css`, never the markup.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root` (light theme) and override them in the dark theme (see 1.3). Required tokens:

*Light theme (`:root`):*

| Token | Value | Role |
|---|---|---|
| `--primary` | `#A52A2A` | Earth Red — CTAs, tile shadows, accents |
| `--secondary` | `#87CEEB` | Sky Blue — secondary surfaces, focus rings |
| `--accent-gold` | `#FFD700` | Gold Yellow — badges/highlights (surface only, paired with black text) |
| `--accent-green` | `#228B22` | Forest Green — success |
| `--accent-orange` | `#CC5500` | Burnt Orange — error/danger |
| `--bg-primary` | `#FEFEFE` | Page background (near-white; **never** `#FFFFFF`) |
| `--bg-secondary` | `#F5F1E8` | Warm paper tint — alternating sections, tile insets |
| `--text-primary` | `#000000` | Body text |
| `--text-secondary` | `#333333` | Muted text, meta |
| `--text-on-primary` | `#FFFFFF` | White text on red/dark saturated surfaces |
| `--text-success` | `#228B22` | Success text |
| `--text-error` | `#CC5500` | Error text |
| `--border-default` | `#E0E0E0` | Tile borders (per source spec) |
| `--border-error` / `--border-success` | `#CC5500` / `#228B22` | State borders |

*Dark theme (see 1.3):* `--primary: #C0392B` (brightened Earth Red for contrast); `--secondary: #87CEEB`; `--accent-green: #4CAF50`; `--accent-orange: #E87722`; `--bg-primary: #141414`; `--bg-secondary: #1F1F1F`; `--text-primary: #F5F5F0`; `--text-secondary: #B3B3B3`; `--text-on-primary: #FFFFFF`; `--text-success: #4CAF50`; `--text-error: #E87722`; `--border-default: #3A3A3A`; `--border-error: #E87722`; `--border-success: #4CAF50`.

*Shared tokens (both themes):*
- `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px` (sharp, tile-like corners).
- `--shadow-tile: 2px 2px 0 0 var(--primary)` (the signature hard shadow — adapts per theme); `--shadow-tile-hover: 4px 4px 0 0 var(--primary)`; `--shadow-sm`, `--shadow-md` (soft, theme-appropriate rgba).
- Spacing scale: `--spacing-xs: 0.25rem`, `--spacing-sm: 0.5rem`, `--spacing-md: 1rem`, `--spacing-gap: 1.5rem`, `--spacing-lg: 2rem`, `--spacing-xl: 3rem`.
- `--transition-fast: 0.2s ease-in-out`, `--transition-normal: 0.4s ease-in-out` (source spec: `all 0.4s ease-in-out`), `--ease-standard: ease-in-out`.
- `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.
- `--font-base: 'Roboto', sans-serif`; `--font-serif: 'Playfair Display', serif`.

*Hard rules:*
- **Contrast pairing:** every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in **both** themes (`#FEFEFE` ↔ `#000000`; `#141414` ↔ `#F5F5F0`; `#A52A2A`/`#C0392B` surfaces ↔ `#FFFFFF`; `#87CEEB` and `#FFD700` surfaces ↔ `#000000`).
- **Exception clause (pure white):** the source palette lists Branco `#FFFFFF`; per architecture rules it must **never** be used as a page or section background — use `#FEFEFE`. `#FFFFFF` is permitted only as text/icon color on saturated or dark surfaces (`--text-on-primary`).

**1.3 Mandatory Dark Mode Support (Full light/dark required per source spec)**
- Define dark tokens under a `.dark` class selector **and** under `@media (prefers-color-scheme: dark)` (for first visits with no stored choice); the explicit class must always win over the media query. Include `<meta name="color-scheme" content="light dark">`.
- Background and text variables must switch seamlessly with **zero HTML restructuring**.
- **Persistence:** store the user's choice in `localStorage` (e.g., key `theme`); fall back to `prefers-color-scheme` on first visit. `script.js` must apply the stored theme as its first action to minimize flash.
- Provide a **visible toggle** in the header: a button with a Google Material icon (`dark_mode` / `light_mode`), correct `aria-pressed` state, and dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme").

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all component-internal layout with **Flexbox**; every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- Mobile-first: multi-column rows collapse to single columns below ~768px; **no horizontal scrolling** at any viewport down to 320px.
- **Explicit exception clause (grid):** the source spec demands grid layouts resembling azulejo tile panels; CSS Grid is therefore permitted for **macro section layouts only** (feature/pricing/testimonial card rows, footer columns, tile mosaics). Flexbox remains mandatory inside every component, card, button, and toolbar.

**1.5 Styling Approach**
- No CSS framework required: write clean, hand-authored CSS in `style.css`, optionally organized with `@layer` (reset → tokens → base → components → utilities).
- All reusable patterns must be generic, variable-driven classes (`.btn`, `.card`, `.tile-block`, `.cultural-event-card`, `.input-group`) — no one-off selectors.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load via `<link>` with `preconnect`: **Roboto** (400/500/700) bound to `--font-base`, and **Playfair Display** (600/700/800 + italic) bound to `--font-serif`.
- Hierarchy: Playfair Display (serif) for the wordmark, headlines, section titles, card titles, and quotes; Roboto (sans) for body, UI labels, buttons, and meta — the contrasting sans/serif pairing is a core theme requirement.
- Icons: **Google Material Symbols (Outlined)** via the official Google Fonts stylesheet. Raw inline SVGs, local icon files, emoji icons, and non-Google icon fonts are **forbidden**.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button (`.btn`, variants `.btn--primary`, `.btn--secondary`, `.btn--outline`, `.btn--danger`)**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; Roboto 500, slightly letter-spaced label.
- Variants: `.btn--primary` = Earth Red bg + white text; `.btn--secondary` = Sky Blue bg + black text; `.btn--outline` = transparent bg + 1px primary border + primary text; `.btn--danger` = Burnt Orange — visually distinct in **both** themes.
- **Hover:** tile shadow grows (`--shadow-tile` → `--shadow-tile-hover`) with `translate(-1px, -1px)`; `cursor: pointer`.
- **Focus-visible:** distinct ring via `outline` using `--secondary` (Sky Blue), 2–3px offset.
- **Active/pressed:** `transform: scale(0.97)`.
- **Loading (`is-loading`):** `aria-busy="true"`, interaction blocked (no double submits), CSS spinner or rotating Material `progress` icon, button dimensions unchanged.
- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, `aria-disabled`.
- **Success/Error:** temporary feedback classes tinted with `--text-success` / `--text-error` plus an icon, announced via `aria-live`.

**2.2 Card / Tile Block (`.tile-block`, `.cultural-event-card`)**
- Default: `1px solid var(--border-default)` border, `background: var(--bg-primary)` (or `--bg-secondary` for inset tiles), signature `box-shadow: var(--shadow-tile)`, `border-radius: var(--radius-sm)`, flex column layout, spacing via tokens.
- **Hover (interactive cards):** border highlight switches to Earth Red, shadow grows to `--shadow-tile-hover`, `transform: translateY(-2px)`, `transition: var(--transition-normal)`.
- **Focus-within:** identical border highlight when any child link/button receives focus.
- **Loading skeleton:** `.tile-block--skeleton` with a shimmer keyframe animation matching final dimensions (no layout shift).
- **Empty state:** centered Google Icon + short guidance text pattern defined for dynamic content areas.

**2.3 Form & Input (`.input-group`)**
- Structure: flex wrapper containing `<label>`, the `<input>`/`<textarea>`, and a dedicated error `<p>` container.
- States: empty, focused (Sky Blue ring), filled, valid (Forest Green border + check icon), invalid (Burnt Orange border + error icon + error text, `aria-invalid="true"`), disabled, read-only.
- Errors are announced via `aria-live="polite"`; state is never communicated by color alone (always icon + text).

**2.4 Modal (`.modal`)**
- Used for the FAQ "Contact the Editorial Team" action.
- States: opening, open, loading, success/error, closing — all animated with `var(--transition-normal)` (fade + scale).
- Centered flex overlay (`align-items: center; justify-content: center`), dimmed backdrop, stacked at `--z-modal`; dialog surface styled like a `.tile-block`.
- Close via: Material `close` icon button (`aria-label="Close dialog"`), `Esc` key, and backdrop click.
- `role="dialog"`, `aria-modal="true"`, `aria-labelledby`; keyboard focus trapped while open; focus returns to the trigger on close; background content hidden from assistive tech; body scroll locked.

**2.5 Landing Page Section Blueprint** (all user-facing copy in **English**, editorial and engaging, grounded in Brazilian culture and modernism — cultural events, arts coverage, heritage. No lorem ipsum.)

- **a) Header (sticky):** flex bar — serif wordmark ("Culture in Motion"), nav links (Features, How It Works, Testimonials, Pricing, FAQ) with smooth scrolling, a "Subscribe" `.btn--primary`, the theme toggle (1.3), and a hamburger below 768px implemented as an accessible disclosure (`aria-expanded`, `aria-controls`, animated panel at `--z-dropdown`).
- **b) Hero:** two-column flex (stacks on mobile). Left: eyebrow label ("Brazilian Culture · 2026+"), serif H1, sans subhead, two CTAs (`.btn--primary` "Explore the Portal", `.btn--outline` "See How It Works"). Right: a featured `.cultural-event-card` — seeded picsum image, gold date badge (black text), serif event title, excerpt, "Read more" link. Below: a **news ticker strip** — CSS marquee of 6–8 English headlines, duplicated content marked `aria-hidden="true"`, pauses on hover/focus, disabled under `prefers-reduced-motion`.
- **c) Features (3 cards):** responsive 3-column grid of `.tile-block` cards, each with a Material icon in a Sky Blue tile chip, serif title, sans body, and an arrow-icon CTA link. Topics: "Cultural Agenda," "Modernist Archive," "Artist Voices."
- **d) How It Works (3 steps):** 3-column grid (vertical on mobile): numbered tile badges (01/02/03, Earth Red bg + white numeral), serif step titles, sans descriptions, connecting borders between steps on desktop.
- **e) Testimonials:** 3 `.tile-block` quote cards: serif italic quote, gold accent (top border or quote mark), seeded picsum avatar (56px, rounded), name + role/city (e.g., "Marina Duarte — Reader, São Paulo"), optional Material `star` rating with accessible text alternative.
- **f) Pricing (3 tiers):** 3 `.tile-block` cards — "Reader" (Free), "Contributor" (monthly), "Institution" (custom). Middle tier featured: gold "Most Popular" badge (black text) and elevated shadow. Each card: serif tier name, price row, feature list with Material `check` icons, CTA (featured tier gets `.btn--primary`; others `.btn--outline`). Include a **Monthly/Annual segmented toggle**: two buttons with `aria-pressed`, prices update with a visible transition, and the change is announced via `aria-live="polite"`.
- **g) FAQ:** accessible accordion with 6 English Q&As about the portal. Each item: `<button aria-expanded aria-controls>` + rotating Material `chevron` icon; panel animated via the `grid-template-rows: 0fr → 1fr` technique with `transition: var(--transition-normal)`; fully keyboard operable. Below: "Still have questions?" + `.btn--outline` "Contact the Editorial Team" opening the 2.4 modal (name, email, message → loading → success state).
- **h) Final CTA:** full-width band, Earth Red background + white text (dark mode uses the brightened primary — contrast pairing enforced), serif headline, sans subline, and a newsletter `.input-group` (email) + `.btn--secondary` "Subscribe." Inline validation: invalid email → Burnt Orange error styling + icon + `aria-live` message; success → Forest Green check icon + confirmation text + button success state.
- **i) Footer:** 4-column grid — brand (wordmark, one-line tagline, social links as Material icons with `aria-label`), "Sections" (anchor links), "About" (Editorial Team, Our Mission, Contact, Careers), "Legal" (Privacy Policy, Terms of Use, Cookie Policy). Bottom bar: "© 2026 Culture in Motion. All rights reserved." + back-to-top link. Maintain text/background contrast pairing in both themes.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` typography, breakpoints around 480/768/1024px, zero horizontal overflow, images with `aspect-ratio`, `loading="lazy"`, and meaningful English `alt` text.
- **Smooth animations:** micro-interactions use `--transition-fast`; section-level transitions use `--transition-normal` (0.4s ease-in-out per source spec). All motion is neutralized under `prefers-reduced-motion: reduce`, with content fully visible.
- **Content reveal transitions:** every section uses the class `.content-reveal-transition` — hidden state (opacity 0, `translateY(24px)`) applied **only** when JS is available (e.g., scoped under an `html.js` class added by `script.js`); an IntersectionObserver adds `.is-revealed` to trigger the 0.4s ease-in-out reveal, with 80–120ms staggered delays between siblings. If JS fails or reduced motion is on, all content must be immediately and fully visible — never trap content invisibly.
- **Accessibility (a11y):** skip-to-content link; semantic landmarks (`header`, `nav[aria-label]`, `main`, `section[aria-labelledby]`, `footer`); a single H1 with logical heading order; visible focus on every interactive element; full keyboard operability (menu, accordion, theme toggle, pricing switch, modal); text contrast ≥ 4.5:1 in **both** light and dark modes; state never communicated by color alone; `aria-live` regions for form feedback, pricing changes, and modal status.
- **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.
- **Destructive actions:** any destructive action must use `.btn--danger` (Burnt Orange), visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** three separate files — `index.html`, `style.css`, `script.js`. The HTML references exactly one deferred entry point (`<script src="script.js" defer>`); no inline `<script>` blocks, no inline styles, no inline event handlers (`onclick`, etc. are forbidden).
- **Naming convention:** BEM exclusively (`block__element--modifier`). The source spec's class names are canonical blocks: `.tile-block`, `.cultural-event-card`, `.content-reveal-transition`. Never mix conventions.
- **Copy:** all user-facing copy in **English** — editorial, informative, and engaging, themed around Brazilian culture and modernism. No lorem ipsum; no unimplemented placeholders. Placeholder `href="#"` is allowed only for footer/legal/social links whose targets do not exist.
- **Images:** use `https://picsum.photos/seed/<seed>/<width>/<height>` with themed seeds; every image has descriptive English `alt` text.
- **JavaScript scope (vanilla ES6+, no libraries, no build tools):** theme toggle + `localStorage` persistence; mobile menu; reveal-on-scroll IntersectionObserver; FAQ accordion; pricing toggle; modal open/close + focus trap; form validation with simulated async submit (loading → success/error); ticker setup.
- **First-attempt completeness:** deliver the entire finished page in one response — all nine sections fully styled in both light and dark themes, every component state implemented, nothing truncated.