/** * CRASP Acessibilidade — controles em botões circulares (bolinhas). * Zoom: font-size em % no escala todo conteúdo em rem (ex.: Tailwind). */ .crasp-accessibility-toolbar .crasp-a11y-icon { color: currentColor; display: block; width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .crasp-accessibility-toolbar .crasp-a11y-circle-btn { box-sizing: border-box; width: 1.75rem; height: 1.75rem; min-width: 1.75rem; flex-shrink: 0; padding: 0; margin: 0; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; font-size: 0.625rem; letter-spacing: -0.03em; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background-color: color-mix(in srgb, currentColor 14%, transparent); color: inherit; transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } @media (min-width: 640px) { .crasp-accessibility-toolbar .crasp-a11y-circle-btn { width: 1.875rem; height: 1.875rem; min-width: 1.875rem; font-size: 0.6875rem; letter-spacing: -0.02em; } .crasp-accessibility-toolbar .crasp-a11y-icon { width: 1rem; height: 1rem; } } .crasp-accessibility-toolbar .crasp-a11y-circle-btn:hover:not(:disabled) { opacity: 0.92; background-color: color-mix(in srgb, currentColor 22%, transparent); border-color: color-mix(in srgb, currentColor 50%, transparent); } .crasp-accessibility-toolbar .crasp-a11y-circle-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .crasp-accessibility-toolbar .crasp-a11y-circle-btn:disabled { cursor: not-allowed; } /* Botão "A" = tamanho normal (100%) */ .crasp-accessibility-toolbar .crasp-a11y-btn-reset.crasp-a11y-reset--active { box-shadow: inset 0 0 0 2px currentColor; background-color: color-mix(in srgb, currentColor 20%, transparent); } /* Alto contraste: classe em */ html.crasp-high-contrast { color-scheme: dark; } html.crasp-high-contrast body { background-color: #000 !important; color: #fff !important; } html.crasp-high-contrast a { color: #ff0 !important; text-decoration: underline; } html.crasp-high-contrast a:visited { color: #ffea00 !important; } html.crasp-high-contrast button, html.crasp-high-contrast input, html.crasp-high-contrast select, html.crasp-high-contrast textarea { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.crasp-high-contrast .bg-blue-900, html.crasp-high-contrast .bg-blue-800, html.crasp-high-contrast .bg-white, html.crasp-high-contrast .bg-yellow-500, html.crasp-high-contrast .bg-yellow-400, html.crasp-high-contrast .bg-blue-100 { background-color: #000 !important; } html.crasp-high-contrast .text-blue-100, html.crasp-high-contrast .text-blue-900, html.crasp-high-contrast .text-black, html.crasp-high-contrast .text-white { color: #fff !important; } /* Cinzas e neutros (Tailwind) → branco (:not(a) mantém links com a regra amarela de ) */ html.crasp-high-contrast [class*="text-gray-"]:not(a), html.crasp-high-contrast [class*="text-slate-"]:not(a), html.crasp-high-contrast [class*="text-neutral-"]:not(a), html.crasp-high-contrast [class*="text-zinc-"]:not(a), html.crasp-high-contrast [class*="text-stone-"]:not(a) { color: #fff !important; } /* Tons de azul em texto (exceto âncoras, tratadas à parte) */ html.crasp-high-contrast [class*="text-blue-"]:not(a) { color: #fff !important; } /* Títulos comuns sem classe de cor explícita herdam do body; reforço */ html.crasp-high-contrast h1, html.crasp-high-contrast h2, html.crasp-high-contrast h3, html.crasp-high-contrast h4, html.crasp-high-contrast h5, html.crasp-high-contrast h6 { color: #fff !important; } /* SVG / ícones com stroke cinza */ html.crasp-high-contrast [class*="stroke-gray-"], html.crasp-high-contrast [class*="stroke-slate-"] { stroke: #fff !important; } html.crasp-high-contrast ::placeholder { color: #ccc !important; opacity: 1 !important; } html.crasp-high-contrast .border-blue-800, html.crasp-high-contrast .border-b { border-color: #fff !important; } html.crasp-high-contrast .hover\:bg-yellow-400:hover, html.crasp-high-contrast .hover\:bg-blue-100:hover { background-color: #1a1a1a !important; } html.crasp-high-contrast .shadow-sm, html.crasp-high-contrast .shadow-md { box-shadow: 0 0 0 1px #fff !important; } html.crasp-high-contrast img, html.crasp-high-contrast video { filter: grayscale(100%) contrast(1.05); } html.crasp-high-contrast .crasp-accessibility-toolbar, html.crasp-high-contrast .crasp-topbar { background-color: #000 !important; color: #ff0 !important; border-color: #fff !important; } html.crasp-high-contrast .crasp-header { background-color: #000 !important; color: #fff !important; } html.crasp-high-contrast .crasp-accessibility-toolbar .crasp-a11y-icon, html.crasp-high-contrast .crasp-accessibility-toolbar .crasp-a11y-btn-font-plus, html.crasp-high-contrast .crasp-accessibility-toolbar .crasp-a11y-btn-font-minus, html.crasp-high-contrast .crasp-accessibility-toolbar .crasp-a11y-btn-reset, html.crasp-high-contrast .crasp-accessibility-toolbar .crasp-a11y-label { color: #ff0 !important; } html.crasp-high-contrast .crasp-accessibility-toolbar .crasp-a11y-circle-btn { border-color: #ff0 !important; background-color: rgba(255, 255, 0, 0.12) !important; } /* ========== Zoom da fonte > 100%: header compacto + empilhamento (CRASP) ========== */ .crasp-header .crasp-header-inner { isolation: isolate; } /* Busca só-ícone no desktop: oculto no tamanho normal */ .crasp-header .crasp-header-search-icon-desktop { display: none !important; } @media (min-width: 1024px) { /* Menu e busca acima do bloco do logo (evita cliques “atrás” da imagem) */ .crasp-header .crasp-header-logo-link { z-index: 1; } .crasp-header .crasp-desktop-nav, .crasp-header .crasp-header-search-form, .crasp-header .crasp-header-search-icon-desktop { z-index: 5; } .crasp-header .nav-dropdown { z-index: 50; } html.crasp-a11y-zoom-compact .crasp-header .crasp-logo-img { max-height: min(2rem, 10vw) !important; max-width: min(9rem, 32vw) !important; } html.crasp-a11y-zoom-compact .crasp-header .crasp-header-search-form { display: none !important; } html.crasp-a11y-zoom-compact .crasp-header .crasp-header-search-icon-desktop { display: inline-flex !important; } html.crasp-a11y-zoom-compact .crasp-header .crasp-desktop-nav { column-gap: 0.25rem; } html.crasp-a11y-zoom-compact .crasp-header .nav-item-trigger { padding-left: 0.45rem; padding-right: 0.45rem; padding-top: 0.35rem; padding-bottom: 0.35rem; } }