@chinggis.systems/collection-ui 1.0.2 → 1.0.4

package/dist/styles.css

@@ -1,12 +1,16 @@
 @import "swiper/css";
 @import "swiper/css/navigation";
+@import "swiper/css/pagination";
 
 .collection-ui {
   --collection-ui-bg: transparent;
   --collection-ui-band-bg: var(--color-fg-alt, rgb(0 0 0 / 4%));
   --collection-ui-card-bg: transparent;
   --collection-ui-fg: var(--color-t-default, inherit);
-  --collection-ui-muted: var(--color-t-muted, color-mix(in srgb, currentColor 62%, transparent));
+  --collection-ui-muted: var(
+    --color-t-muted,
+    color-mix(in srgb, currentColor 62%, transparent)
+  );
   --collection-ui-link: var(--color-link, #0f79d0);
   --collection-ui-button-bg: #f6a0a8;
   --collection-ui-button-fg: #151515;
@@ -20,7 +24,10 @@
   --collection-ui-bg: var(--color-bg-default, transparent);
   --collection-ui-band-bg: var(--color-fg-main, transparent);
   --collection-ui-fg: var(--color-t-default, inherit);
-  --collection-ui-muted: var(--color-t-muted, color-mix(in srgb, currentColor 62%, transparent));
+  --collection-ui-muted: var(
+    --color-t-muted,
+    color-mix(in srgb, currentColor 62%, transparent)
+  );
   --collection-ui-link: var(--color-link, #0f79d0);
   --collection-ui-button-bg: #6e0b0f;
   --collection-ui-button-fg: var(--color-fg-main, #151515);
@@ -156,12 +163,16 @@
   display: none;
 }
 
-.collection-ui-horizontal .collection-ui-title__link {
+.collection-ui-horizontal .collection-ui-title__link,
+.collection-ui-grid-double .collection-ui-title__link,
+.collection-ui-grid-special .collection-ui-title__link {
   display: block;
 }
 
 .collection-ui-horizontal,
-.collection-ui-grid {
+.collection-ui-grid,
+.collection-ui-grid-double,
+.collection-ui-grid-special {
   min-width: 0;
   position: relative;
 }
@@ -198,6 +209,58 @@
   width: max-content;
 }
 
+.collection-ui-new-layout-carousel {
+  margin-top: 24px;
+  padding-bottom: 20px;
+}
+
+.collection-ui-grid-double__track,
+.collection-ui-grid-special__track {
+  margin-inline: -16px;
+  overflow: visible;
+  padding: 0 16px 28px;
+}
+
+.collection-ui-grid-double__slide,
+.collection-ui-grid-special__slide {
+  height: auto;
+  overflow: visible;
+  width: max-content !important;
+}
+
+.collection-ui-grid-double__panel {
+  display: grid;
+  gap: 12px 8px;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  grid-template-rows: repeat(2, minmax(0, auto));
+}
+
+.collection-ui-grid-double__item,
+.collection-ui-grid-special__item {
+  min-width: 0;
+}
+
+.collection-ui-grid-special__panel {
+  align-items: stretch;
+  display: flex;
+  gap: 12px;
+  width: max-content;
+}
+
+.collection-ui-grid-special__featured {
+  align-items: flex-end;
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+}
+
+.collection-ui-grid-special__items {
+  display: grid;
+  gap: 10px 10px;
+  grid-template-columns: repeat(2, max-content);
+}
+
 .collection-ui-grid-title.collection-ui-grid-title {
   margin-inline: -16px;
   padding-inline: 16px;
@@ -227,10 +290,11 @@
 
 .collection-ui-view-all {
   align-items: center;
-  background: linear-gradient(135deg, #1f2937, #111827);
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 2px;
-  color: rgb(212 212 212);
+  background: var(--color-fg-main, #fff);
+  border: 1px solid var(--color-border-main, rgb(0 0 0 / 10%));
+  border-radius: 6px;
+  box-shadow: 0 14px 30px rgb(0 0 0 / 8%);
+  color: var(--collection-ui-link);
   display: flex;
   flex-direction: column;
   font-size: 0.875rem;
@@ -240,23 +304,26 @@
   overflow: hidden;
   padding: 24px;
   position: relative;
-  transition: border-color 300ms ease, color 300ms ease;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
   width: 180px;
 }
 
 .collection-ui-view-all:hover {
-  border-color: rgb(255 255 255 / 20%);
-  color: white;
+  border-color: color-mix(in srgb, var(--collection-ui-link) 35%, transparent);
+  box-shadow: 0 18px 36px rgb(0 0 0 / 12%);
+  transform: translateY(-2px);
 }
 
 .collection-ui-view-all::before {
-  background: linear-gradient(135deg, rgb(14 165 233 / 10%), rgb(168 85 247 / 10%));
+  background: color-mix(in srgb, var(--collection-ui-link) 8%, transparent);
   content: "";
-  filter: blur(16px);
   inset: 0;
   opacity: 0;
   position: absolute;
-  transition: opacity 500ms ease;
+  transition: opacity 160ms ease;
 }
 
 .collection-ui-view-all:hover::before {
@@ -265,21 +332,23 @@
 
 .collection-ui-view-all__icon {
   align-items: center;
-  background: rgb(38 38 38);
+  background: color-mix(in srgb, var(--collection-ui-link) 10%, transparent);
   border-radius: 999px;
-  color: rgb(56 189 248);
+  color: var(--collection-ui-link);
   display: inline-flex;
   font-size: 1.5rem;
   height: 56px;
   justify-content: center;
   margin-bottom: 16px;
   position: relative;
-  transition: background-color 300ms ease, transform 200ms ease;
+  transition:
+    background-color 300ms ease,
+    transform 200ms ease;
   width: 56px;
 }
 
 .collection-ui-view-all:hover .collection-ui-view-all__icon {
-  background: rgb(14 165 233 / 20%);
+  background: color-mix(in srgb, var(--collection-ui-link) 16%, transparent);
   transform: translateX(4px);
 }
 
@@ -290,12 +359,14 @@
 
 .collection-ui-grid__items {
   display: grid;
-  gap: 32px 16px;
+  gap: 36px 20px;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   padding-top: 16px;
 }
 
 .collection-ui-grid__item {
+  display: flex;
+  justify-content: center;
   min-width: 0;
 }
 
@@ -304,6 +375,26 @@
   width: 100%;
 }
 
+.collection-ui-grid__item .we-lockup {
+  max-width: min(100%, 190px);
+  width: 190px;
+}
+
+.collection-ui-grid__item .we-book-overlay {
+  margin-inline: auto;
+  max-width: 100%;
+}
+
+.collection-detail-page .collection-ui-grid__item .we-book-overlay {
+  width: var(--spine-width, 180px);
+}
+
+.collection-detail-page .collection-ui-grid__item .we-artwork__image {
+  height: var(--spine-height, 266px) !important;
+  object-fit: cover;
+  width: 100% !important;
+}
+
 .collection-ui-grid__item .collection-ui-card__media,
 .collection-ui-grid__view-all {
   min-height: 168px;
@@ -360,6 +451,33 @@
   width: 112px;
 }
 
+.collection-ui-card--image-only {
+  justify-content: flex-end;
+  width: 88px;
+}
+
+.collection-ui-grid-special
+  .collection-ui-card--image-only:not(.collection-ui-card--featured) {
+  width: auto;
+}
+
+.collection-ui-card--image-only .collection-ui-card__media {
+  min-height: 0;
+}
+
+.collection-ui-card--image-only .we-book-overlay {
+  margin-bottom: 0;
+}
+
+.collection-ui-grid-double .we-book-overlay,
+.collection-ui-grid-special .we-book-overlay {
+  margin-bottom: 0;
+}
+
+.collection-ui-card--featured {
+  width: auto;
+}
+
 .collection-ui-card__media {
   align-items: flex-end;
   display: flex;
@@ -367,6 +485,10 @@
   min-height: 144px;
 }
 
+.collection-ui-card__media--featured {
+  min-height: 0;
+}
+
 .collection-ui-card__body {
   display: flex;
   gap: 8px;
@@ -619,16 +741,36 @@
   align-items: center;
   background: var(--collection-ui-special-panel);
   display: grid;
-  gap: 24px;
+  gap: clamp(24px, 2vw, 40px);
   justify-items: center;
+  min-height: clamp(320px, 21vw, 390px);
+  overflow: visible;
   padding: 0;
   width: 100%;
 }
 
 .collection-ui-special-item__media {
+  align-items: center;
+  aspect-ratio: 0.72;
   display: flex;
+  height: clamp(282px, 22vw, 354px);
   justify-content: center;
-  transform: scale(1.08);
+  max-width: 100%;
+  min-width: 0;
+  overflow: visible;
+  transform: translateY(clamp(-34px, -2vw, -18px));
+  width: clamp(216px, 20vw, 318px);
+}
+
+.collection-ui-special-item__media > *,
+.collection-ui-special-item__media img,
+.collection-ui-special-item__media .we-book-overlay {
+  max-height: calc(100% + 44px);
+  max-width: 100%;
+}
+
+.collection-ui-special-item__media .we-book-overlay {
+  margin-bottom: 0;
 }
 
 .collection-ui--preview .collection-ui-special-section,
@@ -657,6 +799,7 @@
 .collection-ui-special-item__description {
   color: var(--collection-ui-muted);
   font-size: 1rem;
+  line-height: 1.55;
   max-width: 560px;
 }
 
@@ -669,12 +812,18 @@
 }
 
 .collection-ui-special-item__button {
+  border-radius: 8px;
   margin-top: 0;
+  min-height: 40px;
+  padding: 0 18px;
 }
 
 .collection-ui-band {
   background: var(--collection-ui-band-bg);
-  padding-block: 32px;
+}
+
+.collection-ui-band--special {
+  padding-block: 0;
 }
 
 .collection-ui--ecommerce .collection-ui-band {
@@ -706,8 +855,42 @@
   min-width: 0;
 }
 
+.collection-ui-banner-carousel,
+.collection-ui-slide__track {
+  padding-bottom: 28px;
+}
+
+.collection-ui-banner-carousel .swiper-pagination,
+.collection-ui-slide__track .swiper-pagination {
+  bottom: 4px;
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.collection-ui-banner-carousel .swiper-pagination-bullet,
+.collection-ui-slide__track .swiper-pagination-bullet {
+  background: rgb(255 255 255 / 70%);
+  border-radius: 999px;
+  height: 6px;
+  margin: 0 !important;
+  opacity: 1;
+  transition:
+    background-color 220ms ease,
+    transform 220ms ease,
+    width 220ms ease;
+  width: 6px;
+}
+
+.collection-ui-banner-carousel .swiper-pagination-bullet-active,
+.collection-ui-slide__track .swiper-pagination-bullet-active {
+  background: var(--collection-ui-link);
+  transform: scale(1.05);
+  width: 22px;
+}
+
 .collection-ui-banner-carousel__slide {
-  height: auto;
+  height: 100%;
 }
 
 .collection-ui-banner__copy {
@@ -746,11 +929,32 @@
   width: 100%;
 }
 
+.collection-ui-banner__image {
+  height: 100%;
+}
+
+.collection-ui-featured-card__image {
+  height: auto;
+}
+
+.collection-ui-featured-card__media {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+.collection-ui-featured-card__image-background {
+  display: none;
+}
+
 .collection-ui-banner__media-link {
+  aspect-ratio: 16 / 9;
   border-radius: 8px;
   display: block;
+  max-height: 260px;
   overflow: hidden;
   min-width: 0;
+  width: 100%;
 }
 
 .collection-ui-banner__image--zoom {
@@ -759,7 +963,9 @@
   will-change: transform;
 }
 
-.collection-ui-banner-carousel .swiper-slide-active .collection-ui-banner__image--zoom {
+.collection-ui-banner-carousel
+  .swiper-slide-active
+  .collection-ui-banner__image--zoom {
   transform: scale(1.06);
 }
 
@@ -768,11 +974,12 @@
   background: #030712;
   border-radius: 8px;
   display: flex;
+  height: 100%;
   justify-content: center;
-  min-height: 260px;
   overflow: hidden;
   padding: 32px;
   position: relative;
+  width: 100%;
 }
 
 .collection-ui-banner-source__background {
@@ -785,7 +992,12 @@
 }
 
 .collection-ui-banner-source__overlay {
-  background: linear-gradient(135deg, rgb(0 0 0 / 40%), rgb(255 255 255 / 10%), rgb(0 0 0 / 55%));
+  background: linear-gradient(
+    135deg,
+    rgb(0 0 0 / 40%),
+    rgb(255 255 255 / 10%),
+    rgb(0 0 0 / 55%)
+  );
   inset: 0;
   position: absolute;
 }
@@ -830,7 +1042,9 @@
   min-width: 152px;
   padding: 10px 32px;
   text-align: center;
-  transition: background-color 160ms ease, transform 160ms ease;
+  transition:
+    background-color 160ms ease,
+    transform 160ms ease;
   white-space: nowrap;
 }
 
@@ -853,11 +1067,197 @@
   display: none;
 }
 
+.collection-ui-slide {
+  overflow: hidden;
+  width: 100%;
+}
+
+.collection-ui-slide__track {
+  overflow: visible;
+  width: 100%;
+}
+
+.collection-ui-slide__slide {
+  opacity: 0.58;
+  transform: scale(0.965);
+  transition:
+    opacity 450ms ease,
+    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
+  width: min(90dvw, calc(100% - 128px), 1504px);
+}
+
+.collection-ui-slide__slide.swiper-slide-active {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.collection-ui-slide__slide,
+.collection-ui-slide__item,
+.collection-ui-slide .collection-ui-featured-card {
+  height: 100%;
+}
+
+.collection-ui-slide .collection-ui-featured-card {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.collection-ui-slide .collection-ui-featured-card__media {
+  align-items: center;
+  aspect-ratio: 15 / 4;
+  background: #030712;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.collection-ui-slide .collection-ui-featured-card__media::after {
+  background:
+    linear-gradient(90deg, rgb(0 0 0 / 62%), rgb(0 0 0 / 20%) 48%, transparent),
+    linear-gradient(0deg, rgb(0 0 0 / 56%), transparent 48%);
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.collection-ui-slide .collection-ui-featured-card__image-background {
+  display: block;
+  filter: blur(24px);
+  height: 100%;
+  inset: 0;
+  object-fit: cover;
+  opacity: 0.72;
+  position: absolute;
+  transform: scale(1.08);
+  width: 100%;
+}
+
+.collection-ui-slide .collection-ui-featured-card__image {
+  filter: drop-shadow(0 16px 30px rgb(0 0 0 / 28%));
+  height: 100% !important;
+  object-fit: contain;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.collection-ui-slide .collection-ui-featured-card__body {
+  bottom: clamp(18px, 3.5vw, 48px);
+  color: #fff;
+  left: clamp(18px, 4vw, 64px);
+  max-width: min(560px, 58%);
+  padding: 0;
+  position: absolute;
+  text-shadow: 0 2px 14px rgb(0 0 0 / 36%);
+  transform: translateY(10px);
+  transition:
+    opacity 450ms ease,
+    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
+  z-index: 3;
+}
+
+.collection-ui-slide__slide:not(.swiper-slide-active)
+  .collection-ui-featured-card__body {
+  opacity: 0;
+  transform: translateY(22px);
+}
+
+.collection-ui-slide .collection-ui-featured-card__title {
+  font-size: clamp(1.25rem, 2.4vw, 2.5rem);
+  font-weight: 600;
+  line-height: 1.15;
+  margin-bottom: 12px;
+}
+
+.collection-ui-slide .collection-ui-featured-card__description {
+  display: -webkit-box;
+  font-size: clamp(0.8125rem, 1vw, 1rem);
+  line-height: 1.5;
+  margin-bottom: 16px;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.collection-ui-slide .collection-ui-featured-card__link {
+  align-items: center;
+  background: rgb(255 255 255 / 90%);
+  border-radius: 999px;
+  color: #111827;
+  display: inline-flex;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  min-height: 36px;
+  padding: 0 16px;
+  text-shadow: none;
+}
+
+.collection-ui-slide__autoplay-progress {
+  align-items: center;
+  background: rgb(0 0 0 / 28%);
+  border-radius: 999px;
+  bottom: 20px;
+  display: flex;
+  height: 46px;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  right: 20px;
+  width: 46px;
+  z-index: 4;
+}
+
+.collection-ui-slide__autoplay-progress svg {
+  height: 100%;
+  transform: rotate(-90deg);
+  width: 100%;
+}
+
+.collection-ui-slide__autoplay-track,
+.collection-ui-slide__autoplay-value {
+  fill: none;
+  stroke-linecap: round;
+  stroke-width: 4;
+}
+
+.collection-ui-slide__autoplay-track {
+  stroke: rgb(255 255 255 / 32%);
+}
+
+.collection-ui-slide__autoplay-value {
+  stroke: #fff;
+  transition: stroke-dashoffset 80ms linear;
+}
+
+.collection-ui-slide__autoplay-progress span {
+  color: #fff;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  left: 50%;
+  line-height: 1;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .collection-ui-featured {
   display: grid;
   gap: 24px;
 }
 
+.collection-ui-banner-grid {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(
+    var(--collection-ui-columns, 1),
+    minmax(0, 1fr)
+  );
+}
+
 .collection-ui-featured-card__body {
   padding: 16px 0 0;
 }
@@ -905,31 +1305,45 @@
   align-items: center;
   display: grid;
   gap: 28px;
-  grid-template-columns: repeat(var(--collection-ui-columns, 2), minmax(0, 1fr));
+  grid-template-columns: repeat(
+    var(--collection-ui-columns, 2),
+    minmax(0, 1fr)
+  );
   justify-content: center;
   margin-top: 32px;
 }
 
 .collection-ui-image-grid__item {
+  align-items: center;
   display: flex;
+  flex: 0 1 auto;
   justify-content: center;
+  min-height: 96px;
+  min-width: 0;
 }
 
 .collection-ui-image-grid__image {
   border-radius: 8px;
   display: block;
-  height: auto;
   max-width: 100%;
-  object-fit: cover;
+  object-fit: contain;
+  width: 176px;
+  height: 96px;
 }
 
 .collection-ui-image-grid--circle .collection-ui-image-grid__image {
   height: 128px;
+  object-fit: cover;
   width: 128px;
 }
 
+.collection-ui-image-grid--circle .collection-ui-image-grid__item {
+  min-height: 128px;
+}
+
 .collection-ui-image-grid--block .collection-ui-image-grid__image {
-  max-height: 96px;
+  height: 96px;
+  width: 176px;
 }
 
 .collection-ui-image-grid__image--circle {
@@ -939,6 +1353,13 @@
 
 .collection-ui-image-grid__image--square {
   aspect-ratio: 1;
+  height: 176px;
+  object-fit: cover;
+  width: 176px;
+}
+
+.collection-ui-image-grid--square .collection-ui-image-grid__item {
+  min-height: 176px;
 }
 
 .collection-ui--preview .collection-ui-image-grid__items {
@@ -951,6 +1372,55 @@
   width: auto;
 }
 
+@media (max-width: 767px) {
+  .collection-ui-slide__slide {
+    width: min(90dvw, calc(100% - 32px));
+  }
+
+  .collection-ui-slide .collection-ui-featured-card__media {
+    aspect-ratio: 16 / 7;
+  }
+
+  .collection-ui-slide .collection-ui-featured-card__body {
+    bottom: 16px;
+    left: 16px;
+    max-width: calc(100% - 32px);
+  }
+
+  .collection-ui-slide .collection-ui-featured-card__description {
+    display: none;
+  }
+
+  .collection-ui-slide .collection-ui-featured-card__link {
+    min-height: 32px;
+    padding: 0 12px;
+  }
+
+  .collection-ui-slide__autoplay-progress {
+    bottom: 12px;
+    height: 36px;
+    right: 12px;
+    width: 36px;
+  }
+
+  .collection-ui-grid-special__panel {
+    gap: 18px;
+    grid-template-columns: minmax(116px, auto) minmax(104px, auto);
+  }
+
+  .collection-ui-grid-special__items {
+    grid-template-columns: minmax(104px, auto);
+  }
+
+  .collection-ui-card--featured {
+    width: 136px;
+  }
+
+  .collection-ui-card__media--featured {
+    min-height: 204px;
+  }
+}
+
 @media (min-width: 768px) {
   .collection-ui-title__controls {
     display: flex;
@@ -982,18 +1452,18 @@
     padding: 0 32px 24px 0;
   }
 
-  .collection-ui-banner > a {
+  .collection-ui-banner__media-link {
     display: block;
     grid-column: span 8 / span 8;
+    max-height: 500px;
   }
 
   .collection-ui-banner-source {
-    min-height: 420px;
     padding: 48px;
   }
 
   .collection-ui-banner-source__frame {
-    height: 420px;
+    height: min(420px, 100%);
     width: 300px;
   }
 
@@ -1002,11 +1472,21 @@
   }
 
   .collection-ui-featured {
-    grid-template-columns: repeat(var(--collection-ui-columns, 2), minmax(0, 1fr));
+    grid-template-columns: repeat(
+      var(--collection-ui-columns, 2),
+      minmax(0, 1fr)
+    );
+  }
+
+  .collection-ui-banner-grid {
+    gap: 24px;
   }
 
   .collection-ui-featured--three {
-    grid-template-columns: repeat(var(--collection-ui-columns, 3), minmax(0, 1fr));
+    grid-template-columns: repeat(
+      var(--collection-ui-columns, 3),
+      minmax(0, 1fr)
+    );
   }
 
   .collection-ui-carousel__controls {
@@ -1020,7 +1500,10 @@
   }
 
   .collection-ui-special-item {
-    grid-template-columns: minmax(160px, 0.28fr) minmax(0, 0.52fr) minmax(156px, 0.2fr);
+    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(
+        176px,
+        220px
+      );
     justify-items: stretch;
   }
 
@@ -1031,16 +1514,34 @@
   .collection-ui-image-grid__items {
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
   }
 
   .collection-ui-image-grid--circle .collection-ui-image-grid__items {
-    flex-wrap: nowrap;
     gap: clamp(24px, 4vw, 56px);
   }
 
   .collection-ui-image-grid--block .collection-ui-image-grid__items {
     gap: 16px;
   }
+
+  .collection-ui-image-grid__item {
+    flex-basis: calc(
+      100% / var(--collection-ui-columns, 4) -
+        var(--collection-ui-image-grid-gap, 28px)
+    );
+    max-width: 220px;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__item {
+    --collection-ui-image-grid-gap: clamp(24px, 4vw, 56px);
+    flex-basis: auto;
+    max-width: 168px;
+  }
+
+  .collection-ui-image-grid--block .collection-ui-image-grid__item {
+    --collection-ui-image-grid-gap: 16px;
+  }
 }
 
 @media (min-width: 1200px) {