`public/postcard-template-front.html`

89 lines
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DW Postcard — Front</title>
<!--
  Lob postcard FRONT template.
  4×6 finished · 4.25"×6.25" with 0.125" bleed · 300dpi → 1275×1875px
  Upload this file to Lob (Templates → Create → "Custom HTML") and use field
  names matching the merge.* columns in /api/pitches/postcard-batch.csv.
  Safe (live) zone is 0.25" from edge → text/logo stays inside 4.5"×6.5" minus 0.25".
-->
<style>
  /* Lob expects 4.25"x6.25" page with 0.125" bleed. We design at that exact size. */
  @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: #f0ece2;
    background: #0a0a0c;
    position: relative;
    box-sizing: border-box;
    /* Safe zone: 0.25" from edge — keep text inside this */
    padding: 0.45in 0.5in;
  }
  /* Bleed-edge gradient: warm metal glow at corners */
  body::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at top right, rgba(212,182,131,0.18), transparent 50%),
      radial-gradient(ellipse at bottom left, rgba(184,153,104,0.12), transparent 60%);
    z-index: 0;
  }
  body::after {
    content: '';
    position: absolute; inset: 0.18in;
    border: 0.5px solid rgba(184,153,104,0.4);
    z-index: 1;
  }
  .content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }
  .brand-mark {
    font-size: 9pt; letter-spacing: 0.45em; text-transform: uppercase;
    color: #b89968; font-family: 'Inter', system-ui, sans-serif; font-weight: 200;
  }
  .headline {
    font-size: 28pt; line-height: 1.05;
    margin: 0.18in 0 0.1in;
    font-style: italic; font-weight: 300;
    letter-spacing: -0.01em;
  }
  .headline em { font-style: normal; color: #d4b683; }
  .sub {
    font-size: 11pt; line-height: 1.45;
    color: #d8d2c0;
    max-width: 4in;
    font-family: 'Inter', system-ui, sans-serif; font-weight: 300;
  }
  .signature {
    margin-top: auto;
    font-size: 10pt; color: #d8d2c0;
    font-family: 'Inter', system-ui, sans-serif; font-weight: 300;
  }
  .signature .who { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14pt; color: #d4b683; display: block; margin-bottom: 2px; }
  .footer {
    position: absolute; bottom: 0.32in; right: 0.5in;
    font-size: 7pt; letter-spacing: 0.3em; text-transform: uppercase;
    color: #888475; font-family: 'Inter', system-ui, sans-serif;
  }
</style>
</head>
<body>
  <div class="content">
    <div class="brand-mark">Designer Wallcoverings</div>
    <h1 class="headline">A neighbor on Ventura with <em>walls worth seeing</em>.</h1>
    <p class="sub">
      Suite 201 · 15442 Ventura Blvd · Sherman Oaks. We carry the lines you see in shelter magazines —
      Phillip Jeffries, Cole &amp; Son, Schumacher, Mind the Gap. Free trade samples,
      free coffee, no minimum order. Walk in any time, or scan the QR on the back.
    </p>
    <div class="signature">
      <span class="who">Steve Abrams</span>
      Owner · Designer Wallcoverings
    </div>
  </div>
  <div class="footer">{{merge.dw_proximity}} · {{merge.pitch_type}}</div>
</body>
</html>