From 48e6bd07125e99095fe3512558b1c262c369af8f Mon Sep 17 00:00:00 2001
From: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com>
Date: Mon, 6 Jul 2026 17:58:25 +0200
Subject: [PATCH] Align close button height exactly with the hamburger icon,
 add transparency

Measured the hamburger icon's rendered vertical position at both
breakpoints and matched the close button's top offset to it precisely
(pixel-exact at 390px and 1280px viewports). Also adds alpha to the
overlay's background gradient so the blurred page content shows
through subtly instead of being fully opaque.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 hifi-src/src/components/Navbar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/hifi-src/src/components/Navbar.jsx b/hifi-src/src/components/Navbar.jsx
index ed4b0c8..09a7e17 100644
--- a/hifi-src/src/components/Navbar.jsx
+++ b/hifi-src/src/components/Navbar.jsx
@@ -121,13 +121,13 @@ export default function Navbar() {
         createPortal(
           <div
             className="fixed inset-0 z-[100] overflow-y-auto text-left backdrop-blur-xl"
-            style={{ background: 'linear-gradient(135deg, #f1f5f9 0%, #e3f0cf 50%, #f8fafc 100%)' }}
+            style={{ background: 'linear-gradient(135deg, rgba(241,245,249,0.82) 0%, rgba(227,240,207,0.82) 50%, rgba(248,250,252,0.82) 100%)' }}
           >
             <div className="relative mx-auto flex min-h-full max-w-6xl flex-col items-start justify-center gap-5 py-24 pl-6 pr-8 sm:pl-8">
               <button
                 onClick={() => setOpen(false)}
                 aria-label="Menü schließen"
-                className="absolute left-6 top-6 flex items-center gap-2 text-neutral-600 hover:text-brand-600 sm:left-8"
+                className="absolute left-6 top-8 flex items-center gap-2 text-neutral-600 hover:text-brand-600 sm:left-8 sm:top-[65px]"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-6 w-6">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12M18 6 6 18" />