/* ── KS Mag Quiz — Print / Teacher PDF Stylesheet v1.5 ────────────────── NOTE: Print isolation is handled by JavaScript (ksmag_print_answer_key). The JS clones .ksmag-answer-key directly to and injects a @media print style that hides body>* except the clone. This means: - No theme header/footer ever appears (they are body>* and get hidden) - No blank space (display:none removes layout, not just visual) - Browser header/footer (URL, date, page number) are suppressed by @page { margin: 12mm 14mm 14mm 14mm } injected by the JS This file handles only the TYPOGRAPHY AND LAYOUT of the printed content. The @page rule here is a fallback for any direct window.print() calls. ─────────────────────────────────────────────────────────────────────────── */ /* ══ Page setup ════════════════════════════════════════════════════════ */ @page { size: A4 portrait; /* margin:0 removes the browser's built-in header (URL, title, date) and footer (page number). Our own header/footer are inside the content. */ margin: 12mm 14mm 14mm 14mm; } /* ══ Global colour accuracy ════════════════════════════════════════════ */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } /* ══ Answer key container ══════════════════════════════════════════════ */ #ksmag-print-clone, .ksmag-answer-key { display: block !important; visibility: visible !important; background: #fff !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10.5pt !important; line-height: 1.5 !important; color: #000 !important; box-shadow: none !important; } /* ══ Screen-only elements — hide when printing ════════════════════════ */ .ksmag-ak-screen-header, .ksmag-ak-print, .sq-wrap, .sq-btn-share, .sq-btn-share-sc, .sq-btn-print, .sq-sc-actions, .ksmag-series-player, .ksmag-library, .ksmag-quiz-breadcrumb { display: none !important; } /* ══ Print header ══════════════════════════════════════════════════════ */ .ksmag-print-header { display: flex !important; visibility: visible !important; justify-content: space-between !important; align-items: center !important; padding-bottom: 9pt !important; margin-bottom: 14pt !important; border-bottom: 2pt solid #1e1b4b !important; page-break-inside: avoid !important; page-break-after: avoid !important; } .ksmag-print-logo { display: block !important; max-height: 40pt !important; max-width: 150pt !important; object-fit: contain !important; } .ksmag-print-site-name { display: block !important; font-size: 14pt !important; font-weight: bold !important; color: #1e1b4b !important; font-family: Arial, sans-serif !important; } .ksmag-print-header-right { display: block !important; text-align: right !important; } .ksmag-print-teacher-label { display: inline-block !important; font-size: 7.5pt !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: #fff !important; background: #4F46E5 !important; padding: 2pt 8pt !important; border-radius: 20pt !important; margin-bottom: 3pt !important; } .ksmag-print-date { display: block !important; font-size: 8pt !important; color: #6b7280 !important; margin-top: 2pt !important; } /* ══ Quiz title and meta ═══════════════════════════════════════════════ */ .ksmag-ak-quiz-title { font-size: 15pt !important; font-weight: bold !important; font-family: Arial, sans-serif !important; color: #111 !important; margin: 0 0 5pt !important; page-break-after: avoid !important; } .ksmag-ak-meta { display: flex !important; flex-wrap: wrap !important; gap: 5pt !important; margin-bottom: 12pt !important; align-items: center !important; } .ksmag-ak-meta span { display: inline-block !important; font-size: 7.5pt !important; border: 0.75pt solid #ccc !important; border-radius: 20pt !important; padding: 1.5pt 7pt !important; background: #f9f9f9 !important; color: #374151 !important; } /* ══ Question list ═════════════════════════════════════════════════════ */ .ksmag-ak-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } .ksmag-ak-item { display: block !important; margin-bottom: 12pt !important; padding-bottom: 12pt !important; border-bottom: 0.5pt solid #e0e0e0 !important; page-break-inside: avoid !important; } .ksmag-ak-item:last-child { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } .ksmag-ak-q { display: block !important; font-size: 10.5pt !important; font-weight: bold !important; color: #111 !important; margin: 0 0 6pt !important; font-family: Arial, sans-serif !important; line-height: 1.4 !important; page-break-after: avoid !important; } .ksmag-ak-opts { display: block !important; list-style: none !important; padding: 0 !important; margin: 0 0 5pt !important; } .ksmag-ak-opt { display: block !important; font-size: 9.5pt !important; color: #333 !important; padding: 4pt 8pt !important; border: 0.5pt solid #ddd !important; border-radius: 4pt !important; background: #fff !important; font-family: Arial, sans-serif !important; margin-bottom: 3pt !important; page-break-inside: avoid !important; } .ksmag-ak-opt--correct { background: #f0fff4 !important; border: 1.5pt solid #16A34A !important; color: #14532d !important; font-weight: bold !important; } .ksmag-ak-tick { display: inline-block !important; font-size: 7.5pt !important; background: #16A34A !important; color: #fff !important; border-radius: 10pt !important; padding: 1pt 5pt !important; margin-left: 5pt !important; font-weight: bold !important; } .ksmag-ak-exp { display: block !important; font-size: 8.5pt !important; color: #555 !important; font-style: italic !important; background: #fffbeb !important; border-left: 2.5pt solid #fcd34d !important; padding: 4pt 8pt !important; margin-top: 4pt !important; line-height: 1.5 !important; page-break-inside: avoid !important; } /* ══ Print footer ══════════════════════════════════════════════════════ */ .ksmag-print-footer { display: flex !important; visibility: visible !important; justify-content: space-between !important; align-items: center !important; padding-top: 7pt !important; margin-top: 16pt !important; border-top: 0.75pt solid #d1d5db !important; font-size: 7.5pt !important; color: #6b7280 !important; font-family: Arial, sans-serif !important; page-break-inside: avoid !important; } .ksmag-print-footer-left { text-align: left !important; flex-shrink: 0 !important; } .ksmag-print-footer-centre { text-align: center !important; flex: 1 !important; padding: 0 8pt !important; } .ksmag-print-footer-right { text-align: right !important; flex-shrink: 0 !important; } /* ══ Page break rules ══════════════════════════════════════════════════ */ h1, h2, h3, h4 { page-break-after: avoid !important; } .ksmag-ak-item { page-break-inside: avoid !important; } .ksmag-print-header { page-break-after: avoid !important; } /* ══ Hide on screen — these elements exist in the DOM but must be invisible on screen; the JS clone handles making them visible inside the clone at print time ═══════════════════════════════════ */ @media screen { .ksmag-print-header, .ksmag-print-footer { display: none; } }