/* ========================================================================== IGEPREV Petrolina — Acessibilidade Barra A11y, modos de contraste, modo leitura, escala de fonte, destaque de links, sobreposições de VLibras. Princípio: WCAG 2.2 AA + eMAG. ========================================================================== */ /* ========================================================================== BARRA DE ACESSIBILIDADE Fica no topo, sempre visível, contraste alto. ========================================================================== */ .ige-a11y { position: relative; z-index: 1000; background: var(--ige-primary-dark); color: #fff; font-size: var(--ige-fs-sm); } .ige-a11y__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ige-sp-2); max-width: var(--ige-container-max); margin: 0 auto; padding: 6px var(--ige-container-pad); min-height: 44px; } .ige-a11y__group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .ige-a11y__toggle { display: none; } .ige-a11y__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.35); border-radius: var(--ige-radius-sm); font-family: var(--ige-font-base); font-size: 0.875rem; font-weight: var(--ige-fw-semi); cursor: pointer; transition: background var(--ige-transition), border-color var(--ige-transition), color var(--ige-transition); } .ige-a11y__btn:hover, .ige-a11y__btn:focus-visible { background: #fff; color: var(--ige-primary-dark); border-color: #fff; } .ige-a11y__btn[aria-pressed="true"] { background: var(--ige-support); color: var(--ige-text-main); border-color: var(--ige-support); } .ige-a11y__btn .ige-a11y__key { font-size: 0.75rem; opacity: 0.8; margin-left: 6px; padding: 1px 6px; background: rgba(255,255,255,0.12); border-radius: 3px; } .ige-a11y__btn:hover .ige-a11y__key { background: rgba(0,0,0,0.08); } @media (max-width: 720px) { .ige-a11y__inner { display: block; min-height: auto; padding: 6px var(--ige-container-pad); } .ige-a11y__toggle { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); border-radius: var(--ige-radius-sm); font-family: var(--ige-font-base); font-size: 0.94rem; font-weight: var(--ige-fw-bold); cursor: pointer; } .ige-a11y__toggle:hover, .ige-a11y__toggle:focus-visible { background: #fff; color: var(--ige-primary-dark); border-color: #fff; } .ige-a11y__toggle svg { flex: 0 0 auto; width: 22px; height: 22px; } .ige-a11y__toggle-icon { width: 9px; height: 9px; margin-left: auto; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--ige-transition); } .ige-a11y__toggle[aria-expanded="true"] .ige-a11y__toggle-icon { transform: translateY(2px) rotate(225deg); } .ige-a11y__group { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 6px; gap: 6px; } .ige-a11y__group.is-open { display: grid; } .ige-a11y__btn span:not(.ige-a11y__key) { display: inline-flex; } .ige-a11y__btn .ige-sr-only { position: static !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; } .ige-a11y__btn .ige-a11y__key { display: none; } .ige-a11y__btn { width: 100%; min-width: 0; min-height: 44px; padding: 7px 9px; justify-content: center; text-align: center; line-height: 1.2; white-space: normal; } } /* ========================================================================== ESCALA DE FONTE (via data-attribute no ) ========================================================================== */ html[data-ige-font="lg"] { font-size: 112.5%; } /* 18px → ~20.25px base */ html[data-ige-font="xl"] { font-size: 125%; } /* 18px → ~22.5px */ html[data-ige-font="xxl"] { font-size: 137.5%; } /* 18px → ~24.75px */ /* ========================================================================== ALTO CONTRASTE — preto e branco ========================================================================== */ html[data-ige-contrast="high"] { background: #000 !important; color-scheme: dark; --ige-primary: #fff; --ige-primary-dark: #fff; --ige-primary-light: #fff; --ige-secondary: #fff; --ige-secondary-dark: #fff; --ige-accent: #fff; --ige-accent-dark: #fff; --ige-support: #fff; --ige-text-main: #fff; --ige-text-muted: #fff; --ige-bg-page: #000; --ige-bg-light: #000; --ige-bg-soft: #000; --ige-border-soft: #fff; } html[data-ige-contrast="high"] body { background: #000 !important; color: #fff !important; } html[data-ige-contrast="high"] body * { border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; } html[data-ige-contrast="high"] body *::before, html[data-ige-contrast="high"] body *::after { background-image: none !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; } html[data-ige-contrast="high"] .ige-header::before { background: #fff !important; } html[data-ige-contrast="high"] body :where( div, section, article, aside, main, header, footer, nav, figure, figcaption, blockquote, pre, code, mark, ul, ol, li, span, strong, small, time, address, dl, dt, dd, form, label, table, thead, tbody, tfoot, tr, th, td, details, summary ) { background-color: #000 !important; background-image: none !important; color: #fff !important; } html[data-ige-contrast="high"] a, html[data-ige-contrast="high"] a:visited { color: #fff !important; background-color: #000 !important; background-image: none !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; } html[data-ige-contrast="high"] h1, html[data-ige-contrast="high"] h2, html[data-ige-contrast="high"] h3, html[data-ige-contrast="high"] h4, html[data-ige-contrast="high"] h5, html[data-ige-contrast="high"] h6, html[data-ige-contrast="high"] p, html[data-ige-contrast="high"] li, html[data-ige-contrast="high"] span, html[data-ige-contrast="high"] strong, html[data-ige-contrast="high"] small, html[data-ige-contrast="high"] time, html[data-ige-contrast="high"] address { color: #fff !important; } html[data-ige-contrast="high"] input, html[data-ige-contrast="high"] select, html[data-ige-contrast="high"] textarea { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; caret-color: #fff !important; } html[data-ige-contrast="high"] input::placeholder, html[data-ige-contrast="high"] textarea::placeholder { color: #fff !important; opacity: 1; } html[data-ige-contrast="high"] .ige-btn, html[data-ige-contrast="high"] .ige-btn:visited, html[data-ige-contrast="high"] button, html[data-ige-contrast="high"] input[type="button"], html[data-ige-contrast="high"] input[type="submit"], html[data-ige-contrast="high"] input[type="reset"], html[data-ige-contrast="high"] [role="button"], html[data-ige-contrast="high"] [role="tab"] { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; text-decoration: underline !important; } html[data-ige-contrast="high"] :is( .ige-btn, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], [role="tab"] ) * { color: #fff !important; background: transparent !important; border-color: currentColor !important; } html[data-ige-contrast="high"] :is( .ige-btn, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], [role="tab"] )[aria-pressed="true"], html[data-ige-contrast="high"] [role="tab"][aria-selected="true"], html[data-ige-contrast="high"] .current-menu-item > a, html[data-ige-contrast="high"] .current_page_item > a { background: #fff !important; color: #000 !important; border-color: #fff !important; } html[data-ige-contrast="high"] :is( .ige-btn, button, [role="button"], [role="tab"] )[aria-pressed="true"] *, html[data-ige-contrast="high"] [role="tab"][aria-selected="true"] *, html[data-ige-contrast="high"] .current-menu-item > a *, html[data-ige-contrast="high"] .current_page_item > a * { color: #000 !important; } html[data-ige-contrast="high"] .ige-btn:hover, html[data-ige-contrast="high"] .ige-btn:focus-visible, html[data-ige-contrast="high"] button:hover, html[data-ige-contrast="high"] button:focus-visible, html[data-ige-contrast="high"] [role="button"]:hover, html[data-ige-contrast="high"] [role="button"]:focus-visible { background: #fff !important; color: #000 !important; border-color: #fff !important; } html[data-ige-contrast="high"] button:disabled, html[data-ige-contrast="high"] input:disabled { background: #000 !important; color: #fff !important; border-color: #fff !important; border-style: dashed !important; text-decoration: none !important; opacity: 0.72; cursor: not-allowed; } html[data-ige-contrast="high"] button:disabled * { color: #fff !important; } html[data-ige-contrast="high"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 4px solid #fff !important; outline-offset: 4px !important; } html[data-ige-contrast="high"] .joinchat__button { background: #000 var(--joinchat-ico) 50% / 60% no-repeat !important; border: 3px solid #fff !important; } html[data-ige-contrast="high"] [vw-access-button] { background-color: #000 !important; border: 3px solid #fff !important; filter: grayscale(100%) contrast(1.35) !important; } html[data-ige-contrast="high"] :where(img, picture, video, canvas, iframe, svg) { filter: grayscale(100%) contrast(1.15) !important; } html[data-ige-contrast="high"] hr { border-color: #fff !important; } html[data-ige-contrast="high"] ::selection { background: #fff; color: #000; } /* * Camada final de normalização. * A especificidade elevada impede que cores de componentes, plugins ou * personalizações do painel reapareçam depois do modo ser restaurado. */ html[data-ige-contrast="high"]:root:root body, html[data-ige-contrast="high"]:root:root body * { background-color: #000 !important; background-image: none !important; border-color: #fff !important; box-shadow: none !important; color: #fff !important; text-shadow: none !important; } html[data-ige-contrast="high"]:root:root body *::before, html[data-ige-contrast="high"]:root:root body *::after { background-color: #000 !important; background-image: none !important; border-color: #fff !important; box-shadow: none !important; color: #fff !important; text-shadow: none !important; } html[data-ige-contrast="high"]:root:root body :is( input, select, textarea, option, .ige-btn, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], [role="tab"] ) { background: #000 !important; border: 2px solid #fff !important; color: #fff !important; } html[data-ige-contrast="high"]:root:root body :is( .ige-btn, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], [role="tab"] )[aria-pressed="true"], html[data-ige-contrast="high"]:root:root body [role="tab"][aria-selected="true"], html[data-ige-contrast="high"]:root:root body .current-menu-item > a, html[data-ige-contrast="high"]:root:root body .current_page_item > a { background: #fff !important; border-color: #fff !important; color: #000 !important; } html[data-ige-contrast="high"]:root:root body :is( .ige-btn, button, [role="button"], [role="tab"] )[aria-pressed="true"] *, html[data-ige-contrast="high"]:root:root body [role="tab"][aria-selected="true"] *, html[data-ige-contrast="high"]:root:root body .current-menu-item > a *, html[data-ige-contrast="high"]:root:root body .current_page_item > a * { background: transparent !important; color: #000 !important; } html[data-ige-contrast="high"]:root:root body .ige-btn:hover, html[data-ige-contrast="high"]:root:root body .ige-btn:focus-visible, html[data-ige-contrast="high"]:root:root body button:hover, html[data-ige-contrast="high"]:root:root body button:focus-visible, html[data-ige-contrast="high"]:root:root body [role="button"]:hover, html[data-ige-contrast="high"]:root:root body [role="button"]:focus-visible { background: #fff !important; border-color: #fff !important; color: #000 !important; } html[data-ige-contrast="high"]:root:root body :is( .ige-btn:hover, .ige-btn:focus-visible, button:hover, button:focus-visible, [role="button"]:hover, [role="button"]:focus-visible ) * { background: transparent !important; color: #000 !important; } html[data-ige-contrast="high"]:root:root body :where(img, picture, video, canvas, iframe, svg) { filter: grayscale(100%) contrast(1.15) !important; } html[data-ige-contrast="high"]:root:root body .ige-header::before { background: #fff !important; } html[data-ige-contrast="high"]:root:root body .joinchat__button.joinchat__button[role="button"] { background-color: #000 !important; background-image: var(--joinchat-ico) !important; background-position: 50% !important; background-repeat: no-repeat !important; background-size: 60% !important; border: 3px solid #fff !important; position: relative !important; } html[data-ige-contrast="high"]:root:root body .joinchat__button.joinchat__button[role="button"]::before { -webkit-mask: var(--joinchat-ico) 50% / contain no-repeat !important; background: #fff !important; content: "" !important; display: block !important; inset: 18% !important; mask: var(--joinchat-ico) 50% / contain no-repeat !important; position: absolute !important; } html[data-ige-contrast="high"]:root:root body [vw-access-button] { background: #000 !important; border: 3px solid #fff !important; } @media (forced-colors: active) { .ige-a11y__btn, .ige-btn, button, input, select, textarea { border: 2px solid ButtonText; forced-color-adjust: auto; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid Highlight !important; } } @media print { .ige-a11y { display: none !important; } } /* ========================================================================== MODO LEITURA — esconde distrações, foco em texto ========================================================================== */ html[data-ige-reading="on"] { background: #fdf8ef; } html[data-ige-reading="on"] body { background: #fdf8ef; color: #1a1a1a; } html[data-ige-reading="on"] .ige-card__media, html[data-ige-reading="on"] .ige-service-card__icon, html[data-ige-reading="on"] aside, html[data-ige-reading="on"] .ige-novelties, html[data-ige-reading="on"] [class*="related"], html[data-ige-reading="on"] [class*="advert"] { display: none !important; } html[data-ige-reading="on"] main, html[data-ige-reading="on"] article, html[data-ige-reading="on"] .entry-content, html[data-ige-reading="on"] .ige-container { max-width: 720px !important; margin-inline: auto !important; background: #fdf8ef !important; } html[data-ige-reading="on"] p, html[data-ige-reading="on"] li { font-size: 1.25rem !important; line-height: 1.85 !important; } /* ========================================================================== DESTACAR LINKS — sublinhado forte + fundo amarelo ========================================================================== */ html[data-ige-links="highlight"] a:not(.ige-btn):not(.skip-link) { background: var(--ige-support) !important; color: var(--ige-text-main) !important; text-decoration: underline !important; text-decoration-thickness: 3px !important; padding: 0 4px; border-radius: 3px; } /* ========================================================================== VLIBRAS — posicionamento (não conflita com WhatsApp flutuante) ========================================================================== */ [vw] { z-index: 9998 !important; } [vw-access-button] { right: 20px !important; } @media (max-width: 600px) { [vw].enabled { inset: auto 16px 96px auto !important; transform: none !important; } [vw].enabled [vw-access-button] { position: absolute !important; inset: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; transform: none !important; } } /* ========================================================================== MENU MOBILE acessível — grande, fácil de fechar (estilo institucional) ========================================================================== */ .ige-mobile-toggle { display: none; min-width: 48px; min-height: 48px; gap: 8px; padding: 0 14px; background: var(--ige-primary); color: #fff; border: none; border-radius: var(--ige-radius-md); font-size: 1rem; font-weight: var(--ige-fw-bold); cursor: pointer; align-items: center; justify-content: center; } .ige-mobile-toggle.is-open { background: var(--ige-secondary-dark); } .ige-mobile-toggle__text { display: inline-flex; } @media (max-width: 960px) { .ige-mobile-toggle { display: inline-flex; } } @media (max-width: 380px) { .ige-mobile-toggle__text { display: none; } .ige-mobile-toggle { padding: 0; width: 48px; } }