x

apps/spa/src/index.css

@@ -1,71 +1,78 @@
 @import "tailwindcss";
 
 @theme {
-  /* Night Luxury color palette */
-  --color-night-900: #0B0C10;
-  --color-night-800: #1F2833;
-  --color-night-700: #45A29E;
-  --color-cyan-glow: #66FCF1;
-  --color-silver-metallic: #C5C6C7;
+  /* Memphis Pop-Art color palette */
+  --color-pop-pink: #FF69B4;
+  --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;
 
+  /* Brutalist Shadows */
+  --shadow-brutal: 6px 6px 0px 0px #111;
+  --shadow-brutal-hover: 2px 2px 0px 0px #111;
+  
   /* Custom animations */
-  --animate-fade-in: fade-in 1.2s ease-out forwards;
-  --animate-float: float 3s ease-in-out infinite;
+  --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;
 
-  @keyframes fade-in {
-    0% { opacity: 0; transform: translateY(10px); }
-    100% { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
+  @keyframes pop-in {
+    0% { opacity: 0; transform: scale(0.8); }
+    100% { opacity: 1; transform: scale(1); }
   }
 }
 
 @layer base {
   body {
-    @apply bg-night-900 text-silver-metallic font-sans antialiased;
-    background-image: 
-      radial-gradient(at 0% 0%, rgba(31, 40, 51, 0.5) 0px, transparent 50%),
-      radial-gradient(at 100% 100%, rgba(11, 12, 16, 1) 0px, transparent 50%);
+    @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;
     min-height: 100vh;
   }
 
   h1, h2, h3, h4 {
-    @apply text-white tracking-tight leading-none;
+    @apply text-pop-black font-black uppercase tracking-tight;
   }
 }
 
 @layer components {
-  .glass {
-    @apply bg-white/5 backdrop-blur-lg border border-white/10;
+  .brutal-box {
+    @apply bg-white border-4 border-pop-black shadow-brutal transition-all duration-300;
   }
   
-  .glass-hover {
-    @apply transition-all duration-300 hover:bg-white/10 hover:border-white/20;
+  .brutal-box-hover {
+    @apply hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
   }
 
-  .text-glow {
-    text-shadow: 0 0 15px rgba(102, 252, 241, 0.4);
+  .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;
+  }
+
+  .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;
   }
 }
 
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 12px;
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-night-900;
+  @apply bg-pop-bg border-l-4 border-pop-black;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-night-800 rounded-full border-2 border-night-900;
+  @apply bg-pop-pink border-4 border-pop-black;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-night-700;
+  @apply bg-pop-red;
 }
 
 /* Smooth Scrolling */
@@ -73,12 +80,12 @@ html {
   scroll-behavior: smooth;
 }
 
-/* Product Editorial Image Overrides (for ReactQuill Content) */
+/* Product Editorial Image Overrides */
 .product-editorial img {
   width: 100%;
   max-width: 480px;
   margin: 2rem auto;
   display: block;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+  border: 4px solid var(--color-pop-black);
+  box-shadow: var(--shadow-brutal);
 }