`data/mockups/design-page/02-couture-house.html`

118 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Marine Heirloom № 41542 — wallco maison</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Italiana&family=Cormorant:ital,wght@0,300;1,300&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>
  :root{
    --orange:#e85d2d; --cream:#f7eedd; --ink:#1f1607; --gold:#c89a4a; --teal:#2b3838;
    --display:'Italiana',serif; --body:'Cormorant',Georgia,serif; --label:'Inter',sans-serif;
  }
  *{box-sizing:border-box} html,body{margin:0}
  body{background:var(--cream);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}

  /* Top strip — house mark */
  .houseband{height:8px;background:repeating-linear-gradient(90deg,var(--orange) 0 18px,var(--gold) 18px 36px)}
  header.top{display:flex;justify-content:space-between;align-items:center;padding:28px 56px 18px;border-bottom:.5px solid var(--ink)}
  .crest{font-family:var(--display);font-size:30px;letter-spacing:.18em;color:var(--orange);line-height:1}
  .crest small{display:block;text-align:center;font-family:var(--label);font-weight:500;font-size:9px;letter-spacing:.4em;color:var(--ink);margin-top:4px}
  .menu{display:flex;gap:36px;font-family:var(--label);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
  .menu a{color:var(--ink);text-decoration:none}

  /* Composition */
  .frame{padding:48px 56px 32px;display:grid;grid-template-columns:1fr 1fr;gap:64px}
  .image-wrap{position:relative;background:#fff;padding:18px;border:.5px solid var(--ink)}
  .image-wrap::before{content:'';position:absolute;inset:6px;border:.5px solid var(--orange);pointer-events:none}
  .image-wrap img{display:block;width:100%;height:auto;position:relative;z-index:1}
  .signature{position:absolute;bottom:-22px;right:18px;font-family:var(--display);font-style:normal;font-size:13px;letter-spacing:.32em;color:var(--orange);background:var(--cream);padding:4px 12px}

  .right{padding-top:6px}
  .ref{font-family:var(--label);font-size:10px;letter-spacing:.34em;color:var(--orange);text-transform:uppercase}
  h1{font-family:var(--display);font-size:78px;font-weight:400;letter-spacing:.01em;line-height:.96;margin:14px 0 4px;color:var(--ink)}
  h1 em{font-style:italic;font-family:var(--body);font-size:54px;color:var(--orange);letter-spacing:.02em;display:block;margin-left:18px}
  .tagline{font-family:var(--body);font-style:italic;font-size:18px;color:var(--ink);margin:18px 0 30px}

  /* Tiny labels — couture house specifics */
  .ledger{display:grid;grid-template-columns:1fr 1fr;gap:24px 36px;margin:24px 0 36px;padding-top:20px;border-top:.5px solid var(--ink)}
  .ledger > div{display:flex;flex-direction:column;gap:3px}
  .ledger dt{font-family:var(--label);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--orange)}
  .ledger dd{font-family:var(--body);font-size:18px;margin:0;color:var(--ink);font-weight:400}

  /* Color story — hand-numbered swatches */
  .couleurs{margin:30px 0 0}
  .couleurs h3{font-family:var(--label);font-size:9px;letter-spacing:.34em;color:var(--orange);text-transform:uppercase;margin:0 0 10px}
  .couleurs-row{display:flex;gap:14px}
  .pastille{display:flex;flex-direction:column;align-items:center;gap:6px}
  .pastille .pat{width:34px;height:34px;border-radius:50%;border:.5px solid var(--ink)}
  .pastille .num{font-family:var(--display);font-size:11px;color:var(--ink)}

  /* CTA — atelier card */
  .atelier{margin-top:42px;border:.5px solid var(--ink);padding:22px 26px;background:#fff;display:flex;justify-content:space-between;align-items:center}
  .atelier .left-lab{font-family:var(--label);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--orange)}
  .atelier .price{font-family:var(--display);font-size:30px;color:var(--ink);margin-top:2px}
  .atelier button{font-family:var(--label);font-size:11px;letter-spacing:.28em;text-transform:uppercase;background:var(--orange);color:var(--cream);border:0;padding:14px 22px;cursor:pointer}

  /* Bottom flourish */
  footer{margin-top:48px;padding:22px 56px;border-top:.5px solid var(--ink);display:flex;justify-content:space-between;font-family:var(--label);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink)}

  @media (max-width:880px){.frame{grid-template-columns:1fr;padding:24px}.menu{display:none}h1{font-size:54px}h1 em{font-size:36px}}
</style></head>
<body>
<div class="houseband"></div>
<header class="top">
  <div class="crest">wallco<small>Maison · Paris · Atelier</small></div>
  <nav class="menu">
    <a>Maison</a><a>Damasks</a><a>Naturals</a><a>Bespoke</a><a>Atelier</a>
  </nav>
</header>

<section class="frame">
  <div class="image-wrap">
    <img src="https://wallco.ai/designs/img/var_41538_hue-60_1779692961993.png" alt="">
    <div class="signature">№ 41542</div>
  </div>

  <div class="right">
    <p class="ref">Damask Collection · Référence 41542</p>
    <h1>Marine<em>Heirloom</em></h1>
    <p class="tagline">Un damas profond, tissé pour les pièces qui se taisent.</p>

    <dl class="ledger">
      <div><dt>Largeur</dt><dd>24″ résidentiel · 36″ contrat</dd></div>
      <div><dt>Raccord</dt><dd>27″ vertical · demi-décalé</dd></div>
      <div><dt>Matière</dt><dd>Papier · Vinyle · Adhésif</dd></div>
      <div><dt>Quantité</dt><dd>au rouleau, 27 ft. linéaires</dd></div>
      <div><dt>Origine</dt><dd>Atelier wallco</dd></div>
      <div><dt>Livraison</dt><dd>3 à 5 jours ouvrés</dd></div>
    </dl>

    <div class="couleurs">
      <h3>Les Couleurs</h3>
      <div class="couleurs-row">
        <div class="pastille"><span class="pat" style="background:#2b3838"></span><span class="num">i</span></div>
        <div class="pastille"><span class="pat" style="background:#cfc6b3"></span><span class="num">ii</span></div>
        <div class="pastille"><span class="pat" style="background:#1a2424"></span><span class="num">iii</span></div>
        <div class="pastille"><span class="pat" style="background:#9aa19e"></span><span class="num">iv</span></div>
        <div class="pastille"><span class="pat" style="background:#e85d2d"></span><span class="num">v</span></div>
      </div>
    </div>

    <div class="atelier">
      <div>
        <div class="left-lab">À l'Atelier</div>
        <div class="price">$148<small style="font-family:var(--label);font-size:11px;letter-spacing:.2em;color:var(--ink);margin-left:8px">/ rouleau</small></div>
      </div>
      <button>Réserver un Memo</button>
    </div>
  </div>
</section>

<footer>
  <span>Curated Original · DIG_AI_041542</span>
  <span>Atelier wallco · Sherman Oaks</span>
  <span>maison@wallco.ai</span>
</footer>
</body></html>