@primestyleai/tryon 5.8.29 → 5.8.30

package/dist/react/index.js

@@ -4816,34 +4816,72 @@ const STYLES = `
     box-sizing: border-box;
     flex: 1; min-height: 0;
   }
+  /* ── Editorial method card ──
+     Layered composition: tinted illustration zone on top, content block
+     on bottom with eyebrow / title / description / arrow. A large
+     corner number watermark gives each card a unique editorial feel. */
   .ps-cpw-method-card {
+    position: relative;
     display: flex; flex-direction: column; align-items: stretch;
     gap: 0;
     min-width: 0; min-height: 0;
     width: 100%; max-width: 100%;
     box-sizing: border-box;
     background: var(--ps-bg-primary);
-    border: 1.5px solid var(--ps-border-subtle);
-    border-radius: clamp(8px, 0.6vw, 14px);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: clamp(10px, 0.75vw, 16px);
     overflow: hidden;
     cursor: pointer; font-family: inherit; text-align: left;
-    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
+    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
+    box-shadow: 0 0.1vw 0.4vw rgba(20, 30, 60, 0.04);
+  }
+  .ps-cpw-method-card::before {
+    /* Thin top accent bar that lights up on hover */
+    content: ""; position: absolute; top: 0; left: 0; right: 0;
+    height: clamp(2px, 0.15vw, 4px);
+    background: var(--ps-accent);
+    transform: scaleX(0); transform-origin: left center;
+    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+    z-index: 3;
   }
   .ps-cpw-method-card:hover {
     border-color: var(--ps-accent);
-    transform: translateY(-1px);
-    box-shadow: 0 0.4vw 1.2vw rgba(33, 84, 239, 0.10);
+    transform: translateY(-2px);
+    box-shadow: 0 0.6vw 1.6vw rgba(33, 84, 239, 0.14);
+  }
+  .ps-cpw-method-card:hover::before { transform: scaleX(1); }
+
+  /* Big editorial number watermark in the top-right corner */
+  .ps-cpw-method-num {
+    position: absolute;
+    top: clamp(8px, 0.7vw, 14px);
+    right: clamp(10px, 0.85vw, 18px);
+    z-index: 2;
+    font-family: inherit;
+    font-size: clamp(20px, 1.7vw, 32px);
+    font-weight: 800;
+    line-height: 1;
+    letter-spacing: -0.04em;
+    color: var(--ps-text-primary);
+    opacity: 0.10;
+    pointer-events: none;
+    transition: color 0.22s, opacity 0.22s;
+  }
+  .ps-cpw-method-card:hover .ps-cpw-method-num {
+    color: var(--ps-accent);
+    opacity: 0.30;
   }
-  /* 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. */
+
+  /* Illustration zone — tinted background, image fills it */
   .ps-cpw-method-img {
+    position: relative;
     width: 100%;
     flex: 1; min-height: 0;
-    background: var(--ps-bg-secondary);
+    background:
+      radial-gradient(ellipse at 50% 60%, rgba(33, 84, 239, 0.06) 0%, transparent 70%),
+      var(--ps-bg-secondary);
     display: flex; align-items: center; justify-content: center;
-    border-bottom: 1px solid var(--ps-border-subtle);
-    padding: clamp(6px, 0.6vw, 14px);
+    padding: clamp(10px, 0.85vw, 18px);
     box-sizing: border-box;
   }
   .ps-cpw-method-img img {
@@ -4851,22 +4889,66 @@ const STYLES = `
     max-width: 100%; max-height: 100%;
     object-fit: contain;
     display: block;
+    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .ps-cpw-method-card:hover .ps-cpw-method-img img {
+    transform: scale(1.04);
   }
+
+  /* Content block — eyebrow, title, description, arrow */
   .ps-cpw-method-text {
-    display: flex; flex-direction: column; gap: clamp(2px, 0.15vw, 4px);
-    padding: clamp(6px, 0.55vw, 12px) clamp(8px, 0.7vw, 14px) clamp(8px, 0.7vw, 14px);
+    position: relative;
+    display: flex; flex-direction: column;
+    gap: clamp(3px, 0.25vw, 6px);
+    padding: clamp(10px, 0.85vw, 18px) clamp(12px, 1vw, 20px) clamp(12px, 1vw, 20px);
     width: 100%; box-sizing: border-box;
+    border-top: 1px solid var(--ps-border-subtle);
+    background: var(--ps-bg-primary);
+  }
+  .ps-cpw-method-eyebrow {
+    font-size: clamp(8px, 0.55vw, 11px);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--ps-accent);
   }
   .ps-cpw-method-title {
-    font-size: clamp(11px, 0.78vw, 15px);
+    font-size: clamp(13px, 0.92vw, 18px);
     font-weight: 700;
     color: var(--ps-text-primary);
-    letter-spacing: -0.005em;
+    letter-spacing: -0.012em;
+    line-height: 1.25;
   }
   .ps-cpw-method-desc {
-    font-size: clamp(9px, 0.65vw, 12px);
-    line-height: 1.4;
+    font-size: clamp(10px, 0.7vw, 13px);
+    line-height: 1.45;
     color: var(--ps-text-muted);
+    /* Cap at 2 lines so cards stay symmetric */
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  /* Arrow indicator — bottom right of the content block */
+  .ps-cpw-method-arrow {
+    position: absolute;
+    right: clamp(12px, 1vw, 20px);
+    bottom: clamp(12px, 1vw, 20px);
+    width: clamp(22px, 1.6vw, 32px);
+    height: clamp(22px, 1.6vw, 32px);
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--ps-bg-secondary);
+    color: var(--ps-text-secondary);
+    transition: background 0.22s, color 0.22s, transform 0.22s;
+  }
+  .ps-cpw-method-arrow svg {
+    width: 55%; height: 55%;
+  }
+  .ps-cpw-method-card:hover .ps-cpw-method-arrow {
+    background: var(--ps-accent);
+    color: #FFFFFF;
+    transform: translateX(0.2vw);
   }
   /* Wizard reuses the SDK basics screen's .ps-bp-inline-* row styles for
      parity. This wrapper just gives them a consistent gap and centers
@@ -8917,10 +8999,16 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
               setManualStep("identity");
             },
             children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-cpw-method-num", children: "01" }),
               /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-img", children: /* @__PURE__ */ jsx("img", { src: methodManualImg, alt: t("Manual measurement illustration") }) }),
               /* @__PURE__ */ jsxs("div", { className: "ps-cpw-method-text", children: [
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-eyebrow", children: t("Quick Setup") }),
                 /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-title", children: t("Measure manually") }),
-                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-desc", children: t("Enter height, weight and answer quick body shape questions.") })
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-desc", children: t("Enter height, weight and answer quick body shape questions.") }),
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "12 5 19 12 12 19" })
+                ] }) })
               ] })
             ]
           }
@@ -8934,10 +9022,16 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
               setMode("image");
             },
             children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-cpw-method-num", children: "02" }),
               /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-img", children: /* @__PURE__ */ jsx("img", { src: methodPhotoImg, alt: t("Photo analysis illustration") }) }),
               /* @__PURE__ */ jsxs("div", { className: "ps-cpw-method-text", children: [
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-eyebrow", children: t("AI Powered") }),
                 /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-title", children: t("Analyze by photo") }),
-                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-desc", children: t("Upload a full-body photo. Our AI computes every measurement.") })
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-desc", children: t("Upload a full-body photo. Our AI computes every measurement.") }),
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "12 5 19 12 12 19" })
+                ] }) })
               ] })
             ]
           }