Topic page UI/UX overhaul — visual hierarchy, affordances, intuitiveness

[AndreRobitaille]

Problem

The topic show page lacks basic visual affordances. Real-user testing confirms residents don't know what's clickable, can't distinguish actionable elements from informational text, and don't have clear visual cues about what to pay attention to or where to go next.

Specific Issues

• Links look like plain text — no underline, no button treatment, no hover cue. Users don't realize they can click through to meetings.
• Cards don't signal interactivity — "Coming Up" cards don't look clickable. No cursor change, no hover state that suggests action.
• "Recent Activity" is a flat text wall — no visual separation between entries, no emphasis on the important part (the outcome). Just stacked text.
• Vote breakdowns are tiny boxes — unclear what they are at a glance. No explanation of what the grid means.
• Sections blend together — no visual distinction between Coming Up, What's Happening, Recent Activity, and Key Decisions.
• "View meeting" links are tiny and buried — easy to miss, should be the primary call to action.
• No visual hierarchy within sections — everything has the same weight, so nothing stands out.

Goal

A resident should be able to glance at a topic page and instantly understand:

1. What this topic is about
2. What they should pay attention to right now
3. What they can click on and where it goes
4. What to do next (go to a meeting page, go back to topics, etc.)

Audience

Non-technical Two Rivers residents. People who grew up here, care about accountability, but aren't power users. Design must be intuitive without explanation.

Scope

View layer and CSS only. No model or controller changes expected.