myResume2/public/css/print.css
Blade34242 45a3cddf06
All checks were successful
Node CI / lint (push) Successful in 1m29s
Refresh resume design, Node lifecycle, PDF export and SEO
2026-11-07 07:38:03 +07:00

106 lines
6.7 KiB
CSS

@page { size: A4; margin: 12mm 12mm 14mm; }
/* Shared by native printing, preview and the isolated PDF export document. */
body.resume-body {
--bg: #fff; --bg-2: #fff; --card: #fff; --border: #d8e1e8;
--text: #182b3d; --muted: #43576b; --accent: #155d7f; --accent-2: #155d7f;
background: #fff !important; color: #182b3d; font-family: 'Inter', Arial, sans-serif;
font-size: 10pt; line-height: 1.5; margin: 0; min-height: 0;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
body.resume-body::before,
body.resume-body .bg-gradient,
body.resume-body .topbar,
body.resume-body .skip-link,
body.resume-body .contact-strip,
body.resume-body .cta-row,
body.resume-body .social-row,
body.resume-body .page-footer,
body.resume-body .project-thumb,
body.resume-body .project-links,
body.resume-body .testimonial-dots { display: none !important; }
body.resume-body * { box-shadow: none !important; backdrop-filter: none !important; text-shadow: none !important; transition: none !important; }
body.resume-body .page-shell { max-width: none; padding: 0; margin: 0; }
body.resume-body .hero { padding: 0; }
body.resume-body .hero-card {
display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 20px; align-items: center;
padding: 0 0 18px; background: #fff; border: 0; border-bottom: 3px solid #155d7f; border-radius: 0;
break-inside: avoid; page-break-inside: avoid;
}
body.resume-body .hero-photo { width: 78px; height: 90px; margin: 0; border-radius: 8px; border: 1px solid #d8e1e8; }
body.resume-body .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
body.resume-body .hero-copy { min-width: 0; }
body.resume-body .hero-copy h1 { font-size: 25pt; line-height: 1.12; margin: 0; letter-spacing: -.045em; color: #182b3d; overflow-wrap: anywhere; }
body.resume-body .hero-copy .eyebrow { display: none; }
body.resume-body .role { font-size: 11pt; color: #155d7f; font-weight: 600; margin: 5px 0; }
body.resume-body .pdf-contact { display: block; color: #43576b; font-size: 9pt; margin: 4px 0 8px; overflow-wrap: anywhere; }
body.resume-body .about-text { font-size: 9pt; line-height: 1.55; max-width: none; color: #43576b; margin: 0; }
body.resume-body a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
body.resume-body .section { margin-top: 22px; break-inside: auto; }
body.resume-body .section-head { border-bottom: 1px solid #d8e1e8; padding-bottom: 5px; margin-bottom: 10px; break-after: avoid; page-break-after: avoid; }
body.resume-body .section-head h2 { font-size: 14pt; line-height: 1.2; color: #155d7f; letter-spacing: -.02em; margin: 0; }
body.resume-body .section-head .eyebrow,
body.resume-body .section-sub { display: none; }
body.resume-body .timeline { display: block; padding: 0; }
body.resume-body .timeline-item { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 16px; border: 0; border-bottom: 1px solid #e5ebf0; background: #fff; padding: 10px 0; border-radius: 0; break-inside: avoid; page-break-inside: avoid; }
body.resume-body .timeline-body h3 { font-size: 11pt; color: #182b3d; margin: 2px 0 5px; line-height: 1.35; }
body.resume-body .timeline-body .meta { color: #43576b; font-size: 8pt; margin: 0; }
body.resume-body .pill,
body.resume-body .chip,
body.resume-body .chip-ghost,
body.resume-body .chip-accent { color: #244d65; background: #f0f5f8; border: 1px solid #d8e1e8; padding: 2px 6px; border-radius: 4px; font-size: 8pt; line-height: 1.4; }
body.resume-body .chips,
body.resume-body .subchips { gap: 4px; }
body.resume-body .bullets { color: #43576b; font-size: 9pt; padding-left: 16px; margin: 7px 0 0; }
body.resume-body .bullets li + li { margin-top: 3px; }
body.resume-body .metrics { margin-top: 8px; }
body.resume-body .card-grid,
body.resume-body .projects-grid,
body.resume-body .interest-chips { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
body.resume-body .card,
body.resume-body .project-card,
body.resume-body .interest-block,
body.resume-body .testimonial-card { min-width: 0; border: 1px solid #d8e1e8; border-radius: 6px; background: #fff; color: #182b3d; padding: 12px; break-inside: avoid; page-break-inside: avoid; }
body.resume-body .project-card { display: block; }
body.resume-body .card h3,
body.resume-body .project-card h3,
body.resume-body .testimonial-card h3 { font-size: 11pt; color: #182b3d; margin: 4px 0; line-height: 1.4; }
body.resume-body .muted,
body.resume-body .quote { font-size: 9pt; color: #43576b; margin: 4px 0; }
body.resume-body .card-header { background: transparent; border: 0; padding: 0 0 6px; }
body.resume-body .skill-card { min-height: 0; }
body.resume-body .skill-list { gap: 4px; margin-top: 0; }
body.resume-body .skill-row { background: #f6f8fa; border: 0; border-radius: 3px; padding: 5px 7px; gap: 4px; }
body.resume-body .skill-label { color: #182b3d; font-weight: 500; font-size: 8pt; }
body.resume-body .skill-level { height: 3px; background: #d8e1e8; border: 0; }
body.resume-body .skill-level-fill { background: #155d7f; }
body.resume-body .testimonial-slider { overflow: visible; padding: 0; }
body.resume-body .testimonial-track { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; transform: none !important; padding: 0; }
body.resume-body .testimonial-avatar { width: 32px; height: 32px; margin-bottom: 5px; }
body.resume-body .rating { color: #856000; font-size: 8pt; }
body.resume-body .interest-block > .pill { display: inline-block; margin-bottom: 6px; font-weight: 600; }
body.resume-body .pdf-core-stack { display: none; }
body.pdf-export { width: 718px; margin: 0 auto; }
body.pdf-export #resume-document { width: 718px; }
/* Keep supporting grids together when they fit on a page. */
body.resume-body #skills .card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
body.resume-body .card-grid,
body.resume-body .projects-grid,
body.resume-body .interest-chips,
body.resume-body .testimonial-track { break-inside: avoid; page-break-inside: avoid; }
/* Compact supporting sections without reducing the main résumé text. */
body.resume-body .section { margin-top: 16px; }
body.resume-body .section-head { margin-bottom: 8px; }
body.resume-body .card,
body.resume-body .project-card,
body.resume-body .interest-block,
body.resume-body .testimonial-card { padding: 9px; }
body.resume-body .skill-list { gap: 3px; }
body.resume-body .skill-row { padding: 3px 6px; gap: 3px; line-height: 1.3; }
body.resume-body .testimonial-avatar { width: 24px; height: 24px; }
body.resume-body .testimonial-card .quote { line-height: 1.45; }
/* Keep headings with their first content block in both print engines. */
body.resume-body #skills,
body.resume-body #projects,
body.resume-body #education,
body.resume-body #testimonials,
body.resume-body #interests { break-inside: avoid; page-break-inside: avoid; }