/* Botão flutuante do WhatsApp — §7.4, item 15. */ .boek-whatsapp-flutuante { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; /* abaixo da barra sticky (z-index:100) — nunca deveria colidir de verdade, já que o CSS abaixo desloca o botão pra cima nessas 3 telas; z-index menor é só uma segunda camada de segurança caso algum dia falhe. */ display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; /* #167c44, não o #25D366 do §7.4 original: o verde "ícone" do WhatsApp com o ícone branco por cima só bate 1,98:1 de contraste (achado real via Lighthouse/axe, Sprint 22) — mesma cor já corrigida em .btn--whatsapp (botoes.css). */ background-color: #167c44; box-shadow: 0 4px 16px rgba(15, 14, 26, 0.28); transition: transform var(--boek-transition), box-shadow var(--boek-transition); } .boek-whatsapp-flutuante:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(15, 14, 26, 0.32); } .boek-whatsapp-flutuante__icone { width: 28px; height: 28px; background-color: var(--boek-white); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20Zm4.4-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.6.1-.2.2-.6.8-.8 1-.1.2-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5.1-.1.2-.3.4-.4.1-.2.2-.3.2-.4.1-.2 0-.3 0-.5-.1-.1-.6-1.5-.8-2-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.2-.9.9-.9 2.2s1 2.6 1.1 2.7c.1.2 1.9 3 4.7 4.1.7.3 1.2.4 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1-.1-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20Zm4.4-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.6.1-.2.2-.6.8-.8 1-.1.2-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5.1-.1.2-.3.4-.4.1-.2.2-.3.2-.4.1-.2 0-.3 0-.5-.1-.1-.6-1.5-.8-2-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.2-.9.9-.9 2.2s1 2.6 1.1 2.7c.1.2 1.9 3 4.7 4.1.7.3 1.2.4 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1-.1-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; } /* Não sobrepor a barra sticky mobile (§7.4, item 15 — regra explícita). As 3 barras sticky (sticky-cta.css) só existem <900px, nas páginas de pacote/app/produto de leitura — e o WordPress já marca essas 3 telas sozinho com uma classe própria no (body_class() nativo: single-pacote_tv / single-app / single-produto_leitura), sem precisar de nenhum código extra pra "avisar" este componente. 6.5rem (104px) — a barra mais alta medida (pacote, com selo) tem ~93px; sobra ~11px de respiro entre os dois. */ @media (max-width: 899px) { body.single-pacote_tv .boek-whatsapp-flutuante, body.single-app .boek-whatsapp-flutuante, body.single-produto_leitura .boek-whatsapp-flutuante { bottom: 6.5rem; } }