index.css•2.44 kB
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: hsl(0, 0%, 100%);
--foreground: hsl(20, 14.3%, 4.1%);
--muted: hsl(60, 4.8%, 95.9%);
--muted-foreground: hsl(25, 5.3%, 44.7%);
--popover: hsl(0, 0%, 100%);
--popover-foreground: hsl(20, 14.3%, 4.1%);
--card: hsl(0, 0%, 100%);
--card-foreground: hsl(20, 14.3%, 4.1%);
--border: hsl(20, 5.9%, 90%);
--input: hsl(20, 5.9%, 90%);
--primary: hsl(207, 90%, 54%);
--primary-foreground: hsl(211, 100%, 99%);
--secondary: hsl(60, 4.8%, 95.9%);
--secondary-foreground: hsl(24, 9.8%, 10%);
--accent: hsl(60, 4.8%, 95.9%);
--accent-foreground: hsl(24, 9.8%, 10%);
--destructive: hsl(0, 84.2%, 60.2%);
--destructive-foreground: hsl(60, 9.1%, 97.8%);
--ring: hsl(20, 14.3%, 4.1%);
--radius: 0.5rem;
/* Dark theme colors */
--dark-900: hsl(240, 13%, 9%);
--dark-800: hsl(240, 13%, 10%);
--dark-700: hsl(240, 8%, 16%);
--dark-600: hsl(240, 6%, 25%);
--dark-500: hsl(240, 6%, 30%);
}
.dark {
--background: hsl(240, 13%, 9%);
--foreground: hsl(0, 0%, 98%);
--muted: hsl(240, 8%, 16%);
--muted-foreground: hsl(240, 5%, 64.9%);
--popover: hsl(240, 13%, 10%);
--popover-foreground: hsl(0, 0%, 98%);
--card: hsl(240, 13%, 10%);
--card-foreground: hsl(0, 0%, 98%);
--border: hsl(240, 6%, 25%);
--input: hsl(240, 8%, 16%);
--primary: hsl(271, 91%, 65%);
--primary-foreground: hsl(0, 0%, 98%);
--secondary: hsl(240, 8%, 16%);
--secondary-foreground: hsl(0, 0%, 98%);
--accent: hsl(240, 8%, 16%);
--accent-foreground: hsl(0, 0%, 98%);
--destructive: hsl(0, 62.8%, 30.6%);
--destructive-foreground: hsl(0, 0%, 98%);
--ring: hsl(240, 4.9%, 83.9%);
--radius: 0.5rem;
}
@layer base {
* {
@apply border-border;
}
body {
@apply font-sans antialiased bg-background text-foreground;
}
html {
@apply dark;
}
body {
color-scheme: dark;
}
}
/* Custom animations */
@keyframes gradient {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient 3s ease infinite;
}
/* Tool card hover effects */
.tool-card {
transition: all 0.2s ease-in-out;
}
.tool-card:hover {
transform: translateY(-2px);
}
/* Loading spinner */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}