diff --git a/assets/css/custom.css b/assets/css/custom.css index 9eaa204..dfb57b7 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1596,6 +1596,21 @@ textarea.form-control { margin-bottom: 0.35rem; } +.completion-signature-block strong, +.completion-signature-block span { + white-space: nowrap; +} + +.completion-signature-block strong { + display: inline-block; + margin-bottom: 0; + flex: 0 0 auto; +} + +.completion-signature-block span { + flex: 0 1 auto; +} + .completion-note { padding: 1rem 1.1rem; margin-top: 1rem; @@ -1605,7 +1620,7 @@ textarea.form-control { .completion-signature-row { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: minmax(0, 1.2fr) minmax(200px, 0.8fr); gap: 1rem; margin-top: 1.5rem; } @@ -1613,6 +1628,11 @@ textarea.form-control { .completion-signature-block { padding: 1rem 1.1rem; text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 0.45rem; + flex-wrap: nowrap; } @media (max-width: 991.98px) { @@ -1635,11 +1655,48 @@ textarea.form-control { } @media print { + @page { + size: A4 landscape; + margin: 8mm; + } + + html, + body { + width: 297mm; + min-height: 210mm; + background: #fff !important; + } + + body { + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + + .site-header, + .site-footer, + .certificate-toolbar, + .toast-container { + display: none !important; + } + + .completion-certificate-page { + padding: 0 !important; + margin: 0 !important; + } + + .completion-certificate-page .container-xl { + width: 100% !important; + max-width: none !important; + padding: 0 !important; + margin: 0 !important; + } + .completion-certificate-card, .completion-summary-card, .completion-meta-item, .completion-note, - .completion-signature-block { + .completion-signature-block, + .completion-brand-logo { box-shadow: none !important; backdrop-filter: none !important; } @@ -1647,5 +1704,197 @@ textarea.form-control { .completion-certificate-card { border: 2px solid rgba(180, 146, 42, 0.62); border-radius: 1rem; + height: 190mm; + min-height: 190mm; + max-height: 190mm; + overflow: hidden; + page-break-inside: avoid; + break-inside: avoid-page; + } + + .completion-template-classic::before { + inset: 0.45rem; + border-radius: 0.8rem; + } + + .completion-certificate-inner { + min-height: 100%; + padding: 0.7rem 0.9rem; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 0.5rem; + } + + .completion-certificate-layer-one { + width: 150px; + height: 150px; + top: -62px; + right: -48px; + opacity: 0.75; + } + + .completion-certificate-layer-two { + width: 130px; + height: 130px; + bottom: -62px; + left: -34px; + opacity: 0.75; + } + + .completion-certificate-header { + align-items: center; + gap: 0.55rem; + margin-bottom: 0; + } + + .completion-branding { + gap: 0.6rem; + } + + .completion-brand-logo { + width: 58px; + height: 58px; + border-radius: 0.85rem; + } + + .completion-brand-badge { + font-size: 1.25rem; + } + + .completion-overline { + font-size: 0.62rem; + margin-bottom: 0.1rem; + } + + .completion-certificate-title { + font-size: 1.55rem; + line-height: 1.15; + } + + .completion-certificate-center { + font-size: 0.82rem; + margin-top: 0.1rem; + } + + .completion-certificate-stamps { + gap: 0.3rem; + } + + .completion-stamp { + min-height: 1.7rem; + padding: 0.32rem 0.62rem; + font-size: 0.76rem; + line-height: 1.2; + } + + .completion-certificate-content { + max-width: none; + } + + .completion-intro { + font-size: 0.76rem; + margin-bottom: 0.15rem !important; + } + + .completion-student-name { + font-size: 1.95rem; + line-height: 1.05; + margin-bottom: 0.15rem; + } + + .completion-student-code { + min-height: 1.55rem; + padding: 0.18rem 0.55rem; + font-size: 0.72rem; + margin-bottom: 0.42rem; + } + + .completion-message { + font-size: 0.88rem; + line-height: 1.48; + max-width: none; + margin-bottom: 0.3rem; + } + + .completion-honor-line { + font-size: 0.82rem; + line-height: 1.35; + } + + .completion-certificate-grid { + grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.3fr); + gap: 0.55rem; + margin-top: 0.6rem; + align-items: stretch; + } + + .completion-summary-card, + .completion-meta-item, + .completion-note, + .completion-signature-block { + border-radius: 0.75rem; + padding: 0.5rem 0.62rem; + background: rgba(255, 255, 255, 0.98) !important; + } + + .completion-summary-card { + gap: 0.2rem; + } + + .completion-summary-label { + font-size: 0.72rem; + } + + .completion-performance-pill { + padding: 0.32rem 0.6rem; + font-size: 0.76rem; + } + + .completion-honor-title { + font-size: 0.98rem; + line-height: 1.2; + } + + .completion-honor-subtitle { + display: none; + } + + .completion-meta-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 0.45rem; + } + + .completion-meta-item span, + .completion-signature-block span, + .completion-note { + font-size: 0.76rem; + line-height: 1.28; + } + + .completion-meta-item strong, + .completion-signature-block strong { + margin-bottom: 0.08rem; + font-size: 0.69rem; + line-height: 1.2; + } + + .completion-note { + margin-top: 0.45rem; + padding-top: 0.45rem; + padding-bottom: 0.45rem; + } + + .completion-signature-row { + grid-template-columns: minmax(0, 1.25fr) minmax(150px, 0.75fr); + gap: 0.55rem; + margin-top: 0.55rem; + } + + .completion-signature-block { + gap: 0.3rem; + padding-left: 0.5rem; + padding-right: 0.5rem; } } +