From 8e95fa49373061a53faa3028accebe2c655c3e93 Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Mon, 10 Mar 2025 11:34:57 +0100
Subject: [PATCH] style: update styles for consistency and responsiveness

---
 src/components/layout/Footer.astro     |  35 +++---
 src/components/layout/Header.astro     |  59 ++++++---
 src/components/layout/MobileMenu.astro |  22 ++--
 src/components/sections/About.astro    |  41 ++++---
 src/components/sections/Hero.astro     |  51 ++++----
 src/components/sections/Work.astro     |  33 ++---
 src/pages/index.astro                  |   2 +-
 src/styles/global.css                  |  49 ++++++--
 src/styles/theme.css                   | 164 +++++++++++++++++--------
 9 files changed, 296 insertions(+), 160 deletions(-)

diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
index 70af752..91957b1 100644
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -5,19 +5,22 @@ import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";
 
 <footer
   role="contentinfo"
-  class="mt-20 sm:mt-32 theme-bg-gradient border-t theme-border"
+  class="mt-20 sm:mt-40 relative"
 >
-  <div class="max-w-(--breakpoint-xl) mx-auto px-4 sm:px-8 py-20 sm:py-32">
+  <div class="absolute inset-0 theme-bg-gradient opacity-30"></div>
+  <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
+  
+  <div class="max-w-(--breakpoint-xl) mx-auto px-4 sm:px-8 py-20 sm:py-32 relative">
     <div class="grid gap-16 sm:gap-24">
       <FadeIn>
-        <div class="text-center space-y-4 sm:space-y-5">
+        <div class="text-center space-y-5 sm:space-y-6">
           <h2
-            class="font-['DM_Sans'] text-4xl sm:text-7xl font-semibold tracking-tight theme-primary"
+            class="font-['DM_Sans'] text-4xl sm:text-6xl font-semibold tracking-tight theme-primary"
           >
             Let&apos;s Connect
           </h2>
           <p
-            class="font-['Instrument_Sans'] theme-text-70 text-lg sm:text-2xl max-w-2xl mx-auto"
+            class="font-['Instrument_Sans'] theme-text-70 text-lg sm:text-2xl max-w-2xl mx-auto leading-relaxed"
           >
             Always interested in new opportunities and collaborations.
           </p>
@@ -25,42 +28,44 @@ import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";
       </FadeIn>
 
       <FadeIn delay={0.1}>
-        <div class="flex flex-col items-center gap-8 sm:gap-12 font-['Instrument_Sans']">
+        <div class="flex flex-col items-center gap-10 sm:gap-14 font-['Instrument_Sans']">
           <a
             href="mailto:jleibl@proton.me"
-            class="group flex items-center gap-3 text-xl sm:text-4xl theme-text-90 hover:theme-primary transition-colors"
+            class="group flex items-center gap-3 text-xl sm:text-3xl theme-text-90 hover:theme-primary transition-all hover:scale-105 duration-300"
           >
-            <FaEnvelope className="w-6 h-6 sm:w-8 sm:h-8" />
+            <span class="p-2 rounded-xl theme-bg-05 border theme-border">
+              <FaEnvelope className="w-5 h-5 sm:w-6 sm:h-6" />
+            </span>
             jleibl@proton.me
           </a>
           
-          <div class="flex gap-6 sm:gap-10">
+          <div class="flex gap-6 sm:gap-8">
             <a 
               href="https://github.com/AtomicWasTaken" 
               target="_blank"
               rel="noopener noreferrer"
-              class="group theme-text-70 hover:theme-primary transition-colors"
+              class="p-3 sm:p-4 rounded-xl theme-bg-05 border theme-border theme-text-70 hover:theme-text-90 hover:scale-105 transition-all duration-300 shadow-sm"
               aria-label="GitHub Profile"
             >
-              <FaGithub className="w-8 h-8 sm:w-10 sm:h-10" />
+              <FaGithub className="w-6 h-6 sm:w-7 sm:h-7" />
             </a>
             
             <a 
               href="https://www.linkedin.com/in/janmarlonleibl/" 
               target="_blank"
               rel="noopener noreferrer"
-              class="group theme-text-70 hover:theme-primary transition-colors"
+              class="p-3 sm:p-4 rounded-xl theme-bg-05 border theme-border theme-text-70 hover:theme-text-90 hover:scale-105 transition-all duration-300 shadow-sm"
               aria-label="LinkedIn Profile"
             >
-              <FaLinkedin className="w-8 h-8 sm:w-10 sm:h-10" />
+              <FaLinkedin className="w-6 h-6 sm:w-7 sm:h-7" />
             </a>
           </div>
         </div>
       </FadeIn>
 
       <FadeIn delay={0.2}>
-        <div class="pt-6 sm:pt-12 text-center">
-          <p class="font-['Instrument_Sans'] theme-text-40 text-xs sm:text-sm tracking-[0.1em]">
+        <div class="pt-8 sm:pt-16 text-center">
+          <p class="font-['Instrument_Sans'] theme-text-40 text-xs sm:text-sm tracking-wider">
             © {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved.
           </p>
         </div>
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index b5c94a4..30ca759 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -7,25 +7,25 @@ import MobileMenu from './MobileMenu.astro';
   role="banner"
 >
   <div class="max-w-(--breakpoint-xl) mx-auto">
-    <nav class="py-5 px-6 sm:px-8 flex justify-between items-center font-['DM_Sans']" role="navigation" aria-label="Main navigation">
+    <nav class="py-4 px-6 sm:px-8 flex justify-between items-center font-['Instrument_Sans']" role="navigation" aria-label="Main navigation">
       <div class="flex items-center">
-        <a href="#hero" class="flex items-center gap-2 group" aria-label="Home">
-          <div class="relative w-10 h-10 rounded-full theme-accent flex items-center justify-center border theme-border overflow-hidden group-hover:border-opacity-80 transition-all duration-300">
-            <span class="text-lg font-bold tracking-tight theme-primary theme-transition">JL</span>
+        <a href="#hero" class="flex items-center gap-2.5 group" aria-label="Home">
+          <div class="relative w-9 h-9 rounded-xl theme-accent flex items-center justify-center border theme-border overflow-hidden group-hover:border-opacity-80 transition-all duration-300 shadow-sm">
+            <span class="text-base font-bold tracking-tight theme-primary theme-transition">JL</span>
             <div class="absolute inset-0 theme-bg-05 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
           </div>
-          <span class="text-lg font-medium tracking-tight theme-primary theme-transition hidden sm:block">
+          <span class="text-base font-medium tracking-tight theme-primary theme-transition hidden sm:block">
             Jan-Marlon Leibl
           </span>
         </a>
       </div>
       
       <div class="hidden md:flex items-center">
-        <div class="flex bg-black/10 backdrop-blur-md rounded-full overflow-hidden theme-border border divide-x divide-white/5">
-          {["About", "Work"].map((item) => (
+        <div class="flex bg-black/5 backdrop-blur-md overflow-hidden theme-border border divide-x divide-white/5 shadow-sm rounded-xl">
+          {["About", "Work"].map((item, index) => (
             <a 
               href={`#${item.toLowerCase()}`} 
-              class="nav-item px-6 py-2 theme-secondary hover:theme-primary theme-transition"
+              class={`nav-item px-5 py-2 theme-secondary hover:theme-primary theme-transition ${index === 0 ? "rounded-l-xl rounded-r-none" : "rounded-r-xl rounded-l-none"}`}
               aria-label={`View my ${item.toLowerCase()}`}
             >
               {item}
@@ -36,14 +36,14 @@ import MobileMenu from './MobileMenu.astro';
         <div class="ml-6">
           <a 
             href="mailto:jleibl@proton.me" 
-            class="flex items-center gap-2 px-6 py-2 theme-bg-05 theme-primary border theme-border rounded-full hover:bg-opacity-100 transition-all duration-300 group"
+            class="flex items-center gap-2 px-5 py-2 theme-bg-05 theme-primary border theme-border rounded-xl hover:bg-opacity-100 transition-all duration-300 group shadow-sm"
             aria-label="Contact me via email"
           >
             <svg class="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
             </svg>
-            <span class="text-sm">Contact</span>
-            <div class="w-0 overflow-hidden group-hover:w-4 transition-all duration-500">
+            <span class="text-sm font-medium">Contact</span>
+            <div class="w-0 overflow-hidden group-hover:w-4 transition-all duration-300">
               <svg class="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M5 12h14M12 5l7 7-7 7"/>
               </svg>
@@ -57,8 +57,6 @@ import MobileMenu from './MobileMenu.astro';
       </div>
     </nav>
   </div>
-  
-  <div class="h-px w-full theme-border opacity-50"></div>
 </header>
 
 <script>
@@ -68,6 +66,30 @@ import MobileMenu from './MobileMenu.astro';
       header.style.transform = 'translateY(0)';
       header.style.opacity = '1';
     }
+    
+    let lastScrollY = window.scrollY;
+    
+    window.addEventListener('scroll', () => {
+      if (!header) return;
+      
+      const currentScrollY = window.scrollY;
+      
+      // Apply subtle shadow and border when scrolling down
+      if (currentScrollY > 20) {
+        header.classList.add('scrolled');
+      } else {
+        header.classList.remove('scrolled');
+      }
+      
+      // Hide header when scrolling down, show when scrolling up
+      if (currentScrollY > lastScrollY && currentScrollY > 100) {
+        header.style.transform = 'translateY(-100%)';
+      } else {
+        header.style.transform = 'translateY(0)';
+      }
+      
+      lastScrollY = currentScrollY;
+    });
   });
 </script>
 
@@ -75,6 +97,15 @@ import MobileMenu from './MobileMenu.astro';
   header {
     transform: translateY(-100px);
     opacity: 0;
-    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
+    transition: transform 0.4s ease-out, opacity 0.5s ease-out, border 0.3s ease;
+  }
+  
+  header.scrolled {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  }
+  
+  .nav-item {
+    border-radius: 0;
   }
 </style> 
\ No newline at end of file
diff --git a/src/components/layout/MobileMenu.astro b/src/components/layout/MobileMenu.astro
index d63b91c..c23a580 100644
--- a/src/components/layout/MobileMenu.astro
+++ b/src/components/layout/MobileMenu.astro
@@ -5,7 +5,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
 <div class="mobile-menu">
   <button
     id="mobile-menu-toggle"
-    class="p-2 theme-accent rounded-lg theme-border"
+    class="p-2.5 theme-accent rounded-xl theme-border border shadow-sm hover:theme-bg-05 transition-all duration-300"
     aria-label="Open menu"
     aria-expanded="false"
   >
@@ -20,7 +20,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
     <div class="nav-glass w-full h-full flex flex-col shadow-2xl" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
       <button 
         id="mobile-menu-close"
-        class="absolute top-4 right-4 p-2 theme-accent rounded-lg theme-border z-110"
+        class="absolute top-4 right-4 p-2.5 theme-accent rounded-xl theme-border border z-110 shadow-sm hover:theme-bg-05 transition-all duration-300"
         aria-label="Close menu"
       >
         <svg class="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -30,17 +30,17 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
     
       <div class="w-full h-full p-6 pt-16 flex flex-col overflow-y-auto">
         <nav class="mb-8">
-          <div class="flex flex-col space-y-2">
+          <div class="flex flex-col space-y-3">
             {[
               { href: "#about", label: "About" },
               { href: "#work", label: "Work" }
             ].map((item) => (
               <a
                 href={item.href}
-                class="menu-link p-4 text-xl theme-primary rounded-lg theme-accent flex items-center hover:theme-bg-05 transition-colors"
+                class="menu-link p-4 text-xl font-medium theme-primary rounded-xl theme-bg-05 border theme-border flex items-center hover:bg-white/[0.03] transition-all duration-300 shadow-sm"
               >
                 <span>{item.label}</span>
-                <svg class="ml-auto w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <svg class="ml-auto w-5 h-5 theme-primary opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path d="M5 12h14M12 5l7 7-7 7"/>
                 </svg>
               </a>
@@ -49,19 +49,19 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
         </nav>
       
         <div class="mt-auto">
-          <div class="pt-4 border-t theme-border">
+          <div class="pt-6 border-t theme-border">
             <a 
               href="mailto:jleibl@proton.me" 
-              class="flex items-center justify-center gap-3 w-full py-4 px-6 theme-primary border theme-border rounded-lg hover:theme-bg-05 transition-colors"
+              class="flex items-center justify-center gap-3 w-full py-4 px-6 theme-button-primary rounded-xl transition-all duration-300 shadow-sm hover:shadow-md"
             >
               <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
               </svg>
-              <span>Contact Me</span>
+              <span class="font-medium">Contact Me</span>
             </a>
           </div>
         
-          <div class="pt-6 flex justify-center pb-6">
+          <div class="pt-8 flex justify-center pb-6 opacity-70">
             <GermanyFlag />
           </div>
         </div>
@@ -82,7 +82,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
       document.body.style.overflow = 'hidden';
       toggle?.setAttribute('aria-expanded', 'true');
       overlay?.classList.remove('opacity-0', 'pointer-events-none');
-      overlay?.classList.add('opacity-95');
+      overlay?.classList.add('opacity-90');
       panel?.classList.remove('translate-x-full');
     }
     
@@ -90,7 +90,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
       document.body.style.overflow = '';
       toggle?.setAttribute('aria-expanded', 'false');
       overlay?.classList.add('opacity-0', 'pointer-events-none');
-      overlay?.classList.remove('opacity-95');
+      overlay?.classList.remove('opacity-90');
       panel?.classList.add('translate-x-full');
     }
     
diff --git a/src/components/sections/About.astro b/src/components/sections/About.astro
index 6a55291..33774fb 100644
--- a/src/components/sections/About.astro
+++ b/src/components/sections/About.astro
@@ -22,28 +22,31 @@ const interests = [
 ];
 ---
 
-<section id="about" class="py-20 sm:py-40 px-4 sm:px-8 theme-bg-gradient">
-  <div class="max-w-(--breakpoint-xl) mx-auto">
+<section id="about" class="py-24 sm:py-40 px-4 sm:px-8 relative">
+  <div class="absolute inset-0 theme-bg-gradient opacity-50"></div>
+  
+  <div class="max-w-(--breakpoint-xl) mx-auto relative">
     <FadeIn>
       <div class="flex items-baseline gap-4 mb-12 sm:mb-24">
-        <h2 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
+        <h2 class="font-['DM_Sans'] text-3xl sm:text-5xl font-semibold tracking-tight theme-primary">
           About
         </h2>
-        <div class="h-px grow bg-white/10 relative top-[-4px]"></div>
+        <div class="h-px grow theme-border opacity-60"></div>
       </div>
     </FadeIn>
     
     <div class="grid md:grid-cols-[1fr_2fr] gap-12 sm:gap-24">
       <div class="space-y-6 sm:space-y-8">
         <FadeIn>
-          <div class="aspect-square bg-linear-to-tr theme-bg-05 rounded-2xl overflow-hidden border theme-border hover:border-white/10 transition-colors mx-auto md:mx-0 max-w-[280px] md:max-w-none">
+          <div class="aspect-square theme-bg-05 rounded-2xl overflow-hidden border theme-border hover:border-white/20 transition-all duration-300 shadow-md hover:shadow-lg mx-auto md:mx-0 max-w-[280px] md:max-w-none relative group">
             <Image
               src="/profile-image.jpg"
               alt="Jan-Marlon Leibl - Fullstack Software Developer"
               width="400"
               height="400"
-              class="object-cover w-full h-full hover:scale-105 transition-transform duration-700"
+              class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-700"
             />
+            <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
           </div>
         </FadeIn>
         <FadeIn delay={0.1}>
@@ -72,14 +75,14 @@ const interests = [
           <div class="grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-16">
             <div class="space-y-6 sm:space-y-8">
               <div class="flex items-baseline gap-4">
-                <h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
+                <h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-wider font-medium">
                   Technologies
                 </h3>
-                <div class="h-px grow theme-border"></div>
+                <div class="h-px grow theme-border opacity-30"></div>
               </div>
               <ul class="space-y-4 sm:space-y-5">
                 {technologies.map((tech) => (
-                  <li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md">
+                  <li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default theme-bg-05 px-4 py-2.5 rounded-xl shadow-sm hover:shadow-md border border-transparent hover:theme-border transition-all duration-300">
                     <span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-colors">
                       <tech.icon className="w-5 h-5" />
                     </span>
@@ -91,14 +94,14 @@ const interests = [
 
             <div class="space-y-6 sm:space-y-8">
               <div class="flex items-baseline gap-4">
-                <h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
+                <h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-wider font-medium">
                   Interests
                 </h3>
-                <div class="h-px grow theme-border"></div>
+                <div class="h-px grow theme-border opacity-30"></div>
               </div>
               <ul class="space-y-4 sm:space-y-5">
                 {interests.map((interest) => (
-                  <li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md">
+                  <li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default theme-bg-05 px-4 py-2.5 rounded-xl shadow-sm hover:shadow-md border border-transparent hover:theme-border transition-all duration-300">
                     <span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-colors">
                       <interest.icon className="w-5 h-5" />
                     </span>
@@ -109,12 +112,12 @@ const interests = [
             </div>
           </div>
 
-          <div class="pt-6 sm:pt-8 flex flex-col sm:flex-row gap-3 sm:gap-6">
+          <div class="pt-8 sm:pt-10 flex flex-col sm:flex-row gap-4 sm:gap-6">
             <a 
               href="https://github.com/AtomicWasTaken" 
               target="_blank"
               rel="noopener noreferrer"
-              class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90 flex items-center justify-center gap-2"
+              class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-xl theme-button-secondary hover:theme-bg-05 transition-all duration-300 text-sm sm:text-base tracking-tight font-medium flex items-center justify-center gap-2 shadow-sm"
             >
               <FaGithub className="w-5 h-5" />
               View GitHub
@@ -123,7 +126,7 @@ const interests = [
               href="https://www.linkedin.com/in/janmarlonleibl/" 
               target="_blank"
               rel="noopener noreferrer"
-              class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90 flex items-center justify-center gap-2"
+              class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-xl theme-button-secondary hover:theme-bg-05 transition-all duration-300 text-sm sm:text-base tracking-tight font-medium flex items-center justify-center gap-2 shadow-sm"
             >
               <FaLinkedin className="w-5 h-5" />
               Connect on LinkedIn
@@ -137,10 +140,14 @@ const interests = [
 
 <style>
   .animate-button {
-    transition: transform 0.2s ease-out;
+    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
   }
   
   .animate-button:hover {
-    transform: scale(1.02);
+    transform: translateY(-2px);
+  }
+  
+  .animate-button:active {
+    transform: scale(0.98);
   }
 </style> 
\ No newline at end of file
diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
index eda2584..4c2bbdc 100644
--- a/src/components/sections/Hero.astro
+++ b/src/components/sections/Hero.astro
@@ -3,36 +3,37 @@ import FadeIn from '../ui/FadeIn.astro';
 import GermanyFlag from '../ui/GermanyFlag.astro';
 ---
 
-<section class="min-h-[100dvh] flex items-center justify-center px-4 sm:px-8 relative pt-24 sm:pt-8" id="hero">
-  <div class="absolute inset-0 theme-bg-gradient"></div>
+<section class="min-h-[100dvh] flex items-center justify-center px-4 sm:px-8 relative pt-24 pb-16" id="hero">
+  <div class="absolute inset-0 theme-bg-gradient opacity-80"></div>
+  
   <div class="max-w-7xl w-full relative pt-8 sm:pt-24">
-    <FadeIn className="space-y-8 sm:space-y-16">
-      <div class="space-y-6 sm:space-y-8">
+    <FadeIn className="space-y-10 sm:space-y-16">
+      <div class="space-y-8 sm:space-y-10">
         <div class="space-y-6 sm:space-y-8">
-          <div class="inline-flex items-center gap-2.5 px-4 py-2 rounded-full theme-accent theme-border theme-transition">
+          <div class="inline-flex items-center gap-2.5 px-4 py-2 rounded-xl theme-accent theme-border border theme-transition shadow-sm">
             <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
-            <span class="theme-secondary uppercase tracking-[0.2em] text-xs sm:text-sm font-['Instrument_Sans']">Available for Work</span>
+            <span class="theme-secondary uppercase tracking-wider text-xs sm:text-sm font-medium font-['Instrument_Sans']">Available for Work</span>
           </div>
-          <div class="space-y-2 sm:space-y-3">
-            <h2 class="font-['DM_Sans'] text-xl sm:text-3xl theme-secondary tracking-wide font-medium theme-transition">
+          <div class="space-y-3 sm:space-y-4">
+            <h2 class="font-['Instrument_Sans'] text-xl sm:text-2xl theme-secondary tracking-tight font-medium theme-transition">
               Jan-Marlon Leibl
             </h2>
             <div>
-              <h1 class="font-['DM_Sans'] text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.1] sm:leading-[0.95] max-w-4xl theme-primary theme-transition">
+              <h1 class="font-['DM_Sans'] text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.05] sm:leading-[0.95] max-w-4xl theme-primary theme-transition">
                 Software Developer
                 <br />
-                <span class="theme-secondary">based in <GermanyFlag /></span>
+                <span class="theme-secondary inline-flex items-center gap-2">based in <GermanyFlag /></span>
               </h1>
             </div>
           </div>
         </div>
-        <p class="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-wide theme-transition">
+        <p class="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-tight theme-transition">
           Passionate about creating digital experiences, with a focus on PHP and modern web technologies.
         </p>
-        <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
+        <div class="flex flex-col sm:flex-row gap-4 sm:gap-5">
           <a 
             href="#work"
-            class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 theme-button-primary rounded-lg sm:rounded-full transition-colors text-sm sm:text-base tracking-wide font-medium group"
+            class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 theme-button-primary rounded-xl transition-all text-sm sm:text-base tracking-tight font-medium group shadow-sm"
           >
             View My Work
             <svg 
@@ -47,7 +48,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
           </a>
           <a
             href="mailto:jleibl@proton.me"
-            class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full theme-button-secondary hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide group"
+            class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-xl theme-button-secondary hover:theme-bg-05 transition-all text-sm sm:text-base tracking-tight font-medium group shadow-sm"
           >
             Get in Touch
             <svg 
@@ -63,11 +64,11 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
         </div>
       </div>
 
-      <div class="border-t theme-border pt-5 pb-5">
-        <div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-8 sm:gap-0 py-6 sm:py-8 font-['Instrument_Sans']">
-          <div class="text-center sm:border-r theme-border last:border-r-0">
+      <div class="border-t theme-border pt-8 mt-10">
+        <div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-6 sm:gap-0 py-6 sm:py-8 font-['Instrument_Sans']">
+          <div class="sm:border-r theme-border last:border-r-0 px-4">
             <div class="mb-3 sm:mb-4">
-              <span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">EMAIL</span>
+              <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">EMAIL</span>
             </div>
             <a 
               href="mailto:jleibl@proton.me" 
@@ -77,18 +78,18 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
             </a>
           </div>
           
-          <div class="text-center sm:border-r theme-border last:border-r-0">
+          <div class="sm:border-r theme-border last:border-r-0 px-4">
             <div class="mb-3 sm:mb-4">
-              <span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">ROLE</span>
+              <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">ROLE</span>
             </div>
             <span class="theme-text-90 text-base sm:text-lg">
               Fullstack Developer
             </span>
           </div>
           
-          <div class="text-center">
+          <div class="px-4">
             <div class="mb-3 sm:mb-4">
-              <span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">EXPERIENCE</span>
+              <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">EXPERIENCE</span>
             </div>
             <span class="theme-text-90 text-base sm:text-lg">
               5+ Years
@@ -102,14 +103,14 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
 
 <style>
   .animate-button {
-    transition: transform 0.2s ease-out;
+    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
   }
   
   .animate-button:hover {
-    transform: scale(1.03);
+    transform: translateY(-2px);
   }
   
   .animate-button:active {
-    transform: scale(0.97);
+    transform: scale(0.98);
   }
 </style> 
\ No newline at end of file
diff --git a/src/components/sections/Work.astro b/src/components/sections/Work.astro
index 235a208..3086d5b 100644
--- a/src/components/sections/Work.astro
+++ b/src/components/sections/Work.astro
@@ -104,47 +104,48 @@ const sortedProjects = [...projects].sort((a, b) => {
 });
 ---
 
-<section id="work" class="py-20 sm:py-40 px-4 sm:px-8 relative">
-  <div class="absolute inset-0 bg-linear-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none theme-bg-gradient"></div>
+<section id="work" class="py-24 sm:py-40 px-4 sm:px-8 relative">
+  <div class="absolute inset-0 theme-bg-gradient opacity-30"></div>
+  
   <div class="max-w-(--breakpoint-xl) mx-auto relative">
     <FadeIn>
       <div class="flex flex-col gap-3 mb-12 sm:mb-24">
-        <span class="theme-text-40 uppercase tracking-[0.2em] text-sm sm:text-base font-['Instrument_Sans']">
+        <span class="theme-text-40 uppercase tracking-wider text-sm sm:text-base font-medium font-['Instrument_Sans']">
           Portfolio
         </span>
         <div class="flex items-baseline gap-4">
-          <h2 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
+          <h2 class="font-['DM_Sans'] text-3xl sm:text-5xl font-semibold tracking-tight theme-primary">
             Selected Work
           </h2>
-          <div class="h-px grow theme-border"></div>
+          <div class="h-px grow theme-border opacity-60"></div>
         </div>
       </div>
     </FadeIn>
     
-    <div class="grid gap-24 sm:gap-40">
+    <div class="grid gap-20 sm:gap-28">
       {sortedProjects.map((project, index) => (
         <FadeIn delay={index * 0.1}>
           <div class="group relative">
             <div class="absolute top-0 left-0 right-0 flex items-center gap-4">
-              <div class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em] py-2 pr-4">
+              <div class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-wider font-medium py-2 pr-4">
                 {project.year}
               </div>
-              <div class="h-px grow theme-border"></div>
+              <div class="h-px grow theme-border opacity-30"></div>
             </div>
 
-            <div class="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-6 sm:gap-16">
-              <div class="space-y-4 sm:space-y-8">
-                <h3 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary group-hover:theme-text-90 transition-colors">
+            <div class="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-8 sm:gap-16">
+              <div class="space-y-4 sm:space-y-6">
+                <h3 class="font-['DM_Sans'] text-3xl sm:text-5xl font-semibold tracking-tight theme-primary group-hover:theme-text-90 transition-colors">
                   {project.title}
                 </h3>
-                <p class="font-['Instrument_Sans'] text-base sm:text-xl theme-text-70 leading-relaxed group-hover:theme-text-70 transition-colors max-w-xl">
+                <p class="font-['Instrument_Sans'] text-base sm:text-xl theme-text-70 leading-relaxed group-hover:theme-text-90 transition-colors max-w-xl">
                   {project.description}
                 </p>
               </div>
 
-              <div class="space-y-6 sm:space-y-12">
+              <div class="space-y-6 sm:space-y-10">
                 <div class="space-y-4 sm:space-y-6">
-                  <h4 class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
+                  <h4 class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-wider font-medium">
                     Technologies
                   </h4>
                   <div class="flex flex-wrap items-center gap-3 sm:gap-4">
@@ -152,7 +153,7 @@ const sortedProjects = [...projects].sort((a, b) => {
                       const Icon = tag.icon;
                       return (
                         <span 
-                          class="flex items-center text-sm sm:text-base theme-text-70 font-['Instrument_Sans'] tracking-wide py-1 sm:py-2 group-hover:theme-text-90 transition-colors bg-white/[0.02] px-3 sm:px-4 rounded-full shadow-xs"
+                          class="flex items-center text-sm sm:text-base theme-text-70 font-['Instrument_Sans'] tracking-tight font-medium py-1.5 sm:py-2 group-hover:theme-text-90 transition-all duration-300 theme-bg-05 px-4 sm:px-5 rounded-xl shadow-sm border border-transparent group-hover:theme-border"
                         >
                           <span class="mr-2 flex items-center">
                             <Icon className="text-lg" />
@@ -169,7 +170,7 @@ const sortedProjects = [...projects].sort((a, b) => {
               </div>
             </div>
 
-            <div class="absolute -inset-x-4 sm:-inset-x-8 -inset-y-4 sm:-inset-y-6 rounded-2xl sm:rounded-3xl border border-white/0 group-hover:theme-border transition-colors"></div>
+            <div class="absolute -inset-x-6 sm:-inset-x-8 -inset-y-6 sm:-inset-y-8 rounded-2xl sm:rounded-3xl border border-transparent hover:theme-border group-hover:bg-white/[0.01] transition-all duration-300 shadow-sm group-hover:shadow-md"></div>
           </div>
         </FadeIn>
       ))}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bdb8dd3..2db885f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -48,7 +48,7 @@ import '@fontsource/instrument-sans/500.css';
     <link rel="canonical" href="https://jleibl.net/" />
   </head>
   <body>
-    <div id="app-root" class="min-h-screen theme-transition black">
+    <div id="app-root" class="min-h-screen theme-transition black overflow-hidden">
       <Header />
       <Hero />
       <About />
diff --git a/src/styles/global.css b/src/styles/global.css
index 93b872c..0a5e353 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5,14 +5,6 @@
     --color-foreground: var(--foreground);
   }
   
-  /*
-    The default border color has changed to `currentColor` in Tailwind CSS v4,
-    so we've added these compatibility styles to make sure everything still
-    looks the same as it did with Tailwind CSS v3.
-  
-    If we ever want to remove these styles, we need to add an explicit border
-    color utility to any element that depends on these defaults.
-  */
   @layer base {
     *,
     ::after,
@@ -26,18 +18,55 @@
   :root {
     --background: #ffffff;
     --foreground: #171717;
+    --primary: #2563eb;
+    --primary-hover: #1d4ed8;
+    --primary-light: #dbeafe;
+    --gray-50: #f9fafb;
+    --gray-100: #f3f4f6;
+    --gray-200: #e5e7eb;
+    --gray-300: #d1d5db;
+    --gray-400: #9ca3af;
+    --gray-500: #6b7280;
+    --gray-600: #4b5563;
+    --gray-700: #374151;
+    --gray-800: #1f2937;
+    --gray-900: #111827;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-full: 9999px;
   }
   
   @media (prefers-color-scheme: dark) {
     :root {
       --background: #0a0a0a;
-      --foreground: #ededed;
+      --foreground: #f3f4f6;
+      --primary: #3b82f6;
+      --primary-hover: #60a5fa;
+      --primary-light: #1e3a8a;
+      --gray-50: #18181b;
+      --gray-100: #27272a;
+      --gray-200: #3f3f46;
+      --gray-300: #52525b;
+      --gray-400: #71717a;
+      --gray-500: #a1a1aa;
+      --gray-600: #d4d4d8;
+      --gray-700: #e4e4e7;
+      --gray-800: #f4f4f5;
+      --gray-900: #fafafa;
     }
   }
   
   body {
     color: var(--foreground);
     background: var(--background);
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    letter-spacing: -0.025em;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-x: hidden;
   }
   
\ No newline at end of file
diff --git a/src/styles/theme.css b/src/styles/theme.css
index c77185b..f74d47b 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -1,68 +1,76 @@
 .black { background: #0A0A0A; }
-.red { background: #1A0000; }
-.gold { background: #1A1400; }
+.red { background: #170c0c; }
+.gold { background: #121107; }
 
-.black .theme-primary { color: rgba(255, 255, 255, 0.9); }
-.red .theme-primary { color: rgba(255, 0, 0, 0.9); }
-.gold .theme-primary { color: rgba(255, 204, 0, 0.9); }
+.black .theme-primary { color: rgba(255, 255, 255, 0.95); }
+.red .theme-primary { color: #f87171; }
+.gold .theme-primary { color: #fbbf24; }
 
-.black .theme-secondary { color: rgba(255, 255, 255, 0.6); }
-.red .theme-secondary { color: rgba(255, 0, 0, 0.6); }
-.gold .theme-secondary { color: rgba(255, 204, 0, 0.6); }
+.black .theme-secondary { color: rgba(255, 255, 255, 0.7); }
+.red .theme-secondary { color: rgba(248, 113, 113, 0.85); }
+.gold .theme-secondary { color: rgba(251, 191, 36, 0.85); }
 
-.black .theme-accent { background-color: rgba(255, 255, 255, 0.03); }
-.red .theme-accent { background-color: rgba(255, 0, 0, 0.03); }
-.gold .theme-accent { background-color: rgba(255, 204, 0, 0.03); }
+.black .theme-accent { background-color: rgba(255, 255, 255, 0.05); }
+.red .theme-accent { background-color: rgba(248, 113, 113, 0.08); }
+.gold .theme-accent { background-color: rgba(251, 191, 36, 0.08); }
 
 .black .theme-border { border-color: rgba(255, 255, 255, 0.1); }
-.red .theme-border { border-color: rgba(255, 0, 0, 0.1); }
-.gold .theme-border { border-color: rgba(255, 204, 0, 0.1); }
+.red .theme-border { border-color: rgba(248, 113, 113, 0.15); }
+.gold .theme-border { border-color: rgba(251, 191, 36, 0.15); }
 
-.black .theme-text-40 { color: rgba(255, 255, 255, 0.4); }
-.red .theme-text-40 { color: rgba(255, 0, 0, 0.4); }
-.gold .theme-text-40 { color: rgba(255, 204, 0, 0.4); }
+.black .theme-text-40 { color: rgba(255, 255, 255, 0.5); }
+.red .theme-text-40 { color: rgba(248, 113, 113, 0.6); }
+.gold .theme-text-40 { color: rgba(251, 191, 36, 0.6); }
 
 .black .theme-text-70 { color: rgba(255, 255, 255, 0.7); }
-.red .theme-text-70 { color: rgba(255, 0, 0, 0.7); }
-.gold .theme-text-70 { color: rgba(255, 204, 0, 0.7); }
+.red .theme-text-70 { color: rgba(248, 113, 113, 0.75); }
+.gold .theme-text-70 { color: rgba(251, 191, 36, 0.75); }
 
 .black .theme-text-90 { color: rgba(255, 255, 255, 0.9); }
-.red .theme-text-90 { color: rgba(255, 0, 0, 0.9); }
-.gold .theme-text-90 { color: rgba(255, 204, 0, 0.9); }
+.red .theme-text-90 { color: rgba(248, 113, 113, 0.95); }
+.gold .theme-text-90 { color: rgba(251, 191, 36, 0.95); }
 
 .black .theme-bg-05 { background-color: rgba(255, 255, 255, 0.05); }
-.red .theme-bg-05 { background-color: rgba(255, 0, 0, 0.05); }
-.gold .theme-bg-05 { background-color: rgba(255, 204, 0, 0.05); }
+.red .theme-bg-05 { background-color: rgba(248, 113, 113, 0.06); }
+.gold .theme-bg-05 { background-color: rgba(251, 191, 36, 0.06); }
 
 .black .nav-glass { 
   background: rgba(10, 10, 10, 0.8);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 .red .nav-glass { 
-  background: rgba(26, 0, 0, 0.8);
-  box-shadow: 0 8px 32px rgba(26, 0, 0, 0.1);
+  background: rgba(23, 12, 12, 0.8);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(248, 113, 113, 0.1);
 }
 .gold .nav-glass { 
-  background: rgba(26, 20, 0, 0.8);
-  box-shadow: 0 8px 32px rgba(26, 20, 0, 0.1);
+  background: rgba(18, 17, 7, 0.8);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(251, 191, 36, 0.1);
 }
 
 .black .nav-item-active {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.08);
   border-bottom: 2px solid rgba(255, 255, 255, 0.8);
 }
 .red .nav-item-active {
-  background: rgba(255, 0, 0, 0.05);
-  border-bottom: 2px solid rgba(255, 0, 0, 0.8);
+  background: rgba(248, 113, 113, 0.08);
+  border-bottom: 2px solid rgba(248, 113, 113, 0.8);
 }
 .gold .nav-item-active {
-  background: rgba(255, 204, 0, 0.05);
-  border-bottom: 2px solid rgba(255, 204, 0, 0.8);
+  background: rgba(251, 191, 36, 0.08);
+  border-bottom: 2px solid rgba(251, 191, 36, 0.8);
 }
 
 .nav-item {
   position: relative;
   overflow: hidden;
+  font-weight: 500;
+  transition: all 0.2s ease;
 }
 
 .nav-item::after {
@@ -73,43 +81,97 @@
   width: 100%;
   height: 2px;
   transform: translateX(-100%);
-  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .black .nav-item::after {
   background-color: rgba(255, 255, 255, 0.8);
 }
 .red .nav-item::after {
-  background-color: rgba(255, 0, 0, 0.8);
+  background-color: rgba(248, 113, 113, 0.8);
 }
 .gold .nav-item::after {
-  background-color: rgba(255, 204, 0, 0.8);
+  background-color: rgba(251, 191, 36, 0.8);
 }
 
 .nav-item:hover::after {
   transform: translateX(0);
 }
 
-.black .theme-bg-gradient { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent); }
-.red .theme-bg-gradient { background: linear-gradient(to bottom, rgba(255, 0, 0, 0.02), transparent); }
-.gold .theme-bg-gradient { background: linear-gradient(to bottom, rgba(255, 204, 0, 0.02), transparent); }
+.black .theme-bg-gradient { 
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), transparent);
+}
+.red .theme-bg-gradient { 
+  background: linear-gradient(to bottom, rgba(248, 113, 113, 0.04), transparent);
+}
+.gold .theme-bg-gradient { 
+  background: linear-gradient(to bottom, rgba(251, 191, 36, 0.04), transparent);
+}
 
-.black .theme-button-primary { background-color: rgba(255, 255, 255, 0.9); color: #0A0A0A; }
-.red .theme-button-primary { background-color: rgba(255, 0, 0, 0.9); color: #1A0000; }
-.gold .theme-button-primary { background-color: rgba(255, 204, 0, 0.9); color: #1A1400; }
+.black .theme-button-primary { 
+  background-color: rgba(255, 255, 255, 0.9);
+  color: #0A0A0A;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.red .theme-button-primary { 
+  background-color: #f87171;
+  color: #0f0606;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.gold .theme-button-primary { 
+  background-color: #fbbf24;
+  color: #0f0b02;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
 
-.black .theme-button-primary:hover { background-color: rgba(255, 255, 255, 0.8); }
-.red .theme-button-primary:hover { background-color: rgba(255, 0, 0, 0.8); }
-.gold .theme-button-primary:hover { background-color: rgba(255, 204, 0, 0.8); }
+.black .theme-button-primary:hover { 
+  background-color: rgba(255, 255, 255, 1);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.red .theme-button-primary:hover { 
+  background-color: #ef4444;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.gold .theme-button-primary:hover { 
+  background-color: #f59e0b;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
 
-.black .theme-button-secondary { border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); }
-.red .theme-button-secondary { border-color: rgba(255, 0, 0, 0.1); color: rgba(255, 0, 0, 0.9); }
-.gold .theme-button-secondary { border-color: rgba(255, 204, 0, 0.1); color: rgba(255, 204, 0, 0.9); }
+.black .theme-button-secondary { 
+  border-color: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.red .theme-button-secondary { 
+  border-color: rgba(248, 113, 113, 0.2);
+  color: rgba(248, 113, 113, 1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.gold .theme-button-secondary { 
+  border-color: rgba(251, 191, 36, 0.2);
+  color: rgba(251, 191, 36, 1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
 
-.black .theme-button-secondary:hover { background-color: rgba(255, 255, 255, 0.05); }
-.red .theme-button-secondary:hover { background-color: rgba(255, 0, 0, 0.05); }
-.gold .theme-button-secondary:hover { background-color: rgba(255, 204, 0, 0.05); }
+.black .theme-button-secondary:hover { 
+  background-color: rgba(255, 255, 255, 0.08);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.red .theme-button-secondary:hover { 
+  background-color: rgba(248, 113, 113, 0.08);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.gold .theme-button-secondary:hover { 
+  background-color: rgba(251, 191, 36, 0.08);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
 
 .theme-transition {
-  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
+  transition: all 0.25s ease;
 } 
\ No newline at end of file