From 4fc96f958061867ad0f9ac38a6e4184dca5fccaf Mon Sep 17 00:00:00 2001
From: hakdo99 <hkd19@sfu.ca>
Date: Fri, 24 Jul 2026 01:40:49 -0700
Subject: [PATCH 1/3] dimming overlay

---
 src/components/header/Header.tsx |  3 +++
 src/styles/header.css            | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 420edbb..8d81fe7 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -88,7 +88,10 @@ function Header() {
           </div>
         </div>
       </div>
+      
+      <div className={`page-overlay ${isMobileMenuOpen ? 'active' : ''}`} onClick={toggleMobileMenu}></div>
     </header>
+    
   );
 }
 
diff --git a/src/styles/header.css b/src/styles/header.css
index ad8e34c..26cdd9e 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -153,6 +153,25 @@ a.subheading {
     text-align: center;
 }
 
+/* Dimming Overlay */
+.page-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(0 85 255 / 20%);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 999;
+}
+
+/* Active Overlay State */
+.page-overlay.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;

From e75b20caa4e3e3acca9bdc680ad1dcf0486cde2c Mon Sep 17 00:00:00 2001
From: hakdo99 <hkd19@sfu.ca>
Date: Sat, 25 Jul 2026 17:37:35 -0700
Subject: [PATCH 2/3] declare dimming overlay color

---
 src/styles/global.css | 1 +
 src/styles/header.css | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 177b76e..7a0615e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -15,6 +15,7 @@
   --color-primary-01: #0a205a;
   --color-primary-01-50: rgb(10 32 90 / 50%);
   --color-primary-01-10: rgb(10 32 90 / 10%);
+  --color-primary-01-20: rgb(10 32 90 / 20%);
   --color-primary-02: #f6ced5;
   --color-primary-02-50: rgb(246 206 213 / 50%);
   --color-primary-02-20: rgb(246 206 213 / 20%);
diff --git a/src/styles/header.css b/src/styles/header.css
index 26cdd9e..39cf3a4 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -160,7 +160,7 @@ a.subheading {
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: rgb(0 85 255 / 20%);
+  background-color: var(--color-primary-01-20);
   opacity: 0;
   pointer-events: none;
   z-index: 999;

From 4c53d6a4aa62167e59ccd210180519fde44f976c Mon Sep 17 00:00:00 2001
From: hakdo99 <hkd19@sfu.ca>
Date: Mon, 27 Jul 2026 16:12:42 -0700
Subject: [PATCH 3/3] fix dimming overlay bug

---
 src/styles/header.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/header.css b/src/styles/header.css
index 39cf3a4..8fc89af 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -213,4 +213,8 @@ a.subheading {
     .hamburger-button {
         display: none !important;
     }
+
+    .page-overlay {
+        display: none !important;
+    }
 }