x

apps/spa/src/index.css

@@ -1,78 +1,74 @@
 @import "tailwindcss";
 
 @theme {
-  /* Memphis Pop-Art color palette */
-  --color-pop-pink: #FF69B4;
+  --color-pop-pink: #FF6B6B;
   --color-pop-yellow: #FFF200;
-  --color-pop-orange: #FF8800;
-  --color-pop-red: #FF3333;
-  --color-pop-cyan: #00FFFF;
-  --color-pop-green: #39FF14;
-  --color-pop-purple: #BA55D3;
-  --color-pop-bg: #FFF9E6;
-  --color-pop-black: #111111;
+  --color-pop-orange: #FFA07A;
+  --color-pop-red: #FF4500;
+  --color-pop-cyan: #E0FFFF;
+  --color-pop-green: #98FB98;
+  --color-pop-purple: #D8BFD8;
+  --color-pop-bg: #FFF0F5;
+  --color-pop-black: #333333;
 
-  /* Brutalist Shadows */
-  --shadow-brutal: 6px 6px 0px 0px #111;
-  --shadow-brutal-hover: 2px 2px 0px 0px #111;
+  --shadow-brutal: 0 10px 25px rgba(0,0,0,0.05);
+  --shadow-brutal-hover: 0 20px 40px rgba(0,0,0,0.1);
   
-  /* Custom animations */
-  --animate-pop-in: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
-  --animate-spin-slow: spin 8s linear infinite;
+  --animate-pop-in: fade-in-up 0.6s ease-out forwards;
+  --animate-spin-slow: spin 15s linear infinite;
 
-  @keyframes pop-in {
-    0% { opacity: 0; transform: scale(0.8); }
-    100% { opacity: 1; transform: scale(1); }
+  @keyframes fade-in-up {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
   }
 }
 
 @layer base {
   body {
     @apply bg-pop-bg text-pop-black font-sans antialiased;
-    background-image: radial-gradient(#111 2px, transparent 2px);
-    background-size: 32px 32px;
-    background-position: 0 0, 16px 16px;
+    background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%),
+                      radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%);
     min-height: 100vh;
   }
 
   h1, h2, h3, h4 {
-    @apply text-pop-black font-black uppercase tracking-tight;
+    @apply text-pop-black font-semibold tracking-tight;
   }
 }
 
 @layer components {
   .brutal-box {
-    @apply bg-white border-4 border-pop-black shadow-brutal transition-all duration-300;
+    @apply bg-white border border-gray-100 rounded-2xl shadow-brutal transition-all duration-300;
   }
   
   .brutal-box-hover {
-    @apply hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
+    @apply hover:-translate-y-2 hover:shadow-brutal-hover;
   }
 
   .brutal-button {
-    @apply px-8 py-4 bg-pop-yellow text-pop-black font-black uppercase border-4 border-pop-black shadow-brutal transition-all duration-200 hover:bg-pop-pink hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
+    @apply px-8 py-4 bg-pop-pink text-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-pop-red hover:-translate-y-1 hover:shadow-brutal-hover;
   }
 
   .brutal-button-alt {
-    @apply px-8 py-4 bg-pop-cyan text-pop-black font-black uppercase border-4 border-pop-black shadow-brutal transition-all duration-200 hover:bg-pop-orange hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
+    @apply px-8 py-4 bg-white text-pop-pink font-medium rounded-full border border-pop-pink shadow-brutal transition-all duration-300 hover:bg-pop-bg hover:-translate-y-1 hover:shadow-brutal-hover;
   }
 }
 
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
-  width: 12px;
+  width: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-pop-bg border-l-4 border-pop-black;
+  @apply bg-pop-bg;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-pop-pink border-4 border-pop-black;
+  @apply bg-gray-300 rounded-full;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-pop-red;
+  @apply bg-gray-400;
 }
 
 /* Smooth Scrolling */
@@ -86,6 +82,6 @@ html {
   max-width: 480px;
   margin: 2rem auto;
   display: block;
-  border: 4px solid var(--color-pop-black);
+  border-radius: 16px;
   box-shadow: var(--shadow-brutal);
 }