@jameskabz/nextcraft-ui 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -3,50 +3,24 @@
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
5
5
  :root, :host {
6
- --color-orange-400: oklch(75% 0.183 55.934);
7
- --color-amber-100: oklch(96.2% 0.059 95.617);
8
6
  --color-amber-200: oklch(92.4% 0.12 95.746);
9
- --color-amber-300: oklch(87.9% 0.169 91.605);
10
7
  --color-amber-400: oklch(82.8% 0.189 84.429);
11
- --color-emerald-100: oklch(95% 0.052 163.051);
12
8
  --color-emerald-200: oklch(90.5% 0.093 164.15);
13
- --color-emerald-300: oklch(84.5% 0.143 164.978);
14
9
  --color-emerald-400: oklch(76.5% 0.177 163.223);
15
- --color-teal-400: oklch(77.7% 0.152 181.912);
16
- --color-cyan-400: oklch(78.9% 0.154 211.53);
17
- --color-sky-100: oklch(95.1% 0.026 236.824);
18
- --color-sky-200: oklch(90.1% 0.058 230.902);
19
- --color-sky-300: oklch(82.8% 0.111 230.318);
20
- --color-sky-400: oklch(74.6% 0.16 232.661);
21
- --color-blue-400: oklch(70.7% 0.165 254.624);
22
- --color-blue-500: oklch(62.3% 0.214 259.815);
23
- --color-indigo-400: oklch(67.3% 0.182 276.935);
24
- --color-indigo-600: oklch(51.1% 0.262 276.966);
25
- --color-violet-100: oklch(94.3% 0.029 294.588);
26
10
  --color-violet-200: oklch(89.4% 0.057 293.283);
27
- --color-violet-300: oklch(81.1% 0.111 293.571);
28
- --color-violet-400: oklch(70.2% 0.183 293.541);
29
- --color-violet-500: oklch(60.6% 0.25 292.717);
30
- --color-violet-600: oklch(54.1% 0.281 293.009);
31
- --color-purple-400: oklch(71.4% 0.203 305.504);
32
- --color-purple-600: oklch(55.8% 0.288 302.321);
33
- --color-purple-700: oklch(49.6% 0.265 301.924);
34
- --color-fuchsia-400: oklch(74% 0.238 322.16);
35
- --color-fuchsia-500: oklch(66.7% 0.295 322.15);
36
- --color-pink-100: oklch(94.8% 0.028 342.258);
37
- --color-pink-200: oklch(89.9% 0.061 343.231);
38
- --color-pink-300: oklch(82.3% 0.12 346.018);
39
- --color-pink-400: oklch(71.8% 0.202 349.761);
40
- --color-pink-500: oklch(65.6% 0.241 354.308);
41
11
  --color-rose-400: oklch(71.2% 0.194 13.428);
42
12
  --color-slate-300: oklch(86.9% 0.022 252.894);
43
- --color-slate-400: oklch(70.4% 0.04 256.788);
44
13
  --color-slate-900: oklch(20.8% 0.042 265.755);
45
- --color-slate-950: oklch(12.9% 0.042 264.695);
14
+ --color-black: #000;
46
15
  --color-white: #fff;
47
16
  --spacing: 0.25rem;
17
+ --container-sm: 24rem;
48
18
  --container-md: 28rem;
19
+ --container-lg: 32rem;
20
+ --container-3xl: 48rem;
21
+ --container-5xl: 64rem;
49
22
  --container-6xl: 72rem;
23
+ --container-7xl: 80rem;
50
24
  --text-xs: 0.75rem;
51
25
  --text-xs--line-height: calc(1 / 0.75);
52
26
  --text-sm: 0.875rem;
@@ -67,6 +41,8 @@
67
41
  --font-weight-semibold: 600;
68
42
  --font-weight-bold: 700;
69
43
  --tracking-wide: 0.025em;
44
+ --radius-md: 0.375rem;
45
+ --radius-lg: 0.5rem;
70
46
  --radius-xl: 0.75rem;
71
47
  --radius-2xl: 1rem;
72
48
  --radius-3xl: 1.5rem;
@@ -229,33 +205,119 @@
229
205
  }
230
206
  }
231
207
  @layer utilities {
208
+ .pointer-events-none {
209
+ pointer-events: none;
210
+ }
211
+ .sr-only {
212
+ position: absolute;
213
+ width: 1px;
214
+ height: 1px;
215
+ padding: 0;
216
+ margin: -1px;
217
+ overflow: hidden;
218
+ clip-path: inset(50%);
219
+ white-space: nowrap;
220
+ border-width: 0;
221
+ }
232
222
  .absolute {
233
223
  position: absolute;
234
224
  }
225
+ .fixed {
226
+ position: fixed;
227
+ }
235
228
  .relative {
236
229
  position: relative;
237
230
  }
231
+ .inset-0 {
232
+ inset: calc(var(--spacing) * 0);
233
+ }
234
+ .top-0 {
235
+ top: calc(var(--spacing) * 0);
236
+ }
237
+ .top-0\.5 {
238
+ top: calc(var(--spacing) * 0.5);
239
+ }
238
240
  .top-1\/2 {
239
241
  top: calc(1/2 * 100%);
240
242
  }
243
+ .top-6 {
244
+ top: calc(var(--spacing) * 6);
245
+ }
246
+ .top-full {
247
+ top: 100%;
248
+ }
249
+ .right-0 {
250
+ right: calc(var(--spacing) * 0);
251
+ }
252
+ .right-4 {
253
+ right: calc(var(--spacing) * 4);
254
+ }
255
+ .right-6 {
256
+ right: calc(var(--spacing) * 6);
257
+ }
258
+ .right-full {
259
+ right: 100%;
260
+ }
261
+ .bottom-full {
262
+ bottom: 100%;
263
+ }
264
+ .left-0 {
265
+ left: calc(var(--spacing) * 0);
266
+ }
267
+ .left-0\.5 {
268
+ left: calc(var(--spacing) * 0.5);
269
+ }
270
+ .left-1\/2 {
271
+ left: calc(1/2 * 100%);
272
+ }
241
273
  .left-4 {
242
274
  left: calc(var(--spacing) * 4);
243
275
  }
276
+ .left-full {
277
+ left: 100%;
278
+ }
244
279
  .z-10 {
245
280
  z-index: 10;
246
281
  }
282
+ .z-20 {
283
+ z-index: 20;
284
+ }
285
+ .z-50 {
286
+ z-index: 50;
287
+ }
288
+ .mx-2 {
289
+ margin-inline: calc(var(--spacing) * 2);
290
+ }
247
291
  .mx-auto {
248
292
  margin-inline: auto;
249
293
  }
294
+ .mt-0\.5 {
295
+ margin-top: calc(var(--spacing) * 0.5);
296
+ }
250
297
  .mt-2 {
251
298
  margin-top: calc(var(--spacing) * 2);
252
299
  }
300
+ .mt-3 {
301
+ margin-top: calc(var(--spacing) * 3);
302
+ }
303
+ .mt-4 {
304
+ margin-top: calc(var(--spacing) * 4);
305
+ }
306
+ .mt-5 {
307
+ margin-top: calc(var(--spacing) * 5);
308
+ }
253
309
  .mt-6 {
254
310
  margin-top: calc(var(--spacing) * 6);
255
311
  }
312
+ .mt-auto {
313
+ margin-top: auto;
314
+ }
256
315
  .mb-2 {
257
316
  margin-bottom: calc(var(--spacing) * 2);
258
317
  }
318
+ .mb-4 {
319
+ margin-bottom: calc(var(--spacing) * 4);
320
+ }
259
321
  .mb-6 {
260
322
  margin-bottom: calc(var(--spacing) * 6);
261
323
  }
@@ -271,9 +333,18 @@
271
333
  .grid {
272
334
  display: grid;
273
335
  }
336
+ .hidden {
337
+ display: none;
338
+ }
274
339
  .inline-flex {
275
340
  display: inline-flex;
276
341
  }
342
+ .h-3 {
343
+ height: calc(var(--spacing) * 3);
344
+ }
345
+ .h-4 {
346
+ height: calc(var(--spacing) * 4);
347
+ }
277
348
  .h-5 {
278
349
  height: calc(var(--spacing) * 5);
279
350
  }
@@ -298,52 +369,162 @@
298
369
  .h-14 {
299
370
  height: calc(var(--spacing) * 14);
300
371
  }
372
+ .h-\[calc\(100\%-5\.5rem\)\] {
373
+ height: calc(100% - 5.5rem);
374
+ }
375
+ .h-full {
376
+ height: 100%;
377
+ }
301
378
  .min-h-screen {
302
379
  min-height: 100vh;
303
380
  }
381
+ .w-3 {
382
+ width: calc(var(--spacing) * 3);
383
+ }
384
+ .w-4 {
385
+ width: calc(var(--spacing) * 4);
386
+ }
304
387
  .w-5 {
305
388
  width: calc(var(--spacing) * 5);
306
389
  }
390
+ .w-5\/6 {
391
+ width: calc(5/6 * 100%);
392
+ }
307
393
  .w-6 {
308
394
  width: calc(var(--spacing) * 6);
309
395
  }
396
+ .w-11 {
397
+ width: calc(var(--spacing) * 11);
398
+ }
310
399
  .w-12 {
311
400
  width: calc(var(--spacing) * 12);
312
401
  }
402
+ .w-40 {
403
+ width: calc(var(--spacing) * 40);
404
+ }
313
405
  .w-full {
314
406
  width: 100%;
315
407
  }
408
+ .max-w-3xl {
409
+ max-width: var(--container-3xl);
410
+ }
411
+ .max-w-5xl {
412
+ max-width: var(--container-5xl);
413
+ }
316
414
  .max-w-6xl {
317
415
  max-width: var(--container-6xl);
318
416
  }
417
+ .max-w-7xl {
418
+ max-width: var(--container-7xl);
419
+ }
420
+ .max-w-lg {
421
+ max-width: var(--container-lg);
422
+ }
319
423
  .max-w-md {
320
424
  max-width: var(--container-md);
321
425
  }
426
+ .max-w-sm {
427
+ max-width: var(--container-sm);
428
+ }
429
+ .flex-1 {
430
+ flex: 1;
431
+ }
432
+ .-translate-x-1\/2 {
433
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
434
+ translate: var(--tw-translate-x) var(--tw-translate-y);
435
+ }
436
+ .-translate-x-2 {
437
+ --tw-translate-x: calc(var(--spacing) * -2);
438
+ translate: var(--tw-translate-x) var(--tw-translate-y);
439
+ }
440
+ .translate-x-2 {
441
+ --tw-translate-x: calc(var(--spacing) * 2);
442
+ translate: var(--tw-translate-x) var(--tw-translate-y);
443
+ }
322
444
  .-translate-y-1\/2 {
323
445
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
324
446
  translate: var(--tw-translate-x) var(--tw-translate-y);
325
447
  }
448
+ .-translate-y-2 {
449
+ --tw-translate-y: calc(var(--spacing) * -2);
450
+ translate: var(--tw-translate-x) var(--tw-translate-y);
451
+ }
452
+ .translate-y-0 {
453
+ --tw-translate-y: calc(var(--spacing) * 0);
454
+ translate: var(--tw-translate-x) var(--tw-translate-y);
455
+ }
456
+ .translate-y-1 {
457
+ --tw-translate-y: calc(var(--spacing) * 1);
458
+ translate: var(--tw-translate-x) var(--tw-translate-y);
459
+ }
460
+ .translate-y-2 {
461
+ --tw-translate-y: calc(var(--spacing) * 2);
462
+ translate: var(--tw-translate-x) var(--tw-translate-y);
463
+ }
326
464
  .transform {
327
465
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
328
466
  }
467
+ .cursor-pointer {
468
+ cursor: pointer;
469
+ }
470
+ .appearance-none {
471
+ appearance: none;
472
+ }
473
+ .grid-cols-1 {
474
+ grid-template-columns: repeat(1, minmax(0, 1fr));
475
+ }
329
476
  .grid-cols-3 {
330
477
  grid-template-columns: repeat(3, minmax(0, 1fr));
331
478
  }
479
+ .grid-cols-7 {
480
+ grid-template-columns: repeat(7, minmax(0, 1fr));
481
+ }
482
+ .flex-col {
483
+ flex-direction: column;
484
+ }
485
+ .flex-wrap {
486
+ flex-wrap: wrap;
487
+ }
332
488
  .items-center {
333
489
  align-items: center;
334
490
  }
491
+ .items-start {
492
+ align-items: flex-start;
493
+ }
494
+ .justify-between {
495
+ justify-content: space-between;
496
+ }
335
497
  .justify-center {
336
498
  justify-content: center;
337
499
  }
500
+ .justify-end {
501
+ justify-content: flex-end;
502
+ }
338
503
  .gap-2 {
339
504
  gap: calc(var(--spacing) * 2);
340
505
  }
506
+ .gap-3 {
507
+ gap: calc(var(--spacing) * 3);
508
+ }
341
509
  .gap-4 {
342
510
  gap: calc(var(--spacing) * 4);
343
511
  }
344
512
  .gap-6 {
345
513
  gap: calc(var(--spacing) * 6);
346
514
  }
515
+ .gap-8 {
516
+ gap: calc(var(--spacing) * 8);
517
+ }
518
+ .gap-10 {
519
+ gap: calc(var(--spacing) * 10);
520
+ }
521
+ .space-y-1 {
522
+ :where(& > :not(:last-child)) {
523
+ --tw-space-y-reverse: 0;
524
+ margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
525
+ margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
526
+ }
527
+ }
347
528
  .space-y-2 {
348
529
  :where(& > :not(:last-child)) {
349
530
  --tw-space-y-reverse: 0;
@@ -372,6 +553,13 @@
372
553
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
373
554
  }
374
555
  }
556
+ .space-y-10 {
557
+ :where(& > :not(:last-child)) {
558
+ --tw-space-y-reverse: 0;
559
+ margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
560
+ margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
561
+ }
562
+ }
375
563
  .space-y-12 {
376
564
  :where(& > :not(:last-child)) {
377
565
  --tw-space-y-reverse: 0;
@@ -382,12 +570,24 @@
382
570
  .overflow-hidden {
383
571
  overflow: hidden;
384
572
  }
573
+ .overflow-y-auto {
574
+ overflow-y: auto;
575
+ }
385
576
  .rounded-2xl {
386
577
  border-radius: var(--radius-2xl);
387
578
  }
388
579
  .rounded-3xl {
389
580
  border-radius: var(--radius-3xl);
390
581
  }
582
+ .rounded-full {
583
+ border-radius: calc(infinity * 1px);
584
+ }
585
+ .rounded-lg {
586
+ border-radius: var(--radius-lg);
587
+ }
588
+ .rounded-md {
589
+ border-radius: var(--radius-md);
590
+ }
391
591
  .rounded-xl {
392
592
  border-radius: var(--radius-xl);
393
593
  }
@@ -403,104 +603,116 @@
403
603
  border-style: var(--tw-border-style);
404
604
  border-width: 2px;
405
605
  }
406
- .border-amber-300\/30 {
407
- border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 30%, transparent);
408
- @supports (color: color-mix(in lab, red, red)) {
409
- border-color: color-mix(in oklab, var(--color-amber-300) 30%, transparent);
410
- }
606
+ .border-t {
607
+ border-top-style: var(--tw-border-style);
608
+ border-top-width: 1px;
411
609
  }
412
- .border-amber-400\/30 {
413
- border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent);
414
- @supports (color: color-mix(in lab, red, red)) {
415
- border-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
416
- }
610
+ .border-b {
611
+ border-bottom-style: var(--tw-border-style);
612
+ border-bottom-width: 1px;
417
613
  }
418
- .border-emerald-300\/30 {
419
- border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 30%, transparent);
420
- @supports (color: color-mix(in lab, red, red)) {
421
- border-color: color-mix(in oklab, var(--color-emerald-300) 30%, transparent);
422
- }
614
+ .border-l {
615
+ border-left-style: var(--tw-border-style);
616
+ border-left-width: 1px;
423
617
  }
424
- .border-emerald-400\/30 {
425
- border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 30%, transparent);
426
- @supports (color: color-mix(in lab, red, red)) {
427
- border-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
428
- }
618
+ .border-\[color\:rgb\(var\(--nc-accent-1\)\/0\.4\)\] {
619
+ border-color: rgb(var(--nc-accent-1)/0.4);
429
620
  }
430
- .border-pink-300\/30 {
431
- border-color: color-mix(in srgb, oklch(82.3% 0.12 346.018) 30%, transparent);
432
- @supports (color: color-mix(in lab, red, red)) {
433
- border-color: color-mix(in oklab, var(--color-pink-300) 30%, transparent);
434
- }
621
+ .border-\[color\:rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
622
+ border-color: rgb(var(--nc-accent-1)/0.5);
435
623
  }
436
- .border-sky-300\/30 {
437
- border-color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 30%, transparent);
438
- @supports (color: color-mix(in lab, red, red)) {
439
- border-color: color-mix(in oklab, var(--color-sky-300) 30%, transparent);
440
- }
624
+ .border-\[color\:rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
625
+ border-color: rgb(var(--nc-accent-1)/0.6);
441
626
  }
442
- .border-sky-400\/30 {
443
- border-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 30%, transparent);
444
- @supports (color: color-mix(in lab, red, red)) {
445
- border-color: color-mix(in oklab, var(--color-sky-400) 30%, transparent);
446
- }
627
+ .border-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
628
+ border-color: rgb(var(--nc-accent-1)/0.3);
629
+ }
630
+ .border-\[rgb\(var\(--nc-border\)\/0\.3\)\] {
631
+ border-color: rgb(var(--nc-border)/0.3);
632
+ }
633
+ .border-\[rgb\(var\(--nc-border\)\/0\.35\)\] {
634
+ border-color: rgb(var(--nc-border)/0.35);
635
+ }
636
+ .border-\[rgb\(var\(--nc-border\)\/0\.45\)\] {
637
+ border-color: rgb(var(--nc-border)/0.45);
447
638
  }
448
- .border-sky-400\/50 {
449
- border-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 50%, transparent);
639
+ .border-amber-400\/40 {
640
+ border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 40%, transparent);
450
641
  @supports (color: color-mix(in lab, red, red)) {
451
- border-color: color-mix(in oklab, var(--color-sky-400) 50%, transparent);
642
+ border-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
452
643
  }
453
644
  }
454
- .border-violet-300\/30 {
455
- border-color: color-mix(in srgb, oklch(81.1% 0.111 293.571) 30%, transparent);
645
+ .border-emerald-400\/40 {
646
+ border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 40%, transparent);
456
647
  @supports (color: color-mix(in lab, red, red)) {
457
- border-color: color-mix(in oklab, var(--color-violet-300) 30%, transparent);
648
+ border-color: color-mix(in oklab, var(--color-emerald-400) 40%, transparent);
458
649
  }
459
650
  }
460
- .border-violet-400\/30 {
461
- border-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 30%, transparent);
651
+ .border-rose-400\/40 {
652
+ border-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 40%, transparent);
462
653
  @supports (color: color-mix(in lab, red, red)) {
463
- border-color: color-mix(in oklab, var(--color-violet-400) 30%, transparent);
654
+ border-color: color-mix(in oklab, var(--color-rose-400) 40%, transparent);
464
655
  }
465
656
  }
657
+ .border-slate-300 {
658
+ border-color: var(--color-slate-300);
659
+ }
466
660
  .border-white\/10 {
467
661
  border-color: color-mix(in srgb, #fff 10%, transparent);
468
662
  @supports (color: color-mix(in lab, red, red)) {
469
663
  border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
470
664
  }
471
665
  }
472
- .bg-amber-400\/20 {
473
- background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent);
474
- @supports (color: color-mix(in lab, red, red)) {
475
- background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
476
- }
666
+ .bg-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
667
+ background-color: rgb(var(--nc-accent-1));
477
668
  }
478
- .bg-emerald-400\/20 {
479
- background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);
480
- @supports (color: color-mix(in lab, red, red)) {
481
- background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
482
- }
669
+ .bg-\[color\:rgb\(var\(--nc-accent-1\)\/0\.2\)\] {
670
+ background-color: rgb(var(--nc-accent-1)/0.2);
483
671
  }
484
- .bg-pink-400\/20 {
485
- background-color: color-mix(in srgb, oklch(71.8% 0.202 349.761) 20%, transparent);
486
- @supports (color: color-mix(in lab, red, red)) {
487
- background-color: color-mix(in oklab, var(--color-pink-400) 20%, transparent);
488
- }
672
+ .bg-\[color\:rgb\(var\(--nc-surface\)\/0\.12\)\] {
673
+ background-color: rgb(var(--nc-surface)/0.12);
674
+ }
675
+ .bg-\[rgb\(var\(--nc-accent-1\)\)\] {
676
+ background-color: rgb(var(--nc-accent-1));
677
+ }
678
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.2\)\] {
679
+ background-color: rgb(var(--nc-accent-1)/0.2);
680
+ }
681
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
682
+ background-color: rgb(var(--nc-accent-1)/0.3);
683
+ }
684
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.25\)\] {
685
+ background-color: rgb(var(--nc-accent-1)/0.25);
686
+ }
687
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.65\)\] {
688
+ background-color: rgb(var(--nc-accent-1)/0.65);
689
+ }
690
+ .bg-\[rgb\(var\(--nc-surface\)\/0\.08\)\] {
691
+ background-color: rgb(var(--nc-surface)/0.08);
692
+ }
693
+ .bg-\[rgb\(var\(--nc-surface\)\/0\.12\)\] {
694
+ background-color: rgb(var(--nc-surface)/0.12);
489
695
  }
490
- .bg-sky-400\/20 {
491
- background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 20%, transparent);
696
+ .bg-\[rgb\(var\(--nc-surface\)\/1\.52\)\] {
697
+ background-color: rgb(var(--nc-surface)/1.52);
698
+ }
699
+ .bg-\[rgb\(var\(--nc-surface-muted\)\/0\.9\)\] {
700
+ background-color: rgb(var(--nc-surface-muted)/0.9);
701
+ }
702
+ .bg-background {
703
+ background-color: var(--background);
704
+ }
705
+ .bg-black\/80 {
706
+ background-color: color-mix(in srgb, #000 80%, transparent);
492
707
  @supports (color: color-mix(in lab, red, red)) {
493
- background-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
708
+ background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
494
709
  }
495
710
  }
496
711
  .bg-transparent {
497
712
  background-color: transparent;
498
713
  }
499
- .bg-violet-400\/20 {
500
- background-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 20%, transparent);
501
- @supports (color: color-mix(in lab, red, red)) {
502
- background-color: color-mix(in oklab, var(--color-violet-400) 20%, transparent);
503
- }
714
+ .bg-white {
715
+ background-color: var(--color-white);
504
716
  }
505
717
  .bg-white\/5 {
506
718
  background-color: color-mix(in srgb, #fff 5%, transparent);
@@ -508,6 +720,12 @@
508
720
  background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
509
721
  }
510
722
  }
723
+ .bg-white\/10 {
724
+ background-color: color-mix(in srgb, #fff 10%, transparent);
725
+ @supports (color: color-mix(in lab, red, red)) {
726
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
727
+ }
728
+ }
511
729
  .bg-linear-to-br {
512
730
  --tw-gradient-position: to bottom right;
513
731
  @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -530,157 +748,53 @@
530
748
  --tw-gradient-position: to right in oklab;
531
749
  background-image: linear-gradient(var(--tw-gradient-stops));
532
750
  }
533
- .from-amber-400\/15 {
534
- --tw-gradient-from: color-mix(in srgb, oklch(82.8% 0.189 84.429) 15%, transparent);
535
- @supports (color: color-mix(in lab, red, red)) {
536
- --tw-gradient-from: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
537
- }
538
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
539
- }
540
- .from-emerald-400\/15 {
541
- --tw-gradient-from: color-mix(in srgb, oklch(76.5% 0.177 163.223) 15%, transparent);
542
- @supports (color: color-mix(in lab, red, red)) {
543
- --tw-gradient-from: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
544
- }
545
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
546
- }
547
- .from-pink-400\/15 {
548
- --tw-gradient-from: color-mix(in srgb, oklch(71.8% 0.202 349.761) 15%, transparent);
549
- @supports (color: color-mix(in lab, red, red)) {
550
- --tw-gradient-from: color-mix(in oklab, var(--color-pink-400) 15%, transparent);
551
- }
552
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
553
- }
554
- .from-sky-400 {
555
- --tw-gradient-from: var(--color-sky-400);
556
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
557
- }
558
- .from-sky-400\/15 {
559
- --tw-gradient-from: color-mix(in srgb, oklch(74.6% 0.16 232.661) 15%, transparent);
560
- @supports (color: color-mix(in lab, red, red)) {
561
- --tw-gradient-from: color-mix(in oklab, var(--color-sky-400) 15%, transparent);
562
- }
563
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
564
- }
565
- .from-slate-950 {
566
- --tw-gradient-from: var(--color-slate-950);
567
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
568
- }
569
- .from-violet-400\/15 {
570
- --tw-gradient-from: color-mix(in srgb, oklch(70.2% 0.183 293.541) 15%, transparent);
571
- @supports (color: color-mix(in lab, red, red)) {
572
- --tw-gradient-from: color-mix(in oklab, var(--color-violet-400) 15%, transparent);
573
- }
574
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
575
- }
576
- .from-violet-500 {
577
- --tw-gradient-from: var(--color-violet-500);
751
+ .from-\[rgb\(var\(--nc-accent-1\)\)\] {
752
+ --tw-gradient-from: rgb(var(--nc-accent-1));
578
753
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
579
754
  }
580
- .from-violet-600 {
581
- --tw-gradient-from: var(--color-violet-600);
755
+ .from-\[rgb\(var\(--nc-accent-1\)\/0\.15\)\] {
756
+ --tw-gradient-from: rgb(var(--nc-accent-1)/0.15);
582
757
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
583
758
  }
584
- .via-blue-400\/10 {
585
- --tw-gradient-via: color-mix(in srgb, oklch(70.7% 0.165 254.624) 10%, transparent);
586
- @supports (color: color-mix(in lab, red, red)) {
587
- --tw-gradient-via: color-mix(in oklab, var(--color-blue-400) 10%, transparent);
588
- }
589
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
590
- --tw-gradient-stops: var(--tw-gradient-via-stops);
591
- }
592
- .via-blue-500 {
593
- --tw-gradient-via: var(--color-blue-500);
759
+ .via-\[rgb\(var\(--nc-accent-2\)\)\] {
760
+ --tw-gradient-via: rgb(var(--nc-accent-2));
594
761
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
595
762
  --tw-gradient-stops: var(--tw-gradient-via-stops);
596
763
  }
597
- .via-fuchsia-500 {
598
- --tw-gradient-via: var(--color-fuchsia-500);
764
+ .via-\[rgb\(var\(--nc-accent-2\)\/0\.10\)\] {
765
+ --tw-gradient-via: rgb(var(--nc-accent-2)/0.10);
599
766
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
600
767
  --tw-gradient-stops: var(--tw-gradient-via-stops);
601
768
  }
602
- .via-orange-400\/10 {
603
- --tw-gradient-via: color-mix(in srgb, oklch(75% 0.183 55.934) 10%, transparent);
604
- @supports (color: color-mix(in lab, red, red)) {
605
- --tw-gradient-via: color-mix(in oklab, var(--color-orange-400) 10%, transparent);
606
- }
607
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
608
- --tw-gradient-stops: var(--tw-gradient-via-stops);
609
- }
610
- .via-purple-400\/10 {
611
- --tw-gradient-via: color-mix(in srgb, oklch(71.4% 0.203 305.504) 10%, transparent);
612
- @supports (color: color-mix(in lab, red, red)) {
613
- --tw-gradient-via: color-mix(in oklab, var(--color-purple-400) 10%, transparent);
614
- }
615
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
616
- --tw-gradient-stops: var(--tw-gradient-via-stops);
617
- }
618
- .via-slate-900 {
619
- --tw-gradient-via: var(--color-slate-900);
620
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
621
- --tw-gradient-stops: var(--tw-gradient-via-stops);
622
- }
623
- .via-teal-400\/10 {
624
- --tw-gradient-via: color-mix(in srgb, oklch(77.7% 0.152 181.912) 10%, transparent);
625
- @supports (color: color-mix(in lab, red, red)) {
626
- --tw-gradient-via: color-mix(in oklab, var(--color-teal-400) 10%, transparent);
627
- }
628
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
629
- --tw-gradient-stops: var(--tw-gradient-via-stops);
630
- }
631
- .to-cyan-400\/15 {
632
- --tw-gradient-to: color-mix(in srgb, oklch(78.9% 0.154 211.53) 15%, transparent);
633
- @supports (color: color-mix(in lab, red, red)) {
634
- --tw-gradient-to: color-mix(in oklab, var(--color-cyan-400) 15%, transparent);
635
- }
769
+ .to-\[rgb\(var\(--nc-accent-3\)\)\] {
770
+ --tw-gradient-to: rgb(var(--nc-accent-3));
636
771
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
637
772
  }
638
- .to-fuchsia-400\/15 {
639
- --tw-gradient-to: color-mix(in srgb, oklch(74% 0.238 322.16) 15%, transparent);
640
- @supports (color: color-mix(in lab, red, red)) {
641
- --tw-gradient-to: color-mix(in oklab, var(--color-fuchsia-400) 15%, transparent);
642
- }
643
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
644
- }
645
- .to-indigo-400\/15 {
646
- --tw-gradient-to: color-mix(in srgb, oklch(67.3% 0.182 276.935) 15%, transparent);
647
- @supports (color: color-mix(in lab, red, red)) {
648
- --tw-gradient-to: color-mix(in oklab, var(--color-indigo-400) 15%, transparent);
649
- }
650
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
651
- }
652
- .to-indigo-600 {
653
- --tw-gradient-to: var(--color-indigo-600);
654
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
655
- }
656
- .to-pink-500 {
657
- --tw-gradient-to: var(--color-pink-500);
658
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
659
- }
660
- .to-purple-600 {
661
- --tw-gradient-to: var(--color-purple-600);
662
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
663
- }
664
- .to-rose-400\/15 {
665
- --tw-gradient-to: color-mix(in srgb, oklch(71.2% 0.194 13.428) 15%, transparent);
666
- @supports (color: color-mix(in lab, red, red)) {
667
- --tw-gradient-to: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
668
- }
669
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
670
- }
671
- .to-slate-950 {
672
- --tw-gradient-to: var(--color-slate-950);
773
+ .to-\[rgb\(var\(--nc-accent-3\)\/0\.15\)\] {
774
+ --tw-gradient-to: rgb(var(--nc-accent-3)/0.15);
673
775
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
674
776
  }
675
777
  .bg-clip-text {
676
778
  background-clip: text;
677
779
  }
780
+ .p-2 {
781
+ padding: calc(var(--spacing) * 2);
782
+ }
783
+ .p-4 {
784
+ padding: calc(var(--spacing) * 4);
785
+ }
678
786
  .p-6 {
679
787
  padding: calc(var(--spacing) * 6);
680
788
  }
681
789
  .p-8 {
682
790
  padding: calc(var(--spacing) * 8);
683
791
  }
792
+ .p-12 {
793
+ padding: calc(var(--spacing) * 12);
794
+ }
795
+ .px-3 {
796
+ padding-inline: calc(var(--spacing) * 3);
797
+ }
684
798
  .px-4 {
685
799
  padding-inline: calc(var(--spacing) * 4);
686
800
  }
@@ -693,15 +807,45 @@
693
807
  .px-8 {
694
808
  padding-inline: calc(var(--spacing) * 8);
695
809
  }
810
+ .py-1 {
811
+ padding-block: calc(var(--spacing) * 1);
812
+ }
813
+ .py-2 {
814
+ padding-block: calc(var(--spacing) * 2);
815
+ }
816
+ .py-3 {
817
+ padding-block: calc(var(--spacing) * 3);
818
+ }
819
+ .py-4 {
820
+ padding-block: calc(var(--spacing) * 4);
821
+ }
822
+ .py-8 {
823
+ padding-block: calc(var(--spacing) * 8);
824
+ }
825
+ .py-16 {
826
+ padding-block: calc(var(--spacing) * 16);
827
+ }
828
+ .pt-2 {
829
+ padding-top: calc(var(--spacing) * 2);
830
+ }
696
831
  .pt-4 {
697
832
  padding-top: calc(var(--spacing) * 4);
698
833
  }
834
+ .pr-10 {
835
+ padding-right: calc(var(--spacing) * 10);
836
+ }
837
+ .pl-9 {
838
+ padding-left: calc(var(--spacing) * 9);
839
+ }
699
840
  .pl-12 {
700
841
  padding-left: calc(var(--spacing) * 12);
701
842
  }
702
843
  .text-center {
703
844
  text-align: center;
704
845
  }
846
+ .text-left {
847
+ text-align: left;
848
+ }
705
849
  .text-2xl {
706
850
  font-size: var(--text-2xl);
707
851
  line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -750,119 +894,120 @@
750
894
  --tw-tracking: var(--tracking-wide);
751
895
  letter-spacing: var(--tracking-wide);
752
896
  }
753
- .text-amber-100 {
754
- color: var(--color-amber-100);
755
- }
756
- .text-amber-200 {
757
- color: var(--color-amber-200);
758
- }
759
- .text-amber-200\/70 {
760
- color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 70%, transparent);
761
- @supports (color: color-mix(in lab, red, red)) {
762
- color: color-mix(in oklab, var(--color-amber-200) 70%, transparent);
763
- }
764
- }
765
- .text-amber-300 {
766
- color: var(--color-amber-300);
767
- }
768
- .text-emerald-100 {
769
- color: var(--color-emerald-100);
770
- }
771
- .text-emerald-200 {
772
- color: var(--color-emerald-200);
773
- }
774
- .text-emerald-200\/70 {
775
- color: color-mix(in srgb, oklch(90.5% 0.093 164.15) 70%, transparent);
776
- @supports (color: color-mix(in lab, red, red)) {
777
- color: color-mix(in oklab, var(--color-emerald-200) 70%, transparent);
778
- }
897
+ .whitespace-nowrap {
898
+ white-space: nowrap;
779
899
  }
780
- .text-emerald-300 {
781
- color: var(--color-emerald-300);
900
+ .text-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
901
+ color: rgb(var(--nc-accent-1));
782
902
  }
783
- .text-pink-100 {
784
- color: var(--color-pink-100);
903
+ .text-\[rgb\(var\(--nc-accent-1\)\)\] {
904
+ color: rgb(var(--nc-accent-1));
785
905
  }
786
- .text-pink-200\/70 {
787
- color: color-mix(in srgb, oklch(89.9% 0.061 343.231) 70%, transparent);
788
- @supports (color: color-mix(in lab, red, red)) {
789
- color: color-mix(in oklab, var(--color-pink-200) 70%, transparent);
790
- }
906
+ .text-\[rgb\(var\(--nc-accent-soft\)\)\] {
907
+ color: rgb(var(--nc-accent-soft));
791
908
  }
792
- .text-pink-300 {
793
- color: var(--color-pink-300);
909
+ .text-\[rgb\(var\(--nc-accent-soft\)\/0\.7\)\] {
910
+ color: rgb(var(--nc-accent-soft)/0.7);
794
911
  }
795
- .text-sky-100 {
796
- color: var(--color-sky-100);
912
+ .text-\[rgb\(var\(--nc-fg\)\)\] {
913
+ color: rgb(var(--nc-fg));
797
914
  }
798
- .text-sky-200 {
799
- color: var(--color-sky-200);
915
+ .text-\[rgb\(var\(--nc-fg-muted\)\)\] {
916
+ color: rgb(var(--nc-fg-muted));
800
917
  }
801
- .text-sky-200\/70 {
802
- color: color-mix(in srgb, oklch(90.1% 0.058 230.902) 70%, transparent);
803
- @supports (color: color-mix(in lab, red, red)) {
804
- color: color-mix(in oklab, var(--color-sky-200) 70%, transparent);
805
- }
918
+ .text-\[rgb\(var\(--nc-fg-soft\)\)\] {
919
+ color: rgb(var(--nc-fg-soft));
806
920
  }
807
- .text-sky-300 {
808
- color: var(--color-sky-300);
921
+ .text-amber-200 {
922
+ color: var(--color-amber-200);
809
923
  }
810
- .text-sky-400 {
811
- color: var(--color-sky-400);
924
+ .text-emerald-200 {
925
+ color: var(--color-emerald-200);
812
926
  }
813
927
  .text-slate-300 {
814
928
  color: var(--color-slate-300);
815
929
  }
816
- .text-slate-400 {
817
- color: var(--color-slate-400);
930
+ .text-slate-900 {
931
+ color: var(--color-slate-900);
818
932
  }
819
933
  .text-transparent {
820
934
  color: transparent;
821
935
  }
822
- .text-violet-100 {
823
- color: var(--color-violet-100);
824
- }
825
936
  .text-violet-200 {
826
937
  color: var(--color-violet-200);
827
938
  }
828
- .text-violet-200\/60 {
829
- color: color-mix(in srgb, oklch(89.4% 0.057 293.283) 60%, transparent);
830
- @supports (color: color-mix(in lab, red, red)) {
831
- color: color-mix(in oklab, var(--color-violet-200) 60%, transparent);
832
- }
833
- }
834
- .text-violet-200\/70 {
835
- color: color-mix(in srgb, oklch(89.4% 0.057 293.283) 70%, transparent);
836
- @supports (color: color-mix(in lab, red, red)) {
837
- color: color-mix(in oklab, var(--color-violet-200) 70%, transparent);
838
- }
839
- }
840
- .text-violet-300 {
841
- color: var(--color-violet-300);
842
- }
843
939
  .text-white {
844
940
  color: var(--color-white);
845
941
  }
846
- .text-white\/50 {
847
- color: color-mix(in srgb, #fff 50%, transparent);
848
- @supports (color: color-mix(in lab, red, red)) {
849
- color: color-mix(in oklab, var(--color-white) 50%, transparent);
850
- }
851
- }
852
942
  .text-white\/80 {
853
943
  color: color-mix(in srgb, #fff 80%, transparent);
854
944
  @supports (color: color-mix(in lab, red, red)) {
855
945
  color: color-mix(in oklab, var(--color-white) 80%, transparent);
856
946
  }
857
947
  }
948
+ .uppercase {
949
+ text-transform: uppercase;
950
+ }
858
951
  .antialiased {
859
952
  -webkit-font-smoothing: antialiased;
860
953
  -moz-osx-font-smoothing: grayscale;
861
954
  }
955
+ .opacity-0 {
956
+ opacity: 0%;
957
+ }
958
+ .opacity-40 {
959
+ opacity: 40%;
960
+ }
961
+ .opacity-60 {
962
+ opacity: 60%;
963
+ }
964
+ .opacity-100 {
965
+ opacity: 100%;
966
+ }
967
+ .shadow-\[0_7px_5px_rgb\(var\(--nc-accent-1\)\/0\.35\)\] {
968
+ --tw-shadow: 0 7px 5px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.35));
969
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
970
+ }
862
971
  .shadow-\[0_8px_32px_rgba\(0\,0\,0\,0\.3\)\] {
863
972
  --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(0,0,0,0.3));
864
973
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
865
974
  }
975
+ .shadow-\[0_10px_20px_rgb\(var\(--nc-accent-1\)\/0\.35\)\] {
976
+ --tw-shadow: 0 10px 20px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.35));
977
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
978
+ }
979
+ .shadow-\[0_12px_30px_rgb\(var\(--nc-accent-1\)\/0\.45\)\] {
980
+ --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.45));
981
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
982
+ }
983
+ .shadow-\[0_12px_30px_rgb\(var\(--nc-accent-2\)\/0\.45\)\] {
984
+ --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-2)/0.45));
985
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
986
+ }
987
+ .shadow-\[0_15px_35px_rgba\(0\,0\,0\,0\.35\)\] {
988
+ --tw-shadow: 0 15px 35px var(--tw-shadow-color, rgba(0,0,0,0.35));
989
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
990
+ }
991
+ .shadow-\[0_18px_40px_rgba\(0\,0\,0\,0\.25\)\] {
992
+ --tw-shadow: 0 18px 40px var(--tw-shadow-color, rgba(0,0,0,0.25));
993
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
994
+ }
995
+ .shadow-\[0_18px_40px_rgba\(0\,0\,0\,0\.35\)\] {
996
+ --tw-shadow: 0 18px 40px var(--tw-shadow-color, rgba(0,0,0,0.35));
997
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
998
+ }
999
+ .shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.45\)\] {
1000
+ --tw-shadow: 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.45));
1001
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1002
+ }
1003
+ .shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.55\)\] {
1004
+ --tw-shadow: 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.55));
1005
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1006
+ }
1007
+ .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.06\)\] {
1008
+ --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.06));
1009
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1010
+ }
866
1011
  .shadow-\[inset_0_2px_8px_rgba\(0\,0\,0\,0\.3\)\] {
867
1012
  --tw-shadow: inset 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.3));
868
1013
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -871,23 +1016,9 @@
871
1016
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
872
1017
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
873
1018
  }
874
- .shadow-blue-500\/50 {
875
- --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
876
- @supports (color: color-mix(in lab, red, red)) {
877
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
878
- }
879
- }
880
- .shadow-fuchsia-500\/50 {
881
- --tw-shadow-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 50%, transparent);
882
- @supports (color: color-mix(in lab, red, red)) {
883
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-fuchsia-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
884
- }
885
- }
886
- .shadow-violet-500\/50 {
887
- --tw-shadow-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 50%, transparent);
888
- @supports (color: color-mix(in lab, red, red)) {
889
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-violet-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
890
- }
1019
+ .shadow-sm {
1020
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1021
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
891
1022
  }
892
1023
  .outline {
893
1024
  outline-style: var(--tw-outline-style);
@@ -917,11 +1048,21 @@
917
1048
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
918
1049
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
919
1050
  }
1051
+ .transition {
1052
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
1053
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1054
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1055
+ }
920
1056
  .transition-all {
921
1057
  transition-property: all;
922
1058
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
923
1059
  transition-duration: var(--tw-duration, var(--default-transition-duration));
924
1060
  }
1061
+ .transition-opacity {
1062
+ transition-property: opacity;
1063
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1064
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1065
+ }
925
1066
  .duration-200 {
926
1067
  --tw-duration: 200ms;
927
1068
  transition-duration: 200ms;
@@ -930,36 +1071,55 @@
930
1071
  --tw-duration: 300ms;
931
1072
  transition-duration: 300ms;
932
1073
  }
933
- .placeholder\:text-amber-200\/40 {
934
- &::placeholder {
935
- color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 40%, transparent);
936
- @supports (color: color-mix(in lab, red, red)) {
937
- color: color-mix(in oklab, var(--color-amber-200) 40%, transparent);
938
- }
1074
+ .outline-none {
1075
+ --tw-outline-style: none;
1076
+ outline-style: none;
1077
+ }
1078
+ .peer-checked\:translate-x-5 {
1079
+ &:is(:where(.peer):checked ~ *) {
1080
+ --tw-translate-x: calc(var(--spacing) * 5);
1081
+ translate: var(--tw-translate-x) var(--tw-translate-y);
939
1082
  }
940
1083
  }
941
- .placeholder\:text-emerald-200\/40 {
942
- &::placeholder {
943
- color: color-mix(in srgb, oklch(90.5% 0.093 164.15) 40%, transparent);
944
- @supports (color: color-mix(in lab, red, red)) {
945
- color: color-mix(in oklab, var(--color-emerald-200) 40%, transparent);
946
- }
1084
+ .peer-checked\:border-\[rgb\(var\(--nc-accent-1\)\)\] {
1085
+ &:is(:where(.peer):checked ~ *) {
1086
+ border-color: rgb(var(--nc-accent-1));
947
1087
  }
948
1088
  }
949
- .placeholder\:text-sky-200\/40 {
950
- &::placeholder {
951
- color: color-mix(in srgb, oklch(90.1% 0.058 230.902) 40%, transparent);
952
- @supports (color: color-mix(in lab, red, red)) {
953
- color: color-mix(in oklab, var(--color-sky-200) 40%, transparent);
954
- }
1089
+ .peer-checked\:border-\[rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
1090
+ &:is(:where(.peer):checked ~ *) {
1091
+ border-color: rgb(var(--nc-accent-1)/0.6);
955
1092
  }
956
1093
  }
957
- .placeholder\:text-violet-200\/40 {
1094
+ .peer-checked\:bg-\[rgb\(var\(--nc-accent-1\)\/0\.25\)\] {
1095
+ &:is(:where(.peer):checked ~ *) {
1096
+ background-color: rgb(var(--nc-accent-1)/0.25);
1097
+ }
1098
+ }
1099
+ .peer-checked\:bg-\[rgb\(var\(--nc-surface-muted\)\)\] {
1100
+ &:is(:where(.peer):checked ~ *) {
1101
+ background-color: rgb(var(--nc-surface-muted));
1102
+ }
1103
+ }
1104
+ .peer-checked\:opacity-100 {
1105
+ &:is(:where(.peer):checked ~ *) {
1106
+ opacity: 100%;
1107
+ }
1108
+ }
1109
+ .peer-focus-visible\:ring-2 {
1110
+ &:is(:where(.peer):focus-visible ~ *) {
1111
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1112
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1113
+ }
1114
+ }
1115
+ .peer-focus-visible\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
1116
+ &:is(:where(.peer):focus-visible ~ *) {
1117
+ --tw-ring-color: rgb(var(--nc-accent-1)/0.5);
1118
+ }
1119
+ }
1120
+ .placeholder\:text-\[rgb\(var\(--nc-fg-soft\)\)\] {
958
1121
  &::placeholder {
959
- color: color-mix(in srgb, oklch(89.4% 0.057 293.283) 40%, transparent);
960
- @supports (color: color-mix(in lab, red, red)) {
961
- color: color-mix(in oklab, var(--color-violet-200) 40%, transparent);
962
- }
1122
+ color: rgb(var(--nc-fg-soft));
963
1123
  }
964
1124
  }
965
1125
  .before\:absolute {
@@ -1012,13 +1172,10 @@
1012
1172
  background-image: linear-gradient(var(--tw-gradient-stops));
1013
1173
  }
1014
1174
  }
1015
- .before\:from-sky-400\/20 {
1175
+ .before\:from-\[rgb\(var\(--nc-accent-1\)\/0\.2\)\] {
1016
1176
  &::before {
1017
1177
  content: var(--tw-content);
1018
- --tw-gradient-from: color-mix(in srgb, oklch(74.6% 0.16 232.661) 20%, transparent);
1019
- @supports (color: color-mix(in lab, red, red)) {
1020
- --tw-gradient-from: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
1021
- }
1178
+ --tw-gradient-from: rgb(var(--nc-accent-1)/0.2);
1022
1179
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1023
1180
  }
1024
1181
  }
@@ -1032,24 +1189,18 @@
1032
1189
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1033
1190
  }
1034
1191
  }
1035
- .before\:via-blue-500\/20 {
1192
+ .before\:via-\[rgb\(var\(--nc-accent-2\)\/0\.2\)\] {
1036
1193
  &::before {
1037
1194
  content: var(--tw-content);
1038
- --tw-gradient-via: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
1039
- @supports (color: color-mix(in lab, red, red)) {
1040
- --tw-gradient-via: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
1041
- }
1195
+ --tw-gradient-via: rgb(var(--nc-accent-2)/0.2);
1042
1196
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
1043
1197
  --tw-gradient-stops: var(--tw-gradient-via-stops);
1044
1198
  }
1045
1199
  }
1046
- .before\:to-indigo-600\/20 {
1200
+ .before\:to-\[rgb\(var\(--nc-accent-3\)\/0\.2\)\] {
1047
1201
  &::before {
1048
1202
  content: var(--tw-content);
1049
- --tw-gradient-to: color-mix(in srgb, oklch(51.1% 0.262 276.966) 20%, transparent);
1050
- @supports (color: color-mix(in lab, red, red)) {
1051
- --tw-gradient-to: color-mix(in oklab, var(--color-indigo-600) 20%, transparent);
1052
- }
1203
+ --tw-gradient-to: rgb(var(--nc-accent-3)/0.2);
1053
1204
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1054
1205
  }
1055
1206
  }
@@ -1088,152 +1239,176 @@
1088
1239
  transition-duration: 300ms;
1089
1240
  }
1090
1241
  }
1091
- .hover\:scale-\[1\.02\] {
1092
- &:hover {
1093
- @media (hover: hover) {
1094
- scale: 1.02;
1242
+ .after\:absolute {
1243
+ &::after {
1244
+ content: var(--tw-content);
1245
+ position: absolute;
1246
+ }
1247
+ }
1248
+ .after\:inset-0 {
1249
+ &::after {
1250
+ content: var(--tw-content);
1251
+ inset: calc(var(--spacing) * 0);
1252
+ }
1253
+ }
1254
+ .after\:-translate-x-full {
1255
+ &::after {
1256
+ content: var(--tw-content);
1257
+ --tw-translate-x: -100%;
1258
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1259
+ }
1260
+ }
1261
+ .after\:animate-\[shimmer_1\.6s_infinite\] {
1262
+ &::after {
1263
+ content: var(--tw-content);
1264
+ animation: shimmer 1.6s infinite;
1265
+ }
1266
+ }
1267
+ .after\:bg-linear-to-r {
1268
+ &::after {
1269
+ content: var(--tw-content);
1270
+ --tw-gradient-position: to right;
1271
+ @supports (background-image: linear-gradient(in lab, red, red)) {
1272
+ --tw-gradient-position: to right in oklab;
1095
1273
  }
1274
+ background-image: linear-gradient(var(--tw-gradient-stops));
1096
1275
  }
1097
1276
  }
1098
- .hover\:border-sky-400 {
1099
- &:hover {
1100
- @media (hover: hover) {
1101
- border-color: var(--color-sky-400);
1277
+ .after\:from-transparent {
1278
+ &::after {
1279
+ content: var(--tw-content);
1280
+ --tw-gradient-from: transparent;
1281
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1282
+ }
1283
+ }
1284
+ .after\:via-white\/20 {
1285
+ &::after {
1286
+ content: var(--tw-content);
1287
+ --tw-gradient-via: color-mix(in srgb, #fff 20%, transparent);
1288
+ @supports (color: color-mix(in lab, red, red)) {
1289
+ --tw-gradient-via: color-mix(in oklab, var(--color-white) 20%, transparent);
1102
1290
  }
1291
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
1292
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
1293
+ }
1294
+ }
1295
+ .after\:to-transparent {
1296
+ &::after {
1297
+ content: var(--tw-content);
1298
+ --tw-gradient-to: transparent;
1299
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1103
1300
  }
1104
1301
  }
1105
- .hover\:border-white\/20 {
1302
+ .hover\:scale-\[1\.01\] {
1106
1303
  &:hover {
1107
1304
  @media (hover: hover) {
1108
- border-color: color-mix(in srgb, #fff 20%, transparent);
1109
- @supports (color: color-mix(in lab, red, red)) {
1110
- border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
1111
- }
1305
+ scale: 1.01;
1112
1306
  }
1113
1307
  }
1114
1308
  }
1115
- .hover\:bg-sky-400\/10 {
1309
+ .hover\:scale-\[1\.02\] {
1116
1310
  &:hover {
1117
1311
  @media (hover: hover) {
1118
- background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 10%, transparent);
1119
- @supports (color: color-mix(in lab, red, red)) {
1120
- background-color: color-mix(in oklab, var(--color-sky-400) 10%, transparent);
1121
- }
1312
+ scale: 1.02;
1122
1313
  }
1123
1314
  }
1124
1315
  }
1125
- .hover\:bg-white\/10 {
1316
+ .hover\:border-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
1126
1317
  &:hover {
1127
1318
  @media (hover: hover) {
1128
- background-color: color-mix(in srgb, #fff 10%, transparent);
1129
- @supports (color: color-mix(in lab, red, red)) {
1130
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1131
- }
1319
+ border-color: rgb(var(--nc-accent-1));
1132
1320
  }
1133
1321
  }
1134
1322
  }
1135
- .hover\:from-violet-600 {
1323
+ .hover\:border-\[color\:rgb\(var\(--nc-border\)\/0\.5\)\] {
1136
1324
  &:hover {
1137
1325
  @media (hover: hover) {
1138
- --tw-gradient-from: var(--color-violet-600);
1139
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1326
+ border-color: rgb(var(--nc-border)/0.5);
1140
1327
  }
1141
1328
  }
1142
1329
  }
1143
- .hover\:to-purple-700 {
1330
+ .hover\:bg-\[color\:rgb\(var\(--nc-accent-1\)\/0\.1\)\] {
1144
1331
  &:hover {
1145
1332
  @media (hover: hover) {
1146
- --tw-gradient-to: var(--color-purple-700);
1147
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1333
+ background-color: rgb(var(--nc-accent-1)/0.1);
1148
1334
  }
1149
1335
  }
1150
1336
  }
1151
- .hover\:shadow-\[0_8px_40px_rgba\(0\,0\,0\,0\.4\)\] {
1337
+ .hover\:bg-\[color\:rgb\(var\(--nc-surface\)\/0\.18\)\] {
1152
1338
  &:hover {
1153
1339
  @media (hover: hover) {
1154
- --tw-shadow: 0 8px 40px var(--tw-shadow-color, rgba(0,0,0,0.4));
1155
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1340
+ background-color: rgb(var(--nc-surface)/0.18);
1156
1341
  }
1157
1342
  }
1158
1343
  }
1159
- .hover\:shadow-xl {
1344
+ .hover\:bg-\[rgb\(var\(--nc-surface\)\/0\.12\)\] {
1160
1345
  &:hover {
1161
1346
  @media (hover: hover) {
1162
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1163
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1347
+ background-color: rgb(var(--nc-surface)/0.12);
1164
1348
  }
1165
1349
  }
1166
1350
  }
1167
- .hover\:shadow-blue-500\/60 {
1351
+ .hover\:bg-transparent {
1168
1352
  &:hover {
1169
1353
  @media (hover: hover) {
1170
- --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 60%, transparent);
1171
- @supports (color: color-mix(in lab, red, red)) {
1172
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 60%, transparent) var(--tw-shadow-alpha), transparent);
1173
- }
1354
+ background-color: transparent;
1174
1355
  }
1175
1356
  }
1176
1357
  }
1177
- .hover\:shadow-fuchsia-500\/60 {
1358
+ .hover\:bg-white\/10 {
1178
1359
  &:hover {
1179
1360
  @media (hover: hover) {
1180
- --tw-shadow-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 60%, transparent);
1361
+ background-color: color-mix(in srgb, #fff 10%, transparent);
1181
1362
  @supports (color: color-mix(in lab, red, red)) {
1182
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-fuchsia-500) 60%, transparent) var(--tw-shadow-alpha), transparent);
1363
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1183
1364
  }
1184
1365
  }
1185
1366
  }
1186
1367
  }
1187
- .hover\:shadow-violet-500\/60 {
1368
+ .hover\:text-\[rgb\(var\(--nc-fg\)\)\] {
1188
1369
  &:hover {
1189
1370
  @media (hover: hover) {
1190
- --tw-shadow-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 60%, transparent);
1191
- @supports (color: color-mix(in lab, red, red)) {
1192
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-violet-500) 60%, transparent) var(--tw-shadow-alpha), transparent);
1193
- }
1371
+ color: rgb(var(--nc-fg));
1194
1372
  }
1195
1373
  }
1196
1374
  }
1197
- .hover\:before\:opacity-100 {
1375
+ .hover\:shadow-\[0_8px_40px_rgba\(0\,0\,0\,0\.4\)\] {
1198
1376
  &:hover {
1199
1377
  @media (hover: hover) {
1200
- &::before {
1201
- content: var(--tw-content);
1202
- opacity: 100%;
1203
- }
1378
+ --tw-shadow: 0 8px 40px var(--tw-shadow-color, rgba(0,0,0,0.4));
1379
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1204
1380
  }
1205
1381
  }
1206
1382
  }
1207
- .focus\:border-amber-400\/80 {
1208
- &:focus {
1209
- border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 80%, transparent);
1210
- @supports (color: color-mix(in lab, red, red)) {
1211
- border-color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
1383
+ .hover\:shadow-\[0_16px_36px_rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
1384
+ &:hover {
1385
+ @media (hover: hover) {
1386
+ --tw-shadow: 0 16px 36px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.6));
1387
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1212
1388
  }
1213
1389
  }
1214
1390
  }
1215
- .focus\:border-emerald-400\/80 {
1216
- &:focus {
1217
- border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 80%, transparent);
1218
- @supports (color: color-mix(in lab, red, red)) {
1219
- border-color: color-mix(in oklab, var(--color-emerald-400) 80%, transparent);
1391
+ .hover\:shadow-\[0_16px_36px_rgb\(var\(--nc-accent-2\)\/0\.6\)\] {
1392
+ &:hover {
1393
+ @media (hover: hover) {
1394
+ --tw-shadow: 0 16px 36px var(--tw-shadow-color, rgb(var(--nc-accent-2)/0.6));
1395
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1220
1396
  }
1221
1397
  }
1222
1398
  }
1223
- .focus\:border-sky-400\/80 {
1224
- &:focus {
1225
- border-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 80%, transparent);
1226
- @supports (color: color-mix(in lab, red, red)) {
1227
- border-color: color-mix(in oklab, var(--color-sky-400) 80%, transparent);
1399
+ .hover\:before\:opacity-100 {
1400
+ &:hover {
1401
+ @media (hover: hover) {
1402
+ &::before {
1403
+ content: var(--tw-content);
1404
+ opacity: 100%;
1405
+ }
1228
1406
  }
1229
1407
  }
1230
1408
  }
1231
- .focus\:border-violet-400\/80 {
1409
+ .focus\:border-\[rgb\(var\(--nc-accent-1\)\/0\.8\)\] {
1232
1410
  &:focus {
1233
- border-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 80%, transparent);
1234
- @supports (color: color-mix(in lab, red, red)) {
1235
- border-color: color-mix(in oklab, var(--color-violet-400) 80%, transparent);
1236
- }
1411
+ border-color: rgb(var(--nc-accent-1)/0.8);
1237
1412
  }
1238
1413
  }
1239
1414
  .focus\:shadow-\[0_0_30px_-5px_var\(--glow-color\)\] {
@@ -1242,42 +1417,26 @@
1242
1417
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1243
1418
  }
1244
1419
  }
1245
- .focus\:ring-4 {
1420
+ .focus\:ring-2 {
1246
1421
  &:focus {
1247
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1422
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1248
1423
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1249
1424
  }
1250
1425
  }
1251
- .focus\:ring-amber-400\/30 {
1252
- &:focus {
1253
- --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent);
1254
- @supports (color: color-mix(in lab, red, red)) {
1255
- --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
1256
- }
1257
- }
1258
- }
1259
- .focus\:ring-emerald-400\/30 {
1426
+ .focus\:ring-4 {
1260
1427
  &:focus {
1261
- --tw-ring-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 30%, transparent);
1262
- @supports (color: color-mix(in lab, red, red)) {
1263
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
1264
- }
1428
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1429
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1265
1430
  }
1266
1431
  }
1267
- .focus\:ring-sky-400\/30 {
1432
+ .focus\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
1268
1433
  &:focus {
1269
- --tw-ring-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 30%, transparent);
1270
- @supports (color: color-mix(in lab, red, red)) {
1271
- --tw-ring-color: color-mix(in oklab, var(--color-sky-400) 30%, transparent);
1272
- }
1434
+ --tw-ring-color: rgb(var(--nc-accent-1)/0.3);
1273
1435
  }
1274
1436
  }
1275
- .focus\:ring-violet-400\/30 {
1437
+ .focus\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
1276
1438
  &:focus {
1277
- --tw-ring-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 30%, transparent);
1278
- @supports (color: color-mix(in lab, red, red)) {
1279
- --tw-ring-color: color-mix(in oklab, var(--color-violet-400) 30%, transparent);
1280
- }
1439
+ --tw-ring-color: rgb(var(--nc-accent-1)/0.5);
1281
1440
  }
1282
1441
  }
1283
1442
  .focus\:outline-none {
@@ -1292,9 +1451,9 @@
1292
1451
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1293
1452
  }
1294
1453
  }
1295
- .focus-visible\:ring-sky-400 {
1454
+ .focus-visible\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
1296
1455
  &:focus-visible {
1297
- --tw-ring-color: var(--color-sky-400);
1456
+ --tw-ring-color: rgb(var(--nc-accent-1)/0.6);
1298
1457
  }
1299
1458
  }
1300
1459
  .focus-visible\:ring-offset-2 {
@@ -1341,20 +1500,101 @@
1341
1500
  }
1342
1501
  }
1343
1502
  }
1503
+ .sm\:px-6 {
1504
+ @media (width >= 40rem) {
1505
+ padding-inline: calc(var(--spacing) * 6);
1506
+ }
1507
+ }
1508
+ .sm\:px-12 {
1509
+ @media (width >= 40rem) {
1510
+ padding-inline: calc(var(--spacing) * 12);
1511
+ }
1512
+ }
1344
1513
  .md\:grid-cols-2 {
1345
1514
  @media (width >= 48rem) {
1346
1515
  grid-template-columns: repeat(2, minmax(0, 1fr));
1347
1516
  }
1348
1517
  }
1518
+ .md\:grid-cols-3 {
1519
+ @media (width >= 48rem) {
1520
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1521
+ }
1522
+ }
1523
+ .lg\:flex {
1524
+ @media (width >= 64rem) {
1525
+ display: flex;
1526
+ }
1527
+ }
1349
1528
  .lg\:grid-cols-3 {
1350
1529
  @media (width >= 64rem) {
1351
1530
  grid-template-columns: repeat(3, minmax(0, 1fr));
1352
1531
  }
1353
1532
  }
1533
+ .lg\:grid-cols-4 {
1534
+ @media (width >= 64rem) {
1535
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1536
+ }
1537
+ }
1538
+ .lg\:grid-cols-5 {
1539
+ @media (width >= 64rem) {
1540
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1541
+ }
1542
+ }
1543
+ .lg\:grid-cols-6 {
1544
+ @media (width >= 64rem) {
1545
+ grid-template-columns: repeat(6, minmax(0, 1fr));
1546
+ }
1547
+ }
1548
+ .lg\:grid-cols-\[1\.1fr_0\.9fr\] {
1549
+ @media (width >= 64rem) {
1550
+ grid-template-columns: 1.1fr 0.9fr;
1551
+ }
1552
+ }
1553
+ .lg\:grid-cols-\[220px_1fr\] {
1554
+ @media (width >= 64rem) {
1555
+ grid-template-columns: 220px 1fr;
1556
+ }
1557
+ }
1558
+ .lg\:grid-cols-\[260px_1fr\] {
1559
+ @media (width >= 64rem) {
1560
+ grid-template-columns: 260px 1fr;
1561
+ }
1562
+ }
1563
+ .lg\:px-8 {
1564
+ @media (width >= 64rem) {
1565
+ padding-inline: calc(var(--spacing) * 8);
1566
+ }
1567
+ }
1568
+ .dark\:border-white\/10 {
1569
+ @media (prefers-color-scheme: dark) {
1570
+ border-color: color-mix(in srgb, #fff 10%, transparent);
1571
+ @supports (color: color-mix(in lab, red, red)) {
1572
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1573
+ }
1574
+ }
1575
+ }
1576
+ .dark\:bg-white\/10 {
1577
+ @media (prefers-color-scheme: dark) {
1578
+ background-color: color-mix(in srgb, #fff 10%, transparent);
1579
+ @supports (color: color-mix(in lab, red, red)) {
1580
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1581
+ }
1582
+ }
1583
+ }
1354
1584
  }
1355
1585
  :root {
1356
1586
  --background: #ffffff;
1357
1587
  --foreground: #171717;
1588
+ --nc-fg: 17 24 39;
1589
+ --nc-fg-muted: 71 85 105;
1590
+ --nc-fg-soft: 100 116 139;
1591
+ --nc-surface: 255 255 255;
1592
+ --nc-surface-muted: 248 250 252;
1593
+ --nc-border: 148 163 184;
1594
+ --nc-accent-1: 56 189 248;
1595
+ --nc-accent-2: 59 130 246;
1596
+ --nc-accent-3: 99 102 241;
1597
+ --nc-accent-soft: 224 242 254;
1358
1598
  }
1359
1599
  @media (prefers-color-scheme: dark) {
1360
1600
  :root {
@@ -1362,11 +1602,63 @@
1362
1602
  --foreground: #ededed;
1363
1603
  }
1364
1604
  }
1605
+ [data-nc-mode="light"] {
1606
+ --background: #ffffff;
1607
+ --foreground: #171717;
1608
+ }
1609
+ [data-nc-mode="dark"] {
1610
+ --background: #0a0a0a;
1611
+ --foreground: #ededed;
1612
+ --nc-fg: 255 255 255;
1613
+ --nc-fg-muted: 226 232 240;
1614
+ --nc-fg-soft: 148 163 184;
1615
+ --nc-surface: 15 23 42;
1616
+ --nc-surface-muted: 30 41 59;
1617
+ --nc-border: 148 163 184;
1618
+ }
1619
+ :root, [data-nc-theme="ocean"] {
1620
+ --nc-accent-1: 56 189 248;
1621
+ --nc-accent-2: 59 130 246;
1622
+ --nc-accent-3: 99 102 241;
1623
+ --nc-accent-soft: 224 242 254;
1624
+ }
1625
+ [data-nc-theme="aurora"] {
1626
+ --nc-accent-1: 52 211 153;
1627
+ --nc-accent-2: 45 212 191;
1628
+ --nc-accent-3: 34 211 238;
1629
+ --nc-accent-soft: 209 250 229;
1630
+ }
1631
+ [data-nc-theme="ember"] {
1632
+ --nc-accent-1: 251 146 60;
1633
+ --nc-accent-2: 249 115 22;
1634
+ --nc-accent-3: 244 63 94;
1635
+ --nc-accent-soft: 254 215 170;
1636
+ }
1637
+ [data-nc-theme="midnight"] {
1638
+ --nc-accent-1: 167 139 250;
1639
+ --nc-accent-2: 192 132 252;
1640
+ --nc-accent-3: 244 114 182;
1641
+ --nc-accent-soft: 237 233 254;
1642
+ }
1643
+ [data-nc-theme="cosmic"] {
1644
+ --nc-accent-1: 244 114 182;
1645
+ --nc-accent-2: 168 85 247;
1646
+ --nc-accent-3: 129 140 248;
1647
+ --nc-accent-soft: 251 207 232;
1648
+ }
1365
1649
  body {
1366
1650
  background: var(--background);
1367
1651
  color: var(--foreground);
1368
1652
  font-family: Arial, Helvetica, sans-serif;
1369
1653
  }
1654
+ @keyframes shimmer {
1655
+ 0% {
1656
+ transform: translateX(-100%);
1657
+ }
1658
+ 100% {
1659
+ transform: translateX(100%);
1660
+ }
1661
+ }
1370
1662
  @property --tw-translate-x {
1371
1663
  syntax: "*";
1372
1664
  inherits: false;