css homelab improvements

css/button.css

@@ -5,7 +5,7 @@
     font-weight: 400;
     font-size: 15px;
     color: var(--text-color);
-    background: var(--primary-gradient);
+    background: var(--button-gradient);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
@@ -15,7 +15,7 @@
 }
 
 .btn:hover {
-    background: linear-gradient(120deg, rgba(40, 20, 60, 0.6), rgba(30, 30, 80, 0.4));
+    background: var(--button-hover-gradient);
     transform: translateY(-1px);
     box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
 }

css/sections/homelab.css

@@ -2,16 +2,43 @@
     margin-top: 18px;
     padding: 32px 24px;
     background: rgba(20, 20, 30, 0.10);
-    backdrop-filter: blur(24px) saturate(140%) brightness(1.08);
+    backdrop-filter: blur(48px);
-    -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.08);
+    -webkit-backdrop-filter: blur(48px);
     border-radius: 24px;
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.10);
     min-width: 26rem;
     max-width: 26rem;
     align-self: stretch;
     display: flex;
     flex-direction: column;
     gap: 18px;
+    position: relative;
+    overflow: hidden;
+}
+
+.homelab-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    /* background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460, #000000, #53354a, #800080); */
+    background: linear-gradient(45deg, #1a1a2e44, #0f346066, #000000, #3e085e66, #80008022);
+    background-size: 400% 400%;
+    animation: gradient-animation 50s ease infinite;
+}
+
+@keyframes gradient-animation {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
 }
 
 .homelab-title {
@@ -31,54 +58,10 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    animation: homelab-gradient-move 24s linear infinite;
+    animation: gradient-animation 25s ease infinite;
 }
 
-@keyframes homelab-gradient-move {
-    0% {
-        background-position: 0% 50%;
-    }
 
-    10% {
-        background-position: 15% 50%;
-    }
-
-    20% {
-        background-position: 30% 50%;
-    }
-
-    30% {
-        background-position: 45% 50%;
-    }
-
-    40% {
-        background-position: 60% 50%;
-    }
-
-    50% {
-        background-position: 75% 50%;
-    }
-
-    60% {
-        background-position: 100% 50%;
-    }
-
-    70% {
-        background-position: 75% 50%;
-    }
-
-    80% {
-        background-position: 45% 50%;
-    }
-
-    90% {
-        background-position: 15% 50%;
-    }
-
-    100% {
-        background-position: 0% 50%;
-    }
-}
 
 .homelab-buttons {
     display: flex;

css/variables.css

@@ -4,7 +4,9 @@
     --primary-color-light: #81d4fa;
     --secondary-color: #667eea;
     --tertiary-color: #764ba2;
-    --primary-gradient: linear-gradient(120deg, rgba(30, 10, 50, 0.6), rgba(10, 10, 40, 0.4));
+    
+    --button-gradient: linear-gradient(120deg, rgba(30, 10, 50, 0.5), rgba(10, 10, 40, 0.4));
+    --button-hover-gradient: linear-gradient(120deg, rgba(30, 10, 50, 0.75), rgba(10, 10, 40, 0.4));
 
     --background-color: #000000;
     --glass-background: rgba(20, 20, 20, 0.125);

index.html

@@ -72,6 +72,7 @@
                         </div>
                     </div>
                     <div class="homelab-section">
+                        <div class="homelab-background"></div>
                         <h3 class="homelab-title">Homelab</h3>
                         <div class="homelab-buttons">
                             <a href="https://github.com/ivanch/homelab" class="btn homelab-btn" target="_blank">Diagram</a>