@appartmint/mint 2.1.2 → 2.1.4

package/dist/css/mint.css

@@ -89,18 +89,25 @@
 .mint-pill:focus-visible i {
   color: inherit !important;
 }
-.mint-btn:active, :root:root [amplify-button]:active, .mint-select:active, .mint-btn.mint-active, :root:root .mint-active[amplify-button], .mint-active.mint-select,
+.mint-btn:active, :root:root [amplify-button]:active, .mint-select:active,
 .mint-btn-group:active,
+.mint-pill:active {
+  color: var(--mint-back);
+  background: var(--mint-brand-4);
+}
+.mint-btn:active i, :root:root [amplify-button]:active i, .mint-select:active i,
+.mint-btn-group:active i,
+.mint-pill:active i {
+  color: inherit !important;
+}
+.mint-btn.mint-active, :root:root .mint-active[amplify-button], .mint-active.mint-select,
 .mint-btn-group.mint-active,
-.mint-pill:active,
 .mint-pill.mint-active {
   color: var(--mint-back);
   background: var(--mint-brand-4);
 }
-.mint-btn:active i, :root:root [amplify-button]:active i, .mint-select:active i, .mint-btn.mint-active i, :root:root .mint-active[amplify-button] i, .mint-active.mint-select i,
-.mint-btn-group:active i,
+.mint-btn.mint-active i, :root:root .mint-active[amplify-button] i, .mint-active.mint-select i,
 .mint-btn-group.mint-active i,
-.mint-pill:active i,
 .mint-pill.mint-active i {
   color: inherit !important;
 }
@@ -122,10 +129,14 @@
   color: var(--mint-fore);
   background: var(--mint-brand-2);
 }
-.mint-btn.mint-reverse:active, :root:root .mint-reverse[amplify-button]:active, .mint-reverse.mint-select:active, .mint-btn.mint-reverse.mint-active, :root:root .mint-reverse.mint-active[amplify-button], .mint-reverse.mint-active.mint-select,
+.mint-btn.mint-reverse:active, :root:root .mint-reverse[amplify-button]:active, .mint-reverse.mint-select:active,
 .mint-btn-group.mint-reverse:active,
+.mint-pill.mint-reverse:active {
+  color: var(--mint-fore);
+  background: var(--mint-brand-2);
+}
+.mint-btn.mint-reverse.mint-active, :root:root .mint-reverse.mint-active[amplify-button], .mint-reverse.mint-active.mint-select,
 .mint-btn-group.mint-reverse.mint-active,
-.mint-pill.mint-reverse:active,
 .mint-pill.mint-reverse.mint-active {
   color: var(--mint-fore);
   background: var(--mint-brand-2);
@@ -150,10 +161,15 @@
   background: var(--mint-accent-2);
   border-color: var(--mint-accent-2);
 }
-.mint-btn.mint-alt:active, :root:root .mint-alt[amplify-button]:active, .mint-alt.mint-select:active, .mint-btn.mint-alt.mint-active, :root:root .mint-alt.mint-active[amplify-button], .mint-alt.mint-active.mint-select,
+.mint-btn.mint-alt:active, :root:root .mint-alt[amplify-button]:active, .mint-alt.mint-select:active,
 .mint-btn-group.mint-alt:active,
+.mint-pill.mint-alt:active {
+  color: var(--mint-back);
+  background: var(--mint-accent-2);
+  border-color: var(--mint-accent-2);
+}
+.mint-btn.mint-alt.mint-active, :root:root .mint-alt.mint-active[amplify-button], .mint-alt.mint-active.mint-select,
 .mint-btn-group.mint-alt.mint-active,
-.mint-pill.mint-alt:active,
 .mint-pill.mint-alt.mint-active {
   color: var(--mint-back);
   background: var(--mint-accent-2);
@@ -180,10 +196,15 @@
   background: var(--mint-trans);
   border-color: var(--mint-trans);
 }
-.mint-btn.mint-alt.mint-reverse:active, :root:root .mint-alt.mint-reverse[amplify-button]:active, .mint-alt.mint-reverse.mint-select:active, .mint-btn.mint-alt.mint-reverse.mint-active, :root:root .mint-alt.mint-reverse.mint-active[amplify-button], .mint-alt.mint-reverse.mint-active.mint-select,
+.mint-btn.mint-alt.mint-reverse:active, :root:root .mint-alt.mint-reverse[amplify-button]:active, .mint-alt.mint-reverse.mint-select:active,
 .mint-btn-group.mint-alt.mint-reverse:active,
+.mint-pill.mint-alt.mint-reverse:active {
+  color: var(--mint-brand-4);
+  background: var(--mint-trans);
+  border-color: var(--mint-trans);
+}
+.mint-btn.mint-alt.mint-reverse.mint-active, :root:root .mint-alt.mint-reverse.mint-active[amplify-button], .mint-alt.mint-reverse.mint-active.mint-select,
 .mint-btn-group.mint-alt.mint-reverse.mint-active,
-.mint-pill.mint-alt.mint-reverse:active,
 .mint-pill.mint-alt.mint-reverse.mint-active {
   color: var(--mint-brand-4);
   background: var(--mint-trans);
@@ -220,7 +241,10 @@
 .mint-btn-icon:focus-visible i {
   color: var(--mint-accent-2);
 }
-.mint-btn-icon:active i, .mint-btn-icon.mint-active i {
+.mint-btn-icon:active i {
+  color: var(--mint-accent-2);
+}
+.mint-btn-icon.mint-active i {
   color: var(--mint-accent-2);
 }
 @media (min-width: 480px) {
@@ -271,7 +295,10 @@
 .mint-btn-group button:focus-visible {
   background: var(--mint-brand-5);
 }
-.mint-btn-group button:active, .mint-btn-group button.mint-active {
+.mint-btn-group button:active {
+  background: var(--mint-brand-5);
+}
+.mint-btn-group button.mint-active {
   background: var(--mint-brand-5);
 }
 
@@ -726,6 +753,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
     position: static;
     display: flex !important;
     height: 100%;
+    max-width: unset !important;
     padding: 0;
     z-index: 0;
   }
@@ -741,7 +769,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
     display: none;
   }
   #mint-header.mint-expand #mint-wrapper nav > ul {
-    flex-direction: row;
+    flex-direction: row !important;
     justify-content: flex-end;
     flex-wrap: nowrap;
     overflow: visible;
@@ -834,6 +862,10 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   margin: 0.25rem 0;
   line-height: 1;
   font-size: 4em;
+  width: 100%;
+}
+#mint-header.mint-tray #mint-wrapper button {
+  font-size: 6em;
 }
 #mint-header.mint-tray #mint-wrapper nav > ul {
   flex-direction: column;
@@ -965,9 +997,9 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   top: var(--mint-header-height);
 }
 #mint-header #mint-wrapper nav {
-  height: calc(100vh - var(--mint-header-height));
-  height: calc(100dvh - var(--mint-header-height));
-  overflow: auto;
+  flex-grow: 1;
+  height: auto;
+  overflow: visible;
   background: var(--mint-back);
 }
 @media (min-width: 1440px) {
@@ -982,7 +1014,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
 }
 #mint-header #mint-wrapper nav > ul {
   height: 100%;
-  overflow: auto;
+  overflow: visible;
 }
 @media (min-width: 1024px) {
   #mint-header #mint-wrapper nav > ul {
@@ -1028,8 +1060,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   background-color: var(--mint-shadow-5);
   color: var(--mint-back);
 }
-#mint-header #mint-wrapper a:active, #mint-header #mint-wrapper a.mint-active,
-#mint-header #mint-wrapper button:active,
+#mint-header #mint-wrapper a.mint-active,
 #mint-header #mint-wrapper button.mint-active {
   text-decoration: underline;
 }
@@ -1099,40 +1130,79 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
 }
 
 :root .mint-landing.swiper {
-  width: 100vw;
   max-width: 100vw;
 }
-:root .mint-landing.swiper {
+:root .mint-landing.swiper .swiper-slide {
+  padding: 0;
+}
+
+.mint-landing {
   top: -4px;
 }
 @media (min-width: 480px) {
-  :root .mint-landing.swiper {
+  .mint-landing {
     top: calc(-4px + -12 * (100vw - 480px) / 288);
   }
 }
 @media (min-width: 768px) {
-  :root .mint-landing.swiper {
+  .mint-landing {
     top: -16px;
   }
 }
-:root .mint-landing.swiper {
+.mint-landing {
   left: -4px;
 }
 @media (min-width: 480px) {
-  :root .mint-landing.swiper {
+  .mint-landing {
     left: calc(-4px + -12 * (100vw - 480px) / 288);
   }
 }
 @media (min-width: 768px) {
-  :root .mint-landing.swiper {
+  .mint-landing {
     left: -16px;
   }
 }
-:root .mint-landing.swiper .swiper-slide {
-  padding: 0;
+.mint-landing {
+  width: calc(100% + 8px);
+}
+@media (min-width: 480px) {
+  .mint-landing {
+    width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
+  }
+}
+@media (min-width: 768px) {
+  .mint-landing {
+    width: calc(100% + 32px);
+  }
 }
-:root .mint-landing .mint-video-bg {
+.mint-landing .mint-video-bg {
+  align-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
   margin: 0;
+  min-height: calc(100vh - var(--mint-header-height));
+}
+.mint-landing .mint-video-bg {
+  padding: 16px;
+}
+@media (min-width: 480px) {
+  .mint-landing .mint-video-bg {
+    padding: calc(16px + 48 * (100vw - 480px) / 288);
+  }
+}
+@media (min-width: 768px) {
+  .mint-landing .mint-video-bg {
+    padding: 64px;
+  }
+}
+.mint-landing .mint-video-bg iframe, .mint-landing .mint-video-bg video {
+  position: absolute;
+}
+@media (min-width: 1200px) {
+  .mint-landing .mint-video-bg iframe + * .mint-grid, .mint-landing .mint-video-bg video + * .mint-grid {
+    margin-bottom: 0;
+  }
 }
 
 .grecaptcha-badge {
@@ -1158,54 +1228,72 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   flex-direction: column;
   align-items: flex-end;
   justify-content: center;
+  flex-direction: row;
+  min-height: calc(100vh - var(--mint-header-height) + 10rem);
   gap: 2rem;
   position: relative;
 }
-@media (min-width: 1200px) {
+.mint-video-bg {
+  top: -4px;
+}
+@media (min-width: 480px) {
   .mint-video-bg {
-    flex-direction: row;
-    min-height: calc(100vh - var(--mint-header-height));
-    margin-bottom: 15%;
+    top: calc(-4px + -12 * (100vw - 480px) / 288);
   }
 }
-@media (min-width: 1200px) {
-  .mint-video-bg > section {
-    margin-bottom: -15%;
+@media (min-width: 768px) {
+  .mint-video-bg {
+    top: -16px;
   }
 }
-.mint-video-bg iframe, .mint-video-bg video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  pointer-events: none;
+.mint-video-bg {
+  left: -4px;
 }
-@media (min-width: 1200px) {
-  .mint-video-bg iframe, .mint-video-bg video {
-    position: absolute;
-    width: 100vw;
-    border: none;
-    padding: 0;
+@media (min-width: 480px) {
+  .mint-video-bg {
+    left: calc(-4px + -12 * (100vw - 480px) / 288);
   }
 }
-@media (min-width: 1200px) {
-  .mint-video-bg iframe + * .mint-grid, .mint-video-bg video + * .mint-grid {
-    margin-bottom: -15%;
+@media (min-width: 768px) {
+  .mint-video-bg {
+    left: -16px;
   }
 }
-.mint-video-bg.mint-overflow {
-  overflow: hidden;
-  margin-bottom: 0;
+.mint-video-bg {
+  width: calc(100% + 8px);
 }
-@media (min-width: 1200px) {
-  .mint-video-bg.mint-overflow > section {
-    margin-bottom: 0;
+@media (min-width: 480px) {
+  .mint-video-bg {
+    width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
+  }
+}
+@media (min-width: 768px) {
+  .mint-video-bg {
+    width: calc(100% + 32px);
+  }
+}
+.mint-video-bg {
+  padding: 4px;
+}
+@media (min-width: 480px) {
+  .mint-video-bg {
+    padding: calc(4px + 12 * (100vw - 480px) / 288);
+  }
+}
+@media (min-width: 768px) {
+  .mint-video-bg {
+    padding: 16px;
   }
 }
-.mint-video-bg.mint-overflow iframe, .mint-video-bg.mint-overflow video {
-  top: -10%;
-  left: -10%;
-  width: 120%;
-  height: 120%;
+.mint-video-bg iframe, .mint-video-bg video, .mint-video-bg .mint-image, .mint-video-bg .mint-embed {
+  position: absolute;
+  top: 0;
+  padding: 0;
+  width: 100%;
+  height: calc(100vh - var(--mint-header-height));
+  border: none;
+  object-fit: cover;
+  pointer-events: none;
 }
 
 @keyframes mint-stretch-in {
@@ -1277,7 +1365,11 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   transition-duration: 300ms;
   transform: translate(100%, -100%);
 }
-.mint-shine:active::after, .mint-shine.mint-active::after {
+.mint-shine:active::after {
+  transition-duration: 300ms;
+  transform: translate(100%, -100%);
+}
+.mint-shine.mint-active::after {
   transition-duration: 300ms;
   transform: translate(100%, -100%);
 }
@@ -3343,45 +3435,84 @@ a:focus-visible .fa-ethereum {
 a:focus-visible .fa-vimeo {
   color: var(--mint-venmo);
 }
-a:active, a.mint-active {
+a:active {
   color: var(--mint-accent-2);
 }
 a:active .fa-facebook,
-a:active .fa-square-facebook, a.mint-active .fa-facebook,
+a:active .fa-square-facebook {
+  color: var(--mint-facebook);
+}
+a:active .fa-instagram::after {
+  opacity: 1;
+}
+a:active .fa-twitter {
+  color: var(--mint-twitter);
+}
+a:active .fa-youtube {
+  color: var(--mint-youtube);
+}
+a:active .fa-spotify {
+  color: var(--mint-spotify);
+}
+a:active .fa-apple {
+  color: var(--mint-apple-music);
+}
+a:active .fa-soundcloud {
+  color: var(--mint-soundcloud);
+}
+a:active .fa-bandcamp {
+  color: var(--mint-bandcamp);
+}
+a:active .fa-github {
+  color: var(--mint-white-1);
+}
+a:active .fa-bitcoin {
+  color: var(--mint-bitcoin);
+}
+a:active .fa-ethereum {
+  color: var(--mint-ethereum);
+}
+a:active .fa-vimeo {
+  color: var(--mint-venmo);
+}
+a.mint-active {
+  color: var(--mint-accent-2);
+}
+a.mint-active .fa-facebook,
 a.mint-active .fa-square-facebook {
   color: var(--mint-facebook);
 }
-a:active .fa-instagram::after, a.mint-active .fa-instagram::after {
+a.mint-active .fa-instagram::after {
   opacity: 1;
 }
-a:active .fa-twitter, a.mint-active .fa-twitter {
+a.mint-active .fa-twitter {
   color: var(--mint-twitter);
 }
-a:active .fa-youtube, a.mint-active .fa-youtube {
+a.mint-active .fa-youtube {
   color: var(--mint-youtube);
 }
-a:active .fa-spotify, a.mint-active .fa-spotify {
+a.mint-active .fa-spotify {
   color: var(--mint-spotify);
 }
-a:active .fa-apple, a.mint-active .fa-apple {
+a.mint-active .fa-apple {
   color: var(--mint-apple-music);
 }
-a:active .fa-soundcloud, a.mint-active .fa-soundcloud {
+a.mint-active .fa-soundcloud {
   color: var(--mint-soundcloud);
 }
-a:active .fa-bandcamp, a.mint-active .fa-bandcamp {
+a.mint-active .fa-bandcamp {
   color: var(--mint-bandcamp);
 }
-a:active .fa-github, a.mint-active .fa-github {
+a.mint-active .fa-github {
   color: var(--mint-white-1);
 }
-a:active .fa-bitcoin, a.mint-active .fa-bitcoin {
+a.mint-active .fa-bitcoin {
   color: var(--mint-bitcoin);
 }
-a:active .fa-ethereum, a.mint-active .fa-ethereum {
+a.mint-active .fa-ethereum {
   color: var(--mint-ethereum);
 }
-a:active .fa-vimeo, a.mint-active .fa-vimeo {
+a.mint-active .fa-vimeo {
   color: var(--mint-venmo);
 }