@cupcodev/ui 7.0.0 → 8.0.0

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 (13) hide show
  1. package/README.md +239 -239
  2. package/dist/index.cjs +3604 -2715
  3. package/dist/index.d.cts +61 -4
  4. package/dist/index.d.ts +61 -4
  5. package/dist/index.js +3561 -2667
  6. package/dist/styles.css +3 -3
  7. package/package.json +189 -187
  8. package/postinstall.cjs +20 -20
  9. package/styles/base.css +140 -138
  10. package/styles/dock.css +868 -813
  11. package/styles/global.css +2073 -2071
  12. package/styles/tokens.css +415 -415
  13. package/tailwind-preset.cjs +196 -196
package/styles/global.css CHANGED
@@ -1,2077 +1,2079 @@
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
-
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
11
  body {
12
12
  @apply bg-background text-foreground;
13
13
  font-family: var(--font-ui);
14
+ overflow-x: clip;
14
15
  }
15
16
 
16
17
  html {
17
- scrollbar-gutter: stable both-edges;
18
- }
19
-
20
- * {
21
- scrollbar-width: thin;
22
- scrollbar-color: var(--cc-scrollbar-thumb) var(--cc-scrollbar-track);
23
- }
24
-
25
- *::-webkit-scrollbar {
26
- width: var(--cc-scrollbar-size);
27
- height: var(--cc-scrollbar-size);
28
- }
29
-
30
- *::-webkit-scrollbar-track {
31
- border-radius: var(--cc-scrollbar-radius);
32
- background: var(--cc-scrollbar-track);
33
- border: 1px solid var(--cc-scrollbar-thumb-border);
34
- backdrop-filter: blur(14px);
35
- -webkit-backdrop-filter: blur(14px);
36
- }
37
-
38
- *::-webkit-scrollbar-thumb {
39
- border-radius: var(--cc-scrollbar-radius);
40
- border: 1px solid var(--cc-scrollbar-thumb-border);
41
- background: linear-gradient(180deg, var(--cc-scrollbar-thumb-highlight), var(--cc-scrollbar-thumb));
42
- box-shadow: 0 10px 24px -14px var(--cc-scrollbar-glow);
43
- backdrop-filter: blur(20px);
44
- -webkit-backdrop-filter: blur(20px);
45
- transition: background 160ms var(--ease-natural), box-shadow 160ms var(--ease-natural);
46
- }
47
-
48
- *::-webkit-scrollbar-thumb:hover {
49
- background: linear-gradient(180deg, var(--cc-scrollbar-thumb-highlight), var(--cc-scrollbar-thumb-hover));
50
- box-shadow: 0 12px 28px -14px var(--cc-scrollbar-glow);
51
- }
52
-
53
- *::-webkit-scrollbar-corner {
54
- background: transparent;
55
- }
56
-
57
- h1, h2, h3, h4, h5, h6 {
58
- font-family: var(--font-display);
59
- font-weight: 700;
60
- }
61
-
62
- h1 { font-size: 2.25rem; line-height: 1.1; } /* 36px */
63
- h2 { font-size: 1.875rem; line-height: 1.15; } /* 30px */
64
- h3 { font-size: 1.5rem; line-height: 1.2; } /* 24px */
65
- h4 { font-size: 1.25rem; line-height: 1.3; } /* 20px */
66
- h5 { font-size: 1.125rem; line-height: 1.3; } /* 18px */
67
- h6 { font-size: 1rem; line-height: 1.4; } /* 16px */
68
-
69
- video {
70
- appearance: none;
71
- transform: translateZ(0);
72
- filter: grayscale(0);
73
- }
74
- }
75
-
76
- @layer components {
77
- /* ===== LEGACY COLOR UTILITIES ===== */
78
- .text-color-one { color: var(--color-one); }
79
- .text-color-two { color: var(--color-two); }
80
- .text-color-three { color: var(--color-three); }
81
- .text-color-four { color: var(--color-four); }
82
- .bg-color-one { background-color: var(--color-one); }
83
- .bg-color-two { background-color: var(--color-two); }
84
- .bg-color-three { background-color: var(--color-three); }
85
- .bg-color-four { background-color: var(--color-four); }
86
-
87
- /* ===== GLASS MORPHISM UTILITIES ===== */
88
- .glass {
89
- background: hsl(var(--glass-bg));
90
- backdrop-filter: blur(var(--glass-blur-md));
91
- -webkit-backdrop-filter: blur(var(--glass-blur-md));
92
- border: 1px solid hsl(var(--glass-border));
93
- position: relative;
94
- }
95
-
96
- .glass::before {
97
- content: '';
98
- position: absolute;
99
- inset: 0;
100
- border-radius: inherit;
101
- padding: 1px;
102
- background: linear-gradient(
103
- 135deg,
104
- var(--glass-highlight) 0%,
105
- transparent 50%,
106
- var(--glass-ambient) 100%
107
- );
108
- -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
109
- -webkit-mask-composite: xor;
110
- mask-composite: exclude;
111
- pointer-events: none;
112
- }
113
-
114
- .glass-subtle {
115
- background: hsl(var(--card) / 0.72);
116
- backdrop-filter: blur(var(--glass-blur-sm));
117
- -webkit-backdrop-filter: blur(var(--glass-blur-sm));
118
- border: 1px solid hsl(var(--border) / 0.55);
119
- box-shadow:
120
- 0 8px 24px hsl(var(--foreground) / 0.06),
121
- inset 0 1px 0 hsl(var(--background) / 0.65);
122
- }
123
-
124
- .glass-strong {
125
- background: hsl(var(--glass-bg-strong));
126
- backdrop-filter: blur(var(--glass-blur-lg));
127
- -webkit-backdrop-filter: blur(var(--glass-blur-lg));
128
- border: 1px solid hsl(var(--glass-border));
129
- }
130
-
131
- .glass-inverse {
132
- background: rgba(58, 42, 88, 0.2);
133
- backdrop-filter: blur(var(--glass-blur-md));
134
- -webkit-backdrop-filter: blur(var(--glass-blur-md));
135
- border: 1px solid rgba(255, 255, 255, 0.1);
136
- }
137
-
138
- .glass-card {
139
- background: linear-gradient(115deg, #7c5bbb75, #ffffff90, #ffffff70, #ffffff61, #975ab69e);
140
- backdrop-filter: blur(15px);
141
- border-radius: 25px;
142
- box-shadow:
143
- 0 8px 32px rgba(0, 0, 0, 0.1),
144
- inset 0 1px 0 rgba(255, 255, 255, 0.5),
145
- inset 0 -1px 0 rgba(255, 255, 255, 0.1),
146
- inset 0 0 20px 10px rgba(255, 255, 255, 1);
147
- position: relative;
148
- }
149
-
150
- .cc-scrollbar {
151
- scrollbar-width: thin;
152
- scrollbar-color: var(--cc-scrollbar-thumb) var(--cc-scrollbar-track);
153
- }
154
-
155
- .cc-scrollbar-purple {
156
- --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
157
- --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
158
- --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
159
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
160
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
161
- --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
162
- }
163
-
164
- .dark .cc-scrollbar-purple {
165
- --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
166
- --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
167
- --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
168
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
169
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
170
- --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
171
- }
172
-
173
- .cc-scrollbar-pink {
174
- --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
175
- --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
176
- --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
177
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
178
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
179
- --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
180
- }
181
-
182
- .dark .cc-scrollbar-pink {
183
- --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
184
- --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
185
- --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
186
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
187
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
188
- --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
189
- }
190
-
191
- .cc-scrollbar-theme-light {
192
- --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
193
- --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
194
- --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
195
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
196
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
197
- --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
198
- }
199
-
200
- .cc-scrollbar-theme-dark {
201
- --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
202
- --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
203
- --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
204
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
205
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
206
- --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
207
- }
208
-
209
- .cc-scrollbar-pink.cc-scrollbar-theme-light {
210
- --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
211
- --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
212
- --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
213
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
214
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
215
- --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
216
- }
217
-
218
- .cc-scrollbar-pink.cc-scrollbar-theme-dark {
219
- --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
220
- --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
221
- --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
222
- --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
223
- --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
224
- --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
225
- }
226
-
227
- .cc-scrollbar-hide {
228
- scrollbar-width: none;
229
- -ms-overflow-style: none;
230
- }
231
-
232
- .cc-scrollbar-hide::-webkit-scrollbar {
233
- display: none;
234
- }
235
-
236
- /* ===== ELEVATION UTILITIES ===== */
237
- .elevation-0 { box-shadow: var(--elevation-0); }
238
- .elevation-1 { box-shadow: var(--elevation-1); }
239
- .elevation-2 { box-shadow: var(--elevation-2); }
240
- .elevation-3 { box-shadow: var(--elevation-3); }
241
- .elevation-4 { box-shadow: var(--elevation-4); }
242
- .elevation-5 { box-shadow: var(--elevation-5); }
243
-
244
- /* ===== SERVICE CARDS ===== */
245
- .service-card {
246
- position: relative;
247
- transition: all 0.3s ease;
248
- border-radius: 1rem;
249
- border: 1px solid #7c5bbb4d;
250
- filter: grayscale(1);
251
- transform: scale(1);
252
- }
253
-
254
- .service-card:hover {
255
- filter: none;
256
- background: linear-gradient(
257
- to bottom right,
258
- rgba(209, 179, 255, 0.4),
259
- rgba(255, 255, 255, 0.4) 31.51%,
260
- rgba(245, 228, 255, 0.45) 71.85%,
261
- rgba(237, 211, 255, 0.9)
262
- );
263
- }
264
-
265
- .service-card.active {
266
- filter: none;
267
- background: linear-gradient(
268
- to bottom right,
269
- rgba(209, 179, 255, 0.4),
270
- rgba(255, 255, 255, 0.4) 31.51%,
271
- rgba(245, 228, 255, 0.45) 71.85%,
272
- rgba(237, 211, 255, 0.9)
273
- );
274
- }
275
-
276
- .service-card.active:hover {
277
- backdrop-filter: blur(15px);
278
- background: linear-gradient(135deg, rgba(209, 179, 255, 0.6) 0%, rgba(237, 211, 255, 0.6) 100%);
279
- transform: scale(1.05);
280
- }
281
-
282
- .service-card.active::before {
283
- content: '';
284
- position: absolute;
285
- inset: 0;
286
- border-radius: inherit;
287
- box-shadow: 15px -18px 18px rgba(247, 21, 183, 0.17) inset;
288
- pointer-events: none;
289
- }
290
-
291
- .service-card.active::after {
292
- content: '';
293
- position: absolute;
294
- inset: 3px;
295
- border-radius: inherit;
296
- background: radial-gradient(
297
- rgba(255, 255, 255, 0.4),
298
- rgba(245, 228, 255, 0.38) 46.22%,
299
- rgba(209, 179, 255, 0.4) 83.61%,
300
- rgba(239, 192, 242, 1) 93.28%
301
- );
302
- filter: blur(7px);
303
- z-index: -1;
304
- transition: filter 0.3s ease;
305
- }
306
-
307
- /* ===== GLASS BUTTONS ===== */
308
- .glass-next-btn {
309
- position: relative;
310
- display: inline-flex;
311
- align-items: center;
312
- justify-content: center;
313
- padding: 8px 24px;
314
- border-radius: 50px;
315
- --btn-base-start: rgba(52, 152, 79, 0.67);
316
- --btn-base-mid: rgba(158, 241, 188, 0.68);
317
- --btn-base-end: rgba(171, 248, 181, 0.74);
318
- --btn-base-finish: rgba(150, 255, 148, 0.57);
319
- --btn-border-color: rgba(52, 152, 79, 0.13);
320
- --btn-hover-strong: rgba(52, 152, 79, 0.85);
321
- --btn-hover-soft: rgba(52, 152, 79, 0.2);
322
- --btn-shadow-color: rgba(52, 152, 79, 0.6);
323
- --btn-overlay-start: rgba(52, 152, 79, 0.5);
324
- --btn-overlay-end: rgba(38, 160, 71, 0.65);
325
- background: linear-gradient(
326
- 297deg,
327
- var(--btn-base-start) 0%,
328
- var(--btn-base-mid) 31.51%,
329
- var(--btn-base-end) 63.45%,
330
- var(--btn-base-finish) 100%
331
- );
332
- border: 1px solid var(--btn-border-color);
333
- backdrop-filter: blur(10px);
334
- cursor: pointer;
335
- overflow: visible;
336
- transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
337
- text-decoration: none;
338
- }
339
-
340
- .glass-next-btn:hover {
341
- transform: scale(1.05);
342
- background: linear-gradient(
343
- 230deg,
344
- var(--btn-hover-strong) 0%,
345
- var(--btn-hover-soft) 40%,
346
- rgba(255, 255, 255, 0.3) 100%
347
- );
348
- }
349
-
350
- .glass-next-btn::before {
351
- content: '';
352
- position: absolute;
353
- width: calc(100% + 1px);
354
- height: calc(100% + 1px);
355
- border-radius: 30px;
356
- box-shadow: 5px 7px 8px var(--btn-shadow-color);
357
- opacity: 0.6;
358
- z-index: -2;
359
- }
360
-
361
- .glass-next-btn::after {
362
- content: '';
363
- position: absolute;
364
- top: 2px;
365
- left: 2px;
366
- width: calc(100% - 4px);
367
- height: calc(100% - 4px);
368
- border-radius: 50px;
369
- background: linear-gradient(118deg, var(--btn-overlay-start) 0%, var(--btn-overlay-end) 46.64%);
370
- filter: blur(3px);
371
- z-index: -1;
372
- }
373
-
374
- .glass-next-btn .text {
375
- position: relative;
376
- z-index: 1;
377
- font-size: 1rem;
378
- font-weight: 600;
379
- color: #ffffff;
380
- user-select: none;
381
- transition: color 0.2s ease;
382
- }
383
-
384
- .glass-next-btn--color-one {
385
- --btn-base-start: color-mix(in srgb, var(--color-one) 85%, transparent);
386
- --btn-base-mid: color-mix(in srgb, var(--color-one) 65%, white);
387
- --btn-base-end: color-mix(in srgb, var(--color-one) 75%, transparent);
388
- --btn-base-finish: color-mix(in srgb, var(--color-one) 90%, black);
389
- --btn-border-color: color-mix(in srgb, var(--color-one) 35%, transparent);
390
- --btn-hover-strong: color-mix(in srgb, var(--color-one) 85%, white);
391
- --btn-hover-soft: color-mix(in srgb, var(--color-one) 30%, transparent);
392
- --btn-shadow-color: color-mix(in srgb, var(--color-one) 60%, transparent);
393
- --btn-overlay-start: color-mix(in srgb, var(--color-one) 55%, transparent);
394
- --btn-overlay-end: color-mix(in srgb, var(--color-one) 80%, black);
395
- }
396
-
397
- .glass-next-btn--destructive {
398
- --btn-base-start: color-mix(in srgb, hsl(var(--destructive)) 85%, transparent);
399
- --btn-base-mid: color-mix(in srgb, hsl(var(--destructive)) 65%, white);
400
- --btn-base-end: color-mix(in srgb, hsl(var(--destructive)) 75%, transparent);
401
- --btn-base-finish: color-mix(in srgb, hsl(var(--destructive)) 90%, black);
402
- --btn-border-color: color-mix(in srgb, hsl(var(--destructive)) 35%, transparent);
403
- --btn-hover-strong: color-mix(in srgb, hsl(var(--destructive)) 85%, white);
404
- --btn-hover-soft: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
405
- --btn-shadow-color: color-mix(in srgb, hsl(var(--destructive)) 60%, transparent);
406
- --btn-overlay-start: color-mix(in srgb, hsl(var(--destructive)) 55%, transparent);
407
- --btn-overlay-end: color-mix(in srgb, hsl(var(--destructive)) 80%, black);
408
- }
409
-
410
- .glass-close-btn {
411
- position: absolute;
412
- width: 30px;
413
- height: 30px;
414
- border-radius: 50%;
415
- background: linear-gradient(230deg, rgba(230, 57, 70, 0.67), rgba(230, 57, 70, 0.12));
416
- border: 1px solid rgba(245, 34, 34, 0.13);
417
- backdrop-filter: blur(10px);
418
- overflow: visible;
419
- display: flex !important;
420
- align-items: center;
421
- justify-content: center;
422
- transition: transform 0.2s ease, background 0.3s ease;
423
- z-index: 10;
424
- margin: 0 0 0 auto;
425
- right: -10px;
426
- top: -10px;
427
- cursor: pointer;
428
- }
429
-
430
- .glass-close-btn::before,
431
- .glass-close-btn::after {
432
- transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
433
- }
434
-
435
- .glass-close-btn::before {
436
- content: "";
437
- position: absolute;
438
- width: calc(100% + 1px);
439
- height: calc(100% + 1px);
440
- border-radius: 50%;
441
- box-shadow: 4px 4px 13px rgba(230, 57, 70, 0.6);
442
- transform: translate(0, 0);
443
- z-index: -2;
444
- }
445
-
446
- .glass-close-btn::after {
447
- content: "";
448
- position: absolute;
449
- top: 1px;
450
- left: 1px;
451
- width: calc(100% - 1px);
452
- height: calc(100% - 1px);
453
- border-radius: 50%;
454
- background: linear-gradient(118deg, rgb(230, 57, 70) 30.25%, rgba(230, 57, 70, 0) 100%);
455
- filter: blur(3px);
456
- transform: translate(0, 0);
457
- z-index: -1;
458
- }
459
-
460
- .glass-close-btn .icon-close-x {
461
- position: relative;
462
- z-index: 1;
463
- font-size: 20px;
464
- color: #FFFFFF;
465
- user-select: none;
466
- line-height: 1;
467
- transition: color 0.2s ease;
468
- font-weight: normal;
469
- width: 30px;
470
- height: 30px;
471
- line-height: 27px;
472
- }
473
-
474
- .glass-close-btn:hover {
475
- transform: scale(1.1);
476
- background: linear-gradient(271deg, rgba(230, 57, 70, 0.59), rgba(230, 57, 70, 0.2) 50%);
477
- }
478
-
479
- .glass-close-btn:hover::before {
480
- box-shadow: -5px -5px 29px rgba(230, 57, 70, 0.8);
481
- opacity: 0.8;
482
- }
483
-
484
- .glass-close-btn:hover::after {
485
- filter: blur(4px);
486
- transform: translate(-1px, -1px);
487
- opacity: 0.9;
488
- }
489
-
490
- .glass-close-btn:active {
491
- transform: scale(0.95);
492
- background: linear-gradient(230deg, rgba(230, 57, 70, 0.55) 0%, rgba(230, 57, 70, 0.1) 40%);
493
- }
494
-
495
- /* ===== SPACING UTILITIES ===== */
496
- .space-1 { gap: var(--space-1); }
497
- .space-2 { gap: var(--space-2); }
498
- .space-3 { gap: var(--space-3); }
499
- .space-4 { gap: var(--space-4); }
500
- .space-5 { gap: var(--space-5); }
501
- .space-6 { gap: var(--space-6); }
502
- .space-8 { gap: var(--space-8); }
503
- .space-10 { gap: var(--space-10); }
504
- .space-12 { gap: var(--space-12); }
505
- .space-16 { gap: var(--space-16); }
506
-
507
- /* ===== LAYOUT PRIMITIVES (Cupcode Grid System) ===== */
508
- .cc-container {
509
- width: 100%;
510
- max-width: 1280px;
511
- margin-left: auto;
512
- margin-right: auto;
513
- padding-left: var(--space-4);
514
- padding-right: var(--space-4);
515
- }
516
-
517
- .cc-container-narrow {
518
- max-width: 960px;
519
- }
520
-
521
- .cc-container-wide {
522
- max-width: 1440px;
523
- }
524
-
525
- .cc-stack {
526
- display: flex;
527
- flex-direction: column;
528
- }
529
-
530
- .cc-cluster {
531
- display: flex;
532
- flex-wrap: wrap;
533
- gap: var(--space-4);
534
- align-content: flex-end;
535
- justify-content: space-around;
536
- align-items: flex-end;
537
- }
538
-
539
- .cc-grid {
540
- display: grid;
541
- gap: var(--space-4);
542
- }
543
-
544
- .cc-grid-2 {
545
- grid-template-columns: repeat(2, 1fr);
546
- }
547
-
548
- .cc-grid-3 {
549
- grid-template-columns: repeat(3, 1fr);
550
- }
551
-
552
- .cc-grid-4 {
553
- grid-template-columns: repeat(4, 1fr);
554
- }
555
-
556
- @media (max-width: 768px) {
557
- .cc-grid-2,
558
- .cc-grid-3,
559
- .cc-grid-4 {
560
- grid-template-columns: 1fr;
561
- }
562
- }
563
-
564
- /* ===== STATE UTILITIES ===== */
565
- .state-hover {
566
- transition: opacity var(--motion-medium) var(--ease-smooth);
567
- }
568
-
569
- .state-hover:hover {
570
- opacity: var(--opacity-hover);
571
- background-color: var(--cc-hover-overlay);
572
- }
573
-
574
- .state-disabled {
575
- opacity: var(--opacity-disabled);
576
- pointer-events: none;
577
- cursor: not-allowed;
578
- }
579
-
580
- .state-focus-visible:focus-visible {
581
- outline: 2px solid hsl(var(--cc-purple));
582
- outline-offset: 2px;
583
- }
584
-
585
- /* Gradient utilities */
586
- .cc-gradient-galaxy {
587
- background: var(--cc-gradient-galaxy);
588
- }
589
-
590
- .gradient-primary {
591
- background: linear-gradient(135deg, hsl(281, 83%, 47.8%), hsl(331, 83%, 53.5%));
592
- }
593
-
594
- .cc-gradient-comet {
595
- background: var(--cc-gradient-comet);
596
- }
597
-
598
- .cc-text-gradient-galaxy {
599
- background: var(--cc-gradient-galaxy);
600
- background-clip: text;
601
- -webkit-background-clip: text;
602
- color: transparent;
603
- -webkit-text-fill-color: transparent;
604
- }
605
-
606
- /* Gradientes Animados */
607
- .cc-gradient-animated {
608
- background: var(--cc-gradient-animated-1);
609
- background-size: 200% 200%;
610
- animation: gradient-shift 3s ease infinite;
611
- }
612
-
613
- .cc-gradient-pulse {
614
- background: var(--cc-gradient-animated-2);
615
- background-size: 400% 400%;
616
- animation: gradient-wave 5s ease infinite;
617
- }
618
-
619
- .cc-gradient-shimmer {
620
- position: relative;
621
- overflow: hidden;
622
- }
623
-
624
- .cc-gradient-shimmer::after {
625
- content: '';
626
- position: absolute;
627
- top: 0;
628
- left: -100%;
629
- width: 100%;
630
- height: 100%;
631
- background: var(--cc-gradient-shimmer);
632
- animation: shimmer 2s infinite;
633
- }
634
-
635
- @keyframes gradient-shift {
636
- 0% { background-position: 0% 50%; }
637
- 50% { background-position: 100% 50%; }
638
- 100% { background-position: 0% 50%; }
639
- }
640
-
641
- @keyframes gradient-wave {
642
- 0% { background-position: 0% 50%; }
643
- 25% { background-position: 50% 100%; }
644
- 50% { background-position: 100% 50%; }
645
- 75% { background-position: 50% 0%; }
646
- 100% { background-position: 0% 50%; }
647
- }
648
-
649
- @keyframes shimmer {
650
- 0% { left: -100%; }
651
- 100% { left: 100%; }
652
- }
653
-
654
- /* Eyebrow/Pill destaque (padrão homepage) */
655
- .span-destaque {
656
- display: inline-block;
657
- background: hsl(var(--cc-purple));
658
- color: white;
659
- font-size: 0.75rem;
660
- padding: 2px 5px;
661
- border-radius: var(--radius-sm);
662
- font-weight: 600;
663
- text-transform: uppercase;
664
- letter-spacing: 0.5px;
665
- }
666
-
667
- .color-one {
668
- color: var(--color-one);
669
- }
670
-
671
- .color-four {
672
- color: white;
673
- }
674
-
675
- /* === Jelly Animation === */
676
- .force-jelly {
677
- animation: jelly-bounce 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
678
- }
679
-
680
- @keyframes jelly-bounce {
681
- 0% { transform: scale(1, 1); }
682
- 5% { transform: scale(1.08, 0.92); }
683
- 10% { transform: scale(0.92, 1.08); }
684
- 15% { transform: scale(1.05, 0.95); }
685
- 20% { transform: scale(0.95, 1.05); }
686
- 25% { transform: scale(1.03, 0.97); }
687
- 30% { transform: scale(0.97, 1.03); }
688
- 35% { transform: scale(1.02, 0.98); }
689
- 40% { transform: scale(0.98, 1.02); }
690
- 45% { transform: scale(1.01, 0.99); }
691
- 50% { transform: scale(0.99, 1.01); }
692
- 55% { transform: scale(1.005, 0.995); }
693
- 60% { transform: scale(0.995, 1.005); }
694
- 100% { transform: scale(1, 1); }
695
- }
696
-
697
- /* ===== Blob CTA Button (Webflow button-1) ===== */
698
- .cc-blob-cta {
699
- --cc-blob-shell: linear-gradient(140deg, rgba(244, 255, 249, 0.72), rgba(226, 255, 240, 0.56));
700
- --cc-blob-border: rgba(24, 183, 101, 0.34);
701
- --cc-blob-shadow: 0 12px 26px -18px rgba(17, 78, 54, 0.32), 0 10px 24px -16px rgba(24, 183, 101, 0.36);
702
- --cc-blob-shadow-hover: 0 16px 30px -18px rgba(17, 78, 54, 0.38), 0 12px 28px -16px rgba(24, 183, 101, 0.42);
703
- --cc-blob-wrap-bg: rgba(224, 255, 241, 0.34);
704
- --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.66), rgba(230, 255, 242, 0.52));
705
- --cc-blob-bg-hover: linear-gradient(140deg, rgba(255, 255, 255, 0.72), rgba(208, 250, 227, 0.58));
706
- --cc-blob-bg-active: linear-gradient(140deg, rgba(247, 255, 251, 0.58), rgba(191, 245, 217, 0.5));
707
- --cc-blob-label: #114e36;
708
- --cc-blob-glow-1: rgba(24, 183, 101, 0.28);
709
- --cc-blob-glow-2: rgba(66, 255, 211, 0.2);
710
- --cc-blob-glow-opacity-1: 0.34;
711
- --cc-blob-glow-opacity-2: 0.24;
712
- --cc-blob-color-opacity: 0.88;
713
- --cc-blob-blur-md: var(--glass-blur-md, 16px);
714
- --cc-blob-blur-sm: var(--glass-blur-sm, 10px);
715
- --cc-blob-radius: 9999px;
716
- --cc-blob-font: var(
717
- --font-display,
718
- "Tomorrow",
719
- ui-sans-serif,
720
- system-ui,
721
- -apple-system,
722
- "Segoe UI",
723
- Roboto,
724
- "Helvetica Neue",
725
- Arial,
726
- sans-serif
727
- );
728
- position: relative;
729
- display: inline-flex;
730
- align-items: center;
731
- justify-content: center;
732
- width: auto;
733
- min-width: 0;
734
- height: auto;
735
- min-height: 0;
736
- border: 0;
737
- border-radius: var(--cc-blob-radius);
738
- padding: 10px 15px;
739
- cursor: pointer;
740
- background: var(--cc-blob-shell);
741
- color: var(--cc-blob-label);
742
- border: 1px solid var(--cc-blob-border);
743
- overflow: visible;
744
- isolation: isolate;
745
- box-shadow: var(--cc-blob-shadow);
746
- backdrop-filter: blur(var(--cc-blob-blur-md)) saturate(145%);
747
- -webkit-backdrop-filter: blur(var(--cc-blob-blur-md)) saturate(145%);
748
- text-decoration: none;
749
- transition: transform 200ms ease, box-shadow 300ms ease;
750
- -webkit-tap-highlight-color: transparent;
751
- }
752
-
753
- .cc-blob-cta:focus {
754
- outline: none;
755
- }
756
-
757
- .cc-blob-cta:focus-visible {
758
- outline: 2px solid rgba(24, 183, 101, 0.45);
759
- outline-offset: 2px;
760
- }
761
-
762
- .cc-blob-cta:hover {
763
- box-shadow: var(--cc-blob-shadow-hover);
764
- }
765
-
766
- .cc-blob-cta:active {
767
- transform: translateY(1px);
768
- }
769
-
770
- .cc-blob-cta:disabled {
771
- cursor: not-allowed;
772
- opacity: 0.6;
773
- }
774
-
775
- .cc-blob-cta--sm {
776
- border-radius: var(--cc-blob-radius);
777
- }
778
-
779
- .cc-blob-cta--md {
780
- border-radius: var(--cc-blob-radius);
781
- }
782
-
783
- .cc-blob-cta--lg {
784
- border-radius: var(--cc-blob-radius);
785
- }
786
-
787
- .cc-blob-cta__color-wrap {
788
- position: absolute;
789
- inset: 0;
790
- z-index: 0;
791
- border-radius: var(--cc-blob-radius);
792
- background-color: var(--cc-blob-wrap-bg);
793
- border: 1px solid rgba(255, 255, 255, 0.65);
794
- backdrop-filter: blur(var(--cc-blob-blur-sm)) saturate(120%);
795
- -webkit-backdrop-filter: blur(var(--cc-blob-blur-sm)) saturate(120%);
796
- overflow: hidden;
797
- clip-path: inset(0 round var(--cc-blob-radius));
798
- -webkit-mask-image: -webkit-radial-gradient(white, black);
799
- pointer-events: none;
800
- }
801
-
802
- .cc-blob-cta__bg {
803
- position: absolute;
804
- z-index: 3;
805
- top: 50%;
806
- left: 50%;
807
- width: 97%;
808
- height: 95%;
809
- border-radius: var(--cc-blob-radius);
810
- background: var(--cc-blob-bg);
811
- box-shadow:
812
- inset 0 1px 0 rgba(255, 255, 255, 0.7),
813
- 0 4px 14px -14px rgba(58, 42, 88, 0.45);
814
- backdrop-filter: blur(var(--cc-blob-blur-sm));
815
- -webkit-backdrop-filter: blur(var(--cc-blob-blur-sm));
816
- clip-path: inset(0 round var(--cc-blob-radius));
817
- transform: translate(-50%, -50%);
818
- transition: all 0.3s ease-in-out;
819
- }
820
-
821
- .cc-blob-cta:hover .cc-blob-cta__bg {
822
- -webkit-backdrop-filter: blur(6px);
823
- backdrop-filter: blur(6px);
824
- background: var(--cc-blob-bg-hover);
825
- }
826
-
827
- .cc-blob-cta:active .cc-blob-cta__bg {
828
- background: var(--cc-blob-bg-active);
829
- }
830
-
831
- .cc-blob-cta__label {
832
- position: relative;
833
- z-index: 5;
834
- display: inline-flex;
835
- align-items: center;
836
- justify-content: center;
837
- color: var(--cc-blob-label);
838
- font-family: var(--cc-blob-font);
839
- font-size: 14px;
840
- font-weight: 600;
841
- line-height: 1;
842
- letter-spacing: 0.01em;
843
- text-align: center;
844
- pointer-events: none;
845
- white-space: nowrap;
846
- }
847
-
848
- .cc-blob-cta--lg .cc-blob-cta__label {
849
- font-size: 15px;
850
- }
851
-
852
- .cc-blob-cta--sm .cc-blob-cta__label {
853
- font-size: 13px;
854
- }
855
-
856
- .cc-blob-cta__color {
857
- position: absolute;
858
- z-index: 1;
859
- width: 50px;
860
- height: 50px;
861
- border-radius: 50%;
862
- filter: blur(16px);
863
- mix-blend-mode: normal;
864
- opacity: var(--cc-blob-color-opacity);
865
- will-change: transform;
866
- }
867
-
868
- .cc-blob-cta__color--1 {
869
- top: -30%;
870
- left: -5%;
871
- background-image: linear-gradient(112deg, #8dff4ed9, #18b765db);
872
- }
873
-
874
- .cc-blob-cta__color--2 {
875
- top: -30%;
876
- left: 29%;
877
- background-image: linear-gradient(251deg, #42ffd3e0, #15d4ffe0);
878
- }
879
-
880
- .cc-blob-cta__color--3 {
881
- top: -30%;
882
- left: 8%;
883
- background-image: linear-gradient(251deg, #7cff95d4, #15ff8fd9);
884
- }
885
-
886
- .cc-blob-cta:hover .cc-blob-cta__color--1,
887
- .cc-blob-cta:focus-visible .cc-blob-cta__color--1 {
888
- animation: cc-blob-cta-move-1 3.5s linear infinite;
889
- }
890
-
891
- .cc-blob-cta:hover .cc-blob-cta__color--2,
892
- .cc-blob-cta:focus-visible .cc-blob-cta__color--2 {
893
- animation: cc-blob-cta-move-2 3.5s linear infinite;
894
- }
895
-
896
- .cc-blob-cta:hover .cc-blob-cta__color--3,
897
- .cc-blob-cta:focus-visible .cc-blob-cta__color--3 {
898
- animation: cc-blob-cta-move-3 3.5s linear infinite;
899
- }
900
-
901
- .cc-blob-cta--secondary .cc-blob-cta__color--1 {
902
- background-image: linear-gradient(112deg, #ff0f33d6, #ff6600db);
903
- }
904
-
905
- .cc-blob-cta--secondary .cc-blob-cta__color--2 {
906
- background-image: linear-gradient(251deg, #07fc, #ad15ffe0);
907
- }
908
-
909
- .cc-blob-cta--secondary .cc-blob-cta__color--3 {
910
- background-image: linear-gradient(251deg, #7300ffd6, #e815ffd9);
911
- }
912
-
913
- .cc-blob-cta--secondary {
914
- --cc-blob-shell: linear-gradient(140deg, rgba(255, 255, 255, 0.64), rgba(248, 243, 255, 0.52));
915
- --cc-blob-wrap-bg: rgba(255, 255, 255, 0.26);
916
- --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.62), rgba(246, 238, 255, 0.5));
917
- --cc-blob-bg-hover: linear-gradient(140deg, rgba(255, 255, 255, 0.7), rgba(238, 224, 252, 0.56));
918
- --cc-blob-bg-active: linear-gradient(140deg, rgba(255, 255, 255, 0.56), rgba(228, 210, 248, 0.48));
919
- --cc-blob-label: hsl(var(--cc-ink, 261 35% 25%));
920
- --cc-blob-border: rgba(124, 91, 187, 0.26);
921
- --cc-blob-shadow: 0 12px 26px -18px rgba(58, 42, 88, 0.45), 0 8px 20px -16px rgba(124, 91, 187, 0.5);
922
- --cc-blob-shadow-hover: 0 16px 30px -18px rgba(58, 42, 88, 0.52), 0 10px 26px -16px rgba(124, 91, 187, 0.58);
923
- --cc-blob-glow-1: rgba(151, 90, 182, 0.38);
924
- --cc-blob-glow-2: rgba(237, 30, 121, 0.23);
925
- }
926
-
927
- .cc-blob-cta--half {
928
- --cc-blob-wrap-bg: rgba(235, 227, 250, 0.35);
929
- --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.66), rgba(236, 227, 252, 0.54));
930
- --cc-blob-label: hsl(var(--cc-purple, 261 41% 55%));
931
- --cc-blob-border: rgba(124, 91, 187, 0.34);
932
- --cc-blob-glow-1: rgba(124, 91, 187, 0.34);
933
- --cc-blob-glow-2: rgba(95, 110, 255, 0.22);
934
- }
935
-
936
- .cc-blob-cta__glow {
937
- position: absolute;
938
- border-radius: 50%;
939
- pointer-events: none;
940
- }
941
-
942
- .cc-blob-cta__glow--1 {
943
- z-index: -3;
944
- width: 220px;
945
- height: 140px;
946
- top: 18%;
947
- right: -42%;
948
- background-color: var(--cc-blob-glow-1);
949
- opacity: var(--cc-blob-glow-opacity-1);
950
- filter: blur(52px);
951
- }
952
-
953
- .cc-blob-cta__glow--2 {
954
- z-index: -2;
955
- width: 250px;
956
- height: 170px;
957
- top: 30%;
958
- right: 50%;
959
- background-color: var(--cc-blob-glow-2);
960
- opacity: var(--cc-blob-glow-opacity-2);
961
- filter: blur(56px);
962
- }
963
-
964
- .dark .cc-blob-cta {
965
- --cc-blob-shell: linear-gradient(140deg, rgba(7, 22, 15, 0.78), rgba(9, 37, 24, 0.62));
966
- --cc-blob-border: rgba(24, 183, 101, 0.34);
967
- --cc-blob-shadow: 0 0 15px rgba(16, 126, 74, 0.38);
968
- --cc-blob-shadow-hover: 0 0 24px rgba(16, 126, 74, 0.5);
969
- --cc-blob-wrap-bg: rgba(9, 37, 24, 0.42);
970
- --cc-blob-bg: linear-gradient(
971
- 140deg,
972
- rgba(7, 22, 15, 0.76),
973
- rgba(9, 37, 24, 0.6)
974
- );
975
- --cc-blob-bg-hover: linear-gradient(
976
- 140deg,
977
- rgba(9, 37, 24, 0.82),
978
- rgba(11, 45, 29, 0.64)
979
- );
980
- --cc-blob-bg-active: linear-gradient(
981
- 140deg,
982
- rgba(8, 31, 21, 0.7),
983
- rgba(8, 31, 21, 0.56)
984
- );
985
- --cc-blob-label: #ecfff6;
986
- --cc-blob-glow-1: rgba(24, 183, 101, 0.3);
987
- --cc-blob-glow-2: rgba(66, 255, 211, 0.18);
988
- --cc-blob-glow-opacity-1: 0.35;
989
- --cc-blob-glow-opacity-2: 0.22;
990
- --cc-blob-color-opacity: 1;
991
- }
992
-
993
- .dark .cc-blob-cta__color-wrap {
994
- border-color: transparent;
995
- }
996
-
997
- .dark .cc-blob-cta__bg {
998
- box-shadow: none;
999
- }
1000
-
1001
- .dark .cc-blob-cta--secondary {
1002
- --cc-blob-shell: linear-gradient(
1003
- 140deg,
1004
- hsl(var(--cc-ink, 261 35% 25%) / 0.62),
1005
- hsl(var(--cc-ink, 261 35% 25%) / 0.48)
1006
- );
1007
- --cc-blob-border: rgba(124, 91, 187, 0.36);
1008
- --cc-blob-shadow: 0 0 15px #3913b659;
1009
- --cc-blob-shadow-hover: 0 0 22px rgba(57, 19, 182, 0.5);
1010
- --cc-blob-wrap-bg: hsl(var(--cc-ink, 261 35% 25%) / 0.52);
1011
- --cc-blob-bg: linear-gradient(140deg, hsl(var(--cc-ink, 261 35% 25%) / 0.78), hsl(var(--cc-ink, 261 35% 25%) / 0.62));
1012
- --cc-blob-bg-hover: linear-gradient(140deg, hsl(var(--cc-ink, 261 35% 25%) / 0.86), hsl(var(--cc-ink, 261 35% 25%) / 0.68));
1013
- --cc-blob-bg-active: linear-gradient(140deg, hsl(var(--cc-ink, 261 35% 25%) / 0.66), hsl(var(--cc-ink, 261 35% 25%) / 0.52));
1014
- --cc-blob-label: #ffffff;
1015
- --cc-blob-glow-1: hsl(var(--cc-ink, 261 35% 25%));
1016
- --cc-blob-glow-2: rgba(124, 91, 187, 0.48);
1017
- }
1018
-
1019
- .dark .cc-blob-cta--half {
1020
- --cc-blob-wrap-bg: hsl(var(--cc-ink, 261 35% 25%) / 0.48);
1021
- --cc-blob-bg: linear-gradient(
1022
- 140deg,
1023
- hsl(var(--cc-ink, 261 35% 25%) / 0.74),
1024
- rgba(16, 12, 35, 0.64)
1025
- );
1026
- --cc-blob-bg-hover: linear-gradient(
1027
- 140deg,
1028
- hsl(var(--cc-ink, 261 35% 25%) / 0.82),
1029
- rgba(16, 12, 35, 0.7)
1030
- );
1031
- --cc-blob-bg-active: linear-gradient(
1032
- 140deg,
1033
- hsl(var(--cc-ink, 261 35% 25%) / 0.68),
1034
- rgba(12, 8, 25, 0.62)
1035
- );
1036
- --cc-blob-label: #ece6ff;
1037
- }
1038
-
1039
- @keyframes cc-blob-cta-move-1 {
1040
- 0% { transform: translate3d(0%, 0%, 0); }
1041
- 16.67% { transform: translate3d(120%, 0%, 0); }
1042
- 33.33% { transform: translate3d(230%, -20%, 0); }
1043
- 50% { transform: translate3d(240%, 60%, 0); }
1044
- 66.67% { transform: translate3d(80%, 80%, 0); }
1045
- 83.33% { transform: translate3d(0%, 80%, 0); }
1046
- 100% { transform: translate3d(0%, 0%, 0); }
1047
- }
1048
-
1049
- @keyframes cc-blob-cta-move-2 {
1050
- 0% { transform: translate3d(0%, 0%, 0); }
1051
- 16.67% { transform: translate3d(130%, 0%, 0); }
1052
- 33.33% { transform: translate3d(170%, 30%, 0); }
1053
- 50% { transform: translate3d(170%, 80%, 0); }
1054
- 66.67% { transform: translate3d(0%, 100%, 0); }
1055
- 83.33% { transform: translate3d(-80%, 40%, 0); }
1056
- 100% { transform: translate3d(0%, 0%, 0); }
1057
- }
1058
-
1059
- @keyframes cc-blob-cta-move-3 {
1060
- 0% { transform: translate3d(0%, 0%, 0); }
1061
- 16.67% { transform: translate3d(120%, 0%, 0); }
1062
- 33.33% { transform: translate3d(120%, 80%, 0); }
1063
- 50% { transform: translate3d(-120%, 80%, 0); }
1064
- 66.67% { transform: translate3d(-120%, 0%, 0); }
1065
- 83.33% { transform: translate3d(-120%, 0%, 0); }
1066
- 100% { transform: translate3d(0%, 0%, 0); }
1067
- }
1068
-
1069
- /* ===== FONT UTILITIES ===== */
1070
- .font-cupcode {
1071
- font-family: 'Tomorrow', sans-serif;
1072
- }
1073
-
1074
- /* ===== ANIMATED GRADIENT TEXT ===== */
1075
- .gradient-text-animated {
1076
- background-image: linear-gradient(-225deg, #9e9e9e 8%, #515151 29%, #5f5f5f 67%, #9e9e9e 90%);
1077
- background-size: 200% auto;
1078
- background-clip: text;
1079
- -webkit-background-clip: text;
1080
- color: #fff;
1081
- -webkit-text-fill-color: transparent;
1082
- text-fill-color: transparent;
1083
- animation: textclip 10s linear infinite;
1084
- display: inline-block;
1085
- }
1086
-
1087
- @keyframes textclip {
1088
- to {
1089
- background-position: 200% center;
1090
- }
1091
- }
1092
-
1093
- /* ===== SWIPER STYLES ===== */
1094
- .swiper-button-next,
1095
- .swiper-button-prev {
1096
- position: absolute;
1097
- top: 0;
1098
- height: 100% !important;
1099
- margin-top: 0px !important;
1100
- background: linear-gradient(
1101
- var(--edge-deg),
1102
- rgb(255 255 255 / 0%) 0%,
1103
- rgba(255, 255, 255, 1) 60%
1104
- );
1105
- }
1106
-
1107
- .swiper-button-next.bg-none,
1108
- .swiper-button-prev.bg-none {
1109
- background: none;
1110
- }
1111
-
1112
- .swiper-button-prev.swiper-button-disabled,
1113
- .swiper-button-next.swiper-button-disabled {
1114
- display: none;
1115
- }
1116
-
1117
- .swiper-wrapper {
1118
- height: auto !important;
1119
- }
1120
-
1121
- .swiper-slide {
1122
- height: auto;
1123
- max-width: 100%;
1124
- }
1125
-
1126
- .swiper-button-next::after,
1127
- .swiper-button-prev::after {
1128
- background: linear-gradient(45deg, #d26099, #e6dad9);
1129
- backdrop-filter: blur(16px) saturate(180%);
1130
- border-radius: 100%;
1131
- min-height: 30px;
1132
- min-width: 30px;
1133
- font-size: 15px !important;
1134
- font-weight: 900;
1135
- display: flex;
1136
- justify-content: center;
1137
- align-items: center;
1138
- position: relative;
1139
- color: #e6dad9;
1140
- }
1141
-
1142
- .swiper-button-next {
1143
- right: 0 !important;
1144
- --edge-deg: 90deg;
1145
- }
1146
-
1147
- .swiper-button-prev {
1148
- left: 0 !important;
1149
- --edge-deg: 270deg;
1150
- }
1151
-
1152
- .swiper-button-next::after {
1153
- right: 2px;
1154
- }
1155
-
1156
- .swiper-button-prev::after {
1157
- left: 2px;
1158
- }
1159
-
1160
- /* ===== VIDEO WATCH BUTTON ===== */
1161
- .cc-video-watch-btn {
1162
- position: relative;
1163
- display: inline-flex;
1164
- align-items: center;
1165
- justify-content: flex-start;
1166
- width: 64px;
1167
- height: 64px;
1168
- padding: 7px;
1169
- border: 1px solid rgba(159, 160, 255, 0.3);
1170
- border-radius: 9999px;
1171
- background: rgba(255, 255, 255, 0.08);
1172
- color: rgba(248, 244, 255, 0.96);
1173
- text-decoration: none;
1174
- cursor: pointer;
1175
- overflow: visible;
1176
- isolation: isolate;
1177
- transform: translateZ(0);
1178
- -webkit-tap-highlight-color: transparent;
1179
- box-shadow:
1180
- inset 0 1px 0 rgba(255, 255, 255, 0.45),
1181
- 0 14px 34px -22px rgba(0, 0, 0, 0.8);
1182
- transition:
1183
- width 520ms cubic-bezier(0.22, 1, 0.36, 1),
1184
- border-color 220ms ease,
1185
- background-color 220ms ease,
1186
- box-shadow 220ms ease;
1187
- }
1188
-
1189
- .cc-video-watch-btn:focus {
1190
- outline: none;
1191
- }
1192
-
1193
- .cc-video-watch-btn:hover {
1194
- width: 180px;
1195
- border-color: rgba(208, 154, 255, 0.5);
1196
- background: rgba(255, 255, 255, 0.13);
1197
- box-shadow:
1198
- inset 0 1px 0 rgba(255, 255, 255, 0.55),
1199
- 0 18px 38px -20px rgba(151, 90, 182, 0.62);
1200
- }
1201
-
1202
- .cc-video-watch-btn:focus-visible {
1203
- outline: 2px solid rgba(237, 30, 121, 0.45);
1204
- outline-offset: 2px;
1205
- }
1206
-
1207
- .cc-video-watch-btn:active {
1208
- transform: translateY(1px);
1209
- }
1210
-
1211
- .cc-video-watch-btn__bg {
1212
- position: relative;
1213
- z-index: 2;
1214
- display: inline-flex;
1215
- align-items: center;
1216
- gap: 10px;
1217
- width: 48px;
1218
- height: 48px;
1219
- padding: 0 16px 0 14px;
1220
- border: 1px solid rgba(255, 255, 255, 0.28);
1221
- border-radius: 9999px;
1222
- overflow: hidden;
1223
- backdrop-filter: blur(14px) saturate(130%);
1224
- -webkit-backdrop-filter: blur(14px) saturate(130%);
1225
- background:
1226
- radial-gradient(120% 140% at 84% 18%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.06) 100%),
1227
- linear-gradient(120deg, rgba(151, 90, 182, 0.2), rgba(124, 91, 187, 0.16));
1228
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
1229
- transition:
1230
- width 520ms cubic-bezier(0.22, 1, 0.36, 1),
1231
- border-color 220ms ease,
1232
- box-shadow 220ms ease;
1233
- }
1234
-
1235
- .cc-video-watch-btn:hover .cc-video-watch-btn__bg {
1236
- width: 164px;
1237
- border-color: rgba(255, 255, 255, 0.38);
1238
- box-shadow:
1239
- inset 0 1px 0 rgba(255, 255, 255, 0.52),
1240
- 0 6px 18px -16px rgba(151, 90, 182, 0.78);
1241
- }
1242
-
1243
- .cc-video-watch-btn__icon {
1244
- position: relative;
1245
- z-index: 2;
1246
- display: inline-flex;
1247
- align-items: center;
1248
- justify-content: center;
1249
- flex-shrink: 0;
1250
- transform: translateX(2px);
1251
- color: hsl(var(--cc-pink));
1252
- filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.32));
1253
- transition: transform 320ms ease;
1254
- }
1255
-
1256
- .cc-video-watch-btn:hover .cc-video-watch-btn__icon {
1257
- transform: translateX(0);
1258
- }
1259
-
1260
- .cc-video-watch-btn__label {
1261
- position: relative;
1262
- z-index: 2;
1263
- display: inline-block;
1264
- max-width: 0;
1265
- overflow: hidden;
1266
- white-space: nowrap;
1267
- opacity: 0;
1268
- transform: translateX(10px);
1269
- font-family: var(--font-display);
1270
- font-size: 0.875rem;
1271
- font-weight: 600;
1272
- line-height: 1;
1273
- letter-spacing: 0.01em;
1274
- color: hsl(var(--cc-pink));
1275
- transition:
1276
- max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
1277
- opacity 320ms ease,
1278
- transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
1279
- }
1280
-
1281
- .cc-video-watch-btn:hover .cc-video-watch-btn__label {
1282
- max-width: 96px;
1283
- opacity: 1;
1284
- transform: translateX(0);
1285
- color: hsl(var(--cc-purple));
1286
- }
1287
-
1288
- .cc-video-watch-btn__mask {
1289
- position: absolute;
1290
- inset: 0;
1291
- z-index: 1;
1292
- border-radius: inherit;
1293
- overflow: hidden;
1294
- opacity: 0.86;
1295
- pointer-events: none;
1296
- }
1297
-
1298
- .cc-video-watch-btn__blob {
1299
- position: absolute;
1300
- width: 88px;
1301
- height: 88px;
1302
- border-radius: 50%;
1303
- will-change: transform;
1304
- filter: blur(10px) saturate(125%);
1305
- opacity: 0.94;
1306
- mix-blend-mode: screen;
1307
- animation: none;
1308
- transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
1309
- }
1310
-
1311
- .cc-video-watch-btn__blob--1 {
1312
- top: -30px;
1313
- left: -34px;
1314
- background: radial-gradient(
1315
- circle at 36% 34%,
1316
- rgba(159, 160, 255, 0.52) 0%,
1317
- rgba(124, 91, 187, 0.34) 34%,
1318
- rgba(124, 91, 187, 0.16) 56%,
1319
- rgba(124, 91, 187, 0.05) 72%,
1320
- rgba(124, 91, 187, 0) 100%
1321
- );
1322
- }
1323
-
1324
- .cc-video-watch-btn__blob--2 {
1325
- top: 2px;
1326
- left: 6px;
1327
- background: radial-gradient(
1328
- circle at 34% 34%,
1329
- rgba(249, 104, 173, 0.5) 0%,
1330
- rgba(237, 30, 121, 0.34) 34%,
1331
- rgba(237, 30, 121, 0.16) 56%,
1332
- rgba(237, 30, 121, 0.05) 72%,
1333
- rgba(237, 30, 121, 0) 100%
1334
- );
1335
- }
1336
-
1337
- .cc-video-watch-btn__blob--3 {
1338
- top: -34px;
1339
- left: 24px;
1340
- background: radial-gradient(
1341
- circle at 34% 34%,
1342
- rgba(111, 248, 222, 0.48) 0%,
1343
- rgba(89, 200, 255, 0.32) 34%,
1344
- rgba(89, 200, 255, 0.14) 56%,
1345
- rgba(89, 200, 255, 0.04) 72%,
1346
- rgba(89, 200, 255, 0) 100%
1347
- );
1348
- }
1349
-
1350
- .cc-video-watch-btn__blob--4 {
1351
- top: -2px;
1352
- left: 54px;
1353
- background: radial-gradient(
1354
- circle at 34% 34%,
1355
- rgba(255, 197, 115, 0.5) 0%,
1356
- rgba(255, 142, 161, 0.32) 34%,
1357
- rgba(255, 142, 161, 0.15) 56%,
1358
- rgba(255, 142, 161, 0.04) 72%,
1359
- rgba(255, 142, 161, 0) 100%
1360
- );
1361
- }
1362
-
1363
- .cc-video-watch-btn__blob--5 {
1364
- top: -26px;
1365
- left: 86px;
1366
- background: radial-gradient(
1367
- circle at 34% 34%,
1368
- rgba(95, 110, 255, 0.5) 0%,
1369
- rgba(151, 90, 182, 0.34) 34%,
1370
- rgba(151, 90, 182, 0.16) 56%,
1371
- rgba(151, 90, 182, 0.05) 72%,
1372
- rgba(151, 90, 182, 0) 100%
1373
- );
1374
- }
1375
-
1376
- .cc-video-watch-btn:hover .cc-video-watch-btn__blob--1 {
1377
- animation: cc-video-watch-blob-1 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
1378
- }
1379
-
1380
- .cc-video-watch-btn:hover .cc-video-watch-btn__blob--2 {
1381
- animation: cc-video-watch-blob-2 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
1382
- }
1383
-
1384
- .cc-video-watch-btn:hover .cc-video-watch-btn__blob--3 {
1385
- animation: cc-video-watch-blob-3 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
1386
- }
1387
-
1388
- .cc-video-watch-btn:hover .cc-video-watch-btn__blob--4 {
1389
- animation: cc-video-watch-blob-4 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
1390
- }
1391
-
1392
- .cc-video-watch-btn:hover .cc-video-watch-btn__blob--5 {
1393
- animation: cc-video-watch-blob-5 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
1394
- }
1395
-
1396
- .cc-video-watch-btn__glow {
1397
- position: absolute;
1398
- inset: 8px;
1399
- z-index: 0;
1400
- border-radius: 9999px;
1401
- pointer-events: none;
1402
- background: radial-gradient(80% 120% at 50% 85%, rgba(151, 90, 182, 0.52), rgba(151, 90, 182, 0));
1403
- filter: blur(16px);
1404
- opacity: 0.28;
1405
- transition: opacity 320ms ease;
1406
- }
1407
-
1408
- .cc-video-watch-btn:hover .cc-video-watch-btn__glow {
1409
- opacity: 0.72;
1410
- }
1411
-
1412
- .dark .cc-video-watch-btn {
1413
- border-color: rgba(159, 160, 255, 0.38);
1414
- background: rgba(255, 255, 255, 0.11);
1415
- }
1416
-
1417
- .dark .cc-video-watch-btn__bg {
1418
- border-color: rgba(255, 255, 255, 0.32);
1419
- }
1420
-
1421
- .dark .cc-video-watch-btn:hover .cc-video-watch-btn__label {
1422
- color: hsl(var(--cc-pink));
1423
- }
1424
-
1425
- @keyframes cc-video-watch-blob-1 {
1426
- 0%, 18% {
1427
- transform: translate3d(0, 0, 0);
1428
- }
1429
- 44% {
1430
- transform: translate3d(130px, 68px, 0);
1431
- }
1432
- 72% {
1433
- transform: translate3d(160px, -70px, 0);
1434
- }
1435
- 88% {
1436
- transform: translate3d(24px, -12px, 0);
1437
- }
1438
- 100% {
1439
- transform: translate3d(0, 0, 0);
1440
- }
1441
- }
1442
-
1443
- @keyframes cc-video-watch-blob-2 {
1444
- 0%, 18% {
1445
- transform: translate3d(0, 0, 0);
1446
- }
1447
- 44% {
1448
- transform: translate3d(-140px, -53px, 0);
1449
- }
1450
- 72% {
1451
- transform: translate3d(-260px, 40px, 0);
1452
- }
1453
- 88% {
1454
- transform: translate3d(-18px, 6px, 0);
1455
- }
1456
- 100% {
1457
- transform: translate3d(0, 0, 0);
1458
- }
1459
- }
1460
-
1461
- @keyframes cc-video-watch-blob-3 {
1462
- 0%, 18% {
1463
- transform: translate3d(0, 0, 0);
1464
- }
1465
- 44% {
1466
- transform: translate3d(100px, -73px, 0);
1467
- }
1468
- 72% {
1469
- transform: translate3d(100px, 0, 0);
1470
- }
1471
- 88% {
1472
- transform: translate3d(18px, -10px, 0);
1473
- }
1474
- 100% {
1475
- transform: translate3d(0, 0, 0);
1476
- }
1477
- }
1478
-
1479
- @keyframes cc-video-watch-blob-4 {
1480
- 0%, 18% {
1481
- transform: translate3d(0, 0, 0);
1482
- }
1483
- 44% {
1484
- transform: translate3d(-140px, -48px, 0);
1485
- }
1486
- 72% {
1487
- transform: translate3d(20px, 80px, 0);
1488
- }
1489
- 88% {
1490
- transform: translate3d(6px, 16px, 0);
1491
- }
1492
- 100% {
1493
- transform: translate3d(0, 0, 0);
1494
- }
1495
- }
1496
-
1497
- @keyframes cc-video-watch-blob-5 {
1498
- 0%, 18% {
1499
- transform: translate3d(0, 0, 0);
1500
- }
1501
- 44% {
1502
- transform: translate3d(180px, 10px, 0);
1503
- }
1504
- 72% {
1505
- transform: translate3d(80px, -80px, 0);
1506
- }
1507
- 88% {
1508
- transform: translate3d(12px, -14px, 0);
1509
- }
1510
- 100% {
1511
- transform: translate3d(0, 0, 0);
1512
- }
1513
- }
1514
-
1515
- :root {
1516
- --theme-x: 50%;
1517
- --theme-y: 50%;
1518
- }
1519
-
1520
- ::view-transition-old(root),
1521
- ::view-transition-new(root) {
1522
- animation: none;
1523
- mix-blend-mode: normal;
1524
- }
1525
-
1526
- ::view-transition-old(root) {
1527
- z-index: 0;
1528
- }
1529
-
1530
- ::view-transition-new(root) {
1531
- z-index: 1;
1532
- }
1533
-
1534
- @keyframes theme-reveal {
1535
- from {
1536
- clip-path: circle(0% at var(--theme-x) var(--theme-y));
1537
- opacity: 0.7;
1538
- }
1539
-
1540
- to {
1541
- clip-path: circle(150% at var(--theme-x) var(--theme-y));
1542
- opacity: 1;
1543
- }
1544
- }
1545
-
1546
- ::view-transition-new(root) {
1547
- animation: theme-reveal 0.4s ease-in-out forwards;
1548
- }
1549
-
1550
- /* ===== MARQUEE ANIMATIONS ===== */
1551
- @keyframes slide-left {
1552
- to {
1553
- transform: translate3d(calc(-1 * var(--dist)), 0, 0);
1554
- }
1555
- }
1556
-
1557
- @keyframes slide-right {
1558
- to {
1559
- transform: translate3d(0, 0, 0);
1560
- }
1561
- }
1562
-
1563
- .marquee-left {
1564
- animation: slide-left var(--dur) linear infinite;
1565
- will-change: transform;
1566
- }
1567
-
1568
- .marquee-right {
1569
- animation: slide-right var(--dur) linear infinite;
1570
- will-change: transform;
1571
- }
1572
-
1573
- .pausing:hover .marquee-left,
1574
- .pausing:hover .marquee-right {
1575
- animation-play-state: paused !important;
1576
- }
1577
-
1578
- /* ===== DIALOG STYLES ===== */
1579
- [data-slot="dialog-overlay"] {
1580
- background: rgba(255, 255, 255, 0.3);
1581
- backdrop-filter: blur(10px);
1582
- }
1583
-
1584
- .dialog-overlay {
1585
- overflow: visible;
1586
- }
1587
-
1588
- .dialog-content {
1589
- max-height: 90vh;
1590
- overflow-y: auto;
1591
- scrollbar-width: none;
1592
- }
1593
-
1594
- .dialog-content::-webkit-scrollbar {
1595
- display: none;
1596
- }
1597
-
1598
- .dialog-video-player {
1599
- width: 100%;
1600
- max-width: 95vw;
1601
- }
1602
-
1603
- .dialog-video-player .video-player {
1604
- max-height: 80vh;
1605
- width: 100%;
1606
- max-width: 100%;
1607
- height: auto;
1608
- object-fit: contain;
1609
- outline: none;
1610
- display: block;
1611
- }
1612
-
1613
- .dialog-video-player.horizontal {
1614
- max-width: 95vw;
1615
- }
1616
-
1617
- .dialog-video-player.horizontal .video-player {
1618
- max-height: 95vh;
1619
- width: 100%;
1620
- }
1621
-
1622
- .dialog-video-player button[data-slot='dialog-close'] {
1623
- background: #975ab6;
1624
- padding: 5px;
1625
- border-radius: 100%;
1626
- opacity: 1;
1627
- color: white;
1628
- box-shadow: none;
1629
- cursor: pointer;
1630
- }
1631
-
1632
- .popup-de-orcamento {
1633
- display: block;
1634
- top: 0;
1635
- width: 100% !important;
1636
- max-width: 100% !important;
1637
- overflow-x: hidden;
1638
- padding: 0;
1639
- padding-top: 20px;
1640
- padding-bottom: 20px;
1641
- height: 100%;
1642
- max-height: 100%;
1643
- }
1644
-
1645
- .popup-de-orcamento button[data-slot="dialog-close"] {
1646
- display: none;
1647
- }
1648
-
1649
- /* ===== MISC UTILITIES ===== */
1650
- img.logo-footer {
1651
- margin-bottom: -50px;
1652
- margin-left: -18px;
1653
- margin-top: -45px;
1654
- }
1655
-
1656
- .acabamento-footer::before {
1657
- content: '';
1658
- position: absolute;
1659
- width: 100%;
1660
- height: 80px;
1661
- background: linear-gradient(0deg, #ffffff80, transparent);
1662
- z-index: 1;
1663
- bottom: 0;
1664
- left: 0;
1665
- }
1666
-
1667
- .animation-grow {
1668
- transition: all 0.3s linear;
1669
- }
1670
-
1671
- .animation-grow:hover {
1672
- box-shadow: rgb(181 96 246) 0px 5px 15px;
1673
- scale: 1.03;
1674
- transform: none;
1675
- }
1676
-
1677
- img.astrounauta-animado {
1678
- transform-origin: top center;
1679
- animation: balancoAstronauta 2.5s ease-in-out infinite alternate;
1680
- }
1681
-
1682
- @keyframes balancoAstronauta {
1683
- 0% {
1684
- transform: rotate(-10deg);
1685
- }
1686
- 100% {
1687
- transform: rotate(10deg);
1688
- }
1689
- }
1690
-
1691
- @keyframes rotateTrofeu {
1692
- 0% { rotate: 0deg; }
1693
- 25% { rotate: 10deg; }
1694
- 50% { rotate: 0deg; }
1695
- 75% { rotate: -10deg; }
1696
- 100% { rotate: 0deg; }
1697
- }
1698
-
1699
- .rotateTrofeu {
1700
- animation: rotateTrofeu 4s cubic-bezier(0.63, 0.3, 0.24, 0.36) infinite;
1701
- }
1702
-
1703
- @keyframes MoveNuvem {
1704
- 0% { transform: translateX(0px); }
1705
- 50% { transform: translateX(-20px); }
1706
- 100% { transform: translateY(0px); }
1707
- }
1708
-
1709
- .move-nuvem {
1710
- animation: MoveNuvem infinite;
1711
- }
1712
-
1713
- @keyframes pulseScale {
1714
- 0% { transform: scale(1); }
1715
- 50% { transform: scale(1.1); }
1716
- 100% { transform: scale(1); }
1717
- }
1718
-
1719
- .pulseScale {
1720
- animation: pulseScale 5s infinite;
1721
- }
1722
-
1723
- @keyframes floatA {
1724
- 0% { transform: translateY(0); }
1725
- 50% { transform: translateY(-10px); }
1726
- 100% { transform: translateY(0); }
1727
- }
1728
-
1729
- @keyframes floatB {
1730
- 0% { transform: translateY(0) rotate(-1deg); }
1731
- 50% { transform: translateY(8px) rotate(1deg); }
1732
- 100% { transform: translateY(0) rotate(-1deg); }
1733
- }
1734
-
1735
- @keyframes floatC {
1736
- 0% { transform: translateY(0) rotate(-4deg); }
1737
- 50% { transform: translateY(8px) rotate(4deg); }
1738
- 100% { transform: translateY(0) rotate(-4deg); }
1739
- }
1740
-
1741
- .animate-float-slow {
1742
- animation: floatA 6s ease-in-out infinite;
1743
- }
1744
-
1745
- .animate-float-fast {
1746
- animation: floatB 4.8s ease-in-out infinite;
1747
- }
1748
-
1749
- .animate-float-and-rotate-fast {
1750
- animation: floatC 4.8s ease-in-out infinite;
1751
- }
1752
-
1753
- .cc-animacoes-cta-wrap {
1754
- position: relative;
1755
- display: inline-flex;
1756
- }
1757
-
1758
- .cc-animacoes-cta-btn {
1759
- transform-origin: 50% 56%;
1760
- will-change: transform;
1761
- }
1762
-
1763
- .cc-animacoes-cta-badge-wrap {
1764
- position: absolute;
1765
- right: -9px;
1766
- top: -12px;
1767
- z-index: 12;
1768
- pointer-events: none;
1769
- }
1770
-
1771
- .cc-animacoes-cta-badge {
1772
- position: relative;
1773
- z-index: 2;
1774
- display: inline-flex;
1775
- align-items: center;
1776
- justify-content: center;
1777
- border-radius: 999px;
1778
- border: 1px solid rgba(255, 255, 255, 0.8);
1779
- background: linear-gradient(130deg, #f9247c, #ff8b3d);
1780
- color: #fff;
1781
- font-size: 10px;
1782
- font-weight: 700;
1783
- line-height: 1;
1784
- letter-spacing: 0.04em;
1785
- text-transform: uppercase;
1786
- padding: 4px 7px;
1787
- box-shadow: 0 8px 20px -10px rgba(249, 36, 124, 0.7);
1788
- transform-origin: 62% 72%;
1789
- animation: cc-animacoes-cta-wobble 2.6s ease-in-out infinite;
1790
- will-change: transform;
1791
- }
1792
-
1793
- .cc-animacoes-cta-confetti {
1794
- position: absolute;
1795
- left: 50%;
1796
- top: 50%;
1797
- transform: translate(-50%, -50%);
1798
- width: 78px;
1799
- height: 52px;
1800
- z-index: 1;
1801
- pointer-events: none;
1802
- overflow: visible;
1803
- }
1804
-
1805
- .cc-animacoes-cta-confetti line {
1806
- stroke: rgba(255, 246, 245, 0.96);
1807
- stroke-width: 1.8;
1808
- stroke-linecap: round;
1809
- transform-origin: 39px 26px;
1810
- animation: cc-animacoes-confetti 1.35s ease-in-out infinite;
1811
- }
1812
-
1813
- .cc-animacoes-cta-confetti line:nth-child(2) {
1814
- animation-delay: 120ms;
1815
- }
1816
-
1817
- .cc-animacoes-cta-confetti line:nth-child(3) {
1818
- animation-delay: 240ms;
1819
- }
1820
-
1821
- .cc-animacoes-cta-confetti line:nth-child(4) {
1822
- animation-delay: 360ms;
1823
- }
1824
-
1825
- .cc-animacoes-cta-confetti line:nth-child(5) {
1826
- animation-delay: 480ms;
1827
- }
1828
-
1829
- .cc-animacoes-cta-confetti line:nth-child(6) {
1830
- animation-delay: 600ms;
1831
- }
1832
-
1833
- .cc-animacoes-cta-confetti line:nth-child(7) {
1834
- animation-delay: 720ms;
1835
- }
1836
-
1837
- .cc-animacoes-cta-confetti line:nth-child(8) {
1838
- animation-delay: 840ms;
1839
- }
1840
-
1841
- @keyframes cc-animacoes-cta-wobble {
1842
- 0%,
1843
- 82%,
1844
- 100% {
1845
- transform: rotate(0deg);
1846
- }
1847
- 84% {
1848
- transform: rotate(-2.6deg);
1849
- }
1850
- 86% {
1851
- transform: rotate(2.2deg);
1852
- }
1853
- 88% {
1854
- transform: rotate(-1.5deg);
1855
- }
1856
- 90% {
1857
- transform: rotate(1.1deg);
1858
- }
1859
- 92% {
1860
- transform: rotate(-0.6deg);
1861
- }
1862
- }
1863
-
1864
- @keyframes cc-animacoes-confetti {
1865
- 0%,
1866
- 100% {
1867
- opacity: 0.45;
1868
- transform: scale(0.7) rotate(0deg);
1869
- }
1870
- 35% {
1871
- opacity: 1;
1872
- transform: scale(1.06) rotate(-4deg);
1873
- }
1874
- 70% {
1875
- opacity: 0.68;
1876
- transform: scale(0.82) rotate(3deg);
1877
- }
1878
- }
1879
-
1880
- /* ===== HERO SECTION ===== */
1881
- #hero-section-one {
1882
- height: 500px;
1883
- }
1884
-
1885
- #hero-section-one .video-hero {
1886
- position: absolute;
1887
- right: 0;
1888
- top: 0;
1889
- border-top-right-radius: 60px;
1890
- border-bottom-right-radius: 60px;
1891
- height: 100%;
1892
- z-index: 1;
1893
- overflow: hidden;
1894
- }
1895
-
1896
- #hero-section-one .video-hero video {
1897
- border-top-right-radius: 60px;
1898
- border-bottom-right-radius: 60px;
1899
- height: 100%;
1900
- }
1901
-
1902
- #hero-section-one .video-hero::after {
1903
- content: '';
1904
- position: absolute;
1905
- top: 0;
1906
- left: 0px;
1907
- width: 120px;
1908
- height: 500px;
1909
- background: linear-gradient(90deg, #ffffff, #ffffff00);
1910
- }
1911
-
1912
- .row-column-content {
1913
- height: calc(100% - 4.5rem);
1914
- display: flex;
1915
- flex-direction: column;
1916
- align-items: flex-start;
1917
- max-width: 40%;
1918
- justify-content: center;
1919
- z-index: 2;
1920
- position: relative;
1921
- }
1922
-
1923
- .prev-link {
1924
- font-size: 1rem;
1925
- font-weight: 600;
1926
- color: #e91e63;
1927
- text-decoration: none;
1928
- cursor: pointer;
1929
- text-shadow: 0 1px 6px rgba(255, 255, 255, 0.89);
1930
- transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.3s ease;
1931
- }
1932
-
1933
- .orcamento-to-step .orcamento-steps-numeros {
1934
- max-width: 250px;
1935
- margin: 0 auto;
1936
- border: solid 1px #7c5bbb14;
1937
- padding: 5px 10px;
1938
- border-radius: 20px;
1939
- background: #7c5bbb14;
1940
- overflow: hidden;
1941
- }
1942
-
1943
- .orcamento-to-step .orcamento-steps-numeros-content {
1944
- background: #7c5bbb80;
1945
- width: 110%;
1946
- left: 50%;
1947
- transform: translate(-50%, 0px);
1948
- max-width: 255px;
1949
- }
1950
-
1951
- .login__brand {
1952
- margin-bottom: 0 !important;
1953
- }
1954
-
1955
- /* Animation duration utilities */
1956
- .animation-dr-1s { animation-duration: 1s; }
1957
- .animation-dr-2s { animation-duration: 2s; }
1958
- .animation-dr-3s { animation-duration: 3s; }
1959
- .animation-dr-4s { animation-duration: 4s; }
1960
- .animation-dr-5s { animation-duration: 5s; }
1961
- .animation-dr-6s { animation-duration: 6s; }
1962
- .animation-dr-7s { animation-duration: 7s; }
1963
- .animation-dr-8s { animation-duration: 8s; }
1964
- .animation-dr-9s { animation-duration: 9s; }
1965
- .animation-dr-10s { animation-duration: 10s; }
1966
-
1967
- /* ===== RESPONSIVE STYLES ===== */
1968
- @media (max-width: 1024px) {
1969
- .acabamento-footer::before {
1970
- height: 10px;
1971
- }
1972
- #hero-section-one {
1973
- height: 400px;
1974
- }
1975
- #hero-section-one .video-hero video {
1976
- max-width: 500px;
1977
- scale: 1.3;
1978
- }
1979
- .row-column-content {
1980
- max-width: 45%;
1981
- }
1982
- }
1983
-
1984
- @media (max-width: 768px) {
1985
- img.ElementoFlutuante2 {
1986
- display: none;
1987
- }
1988
- .cc-video-watch-btn {
1989
- width: 60px;
1990
- height: 60px;
1991
- padding: 6px;
1992
- }
1993
- .cc-video-watch-btn:hover {
1994
- width: 168px;
1995
- }
1996
- .cc-video-watch-btn__bg {
1997
- width: 46px;
1998
- height: 46px;
1999
- padding: 0 14px 0 13px;
2000
- }
2001
- .cc-video-watch-btn:hover .cc-video-watch-btn__bg {
2002
- width: 154px;
2003
- }
2004
- .cc-video-watch-btn__label {
2005
- font-size: 0.8125rem;
2006
- }
2007
- .row-column-content {
2008
- max-width: 100%;
2009
- padding-top: 300px;
2010
- }
2011
- #hero-section-one {
2012
- height: 100%;
2013
- }
2014
- #hero-section-one .video-hero {
2015
- right: unset;
2016
- top: 0;
2017
- left: 0;
2018
- max-height: 300px;
2019
- width: 100%;
2020
- border-top-right-radius: 60px;
2021
- border-top-left-radius: 60px;
2022
- border-bottom-right-radius: 0;
2023
- }
2024
- #hero-section-one .video-hero video {
2025
- width: 100%;
2026
- object-fit: cover;
2027
- scale: none;
2028
- max-width: 100%;
2029
- }
2030
- #hero-section-one .video-hero::after {
2031
- left: 0;
2032
- bottom: 0;
2033
- top: unset;
2034
- width: 100%;
2035
- height: 50px;
2036
- background: linear-gradient(360deg, #ffffff, #ffffff00);
2037
- }
2038
- }
2039
-
2040
- @media (max-width: 568px) {
2041
- .row-column-content {
2042
- padding-top: 200px;
2043
- }
2044
- #hero-section-one .video-hero {
2045
- max-height: 250px;
2046
- }
2047
- .glass-close-btn {
2048
- width: 20px;
2049
- height: 20px;
2050
- right: 3px;
2051
- top: 0px;
2052
- }
2053
- }
2054
- }
2055
-
2056
- @layer utilities {
2057
- .bg-\[\#7c5bbb\]\/30 {
2058
- background-color: #7c5bbb4d;
2059
- }
2060
-
2061
- .dark .bg-\[\#7c5bbb\]\/30 {
2062
- background-color: #3a2a5836;
2063
- backdrop-filter: blur(10px);
2064
- -webkit-backdrop-filter: blur(10px);
2065
- }
2066
-
2067
- /* Reduced motion */
2068
- @media (prefers-reduced-motion: reduce) {
2069
- *,
2070
- *::before,
2071
- *::after {
2072
- animation-duration: 0.01ms !important;
2073
- animation-iteration-count: 1 !important;
2074
- transition-duration: 0.01ms !important;
2075
- }
2076
- }
2077
- }
18
+ scrollbar-gutter: stable;
19
+ overflow-x: clip;
20
+ }
21
+
22
+ * {
23
+ scrollbar-width: thin;
24
+ scrollbar-color: var(--cc-scrollbar-thumb) var(--cc-scrollbar-track);
25
+ }
26
+
27
+ *::-webkit-scrollbar {
28
+ width: var(--cc-scrollbar-size);
29
+ height: var(--cc-scrollbar-size);
30
+ }
31
+
32
+ *::-webkit-scrollbar-track {
33
+ border-radius: var(--cc-scrollbar-radius);
34
+ background: var(--cc-scrollbar-track);
35
+ border: 1px solid var(--cc-scrollbar-thumb-border);
36
+ backdrop-filter: blur(14px);
37
+ -webkit-backdrop-filter: blur(14px);
38
+ }
39
+
40
+ *::-webkit-scrollbar-thumb {
41
+ border-radius: var(--cc-scrollbar-radius);
42
+ border: 1px solid var(--cc-scrollbar-thumb-border);
43
+ background: linear-gradient(180deg, var(--cc-scrollbar-thumb-highlight), var(--cc-scrollbar-thumb));
44
+ box-shadow: 0 10px 24px -14px var(--cc-scrollbar-glow);
45
+ backdrop-filter: blur(20px);
46
+ -webkit-backdrop-filter: blur(20px);
47
+ transition: background 160ms var(--ease-natural), box-shadow 160ms var(--ease-natural);
48
+ }
49
+
50
+ *::-webkit-scrollbar-thumb:hover {
51
+ background: linear-gradient(180deg, var(--cc-scrollbar-thumb-highlight), var(--cc-scrollbar-thumb-hover));
52
+ box-shadow: 0 12px 28px -14px var(--cc-scrollbar-glow);
53
+ }
54
+
55
+ *::-webkit-scrollbar-corner {
56
+ background: transparent;
57
+ }
58
+
59
+ h1, h2, h3, h4, h5, h6 {
60
+ font-family: var(--font-display);
61
+ font-weight: 700;
62
+ }
63
+
64
+ h1 { font-size: 2.25rem; line-height: 1.1; } /* 36px */
65
+ h2 { font-size: 1.875rem; line-height: 1.15; } /* 30px */
66
+ h3 { font-size: 1.5rem; line-height: 1.2; } /* 24px */
67
+ h4 { font-size: 1.25rem; line-height: 1.3; } /* 20px */
68
+ h5 { font-size: 1.125rem; line-height: 1.3; } /* 18px */
69
+ h6 { font-size: 1rem; line-height: 1.4; } /* 16px */
70
+
71
+ video {
72
+ appearance: none;
73
+ transform: translateZ(0);
74
+ filter: grayscale(0);
75
+ }
76
+ }
77
+
78
+ @layer components {
79
+ /* ===== LEGACY COLOR UTILITIES ===== */
80
+ .text-color-one { color: var(--color-one); }
81
+ .text-color-two { color: var(--color-two); }
82
+ .text-color-three { color: var(--color-three); }
83
+ .text-color-four { color: var(--color-four); }
84
+ .bg-color-one { background-color: var(--color-one); }
85
+ .bg-color-two { background-color: var(--color-two); }
86
+ .bg-color-three { background-color: var(--color-three); }
87
+ .bg-color-four { background-color: var(--color-four); }
88
+
89
+ /* ===== GLASS MORPHISM UTILITIES ===== */
90
+ .glass {
91
+ background: hsl(var(--glass-bg));
92
+ backdrop-filter: blur(var(--glass-blur-md));
93
+ -webkit-backdrop-filter: blur(var(--glass-blur-md));
94
+ border: 1px solid hsl(var(--glass-border));
95
+ position: relative;
96
+ }
97
+
98
+ .glass::before {
99
+ content: '';
100
+ position: absolute;
101
+ inset: 0;
102
+ border-radius: inherit;
103
+ padding: 1px;
104
+ background: linear-gradient(
105
+ 135deg,
106
+ var(--glass-highlight) 0%,
107
+ transparent 50%,
108
+ var(--glass-ambient) 100%
109
+ );
110
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
111
+ -webkit-mask-composite: xor;
112
+ mask-composite: exclude;
113
+ pointer-events: none;
114
+ }
115
+
116
+ .glass-subtle {
117
+ background: hsl(var(--card) / 0.72);
118
+ backdrop-filter: blur(var(--glass-blur-sm));
119
+ -webkit-backdrop-filter: blur(var(--glass-blur-sm));
120
+ border: 1px solid hsl(var(--border) / 0.55);
121
+ box-shadow:
122
+ 0 8px 24px hsl(var(--foreground) / 0.06),
123
+ inset 0 1px 0 hsl(var(--background) / 0.65);
124
+ }
125
+
126
+ .glass-strong {
127
+ background: hsl(var(--glass-bg-strong));
128
+ backdrop-filter: blur(var(--glass-blur-lg));
129
+ -webkit-backdrop-filter: blur(var(--glass-blur-lg));
130
+ border: 1px solid hsl(var(--glass-border));
131
+ }
132
+
133
+ .glass-inverse {
134
+ background: rgba(58, 42, 88, 0.2);
135
+ backdrop-filter: blur(var(--glass-blur-md));
136
+ -webkit-backdrop-filter: blur(var(--glass-blur-md));
137
+ border: 1px solid rgba(255, 255, 255, 0.1);
138
+ }
139
+
140
+ .glass-card {
141
+ background: linear-gradient(115deg, #7c5bbb75, #ffffff90, #ffffff70, #ffffff61, #975ab69e);
142
+ backdrop-filter: blur(15px);
143
+ border-radius: 25px;
144
+ box-shadow:
145
+ 0 8px 32px rgba(0, 0, 0, 0.1),
146
+ inset 0 1px 0 rgba(255, 255, 255, 0.5),
147
+ inset 0 -1px 0 rgba(255, 255, 255, 0.1),
148
+ inset 0 0 20px 10px rgba(255, 255, 255, 1);
149
+ position: relative;
150
+ }
151
+
152
+ .cc-scrollbar {
153
+ scrollbar-width: thin;
154
+ scrollbar-color: var(--cc-scrollbar-thumb) var(--cc-scrollbar-track);
155
+ }
156
+
157
+ .cc-scrollbar-purple {
158
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
159
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
160
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
161
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
162
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
163
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
164
+ }
165
+
166
+ .dark .cc-scrollbar-purple {
167
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
168
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
169
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
170
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
171
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
172
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
173
+ }
174
+
175
+ .cc-scrollbar-pink {
176
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
177
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
178
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
179
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
180
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
181
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
182
+ }
183
+
184
+ .dark .cc-scrollbar-pink {
185
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
186
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
187
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
188
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
189
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
190
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
191
+ }
192
+
193
+ .cc-scrollbar-theme-light {
194
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
195
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
196
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
197
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
198
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
199
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
200
+ }
201
+
202
+ .cc-scrollbar-theme-dark {
203
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
204
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
205
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
206
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
207
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
208
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
209
+ }
210
+
211
+ .cc-scrollbar-pink.cc-scrollbar-theme-light {
212
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
213
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
214
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
215
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
216
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
217
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
218
+ }
219
+
220
+ .cc-scrollbar-pink.cc-scrollbar-theme-dark {
221
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
222
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
223
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
224
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
225
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
226
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
227
+ }
228
+
229
+ .cc-scrollbar-hide {
230
+ scrollbar-width: none;
231
+ -ms-overflow-style: none;
232
+ }
233
+
234
+ .cc-scrollbar-hide::-webkit-scrollbar {
235
+ display: none;
236
+ }
237
+
238
+ /* ===== ELEVATION UTILITIES ===== */
239
+ .elevation-0 { box-shadow: var(--elevation-0); }
240
+ .elevation-1 { box-shadow: var(--elevation-1); }
241
+ .elevation-2 { box-shadow: var(--elevation-2); }
242
+ .elevation-3 { box-shadow: var(--elevation-3); }
243
+ .elevation-4 { box-shadow: var(--elevation-4); }
244
+ .elevation-5 { box-shadow: var(--elevation-5); }
245
+
246
+ /* ===== SERVICE CARDS ===== */
247
+ .service-card {
248
+ position: relative;
249
+ transition: all 0.3s ease;
250
+ border-radius: 1rem;
251
+ border: 1px solid #7c5bbb4d;
252
+ filter: grayscale(1);
253
+ transform: scale(1);
254
+ }
255
+
256
+ .service-card:hover {
257
+ filter: none;
258
+ background: linear-gradient(
259
+ to bottom right,
260
+ rgba(209, 179, 255, 0.4),
261
+ rgba(255, 255, 255, 0.4) 31.51%,
262
+ rgba(245, 228, 255, 0.45) 71.85%,
263
+ rgba(237, 211, 255, 0.9)
264
+ );
265
+ }
266
+
267
+ .service-card.active {
268
+ filter: none;
269
+ background: linear-gradient(
270
+ to bottom right,
271
+ rgba(209, 179, 255, 0.4),
272
+ rgba(255, 255, 255, 0.4) 31.51%,
273
+ rgba(245, 228, 255, 0.45) 71.85%,
274
+ rgba(237, 211, 255, 0.9)
275
+ );
276
+ }
277
+
278
+ .service-card.active:hover {
279
+ backdrop-filter: blur(15px);
280
+ background: linear-gradient(135deg, rgba(209, 179, 255, 0.6) 0%, rgba(237, 211, 255, 0.6) 100%);
281
+ transform: scale(1.05);
282
+ }
283
+
284
+ .service-card.active::before {
285
+ content: '';
286
+ position: absolute;
287
+ inset: 0;
288
+ border-radius: inherit;
289
+ box-shadow: 15px -18px 18px rgba(247, 21, 183, 0.17) inset;
290
+ pointer-events: none;
291
+ }
292
+
293
+ .service-card.active::after {
294
+ content: '';
295
+ position: absolute;
296
+ inset: 3px;
297
+ border-radius: inherit;
298
+ background: radial-gradient(
299
+ rgba(255, 255, 255, 0.4),
300
+ rgba(245, 228, 255, 0.38) 46.22%,
301
+ rgba(209, 179, 255, 0.4) 83.61%,
302
+ rgba(239, 192, 242, 1) 93.28%
303
+ );
304
+ filter: blur(7px);
305
+ z-index: -1;
306
+ transition: filter 0.3s ease;
307
+ }
308
+
309
+ /* ===== GLASS BUTTONS ===== */
310
+ .glass-next-btn {
311
+ position: relative;
312
+ display: inline-flex;
313
+ align-items: center;
314
+ justify-content: center;
315
+ padding: 8px 24px;
316
+ border-radius: 50px;
317
+ --btn-base-start: rgba(52, 152, 79, 0.67);
318
+ --btn-base-mid: rgba(158, 241, 188, 0.68);
319
+ --btn-base-end: rgba(171, 248, 181, 0.74);
320
+ --btn-base-finish: rgba(150, 255, 148, 0.57);
321
+ --btn-border-color: rgba(52, 152, 79, 0.13);
322
+ --btn-hover-strong: rgba(52, 152, 79, 0.85);
323
+ --btn-hover-soft: rgba(52, 152, 79, 0.2);
324
+ --btn-shadow-color: rgba(52, 152, 79, 0.6);
325
+ --btn-overlay-start: rgba(52, 152, 79, 0.5);
326
+ --btn-overlay-end: rgba(38, 160, 71, 0.65);
327
+ background: linear-gradient(
328
+ 297deg,
329
+ var(--btn-base-start) 0%,
330
+ var(--btn-base-mid) 31.51%,
331
+ var(--btn-base-end) 63.45%,
332
+ var(--btn-base-finish) 100%
333
+ );
334
+ border: 1px solid var(--btn-border-color);
335
+ backdrop-filter: blur(10px);
336
+ cursor: pointer;
337
+ overflow: visible;
338
+ transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
339
+ text-decoration: none;
340
+ }
341
+
342
+ .glass-next-btn:hover {
343
+ transform: scale(1.05);
344
+ background: linear-gradient(
345
+ 230deg,
346
+ var(--btn-hover-strong) 0%,
347
+ var(--btn-hover-soft) 40%,
348
+ rgba(255, 255, 255, 0.3) 100%
349
+ );
350
+ }
351
+
352
+ .glass-next-btn::before {
353
+ content: '';
354
+ position: absolute;
355
+ width: calc(100% + 1px);
356
+ height: calc(100% + 1px);
357
+ border-radius: 30px;
358
+ box-shadow: 5px 7px 8px var(--btn-shadow-color);
359
+ opacity: 0.6;
360
+ z-index: -2;
361
+ }
362
+
363
+ .glass-next-btn::after {
364
+ content: '';
365
+ position: absolute;
366
+ top: 2px;
367
+ left: 2px;
368
+ width: calc(100% - 4px);
369
+ height: calc(100% - 4px);
370
+ border-radius: 50px;
371
+ background: linear-gradient(118deg, var(--btn-overlay-start) 0%, var(--btn-overlay-end) 46.64%);
372
+ filter: blur(3px);
373
+ z-index: -1;
374
+ }
375
+
376
+ .glass-next-btn .text {
377
+ position: relative;
378
+ z-index: 1;
379
+ font-size: 1rem;
380
+ font-weight: 600;
381
+ color: #ffffff;
382
+ user-select: none;
383
+ transition: color 0.2s ease;
384
+ }
385
+
386
+ .glass-next-btn--color-one {
387
+ --btn-base-start: color-mix(in srgb, var(--color-one) 85%, transparent);
388
+ --btn-base-mid: color-mix(in srgb, var(--color-one) 65%, white);
389
+ --btn-base-end: color-mix(in srgb, var(--color-one) 75%, transparent);
390
+ --btn-base-finish: color-mix(in srgb, var(--color-one) 90%, black);
391
+ --btn-border-color: color-mix(in srgb, var(--color-one) 35%, transparent);
392
+ --btn-hover-strong: color-mix(in srgb, var(--color-one) 85%, white);
393
+ --btn-hover-soft: color-mix(in srgb, var(--color-one) 30%, transparent);
394
+ --btn-shadow-color: color-mix(in srgb, var(--color-one) 60%, transparent);
395
+ --btn-overlay-start: color-mix(in srgb, var(--color-one) 55%, transparent);
396
+ --btn-overlay-end: color-mix(in srgb, var(--color-one) 80%, black);
397
+ }
398
+
399
+ .glass-next-btn--destructive {
400
+ --btn-base-start: color-mix(in srgb, hsl(var(--destructive)) 85%, transparent);
401
+ --btn-base-mid: color-mix(in srgb, hsl(var(--destructive)) 65%, white);
402
+ --btn-base-end: color-mix(in srgb, hsl(var(--destructive)) 75%, transparent);
403
+ --btn-base-finish: color-mix(in srgb, hsl(var(--destructive)) 90%, black);
404
+ --btn-border-color: color-mix(in srgb, hsl(var(--destructive)) 35%, transparent);
405
+ --btn-hover-strong: color-mix(in srgb, hsl(var(--destructive)) 85%, white);
406
+ --btn-hover-soft: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
407
+ --btn-shadow-color: color-mix(in srgb, hsl(var(--destructive)) 60%, transparent);
408
+ --btn-overlay-start: color-mix(in srgb, hsl(var(--destructive)) 55%, transparent);
409
+ --btn-overlay-end: color-mix(in srgb, hsl(var(--destructive)) 80%, black);
410
+ }
411
+
412
+ .glass-close-btn {
413
+ position: absolute;
414
+ width: 30px;
415
+ height: 30px;
416
+ border-radius: 50%;
417
+ background: linear-gradient(230deg, rgba(230, 57, 70, 0.67), rgba(230, 57, 70, 0.12));
418
+ border: 1px solid rgba(245, 34, 34, 0.13);
419
+ backdrop-filter: blur(10px);
420
+ overflow: visible;
421
+ display: flex !important;
422
+ align-items: center;
423
+ justify-content: center;
424
+ transition: transform 0.2s ease, background 0.3s ease;
425
+ z-index: 10;
426
+ margin: 0 0 0 auto;
427
+ right: -10px;
428
+ top: -10px;
429
+ cursor: pointer;
430
+ }
431
+
432
+ .glass-close-btn::before,
433
+ .glass-close-btn::after {
434
+ transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
435
+ }
436
+
437
+ .glass-close-btn::before {
438
+ content: "";
439
+ position: absolute;
440
+ width: calc(100% + 1px);
441
+ height: calc(100% + 1px);
442
+ border-radius: 50%;
443
+ box-shadow: 4px 4px 13px rgba(230, 57, 70, 0.6);
444
+ transform: translate(0, 0);
445
+ z-index: -2;
446
+ }
447
+
448
+ .glass-close-btn::after {
449
+ content: "";
450
+ position: absolute;
451
+ top: 1px;
452
+ left: 1px;
453
+ width: calc(100% - 1px);
454
+ height: calc(100% - 1px);
455
+ border-radius: 50%;
456
+ background: linear-gradient(118deg, rgb(230, 57, 70) 30.25%, rgba(230, 57, 70, 0) 100%);
457
+ filter: blur(3px);
458
+ transform: translate(0, 0);
459
+ z-index: -1;
460
+ }
461
+
462
+ .glass-close-btn .icon-close-x {
463
+ position: relative;
464
+ z-index: 1;
465
+ font-size: 20px;
466
+ color: #FFFFFF;
467
+ user-select: none;
468
+ line-height: 1;
469
+ transition: color 0.2s ease;
470
+ font-weight: normal;
471
+ width: 30px;
472
+ height: 30px;
473
+ line-height: 27px;
474
+ }
475
+
476
+ .glass-close-btn:hover {
477
+ transform: scale(1.1);
478
+ background: linear-gradient(271deg, rgba(230, 57, 70, 0.59), rgba(230, 57, 70, 0.2) 50%);
479
+ }
480
+
481
+ .glass-close-btn:hover::before {
482
+ box-shadow: -5px -5px 29px rgba(230, 57, 70, 0.8);
483
+ opacity: 0.8;
484
+ }
485
+
486
+ .glass-close-btn:hover::after {
487
+ filter: blur(4px);
488
+ transform: translate(-1px, -1px);
489
+ opacity: 0.9;
490
+ }
491
+
492
+ .glass-close-btn:active {
493
+ transform: scale(0.95);
494
+ background: linear-gradient(230deg, rgba(230, 57, 70, 0.55) 0%, rgba(230, 57, 70, 0.1) 40%);
495
+ }
496
+
497
+ /* ===== SPACING UTILITIES ===== */
498
+ .space-1 { gap: var(--space-1); }
499
+ .space-2 { gap: var(--space-2); }
500
+ .space-3 { gap: var(--space-3); }
501
+ .space-4 { gap: var(--space-4); }
502
+ .space-5 { gap: var(--space-5); }
503
+ .space-6 { gap: var(--space-6); }
504
+ .space-8 { gap: var(--space-8); }
505
+ .space-10 { gap: var(--space-10); }
506
+ .space-12 { gap: var(--space-12); }
507
+ .space-16 { gap: var(--space-16); }
508
+
509
+ /* ===== LAYOUT PRIMITIVES (Cupcode Grid System) ===== */
510
+ .cc-container {
511
+ width: 100%;
512
+ max-width: 1280px;
513
+ margin-left: auto;
514
+ margin-right: auto;
515
+ padding-left: var(--space-4);
516
+ padding-right: var(--space-4);
517
+ }
518
+
519
+ .cc-container-narrow {
520
+ max-width: 960px;
521
+ }
522
+
523
+ .cc-container-wide {
524
+ max-width: 1440px;
525
+ }
526
+
527
+ .cc-stack {
528
+ display: flex;
529
+ flex-direction: column;
530
+ }
531
+
532
+ .cc-cluster {
533
+ display: flex;
534
+ flex-wrap: wrap;
535
+ gap: var(--space-4);
536
+ align-content: flex-end;
537
+ justify-content: space-around;
538
+ align-items: flex-end;
539
+ }
540
+
541
+ .cc-grid {
542
+ display: grid;
543
+ gap: var(--space-4);
544
+ }
545
+
546
+ .cc-grid-2 {
547
+ grid-template-columns: repeat(2, 1fr);
548
+ }
549
+
550
+ .cc-grid-3 {
551
+ grid-template-columns: repeat(3, 1fr);
552
+ }
553
+
554
+ .cc-grid-4 {
555
+ grid-template-columns: repeat(4, 1fr);
556
+ }
557
+
558
+ @media (max-width: 768px) {
559
+ .cc-grid-2,
560
+ .cc-grid-3,
561
+ .cc-grid-4 {
562
+ grid-template-columns: 1fr;
563
+ }
564
+ }
565
+
566
+ /* ===== STATE UTILITIES ===== */
567
+ .state-hover {
568
+ transition: opacity var(--motion-medium) var(--ease-smooth);
569
+ }
570
+
571
+ .state-hover:hover {
572
+ opacity: var(--opacity-hover);
573
+ background-color: var(--cc-hover-overlay);
574
+ }
575
+
576
+ .state-disabled {
577
+ opacity: var(--opacity-disabled);
578
+ pointer-events: none;
579
+ cursor: not-allowed;
580
+ }
581
+
582
+ .state-focus-visible:focus-visible {
583
+ outline: 2px solid hsl(var(--cc-purple));
584
+ outline-offset: 2px;
585
+ }
586
+
587
+ /* Gradient utilities */
588
+ .cc-gradient-galaxy {
589
+ background: var(--cc-gradient-galaxy);
590
+ }
591
+
592
+ .gradient-primary {
593
+ background: linear-gradient(135deg, hsl(281, 83%, 47.8%), hsl(331, 83%, 53.5%));
594
+ }
595
+
596
+ .cc-gradient-comet {
597
+ background: var(--cc-gradient-comet);
598
+ }
599
+
600
+ .cc-text-gradient-galaxy {
601
+ background: var(--cc-gradient-galaxy);
602
+ background-clip: text;
603
+ -webkit-background-clip: text;
604
+ color: transparent;
605
+ -webkit-text-fill-color: transparent;
606
+ }
607
+
608
+ /* Gradientes Animados */
609
+ .cc-gradient-animated {
610
+ background: var(--cc-gradient-animated-1);
611
+ background-size: 200% 200%;
612
+ animation: gradient-shift 3s ease infinite;
613
+ }
614
+
615
+ .cc-gradient-pulse {
616
+ background: var(--cc-gradient-animated-2);
617
+ background-size: 400% 400%;
618
+ animation: gradient-wave 5s ease infinite;
619
+ }
620
+
621
+ .cc-gradient-shimmer {
622
+ position: relative;
623
+ overflow: hidden;
624
+ }
625
+
626
+ .cc-gradient-shimmer::after {
627
+ content: '';
628
+ position: absolute;
629
+ top: 0;
630
+ left: -100%;
631
+ width: 100%;
632
+ height: 100%;
633
+ background: var(--cc-gradient-shimmer);
634
+ animation: shimmer 2s infinite;
635
+ }
636
+
637
+ @keyframes gradient-shift {
638
+ 0% { background-position: 0% 50%; }
639
+ 50% { background-position: 100% 50%; }
640
+ 100% { background-position: 0% 50%; }
641
+ }
642
+
643
+ @keyframes gradient-wave {
644
+ 0% { background-position: 0% 50%; }
645
+ 25% { background-position: 50% 100%; }
646
+ 50% { background-position: 100% 50%; }
647
+ 75% { background-position: 50% 0%; }
648
+ 100% { background-position: 0% 50%; }
649
+ }
650
+
651
+ @keyframes shimmer {
652
+ 0% { left: -100%; }
653
+ 100% { left: 100%; }
654
+ }
655
+
656
+ /* Eyebrow/Pill destaque (padrão homepage) */
657
+ .span-destaque {
658
+ display: inline-block;
659
+ background: hsl(var(--cc-purple));
660
+ color: white;
661
+ font-size: 0.75rem;
662
+ padding: 2px 5px;
663
+ border-radius: var(--radius-sm);
664
+ font-weight: 600;
665
+ text-transform: uppercase;
666
+ letter-spacing: 0.5px;
667
+ }
668
+
669
+ .color-one {
670
+ color: var(--color-one);
671
+ }
672
+
673
+ .color-four {
674
+ color: white;
675
+ }
676
+
677
+ /* === Jelly Animation === */
678
+ .force-jelly {
679
+ animation: jelly-bounce 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
680
+ }
681
+
682
+ @keyframes jelly-bounce {
683
+ 0% { transform: scale(1, 1); }
684
+ 5% { transform: scale(1.08, 0.92); }
685
+ 10% { transform: scale(0.92, 1.08); }
686
+ 15% { transform: scale(1.05, 0.95); }
687
+ 20% { transform: scale(0.95, 1.05); }
688
+ 25% { transform: scale(1.03, 0.97); }
689
+ 30% { transform: scale(0.97, 1.03); }
690
+ 35% { transform: scale(1.02, 0.98); }
691
+ 40% { transform: scale(0.98, 1.02); }
692
+ 45% { transform: scale(1.01, 0.99); }
693
+ 50% { transform: scale(0.99, 1.01); }
694
+ 55% { transform: scale(1.005, 0.995); }
695
+ 60% { transform: scale(0.995, 1.005); }
696
+ 100% { transform: scale(1, 1); }
697
+ }
698
+
699
+ /* ===== Blob CTA Button (Webflow button-1) ===== */
700
+ .cc-blob-cta {
701
+ --cc-blob-shell: linear-gradient(140deg, rgba(244, 255, 249, 0.72), rgba(226, 255, 240, 0.56));
702
+ --cc-blob-border: rgba(24, 183, 101, 0.34);
703
+ --cc-blob-shadow: 0 12px 26px -18px rgba(17, 78, 54, 0.32), 0 10px 24px -16px rgba(24, 183, 101, 0.36);
704
+ --cc-blob-shadow-hover: 0 16px 30px -18px rgba(17, 78, 54, 0.38), 0 12px 28px -16px rgba(24, 183, 101, 0.42);
705
+ --cc-blob-wrap-bg: rgba(224, 255, 241, 0.34);
706
+ --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.66), rgba(230, 255, 242, 0.52));
707
+ --cc-blob-bg-hover: linear-gradient(140deg, rgba(255, 255, 255, 0.72), rgba(208, 250, 227, 0.58));
708
+ --cc-blob-bg-active: linear-gradient(140deg, rgba(247, 255, 251, 0.58), rgba(191, 245, 217, 0.5));
709
+ --cc-blob-label: #114e36;
710
+ --cc-blob-glow-1: rgba(24, 183, 101, 0.28);
711
+ --cc-blob-glow-2: rgba(66, 255, 211, 0.2);
712
+ --cc-blob-glow-opacity-1: 0.34;
713
+ --cc-blob-glow-opacity-2: 0.24;
714
+ --cc-blob-color-opacity: 0.88;
715
+ --cc-blob-blur-md: var(--glass-blur-md, 16px);
716
+ --cc-blob-blur-sm: var(--glass-blur-sm, 10px);
717
+ --cc-blob-radius: 9999px;
718
+ --cc-blob-font: var(
719
+ --font-display,
720
+ "Tomorrow",
721
+ ui-sans-serif,
722
+ system-ui,
723
+ -apple-system,
724
+ "Segoe UI",
725
+ Roboto,
726
+ "Helvetica Neue",
727
+ Arial,
728
+ sans-serif
729
+ );
730
+ position: relative;
731
+ display: inline-flex;
732
+ align-items: center;
733
+ justify-content: center;
734
+ width: auto;
735
+ min-width: 0;
736
+ height: auto;
737
+ min-height: 0;
738
+ border: 0;
739
+ border-radius: var(--cc-blob-radius);
740
+ padding: 10px 15px;
741
+ cursor: pointer;
742
+ background: var(--cc-blob-shell);
743
+ color: var(--cc-blob-label);
744
+ border: 1px solid var(--cc-blob-border);
745
+ overflow: visible;
746
+ isolation: isolate;
747
+ box-shadow: var(--cc-blob-shadow);
748
+ backdrop-filter: blur(var(--cc-blob-blur-md)) saturate(145%);
749
+ -webkit-backdrop-filter: blur(var(--cc-blob-blur-md)) saturate(145%);
750
+ text-decoration: none;
751
+ transition: transform 200ms ease, box-shadow 300ms ease;
752
+ -webkit-tap-highlight-color: transparent;
753
+ }
754
+
755
+ .cc-blob-cta:focus {
756
+ outline: none;
757
+ }
758
+
759
+ .cc-blob-cta:focus-visible {
760
+ outline: 2px solid rgba(24, 183, 101, 0.45);
761
+ outline-offset: 2px;
762
+ }
763
+
764
+ .cc-blob-cta:hover {
765
+ box-shadow: var(--cc-blob-shadow-hover);
766
+ }
767
+
768
+ .cc-blob-cta:active {
769
+ transform: translateY(1px);
770
+ }
771
+
772
+ .cc-blob-cta:disabled {
773
+ cursor: not-allowed;
774
+ opacity: 0.6;
775
+ }
776
+
777
+ .cc-blob-cta--sm {
778
+ border-radius: var(--cc-blob-radius);
779
+ }
780
+
781
+ .cc-blob-cta--md {
782
+ border-radius: var(--cc-blob-radius);
783
+ }
784
+
785
+ .cc-blob-cta--lg {
786
+ border-radius: var(--cc-blob-radius);
787
+ }
788
+
789
+ .cc-blob-cta__color-wrap {
790
+ position: absolute;
791
+ inset: 0;
792
+ z-index: 0;
793
+ border-radius: var(--cc-blob-radius);
794
+ background-color: var(--cc-blob-wrap-bg);
795
+ border: 1px solid rgba(255, 255, 255, 0.65);
796
+ backdrop-filter: blur(var(--cc-blob-blur-sm)) saturate(120%);
797
+ -webkit-backdrop-filter: blur(var(--cc-blob-blur-sm)) saturate(120%);
798
+ overflow: hidden;
799
+ clip-path: inset(0 round var(--cc-blob-radius));
800
+ -webkit-mask-image: -webkit-radial-gradient(white, black);
801
+ pointer-events: none;
802
+ }
803
+
804
+ .cc-blob-cta__bg {
805
+ position: absolute;
806
+ z-index: 3;
807
+ top: 50%;
808
+ left: 50%;
809
+ width: 97%;
810
+ height: 95%;
811
+ border-radius: var(--cc-blob-radius);
812
+ background: var(--cc-blob-bg);
813
+ box-shadow:
814
+ inset 0 1px 0 rgba(255, 255, 255, 0.7),
815
+ 0 4px 14px -14px rgba(58, 42, 88, 0.45);
816
+ backdrop-filter: blur(var(--cc-blob-blur-sm));
817
+ -webkit-backdrop-filter: blur(var(--cc-blob-blur-sm));
818
+ clip-path: inset(0 round var(--cc-blob-radius));
819
+ transform: translate(-50%, -50%);
820
+ transition: all 0.3s ease-in-out;
821
+ }
822
+
823
+ .cc-blob-cta:hover .cc-blob-cta__bg {
824
+ -webkit-backdrop-filter: blur(6px);
825
+ backdrop-filter: blur(6px);
826
+ background: var(--cc-blob-bg-hover);
827
+ }
828
+
829
+ .cc-blob-cta:active .cc-blob-cta__bg {
830
+ background: var(--cc-blob-bg-active);
831
+ }
832
+
833
+ .cc-blob-cta__label {
834
+ position: relative;
835
+ z-index: 5;
836
+ display: inline-flex;
837
+ align-items: center;
838
+ justify-content: center;
839
+ color: var(--cc-blob-label);
840
+ font-family: var(--cc-blob-font);
841
+ font-size: 14px;
842
+ font-weight: 600;
843
+ line-height: 1;
844
+ letter-spacing: 0.01em;
845
+ text-align: center;
846
+ pointer-events: none;
847
+ white-space: nowrap;
848
+ }
849
+
850
+ .cc-blob-cta--lg .cc-blob-cta__label {
851
+ font-size: 15px;
852
+ }
853
+
854
+ .cc-blob-cta--sm .cc-blob-cta__label {
855
+ font-size: 13px;
856
+ }
857
+
858
+ .cc-blob-cta__color {
859
+ position: absolute;
860
+ z-index: 1;
861
+ width: 50px;
862
+ height: 50px;
863
+ border-radius: 50%;
864
+ filter: blur(16px);
865
+ mix-blend-mode: normal;
866
+ opacity: var(--cc-blob-color-opacity);
867
+ will-change: transform;
868
+ }
869
+
870
+ .cc-blob-cta__color--1 {
871
+ top: -30%;
872
+ left: -5%;
873
+ background-image: linear-gradient(112deg, #8dff4ed9, #18b765db);
874
+ }
875
+
876
+ .cc-blob-cta__color--2 {
877
+ top: -30%;
878
+ left: 29%;
879
+ background-image: linear-gradient(251deg, #42ffd3e0, #15d4ffe0);
880
+ }
881
+
882
+ .cc-blob-cta__color--3 {
883
+ top: -30%;
884
+ left: 8%;
885
+ background-image: linear-gradient(251deg, #7cff95d4, #15ff8fd9);
886
+ }
887
+
888
+ .cc-blob-cta:hover .cc-blob-cta__color--1,
889
+ .cc-blob-cta:focus-visible .cc-blob-cta__color--1 {
890
+ animation: cc-blob-cta-move-1 3.5s linear infinite;
891
+ }
892
+
893
+ .cc-blob-cta:hover .cc-blob-cta__color--2,
894
+ .cc-blob-cta:focus-visible .cc-blob-cta__color--2 {
895
+ animation: cc-blob-cta-move-2 3.5s linear infinite;
896
+ }
897
+
898
+ .cc-blob-cta:hover .cc-blob-cta__color--3,
899
+ .cc-blob-cta:focus-visible .cc-blob-cta__color--3 {
900
+ animation: cc-blob-cta-move-3 3.5s linear infinite;
901
+ }
902
+
903
+ .cc-blob-cta--secondary .cc-blob-cta__color--1 {
904
+ background-image: linear-gradient(112deg, #ff0f33d6, #ff6600db);
905
+ }
906
+
907
+ .cc-blob-cta--secondary .cc-blob-cta__color--2 {
908
+ background-image: linear-gradient(251deg, #07fc, #ad15ffe0);
909
+ }
910
+
911
+ .cc-blob-cta--secondary .cc-blob-cta__color--3 {
912
+ background-image: linear-gradient(251deg, #7300ffd6, #e815ffd9);
913
+ }
914
+
915
+ .cc-blob-cta--secondary {
916
+ --cc-blob-shell: linear-gradient(140deg, rgba(255, 255, 255, 0.64), rgba(248, 243, 255, 0.52));
917
+ --cc-blob-wrap-bg: rgba(255, 255, 255, 0.26);
918
+ --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.62), rgba(246, 238, 255, 0.5));
919
+ --cc-blob-bg-hover: linear-gradient(140deg, rgba(255, 255, 255, 0.7), rgba(238, 224, 252, 0.56));
920
+ --cc-blob-bg-active: linear-gradient(140deg, rgba(255, 255, 255, 0.56), rgba(228, 210, 248, 0.48));
921
+ --cc-blob-label: hsl(var(--cc-ink, 261 35% 25%));
922
+ --cc-blob-border: rgba(124, 91, 187, 0.26);
923
+ --cc-blob-shadow: 0 12px 26px -18px rgba(58, 42, 88, 0.45), 0 8px 20px -16px rgba(124, 91, 187, 0.5);
924
+ --cc-blob-shadow-hover: 0 16px 30px -18px rgba(58, 42, 88, 0.52), 0 10px 26px -16px rgba(124, 91, 187, 0.58);
925
+ --cc-blob-glow-1: rgba(151, 90, 182, 0.38);
926
+ --cc-blob-glow-2: rgba(237, 30, 121, 0.23);
927
+ }
928
+
929
+ .cc-blob-cta--half {
930
+ --cc-blob-wrap-bg: rgba(235, 227, 250, 0.35);
931
+ --cc-blob-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.66), rgba(236, 227, 252, 0.54));
932
+ --cc-blob-label: hsl(var(--cc-purple, 261 41% 55%));
933
+ --cc-blob-border: rgba(124, 91, 187, 0.34);
934
+ --cc-blob-glow-1: rgba(124, 91, 187, 0.34);
935
+ --cc-blob-glow-2: rgba(95, 110, 255, 0.22);
936
+ }
937
+
938
+ .cc-blob-cta__glow {
939
+ position: absolute;
940
+ border-radius: 50%;
941
+ pointer-events: none;
942
+ }
943
+
944
+ .cc-blob-cta__glow--1 {
945
+ z-index: -3;
946
+ width: 220px;
947
+ height: 140px;
948
+ top: 18%;
949
+ right: -42%;
950
+ background-color: var(--cc-blob-glow-1);
951
+ opacity: var(--cc-blob-glow-opacity-1);
952
+ filter: blur(52px);
953
+ }
954
+
955
+ .cc-blob-cta__glow--2 {
956
+ z-index: -2;
957
+ width: 250px;
958
+ height: 170px;
959
+ top: 30%;
960
+ right: 50%;
961
+ background-color: var(--cc-blob-glow-2);
962
+ opacity: var(--cc-blob-glow-opacity-2);
963
+ filter: blur(56px);
964
+ }
965
+
966
+ .dark .cc-blob-cta {
967
+ --cc-blob-shell: linear-gradient(140deg, rgba(7, 22, 15, 0.78), rgba(9, 37, 24, 0.62));
968
+ --cc-blob-border: rgba(24, 183, 101, 0.34);
969
+ --cc-blob-shadow: 0 0 15px rgba(16, 126, 74, 0.38);
970
+ --cc-blob-shadow-hover: 0 0 24px rgba(16, 126, 74, 0.5);
971
+ --cc-blob-wrap-bg: rgba(9, 37, 24, 0.42);
972
+ --cc-blob-bg: linear-gradient(
973
+ 140deg,
974
+ rgba(7, 22, 15, 0.76),
975
+ rgba(9, 37, 24, 0.6)
976
+ );
977
+ --cc-blob-bg-hover: linear-gradient(
978
+ 140deg,
979
+ rgba(9, 37, 24, 0.82),
980
+ rgba(11, 45, 29, 0.64)
981
+ );
982
+ --cc-blob-bg-active: linear-gradient(
983
+ 140deg,
984
+ rgba(8, 31, 21, 0.7),
985
+ rgba(8, 31, 21, 0.56)
986
+ );
987
+ --cc-blob-label: #ecfff6;
988
+ --cc-blob-glow-1: rgba(24, 183, 101, 0.3);
989
+ --cc-blob-glow-2: rgba(66, 255, 211, 0.18);
990
+ --cc-blob-glow-opacity-1: 0.35;
991
+ --cc-blob-glow-opacity-2: 0.22;
992
+ --cc-blob-color-opacity: 1;
993
+ }
994
+
995
+ .dark .cc-blob-cta__color-wrap {
996
+ border-color: transparent;
997
+ }
998
+
999
+ .dark .cc-blob-cta__bg {
1000
+ box-shadow: none;
1001
+ }
1002
+
1003
+ .dark .cc-blob-cta--secondary {
1004
+ --cc-blob-shell: linear-gradient(
1005
+ 140deg,
1006
+ hsl(var(--cc-ink, 261 35% 25%) / 0.62),
1007
+ hsl(var(--cc-ink, 261 35% 25%) / 0.48)
1008
+ );
1009
+ --cc-blob-border: rgba(124, 91, 187, 0.36);
1010
+ --cc-blob-shadow: 0 0 15px #3913b659;
1011
+ --cc-blob-shadow-hover: 0 0 22px rgba(57, 19, 182, 0.5);
1012
+ --cc-blob-wrap-bg: hsl(var(--cc-ink, 261 35% 25%) / 0.52);
1013
+ --cc-blob-bg: linear-gradient(140deg, hsl(var(--cc-ink, 261 35% 25%) / 0.78), hsl(var(--cc-ink, 261 35% 25%) / 0.62));
1014
+ --cc-blob-bg-hover: linear-gradient(140deg, hsl(var(--cc-ink, 261 35% 25%) / 0.86), hsl(var(--cc-ink, 261 35% 25%) / 0.68));
1015
+ --cc-blob-bg-active: linear-gradient(140deg, hsl(var(--cc-ink, 261 35% 25%) / 0.66), hsl(var(--cc-ink, 261 35% 25%) / 0.52));
1016
+ --cc-blob-label: #ffffff;
1017
+ --cc-blob-glow-1: hsl(var(--cc-ink, 261 35% 25%));
1018
+ --cc-blob-glow-2: rgba(124, 91, 187, 0.48);
1019
+ }
1020
+
1021
+ .dark .cc-blob-cta--half {
1022
+ --cc-blob-wrap-bg: hsl(var(--cc-ink, 261 35% 25%) / 0.48);
1023
+ --cc-blob-bg: linear-gradient(
1024
+ 140deg,
1025
+ hsl(var(--cc-ink, 261 35% 25%) / 0.74),
1026
+ rgba(16, 12, 35, 0.64)
1027
+ );
1028
+ --cc-blob-bg-hover: linear-gradient(
1029
+ 140deg,
1030
+ hsl(var(--cc-ink, 261 35% 25%) / 0.82),
1031
+ rgba(16, 12, 35, 0.7)
1032
+ );
1033
+ --cc-blob-bg-active: linear-gradient(
1034
+ 140deg,
1035
+ hsl(var(--cc-ink, 261 35% 25%) / 0.68),
1036
+ rgba(12, 8, 25, 0.62)
1037
+ );
1038
+ --cc-blob-label: #ece6ff;
1039
+ }
1040
+
1041
+ @keyframes cc-blob-cta-move-1 {
1042
+ 0% { transform: translate3d(0%, 0%, 0); }
1043
+ 16.67% { transform: translate3d(120%, 0%, 0); }
1044
+ 33.33% { transform: translate3d(230%, -20%, 0); }
1045
+ 50% { transform: translate3d(240%, 60%, 0); }
1046
+ 66.67% { transform: translate3d(80%, 80%, 0); }
1047
+ 83.33% { transform: translate3d(0%, 80%, 0); }
1048
+ 100% { transform: translate3d(0%, 0%, 0); }
1049
+ }
1050
+
1051
+ @keyframes cc-blob-cta-move-2 {
1052
+ 0% { transform: translate3d(0%, 0%, 0); }
1053
+ 16.67% { transform: translate3d(130%, 0%, 0); }
1054
+ 33.33% { transform: translate3d(170%, 30%, 0); }
1055
+ 50% { transform: translate3d(170%, 80%, 0); }
1056
+ 66.67% { transform: translate3d(0%, 100%, 0); }
1057
+ 83.33% { transform: translate3d(-80%, 40%, 0); }
1058
+ 100% { transform: translate3d(0%, 0%, 0); }
1059
+ }
1060
+
1061
+ @keyframes cc-blob-cta-move-3 {
1062
+ 0% { transform: translate3d(0%, 0%, 0); }
1063
+ 16.67% { transform: translate3d(120%, 0%, 0); }
1064
+ 33.33% { transform: translate3d(120%, 80%, 0); }
1065
+ 50% { transform: translate3d(-120%, 80%, 0); }
1066
+ 66.67% { transform: translate3d(-120%, 0%, 0); }
1067
+ 83.33% { transform: translate3d(-120%, 0%, 0); }
1068
+ 100% { transform: translate3d(0%, 0%, 0); }
1069
+ }
1070
+
1071
+ /* ===== FONT UTILITIES ===== */
1072
+ .font-cupcode {
1073
+ font-family: 'Tomorrow', sans-serif;
1074
+ }
1075
+
1076
+ /* ===== ANIMATED GRADIENT TEXT ===== */
1077
+ .gradient-text-animated {
1078
+ background-image: linear-gradient(-225deg, #9e9e9e 8%, #515151 29%, #5f5f5f 67%, #9e9e9e 90%);
1079
+ background-size: 200% auto;
1080
+ background-clip: text;
1081
+ -webkit-background-clip: text;
1082
+ color: #fff;
1083
+ -webkit-text-fill-color: transparent;
1084
+ text-fill-color: transparent;
1085
+ animation: textclip 10s linear infinite;
1086
+ display: inline-block;
1087
+ }
1088
+
1089
+ @keyframes textclip {
1090
+ to {
1091
+ background-position: 200% center;
1092
+ }
1093
+ }
1094
+
1095
+ /* ===== SWIPER STYLES ===== */
1096
+ .swiper-button-next,
1097
+ .swiper-button-prev {
1098
+ position: absolute;
1099
+ top: 0;
1100
+ height: 100% !important;
1101
+ margin-top: 0px !important;
1102
+ background: linear-gradient(
1103
+ var(--edge-deg),
1104
+ rgb(255 255 255 / 0%) 0%,
1105
+ rgba(255, 255, 255, 1) 60%
1106
+ );
1107
+ }
1108
+
1109
+ .swiper-button-next.bg-none,
1110
+ .swiper-button-prev.bg-none {
1111
+ background: none;
1112
+ }
1113
+
1114
+ .swiper-button-prev.swiper-button-disabled,
1115
+ .swiper-button-next.swiper-button-disabled {
1116
+ display: none;
1117
+ }
1118
+
1119
+ .swiper-wrapper {
1120
+ height: auto !important;
1121
+ }
1122
+
1123
+ .swiper-slide {
1124
+ height: auto;
1125
+ max-width: 100%;
1126
+ }
1127
+
1128
+ .swiper-button-next::after,
1129
+ .swiper-button-prev::after {
1130
+ background: linear-gradient(45deg, #d26099, #e6dad9);
1131
+ backdrop-filter: blur(16px) saturate(180%);
1132
+ border-radius: 100%;
1133
+ min-height: 30px;
1134
+ min-width: 30px;
1135
+ font-size: 15px !important;
1136
+ font-weight: 900;
1137
+ display: flex;
1138
+ justify-content: center;
1139
+ align-items: center;
1140
+ position: relative;
1141
+ color: #e6dad9;
1142
+ }
1143
+
1144
+ .swiper-button-next {
1145
+ right: 0 !important;
1146
+ --edge-deg: 90deg;
1147
+ }
1148
+
1149
+ .swiper-button-prev {
1150
+ left: 0 !important;
1151
+ --edge-deg: 270deg;
1152
+ }
1153
+
1154
+ .swiper-button-next::after {
1155
+ right: 2px;
1156
+ }
1157
+
1158
+ .swiper-button-prev::after {
1159
+ left: 2px;
1160
+ }
1161
+
1162
+ /* ===== VIDEO WATCH BUTTON ===== */
1163
+ .cc-video-watch-btn {
1164
+ position: relative;
1165
+ display: inline-flex;
1166
+ align-items: center;
1167
+ justify-content: flex-start;
1168
+ width: 64px;
1169
+ height: 64px;
1170
+ padding: 7px;
1171
+ border: 1px solid rgba(159, 160, 255, 0.3);
1172
+ border-radius: 9999px;
1173
+ background: rgba(255, 255, 255, 0.08);
1174
+ color: rgba(248, 244, 255, 0.96);
1175
+ text-decoration: none;
1176
+ cursor: pointer;
1177
+ overflow: visible;
1178
+ isolation: isolate;
1179
+ transform: translateZ(0);
1180
+ -webkit-tap-highlight-color: transparent;
1181
+ box-shadow:
1182
+ inset 0 1px 0 rgba(255, 255, 255, 0.45),
1183
+ 0 14px 34px -22px rgba(0, 0, 0, 0.8);
1184
+ transition:
1185
+ width 520ms cubic-bezier(0.22, 1, 0.36, 1),
1186
+ border-color 220ms ease,
1187
+ background-color 220ms ease,
1188
+ box-shadow 220ms ease;
1189
+ }
1190
+
1191
+ .cc-video-watch-btn:focus {
1192
+ outline: none;
1193
+ }
1194
+
1195
+ .cc-video-watch-btn:hover {
1196
+ width: 180px;
1197
+ border-color: rgba(208, 154, 255, 0.5);
1198
+ background: rgba(255, 255, 255, 0.13);
1199
+ box-shadow:
1200
+ inset 0 1px 0 rgba(255, 255, 255, 0.55),
1201
+ 0 18px 38px -20px rgba(151, 90, 182, 0.62);
1202
+ }
1203
+
1204
+ .cc-video-watch-btn:focus-visible {
1205
+ outline: 2px solid rgba(237, 30, 121, 0.45);
1206
+ outline-offset: 2px;
1207
+ }
1208
+
1209
+ .cc-video-watch-btn:active {
1210
+ transform: translateY(1px);
1211
+ }
1212
+
1213
+ .cc-video-watch-btn__bg {
1214
+ position: relative;
1215
+ z-index: 2;
1216
+ display: inline-flex;
1217
+ align-items: center;
1218
+ gap: 10px;
1219
+ width: 48px;
1220
+ height: 48px;
1221
+ padding: 0 16px 0 14px;
1222
+ border: 1px solid rgba(255, 255, 255, 0.28);
1223
+ border-radius: 9999px;
1224
+ overflow: hidden;
1225
+ backdrop-filter: blur(14px) saturate(130%);
1226
+ -webkit-backdrop-filter: blur(14px) saturate(130%);
1227
+ background:
1228
+ radial-gradient(120% 140% at 84% 18%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.06) 100%),
1229
+ linear-gradient(120deg, rgba(151, 90, 182, 0.2), rgba(124, 91, 187, 0.16));
1230
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
1231
+ transition:
1232
+ width 520ms cubic-bezier(0.22, 1, 0.36, 1),
1233
+ border-color 220ms ease,
1234
+ box-shadow 220ms ease;
1235
+ }
1236
+
1237
+ .cc-video-watch-btn:hover .cc-video-watch-btn__bg {
1238
+ width: 164px;
1239
+ border-color: rgba(255, 255, 255, 0.38);
1240
+ box-shadow:
1241
+ inset 0 1px 0 rgba(255, 255, 255, 0.52),
1242
+ 0 6px 18px -16px rgba(151, 90, 182, 0.78);
1243
+ }
1244
+
1245
+ .cc-video-watch-btn__icon {
1246
+ position: relative;
1247
+ z-index: 2;
1248
+ display: inline-flex;
1249
+ align-items: center;
1250
+ justify-content: center;
1251
+ flex-shrink: 0;
1252
+ transform: translateX(2px);
1253
+ color: hsl(var(--cc-pink));
1254
+ filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.32));
1255
+ transition: transform 320ms ease;
1256
+ }
1257
+
1258
+ .cc-video-watch-btn:hover .cc-video-watch-btn__icon {
1259
+ transform: translateX(0);
1260
+ }
1261
+
1262
+ .cc-video-watch-btn__label {
1263
+ position: relative;
1264
+ z-index: 2;
1265
+ display: inline-block;
1266
+ max-width: 0;
1267
+ overflow: hidden;
1268
+ white-space: nowrap;
1269
+ opacity: 0;
1270
+ transform: translateX(10px);
1271
+ font-family: var(--font-display);
1272
+ font-size: 0.875rem;
1273
+ font-weight: 600;
1274
+ line-height: 1;
1275
+ letter-spacing: 0.01em;
1276
+ color: hsl(var(--cc-pink));
1277
+ transition:
1278
+ max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
1279
+ opacity 320ms ease,
1280
+ transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
1281
+ }
1282
+
1283
+ .cc-video-watch-btn:hover .cc-video-watch-btn__label {
1284
+ max-width: 96px;
1285
+ opacity: 1;
1286
+ transform: translateX(0);
1287
+ color: hsl(var(--cc-purple));
1288
+ }
1289
+
1290
+ .cc-video-watch-btn__mask {
1291
+ position: absolute;
1292
+ inset: 0;
1293
+ z-index: 1;
1294
+ border-radius: inherit;
1295
+ overflow: hidden;
1296
+ opacity: 0.86;
1297
+ pointer-events: none;
1298
+ }
1299
+
1300
+ .cc-video-watch-btn__blob {
1301
+ position: absolute;
1302
+ width: 88px;
1303
+ height: 88px;
1304
+ border-radius: 50%;
1305
+ will-change: transform;
1306
+ filter: blur(10px) saturate(125%);
1307
+ opacity: 0.94;
1308
+ mix-blend-mode: screen;
1309
+ animation: none;
1310
+ transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
1311
+ }
1312
+
1313
+ .cc-video-watch-btn__blob--1 {
1314
+ top: -30px;
1315
+ left: -34px;
1316
+ background: radial-gradient(
1317
+ circle at 36% 34%,
1318
+ rgba(159, 160, 255, 0.52) 0%,
1319
+ rgba(124, 91, 187, 0.34) 34%,
1320
+ rgba(124, 91, 187, 0.16) 56%,
1321
+ rgba(124, 91, 187, 0.05) 72%,
1322
+ rgba(124, 91, 187, 0) 100%
1323
+ );
1324
+ }
1325
+
1326
+ .cc-video-watch-btn__blob--2 {
1327
+ top: 2px;
1328
+ left: 6px;
1329
+ background: radial-gradient(
1330
+ circle at 34% 34%,
1331
+ rgba(249, 104, 173, 0.5) 0%,
1332
+ rgba(237, 30, 121, 0.34) 34%,
1333
+ rgba(237, 30, 121, 0.16) 56%,
1334
+ rgba(237, 30, 121, 0.05) 72%,
1335
+ rgba(237, 30, 121, 0) 100%
1336
+ );
1337
+ }
1338
+
1339
+ .cc-video-watch-btn__blob--3 {
1340
+ top: -34px;
1341
+ left: 24px;
1342
+ background: radial-gradient(
1343
+ circle at 34% 34%,
1344
+ rgba(111, 248, 222, 0.48) 0%,
1345
+ rgba(89, 200, 255, 0.32) 34%,
1346
+ rgba(89, 200, 255, 0.14) 56%,
1347
+ rgba(89, 200, 255, 0.04) 72%,
1348
+ rgba(89, 200, 255, 0) 100%
1349
+ );
1350
+ }
1351
+
1352
+ .cc-video-watch-btn__blob--4 {
1353
+ top: -2px;
1354
+ left: 54px;
1355
+ background: radial-gradient(
1356
+ circle at 34% 34%,
1357
+ rgba(255, 197, 115, 0.5) 0%,
1358
+ rgba(255, 142, 161, 0.32) 34%,
1359
+ rgba(255, 142, 161, 0.15) 56%,
1360
+ rgba(255, 142, 161, 0.04) 72%,
1361
+ rgba(255, 142, 161, 0) 100%
1362
+ );
1363
+ }
1364
+
1365
+ .cc-video-watch-btn__blob--5 {
1366
+ top: -26px;
1367
+ left: 86px;
1368
+ background: radial-gradient(
1369
+ circle at 34% 34%,
1370
+ rgba(95, 110, 255, 0.5) 0%,
1371
+ rgba(151, 90, 182, 0.34) 34%,
1372
+ rgba(151, 90, 182, 0.16) 56%,
1373
+ rgba(151, 90, 182, 0.05) 72%,
1374
+ rgba(151, 90, 182, 0) 100%
1375
+ );
1376
+ }
1377
+
1378
+ .cc-video-watch-btn:hover .cc-video-watch-btn__blob--1 {
1379
+ animation: cc-video-watch-blob-1 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
1380
+ }
1381
+
1382
+ .cc-video-watch-btn:hover .cc-video-watch-btn__blob--2 {
1383
+ animation: cc-video-watch-blob-2 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
1384
+ }
1385
+
1386
+ .cc-video-watch-btn:hover .cc-video-watch-btn__blob--3 {
1387
+ animation: cc-video-watch-blob-3 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
1388
+ }
1389
+
1390
+ .cc-video-watch-btn:hover .cc-video-watch-btn__blob--4 {
1391
+ animation: cc-video-watch-blob-4 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
1392
+ }
1393
+
1394
+ .cc-video-watch-btn:hover .cc-video-watch-btn__blob--5 {
1395
+ animation: cc-video-watch-blob-5 10.2s cubic-bezier(0.42, 0, 0.58, 1) infinite both;
1396
+ }
1397
+
1398
+ .cc-video-watch-btn__glow {
1399
+ position: absolute;
1400
+ inset: 8px;
1401
+ z-index: 0;
1402
+ border-radius: 9999px;
1403
+ pointer-events: none;
1404
+ background: radial-gradient(80% 120% at 50% 85%, rgba(151, 90, 182, 0.52), rgba(151, 90, 182, 0));
1405
+ filter: blur(16px);
1406
+ opacity: 0.28;
1407
+ transition: opacity 320ms ease;
1408
+ }
1409
+
1410
+ .cc-video-watch-btn:hover .cc-video-watch-btn__glow {
1411
+ opacity: 0.72;
1412
+ }
1413
+
1414
+ .dark .cc-video-watch-btn {
1415
+ border-color: rgba(159, 160, 255, 0.38);
1416
+ background: rgba(255, 255, 255, 0.11);
1417
+ }
1418
+
1419
+ .dark .cc-video-watch-btn__bg {
1420
+ border-color: rgba(255, 255, 255, 0.32);
1421
+ }
1422
+
1423
+ .dark .cc-video-watch-btn:hover .cc-video-watch-btn__label {
1424
+ color: hsl(var(--cc-pink));
1425
+ }
1426
+
1427
+ @keyframes cc-video-watch-blob-1 {
1428
+ 0%, 18% {
1429
+ transform: translate3d(0, 0, 0);
1430
+ }
1431
+ 44% {
1432
+ transform: translate3d(130px, 68px, 0);
1433
+ }
1434
+ 72% {
1435
+ transform: translate3d(160px, -70px, 0);
1436
+ }
1437
+ 88% {
1438
+ transform: translate3d(24px, -12px, 0);
1439
+ }
1440
+ 100% {
1441
+ transform: translate3d(0, 0, 0);
1442
+ }
1443
+ }
1444
+
1445
+ @keyframes cc-video-watch-blob-2 {
1446
+ 0%, 18% {
1447
+ transform: translate3d(0, 0, 0);
1448
+ }
1449
+ 44% {
1450
+ transform: translate3d(-140px, -53px, 0);
1451
+ }
1452
+ 72% {
1453
+ transform: translate3d(-260px, 40px, 0);
1454
+ }
1455
+ 88% {
1456
+ transform: translate3d(-18px, 6px, 0);
1457
+ }
1458
+ 100% {
1459
+ transform: translate3d(0, 0, 0);
1460
+ }
1461
+ }
1462
+
1463
+ @keyframes cc-video-watch-blob-3 {
1464
+ 0%, 18% {
1465
+ transform: translate3d(0, 0, 0);
1466
+ }
1467
+ 44% {
1468
+ transform: translate3d(100px, -73px, 0);
1469
+ }
1470
+ 72% {
1471
+ transform: translate3d(100px, 0, 0);
1472
+ }
1473
+ 88% {
1474
+ transform: translate3d(18px, -10px, 0);
1475
+ }
1476
+ 100% {
1477
+ transform: translate3d(0, 0, 0);
1478
+ }
1479
+ }
1480
+
1481
+ @keyframes cc-video-watch-blob-4 {
1482
+ 0%, 18% {
1483
+ transform: translate3d(0, 0, 0);
1484
+ }
1485
+ 44% {
1486
+ transform: translate3d(-140px, -48px, 0);
1487
+ }
1488
+ 72% {
1489
+ transform: translate3d(20px, 80px, 0);
1490
+ }
1491
+ 88% {
1492
+ transform: translate3d(6px, 16px, 0);
1493
+ }
1494
+ 100% {
1495
+ transform: translate3d(0, 0, 0);
1496
+ }
1497
+ }
1498
+
1499
+ @keyframes cc-video-watch-blob-5 {
1500
+ 0%, 18% {
1501
+ transform: translate3d(0, 0, 0);
1502
+ }
1503
+ 44% {
1504
+ transform: translate3d(180px, 10px, 0);
1505
+ }
1506
+ 72% {
1507
+ transform: translate3d(80px, -80px, 0);
1508
+ }
1509
+ 88% {
1510
+ transform: translate3d(12px, -14px, 0);
1511
+ }
1512
+ 100% {
1513
+ transform: translate3d(0, 0, 0);
1514
+ }
1515
+ }
1516
+
1517
+ :root {
1518
+ --theme-x: 50%;
1519
+ --theme-y: 50%;
1520
+ }
1521
+
1522
+ ::view-transition-old(root),
1523
+ ::view-transition-new(root) {
1524
+ animation: none;
1525
+ mix-blend-mode: normal;
1526
+ }
1527
+
1528
+ ::view-transition-old(root) {
1529
+ z-index: 0;
1530
+ }
1531
+
1532
+ ::view-transition-new(root) {
1533
+ z-index: 1;
1534
+ }
1535
+
1536
+ @keyframes theme-reveal {
1537
+ from {
1538
+ clip-path: circle(0% at var(--theme-x) var(--theme-y));
1539
+ opacity: 0.7;
1540
+ }
1541
+
1542
+ to {
1543
+ clip-path: circle(150% at var(--theme-x) var(--theme-y));
1544
+ opacity: 1;
1545
+ }
1546
+ }
1547
+
1548
+ ::view-transition-new(root) {
1549
+ animation: theme-reveal 0.4s ease-in-out forwards;
1550
+ }
1551
+
1552
+ /* ===== MARQUEE ANIMATIONS ===== */
1553
+ @keyframes slide-left {
1554
+ to {
1555
+ transform: translate3d(calc(-1 * var(--dist)), 0, 0);
1556
+ }
1557
+ }
1558
+
1559
+ @keyframes slide-right {
1560
+ to {
1561
+ transform: translate3d(0, 0, 0);
1562
+ }
1563
+ }
1564
+
1565
+ .marquee-left {
1566
+ animation: slide-left var(--dur) linear infinite;
1567
+ will-change: transform;
1568
+ }
1569
+
1570
+ .marquee-right {
1571
+ animation: slide-right var(--dur) linear infinite;
1572
+ will-change: transform;
1573
+ }
1574
+
1575
+ .pausing:hover .marquee-left,
1576
+ .pausing:hover .marquee-right {
1577
+ animation-play-state: paused !important;
1578
+ }
1579
+
1580
+ /* ===== DIALOG STYLES ===== */
1581
+ [data-slot="dialog-overlay"] {
1582
+ background: rgba(255, 255, 255, 0.3);
1583
+ backdrop-filter: blur(10px);
1584
+ }
1585
+
1586
+ .dialog-overlay {
1587
+ overflow: visible;
1588
+ }
1589
+
1590
+ .dialog-content {
1591
+ max-height: 90vh;
1592
+ overflow-y: auto;
1593
+ scrollbar-width: none;
1594
+ }
1595
+
1596
+ .dialog-content::-webkit-scrollbar {
1597
+ display: none;
1598
+ }
1599
+
1600
+ .dialog-video-player {
1601
+ width: 100%;
1602
+ max-width: 95vw;
1603
+ }
1604
+
1605
+ .dialog-video-player .video-player {
1606
+ max-height: 80vh;
1607
+ width: 100%;
1608
+ max-width: 100%;
1609
+ height: auto;
1610
+ object-fit: contain;
1611
+ outline: none;
1612
+ display: block;
1613
+ }
1614
+
1615
+ .dialog-video-player.horizontal {
1616
+ max-width: 95vw;
1617
+ }
1618
+
1619
+ .dialog-video-player.horizontal .video-player {
1620
+ max-height: 95vh;
1621
+ width: 100%;
1622
+ }
1623
+
1624
+ .dialog-video-player button[data-slot='dialog-close'] {
1625
+ background: #975ab6;
1626
+ padding: 5px;
1627
+ border-radius: 100%;
1628
+ opacity: 1;
1629
+ color: white;
1630
+ box-shadow: none;
1631
+ cursor: pointer;
1632
+ }
1633
+
1634
+ .popup-de-orcamento {
1635
+ display: block;
1636
+ top: 0;
1637
+ width: 100% !important;
1638
+ max-width: 100% !important;
1639
+ overflow-x: hidden;
1640
+ padding: 0;
1641
+ padding-top: 20px;
1642
+ padding-bottom: 20px;
1643
+ height: 100%;
1644
+ max-height: 100%;
1645
+ }
1646
+
1647
+ .popup-de-orcamento button[data-slot="dialog-close"] {
1648
+ display: none;
1649
+ }
1650
+
1651
+ /* ===== MISC UTILITIES ===== */
1652
+ img.logo-footer {
1653
+ margin-bottom: -50px;
1654
+ margin-left: -18px;
1655
+ margin-top: -45px;
1656
+ }
1657
+
1658
+ .acabamento-footer::before {
1659
+ content: '';
1660
+ position: absolute;
1661
+ width: 100%;
1662
+ height: 80px;
1663
+ background: linear-gradient(0deg, #ffffff80, transparent);
1664
+ z-index: 1;
1665
+ bottom: 0;
1666
+ left: 0;
1667
+ }
1668
+
1669
+ .animation-grow {
1670
+ transition: all 0.3s linear;
1671
+ }
1672
+
1673
+ .animation-grow:hover {
1674
+ box-shadow: rgb(181 96 246) 0px 5px 15px;
1675
+ scale: 1.03;
1676
+ transform: none;
1677
+ }
1678
+
1679
+ img.astrounauta-animado {
1680
+ transform-origin: top center;
1681
+ animation: balancoAstronauta 2.5s ease-in-out infinite alternate;
1682
+ }
1683
+
1684
+ @keyframes balancoAstronauta {
1685
+ 0% {
1686
+ transform: rotate(-10deg);
1687
+ }
1688
+ 100% {
1689
+ transform: rotate(10deg);
1690
+ }
1691
+ }
1692
+
1693
+ @keyframes rotateTrofeu {
1694
+ 0% { rotate: 0deg; }
1695
+ 25% { rotate: 10deg; }
1696
+ 50% { rotate: 0deg; }
1697
+ 75% { rotate: -10deg; }
1698
+ 100% { rotate: 0deg; }
1699
+ }
1700
+
1701
+ .rotateTrofeu {
1702
+ animation: rotateTrofeu 4s cubic-bezier(0.63, 0.3, 0.24, 0.36) infinite;
1703
+ }
1704
+
1705
+ @keyframes MoveNuvem {
1706
+ 0% { transform: translateX(0px); }
1707
+ 50% { transform: translateX(-20px); }
1708
+ 100% { transform: translateY(0px); }
1709
+ }
1710
+
1711
+ .move-nuvem {
1712
+ animation: MoveNuvem infinite;
1713
+ }
1714
+
1715
+ @keyframes pulseScale {
1716
+ 0% { transform: scale(1); }
1717
+ 50% { transform: scale(1.1); }
1718
+ 100% { transform: scale(1); }
1719
+ }
1720
+
1721
+ .pulseScale {
1722
+ animation: pulseScale 5s infinite;
1723
+ }
1724
+
1725
+ @keyframes floatA {
1726
+ 0% { transform: translateY(0); }
1727
+ 50% { transform: translateY(-10px); }
1728
+ 100% { transform: translateY(0); }
1729
+ }
1730
+
1731
+ @keyframes floatB {
1732
+ 0% { transform: translateY(0) rotate(-1deg); }
1733
+ 50% { transform: translateY(8px) rotate(1deg); }
1734
+ 100% { transform: translateY(0) rotate(-1deg); }
1735
+ }
1736
+
1737
+ @keyframes floatC {
1738
+ 0% { transform: translateY(0) rotate(-4deg); }
1739
+ 50% { transform: translateY(8px) rotate(4deg); }
1740
+ 100% { transform: translateY(0) rotate(-4deg); }
1741
+ }
1742
+
1743
+ .animate-float-slow {
1744
+ animation: floatA 6s ease-in-out infinite;
1745
+ }
1746
+
1747
+ .animate-float-fast {
1748
+ animation: floatB 4.8s ease-in-out infinite;
1749
+ }
1750
+
1751
+ .animate-float-and-rotate-fast {
1752
+ animation: floatC 4.8s ease-in-out infinite;
1753
+ }
1754
+
1755
+ .cc-animacoes-cta-wrap {
1756
+ position: relative;
1757
+ display: inline-flex;
1758
+ }
1759
+
1760
+ .cc-animacoes-cta-btn {
1761
+ transform-origin: 50% 56%;
1762
+ will-change: transform;
1763
+ }
1764
+
1765
+ .cc-animacoes-cta-badge-wrap {
1766
+ position: absolute;
1767
+ right: -9px;
1768
+ top: -12px;
1769
+ z-index: 12;
1770
+ pointer-events: none;
1771
+ }
1772
+
1773
+ .cc-animacoes-cta-badge {
1774
+ position: relative;
1775
+ z-index: 2;
1776
+ display: inline-flex;
1777
+ align-items: center;
1778
+ justify-content: center;
1779
+ border-radius: 999px;
1780
+ border: 1px solid rgba(255, 255, 255, 0.8);
1781
+ background: linear-gradient(130deg, #f9247c, #ff8b3d);
1782
+ color: #fff;
1783
+ font-size: 10px;
1784
+ font-weight: 700;
1785
+ line-height: 1;
1786
+ letter-spacing: 0.04em;
1787
+ text-transform: uppercase;
1788
+ padding: 4px 7px;
1789
+ box-shadow: 0 8px 20px -10px rgba(249, 36, 124, 0.7);
1790
+ transform-origin: 62% 72%;
1791
+ animation: cc-animacoes-cta-wobble 2.6s ease-in-out infinite;
1792
+ will-change: transform;
1793
+ }
1794
+
1795
+ .cc-animacoes-cta-confetti {
1796
+ position: absolute;
1797
+ left: 50%;
1798
+ top: 50%;
1799
+ transform: translate(-50%, -50%);
1800
+ width: 78px;
1801
+ height: 52px;
1802
+ z-index: 1;
1803
+ pointer-events: none;
1804
+ overflow: visible;
1805
+ }
1806
+
1807
+ .cc-animacoes-cta-confetti line {
1808
+ stroke: rgba(255, 246, 245, 0.96);
1809
+ stroke-width: 1.8;
1810
+ stroke-linecap: round;
1811
+ transform-origin: 39px 26px;
1812
+ animation: cc-animacoes-confetti 1.35s ease-in-out infinite;
1813
+ }
1814
+
1815
+ .cc-animacoes-cta-confetti line:nth-child(2) {
1816
+ animation-delay: 120ms;
1817
+ }
1818
+
1819
+ .cc-animacoes-cta-confetti line:nth-child(3) {
1820
+ animation-delay: 240ms;
1821
+ }
1822
+
1823
+ .cc-animacoes-cta-confetti line:nth-child(4) {
1824
+ animation-delay: 360ms;
1825
+ }
1826
+
1827
+ .cc-animacoes-cta-confetti line:nth-child(5) {
1828
+ animation-delay: 480ms;
1829
+ }
1830
+
1831
+ .cc-animacoes-cta-confetti line:nth-child(6) {
1832
+ animation-delay: 600ms;
1833
+ }
1834
+
1835
+ .cc-animacoes-cta-confetti line:nth-child(7) {
1836
+ animation-delay: 720ms;
1837
+ }
1838
+
1839
+ .cc-animacoes-cta-confetti line:nth-child(8) {
1840
+ animation-delay: 840ms;
1841
+ }
1842
+
1843
+ @keyframes cc-animacoes-cta-wobble {
1844
+ 0%,
1845
+ 82%,
1846
+ 100% {
1847
+ transform: rotate(0deg);
1848
+ }
1849
+ 84% {
1850
+ transform: rotate(-2.6deg);
1851
+ }
1852
+ 86% {
1853
+ transform: rotate(2.2deg);
1854
+ }
1855
+ 88% {
1856
+ transform: rotate(-1.5deg);
1857
+ }
1858
+ 90% {
1859
+ transform: rotate(1.1deg);
1860
+ }
1861
+ 92% {
1862
+ transform: rotate(-0.6deg);
1863
+ }
1864
+ }
1865
+
1866
+ @keyframes cc-animacoes-confetti {
1867
+ 0%,
1868
+ 100% {
1869
+ opacity: 0.45;
1870
+ transform: scale(0.7) rotate(0deg);
1871
+ }
1872
+ 35% {
1873
+ opacity: 1;
1874
+ transform: scale(1.06) rotate(-4deg);
1875
+ }
1876
+ 70% {
1877
+ opacity: 0.68;
1878
+ transform: scale(0.82) rotate(3deg);
1879
+ }
1880
+ }
1881
+
1882
+ /* ===== HERO SECTION ===== */
1883
+ #hero-section-one {
1884
+ height: 500px;
1885
+ }
1886
+
1887
+ #hero-section-one .video-hero {
1888
+ position: absolute;
1889
+ right: 0;
1890
+ top: 0;
1891
+ border-top-right-radius: 60px;
1892
+ border-bottom-right-radius: 60px;
1893
+ height: 100%;
1894
+ z-index: 1;
1895
+ overflow: hidden;
1896
+ }
1897
+
1898
+ #hero-section-one .video-hero video {
1899
+ border-top-right-radius: 60px;
1900
+ border-bottom-right-radius: 60px;
1901
+ height: 100%;
1902
+ }
1903
+
1904
+ #hero-section-one .video-hero::after {
1905
+ content: '';
1906
+ position: absolute;
1907
+ top: 0;
1908
+ left: 0px;
1909
+ width: 120px;
1910
+ height: 500px;
1911
+ background: linear-gradient(90deg, #ffffff, #ffffff00);
1912
+ }
1913
+
1914
+ .row-column-content {
1915
+ height: calc(100% - 4.5rem);
1916
+ display: flex;
1917
+ flex-direction: column;
1918
+ align-items: flex-start;
1919
+ max-width: 40%;
1920
+ justify-content: center;
1921
+ z-index: 2;
1922
+ position: relative;
1923
+ }
1924
+
1925
+ .prev-link {
1926
+ font-size: 1rem;
1927
+ font-weight: 600;
1928
+ color: #e91e63;
1929
+ text-decoration: none;
1930
+ cursor: pointer;
1931
+ text-shadow: 0 1px 6px rgba(255, 255, 255, 0.89);
1932
+ transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.3s ease;
1933
+ }
1934
+
1935
+ .orcamento-to-step .orcamento-steps-numeros {
1936
+ max-width: 250px;
1937
+ margin: 0 auto;
1938
+ border: solid 1px #7c5bbb14;
1939
+ padding: 5px 10px;
1940
+ border-radius: 20px;
1941
+ background: #7c5bbb14;
1942
+ overflow: hidden;
1943
+ }
1944
+
1945
+ .orcamento-to-step .orcamento-steps-numeros-content {
1946
+ background: #7c5bbb80;
1947
+ width: 110%;
1948
+ left: 50%;
1949
+ transform: translate(-50%, 0px);
1950
+ max-width: 255px;
1951
+ }
1952
+
1953
+ .login__brand {
1954
+ margin-bottom: 0 !important;
1955
+ }
1956
+
1957
+ /* Animation duration utilities */
1958
+ .animation-dr-1s { animation-duration: 1s; }
1959
+ .animation-dr-2s { animation-duration: 2s; }
1960
+ .animation-dr-3s { animation-duration: 3s; }
1961
+ .animation-dr-4s { animation-duration: 4s; }
1962
+ .animation-dr-5s { animation-duration: 5s; }
1963
+ .animation-dr-6s { animation-duration: 6s; }
1964
+ .animation-dr-7s { animation-duration: 7s; }
1965
+ .animation-dr-8s { animation-duration: 8s; }
1966
+ .animation-dr-9s { animation-duration: 9s; }
1967
+ .animation-dr-10s { animation-duration: 10s; }
1968
+
1969
+ /* ===== RESPONSIVE STYLES ===== */
1970
+ @media (max-width: 1024px) {
1971
+ .acabamento-footer::before {
1972
+ height: 10px;
1973
+ }
1974
+ #hero-section-one {
1975
+ height: 400px;
1976
+ }
1977
+ #hero-section-one .video-hero video {
1978
+ max-width: 500px;
1979
+ scale: 1.3;
1980
+ }
1981
+ .row-column-content {
1982
+ max-width: 45%;
1983
+ }
1984
+ }
1985
+
1986
+ @media (max-width: 768px) {
1987
+ img.ElementoFlutuante2 {
1988
+ display: none;
1989
+ }
1990
+ .cc-video-watch-btn {
1991
+ width: 60px;
1992
+ height: 60px;
1993
+ padding: 6px;
1994
+ }
1995
+ .cc-video-watch-btn:hover {
1996
+ width: 168px;
1997
+ }
1998
+ .cc-video-watch-btn__bg {
1999
+ width: 46px;
2000
+ height: 46px;
2001
+ padding: 0 14px 0 13px;
2002
+ }
2003
+ .cc-video-watch-btn:hover .cc-video-watch-btn__bg {
2004
+ width: 154px;
2005
+ }
2006
+ .cc-video-watch-btn__label {
2007
+ font-size: 0.8125rem;
2008
+ }
2009
+ .row-column-content {
2010
+ max-width: 100%;
2011
+ padding-top: 300px;
2012
+ }
2013
+ #hero-section-one {
2014
+ height: 100%;
2015
+ }
2016
+ #hero-section-one .video-hero {
2017
+ right: unset;
2018
+ top: 0;
2019
+ left: 0;
2020
+ max-height: 300px;
2021
+ width: 100%;
2022
+ border-top-right-radius: 60px;
2023
+ border-top-left-radius: 60px;
2024
+ border-bottom-right-radius: 0;
2025
+ }
2026
+ #hero-section-one .video-hero video {
2027
+ width: 100%;
2028
+ object-fit: cover;
2029
+ scale: none;
2030
+ max-width: 100%;
2031
+ }
2032
+ #hero-section-one .video-hero::after {
2033
+ left: 0;
2034
+ bottom: 0;
2035
+ top: unset;
2036
+ width: 100%;
2037
+ height: 50px;
2038
+ background: linear-gradient(360deg, #ffffff, #ffffff00);
2039
+ }
2040
+ }
2041
+
2042
+ @media (max-width: 568px) {
2043
+ .row-column-content {
2044
+ padding-top: 200px;
2045
+ }
2046
+ #hero-section-one .video-hero {
2047
+ max-height: 250px;
2048
+ }
2049
+ .glass-close-btn {
2050
+ width: 20px;
2051
+ height: 20px;
2052
+ right: 3px;
2053
+ top: 0px;
2054
+ }
2055
+ }
2056
+ }
2057
+
2058
+ @layer utilities {
2059
+ .bg-\[\#7c5bbb\]\/30 {
2060
+ background-color: #7c5bbb4d;
2061
+ }
2062
+
2063
+ .dark .bg-\[\#7c5bbb\]\/30 {
2064
+ background-color: #3a2a5836;
2065
+ backdrop-filter: blur(10px);
2066
+ -webkit-backdrop-filter: blur(10px);
2067
+ }
2068
+
2069
+ /* Reduced motion */
2070
+ @media (prefers-reduced-motion: reduce) {
2071
+ *,
2072
+ *::before,
2073
+ *::after {
2074
+ animation-duration: 0.01ms !important;
2075
+ animation-iteration-count: 1 !important;
2076
+ transition-duration: 0.01ms !important;
2077
+ }
2078
+ }
2079
+ }