/* --------------------------------------------------------------------------- Menu de idiomas -- a UNICA folha compartilhada pelas duas caras do site. Ela e carregada tanto pelas paginas-cartao (que vem depois de estilo.css, paleta ciano) quanto pelo index-v2.php (paleta coral, sem estilo.css). Para servir as duas sem reescrever nenhuma, toda cor sai de var(--x, reserva): onde a variavel existe o menu adota a paleta da pagina, onde nao existe cai na reserva neutra. Nao acrescente cor fixa aqui. Marcacao montada por idioma_menu(), em idiomas.php. E

puro: abre, fecha e anda no teclado sem uma linha de JavaScript. --------------------------------------------------------------------------- */ .idioma { position: relative; display: inline-block; font-family: var(--mono, ui-monospace, "SF Mono", Consolas, monospace); font-size: 13px; } /* Variante das paginas-cartao: nao ha topo onde encaixar, entao o menu fica preso no canto da tela. O delas tem overflow:hidden, mas position fixed nao depende de rolagem. */ .idioma--fixa { position: fixed; top: 16px; right: 16px; z-index: 50; } .idioma__atual { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; color: var(--muted, #8f9cb5); background: transparent; border: 1px solid var(--capilar, rgba(255, 255, 255, 0.14)); border-radius: 8px; cursor: pointer; user-select: none; list-style: none; transition: color 0.18s, border-color 0.18s; } /* Tira o triangulo padrao do

nos dois motores. */ .idioma__atual::-webkit-details-marker { display: none; } .idioma__atual::marker { content: ""; } .idioma__atual:hover, .idioma[open] .idioma__atual { color: var(--texto, #eef3ff); border-color: var(--acento, #35e0ff); } .idioma__globo { flex-shrink: 0; opacity: 0.85; } .idioma__lista { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 232px; max-height: min(70vh, 392px); margin: 0; padding: 6px; overflow-y: auto; list-style: none; background: var(--alto, #10141e); border: 1px solid var(--capilar-forte, rgba(255, 255, 255, 0.16)); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } .idioma__item { display: block; padding: 8px 12px; color: var(--muted, #8f9cb5); border-radius: 6px; text-decoration: none; white-space: nowrap; transition: color 0.14s, background 0.14s; } .idioma__item:hover { color: var(--texto, #eef3ff); background: rgba(255, 255, 255, 0.06); } .idioma__item--atual { color: var(--acento, #35e0ff); } .idioma__atual:focus-visible, .idioma__item:focus-visible { outline: 2px solid var(--acento, #35e0ff); outline-offset: 2px; } /* No celular o rotulo longo ("English (United States)") empurra o topo; fica so o globo, e a lista abre igual. */ @media (max-width: 560px) { .idioma__atual span { display: none; } .idioma__atual { padding: 7px 9px; } .idioma--fixa { top: 10px; right: 10px; } } @media (prefers-reduced-motion: reduce) { .idioma__atual, .idioma__item { transition: none; } }