[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-311-Simbolos-Politicos-Brasileiros":3},"# SYSTEM PROMPT — CODING AI BUILD TASK\n\n**Project:** Complete Landing Page — \"Brazilian Political Symbols\" (Cultural & Heritage \u002F Independent Political News & Analysis Platform)\n**Directive:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce the complete, production-quality landing page in a single attempt — no clarifying questions, no partial output.\n\n---\n\n## 0. PROJECT BRIEF & PAGE ARCHITECTURE\n\n**0.1 Product, Tone & Era**\nBuild the marketing landing page for an independent Brazilian political news and analysis platform focused on decoding Brazilian political symbols, institutions, and electoral data. Tone keywords: *political news, Brazilian analysis, authoritative, informative, structured, critical, modern, clear, impactful, unbiased*. Era: 2026+ digital political debate. The result must feel like a serious editorial\u002Fdata-journalism outlet — never partisan, never tabloid. **Do not reference, promote, or visually favor any Brazilian party or candidate.** All symbolism must remain institutional and civic (national colors, chamber\u002Fcongress motifs, abstract data forms).\n\n**0.2 Page Architecture (build in this exact order)**\n- **0.2.1 Site Masthead (page chrome, sticky):** text wordmark in the serif heading font (invent a short, authoritative platform name, e.g., \"Símbolo — The Brazilian Political Review\"); anchor navigation (Features, How It Works, Testimonials, Pricing, FAQ); visible theme toggle; hamburger button below 768px. Masthead background `var(--bg-primary)` with `border-bottom: 2px solid var(--accent-alert)`. Include a skip-to-content link as the first focusable element.\n- **0.2.2 Hero:** light background, navy serif headline, uppercase kicker with a short 2px alert-red underline accent, critical\u002Funbiased positioning subcopy, two CTAs (primary \"Explore the Analysis\", outline \"Our Methodology\"), a CSS-only `.political-graphic` (see 2.6), and a strip of three `.statistic-highlight` items (e.g., \"35+ institutions monitored\", \"5,000+ documents analyzed\", \"100% independent funding\").\n- **0.2.3 Features — 3 cards:** (1) Symbol Lexicon — flags, coats of arms, party emblems, institutional iconography explained with historical context; (2) Electoral Data Hub — data visualizations of polls, voting records, turnout (this card must contain a `.data-visualization` mini bar chart); (3) Critical Analysis — methodology-driven, non-partisan editorial breakdowns. Each card: Material Symbol icon, serif title, real copy, text link.\n- **0.2.4 How It Works — 3 steps:** numbered 01\u002F02\u002F03 (Roboto Mono, alert-red numerals) connected by a CSS timeline line — horizontal on desktop, vertical on mobile. Suggested flow: choose institutions\u002Fsymbols to follow → explore analysis grounded in sourced data → receive the weekly critical briefing.\n- **0.2.5 Testimonials:** responsive grid of 3 quote cards — serif pull-quote, oversized gold quotation mark, CSS initials-circle avatar (no raster images), plausible Brazilian names and roles (political scientist, investigative journalist, civics educator). Hover triggers a quote-highlight micro-interaction.\n- **0.2.6 Pricing — 3 tiers:** \"Citizen\" (Free), \"Analyst\" (R$ 39\u002Fmonth, featured with gold border + \"Most Popular\" badge), \"Institution\" (R$ 129\u002Fmonth). Check-icon feature lists, per-tier CTA buttons, plus a one-line independence\u002Ffunding note.\n- **0.2.7 FAQ:** 5–6 accordion items covering independence and funding, methodology, data sources, bias policy, and cancellation.\n- **0.2.8 Final CTA:** full-width navy band (`var(--primary)` background, `var(--on-primary)` text), serif headline, email-capture form with full state behavior (see 2.3), microcopy (\"No spam. Unsubscribe anytime.\").\n- **0.2.9 Footer:** dark navy background, light text; brand + one-line mission; three groups of secondary links (Platform, Company, Legal); social icon links using generic Material Symbols with descriptive `aria-label`s; bottom bar (`var(--ink)`) with copyright and an independence tagline.\n\n**0.3 Visual Language**\nAbstract geometric graphics representing political data; technical sans-serif body + authoritative serif headings + monospace numerals; infographic\u002Fdata-visualization elements; hover micro-interactions that highlight statistics and quotes; direct, distraction-free section transitions (no parallax, no scroll hijacking, no autoplay carousels, no looping decorative animation).\n\n**0.4 Copy Rules**\n- **All user-facing copy must be written in English.** Brand names may remain proper nouns with Latin diacritics.\n- Write real, specific, plausible copy — no lorem ipsum, no filler. Author realistic statistics, testimonial attributions, BRL prices, and FAQ answers yourself.\n- Unbiased, non-partisan phrasing throughout.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives exclusively in `style.css`. **Forbidden:** `style=\"...\"` attributes, `\u003Cstyle>` blocks in HTML, and presentation attributes (e.g., `bgcolor`, `align`).\n- Target everything via class\u002FID selectors. HTML must remain semantic and presentation-free: re-theming the page must require editing CSS only, never markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (light) and re-declare under dark mode (1.3). **Required token set:**\n\n| Token | Light (`:root`) | Dark | Role |\n|---|---|---|---|\n| `--primary` | `#001F3F` | `#0E3A66` | Brand navy: primary buttons, CTA band |\n| `--secondary` | `#36454F` | `#9FB3C8` | Charcoal: secondary UI |\n| `--bg-primary` | `#FEFEFE` | `#001225` | Page background |\n| `--bg-secondary` | `#F1F4F8` | `#0A2A4A` | Cards, alternating section bands |\n| `--text-primary` | `#001F3F` | `#F2F6FA` | Headings, body |\n| `--text-secondary` | `#36454F` | `#A9BDD1` | Supporting text |\n| `--text-success` | `#1B7A3A` | `#2ECC40` | Success text (AA-adjusted emerald in light mode) |\n| `--text-error` | `#CC0000` | `#FF6B6B` | Error text |\n| `--border-default` | `#D8DFE7` | `#24466B` | Card\u002Fdivider borders |\n| `--border-error` | `#CC0000` | `#FF6B6B` | Invalid borders |\n| `--border-success` | `#2ECC40` | `#2ECC40` | Valid borders |\n| `--accent-alert` | `#CC0000` | `#CC0000` | Alert red: masthead rule, critical accents, graphics |\n| `--accent-gold` | `#FFD700` | `#FFD700` | Gold: badges, hover underlines — **never text on light backgrounds** |\n| `--accent-orange` | `#FF8C00` | `#FF8C00` | Data-viz series — graphics only on light backgrounds |\n| `--accent-green` | `#2ECC40` | `#2ECC40` | Data-viz series, success graphics |\n| `--ink` | `#000000` | `#000000` | Footer bottom bar |\n| `--on-primary` | `#FEFEFE` | `#F2F6FA` | Text on `--primary` surfaces |\n| `--focus-ring` | `#CC0000` | `#FFD700` | Focus outline color |\n\nStructural tokens (theme-invariant): `--radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;` · `--shadow-sm` \u002F `--shadow-md` (light: `rgba(0,31,63,.12)` \u002F `rgba(0,31,63,.16)`; dark: `rgba(0,0,0,.55)` \u002F `rgba(0,0,0,.6)`) · `--spacing-gap: 1.5rem; --spacing-section: clamp(4rem, 8vw, 6.5rem);` · `--transition-fast: 0.15s; --transition-normal: 0.4s; --ease-standard: ease-in-out;` · `--z-header: 900; --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;` · `--container-max: 1200px; --container-pad: clamp(1rem, 4vw, 2rem);` · `--font-base: 'Roboto', sans-serif; --font-heading: 'Playfair Display', serif; --font-mono: 'Roboto Mono', monospace;`\n\n- **Contrast pairing:** every light background token must pair with a dark text token and every dark background token with a light text token — enforced in both themes. Gold\u002Forange\u002Fgreen accents are for fills, borders, badges, and chart series only; text usage must go through the AA-adjusted `--text-success` \u002F `--text-error` tokens.\n- **Exception note:** the source palette lists `#FFFFFF` as the light background; per mandatory token rules it is implemented as the near-white `#FEFEFE`.\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark tokens both under `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` (system fallback) and under a `.dark` class on `\u003Chtml>` (explicit override). Theme switching must require zero HTML restructuring.\n- Provide a visible toggle in the masthead (Material Symbols sun\u002Fmoon), with correct `aria-pressed` and dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"). Persist choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Apply the class in `script.js` (deferred) — do **not** add an inline blocking script; the media-query fallback covers first paint.\n- **Exception note:** the source specification requested light-mode-only (\"Light: Full \u002F Dark: No\"); per mandatory architecture rules, full dark mode support remains required and must be implemented as specified here.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (permitted exceptions: text-heavy card columns may use `flex-start` for readability; equal-height card grids may use `stretch`).\n- Mobile-first: single-column layouts that expand at 768px\u002F1024px breakpoints; fluid type via `clamp()`; **no horizontal scrolling at any viewport width**. Set `scroll-padding-top` to offset the sticky masthead for anchor jumps.\n\n**1.5 Framework Decision**\nUse **clean custom CSS only** — no Tailwind, no frameworks, no JS libraries — matching the source specification's bespoke class architecture. All styling flows through the tokens above and reusable generic classes (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Include Google Fonts via `\u003Clink>` with `preconnect`: **Roboto** (400\u002F500\u002F700) bound to `--font-base`; **Playfair Display** (700\u002F800) bound to `--font-heading` for all headings and card titles; **Roboto Mono** (400\u002F500) bound to `--font-mono` for statistics, step numerals, and data labels; **Material Symbols Outlined** for icons.\n- **Icons must be Google Material Symbols only. Inline SVGs, local icon fonts, and emoji-as-icons are explicitly forbidden.** Decorative icons get `aria-hidden=\"true\"`; actionable icons get accessible names.\n\n**Source CSS mapping (mandatory fidelity):** `background: #FFFFFF` → `--bg-primary` (as `#FEFEFE`); `color: #001F3F` → `--text-primary`; `border-bottom: 2px solid #CC0000` → masthead bottom border and heading accent via `--accent-alert`; `font-family: Roboto, sans-serif` → `--font-base`; `transition: all 0.4s ease-in-out` → canonical pattern `transition: all var(--transition-normal) var(--ease-standard)`; `.political-graphic`, `.data-visualization`, `.statistic-highlight-hover` → required BEM blocks (the hover behavior of the last is implemented on `.statistic-highlight:hover`).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n- `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, Roboto 500, uppercase with letter-spacing. Variants: `.btn--primary` (`--primary` bg, `--on-primary` text), `.btn--outline` (2px `--primary` border; light text\u002Fborder in dark mode), `.btn--ghost`, `.btn--danger` (alert-red bg, white text — must be visually distinct in both themes).\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`. **Focus:** distinct ring — `outline: 2px solid var(--focus-ring); outline-offset: 2px;`. **Active:** `transform: scale(0.97)`. **Loading (`.is-loading`):** disables interaction and double-submits, renders a CSS border-spinner without changing button dimensions. **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`. **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback states using `--text-success` \u002F `--text-error` with a Material icon swap — used on the Final CTA submit.\n\n**2.2 Cards**\n- `.card` base: `var(--bg-secondary)` background, 1px `--border-default`, `var(--radius-md)`, flex column. On `--bg-secondary` section bands, cards invert to `var(--bg-primary)`.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md` + border-color shift. **Focus-within:** border highlights when an inner link\u002Fbutton receives focus. **Loading:** define a reusable `.skeleton` shimmer class (gradient animation, no layout shift). **Empty state:** define a reusable `.empty-state` pattern (Material icon + heading + guidance text). Skeleton and empty-state styles must exist in CSS even though the initial render is static.\n\n**2.3 Forms & Inputs**\n- The Final CTA contains an `.input-group`: flex column wrapping a visible `\u003Clabel>`, an `\u003Cinput type=\"email\" autocomplete=\"email\">`, and a dedicated `.input-group__error` container (`aria-live=\"polite\"`, reserved min-height to prevent layout shift).\n- Style all states via classes: empty, `:focus` (ring), filled, valid (`.is-valid`: green border + check icon), invalid (`.is-invalid`: red border + error icon + text message — **never color alone**), disabled, read-only. `script.js` validates the email, simulates submit (loading → success with `aria-live` announcement, or inline error).\n\n**2.4 Overlays & Dropdowns**\n- **No modals, dialogs, or toasts — none were requested; do not add them.** Still define `--z-modal` and `--z-toast` as reserved stacking layers.\n- The mobile navigation dropdown is the only permitted overlay: animated open\u002Fclose via CSS transitions, stacked at `--z-dropdown`, closes on `Escape` and outside click, moves focus to the first link on open and returns it to the toggle on close, toggle carries `aria-expanded` + `aria-controls`.\n\n**2.5 FAQ Accordion**\n- Each item: `\u003Cbutton>` with `aria-expanded` \u002F `aria-controls`, and a panel with `role=\"region\"` \u002F `aria-labelledby`. Animate open\u002Fclose with CSS (`grid-template-rows: 0fr → 1fr`). Material `add` icon rotates on open. Fully keyboard operable; first item open by default.\n\n**2.6 Political Graphics & Data Visualizations (CSS-only)**\n- `.political-graphic`: a layered abstract composition in the hero evoking political data — e.g., a plenary-chamber arc (conic-gradient segments), a ballot grid (repeating-linear-gradient), and ascending data bars (flex column of gradient-filled rectangles) in navy, red, gold, and orange. Built with clip-path, gradients, and pseudo-elements only — **no SVG**. Decorative: `aria-hidden=\"true\"`, responsive via `aspect-ratio` and `clamp()`.\n- `.data-visualization`: at least one chart-like element (the Features mini bar chart) with visible mono text labels so data is never communicated by color alone.\n- `.statistic-highlight`: Roboto Mono numeral + label; on hover, a 2px gold underline sweeps in (`::after` width transition) and the numeral shifts toward `--accent-alert`, using `var(--transition-fast)`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, defined breakpoints, zero horizontal overflow, all grids collapse to one column on mobile.\n- **Smooth animations:** every state change transitions via the tokens; add restrained reveal-on-scroll (opacity + 8px translateY, once per element, IntersectionObserver). Under `prefers-reduced-motion: reduce`, disable all non-essential transforms, reveals, and smooth scrolling (loading spinners are exempt as essential status feedback).\n- **Accessibility:** verify WCAG AA contrast (4.5:1 normal text, 3:1 large text\u002FUI components) for every token pairing in **both** themes — if a specified value fails, adjust it minimally while preserving hue. Never rely on color alone. Use semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), one `h1` with logical heading hierarchy, correct ARIA on all custom widgets, logical focus order, full keyboard operability, visible focus rings, 44px targets, `aria-live` for form feedback, and a skip link.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n- **Distraction-free transitions:** direct section changes only — no parallax, no scroll hijacking, no autoplaying or looping decorative motion.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** three separate files — `index.html`, `style.css`, `script.js`. A single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` reference; no inline scripts, no other script tags.\n- **Naming convention:** BEM exclusively, never mixed with other conventions. Required blocks: `.political-graphic`, `.data-visualization`, `.statistic-highlight`.\n- **`script.js` scope (vanilla ES6+, nothing else):** theme toggle with `localStorage` persistence and `prefers-color-scheme` fallback; mobile menu; FAQ accordion; smooth anchor scrolling (CSS `scroll-behavior: smooth` inside a `prefers-reduced-motion: no-preference` media query is acceptable); newsletter validation with simulated submit; IntersectionObserver reveals.\n- **Copy:** all user-facing copy in English, real and on-theme; placeholders only where content genuinely does not exist (footer secondary\u002Flegal links may use `href=\"#\"`; all in-page anchors must resolve to real sections).\n- **Self-contained:** no raster images or external assets beyond Google Fonts and Material Symbols; avatars are CSS initials circles.\n- **Output:** deliver the three complete files in one response, fully functional on first attempt.\n",1791954984664]