/* ============================================================================ PRIORITY ONE BUILDING SERVICES — DESIGN TOKENS Authoritative brand tokens for the report portal. Source: customer handoff bundle (p1b_report_handoff.zip / p1b_handoff_README.md). All report components should reference these variables rather than hard-coding values. Mounted via in public/index.html . Earlier-defined :root vars in the existing inline stylesheet are reaffirmed here so the handoff tokens are the single source of truth. ============================================================================ */ /* ---- FONTS ---------------------------------------------------------------- Barlow Condensed (headings) and Barlow (optional body) are SIL OFL — free to self-host. Arial is NOT redistributable: do not ship an Arial file, use the stack defined in --font-body below. font-display: swap so report rendering does not block on the font load. */ @font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/BarlowCondensed-SemiBold.woff2") format("woff2"), url("/fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/BarlowCondensed-Bold.woff2") format("woff2"), url("/fonts/BarlowCondensed-Bold.ttf") format("truetype"); } @font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/fonts/Barlow-Regular.woff2") format("woff2"), url("/fonts/Barlow-Regular.ttf") format("truetype"); } @font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("/fonts/Barlow-Bold.woff2") format("woff2"), url("/fonts/Barlow-Bold.ttf") format("truetype"); } :root { /* ── Brand colours ─────────────────────────────────────────────────────── */ --p1b-green: #2dad14; /* primary brand — section bars, accents */ --p1b-green-dk: #1f7a0e; /* darker shade for hover, secondary accents */ --pale-green: #f4f8f3; /* label cells, data-table header rows */ --border-grey: #e5e5e5; /* table and cell borders */ --text-black: #000000; /* body copy, headings, table content */ --text-dark: #333333; /* small-caps labels (e.g. PREPARED FOR) */ --text-grey: #666666; /* subtitles, photo captions, page numbers */ /* ── Fonts ─────────────────────────────────────────────────────────────── */ --font-heading: "Barlow Condensed", Arial, sans-serif; --font-body: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif; --font-body-alt: "Barlow", Arial, sans-serif; /* if dropping the Arial dependency */ /* ── Type scale (print/PDF anchored) ───────────────────────────────────── */ --fs-section: 12pt; --fs-subhead: 11pt; --fs-body: 10pt; --fs-table: 9.5pt; --fs-caption: 8.5pt; --fs-pagenum: 9pt; /* ── Radii ─────────────────────────────────────────────────────────────── */ --r-section: 8px; --r-labelvalue: 6px; --r-table: 8px; --r-photo: 6px; /* ── Spacing ───────────────────────────────────────────────────────────── */ --pad-v: 7px; --pad-h: 10px; --row-gap: 2px; --label-width: 35%; /* ── Page geometry (print/PDF) ─────────────────────────────────────────── */ --side-margin: 12.7mm; --body-frame: 18.46cm; --cont-top: 28mm; /* wordmark clearance on continuation pages */ --cont-bottom: 14mm; /* page number clearance */ } /* ── Component classes — drop-in P1B report components. The existing app already inlines most of these styles per element, but exposing class names here lets new components attach to the canonical look. ────────── */ .p1b-section-heading { background-color: var(--p1b-green); color: #fff; font-family: var(--font-heading); font-size: var(--fs-section); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: var(--pad-v) var(--pad-h); border-radius: var(--r-section); margin: 6mm 0 3mm 0; break-after: avoid; page-break-after: avoid; } .p1b-rounded-table { border-collapse: separate; border-spacing: 0 var(--row-gap); width: 100%; table-layout: fixed; } .p1b-rounded-table td.label { background-color: var(--pale-green); padding: var(--pad-v) var(--pad-h); border-radius: var(--r-labelvalue) 0 0 var(--r-labelvalue); border: 1px solid var(--border-grey); border-right: none; font-weight: 700; font-size: var(--fs-body); width: var(--label-width); } .p1b-rounded-table td.value { background-color: #fff; padding: var(--pad-v) var(--pad-h); border-radius: 0 var(--r-labelvalue) var(--r-labelvalue) 0; border: 1px solid var(--border-grey); border-left: none; font-size: var(--fs-body); } .p1b-data-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border-grey); border-radius: var(--r-table); overflow: hidden; font-size: var(--fs-table); margin: 0 0 3mm 0; } .p1b-data-table th { background-color: var(--pale-green); text-align: left; padding: var(--pad-v) var(--pad-h); font-weight: 700; font-size: var(--fs-body); border-bottom: 1px solid var(--border-grey); } .p1b-data-table td { padding: var(--pad-v) var(--pad-h); border-top: 1px solid var(--border-grey); vertical-align: top; } .p1b-data-table tr:first-child td { border-top: none; } .p1b-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin: 2mm 0 4mm 0; break-inside: avoid; } .p1b-photo-cell img { width: 100%; height: 65mm; object-fit: cover; border-radius: var(--r-photo); display: block; } .p1b-photo-cell .caption { font-size: var(--fs-caption); color: var(--text-grey); font-style: italic; margin-top: 1.5mm; line-height: 1.3; } /* Section headings in the existing rendered report inherit Barlow Condensed automatically once this file is linked because the rpt-section / h2.rpt selectors fall back to var(--font-heading) via the existing stylesheet. */ .rpt-body h2, .rpt-body .rpt-section-bar, .rpt-body h3 { font-family: var(--font-heading); }