`data/mockups/design-page/04-gallery-wall-label.html`

109 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Marine Heirloom No.41542 — wallco gallery</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;1,300&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#fafaf7; --ink:#15171a; --rule:#15171a18; --plaque:#ecebe5;
    --serif:'Crimson Pro',Georgia,serif; --sans:'Inter',-apple-system,system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}

  /* Top — minimal museum chrome */
  .museum-bar{display:flex;justify-content:space-between;align-items:center;padding:18px 38px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--rule)}
  .museum-bar .where a{color:var(--ink);text-decoration:none;margin-left:28px;opacity:.6}
  .museum-bar .where a.active{opacity:1;border-bottom:1px solid var(--ink);padding-bottom:2px}

  /* Hero — image dominates, no decoration */
  .room{padding:88px 0 88px;display:flex;justify-content:center;align-items:flex-start;background:var(--paper)}
  .artwork{display:flex;flex-direction:column;align-items:center;max-width:1100px;width:100%;padding:0 38px}
  .artwork img{max-width:620px;width:100%;height:auto;display:block;box-shadow:0 20px 60px -30px rgba(0,0,0,.25)}

  /* Wall plaque — small, museum-style, positioned to the side */
  .plaque-wrap{display:grid;grid-template-columns:620px 280px;gap:48px;max-width:1100px;width:100%;margin:0 auto;padding:0 38px}
  .plaque-img{}
  .plaque-img img{width:100%;height:auto;display:block;box-shadow:0 20px 60px -30px rgba(0,0,0,.25)}
  .plaque{background:transparent;padding-top:8px}
  .plaque .attr{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink);opacity:.7;margin-bottom:6px}
  .plaque .title{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;letter-spacing:.005em;margin:0 0 4px}
  .plaque .subtitle{font-family:var(--serif);font-style:italic;font-weight:300;font-size:16px;color:var(--ink);opacity:.75;margin:0 0 18px}
  .plaque .desc{font-family:var(--serif);font-weight:300;font-size:14px;line-height:1.65;color:var(--ink);opacity:.9;margin:0 0 28px;max-width:30ch}
  .plaque .meta{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--rule);padding-top:14px}
  .plaque .meta dt{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);opacity:.5;margin-top:6px}
  .plaque .meta dd{font-family:var(--serif);font-size:15px;font-weight:400;margin:0 0 8px}

  /* Color story — small swatch row at bottom of plaque */
  .colors{display:flex;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid var(--rule)}
  .colors .lbl{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);opacity:.5;align-self:center;margin-right:8px}
  .sw{width:18px;height:18px;border-radius:50%;border:1px solid #00000018}

  /* CTAs — gallery-shop style */
  .actions-bar{margin-top:36px;display:flex;flex-direction:column;gap:10px}
  .actions-bar button{font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;padding:13px 18px;text-align:left;background:transparent;border:1px solid var(--ink);color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%}
  .actions-bar button:hover{background:var(--ink);color:var(--paper)}
  .actions-bar button.primary{background:var(--ink);color:var(--paper)}
  .actions-bar button.primary:hover{background:transparent;color:var(--ink)}
  .arrow{opacity:.6}

  /* Foot — credit line */
  footer{padding:48px 38px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);opacity:.5;border-top:1px solid var(--rule);margin-top:48px}

  @media (max-width:880px){
    .plaque-wrap{grid-template-columns:1fr;padding:0 22px}
    .room{padding:32px 0}
  }
</style></head>
<body>
<header class="museum-bar">
  <div>wallco · Gallery</div>
  <nav class="where">
    <a>Damask</a><a>Floral</a><a>Geometric</a><a class="active">Marine Heirloom No.41542</a>
  </nav>
</header>

<section class="room">
  <div class="plaque-wrap">
    <figure class="plaque-img">
      <img src="https://wallco.ai/designs/img/var_41538_hue-60_1779692961993.png" alt="Marine Heirloom No.41542">
    </figure>

    <aside class="plaque">
      <div class="attr">wallco originals · 2026</div>
      <h1 class="title">Marine Heirloom No.41542</h1>
      <p class="subtitle">Damask in slate-teal on bone</p>
      <p class="desc">A deep-water damask, hand-blocked in slate-teal on bone. Half-drop repeat, 27" vertical. Curated original — never re-issued.</p>

      <dl class="meta">
        <dt>Material</dt><dd>Paper, vinyl, or peel &amp; stick</dd>
        <dt>Width</dt><dd>24″ residential · 36″ commercial</dd>
        <dt>Repeat</dt><dd>27″ vertical · half-drop</dd>
        <dt>Sold by</dt><dd>The roll (27 lin. ft.)</dd>
      </dl>

      <div class="colors">
        <span class="lbl">Palette</span>
        <span class="sw" style="background:#2b3838" title="#2B3838"></span>
        <span class="sw" style="background:#cfc6b3" title="#CFC6B3"></span>
        <span class="sw" style="background:#1a2424" title="#1A2424"></span>
        <span class="sw" style="background:#9aa19e" title="#9AA19E"></span>
      </div>

      <div class="actions-bar">
        <button class="primary">Order memo sample <span class="arrow">→</span></button>
        <button>See in a Room <span class="arrow">→</span></button>
        <button>Save to Folder <span class="arrow">→</span></button>
      </div>
    </aside>
  </div>
</section>

<footer>
  <span>wallco.ai · curated originals</span>
  <span>No.41542 · DIG_AI_041542</span>
  <span>Sherman Oaks · Los Angeles</span>
</footer>
</body></html>