/** * Glossário — destaque da expressão e balão de explicação. * * Autossuficiente de propósito: o mesmo arquivo serve as páginas do Joomla e * as standalone de gestao/, que não carregam o CSS do tema. Por isso a cor * mora aqui, e não no custom.css do child (é a exceção explicada em * .claude/ui-componentes.md §3 — não há regra do tema para estender numa * página que não carrega o tema). * * Cores: o sublinhado usa #4e00ff (a cor oficial decidida em 2026-08-02). * * O balão era o roxo cheio (#4100ff) com texto branco. Em 2026-08-03 o Max * pediu para aliviar: um bloco daquele tamanho, chapado no roxo, pesava demais * no meio da leitura. Agora é o MESMO roxo diluído a 12% sobre branco * (#E8E0FF) com o texto na cor de leitura do site (#3A3F5C) — continua sendo a * cor da marca, mas em papel de fundo, não de bloco sólido. * Ver .claude/ui-componentes.md §3. */ .arb-glossario { /* text-decoration em vez de border-bottom: acompanha a quebra de linha da expressão, e "contratos internacionais" quebra no meio o tempo todo. ----------------------------------------------------------------------- A ORDEM das três linhas abaixo é o que faz o sublinhado aparecer em TODO navegador, e não é enfeite: `text-decoration: underline dashed #4e00ff` é a forma abreviada de nível 3 (linha + estilo + cor). Navegador que só entende o nível 1 considera o valor inteiro inválido e **descarta a declaração toda** — resultado: a expressão fica sem sublinhado nenhum. Era o que o cliente via: no hover ainda aparecia o fundo lilás (regra separada, essa ele entende) e o balão, então parecia "só sublinha quando passa o mouse". Por isso: 1. `underline` puro — reconhecido desde sempre; garante A linha. 2. `-webkit-...` — Safari até 12.0 só aceita a forma completa com prefixo (macOS Mojave e anteriores, iOS 12). 3. a forma completa — navegador moderno chega até aqui e pinta o tracejado roxo. Quem não entende 2 ou 3 simplesmente ignora e fica com o sublinhado sólido do passo 1: menos bonito, mas visível — que é o ponto. */ text-decoration: underline; -webkit-text-decoration: underline dashed #4e00ff; text-decoration: underline dashed #4e00ff; /* Mesma lógica nos longhands, para o Safari antigo pegar cor e estilo mesmo quando a abreviada acima não passar. */ -webkit-text-decoration-color: #4e00ff; text-decoration-color: #4e00ff; -webkit-text-decoration-style: dashed; text-decoration-style: dashed; /* Suporte recente (Chrome 87+, Safari 12.1+, Firefox 70+). Onde faltar, o navegador ignora só estas duas e o sublinhado continua lá, colado na linha de base e com a espessura padrão. */ text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: help; transition: background-color .15s ease, text-decoration-color .15s ease; } .arb-glossario:hover, .arb-glossario:focus-visible { -webkit-text-decoration-style: solid; text-decoration-style: solid; background-color: rgba(78, 0, 255, .07); outline: none; } .arb-glossario:focus-visible { box-shadow: 0 0 0 2px rgba(78, 0, 255, .35); border-radius: 2px; } /* ------------------------------------------------------------------ balão * * CSS puro, sem JavaScript. A primeira versão montava o balão por script — * posicionando com getBoundingClientRect e ouvindo mouseover no document — e * não abria na página real. Em vez de caçar o motivo às cegas, o balão virou * um `::after` da própria expressão: não há evento para falhar, não há * elemento solto no body para outra camada cobrir, e o mesmo arquivo serve as * páginas do Joomla e as standalone. * * É o mesmo padrão do rótulo em hover já usado no site (ui-componentes §6). */ /* * A âncora do balão é o BLOCO (o parágrafo), não a palavra — a classe * `.arb-glossario-bloco` é posta pelo JS no ancestral de bloco de cada * expressão marcada. * * Motivo: preso à palavra, o balão nascia com a largura de uma caixinha e um * texto de mil caracteres virava uma coluna altíssima que saía pelo rodapé da * tela. Ancorado no parágrafo, ele nasce com a largura da coluna de texto e o * mesmo conteúdo cabe em poucas linhas — e nunca vaza pela lateral, porque a * coluna já está dentro da página. */ .arb-glossario-bloco { position: relative; } .arb-glossario::after { content: attr(data-arb-texto); position: absolute; /* * Os dois eixos vêm de lugares diferentes, de propósito: * * horizontal — `left: 0` usa o bloco âncora (o parágrafo), então o balão * nasce alinhado à coluna de texto e com a largura dela; * vertical — SEM `top`. Com top:auto a caixa fica na "posição estática", * isto é, na linha onde a palavra está. A margem desce o * balão para logo abaixo dessa linha. * * É o que dá o resultado pedido: colado embaixo do pontilhado, e largo. * Com `top: 100%` do parágrafo ele ia parar lá no fim do parágrafo. */ left: 0; margin-top: 2em; z-index: 1010; /* Largura da coluna de texto; num bloco estreito (item de lista, célula de tabela) cresce até caber, sem passar de 90% da tela. */ width: 100%; min-width: min(560px, 90vw); max-width: 90vw; padding: 12px 16px; color: #3A3F5C; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-align: left; text-transform: none; white-space: normal; /* Roxo da marca (#4100ff) a 7% sobre branco — o MESMO #F4F0FF do hover dos itens de resultado de busca. Sem borda de propósito: o bico é um triângulo de bordas CSS e não teria contorno, o que deixaria uma emenda visível na ponta. Num tom tão claro quem separa o balão da página é só a sombra. Esta é a cor CHEIA, que fica de base: o bloco @supports lá embaixo troca por uma versão translúcida onde o navegador souber desfocar o fundo. */ background: #F4F0FF !important; border-radius: 16px; /* * A sombra já foi roxo puro (rgba(65,0,255,.18)) e lia como brilho neon em * volta do balão — cor saturada, espalhada em 30px. Agora é um violeta * acinzentado, em duas camadas com papéis distintos: * * 6px — quase colada, faz o papel do contorno que o balão não tem; * 32px — aberta e fraca, é o que dá a sensação de flutuar. * * Separadas, cada uma pode ser fraca: é o empilhamento que define a borda * sem precisar de saturação. */ box-shadow: 0 2px 6px rgba(62, 56, 100, .07), 0 14px 32px rgba(62, 56, 100, .12); /* Escondido sem `display:none` para poder haver transição, e sem receber o mouse — o balão nunca deve engolir o hover da própria expressão. */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; } /* * Bico ligando o balão ao pontilhado. * * Sem `left` nem `top`: os dois eixos ficam na posição estática, ou seja, * exatamente onde a palavra termina. É isso que amarra o balão à expressão — * a caixa é larga e começa na margem do texto, e sem o bico não daria para * saber de qual palavra ela saiu. */ .arb-glossario::before { content: ""; position: absolute; margin-top: calc(2em - 11px); margin-left: 2px; z-index: 1011; /* O bico fica na cor CHEIA mesmo quando o balão está translúcido: um triângulo de bordas não tem como desfocar o próprio fundo, e translúcido sem desfoque deixaria as letras de baixo aparecendo. Com 6px, a diferença de tom para o balão não se nota. */ border: 6px solid transparent; border-bottom-color: #F4F0FF; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; } /* ------------------------------------------------------- balão translúcido * * O balão fica um pouco transparente, para não bloquear de vez o parágrafo que * está sendo lido. Transparência pura, porém, deixaria o texto de baixo * atravessando o de cima — ilegível justamente onde a leitura importa. Por isso * vem sempre acompanhada do desfoque do fundo: o que passa é a cor da página, * não as letras dela. * * Daí o @supports: onde não houver backdrop-filter (Firefox antigo, WebView de * app), o balão continua com a cor cheia declarada acima — opaco, mas legível. * Nunca translúcido sem desfoque. */ @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .arb-glossario::after { background: rgba(244, 240, 255, .72) !important; /* Com o roxo tão diluído, é o desfoque que segura a legibilidade: ele apaga as letras de baixo e deixa passar só a claridade da página. Por isso o blur subiu junto com a transparência. */ -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); } } /* * `:focus` junto com `:hover` cobre dois casos de uma vez: quem navega por * teclado (a expressão é focável) e o toque no celular, que não tem hover — * tocar dá foco, tocar fora tira. */ .arb-glossario:hover::after, .arb-glossario:focus::after, .arb-glossario:hover::before, .arb-glossario:focus::before { opacity: 1; visibility: visible; } /* Impressão: o tracejado e o balão não fazem sentido no papel. */ @media print { .arb-glossario { text-decoration: none; } .arb-glossario::after, .arb-glossario::before { display: none; } }