@smbcloud / wise-landing-forge
Code Commits Issues Pulls Cloud Agent CI/CD
main
main
css 155 lines 2.61 KB
Raw
1 @tailwind base;
2 @tailwind components;
3 @tailwind utilities;
4
5 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
6
7 @layer base {
8 :root {
9 --background: 0 0% 100%;
10 --foreground: 220 26% 14%;
11
12 --card: 0 0% 100%;
13 --card-foreground: 220 26% 14%;
14
15 --popover: 0 0% 100%;
16 --popover-foreground: 220 26% 14%;
17
18 /* Wise signature lime green */
19 --primary: 93 72% 67%;
20 --primary-foreground: 220 26% 14%;
21
22 /* Dark navy */
23 --secondary: 220 26% 14%;
24 --secondary-foreground: 0 0% 100%;
25
26 --muted: 220 14% 96%;
27 --muted-foreground: 220 13% 46%;
28
29 --accent: 93 72% 67%;
30 --accent-foreground: 220 26% 14%;
31
32 --destructive: 0 84% 60%;
33 --destructive-foreground: 0 0% 100%;
34
35 --border: 220 13% 91%;
36 --input: 220 13% 91%;
37 --ring: 93 72% 67%;
38
39 --radius: 0.75rem;
40
41 /* Custom colors */
42 --navy: 220 26% 14%;
43 --navy-light: 220 20% 20%;
44 --lime: 93 72% 67%;
45 --lime-dark: 93 60% 55%;
46 --gray-warm: 220 14% 96%;
47 }
48
49 .dark {
50 --background: 220 26% 14%;
51 --foreground: 0 0% 98%;
52
53 --card: 220 20% 18%;
54 --card-foreground: 0 0% 98%;
55
56 --popover: 220 20% 18%;
57 --popover-foreground: 0 0% 98%;
58
59 --primary: 93 72% 67%;
60 --primary-foreground: 220 26% 14%;
61
62 --secondary: 220 20% 22%;
63 --secondary-foreground: 0 0% 98%;
64
65 --muted: 220 20% 22%;
66 --muted-foreground: 220 13% 65%;
67
68 --accent: 93 72% 67%;
69 --accent-foreground: 220 26% 14%;
70
71 --destructive: 0 62% 30%;
72 --destructive-foreground: 0 0% 98%;
73
74 --border: 220 20% 22%;
75 --input: 220 20% 22%;
76 --ring: 93 72% 67%;
77 }
78 }
79
80 @layer base {
81 * {
82 @apply border-border;
83 }
84
85 body {
86 @apply bg-background text-foreground font-sans antialiased;
87 font-family: 'Inter', sans-serif;
88 }
89 }
90
91 @layer utilities {
92 .text-balance {
93 text-wrap: balance;
94 }
95 }
96
97 /* Animations */
98 @keyframes fade-up {
99 from {
100 opacity: 0;
101 transform: translateY(20px);
102 }
103 to {
104 opacity: 1;
105 transform: translateY(0);
106 }
107 }
108
109 @keyframes fade-in {
110 from {
111 opacity: 0;
112 }
113 to {
114 opacity: 1;
115 }
116 }
117
118 @keyframes scale-in {
119 from {
120 opacity: 0;
121 transform: scale(0.95);
122 }
123 to {
124 opacity: 1;
125 transform: scale(1);
126 }
127 }
128
129 .animate-fade-up {
130 animation: fade-up 0.6s ease-out forwards;
131 }
132
133 .animate-fade-in {
134 animation: fade-in 0.5s ease-out forwards;
135 }
136
137 .animate-scale-in {
138 animation: scale-in 0.4s ease-out forwards;
139 }
140
141 .animation-delay-100 {
142 animation-delay: 100ms;
143 }
144
145 .animation-delay-200 {
146 animation-delay: 200ms;
147 }
148
149 .animation-delay-300 {
150 animation-delay: 300ms;
151 }
152
153 .animation-delay-400 {
154 animation-delay: 400ms;
155 }