/* ===================================================================== template-shared.css Shared layout fixes for ALL biodata templates (preview + PDF). Load AFTER the per-template CSS (templates/*.css) so these win. 1. Per-template safe area (page padding) so text never runs into the artwork (bottom ornaments, corner flourishes, lanterns, paisleys). 2. Per-template --continuation-offset so page 2+ starts below the top artwork (arches / domes / bands) that repeats on every page. 3. Photo no longer overlaps the first section's text. 4. Multi-line values: label aligns to the top of its value. Keyed on data-template="templateN" (set by applyTemplate), so templates that share one CSS file (10/20 → traditional.css, 11/19 → christian.css) each get their own layout. ===================================================================== */ /* ---------- 3. Photo: text flows beside the photo, then full width ---------- The photo is absolutely positioned, so nothing reserved space for it and long values ran underneath it. A float spacer in the first section's grid pushes only the rows that sit beside the photo; rows below use full width (each row is display:flex = its own BFC, so it shrinks next to the float). */ #biodata-builder .bio-page.has-photo:not([data-photo-position="none"]) .bio-section.is-primary .bio-grid { display: block !important; } #biodata-builder .bio-page.has-photo:not([data-photo-position="none"]) .bio-section.is-primary .bio-grid > .bio-item { margin-bottom: 3px; } #biodata-builder .bio-page.has-photo:not([data-photo-position="none"]) .bio-section.is-primary .bio-grid::before { content: ""; float: right; width: var(--photo-reserve-w, 160px); height: var(--photo-reserve-h, 205px); } #biodata-builder .bio-page.has-photo[data-photo-position="left"] .bio-section.is-primary .bio-grid::before { float: left; } #biodata-builder .bio-page.has-photo:not([data-photo-position="none"]):has(.bio-photo-secondary:not(.hidden)) .bio-section.is-primary .bio-grid::before { height: var(--photo-reserve-h2, 425px); } #biodata-builder .bio-page.has-photo:not([data-photo-position="none"]) .bio-section.is-primary .bio-grid::after { content: ""; display: block; clear: both; } #biodata-builder .bio-page.has-photo[data-photo-position="left"] .bio-section.is-primary h3 { margin-left: var(--photo-reserve-w, 160px) !important; /* heading clears a left photo */ } /* continuation pages never show the photo */ #biodata-builder .bio-document .continuation-page .bio-section.is-primary h3 { margin-left: 0 !important; } #biodata-builder .bio-document .continuation-page .bio-section.is-primary .bio-grid::before { display: none !important; } /* ---------- 4. Long values: keep label at the top, wrap long words ---------- */ #biodata-builder .bio-item { align-items: flex-start !important; } #biodata-builder .bio-label { flex: 0 0 150px; max-width: 150px; } #biodata-builder .bio-value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } /* ---------- 1 + 2. Per-template safe areas ---------- */ /* padding: top right bottom left */ /* --continuation-offset is added ON TOP of the top padding on page 2+ (which has no header), so it is 0 unless the page-1 header sits over top artwork that full-width rows must clear. */ #biodata-builder .bio-page[data-template="template1"] { padding: 44px 80px 50px !important; --continuation-offset: 145px; } /* arch shoulders reach ~210px at the text edges */ #biodata-builder .bio-page[data-template="template2"] { padding: 200px 130px 60px !important; --continuation-offset: 65px; } /* arch shoulders reach ~285px at the text edge */ #biodata-builder .bio-page[data-template="template3"] { padding: 205px 120px 45px !important; --continuation-offset: 30px; } /* gold frame crosses the text edges ~225px */ #biodata-builder .bio-page[data-template="template4"] { padding: 150px 115px 215px !important; --continuation-offset: 0px; } #biodata-builder .bio-page[data-template="template5"] { padding: 105px 170px 80px 150px !important; --continuation-offset: 90px; } /* arch shoulders */ #biodata-builder .bio-page[data-template="template6"] { padding: 100px 100px 150px !important; --continuation-offset: 0px; } #biodata-builder .bio-page[data-template="template7"] { padding: 160px 80px 170px !important; --continuation-offset: 0px; } #biodata-builder .bio-page[data-template="template8"] { padding: 100px 95px 150px !important; --continuation-offset: 110px; } /* top mandala band */ #biodata-builder .bio-page[data-template="template9"] { padding: 44px 80px 135px !important; --continuation-offset: 40px; } #biodata-builder .bio-page[data-template="template10"] { padding: 250px 110px 110px !important; --continuation-offset: 0px; } #biodata-builder .bio-page[data-template="template11"] { padding: 44px 95px 250px !important; --continuation-offset: 200px; } /* rows must sit inside the round arch */ #biodata-builder .bio-page[data-template="template12"] { padding: 44px 110px 130px !important; --continuation-offset: 60px; } #biodata-builder .bio-page[data-template="template13"] { padding: 168px 90px 150px !important; --continuation-offset: 0px; } /* clear the "Biodata" banner (ends ~150px) */ #biodata-builder .bio-page[data-template="template14"] { padding: 185px 80px 100px !important; --continuation-offset: 0px; } #biodata-builder .bio-page[data-template="template15"] { padding: 130px 80px 45px !important; --continuation-offset: 110px; } /* teal panel shoulders */ #biodata-builder .bio-page[data-template="template16"] { padding: 44px 90px 100px !important; --continuation-offset: 50px; } #biodata-builder .bio-page[data-template="template17"] { padding: 44px 90px 100px !important; --continuation-offset: 50px; } #biodata-builder .bio-page[data-template="template18"] { padding: 262px 398px 45px 80px !important; --continuation-offset: 0px; } /* inside the white panel (x 8–52%, from y 22%) */ #biodata-builder .bio-page[data-template="template19"] { padding: 70px 312px 60px 70px !important; --continuation-offset: 0px; } /* inside the white panel (x 6–64%) */ #biodata-builder .bio-page[data-template="template20"] { padding: 250px 140px 60px !important; --continuation-offset: 0px; } #biodata-builder .bio-page[data-template="template21"] { padding: 105px 100px 115px !important; --continuation-offset: 0px; } #biodata-builder .bio-page[data-template="template22"] { padding: 200px 80px 115px !important; --continuation-offset: 90px; } /* brown scalloped header */ /* ---------- 5. Contrast fixes ---------- */ /* template17: white text was unreadable on the light-cyan right half */ #biodata-builder .bio-page[data-template="template17"] { --primary: #0b2a5b; --text: #0b2a5b; --text-light: #1d3f73; } #biodata-builder .bio-page[data-template="template17"] .bio-title, #biodata-builder .bio-page[data-template="template17"] .bio-symbol, #biodata-builder .bio-page[data-template="template17"] .bio-subtitle, #biodata-builder .bio-page[data-template="template17"] .bio-god-name, #biodata-builder .bio-page[data-template="template17"] .bio-section h3, #biodata-builder .bio-page[data-template="template17"] .bio-label, #biodata-builder .bio-page[data-template="template17"] .bio-value { color: #0b2a5b !important; } /* template18: the artwork's white mosque panel is the content area (page padding keeps header + sections inside it); the photo sits on the teal side, so no text reserve is needed */ #biodata-builder .bio-page[data-template="template18"] .bio-top { z-index: 5 !important; padding: 0 0 8px !important; min-height: 0 !important; border-bottom-color: rgba(0, 77, 82, .35) !important; } #biodata-builder .bio-page[data-template="template18"] .bio-section { border-bottom-color: rgba(0, 77, 82, .2) !important; } #biodata-builder .bio-document .bio-page[data-template="template18"] .bio-sections .bio-section { padding: 14px 2px 8px !important; } #biodata-builder .bio-page[data-template="template18"] .bio-grid { padding: 0 !important; } #biodata-builder .bio-page[data-template="template18"] .bio-label { flex: 0 0 112px; max-width: 112px; min-width: 0; } #biodata-builder .bio-page[data-template="template18"] .bio-section .bio-grid::before { display: none !important; } #biodata-builder .bio-page[data-template="template18"] .bio-section h3 { margin-left: 0 !important; } /* photo: centred in the teal area right of the panel (left/right both go there — the panel has no room) */ #biodata-builder .bio-page[data-template="template18"] .bio-photo-container, #biodata-builder .bio-page[data-template="template18"][data-photo-position] .bio-photo-container { top: 0; left: calc(100% + 134px) !important; right: auto !important; margin-top: 0; overflow: visible; } #biodata-builder .bio-page[data-template="template18"] .bio-photo { border: 3px solid #fff !important; border-radius: 8px !important; box-shadow: 0 0 0 1px rgba(0, 77, 82, .35), 0 4px 12px rgba(0, 60, 70, .25) !important; } /* template19: same layout as template18 — content in the white panel on the left, photos centred on the grey strip to its right */ #biodata-builder .bio-page[data-template="template11"], #biodata-builder .bio-page[data-template="template19"] { --secondary: #5c6fae; } /* blessing was white (christian.css has no --secondary) */ #biodata-builder .bio-page[data-template="template19"] .bio-top { z-index: 5 !important; padding: 0 0 12px !important; min-height: 0 !important; margin-top: 10px; } #biodata-builder .bio-document .bio-page[data-template="template19"] .bio-sections .bio-section { padding: 14px 2px 8px !important; } #biodata-builder .bio-page[data-template="template19"] .bio-grid { padding: 0 !important; } #biodata-builder .bio-page[data-template="template19"] .bio-label { flex: 0 0 130px; max-width: 130px; min-width: 0; } #biodata-builder .bio-page[data-template="template19"] .bio-section .bio-grid::before { display: none !important; } #biodata-builder .bio-page[data-template="template19"] .bio-section h3 { margin-left: 0 !important; } #biodata-builder .bio-page[data-template="template19"] .bio-photo-container, #biodata-builder .bio-page[data-template="template19"][data-photo-position] .bio-photo-container { top: 0; left: calc(100% + 66px) !important; right: auto !important; margin-top: 0; overflow: visible; } #biodata-builder .bio-page[data-template="template19"] .bio-photo { border: 3px solid #fff !important; border-radius: 8px !important; box-shadow: 0 0 0 1px rgba(26, 43, 124, .35), 0 4px 12px rgba(26, 43, 124, .2) !important; } /* ---------- 6. Section spacing (all templates) ---------- */ #biodata-builder .bio-document .bio-page[data-template] .bio-section { padding: 25px 12px 10px !important; } /* continuation pages read the offset from the page itself (not :root) */ #biodata-builder .bio-document .continuation-page .bio-sections { margin-top: var(--continuation-offset, 40px) !important; }