@maboussoleaidant/design-system 0.1.11 → 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 +359 -140
  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 +1982 -1749
  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 +13 -12
  8. package/dist/mba-tokens-only.css.map +1 -1
  9. package/package.json +8 -7
  10. package/src/tokens/_spacing.css +5 -0
  11. package/src/tokens/_typography.css +6 -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;
@@ -95,77 +96,79 @@
95
96
  --mba-tracking-wider: 0.05em;
96
97
  --mba-tracking-widest: 0.1em;
97
98
  }
98
- .mba-heading-xxl {
99
- font-family: var(--mba-font-family-heading);
100
- font-size: var(--mba-font-size-xxl);
101
- font-weight: var(--mba-font-weight-bold);
102
- line-height: var(--mba-leading-tight);
103
- }
104
- .mba-heading-xl {
105
- font-family: var(--mba-font-family-heading);
106
- font-size: var(--mba-font-size-xl);
107
- font-weight: var(--mba-font-weight-bold);
108
- line-height: var(--mba-leading-tight);
109
- }
110
- .mba-heading-md {
111
- font-family: var(--mba-font-family-heading);
112
- font-size: var(--mba-font-size-md);
113
- font-weight: var(--mba-font-weight-bold);
114
- line-height: var(--mba-leading-snug);
115
- }
116
- .mba-heading-sm {
117
- font-family: var(--mba-font-family-heading);
118
- font-size: var(--mba-font-size-sm);
119
- font-weight: var(--mba-font-weight-bold);
120
- line-height: var(--mba-leading-normal);
121
- }
122
- .mba-heading-xs {
123
- font-family: var(--mba-font-family-heading);
124
- font-size: var(--mba-font-size-xs);
125
- font-weight: var(--mba-font-weight-bold);
126
- line-height: var(--mba-leading-normal);
127
- }
128
- .mba-heading-xxs {
129
- font-family: var(--mba-font-family-heading);
130
- font-size: var(--mba-font-size-xxs);
131
- font-weight: var(--mba-font-weight-bold);
132
- line-height: var(--mba-leading-normal);
133
- }
134
- .mba-text-xxl {
135
- font-family: var(--mba-font-family-text);
136
- font-size: var(--mba-font-size-xxl);
137
- font-weight: var(--mba-font-weight-regular);
138
- line-height: var(--mba-leading-normal);
139
- }
140
- .mba-text-xl {
141
- font-family: var(--mba-font-family-text);
142
- font-size: var(--mba-font-size-xl);
143
- font-weight: var(--mba-font-weight-regular);
144
- line-height: var(--mba-leading-normal);
145
- }
146
- .mba-text-md {
147
- font-family: var(--mba-font-family-text);
148
- font-size: var(--mba-font-size-md);
149
- font-weight: var(--mba-font-weight-regular);
150
- line-height: var(--mba-leading-normal);
151
- }
152
- .mba-text-sm {
153
- font-family: var(--mba-font-family-text);
154
- font-size: var(--mba-font-size-sm);
155
- font-weight: var(--mba-font-weight-regular);
156
- line-height: var(--mba-leading-normal);
157
- }
158
- .mba-text-xs {
159
- font-family: var(--mba-font-family-text);
160
- font-size: var(--mba-font-size-xs);
161
- font-weight: var(--mba-font-weight-regular);
162
- line-height: var(--mba-leading-normal);
163
- }
164
- .mba-text-xxs {
165
- font-family: var(--mba-font-family-text);
166
- font-size: var(--mba-font-size-xxs);
167
- font-weight: var(--mba-font-weight-regular);
168
- line-height: var(--mba-leading-normal);
99
+ @layer components {
100
+ .mba-heading-xxl {
101
+ font-family: var(--mba-font-family-heading);
102
+ font-size: var(--mba-font-size-xxl);
103
+ font-weight: var(--mba-font-weight-bold);
104
+ line-height: var(--mba-leading-tight);
105
+ }
106
+ .mba-heading-xl {
107
+ font-family: var(--mba-font-family-heading);
108
+ font-size: var(--mba-font-size-xl);
109
+ font-weight: var(--mba-font-weight-bold);
110
+ line-height: var(--mba-leading-tight);
111
+ }
112
+ .mba-heading-md {
113
+ font-family: var(--mba-font-family-heading);
114
+ font-size: var(--mba-font-size-md);
115
+ font-weight: var(--mba-font-weight-bold);
116
+ line-height: var(--mba-leading-snug);
117
+ }
118
+ .mba-heading-sm {
119
+ font-family: var(--mba-font-family-heading);
120
+ font-size: var(--mba-font-size-sm);
121
+ font-weight: var(--mba-font-weight-bold);
122
+ line-height: var(--mba-leading-normal);
123
+ }
124
+ .mba-heading-xs {
125
+ font-family: var(--mba-font-family-heading);
126
+ font-size: var(--mba-font-size-xs);
127
+ font-weight: var(--mba-font-weight-bold);
128
+ line-height: var(--mba-leading-normal);
129
+ }
130
+ .mba-heading-xxs {
131
+ font-family: var(--mba-font-family-heading);
132
+ font-size: var(--mba-font-size-xxs);
133
+ font-weight: var(--mba-font-weight-bold);
134
+ line-height: var(--mba-leading-normal);
135
+ }
136
+ .mba-text-xxl {
137
+ font-family: var(--mba-font-family-text);
138
+ font-size: var(--mba-font-size-xxl);
139
+ font-weight: var(--mba-font-weight-regular);
140
+ line-height: var(--mba-leading-normal);
141
+ }
142
+ .mba-text-xl {
143
+ font-family: var(--mba-font-family-text);
144
+ font-size: var(--mba-font-size-xl);
145
+ font-weight: var(--mba-font-weight-regular);
146
+ line-height: var(--mba-leading-normal);
147
+ }
148
+ .mba-text-md {
149
+ font-family: var(--mba-font-family-text);
150
+ font-size: var(--mba-font-size-md);
151
+ font-weight: var(--mba-font-weight-regular);
152
+ line-height: var(--mba-leading-normal);
153
+ }
154
+ .mba-text-sm {
155
+ font-family: var(--mba-font-family-text);
156
+ font-size: var(--mba-font-size-sm);
157
+ font-weight: var(--mba-font-weight-regular);
158
+ line-height: var(--mba-leading-normal);
159
+ }
160
+ .mba-text-xs {
161
+ font-family: var(--mba-font-family-text);
162
+ font-size: var(--mba-font-size-xs);
163
+ font-weight: var(--mba-font-weight-regular);
164
+ line-height: var(--mba-leading-normal);
165
+ }
166
+ .mba-text-xxs {
167
+ font-family: var(--mba-font-family-text);
168
+ font-size: var(--mba-font-size-xxs);
169
+ font-weight: var(--mba-font-weight-regular);
170
+ line-height: var(--mba-leading-normal);
171
+ }
169
172
  }
170
173
  :root {
171
174
  --mba-space-xxs: 0.25rem;
@@ -177,6 +180,7 @@
177
180
  --mba-space-xxl: 4rem;
178
181
  --mba-space-0: 0;
179
182
  --mba-space-px: 1px;
183
+ --mba-container-width: 70rem;
180
184
  }
181
185
  :root {
182
186
  --mba-radius-2xs: 0.25rem;
@@ -360,135 +364,136 @@
360
364
  .mba-icon--muted {
361
365
  color: var(--mba-color-text-muted);
362
366
  }
363
- *,
367
+ @layer base {
368
+ *,
364
369
  ::before,
365
370
  ::after {
366
- box-sizing: border-box;
367
- border-width: 0;
368
- border-style: solid;
369
- border-color: var(--mba-color-border);
370
- }
371
- html {
372
- line-height: 1.5;
373
- -webkit-text-size-adjust: 100%;
374
- -moz-tab-size: 4;
375
- tab-size: 4;
376
- font-family: var(--mba-font-family-text);
377
- font-feature-settings: normal;
378
- font-variation-settings: normal;
379
- }
380
- body {
381
- margin: 0;
382
- line-height: inherit;
383
- }
384
- hr {
385
- height: 0;
386
- color: inherit;
387
- border-top-width: 1px;
388
- }
389
- abbr:where([title]) {
390
- text-decoration: underline dotted;
391
- }
392
- h1,
371
+ box-sizing: border-box;
372
+ border-width: 0;
373
+ border-style: solid;
374
+ border-color: var(--mba-color-border);
375
+ }
376
+ html {
377
+ line-height: 1.5;
378
+ -webkit-text-size-adjust: 100%;
379
+ -moz-tab-size: 4;
380
+ tab-size: 4;
381
+ font-family: var(--mba-font-family-text);
382
+ font-feature-settings: normal;
383
+ font-variation-settings: normal;
384
+ }
385
+ body {
386
+ margin: 0;
387
+ line-height: inherit;
388
+ }
389
+ hr {
390
+ height: 0;
391
+ color: inherit;
392
+ border-top-width: 1px;
393
+ }
394
+ abbr:where([title]) {
395
+ text-decoration: underline dotted;
396
+ }
397
+ h1,
393
398
  h2,
394
399
  h3,
395
400
  h4,
396
401
  h5,
397
402
  h6 {
398
- font-size: inherit;
399
- font-weight: inherit;
400
- }
401
- a {
402
- color: inherit;
403
- text-decoration: inherit;
404
- }
405
- b,
403
+ font-size: inherit;
404
+ font-weight: inherit;
405
+ }
406
+ a {
407
+ color: inherit;
408
+ text-decoration: inherit;
409
+ }
410
+ b,
406
411
  strong {
407
- font-weight: bolder;
408
- }
409
- code,
412
+ font-weight: bolder;
413
+ }
414
+ code,
410
415
  kbd,
411
416
  samp,
412
417
  pre {
413
- font-family: var(--mba-font-family-mono);
414
- font-size: 1em;
415
- }
416
- small {
417
- font-size: 80%;
418
- }
419
- sub,
420
- sup {
421
- font-size: 75%;
422
- line-height: 0;
423
- position: relative;
424
- vertical-align: baseline;
425
- }
426
- sub {
427
- bottom: -0.25em;
428
- }
418
+ font-family: var(--mba-font-family-mono);
419
+ font-size: 1em;
420
+ }
421
+ small {
422
+ font-size: 80%;
423
+ }
424
+ sub,
429
425
  sup {
430
- top: -0.5em;
431
- }
432
- table {
433
- text-indent: 0;
434
- border-color: inherit;
435
- border-collapse: collapse;
436
- }
437
- button,
426
+ font-size: 75%;
427
+ line-height: 0;
428
+ position: relative;
429
+ vertical-align: baseline;
430
+ }
431
+ sub {
432
+ bottom: -0.25em;
433
+ }
434
+ sup {
435
+ top: -0.5em;
436
+ }
437
+ table {
438
+ text-indent: 0;
439
+ border-color: inherit;
440
+ border-collapse: collapse;
441
+ }
442
+ button,
438
443
  input,
439
444
  optgroup,
440
445
  select,
441
446
  textarea {
442
- font-family: inherit;
443
- font-feature-settings: inherit;
444
- font-variation-settings: inherit;
445
- font-size: 100%;
446
- font-weight: inherit;
447
- line-height: inherit;
448
- color: inherit;
449
- margin: 0;
450
- padding: 0;
451
- }
452
- button,
447
+ font-family: inherit;
448
+ font-feature-settings: inherit;
449
+ font-variation-settings: inherit;
450
+ font-size: 100%;
451
+ font-weight: inherit;
452
+ line-height: inherit;
453
+ color: inherit;
454
+ margin: 0;
455
+ padding: 0;
456
+ }
457
+ button,
453
458
  select {
454
- text-transform: none;
455
- }
456
- button,
459
+ text-transform: none;
460
+ }
461
+ button,
457
462
  [type="button"],
458
463
  [type="reset"],
459
464
  [type="submit"] {
460
- -webkit-appearance: button;
461
- background-color: transparent;
462
- background-image: none;
463
- }
464
- :-moz-focusring {
465
- outline: auto;
466
- }
467
- :-moz-ui-invalid {
468
- box-shadow: none;
469
- }
470
- progress {
471
- vertical-align: baseline;
472
- }
473
- ::-webkit-inner-spin-button,
465
+ -webkit-appearance: button;
466
+ background-color: transparent;
467
+ background-image: none;
468
+ }
469
+ :-moz-focusring {
470
+ outline: auto;
471
+ }
472
+ :-moz-ui-invalid {
473
+ box-shadow: none;
474
+ }
475
+ progress {
476
+ vertical-align: baseline;
477
+ }
478
+ ::-webkit-inner-spin-button,
474
479
  ::-webkit-outer-spin-button {
475
- height: auto;
476
- }
477
- [type="search"] {
478
- -webkit-appearance: textfield;
479
- outline-offset: -2px;
480
- }
481
- ::-webkit-search-decoration {
482
- -webkit-appearance: none;
483
- }
484
- ::-webkit-file-upload-button {
485
- -webkit-appearance: button;
486
- font: inherit;
487
- }
488
- summary {
489
- display: list-item;
490
- }
491
- blockquote,
480
+ height: auto;
481
+ }
482
+ [type="search"] {
483
+ -webkit-appearance: textfield;
484
+ outline-offset: -2px;
485
+ }
486
+ ::-webkit-search-decoration {
487
+ -webkit-appearance: none;
488
+ }
489
+ ::-webkit-file-upload-button {
490
+ -webkit-appearance: button;
491
+ font: inherit;
492
+ }
493
+ summary {
494
+ display: list-item;
495
+ }
496
+ blockquote,
492
497
  dl,
493
498
  dd,
494
499
  h1,
@@ -501,41 +506,41 @@ hr,
501
506
  figure,
502
507
  p,
503
508
  pre {
504
- margin: 0;
505
- }
506
- fieldset {
507
- margin: 0;
508
- padding: 0;
509
- }
510
- legend {
511
- padding: 0;
512
- }
513
- ol,
509
+ margin: 0;
510
+ }
511
+ fieldset {
512
+ margin: 0;
513
+ padding: 0;
514
+ }
515
+ legend {
516
+ padding: 0;
517
+ }
518
+ ol,
514
519
  ul,
515
520
  menu {
516
- list-style: none;
517
- margin: 0;
518
- padding: 0;
519
- }
520
- dialog {
521
- padding: 0;
522
- }
523
- textarea {
524
- resize: vertical;
525
- }
526
- input::placeholder,
521
+ list-style: none;
522
+ margin: 0;
523
+ padding: 0;
524
+ }
525
+ dialog {
526
+ padding: 0;
527
+ }
528
+ textarea {
529
+ resize: vertical;
530
+ }
531
+ input::placeholder,
527
532
  textarea::placeholder {
528
- opacity: 1;
529
- color: var(--mba-color-text-subtle);
530
- }
531
- button,
533
+ opacity: 1;
534
+ color: var(--mba-color-text-subtle);
535
+ }
536
+ button,
532
537
  [role="button"] {
533
- cursor: pointer;
534
- }
535
- :disabled {
536
- cursor: default;
537
- }
538
- img,
538
+ cursor: pointer;
539
+ }
540
+ :disabled {
541
+ cursor: default;
542
+ }
543
+ img,
539
544
  svg,
540
545
  video,
541
546
  canvas,
@@ -543,16 +548,17 @@ audio,
543
548
  iframe,
544
549
  embed,
545
550
  object {
546
- display: block;
547
- vertical-align: middle;
548
- }
549
- img,
551
+ display: block;
552
+ vertical-align: middle;
553
+ }
554
+ img,
550
555
  video {
551
- max-width: 100%;
552
- height: auto;
553
- }
554
- [hidden] {
555
- display: none;
556
+ max-width: 100%;
557
+ height: auto;
558
+ }
559
+ [hidden] {
560
+ display: none;
561
+ }
556
562
  }
557
563
  body {
558
564
  font-family: var(--mba-font-family-text);
@@ -578,1605 +584,1793 @@ a:hover {
578
584
  background-color: var(--mba-color-primary-100);
579
585
  color: var(--mba-color-primary-900);
580
586
  }
581
- .mba-btn {
582
- display: inline-flex;
583
- height: 38px;
584
- padding: var(--mba-space-xs) var(--mba-space-sm);
585
- justify-content: center;
586
- align-items: center;
587
- gap: var(--mba-space-xs);
588
- font-family: var(--mba-font-family-text);
589
- font-size: var(--mba-font-size-xs);
590
- font-weight: var(--mba-font-weight-semibold);
591
- line-height: var(--mba-leading-snug);
592
- text-decoration: none;
593
- border: 1px solid transparent;
594
- border-radius: var(--mba-radius-xs);
595
- cursor: pointer;
596
- transition: all 0.25s ease-in-out;
597
- user-select: none;
598
- white-space: nowrap;
599
- background-color: var(--mba-color-primary-500);
600
- color: var(--mba-color-white);
601
- }
602
- .mba-btn:hover:not(:disabled):not(.is-disabled) {
603
- background-color: var(--mba-color-white);
604
- color: var(--mba-color-primary-800);
605
- border: 1px solid var(--mba-color-primary-800);
606
- }
607
- .mba-btn:focus {
608
- outline: none;
609
- box-shadow: var(--mba-focus-ring);
610
- }
611
- .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,
612
619
  .mba-btn.is-disabled {
613
- background-color: var(--mba-color-grey-50);
614
- color: var(--mba-color-grey-400);
615
- border-color: transparent;
616
- cursor: not-allowed;
617
- pointer-events: none;
618
- }
619
- .mba-btn-secondary {
620
- display: inline-flex;
621
- height: 38px;
622
- padding: var(--mba-space-xs) var(--mba-space-sm);
623
- justify-content: center;
624
- align-items: center;
625
- gap: var(--mba-space-xs);
626
- font-family: var(--mba-font-family-text);
627
- font-size: var(--mba-font-size-xs);
628
- font-weight: var(--mba-font-weight-semibold);
629
- line-height: var(--mba-leading-snug);
630
- text-decoration: none;
631
- border-radius: var(--mba-radius-xs);
632
- cursor: pointer;
633
- transition: all 0.25s ease-in-out;
634
- user-select: none;
635
- white-space: nowrap;
636
- background-color: var(--mba-color-white);
637
- color: var(--mba-color-primary-800);
638
- border: 1px solid var(--mba-color-primary-800);
639
- }
640
- .mba-btn-secondary:hover:not(:disabled):not(.is-disabled) {
641
- background-color: var(--mba-color-primary-500);
642
- color: var(--mba-color-white);
643
- border-color: var(--mba-color-primary-500);
644
- }
645
- .mba-btn-secondary:focus {
646
- outline: none;
647
- box-shadow: var(--mba-focus-ring);
648
- }
649
- .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,
650
657
  .mba-btn-secondary.is-disabled {
651
- background-color: var(--mba-color-grey-50);
652
- color: var(--mba-color-grey-400);
653
- border-color: var(--mba-color-grey-100);
654
- cursor: not-allowed;
655
- pointer-events: none;
656
- }
657
- .mba-btn-tertiary {
658
- display: inline-flex;
659
- height: 38px;
660
- padding: var(--mba-space-xs) var(--mba-space-sm);
661
- justify-content: center;
662
- align-items: center;
663
- gap: var(--mba-space-xs);
664
- font-family: var(--mba-font-family-text);
665
- font-size: var(--mba-font-size-xs);
666
- font-weight: var(--mba-font-weight-semibold);
667
- line-height: var(--mba-leading-snug);
668
- text-decoration: none;
669
- border: none;
670
- border-radius: var(--mba-radius-xs);
671
- cursor: pointer;
672
- transition: all 0.25s ease-in-out;
673
- user-select: none;
674
- white-space: nowrap;
675
- background-color: var(--mba-color-white);
676
- color: var(--mba-color-primary-500);
677
- }
678
- .mba-btn-tertiary:hover:not(:disabled):not(.is-disabled) {
679
- background-color: var(--mba-color-primary-50);
680
- color: var(--mba-color-primary-500);
681
- }
682
- .mba-btn-tertiary:focus {
683
- outline: none;
684
- box-shadow: var(--mba-focus-ring);
685
- }
686
- .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,
687
694
  .mba-btn-tertiary.is-disabled {
688
- background-color: var(--mba-color-grey-50);
689
- color: var(--mba-color-grey-400);
690
- cursor: not-allowed;
691
- pointer-events: none;
692
- }
693
- .mba-btn-inline {
694
- display: inline-flex;
695
- height: 24px;
696
- padding: var(--mba-space-xs) var(--mba-space-sm);
697
- justify-content: center;
698
- align-items: center;
699
- gap: var(--mba-space-xxs);
700
- font-family: var(--mba-font-family-text);
701
- font-size: var(--mba-font-size-xs);
702
- font-weight: var(--mba-font-weight-semibold);
703
- line-height: var(--mba-leading-snug);
704
- text-decoration: underline;
705
- border: none;
706
- border-radius: var(--mba-radius-xs);
707
- cursor: pointer;
708
- transition: all 0.25s ease-in-out;
709
- user-select: none;
710
- white-space: nowrap;
711
- background-color: var(--mba-color-white);
712
- color: var(--mba-color-primary-500);
713
- }
714
- .mba-btn-inline:hover:not(:disabled):not(.is-disabled):not(.is-error) {
715
- background-color: var(--mba-color-white);
716
- color: var(--mba-color-primary-800);
717
- text-decoration: underline;
718
- }
719
- .mba-btn-inline:focus {
720
- outline: none;
721
- box-shadow: var(--mba-focus-ring);
722
- }
723
- .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,
724
731
  .mba-btn-inline.is-disabled {
725
- background-color: var(--mba-color-white);
726
- color: var(--mba-color-grey-400);
727
- text-decoration: underline;
728
- cursor: not-allowed;
729
- pointer-events: none;
730
- }
731
- .mba-btn-inline.is-error {
732
- background-color: var(--mba-color-white);
733
- color: var(--mba-color-error-500);
734
- text-decoration: underline;
735
- }
736
- .mba-btn-light {
737
- display: inline-flex;
738
- height: 30px;
739
- padding: var(--mba-space-xxs) 12px;
740
- justify-content: center;
741
- align-items: center;
742
- gap: var(--mba-space-xxs);
743
- font-family: var(--mba-font-family-text);
744
- font-size: var(--mba-font-size-xs);
745
- font-weight: var(--mba-font-weight-semibold);
746
- line-height: var(--mba-leading-snug);
747
- text-decoration: none;
748
- border: 1.5px solid var(--mba-color-primary-400);
749
- border-radius: var(--mba-radius-sm);
750
- cursor: pointer;
751
- transition: all 0.25s ease-in-out;
752
- user-select: none;
753
- white-space: nowrap;
754
- background-color: var(--mba-color-white);
755
- color: var(--mba-color-primary-900);
756
- }
757
- .mba-btn-light:hover:not(:disabled):not(.is-disabled) {
758
- background-color: var(--mba-color-white);
759
- color: var(--mba-color-primary-900);
760
- border-color: var(--mba-color-primary-500);
761
- text-decoration: underline;
762
- }
763
- .mba-btn-light:focus {
764
- outline: none;
765
- box-shadow: var(--mba-focus-ring);
766
- }
767
- .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,
768
775
  .mba-btn-light.is-disabled {
769
- background-color: var(--mba-color-white);
770
- color: var(--mba-color-grey-400);
771
- border-color: var(--mba-color-grey-100);
772
- cursor: not-allowed;
773
- pointer-events: none;
774
- }
775
- .mba-btn-annuaire {
776
- display: inline-flex;
777
- height: 38px;
778
- padding: var(--mba-space-xs) var(--mba-space-sm);
779
- justify-content: center;
780
- align-items: center;
781
- gap: var(--mba-space-xs);
782
- font-family: var(--mba-font-family-text);
783
- font-size: var(--mba-font-size-xs);
784
- font-weight: var(--mba-font-weight-semibold);
785
- line-height: var(--mba-leading-snug);
786
- text-decoration: none;
787
- border: 1px solid var(--mba-color-grey-100);
788
- border-radius: var(--mba-radius-xs);
789
- cursor: pointer;
790
- transition: all 0.25s ease-in-out;
791
- user-select: none;
792
- white-space: nowrap;
793
- background-color: var(--mba-color-white);
794
- color: var(--mba-color-primary-900);
795
- }
796
- .mba-btn-annuaire:hover:not(:disabled):not(.is-disabled) {
797
- background-color: var(--mba-color-white);
798
- color: var(--mba-color-primary-900);
799
- border-color: var(--mba-color-primary-500);
800
- }
801
- .mba-btn-annuaire:focus {
802
- outline: none;
803
- box-shadow: var(--mba-focus-ring);
804
- }
805
- .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,
806
813
  .mba-btn-annuaire.is-disabled {
807
- background-color: var(--mba-color-white);
808
- color: var(--mba-color-grey-400);
809
- border-color: var(--mba-color-grey-100);
810
- cursor: not-allowed;
811
- pointer-events: none;
812
- }
813
- .mba-btn-pin {
814
- display: inline-flex;
815
- width: 40px;
816
- height: 40px;
817
- padding: 0;
818
- justify-content: center;
819
- align-items: center;
820
- border: 1px solid var(--mba-color-primary-500);
821
- border-radius: 50%;
822
- cursor: pointer;
823
- transition: all 0.25s ease-in-out;
824
- user-select: none;
825
- background-color: var(--mba-color-white);
826
- color: var(--mba-color-primary-500);
827
- }
828
- .mba-btn-pin .mba-icon {
829
- font-size: 20px;
830
- width: 20px;
831
- height: 20px;
832
- }
833
- .mba-btn-pin:focus {
834
- outline: none;
835
- box-shadow: var(--mba-focus-ring);
836
- }
837
- .mba-btn-pin.is-deja-vu {
838
- border-color: var(--mba-color-grey-300);
839
- background-color: var(--mba-color-grey-50);
840
- color: var(--mba-color-grey-300);
841
- }
842
- .mba-btn-pin.is-activated {
843
- border-color: var(--mba-color-primary-500);
844
- background-color: var(--mba-color-primary-500);
845
- color: var(--mba-color-white);
846
- }
847
- .mba-btn-pin.is-activated .mba-icon {
848
- color: var(--mba-color-white);
849
- }
850
- .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,
851
858
  .mba-btn-pin.is-disabled {
852
- opacity: 0.5;
853
- cursor: not-allowed;
854
- pointer-events: none;
855
- }
856
- .mba-btn-icon-only {
857
- display: inline-flex;
858
- width: 24px;
859
- height: 24px;
860
- padding: 0;
861
- justify-content: center;
862
- align-items: center;
863
- border-radius: var(--mba-radius-xs);
864
- cursor: pointer;
865
- transition: all 0.25s ease-in-out;
866
- user-select: none;
867
- border: 1px solid var(--mba-color-black);
868
- background-color: var(--mba-color-white);
869
- color: var(--mba-color-black);
870
- }
871
- .mba-btn-icon-only .mba-icon {
872
- font-size: 16px;
873
- width: 16px;
874
- height: 16px;
875
- }
876
- .mba-btn-icon-only:hover:not(:disabled):not(.is-disabled):not(.is-activated):not(.is-alert) {
877
- border-color: var(--mba-color-primary-500);
878
- color: var(--mba-color-primary-500);
879
- }
880
- .mba-btn-icon-only:focus {
881
- outline: none;
882
- box-shadow: var(--mba-focus-ring);
883
- }
884
- .mba-btn-icon-only.is-activated {
885
- border-color: var(--mba-color-primary-500);
886
- background-color: var(--mba-color-white);
887
- color: var(--mba-color-primary-500);
888
- }
889
- .mba-btn-icon-only.is-activated:hover:not(:disabled):not(.is-disabled) {
890
- border-color: var(--mba-color-primary-500);
891
- color: var(--mba-color-primary-500);
892
- }
893
- .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,
894
901
  .mba-btn-icon-only.is-disabled {
895
- border-color: var(--mba-color-grey-300);
896
- background-color: var(--mba-color-white);
897
- color: var(--mba-color-grey-300);
898
- cursor: not-allowed;
899
- pointer-events: none;
900
- }
901
- .mba-btn-icon-only.is-alert {
902
- border-color: var(--mba-color-error-500);
903
- background-color: var(--mba-color-white);
904
- color: var(--mba-color-error-500);
905
- }
906
- .mba-btn-icon-only.is-alert:hover:not(:disabled):not(.is-disabled) {
907
- border-color: var(--mba-color-error-500);
908
- color: var(--mba-color-error-500);
909
- }
910
- .mba-btn-sm {
911
- height: auto;
912
- padding: var(--mba-space-xxs) var(--mba-space-xs);
913
- gap: var(--mba-space-xs);
914
- font-size: var(--mba-font-size-xxs);
915
- }
916
- .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,
917
924
  .mba-btn-icon-only svg,
918
925
  .mba-btn i,
919
926
  .mba-btn svg {
920
- font-size: 1rem;
921
- width: 1rem;
922
- height: 1rem;
923
- }
924
- .mba-btn .arrow-forward,
927
+ font-size: 1rem;
928
+ width: 1rem;
929
+ height: 1rem;
930
+ }
931
+ .mba-btn .arrow-forward,
925
932
  .mba-btn-secondary .arrow-forward {
926
- vertical-align: middle;
927
- }
928
- .mba-btn-block {
929
- display: block;
930
- width: 100%;
931
- text-align: center;
932
- }
933
- @media (max-width: 767px) {
934
- .mba-btn,
935
- .mba-btn-secondary {
936
- display: flex;
933
+ vertical-align: middle;
934
+ }
935
+ .mba-btn-block {
936
+ display: block;
937
937
  width: 100%;
938
- max-width: 100%;
938
+ text-align: center;
939
+ }
940
+ @media (max-width: 767px) {
941
+ .mba-btn,
942
+ .mba-btn-secondary {
943
+ display: flex;
944
+ width: 100%;
945
+ max-width: 100%;
946
+ }
939
947
  }
940
948
  }
941
- .mba-card {
942
- display: flex;
943
- flex-direction: column;
944
- padding: var(--mba-space-md);
945
- border-radius: var(--mba-radius-sm);
946
- background-color: var(--mba-color-beige);
947
- border: 2px solid transparent;
948
- transition: border-color 0.25s ease-in-out;
949
- cursor: pointer;
950
- }
951
- .mba-card:hover {
952
- border-color: var(--mba-color-primary-500);
953
- }
954
- .mba-card--sm {
955
- padding: var(--mba-space-sm);
956
- }
957
- .mba-card__header {
958
- display: flex;
959
- justify-content: space-between;
960
- align-items: center;
961
- gap: var(--mba-space-sm);
962
- }
963
- .mba-card__content {
964
- flex: 1;
965
- }
966
- .mba-card__title {
967
- font-family: var(--mba-font-family-text);
968
- font-size: var(--mba-font-size-sm);
969
- font-weight: var(--mba-font-weight-bold);
970
- color: var(--mba-color-primary-800);
971
- margin: 0 0 var(--mba-space-xs);
972
- }
973
- .mba-card__text {
974
- font-family: var(--mba-font-family-text);
975
- font-size: var(--mba-font-size-xs);
976
- font-weight: var(--mba-font-weight-regular);
977
- color: var(--mba-color-text);
978
- line-height: var(--mba-leading-snug);
979
- margin: 0;
980
- }
981
- .mba-card__icon {
982
- flex-shrink: 0;
983
- color: var(--mba-color-primary-500);
984
- font-size: 24px;
985
- transition: transform 0.2s ease;
986
- }
987
- .mba-card__icon svg {
988
- width: 24px;
989
- height: 24px;
990
- }
991
- .mba-card:hover .mba-card__icon {
992
- transform: translateX(4px);
993
- }
994
- .mba-card-grid {
995
- display: grid;
996
- gap: var(--mba-space-md);
997
- grid-template-columns: 1fr;
998
- width: 100%;
999
- }
1000
- @media (min-width: 600px) {
1001
- .mba-card-grid {
1002
- grid-template-columns: repeat(2, 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);
960
+ }
961
+ .mba-link:hover {
962
+ color: var(--mba-color-primary-800);
963
+ }
964
+ .mba-link__text {
965
+ text-decoration: none;
966
+ transition: text-decoration var(--mba-transition-base);
967
+ }
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);
1003
979
  }
1004
980
  }
1005
- @media (min-width: 900px) {
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;
991
+ }
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
+ }
1006
1035
  .mba-card-grid {
1007
- grid-template-columns: repeat(3, 1fr);
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;
1008
1059
  }
1009
- }
1010
- .mba-card--white {
1011
- background-color: var(--mba-color-white);
1012
- }
1013
- .mba-card--static {
1014
- cursor: default;
1015
- }
1016
- .mba-card--static:hover {
1017
- border-color: transparent;
1018
- }
1019
- .mba-carousel-card {
1020
- position: relative;
1021
- display: flex;
1022
- flex-direction: column;
1023
- padding: var(--mba-space-md);
1024
- background-color: var(--mba-color-white);
1025
- border-radius: 24px 24px 8px 24px;
1026
- width: 453px;
1027
- height: 278px;
1028
- box-sizing: border-box;
1029
- }
1030
- .mba-carousel-card::before {
1031
- content: "";
1032
- position: absolute;
1033
- inset: 0;
1034
- padding: 1px;
1035
- background: var(--mba-gradient-sunset);
1036
- border-radius: 24px 24px 8px 24px;
1037
- mask: linear-gradient(#fff 0 0) content-box,
1038
- linear-gradient(#fff 0 0);
1039
- mask-composite: exclude;
1040
- -webkit-mask-composite: xor;
1041
- pointer-events: none;
1042
- }
1043
- .mba-carousel-card__title {
1044
- font-family: var(--mba-font-family-text);
1045
- font-size: var(--mba-font-size-sm);
1046
- font-weight: var(--mba-font-weight-bold);
1047
- color: var(--mba-color-primary-800);
1048
- margin: 0;
1049
- }
1050
- .mba-carousel-card__quote {
1051
- flex: 1;
1052
- margin-top: var(--mba-space-sm);
1053
- font-family: var(--mba-font-family-text);
1054
- font-size: var(--mba-font-size-xs);
1055
- font-weight: var(--mba-font-weight-regular);
1056
- color: var(--mba-color-primary-800);
1057
- }
1058
- .mba-carousel-card__author {
1059
- font-family: var(--mba-font-family-text);
1060
- font-size: var(--mba-font-size-xxs);
1061
- font-weight: var(--mba-font-weight-bold);
1062
- color: var(--mba-color-primary-500);
1063
- margin: 0;
1064
- }
1065
- @media (max-width: 767px) {
1066
1060
  .mba-carousel-card {
1067
- width: 286px;
1068
- height: 360px;
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;
1069
1070
  }
1070
- }
1071
- .mba-stats-card {
1072
- position: relative;
1073
- padding: var(--mba-space-md);
1074
- background-color: var(--mba-color-white);
1075
- border-radius: var(--mba-radius-md);
1076
- box-shadow: var(--mba-shadow-xs);
1077
- transition: transform 0.3s ease, box-shadow 0.3s ease;
1078
- }
1079
- .mba-stats-card::before {
1080
- content: "";
1081
- position: absolute;
1082
- inset: 0;
1083
- padding: 1px;
1084
- background: var(--mba-gradient-sunset);
1085
- border-radius: var(--mba-radius-md);
1086
- mask: linear-gradient(#fff 0 0) content-box,
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,
1087
1079
  linear-gradient(#fff 0 0);
1088
- mask-composite: exclude;
1089
- -webkit-mask-composite: xor;
1090
- pointer-events: none;
1091
- }
1092
- .mba-stats-card:hover {
1093
- transform: translateY(-4px);
1094
- box-shadow: var(--mba-shadow-sm);
1095
- }
1096
- .mba-stats-card__value {
1097
- font-family: var(--mba-font-family-text);
1098
- font-size: var(--mba-font-size-xxl);
1099
- font-weight: var(--mba-font-weight-extrabold);
1100
- color: var(--mba-color-primary-500);
1101
- line-height: 1;
1102
- margin: 0;
1103
- }
1104
- .mba-stats-card__title {
1105
- font-family: var(--mba-font-family-text);
1106
- font-size: var(--mba-font-size-xs);
1107
- font-weight: var(--mba-font-weight-bold);
1108
- margin-top: var(--mba-space-sm);
1109
- margin-bottom: 0;
1110
- color: var(--mba-color-text);
1111
- }
1112
- .mba-stats-card__description {
1113
- font-family: var(--mba-font-family-text);
1114
- font-size: var(--mba-font-size-xs);
1115
- font-weight: var(--mba-font-weight-regular);
1116
- color: var(--mba-color-text);
1117
- margin: 0;
1118
- }
1119
- .mba-stats-grid {
1120
- display: grid;
1121
- grid-template-columns: repeat(3, 1fr);
1122
- gap: var(--mba-space-lg);
1123
- width: 100%;
1124
- }
1125
- @media (max-width: 900px) {
1126
- .mba-stats-grid {
1127
- grid-template-columns: repeat(2, 1fr);
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;
1128
1159
  }
1129
- }
1130
- @media (max-width: 600px) {
1131
1160
  .mba-stats-grid {
1132
- grid-template-columns: 1fr;
1161
+ display: grid;
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
+ }
1133
1274
  }
1134
1275
  }
1135
- .mba-arrow {
1136
- display: inline-flex;
1137
- align-items: center;
1138
- justify-content: center;
1139
- padding: var(--mba-space-xxs);
1140
- border-radius: var(--mba-radius-xxl);
1141
- background-color: var(--mba-color-primary-500);
1142
- color: var(--mba-color-white);
1143
- border: none;
1144
- cursor: pointer;
1145
- transition: background-color 0.2s ease;
1146
- }
1147
- .mba-arrow:hover {
1148
- background-color: var(--mba-color-primary-800);
1149
- }
1150
- .mba-arrow:focus-visible {
1151
- outline: none;
1152
- box-shadow: var(--mba-focus-ring);
1153
- }
1154
- .mba-arrow:disabled,
1155
- .mba-arrow.is-disabled {
1156
- background-color: var(--mba-color-grey-300);
1157
- cursor: not-allowed;
1158
- }
1159
- .mba-arrow:disabled:hover,
1160
- .mba-arrow.is-disabled:hover {
1161
- background-color: var(--mba-color-grey-300);
1162
- }
1163
- .mba-arrow .material-symbols-rounded {
1164
- font-size: 24px;
1165
- }
1166
- .mba-radio {
1167
- position: relative;
1168
- display: inline-flex;
1169
- align-items: center;
1170
- justify-content: center;
1171
- width: 16px;
1172
- height: 16px;
1173
- cursor: pointer;
1174
- }
1175
- .mba-radio input {
1176
- position: absolute;
1177
- opacity: 0;
1178
- width: 100%;
1179
- height: 100%;
1180
- margin: 0;
1181
- cursor: pointer;
1182
- }
1183
- .mba-radio .mba-radio__control {
1184
- position: relative;
1185
- width: 16px;
1186
- height: 16px;
1187
- border-radius: 8px;
1188
- border: 1px solid var(--mba-color-primary-900);
1189
- background-color: var(--mba-color-white);
1190
- transition: all 0.2s ease;
1191
- }
1192
- .mba-radio .mba-radio__control::after {
1193
- content: "";
1194
- position: absolute;
1195
- top: 50%;
1196
- left: 50%;
1197
- transform: translate(-50%, -50%) scale(0);
1198
- width: 12px;
1199
- height: 12px;
1200
- border-radius: 50%;
1201
- background-color: var(--mba-color-primary-400);
1202
- transition: transform 0.2s ease;
1203
- }
1204
- .mba-radio:hover:not(:has(input:disabled)) .mba-radio__control::after {
1205
- transform: translate(-50%, -50%) scale(1);
1206
- width: 10px;
1207
- height: 10px;
1208
- }
1209
- .mba-radio input:checked + .mba-radio__control::after {
1210
- transform: translate(-50%, -50%) scale(1);
1211
- width: 12px;
1212
- height: 12px;
1213
- }
1214
- .mba-radio input:focus + .mba-radio__control {
1215
- box-shadow: var(--mba-focus-ring);
1216
- }
1217
- .mba-radio input:disabled + .mba-radio__control {
1218
- border-color: var(--mba-color-grey-300);
1219
- background-color: var(--mba-color-grey-50);
1220
- cursor: not-allowed;
1221
- }
1222
- .mba-radio input:disabled + .mba-radio__control::after {
1223
- background-color: var(--mba-color-grey-300);
1224
- }
1225
- .mba-radio:has(input:disabled) {
1226
- cursor: not-allowed;
1227
- }
1228
- .mba-radio--pro .mba-radio__control {
1229
- border-color: var(--mba-color-primary-pro-800);
1230
- }
1231
- .mba-radio--pro .mba-radio__control::after {
1232
- background-color: var(--mba-color-primary-pro-400);
1233
- }
1234
- .mba-checkbox {
1235
- position: relative;
1236
- display: inline-flex;
1237
- align-items: center;
1238
- justify-content: center;
1239
- width: 16px;
1240
- height: 16px;
1241
- cursor: pointer;
1242
- }
1243
- .mba-checkbox input {
1244
- position: absolute;
1245
- opacity: 0;
1246
- width: 100%;
1247
- height: 100%;
1248
- margin: 0;
1249
- cursor: pointer;
1250
- }
1251
- .mba-checkbox .mba-checkbox__control {
1252
- position: relative;
1253
- width: 16px;
1254
- height: 16px;
1255
- border-radius: var(--mba-radius-2xs);
1256
- border: 1px solid var(--mba-color-primary-900);
1257
- background-color: var(--mba-color-white);
1258
- transition: all 0.2s ease;
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,
1297
+ .mba-arrow.is-disabled {
1298
+ background-color: var(--mba-color-grey-300);
1299
+ cursor: not-allowed;
1300
+ }
1301
+ .mba-arrow:disabled:hover,
1302
+ .mba-arrow.is-disabled:hover {
1303
+ background-color: var(--mba-color-grey-300);
1304
+ }
1305
+ .mba-arrow .material-symbols-rounded {
1306
+ font-size: 24px;
1307
+ }
1259
1308
  }
1260
- .mba-checkbox .mba-checkbox__control::after {
1261
- content: "";
1262
- position: absolute;
1263
- top: 50%;
1264
- left: 50%;
1265
- transform: translate(-50%, -50%) scale(0);
1266
- width: 12px;
1267
- height: 12px;
1268
- border-radius: 2px;
1269
- background-color: var(--mba-color-primary-400);
1270
- transition: transform 0.2s ease;
1271
- }
1272
- .mba-checkbox:hover:not(:has(input:disabled)) .mba-checkbox__control::after {
1273
- transform: translate(-50%, -50%) scale(1);
1274
- width: 10px;
1275
- height: 10px;
1276
- }
1277
- .mba-checkbox input:checked + .mba-checkbox__control::after {
1278
- transform: translate(-50%, -50%) scale(1);
1279
- width: 12px;
1280
- height: 12px;
1281
- }
1282
- .mba-checkbox input:focus + .mba-checkbox__control {
1283
- box-shadow: var(--mba-focus-ring);
1284
- }
1285
- .mba-checkbox input:disabled + .mba-checkbox__control {
1286
- border-color: var(--mba-color-grey-300);
1287
- background-color: var(--mba-color-grey-50);
1288
- cursor: not-allowed;
1289
- }
1290
- .mba-checkbox input:disabled + .mba-checkbox__control::after {
1291
- background-color: var(--mba-color-grey-300);
1292
- }
1293
- .mba-checkbox:has(input:disabled) {
1294
- cursor: not-allowed;
1295
- }
1296
- .mba-checkbox--pro .mba-checkbox__control {
1297
- border-color: var(--mba-color-primary-pro-800);
1298
- }
1299
- .mba-checkbox--pro .mba-checkbox__control::after {
1300
- background-color: var(--mba-color-primary-pro-400);
1301
- }
1302
- .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,
1303
1447
  .mba-checkbox-label {
1304
- display: inline-flex;
1305
- align-items: center;
1306
- gap: var(--mba-space-xs);
1307
- cursor: pointer;
1308
- font-family: var(--mba-font-family-text);
1309
- font-size: var(--mba-font-size-xs);
1310
- color: var(--mba-color-black);
1311
- }
1312
- .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),
1313
1457
  .mba-checkbox-label:has(input:disabled) {
1314
- cursor: not-allowed;
1315
- color: var(--mba-color-grey-400);
1316
- }
1317
- .mba-pagination {
1318
- display: inline-flex;
1319
- align-items: center;
1320
- gap: var(--mba-space-sm);
1321
- padding: 0;
1322
- margin: 0;
1323
- list-style: none;
1458
+ cursor: not-allowed;
1459
+ color: var(--mba-color-grey-400);
1460
+ }
1324
1461
  }
1325
- .mba-pagination-item {
1326
- display: inline-flex;
1327
- width: 32px;
1328
- height: 32px;
1329
- padding: 0;
1330
- justify-content: center;
1331
- align-items: center;
1332
- font-family: var(--mba-font-family-text);
1333
- font-size: var(--mba-font-size-xs);
1334
- font-weight: var(--mba-font-weight-semibold);
1335
- font-size: 18px;
1336
- line-height: var(--mba-leading-snug);
1337
- text-decoration: none;
1338
- border: none;
1339
- border-radius: var(--mba-radius-xs);
1340
- cursor: pointer;
1341
- transition: all 0.25s ease-in-out;
1342
- user-select: none;
1343
- background-color: var(--mba-color-white);
1344
- color: var(--mba-color-black);
1345
- }
1346
- .mba-pagination-item:hover:not(:disabled):not(.is-disabled):not(.is-active) {
1347
- background-color: var(--mba-color-grey-50);
1348
- color: var(--mba-color-black);
1349
- }
1350
- .mba-pagination-item:focus {
1351
- outline: none;
1352
- box-shadow: var(--mba-focus-ring);
1353
- }
1354
- .mba-pagination-item.is-active {
1355
- background-color: var(--mba-color-secondary-500);
1356
- border-radius: 50%;
1357
- color: var(--mba-color-black);
1358
- cursor: default;
1359
- }
1360
- .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,
1361
1506
  .mba-pagination-item.is-disabled {
1362
- background-color: var(--mba-color-white);
1363
- color: var(--mba-color-grey-300);
1364
- cursor: not-allowed;
1365
- pointer-events: none;
1366
- }
1367
- .mba-pagination-ellipsis {
1368
- display: inline-flex;
1369
- width: 32px;
1370
- height: 32px;
1371
- padding: 0;
1372
- justify-content: center;
1373
- align-items: center;
1374
- font-family: var(--mba-font-family-text);
1375
- font-size: var(--mba-font-size-xs);
1376
- font-weight: var(--mba-font-weight-semibold);
1377
- line-height: var(--mba-leading-snug);
1378
- color: var(--mba-color-grey-400);
1379
- user-select: none;
1380
- pointer-events: none;
1381
- }
1382
- .mba-pagination-arrow {
1383
- display: inline-flex;
1384
- width: 32px;
1385
- height: 32px;
1386
- padding: 0;
1387
- justify-content: center;
1388
- align-items: center;
1389
- border: none;
1390
- border-radius: var(--mba-radius-xs);
1391
- cursor: pointer;
1392
- transition: all 0.25s ease-in-out;
1393
- user-select: none;
1394
- background-color: var(--mba-color-white);
1395
- color: var(--mba-color-black);
1396
- }
1397
- .mba-pagination-arrow .mba-icon {
1398
- font-size: 20px;
1399
- width: 20px;
1400
- height: 20px;
1401
- }
1402
- .mba-pagination-arrow:hover:not(:disabled):not(.is-disabled) {
1403
- background-color: var(--mba-color-grey-50);
1404
- color: var(--mba-color-black);
1405
- }
1406
- .mba-pagination-arrow:focus {
1407
- outline: none;
1408
- box-shadow: var(--mba-focus-ring);
1409
- }
1410
- .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,
1411
1556
  .mba-pagination-arrow.is-disabled {
1412
- background-color: var(--mba-color-white);
1413
- color: var(--mba-color-grey-300);
1414
- cursor: not-allowed;
1415
- pointer-events: none;
1416
- }
1417
- .mba-label {
1418
- display: flex;
1419
- align-items: center;
1420
- gap: var(--mba-space-xxs);
1421
- font-family: var(--mba-font-family-text);
1422
- font-size: var(--mba-font-size-xxs);
1423
- font-weight: var(--mba-font-weight-regular);
1424
- line-height: normal;
1425
- color: var(--mba-color-grey-800);
1426
- }
1427
- .mba-label__required {
1428
- color: var(--mba-color-error-500);
1429
- font-size: var(--mba-font-size-xxs);
1430
- }
1431
- .mba-label__icon {
1432
- font-size: 16px;
1433
- color: var(--mba-color-grey-400);
1434
- }
1435
- .mba-textarea {
1436
- display: block;
1437
- width: 100%;
1438
- padding: var(--mba-space-xs);
1439
- border-radius: var(--mba-radius-xs);
1440
- border: 1px solid var(--mba-color-grey-100);
1441
- background-color: var(--mba-color-white);
1442
- font-family: var(--mba-font-family-text);
1443
- font-size: var(--mba-font-size-xxs);
1444
- font-weight: var(--mba-font-weight-regular);
1445
- color: var(--mba-color-black);
1446
- resize: vertical;
1447
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
1448
- }
1449
- .mba-textarea::placeholder {
1450
- color: var(--mba-color-grey-400);
1451
- }
1452
- .mba-textarea:focus {
1453
- outline: none;
1454
- border-color: var(--mba-color-info-400);
1455
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1456
- }
1457
- .mba-textarea:focus::placeholder {
1458
- color: var(--mba-color-black);
1459
- }
1460
- .mba-textarea:disabled {
1461
- background-color: var(--mba-color-grey-50);
1462
- border-color: var(--mba-color-grey-100);
1463
- cursor: not-allowed;
1464
- }
1465
- .mba-textarea:disabled::placeholder {
1466
- color: var(--mba-color-grey-400);
1467
- }
1468
- .mba-textarea:hover:not(:focus):not(:disabled):not(.mba-textarea--error):not(.mba-textarea--valid) {
1469
- border-color: var(--mba-color-info-400);
1470
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1471
- }
1472
- .mba-textarea--error {
1473
- border-color: var(--mba-color-error-500);
1474
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1475
- }
1476
- .mba-textarea--error:focus {
1477
- border-color: var(--mba-color-error-500);
1478
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1479
- }
1480
- .mba-textarea--valid {
1481
- border-color: var(--mba-color-success-500);
1482
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
1483
- }
1484
- .mba-textarea--valid:focus {
1485
- border-color: var(--mba-color-success-500);
1486
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
1487
- }
1488
- .mba-input {
1489
- display: block;
1490
- width: 100%;
1491
- padding: var(--mba-space-xs) var(--mba-space-sm);
1492
- border-radius: var(--mba-radius-xs);
1493
- border: 1px solid var(--mba-color-grey-100);
1494
- background-color: var(--mba-color-white);
1495
- font-family: var(--mba-font-family-text);
1496
- font-size: var(--mba-font-size-xxs);
1497
- font-weight: var(--mba-font-weight-regular);
1498
- color: var(--mba-color-black);
1499
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
1500
- }
1501
- .mba-input::placeholder {
1502
- color: var(--mba-color-grey-400);
1503
- }
1504
- .mba-input:hover:not(:focus):not(:disabled):not(.mba-input--error):not(.mba-input--valid) {
1505
- border-color: var(--mba-color-info-400);
1506
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1507
- }
1508
- .mba-input:focus {
1509
- outline: none;
1510
- border-color: var(--mba-color-info-400);
1511
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1512
- }
1513
- .mba-input:disabled {
1514
- background-color: var(--mba-color-grey-50);
1515
- border-color: var(--mba-color-grey-100);
1516
- cursor: not-allowed;
1517
- }
1518
- .mba-input:disabled::placeholder {
1519
- color: var(--mba-color-grey-400);
1520
- }
1521
- .mba-input--error {
1522
- border-color: var(--mba-color-error-500);
1523
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1524
- }
1525
- .mba-input--error:focus {
1526
- border-color: var(--mba-color-error-500);
1527
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1528
- }
1529
- .mba-input--valid {
1530
- border-color: var(--mba-color-success-500);
1531
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
1532
- }
1533
- .mba-input--valid:focus {
1534
- border-color: var(--mba-color-success-500);
1535
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
1536
- }
1537
- .mba-feedback {
1538
- font-family: var(--mba-font-family-text);
1539
- font-size: 12px;
1540
- font-weight: var(--mba-font-weight-regular);
1541
- }
1542
- .mba-feedback--error {
1543
- color: var(--mba-color-error-500);
1544
- }
1545
- .mba-feedback--valid {
1546
- color: var(--mba-color-success-500);
1547
- }
1548
- .mba-dropdown {
1549
- position: relative;
1550
- display: inline-block;
1551
- width: 100%;
1552
- }
1553
- .mba-dropdown__trigger {
1554
- display: flex;
1555
- align-items: center;
1556
- justify-content: space-between;
1557
- width: 100%;
1558
- padding: var(--mba-space-xs) var(--mba-space-sm);
1559
- border-radius: var(--mba-radius-xs);
1560
- border: 1px solid var(--mba-color-grey-100);
1561
- background-color: var(--mba-color-white);
1562
- font-family: var(--mba-font-family-text);
1563
- font-size: var(--mba-font-size-xs);
1564
- font-weight: var(--mba-font-weight-regular);
1565
- color: var(--mba-color-black);
1566
- cursor: pointer;
1567
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
1568
- }
1569
- .mba-dropdown__trigger--placeholder {
1570
- color: var(--mba-color-grey-400);
1571
- }
1572
- .mba-dropdown:not(.mba-dropdown--error):not(.mba-dropdown--valid) .mba-dropdown__trigger:hover {
1573
- border-color: var(--mba-color-info-400);
1574
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1575
- }
1576
- .mba-dropdown__trigger:focus {
1577
- outline: none;
1578
- border-color: var(--mba-color-info-400);
1579
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1580
- }
1581
- .mba-dropdown__trigger:disabled {
1582
- background-color: var(--mba-color-grey-50);
1583
- border-color: var(--mba-color-grey-100);
1584
- cursor: not-allowed;
1585
- color: var(--mba-color-grey-400);
1586
- }
1587
- .mba-dropdown__chevron {
1588
- font-size: 20px;
1589
- color: var(--mba-color-grey-400);
1590
- transition: transform 0.2s ease;
1591
- }
1592
- .mba-dropdown--open .mba-dropdown__chevron {
1593
- transform: rotate(180deg);
1594
- }
1595
- .mba-dropdown--error .mba-dropdown__trigger {
1596
- border-color: var(--mba-color-error-500);
1597
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1598
- }
1599
- .mba-dropdown--error .mba-dropdown__trigger:focus {
1600
- border-color: var(--mba-color-error-500);
1601
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1602
- }
1603
- .mba-dropdown--valid .mba-dropdown__trigger {
1604
- border-color: var(--mba-color-success-500);
1605
- box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
1606
- }
1607
- .mba-dropdown--valid .mba-dropdown__trigger:focus {
1608
- border-color: var(--mba-color-success-500);
1609
- box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
1610
- }
1611
- .mba-dropdown__panel {
1612
- position: absolute;
1613
- top: calc(100% + 4px);
1614
- left: 0;
1615
- right: 0;
1616
- display: none;
1617
- flex-direction: column;
1618
- gap: 10px;
1619
- padding: var(--mba-space-xs);
1620
- border-radius: var(--mba-radius-2xs);
1621
- background-color: var(--mba-color-white);
1622
- box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04), 1px 2px 16px 0 rgba(28, 28, 29, 0.06);
1623
- max-height: 200px;
1624
- overflow-y: auto;
1625
- z-index: 10;
1626
- }
1627
- .mba-dropdown--open .mba-dropdown__panel {
1628
- display: flex;
1629
- }
1630
- .mba-dropdown__panel::-webkit-scrollbar {
1631
- width: 6px;
1632
- }
1633
- .mba-dropdown__panel::-webkit-scrollbar-track {
1634
- background: transparent;
1635
- }
1636
- .mba-dropdown__panel::-webkit-scrollbar-thumb {
1637
- background-color: var(--mba-color-primary-pro-800);
1638
- border-radius: 3px;
1639
- }
1640
- .mba-dropdown__option {
1641
- padding: var(--mba-space-xs);
1642
- border-radius: var(--mba-radius-xs);
1643
- font-family: var(--mba-font-family-text);
1644
- font-size: var(--mba-font-size-xs);
1645
- font-weight: var(--mba-font-weight-regular);
1646
- color: var(--mba-color-black);
1647
- cursor: pointer;
1648
- transition: background-color 0.15s ease;
1649
- }
1650
- .mba-dropdown__option:hover {
1651
- background-color: var(--mba-color-grey-50);
1652
- }
1653
- .mba-dropdown__option--selected {
1654
- border: 1px solid var(--mba-color-primary-400);
1655
- background-color: var(--mba-color-white);
1656
- }
1657
- .mba-dropdown--pro .mba-dropdown__option--selected {
1658
- border-color: var(--mba-color-primary-pro-400);
1659
- }
1660
- .mba-toggle {
1661
- position: relative;
1662
- display: inline-block;
1663
- width: 42px;
1664
- height: 24px;
1665
- }
1666
- .mba-toggle input {
1667
- opacity: 0;
1668
- width: 0;
1669
- height: 0;
1670
- }
1671
- .mba-toggle__slider {
1672
- position: absolute;
1673
- cursor: pointer;
1674
- top: 0;
1675
- left: 0;
1676
- right: 0;
1677
- bottom: 0;
1678
- background-color: var(--mba-color-grey-300);
1679
- transition: all 0.3s ease;
1680
- border-radius: 32px;
1681
- }
1682
- .mba-toggle__slider::before {
1683
- position: absolute;
1684
- content: "";
1685
- height: 20px;
1686
- width: 20px;
1687
- left: 2px;
1688
- top: 2px;
1689
- background-color: var(--mba-color-white);
1690
- transition: all 0.3s ease;
1691
- border-radius: 50%;
1692
- }
1693
- .mba-toggle input:checked + .mba-toggle__slider {
1694
- background-color: var(--mba-color-secondary-500);
1695
- }
1696
- .mba-toggle input:checked + .mba-toggle__slider::before {
1697
- transform: translateX(18px);
1698
- }
1699
- .mba-toggle input:focus + .mba-toggle__slider {
1700
- box-shadow: var(--mba-focus-ring);
1701
- }
1702
- .mba-toggle input:disabled + .mba-toggle__slider {
1703
- opacity: 0.5;
1704
- cursor: not-allowed;
1705
- }
1706
- .mba-input-icon {
1707
- display: flex;
1708
- align-items: center;
1709
- width: 100%;
1710
- padding: var(--mba-space-xs) var(--mba-space-sm);
1711
- border-radius: var(--mba-radius-xs);
1712
- border: 1px solid var(--mba-color-grey-100);
1713
- background-color: var(--mba-color-white);
1714
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
1715
- }
1716
- .mba-input-icon input {
1717
- flex: 1;
1718
- border: none;
1719
- background: transparent;
1720
- font-family: var(--mba-font-family-text);
1721
- font-size: var(--mba-font-size-xxs);
1722
- font-weight: var(--mba-font-weight-regular);
1723
- color: var(--mba-color-black);
1724
- outline: none;
1725
- }
1726
- .mba-input-icon input::placeholder {
1727
- color: var(--mba-color-grey-400);
1728
- }
1729
- .mba-input-icon__icon {
1730
- font-size: 16px;
1731
- color: var(--mba-color-grey-400);
1732
- margin-left: var(--mba-space-xs);
1733
- }
1734
- button.mba-input-icon__icon {
1735
- background: none;
1736
- border: none;
1737
- padding: 0;
1738
- cursor: pointer;
1739
- transition: color 0.2s ease;
1740
- }
1741
- button.mba-input-icon__icon:hover {
1742
- color: var(--mba-color-primary-500);
1743
- }
1744
- .mba-input-icon:hover:not(:focus-within):not(.mba-input-icon--disabled):not(.mba-input-icon--error) {
1745
- border-color: var(--mba-color-info-400);
1746
- box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
1747
- }
1748
- .mba-input-icon:focus-within {
1749
- border-color: var(--mba-color-info-400);
1750
- box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
1751
- }
1752
- .mba-input-icon--disabled {
1753
- background-color: var(--mba-color-grey-50);
1754
- cursor: not-allowed;
1755
- }
1756
- .mba-input-icon--disabled input {
1757
- cursor: not-allowed;
1758
- color: var(--mba-color-grey-400);
1759
- }
1760
- .mba-input-icon--error {
1761
- border-color: var(--mba-color-error-500);
1762
- box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
1763
- }
1764
- .mba-input-icon--error:focus-within {
1765
- border-color: var(--mba-color-error-500);
1766
- box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
1767
- }
1768
- .mba-input-icon--error .mba-input-icon__icon {
1769
- color: var(--mba-color-error-500);
1770
- }
1771
- .mba-input-group {
1772
- display: flex;
1773
- align-items: stretch;
1774
- gap: var(--mba-space-xxs);
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
+ }
1775
1591
  }
1776
- .mba-input-group > .mba-input,
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,
1777
1953
  .mba-input-group > .mba-input-icon {
1778
- flex: 1;
1779
- }
1780
- .mba-form-group {
1781
- display: flex;
1782
- flex-direction: column;
1783
- gap: var(--mba-space-xxs);
1784
- }
1785
- .mba-wave {
1786
- display: block;
1787
- width: 100%;
1788
- height: var(--mba-wave-height);
1789
- background-color: var(--mba-color-pastel-lavender);
1790
- -webkit-mask-image: var(--mba-wave-dip-up-mask);
1791
- -webkit-mask-size: 100% 100%;
1792
- -webkit-mask-repeat: no-repeat;
1793
- mask-image: var(--mba-wave-dip-up-mask);
1794
- mask-size: 100% 100%;
1795
- mask-repeat: no-repeat;
1796
- }
1797
- .mba-wave--top {
1798
- -webkit-mask-image: var(--mba-wave-dip-down-mask);
1799
- mask-image: var(--mba-wave-dip-down-mask);
1800
- }
1801
- .mba-wave--bottom {
1802
- -webkit-mask-image: var(--mba-wave-dip-up-mask);
1803
- mask-image: var(--mba-wave-dip-up-mask);
1804
- }
1805
- .mba-wave--sm {
1806
- height: var(--mba-wave-sm-height);
1807
- -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
1808
- mask-image: var(--mba-wave-sm-dip-up-mask);
1809
- }
1810
- .mba-wave--sm.mba-wave--top {
1811
- -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
1812
- mask-image: var(--mba-wave-sm-dip-down-mask);
1813
- }
1814
- .mba-wave--lavender {
1815
- background-color: var(--mba-color-pastel-lavender);
1816
- }
1817
- .mba-wave--white {
1818
- background-color: var(--mba-color-white);
1819
- }
1820
- .mba-wave--beige {
1821
- background-color: var(--mba-color-beige);
1822
- }
1823
- .mba-wave--primary-50 {
1824
- background-color: var(--mba-color-primary-50);
1825
- }
1826
- .mba-section {
1827
- position: relative;
1828
- width: 100%;
1829
- }
1830
- .mba-section__content {
1831
- position: relative;
1832
- z-index: 1;
1833
- max-width: 1280px;
1834
- margin: 0 auto;
1835
- padding: var(--mba-space-xl) var(--mba-space-md);
1836
- }
1837
- @media (min-width: 768px) {
1838
- .mba-section__content {
1839
- padding: var(--mba-space-xxl) var(--mba-space-lg);
1954
+ flex: 1;
1955
+ }
1956
+ .mba-form-group {
1957
+ display: flex;
1958
+ flex-direction: column;
1959
+ gap: var(--mba-space-xxs);
1840
1960
  }
1841
1961
  }
1842
- .mba-section--lavender {
1843
- background-color: var(--mba-color-pastel-lavender);
1844
- }
1845
- .mba-section--beige {
1846
- background-color: var(--mba-color-beige);
1847
- }
1848
- .mba-section--primary-50 {
1849
- background-color: var(--mba-color-primary-50);
1850
- }
1851
- .mba-section--white {
1852
- background-color: var(--mba-color-white);
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
+ }
1853
2004
  }
1854
- .mba-section--wave-top::before,
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,
2018
+ .mba-section--wave-inset.mba-section--wave-both .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,
2022
+ .mba-section--wave-inset.mba-section--wave-both .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,
2026
+ .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .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,
2030
+ .mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
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,
1855
2046
  .mba-section--wave-both::before {
1856
- content: "";
1857
- position: absolute;
1858
- left: 0;
1859
- right: 0;
1860
- top: 0;
1861
- height: var(--mba-wave-height);
1862
- background-color: var(--mba-color-white);
1863
- -webkit-mask-image: var(--mba-wave-dip-down-mask);
1864
- -webkit-mask-size: 100% 100%;
1865
- -webkit-mask-repeat: no-repeat;
1866
- mask-image: var(--mba-wave-dip-down-mask);
1867
- mask-size: 100% 100%;
1868
- mask-repeat: no-repeat;
1869
- pointer-events: none;
1870
- }
1871
- .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,
1872
2063
  .mba-section--wave-both::after {
1873
- content: "";
1874
- position: absolute;
1875
- left: 0;
1876
- right: 0;
1877
- bottom: 0;
1878
- height: var(--mba-wave-height);
1879
- background-color: var(--mba-color-white);
1880
- -webkit-mask-image: var(--mba-wave-dip-up-mask);
1881
- -webkit-mask-size: 100% 100%;
1882
- -webkit-mask-repeat: no-repeat;
1883
- mask-image: var(--mba-wave-dip-up-mask);
1884
- mask-size: 100% 100%;
1885
- mask-repeat: no-repeat;
1886
- pointer-events: none;
1887
- }
1888
- .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,
1889
2080
  .mba-section--wave-sm.mba-section--wave-both::before {
1890
- height: var(--mba-wave-sm-height);
1891
- -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
1892
- mask-image: var(--mba-wave-sm-dip-down-mask);
1893
- }
1894
- .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,
1895
2086
  .mba-section--wave-sm.mba-section--wave-both::after {
1896
- height: var(--mba-wave-sm-height);
1897
- -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
1898
- mask-image: var(--mba-wave-sm-dip-up-mask);
1899
- }
1900
- .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,
1901
2092
  .mba-section--wave-lavender::after {
1902
- background-color: var(--mba-color-pastel-lavender);
1903
- }
1904
- .mba-section--wave-beige::before,
2093
+ background-color: var(--mba-color-pastel-lavender);
2094
+ }
2095
+ .mba-section--wave-beige::before,
1905
2096
  .mba-section--wave-beige::after {
1906
- background-color: var(--mba-color-beige);
1907
- }
1908
- .mba-section--wave-primary-50::before,
2097
+ background-color: var(--mba-color-beige);
2098
+ }
2099
+ .mba-section--wave-primary-50::before,
1909
2100
  .mba-section--wave-primary-50::after {
1910
- background-color: var(--mba-color-primary-50);
1911
- }
1912
- .mba-footer {
1913
- width: 100%;
1914
- background-color: var(--mba-color-white);
1915
- }
1916
- .mba-footer__main {
1917
- max-width: 1120px;
1918
- margin: 0 auto;
1919
- padding: var(--mba-space-xl) var(--mba-space-sm) var(--mba-space-sm);
1920
- display: flex;
1921
- flex-direction: column;
1922
- gap: var(--mba-space-lg);
1923
- }
1924
- @media (min-width: 768px) {
1925
- .mba-footer__main {
1926
- padding: var(--mba-space-xl) 0;
2101
+ background-color: var(--mba-color-primary-50);
1927
2102
  }
1928
2103
  }
1929
- @media (min-width: 1024px) {
2104
+ @layer components {
2105
+ .mba-footer {
2106
+ width: 100%;
2107
+ background-color: var(--mba-color-white);
2108
+ }
1930
2109
  .mba-footer__main {
1931
- flex-direction: row;
1932
- flex-wrap: wrap;
1933
- justify-content: space-between;
1934
- 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);
1935
2134
  }
1936
- }
1937
- .mba-footer__brand {
1938
- display: flex;
1939
- flex-direction: column;
1940
- gap: var(--mba-space-sm);
1941
- }
1942
- .mba-footer__right {
1943
- display: flex;
1944
- flex-direction: column;
1945
- gap: var(--mba-space-lg);
1946
- }
1947
- @media (min-width: 1024px) {
1948
2135
  .mba-footer__right {
1949
- 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;
1950
2168
  }
1951
- }
1952
- .mba-footer__logo {
1953
- height: auto;
1954
- max-height: 32px;
1955
- }
1956
- .mba-footer__mission {
1957
- font-family: var(--mba-font-family-text);
1958
- font-size: var(--mba-font-size-xxs);
1959
- line-height: var(--mba-line-height-relaxed);
1960
- color: var(--mba-color-text);
1961
- margin: 0;
1962
- max-width: 300px;
1963
- }
1964
- .mba-footer__contact {
1965
- font-family: var(--mba-font-family-text);
1966
- font-size: var(--mba-font-size-xxs);
1967
- font-weight: 600;
1968
- color: var(--mba-color-primary-500);
1969
- text-decoration: none;
1970
- transition: color var(--mba-transition-fast);
1971
- }
1972
- .mba-footer__contact:hover {
1973
- color: var(--mba-color-primary-800);
1974
- text-decoration: underline;
1975
- }
1976
- .mba-footer__nav {
1977
- display: flex;
1978
- flex-direction: column;
1979
- gap: var(--mba-space-lg);
1980
- }
1981
- @media (min-width: 768px) {
1982
2169
  .mba-footer__nav {
1983
- flex-direction: row;
1984
- gap: var(--mba-space-xxl);
2170
+ display: flex;
2171
+ flex-direction: column;
2172
+ gap: var(--mba-space-lg);
1985
2173
  }
1986
- }
1987
- .mba-footer__nav-group {
1988
- display: flex;
1989
- flex-direction: column;
1990
- gap: var(--mba-space-sm);
1991
- }
1992
- .mba-footer__nav-title {
1993
- display: none;
1994
- font-family: var(--mba-font-family-text);
1995
- font-size: var(--mba-font-size-xxs);
1996
- font-weight: 700;
1997
- color: var(--mba-color-primary-900);
1998
- margin: 0;
1999
- margin-bottom: var(--mba-space-xs);
2000
- text-decoration: underline;
2001
- text-decoration-color: var(--mba-color-primary-100);
2002
- text-decoration-thickness: 2px;
2003
- text-underline-offset: var(--mba-space-xs);
2004
- }
2005
- .mba-footer__nav-list {
2006
- list-style: none;
2007
- margin: 0;
2008
- padding: 0;
2009
- display: flex;
2010
- flex-direction: column;
2011
- align-items: flex-start;
2012
- gap: var(--mba-space-sm);
2013
- }
2014
- .mba-footer__nav-link {
2015
- font-family: var(--mba-font-family-text);
2016
- font-size: var(--mba-font-size-xxs);
2017
- font-weight: 600;
2018
- color: var(--mba-color-primary-500);
2019
- text-decoration: none;
2020
- transition: color var(--mba-transition-fast);
2021
- }
2022
- .mba-footer__nav-link:hover {
2023
- color: var(--mba-color-primary-800);
2024
- text-decoration: underline;
2025
- }
2026
- .mba-footer__nav-toggle {
2027
- display: flex;
2028
- width: 100%;
2029
- align-items: center;
2030
- justify-content: space-between;
2031
- padding: 0;
2032
- padding-bottom: var(--mba-space-xs);
2033
- border: none;
2034
- border-bottom: 2px solid var(--mba-color-primary-100);
2035
- background: none;
2036
- cursor: pointer;
2037
- font-family: var(--mba-font-family-text);
2038
- font-size: var(--mba-font-size-xxs);
2039
- font-weight: 700;
2040
- color: var(--mba-color-text);
2041
- }
2042
- .mba-footer__nav-toggle-icon {
2043
- font-size: 20px;
2044
- transition: transform var(--mba-transition-fast);
2045
- }
2046
- .mba-footer__nav-toggle[aria-expanded="true"] .mba-footer__nav-toggle-icon {
2047
- transform: rotate(180deg);
2048
- }
2049
- .mba-footer__nav-content {
2050
- display: none;
2051
- }
2052
- .mba-footer__nav-content[data-expanded="true"] {
2053
- display: block;
2054
- }
2055
- @media (min-width: 768px) {
2056
- .mba-footer__nav-toggle {
2057
- 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);
2058
2184
  }
2059
2185
  .mba-footer__nav-title {
2060
- 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);
2061
2241
  }
2062
2242
  .mba-footer__nav-content {
2243
+ display: none;
2244
+ }
2245
+ .mba-footer__nav-content[data-expanded="true"] {
2063
2246
  display: block;
2064
- padding-top: 0;
2065
2247
  }
2066
- }
2067
- .mba-footer__social {
2068
- display: flex;
2069
- gap: var(--mba-space-sm);
2070
- align-items: center;
2071
- }
2072
- .mba-footer__social-link {
2073
- display: flex;
2074
- align-items: center;
2075
- justify-content: center;
2076
- width: 24px;
2077
- height: 24px;
2078
- color: var(--mba-color-primary-900);
2079
- transition: color var(--mba-transition-fast);
2080
- }
2081
- .mba-footer__social-link:hover {
2082
- color: var(--mba-color-primary-500);
2083
- }
2084
- .mba-footer__social-icon {
2085
- width: 100%;
2086
- height: 100%;
2087
- fill: currentColor;
2088
- }
2089
- .mba-footer__bottom {
2090
- background-color: var(--mba-color-pastel-lavender);
2091
- }
2092
- .mba-footer__legal {
2093
- max-width: 1120px;
2094
- margin: 0 auto;
2095
- padding: var(--mba-space-md) var(--mba-space-sm);
2096
- display: flex;
2097
- flex-direction: column;
2098
- gap: var(--mba-space-sm);
2099
- }
2100
- @media (min-width: 768px) {
2101
- .mba-footer__legal {
2102
- padding: var(--mba-space-md) 0;
2103
- flex-direction: row;
2104
- 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);
2105
2263
  align-items: center;
2106
2264
  }
2107
- }
2108
- .mba-footer__copyright {
2109
- font-family: var(--mba-font-family-text);
2110
- font-size: var(--mba-font-size-xxs);
2111
- color: var(--mba-color-primary-900);
2112
- margin: 0;
2113
- padding-top: var(--mba-space-sm);
2114
- border-top: 1px solid var(--mba-color-primary-400);
2115
- order: 2;
2116
- }
2117
- @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
+ }
2118
2301
  .mba-footer__copyright {
2119
- padding-top: 0;
2120
- border-top: none;
2121
- 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
+ }
2122
2316
  }
2123
- }
2124
- .mba-footer__legal-links {
2125
- display: flex;
2126
- flex-direction: column;
2127
- align-items: flex-start;
2128
- gap: var(--mba-space-sm);
2129
- order: 1;
2130
- }
2131
- @media (min-width: 768px) {
2132
2317
  .mba-footer__legal-links {
2133
- flex-direction: row;
2134
- align-items: center;
2318
+ display: flex;
2319
+ flex-direction: column;
2320
+ align-items: flex-start;
2135
2321
  gap: var(--mba-space-sm);
2136
- 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
+ }
2137
2331
  }
2138
- }
2139
- .mba-footer__legal-link {
2140
- font-family: var(--mba-font-family-text);
2141
- font-size: var(--mba-font-size-xxs);
2142
- font-weight: 600;
2143
- color: var(--mba-color-primary-500);
2144
- text-decoration: none;
2145
- transition: color var(--mba-transition-fast);
2146
- }
2147
- .mba-footer__legal-link:hover {
2148
- color: var(--mba-color-primary-800);
2149
- text-decoration: underline;
2150
- }
2151
- .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,
2152
2345
  .mba-footer--pro .mba-footer__nav-link,
2153
2346
  .mba-footer--pro .mba-footer__legal-link {
2154
- color: var(--mba-color-primary-pro-500);
2155
- }
2156
- .mba-footer--pro .mba-footer__contact:hover,
2347
+ color: var(--mba-color-primary-pro-500);
2348
+ }
2349
+ .mba-footer--pro .mba-footer__contact:hover,
2157
2350
  .mba-footer--pro .mba-footer__nav-link:hover,
2158
2351
  .mba-footer--pro .mba-footer__legal-link:hover {
2159
- color: var(--mba-color-primary-pro-800);
2160
- }
2161
- .mba-footer--pro .mba-footer__nav-title {
2162
- color: var(--mba-color-primary-pro-800);
2163
- text-decoration-color: var(--mba-color-primary-pro-100);
2164
- }
2165
- .mba-footer--pro .mba-footer__nav-toggle {
2166
- border-bottom-color: var(--mba-color-primary-pro-100);
2167
- }
2168
- .mba-footer--pro .mba-footer__social-link {
2169
- color: var(--mba-color-primary-pro-800);
2170
- }
2171
- .mba-footer--pro .mba-footer__social-link:hover {
2172
- color: var(--mba-color-primary-pro-500);
2173
- }
2174
- .mba-footer--pro .mba-footer__bottom {
2175
- background-color: var(--mba-color-pastel-bleuet);
2176
- }
2177
- .mba-footer--pro .mba-footer__copyright {
2178
- color: var(--mba-color-primary-pro-800);
2179
- 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
+ }
2180
2374
  }
2181
2375
  .text-xxs {
2182
2376
  font-size: var(--mba-font-size-xxs);
@@ -2263,6 +2457,7 @@ button.mba-input-icon__icon:hover {
2263
2457
  --color-primary-400: var(--mba-color-primary-400);
2264
2458
  --color-primary-500: var(--mba-color-primary-500);
2265
2459
  --color-primary-800: var(--mba-color-primary-800);
2460
+ --color-primary-900: var(--mba-color-primary-900);
2266
2461
  --color-error-100: var(--mba-color-error-100);
2267
2462
  --color-error-300: var(--mba-color-error-300);
2268
2463
  --color-error-500: var(--mba-color-error-500);
@@ -2578,12 +2773,18 @@ button.mba-input-icon__icon:hover {
2578
2773
  .mx-auto {
2579
2774
  margin-inline: auto;
2580
2775
  }
2776
+ .mt-lg {
2777
+ margin-top: var(--spacing-lg);
2778
+ }
2581
2779
  .mt-md {
2582
2780
  margin-top: var(--spacing-md);
2583
2781
  }
2584
2782
  .mt-sm {
2585
2783
  margin-top: var(--spacing-sm);
2586
2784
  }
2785
+ .mt-xl {
2786
+ margin-top: var(--spacing-xl);
2787
+ }
2587
2788
  .mt-xs {
2588
2789
  margin-top: var(--spacing-xs);
2589
2790
  }
@@ -2698,6 +2899,9 @@ button.mba-input-icon__icon:hover {
2698
2899
  .max-w-6xl {
2699
2900
  max-width: var(--max-width-6xl);
2700
2901
  }
2902
+ .max-w-\[690px\] {
2903
+ max-width: 690px;
2904
+ }
2701
2905
  .max-w-lg {
2702
2906
  max-width: var(--max-width-lg);
2703
2907
  }
@@ -2751,6 +2955,9 @@ button.mba-input-icon__icon:hover {
2751
2955
  .cursor-pointer {
2752
2956
  cursor: pointer;
2753
2957
  }
2958
+ .grid-cols-1 {
2959
+ grid-template-columns: repeat(1, minmax(0, 1fr));
2960
+ }
2754
2961
  .grid-cols-2 {
2755
2962
  grid-template-columns: repeat(2, minmax(0, 1fr));
2756
2963
  }
@@ -2781,12 +2988,18 @@ button.mba-input-icon__icon:hover {
2781
2988
  .items-end {
2782
2989
  align-items: flex-end;
2783
2990
  }
2991
+ .items-start {
2992
+ align-items: flex-start;
2993
+ }
2784
2994
  .justify-between {
2785
2995
  justify-content: space-between;
2786
2996
  }
2787
2997
  .justify-center {
2788
2998
  justify-content: center;
2789
2999
  }
3000
+ .justify-end {
3001
+ justify-content: flex-end;
3002
+ }
2790
3003
  .gap-4 {
2791
3004
  gap: var(--spacing-4);
2792
3005
  }
@@ -2808,6 +3021,12 @@ button.mba-input-icon__icon:hover {
2808
3021
  .gap-xxs {
2809
3022
  gap: var(--spacing-xxs);
2810
3023
  }
3024
+ .gap-x-md {
3025
+ column-gap: var(--spacing-md);
3026
+ }
3027
+ .gap-y-lg {
3028
+ row-gap: var(--spacing-lg);
3029
+ }
2811
3030
  .overflow-hidden {
2812
3031
  overflow: hidden;
2813
3032
  }
@@ -3082,6 +3301,9 @@ button.mba-input-icon__icon:hover {
3082
3301
  .text-grey-400 {
3083
3302
  color: var(--color-grey-400);
3084
3303
  }
3304
+ .text-grey-800 {
3305
+ color: var(--color-grey-800);
3306
+ }
3085
3307
  .text-info-300 {
3086
3308
  color: var(--color-info-300);
3087
3309
  }
@@ -3106,6 +3328,9 @@ button.mba-input-icon__icon:hover {
3106
3328
  .text-primary-800 {
3107
3329
  color: var(--color-primary-800);
3108
3330
  }
3331
+ .text-primary-900 {
3332
+ color: var(--color-primary-900);
3333
+ }
3109
3334
  .text-success-300 {
3110
3335
  color: var(--color-success-300);
3111
3336
  }
@@ -3133,6 +3358,9 @@ button.mba-input-icon__icon:hover {
3133
3358
  .uppercase {
3134
3359
  text-transform: uppercase;
3135
3360
  }
3361
+ .underline {
3362
+ text-decoration-line: underline;
3363
+ }
3136
3364
  .opacity-0 {
3137
3365
  opacity: 0%;
3138
3366
  }
@@ -3196,6 +3424,11 @@ button.mba-input-icon__icon:hover {
3196
3424
  }
3197
3425
  }
3198
3426
  }
3427
+ .md\:grid-cols-2 {
3428
+ @media (width >= 48rem) {
3429
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3430
+ }
3431
+ }
3199
3432
  .md\:grid-cols-3 {
3200
3433
  @media (width >= 48rem) {
3201
3434
  grid-template-columns: repeat(3, minmax(0, 1fr));