fix: improve feature card readability and contrast (#319)

[Jai-Shankar1033]

Summary

Improves the readability and accessibility of feature cards on the landing page.
Fixes low text contrast, missing base styles, and light/dark theme inconsistencies
in the new React architecture.
Closes #319

---

Type of Change

• Bug fix
• UI / Design change

---

What Changed

• Added position: relative and overflow: hidden to .feature-card base styles
• Added explicit color: var(--text-primary) on .feature-card h3 for reliable heading contrast
• Added .feature-card p with font-size: 0.97rem and line-height: 1.75 for better readability
• Dark mode WCAG AAA contrast — headings #f1f5f9, body text #cbd5e1
• Light mode explicit colors — headings #0f172a, body text #475569
• Enhanced card border visibility in both themes
• Improved box-shadow depth for card separation from background
• Added gradient top accent border on hover via ::before pseudo-element
• Premium icon wrapper with indigo background and border
• Added background 0.35s ease for smooth theme switching transition

---

How to Test

1. Run cd apps/web && pnpm dev and open http://localhost:5173
2. Scroll to feature cards — verify text is clearly readable in dark mode
3. Click theme toggle — verify cards display correctly in light mode
4. Hover over cards — verify smooth lift + indigo border glow animation

---

Checklist

• My code follows the project's coding style (pnpm -r run lint passes).
• TypeScript compiles without errors (pnpm -r run typecheck).
• I have added or updated tests for the changes I made.
• All tests pass locally (pnpm -r run test).
• I have updated documentation where necessary.
• No new console.log or debug statements left in the code.
• Breaking changes are documented in this PR description.

---

Screenshots / Recordings

---

Additional Context

This is a re-implementation of PR #405 which was closed because the project
migrated from SvelteKit to React. All contrast ratios now meet WCAG AA/AAA
standards in both light and dark themes.

[vercel]

@Jai-Shankar1033 is attempting to deploy a commit to the Prashantkumar Khatri's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

CI — Checks Failed

Backend — SKIP

Check	Result
Lint	-
Test	-
Typecheck	-

Mobile — SKIP

Check	Result
Lint	-
Test	-

Web — FAIL

Check	Result
Check	FAIL
Build	PASS

---

Last updated: Sun, 07 Jun 2026 09:59:32 GMT