/* ============================================================================ gs-breadcrumb.css — trilha de navegacao O PROBLEMA QUE ISTO RESOLVE Nas paginas de projeto e de orcamento do /portfolio e no /monitoria/termos.html a subida EXISTIA, mas partida em dois controles sem relacao visual — a marca da gs-menubar de um lado e um item de nav com a seta DIGITADA dentro do rotulo ("← Portfolio") do outro. E o que a marca significa mudava de pagina para pagina: nas do /portfolio ela leva para a raiz do site, na do /monitoria leva para /monitoria. Nao havia como saber onde se estava a partir do que a pagina mostrava. ESCOPO, medido e nao presumido 36 paginas do site tem profundidade de URL >= 2 (29 por profundidade de diretorio). A maioria nao precisa de trilha: as 18 ferramentas do /hub sobem por controle proprio na sidebar. Mas esse controle NAO e' uniforme, e isso fica registrado aqui porque e' trabalho pendente e nao conclusao: 15 dizem "Todas as Ferramentas" com .menu-item, o compressOS e o corOS dizem so "Ferramentas" com .sb-link, e o paranOS nao tem sidebar nenhuma — sobe por uma pilula .hub-link rotulada "← gustavOS Hub", com a mesma seta digitada que esta entrega removeu de cinco barras. Tres vocabularios para o mesmo destino. POR QUE NAO CITA TOKEN DE COR Estas paginas nao compartilham vocabulario de variaveis: as do /portfolio definem --t1, --line, --bg0, --maxw, --pad; a do /monitoria define --text-primary, --border-subtle. Um seletor compartilhado que citasse um dos dois conjuntos ficaria sem cor no outro, entao a cor vem de `currentColor`. O anel de foco tambem NAO e' definido aqui: cada pagina ja tem o seu (`:focus-visible{outline:2px solid var(--brand-400)}` nas do /portfolio), e sobrescrever com currentColor deixava um anel branco no meio de uma pagina de anel roxo. POR QUE A TRILHA RESERVA A PROPRIA FOLGA DO TOPO A gs-menubar e' position:fixed com ~83px de altura. A primeira tentativa colocou a trilha DENTRO do container de conteudo, apostando que a folga de topo da pagina ja bastava. Nao bastava: nas 4 do /portfolio essa folga e' `clamp(46px,9vh,86px)` — medida em vh contra uma barra em px. Uma auditoria mediu 320x568 e os tres itens da trilha devolviam a propria barra no elementFromPoint: links invisiveis e nao clicaveis. Ate' em 1400x900, o teto da clamp, sobrava 2px de sobreposicao. Agora a trilha vive ANTES do
, reserva a folga da barra ela mesma, e nao depende de folga de pagina nenhuma. Isso tambem tirou a trilha de dentro do
, onde o skip link depositava a pessoa dentro de um landmark de navegacao. O alinhamento usa os tokens da pagina com fallback: --maxw e --pad existem nas do /portfolio (920px e clamp(20px,5vw,64px)); os fallbacks 860px e 24px sao exatamente os valores do
do /monitoria/termos.html, entao as duas familias alinham sem que este arquivo saiba o nome de nada. MARCACAO ESPERADA (padrao APG "Breadcrumb"): O ultimo item e' um LINK para a propria pagina com aria-current="page" — e' o que o exemplo do APG faz, e e' o unico caso com suporte real: em sem role, medido na arvore de acessibilidade do Chrome, o item sai como `generic` e nem o NVDA nem o VoiceOver anunciam "pagina atual". role="list" no
    e' obrigatorio porque `list-style:none` remove a semantica de lista no WebKit — sem ele o VoiceOver nao anuncia os 3 itens. O separador vem de ::after em `li:not(:last-child)`, e nao de ::before em `li + li`: com ::before, quando a trilha quebra de linha, a segunda linha ABRE com um separador solto. ============================================================================ */ .gs-breadcrumb { /* A folga da barra fixa e' desta regra, nao da pagina. Ver o cabecalho. */ padding-top: calc(var(--gs-menubar-h, 84px) + .75rem); padding-bottom: 0; padding-inline: var(--pad, 24px); max-width: var(--maxw, 860px); margin: 0 auto 1.25rem; font-size: .8125rem; line-height: 1.4; color: currentColor; } .gs-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; } .gs-breadcrumb li { display: flex; align-items: center; gap: .5rem; /* min-width 0 para que um rotulo longo encurte em vez de estourar a linha. */ min-width: 0; } .gs-breadcrumb li:not(:last-child)::after { /* O caractere literal, nao a escapada CSS \203A: a versao anterior deste arquivo foi gerada por um script cujo re.sub leu \203 como escapada OCTAL do Python e gravou um caractere de controle 0x83 seguido de "A" — o separador aparecia no navegador como a letra A. */ content: "›"; opacity: .4; /* Nada de speak:never aqui: essa propriedade e' de CSS Speech e nao existe em engine nenhuma (CSS.supports('speak','never') === false), entao a versao anterior deste arquivo documentava uma protecao que era descartada no parse. Conteudo gerado por CSS pode ser anunciado por alguns leitores; o custo real e' ouvir "maior que" entre os itens, e a alternativa (um aria-hidden na marcacao) custaria um no por item nas 5 paginas. */ } .gs-breadcrumb a { color: inherit; opacity: .68; text-decoration: none; /* Borda transparente em vez de underline no hover: reserva o espaco desde o inicio, entao a linha nao empurra o layout quando aparece. */ border-bottom: 1px solid transparent; transition: opacity var(--duration-fast, .15s) ease, border-color var(--duration-fast, .15s) ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-breadcrumb a:hover { opacity: 1; border-bottom-color: currentColor; } /* Sem outline proprio: cada pagina ja tem o seu :focus-visible, e definir um com currentColor deixava um anel BRANCO nas paginas do /portfolio, cujo anel e' roxo. Aqui so' desfazemos a opacidade, para o item focado nao ficar apagado. */ .gs-breadcrumb a:focus-visible { opacity: 1; } .gs-breadcrumb [aria-current="page"] { opacity: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .gs-breadcrumb { padding-top: calc(var(--gs-menubar-h, 84px) + .5rem); margin-bottom: 1.125rem; font-size: .75rem; } } @media (prefers-reduced-motion: reduce) { .gs-breadcrumb a { transition: none; } }