<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* ═══════════════════════════════════════════════
CONTRACT / AGREEMENT — Formal Legal Document
═══════════════════════════════════════════════ */
/* ── Print-ready page setup ── */
@page {
size: {{ style.page_format | default('Letter') }};
margin: {{ style.margin_top | default('20mm') }} {{ style.margin_right | default('22mm') }} {{ style.margin_bottom | default('20mm') }} {{ style.margin_left | default('22mm') }};
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
font-size: 9px;
color: #94a3b8;
font-family: {{ style.font_family | default('Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif') }};
}
}
:root {
--primary: {{ style.primary_color | default('#1e293b') }};
--primary-dark: {{ style.primary_dark | default('#0f172a') }};
--primary-light: {{ style.primary_light | default('#e2e8f0') }};
--primary-faint: {{ style.primary_faint | default('#f8fafc') }};
--accent: {{ style.accent_color | default('#475569') }};
--font: {{ style.font_family | default('Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif') }};
--font-serif: {{ style.serif_font | default('Georgia, "Times New Roman", Times, serif') }};
--text-heading: {{ style.text_primary | default('#0f172a') }};
--text-body: {{ style.text_secondary | default('#334155') }};
--text-muted: {{ style.text_tertiary | default('#94a3b8') }};
--border: {{ style.border_color | default('#cbd5e1') }};
--border-light: {{ style.border_light | default('#e2e8f0') }};
--bg-subtle: {{ style.bg_subtle | default('#f8fafc') }};
--bg-card: #ffffff;
}
/* ── Print color preservation ── */
*, *::before, *::after {
-webkit-print-color-adjust: exact !important;
-print-color-adjust: exact !important;
color-adjust: exact !important;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-serif);
font-size: 11.5px;
color: var(--text-body);
line-height: 1.7;
background: #eef2f7;
padding: 20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ═══════════════════════════════════════════════
DOCUMENT SHELL
═══════════════════════════════════════════════ */
.document {
max-width: 720px;
margin: 0 auto;
background: var(--bg-card);
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* ═══════════════════════════════════════════════
TOP RULE
═══════════════════════════════════════════════ */
.top-rule {
height: 4px;
background: var(--primary);
}
/* ═══════════════════════════════════════════════
TITLE BLOCK
═══════════════════════════════════════════════ */
.title-block {
padding: 32px 44px 24px;
text-align: center;
border-bottom: 1px solid var(--border);
}
.title-block .logo-row {
margin-bottom: 20px;
}
.title-block .logo {
max-width: 130px;
max-height: 40px;
display: block;
margin: 0 auto;
}
.title-block .doc-type-label {
font-family: var(--font);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--text-muted);
margin-bottom: 8px;
}
.title-block .doc-title {
font-family: var(--font);
font-size: 24px;
font-weight: 800;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 5px;
line-height: 1.15;
margin-bottom: 14px;
}
.title-meta {
display: flex;
justify-content: center;
gap: 32px;
font-family: var(--font);
}
.title-meta .meta-item {
text-align: center;
}
.title-meta .meta-label {
font-size: 8.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 2px;
}
.title-meta .meta-value {
font-size: 12px;
font-weight: 600;
color: var(--text-heading);
}
/* ═══════════════════════════════════════════════
CONTENT AREA
═══════════════════════════════════════════════ */
.content {
padding: 28px 44px 32px;
}
/* ═══════════════════════════════════════════════
PARTIES SECTION
═══════════════════════════════════════════════ */
.parties-section {
margin-bottom: 24px;
}
.parties-intro {
font-size: 11.5px;
color: var(--text-body);
font-style: italic;
margin-bottom: 16px;
text-align: center;
line-height: 1.7;
}
.parties-grid {
display: flex;
gap: 24px;
}
.party-block {
flex: 1;
padding: 16px 20px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-subtle);
}
.party-label {
font-family: var(--font);
font-size: 8.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--primary);
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border-light);
}
.party-name {
font-size: 14px;
font-weight: 700;
color: var(--text-heading);
margin-bottom: 4px;
line-height: 1.3;
}
.party-address {
font-size: 10.5px;
color: var(--text-body);
line-height: 1.55;
}
.party-email, .party-phone {
font-size: 10px;
color: var(--text-muted);
margin-top: 2px;
}
/* ═══════════════════════════════════════════════
RECITALS / PREAMBLE
═══════════════════════════════════════════════ */
.recitals-section {
margin-bottom: 24px;
}
.recitals-text {
font-size: 11.5px;
color: var(--text-body);
line-height: 1.75;
text-align: justify;
padding: 16px 22px;
background: var(--bg-subtle);
border-left: 3px solid var(--primary);
border-radius: 0 4px 4px 0;
}
/* ═══════════════════════════════════════════════
TERMS — Numbered Sections
═══════════════════════════════════════════════ */
.terms-section {
margin-bottom: 24px;
}
.terms-heading {
font-family: var(--font);
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--primary);
margin-bottom: 16px;
padding-bottom: 6px;
border-bottom: 2px solid var(--primary);
}
.term-section {
margin-bottom: 18px;
page-break-inside: avoid;
}
.term-section:last-child {
margin-bottom: 0;
}
.term-heading {
font-family: var(--font);
font-size: 12px;
font-weight: 700;
color: var(--text-heading);
margin-bottom: 6px;
line-height: 1.4;
display: flex;
align-items: baseline;
gap: 8px;
}
.term-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: var(--primary);
color: #fff;
border-radius: 50%;
font-size: 10px;
font-weight: 800;
flex-shrink: 0;
}
.term-content {
font-size: 11px;
color: var(--text-body);
line-height: 1.75;
text-align: justify;
padding-left: 32px;
}
.term-content p {
margin-bottom: 6px;
}
.term-content p:last-child {
margin-bottom: 0;
}
/* ═══════════════════════════════════════════════
SIGNATURES
═══════════════════════════════════════════════ */
.signatures-section {
margin-top: 36px;
page-break-inside: avoid;
}
.signatures-heading {
font-family: var(--font);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--primary);
text-align: center;
margin-bottom: 24px;
padding-bottom: 8px;
}
.signatures-grid {
display: flex;
gap: 48px;
}
.signature-block {
flex: 1;
}
.sig-party-label {
font-family: var(--font);
font-size: 8.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 4px;
}
.sig-party-name {
font-size: 12px;
font-weight: 700;
color: var(--text-heading);
margin-bottom: 2px;
}
.sig-party-title {
font-size: 10px;
color: var(--text-muted);
font-style: italic;
margin-bottom: 16px;
}
.sig-line {
border-top: 1.5px solid var(--border);
margin-bottom: 4px;
padding-top: 4px;
margin-top: 40px;
}
.sig-field {
font-family: var(--font);
font-size: 8.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
margin-bottom: 12px;
}
.sig-underlined {
border-bottom: 1px solid var(--border);
min-width: 200px;
display: inline-block;
padding: 2px 0;
font-size: 10px;
color: var(--text-muted);
margin-top: 2px;
}
/* ═══════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════ */
.footer {
padding: 16px 44px;
background: var(--bg-subtle);
border-top: 1px solid var(--border);
text-align: center;
font-size: 9.5px;
color: var(--text-muted);
font-style: italic;
line-height: 1.5;
}
/* ═══════════════════════════════════════════════
PAGE BREAKS
═══════════════════════════════════════════════ */
.signatures-section, .term-section, .party-block {
page-break-inside: avoid;
}
/* ═══════════════════════════════════════════════
WATERMARK
═══════════════════════════════════════════════ */
.watermark {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
font-size: 60px;
font-weight: 900;
color: var(--primary);
opacity: 0.06;
pointer-events: none;
text-transform: uppercase;
letter-spacing: 8px;
}
{% if style.show_watermark | default(false) | to_bool %}
<div class="watermark">{{ style.watermark_text | default('DRAFT') }}</div>
{% endif %}
</style>
</head>
<body>
<div class="document">
<!-- ════════════════════════════════════════
TOP RULE
════════════════════════════════════════ -->
<div class="top-rule"></div>
<!-- ════════════════════════════════════════
TITLE BLOCK
════════════════════════════════════════ -->
<div class="title-block">
<div class="logo-row">
{% if style.logo_url %}
<img src="{{ style.logo_url }}" alt="Logo" class="logo">
{% endif %}
</div>
<div class="doc-type-label">
{% if data.contract_type %}{{ data.contract_type }}{% else %}Legal Document{% endif %}
</div>
<div class="doc-title">
{{ data.contract_title | default('SERVICE AGREEMENT') }}
</div>
<div class="title-meta">
{% if data.document_number or data.contract_number %}
<div class="meta-item">
<div class="meta-label">Contract No.</div>
<div class="meta-value">{{ data.contract_number | default(data.document_number) }}</div>
</div>
{% endif %}
{% if data.effective_date %}
<div class="meta-item">
<div class="meta-label">Effective Date</div>
<div class="meta-value">{{ data.effective_date | date_format }}</div>
</div>
{% endif %}
{% if data.issue_date %}
<div class="meta-item">
<div class="meta-label">Date Issued</div>
<div class="meta-value">{{ data.issue_date | date_format }}</div>
</div>
{% endif %}
</div>
</div>
<div class="content">
<!-- ════════════════════════════════════
PARTIES
════════════════════════════════════ -->
<div class="parties-section">
<div class="parties-intro">
This agreement is entered into by and between the following parties:
</div>
<div class="parties-grid">
<!-- Party A (Provider / Company) -->
<div class="party-block">
<div class="party-label">Party A — {{ data.from.title | default('Service Provider') }}</div>
{% if data.from.name %}
<div class="party-name">{{ data.from.name }}</div>
{% endif %}
{% if data.from.address %}
<div class="party-address">{{ data.from.address | nl2br }}</div>
{% endif %}
{% if data.from.email %}
<div class="party-email">{{ data.from.email }}</div>
{% endif %}
{% if data.from.phone %}
<div class="party-phone">{{ data.from.phone }}</div>
{% endif %}
{% if not data.from.name and not data.from.address %}
<div class="party-address" style="color:var(--text-muted); font-style:italic;">Party details to be provided</div>
{% endif %}
</div>
<!-- Party B (Client) -->
<div class="party-block">
<div class="party-label">Party B — {{ data.to.title | default('Client') }}</div>
{% if data.to.name %}
<div class="party-name">{{ data.to.name }}</div>
{% endif %}
{% if data.to.address %}
<div class="party-address">{{ data.to.address | nl2br }}</div>
{% endif %}
{% if data.to.email %}
<div class="party-email">{{ data.to.email }}</div>
{% endif %}
{% if data.to.phone %}
<div class="party-phone">{{ data.to.phone }}</div>
{% endif %}
{% if not data.to.name and not data.to.address %}
<div class="party-address" style="color:var(--text-muted); font-style:italic;">Party details to be provided</div>
{% endif %}
</div>
</div>
</div>
<!-- ════════════════════════════════════
RECITALS / PREAMBLE
════════════════════════════════════ -->
{% if data.preamble %}
<div class="recitals-section">
<div class="terms-heading">Preamble</div>
<div class="recitals-text">
{{ data.preamble | nl2br }}
</div>
</div>
{% endif %}
<!-- ════════════════════════════════════
TERMS — Numbered Sections
════════════════════════════════════ -->
{% if data.terms_sections %}
<div class="terms-section">
<div class="terms-heading">Terms and Conditions</div>
{% for section in data.terms_sections %}
<div class="term-section">
<div class="term-heading">
<span class="term-number">{{ loop.index }}</span>
{{ section.title | default('Section ' ~ loop.index) }}
</div>
<div class="term-content">
{{ section.content | default('') | nl2br }}
</div>
</div>
{% endfor %}
</div>
{% endif %}
<!-- ════════════════════════════════════
ADDITIONAL TERMS (fallback)
════════════════════════════════════ -->
{% if data.terms and not data.terms_sections %}
<div class="terms-section">
<div class="terms-heading">Terms and Conditions</div>
<div class="term-content" style="padding-left:0;">
{{ data.terms | nl2br }}
</div>
</div>
{% endif %}
<!-- ════════════════════════════════════
SIGNATURES
════════════════════════════════════ -->
<div class="signatures-section">
<div class="signatures-heading">In Witness Whereof, the Parties Execute This Agreement</div>
<div class="signatures-grid">
<!-- Party A Signature -->
<div class="signature-block">
<div class="sig-party-label">Party A</div>
{% if data.from.name %}
<div class="sig-party-name">{{ data.from.name }}</div>
{% endif %}
{% if data.from.title %}
<div class="sig-party-title">{{ data.from.title }}</div>
{% endif %}
<div class="sig-line"></div>
<div class="sig-field">Signature</div>
<div class="sig-field">Printed Name</div>
<div class="sig-underlined">{% if data.from.name %}{{ data.from.name }}{% else %} {% endif %}</div>
<br>
<div class="sig-field">Date</div>
<div class="sig-underlined">{% if data.issue_date %}{{ data.issue_date | date_format }}{% else %} {% endif %}</div>
</div>
<!-- Party B Signature -->
<div class="signature-block">
<div class="sig-party-label">Party B</div>
{% if data.to.name %}
<div class="sig-party-name">{{ data.to.name }}</div>
{% endif %}
{% if data.to.title %}
<div class="sig-party-title">{{ data.to.title }}</div>
{% endif %}
<div class="sig-line"></div>
<div class="sig-field">Signature</div>
<div class="sig-field">Printed Name</div>
<div class="sig-underlined"> </div>
<br>
<div class="sig-field">Date</div>
<div class="sig-underlined"> </div>
</div>
</div>
</div>
</div>
<!-- ════════════════════════════════════════
FOOTER
════════════════════════════════════════ -->
<div class="footer">
This document constitutes the entire agreement between the parties and supersedes all prior discussions, agreements, and understandings, whether written or oral.
</div>
</div>
</body>
</html>