atomic-design-poc/public/letter.css

/* letter.css — the FE⇄BE letter-rendering CONTRACT (WP-24/WP-25).
 *
 * One stylesheet, two consumers: the FE letter canvas loads it via <link>
 * (index.html + Storybook preview-head), the backend HTML renderer (WP-25)
 * inlines this same file. Its class-parity test is the fence against drift.
 *
 * Class vocabulary: .letter, .letter__letterhead, .letter__body,
 * .letter__signature, .letter__footer, .letter__page-break.
 * Margins arrive as --letter-margin-* custom props (mm, from the OrgTemplate);
 * the defaults below match the seed template.
 *
 * Deliberately self-contained: no --rhc- or --bs- tokens — the backend renderer
 * has no token bridge. Geometry follows the sample voorbeeldbrief-inschrijving
 * (A4, return address above the envelope window, reference block, footer rule).
 */

.letter {
  --letter-margin-top: 25mm;
  --letter-margin-right: 25mm;
  --letter-margin-bottom: 25mm;
  --letter-margin-left: 25mm;

  position: relative;
  box-sizing: border-box;
  width: 210mm; /* A4 */
  max-width: 100%;
  min-height: 297mm;
  margin-inline: auto;
  padding: var(--letter-margin-top) var(--letter-margin-right) var(--letter-margin-bottom)
    var(--letter-margin-left);
  background: #fff;
  color: #1a1a1a;
  /* Letter typography is the letter's, not the portal UI's. Licensed RO/Rijks
     fonts are not shipped; system stack mirrors the app-wide decision (ADR-0003). */
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: 10.5pt;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

.letter p {
  margin: 0 0 0.75em;
}

.letter ul,
.letter ol {
  margin: 0 0 0.75em;
  padding-inline-start: 1.4em;
}

/* --- Letterhead: wordmark, return address above the envelope window, reference block --- */

.letter__letterhead {
  margin-block-end: 12mm;
}

.letter__letterhead .org-wordmark {
  font-size: 13pt;
  font-weight: 700;
  margin: 0 0 10mm;
}

.letter__letterhead .return-address {
  font-style: normal;
  font-size: 7.5pt;
  white-space: pre-line;
  color: #555;
  margin-block-end: 2mm;
}

/* Envelope-window position (~C5 venstercouvert): recipient block. */
.letter__letterhead .address-window {
  min-height: 22mm;
  font-style: normal;
  white-space: pre-line;
  margin-block-end: 8mm;
}

.letter__letterhead .reference {
  display: flex;
  gap: 10mm;
  font-size: 8.5pt;
  color: #333;
}

.letter__letterhead .reference dt {
  font-weight: 700;
  margin: 0;
}

.letter__letterhead .reference dd {
  margin: 0;
}

/* --- Body: the case-type template's sections --- */

.letter__body {
  flex: 1;
  /* Above the absolutely-positioned page-break marks: the dashed line stays visible
     in the gaps but never draws THROUGH opaque content (editors, pickers). */
  position: relative;
  z-index: 1;
}

.letter__body h3 {
  font-size: inherit;
  font-weight: 700;
  margin: 0 0 0.25em;
}

.letter__body section {
  margin-block-end: 1.5em;
}

/* --- Signature --- */

.letter__signature {
  margin-block-start: 10mm;
}

.letter__signature p {
  margin: 0;
}

.letter__signature .signature-name {
  margin-block-start: 3em; /* room for the (not-shipped) handwritten signature */
  font-weight: 700;
}

/* --- Footer: contact + legal, above a rule --- */

.letter__footer {
  margin-block-start: 10mm;
  padding-block-start: 3mm;
  border-block-start: 0.5pt solid #999;
  font-size: 7.5pt;
  color: #555;
  display: flex;
  justify-content: space-between;
  gap: 10mm;
}

.letter__footer .footer-contact {
  white-space: pre-line;
}

.letter__footer .footer-legal {
  text-align: end;
}

/* --- Approximate page-break indicator (screen only; PRD §2b honesty rule) ---
   Positioned per A4-interval by the canvas; the print preview is authoritative. */

.letter__page-break {
  position: absolute;
  inset-inline: 0;
  border-block-start: 1px dashed #b36200;
  pointer-events: none;
}

.letter__page-break > span {
  position: absolute;
  inset-inline-end: 2mm;
  inset-block-start: 0;
  transform: translateY(-50%);
  /* Above .letter__body: the honesty caption stays legible even over content. */
  z-index: 2;
  font-size: 7pt;
  color: #b36200;
  background: #fff;
  padding-inline: 1mm;
  white-space: nowrap;
}

/* --- Print: real pages, no indicator chrome --- */

@page {
  size: A4;
  margin: 0;
}

@media print {
  .letter {
    width: auto;
    min-height: 0;
  }

  .letter__page-break {
    display: none;
  }
}