Update index.html

index.html

@@ -13,7 +13,7 @@
         --metal: #050506; 
         --brass: #c5a059 ;
         --etch: #1a1a1c; 
-        --glow: rgba(0, 212, 255, 0.3);
+        --glow: rgba(197, 160, 89, 0.2);
     }
     
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -67,7 +67,6 @@
         font-size: 0.75rem;
         transition: 0.3s; 
         letter-spacing: 3px;
-        box-shadow: inset 0 0 0 0 var(--glow);
     }
     .add-btn:hover { 
         background: var(--brass); 
@@ -81,16 +80,16 @@
         grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); 
         gap: 80px; 
         width: 100%;
-        perspective: 2000px; /* Essential for 3D */
+        perspective: 1500px; 
     }
 
-    /* 4x3 Rectangular Plate with 3D Effect */
+    /* 4x3 Rectangular Plate */
     .brushed-plate { 
         position: relative; 
         background: #0d0d0f; 
         border: 1px solid var(--etch); 
         padding: 45px;
-        transition: transform 0.2s ease-out, border-color 0.3s, box-shadow 0.3s;
+        transition: transform 0.1s ease-out, border-color 0.3s, box-shadow 0.3s;
         cursor: pointer;
         aspect-ratio: 4 / 3; 
         display: flex;
@@ -100,20 +99,19 @@
         box-shadow: 0 10px 30px rgba(0,0,0,0.5);
     }
     
-    /* Hover state - handled by JS for tilt, but fallback here */
     .brushed-plate:hover { 
         border-color: var(--brass); 
         box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 15px var(--glow);
     }
 
-    /* 3D Inner Elements */
+    /* Card Content - Removed translateZ so it stays FLAT on the card */
     .card-content {
-        transform: translateZ(50px); /* Makes content "pop" off the plate */
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         pointer-events: none;
+        transform: translateZ(0); /* Ensure it is flat */
     }
 
     .card-header { 
@@ -132,7 +130,6 @@
         line-height: 0.8; 
         color: #fff; 
         margin: 20px 0;
-        filter: drop-shadow(0 0 15px rgba(255,255,255,0.1));
     }
     
     .label-text {
@@ -144,9 +141,9 @@
     
     footer { 
         font-family: monospace; 
-        opacity: 0.6; 
+        opacity: 0.8; 
         letter-spacing: 3px; 
-        font-size: 1.1rem; /* Larger Date */
+        font-size: 1.2rem; /* Large Date */
         text-transform: uppercase;
         color: var(--brass);
     }
@@ -156,9 +153,8 @@
         color: #333; background: none; border: none; 
         cursor: pointer; font-size: 1.5rem; transition: 0.3s;
         z-index: 10;
-        transform: translateZ(20px);
     }
-    .del:hover { color: #ff4b2b; transform: translateZ(30px) scale(1.2); }
+    .del:hover { color: #ff4b2b; transform: scale(1.2); }
 
     /* Modal Styles */
     .modal { 
@@ -171,7 +167,6 @@
     .modal-box { 
         background: #0d0d0f; border: 1px solid var(--brass); 
         padding: 60px; width: 100%; max-width: 600px;
-        box-shadow: 0 0 50px var(--glow);
     }
     
     input, textarea { 
@@ -275,23 +270,23 @@
             }).join('');
         }
 
-        // --- 3D Tilt Logic ---
+        // Tilt effect logic
         window.tilt = (e, card) => {
             const rect = card.getBoundingClientRect();
             const x = e.clientX - rect.left;
             const y = e.clientY - rect.top;
-            
             const centerX = rect.width / 2;
             const centerY = rect.height / 2;
             
-            const rotateX = (y - centerY) / 10;
-            const rotateY = (centerX - x) / 10;
+            // Reduced tilt intensity for a cleaner feel
+            const rotateX = (y - centerY) / 15;
+            const rotateY = (centerX - x) / 15;
             
-            card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
+            card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
         };
 
         window.resetTilt = (card) => {
-            card.style.transform = `rotateX(0deg) rotateY(0deg) translateY(0px)`;
+            card.style.transform = `rotateX(0deg) rotateY(0deg)`;
         };
 
         window.delEx = (id) => { if(confirm("DESTRUCT NODE?")) remove(ref(database, `exams/${id}`)); };