Style: BodyMaps brand alignment for home.html landing + viewer accent

[andyy-yang]

TLDR

Additive brand-alignment for visitors arriving at PanTS Viewer from thebodymaps.com: adds a sticky header, hero intro, footer, BodyMaps orange accent, and favicon to home.html (with the same accent token in the React viewer). Zero changes to any <script>, existing CSS class, React component logic, routing, or backend. Strictly visual/text additions.

Major decisions

Decision	Rationale
Edit home.html directly rather than swap it out	Production landing is home.html, not the React Homepage — confirmed by tracing navigation and reading the file. Editing in place keeps your search/filter/viewer JS intact.
Only add bm-*-prefixed CSS, never touch existing classes	Eliminates risk of unintentionally restyling any existing element. New rules can't accidentally cascade.
Swap --brand and --accent tokens at the :root instead of overriding individual elements	Cheapest way to push the new orange through .btnSearch and #inferProgressBar (the only two visible token consumers). No !important, no specificity tricks.
Apply the same token swap in PanTS-Demo/src/index.css	The React viewer (/case/<id>, /session/<id>, /reconstruction/<id>) is the only React page reachable from home.html, so matching its accent preserves continuity when visitors cross over.
Header lockup: BodyMaps logo + wordmark + single thebodymaps.com link	Minimum new chrome. No new nav items, no GitHub link added — the existing footer-area link to your repo wasn't disturbed.
Do NOT add a header to VisualizationPage	It's a tool, not a content page — adding chrome would eat real estate. Token cascade alone reaches it.
Snake-game apple color → BodyMaps orange (snake body unchanged)	Cosmetic only; the game is a loading-state amusement.

What changed

File	Change
PanTS-Demo/public/home.html	New <link rel="icon">, <title> ("PanTS Viewer · BodyMaps"), <meta description>; --brand #2a6cff → #E76F51 and --accent #febb02 → #E76F51; ~100 lines of new bm-*-prefixed CSS appended to the existing <style> block; sticky header, hero intro, and footer HTML inserted at boundaries between existing sections
PanTS-Demo/index.html (React entry)	Uncommented + repointed favicon → /logo.png; <title> matches home.html
PanTS-Demo/src/index.css	Same --brand / --accent token swap so the React viewer inherits the orange
PanTS-Demo/src/components/SnakeGame/SnakeGame.tsx	One-line cosmetic: apple bg-red-600 border-red-600 → bg-[#E76F51] border-[#E76F51]. Snake body unchanged
PanTS-Demo/public/logo.png (new)	BodyMaps mark, transparent, used as favicon
PanTS-Demo/public/logo-light.png (new)	Same mark with white bars + orange band, used on dark header

Testing

Verified correct (no change needed)

• All <script> blocks in home.html — search / filter / browse / upload / viewer JS untouched and not selected by any new CSS rule.
• All existing CSS classes (.hero, .searchRail, .recBar, .main, .filters, .viewer, .modal, …) — unmodified; new classes are all bm-*-prefixed.
• Browse-rail thumbnail click → navigates to /case/<id> (line ~2922) — unaffected by header insertion.
• Upload + Inference flow — #inferenceSection JS untouched; only inherits orange progress-bar color via the --brand token.
• Viewer modal, Report modal, Preparing-data overlay, Advanced filters sidebar — untouched.
• React routing (/case/<id>, /session/<id>, /reconstruction/<id>) — no changes; backend (flask-server/) — no changes.
• package.json — no new dependencies.

Edge cases / robustness

• Sticky header (position: sticky; top: 0; z-index: 100) overlays nothing at scroll; the existing .hero search row scrolls naturally under it.
• All new bm-* rules consume existing tokens (var(--brand), var(--ink), var(--sub), var(--line)) so they inherit your dark palette. Only one new hardcoded color — #08111e for header/footer background, one shade deeper than --bg for separation.
• Logo PNGs are transparent so they composite cleanly on both light tabs (favicon) and dark headers (logo-light.png with white bars).
• Snake game still functional; only the food cell's bg/border color string changed.

Lower-severity deferred (not in this PR)

• .chip.active uses hardcoded #6ea8ff (a light blue) for its outline — slightly out of tune with the new orange. Touching it means editing an existing class, so left for a separate follow-up if desired.
• Pre-existing init race on VisualizationPage: toggleCrosshairTool(true) fires before the Cornerstone tool group is created by renderVisualization, so the first Crosshair-Mode click silently no-ops. Unrelated to brand alignment; happy to file separately if helpful.

Out of scope

• Any <script> block in any file
• Any existing CSS class (only new bm-* rules added)
• Any React component logic except the one SnakeGame color line
• Backend (flask-server/), routing, hooks, contexts, helpers, types
• package.json and dependencies
• The two "deferred" items above

Test plan for reviewers

cd PanTS-Demo
npm install
npm run dev

• Open http://localhost:5173/home.html — sticky header with BodyMaps logo + wordmark + thebodymaps.com link
• Hero intro section above the existing upload panel (eyebrow + H1 with orange "PanTS" + lead)
• Tab title reads PanTS Viewer · BodyMaps, favicon shows BodyMaps mark
• Search button rendered in BodyMaps orange (#E76F51)
• Upload progress bar (after selecting a file) — orange
• Browse rail thumbnails clickable → /case/<id> (production behavior unchanged)
• Advanced filter panels expand, chips select/deselect, sort dropdown changes order
• Footer at the very bottom with attribution + link to thebodymaps.com
• Navigate to http://localhost:5173/case/1 (loads from HuggingFace, no Flask backend needed) — tab favicon + title match home.html; any UI elements using var(--brand) are orange
• No console errors in DevTools

Notes

This PR is additive only and easy to drop or narrow:

• Drop the attribution footer
• Restrict scope to color tokens only (no header / hero / footer)
• Flag-gate the branding so it's off by default
• Adjust wording, sizing, link target, or strip the "BodyMaps" label from the header

Happy to iterate or close — whatever fits the upstream direction.

Thanks for building PanTS Viewer — really nice example of how an academic imaging tool can be made approachable to a wider audience. Pleasure to contribute even this small a piece.

[vercel]

Someone is attempting to deploy a commit to the eireawerawer's projects Team on Vercel.

A member of the Team first needs to authorize it.