/* Bureau A11y - Accessibility Styles * Version: 2.5.21 * Author: Bureau de Tecnologia Ltda. * * Dark Forest Luxury — mini-app design system * Google Font loaded via wp_enqueue_style() in bureau-a11y.php */ /* ========================================================================== CSS VARS — scoped to panel, trigger, back-to-top ========================================================================== */ #bureau-a11y-panel, #bureau-a11y-trigger, #bureau-a11y-back-to-top { --ba-forest: #091c10; --ba-surface: rgba(255,255,255,0.05); --ba-electric: #BDF839; --ba-electric-glow: rgba(189,248,57,0.12); --ba-text: #F0EDE1; --ba-muted: rgba(240,237,225,0.65); --ba-border: rgba(255,255,255,0.08); --ba-radius-card: 12px; --ba-radius-panel: 16px; } /* ========================================================================== FEATURE CLASSES: Aplicadas em via JS ========================================================================== */ /* Fonte disléxica */ @font-face { font-family: 'OpenDyslexic'; src: url('https://fonts.cdnfonts.com/s/19808/OpenDyslexic-Regular.woff') format('woff'); font-display: swap; } html.ba-dyslexic :is(body,p,span,li,h1,h2,h3,h4,h5,h6,a,button,input,textarea,label) { font-family: 'OpenDyslexic', sans-serif !important; } html.ba-text-spacing :is(p,li,h1,h2,h3,h4,h5,h6,span,a) { line-height: 1.7 !important; letter-spacing: 0.05em !important; word-spacing: 0.1em !important; } html.ba-hide-images :is(img,video,figure,picture,canvas) { visibility: hidden !important; } html.ba-hide-images *:not(#bureau-a11y-panel):not(#bureau-a11y-panel *):not(#bureau-a11y-trigger):not(#bureau-a11y-back-to-top) { background-image: none !important; } html.ba-stop-animations *, html.ba-stop-animations *::before, html.ba-stop-animations *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Página CLARA → inverter cores (padrão de extensões de dark mode) */ html.ba-dark-mode--invert body { filter: invert(1) hue-rotate(180deg); } html.ba-dark-mode--invert :is(img,video,canvas,svg:not(#bureau-a11y-color-filters svg)) { filter: invert(1) hue-rotate(180deg); } /* Página JÁ ESCURA → brilho suave */ html.ba-dark-mode--dim body { filter: brightness(1.2) contrast(1.1); } html.ba-high-contrast body { background: #000 !important; color: #fff !important; } html.ba-high-contrast a { color: #ffff00 !important; text-decoration: underline !important; } html.ba-high-contrast :is(button,input,select,textarea) { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } /* Apenas no body — painel/trigger em ficam sem filtro */ html.ba-grayscale body { filter: grayscale(100%); } html.ba-invert body { filter: invert(1) hue-rotate(180deg); } html.ba-invert :is(img,video,canvas,picture) { filter: invert(1) hue-rotate(180deg); } html.ba-cb-protanopia body { filter: url(#ba-filter-protanopia); } html.ba-cb-deuteranopia body { filter: url(#ba-filter-deuteranopia); } html.ba-cb-tritanopia body { filter: url(#ba-filter-tritanopia); } html.ba-highlight-links a { outline: 2px solid #BDF839 !important; outline-offset: 2px !important; background: rgba(189,248,57,0.18) !important; } html.ba-focus-guide :focus-visible { outline: 3px solid #0060df !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(0,96,223,0.25) !important; } /* ========================================================================== TRIGGER BUTTON ========================================================================== */ #bureau-a11y-trigger { position: fixed; right: 11px; top: 44vh; z-index: 9999999; width: 44px; height: 44px; border-radius: 12px; background: var(--ba-forest); border: 1px solid rgba(189,248,57,0.25); color: #F0EDE1; cursor: pointer; padding: 0.35rem; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.2s, transform 0.15s; -webkit-user-select: none; user-select: none; filter: none !important; /* jamais muda de cor — blindado contra dark mode, grayscale, invert, etc. */ } #bureau-a11y-trigger:hover { box-shadow: 0 0 0 1px #BDF839, 0 0 16px rgba(189,248,57,0.2); transform: scale(1.05); } #bureau-a11y-trigger:focus-visible { outline: 2px solid #BDF839; outline-offset: 3px; } #bureau-a11y-trigger svg { width: 100%; height: 100%; fill: #F0EDE1; } /* Badge elétrico CSS-only — indica feature ativa */ #bureau-a11y-trigger::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: #BDF839; border-radius: 50%; opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.3s; box-shadow: 0 0 8px rgba(189,248,57,0.6); } html:is(.ba-dyslexic,.ba-text-spacing,.ba-hide-images,.ba-stop-animations, .ba-dark-mode,.ba-high-contrast,.ba-grayscale,.ba-invert, .ba-cb-protanopia,.ba-cb-deuteranopia,.ba-cb-tritanopia, .ba-reading-ruler,.ba-highlight-links,.ba-focus-guide,.ba-magnifier) #bureau-a11y-trigger::after { opacity: 1; transform: scale(1); } /* Back to top */ #bureau-a11y-back-to-top { position: fixed; right: 11px; bottom: 58px; z-index: 9999999; width: 44px; height: 44px; border-radius: 12px; background: var(--ba-forest); border: 1px solid rgba(189,248,57,0.2); color: #F0EDE1; cursor: pointer; padding: 0.4rem; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.3); transition: opacity 0.3s, box-shadow 0.2s; -webkit-user-select: none; user-select: none; } #bureau-a11y-back-to-top.is-visible { opacity: 1; pointer-events: auto; } #bureau-a11y-back-to-top:hover { box-shadow: 0 0 0 1px #BDF839, 0 0 12px rgba(189,248,57,0.15); } #bureau-a11y-back-to-top:focus-visible { outline: 2px solid #BDF839; outline-offset: 3px; } #bureau-a11y-back-to-top svg { width: 70%; height: 70%; fill: #F0EDE1; } /* ========================================================================== PANEL ========================================================================== */ #bureau-a11y-panel { position: fixed; top: 44vh; right: 63px; /* fallback CSS: trigger(11px) + width(44px) + gap(8px) = 63px */ left: unset; color-scheme: only light; /* nunca herda dark mode do OS ou do site */ transform-origin: right center; width: 300px; height: min(580px, calc(100vh - 80px)); /* altura sempre fixa — scroll ativo no conteúdo */ overflow: hidden; background: var(--ba-forest); border-radius: var(--ba-radius-panel); border: 1px solid rgba(189,248,57,0.15); box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(189,248,57,0.06); z-index: 2147483647; display: flex; flex-direction: column; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; color: var(--ba-text); transition: opacity 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1), width 0.22s cubic-bezier(0.4,0,0.2,1); } #bureau-a11y-panel[aria-hidden="true"] { opacity: 0; transform: translateX(8px) scale(0.95); pointer-events: none; } #bureau-a11y-panel[aria-hidden="false"] { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; } /* Header */ .ba-panel__header { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: var(--ba-radius-panel) var(--ba-radius-panel) 0 0; display: flex; align-items: center; justify-content: space-between; cursor: grab; user-select: none; -webkit-user-select: none; flex-shrink: 0; } .ba-panel__header:active { cursor: grabbing; } .ba-panel__title { display: flex; align-items: center; gap: 0.5rem; color: var(--ba-text); font-weight: 600; font-size: 14px; } @keyframes ba-icon-pulse { 0%,100% { filter: drop-shadow(0 0 0px rgba(189,248,57,0)); } 50% { filter: drop-shadow(0 0 6px rgba(189,248,57,0.35)); } } .ba-panel__title svg { fill: var(--ba-text); flex-shrink: 0; } /* Pulse glow apenas para usuários sem preferência de movimento reduzido */ @media (prefers-reduced-motion: no-preference) { .ba-panel__title svg { animation: ba-icon-pulse 3s ease-in-out infinite; } } .ba-header-actions { display: flex; align-items: center; gap: 0.15rem; } #bureau-a11y-panel .ba-panel__close, #bureau-a11y-panel .ba-hints-btn { background: transparent; border: 0; color: var(--ba-muted); cursor: pointer; padding: 0.35rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; line-height: 1; min-width: 32px; min-height: 32px; flex-shrink: 0; font-family: inherit; text-transform: none; letter-spacing: normal; font-size: inherit; } .ba-panel__close:hover, .ba-hints-btn:hover { color: var(--ba-text); background: rgba(255,255,255,0.08); } /* Ativo: fundo verde suave + ponto indicador no canto */ .ba-hints-btn[aria-pressed="true"] { color: #BDF839; background: rgba(189,248,57,0.12); border-radius: 8px; position: relative; } .ba-hints-btn[aria-pressed="true"]::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; background: #BDF839; border-radius: 50%; } /* Inativo: levemente apagado (dicas ocultas) */ .ba-hints-btn[aria-pressed="false"] { opacity: 0.45; } .ba-hints-btn:focus-visible, .ba-panel__close:focus-visible { outline: 2px solid #BDF839; outline-offset: 3px; } /* ========================================================================== TAB BAR (JS-driven WAI-ARIA tablist) ========================================================================== */ .ba-tab-bar { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; } #bureau-a11y-panel .ba-tab-btn { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.65rem 0.25rem; cursor: pointer; color: var(--ba-muted); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border: 0; border-bottom: 3px solid transparent; background: transparent; font-family: inherit; transition: color 0.2s, border-color 0.2s, background 0.2s, opacity 0.2s; line-height: 1; flex: 1; opacity: 0.45; } .ba-tab-btn:hover { color: var(--ba-text); background: rgba(255,255,255,0.04); opacity: 0.75; } #bureau-a11y-panel .ba-tab-btn[aria-selected="true"] { color: #BDF839; border-bottom-color: transparent; background: rgba(0,0,0,0.22); box-shadow: inset 0 3px 6px rgba(0,0,0,0.45), inset 0 1px 2px rgba(0,0,0,0.3); opacity: 1; } .ba-tab-btn:focus-visible { outline: 2px solid #BDF839; outline-offset: -2px; } .ba-tab-icon { display: flex; align-items: center; justify-content: center; line-height: 1; } /* ========================================================================== TAB CONTENT + FEATURE GRID ========================================================================== */ .ba-tab-content { display: none; padding: 0.75rem; overflow-y: auto; min-height: 0; /* necessário para flex-shrink funcionar corretamente */ scrollbar-width: thin; scrollbar-color: rgba(189,248,57,0.2) transparent; } .ba-tab-content::-webkit-scrollbar { width: 3px; } .ba-tab-content::-webkit-scrollbar-track { background: transparent; } .ba-tab-content::-webkit-scrollbar-thumb { background: rgba(189,248,57,0.2); border-radius: 2px; } /* Mostrar conteúdo ativo (JS-driven) */ .ba-tab-content.is-active { display: block; flex: 1; /* empurra o footer sempre para o fundo do painel */ } .ba-tab-content:focus-visible { outline: 2px solid #BDF839; outline-offset: -4px; border-radius: var(--ba-radius-card); } @media (prefers-reduced-motion: no-preference) { .ba-tab-content.is-active { animation: ba-fade-in 0.18s ease; } } @keyframes ba-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* Grid 2×N */ .ba-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .ba-feature--full { grid-column: 1 / -1; } /* ========================================================================== TOGGLE CARDS ========================================================================== */ #bureau-a11y-panel .ba-toggle { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.8rem 0.5rem; min-height: 88px; background: var(--ba-surface); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--ba-radius-card); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; color: var(--ba-muted); text-align: center; cursor: pointer; position: relative; text-transform: none; letter-spacing: normal; transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s, box-shadow 0.18s; will-change: transform; } .ba-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: var(--ba-text); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .ba-toggle:active { transform: scale(0.97); } .ba-toggle__icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; line-height: 1; font-size: 1.5rem; } /* Alto contraste — ícone maior para representar melhor o nível de contraste */ #ba-toggle-highContrast .ba-toggle__icon { width: 34px; height: 34px; } /* Libras — ícone 56px para destaque visual */ #ba-toggle-libras .ba-toggle__icon { width: 56px; height: 56px; } .ba-toggle__icon svg { width: 100%; height: 100%; } .ba-toggle__label { font-size: 11px; line-height: 1.2; } /* Estado ativo — Concertação-inspired: color blocking limpo, sem glows */ .ba-toggle[aria-pressed="true"], .ba-toggle.ba-toggle--active { background: #0B4334; border-color: rgba(189,248,57,0.5); color: var(--ba-text); box-shadow: none; text-shadow: none; transform: none; } .ba-toggle[aria-pressed="true"]::after, .ba-toggle.ba-toggle--active::after { content: ''; position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; background: #BDF839; border-radius: 50%; } .ba-toggle[aria-pressed="true"] .ba-toggle__icon, .ba-toggle.ba-toggle--active .ba-toggle__icon { filter: none; opacity: 1; } /* Tooltip fixo (position: fixed via JS — não clipado pelo panel overflow) */ #ba-tooltip-tip { position: fixed; background: rgba(0,0,0,0.88); color: #fff; padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 12px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 400; line-height: 1.4; pointer-events: none; z-index: 2147483647; max-width: 260px; opacity: 0; transition: opacity 0.15s; white-space: normal; } #ba-tooltip-tip.is-visible { opacity: 1; } /* TTS: feedback quando nenhum texto selecionado */ @keyframes ba-warn-pulse { 0%,100% { border-color: rgba(255,200,0,0.15); } 50% { border-color: rgba(255,200,0,0.6); box-shadow: 0 0 0 3px rgba(255,200,0,0.15); } } .ba-toggle--warn { animation: ba-warn-pulse 0.8s ease; } .ba-toggle:focus-visible { outline: 2px solid #BDF839; outline-offset: 3px; } /* ========================================================================== ZOOM STEPPER (full-width card) ========================================================================== */ .ba-zoom-wrapper { background: var(--ba-surface); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--ba-radius-card); padding: 0.65rem 0.75rem; } .ba-zoom-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ba-muted); margin-bottom: 0.4rem; display: block; } .ba-zoom-stepper { display: flex; align-items: center; gap: 0.5rem; } .ba-zoom-btn { width: 32px; height: 28px; border-radius: 7px; background: rgba(189,248,57,0.15); border: 1px solid rgba(189,248,57,0.3); color: #BDF839; font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; } .ba-zoom-btn:hover { background: rgba(189,248,57,0.25); } .ba-zoom-btn:focus-visible { outline: 2px solid #BDF839; outline-offset: 2px; } .ba-zoom-btn:active { transform: scale(0.95); } .ba-zoom-value { flex: 1; text-align: center; font-weight: 700; font-size: 14px; color: var(--ba-text); background: rgba(255,255,255,0.05); border-radius: 6px; padding: 0.25rem; } /* ========================================================================== TTS CONTROLS (full-width) ========================================================================== */ .ba-tts-wrapper { background: var(--ba-surface); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--ba-radius-card); padding: 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; } #bureau-a11y-panel .ba-tts-hover-btn { width: 100%; flex-direction: column; min-height: 80px; padding: 0.75rem 0.5rem; gap: 0.45rem; justify-content: center; align-items: center; text-align: center; } .ba-tts-attribution { display: flex; justify-content: flex-end; align-items: center; padding-top: 0.25rem; border-top: 1px solid rgba(255,255,255,0.06); } .ba-tts-rv-logo { height: 14px; width: auto; opacity: 0.35; filter: brightness(0) invert(1); transition: opacity 0.2s; } .ba-tts-wrapper:hover .ba-tts-rv-logo { opacity: 0.55; } .ba-tts-options { display: flex; flex-direction: column; gap: 0.4rem; } .ba-tts-options-row { display: flex; align-items: center; gap: 0.5rem; } .ba-label { font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ba-muted) !important; white-space: nowrap; flex-shrink: 0; } /* Radio pills para voz */ .ba-pill-group { display: flex; gap: 0.35rem; flex: 1; } .ba-pill-group input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .ba-pill-group input[type="radio"]:focus-visible + .ba-pill { outline: 2px solid #BDF839; outline-offset: 2px; } /* Especificidade (0,2,0) > Elementor kit "label" (0,1,1) */ .ba-pill-group .ba-pill { flex: 1; padding: 0.3rem 0.4rem; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--ba-muted); font-size: 10px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; text-align: center; cursor: pointer; transition: all 0.15s; line-height: 1.2; word-spacing: 0.35em; } .ba-pill-group .ba-pill:hover { background: rgba(255,255,255,0.1); color: var(--ba-text); } .ba-pill-group input[type="radio"]:checked + .ba-pill { background: rgba(189,248,57,0.15); border-color: rgba(189,248,57,0.3); color: #BDF839; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(189,248,57,0.2); } .ba-slider { flex: 1; accent-color: #BDF839; cursor: pointer; } /* ========================================================================== DALTONISMO GROUP (3 pills) ========================================================================== */ .ba-cb-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .ba-cb-group .ba-toggle { min-height: 52px; font-size: 10px; padding: 0.5rem 0.3rem; } .ba-cb-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ba-muted); margin-bottom: 0.35rem; display: block; grid-column: 1 / -1; } /* ========================================================================== FOOTER ========================================================================== */ .ba-panel__footer { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; } .ba-footer-logo { display: flex; align-items: center; text-decoration: none; opacity: 0.7; transition: opacity 0.2s; } .ba-footer-logo:hover { opacity: 1; } .ba-footer-logo:focus-visible { outline: 2px solid #BDF839; outline-offset: 3px; border-radius: 4px; } .ba-footer-version { font-size: 9px; font-weight: 500; color: rgba(240,237,225,0.35); letter-spacing: 0.04em; margin-left: 0.4rem; align-self: center; white-space: nowrap; } .ba-reset-btn { background: transparent; border: 0; color: rgba(240,237,225,0.28); cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 4px; transition: color 0.15s; display: flex; align-items: center; gap: 5px; line-height: 1; } .ba-reset-btn:hover { color: #BDF839; } .ba-reset-label { font-size: 10px; font-weight: 500; letter-spacing: 0.03em; color: inherit; } /* ========================================================================== RESET CONFIRMATION MODAL ========================================================================== */ .ba-modal { position: absolute; inset: 0; background: rgba(9, 28, 16, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2rem 1.5rem; z-index: 20; border-radius: inherit; } .ba-modal[hidden] { display: none !important; } .ba-modal__msg { font-size: 13px !important; line-height: 1.6 !important; font-weight: 500 !important; color: var(--ba-text) !important; text-align: center; margin: 0; } .ba-modal__actions { display: flex; gap: 0.625rem; width: 100%; } .ba-btn-ghost, .ba-btn-confirm { flex: 1; padding: 0.55rem 0.5rem; border-radius: 8px; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer; border: none; transition: opacity 0.15s; } .ba-btn-ghost { background: rgba(240, 237, 225, 0.1) !important; color: var(--ba-text) !important; } .ba-btn-ghost:hover { background: rgba(240, 237, 225, 0.18) !important; } .ba-btn-confirm { background: var(--ba-electric, #BDF839) !important; color: var(--ba-forest, #091c10) !important; } .ba-btn-confirm:hover { opacity: 0.85; } /* ========================================================================== READING RULER ========================================================================== */ #bureau-a11y-ruler { position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: transparent; border-top: 2px solid rgba(189,248,57,0.6); border-bottom: 2px solid rgba(189,248,57,0.6); pointer-events: none; z-index: 9999997; display: none; will-change: transform; /* Máscara: escurece tudo fora da área de leitura */ box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.62); } html.ba-reading-ruler #bureau-a11y-ruler { display: block; } /* ========================================================================== MAGNIFIER: zoom de página inteira seguindo cursor ========================================================================== */ /* ========================================================================== VLIBRAS WIDGET: override posição/tamanho para alinhar com o trigger a11y ========================================================================== */ /* Container VLibras [vw]: ancorado na ESQUERDA para nunca sobrepor o painel A11y (direita). bottom:88px ancora pelo rodapé — painel cresce para cima ao ativar .active. margin:0 previne o margin-top:-285px que o SDK injeta na classe .active. */ #bureau-vlibras-container { position: fixed !important; bottom: 11px !important; left: 11px !important; right: auto !important; z-index: 9998 !important; transform: none !important; margin: 0 !important; } /* Botão VLibras: invisível — controlado exclusivamente pelo toggle dentro do painel A11y. */ [vw-access-button] { position: fixed !important; left: -9999px !important; right: auto !important; bottom: 11px !important; top: auto !important; width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border-radius: 12px !important; background: var(--ba-forest, #091c10) !important; border: 1px solid rgba(189,248,57,0.25) !important; overflow: hidden !important; cursor: pointer !important; /* z-index propositalmente ausente: o painel [vw-plugin-wrapper] vem depois no DOM e deve ficar acima do botão no contexto de stacking do container */ display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; transition: box-shadow 0.2s !important; } [vw-access-button]:hover { box-shadow: 0 0 0 1px #BDF839, 0 0 16px rgba(189,248,57,0.2) !important; } /* Ícone das mãos (access_icon.svg): preencher o container 44×44 */ [vw-access-button] img.vp-access-button { width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: contain !important; } /* Popup de personagens: oculto — só relevante no hover expandido */ [vw-access-button] img.vp-pop-up { display: none !important; } /* Nosso SVG de mãos — preenche o botão */ [vw-access-button] svg.a11y-button--SVG-hands { width: 100% !important; height: 100% !important; } /* ========================================================================== VLIBRAS — ISOLAMENTO DE CSS DO SITE Remove interferências do reset do tema (hello-elementor) e do Elementor kit nos elementos internos do widget VLibras. O VLibras injeta seus próprios estilos via