@cupcodev/ui 1.0.2 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/README.md +144 -93
  2. package/dist/{charts-KwYmX5He.d.cts → charts-DqY2Q-7w.d.cts} +8 -8
  3. package/dist/{charts-KwYmX5He.d.ts → charts-DqY2Q-7w.d.ts} +8 -8
  4. package/dist/charts.cjs +1 -1
  5. package/dist/charts.d.cts +1 -1
  6. package/dist/charts.d.ts +1 -1
  7. package/dist/charts.js +0 -1
  8. package/dist/index.cjs +1154 -976
  9. package/dist/index.d.cts +70 -55
  10. package/dist/index.d.ts +70 -55
  11. package/dist/index.js +1126 -949
  12. package/package.json +166 -157
  13. package/styles/base.css +24 -0
  14. package/styles/dock.css +875 -858
  15. package/styles/global.css +1192 -1190
  16. package/styles/index.css +3 -0
  17. package/styles/tokens.css +305 -305
  18. package/tailwind-preset.cjs +192 -192
  19. package/dist/charts 2.cjs +0 -500
  20. package/dist/charts 2.js +0 -454
  21. package/dist/charts-KwYmX5He.d 2.cts +0 -97
  22. package/dist/charts-KwYmX5He.d 2.ts +0 -97
  23. package/dist/charts.cjs 2.map +0 -1
  24. package/dist/charts.cjs.map +0 -1
  25. package/dist/charts.d 2.cts +0 -11
  26. package/dist/charts.d 2.ts +0 -11
  27. package/dist/charts.js 2.map +0 -1
  28. package/dist/charts.js.map +0 -1
  29. package/dist/index 2.cjs +0 -6568
  30. package/dist/index 2.js +0 -6207
  31. package/dist/index.cjs 2.map +0 -1
  32. package/dist/index.cjs.map +0 -1
  33. package/dist/index.d 2.cts +0 -1019
  34. package/dist/index.d 2.ts +0 -1019
  35. package/dist/index.js 2.map +0 -1
  36. package/dist/index.js.map +0 -1
package/styles/global.css CHANGED
@@ -1,1194 +1,1196 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
4
-
5
- @import "./tokens.css";
6
-
7
- @layer base {
8
- * {
9
- @apply border-border;
10
- }
11
-
12
- html {
13
- min-width: 380px;
14
- }
15
-
16
- body {
17
- @apply bg-background text-foreground;
18
- font-family: var(--font-ui);
19
- }
20
-
21
- h1, h2, h3, h4, h5, h6 {
22
- font-family: var(--font-display);
23
- font-weight: 700;
24
- }
25
-
26
- h1 { font-size: 2.25rem; line-height: 1.1; } /* 36px */
27
- h2 { font-size: 1.875rem; line-height: 1.15; } /* 30px */
28
- h3 { font-size: 1.5rem; line-height: 1.2; } /* 24px */
29
- h4 { font-size: 1.25rem; line-height: 1.3; } /* 20px */
30
- h5 { font-size: 1.125rem; line-height: 1.3; } /* 18px */
31
- h6 { font-size: 1rem; line-height: 1.4; } /* 16px */
32
-
33
- video {
34
- appearance: none;
35
- transform: translateZ(0);
36
- filter: grayscale(0);
37
- }
38
- }
39
-
40
- @layer components {
41
- /* ===== LEGACY COLOR UTILITIES ===== */
42
- .text-color-one { color: var(--color-one); }
43
- .text-color-two { color: var(--color-two); }
44
- .text-color-three { color: var(--color-three); }
45
- .text-color-four { color: var(--color-four); }
46
- .bg-color-one { background-color: var(--color-one); }
47
- .bg-color-two { background-color: var(--color-two); }
48
- .bg-color-three { background-color: var(--color-three); }
49
- .bg-color-four { background-color: var(--color-four); }
50
-
51
- /* ===== GLASS MORPHISM UTILITIES ===== */
52
- .glass {
53
- background: var(--glass-bg);
54
- backdrop-filter: blur(var(--glass-blur-md));
55
- -webkit-backdrop-filter: blur(var(--glass-blur-md));
56
- border: 1px solid var(--glass-border);
57
- position: relative;
58
- }
59
-
60
- .glass::before {
61
- content: '';
62
- position: absolute;
63
- inset: 0;
64
- border-radius: inherit;
65
- padding: 1px;
66
- background: linear-gradient(
67
- 135deg,
68
- var(--glass-highlight) 0%,
69
- transparent 50%,
70
- var(--glass-ambient) 100%
71
- );
72
- -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
73
- -webkit-mask-composite: xor;
74
- mask-composite: exclude;
75
- pointer-events: none;
76
- }
77
-
1
+ @import url("https://fonts.googleapis.com/css2?family=Tomorrow:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
+ @tailwind base;
3
+ @tailwind components;
4
+ @tailwind utilities;
5
+
6
+ @layer base {
7
+ * {
8
+ @apply border-border;
9
+ }
10
+
11
+ html {
12
+ min-width: 380px;
13
+ }
14
+
15
+ body {
16
+ @apply bg-background text-foreground;
17
+ font-family: var(--font-ui);
18
+ }
19
+
20
+ h1, h2, h3, h4, h5, h6 {
21
+ font-family: var(--font-display);
22
+ font-weight: 700;
23
+ }
24
+
25
+ h1 { font-size: 2.25rem; line-height: 1.1; } /* 36px */
26
+ h2 { font-size: 1.875rem; line-height: 1.15; } /* 30px */
27
+ h3 { font-size: 1.5rem; line-height: 1.2; } /* 24px */
28
+ h4 { font-size: 1.25rem; line-height: 1.3; } /* 20px */
29
+ h5 { font-size: 1.125rem; line-height: 1.3; } /* 18px */
30
+ h6 { font-size: 1rem; line-height: 1.4; } /* 16px */
31
+
32
+ video {
33
+ appearance: none;
34
+ transform: translateZ(0);
35
+ filter: grayscale(0);
36
+ }
37
+ }
38
+
39
+ @layer components {
40
+ /* ===== LEGACY COLOR UTILITIES ===== */
41
+ .text-color-one { color: var(--color-one); }
42
+ .text-color-two { color: var(--color-two); }
43
+ .text-color-three { color: var(--color-three); }
44
+ .text-color-four { color: var(--color-four); }
45
+ .bg-color-one { background-color: var(--color-one); }
46
+ .bg-color-two { background-color: var(--color-two); }
47
+ .bg-color-three { background-color: var(--color-three); }
48
+ .bg-color-four { background-color: var(--color-four); }
49
+
50
+ /* ===== GLASS MORPHISM UTILITIES ===== */
51
+ .glass {
52
+ background: var(--glass-bg);
53
+ backdrop-filter: blur(var(--glass-blur-md));
54
+ -webkit-backdrop-filter: blur(var(--glass-blur-md));
55
+ border: 1px solid var(--glass-border);
56
+ position: relative;
57
+ }
58
+
59
+ .glass::before {
60
+ content: '';
61
+ position: absolute;
62
+ inset: 0;
63
+ border-radius: inherit;
64
+ padding: 1px;
65
+ background: linear-gradient(
66
+ 135deg,
67
+ var(--glass-highlight) 0%,
68
+ transparent 50%,
69
+ var(--glass-ambient) 100%
70
+ );
71
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
72
+ -webkit-mask-composite: xor;
73
+ mask-composite: exclude;
74
+ pointer-events: none;
75
+ }
76
+
78
77
  .glass-subtle {
79
- background: var(--glass-bg-subtle);
78
+ background: hsl(var(--card) / 0.72);
80
79
  backdrop-filter: blur(var(--glass-blur-sm));
81
80
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
82
- border: 1px solid var(--glass-border-subtle);
83
- }
84
-
85
- .glass-strong {
86
- background: var(--glass-bg-strong);
87
- backdrop-filter: blur(var(--glass-blur-lg));
88
- -webkit-backdrop-filter: blur(var(--glass-blur-lg));
89
- border: 1px solid var(--glass-border);
90
- }
91
-
92
- .glass-inverse {
93
- background: rgba(24, 1, 58, 0.2);
94
- backdrop-filter: blur(var(--glass-blur-md));
95
- -webkit-backdrop-filter: blur(var(--glass-blur-md));
96
- border: 1px solid rgba(255, 255, 255, 0.1);
97
- }
98
-
99
- .glass-card {
100
- background: linear-gradient(115deg, #951ddb75, #ffffff90, #ffffff70, #ffffff61, #ed1e799e);
101
- backdrop-filter: blur(15px);
102
- border-radius: 25px;
81
+ border: 1px solid hsl(var(--border) / 0.55);
103
82
  box-shadow:
104
- 0 8px 32px rgba(0, 0, 0, 0.1),
105
- inset 0 1px 0 rgba(255, 255, 255, 0.5),
106
- inset 0 -1px 0 rgba(255, 255, 255, 0.1),
107
- inset 0 0 20px 10px rgba(255, 255, 255, 1);
108
- position: relative;
109
- }
110
-
111
- /* ===== ELEVATION UTILITIES ===== */
112
- .elevation-0 { box-shadow: var(--elevation-0); }
113
- .elevation-1 { box-shadow: var(--elevation-1); }
114
- .elevation-2 { box-shadow: var(--elevation-2); }
115
- .elevation-3 { box-shadow: var(--elevation-3); }
116
- .elevation-4 { box-shadow: var(--elevation-4); }
117
- .elevation-5 { box-shadow: var(--elevation-5); }
118
-
119
- /* ===== SERVICE CARDS ===== */
120
- .service-card {
121
- position: relative;
122
- transition: all 0.3s ease;
123
- border-radius: 1rem;
124
- border: 1px solid #d33cfb4d;
125
- filter: grayscale(1);
126
- transform: scale(1);
127
- }
128
-
129
- .service-card:hover {
130
- filter: none;
131
- background: linear-gradient(
132
- to bottom right,
133
- rgba(209, 179, 255, 0.4),
134
- rgba(255, 255, 255, 0.4) 31.51%,
135
- rgba(245, 228, 255, 0.45) 71.85%,
136
- rgba(237, 211, 255, 0.9)
137
- );
138
- }
139
-
140
- .service-card.active {
141
- filter: none;
142
- background: linear-gradient(
143
- to bottom right,
144
- rgba(209, 179, 255, 0.4),
145
- rgba(255, 255, 255, 0.4) 31.51%,
146
- rgba(245, 228, 255, 0.45) 71.85%,
147
- rgba(237, 211, 255, 0.9)
148
- );
149
- }
150
-
151
- .service-card.active:hover {
152
- backdrop-filter: blur(15px);
153
- background: linear-gradient(135deg, rgba(209, 179, 255, 0.6) 0%, rgba(237, 211, 255, 0.6) 100%);
154
- transform: scale(1.05);
155
- }
156
-
157
- .service-card.active::before {
158
- content: '';
159
- position: absolute;
160
- inset: 0;
161
- border-radius: inherit;
162
- box-shadow: 15px -18px 18px rgba(247, 21, 183, 0.17) inset;
163
- pointer-events: none;
164
- }
165
-
166
- .service-card.active::after {
167
- content: '';
168
- position: absolute;
169
- inset: 3px;
170
- border-radius: inherit;
171
- background: radial-gradient(
172
- rgba(255, 255, 255, 0.4),
173
- rgba(245, 228, 255, 0.38) 46.22%,
174
- rgba(209, 179, 255, 0.4) 83.61%,
175
- rgba(239, 192, 242, 1) 93.28%
176
- );
177
- filter: blur(7px);
178
- z-index: -1;
179
- transition: filter 0.3s ease;
180
- }
181
-
182
- /* ===== GLASS BUTTONS ===== */
183
- .glass-next-btn {
184
- position: relative;
185
- display: inline-flex;
186
- align-items: center;
187
- justify-content: center;
188
- padding: 8px 24px;
189
- border-radius: 50px;
190
- --btn-base-start: rgba(52, 152, 79, 0.67);
191
- --btn-base-mid: rgba(158, 241, 188, 0.68);
192
- --btn-base-end: rgba(171, 248, 181, 0.74);
193
- --btn-base-finish: rgba(150, 255, 148, 0.57);
194
- --btn-border-color: rgba(52, 152, 79, 0.13);
195
- --btn-hover-strong: rgba(52, 152, 79, 0.85);
196
- --btn-hover-soft: rgba(52, 152, 79, 0.2);
197
- --btn-shadow-color: rgba(52, 152, 79, 0.6);
198
- --btn-overlay-start: rgba(52, 152, 79, 0.5);
199
- --btn-overlay-end: rgba(38, 160, 71, 0.65);
200
- background: linear-gradient(
201
- 297deg,
202
- var(--btn-base-start) 0%,
203
- var(--btn-base-mid) 31.51%,
204
- var(--btn-base-end) 63.45%,
205
- var(--btn-base-finish) 100%
206
- );
207
- border: 1px solid var(--btn-border-color);
208
- backdrop-filter: blur(10px);
209
- cursor: pointer;
210
- overflow: visible;
211
- transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
212
- text-decoration: none;
213
- }
214
-
215
- .glass-next-btn:hover {
216
- transform: scale(1.05);
217
- background: linear-gradient(
218
- 230deg,
219
- var(--btn-hover-strong) 0%,
220
- var(--btn-hover-soft) 40%,
221
- rgba(255, 255, 255, 0.3) 100%
222
- );
223
- }
224
-
225
- .glass-next-btn::before {
226
- content: '';
227
- position: absolute;
228
- width: calc(100% + 1px);
229
- height: calc(100% + 1px);
230
- border-radius: 30px;
231
- box-shadow: 5px 7px 8px var(--btn-shadow-color);
232
- opacity: 0.6;
233
- z-index: -2;
234
- }
235
-
236
- .glass-next-btn::after {
237
- content: '';
238
- position: absolute;
239
- top: 2px;
240
- left: 2px;
241
- width: calc(100% - 4px);
242
- height: calc(100% - 4px);
243
- border-radius: 50px;
244
- background: linear-gradient(118deg, var(--btn-overlay-start) 0%, var(--btn-overlay-end) 46.64%);
245
- filter: blur(3px);
246
- z-index: -1;
247
- }
248
-
249
- .glass-next-btn .text {
250
- position: relative;
251
- z-index: 1;
252
- font-size: 1rem;
253
- font-weight: 600;
254
- color: #ffffff;
255
- user-select: none;
256
- transition: color 0.2s ease;
257
- }
258
-
259
- .glass-next-btn--color-one {
260
- --btn-base-start: color-mix(in srgb, var(--color-one) 85%, transparent);
261
- --btn-base-mid: color-mix(in srgb, var(--color-one) 65%, white);
262
- --btn-base-end: color-mix(in srgb, var(--color-one) 75%, transparent);
263
- --btn-base-finish: color-mix(in srgb, var(--color-one) 90%, black);
264
- --btn-border-color: color-mix(in srgb, var(--color-one) 35%, transparent);
265
- --btn-hover-strong: color-mix(in srgb, var(--color-one) 85%, white);
266
- --btn-hover-soft: color-mix(in srgb, var(--color-one) 30%, transparent);
267
- --btn-shadow-color: color-mix(in srgb, var(--color-one) 60%, transparent);
268
- --btn-overlay-start: color-mix(in srgb, var(--color-one) 55%, transparent);
269
- --btn-overlay-end: color-mix(in srgb, var(--color-one) 80%, black);
270
- }
271
-
272
- .glass-next-btn--destructive {
273
- --btn-base-start: color-mix(in srgb, hsl(var(--destructive)) 85%, transparent);
274
- --btn-base-mid: color-mix(in srgb, hsl(var(--destructive)) 65%, white);
275
- --btn-base-end: color-mix(in srgb, hsl(var(--destructive)) 75%, transparent);
276
- --btn-base-finish: color-mix(in srgb, hsl(var(--destructive)) 90%, black);
277
- --btn-border-color: color-mix(in srgb, hsl(var(--destructive)) 35%, transparent);
278
- --btn-hover-strong: color-mix(in srgb, hsl(var(--destructive)) 85%, white);
279
- --btn-hover-soft: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
280
- --btn-shadow-color: color-mix(in srgb, hsl(var(--destructive)) 60%, transparent);
281
- --btn-overlay-start: color-mix(in srgb, hsl(var(--destructive)) 55%, transparent);
282
- --btn-overlay-end: color-mix(in srgb, hsl(var(--destructive)) 80%, black);
283
- }
284
-
285
- .glass-close-btn {
286
- position: absolute;
287
- width: 30px;
288
- height: 30px;
289
- border-radius: 50%;
290
- background: linear-gradient(230deg, rgba(230, 57, 70, 0.67), rgba(230, 57, 70, 0.12));
291
- border: 1px solid rgba(245, 34, 34, 0.13);
292
- backdrop-filter: blur(10px);
293
- overflow: visible;
294
- display: flex !important;
295
- align-items: center;
296
- justify-content: center;
297
- transition: transform 0.2s ease, background 0.3s ease;
298
- z-index: 10;
299
- margin: 0 0 0 auto;
300
- right: -10px;
301
- top: -10px;
302
- cursor: pointer;
303
- }
304
-
305
- .glass-close-btn::before,
306
- .glass-close-btn::after {
307
- transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
308
- }
309
-
310
- .glass-close-btn::before {
311
- content: "";
312
- position: absolute;
313
- width: calc(100% + 1px);
314
- height: calc(100% + 1px);
315
- border-radius: 50%;
316
- box-shadow: 4px 4px 13px rgba(230, 57, 70, 0.6);
317
- transform: translate(0, 0);
318
- z-index: -2;
319
- }
320
-
321
- .glass-close-btn::after {
322
- content: "";
323
- position: absolute;
324
- top: 1px;
325
- left: 1px;
326
- width: calc(100% - 1px);
327
- height: calc(100% - 1px);
328
- border-radius: 50%;
329
- background: linear-gradient(118deg, rgb(230, 57, 70) 30.25%, rgba(230, 57, 70, 0) 100%);
330
- filter: blur(3px);
331
- transform: translate(0, 0);
332
- z-index: -1;
333
- }
334
-
335
- .glass-close-btn .icon-close-x {
336
- position: relative;
337
- z-index: 1;
338
- font-size: 20px;
339
- color: #FFFFFF;
340
- user-select: none;
341
- line-height: 1;
342
- transition: color 0.2s ease;
343
- font-weight: normal;
344
- width: 30px;
345
- height: 30px;
346
- line-height: 27px;
347
- }
348
-
349
- .glass-close-btn:hover {
350
- transform: scale(1.1);
351
- background: linear-gradient(271deg, rgba(230, 57, 70, 0.59), rgba(230, 57, 70, 0.2) 50%);
352
- }
353
-
354
- .glass-close-btn:hover::before {
355
- box-shadow: -5px -5px 29px rgba(230, 57, 70, 0.8);
356
- opacity: 0.8;
357
- }
358
-
359
- .glass-close-btn:hover::after {
360
- filter: blur(4px);
361
- transform: translate(-1px, -1px);
362
- opacity: 0.9;
363
- }
364
-
365
- .glass-close-btn:active {
366
- transform: scale(0.95);
367
- background: linear-gradient(230deg, rgba(230, 57, 70, 0.55) 0%, rgba(230, 57, 70, 0.1) 40%);
368
- }
369
-
370
- /* ===== SPACING UTILITIES ===== */
371
- .space-1 { gap: var(--space-1); }
372
- .space-2 { gap: var(--space-2); }
373
- .space-3 { gap: var(--space-3); }
374
- .space-4 { gap: var(--space-4); }
375
- .space-5 { gap: var(--space-5); }
376
- .space-6 { gap: var(--space-6); }
377
- .space-8 { gap: var(--space-8); }
378
- .space-10 { gap: var(--space-10); }
379
- .space-12 { gap: var(--space-12); }
380
- .space-16 { gap: var(--space-16); }
381
-
382
- /* ===== LAYOUT PRIMITIVES (Cupcode Grid System) ===== */
383
- .cc-container {
384
- width: 100%;
385
- max-width: 1280px;
386
- margin-left: auto;
387
- margin-right: auto;
388
- padding-left: var(--space-4);
389
- padding-right: var(--space-4);
390
- }
391
-
392
- .cc-container-narrow {
393
- max-width: 960px;
394
- }
395
-
396
- .cc-container-wide {
397
- max-width: 1440px;
398
- }
399
-
400
- .cc-stack {
401
- display: flex;
402
- flex-direction: column;
403
- }
404
-
405
- .cc-cluster {
406
- display: flex;
407
- flex-wrap: wrap;
408
- gap: var(--space-4);
409
- align-content: flex-end;
410
- justify-content: space-around;
411
- align-items: flex-end;
412
- }
413
-
414
- .cc-grid {
415
- display: grid;
416
- gap: var(--space-4);
417
- }
418
-
419
- .cc-grid-2 {
420
- grid-template-columns: repeat(2, 1fr);
421
- }
422
-
423
- .cc-grid-3 {
424
- grid-template-columns: repeat(3, 1fr);
425
- }
426
-
427
- .cc-grid-4 {
428
- grid-template-columns: repeat(4, 1fr);
429
- }
430
-
431
- @media (max-width: 768px) {
432
- .cc-grid-2,
433
- .cc-grid-3,
434
- .cc-grid-4 {
435
- grid-template-columns: 1fr;
436
- }
437
- }
438
-
439
- /* ===== STATE UTILITIES ===== */
440
- .state-hover {
441
- transition: opacity var(--motion-medium) var(--ease-smooth);
442
- }
443
-
444
- .state-hover:hover {
445
- opacity: var(--opacity-hover);
446
- }
447
-
448
- .state-disabled {
449
- opacity: var(--opacity-disabled);
450
- pointer-events: none;
451
- cursor: not-allowed;
452
- }
453
-
454
- .state-focus-visible:focus-visible {
455
- outline: 2px solid hsl(var(--cc-purple));
456
- outline-offset: 2px;
457
- }
458
-
459
- /* Gradient utilities */
460
- .cc-gradient-galaxy {
461
- background: var(--cc-gradient-galaxy);
462
- }
463
-
464
- .cc-gradient-comet {
465
- background: var(--cc-gradient-comet);
466
- }
467
-
468
- .cc-text-gradient-galaxy {
469
- background: var(--cc-gradient-galaxy);
470
- background-clip: text;
471
- -webkit-background-clip: text;
472
- color: transparent;
473
- -webkit-text-fill-color: transparent;
474
- }
475
-
476
- /* Gradientes Animados */
477
- .cc-gradient-animated {
478
- background: var(--cc-gradient-animated-1);
479
- background-size: 200% 200%;
480
- animation: gradient-shift 3s ease infinite;
481
- }
482
-
483
- .cc-gradient-pulse {
484
- background: var(--cc-gradient-animated-2);
485
- background-size: 400% 400%;
486
- animation: gradient-wave 5s ease infinite;
487
- }
488
-
489
- .cc-gradient-shimmer {
490
- position: relative;
491
- overflow: hidden;
492
- }
493
-
494
- .cc-gradient-shimmer::after {
495
- content: '';
496
- position: absolute;
497
- top: 0;
498
- left: -100%;
499
- width: 100%;
500
- height: 100%;
501
- background: var(--cc-gradient-shimmer);
502
- animation: shimmer 2s infinite;
503
- }
504
-
505
- @keyframes gradient-shift {
506
- 0% { background-position: 0% 50%; }
507
- 50% { background-position: 100% 50%; }
508
- 100% { background-position: 0% 50%; }
509
- }
510
-
511
- @keyframes gradient-wave {
512
- 0% { background-position: 0% 50%; }
513
- 25% { background-position: 50% 100%; }
514
- 50% { background-position: 100% 50%; }
515
- 75% { background-position: 50% 0%; }
516
- 100% { background-position: 0% 50%; }
517
- }
518
-
519
- @keyframes shimmer {
520
- 0% { left: -100%; }
521
- 100% { left: 100%; }
522
- }
523
-
524
- /* Eyebrow/Pill destaque (padrão homepage) */
525
- .span-destaque {
526
- display: inline-block;
527
- background: hsl(var(--cc-purple));
528
- color: white;
529
- font-size: 0.75rem;
530
- padding: 2px 5px;
531
- border-radius: var(--radius-sm);
532
- font-weight: 600;
533
- text-transform: uppercase;
534
- letter-spacing: 0.5px;
535
- }
536
-
537
- .color-one {
538
- color: hsl(var(--cc-pink));
539
- }
540
-
541
- .color-four {
542
- color: white;
543
- }
544
-
545
- /* === Jelly Animation === */
546
- .force-jelly {
547
- animation: jelly-bounce 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
548
- }
549
-
550
- @keyframes jelly-bounce {
551
- 0% { transform: scale(1, 1); }
552
- 5% { transform: scale(1.08, 0.92); }
553
- 10% { transform: scale(0.92, 1.08); }
554
- 15% { transform: scale(1.05, 0.95); }
555
- 20% { transform: scale(0.95, 1.05); }
556
- 25% { transform: scale(1.03, 0.97); }
557
- 30% { transform: scale(0.97, 1.03); }
558
- 35% { transform: scale(1.02, 0.98); }
559
- 40% { transform: scale(0.98, 1.02); }
560
- 45% { transform: scale(1.01, 0.99); }
561
- 50% { transform: scale(0.99, 1.01); }
562
- 55% { transform: scale(1.005, 0.995); }
563
- 60% { transform: scale(0.995, 1.005); }
564
- 100% { transform: scale(1, 1); }
565
- }
566
-
567
- /* ===== FONT UTILITIES ===== */
568
- .font-cupcode {
569
- font-family: 'Tomorrow', sans-serif;
570
- }
571
-
572
- /* ===== ANIMATED GRADIENT TEXT ===== */
573
- .gradient-text-animated {
574
- background-image: linear-gradient(-225deg, #9e9e9e 8%, #515151 29%, #5f5f5f 67%, #9e9e9e 90%);
575
- background-size: 200% auto;
576
- background-clip: text;
577
- -webkit-background-clip: text;
578
- color: #fff;
579
- -webkit-text-fill-color: transparent;
580
- text-fill-color: transparent;
581
- animation: textclip 10s linear infinite;
582
- display: inline-block;
583
- }
584
-
585
- @keyframes textclip {
586
- to {
587
- background-position: 200% center;
588
- }
589
- }
590
-
591
- /* ===== SWIPER STYLES ===== */
592
- .swiper-button-next,
593
- .swiper-button-prev {
594
- position: absolute;
595
- top: 0;
596
- height: 100% !important;
597
- margin-top: 0px !important;
598
- background: linear-gradient(
599
- var(--edge-deg),
600
- rgb(255 255 255 / 0%) 0%,
601
- rgba(255, 255, 255, 1) 60%
602
- );
603
- }
604
-
605
- .swiper-button-next.bg-none,
606
- .swiper-button-prev.bg-none {
607
- background: none;
608
- }
609
-
610
- .swiper-button-prev.swiper-button-disabled,
611
- .swiper-button-next.swiper-button-disabled {
612
- display: none;
613
- }
614
-
615
- .swiper-wrapper {
616
- height: auto !important;
617
- }
618
-
619
- .swiper-slide {
620
- height: auto;
621
- max-width: 100%;
622
- }
623
-
624
- .swiper-button-next::after,
625
- .swiper-button-prev::after {
626
- background: linear-gradient(45deg, #d26099, #e6dad9);
627
- backdrop-filter: blur(16px) saturate(180%);
628
- border-radius: 100%;
629
- min-height: 30px;
630
- min-width: 30px;
631
- font-size: 15px !important;
632
- font-weight: 900;
633
- display: flex;
634
- justify-content: center;
635
- align-items: center;
636
- position: relative;
637
- color: #e6dad9;
638
- }
639
-
640
- .swiper-button-next {
641
- right: 0 !important;
642
- --edge-deg: 90deg;
643
- }
644
-
645
- .swiper-button-prev {
646
- left: 0 !important;
647
- --edge-deg: 270deg;
648
- }
649
-
650
- .swiper-button-next::after {
651
- right: 2px;
652
- }
653
-
654
- .swiper-button-prev::after {
655
- left: 2px;
656
- }
657
-
658
- /* ===== AUDIO PLAYER CIRCLE ===== */
659
- .circle {
660
- display: grid;
661
- grid-template-rows: 1fr;
662
- grid-row: 4/6;
663
- grid-column: 2/3;
664
- align-items: center;
665
- justify-items: center;
666
- width: 6rem;
667
- height: 100%;
668
- border-radius: 1rem;
669
- position: absolute;
670
- top: calc(50% - 48px / 3);
671
- transform: translate(-50%, -50%);
672
- left: 50%;
673
- }
674
-
675
- .circle__btn {
676
- position: relative;
677
- z-index: 300;
678
- display: flex;
679
- grid-row: 1/2;
680
- grid-column: 1/2;
681
- align-items: center;
682
- justify-content: center;
683
- justify-self: center;
684
- width: 3rem;
685
- height: 3rem;
686
- margin: 0.6rem;
687
- border-radius: 50%;
688
- background-color: #e4ebf5;
689
- color: #ffffff;
690
- box-shadow:
691
- 0.3rem 0.3rem 0.6rem #c8d0e7,
692
- -0.2rem -0.2rem 0.5rem #ffffff;
693
- font-size: 3.2rem;
694
- cursor: pointer;
695
- transition: all 0.3s;
696
- }
697
-
698
- .dark .circle__btn {
699
- background-color: rgba(23, 16, 45, 0.92);
700
- color: rgba(248, 244, 255, 0.92);
701
- box-shadow:
702
- 0.3rem 0.3rem 0.6rem rgba(4, 1, 18, 0.6),
703
- -0.2rem -0.2rem 0.5rem rgba(115, 72, 180, 0.35);
704
- }
705
-
706
- .circle__btn:hover {
707
- color: #951ddb40;
708
- background-color: #fff;
709
- }
710
-
711
- .dark .circle__btn:hover {
712
- color: rgba(237, 30, 121, 0.65);
713
- background-color: rgba(39, 27, 75, 0.95);
714
- }
715
-
716
- .circle__btn:hover ~ .circle__back-1 {
717
- background: linear-gradient(to bottom, #951ddb30 0%, #ed1e7930 100%);
718
- }
719
-
720
- .dark .circle__btn:hover ~ .circle__back-1 {
721
- background: linear-gradient(to bottom, rgba(149, 29, 219, 0.45) 0%, rgba(237, 30, 121, 0.45) 100%);
722
- }
723
-
724
- .circle__btn.shadow {
725
- box-shadow:
726
- inset 0.2rem 0.2rem 0.5rem #c8d0e7,
727
- inset -0.2rem -0.2rem 0.5rem #ffffff;
728
- }
729
-
730
- .dark .circle__btn.shadow {
731
- box-shadow:
732
- inset 0.2rem 0.2rem 0.5rem rgba(4, 1, 18, 0.8),
733
- inset -0.2rem -0.2rem 0.5rem rgba(107, 66, 174, 0.35);
734
- }
735
-
736
- .circle__btn .play {
737
- position: absolute;
738
- opacity: 0;
739
- transition: 0.02s linear;
740
- font-size: 25px;
741
- }
742
-
743
- .circle__btn .play.visibility {
744
- opacity: 1;
745
- transition: 0.02s linear;
746
- }
747
-
748
- .circle__btn .pause {
749
- position: absolute;
750
- opacity: 0;
751
- transition: 0.02s linear;
752
- font-size: 25px;
753
- }
754
-
755
- .circle__btn .pause.visibility {
756
- opacity: 1;
757
- }
758
-
759
- .circle__back-1,
760
- .circle__back-2 {
761
- z-index: 100;
762
- grid-row: 1/2;
763
- grid-column: 1/2;
764
- width: 3rem;
765
- height: 3rem;
766
- border-radius: 50%;
767
- filter: blur(1px);
768
- }
769
-
770
- .circle__back-1 {
771
- background: linear-gradient(to bottom, #c8d0e7 0%, #ffffff 100%);
772
- box-shadow:
773
- 0.4rem 0.4rem 0.8rem #c8d0e7,
774
- -0.4rem -0.4rem 0.8rem #ffffff;
775
- animation: waves 4s linear infinite;
776
- }
777
-
778
- .dark .circle__back-1 {
779
- background: linear-gradient(to bottom, rgba(54, 36, 92, 0.75) 0%, rgba(92, 42, 120, 0.65) 100%);
780
- box-shadow:
781
- 0.4rem 0.4rem 0.8rem rgba(4, 1, 18, 0.55),
782
- -0.4rem -0.4rem 0.8rem rgba(112, 70, 179, 0.28);
783
- }
784
-
785
- .circle__back-2 {
786
- box-shadow:
787
- 0.4rem 0.4rem 0.8rem #c8d0e7,
788
- -0.4rem -0.4rem 0.8rem #ffffff;
789
- animation: waves 4s linear 2s infinite;
790
- }
791
-
792
- .dark .circle__back-2 {
793
- box-shadow:
794
- 0.4rem 0.4rem 0.8rem rgba(4, 1, 18, 0.55),
795
- -0.4rem -0.4rem 0.8rem rgba(112, 70, 179, 0.28);
796
- }
797
-
798
- @keyframes waves {
799
- 0% {
800
- opacity: 1;
801
- transform: scale(1);
802
- }
803
- 50% {
804
- opacity: 1;
805
- }
806
- 100% {
807
- opacity: 0;
808
- transform: scale(2);
809
- }
810
- }
811
-
812
- /* ===== MARQUEE ANIMATIONS ===== */
813
- @keyframes slide-left {
814
- to {
815
- transform: translate3d(calc(-1 * var(--dist)), 0, 0);
816
- }
817
- }
818
-
819
- @keyframes slide-right {
820
- to {
821
- transform: translate3d(0, 0, 0);
822
- }
823
- }
824
-
825
- .marquee-left {
826
- animation: slide-left var(--dur) linear infinite;
827
- will-change: transform;
828
- }
829
-
830
- .marquee-right {
831
- animation: slide-right var(--dur) linear infinite;
832
- will-change: transform;
833
- }
834
-
835
- .pausing:hover .marquee-left,
836
- .pausing:hover .marquee-right {
837
- animation-play-state: paused !important;
838
- }
839
-
840
- /* ===== DIALOG STYLES ===== */
841
- [data-slot="dialog-overlay"] {
842
- background: rgba(255, 255, 255, 0.3);
843
- backdrop-filter: blur(10px);
844
- }
845
-
846
- .dialog-overlay {
847
- overflow: visible;
848
- }
849
-
850
- .dialog-content {
851
- max-height: 90vh;
852
- overflow-y: auto;
853
- scrollbar-width: none;
854
- }
855
-
856
- .dialog-content::-webkit-scrollbar {
857
- display: none;
858
- }
859
-
860
- .dialog-video-player {
861
- width: 100%;
862
- max-width: 95vw;
863
- }
864
-
865
- .dialog-video-player .video-player {
866
- max-height: 80vh;
867
- width: 100%;
868
- max-width: 100%;
869
- height: auto;
870
- object-fit: contain;
871
- outline: none;
872
- display: block;
873
- }
874
-
875
- .dialog-video-player.horizontal {
876
- max-width: 95vw;
877
- }
878
-
879
- .dialog-video-player.horizontal .video-player {
880
- max-height: 95vh;
881
- width: 100%;
882
- }
883
-
884
- .dialog-video-player button[data-slot='dialog-close'] {
885
- background: #ed1e79;
886
- padding: 5px;
887
- border-radius: 100%;
888
- opacity: 1;
889
- color: white;
890
- box-shadow: none;
891
- cursor: pointer;
892
- }
893
-
894
- .popup-de-orcamento {
895
- display: block;
896
- top: 0;
897
- width: 100% !important;
898
- max-width: 100% !important;
899
- overflow-x: hidden;
900
- padding: 0;
901
- padding-top: 20px;
902
- padding-bottom: 20px;
903
- height: 100%;
904
- max-height: 100%;
905
- }
906
-
907
- .popup-de-orcamento button[data-slot="dialog-close"] {
908
- display: none;
909
- }
910
-
911
- /* ===== MISC UTILITIES ===== */
912
- img.logo-footer {
913
- margin-bottom: -50px;
914
- margin-left: -18px;
915
- margin-top: -45px;
916
- }
917
-
918
- .acabamento-footer::before {
919
- content: '';
920
- position: absolute;
921
- width: 100%;
922
- height: 80px;
923
- background: linear-gradient(0deg, #ffffff80, transparent);
924
- z-index: 1;
925
- bottom: 0;
926
- left: 0;
927
- }
928
-
929
- .animation-grow {
930
- transition: all 0.3s linear;
931
- }
932
-
933
- .animation-grow:hover {
934
- box-shadow: rgb(181 96 246) 0px 5px 15px;
935
- scale: 1.03;
936
- transform: none;
937
- }
938
-
939
- img.astrounauta-animado {
940
- transform-origin: top center;
941
- animation: balancoAstronauta 2.5s ease-in-out infinite alternate;
942
- }
943
-
944
- @keyframes balancoAstronauta {
945
- 0% {
946
- transform: rotate(-10deg);
947
- }
948
- 100% {
949
- transform: rotate(10deg);
950
- }
951
- }
952
-
953
- @keyframes rotateTrofeu {
954
- 0% { rotate: 0deg; }
955
- 25% { rotate: 10deg; }
956
- 50% { rotate: 0deg; }
957
- 75% { rotate: -10deg; }
958
- 100% { rotate: 0deg; }
959
- }
960
-
961
- .rotateTrofeu {
962
- animation: rotateTrofeu 4s cubic-bezier(0.63, 0.3, 0.24, 0.36) infinite;
963
- }
964
-
965
- @keyframes MoveNuvem {
966
- 0% { transform: translateX(0px); }
967
- 50% { transform: translateX(-20px); }
968
- 100% { transform: translateY(0px); }
969
- }
970
-
971
- .move-nuvem {
972
- animation: MoveNuvem infinite;
973
- }
974
-
975
- @keyframes pulseScale {
976
- 0% { transform: scale(1); }
977
- 50% { transform: scale(1.1); }
978
- 100% { transform: scale(1); }
979
- }
980
-
981
- .pulseScale {
982
- animation: pulseScale 5s infinite;
983
- }
984
-
985
- @keyframes floatA {
986
- 0% { transform: translateY(0); }
987
- 50% { transform: translateY(-10px); }
988
- 100% { transform: translateY(0); }
989
- }
990
-
991
- @keyframes floatB {
992
- 0% { transform: translateY(0) rotate(-1deg); }
993
- 50% { transform: translateY(8px) rotate(1deg); }
994
- 100% { transform: translateY(0) rotate(-1deg); }
995
- }
996
-
997
- @keyframes floatC {
998
- 0% { transform: translateY(0) rotate(-4deg); }
999
- 50% { transform: translateY(8px) rotate(4deg); }
1000
- 100% { transform: translateY(0) rotate(-4deg); }
1001
- }
1002
-
1003
- .animate-float-slow {
1004
- animation: floatA 6s ease-in-out infinite;
1005
- }
1006
-
1007
- .animate-float-fast {
1008
- animation: floatB 4.8s ease-in-out infinite;
1009
- }
1010
-
1011
- .animate-float-and-rotate-fast {
1012
- animation: floatC 4.8s ease-in-out infinite;
1013
- }
1014
-
1015
- /* ===== HERO SECTION ===== */
1016
- #hero-section-one {
1017
- height: 500px;
1018
- }
1019
-
1020
- #hero-section-one .video-hero {
1021
- position: absolute;
1022
- right: 0;
1023
- top: 0;
1024
- border-top-right-radius: 60px;
1025
- border-bottom-right-radius: 60px;
1026
- height: 100%;
1027
- z-index: 1;
1028
- overflow: hidden;
1029
- }
1030
-
1031
- #hero-section-one .video-hero video {
1032
- border-top-right-radius: 60px;
1033
- border-bottom-right-radius: 60px;
1034
- height: 100%;
1035
- }
1036
-
1037
- #hero-section-one .video-hero::after {
1038
- content: '';
1039
- position: absolute;
1040
- top: 0;
1041
- left: 0px;
1042
- width: 120px;
1043
- height: 500px;
1044
- background: linear-gradient(90deg, #ffffff, #ffffff00);
1045
- }
1046
-
1047
- .row-column-content {
1048
- height: calc(100% - 4.5rem);
1049
- display: flex;
1050
- flex-direction: column;
1051
- align-items: flex-start;
1052
- max-width: 40%;
1053
- justify-content: center;
1054
- z-index: 2;
1055
- position: relative;
1056
- }
1057
-
1058
- .prev-link {
1059
- font-size: 1rem;
1060
- font-weight: 600;
1061
- color: #e91e63;
1062
- text-decoration: none;
1063
- cursor: pointer;
1064
- text-shadow: 0 1px 6px rgba(255, 255, 255, 0.89);
1065
- transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.3s ease;
1066
- }
1067
-
1068
- .orcamento-to-step .orcamento-steps-numeros {
1069
- max-width: 250px;
1070
- margin: 0 auto;
1071
- border: solid 1px #951ddb14;
1072
- padding: 5px 10px;
1073
- border-radius: 20px;
1074
- background: #951ddb14;
1075
- overflow: hidden;
1076
- }
1077
-
1078
- .orcamento-to-step .orcamento-steps-numeros-content {
1079
- background: #951ddb80;
1080
- width: 110%;
1081
- left: 50%;
1082
- transform: translate(-50%, 0px);
1083
- max-width: 255px;
1084
- }
1085
-
1086
- .login__brand {
1087
- margin-bottom: 0 !important;
1088
- }
1089
-
1090
- /* Animation duration utilities */
1091
- .animation-dr-1s { animation-duration: 1s; }
1092
- .animation-dr-2s { animation-duration: 2s; }
1093
- .animation-dr-3s { animation-duration: 3s; }
1094
- .animation-dr-4s { animation-duration: 4s; }
1095
- .animation-dr-5s { animation-duration: 5s; }
1096
- .animation-dr-6s { animation-duration: 6s; }
1097
- .animation-dr-7s { animation-duration: 7s; }
1098
- .animation-dr-8s { animation-duration: 8s; }
1099
- .animation-dr-9s { animation-duration: 9s; }
1100
- .animation-dr-10s { animation-duration: 10s; }
1101
-
1102
- /* ===== RESPONSIVE STYLES ===== */
1103
- @media (max-width: 1024px) {
1104
- .acabamento-footer::before {
1105
- height: 10px;
1106
- }
1107
- #hero-section-one {
1108
- height: 400px;
1109
- }
1110
- #hero-section-one .video-hero video {
1111
- max-width: 500px;
1112
- scale: 1.3;
1113
- }
1114
- .row-column-content {
1115
- max-width: 45%;
1116
- }
1117
- }
1118
-
1119
- @media (max-width: 768px) {
1120
- img.ElementoFlutuante2 {
1121
- display: none;
1122
- }
1123
- .circle {
1124
- transform: translate(0%, -50%);
1125
- top: calc(50% - 32px / 3);
1126
- right: 0%;
1127
- left: unset;
1128
- width: 5rem;
1129
- }
1130
- .circle__btn {
1131
- width: 2rem;
1132
- height: 2rem;
1133
- }
1134
- .row-column-content {
1135
- max-width: 100%;
1136
- padding-top: 300px;
1137
- }
1138
- #hero-section-one {
1139
- height: 100%;
1140
- }
1141
- #hero-section-one .video-hero {
1142
- right: unset;
1143
- top: 0;
1144
- left: 0;
1145
- max-height: 300px;
1146
- width: 100%;
1147
- border-top-right-radius: 60px;
1148
- border-top-left-radius: 60px;
1149
- border-bottom-right-radius: 0;
1150
- }
1151
- #hero-section-one .video-hero video {
1152
- width: 100%;
1153
- object-fit: cover;
1154
- scale: none;
1155
- max-width: 100%;
1156
- }
1157
- #hero-section-one .video-hero::after {
1158
- left: 0;
1159
- bottom: 0;
1160
- top: unset;
1161
- width: 100%;
1162
- height: 50px;
1163
- background: linear-gradient(360deg, #ffffff, #ffffff00);
1164
- }
1165
- }
1166
-
1167
- @media (max-width: 568px) {
1168
- .row-column-content {
1169
- padding-top: 200px;
1170
- }
1171
- #hero-section-one .video-hero {
1172
- max-height: 250px;
1173
- }
1174
- .glass-close-btn {
1175
- width: 20px;
1176
- height: 20px;
1177
- right: 3px;
1178
- top: 0px;
1179
- }
1180
- }
1181
- }
1182
-
1183
- @layer utilities {
1184
- /* Reduced motion */
1185
- @media (prefers-reduced-motion: reduce) {
1186
- *,
1187
- *::before,
1188
- *::after {
1189
- animation-duration: 0.01ms !important;
1190
- animation-iteration-count: 1 !important;
1191
- transition-duration: 0.01ms !important;
1192
- }
1193
- }
1194
- }
83
+ 0 8px 24px hsl(var(--foreground) / 0.06),
84
+ inset 0 1px 0 hsl(var(--background) / 0.65);
85
+ }
86
+
87
+ .glass-strong {
88
+ background: var(--glass-bg-strong);
89
+ backdrop-filter: blur(var(--glass-blur-lg));
90
+ -webkit-backdrop-filter: blur(var(--glass-blur-lg));
91
+ border: 1px solid var(--glass-border);
92
+ }
93
+
94
+ .glass-inverse {
95
+ background: rgba(24, 1, 58, 0.2);
96
+ backdrop-filter: blur(var(--glass-blur-md));
97
+ -webkit-backdrop-filter: blur(var(--glass-blur-md));
98
+ border: 1px solid rgba(255, 255, 255, 0.1);
99
+ }
100
+
101
+ .glass-card {
102
+ background: linear-gradient(115deg, #951ddb75, #ffffff90, #ffffff70, #ffffff61, #ed1e799e);
103
+ backdrop-filter: blur(15px);
104
+ border-radius: 25px;
105
+ box-shadow:
106
+ 0 8px 32px rgba(0, 0, 0, 0.1),
107
+ inset 0 1px 0 rgba(255, 255, 255, 0.5),
108
+ inset 0 -1px 0 rgba(255, 255, 255, 0.1),
109
+ inset 0 0 20px 10px rgba(255, 255, 255, 1);
110
+ position: relative;
111
+ }
112
+
113
+ /* ===== ELEVATION UTILITIES ===== */
114
+ .elevation-0 { box-shadow: var(--elevation-0); }
115
+ .elevation-1 { box-shadow: var(--elevation-1); }
116
+ .elevation-2 { box-shadow: var(--elevation-2); }
117
+ .elevation-3 { box-shadow: var(--elevation-3); }
118
+ .elevation-4 { box-shadow: var(--elevation-4); }
119
+ .elevation-5 { box-shadow: var(--elevation-5); }
120
+
121
+ /* ===== SERVICE CARDS ===== */
122
+ .service-card {
123
+ position: relative;
124
+ transition: all 0.3s ease;
125
+ border-radius: 1rem;
126
+ border: 1px solid #d33cfb4d;
127
+ filter: grayscale(1);
128
+ transform: scale(1);
129
+ }
130
+
131
+ .service-card:hover {
132
+ filter: none;
133
+ background: linear-gradient(
134
+ to bottom right,
135
+ rgba(209, 179, 255, 0.4),
136
+ rgba(255, 255, 255, 0.4) 31.51%,
137
+ rgba(245, 228, 255, 0.45) 71.85%,
138
+ rgba(237, 211, 255, 0.9)
139
+ );
140
+ }
141
+
142
+ .service-card.active {
143
+ filter: none;
144
+ background: linear-gradient(
145
+ to bottom right,
146
+ rgba(209, 179, 255, 0.4),
147
+ rgba(255, 255, 255, 0.4) 31.51%,
148
+ rgba(245, 228, 255, 0.45) 71.85%,
149
+ rgba(237, 211, 255, 0.9)
150
+ );
151
+ }
152
+
153
+ .service-card.active:hover {
154
+ backdrop-filter: blur(15px);
155
+ background: linear-gradient(135deg, rgba(209, 179, 255, 0.6) 0%, rgba(237, 211, 255, 0.6) 100%);
156
+ transform: scale(1.05);
157
+ }
158
+
159
+ .service-card.active::before {
160
+ content: '';
161
+ position: absolute;
162
+ inset: 0;
163
+ border-radius: inherit;
164
+ box-shadow: 15px -18px 18px rgba(247, 21, 183, 0.17) inset;
165
+ pointer-events: none;
166
+ }
167
+
168
+ .service-card.active::after {
169
+ content: '';
170
+ position: absolute;
171
+ inset: 3px;
172
+ border-radius: inherit;
173
+ background: radial-gradient(
174
+ rgba(255, 255, 255, 0.4),
175
+ rgba(245, 228, 255, 0.38) 46.22%,
176
+ rgba(209, 179, 255, 0.4) 83.61%,
177
+ rgba(239, 192, 242, 1) 93.28%
178
+ );
179
+ filter: blur(7px);
180
+ z-index: -1;
181
+ transition: filter 0.3s ease;
182
+ }
183
+
184
+ /* ===== GLASS BUTTONS ===== */
185
+ .glass-next-btn {
186
+ position: relative;
187
+ display: inline-flex;
188
+ align-items: center;
189
+ justify-content: center;
190
+ padding: 8px 24px;
191
+ border-radius: 50px;
192
+ --btn-base-start: rgba(52, 152, 79, 0.67);
193
+ --btn-base-mid: rgba(158, 241, 188, 0.68);
194
+ --btn-base-end: rgba(171, 248, 181, 0.74);
195
+ --btn-base-finish: rgba(150, 255, 148, 0.57);
196
+ --btn-border-color: rgba(52, 152, 79, 0.13);
197
+ --btn-hover-strong: rgba(52, 152, 79, 0.85);
198
+ --btn-hover-soft: rgba(52, 152, 79, 0.2);
199
+ --btn-shadow-color: rgba(52, 152, 79, 0.6);
200
+ --btn-overlay-start: rgba(52, 152, 79, 0.5);
201
+ --btn-overlay-end: rgba(38, 160, 71, 0.65);
202
+ background: linear-gradient(
203
+ 297deg,
204
+ var(--btn-base-start) 0%,
205
+ var(--btn-base-mid) 31.51%,
206
+ var(--btn-base-end) 63.45%,
207
+ var(--btn-base-finish) 100%
208
+ );
209
+ border: 1px solid var(--btn-border-color);
210
+ backdrop-filter: blur(10px);
211
+ cursor: pointer;
212
+ overflow: visible;
213
+ transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
214
+ text-decoration: none;
215
+ }
216
+
217
+ .glass-next-btn:hover {
218
+ transform: scale(1.05);
219
+ background: linear-gradient(
220
+ 230deg,
221
+ var(--btn-hover-strong) 0%,
222
+ var(--btn-hover-soft) 40%,
223
+ rgba(255, 255, 255, 0.3) 100%
224
+ );
225
+ }
226
+
227
+ .glass-next-btn::before {
228
+ content: '';
229
+ position: absolute;
230
+ width: calc(100% + 1px);
231
+ height: calc(100% + 1px);
232
+ border-radius: 30px;
233
+ box-shadow: 5px 7px 8px var(--btn-shadow-color);
234
+ opacity: 0.6;
235
+ z-index: -2;
236
+ }
237
+
238
+ .glass-next-btn::after {
239
+ content: '';
240
+ position: absolute;
241
+ top: 2px;
242
+ left: 2px;
243
+ width: calc(100% - 4px);
244
+ height: calc(100% - 4px);
245
+ border-radius: 50px;
246
+ background: linear-gradient(118deg, var(--btn-overlay-start) 0%, var(--btn-overlay-end) 46.64%);
247
+ filter: blur(3px);
248
+ z-index: -1;
249
+ }
250
+
251
+ .glass-next-btn .text {
252
+ position: relative;
253
+ z-index: 1;
254
+ font-size: 1rem;
255
+ font-weight: 600;
256
+ color: #ffffff;
257
+ user-select: none;
258
+ transition: color 0.2s ease;
259
+ }
260
+
261
+ .glass-next-btn--color-one {
262
+ --btn-base-start: color-mix(in srgb, var(--color-one) 85%, transparent);
263
+ --btn-base-mid: color-mix(in srgb, var(--color-one) 65%, white);
264
+ --btn-base-end: color-mix(in srgb, var(--color-one) 75%, transparent);
265
+ --btn-base-finish: color-mix(in srgb, var(--color-one) 90%, black);
266
+ --btn-border-color: color-mix(in srgb, var(--color-one) 35%, transparent);
267
+ --btn-hover-strong: color-mix(in srgb, var(--color-one) 85%, white);
268
+ --btn-hover-soft: color-mix(in srgb, var(--color-one) 30%, transparent);
269
+ --btn-shadow-color: color-mix(in srgb, var(--color-one) 60%, transparent);
270
+ --btn-overlay-start: color-mix(in srgb, var(--color-one) 55%, transparent);
271
+ --btn-overlay-end: color-mix(in srgb, var(--color-one) 80%, black);
272
+ }
273
+
274
+ .glass-next-btn--destructive {
275
+ --btn-base-start: color-mix(in srgb, hsl(var(--destructive)) 85%, transparent);
276
+ --btn-base-mid: color-mix(in srgb, hsl(var(--destructive)) 65%, white);
277
+ --btn-base-end: color-mix(in srgb, hsl(var(--destructive)) 75%, transparent);
278
+ --btn-base-finish: color-mix(in srgb, hsl(var(--destructive)) 90%, black);
279
+ --btn-border-color: color-mix(in srgb, hsl(var(--destructive)) 35%, transparent);
280
+ --btn-hover-strong: color-mix(in srgb, hsl(var(--destructive)) 85%, white);
281
+ --btn-hover-soft: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
282
+ --btn-shadow-color: color-mix(in srgb, hsl(var(--destructive)) 60%, transparent);
283
+ --btn-overlay-start: color-mix(in srgb, hsl(var(--destructive)) 55%, transparent);
284
+ --btn-overlay-end: color-mix(in srgb, hsl(var(--destructive)) 80%, black);
285
+ }
286
+
287
+ .glass-close-btn {
288
+ position: absolute;
289
+ width: 30px;
290
+ height: 30px;
291
+ border-radius: 50%;
292
+ background: linear-gradient(230deg, rgba(230, 57, 70, 0.67), rgba(230, 57, 70, 0.12));
293
+ border: 1px solid rgba(245, 34, 34, 0.13);
294
+ backdrop-filter: blur(10px);
295
+ overflow: visible;
296
+ display: flex !important;
297
+ align-items: center;
298
+ justify-content: center;
299
+ transition: transform 0.2s ease, background 0.3s ease;
300
+ z-index: 10;
301
+ margin: 0 0 0 auto;
302
+ right: -10px;
303
+ top: -10px;
304
+ cursor: pointer;
305
+ }
306
+
307
+ .glass-close-btn::before,
308
+ .glass-close-btn::after {
309
+ transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
310
+ }
311
+
312
+ .glass-close-btn::before {
313
+ content: "";
314
+ position: absolute;
315
+ width: calc(100% + 1px);
316
+ height: calc(100% + 1px);
317
+ border-radius: 50%;
318
+ box-shadow: 4px 4px 13px rgba(230, 57, 70, 0.6);
319
+ transform: translate(0, 0);
320
+ z-index: -2;
321
+ }
322
+
323
+ .glass-close-btn::after {
324
+ content: "";
325
+ position: absolute;
326
+ top: 1px;
327
+ left: 1px;
328
+ width: calc(100% - 1px);
329
+ height: calc(100% - 1px);
330
+ border-radius: 50%;
331
+ background: linear-gradient(118deg, rgb(230, 57, 70) 30.25%, rgba(230, 57, 70, 0) 100%);
332
+ filter: blur(3px);
333
+ transform: translate(0, 0);
334
+ z-index: -1;
335
+ }
336
+
337
+ .glass-close-btn .icon-close-x {
338
+ position: relative;
339
+ z-index: 1;
340
+ font-size: 20px;
341
+ color: #FFFFFF;
342
+ user-select: none;
343
+ line-height: 1;
344
+ transition: color 0.2s ease;
345
+ font-weight: normal;
346
+ width: 30px;
347
+ height: 30px;
348
+ line-height: 27px;
349
+ }
350
+
351
+ .glass-close-btn:hover {
352
+ transform: scale(1.1);
353
+ background: linear-gradient(271deg, rgba(230, 57, 70, 0.59), rgba(230, 57, 70, 0.2) 50%);
354
+ }
355
+
356
+ .glass-close-btn:hover::before {
357
+ box-shadow: -5px -5px 29px rgba(230, 57, 70, 0.8);
358
+ opacity: 0.8;
359
+ }
360
+
361
+ .glass-close-btn:hover::after {
362
+ filter: blur(4px);
363
+ transform: translate(-1px, -1px);
364
+ opacity: 0.9;
365
+ }
366
+
367
+ .glass-close-btn:active {
368
+ transform: scale(0.95);
369
+ background: linear-gradient(230deg, rgba(230, 57, 70, 0.55) 0%, rgba(230, 57, 70, 0.1) 40%);
370
+ }
371
+
372
+ /* ===== SPACING UTILITIES ===== */
373
+ .space-1 { gap: var(--space-1); }
374
+ .space-2 { gap: var(--space-2); }
375
+ .space-3 { gap: var(--space-3); }
376
+ .space-4 { gap: var(--space-4); }
377
+ .space-5 { gap: var(--space-5); }
378
+ .space-6 { gap: var(--space-6); }
379
+ .space-8 { gap: var(--space-8); }
380
+ .space-10 { gap: var(--space-10); }
381
+ .space-12 { gap: var(--space-12); }
382
+ .space-16 { gap: var(--space-16); }
383
+
384
+ /* ===== LAYOUT PRIMITIVES (Cupcode Grid System) ===== */
385
+ .cc-container {
386
+ width: 100%;
387
+ max-width: 1280px;
388
+ margin-left: auto;
389
+ margin-right: auto;
390
+ padding-left: var(--space-4);
391
+ padding-right: var(--space-4);
392
+ }
393
+
394
+ .cc-container-narrow {
395
+ max-width: 960px;
396
+ }
397
+
398
+ .cc-container-wide {
399
+ max-width: 1440px;
400
+ }
401
+
402
+ .cc-stack {
403
+ display: flex;
404
+ flex-direction: column;
405
+ }
406
+
407
+ .cc-cluster {
408
+ display: flex;
409
+ flex-wrap: wrap;
410
+ gap: var(--space-4);
411
+ align-content: flex-end;
412
+ justify-content: space-around;
413
+ align-items: flex-end;
414
+ }
415
+
416
+ .cc-grid {
417
+ display: grid;
418
+ gap: var(--space-4);
419
+ }
420
+
421
+ .cc-grid-2 {
422
+ grid-template-columns: repeat(2, 1fr);
423
+ }
424
+
425
+ .cc-grid-3 {
426
+ grid-template-columns: repeat(3, 1fr);
427
+ }
428
+
429
+ .cc-grid-4 {
430
+ grid-template-columns: repeat(4, 1fr);
431
+ }
432
+
433
+ @media (max-width: 768px) {
434
+ .cc-grid-2,
435
+ .cc-grid-3,
436
+ .cc-grid-4 {
437
+ grid-template-columns: 1fr;
438
+ }
439
+ }
440
+
441
+ /* ===== STATE UTILITIES ===== */
442
+ .state-hover {
443
+ transition: opacity var(--motion-medium) var(--ease-smooth);
444
+ }
445
+
446
+ .state-hover:hover {
447
+ opacity: var(--opacity-hover);
448
+ }
449
+
450
+ .state-disabled {
451
+ opacity: var(--opacity-disabled);
452
+ pointer-events: none;
453
+ cursor: not-allowed;
454
+ }
455
+
456
+ .state-focus-visible:focus-visible {
457
+ outline: 2px solid hsl(var(--cc-purple));
458
+ outline-offset: 2px;
459
+ }
460
+
461
+ /* Gradient utilities */
462
+ .cc-gradient-galaxy {
463
+ background: var(--cc-gradient-galaxy);
464
+ }
465
+
466
+ .cc-gradient-comet {
467
+ background: var(--cc-gradient-comet);
468
+ }
469
+
470
+ .cc-text-gradient-galaxy {
471
+ background: var(--cc-gradient-galaxy);
472
+ background-clip: text;
473
+ -webkit-background-clip: text;
474
+ color: transparent;
475
+ -webkit-text-fill-color: transparent;
476
+ }
477
+
478
+ /* Gradientes Animados */
479
+ .cc-gradient-animated {
480
+ background: var(--cc-gradient-animated-1);
481
+ background-size: 200% 200%;
482
+ animation: gradient-shift 3s ease infinite;
483
+ }
484
+
485
+ .cc-gradient-pulse {
486
+ background: var(--cc-gradient-animated-2);
487
+ background-size: 400% 400%;
488
+ animation: gradient-wave 5s ease infinite;
489
+ }
490
+
491
+ .cc-gradient-shimmer {
492
+ position: relative;
493
+ overflow: hidden;
494
+ }
495
+
496
+ .cc-gradient-shimmer::after {
497
+ content: '';
498
+ position: absolute;
499
+ top: 0;
500
+ left: -100%;
501
+ width: 100%;
502
+ height: 100%;
503
+ background: var(--cc-gradient-shimmer);
504
+ animation: shimmer 2s infinite;
505
+ }
506
+
507
+ @keyframes gradient-shift {
508
+ 0% { background-position: 0% 50%; }
509
+ 50% { background-position: 100% 50%; }
510
+ 100% { background-position: 0% 50%; }
511
+ }
512
+
513
+ @keyframes gradient-wave {
514
+ 0% { background-position: 0% 50%; }
515
+ 25% { background-position: 50% 100%; }
516
+ 50% { background-position: 100% 50%; }
517
+ 75% { background-position: 50% 0%; }
518
+ 100% { background-position: 0% 50%; }
519
+ }
520
+
521
+ @keyframes shimmer {
522
+ 0% { left: -100%; }
523
+ 100% { left: 100%; }
524
+ }
525
+
526
+ /* Eyebrow/Pill destaque (padrão homepage) */
527
+ .span-destaque {
528
+ display: inline-block;
529
+ background: hsl(var(--cc-purple));
530
+ color: white;
531
+ font-size: 0.75rem;
532
+ padding: 2px 5px;
533
+ border-radius: var(--radius-sm);
534
+ font-weight: 600;
535
+ text-transform: uppercase;
536
+ letter-spacing: 0.5px;
537
+ }
538
+
539
+ .color-one {
540
+ color: hsl(var(--cc-pink));
541
+ }
542
+
543
+ .color-four {
544
+ color: white;
545
+ }
546
+
547
+ /* === Jelly Animation === */
548
+ .force-jelly {
549
+ animation: jelly-bounce 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
550
+ }
551
+
552
+ @keyframes jelly-bounce {
553
+ 0% { transform: scale(1, 1); }
554
+ 5% { transform: scale(1.08, 0.92); }
555
+ 10% { transform: scale(0.92, 1.08); }
556
+ 15% { transform: scale(1.05, 0.95); }
557
+ 20% { transform: scale(0.95, 1.05); }
558
+ 25% { transform: scale(1.03, 0.97); }
559
+ 30% { transform: scale(0.97, 1.03); }
560
+ 35% { transform: scale(1.02, 0.98); }
561
+ 40% { transform: scale(0.98, 1.02); }
562
+ 45% { transform: scale(1.01, 0.99); }
563
+ 50% { transform: scale(0.99, 1.01); }
564
+ 55% { transform: scale(1.005, 0.995); }
565
+ 60% { transform: scale(0.995, 1.005); }
566
+ 100% { transform: scale(1, 1); }
567
+ }
568
+
569
+ /* ===== FONT UTILITIES ===== */
570
+ .font-cupcode {
571
+ font-family: 'Tomorrow', sans-serif;
572
+ }
573
+
574
+ /* ===== ANIMATED GRADIENT TEXT ===== */
575
+ .gradient-text-animated {
576
+ background-image: linear-gradient(-225deg, #9e9e9e 8%, #515151 29%, #5f5f5f 67%, #9e9e9e 90%);
577
+ background-size: 200% auto;
578
+ background-clip: text;
579
+ -webkit-background-clip: text;
580
+ color: #fff;
581
+ -webkit-text-fill-color: transparent;
582
+ text-fill-color: transparent;
583
+ animation: textclip 10s linear infinite;
584
+ display: inline-block;
585
+ }
586
+
587
+ @keyframes textclip {
588
+ to {
589
+ background-position: 200% center;
590
+ }
591
+ }
592
+
593
+ /* ===== SWIPER STYLES ===== */
594
+ .swiper-button-next,
595
+ .swiper-button-prev {
596
+ position: absolute;
597
+ top: 0;
598
+ height: 100% !important;
599
+ margin-top: 0px !important;
600
+ background: linear-gradient(
601
+ var(--edge-deg),
602
+ rgb(255 255 255 / 0%) 0%,
603
+ rgba(255, 255, 255, 1) 60%
604
+ );
605
+ }
606
+
607
+ .swiper-button-next.bg-none,
608
+ .swiper-button-prev.bg-none {
609
+ background: none;
610
+ }
611
+
612
+ .swiper-button-prev.swiper-button-disabled,
613
+ .swiper-button-next.swiper-button-disabled {
614
+ display: none;
615
+ }
616
+
617
+ .swiper-wrapper {
618
+ height: auto !important;
619
+ }
620
+
621
+ .swiper-slide {
622
+ height: auto;
623
+ max-width: 100%;
624
+ }
625
+
626
+ .swiper-button-next::after,
627
+ .swiper-button-prev::after {
628
+ background: linear-gradient(45deg, #d26099, #e6dad9);
629
+ backdrop-filter: blur(16px) saturate(180%);
630
+ border-radius: 100%;
631
+ min-height: 30px;
632
+ min-width: 30px;
633
+ font-size: 15px !important;
634
+ font-weight: 900;
635
+ display: flex;
636
+ justify-content: center;
637
+ align-items: center;
638
+ position: relative;
639
+ color: #e6dad9;
640
+ }
641
+
642
+ .swiper-button-next {
643
+ right: 0 !important;
644
+ --edge-deg: 90deg;
645
+ }
646
+
647
+ .swiper-button-prev {
648
+ left: 0 !important;
649
+ --edge-deg: 270deg;
650
+ }
651
+
652
+ .swiper-button-next::after {
653
+ right: 2px;
654
+ }
655
+
656
+ .swiper-button-prev::after {
657
+ left: 2px;
658
+ }
659
+
660
+ /* ===== AUDIO PLAYER CIRCLE ===== */
661
+ .circle {
662
+ display: grid;
663
+ grid-template-rows: 1fr;
664
+ grid-row: 4/6;
665
+ grid-column: 2/3;
666
+ align-items: center;
667
+ justify-items: center;
668
+ width: 6rem;
669
+ height: 100%;
670
+ border-radius: 1rem;
671
+ position: absolute;
672
+ top: calc(50% - 48px / 3);
673
+ transform: translate(-50%, -50%);
674
+ left: 50%;
675
+ }
676
+
677
+ .circle__btn {
678
+ position: relative;
679
+ z-index: 300;
680
+ display: flex;
681
+ grid-row: 1/2;
682
+ grid-column: 1/2;
683
+ align-items: center;
684
+ justify-content: center;
685
+ justify-self: center;
686
+ width: 3rem;
687
+ height: 3rem;
688
+ margin: 0.6rem;
689
+ border-radius: 50%;
690
+ background-color: #e4ebf5;
691
+ color: #ffffff;
692
+ box-shadow:
693
+ 0.3rem 0.3rem 0.6rem #c8d0e7,
694
+ -0.2rem -0.2rem 0.5rem #ffffff;
695
+ font-size: 3.2rem;
696
+ cursor: pointer;
697
+ transition: all 0.3s;
698
+ }
699
+
700
+ .dark .circle__btn {
701
+ background-color: rgba(23, 16, 45, 0.92);
702
+ color: rgba(248, 244, 255, 0.92);
703
+ box-shadow:
704
+ 0.3rem 0.3rem 0.6rem rgba(4, 1, 18, 0.6),
705
+ -0.2rem -0.2rem 0.5rem rgba(115, 72, 180, 0.35);
706
+ }
707
+
708
+ .circle__btn:hover {
709
+ color: #951ddb40;
710
+ background-color: #fff;
711
+ }
712
+
713
+ .dark .circle__btn:hover {
714
+ color: rgba(237, 30, 121, 0.65);
715
+ background-color: rgba(39, 27, 75, 0.95);
716
+ }
717
+
718
+ .circle__btn:hover ~ .circle__back-1 {
719
+ background: linear-gradient(to bottom, #951ddb30 0%, #ed1e7930 100%);
720
+ }
721
+
722
+ .dark .circle__btn:hover ~ .circle__back-1 {
723
+ background: linear-gradient(to bottom, rgba(149, 29, 219, 0.45) 0%, rgba(237, 30, 121, 0.45) 100%);
724
+ }
725
+
726
+ .circle__btn.shadow {
727
+ box-shadow:
728
+ inset 0.2rem 0.2rem 0.5rem #c8d0e7,
729
+ inset -0.2rem -0.2rem 0.5rem #ffffff;
730
+ }
731
+
732
+ .dark .circle__btn.shadow {
733
+ box-shadow:
734
+ inset 0.2rem 0.2rem 0.5rem rgba(4, 1, 18, 0.8),
735
+ inset -0.2rem -0.2rem 0.5rem rgba(107, 66, 174, 0.35);
736
+ }
737
+
738
+ .circle__btn .play {
739
+ position: absolute;
740
+ opacity: 0;
741
+ transition: 0.02s linear;
742
+ font-size: 25px;
743
+ }
744
+
745
+ .circle__btn .play.visibility {
746
+ opacity: 1;
747
+ transition: 0.02s linear;
748
+ }
749
+
750
+ .circle__btn .pause {
751
+ position: absolute;
752
+ opacity: 0;
753
+ transition: 0.02s linear;
754
+ font-size: 25px;
755
+ }
756
+
757
+ .circle__btn .pause.visibility {
758
+ opacity: 1;
759
+ }
760
+
761
+ .circle__back-1,
762
+ .circle__back-2 {
763
+ z-index: 100;
764
+ grid-row: 1/2;
765
+ grid-column: 1/2;
766
+ width: 3rem;
767
+ height: 3rem;
768
+ border-radius: 50%;
769
+ filter: blur(1px);
770
+ }
771
+
772
+ .circle__back-1 {
773
+ background: linear-gradient(to bottom, #c8d0e7 0%, #ffffff 100%);
774
+ box-shadow:
775
+ 0.4rem 0.4rem 0.8rem #c8d0e7,
776
+ -0.4rem -0.4rem 0.8rem #ffffff;
777
+ animation: waves 4s linear infinite;
778
+ }
779
+
780
+ .dark .circle__back-1 {
781
+ background: linear-gradient(to bottom, rgba(54, 36, 92, 0.75) 0%, rgba(92, 42, 120, 0.65) 100%);
782
+ box-shadow:
783
+ 0.4rem 0.4rem 0.8rem rgba(4, 1, 18, 0.55),
784
+ -0.4rem -0.4rem 0.8rem rgba(112, 70, 179, 0.28);
785
+ }
786
+
787
+ .circle__back-2 {
788
+ box-shadow:
789
+ 0.4rem 0.4rem 0.8rem #c8d0e7,
790
+ -0.4rem -0.4rem 0.8rem #ffffff;
791
+ animation: waves 4s linear 2s infinite;
792
+ }
793
+
794
+ .dark .circle__back-2 {
795
+ box-shadow:
796
+ 0.4rem 0.4rem 0.8rem rgba(4, 1, 18, 0.55),
797
+ -0.4rem -0.4rem 0.8rem rgba(112, 70, 179, 0.28);
798
+ }
799
+
800
+ @keyframes waves {
801
+ 0% {
802
+ opacity: 1;
803
+ transform: scale(1);
804
+ }
805
+ 50% {
806
+ opacity: 1;
807
+ }
808
+ 100% {
809
+ opacity: 0;
810
+ transform: scale(2);
811
+ }
812
+ }
813
+
814
+ /* ===== MARQUEE ANIMATIONS ===== */
815
+ @keyframes slide-left {
816
+ to {
817
+ transform: translate3d(calc(-1 * var(--dist)), 0, 0);
818
+ }
819
+ }
820
+
821
+ @keyframes slide-right {
822
+ to {
823
+ transform: translate3d(0, 0, 0);
824
+ }
825
+ }
826
+
827
+ .marquee-left {
828
+ animation: slide-left var(--dur) linear infinite;
829
+ will-change: transform;
830
+ }
831
+
832
+ .marquee-right {
833
+ animation: slide-right var(--dur) linear infinite;
834
+ will-change: transform;
835
+ }
836
+
837
+ .pausing:hover .marquee-left,
838
+ .pausing:hover .marquee-right {
839
+ animation-play-state: paused !important;
840
+ }
841
+
842
+ /* ===== DIALOG STYLES ===== */
843
+ [data-slot="dialog-overlay"] {
844
+ background: rgba(255, 255, 255, 0.3);
845
+ backdrop-filter: blur(10px);
846
+ }
847
+
848
+ .dialog-overlay {
849
+ overflow: visible;
850
+ }
851
+
852
+ .dialog-content {
853
+ max-height: 90vh;
854
+ overflow-y: auto;
855
+ scrollbar-width: none;
856
+ }
857
+
858
+ .dialog-content::-webkit-scrollbar {
859
+ display: none;
860
+ }
861
+
862
+ .dialog-video-player {
863
+ width: 100%;
864
+ max-width: 95vw;
865
+ }
866
+
867
+ .dialog-video-player .video-player {
868
+ max-height: 80vh;
869
+ width: 100%;
870
+ max-width: 100%;
871
+ height: auto;
872
+ object-fit: contain;
873
+ outline: none;
874
+ display: block;
875
+ }
876
+
877
+ .dialog-video-player.horizontal {
878
+ max-width: 95vw;
879
+ }
880
+
881
+ .dialog-video-player.horizontal .video-player {
882
+ max-height: 95vh;
883
+ width: 100%;
884
+ }
885
+
886
+ .dialog-video-player button[data-slot='dialog-close'] {
887
+ background: #ed1e79;
888
+ padding: 5px;
889
+ border-radius: 100%;
890
+ opacity: 1;
891
+ color: white;
892
+ box-shadow: none;
893
+ cursor: pointer;
894
+ }
895
+
896
+ .popup-de-orcamento {
897
+ display: block;
898
+ top: 0;
899
+ width: 100% !important;
900
+ max-width: 100% !important;
901
+ overflow-x: hidden;
902
+ padding: 0;
903
+ padding-top: 20px;
904
+ padding-bottom: 20px;
905
+ height: 100%;
906
+ max-height: 100%;
907
+ }
908
+
909
+ .popup-de-orcamento button[data-slot="dialog-close"] {
910
+ display: none;
911
+ }
912
+
913
+ /* ===== MISC UTILITIES ===== */
914
+ img.logo-footer {
915
+ margin-bottom: -50px;
916
+ margin-left: -18px;
917
+ margin-top: -45px;
918
+ }
919
+
920
+ .acabamento-footer::before {
921
+ content: '';
922
+ position: absolute;
923
+ width: 100%;
924
+ height: 80px;
925
+ background: linear-gradient(0deg, #ffffff80, transparent);
926
+ z-index: 1;
927
+ bottom: 0;
928
+ left: 0;
929
+ }
930
+
931
+ .animation-grow {
932
+ transition: all 0.3s linear;
933
+ }
934
+
935
+ .animation-grow:hover {
936
+ box-shadow: rgb(181 96 246) 0px 5px 15px;
937
+ scale: 1.03;
938
+ transform: none;
939
+ }
940
+
941
+ img.astrounauta-animado {
942
+ transform-origin: top center;
943
+ animation: balancoAstronauta 2.5s ease-in-out infinite alternate;
944
+ }
945
+
946
+ @keyframes balancoAstronauta {
947
+ 0% {
948
+ transform: rotate(-10deg);
949
+ }
950
+ 100% {
951
+ transform: rotate(10deg);
952
+ }
953
+ }
954
+
955
+ @keyframes rotateTrofeu {
956
+ 0% { rotate: 0deg; }
957
+ 25% { rotate: 10deg; }
958
+ 50% { rotate: 0deg; }
959
+ 75% { rotate: -10deg; }
960
+ 100% { rotate: 0deg; }
961
+ }
962
+
963
+ .rotateTrofeu {
964
+ animation: rotateTrofeu 4s cubic-bezier(0.63, 0.3, 0.24, 0.36) infinite;
965
+ }
966
+
967
+ @keyframes MoveNuvem {
968
+ 0% { transform: translateX(0px); }
969
+ 50% { transform: translateX(-20px); }
970
+ 100% { transform: translateY(0px); }
971
+ }
972
+
973
+ .move-nuvem {
974
+ animation: MoveNuvem infinite;
975
+ }
976
+
977
+ @keyframes pulseScale {
978
+ 0% { transform: scale(1); }
979
+ 50% { transform: scale(1.1); }
980
+ 100% { transform: scale(1); }
981
+ }
982
+
983
+ .pulseScale {
984
+ animation: pulseScale 5s infinite;
985
+ }
986
+
987
+ @keyframes floatA {
988
+ 0% { transform: translateY(0); }
989
+ 50% { transform: translateY(-10px); }
990
+ 100% { transform: translateY(0); }
991
+ }
992
+
993
+ @keyframes floatB {
994
+ 0% { transform: translateY(0) rotate(-1deg); }
995
+ 50% { transform: translateY(8px) rotate(1deg); }
996
+ 100% { transform: translateY(0) rotate(-1deg); }
997
+ }
998
+
999
+ @keyframes floatC {
1000
+ 0% { transform: translateY(0) rotate(-4deg); }
1001
+ 50% { transform: translateY(8px) rotate(4deg); }
1002
+ 100% { transform: translateY(0) rotate(-4deg); }
1003
+ }
1004
+
1005
+ .animate-float-slow {
1006
+ animation: floatA 6s ease-in-out infinite;
1007
+ }
1008
+
1009
+ .animate-float-fast {
1010
+ animation: floatB 4.8s ease-in-out infinite;
1011
+ }
1012
+
1013
+ .animate-float-and-rotate-fast {
1014
+ animation: floatC 4.8s ease-in-out infinite;
1015
+ }
1016
+
1017
+ /* ===== HERO SECTION ===== */
1018
+ #hero-section-one {
1019
+ height: 500px;
1020
+ }
1021
+
1022
+ #hero-section-one .video-hero {
1023
+ position: absolute;
1024
+ right: 0;
1025
+ top: 0;
1026
+ border-top-right-radius: 60px;
1027
+ border-bottom-right-radius: 60px;
1028
+ height: 100%;
1029
+ z-index: 1;
1030
+ overflow: hidden;
1031
+ }
1032
+
1033
+ #hero-section-one .video-hero video {
1034
+ border-top-right-radius: 60px;
1035
+ border-bottom-right-radius: 60px;
1036
+ height: 100%;
1037
+ }
1038
+
1039
+ #hero-section-one .video-hero::after {
1040
+ content: '';
1041
+ position: absolute;
1042
+ top: 0;
1043
+ left: 0px;
1044
+ width: 120px;
1045
+ height: 500px;
1046
+ background: linear-gradient(90deg, #ffffff, #ffffff00);
1047
+ }
1048
+
1049
+ .row-column-content {
1050
+ height: calc(100% - 4.5rem);
1051
+ display: flex;
1052
+ flex-direction: column;
1053
+ align-items: flex-start;
1054
+ max-width: 40%;
1055
+ justify-content: center;
1056
+ z-index: 2;
1057
+ position: relative;
1058
+ }
1059
+
1060
+ .prev-link {
1061
+ font-size: 1rem;
1062
+ font-weight: 600;
1063
+ color: #e91e63;
1064
+ text-decoration: none;
1065
+ cursor: pointer;
1066
+ text-shadow: 0 1px 6px rgba(255, 255, 255, 0.89);
1067
+ transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.3s ease;
1068
+ }
1069
+
1070
+ .orcamento-to-step .orcamento-steps-numeros {
1071
+ max-width: 250px;
1072
+ margin: 0 auto;
1073
+ border: solid 1px #951ddb14;
1074
+ padding: 5px 10px;
1075
+ border-radius: 20px;
1076
+ background: #951ddb14;
1077
+ overflow: hidden;
1078
+ }
1079
+
1080
+ .orcamento-to-step .orcamento-steps-numeros-content {
1081
+ background: #951ddb80;
1082
+ width: 110%;
1083
+ left: 50%;
1084
+ transform: translate(-50%, 0px);
1085
+ max-width: 255px;
1086
+ }
1087
+
1088
+ .login__brand {
1089
+ margin-bottom: 0 !important;
1090
+ }
1091
+
1092
+ /* Animation duration utilities */
1093
+ .animation-dr-1s { animation-duration: 1s; }
1094
+ .animation-dr-2s { animation-duration: 2s; }
1095
+ .animation-dr-3s { animation-duration: 3s; }
1096
+ .animation-dr-4s { animation-duration: 4s; }
1097
+ .animation-dr-5s { animation-duration: 5s; }
1098
+ .animation-dr-6s { animation-duration: 6s; }
1099
+ .animation-dr-7s { animation-duration: 7s; }
1100
+ .animation-dr-8s { animation-duration: 8s; }
1101
+ .animation-dr-9s { animation-duration: 9s; }
1102
+ .animation-dr-10s { animation-duration: 10s; }
1103
+
1104
+ /* ===== RESPONSIVE STYLES ===== */
1105
+ @media (max-width: 1024px) {
1106
+ .acabamento-footer::before {
1107
+ height: 10px;
1108
+ }
1109
+ #hero-section-one {
1110
+ height: 400px;
1111
+ }
1112
+ #hero-section-one .video-hero video {
1113
+ max-width: 500px;
1114
+ scale: 1.3;
1115
+ }
1116
+ .row-column-content {
1117
+ max-width: 45%;
1118
+ }
1119
+ }
1120
+
1121
+ @media (max-width: 768px) {
1122
+ img.ElementoFlutuante2 {
1123
+ display: none;
1124
+ }
1125
+ .circle {
1126
+ transform: translate(0%, -50%);
1127
+ top: calc(50% - 32px / 3);
1128
+ right: 0%;
1129
+ left: unset;
1130
+ width: 5rem;
1131
+ }
1132
+ .circle__btn {
1133
+ width: 2rem;
1134
+ height: 2rem;
1135
+ }
1136
+ .row-column-content {
1137
+ max-width: 100%;
1138
+ padding-top: 300px;
1139
+ }
1140
+ #hero-section-one {
1141
+ height: 100%;
1142
+ }
1143
+ #hero-section-one .video-hero {
1144
+ right: unset;
1145
+ top: 0;
1146
+ left: 0;
1147
+ max-height: 300px;
1148
+ width: 100%;
1149
+ border-top-right-radius: 60px;
1150
+ border-top-left-radius: 60px;
1151
+ border-bottom-right-radius: 0;
1152
+ }
1153
+ #hero-section-one .video-hero video {
1154
+ width: 100%;
1155
+ object-fit: cover;
1156
+ scale: none;
1157
+ max-width: 100%;
1158
+ }
1159
+ #hero-section-one .video-hero::after {
1160
+ left: 0;
1161
+ bottom: 0;
1162
+ top: unset;
1163
+ width: 100%;
1164
+ height: 50px;
1165
+ background: linear-gradient(360deg, #ffffff, #ffffff00);
1166
+ }
1167
+ }
1168
+
1169
+ @media (max-width: 568px) {
1170
+ .row-column-content {
1171
+ padding-top: 200px;
1172
+ }
1173
+ #hero-section-one .video-hero {
1174
+ max-height: 250px;
1175
+ }
1176
+ .glass-close-btn {
1177
+ width: 20px;
1178
+ height: 20px;
1179
+ right: 3px;
1180
+ top: 0px;
1181
+ }
1182
+ }
1183
+ }
1184
+
1185
+ @layer utilities {
1186
+ /* Reduced motion */
1187
+ @media (prefers-reduced-motion: reduce) {
1188
+ *,
1189
+ *::before,
1190
+ *::after {
1191
+ animation-duration: 0.01ms !important;
1192
+ animation-iteration-count: 1 !important;
1193
+ transition-duration: 0.01ms !important;
1194
+ }
1195
+ }
1196
+ }