mitdow commited on
Commit
f0c1c1d
·
verified ·
1 Parent(s): 51ae834

🐳 24/02 - 22:16 - redesign this with a lighter, more professional theme. Asking price is $5,000 USD

Browse files
Files changed (1) hide show
  1. style.css +50 -176
style.css CHANGED
@@ -9,31 +9,32 @@ body {
9
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
  line-height: 1.6;
11
  overflow-x: hidden;
 
12
  }
13
 
14
- /* Custom Scrollbar */
15
  ::-webkit-scrollbar {
16
  width: 8px;
17
  }
18
 
19
  ::-webkit-scrollbar-track {
20
- background: #0f172a;
21
  }
22
 
23
  ::-webkit-scrollbar-thumb {
24
- background: linear-gradient(45deg, #f59e0b, #dc2626);
25
  border-radius: 4px;
26
  }
27
 
28
  ::-webkit-scrollbar-thumb:hover {
29
- background: linear-gradient(45deg, #d97706, #b91c1c);
30
  }
31
 
32
  /* Animations */
33
  @keyframes fadeInUp {
34
  from {
35
  opacity: 0;
36
- transform: translateY(50px);
37
  }
38
  to {
39
  opacity: 1;
@@ -46,187 +47,90 @@ body {
46
  transform: translateY(0);
47
  }
48
  50% {
49
- transform: translateY(-20px);
50
- }
51
- }
52
-
53
- @keyframes glow {
54
- 0% {
55
- box-shadow: 0 0 20px #3b82f6;
56
- }
57
- 100% {
58
- box-shadow: 0 0 30px #1e40af, 0 0 40px #1d4ed8;
59
- }
60
- }
61
-
62
- @keyframes gradientShift {
63
- 0% {
64
- background-position: 0% 50%;
65
- }
66
- 50% {
67
- background-position: 100% 50%;
68
- }
69
- 100% {
70
- background-position: 0% 50%;
71
- }
72
- }
73
-
74
- @keyframes pulse {
75
- 0%, 100% {
76
- opacity: 1;
77
- transform: scale(1);
78
- }
79
- 50% {
80
- opacity: 0.7;
81
- transform: scale(1.05);
82
  }
83
  }
84
 
85
  /* Utility Classes */
86
  .animate-fade-in-up {
87
- animation: fadeInUp 0.8s ease-out;
88
  }
89
 
90
  .animate-float {
91
- animation: float 6s ease-in-out infinite;
92
  }
93
 
94
- .animate-glow {
95
- animation: glow 2s ease-in-out infinite alternate;
96
- }
97
-
98
- .animate-pulse {
99
- animation: pulse 2s ease-in-out infinite;
100
- }
101
-
102
- .gradient-bg {
103
- background: linear-gradient(-45deg, #0f172a, #1e293b, #334155, #475569);
104
- background-size: 400% 400%;
105
- animation: gradientShift 8s ease infinite;
106
- }
107
-
108
- /* Glassmorphism Effect */
109
- .glass {
110
- background: rgba(255, 255, 255, 0.1);
111
- backdrop-filter: blur(10px);
112
- border: 1px solid rgba(255, 255, 255, 0.2);
113
- }
114
-
115
- .glass-dark {
116
- background: rgba(15, 23, 42, 0.7);
117
- backdrop-filter: blur(15px);
118
- border: 1px solid rgba(255, 255, 255, 0.1);
119
- }
120
-
121
- /* Card Styles */
122
  .card-modern {
123
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
124
- backdrop-filter: blur(20px);
125
- border: 1px solid rgba(255, 255, 255, 0.15);
126
- border-radius: 20px;
127
- transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
128
  position: relative;
129
  overflow: hidden;
130
  }
131
 
132
- .card-modern::before {
133
- content: '';
134
- position: absolute;
135
- top: 0;
136
- left: 0;
137
- right: 0;
138
- height: 1px;
139
- background: linear-gradient(90deg, transparent, #f59e0b, transparent);
140
- opacity: 0;
141
- transition: opacity 0.4s ease;
142
- }
143
-
144
- .card-modern:hover::before {
145
- opacity: 1;
146
- }
147
-
148
  .card-modern:hover {
149
- transform: translateY(-5px);
150
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
151
- border-color: rgba(245, 158, 11, 0.3);
152
  }
153
 
154
- /* Text Gradients */
155
- .text-gradient-primary {
156
- background: linear-gradient(45deg, #1e40af, #3730a3, #6366f1);
157
- -webkit-background-clip: text;
158
- background-clip: text;
159
- color: transparent;
160
  }
161
 
162
- .text-gradient-secondary {
163
- background: linear-gradient(45deg, #f59e0b, #d97706, #fbbf24);
164
- -webkit-background-clip: text;
165
- background-clip: text;
166
- color: transparent;
167
- }
168
-
169
- /* Feature Icons */
170
  .feature-icon {
171
- width: 80px;
172
- height: 80px;
173
- border-radius: 20px;
174
  display: flex;
175
  align-items: center;
176
  justify-content: center;
177
- background: linear-gradient(135deg, rgba(30, 64, 175, 0.2), rgba(30, 64, 175, 0.1));
178
- border: 1px solid rgba(30, 64, 175, 0.3);
179
- transition: all 0.4s ease;
180
  margin: 0 auto;
181
  }
182
 
183
  .feature-icon:hover {
184
- transform: scale(1.1) rotate(5deg);
185
- background: linear-gradient(135deg, rgba(30, 64, 175, 0.3), rgba(30, 64, 175, 0.2));
 
186
  }
187
 
188
- /* Particles Container */
189
- .particles {
190
- position: absolute;
191
- inset: 0;
192
- overflow: hidden;
193
- pointer-events: none;
194
  }
195
 
196
- .particles div {
197
- position: absolute;
198
- width: 4px;
199
- height: 4px;
200
- background: rgba(245, 158, 11, 0.6);
201
- border-radius: 50%;
202
- pointer-events: none;
203
  }
204
 
205
  /* Responsive Design */
206
  @media (max-width: 768px) {
207
  .hero-title {
208
  font-size: 2.5rem !important;
209
- line-height: 1.1 !important;
210
- }
211
-
212
- .text-gradient-primary,
213
- .text-gradient-secondary {
214
- font-size: 2.5rem !important;
215
  }
216
 
217
  .feature-icon {
218
- width: 60px;
219
- height: 60px;
220
- }
221
-
222
- .card-modern {
223
- border-radius: 16px;
224
- padding: 1.5rem !important;
225
  }
226
 
227
  section {
228
- padding-top: 4rem !important;
229
- padding-bottom: 4rem !important;
230
  }
231
  }
232
 
@@ -234,14 +138,6 @@ body {
234
  .hero-title {
235
  font-size: 2rem !important;
236
  }
237
-
238
- .text-2xl {
239
- font-size: 1.125rem !important;
240
- }
241
-
242
- .text-3xl {
243
- font-size: 1.25rem !important;
244
- }
245
  }
246
 
247
  /* Smooth Scroll Behavior */
@@ -249,37 +145,15 @@ html {
249
  scroll-behavior: smooth;
250
  }
251
 
252
- /* Selection Color */
253
  ::selection {
254
- background: rgba(245, 158, 11, 0.3);
255
- color: white;
256
  }
257
 
258
  /* Focus States for Accessibility */
259
  a:focus-visible,
260
  button:focus-visible {
261
- outline: 2px solid #f59e0b;
262
  outline-offset: 2px;
263
- }
264
-
265
- /* Loading Animation */
266
- .loading {
267
- position: relative;
268
- overflow: hidden;
269
- }
270
-
271
- .loading::after {
272
- content: '';
273
- position: absolute;
274
- top: 0;
275
- left: -100%;
276
- width: 100%;
277
- height: 100%;
278
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
279
- animation: loading 1.5s infinite;
280
- }
281
-
282
- @keyframes loading {
283
- 0% { left: -100%; }
284
- 100% { left: 100%; }
285
  }
 
9
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
  line-height: 1.6;
11
  overflow-x: hidden;
12
+ color: #1e293b;
13
  }
14
 
15
+ /* Custom Scrollbar - Light Theme */
16
  ::-webkit-scrollbar {
17
  width: 8px;
18
  }
19
 
20
  ::-webkit-scrollbar-track {
21
+ background: #f1f5f9;
22
  }
23
 
24
  ::-webkit-scrollbar-thumb {
25
+ background: #cbd5e1;
26
  border-radius: 4px;
27
  }
28
 
29
  ::-webkit-scrollbar-thumb:hover {
30
+ background: #94a3b8;
31
  }
32
 
33
  /* Animations */
34
  @keyframes fadeInUp {
35
  from {
36
  opacity: 0;
37
+ transform: translateY(30px);
38
  }
39
  to {
40
  opacity: 1;
 
47
  transform: translateY(0);
48
  }
49
  50% {
50
+ transform: translateY(-10px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  }
52
  }
53
 
54
  /* Utility Classes */
55
  .animate-fade-in-up {
56
+ animation: fadeInUp 0.6s ease-out;
57
  }
58
 
59
  .animate-float {
60
+ animation: float 4s ease-in-out infinite;
61
  }
62
 
63
+ /* Card Styles - Professional Light Theme */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  .card-modern {
65
+ background: white;
66
+ border: 1px solid #e2e8f0;
67
+ border-radius: 16px;
68
+ transition: all 0.3s ease;
 
69
  position: relative;
70
  overflow: hidden;
71
  }
72
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
73
  .card-modern:hover {
74
+ transform: translateY(-4px);
75
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
76
+ border-color: #3b82f6;
77
  }
78
 
79
+ /* Clean shadows for professional look */
80
+ .shadow-professional {
81
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
 
 
 
82
  }
83
 
84
+ /* Feature Icons - Updated for light theme */
 
 
 
 
 
 
 
85
  .feature-icon {
86
+ width: 60px;
87
+ height: 60px;
88
+ border-radius: 12px;
89
  display: flex;
90
  align-items: center;
91
  justify-content: center;
92
+ background: #f8fafc;
93
+ border: 1px solid #e2e8f0;
94
+ transition: all 0.3s ease;
95
  margin: 0 auto;
96
  }
97
 
98
  .feature-icon:hover {
99
+ background: #eff6ff;
100
+ border-color: #3b82f6;
101
+ transform: scale(1.05);
102
  }
103
 
104
+ /* Text Gradients - Subtle for professional look */
105
+ .text-gradient-primary {
106
+ background: linear-gradient(135deg, #1e40af, #3b82f6);
107
+ -webkit-background-clip: text;
108
+ background-clip: text;
109
+ color: transparent;
110
  }
111
 
112
+ .text-gradient-secondary {
113
+ background: linear-gradient(135deg, #0369a1, #0ea5e9);
114
+ -webkit-background-clip: text;
115
+ background-clip: text;
116
+ color: transparent;
 
 
117
  }
118
 
119
  /* Responsive Design */
120
  @media (max-width: 768px) {
121
  .hero-title {
122
  font-size: 2.5rem !important;
123
+ line-height: 1.2 !important;
 
 
 
 
 
124
  }
125
 
126
  .feature-icon {
127
+ width: 50px;
128
+ height: 50px;
 
 
 
 
 
129
  }
130
 
131
  section {
132
+ padding-top: 3rem !important;
133
+ padding-bottom: 3rem !important;
134
  }
135
  }
136
 
 
138
  .hero-title {
139
  font-size: 2rem !important;
140
  }
 
 
 
 
 
 
 
 
141
  }
142
 
143
  /* Smooth Scroll Behavior */
 
145
  scroll-behavior: smooth;
146
  }
147
 
148
+ /* Selection Color - Light theme */
149
  ::selection {
150
+ background: rgba(59, 130, 246, 0.2);
151
+ color: #1e40af;
152
  }
153
 
154
  /* Focus States for Accessibility */
155
  a:focus-visible,
156
  button:focus-visible {
157
+ outline: 2px solid #3b82f6;
158
  outline-offset: 2px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
159
  }