/* ========================================================================== Arquivo do Clube — ESTILO ========================================================================== A camada que faz o site parecer feito, e não montado. ac-componentes.css define o VOCABULÁRIO (o que é um placar, o que é um selo de resultado). Esta folha define a COMPOSIÇÃO: como uma página começa, onde o olho pousa primeiro, o que é grande e o que é pequeno, o que gruda ao rolar, o que acontece quando o mouse passa. Depende de ac-tokens.css e ac-componentes.css. Carrega DEPOIS de ac-telas.css: onde as duas disserem a mesma coisa, esta vence, de propósito. ========================================================================== */ /* ========================================================================== 1. FUNDAÇÃO ========================================================================== */ .ac-wrap, .ac-site-content { color: var(--ac-tinta); } /* Ritmo vertical: em vez de cada bloco escolher sua margem, o container distribui. Margem escolhida elemento a elemento é o que produz aquele espaçamento irregular que ninguém sabe explicar. */ .ac-fluxo > * + * { margin-top: var(--ac-e-5); } .ac-fluxo--apertado > * + * { margin-top: var(--ac-e-3); } .ac-fluxo--largo > * + * { margin-top: var(--ac-e-7); } /* Tipografia de leitura: 65 caracteres é onde o olho para de se perder. */ .ac-prosa { font-family: var(--ac-fonte-texto); font-size: var(--ac-t-lg); line-height: var(--ac-lh-texto); max-width: 40rem; } .ac-prosa p + p { margin-top: var(--ac-e-4); } /* ========================================================================== 2. CABEÇALHO DE PÁGINA ========================================================================== Toda página do arquivo começa igual: uma etiqueta dizendo o que é aquilo, o nome em corpo grande, os metadados, e uma régua grossa fechando. É o que dá ao site a sensação de que as páginas são da mesma publicação. ========================================================================== */ .ac-pagina-cab { padding-block: clamp(var(--ac-e-5), 4vw, var(--ac-e-7)) var(--ac-e-4); border-bottom: 2px solid var(--ac-tinta); margin-bottom: var(--ac-e-6); } .ac-pagina-cab .ac-eyebrow { margin-bottom: var(--ac-e-3); } .ac-pagina-cab h1, .ac-pagina-titulo { font-family: var(--ac-fonte-display); font-size: var(--ac-t-4xl); font-weight: 800; letter-spacing: var(--ac-ls-display); line-height: var(--ac-lh-apertada); margin: 0; text-wrap: balance; } .ac-pagina-sub { font-family: var(--ac-fonte-texto); font-size: var(--ac-t-lg); color: var(--ac-tinta-2); margin: var(--ac-e-3) 0 0; max-width: 42rem; } /* A linha de metadados do cabeçalho: alinhada à esquerda, não centralizada. */ .ac-pagina-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-e-2) var(--ac-e-5); margin-top: var(--ac-e-4); font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 600; letter-spacing: var(--ac-ls-etiq); text-transform: uppercase; color: var(--ac-tinta-2); } .ac-pagina-meta > * { display: inline-flex; align-items: center; gap: var(--ac-e-1); } .ac-pagina-meta .ac-icone { color: var(--ac-tinta-3); } /* Cabeçalho com retrato ao lado: fichas de jogador, goleiro, técnico. */ .ac-pagina-cab--ficha { display: grid; gap: var(--ac-e-5); align-items: end; } @media (min-width: 40rem) { .ac-pagina-cab--ficha { grid-template-columns: 9rem minmax(0, 1fr); } } /* ========================================================================== 3. O PLACAR COMO OBJETO ========================================================================== Na página do jogo o placar não é um card com números: é a coisa que a pessoa veio ver. Ganha corpo, chapa de escudo e a competição por cima. ========================================================================== */ .ac-board { border: 1px solid var(--ac-regua); border-radius: var(--ac-raio-lg); background: var(--ac-papel-alto); overflow: hidden; } .ac-board-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ac-e-2) var(--ac-e-4); padding: var(--ac-e-3) var(--ac-e-4); background: var(--ac-papel-fundo); border-bottom: 1px solid var(--ac-regua); font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 700; letter-spacing: var(--ac-ls-etiq); text-transform: uppercase; color: var(--ac-tinta-2); } .ac-board-topo > * { display: inline-flex; align-items: center; gap: var(--ac-e-1); } .ac-board-corpo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--ac-e-4); padding: clamp(var(--ac-e-5), 4vw, var(--ac-e-7)) var(--ac-e-4); } .ac-board-time { display: flex; flex-direction: column; align-items: center; gap: var(--ac-e-3); min-width: 0; text-align: center; } .ac-board-time img, .ac-board-chapa { width: clamp(3.5rem, 9vw, 5.5rem); height: clamp(3.5rem, 9vw, 5.5rem); object-fit: contain; border-radius: 50%; border: 1px solid var(--ac-regua); background: var(--ac-papel); display: grid; place-items: center; font-family: var(--ac-fonte-display); font-weight: 800; font-size: var(--ac-t-sm); color: var(--ac-tinta-3); } .ac-board-nome { font-family: var(--ac-fonte-display); font-size: var(--ac-t-xl); font-weight: 700; letter-spacing: var(--ac-ls-titulo); line-height: 1.2; text-wrap: balance; } .ac-board-nome a { color: inherit; text-decoration: none; } .ac-board-nome a:hover { color: var(--ac-rubro); } .ac-board-gols { font-family: var(--ac-fonte-display); font-variant-numeric: tabular-nums; font-size: var(--ac-t-placar); font-weight: 800; letter-spacing: -.05em; line-height: 1; display: flex; align-items: center; gap: var(--ac-e-3); white-space: nowrap; } .ac-board-gols .ac-x { font-size: .38em; font-weight: 500; color: var(--ac-tinta-3); letter-spacing: 0; } .ac-board-gols--vazio { font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-lg); letter-spacing: var(--ac-ls-etiq); text-transform: uppercase; color: var(--ac-tinta-3); font-weight: 600; } .ac-board-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ac-e-2) var(--ac-e-4); padding: var(--ac-e-3) var(--ac-e-4); border-top: 1px solid var(--ac-regua); font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ac-tinta-2); } /* ========================================================================== 4. CARTÃO COM ESTRUTURA ========================================================================== Um card com cabeçalho e corpo separados por régua lê muito melhor que uma caixa com um

solto dentro. ========================================================================== */ .ac-painel { border: 1px solid var(--ac-regua); border-radius: var(--ac-raio); background: var(--ac-papel-alto); overflow: hidden; } .ac-painel-cab { display: flex; align-items: center; gap: var(--ac-e-3); padding: var(--ac-e-3) var(--ac-e-4); border-bottom: 1px solid var(--ac-regua); background: var(--ac-papel-fundo); } .ac-painel-cab h2, .ac-painel-cab h3 { font-family: var(--ac-fonte-display); font-size: var(--ac-t-md); font-weight: 700; letter-spacing: var(--ac-ls-titulo); margin: 0; } .ac-painel-cab .ac-icone { color: var(--ac-rubro); } .ac-painel-cab .ac-painel-extra { margin-left: auto; font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ac-tinta-2); } .ac-painel-corpo { padding: var(--ac-e-4); } .ac-painel-corpo--liso { padding: 0; } .ac-painel-rodape { padding: var(--ac-e-3) var(--ac-e-4); border-top: 1px solid var(--ac-regua); font-size: var(--ac-t-sm); color: var(--ac-tinta-2); } /* ========================================================================== 5. BARRA DE FERRAMENTAS ========================================================================== O filtro de temporada gruda no topo quando a lista é longa — 3.000 jogos fazem a pessoa rolar muito, e voltar ao topo para trocar o filtro é o tipo de atrito que ninguém reclama e todo mundo sente. ========================================================================== */ .ac-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-e-3); padding: var(--ac-e-3) 0; border-bottom: 1px solid var(--ac-regua); margin-bottom: var(--ac-e-4); background: var(--ac-papel); } .ac-toolbar--grudada { position: sticky; top: 0; z-index: 20; } .ac-toolbar-rotulo { display: inline-flex; align-items: center; gap: var(--ac-e-1); font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 700; letter-spacing: var(--ac-ls-etiq); text-transform: uppercase; color: var(--ac-tinta-2); } .ac-toolbar-fim { margin-left: auto; } /* Controles: um só desenho para select, input e botão. */ .ac-toolbar select, .ac-toolbar input[type="search"], .ac-toolbar input[type="text"], .ac-controle { font-family: var(--ac-fonte-display); font-size: var(--ac-t-md); color: var(--ac-tinta); background: var(--ac-papel-alto); border: 1px solid var(--ac-regua-forte); border-radius: var(--ac-raio-sm); padding: var(--ac-e-1) var(--ac-e-3); line-height: 1.6; transition: border-color var(--ac-transicao), box-shadow var(--ac-transicao); } .ac-toolbar select:hover, .ac-controle:hover { border-color: var(--ac-tinta-3); } .ac-toolbar select:focus-visible, .ac-controle:focus-visible { outline: none; border-color: var(--ac-rubro); box-shadow: 0 0 0 3px var(--ac-rubro-fraco); } .ac-botao { display: inline-flex; align-items: center; gap: var(--ac-e-2); font-family: var(--ac-fonte-display); font-size: var(--ac-t-md); font-weight: 600; padding: var(--ac-e-2) var(--ac-e-4); border-radius: var(--ac-raio-sm); border: 1px solid var(--ac-regua-forte); background: var(--ac-papel-alto); color: var(--ac-tinta); text-decoration: none; cursor: pointer; transition: border-color var(--ac-transicao), color var(--ac-transicao), background var(--ac-transicao); } .ac-botao:hover { border-color: var(--ac-rubro); color: var(--ac-rubro); } .ac-botao--primario { background: var(--ac-rubro); border-color: var(--ac-rubro); color: var(--ac-sobre-rubro); } .ac-botao--primario:hover { background: var(--ac-rubro-vivo); border-color: var(--ac-rubro-vivo); color: var(--ac-sobre-rubro); } /* ========================================================================== 6. TABELA DE ARQUIVO ========================================================================== A tabela é o principal objeto deste site. Merece tratamento de tabela de referência, não de grade genérica. ========================================================================== */ .ac-table { font-size: var(--ac-t-md); } .ac-table thead th { background: var(--ac-papel-alto); border-bottom-width: 2px; border-bottom-color: var(--ac-tinta); padding-block: var(--ac-e-2); } .ac-table tbody td { transition: background var(--ac-transicao); } /* A linha inteira é clicável quando tem um link dentro: a área de alvo passa de uma palavra para a linha toda, o que importa no celular. */ .ac-table tbody tr.ac-linha-link { cursor: pointer; } .ac-table tbody tr.ac-linha-link:hover td { background: var(--ac-rubro-fraco); } .ac-table tbody tr.ac-linha-link:focus-within td { background: var(--ac-rubro-fraco); } .ac-table td a { color: inherit; text-decoration: none; } .ac-table td a:hover { color: var(--ac-rubro); } /* Placar dentro de tabela: tabular, com peso, e sem quebrar linha. */ .ac-table .ac-placar-celula { font-family: var(--ac-fonte-display); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; } /* Coluna de destaque: a que a tabela existe para mostrar. */ .ac-table .ac-col-destaque { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } /* Em telas estreitas a tabela vira fichas empilhadas, com o rótulo da coluna vindo do atributo data-rotulo. Uma tabela de 7 colunas rolando na horizontal é pior que nenhuma tabela. */ @media (max-width: 44rem) { /* O tratamento vale para as DUAS tabelas do sistema — a de fichas e a de jogos. Aplicá-lo por substituição de texto na classe quebrou os seletores compostos: `.ac-table--fichas tbody tr` virou `.ac-table--fichas tbody` (todos os tbody) mais `.ac-table--jogos tbody tr`. Por isso a lista está escrita por extenso, um seletor completo por linha. */ /* O min-width de 720px vem de ac-todos-jogos.css, que carrega DEPOIS desta folha. Sem zerá-lo, a tabela vira fichas e continua rolando de lado — exatamente o que o data-rotulo existe para eliminar. */ .ac-table--fichas, .ac-table--jogos { min-width: 0; } .ac-table--fichas thead, .ac-table--jogos thead { display: none; } .ac-table--fichas tbody tr, .ac-table--jogos tbody tr { display: block; padding: var(--ac-e-3); border-bottom: 1px solid var(--ac-regua); } /* * Grid POR CÉLULA, não `display: contents` na célula. * * Com `contents` a desaparece e seus filhos viram itens do grid da * — e o número de filhos NÃO é constante: a célula do jogo tem o * confronto mais o placar, a do selo tem um só. Os rótulos saíam todos * deslocados uma casa, e o deslocamento mudava de linha para linha conforme * o jogo tivesse placar ou não. */ .ac-table--fichas tbody td, .ac-table--jogos tbody td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; gap: var(--ac-e-3); border: 0; padding: var(--ac-e-1) 0; } .ac-table--fichas tbody td::before, .ac-table--jogos tbody td::before { content: attr(data-rotulo); font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-tinta-2); } .ac-table--fichas tbody td[data-rotulo=""], .ac-table--jogos tbody td[data-rotulo=""] { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== 7. RANKING COM PÓDIO ========================================================================== Os três primeiros de um ranking histórico não são "mais três linhas". ========================================================================== */ .ac-rankitem { transition: background var(--ac-transicao); } .ac-rankitem:hover { background: var(--ac-papel-fundo); } .ac-rankitem--podio .ac-ranknum { font-size: var(--ac-t-xl); color: var(--ac-tinta); } .ac-rankitem--podio:nth-child(1) .ac-ranknum { color: var(--ac-marcante); } .ac-rankitem--podio img { width: 3.25rem; height: 3.25rem; border-width: 2px; } .ac-rankitem--podio:nth-child(1) img { border-color: var(--ac-marcante); } .ac-rankitem .ac-rank-nome { font-family: var(--ac-fonte-display); font-weight: 600; min-width: 0; } .ac-rankitem .ac-rank-nome a { color: inherit; text-decoration: none; } .ac-rankitem .ac-rank-nome a:hover { color: var(--ac-rubro); } .ac-rankitem .ac-rank-sub { display: block; font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ac-tinta-2); } /* ========================================================================== 8. ESTADO VAZIO ========================================================================== "Nenhum resultado" numa linha de texto cinza parece erro. Com ícone e uma frase que diz o que fazer, parece resposta. ========================================================================== */ .ac-vazio, .ac-jog-empty, .ac-est-empty, .ac-gol-empty { display: grid; justify-items: center; gap: var(--ac-e-2); padding: var(--ac-e-7) var(--ac-e-4); text-align: center; border: 1px dashed var(--ac-regua-forte); border-radius: var(--ac-raio); background: transparent; color: var(--ac-tinta-2); } .ac-vazio .ac-icone { width: 2.5rem; height: 2.5rem; color: var(--ac-tinta-3); stroke-width: 1.25; } .ac-vazio b { font-family: var(--ac-fonte-display); font-size: var(--ac-t-lg); font-weight: 700; color: var(--ac-tinta); } .ac-vazio p { margin: 0; font-size: var(--ac-t-md); max-width: 26rem; } /* ========================================================================== 9. PAGINAÇÃO ========================================================================== */ .ac-pagination, .ac-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ac-e-1); margin-top: var(--ac-e-5); padding-top: var(--ac-e-4); border-top: 1px solid var(--ac-regua); } .ac-pagination a, .ac-pagination span, .ac-pager a, .ac-pager span { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding-inline: var(--ac-e-2); font-family: var(--ac-fonte-display); font-size: var(--ac-t-md); font-weight: 600; border: 1px solid var(--ac-regua); border-radius: var(--ac-raio-sm); background: var(--ac-papel-alto); color: var(--ac-tinta-2); text-decoration: none; transition: border-color var(--ac-transicao), color var(--ac-transicao); } .ac-pagination a:hover, .ac-pager a:hover { border-color: var(--ac-rubro); color: var(--ac-rubro); } .ac-pagination .current, .ac-pagination .ac-page-link-current, .ac-pager .current { background: var(--ac-rubro); border-color: var(--ac-rubro); color: var(--ac-sobre-rubro); } .ac-pagination .dots { border-color: transparent; background: transparent; } /* ========================================================================== 10. CARDS DE LISTAGEM ========================================================================== */ .ac-jog-card, .ac-est-card, .ac-comp-card, .ac-tec-card, .ac-gol-card, .ac-adv-card, .ac-icon-card { transition: border-color var(--ac-transicao), box-shadow var(--ac-transicao); } .ac-jog-card:hover, .ac-est-card:hover, .ac-comp-card:hover, .ac-tec-card:hover, .ac-gol-card:hover, .ac-adv-card:hover { border-color: var(--ac-rubro); box-shadow: var(--ac-sombra); } .ac-jog-card:focus-within, .ac-est-card:focus-within, .ac-comp-card:focus-within, .ac-tec-card:focus-within, .ac-gol-card:focus-within, .ac-adv-card:focus-within { border-color: var(--ac-rubro); } /* ========================================================================== 11. FOCO ========================================================================== Um só desenho de foco no site inteiro, e visível nos dois temas. ========================================================================== */ a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ac-rubro-vivo); outline-offset: 2px; border-radius: var(--ac-raio-sm); } /* ========================================================================== 12. IMPRESSÃO ========================================================================== Um arquivo histórico é impresso. Sem isto a página sai com o menu, o rodapé, os filtros — e o texto branco sobre fundo bordô, que gasta uma carga de tinta e sai ilegível. ========================================================================== */ @media print { :root { --ac-papel: #FFFFFF; --ac-papel-alto: #FFFFFF; --ac-papel-fundo: #FFFFFF; --ac-tinta: #000000; --ac-tinta-2: #333333; --ac-tinta-3: #666666; --ac-regua: #BBBBBB; --ac-regua-forte: #888888; --ac-rubro: #000000; --ac-sombra: none; } .ac-site-header, .ac-searchbar-wrap, .ac-mobile-nav, .ac-site-footer, .ac-az-filter, .ac-toolbar, .ac-pagination, .ac-pager, .ac-tema-toggle { display: none !important; } .ac-board, .ac-painel, .ac-card { break-inside: avoid; border-color: #999; } .ac-table thead { display: table-header-group; } .ac-table tbody tr { break-inside: avoid; } /* O destino de um link não se lê no papel. */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; } a[href^="#"]::after { content: none; } } /* ========================================================================== 13. MOVIMENTO ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 14. JOGO MARCANTE ========================================================================== O destaque editorial não pinta o placar inteiro de dourado: marca a borda e a faixa de cima. O placar continua sendo o placar. ========================================================================== */ .ac-board--marcante { border-color: var(--ac-marcante); } .ac-board--marcante .ac-board-topo { background: color-mix(in srgb, var(--ac-marcante) 16%, var(--ac-papel-fundo)); border-bottom-color: var(--ac-marcante); } .ac-board-marca { color: var(--ac-marcante-ink); background: var(--ac-marcante); padding: var(--ac-e-1) var(--ac-e-2); border-radius: var(--ac-raio-sm); font-weight: 800; } .ac-board--marcante .ac-board-marca .ac-icone { color: inherit; } /* O rodapé do placar carrega o selo V/E/D no fim da linha. */ .ac-board-rodape .ac-res { margin-left: var(--ac-e-1); } .ac-board-rodape a { color: inherit; } .ac-board-rodape a:hover { color: var(--ac-rubro); } .ac-board-topo a { color: inherit; text-decoration: none; } .ac-board-topo a:hover { color: var(--ac-rubro); } /* Em tela estreita o placar empilha: escudo, nome, número, e o outro time. */ @media (max-width: 34rem) { .ac-board-corpo { grid-template-columns: 1fr; gap: var(--ac-e-4); padding-block: var(--ac-e-5); } .ac-board-time { flex-direction: row; gap: var(--ac-e-3); text-align: left; } .ac-board-time img, .ac-board-chapa { width: 3rem; height: 3rem; } .ac-board-nome { font-size: var(--ac-t-lg); } .ac-board-gols { justify-content: center; } } /* ========================================================================== 15. MARCAS DE ESTADO ========================================================================== Ídolo, aposentado, falecido. Eram emojis colados no fim do

— sem rótulo, sem hierarquia, e ilegíveis para leitor de tela. Viram etiquetas. ========================================================================== */ .ac-marcas { display: flex; flex-wrap: wrap; gap: var(--ac-e-2); margin: var(--ac-e-3) 0 0; } .ac-marca { display: inline-flex; align-items: center; gap: var(--ac-e-1); padding: var(--ac-e-1) var(--ac-e-3); border: 1px solid var(--ac-regua); border-radius: 999px; background: var(--ac-papel-alto); font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-tinta-2); } .ac-marca .ac-icone { color: var(--ac-tinta-3); } .ac-marca--idolo { border-color: var(--ac-rubro); background: var(--ac-rubro-fraco); color: var(--ac-rubro); } .ac-marca--idolo .ac-icone { color: var(--ac-rubro); } /* O hero da ficha perde a grade de larguras fixas em pixel: o retrato já vive no cabeçalho, e o que sobra é conteúdo em coluna única. */ .ac-hero { display: block; } .ac-hero-info { min-width: 0; } /* A lista de dados da ficha ganha MEDIDA. Sem limite ela esticava os 1100px da página: "NOME COMPLETO" na margem esquerda e "Muriel Gustavo Becker" na direita, com 900px de vazio no meio. O olho não liga rótulo e valor a essa distância — é o mesmo defeito do vão depois da barra de busca, só que dentro de uma tabela. */ .ac-hero-info .ac-dl { max-width: 34rem; } /* Em tela larga a ficha usa as duas colunas que tem: dados à esquerda, seletor de temporada à direita, em vez de uma coluna só com sobra. */ @media (min-width: 900px) { .ac-hero-info { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: var(--ac-e-6); align-items: start; } .ac-hero-info .ac-dl { max-width: none; } } /* O seletor de temporada era um
com estilo inline e um solto: destoava de todo o resto da ficha. */ .ac-hero-info form { display: flex; align-items: center; gap: var(--ac-e-2); margin: 0; padding-top: var(--ac-e-2); } .ac-hero-info form label, .ac-hero-info form label strong { font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 700; letter-spacing: var(--ac-ls-etiq); text-transform: uppercase; color: var(--ac-tinta-2); } .ac-hero-info form select { font-family: var(--ac-fonte-display); font-size: var(--ac-t-sm); padding: var(--ac-e-1) var(--ac-e-2); border: 1px solid var(--ac-regua); border-radius: var(--ac-raio-sm); background: var(--ac-papel-alto); color: var(--ac-tinta); } /* ========================================================================== 16. ESCUDO GENÉRICO E MINIATURAS SEM IMAGEM ========================================================================== Metade dos cards de adversário não tem escudo cadastrado. Um buraco no lugar deixava a grade irregular e fazia os que TÊM escudo parecerem desalinhados. ========================================================================== */ .ac-escudo-generico { width: 100%; height: 100%; display: block; color: var(--ac-tinta-3); } .ac-adv-thumb .ac-escudo-generico, .ac-jog-thumb .ac-escudo-generico, .ac-comp-thumb .ac-escudo-generico { padding: 12%; } /* Ícone no lugar da miniatura (estádio, competição). */ .ac-thumb-icone { width: 55%; height: 55%; color: var(--ac-tinta-3); stroke-width: 1.4; } .ac-sem-foto { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ac-tinta-3); background: var(--ac-papel-fundo); text-align: center; padding: var(--ac-e-1); } /* ========================================================================== 17. ESPAÇO DEPOIS DA BUSCA ========================================================================== A barra de pesquisa é o último elemento do cabeçalho, e cada página começava a uma distância diferente dela: a do clube colava o escudo logo abaixo, as listagens abriam com um card e sobrava o dobro. Uma distância só, sempre. ========================================================================== */ .ac-searchbar-wrap { padding-block: var(--ac-e-4); } .ac-site-content { padding-top: var(--ac-e-6); } .ac-site-content > .ac-wrap:first-child, .ac-site-content > main:first-child, .ac-site-content > article:first-child { margin-top: 0; } /* O primeiro bloco de qualquer página nunca traz margem própria: o espaço vem daqui, e não da soma imprevisível das margens de cada template. */ .ac-site-content > * > :first-child, .ac-wrap > :first-child { margin-top: 0; } @media (max-width: 44rem) { .ac-site-content { padding-top: var(--ac-e-5); } } /* ========================================================================== 18. O TOPO DA PÁGINA DE CLUBE ========================================================================== Escudo | identidade | uniformes — três colunas na mesma linha, em vez de três blocos empilhados ocupando duas dobras. ========================================================================== */ .ac-clube-topo { display: grid; gap: var(--ac-e-5); align-items: start; padding-bottom: var(--ac-e-5); border-bottom: 2px solid var(--ac-tinta); margin-bottom: var(--ac-e-6); } @media (min-width: 68rem) { /* A coluna de informação tinha `1fr` e a das camisas `auto`: o `1fr` come todo o espaço livre e as camisas ficam com o mínimo que couberem. Com três uniformes — o caso comum — elas quebravam para outra linha ou saíam espremidas, enquanto a coluna do meio sobrava vazia à direita dos dados. Invertido: a informação recebe uma MEDIDA (o suficiente para rótulo e valor, e nada além), e o que sobra vai para os uniformes. */ .ac-clube-topo { grid-template-columns: 11rem minmax(0, 28rem) minmax(0, 1fr); gap: var(--ac-e-6); } } @media (min-width: 40rem) and (max-width: 67.99rem) { .ac-clube-topo { grid-template-columns: 8rem minmax(0, 1fr); } .ac-clube-uniformes { grid-column: 1 / -1; } } .ac-clube-escudo img, .ac-clube-escudo .ac-escudo-generico { width: 100%; max-width: 11rem; height: auto; aspect-ratio: 1; object-fit: contain; display: block; } .ac-clube-info { min-width: 0; } .ac-clube-nome { font-family: var(--ac-fonte-display); font-size: var(--ac-t-4xl); font-weight: 800; letter-spacing: var(--ac-ls-display); line-height: var(--ac-lh-apertada); margin: 0; } .ac-clube-nome-longo { /* Era a serifa de TEXTO. "Clube Náutico Capibaribe" é um nome, não é prosa — e era a única palavra em serifa em toda a página, o que fazia parecer que tinha vindo de outro site colada ali. A serifa continua reservada para texto corrido de verdade. */ font-family: var(--ac-fonte-display); font-size: var(--ac-t-lg); font-weight: 400; color: var(--ac-tinta-2); margin: var(--ac-e-1) 0 0; } .ac-clube-dl { margin-top: var(--ac-e-4); max-width: 28rem; } .ac-clube-temporada { margin-top: var(--ac-e-4); margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } /* Os uniformes: à direita, na mesma linha, alinhados pelo topo. */ .ac-clube-uniformes { display: flex; flex-wrap: wrap; gap: var(--ac-e-3); justify-content: flex-end; align-items: flex-start; } /* Sem moldura: a camisa já vem recortada em fundo branco, e a borda em volta criava uma segunda caixa dentro da caixa. Fica só a imagem. */ .ac-clube-uniformes a, .ac-clube-uniformes .ac-uniforme-link { display: block; /* `flex: 0 1` em vez de largura fixa: com três uniformes — o caso comum — a soma de 3×7,5rem mais os vãos passava da coluna por poucos pixels e a terceira camisa caía sozinha numa segunda linha. Deixando encolher, as três dividem a fileira; com uma ou duas, cada uma para nos 7,5rem e não estica para preencher. */ flex: 0 1 7.5rem; min-width: 3.5rem; border: 0; background: transparent; transition: opacity var(--ac-transicao); } .ac-clube-uniformes a:hover { opacity: .8; } .ac-clube-uniformes .ac-uniforme-link img, .ac-clube-uniformes a img { border: 0; border-radius: 0; } .ac-clube-uniformes img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; } @media (max-width: 39.99rem) { .ac-clube-uniformes { justify-content: flex-start; } .ac-clube-uniformes a { width: 6rem; } } /* ========================================================================== 19. RANKINGS ========================================================================== Os três rankings do site (artilheiros, mais jogos, goleiros) tinham três marcações diferentes: dois eram grade de cards com o número dentro do card — no canto direito num deles, que é onde o olho não procura posição — e um era lista com quatro divs e muito ar entre elas. Agora é uma lista só: posição à esquerda, retrato, nome com a legenda embaixo, valor grande à direita, e régua entre as linhas. ========================================================================== */ .ac-ranklist { list-style: none; margin: 0; padding: 0; counter-reset: none; } .ac-rankitem { display: grid; /* A coluna do retrato tem a MEDIDA do retrato (3,125rem = 50px), não 3rem. Com a trilha menor que a foto, ela transbordava 2px e comia parte do vão — e no pódio, onde a foto vai a 3,5rem, o transbordo de 12px zerava o vão inteiro: o nome encostava na borda da foto. O `gap` continuava lá, declarado; só não sobrava espaço para ele. */ grid-template-columns: 2.5rem 3rem minmax(0, 1fr) auto; align-items: center; gap: var(--ac-e-3); padding: var(--ac-e-2) var(--ac-e-2); border-bottom: 1px solid var(--ac-regua); transition: background var(--ac-transicao); } .ac-rankitem:last-child { border-bottom: 0; } .ac-rankitem:hover { background: var(--ac-papel-fundo); } .ac-ranknum { font-family: var(--ac-fonte-display); font-variant-numeric: tabular-nums; font-weight: 800; font-size: var(--ac-t-lg); color: var(--ac-tinta-3); text-align: right; line-height: 1; } .ac-rank-foto { /* `border-box`: a borda entra na medida, não soma por fora. Sem isto, 3rem + 1px de borda de cada lado davam 50px de caixa numa trilha de 48px — a foto transbordava e comia o vão, e no pódio (3,5rem mais borda de 2px) o transbordo era de 4px. */ box-sizing: border-box; width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; border: 1px solid var(--ac-regua); background: var(--ac-papel-fundo); display: grid; place-items: center; } .ac-rank-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .ac-rank-nome { font-family: var(--ac-fonte-display); font-size: var(--ac-t-lg); font-weight: 600; line-height: 1.25; min-width: 0; } .ac-rank-nome a { color: var(--ac-tinta); text-decoration: none; } .ac-rank-nome a:hover { color: var(--ac-rubro); } .ac-rank-nome small { display: block; font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-tinta-2); margin-top: 2px; } .ac-rank-valor { text-align: right; line-height: 1.1; } .ac-rank-valor b { display: block; font-family: var(--ac-fonte-display); font-variant-numeric: tabular-nums; font-size: var(--ac-t-2xl); font-weight: 800; letter-spacing: -.03em; color: var(--ac-tinta); } .ac-rank-valor small { display: block; font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--ac-tinta-2); margin-top: 2px; } /* Pódio: os três primeiros de um ranking histórico não são "mais três linhas". */ /* O pódio tem a foto maior, então a trilha dele também cresce — senão a foto volta a invadir o vão e o nome cola nela outra vez. */ .ac-rankitem--podio { padding-block: var(--ac-e-3); grid-template-columns: 2.5rem 3.5rem minmax(0, 1fr) auto; } .ac-rankitem--podio .ac-ranknum { font-size: var(--ac-t-2xl); color: var(--ac-tinta); } .ac-rankitem--podio .ac-rank-foto { width: 3.5rem; height: 3.5rem; border-width: 2px; } .ac-rankitem--podio:nth-child(1) .ac-ranknum { color: var(--ac-rubro); } .ac-rankitem--podio:nth-child(1) .ac-rank-foto { border-color: var(--ac-rubro); } .ac-rankitem--podio:nth-child(1) .ac-rank-valor b { color: var(--ac-rubro); } .ac-rank-foto .ac-thumb-icone, .ac-rank-foto .ac-sem-foto { width: 55%; height: 55%; font-size: 0; } .ac-rank-foto .ac-thumb-icone { color: var(--ac-tinta-3); } @media (max-width: 34rem) { /* A trilha do retrato acompanha o retrato AQUI TAMBÉM. Ela era 2,5rem para uma foto de 3rem: no celular o nome não só encostava como ficava 2px POR CIMA da foto. E a regra do pódio, por vir antes desta no arquivo, perdia a trilha larga para este seletor — por isso ele é redeclarado abaixo. */ .ac-rankitem { grid-template-columns: 2rem 3rem minmax(0, 1fr) auto; gap: var(--ac-e-2); } .ac-rankitem--podio { grid-template-columns: 2rem 3rem minmax(0, 1fr) auto; } .ac-rank-nome { font-size: var(--ac-t-md); } .ac-rank-valor b { font-size: var(--ac-t-xl); } .ac-rankitem--podio .ac-rank-foto { width: 3rem; height: 3rem; } } /* ========================================================================== 20. HIERARQUIA DE TEXTO ========================================================================== O problema visível nas telas: numa linha só conviviam preto, preto e .ac-muted cinza claro — "Fundação:" em negrito escuro ao lado do ano em cinza fraco. O olho não sabia qual era o dado e qual era o rótulo, porque os dois gritavam ao mesmo tempo, em direções opostas. A regra do sistema é uma só, e vale em toda parte: RÓTULO pequeno, versalete condensado, cinza médio (--ac-tinta-2) DADO tamanho normal, peso 600, tinta cheia (--ac-tinta) APOIO pequeno, cinza médio (--ac-tinta-2) Rótulo nunca é negrito escuro. Dado nunca é cinza claro. ========================================================================== */ /* .ac-muted era usada tanto para rótulo quanto para dado secundário, com o mesmo cinza. Passa a ser SÓ apoio, e num cinza que ainda lê bem. */ .ac-muted { color: var(--ac-tinta-2); } /* e dentro do conteúdo do arquivo deixam de ser um segundo preto competindo com o texto: viram ênfase de peso, não de cor. */ .ac-wrap strong, .ac-wrap b, .ac-site-content strong, .ac-site-content b { font-weight: 600; color: inherit; } /* Rótulo em linha ("Fundação:", "Posição:") — onde ainda existir marcação antiga que não virou lista de dados. */ .ac-rotulo, .ac-field > strong:first-child { font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 600; letter-spacing: var(--ac-ls-etiq); text-transform: uppercase; color: var(--ac-tinta-2); } /* Títulos: um peso e um espaçamento por nível, sem exceção por template. */ .ac-wrap h1, .ac-site-content h1 { font-family: var(--ac-fonte-display); font-size: var(--ac-t-4xl); font-weight: 800; letter-spacing: var(--ac-ls-display); line-height: var(--ac-lh-apertada); } .ac-wrap h2, .ac-site-content h2 { font-family: var(--ac-fonte-display); font-size: var(--ac-t-2xl); font-weight: 700; letter-spacing: var(--ac-ls-titulo); line-height: var(--ac-lh-titulo); } .ac-wrap h3, .ac-site-content h3 { font-family: var(--ac-fonte-display); font-size: var(--ac-t-xl); font-weight: 700; letter-spacing: var(--ac-ls-titulo); line-height: var(--ac-lh-titulo); } .ac-wrap h4, .ac-site-content h4 { font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 700; letter-spacing: var(--ac-ls-etiq); text-transform: uppercase; color: var(--ac-tinta-2); } /* Link dentro do conteúdo: cor do clube. * * A lista de exceções era `:not(.a):not(.b):not(.c)` — TRÊS pseudoclasses * encadeadas, o que dá especificidade 0,4,1. Nesse patamar a regra vencia todo * componente que tentasse pintar o próprio nome, e cada componente novo tinha * de ser acrescentado à lista para escapar. Foi assim que o nome do jogador * saiu vermelho no ranking e nos tops, e preto no elenco: quem estava na lista * escapava, quem não estava, não. * * `:not(:is(...))` tem a especificidade do argumento MAIS específico de :is(), * ou seja 0,1,0 — o conjunto cai para 0,2,1 e volta a ser possível um * componente dizer a própria cor. A lista continua existindo, mas agora ela é * uma conveniência, não a única saída. */ .ac-wrap a:not(:is(.ac-botao, .ac-az-btn, .ac-card-lista, .ac-top-item, .ac-roster-card, .ac-ordem-btn)), .ac-site-content a:not(:is(.ac-botao, .ac-az-btn, .ac-card-lista, .ac-top-item, .ac-roster-card, .ac-ordem-btn)) { color: var(--ac-rubro); text-decoration-thickness: 1px; text-underline-offset: .18em; } /* NOME DE PESSOA É TINTA CHEIA — em qualquer lista, em qualquer página. * * Vem depois da regra acima de propósito: com a mesma especificidade, quem * está por último vence, e é aqui que a decisão sobre nomes deve morar. O que * distingue um nome de um link comum não é a cor: é estar num card, com o * retrato ao lado e o valor à direita. */ .ac-site-content .ac-rank-nome a, .ac-site-content .ac-top-item, .ac-site-content .ac-roster-card { color: var(--ac-tinta); } .ac-site-content .ac-rank-nome a:hover { color: var(--ac-rubro); } /* O emoji de bandeira não é texto: não herda peso nem cor, e num tamanho próprio para não empurrar a linha de base. */ .ac-flag { /* Era 1.05em — o único tamanho de fonte do site fora da escala, e por um motivo que não se sustenta: a bandeira é um emoji, quem decide o desenho dela é o sistema operacional, e 5% não corrigem isso. Herda o tamanho do texto ao lado, como qualquer outro caractere. */ font-size: 1em; line-height: 1; font-weight: 400; vertical-align: -.08em; } /* Números em qualquer lugar do arquivo alinham por coluna. */ .ac-wrap [class*="valor"], .ac-wrap [class*="num"], .ac-site-content .ac-dado { font-variant-numeric: tabular-nums; } /* ========================================================================== 21. AVATAR ========================================================================== Sempre redondo, sempre do mesmo tamanho — com foto, com escudo, com iniciais ou com ícone. Antes cada listagem resolvia a miniatura do seu jeito: a de técnicos mostrava a foto no TAMANHO NATURAL, o que deixava cards de alturas diferentes com retratos gigantes ao lado de espaços vazios. ========================================================================== */ .ac-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--ac-papel-fundo); border: 1px solid var(--ac-regua); color: var(--ac-tinta-3); line-height: 1; } .ac-avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Escudo NÃO é foto: `cover` cortava as bordas para preencher o círculo, e o resultado perverso era que o clube SEM escudo (que usa o desenho, exibido inteiro) ficava mais bem apresentado que o clube com escudo. */ .ac-avatar--clube > img { object-fit: contain; padding: 12%; background: var(--ac-papel-alto); } .ac-avatar--sm { width: 2.25rem; height: 2.25rem; } .ac-avatar--md { width: 3rem; height: 3rem; } .ac-avatar--lg { width: 4rem; height: 4rem; } /* Iniciais no lugar da foto. O mesmo círculo, o mesmo tamanho — a fileira continua regular quando metade do elenco não tem retrato. */ .ac-avatar--iniciais { font-family: var(--ac-fonte-display); font-weight: 800; letter-spacing: -.02em; color: var(--ac-tinta-2); background: var(--ac-papel-fundo); } /* As iniciais também saem da escala do sistema, em vez de três valores escolhidos a olho (.7 / .9 / 1.2rem). */ .ac-avatar--sm.ac-avatar--iniciais { font-size: var(--ac-t-xs); } .ac-avatar--md.ac-avatar--iniciais { font-size: var(--ac-t-md); } .ac-avatar--lg.ac-avatar--iniciais { font-size: var(--ac-t-xl); } /* Escudo desenhado: o contorno preenche o círculo, sem borda dupla. */ .ac-avatar--escudo { border-color: transparent; background: var(--ac-papel-fundo); } .ac-avatar--escudo .ac-escudo-generico { width: 78%; height: 78%; } .ac-avatar--icone .ac-icone { width: 52%; height: 52%; stroke-width: 1.5; color: var(--ac-tinta-3); } /* ========================================================================== 22. CARD DE LISTAGEM ========================================================================== Um só, em jogadores, goleiros, técnicos, adversários, estádios e competições. Eram seis marcações com seis nomes de classe — e por isso seis aparências: uma com o nome sublinhado, outra não; uma com a foto grande, outra em miniatura. ========================================================================== */ .ac-grade-cards { display: grid; gap: var(--ac-e-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); align-items: stretch; } .ac-card-lista { display: flex; align-items: center; gap: var(--ac-e-3); padding: var(--ac-e-3); min-width: 0; border: 1px solid var(--ac-regua); border-radius: var(--ac-raio); background: var(--ac-papel-alto); color: var(--ac-tinta); text-decoration: none; transition: border-color var(--ac-transicao), box-shadow var(--ac-transicao); } .ac-card-lista:hover { border-color: var(--ac-rubro); box-shadow: var(--ac-sombra); color: var(--ac-tinta); } .ac-card-lista:focus-visible { border-color: var(--ac-rubro); } .ac-card-lista-texto { display: block; min-width: 0; flex: 1 1 auto; } .ac-card-lista-titulo { display: block; font-family: var(--ac-fonte-display); font-size: var(--ac-t-md); font-weight: 600; line-height: 1.25; color: var(--ac-tinta); overflow-wrap: anywhere; } .ac-card-lista:hover .ac-card-lista-titulo { color: var(--ac-rubro); } .ac-card-lista-sub, .ac-card-lista-extra { display: block; font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-tinta-2); margin-top: 2px; overflow-wrap: anywhere; } .ac-card-lista-extra { color: var(--ac-tinta-3); text-transform: none; letter-spacing: 0; } /* ========================================================================== 23. SEM SUBLINHADO ONDE NÃO É LEITURA ========================================================================== O sublinhado é do texto corrido, onde o link precisa se distinguir do parágrafo. Em card, em card de ranking, em barra de filtro e em célula de tabela ele só suja — e nas telas do site aparecia até nos rótulos secundários, o que fazia tudo parecer link. ========================================================================== */ .ac-card-lista, .ac-card-lista *, .ac-rankitem a, .ac-az-btn, .ac-botao, .ac-avatar, .ac-table td a, .ac-board-topo a, .ac-board-rodape a, .ac-dl a, .ac-numero a, .ac-marca { text-decoration: none; } .ac-rankitem a:hover, .ac-table td a:hover { color: var(--ac-rubro); } /* ========================================================================== 24. FILTRO A–Z ========================================================================== Um só, para as seis listagens. Havia quatro construtores diferentes, com espaçamento, tamanho e estado ativo distintos em cada página. ========================================================================== */ .ac-az-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-e-1); padding-bottom: var(--ac-e-3); margin-bottom: var(--ac-e-4); border-bottom: 1px solid var(--ac-regua); } .ac-az-rotulo { display: inline-flex; align-items: center; gap: var(--ac-e-1); font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 700; letter-spacing: var(--ac-ls-etiq); text-transform: uppercase; color: var(--ac-tinta-2); padding-right: var(--ac-e-3); margin-right: var(--ac-e-1); border-right: 1px solid var(--ac-regua); align-self: stretch; } .ac-az-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ac-e-1); min-width: 2rem; height: 2rem; padding-inline: var(--ac-e-2); font-family: var(--ac-fonte-display); font-size: var(--ac-t-md); font-weight: 600; line-height: 1; border: 1px solid var(--ac-regua); border-radius: var(--ac-raio-sm); background: var(--ac-papel-alto); color: var(--ac-tinta-2); cursor: pointer; transition: border-color var(--ac-transicao), color var(--ac-transicao), background var(--ac-transicao); } .ac-az-btn:hover { border-color: var(--ac-rubro); color: var(--ac-rubro); } .ac-az-btn.is-active, .ac-az-btn[aria-current="true"] { background: var(--ac-rubro); border-color: var(--ac-rubro); color: var(--ac-sobre-rubro); } .ac-az-btn--todos, .ac-az-btn--idolos { padding-inline: var(--ac-e-3); } @media (max-width: 34rem) { .ac-az-rotulo { border-right: 0; padding-right: 0; width: 100%; margin-bottom: var(--ac-e-1); } .ac-az-btn { min-width: 1.85rem; height: 1.85rem; font-size: var(--ac-t-sm); } } /* ========================================================================== 25. O ESPAÇO GRANDE DEPOIS DA BUSCA ========================================================================== Nas telas aparecia um vão enorme entre a barra de pesquisa e o conteúdo. A causa: o conteúdo da página traz blocos VAZIOS (um parágrafo ou um
sem nada dentro, deixado no editor) que continuam ocupando altura e margem. Elemento vazio não reserva espaço. ========================================================================== */ /* * Só FILHO DIRETO do wrapper de conteúdo — que é onde ficam os blocos vazios * deixados no editor. A versão anterior alcançava qualquer
vazio da * página, e escondia coisas legítimas: os dois espaçadores de coluna do * cabeçalho do ranking de goleiros (um grid de 6 colunas ficava com 4 células * e todos os rótulos passavam a apontar para a coluna errada) e os divs de * altura fixa que separam blocos na página do clube. */ .ac-site-content > p:empty, .ac-site-content > div:empty:not([class*="ac-"]):not([id]), .entry-content > p:empty, .entry-content > br, .ac-wrap > p:empty { display: none; } /* Um

que só tem   também é vazio para efeito de layout. */ /* E a distância em si fica menor: o conteúdo começa logo, não a uma tela dele. */ .ac-site-content { padding-top: var(--ac-e-5); } @media (max-width: 44rem) { .ac-site-content { padding-top: var(--ac-e-4); } } /* O primeiro card de uma página encosta na distância padrão, sem somar a própria margem por cima dela. */ .ac-site-content > .ac-wrap > .ac-card:first-child, .ac-site-content > .ac-wrap > .ac-painel:first-child, .ac-site-content > .ac-wrap > article:first-child { margin-top: 0; } /* Botão pequeno, para dentro de linha de tabela. */ .ac-botao--mini { padding: var(--ac-e-1) var(--ac-e-2); font-size: var(--ac-t-sm); gap: var(--ac-e-1); } /* Cabeçalho de tabela com ícone: o ícone alinha com o rótulo, um tom abaixo. */ .ac-table thead th { white-space: nowrap; } .ac-table thead th .ac-icone { margin-right: var(--ac-e-1); vertical-align: -.16em; } /* A estrela de jogo marcante herda a cor do destaque. */ .ac-toj-marcante { color: var(--ac-marcante); display: inline-flex; vertical-align: -.15em; } /* ========================================================================== 26. FILTROS DOS RANKINGS ========================================================================== Os filtros das páginas históricas tinham desenho próprio: raio de 10px, borda diferente, rótulo com opacidade em vez de cor, e o botão sem hover. Passam a usar o mesmo controle das outras telas. ========================================================================== */ .ac-hist-filtros { gap: var(--ac-e-3); margin: 0 0 var(--ac-e-5); padding-bottom: var(--ac-e-4); border-bottom: 1px solid var(--ac-regua); } .ac-hist-filtros .ac-field { gap: var(--ac-e-1); min-width: 10rem; } .ac-hist-filtros label { font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 600; letter-spacing: var(--ac-ls-etiq); text-transform: uppercase; color: var(--ac-tinta-2); opacity: 1; } .ac-hist-filtros select, .ac-hist-filtros input[type="number"], .ac-hist-filtros input[type="text"] { font-family: var(--ac-fonte-display); font-size: var(--ac-t-md); padding: var(--ac-e-1) var(--ac-e-3); border-radius: var(--ac-raio-sm); border: 1px solid var(--ac-regua-forte); background: var(--ac-papel-alto); color: var(--ac-tinta); line-height: 1.6; transition: border-color var(--ac-transicao), box-shadow var(--ac-transicao); } .ac-hist-filtros select:focus-visible, .ac-hist-filtros input:focus-visible { outline: none; border-color: var(--ac-rubro); box-shadow: 0 0 0 3px var(--ac-rubro-fraco); } .ac-hist-btn { display: inline-flex; align-items: center; gap: var(--ac-e-2); font-family: var(--ac-fonte-display); font-size: var(--ac-t-md); font-weight: 600; padding: var(--ac-e-2) var(--ac-e-4); border: 1px solid var(--ac-rubro); border-radius: var(--ac-raio-sm); background: var(--ac-rubro); color: var(--ac-sobre-rubro); cursor: pointer; transition: background var(--ac-transicao), border-color var(--ac-transicao); } .ac-hist-btn:hover { background: var(--ac-rubro-vivo); border-color: var(--ac-rubro-vivo); } /* O card das páginas históricas segue o raio do sistema, não um de 14px só dele — e o título vem do cabeçalho de página, não de um .ac-title solto. */ .ac-hist .ac-card { border-radius: var(--ac-raio); padding: var(--ac-e-4); } .ac-hist.ac-wrap { max-width: var(--ac-largura); padding-inline: clamp(var(--ac-e-4), 4vw, var(--ac-e-6)); } /* ========================================================================== 27. CONTROLE DE ORDENAÇÃO ========================================================================== Existia em Adversários com a classe .ac-adv-ordem — que nenhuma folha de estilo declarava. Os dois links saíam iguais e a ordenação vigente era invisível. Agora é o mesmo controle segmentado da barra A–Z: mesmo rótulo, mesma altura, mesmo estado ativo. ========================================================================== */ .ac-ordem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-e-1); margin-bottom: var(--ac-e-4); } .ac-ordem-rotulo { display: inline-flex; align-items: center; gap: var(--ac-e-1); font-family: var(--ac-fonte-etiq); font-size: var(--ac-t-xs); font-weight: 700; letter-spacing: var(--ac-ls-etiq); text-transform: uppercase; color: var(--ac-tinta-2); padding-right: var(--ac-e-3); margin-right: var(--ac-e-1); border-right: 1px solid var(--ac-regua); align-self: stretch; } .ac-ordem-rotulo .ac-icone { width: 1rem; height: 1rem; } .ac-ordem-btn { display: inline-flex; align-items: center; gap: var(--ac-e-2); height: 2rem; padding-inline: var(--ac-e-3); font-family: var(--ac-fonte-display); font-size: var(--ac-t-sm); font-weight: 600; line-height: 1; text-decoration: none; border: 1px solid var(--ac-regua); border-radius: var(--ac-raio-sm); background: var(--ac-papel-alto); color: var(--ac-tinta-2); transition: border-color var(--ac-transicao), color var(--ac-transicao), background var(--ac-transicao); } .ac-ordem-btn .ac-icone { width: 1rem; height: 1rem; } .ac-ordem-btn:hover, .ac-ordem-btn:focus-visible { border-color: var(--ac-regua-forte); color: var(--ac-tinta); } .ac-ordem-btn.is-active { background: var(--ac-rubro); border-color: var(--ac-rubro); color: var(--ac-sobre-rubro); } /* O estado vazio não é um card: quando ele cai dentro da grade (adversários, competições, técnicos imprimem dentro do

já aberto), ele precisa ocupar a linha inteira. Sem isto, num monitor largo a grade abre cinco colunas e a mensagem sai espremida em ~230px, encostada à esquerda, quebrando em cinco linhas — parecendo defeito em vez de resposta. */ .ac-grade-cards > .ac-vazio { grid-column: 1 / -1; } /* ========================================================================== 28. AS DUAS LISTAS DA FICHA VIRARAM UMA ========================================================================== O cabeçalho da ficha mostra duas listas encostadas uma na outra: os dados da pessoa ("NASCIMENTO … 03-08-1993") e as estatísticas dela ("Jogos: 6"). São a mesma coisa — rótulo à esquerda, valor à direita, filete entre as linhas — e saíam diferentes em tudo o que dá para sair: dados
, rótulo em versalete, valor à DIREITA, linha de 41px estatísticas