300 lines
7.7 KiB
HTML
300 lines
7.7 KiB
HTML
<!-- Template Version: 4 -->
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
|
||
@page { size: A4; margin: 10mm; }
|
||
|
||
body {
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
color: #1f2937;
|
||
font-size: 9pt;
|
||
line-height: 1.25;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.page { width: 100%; position: relative; z-index: 1; }
|
||
|
||
.watermark {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%) rotate(-35deg);
|
||
font-size: 72pt;
|
||
color: rgba(220, 38, 38, 0.12);
|
||
font-weight: bold;
|
||
letter-spacing: 7px;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.header {
|
||
margin-bottom: 5.5mm;
|
||
min-height: 29mm;
|
||
}
|
||
|
||
.logo-right {
|
||
float: right;
|
||
width: 42mm;
|
||
margin-left: 4mm;
|
||
text-align: right;
|
||
}
|
||
|
||
.header-text { overflow: hidden; }
|
||
|
||
.title {
|
||
font-size: 14.5pt;
|
||
font-weight: bold;
|
||
color: #0f172a;
|
||
margin: 0 0 1mm 0;
|
||
}
|
||
|
||
.subtitle {
|
||
margin: 0;
|
||
font-size: 9.2pt;
|
||
color: #4b5563;
|
||
}
|
||
|
||
.rule {
|
||
margin: 2.8mm 0 2.4mm 0;
|
||
border: 0;
|
||
border-top: 2px solid #d97706;
|
||
}
|
||
|
||
.fee-banner {
|
||
margin: 0 0 2.4mm 0;
|
||
padding: 1.9mm 2.5mm;
|
||
background: #fff7ed;
|
||
border-left: 4px solid #d97706;
|
||
font-size: 10pt;
|
||
font-weight: bold;
|
||
color: #9a3412;
|
||
}
|
||
|
||
.note {
|
||
margin: 0 0 1.3mm 0;
|
||
font-style: italic;
|
||
color: #374151;
|
||
}
|
||
|
||
.note-line {
|
||
margin: 0 0 3.8mm 0;
|
||
color: #111827;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pane {
|
||
border: 1px solid #d1d5db;
|
||
margin: 0 0 3.6mm 0;
|
||
}
|
||
|
||
.pane-title {
|
||
background: #f3f4f6;
|
||
border-bottom: 1px solid #d1d5db;
|
||
padding: 1.5mm 2.2mm;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.4px;
|
||
font-size: 8pt;
|
||
color: #374151;
|
||
}
|
||
|
||
.pane-body { padding: 2.1mm 2.2mm; }
|
||
|
||
.two-col {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
.two-col td {
|
||
width: 50%;
|
||
vertical-align: top;
|
||
padding: 0 1.5mm;
|
||
}
|
||
|
||
.two-col td:first-child { padding-left: 0; }
|
||
.two-col td:last-child { padding-right: 0; }
|
||
|
||
table.details {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
table.details td {
|
||
border: 1px solid #e5e7eb;
|
||
padding: 1.5mm 2mm;
|
||
vertical-align: top;
|
||
}
|
||
|
||
table.details td.label {
|
||
width: 40%;
|
||
font-weight: bold;
|
||
color: #374151;
|
||
background: #f9fafb;
|
||
}
|
||
|
||
table.details td.value {
|
||
width: 60%;
|
||
color: #111827;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.instruction-box {
|
||
margin: 0 0 3.6mm 0;
|
||
border: 1px solid #d1d5db;
|
||
background: #f9fafb;
|
||
padding: 2mm 2.4mm;
|
||
color: #374151;
|
||
}
|
||
|
||
.sign {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 3.2mm;
|
||
}
|
||
|
||
.sign td {
|
||
width: 50%;
|
||
border: 1px solid #d1d5db;
|
||
padding: 2.4mm 2.6mm;
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
.sig-label {
|
||
font-size: 8.1pt;
|
||
font-weight: bold;
|
||
color: #374151;
|
||
margin-bottom: 4.8mm;
|
||
}
|
||
|
||
.sig-line {
|
||
border-bottom: 1px solid #111827;
|
||
height: 4.2mm;
|
||
}
|
||
|
||
.payments {
|
||
margin-top: 3.8mm;
|
||
border-top: 1px solid #d1d5db;
|
||
padding-top: 2.8mm;
|
||
}
|
||
|
||
.payments-title {
|
||
font-size: 9.2pt;
|
||
font-weight: bold;
|
||
margin: 0 0 2mm 0;
|
||
color: #111827;
|
||
}
|
||
|
||
.payments p { margin: 0 0 1.9mm 0; }
|
||
|
||
.clear { clear: both; }
|
||
</style>
|
||
|
||
<div class="watermark">DRAFT</div>
|
||
<div class="page">
|
||
<div class="header">
|
||
<div class="logo-right">{{ pdf_asset("Fen Edge Logo") }}</div>
|
||
<div class="header-text">
|
||
<p class="title">Membership Renewal 2026-2027</p>
|
||
<p class="subtitle">Fen Edge Community Association</p>
|
||
<hr class="rule">
|
||
<div class="fee-banner">Group Membership Fee: GBP15</div>
|
||
<p class="note">Please amend any details that have changed before returning this form.</p>
|
||
<p class="note-line">Please amend:</p>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
|
||
<div class="pane">
|
||
<div class="pane-title">Account And Public Contact</div>
|
||
<div class="pane-body">
|
||
<table class="two-col">
|
||
<tr>
|
||
<td>
|
||
<table class="details">
|
||
<tr><td class="label">Account</td><td class="value">{{ account_name }}</td></tr>
|
||
<tr><td class="label">Type</td><td class="value">{{ account_type }}</td></tr>
|
||
<tr><td class="label">Sector</td><td class="value">{{ account_sector }}</td></tr>
|
||
<tr><td class="label">Public Location</td><td class="value">{{ public_location }}</td></tr>
|
||
<tr><td class="label">Members</td><td class="value">{{ account_no_of_members }}</td></tr>
|
||
</table>
|
||
</td>
|
||
<td>
|
||
<table class="details">
|
||
<tr><td class="label">Public Contact</td><td class="value">{{ public_contact_name }}</td></tr>
|
||
<tr><td class="label">Public Email</td><td class="value">{{ public_contact_public_email }}</td></tr>
|
||
<tr><td class="label">Public Phone</td><td class="value">{{ public_contact_public_phone }}</td></tr>
|
||
<tr><td class="label">Facebook</td><td class="value">tbd</td></tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pane">
|
||
<div class="pane-title">Primary Contact (Contact 1)</div>
|
||
<div class="pane-body">
|
||
<table class="details">
|
||
<tr><td class="label">Name</td><td class="value">{{ contact_1_name }}</td></tr>
|
||
<tr><td class="label">Position</td><td class="value">{{ contact_1_position }}</td></tr>
|
||
<tr><td class="label">Address</td><td class="value">{{ contact_1_address_1 }} {{ contact_1_address_2 }}, {{ contact_1_town }}, {{ contact_1_county }}, {{ contact_1_postcode }}</td></tr>
|
||
<tr><td class="label">Email</td><td class="value">{{ contact_1_email }}</td></tr>
|
||
<tr><td class="label">Phone / Mobile</td><td class="value">{{ contact_1_phone }} {{ contact_1_mobile }}</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pane">
|
||
<div class="pane-title">Secondary Contacts</div>
|
||
<div class="pane-body">
|
||
<table class="two-col">
|
||
<tr>
|
||
<td>
|
||
<table class="details">
|
||
<tr><td class="label">Contact 2 Name</td><td class="value">{{ contact_2_name }}</td></tr>
|
||
<tr><td class="label">Position</td><td class="value">{{ contact_2_position }}</td></tr>
|
||
<tr><td class="label">Email</td><td class="value">{{ contact_2_email }}</td></tr>
|
||
<tr><td class="label">Phone / Mobile</td><td class="value">{{ contact_2_phone }} {{ contact_2_mobile }}</td></tr>
|
||
</table>
|
||
</td>
|
||
<td>
|
||
<table class="details">
|
||
<tr><td class="label">Fen Contact Name</td><td class="value">{{ fen_contact_name }}</td></tr>
|
||
<tr><td class="label">Fen Contact Email</td><td class="value">{{ fen_contact_email }}</td></tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="instruction-box">
|
||
Please check your group’s public contact details on the FECA website:
|
||
<strong>www.fenedge.co.uk/full-members-list</strong> and advise any changes.
|
||
</div>
|
||
|
||
<table class="sign">
|
||
<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>
|
||
</table>
|
||
|
||
<div class="payments">
|
||
<p class="payments-title">Payment Options</p>
|
||
<p><strong>1. Cheque:</strong> payable to <strong>Fen Edge Community Association</strong>, sent with this form to <strong>FECA Community Office, Cottenham Village College, Cottenham, CB24 8UA</strong>.</p>
|
||
<p><strong>2. BACS:</strong> <strong>Sort Code 20-17-22</strong>, <strong>Account No. 40349178</strong>; then scan and email the form to <strong>info@fenedge.co.uk</strong>.</p>
|
||
</div>
|
||
</div>
|