@maboussoleaidant/design-system 0.1.13 → 0.1.14

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 (11) hide show
  1. package/dist/mba-design-system.css +107 -139
  2. package/dist/mba-design-system.css.map +1 -1
  3. package/dist/mba-design-system.min.css +1 -1
  4. package/dist/mba-tailwind.css +1717 -1696
  5. package/dist/mba-tailwind.css.map +1 -1
  6. package/dist/mba-tailwind.min.css +1 -1
  7. package/dist/mba-tokens-only.css +6 -0
  8. package/dist/mba-tokens-only.css.map +1 -1
  9. package/package.json +1 -1
  10. package/src/tokens/_spacing.css +5 -0
  11. package/src/tokens/_typography.css +1 -0
package/dist/mba-tailwind.css CHANGED
@@ -72,6 +72,7 @@
72
72
  --mba-font-family-text: "Open Sans", ui-sans-serif, system-ui, sans-serif;
73
73
  --mba-font-family-heading: "Congenial", ui-sans-serif, system-ui, sans-serif;
74
74
  --mba-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
75
+ --mba-font-size-xxxs: 0.75rem;
75
76
  --mba-font-size-xxs: 0.875rem;
76
77
  --mba-font-size-xs: 1rem;
77
78
  --mba-font-size-sm: 1.125rem;
@@ -179,6 +180,7 @@
179
180
  --mba-space-xxl: 4rem;
180
181
  --mba-space-0: 0;
181
182
  --mba-space-px: 1px;
183
+ --mba-container-width: 70rem;
182
184
  }
183
185
  :root {
184
186
  --mba-radius-2xs: 0.25rem;
@@ -582,1774 +584,1793 @@ a:hover {
582
584
  background-color: var(--mba-color-primary-100);
583
585
  color: var(--mba-color-primary-900);
584
586
  }
585
- .mba-btn {
586
- display: inline-flex;
587
- height: 38px;
588
- padding: var(--mba-space-xs) var(--mba-space-sm);
589
- justify-content: center;
590
- align-items: center;
591
- gap: var(--mba-space-xs);
592
- font-family: var(--mba-font-family-text);
593
- font-size: var(--mba-font-size-xs);
594
- font-weight: var(--mba-font-weight-semibold);
595
- line-height: var(--mba-leading-snug);
596
- text-decoration: none;
597
- border: 1px solid transparent;
598
- border-radius: var(--mba-radius-xs);
599
- cursor: pointer;
600
- transition: all 0.25s ease-in-out;
601
- user-select: none;
602
- white-space: nowrap;
603
- background-color: var(--mba-color-primary-500);
604
- color: var(--mba-color-white);
605
- }
606
- .mba-btn:hover:not(:disabled):not(.is-disabled) {
607
- background-color: var(--mba-color-white);
608
- color: var(--mba-color-primary-800);
609
- border: 1px solid var(--mba-color-primary-800);
610
- }
611
- .mba-btn:focus {
612
- outline: none;
613
- box-shadow: var(--mba-focus-ring);
614
- }
615
- .mba-btn:disabled,
587
+ @layer components {
588
+ .mba-btn {
589
+ display: inline-flex;
590
+ height: 38px;
591
+ padding: var(--mba-space-xs) var(--mba-space-sm);
592
+ justify-content: center;
593
+ align-items: center;
594
+ gap: var(--mba-space-xs);
595
+ font-family: var(--mba-font-family-text);
596
+ font-size: var(--mba-font-size-xs);
597
+ font-weight: var(--mba-font-weight-semibold);
598
+ line-height: var(--mba-leading-snug);
599
+ text-decoration: none;
600
+ border: 1px solid transparent;
601
+ border-radius: var(--mba-radius-xs);
602
+ cursor: pointer;
603
+ transition: all var(--mba-transition-base);
604
+ user-select: none;
605
+ white-space: nowrap;
606
+ background-color: var(--mba-color-primary-500);
607
+ color: var(--mba-color-white);
608
+ }
609
+ .mba-btn:hover:not(:disabled):not(.is-disabled) {
610
+ background-color: var(--mba-color-white);
611
+ color: var(--mba-color-primary-800);
612
+ border: 1px solid var(--mba-color-primary-800);
613
+ }
614
+ .mba-btn:focus {
615
+ outline: none;
616
+ box-shadow: var(--mba-focus-ring);
617
+ }
618
+ .mba-btn:disabled,
616
619
  .mba-btn.is-disabled {
617
- background-color: var(--mba-color-grey-50);
618
- color: var(--mba-color-grey-400);
619
- border-color: transparent;
620
- cursor: not-allowed;
621
- pointer-events: none;
622
- }
623
- .mba-btn-secondary {
624
- display: inline-flex;
625
- height: 38px;
626
- padding: var(--mba-space-xs) var(--mba-space-sm);
627
- justify-content: center;
628
- align-items: center;
629
- gap: var(--mba-space-xs);
630
- font-family: var(--mba-font-family-text);
631
- font-size: var(--mba-font-size-xs);
632
- font-weight: var(--mba-font-weight-semibold);
633
- line-height: var(--mba-leading-snug);
634
- text-decoration: none;
635
- border-radius: var(--mba-radius-xs);
636
- cursor: pointer;
637
- transition: all 0.25s ease-in-out;
638
- user-select: none;
639
- white-space: nowrap;
640
- background-color: var(--mba-color-white);
641
- color: var(--mba-color-primary-800);
642
- border: 1px solid var(--mba-color-primary-800);
643
- }
644
- .mba-btn-secondary:hover:not(:disabled):not(.is-disabled) {
645
- background-color: var(--mba-color-primary-500);
646
- color: var(--mba-color-white);
647
- border-color: var(--mba-color-primary-500);
648
- }
649
- .mba-btn-secondary:focus {
650
- outline: none;
651
- box-shadow: var(--mba-focus-ring);
652
- }
653
- .mba-btn-secondary:disabled,
620
+ background-color: var(--mba-color-grey-50);
621
+ color: var(--mba-color-grey-400);
622
+ border-color: transparent;
623
+ cursor: not-allowed;
624
+ pointer-events: none;
625
+ }
626
+ .mba-btn-secondary {
627
+ display: inline-flex;
628
+ height: 38px;
629
+ padding: var(--mba-space-xs) var(--mba-space-sm);
630
+ justify-content: center;
631
+ align-items: center;
632
+ gap: var(--mba-space-xs);
633
+ font-family: var(--mba-font-family-text);
634
+ font-size: var(--mba-font-size-xs);
635
+ font-weight: var(--mba-font-weight-semibold);
636
+ line-height: var(--mba-leading-snug);
637
+ text-decoration: none;
638
+ border-radius: var(--mba-radius-xs);
639
+ cursor: pointer;
640
+ transition: all var(--mba-transition-base);
641
+ user-select: none;
642
+ white-space: nowrap;
643
+ background-color: var(--mba-color-white);
644
+ color: var(--mba-color-primary-800);
645
+ border: 1px solid var(--mba-color-primary-800);
646
+ }
647
+ .mba-btn-secondary:hover:not(:disabled):not(.is-disabled) {
648
+ background-color: var(--mba-color-primary-500);
649
+ color: var(--mba-color-white);
650
+ border-color: var(--mba-color-primary-500);
651
+ }
652
+ .mba-btn-secondary:focus {
653
+ outline: none;
654
+ box-shadow: var(--mba-focus-ring);
655
+ }
656
+ .mba-btn-secondary:disabled,
654
657
  .mba-btn-secondary.is-disabled {
655
- background-color: var(--mba-color-grey-50);
656
- color: var(--mba-color-grey-400);
657
- border-color: var(--mba-color-grey-100);
658
- cursor: not-allowed;
659
- pointer-events: none;
660
- }
661
- .mba-btn-tertiary {
662
- display: inline-flex;
663
- height: 38px;
664
- padding: var(--mba-space-xs) var(--mba-space-sm);
665
- justify-content: center;
666
- align-items: center;
667
- gap: var(--mba-space-xs);
668
- font-family: var(--mba-font-family-text);
669
- font-size: var(--mba-font-size-xs);
670
- font-weight: var(--mba-font-weight-semibold);
671
- line-height: var(--mba-leading-snug);
672
- text-decoration: none;
673
- border: none;
674
- border-radius: var(--mba-radius-xs);
675
- cursor: pointer;
676
- transition: all 0.25s ease-in-out;
677
- user-select: none;
678
- white-space: nowrap;
679
- background-color: var(--mba-color-white);
680
- color: var(--mba-color-primary-500);
681
- }
682
- .mba-btn-tertiary:hover:not(:disabled):not(.is-disabled) {
683
- background-color: var(--mba-color-primary-50);
684
- color: var(--mba-color-primary-500);
685
- }
686
- .mba-btn-tertiary:focus {
687
- outline: none;
688
- box-shadow: var(--mba-focus-ring);
689
- }
690
- .mba-btn-tertiary:disabled,
658
+ background-color: var(--mba-color-grey-50);
659
+ color: var(--mba-color-grey-400);
660
+ border-color: var(--mba-color-grey-100);
661
+ cursor: not-allowed;
662
+ pointer-events: none;
663
+ }
664
+ .mba-btn-tertiary {
665
+ display: inline-flex;
666
+ height: 38px;
667
+ padding: var(--mba-space-xs) var(--mba-space-sm);
668
+ justify-content: center;
669
+ align-items: center;
670
+ gap: var(--mba-space-xs);
671
+ font-family: var(--mba-font-family-text);
672
+ font-size: var(--mba-font-size-xs);
673
+ font-weight: var(--mba-font-weight-semibold);
674
+ line-height: var(--mba-leading-snug);
675
+ text-decoration: none;
676
+ border: none;
677
+ border-radius: var(--mba-radius-xs);
678
+ cursor: pointer;
679
+ transition: all var(--mba-transition-base);
680
+ user-select: none;
681
+ white-space: nowrap;
682
+ background-color: var(--mba-color-white);
683
+ color: var(--mba-color-primary-500);
684
+ }
685
+ .mba-btn-tertiary:hover:not(:disabled):not(.is-disabled) {
686
+ background-color: var(--mba-color-primary-50);
687
+ color: var(--mba-color-primary-500);
688
+ }
689
+ .mba-btn-tertiary:focus {
690
+ outline: none;
691
+ box-shadow: var(--mba-focus-ring);
692
+ }
693
+ .mba-btn-tertiary:disabled,
691
694
  .mba-btn-tertiary.is-disabled {
692
- background-color: var(--mba-color-grey-50);
693
- color: var(--mba-color-grey-400);
694
- cursor: not-allowed;
695
- pointer-events: none;
696
- }
697
- .mba-btn-inline {
698
- display: inline-flex;
699
- height: 24px;
700
- padding: var(--mba-space-xs) var(--mba-space-sm);
701
- justify-content: center;
702
- align-items: center;
703
- gap: var(--mba-space-xxs);
704
- font-family: var(--mba-font-family-text);
705
- font-size: var(--mba-font-size-xs);
706
- font-weight: var(--mba-font-weight-semibold);
707
- line-height: var(--mba-leading-snug);
708
- text-decoration: underline;
709
- border: none;
710
- border-radius: var(--mba-radius-xs);
711
- cursor: pointer;
712
- transition: all 0.25s ease-in-out;
713
- user-select: none;
714
- white-space: nowrap;
715
- background-color: var(--mba-color-white);
716
- color: var(--mba-color-primary-500);
717
- }
718
- .mba-btn-inline:hover:not(:disabled):not(.is-disabled):not(.is-error) {
719
- background-color: var(--mba-color-white);
720
- color: var(--mba-color-primary-800);
721
- text-decoration: underline;
722
- }
723
- .mba-btn-inline:focus {
724
- outline: none;
725
- box-shadow: var(--mba-focus-ring);
726
- }
727
- .mba-btn-inline:disabled,
695
+ background-color: var(--mba-color-grey-50);
696
+ color: var(--mba-color-grey-400);
697
+ cursor: not-allowed;
698
+ pointer-events: none;
699
+ }
700
+ .mba-btn-inline {
701
+ display: inline-flex;
702
+ height: 24px;
703
+ padding: var(--mba-space-xs) var(--mba-space-sm);
704
+ justify-content: center;
705
+ align-items: center;
706
+ gap: var(--mba-space-xxs);
707
+ font-family: var(--mba-font-family-text);
708
+ font-size: var(--mba-font-size-xs);
709
+ font-weight: var(--mba-font-weight-semibold);
710
+ line-height: var(--mba-leading-snug);
711
+ text-decoration: underline;
712
+ border: none;
713
+ border-radius: var(--mba-radius-xs);
714
+ cursor: pointer;
715
+ transition: all var(--mba-transition-base);
716
+ user-select: none;
717
+ white-space: nowrap;
718
+ background-color: var(--mba-color-white);
719
+ color: var(--mba-color-primary-500);
720
+ }
721
+ .mba-btn-inline:hover:not(:disabled):not(.is-disabled):not(.is-error) {
722
+ background-color: var(--mba-color-white);
723
+ color: var(--mba-color-primary-800);
724
+ text-decoration: underline;
725
+ }
726
+ .mba-btn-inline:focus {
727
+ outline: none;
728
+ box-shadow: var(--mba-focus-ring);
729
+ }
730
+ .mba-btn-inline:disabled,
728
731
  .mba-btn-inline.is-disabled {
729
- background-color: var(--mba-color-white);
730
- color: var(--mba-color-grey-400);
731
- text-decoration: underline;
732
- cursor: not-allowed;
733
- pointer-events: none;
734
- }
735
- .mba-btn-inline.is-error {
736
- background-color: var(--mba-color-white);
737
- color: var(--mba-color-error-500);
738
- text-decoration: underline;
739
- }
740
- .mba-btn-light {
741
- display: inline-flex;
742
- height: 30px;
743
- padding: var(--mba-space-xxs) 12px;
744
- justify-content: center;
745
- align-items: center;
746
- gap: var(--mba-space-xxs);
747
- font-family: var(--mba-font-family-text);
748
- font-size: var(--mba-font-size-xs);
749
- font-weight: var(--mba-font-weight-semibold);
750
- line-height: var(--mba-leading-snug);
751
- text-decoration: none;
752
- border: 1.5px solid var(--mba-color-primary-400);
753
- border-radius: var(--mba-radius-sm);
754
- cursor: pointer;
755
- transition: all 0.25s ease-in-out;
756
- user-select: none;
757
- white-space: nowrap;
758
- background-color: var(--mba-color-white);
759
- color: var(--mba-color-primary-900);
760
- }
761
- .mba-btn-light:hover:not(:disabled):not(.is-disabled) {
762
- background-color: var(--mba-color-white);
763
- color: var(--mba-color-primary-900);
764
- border-color: var(--mba-color-primary-500);
765
- text-decoration: underline;
766
- }
767
- .mba-btn-light:focus {
768
- outline: none;
769
- box-shadow: var(--mba-focus-ring);
770
- }
771
- .mba-btn-light:disabled,
732
+ background-color: var(--mba-color-white);
733
+ color: var(--mba-color-grey-400);
734
+ text-decoration: underline;
735
+ cursor: not-allowed;
736
+ pointer-events: none;
737
+ }
738
+ .mba-btn-inline.is-error {
739
+ background-color: var(--mba-color-white);
740
+ color: var(--mba-color-error-500);
741
+ text-decoration: underline;
742
+ }
743
+ .mba-btn-light {
744
+ display: inline-flex;
745
+ height: 30px;
746
+ padding: var(--mba-space-xxs) 12px;
747
+ justify-content: center;
748
+ align-items: center;
749
+ gap: var(--mba-space-xxs);
750
+ font-family: var(--mba-font-family-text);
751
+ font-size: var(--mba-font-size-xs);
752
+ font-weight: var(--mba-font-weight-semibold);
753
+ line-height: var(--mba-leading-snug);
754
+ text-decoration: none;
755
+ border: 1.5px solid var(--mba-color-primary-400);
756
+ border-radius: var(--mba-radius-sm);
757
+ cursor: pointer;
758
+ transition: all var(--mba-transition-base);
759
+ user-select: none;
760
+ white-space: nowrap;
761
+ background-color: var(--mba-color-white);
762
+ color: var(--mba-color-primary-900);
763
+ }
764
+ .mba-btn-light:hover:not(:disabled):not(.is-disabled) {
765
+ background-color: var(--mba-color-white);
766
+ color: var(--mba-color-primary-900);
767
+ border-color: var(--mba-color-primary-500);
768
+ text-decoration: underline;
769
+ }
770
+ .mba-btn-light:focus {
771
+ outline: none;
772
+ box-shadow: var(--mba-focus-ring);
773
+ }
774
+ .mba-btn-light:disabled,
772
775
  .mba-btn-light.is-disabled {
773
- background-color: var(--mba-color-white);
774
- color: var(--mba-color-grey-400);
775
- border-color: var(--mba-color-grey-100);
776
- cursor: not-allowed;
777
- pointer-events: none;
778
- }
779
- .mba-btn-annuaire {
780
- display: inline-flex;
781
- height: 38px;
782
- padding: var(--mba-space-xs) var(--mba-space-sm);
783
- justify-content: center;
784
- align-items: center;
785
- gap: var(--mba-space-xs);
786
- font-family: var(--mba-font-family-text);
787
- font-size: var(--mba-font-size-xs);
788
- font-weight: var(--mba-font-weight-semibold);
789
- line-height: var(--mba-leading-snug);
790
- text-decoration: none;
791
- border: 1px solid var(--mba-color-grey-100);
792
- border-radius: var(--mba-radius-xs);
793
- cursor: pointer;
794
- transition: all 0.25s ease-in-out;
795
- user-select: none;
796
- white-space: nowrap;
797
- background-color: var(--mba-color-white);
798
- color: var(--mba-color-primary-900);
799
- }
800
- .mba-btn-annuaire:hover:not(:disabled):not(.is-disabled) {
801
- background-color: var(--mba-color-white);
802
- color: var(--mba-color-primary-900);
803
- border-color: var(--mba-color-primary-500);
804
- }
805
- .mba-btn-annuaire:focus {
806
- outline: none;
807
- box-shadow: var(--mba-focus-ring);
808
- }
809
- .mba-btn-annuaire:disabled,
776
+ background-color: var(--mba-color-white);
777
+ color: var(--mba-color-grey-400);
778
+ border-color: var(--mba-color-grey-100);
779
+ cursor: not-allowed;
780
+ pointer-events: none;
781
+ }
782
+ .mba-btn-annuaire {
783
+ display: inline-flex;
784
+ height: 38px;
785
+ padding: var(--mba-space-xs) var(--mba-space-sm);
786
+ justify-content: center;
787
+ align-items: center;
788
+ gap: var(--mba-space-xs);
789
+ font-family: var(--mba-font-family-text);
790
+ font-size: var(--mba-font-size-xs);
791
+ font-weight: var(--mba-font-weight-semibold);
792
+ line-height: var(--mba-leading-snug);
793
+ text-decoration: none;
794
+ border: 1px solid var(--mba-color-grey-100);
795
+ border-radius: var(--mba-radius-xs);
796
+ cursor: pointer;
797
+ transition: all var(--mba-transition-base);
798
+ user-select: none;
799
+ white-space: nowrap;
800
+ background-color: var(--mba-color-white);
801
+ color: var(--mba-color-primary-900);
802
+ }
803
+ .mba-btn-annuaire:hover:not(:disabled):not(.is-disabled) {
804
+ background-color: var(--mba-color-white);
805
+ color: var(--mba-color-primary-900);
806
+ border-color: var(--mba-color-primary-500);
807
+ }
808
+ .mba-btn-annuaire:focus {
809
+ outline: none;
810
+ box-shadow: var(--mba-focus-ring);
811
+ }
812
+ .mba-btn-annuaire:disabled,
810
813
  .mba-btn-annuaire.is-disabled {
811
- background-color: var(--mba-color-white);
812
- color: var(--mba-color-grey-400);
813
- border-color: var(--mba-color-grey-100);
814
- cursor: not-allowed;
815
- pointer-events: none;
816
- }
817
- .mba-btn-pin {
818
- display: inline-flex;
819
- width: 40px;
820
- height: 40px;
821
- padding: 0;
822
- justify-content: center;
823
- align-items: center;
824
- border: 1px solid var(--mba-color-primary-500);
825
- border-radius: 50%;
826
- cursor: pointer;
827
- transition: all 0.25s ease-in-out;
828
- user-select: none;
829
- background-color: var(--mba-color-white);
830
- color: var(--mba-color-primary-500);
831
- }
832
- .mba-btn-pin .mba-icon {
833
- font-size: 20px;
834
- width: 20px;
835
- height: 20px;
836
- }
837
- .mba-btn-pin:focus {
838
- outline: none;
839
- box-shadow: var(--mba-focus-ring);
840
- }
841
- .mba-btn-pin.is-deja-vu {
842
- border-color: var(--mba-color-grey-300);
843
- background-color: var(--mba-color-grey-50);
844
- color: var(--mba-color-grey-300);
845
- }
846
- .mba-btn-pin.is-activated {
847
- border-color: var(--mba-color-primary-500);
848
- background-color: var(--mba-color-primary-500);
849
- color: var(--mba-color-white);
850
- }
851
- .mba-btn-pin.is-activated .mba-icon {
852
- color: var(--mba-color-white);
853
- }
854
- .mba-btn-pin:disabled,
814
+ background-color: var(--mba-color-white);
815
+ color: var(--mba-color-grey-400);
816
+ border-color: var(--mba-color-grey-100);
817
+ cursor: not-allowed;
818
+ pointer-events: none;
819
+ }
820
+ .mba-btn-pin {
821
+ display: inline-flex;
822
+ width: 40px;
823
+ height: 40px;
824
+ padding: 0;
825
+ justify-content: center;
826
+ align-items: center;
827
+ border: 1px solid var(--mba-color-primary-500);
828
+ border-radius: 50%;
829
+ cursor: pointer;
830
+ transition: all var(--mba-transition-base);
831
+ user-select: none;
832
+ background-color: var(--mba-color-white);
833
+ color: var(--mba-color-primary-500);
834
+ }
835
+ .mba-btn-pin .mba-icon {
836
+ font-size: 20px;
837
+ width: 20px;
838
+ height: 20px;
839
+ }
840
+ .mba-btn-pin:focus {
841
+ outline: none;
842
+ box-shadow: var(--mba-focus-ring);
843
+ }
844
+ .mba-btn-pin.is-deja-vu {
845
+ border-color: var(--mba-color-grey-300);
846
+ background-color: var(--mba-color-grey-50);
847
+ color: var(--mba-color-grey-300);
848
+ }
849
+ .mba-btn-pin.is-activated {
850
+ border-color: var(--mba-color-primary-500);
851
+ background-color: var(--mba-color-primary-500);
852
+ color: var(--mba-color-white);
853
+ }
854
+ .mba-btn-pin.is-activated .mba-icon {
855
+ color: var(--mba-color-white);
856
+ }
857
+ .mba-btn-pin:disabled,
855
858
  .mba-btn-pin.is-disabled {
856
- opacity: 0.5;
857
- cursor: not-allowed;
858
- pointer-events: none;
859
- }
860
- .mba-btn-icon-only {
861
- display: inline-flex;
862
- width: 24px;
863
- height: 24px;
864
- padding: 0;
865
- justify-content: center;
866
- align-items: center;
867
- border-radius: var(--mba-radius-xs);
868
- cursor: pointer;
869
- transition: all 0.25s ease-in-out;
870
- user-select: none;
871
- border: 1px solid var(--mba-color-black);
872
- background-color: var(--mba-color-white);
873
- color: var(--mba-color-black);
874
- }
875
- .mba-btn-icon-only .mba-icon {
876
- font-size: 16px;
877
- width: 16px;
878
- height: 16px;
879
- }
880
- .mba-btn-icon-only:hover:not(:disabled):not(.is-disabled):not(.is-activated):not(.is-alert) {
881
- border-color: var(--mba-color-primary-500);
882
- color: var(--mba-color-primary-500);
883
- }
884
- .mba-btn-icon-only:focus {
885
- outline: none;
886
- box-shadow: var(--mba-focus-ring);
887
- }
888
- .mba-btn-icon-only.is-activated {
889
- border-color: var(--mba-color-primary-500);
890
- background-color: var(--mba-color-white);
891
- color: var(--mba-color-primary-500);
892
- }
893
- .mba-btn-icon-only.is-activated:hover:not(:disabled):not(.is-disabled) {
894
- border-color: var(--mba-color-primary-500);
895
- color: var(--mba-color-primary-500);
896
- }
897
- .mba-btn-icon-only:disabled,
859
+ opacity: 0.5;
860
+ cursor: not-allowed;
861
+ pointer-events: none;
862
+ }
863
+ .mba-btn-icon-only {
864
+ display: inline-flex;
865
+ width: 24px;
866
+ height: 24px;
867
+ padding: 0;
868
+ justify-content: center;
869
+ align-items: center;
870
+ border-radius: var(--mba-radius-xs);
871
+ cursor: pointer;
872
+ transition: all var(--mba-transition-base);
873
+ user-select: none;
874
+ border: 1px solid var(--mba-color-black);
875
+ background-color: var(--mba-color-white);
876
+ color: var(--mba-color-black);
877
+ }
878
+ .mba-btn-icon-only .mba-icon {
879
+ font-size: 16px;
880
+ width: 16px;
881
+ height: 16px;
882
+ }
883
+ .mba-btn-icon-only:hover:not(:disabled):not(.is-disabled):not(.is-activated):not(.is-alert) {
884
+ border-color: var(--mba-color-primary-500);
885
+ color: var(--mba-color-primary-500);
886
+ }
887
+ .mba-btn-icon-only:focus {
888
+ outline: none;
889
+ box-shadow: var(--mba-focus-ring);
890
+ }
891
+ .mba-btn-icon-only.is-activated {
892
+ border-color: var(--mba-color-primary-500);
893
+ background-color: var(--mba-color-white);
894
+ color: var(--mba-color-primary-500);
895
+ }
896
+ .mba-btn-icon-only.is-activated:hover:not(:disabled):not(.is-disabled) {
897
+ border-color: var(--mba-color-primary-500);
898
+ color: var(--mba-color-primary-500);
899
+ }
900
+ .mba-btn-icon-only:disabled,
898
901
  .mba-btn-icon-only.is-disabled {
899
- border-color: var(--mba-color-grey-300);
900
- background-color: var(--mba-color-white);
901
- color: var(--mba-color-grey-300);
902
- cursor: not-allowed;
903
- pointer-events: none;
904
- }
905
- .mba-btn-icon-only.is-alert {
906
- border-color: var(--mba-color-error-500);
907
- background-color: var(--mba-color-white);
908
- color: var(--mba-color-error-500);
909
- }
910
- .mba-btn-icon-only.is-alert:hover:not(:disabled):not(.is-disabled) {
911
- border-color: var(--mba-color-error-500);
912
- color: var(--mba-color-error-500);
913
- }
914
- .mba-btn-sm {
915
- height: auto;
916
- padding: var(--mba-space-xxs) var(--mba-space-xs);
917
- gap: var(--mba-space-xs);
918
- font-size: var(--mba-font-size-xxs);
919
- }
920
- .mba-btn-icon-only i,
902
+ border-color: var(--mba-color-grey-300);
903
+ background-color: var(--mba-color-white);
904
+ color: var(--mba-color-grey-300);
905
+ cursor: not-allowed;
906
+ pointer-events: none;
907
+ }
908
+ .mba-btn-icon-only.is-alert {
909
+ border-color: var(--mba-color-error-500);
910
+ background-color: var(--mba-color-white);
911
+ color: var(--mba-color-error-500);
912
+ }
913
+ .mba-btn-icon-only.is-alert:hover:not(:disabled):not(.is-disabled) {
914
+ border-color: var(--mba-color-error-500);
915
+ color: var(--mba-color-error-500);
916
+ }
917
+ .mba-btn-sm {
918
+ height: auto;
919
+ padding: var(--mba-space-xxs) var(--mba-space-xs);
920
+ gap: var(--mba-space-xs);
921
+ font-size: var(--mba-font-size-xxs);
922
+ }
923
+ .mba-btn-icon-only i,
921
924
  .mba-btn-icon-only svg,
922
925
  .mba-btn i,
923
926
  .mba-btn svg {
924
- font-size: 1rem;
925
- width: 1rem;
926
- height: 1rem;
927
- }
928
- .mba-btn .arrow-forward,
927
+ font-size: 1rem;
928
+ width: 1rem;
929
+ height: 1rem;
930
+ }
931
+ .mba-btn .arrow-forward,
929
932
  .mba-btn-secondary .arrow-forward {
930
- vertical-align: middle;
931
- }
932
- .mba-btn-block {
933
- display: block;
934
- width: 100%;
935
- text-align: center;
936
- }
937
- @media (max-width: 767px) {
938
- .mba-btn,
939
- .mba-btn-secondary {
940
- display: flex;
933
+ vertical-align: middle;
934
+ }
935
+ .mba-btn-block {
936
+ display: block;
941
937
  width: 100%;
942
- max-width: 100%;
938
+ text-align: center;
943
939
  }
944
- }
945
- .mba-link {
946
- display: inline-flex;
947
- align-items: center;
948
- gap: var(--mba-space-xs);
949
- font-family: var(--mba-font-family-text);
950
- font-size: var(--mba-font-size-xs);
951
- font-weight: var(--mba-font-weight-semibold);
952
- color: var(--mba-color-primary-500);
953
- text-decoration: none;
954
- transition: color 0.2s ease;
955
- }
956
- .mba-link:hover {
957
- color: var(--mba-color-primary-800);
958
- }
959
- .mba-link__text {
960
- text-decoration: none;
961
- transition: text-decoration 0.2s ease;
962
- }
963
- .mba-link:hover .mba-link__text {
964
- text-decoration: underline;
965
- }
966
- .mba-link .material-symbols-rounded {
967
- font-size: 20px;
968
- text-decoration: none;
969
- }
970
- .mba-link:focus-visible {
971
- outline: none;
972
- box-shadow: var(--mba-focus-ring);
973
- border-radius: var(--mba-radius-2xs);
974
- }
975
- .mba-card {
976
- display: flex;
977
- flex-direction: column;
978
- padding: var(--mba-space-md);
979
- border-radius: var(--mba-radius-sm);
980
- background-color: var(--mba-color-beige);
981
- border: 2px solid transparent;
982
- transition: border-color 0.25s ease-in-out;
983
- cursor: pointer;
984
- }
985
- .mba-card:hover {
986
- border-color: var(--mba-color-primary-500);
987
- }
988
- .mba-card--sm {
989
- padding: var(--mba-space-sm);
990
- }
991
- .mba-card__header {
992
- display: flex;
993
- justify-content: space-between;
994
- align-items: center;
995
- gap: var(--mba-space-sm);
996
- }
997
- .mba-card__content {
998
- flex: 1;
999
- }
1000
- .mba-card__title {
1001
- font-family: var(--mba-font-family-text);
1002
- font-size: var(--mba-font-size-sm);
1003
- font-weight: var(--mba-font-weight-bold);
1004
- color: var(--mba-color-primary-800);
1005
- margin: 0 0 var(--mba-space-xs);
1006
- }
1007
- .mba-card__text {
1008
- font-family: var(--mba-font-family-text);
1009
- font-size: var(--mba-font-size-xs);
1010
- font-weight: var(--mba-font-weight-regular);
1011
- color: var(--mba-color-text);
1012
- line-height: var(--mba-leading-snug);
1013
- margin: 0;
1014
- }
1015
- .mba-card__icon {
1016
- flex-shrink: 0;
1017
- color: var(--mba-color-primary-500);
1018
- font-size: 24px;
1019
- transition: transform 0.2s ease;
1020
- }
1021
- .mba-card__icon svg {
1022
- width: 24px;
1023
- height: 24px;
1024
- }
1025
- .mba-card:hover .mba-card__icon {
1026
- transform: translateX(4px);
1027
- }
1028
- .mba-card-grid {
1029
- display: grid;
1030
- gap: var(--mba-space-md);
1031
- grid-template-columns: 1fr;
1032
- width: 100%;
1033
- }
1034
- @media (min-width: 600px) {
1035
- .mba-card-grid {
1036
- grid-template-columns: repeat(2, 1fr);
940
+ @media (max-width: 767px) {
941
+ .mba-btn,
942
+ .mba-btn-secondary {
943
+ display: flex;
944
+ width: 100%;
945
+ max-width: 100%;
946
+ }
1037
947
  }
1038
948
  }
1039
- @media (min-width: 900px) {
1040
- .mba-card-grid {
1041
- grid-template-columns: repeat(3, 1fr);
949
+ @layer components {
950
+ .mba-link {
951
+ display: inline-flex;
952
+ align-items: center;
953
+ gap: var(--mba-space-xs);
954
+ font-family: var(--mba-font-family-text);
955
+ font-size: var(--mba-font-size-xs);
956
+ font-weight: var(--mba-font-weight-semibold);
957
+ color: var(--mba-color-primary-500);
958
+ text-decoration: none;
959
+ transition: color var(--mba-transition-base);
1042
960
  }
1043
- }
1044
- .mba-card--white {
1045
- background-color: var(--mba-color-white);
1046
- }
1047
- .mba-card--static {
1048
- cursor: default;
1049
- }
1050
- .mba-card--static:hover {
1051
- border-color: transparent;
1052
- }
1053
- .mba-carousel-card {
1054
- position: relative;
1055
- display: flex;
1056
- flex-direction: column;
1057
- padding: var(--mba-space-md);
1058
- background-color: var(--mba-color-white);
1059
- border-radius: 24px 24px 8px 24px;
1060
- width: 453px;
1061
- height: 278px;
1062
- box-sizing: border-box;
1063
- }
1064
- .mba-carousel-card::before {
1065
- content: "";
1066
- position: absolute;
1067
- inset: 0;
1068
- padding: 1px;
1069
- background: var(--mba-gradient-sunset);
1070
- border-radius: 24px 24px 8px 24px;
1071
- mask: linear-gradient(#fff 0 0) content-box,
1072
- linear-gradient(#fff 0 0);
1073
- mask-composite: exclude;
1074
- -webkit-mask-composite: xor;
1075
- pointer-events: none;
1076
- }
1077
- .mba-carousel-card__title {
1078
- font-family: var(--mba-font-family-text);
1079
- font-size: var(--mba-font-size-sm);
1080
- font-weight: var(--mba-font-weight-bold);
1081
- color: var(--mba-color-primary-800);
1082
- margin: 0;
1083
- }
1084
- .mba-carousel-card__quote {
1085
- flex: 1;
1086
- margin-top: var(--mba-space-sm);
1087
- font-family: var(--mba-font-family-text);
1088
- font-size: var(--mba-font-size-xs);
1089
- font-weight: var(--mba-font-weight-regular);
1090
- color: var(--mba-color-primary-800);
1091
- }
1092
- .mba-carousel-card__author {
1093
- font-family: var(--mba-font-family-text);
1094
- font-size: var(--mba-font-size-xxs);
1095
- font-weight: var(--mba-font-weight-bold);
1096
- color: var(--mba-color-primary-500);
1097
- margin: 0;
1098
- }
1099
- @media (max-width: 767px) {
1100
- .mba-carousel-card {
1101
- width: 286px;
1102
- height: 360px;
961
+ .mba-link:hover {
962
+ color: var(--mba-color-primary-800);
1103
963
  }
1104
- }
1105
- .mba-stats-card {
1106
- position: relative;
1107
- padding: var(--mba-space-md);
1108
- background-color: var(--mba-color-white);
1109
- border-radius: var(--mba-radius-md);
1110
- box-shadow: var(--mba-shadow-xs);
1111
- transition: transform 0.3s ease, box-shadow 0.3s ease;
1112
- }
1113
- .mba-stats-card::before {
1114
- content: "";
1115
- position: absolute;
1116
- inset: 0;
1117
- padding: 1px;
1118
- background: var(--mba-gradient-sunset);
1119
- border-radius: var(--mba-radius-md);
1120
- mask: linear-gradient(#fff 0 0) content-box,
1121
- linear-gradient(#fff 0 0);
1122
- mask-composite: exclude;
1123
- -webkit-mask-composite: xor;
1124
- pointer-events: none;
1125
- }
1126
- .mba-stats-card:hover {
1127
- transform: translateY(-4px);
1128
- box-shadow: var(--mba-shadow-sm);
1129
- }
1130
- .mba-stats-card__value {
1131
- font-family: var(--mba-font-family-text);
1132
- font-size: var(--mba-font-size-xxl);
1133
- font-weight: var(--mba-font-weight-extrabold);
1134
- color: var(--mba-color-primary-500);
1135
- line-height: 1;
1136
- margin: 0;
1137
- }
1138
- .mba-stats-card__title {
1139
- font-family: var(--mba-font-family-text);
1140
- font-size: var(--mba-font-size-xs);
1141
- font-weight: var(--mba-font-weight-bold);
1142
- margin-top: var(--mba-space-sm);
1143
- margin-bottom: 0;
1144
- color: var(--mba-color-text);
1145
- }
1146
- .mba-stats-card__description {
1147
- font-family: var(--mba-font-family-text);
1148
- font-size: var(--mba-font-size-xs);
1149
- font-weight: var(--mba-font-weight-regular);
1150
- color: var(--mba-color-text);
1151
- margin: 0;
1152
- }
1153
- .mba-stats-grid {
1154
- display: grid;
1155
- grid-template-columns: repeat(3, 1fr);
1156
- gap: var(--mba-space-lg);
1157
- width: 100%;
1158
- }
1159
- @media (max-width: 900px) {
1160
- .mba-stats-grid {
1161
- grid-template-columns: repeat(2, 1fr);
964
+ .mba-link__text {
965
+ text-decoration: none;
966
+ transition: text-decoration var(--mba-transition-base);
1162
967
  }
1163
- }
1164
- @media (max-width: 600px) {
1165
- .mba-stats-grid {
1166
- grid-template-columns: 1fr;
968
+ .mba-link:hover .mba-link__text {
969
+ text-decoration: underline;
970
+ }
971
+ .mba-link .material-symbols-rounded {
972
+ font-size: 20px;
973
+ text-decoration: none;
974
+ }
975
+ .mba-link:focus-visible {
976
+ outline: none;
977
+ box-shadow: var(--mba-focus-ring);
978
+ border-radius: var(--mba-radius-2xs);
1167
979
  }
1168
980
  }
1169
- .mba-article-card {
1170
- display: flex;
1171
- flex-direction: column;
1172
- background-color: var(--mba-color-white);
1173
- border-radius: var(--mba-radius-sm);
1174
- overflow: hidden;
1175
- box-shadow: var(--mba-shadow-xs);
1176
- transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
1177
- }
1178
- .mba-article-card:hover {
1179
- box-shadow: var(--mba-shadow-sm);
1180
- transform: translateY(-2px);
1181
- }
1182
- .mba-article-card__image-wrapper {
1183
- position: relative;
1184
- }
1185
- .mba-article-card__image {
1186
- display: block;
1187
- width: 100%;
1188
- height: 152px;
1189
- object-fit: cover;
1190
- border-radius: var(--mba-radius-sm) var(--mba-radius-sm) 0 0;
1191
- }
1192
- .mba-article-card__tag {
1193
- position: absolute;
1194
- bottom: 0;
1195
- left: 0;
1196
- padding: var(--mba-space-xxs) var(--mba-space-xs);
1197
- background-color: var(--mba-color-brick);
1198
- color: var(--mba-color-white);
1199
- font-family: var(--mba-font-family-text);
1200
- font-size: var(--mba-font-size-xs);
1201
- font-weight: var(--mba-font-weight-semibold);
1202
- border-radius: 0 var(--mba-radius-xs) 0 0;
1203
- }
1204
- .mba-article-card__content {
1205
- display: flex;
1206
- flex-direction: column;
1207
- flex: 1;
1208
- padding: var(--mba-space-sm) var(--mba-space-sm) 0;
1209
- gap: var(--mba-space-xs);
1210
- }
1211
- .mba-article-card__title {
1212
- font-family: var(--mba-font-family-text);
1213
- font-size: var(--mba-font-size-sm);
1214
- font-weight: var(--mba-font-weight-bold);
1215
- color: var(--mba-color-primary-800);
1216
- margin: 0;
1217
- }
1218
- .mba-article-card__text {
1219
- font-family: var(--mba-font-family-text);
1220
- font-size: var(--mba-font-size-xs);
1221
- font-weight: var(--mba-font-weight-regular);
1222
- color: var(--mba-color-text);
1223
- line-height: var(--mba-leading-normal);
1224
- margin: 0;
1225
- }
1226
- .mba-article-card__footer {
1227
- display: flex;
1228
- justify-content: flex-end;
1229
- padding: 0 var(--mba-space-sm) var(--mba-space-sm);
1230
- margin-top: var(--mba-space-md);
1231
- }
1232
- .mba-article-card__link {
1233
- display: inline-flex;
1234
- align-items: center;
1235
- gap: var(--mba-space-xs);
1236
- font-family: var(--mba-font-family-text);
1237
- font-size: var(--mba-font-size-xs);
1238
- font-weight: var(--mba-font-weight-semibold);
1239
- color: var(--mba-color-primary-500);
1240
- text-decoration: none;
1241
- transition: color 0.2s ease;
1242
- }
1243
- .mba-article-card__link:hover {
1244
- color: var(--mba-color-primary-800);
1245
- }
1246
- .mba-article-card__link:hover .mba-article-card__link-text {
1247
- text-decoration: underline;
1248
- }
1249
- .mba-article-card__link .material-symbols-rounded {
1250
- font-size: 20px;
1251
- }
1252
- .mba-article-card-grid {
1253
- display: grid;
1254
- gap: var(--mba-space-md);
1255
- grid-template-columns: 1fr;
1256
- width: 100%;
1257
- }
1258
- @media (min-width: 600px) {
1259
- .mba-article-card-grid {
1260
- grid-template-columns: repeat(2, 1fr);
981
+ @layer components {
982
+ .mba-card {
983
+ display: flex;
984
+ flex-direction: column;
985
+ padding: var(--mba-space-md);
986
+ border-radius: var(--mba-radius-sm);
987
+ background-color: var(--mba-color-beige);
988
+ border: 2px solid transparent;
989
+ transition: border-color var(--mba-transition-base);
990
+ cursor: pointer;
1261
991
  }
1262
- }
1263
- @media (min-width: 900px) {
1264
- .mba-article-card-grid {
992
+ .mba-card:hover {
993
+ border-color: var(--mba-color-primary-500);
994
+ }
995
+ .mba-card--sm {
996
+ padding: var(--mba-space-sm);
997
+ }
998
+ .mba-card__header {
999
+ display: flex;
1000
+ justify-content: space-between;
1001
+ align-items: center;
1002
+ gap: var(--mba-space-sm);
1003
+ }
1004
+ .mba-card__content {
1005
+ flex: 1;
1006
+ }
1007
+ .mba-card__title {
1008
+ font-family: var(--mba-font-family-text);
1009
+ font-size: var(--mba-font-size-sm);
1010
+ font-weight: var(--mba-font-weight-bold);
1011
+ color: var(--mba-color-primary-800);
1012
+ margin: 0 0 var(--mba-space-xs);
1013
+ }
1014
+ .mba-card__text {
1015
+ font-family: var(--mba-font-family-text);
1016
+ font-size: var(--mba-font-size-xs);
1017
+ font-weight: var(--mba-font-weight-regular);
1018
+ color: var(--mba-color-text);
1019
+ line-height: var(--mba-leading-snug);
1020
+ margin: 0;
1021
+ }
1022
+ .mba-card__icon {
1023
+ flex-shrink: 0;
1024
+ color: var(--mba-color-primary-500);
1025
+ font-size: 24px;
1026
+ transition: transform var(--mba-transition-base);
1027
+ }
1028
+ .mba-card__icon svg {
1029
+ width: 24px;
1030
+ height: 24px;
1031
+ }
1032
+ .mba-card:hover .mba-card__icon {
1033
+ transform: translateX(4px);
1034
+ }
1035
+ .mba-card-grid {
1036
+ display: grid;
1037
+ gap: var(--mba-space-md);
1038
+ grid-template-columns: 1fr;
1039
+ width: 100%;
1040
+ }
1041
+ @media (min-width: 600px) {
1042
+ .mba-card-grid {
1043
+ grid-template-columns: repeat(2, 1fr);
1044
+ }
1045
+ }
1046
+ @media (min-width: 900px) {
1047
+ .mba-card-grid {
1048
+ grid-template-columns: repeat(3, 1fr);
1049
+ }
1050
+ }
1051
+ .mba-card--white {
1052
+ background-color: var(--mba-color-white);
1053
+ }
1054
+ .mba-card--static {
1055
+ cursor: default;
1056
+ }
1057
+ .mba-card--static:hover {
1058
+ border-color: transparent;
1059
+ }
1060
+ .mba-carousel-card {
1061
+ position: relative;
1062
+ display: flex;
1063
+ flex-direction: column;
1064
+ padding: var(--mba-space-md);
1065
+ background-color: var(--mba-color-white);
1066
+ border-radius: 24px 24px 8px 24px;
1067
+ width: 453px;
1068
+ height: 278px;
1069
+ box-sizing: border-box;
1070
+ }
1071
+ .mba-carousel-card::before {
1072
+ content: "";
1073
+ position: absolute;
1074
+ inset: 0;
1075
+ padding: 1px;
1076
+ background: var(--mba-gradient-sunset);
1077
+ border-radius: 24px 24px 8px 24px;
1078
+ mask: linear-gradient(#fff 0 0) content-box,
1079
+ linear-gradient(#fff 0 0);
1080
+ mask-composite: exclude;
1081
+ -webkit-mask-composite: xor;
1082
+ pointer-events: none;
1083
+ }
1084
+ .mba-carousel-card__title {
1085
+ font-family: var(--mba-font-family-text);
1086
+ font-size: var(--mba-font-size-sm);
1087
+ font-weight: var(--mba-font-weight-bold);
1088
+ color: var(--mba-color-primary-800);
1089
+ margin: 0;
1090
+ }
1091
+ .mba-carousel-card__quote {
1092
+ flex: 1;
1093
+ margin-top: var(--mba-space-sm);
1094
+ font-family: var(--mba-font-family-text);
1095
+ font-size: var(--mba-font-size-xs);
1096
+ font-weight: var(--mba-font-weight-regular);
1097
+ color: var(--mba-color-primary-800);
1098
+ }
1099
+ .mba-carousel-card__author {
1100
+ font-family: var(--mba-font-family-text);
1101
+ font-size: var(--mba-font-size-xxs);
1102
+ font-weight: var(--mba-font-weight-bold);
1103
+ color: var(--mba-color-primary-500);
1104
+ margin: 0;
1105
+ }
1106
+ @media (max-width: 767px) {
1107
+ .mba-carousel-card {
1108
+ width: 286px;
1109
+ height: 360px;
1110
+ }
1111
+ }
1112
+ .mba-stats-card {
1113
+ position: relative;
1114
+ padding: var(--mba-space-md);
1115
+ background-color: var(--mba-color-white);
1116
+ border-radius: var(--mba-radius-md);
1117
+ box-shadow: var(--mba-shadow-xs);
1118
+ transition: transform var(--mba-transition-slow), box-shadow var(--mba-transition-slow);
1119
+ }
1120
+ .mba-stats-card::before {
1121
+ content: "";
1122
+ position: absolute;
1123
+ inset: 0;
1124
+ padding: 1px;
1125
+ background: var(--mba-gradient-sunset);
1126
+ border-radius: var(--mba-radius-md);
1127
+ mask: linear-gradient(#fff 0 0) content-box,
1128
+ linear-gradient(#fff 0 0);
1129
+ mask-composite: exclude;
1130
+ -webkit-mask-composite: xor;
1131
+ pointer-events: none;
1132
+ }
1133
+ .mba-stats-card:hover {
1134
+ transform: translateY(-4px);
1135
+ box-shadow: var(--mba-shadow-sm);
1136
+ }
1137
+ .mba-stats-card__value {
1138
+ font-family: var(--mba-font-family-text);
1139
+ font-size: var(--mba-font-size-xxl);
1140
+ font-weight: var(--mba-font-weight-extrabold);
1141
+ color: var(--mba-color-primary-500);
1142
+ line-height: 1;
1143
+ margin: 0;
1144
+ }
1145
+ .mba-stats-card__title {
1146
+ font-family: var(--mba-font-family-text);
1147
+ font-size: var(--mba-font-size-xs);
1148
+ font-weight: var(--mba-font-weight-bold);
1149
+ margin-top: var(--mba-space-sm);
1150
+ margin-bottom: 0;
1151
+ color: var(--mba-color-text);
1152
+ }
1153
+ .mba-stats-card__description {
1154
+ font-family: var(--mba-font-family-text);
1155
+ font-size: var(--mba-font-size-xs);
1156
+ font-weight: var(--mba-font-weight-regular);
1157
+ color: var(--mba-color-text);
1158
+ margin: 0;
1159
+ }
1160
+ .mba-stats-grid {
1161
+ display: grid;
1265
1162
  grid-template-columns: repeat(3, 1fr);
1163
+ gap: var(--mba-space-lg);
1164
+ width: 100%;
1165
+ }
1166
+ @media (max-width: 900px) {
1167
+ .mba-stats-grid {
1168
+ grid-template-columns: repeat(2, 1fr);
1169
+ }
1170
+ }
1171
+ @media (max-width: 600px) {
1172
+ .mba-stats-grid {
1173
+ grid-template-columns: 1fr;
1174
+ }
1175
+ }
1176
+ .mba-article-card {
1177
+ display: flex;
1178
+ flex-direction: column;
1179
+ background-color: var(--mba-color-white);
1180
+ border-radius: var(--mba-radius-sm);
1181
+ overflow: hidden;
1182
+ box-shadow: var(--mba-shadow-xs);
1183
+ transition: box-shadow var(--mba-transition-base), transform var(--mba-transition-base);
1184
+ }
1185
+ .mba-article-card:hover {
1186
+ box-shadow: var(--mba-shadow-sm);
1187
+ transform: translateY(-2px);
1188
+ }
1189
+ .mba-article-card__image-wrapper {
1190
+ position: relative;
1191
+ }
1192
+ .mba-article-card__image {
1193
+ display: block;
1194
+ width: 100%;
1195
+ height: 152px;
1196
+ object-fit: cover;
1197
+ border-radius: var(--mba-radius-sm) var(--mba-radius-sm) 0 0;
1198
+ }
1199
+ .mba-article-card__tag {
1200
+ position: absolute;
1201
+ bottom: 0;
1202
+ left: 0;
1203
+ padding: var(--mba-space-xxs) var(--mba-space-xs);
1204
+ background-color: var(--mba-color-brick);
1205
+ color: var(--mba-color-white);
1206
+ font-family: var(--mba-font-family-text);
1207
+ font-size: var(--mba-font-size-xs);
1208
+ font-weight: var(--mba-font-weight-semibold);
1209
+ border-radius: 0 var(--mba-radius-xs) 0 0;
1210
+ }
1211
+ .mba-article-card__content {
1212
+ display: flex;
1213
+ flex-direction: column;
1214
+ flex: 1;
1215
+ padding: var(--mba-space-sm) var(--mba-space-sm) 0;
1216
+ gap: var(--mba-space-xs);
1217
+ }
1218
+ .mba-article-card__title {
1219
+ font-family: var(--mba-font-family-text);
1220
+ font-size: var(--mba-font-size-sm);
1221
+ font-weight: var(--mba-font-weight-bold);
1222
+ color: var(--mba-color-primary-800);
1223
+ margin: 0;
1224
+ }
1225
+ .mba-article-card__text {
1226
+ font-family: var(--mba-font-family-text);
1227
+ font-size: var(--mba-font-size-xs);
1228
+ font-weight: var(--mba-font-weight-regular);
1229
+ color: var(--mba-color-text);
1230
+ line-height: var(--mba-leading-normal);
1231
+ margin: 0;
1232
+ }
1233
+ .mba-article-card__footer {
1234
+ display: flex;
1235
+ justify-content: flex-end;
1236
+ padding: 0 var(--mba-space-sm) var(--mba-space-sm);
1237
+ margin-top: var(--mba-space-md);
1238
+ }
1239
+ .mba-article-card__link {
1240
+ display: inline-flex;
1241
+ align-items: center;
1242
+ gap: var(--mba-space-xs);
1243
+ font-family: var(--mba-font-family-text);
1244
+ font-size: var(--mba-font-size-xs);
1245
+ font-weight: var(--mba-font-weight-semibold);
1246
+ color: var(--mba-color-primary-500);
1247
+ text-decoration: none;
1248
+ transition: color var(--mba-transition-base);
1249
+ }
1250
+ .mba-article-card__link:hover {
1251
+ color: var(--mba-color-primary-800);
1252
+ }
1253
+ .mba-article-card__link:hover .mba-article-card__link-text {
1254
+ text-decoration: underline;
1255
+ }
1256
+ .mba-article-card__link .material-symbols-rounded {
1257
+ font-size: 20px;
1258
+ }
1259
+ .mba-article-card-grid {
1260
+ display: grid;
1261
+ gap: var(--mba-space-md);
1262
+ grid-template-columns: 1fr;
1263
+ width: 100%;
1264
+ }
1265
+ @media (min-width: 600px) {
1266
+ .mba-article-card-grid {
1267
+ grid-template-columns: repeat(2, 1fr);
1268
+ }
1269
+ }
1270
+ @media (min-width: 900px) {
1271
+ .mba-article-card-grid {
1272
+ grid-template-columns: repeat(3, 1fr);
1273
+ }
1266
1274
  }
1267
1275
  }
1268
- .mba-arrow {
1269
- display: inline-flex;
1270
- align-items: center;
1271
- justify-content: center;
1272
- padding: var(--mba-space-xxs);
1273
- border-radius: var(--mba-radius-xxl);
1274
- background-color: var(--mba-color-primary-500);
1275
- color: var(--mba-color-white);
1276
- border: none;
1277
- cursor: pointer;
1278
- transition: background-color 0.2s ease;
1279
- }
1280
- .mba-arrow:hover {
1281
- background-color: var(--mba-color-primary-800);
1282
- }
1283
- .mba-arrow:focus-visible {
1284
- outline: none;
1285
- box-shadow: var(--mba-focus-ring);
1286
- }
1287
- .mba-arrow:disabled,
1276
+ @layer components {
1277
+ .mba-arrow {
1278
+ display: inline-flex;
1279
+ align-items: center;
1280
+ justify-content: center;
1281
+ padding: var(--mba-space-xxs);
1282
+ border-radius: var(--mba-radius-xxl);
1283
+ background-color: var(--mba-color-primary-500);
1284
+ color: var(--mba-color-white);
1285
+ border: none;
1286
+ cursor: pointer;
1287
+ transition: background-color var(--mba-transition-base);
1288
+ }
1289
+ .mba-arrow:hover {
1290
+ background-color: var(--mba-color-primary-800);
1291
+ }
1292
+ .mba-arrow:focus-visible {
1293
+ outline: none;
1294
+ box-shadow: var(--mba-focus-ring);
1295
+ }
1296
+ .mba-arrow:disabled,
1288
1297
  .mba-arrow.is-disabled {
1289
- background-color: var(--mba-color-grey-300);
1290
- cursor: not-allowed;
1291
- }
1292
- .mba-arrow:disabled:hover,
1298
+ background-color: var(--mba-color-grey-300);
1299
+ cursor: not-allowed;
1300
+ }
1301
+ .mba-arrow:disabled:hover,
1293
1302
  .mba-arrow.is-disabled:hover {
1294
- background-color: var(--mba-color-grey-300);
1295
- }
1296
- .mba-arrow .material-symbols-rounded {
1297
- font-size: 24px;
1298
- }
1299
- .mba-radio {
1300
- position: relative;
1301
- display: inline-flex;
1302
- align-items: center;
1303
- justify-content: center;
1304
- width: 16px;
1305
- height: 16px;
1306
- cursor: pointer;
1307
- }
1308
- .mba-radio input {
1309
- position: absolute;
1310
- opacity: 0;
1311
- width: 100%;
1312
- height: 100%;
1313
- margin: 0;
1314
- cursor: pointer;
1315
- }
1316
- .mba-radio .mba-radio__control {
1317
- position: relative;
1318
- width: 16px;
1319
- height: 16px;
1320
- border-radius: 8px;
1321
- border: 1px solid var(--mba-color-primary-900);
1322
- background-color: var(--mba-color-white);
1323
- transition: all 0.2s ease;
1324
- }
1325
- .mba-radio .mba-radio__control::after {
1326
- content: "";
1327
- position: absolute;
1328
- top: 50%;
1329
- left: 50%;
1330
- transform: translate(-50%, -50%) scale(0);
1331
- width: 12px;
1332
- height: 12px;
1333
- border-radius: 50%;
1334
- background-color: var(--mba-color-primary-400);
1335
- transition: transform 0.2s ease;
1336
- }
1337
- .mba-radio:hover:not(:has(input:disabled)) .mba-radio__control::after {
1338
- transform: translate(-50%, -50%) scale(1);
1339
- width: 10px;
1340
- height: 10px;
1341
- }
1342
- .mba-radio input:checked + .mba-radio__control::after {
1343
- transform: translate(-50%, -50%) scale(1);
1344
- width: 12px;
1345
- height: 12px;
1346
- }
1347
- .mba-radio input:focus + .mba-radio__control {
1348
- box-shadow: var(--mba-focus-ring);
1349
- }
1350
- .mba-radio input:disabled + .mba-radio__control {
1351
- border-color: var(--mba-color-grey-300);
1352
- background-color: var(--mba-color-grey-50);
1353
- cursor: not-allowed;
1354
- }
1355
- .mba-radio input:disabled + .mba-radio__control::after {
1356
- background-color: var(--mba-color-grey-300);
1357
- }
1358
- .mba-radio:has(input:disabled) {
1359
- cursor: not-allowed;
1360
- }
1361
- .mba-radio--pro .mba-radio__control {
1362
- border-color: var(--mba-color-primary-pro-800);
1363
- }
1364
- .mba-radio--pro .mba-radio__control::after {
1365
- background-color: var(--mba-color-primary-pro-400);
1366
- }
1367
- .mba-checkbox {
1368
- position: relative;
1369
- display: inline-flex;
1370
- align-items: center;
1371
- justify-content: center;
1372
- width: 16px;
1373
- height: 16px;
1374
- cursor: pointer;
1375
- }
1376
- .mba-checkbox input {
1377
- position: absolute;
1378
- opacity: 0;
1379
- width: 100%;
1380
- height: 100%;
1381
- margin: 0;
1382
- cursor: pointer;
1383
- }
1384
- .mba-checkbox .mba-checkbox__control {
1385
- position: relative;
1386
- width: 16px;
1387
- height: 16px;
1388
- border-radius: var(--mba-radius-2xs);
1389
- border: 1px solid var(--mba-color-primary-900);
1390
- background-color: var(--mba-color-white);
1391
- transition: all 0.2s ease;
1303
+ background-color: var(--mba-color-grey-300);
1304
+ }
1305
+ .mba-arrow .material-symbols-rounded {
1306
+ font-size: 24px;
1307
+ }
1392
1308
  }
1393
- .mba-checkbox .mba-checkbox__control::after {
1394
- content: "";
1395
- position: absolute;
1396
- top: 50%;
1397
- left: 50%;
1398
- transform: translate(-50%, -50%) scale(0);
1399
- width: 12px;
1400
- height: 12px;
1401
- border-radius: 2px;
1402
- background-color: var(--mba-color-primary-400);
1403
- transition: transform 0.2s ease;
1404
- }
1405
- .mba-checkbox:hover:not(:has(input:disabled)) .mba-checkbox__control::after {
1406
- transform: translate(-50%, -50%) scale(1);
1407
- width: 10px;
1408
- height: 10px;
1409
- }
1410
- .mba-checkbox input:checked + .mba-checkbox__control::after {
1411
- transform: translate(-50%, -50%) scale(1);
1412
- width: 12px;
1413
- height: 12px;
1414
- }
1415
- .mba-checkbox input:focus + .mba-checkbox__control {
1416
- box-shadow: var(--mba-focus-ring);
1417
- }
1418
- .mba-checkbox input:disabled + .mba-checkbox__control {
1419
- border-color: var(--mba-color-grey-300);
1420
- background-color: var(--mba-color-grey-50);
1421
- cursor: not-allowed;
1422
- }
1423
- .mba-checkbox input:disabled + .mba-checkbox__control::after {
1424
- background-color: var(--mba-color-grey-300);
1425
- }
1426
- .mba-checkbox:has(input:disabled) {
1427
- cursor: not-allowed;
1428
- }
1429
- .mba-checkbox--pro .mba-checkbox__control {
1430
- border-color: var(--mba-color-primary-pro-800);
1431
- }
1432
- .mba-checkbox--pro .mba-checkbox__control::after {
1433
- background-color: var(--mba-color-primary-pro-400);
1434
- }
1435
- .mba-radio-label,
1309
+ @layer components {
1310
+ .mba-radio {
1311
+ position: relative;
1312
+ display: inline-flex;
1313
+ align-items: center;
1314
+ justify-content: center;
1315
+ width: 16px;
1316
+ height: 16px;
1317
+ cursor: pointer;
1318
+ }
1319
+ .mba-radio input {
1320
+ position: absolute;
1321
+ opacity: 0;
1322
+ width: 100%;
1323
+ height: 100%;
1324
+ margin: 0;
1325
+ cursor: pointer;
1326
+ }
1327
+ .mba-radio .mba-radio__control {
1328
+ position: relative;
1329
+ width: 16px;
1330
+ height: 16px;
1331
+ border-radius: 8px;
1332
+ border: 1px solid var(--mba-color-primary-900);
1333
+ background-color: var(--mba-color-white);
1334
+ transition: all var(--mba-transition-base);
1335
+ }
1336
+ .mba-radio .mba-radio__control::after {
1337
+ content: "";
1338
+ position: absolute;
1339
+ top: 50%;
1340
+ left: 50%;
1341
+ transform: translate(-50%, -50%) scale(0);
1342
+ width: 12px;
1343
+ height: 12px;
1344
+ border-radius: 50%;
1345
+ background-color: var(--mba-color-primary-400);
1346
+ transition: transform var(--mba-transition-base);
1347
+ }
1348
+ .mba-radio:hover:not(:has(input:disabled)) .mba-radio__control::after {
1349
+ transform: translate(-50%, -50%) scale(1);
1350
+ width: 10px;
1351
+ height: 10px;
1352
+ }
1353
+ .mba-radio input:checked + .mba-radio__control::after {
1354
+ transform: translate(-50%, -50%) scale(1);
1355
+ width: 12px;
1356
+ height: 12px;
1357
+ }
1358
+ .mba-radio input:focus + .mba-radio__control {
1359
+ box-shadow: var(--mba-focus-ring);
1360
+ }
1361
+ .mba-radio input:disabled + .mba-radio__control {
1362
+ border-color: var(--mba-color-grey-300);
1363
+ background-color: var(--mba-color-grey-50);
1364
+ cursor: not-allowed;
1365
+ }
1366
+ .mba-radio input:disabled + .mba-radio__control::after {
1367
+ background-color: var(--mba-color-grey-300);
1368
+ }
1369
+ .mba-radio:has(input:disabled) {
1370
+ cursor: not-allowed;
1371
+ }
1372
+ .mba-radio--pro .mba-radio__control {
1373
+ border-color: var(--mba-color-primary-pro-800);
1374
+ }
1375
+ .mba-radio--pro .mba-radio__control::after {
1376
+ background-color: var(--mba-color-primary-pro-400);
1377
+ }
1378
+ .mba-checkbox {
1379
+ position: relative;
1380
+ display: inline-flex;
1381
+ align-items: center;
1382
+ justify-content: center;
1383
+ width: 16px;
1384
+ height: 16px;
1385
+ cursor: pointer;
1386
+ }
1387
+ .mba-checkbox input {
1388
+ position: absolute;
1389
+ opacity: 0;
1390
+ width: 100%;
1391
+ height: 100%;
1392
+ margin: 0;
1393
+ cursor: pointer;
1394
+ }
1395
+ .mba-checkbox .mba-checkbox__control {
1396
+ position: relative;
1397
+ width: 16px;
1398
+ height: 16px;
1399
+ border-radius: var(--mba-radius-2xs);
1400
+ border: 1px solid var(--mba-color-primary-900);
1401
+ background-color: var(--mba-color-white);
1402
+ transition: all var(--mba-transition-base);
1403
+ }
1404
+ .mba-checkbox .mba-checkbox__control::after {
1405
+ content: "";
1406
+ position: absolute;
1407
+ top: 50%;
1408
+ left: 50%;
1409
+ transform: translate(-50%, -50%) scale(0);
1410
+ width: 12px;
1411
+ height: 12px;
1412
+ border-radius: 2px;
1413
+ background-color: var(--mba-color-primary-400);
1414
+ transition: transform var(--mba-transition-base);
1415
+ }
1416
+ .mba-checkbox:hover:not(:has(input:disabled)) .mba-checkbox__control::after {
1417
+ transform: translate(-50%, -50%) scale(1);
1418
+ width: 10px;
1419
+ height: 10px;
1420
+ }
1421
+ .mba-checkbox input:checked + .mba-checkbox__control::after {
1422
+ transform: translate(-50%, -50%) scale(1);
1423
+ width: 12px;
1424
+ height: 12px;
1425
+ }
1426
+ .mba-checkbox input:focus + .mba-checkbox__control {
1427
+ box-shadow: var(--mba-focus-ring);
1428
+ }
1429
+ .mba-checkbox input:disabled + .mba-checkbox__control {
1430
+ border-color: var(--mba-color-grey-300);
1431
+ background-color: var(--mba-color-grey-50);
1432
+ cursor: not-allowed;
1433
+ }
1434
+ .mba-checkbox input:disabled + .mba-checkbox__control::after {
1435
+ background-color: var(--mba-color-grey-300);
1436
+ }
1437
+ .mba-checkbox:has(input:disabled) {
1438
+ cursor: not-allowed;
1439
+ }
1440
+ .mba-checkbox--pro .mba-checkbox__control {
1441
+ border-color: var(--mba-color-primary-pro-800);
1442
+ }
1443
+ .mba-checkbox--pro .mba-checkbox__control::after {
1444
+ background-color: var(--mba-color-primary-pro-400);
1445
+ }
1446
+ .mba-radio-label,
1436
1447
  .mba-checkbox-label {
1437
- display: inline-flex;
1438
- align-items: center;
1439
- gap: var(--mba-space-xs);
1440
- cursor: pointer;
1441
- font-family: var(--mba-font-family-text);
1442
- font-size: var(--mba-font-size-xs);
1443
- color: var(--mba-color-black);
1444
- }
1445
- .mba-radio-label:has(input:disabled),
1448
+ display: inline-flex;
1449
+ align-items: center;
1450
+ gap: var(--mba-space-xs);
1451
+ cursor: pointer;
1452
+ font-family: var(--mba-font-family-text);
1453
+ font-size: var(--mba-font-size-xs);
1454
+ color: var(--mba-color-black);
1455
+ }
1456
+ .mba-radio-label:has(input:disabled),
1446
1457
  .mba-checkbox-label:has(input:disabled) {
1447
- cursor: not-allowed;
1448
- color: var(--mba-color-grey-400);
1449
- }
1450
- .mba-pagination {
1451
- display: inline-flex;
1452
- align-items: center;
1453
- gap: var(--mba-space-sm);
1454
- padding: 0;
1455
- margin: 0;
1456
- list-style: none;
1458
+ cursor: not-allowed;
1459
+ color: var(--mba-color-grey-400);
1460
+ }
1457
1461
  }
1458
- .mba-pagination-item {
1459
- display: inline-flex;
1460
- width: 32px;
1461
- height: 32px;
1462
- padding: 0;
1463
- justify-content: center;
1464
- align-items: center;
1465
- font-family: var(--mba-font-family-text);
1466
- font-size: var(--mba-font-size-xs);
1467
- font-weight: var(--mba-font-weight-semibold);
1468
- font-size: 18px;
1469
- line-height: var(--mba-leading-snug);
1470
- text-decoration: none;
1471
- border: none;
1472
- border-radius: var(--mba-radius-xs);
1473
- cursor: pointer;
1474
- transition: all 0.25s ease-in-out;
1475
- user-select: none;
1476
- background-color: var(--mba-color-white);
1477
- color: var(--mba-color-black);
1478
- }
1479
- .mba-pagination-item:hover:not(:disabled):not(.is-disabled):not(.is-active) {
1480
- background-color: var(--mba-color-grey-50);
1481
- color: var(--mba-color-black);
1482
- }
1483
- .mba-pagination-item:focus {
1484
- outline: none;
1485
- box-shadow: var(--mba-focus-ring);
1486
- }
1487
- .mba-pagination-item.is-active {
1488
- background-color: var(--mba-color-secondary-500);
1489
- border-radius: 50%;
1490
- color: var(--mba-color-black);
1491
- cursor: default;
1492
- }
1493
- .mba-pagination-item:disabled,
1462
+ @layer components {
1463
+ .mba-pagination {
1464
+ display: inline-flex;
1465
+ align-items: center;
1466
+ gap: var(--mba-space-sm);
1467
+ padding: 0;
1468
+ margin: 0;
1469
+ list-style: none;
1470
+ }
1471
+ .mba-pagination-item {
1472
+ display: inline-flex;
1473
+ width: 32px;
1474
+ height: 32px;
1475
+ padding: 0;
1476
+ justify-content: center;
1477
+ align-items: center;
1478
+ font-family: var(--mba-font-family-text);
1479
+ font-size: var(--mba-font-size-sm);
1480
+ font-weight: var(--mba-font-weight-semibold);
1481
+ line-height: var(--mba-leading-snug);
1482
+ text-decoration: none;
1483
+ border: none;
1484
+ border-radius: var(--mba-radius-xs);
1485
+ cursor: pointer;
1486
+ transition: all var(--mba-transition-base);
1487
+ user-select: none;
1488
+ background-color: var(--mba-color-white);
1489
+ color: var(--mba-color-black);
1490
+ }
1491
+ .mba-pagination-item:hover:not(:disabled):not(.is-disabled):not(.is-active) {
1492
+ background-color: var(--mba-color-grey-50);
1493
+ color: var(--mba-color-black);
1494
+ }
1495
+ .mba-pagination-item:focus {
1496
+ outline: none;
1497
+ box-shadow: var(--mba-focus-ring);
1498
+ }
1499
+ .mba-pagination-item.is-active {
1500
+ background-color: var(--mba-color-secondary-500);
1501
+ border-radius: 50%;
1502
+ color: var(--mba-color-black);
1503
+ cursor: default;
1504
+ }
1505
+ .mba-pagination-item:disabled,
1494
1506
  .mba-pagination-item.is-disabled {
1495
- background-color: var(--mba-color-white);
1496
- color: var(--mba-color-grey-300);
1497
- cursor: not-allowed;
1498
- pointer-events: none;
1499
- }
1500
- .mba-pagination-ellipsis {
1501
- display: inline-flex;
1502
- width: 32px;
1503
- height: 32px;
1504
- padding: 0;
1505
- justify-content: center;
1506
- align-items: center;
1507
- font-family: var(--mba-font-family-text);
1508
- font-size: var(--mba-font-size-xs);
1509
- font-weight: var(--mba-font-weight-semibold);
1510
- line-height: var(--mba-leading-snug);
1511
- color: var(--mba-color-grey-400);
1512
- user-select: none;
1513
- pointer-events: none;
1514
- }
1515
- .mba-pagination-arrow {
1516
- display: inline-flex;
1517
- width: 32px;
1518
- height: 32px;
1519
- padding: 0;
1520
- justify-content: center;
1521
- align-items: center;
1522
- border: none;
1523
- border-radius: var(--mba-radius-xs);
1524
- cursor: pointer;
1525
- transition: all 0.25s ease-in-out;
1526
- user-select: none;
1527
- background-color: var(--mba-color-white);
1528
- color: var(--mba-color-black);
1529
- }
1530
- .mba-pagination-arrow .mba-icon {
1531
- font-size: 20px;
1532
- width: 20px;
1533
- height: 20px;
1534
- }
1535
- .mba-pagination-arrow:hover:not(:disabled):not(.is-disabled) {
1536
- background-color: var(--mba-color-grey-50);
1537
- color: var(--mba-color-black);
1538
- }
1539
- .mba-pagination-arrow:focus {
1540
- outline: none;
1541
- box-shadow: var(--mba-focus-ring);
1542
- }
1543
- .mba-pagination-arrow:disabled,
1507
+ background-color: var(--mba-color-white);
1508
+ color: var(--mba-color-grey-300);
1509
+ cursor: not-allowed;
1510
+ pointer-events: none;
1511
+ }
1512
+ .mba-pagination-ellipsis {
1513
+ display: inline-flex;
1514
+ width: 32px;
1515
+ height: 32px;
1516
+ padding: 0;
1517
+ justify-content: center;
1518
+ align-items: center;
1519
+ font-family: var(--mba-font-family-text);
1520
+ font-size: var(--mba-font-size-xs);
1521
+ font-weight: var(--mba-font-weight-semibold);
1522
+ line-height: var(--mba-leading-snug);
1523
+ color: var(--mba-color-grey-400);
1524
+ user-select: none;
1525
+ pointer-events: none;
1526
+ }
1527
+ .mba-pagination-arrow {
1528
+ display: inline-flex;
1529
+ width: 32px;
1530
+ height: 32px;
1531
+ padding: 0;
1532
+ justify-content: center;
1533
+ align-items: center;
1534
+ border: none;
1535
+ border-radius: var(--mba-radius-xs);
1536
+ cursor: pointer;
1537
+ transition: all var(--mba-transition-base);
1538
+ user-select: none;
1539
+ background-color: var(--mba-color-white);
1540
+ color: var(--mba-color-black);
1541
+ }
1542
+ .mba-pagination-arrow .mba-icon {
1543
+ font-size: 20px;
1544
+ width: 20px;
1545
+ height: 20px;
1546
+ }
1547
+ .mba-pagination-arrow:hover:not(:disabled):not(.is-disabled) {
1548
+ background-color: var(--mba-color-grey-50);
1549
+ color: var(--mba-color-black);
1550
+ }
1551
+ .mba-pagination-arrow:focus {
1552
+ outline: none;
1553
+ box-shadow: var(--mba-focus-ring);
1554
+ }
1555
+ .mba-pagination-arrow:disabled,
1544
1556
  .mba-pagination-arrow.is-disabled {
1545
- background-color: var(--mba-color-white);
1546
- color: var(--mba-color-grey-300);
1547
- cursor: not-allowed;
1548
- pointer-events: none;
1549
- }
1550
- .mba-dots {
1551
- display: inline-flex;
1552
- align-items: center;
1553
- gap: var(--mba-space-xs);
1554
- padding: 0;
1555
- margin: 0;
1556
- list-style: none;
1557
- }
1558
- .mba-dot {
1559
- width: 40px;
1560
- height: 8px;
1561
- border-radius: var(--mba-radius-full);
1562
- background-color: var(--mba-color-grey-300);
1563
- border: none;
1564
- padding: 0;
1565
- cursor: pointer;
1566
- transition: background-color 0.25s ease-in-out;
1567
- }
1568
- .mba-dot:hover:not(.is-active) {
1569
- background-color: var(--mba-color-grey-400);
1570
- }
1571
- .mba-dot:focus-visible {
1572
- outline: none;
1573
- box-shadow: var(--mba-focus-ring);
1574
- }
1575
- .mba-dot.is-active {
1576
- background-color: var(--mba-color-primary-500);
1577
- cursor: default;
1578
- }
1579
- .mba-label {
1580
- display: flex;
1581
- align-items: center;
1582
- gap: var(--mba-space-xxs);
1583
- font-family: var(--mba-font-family-text);
1584
- font-size: var(--mba-font-size-xxs);
1585
- font-weight: var(--mba-font-weight-regular);
1586
- line-height: normal;
1587
- color: var(--mba-color-grey-800);
1588
- }
1589
- .mba-label__required {
1590
- color: var(--mba-color-error-500);
1591
- font-size: var(--mba-font-size-xxs);
1592
- }
1593
- .mba-label__icon {
1594
- font-size: 16px;
1595
- color: var(--mba-color-grey-400);
1596
- }
1597
- .mba-textarea {
1598
- display: block;
1599
- width: 100%;
1600
- padding: var(--mba-space-xs);
1601
- border-radius: var(--mba-radius-xs);
1602
- border: 1px solid var(--mba-color-grey-100);
1603
- background-color: var(--mba-color-white);
1604
- font-family: var(--mba-font-family-text);
1605
- font-size: var(--mba-font-size-xxs);
1606
- font-weight: var(--mba-font-weight-regular);
1607
- color: var(--mba-color-black);
1608
- resize: vertical;
1609
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
1610
- }
1611
- .mba-textarea::placeholder {
1612
- color: var(--mba-color-grey-400);
1613
- }
1614
- .mba-textarea:focus {
1615
- outline: none;
1616
- border-color: var(--mba-color-info-400);
1617
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1618
- }
1619
- .mba-textarea:focus::placeholder {
1620
- color: var(--mba-color-black);
1621
- }
1622
- .mba-textarea:disabled {
1623
- background-color: var(--mba-color-grey-50);
1624
- border-color: var(--mba-color-grey-100);
1625
- cursor: not-allowed;
1626
- }
1627
- .mba-textarea:disabled::placeholder {
1628
- color: var(--mba-color-grey-400);
1629
- }
1630
- .mba-textarea:hover:not(:focus):not(:disabled):not(.mba-textarea--error):not(.mba-textarea--valid) {
1631
- border-color: var(--mba-color-info-400);
1632
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1633
- }
1634
- .mba-textarea--error {
1635
- border-color: var(--mba-color-error-500);
1636
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1637
- }
1638
- .mba-textarea--error:focus {
1639
- border-color: var(--mba-color-error-500);
1640
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1641
- }
1642
- .mba-textarea--valid {
1643
- border-color: var(--mba-color-success-500);
1644
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
1645
- }
1646
- .mba-textarea--valid:focus {
1647
- border-color: var(--mba-color-success-500);
1648
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
1649
- }
1650
- .mba-input {
1651
- display: block;
1652
- width: 100%;
1653
- padding: var(--mba-space-xs) var(--mba-space-sm);
1654
- border-radius: var(--mba-radius-xs);
1655
- border: 1px solid var(--mba-color-grey-100);
1656
- background-color: var(--mba-color-white);
1657
- font-family: var(--mba-font-family-text);
1658
- font-size: var(--mba-font-size-xxs);
1659
- font-weight: var(--mba-font-weight-regular);
1660
- color: var(--mba-color-black);
1661
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
1662
- }
1663
- .mba-input::placeholder {
1664
- color: var(--mba-color-grey-400);
1665
- }
1666
- .mba-input:hover:not(:focus):not(:disabled):not(.mba-input--error):not(.mba-input--valid) {
1667
- border-color: var(--mba-color-info-400);
1668
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1669
- }
1670
- .mba-input:focus {
1671
- outline: none;
1672
- border-color: var(--mba-color-info-400);
1673
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1674
- }
1675
- .mba-input:disabled {
1676
- background-color: var(--mba-color-grey-50);
1677
- border-color: var(--mba-color-grey-100);
1678
- cursor: not-allowed;
1679
- }
1680
- .mba-input:disabled::placeholder {
1681
- color: var(--mba-color-grey-400);
1682
- }
1683
- .mba-input--error {
1684
- border-color: var(--mba-color-error-500);
1685
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1686
- }
1687
- .mba-input--error:focus {
1688
- border-color: var(--mba-color-error-500);
1689
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1690
- }
1691
- .mba-input--valid {
1692
- border-color: var(--mba-color-success-500);
1693
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
1694
- }
1695
- .mba-input--valid:focus {
1696
- border-color: var(--mba-color-success-500);
1697
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
1698
- }
1699
- .mba-feedback {
1700
- font-family: var(--mba-font-family-text);
1701
- font-size: 12px;
1702
- font-weight: var(--mba-font-weight-regular);
1703
- }
1704
- .mba-feedback--error {
1705
- color: var(--mba-color-error-500);
1706
- }
1707
- .mba-feedback--valid {
1708
- color: var(--mba-color-success-500);
1709
- }
1710
- .mba-dropdown {
1711
- position: relative;
1712
- display: inline-block;
1713
- width: 100%;
1714
- }
1715
- .mba-dropdown__trigger {
1716
- display: flex;
1717
- align-items: center;
1718
- justify-content: space-between;
1719
- width: 100%;
1720
- padding: var(--mba-space-xs) var(--mba-space-sm);
1721
- border-radius: var(--mba-radius-xs);
1722
- border: 1px solid var(--mba-color-grey-100);
1723
- background-color: var(--mba-color-white);
1724
- font-family: var(--mba-font-family-text);
1725
- font-size: var(--mba-font-size-xs);
1726
- font-weight: var(--mba-font-weight-regular);
1727
- color: var(--mba-color-black);
1728
- cursor: pointer;
1729
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
1730
- }
1731
- .mba-dropdown__trigger--placeholder {
1732
- color: var(--mba-color-grey-400);
1733
- }
1734
- .mba-dropdown:not(.mba-dropdown--error):not(.mba-dropdown--valid) .mba-dropdown__trigger:hover {
1735
- border-color: var(--mba-color-info-400);
1736
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1737
- }
1738
- .mba-dropdown__trigger:focus {
1739
- outline: none;
1740
- border-color: var(--mba-color-info-400);
1741
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1742
- }
1743
- .mba-dropdown__trigger:disabled {
1744
- background-color: var(--mba-color-grey-50);
1745
- border-color: var(--mba-color-grey-100);
1746
- cursor: not-allowed;
1747
- color: var(--mba-color-grey-400);
1748
- }
1749
- .mba-dropdown__chevron {
1750
- font-size: 20px;
1751
- color: var(--mba-color-grey-400);
1752
- transition: transform 0.2s ease;
1753
- }
1754
- .mba-dropdown--open .mba-dropdown__chevron {
1755
- transform: rotate(180deg);
1756
- }
1757
- .mba-dropdown--error .mba-dropdown__trigger {
1758
- border-color: var(--mba-color-error-500);
1759
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1760
- }
1761
- .mba-dropdown--error .mba-dropdown__trigger:focus {
1762
- border-color: var(--mba-color-error-500);
1763
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1764
- }
1765
- .mba-dropdown--valid .mba-dropdown__trigger {
1766
- border-color: var(--mba-color-success-500);
1767
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
1768
- }
1769
- .mba-dropdown--valid .mba-dropdown__trigger:focus {
1770
- border-color: var(--mba-color-success-500);
1771
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
1772
- }
1773
- .mba-dropdown__panel {
1774
- position: absolute;
1775
- top: calc(100% + 4px);
1776
- left: 0;
1777
- right: 0;
1778
- display: none;
1779
- flex-direction: column;
1780
- gap: 10px;
1781
- padding: var(--mba-space-xs);
1782
- border-radius: var(--mba-radius-2xs);
1783
- background-color: var(--mba-color-white);
1784
- box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04), 1px 2px 16px 0 rgba(28, 28, 29, 0.06);
1785
- max-height: 200px;
1786
- overflow-y: auto;
1787
- z-index: 10;
1788
- }
1789
- .mba-dropdown--open .mba-dropdown__panel {
1790
- display: flex;
1791
- }
1792
- .mba-dropdown__panel::-webkit-scrollbar {
1793
- width: 6px;
1794
- }
1795
- .mba-dropdown__panel::-webkit-scrollbar-track {
1796
- background: transparent;
1797
- }
1798
- .mba-dropdown__panel::-webkit-scrollbar-thumb {
1799
- background-color: var(--mba-color-primary-pro-800);
1800
- border-radius: 3px;
1801
- }
1802
- .mba-dropdown__option {
1803
- padding: var(--mba-space-xs);
1804
- border-radius: var(--mba-radius-xs);
1805
- font-family: var(--mba-font-family-text);
1806
- font-size: var(--mba-font-size-xs);
1807
- font-weight: var(--mba-font-weight-regular);
1808
- color: var(--mba-color-black);
1809
- cursor: pointer;
1810
- transition: background-color 0.15s ease;
1811
- }
1812
- .mba-dropdown__option:hover {
1813
- background-color: var(--mba-color-grey-50);
1814
- }
1815
- .mba-dropdown__option--selected {
1816
- border: 1px solid var(--mba-color-primary-400);
1817
- background-color: var(--mba-color-white);
1818
- }
1819
- .mba-dropdown--pro .mba-dropdown__option--selected {
1820
- border-color: var(--mba-color-primary-pro-400);
1821
- }
1822
- .mba-toggle {
1823
- position: relative;
1824
- display: inline-block;
1825
- width: 42px;
1826
- height: 24px;
1827
- }
1828
- .mba-toggle input {
1829
- opacity: 0;
1830
- width: 0;
1831
- height: 0;
1832
- }
1833
- .mba-toggle__slider {
1834
- position: absolute;
1835
- cursor: pointer;
1836
- top: 0;
1837
- left: 0;
1838
- right: 0;
1839
- bottom: 0;
1840
- background-color: var(--mba-color-grey-300);
1841
- transition: all 0.3s ease;
1842
- border-radius: 32px;
1843
- }
1844
- .mba-toggle__slider::before {
1845
- position: absolute;
1846
- content: "";
1847
- height: 20px;
1848
- width: 20px;
1849
- left: 2px;
1850
- top: 2px;
1851
- background-color: var(--mba-color-white);
1852
- transition: all 0.3s ease;
1853
- border-radius: 50%;
1854
- }
1855
- .mba-toggle input:checked + .mba-toggle__slider {
1856
- background-color: var(--mba-color-secondary-500);
1857
- }
1858
- .mba-toggle input:checked + .mba-toggle__slider::before {
1859
- transform: translateX(18px);
1860
- }
1861
- .mba-toggle input:focus + .mba-toggle__slider {
1862
- box-shadow: var(--mba-focus-ring);
1863
- }
1864
- .mba-toggle input:disabled + .mba-toggle__slider {
1865
- opacity: 0.5;
1866
- cursor: not-allowed;
1867
- }
1868
- .mba-input-icon {
1869
- display: flex;
1870
- align-items: center;
1871
- width: 100%;
1872
- padding: var(--mba-space-xs) var(--mba-space-sm);
1873
- border-radius: var(--mba-radius-xs);
1874
- border: 1px solid var(--mba-color-grey-100);
1875
- background-color: var(--mba-color-white);
1876
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
1877
- }
1878
- .mba-input-icon input {
1879
- flex: 1;
1880
- border: none;
1881
- background: transparent;
1882
- font-family: var(--mba-font-family-text);
1883
- font-size: var(--mba-font-size-xxs);
1884
- font-weight: var(--mba-font-weight-regular);
1885
- color: var(--mba-color-black);
1886
- outline: none;
1887
- }
1888
- .mba-input-icon input::placeholder {
1889
- color: var(--mba-color-grey-400);
1890
- }
1891
- .mba-input-icon__icon {
1892
- font-size: 16px;
1893
- color: var(--mba-color-grey-400);
1894
- margin-left: var(--mba-space-xs);
1895
- }
1896
- button.mba-input-icon__icon {
1897
- background: none;
1898
- border: none;
1899
- padding: 0;
1900
- cursor: pointer;
1901
- transition: color 0.2s ease;
1902
- }
1903
- button.mba-input-icon__icon:hover {
1904
- color: var(--mba-color-primary-500);
1905
- }
1906
- .mba-input-icon:hover:not(:focus-within):not(.mba-input-icon--disabled):not(.mba-input-icon--error) {
1907
- border-color: var(--mba-color-info-400);
1908
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1909
- }
1910
- .mba-input-icon:focus-within {
1911
- border-color: var(--mba-color-info-400);
1912
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1913
- }
1914
- .mba-input-icon--disabled {
1915
- background-color: var(--mba-color-grey-50);
1916
- cursor: not-allowed;
1917
- }
1918
- .mba-input-icon--disabled input {
1919
- cursor: not-allowed;
1920
- color: var(--mba-color-grey-400);
1921
- }
1922
- .mba-input-icon--error {
1923
- border-color: var(--mba-color-error-500);
1924
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1925
- }
1926
- .mba-input-icon--error:focus-within {
1927
- border-color: var(--mba-color-error-500);
1928
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1557
+ background-color: var(--mba-color-white);
1558
+ color: var(--mba-color-grey-300);
1559
+ cursor: not-allowed;
1560
+ pointer-events: none;
1561
+ }
1562
+ .mba-dots {
1563
+ display: inline-flex;
1564
+ align-items: center;
1565
+ gap: var(--mba-space-xs);
1566
+ padding: 0;
1567
+ margin: 0;
1568
+ list-style: none;
1569
+ }
1570
+ .mba-dot {
1571
+ width: 40px;
1572
+ height: 8px;
1573
+ border-radius: var(--mba-radius-full);
1574
+ background-color: var(--mba-color-grey-300);
1575
+ border: none;
1576
+ padding: 0;
1577
+ cursor: pointer;
1578
+ transition: background-color var(--mba-transition-base);
1579
+ }
1580
+ .mba-dot:hover:not(.is-active) {
1581
+ background-color: var(--mba-color-grey-400);
1582
+ }
1583
+ .mba-dot:focus-visible {
1584
+ outline: none;
1585
+ box-shadow: var(--mba-focus-ring);
1586
+ }
1587
+ .mba-dot.is-active {
1588
+ background-color: var(--mba-color-primary-500);
1589
+ cursor: default;
1590
+ }
1929
1591
  }
1930
- .mba-input-icon--error .mba-input-icon__icon {
1931
- color: var(--mba-color-error-500);
1592
+ @layer components {
1593
+ .mba-label {
1594
+ display: flex;
1595
+ align-items: center;
1596
+ gap: var(--mba-space-xxs);
1597
+ font-family: var(--mba-font-family-text);
1598
+ font-size: var(--mba-font-size-xxs);
1599
+ font-weight: var(--mba-font-weight-regular);
1600
+ line-height: normal;
1601
+ color: var(--mba-color-grey-800);
1602
+ }
1603
+ .mba-label__required {
1604
+ color: var(--mba-color-error-500);
1605
+ font-size: var(--mba-font-size-xxs);
1606
+ }
1607
+ .mba-label__icon {
1608
+ font-size: 16px;
1609
+ color: var(--mba-color-grey-400);
1610
+ }
1611
+ .mba-textarea {
1612
+ display: block;
1613
+ width: 100%;
1614
+ padding: var(--mba-space-xs);
1615
+ border-radius: var(--mba-radius-xs);
1616
+ border: 1px solid var(--mba-color-grey-100);
1617
+ background-color: var(--mba-color-white);
1618
+ font-family: var(--mba-font-family-text);
1619
+ font-size: var(--mba-font-size-xxs);
1620
+ font-weight: var(--mba-font-weight-regular);
1621
+ color: var(--mba-color-black);
1622
+ resize: vertical;
1623
+ transition: border-color var(--mba-transition-base), box-shadow var(--mba-transition-base);
1624
+ }
1625
+ .mba-textarea::placeholder {
1626
+ color: var(--mba-color-grey-400);
1627
+ }
1628
+ .mba-textarea:focus {
1629
+ outline: none;
1630
+ border-color: var(--mba-color-info-400);
1631
+ box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1632
+ }
1633
+ .mba-textarea:focus::placeholder {
1634
+ color: var(--mba-color-black);
1635
+ }
1636
+ .mba-textarea:disabled {
1637
+ background-color: var(--mba-color-grey-50);
1638
+ border-color: var(--mba-color-grey-100);
1639
+ cursor: not-allowed;
1640
+ }
1641
+ .mba-textarea:disabled::placeholder {
1642
+ color: var(--mba-color-grey-400);
1643
+ }
1644
+ .mba-textarea:hover:not(:focus):not(:disabled):not(.mba-textarea--error):not(.mba-textarea--valid) {
1645
+ border-color: var(--mba-color-info-400);
1646
+ box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1647
+ }
1648
+ .mba-textarea--error {
1649
+ border-color: var(--mba-color-error-500);
1650
+ box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1651
+ }
1652
+ .mba-textarea--error:focus {
1653
+ border-color: var(--mba-color-error-500);
1654
+ box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1655
+ }
1656
+ .mba-textarea--valid {
1657
+ border-color: var(--mba-color-success-500);
1658
+ box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
1659
+ }
1660
+ .mba-textarea--valid:focus {
1661
+ border-color: var(--mba-color-success-500);
1662
+ box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
1663
+ }
1664
+ .mba-input {
1665
+ display: block;
1666
+ width: 100%;
1667
+ padding: var(--mba-space-xs) var(--mba-space-sm);
1668
+ border-radius: var(--mba-radius-xs);
1669
+ border: 1px solid var(--mba-color-grey-100);
1670
+ background-color: var(--mba-color-white);
1671
+ font-family: var(--mba-font-family-text);
1672
+ font-size: var(--mba-font-size-xxs);
1673
+ font-weight: var(--mba-font-weight-regular);
1674
+ color: var(--mba-color-black);
1675
+ transition: border-color var(--mba-transition-base), box-shadow var(--mba-transition-base);
1676
+ }
1677
+ .mba-input::placeholder {
1678
+ color: var(--mba-color-grey-400);
1679
+ }
1680
+ .mba-input:hover:not(:focus):not(:disabled):not(.mba-input--error):not(.mba-input--valid) {
1681
+ border-color: var(--mba-color-info-400);
1682
+ box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1683
+ }
1684
+ .mba-input:focus {
1685
+ outline: none;
1686
+ border-color: var(--mba-color-info-400);
1687
+ box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1688
+ }
1689
+ .mba-input:disabled {
1690
+ background-color: var(--mba-color-grey-50);
1691
+ border-color: var(--mba-color-grey-100);
1692
+ cursor: not-allowed;
1693
+ }
1694
+ .mba-input:disabled::placeholder {
1695
+ color: var(--mba-color-grey-400);
1696
+ }
1697
+ .mba-input--error {
1698
+ border-color: var(--mba-color-error-500);
1699
+ box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1700
+ }
1701
+ .mba-input--error:focus {
1702
+ border-color: var(--mba-color-error-500);
1703
+ box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1704
+ }
1705
+ .mba-input--valid {
1706
+ border-color: var(--mba-color-success-500);
1707
+ box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
1708
+ }
1709
+ .mba-input--valid:focus {
1710
+ border-color: var(--mba-color-success-500);
1711
+ box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
1712
+ }
1713
+ .mba-feedback {
1714
+ font-family: var(--mba-font-family-text);
1715
+ font-size: var(--mba-font-size-xxxs);
1716
+ font-weight: var(--mba-font-weight-regular);
1717
+ }
1718
+ .mba-feedback--error {
1719
+ color: var(--mba-color-error-500);
1720
+ }
1721
+ .mba-feedback--valid {
1722
+ color: var(--mba-color-success-500);
1723
+ }
1724
+ .mba-dropdown {
1725
+ position: relative;
1726
+ display: inline-block;
1727
+ width: 100%;
1728
+ }
1729
+ .mba-dropdown__trigger {
1730
+ display: flex;
1731
+ align-items: center;
1732
+ justify-content: space-between;
1733
+ width: 100%;
1734
+ padding: var(--mba-space-xs) var(--mba-space-sm);
1735
+ border-radius: var(--mba-radius-xs);
1736
+ border: 1px solid var(--mba-color-grey-100);
1737
+ background-color: var(--mba-color-white);
1738
+ font-family: var(--mba-font-family-text);
1739
+ font-size: var(--mba-font-size-xs);
1740
+ font-weight: var(--mba-font-weight-regular);
1741
+ color: var(--mba-color-black);
1742
+ cursor: pointer;
1743
+ transition: border-color var(--mba-transition-base), box-shadow var(--mba-transition-base);
1744
+ }
1745
+ .mba-dropdown__trigger--placeholder {
1746
+ color: var(--mba-color-grey-400);
1747
+ }
1748
+ .mba-dropdown:not(.mba-dropdown--error):not(.mba-dropdown--valid) .mba-dropdown__trigger:hover {
1749
+ border-color: var(--mba-color-info-400);
1750
+ box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1751
+ }
1752
+ .mba-dropdown__trigger:focus {
1753
+ outline: none;
1754
+ border-color: var(--mba-color-info-400);
1755
+ box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1756
+ }
1757
+ .mba-dropdown__trigger:disabled {
1758
+ background-color: var(--mba-color-grey-50);
1759
+ border-color: var(--mba-color-grey-100);
1760
+ cursor: not-allowed;
1761
+ color: var(--mba-color-grey-400);
1762
+ }
1763
+ .mba-dropdown__chevron {
1764
+ font-size: 20px;
1765
+ color: var(--mba-color-grey-400);
1766
+ transition: transform var(--mba-transition-base);
1767
+ }
1768
+ .mba-dropdown--open .mba-dropdown__chevron {
1769
+ transform: rotate(180deg);
1770
+ }
1771
+ .mba-dropdown--error .mba-dropdown__trigger {
1772
+ border-color: var(--mba-color-error-500);
1773
+ box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1774
+ }
1775
+ .mba-dropdown--error .mba-dropdown__trigger:focus {
1776
+ border-color: var(--mba-color-error-500);
1777
+ box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1778
+ }
1779
+ .mba-dropdown--valid .mba-dropdown__trigger {
1780
+ border-color: var(--mba-color-success-500);
1781
+ box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
1782
+ }
1783
+ .mba-dropdown--valid .mba-dropdown__trigger:focus {
1784
+ border-color: var(--mba-color-success-500);
1785
+ box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
1786
+ }
1787
+ .mba-dropdown__panel {
1788
+ position: absolute;
1789
+ top: calc(100% + 4px);
1790
+ left: 0;
1791
+ right: 0;
1792
+ display: none;
1793
+ flex-direction: column;
1794
+ gap: 10px;
1795
+ padding: var(--mba-space-xs);
1796
+ border-radius: var(--mba-radius-2xs);
1797
+ background-color: var(--mba-color-white);
1798
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04), 1px 2px 16px 0 rgba(28, 28, 29, 0.06);
1799
+ max-height: 200px;
1800
+ overflow-y: auto;
1801
+ z-index: 10;
1802
+ }
1803
+ .mba-dropdown--open .mba-dropdown__panel {
1804
+ display: flex;
1805
+ }
1806
+ .mba-dropdown__panel::-webkit-scrollbar {
1807
+ width: 6px;
1808
+ }
1809
+ .mba-dropdown__panel::-webkit-scrollbar-track {
1810
+ background: transparent;
1811
+ }
1812
+ .mba-dropdown__panel::-webkit-scrollbar-thumb {
1813
+ background-color: var(--mba-color-primary-pro-800);
1814
+ border-radius: 3px;
1815
+ }
1816
+ .mba-dropdown__option {
1817
+ padding: var(--mba-space-xs);
1818
+ border-radius: var(--mba-radius-xs);
1819
+ font-family: var(--mba-font-family-text);
1820
+ font-size: var(--mba-font-size-xs);
1821
+ font-weight: var(--mba-font-weight-regular);
1822
+ color: var(--mba-color-black);
1823
+ cursor: pointer;
1824
+ transition: background-color var(--mba-transition-fast);
1825
+ }
1826
+ .mba-dropdown__option:hover {
1827
+ background-color: var(--mba-color-grey-50);
1828
+ }
1829
+ .mba-dropdown__option--selected {
1830
+ border: 1px solid var(--mba-color-primary-400);
1831
+ background-color: var(--mba-color-white);
1832
+ }
1833
+ .mba-dropdown--pro .mba-dropdown__option--selected {
1834
+ border-color: var(--mba-color-primary-pro-400);
1835
+ }
1836
+ .mba-toggle {
1837
+ position: relative;
1838
+ display: inline-block;
1839
+ width: 42px;
1840
+ height: 24px;
1841
+ }
1842
+ .mba-toggle input {
1843
+ opacity: 0;
1844
+ width: 0;
1845
+ height: 0;
1846
+ }
1847
+ .mba-toggle__slider {
1848
+ position: absolute;
1849
+ cursor: pointer;
1850
+ top: 0;
1851
+ left: 0;
1852
+ right: 0;
1853
+ bottom: 0;
1854
+ background-color: var(--mba-color-grey-300);
1855
+ transition: all var(--mba-transition-slow);
1856
+ border-radius: 32px;
1857
+ }
1858
+ .mba-toggle__slider::before {
1859
+ position: absolute;
1860
+ content: "";
1861
+ height: 20px;
1862
+ width: 20px;
1863
+ left: 2px;
1864
+ top: 2px;
1865
+ background-color: var(--mba-color-white);
1866
+ transition: all var(--mba-transition-slow);
1867
+ border-radius: 50%;
1868
+ }
1869
+ .mba-toggle input:checked + .mba-toggle__slider {
1870
+ background-color: var(--mba-color-secondary-500);
1871
+ }
1872
+ .mba-toggle input:checked + .mba-toggle__slider::before {
1873
+ transform: translateX(18px);
1874
+ }
1875
+ .mba-toggle input:focus + .mba-toggle__slider {
1876
+ box-shadow: var(--mba-focus-ring);
1877
+ }
1878
+ .mba-toggle input:disabled + .mba-toggle__slider {
1879
+ opacity: 0.5;
1880
+ cursor: not-allowed;
1881
+ }
1882
+ .mba-input-icon {
1883
+ display: flex;
1884
+ align-items: center;
1885
+ width: 100%;
1886
+ padding: var(--mba-space-xs) var(--mba-space-sm);
1887
+ border-radius: var(--mba-radius-xs);
1888
+ border: 1px solid var(--mba-color-grey-100);
1889
+ background-color: var(--mba-color-white);
1890
+ transition: border-color var(--mba-transition-base), box-shadow var(--mba-transition-base);
1891
+ }
1892
+ .mba-input-icon input {
1893
+ flex: 1;
1894
+ border: none;
1895
+ background: transparent;
1896
+ font-family: var(--mba-font-family-text);
1897
+ font-size: var(--mba-font-size-xxs);
1898
+ font-weight: var(--mba-font-weight-regular);
1899
+ color: var(--mba-color-black);
1900
+ outline: none;
1901
+ }
1902
+ .mba-input-icon input::placeholder {
1903
+ color: var(--mba-color-grey-400);
1904
+ }
1905
+ .mba-input-icon__icon {
1906
+ font-size: 16px;
1907
+ color: var(--mba-color-grey-400);
1908
+ margin-left: var(--mba-space-xs);
1909
+ }
1910
+ button.mba-input-icon__icon {
1911
+ background: none;
1912
+ border: none;
1913
+ padding: 0;
1914
+ cursor: pointer;
1915
+ transition: color var(--mba-transition-base);
1916
+ }
1917
+ button.mba-input-icon__icon:hover {
1918
+ color: var(--mba-color-primary-500);
1919
+ }
1920
+ .mba-input-icon:hover:not(:focus-within):not(.mba-input-icon--disabled):not(.mba-input-icon--error) {
1921
+ border-color: var(--mba-color-info-400);
1922
+ box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1923
+ }
1924
+ .mba-input-icon:focus-within {
1925
+ border-color: var(--mba-color-info-400);
1926
+ box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1927
+ }
1928
+ .mba-input-icon--disabled {
1929
+ background-color: var(--mba-color-grey-50);
1930
+ cursor: not-allowed;
1931
+ }
1932
+ .mba-input-icon--disabled input {
1933
+ cursor: not-allowed;
1934
+ color: var(--mba-color-grey-400);
1935
+ }
1936
+ .mba-input-icon--error {
1937
+ border-color: var(--mba-color-error-500);
1938
+ box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1939
+ }
1940
+ .mba-input-icon--error:focus-within {
1941
+ border-color: var(--mba-color-error-500);
1942
+ box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1943
+ }
1944
+ .mba-input-icon--error .mba-input-icon__icon {
1945
+ color: var(--mba-color-error-500);
1946
+ }
1947
+ .mba-input-group {
1948
+ display: flex;
1949
+ align-items: stretch;
1950
+ gap: var(--mba-space-xxs);
1951
+ }
1952
+ .mba-input-group > .mba-input,
1953
+ .mba-input-group > .mba-input-icon {
1954
+ flex: 1;
1955
+ }
1956
+ .mba-form-group {
1957
+ display: flex;
1958
+ flex-direction: column;
1959
+ gap: var(--mba-space-xxs);
1960
+ }
1932
1961
  }
1933
- .mba-input-group {
1934
- display: flex;
1935
- align-items: stretch;
1936
- gap: var(--mba-space-xxs);
1962
+ @layer components {
1963
+ .mba-wave {
1964
+ display: block;
1965
+ width: 100%;
1966
+ height: var(--mba-wave-height);
1967
+ background-color: var(--mba-color-pastel-lavender);
1968
+ -webkit-mask-image: var(--mba-wave-dip-up-mask);
1969
+ -webkit-mask-size: 100% 100%;
1970
+ -webkit-mask-repeat: no-repeat;
1971
+ mask-image: var(--mba-wave-dip-up-mask);
1972
+ mask-size: 100% 100%;
1973
+ mask-repeat: no-repeat;
1974
+ }
1975
+ .mba-wave--top {
1976
+ -webkit-mask-image: var(--mba-wave-dip-down-mask);
1977
+ mask-image: var(--mba-wave-dip-down-mask);
1978
+ }
1979
+ .mba-wave--bottom {
1980
+ -webkit-mask-image: var(--mba-wave-dip-up-mask);
1981
+ mask-image: var(--mba-wave-dip-up-mask);
1982
+ }
1983
+ .mba-wave--sm {
1984
+ height: var(--mba-wave-sm-height);
1985
+ -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
1986
+ mask-image: var(--mba-wave-sm-dip-up-mask);
1987
+ }
1988
+ .mba-wave--sm.mba-wave--top {
1989
+ -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
1990
+ mask-image: var(--mba-wave-sm-dip-down-mask);
1991
+ }
1992
+ .mba-wave--lavender {
1993
+ background-color: var(--mba-color-pastel-lavender);
1994
+ }
1995
+ .mba-wave--white {
1996
+ background-color: var(--mba-color-white);
1997
+ }
1998
+ .mba-wave--beige {
1999
+ background-color: var(--mba-color-beige);
2000
+ }
2001
+ .mba-wave--primary-50 {
2002
+ background-color: var(--mba-color-primary-50);
2003
+ }
1937
2004
  }
1938
- .mba-input-group > .mba-input,
1939
- .mba-input-group > .mba-input-icon {
1940
- flex: 1;
1941
- }
1942
- .mba-form-group {
1943
- display: flex;
1944
- flex-direction: column;
1945
- gap: var(--mba-space-xxs);
1946
- }
1947
- .mba-wave {
1948
- display: block;
1949
- width: 100%;
1950
- height: var(--mba-wave-height);
1951
- background-color: var(--mba-color-pastel-lavender);
1952
- -webkit-mask-image: var(--mba-wave-dip-up-mask);
1953
- -webkit-mask-size: 100% 100%;
1954
- -webkit-mask-repeat: no-repeat;
1955
- mask-image: var(--mba-wave-dip-up-mask);
1956
- mask-size: 100% 100%;
1957
- mask-repeat: no-repeat;
1958
- }
1959
- .mba-wave--top {
1960
- -webkit-mask-image: var(--mba-wave-dip-down-mask);
1961
- mask-image: var(--mba-wave-dip-down-mask);
1962
- }
1963
- .mba-wave--bottom {
1964
- -webkit-mask-image: var(--mba-wave-dip-up-mask);
1965
- mask-image: var(--mba-wave-dip-up-mask);
1966
- }
1967
- .mba-wave--sm {
1968
- height: var(--mba-wave-sm-height);
1969
- -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
1970
- mask-image: var(--mba-wave-sm-dip-up-mask);
1971
- }
1972
- .mba-wave--sm.mba-wave--top {
1973
- -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
1974
- mask-image: var(--mba-wave-sm-dip-down-mask);
1975
- }
1976
- .mba-wave--lavender {
1977
- background-color: var(--mba-color-pastel-lavender);
1978
- }
1979
- .mba-wave--white {
1980
- background-color: var(--mba-color-white);
1981
- }
1982
- .mba-wave--beige {
1983
- background-color: var(--mba-color-beige);
1984
- }
1985
- .mba-wave--primary-50 {
1986
- background-color: var(--mba-color-primary-50);
1987
- }
1988
- .mba-section {
1989
- position: relative;
1990
- width: 100%;
1991
- }
1992
- .mba-section__content {
1993
- position: relative;
1994
- z-index: 1;
1995
- max-width: 1280px;
1996
- margin: 0 auto;
1997
- padding: var(--mba-space-xxl) 0;
1998
- }
1999
- .mba-section--wave-inset.mba-section--wave-top .mba-section__content,
2005
+ @layer components {
2006
+ .mba-section {
2007
+ position: relative;
2008
+ width: 100%;
2009
+ }
2010
+ .mba-section__content {
2011
+ position: relative;
2012
+ z-index: 1;
2013
+ max-width: var(--mba-container-width);
2014
+ margin: 0 auto;
2015
+ padding: var(--mba-space-xxl) 0;
2016
+ }
2017
+ .mba-section--wave-inset.mba-section--wave-top .mba-section__content,
2000
2018
  .mba-section--wave-inset.mba-section--wave-both .mba-section__content {
2001
- padding-top: calc(var(--mba-wave-height) + var(--mba-space-xxl));
2002
- }
2003
- .mba-section--wave-inset.mba-section--wave-bottom .mba-section__content,
2019
+ padding-top: calc(var(--mba-wave-height) + var(--mba-space-xxl));
2020
+ }
2021
+ .mba-section--wave-inset.mba-section--wave-bottom .mba-section__content,
2004
2022
  .mba-section--wave-inset.mba-section--wave-both .mba-section__content {
2005
- padding-bottom: calc(var(--mba-wave-height) + var(--mba-space-xxl));
2006
- }
2007
- .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-top .mba-section__content,
2023
+ padding-bottom: calc(var(--mba-wave-height) + var(--mba-space-xxl));
2024
+ }
2025
+ .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-top .mba-section__content,
2008
2026
  .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
2009
- padding-top: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
2010
- }
2011
- .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-bottom .mba-section__content,
2027
+ padding-top: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
2028
+ }
2029
+ .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-bottom .mba-section__content,
2012
2030
  .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
2013
- padding-bottom: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
2014
- }
2015
- .mba-section--lavender {
2016
- background-color: var(--mba-color-pastel-lavender);
2017
- }
2018
- .mba-section--beige {
2019
- background-color: var(--mba-color-beige);
2020
- }
2021
- .mba-section--primary-50 {
2022
- background-color: var(--mba-color-primary-50);
2023
- }
2024
- .mba-section--white {
2025
- background-color: var(--mba-color-white);
2026
- }
2027
- .mba-section--wave-top::before,
2031
+ padding-bottom: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
2032
+ }
2033
+ .mba-section--lavender {
2034
+ background-color: var(--mba-color-pastel-lavender);
2035
+ }
2036
+ .mba-section--beige {
2037
+ background-color: var(--mba-color-beige);
2038
+ }
2039
+ .mba-section--primary-50 {
2040
+ background-color: var(--mba-color-primary-50);
2041
+ }
2042
+ .mba-section--white {
2043
+ background-color: var(--mba-color-white);
2044
+ }
2045
+ .mba-section--wave-top::before,
2028
2046
  .mba-section--wave-both::before {
2029
- content: "";
2030
- position: absolute;
2031
- left: 0;
2032
- right: 0;
2033
- top: 0;
2034
- height: var(--mba-wave-height);
2035
- background-color: var(--mba-color-white);
2036
- -webkit-mask-image: var(--mba-wave-dip-down-mask);
2037
- -webkit-mask-size: 100% 100%;
2038
- -webkit-mask-repeat: no-repeat;
2039
- mask-image: var(--mba-wave-dip-down-mask);
2040
- mask-size: 100% 100%;
2041
- mask-repeat: no-repeat;
2042
- pointer-events: none;
2043
- }
2044
- .mba-section--wave-bottom::after,
2047
+ content: "";
2048
+ position: absolute;
2049
+ left: 0;
2050
+ right: 0;
2051
+ top: 0;
2052
+ height: var(--mba-wave-height);
2053
+ background-color: var(--mba-color-white);
2054
+ -webkit-mask-image: var(--mba-wave-dip-down-mask);
2055
+ -webkit-mask-size: 100% 100%;
2056
+ -webkit-mask-repeat: no-repeat;
2057
+ mask-image: var(--mba-wave-dip-down-mask);
2058
+ mask-size: 100% 100%;
2059
+ mask-repeat: no-repeat;
2060
+ pointer-events: none;
2061
+ }
2062
+ .mba-section--wave-bottom::after,
2045
2063
  .mba-section--wave-both::after {
2046
- content: "";
2047
- position: absolute;
2048
- left: 0;
2049
- right: 0;
2050
- bottom: 0;
2051
- height: var(--mba-wave-height);
2052
- background-color: var(--mba-color-white);
2053
- -webkit-mask-image: var(--mba-wave-dip-up-mask);
2054
- -webkit-mask-size: 100% 100%;
2055
- -webkit-mask-repeat: no-repeat;
2056
- mask-image: var(--mba-wave-dip-up-mask);
2057
- mask-size: 100% 100%;
2058
- mask-repeat: no-repeat;
2059
- pointer-events: none;
2060
- }
2061
- .mba-section--wave-sm.mba-section--wave-top::before,
2064
+ content: "";
2065
+ position: absolute;
2066
+ left: 0;
2067
+ right: 0;
2068
+ bottom: 0;
2069
+ height: var(--mba-wave-height);
2070
+ background-color: var(--mba-color-white);
2071
+ -webkit-mask-image: var(--mba-wave-dip-up-mask);
2072
+ -webkit-mask-size: 100% 100%;
2073
+ -webkit-mask-repeat: no-repeat;
2074
+ mask-image: var(--mba-wave-dip-up-mask);
2075
+ mask-size: 100% 100%;
2076
+ mask-repeat: no-repeat;
2077
+ pointer-events: none;
2078
+ }
2079
+ .mba-section--wave-sm.mba-section--wave-top::before,
2062
2080
  .mba-section--wave-sm.mba-section--wave-both::before {
2063
- height: var(--mba-wave-sm-height);
2064
- -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
2065
- mask-image: var(--mba-wave-sm-dip-down-mask);
2066
- }
2067
- .mba-section--wave-sm.mba-section--wave-bottom::after,
2081
+ height: var(--mba-wave-sm-height);
2082
+ -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
2083
+ mask-image: var(--mba-wave-sm-dip-down-mask);
2084
+ }
2085
+ .mba-section--wave-sm.mba-section--wave-bottom::after,
2068
2086
  .mba-section--wave-sm.mba-section--wave-both::after {
2069
- height: var(--mba-wave-sm-height);
2070
- -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
2071
- mask-image: var(--mba-wave-sm-dip-up-mask);
2072
- }
2073
- .mba-section--wave-lavender::before,
2087
+ height: var(--mba-wave-sm-height);
2088
+ -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
2089
+ mask-image: var(--mba-wave-sm-dip-up-mask);
2090
+ }
2091
+ .mba-section--wave-lavender::before,
2074
2092
  .mba-section--wave-lavender::after {
2075
- background-color: var(--mba-color-pastel-lavender);
2076
- }
2077
- .mba-section--wave-beige::before,
2093
+ background-color: var(--mba-color-pastel-lavender);
2094
+ }
2095
+ .mba-section--wave-beige::before,
2078
2096
  .mba-section--wave-beige::after {
2079
- background-color: var(--mba-color-beige);
2080
- }
2081
- .mba-section--wave-primary-50::before,
2097
+ background-color: var(--mba-color-beige);
2098
+ }
2099
+ .mba-section--wave-primary-50::before,
2082
2100
  .mba-section--wave-primary-50::after {
2083
- background-color: var(--mba-color-primary-50);
2084
- }
2085
- .mba-footer {
2086
- width: 100%;
2087
- background-color: var(--mba-color-white);
2088
- }
2089
- .mba-footer__main {
2090
- max-width: 1120px;
2091
- margin: 0 auto;
2092
- padding: var(--mba-space-xl) var(--mba-space-sm) var(--mba-space-sm);
2093
- display: flex;
2094
- flex-direction: column;
2095
- gap: var(--mba-space-lg);
2096
- }
2097
- @media (min-width: 768px) {
2098
- .mba-footer__main {
2099
- padding: var(--mba-space-xl) 0;
2101
+ background-color: var(--mba-color-primary-50);
2100
2102
  }
2101
2103
  }
2102
- @media (min-width: 1024px) {
2104
+ @layer components {
2105
+ .mba-footer {
2106
+ width: 100%;
2107
+ background-color: var(--mba-color-white);
2108
+ }
2103
2109
  .mba-footer__main {
2104
- flex-direction: row;
2105
- flex-wrap: wrap;
2106
- justify-content: space-between;
2107
- align-items: flex-start;
2110
+ max-width: var(--mba-container-width);
2111
+ margin: 0 auto;
2112
+ padding: var(--mba-space-xl) var(--mba-space-sm) var(--mba-space-sm);
2113
+ display: flex;
2114
+ flex-direction: column;
2115
+ gap: var(--mba-space-lg);
2116
+ }
2117
+ @media (min-width: 768px) {
2118
+ .mba-footer__main {
2119
+ padding: var(--mba-space-xl) 0;
2120
+ }
2121
+ }
2122
+ @media (min-width: 1024px) {
2123
+ .mba-footer__main {
2124
+ flex-direction: row;
2125
+ flex-wrap: wrap;
2126
+ justify-content: space-between;
2127
+ align-items: flex-start;
2128
+ }
2129
+ }
2130
+ .mba-footer__brand {
2131
+ display: flex;
2132
+ flex-direction: column;
2133
+ gap: var(--mba-space-sm);
2108
2134
  }
2109
- }
2110
- .mba-footer__brand {
2111
- display: flex;
2112
- flex-direction: column;
2113
- gap: var(--mba-space-sm);
2114
- }
2115
- .mba-footer__right {
2116
- display: flex;
2117
- flex-direction: column;
2118
- gap: var(--mba-space-lg);
2119
- }
2120
- @media (min-width: 1024px) {
2121
2135
  .mba-footer__right {
2122
- align-items: flex-end;
2136
+ display: flex;
2137
+ flex-direction: column;
2138
+ gap: var(--mba-space-lg);
2139
+ }
2140
+ @media (min-width: 1024px) {
2141
+ .mba-footer__right {
2142
+ align-items: flex-end;
2143
+ }
2144
+ }
2145
+ .mba-footer__logo {
2146
+ height: auto;
2147
+ max-height: 32px;
2148
+ }
2149
+ .mba-footer__mission {
2150
+ font-family: var(--mba-font-family-text);
2151
+ font-size: var(--mba-font-size-xxs);
2152
+ line-height: var(--mba-leading-relaxed);
2153
+ color: var(--mba-color-text);
2154
+ margin: 0;
2155
+ max-width: 300px;
2156
+ }
2157
+ .mba-footer__contact {
2158
+ font-family: var(--mba-font-family-text);
2159
+ font-size: var(--mba-font-size-xxs);
2160
+ font-weight: 600;
2161
+ color: var(--mba-color-primary-500);
2162
+ text-decoration: none;
2163
+ transition: color var(--mba-transition-fast);
2164
+ }
2165
+ .mba-footer__contact:hover {
2166
+ color: var(--mba-color-primary-800);
2167
+ text-decoration: underline;
2123
2168
  }
2124
- }
2125
- .mba-footer__logo {
2126
- height: auto;
2127
- max-height: 32px;
2128
- }
2129
- .mba-footer__mission {
2130
- font-family: var(--mba-font-family-text);
2131
- font-size: var(--mba-font-size-xxs);
2132
- line-height: var(--mba-line-height-relaxed);
2133
- color: var(--mba-color-text);
2134
- margin: 0;
2135
- max-width: 300px;
2136
- }
2137
- .mba-footer__contact {
2138
- font-family: var(--mba-font-family-text);
2139
- font-size: var(--mba-font-size-xxs);
2140
- font-weight: 600;
2141
- color: var(--mba-color-primary-500);
2142
- text-decoration: none;
2143
- transition: color var(--mba-transition-fast);
2144
- }
2145
- .mba-footer__contact:hover {
2146
- color: var(--mba-color-primary-800);
2147
- text-decoration: underline;
2148
- }
2149
- .mba-footer__nav {
2150
- display: flex;
2151
- flex-direction: column;
2152
- gap: var(--mba-space-lg);
2153
- }
2154
- @media (min-width: 768px) {
2155
2169
  .mba-footer__nav {
2156
- flex-direction: row;
2157
- gap: var(--mba-space-xxl);
2170
+ display: flex;
2171
+ flex-direction: column;
2172
+ gap: var(--mba-space-lg);
2158
2173
  }
2159
- }
2160
- .mba-footer__nav-group {
2161
- display: flex;
2162
- flex-direction: column;
2163
- gap: var(--mba-space-sm);
2164
- }
2165
- .mba-footer__nav-title {
2166
- display: none;
2167
- font-family: var(--mba-font-family-text);
2168
- font-size: var(--mba-font-size-xxs);
2169
- font-weight: 700;
2170
- color: var(--mba-color-primary-900);
2171
- margin: 0;
2172
- margin-bottom: var(--mba-space-xs);
2173
- text-decoration: underline;
2174
- text-decoration-color: var(--mba-color-primary-100);
2175
- text-decoration-thickness: 2px;
2176
- text-underline-offset: var(--mba-space-xs);
2177
- }
2178
- .mba-footer__nav-list {
2179
- list-style: none;
2180
- margin: 0;
2181
- padding: 0;
2182
- display: flex;
2183
- flex-direction: column;
2184
- align-items: flex-start;
2185
- gap: var(--mba-space-sm);
2186
- }
2187
- .mba-footer__nav-link {
2188
- font-family: var(--mba-font-family-text);
2189
- font-size: var(--mba-font-size-xxs);
2190
- font-weight: 600;
2191
- color: var(--mba-color-primary-500);
2192
- text-decoration: none;
2193
- transition: color var(--mba-transition-fast);
2194
- }
2195
- .mba-footer__nav-link:hover {
2196
- color: var(--mba-color-primary-800);
2197
- text-decoration: underline;
2198
- }
2199
- .mba-footer__nav-toggle {
2200
- display: flex;
2201
- width: 100%;
2202
- align-items: center;
2203
- justify-content: space-between;
2204
- padding: 0;
2205
- padding-bottom: var(--mba-space-xs);
2206
- border: none;
2207
- border-bottom: 2px solid var(--mba-color-primary-100);
2208
- background: none;
2209
- cursor: pointer;
2210
- font-family: var(--mba-font-family-text);
2211
- font-size: var(--mba-font-size-xxs);
2212
- font-weight: 700;
2213
- color: var(--mba-color-text);
2214
- }
2215
- .mba-footer__nav-toggle-icon {
2216
- font-size: 20px;
2217
- transition: transform var(--mba-transition-fast);
2218
- }
2219
- .mba-footer__nav-toggle[aria-expanded="true"] .mba-footer__nav-toggle-icon {
2220
- transform: rotate(180deg);
2221
- }
2222
- .mba-footer__nav-content {
2223
- display: none;
2224
- }
2225
- .mba-footer__nav-content[data-expanded="true"] {
2226
- display: block;
2227
- }
2228
- @media (min-width: 768px) {
2229
- .mba-footer__nav-toggle {
2230
- display: none;
2174
+ @media (min-width: 768px) {
2175
+ .mba-footer__nav {
2176
+ flex-direction: row;
2177
+ gap: var(--mba-space-xxl);
2178
+ }
2179
+ }
2180
+ .mba-footer__nav-group {
2181
+ display: flex;
2182
+ flex-direction: column;
2183
+ gap: var(--mba-space-sm);
2231
2184
  }
2232
2185
  .mba-footer__nav-title {
2233
- display: block;
2186
+ display: none;
2187
+ font-family: var(--mba-font-family-text);
2188
+ font-size: var(--mba-font-size-xxs);
2189
+ font-weight: 700;
2190
+ color: var(--mba-color-primary-900);
2191
+ margin: 0;
2192
+ margin-bottom: var(--mba-space-xs);
2193
+ text-decoration: underline;
2194
+ text-decoration-color: var(--mba-color-primary-100);
2195
+ text-decoration-thickness: 2px;
2196
+ text-underline-offset: var(--mba-space-xs);
2197
+ }
2198
+ .mba-footer__nav-list {
2199
+ list-style: none;
2200
+ margin: 0;
2201
+ padding: 0;
2202
+ display: flex;
2203
+ flex-direction: column;
2204
+ align-items: flex-start;
2205
+ gap: var(--mba-space-sm);
2206
+ }
2207
+ .mba-footer__nav-link {
2208
+ font-family: var(--mba-font-family-text);
2209
+ font-size: var(--mba-font-size-xxs);
2210
+ font-weight: 600;
2211
+ color: var(--mba-color-primary-500);
2212
+ text-decoration: none;
2213
+ transition: color var(--mba-transition-fast);
2214
+ }
2215
+ .mba-footer__nav-link:hover {
2216
+ color: var(--mba-color-primary-800);
2217
+ text-decoration: underline;
2218
+ }
2219
+ .mba-footer__nav-toggle {
2220
+ display: flex;
2221
+ width: 100%;
2222
+ align-items: center;
2223
+ justify-content: space-between;
2224
+ padding: 0;
2225
+ padding-bottom: var(--mba-space-xs);
2226
+ border: none;
2227
+ border-bottom: 2px solid var(--mba-color-primary-100);
2228
+ background: none;
2229
+ cursor: pointer;
2230
+ font-family: var(--mba-font-family-text);
2231
+ font-size: var(--mba-font-size-xxs);
2232
+ font-weight: 700;
2233
+ color: var(--mba-color-text);
2234
+ }
2235
+ .mba-footer__nav-toggle-icon {
2236
+ font-size: 20px;
2237
+ transition: transform var(--mba-transition-fast);
2238
+ }
2239
+ .mba-footer__nav-toggle[aria-expanded="true"] .mba-footer__nav-toggle-icon {
2240
+ transform: rotate(180deg);
2234
2241
  }
2235
2242
  .mba-footer__nav-content {
2243
+ display: none;
2244
+ }
2245
+ .mba-footer__nav-content[data-expanded="true"] {
2236
2246
  display: block;
2237
- padding-top: 0;
2238
2247
  }
2239
- }
2240
- .mba-footer__social {
2241
- display: flex;
2242
- gap: var(--mba-space-sm);
2243
- align-items: center;
2244
- }
2245
- .mba-footer__social-link {
2246
- display: flex;
2247
- align-items: center;
2248
- justify-content: center;
2249
- width: 24px;
2250
- height: 24px;
2251
- color: var(--mba-color-primary-900);
2252
- transition: color var(--mba-transition-fast);
2253
- }
2254
- .mba-footer__social-link:hover {
2255
- color: var(--mba-color-primary-500);
2256
- }
2257
- .mba-footer__social-icon {
2258
- width: 100%;
2259
- height: 100%;
2260
- fill: currentColor;
2261
- }
2262
- .mba-footer__bottom {
2263
- background-color: var(--mba-color-pastel-lavender);
2264
- }
2265
- .mba-footer__legal {
2266
- max-width: 1120px;
2267
- margin: 0 auto;
2268
- padding: var(--mba-space-md) var(--mba-space-sm);
2269
- display: flex;
2270
- flex-direction: column;
2271
- gap: var(--mba-space-sm);
2272
- }
2273
- @media (min-width: 768px) {
2274
- .mba-footer__legal {
2275
- padding: var(--mba-space-md) 0;
2276
- flex-direction: row;
2277
- justify-content: space-between;
2248
+ @media (min-width: 768px) {
2249
+ .mba-footer__nav-toggle {
2250
+ display: none;
2251
+ }
2252
+ .mba-footer__nav-title {
2253
+ display: block;
2254
+ }
2255
+ .mba-footer__nav-content {
2256
+ display: block;
2257
+ padding-top: 0;
2258
+ }
2259
+ }
2260
+ .mba-footer__social {
2261
+ display: flex;
2262
+ gap: var(--mba-space-sm);
2278
2263
  align-items: center;
2279
2264
  }
2280
- }
2281
- .mba-footer__copyright {
2282
- font-family: var(--mba-font-family-text);
2283
- font-size: var(--mba-font-size-xxs);
2284
- color: var(--mba-color-primary-900);
2285
- margin: 0;
2286
- padding-top: var(--mba-space-sm);
2287
- border-top: 1px solid var(--mba-color-primary-400);
2288
- order: 2;
2289
- }
2290
- @media (min-width: 768px) {
2265
+ .mba-footer__social-link {
2266
+ display: flex;
2267
+ align-items: center;
2268
+ justify-content: center;
2269
+ width: 24px;
2270
+ height: 24px;
2271
+ color: var(--mba-color-primary-900);
2272
+ transition: color var(--mba-transition-fast);
2273
+ }
2274
+ .mba-footer__social-link:hover {
2275
+ color: var(--mba-color-primary-500);
2276
+ }
2277
+ .mba-footer__social-icon {
2278
+ width: 100%;
2279
+ height: 100%;
2280
+ fill: currentColor;
2281
+ }
2282
+ .mba-footer__bottom {
2283
+ background-color: var(--mba-color-pastel-lavender);
2284
+ }
2285
+ .mba-footer__legal {
2286
+ max-width: var(--mba-container-width);
2287
+ margin: 0 auto;
2288
+ padding: var(--mba-space-md) var(--mba-space-sm);
2289
+ display: flex;
2290
+ flex-direction: column;
2291
+ gap: var(--mba-space-sm);
2292
+ }
2293
+ @media (min-width: 768px) {
2294
+ .mba-footer__legal {
2295
+ padding: var(--mba-space-md) 0;
2296
+ flex-direction: row;
2297
+ justify-content: space-between;
2298
+ align-items: center;
2299
+ }
2300
+ }
2291
2301
  .mba-footer__copyright {
2292
- padding-top: 0;
2293
- border-top: none;
2294
- order: 0;
2302
+ font-family: var(--mba-font-family-text);
2303
+ font-size: var(--mba-font-size-xxs);
2304
+ color: var(--mba-color-primary-900);
2305
+ margin: 0;
2306
+ padding-top: var(--mba-space-sm);
2307
+ border-top: 1px solid var(--mba-color-primary-400);
2308
+ order: 2;
2309
+ }
2310
+ @media (min-width: 768px) {
2311
+ .mba-footer__copyright {
2312
+ padding-top: 0;
2313
+ border-top: none;
2314
+ order: 0;
2315
+ }
2295
2316
  }
2296
- }
2297
- .mba-footer__legal-links {
2298
- display: flex;
2299
- flex-direction: column;
2300
- align-items: flex-start;
2301
- gap: var(--mba-space-sm);
2302
- order: 1;
2303
- }
2304
- @media (min-width: 768px) {
2305
2317
  .mba-footer__legal-links {
2306
- flex-direction: row;
2307
- align-items: center;
2318
+ display: flex;
2319
+ flex-direction: column;
2320
+ align-items: flex-start;
2308
2321
  gap: var(--mba-space-sm);
2309
- order: 0;
2322
+ order: 1;
2323
+ }
2324
+ @media (min-width: 768px) {
2325
+ .mba-footer__legal-links {
2326
+ flex-direction: row;
2327
+ align-items: center;
2328
+ gap: var(--mba-space-sm);
2329
+ order: 0;
2330
+ }
2310
2331
  }
2311
- }
2312
- .mba-footer__legal-link {
2313
- font-family: var(--mba-font-family-text);
2314
- font-size: var(--mba-font-size-xxs);
2315
- font-weight: 600;
2316
- color: var(--mba-color-primary-500);
2317
- text-decoration: none;
2318
- transition: color var(--mba-transition-fast);
2319
- }
2320
- .mba-footer__legal-link:hover {
2321
- color: var(--mba-color-primary-800);
2322
- text-decoration: underline;
2323
- }
2324
- .mba-footer--pro .mba-footer__contact,
2332
+ .mba-footer__legal-link {
2333
+ font-family: var(--mba-font-family-text);
2334
+ font-size: var(--mba-font-size-xxs);
2335
+ font-weight: 600;
2336
+ color: var(--mba-color-primary-500);
2337
+ text-decoration: none;
2338
+ transition: color var(--mba-transition-fast);
2339
+ }
2340
+ .mba-footer__legal-link:hover {
2341
+ color: var(--mba-color-primary-800);
2342
+ text-decoration: underline;
2343
+ }
2344
+ .mba-footer--pro .mba-footer__contact,
2325
2345
  .mba-footer--pro .mba-footer__nav-link,
2326
2346
  .mba-footer--pro .mba-footer__legal-link {
2327
- color: var(--mba-color-primary-pro-500);
2328
- }
2329
- .mba-footer--pro .mba-footer__contact:hover,
2347
+ color: var(--mba-color-primary-pro-500);
2348
+ }
2349
+ .mba-footer--pro .mba-footer__contact:hover,
2330
2350
  .mba-footer--pro .mba-footer__nav-link:hover,
2331
2351
  .mba-footer--pro .mba-footer__legal-link:hover {
2332
- color: var(--mba-color-primary-pro-800);
2333
- }
2334
- .mba-footer--pro .mba-footer__nav-title {
2335
- color: var(--mba-color-primary-pro-800);
2336
- text-decoration-color: var(--mba-color-primary-pro-100);
2337
- }
2338
- .mba-footer--pro .mba-footer__nav-toggle {
2339
- border-bottom-color: var(--mba-color-primary-pro-100);
2340
- }
2341
- .mba-footer--pro .mba-footer__social-link {
2342
- color: var(--mba-color-primary-pro-800);
2343
- }
2344
- .mba-footer--pro .mba-footer__social-link:hover {
2345
- color: var(--mba-color-primary-pro-500);
2346
- }
2347
- .mba-footer--pro .mba-footer__bottom {
2348
- background-color: var(--mba-color-pastel-bleuet);
2349
- }
2350
- .mba-footer--pro .mba-footer__copyright {
2351
- color: var(--mba-color-primary-pro-800);
2352
- border-top-color: var(--mba-color-primary-pro-400);
2352
+ color: var(--mba-color-primary-pro-800);
2353
+ }
2354
+ .mba-footer--pro .mba-footer__nav-title {
2355
+ color: var(--mba-color-primary-pro-800);
2356
+ text-decoration-color: var(--mba-color-primary-pro-100);
2357
+ }
2358
+ .mba-footer--pro .mba-footer__nav-toggle {
2359
+ border-bottom-color: var(--mba-color-primary-pro-100);
2360
+ }
2361
+ .mba-footer--pro .mba-footer__social-link {
2362
+ color: var(--mba-color-primary-pro-800);
2363
+ }
2364
+ .mba-footer--pro .mba-footer__social-link:hover {
2365
+ color: var(--mba-color-primary-pro-500);
2366
+ }
2367
+ .mba-footer--pro .mba-footer__bottom {
2368
+ background-color: var(--mba-color-pastel-bleuet);
2369
+ }
2370
+ .mba-footer--pro .mba-footer__copyright {
2371
+ color: var(--mba-color-primary-pro-800);
2372
+ border-top-color: var(--mba-color-primary-pro-400);
2373
+ }
2353
2374
  }
2354
2375
  .text-xxs {
2355
2376
  font-size: var(--mba-font-size-xxs);