/* ========================================================================== print.css — Dra. Jennifer Bianca (dentista · Gonzaga, Santos/SP) Folha de impressão — carregada no com media="print". Sai todo o chrome (header fixo, FAB, cookie bar, botões e mapa), entra fundo branco com texto escuro. Seções e cartões são protegidos contra quebra de página e os links perdem a cor de destaque. Alvo: até ~3 páginas em A4. ========================================================================== */ @page { size: A4; margin: 1.1cm 1.4cm; } /* -------------------------------------------------------------------------- Fora da impressão: chrome e interatividade -------------------------------------------------------------------------- */ .topo, .skip-link, .wa-fab, .cookie-bar, .btn, .estante .shelf-stage, .onde-mapa, .contato .contato-form, .depo-aspas, .faq-resposta, .pro .pro-moldura, .consultorio .consultorio-moldura { display: none; } /* a estante não imprime: as capas são decorativas no papel e o conteúdo dos livros vive em .livro-dados/.book-panel (interativo, JS) */ /* -------------------------------------------------------------------------- Base de papel: fundo branco, texto escuro -------------------------------------------------------------------------- */ html { font-size: 13px; } /* toda a escala rem encolhe junto */ html, body { background: #fff; color: var(--tinta); } body { padding-top: 0; /* sem a faixa reservada ao header fixo */ font-size: .92rem; line-height: 1.4; } /* seções deixam de ocupar uma tela inteira — é o que segura as ~3 páginas */ .secao, .section { display: block; min-height: 0; padding-block: .45rem; } .hero { min-height: 0; } .secao-cab { margin-bottom: var(--sp-2); } .hero-titulo { font-size: 2.1rem; } .secao-titulo { font-size: 1.45rem; } .secao-intro, .hero-sub, .cta-final-texto { font-size: .95rem; } .pro-texto p, .consultorio-texto p, .onde-texto p, .contato-texto p, .cta-final-texto, .onde-lista, .credenciais { font-size: .88rem; } /* links sem a cor de destaque — continuam sublinhados e legíveis */ a, a:hover { color: inherit; } /* -------------------------------------------------------------------------- Proteção contra quebra de página. Cartões e itens nunca partem ao meio; .section (contrato do job) idem. As .secao desta página PODEM quebrar: com avoid em cada uma, cada seção saltava para uma página nova e o documento dobrava — incompatível com o alvo de ~3 páginas. Títulos ficam presos ao conteúdo seguinte. -------------------------------------------------------------------------- */ .section, .depo-card, .faq-item, .livro-item, .credenciais-item, .onde-item, .chip { break-inside: avoid; page-break-inside: avoid; } h1, h2, h3, .secao-titulo { break-after: avoid; } /* -------------------------------------------------------------------------- Peças escuras viram papel: depoimento em destaque e rodapé -------------------------------------------------------------------------- */ .depo-destaque { border-color: var(--suporte-pele); background: #fff; color: var(--tinta); } .depo-destaque .depo-texto { color: var(--tinta); } .depo-destaque .depo-autor { color: var(--tinta); } .depo-destaque .depo-origem { color: var(--tinta-discreta); } .rodape { padding-block: .8rem 0; background: #fff; color: var(--tinta); } .rodape .rodape-nome, .rodape .rodape-cro, .rodape .rodape-frase, .rodape .rodape-titulo, .rodape .rodape-endereco, .rodape .rodape-link, .rodape .rodape-legal-link, .rodape .rodape-aviso, .rodape .rodape-creditos { color: var(--tinta); } .rodape .rodape-legal { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top-color: var(--suporte-frio); } /* -------------------------------------------------------------------------- Compactação: imagens menores e grids simplificados -------------------------------------------------------------------------- */ /* só a foto do hero imprime, pequena — as demais saíram acima */ .hero .hero-moldura { width: 7rem; max-width: 7rem; } .hero-moldura::after { transform: none; } /* as colunas vazias (mapa, formulário e fotos saíram) devolvem a largura cheia ao texto — menos quebras de linha, menos altura */ .pro-grid, .consultorio-grid, .onde-grid, .contato-grid { display: block; } /* depoimentos em multicoluna: os cards empacotam sem sobra de grade */ .depoimentos .depo-lista { display: block; columns: 3; column-gap: var(--sp-3); } .depo-card { padding: var(--sp-3); margin-bottom: var(--sp-2); } .depo-texto { font-size: .78rem; } .depo-quote { gap: var(--sp-2); } /* credenciais e listas mais enxutas */ .credenciais { gap: var(--sp-2); } .onde-lista { gap: var(--sp-2); } /* FAQ compacto em duas colunas (as respostas saíram no bloco acima:
fechado não imprime, então nenhuma resposta iria para o papel) */ .faq-pergunta { padding: var(--sp-2) var(--sp-3); font-size: .92rem; } .duvidas .faq-lista { display: block; columns: 2; column-gap: var(--sp-4); max-width: none; } .faq-item { margin-bottom: var(--sp-1); } .faq-nota { margin-top: var(--sp-3); } /* rodapé enxuto: quatro colunas em linha e faixa legal distribuída */ .rodape .rodape-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-4); } .rodape-titulo { margin-bottom: var(--sp-2); } .rodape-frase { margin-top: var(--sp-2); } .rodape .rodape-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }