fixed issue:Add Glassmorphic Effect to Navbar

[cheshtagarg28]

Pull Request

Fixes # 727

Description
This pull request overhauls the site's main header, replacing the previous solid-color background with a modern glassmorphism effect. The new navbar is semi-transparent with a background blur, providing a sense of depth and a more premium aesthetic.

Crucially, this implementation is fully theme-aware. The navbar's appearance dynamically adapts to both light and dark modes, ensuring a consistent and visually appealing experience for all users.

The Problem
The previous navbar had a solid background color. While clean, it looked dated and visually disconnected from the content below it, especially on pages with background images or gradients. It also did not adapt its style between light and dark themes.

The Solution
The solution involves a pure CSS implementation that leverages backdrop-filter for the blur effect and CSS variables for robust theming.
Glassmorphism Effect: The header element now uses a semi-transparent rgba() background color combined with backdrop-filter: blur().
Dynamic Theming: We introduced new CSS variables (--navbar-bg, --navbar-border) that are defined in :root for the default (light) theme and overridden in the body.dark scope for the dark theme.
Refactoring: The header styles were updated to use these new variables instead of hard-coded values, making the component adaptive and easier to maintain.

Type of change

• Bug fix
• New feature
• Breaking change
• Documentation update

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules