97 lines
2.9 KiB
CSS
97 lines
2.9 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 180 30% 98%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 171 77% 35%; /* Teal/Emerald */
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 180 15% 90%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 180 15% 90%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 171 77% 35%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 180 15% 85%;
|
|
--input: 180 15% 85%;
|
|
--ring: 171 77% 35%;
|
|
--radius: 1rem; /* 16px border radius for glassmorphism */
|
|
}
|
|
|
|
.dark {
|
|
--background: 222 47% 7%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222 47% 9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222 47% 9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 171 77% 45%; /* Vibrant Teal */
|
|
--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: 171 77% 45%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground font-sans;
|
|
/* Soft mesh gradient background */
|
|
background-image:
|
|
radial-gradient(at 0% 0%, hsla(171, 77%, 35%, 0.15) 0px, transparent 50%),
|
|
radial-gradient(at 100% 0%, hsla(222, 47%, 50%, 0.15) 0px, transparent 50%),
|
|
radial-gradient(at 100% 100%, hsla(280, 50%, 50%, 0.15) 0px, transparent 50%);
|
|
background-attachment: fixed;
|
|
}
|
|
.dark body {
|
|
background-image:
|
|
radial-gradient(at 0% 0%, hsla(171, 77%, 45%, 0.15) 0px, transparent 50%),
|
|
radial-gradient(at 100% 0%, hsla(222, 47%, 50%, 0.15) 0px, transparent 50%),
|
|
radial-gradient(at 100% 100%, hsla(280, 50%, 50%, 0.15) 0px, transparent 50%);
|
|
}
|
|
}
|
|
|
|
/* Glassmorphism utility classes */
|
|
@layer utilities {
|
|
.glass-panel {
|
|
@apply bg-background/60 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg;
|
|
}
|
|
.glass-card {
|
|
@apply bg-card/60 backdrop-blur-md border border-white/20 dark:border-white/10 shadow-sm hover:shadow-md transition-shadow;
|
|
}
|
|
|
|
/* Custom thin scrollbar */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
@apply bg-border rounded-full;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-primary/50;
|
|
}
|
|
}
|