Spaces:
Sleeping
Sleeping
File size: 2,746 Bytes
1bbe15b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | @import "tailwindcss";
/* ββ Base βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
body {
margin: 0;
background: #0f172a;
color: #f1f5f9;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
#root {
width: 100%;
max-width: 100%;
margin: 0;
text-align: left;
border: none;
min-height: 100vh;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
/* ββ Animated gradient hero ββββββββββββββββββββββββββββββββββββββββββββββββ */
.hero-gradient {
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #172554 70%, #0f172a 100%);
background-size: 300% 300%;
animation: shift 10s ease infinite;
}
@keyframes shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ββ Shield pulse ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.pulse-ring {
animation: pulse 2.5s ease-out infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(99,102,241,.45); }
70% { box-shadow: 0 0 0 18px rgba(99,102,241,0); }
100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
/* ββ Spinner βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.spinner {
border: 3px solid #334155;
border-top-color: #818cf8;
border-radius: 50%;
width: 44px; height: 44px;
animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ββ Smooth progress bar βββββββββββββββββββββββββββββββββββββββββββββββββββ */
.bar-fill { transition: width .6s cubic-bezier(.22,1,.36,1); }
/* ββ Floating particles (decorative) βββββββββββββββββββββββββββββββββββββββ */
.particle {
position: absolute;
border-radius: 50%;
background: rgba(99,102,241,.12);
pointer-events: none;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%,100% { transform: translateY(0) scale(1); opacity: .4; }
50% { transform: translateY(-30px) scale(1.15); opacity: .7; }
}
|