/* * 20_navegacao.css — ONDA D * ═══════════════════════════════════════════════════════════════════════════ * Cabeçalho, navegação e contêineres de conteúdo dos quatro chromes que a * Onda 0 deixou prontos em `app/views/layouts/`: publico, aluno, admin e * console. Os seletores de ESTRUTURA acompanham exatamente o HTML daqueles * layouts (`.cabecalho--aluno`, `.navegacao--admin`, `.painel-admin`, …). * * UMA COISA ESTA FOLHA PEDE, E ESTÁ PEDIDA NO RELATÓRIO DA ONDA: o item ativo * do menu é pintado por `a[aria-current]`, e hoje NENHUM dos quatro layouts * emite o atributo — `grep -rn aria-current app/views/layouts/` não devolve * nada, então nenhum item fica marcado em nenhuma tela. Quem decide "estou * aqui" é `UiHelper#item_de_navegacao`, num lugar só, e é ele que os * `link_to` dos layouts precisam passar a usar. `aria-current` não é enfeite * de CSS: é o que o leitor de tela anuncia. * * A decisão que mais muda a vida do aluno: no CELULAR a navegação principal é * uma BARRA INFERIOR. O motorista segura o telefone com uma mão, quase sempre * a direita, e o topo da tela de 6,7" está fora do alcance do polegar. Barra * no topo é padrão de desktop portado para o celular sem pensar. * No desktop (admin e console, que são tela de escritório) a navegação vira * BARRA LATERAL, porque lá a lista é longa e o mouse não tem alcance limitado. */ /* ═══ CONTÊINER ═══════════════════════════════════════════════════════════ */ .corpo { display: flex; flex-direction: column; min-height: 100dvh } .conteudo { width: 100%; max-width: var(--largura-conteudo); margin: 0 auto; padding: var(--esp-5) var(--gutter); flex: 1; } /* ═══ CABEÇALHO ═══════════════════════════════════════════════════════════ */ .cabecalho { position: sticky; top: 0; z-index: var(--z-grudado); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: 3.5rem; /* O padding lateral ACOMPANHA A COLUNA DE CONTEÚDO. Enquanto era só `var(--gutter)`, o cabeçalho era full-bleed e o conteúdo era uma coluna centrada: a 1440 o logo ficava em x=32 e a primeira palavra da página em x=233 — 201 px de desalinhamento entre as duas primeiras coisas que o olho encontra. `max()` resolve sem wrapper novo e sem tocar em marcação: em tela estreita vence o gutter, em tela larga vence a metade da sobra. */ padding-block: var(--esp-2); padding-inline: max(var(--gutter), calc((100% - var(--largura-conteudo)) / 2)); /* As DUAS declarações de `background` são obrigatórias, nesta ordem. O `@supports` abaixo cobre `backdrop-filter`, não `color-mix`: um navegador que tem o primeiro e não o segundo (Chrome 76–110, Safari 15.4–16.1) descarta só a linha do `color-mix` e ficaria SEM fundo nenhum — cabeçalho `sticky` transparente, com o conteúdo rolando por baixo do texto. A cascata de valor inválido resolve sozinha: quem entende `color-mix` usa a segunda, quem não entende fica com a primeira. `color-mix` é Chrome 111, de 2023; o público é motorista com Android de 2019. */ background: var(--fundo); background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--borda); } @supports not (backdrop-filter: blur(1px)) { .cabecalho { background: var(--fundo) } } /* A marca no cabeçalho: nome do tenant, ou o wordmark da Ellévu. Nunca imagem quebrada (§12.2) — quando não há logo, é TEXTO. */ .marca { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo); padding-right: var(--esp-2); color: var(--texto); font-weight: var(--peso-forte); font-size: var(--texto-md); letter-spacing: var(--espacamento-titulo); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .marca:hover { color: var(--texto) } .marca__logo { height: 1.5rem; width: auto; flex: none } .marca__wordmark { height: 1.25rem; width: auto; flex: none; color: var(--cor-marca) } .marca__sufixo { color: var(--texto-tenue); font-weight: var(--peso-normal) } .cabecalho__acoes { display: flex; align-items: center; gap: var(--esp-2); flex: none } /* ═══ NAVEGAÇÃO DO ALUNO — barra inferior no celular ══════════════════════ */ .navegacao--aluno { position: fixed; max-width: 100%; z-index: var(--z-grudado); inset: auto 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--esp-1); padding: var(--esp-1) var(--esp-1) calc(var(--esp-1) + env(safe-area-inset-bottom)); /* Mesma dobradinha do cabeçalho, e aqui o estrago seria maior: a barra é `fixed` no rodapé do celular do aluno. Sem fundo, o menu principal do motorista vira vidro liso sobre o conteúdo. */ background: var(--fundo-cartao); background: color-mix(in srgb, var(--fundo-cartao) 96%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--borda); } @supports not (backdrop-filter: blur(1px)) { .navegacao--aluno { background: var(--fundo-cartao) } } .navegacao--aluno > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-1); min-height: var(--alvo); padding: var(--esp-2) var(--esp-1); border-radius: var(--raio-2); color: var(--texto-tenue); font-size: var(--texto-xs); font-weight: var(--peso-medio); line-height: 1.1; text-align: center; text-decoration: none; transition: color var(--transicao-rapida), background-color var(--transicao-rapida); } .navegacao--aluno > a:hover { color: var(--texto-suave) } .navegacao--aluno > a[aria-current] { color: var(--cor-marca); background: var(--cor-marca-suave); } /* A barra inferior tapa o fim da página: o conteúdo precisa da folga. */ .conteudo--aluno { padding-bottom: calc(var(--alvo) + var(--esp-8) + env(safe-area-inset-bottom)) } /* No desktop a barra inferior não faz sentido: volta para o topo, ao lado da marca, como uma fita de links. */ @media (min-width: 48rem) { /* No desktop a barra sobe e vira uma fita de links logo abaixo do cabeçalho. Continua `fixed`, e não `sticky`, por uma razão de DOM que não dá para contornar daqui: em `layouts/aluno.html.erb` (do integrador) o