ERA Website Spec — Overview & Architecture

00 How to use this spec

1. Read Part 1 fully before building anything. It carries the strategy, the design language, and the asset manifest. Parts 2–3 are page-by-page build sheets.
2. The homepage is already built and is the design-language reference implementation. It lives at homepage/index.html in this project, pixel-matched to the design team's Squarespace prototype. Reuse its CSS patterns (homepage/site.css) for every other page. Do not invent a new visual system.
3. Copy status tags. Every copy block is tagged: verbatim taken word-for-word from an ERA source — do not edit; adapted assembled from ERA source language — light edits acceptable; draft written new for this spec — needs ERA approval before launch.
4. Images. All currently-available assets are inventoried in §05 with project paths. Where a page needs an image that does not exist yet, the spec says so explicitly — use an image-slot placeholder, never a stock photo or generated image.
5. When in doubt, match the homepage. Fidelity to the established design language outranks any instinct to improve it.

01 What this website is for (rationale)

The organization. The EcoRestoration Alliance (ERA) is a global network (~600 members, growing toward 1,000) of scientists, Indigenous leaders, regenerative farmers, and storytellers. Its thesis: ecosystem degradation drives 15–45% of climate forcing, so restoring ecosystems is climate repair — a faster, cheaper cooling lever than carbon math alone suggests. Its flagship proof points: the CCQ ("Cooling Climate Quickly") whitepaper, the Big Map / ERA² atlas of 4,400+ restoration projects (curated from many sources — not ERA's own projects), and demonstration hubs in Panama (EcoFinca, Canal watershed) and Uganda (Edward's Hamlet).

The job of the site. ERA's fundraising wins have come from warm networks + the CCQ paper — not cold web conversion. So this site is a credibility surface that closes warm leads, plus a quiet builder of grassroots recurring support. It consolidates three existing properties (Squarespace prototype, old Wix site, Render staff hub) into one canonical home.

The diplomatic constraint. The homepage must remain a faithful replica of the design team's Squarespace prototype (already done — homepage/). Inner pages extend that language; they do not reinvent it.

The "two orbits, two doors" model — the core architectural idea

Orbits are a narrative axis (how the story is told, page by page). Doors are a conversion axis (how money is asked for, by donor capacity). They are different axes and are instantiated by different mechanisms:

Entry-aware landing resolves the single-site tension: QR codes on the funder decks land on /fund (funder framing, Door 1 forward); newsletter links land on /sustain; a Templeton-style referral lands on /era2. Same site, same nav — the entry point pre-selects orbit and door. See §06.

02 Sitemap & navigation

Primary navigation (all pages)

White header bar exactly as built in homepage/site-header.jsx: color logo left (74px), then nav links (Open Sans 400, 18px, black): Home · Science · Initiatives · About · Stories · ERA² · Engage, then a Donate button (neon #9dfd00, radius 16px 0) right-aligned. Note: the prototype's header has only Home/Members and no button — the homepage replica must keep its minimal header; inner pages use this extended nav. Flag this divergence to Stefan & Mary for sign-off.

Footer (all pages)

As built in homepage/site-footer.jsx: dark-bold background, white reverse logo + tagline left; newsletter blurb + email form right (input + neon Sign Up button side-by-side, stacking under 720px); bottom row: "Site by Brand Intelligence" credit + © year. Newsletter form posts to the Substack/ESP embed (see §07).

Redirect plan (launch checklist)

• ecorestorationalliance.org → becomes the canonical domain, pointed at Render.
• ecorestorationalliancenow.org → 301 to /.
• The three legacy CCQ URLs → 301 to /science. Big Map domains → /era2.

03 Design language (measured, not guessed)

Every value below was measured from the prototype's rendered DOM. The reference implementation is homepage/site.css — copy its custom properties wholesale.

Color

Type

• Open Sans (Google Fonts) for everything; weight 700 headings, 400 body. Poppins 600 only for small uppercase meta/eyebrows.
• Scale (at 924px viewport; use the fluid clamps from site.css): hero h1 52.6px/700; section h2 36px; section-label h3 29.3px, green, left-aligned; column h4 18.2px; body 18.2px (21.5px only in the Climate Repair band).
• Two-tone headings: white base with a #51e923 emphasis span — e.g. "Strategic Interventions for Global Ecological Impact". Headings with no explicit spans default to #9ad33c.

Signature elements

• Green hairlines: 1px #9ad33c underlines beneath column headings (pillars, alliance columns, sub-heads) and as section separators.
• Buttons: neon #9dfd00, border-radius: 16px 0 (two corners rounded, two sharp), Open Sans 500.
• Curved-corner feature boxes: dark boxes with one large asymmetric radius (48–60px) — see eco text box and Donate card on the homepage.
• Layout: 6vw side gutters, content max 1500px, generous dark sections; images squared (no radius) unless specified.

04 Voice & copy rules

• The vision ladder. 3-second hook: "Healthy ecosystems cool the planet. We're restoring that power — fast." 10-second what: "ERA makes nature's cooling power visible, fundable, and real — connecting the science, the restorers, and the money, and proving it on the ground in Panama and Africa." The 30-second "aligning three intelligences" reveal belongs on /about and /era2 — never as an opening line.
• House voice: declarative, contrarian, concrete. Prefer "Earth's air conditioners are breaking down" over abstractions. No emoji. No exclamation marks except in quoted material.
• Numbers discipline: 15–45% of climate forcing; 4–10× undervaluation; 2–4°C local cooling in months; 4,400+ curated projects on the Big Map (never imply they are ERA's own); ~600 members. Update counts at launch.
• Signature lines (use verbatim, attribute internally): "Climate repair, not climate despair." · "Don't look up. Don't panic. Look down." · "The Big Map is not a wish list. It is a census of what is already working." · "Watch for free. Join to ask questions." · "Forests don't simply grow where it rains — they ensure that it rains where forests grow." · "A way for planetary intelligence to know itself." (after Sagan, for /era2 only).
• AI positioning: on Orbit-A pages, AI is backstage ("tools that make the field legible"). Only /era2 leads with it.

05 Asset manifest

All paths relative to project root. These are real ERA assets extracted from the prototype — use them, never substitutes.

06 Entry-aware landing

• /fund — thin wrapper: Science-page hero condensed + proof strip + Door 1 card + contact. Linked from QR codes on the CCQ Family-Office and Philanthropy decks (/fund?src=ccq-fo, ?src=ccq-ph — vary the deck-download block to match the source).
• /sustain — thin wrapper: Sustainer story + Door 2 card only. Linked from newsletters and social.
• /era2 doubles as the Orbit-B landing for Templeton-style referrals — no wrapper needed.
• Implementation: static pages reusing existing sections; read ?src= for analytics only. No personalization engine.

07 Technical notes

• Stack: static HTML/CSS/JS (or a static-site generator if preferred). One shared stylesheet derived from homepage/site.css. No CMS required at launch; Currents posts are flat pages, with RSS/Substack as the writing surface.
• Hosting: Render static site. Custom domain ecorestorationalliance.org; 301s per §02.
• Forms: newsletter → Substack embed (or ESP form); Donate Door 2 → payment link (Stripe Payment Link / Donorbox / Givebutter — ERA to choose); Door 1 → mailto/contact form to a named human.
• Existing tools stay where they are: Big Map, Directory, and the staff hub remain on their current Render services; this site links out to them. Don't rebuild them.
• Performance: compress hero images to <400KB; lazy-load below-fold imagery; system-font fallbacks while Open Sans loads.
• Accessibility: the neon-on-dark greens pass contrast on #072012; keep body text pure white; alt text for every project/partner image; focus states on nav + buttons.

08 Build order & definition of done

1. Shared shell (header/footer/css) extracted from the homepage replica.
2. /science + /donate (the fundraising core), then /fund + /sustain wrappers.
3. /initiatives + /about.
4. /stories + /era2 + /engage.
5. Redirects, analytics, launch checklist.

Done means: every page passes the design-language checklist (§03), all copy tags resolved (drafts approved), no placeholder images on Orbit-A pages, redirects live, and the homepage replica untouched.