Stirling-PDF/engine/src/default_templates/job_description.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Job Description</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.4;
    }

    .document {
      max-width: 170mm;
      margin: 0 auto;
    }

{{HEADER_CSS}}

    /* ── Meta grid ── */
    .meta-grid {
      display: grid;
      grid-template-columns: 120pt auto;
      row-gap: 2pt;
      margin-bottom: 8pt;
    }

    .meta-label {
      font-weight: 600;
      color: var(--theme-text-muted, #6b7280);
      font-size: 8.5pt;
    }

    .meta-value {
      font-size: 8.5pt;
      color: var(--theme-text, #1a1a1a);
    }

    /* ── Section heading ── */
    .section-heading {
      font-size: 10pt;
      font-weight: 700;
      color: var(--theme-primary, #1e3a5f);
      border-bottom: 1pt solid var(--theme-accent, #2563eb);
      padding-bottom: 2pt;
      margin: 10pt 0 6pt;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* ── Text sections ── */
    .text-section {
      font-size: 9.5pt;
      line-height: 1.6;
      color: var(--theme-text, #1a1a1a);
      margin-bottom: 4pt;
      white-space: pre-line;
    }

    /* ── Bullet lists (li items provided via placeholder) ── */
    .bullet-list {
      font-size: 9.5pt;
      line-height: 1.6;
      color: var(--theme-text, #1a1a1a);
      padding-left: 14pt;
      margin-bottom: 4pt;
    }

    .bullet-list li {
      margin-bottom: 3pt;
    }

    /* ── 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; }
    .bullet-list li { 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">

    <div class="top-bar"></div>

    <!-- Header -->
    <div class="doc-header">
      {{LOGO_BLOCK}}
      <div class="doc-header-text">
        <div class="doc-title">{{JOB_TITLE}}</div>
        <div class="doc-subtitle">{{COMPANY_NAME}}</div>
      </div>
    </div>
    <hr>

    <!-- Job details -->
    <div class="meta-grid">
      <span class="meta-label">Department:</span>      <span class="meta-value">{{DEPARTMENT}}</span>
      <span class="meta-label">Location:</span>         <span class="meta-value">{{LOCATION}}</span>
      <span class="meta-label">Employment Type:</span>  <span class="meta-value">{{EMPLOYMENT_TYPE}}</span>
      <span class="meta-label">Salary Range:</span>     <span class="meta-value">{{SALARY_RANGE}}</span>
    </div>
    <hr>

    <!-- About the Role -->
    <div class="section-heading">About the Role</div>
    <div class="text-section">{{ABOUT_ROLE_TEXT}}</div>

    <!-- Key Responsibilities -->
    <div class="section-heading">Key Responsibilities</div>
    <ul class="bullet-list">
      {{RESPONSIBILITIES_ITEMS}}
    </ul>

    <!-- Required Qualifications -->
    <div class="section-heading">Required Qualifications</div>
    <ul class="bullet-list">
      {{REQUIRED_QUALS_ITEMS}}
    </ul>

    <!-- Preferred Qualifications -->
    <div class="section-heading">Preferred Qualifications</div>
    <ul class="bullet-list">
      {{PREFERRED_QUALS_ITEMS}}
    </ul>

    <!-- What We Offer -->
    <div class="section-heading">What We Offer</div>
    <ul class="bullet-list">
      {{BENEFITS_ITEMS}}
    </ul>

    <!-- How to Apply -->
    <div class="section-heading">How to Apply</div>
    <div class="text-section">{{HOW_TO_APPLY_TEXT}}</div>

  </div>
</body>
</html>