UI refinements: nav legibility, hover states, card polish

[zowskyy]

Summary

• Nav links: were using color: var(--paper) (white fill) with a black stroke — effectively invisible on the white background. Fixed to solid var(--ink) with a wash/border hover and full-ink active state.
• Nav hamburger + drawer: same outlined-text fix, plus matching hover states (ink fill invert on hamburger, wash highlight on drawer items).
• Secondary .btn: inverts to ink background on hover so the affordance is clear.
• Input fields: upgraded from faint var(--line) border to a crisp 1.5px solid var(--ink) border; focus now shows a 3px 3px 0 offset box-shadow instead of the default browser outline.
• Splash cards / steps: h3 and .splash-step-label at 1.25–1.3rem were using the outlined graffiti style (white fill, black stroke) — illegible at that size. Changed to solid var(--ink).
• Cards and explore list: borders upgraded to 1.5px solid var(--ink), hover adds a 3px 3px 0 box-shadow for consistent depth language across the page.

---

Generated by Claude Code

Summary by CodeRabbit

• Style
  • Refined form fields with clearer borders, paper-toned backgrounds, and improved focus states.
  • Added smoother hover and active feedback to navigation controls, menus, buttons, and cards.
  • Updated home-page and splash-screen cards for a more consistent visual appearance.
  • Replaced outlined text styling with solid, higher-contrast text in key controls and headings.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 67d5fa92-6458-4ab5-a2d8-403597ffe9b0

📥 Commits

Reviewing files that changed from the base of the PR and between e625646 and e78f2a7.

📒 Files selected for processing (1)

• app/src/app/globals.css

---

📝 Walkthrough

Walkthrough

The global stylesheet updates form controls, buttons, navigation controls, and homepage cards. The changes add stronger borders, focus and hover feedback, active states, transitions, and solid ink-colored text.

Changes

Visual styling updates

Layer / File(s)	Summary
Form and button styling app/src/app/globals.css	Form fields use stronger ink borders, paper backgrounds, and ink focus shadows. Secondary buttons use ink backgrounds with paper text on hover.
Navigation interaction styling app/src/app/globals.css	Top-bar controls, the mobile hamburger, and navigation drawer controls use solid ink text with hover, active, transition, and accent-wash states.
Homepage card styling app/src/app/globals.css	Explore items and splash cards use stronger borders, hover shadows, and solid ink text for labels and feature headings.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: claude

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/ui-refinement-gj9zau

---

_{Comment @coderabbitai help to get the list of available commands.}