Polish pass

Why Care?

Yesterday we went from scaffold to a real working hub end-to-end. Today is the second pass — the kind of work where nothing new ships but everything looks more like itself.

The hub now reads "Reach goes Lossless" in the browser tab. The Header carries a circular Reach mark before the wordmark. The homepage hero has an editorial right-bump and the rest of the page lives in a 70vw column. A three-column cross-credit Footer mirrors the pattern from sites/fullstack-vc — Built for Reach, Made with ♥ by The Lossless Group, An Astro Knots project. And the mode toggle that was nearly invisible on hover in dark and vibrant modes now lights up orange across all three.

The audience is the Reach senior exec who saw a screenshot last night and is back this morning. The work last night earned the second look. This pass earns the visit feeling complete.

What's New?

• Browser tab rebrand. Default title across the hub is now Reach goes Lossless. Per-page overrides updated: /story, /story/version-2, /brand-kit, /design-system. The default in BaseThemeLayout and BoilerPlateHTML carries to any future page that doesn't pass an explicit title.

• Circular favicon in the Header. The orange-flame /reach-favicon.png renders before the Reach · Hub wordmark. White-bg PNG clipped to a circle with rounded-full bg-white plus a subtle mode-aware ring (slate-200 / stone-50/20 / orange-500/50) so it has definition against every header background.

• Hero right-bump on /. The hero content wraps in a md:pl-8 lg:pl-20 xl:pl-32 indent — keeps mobile flush, pulls the headline progressively to the right at larger breakpoints. Asymmetric left bias instead of edge-to-edge.

• 70vw constraint below the hero. Each of the four below-hero sections (pillars / trajectory / showcase / friendly nod) wraps content in mx-auto md:max-w-[70vw]. Mobile uses full section padding; desktop pulls into a centered column.

• Three-column Footer. Ported from sites/fullstack-vc/src/components/basics/Footer.astro. Built for → Reach (mode-aware logo). Made with ♥ on Astro & Svelte by → The Lossless Group (inlined SVG, retinted via --color-text). An Astro Knots project → Astro Knots (logo + gradient wordmark via --fx-headline-gradient). Baseline: © 2026 Reach University × The Lossless Group.

• Mode-toggle hover fix. Hover and focus-visible color swapped from --color-primary (purple-midnight #1f1646) to --color-accent (orange-saccharine #ff8300). Now visible against light, dark, and vibrant backgrounds.

The five-minute story

The rebrand

Reach Education Hub was the working name. Reach goes Lossless is the actual name — a wordplay on the Lossless Group brand and the partnership the hub serves. Changing it touched seven files: defaults in BoilerPlateHTML.astro and BaseThemeLayout.astro, page-level overrides on /, /story, /story/version-2, /brand-kit, /design-system. Brand-kit and design-system also got upgraded from a hyphen separator to the · mid-dot the rest of the chrome uses.

The favicon

The Header's left column had Reach · Hub as a wordmark. Now it has the orange-flame favicon to its left, tucked into a 28px white circle with a mode-aware ring:

<img
  src="/reach-favicon.png"
  alt=""
  aria-hidden="true"
  class="w-7 h-7 rounded-full bg-white object-cover shrink-0
         ring-1 ring-slate-200 dark:ring-stone-50/20 vibrant:ring-orange-500/50"
/>

The white circle interior is the PNG's own white background; rounded-full clips the square to a circle. The ring gives definition against the indigo-950 dark header and the black vibrant header.

The layout rhythm

The hero used to butt against the left edge of the page padding. The user's note: "too aligned left, bump it a bit right, not too much." So an asymmetric indent — md:pl-8 lg:pl-20 xl:pl-32 — pulls the hero content further right as the viewport gets wider. The headline still uses max-w-5xl so it can stretch; the indent compounds with the existing section padding.

The rest of the page got the opposite move: a max-w-[70vw] mx-auto constraint on the content column under the hero. The eye now reads:

• A wide hero that pulls right

• A narrower centered column for the substance below

• An editorial rhythm where content has room to breathe instead of fighting the page edges

The footer

We mirrored fullstack-vc's three-column footer because the partnership is the point. The columns are credits, not navigation:

• Built for → Reach University (left)

• Made with ♥ on Astro & Svelte by → The Lossless Group (center)

• An Astro Knots project → Astro Knots (right)

Mode-aware Reach mark (light SVG for light, white SVG for dark + vibrant). Inlined Lossless Group SVG so the dark wordmark text can be retinted to var(--color-text) and tracks the mode automatically — no PNG swap needed for the wordmark glyphs. Astro Knots logo plus a gradient wordmark that runs through --fx-headline-gradient (purple→teal in light, teal→teal-bright in dark, multi-stop neon in vibrant — the gradient itself is mode-aware in theme.css).

Token retokenization from fullstack → Reach:

Asset port: appIcon__Astro-Knots.svg copied from sites/fullstack-vc/public/ to sites/reach-edu-hub/public/. Reach trademarks (reach-logo.svg, reach-logo-white.svg) already existed.

BaseThemeLayout.astro now imports Footer and renders it where the placeholder comment used to live. Deck pages bypass BaseThemeLayout, so the Footer doesn't appear on /story or /story/version-2 — deck chrome stays minimal.

The hover fix

The mode toggle button was hard to see when hovered in dark and vibrant modes. The diagnosis: hover used --color-primary, which Reach's theme.css sets to --color__purple-midnight (#1f1646). On a bg-white light header that's strong contrast. On a bg-indigo-950 dark header or bg-black vibrant header, the dark purple practically vanishes.

The fix: swap --color-primary for --color-accent (#ff8300) on :hover and :focus-visible. Orange-saccharine is the Reach accent already running through every chrome surface, every v2 deck section's hover, and the Header active-state in vibrant mode. The toggle now glows in the same orange as everything else.

.theme-mode-toggle:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

Files changed

Source:

• src/components/basics/Header.astro — circular favicon before wordmark

• src/components/basics/Footer.astro — new file, ported from fullstack-vc

• src/components/ui/ModeToggle.astro — hover + focus-visible color swap

• src/layouts/BaseThemeLayout.astro — Footer wired in, default title

• src/layouts/BoilerPlateHTML.astro — default title

• src/pages/index.astro — title, hero right-bump, 70vw constraint

• src/pages/brand-kit/index.astro — title rebrand + separator upgrade

• src/pages/design-system/index.astro — title rebrand + separator upgrade

• src/pages/story/index.astro — title rebrand

• src/pages/story/version-2.astro — title rebrand

Assets:

• public/appIcon__Astro-Knots.svg — new (ported from fullstack-vc)

Documentation:

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

Reference

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

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

• Pattern source: sites/fullstack-vc/src/components/basics/Footer.astro

• Yesterday's entry: src/content/changelog/2026-05-04_02.md (the end-to-end first build)