/* ========================================================================== PULSE-ART — Methodology print styles Used by js/methodology-print-dynamic.js (full methodology, A4 portrait) and js/methodology-map-print.js (methodology map, A4 landscape). Load it in methodology.html, in , after the site stylesheets: Only the A4-landscape @page rule of the map print stays in JavaScript, because it must be switched on only while the map is being printed. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Full methodology print (#dynamicPrintRoot) -------------------------------------------------------------------------- */ @media screen { #dynamicPrintRoot { display: none!important; } } @media print { @page { size: A4; margin: 20mm 14mm 22mm 14mm; @top-left { content: ""; } @top-center { content: ""; } @top-right { content: ""; } @bottom-left { content: "\00A9 2024-2027 PULSE-ART project | CC BY 4.0"; font-family: Inter,"Noto Sans",Arial,sans-serif; font-size: 7.5pt; color: #68758c; } @bottom-center { content: ""; } @bottom-right { content: counter(page) " / " counter(pages); font-family: Inter,"Noto Sans",Arial,sans-serif; font-size: 7.5pt; color: #68758c; } } html, body { background: #fff!important; color: #111!important; font-family: Inter,"Noto Sans",Arial,sans-serif!important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body>*:not(#dynamicPrintRoot) { display: none!important; } #dynamicPrintRoot { display: block!important; position: static!important; width: auto!important; height: auto!important; overflow: visible!important; background: #fff!important; color: #111!important; } #dynamicPrintRoot * { box-sizing: border-box!important; } .print-document { display: block!important; color: #111!important; } .mp-print-header { display: flex!important; align-items: center!important; justify-content: space-between!important; gap: 8mm!important; padding-bottom: 5mm!important; margin-bottom: 9mm!important; border-bottom: 1px solid #d9d9d9!important; } .mp-print-brand { display: flex!important; align-items: center!important; gap: 5mm!important; } .mp-print-brand img { width: 24mm!important; height: auto!important; display: block!important; } .mp-print-brand strong { display: block!important; font-size: 13pt!important; line-height: 1!important; letter-spacing: .03em!important; color: #171940!important; } .mp-print-brand span { display: block!important; margin-top: 1mm!important; font-size: 8.7pt!important; line-height: 1.18!important; color: #333647!important; } .mp-print-header-label { border: 1px solid #ddd!important; border-radius: 999px!important; padding: 2.2mm 4mm!important; font-size: 8pt!important; color: #555!important; } .print-cover { display: block!important; break-after: page; page-break-after: always; } .mp-print-eyebrow { font-size: 7.6pt!important; text-transform: uppercase!important; letter-spacing: .08em!important; font-weight: 800!important; color: #6f6f78!important; margin: 0 0 2.5mm!important; } .print-cover h1 { font-size: 26pt!important; line-height: 1.08!important; margin: 0 0 4mm!important; color: #7a0f52!important; letter-spacing: -.02em!important; } .mp-print-subtitle { font-size: 11pt!important; color: #333!important; margin: 0 0 6mm!important; } .mp-print-intro { border-left: 3px solid #f28c28!important; background: #fff8f1!important; padding: 6mm 7mm!important; margin: 6mm 0!important; } .mp-print-intro p { font-size: 9.8pt!important; line-height: 1.45!important; color: #222!important; margin: 0 0 3mm!important; } .mp-print-intro p:last-child { margin-bottom: 0!important; } .mp-print-intro .mp-print-lead { font-size: 11.5pt!important; line-height: 1.4!important; color: #171940!important; } .mp-print-resources h2 { font-size: 14pt!important; color: #7a0f52!important; margin: 0 0 3mm!important; } .mp-print-resources p, .mp-print-resources li { font-size: 9.8pt!important; line-height: 1.45!important; color: #222!important; } .mp-print-resources ul { padding-left: 6mm!important; margin: 0!important; } .mp-print-resources li { margin-bottom: 2mm!important; } .print-section { margin-bottom: 10mm!important; background: #fff!important; color: #111!important; } .print-section h2 { font-size: 18pt; margin: 0 0 4mm!important; color: #7a0f52!important; } .print-section h3 { font-size: 11pt; margin: 0 0 5mm!important; color: #555!important; } .print-section p, .print-section li { font-size: 10pt; line-height: 1.45; color: #111!important; orphans: 3; widows: 3; } .print-section ul { padding-left: 6mm; } .print-diagram { break-after: page; page-break-after: always; text-align: center; } .print-diagram img { width: 100%; max-height: 225mm; object-fit: contain; } .print-stage { border-top: 2px solid #9c1c6b; padding-top: 6mm; } .print-stage>h2, .print-stage>h3 { break-after: avoid; page-break-after: avoid; } .print-item { margin: 4mm 0; padding-left: 5mm; border-left: 1px solid #ddd; break-inside: avoid; page-break-inside: avoid; } .print-item h4 { font-size: 10.5pt; margin: 0 0 1.5mm!important; color: #111!important; } .print-detail-group h5, .print-note h5 { font-size: 9pt; margin: 2mm 0 1mm!important; text-transform: uppercase; letter-spacing: .04em; color: #111!important; } .print-note { border-left: 2px solid #9c1c6b; padding-left: 3mm; margin-top: 2mm; } .mp-print-funding { display: block!important; border-top: 1px solid #d9deea!important; margin-top: 12mm!important; padding-top: 5mm!important; break-inside: avoid!important; page-break-inside: avoid!important; } .mp-print-funding-row { display: grid!important; grid-template-columns: 34mm 1fr!important; gap: 5mm!important; align-items: start!important; margin-bottom: 4mm!important; } .mp-print-eu-logo { width: 32mm!important; height: auto!important; display: block!important; } .mp-print-funding-copy strong { display: block!important; font-size: 9.5pt!important; font-weight: 800!important; color: #11182e!important; margin-bottom: 1.5mm!important; } .mp-print-funding .mp-print-funding-sentence { font-size: 8pt!important; line-height: 1.35!important; color: #3f4a60!important; margin: 0 0 1.5mm!important; } .mp-print-funding .mp-print-funding-disclaimer { font-size: 7pt!important; line-height: 1.3!important; color: #68758c!important; margin: 0!important; font-style: italic!important; } .mp-print-license-row { display: grid!important; grid-template-columns: auto 1fr!important; gap: 4mm!important; align-items: center!important; } .mp-print-cc-logo { width: 22mm!important; height: auto!important; display: block!important; } .mp-print-cc-badge { display: none; place-items: center!important; border: 1.5px solid #11182e!important; border-radius: 2mm!important; padding: 1.5mm 3mm!important; font-size: 9pt!important; font-weight: 900!important; color: #11182e!important; white-space: nowrap!important; } .mp-print-funding .mp-print-license-row p { font-size: 7.6pt!important; line-height: 1.35!important; color: #3f4a60!important; margin: 0!important; font-style: italic!important; } .mp-print-license-url { color: #2a4db1!important; font-style: normal!important; } .mp-print-license-thirdparty { color: #68758c!important; } } /* -------------------------------------------------------------------------- 2. Methodology map print (#mapPrintRoot) Active only while body has the class "mm-printing". -------------------------------------------------------------------------- */ #mapPrintRoot { display: none; } @media print { body.mm-printing>*, body.mm-printing>#dynamicPrintRoot { display: none!important; } body.mm-printing>#mapPrintRoot { display: block!important; } #mapPrintRoot, #mapPrintRoot * { box-sizing: border-box; } #mapPrintRoot { font-family: Inter,"Noto Sans",Arial,sans-serif; color: #111; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .mm-sheet { height: 188mm; display: flex; flex-direction: column; overflow: hidden; break-inside: avoid; page-break-inside: avoid; } .mm-header { display: flex; align-items: center; justify-content: space-between; gap: 8mm; padding-bottom: 4mm; margin-bottom: 4mm; border-bottom: 1px solid #d9d9d9; } .mm-brand { display: flex; align-items: center; gap: 4mm; } .mm-brand img { width: 20mm; height: auto; display: block; } .mm-brand strong { display: block; font-size: 13pt; line-height: 1; letter-spacing: .03em; color: #171940; } .mm-brand span { display: block; margin-top: 1mm; font-size: 8.5pt; line-height: 1.18; color: #333647; } .mm-label { border: 1px solid #ddd; border-radius: 999px; padding: 2mm 4mm; font-size: 8pt; color: #555; white-space: nowrap; } .mm-title { margin: 0 0 1.5mm; font-size: 15pt; line-height: 1.15; text-align: center; text-transform: uppercase; letter-spacing: .04em; color: #111; } .mm-subtitle { margin: 0 0 3mm; font-size: 8.5pt; text-align: center; color: #555; } .mm-map { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; } .mm-map img { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; display: block; } .mm-funding { display: grid; grid-template-columns: 30mm 1fr auto; gap: 5mm; align-items: center; border-top: 1px solid #d9deea; margin-top: 3mm; padding-top: 3mm; } .mm-eu { width: 30mm; height: auto; display: block; } .mm-funding-copy strong { display: block; font-size: 8.5pt; font-weight: 800; color: #11182e; margin-bottom: .8mm; } .mm-funding-copy p { margin: 0; font-size: 7pt; line-height: 1.3; color: #3f4a60; } .mm-funding-copy .mm-disclaimer { margin-top: .8mm; font-size: 6.4pt; color: #68758c; font-style: italic; } .mm-license { display: flex; align-items: center; gap: 3mm; max-width: 78mm; } .mm-cc { width: 18mm; height: auto; display: block; flex: none; } .mm-cc-badge { display: none; border: 1.5px solid #11182e; border-radius: 2mm; padding: 1.2mm 2.5mm; font-size: 8pt; font-weight: 900; color: #11182e; white-space: nowrap; flex: none; } .mm-license p { margin: 0; font-size: 6.6pt; line-height: 1.3; color: #3f4a60; font-style: italic; } .mm-url { color: #2a4db1; font-style: normal; } }