@cupcodev/ui 1.0.7 → 1.2.2

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