@appartmint/mint 2.0.2 → 2.1.0

package/dist/css/mint.css

@@ -572,64 +572,6 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   width: 100%;
 }
 
-.mint-embed-bg {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-  gap: 2rem;
-  position: relative;
-}
-@media (min-width: 1200px) {
-  .mint-embed-bg {
-    flex-direction: row;
-    min-height: 100vh;
-    margin-bottom: 15%;
-  }
-}
-@media (min-width: 1200px) {
-  .mint-embed-bg > section {
-    margin-bottom: -15%;
-  }
-}
-.mint-embed-bg iframe, .mint-embed-bg video {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  pointer-events: none;
-}
-@media (min-width: 1200px) {
-  .mint-embed-bg iframe, .mint-embed-bg video {
-    position: absolute;
-    left: -1rem;
-    width: 100vw;
-    border: none;
-    padding: 0;
-  }
-}
-@media (min-width: 1200px) {
-  .mint-embed-bg iframe + * .mint-grid, .mint-embed-bg video + * .mint-grid {
-    margin-bottom: -15%;
-  }
-}
-.mint-embed-bg.mint-overflow {
-  overflow: hidden;
-  margin-bottom: 0;
-}
-@media (min-width: 1200px) {
-  .mint-embed-bg.mint-overflow > section {
-    margin-bottom: 0;
-  }
-}
-.mint-embed-bg.mint-overflow iframe, .mint-embed-bg.mint-overflow video {
-  top: -10%;
-  left: -10%;
-  width: 120%;
-  height: 120%;
-}
-
 .mint-footer {
   display: flex;
   flex-direction: column;
@@ -1158,6 +1100,43 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   width: 100%;
 }
 
+:root .mint-landing.swiper {
+  width: 100vw;
+  max-width: 100vw;
+}
+:root .mint-landing.swiper {
+  top: -4px;
+}
+@media (min-width: 480px) {
+  :root .mint-landing.swiper {
+    top: calc(-4px + -12 * (100vw - 480px) / 288);
+  }
+}
+@media (min-width: 768px) {
+  :root .mint-landing.swiper {
+    top: -16px;
+  }
+}
+:root .mint-landing.swiper {
+  left: -4px;
+}
+@media (min-width: 480px) {
+  :root .mint-landing.swiper {
+    left: calc(-4px + -12 * (100vw - 480px) / 288);
+  }
+}
+@media (min-width: 768px) {
+  :root .mint-landing.swiper {
+    left: -16px;
+  }
+}
+:root .mint-landing.swiper .swiper-slide {
+  padding: 0;
+}
+:root .mint-landing .mint-video-bg {
+  margin: 0;
+}
+
 .grecaptcha-badge {
   visibility: hidden;
 }
@@ -1176,27 +1155,87 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   gap: 1rem;
 }
 
-@keyframes instafade {
-  0% {
-    color: var(--mint-instagram-0);
+.mint-video-bg {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 2rem;
+  position: relative;
+}
+@media (min-width: 1200px) {
+  .mint-video-bg {
+    flex-direction: row;
+    min-height: calc(100vh - var(--mint-header-height));
+    margin-bottom: 15%;
   }
-  16.6666666667% {
-    color: var(--mint-instagram-1);
+}
+@media (min-width: 1200px) {
+  .mint-video-bg > section {
+    margin-bottom: -15%;
   }
-  33.3333333333% {
-    color: var(--mint-instagram-2);
+}
+.mint-video-bg iframe, .mint-video-bg video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+@media (min-width: 1200px) {
+  .mint-video-bg iframe, .mint-video-bg video {
+    position: absolute;
+    width: 100vw;
+    border: none;
+    padding: 0;
+  }
+}
+@media (min-width: 1200px) {
+  .mint-video-bg iframe + * .mint-grid, .mint-video-bg video + * .mint-grid {
+    margin-bottom: -15%;
+  }
+}
+.mint-video-bg.mint-overflow {
+  overflow: hidden;
+  margin-bottom: 0;
+}
+@media (min-width: 1200px) {
+  .mint-video-bg.mint-overflow > section {
+    margin-bottom: 0;
+  }
+}
+.mint-video-bg.mint-overflow iframe, .mint-video-bg.mint-overflow video {
+  top: -10%;
+  left: -10%;
+  width: 120%;
+  height: 120%;
+}
+
+@keyframes mint-stretch-in {
+  0% {
+    transform: scale(1);
   }
   50% {
-    color: var(--mint-instagram-3);
+    transform: scale(1.25);
+  }
+  70% {
+    transform: scale(1.15);
   }
-  66.6666666667% {
-    color: var(--mint-instagram-4);
+  100% {
+    transform: scale(1.2);
+  }
+}
+@keyframes mint-stretch-out {
+  0% {
+    transform: scale(1.2);
   }
-  83.3333333333% {
-    color: var(--mint-instagram-5);
+  25% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1.05);
   }
   100% {
-    color: var(--mint-instagram-6);
+    transform: scale(1);
   }
 }
 :root {
@@ -1256,6 +1295,34 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   transition: transform 200ms ease-out;
 }
 
+.mint-stretch {
+  animation: mint-stretch-out 0.5s ease forwards;
+}
+.mint-stretch:hover {
+  animation: mint-stretch-in 0.75s ease forwards;
+}
+.mint-stretch:focus-visible {
+  animation: mint-stretch-in 0.75s ease forwards;
+}
+.mint-stretch-img img {
+  animation: mint-stretch-out 0.5s ease forwards;
+}
+.mint-stretch-img:hover img {
+  animation: mint-stretch-in 0.75s ease forwards;
+}
+.mint-stretch-img:focus-visible img {
+  animation: mint-stretch-in 0.75s ease forwards;
+}
+.mint-stretch-icon i {
+  animation: mint-stretch-out 0.5s ease forwards;
+}
+.mint-stretch-icon:hover i {
+  animation: mint-stretch-in 0.75s ease forwards;
+}
+.mint-stretch-icon:focus-visible i {
+  animation: mint-stretch-in 0.75s ease forwards;
+}
+
 .mint-aspect, .mint-16-9 {
   position: relative;
   height: 0;