Coinbase Chat MCP

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Custom scrollbar styles */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 4px; transition: all 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #4f46e5, #7c3aed); } /* Custom animations */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } 50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Utility classes */ .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } .shimmer { background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4), transparent ); background-size: 200% 100%; animation: shimmer 2s infinite; } /* Glass morphism effect */ .glass { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); } /* Gradient text */ .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Custom focus styles */ .focus-ring { @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white; } /* Smooth transitions */ * { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* Enhanced button styles */ .btn-primary { @apply bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-semibold py-3 px-6 rounded-xl shadow-lg hover:from-blue-600 hover:to-indigo-700 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2; } .btn-secondary { @apply bg-white text-gray-700 font-semibold py-3 px-6 rounded-xl shadow-md border border-gray-200 hover:bg-gray-50 hover:shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2; } /* Card styles */ .card { @apply bg-white rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden backdrop-blur-sm; } .card-header { @apply p-6 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200; } .card-body { @apply p-6; } /* Form styles */ .form-input { @apply w-full border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white/50 backdrop-blur-sm; } .form-label { @apply block text-sm font-semibold text-gray-700 mb-2; } /* Status indicators */ .status-success { @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800; } .status-error { @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800; } .status-warning { @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800; } .status-info { @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800; } /* Loading states */ .loading-spinner { @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin; } /* Responsive typography */ @media (max-width: 640px) { .responsive-text { font-size: clamp(1rem, 4vw, 1.5rem); } } /* Dark mode support (future enhancement) */ @media (prefers-color-scheme: dark) { .dark-mode { @apply bg-gray-900 text-white; } }