Redesign Story Share Portal to match visual specifications

[Copilot]

What is the goal of this PR and why is this important?

Align the Story Share Portal with the provided design specifications to improve visual consistency, hierarchy, and user experience. The existing implementation lacked proper typography, color coding, and overlay styling seen in the reference designs.

How did you approach the change?

Navigation

• Restructured header into three semantic rows (site nav, focus areas, participant filters) with progressive collapse on scroll
• Applied color coding to focus area links: red (Domestic Violence), green (Social Justice), purple (Facilitator Spotlights)
• Moved search to third row alongside participant filters

Typography

• Applied Telefon Bold (existing in app/assets/fonts/) to all headings via .font-telefon class
• Set Roboto as body font via Google Fonts

Sector Sections

• Color-coded section headers matching navigation colors
• Added gradient overlays (from-black/80 via-black/40) to story images with title/organization text
• Separated each sector (DV, SJ, FS) into explicit sections to avoid Tailwind class interpolation issues

"What Others Are Reading"

• Mapped story sectors to colored badges (blue/Self-Care, purple/Facilitator Spotlights, teal/Community, pink/DV, green/SJ)
• Used actual story data instead of hardcoded categories

Performance

• Replaced inline style manipulation with CSS class toggles for scroll behavior
• Scroll handler adds/removes .scrolled class on header; CSS handles transitions

Anything else to add?

The scroll behavior uses a simple threshold (100px) to trigger nav collapse. Mobile navigation remains fully functional via hamburger menu. All Tailwind classes use explicit names to ensure proper compilation.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[maebeale]

@copilot make story_share look like the screenshot attached.

1. apply telefon font to the nav items.
2. center the various nav items so they match the picture
3. add icons in the nav for lock, search, and exit, after the donate button
4. add dropdowns with sample content to the top-level nav items
5. 2nd and 3rd row nav items should go a lighter shade on hover
6. add the sector as a blue box on top left over the hero image (see pic)
7. add the black transparent overlay with title as a bar over the bottom of the hero image
8. domestic violence, social justice, and facilitator spotlights sections should be in one row
9. add 4 linked stories below each domestic violence, social justice, and facilitator spotlights sections.
10. add "More Facilitator Spotlights Stories..." link to bottom of spotlight section
11. change "what others are reading" sections so they're right next to each other with no horizontal padding. stretch them so they're taller. make the sector names square boxes (same style as the blue box over hero) with title below, both in the middle of each of these sections.