/* ========================================================================== COMPONENTE — uc-rodape O pe do site: quem somos, para onde ir, e o que este acervo e'. ========================================================================== 1. ELE E' O SEGUNDO DONO DA MARCA — E FOI DAI QUE SAIU A `uc-marca` ========================================================================== O rodape do tema antigo escreve a marca REUSANDO as classes do cabecalho (`` dentro de `

`), e paga isso em seis regras de desfazer. O raciocinio inteiro, com a medicao e as seis linhas, esta no cabecalho de `marca.css`. Aqui o rodape consome `uc-marca` como qualquer outro hospedeiro e diz a cor NO INVOLUCRO DELE MESMO -- `.uc-rodape__marca{color:var(--uc-acao)}`. A marca herda. Zero seletor cruzado. ========================================================================== 2. UMA DECLARACAO DE GRADE, ZERO BREAKPOINT ========================================================================== O tema antigo gasta TRES media queries so' no rodape: `1.1fr 1.2fr` no desktop (theme.css:465), `1fr 1fr` abaixo de 900 (466), `1fr` abaixo de 640 (472), mais outra para a coluna de listas (477). Quatro numeros e tres pontos de corte para dizer uma coisa so': "as colunas cabem enquanto couberem". Aqui e' a mesma saida que a tarefa E deu ao `uc-cartoes`: `repeat(auto-fit, minmax(min(100%, var(--uc-rodape-coluna)), 1fr))`. Uma linha, nenhuma media query, e o numero mora no :root (§ --uc-rodape-coluna). ⚠️ `auto-fit` e nao `auto-fill`, e a escolha e' o contrario da do `uc-cartoes` -- de proposito. Cartao: a largura do item NAO pode depender de quantos vizinhos existem, entao `auto-fill` (mantem trilho vazio). Rodape: as colunas TEM de ocupar a largura inteira, e quando so' sobrar uma (institucional vazio, §5) ela deve esticar em vez de deixar dois buracos. Requisitos opostos, funcoes opostas -- e a diferenca esta escrita para ninguem "uniformizar" as duas depois. ⚠️ `min(100%, ...)` em volta do piso: sem ele, num visor mais estreito que o proprio piso a coluna estoura a tela em vez de encolher. E' a mesma armadilha que a tarefa E nomeou no `minmax()`, pelo outro lado. ========================================================================== 3. UM FIO SO' — a regra da tarefa F aplicada, e nao repetida ========================================================================== O tema antigo poe fio em DOIS lugares aqui: no topo do rodape (theme.css:464) e acima da barra de creditos (theme.css:505). A tarefa E ja tinha escrito o motivo de nao fazer isso -- "e' UM fio por cartao, nao dois: gastar o mesmo recurso ate ele parar de significar". Aqui ha UM: o do topo do rodape, que e' a fronteira mais larga do sistema -- entre a PAGINA e o CHROME. A barra de creditos se separa por AR (32px) e por tipografia (menor, mais clara). E' a doutrina da `uc-secao` aplicada inteira: "a secao e' feita de ar", e o rodape tambem. ========================================================================== 4. A ESCADA DE ESPACO ========================================================================== marca -> descricao 12px mesmo grupo: as duas dizem quem e' o site descricao -> acao 24px degrau: dizer x convidar rotulo -> lista 12px mesmo grupo item -> item 8px mesmo grupo coluna -> coluna 32px ENTRE GRUPOS (piso da faixa de craft) grade -> barra de creditos 32px ENTRE GRUPOS Nenhum vao uniforme: 8 / 12 / 24 / 32. Espacamento igual nao agrupa nada. ========================================================================== 5. OS CINCO ESTADOS ========================================================================== preenchido marca + descricao + acao, duas listas, barra de creditos. vazio ⛔ EXISTE E E' REAL, e o tema antigo erra nele: as listas do rodape vem de dados (`uc_nav_items()` e as paginas institucionais por slug). Se a lista voltar vazia, o antigo ainda imprime o `

` -- um titulo em cima de nada. Aqui quem decide e' o PHP: grupo sem item nao renderiza, cabecalho incluso. E se as DUAS listas sumirem, a grade fica com uma coluna so' e a marca ocupa a largura -- o caso de borda pedido, resolvido pelo `auto-fit`, sem regra nova. erro NAO EXISTE. As listas vem de contagem e de consulta local, nao de rede. Se um dia vierem de fora, o painel e' o `uc-aviso`; este arquivo nao desenha um segundo. carregando NAO EXISTE. O rodape e' servido inteiro no HTML, sem JavaScript. Esqueletizar o rodape seria fingir uma espera que nao acontece. borda nome de marca longo (a marca quebra, `overflow-wrap:anywhere` em marca.css), rotulo de item longo, uma coluna so', 320px. ========================================================================== 6. ALVO DE TOQUE: OS DOIS PISOS, E POR QUE AQUI ELES DIFEREM ========================================================================== Na barra do topo o alvo e' 44px sempre -- ela ja tem 56px de altura e o alvo cabe de graca. Aqui NAO: sao ate' oito links empilhados, e 44px em cada um transformaria a coluna em 400px de ar. Entao sao os dois pisos, cada um no seu ponteiro: 24px (WCAG 2.5.8 AA) no mouse, `--uc-alvo-toque` (44px, WCAG 2.5.5) sob `(pointer:coarse)`. E' a mesma intencao de `theme.css:142`, que ja dava 44px a `.uc-foot__list a` no dedo -- so' que la' o piso do MOUSE nunca foi medido, e os links ficavam com a altura da linha (~20px), abaixo dos 24. ========================================================================== */ .uc-rodape{ border-top:var(--uc-borda) solid var(--uc-rule); background:var(--uc-paper); color:var(--uc-ink); } .uc-rodape__in{ max-width:var(--uc-maxw); margin-inline:auto; padding-block:var(--sp-7) var(--sp-6); padding-inline:var(--uc-gutter); } .uc-rodape__grade{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--uc-rodape-coluna)),1fr)); gap:var(--sp-6); } /* A coluna da marca. `align-content:start` para ela nao esticar verticalmente quando as listas ao lado forem mais altas -- "nao iguale a altura de blocos com conteudo desigual". */ .uc-rodape__coluna{ display:grid; align-content:start; gap:var(--sp-3); min-width:0; } /* AQUI mora o unico contato com a `uc-marca`: uma cor, no involucro do proprio rodape. A marca herda e nao sabe que este arquivo existe. `--uc-acao` e nao `--uc-ink`: a marca e' um LINK para a capa, e neste sistema link e' `--uc-acao`. */ .uc-rodape__marca{ margin:0; color:var(--uc-acao); } /* `max-width:40ch` e nao `--uc-medida` (65ch): 65 caracteres e' a medida do texto que se LE; esta frase e' um cartao de visita dentro de uma coluna de 260px, e a medida dela e' a coluna. */ .uc-rodape__descricao{ max-width:40ch; margin:0; color:var(--uc-ink-2); font-size:var(--uc-s--1); line-height:var(--uc-lh-normal); } /* 24px depois da descricao: degrau entre "quem somos" e "faca isto". O `uc-botao` nao emite margem propria (tarefa D), entao o respiro e' do hospedeiro -- que e' este. */ .uc-rodape__acao{ margin:var(--sp-3) 0 0; } .uc-rodape__grupo{ display:grid; align-content:start; gap:var(--sp-3); min-width:0; } .uc-rodape__lista{ display:grid; gap:var(--sp-2); margin:0; padding:0; list-style:none; } .uc-rodape__link{ display:flex; align-items:center; min-height:24px; color:var(--uc-ink-2); font-size:var(--uc-s--1); line-height:var(--uc-lh-normal); text-decoration:none; transition:color var(--uc-dur-1) var(--uc-ease); } /* Sublinhado no hover e nao so' cor: cor nunca e' o unico sinal, nem em estado de ponteiro. */ .uc-rodape__link:hover{ color:var(--uc-acao); text-decoration:underline; } .uc-rodape__barra{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-6); } /* Mono e tabular porque tem um NUMERO: neste sistema numero e' dado, e dado se escreve em mono tabular (tarefa D). E' o mesmo criterio que poe a contagem do chip e o total do cartao em mono. */ .uc-rodape__creditos{ margin:0; color:var(--uc-ink-3); font-family:var(--uc-mono); font-size:var(--uc-s--1); font-variant-numeric:tabular-nums; line-height:var(--uc-lh-normal); } .uc-rodape__nota{ max-width:var(--uc-medida); margin:0; color:var(--uc-ink-3); font-size:var(--uc-s--1); line-height:var(--uc-lh-normal); } /* O piso do dedo. Ver §6: aqui os dois pisos sao numeros diferentes porque o custo de layout e' diferente, e o ponteiro e' o que decide qual vale. */ @media (pointer:coarse){ .uc-rodape__link{ min-height:var(--uc-alvo-toque); } }