/* A foto do candidato: moldura, tratamento, placeholder e crédito (WP-20). Fatia do desembaralha-prototipo-v20.html — o slot em paisagem do v17 morreu aqui, e a RN-F15 é quem o matou. */ /* ============ A ESCOLHA B × D ============ Duas estratégias sobreviveram à comparação do v19 e as duas estão implementadas. A decisão entre elas é de produto, tomada com gente olhando o v20 — não no código, e não por quem estiver escrevendo CSS às 23h. B (limpa, padrão) foto menor, sem tratamento nenhum D (santinho) foto maior com duotone e retícula de meio-tom Trocar de estratégia é `document.body.classList.toggle('foto-santinho')`. A FLAG É GLOBAL, e isso não é detalhe de implementação. Ela mora no `` justamente para ser impossível aplicar tratamento gráfico a um subconjunto de candidatos reais (RN-F18): editar a imagem de algumas pessoas identificadas e não de outras é posicionamento editorial disfarçado de estética. Nunca mova este seletor para a carta. */ :root { /* Estratégia B. A largura é percentual da carta, então o pior caso é a carta grande (300 px). A 30% isso dá ~90 px CSS, e a conta que importa é a ampliação da fonte (RN-F16): largura CSS × DPR ÷ largura da foto. Fechando contra a MENOR dimensão que o TSE publica — e metade dos presidenciáveis de 2026 veio nela —, 30% fica dentro do alvo de 1,7× em tela 2× e dentro do teto de 2,6× em tela 3×. O v19 orçava 107 px para a B, mas media só contra a dimensão maior; contra a menor, 107 px estoura o teto. Daí a humildade extra. */ --foto-largura-na-carta: 30%; } /* Estratégia D. Foto maior, e o borrado vira linguagem: o tratamento uniformiza foto boa, foto ruim e as duas dimensões de origem na mesma estética de impresso de campanha. ATENÇÃO, e isto precisa estar na mesa quando a decisão for tomada: 46% da carta grande passa do teto de 2,6× em tela 3× quando a foto vem na dimensão menor. É o preço conhecido da D — `auditarNitidez` avisa no console toda vez que acontece. A B não tem esse preço. */ body.foto-santinho { --foto-largura-na-carta: 46%; } /* ============ MOLDURA ============ */ .portrait-frame { background: white; border: 2px solid var(--ink); width: var(--foto-largura-na-carta); flex-shrink: 0; /* A PROPORÇÃO do enquadramento (RN-F15). É constante de design, não dimensão de foto: as duas dimensões que o TSE publica compartilham esta mesma razão, então uma moldura só resolve as duas — muda a nitidez, não o enquadramento. Recortar retrato em faixa de paisagem, como fazia o slot 16:9 do v17, é o que a RN-F15 proíbe. */ aspect-ratio: 161 / 225; overflow: hidden; position: relative; } .portrait-frame .foto, .portrait-frame svg { width: 100%; height: 100%; display: block; } .portrait-frame .foto { object-fit: cover; object-position: center 25%; } .portrait-frame .svg-fallback { display: none; width: 100%; height: 100%; } /* O placeholder ocupa a moldura inteira e não deforma: é o mesmo arquivo para todo candidato sem foto (RN-F20), e o `slice` do SVG cuida do resto. */ .portrait-frame .foto-silhueta { object-fit: cover; } /* ============ CRÉDITO ============ Obrigação da licença CC-BY, não escolha de design (RN-F21). Fica sobre a foto, em posição absoluta, para não somar altura à carta — o jogo é trancado em 100dvh e não rola. Só aparece na foto do TSE: personagem fictício não leva crédito de terceiro. */ .foto-credito { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; background: rgba(26, 14, 14, 0.72); color: var(--paper); font-size: 0.36rem; line-height: 1.5; letter-spacing: 0.2px; text-align: center; text-transform: lowercase; pointer-events: none; } /* ============ TRATAMENTO "SANTINHO" (estratégia D) ============ Duotone por filtro + retícula de meio-tom por gradiente. Custa um filtro CSS e zero pipeline: nenhuma imagem é reprocessada, nenhum pixel é inventado. */ body.foto-santinho .portrait-frame .foto { filter: grayscale(1) contrast(1.18) brightness(1.07); } body.foto-santinho .portrait-frame::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--red-rosa); mix-blend-mode: multiply; pointer-events: none; } body.foto-santinho .portrait-frame::after { content: ""; position: absolute; inset: 0; z-index: 3; mix-blend-mode: overlay; background-image: radial-gradient(rgba(0,0,0,0.62) 1px, transparent 1.35px); background-size: 3.5px 3.5px; pointer-events: none; } /* ============ DOSSIÊ ============ 72 px CSS de crop quadrado (RN-F17). O enquadramento sobe em relação ao da carta porque o quadrado corta mais: pega o rosto, não o peito do paletó. */ .dossier-photo .foto { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 12%; } .dossier-photo .svg-fallback { display: none; width: 100%; height: 100%; } /* O crédito do dossiê é texto na coluna de identidade, não sobreposição: ali sobra espaço e a foto é pequena demais para carregar legenda. */ .dossier-credito { font-size: 0.55rem; color: var(--ink-soft); margin-top: 2px; } /* A folha da pagina de creditos saiu daqui: a tela virou o Sobre e ganhou css/sobre.css, escopado sob #sobre. */