@reevit/react 0.5.9 → 0.7.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.
- package/README.md +29 -1
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +192 -78
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +192 -78
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +457 -237
- package/package.json +2 -1
package/dist/styles.css
CHANGED
|
@@ -1,31 +1,49 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @reevit/react - Checkout Widget Styles
|
|
3
|
-
*
|
|
3
|
+
* Premium design system matching Reevit dashboard
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
/* Import Space Grotesk font */
|
|
7
|
-
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
|
8
|
-
|
|
9
6
|
/* CSS Variables for theming - Light mode */
|
|
10
7
|
:root {
|
|
8
|
+
/* Colors */
|
|
11
9
|
--reevit-primary: #0ea5e9;
|
|
12
10
|
--reevit-primary-hover: #0284c7;
|
|
13
11
|
--reevit-primary-foreground: #ffffff;
|
|
14
|
-
--reevit-background: #
|
|
12
|
+
--reevit-background: #fafafa;
|
|
15
13
|
--reevit-surface: #ffffff;
|
|
16
|
-
--reevit-border: rgba(15, 23, 42, 0.
|
|
17
|
-
--reevit-text: #
|
|
18
|
-
--reevit-text-secondary: #
|
|
19
|
-
--reevit-muted: #
|
|
14
|
+
--reevit-border: rgba(15, 23, 42, 0.08);
|
|
15
|
+
--reevit-text: #0a0a0a;
|
|
16
|
+
--reevit-text-secondary: #525252;
|
|
17
|
+
--reevit-muted: #a3a3a3;
|
|
20
18
|
--reevit-success: #16a34a;
|
|
19
|
+
--reevit-success-rgb: 22, 163, 74;
|
|
21
20
|
--reevit-error: #dc2626;
|
|
21
|
+
--reevit-error-rgb: 220, 38, 38;
|
|
22
22
|
--reevit-warning: #f59e0b;
|
|
23
|
+
|
|
24
|
+
/* Radii */
|
|
23
25
|
--reevit-radius: 0.75rem;
|
|
24
26
|
--reevit-radius-sm: 0.5rem;
|
|
25
|
-
--reevit-radius-lg: 1.
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
--reevit-
|
|
27
|
+
--reevit-radius-lg: 1.5rem;
|
|
28
|
+
|
|
29
|
+
/* Typography — Grato Classic for body, ABC Repro Mono for amounts */
|
|
30
|
+
--reevit-font: 'Grato Classic', 'Inter', system-ui, -apple-system, sans-serif;
|
|
31
|
+
--reevit-font-heading: 'ABC Repro Mono', ui-monospace, monospace;
|
|
32
|
+
--reevit-font-mono: 'ABC Repro Mono', ui-monospace, monospace;
|
|
33
|
+
|
|
34
|
+
/* Layered shadows for natural depth */
|
|
35
|
+
--reevit-shadow:
|
|
36
|
+
0 0 0 1px rgba(0, 0, 0, 0.03),
|
|
37
|
+
0 1px 2px rgba(0, 0, 0, 0.04),
|
|
38
|
+
0 8px 16px -4px rgba(0, 0, 0, 0.06),
|
|
39
|
+
0 24px 48px -12px rgba(0, 0, 0, 0.08);
|
|
40
|
+
--reevit-shadow-sm:
|
|
41
|
+
0 0 0 1px rgba(0, 0, 0, 0.02),
|
|
42
|
+
0 1px 3px rgba(0, 0, 0, 0.06);
|
|
43
|
+
--reevit-shadow-hover:
|
|
44
|
+
0 0 0 1px rgba(0, 0, 0, 0.04),
|
|
45
|
+
0 2px 4px rgba(0, 0, 0, 0.04),
|
|
46
|
+
0 12px 24px -4px rgba(0, 0, 0, 0.08);
|
|
29
47
|
}
|
|
30
48
|
|
|
31
49
|
/* Dark mode support */
|
|
@@ -33,16 +51,30 @@
|
|
|
33
51
|
:root {
|
|
34
52
|
--reevit-primary: #38bdf8;
|
|
35
53
|
--reevit-primary-hover: #0ea5e9;
|
|
36
|
-
--reevit-primary-foreground: #
|
|
37
|
-
--reevit-background: #
|
|
38
|
-
--reevit-surface: #
|
|
39
|
-
--reevit-border: rgba(
|
|
40
|
-
--reevit-text: #
|
|
41
|
-
--reevit-text-secondary: #
|
|
42
|
-
--reevit-muted: #
|
|
43
|
-
--reevit-success: #
|
|
54
|
+
--reevit-primary-foreground: #0a0a0a;
|
|
55
|
+
--reevit-background: #0a0a0a;
|
|
56
|
+
--reevit-surface: #171717;
|
|
57
|
+
--reevit-border: rgba(255, 255, 255, 0.08);
|
|
58
|
+
--reevit-text: #fafafa;
|
|
59
|
+
--reevit-text-secondary: #a3a3a3;
|
|
60
|
+
--reevit-muted: #737373;
|
|
61
|
+
--reevit-success: #34d399;
|
|
62
|
+
--reevit-success-rgb: 52, 211, 153;
|
|
44
63
|
--reevit-error: #f87171;
|
|
64
|
+
--reevit-error-rgb: 248, 113, 113;
|
|
45
65
|
--reevit-warning: #fbbf24;
|
|
66
|
+
--reevit-shadow:
|
|
67
|
+
0 0 0 1px rgba(255, 255, 255, 0.04),
|
|
68
|
+
0 2px 4px rgba(0, 0, 0, 0.2),
|
|
69
|
+
0 12px 24px -4px rgba(0, 0, 0, 0.3),
|
|
70
|
+
0 24px 48px -12px rgba(0, 0, 0, 0.4);
|
|
71
|
+
--reevit-shadow-sm:
|
|
72
|
+
0 0 0 1px rgba(255, 255, 255, 0.04),
|
|
73
|
+
0 1px 3px rgba(0, 0, 0, 0.3);
|
|
74
|
+
--reevit-shadow-hover:
|
|
75
|
+
0 0 0 1px rgba(255, 255, 255, 0.06),
|
|
76
|
+
0 4px 8px rgba(0, 0, 0, 0.3),
|
|
77
|
+
0 16px 32px -4px rgba(0, 0, 0, 0.4);
|
|
46
78
|
}
|
|
47
79
|
}
|
|
48
80
|
|
|
@@ -50,33 +82,37 @@
|
|
|
50
82
|
--reevit-primary: #0ea5e9;
|
|
51
83
|
--reevit-primary-hover: #0284c7;
|
|
52
84
|
--reevit-primary-foreground: #ffffff;
|
|
53
|
-
--reevit-background: #
|
|
85
|
+
--reevit-background: #fafafa;
|
|
54
86
|
--reevit-surface: #ffffff;
|
|
55
|
-
--reevit-border: rgba(15, 23, 42, 0.
|
|
56
|
-
--reevit-text: #
|
|
57
|
-
--reevit-text-secondary: #
|
|
58
|
-
--reevit-muted: #
|
|
87
|
+
--reevit-border: rgba(15, 23, 42, 0.08);
|
|
88
|
+
--reevit-text: #0a0a0a;
|
|
89
|
+
--reevit-text-secondary: #525252;
|
|
90
|
+
--reevit-muted: #a3a3a3;
|
|
91
|
+
--reevit-success-rgb: 22, 163, 74;
|
|
92
|
+
--reevit-error-rgb: 220, 38, 38;
|
|
59
93
|
}
|
|
60
94
|
|
|
61
95
|
.reevit-modal[data-reevit-theme="dark"] {
|
|
62
96
|
--reevit-primary: #38bdf8;
|
|
63
97
|
--reevit-primary-hover: #0ea5e9;
|
|
64
|
-
--reevit-primary-foreground: #
|
|
65
|
-
--reevit-background: #
|
|
66
|
-
--reevit-surface: #
|
|
67
|
-
--reevit-border: rgba(
|
|
68
|
-
--reevit-text: #
|
|
69
|
-
--reevit-text-secondary: #
|
|
70
|
-
--reevit-muted: #
|
|
98
|
+
--reevit-primary-foreground: #0a0a0a;
|
|
99
|
+
--reevit-background: #0a0a0a;
|
|
100
|
+
--reevit-surface: #171717;
|
|
101
|
+
--reevit-border: rgba(255, 255, 255, 0.08);
|
|
102
|
+
--reevit-text: #fafafa;
|
|
103
|
+
--reevit-text-secondary: #a3a3a3;
|
|
104
|
+
--reevit-muted: #737373;
|
|
105
|
+
--reevit-success-rgb: 52, 211, 153;
|
|
106
|
+
--reevit-error-rgb: 248, 113, 113;
|
|
71
107
|
}
|
|
72
108
|
|
|
73
109
|
/* ===== OVERLAY ===== */
|
|
74
110
|
.reevit-overlay {
|
|
75
111
|
position: fixed;
|
|
76
112
|
inset: 0;
|
|
77
|
-
background:
|
|
78
|
-
backdrop-filter: blur(
|
|
79
|
-
-webkit-backdrop-filter: blur(
|
|
113
|
+
background: rgba(0, 0, 0, 0.5);
|
|
114
|
+
backdrop-filter: blur(12px) saturate(150%);
|
|
115
|
+
-webkit-backdrop-filter: blur(12px) saturate(150%);
|
|
80
116
|
display: flex;
|
|
81
117
|
align-items: center;
|
|
82
118
|
justify-content: center;
|
|
@@ -97,21 +133,35 @@
|
|
|
97
133
|
border: 1px solid var(--reevit-border);
|
|
98
134
|
box-shadow: var(--reevit-shadow);
|
|
99
135
|
width: 100%;
|
|
100
|
-
max-width:
|
|
136
|
+
max-width: 460px;
|
|
101
137
|
min-height: 360px;
|
|
102
138
|
max-height: 90vh;
|
|
103
139
|
overflow: hidden;
|
|
104
140
|
display: flex;
|
|
105
141
|
flex-direction: column;
|
|
106
142
|
font-family: var(--reevit-font);
|
|
107
|
-
animation: reevit-
|
|
143
|
+
animation: reevit-modal-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
108
144
|
transition: min-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
145
|
+
/* Subtle top accent line */
|
|
146
|
+
position: relative;
|
|
109
147
|
}
|
|
110
148
|
|
|
111
|
-
|
|
149
|
+
.reevit-modal::before {
|
|
150
|
+
content: '';
|
|
151
|
+
position: absolute;
|
|
152
|
+
top: 0;
|
|
153
|
+
left: 0;
|
|
154
|
+
right: 0;
|
|
155
|
+
height: 2px;
|
|
156
|
+
background: linear-gradient(90deg, var(--reevit-primary), color-mix(in srgb, var(--reevit-primary) 40%, transparent));
|
|
157
|
+
border-radius: var(--reevit-radius-lg) var(--reevit-radius-lg) 0 0;
|
|
158
|
+
z-index: 1;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
@keyframes reevit-modal-enter {
|
|
112
162
|
from {
|
|
113
163
|
opacity: 0;
|
|
114
|
-
transform: translateY(16px) scale(0.
|
|
164
|
+
transform: translateY(16px) scale(0.97);
|
|
115
165
|
}
|
|
116
166
|
to {
|
|
117
167
|
opacity: 1;
|
|
@@ -120,7 +170,11 @@
|
|
|
120
170
|
}
|
|
121
171
|
|
|
122
172
|
.reevit-modal--success {
|
|
123
|
-
border-color: var(--reevit-success);
|
|
173
|
+
border-color: rgba(var(--reevit-success-rgb), 0.3);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.reevit-modal--success::before {
|
|
177
|
+
background: linear-gradient(90deg, rgb(var(--reevit-success-rgb)), rgba(var(--reevit-success-rgb), 0.3));
|
|
124
178
|
}
|
|
125
179
|
|
|
126
180
|
/* Modal Header */
|
|
@@ -128,7 +182,7 @@
|
|
|
128
182
|
display: flex;
|
|
129
183
|
align-items: center;
|
|
130
184
|
justify-content: space-between;
|
|
131
|
-
padding:
|
|
185
|
+
padding: 20px 24px 14px;
|
|
132
186
|
background: var(--reevit-background);
|
|
133
187
|
}
|
|
134
188
|
|
|
@@ -185,7 +239,7 @@
|
|
|
185
239
|
|
|
186
240
|
/* Modal Amount */
|
|
187
241
|
.reevit-modal__amount {
|
|
188
|
-
padding: 0
|
|
242
|
+
padding: 0 24px 18px;
|
|
189
243
|
text-align: left;
|
|
190
244
|
background: var(--reevit-background);
|
|
191
245
|
border-bottom: 1px solid var(--reevit-border);
|
|
@@ -193,33 +247,37 @@
|
|
|
193
247
|
|
|
194
248
|
.reevit-modal__amount-label {
|
|
195
249
|
display: block;
|
|
250
|
+
font-family: var(--reevit-font);
|
|
196
251
|
font-size: 11px;
|
|
197
252
|
font-weight: 500;
|
|
198
|
-
text-transform:
|
|
199
|
-
letter-spacing: 0;
|
|
253
|
+
text-transform: uppercase;
|
|
254
|
+
letter-spacing: 0.05em;
|
|
200
255
|
color: var(--reevit-muted);
|
|
201
|
-
margin-bottom:
|
|
256
|
+
margin-bottom: 4px;
|
|
202
257
|
}
|
|
203
258
|
|
|
204
259
|
.reevit-modal__amount-value {
|
|
205
260
|
display: block;
|
|
206
|
-
font-
|
|
261
|
+
font-family: var(--reevit-font-heading);
|
|
262
|
+
font-size: 36px;
|
|
207
263
|
font-weight: 600;
|
|
208
|
-
letter-spacing: -0.
|
|
264
|
+
letter-spacing: -0.025em;
|
|
209
265
|
color: var(--reevit-text);
|
|
266
|
+
font-variant-numeric: tabular-nums;
|
|
267
|
+
line-height: 1.1;
|
|
210
268
|
}
|
|
211
269
|
|
|
212
270
|
/* Modal Content */
|
|
213
271
|
.reevit-modal__content {
|
|
214
272
|
flex: 1;
|
|
215
273
|
overflow-y: auto;
|
|
216
|
-
padding:
|
|
274
|
+
padding: 20px 24px 24px;
|
|
217
275
|
background: var(--reevit-background);
|
|
218
276
|
}
|
|
219
277
|
|
|
220
278
|
/* Modal Footer */
|
|
221
279
|
.reevit-modal__footer {
|
|
222
|
-
padding: 12px
|
|
280
|
+
padding: 12px 24px;
|
|
223
281
|
text-align: center;
|
|
224
282
|
background: var(--reevit-background);
|
|
225
283
|
border-top: 1px solid var(--reevit-border);
|
|
@@ -228,19 +286,22 @@
|
|
|
228
286
|
.reevit-modal__secured {
|
|
229
287
|
display: inline-flex;
|
|
230
288
|
align-items: center;
|
|
231
|
-
gap:
|
|
232
|
-
font-
|
|
289
|
+
gap: 5px;
|
|
290
|
+
font-family: var(--reevit-font);
|
|
291
|
+
font-size: 10px;
|
|
233
292
|
font-weight: 400;
|
|
234
293
|
color: var(--reevit-muted);
|
|
235
|
-
letter-spacing: 0;
|
|
294
|
+
letter-spacing: 0.02em;
|
|
236
295
|
}
|
|
237
296
|
|
|
238
297
|
.reevit-modal__secured svg {
|
|
239
298
|
flex-shrink: 0;
|
|
299
|
+
opacity: 0.7;
|
|
240
300
|
}
|
|
241
301
|
|
|
242
302
|
.reevit-modal__secured-brand {
|
|
243
|
-
font-weight:
|
|
303
|
+
font-weight: 600;
|
|
304
|
+
letter-spacing: -0.01em;
|
|
244
305
|
}
|
|
245
306
|
|
|
246
307
|
/* ===== PSP SELECTOR ===== */
|
|
@@ -286,7 +347,7 @@
|
|
|
286
347
|
|
|
287
348
|
.reevit-psp-option--selected {
|
|
288
349
|
border-color: var(--reevit-primary);
|
|
289
|
-
background: color-mix(in srgb, var(--reevit-primary)
|
|
350
|
+
background: color-mix(in srgb, var(--reevit-primary) 4%, var(--reevit-surface));
|
|
290
351
|
border-radius: var(--reevit-radius) var(--reevit-radius) 0 0;
|
|
291
352
|
}
|
|
292
353
|
|
|
@@ -326,7 +387,8 @@
|
|
|
326
387
|
|
|
327
388
|
.reevit-psp-option__name {
|
|
328
389
|
display: block;
|
|
329
|
-
font-
|
|
390
|
+
font-family: var(--reevit-font);
|
|
391
|
+
font-size: 14px;
|
|
330
392
|
font-weight: 600;
|
|
331
393
|
color: var(--reevit-text);
|
|
332
394
|
letter-spacing: -0.01em;
|
|
@@ -334,7 +396,8 @@
|
|
|
334
396
|
|
|
335
397
|
.reevit-psp-option__methods {
|
|
336
398
|
display: block;
|
|
337
|
-
font-
|
|
399
|
+
font-family: var(--reevit-font);
|
|
400
|
+
font-size: 12px;
|
|
338
401
|
color: var(--reevit-text-secondary);
|
|
339
402
|
margin-top: 3px;
|
|
340
403
|
}
|
|
@@ -411,27 +474,24 @@
|
|
|
411
474
|
border-top: 1px solid var(--reevit-border);
|
|
412
475
|
}
|
|
413
476
|
|
|
414
|
-
/* Back button */
|
|
477
|
+
/* Back button — text link style */
|
|
415
478
|
.reevit-psp-back-button {
|
|
416
479
|
display: inline-flex;
|
|
417
480
|
align-items: center;
|
|
418
|
-
gap:
|
|
419
|
-
padding:
|
|
420
|
-
margin-bottom:
|
|
421
|
-
background:
|
|
422
|
-
border:
|
|
423
|
-
|
|
424
|
-
color: var(--reevit-text-secondary);
|
|
481
|
+
gap: 4px;
|
|
482
|
+
padding: 6px 0;
|
|
483
|
+
margin-bottom: 12px;
|
|
484
|
+
background: none;
|
|
485
|
+
border: none;
|
|
486
|
+
color: var(--reevit-muted);
|
|
425
487
|
font-family: var(--reevit-font);
|
|
426
|
-
font-size:
|
|
488
|
+
font-size: 12px;
|
|
427
489
|
font-weight: 500;
|
|
428
490
|
cursor: pointer;
|
|
429
|
-
transition:
|
|
491
|
+
transition: color 0.15s ease;
|
|
430
492
|
}
|
|
431
493
|
|
|
432
494
|
.reevit-psp-back-button:hover {
|
|
433
|
-
background: var(--reevit-surface);
|
|
434
|
-
border-color: var(--reevit-text-secondary);
|
|
435
495
|
color: var(--reevit-text);
|
|
436
496
|
}
|
|
437
497
|
|
|
@@ -442,6 +502,11 @@
|
|
|
442
502
|
|
|
443
503
|
.reevit-psp-back-button svg {
|
|
444
504
|
flex-shrink: 0;
|
|
505
|
+
transition: transform 0.15s ease;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
.reevit-psp-back-button:hover svg {
|
|
509
|
+
transform: translateX(-2px);
|
|
445
510
|
}
|
|
446
511
|
|
|
447
512
|
.reevit-psp-methods {
|
|
@@ -450,22 +515,24 @@
|
|
|
450
515
|
|
|
451
516
|
/* ===== PAYMENT METHOD SELECTOR ===== */
|
|
452
517
|
.reevit-method-selector {
|
|
453
|
-
margin-bottom:
|
|
518
|
+
margin-bottom: 0;
|
|
454
519
|
width: 100%;
|
|
455
520
|
}
|
|
456
521
|
|
|
457
522
|
.reevit-method-selector__label {
|
|
458
|
-
font-
|
|
459
|
-
font-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
523
|
+
font-family: var(--reevit-font);
|
|
524
|
+
font-size: 11px;
|
|
525
|
+
font-weight: 600;
|
|
526
|
+
color: var(--reevit-muted);
|
|
527
|
+
text-transform: uppercase;
|
|
528
|
+
letter-spacing: 0.06em;
|
|
529
|
+
margin-bottom: 10px;
|
|
463
530
|
}
|
|
464
531
|
|
|
465
532
|
.reevit-method-selector__options--grid {
|
|
466
533
|
display: grid;
|
|
467
534
|
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
|
468
|
-
gap:
|
|
535
|
+
gap: 10px;
|
|
469
536
|
width: 100%;
|
|
470
537
|
}
|
|
471
538
|
|
|
@@ -534,7 +601,14 @@
|
|
|
534
601
|
}
|
|
535
602
|
|
|
536
603
|
.reevit-method-option--grid .reevit-method-option__icon {
|
|
537
|
-
|
|
604
|
+
display: flex;
|
|
605
|
+
align-items: center;
|
|
606
|
+
justify-content: center;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
.reevit-method-option--grid .reevit-method-option__icon svg {
|
|
610
|
+
width: 28px;
|
|
611
|
+
height: 28px;
|
|
538
612
|
}
|
|
539
613
|
|
|
540
614
|
.reevit-method-option--grid .reevit-method-option__label {
|
|
@@ -558,33 +632,59 @@
|
|
|
558
632
|
border-bottom: 1px solid var(--reevit-border);
|
|
559
633
|
border-radius: 0;
|
|
560
634
|
cursor: pointer;
|
|
561
|
-
transition: all 0.
|
|
635
|
+
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
562
636
|
text-align: left;
|
|
563
637
|
width: 100%;
|
|
564
638
|
position: relative;
|
|
639
|
+
animation: reevit-slide-up 0.25s ease-out both;
|
|
565
640
|
}
|
|
566
641
|
|
|
642
|
+
.reevit-method-option--list:nth-child(2) { animation-delay: 0.04s; }
|
|
643
|
+
.reevit-method-option--list:nth-child(3) { animation-delay: 0.08s; }
|
|
644
|
+
.reevit-method-option--list:nth-child(4) { animation-delay: 0.12s; }
|
|
645
|
+
.reevit-method-option--list:nth-child(5) { animation-delay: 0.16s; }
|
|
646
|
+
|
|
567
647
|
.reevit-method-option--list:last-child {
|
|
568
648
|
border-bottom: none;
|
|
569
649
|
}
|
|
570
650
|
|
|
571
651
|
.reevit-method-option--list:hover:not(.reevit-method-option--disabled) {
|
|
572
|
-
background: color-mix(in srgb, var(--reevit-
|
|
652
|
+
background: color-mix(in srgb, var(--reevit-text) 3%, transparent);
|
|
573
653
|
}
|
|
574
654
|
|
|
575
655
|
.reevit-method-option--list.reevit-method-option--selected {
|
|
576
656
|
background: color-mix(in srgb, var(--reevit-primary) 6%, transparent);
|
|
657
|
+
border: 1px solid var(--reevit-primary);
|
|
658
|
+
border-radius: var(--reevit-radius);
|
|
577
659
|
}
|
|
578
660
|
|
|
579
661
|
.reevit-method-option--list .reevit-method-option__icon-wrapper {
|
|
580
662
|
display: flex;
|
|
581
663
|
align-items: center;
|
|
582
|
-
justify-content:
|
|
583
|
-
|
|
664
|
+
justify-content: center;
|
|
665
|
+
width: 40px;
|
|
584
666
|
height: 40px;
|
|
585
|
-
background: transparent;
|
|
667
|
+
background: color-mix(in srgb, var(--reevit-text) 5%, transparent);
|
|
668
|
+
border-radius: 10px;
|
|
586
669
|
flex-shrink: 0;
|
|
587
|
-
|
|
670
|
+
color: var(--reevit-text-secondary);
|
|
671
|
+
transition: all 0.2s ease;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
.reevit-method-option--list:hover .reevit-method-option__icon-wrapper {
|
|
675
|
+
background: color-mix(in srgb, var(--reevit-primary) 10%, transparent);
|
|
676
|
+
color: var(--reevit-primary);
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
.reevit-method-option--list.reevit-method-option--selected .reevit-method-option__icon-wrapper {
|
|
680
|
+
background: color-mix(in srgb, var(--reevit-primary) 14%, transparent);
|
|
681
|
+
color: var(--reevit-primary);
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
.reevit-method-option--list .reevit-method-option__icon {
|
|
685
|
+
display: flex;
|
|
686
|
+
align-items: center;
|
|
687
|
+
justify-content: center;
|
|
588
688
|
}
|
|
589
689
|
|
|
590
690
|
.reevit-method-option--list .reevit-method-option__content {
|
|
@@ -597,17 +697,23 @@
|
|
|
597
697
|
|
|
598
698
|
.reevit-method-option--list .reevit-method-option__label {
|
|
599
699
|
display: block;
|
|
600
|
-
font-
|
|
700
|
+
font-family: var(--reevit-font);
|
|
701
|
+
font-size: 13.5px;
|
|
601
702
|
font-weight: 600;
|
|
602
703
|
color: var(--reevit-text);
|
|
603
704
|
margin-bottom: 2px;
|
|
604
705
|
letter-spacing: -0.01em;
|
|
605
706
|
}
|
|
606
707
|
|
|
708
|
+
.reevit-method-option--list.reevit-method-option--selected .reevit-method-option__label {
|
|
709
|
+
color: var(--reevit-primary);
|
|
710
|
+
}
|
|
711
|
+
|
|
607
712
|
.reevit-method-option--list .reevit-method-option__description {
|
|
608
713
|
display: block;
|
|
609
|
-
font-
|
|
610
|
-
|
|
714
|
+
font-family: var(--reevit-font);
|
|
715
|
+
font-size: 11.5px;
|
|
716
|
+
color: var(--reevit-muted);
|
|
611
717
|
line-height: 1.4;
|
|
612
718
|
}
|
|
613
719
|
|
|
@@ -615,16 +721,19 @@
|
|
|
615
721
|
color: var(--reevit-muted);
|
|
616
722
|
flex-shrink: 0;
|
|
617
723
|
transition: all 0.2s ease;
|
|
724
|
+
opacity: 0.5;
|
|
618
725
|
}
|
|
619
726
|
|
|
620
727
|
.reevit-method-option--list:hover .reevit-method-option__chevron {
|
|
621
|
-
color: var(--reevit-
|
|
728
|
+
color: var(--reevit-text);
|
|
622
729
|
transform: translateX(2px);
|
|
730
|
+
opacity: 1;
|
|
623
731
|
}
|
|
624
732
|
|
|
625
733
|
.reevit-method-option--list .reevit-method-option__check {
|
|
626
734
|
color: var(--reevit-primary);
|
|
627
735
|
flex-shrink: 0;
|
|
736
|
+
animation: reevit-pop 0.25s ease-out;
|
|
628
737
|
}
|
|
629
738
|
|
|
630
739
|
.reevit-method-option--list.reevit-method-option--selected .reevit-method-option__chevron {
|
|
@@ -639,26 +748,47 @@
|
|
|
639
748
|
.reevit-method-option__logos {
|
|
640
749
|
display: flex;
|
|
641
750
|
align-items: center;
|
|
642
|
-
gap:
|
|
751
|
+
gap: 3px;
|
|
643
752
|
}
|
|
644
753
|
|
|
645
754
|
.reevit-method-option__logo-img {
|
|
646
|
-
width:
|
|
647
|
-
height:
|
|
755
|
+
width: 24px;
|
|
756
|
+
height: 24px;
|
|
648
757
|
object-fit: contain;
|
|
649
758
|
border-radius: 6px;
|
|
650
|
-
background:
|
|
651
|
-
padding:
|
|
652
|
-
|
|
759
|
+
background: var(--reevit-surface);
|
|
760
|
+
padding: 2px;
|
|
761
|
+
border: 1px solid var(--reevit-border);
|
|
653
762
|
}
|
|
654
763
|
|
|
655
764
|
.reevit-method-option--grid .reevit-method-option__logos {
|
|
656
|
-
gap:
|
|
765
|
+
gap: 4px;
|
|
657
766
|
}
|
|
658
767
|
|
|
659
768
|
.reevit-method-option--grid .reevit-method-option__logo-img {
|
|
660
|
-
width:
|
|
661
|
-
height:
|
|
769
|
+
width: 28px;
|
|
770
|
+
height: 28px;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
/* ===== INLINE ACTION (appears after method selection) ===== */
|
|
774
|
+
.reevit-inline-action,
|
|
775
|
+
.reevit-card-info {
|
|
776
|
+
display: flex;
|
|
777
|
+
flex-direction: column;
|
|
778
|
+
gap: 12px;
|
|
779
|
+
padding: 16px;
|
|
780
|
+
background: color-mix(in srgb, var(--reevit-text) 2%, transparent);
|
|
781
|
+
border-radius: var(--reevit-radius);
|
|
782
|
+
border: 1px solid var(--reevit-border);
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
.reevit-inline-action__hint,
|
|
786
|
+
.reevit-info-text {
|
|
787
|
+
font-family: var(--reevit-font);
|
|
788
|
+
font-size: 12.5px;
|
|
789
|
+
color: var(--reevit-text-secondary);
|
|
790
|
+
line-height: 1.5;
|
|
791
|
+
margin: 0;
|
|
662
792
|
}
|
|
663
793
|
|
|
664
794
|
/* ===== MOBILE MONEY FORM ===== */
|
|
@@ -774,44 +904,48 @@
|
|
|
774
904
|
align-items: center;
|
|
775
905
|
justify-content: center;
|
|
776
906
|
gap: 6px;
|
|
777
|
-
padding:
|
|
907
|
+
padding: 11px 20px;
|
|
778
908
|
font-size: 13px;
|
|
779
909
|
font-weight: 600;
|
|
780
910
|
border-radius: var(--reevit-radius);
|
|
781
911
|
cursor: pointer;
|
|
782
|
-
transition: all 0.
|
|
912
|
+
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
783
913
|
font-family: var(--reevit-font);
|
|
784
914
|
border: none;
|
|
785
|
-
min-height:
|
|
915
|
+
min-height: 44px;
|
|
786
916
|
letter-spacing: -0.01em;
|
|
787
917
|
}
|
|
788
918
|
|
|
789
919
|
.reevit-btn--primary {
|
|
790
920
|
flex: 1;
|
|
791
|
-
background: var(--reevit-primary);
|
|
921
|
+
background: linear-gradient(180deg, var(--reevit-primary), var(--reevit-primary-hover));
|
|
792
922
|
color: var(--reevit-primary-foreground);
|
|
793
|
-
border: 1px solid color-mix(in srgb, var(--reevit-primary) 60%,
|
|
923
|
+
border: 1px solid color-mix(in srgb, var(--reevit-primary) 60%, transparent);
|
|
924
|
+
box-shadow: var(--reevit-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
794
925
|
}
|
|
795
926
|
|
|
796
927
|
.reevit-btn--primary:hover:not(:disabled) {
|
|
797
|
-
background: var(--reevit-primary-hover);
|
|
928
|
+
background: linear-gradient(180deg, var(--reevit-primary-hover), color-mix(in srgb, var(--reevit-primary-hover) 85%, black));
|
|
798
929
|
border-color: var(--reevit-primary-hover);
|
|
930
|
+
box-shadow: var(--reevit-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
931
|
+
transform: translateY(-1px);
|
|
799
932
|
}
|
|
800
933
|
|
|
801
|
-
.reevit-btn--primary:focus:not(:disabled) {
|
|
802
|
-
outline:
|
|
803
|
-
|
|
804
|
-
box-shadow: 0 0 0 3px color-mix(in srgb, var(--reevit-primary) 25%, transparent);
|
|
934
|
+
.reevit-btn--primary:focus-visible:not(:disabled) {
|
|
935
|
+
outline: 2px solid var(--reevit-primary);
|
|
936
|
+
outline-offset: 2px;
|
|
805
937
|
}
|
|
806
938
|
|
|
807
939
|
.reevit-btn--primary:active:not(:disabled) {
|
|
808
940
|
background: var(--reevit-primary-hover);
|
|
809
|
-
transform: scale(0.
|
|
941
|
+
transform: translateY(0) scale(0.97);
|
|
942
|
+
box-shadow: var(--reevit-shadow-sm);
|
|
810
943
|
}
|
|
811
944
|
|
|
812
945
|
.reevit-btn--primary:disabled {
|
|
813
|
-
opacity: 0.
|
|
946
|
+
opacity: 0.4;
|
|
814
947
|
cursor: not-allowed;
|
|
948
|
+
box-shadow: none;
|
|
815
949
|
}
|
|
816
950
|
|
|
817
951
|
.reevit-btn--secondary {
|
|
@@ -821,64 +955,41 @@
|
|
|
821
955
|
}
|
|
822
956
|
|
|
823
957
|
.reevit-btn--secondary:hover:not(:disabled) {
|
|
824
|
-
background: transparent;
|
|
825
|
-
border-color: var(--reevit-text);
|
|
958
|
+
background: color-mix(in srgb, var(--reevit-text) 4%, transparent);
|
|
959
|
+
border-color: color-mix(in srgb, var(--reevit-text) 20%, var(--reevit-border));
|
|
826
960
|
}
|
|
827
961
|
|
|
828
|
-
.reevit-btn--secondary:focus:not(:disabled) {
|
|
829
|
-
outline:
|
|
830
|
-
|
|
831
|
-
box-shadow: 0 0 0 2px var(--reevit-border);
|
|
962
|
+
.reevit-btn--secondary:focus-visible:not(:disabled) {
|
|
963
|
+
outline: 2px solid var(--reevit-text);
|
|
964
|
+
outline-offset: 2px;
|
|
832
965
|
}
|
|
833
966
|
|
|
834
967
|
.reevit-trigger-btn {
|
|
835
|
-
padding:
|
|
968
|
+
padding: 11px 20px;
|
|
836
969
|
font-size: 13px;
|
|
837
970
|
font-weight: 600;
|
|
838
|
-
background: var(--reevit-primary);
|
|
971
|
+
background: linear-gradient(180deg, var(--reevit-primary), var(--reevit-primary-hover));
|
|
839
972
|
color: var(--reevit-primary-foreground);
|
|
840
|
-
border: 1px solid color-mix(in srgb, var(--reevit-primary)
|
|
973
|
+
border: 1px solid color-mix(in srgb, var(--reevit-primary) 60%, transparent);
|
|
841
974
|
border-radius: var(--reevit-radius);
|
|
842
975
|
cursor: pointer;
|
|
843
976
|
font-family: var(--reevit-font);
|
|
844
|
-
transition: all 0.
|
|
977
|
+
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
845
978
|
letter-spacing: -0.01em;
|
|
979
|
+
min-height: 44px;
|
|
980
|
+
box-shadow: var(--reevit-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
846
981
|
}
|
|
847
982
|
|
|
848
983
|
.reevit-trigger-btn:hover {
|
|
849
|
-
background: var(--reevit-primary-hover);
|
|
984
|
+
background: linear-gradient(180deg, var(--reevit-primary-hover), color-mix(in srgb, var(--reevit-primary-hover) 85%, black));
|
|
850
985
|
border-color: var(--reevit-primary-hover);
|
|
986
|
+
transform: translateY(-1px);
|
|
987
|
+
box-shadow: var(--reevit-shadow-hover);
|
|
851
988
|
}
|
|
852
989
|
|
|
853
|
-
.reevit-trigger-btn:focus {
|
|
854
|
-
outline:
|
|
855
|
-
|
|
856
|
-
box-shadow: 0 0 0 3px color-mix(in srgb, var(--reevit-primary) 25%, transparent);
|
|
857
|
-
}
|
|
858
|
-
|
|
859
|
-
/* Dark mode button overrides */
|
|
860
|
-
@media (prefers-color-scheme: dark) {
|
|
861
|
-
.reevit-btn--primary {
|
|
862
|
-
background: var(--reevit-primary);
|
|
863
|
-
color: var(--reevit-primary-foreground);
|
|
864
|
-
}
|
|
865
|
-
|
|
866
|
-
.reevit-btn--primary:hover:not(:disabled) {
|
|
867
|
-
background: var(--reevit-primary-hover);
|
|
868
|
-
}
|
|
869
|
-
|
|
870
|
-
.reevit-btn--primary:active:not(:disabled) {
|
|
871
|
-
background: var(--reevit-primary-hover);
|
|
872
|
-
}
|
|
873
|
-
|
|
874
|
-
.reevit-trigger-btn {
|
|
875
|
-
background: var(--reevit-primary);
|
|
876
|
-
color: var(--reevit-primary-foreground);
|
|
877
|
-
}
|
|
878
|
-
|
|
879
|
-
.reevit-trigger-btn:hover {
|
|
880
|
-
background: var(--reevit-primary-hover);
|
|
881
|
-
}
|
|
990
|
+
.reevit-trigger-btn:focus-visible {
|
|
991
|
+
outline: 2px solid var(--reevit-primary);
|
|
992
|
+
outline-offset: 2px;
|
|
882
993
|
}
|
|
883
994
|
|
|
884
995
|
/* ===== STATES ===== */
|
|
@@ -889,12 +1000,77 @@
|
|
|
889
1000
|
flex-direction: column;
|
|
890
1001
|
align-items: center;
|
|
891
1002
|
justify-content: center;
|
|
892
|
-
padding:
|
|
1003
|
+
padding: 48px 24px;
|
|
893
1004
|
text-align: center;
|
|
894
1005
|
gap: 12px;
|
|
895
1006
|
}
|
|
896
1007
|
|
|
897
|
-
/*
|
|
1008
|
+
/* ===== LOADING — Three-dot pulse ===== */
|
|
1009
|
+
.reevit-loading {
|
|
1010
|
+
gap: 16px;
|
|
1011
|
+
}
|
|
1012
|
+
|
|
1013
|
+
.reevit-dot-pulse {
|
|
1014
|
+
display: flex;
|
|
1015
|
+
align-items: center;
|
|
1016
|
+
gap: 6px;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
.reevit-dot-pulse__dot {
|
|
1020
|
+
width: 8px;
|
|
1021
|
+
height: 8px;
|
|
1022
|
+
border-radius: 50%;
|
|
1023
|
+
background: var(--reevit-text);
|
|
1024
|
+
opacity: 0.3;
|
|
1025
|
+
animation: reevit-dot-pulse 1.2s ease-in-out infinite;
|
|
1026
|
+
}
|
|
1027
|
+
|
|
1028
|
+
.reevit-dot-pulse__dot:nth-child(2) {
|
|
1029
|
+
animation-delay: 0.15s;
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
.reevit-dot-pulse__dot:nth-child(3) {
|
|
1033
|
+
animation-delay: 0.3s;
|
|
1034
|
+
}
|
|
1035
|
+
|
|
1036
|
+
@keyframes reevit-dot-pulse {
|
|
1037
|
+
0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
|
|
1038
|
+
40% { transform: scale(1); opacity: 1; }
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
.reevit-loading p {
|
|
1042
|
+
font-family: var(--reevit-font);
|
|
1043
|
+
font-size: 12px;
|
|
1044
|
+
color: var(--reevit-muted);
|
|
1045
|
+
margin: 0;
|
|
1046
|
+
letter-spacing: 0.01em;
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
/* Legacy spinner (kept for backwards compat) */
|
|
1050
|
+
.reevit-spinner {
|
|
1051
|
+
width: 20px;
|
|
1052
|
+
height: 20px;
|
|
1053
|
+
border: 2px solid var(--reevit-border);
|
|
1054
|
+
border-top-color: var(--reevit-text);
|
|
1055
|
+
border-radius: 50%;
|
|
1056
|
+
animation: reevit-spin 0.7s linear infinite;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
@keyframes reevit-spin {
|
|
1060
|
+
to { transform: rotate(360deg); }
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
.reevit-loading .reevit-spinner {
|
|
1064
|
+
width: 32px;
|
|
1065
|
+
height: 32px;
|
|
1066
|
+
border-width: 2px;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
/* ===== SUCCESS ===== */
|
|
1070
|
+
.reevit-success {
|
|
1071
|
+
position: relative;
|
|
1072
|
+
}
|
|
1073
|
+
|
|
898
1074
|
.reevit-success__icon-wrapper {
|
|
899
1075
|
margin-bottom: 8px;
|
|
900
1076
|
}
|
|
@@ -903,12 +1079,18 @@
|
|
|
903
1079
|
width: 72px;
|
|
904
1080
|
height: 72px;
|
|
905
1081
|
border-radius: 50%;
|
|
906
|
-
background: linear-gradient(135deg, var(--reevit-success), #10b981);
|
|
1082
|
+
background: linear-gradient(135deg, rgb(var(--reevit-success-rgb)), #10b981);
|
|
907
1083
|
display: flex;
|
|
908
1084
|
align-items: center;
|
|
909
1085
|
justify-content: center;
|
|
910
|
-
animation: reevit-pop 0.4s ease-out;
|
|
911
|
-
box-shadow: 0
|
|
1086
|
+
animation: reevit-pop 0.4s ease-out, reevit-glow 2s ease-out 0.4s;
|
|
1087
|
+
box-shadow: 0 0 0 0 rgba(var(--reevit-success-rgb), 0);
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
@keyframes reevit-glow {
|
|
1091
|
+
0% { box-shadow: 0 0 0 0 rgba(var(--reevit-success-rgb), 0.4); }
|
|
1092
|
+
70% { box-shadow: 0 0 0 24px rgba(var(--reevit-success-rgb), 0); }
|
|
1093
|
+
100% { box-shadow: 0 0 0 0 rgba(var(--reevit-success-rgb), 0); }
|
|
912
1094
|
}
|
|
913
1095
|
|
|
914
1096
|
.reevit-success__checkmark {
|
|
@@ -939,40 +1121,61 @@
|
|
|
939
1121
|
}
|
|
940
1122
|
|
|
941
1123
|
.reevit-success__title {
|
|
1124
|
+
font-family: var(--reevit-font);
|
|
942
1125
|
font-size: 18px !important;
|
|
943
1126
|
font-weight: 600;
|
|
944
1127
|
color: var(--reevit-text);
|
|
945
1128
|
margin: 0;
|
|
946
|
-
letter-spacing: -0.
|
|
1129
|
+
letter-spacing: -0.025em;
|
|
947
1130
|
}
|
|
948
1131
|
|
|
949
1132
|
.reevit-success__amount {
|
|
950
|
-
font-
|
|
1133
|
+
font-family: var(--reevit-font-heading);
|
|
1134
|
+
font-size: 28px !important;
|
|
951
1135
|
font-weight: 700;
|
|
952
1136
|
color: var(--reevit-success);
|
|
953
1137
|
margin: 4px 0 !important;
|
|
954
|
-
letter-spacing: -0.
|
|
1138
|
+
letter-spacing: -0.025em;
|
|
1139
|
+
font-variant-numeric: tabular-nums;
|
|
955
1140
|
}
|
|
956
1141
|
|
|
957
1142
|
.reevit-success__reference {
|
|
958
|
-
font-
|
|
1143
|
+
font-family: var(--reevit-font-mono);
|
|
1144
|
+
font-size: 11px !important;
|
|
959
1145
|
color: var(--reevit-text-secondary);
|
|
960
1146
|
margin: 0 !important;
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
padding: 6px 12px;
|
|
1147
|
+
background: color-mix(in srgb, var(--reevit-text) 5%, transparent);
|
|
1148
|
+
padding: 6px 14px;
|
|
964
1149
|
border-radius: var(--reevit-radius-sm);
|
|
1150
|
+
letter-spacing: 0.02em;
|
|
965
1151
|
}
|
|
966
1152
|
|
|
967
1153
|
.reevit-success__redirect {
|
|
1154
|
+
font-family: var(--reevit-font);
|
|
968
1155
|
font-size: 11px !important;
|
|
969
1156
|
color: var(--reevit-muted);
|
|
970
1157
|
margin-top: 8px !important;
|
|
971
1158
|
animation: reevit-pulse 1.5s ease-in-out infinite;
|
|
972
1159
|
}
|
|
973
1160
|
|
|
1161
|
+
/* Countdown bar for auto-close */
|
|
1162
|
+
.reevit-success__countdown {
|
|
1163
|
+
position: absolute;
|
|
1164
|
+
bottom: 0;
|
|
1165
|
+
left: 0;
|
|
1166
|
+
height: 2px;
|
|
1167
|
+
background: rgb(var(--reevit-success-rgb));
|
|
1168
|
+
border-radius: 0 0 var(--reevit-radius-lg) var(--reevit-radius-lg);
|
|
1169
|
+
animation: reevit-countdown 5s linear forwards;
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
@keyframes reevit-countdown {
|
|
1173
|
+
from { width: 100%; }
|
|
1174
|
+
to { width: 0%; }
|
|
1175
|
+
}
|
|
1176
|
+
|
|
974
1177
|
@keyframes reevit-pulse {
|
|
975
|
-
0%, 100% { opacity: 0.
|
|
1178
|
+
0%, 100% { opacity: 0.5; }
|
|
976
1179
|
50% { opacity: 1; }
|
|
977
1180
|
}
|
|
978
1181
|
|
|
@@ -990,65 +1193,43 @@
|
|
|
990
1193
|
animation: reevit-pop 0.3s ease-out;
|
|
991
1194
|
}
|
|
992
1195
|
|
|
1196
|
+
/* ===== ERROR ===== */
|
|
993
1197
|
.reevit-error__icon {
|
|
994
|
-
width:
|
|
995
|
-
height:
|
|
1198
|
+
width: 56px;
|
|
1199
|
+
height: 56px;
|
|
996
1200
|
border-radius: 50%;
|
|
997
|
-
background: var(--reevit-error);
|
|
998
|
-
color:
|
|
1201
|
+
background: rgba(var(--reevit-error-rgb), 0.1);
|
|
1202
|
+
color: rgb(var(--reevit-error-rgb));
|
|
999
1203
|
font-size: 24px;
|
|
1000
1204
|
display: flex;
|
|
1001
1205
|
align-items: center;
|
|
1002
1206
|
justify-content: center;
|
|
1207
|
+
border: 1px solid rgba(var(--reevit-error-rgb), 0.2);
|
|
1003
1208
|
}
|
|
1004
1209
|
|
|
1005
1210
|
@keyframes reevit-pop {
|
|
1006
1211
|
0% { transform: scale(0); }
|
|
1007
|
-
50% { transform: scale(1.
|
|
1212
|
+
50% { transform: scale(1.08); }
|
|
1008
1213
|
100% { transform: scale(1); }
|
|
1009
1214
|
}
|
|
1010
1215
|
|
|
1011
1216
|
.reevit-success h3,
|
|
1012
1217
|
.reevit-error h3 {
|
|
1013
|
-
font-
|
|
1218
|
+
font-family: var(--reevit-font);
|
|
1219
|
+
font-size: 15px;
|
|
1014
1220
|
font-weight: 600;
|
|
1015
1221
|
color: var(--reevit-text);
|
|
1016
1222
|
margin: 0;
|
|
1017
|
-
letter-spacing: -0.
|
|
1223
|
+
letter-spacing: -0.02em;
|
|
1018
1224
|
}
|
|
1019
1225
|
|
|
1020
1226
|
.reevit-success p,
|
|
1021
1227
|
.reevit-error p {
|
|
1022
|
-
font-
|
|
1023
|
-
|
|
1024
|
-
margin: 0;
|
|
1025
|
-
}
|
|
1026
|
-
|
|
1027
|
-
/* ===== SPINNER ===== */
|
|
1028
|
-
.reevit-spinner {
|
|
1029
|
-
width: 20px;
|
|
1030
|
-
height: 20px;
|
|
1031
|
-
border: 2px solid var(--reevit-border);
|
|
1032
|
-
border-top-color: var(--reevit-text);
|
|
1033
|
-
border-radius: 50%;
|
|
1034
|
-
animation: reevit-spin 0.7s linear infinite;
|
|
1035
|
-
}
|
|
1036
|
-
|
|
1037
|
-
@keyframes reevit-spin {
|
|
1038
|
-
to { transform: rotate(360deg); }
|
|
1039
|
-
}
|
|
1040
|
-
|
|
1041
|
-
/* Large spinner for loading states */
|
|
1042
|
-
.reevit-loading .reevit-spinner {
|
|
1043
|
-
width: 32px;
|
|
1044
|
-
height: 32px;
|
|
1045
|
-
border-width: 2px;
|
|
1046
|
-
}
|
|
1047
|
-
|
|
1048
|
-
.reevit-loading p {
|
|
1049
|
-
font-size: 12px;
|
|
1228
|
+
font-family: var(--reevit-font);
|
|
1229
|
+
font-size: 13px;
|
|
1050
1230
|
color: var(--reevit-text-secondary);
|
|
1051
1231
|
margin: 0;
|
|
1232
|
+
line-height: 1.5;
|
|
1052
1233
|
}
|
|
1053
1234
|
|
|
1054
1235
|
/* ===== PSP BRIDGE ===== */
|
|
@@ -1070,7 +1251,15 @@
|
|
|
1070
1251
|
|
|
1071
1252
|
/* ===== METHOD STEP ACTIONS ===== */
|
|
1072
1253
|
.reevit-method-step__actions {
|
|
1073
|
-
margin-top:
|
|
1254
|
+
margin-top: 14px;
|
|
1255
|
+
}
|
|
1256
|
+
|
|
1257
|
+
/* When logos are shown inside icon-wrapper in list mode, remove the bg container */
|
|
1258
|
+
.reevit-method-option--list .reevit-method-option__icon-wrapper:has(.reevit-method-option__logos) {
|
|
1259
|
+
background: transparent;
|
|
1260
|
+
width: auto;
|
|
1261
|
+
height: auto;
|
|
1262
|
+
border-radius: 0;
|
|
1074
1263
|
}
|
|
1075
1264
|
|
|
1076
1265
|
/* ===== STRIPE BRIDGE ===== */
|
|
@@ -1134,39 +1323,43 @@
|
|
|
1134
1323
|
align-items: center;
|
|
1135
1324
|
justify-content: center;
|
|
1136
1325
|
gap: 6px;
|
|
1137
|
-
padding: 12px
|
|
1326
|
+
padding: 12px 20px;
|
|
1138
1327
|
font-size: 13px;
|
|
1139
1328
|
font-weight: 600;
|
|
1140
1329
|
border-radius: var(--reevit-radius);
|
|
1141
1330
|
cursor: pointer;
|
|
1142
|
-
transition: all 0.
|
|
1331
|
+
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
1143
1332
|
font-family: var(--reevit-font);
|
|
1144
1333
|
min-height: 44px;
|
|
1145
1334
|
letter-spacing: -0.01em;
|
|
1146
|
-
background: var(--reevit-primary);
|
|
1335
|
+
background: linear-gradient(180deg, var(--reevit-primary), var(--reevit-primary-hover));
|
|
1147
1336
|
color: var(--reevit-primary-foreground);
|
|
1148
|
-
border: 1px solid color-mix(in srgb, var(--reevit-primary) 60%,
|
|
1337
|
+
border: 1px solid color-mix(in srgb, var(--reevit-primary) 60%, transparent);
|
|
1338
|
+
box-shadow: var(--reevit-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
1149
1339
|
}
|
|
1150
1340
|
|
|
1151
1341
|
.reevit-submit-btn:hover:not(:disabled) {
|
|
1152
|
-
background: var(--reevit-primary-hover);
|
|
1342
|
+
background: linear-gradient(180deg, var(--reevit-primary-hover), color-mix(in srgb, var(--reevit-primary-hover) 85%, black));
|
|
1153
1343
|
border-color: var(--reevit-primary-hover);
|
|
1344
|
+
transform: translateY(-1px);
|
|
1345
|
+
box-shadow: var(--reevit-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
1154
1346
|
}
|
|
1155
1347
|
|
|
1156
|
-
.reevit-submit-btn:focus:not(:disabled) {
|
|
1157
|
-
outline:
|
|
1158
|
-
|
|
1159
|
-
box-shadow: 0 0 0 3px color-mix(in srgb, var(--reevit-primary) 25%, transparent);
|
|
1348
|
+
.reevit-submit-btn:focus-visible:not(:disabled) {
|
|
1349
|
+
outline: 2px solid var(--reevit-primary);
|
|
1350
|
+
outline-offset: 2px;
|
|
1160
1351
|
}
|
|
1161
1352
|
|
|
1162
1353
|
.reevit-submit-btn:active:not(:disabled) {
|
|
1163
1354
|
background: var(--reevit-primary-hover);
|
|
1164
|
-
transform: scale(0.
|
|
1355
|
+
transform: translateY(0) scale(0.97);
|
|
1356
|
+
box-shadow: var(--reevit-shadow-sm);
|
|
1165
1357
|
}
|
|
1166
1358
|
|
|
1167
1359
|
.reevit-submit-btn:disabled {
|
|
1168
|
-
opacity: 0.
|
|
1360
|
+
opacity: 0.4;
|
|
1169
1361
|
cursor: not-allowed;
|
|
1362
|
+
box-shadow: none;
|
|
1170
1363
|
}
|
|
1171
1364
|
|
|
1172
1365
|
/* Cancel Button - Secondary action */
|
|
@@ -1175,12 +1368,12 @@
|
|
|
1175
1368
|
align-items: center;
|
|
1176
1369
|
justify-content: center;
|
|
1177
1370
|
gap: 6px;
|
|
1178
|
-
padding: 12px
|
|
1371
|
+
padding: 12px 20px;
|
|
1179
1372
|
font-size: 13px;
|
|
1180
1373
|
font-weight: 600;
|
|
1181
1374
|
border-radius: var(--reevit-radius);
|
|
1182
1375
|
cursor: pointer;
|
|
1183
|
-
transition: all 0.
|
|
1376
|
+
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
1184
1377
|
font-family: var(--reevit-font);
|
|
1185
1378
|
min-height: 44px;
|
|
1186
1379
|
letter-spacing: -0.01em;
|
|
@@ -1190,52 +1383,73 @@
|
|
|
1190
1383
|
}
|
|
1191
1384
|
|
|
1192
1385
|
.reevit-cancel-btn:hover:not(:disabled) {
|
|
1193
|
-
background: transparent;
|
|
1194
|
-
border-color: var(--reevit-text);
|
|
1386
|
+
background: color-mix(in srgb, var(--reevit-text) 4%, transparent);
|
|
1387
|
+
border-color: color-mix(in srgb, var(--reevit-text) 20%, var(--reevit-border));
|
|
1195
1388
|
}
|
|
1196
1389
|
|
|
1197
|
-
.reevit-cancel-btn:focus:not(:disabled) {
|
|
1198
|
-
outline:
|
|
1199
|
-
|
|
1200
|
-
box-shadow: 0 0 0 2px var(--reevit-border);
|
|
1390
|
+
.reevit-cancel-btn:focus-visible:not(:disabled) {
|
|
1391
|
+
outline: 2px solid var(--reevit-text);
|
|
1392
|
+
outline-offset: 2px;
|
|
1201
1393
|
}
|
|
1202
1394
|
|
|
1203
1395
|
.reevit-cancel-btn:active:not(:disabled) {
|
|
1204
|
-
transform: scale(0.
|
|
1396
|
+
transform: scale(0.97);
|
|
1205
1397
|
}
|
|
1206
1398
|
|
|
1207
1399
|
.reevit-cancel-btn:disabled {
|
|
1208
|
-
opacity: 0.
|
|
1400
|
+
opacity: 0.4;
|
|
1209
1401
|
cursor: not-allowed;
|
|
1210
1402
|
}
|
|
1211
1403
|
|
|
1212
|
-
/*
|
|
1213
|
-
@media (
|
|
1214
|
-
.reevit-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
}
|
|
1218
|
-
|
|
1219
|
-
.reevit-submit-btn:hover:not(:disabled) {
|
|
1220
|
-
background: var(--reevit-primary-hover);
|
|
1221
|
-
}
|
|
1222
|
-
|
|
1223
|
-
.reevit-submit-btn:active:not(:disabled) {
|
|
1224
|
-
background: var(--reevit-primary-hover);
|
|
1404
|
+
/* ===== RESPONSIVE — Bottom sheet on mobile ===== */
|
|
1405
|
+
@media (max-width: 480px) {
|
|
1406
|
+
.reevit-overlay {
|
|
1407
|
+
align-items: flex-end;
|
|
1408
|
+
padding: 0;
|
|
1225
1409
|
}
|
|
1226
|
-
}
|
|
1227
1410
|
|
|
1228
|
-
/* ===== RESPONSIVE ===== */
|
|
1229
|
-
@media (max-width: 480px) {
|
|
1230
1411
|
.reevit-modal {
|
|
1231
1412
|
max-width: 100%;
|
|
1232
|
-
max-height:
|
|
1413
|
+
max-height: 92vh;
|
|
1414
|
+
border-radius: var(--reevit-radius-lg) var(--reevit-radius-lg) 0 0;
|
|
1415
|
+
animation: reevit-sheet-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
1416
|
+
}
|
|
1417
|
+
|
|
1418
|
+
.reevit-modal::before {
|
|
1233
1419
|
border-radius: var(--reevit-radius-lg) var(--reevit-radius-lg) 0 0;
|
|
1234
|
-
|
|
1420
|
+
}
|
|
1421
|
+
|
|
1422
|
+
/* Drag handle indicator */
|
|
1423
|
+
.reevit-modal__header::before {
|
|
1424
|
+
content: '';
|
|
1425
|
+
position: absolute;
|
|
1426
|
+
top: 8px;
|
|
1427
|
+
left: 50%;
|
|
1428
|
+
transform: translateX(-50%);
|
|
1429
|
+
width: 36px;
|
|
1430
|
+
height: 4px;
|
|
1431
|
+
border-radius: 2px;
|
|
1432
|
+
background: var(--reevit-border);
|
|
1433
|
+
}
|
|
1434
|
+
|
|
1435
|
+
.reevit-modal__header {
|
|
1436
|
+
position: relative;
|
|
1437
|
+
padding-top: 24px;
|
|
1438
|
+
}
|
|
1439
|
+
|
|
1440
|
+
@keyframes reevit-sheet-up {
|
|
1441
|
+
from {
|
|
1442
|
+
opacity: 0;
|
|
1443
|
+
transform: translateY(100%);
|
|
1444
|
+
}
|
|
1445
|
+
to {
|
|
1446
|
+
opacity: 1;
|
|
1447
|
+
transform: translateY(0);
|
|
1448
|
+
}
|
|
1235
1449
|
}
|
|
1236
1450
|
|
|
1237
1451
|
.reevit-modal__amount-value {
|
|
1238
|
-
font-size:
|
|
1452
|
+
font-size: 30px;
|
|
1239
1453
|
}
|
|
1240
1454
|
|
|
1241
1455
|
.reevit-momo-form__networks {
|
|
@@ -1249,4 +1463,10 @@
|
|
|
1249
1463
|
.reevit-btn--secondary {
|
|
1250
1464
|
flex: none;
|
|
1251
1465
|
}
|
|
1466
|
+
|
|
1467
|
+
/* Ensure touch targets */
|
|
1468
|
+
.reevit-method-option--list,
|
|
1469
|
+
.reevit-psp-option {
|
|
1470
|
+
min-height: 52px;
|
|
1471
|
+
}
|
|
1252
1472
|
}
|