mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-14 10:34:06 +02:00
229 lines
5.3 KiB
HTML
229 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Business Letter</title>
|
|
<style>
|
|
/* ── Theme variables (replaced at generation time) ── */
|
|
{{THEME_CSS}}
|
|
|
|
/* ── Print / page setup ── */
|
|
@page {
|
|
size: A4;
|
|
margin: 20mm;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: var(--theme-font, 'Helvetica Neue', Arial, sans-serif);
|
|
font-size: 10pt;
|
|
color: var(--theme-text, #1a1a1a);
|
|
background: var(--theme-bg, #ffffff);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.document {
|
|
max-width: 170mm;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ── Letterhead ── */
|
|
.letterhead {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding-bottom: 8pt;
|
|
border-bottom: 1.5pt solid var(--theme-accent, #2563eb);
|
|
margin-bottom: 14pt;
|
|
}
|
|
|
|
.sender-block {
|
|
flex: 1;
|
|
}
|
|
|
|
.sender-company {
|
|
font-size: 14pt;
|
|
font-weight: 700;
|
|
color: var(--theme-primary, #1e3a5f);
|
|
margin-bottom: 3pt;
|
|
}
|
|
|
|
.sender-detail {
|
|
font-size: 8pt;
|
|
color: var(--theme-text-muted, #6b7280);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.sender-contact {
|
|
font-size: 8pt;
|
|
color: var(--theme-text-muted, #6b7280);
|
|
text-align: right;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ── Date ── */
|
|
.letter-date {
|
|
font-size: 9.5pt;
|
|
color: var(--theme-text, #1a1a1a);
|
|
margin-bottom: 14pt;
|
|
}
|
|
|
|
/* ── Recipient ── */
|
|
.recipient-block {
|
|
margin-bottom: 14pt;
|
|
}
|
|
|
|
.recipient-name {
|
|
font-size: 9.5pt;
|
|
font-weight: 600;
|
|
color: var(--theme-heading, #111827);
|
|
}
|
|
|
|
.recipient-detail {
|
|
font-size: 9pt;
|
|
color: var(--theme-text, #1a1a1a);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ── Subject line ── */
|
|
.subject-line {
|
|
font-size: 9.5pt;
|
|
font-weight: 700;
|
|
color: var(--theme-primary, #1e3a5f);
|
|
margin-bottom: 12pt;
|
|
padding: 4pt 0;
|
|
border-top: 0.5pt solid var(--theme-border, #e2e8f0);
|
|
border-bottom: 0.5pt solid var(--theme-border, #e2e8f0);
|
|
}
|
|
|
|
.subject-label {
|
|
color: var(--theme-text-muted, #6b7280);
|
|
font-weight: 600;
|
|
font-size: 8.5pt;
|
|
margin-right: 4pt;
|
|
}
|
|
|
|
/* ── Salutation ── */
|
|
.salutation {
|
|
font-size: 10pt;
|
|
margin-bottom: 10pt;
|
|
}
|
|
|
|
/* ── Body ── */
|
|
.body-text {
|
|
font-size: 10pt;
|
|
line-height: 1.6;
|
|
color: var(--theme-text, #1a1a1a);
|
|
white-space: pre-line;
|
|
margin-bottom: 14pt;
|
|
}
|
|
|
|
/* ── Closing ── */
|
|
.closing {
|
|
font-size: 10pt;
|
|
margin-bottom: 30pt;
|
|
}
|
|
|
|
/* ── Signature block ── */
|
|
.sig-block {
|
|
font-size: 9.5pt;
|
|
}
|
|
|
|
.sig-name {
|
|
font-size: 10pt;
|
|
font-weight: 700;
|
|
color: var(--theme-heading, #111827);
|
|
margin-bottom: 1pt;
|
|
}
|
|
|
|
.sig-title {
|
|
font-size: 9pt;
|
|
color: var(--theme-text-muted, #6b7280);
|
|
margin-bottom: 1pt;
|
|
}
|
|
|
|
.sig-company {
|
|
font-size: 9pt;
|
|
color: var(--theme-text-muted, #6b7280);
|
|
}
|
|
|
|
/* ── Footer extras ── */
|
|
.letter-footer {
|
|
margin-top: 16pt;
|
|
padding-top: 6pt;
|
|
border-top: 0.5pt solid var(--theme-border, #e2e8f0);
|
|
font-size: 8pt;
|
|
color: var(--theme-text-muted, #6b7280);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ── Page-break controls ── */
|
|
thead { display: table-header-group; }
|
|
tr { break-inside: avoid; page-break-inside: avoid; }
|
|
.section-heading { break-after: avoid; page-break-after: avoid; }
|
|
.sig-block { break-inside: avoid; page-break-inside: avoid; }
|
|
|
|
/* ── Print overrides ── */
|
|
@media print {
|
|
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
.document { max-width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="document">
|
|
|
|
<!-- Letterhead -->
|
|
<div class="letterhead">
|
|
<div class="sender-block">
|
|
{{LOGO_BLOCK}}
|
|
<div class="sender-company">{{SENDER_COMPANY}}</div>
|
|
<div class="sender-detail">{{SENDER_ADDRESS}}</div>
|
|
</div>
|
|
<div class="sender-contact">{{SENDER_CONTACT}}</div>
|
|
</div>
|
|
|
|
<!-- Date -->
|
|
<div class="letter-date">{{LETTER_DATE}}</div>
|
|
|
|
<!-- Recipient -->
|
|
<div class="recipient-block">
|
|
<div class="recipient-name">{{RECIPIENT_NAME}}</div>
|
|
<div class="recipient-detail">{{RECIPIENT_TITLE}}</div>
|
|
<div class="recipient-detail">{{RECIPIENT_COMPANY}}</div>
|
|
<div class="recipient-detail">{{RECIPIENT_ADDRESS}}</div>
|
|
</div>
|
|
|
|
<!-- Subject -->
|
|
<div class="subject-line">
|
|
<span class="subject-label">Re:</span>{{SUBJECT_LINE}}
|
|
</div>
|
|
|
|
<!-- Salutation -->
|
|
<div class="salutation">{{SALUTATION}}</div>
|
|
|
|
<!-- Body -->
|
|
<div class="body-text">{{BODY_TEXT}}</div>
|
|
|
|
<!-- Closing -->
|
|
<div class="closing">{{CLOSING}}</div>
|
|
|
|
<!-- Signature -->
|
|
<div class="sig-block">
|
|
<div class="sig-name">{{SENDER_NAME}}</div>
|
|
<div class="sig-title">{{SENDER_TITLE}}</div>
|
|
<div class="sig-company">{{SENDER_COMPANY}}</div>
|
|
</div>
|
|
|
|
<!-- Footer: enclosures / cc -->
|
|
<div class="letter-footer">
|
|
<div>Enc: {{ENCLOSURES}}</div>
|
|
<div>cc: {{CC_LIST}}</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|