`public/postcard-template-back.html`

130 lines
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DW Postcard — Back</title>
<!--
  Lob postcard BACK template.
  Lob requires the right half (3"×6") to be reserved for indicia + address block.
  Left half (3"×6" minus margins) is the message area.
  All address block coordinates match Lob's spec exactly.
-->
<style>
  @page { size: 6.25in 4.25in; margin: 0; }
  html, body { margin: 0; padding: 0; width: 6.25in; height: 4.25in; overflow: hidden; }
  body {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    color: #1a1a1a;
    background: #faf8f3;
    position: relative;
    box-sizing: border-box;
  }
  /* Left half = message zone */
  .message {
    position: absolute;
    top: 0.3in; left: 0.3in;
    width: 2.7in; height: 3.65in;
    padding: 0;
    font-size: 10pt;
    line-height: 1.55;
    color: #2a2a2a;
    overflow: hidden;
  }
  .greeting {
    font-style: italic;
    font-size: 14pt;
    margin: 0 0 0.08in;
    color: #6a4f2a;
  }
  .body-copy {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 300;
    font-size: 9.5pt;
    margin: 0.05in 0;
  }
  .signoff {
    margin-top: 0.18in;
    font-style: italic;
    font-size: 12pt;
    color: #6a4f2a;
  }

  /* Right half = address block + indicia */
  .right-pane {
    position: absolute;
    top: 0; right: 0;
    width: 3in; height: 4.25in;
  }
  /* Indicia box (Lob places permit/postage here automatically) */
  .indicia {
    position: absolute; top: 0.25in; right: 0.25in;
    width: 1.2in; height: 0.7in;
    border: 0.5px dashed #999;
    font-family: monospace; font-size: 6pt; color: #999;
    text-align: center; line-height: 0.7in;
    letter-spacing: 0.1em;
  }
  /* Address block (Lob's required position: 1.125" from bottom, 0.5" from right edge) */
  .address-block {
    position: absolute;
    bottom: 1.125in;
    right: 0.5in;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: 11pt;
    line-height: 1.32;
    color: #1a1a1a;
    text-align: left;
    width: 3.75in;
    box-sizing: border-box;
  }
  .address-block .name { font-weight: 500; }
  /* QR placeholder zone (replace with merge.qr_url if you generate per-pitch) */
  .qr {
    position: absolute;
    top: 0.25in; left: 0.25in;
    width: 0.7in; height: 0.7in;
    background: #1a1a1a; color: #faf8f3;
    font-family: monospace; font-size: 5.5pt;
    text-align: center; line-height: 0.7in;
    letter-spacing: 0.05em;
  }
  /* Brand bar across the bottom-left */
  .brand-bar {
    position: absolute;
    bottom: 0.25in; left: 0.3in;
    font-family: 'Inter', system-ui, sans-serif; font-weight: 200;
    font-size: 7pt; letter-spacing: 0.3em; text-transform: uppercase;
    color: #6a4f2a;
  }
  .brand-bar .url { color: #1a1a1a; font-weight: 400; }
</style>
</head>
<body>
  <div class="message">
    <p class="greeting">{{to.name}},</p>
    <p class="body-copy">{{merge.body}}</p>
    <p class="body-copy" style="margin-top:0.12in">
      Stop in suite 201 — happy to show you samples, talk through your project, or just say hello.
      We're at 15442 Ventura, the building right at the corner.
    </p>
    <div class="signoff">— Steve</div>
  </div>

  <div class="right-pane">
    <div class="qr">DW.com<br>QR</div>
    <div class="indicia">FIRST-CLASS<br>PERMIT VIA LOB</div>
    <div class="address-block">
      <div class="name">{{to.name}}</div>
      <div>{{to.company}}</div>
      <div>{{to.address_line1}}</div>
      <div>{{to.address_city}}, {{to.address_state}} {{to.address_zip}}</div>
    </div>
  </div>

  <div class="brand-bar">
    <span class="url">designerwallcoverings.com</span> · 15442 Ventura Blvd #201
  </div>
</body>
</html>