From 66128c73d8a6b64757444b40f6935803bdf53a7a Mon Sep 17 00:00:00 2001
From: Marco Sadjadi <marco@buildmymcpserver.local>
Date: Sat, 23 May 2026 18:43:57 +0200
Subject: [PATCH] fix(web): mobile menu background via inline style (Tailwind
 v4 quirk)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tailwind v4's `bg-[--color-X]` bracket-arbitrary syntax does not wrap the
value in var(), so it compiles to `background-color: --color-bg-elevated`
— an invalid color, which the browser falls back to transparent. The
mobile menu was the one element that depended solely on this utility for
its background, so it rendered with none.

Use an inline style with explicit var() and color-mix to match the nav
bar's frosted look (var(--color-bg) at 80% + backdrop-blur).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/components/marketing-mobile-menu.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/marketing-mobile-menu.tsx b/apps/web/components/marketing-mobile-menu.tsx
index 7b1bc93..ebffe32 100644
--- a/apps/web/components/marketing-mobile-menu.tsx
+++ b/apps/web/components/marketing-mobile-menu.tsx
@@ -27,7 +27,16 @@ export function MarketingMobileMenu() {
         {open ? <X size={18} /> : <Menu size={18} />}
       </button>
       {open && (
-        <div className="absolute inset-x-0 top-12 z-40 border-b border-[--color-border] bg-[--color-bg-elevated] shadow-lg shadow-black/40">
+        <div
+          // Background via inline style: Tailwind v4's bracket-arbitrary syntax
+          // `bg-[--color-X]` emits invalid CSS (it forgets the var() wrapper),
+          // so the class compiles to `background-color: --color-bg` which the
+          // browser falls back to transparent. Inline `var()` is unambiguous.
+          className="absolute inset-x-0 top-12 z-40 border-b border-[--color-border] shadow-lg shadow-black/40 backdrop-blur-md"
+          style={{
+            backgroundColor: 'color-mix(in oklab, var(--color-bg) 80%, transparent)',
+          }}
+        >
           <nav className="mx-auto flex max-w-6xl flex-col px-6">
             {LINKS.map((l) => (
               <Link