fix: mobile badge backgrounds, contact icons and interactive overlay issues

src/app/globals.css

@@ -126,10 +126,7 @@
     transition: color 0.3s ease;
   }
 
-  /* Transition for cards & buttons when theme switches */
-  div, section, header, nav, a, button, input, textarea, span {
-    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-  }
+
 }
 
 /* Minimal design utility cards (Stripe/Linear style) */
@@ -175,7 +172,7 @@
   -webkit-text-fill-color: transparent;
 }
 
-.project-tag {
+.primary-badge {
   background-color: var(--badge-bg);
   border: 1px solid var(--badge-border);
   color: var(--badge-text);

src/components/Contact/Contact.tsx

@@ -10,7 +10,7 @@ export default function Contact() {
       </div>
 
       <p className="text-base leading-relaxed text-text-secondary max-w-[600px] mx-auto mb-12">
-        I am currently open to new opportunities, internship positions, or collaborations. 
+        I am currently open to new opportunities, internship positions, or collaborations.
         If you have a question or just want to say hi, feel free to reach out through any of these channels!
       </p>
 
@@ -18,7 +18,7 @@ export default function Contact() {
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
         {/* Email Card */}
         <div className="bg-surface border border-surface-border flex flex-col items-center text-center p-6 rounded-2xl transition-all duration-300 hover:border-primary/20">
-          <div className="w-12 h-12 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary mb-4 flex-shrink-0">
+          <div className="w-12 h-12 rounded-2xl primary-badge flex items-center justify-center mb-4 flex-shrink-0">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
               <polyline points="22,6 12,13 2,6"></polyline>
@@ -32,7 +32,7 @@ export default function Contact() {
 
         {/* Phone Card */}
         <div className="bg-surface border border-surface-border flex flex-col items-center text-center p-6 rounded-2xl transition-all duration-300 hover:border-primary/20">
-          <div className="w-12 h-12 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary mb-4 flex-shrink-0">
+          <div className="w-12 h-12 rounded-2xl primary-badge flex items-center justify-center mb-4 flex-shrink-0">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
             </svg>
@@ -45,7 +45,7 @@ export default function Contact() {
 
         {/* Location Card */}
         <div className="bg-surface border border-surface-border flex flex-col items-center text-center p-6 rounded-2xl transition-all duration-300 hover:border-primary/20">
-          <div className="w-12 h-12 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary mb-4 flex-shrink-0">
+          <div className="w-12 h-12 rounded-2xl primary-badge flex items-center justify-center mb-4 flex-shrink-0">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
               <circle cx="12" cy="10" r="3"></circle>
@@ -62,7 +62,7 @@ export default function Contact() {
       <div className="flex flex-col items-center gap-3">
         <span className="text-xs font-semibold text-text-secondary uppercase tracking-wider">Connect on Socials</span>
         <div className="flex justify-center gap-4">
-          <a href="https://github.com/BMQuan" target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-surface border border-surface-border flex items-center justify-center text-text-secondary hover:border-primary hover:text-text-primary transition-all duration-200" aria-label="GitHub">
+          <a href="https://github.com/BMQuaan" target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-surface border border-surface-border flex items-center justify-center text-text-secondary hover:border-primary hover:text-text-primary transition-all duration-200" aria-label="GitHub">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
             </svg>

src/components/Experience/Experience.tsx

@@ -72,7 +72,7 @@ export default function Experience() {
 
               {/* Minimal Card Container */}
               <div className="bg-surface border border-surface-border p-7 rounded-2xl shadow-sm hover:border-surface-hover-border transition-colors text-left">
-                <span className="text-[10px] font-semibold uppercase tracking-wider text-primary mb-3 inline-block bg-primary/10 px-2.5 py-1 rounded-full border border-primary/20">
+                <span className="text-[10px] font-semibold uppercase tracking-wider mb-3 inline-block primary-badge px-2.5 py-1 rounded-full">
                   {item.period}
                 </span>
                 <h3 className="text-lg font-bold text-text-primary mb-1 tracking-tight">{item.role}</h3>

src/components/Navbar/Navbar.tsx

@@ -213,8 +213,10 @@ export default function Navbar() {
 
         {/* Mobile Menu Dropdown */}
         <div
-          className={`fixed top-0 right-0 w-[75%] max-w-[320px] h-screen bg-surface border-l border-surface-border p-8 pt-24 flex flex-col gap-6 z-40 transition-transform duration-300 ease-in-out ${
-            mobileMenuOpen ? "translate-x-0" : "translate-x-full"
+          className={`fixed top-0 right-0 w-[75%] max-w-[320px] h-screen bg-surface border-l border-surface-border p-8 pt-24 flex flex-col gap-6 z-40 transition-all duration-300 ease-in-out ${
+            mobileMenuOpen 
+              ? "translate-x-0 visible pointer-events-auto opacity-100" 
+              : "translate-x-full invisible pointer-events-none opacity-0"
           }`}
         >
           <ul className="list-none flex flex-col gap-4">

src/components/Projects/Projects.tsx

@@ -143,7 +143,7 @@ export default function Projects() {
               </p>
               <div className="flex flex-wrap gap-2 mb-6">
                 {project.tags.slice(0, 3).map((tag, idx) => (
-                  <span key={idx} className="project-tag px-2.5 py-1 rounded-md text-[11px] font-semibold">
+                  <span key={idx} className="primary-badge px-2.5 py-1 rounded-md text-[11px] font-semibold">
                     {tag}
                   </span>
                 ))}