/** * Lançador que agrupa os recursos de acessibilidade flutuantes (VLibras e iCom) * num único bloco, com painel de fundo. * * Os dois widgets são filhos diretos do com position:fixed e coordenadas * próprias. Em vez de movê-los no DOM - o que quebraria o painel do VLibras, que * depende da sua árvore - eles continuam onde estão e são reposicionados por * estas regras, empilhados acima do botão do lançador. */ :root { --ra-borda: 16px; /* distância das bordas da tela */ --ra-gap: 12px; /* espaço entre os botões empilhados */ --ra-pad: 12px; /* respiro entre o painel e os botões */ --ra-lancador: 52px; /* recalculados em JS a partir do tamanho real */ --ra-larg: 180px; --ra-icom: 55px; --ra-vlibras: 40px; } /* ------------------------------------------------------ painel de fundo --- */ /* Reúne o lançador e os dois widgets num mesmo escopo visual. */ .ra-fundo { position: fixed; z-index: 2147483644; /* atrás do VLibras (…645) e do lançador (…646) */ right: calc(var(--ra-borda) - var(--ra-pad)); bottom: calc(var(--ra-borda) - var(--ra-pad)); width: calc(var(--ra-larg) + var(--ra-pad) * 2); height: calc(var(--ra-pad) * 2 + var(--ra-lancador) + var(--ra-gap) + var(--ra-icom) + var(--ra-gap) + var(--ra-vlibras)); background: #f3ecdd; border: 2px solid #1b2a5e; border-radius: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: opacity .18s ease, transform .18s ease; pointer-events: none; /* o painel é só moldura; os cliques vão aos botões */ } /* Fechado o painel some: sobra apenas o botão do lançador. */ html[data-ra="fechado"] .ra-fundo { opacity: 0; transform: translateY(10px); } /* ---------------------------------------------------------- o lançador --- */ .ra-lancador { position: fixed; right: var(--ra-borda); bottom: var(--ra-borda); z-index: 2147483646; /* acima do VLibras, que usa 2147483645 */ display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 18px; font-family: inherit; font-size: 16px; font-weight: 700; color: #ffffff; background: #1b2a5e; border: 2px solid #ffffff; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); cursor: pointer; } .ra-lancador:hover { background: #131d40; } .ra-lancador:focus-visible { outline: 4px solid #a8822a; outline-offset: 3px; } .ra-lancador svg { flex: 0 0 auto; } /* O X substitui o ícone quando aberto, sinalizando que o botão agora fecha. */ .ra-lancador .ra-abrir { display: block; } .ra-lancador .ra-fechar { display: none; } .ra-lancador[aria-expanded="true"] .ra-abrir { display: none; } .ra-lancador[aria-expanded="true"] .ra-fechar { display: block; } /* --------------------------------------------- os dois widgets agrupados --- */ /* Só valem quando o JS marcou o html; sem JS os widgets ficam onde estavam. */ html[data-ra] .icom-btn { top: auto !important; left: auto !important; right: var(--ra-borda) !important; bottom: calc(var(--ra-borda) + var(--ra-lancador) + var(--ra-gap)) !important; /* O iCom usa z-index 9999, abaixo do painel; sem isto ele fica escondido atrás do fundo. */ z-index: 2147483645 !important; } html[data-ra] [vw] { top: auto !important; left: auto !important; right: calc(var(--ra-borda) + 5px) !important; bottom: calc(var(--ra-borda) + var(--ra-lancador) + var(--ra-gap) + var(--ra-icom) + var(--ra-gap)) !important; /* O plugin aplica translateY(-30px) e margin-bottom:10px por conta própria, o que somava 40px ao empilhamento. */ transform: none !important; margin: 0 !important; } html[data-ra] .icom-btn, html[data-ra] [vw] { transition: opacity .18s ease, transform .18s ease; } /* Fechado: visibility (e não display) mantém o VLibras montado, e já tira os dois do fluxo de interação. */ html[data-ra="fechado"] .icom-btn, html[data-ra="fechado"] [vw] { visibility: hidden !important; opacity: 0 !important; transform: translateY(10px) !important; pointer-events: none !important; } @media (prefers-reduced-motion: reduce) { .ra-fundo, html[data-ra] .icom-btn, html[data-ra] [vw] { transition: none; transform: none; } html[data-ra="fechado"] .ra-fundo { transform: none; } } @media (max-width: 480px) { :root { --ra-borda: 12px; --ra-pad: 10px; } .ra-lancador { font-size: 15px; padding: 11px 15px; } }