435 lines
7.9 KiB
CSS
435 lines
7.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%;
|
|
|
|
/* Spacing tokens */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 24px;
|
|
--space-6: 32px;
|
|
--space-section-y: var(--space-6);
|
|
--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;
|
|
}
|
|
|
|
.container {
|
|
@apply px-4 sm:px-6 lg:px-8;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.section-cozy {
|
|
padding-block: var(--space-section-y);
|
|
}
|
|
.gap-cozy {
|
|
gap: var(--space-5);
|
|
}
|
|
.pad-cozy {
|
|
padding: var(--space-5);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|