prepare the windows with hyper glossy effekt

components/footer.js

@@ -7,15 +7,33 @@ class CustomFooter extends HTMLElement {
                     display: block;
                     margin-top: auto;
                 }
-                
                 footer {
-                    background: rgba(15, 23, 42, 0.8);
-                    backdrop-filter: blur(20px);
-                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                    background: linear-gradient(135deg, 
+                        rgba(15, 23, 42, 0.9) 0%, 
+                        rgba(15, 23, 42, 0.7) 100%);
+                    backdrop-filter: blur(30px) saturate(200%);
+                    border-top: 1px solid rgba(255, 255, 255, 0.3);
                     padding: 2rem 0;
+                    box-shadow: 
+                        0 -4px 20px rgba(0, 0, 0, 0.1),
+                        inset 0 -1px 0 rgba(255, 255, 255, 0.2);
+                    position: relative;
                 }
                 
-                .footer-content {
+                footer::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    height: 1px;
+                    background: linear-gradient(90deg, 
+                        transparent 0%, 
+                        rgba(14, 165, 233, 0.5) 50%, 
+                        transparent 100%);
+                    animation: top-shimmer 6s linear infinite;
+                }
+.footer-content {
                     max-width: 7rem;
                     margin: 0 auto;
                     padding: 0 1rem;

components/navigation.js

@@ -9,15 +9,33 @@ class CustomNavigation extends HTMLElement {
                     top: 0;
                     z-index: 50;
                 }
-                
                 nav {
-                    background: rgba(15, 23, 42, 0.8);
-                    backdrop-filter: blur(20px);
-                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                    background: linear-gradient(135deg, 
+                        rgba(15, 23, 42, 0.9) 0%, 
+                        rgba(15, 23, 42, 0.7) 100%);
+                    backdrop-filter: blur(30px) saturate(200%);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                     padding: 1rem 0;
+                    box-shadow: 
+                        0 4px 20px rgba(0, 0, 0, 0.1),
+                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+                    position: relative;
                 }
                 
-                .nav-container {
+                nav::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    height: 1px;
+                    background: linear-gradient(90deg, 
+                        transparent 0%, 
+                        rgba(14, 165, 233, 0.5) 50%, 
+                        transparent 100%);
+                    animation: top-shimmer 6s linear infinite;
+                }
+.nav-container {
                     max-width: 7rem;
                     margin: 0 auto;
                     padding: 0 1rem;

index.html

@@ -98,8 +98,8 @@
             <!-- Left Column - Now Playing & Player -->
             <div class="lg:col-span-2 space-y-8">
                 <!-- Now Playing Card -->
-                <section class="bg-gradient-to-br from-gray-800/50 to-black/50 backdrop-blur-xl rounded-3xl p-8 border border-gray-700/50 shadow-2xl">
-                    <div class="flex items-center justify-between mb-6">
+                <section class="glossy-card rounded-3xl p-8">
+<div class="flex items-center justify-between mb-6">
                         <h2 class="text-2xl font-bold flex items-center gap-3">
                             <i data-feather="play-circle" class="text-primary-400"></i>
                         <span class="bg-gradient-to-r from-primary-300 to-primary-400 bg-clip-text text-transparent">Now Playing</span>
@@ -189,8 +189,8 @@
             <!-- Right Column - Sets Archive -->
             <div class="space-y-8">
                 <!-- Archive Header -->
-                <section class="bg-gradient-to-br from-gray-800/50 to-black/50 backdrop-blur-xl rounded-3xl p-8 border border-gray-700/50">
-                    <h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
+                <section class="glossy-card rounded-3xl p-8">
+<h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
                         <i data-feather="music" class="text-primary-400"></i>
                         <span class="bg-gradient-to-r from-primary-300 to-primary-400 bg-clip-text text-transparent">The Vault</span>
 </h2>
@@ -213,10 +213,9 @@
                         </div>
                     </div>
                 </section>
-
                 <!-- Sets List Container -->
-                <section class="bg-gradient-to-br from-gray-800/40 to-black/40 backdrop-blur-xl rounded-3xl p-6 border border-gray-700/50">
-                    <div id="sets-container" class="space-y-4">
+                <section class="glossy-card rounded-3xl p-6">
+<div id="sets-container" class="space-y-4">
                         <!-- Sets will be loaded here by JavaScript -->
                         <div class="text-center py-12">
                             <div class="inline-block p-4 rounded-2xl bg-gradient-to-r from-primary-900/20 to-secondary-900/20">

style.css

@@ -7,14 +7,28 @@
     padding: 0;
     box-sizing: border-box;
 }
-
 body {
     font-family: 'Inter', sans-serif;
     background: linear-gradient(135deg, #0f172a 0%, #000000 50%, #0f172a 100%);
     background-attachment: fixed;
     min-height: 100vh;
+    position: relative;
 }
 
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        radial-gradient(ellipse at top left, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
+        radial-gradient(ellipse at bottom right, rgba(217, 70, 239, 0.15) 0%, transparent 50%),
+        radial-gradient(ellipse at center, rgba(2, 132, 199, 0.08) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: 1;
+}
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
     width: 10px;