`data/mockups/design-page/10-wes-anderson.html`

134 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 · The wallco Catalogue</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Futura&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Familjen+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#f5e9d3; --ink:#3b1e16; --pink:#e8a5a5; --teal:#3b6e6b; --gold:#c89653; --cream:#fdf4e0;
    --display:'Playfair Display',Georgia,serif; --sans:'Familjen Grotesk',-apple-system,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;text-align:center}

  /* Top strip — symmetrical */
  .topstrip{padding:20px 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:2px solid var(--ink);font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink)}
  .topstrip > div:first-child{text-align:left}
  .topstrip > div:last-child{text-align:right}
  .topstrip .crest{font-family:var(--display);font-size:22px;font-weight:700;font-style:italic;letter-spacing:.04em;text-transform:none}

  /* Title — perfectly centered */
  .title-area{padding:48px 32px 32px;border-bottom:2px solid var(--ink)}
  .chapter{font-family:var(--sans);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
  .title{font-family:var(--display);font-weight:400;font-size:64px;font-style:italic;letter-spacing:-.005em;line-height:1.05;margin:0}
  .title .swash{color:var(--pink)}
  .title-rule{display:flex;justify-content:center;align-items:center;gap:18px;margin:18px 0 14px;font-size:12px;color:var(--gold);font-weight:700;letter-spacing:.04em}
  .title-rule::before, .title-rule::after{content:'';display:block;width:60px;height:1px;background:var(--ink);opacity:.5}
  .subtitle{font-family:var(--display);font-style:italic;font-size:16px;color:var(--ink);opacity:.75}

  /* Framed image */
  .frame-area{padding:48px 32px;display:flex;justify-content:center;background:var(--paper)}
  .frame{padding:18px;background:var(--cream);border:3px double var(--ink);box-shadow:0 0 0 6px var(--paper),0 0 0 9px var(--ink);max-width:560px;width:100%}
  .frame img{display:block;width:100%;height:auto}

  /* Centered specs in two columns */
  .specs{padding:48px 32px 32px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);max-width:880px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:36px 64px;text-align:center}
  .spec-card{display:flex;flex-direction:column;align-items:center;gap:4px}
  .spec-card dt{font-family:var(--sans);font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);font-weight:600}
  .spec-card dd{font-family:var(--display);font-style:italic;font-size:24px;margin:0;color:var(--ink);font-weight:400}

  /* Color story — 5 dots arranged in symmetric arc */
  .colors{padding:48px 32px 24px;text-align:center}
  .colors h3{font-family:var(--display);font-weight:400;font-style:italic;font-size:28px;margin:0 0 28px;color:var(--ink)}
  .colors h3 small{font-family:var(--sans);display:block;font-style:normal;font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-top:8px}
  .palette-row{display:flex;justify-content:center;gap:32px}
  .palette-row .col{display:flex;flex-direction:column;align-items:center;gap:8px}
  .palette-row .sw{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--ink)}
  .palette-row .lbl{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
  .palette-row .hex{font-family:var(--display);font-style:italic;font-size:13px;color:var(--ink);opacity:.7}

  /* Quote panel */
  .quote-area{padding:64px 32px;background:var(--cream);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);text-align:center}
  .quote-area blockquote{font-family:var(--display);font-style:italic;font-weight:400;font-size:30px;line-height:1.35;max-width:34ch;margin:0 auto 18px;color:var(--ink)}
  .quote-area .by{font-family:var(--sans);font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);font-weight:600}

  /* CTA — vintage hotel-key card */
  .cta-area{padding:48px 32px;text-align:center;border-bottom:2px solid var(--ink)}
  .cta-card{display:inline-block;background:var(--pink);color:var(--ink);padding:32px 48px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);max-width:520px}
  .cta-card .room-num{font-family:var(--display);font-weight:700;font-style:italic;font-size:42px;line-height:1;color:var(--ink);margin-bottom:6px}
  .cta-card .room-label{font-family:var(--sans);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
  .cta-card .actions{display:flex;gap:14px;justify-content:center;margin-top:20px}
  .cta-card .actions button{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:11px 18px;border:2px solid var(--ink);background:var(--cream);color:var(--ink);cursor:pointer;font-weight:600}
  .cta-card .actions button.pri{background:var(--ink);color:var(--pink)}

  /* Footer */
  footer{padding:24px 32px;display:grid;grid-template-columns:1fr 1fr 1fr;font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);align-items:center}
  footer > div:first-child{text-align:left}
  footer > div:nth-child(2){text-align:center;font-family:var(--display);font-style:italic;font-size:13px;letter-spacing:.04em;text-transform:none}
  footer > div:last-child{text-align:right}

  @media (max-width:880px){.title{font-size:38px}.specs{grid-template-columns:1fr;gap:18px}.palette-row{flex-wrap:wrap;gap:18px}.cta-card{padding:24px}}
</style></head>
<body>
<div class="topstrip">
  <div>Vol. 41 · No. 542</div>
  <div class="crest">The wallco Catalogue</div>
  <div>25 v 2026</div>
</div>

<section class="title-area">
  <p class="chapter">Chapter XLI · The Damasks</p>
  <h1 class="title">Marine <span class="swash">Heirloom</span></h1>
  <div class="title-rule">✦</div>
  <p class="subtitle">A damask deep enough to swim in, presented herewith.</p>
</section>

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

<dl class="specs">
  <div class="spec-card"><dt>Width</dt><dd>24″ &amp; 36″</dd></div>
  <div class="spec-card"><dt>Repeat</dt><dd>27″ half-drop</dd></div>
  <div class="spec-card"><dt>Material</dt><dd>Paper · Vinyl</dd></div>
  <div class="spec-card"><dt>Origin</dt><dd>wallco originals</dd></div>
</dl>

<section class="colors">
  <h3>A Conversation in Five Colors<small>The Palette</small></h3>
  <div class="palette-row">
    <div class="col"><span class="sw" style="background:#2b3838"></span><span class="lbl">Slate</span><span class="hex">#2B3838</span></div>
    <div class="col"><span class="sw" style="background:#cfc6b3"></span><span class="lbl">Bone</span><span class="hex">#CFC6B3</span></div>
    <div class="col"><span class="sw" style="background:#1a2424"></span><span class="lbl">Marine</span><span class="hex">#1A2424</span></div>
    <div class="col"><span class="sw" style="background:#9aa19e"></span><span class="lbl">Driftwood</span><span class="hex">#9AA19E</span></div>
    <div class="col"><span class="sw" style="background:#5e7b78"></span><span class="lbl">Tide</span><span class="hex">#5E7B78</span></div>
  </div>
</section>

<section class="quote-area">
  <blockquote>A great damask is a small inheritance — the room will, in time, learn to love it.</blockquote>
  <div class="by">— A House Note · wallco · Spring 2026</div>
</section>

<section class="cta-area">
  <div class="cta-card">
    <div class="room-num">№ 41542</div>
    <div class="room-label">Memo Sample · Complimentary</div>
    <p style="font-family:var(--display);font-style:italic;font-size:16px;margin:8px 0">Reserve a 24″ × 24″ swatch — kindly mailed, with our compliments.</p>
    <div class="actions">
      <button class="pri">Reserve a Memo</button>
      <button>View in a Room</button>
    </div>
  </div>
</section>

<footer>
  <div>The wallco Catalogue</div>
  <div>fin.</div>
  <div>DIG_AI_041542</div>
</footer>
</body></html>