/* ========================================================================== COMPONENTE — uc-cartao (o item) e uc-cartoes (a grade) O objeto de LISTA do sistema: uma prova, um simulado, um caminho da capa. ========================================================================== 1. ⛔ A ANATOMIA MEDIDA — E ELA TEM TRES PARTES, NAO DUAS ========================================================================== Medido em 05/09/2026 no HTML renderizado de DEZ telas do tema antigo, anonimo, contando por token de atributo `class` (nao por substring): uc-card2 117 uc-card (a v1) 0 uc-card2__pe 117 uc-cards 16 O briefing desta tarefa media CINCO telas, achou 44, e descrevia a estrutura assim: `
` + `

` + `

`, "sem imagem, sem selo, sem metadado". Sobre DEZ telas essa estrutura e' o caso RARO:

+

+

114 de 117

+

3 de 117 Os 3 sao os "caminhos" da capa (Questoes, Provas, Simulados). Os 114 sao todo cartao de conteudo de verdade, e TODOS trazem uma linha de metadado (banca, orgao, ano) como PRIMEIRO filho, antes do titulo. "Nao invente partes que ninguem usa" e' a regra certa -- foi ela que fez a tarefa D apagar meia `rotulo.css`. Aqui ela aponta para o outro lado: omitir o metadado seria deixar de fora a parte que 97,4% dos cartoes usam. ========================================================================== 2. ⛔ `__pe` NAO MENTIA. QUEM MENTIA ERA O SEGUNDO PAPEL DENTRO DELE ========================================================================== O briefing dizia que `__pe` significa "pe" mas guarda a descricao, que e' o corpo do cartao. Medido, e' o contrario. `bancada.css:781`: .uc-card2__pe{ margin:auto 0 0; padding-top:var(--sp-2); border-top:1px solid var(--uc-rule); display:flex } `margin:auto 0 0` empurra para baixo e `border-top` poe um fio em cima: isso e' um RODAPE, sem ambiguidade. E o conteudo confirma -- em 114 dos 117 ele e' `35 questoes Resolver`: um NUMERO e uma ACAO, nao uma descricao. A descricao aparece nos OUTROS 3, e o tema antigo precisa de uma regra so' para desfazer o rodape quando isso acontece (`bancada.css:860`): .uc-portas .uc-card2__pe{ border-top:0; padding-top:0; display:block } Ou seja: UM nome carregando DOIS papeis, e um override existindo so' para cancelar o papel errado. O conserto nao e' renomear o rodape -- e' separar os dois: .uc-cartao__rodape numero + acao (o caso de 114) .uc-cartao__descricao frase que explica o destino (o caso de 3) A PROVA DE QUE A SEPARACAO ESTA CERTA E' O OVERRIDE QUE SUMIU: nenhuma regra deste arquivo desfaz outra regra deste arquivo. `__rodape` e nao `__pe`: "pe" e "rodape" sao a mesma palavra em portugues, e a tarefa G vai declarar o rodape do site. Deixar os dois vivos seria o par `rotulo`/`etiqueta` que a tarefa D recusou, e o par `uc-sec`/`uc-sec2` que este projeto esta pagando para desfazer. ========================================================================== 3. O NOME: `uc-cartao`, SEM O "2" — E POR QUE A v1 NAO VEM JUNTO ========================================================================== `uc-card2` venceu na pratica (117 x 0) e o "2" e' cicatriz de uma migracao, nao informacao. O sistema inteiro nomeia em portugues (`uc-rotulo`, `uc-botao`, `uc-prosa`, `uc-mostruario`, `--forte`, `--osso`), entao `cartao`, e o conjunto e' `uc-cartoes` -- o mesmo par item/conjunto que `uc-chip`/`uc-chips` ja fixou. ⚠️ CUIDADO COM O MOTIVO DE NAO PORTAR A v1. Ela renderiza ZERO vezes nas 10 telas, mas NAO e' codigo morto: `inc/home-parts.php:226` (`uc_render_ficha_edital()`) esta viva e e' chamada de `taxonomy.php:262` e `cpt/archive-edital.php:84` -- ela desenha a FICHA DE EDITAL, e nenhuma das 10 telas medidas e' de edital. O motivo de ela nao vir para ca' e' outro, e e' de produto: edital tem "zero investimento novo" por ordem do dono. Dizer "apaguei porque estava morta" seria um numero certo com a causa errada. (Morta de verdade so' a `uc_card_prova()` / `.uc-card--prova`, em `inc/cpt.php:570`: nenhum chamador em todo o tema.) ========================================================================== 4. ⛔ AS QUATRO GRADES VIRARAM UMA — E AS DUAS SAO O MESMO DEFEITO ========================================================================== O tema antigo tem QUATRO grades de cartao (o briefing citava tres; a `--arq` nao estava na lista e renderiza 2 vezes): .uc-cards repeat(4,1fr) -> 3 (1180) -> 2 (900) -> 1 (640) .uc-cards--tres repeat(3,1fr) -> 1 (900) .uc-cards--arq repeat(3,1fr) -> 2 (1180) -> 2 (900) -> 1 (640) .uc-cards--fluida repeat(auto-fit,minmax(240px,1fr)) -- sem quebra Oito regras de @media ao todo. Lendo o PORQUE de cada uma no proprio tema antigo, as tres primeiras existem para compensar a mesma coisa: --tres "Com a grade de quatro sobraria uma coluna vazia" --arq "a coluna do filtro leva 300px, e com quatro o titulo do cartao quebrava em quatro linhas" --fluida "Com 3 simulados numa grade de repeat(4,1fr) sobrava uma coluna vazia a direita" Coluna vazia, container mais estreito, coluna vazia. UM numero fixo de trilhos nao sabe quantos cartoes existem nem de quanto espaco dispoe, e cada vez que isso doi nasce uma variante. `auto-fit` sabe as duas coisas. O QUE FALTAVA NA `--fluida`, e que o briefing nomeou como caso hostil: `auto-fit` COLAPSA os trilhos vazios, entao com UM cartao so' sobra um trilho unico de `1fr` -- o cartao vira uma faixa da largura da tela. Existe uma grade assim no site de hoje (uma, em /disciplina/administracao/). E nao e' so' o caso de um: com DOIS cartoes numa grade de quatro trilhos, os dois viram 582px cada. ⛔ A TROCA E' DE UMA PALAVRA: `auto-fill` NO LUGAR DE `auto-fit`. As duas contam trilhos igual; a diferenca e' o que fazem com os vazios. `auto-fit` colapsa (e o que sobra estica os cheios); `auto-fill` MANTEM. Com `auto-fill`, o trilho mede sempre (container - vaos) / N, nao importa quantos cartoes existem -- e a consequencia e' a que interessa: A LARGURA DE UM CARTAO E' PROPRIEDADE DO CARTAO, NAO DE QUANTOS IRMAOS ELE TEM. Isso nao e' so' estetica. A largura decide onde o titulo QUEBRA: o mesmo nome de prova ocupa duas linhas numa grade de quatro e uma linha sozinho. Um objeto que muda de forma conforme o numero de vizinhos nao e' um objeto. O preco e' espaco sobrando no fim da fileira quando a contagem nao e' multipla de N -- que e' o mesmo "preco" que a ultima linha de um paragrafo paga, e o tema antigo o tratava como defeito ("sobrava uma coluna vazia a direita") porque estava otimizando o RETANGULO. E' exatamente contra isso que o craft avisa. ⛔ E FOI UM DEFEITO MEU, PEGO NO MOSTRUARIO. A primeira versao desta grade era `auto-fit` com teto de 24rem, para o cartao sozinho nao esticar. Medido no navegador: ela deu DUAS colunas num palco de 1.020px, onde o desenho pede quatro. Causa: quando o `minmax()` tem um MAXIMO DEFINIDO, o numero de repeticoes e' calculado com o MAXIMO, nao com o minimo -- floor(1036/400)=2. Com `1fr` de maximo (indefinido) a conta usa o minimo, floor(1036/256)=4. Um teto em px nesta posicao nao limita o cartao: ele reduz o numero de colunas. Por isso --uc-cartao-teto foi ESCRITO E DEPOIS APAGADO, e nao ha teto nenhum aqui. Resultado: QUATRO variantes e OITO @media viram UMA declaracao, ZERO variantes, ZERO @media e UM token. Nada foi perdido -- cada um dos casos que as variantes tratavam continua tratado, pela mesma regra. */ .uc-cartoes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--uc-cartao-piso),1fr)); gap:var(--sp-4); /* ⛔ CONTEUDO DESIGUAL NAO GANHA ALTURA IGUAL. O padrao da grade e' `stretch`: um cartao de titulo de uma linha e' esticado ate a altura do cartao de tres linhas da mesma fileira, e o buraco resultante aparece entre o titulo e o rodape. E' a "simetria vazia" que o craft nomeia como o tell mais conhecido de tela gerada sem autoria -- e o tema antigo a produz DUAS vezes de proposito: `min-height:3.6em` no titulo da v1 e `min-height:1.3rem` na linha de tags do `uc-card2`, as duas com o mesmo comentario ("para que os titulos da mesma fileira comecem na mesma linha"). Nenhuma das duas vem para ca'. Isto nao e' preferencia nova: a propria `02-mostruario.css` ja decidiu assim, com estas palavras -- "Conteudo desigual NAO ganha altura igual (...) Igualar seria simetria vazia". */ align-items:start; } /* -------------------------------------------------------------------------- O CARTAO -------------------------------------------------------------------------- */ /* `position:relative` e' o ancoradouro do link esticado (secao 6 abaixo). O raio vem de --uc-r-3, que o 00-tokens.css ja descrevia como "superficie: cartao, painel, caixa" -- a fundacao ja esperava por este componente. `min-width:0` porque item de grade herda `min-width:auto`: sem ele o titulo de 43 caracteres sem espaco estoura o trilho em vez de quebrar dentro dele. E' o mesmo defeito que o chip e o botao ja pagaram. */ .uc-cartao{ position:relative; display:grid; gap:var(--sp-2); align-content:start; min-width:0; padding:var(--sp-4); border:var(--uc-borda) solid var(--uc-rule); border-radius:var(--uc-r-3); background:var(--uc-field); transition:border-color var(--uc-dur-2) var(--uc-ease), background-color var(--uc-dur-2) var(--uc-ease); } /* ⚠️ "NEM TUDO E' CARTAO": borda, preenchimento, raio e sombra dizem "objeto separado", e gastar os quatro em tudo achata a hierarquia. Este componente e' o lugar onde os quatro SAO devidos -- ele e' literalmente o objeto separado -- e por isso ele nao gasta o quarto: NAO HA SOMBRA. O tema antigo escreveu isso melhor do que eu escreveria (theme.css:299): "Borda hairline como profundidade, sem sombra nenhuma (...) e' o que mantem a pagina com cara de ferramenta em vez de template." A sombra do sistema (--uc-tatil) esta reservada, no 00-tokens.css, ao botao principal; --uc-elev-1/-2 existem para o que FLUTUA (menu, painel), e um cartao de lista nao flutua. */ .uc-cartao:hover{ border-color:var(--uc-rule-forte); background:var(--uc-paper-2); } /* -------------------------------------------------------------------------- METADADO — banca, orgao, ano -------------------------------------------------------------------------- */ /* ⛔ O TEMA ANTIGO DESENHA ISTO COMO PILULA, E ISSO E' UMA AFORDANCIA FALSA. `bancada.css:213`: `.uc-r__tags span` tem borda de 1px, raio de 4px, preenchimento e fundo proprio -- ou seja, a mesma gramatica visual do `uc-chip`. So' que o chip E' clicavel (e' o filtro; 1.165 renderizacoes em 10 telas) e estas etiquetas sao TEXTO INERTE. Duas pilulas na mesma tela, uma que responde ao toque e outra que nao, ensinam a pessoa a duvidar das duas. E' tambem o caso exato do "nem tudo e' cartao": quatro sinais de objeto separado gastos num dado que e' legenda. Aqui e' texto: tamanho menor, cor secundaria, e um FIO entre os itens. Nenhuma borda, nenhum fundo, nenhum raio. ⛔ AQUI HAVIA UM FIO ENTRE OS ITENS, E ELE FOI RETIRADO — PELA CAPTURA. A ideia era boa e a execucao era errada: `border-left` no item seguinte, para repetir dentro do cartao o fio de 1,5px que separa rotulo e contagem DENTRO do chip. Eu ate escrevi aqui, com todas as letras, que "o flex-wrap nunca deixa um fio orfao no comeco de uma linha nova porque ele pertence ao item, nao ao vao". ISSO ESTAVA ERRADO, e a captura mostrou em dois dos quatro cartoes: o fio pertence ao item JUSTAMENTE por isso ele desce junto -- "FUNDATEC | Camara de Canoas" quebra e "| 2025" comeca a linha de baixo com um risco vertical solto, sem nada a esquerda dele. A LICAO E' SOBRE A PRE-CONDICAO DO PRIMITIVO, nao sobre o primitivo. O fio do chip funciona porque um chip NUNCA QUEBRA: os dois campos dele estao sempre na mesma linha. A linha de metadado quebra quase sempre -- nome de orgao real tem 30 caracteres e o cartao tem 243px. Copiar a forma sem a pre-condicao e' o que produz o defeito. O FIO CONTINUA NO CARTAO, onde a pre-condicao vale: e' o `border-top` do rodape, que atravessa a largura inteira e por construcao nao tem como orfanar. Um fio por cartao tambem e' o certo pelo craft -- tres riscos por cartao numa tela que ja tem uma parede de chips com fio interno seria gastar o mesmo recurso ate ele parar de significar. Sem fio, o que separa os campos e' ESPACO: 12px entre itens contra ~4px entre as palavras de um item. Tres vezes o vao interno agrupa sem desenhar nada, e nao depende de glifo nenhum -- o separador em caractere ("·", "—") foi recusado pelo motivo que a tarefa D mediu na seta. */ .uc-cartao__meta{ display:flex; flex-wrap:wrap; align-items:baseline; /* 12px ENTRE OS ITENS contra ~4px entre palavras dentro de um item: e' o que agrupa, agora que nao ha fio. 4px de vao entre LINHAS quando a linha quebra -- o metadado e' um bloco compacto, nao uma lista. O afastamento ATE o titulo e' o gap de 8px do proprio cartao: metadado e titulo sao o mesmo grupo (identificam o objeto); o rodape se afasta mais, na regra dele. */ gap:var(--sp-1) var(--sp-3); margin:0; min-width:0; color:var(--uc-ink-3); font-size:var(--uc-s--1); font-weight:var(--uc-w-ler); line-height:var(--uc-lh-controle); } /* -------------------------------------------------------------------------- TITULO -------------------------------------------------------------------------- */ /* CLASSE, e nao seletor de elemento, por um motivo medido: o mesmo cartao aparece dentro de secoes com hierarquia diferente (na capa o titulo do cartao e'

sob um

de secao; num arquivo ele pode ser

). Estilizar `h3` prenderia o desenho a um nivel e obrigaria a marcacao a mentir sobre a estrutura do documento para ficar bonita. E' o mesmo raciocinio que a tarefa D usou para o `uc-rotulo`: tratamento tipografico aplicado ao elemento que a semantica pedir. ⛔ NAO HA `-webkit-line-clamp` nem `min-height`. O tema antigo trava o titulo da v1 em tres linhas com `min-height:3.6em` "para que VAGAS/SALARIO alinhem entre os cartoes" -- e' cortar o TEXTO para alinhar o ENFEITE. Titulo cortado com reticencia esconde justamente o que distingue duas provas com nome parecido. ⛔ E ANTES DE "CONSERTAR" UM CARTAO ALTO: o defeito quase nunca esta aqui. Em 09/09/2026 a fileira desalinhou (226/210/288/210) e a causa foi um CARGO de 140 caracteres publicado pela rodada anterior -- o cartao estava certo, o dado e' que nao cabia. As duas "correcoes" obvias (line-clamp aqui embaixo, align-items:stretch na grade) ja foram recusadas com motivo, nos dois blocos deste arquivo. A guarda que acusa o dado e': $W eval-file _uc-tools/uc_audita_cartao_capa.php Ela pergunta a uc_capa_provas() quais provas a capa mostra e sai nao-zero quando um titulo passa de 60 caracteres. Regra completa no arquivo do cliente, secao "REGRA PERMANENTE DO CARTAO DA CAPA". */ .uc-cartao__titulo{ margin:0; min-width:0; color:var(--uc-ink); font-size:var(--uc-s-0); font-weight:var(--uc-w-anunciar); letter-spacing:var(--uc-tr-display); line-height:var(--uc-lh-apertado); /* `break-word` (que a 01-base.css poe no body) quebra a palavra na linha mas NAO reduz o min-content do item de grade -- a coluna estouraria com o titulo de 43 caracteres sem espaco. `anywhere` reduz. Mesmo defeito e mesmo conserto que o chip e o botao ja pagaram. */ overflow-wrap:anywhere; } .uc-cartao__titulo a{ color:inherit; text-decoration:none; } .uc-cartao:hover .uc-cartao__titulo a{ color:var(--uc-acao); } /* -------------------------------------------------------------------------- DESCRICAO — o caso dos 3 "caminhos" da capa -------------------------------------------------------------------------- */ /* Frase que explica o DESTINO, nao resumo do que ha la dentro. Nunca co-ocorre com metadado nem com rodape (medido: dos 117 cartoes, 114 tem metadado+rodape e 3 tem descricao; zero tem os dois). */ .uc-cartao__descricao{ margin:0; min-width:0; max-width:var(--uc-medida); color:var(--uc-ink-2); font-size:var(--uc-s--1); font-weight:var(--uc-w-ler); line-height:var(--uc-lh-normal); } /* -------------------------------------------------------------------------- RODAPE — o numero e a acao -------------------------------------------------------------------------- */ /* `position:relative` sem z-index: o rodape vem DEPOIS do titulo no DOM, entao entre dois elementos posicionados com z-index automatico ele pinta por cima do link esticado do titulo. E' o que mantem o "Resolver" clicavel dentro de um cartao inteiramente clicavel -- e e' feito aqui, no hospedeiro do botao, e nao com uma regra sobre `.uc-botao`: componente nao se remenda de fora. AFASTAMENTO: o `gap` do cartao ja da 8px, e este `margin-top` de 16px (--sp-4) soma 24px ate o fio. Metadado e titulo ficam a 8px um do outro porque sao o MESMO grupo (identificam o objeto); o rodape fica a 24px porque e' outro grupo (o que ha dentro e o que fazer com isso). 8-12px dentro de um grupo, mais entre grupos -- espacamento uniforme nao agruparia nada, e um cartao com tres blocos igualmente espacados le como uma lista de tres coisas soltas. O FIO em cima e' o mesmo primitivo do metadado e do chip, na terceira funcao: la separa campos lado a lado, aqui separa o corpo do rodape. */ .uc-cartao__rodape{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); margin:var(--sp-4) 0 0; min-width:0; padding-top:var(--sp-2); border-top:var(--uc-borda) solid var(--uc-rule); color:var(--uc-ink-3); font-size:var(--uc-s--1); font-weight:var(--uc-w-ler); line-height:var(--uc-lh-controle); } /* ⛔ SEM `margin-top:auto`. O tema antigo empurra o rodape para o fundo do cartao, o que so' faz sentido quando os cartoes tem altura igual -- e a altura igual e' justamente o que `align-items:start` acabou de tirar. Uma regra que diz "va para o fundo" num componente que nao tem fundo nao e' inofensiva: ela e' uma afirmacao falsa sobre o layout, e a proxima pessoa que ler o arquivo vai acreditar nela. */ /* A ACAO no rodape e' `uc-botao uc-botao--texto` -- o componente da tarefa D, inteiro, sem uma linha de override aqui. Duas consequencias medidas: 1. A SETA. O rodape do cartao escreve "Resolver ->" em 114 dos 117 cartoes, em 8 das 10 telas: e' o MAIOR consumidor do caractere de seta em todo o site, e a tarefa D provou que `PublicSans-400.woff2` nao traz U+2192 -- a seta de hoje sai numa fonte de sistema, com outro peso e outra altura-x. Usar o botao traz o SVG junto. 2. O ALVO DE TOQUE. `bancada.css:1577` mede o CTA do rodape em 63x19px e conserta so' no dedo (`@media max-width:900px`, min-height:44px). No mouse ele continua com 19px de altura -- abaixo do piso legal de 24x24 da WCAG 2.5.8. O `uc-botao--texto` ja resolve os DOIS pisos (25px no mouse, 44px no dedo), porque a tarefa D pagou esse defeito quando o encontrou no proprio `.uc-chips__acao`. */ /* O NUMERO em mono com largura fixa. Nao e' repeticao de forma: e' a MESMA REGRA que o chip aplicou a contagem e o botao ao "Resolver N questoes" -- NESTE SISTEMA, NUMERO E' DADO, E DADO SE ESCREVE EM MONO TABULAR. Numa grade de 24 cartoes com contagens de 1 a 4 digitos, fonte proporcional faz cada linha de rodape comecar num lugar diferente; `tabular-nums` alinha as colunas de algarismo entre cartoes vizinhos e a fileira le como um indice. `--uc-ink` e nao `--uc-ink-3`: o numero e' o unico dado do rodape, o resto e' legenda dele. */ .uc-cartao__n{ color:var(--uc-ink); font-family:var(--uc-mono); font-weight:var(--uc-w-realce); font-variant-numeric:tabular-nums; } /* CONTAGEM INDISPONIVEL. Caso real: o tema antigo escreve `— sem questao ainda` quando o simulado nao tem questao. Aqui o slot do numero carrega a PALAVRA, nunca um travessao: um travessao e' (a) um caractere fora do Latin basico, que a tarefa D provou nao ser seguro assumir nesta fonte, e (b) mudo no leitor de tela, que anuncia "traco" ou nada. Cor nao e' o unico sinal aqui porque cor nao e' sinal NENHUM: o sinal e' a palavra. O peso volta a `--uc-w-ler` porque isto nao e' um numero -- e' a ausencia de um, e destaca-la seria transformar uma falha em manchete. */ .uc-cartao__n--vazio{ color:var(--uc-ink-3); font-family:var(--uc-sans); font-weight:var(--uc-w-ler); } /* -------------------------------------------------------------------------- O CARTAO INTEIRO E' O LINK -------------------------------------------------------------------------- */ /* Herdado do tema antigo (`bancada.css:861`, 01/09/2026), e o motivo escrito la continua valendo: "o artigo tem borda, fundo e dois :hover, mas so' o titulo linkava" -- um objeto que reage ao mouse inteiro e responde ao clique so' num pedaco e' uma promessa quebrada, e no dedo e' pior. O CUSTO, escrito para nao virar surpresa: o pseudo-elemento cobre o cartao, entao NAO DA' PARA SELECIONAR o texto de dentro dele. E' aceitavel aqui e nao seria num cartao de artigo: o conteudo deste cartao e' um titulo, tres legendas e um numero -- rotulos de navegacao, nao texto para copiar. `content:""` e nao `content:none` -- o pseudo-elemento precisa existir. */ .uc-cartao__titulo a::after{ content:""; position:absolute; inset:0; } /* O FOCO E' DO CARTAO, nao do titulo: se o anel envolvesse so' o texto do titulo, o alvo anunciado (o cartao inteiro) e o alvo desenhado (uma linha de texto) seriam objetos diferentes. `:has()` e' o que permite dizer isso sem JavaScript. O anel usa os tokens de foco da fundacao, entao ele e' identico ao do chip e ao do botao -- e acompanha o raio do cartao sozinho, porque `outline` segue `border-radius`. */ .uc-cartao:has(.uc-cartao__titulo a:focus-visible){ outline:var(--uc-foco-largura) solid var(--uc-foco); outline-offset:var(--uc-foco-offset); } /* ⛔ E O LINK PERDE O DELE — SENAO SAO DOIS ANEIS. Visto na captura, com Tab de verdade: alem do anel arredondado do cartao aparecia uma CAIXA RETANGULAR colada no texto do titulo (o foco padrao que a 01-base.css da a todo ), e num titulo de tres linhas ela ATRAVESSAVA a borda direita do cartao. Dois aneis para um foco so', e um deles vazando do objeto. `@supports selector(:has(*))` NAO E' CERIMONIA: sem ele, um navegador que nao entendesse `:has()` ignoraria a regra de cima (o anel do cartao) e obedeceria a de baixo (tirar o anel do link) -- resultado: foco INVISIVEL, que e' muito pior que dois aneis. Com a guarda, quem nao tem `:has()` fica com o anel do link, que e' o comportamento de antes. So' se tira o anel de alguem quando ha prova de que outro anel entrou no lugar. */ @supports selector(:has(*)){ .uc-cartao__titulo a:focus-visible{ outline:none; } } /* -------------------------------------------------------------------------- ESTADO: CARREGANDO — o esqueleto -------------------------------------------------------------------------- */ /* O osso imita a FORMA que vai chegar, nao um retangulo generico: uma linha curta de metadado, duas de titulo, uma de rodape. Esqueleto que nao tem a forma do conteudo produz um salto quando o conteudo chega, e o salto e' o que a promessa de carregamento existe para evitar. ⛔ AS LARGURAS SAO PORCENTAGEM, E `ch` AQUI ESTAVA ERRADO -- MEDIDO. A primeira versao usou `ch`, por analogia com o osso do chip (tarefa D, R11: "largura de osso nao e' espaco, e' um numero escolhido para parecer texto"). A analogia nao vale, e o navegador mostrou por que: ch no titulo 10,8px -> 22ch = 237,7px caixa disponivel: 209,4px ESTOURO DE 28px, visivel: a barra passava a borda do cartao e entrava no cartao vizinho. `ch` mede o algarismo da fonte DAQUELE contexto, e o titulo e' maior que o rodape (16,96px contra 13,12px). O mesmo "22" vale 238px num lugar e 177 em outro. A distincao que faltava, e ela e' de SIGNIFICADO, nao de unidade: `ch` serve quando o osso imita uma PALAVRA de comprimento proprio, num container que cresce para caber nela -- e' o caso do chip, cujo osso imita "FGV" ou "CESGRANRIO". `%` serve quando o osso imita ONDE UMA LINHA PARA, dentro de um container cuja largura quem decide e' a grade -- que e' o caso aqui: o cartao mede 243px numa fileira de quatro e a linha do titulo tem de acabar antes da borda, seja qual for a largura. Cada valor abaixo e' "ate onde o texto vai", e o cartao mudar de largura nao muda esse desenho. */ .uc-cartao--osso .uc-cartao__osso{ display:block; height:var(--sp-3); border-radius:var(--uc-r-1); background:var(--uc-esqueleto); } .uc-cartao--osso .uc-cartao__meta .uc-cartao__osso{ width:55% } .uc-cartao--osso .uc-cartao__titulo .uc-cartao__osso{ width:100% } .uc-cartao--osso .uc-cartao__titulo .uc-cartao__osso + .uc-cartao__osso{ width:66%; margin-top:var(--sp-2); } .uc-cartao--osso .uc-cartao__rodape .uc-cartao__osso{ width:45% } /* ⛔ SEM JAVASCRIPT O OSSO FICA PARADO. Um esqueleto que pulsa para sempre numa pagina onde ninguem vai buscar nada nao e' estado de carregamento: e' mentira de interface. O sinal `data-uc-js` no e' escrito pelo `uc-tema.js` da fundacao, e o CSS decide sozinho. Mesma regra do chip, do rotulo e do botao. ⚠️ O NOME DO KEYFRAME E' PROPRIO (`uc-cartao-brilho`) de proposito: nome de @keyframes e' GLOBAL no documento e nenhuma regra da guarda o governa (buraco nomeado no relatorio da tarefa C, achado 2, e ainda aberto). Sao quatro agora. Reaproveitar `uc-chip-brilho` acoplaria este arquivo ao `chip.css` e a animacao morreria calada no dia em que o CSS passar a ser carregado por tela -- que e' exatamente o que "um arquivo por componente" foi feito para permitir. */ [data-uc-js] .uc-cartao--osso .uc-cartao__osso{ background-image:linear-gradient( 90deg, var(--uc-esqueleto) 0%, var(--uc-esqueleto-brilho) 50%, var(--uc-esqueleto) 100% ); background-size:300% 100%; animation:uc-cartao-brilho var(--uc-esqueleto-dur) var(--uc-ease) infinite; } @keyframes uc-cartao-brilho{ from{ background-position:150% 0 } to{ background-position:-150% 0 } } /* O cartao-osso nao e' clicavel e nao tem link: sem `:hover` que prometa reacao, e sem cursor de clique. Ele e' espaco reservado. */ .uc-cartao--osso:hover{ border-color:var(--uc-rule); background:var(--uc-field); } /* -------------------------------------------------------------------------- ALVO DE TOQUE -------------------------------------------------------------------------- */ /* O cartao inteiro e' o alvo do link do titulo, entao ele passa os dois pisos com folga em qualquer tela (o menor cartao medido tem 240px de largura e mais de 100px de altura) e nao precisa de `min-height`. O QUE PRECISA e' o segundo alvo: a acao do rodape, que vive DENTRO do primeiro. Ela e' `uc-botao--texto` e ja traz 25px no mouse e 44px no dedo do proprio componente. O que este arquivo garante e' que os dois alvos nao se encostem -- o `padding-top` do rodape mais o `gap` do cartao deixam 24px entre o fim do titulo e o comeco da acao, que e' o espacamento que a WCAG 2.5.8 pede quando dois alvos convivem. */