singularity-components 0.1.103 → 0.1.104

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/main.css CHANGED
@@ -55,7 +55,8 @@
55
55
  :root,
56
56
  :host {
57
57
  --sg-spacing: 0.25rem;
58
- --sg-container-md: 28rem;
58
+ --sg-container-2xl: 42rem;
59
+ --sg-container-4xl: 56rem;
59
60
  --sg-text-xs: 0.75rem;
60
61
  --sg-text-xs--line-height: calc(1 / 0.75);
61
62
  --sg-text-sm: 0.875rem;
@@ -72,6 +73,8 @@
72
73
  --sg-text-3xl--line-height: calc(2.25 / 1.875);
73
74
  --sg-text-4xl: 2.25rem;
74
75
  --sg-text-4xl--line-height: calc(2.5 / 2.25);
76
+ --sg-text-5xl: 3rem;
77
+ --sg-text-5xl--line-height: 1;
75
78
  --sg-font-weight-normal: 400;
76
79
  --sg-font-weight-medium: 500;
77
80
  --sg-font-weight-semibold: 600;
@@ -297,6 +300,15 @@
297
300
  .sg\:inset-\[18\%\] {
298
301
  inset: 18%;
299
302
  }
303
+ .sg\:top-4 {
304
+ top: calc(var(--sg-spacing) * 4);
305
+ }
306
+ .sg\:left-4 {
307
+ left: calc(var(--sg-spacing) * 4);
308
+ }
309
+ .sg\:z-10 {
310
+ z-index: 10;
311
+ }
300
312
  .sg\:col-start-2 {
301
313
  grid-column-start: 2;
302
314
  }
@@ -309,39 +321,36 @@
309
321
  .sg\:mt-4 {
310
322
  margin-top: calc(var(--sg-spacing) * 4);
311
323
  }
312
- .sg\:mt-6 {
313
- margin-top: calc(var(--sg-spacing) * 6);
314
- }
315
324
  .sg\:mt-12 {
316
325
  margin-top: calc(var(--sg-spacing) * 12);
317
326
  }
327
+ .sg\:mt-auto {
328
+ margin-top: auto;
329
+ }
318
330
  .sg\:mb-2 {
319
331
  margin-bottom: calc(var(--sg-spacing) * 2);
320
332
  }
321
333
  .sg\:mb-3 {
322
334
  margin-bottom: calc(var(--sg-spacing) * 3);
323
335
  }
336
+ .sg\:mb-4 {
337
+ margin-bottom: calc(var(--sg-spacing) * 4);
338
+ }
324
339
  .sg\:mb-6 {
325
340
  margin-bottom: calc(var(--sg-spacing) * 6);
326
341
  }
327
342
  .sg\:mb-8 {
328
343
  margin-bottom: calc(var(--sg-spacing) * 8);
329
344
  }
345
+ .sg\:ml-2 {
346
+ margin-left: calc(var(--sg-spacing) * 2);
347
+ }
330
348
  .sg\:line-clamp-1 {
331
349
  overflow: hidden;
332
350
  display: -webkit-box;
333
351
  -webkit-box-orient: vertical;
334
352
  -webkit-line-clamp: 1;
335
353
  }
336
- .sg\:line-clamp-2 {
337
- overflow: hidden;
338
- display: -webkit-box;
339
- -webkit-box-orient: vertical;
340
- -webkit-line-clamp: 2;
341
- }
342
- .sg\:block {
343
- display: block;
344
- }
345
354
  .sg\:flex {
346
355
  display: flex;
347
356
  }
@@ -384,9 +393,6 @@
384
393
  .sg\:h-10 {
385
394
  height: calc(var(--sg-spacing) * 10);
386
395
  }
387
- .sg\:h-11 {
388
- height: calc(var(--sg-spacing) * 11);
389
- }
390
396
  .sg\:h-12 {
391
397
  height: calc(var(--sg-spacing) * 12);
392
398
  }
@@ -423,12 +429,15 @@
423
429
  .sg\:w-full {
424
430
  width: 100%;
425
431
  }
432
+ .sg\:max-w-2xl {
433
+ max-width: var(--sg-container-2xl);
434
+ }
435
+ .sg\:max-w-4xl {
436
+ max-width: var(--sg-container-4xl);
437
+ }
426
438
  .sg\:max-w-\[768px\] {
427
439
  max-width: 768px;
428
440
  }
429
- .sg\:max-w-md {
430
- max-width: var(--sg-container-md);
431
- }
432
441
  .sg\:max-w-none {
433
442
  max-width: none;
434
443
  }
@@ -457,6 +466,15 @@
457
466
  .sg\:cursor-pointer {
458
467
  cursor: pointer;
459
468
  }
469
+ .sg\:list-inside {
470
+ list-style-position: inside;
471
+ }
472
+ .sg\:list-decimal {
473
+ list-style-type: decimal;
474
+ }
475
+ .sg\:list-disc {
476
+ list-style-type: disc;
477
+ }
460
478
  .sg\:grid-cols-1 {
461
479
  grid-template-columns: repeat(1, minmax(0, 1fr));
462
480
  }
@@ -484,9 +502,6 @@
484
502
  .sg\:justify-items-start {
485
503
  justify-items: start;
486
504
  }
487
- .sg\:gap-0 {
488
- gap: calc(var(--sg-spacing) * 0);
489
- }
490
505
  .sg\:gap-1 {
491
506
  gap: calc(var(--sg-spacing) * 1);
492
507
  }
@@ -527,6 +542,20 @@
527
542
  margin-block-end: calc(calc(var(--sg-spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
528
543
  }
529
544
  }
545
+ .sg\:space-y-2 {
546
+ :where(& > :not(:last-child)) {
547
+ --tw-space-y-reverse: 0;
548
+ margin-block-start: calc(calc(var(--sg-spacing) * 2) * var(--tw-space-y-reverse));
549
+ margin-block-end: calc(calc(var(--sg-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
550
+ }
551
+ }
552
+ .sg\:space-y-6 {
553
+ :where(& > :not(:last-child)) {
554
+ --tw-space-y-reverse: 0;
555
+ margin-block-start: calc(calc(var(--sg-spacing) * 6) * var(--tw-space-y-reverse));
556
+ margin-block-end: calc(calc(var(--sg-spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
557
+ }
558
+ }
530
559
  .sg\:gap-y-0\.5 {
531
560
  row-gap: calc(var(--sg-spacing) * 0.5);
532
561
  }
@@ -536,6 +565,9 @@
536
565
  .sg\:overflow-x-auto {
537
566
  overflow-x: auto;
538
567
  }
568
+ .sg\:rounded {
569
+ border-radius: 0.25rem;
570
+ }
539
571
  .sg\:rounded-2xl {
540
572
  border-radius: var(--sg-radius-2xl);
541
573
  }
@@ -567,6 +599,13 @@
567
599
  border-bottom-style: var(--tw-border-style);
568
600
  border-bottom-width: 1px;
569
601
  }
602
+ .sg\:border-l-4 {
603
+ border-left-style: var(--tw-border-style);
604
+ border-left-width: 4px;
605
+ }
606
+ .sg\:border-\[hsl\(var\(--sg-primary\)\)\] {
607
+ border-color: hsl(var(--sg-primary));
608
+ }
570
609
  .sg\:border-border {
571
610
  border-color: hsl(var(--sg-border));
572
611
  }
@@ -600,6 +639,9 @@
600
639
  .sg\:bg-destructive {
601
640
  background-color: hsl(var(--sg-red));
602
641
  }
642
+ .sg\:bg-muted {
643
+ background-color: hsl(var(--sg-color-muted-background));
644
+ }
603
645
  .sg\:bg-muted\/50 {
604
646
  background-color: hsl(var(--sg-color-muted-background));
605
647
  @supports (color: color-mix(in lab, red, red)) {
@@ -609,6 +651,9 @@
609
651
  .sg\:bg-orange {
610
652
  background-color: hsl(var(--sg-orange));
611
653
  }
654
+ .sg\:bg-pink {
655
+ background-color: hsl(var(--sg-pink));
656
+ }
612
657
  .sg\:bg-primary {
613
658
  background-color: hsl(var(--sg-primary));
614
659
  }
@@ -633,10 +678,6 @@
633
678
  --tw-gradient-position: to top in oklab;
634
679
  background-image: linear-gradient(var(--tw-gradient-stops));
635
680
  }
636
- .sg\:bg-gradient-to-tr {
637
- --tw-gradient-position: to top right in oklab;
638
- background-image: linear-gradient(var(--tw-gradient-stops));
639
- }
640
681
  .sg\:bg-\[conic-gradient\(hsl\(var\(--sg-gradient-1\)\)\,hsl\(var\(--sg-gradient-2\)\)\,hsl\(var\(--sg-primary\)\)\,hsl\(var\(--sg-gradient-1\)\)\)\] {
641
682
  background-image:
642
683
  conic-gradient(
@@ -645,6 +686,22 @@
645
686
  hsl(var(--sg-primary)),
646
687
  hsl(var(--sg-gradient-1)));
647
688
  }
689
+ .sg\:bg-\[linear-gradient\(135deg\,hsl\(var\(--sg-primary-light\)\)_0\%\,hsl\(var\(--sg-pink\)\)_50\%\,hsl\(var\(--sg-orange\)\)_100\%\)\] {
690
+ background-image:
691
+ linear-gradient(
692
+ 135deg,
693
+ hsl(var(--sg-primary-light)) 0%,
694
+ hsl(var(--sg-pink)) 50%,
695
+ hsl(var(--sg-orange)) 100%);
696
+ }
697
+ .sg\:bg-\[linear-gradient\(135deg\,hsl\(var\(--sg-primary-light\)\/0\.1\)_0\%\,hsl\(var\(--sg-pink\)\/0\.1\)_50\%\,hsl\(var\(--sg-orange\)\/0\.1\)_100\%\)\] {
698
+ background-image:
699
+ linear-gradient(
700
+ 135deg,
701
+ hsl(var(--sg-primary-light)/0.1) 0%,
702
+ hsl(var(--sg-pink)/0.1) 50%,
703
+ hsl(var(--sg-orange)/0.1) 100%);
704
+ }
648
705
  .sg\:bg-\[radial-gradient\(1200px_300px_at_10\%_-20\%\,hsl\(var\(--sg-gradient-1\)\/0\.15\)\,transparent\)\,radial-gradient\(800px_200px_at_90\%_-20\%\,hsl\(var\(--sg-gradient-2\)\/0\.15\)\,transparent\)\] {
649
706
  background-image:
650
707
  radial-gradient(
@@ -656,8 +713,16 @@
656
713
  hsl(var(--sg-gradient-2)/0.15),
657
714
  transparent);
658
715
  }
659
- .sg\:from-\[hsl\(var\(--sg-gradient-1\)\)\] {
660
- --tw-gradient-from: hsl(var(--sg-gradient-1));
716
+ .sg\:from-\[hsl\(var\(--sg-blue\)\)\] {
717
+ --tw-gradient-from: hsl(var(--sg-blue));
718
+ --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));
719
+ }
720
+ .sg\:from-\[hsl\(var\(--sg-pink\)\)\] {
721
+ --tw-gradient-from: hsl(var(--sg-pink));
722
+ --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));
723
+ }
724
+ .sg\:from-\[hsl\(var\(--sg-primary\)\)\] {
725
+ --tw-gradient-from: hsl(var(--sg-primary));
661
726
  --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));
662
727
  }
663
728
  .sg\:from-background {
@@ -671,15 +736,8 @@
671
736
  }
672
737
  --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));
673
738
  }
674
- .sg\:from-blue {
675
- --tw-gradient-from: hsl(var(--sg-blue));
676
- --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));
677
- }
678
- .sg\:via-background\/20 {
679
- --tw-gradient-via: hsl(var(--sg-color-background));
680
- @supports (color: color-mix(in lab, red, red)) {
681
- --tw-gradient-via: color-mix(in oklab, hsl(var(--sg-color-background)) 20%, transparent);
682
- }
739
+ .sg\:via-\[hsl\(var\(--sg-pink\)\)\] {
740
+ --tw-gradient-via: hsl(var(--sg-pink));
683
741
  --tw-gradient-via-stops:
684
742
  var(--tw-gradient-position),
685
743
  var(--tw-gradient-from) var(--tw-gradient-from-position),
@@ -687,8 +745,11 @@
687
745
  var(--tw-gradient-to) var(--tw-gradient-to-position);
688
746
  --tw-gradient-stops: var(--tw-gradient-via-stops);
689
747
  }
690
- .sg\:via-orange {
691
- --tw-gradient-via: hsl(var(--sg-orange));
748
+ .sg\:via-background\/20 {
749
+ --tw-gradient-via: hsl(var(--sg-color-background));
750
+ @supports (color: color-mix(in lab, red, red)) {
751
+ --tw-gradient-via: color-mix(in oklab, hsl(var(--sg-color-background)) 20%, transparent);
752
+ }
692
753
  --tw-gradient-via-stops:
693
754
  var(--tw-gradient-position),
694
755
  var(--tw-gradient-from) var(--tw-gradient-from-position),
@@ -696,8 +757,12 @@
696
757
  var(--tw-gradient-to) var(--tw-gradient-to-position);
697
758
  --tw-gradient-stops: var(--tw-gradient-via-stops);
698
759
  }
699
- .sg\:to-\[hsl\(var\(--sg-gradient-2\)\)\] {
700
- --tw-gradient-to: hsl(var(--sg-gradient-2));
760
+ .sg\:to-\[hsl\(var\(--sg-orange\)\)\] {
761
+ --tw-gradient-to: hsl(var(--sg-orange));
762
+ --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));
763
+ }
764
+ .sg\:to-\[hsl\(var\(--sg-pink\)\)\] {
765
+ --tw-gradient-to: hsl(var(--sg-pink));
701
766
  --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));
702
767
  }
703
768
  .sg\:to-background\/60 {
@@ -707,10 +772,6 @@
707
772
  }
708
773
  --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));
709
774
  }
710
- .sg\:to-red {
711
- --tw-gradient-to: hsl(var(--sg-red));
712
- --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));
713
- }
714
775
  .sg\:to-transparent {
715
776
  --tw-gradient-to: transparent;
716
777
  --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));
@@ -727,14 +788,11 @@
727
788
  .sg\:p-4 {
728
789
  padding: calc(var(--sg-spacing) * 4);
729
790
  }
730
- .sg\:p-5 {
731
- padding: calc(var(--sg-spacing) * 5);
732
- }
733
791
  .sg\:p-6 {
734
792
  padding: calc(var(--sg-spacing) * 6);
735
793
  }
736
- .sg\:p-\[2px\] {
737
- padding: 2px;
794
+ .sg\:px-1\.5 {
795
+ padding-inline: calc(var(--sg-spacing) * 1.5);
738
796
  }
739
797
  .sg\:px-2 {
740
798
  padding-inline: calc(var(--sg-spacing) * 2);
@@ -763,18 +821,27 @@
763
821
  .sg\:py-4 {
764
822
  padding-block: calc(var(--sg-spacing) * 4);
765
823
  }
824
+ .sg\:py-8 {
825
+ padding-block: calc(var(--sg-spacing) * 8);
826
+ }
766
827
  .sg\:py-12 {
767
828
  padding-block: calc(var(--sg-spacing) * 12);
768
829
  }
769
- .sg\:py-16 {
770
- padding-block: calc(var(--sg-spacing) * 16);
830
+ .sg\:py-20 {
831
+ padding-block: calc(var(--sg-spacing) * 20);
771
832
  }
772
833
  .sg\:pt-0 {
773
834
  padding-top: calc(var(--sg-spacing) * 0);
774
835
  }
836
+ .sg\:pb-1 {
837
+ padding-bottom: calc(var(--sg-spacing) * 1);
838
+ }
775
839
  .sg\:pb-4 {
776
840
  padding-bottom: calc(var(--sg-spacing) * 4);
777
841
  }
842
+ .sg\:pl-4 {
843
+ padding-left: calc(var(--sg-spacing) * 4);
844
+ }
778
845
  .sg\:text-center {
779
846
  text-align: center;
780
847
  }
@@ -866,6 +933,12 @@
866
933
  .sg\:text-muted-foreground {
867
934
  color: hsl(var(--sg-color-muted-foreground));
868
935
  }
936
+ .sg\:text-orange {
937
+ color: hsl(var(--sg-orange));
938
+ }
939
+ .sg\:text-pink {
940
+ color: hsl(var(--sg-pink));
941
+ }
869
942
  .sg\:text-primary {
870
943
  color: hsl(var(--sg-primary));
871
944
  }
@@ -884,9 +957,15 @@
884
957
  .sg\:text-white {
885
958
  color: hsl(var(--sg-white));
886
959
  }
960
+ .sg\:italic {
961
+ font-style: italic;
962
+ }
887
963
  .sg\:underline-offset-4 {
888
964
  text-underline-offset: 4px;
889
965
  }
966
+ .sg\:opacity-20 {
967
+ opacity: 20%;
968
+ }
890
969
  .sg\:shadow-lg {
891
970
  --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));
892
971
  box-shadow:
@@ -951,6 +1030,11 @@
951
1030
  transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
952
1031
  transition-duration: var(--tw-duration, var(--sg-default-transition-duration));
953
1032
  }
1033
+ .sg\:transition-opacity {
1034
+ transition-property: opacity;
1035
+ transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
1036
+ transition-duration: var(--tw-duration, var(--sg-default-transition-duration));
1037
+ }
954
1038
  .sg\:transition-transform {
955
1039
  transition-property:
956
1040
  transform,
@@ -964,6 +1048,10 @@
964
1048
  --tw-duration: 200ms;
965
1049
  transition-duration: 200ms;
966
1050
  }
1051
+ .sg\:duration-300 {
1052
+ --tw-duration: 300ms;
1053
+ transition-duration: 300ms;
1054
+ }
967
1055
  .sg\:duration-500 {
968
1056
  --tw-duration: 500ms;
969
1057
  transition-duration: 500ms;
@@ -982,6 +1070,9 @@
982
1070
  .sg\:duration-200 {
983
1071
  animation-duration: 200ms;
984
1072
  }
1073
+ .sg\:duration-300 {
1074
+ animation-duration: 300ms;
1075
+ }
985
1076
  .sg\:duration-500 {
986
1077
  animation-duration: 500ms;
987
1078
  }
@@ -995,6 +1086,30 @@
995
1086
  }
996
1087
  }
997
1088
  }
1089
+ .sg\:group-hover\:scale-110 {
1090
+ &:is(:where(.sg\:group):hover *) {
1091
+ @media (hover: hover) {
1092
+ --tw-scale-x: 110%;
1093
+ --tw-scale-y: 110%;
1094
+ --tw-scale-z: 110%;
1095
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1096
+ }
1097
+ }
1098
+ }
1099
+ .sg\:group-hover\:text-\[hsl\(var\(--sg-primary\)\)\] {
1100
+ &:is(:where(.sg\:group):hover *) {
1101
+ @media (hover: hover) {
1102
+ color: hsl(var(--sg-primary));
1103
+ }
1104
+ }
1105
+ }
1106
+ .sg\:group-hover\:opacity-30 {
1107
+ &:is(:where(.sg\:group):hover *) {
1108
+ @media (hover: hover) {
1109
+ opacity: 30%;
1110
+ }
1111
+ }
1112
+ }
998
1113
  .sg\:selection\:bg-primary {
999
1114
  & *::selection {
1000
1115
  background-color: hsl(var(--sg-primary));
@@ -1126,6 +1241,19 @@
1126
1241
  }
1127
1242
  }
1128
1243
  }
1244
+ .sg\:hover\:shadow-lg {
1245
+ &:hover {
1246
+ @media (hover: hover) {
1247
+ --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));
1248
+ box-shadow:
1249
+ var(--tw-inset-shadow),
1250
+ var(--tw-inset-ring-shadow),
1251
+ var(--tw-ring-offset-shadow),
1252
+ var(--tw-ring-shadow),
1253
+ var(--tw-shadow);
1254
+ }
1255
+ }
1256
+ }
1129
1257
  .sg\:focus-visible\:border-ring {
1130
1258
  &:focus-visible {
1131
1259
  border-color: var(--ring);
@@ -1246,11 +1374,6 @@
1246
1374
  background-color: hsl(var(--sg-color-muted-background));
1247
1375
  }
1248
1376
  }
1249
- .sg\:sm\:grid-cols-2 {
1250
- @media (width >= 40rem) {
1251
- grid-template-columns: repeat(2, minmax(0, 1fr));
1252
- }
1253
- }
1254
1377
  .sg\:md\:grid-cols-2 {
1255
1378
  @media (width >= 48rem) {
1256
1379
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1276,17 +1399,18 @@
1276
1399
  padding-inline: calc(var(--sg-spacing) * 0);
1277
1400
  }
1278
1401
  }
1402
+ .sg\:md\:text-4xl {
1403
+ @media (width >= 48rem) {
1404
+ font-size: var(--sg-text-4xl);
1405
+ line-height: var(--tw-leading, var(--sg-text-4xl--line-height));
1406
+ }
1407
+ }
1279
1408
  .sg\:md\:text-sm {
1280
1409
  @media (width >= 48rem) {
1281
1410
  font-size: var(--sg-text-sm);
1282
1411
  line-height: var(--tw-leading, var(--sg-text-sm--line-height));
1283
1412
  }
1284
1413
  }
1285
- .sg\:lg\:grid-cols-3 {
1286
- @media (width >= 64rem) {
1287
- grid-template-columns: repeat(3, minmax(0, 1fr));
1288
- }
1289
- }
1290
1414
  .sg\:lg\:text-2xl {
1291
1415
  @media (width >= 64rem) {
1292
1416
  font-size: var(--sg-text-2xl);
@@ -1299,10 +1423,10 @@
1299
1423
  line-height: var(--tw-leading, var(--sg-text-3xl--line-height));
1300
1424
  }
1301
1425
  }
1302
- .sg\:lg\:text-4xl {
1426
+ .sg\:lg\:text-5xl {
1303
1427
  @media (width >= 64rem) {
1304
- font-size: var(--sg-text-4xl);
1305
- line-height: var(--tw-leading, var(--sg-text-4xl--line-height));
1428
+ font-size: var(--sg-text-5xl);
1429
+ line-height: var(--tw-leading, var(--sg-text-5xl--line-height));
1306
1430
  }
1307
1431
  }
1308
1432
  .sg\:dark\:bg-destructive\/60 {
@@ -1587,6 +1711,14 @@
1587
1711
  color: transparent;
1588
1712
  }
1589
1713
  }
1714
+ .gradient-hero {
1715
+ background:
1716
+ linear-gradient(
1717
+ 135deg,
1718
+ hsl(var(--sg-primary-light)) 0%,
1719
+ hsl(var(--sg-pink)) 50%,
1720
+ hsl(var(--sg-orange)) 100%);
1721
+ }
1590
1722
  @keyframes enter {
1591
1723
  from {
1592
1724
  opacity: var(--tw-enter-opacity, 1);