feat(gatekeeper): major UI upgrade - high-fidelity light theme, iridescent mouse-reactive form, and enhanced background animation

packages/gatekeeper/src/app/globals.css

@@ -8,7 +8,7 @@
   }
 
   body {
-    @apply bg-white text-slate-800 font-serif antialiased selection:bg-slate-900 selection:text-white;
+    @apply bg-[#f5f5f7] text-black/80 font-serif antialiased selection:bg-black/10 selection:text-black;
     line-height: 1.6;
   }
 
@@ -18,15 +18,15 @@
   h4,
   h5,
   h6 {
-    @apply font-sans font-bold text-slate-900 tracking-tighter;
+    @apply font-sans font-bold text-black tracking-tighter;
   }
 
   p {
-    @apply mb-4 text-base leading-relaxed text-slate-700;
+    @apply mb-4 text-base leading-relaxed text-black/50;
   }
 
   a {
-    @apply text-slate-900 hover:text-slate-700 transition-colors no-underline;
+    @apply text-black/50 hover:text-black transition-colors no-underline;
   }
 }
 
@@ -36,34 +36,58 @@
   }
 
   .btn {
-    @apply inline-flex items-center justify-center px-6 py-3 border border-slate-200 bg-white text-slate-600 font-sans font-bold text-sm uppercase tracking-widest rounded-full transition-all duration-500 ease-industrial hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 active:translate-y-0 active:shadow-sm;
+    @apply inline-flex items-center justify-center px-6 py-3 border border-black/10 bg-white text-black/60 font-sans font-bold text-sm uppercase tracking-widest rounded-full transition-all duration-500 ease-industrial hover:border-black/20 hover:text-black hover:bg-white hover:-translate-y-0.5 hover:shadow-xl hover:shadow-black/5 active:translate-y-0 active:shadow-sm;
   }
 
   .btn-primary {
-    @apply border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white;
+    @apply border-black bg-black text-white hover:bg-black/85 hover:text-white;
   }
 }
 
-/* Custom scrollbar */
+/* Custom scrollbar - light theme */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #f1f5f9;
+  background: #f5f5f7;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
+  background: #d1d1d6;
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
+  background: #b0b0b8;
 }
 
 /* Animations */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes shake {
   0%,
   100% {
@@ -79,6 +103,15 @@
   }
 }
 
+.animate-fade-in {
+  animation: fade-in 0.8s ease-out forwards;
+}
+
+.animate-slide-up {
+  animation: slide-up 0.8s ease-out 0.2s forwards;
+  opacity: 0;
+}
+
 .animate-shake {
   animation: shake 0.2s ease-in-out 0s 2;
 }