Improve participation flows, mobile layouts, and accessibility

[bgar324]

Scope

Implements the requested UI/UX audit fixes on top of merged PR #108. This is an intentional usability improvement, while retaining the aqua/navy identity, Poppins, real photography, people/roles, historical resources, optimized images, and public asset URLs.

Participation and content

• Mobile homepage now exposes the mission, audience, an honest published-status notice, and a real primary inquiry action. Audience choices appear immediately after the hero as visible cards.
• New /events program hub and /get-involved school, UCLA volunteer, and partner guidance. Topic-specific email inquiries are separate from the existing UCLA newsletter. No fake applications or invented deadlines.
• Future dates/enrollment status are not verified, so the completed fallback is an explicit unpublished-details notice plus the existing contact address. No CMS, backend, database, or new provider.
• Archives are explicitly dated and no longer invite current registration, waiver submission, Zoom attendance, or inert feedback collection. /resources is consistently labeled 2022. Historical documents remain available.
• Ignite presents the verified three-session January/February 2026 cohort as historical, removes undated Apply Now claims, corrects the Unity/Roblox and ML/web-development copy errors, and provides a working inquiry for the next series.

UI and accessibility

• Event shortcuts expose schedule, workshops, maps, and help. Maps precede long workshop content; workshops use readable compact native disclosures and filtering with result/empty/reset states. Verified 2026 session/time/location data and actual download format/byte sizes are shown.
• Phone audience and people lists are visible grids rather than reversed horizontal scrollers. Team selection is compact on phones, retains keyboard focus, and works at 44px in WebKit as well as Chromium/Firefox.
• Tablet-safe navigation and hero layout; navy primary actions, explicit focus-visible styles, 44px core targets, and reduced-motion handling.
• FAQs are keyboard-operable buttons with expanded state and named panels. Social links, sponsor logos, and video facades have meaningful names; keyboard video activation focuses the titled player.
• Gallery is manual, with named native controls, selected state and live status. Cached, delayed, failed and stale image events remain safe. A real cached-before-hydration race found during verification is fixed and regression-tested.
• One main landmark, skip link and shared footer; meaningful route/hash focus and preserved Back restoration. Escape dismissal also works when Safari leaves pointer focus outside an opened menu.

Discovery and tooling

• Build-time static HTML for all 15 public routes, unique titles/descriptions/canonicals, Open Graph/Twitter metadata, sitemap and robots.txt on the existing GitHub Pages setup. No hosting migration.
• Hydration handles cached images and the legacy Pages fallback. Internal team links use the generated canonical route and work without JavaScript.
• Action labels describe real inquiries/navigation; pageviews normalize static/client trailing slashes without losing query attribution.
• Contributor documentation, content checks, and durable browser tests updated. test:browser remains the fast Chromium CI gate; test:browser:all runs all three engines.

Verification

• Clean installation, strict types, lint, formatting, content checks, image checks, build and static generation passed.
• 16 unit/regression tests passed.
• 138 browser tests passed: 46 each in Chromium, Firefox and WebKit. Includes JavaScript-disabled generated content/navigation, hydration, aliases/query/hash, keyboard/focus/history, participation paths, filtering, downloads, minimum targets/contrast, manual gallery and image failure paths.
• 34 axe-core 4.13.0 WCAG A/AA page/state scenes: zero violations. Automated checks supplement manual keyboard/visual review; this is not a complete accessibility certification.
• 35 responsive visual captures across 320, 390, 768, 1024 and 1440px. At 390px, audience choices moved from ~2048px to ~915px down; 2026 maps moved from ~9091px to ~1066px; the first team portrait moved from ~620px to ~403px.
• All 102 public binary URLs and SHA-256 hashes preserved, with unchanged 404.html/CNAME. Image pipeline remains 59 sources and 86 variants.
• Independent runtime and requirement-completeness reviews approved; demonstrated issues were fixed and relevant checks rerun.

Evidence

• Machine-readable UX/verification summary
• Before on the left, after on the right: phone home, phone team, phone resources.
• Current UI canon and updated README. The PR Centralize site content and migrate to TypeScript and Tailwind #108 report is now explicitly historical.

Limits

No emails or third-party forms were submitted; link wiring does not prove email delivery or vendor playback. Future operational details must be confirmed by the organization before publishing them. Browser viewports are emulated; WebKit is not native Safari or a physical iPhone. macOS WebKit tests use its native Option+Tab link-navigation shortcut without changing OS settings. No merge, deployment, secret, or branch-protection change is included. GitHub CI status will be recorded when this PR run completes.

Final review corrections: decorative portrait alt text avoids repeated names; Alt-click retains native behavior; zero-duration collapses settle immediately. Regression coverage includes a paused-clock reduced-motion phone hash-focus check.

[bgar324]

CI passed for 2ef00ef: https://github.com/exploretech-la/website/actions/runs/34693680328 . Local verification also passed 15 regression tests and 135 browser tests across Chromium, Firefox and WebKit, plus 34 axe page/state scenes with zero violations. Before/after screenshots and the verification summary are linked in the PR. No merge or deployment performed.