From 2019f56f2785e045b16f1a7786cfbb14f19be547 Mon Sep 17 00:00:00 2001
From: defiQUG <defi@defi-oracle.io>
Date: Tue, 26 May 2026 20:35:59 -0700
Subject: [PATCH] fix(brand): enlarge nav logo and header rhythm on desktop

Scale logo to 4rem from lg breakpoint, add nav min-height and lg py-4
so the wordmark reads better without crowding mobile controls.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/Navigation.tsx |  2 +-
 src/index.css                 | 39 ++++++++++++++++++++++++++++-------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index bb9e902..262111b 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -35,7 +35,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
 
   return (
     <>
-      <nav className="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8" role="navigation" aria-label="Main navigation">
+      <nav className="mim-site-nav mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8 lg:py-4" role="navigation" aria-label="Main navigation">
         <div className="flex items-center gap-3">
           <a
             href="#/"
diff --git a/src/index.css b/src/index.css
index c9e08f1..1bc77c3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -85,32 +85,42 @@
     object-fit: contain;
   }
 
-  /* Mobile-first; larger on tablet/desktop */
+  /* Mobile-first; scale up on tablet/desktop (square asset: height drives width) */
   .logo-mark--nav {
-    height: 2.125rem;
+    height: 2.25rem;
   }
 
   .logo-mark--nav .logo-mark__img {
     height: 100%;
     width: auto;
-    max-width: 8.75rem;
+    max-width: 9rem;
+    object-position: center;
   }
 
   @media (min-width: 640px) {
     .logo-mark--nav {
-      height: 2.75rem;
+      height: 3rem;
     }
     .logo-mark--nav .logo-mark__img {
-      max-width: 10.5rem;
+      max-width: 11rem;
     }
   }
 
   @media (min-width: 1024px) {
     .logo-mark--nav {
-      height: 3.25rem;
+      height: 4rem;
     }
     .logo-mark--nav .logo-mark__img {
-      max-width: 12rem;
+      max-width: 14rem;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .logo-mark--nav {
+      height: 4.25rem;
+    }
+    .logo-mark--nav .logo-mark__img {
+      max-width: 15.5rem;
     }
   }
 
@@ -159,11 +169,24 @@
   .nav-brand-link {
     display: inline-flex;
     align-items: center;
-    padding: 0.125rem 0.25rem;
+    flex-shrink: 0;
+    padding: 0.125rem 0.375rem 0.125rem 0;
+    margin-right: 0.25rem;
     border-radius: 0.5rem;
     transition: opacity 0.2s ease;
   }
 
+  /* Keep logo column aligned with max-w-7xl page grid (matches hero px) */
+  .mim-site-nav {
+    align-items: center;
+  }
+
+  @media (min-width: 1024px) {
+    .mim-site-nav {
+      min-height: 4.5rem;
+    }
+  }
+
   .nav-brand-link:hover {
     opacity: 0.9;
   }