|
| 1 | +@tailwind base; |
| 2 | +@tailwind components; |
| 3 | +@tailwind utilities; |
| 4 | + |
| 5 | +@layer base { |
| 6 | + :root { |
| 7 | + --background: 0 0% 100%; |
| 8 | + --foreground: 222.2 84% 4.9%; |
| 9 | + --card: 0 0% 100%; |
| 10 | + --card-foreground: 222.2 84% 4.9%; |
| 11 | + --popover: 0 0% 100%; |
| 12 | + --popover-foreground: 222.2 84% 4.9%; |
| 13 | + --primary: 249 80% 60%; |
| 14 | + --primary-foreground: 210 40% 98%; |
| 15 | + --secondary: 249 75% 68%; |
| 16 | + --secondary-foreground: 222.2 47.4% 11.2%; |
| 17 | + --muted: 210 40% 96.1%; |
| 18 | + --muted-foreground: 215.4 16.3% 46.9%; |
| 19 | + --accent: 250 60% 49%; |
| 20 | + --accent-foreground: 210 40% 98%; |
| 21 | + --destructive: 0 84.2% 60.2%; |
| 22 | + --destructive-foreground: 210 40% 98%; |
| 23 | + --border: 214.3 31.8% 91.4%; |
| 24 | + --input: 214.3 31.8% 91.4%; |
| 25 | + --ring: 249 80% 60%; |
| 26 | + --radius: 0.5rem; |
| 27 | + } |
| 28 | + |
| 29 | + .dark { |
| 30 | + --background: 222.2 84% 4.9%; |
| 31 | + --foreground: 210 40% 98%; |
| 32 | + --card: 222.2 84% 4.9%; |
| 33 | + --card-foreground: 210 40% 98%; |
| 34 | + --popover: 222.2 84% 4.9%; |
| 35 | + --popover-foreground: 210 40% 98%; |
| 36 | + --primary: 249 80% 60%; |
| 37 | + --primary-foreground: 210 40% 98%; |
| 38 | + --secondary: 249 75% 68%; |
| 39 | + --secondary-foreground: 210 40% 98%; |
| 40 | + --muted: 217.2 32.6% 17.5%; |
| 41 | + --muted-foreground: 215 20.2% 65.1%; |
| 42 | + --accent: 250 60% 49%; |
| 43 | + --accent-foreground: 210 40% 98%; |
| 44 | + --destructive: 0 62.8% 30.6%; |
| 45 | + --destructive-foreground: 210 40% 98%; |
| 46 | + --border: 217.2 32.6% 17.5%; |
| 47 | + --input: 217.2 32.6% 17.5%; |
| 48 | + --ring: 249 80% 60%; |
| 49 | + } |
| 50 | +} |
| 51 | + |
| 52 | +@layer base { |
| 53 | + * { |
| 54 | + @apply border-border; |
| 55 | + } |
| 56 | + body { |
| 57 | + @apply bg-background text-foreground; |
| 58 | + } |
| 59 | +} |
| 60 | + |
| 61 | +@keyframes gradient-shift { |
| 62 | + 0% { |
| 63 | + background-position: 0% 50%; |
| 64 | + } |
| 65 | + 50% { |
| 66 | + background-position: 100% 50%; |
| 67 | + } |
| 68 | + 100% { |
| 69 | + background-position: 0% 50%; |
| 70 | + } |
| 71 | +} |
| 72 | + |
| 73 | +.animated-gradient { |
| 74 | + background-size: 200% 200%; |
| 75 | + animation: gradient-shift 8s ease infinite; |
| 76 | +} |
| 77 | + |
| 78 | +/* Grid pattern for background */ |
| 79 | +.bg-grid-pattern { |
| 80 | + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px), |
| 81 | + linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px); |
| 82 | + background-size: 20px 20px; |
| 83 | +} |
| 84 | + |
| 85 | +.dark .bg-grid-pattern { |
| 86 | + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), |
| 87 | + linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px); |
| 88 | +} |
| 89 | + |
| 90 | +/* Add this new CSS class for the shimmering effect */ |
| 91 | +@keyframes shimmer { |
| 92 | + 0% { |
| 93 | + background-position: -200% 0; |
| 94 | + } |
| 95 | + 100% { |
| 96 | + background-position: 200% 0; |
| 97 | + } |
| 98 | +} |
| 99 | + |
| 100 | +.shimmer-effect { |
| 101 | + background: linear-gradient( |
| 102 | + 90deg, |
| 103 | + rgba(88, 71, 235, 0.8) 0%, |
| 104 | + rgba(122, 108, 240, 1) 25%, |
| 105 | + rgba(255, 215, 0, 0.9) 50%, |
| 106 | + rgba(122, 108, 240, 1) 75%, |
| 107 | + rgba(88, 71, 235, 0.8) 100% |
| 108 | + ); |
| 109 | + background-size: 200% auto; |
| 110 | + background-clip: text; |
| 111 | + text-fill-color: transparent; |
| 112 | + -webkit-background-clip: text; |
| 113 | + -webkit-text-fill-color: transparent; |
| 114 | + animation: shimmer 8s linear infinite; |
| 115 | +} |
0 commit comments