feca-mailshots-plugin/samples/renewal_draft.html

<style>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2937;
    font-size: 9.5pt;
    line-height: 1.25;
    margin: 0;
    padding: 0;
  }

  .page {
    width: 100%;
  }

  .logo {
    margin-bottom: 3mm;
  }

  .header {
    border-bottom: 1.5px solid #d97706;
    padding-bottom: 2.5mm;
    margin-bottom: 4mm;
  }

  .title {
    font-size: 15pt;
    font-weight: bold;
    color: #0f172a;
    margin: 0 0 1mm 0;
  }

  .subtitle {
    font-size: 9pt;
    color: #6b7280;
    margin: 0;
  }

  .fee-banner {
    margin: 6mm 0 3mm 0;
    padding: 2mm 3mm;
    background: #fff7ed;
    border-left: 4px solid #d97706;
    font-size: 10.5pt;
    font-weight: bold;
    color: #9a3412;
  }

  .note {
    margin: 0 0 3mm 0;
    color: #4b5563;
    font-style: italic;
  }

  .account-name {
    margin: 0 0 3mm 0;
    font-size: 11.5pt;
    font-weight: bold;
    color: #111827;
  }

  .section-title {
    font-size: 8.7pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #374151;
    background: #f3f4f6;
    padding: 1.6mm 2.5mm;
    border: 1px solid #d1d5db;
    border-bottom: none;
    margin-top: 2.5mm;
  }

  table.details {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 0 2mm 0;
  }

  table.details td {
    border: 1px solid #d1d5db;
    padding: 1.8mm 2.5mm;
    vertical-align: top;
  }

  table.details td.label {
    width: 32%;
    background: #f9fafb;
    font-weight: bold;
    color: #374151;
  }

  table.details td.value {
    width: 68%;
    color: #111827;
  }

  .instruction-box {
    margin-top: 2.5mm;
    padding: 2.5mm 3mm;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    color: #374151;
  }

  .signature-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3mm;
    margin-bottom: 3mm;
  }

  .signature-table td {
    width: 50%;
    border: 1px solid #d1d5db;
    padding: 2.5mm 3mm 2mm 3mm;
    vertical-align: bottom;
  }

  .sig-label {
    font-size: 8.5pt;
    font-weight: bold;
    color: #374151;
    margin-bottom: 4mm;
  }

  .sig-line {
    border-bottom: 1px solid #111827;
    height: 4mm;
  }

  .payment-section {
    margin-top: 10mm;
    padding-top: 2.5mm;
  }

  .payment-title {
    font-size: 9.5pt;
    font-weight: bold;
    color: #111827;
    margin-bottom: 1.5mm;
  }

  .payment-option {
    margin-bottom: 2mm;
  }

  .small {
    font-size: 8.8pt;
    color: #4b5563;
  }

  .strong {
    font-weight: bold;
  }

  .watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 80pt;
    color: rgba(220, 38, 38, 0.15); /* soft transparent red */
    font-weight: bold;
    letter-spacing: 8px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  .page {
    position: relative;
    z-index: 1;
  }

</style>
<div class="watermark">DRAFT</div>
<div class="page">
  <div class="logo">
    {{ pdf_asset('FenEdgeLogoOrange') }}
  </div>

  <div class="header">
    <div class="title">Membership Renewal 2026–2027</div>
    <div class="subtitle">Fen Edge Community Association</div>
  </div>

  <div class="fee-banner">Group Membership Fee: £15</div>

  <div class="note">Please amend any details that have changed before returning this form.</div>

  <div class="account-name">{{ account_name }}</div>

  <div class="section-title">Primary Contact Details</div>
  <table class="details">
    <tbody>
      <tr>
        <td class="label">Number of members</td>
        <td class="value"><b>{{ account_no_of_members }}</b></td>
      </tr>
      <tr>
        <td class="label">Contact name</td>
        <td class="value"><b>{{ contact_1_name }}</b></td>
      </tr>
      <tr>
        <td class="label">Position</td>
        <td class="value"><b>{{ contact_1_position }}</b></td>
      </tr>
      <tr>
        <td class="label">Address</td>
        <td class="value"><b>{{ contact_1_address_1 }} {{ contact_1_address_2 }} {{ contact_1_town }} {{ contact_1_postcode }}</b></td>
      </tr>
      <tr>
        <td class="label">Email</td>
        <td class="value"><b>{{ contact_1_email }}</b></td>
      </tr>
      <tr>
        <td class="label">Phone / Mobile</td>
        <td class="value"><b>{{ contact_1_phone }} {{ contact_1_mobile }}</b></td>
      </tr>
    </tbody>
  </table>

  <div class="section-title">Second Contact</div>
  <table class="details">
    <tbody>
      <tr>
        <td class="label">Name</td>
        <td class="value"><b>{{ contact_2_name }}</b></td>
      </tr>
      <tr>
        <td class="label">Position</td>
        <td class="value"><b>{{ contact_2_position }}</b></td>
      </tr>
      <tr>
        <td class="label">Email</td>
        <td class="value"><b>{{ contact_2_email }}</b></td>
      </tr>
      <tr>
        <td class="label">Phone / Mobile</td>
        <td class="value"><b>{{ contact_2_phone }} {{ contact_2_mobile }}</b></td>
      </tr>
    </tbody>
  </table>

  <div class="section-title">Fen Edge News Contact</div>
  <table class="details">
    <tbody>
      <tr>
        <td class="label">Name</td>
        <td class="value"><b>{{ fen_contact_name }}</b></td>
      </tr>
      <tr>
        <td class="label">Email</td>
        <td class="value"><b>{{ fen_contact_email }}</b></td>
      </tr>
    </tbody>
  </table>

  <div class="instruction-box">
    Please check your group’s public contact details on the FECA website:
    <b>www.fenedge.co.uk/full-members-list</b> and advise any changes.
  </div>

  <table class="signature-table">
    <tbody>
      <tr>
        <td>
          <div class="sig-label">Signed</div>
          <div class="sig-line"></div>
        </td>
        <td>
          <div class="sig-label">Date</div>
          <div class="sig-line"></div>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="payment-section">
    <div class="payment-title">Payment Options</div>

    <div class="payment-option">
      <span class="strong">1. Cheque:</span>
      payable to <b>Fen Edge Community Association</b>, sent with this form to
      <span class="small"><b>FECA Community Office, Cottenham Village College, Cottenham, CB24 8UA</b></span>
    </div>

    <div class="payment-option">
      <span class="strong">2. BACS:</span>
      <b>Sort Code 20-17-22</b>, <b>Account No. 40349178</b>;
      then scan and email the form to <b>info@fenedge.co.uk</b>
    </div>
  </div>
</div>