The footer added a wordmark row and a "view desktop" escape hatch
below the Join confirmation. Neither is worth the visual weight on
a phone screen — the masthead already has the wordmark, and the
?view=desktop override still works as a manual URL. Page now ends
at the join confirmation.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Desktop is a GSAP/Lenis/d3 animated experience that doesn't hold up
on phones. Rather than retrofitting media queries across 1200+ lines
of scroll-trigger code, add a completely isolated static mobile tree:
- protected/mobile/index.html — one-page static flow covering the
intro, 12 timeline events, hero, 4 capability cards, Bifrost
reveal, 3 participation stops, and Join CTA. All copy duplicated
from the desktop HTML on purpose — a shared data module would
re-couple the two trees.
- protected/mobile/mobile.css — paper/ink palette, all m-prefixed,
zero cascade overlap with the desktop CSS.
- protected/mobile/mobile.js — 60-line client: /auth/me check,
/api/bifrost-join POST + panel swap, /auth/logout. No GSAP, no
Lenis, no d3.
Routing (server.js):
- GET /timeline now UA-dispatches via MOBILE_UA_RE. Phone UAs get
the mobile page; everything else gets the desktop page.
- ?view=mobile and ?view=desktop query overrides take precedence
over the UA sniff — for bad guesses or previewing the other
version.
- Gating is unchanged: protected/mobile/ is inside protected/ so
the existing requireAuth + express.static gate covers it.
Docs:
- CLAUDE.md §routing now lists the UA dispatch as step 4.
- PROJECT.md gets a new "Mobile view" section explaining the
isolation rules (no shared JS/CSS, content duplicated manually).
- CHECKLIST.md gains section H0 with dispatch curl checks, render
verification on a phone, and an isolation audit that fails if
mobile classes leak into the desktop HTML or vice versa.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- SCENE_ANCHOR_OFFSET replaced with getSceneAnchorOffset() so the
bifrost scene can compute its offset per-viewport instead of using
a fixed px count. bifrost lands at offsetTop + 0.85 * vh so the arc
and sub-headline are already drawn in; stack-scene drops from 2100
to 1800 so the anchor lands mid-stack rather than on the 4th card's
final beat.
- .stack-title-bar top drops from clamp(3.75rem, 7vh, 5.25rem) to
clamp(1.25rem, 2.8vh, 1.85rem) so the title floats at the same
vertical baseline as the fixed .site-mark wordmark in the top-left,
instead of sitting below it.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Timeline page:
- .page-sub: final sentence wrapped in .page-sub-accent and styled
crimson so the rhetorical beat lifts off the block.
- Scroll-to-begin hint is now toggled from applyScroll() against
state.target, so it dismisses on first commit AND re-appears when
the reader scrolls all the way back to the start. onWheel no longer
hard-adds .hint-dismissed; the applyScroll toggle drives both ways.
Overview page:
- Hero scroll icon: size and presence bumped (2px line, 44px tall, 11px
chevron, weight 600, color:var(--ink)) so it reads as a confident
cue, not a whisper at the bottom of the hero.
- Architecture scene gains a title bar pinned with the scene: "The
Fenja AI platform in four steps" with a 1/4 → 4/4 counter driven by
the scroll-trigger onUpdate. Bar is placed below the site-mark's
fixed position so the two don't collide.
- Dot-nav: dot size 5px → 10px (1.5px ring) for better click target +
visual weight. Buttons for "Words" and "Participate" removed — the
corresponding intermediate sections now map to their nearest
surviving dot in bifrost.js's scroll-spy (words-scene →
stack-scene, bifrost-meaning → bifrost).
- Renames: "Hero" → "Fenja introduction", "Architecture" →
"Capabilities", "Bifrost" → "Project Bifrost".
- scrollTo() adds a per-scene SCENE_ANCHOR_OFFSET — stack-scene lands
+2100px into its 5000px pin so the reader arrives on the fully
stacked state instead of an empty pre-animation frame.
Welcome step (public/entrance.html):
- New .welcome-note callout between definitions and CTA advising
desktop viewing and gentle scrolling so readers don't fly past
animated sections before they've resolved.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Six scroll-bound scenes (hero, architecture stack, words fly-in,
aurora arc, treasure-map, join CTA) now live inside page-overview,
above the existing 23-headline timeline. The Europe map stays as a
static background that fades with scroll.
- protected/index.html: rewrote #page-overview only; timeline and
archive sections unchanged. Site-2 palette re-mapped to site-1
Nordic Editorial tokens, Fraunces to Newsreader, tokens scoped
to #page-overview.
- protected/timeline.js: dot-nav boots window.__bifrost.init()
on first Overview activation. Added .js class on documentElement.
- protected/bifrost.js (new): Lenis + ScrollTrigger wired to the
overview's internal scroller via scrollerProxy; drives Europe
map opacity on scroll.
- protected/vendor/{lenis,gsap,scrolltrigger}.min.js (new):
extracted from site-2's inlined vendor blobs; CSP-compliant.
- protected/fenja/illustrations/{community,council,pilot}.svg
(new): treasure-map stop images.
No changes to src/, server.js, deploy/, or public/. CSP stays
strict (script-src 'self'); zero inline scripts added. Auth gate
and session model untouched.
