feat(career-guides): Redesign singular guide as hashflag detail view

[jeromehardaway]

Summary

• Replaces the per-MOS detail page at /career-guides/[mos] with an editorial layout that matches the visual design of the redesigned index page (see feat(career-guides): Redesign as searchable hashflag index #1125).
• New container at src/containers/career-guide-detail/ composed of: status bar (LIVE pulse), fixed-right anchor nav with scroll-spy, editorial hero (display H1 + summary card + 5-cell stat strip), and 7 numbered sections — Tech Roles (filter + expand), Skill Bridge (have/learn + VWC fit card), Pathways grid (5-col), Strengths grid (5-col), Non-Obvious Matches (2-col), Training (3-col academy/topics/certs with IntersectionObserver-animated progress bars), Systems Table (full-width), and a translator CTA band with grid backdrop.
• New buildDetail helper (src/containers/career-guide-detail/derive.ts) derives summary fields (top match, salary band, demand, tech-match score, doc ID), stats, family, and rank from the existing training-pipeline / career-pathways / cognitive-skills / tech-pathways data — no new data files needed.
• Implements the design_handoff_singular_career_guide prototype adapted to our brand system: VWC navy/red/gold tokens (not the prototype's slight variants), GothamPro + Gilroy fonts (not Geist), 0 border radius (not 2px), reused Layout01 Header/Footer (drops the prototype's own nav/footer), signature 16×2px red eyebrow bar on every section title.

Design decisions

• Anchor nav hides below xl breakpoint — same constraint the handoff specified at 1180px.
• Cert progress bars use IntersectionObserver with threshold: 0.3 and 600ms ease-out fill, matching the handoff timing.
• Title's last word becomes the gold-accent word (e.g. "Security Forces Specialist."); generalized for any MOS.
• Family (e.g., "Operations · Security") and DOMAIN_FOR system bucket are regex-derived heuristics — a curated mapping JSON would be more accurate as a follow-up.
• Tech match score formula is (weighted_avg × 10).toFixed(1) where high=1.0 / good=0.7 / moderate=0.45 — placeholder until a real validated formula exists.
• Page background is set via layout.bodyClass: \"tw-bg-secondary\" so the dark navy extends edge-to-edge.

Known follow-ups

• Family/rank/domain detection regex will misbucket some rows — replace with curated maps.
• Tech match score formula is placeholder.
• This PR is independent of feat(career-guides): Redesign as searchable hashflag index #1125 (the index redesign) and can land in either order.

Test plan

• /career-guides/11b and /career-guides/3p0x1 render with 200 status; all 8 anchors resolve to sections
• Status bar LIVE dot pulses; summary card gold dot pulses
• Right-rail anchor nav: scroll the page, watch the active dash grow to 32px gold; click a label, page smooth-scrolls
• Tech roles: click a row → expands with stack chips; click again → collapses; track filter chips reduce the list
• Skill bridge: "Already have" numbered list renders left, "To learn" gold-`+` chips right with VWC fit card
• Pathways grid: 5 cards on desktop, each shows `P.0X`, salary, match, demand bars, skills-to-develop list
• Strengths grid: 5 cards on desktop, each with `S.0X` (gold), militaryContext, "Transfers to" footer
• Training section: cert progress bars start at 0% and animate to their `data-fill` value when scrolled into view
• Systems table: hover row → bg lifts to `#0c2549`; domain column shows gold mono labels
• CTA band: gold "Translate {code} →" + outline "Apply" + ghost "Browse all guides"; grid backdrop fades with radial mask
• Below `xl`: anchor nav hidden, hero stacks to single column, stat strip + grids collapse to 2 cols, then 1 col below `sm`

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vets-who-code-app	Ready	Preview, Comment	May 18, 2026 2:00am