/* ============================================================= Tema Copa do Mundo (opcional) Ativado pela classe .tema-copa no elemento . Toda a lógica de ligar/desligar está em js/tema-copa.js. Arquivo isolado: para desativar o recurso, basta remover as duas linhas de include no layout (link do css + script do js). ============================================================= */ :root { --copa-amarelo: #FEDD00; /* amarelo bandeira */ --copa-amarelo-2: #FFC400; /* amarelo (degradê) */ --copa-verde: #009739; /* verde bandeira */ } /* Necessário para o banner "VAI BRASIL!" se posicionar sobre a navbar */ .navbar-custom { position: relative; } /* Navbar fica amarela */ html.tema-copa .navbar-custom { background: linear-gradient(135deg, var(--copa-amarelo), var(--copa-amarelo-2)); } /* ---- Banner "bandeira tremulando" (aparece ao ligar o tema) ---- Estrutura: .copa-banner (container) > ::before (faixa que ondula) + .copa-banner-txt (texto que pulsa) */ .copa-banner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 1050; overflow: hidden; animation: copaFadeIn 0.3s ease-out; } /* faixa verde-amarela que ondula como bandeira ao vento */ .copa-banner::before { content: ''; position: absolute; top: -25%; left: -15%; width: 130%; height: 150%; background: linear-gradient(100deg, #00913f 0%, #00913f 25%, #ffd200 40%, #ffd200 50%, #00913f 65%, #00913f 100%); background-size: 220% 100%; z-index: 0; /* cores correndo (vento) + ondulação (tremulando) */ animation: copaFlagFlow 1.1s linear infinite, copaFlagWave 1.5s ease-in-out infinite; } /* texto por cima, pulsando levemente */ .copa-banner-txt { position: relative; z-index: 1; color: #fff; font-weight: 800; font-size: 1.25rem; letter-spacing: 2px; white-space: nowrap; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); animation: copaTextPulse 0.9s ease-in-out infinite; } .copa-banner.saindo { animation: copaFadeOut 0.5s ease forwards; } @keyframes copaFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes copaFadeOut { from { opacity: 1; } to { opacity: 0; } } /* cores da faixa correndo lateralmente */ @keyframes copaFlagFlow { from { background-position: 0 0; } to { background-position: -220% 0; } } /* ondulação da bandeira (skew + leve esticar vertical) */ @keyframes copaFlagWave { 0% { transform: skewY(0deg) scaleY(1); } 25% { transform: skewY(-2deg) scaleY(1.04); } 50% { transform: skewY(0deg) scaleY(1); } 75% { transform: skewY(2deg) scaleY(1.04); } 100% { transform: skewY(0deg) scaleY(1); } } /* pulsar suave do texto */ @keyframes copaTextPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* Texto e ícones da navbar ficam verdes (o badge vermelho de comunicados é deixado de fora de propósito) */ html.tema-copa .navbar-custom .navbar-brand, html.tema-copa .navbar-custom .navbar-brand span, html.tema-copa .navbar-custom .nav-link, html.tema-copa .navbar-custom .nav-link i { color: var(--copa-verde) !important; } /* ---- A esfera (botão de ligar/desligar) = bandeira do Brasil ---- */ .btn-tema-copa { position: relative; width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; overflow: hidden; /* caminho relativo a este css: css/ -> images/layout/ */ background: #009639 url('../images/layout/bandeira.png') center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); cursor: pointer; line-height: 1; display: inline-block; vertical-align: middle; transition: transform 0.15s ease, box-shadow 0.2s ease; } .btn-tema-copa:hover { transform: scale(1.1); } /* Quando o tema está ativo, um anel amarelo indica que está ligado */ html.tema-copa .btn-tema-copa { box-shadow: 0 0 0 2px var(--copa-amarelo), 0 0 6px 1px rgba(254, 221, 0, 0.7); } /* ---- Balãozinho (tooltip) do botão da bandeira ---- Preso no
  • .tema-copa-wrap (o botão tem overflow:hidden e cortaria). O texto vem do atributo data-tooltip, setado pelo js. */ .tema-copa-wrap { position: relative; } /* o balão em si */ .tema-copa-wrap::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(-4px); background: var(--copa-verde); color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 1; white-space: nowrap; padding: 6px 10px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; z-index: 1100; transition: opacity 0.15s ease, transform 0.15s ease; } /* setinha do balão apontando pra cima (pro botão) */ .tema-copa-wrap::before { content: ''; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%) translateY(-4px); border: 6px solid transparent; border-bottom-color: var(--copa-verde); opacity: 0; pointer-events: none; z-index: 1100; transition: opacity 0.15s ease, transform 0.15s ease; } /* aparece no hover do mouse */ .tema-copa-wrap:hover::after, .tema-copa-wrap:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); } /* também no foco por teclado (Tab), mas NÃO no clique do mouse: :focus-visible não dispara em clique, então o balão não fica "grudado". Bloco separado de propósito: se um navegador antigo não entender :has(:focus-visible), só este bloco é ignorado e o hover continua valendo. */ .tema-copa-wrap:has(:focus-visible)::after, .tema-copa-wrap:has(:focus-visible)::before { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- Confete verde e amarelo (ao ligar o tema) ---- */ .copa-confete-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* não atrapalha cliques */ overflow: hidden; z-index: 2000; } .copa-confete { position: absolute; top: -20px; border-radius: 1px; opacity: 0.95; animation-name: copaConfeteCai; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes copaConfeteCai { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0.9; } }