fix: improve light mode panel consistency

[sahilsultane]

Summary

Improved the visual consistency between Dark Mode and Light Mode UI by enhancing the top DevCard panel styling in Light Mode. Added a subtle glassmorphism effect, improved shadows, borders, and transparency to better match the polished appearance of Dark Mode while keeping the existing functionality unchanged.

Closes #237

---

Type of Change

• Bug fix
• New feature
• Refactor (no functional change)
• UI / Design change
• Tests only
• Documentation
• Infrastructure / DevOps
• Security

---

What Changed

• Added subtle glassmorphism styling for the top DevCard panel in Light Mode

• Improved Light Mode shadows, borders, transparency, and visual depth

• Refined overall theme consistency between Dark and Light modes

• Kept all existing logic and functionality unchanged

• Updated frontend styling in:

  • apps/web/src/app.css
  • apps/web/src/routes/+page.svelte

---

How to Test

1. Start the frontend locally using pnpm --filter web dev
2. Open the application in the browser
3. Toggle between Dark Mode and Light Mode
4. Verify that the top DevCard panel in Light Mode now has improved depth, blur, transparency, and visual consistency similar to Dark Mode

---

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

Added before/after screenshots demonstrating improved Light Mode consistency and glassmorphism styling.

Before

before.devcard.mp4

After

afterdevcard.mp4

Screenshot

Before

After

---

Additional Context

This update focuses only on frontend UI styling improvements and does not modify any routing, backend logic, or application functionality.

[sahilsultane]

Hi @Harxhit ,

The PR is now clean and ready for merge. Kindly review and approve it when possible.

Also, please add the following labels for GSSoC 2026 tracking:

• gssoc
• gssoc approved
• level advance
• quality:clean

Thank you!