Context7 MCP Clone

@tailwind base; @tailwind components; @tailwind utilities; /* Root variables */ :root { --primary: #a855f7; --primary-dark: #9333ea; --primary-light: #c084fc; --secondary: #ec4899; --accent: #f97316; --dark-bg: #0f0f0f; --dark-secondary: #1a1a1a; --dark-tertiary: #2d2d2d; } /* Dark mode */ @media (prefers-color-scheme: dark) { body { background-color: var(--dark-bg); color: #ffffff; } } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--dark-secondary); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-light); } /* Gradient backgrounds */ .gradient-purple { background: linear-gradient(135deg, #9333ea 0%, #c084fc 100%); } .gradient-purple-pink { background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%); } .gradient-purple-orange { background: linear-gradient(135deg, #9333ea 0%, #f97316 100%); } .gradient-text { background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f97316 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } .animate-fade-in-up { animation: fadeInUp 0.5s ease-out; } .animate-slide-in-right { animation: slideInRight 0.5s ease-out; } .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; } /* Glass effect */ .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .glass-dark { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } /* Button variants */ .btn-primary { @apply px-6 py-2 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-colors duration-200; } .btn-secondary { @apply px-6 py-2 rounded-lg font-semibold text-white border border-purple-600 hover:bg-purple-600/10 transition-colors duration-200; } .btn-ghost { @apply px-6 py-2 rounded-lg font-semibold text-white hover:bg-white/10 transition-colors duration-200; } /* Typography */ .text-gradient { @apply font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-orange-400; } .heading-xl { @apply text-5xl md:text-6xl lg:text-7xl font-bold leading-tight; } .heading-lg { @apply text-4xl md:text-5xl font-bold; } .heading-md { @apply text-2xl md:text-3xl font-bold; } /* Cards */ .card { @apply rounded-lg border border-gray-800 bg-gray-900/50 backdrop-blur-sm p-6 hover:border-purple-600/50 transition-colors duration-200; } .card-hover { @apply card hover:shadow-lg hover:shadow-purple-600/20; } /* Utilities */ .backdrop-blur-md { backdrop-filter: blur(12px); }