# Foresight web pages: build spec

Version 1.0, October 2026

This spec is for anyone building a standalone page for foresight.org, including AI tools. Give this whole file to the tool before it starts building. Pages that follow it can be reviewed and published quickly. Pages that don't follow it need custom setup and take longer.

Send finished pages to Djordje. He passes them to The Webmaster Company (Patrick), who publishes them.

---

## 1. Choose a page type

Every page is one of three types. Pick one before building, and say which one in the README.

| | A. Standard | B. Own header | C. Standalone |
|---|---|---|---|
| foresight.org site header | Yes | No (the page has its own) | No |
| foresight.org site footer | Yes | Yes | No |
| Title, description, social share preview | Set in WordPress by the webmaster | Built into the page by you | Built into the page by you |
| Analytics and site-wide scripts | Included | Included | Included |
| Review and setup | Fastest | Longer | Longer |

**Use type A unless there is a design reason not to.** It is the fastest to publish, the safest, and the webmaster can update its title, description and share image without a new file.

**Types B and C give up WordPress SEO control.** The page's title, description, canonical link and social share preview (Open Graph and Twitter/X cards) come only from the page's own HTML. Changing any of them later means sending a new file.

---

## 2. Rules for every page

### Files

- One folder per page, named after the page address. For `foresight.org/founder-funder-registry`, the folder is `founder-funder-registry/`.
- The page is `index.html` in that folder, plus `README-for-developer.md`.
- Only HTML, images (`.jpg`, `.png`, `.webp`, `.svg`) and fonts (`.woff2`). No `.php`, `.htaccess`, `.js` files outside the HTML, server scripts or build tools in the folder you send. Source files and build scripts can be sent in a separate `src/` folder; they are kept for future edits but never uploaded.
- The page must never contain `<?` anywhere. The site reads the file and prints it; `<?` would be treated as PHP.

### Code

- All CSS goes in **one** `<style>` block inside `<head>`.
- All JavaScript goes in `<script>` blocks inside `<body>`. Scripts in `<head>` are dropped for type A pages.
- No external JavaScript libraries or CDNs. Plain JavaScript only.
- External resources are limited to Google Fonts and the services the page needs to work (a form endpoint, a video embed). List every outside domain the page contacts in the README.
- Never insert what visitors type back into the page as HTML. Set it as text.
- No `eval`, no `new Function`, no inline `on…=` attributes.
- No `<base>` tag. It breaks in-page links such as `#section`.

### Layout and quality

- Works from 320 px phones up to wide desktop screens, with no sideways scrolling.
- Tested in Chrome, Safari and Firefox, including iPhone Safari.
- Form inputs at least 16 px on phones, so iPhones don't zoom in.
- Respects "reduce motion" settings.
- Images compressed. Aim for a page under 1 MB in total, excluding video.
- Real content only. No placeholder text, names or quotes on a page sent for publishing.

### Forms

- Forms send directly from the browser to a named endpoint (for example a Google Apps Script web app). Nothing is stored on the website.
- The README must say where the data goes and who can see it.
- Collect only what is needed. Don't collect payment details or passwords.

### Brand

- Fonts: ABC Arizona Text (serif, headings) and Neue Haas Unica Pro (sans, text). The site already loads both, so type A pages can use them by name. Use Google Fonts fallbacks (Newsreader, Inter) in every font stack.
- Colours: follow foresight.org. Soft blue and green backgrounds, near-black text.

---

## 3. Type A: Standard (site header and footer)

Examples: foresight.org/advisory-circles-join, foresight.org/founder-funder-registry

The site places your page between its own header and footer. Only three things are taken from your file:

1. the Google Fonts `<link>` in `<head>` (one, optional)
2. the single `<style>` block in `<head>`
3. everything inside `<body>`, plus any classes on the `<body>` tag

Everything else in `<head>`, including `<title>`, meta tags and Open Graph tags, is ignored.

**Rules:**

- **No header, footer or navigation of your own.** The site supplies them.
- **Wrap the whole page in one element with a unique class**, for example `<div class="fr-root">`. Use a short prefix for the page.
- **Scope every CSS rule to that wrapper**, for example `.fr-root h2 { … }`. Don't style `html`, `body`, `*`, `a`, `p`, `h1` or other elements on their own: those rules would change the site header and footer. Body classes your page adds itself, such as `body.locked`, are the only exception.
- **Leave room for the site header.** It is fixed to the top of the screen, 56 px tall on phones and 76 px on desktop, and sits above everything (`z-index: 50`). Anything you scroll to needs `scroll-margin-top: 80px`. Full-screen overlays should start below it (`top: 76px`) or accept that the header covers their top edge.
- **Put SEO details in the README, not the HTML:** the page title, a description of about 155 characters, and a share image (1200 × 630 px, included in the folder). The webmaster enters them in WordPress.

### Optional: password protection

Type A pages can sit behind a password, as the Advisory Circles and Registry pages do: page content encrypted in the file and unlocked in the browser.

- Add `<meta name="robots" content="noindex, nofollow">` in `<head>` while the password is on. The site reads this tag and keeps the page out of search engines. Remove it in the public version and the page becomes searchable again automatically.
- Classes on `<body>` (such as `locked`) are copied onto the site's `<body>`.
- Send the password to Djordje separately, never in the README.

---

## 4. Type B: Own header (site footer only)

Example: foresight.org/founder-funder-mixer-vw-2026

Your page is printed as a full HTML document, with the site's footer added where you mark it.

**Rules:**

- **Put this exact line where the footer goes**, normally just before `</body>`:

  ```html
  <!-- FORESIGHT.ORG SITE FOOTER GOES HERE (see README) -->
  ```

- **Images and fonts can live in an `assets/` folder** next to `index.html`. Reference them as `assets/...` exactly, without `./` or a leading `/`. The site points these paths at the right place.
- **Include the full SEO set in `<head>`** (see section 6). WordPress and the SEO plugin are switched off for this page so nothing is duplicated.
- **Scope your CSS to a wrapper**, as for type A. The site's own styles are loaded so the footer works, and unscoped rules on `body`, `a` or `p` change the footer too.
- **Set your own styles for headings, lists, buttons and images.** The site's CSS reset applies to the whole page, so don't rely on browser defaults.
- Don't add analytics, a favicon or a cookie banner. The site adds them.

---

## 5. Type C: Standalone (no site header or footer)

Use only when a page must look completely separate from foresight.org, such as a microsite for a partner event.

**Rules:**

- Same as type B, without the footer line.
- The site's own styles are not loaded, so your page looks exactly as built. Analytics and site-wide scripts are still added.
- Include the full SEO set (section 6).

---

## 6. SEO set for types B and C

Required in `<head>`:

```html
<title>Page title · Foresight Institute</title>
<meta name="description" content="About 155 characters.">
<link rel="canonical" href="https://foresight.org/your-page-address/">
<meta property="og:type" content="website">
<meta property="og:url" content="https://foresight.org/your-page-address/">
<meta property="og:title" content="…">
<meta property="og:description" content="…">
<meta property="og:image" content="https://foresight.org/your-page-address/assets/img/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@foresightinst">
```

- Use full `https://` addresses for the canonical link and `og:image`. The site moves `og:image` to wherever the assets are uploaded.
- For events, add `Event` structured data in a `<script type="application/ld+json">` block.
- While the page is password-protected or not yet public, add `<meta name="robots" content="noindex, nofollow">`.

---

## 7. README template

Every folder includes `README-for-developer.md`, starting with this block:

```markdown
# Page name

- **Address:** foresight.org/page-address
- **Page type:** A / B / C
- **New page or update:** New / Update to existing page
- **Needed live by:** date, and why (event, email send, announcement)
- **Content approved by:** who on the Foresight side signed off the content
- **Password:** yes or no (send the password to Djordje separately)
- **Outside domains contacted:** for example fonts.googleapis.com, script.google.com
- **Form data goes to:** endpoint, and who can see the responses
- **SEO (type A only):** title, description, share image file name

## What changed (updates only)

- Short list of what's different from the live version.

## Anything unusual

- Anything that doesn't follow this spec, and why.
```

---

## 8. Final versions and updates

Pages go straight to their live address. There is no preview step, so the version you send is the version the public sees.

- Only send a page when it is final: content signed off, names, dates, prices and links checked, form tested, and checked on a phone.
- If a new version is sent while the previous one is being set up, it replaces it and the turnaround starts again.
- Changes after a page is live are an update. Changes to the same page sent on the same day are applied together as one update, so send them as one list.
- For an update, send the whole folder again, built the same way, with "What changed" filled in.
- The address, page type and folder name stay the same.
- If an update changes the page type, the address, or where form data goes, treat it as a new page.

---

## 9. Quick check before sending

- [ ] Page type chosen and stated in the README
- [ ] One `<style>` block in `<head>`, scripts in `<body>`
- [ ] No `<?`, no PHP, no server files, no external script libraries
- [ ] Type A: everything inside one wrapper, all CSS scoped to it, no header or footer of its own
- [ ] Type B: footer line in place, assets referenced as `assets/...`
- [ ] Types B and C: full SEO set in `<head>`
- [ ] `noindex` tag present if the page is password-protected or not yet public
- [ ] Tested on phone and desktop in Chrome, Safari and Firefox
- [ ] README complete, with every outside domain listed
- [ ] No placeholder content
- [ ] Content final and signed off; names, dates, prices and links checked