The mobile menu knows which colour belongs to which service

On screens below 640 pixels, a hamburger button appears in the top left corner. Tap it and a navigation panel drops down with links to all six sections — Software, Accessibility, Audio, Production, Musician, and Notes. Each link has an icon next to it. Each icon is rendered in that service's accent colour. Purple for software. Fuchsia for accessibility. Cyan for audio. Emerald for production. Orange for musician. Pink for notes. The colours are not hardcoded once — each nav item stores a dark variant and a light variant. The MobileNav component reads the current theme using the useTheme hook and picks the right shade. Switch to light mode and the icons shift from -400 to -600 and -700 shades so they still pass contrast requirements on the lighter background. The menu button is a fixed-position element with a z-index high enough to sit above everything on the page. It is exactly 44 by 44 pixels — the WCAG minimum touch target. The aria-label switches between Open menu and Close menu depending on state. The aria-expanded attribute tracks whether the panel is visible. When the menu opens, a semi-transparent backdrop covers the full viewport. Tapping the backdrop closes the menu. The backdrop is aria-hidden because it is purely decorative — screen readers interact with the menu through the button, not the overlay. Every link in the panel has a 44-pixel minimum hit area through vertical padding. Tapping any link closes the menu before navigation. The whole component is seventy-five lines of code, handles two themes, six colour pairs, and full keyboard and screen reader accessibility.