302 lines
6.9 KiB
CSS
302 lines
6.9 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/**
|
|
* Tailwind CSS theme
|
|
* tailwind.config.ts expects the following color variables to be expressed as HSL values.
|
|
* A different format will require also updating the theme in tailwind.config.ts.
|
|
*/
|
|
:root {
|
|
--background: 222 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
|
|
--card: 222 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
|
|
--popover: 222 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
|
|
--primary: 250 100% 60%;
|
|
--primary-foreground: 210 40% 98%;
|
|
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 250 100% 70%;
|
|
|
|
--radius: 0.5rem;
|
|
|
|
--sidebar-background: 240 5.9% 10%;
|
|
--sidebar-foreground: 240 4.8% 95.9%;
|
|
--sidebar-primary: 250 100% 60%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 240 3.7% 15.9%;
|
|
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
|
--sidebar-border: 240 3.7% 15.9%;
|
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
|
|
/* AeThex Brand Colors */
|
|
--aethex-50: 250 100% 97%;
|
|
--aethex-100: 250 100% 95%;
|
|
--aethex-200: 250 100% 90%;
|
|
--aethex-300: 250 100% 80%;
|
|
--aethex-400: 250 100% 70%;
|
|
--aethex-500: 250 100% 60%;
|
|
--aethex-600: 250 100% 50%;
|
|
--aethex-700: 250 100% 40%;
|
|
--aethex-800: 250 100% 30%;
|
|
--aethex-900: 250 100% 20%;
|
|
--aethex-950: 250 100% 10%;
|
|
|
|
/* Neon Colors for Accents */
|
|
--neon-purple: 280 100% 70%;
|
|
--neon-blue: 210 100% 70%;
|
|
--neon-green: 120 100% 70%;
|
|
--neon-yellow: 50 100% 70%;
|
|
}
|
|
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: 'Courier New', 'Courier', monospace;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-gradient {
|
|
@apply bg-gradient-to-r from-aethex-400 via-neon-blue to-aethex-600 bg-clip-text text-transparent;
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 3s ease-in-out infinite;
|
|
}
|
|
|
|
.text-gradient-purple {
|
|
@apply bg-gradient-to-r from-neon-purple via-aethex-500 to-neon-blue bg-clip-text text-transparent;
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 4s ease-in-out infinite;
|
|
}
|
|
|
|
.bg-aethex-gradient {
|
|
@apply bg-gradient-to-br from-aethex-900 via-background to-aethex-800;
|
|
}
|
|
|
|
.border-gradient {
|
|
@apply relative overflow-hidden;
|
|
}
|
|
|
|
.border-gradient::before {
|
|
content: '';
|
|
@apply absolute inset-0 rounded-[inherit] p-[1px] bg-gradient-to-r from-aethex-400 via-neon-blue to-aethex-600;
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: xor;
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 2s ease-in-out infinite;
|
|
}
|
|
|
|
.glow-purple {
|
|
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.2);
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.glow-purple:hover {
|
|
box-shadow: 0 0 30px rgba(139, 92, 246, 0.5), 0 0 60px rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
.glow-blue {
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(59, 130, 246, 0.2);
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.glow-blue:hover {
|
|
box-shadow: 0 0 30px rgba(59, 130, 246, 0.5), 0 0 60px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.glow-green {
|
|
box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 0 40px rgba(34, 197, 94, 0.2);
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.glow-yellow {
|
|
box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), 0 0 40px rgba(251, 191, 36, 0.2);
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.6s ease-out;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slide-up 0.6s ease-out;
|
|
}
|
|
|
|
.animate-slide-down {
|
|
animation: slide-down 0.6s ease-out;
|
|
}
|
|
|
|
.animate-slide-left {
|
|
animation: slide-left 0.6s ease-out;
|
|
}
|
|
|
|
.animate-slide-right {
|
|
animation: slide-right 0.6s ease-out;
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scale-in 0.4s ease-out;
|
|
}
|
|
|
|
.animate-bounce-gentle {
|
|
animation: bounce-gentle 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-pulse-glow {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-typing {
|
|
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
|
|
overflow: hidden;
|
|
border-right: 3px solid;
|
|
white-space: nowrap;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hover-lift {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.hover-glow {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hover-glow:hover {
|
|
filter: brightness(1.1) drop-shadow(0 0 10px currentColor);
|
|
}
|
|
|
|
.interactive-scale {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.interactive-scale:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.interactive-scale:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.loading-dots::after {
|
|
content: '';
|
|
animation: loading-dots 1.5s infinite;
|
|
}
|
|
|
|
.skeleton {
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slide-down {
|
|
from { opacity: 0; transform: translateY(-30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slide-left {
|
|
from { opacity: 0; transform: translateX(30px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes slide-right {
|
|
from { opacity: 0; transform: translateX(-30px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes scale-in {
|
|
from { opacity: 0; transform: scale(0.9); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
@keyframes bounce-gentle {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.8; transform: scale(1.05); }
|
|
}
|
|
|
|
@keyframes typing {
|
|
from { width: 0; }
|
|
to { width: 100%; }
|
|
}
|
|
|
|
@keyframes blink-caret {
|
|
from, to { border-color: transparent; }
|
|
50% { border-color: currentColor; }
|
|
}
|
|
|
|
@keyframes loading-dots {
|
|
0% { content: ''; }
|
|
25% { content: '.'; }
|
|
50% { content: '..'; }
|
|
75% { content: '...'; }
|
|
100% { content: ''; }
|
|
}
|
|
|
|
@keyframes skeleton-loading {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|