mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 05:31:13 -05:00
122 lines
3.4 KiB
CSS
122 lines
3.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
|
|
All colors MUST be HSL.
|
|
*/
|
|
|
|
@layer base {
|
|
:root {
|
|
/* ThrillWiki light theme - bright and vibrant */
|
|
--background: 0 0% 100%;
|
|
--foreground: 240 10% 3.9%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 3.9%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
|
|
/* Blue and purple thrill-inspired colors */
|
|
--primary: 258 90% 66%; /* Deep vibrant purple */
|
|
--primary-foreground: 0 0% 98%;
|
|
--primary-glow: 258 100% 80%;
|
|
|
|
--secondary: 216 87% 55%; /* Rich royal blue */
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
--muted: 240 4.8% 95.9%;
|
|
--muted-foreground: 240 3.8% 46.1%;
|
|
|
|
--accent: 216 87% 55%; /* Bright blue for action */
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--border: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
--ring: 258 90% 66%;
|
|
|
|
/* Theme park gradients */
|
|
--gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
|
|
--gradient-secondary: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--accent)));
|
|
--gradient-hero: linear-gradient(135deg, hsl(258 90% 66%), hsl(216 87% 55%), hsl(210 100% 65%));
|
|
--gradient-card: linear-gradient(145deg, hsl(0 0% 98%), hsl(240 4.8% 95.9%));
|
|
|
|
/* Thrill shadows and effects */
|
|
--shadow-glow: 0 0 40px hsl(var(--primary) / 0.4);
|
|
--shadow-card: 0 10px 30px -10px hsl(var(--primary) / 0.3);
|
|
--shadow-intense: 0 25px 50px -12px hsl(var(--primary) / 0.5);
|
|
|
|
/* Animation variables */
|
|
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
|
--radius: 0.5rem;
|
|
|
|
--sidebar-background: 0 0% 98%;
|
|
--sidebar-foreground: 240 5.3% 26.1%;
|
|
--sidebar-primary: 240 5.9% 10%;
|
|
--sidebar-primary-foreground: 0 0% 98%;
|
|
--sidebar-accent: 240 4.8% 95.9%;
|
|
--sidebar-accent-foreground: 240 5.9% 10%;
|
|
--sidebar-border: 220 13% 91%;
|
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
}
|
|
|
|
.dark {
|
|
/* Dark mode uses vibrant colors on dark backgrounds */
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
|
|
--card: 240 8% 7%;
|
|
--card-foreground: 0 0% 98%;
|
|
|
|
--popover: 240 8% 7%;
|
|
--popover-foreground: 0 0% 98%;
|
|
|
|
--primary: 258 90% 66%; /* Deep vibrant purple */
|
|
--primary-foreground: 0 0% 98%;
|
|
--primary-glow: 258 100% 80%;
|
|
|
|
--secondary: 216 87% 55%; /* Rich royal blue */
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
--muted: 240 5% 20%;
|
|
--muted-foreground: 240 5% 64%;
|
|
|
|
--accent: 216 87% 55%; /* Bright blue for action */
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--border: 240 6% 15%;
|
|
--input: 240 6% 15%;
|
|
--ring: 258 90% 66%;
|
|
|
|
--gradient-card: linear-gradient(145deg, hsl(240 10% 5%), hsl(240 8% 7%));
|
|
|
|
--sidebar-background: 240 5.9% 10%;
|
|
--sidebar-foreground: 240 4.8% 95.9%;
|
|
--sidebar-primary: 224.3 76.3% 48%;
|
|
--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%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|