Brazilian Environmental Symbols demo
Brazilian Environmental Symbols

An urgent, informative landing page style for Amazon preservation campaigns that fuses lush nature-driven visuals with bold Brazilian graphic symbolism and vibrant national colors.
Category: Nature & Organic
Era: 2020s Modern
Prompt: 17.7 KB · 2369 words
# CODING AGENT SYSTEM PROMPT — LANDING PAGE BUILD: "BRAZILIAN ENVIRONMENTAL SYMBOLS"

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page specified below **on your first attempt**. Deliver finished, runnable code — no TODOs, no truncation, no clarifying questions.

---

## 0. PROJECT BRIEF

- **Product:** A single-page campaign landing page for Amazon rainforest preservation, branded **"VerdeVivo"** (proper noun; all remaining copy in English).
- **Theme:** "Brazilian Environmental Symbols" — Brazilian graphic symbolism, Amazonian flora/fauna iconography, urgent natural aesthetic. Era: 2026+ ecological consciousness.
- **Mood:** Urgent, informative, engaging, natural, impactful, sustainable.
- **Theme Support:** Full light mode **and** dark mode — both are mandatory.
- **Sections (in this exact order):** Sticky Header/Nav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.
- **Copy:** Write ALL user-facing copy in **English**, in an urgent-but-hopeful campaign voice. Real, credible copy only — lorem ipsum is forbidden.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- All styling lives in a dedicated `style.css` file. **Forbidden:** `style="..."` attributes, inline event handlers (`onclick`, etc.), `<style>` blocks, and any `<script>` blocks other than the single deferred entry point.
- Style exclusively via class/ID selectors.
- Keep HTML semantic and visually agnostic: changing the theme must require editing CSS only, never markup.

### 1.2 CSS Variables & Theme Tokens
Define all visual tokens in `:root`, and override them in a `.dark` class. Use this exact token sheet (pre-tuned for contrast in both themes — do not break the light/dark pairings):

```css
:root {
  /* Color — Light */
  --primary: #228B22;            /* Forest Green */
  --primary-hover: #1B6F1B;
  --secondary: #4682B4;           /* River Blue */
  --secondary-hover: #3A6E9E;
  --accent-earth: #8B4513;        /* Earth Brown */
  --accent-sun: #FFD700;          /* Sun Yellow — badges/highlights only, always paired with near-black text */
  --accent-fire: #CC5500;         /* Burnt Orange — urgency highlights */
  --bg-primary: #FEFEFE;          /* Near-white page background (see exception note below) */
  --bg-secondary: #F0F0F0;        /* Light Gray — alternating sections */
  --bg-inverse: #14301A;         /* Deep forest — footer/CTA bands */
  --text-primary: #1C2B1C;
  --text-secondary: #4F5F4F;
  --text-success: #1E7A1E;
  --text-error: #CC0000;          /* Alert Red */
  --border-default: #DCE3DC;
  --border-error: #CC0000;
  --border-success: #228B22;
  --focus-ring: #4682B4;
  --overlay: rgba(10, 25, 15, 0.55);
  --btn-primary-bg: #1E7A1E;  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg: #3A6E9E; --btn-secondary-text: #FFFFFF;

  /* Shape, depth, motion, stacking */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(20, 48, 26, 0.08);
  --shadow-md: 0 10px 28px rgba(20, 48, 26, 0.16);
  --spacing-gap: 1.5rem;
  --transition-fast: all 0.25s ease-in-out;
  --transition-normal: all 0.5s ease-in-out;   /* per source spec */
  --ease-standard: ease-in-out;
  --z-header: 50; --z-dropdown: 100; --z-modal: 1000; --z-toast: 2000;
  --font-base: 'Open Sans', sans-serif;
}

.dark {
  --primary: #5FBB5F;  --primary-hover: #74CC74;
  --secondary: #7FB3D9; --secondary-hover: #9AC5E4;
  --accent-earth: #B07A4A; --accent-sun: #FFD700; --accent-fire: #F08543;
  --bg-primary: #0E1A12; --bg-secondary: #152419; --bg-inverse: #0A140D;
  --text-primary: #EAF2EA; --text-secondary: #A9BAA9;
  --text-success: #7DD87D; --text-error: #FF6B6B;
  --border-default: #2A3C2E; --border-error: #FF6B6B; --border-success: #5FBB5F;
  --focus-ring: #7FB3D9;
  --overlay: rgba(0, 0, 0, 0.65);
  --btn-primary-bg: #5FBB5F;  --btn-primary-text: #0A140D;
  --btn-secondary-bg: #7FB3D9; --btn-secondary-text: #0A140D;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.55);
}
```

- **Contrast pairing rule:** 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.
- **Near-white exception:** the source spec lists `#FFFFFF` as a background; per the mandatory near-white rule, all page backgrounds use `#FEFEFE`. Reserve `#FFFFFF` for text on dark/photo surfaces and button labels.
- **Signature accent:** the sticky header and section-title underlines use `border-bottom: 3px solid var(--secondary)` (River Blue), per the source spec.

### 1.3 Mandatory Dark Mode Support
- Provide dark tokens via **both** a `.dark` class on `<html>` and an `@media (prefers-color-scheme: dark)` default, so first-time visitors with no stored preference get the correct theme with zero flash.
- `script.js` applies the stored preference from `localStorage` (key `verdevivo-theme`) on load; fall back to `prefers-color-scheme` when none is stored.
- Header contains a visible toggle button using Material Symbols `light_mode`/`dark_mode`, with `aria-pressed="true"` in dark mode and a dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode").
- Theme switching must swap variables only — no HTML restructuring.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build every layout container with Flexbox. **Default every flex container to `align-items: center`** unless an exception is justified in a CSS comment (e.g., `stretch` for equal-height card grids).
- Mobile-first: base styles are single-column; `min-width` media queries add multi-column layouts (grids may use `auto-fit` + `minmax`). No horizontal scrolling at any viewport; use fluid `clamp()` typography.

### 1.5 Framework Default
- This build uses **clean, custom, token-driven CSS** in `style.css` (no CSS framework). Organize the file with labeled comment sections (Tokens, Base, Layout, Components, Sections, Utilities, Media Queries). Repeated patterns must become reusable classes (`.btn`, `.card`, `.input-group`) — never copy-pasted declarations.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- Load **Google Fonts** with `<link>` tags plus `preconnect` hints: **Open Sans** (weights 400, 600, 700, 800) bound to `--font-base`, and **Material Symbols Outlined** for all icons.
- Urgency typography: H1/H2 at weight 800 with tight letter-spacing; uppercase "eyebrow" labels with `letter-spacing: 0.12em`.
- **Icons:** Google Material Symbols only — inline SVGs, local icon files, and emoji-as-icons are forbidden. Every icon `<span>` uses the class **`.amazon-icon`**. Suggested symbols: `forest`, `water_drop`, `pets`, `eco`, `spa`, `volunteer_activism`, `monitoring`, `check_circle`, `error`, `expand_more`, `arrow_forward`, `dark_mode`, `light_mode`, `menu`, `close`, `mail`, `public`, `share`, `format_quote`, `favorite`, `park`, `groups`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `border-radius: var(--radius-sm)`; weight 700.
- **Variants:** `.btn--primary` (tokens `--btn-primary-bg`/`--btn-primary-text`), `.btn--secondary` (river blue), `.btn--ghost` (transparent, 2px `--border-default`), `.btn--danger` (alert red — visually distinct in both themes).
- **Hover:** brightness/shadow shift with `cursor: pointer`.
- **Focus:** visible `:focus-visible` ring — `outline: 3px solid var(--focus-ring); outline-offset: 2px`.
- **Active:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** blocks pointer events, prevents double-clicks, renders a CSS spinner (border-based `::after`) without changing button dimensions; set `aria-busy="true"`.
- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback styles driven by `--text-success` / `--text-error`, announced via `aria-live`.

### 2.2 Card Component (`.card`)
- **Default:** flexbox layout, `--bg-primary` surface, 1px `--border-default`, `--radius-md`, `--shadow-sm`.
- **Hover (interactive cards `.card--interactive`):** `transform: translateY(-2px)` + `--shadow-md`.
- **Focus-within:** border highlights to `var(--secondary)` when a child link/button is focused.
- **Loading (`.card--skeleton`):** shimmer keyframe animation that preserves layout dimensions.
- **Empty (`.card--empty`):** centered Material icon plus clear guidance text.

### 2.3 Form & Input Requirements (`.input-group`)
- **Structure:** flex column wrapping a `<label>`, the `<input>`, and a dedicated `.input-error` container (reserve min-height so messages never shift layout).
- **States:** empty; focused (ring via `--focus-ring`); filled; valid (`.is-valid` — success border + `check_circle` icon); invalid (`.is-invalid` — error border, red text, `error` icon + message); disabled; read-only.
- Errors are exposed via an `aria-live="polite"` region and linked with `aria-describedby`; never communicate state by color alone.

### 2.4 Modal / Popup Requirements (`.modal`)
- Used for the donation-tier confirmation flow (Section 5.6).
- **States:** opening (fade + scale 0.95→1), open, loading (spinner in confirm button), success/error, closing — all animated with CSS transitions.
- **UX:** fixed backdrop with `display: flex; align-items: center; justify-content: center;` over `var(--overlay)`; `z-index: var(--z-modal)`; Material icon close button (`aria-label="Close dialog"`); keyboard focus trap while open; focus returns to the trigger on close; close via `Esc` and overlay click; `role="dialog"`, `aria-modal="true"`, `aria-labelledby`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow, images use `object-fit: cover` with explicit `aspect-ratio` to prevent layout shift.
- **Smooth animations:** every state change uses `transition: var(--transition-normal)` (0.5s ease-in-out per source spec) or `--transition-fast` for micro-states.
- **Growth/reveal section transitions:** apply **`.growth-reveal-transition`** to major content blocks — initial state `opacity: 0; transform: translateY(28px) scale(0.96)`. An IntersectionObserver in `script.js` adds `.is-revealed` (opacity 1, no transform). Stagger siblings via CSS `nth-child` `transition-delay` rules — **never via inline styles**. Under `@media (prefers-reduced-motion: reduce)`: disable all transforms/animations/transitions and reveal content immediately.
- **Data-highlight hover micro-interaction:** stat elements (`.stat`) on hover scale their icon (`scale(1.15)`), shift the number color to `var(--accent-fire)`, and reveal a one-line supporting fact. Card data chips emphasize on hover the same way.
- **Accessibility (a11y):** contrast ≥ 4.5:1 for body text and ≥ 3:1 for large text/UI in **both** themes (the token sheet above is pre-verified — do not alter pairings). Never rely on color alone. Use semantic HTML5 landmarks, a "Skip to main content" link, `aria-labelledby` on every `<section>`, full keyboard operability (nav, accordion, modal), logical focus order, and `aria-live` regions for form feedback and loading states.
- **Mandatory visual feedback:** every hover, focus, click, and submission triggers a visible state change.
- **Destructive actions:** `.btn--danger` must be visually distinct in both themes (light: `#CC0000` bg + white text; dark: brightened red bg + near-black text).

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File structure:** separate `index.html`, `style.css`, and `script.js`. The only script reference is a single `<script src="script.js" defer></script>`.
- **Naming convention:** BEM (`.block__element--modifier`) throughout, with exactly three spec-mandated flat utility classes kept verbatim: **`.amazon-icon`**, **`.nature-photo-impact`**, **`.growth-reveal-transition`**. Never mix conventions.
- **Copy:** complete, real English copy for every section per Section 5 — no lorem ipsum, no placeholder text where copy is specified. Legal footer links may use `href="#"` since those pages do not exist.
- **JavaScript (vanilla only, no libraries):** theme toggle with persistence; mobile nav toggle; IntersectionObserver reveals (instant when reduced motion is set); FAQ accordion; modal with focus trap; newsletter validation with `aria-live` feedback; simulated donation confirmation (loading → success); dynamic footer year.
- **First-attempt completeness:** output all three files in full within a single response.

---

## 5. PAGE STRUCTURE & SECTION REQUIREMENTS

### 5.1 Sticky Header (`.header`)
Brand (`.amazon-icon` `forest` + "VerdeVivo"), nav links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, and a `.btn--primary` "Donate Now" that scrolls to `#pricing`. `border-bottom: 3px solid var(--secondary)`. Mobile: `menu` icon toggles a dropdown panel (`--z-dropdown`, column layout, `aria-expanded`, closes on link click and `Esc`). Add `html { scroll-behavior: smooth; scroll-padding-top: 5rem; }` with a reduced-motion override.

### 5.2 Hero (`#hero`)
Full-viewport impactful Amazon photo using **`.nature-photo-impact`** (Unsplash rainforest image, `object-fit: cover`, subtle slow scale animation, dark green gradient overlay via `--overlay` for text contrast in both themes). Content: eyebrow "THE AMAZON EMERGENCY — ACT IN 2026" (uppercase, `--accent-sun`); H1 "The Amazon Can't Wait. Become Its Guardian Today." (white, weight 800); urgent subhead; CTA pair — `.btn--primary` "Start Protecting Now" (→ `#pricing`) and a white-bordered ghost button "See How It Works" (→ `#how-it-works`). Below: a strip of 3 `.stat` items with honest, rounded, credible figures (e.g., "17% of the Amazon lost since 1970", "10% of Earth's known species live here", "1 football field of forest lost every minute"), each with a `.amazon-icon`, big number, label, and a fact line revealed on hover (Section 3 micro-interaction).

### 5.3 Features (`#features`) — 3 cards
Section header: eyebrow "WHAT WE FIGHT FOR", H2 with a 3px River Blue underline accent, one-line intro. Grid of 3 `.card--interactive`:
1. **Reforestation at Scale** (`forest`) — native-species planting and 3-year care — chip "1.2M+ native trees planted".
2. **Wildlife Protection** (`pets`) — jaguars, macaws, river dolphins — chip "340+ species monitored".
3. **Living Rivers & Communities** (`water_drop`) — clean-water and local-partnership programs — chip "58 riverside communities supported".
Hover: card lift, icon color shifts to `var(--primary)`, chip emphasizes.

### 5.4 How It Works (`#how-it-works`) — 3 steps
Eyebrow "HOW IT WORKS", H2 "From Your Click to a Living Forest". Steps with numbered badges 01/02/03 and icons (`volunteer_activism`, `spa`, `monitoring`): **"Adopt Your Hectare"** → **"We Plant & Protect"** → **"Watch Your Impact Grow"**, each with two sentences of copy. Desktop: horizontal row with a connecting line; mobile: vertical stack. Staggered growth-reveal.

### 5.5 Testimonials (`#testimonials`)
Eyebrow "VOICES OF THE FOREST", H2. Grid of 3 quote cards: Dr. Marina Alves — Field Biologist, Manaus; Aiyana Kambeba — Community Leader, Amazon River; Rafael Souza — Guardian Donor since 2024. Each: `format_quote` icon, quote, avatar (Unsplash portrait with descriptive alt text, `.amazon-icon` fallback), name, role. Grid collapses 3→1 on mobile.

### 5.6 Pricing (`#pricing`) — 3 tiers
Eyebrow "BECOME A GUARDIAN", H2 "Choose Your Impact". Tier cards:
- **Seedling — $10/mo:** 10 native trees planted yearly; quarterly impact report; digital guardian certificate.
- **Guardian — $25/mo** (featured: "MOST IMPACTFUL" badge in `--accent-sun` with near-black text, elevated shadow): 25 trees/year; anti-deforestation patrol support; monthly reports with a GPS map of your hectare.
- **Canopy Keeper — $50/mo:** 50 trees/year; live wildlife-camera access; annual video call from the field; family membership.
Feature lists use `check_circle` icons. Each CTA ("Choose Seedling", etc.) opens the confirmation modal (Section 2.4): title "Confirm Your Donation", one summary line, confirm button with loading → success state. Microcopy: "Cancel anytime · Secure donation".

### 5.7 FAQ (`#faq`)
H2 "Questions, Answered". Six accordion items (button + panel): Where does my donation go? How is reforestation monitored? Can I change or cancel my plan? Do you work with local and indigenous communities? Is my donation tax-deductible? How do I see my impact? Buttons carry `aria-expanded` + `aria-controls`; `expand_more` chevron rotates 180°; panels animate via `grid-template-rows: 0fr → 1fr`; fully keyboard operable.

### 5.8 Final CTA (`#cta`)
Full-width band with a `.nature-photo-impact` canopy background + overlay. H2 "The Forest Grows Back — If We Act Now." Sub: "Join 48,000+ guardians protecting the Amazon. Get monthly stories from the field." Newsletter `.input-group` per Section 2.3: label "Email address", input, `.btn--primary` "Join the Movement" with loading → success ("Welcome to the movement — check your inbox.") / inline error ("Please enter a valid email address."), all announced via `aria-live`. Consent microcopy: "No spam. Unsubscribe anytime."

### 5.9 Footer (`.footer`)
Background `var(--bg-inverse)` with light text in both themes. Row 1: brand + one-line mission; link columns — **Explore** (Features, How It Works, Testimonials, Pricing), **Support** (FAQ, Contact, Gift a Hectare, Transparency Reports), **Legal** (Privacy Policy, Terms of Use, Cookie Policy); social icons (`public`, `mail`, `share`) with `aria-label`s. Row 2: "© [current year] VerdeVivo — Amazon Preservation Initiative. All rights reserved." plus the line "Made with respect for the forest."

**Images:** use Unsplash direct URLs (`images.unsplash.com/...`) for rainforest, river, wildlife, and portrait photography; write descriptive `alt` text; apply `loading="lazy"` below the fold; set explicit dimensions or `aspect-ratio` to prevent layout shift.