Reach Hub takes shape

Why Care?

This morning the Reach Education Hub was a scaffold — a placeholder homepage, a brand-kit page, a design-system page, and not much else. By tonight it's a real working hub with the kind of texture that lets a Reach senior exec land on /, scroll, and get it in under thirty seconds.

For the partnership between Reach University and The Lossless Group, this is the front door. The audience is the people we're already collaborating with — they don't need to be sold; they need to find what we've built and feel the momentum. That's what the hub now does.

Two big things matter:

1. The story deck has two variants now — a baseline and an editorial cut — and they live behind a sticky Header with a one-click variant cycler. You can flip between deck designs without leaving the deck.

2. The homepage is no longer a placeholder. It articulates the two pillars of the work (Raise Better / Build Smarter) and previews what's coming next.

What's New?

• /story — the canonical 9-section scroll-deck variant of the Reach story. White, structured, journalistic.

• /story/version-2 — an editorial / serif-driven variant of the same content. Indigo + orange + cyan palette, magazine-style typography, mode-aware throughout.

• Tailwind wired to all three modes. dark: redefined to follow the .dark class set by mode-switcher.js (instead of the prefers-color-scheme media query). Net-new vibrant: variant keyed on html[data-mode="vibrant"]. Both compile cleanly and respond to the existing ModeToggle.

• Sticky Header with brand wordmark, active-state nav, and a scroll-deck variant cycler that only appears when you're on a registered deck path. Fixed to the top, doesn't fight the deck wrapper.

• / homepage rebuild. Hero with Booting up systems for Lossless Collaboration. Two pillars side-by-side using the dual-naming convention. A "where it's going" trajectory section. A showcase grid (currently one card — Deck-o-Knots — designed for many). A "friendly nod" closing on contact.

• Sitemap doc captured as a brainstorm + decisions log at context-v/sitemap/Page__Index.md.

The arc — how this came together

We started in the morning with the deck-iteration-workflow skill and a question: how do we go from "we have nine messages distilled from reach.edu" to "we have a deck a senior exec would actually scroll." The answer was start with the whole narrative on one page (Phase 1 of the workflow), generate sections, get the through-line right, then iterate.

/story came first. Nine <section> components, each min-h-screen with snap-start, composed in a single page. Inline Tailwind, built-in tokens only. Clean, journalistic.

Then we ported PageAsDeckWrapper from calmstorm-decks so the deck got a proper page tracker (current section / total, updates on scroll), keyboard nav (arrows / PgUp / PgDn / Home / End), and a fade-out hint chip. We swapped three CSS-token names (--color-outline → --color-border, etc.) to match Reach's semantic tokens.

That's where we hit a real correction: the port still leaned on var(--theme-*) references. The deck-iteration-workflow skill is explicit that Phase 1/2 should use Tailwind built-in tokens only — semantic-token cleanup is a Phase 3 motion. The port worked, but the next move (variant 2) had to follow the rule properly. That correction is now a feedback memory that compounds across sessions.

Variant 2 — editorial, mode-aware

Variant 2 is what made us realize the mode wiring needed to be properly hooked up. Reach's theme.css already had the three [data-mode="..."] blocks. mode-switcher.js already added the .dark class on dark + vibrant. ModeToggle.astro already cycled. But Tailwind's dark: variant defaulted to @media (prefers-color-scheme: dark) — it wasn't listening to the class.

Two @custom-variant directives in global.css fixed this:

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant vibrant (&:where([data-mode="vibrant"], [data-mode="vibrant"] *));

Plus a synchronous no-flash boot script in <head> of BoilerPlateHTML.astro that reads localStorage before first paint and applies data-mode + .dark so users don't see a light-flash on a dark page.

After that, variant 2 came together quickly. Big serif headlines (font-serif), Tailwind built-ins approximating Reach's brand (indigo-950 for purple-midnight, cyan-700 for teal-ocean, orange-500 for orange-saccharine), magazine-style rhythm. Mode-aware everywhere: every section answers "what does this look like in light, dark, vibrant."

Header — sticky, mode-aware, with a scroll-deck cycler

The Header rewrite stole calmstorm-decks' DeckHeader shape: thin (h-12), 3-column grid, wordmark on the left, centered nav with active-state styling, ModeToggle on the right. Mode-aware via the new dark: / vibrant: variants.

Then we added what calmstorm has between its center nav items — a scroll-deck variant cycler. A lib/scroll-decks.ts registry holds the variant entries (today: v1 baseline and v2 editorial). When getScrollDeckCycle() returns non-null for the current path, a rounded-pill ‹ v1 · baseline (1/2) › slot renders between Story and Brand Kit. Click prev or next, you cycle to the other variant. Cyclic — prev from v1 wraps to v2, next from v2 wraps to v1.

Last touch: sticky top-0 z-50 on the Header. Pins to the top while scrolling on long pages (/, /brand-kit, /design-system); a no-op on the deck pages because the body doesn't scroll there (the deck wrapper internally scrolls inside its calc(100vh - 3rem) envelope).

/ — the homepage that says what we're doing

The old homepage was three placeholder lines. The new one has five sections and a voice:

1. Hero — Reach University × The Lossless Group eyebrow, big serif Booting up systems for Lossless Collaboration. headline (the wordplay anchor: Lossless Collaboration in orange).

2. Two pillars with the dual-naming convention decided in the brainstorm session: a plain-language headline as the visual anchor (Raise Better. / Build Smarter.) and an italic "nerdy unpacked" subtitle below (Fundraise Acceleration / Agentic Leapfrog). Plain hooks the exec; nerdy signals depth.

3. Where this is, where it's going — current focus (presentation iterations for the fundraise), three orange-topped trajectory cards: market leadership content, Agent-harnessed donor targeting, ops & teaching upgrades.

4. Click around — showcase grid, currently one Deck-o-Knots card linking to /story. Designed to grow.

5. Friendly nod — "You've got my number. Text or WhatsApp beats email — I don't really check email." Signed by Michael Staton as single point of contact. No phone number on the page (could get scraped); the audience already has it.

What this enables next

• More variants. Adding v3 to the scroll-deck registry is a one-line append and the Header cycler picks it up automatically.

• More showcase cards. The grid in "Click around" is built for n entries; second card just slots in.

• Trajectory expansion. The three "where this might go" paths are seeds — when one of them ships, it gets its own section or page.

• Public deployment. The hub doesn't need to be gated. All info is public, no fundraising regs apply, being found is good.

Files changed

Source:

• src/pages/index.astro — full rebuild from placeholder to five-section hub

• src/components/basics/Header.astro — rewrite + scroll-deck cycler + sticky positioning

• src/lib/scroll-decks.ts — new registry for scroll-deck variants

• src/layouts/PageAsDeckWrapper.astro — ported from calmstorm-decks

• src/layouts/BoilerPlateHTML.astro — no-flash mode boot script

• src/styles/global.css — @custom-variant dark and @custom-variant vibrant directives

• src/pages/story/index.astro — Header + boot wiring

• src/pages/story/version-2.astro — new editorial variant page

• src/layouts/sections/story/T01–T09-*.astro — v1 deck sections (committed earlier today)

• src/layouts/sections/story/version-2/T01–T09-*.astro — v2 deck sections (editorial, mode-aware)

• src/content/messages/*.md — nine LFM message files distilled from reach.edu

Documentation:

• context-v/sitemap/Page__Index.md — brainstorm + decisions log for the homepage

• src/content/changelog/2026-05-04_02.md — this entry

Reference

• Skill: deck-iteration-workflow (governs the Phase 1 / Phase 2 motion)

• Skill: changelog-conventions (this entry's shape)

• Skill: git-conventions (the commit that lands this entry)

• Pattern source: sites/calmstorm-decks/ (Header chrome, PageAsDeckWrapper, lib/scroll-decks.ts registry)

• Brand source: Reach's theme.css (purple-midnight, teal-ocean, orange-saccharine, Soleil + Playfair fonts) — used as visual inspiration, mapped to Tailwind built-in approximations