@import "tailwindcss"; :root { --crypto-dark: #0a0a0f; --crypto-card: #12121a; --crypto-border: #1e1e2e; --neon-green: #00ff88; --neon-blue: #00d4ff; --neon-purple: #8b5cf6; --neon-red: #ff3366; --neon-yellow: #ffcc00; } * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: 'JetBrains Mono', 'Fira Code', 'Inter', system-ui, monospace; background: var(--crypto-dark); color: #e2e8f0; min-height: 100vh; position: relative; } /* Global grain texture overlay — premium intelligence platform feel */ body::before { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; } #root { min-height: 100vh; background: var(--crypto-dark); } /* Custom crypto card style */ .crypto-card { background: var(--crypto-card); border: 1px solid var(--crypto-border); border-radius: 0.5rem; padding: 1rem; } /* Neon border effect */ .neon-border { border: 1px solid rgba(0, 255, 136, 0.3); box-shadow: 0 0 10px rgba(0, 255, 136, 0.2); } /* Neon text effect */ .neon-text { color: var(--neon-green); text-shadow: 0 0 5px rgba(0, 255, 136, 0.5); } /* Primary button */ .btn-primary { background: rgba(0, 255, 136, 0.2); color: var(--neon-green); border: 1px solid rgba(0, 255, 136, 0.5); padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s; } .btn-primary:hover { background: rgba(0, 255, 136, 0.3); } /* Secondary button */ .btn-secondary { background: var(--crypto-card); color: #d1d5db; border: 1px solid var(--crypto-border); padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s; } .btn-secondary:hover { border-color: rgba(0, 212, 255, 0.5); color: var(--neon-blue); } /* V2 Utilities */ .text-gradient { background: linear-gradient(135deg, #7c3aed 0%, #fbbf24 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .glow-purple { box-shadow: 0 0 30px rgba(124, 58, 237, 0.4), 0 0 60px rgba(124, 58, 237, 0.2); } .glow-gold { box-shadow: 0 0 30px rgba(251, 191, 36, 0.4), 0 0 60px rgba(251, 191, 36, 0.2); } /* Glassmorphism cards — premium */ .glass-card { background: rgba(10, 10, 18, 0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(168, 85, 247, 0.12); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .glass-card-hover:hover { border-color: rgba(168, 85, 247, 0.3); box-shadow: 0 8px 32px rgba(124, 58, 237, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Smooth section transitions */ section { transition: opacity 0.3s ease, transform 0.3s ease; } /* Scan line effect for data-terminal feel */ .scan-lines { background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(168, 85, 247, 0.015) 2px, rgba(168, 85, 247, 0.015) 4px ); } /* Thin scrollbar for alert feeds */ .scrollbar-thin::-webkit-scrollbar { width: 4px; } .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.2); border-radius: 2px; } /* Animation utilities */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .animate-float { animation: float 6s ease-in-out infinite; } /* Line clamp utility */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Scrollbar styling - V2 Purple Theme */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--crypto-dark); } ::-webkit-scrollbar-thumb { background: #4c1d95; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #6d28d9; }