/* Professional PDF output for the Brand Style Guide. Loaded with media="print"; the Download PDF button adds .is-printing to and calls window.print() - "Save as PDF" in the dialog produces the file. */ @media print { @page { size: A4; margin: 20mm; /* Page number in engines that support @page margin boxes (Firefox, paged-media renderers). Chrome falls back to the fixed footer below. */ @bottom-right { content: counter(page); font-family: Inter, sans-serif; font-size: 9px; color: #888888; } } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { background: #ffffff; font-family: Inter, -apple-system, sans-serif; font-size: 11px; color: #111111; } /* Hide everything interactive / non-document */ .site-nav, .tools-drawer, .site-footer, .tool-header, .audit-gate-card, .tool-form, .related-tools, .profile-bar, .account-notice, .modal-overlay, .guide-actions, .guide-shared-banner, #guideLoading, .toast-container, button { display: none !important; } /* Repeating page header: brand name (left). Chrome repeats position: fixed elements on every printed page. */ .print-header { display: block !important; position: fixed; top: 0; left: 0; right: 0; padding-bottom: 4px; border-bottom: 1px solid #dddddd; background: #ffffff; } .print-header h1 { font-family: "Source Serif 4", Georgia, serif; font-size: 24px; font-style: italic; margin: 0 0 2px; } .print-header p { margin: 0; color: #555555; font-size: 9px; } /* Repeating page footer: CropUp Ai branding */ .print-footer { display: block !important; position: fixed; bottom: 0; left: 0; right: 0; padding-top: 4px; border-top: 1px solid #dddddd; background: #ffffff; font-size: 9px; color: #888888; display: flex !important; justify-content: space-between; } /* Reserve room for the fixed header/footer on every page */ #guideResults, #shareContent { margin-top: 52px; margin-bottom: 32px; } /* On-screen document header duplicates the print header - hide the actions but keep the identity block compact */ .guide-doc-header { display: none !important; } .guide-doc-footer { display: none !important; } /* Section typography */ .guide-section { border: none !important; background: #ffffff !important; padding: 0 !important; margin-bottom: 18px; /* Each major section starts on a fresh page */ page-break-before: always; break-before: page; } /* ...except the first, which follows the cover header directly */ .guide-section:first-of-type, .guide-section[hidden] + .guide-section { page-break-before: auto; } .guide-section > h3 { font-family: "Source Serif 4", Georgia, serif; font-size: 18px; font-style: normal; text-transform: none; letter-spacing: 0; color: #111111; border-bottom: 2px solid #111111; padding-bottom: 6px; margin-bottom: 14px; } .guide-section h4 { font-family: "Source Serif 4", Georgia, serif; font-size: 13px; } .guide-essence { font-size: 12px; } .guide-quote { font-size: 15px; border-left-color: #111111; } .guide-promise, .guide-primary-rule { border-left-color: #111111; } /* Color rectangles must print with their real colors */ .guide-swatch__color { -webkit-print-color-adjust: exact; print-color-adjust: exact; height: 64px; } .guide-swatch, .guide-material-card, .guide-variation-card, .guide-platform-card, .guide-avoid-swatch, .guide-dodont__item, .guide-template__code { border-color: #dddddd !important; background: #ffffff !important; break-inside: avoid; } .guide-dodont__item { background: #fafafa !important; } .guide-template__code { font-size: 10px; background: #f5f5f3 !important; } a { text-decoration: none; color: inherit; } }