feat(ui): premium refinement UX Luxe + Add Feed functionality

web/src/index.css

@@ -1,29 +1,42 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
 @import "tailwindcss";
 
 @theme {
-  --color-carbon: #1a1a1a;
-  --color-carbon-light: #262626;
-  --color-carbon-dark: #121212;
-  --color-gold: #d4af37;
-  --color-paper-white: #e5e5e5;
-  --color-paper-muted: #a3a3a3;
+  --color-carbon: #121212;
+  --color-carbon-light: #1e1e1e;
+  --color-carbon-dark: #0a0a0a;
+  --color-gold: #c5a059;
+  --color-gold-bright: #e2c28d;
+  --color-paper-white: #f5f5f5;
+  --color-paper-muted: #888888;
 
   --font-serif: "Playfair Display", serif;
-  --font-sans: Inter, sans-serif;
-  --font-reading: Lora, serif;
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-reading: "Lora", serif;
 
-  --line-height-magazine: 1.7;
+  --line-height-magazine: 1.8;
 }
 
 @utility gold-glow {
-  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
+  box-shadow: 0 0 20px rgba(197, 160, 89, 0.15);
+}
+
+@utility glass-panel {
+  background: rgba(30, 30, 30, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 @layer base {
   body {
-    @apply bg-carbon text-paper-white font-sans antialiased;
+    @apply bg-carbon text-paper-white font-sans antialiased selection:bg-gold/30;
     margin: 0;
     min-height: 100vh;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+    background-size: 200px 200px;
+    background-repeat: repeat;
+    background-blend-mode: overlay;
   }
 
   h1,
@@ -32,26 +45,52 @@
   h4,
   h5,
   h6 {
-    @apply font-serif;
+    @apply font-serif tracking-tight leading-tight;
   }
 
   a {
-    @apply transition-colors duration-200;
+    @apply transition-all duration-300 decoration-gold/30 underline-offset-4 hover:decoration-gold;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(197, 160, 89, 0.2);
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(197, 160, 89, 0.4);
   }
 }
 
 @layer components {
+  .magazine-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 3rem;
+    padding: 2rem 0;
+  }
+
   .magazine-card {
-    @apply bg-carbon-light border border-carbon-light hover:border-gold transition-all duration-300 rounded-lg overflow-hidden;
+    @apply relative transition-all duration-500 ease-out;
   }
 
   .btn-primary {
-    @apply bg-gold text-carbon font-medium px-4 py-2 rounded-md hover:brightness-110 transition-all;
+    @apply bg-gold text-carbon font-bold px-6 py-2.5 rounded-full hover:bg-gold-bright hover:-translate-y-0.5 transition-all shadow-lg active:scale-95 text-xs uppercase tracking-widest;
   }
 
-  .btn-secondary {
-    @apply border border-gold text-gold px-4 py-2 rounded-md hover:bg-gold/10 transition-all;
+  .btn-ghost {
+    @apply text-paper-muted hover:text-gold hover:bg-gold/5 px-4 py-2 rounded-lg transition-all text-sm;
   }
-}
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
+  .input-field {
+    @apply bg-carbon-dark border border-white/10 text-paper-white px-4 py-3 rounded-lg focus:border-gold/50 focus:ring-1 focus:ring-gold/50 outline-none transition-all placeholder:text-paper-muted/30;
+  }
+}