Fix mobile hamburger menu green background making text invisible

[Copilot]

The mobile hamburger menu had a green background (#cec) that made the text completely invisible, creating a poor user experience on mobile devices. The second level of the dropdown worked correctly with proper contrast, but the first level was unusable.

Problem

The CSS rule for .navbar-inverse-collapse was setting background-color: #cec (light green) without any corresponding text color adjustments, making menu items invisible to users.

Solution

• Replaced green background with navbar theme color: Changed from #cec to var(--navbar-bg-color) (#00477d - dark blue) for consistency with the site's design system
• Added proper text styling: Set text colors using CSS variables for maintainability
• Enhanced link interactions: Added specific styling for menu links with proper variable-based colors
• Improved design system consistency: Replaced hard-coded color values with CSS variables (--navbar-text-color and --navbar-text-hover-color) following the site's established pattern

Visual Demonstration

The screenshot shows the dramatic improvement: the "BEFORE" section demonstrates how text was completely invisible on the green background, while the "AFTER" section shows clear, readable white text on the dark blue background.

Technical Changes

/* CSS Variables Added */
--navbar-text-color: #ffffff;
--navbar-text-hover-color: #cccccc;

/* Before */
.navbar-inverse-collapse {
  background-color: #cec;
}

/* After */
.navbar-inverse-collapse {
  background-color: var(--navbar-bg-color);
  color: var(--navbar-text-color);
}

.navbar-inverse-collapse a {
  color: var(--navbar-text-color) !important;
}

.navbar-inverse-collapse a:hover,
.navbar-inverse-collapse a:focus {
  color: var(--navbar-text-hover-color) !important;
}

This fix ensures the mobile navigation is accessible, maintains consistency with the overall design theme, and follows the established CSS variable pattern for better maintainability.

Fixes #42.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[litlfred]

Should you use site cas variables instead of hard coded white and #ccc @copilot

[Copilot]

Should you use site cas variables instead of hard coded white and #ccc @copilot

Good point! I've replaced the hard-coded white and #ccc values with CSS variables to follow the site's design system pattern. Added --navbar-text-color: #ffffff and --navbar-text-hover-color: #cccccc variables and updated all navbar styles to use them. This maintains the same visual appearance while improving maintainability. Changes in commit cfede8d.