@primestyleai/tryon 5.8.28 → 5.8.29

package/dist/react/index.js

@@ -965,10 +965,11 @@ const STYLES = `
     height: 100%; overflow: hidden;
   }
 
-  /* Left image column — proper contained display */
+  /* Left image column — proper contained display.
+     No background — the product/try-on image sits directly on the modal
+     surface without a gray placeholder box behind it. */
   .ps-tryon-v2-bg {
     flex: 0 0 43%; position: relative; min-width: 0;
-    background: var(--ps-bg-secondary);
     border-radius: 0.9vw; overflow: hidden;
     display: flex; align-items: center; justify-content: center;
   }
@@ -4516,10 +4517,11 @@ const STYLES = `
   }
   .ps-cpw-field {
     display: flex; flex-direction: column;
-    gap: 6px;
+    gap: clamp(4px, 0.4vw, 10px);
   }
   .ps-cpw-field-label {
-    font-size: 10px; font-weight: 700;
+    font-size: clamp(9px, 0.62vw, 12px);
+    font-weight: 700;
     letter-spacing: 0.14em; text-transform: uppercase;
     color: var(--ps-text-muted);
   }
@@ -4527,8 +4529,10 @@ const STYLES = `
     background: transparent; border: none;
     border-bottom: 1px solid var(--ps-border-color);
     color: var(--ps-text-primary);
-    font-family: inherit; font-size: 18px; font-weight: 500;
-    padding: 6px 0 8px;
+    font-family: inherit;
+    font-size: clamp(13px, 0.95vw, 18px);
+    font-weight: 500;
+    padding: clamp(4px, 0.4vw, 10px) 0 clamp(6px, 0.55vw, 12px);
     outline: none;
     transition: border-color 0.15s;
   }
@@ -4566,29 +4570,31 @@ const STYLES = `
 
   .ps-cpw-field-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 24px;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 11vw, 220px), 1fr));
+    gap: clamp(14px, 1.2vw, 28px);
   }
 
   /* Two-column split: inputs stacked left, photo right */
   .ps-cpw-split {
     display: grid;
-    grid-template-columns: 1fr 280px;
-    gap: 28px;
+    grid-template-columns: 1fr clamp(180px, 14vw, 320px);
+    gap: clamp(16px, 1.4vw, 32px);
     align-items: start;
   }
   .ps-cpw-split-left {
-    display: flex; flex-direction: column; gap: 22px;
+    display: flex; flex-direction: column;
+    gap: clamp(14px, 1.2vw, 24px);
     min-width: 0;
   }
   .ps-cpw-split-right {
-    display: flex; flex-direction: column; gap: 8px;
+    display: flex; flex-direction: column;
+    gap: clamp(6px, 0.55vw, 12px);
     min-width: 0;
   }
   .ps-cpw-error {
-    font-size: 12px;
+    font-size: clamp(10px, 0.72vw, 13px);
     color: var(--ps-error-color);
-    margin-top: -6px;
+    margin-top: calc(clamp(4px, 0.4vw, 10px) * -1);
   }
 
   /* Optional photo upload (step 1) */
@@ -4644,67 +4650,84 @@ const STYLES = `
     display: flex; align-items: center; justify-content: center;
   }
 
-  /* Step 2 — Silhouette */
+  /* Step 2 — Silhouette (vw-scaled) */
   .ps-cpw-silhouette {
-    display: flex; flex-direction: column; gap: 28px;
+    display: flex; flex-direction: column;
+    gap: clamp(16px, 1.4vw, 32px);
   }
   .ps-cpw-section {
-    display: flex; flex-direction: column; gap: 14px;
+    display: flex; flex-direction: column;
+    gap: clamp(8px, 0.7vw, 16px);
   }
   .ps-cpw-section-head {
-    display: flex; flex-direction: column; gap: 4px;
+    display: flex; flex-direction: column;
+    gap: clamp(2px, 0.2vw, 6px);
   }
   .ps-cpw-section-title {
-    font-size: 11px; font-weight: 700;
+    font-size: clamp(10px, 0.72vw, 14px);
+    font-weight: 700;
     letter-spacing: 0.14em; text-transform: uppercase;
     color: var(--ps-text-primary);
   }
   .ps-cpw-section-sub {
-    font-size: 12px; font-weight: 400;
+    font-size: clamp(10px, 0.7vw, 13px);
+    font-weight: 400;
     color: var(--ps-text-muted);
   }
   .ps-cpw-card-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
+    gap: clamp(8px, 0.75vw, 16px);
+    /* Inside a flex parent (ProgressiveStep with flex:1), let the row
+       claim leftover vertical space so the cards stretch to fill it. */
+    flex: 1; min-height: 0;
   }
   .ps-cpw-bra-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 12px;
+    gap: clamp(8px, 0.75vw, 16px);
   }
   .ps-cpw-bra-field {
-    display: flex; flex-direction: column; gap: 6px;
+    display: flex; flex-direction: column;
+    gap: clamp(4px, 0.4vw, 10px);
   }
   .ps-cpw-card {
     display: flex; flex-direction: column; align-items: center;
     background: var(--ps-bg-primary);
     border: 2px solid var(--ps-border-subtle);
-    border-radius: 10px;
-    padding: 14px 8px 10px;
+    border-radius: clamp(8px, 0.6vw, 14px);
+    padding: clamp(10px, 0.85vw, 18px) clamp(6px, 0.5vw, 12px) clamp(8px, 0.65vw, 14px);
     cursor: pointer; font-family: inherit;
     transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
+    /* Stretch inside the grid track so all 3 cards in the row fill
+       the available height equally. */
+    min-width: 0; min-height: 0;
   }
   .ps-cpw-card:hover {
     border-color: rgba(33, 84, 239, 0.35);
   }
   .ps-cpw-card.ps-active {
     border-color: var(--ps-accent);
-    box-shadow: 0 6px 16px rgba(33, 84, 239, 0.12);
+    box-shadow: 0 0.4vw 1.1vw rgba(33, 84, 239, 0.16);
     transform: translateY(-1px);
   }
   .ps-cpw-card-thumb {
-    width: 100%; height: 110px;
+    width: 100%;
+    /* Fills whatever space the card has — combined with the card's
+       min-height: 0, this lets the thumb image grow with viewport size
+       and stretch to fill the wizard body. */
+    flex: 1; min-height: 0;
     display: flex; align-items: center; justify-content: center;
     overflow: hidden;
-    margin-bottom: 8px;
+    margin-bottom: clamp(4px, 0.4vw, 10px);
   }
   .ps-cpw-card-thumb img {
     max-width: 100%; max-height: 100%;
     object-fit: contain;
   }
   .ps-cpw-card-label {
-    font-size: 10px; font-weight: 700;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 700;
     letter-spacing: 0.12em; text-transform: uppercase;
     color: var(--ps-text-muted);
   }
@@ -4753,34 +4776,18 @@ const STYLES = `
   .ps-cpw-next-btn:hover { opacity: 0.92; }
   .ps-cpw-next-btn:active { transform: scale(0.98); }
 
-  @media (max-width: 768px) {
-    .ps-cpw-root { gap: 14px; }
-    .ps-cpw-step-head {
-      flex-direction: column; gap: 10px;
-      padding-bottom: 12px;
-    }
-    .ps-cpw-progress { min-width: 0; width: 100%; align-items: flex-start; margin-top: 0; }
-    .ps-cpw-step-title { font-size: 22px; }
-    .ps-cpw-field-grid { grid-template-columns: 1fr; gap: 18px; }
-    .ps-cpw-split { grid-template-columns: 1fr; gap: 18px; }
-    .ps-cpw-photo-preview { max-width: 220px; }
-    .ps-cpw-card-row { gap: 8px; }
-    .ps-cpw-card { padding: 10px 6px 8px; }
-    .ps-cpw-card-thumb { height: 80px; }
-    .ps-cpw-card-label { font-size: 9px; }
-    .ps-cpw-footer { flex-direction: column-reverse; gap: 10px; align-items: stretch; }
-    .ps-cpw-next-btn { width: 100%; padding: 14px; }
-    .ps-cpw-back-btn { text-align: center; }
-    .ps-cpw-method-grid { grid-template-columns: 1fr; }
-    .ps-cpw-method-card { padding: 22px 18px; }
-    .ps-cpw-photo-frame { max-width: 100%; height: 320px; }
-  }
+  /* No wizard-specific @media (max-width: 768px) overrides anymore.
+     Every ps-cpw-* rule is clamp/vw-driven, so the layout shrinks
+     gracefully from 320px → 5000px without a hard breakpoint. */
 
   /* ── Progressive (one-question-at-a-time) flow ── */
   .ps-cpw-progressive {
     display: flex; flex-direction: column;
     gap: clamp(12px, 1vw, 22px);
     padding: clamp(6px, 0.5vw, 12px) 0;
+    /* Fills the wizard body so the card row can stretch vertically */
+    flex: 1; min-height: 0;
+    width: 100%; box-sizing: border-box;
   }
   .ps-cpw-fade-in {
     animation: ps-cpw-fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
@@ -4790,27 +4797,29 @@ const STYLES = `
     to   { opacity: 1; transform: translateY(0); }
   }
 
-  /* ── Method picker (initial step) — vw-scaled compact cards ── */
+  /* ── Method picker (initial step) — cards stretch to fill body ── */
   .ps-cpw-method-picker {
     display: flex; flex-direction: column;
     gap: clamp(8px, 0.7vw, 14px);
     padding: clamp(4px, 0.4vw, 10px) 0;
     flex: 1; min-height: 0;
     width: 100%; box-sizing: border-box;
-    justify-content: center;
   }
   .ps-cpw-method-intro { display: none; }
+  /* Grid claims the picker's leftover height so the cards inside
+     stretch vertically to fill it. */
   .ps-cpw-method-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: clamp(8px, 0.75vw, 16px);
     width: 100%; max-width: 100%;
     box-sizing: border-box;
+    flex: 1; min-height: 0;
   }
   .ps-cpw-method-card {
     display: flex; flex-direction: column; align-items: stretch;
     gap: 0;
-    min-width: 0;
+    min-width: 0; min-height: 0;
     width: 100%; max-width: 100%;
     box-sizing: border-box;
     background: var(--ps-bg-primary);
@@ -4825,21 +4834,21 @@ const STYLES = `
     transform: translateY(-1px);
     box-shadow: 0 0.4vw 1.2vw rgba(33, 84, 239, 0.10);
   }
-  /* Wide short illustration strip at the top — keeps cards compact
-     and scales proportionally with viewport width. */
+  /* Illustration fills the upper portion of each card — flex 1 instead
+     of a fixed height so the image grows with the available card height
+     instead of leaving empty space. */
   .ps-cpw-method-img {
     width: 100%;
-    height: clamp(56px, 4.5vw, 100px);
-    flex-shrink: 0;
+    flex: 1; min-height: 0;
     background: var(--ps-bg-secondary);
     display: flex; align-items: center; justify-content: center;
     border-bottom: 1px solid var(--ps-border-subtle);
-    padding: clamp(4px, 0.4vw, 10px);
+    padding: clamp(6px, 0.6vw, 14px);
     box-sizing: border-box;
   }
   .ps-cpw-method-img img {
-    width: auto; height: 100%;
-    max-width: 100%;
+    width: 100%; height: 100%;
+    max-width: 100%; max-height: 100%;
     object-fit: contain;
     display: block;
   }