wip

styles/globals.css

@@ -5,28 +5,68 @@
   --font-heading: 'Inter', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;
 
-  --color-primary: #011fff;
-  --color-primary-dark: #0017bf;
-  --color-primary-light: #e6f0ff;
+  --color-primary: #001a4d; /* Deep Blue */
+  --color-primary-dark: #000d26;
+  --color-primary-light: #e6ebf5;
 
   --color-secondary: #003d82;
   --color-secondary-light: #0056b3;
 
-  --color-accent: #82ed20;
-  --color-accent-light: #f0f7ff;
+  --color-accent: #82ed20; /* Sustainability Green */
+  --color-accent-dark: #6bc41a;
+  --color-accent-light: #f0f9e6;
 
   --color-neutral: #f8f9fa;
   --color-neutral-light: #ffffff;
   --color-neutral-dark: #0a0a0a;
+  --color-neutral-medium: #e5e7eb;
 
-  --color-text-primary: #1a1a1a;
-  --color-text-secondary: #6c757d;
-  --color-text-light: #adb5bd;
+  --color-text-primary: #111827;
+  --color-text-secondary: #4b5563;
+  --color-text-light: #9ca3af;
 
-  --color-success: #28a745;
-  --color-warning: #ffc107;
-  --color-danger: #dc3545;
-  --color-info: #17a2b8;
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+  --color-info: #3b82f6;
+
+  --animate-fade-in: fade-in 0.5s ease-out;
+  --animate-slide-up: slide-up 0.6s ease-out;
+  --animate-slow-zoom: slow-zoom 20s linear infinite;
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes slide-up {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes slow-zoom {
+    from { transform: scale(1); }
+    to { transform: scale(1.1); }
+  }
+}
+
+@layer base {
+  body {
+    @apply text-text-primary bg-neutral-light antialiased;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-heading font-bold tracking-tight;
+  }
+}
+
+@layer components {
+  .glass-panel {
+    @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-lg;
+  }
+  .image-overlay-gradient {
+    @apply absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent;
+  }
+  .premium-card {
+    @apply bg-white rounded-xl border border-neutral-medium shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
+  }
 }
 
 /* Custom Utilities */