PDR-001/PDR-010: design system v2 + full competitor analysis package

assets/site.css

@@ -106,7 +106,7 @@ main{max-width:var(--maxw);margin:0 auto;padding:10px 24px 70px}
   position:relative;overflow:hidden}
 .btn.concierge::before{content:"";position:absolute;inset:0;
   background:linear-gradient(135deg,rgba(50,38,22,.95),rgba(65,48,25,.95));
-  opacity:0;transition:opacity .25s;pointer-events:none}
+  opacity:0;transition:opacity .25s;pointer-events:none;z-index:-1}
 .btn.concierge:hover::before{opacity:1}
 .btn.concierge:hover{color:var(--gold);box-shadow:inset 0 0 0 1px rgba(212,165,116,.5),0 8px 28px rgba(0,0,0,.55)}
 

body.html

@@ -22,7 +22,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 16px;
+    gap: var(--sp4);
     margin-bottom: 10px;
   }
   .body-title-row h1 {
@@ -44,8 +44,8 @@
 
   /* spec block panel */
   .spec-panel {
-    background: var(--panel);
-    border: 1px solid var(--line);
+    background: var(--s2);
+    border: 1px solid var(--b-subtle);
     border-radius: 13px;
     padding: 26px 30px;
     margin-top: 28px;
@@ -82,7 +82,7 @@
   .archive-note {
     font-size: 13px;
     color: var(--muted);
-    margin-top: 16px;
+    margin-top: var(--sp4);
     letter-spacing: 0.5px;
   }
   .archive-note strong { color: var(--cream); }

browse.html

@@ -17,7 +17,7 @@
 }
 .browse-hero .eyebrow{margin-bottom:14px}
 .browse-hero h1{font-size:clamp(30px,5.5vw,58px);font-weight:700;letter-spacing:1px}
-.browse-hero .sub{color:var(--muted);margin-top:12px;font-size:14px;letter-spacing:1px}
+.browse-hero .sub{color:var(--muted);margin-top:12px;font-size:var(--t-base);letter-spacing:1px}
 .browse-hero .back{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:2px;
   text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px;transition:.2s}
 .browse-hero .back:hover{color:var(--text);border-color:var(--text)}
@@ -26,16 +26,16 @@
 .filterbar{
   position:sticky;top:62px;z-index:40;
   background:rgba(18,18,18,.97);backdrop-filter:blur(12px);
-  border-bottom:1px solid var(--line);
+  border-bottom:1px solid var(--b-subtle);
   padding:14px 24px;
 }
 .filterbar-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
 .filter-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
-.filter-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-right:2px}
+.filter-label{font-size:var(--t-xs);letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-right:2px}
 .pill{
-  padding:6px 16px;border:1px solid var(--line);border-radius:30px;
+  padding:6px 16px;border:1px solid var(--b-subtle);border-radius:var(--r-pill);
   background:transparent;color:var(--muted);
-  cursor:pointer;font-size:12px;letter-spacing:.5px;
+  cursor:pointer;font-size:var(--t-sm);letter-spacing:.5px;
   font-family:inherit;transition:.2s;white-space:nowrap;
 }
 .pill:hover{color:var(--text);border-color:var(--muted)}
@@ -44,7 +44,7 @@
 .filter-sep{width:1px;height:22px;background:var(--line);margin:0 4px;flex-shrink:0}
 .toggle-wrap{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
 .toggle-wrap input[type=checkbox]{accent-color:var(--gold);width:15px;height:15px;cursor:pointer}
-.toggle-label{font-size:12px;color:var(--muted);letter-spacing:.5px;transition:.2s}
+.toggle-label{font-size:var(--t-sm);color:var(--muted);letter-spacing:.5px;transition:.2s}
 .toggle-wrap:hover .toggle-label{color:var(--text)}
 .search-wrap{margin-left:auto;position:relative;flex-shrink:0}
 .search-wrap input{
@@ -72,7 +72,7 @@
 }
 .count-text{font-size:13px;color:var(--muted)}
 .count-text strong{color:var(--text)}
-.reset-link{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);
+.reset-link{font-size:var(--t-sm);letter-spacing:1px;text-transform:uppercase;color:var(--gold);
   cursor:pointer;border-bottom:1px solid transparent;transition:.2s}
 .reset-link:hover{border-color:var(--gold)}
 
@@ -85,7 +85,7 @@
 }
 .empty-state .big{font-family:'Playfair Display',serif;font-style:italic;
   font-size:clamp(22px,4vw,36px);color:var(--muted);margin-bottom:16px}
-.empty-state p{color:var(--muted);font-size:14px;max-width:400px;margin:0 auto 24px}
+.empty-state p{color:var(--muted);font-size:var(--t-base);max-width:400px;margin:0 auto 24px}
 </style>
 </head>
 <body>

character.html

@@ -9,25 +9,25 @@
 <link rel="stylesheet" href="assets/site.css">
 <style>
 /* ---- character page layout ---- */
-.char-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:28px}
+.char-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp7);align-items:start;margin-top:28px}
 @media(max-width:820px){.char-layout{grid-template-columns:1fr;gap:32px}}
 
 /* ---- gallery ---- */
 .galmain{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;border-radius:13px;display:block;background:#0d0d0d}
 .galmain-wrap{position:relative;border-radius:13px;overflow:hidden;background:#0d0d0d}
-.galmain-wrap .repbadge{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:1px;text-transform:uppercase;
-  background:rgba(0,0,0,.82);color:var(--gold);padding:5px 10px;border-radius:6px;border:1px solid var(--gold)}
+.galmain-wrap .repbadge{position:absolute;top:12px;left:12px;font-size:var(--t-xs);letter-spacing:1px;text-transform:uppercase;
+  background:rgba(0,0,0,.82);color:var(--gold);padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--b-accent)}
 .galmain-wrap .imgcount{position:absolute;bottom:12px;right:12px;font-size:11px;letter-spacing:1px;
-  background:rgba(0,0,0,.75);color:var(--cream);padding:4px 9px;border-radius:6px}
-.galstrip{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
+  background:rgba(0,0,0,.75);color:var(--cream);padding:4px 9px;border-radius:var(--r-sm)}
+.galstrip{display:flex;gap:var(--sp2);flex-wrap:wrap;margin-top:var(--sp3)}
 .galstrip img{width:72px;height:96px;object-fit:cover;object-position:top center;border-radius:7px;cursor:pointer;
   border:2px solid transparent;transition:.2s;opacity:.7}
 .galstrip img.sel{border-color:var(--gold);opacity:1}
 .galstrip img:hover{opacity:1;border-color:var(--muted)}
 
 /* ---- info panel ---- */
 .char-name{font-size:clamp(28px,4vw,46px);line-height:1.1;font-weight:700;margin-bottom:4px}
-.char-meta{color:var(--muted);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
+.char-meta{color:var(--muted);font-size:var(--t-sm);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
 .char-tagline{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold);font-size:17px;margin-bottom:20px;line-height:1.5}
 .fam-row{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap}
 .famdot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
@@ -45,7 +45,7 @@
 .section-block .section-sub{margin-bottom:20px}
 
 /* ---- no image placeholder ---- */
-.no-img{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;background:var(--panel2);
+.no-img{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;background:var(--s3);
   border-radius:13px;color:var(--muted);font-size:13px;letter-spacing:2px}
 
 /* ---- inquire CTA ---- */
@@ -58,10 +58,10 @@
 .story-section{margin-top:52px;max-width:640px}
 .story-heading{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;
   letter-spacing:.5px;margin-bottom:18px;color:var(--text)}
-.story-body{font-family:'Playfair Display',serif;font-style:italic;font-size:16px;
+.story-body{font-family:'Playfair Display',serif;font-style:italic;font-size:var(--t-md);
   line-height:1.8;color:var(--cream);margin-bottom:30px}
-.profile-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
-.profile-dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;font-size:14px}
+.profile-label{font-size:var(--t-xs);letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
+.profile-dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;font-size:var(--t-base)}
 .profile-dl dt{color:var(--muted);white-space:nowrap;padding-top:1px}
 .profile-dl dd{color:var(--cream);margin:0;line-height:1.5}
 </style>

contact.html

@@ -18,11 +18,11 @@
     @media(max-width:900px){.contact-layout{grid-template-columns:1fr;gap:36px}}
 
     /* character chip (prefill) */
-    .char-chip{display:flex;align-items:center;gap:14px;background:var(--panel2);border:1px solid rgba(212,165,116,.35);border-radius:10px;padding:12px 16px;margin-bottom:24px}
-    .char-chip img{width:52px;height:70px;object-fit:cover;object-position:top center;border-radius:6px;flex-shrink:0;background:#0d0d0d}
-    .char-chip .chip-thumb-ph{width:52px;height:70px;border-radius:6px;flex-shrink:0;background:var(--panel);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:22px;color:var(--gold)}
+    .char-chip{display:flex;align-items:center;gap:14px;background:var(--panel2);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:var(--r-md);padding:12px 16px;margin-bottom:24px}
+    .char-chip img{width:52px;height:70px;object-fit:cover;object-position:top center;border-radius:var(--r-sm);flex-shrink:0;background:#0d0d0d}
+    .char-chip .chip-thumb-ph{width:52px;height:70px;border-radius:var(--r-sm);flex-shrink:0;background:var(--s2);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:22px;color:var(--gold)}
     .char-chip .chip-info{}
-    .char-chip .chip-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
+    .char-chip .chip-label{font-size:var(--t-xs);letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
     .char-chip .chip-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:600;line-height:1.2}
     .char-chip .chip-sub{font-size:11px;color:var(--muted);margin-top:2px;letter-spacing:.5px}
 
@@ -103,9 +103,9 @@ <h1 class="reveal d1">Begin a <span class="em-grad">Conversation</span></h1>
 
       <!-- success state -->
       <div id="form-success">
-        <h3>Your inquiry is in.</h3>
-        <p>Thank you — we'll reply personally within one business day.<br>
-          If your email client didn't open automatically, you can also write us directly at
+        <h3>Your inquiry has been received.</h3>
+        <p>We will be in touch discreetly within one business day.<br>
+          You may also reach us directly at
           <a id="success-email-link" href="#"><!-- filled by JS --></a>.</p>
       </div>
 
@@ -374,7 +374,7 @@ <h4>No pressure</h4>
   } else { showFieldError('f-email','err-email',false); }
 
   var msg = (document.getElementById('f-message') || {}).value || '';
-  if (!msg.trim()) {
+  if (msg.trim().length < 10) {
     showFieldError('f-message','err-message',true);
     if (!firstBad) firstBad = document.getElementById('f-message');
     ok = false;
@@ -439,9 +439,9 @@ <h4>No pressure</h4>
   if (form)     form.style.display    = 'none';
   if (success)  success.style.display = 'block';
   if (!usedMailto) {
-    // hide the "if email didn't open" fallback sentence for endpoint path
+    // endpoint path: hide the direct-email fallback line
     var p = success.querySelector('p');
-    if (p) p.innerHTML = 'Thank you — we\'ll reply personally within one business day.';
+    if (p) p.innerHTML = 'We will be in touch discreetly within one business day.';
   }
   // Update success email link with real href
   var email = ZX.INQUIRY_EMAIL || 'inquiries@zelexdoll.com';

craft.html

@@ -25,7 +25,7 @@
 .craft-hero .inner{
   position:relative;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 40px 10vh;
 }
-.craft-hero .eyebrow{color:var(--gold);letter-spacing:6px;text-transform:uppercase;font-size:12px;margin-bottom:22px;}
+.craft-hero .eyebrow{color:var(--gold);letter-spacing:6px;text-transform:uppercase;font-size:var(--t-sm);margin-bottom:22px;}
 .craft-hero h1{
   font-family:'Playfair Display',serif;font-size:clamp(42px,8vw,92px);
   line-height:1.03;font-weight:400;max-width:15ch;
@@ -51,7 +51,7 @@
 /* ---- method section ---- */
 .method{max-width:var(--maxw);margin:0 auto;padding:100px 40px 60px;}
 .method-head{text-align:center;max-width:740px;margin:0 auto 80px;}
-.method-head .eyebrow{color:var(--gold);letter-spacing:5px;text-transform:uppercase;font-size:12px;}
+.method-head .eyebrow{color:var(--gold);letter-spacing:5px;text-transform:uppercase;font-size:var(--t-sm);}
 .method-head h2{font-family:'Playfair Display',serif;font-size:clamp(28px,4.2vw,46px);margin:14px 0;}
 .method-head p{color:var(--muted);font-weight:300;font-size:15px;}
 
@@ -63,8 +63,8 @@
   .method{padding:70px 20px 40px;}
 }
 .method-img-wrap{
-  aspect-ratio:3/4;background:#0d0d0d;border-radius:10px;overflow:hidden;
-  border:1px solid var(--line);
+  aspect-ratio:3/4;background:#0d0d0d;border-radius:var(--r-md);overflow:hidden;
+  border:1px solid var(--b-subtle);
 }
 .method-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:.4s;}
 .method-img-wrap:hover img{transform:scale(1.04);}
@@ -74,8 +74,8 @@
 .method-txt p+p{margin-top:12px;}
 .method-txt .inline-stat{
   display:inline-block;margin-top:18px;padding:9px 18px;
-  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
-  font-size:12px;letter-spacing:1.5px;color:var(--cream);
+  background:var(--s3);border:1px solid var(--b-subtle);border-radius:8px;
+  font-size:var(--t-sm);letter-spacing:1.5px;color:var(--cream);
 }
 .method-txt .inline-stat b{color:var(--gold);}