initial

web/app/globals.css

@@ -0,0 +1,222 @@
+@import "../styles/fonts.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Font imports */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
+
+/* Screen reader only utility - hidden unless focused */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.focus\:not-sr-only:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* Ensure focus indicators are visible */
+*:focus {
+  outline: 2px solid #16A34A;
+  outline-offset: 2px;
+}
+
+/* Hide focus outline when using mouse */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Visible focus for keyboard navigation */
+:focus-visible {
+  outline: 2px solid #16A34A;
+  outline-offset: 2px;
+}
+
+/* Enhanced Button System */
+.btn-primary {
+  @apply bg-gradient-to-r from-brand-green to-green-600 text-white font-semibold px-8 py-4 rounded-button 
+         hover:from-green-600 hover:to-green-700 hover:shadow-lg hover:-translate-y-0.5 
+         focus:ring-4 focus:ring-green-200 focus:shadow-lg
+         active:from-green-700 active:to-green-800 active:translate-y-0
+         transition-all duration-300 ease-out;
+}
+
+.btn-secondary {
+  @apply bg-white border-2 border-brand-orange text-brand-orange font-semibold px-8 py-4 rounded-button
+         hover:bg-gradient-to-r hover:from-brand-orange hover:to-orange-600 hover:text-white hover:border-transparent
+         hover:shadow-lg hover:-translate-y-0.5
+         focus:ring-4 focus:ring-orange-200 focus:shadow-lg
+         active:from-orange-600 active:to-orange-700 active:translate-y-0
+         transition-all duration-300 ease-out;
+}
+
+.btn-outline {
+  @apply bg-transparent border-2 border-brand-green text-brand-green font-semibold px-8 py-4 rounded-button
+         hover:bg-brand-green hover:text-white hover:shadow-lg hover:-translate-y-0.5
+         focus:ring-4 focus:ring-green-200 focus:shadow-lg
+         active:bg-green-700 active:translate-y-0
+         transition-all duration-300 ease-out;
+}
+
+.btn-ghost {
+  @apply bg-transparent text-brand-green font-semibold px-8 py-4 rounded-button
+         hover:bg-green-50 hover:text-green-700 hover:shadow-md
+         focus:ring-4 focus:ring-green-200
+         active:bg-green-100
+         transition-all duration-200 ease-out;
+}
+
+.btn-danger {
+  @apply bg-gradient-to-r from-brand-danger to-red-600 text-white font-semibold px-8 py-4 rounded-button
+         hover:from-red-600 hover:to-red-700 hover:shadow-lg hover:-translate-y-0.5
+         focus:ring-4 focus:ring-red-200 focus:shadow-lg
+         active:from-red-700 active:to-red-800 active:translate-y-0
+         transition-all duration-300 ease-out;
+}
+
+.btn-sm {
+  @apply px-6 py-3 text-sm;
+}
+
+.btn-lg {
+  @apply px-10 py-5 text-lg;
+}
+
+/* Enhanced Card System */
+.card {
+  @apply bg-white rounded-card shadow-card p-6 border border-gray-100
+         hover:shadow-xl hover:-translate-y-1 hover:border-gray-200
+         transition-all duration-300 ease-out;
+}
+
+.card-elevated {
+  @apply bg-white rounded-card shadow-lg p-8 border border-gray-100
+         hover:shadow-2xl hover:-translate-y-2 hover:border-gray-200
+         transition-all duration-300 ease-out;
+}
+
+.card-gradient {
+  @apply bg-gradient-to-br from-white to-gray-50 rounded-card shadow-card p-6 border border-gray-100
+         hover:shadow-xl hover:-translate-y-1 hover:from-gray-50 hover:to-gray-100
+         transition-all duration-300 ease-out;
+}
+
+.card-dark {
+  @apply bg-gradient-to-br from-brand-dark to-slate-800 text-white rounded-card shadow-lg p-6
+         hover:shadow-xl hover:-translate-y-1 hover:from-slate-800 hover:to-brand-dark
+         transition-all duration-300 ease-out;
+}
+
+/* Gradient Utilities */
+.gradient-primary {
+  @apply bg-gradient-to-r from-brand-green to-green-600;
+}
+
+.gradient-secondary {
+  @apply bg-gradient-to-r from-brand-orange to-orange-600;
+}
+
+.gradient-dark {
+  @apply bg-gradient-to-br from-brand-dark to-slate-800;
+}
+
+.gradient-light {
+  @apply bg-gradient-to-br from-gray-50 to-white;
+}
+
+.gradient-text {
+  @apply bg-gradient-to-r from-brand-green to-green-600 bg-clip-text text-transparent;
+}
+
+.gradient-text-orange {
+  @apply bg-gradient-to-r from-brand-orange to-orange-600 bg-clip-text text-transparent;
+}
+
+/* Enhanced Typography */
+.text-gradient {
+  @apply bg-gradient-to-r from-brand-green to-green-600 bg-clip-text text-transparent;
+}
+
+.text-gradient-orange {
+  @apply bg-gradient-to-r from-brand-orange to-orange-600 bg-clip-text text-transparent;
+}
+
+.font-light {
+  font-weight: 300;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+/* Container */
+.container-custom {
+  @apply max-w-container mx-auto px-6 md:px-8;
+}
+
+/* Animation Utilities */
+.animate-fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+.animate-slide-up {
+  animation: slideUp 0.6s ease-out;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.4s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0; 
+    transform: translateY(20px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0); 
+  }
+}
+
+@keyframes scaleIn {
+  from { 
+    opacity: 0; 
+    transform: scale(0.95); 
+  }
+  to { 
+    opacity: 1; 
+    transform: scale(1); 
+  }
+}