@maboussoleaidant/design-system 0.1.6 → 0.1.9

package/dist/mba-tailwind.css

@@ -225,6 +225,14 @@
   --mba-breakpoint-xl: 1280px;
   --mba-breakpoint-2xl: 1536px;
 }
+:root {
+  --mba-wave-height: 42px;
+  --mba-wave-dip-up-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 42' preserveAspectRatio='none'%3E%3Cpath d='M1280 42H0V27.6706C95.612 27.6706 246.789 0 360.422 0C499.085 0 780.915 27.6706 914.071 27.6706C1068.75 27.6706 1190.9 0 1280 0V42Z' fill='black'/%3E%3C/svg%3E");
+  --mba-wave-dip-down-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 42' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1280V14.3294C1184.39 14.3294 1033.21 42 919.578 42C780.915 42 499.085 14.3294 365.929 14.3294C211.248 14.3294 89.1044 42 0 42V0Z' fill='black'/%3E%3C/svg%3E");
+  --mba-wave-sm-height: 24px;
+  --mba-wave-sm-dip-up-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 24' preserveAspectRatio='none'%3E%3Cpath d='M1280 24H0V15.8118C95.612 15.8118 246.789 0 360.422 0C499.085 0 780.915 15.8118 914.071 15.8118C1068.75 15.8118 1190.9 0 1280 0V24Z' fill='black'/%3E%3C/svg%3E");
+  --mba-wave-sm-dip-down-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1280V8.18824C1184.39 8.18824 1033.21 24 919.578 24C780.915 24 499.085 8.18824 365.929 8.18824C211.248 8.18824 89.1044 24 0 24V0Z' fill='black'/%3E%3C/svg%3E");
+}
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -1774,6 +1782,402 @@ button.mba-input-icon__icon:hover {
   flex-direction: column;
   gap: var(--mba-space-xxs);
 }
+.mba-wave {
+  display: block;
+  width: 100%;
+  height: var(--mba-wave-height);
+  background-color: var(--mba-color-pastel-lavender);
+  -webkit-mask-image: var(--mba-wave-dip-up-mask);
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: var(--mba-wave-dip-up-mask);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+}
+.mba-wave--top {
+  -webkit-mask-image: var(--mba-wave-dip-down-mask);
+  mask-image: var(--mba-wave-dip-down-mask);
+}
+.mba-wave--bottom {
+  -webkit-mask-image: var(--mba-wave-dip-up-mask);
+  mask-image: var(--mba-wave-dip-up-mask);
+}
+.mba-wave--sm {
+  height: var(--mba-wave-sm-height);
+  -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
+  mask-image: var(--mba-wave-sm-dip-up-mask);
+}
+.mba-wave--sm.mba-wave--top {
+  -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
+  mask-image: var(--mba-wave-sm-dip-down-mask);
+}
+.mba-wave--lavender {
+  background-color: var(--mba-color-pastel-lavender);
+}
+.mba-wave--white {
+  background-color: var(--mba-color-white);
+}
+.mba-wave--beige {
+  background-color: var(--mba-color-beige);
+}
+.mba-wave--primary-50 {
+  background-color: var(--mba-color-primary-50);
+}
+.mba-section {
+  position: relative;
+  width: 100%;
+}
+.mba-section__content {
+  position: relative;
+  z-index: 1;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--mba-space-xl) var(--mba-space-md);
+}
+@media (min-width: 768px) {
+  .mba-section__content {
+    padding: var(--mba-space-xxl) var(--mba-space-lg);
+  }
+}
+.mba-section--lavender {
+  background-color: var(--mba-color-pastel-lavender);
+}
+.mba-section--beige {
+  background-color: var(--mba-color-beige);
+}
+.mba-section--primary-50 {
+  background-color: var(--mba-color-primary-50);
+}
+.mba-section--white {
+  background-color: var(--mba-color-white);
+}
+.mba-section--wave-top::before,
+.mba-section--wave-both::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: var(--mba-wave-height);
+  background-color: var(--mba-color-white);
+  -webkit-mask-image: var(--mba-wave-dip-down-mask);
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: var(--mba-wave-dip-down-mask);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  pointer-events: none;
+}
+.mba-section--wave-bottom::after,
+.mba-section--wave-both::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--mba-wave-height);
+  background-color: var(--mba-color-white);
+  -webkit-mask-image: var(--mba-wave-dip-up-mask);
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: var(--mba-wave-dip-up-mask);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  pointer-events: none;
+}
+.mba-section--wave-sm.mba-section--wave-top::before,
+.mba-section--wave-sm.mba-section--wave-both::before {
+  height: var(--mba-wave-sm-height);
+  -webkit-mask-image: var(--mba-wave-sm-dip-down-mask);
+  mask-image: var(--mba-wave-sm-dip-down-mask);
+}
+.mba-section--wave-sm.mba-section--wave-bottom::after,
+.mba-section--wave-sm.mba-section--wave-both::after {
+  height: var(--mba-wave-sm-height);
+  -webkit-mask-image: var(--mba-wave-sm-dip-up-mask);
+  mask-image: var(--mba-wave-sm-dip-up-mask);
+}
+.mba-section--wave-lavender::before,
+.mba-section--wave-lavender::after {
+  background-color: var(--mba-color-pastel-lavender);
+}
+.mba-section--wave-beige::before,
+.mba-section--wave-beige::after {
+  background-color: var(--mba-color-beige);
+}
+.mba-section--wave-primary-50::before,
+.mba-section--wave-primary-50::after {
+  background-color: var(--mba-color-primary-50);
+}
+.mba-footer {
+  width: 100%;
+  background-color: var(--mba-color-white);
+}
+.mba-footer__main {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: var(--mba-space-xl) var(--mba-space-sm) var(--mba-space-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-lg);
+}
+@media (min-width: 768px) {
+  .mba-footer__main {
+    padding: var(--mba-space-xl) 0;
+  }
+}
+@media (min-width: 1024px) {
+  .mba-footer__main {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+}
+.mba-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-sm);
+}
+.mba-footer__right {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-lg);
+}
+@media (min-width: 1024px) {
+  .mba-footer__right {
+    align-items: flex-end;
+  }
+}
+.mba-footer__logo {
+  height: auto;
+  max-height: 32px;
+}
+.mba-footer__mission {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  line-height: var(--mba-line-height-relaxed);
+  color: var(--mba-color-text);
+  margin: 0;
+  max-width: 300px;
+}
+.mba-footer__contact {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: 600;
+  color: var(--mba-color-primary-500);
+  text-decoration: none;
+  transition: color var(--mba-transition-fast);
+}
+.mba-footer__contact:hover {
+  color: var(--mba-color-primary-800);
+  text-decoration: underline;
+}
+.mba-footer__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-lg);
+}
+@media (min-width: 768px) {
+  .mba-footer__nav {
+    flex-direction: row;
+    gap: var(--mba-space-xxl);
+  }
+}
+.mba-footer__nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-sm);
+}
+.mba-footer__nav-title {
+  display: none;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: 700;
+  color: var(--mba-color-primary-900);
+  margin: 0;
+  margin-bottom: var(--mba-space-xs);
+  text-decoration: underline;
+  text-decoration-color: var(--mba-color-primary-100);
+  text-decoration-thickness: 2px;
+  text-underline-offset: var(--mba-space-xs);
+}
+.mba-footer__nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mba-space-sm);
+}
+.mba-footer__nav-link {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: 600;
+  color: var(--mba-color-primary-500);
+  text-decoration: none;
+  transition: color var(--mba-transition-fast);
+}
+.mba-footer__nav-link:hover {
+  color: var(--mba-color-primary-800);
+  text-decoration: underline;
+}
+.mba-footer__nav-toggle {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  padding-bottom: var(--mba-space-xs);
+  border: none;
+  border-bottom: 2px solid var(--mba-color-primary-100);
+  background: none;
+  cursor: pointer;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: 700;
+  color: var(--mba-color-text);
+}
+.mba-footer__nav-toggle-icon {
+  font-size: 20px;
+  transition: transform var(--mba-transition-fast);
+}
+.mba-footer__nav-toggle[aria-expanded="true"] .mba-footer__nav-toggle-icon {
+  transform: rotate(180deg);
+}
+.mba-footer__nav-content {
+  display: none;
+}
+.mba-footer__nav-content[data-expanded="true"] {
+  display: block;
+}
+@media (min-width: 768px) {
+  .mba-footer__nav-toggle {
+    display: none;
+  }
+  .mba-footer__nav-title {
+    display: block;
+  }
+  .mba-footer__nav-content {
+    display: block;
+    padding-top: 0;
+  }
+}
+.mba-footer__social {
+  display: flex;
+  gap: var(--mba-space-sm);
+  align-items: center;
+}
+.mba-footer__social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--mba-color-primary-900);
+  transition: color var(--mba-transition-fast);
+}
+.mba-footer__social-link:hover {
+  color: var(--mba-color-primary-500);
+}
+.mba-footer__social-icon {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+.mba-footer__bottom {
+  background-color: var(--mba-color-pastel-lavender);
+}
+.mba-footer__legal {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: var(--mba-space-md) var(--mba-space-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-sm);
+}
+@media (min-width: 768px) {
+  .mba-footer__legal {
+    padding: var(--mba-space-md) 0;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+.mba-footer__copyright {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  color: var(--mba-color-primary-900);
+  margin: 0;
+  padding-top: var(--mba-space-sm);
+  border-top: 1px solid var(--mba-color-primary-400);
+  order: 2;
+}
+@media (min-width: 768px) {
+  .mba-footer__copyright {
+    padding-top: 0;
+    border-top: none;
+    order: 0;
+  }
+}
+.mba-footer__legal-links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mba-space-sm);
+  order: 1;
+}
+@media (min-width: 768px) {
+  .mba-footer__legal-links {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--mba-space-sm);
+    order: 0;
+  }
+}
+.mba-footer__legal-link {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: 600;
+  color: var(--mba-color-primary-500);
+  text-decoration: none;
+  transition: color var(--mba-transition-fast);
+}
+.mba-footer__legal-link:hover {
+  color: var(--mba-color-primary-800);
+  text-decoration: underline;
+}
+.mba-footer--pro .mba-footer__contact,
+.mba-footer--pro .mba-footer__nav-link,
+.mba-footer--pro .mba-footer__legal-link {
+  color: var(--mba-color-primary-pro-500);
+}
+.mba-footer--pro .mba-footer__contact:hover,
+.mba-footer--pro .mba-footer__nav-link:hover,
+.mba-footer--pro .mba-footer__legal-link:hover {
+  color: var(--mba-color-primary-pro-800);
+}
+.mba-footer--pro .mba-footer__nav-title {
+  color: var(--mba-color-primary-pro-800);
+  text-decoration-color: var(--mba-color-primary-pro-100);
+}
+.mba-footer--pro .mba-footer__nav-toggle {
+  border-bottom-color: var(--mba-color-primary-pro-100);
+}
+.mba-footer--pro .mba-footer__social-link {
+  color: var(--mba-color-primary-pro-800);
+}
+.mba-footer--pro .mba-footer__social-link:hover {
+  color: var(--mba-color-primary-pro-500);
+}
+.mba-footer--pro .mba-footer__bottom {
+  background-color: var(--mba-color-pastel-bleuet);
+}
+.mba-footer--pro .mba-footer__copyright {
+  color: var(--mba-color-primary-pro-800);
+  border-top-color: var(--mba-color-primary-pro-400);
+}
 .text-xxs {
   font-size: var(--mba-font-size-xxs);
 }
@@ -1841,6 +2245,7 @@ button.mba-input-icon__icon:hover {
     --radius-sm: var(--mba-radius-sm);
     --radius-md: var(--mba-radius-md);
     --radius-lg: var(--mba-radius-lg);
+    --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -1874,6 +2279,7 @@ button.mba-input-icon__icon:hover {
     --color-info-400: var(--mba-color-info-400);
     --color-info-500: var(--mba-color-info-500);
     --color-info-800: var(--mba-color-info-800);
+    --color-pastel-lavender: var(--mba-color-pastel-lavender);
     --font-heading: var(--mba-font-family-heading);
     --spacing-0: var(--mba-space-0);
     --spacing-xxs: var(--mba-space-xxs);
@@ -2112,6 +2518,9 @@ button.mba-input-icon__icon:hover {
   .relative {
     position: relative;
   }
+  .sticky {
+    position: sticky;
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -2241,6 +2650,9 @@ button.mba-input-icon__icon:hover {
   .h-32 {
     height: var(--spacing-32);
   }
+  .h-screen {
+    height: 100vh;
+  }
   .w-4 {
     width: var(--spacing-4);
   }
@@ -2327,6 +2739,12 @@ button.mba-input-icon__icon:hover {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -2490,6 +2908,9 @@ button.mba-input-icon__icon:hover {
   .bg-info-500 {
     background-color: var(--color-info-500);
   }
+  .bg-pastel-lavender {
+    background-color: var(--color-pastel-lavender);
+  }
   .bg-primary-50 {
     background-color: var(--color-primary-50);
   }
@@ -2553,6 +2974,9 @@ button.mba-input-icon__icon:hover {
   .px-sm {
     padding-inline: var(--spacing-sm);
   }
+  .px-xs {
+    padding-inline: var(--spacing-xs);
+  }
   .px-xxs {
     padding-inline: var(--spacing-xxs);
   }
@@ -2571,6 +2995,9 @@ button.mba-input-icon__icon:hover {
   .pb-sm {
     padding-bottom: var(--spacing-sm);
   }
+  .pl-md {
+    padding-left: var(--spacing-md);
+  }
   .text-center {
     text-align: center;
   }
@@ -2744,6 +3171,11 @@ button.mba-input-icon__icon:hover {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2782,6 +3214,26 @@ button.mba-input-icon__icon:hover {
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -2917,12 +3369,22 @@ button.mba-input-icon__icon:hover {
   syntax: "*";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;