@axos-web-dev/shared-components 1.0.99-feature-brand.2 → 1.0.99-feature-toasts

package/dist/assets/HeroBanner/HeroBanner.css

@@ -5,20 +5,20 @@
 }
 ._1ye8k3f2 {
   background: var(--_1073cm81);
-  border-bottom: 1px solid #B9C1CE;
-  color: var(--_1073cm83);
+  border-bottom: 1px solid #d4d4d4;
+  color: var(--_1073cm82);
 }
 ._1ye8k3f3 {
   background: var(--_1073cm88);
-  color: var(--_1073cm8a);
+  color: var(--_1073cm89);
 }
 ._1ye8k3f4 {
   background: var(--_1073cm8f);
-  color: var(--_1073cm8h);
+  color: var(--_1073cm8g);
 }
 ._1ye8k3f5 {
   background: var(--_1073cm8m);
-  color: var(--_1073cm8o);
+  color: var(--_1073cm8n);
 }
 ._1ye8k3f6 {
   display: flex;
@@ -32,58 +32,70 @@
   display: flex;
   justify-content: flex-end;
   max-width: 604px;
+  position: relative;
 }
 ._1ye8k3fc {
   display: contents;
 }
-._1ye8k3fb img {
-  max-height: 480px;
+._1ye8k3fb picture img {
   max-width: 604px;
+  max-height: 480px;
   object-fit: cover;
 }
 ._1ye8k3fd {
   display: block;
-  font: 700 14px / 1.5 var(--main-font-family);
+  font: 700 14px / 1.3 var(--main-font-family);
   margin-bottom: 4px;
   letter-spacing: .2px;
 }
 ._1ye8k3fe {
-  color: var(--_1073cm85);
+  background: var(--_1073cm84);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
 }
 ._1ye8k3ff {
-  color: var(--_1073cm8c);
+  background: var(--_1073cm8b);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
 }
 ._1ye8k3fg {
-  color: var(--_1073cm8j);
+  color: var(--_1073cm8k);
 }
 ._1ye8k3fh {
-  color: var(--_1073cm8q);
+  color: var(--_1073cm8n);
 }
 ._1ye8k3fi {
-  font: 700 2.5rem / 1.05 var(--header-font-family);
-  text-wrap: pretty;
+  font: 600 2.5rem / 1.25 var(--header-font-family);
 }
 ._1ye8k3fj {
-  color: var(--_1073cm85);
+  background: var(--_1073cm84);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
 }
 ._1ye8k3fk {
-  color: var(--_1073cm8c);
+  background: var(--_1073cm8b);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
 }
 ._1ye8k3fl {
-  color: var(--_1073cm8j);
+  color: var(--_1073cm8h);
 }
 ._1ye8k3fm {
-  color: var(--_1073cm8q);
+  color: var(--_1073cm8o);
 }
 ._1ye8k3f9 p {
-  font: 400 1rem / 1.5 var(--main-font-family);
+  font: 400 18px / 1.44 var(--main-font-family);
   letter-spacing: .2px;
 }
 ._1ye8k3fn {
   margin-top: 3.5rem;
   display: flex;
   align-items: center;
-  gap: 1.5rem 56px;
+  gap: 2rem;
 }
 ._1ye8k3fn:empty {
   display: none;
@@ -112,28 +124,48 @@
   }
   ._1ye8k3f9 {
     flex: 1 1;
+    max-width: 588px;
   }
   ._1ye8k3f0 ._1ye8k3f9 {
     max-width: 468px;
   }
 }
-@media screen and (max-width:1023px) {
-  ._1ye8k3f6 {
+@media screen and (max-width:1280px) {
+  ._1ye8k3fn {
+    margin-top: 2.5rem;
+  }
+  ._1ye8k3f0 ._1ye8k3fn {
     flex-direction: column;
   }
-  ._1ye8k3f9 {
-    text-align: center;
+  ._7etqoq5 ._1ye8k3fn {
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
   }
 }
 @media (max-width: 1280px) and (min-width: 1024px) {
   ._1ye8k3f0 ._1ye8k3fa {
     width: calc(100% - 28px);
   }
+  ._1ye8k3fb picture img {
+    aspect-ratio: 1 / 1;
+  }
+  ._1ye8k3f0 ._1ye8k3fn {
+    align-items: flex-start;
+  }
 }
-@media (max-width: 603px) {
-  ._1ye8k3fa {
-    max-width: 100%;
-    width: 100%;
+@media screen and (max-width:1023px) {
+  ._1ye8k3f6 {
+    flex-direction: column;
+  }
+  ._1ye8k3f9 {
+    text-align: center;
+  }
+  ._1ye8k3fn {
+    flex-direction: column;
+  }
+  ._1ye8k3fo {
+    margin: 24px auto 0 auto;
   }
 }
 @media (max-width: 1023px) {
@@ -141,26 +173,18 @@
     justify-content: center;
     width: min(375px,100%);
   }
-  ._1ye8k3fb img {
+  ._1ye8k3fb picture img {
     max-width: 100%;
   }
 }
 @media (min-width: 1024px) {
   ._1ye8k3f6 {
     gap: 2rem;
-    justify-content: center;
     min-height: 480px;
   }
   ._1ye8k3f0 ._1ye8k3f6 {
-    gap: 1.5rem;
     min-height: 740px;
-  }
-  ._1ye8k3f1 ._1ye8k3f6 {
-    padding-left: 2rem;
-  }
-  ._1ye8k3f1 ._1ye8k3fa {
-    max-width: 1280px;
-    width: 100%;
+    gap: 1.5rem;
   }
   ._1ye8k3fb {
     min-height: 480px;
@@ -169,26 +193,22 @@
     }
   }
 }
-@media screen and (min-width:1281px) {
-  ._1ye8k3f1 ._1ye8k3f6 {
-    gap: 40px;
-    padding-left: 40px;
-  }
-}
 @media screen and (max-width:603px) {
   ._1ye8k3f9 {
-    margin-inline: auto;
     max-width: calc(100% - 2rem);
+    margin-left: auto;
+    margin-right: auto;
   }
 }
-@media (max-width: 450px) {
-  ._1ye8k3fb {
+@media (max-width: 603px) {
+  ._1ye8k3fa {
     width: 100%;
+    max-width: 100%;
   }
 }
-@media screen and (max-width:1180px) and (min-width:1024px) {
-  ._1ye8k3fi {
-    font-size: 34px;
+@media (max-width: 450px) {
+  ._1ye8k3fb {
+    width: 100%;
   }
 }
 @media screen and (max-width:768px) {
@@ -196,47 +216,23 @@
     font-size: 28px;
     line-height: 1.29;
   }
-}
-@media screen and (max-width:1280px) {
-  ._1ye8k3fn {
-    margin-top: 2.5rem;
-  }
-  ._1ye8k3f0 ._1ye8k3fn {
-    flex-direction: column;
-  }
-  ._7etqoq1 ._1ye8k3fn {
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-}
-@media (max-width: 1280px) and (min-width: 1024px) {
-  ._1ye8k3f0 ._1ye8k3fn {
-    align-items: flex-start;
-  }
-}
-@media screen and (max-width:1023px) {
-  ._1ye8k3fn {
-    flex-direction: column;
-  }
-  ._1ye8k3fo {
-    margin: 24px auto 0 auto;
+  ._1ye8k3f9 p {
+    font-size: 1rem;
+    line-height: 1.5;
   }
-}
-@media screen and (max-width:768px) {
   ._1ye8k3fn {
-    margin-top: 1rem;
-  }
-}
-@media screen and (min-width:1024px) {
-  ._1ye8k3fn {
-    flex-wrap: wrap;
+    margin-top: 1.7rem;
   }
 }
 @media (max-width:1280px) and (min-width:1024px) {
   ._1ye8k3fb:not(._1ye8k3f0 ._1ye8k3fb) {
+    flex: 1 1;
     overflow: hidden;
   }
+  ._1ye8k3f6:not(._1ye8k3f0 ._1ye8k3f6) > * {
+    max-width: 50%;
+    width: 50%;
+  }
 }
 @media screen and (max-width:432px) {
   ._1ye8k3fp {

package/dist/assets/HeroBanner/LargeBanner.css

@@ -27,19 +27,19 @@
 }
 ._1bsyngo7 {
   background: var(--_1073cm8f);
-  color: var(--_1073cm8h);
+  color: var(--_1073cm8g);
 }
 ._1bsyngo8 {
   background: var(--_1073cm8f);
-  color: var(--_1073cm8h);
+  color: var(--_1073cm8g);
 }
 ._1bsyngo9 {
   background: var(--_1073cm81);
-  color: var(--_1073cm83);
+  color: var(--_1073cm82);
 }
 ._1bsyngoa {
   background: var(--_1073cm81);
-  color: var(--_1073cm83);
+  color: var(--_1073cm82);
 }
 ._1bsyngob {
   display: block;
@@ -48,31 +48,31 @@
   letter-spacing: .2px;
 }
 ._1bsyngoc {
-  color: var(--_1073cm8g);
+  color: var(--_1073cm8k);
 }
 ._1bsyngod {
-  color: var(--_1073cm8g);
+  color: var(--_1073cm8k);
 }
 ._1bsyngoe {
-  color: var(--_1073cm85);
+  color: var(--_1073cm83);
 }
 ._1bsyngof {
-  color: var(--_1073cm85);
+  color: var(--_1073cm83);
 }
 ._1bsyngog {
-  font: 700 2.5rem / 1.25 var(--header-font-family);
+  font: 600 2.5rem / 1.25 var(--header-font-family);
 }
 ._1bsyngoh {
-  color: var(--_1073cm8j);
+  color: var(--_1073cm8h);
 }
 ._1bsyngoi {
-  color: var(--_1073cm8j);
+  color: var(--_1073cm8h);
 }
 ._1bsyngoj {
-  color: var(--_1073cm85);
+  color: var(--_1073cm83);
 }
 ._1bsyngok {
-  color: var(--_1073cm85);
+  color: var(--_1073cm83);
 }
 ._1bsyngo6 p {
   font: 400 18px / 1.44 var(--main-font-family);

package/dist/assets/HeroBanner/SelectionBanner.css

@@ -1,8 +1,22 @@
 ._7etqoq0 {
-  font: 700 2.5rem / 1.25 var(--header-font-family);
-  color: var(--_1073cm85);
+  font: 600 2.5rem / 1.25 var(--header-font-family);
 }
 ._7etqoq1 {
+  color: var(--_1073cm83);
+}
+._7etqoq2 {
+  background: var(--_1073cm8a);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
+}
+._7etqoq3 {
+  color: var(--_1073cm8j);
+}
+._7etqoq4 {
+  color: var(--_1073cm8o);
+}
+._7etqoq5 {
   background: #fff;
   min-height: 480px;
   width: 50%;
@@ -10,7 +24,7 @@
   display: flex;
   align-items: center;
 }
-._7etqoq2 {
+._7etqoq6 {
   position: absolute;
   background: #fff;
   left: 0;
@@ -19,37 +33,37 @@
   width: 50vw;
   z-index: 0;
 }
-._7etqoq3 {
+._7etqoq7 {
   position: relative;
-  color: #1F1F1F;
+  color: #333D46;
   padding-left: 60px;
   max-width: 588px;
   width: 100%;
 }
-._7etqoq4 {
+._7etqoq8 {
   max-width: 64px;
   max-height: 64px;
   width: 64px;
   height: 64px;
   display: block;
 }
-._7etqoq5 {
+._7etqoq9 {
   max-width: 64px;
   width: 64px;
   height: 64px;
   max-height: 64px;
   display: block;
 }
-._7etqoq6 {
+._7etqoqa {
   background-color: var(--_1073cm812);
 }
-._7etqoq7 {
+._7etqoqb {
   background-color: var(--_1073cm812);
 }
-._7etqoq8 {
+._7etqoqc {
   background-color: var(--_1073cm812);
 }
-._7etqoq9 {
+._7etqoqd {
   background-color: var(--_1073cm812);
 }
 @media screen and (max-width:768px) {
@@ -60,12 +74,12 @@
   }
 }
 @media (max-width:1024px) {
-  ._7etqoq1 {
+  ._7etqoq5 {
     width: 100vw;
     padding: 2rem 0;
     min-height: auto;
   }
-  ._7etqoq3 {
+  ._7etqoq7 {
     width: min(45rem, calc(100% - 4rem));
     margin: 0 auto;
     padding: 2rem 0;
@@ -73,11 +87,11 @@
   }
 }
 @media screen and (max-width:1280px) {
-  ._7etqoq4 {
+  ._7etqoq8 {
     max-width: 48px;
     max-height: 48px;
   }
-  ._7etqoq5 {
+  ._7etqoq9 {
     max-width: 48px;
     max-height: 48px;
   }

package/dist/assets/IconBillboard/IconBillboard.css

@@ -1,26 +1,35 @@
 ._1r4ovbu0 {
   padding: 32px 24px;
 }
+.xtgeqb0 ._1r4ovbu0 {
+  width: 100%;
+  padding: 12px 16px;
+}
 ._1r4ovbu1 {
   background: var(--_1073cm81);
-  border: 1px solid #E9EBEF;
-  color: var(--_1073cm83);
+  border: 1px solid #D4D4D4;
+  color: var(--_1073cm82);
 }
 ._1r4ovbu2 {
   background: var(--_1073cm88);
-  color: var(--_1073cm8a);
+  color: var(--_1073cm89);
 }
 ._1r4ovbu3 {
   background: var(--_1073cm8f);
-  color: var(--_1073cm8h);
+  color: var(--_1073cm8g);
 }
 ._1r4ovbu4 {
   background: var(--_1073cm8m);
-  color: var(--_1073cm8o);
+  color: var(--_1073cm8n);
 }
 ._1r4ovbu5 {
   gap: 16px;
 }
+.xtgeqb0 ._1r4ovbu5 {
+  gap: 8px;
+  flex-direction: row;
+  align-items: flex-start;
+}
 ._1r4ovbu6 {
   flex-direction: row;
 }
@@ -29,6 +38,11 @@
   height: 48px;
   width: 48px;
 }
+.xtgeqb0 ._1r4ovbu7 {
+  max-width: 38px;
+  height: 38px;
+  width: 38px;
+}
 ._1r4ovbu8 {
   display: flex;
   flex-direction: column;
@@ -42,26 +56,51 @@
   gap: 8px;
   text-align: center;
 }
+.xtgeqb0 ._1r4ovbu9 {
+  gap: 2px;
+  text-align: left;
+}
 ._1r4ovbua {
-  font: 700 28px/1.29 var(--header-font-family);
+  font: 600 28px/1.29 var(--header-font-family);
+}
+.xtgeqb0 ._1r4ovbua {
+  font-size: 21px;
+  line-height: 1.15;
+}
+._1073cm80 ._1r4ovbub {
+  -webkit-background-clip: text;
+  background-image: var(--_1073cm84);
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
+}
+._1es6o1h0 ._1r4ovbub {
+  color: var(--_1073cm83);
 }
-._1r4ovbub {
-  color: var(--_1073cm85);
+.fl2fv50 ._1r4ovbub {
+  color: var(--_1073cm83);
+}
+._1073cm80 ._1r4ovbuc {
+  -webkit-background-clip: text;
+  background-image: var(--_1073cm8b);
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
+}
+._1es6o1h0 ._1r4ovbuc {
+  color: var(--_1073cm8a);
 }
-._1r4ovbuc {
-  color: var(--_1073cm8c);
+.fl2fv50 ._1r4ovbuc {
+  color: var(--_1073cm8a);
 }
 ._1r4ovbud {
-  color: var(--_1073cm8j);
+  color: var(--_1073cm8h);
 }
 ._1r4ovbue {
-  color: var(--_1073cm8q);
+  color: var(--_1073cm8o);
 }
 ._1r4ovbuf {
   display: flex;
   flex-direction: column;
   gap: 1em;
-  list-style: none;
 }
 ._1r4ovbug {
   position: relative;
@@ -70,13 +109,13 @@
 }
 ._1r4ovbuh {
   display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 24px;
   justify-content: center;
+  width: 100%;
   margin-top: auto;
   text-align: center;
-  width: 100%;
+  flex-wrap: wrap;
+  gap: 24px;
+  align-items: center;
 }
 ._1r4ovbui {
   margin-inline: auto;
@@ -91,16 +130,22 @@
   text-wrap: pretty;
 }
 ._1r4ovbuk {
-  color: var(--_1073cm85);
+  background: var(--_1073cm84);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
 }
 ._1r4ovbul {
-  color: var(--_1073cm8c);
+  background: var(--_1073cm8b);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
 }
 ._1r4ovbum {
-  color: var(--_1073cm8j);
+  color: var(--_1073cm8h);
 }
 ._1r4ovbun {
-  color: var(--_1073cm8q);
+  color: var(--_1073cm8o);
 }
 ._1r4ovbuo {
   display: grid;
@@ -108,22 +153,22 @@
   gap: 24px;
 }
 ._1r4ovbup {
-  color: var(--_1073cm83);
+  color: var(--_1073cm82);
 }
 ._1r4ovbuq {
   background: var(--_1073cm81);
-  border: 1px solid #E9EBEF;
+  border: 1px solid #D4D4D4;
 }
 ._1r4ovbur {
   background: var(--_1073cm88);
 }
 ._1r4ovbus {
   background: var(--_1073cm8f);
-  color: var(--_1073cm8h);
+  color: var(--_1073cm8g);
 }
 ._1r4ovbut {
   background: var(--_1073cm8m);
-  color: var(--_1073cm8o);
+  color: var(--_1073cm8n);
 }
 main > div:nth-last-child(2) > ._1r4ovbu0 {
   margin-bottom: 3.5rem;
@@ -145,6 +190,14 @@ main > div:nth-last-child(2) > ._1r4ovbu0 {
 ._1r4ovbuu:hover ._1r4ovbuh a {
   text-decoration: underline;
 }
+@media screen and (max-width: 450px) {
+  .xtgeqb0 ._1r4ovbu7 {
+    display: none;
+  }
+  .xtgeqb0 ._1r4ovbua {
+    font-size: 18px;
+  }
+}
 @media screen and (max-width: 380px) {
   ._1r4ovbuh {
     flex-direction: column;