/* ============================================================================ IMPRESSÃO — a tabela do campeonato em papel ============================================================================ Folha autônoma: NÃO carrega base.css nem site.css. Aquelas folhas carregam a casca do site inteiro (navegação, cartões, gaveta, gráficos) e nada disso vai para o papel. Aqui só existe o que se imprime. De `tokens.css` vêm as cores da marca, para a folha nascer com a mesma identidade da tela em vez de um segundo esquema de cor para manter. O tema é fixo em claro (`data-tema="claro"` no ): imprimir o tema escuro gastaria um cartucho por folha e sairia ilegível em papel comum. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } body.folha-corpo { margin: 0; padding: 0 0 40px; background: #EEF1F6; color: #1A2233; /* A MESMA fonte do site, pelo token. Escrever uma família própria aqui daria uma folha com outra tipografia — e era isso que estava acontecendo, com uma fonte que o projeto sequer carrega. */ font-family: var(--fonte-base); font-size: 12px; line-height: 1.45; -webkit-print-color-adjust: exact; /* Safari/Chrome antigos */ print-color-adjust: exact; /* padrão */ } /* ------------------------------------------------------------ BARRA DE AÇÃO Só existe na tela. Ver o `@media print` no fim do arquivo. */ .folha-acoes { display: flex; align-items: center; gap: 12px; max-width: 210mm; margin: 0 auto; padding: 20px 0 14px; } .folha-voltar { display: inline-flex; align-items: center; gap: 8px; color: #5E6D89; text-decoration: none; font-size: 13px; font-weight: 600; } .folha-voltar:hover { color: var(--acento, #2F6FE4); } .folha-imprimir { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 8px; background: var(--acento, #2F6FE4); color: #FFF; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .folha-imprimir:hover { filter: brightness(1.08); } /* --------------------------------------------------------------------- FOLHA Largura de A4 na tela também: quem monta a tabela vê exatamente a quebra de página que vai sair na impressora, sem precisar abrir a pré-visualização. */ .folha { width: 210mm; margin: 0 auto; padding: 14mm 12mm; background: #FFF; box-shadow: 0 10px 40px rgb(16 24 40 / .10); } /* ---------------------------------------------------------------- CABEÇALHO */ .folha-topo { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--acento, #2F6FE4); } /* Só texto no cabeçalho. A logomarca saiu: é arte única, sem versão para fundo claro, e a que foi desenhada para o topo escuro do site chegava ofuscada no papel branco. Texto imprime legível em qualquer impressora. */ /* Marca e endereço com a MESMA base flexível: é o que mantém o título no eixo central da folha. Sem isso o nome curto ("Tatiqa") e a URL longa davam larguras diferentes às laterais, e o título nascia 51px fora do centro. */ .folha-marca, .folha-endereco { flex: 1 1 0; min-width: 0; } .folha-marca-nome { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--acento, #2F6FE4); } /* O miolo toma só o que o texto pede; quem divide a sobra são as laterais, em partes iguais — e é isso que centra o título de verdade. */ .folha-identidade { flex: 0 1 auto; min-width: 0; text-align: center; } .folha-etiqueta { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #8A94A6; } .folha-identidade h1 { margin: 2px 0 0; font-size: 23px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; } .folha-temporada { margin: 2px 0 0; font-size: 12px; color: #5E6D89; } .folha-endereco { text-align: right; } .folha-endereco span { display: block; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #8A94A6; } .folha-endereco b { font-size: 11px; color: var(--acento, #2F6FE4); word-break: break-all; } /* ------------------------------------------------------------------ NÚMEROS */ .folha-numeros { display: flex; gap: 8px; margin: 12px 0 16px; padding: 0; list-style: none; } .folha-numeros li { flex: 1; padding: 8px 4px; border: 1px solid #E4E8F0; border-radius: 6px; background: #F7F9FC; text-align: center; } .folha-numeros b { display: block; font-size: 18px; font-weight: 800; line-height: 1; } .folha-numeros span { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #8A94A6; } /* -------------------------------------------------------------------- JOGOS */ .folha-bloco { margin-bottom: 12px; } /* A REGRA DE QUEBRA — é ela que faz a página encher antes de virar. Só a LINHA é indivisível. O bloco da rodada NÃO leva `break-inside: avoid`: levava, e uma rodada que não coubesse no resto da página pulava inteira, deixando um vão de meia folha. Agora as linhas escorrem até o fim do papel e a rodada continua na página seguinte — com o cabeçalho repetido, porque ele é ``. */ .folha-tabela tr { break-inside: avoid; page-break-inside: avoid; } /* `table-header-group` é o que manda o navegador repetir o cabeçalho em cada página que a tabela ocupar. `break-after: avoid` impede o oposto: o título sozinho no pé da folha, com os jogos só na próxima. */ .folha-tabela thead { display: table-header-group; break-after: avoid; page-break-after: avoid; } .folha-bloco-titulo { padding: 5px 10px; border-radius: 5px; background: #1A2233; color: #FFF; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; text-align: left; } /* A data encosta na direita sem `margin-left:auto` (não há flex numa célula de tabela com colspan): float resolve e sobrevive à impressão. */ .folha-bloco-data { float: right; font-weight: 500; opacity: .75; letter-spacing: .04em; } /* O mata-mata se distingue do turno regular pela cor da faixa. */ .folha-bloco-fase .folha-bloco-titulo { background: var(--acento, #2F6FE4); } /* `table-layout: fixed` é o que mantém TODAS as rodadas com a mesma grade. Sem ele cada tabela mede o próprio conteúdo e as caixas de placar mudam de lugar a cada bloco — o olho perde a coluna ao descer a folha. */ .folha-tabela { width: 100%; border-collapse: collapse; table-layout: fixed; } .fc-quando { width: 46px; } .fc-grupo { width: 66px; } .fc-placar { width: 100px; } /* As duas colunas de time não têm largura: dividem o resto em partes iguais, e o placar fica no eixo central da folha. */ .folha-tabela td { padding: 7px 6px; border-bottom: 1px solid #EDF0F5; vertical-align: middle; } .folha-tabela tr:last-child td { border-bottom: 0; } .folha-quando { text-align: center; line-height: 1.2; } .folha-quando b { display: block; font-size: 11px; font-weight: 700; } .folha-quando span { font-size: 9px; color: #8A94A6; } /* Nome longo não pode empurrar a coluna: com largura fixa ele quebraria o alinhamento que acabamos de garantir. */ .folha-mandante, .folha-visitante { overflow: hidden; text-overflow: ellipsis; } .folha-selo { display: inline-block; padding: 2px 6px; border-radius: 3px; background: #EEF2FA; color: #46557A; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .folha-mandante { text-align: right; } .folha-visitante { text-align: left; } .folha-time { font-size: 12px; font-weight: 600; } /* NÃO há escudo nesta folha, e a razão é peso de arquivo, não desenho. Os escudos ficam gravados em 1000×1000, e o PDF não guarda o WebP: decodifica cada imagem e reencoda sem perdas, ~690 KB por escudo. Medido com o Chrome imprimindo esta folha: 181 KB sem, 5.010 KB com. Uma tabela que ninguém consegue mandar por WhatsApp não serve — e ela existe para circular. Se um dia voltar, a conta muda com a RESOLUÇÃO da origem, não com o tamanho de exibição: os mesmos sete escudos a 96px davam 296 KB de PDF. */ /* Vaga ainda indefinida: o rótulo diz DE ONDE o time vem, e a linha abaixo é para escrever quando vier. É o que substitui um "A definir" que não ajuda ninguém de caneta na mão. */ .folha-time-vago { display: block; } .folha-time-vago small { display: block; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #8A94A6; } .folha-linha-escrita { display: block; width: 100%; min-width: 90px; height: 13px; border-bottom: 1px dashed #B9C2D4; } /* ------------------------------------------------------------------- PLACAR As duas caixas do placar. Vazias, são o convite para anotar o jogo à mão — a tabela de parede que a molecada preenchia no intervalo. */ /* A largura mora no `colgroup` (.fc-placar); repeti-la aqui criaria dois lugares para mudar a mesma medida. */ .folha-placar { text-align: center; white-space: nowrap; } .folha-caixa { display: inline-block; width: 26px; height: 26px; border: 1.5px solid #C7D0E0; border-radius: 5px; background: #FFF; font-size: 14px; font-weight: 800; line-height: 23px; text-align: center; vertical-align: middle; } .folha-placar i { margin: 0 3px; color: #A8B2C6; font-style: normal; font-size: 10px; } .folha-placar small { display: block; margin-top: 2px; font-size: 8px; color: #8A94A6; } /* ------------------------------------------------------------------- RODAPÉ */ .folha-rodape { margin-top: 16px; padding-top: 10px; border-top: 2px solid #1A2233; text-align: center; } .folha-rodape-linha { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; font-size: 10px; color: #5E6D89; } .folha-rodape-marca { font-weight: 800; color: #1A2233; } .folha-rodape-sep { color: #C7D0E0; } .folha-credito { margin: 5px 0 0; font-size: 9px; color: #8A94A6; } .folha-vazio { padding: 30px 0; text-align: center; color: #8A94A6; } /* ============================================================================ @media print ============================================================================ A margem passa a ser da PÁGINA (@page), não da caixa: com padding em mm a segunda folha em diante nasceria sem margem superior, porque o padding só vale uma vez, no começo do elemento. */ @page { size: A4 portrait; margin: 12mm 10mm; } @media print { body.folha-corpo { background: #FFF; padding: 0; font-size: 11px; } /* Fora do papel: botão e link de volta. */ .folha-acoes { display: none !important; } .folha { width: auto; margin: 0; padding: 0; box-shadow: none; } /* O cabeçalho se repete em toda página? NÃO: ele é grande e roubaria um terço de cada folha. A identidade fica na primeira página e no rodapé, que é onde se procura a origem de um papel que passou de mão em mão. */ .folha-topo { border-bottom-width: 2px; } .folha-numeros { margin: 10px 0 12px; } .folha-caixa { border-color: #94A0B8; } }