legal-markdown-js/dist/examples/styles/contract.css

Node.js implementation of LegalMarkdown for processing legal documents with markdown and YAML - Complete feature parity with Ruby version

/**
 * Contract Template Styles
 *
 * Stylesheet for contract documents, optimized for both screen and print media.
 * Includes typography configuration, spacing, and specific PDF optimizations.
 *
 * Structure:
 * 1. Variables and base configuration
 * 2. Typography and visual hierarchy
 * 3. Content elements
 * 4. Tables and signatures
 * 5. Print optimizations
 * 6. Utilities and special classes
 */

/* Variables and base configuration
   ========================================================================== */
:root {
  /* Colors */
  --color-primary: #353954;
  --color-accent: #02370a;
  --color-link: #41badf;
  --color-text: #333;
  --color-error: red;

  /* Typography */
  --font-primary: Helvetica, Arial, sans-serif;
  --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

  /* Spacing */
  --spacing-small: 8px;
  --spacing-medium: 15px;
  --spacing-large: 30px;

  /* Sizes */
  --font-size-base: 12pt;
  --font-size-h1: 1.6em;
  --font-size-h2: 14pt;
  --font-size-h3: 10pt;

  /* Assets */
  --logo-filename: 160x40.png;
}

/* Base document configuration
   ========================================================================== */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.3;
  color: var(--color-text);
  max-width: 210mm; /* A4 width */
  margin: 0 auto;
  padding: 20mm 15mm;
  background-color: white;
}

/* Typography hierarchy
   ========================================================================== */
/* Prevent page breaks in headings */
h1,
h2,
h3,
h4,
h5,
h6,
.legal-header-level-1,
.legal-header-level-2,
.legal-header-level-3,
.legal-header-level-4,
.legal-header-level-5,
.legal-header-level-6 {
  page-break-after: avoid;
  page-break-inside: avoid;
}

/* Main document title */
h1,
.legal-header-level-1 {
  color: var(--color-primary);
  font-size: var(--font-size-h1);
  line-height: 1.5em;
  margin: var(--spacing-small) var(--spacing-small) 32px;
  text-align: center;
  border-bottom: solid var(--color-accent);
  padding: 0 5% 0.3em;
}

/* Section headings */
h2,
.legal-header-level-2 {
  font-size: var(--font-size-h2);
  margin-top: 20px;
  margin-bottom: var(--spacing-medium);
  border-bottom: 1px solid var(--color-link);
}

/* Subsection headings */
h3,
.legal-header-level-3 {
  font-size: var(--font-size-h3);
  font-weight: bold;
  border-bottom: 1px solid var(--color-link);
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-small);
}

/* Sub-subsection headings */
h4,
.legal-header-level-4 {
  font-size: calc(var(--font-size-h3) * 0.9);
  font-weight: 600;
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-small);
}

/* Paragraph headings */
h5,
.legal-header-level-5 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-top: var(--spacing-small);
  margin-bottom: calc(var(--spacing-small) / 2);
}

/* Minor headings */
h6,
.legal-header-level-6 {
  font-size: calc(var(--font-size-base) * 0.9);
  font-weight: 500;
  margin-top: calc(var(--spacing-small) / 2);
  margin-bottom: calc(var(--spacing-small) / 2);
}

/* Content elements
   ========================================================================== */
/* Paragraphs */
p {
  margin-bottom: var(--spacing-medium);
  text-align: justify;
  orphans: 3; /* Minimum lines at start of page */
  widows: 3; /* Minimum lines at end of page */
  page-break-inside: avoid;
}

/* Lists */
ul,
ol {
  margin-left: var(--spacing-small);
  margin-bottom: var(--spacing-medium);
  padding-inline-start: 20px;
  page-break-inside: auto; /* Allow page breaks in lists */
}

li {
  margin-bottom: var(--spacing-small);
  page-break-inside: auto;
}

/* Horizontal separators */
hr {
  border: 1px solid var(--color-link);
  margin: var(--spacing-medium) 0;
}

/* Empty fields and missing values */
.missing-value {
  background-color: #ffebee;
  color: #c62828;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px dashed #ef5350;
  font-style: italic;
}

/* Tables
   ========================================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}

/* Signature table
   ========================================================================== */
.signatures {
  page-break-inside: avoid;
  margin-top: var(--spacing-large);
}

.signatures th {
  display: none; /* Hide headers while maintaining structure */
}

.signatures th,
.signatures td {
  padding: var(--spacing-small);
  text-align: left;
}

/* Two-column layout: 1/3 for labels, 2/3 for signatures */
.signatures th:first-child,
.signatures td:first-child {
  width: 33.33%;
}

.signatures th:last-child,
.signatures td:last-child {
  width: 66.67%;
}

.signatures td {
  height: 8em;
  vertical-align: bottom;
  font-weight: normal;
}

/* Table of contents
   ========================================================================== */
.table-of-contents li {
  margin-bottom: 5px;
  list-style-type: none;
}

/* Confidential section
   ========================================================================== */
.confidential {
  width: 100%;
  background-color: var(--color-accent) !important;
  color: white !important;
  font-weight: bold !important;
  text-align: center !important;
  padding: var(--spacing-small) 0 !important;
  margin: var(--spacing-medium) 0 25px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: block !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

#confidential-header {
  margin-top: -20px;
}

/* Algorithm blocks
   ========================================================================== */
.algorithm {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: var(--spacing-small) 12px;
  margin: 12px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
}

.algorithm pre {
  margin: 0;
  white-space: pre;
}

/* Utilities
   ========================================================================== */
.no-break {
  page-break-inside: avoid !important;
}

/* Print optimizations
   ========================================================================== */
@media print {
  /* Page setup */
  @page {
    size: A4;
    margin: 20mm 10mm 10mm 10mm;
  }

  body {
    font-size: 11pt;
    color: black;
  }

  /* Links */
  a {
    text-decoration: none;
    color: var(--color-link);
  }

  /* Internal links */
  a[href^='#'] {
    color: var(--color-link);
    text-decoration: none;
  }

  a[data-internal-link='true'] {
    color: var(--color-link) !important;
    text-decoration: none !important;
  }

  /* Show URLs after links */
  a[href^='http']:after {
    content: ' (' attr(href) ')';
    font-size: 90%;
  }

  /* Page break control */
  h3,
  p {
    page-break-inside: avoid;
  }

  ul,
  ol {
    page-break-inside: auto;
  }

  img {
    page-break-inside: avoid;
  }

  /* Annex separation */
  .annex-section-title {
    page-break-before: always;
    page-break-after: always;
  }

  .annex-title {
    page-break-before: always;
  }

  /* Maintain colors in print */
  .confidential {
    background-color: var(--color-accent) !important;
    color: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .algorithm {
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}