108 lines
2.2 KiB
CSS
108 lines
2.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 243, 255, 0.3);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 243, 255, 0.6);
|
|
}
|
|
|
|
/* Holographic Glass */
|
|
.glass-holo {
|
|
background: linear-gradient(135deg, rgba(10, 15, 30, 0.7) 0%, rgba(20, 30, 50, 0.5) 100%);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(0, 243, 255, 0.1);
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.glass-holo::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.5), transparent);
|
|
}
|
|
|
|
/* Active Element */
|
|
.glass-active {
|
|
background: rgba(0, 243, 255, 0.1);
|
|
border: 1px solid rgba(0, 243, 255, 0.4);
|
|
box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
|
|
}
|
|
|
|
/* Text Glows */
|
|
.text-glow-blue {
|
|
color: #00f3ff;
|
|
text-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
|
|
}
|
|
|
|
.text-glow-purple {
|
|
color: #bc13fe;
|
|
text-shadow: 0 0 8px rgba(188, 19, 254, 0.6);
|
|
}
|
|
|
|
.text-glow-red {
|
|
color: #ff0055;
|
|
text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
|
|
}
|
|
|
|
.text-glow-green {
|
|
color: #0aff00;
|
|
text-shadow: 0 0 8px rgba(10, 255, 0, 0.6);
|
|
}
|
|
|
|
/* Grid Background */
|
|
.grid-bg {
|
|
background-size: 50px 50px;
|
|
background-image:
|
|
linear-gradient(to right, rgba(0, 243, 255, 0.05) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
|
|
mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
|
|
}
|
|
|
|
/* CRT Scanline Effect */
|
|
.scanlines {
|
|
background: linear-gradient(to bottom,
|
|
rgba(255, 255, 255, 0),
|
|
rgba(255, 255, 255, 0) 50%,
|
|
rgba(0, 0, 0, 0.2) 50%,
|
|
rgba(0, 0, 0, 0.2));
|
|
background-size: 100% 4px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Tech Clip Path */
|
|
.clip-tech {
|
|
clip-path: polygon(0 0,
|
|
100% 0,
|
|
100% calc(100% - 10px),
|
|
calc(100% - 10px) 100%,
|
|
0 100%);
|
|
}
|
|
|
|
.clip-tech-inv {
|
|
clip-path: polygon(10px 0,
|
|
100% 0,
|
|
100% 100%,
|
|
0 100%,
|
|
0 10px);
|
|
} |