/* cards.css — O CATÁLOGO. Seis modelos de card, com anatomia fechada. ============================================================================ Por que existe: até 11/09/2026 cada view reinventava o card, e era por isso que o acabamento oscilava. Isto não é biblioteca de componente — é LEI escrita em CSS. Quem constrói uma view nova PEGA um modelo daqui; não desenha outro. As regras que todo modelo obedece por construção, e que não se renegociam: · canto zero · sem sombra · peso 400 · sem cor de acento · profundidade por TOM (--sf-baixo/base/alto/topo), nunca por linha · o ÚNICO stroke do sistema é o do vidro (--stroke-vidro) · todo modelo tem estado VAZIO próprio — é onde design amador falha · número é tabular, com unidade e sinal alinhados · status de gate vive na ARESTA esquerda, nunca no preenchimento: estrato já usa cor de preenchimento, e duas semânticas na mesma cor é defeito ANATOMIA COMUM (os nomes valem nos seis modelos): .card a superfície .card__rot o rótulo em caixa alta — 1 módulo de entreletra, regra da marca .card__num o número, sempre tabular .card__pe o rodapé, um degrau ABAIXO, sangrando até a borda .card__vazio o que aparece quando não há dado ============================================================================ */ /* ---------- a superfície ---------- */ .card { position: relative; background: var(--sf-base); padding: 14px; min-width: 0; border: 0; border-radius: 0; box-shadow: none; transition: background var(--m-dur-1) var(--m-ease) } .card__rot { display: block; font-family: var(--font-text); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint) } .card__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px } /* o número: General Sans tabular é a exceção declarada à regra dos 18px — o Tekst não tem numeral tabular, e coluna de número desalinhada é defeito de leitura */ .card__num { font-family: var(--font-num, var(--font-alt)); font-variant-numeric: tabular-nums; line-height: 1; margin: 16px 0 10px } .card__num b { font-size: 40px; font-weight: 400; letter-spacing: -.02em } .card__num i { font-style: normal; font-size: 12px; color: var(--faint); margin-left: 5px } .card__num--sm b { font-size: 24px } /* o rodapé desce um degrau e sangra: separador por TOM, não por fio */ .card__pe { margin: 12px -14px -14px; padding: 10px 14px; background: var(--sf-baixo); font-size: 11px; color: var(--faint); display: flex; align-items: center; gap: 8px } .card__micro { font-size: 12px; line-height: 1.5; color: var(--faint); margin: 0 } /* ---------- OS SEIS EVENTOS DE INTERFACE ------------------------------------- Num sistema sem cor de acento e sem sombra, cada estado precisa de gesto próprio. */ .card--clicavel { cursor: pointer } .card--clicavel:hover { background: var(--sf-alto) } .card--clicavel:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px } .card[aria-selected="true"], .card--sel { background: var(--sf-topo) } /* carregando: um fio corre na base. Único uso de movimento no catálogo. */ .card--carregando { overflow: hidden } .card--carregando::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 36%; background: var(--ink); animation: card-corre 1.4s var(--m-ease) infinite } @keyframes card-corre { from { transform: translateX(-100%) } to { transform: translateX(380%) } } @media (prefers-reduced-motion: reduce) { .card--carregando::after { animation: none; width: 100% } } /* VAZIO: rebaixado, não hachurado. O card cai ABAIXO do fundo — ausência lê como ausência, e o rótulo continua legível porque lacuna declarada é dado. */ .card--vazio { background: var(--sf-baixo) } .card__vazio { font-size: 12px; line-height: 1.5; color: var(--faint); margin: 14px 0 0 } .card__vazio b { display: block; color: var(--muted); font-weight: 400; margin-bottom: 3px } /* ERRO: não é vermelho de alerta — é o estrato residual, a cor que o sistema já usa para "isto não se sustenta". Uma cor a menos no vocabulário. */ .card--erro .card__rot { color: var(--strata-residual) } /* ---------- ARESTA DE STATUS (gate) ------------------------------------------ Posição desambigua o que a cor sozinha não desambigua: o estrato é chip interno, o status é sempre a borda esquerda. Nunca se cruzam. */ .card--espera { padding-left: 17px } .card--espera::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--st-espera) } .card--ok { padding-left: 17px } .card--ok::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--st-ok) } /* ---------- chip de estrato: preenchimento, sempre interno ---------- */ .card__est { width: 8px; height: 8px; display: inline-block; flex: 0 0 8px } .card__est--residual { background: var(--strata-residual) } .card__est--dominante { background: var(--strata-dominante) } .card__est--emergente { background: var(--strata-emergente) } .card__est--indefinido { background: var(--strata-indefinido) } /* ---------- VARIANTE VIDRO: a única com stroke ------------------------------- Só pousa sobre um fundo que tenha o que refratar. Nunca animar `opacity` aqui: opacity<1 vira backdrop root e o vidro fica cego durante a transição. */ .card--vidro { background: color-mix(in srgb, var(--sf-base) 62%, transparent); -webkit-backdrop-filter: var(--glass-blur) saturate(1.4); backdrop-filter: var(--glass-blur) saturate(1.4) } .card--vidro::after { content: ""; position: absolute; inset: 0; pointer-events: none; padding: 1px; background: var(--stroke-vidro); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card--vidro { background: var(--sf-topo) } } /* ============================================================================= 1 · MÉTRICA — um número grande, sua unidade, e o contexto que o torna legível Usar quando: existe UM número que responde a pergunta da seção. Não usar quando: são dois números comparáveis (use comparação) ou mais (use lista). ============================================================================= */ .card--metrica .card__num { margin-top: 18px } .card--metrica .card__ctx { font-size: 12px; line-height: 1.5; color: var(--faint); margin: 0 } /* ============================================================================= 2 · LISTA — linhas alternando de tom, com chip de estrato e fração à direita A fração leva SEMPRE o denominador: adoção sem denominador é opinião. ============================================================================= */ .card--lista { padding-bottom: 0 } .card__linhas { list-style: none; margin: 12px -14px 0; padding: 0 } .card__linha { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; font-size: 12px; background: var(--sf-base) } .card__linha:nth-child(odd) { background: var(--sf-alto) } .card__linha .id { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .card__frac { font-family: var(--font-num, var(--font-alt)); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--faint) } .card__frac b { color: var(--ink); font-weight: 400 } /* ============================================================================= 3 · COMPARAÇÃO — dois valores e a diferença entre eles, que é o que se lê ============================================================================= */ .card__par { display: grid; grid-template-columns: 1fr 1fr; margin: 14px -14px 0 } .card__lado { padding: 12px 14px; background: var(--sf-base) } .card__lado:first-child { background: var(--sf-alto) } .card__lado .card__num { margin: 6px 0 0 } .card__lado .card__num b { font-size: 28px } .card__dif { margin: 0 -14px -14px; padding: 9px 14px; background: var(--sf-baixo); font-size: 11px; color: var(--muted); font-family: var(--font-num, var(--font-alt)); font-variant-numeric: tabular-nums } /* ============================================================================= 4 · TELA — a captura, com o veredito do portão DECLARADO no próprio card Regra da casa: lacuna declarada é melhor que tela falsa. Reprovada não some — aparece dizendo por que foi reprovada. ============================================================================= */ .card--tela { padding: 0; background: var(--sf-baixo) } .card--tela .card__img { display: block; width: 100%; height: 148px; object-fit: cover; object-position: top center; background: var(--sf-alto) } .card--tela .card__meta { padding: 11px 14px; background: var(--sf-base) } .card--tela .card__dim { font-family: var(--font-num, var(--font-alt)); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--faint) } .card--tela .card__veredito { font-size: 11px; line-height: 1.45; color: var(--faint); margin: 5px 0 0 } .card--tela.card--erro .card__img { filter: grayscale(1); opacity: .35 } /* ============================================================================= 5 · MATRIZ — a célula de quadrante: item, a palavra da plataforma, o estrato A palavra é obrigatória: julgamento sem palavra nomeada é gosto, não auditoria. ============================================================================= */ .card--matriz .card__item { font-size: 12px; font-weight: 400; line-height: 1.35; margin: 0 } .card--matriz .card__palavra { font-size: 11px; margin: 8px 0; color: var(--ink-2, var(--muted)) } .card--matriz .card__palavra span { text-transform: uppercase; letter-spacing: .08em; color: var(--faint) } .card--matriz .card__palavra--fere span { color: var(--strata-residual) } .card--matriz .card__palavra--serve span { color: var(--strata-emergente) } .card--matriz .card__porque { font-size: 11px; line-height: 1.45; color: var(--faint); margin: 0 } /* ============================================================================= 6 · EVENTO — a linha do tempo do que mudou no mercado Os sinais já são gravados em sinais/*.jsonl desde sempre e nunca foram exibidos. ============================================================================= */ .card--evento { padding-bottom: 0 } .card__tl { margin: 12px -14px 0 } .card__ev { display: grid; grid-template-columns: 58px 128px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; font-size: 12px; background: var(--sf-base) } .card__ev:nth-child(even) { background: var(--sf-alto) } .card__ev .d { font-family: var(--font-num, var(--font-alt)); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--faint) } .card__ev .p { color: var(--muted); font-size: 11px } .card__ev .t { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .card__conf { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); background: var(--sf-baixo); padding: 2px 7px } /* ---------- grade: os modelos se arrumam sozinhos ---------- */ .cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)) } .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } @media (max-width: 1100px) { .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }