File size: 2,502 Bytes
6e62ad1 4defdd0 6e62ad1 4defdd0 6e62ad1 4defdd0 6e62ad1 4defdd0 6e62ad1 4defdd0 6e62ad1 4defdd0 6e62ad1 4defdd0 6e62ad1 4defdd0 6e62ad1 4defdd0 6e62ad1 4defdd0 6e62ad1 4defdd0 6e62ad1 | 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | @tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body, #root {
height: 100%;
width: 100%;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: #0f0f1e;
color: #f1f5f9;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #2a2a4a;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #3a3a5a;
}
}
@layer components {
.glass {
background: rgba(28, 28, 54, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(139, 92, 246, 0.2);
}
.glass-card {
background: rgba(28, 28, 54, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid #2a2a4a;
border-radius: 1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.gradient-text {
background: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-border {
position: relative;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(34,211,238,0.2));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.glow-accent {
box-shadow: 0 0 20px rgba(139, 92, 246, 0.25), 0 0 40px rgba(139, 92, 246, 0.1);
}
.shimmer-bg {
background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
background-size: 200% 100%;
animation: shimmer 2s linear infinite;
}
}
/* Animated background orbs */
.bg-orbs {
position: fixed;
inset: 0;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.25;
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(0, 0); }
33% { transform: translate(30px, -40px); }
66% { transform: translate(-20px, 30px); }
}
|