[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-272-Modernismo-Jornalistico-Brasileiro":3},"# CODING AGENT PROMPT — Complete Landing Page: \"Modernismo Jornalístico Brasileiro\" (Brazilian Journalistic Modernism)\n\n**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.\"\n\n**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**.\n\n**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.\n\n**Theme interpretation (source spec translated to English):**\n- **Keywords:** news, culture, events, Brazilian, modernism, structured, dynamic, informative, artistic, engaging.\n- **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.\n- **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.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling must live in a dedicated `style.css`. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n- Every design property, layout rule, and state must be targeted via class or ID selectors.\n- HTML must remain clean, semantic, and style-agnostic: re-theming the page must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root` (light theme) and override them in the dark theme (see 1.3). Required tokens:\n\n*Light theme (`:root`):*\n\n| Token | Value | Role |\n|---|---|---|\n| `--primary` | `#A52A2A` | Earth Red — CTAs, tile shadows, accents |\n| `--secondary` | `#87CEEB` | Sky Blue — secondary surfaces, focus rings |\n| `--accent-gold` | `#FFD700` | Gold Yellow — badges\u002Fhighlights (surface only, paired with black text) |\n| `--accent-green` | `#228B22` | Forest Green — success |\n| `--accent-orange` | `#CC5500` | Burnt Orange — error\u002Fdanger |\n| `--bg-primary` | `#FEFEFE` | Page background (near-white; **never** `#FFFFFF`) |\n| `--bg-secondary` | `#F5F1E8` | Warm paper tint — alternating sections, tile insets |\n| `--text-primary` | `#000000` | Body text |\n| `--text-secondary` | `#333333` | Muted text, meta |\n| `--text-on-primary` | `#FFFFFF` | White text on red\u002Fdark saturated surfaces |\n| `--text-success` | `#228B22` | Success text |\n| `--text-error` | `#CC5500` | Error text |\n| `--border-default` | `#E0E0E0` | Tile borders (per source spec) |\n| `--border-error` \u002F `--border-success` | `#CC5500` \u002F `#228B22` | State borders |\n\n*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`.\n\n*Shared tokens (both themes):*\n- `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px` (sharp, tile-like corners).\n- `--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).\n- Spacing scale: `--spacing-xs: 0.25rem`, `--spacing-sm: 0.5rem`, `--spacing-md: 1rem`, `--spacing-gap: 1.5rem`, `--spacing-lg: 2rem`, `--spacing-xl: 3rem`.\n- `--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`.\n- `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n- `--font-base: 'Roboto', sans-serif`; `--font-serif: 'Playfair Display', serif`.\n\n*Hard rules:*\n- **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`\u002F`#C0392B` surfaces ↔ `#FFFFFF`; `#87CEEB` and `#FFD700` surfaces ↔ `#000000`).\n- **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\u002Ficon color on saturated or dark surfaces (`--text-on-primary`).\n\n**1.3 Mandatory Dark Mode Support (Full light\u002Fdark required per source spec)**\n- 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 `\u003Cmeta name=\"color-scheme\" content=\"light dark\">`.\n- Background and text variables must switch seamlessly with **zero HTML restructuring**.\n- **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.\n- Provide a **visible toggle** in the header: a button with a Google Material icon (`dark_mode` \u002F `light_mode`), correct `aria-pressed` state, and dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- 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.\n- Mobile-first: multi-column rows collapse to single columns below ~768px; **no horizontal scrolling** at any viewport down to 320px.\n- **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\u002Fpricing\u002Ftestimonial card rows, footer columns, tile mosaics). Flexbox remains mandatory inside every component, card, button, and toolbar.\n\n**1.5 Styling Approach**\n- No CSS framework required: write clean, hand-authored CSS in `style.css`, optionally organized with `@layer` (reset → tokens → base → components → utilities).\n- All reusable patterns must be generic, variable-driven classes (`.btn`, `.card`, `.tile-block`, `.cultural-event-card`, `.input-group`) — no one-off selectors.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load via `\u003Clink>` with `preconnect`: **Roboto** (400\u002F500\u002F700) bound to `--font-base`, and **Playfair Display** (600\u002F700\u002F800 + italic) bound to `--font-serif`.\n- 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\u002Fserif pairing is a core theme requirement.\n- 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**.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button (`.btn`, variants `.btn--primary`, `.btn--secondary`, `.btn--outline`, `.btn--danger`)**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; Roboto 500, slightly letter-spaced label.\n- 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.\n- **Hover:** tile shadow grows (`--shadow-tile` → `--shadow-tile-hover`) with `translate(-1px, -1px)`; `cursor: pointer`.\n- **Focus-visible:** distinct ring via `outline` using `--secondary` (Sky Blue), 2–3px offset.\n- **Active\u002Fpressed:** `transform: scale(0.97)`.\n- **Loading (`is-loading`):** `aria-busy=\"true\"`, interaction blocked (no double submits), CSS spinner or rotating Material `progress` icon, button dimensions unchanged.\n- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, `aria-disabled`.\n- **Success\u002FError:** temporary feedback classes tinted with `--text-success` \u002F `--text-error` plus an icon, announced via `aria-live`.\n\n**2.2 Card \u002F Tile Block (`.tile-block`, `.cultural-event-card`)**\n- 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.\n- **Hover (interactive cards):** border highlight switches to Earth Red, shadow grows to `--shadow-tile-hover`, `transform: translateY(-2px)`, `transition: var(--transition-normal)`.\n- **Focus-within:** identical border highlight when any child link\u002Fbutton receives focus.\n- **Loading skeleton:** `.tile-block--skeleton` with a shimmer keyframe animation matching final dimensions (no layout shift).\n- **Empty state:** centered Google Icon + short guidance text pattern defined for dynamic content areas.\n\n**2.3 Form & Input (`.input-group`)**\n- Structure: flex wrapper containing `\u003Clabel>`, the `\u003Cinput>`\u002F`\u003Ctextarea>`, and a dedicated error `\u003Cp>` container.\n- 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.\n- Errors are announced via `aria-live=\"polite\"`; state is never communicated by color alone (always icon + text).\n\n**2.4 Modal (`.modal`)**\n- Used for the FAQ \"Contact the Editorial Team\" action.\n- States: opening, open, loading, success\u002Ferror, closing — all animated with `var(--transition-normal)` (fade + scale).\n- Centered flex overlay (`align-items: center; justify-content: center`), dimmed backdrop, stacked at `--z-modal`; dialog surface styled like a `.tile-block`.\n- Close via: Material `close` icon button (`aria-label=\"Close dialog\"`), `Esc` key, and backdrop click.\n- `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.\n\n**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.)\n\n- **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`).\n- **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\u002Ffocus, disabled under `prefers-reduced-motion`.\n- **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.\"\n- **d) How It Works (3 steps):** 3-column grid (vertical on mobile): numbered tile badges (01\u002F02\u002F03, Earth Red bg + white numeral), serif step titles, sans descriptions, connecting borders between steps on desktop.\n- **e) Testimonials:** 3 `.tile-block` quote cards: serif italic quote, gold accent (top border or quote mark), seeded picsum avatar (56px, rounded), name + role\u002Fcity (e.g., \"Marina Duarte — Reader, São Paulo\"), optional Material `star` rating with accessible text alternative.\n- **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\u002FAnnual segmented toggle**: two buttons with `aria-pressed`, prices update with a visible transition, and the change is announced via `aria-live=\"polite\"`.\n- **g) FAQ:** accessible accordion with 6 English Q&As about the portal. Each item: `\u003Cbutton 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).\n- **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.\n- **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\u002Fbackground contrast pairing in both themes.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, breakpoints around 480\u002F768\u002F1024px, zero horizontal overflow, images with `aspect-ratio`, `loading=\"lazy\"`, and meaningful English `alt` text.\n- **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.\n- **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.\n- **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.\n- **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.\n- **Destructive actions:** any destructive action must use `.btn--danger` (Burnt Orange), visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** three separate files — `index.html`, `style.css`, `script.js`. The HTML references exactly one deferred entry point (`\u003Cscript src=\"script.js\" defer>`); no inline `\u003Cscript>` blocks, no inline styles, no inline event handlers (`onclick`, etc. are forbidden).\n- **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.\n- **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\u002Flegal\u002Fsocial links whose targets do not exist.\n- **Images:** use `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F\u003Cwidth>\u002F\u003Cheight>` with themed seeds; every image has descriptive English `alt` text.\n- **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\u002Fclose + focus trap; form validation with simulated async submit (loading → success\u002Ferror); ticker setup.\n- **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.\n",1791954984158]