@dmitriikapustin/ui 0.2.1 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +13 -4
  2. package/dist/index.cjs +6392 -1485
  3. package/dist/index.css +145 -4597
  4. package/dist/index.d.cts +89 -40
  5. package/dist/index.d.ts +89 -40
  6. package/dist/index.js +6388 -1486
  7. package/dist/styles.css +5 -0
  8. package/package.json +6 -9
package/dist/index.css CHANGED
@@ -1,4613 +1,161 @@
1
- @charset "UTF-8";
2
-
3
- /* src/atoms/Spinner.module.scss */
4
- @keyframes Spinner_module_spin {
5
- to {
6
- transform: rotate(360deg);
7
- }
8
- }
9
- .Spinner_module_root {
10
- display: inline-flex;
11
- align-items: center;
12
- justify-content: center;
13
- }
14
- .Spinner_module_fallback {
15
- border-radius: 9999px;
16
- border: 2px solid var(--border-color);
17
- border-top-color: var(--fg);
18
- animation: Spinner_module_spin 1s linear infinite;
19
- }
20
-
21
- /* src/atoms/Button.module.scss */
22
- .Button_module_root {
23
- display: inline-flex;
24
- align-items: center;
25
- justify-content: center;
26
- font-weight: 500;
27
- transition: all var(--transition-fast);
28
- cursor: pointer;
29
- user-select: none;
30
- white-space: nowrap;
31
- }
32
- .Button_module_primary {
33
- background: var(--fg);
34
- color: var(--bg);
35
- border: 1px solid var(--bg);
36
- box-shadow: var(--shadow-sm);
37
- }
38
- .Button_module_primary:hover {
39
- opacity: 0.9;
40
- }
41
- .Button_module_primary:active {
42
- opacity: 0.8;
43
- }
44
- .Button_module_secondary {
45
- background: var(--bg-tertiary);
46
- color: var(--fg);
47
- }
48
- .Button_module_secondary:hover {
49
- background: var(--border-color);
50
- }
51
- .Button_module_secondary:active {
52
- background: var(--border-color-strong);
53
- }
54
- .Button_module_outline {
55
- border: 1px solid var(--fg-secondary);
56
- color: var(--fg-secondary);
57
- }
58
- .Button_module_outline:hover {
59
- background: var(--bg-tertiary);
60
- }
61
- .Button_module_outline:active {
62
- background: var(--border-color);
63
- }
64
- .Button_module_ghost {
65
- color: var(--fg-secondary);
66
- }
67
- .Button_module_ghost:hover {
68
- color: var(--fg);
69
- background: var(--bg-tertiary);
70
- }
71
- .Button_module_ghost:active {
72
- background: var(--border-color);
73
- }
74
- .Button_module_sm {
75
- font-size: 13px;
76
- padding-inline: 1rem;
77
- padding-block: 0.5rem;
78
- border-radius: 9999px;
79
- letter-spacing: -0.25px;
80
- gap: 0.375rem;
81
- }
82
- .Button_module_md {
83
- font-size: 13px;
84
- padding-inline: 1rem;
85
- padding-block: 0.5rem;
86
- border-radius: 9999px;
87
- letter-spacing: -0.25px;
88
- gap: 0.5rem;
89
- }
90
- .Button_module_disabled {
91
- opacity: 0.5;
92
- cursor: not-allowed;
93
- pointer-events: none;
94
- }
95
-
96
- /* src/atoms/Input.module.scss */
97
- .Input_module_wrapper {
98
- display: flex;
99
- flex-direction: column;
100
- gap: 0.375rem;
101
- }
102
- .Input_module_label {
103
- font-size: 13px;
104
- font-weight: 500;
105
- color: var(--fg);
106
- letter-spacing: -0.25px;
107
- }
108
- .Input_module_inputWrap {
109
- position: relative;
110
- }
111
- .Input_module_input {
112
- width: 100%;
113
- border: 1px solid var(--fg-muted);
114
- background: var(--bg);
115
- padding-inline: 15px;
116
- padding-block: 0.75rem;
117
- font-size: 13px;
118
- letter-spacing: -0.25px;
119
- color: var(--fg-secondary);
120
- transition: all var(--transition-fast);
121
- border-radius: 9999px;
122
- }
123
- .Input_module_input::placeholder {
124
- color: var(--fg-muted);
125
- }
126
- .Input_module_input:focus {
127
- outline: none;
128
- border-color: var(--fg);
129
- }
130
- .Input_module_hasIconLeft {
131
- padding-left: 2.5rem;
132
- }
133
- .Input_module_hasIconRight {
134
- padding-right: 2.5rem;
135
- }
136
- .Input_module_iconLeft {
137
- position: absolute;
138
- left: 0.875rem;
139
- top: 50%;
140
- transform: translateY(-50%);
141
- color: var(--fg-muted);
142
- }
143
- .Input_module_iconRight {
144
- position: absolute;
145
- right: 0.875rem;
146
- top: 50%;
147
- transform: translateY(-50%);
148
- color: var(--fg-muted);
149
- }
150
- .Input_module_error {
151
- border-color: var(--color-error);
152
- }
153
- .Input_module_error:focus {
154
- border-color: var(--color-error);
155
- }
156
- .Input_module_errorText {
157
- font-size: 13px;
158
- letter-spacing: -0.25px;
159
- color: var(--color-error);
160
- }
161
-
162
- /* src/atoms/Badge.module.scss */
163
- .Badge_module_root {
164
- display: inline-flex;
165
- align-items: center;
166
- padding-inline: 0.625rem;
167
- padding-block: 0.125rem;
168
- border-radius: 9999px;
169
- font-size: 13px;
170
- font-weight: 600;
171
- letter-spacing: -0.25px;
172
- }
173
- .Badge_module_default {
174
- background: var(--bg-tertiary);
175
- color: var(--fg);
176
- }
177
- .Badge_module_success {
178
- background: var(--bg-tertiary);
179
- color: var(--color-success);
180
- }
181
- .Badge_module_warning {
182
- background: var(--bg-tertiary);
183
- color: var(--color-warning);
184
- }
185
- .Badge_module_error {
186
- background: var(--bg-tertiary);
187
- color: var(--color-error);
188
- }
189
- .Badge_module_info {
190
- background: var(--bg-tertiary);
191
- color: var(--color-info);
192
- }
193
-
194
- /* src/atoms/Tag.module.scss */
195
- .Tag_module_root {
196
- display: inline-flex;
197
- align-items: center;
198
- gap: 0.375rem;
199
- padding-inline: 0.75rem;
200
- padding-block: 0.25rem;
201
- border-radius: 9999px;
202
- font-size: 13px;
203
- font-weight: 500;
204
- letter-spacing: -0.25px;
205
- border: 1px solid;
206
- }
207
- .Tag_module_default {
208
- background: var(--bg-tertiary);
209
- color: var(--fg-secondary);
210
- border-color: var(--border-color);
211
- }
212
- .Tag_module_primary {
213
- background: var(--bg-tertiary);
214
- color: var(--fg);
215
- border-color: var(--border-color-strong);
1
+ /* css-inject-plain:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/styles.css */
2
+ :root {
3
+ --neutral-50: #fafafa;
4
+ --neutral-100: #f7f7f7;
5
+ --neutral-200: #f3f3f3;
6
+ --neutral-300: #e0e0e0;
7
+ --neutral-400: #babbbd;
8
+ --neutral-500: #737373;
9
+ --neutral-600: #4c4c4c;
10
+ --neutral-700: #404040;
11
+ --neutral-800: #262626;
12
+ --neutral-900: #18181b;
13
+ --neutral-950: #0a0a0a;
14
+ --brand-primary: #18181b;
15
+ --brand-primary-light: #4c4c4c;
16
+ --brand-primary-dark: #0a0a0a;
17
+ --brand-secondary: #f3f3f3;
18
+ --brand-secondary-light: #f7f7f7;
19
+ --brand-secondary-dark: #e0e0e0;
20
+ --brand-accent: #18181b;
21
+ --brand-accent-light: #4c4c4c;
22
+ --brand-accent-dark: #0a0a0a;
23
+ --color-accent: #02ad41;
24
+ --color-accent-light: #34c759;
25
+ --color-accent-dark: #029236;
26
+ --color-success: #22c55e;
27
+ --color-success-light: #86efac;
28
+ --color-success-dark: #16a34a;
29
+ --color-warning: #f59e0b;
30
+ --color-warning-light: #fcd34d;
31
+ --color-warning-dark: #d97706;
32
+ --color-error: #ef4444;
33
+ --color-error-light: #fca5a5;
34
+ --color-error-dark: #dc2626;
35
+ --color-info: #3b82f6;
36
+ --color-info-light: #93c5fd;
37
+ --color-info-dark: #2563eb;
38
+ --bg: #ffffff;
39
+ --bg-secondary: #f7f7f7;
40
+ --bg-tertiary: #f3f3f3;
41
+ --fg: #18181b;
42
+ --fg-secondary: #4c4c4c;
43
+ --fg-muted: #babbbd;
44
+ --border-color: #e0e0e0;
45
+ --border-color-strong: #babbbd;
46
+ --font-sans:
47
+ var(--font-onest),
48
+ system-ui,
49
+ -apple-system,
50
+ sans-serif;
51
+ --font-mono:
52
+ "Geist Mono",
53
+ "SF Mono",
54
+ "Fira Code",
55
+ monospace;
56
+ --text-xs: 0.75rem;
57
+ --text-sm: 0.875rem;
58
+ --text-base: 1rem;
59
+ --text-lg: 1.125rem;
60
+ --text-xl: 1.25rem;
61
+ --text-2xl: 1.5rem;
62
+ --text-3xl: 1.875rem;
63
+ --text-4xl: 2.25rem;
64
+ --text-5xl: 3rem;
65
+ --text-6xl: 3.75rem;
66
+ --space-1: 0.25rem;
67
+ --space-2: 0.5rem;
68
+ --space-3: 0.75rem;
69
+ --space-4: 1rem;
70
+ --space-5: 1.25rem;
71
+ --space-6: 1.5rem;
72
+ --space-8: 2rem;
73
+ --space-10: 2.5rem;
74
+ --space-12: 3rem;
75
+ --space-16: 4rem;
76
+ --space-20: 5rem;
77
+ --space-24: 6rem;
78
+ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
79
+ --shadow-sm: 0 7px 7px 0 rgb(0 0 0 / 0.07);
80
+ --shadow-md: 0 7px 13px 0 rgb(0 0 0 / 0.05);
81
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
82
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
83
+ --radius-sm: 0.25rem;
84
+ --radius-md: 0.5rem;
85
+ --radius-lg: 1rem;
86
+ --radius-xl: 1rem;
87
+ --radius-2xl: 1rem;
88
+ --radius-full: 9999px;
89
+ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
90
+ --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
91
+ --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
92
+ --button-primary-border-gradient:
93
+ linear-gradient(
94
+ 275.38deg,
95
+ rgba(255, 255, 255, 0.07) 1.53%,
96
+ rgba(255, 255, 255, 0.028) 94.58%);
97
+ }
98
+ [data-theme=dark] {
99
+ --bg: #09090b;
100
+ --bg-secondary: #18181b;
101
+ --bg-tertiary: #27272a;
102
+ --fg: #fafafa;
103
+ --fg-secondary: #a1a1aa;
104
+ --fg-muted: #71717a;
105
+ --border-color: #27272a;
106
+ --border-color-strong: #3f3f46;
107
+ --brand-primary: #818cf8;
108
+ --brand-primary-light: #a5b4fc;
109
+ --brand-primary-dark: #6366f1;
110
+ --brand-secondary: #f472b6;
111
+ --brand-secondary-light: #f9a8d4;
112
+ --brand-secondary-dark: #ec4899;
113
+ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
114
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
115
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
116
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
117
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
118
+ --button-primary-border-gradient:
119
+ linear-gradient(
120
+ 275.38deg,
121
+ rgba(255, 255, 255, 0.04) 1.53%,
122
+ rgba(255, 255, 255, 0.02) 94.58%);
216
123
  }
217
- .Tag_module_success {
218
- background: var(--bg-tertiary);
219
- color: var(--color-success);
220
- border-color: var(--border-color);
124
+ [data-theme=dark] .logo-img {
125
+ filter: invert(1);
221
126
  }
222
- .Tag_module_warning {
223
- background: var(--bg-tertiary);
224
- color: var(--color-warning);
225
- border-color: var(--border-color);
127
+ :root,
128
+ :host {
129
+ --font-sans: var(--font-sans);
130
+ --font-mono: var(--font-mono);
226
131
  }
227
- .Tag_module_error {
228
- background: var(--bg-tertiary);
229
- color: var(--color-error);
132
+ * {
230
133
  border-color: var(--border-color);
231
134
  }
232
- .Tag_module_closeBtn {
233
- cursor: pointer;
234
- transition: opacity 200ms ease;
235
- }
236
- .Tag_module_closeBtn:hover {
237
- opacity: 0.7;
238
- }
239
-
240
- /* src/atoms/Toggle.module.scss */
241
- .Toggle_module_root {
242
- display: inline-flex;
243
- align-items: center;
244
- gap: 0.625rem;
245
- cursor: pointer;
246
- }
247
- .Toggle_module_track {
248
- position: relative;
249
- display: inline-flex;
250
- align-items: center;
251
- height: 1.5rem;
252
- width: 2.75rem;
253
- flex-shrink: 0;
254
- border-radius: 9999px;
255
- padding-inline: 2px;
256
- transition: background-color 200ms ease-in-out;
257
- cursor: pointer;
258
- }
259
- .Toggle_module_track:focus {
260
- outline: none;
261
- }
262
- .Toggle_module_trackOn {
263
- background: var(--color-accent);
264
- }
265
- .Toggle_module_trackOff {
266
- background: var(--border-color);
267
- }
268
- .Toggle_module_knob {
269
- pointer-events: none;
270
- display: inline-block;
271
- height: 1.25rem;
272
- width: 1.25rem;
273
- border-radius: 9999px;
274
- background: white;
275
- transition: transform 200ms ease-in-out;
276
- }
277
- .Toggle_module_knobOn {
278
- transform: translateX(20px);
279
- }
280
- .Toggle_module_knobOff {
281
- transform: translateX(0);
282
- }
283
- .Toggle_module_label {
284
- font-size: 13px;
285
- font-weight: 500;
286
- color: var(--fg);
287
- letter-spacing: -0.25px;
288
- }
289
- .Toggle_module_disabled {
290
- opacity: 0.5;
291
- cursor: not-allowed;
292
- }
293
-
294
- /* src/atoms/Avatar.module.scss */
295
- .Avatar_module_root {
296
- border-radius: 9999px;
297
- object-fit: cover;
298
- }
299
- .Avatar_module_initials {
300
- border-radius: 9999px;
301
- background: var(--bg-tertiary);
302
- border: 1px solid var(--border-color);
303
- display: flex;
304
- align-items: center;
305
- justify-content: center;
306
- }
307
- .Avatar_module_initialsText {
308
- font-weight: 500;
309
- color: var(--fg-secondary);
310
- user-select: none;
311
- }
312
- .Avatar_module_sm {
313
- width: 32px;
314
- height: 32px;
315
- }
316
- .Avatar_module_md {
317
- width: 40px;
318
- height: 40px;
319
- }
320
- .Avatar_module_lg {
321
- width: 48px;
322
- height: 48px;
323
- }
324
- .Avatar_module_xl {
325
- width: 64px;
326
- height: 64px;
327
- }
328
- .Avatar_module_textSm {
329
- font-size: 12px;
330
- }
331
- .Avatar_module_textMd {
332
- font-size: 14px;
333
- }
334
- .Avatar_module_textLg {
335
- font-size: 16px;
336
- }
337
- .Avatar_module_textXl {
338
- font-size: 18px;
339
- }
340
-
341
- /* src/atoms/Divider.module.scss */
342
- .Divider_module_root {
343
- border: none;
344
- height: 1px;
345
- background: var(--border-color);
346
- }
347
- .Divider_module_withLabel {
348
- display: flex;
349
- align-items: center;
350
- gap: 1rem;
351
- }
352
- .Divider_module_line {
353
- flex: 1;
354
- height: 1px;
355
- background: var(--border-color);
356
- }
357
- .Divider_module_label {
358
- font-size: 12px;
359
- font-weight: 500;
360
- color: var(--fg-muted);
361
- text-transform: uppercase;
362
- letter-spacing: 0.05em;
363
- }
364
-
365
- /* src/atoms/MenuItem.module.scss */
366
- .MenuItem_module_root {
367
- display: inline-flex;
368
- align-items: center;
369
- gap: 6px;
370
- padding-inline: 4px;
371
- padding-block: 2px;
372
- font-size: 13px;
373
- font-weight: 500;
374
- letter-spacing: -0.25px;
375
- cursor: pointer;
376
- border: none;
377
- text-align: left;
378
- white-space: nowrap;
379
- transition: color 150ms;
380
- background: transparent;
381
- color: var(--fg-muted);
382
- }
383
- .MenuItem_module_root:hover {
384
- color: var(--fg-secondary);
385
- }
386
- .MenuItem_module_icon {
387
- display: inline-flex;
388
- align-items: center;
389
- justify-content: center;
390
- flex-shrink: 0;
391
- width: 16px;
392
- height: 16px;
393
- }
394
- .MenuItem_module_icon svg {
395
- width: 100%;
396
- height: 100%;
397
- }
398
- .MenuItem_module_active {
399
- background: var(--bg-secondary);
400
- color: var(--fg);
401
- }
402
- .MenuItem_module_active:hover {
403
- color: var(--fg);
404
- }
405
-
406
- /* src/atoms/IconButton.module.scss */
407
- .IconButton_module_root {
408
- display: inline-flex;
409
- align-items: center;
410
- justify-content: center;
411
- width: 36px;
412
- height: 36px;
413
- border-radius: 9999px;
414
- transition: all var(--transition-fast);
415
- cursor: pointer;
416
- flex-shrink: 0;
417
- border: none;
418
- }
419
- .IconButton_module_primary {
420
- background: var(--fg);
421
- color: var(--bg);
422
- border: 1px solid var(--bg);
423
- box-shadow: var(--shadow-sm);
424
- }
425
- .IconButton_module_secondary {
426
- background: var(--bg-tertiary);
427
- color: var(--fg-secondary);
428
- }
429
- .IconButton_module_clear {
430
- background: transparent;
431
- color: var(--fg-secondary);
432
- box-shadow: var(--shadow-sm);
433
- }
434
- .IconButton_module_disabled {
435
- background: var(--bg-tertiary);
436
- color: var(--fg-muted);
437
- opacity: 0.5;
438
- cursor: not-allowed;
439
- }
440
- .IconButton_module_contrast {
441
- background: var(--border-color);
442
- color: var(--fg-secondary);
443
- }
444
- .IconButton_module_isDisabled {
445
- cursor: not-allowed;
446
- }
447
-
448
- /* src/atoms/Logo.module.scss */
449
- .Logo_module_short {
450
- width: 19px;
451
- height: 20px;
452
- }
453
- .Logo_module_full {
454
- height: 20px;
455
- width: 130px;
456
- }
457
- .Logo_module_third {
458
- display: flex;
459
- align-items: center;
460
- gap: 0.375rem;
461
- }
462
- .Logo_module_thirdText {
463
- font-size: 13px;
464
- font-weight: 500;
465
- color: var(--fg);
466
- letter-spacing: -0.25px;
467
- }
468
-
469
- /* src/atoms/StatBadge.module.scss */
470
- .StatBadge_module_root {
471
- display: inline-flex;
472
- align-items: center;
473
- font-size: 13px;
474
- font-weight: 500;
475
- color: var(--fg-secondary);
476
- letter-spacing: -0.25px;
477
- white-space: nowrap;
478
- }
479
- .StatBadge_module_bracket {
480
- color: var(--fg-muted);
481
- }
482
-
483
- /* src/atoms/Textarea.module.scss */
484
- .Textarea_module_wrapper {
485
- display: flex;
486
- flex-direction: column;
487
- gap: 0.375rem;
488
- }
489
- .Textarea_module_label {
490
- font-size: 13px;
491
- font-weight: 500;
492
- color: var(--fg);
493
- letter-spacing: -0.25px;
494
- }
495
- .Textarea_module_textarea {
496
- width: 100%;
497
- border: 1px solid var(--fg-muted);
498
- background: var(--bg);
499
- padding-inline: 15px;
500
- padding-block: 0.75rem;
501
- font-size: 13px;
502
- letter-spacing: -0.25px;
503
- color: var(--fg-secondary);
504
- transition: all var(--transition-fast);
505
- border-radius: var(--radius-lg);
506
- resize: vertical;
507
- }
508
- .Textarea_module_textarea::placeholder {
509
- color: var(--fg-muted);
510
- }
511
- .Textarea_module_textarea:focus {
512
- outline: none;
513
- border-color: var(--fg);
514
- }
515
- .Textarea_module_error {
516
- border-color: var(--color-error);
517
- }
518
- .Textarea_module_error:focus {
519
- border-color: var(--color-error);
520
- }
521
- .Textarea_module_errorText {
522
- font-size: 13px;
523
- letter-spacing: -0.25px;
524
- color: var(--color-error);
525
- }
526
-
527
- /* src/atoms/Select.module.scss */
528
- .Select_module_wrapper {
529
- display: flex;
530
- flex-direction: column;
531
- gap: 0.375rem;
532
- }
533
- .Select_module_label {
534
- font-size: 13px;
535
- font-weight: 500;
536
- color: var(--fg);
537
- letter-spacing: -0.25px;
538
- }
539
- .Select_module_selectWrap {
540
- position: relative;
541
- }
542
- .Select_module_select {
543
- width: 100%;
544
- appearance: none;
545
- border: 1px solid var(--fg-muted);
135
+ body {
546
136
  background: var(--bg);
547
- padding-inline: 15px;
548
- padding-block: 0.75rem;
549
- padding-right: 2.5rem;
550
- font-size: 13px;
551
- letter-spacing: -0.25px;
552
- color: var(--fg-secondary);
553
- transition: all var(--transition-fast);
554
- border-radius: 9999px;
555
- }
556
- .Select_module_select:focus {
557
- outline: none;
558
- border-color: var(--fg);
559
- }
560
- .Select_module_chevron {
561
- position: absolute;
562
- right: 0.875rem;
563
- top: 50%;
564
- transform: translateY(-50%);
565
- pointer-events: none;
566
- color: var(--fg-muted);
567
- }
568
- .Select_module_error {
569
- border-color: var(--color-error);
570
- }
571
- .Select_module_error:focus {
572
- border-color: var(--color-error);
573
- }
574
- .Select_module_errorText {
575
- font-size: 13px;
576
- letter-spacing: -0.25px;
577
- color: var(--color-error);
578
- }
579
-
580
- /* src/atoms/Checkbox.module.scss */
581
- .Checkbox_module_root {
582
- display: inline-flex;
583
- align-items: center;
584
- gap: 0.625rem;
585
- cursor: pointer;
586
- }
587
- .Checkbox_module_hiddenInput {
588
- position: absolute;
589
- opacity: 0;
590
- width: 0;
591
- height: 0;
592
- }
593
- .Checkbox_module_box {
594
- display: flex;
595
- align-items: center;
596
- justify-content: center;
597
- width: 18px;
598
- height: 18px;
599
- border-radius: 5px;
600
- border: 1px solid;
601
- transition:
602
- color 200ms,
603
- background-color 200ms,
604
- border-color 200ms;
605
- flex-shrink: 0;
606
- }
607
- .Checkbox_module_checked {
608
- background: var(--color-accent);
609
- border-color: var(--color-accent);
610
- }
611
- .Checkbox_module_unchecked {
612
- border-color: var(--fg-muted);
613
- background: transparent;
614
- }
615
- .Checkbox_module_label {
616
- font-size: 13px;
617
- font-weight: 500;
618
137
  color: var(--fg);
619
- letter-spacing: -0.25px;
620
- }
621
- .Checkbox_module_disabled {
622
- opacity: 0.5;
623
- cursor: not-allowed;
138
+ font-family: var(--font-sans);
139
+ line-height: 1.6;
140
+ -webkit-font-smoothing: antialiased;
141
+ -moz-osx-font-smoothing: grayscale;
624
142
  }
625
-
626
- /* src/atoms/Radio.module.scss */
627
- .Radio_module_root {
628
- display: inline-flex;
629
- align-items: center;
630
- gap: 0.625rem;
631
- cursor: pointer;
632
- }
633
- .Radio_module_hiddenInput {
634
- position: absolute;
635
- opacity: 0;
636
- width: 0;
637
- height: 0;
638
- }
639
- .Radio_module_circle {
640
- display: flex;
641
- align-items: center;
642
- justify-content: center;
643
- width: 18px;
644
- height: 18px;
645
- border-radius: 9999px;
646
- border: 1px solid;
647
- transition:
648
- color 200ms,
649
- background-color 200ms,
650
- border-color 200ms;
651
- flex-shrink: 0;
652
- }
653
- .Radio_module_checked {
654
- border-color: var(--color-accent);
655
- }
656
- .Radio_module_unchecked {
657
- border-color: var(--fg-muted);
143
+ ::selection {
144
+ background: var(--brand-primary);
145
+ color: white;
658
146
  }
659
- .Radio_module_dot {
147
+ ::-webkit-scrollbar {
660
148
  width: 8px;
661
149
  height: 8px;
662
- border-radius: 9999px;
663
- background: var(--color-accent);
664
- }
665
- .Radio_module_label {
666
- font-size: 13px;
667
- font-weight: 500;
668
- color: var(--fg);
669
- letter-spacing: -0.25px;
670
- }
671
- .Radio_module_disabled {
672
- opacity: 0.5;
673
- cursor: not-allowed;
674
- }
675
-
676
- /* src/atoms/Link.module.scss */
677
- .Link_module_root {
678
- font-size: 13px;
679
- letter-spacing: -0.25px;
680
- transition: color var(--transition-fast);
681
- display: inline-flex;
682
- align-items: center;
683
- gap: 0.25rem;
684
- }
685
- .Link_module_default {
686
- color: var(--color-accent);
687
- }
688
- .Link_module_default:hover {
689
- text-decoration: underline;
690
- }
691
- .Link_module_muted {
692
- color: var(--fg-muted);
693
- }
694
- .Link_module_muted:hover {
695
- color: var(--fg);
696
- }
697
- .Link_module_underline {
698
- color: var(--fg);
699
- text-decoration: underline;
700
- text-underline-offset: 2px;
701
- }
702
- .Link_module_underline:hover {
703
- color: var(--color-accent);
704
- }
705
-
706
- /* src/atoms/Tooltip.module.scss */
707
- .Tooltip_module_root {
708
- position: relative;
709
- display: inline-flex;
710
- }
711
- .Tooltip_module_root:hover .Tooltip_module_tooltip {
712
- visibility: visible;
713
- opacity: 1;
714
- }
715
- .Tooltip_module_tooltip {
716
- position: absolute;
717
- visibility: hidden;
718
- opacity: 0;
719
- transition: opacity 200ms ease;
720
- background: var(--fg);
721
- color: var(--bg);
722
- font-size: 11px;
723
- padding-inline: 0.5rem;
724
- padding-block: 0.25rem;
725
- border-radius: 0.375rem;
726
- white-space: nowrap;
727
- z-index: 50;
728
- pointer-events: none;
729
- }
730
- .Tooltip_module_top {
731
- bottom: 100%;
732
- left: 50%;
733
- transform: translateX(-50%);
734
- margin-bottom: 0.375rem;
735
- }
736
- .Tooltip_module_bottom {
737
- top: 100%;
738
- left: 50%;
739
- transform: translateX(-50%);
740
- margin-top: 0.375rem;
741
- }
742
- .Tooltip_module_left {
743
- right: 100%;
744
- top: 50%;
745
- transform: translateY(-50%);
746
- margin-right: 0.375rem;
747
- }
748
- .Tooltip_module_right {
749
- left: 100%;
750
- top: 50%;
751
- transform: translateY(-50%);
752
- margin-left: 0.375rem;
753
- }
754
-
755
- /* src/atoms/Skeleton.module.scss */
756
- @keyframes Skeleton_module_pulse {
757
- 0%, 100% {
758
- opacity: 1;
759
- }
760
- 50% {
761
- opacity: 0.5;
762
- }
763
- }
764
- .Skeleton_module_root {
765
- animation: Skeleton_module_pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
766
- background: var(--bg-tertiary);
767
- }
768
- .Skeleton_module_line {
769
- height: 1rem;
770
- width: 100%;
771
- border-radius: 9999px;
772
- }
773
- .Skeleton_module_circle {
774
- border-radius: 9999px;
775
- }
776
- .Skeleton_module_rect {
777
- border-radius: var(--radius-lg);
778
- }
779
-
780
- /* src/atoms/TicketButton.module.scss */
781
- .TicketButton_module_root {
782
- position: relative;
783
- display: inline-flex;
784
- align-items: stretch;
785
- cursor: pointer;
786
- border: none;
787
- background: transparent;
788
- padding: 0;
789
- user-select: none;
790
- }
791
- .TicketButton_module_root:hover .TicketButton_module_stub {
792
- transform: translateX(6px);
793
- }
794
- .TicketButton_module_body {
795
- position: relative;
796
- display: flex;
797
- align-items: center;
798
- }
799
- .TicketButton_module_bodySvg {
800
- position: absolute;
801
- inset: 0;
802
- width: 100%;
803
- height: 100%;
804
- }
805
- .TicketButton_module_bodyText {
806
- position: relative;
807
- z-index: 10;
808
- padding-inline: 1.5rem;
809
- padding-block: 1rem;
810
- font-size: 13px;
811
- font-weight: 600;
812
- letter-spacing: -0.25px;
813
- white-space: nowrap;
814
- }
815
- .TicketButton_module_stub {
816
- position: relative;
817
- display: flex;
818
- align-items: center;
819
- transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
820
- }
821
- .TicketButton_module_stubSvg {
822
- position: absolute;
823
- inset: 0;
824
- width: 100%;
825
- height: 100%;
826
- }
827
- .TicketButton_module_stubIcon {
828
- position: relative;
829
- z-index: 10;
830
- width: 56px;
831
- height: 56px;
832
- display: flex;
833
- align-items: center;
834
- justify-content: center;
835
- }
836
-
837
- /* src/molecules/Card.module.scss */
838
- .Card_module_root {
839
- border-radius: var(--radius-xl);
840
- border: 1px solid var(--border-color);
841
- background: var(--bg);
842
- overflow: hidden;
843
- box-shadow: var(--shadow-xs);
844
- transition: all var(--transition-base);
845
- }
846
- .Card_module_root:hover {
847
- box-shadow: var(--shadow-md);
848
- transform: translateY(-2px);
849
- }
850
- .Card_module_imageWrapper {
851
- aspect-ratio: 16/9;
852
- overflow: hidden;
853
- }
854
- .Card_module_image {
855
- width: 100%;
856
- height: 100%;
857
- object-fit: cover;
858
- }
859
- .Card_module_body {
860
- padding: 1.25rem;
861
- }
862
- .Card_module_title {
863
- font-size: 1rem;
864
- font-weight: 600;
865
- color: var(--fg);
866
- margin-bottom: 0.25rem;
867
- }
868
- .Card_module_description {
869
- font-size: 0.875rem;
870
- color: var(--fg-secondary);
871
- line-height: 1.625;
872
- }
873
- .Card_module_footer {
874
- padding-inline: 1.25rem;
875
- padding-block: 0.75rem;
876
- border-top: 1px solid var(--border-color);
877
- background: var(--bg-secondary);
878
- }
879
-
880
- /* src/molecules/FormField.module.scss */
881
- .FormField_module_root {
882
- display: flex;
883
- flex-direction: column;
884
- gap: 0.375rem;
885
- }
886
- .FormField_module_hint {
887
- font-size: 0.8125rem;
888
- color: var(--fg-muted);
889
- }
890
-
891
- /* src/molecules/SearchBar.module.scss */
892
- .SearchBar_module_root {
893
- position: relative;
894
- display: flex;
895
- align-items: center;
896
- }
897
- .SearchBar_module_searchIcon {
898
- position: absolute;
899
- left: 0.75rem;
900
- color: var(--fg-muted);
901
- }
902
- .SearchBar_module_input {
903
- width: 100%;
904
- border-radius: var(--radius-lg);
905
- border: 1px solid var(--border-color);
906
- background: var(--bg);
907
- padding: 0.625rem 2.5rem;
908
- font-size: 0.875rem;
909
- color: var(--fg);
910
- transition: all var(--transition-fast);
911
- outline: none;
912
- }
913
- .SearchBar_module_input::placeholder {
914
- color: var(--fg-muted);
915
- }
916
- .SearchBar_module_input:focus {
917
- outline: none;
918
- box-shadow: 0 0 0 2px var(--brand-primary);
919
- border-color: transparent;
920
- }
921
- .SearchBar_module_clearBtn {
922
- position: absolute;
923
- right: 0.75rem;
924
- color: var(--fg-muted);
925
- transition: color var(--transition-fast);
926
- cursor: pointer;
927
- background: none;
928
- border: none;
929
- padding: 0;
930
- }
931
- .SearchBar_module_clearBtn:hover {
932
- color: var(--fg);
933
- }
934
-
935
- /* src/molecules/Stat.module.scss */
936
- .Stat_module_root {
937
- display: flex;
938
- flex-direction: column;
939
- gap: 0.25rem;
940
- }
941
- .Stat_module_valueRow {
942
- display: flex;
943
- align-items: baseline;
944
- gap: 0.5rem;
945
- }
946
- .Stat_module_value {
947
- font-size: 1.5rem;
948
- font-weight: 700;
949
- color: var(--fg);
950
- }
951
- .Stat_module_trend {
952
- font-size: 0.875rem;
953
- font-weight: 500;
954
- }
955
- .Stat_module_positive {
956
- color: var(--color-success);
957
- }
958
- .Stat_module_negative {
959
- color: var(--color-error);
960
- }
961
- .Stat_module_label {
962
- font-size: 0.875rem;
963
- color: var(--fg-muted);
964
- }
965
-
966
- /* src/molecules/Alert.module.scss */
967
- .Alert_module_root {
968
- display: flex;
969
- gap: 0.75rem;
970
- padding: 1rem;
971
- border-radius: var(--radius-lg);
972
- border: 1px solid var(--border-color);
973
- background: var(--bg-secondary);
974
- }
975
- .Alert_module_icon {
976
- flex-shrink: 0;
977
- margin-top: 0.125rem;
978
- }
979
- .Alert_module_info {
980
- color: var(--color-info);
981
- }
982
- .Alert_module_success {
983
- color: var(--color-success);
984
- }
985
- .Alert_module_warning {
986
- color: var(--color-warning);
987
- }
988
- .Alert_module_error {
989
- color: var(--color-error);
990
- }
991
- .Alert_module_content {
992
- flex: 1;
993
- min-width: 0;
994
- }
995
- .Alert_module_title {
996
- font-size: 13px;
997
- font-weight: 500;
998
- letter-spacing: -0.25px;
999
- margin-bottom: 0.125rem;
1000
- }
1001
- .Alert_module_message {
1002
- font-size: 13px;
1003
- letter-spacing: -0.25px;
1004
- color: var(--fg-secondary);
1005
- }
1006
- .Alert_module_dismiss {
1007
- flex-shrink: 0;
1008
- color: var(--fg-muted);
1009
- transition: all var(--transition-fast);
1010
- cursor: pointer;
1011
- background: none;
1012
- border: none;
1013
- padding: 0;
1014
- }
1015
- .Alert_module_dismiss:hover {
1016
- color: var(--fg);
1017
- }
1018
-
1019
- /* src/molecules/Tabs.module.scss */
1020
- .Tabs_module_tabList {
1021
- display: flex;
1022
- border-bottom: 1px solid var(--border-color);
1023
- }
1024
- .Tabs_module_tab {
1025
- padding: 0.625rem 1rem;
1026
- font-size: 0.875rem;
1027
- font-weight: 500;
1028
- transition: color var(--transition-fast);
1029
- cursor: pointer;
1030
- position: relative;
1031
- background: none;
1032
- border: none;
1033
- color: var(--fg-muted);
1034
- }
1035
- .Tabs_module_tab:hover {
1036
- color: var(--fg);
1037
- }
1038
- .Tabs_module_active {
1039
- color: var(--brand-primary);
1040
- }
1041
- .Tabs_module_indicator {
1042
- position: absolute;
1043
- bottom: 0;
1044
- left: 0;
1045
- right: 0;
1046
- height: 2px;
1047
- background: var(--brand-primary);
1048
- border-radius: 9999px;
1049
- }
1050
- .Tabs_module_panel {
1051
- padding-top: 1rem;
1052
- }
1053
-
1054
- /* src/molecules/ChatInput.module.scss */
1055
- .ChatInput_module_root {
1056
- border-radius: 16px;
1057
- overflow: hidden;
1058
- display: flex;
1059
- flex-direction: column;
1060
- gap: 1rem;
1061
- width: 100%;
1062
- max-width: 440px;
1063
- cursor: text;
1064
- }
1065
- .ChatInput_module_contrast {
1066
- background: var(--bg);
1067
- border: 1px solid var(--bg-tertiary);
1068
- box-shadow: var(--shadow-md);
1069
- padding: 13px 15px;
1070
- }
1071
- .ChatInput_module_plain {
1072
- background: var(--bg-tertiary);
1073
- padding: 0.75rem 0.75rem 0.75rem 0.875rem;
1074
- }
1075
- .ChatInput_module_input {
1076
- width: 100%;
1077
- background: transparent;
1078
- border: none;
1079
- outline: none;
1080
- font-size: 13px;
1081
- letter-spacing: -0.25px;
1082
- color: var(--fg);
1083
- font-weight: 400;
1084
150
  }
1085
- .ChatInput_module_input::placeholder {
1086
- color: var(--fg-muted);
1087
- }
1088
- .ChatInput_module_actions {
1089
- display: flex;
1090
- align-items: center;
1091
- }
1092
- .ChatInput_module_actionsFull {
1093
- justify-content: space-between;
1094
- }
1095
- .ChatInput_module_actionsEasy {
1096
- justify-content: flex-end;
1097
- }
1098
- .ChatInput_module_toolGroup {
1099
- display: flex;
1100
- align-items: center;
1101
- gap: 0.25rem;
1102
- }
1103
-
1104
- /* src/molecules/ChatMessage.module.scss */
1105
- .ChatMessage_module_root {
1106
- display: flex;
1107
- }
1108
- .ChatMessage_module_user {
1109
- justify-content: flex-end;
1110
- }
1111
- .ChatMessage_module_ai {
1112
- justify-content: flex-start;
1113
- }
1114
- .ChatMessage_module_bubble {
1115
- font-size: 13px;
1116
- letter-spacing: -0.25px;
1117
- font-weight: 400;
1118
- padding-inline: 1rem;
1119
- border-top-left-radius: 16px;
1120
- border-top-right-radius: 16px;
1121
- line-height: normal;
1122
- }
1123
- .ChatMessage_module_sm {
1124
- padding-block: 0.5rem;
1125
- }
1126
- .ChatMessage_module_lg {
1127
- width: 225px;
1128
- padding-block: 0.75rem;
1129
- }
1130
- .ChatMessage_module_bubbleUser {
151
+ ::-webkit-scrollbar-track {
1131
152
  background: var(--bg-secondary);
1132
- color: var(--fg);
1133
- border-bottom-left-radius: 16px;
1134
- }
1135
- .ChatMessage_module_bubbleAi {
1136
- background: var(--color-accent);
1137
- color: var(--bg);
1138
- border-bottom-right-radius: 16px;
1139
- }
1140
-
1141
- /* src/molecules/TopPromo.module.scss */
1142
- .TopPromo_module_root {
1143
- display: flex;
1144
- align-items: center;
1145
- gap: 0.625rem;
1146
- }
1147
- .TopPromo_module_text {
1148
- font-size: 13px;
1149
- letter-spacing: -0.25px;
1150
- color: var(--fg-secondary);
1151
- }
1152
-
1153
- /* src/molecules/ProfileNav.module.scss */
1154
- .ProfileNav_module_root {
1155
- display: flex;
1156
- align-items: center;
1157
- gap: 1.25rem;
1158
- }
1159
- .ProfileNav_module_stats {
1160
- display: flex;
1161
- align-items: center;
1162
- gap: 0.25rem;
1163
- }
1164
- .ProfileNav_module_statItem {
1165
- display: inline-flex;
1166
- align-items: center;
1167
- font-size: 13px;
1168
- font-weight: 500;
1169
- letter-spacing: -0.25px;
1170
- white-space: nowrap;
1171
- }
1172
- .ProfileNav_module_statText {
1173
- color: var(--fg-secondary);
1174
- }
1175
- .ProfileNav_module_separator {
1176
- color: var(--fg-muted);
1177
- }
1178
-
1179
- /* src/molecules/IconWithText.module.scss */
1180
- .IconWithText_module_root {
1181
- display: inline-flex;
1182
- align-items: center;
1183
- gap: 0.375rem;
1184
- padding-block: 0.25rem;
1185
- border-radius: 9999px;
1186
- }
1187
- .IconWithText_module_icon {
1188
- flex-shrink: 0;
1189
- width: 1.25rem;
1190
- height: 1.25rem;
1191
- display: flex;
1192
- align-items: center;
1193
- justify-content: center;
1194
- }
1195
- .IconWithText_module_text {
1196
- font-size: 13px;
1197
- font-weight: 500;
1198
- color: var(--fg);
1199
- letter-spacing: -0.25px;
1200
- white-space: nowrap;
1201
- }
1202
-
1203
- /* src/molecules/StampCard.module.scss */
1204
- .StampCard_module_root {
1205
- position: relative;
1206
- }
1207
- .StampCard_module_plain {
1208
- border-radius: var(--radius-xl);
1209
- border: 1px solid var(--border-color);
1210
- background: var(--bg);
1211
- overflow: hidden;
1212
- box-shadow: var(--shadow-xs);
1213
- }
1214
- .StampCard_module_inner {
1215
- background: var(--bg);
1216
- }
1217
-
1218
- /* src/molecules/PasswordInput.module.scss */
1219
- .PasswordInput_module_toggle {
1220
- display: flex;
1221
- align-items: center;
1222
- justify-content: center;
1223
- cursor: pointer;
1224
- }
1225
-
1226
- /* src/molecules/Breadcrumbs.module.scss */
1227
- .Breadcrumbs_module_list {
1228
- display: flex;
1229
- align-items: center;
1230
- gap: 0.375rem;
1231
- font-size: 13px;
1232
- letter-spacing: -0.25px;
1233
- list-style: none;
1234
- margin: 0;
1235
- padding: 0;
1236
- }
1237
- .Breadcrumbs_module_item {
1238
- display: flex;
1239
- align-items: center;
1240
- gap: 0.375rem;
1241
- }
1242
- .Breadcrumbs_module_separator {
1243
- color: var(--fg-muted);
1244
- }
1245
- .Breadcrumbs_module_active {
1246
- color: var(--fg);
1247
- font-weight: 500;
1248
- }
1249
- .Breadcrumbs_module_link {
1250
- color: var(--fg-muted);
1251
- text-decoration: none;
1252
- transition: color var(--transition-fast);
1253
- }
1254
- .Breadcrumbs_module_link:hover {
1255
- color: var(--fg);
1256
- }
1257
-
1258
- /* src/molecules/Toast.module.scss */
1259
- .Toast_module_root {
1260
- position: fixed;
1261
- bottom: 1.5rem;
1262
- right: 1.5rem;
1263
- z-index: 50;
1264
- display: flex;
1265
- gap: 0.75rem;
1266
- padding: 1rem;
1267
- border-radius: var(--radius-lg);
1268
- border: 1px solid var(--border-color);
1269
- background: var(--bg-secondary);
1270
- box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
1271
- max-width: 24rem;
1272
- }
1273
- .Toast_module_icon {
1274
- flex-shrink: 0;
1275
- margin-top: 0.125rem;
1276
- }
1277
- .Toast_module_info {
1278
- color: var(--color-info);
1279
- }
1280
- .Toast_module_success {
1281
- color: var(--color-success);
1282
- }
1283
- .Toast_module_warning {
1284
- color: var(--color-warning);
1285
- }
1286
- .Toast_module_error {
1287
- color: var(--color-error);
1288
- }
1289
- .Toast_module_content {
1290
- flex: 1;
1291
- min-width: 0;
1292
- }
1293
- .Toast_module_title {
1294
- font-size: 13px;
1295
- font-weight: 500;
1296
- letter-spacing: -0.25px;
1297
- margin-bottom: 0.125rem;
1298
- }
1299
- .Toast_module_message {
1300
- font-size: 13px;
1301
- letter-spacing: -0.25px;
1302
- color: var(--fg-secondary);
1303
- }
1304
- .Toast_module_dismiss {
1305
- flex-shrink: 0;
1306
- color: var(--fg-muted);
1307
- transition: all var(--transition-fast);
1308
- cursor: pointer;
1309
- background: none;
1310
- border: none;
1311
- padding: 0;
1312
- }
1313
- .Toast_module_dismiss:hover {
1314
- color: var(--fg);
1315
- }
1316
-
1317
- /* src/molecules/Pagination.module.scss */
1318
- .Pagination_module_root {
1319
- display: flex;
1320
- align-items: center;
1321
- gap: 0.25rem;
1322
- }
1323
- .Pagination_module_pageBtn {
1324
- min-width: 36px;
1325
- height: 36px;
1326
- display: flex;
1327
- align-items: center;
1328
- justify-content: center;
1329
- font-size: 13px;
1330
- letter-spacing: -0.25px;
1331
- transition: all var(--transition-fast);
1332
- cursor: pointer;
1333
- border-radius: 9999px;
1334
- background: none;
1335
- border: none;
1336
- color: var(--fg-secondary);
1337
- }
1338
- .Pagination_module_pageBtn:hover {
1339
- color: var(--fg);
1340
- background: var(--bg-secondary);
1341
- }
1342
- .Pagination_module_activePage {
1343
- background: var(--fg);
1344
- color: var(--bg);
1345
- font-weight: 500;
1346
- }
1347
- .Pagination_module_activePage:hover {
1348
- background: var(--fg);
1349
- color: var(--bg);
1350
- }
1351
- .Pagination_module_ellipsis {
1352
- min-width: 36px;
1353
- height: 36px;
1354
- display: flex;
1355
- align-items: center;
1356
- justify-content: center;
1357
- font-size: 13px;
1358
- color: var(--fg-muted);
1359
- }
1360
- .Pagination_module_nav {
1361
- min-width: 36px;
1362
- height: 36px;
1363
- display: flex;
1364
- align-items: center;
1365
- justify-content: center;
1366
- font-size: 13px;
1367
- letter-spacing: -0.25px;
1368
- transition: all var(--transition-fast);
1369
- cursor: pointer;
1370
- background: none;
1371
- border: none;
1372
- color: var(--fg-secondary);
1373
- }
1374
- .Pagination_module_nav:hover {
1375
- color: var(--fg);
1376
- }
1377
- .Pagination_module_nav:disabled {
1378
- opacity: 0.5;
1379
- cursor: not-allowed;
1380
- }
1381
-
1382
- /* src/molecules/CodeInput.module.scss */
1383
- .CodeInput_module_root {
1384
- display: flex;
1385
- flex-direction: column;
1386
- gap: 0.375rem;
1387
- }
1388
- .CodeInput_module_label {
1389
- font-size: 13px;
1390
- font-weight: 500;
1391
- color: var(--fg);
1392
- letter-spacing: -0.25px;
1393
- }
1394
- .CodeInput_module_group {
1395
- display: flex;
1396
- gap: 0.75rem;
1397
- }
1398
- .CodeInput_module_digitInput {
1399
- width: 3rem;
1400
- height: 3rem;
1401
- text-align: center;
1402
- font-size: 1.125rem;
1403
- border: 1px solid var(--fg-muted);
1404
- background: var(--bg);
1405
- color: var(--fg);
1406
- border-radius: var(--radius-lg);
1407
- transition: all var(--transition-fast);
1408
- }
1409
- .CodeInput_module_digitInput:focus {
1410
- outline: none;
1411
- border-color: var(--fg);
1412
- }
1413
- .CodeInput_module_digitError {
1414
- border-color: var(--color-error);
1415
- }
1416
- .CodeInput_module_digitError:focus {
1417
- border-color: var(--color-error);
1418
- }
1419
- .CodeInput_module_errorText {
1420
- font-size: 13px;
1421
- letter-spacing: -0.25px;
1422
- color: var(--color-error);
1423
- }
1424
-
1425
- /* src/molecules/Modal.module.scss */
1426
- .Modal_module_dialog {
1427
- max-width: 32rem;
1428
- width: 100%;
1429
- padding: 0;
1430
- border-radius: var(--radius-lg);
1431
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
1432
- background: var(--bg);
1433
- border: 1px solid var(--border-color);
1434
- }
1435
- .Modal_module_dialog::backdrop {
1436
- background: rgba(0, 0, 0, 0.5);
1437
- }
1438
- .Modal_module_content {
1439
- padding: 1.5rem;
1440
- }
1441
- .Modal_module_header {
1442
- display: flex;
1443
- align-items: flex-start;
1444
- justify-content: space-between;
1445
- margin-bottom: 1rem;
1446
- }
1447
- .Modal_module_title {
1448
- font-size: 1.125rem;
1449
- font-weight: 600;
1450
- color: var(--fg);
1451
- letter-spacing: -0.25px;
1452
- }
1453
- .Modal_module_closeBtn {
1454
- flex-shrink: 0;
1455
- margin-left: auto;
1456
- color: var(--fg-muted);
1457
- transition: all var(--transition-fast);
1458
- cursor: pointer;
1459
- background: none;
1460
- border: none;
1461
- padding: 0;
1462
- }
1463
- .Modal_module_closeBtn:hover {
1464
- color: var(--fg);
1465
- }
1466
- .Modal_module_body {
1467
- font-size: 0.875rem;
1468
- color: var(--fg-secondary);
1469
- line-height: 1.625;
1470
- }
1471
- .Modal_module_footer {
1472
- display: flex;
1473
- gap: 0.75rem;
1474
- justify-content: flex-end;
1475
- margin-top: 1.5rem;
1476
- }
1477
-
1478
- /* src/molecules/DropdownMenu.module.scss */
1479
- .DropdownMenu_module_root {
1480
- position: relative;
1481
- display: inline-block;
1482
- }
1483
- .DropdownMenu_module_trigger {
1484
- cursor: pointer;
1485
- display: inline-flex;
1486
- }
1487
- .DropdownMenu_module_menu {
1488
- position: absolute;
1489
- top: 100%;
1490
- margin-top: 0.25rem;
1491
- z-index: 50;
1492
- border-radius: var(--radius-lg);
1493
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
1494
- border: 1px solid var(--border-color);
1495
- background: var(--bg);
1496
- min-width: 180px;
1497
- padding: 0.25rem 0;
1498
- }
1499
- .DropdownMenu_module_alignLeft {
1500
- left: 0;
1501
- }
1502
- .DropdownMenu_module_alignRight {
1503
- right: 0;
1504
- }
1505
- .DropdownMenu_module_item {
1506
- display: flex;
1507
- align-items: center;
1508
- gap: 0.5rem;
1509
- width: 100%;
1510
- padding: 0.5rem 0.75rem;
1511
- font-size: 13px;
1512
- letter-spacing: -0.25px;
1513
- color: var(--fg-secondary);
1514
- transition: all var(--transition-fast);
1515
- cursor: pointer;
1516
- text-align: left;
1517
- background: none;
1518
- border: none;
1519
- }
1520
- .DropdownMenu_module_item:hover {
1521
- background: var(--bg-secondary);
1522
- color: var(--fg);
1523
- }
1524
- .DropdownMenu_module_itemIcon {
1525
- flex-shrink: 0;
1526
- color: var(--fg-muted);
1527
- }
1528
- .DropdownMenu_module_divider {
1529
- margin: 0.25rem 0;
1530
- border: none;
1531
- border-top: 1px solid var(--border-color);
1532
- }
1533
-
1534
- /* src/organisms/Header.module.scss */
1535
- .Header_module_root {
1536
- border-bottom: 1px solid var(--border-color);
1537
- background: color-mix(in srgb, var(--bg) 80%, transparent);
1538
- backdrop-filter: blur(12px);
1539
- position: sticky;
1540
- top: 0;
1541
- z-index: 50;
1542
- }
1543
- .Header_module_container {
1544
- max-width: 80rem;
1545
- margin: 0 auto;
1546
- padding: 0 1rem;
1547
- }
1548
- @media (min-width: 640px) {
1549
- .Header_module_container {
1550
- padding: 0 1.5rem;
1551
- }
1552
- }
1553
- @media (min-width: 1024px) {
1554
- .Header_module_container {
1555
- padding: 0 2rem;
1556
- }
1557
- }
1558
- .Header_module_bar {
1559
- display: flex;
1560
- align-items: center;
1561
- justify-content: space-between;
1562
- height: 4rem;
1563
- }
1564
- .Header_module_leftGroup {
1565
- display: flex;
1566
- align-items: center;
1567
- gap: 2rem;
1568
- }
1569
- .Header_module_logoFallback {
1570
- font-size: 1.125rem;
1571
- font-weight: 700;
1572
- color: var(--fg);
1573
- }
1574
- .Header_module_logoBrand {
1575
- color: var(--brand-primary);
1576
- }
1577
- .Header_module_desktopNav {
1578
- display: none;
1579
- align-items: center;
1580
- gap: 0.25rem;
1581
- }
1582
- @media (min-width: 768px) {
1583
- .Header_module_desktopNav {
1584
- display: flex;
1585
- }
1586
- }
1587
- .Header_module_navLink {
1588
- padding: 0.5rem 0.75rem;
1589
- font-size: 0.875rem;
1590
- color: var(--fg-secondary);
1591
- border-radius: var(--radius-md);
1592
- transition: color 0.15s, background 0.15s;
1593
- }
1594
- .Header_module_navLink:hover {
1595
- color: var(--fg);
1596
- background: var(--bg-tertiary);
1597
- }
1598
- .Header_module_desktopActions {
1599
- display: none;
1600
- align-items: center;
1601
- gap: 0.75rem;
1602
- }
1603
- @media (min-width: 768px) {
1604
- .Header_module_desktopActions {
1605
- display: flex;
1606
- }
1607
- }
1608
- .Header_module_mobileToggle {
1609
- display: block;
1610
- padding: 0.5rem;
1611
- color: var(--fg-secondary);
1612
- cursor: pointer;
1613
- background: none;
1614
- border: none;
1615
- }
1616
- .Header_module_mobileToggle:hover {
1617
- color: var(--fg);
1618
- }
1619
- @media (min-width: 768px) {
1620
- .Header_module_mobileToggle {
1621
- display: none;
1622
- }
1623
- }
1624
- .Header_module_mobileMenu {
1625
- display: block;
1626
- border-top: 1px solid var(--border-color);
1627
- background: var(--bg);
1628
- padding: 1rem;
1629
- }
1630
- @media (min-width: 768px) {
1631
- .Header_module_mobileMenu {
1632
- display: none;
1633
- }
1634
- }
1635
- .Header_module_mobileNav {
1636
- display: flex;
1637
- flex-direction: column;
1638
- gap: 0.25rem;
1639
- }
1640
- .Header_module_mobileActions {
1641
- display: flex;
1642
- flex-direction: column;
1643
- gap: 0.5rem;
1644
- margin-top: 1rem;
1645
- padding-top: 1rem;
1646
- border-top: 1px solid var(--border-color);
1647
- }
1648
-
1649
- /* src/organisms/Footer.module.scss */
1650
- .Footer_module_root {
1651
- border-top: 1px solid var(--border-color);
1652
- background: var(--bg);
1653
- }
1654
- .Footer_module_container {
1655
- max-width: 80rem;
1656
- margin: 0 auto;
1657
- padding: 3rem 1rem;
1658
- }
1659
- @media (min-width: 640px) {
1660
- .Footer_module_container {
1661
- padding: 3rem 1.5rem;
1662
- }
1663
- }
1664
- @media (min-width: 1024px) {
1665
- .Footer_module_container {
1666
- padding: 3rem 2rem;
1667
- }
1668
- }
1669
- .Footer_module_grid {
1670
- display: grid;
1671
- grid-template-columns: repeat(2, 1fr);
1672
- gap: 2rem;
1673
- }
1674
- @media (min-width: 768px) {
1675
- .Footer_module_grid {
1676
- grid-template-columns: repeat(4, 1fr);
1677
- }
1678
- }
1679
- .Footer_module_brand {
1680
- font-size: 1.125rem;
1681
- font-weight: 700;
1682
- color: var(--fg);
1683
- }
1684
- .Footer_module_brandAccent {
1685
- color: var(--brand-primary);
1686
- }
1687
- .Footer_module_tagline {
1688
- margin-top: 0.75rem;
1689
- font-size: 13px;
1690
- color: var(--fg-muted);
1691
- line-height: 1.625;
1692
- letter-spacing: -0.25px;
1693
- }
1694
- .Footer_module_columnTitle {
1695
- font-size: 13px;
1696
- font-weight: 600;
1697
- color: var(--fg-secondary);
1698
- margin-bottom: 0.75rem;
1699
- letter-spacing: -0.25px;
1700
- }
1701
- .Footer_module_linkList {
1702
- display: flex;
1703
- flex-direction: column;
1704
- gap: 0.625rem;
1705
- list-style: none;
1706
- padding: 0;
1707
- margin: 0;
1708
- }
1709
- .Footer_module_link {
1710
- font-size: 13px;
1711
- color: var(--fg-muted);
1712
- letter-spacing: -0.25px;
1713
- transition: color var(--transition-fast);
1714
- }
1715
- .Footer_module_link:hover {
1716
- color: var(--fg);
1717
- }
1718
- .Footer_module_bottom {
1719
- margin-top: 3rem;
1720
- padding-top: 2rem;
1721
- border-top: 1px solid var(--border-color);
1722
- display: flex;
1723
- flex-direction: column;
1724
- justify-content: space-between;
1725
- align-items: center;
1726
- gap: 1rem;
1727
- }
1728
- @media (min-width: 640px) {
1729
- .Footer_module_bottom {
1730
- flex-direction: row;
1731
- }
1732
- }
1733
- .Footer_module_copyright {
1734
- font-size: 13px;
1735
- color: var(--fg-muted);
1736
- letter-spacing: -0.25px;
1737
- }
1738
- .Footer_module_socials {
1739
- display: flex;
1740
- gap: 1rem;
1741
- }
1742
- .Footer_module_socialLink {
1743
- font-size: 13px;
1744
- color: var(--fg-muted);
1745
- letter-spacing: -0.25px;
1746
- transition: color var(--transition-fast);
1747
- }
1748
- .Footer_module_socialLink:hover {
1749
- color: var(--fg);
1750
- }
1751
-
1752
- /* src/organisms/PricingCard.module.scss */
1753
- .PricingCard_module_root {
1754
- position: relative;
1755
- border-radius: var(--radius-xl);
1756
- border: 1px solid var(--border-color);
1757
- padding: 1.5rem;
1758
- display: flex;
1759
- flex-direction: column;
1760
- background: var(--bg);
1761
- box-shadow: var(--shadow-xs);
1762
- }
1763
- .PricingCard_module_highlighted {
1764
- border-color: var(--brand-primary);
1765
- box-shadow: 0 0 0 1px var(--brand-primary), var(--shadow-lg);
1766
- }
1767
- .PricingCard_module_badgeWrap {
1768
- position: absolute;
1769
- top: -0.75rem;
1770
- left: 50%;
1771
- transform: translateX(-50%);
1772
- }
1773
- .PricingCard_module_header {
1774
- margin-bottom: 1rem;
1775
- }
1776
- .PricingCard_module_plan {
1777
- font-size: 1.125rem;
1778
- font-weight: 600;
1779
- color: var(--fg);
1780
- }
1781
- .PricingCard_module_description {
1782
- font-size: 0.875rem;
1783
- color: var(--fg-muted);
1784
- margin-top: 0.25rem;
1785
- }
1786
- .PricingCard_module_priceBlock {
1787
- margin-bottom: 1.5rem;
1788
- }
1789
- .PricingCard_module_price {
1790
- font-size: 2.25rem;
1791
- font-weight: 700;
1792
- color: var(--fg);
1793
- }
1794
- .PricingCard_module_period {
1795
- color: var(--fg-muted);
1796
- }
1797
- .PricingCard_module_features {
1798
- display: flex;
1799
- flex-direction: column;
1800
- gap: 0.75rem;
1801
- margin-bottom: 2rem;
1802
- flex: 1;
1803
- }
1804
- .PricingCard_module_featureItem {
1805
- display: flex;
1806
- align-items: flex-start;
1807
- gap: 0.625rem;
1808
- font-size: 0.875rem;
1809
- color: var(--fg-secondary);
1810
- }
1811
- .PricingCard_module_featureIcon {
1812
- flex-shrink: 0;
1813
- margin-top: 2px;
1814
- color: var(--color-success);
1815
- }
1816
- .PricingCard_module_cta {
1817
- width: 100%;
1818
- }
1819
-
1820
- /* src/organisms/TestimonialCard.module.scss */
1821
- .TestimonialCard_module_root {
1822
- border-radius: var(--radius-xl);
1823
- border: 1px solid var(--border-color);
1824
- background: var(--bg);
1825
- padding: 1.5rem;
1826
- box-shadow: var(--shadow-xs);
1827
- }
1828
- .TestimonialCard_module_quoteIcon {
1829
- color: var(--brand-primary);
1830
- opacity: 0.3;
1831
- margin-bottom: 1rem;
1832
- }
1833
- .TestimonialCard_module_quoteText {
1834
- font-size: 0.875rem;
1835
- color: var(--fg-secondary);
1836
- line-height: 1.625;
1837
- margin-bottom: 1.5rem;
1838
- }
1839
- .TestimonialCard_module_author {
1840
- display: flex;
1841
- align-items: center;
1842
- gap: 0.75rem;
1843
- }
1844
- .TestimonialCard_module_authorName {
1845
- font-size: 0.875rem;
1846
- font-weight: 500;
1847
- color: var(--fg);
1848
- }
1849
- .TestimonialCard_module_authorRole {
1850
- font-size: 0.75rem;
1851
- color: var(--fg-muted);
1852
- }
1853
-
1854
- /* src/organisms/FeatureGrid.module.scss */
1855
- .FeatureGrid_module_root {
1856
- display: grid;
1857
- grid-template-columns: 1fr;
1858
- gap: 1.5rem;
1859
- }
1860
- @media (min-width: 768px) {
1861
- .FeatureGrid_module_cols2 {
1862
- grid-template-columns: repeat(2, 1fr);
1863
- }
1864
- }
1865
- @media (min-width: 768px) {
1866
- .FeatureGrid_module_cols3 {
1867
- grid-template-columns: repeat(3, 1fr);
1868
- }
1869
- }
1870
- @media (min-width: 768px) {
1871
- .FeatureGrid_module_cols4 {
1872
- grid-template-columns: repeat(2, 1fr);
1873
- }
1874
- }
1875
- @media (min-width: 1024px) {
1876
- .FeatureGrid_module_cols4 {
1877
- grid-template-columns: repeat(4, 1fr);
1878
- }
1879
- }
1880
- .FeatureGrid_module_card {
1881
- border-radius: var(--radius-xl);
1882
- border: 1px solid var(--border-color);
1883
- background: var(--bg);
1884
- padding: 1.5rem;
1885
- transition: all var(--transition-base);
1886
- }
1887
- .FeatureGrid_module_card:hover {
1888
- box-shadow: var(--shadow-md);
1889
- transform: translateY(-2px);
1890
- }
1891
- .FeatureGrid_module_cardIcon {
1892
- width: 2.5rem;
1893
- height: 2.5rem;
1894
- border-radius: var(--radius-lg);
1895
- background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
1896
- display: flex;
1897
- align-items: center;
1898
- justify-content: center;
1899
- color: var(--brand-primary);
1900
- margin-bottom: 1rem;
1901
- }
1902
- .FeatureGrid_module_cardTitle {
1903
- font-size: 0.875rem;
1904
- font-weight: 600;
1905
- color: var(--fg);
1906
- margin-bottom: 0.375rem;
1907
- }
1908
- .FeatureGrid_module_cardDescription {
1909
- font-size: 0.875rem;
1910
- color: var(--fg-muted);
1911
- line-height: 1.625;
1912
- }
1913
-
1914
- /* src/organisms/Sidebar.module.scss */
1915
- .Sidebar_module_root {
1916
- background: var(--bg);
1917
- border-right: 1px solid var(--border-color);
1918
- display: flex;
1919
- flex-direction: column;
1920
- justify-content: space-between;
1921
- padding: 2rem;
1922
- flex-shrink: 0;
1923
- height: 100%;
1924
- }
1925
- .Sidebar_module_menu {
1926
- width: 240px;
1927
- }
1928
- .Sidebar_module_courseSubmenu {
1929
- width: 340px;
1930
- }
1931
- .Sidebar_module_logo {
1932
- margin-bottom: 1.5rem;
1933
- }
1934
- .Sidebar_module_nav {
1935
- display: flex;
1936
- flex-direction: column;
1937
- gap: 0.25rem;
1938
- align-items: flex-start;
1939
- }
1940
- .Sidebar_module_footer {
1941
- display: flex;
1942
- flex-direction: column;
1943
- gap: 1.25rem;
1944
- width: 100%;
1945
- }
1946
- .Sidebar_module_legal {
1947
- font-size: 10px;
1948
- color: var(--fg-muted);
1949
- letter-spacing: -0.2px;
1950
- white-space: pre-line;
1951
- }
1952
-
1953
- /* src/organisms/AppCard.module.scss */
1954
- .AppCard_module_defaultCard {
1955
- display: flex;
1956
- flex-direction: column;
1957
- width: 320px;
1958
- }
1959
- .AppCard_module_stampCard {
1960
- display: flex;
1961
- flex-direction: column;
1962
- width: 320px;
1963
- position: relative;
1964
- }
1965
- .AppCard_module_imageWrap {
1966
- position: relative;
1967
- width: 100%;
1968
- aspect-ratio: 16/9;
1969
- overflow: hidden;
1970
- }
1971
- .AppCard_module_imageWrapRounded {
1972
- border-radius: 16px 16px 0 0;
1973
- }
1974
- .AppCard_module_image {
1975
- position: absolute;
1976
- inset: 0;
1977
- width: 100%;
1978
- height: 100%;
1979
- object-fit: cover;
1980
- }
1981
- .AppCard_module_contentArea {
1982
- background: var(--bg);
1983
- overflow: hidden;
1984
- display: flex;
1985
- flex-direction: column;
1986
- justify-content: space-between;
1987
- padding: 25px 25px 21px;
1988
- flex: 1;
1989
- min-height: 220px;
1990
- position: relative;
1991
- }
1992
- .AppCard_module_contentDefault {
1993
- border: 1px solid var(--bg-tertiary);
1994
- box-shadow: var(--shadow-md);
1995
- }
1996
- .AppCard_module_contentDefaultNoImage {
1997
- border-radius: 16px;
1998
- }
1999
- .AppCard_module_contentDefaultWithImage {
2000
- border-radius: 0 0 16px 16px;
2001
- }
2002
- .AppCard_module_contentStamp {
2003
- }
2004
- .AppCard_module_textGroup {
2005
- display: flex;
2006
- flex-direction: column;
2007
- gap: 0.75rem;
2008
- padding-right: 2rem;
2009
- }
2010
- .AppCard_module_cardTitle {
2011
- font-size: 1rem;
2012
- font-weight: 600;
2013
- color: var(--fg-secondary);
2014
- letter-spacing: -0.25px;
2015
- }
2016
- .AppCard_module_cardDesc {
2017
- font-size: 13px;
2018
- color: var(--fg-muted);
2019
- letter-spacing: -0.25px;
2020
- line-height: 1.5;
2021
- }
2022
- .AppCard_module_footer {
2023
- display: flex;
2024
- align-items: center;
2025
- justify-content: space-between;
2026
- margin-top: 1.25rem;
2027
- }
2028
- .AppCard_module_iconRow {
2029
- display: flex;
2030
- align-items: center;
2031
- gap: 0.25rem;
2032
- }
2033
- .AppCard_module_shadowWrap {
2034
- filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
2035
- }
2036
- .AppCard_module_stampBg {
2037
- background: var(--bg);
2038
- }
2039
-
2040
- /* src/organisms/AppTopLine.module.scss */
2041
- .AppTopLine_module_root {
2042
- background: var(--bg);
2043
- display: flex;
2044
- align-items: center;
2045
- justify-content: space-between;
2046
- width: 100%;
2047
- }
2048
-
2049
- /* src/organisms/EmptyState.module.scss */
2050
- .EmptyState_module_root {
2051
- border-radius: var(--radius-xl);
2052
- border: 1px solid var(--border-color);
2053
- background: var(--bg);
2054
- padding: 2rem;
2055
- box-shadow: var(--shadow-xs);
2056
- display: flex;
2057
- flex-direction: column;
2058
- align-items: center;
2059
- text-align: center;
2060
- }
2061
- .EmptyState_module_icon {
2062
- color: var(--fg-muted);
2063
- margin-bottom: 1rem;
2064
- }
2065
- .EmptyState_module_title {
2066
- font-size: 1.125rem;
2067
- font-weight: 600;
2068
- color: var(--fg);
2069
- }
2070
- .EmptyState_module_description {
2071
- font-size: 13px;
2072
- color: var(--fg-muted);
2073
- letter-spacing: -0.25px;
2074
- margin-top: 0.25rem;
2075
- max-width: 24rem;
2076
- }
2077
- .EmptyState_module_action {
2078
- margin-top: 1.25rem;
2079
- }
2080
-
2081
- /* src/organisms/HeroSection.module.scss */
2082
- .HeroSection_module_root {
2083
- position: relative;
2084
- overflow: hidden;
2085
- }
2086
- .HeroSection_module_bgGlow {
2087
- position: absolute;
2088
- inset: 0;
2089
- pointer-events: none;
2090
- }
2091
- .HeroSection_module_glowOrb {
2092
- position: absolute;
2093
- top: 0;
2094
- left: 50%;
2095
- transform: translateX(-50%);
2096
- width: 800px;
2097
- height: 600px;
2098
- background:
2099
- radial-gradient(
2100
- ellipse at center,
2101
- var(--brand-primary) 0%,
2102
- transparent 70%);
2103
- opacity: 0.04;
2104
- }
2105
- .HeroSection_module_inner {
2106
- position: relative;
2107
- padding: 5rem 0;
2108
- }
2109
- @media (min-width: 768px) {
2110
- .HeroSection_module_inner {
2111
- padding: 8rem 0;
2112
- }
2113
- }
2114
- .HeroSection_module_innerCompact {
2115
- position: relative;
2116
- padding: 4rem 0;
2117
- }
2118
- @media (min-width: 768px) {
2119
- .HeroSection_module_innerCompact {
2120
- padding: 5rem 0;
2121
- }
2122
- }
2123
- .HeroSection_module_content {
2124
- max-width: 56rem;
2125
- }
2126
- .HeroSection_module_contentCenter {
2127
- margin-left: auto;
2128
- margin-right: auto;
2129
- text-align: center;
2130
- }
2131
- .HeroSection_module_eyebrowWrap {
2132
- margin-bottom: 1rem;
2133
- }
2134
- @media (min-width: 768px) {
2135
- .HeroSection_module_eyebrowWrap {
2136
- margin-bottom: 1.25rem;
2137
- }
2138
- }
2139
- .HeroSection_module_eyebrowCenter {
2140
- display: flex;
2141
- justify-content: center;
2142
- }
2143
- .HeroSection_module_eyebrow {
2144
- display: inline-flex;
2145
- align-items: center;
2146
- gap: 0.375rem;
2147
- padding: 0.25rem 0.75rem;
2148
- border-radius: 9999px;
2149
- font-size: 11px;
2150
- font-weight: 600;
2151
- text-transform: uppercase;
2152
- letter-spacing: 0.08em;
2153
- background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
2154
- color: var(--brand-primary);
2155
- border: 1px solid color-mix(in srgb, var(--brand-primary) 15%, transparent);
2156
- }
2157
- .HeroSection_module_eyebrowDot {
2158
- width: 0.375rem;
2159
- height: 0.375rem;
2160
- border-radius: 9999px;
2161
- background: var(--brand-primary);
2162
- animation: HeroSection_module_pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2163
- }
2164
- @keyframes HeroSection_module_pulse {
2165
- 0%, 100% {
2166
- opacity: 1;
2167
- }
2168
- 50% {
2169
- opacity: 0.5;
2170
- }
2171
- }
2172
- .HeroSection_module_title {
2173
- font-size: clamp(2rem, 5vw, 3.75rem);
2174
- font-weight: 700;
2175
- line-height: 1.08;
2176
- letter-spacing: -0.035em;
2177
- color: var(--fg);
2178
- text-wrap: balance;
2179
- }
2180
- .HeroSection_module_subtitle {
2181
- margin-top: 1.25rem;
2182
- font-size: 1rem;
2183
- color: var(--fg-secondary);
2184
- line-height: 1.625;
2185
- max-width: 42rem;
2186
- }
2187
- @media (min-width: 768px) {
2188
- .HeroSection_module_subtitle {
2189
- margin-top: 1.5rem;
2190
- font-size: 1.125rem;
2191
- }
2192
- }
2193
- .HeroSection_module_subtitleCenter {
2194
- margin-left: auto;
2195
- margin-right: auto;
2196
- }
2197
- .HeroSection_module_actions {
2198
- margin-top: 2rem;
2199
- display: flex;
2200
- flex-wrap: wrap;
2201
- gap: 0.75rem;
2202
- }
2203
- @media (min-width: 768px) {
2204
- .HeroSection_module_actions {
2205
- margin-top: 2.5rem;
2206
- }
2207
- }
2208
- .HeroSection_module_actionsCenter {
2209
- justify-content: center;
2210
- }
2211
- .HeroSection_module_mediaWrap {
2212
- margin-top: 3rem;
2213
- max-width: 64rem;
2214
- }
2215
- @media (min-width: 768px) {
2216
- .HeroSection_module_mediaWrap {
2217
- margin-top: 4rem;
2218
- }
2219
- }
2220
- .HeroSection_module_mediaWrapCenter {
2221
- margin-left: auto;
2222
- margin-right: auto;
2223
- max-width: 64rem;
2224
- }
2225
- .HeroSection_module_mediaWrapLeft {
2226
- max-width: 56rem;
2227
- }
2228
- .HeroSection_module_mediaBox {
2229
- border-radius: var(--radius-xl);
2230
- border: 1px solid var(--border-color);
2231
- box-shadow: var(--shadow-xl);
2232
- overflow: hidden;
2233
- background: var(--bg-secondary);
2234
- }
2235
-
2236
- /* src/organisms/LogoCloud.module.scss */
2237
- .LogoCloud_module_root {
2238
- padding-block: 2.5rem;
2239
- }
2240
- @media (min-width: 768px) {
2241
- .LogoCloud_module_root {
2242
- padding-block: 3.5rem;
2243
- }
2244
- }
2245
- .LogoCloud_module_label {
2246
- text-align: center;
2247
- font-size: 11px;
2248
- font-weight: 600;
2249
- text-transform: uppercase;
2250
- letter-spacing: 0.1em;
2251
- color: var(--fg-muted);
2252
- margin-bottom: 2rem;
2253
- }
2254
- .LogoCloud_module_grid {
2255
- display: flex;
2256
- flex-wrap: wrap;
2257
- align-items: center;
2258
- justify-content: center;
2259
- column-gap: 2.5rem;
2260
- row-gap: 1.5rem;
2261
- }
2262
- @media (min-width: 768px) {
2263
- .LogoCloud_module_grid {
2264
- column-gap: 3.5rem;
2265
- }
2266
- }
2267
- .LogoCloud_module_logoItem {
2268
- display: flex;
2269
- align-items: center;
2270
- gap: 0.5rem;
2271
- opacity: 0.4;
2272
- transition: opacity var(--transition-base);
2273
- }
2274
- .LogoCloud_module_logoItem:hover {
2275
- opacity: 0.7;
2276
- }
2277
- .LogoCloud_module_logoImg {
2278
- height: 1.5rem;
2279
- width: auto;
2280
- object-fit: contain;
2281
- }
2282
- @media (min-width: 768px) {
2283
- .LogoCloud_module_logoImg {
2284
- height: 1.75rem;
2285
- }
2286
- }
2287
- .LogoCloud_module_logoText {
2288
- font-size: 0.875rem;
2289
- font-weight: 700;
2290
- letter-spacing: -0.02em;
2291
- color: var(--fg);
2292
- user-select: none;
2293
- }
2294
- @media (min-width: 768px) {
2295
- .LogoCloud_module_logoText {
2296
- font-size: 1rem;
2297
- }
2298
- }
2299
-
2300
- /* src/organisms/StatsBar.module.scss */
2301
- .StatsBar_module_root {
2302
- padding-block: 2.5rem;
2303
- }
2304
- @media (min-width: 768px) {
2305
- .StatsBar_module_root {
2306
- padding-block: 3.5rem;
2307
- }
2308
- }
2309
- .StatsBar_module_inline {
2310
- border-top: 1px solid var(--border-color);
2311
- border-bottom: 1px solid var(--border-color);
2312
- }
2313
- .StatsBar_module_inlineGrid {
2314
- display: flex;
2315
- flex-wrap: wrap;
2316
- align-items: center;
2317
- justify-content: center;
2318
- gap: 2rem;
2319
- }
2320
- @media (min-width: 768px) {
2321
- .StatsBar_module_inlineGrid {
2322
- gap: 4rem;
2323
- }
2324
- }
2325
- .StatsBar_module_inlineItem {
2326
- text-align: center;
2327
- }
2328
- .StatsBar_module_cardsGrid {
2329
- display: grid;
2330
- grid-template-columns: repeat(2, 1fr);
2331
- gap: 1rem;
2332
- }
2333
- @media (min-width: 768px) {
2334
- .StatsBar_module_cardsGrid {
2335
- grid-template-columns: repeat(4, 1fr);
2336
- }
2337
- }
2338
- .StatsBar_module_card {
2339
- border-radius: var(--radius-xl);
2340
- border: 1px solid var(--border-color);
2341
- background: var(--bg);
2342
- padding: 1.25rem;
2343
- text-align: center;
2344
- transition: all var(--transition-base);
2345
- }
2346
- @media (min-width: 768px) {
2347
- .StatsBar_module_card {
2348
- padding: 1.5rem;
2349
- }
2350
- }
2351
- .StatsBar_module_card:hover {
2352
- box-shadow: var(--shadow-md);
2353
- transform: translateY(-2px);
2354
- }
2355
- .StatsBar_module_cardIconWrap {
2356
- display: flex;
2357
- justify-content: center;
2358
- margin-bottom: 0.75rem;
2359
- color: var(--brand-primary);
2360
- }
2361
- .StatsBar_module_statValue {
2362
- font-size: 1.5rem;
2363
- font-weight: 700;
2364
- color: var(--fg);
2365
- letter-spacing: -0.03em;
2366
- font-variant-numeric: tabular-nums;
2367
- }
2368
- @media (min-width: 768px) {
2369
- .StatsBar_module_statValue {
2370
- font-size: 1.875rem;
2371
- }
2372
- }
2373
- .StatsBar_module_statLabel {
2374
- margin-top: 0.25rem;
2375
- font-size: 13px;
2376
- color: var(--fg-muted);
2377
- letter-spacing: -0.25px;
2378
- }
2379
-
2380
- /* src/organisms/CTASection.module.scss */
2381
- .CTASection_module_root {
2382
- }
2383
- .CTASection_module_default {
2384
- padding-block: 4rem;
2385
- }
2386
- @media (min-width: 768px) {
2387
- .CTASection_module_default {
2388
- padding-block: 6rem;
2389
- }
2390
- }
2391
- .CTASection_module_filled {
2392
- padding-block: 3rem;
2393
- padding-inline: 1.5rem;
2394
- border-radius: var(--radius-xl);
2395
- background: var(--fg);
2396
- color: var(--bg);
2397
- }
2398
- @media (min-width: 768px) {
2399
- .CTASection_module_filled {
2400
- padding-block: 4rem;
2401
- padding-inline: 3rem;
2402
- }
2403
- }
2404
- .CTASection_module_bordered {
2405
- padding-block: 3rem;
2406
- padding-inline: 1.5rem;
2407
- border-radius: var(--radius-xl);
2408
- border: 2px dashed var(--border-color-strong);
2409
- }
2410
- @media (min-width: 768px) {
2411
- .CTASection_module_bordered {
2412
- padding-block: 4rem;
2413
- padding-inline: 3rem;
2414
- }
2415
- }
2416
- .CTASection_module_inner {
2417
- max-width: 42rem;
2418
- margin-inline: auto;
2419
- text-align: center;
2420
- }
2421
- .CTASection_module_title {
2422
- font-size: 1.5rem;
2423
- font-weight: 700;
2424
- letter-spacing: -0.03em;
2425
- line-height: 1.1;
2426
- color: var(--fg);
2427
- }
2428
- @media (min-width: 768px) {
2429
- .CTASection_module_title {
2430
- font-size: 2.25rem;
2431
- }
2432
- }
2433
- .CTASection_module_titleFilled {
2434
- color: var(--bg);
2435
- }
2436
- .CTASection_module_description {
2437
- margin-top: 1rem;
2438
- font-size: 1rem;
2439
- line-height: 1.625;
2440
- color: var(--fg-secondary);
2441
- }
2442
- .CTASection_module_descriptionFilled {
2443
- color: color-mix(in srgb, var(--bg) 70%, transparent);
2444
- }
2445
- .CTASection_module_actions {
2446
- margin-top: 2rem;
2447
- display: flex;
2448
- flex-wrap: wrap;
2449
- gap: 0.75rem;
2450
- justify-content: center;
2451
- }
2452
-
2453
- /* src/organisms/BentoGrid.module.scss */
2454
- .BentoGrid_module_root {
2455
- padding-block: 2.5rem;
2456
- }
2457
- @media (min-width: 768px) {
2458
- .BentoGrid_module_root {
2459
- padding-block: 3.5rem;
2460
- }
2461
- }
2462
- .BentoGrid_module_grid {
2463
- display: grid;
2464
- grid-template-columns: 1fr;
2465
- gap: 1rem;
2466
- }
2467
- @media (min-width: 768px) {
2468
- .BentoGrid_module_grid {
2469
- grid-template-columns: repeat(3, 1fr);
2470
- }
2471
- }
2472
- .BentoGrid_module_item {
2473
- position: relative;
2474
- border-radius: var(--radius-xl);
2475
- border: 1px solid var(--border-color);
2476
- background: var(--bg);
2477
- overflow: hidden;
2478
- transition: all var(--transition-base);
2479
- }
2480
- .BentoGrid_module_item:hover {
2481
- box-shadow: var(--shadow-md);
2482
- border-color: var(--border-color-strong);
2483
- }
2484
- @media (min-width: 768px) {
2485
- .BentoGrid_module_colSpan2 {
2486
- grid-column: span 2;
2487
- }
2488
- }
2489
- @media (min-width: 768px) {
2490
- .BentoGrid_module_rowSpan2 {
2491
- grid-row: span 2;
2492
- }
2493
- }
2494
- .BentoGrid_module_mediaWrap {
2495
- width: 100%;
2496
- overflow: hidden;
2497
- }
2498
- .BentoGrid_module_content {
2499
- padding: 1.25rem;
2500
- }
2501
- @media (min-width: 768px) {
2502
- .BentoGrid_module_content {
2503
- padding: 1.5rem;
2504
- }
2505
- }
2506
- .BentoGrid_module_contentTall {
2507
- display: flex;
2508
- flex-direction: column;
2509
- height: 100%;
2510
- }
2511
- .BentoGrid_module_itemIcon {
2512
- width: 2.25rem;
2513
- height: 2.25rem;
2514
- border-radius: var(--radius-md);
2515
- background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
2516
- display: flex;
2517
- align-items: center;
2518
- justify-content: center;
2519
- color: var(--brand-primary);
2520
- margin-bottom: 0.875rem;
2521
- }
2522
- .BentoGrid_module_itemTitle {
2523
- font-size: 15px;
2524
- font-weight: 600;
2525
- color: var(--fg);
2526
- letter-spacing: -0.01em;
2527
- }
2528
- .BentoGrid_module_itemDescription {
2529
- margin-top: 0.375rem;
2530
- font-size: 13px;
2531
- color: var(--fg-muted);
2532
- line-height: 1.625;
2533
- letter-spacing: -0.25px;
2534
- }
2535
-
2536
- /* src/organisms/FAQSection.module.scss */
2537
- .FAQSection_module_root {
2538
- padding: 3.5rem 0;
2539
- }
2540
- @media (min-width: 768px) {
2541
- .FAQSection_module_root {
2542
- padding: 5rem 0;
2543
- }
2544
- }
2545
- .FAQSection_module_container {
2546
- max-width: 42rem;
2547
- margin: 0 auto;
2548
- }
2549
- .FAQSection_module_title {
2550
- font-size: 1.5rem;
2551
- font-weight: 700;
2552
- color: var(--fg);
2553
- letter-spacing: -0.03em;
2554
- text-align: center;
2555
- }
2556
- @media (min-width: 768px) {
2557
- .FAQSection_module_title {
2558
- font-size: 1.875rem;
2559
- }
2560
- }
2561
- .FAQSection_module_subtitle {
2562
- margin-top: 0.75rem;
2563
- font-size: 1rem;
2564
- color: var(--fg-secondary);
2565
- text-align: center;
2566
- }
2567
- .FAQSection_module_list {
2568
- margin-top: 2.5rem;
2569
- }
2570
- .FAQSection_module_item {
2571
- padding: 1.25rem 0;
2572
- }
2573
- .FAQSection_module_item + .FAQSection_module_item {
2574
- border-top: 1px solid var(--border-color);
2575
- }
2576
- .FAQSection_module_question {
2577
- width: 100%;
2578
- display: flex;
2579
- align-items: center;
2580
- justify-content: space-between;
2581
- gap: 1rem;
2582
- text-align: left;
2583
- cursor: pointer;
2584
- background: none;
2585
- border: none;
2586
- padding: 0;
2587
- }
2588
- .FAQSection_module_question:hover .FAQSection_module_questionText {
2589
- color: var(--brand-primary);
2590
- }
2591
- .FAQSection_module_questionText {
2592
- font-size: 15px;
2593
- font-weight: 500;
2594
- color: var(--fg);
2595
- transition: color 0.15s;
2596
- }
2597
- .FAQSection_module_toggleIcon {
2598
- flex-shrink: 0;
2599
- width: 1.25rem;
2600
- height: 1.25rem;
2601
- display: flex;
2602
- align-items: center;
2603
- justify-content: center;
2604
- color: var(--fg-muted);
2605
- transition: transform 0.2s;
2606
- }
2607
- .FAQSection_module_toggleIconOpen {
2608
- transform: rotate(45deg);
2609
- }
2610
- .FAQSection_module_answer {
2611
- overflow: hidden;
2612
- transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
2613
- }
2614
- .FAQSection_module_answerOpen {
2615
- max-height: 24rem;
2616
- opacity: 1;
2617
- margin-top: 0.75rem;
2618
- }
2619
- .FAQSection_module_answerClosed {
2620
- max-height: 0;
2621
- opacity: 0;
2622
- }
2623
- .FAQSection_module_answerText {
2624
- font-size: 14px;
2625
- color: var(--fg-secondary);
2626
- line-height: 1.625;
2627
- padding-right: 2rem;
2628
- }
2629
-
2630
- /* src/organisms/ComparisonTable.module.scss */
2631
- .ComparisonTable_module_root {
2632
- padding: 2.5rem 0;
2633
- }
2634
- @media (min-width: 768px) {
2635
- .ComparisonTable_module_root {
2636
- padding: 3.5rem 0;
2637
- }
2638
- }
2639
- .ComparisonTable_module_scrollWrap {
2640
- overflow-x: auto;
2641
- margin: 0 -1rem;
2642
- padding: 0 1rem;
2643
- }
2644
- .ComparisonTable_module_table {
2645
- width: 100%;
2646
- border-collapse: collapse;
2647
- min-width: 500px;
2648
- }
2649
- .ComparisonTable_module_headerCell {
2650
- text-align: left;
2651
- padding: 1rem;
2652
- font-size: 13px;
2653
- font-weight: 500;
2654
- color: var(--fg-muted);
2655
- letter-spacing: -0.25px;
2656
- width: 40%;
2657
- }
2658
- .ComparisonTable_module_columnHeader {
2659
- padding: 1rem;
2660
- text-align: center;
2661
- font-size: 0.875rem;
2662
- font-weight: 600;
2663
- color: var(--fg);
2664
- }
2665
- .ComparisonTable_module_columnHeaderHighlighted {
2666
- color: var(--brand-primary);
2667
- background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
2668
- border-radius: var(--radius-lg) var(--radius-lg) 0 0;
2669
- }
2670
- .ComparisonTable_module_bodyRow {
2671
- border-top: 1px solid var(--border-color);
2672
- }
2673
- .ComparisonTable_module_featureCell {
2674
- padding: 0.875rem 1rem;
2675
- font-size: 14px;
2676
- color: var(--fg-secondary);
2677
- }
2678
- .ComparisonTable_module_valueCell {
2679
- padding: 0.875rem 1rem;
2680
- text-align: center;
2681
- }
2682
- .ComparisonTable_module_valueCellHighlighted {
2683
- background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
2684
- }
2685
- .ComparisonTable_module_valueCellHighlightedLast {
2686
- border-radius: 0 0 var(--radius-lg) var(--radius-lg);
2687
- }
2688
- .ComparisonTable_module_iconSuccess {
2689
- display: inline-flex;
2690
- color: var(--color-success);
2691
- }
2692
- .ComparisonTable_module_iconMuted {
2693
- display: inline-flex;
2694
- color: color-mix(in srgb, var(--fg-muted) 40%, transparent);
2695
- }
2696
- .ComparisonTable_module_textValue {
2697
- font-size: 13px;
2698
- font-weight: 500;
2699
- color: var(--fg);
2700
- }
2701
-
2702
- /* src/organisms/PromoBento.module.scss */
2703
- .PromoBento_module_root {
2704
- padding: 4rem 0;
2705
- }
2706
- @media (min-width: 768px) {
2707
- .PromoBento_module_root {
2708
- padding: 6rem 0;
2709
- }
2710
- }
2711
- .PromoBento_module_header {
2712
- margin-bottom: 2.5rem;
2713
- max-width: 36rem;
2714
- }
2715
- @media (min-width: 768px) {
2716
- .PromoBento_module_header {
2717
- margin-bottom: 3.5rem;
2718
- }
2719
- }
2720
- .PromoBento_module_heading {
2721
- font-size: clamp(1.75rem, 4vw, 2.75rem);
2722
- font-weight: 700;
2723
- line-height: 1.1;
2724
- letter-spacing: -0.03em;
2725
- color: var(--fg);
2726
- text-wrap: balance;
2727
- }
2728
- .PromoBento_module_subtitle {
2729
- margin-top: 0.75rem;
2730
- font-size: 1rem;
2731
- color: var(--fg-secondary);
2732
- line-height: 1.625;
2733
- }
2734
- .PromoBento_module_grid {
2735
- display: grid;
2736
- grid-template-columns: 1fr;
2737
- gap: 1.5rem;
2738
- }
2739
- @media (min-width: 768px) {
2740
- .PromoBento_module_grid {
2741
- grid-template-columns: repeat(2, 1fr);
2742
- gap: 2.25rem;
2743
- }
2744
- }
2745
- .PromoBento_module_card {
2746
- position: relative;
2747
- display: flex;
2748
- flex-direction: column;
2749
- border-radius: clamp(24px, 3vw, 48px);
2750
- background: var(--bg-secondary);
2751
- overflow: hidden;
2752
- transition: box-shadow var(--transition-slow);
2753
- }
2754
- .PromoBento_module_card:hover {
2755
- box-shadow: var(--shadow-lg);
2756
- }
2757
- .PromoBento_module_cardMedia {
2758
- position: relative;
2759
- flex: 1;
2760
- min-height: 240px;
2761
- overflow: hidden;
2762
- }
2763
- @media (min-width: 768px) {
2764
- .PromoBento_module_cardMedia {
2765
- min-height: 320px;
2766
- }
2767
- }
2768
- .PromoBento_module_cardMediaInner {
2769
- position: absolute;
2770
- inset: 0;
2771
- display: flex;
2772
- align-items: center;
2773
- justify-content: center;
2774
- padding: 1.5rem;
2775
- }
2776
- .PromoBento_module_cardFade {
2777
- position: absolute;
2778
- bottom: 0;
2779
- left: 0;
2780
- right: 0;
2781
- height: 140px;
2782
- pointer-events: none;
2783
- background:
2784
- linear-gradient(
2785
- to top,
2786
- var(--bg-secondary) 0%,
2787
- transparent 100%);
2788
- }
2789
- .PromoBento_module_cardContent {
2790
- position: relative;
2791
- display: flex;
2792
- flex-direction: column;
2793
- gap: 1rem;
2794
- padding: 1.5rem;
2795
- padding-top: 0;
2796
- }
2797
- @media (min-width: 768px) {
2798
- .PromoBento_module_cardContent {
2799
- padding: 2rem;
2800
- padding-top: 0;
2801
- }
2802
- }
2803
- .PromoBento_module_pill {
2804
- display: flex;
2805
- }
2806
- .PromoBento_module_pillInner {
2807
- display: inline-flex;
2808
- align-items: center;
2809
- gap: 0.5rem;
2810
- padding: 0.5rem 1rem;
2811
- border-radius: 9999px;
2812
- background: var(--bg);
2813
- border: 1px solid var(--border-color);
2814
- font-size: 0.875rem;
2815
- font-weight: 600;
2816
- color: var(--fg);
2817
- }
2818
- .PromoBento_module_pillIcon {
2819
- width: 1.25rem;
2820
- height: 1.25rem;
2821
- display: flex;
2822
- align-items: center;
2823
- justify-content: center;
2824
- }
2825
- .PromoBento_module_cardTitle {
2826
- font-size: 1.25rem;
2827
- line-height: 1.2;
2828
- letter-spacing: -0.02em;
2829
- color: var(--fg);
2830
- }
2831
- @media (min-width: 768px) {
2832
- .PromoBento_module_cardTitle {
2833
- font-size: 28px;
2834
- }
2835
- }
2836
- .PromoBento_module_cardDesc {
2837
- font-size: 0.875rem;
2838
- line-height: 1.625;
2839
- color: var(--fg-secondary);
2840
- max-width: 85%;
2841
- }
2842
- @media (min-width: 768px) {
2843
- .PromoBento_module_cardDesc {
2844
- font-size: 1rem;
2845
- }
2846
- }
2847
- .PromoBento_module_cardCta {
2848
- margin-top: 0.25rem;
2849
- }
2850
-
2851
- /* src/organisms/PromoShowcase.module.scss */
2852
- .PromoShowcase_module_root {
2853
- padding-block: 4rem;
2854
- }
2855
- @media (min-width: 768px) {
2856
- .PromoShowcase_module_root {
2857
- padding-block: 6rem;
2858
- }
2859
- }
2860
- .PromoShowcase_module_heading {
2861
- margin-bottom: 2.5rem;
2862
- max-width: 36rem;
2863
- }
2864
- @media (min-width: 768px) {
2865
- .PromoShowcase_module_heading {
2866
- margin-bottom: 3.5rem;
2867
- }
2868
- }
2869
- .PromoShowcase_module_headingText {
2870
- font-size: clamp(1.75rem, 4vw, 2.75rem);
2871
- font-weight: 700;
2872
- line-height: 1.1;
2873
- letter-spacing: -0.03em;
2874
- color: var(--fg);
2875
- text-wrap: balance;
2876
- }
2877
- .PromoShowcase_module_body {
2878
- display: flex;
2879
- flex-direction: column;
2880
- gap: 1.5rem;
2881
- }
2882
- @media (min-width: 768px) {
2883
- .PromoShowcase_module_body {
2884
- gap: 2rem;
2885
- }
2886
- }
2887
- .PromoShowcase_module_stepper {
2888
- display: flex;
2889
- gap: 0.25rem;
2890
- padding: 0.25rem;
2891
- border-radius: 9999px;
2892
- background: var(--bg-secondary);
2893
- border: 1px solid var(--border-color);
2894
- width: fit-content;
2895
- }
2896
- .PromoShowcase_module_stepButton {
2897
- padding: 0.625rem 1.25rem;
2898
- border-radius: 9999px;
2899
- font-size: 0.875rem;
2900
- font-weight: 500;
2901
- transition: all var(--transition-base);
2902
- cursor: pointer;
2903
- border: none;
2904
- background: none;
2905
- color: var(--fg-secondary);
2906
- }
2907
- .PromoShowcase_module_stepButton:hover {
2908
- color: var(--fg);
2909
- background: var(--bg-tertiary);
2910
- }
2911
- .PromoShowcase_module_stepButtonActive {
2912
- background: var(--fg);
2913
- color: var(--bg);
2914
- box-shadow: var(--shadow-sm);
2915
- }
2916
- .PromoShowcase_module_stepButtonActive:hover {
2917
- background: var(--fg);
2918
- color: var(--bg);
2919
- }
2920
- .PromoShowcase_module_contentArea {
2921
- position: relative;
2922
- border-radius: clamp(16px, 2vw, 32px);
2923
- border: 1px solid var(--border-color);
2924
- background: var(--bg-secondary);
2925
- overflow: hidden;
2926
- min-height: 300px;
2927
- }
2928
- @media (min-width: 768px) {
2929
- .PromoShowcase_module_contentArea {
2930
- min-height: 480px;
2931
- }
2932
- }
2933
- .PromoShowcase_module_panel {
2934
- position: absolute;
2935
- inset: 0;
2936
- transition: opacity 300ms ease-out;
2937
- opacity: 0;
2938
- z-index: 0;
2939
- pointer-events: none;
2940
- }
2941
- .PromoShowcase_module_panelActive {
2942
- opacity: 1;
2943
- z-index: 10;
2944
- pointer-events: auto;
2945
- }
2946
- .PromoShowcase_module_panelInner {
2947
- width: 100%;
2948
- height: 100%;
2949
- display: flex;
2950
- align-items: center;
2951
- justify-content: center;
2952
- padding: 1.5rem;
2953
- }
2954
- @media (min-width: 768px) {
2955
- .PromoShowcase_module_panelInner {
2956
- padding: 2.5rem;
2957
- }
2958
- }
2959
-
2960
- /* src/organisms/PromoSplit.module.scss */
2961
- .PromoSplit_module_root {
2962
- padding: 4rem 0;
2963
- }
2964
- @media (min-width: 768px) {
2965
- .PromoSplit_module_root {
2966
- padding: 6rem 0;
2967
- }
2968
- }
2969
- .PromoSplit_module_grid {
2970
- display: grid;
2971
- grid-template-columns: 1fr;
2972
- gap: 2.5rem;
2973
- align-items: center;
2974
- }
2975
- @media (min-width: 768px) {
2976
- .PromoSplit_module_grid {
2977
- gap: 4rem;
2978
- }
2979
- }
2980
- @media (min-width: 1024px) {
2981
- .PromoSplit_module_grid {
2982
- grid-template-columns: repeat(2, 1fr);
2983
- }
2984
- }
2985
- .PromoSplit_module_gridReversed {
2986
- }
2987
- @media (min-width: 1024px) {
2988
- .PromoSplit_module_gridReversed {
2989
- direction: rtl;
2990
- }
2991
- }
2992
- .PromoSplit_module_textColumn {
2993
- display: flex;
2994
- flex-direction: column;
2995
- gap: 1.5rem;
2996
- }
2997
- @media (min-width: 1024px) {
2998
- .PromoSplit_module_textColumnLtr {
2999
- direction: ltr;
3000
- }
3001
- }
3002
- .PromoSplit_module_heading {
3003
- font-size: clamp(1.75rem, 4vw, 2.75rem);
3004
- font-weight: 700;
3005
- line-height: 1.1;
3006
- letter-spacing: -0.03em;
3007
- color: var(--fg);
3008
- text-wrap: balance;
3009
- }
3010
- .PromoSplit_module_description {
3011
- font-size: 1rem;
3012
- line-height: 1.625;
3013
- color: var(--fg-secondary);
3014
- }
3015
- @media (min-width: 768px) {
3016
- .PromoSplit_module_description {
3017
- font-size: 1.125rem;
3018
- }
3019
- }
3020
- .PromoSplit_module_features {
3021
- display: flex;
3022
- flex-direction: column;
3023
- gap: 1.25rem;
3024
- margin-top: 0.5rem;
3025
- }
3026
- .PromoSplit_module_feature {
3027
- display: flex;
3028
- flex-direction: column;
3029
- gap: 0.375rem;
3030
- }
3031
- .PromoSplit_module_featureTitle {
3032
- font-size: 1rem;
3033
- font-weight: 600;
3034
- color: var(--fg);
3035
- }
3036
- .PromoSplit_module_featureDesc {
3037
- font-size: 0.875rem;
3038
- color: var(--fg-secondary);
3039
- line-height: 1.625;
3040
- }
3041
- .PromoSplit_module_mediaColumn {
3042
- position: relative;
3043
- }
3044
- @media (min-width: 1024px) {
3045
- .PromoSplit_module_mediaColumnLtr {
3046
- direction: ltr;
3047
- }
3048
- }
3049
- .PromoSplit_module_mediaBox {
3050
- position: relative;
3051
- border-radius: clamp(16px, 2vw, 32px);
3052
- background: var(--bg-secondary);
3053
- border: 1px solid var(--border-color);
3054
- overflow: hidden;
3055
- min-height: 280px;
3056
- }
3057
- @media (min-width: 768px) {
3058
- .PromoSplit_module_mediaBox {
3059
- min-height: 380px;
3060
- }
3061
- }
3062
- .PromoSplit_module_mediaContent {
3063
- position: absolute;
3064
- inset: 0;
3065
- display: flex;
3066
- align-items: center;
3067
- justify-content: center;
3068
- padding: 1.5rem;
3069
- }
3070
- .PromoSplit_module_mediaPlaceholder {
3071
- position: absolute;
3072
- inset: 0;
3073
- display: flex;
3074
- align-items: center;
3075
- justify-content: center;
3076
- }
3077
- .PromoSplit_module_placeholderCircle {
3078
- width: 5rem;
3079
- height: 5rem;
3080
- border-radius: 9999px;
3081
- background: var(--bg-tertiary);
3082
- display: flex;
3083
- align-items: center;
3084
- justify-content: center;
3085
- }
3086
-
3087
- /* src/organisms/PromoTrustGrid.module.scss */
3088
- .PromoTrustGrid_module_root {
3089
- padding-block: 4rem;
3090
- }
3091
- @media (min-width: 768px) {
3092
- .PromoTrustGrid_module_root {
3093
- padding-block: 6rem;
3094
- }
3095
- }
3096
- .PromoTrustGrid_module_heading {
3097
- margin-bottom: 2.5rem;
3098
- }
3099
- @media (min-width: 768px) {
3100
- .PromoTrustGrid_module_heading {
3101
- margin-bottom: 3.5rem;
3102
- }
3103
- }
3104
- .PromoTrustGrid_module_headingText {
3105
- font-size: clamp(1.75rem, 4vw, 2.75rem);
3106
- font-weight: 700;
3107
- line-height: 1.1;
3108
- letter-spacing: -0.03em;
3109
- color: var(--fg);
3110
- text-wrap: balance;
3111
- }
3112
- .PromoTrustGrid_module_grid {
3113
- display: grid;
3114
- grid-template-columns: 1fr;
3115
- gap: 1.5rem;
3116
- margin-bottom: 2.5rem;
3117
- }
3118
- @media (min-width: 768px) {
3119
- .PromoTrustGrid_module_grid {
3120
- grid-template-columns: repeat(3, 1fr);
3121
- margin-bottom: 3.5rem;
3122
- }
3123
- }
3124
- .PromoTrustGrid_module_featureCard {
3125
- position: relative;
3126
- display: flex;
3127
- flex-direction: column;
3128
- gap: 0.75rem;
3129
- padding: 1.5rem;
3130
- border-radius: var(--radius-xl);
3131
- background: var(--bg);
3132
- border: 1px solid var(--border-color);
3133
- transition: all var(--transition-base);
3134
- }
3135
- @media (min-width: 768px) {
3136
- .PromoTrustGrid_module_featureCard {
3137
- padding: 2rem;
3138
- }
3139
- }
3140
- .PromoTrustGrid_module_featureCard:hover {
3141
- box-shadow: var(--shadow-md);
3142
- transform: translateY(-2px);
3143
- }
3144
- .PromoTrustGrid_module_featureIcon {
3145
- width: 2.5rem;
3146
- height: 2.5rem;
3147
- border-radius: var(--radius-lg);
3148
- background: color-mix(in srgb, var(--fg) 5%, transparent);
3149
- display: flex;
3150
- align-items: center;
3151
- justify-content: center;
3152
- color: var(--fg);
3153
- margin-bottom: 0.25rem;
3154
- }
3155
- .PromoTrustGrid_module_featureTitle {
3156
- font-size: 1rem;
3157
- font-weight: 600;
3158
- color: var(--fg);
3159
- line-height: 1.4;
3160
- }
3161
- .PromoTrustGrid_module_featureDescription {
3162
- font-size: 0.875rem;
3163
- color: var(--fg-secondary);
3164
- line-height: 1.625;
3165
- }
3166
- .PromoTrustGrid_module_media {
3167
- position: relative;
3168
- border-radius: clamp(16px, 2vw, 32px);
3169
- background: var(--bg-secondary);
3170
- border: 1px solid var(--border-color);
3171
- overflow: hidden;
3172
- min-height: 280px;
3173
- }
3174
- @media (min-width: 768px) {
3175
- .PromoTrustGrid_module_media {
3176
- min-height: 420px;
3177
- }
3178
- }
3179
- .PromoTrustGrid_module_mediaInner {
3180
- position: absolute;
3181
- inset: 0;
3182
- display: flex;
3183
- align-items: center;
3184
- justify-content: center;
3185
- padding: 1.5rem;
3186
- }
3187
-
3188
- /* src/organisms/PromoDevicesCTA.module.scss */
3189
- .PromoDevicesCTA_module_root {
3190
- padding-block: 4rem;
3191
- }
3192
- @media (min-width: 768px) {
3193
- .PromoDevicesCTA_module_root {
3194
- padding-block: 6rem;
3195
- }
3196
- }
3197
- .PromoDevicesCTA_module_textBlock {
3198
- max-width: 42rem;
3199
- margin-inline: auto;
3200
- text-align: center;
3201
- margin-bottom: 2rem;
3202
- }
3203
- @media (min-width: 768px) {
3204
- .PromoDevicesCTA_module_textBlock {
3205
- margin-bottom: 2.5rem;
3206
- }
3207
- }
3208
- .PromoDevicesCTA_module_heading {
3209
- font-size: clamp(1.75rem, 4vw, 2.75rem);
3210
- font-weight: 700;
3211
- line-height: 1.1;
3212
- letter-spacing: -0.03em;
3213
- color: var(--fg);
3214
- text-wrap: balance;
3215
- }
3216
- .PromoDevicesCTA_module_description {
3217
- margin-top: 1rem;
3218
- font-size: 1rem;
3219
- line-height: 1.625;
3220
- color: var(--fg-secondary);
3221
- }
3222
- @media (min-width: 768px) {
3223
- .PromoDevicesCTA_module_description {
3224
- font-size: 1.125rem;
3225
- }
3226
- }
3227
- .PromoDevicesCTA_module_ctaWrap {
3228
- margin-top: 1.5rem;
3229
- display: flex;
3230
- justify-content: center;
3231
- }
3232
- .PromoDevicesCTA_module_devices {
3233
- position: relative;
3234
- display: flex;
3235
- align-items: flex-end;
3236
- justify-content: center;
3237
- gap: 1.5rem;
3238
- padding-inline: 1rem;
3239
- max-width: 56rem;
3240
- margin-inline: auto;
3241
- }
3242
- @media (min-width: 768px) {
3243
- .PromoDevicesCTA_module_devices {
3244
- gap: 2.5rem;
3245
- padding-inline: 0;
3246
- }
3247
- }
3248
- .PromoDevicesCTA_module_laptop {
3249
- display: none;
3250
- position: relative;
3251
- width: 38%;
3252
- max-width: 380px;
3253
- }
3254
- @media (min-width: 768px) {
3255
- .PromoDevicesCTA_module_laptop {
3256
- display: block;
3257
- }
3258
- }
3259
- .PromoDevicesCTA_module_laptopScreen {
3260
- aspect-ratio: 16/10;
3261
- border-top-left-radius: var(--radius-lg);
3262
- border-top-right-radius: var(--radius-lg);
3263
- border: 1px solid var(--border-color);
3264
- border-bottom: none;
3265
- background: var(--bg-secondary);
3266
- overflow: hidden;
3267
- box-shadow: var(--shadow-md);
3268
- }
3269
- .PromoDevicesCTA_module_laptopScreenInner {
3270
- position: absolute;
3271
- inset: 0.75rem;
3272
- border-radius: var(--radius-md);
3273
- background: var(--bg-tertiary);
3274
- }
3275
- .PromoDevicesCTA_module_laptopHinge {
3276
- height: 0.625rem;
3277
- background: var(--bg-tertiary);
3278
- border: 1px solid var(--border-color);
3279
- border-radius: 0 0 2px 2px;
3280
- }
3281
- .PromoDevicesCTA_module_laptopBase {
3282
- height: 0.25rem;
3283
- background: var(--bg-tertiary);
3284
- border-left: 1px solid var(--border-color);
3285
- border-right: 1px solid var(--border-color);
3286
- border-bottom: 1px solid var(--border-color);
3287
- border-radius: 0 0 var(--radius-sm) var(--radius-sm);
3288
- margin-inline: -4%;
3289
- }
3290
- .PromoDevicesCTA_module_tablet {
3291
- position: relative;
3292
- width: 40%;
3293
- max-width: 280px;
3294
- }
3295
- @media (min-width: 768px) {
3296
- .PromoDevicesCTA_module_tablet {
3297
- width: 28%;
3298
- }
3299
- }
3300
- .PromoDevicesCTA_module_tabletShell {
3301
- aspect-ratio: 3/4;
3302
- border-radius: var(--radius-xl);
3303
- border: 2px solid var(--border-color);
3304
- background: var(--bg-secondary);
3305
- overflow: hidden;
3306
- box-shadow: var(--shadow-lg);
3307
- }
3308
- .PromoDevicesCTA_module_tabletScreen {
3309
- position: absolute;
3310
- inset: 0.625rem;
3311
- border-radius: var(--radius-lg);
3312
- background: var(--bg-tertiary);
3313
- }
3314
- .PromoDevicesCTA_module_phone {
3315
- position: relative;
3316
- width: 24%;
3317
- max-width: 140px;
3318
- }
3319
- @media (min-width: 768px) {
3320
- .PromoDevicesCTA_module_phone {
3321
- width: 14%;
3322
- }
3323
- }
3324
- .PromoDevicesCTA_module_phoneShell {
3325
- aspect-ratio: 9/19;
3326
- border-radius: clamp(12px, 2vw, 24px);
3327
- border: 2px solid var(--border-color);
3328
- background: var(--bg-secondary);
3329
- overflow: hidden;
3330
- box-shadow: var(--shadow-lg);
3331
- }
3332
- .PromoDevicesCTA_module_phoneNotch {
3333
- position: absolute;
3334
- top: 0.375rem;
3335
- left: 50%;
3336
- transform: translateX(-50%);
3337
- width: 40%;
3338
- height: 3%;
3339
- border-radius: 9999px;
3340
- background: var(--border-color);
3341
- }
3342
- .PromoDevicesCTA_module_phoneScreen {
3343
- position: absolute;
3344
- inset: 0.375rem;
3345
- top: 6%;
3346
- border-radius: clamp(8px, 1.5vw, 16px);
3347
- background: var(--bg-tertiary);
3348
- }
3349
-
3350
- /* src/organisms/PromoTestimonials.module.scss */
3351
- .PromoTestimonials_module_root {
3352
- padding: 4rem 0;
3353
- }
3354
- @media (min-width: 768px) {
3355
- .PromoTestimonials_module_root {
3356
- padding: 6rem 0;
3357
- }
3358
- }
3359
- .PromoTestimonials_module_wrapper {
3360
- position: relative;
3361
- border-radius: clamp(20px, 3vw, 40px);
3362
- border: 1px solid var(--border-color);
3363
- background: var(--bg);
3364
- overflow: hidden;
3365
- }
3366
- .PromoTestimonials_module_avatarSection {
3367
- display: flex;
3368
- justify-content: center;
3369
- padding: 2.5rem 0 0.5rem;
3370
- }
3371
- @media (min-width: 768px) {
3372
- .PromoTestimonials_module_avatarSection {
3373
- padding-top: 3.5rem;
3374
- }
3375
- }
3376
- .PromoTestimonials_module_avatarStack {
3377
- display: flex;
3378
- }
3379
- .PromoTestimonials_module_avatarStack > * + * {
3380
- margin-left: -0.75rem;
3381
- }
3382
- .PromoTestimonials_module_avatarRing {
3383
- position: relative;
3384
- border-radius: 9999px;
3385
- box-shadow: 0 0 0 3px var(--bg);
3386
- }
3387
- .PromoTestimonials_module_overflowBadge {
3388
- position: relative;
3389
- border-radius: 9999px;
3390
- box-shadow: 0 0 0 3px var(--bg);
3391
- z-index: 0;
3392
- }
3393
- .PromoTestimonials_module_overflowCircle {
3394
- width: 2.5rem;
3395
- height: 2.5rem;
3396
- border-radius: 9999px;
3397
- background: var(--bg-tertiary);
3398
- display: flex;
3399
- align-items: center;
3400
- justify-content: center;
3401
- font-size: 0.75rem;
3402
- font-weight: 600;
3403
- color: var(--fg-secondary);
3404
- }
3405
- .PromoTestimonials_module_headingSection {
3406
- text-align: center;
3407
- padding: 0 1.5rem 2rem;
3408
- }
3409
- @media (min-width: 768px) {
3410
- .PromoTestimonials_module_headingSection {
3411
- padding-bottom: 2.5rem;
3412
- }
3413
- }
3414
- .PromoTestimonials_module_heading {
3415
- font-size: clamp(1.75rem, 4vw, 2.75rem);
3416
- font-weight: 700;
3417
- line-height: 1.1;
3418
- letter-spacing: -0.03em;
3419
- color: var(--fg);
3420
- text-wrap: balance;
3421
- }
3422
- .PromoTestimonials_module_subtitle {
3423
- margin-top: 0.75rem;
3424
- font-size: 1rem;
3425
- color: var(--fg-secondary);
3426
- line-height: 1.625;
3427
- max-width: 32rem;
3428
- margin-left: auto;
3429
- margin-right: auto;
3430
- }
3431
- .PromoTestimonials_module_cardsSection {
3432
- padding: 0 1.5rem 2rem;
3433
- }
3434
- @media (min-width: 768px) {
3435
- .PromoTestimonials_module_cardsSection {
3436
- padding: 0 2.5rem 3rem;
3437
- }
3438
- }
3439
- .PromoTestimonials_module_cardsGrid {
3440
- display: grid;
3441
- grid-template-columns: 1fr;
3442
- gap: 1rem;
3443
- }
3444
- @media (min-width: 768px) {
3445
- .PromoTestimonials_module_cardsGrid {
3446
- grid-template-columns: repeat(2, 1fr);
3447
- gap: 1.25rem;
3448
- }
3449
- }
3450
- @media (min-width: 1024px) {
3451
- .PromoTestimonials_module_cardsGrid {
3452
- grid-template-columns: repeat(3, 1fr);
3453
- }
3454
- }
3455
- .PromoTestimonials_module_card {
3456
- display: flex;
3457
- flex-direction: column;
3458
- gap: 1rem;
3459
- padding: 1.25rem;
3460
- border-radius: var(--radius-xl);
3461
- border: 1px solid var(--border-color);
3462
- background: var(--bg);
3463
- transition: box-shadow var(--transition-base);
3464
- }
3465
- @media (min-width: 768px) {
3466
- .PromoTestimonials_module_card {
3467
- padding: 1.5rem;
3468
- }
3469
- }
3470
- .PromoTestimonials_module_card:hover {
3471
- box-shadow: var(--shadow-md);
3472
- }
3473
- .PromoTestimonials_module_quote {
3474
- font-size: 0.875rem;
3475
- color: var(--fg-secondary);
3476
- line-height: 1.625;
3477
- flex: 1;
3478
- }
3479
- .PromoTestimonials_module_author {
3480
- display: flex;
3481
- align-items: center;
3482
- gap: 0.75rem;
3483
- padding-top: 0.25rem;
3484
- }
3485
- .PromoTestimonials_module_authorName {
3486
- font-size: 0.875rem;
3487
- font-weight: 500;
3488
- color: var(--fg);
3489
- }
3490
- .PromoTestimonials_module_authorRole {
3491
- font-size: 0.75rem;
3492
- color: var(--fg-muted);
3493
- }
3494
- .PromoTestimonials_module_mediaSection {
3495
- padding: 0 1.5rem 2rem;
3496
- }
3497
- @media (min-width: 768px) {
3498
- .PromoTestimonials_module_mediaSection {
3499
- padding: 0 2.5rem 3rem;
3500
- }
3501
- }
3502
- .PromoTestimonials_module_mediaBox {
3503
- border-radius: var(--radius-xl);
3504
- background: var(--bg-secondary);
3505
- overflow: hidden;
3506
- }
3507
-
3508
- /* src/organisms/PromoHero.module.scss */
3509
- .PromoHero_module_root {
3510
- position: relative;
3511
- overflow: hidden;
3512
- border-radius: clamp(20px, 3vw, 40px);
3513
- min-height: 480px;
3514
- display: flex;
3515
- align-items: center;
3516
- }
3517
- @media (min-width: 768px) {
3518
- .PromoHero_module_root {
3519
- min-height: 600px;
3520
- }
3521
- }
3522
- .PromoHero_module_dark {
3523
- background: var(--neutral-900);
3524
- color: white;
3525
- }
3526
- .PromoHero_module_light {
3527
- background: var(--bg);
3528
- color: var(--fg);
3529
- }
3530
- .PromoHero_module_gradient {
3531
- background:
3532
- linear-gradient(
3533
- to bottom right,
3534
- var(--neutral-900),
3535
- var(--neutral-800),
3536
- var(--neutral-700));
3537
- color: white;
3538
- }
3539
- .PromoHero_module_glowLayer {
3540
- position: absolute;
3541
- inset: 0;
3542
- pointer-events: none;
3543
- }
3544
- .PromoHero_module_glowTop {
3545
- position: absolute;
3546
- top: -20%;
3547
- right: -10%;
3548
- width: 600px;
3549
- height: 600px;
3550
- border-radius: 9999px;
3551
- background: rgba(255, 255, 255, 0.03);
3552
- filter: blur(100px);
3553
- }
3554
- .PromoHero_module_glowBottom {
3555
- position: absolute;
3556
- bottom: -30%;
3557
- left: -5%;
3558
- width: 400px;
3559
- height: 400px;
3560
- border-radius: 9999px;
3561
- background: rgba(255, 255, 255, 0.02);
3562
- filter: blur(80px);
3563
- }
3564
- .PromoHero_module_inner {
3565
- position: relative;
3566
- z-index: 10;
3567
- display: grid;
3568
- grid-template-columns: 1fr;
3569
- gap: 2.5rem;
3570
- width: 100%;
3571
- padding: 2rem;
3572
- align-items: center;
3573
- }
3574
- @media (min-width: 768px) {
3575
- .PromoHero_module_inner {
3576
- gap: 4rem;
3577
- padding: 3rem;
3578
- }
3579
- }
3580
- @media (min-width: 1024px) {
3581
- .PromoHero_module_inner {
3582
- grid-template-columns: repeat(2, 1fr);
3583
- padding: 4rem;
3584
- }
3585
- }
3586
- .PromoHero_module_textColumn {
3587
- display: flex;
3588
- flex-direction: column;
3589
- gap: 1.25rem;
3590
- }
3591
- @media (min-width: 768px) {
3592
- .PromoHero_module_textColumn {
3593
- gap: 1.5rem;
3594
- }
3595
- }
3596
- .PromoHero_module_title {
3597
- font-size: clamp(2.25rem, 5.5vw, 5rem);
3598
- font-weight: 700;
3599
- line-height: 0.95;
3600
- letter-spacing: -0.04em;
3601
- text-wrap: balance;
3602
- }
3603
- .PromoHero_module_subtitle {
3604
- font-size: 1rem;
3605
- line-height: 1.625;
3606
- max-width: 32rem;
3607
- }
3608
- @media (min-width: 768px) {
3609
- .PromoHero_module_subtitle {
3610
- font-size: 1.125rem;
3611
- }
3612
- }
3613
- .PromoHero_module_subtitleDark {
3614
- color: rgba(255, 255, 255, 0.7);
3615
- }
3616
- .PromoHero_module_subtitleLight {
3617
- color: var(--fg-secondary);
3618
- }
3619
- .PromoHero_module_actions {
3620
- display: flex;
3621
- flex-wrap: wrap;
3622
- gap: 0.75rem;
3623
- margin-top: 0.5rem;
3624
- }
3625
- .PromoHero_module_ctaDark {
3626
- border-color: rgba(255, 255, 255, 0.2);
3627
- color: white;
3628
- }
3629
- .PromoHero_module_ctaDark:hover {
3630
- background: rgba(255, 255, 255, 0.1);
3631
- }
3632
- .PromoHero_module_ghostDark {
3633
- color: rgba(255, 255, 255, 0.7);
3634
- }
3635
- .PromoHero_module_ghostDark:hover {
3636
- color: white;
3637
- background: rgba(255, 255, 255, 0.05);
3638
- }
3639
- .PromoHero_module_mediaColumn {
3640
- position: relative;
3641
- display: flex;
3642
- align-items: center;
3643
- justify-content: center;
3644
- }
3645
-
3646
- /* src/organisms/PromoPricing.module.scss */
3647
- .PromoPricing_module_root {
3648
- padding: 4rem 1.5rem;
3649
- border-radius: clamp(20px, 3vw, 40px);
3650
- }
3651
- @media (min-width: 768px) {
3652
- .PromoPricing_module_root {
3653
- padding: 6rem 3rem;
3654
- }
3655
- }
3656
- .PromoPricing_module_dark {
3657
- background: var(--neutral-900);
3658
- color: white;
3659
- }
3660
- .PromoPricing_module_light {
3661
- background: var(--bg);
3662
- }
3663
- .PromoPricing_module_headingSection {
3664
- text-align: center;
3665
- margin-bottom: 2.5rem;
3666
- max-width: 42rem;
3667
- margin-left: auto;
3668
- margin-right: auto;
3669
- }
3670
- @media (min-width: 768px) {
3671
- .PromoPricing_module_headingSection {
3672
- margin-bottom: 3.5rem;
3673
- }
3674
- }
3675
- .PromoPricing_module_heading {
3676
- font-size: clamp(2rem, 5vw, 4.75rem);
3677
- font-weight: 700;
3678
- line-height: 0.95;
3679
- letter-spacing: -0.04em;
3680
- text-wrap: balance;
3681
- }
3682
- .PromoPricing_module_headingDark {
3683
- color: white;
3684
- }
3685
- .PromoPricing_module_headingLight {
3686
- color: var(--fg);
3687
- }
3688
- .PromoPricing_module_subtitle {
3689
- margin-top: 1rem;
3690
- font-size: 1rem;
3691
- line-height: 1.625;
3692
- }
3693
- @media (min-width: 768px) {
3694
- .PromoPricing_module_subtitle {
3695
- font-size: 1.125rem;
3696
- }
3697
- }
3698
- .PromoPricing_module_subtitleDark {
3699
- color: rgba(255, 255, 255, 0.6);
3700
- }
3701
- .PromoPricing_module_subtitleLight {
3702
- color: var(--fg-secondary);
3703
- }
3704
- .PromoPricing_module_tiersGrid {
3705
- display: grid;
3706
- grid-template-columns: 1fr;
3707
- gap: 1.25rem;
3708
- max-width: 64rem;
3709
- margin: 0 auto;
3710
- }
3711
- @media (min-width: 768px) {
3712
- .PromoPricing_module_tiersGrid {
3713
- grid-template-columns: repeat(2, 1fr);
3714
- gap: 1.5rem;
3715
- }
3716
- }
3717
- @media (min-width: 1024px) {
3718
- .PromoPricing_module_tiersGrid {
3719
- grid-template-columns: repeat(3, 1fr);
3720
- }
3721
- }
3722
- .PromoPricing_module_tierCard {
3723
- position: relative;
3724
- display: flex;
3725
- flex-direction: column;
3726
- border-radius: var(--radius-xl);
3727
- padding: 1.5rem;
3728
- transition: all var(--transition-base);
3729
- }
3730
- @media (min-width: 768px) {
3731
- .PromoPricing_module_tierCard {
3732
- padding: 2rem;
3733
- }
3734
- }
3735
- .PromoPricing_module_tierDefault {
3736
- background: var(--bg);
3737
- border: 1px solid var(--border-color);
3738
- }
3739
- .PromoPricing_module_tierDefault:hover {
3740
- box-shadow: var(--shadow-md);
3741
- transform: translateY(-2px);
3742
- }
3743
- .PromoPricing_module_tierHighlighted {
3744
- background: var(--fg);
3745
- color: var(--bg);
3746
- box-shadow: var(--shadow-xl);
3747
- }
3748
- .PromoPricing_module_tierDark {
3749
- background: rgba(255, 255, 255, 0.06);
3750
- border: 1px solid rgba(255, 255, 255, 0.1);
3751
- color: white;
3752
- }
3753
- .PromoPricing_module_tierDark:hover {
3754
- background: rgba(255, 255, 255, 0.1);
3755
- }
3756
- .PromoPricing_module_tierDarkHighlighted {
3757
- background: white;
3758
- color: var(--neutral-900);
3759
- box-shadow: 0 0 60px rgba(255, 255, 255, 0.1);
3760
- }
3761
- .PromoPricing_module_tierName {
3762
- font-size: 0.875rem;
3763
- font-weight: 600;
3764
- text-transform: uppercase;
3765
- letter-spacing: 0.06em;
3766
- margin-bottom: 1rem;
3767
- }
3768
- .PromoPricing_module_tierNameMuted {
3769
- color: var(--fg-muted);
3770
- }
3771
- .PromoPricing_module_tierNameDark {
3772
- color: rgba(255, 255, 255, 0.5);
3773
- }
3774
- .PromoPricing_module_tierNameHighlightedLight {
3775
- color: color-mix(in srgb, var(--bg) 60%, transparent);
3776
- }
3777
- .PromoPricing_module_tierNameHighlightedDark {
3778
- color: var(--neutral-500);
3779
- }
3780
- .PromoPricing_module_price {
3781
- font-size: 2.25rem;
3782
- font-weight: 700;
3783
- letter-spacing: -0.03em;
3784
- margin-bottom: 0.5rem;
3785
- }
3786
- @media (min-width: 768px) {
3787
- .PromoPricing_module_price {
3788
- font-size: 3rem;
3789
- }
3790
- }
3791
- .PromoPricing_module_period {
3792
- font-size: 0.875rem;
3793
- margin-left: 0.25rem;
3794
- }
3795
- .PromoPricing_module_periodMuted {
3796
- color: var(--fg-muted);
3797
- }
3798
- .PromoPricing_module_periodDark {
3799
- color: rgba(255, 255, 255, 0.4);
3800
- }
3801
- .PromoPricing_module_periodHighlightedLight {
3802
- color: color-mix(in srgb, var(--bg) 50%, transparent);
3803
- }
3804
- .PromoPricing_module_periodHighlightedDark {
3805
- color: var(--neutral-500);
3806
- }
3807
- .PromoPricing_module_tierDesc {
3808
- font-size: 0.875rem;
3809
- margin-bottom: 1.5rem;
3810
- }
3811
- .PromoPricing_module_tierDescMuted {
3812
- color: var(--fg-secondary);
3813
- }
3814
- .PromoPricing_module_tierDescDark {
3815
- color: rgba(255, 255, 255, 0.5);
3816
- }
3817
- .PromoPricing_module_tierDescHighlightedLight {
3818
- color: color-mix(in srgb, var(--bg) 60%, transparent);
3819
- }
3820
- .PromoPricing_module_tierDescHighlightedDark {
3821
- color: var(--neutral-600);
3822
- }
3823
- .PromoPricing_module_featureList {
3824
- display: flex;
3825
- flex-direction: column;
3826
- gap: 0.625rem;
3827
- margin-bottom: 2rem;
3828
- flex: 1;
3829
- list-style: none;
3830
- padding: 0;
3831
- }
3832
- .PromoPricing_module_featureItem {
3833
- display: flex;
3834
- align-items: flex-start;
3835
- gap: 0.625rem;
3836
- font-size: 0.875rem;
3837
- }
3838
- .PromoPricing_module_checkIcon {
3839
- flex-shrink: 0;
3840
- margin-top: 2px;
3841
- }
3842
- .PromoPricing_module_checkDefault {
3843
- color: var(--color-success);
3844
- }
3845
- .PromoPricing_module_checkDark {
3846
- color: rgba(255, 255, 255, 0.4);
3847
- }
3848
- .PromoPricing_module_checkHighlightedLight {
3849
- color: var(--color-success-light);
3850
- }
3851
- .PromoPricing_module_checkHighlightedDark {
3852
- color: var(--color-success);
3853
- }
3854
- .PromoPricing_module_featureText {
3855
- }
3856
- .PromoPricing_module_featureTextMuted {
3857
- color: var(--fg-secondary);
3858
- }
3859
- .PromoPricing_module_featureTextDark {
3860
- color: rgba(255, 255, 255, 0.7);
3861
- }
3862
- .PromoPricing_module_featureTextHighlightedLight {
3863
- color: color-mix(in srgb, var(--bg) 80%, transparent);
3864
- }
3865
- .PromoPricing_module_featureTextHighlightedDark {
3866
- color: var(--neutral-700);
3867
- }
3868
- .PromoPricing_module_ctaWrap {
3869
- margin-top: auto;
3870
- }
3871
-
3872
- /* src/organisms/PromoActionCards.module.scss */
3873
- .PromoActionCards_module_root {
3874
- padding: 4rem 0;
3875
- }
3876
- @media (min-width: 768px) {
3877
- .PromoActionCards_module_root {
3878
- padding: 6rem 0;
3879
- }
3880
- }
3881
- .PromoActionCards_module_header {
3882
- margin-bottom: 2.5rem;
3883
- max-width: 36rem;
3884
- }
3885
- @media (min-width: 768px) {
3886
- .PromoActionCards_module_header {
3887
- margin-bottom: 3.5rem;
3888
- }
3889
- }
3890
- .PromoActionCards_module_heading {
3891
- font-size: clamp(1.25rem, 3vw, 1.5rem);
3892
- font-weight: 500;
3893
- line-height: 1.3;
3894
- letter-spacing: -0.01em;
3895
- color: var(--fg-secondary);
3896
- text-wrap: balance;
3897
- }
3898
- .PromoActionCards_module_subtitle {
3899
- margin-top: 0.5rem;
3900
- font-size: 0.875rem;
3901
- color: var(--fg-muted);
3902
- }
3903
- .PromoActionCards_module_grid {
3904
- display: grid;
3905
- grid-template-columns: 1fr;
3906
- gap: 1rem;
3907
- }
3908
- @media (min-width: 768px) {
3909
- .PromoActionCards_module_grid {
3910
- gap: 1.25rem;
3911
- }
3912
- }
3913
- .PromoActionCards_module_grid2 {
3914
- }
3915
- @media (min-width: 768px) {
3916
- .PromoActionCards_module_grid2 {
3917
- grid-template-columns: repeat(2, 1fr);
3918
- }
3919
- }
3920
- .PromoActionCards_module_grid3 {
3921
- }
3922
- @media (min-width: 768px) {
3923
- .PromoActionCards_module_grid3 {
3924
- grid-template-columns: repeat(2, 1fr);
3925
- }
3926
- }
3927
- @media (min-width: 1024px) {
3928
- .PromoActionCards_module_grid3 {
3929
- grid-template-columns: repeat(3, 1fr);
3930
- }
3931
- }
3932
- .PromoActionCards_module_card {
3933
- display: flex;
3934
- flex-direction: column;
3935
- gap: 1rem;
3936
- padding: 1.25rem;
3937
- border-radius: var(--radius-xl);
3938
- border: 1px solid var(--border-color);
3939
- background: var(--bg);
3940
- transition: box-shadow var(--transition-base), border-color var(--transition-base);
3941
- }
3942
- @media (min-width: 768px) {
3943
- .PromoActionCards_module_card {
3944
- padding: 1.5rem;
3945
- }
3946
- }
3947
- .PromoActionCards_module_card:hover {
3948
- box-shadow: var(--shadow-md);
3949
- border-color: var(--border-color-strong);
3950
- }
3951
- .PromoActionCards_module_cardContent {
3952
- display: flex;
3953
- flex-direction: column;
3954
- gap: 0.5rem;
3955
- flex: 1;
3956
- }
3957
- .PromoActionCards_module_cardTitle {
3958
- font-size: 15px;
3959
- font-weight: 600;
3960
- color: var(--fg);
3961
- line-height: 1.4;
3962
- }
3963
- .PromoActionCards_module_cardDesc {
3964
- font-size: 0.875rem;
3965
- color: var(--fg-secondary);
3966
- line-height: 1.625;
3967
- }
3968
- .PromoActionCards_module_cardFooter {
3969
- display: flex;
3970
- align-items: center;
3971
- justify-content: space-between;
3972
- padding-top: 0.25rem;
3973
- }
3974
- .PromoActionCards_module_iconGroup {
3975
- display: flex;
3976
- align-items: center;
3977
- gap: 0.5rem;
3978
- }
3979
- .PromoActionCards_module_iconCircle {
3980
- width: 1.75rem;
3981
- height: 1.75rem;
3982
- border-radius: 9999px;
3983
- background: var(--bg-secondary);
3984
- display: flex;
3985
- align-items: center;
3986
- justify-content: center;
3987
- color: var(--fg-secondary);
3988
- }
3989
- .PromoActionCards_module_ctaBtn {
3990
- display: inline-flex;
3991
- align-items: center;
3992
- gap: 0.375rem;
3993
- padding: 0.375rem 0.75rem;
3994
- border-radius: 9999px;
3995
- font-size: 0.75rem;
3996
- font-weight: 500;
3997
- background: var(--fg);
3998
- color: var(--bg);
3999
- border: none;
4000
- cursor: pointer;
4001
- transition: opacity 0.15s;
4002
- }
4003
- .PromoActionCards_module_ctaBtn:hover {
4004
- opacity: 0.9;
4005
- }
4006
-
4007
- /* src/templates/ArticleHero.module.scss */
4008
- .ArticleHero_module_root {
4009
- position: relative;
4010
- width: 100%;
4011
- border-radius: var(--radius-xl);
4012
- overflow: hidden;
4013
- min-height: 320px;
4014
- display: flex;
4015
- flex-direction: column;
4016
- justify-content: space-between;
4017
- padding: 1.25rem;
4018
- }
4019
- @media (min-width: 768px) {
4020
- .ArticleHero_module_root {
4021
- min-height: 480px;
4022
- padding: 2.5rem;
4023
- }
4024
- }
4025
- .ArticleHero_module_bgLayer {
4026
- position: absolute;
4027
- inset: 0;
4028
- pointer-events: none;
4029
- }
4030
- .ArticleHero_module_bgImage {
4031
- position: absolute;
4032
- inset: 0;
4033
- width: 100%;
4034
- height: 100%;
4035
- object-fit: cover;
4036
- }
4037
- .ArticleHero_module_overlay {
4038
- position: absolute;
4039
- inset: 0;
4040
- background: rgba(0, 0, 0, 0.4);
4041
- }
4042
- .ArticleHero_module_topBar {
4043
- position: relative;
4044
- z-index: 10;
4045
- display: flex;
4046
- align-items: center;
4047
- width: 100%;
4048
- }
4049
- .ArticleHero_module_logo {
4050
- flex-shrink: 0;
4051
- padding-right: 1rem;
4052
- }
4053
- @media (min-width: 768px) {
4054
- .ArticleHero_module_logo {
4055
- padding-right: 2.5rem;
4056
- }
4057
- }
4058
- .ArticleHero_module_divider {
4059
- flex: 1;
4060
- height: 1px;
4061
- background: rgba(255, 255, 255, 0.3);
4062
- }
4063
- .ArticleHero_module_nav {
4064
- flex-shrink: 0;
4065
- padding-left: 1rem;
4066
- }
4067
- @media (min-width: 768px) {
4068
- .ArticleHero_module_nav {
4069
- padding-left: 2.5rem;
4070
- }
4071
- }
4072
- .ArticleHero_module_bottom {
4073
- position: relative;
4074
- z-index: 10;
4075
- max-width: 500px;
4076
- }
4077
- .ArticleHero_module_category {
4078
- font-size: 1.125rem;
4079
- color: #fff;
4080
- line-height: 1.75rem;
4081
- margin-bottom: 0.5rem;
4082
- }
4083
- .ArticleHero_module_title {
4084
- font-size: 32px;
4085
- line-height: 34px;
4086
- font-weight: 400;
4087
- color: #fff;
4088
- letter-spacing: -2px;
4089
- margin-bottom: 1rem;
4090
- }
4091
- @media (min-width: 768px) {
4092
- .ArticleHero_module_title {
4093
- font-size: 60px;
4094
- line-height: 60px;
4095
- letter-spacing: -3px;
4096
- }
4097
- }
4098
- .ArticleHero_module_subtitle {
4099
- font-size: 1.125rem;
4100
- color: rgba(255, 255, 255, 0.9);
4101
- line-height: 22.5px;
4102
- }
4103
-
4104
- /* src/templates/ArticleBody.module.scss */
4105
- .ArticleBody_module_root {
4106
- font-size: 16px;
4107
- line-height: 1.75rem;
4108
- color: var(--fg-secondary);
4109
- font-weight: 400;
4110
- }
4111
-
4112
- /* src/templates/ArticleHeading.module.scss */
4113
- .ArticleHeading_module_root {
4114
- display: flex;
4115
- flex-direction: column;
4116
- gap: 0.25rem;
4117
- }
4118
- .ArticleHeading_module_header {
4119
- display: flex;
4120
- align-items: center;
4121
- justify-content: space-between;
4122
- }
4123
- .ArticleHeading_module_h2 {
4124
- font-size: 24px;
4125
- line-height: 2rem;
4126
- font-weight: 700;
4127
- padding-top: 3rem;
4128
- color: var(--fg);
4129
- letter-spacing: -0.025em;
4130
- }
4131
- .ArticleHeading_module_h3 {
4132
- font-size: 20px;
4133
- line-height: 2rem;
4134
- font-weight: 600;
4135
- padding-top: 2rem;
4136
- color: var(--fg);
4137
- letter-spacing: -0.025em;
4138
- }
4139
- .ArticleHeading_module_action {
4140
- flex-shrink: 0;
4141
- }
4142
- .ArticleHeading_module_subtitle {
4143
- font-size: 14px;
4144
- line-height: 1.25rem;
4145
- color: var(--fg-muted);
4146
- }
4147
-
4148
- /* src/templates/ArticleFigure.module.scss */
4149
- .ArticleFigure_module_root {
4150
- width: 100%;
4151
- }
4152
- .ArticleFigure_module_imageWrapper {
4153
- width: 100%;
4154
- border-radius: var(--radius-lg);
4155
- overflow: hidden;
4156
- background: var(--bg-secondary);
4157
- display: flex;
4158
- align-items: center;
4159
- justify-content: center;
4160
- }
4161
- .ArticleFigure_module_image {
4162
- width: 100%;
4163
- height: 100%;
4164
- object-fit: contain;
4165
- }
4166
- .ArticleFigure_module_childWrapper {
4167
- width: 100%;
4168
- height: 100%;
4169
- padding: 1rem;
4170
- }
4171
- .ArticleFigure_module_placeholder {
4172
- display: flex;
4173
- flex-direction: column;
4174
- align-items: center;
4175
- gap: 0.5rem;
4176
- color: var(--fg-muted);
4177
- }
4178
- .ArticleFigure_module_placeholderText {
4179
- font-size: 0.875rem;
4180
- }
4181
- .ArticleFigure_module_legend {
4182
- display: flex;
4183
- align-items: center;
4184
- gap: 1rem;
4185
- margin-top: 0.75rem;
4186
- flex-wrap: wrap;
4187
- }
4188
- .ArticleFigure_module_legendItem {
4189
- display: flex;
4190
- align-items: center;
4191
- gap: 0.375rem;
4192
- }
4193
- .ArticleFigure_module_legendSwatch {
4194
- width: 0.75rem;
4195
- height: 0.75rem;
4196
- border-radius: 2px;
4197
- flex-shrink: 0;
4198
- }
4199
- .ArticleFigure_module_legendLabel {
4200
- font-size: 12px;
4201
- line-height: 1rem;
4202
- color: var(--fg-secondary);
4203
- }
4204
- .ArticleFigure_module_caption {
4205
- margin-top: 0.5rem;
4206
- font-size: 14px;
4207
- line-height: 1.25rem;
4208
- color: var(--fg-muted);
4209
- }
4210
-
4211
- /* src/templates/ArticleTable.module.scss */
4212
- .ArticleTable_module_root {
4213
- width: 100%;
4214
- }
4215
- .ArticleTable_module_headerRow {
4216
- display: flex;
4217
- align-items: center;
4218
- border-bottom: 1px solid var(--border-color);
4219
- padding-bottom: 1px;
4220
- }
4221
- .ArticleTable_module_rankCell {
4222
- width: 120px;
4223
- flex-shrink: 0;
4224
- }
4225
- .ArticleTable_module_headerCell {
4226
- flex: 1;
4227
- padding: 0.875rem 1rem;
4228
- }
4229
- .ArticleTable_module_headerLabel {
4230
- font-size: 14px;
4231
- line-height: 1.25rem;
4232
- font-weight: 500;
4233
- color: var(--fg-muted);
4234
- }
4235
- .ArticleTable_module_row {
4236
- display: flex;
4237
- align-items: center;
4238
- gap: 1rem;
4239
- border-bottom: 1px solid var(--border-color);
4240
- }
4241
- .ArticleTable_module_row:last-child {
4242
- border-bottom: none;
4243
- }
4244
- .ArticleTable_module_rankValue {
4245
- width: 120px;
4246
- flex-shrink: 0;
4247
- padding: 1rem;
4248
- font-size: 14px;
4249
- line-height: 1.25rem;
4250
- color: var(--fg-muted);
4251
- }
4252
- .ArticleTable_module_cell {
4253
- flex: 1;
4254
- padding: 1rem;
4255
- display: flex;
4256
- align-items: center;
4257
- gap: 0.75rem;
4258
- }
4259
- .ArticleTable_module_cellText {
4260
- font-size: 14px;
4261
- line-height: 1.25rem;
4262
- color: var(--fg-secondary);
4263
- }
4264
- .ArticleTable_module_badge {
4265
- display: inline-flex;
4266
- align-items: center;
4267
- padding: 0.125rem 0.625rem;
4268
- border-radius: 9999px;
4269
- font-size: 12px;
4270
- line-height: 1rem;
4271
- font-weight: 600;
4272
- background: var(--bg-tertiary);
4273
- color: var(--fg);
4274
- }
4275
- .ArticleTable_module_showMore {
4276
- margin-top: 1rem;
4277
- font-size: 14px;
4278
- line-height: 1.25rem;
4279
- font-weight: 500;
4280
- color: var(--fg-muted);
4281
- transition: color 0.15s;
4282
- cursor: pointer;
4283
- background: none;
4284
- border: none;
4285
- padding: 0;
4286
- }
4287
- .ArticleTable_module_showMore:hover {
4288
- color: var(--fg);
4289
- }
4290
-
4291
- /* src/templates/ArticleList.module.scss */
4292
- .ArticleList_module_root {
4293
- padding-left: 26px;
4294
- display: flex;
4295
- flex-direction: column;
4296
- gap: 0.5rem;
4297
- font-size: 16px;
4298
- line-height: 1.75rem;
4299
- color: var(--fg-secondary);
4300
- }
4301
- .ArticleList_module_ordered {
4302
- list-style-type: decimal;
4303
- }
4304
- .ArticleList_module_unordered {
4305
- list-style-type: disc;
4306
- }
4307
- .ArticleList_module_item {
4308
- padding-left: 0.25rem;
4309
- }
4310
-
4311
- /* src/templates/ArticleNote.module.scss */
4312
- .ArticleNote_module_root {
4313
- font-size: 16px;
4314
- line-height: 1.75rem;
4315
- color: var(--fg-secondary);
4316
- font-style: italic;
4317
- }
4318
-
4319
- /* src/templates/ArticleChatBlock.module.scss */
4320
- .ArticleChatBlock_module_root {
4321
- width: 100%;
4322
- border-radius: var(--radius-lg);
4323
- overflow: hidden;
4324
- }
4325
- .ArticleChatBlock_module_assistant {
4326
- background: var(--bg-secondary);
4327
- }
4328
- .ArticleChatBlock_module_system {
4329
- background: var(--bg-tertiary);
4330
- }
4331
- .ArticleChatBlock_module_user {
4332
- background: var(--bg-secondary);
4333
- }
4334
- .ArticleChatBlock_module_header {
4335
- display: flex;
4336
- align-items: center;
4337
- gap: 0.5rem;
4338
- padding: 1rem 1.25rem 0.5rem;
4339
- }
4340
- .ArticleChatBlock_module_roleLabel {
4341
- font-size: 12px;
4342
- line-height: 1rem;
4343
- color: var(--fg-secondary);
4344
- }
4345
- .ArticleChatBlock_module_toolBadge {
4346
- padding: 0 1.25rem 0.5rem;
4347
- }
4348
- .ArticleChatBlock_module_toolBadgeInner {
4349
- display: inline-flex;
4350
- align-items: center;
4351
- gap: 0.375rem;
4352
- padding: 0.25rem 0.75rem;
4353
- border-radius: 9999px;
4354
- border: 1px solid var(--border-color);
4355
- background: var(--bg);
4356
- }
4357
- .ArticleChatBlock_module_toolDot {
4358
- width: 0.375rem;
4359
- height: 0.375rem;
4360
- border-radius: 9999px;
4361
- background: var(--color-accent);
4362
- }
4363
- .ArticleChatBlock_module_toolLabel {
4364
- font-size: 13px;
4365
- font-weight: 500;
4366
- letter-spacing: -0.25px;
4367
- color: var(--fg-secondary);
4368
- }
4369
- .ArticleChatBlock_module_divider {
4370
- margin-left: 1.25rem;
4371
- margin-right: 1.25rem;
4372
- height: 1px;
4373
- background: var(--border-color);
4374
- }
4375
- .ArticleChatBlock_module_contentWrapper {
4376
- position: relative;
4377
- }
4378
- .ArticleChatBlock_module_content {
4379
- padding: 1rem 1.25rem;
4380
- font-size: 14px;
4381
- line-height: 1.5rem;
4382
- color: var(--fg-secondary);
4383
- overflow: hidden;
4384
- transition: all 0.2s;
4385
- }
4386
- .ArticleChatBlock_module_fadeOverlay {
4387
- position: absolute;
4388
- bottom: 0;
4389
- left: 0;
4390
- right: 0;
4391
- }
4392
- .ArticleChatBlock_module_fadeGradient {
4393
- height: 4rem;
4394
- pointer-events: none;
4395
- }
4396
- .ArticleChatBlock_module_showMoreBar {
4397
- padding: 0 1.25rem 1rem;
4398
- }
4399
- .ArticleChatBlock_module_showMoreBtn {
4400
- font-size: 14px;
4401
- line-height: 1.25rem;
4402
- font-weight: 500;
4403
- color: var(--fg-muted);
4404
- transition: color 0.15s;
4405
- cursor: pointer;
4406
- background: none;
4407
- border: none;
4408
- padding: 0;
4409
- }
4410
- .ArticleChatBlock_module_showMoreBtn:hover {
4411
- color: var(--fg);
4412
- }
4413
-
4414
- /* src/templates/ArticleLinkButton.module.scss */
4415
- .ArticleLinkButton_module_root {
4416
- display: inline-flex;
4417
- align-items: center;
4418
- justify-content: center;
4419
- padding: 0.5rem 1rem;
4420
- border-radius: 9999px;
4421
- background: var(--fg);
4422
- font-size: 13px;
4423
- font-weight: 500;
4424
- letter-spacing: -0.25px;
4425
- color: var(--bg);
4426
- border: 1px solid var(--bg);
4427
- box-shadow: var(--shadow-sm);
4428
- transition: all var(--transition-fast);
4429
- cursor: pointer;
4430
- }
4431
- .ArticleLinkButton_module_root:hover {
4432
- opacity: 0.9;
4433
- }
4434
- .ArticleLinkButton_module_root:active {
4435
- opacity: 0.8;
4436
- }
4437
-
4438
- /* src/templates/ArticleFooter.module.scss */
4439
- .ArticleFooter_module_root {
4440
- width: 100%;
4441
- padding: 2.5rem 5rem;
4442
- display: flex;
4443
- flex-direction: column;
4444
- gap: 2.5rem;
4445
- }
4446
- .ArticleFooter_module_topBar {
4447
- display: flex;
4448
- align-items: center;
4449
- }
4450
- .ArticleFooter_module_logo {
4451
- flex-shrink: 0;
4452
- padding-right: 2.5rem;
4453
- }
4454
- .ArticleFooter_module_divider {
4455
- flex: 1;
4456
- height: 1px;
4457
- background: var(--fg);
4458
- }
4459
- .ArticleFooter_module_copyright {
4460
- font-size: 14px;
4461
- line-height: 1.25rem;
4462
- color: var(--fg-muted);
4463
- }
4464
-
4465
- /* src/templates/ArticleLayout.module.scss */
4466
- .ArticleLayout_module_root {
4467
- width: 100%;
4468
- max-width: 1100px;
4469
- margin-left: auto;
4470
- margin-right: auto;
4471
- display: flex;
4472
- flex-direction: column;
4473
- gap: 1.25rem;
4474
- }
4475
- .ArticleLayout_module_wide {
4476
- width: 100%;
4477
- }
4478
- .ArticleLayout_module_narrow {
4479
- width: 100%;
4480
- max-width: 720px;
4481
- }
4482
-
4483
- /* src/templates/ArticleChart.module.scss */
4484
- .ArticleChart_module_figure {
4485
- width: 100%;
4486
- }
4487
- .ArticleChart_module_chartWrapper {
4488
- width: 100%;
4489
- }
4490
- .ArticleChart_module_tooltip {
4491
- background: var(--bg);
4492
- border: 1px solid var(--border-color);
4493
- border-radius: var(--radius-md);
4494
- box-shadow: var(--shadow-md);
4495
- padding: 0.5rem 0.75rem;
4496
- font-size: 12px;
4497
- line-height: 1rem;
4498
- }
4499
- .ArticleChart_module_tooltipLabel {
4500
- color: var(--fg-muted);
4501
- margin-bottom: 0.25rem;
4502
- }
4503
- .ArticleChart_module_tooltipRow {
4504
- display: flex;
4505
- align-items: center;
4506
- gap: 0.5rem;
4507
- }
4508
- .ArticleChart_module_tooltipDot {
4509
- width: 0.5rem;
4510
- height: 0.5rem;
4511
- border-radius: 9999px;
4512
- flex-shrink: 0;
4513
- }
4514
- .ArticleChart_module_tooltipName {
4515
- color: var(--fg-secondary);
4516
- }
4517
- .ArticleChart_module_tooltipValue {
4518
- font-weight: 500;
4519
- color: var(--fg);
4520
- margin-left: auto;
4521
- padding-left: 0.75rem;
4522
- }
4523
- .ArticleChart_module_scatterTooltipLabel {
4524
- font-weight: 500;
4525
- color: var(--fg);
4526
- margin-bottom: 0.25rem;
4527
- }
4528
- .ArticleChart_module_scatterTooltipRow {
4529
- color: var(--fg-secondary);
4530
- }
4531
- .ArticleChart_module_legend {
4532
- display: flex;
4533
- align-items: center;
4534
- gap: 1rem;
4535
- margin-top: 0.75rem;
4536
- flex-wrap: wrap;
4537
- }
4538
- .ArticleChart_module_legendItem {
4539
- display: flex;
4540
- align-items: center;
4541
- gap: 0.375rem;
4542
- }
4543
- .ArticleChart_module_legendSwatch {
4544
- width: 0.75rem;
4545
- height: 0.75rem;
4546
- border-radius: 2px;
4547
- flex-shrink: 0;
4548
- }
4549
- .ArticleChart_module_legendLabel {
4550
- font-size: 12px;
4551
- line-height: 1rem;
4552
- color: var(--fg-secondary);
4553
- }
4554
-
4555
- /* src/templates/LandingLayout.module.scss */
4556
- .LandingLayout_module_headerMode {
4557
- min-height: 100vh;
4558
- background: var(--bg);
4559
- }
4560
- .LandingLayout_module_headerMain {
4561
- max-width: 80rem;
4562
- margin-left: auto;
4563
- margin-right: auto;
4564
- padding-left: 1rem;
4565
- padding-right: 1rem;
4566
- }
4567
- @media (min-width: 640px) {
4568
- .LandingLayout_module_headerMain {
4569
- padding-left: 1.5rem;
4570
- padding-right: 1.5rem;
4571
- }
4572
- }
4573
- @media (min-width: 1024px) {
4574
- .LandingLayout_module_headerMain {
4575
- padding-left: 2rem;
4576
- padding-right: 2rem;
4577
- }
4578
- }
4579
- .LandingLayout_module_sidebarMode {
4580
- display: flex;
4581
- min-height: 100vh;
4582
- background: var(--bg);
4583
- }
4584
- .LandingLayout_module_sidebarNav {
4585
- display: none;
4586
- flex-shrink: 0;
4587
- }
4588
- @media (min-width: 768px) {
4589
- .LandingLayout_module_sidebarNav {
4590
- display: flex;
4591
- }
4592
- }
4593
- .LandingLayout_module_sidebarMain {
4594
- flex: 1;
4595
- overflow-y: auto;
4596
- }
4597
- .LandingLayout_module_sidebarContent {
4598
- padding-left: 1.5rem;
4599
- padding-right: 1.5rem;
4600
- max-width: 64rem;
4601
153
  }
4602
- @media (min-width: 768px) {
4603
- .LandingLayout_module_sidebarContent {
4604
- padding-left: 2.5rem;
4605
- padding-right: 2.5rem;
4606
- }
154
+ ::-webkit-scrollbar-thumb {
155
+ background: var(--fg-muted);
156
+ border-radius: var(--radius-full);
4607
157
  }
4608
- @media (min-width: 1024px) {
4609
- .LandingLayout_module_sidebarContent {
4610
- padding-left: 4rem;
4611
- padding-right: 4rem;
4612
- }
158
+ ::-webkit-scrollbar-thumb:hover {
159
+ background: var(--fg-secondary);
4613
160
  }
161
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */