/* ========================================================================= Acessibilidade+ — estilos do widget e das classes de ajuste aplicadas ao da página. Tudo com prefixo a11yplus- para não colidir com o tema. Usa !important nas classes de ajuste porque o objetivo é sobrepor qualquer CSS do tema. ========================================================================= */ :root { --a11yplus-accent: #0f7a6b; } /* ---------- botões flutuantes ---------- */ #a11yplus-root { position: fixed; z-index: 2147483000; bottom: 20px; left: 20px; display: flex; flex-direction: column; gap: 8px; font-family: "Lexend", ui-sans-serif, system-ui, sans-serif; } #a11yplus-root[data-position="right"] { left: auto; right: 20px; } .a11yplus-fab { display: flex; align-items: center; gap: 8px; background: #12181a; color: #eef1ee; border: 1px solid #28312d; border-radius: 999px; padding: 10px 16px 10px 12px; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); transition: transform 0.15s ease, background 0.15s ease; } .a11yplus-fab:hover, .a11yplus-fab:focus-visible { background: #1b2422; transform: translateY(-1px); } .a11yplus-fab:focus-visible { outline: 2px solid var(--a11yplus-accent); outline-offset: 2px; } .a11yplus-fab.is-active { background: var(--a11yplus-accent); color: #06201b; border-color: var(--a11yplus-accent); } .a11yplus-fab .a11yplus-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a11yplus-accent); flex: none; } .a11yplus-fab.is-active .a11yplus-dot { background: #06201b; } /* ---------- painel principal ---------- */ .a11yplus-panel { position: fixed; z-index: 2147483001; bottom: 20px; left: 20px; width: min(380px, calc(100vw - 40px)); max-height: min(680px, calc(100vh - 40px)); display: flex; flex-direction: column; background: #12181a; color: #eef1ee; border: 1px solid #28312d; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); overflow: hidden; font-family: "Lexend", ui-sans-serif, system-ui, sans-serif; } #a11yplus-root[data-position="right"] ~ .a11yplus-panel, .a11yplus-panel[data-position="right"] { left: auto; right: 20px; } .a11yplus-panel[hidden] { display: none; } .a11yplus-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #22302b; flex: none; } .a11yplus-panel-header h2 { margin: 0; font-size: 15px; font-weight: 600; } .a11yplus-close { background: transparent; border: 1px solid #28312d; color: #eef1ee; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; } .a11yplus-close:hover { background: #1b2422; } .a11yplus-panel-body { overflow-y: auto; padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 16px; } .a11yplus-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #96a39c; margin-bottom: 6px; } .a11yplus-field select { width: 100%; background: #1a2220; color: #eef1ee; border: 1px solid #28312d; border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13px; } .a11yplus-group-title { font-size: 12px; font-weight: 600; color: #bdf0e2; margin: 4px 0 8px; } .a11yplus-chips { display: flex; flex-wrap: wrap; gap: 6px; } .a11yplus-chip { background: #1a2220; color: #eef1ee; border: 1px solid #28312d; border-radius: 8px; padding: 7px 11px; font-size: 12.5px; cursor: pointer; line-height: 1.2; } .a11yplus-chip:hover { border-color: var(--a11yplus-accent); } .a11yplus-chip:focus-visible { outline: 2px solid var(--a11yplus-accent); outline-offset: 2px; } .a11yplus-chip.is-active { background: var(--a11yplus-accent); color: #06201b; border-color: var(--a11yplus-accent); } .a11yplus-panel-footer { flex: none; padding: 12px 18px 16px; border-top: 1px solid #22302b; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .a11yplus-reset { background: transparent; border: 1px solid #28312d; color: #eef1ee; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; cursor: pointer; } .a11yplus-reset:hover { border-color: var(--a11yplus-accent); } .a11yplus-help-note { font-size: 11px; color: #6c776f; } /* ---------- subpainéis (dicionário / estrutura da página) ---------- */ .a11yplus-subpanel { background: #1a2220; border: 1px solid #28312d; border-radius: 10px; padding: 12px; max-height: 260px; overflow-y: auto; } .a11yplus-subpanel-search { width: 100%; background: #12181a; border: 1px solid #28312d; color: #eef1ee; border-radius: 8px; padding: 7px 9px; font-size: 12.5px; margin-bottom: 8px; } .a11yplus-subpanel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .a11yplus-subpanel li button { width: 100%; text-align: left; background: transparent; border: none; color: #eef1ee; padding: 6px 4px; font-size: 12.5px; cursor: pointer; border-radius: 6px; } .a11yplus-subpanel li button:hover { background: #22302b; } .a11yplus-subpanel .a11yplus-outline-h2 { padding-left: 14px; } .a11yplus-subpanel .a11yplus-outline-h3 { padding-left: 28px; } .a11yplus-subpanel .a11yplus-outline-h4, .a11yplus-subpanel .a11yplus-outline-h5, .a11yplus-subpanel .a11yplus-outline-h6 { padding-left: 40px; } .a11yplus-subpanel .a11yplus-def { font-size: 12px; color: #96a39c; margin: 2px 0 6px 4px; } /* ---------- popover de IA ---------- */ .a11yplus-popover { position: fixed; z-index: 2147483002; max-width: 320px; background: #12181a; color: #eef1ee; border: 1px solid var(--a11yplus-accent); border-radius: 12px; padding: 12px 14px; font-family: "Lexend", ui-sans-serif, system-ui, sans-serif; font-size: 13px; line-height: 1.5; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4); } .a11yplus-popover-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; } .a11yplus-popover-head strong { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #bdf0e2; } .a11yplus-popover-close { background: transparent; border: none; color: #96a39c; cursor: pointer; font-size: 14px; line-height: 1; } .a11yplus-popover-actions { margin-top: 8px; display: flex; gap: 8px; } .a11yplus-popover-actions button { background: transparent; border: 1px solid #28312d; color: #eef1ee; border-radius: 6px; padding: 5px 9px; font-size: 11.5px; cursor: pointer; } .a11yplus-popover-actions button:hover { border-color: var(--a11yplus-accent); } /* ---------- comando de voz ---------- */ .a11yplus-voice-console { position: fixed; z-index: 2147483001; bottom: 20px; right: 20px; width: min(340px, calc(100vw - 40px)); background: #12181a; color: #eef1ee; border: 1px solid var(--a11yplus-accent); border-radius: 14px; padding: 14px 16px; font-family: "Lexend", ui-sans-serif, system-ui, sans-serif; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); } .a11yplus-voice-console[hidden] { display: none; } .a11yplus-voice-console-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .a11yplus-voice-console-head strong { font-size: 13px; } .a11yplus-voice-status { font-size: 12px; color: #96a39c; min-height: 32px; background: #1a2220; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; } .a11yplus-voice-status.is-listening { color: #bdf0e2; } .a11yplus-voice-commands { font-size: 11px; color: #6c776f; line-height: 1.6; } /* ---------- leitura assistida: máscara e guia ---------- */ .a11yplus-mask-top, .a11yplus-mask-bottom { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.68); z-index: 2147482998; pointer-events: none; } .a11yplus-reading-guide { position: fixed; left: 0; right: 0; height: 3px; background: var(--a11yplus-accent); z-index: 2147482999; pointer-events: none; box-shadow: 0 0 10px rgba(15, 122, 107, 0.7); } /* ---------- lupa (ampliar com o cursor) ---------- */ .a11yplus-lens { position: fixed; width: 220px; height: 220px; border-radius: 50%; border: 3px solid var(--a11yplus-accent); overflow: hidden; z-index: 2147482997; pointer-events: none; background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } .a11yplus-lens-inner { position: absolute; transform-origin: 0 0; } /* ---------- legenda para imagens ---------- */ .a11yplus-img-caption { display: block; font-size: 12px; background: #12181a; color: #eef1ee; padding: 4px 8px; margin-top: -2px; } /* ---------- botão inline (widget Elementor) ---------- */ .a11yplus-inline-trigger { background: var(--a11yplus-accent); color: #06201b; border: none; border-radius: 8px; padding: 10px 16px; font-family: "Lexend", ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; } /* ========================================================================= Classes de ajuste aplicadas em . Ficam fora do container do widget de propósito — precisam alcançar a página inteira. ========================================================================= */ html.a11yplus-contrast-light body { background: #ffffff !important; color: #111111 !important; } html.a11yplus-contrast-light body * { background-color: transparent !important; color: inherit !important; } html.a11yplus-contrast-dark body, html.a11yplus-contrast-dark body * { background-color: #000000 !important; color: #ffffff !important; border-color: #444444 !important; } html.a11yplus-contrast-dark a { color: #7fd8c8 !important; } html.a11yplus-contrast-invert { filter: invert(1) hue-rotate(180deg); } html.a11yplus-contrast-invert img, html.a11yplus-contrast-invert video, html.a11yplus-contrast-invert picture, html.a11yplus-contrast-invert #a11yplus-root, html.a11yplus-contrast-invert .a11yplus-panel, html.a11yplus-contrast-invert .a11yplus-popover, html.a11yplus-contrast-invert .a11yplus-voice-console { filter: invert(1) hue-rotate(180deg); } html.a11yplus-saturate-high { filter: saturate(1.7); } html.a11yplus-saturate-low { filter: saturate(0.45); } html.a11yplus-saturate-mono { filter: grayscale(1); } html.a11yplus-deuteranopia { filter: url(#a11yplus-deuteranopia-filter); } html.a11yplus-font-dyslexic body, html.a11yplus-font-dyslexic body * { font-family: "Lexend", ui-sans-serif, system-ui, sans-serif !important; } html.a11yplus-big-cursor, html.a11yplus-big-cursor * { cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important; } html.a11yplus-pause-animations *, html.a11yplus-pause-animations *::before, html.a11yplus-pause-animations *::after { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } html.a11yplus-highlight-links a { outline: 2px solid var(--a11yplus-accent) !important; outline-offset: 2px !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; } html.a11yplus-highlight-titles h1, html.a11yplus-highlight-titles h2, html.a11yplus-highlight-titles h3, html.a11yplus-highlight-titles h4, html.a11yplus-highlight-titles h5, html.a11yplus-highlight-titles h6 { outline: 2px dashed var(--a11yplus-accent) !important; outline-offset: 3px !important; } html.a11yplus-big-buttons button, html.a11yplus-big-buttons input[type="submit"], html.a11yplus-big-buttons input[type="button"], html.a11yplus-big-buttons a.button, html.a11yplus-big-buttons .elementor-button { padding: 14px 22px !important; font-size: 1.08em !important; min-height: 44px !important; } html.a11yplus-readable-align body, html.a11yplus-readable-align p, html.a11yplus-readable-align li { text-align: left !important; } html.a11yplus-zoom { zoom: var(--a11yplus-zoom, 1); } html.a11yplus-spacing body, html.a11yplus-spacing body * { letter-spacing: var(--a11yplus-letter-spacing, 0.03em) !important; word-spacing: var(--a11yplus-word-spacing, 0.12em) !important; } html.a11yplus-line-height body, html.a11yplus-line-height body * { line-height: var(--a11yplus-line-height, 1.7) !important; } html.a11yplus-custom-colors body { background: var(--a11yplus-bg-color, #ffffff) !important; color: var(--a11yplus-text-color, #111111) !important; } html.a11yplus-custom-colors h1, html.a11yplus-custom-colors h2, html.a11yplus-custom-colors h3, html.a11yplus-custom-colors h4, html.a11yplus-custom-colors h5, html.a11yplus-custom-colors h6 { color: var(--a11yplus-title-color, #111111) !important; } @media (max-width: 480px) { .a11yplus-panel, .a11yplus-voice-console { left: 10px; right: 10px; width: auto; } #a11yplus-root { left: 10px; bottom: 10px; } #a11yplus-root[data-position="right"] { left: auto; right: 10px; } } @media (prefers-reduced-motion: reduce) { .a11yplus-fab, .a11yplus-chip { transition: none; } }