From b096a79573fd04dbf5c3daee166adad7eed49f64 Mon Sep 17 00:00:00 2001
From: defiQUG <defi@defi-oracle.io>
Date: Wed, 27 May 2026 13:28:41 -0700
Subject: [PATCH] Fix light/dark and responsive layout across mobile, tablet,
 and desktop.

Sync theme toggle with html.dark body styles; Tailwind dark: on nav/footer; tablet uses hamburger until lg; symbol logo in dark mode; mobile menu scroll and contrast; cookie/donate FAB spacing.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 public/brand/MIM4U-Brand-Kit.zip         | Bin 2834127 -> 2834127 bytes
 src/App.tsx                              |  12 +--
 src/components/Footer.tsx                |  26 +++---
 src/components/Navigation.tsx            |  26 +++---
 src/components/ui/LogoMark.tsx           |   4 +-
 src/index.css                            | 102 +++++++++--------------
 src/pages/foundation/FoundationPages.tsx |   2 +-
 7 files changed, 72 insertions(+), 100 deletions(-)

diff --git a/public/brand/MIM4U-Brand-Kit.zip b/public/brand/MIM4U-Brand-Kit.zip
index 8d1bb531db96c27f93ff607aeaae586807a29259..ef68fea3b2336c8fd0354679a385be8433afc24f 100644
GIT binary patch
delta 1070
zcmZ{iOK1~O6o&6Sns-cMV^W(*bn>#v4OP^(NhT8n>&9X=#1Ir)5v5=YRuQ_83Xv{m
z;X;elS!F3v5J9kBAv<lU7;6Y9g4=*Xcg3xOCwDqYYIO0<;y;i7%(<uj`#Dnw?B^yp
z-i;74Aq7{L?GeLN(=&Uk`7-&F;TGqrkA~TZ@nhaQyP5YYQj{f9l-nqoEl`0F#MSr`
zGi0nm!r8o672b&<vbe+~?X6msJY-_KW0qy+S(wINuXbYO`zjN>No8x4)k?rq_uDLK
zp$ZqLqkxl=sc--f^Z^EvsTfyQXxitDDb}8tmrV*Un*j@8CA@4~8>DHqqOIMH{3_Za
zr>Gn*+Y)V)V%eq?%XVN7-~gO}3)l<v18!g+;337bcj6Uy7ykN5ZXjZWb<veIasx^u
zw;vb;e1HJ>fdFuTG;#;!Z?w#n5TmpVevf1m;=KnLx?S>J+c>#pKxov1kQE7N=E}nL
ztMfO8;ZrzoM%<1O*{X`Xkv7_XD~5G{0xu%5RKB?0k+p|<x-J&_TCvA9u{|+K)Wokc
ztuUB_ZCR@*n1lDnX{>ps6H^?MLE@MUeJRn<k58eX?yorOAs`GyfGBVX7y@F%S&y4$
zI5<1iH-ck^X?l3%^av&_Rrw@7#!fZW?G*OY$GHFk2Zy1aNMTRc4ZcX?Q4VhKZ{3i>
zW4bQT4wrkBH$93gjgz{IRyCJ~K0CgeveuImkZ`(_)4GE@5=;xv)0#@4o2g6q_--YV
z!H0E4|D#szLIxlGm;T{DdO+@Yb@#d5rE4?1?@|0&d_?yW=;G(Ic#NH<i|<#fS?vA;
DorY)H

delta 1066
zcmZ{iOK1~O6o&82o#xRdCeb?9CXG&BZE`~uwQXJ#1a)C+ivdGW1QDf>3RV!h5Em(3
z%)*5hsk7?Rwt@&!>#cF8Efs?f0YwnHvM6*XZWTQDPF}UR_-65+$A9jeWBhq47=ZKq
z2$nh#LN=6KD9<{>md&C(u~~ec_$6SvTz=RuhONWX^2F%0tfeC&O-JxX$=(hX2tizr
z%?N$gvyd=Ul6Bu(B}nhi2ni>v)#(Evx--^3D?ADD*vpk>jDBAc0=Kx_5fRN2@T~iN
zD4C%}9OI*ala^V;fCRJw7MfYK&du?(PZ?XZF|nlDG)c7s?LY^WRL5F3PpcFhjc)XJ
z!4W=#S7GGPyd!QMF`uIq<{f|&*aNr#H{b#G0{ehYU_T(!!u)}e7re#eTvyn7uJ+5S
zxh}1mI|y_GUcd+R0Dj;Qt>zA^UwN4)u0(hlJdbAM%JhBmYPo#bdwt{7wgsU<8KDm3
zL*rMciq|G@_QNNC!HzKOh3$rJzg8qGZ}jtx5~}-C*hpIB@}>2rY%XePUCFnx*rSTl
zn3%>Z$`_SaSnPp@Y*ys$fqSPhjHQ1Yg;>p7bBzV4Yb^M=#6v$m1_O<d+X!lIBLswj
z2+#}k0a5BUVzzOdSt#q?0TQ)r!QpKc>F@xdB8Fqsr35*S;T-joN#f&6yT}x{45r8}
zNBAs31~DArzq%z!hU&W6;mR&$b(i8vkwo3ath$kcJ~dxcS=*7rF2|oHDGZlmPRo=#
zX_yucp{W>Ya-ylQ{}|4YBW#DQle5~X3^`WMtiP1$@BgFw)uvZ#{_Pgs$Jg_YDK$q^
X>B*9#O@-}aGE0WUt)jk^CB1(E;iGAE

diff --git a/src/App.tsx b/src/App.tsx
index f3a0095..67a0be8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4336,7 +4336,7 @@ function BackgroundDecor() {
 
 function StickyDonate() {
   return (
-    <div className="fixed bottom-4 right-4 z-50 md:hidden">
+    <div className="fixed bottom-4 left-4 z-40 lg:hidden">
       <a
         href="#/donate"
         className="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow-lg shadow-primary-500/25 transition hover:scale-105"
@@ -4366,8 +4366,8 @@ function CookieBanner() {
   if (!show) return null
 
   return (
-    <div className="fixed bottom-4 left-4 right-4 z-50 card p-4 md:max-w-md md:right-auto" role="dialog" aria-label="Cookie consent">
-      <p className="text-sm">
+    <div className="fixed bottom-20 left-4 right-4 z-40 card p-4 sm:bottom-4 md:max-w-md md:right-auto lg:bottom-4" role="dialog" aria-label="Cookie consent">
+      <p className="text-sm text-neutral-700 dark:text-neutral-200">
         We use cookies to improve your experience. By continuing, you agree to our{' '}
         <a href="#/legal" className="underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 rounded">cookie policy</a>.
       </p>
@@ -4435,11 +4435,7 @@ function AppContent() {
   }, [])
 
   useEffect(() => {
-    if (darkMode) {
-      document.documentElement.classList.add('dark')
-    } else {
-      document.documentElement.classList.remove('dark')
-    }
+    document.documentElement.classList.toggle('dark', darkMode)
     localStorage.setItem('darkMode', darkMode.toString())
   }, [darkMode])
 
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5bb289d..eecaa7b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -37,22 +37,22 @@ export function Footer() {
             <h3 className="font-semibold">Get Involved</h3>
             <ul className="mt-4 space-y-2 text-sm">
               <li>
-                <a href="#/donate" className="navlink">
+                <a href="#/donate" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Donate
                 </a>
               </li>
               <li>
-                <a href="#/volunteers" className="navlink">
+                <a href="#/volunteers" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Volunteer
                 </a>
               </li>
               <li>
-                <a href="#/events" className="navlink">
+                <a href="#/events" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Community Events
                 </a>
               </li>
               <li>
-                <a href="#/stories" className="navlink">
+                <a href="#/stories" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Stories of Hope
                 </a>
               </li>
@@ -63,22 +63,22 @@ export function Footer() {
             <h3 className="font-semibold">About</h3>
             <ul className="mt-4 space-y-2 text-sm">
               <li>
-                <a href="#/about" className="navlink">
+                <a href="#/about" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   About Us
                 </a>
               </li>
               <li>
-                <a href="#/mission" className="navlink">
+                <a href="#/mission" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Our Mission
                 </a>
               </li>
               <li>
-                <a href="#/what-we-do" className="navlink">
+                <a href="#/what-we-do" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   What We Do
                 </a>
               </li>
               <li>
-                <a href="#/contact" className="navlink">
+                <a href="#/contact" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Contact Us
                 </a>
               </li>
@@ -89,27 +89,27 @@ export function Footer() {
                 </a>
               </li>
               <li>
-                <a href="#/request-assistance" className="navlink">
+                <a href="#/request-assistance" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Request assistance
                 </a>
               </li>
               <li>
-                <a href="#/legal" className="navlink">
+                <a href="#/legal" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Legal & Policies
                 </a>
               </li>
               <li>
-                <a href="#/brand" className="navlink">
+                <a href="#/brand" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Brand assets
                 </a>
               </li>
               <li>
-                <a href="#/portals" className="navlink">
+                <a href="#/portals" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Staff & partner portals
                 </a>
               </li>
               <li>
-                <a href="#/sponsors" className="navlink">
+                <a href="#/sponsors" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Corporate partnerships
                 </a>
               </li>
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 26d6e0c..634b908 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -25,7 +25,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
   }
 
   const navLinkClass =
-    'navlink focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded text-sm lg:text-[0.9375rem]'
+    'navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded text-sm xl:text-[0.9375rem] whitespace-nowrap'
 
   return (
     <>
@@ -42,7 +42,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
           <LogoMark variant="nav" />
         </a>
 
-        <div className="hidden items-center gap-3 md:flex lg:gap-4 xl:gap-5">
+        <div className="hidden items-center gap-2 lg:flex lg:gap-3 xl:gap-4">
           {NAV_LINKS.map((link) => (
             <a
               key={link.href}
@@ -60,7 +60,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
           ))}
         </div>
 
-        <div className="hidden items-center gap-3 md:flex">
+        <div className="hidden items-center gap-3 lg:flex">
           <Magnetic>
             <a
               href="#/donate"
@@ -85,7 +85,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
           </button>
         </div>
 
-        <div className="flex items-center gap-2 md:hidden">
+        <div className="flex items-center gap-2 lg:hidden">
           <Magnetic>
             <a
               href="#/donate"
@@ -116,36 +116,36 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
 
       <motion.div
         id="mobile-menu"
-        className="md:hidden"
+        className="lg:hidden"
         initial={false}
         animate={{ height: mobileMenuOpen ? 'auto' : 0, opacity: mobileMenuOpen ? 1 : 0 }}
         transition={{ duration: 0.2 }}
         style={{ overflow: 'hidden' }}
       >
-        <div className="border-t border-secondary-200/50 bg-[var(--mim-cream)]/95 px-4 py-3 backdrop-blur dark:border-white/10 dark:bg-black/90">
-          <div className="space-y-1">
-            <a className="block rounded py-2 text-sm font-medium" href="#/">
+        <div className="border-t border-secondary-200/50 bg-[var(--mim-cream)]/95 px-4 py-3 backdrop-blur dark:border-white/10 dark:bg-neutral-950/95">
+          <div className="max-h-[min(70vh,28rem)] space-y-1 overflow-y-auto overscroll-contain">
+            <a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/">
               Home
             </a>
             {NAV_LINKS.map((link) => (
               <a
                 key={link.href}
-                className="block rounded py-2 text-sm font-medium focus-visible:ring-2 focus-visible:ring-primary-500"
+                className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100 focus-visible:ring-2 focus-visible:ring-primary-500"
                 href={link.href}
               >
                 {link.label}
               </a>
             ))}
-            <a className="block rounded py-2 text-sm font-medium" href="#/donate">
+            <a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/donate">
               Donate
             </a>
-            <a className="block rounded py-2 text-sm font-medium" href="#/request-assistance">
+            <a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/request-assistance">
               Request assistance
             </a>
-            <a className="block rounded py-2 text-sm font-medium" href="#/portals">
+            <a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/portals">
               Portals
             </a>
-            <a className="block rounded py-2 text-sm font-medium" href="#/sponsors">
+            <a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/sponsors">
               Partner with us
             </a>
           </div>
diff --git a/src/components/ui/LogoMark.tsx b/src/components/ui/LogoMark.tsx
index d2e4d98..59bfc06 100644
--- a/src/components/ui/LogoMark.tsx
+++ b/src/components/ui/LogoMark.tsx
@@ -25,7 +25,7 @@ export function LogoMark({ variant = 'nav', className = '' }: LogoMarkProps) {
         <img
           src={BRAND.symbolSvg}
           alt=""
-          className="logo-mark__img logo-mark__img--symbol md:hidden"
+          className="logo-mark__img logo-mark__img--symbol block lg:hidden dark:block dark:lg:block"
           width={100}
           height={99}
           decoding="async"
@@ -34,7 +34,7 @@ export function LogoMark({ variant = 'nav', className = '' }: LogoMarkProps) {
         <img
           src={BRAND.horizontal}
           alt=""
-          className="logo-mark__img logo-mark__img--horizontal hidden md:block"
+          className="logo-mark__img logo-mark__img--horizontal hidden lg:block dark:hidden"
           width={1024}
           height={354}
           decoding="async"
diff --git a/src/index.css b/src/index.css
index f9b6fdd..56b0cf2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -62,8 +62,7 @@
     background-attachment: fixed;
   }
 
-  .dark body,
-  body.dark {
+  html.dark body {
     background: #0a0f0e;
     background-image: none;
   }
@@ -217,7 +216,7 @@
     align-items: center;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 1024px) {
     .mim-site-nav {
       min-height: 4.5rem;
       padding-top: 0.375rem;
@@ -251,10 +250,8 @@
     max-width: 20rem;
   }
 
-  @media (prefers-color-scheme: dark) {
-    .footer-brand-block .footer-tagline {
-      color: #d4d4d8;
-    }
+  .dark .footer-brand-block .footer-tagline {
+    color: #d4d4d8;
   }
 
   .btn-primary {
@@ -323,16 +320,14 @@
     outline: 2px solid var(--mim-brand-green);
     outline-offset: 2px;
   }
-  @media (prefers-color-scheme: dark) {
-    .btn-secondary {
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      background-color: rgba(255, 255, 255, 0.1);
-      color: #e5e5e5;
-    }
-    .btn-secondary:hover {
-      background-color: rgba(255, 255, 255, 0.2);
-      border-color: var(--mim-brand-gold);
-    }
+  .dark .btn-secondary {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #e5e5e5;
+  }
+  .dark .btn-secondary:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: var(--mim-brand-gold);
   }
 
   .btn-white {
@@ -364,20 +359,8 @@
   .navlink {
     font-size: 0.875rem;
     font-weight: 500;
-    color: #52525b;
     transition: color 0.2s;
   }
-  .navlink:hover {
-    color: var(--mim-brand-green);
-  }
-  @media (prefers-color-scheme: dark) {
-    .navlink {
-      color: #d4d4d8;
-    }
-    .navlink:hover {
-      color: var(--mim-brand-gold-bright);
-    }
-  }
 
   .input-field {
     width: 100%;
@@ -402,15 +385,13 @@
     outline: 2px solid var(--mim-brand-green);
     outline-offset: 2px;
   }
-  @media (prefers-color-scheme: dark) {
-    .input-field {
-      border: 1px solid #4b5563;
-      background-color: #1f2937;
-      color: #f3f4f6;
-    }
-    .input-field:focus {
-      border-color: var(--mim-brand-gold);
-    }
+  .dark .input-field {
+    border: 1px solid #4b5563;
+    background-color: #1f2937;
+    color: #f3f4f6;
+  }
+  .dark .input-field:focus {
+    border-color: var(--mim-brand-gold);
   }
 
   .line-clamp-2 {
@@ -449,14 +430,16 @@
     outline: 2px solid var(--mim-brand-green);
     outline-offset: 2px;
   }
-  @media (prefers-color-scheme: dark) {
-    .input {
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-    .input:focus {
-      border-color: var(--mim-brand-gold);
-    }
+  .dark .input {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #f3f4f6;
+  }
+  .dark .input::placeholder {
+    color: #9ca3af;
+  }
+  .dark .input:focus {
+    border-color: var(--mim-brand-gold);
   }
 
   .card {
@@ -467,11 +450,10 @@
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(8px);
   }
-  @media (prefers-color-scheme: dark) {
-    .card {
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      background-color: rgba(255, 255, 255, 0.05);
-    }
+  .dark .card {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.05);
+    color: #e5e5e5;
   }
 
   .card-hover {
@@ -496,10 +478,8 @@
     color: var(--mim-brand-gold);
     font-weight: 600;
   }
-  @media (prefers-color-scheme: dark) {
-    .section-eyebrow {
-      color: var(--mim-brand-gold-bright);
-    }
+  .dark .section-eyebrow {
+    color: var(--mim-brand-gold-bright);
   }
 
   .section-title {
@@ -517,10 +497,8 @@
       line-height: 2.5rem;
     }
   }
-  @media (prefers-color-scheme: dark) {
-    .section-title {
-      color: #f4f4f5;
-    }
+  .dark .section-title {
+    color: #f4f4f5;
   }
 
   .section-subtitle {
@@ -528,10 +506,8 @@
     font-size: 1.125rem;
     color: #52525b;
   }
-  @media (prefers-color-scheme: dark) {
-    .section-subtitle {
-      color: #d4d4d8;
-    }
+  .dark .section-subtitle {
+    color: #d4d4d8;
   }
 }
 
diff --git a/src/pages/foundation/FoundationPages.tsx b/src/pages/foundation/FoundationPages.tsx
index 4d6538c..122faae 100644
--- a/src/pages/foundation/FoundationPages.tsx
+++ b/src/pages/foundation/FoundationPages.tsx
@@ -28,7 +28,7 @@ function PageIntro({
   return (
     <div className="foundation-page mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
       <p className="section-eyebrow">{eyebrow}</p>
-      <h1 className="section-title mt-2">{title}</h1>
+      <h1 className="section-title mt-2 text-primary-900 dark:text-zinc-50">{title}</h1>
       <div className="mt-6 space-y-4 text-base leading-relaxed text-neutral-700 dark:text-neutral-300">
         {children}
       </div>