# Project Bifrost — Site Structure Reference

This document labels every editable piece of the site with a short name you can quote when asking for changes, and notes where each piece lives in the code. Use the labels (e.g. **S1 lede**, **P3 footer**) to point at changes precisely.

---

## Top-level structure

The site has **three pages**, each occupying the full viewport. A dot-nav at the bottom switches between them.

```
/timeline  →  ┌─────────────────────────────────────────────┐
              │  [P1] TIMELINE                              │
              │  [P2] OVERVIEW (Project Bifrost scenes)     │
              │  [P3] ARCHIVE                               │
              └─────────────────────────────────────────────┘
```

Only one page is visible at a time. They are mutually exclusive — switching between them is a class toggle on the page wrapper, not a navigation.

Before reaching any of the three, users see the **entrance** at `/` (email form → welcome step). The entrance is a separate HTML file in `public/`.

---

## [P1] TIMELINE — horizontal scroll catalog

**Files:** `protected/index.html` (`#page-timeline`, lines ~739–758) + `protected/timeline.js`

A horizontal mousewheel-driven scroll through 23 editorial cards, set over a slowly rotating orthographic globe. Cards alternate above and below a central spine; each is accented by one of four colours (copper/ochre/terracotta/crimson) denoting register.

| Label | What it is | Where to change |
|---|---|---|
| **P1 page title** | *"From the promise of AI to the loss of **sovereignty.**"* | `index.html` line 740 |
| **P1 subtitle** | *"Twenty-three headlines, quietly laid across a tinted map. Scroll the wheel — the map turns with you."* | `index.html` line 741 |
| **P1 globe** | Rotating orthographic globe that tracks scroll position from N. America → Europe | `timeline.js` — `buildGlobe()` + `setRotation` in `applyScroll()` |
| **P1 events** | The 23 headline cards. Each has `date`, `kind`, `accent`, `hed`, `body`, `source` | `timeline.js` — `EVENTS` array, lines 4–102 |
| **P1 card styles** | Card layout, above/below-spine positioning, colour accents per `accent` value | `index.html` CSS `.evt`, `.accent-*` |
| **P1 year ticks** | "2022", "2023", … on the spine between groups of cards | `timeline.js` — `buildTimeline()`, year-tick loop |
| **P1 "Read the editor's note" button** | Bottom-right, appears near the end of the catalog; fires dot-nav switch to Overview | `index.html` line 747 (text) + `.continue-btn` CSS + `timeline.js` click handler |

---

## [P2] OVERVIEW — The Project Bifrost scroll

**Files:** `protected/index.html` (`#page-overview`, lines ~2232–2619) + `protected/bifrost.js`

A vertically scrolling container that holds six scroll-bound scenes. The Europe map sits as a fixed background behind them all and fades in/out with scroll position.

```
┌─ S1 HERO ──────────────┐
│  "Secure & Sovereign   │  ← Europe map fades behind
│   AI, hosted where it  │
│   belongs."            │
└────────────────────────┘
┌─ S2 ARCHITECTURE ──────┐
│  4 layer cards fall +  │  ← pinned, scrubbed
│  morph into 2x2 grid   │
└────────────────────────┘
┌─ S3 WORDS ─────────────┐
│  "...built with them,  │  ← words fly in
│   not just for them."  │
└────────────────────────┘
┌─ S4 BIFROST ARC ───────┐
│  🌈 aurora arc draws   │  ← "Introducing Project Bifrost"
│  "Project Bifrost"     │
└────────────────────────┘
┌─ S5 TREASURE MAP ──────┐
│  Community, Advisory   │  ← 3 stops on a winding path
│  Council, Pilot Proj.  │
└────────────────────────┘
┌─ S6 JOIN CTA + FOOTER ─┐
│  "Join us in shaping…" │  ← button → confirmation panel
│  [Proj] [Fenja] [Innov]│  ← 3-column footer
└────────────────────────┘
```

### S0 — Europe map background

The map stays static behind all six scenes. It does not rotate with scroll; it only fades.

| Label | What it is | Where |
|---|---|---|
| **P2 Europe map** | Static orthographic globe centered on Europe, sitting behind the hero | `index.html` line 2234 (`.overview-globe`) + CSS line 441 |
| **P2 map opacity ceiling** | Maximum map opacity (currently `0.42`) | `bifrost.js` — `MAP_MAX_OPACITY` constant |
| **P2 map fade curve** | Fully visible 0–20% scroll, fades to 0 by 80% scroll, fades back in when scrolling up | `bifrost.js` — `updateMapOpacity()` function |

### S1 — Hero

| Label | What it is | Where |
|---|---|---|
| **S1 eyebrow** | *"For regulated environments"* | `index.html` line 2246 |
| **S1 headline** | *"Secure & **Sovereign** AI, hosted where it **belongs.**"* | `index.html` lines 2247–2250 |
| **S1 lede** | *"Enabling highly advanced AI capabilities hosted within the client's own secure infrastructure."* | `index.html` lines 2251–2253 |
| **S1 supported-by** | Innovationsfonden placeholder logo + *"Supported by"* strip | `index.html` lines 2258–2267 |
| **S1 scroll hint** | "Scroll →" indicator bottom-right | `index.html` lines 2268–2271 |
| **S1 hero styles** | Type scale, colours, grid positioning, left-column anchoring | `index.html` CSS `#hero`, `.hero-title`, `.hero-lede`, `.hero-foot` |
| **S1 hero animation** | Word-by-word reveal of the headline on scene entry | `bifrost.js` — search `HERO — staggered intro` |

### S2 — Architecture stack

Four cards fall into a stack one at a time, then rearrange into a 2x2 grid. As they do, three copy panels crossfade on the left.

| Label | What it is | Where |
|---|---|---|
| **S2 copy panel A** | *"All the capabilities to solve business use cases with AI. Four layers. One architecture. Every piece yours to own."* | `index.html` lines 2284–2288 (`data-copy="0"`) |
| **S2 copy panel B** | *"Full client **control.** Complete **sovereignty.**"* + *"Nothing proprietary above the hardware…"* | `index.html` lines 2289–2292 (`data-copy="1"`) |
| **S2 copy panel C** | *"Built in **Denmark.** For **Europe.**"* + *"Engineered against the standards that matter here…"* | `index.html` lines 2293–2297 (`data-copy="2"`) |
| **S2 card 1 — Foundation** | *"AI — An **open-source** model, running on your **own hardware.**"* | `index.html` lines 2302–2310 (`data-layer="0"`) |
| **S2 card 2 — Knowledge** | *"The **vocabulary** of your business — **learned, retained.**"* | `index.html` lines 2312–2320 (`data-layer="1"`) |
| **S2 card 3 — Tools** | *"How the AIs **act** — not just what they **know.**"* | `index.html` lines 2322–2330 (`data-layer="2"`) |
| **S2 card 4 — Agents** | *"**Specialists**, **collaborating** to solve distinct tasks."* | `index.html` lines 2332–2340 (`data-layer="3"`) |
| **S2 stack animation** | The fall, stack, morph-to-grid scrub sequence | `bifrost.js` — search `ARCHITECTURE — two-phase scrubbed sequence` |
| **S2 card styles** | Shape, padding, "brain" illustration, eyebrow, grid-mode styles | `index.html` CSS `.layer-card`, `.card-box`, `.card-brain`, `.in-grid` |

### S3 — Words fly in

Sixteen individual words fly in from random directions as the user scrolls, assembling into one full sentence. Two words (`with` and `them,`) are given extra visual weight.

| Label | What it is | Where |
|---|---|---|
| **S3 full sentence** | *"But a platform for regulated organisations has to be built with them, not just for them."* | `index.html` lines 2361–2376 |
| **S3 highlight words** | `with`, `them,` — the two words with emphasis class `hi` | `index.html` lines 2371–2372 |
| **S3 word styles + animation** | Individual word reveal with scatter/scale/blur | `bifrost.js` — search `WORDS fly in`; CSS `.words`, `.w`, `.w.hi` |

### S4 — Bifrost aurora arc

A rainbow arc draws across the scene, then the "Project Bifrost" title fades in below it. This is the only place on the site where a gradient is used.

| Label | What it is | Where |
|---|---|---|
| **S4 eyebrow** | *"Introducing"* | `index.html` line 2441 |
| **S4 name** | *"**Project Bifrost**"* (split into two tokens — "Project" + "Bifrost") | `index.html` lines 2442–2445 |
| **S4 subtitle** | *"The bridge **between** an industrial-grade AI platform and the realities of regulated organisations — built **with** them, not just for them."* | `index.html` lines 2446–2448 |
| **S4 arc** | The rainbow arc that draws across the scene | `index.html` lines 2391–2436 — `<svg>` with `#arcHalo`, `#arcMain`, `#arcThin` |
| **S4 arc colors** | The aurora gradient stops (ochre → terracotta → indigo → heather) | `index.html` lines 2393–2408 — `<linearGradient>` stops |
| **S4 arc animation** | Stroke-dashoffset draw-in on scroll | `bifrost.js` — search `PROJECT BIFROST REVEAL` |

### S5 — Treasure map (3 stops)

A winding path draws down the scene, passing through three "stops" — each an illustrated card about one way to participate in Project Bifrost. Stops alternate left / right of the path.

| Label | What it is | Where |
|---|---|---|
| **S5 intro title** | *"What being part of **Project Bifrost** means"* | `index.html` lines 2469–2471 |
| **S5 intro lede** | *"Three ways to **shape**, to **influence**, and to **build with** the platform from the inside — a journey through what participation actually looks like."* | `index.html` lines 2472–2474 |
| **S5 winding path** | The bezier curve drawn between stops; rebuilt at runtime to pass through dot positions | `index.html` lines 2482–2494 (SVG shell); `bifrost.js` — `buildMapPath()` |
| **S5 intro stop** | *"Being part of **Project Bifrost** means **three** things — a community to shape the future with, a council to influence the platform through, and pilot projects that put it in your hands first."* (centered introductory copy) | `index.html` lines 2497–2504 |
| **S5 stop 1 — Community** | Eyebrow *"Be part of a"* + title ***"Community"*** + sub *"Shape the future together"* + body copy + illustration of six people in discussion | `index.html` lines 2507–2518; illustration `fenja/illustrations/community.svg` |
| **S5 stop 2 — Advisory Council** | Eyebrow *"Be part of an"* + title ***"Advisory Council"*** + sub *"Turn insight into influence"* + body copy + illustration of a man and a woman in conversation | `index.html` lines 2521–2532; illustration `fenja/illustrations/council.svg` |
| **S5 stop 3 — Pilot Projects** | Eyebrow *"Be part of"* + title ***"Pilot Projects"*** + sub *"Access the platform before others"* + body copy + illustration of two people at a computer | `index.html` lines 2535–2546; illustration `fenja/illustrations/pilot.svg` |
| **S5 path animation + per-stop reveals** | Draw-in of path; dot pops in + text/image fade on reach | `bifrost.js` — search `Treasure-map path draw` |
| **S5 styles** | Layout, alternating left/right stops, dots, path styling | `index.html` CSS `.map-intro`, `.map-canvas`, `.map-stop`, `.dot-anchor`, `.stop-*` |

### S6 — Join CTA + footer

The final scene is a large call-to-action headline with a single button. Clicking the button crossfades to a confirmation panel listing what happens next. Below, a three-column footer with brand marks.

| Label | What it is | Where |
|---|---|---|
| **S6 CTA eyebrow** | *"Ready?"* | `index.html` line 2565 |
| **S6 CTA headline** | *"Join us in shaping the future of **trusted sovereign AI.**"* | `index.html` lines 2566–2568 |
| **S6 CTA button text** | *"Join Project Bifrost"* | `index.html` lines 2569–2572 |
| **S6 CTA subtext** | *"Built in Denmark. Supported by the Innovation Fund."* | `index.html` line 2573 |
| **S6 confirmation eyebrow** | *"You're in"* | `index.html` line 2578 |
| **S6 confirmation headline** | *"Thank you for joining **Project Bifrost**."* | `index.html` lines 2579–2581 |
| **S6 confirmation list item 1** | *"The **Fenja AI team** will reach out to you shortly."* | `index.html` line 2583 |
| **S6 confirmation list item 2** | *"You'll receive an invitation to the **project portal** soon…"* | `index.html` line 2584 |
| **S6 confirmation list item 3** | *"We're currently setting the date for the **first advisory council meeting**…"* | `index.html` line 2585 |
| **S6 confirmation list item 4** | *"We'll be in touch shortly about your participation in the **pilot project**."* | `index.html` line 2586 |
| **S6 footer left — "Project Bifrost"** | Wordmark rendered in Newsreader with italic emphasis on "Bifrost" | `index.html` line 2593 |
| **S6 footer center — Fenja logo** | `<img>` pointing to `/fenja/fenja-wordmark-black.svg` | `index.html` lines 2595–2599 |
| **S6 footer right — Innovationsfonden** | Placeholder slanted-I mark + "nnovationsfonden" text (to be swapped for real asset) | `index.html` lines 2601–2612 |
| **S6 click handler** | CTA → confirmation crossfade + staggered checkmarks on list items | `bifrost.js` — search `SCENE 6 — Join section` |

---

## [P3] ARCHIVE — 23-row table

**Files:** `protected/index.html` (`#page-archive`, lines ~2622–2651) + `protected/timeline.js` archive-builder IIFE

A tabular view of the same 23 events from the timeline, sorted chronologically. Each row fades its background on hover.

| Label | What it is | Where |
|---|---|---|
| **P3 headline** | *"All twenty-three entries, in order of **publication.**"* | `index.html` line 2625 |
| **P3 sub** | *"Dates, sources and plate numbers for every card in the catalog. Hover a row to lift it from the paper."* | `index.html` lines 2626–2629 |
| **P3 table** | 5 columns: №, Date, Register, Headline, Source | `index.html` table markup + `timeline.js` archive-builder IIFE (lines 406–420) |
| **P3 data** | Same `EVENTS` array as the timeline | `timeline.js` — `EVENTS` |
| **P3 footer** | *"Fenja AI · Field Notes, No. IV / Catalog closed 14 April 2026 / Page III of III"* | `index.html` lines 2644–2648 |

---

## Shared chrome — visible on all three pages

**Files:** `protected/index.html` (lines 2207 + 2653–2668) + `protected/timeline.js`

| Label | What it is | Where |
|---|---|---|
| **Site wordmark** | Top-left Fenja logo, 118px wide | `index.html` line 2207 |
| **Dot-nav tray** | Subtle gradient fade at the bottom edge of the viewport | `index.html` `.dot-nav-tray` |
| **Dot-nav** | Bottom-center "Timeline / Overview / Archive" page switcher | `index.html` lines 2653–2668 |
| **Dot-nav logic** | Page activation + bifrost lazy-init on first Overview visit | `timeline.js` — `activatePage()` function, lines 439–457 |

---

## Entrance — before login

**Files:** `public/entrance.html` + `public/entrance.js`

The only public-facing page. A single email field; on submit, if the email is on the invite list, advances to a welcome step. Otherwise shows an inline "not invited" message.

| Label | What it is | Where |
|---|---|---|
| **Entrance tagline** | *"Thank you for your commitment and willingness to contribute."* | `entrance.html` step-email `.tagline` |
| **Entrance email input** | The single input field with "your email" placeholder | `entrance.html` step-email `<form>` |
| **Entrance topographic currents** | Concentric-circle SVG background in the top-right | `entrance.js` — `drawCurrents()` IIFE |
| **Entrance error messages** | *"Please enter a valid email address."* / *"This email is not on the invite list."* / *"Too many attempts…"* | `entrance.js` — inside the submit handler |
| **Welcome title** | *"Thanks for your interest, **[Name].**"* (or *"Thank you for your **interest.**"* when no first name) — set by JS after a successful login | `entrance.js` — `setWelcomeTitle()` |
| **Welcome body, paragraph 1** | *"Thank you for joining and for your interest in enabling sovereign AI in Denmark and Europe. Project Bifrost is a deliberate effort to advance it — the conviction that how we build these systems, and where, will shape the next decades."* | `entrance.html` step-welcome `.welcome-body` (first one) |
| **Welcome body, paragraph 2** | *"What follows is a timeline: twenty-three moments that explain why this matters now, and what the path looks like."* | `entrance.html` step-welcome `.welcome-body` (second one) |
| **"Learn more" button** | The button that routes to `/timeline` | `entrance.html` step-welcome `#welcome-continue` |
| **Welcome logo ghost** | Faint Fenja wordmark occupying the right half of the viewport | `entrance.html` `.welcome-logo` |

---

## Auth — server-side

**Files:** `src/auth.js` + `src/sessions.js` + `src/db.js` + `bin/invite.js`

For completeness — not UI, but labelled here so you can point at it when relevant.

| Label | What it is | Where |
|---|---|---|
| **Login endpoint** | `POST /auth/login` — accepts `{email}`, returns `{ok, firstName}` on success or `{error: "not_invited"}` with 403 | `src/auth.js` |
| **Login rate limit** | 30 attempts per IP per hour | `src/auth.js` — `rateLimit({…})` on `/login` route |
| **Logout endpoint** | `POST /auth/logout` — clears session cookie | `src/auth.js` |
| **Me endpoint** | `GET /auth/me` — returns `{email, firstName}` for current session or 401 | `src/auth.js` |
| **Invite CLI** | `node bin/invite.js add <email> [FirstName]` / `remove` / `list` | `bin/invite.js` |
| **Invite schema** | `invites(email, first_name, invited_at, invited_by)` | `src/db.js` |
| **Session duration** | 30 days | `src/sessions.js` — `SESSION_TTL_MS` |

---

## Design tokens — safe to change, affect everything cohesively

**File:** `protected/fenja/colors_and_type.css`

| Token | Value | Meaning |
|---|---|---|
| `--paper` / `--background` | `#faf6ee` | Primary paper background |
| `--ink` / `--on-surface` | `#383831` | Primary text colour |
| `--ink-soft` / `--on-surface-variant` | `#5f5e5e` | Muted text |
| `--ink-dim` / `--on-surface-muted` | `#8a887f` | Very muted text |
| `--walnut` / `--secondary` | `#785f53` | Primary accent (links, focus rings) |
| `--crimson` | `#8a3a2f` | Destructive / error |
| `--pigment-terracotta` | `#b96b58` | Warnings, S4 Bifrost accent |
| `--pigment-copper` | `#6d8c7c` | Success, organic / growth |
| `--pigment-ochre` | `#c29d59` | Cautions, tertiary |
| `--pigment-indigo` | `#5a6d83` | Info (only "blue" allowed) |
| `--pigment-heather` | `#8d7a85` | Categorical, supportive |
| Aurora gradient stops | ochre → terracotta → indigo → heather | S4 arc only |

Fonts: **Newsreader** (serif, for intent) and **Manrope** (sans, for execution). Both self-hosted as variable fonts in `protected/fenja/fonts/`.

The "no line" rule applies throughout: depth comes from tonal surface shifts, not 1px borders. Emphasis is applied via the Fenja rule — last keyword in Newsreader Bold Italic, followed by the absolute period.

---

## How to ask for changes

Pick a label from the tables above and tell me what you want changed. Examples:

- *"Change **S1 lede** to say …"*
- *"Swap the colour of the **S4 arc** from terracotta to copper"*
- *"Remove **S5 stop 2** entirely; renumber the path"*
- *"Add a 5th item to the **S6 confirmation list**"*
- *"Reorder: move **S3 Words** to come after **S4 Bifrost Arc**"*
- *"Make the **P2 Europe map** fully fade out by 40% scroll instead of 80%"*
- *"Change the **Welcome title** to read differently when the user has no first name"*
- *"Update **P1 events** entry #14 (the November 2024 rupture) to say …"*

If a change crosses multiple sections (for example, "add a fourth treasure map stop" or "reorganise the six scenes into five"), I'll lay out the pieces that need to move in a plan before writing code, so you can sign off.

If something you want to change isn't on this map, quote a phrase from the site and I'll find it.

---

## File index — where each label's code lives

```
protected/
├── index.html                          [P1], [P2 except animations], [P3], shared chrome
├── timeline.js                         [P1 events + globe + card builder], [P3 table builder],
│                                       dot-nav logic + bifrost lazy-init
├── bifrost.js                          All [P2] scene animations + Europe map fade
├── vendor/
│   ├── lenis.min.js                    Smooth scroll (for [P2])
│   ├── gsap.min.js                     Animation engine
│   ├── scrolltrigger.min.js            Scroll-bound timelines
│   ├── d3-array.min.js                 Globe math (used by timeline.js)
│   ├── d3-geo.min.js                   Globe projection
│   ├── topojson-client.min.js          World topology parser
│   └── countries-110m.json             World country shapes
└── fenja/
    ├── colors_and_type.css             Design tokens
    ├── fonts/                          Manrope + Newsreader (variable fonts)
    ├── fenja-wordmark-black.svg        Logo — used by site-mark + S6 footer
    └── illustrations/
        ├── community.svg               S5 stop 1
        ├── council.svg                 S5 stop 2
        └── pilot.svg                   S5 stop 3

public/
├── entrance.html                       Entrance + welcome steps (before login)
└── entrance.js                         Entrance form behaviour, welcome title logic

src/
├── auth.js                             /auth/login, /auth/logout, /auth/me
├── db.js                               SQLite schema + prepared queries
├── sessions.js                         Session cookie lifecycle
└── middleware.js                       rateLimit() + requireAuth()

bin/
└── invite.js                           CLI: add / remove / list invites

server.js                               Entry point, CSP, routing
```