@compose-market/theme 0.0.82 → 0.0.91

package/dist/css/utilities.css

@@ -0,0 +1,323 @@
+
+/* ── Marquee ── */
+@keyframes cm-marquee-scroll {
+  0%   { transform: translate3d(0, 0, 0); }
+  100% { transform: translate3d(-50%, 0, 0); }
+}
+
+@keyframes cm-marquee-scroll-reverse {
+  0%   { transform: translate3d(-50%, 0, 0); }
+  100% { transform: translate3d(0, 0, 0); }
+}
+
+@keyframes cm-partner-scanline {
+  0% { transform: translate3d(0, -100px, 0); }
+  100% { transform: translate3d(0, calc(100vh + 100px), 0); }
+}
+
+.cm-marquee-track {
+  animation: cm-marquee-scroll linear infinite;
+  will-change: transform;
+}
+
+.cm-marquee-track-reverse {
+  animation: cm-marquee-scroll-reverse linear infinite;
+  will-change: transform;
+}
+
+/* ── Partner Blocks ── */
+.cm-partners {
+  container-type: inline-size;
+  display: grid;
+  gap: clamp(0.85rem, 3cqi, 1.4rem);
+  width: 100%;
+  min-width: 0;
+}
+
+.cm-partners__backing {
+  display: grid;
+  grid-template-columns: minmax(13rem, 0.75fr) minmax(0, 1.25fr);
+  align-items: center;
+  gap: clamp(0.8rem, 3cqi, 1.4rem);
+  min-width: 0;
+}
+
+.cm-partners__copy {
+  display: grid;
+  gap: 0.32rem;
+  min-width: 0;
+}
+
+.cm-partners__label {
+  color: hsl(var(--muted-foreground) / 0.86);
+  font-family: var(--font-mono), monospace;
+  font-size: clamp(0.62rem, 2cqi, 0.78rem);
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  line-height: 1.1;
+  text-transform: uppercase;
+}
+
+.cm-partners__title {
+  color: transparent;
+  background: linear-gradient(90deg, #8aebff, #dce1fb 48%, #fbabff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  font-family: var(--font-display), Orbitron, sans-serif;
+  font-size: clamp(0.98rem, 4cqi, 1.45rem);
+  font-weight: 850;
+  letter-spacing: 0.02em;
+  line-height: 0.98;
+  overflow-wrap: anywhere;
+  text-transform: uppercase;
+}
+
+.cm-partners__badges {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: clamp(0.7rem, 2.4cqi, 1rem);
+  min-width: 0;
+}
+
+.cm-partner-badge {
+  position: relative;
+  display: grid;
+  min-width: 0;
+  min-height: clamp(4.25rem, 13cqi, 5.6rem);
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid hsl(var(--primary) / 0.18);
+  border-radius: 12px;
+  background:
+    linear-gradient(145deg, hsl(226 21% 23% / 0.34), hsl(221 50% 9% / 0.24)),
+    radial-gradient(circle at 50% 0%, hsl(var(--primary) / 0.12), transparent 64%);
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.07),
+    0 0 36px hsl(var(--primary) / 0.05);
+  padding: clamp(0.72rem, 2.4cqi, 1rem);
+  backdrop-filter: blur(16px) saturate(1.12);
+  transition:
+    transform 180ms ease,
+    border-color 220ms ease,
+    box-shadow 220ms ease;
+}
+
+.cm-partner-badge::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  pointer-events: none;
+  background:
+    linear-gradient(135deg, hsl(var(--primary) / 0.14), transparent 48%),
+    linear-gradient(315deg, hsl(var(--accent) / 0.14), transparent 52%);
+  opacity: 0.55;
+}
+
+.cm-partner-badge::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  top: -100px;
+  height: 100px;
+  pointer-events: none;
+  background: linear-gradient(180deg, transparent, hsl(0 0% 100% / 0.055), transparent);
+  opacity: 0.75;
+  animation: cm-partner-scanline 4s linear infinite;
+  will-change: transform;
+}
+
+.cm-partner-badge[data-tone="green"] {
+  border-color: hsl(142 71% 45% / 0.34);
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.07),
+    0 0 36px hsl(142 71% 45% / 0.08);
+}
+
+.cm-partner-badge[data-tone="blue"] {
+  border-color: hsl(217 91% 60% / 0.34);
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.07),
+    0 0 36px hsl(217 91% 60% / 0.08);
+}
+
+.cm-partner-badge[data-tone="purple"],
+.cm-partner-badge[data-tone="violet"] {
+  border-color: hsl(var(--accent) / 0.34);
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.07),
+    0 0 36px hsl(var(--accent) / 0.08);
+}
+
+.cm-partner-badge:hover,
+.cm-partner-badge:focus-visible {
+  transform: translateY(-1px);
+  border-color: hsl(var(--primary) / 0.5);
+  outline: none;
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.08),
+    0 0 28px hsl(var(--primary) / 0.14);
+}
+
+.cm-partner-badge img {
+  position: relative;
+  z-index: 1;
+  width: auto;
+  max-width: min(100%, 18rem);
+  height: clamp(2rem, 7cqi, 3.45rem);
+  object-fit: contain;
+}
+
+.cm-partner-marquee {
+  position: relative;
+  display: grid;
+  gap: clamp(0.58rem, 1.8cqi, 0.85rem);
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.cm-partner-marquee::before,
+.cm-partner-marquee::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  z-index: 2;
+  width: clamp(2rem, 8cqi, 5rem);
+  pointer-events: none;
+}
+
+.cm-partner-marquee::before {
+  left: 0;
+  background: linear-gradient(90deg, hsl(var(--background) / 0.9), transparent);
+}
+
+.cm-partner-marquee::after {
+  right: 0;
+  background: linear-gradient(270deg, hsl(var(--background) / 0.9), transparent);
+}
+
+.cm-partner-logo {
+  display: grid;
+  height: clamp(2.45rem, 7cqi, 3rem);
+  min-width: clamp(6.4rem, 18cqi, 8.7rem);
+  place-items: center;
+  flex: 0 0 auto;
+  border: 1px solid hsl(var(--primary) / 0.12);
+  border-radius: 10px;
+  background: hsl(221 50% 9% / 0.34);
+  padding-inline: clamp(0.8rem, 2.6cqi, 1.15rem);
+  transition:
+    transform 180ms ease,
+    border-color 220ms ease,
+    background-color 220ms ease,
+    box-shadow 220ms ease;
+}
+
+.cm-partner-logo:hover {
+  transform: translateY(-1px);
+  border-color: hsl(var(--primary) / 0.46);
+  background: hsl(221 50% 9% / 0.52);
+  box-shadow: 0 0 20px hsl(var(--primary) / 0.1);
+}
+
+.cm-partner-logo img {
+  width: auto;
+  max-width: 6.25rem;
+  height: clamp(0.85rem, 3cqi, 1.25rem);
+  object-fit: contain;
+  filter: grayscale(1) brightness(0.74);
+  opacity: 0.76;
+  transition: filter 220ms ease, opacity 220ms ease;
+}
+
+.cm-partner-logo:hover img {
+  filter: grayscale(0) brightness(1.1);
+  opacity: 1;
+}
+
+@container (max-width: 42rem) {
+  .cm-partners__backing {
+    grid-template-columns: 1fr;
+  }
+}
+
+@container (max-width: 24rem) {
+  .cm-partners__badges {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Safe Area ── */
+.cm-safe-area-top    { padding-top: env(safe-area-inset-top); }
+.cm-safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
+.cm-safe-area-left   { padding-left: env(safe-area-inset-left); }
+.cm-safe-area-right  { padding-right: env(safe-area-inset-right); }
+
+.cm-safe-area-x {
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+.cm-safe-area-y {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* ── Touch ── */
+.cm-touch-manipulation {
+  touch-action: manipulation;
+}
+
+.cm-no-select {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* ── Scrollbar Hide ── */
+.cm-scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.cm-scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* ── Text Truncation ── */
+.cm-text-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* ── Touch Targets (mobile ≤ 768px) ── */
+@media (max-width: 768px) {
+  .cm-touch-target {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+
+/* ── Mobile Scrollbar (thinner for ≤ 768px) ── */
+@media (max-width: 768px) {
+  .cm-thin-scrollbar::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cm-marquee-track,
+  .cm-marquee-track-reverse,
+  .cm-partner-badge::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+
+  .cm-partner-logo,
+  .cm-partner-badge,
+  .cm-partner-logo img {
+    transition-duration: 0.01ms !important;
+  }
+}