83 lines
1.8 KiB
CSS
83 lines
1.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* * Semantic colors */
|
|
--color-success: #10B981;
|
|
--color-warning: #F59E0B;
|
|
--color-error: #EF4444;
|
|
}
|
|
|
|
body {
|
|
@apply bg-ciphera-gradient bg-fixed;
|
|
}
|
|
|
|
.dark body {
|
|
@apply bg-ciphera-gradient-dark;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* * Glass Card Effect - Crucial for the "Premium" feel */
|
|
.card-glass {
|
|
@apply bg-white/80 dark:bg-neutral-900/80;
|
|
@apply backdrop-blur-xl;
|
|
@apply border border-neutral-200/50 dark:border-neutral-800/50;
|
|
@apply rounded-2xl;
|
|
@apply transition-all duration-300 ease-out;
|
|
}
|
|
|
|
/* * Gradient Text for Headlines */
|
|
.gradient-text {
|
|
@apply bg-gradient-to-r from-brand-orange to-[#E54E00] bg-clip-text text-transparent;
|
|
}
|
|
|
|
/* * The "Pulse" Badge */
|
|
.badge-primary {
|
|
@apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider;
|
|
@apply bg-brand-orange/10 text-brand-orange border border-brand-orange/20;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* * The Background Grid */
|
|
.bg-grid-pattern {
|
|
background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
|
|
background-size: 32px 32px;
|
|
}
|
|
|
|
/* * Glow Effects */
|
|
.glow-orange {
|
|
box-shadow: 0 0 40px -10px rgba(253, 94, 15, 0.5);
|
|
}
|
|
|
|
/* * 3D Transform Utilities */
|
|
.perspective-1000 {
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.rotate-x-12 {
|
|
transform: rotateX(12deg);
|
|
}
|
|
|
|
.rotate-x-0 {
|
|
transform: rotateX(0deg);
|
|
}
|
|
|
|
.transform-style-3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* * Animations */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
}
|