danielmorrisey.com
A simple SEO inspecter Tool, to get social media card previews
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
6All colors MUST be HSL.
7*/
8
9@layer base {
10 :root {
11 --background: 210 20% 98%;
12 --foreground: 215 25% 27%;
13
14 --card: 0 0% 100%;
15 --card-foreground: 215 25% 27%;
16
17 --popover: 0 0% 100%;
18 --popover-foreground: 215 25% 27%;
19
20 --primary: 214 84% 56%;
21 --primary-foreground: 0 0% 100%;
22 --primary-glow: 213 93% 67%;
23
24 --secondary: 210 40% 96%;
25 --secondary-foreground: 215 25% 27%;
26
27 --muted: 210 40% 96%;
28 --muted-foreground: 215 16% 47%;
29
30 --accent: 213 27% 84%;
31 --accent-foreground: 215 25% 27%;
32
33 --destructive: 0 84% 60%;
34 --destructive-foreground: 0 0% 100%;
35
36 --border: 214 32% 91%;
37 --input: 214 32% 91%;
38 --ring: 214 84% 56%;
39
40 --success: 142 71% 45%;
41 --success-foreground: 0 0% 100%;
42
43 --warning: 38 92% 50%;
44 --warning-foreground: 0 0% 12%;
45
46 /* Gradients */
47 --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
48 --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(210 40% 95%));
49
50 /* Shadows */
51 --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.2);
52 --shadow-card: 0 4px 12px -2px hsl(215 25% 27% / 0.08);
53 --shadow-glow: 0 0 40px hsl(var(--primary) / 0.3);
54
55 /* Animations */
56 --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
57 --transition-bounce: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
58
59 --shimmer-bg: linear-gradient(
60 90deg,
61 transparent,
62 hsl(var(--primary) / 0.1),
63 transparent
64 );
65
66 --radius: 0.5rem;
67
68 --sidebar-background: 0 0% 98%;
69
70 --sidebar-foreground: 240 5.3% 26.1%;
71
72 --sidebar-primary: 240 5.9% 10%;
73
74 --sidebar-primary-foreground: 0 0% 98%;
75
76 --sidebar-accent: 240 4.8% 95.9%;
77
78 --sidebar-accent-foreground: 240 5.9% 10%;
79
80 --sidebar-border: 220 13% 91%;
81
82 --sidebar-ring: 217.2 91.2% 59.8%;
83 }
84
85 .dark {
86 --background: 0 0% 7%;
87 --foreground: 0 0% 88%;
88
89 --card: 0 0% 12%;
90 --card-foreground: 0 0% 88%;
91
92 --popover: 0 0% 12%;
93 --popover-foreground: 0 0% 88%;
94
95 --primary: 5 100% 48%;
96 --primary-foreground: 0 0% 98%;
97 --primary-glow: 5 100% 60%;
98
99 --secondary: 0 0% 15%;
100 --secondary-foreground: 0 0% 88%;
101
102 --muted: 0 0% 15%;
103 --muted-foreground: 0 0% 53%;
104
105 --accent: 5 100% 48%;
106 --accent-foreground: 0 0% 98%;
107
108 --destructive: 0 63% 31%;
109 --destructive-foreground: 0 0% 98%;
110
111 --success: 142 71% 45%;
112 --success-foreground: 0 0% 98%;
113
114 --warning: 38 92% 50%;
115 --warning-foreground: 0 0% 12%;
116
117 --border: 0 0% 20%;
118 --input: 0 0% 20%;
119 --ring: 5 100% 48%;
120
121 /* Gradients */
122 --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
123 --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(215 25% 22%));
124
125 /* Shadows */
126 --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
127 --shadow-card: 0 4px 12px -2px hsl(0 0% 0% / 0.25);
128
129 --radius: 12px;
130 --sidebar-background: 240 5.9% 10%;
131 --sidebar-foreground: 240 4.8% 95.9%;
132 --sidebar-primary: 224.3 76.3% 48%;
133 --sidebar-primary-foreground: 0 0% 100%;
134 --sidebar-accent: 240 3.7% 15.9%;
135 --sidebar-accent-foreground: 240 4.8% 95.9%;
136 --sidebar-border: 240 3.7% 15.9%;
137 --sidebar-ring: 217.2 91.2% 59.8%;
138 }
139}
140
141@layer base {
142 * {
143 @apply border-border;
144 }
145
146 body {
147 @apply bg-background text-foreground;
148 }
149}