Add glassy effects to tabs, navbar buttons, and active sidebar pages with light blue theme

[devin-ai-integration]

Add glassy effects to tabs, navbar buttons, and active sidebar pages with light blue theme

Summary

This PR implements a water-themed design with glassy visual effects for the Fern documentation site:

• Light blue background: Changed the light theme background from white to a soft blue (#E8F4F8) to create a water theme aesthetic
• Scroll-based header animation: Added a CSS scroll-driven animation that fades the header background from transparent to semi-transparent as the user scrolls
• Glassy effects on active elements: Applied backdrop-filter blur and semi-transparent backgrounds to:
  • Active tabs in the header
  • Active navbar buttons
  • Active/selected sidebar pages
• Dark mode support: All glassy effects include dark mode variants with appropriate opacity adjustments

Review & Testing Checklist for Human

⚠️ Risk Level: YELLOW - Visual changes that need manual verification

• Verify CSS selectors are correct: The selectors I used (e.g., [data-state="active"], [aria-current="page"], .fern-sidebar-link.active) are based on common patterns but haven't been verified against the actual DOM. Please check that the glassy effects actually appear on active tabs, navbar buttons, and sidebar items.
• Test scroll animation browser compatibility: The animation-timeline: scroll() property is relatively new and may not work in all browsers (Safari support is limited). Test in Chrome, Firefox, and Safari.
• Visual QA in both themes: Check that the light blue background and glassy effects look good in both light and dark modes. Verify adequate contrast and readability.
• Test across different pages: Navigate through various documentation pages to ensure the glassy effects consistently appear on the correct active elements.

Test Plan

1. Run fern docs dev locally
2. Navigate through different pages and tabs
3. Scroll down pages to see the header background fade animation
4. Switch between light and dark modes
5. Verify active tabs, navbar buttons, and sidebar items have the glassy effect

Notes

• The glassy effect uses backdrop-filter: blur(10px) which creates a frosted glass appearance
• The light blue color (#E8F4F8) was chosen to evoke a water theme as requested
• All effects use CSS transitions for smooth visual changes

---

Link to Devin run: https://app.devin.ai/sessions/cd152bf708d44aa79cccf09d2401b60c
Requested by: [email protected] (@jon-fern)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[github-actions]

🌿 Preview your docs: https://fern-preview-d6d0b9b9-8478-493e-a994-8b90e8861ae8.docs.buildwithfern.com/learn