156 lines
7.1 KiB
CSS
156 lines
7.1 KiB
CSS
/* SVS MSP Calculator - Print */
|
|
/* Extracted during Phase 5 to keep the HTML shell stable while splitting the monolithic stylesheet. */
|
|
/* ═══════════════════════════════════════════════════════
|
|
PRINT / PDF EXPORT (Export A)
|
|
window.print() triggers this via Print / Save PDF button.
|
|
Goals:
|
|
- Clean, branded quote document
|
|
- Hide all interactive controls
|
|
- Force all sections expanded (body shown)
|
|
- No background colours that waste ink (except header)
|
|
- Page-break control so summary never splits
|
|
═══════════════════════════════════════════════════════ */
|
|
@media print {
|
|
/* ── Force light background on body ── */
|
|
body { background: var(--print-paper) !important; color: var(--print-ink) !important; font-size: 13px; }
|
|
|
|
/* ── Hide interactive & mobile-only elements ── */
|
|
.mobile-quote-pill,
|
|
.mobile-quote-panel,
|
|
.step-btn,
|
|
.collapsible-header,
|
|
.sec-chevron,
|
|
.section-toggle,
|
|
.tier-seg-wrap,
|
|
.pill-toggle,
|
|
.addon-row input[type=checkbox],
|
|
.savings-input-row,
|
|
.export-wrap,
|
|
.nudge-banner,
|
|
.pitch-wrap,
|
|
.quote-settings-bar,
|
|
.section-header.section-toggle { pointer-events: none; }
|
|
|
|
.mobile-quote-pill { display: none !important; }
|
|
.mobile-quote-panel { display: none !important; }
|
|
.export-wrap { display: none !important; }
|
|
.nudge-banner { display: none !important; }
|
|
.theme-toggle-btn { display: none !important; }
|
|
.pitch-wrap { display: none !important; }
|
|
.step-btn { display: none !important; }
|
|
.collapsible-header { display: none !important; }
|
|
.sec-chevron { display: none !important; }
|
|
.sec-summary-badge { display: none !important; }
|
|
.sec-controls-row { display: none !important; }
|
|
.quote-settings-bar { display: none !important; }
|
|
.section-badge { display: none !important; }
|
|
#savingsPrompt { display: none !important; }
|
|
.quote-notes-wrap { display: none !important; }
|
|
.client-rep-row { display: none !important; }
|
|
.sidebar-focus-toggle { display: none !important; }
|
|
.sidebar-focus-print-btn { display: none !important; }
|
|
.sidebar-utility { display: none !important; }
|
|
.qs-switch { display: none !important; }
|
|
.confirm-modal { display: none !important; }
|
|
|
|
/* ── Show ALL section bodies (force expand) ── */
|
|
.section-body { display: block !important; }
|
|
.collapsible-body { max-height: none !important; opacity: 1 !important; overflow: visible !important; }
|
|
|
|
/* ── Reset layout to single column ── */
|
|
.outer {
|
|
display: block !important;
|
|
padding: 0 !important;
|
|
max-width: 100% !important;
|
|
}
|
|
.main-col, .side-col { width: 100% !important; position: static !important; }
|
|
|
|
/* ── Top bar: keep accent, reduce height ── */
|
|
.top-bar {
|
|
position: static !important;
|
|
padding: 10px 20px !important;
|
|
border-bottom: 2px solid var(--print-accent) !important;
|
|
background: var(--print-paper) !important;
|
|
}
|
|
.top-bar-inner { padding: 0 !important; }
|
|
.top-bar-right { color: var(--print-muted) !important; }
|
|
|
|
/* ── Section cards: clean borders, no dark bg ── */
|
|
.section {
|
|
background: var(--print-paper) !important;
|
|
border: 1px solid var(--print-border) !important;
|
|
box-shadow: none !important;
|
|
margin-left: 0 !important;
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
padding: 16px 20px !important;
|
|
margin-bottom: 12px !important;
|
|
}
|
|
.section-num { color: var(--print-section-num) !important; }
|
|
.section-title { font-size: 16px !important; }
|
|
|
|
/* ── Sidebar: show inline after sections, styled for print ── */
|
|
.sidebar {
|
|
background: var(--print-paper) !important;
|
|
border: 2px solid var(--print-accent) !important;
|
|
border-radius: 6px !important;
|
|
margin: 16px 0 !important;
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
}
|
|
.sidebar-header { background: var(--print-accent) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
.sidebar-mrr { font-size: 36px !important; color: var(--print-ink) !important; }
|
|
.sidebar-line { color: var(--print-sidebar-line) !important; border-bottom-color: var(--print-border-strong) !important; }
|
|
.sidebar-line .val { color: var(--print-ink) !important; }
|
|
|
|
/* ── VS comparison: clean for print ── */
|
|
.vs-save-green td { background: var(--print-save-green) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
.vs-save-amber td { background: var(--print-save-amber) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
.vs-save-amber { background: var(--print-save-amber-panel) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
|
|
/* ── Feature cards: minimal ── */
|
|
.feature-card { background: var(--print-feature) !important; border-color: var(--print-border-strong) !important; }
|
|
.feature-card-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
|
|
|
|
/* ── Addon rows ── */
|
|
.addon-row { border-color: var(--print-border-strong) !important; }
|
|
.addon-row.selected { background: var(--print-addon-selected) !important; border-color: var(--print-accent) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
|
|
/* ── Callout boxes ── */
|
|
.callout-green { background: var(--print-callout-green) !important; border-color: var(--print-callout-green-border) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
.callout-red { background: var(--print-callout-red) !important; border-color: var(--print-callout-red-border) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
|
|
/* ── Progress bar ── */
|
|
.progress-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
|
|
/* ── Print footer ── */
|
|
.pitch-footer { display: none !important; }
|
|
|
|
/* ── Page break: force summary sidebar to start fresh ── */
|
|
.side-col { page-break-before: always; break-before: always; }
|
|
|
|
/* ── Input fields: show values as static text ── */
|
|
.num-input, .qs-fee-input {
|
|
border: none !important;
|
|
background: transparent !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
.client-input {
|
|
border: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* ── Print footer note ── */
|
|
body::after {
|
|
content: 'Prepared by Silicon Valley Services (SVS) MSP · Ottawa, Ontario · This quote is valid for 30 days from date of issue. Questions? Contact your SVS account representative.';
|
|
display: block;
|
|
font-size: 11px;
|
|
color: var(--print-footer-note);
|
|
border-top: 1px solid var(--print-border-strong);
|
|
padding-top: 10px;
|
|
margin-top: 20px;
|
|
font-family: 'DM Mono', monospace;
|
|
}
|
|
}
|
|
|