/* Página inicial: escolha da marca. Usa os tokens do CP Iuris, marca-mãe do grupo. */ /* O canvas é decorativo e o elemento só existe se o script rodar: com JS desligado o gradiente do segue sendo o fundo, sem buraco nenhum. */ .fundo-cinetico { position: fixed; inset: 0; z-index: 0; display: block; pointer-events: none; } /* Sem contexto de empilhamento próprio o conteúdo cairia atrás do canvas. */ .pagina { position: relative; z-index: 1; } /* Texto claro direto sobre a grade: um nó aceso caindo em cima de uma letra derruba o contraste local para 1.8:1. A sombra escura acompanha o glifo e devolve o fundo da marca por baixo dele. Os cartões são opacos e não precisam. */ .abertura h1, .abertura p, .rodape { text-shadow: 0 1px 2px rgba(4, 23, 29, 0.9), 0 0 10px rgba(4, 23, 29, 0.75); } .marcas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .marca { display: grid; gap: 0.75rem; align-content: start; padding: 1.25rem; background: var(--superficie); color: var(--texto-superficie); border: 1px solid var(--superficie-borda); border-radius: var(--raio-cartao); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Sombra projetada é uso proibido nos dois guias e o cartão é quase todo placa de logotipo — o realce vem da borda no acento da marca. */ .marca:hover { border-color: var(--acento); box-shadow: inset 0 0 0 2px var(--realce-suave); } /* Os dois lockups vêm com o cartão azul-marinho do guia embutido. Com object-fit: contain o retângulo era pintado com canto vivo dentro de um cartão de raio 1.5rem. A placa agora é recortada pelo próprio contêiner, e o raio segue a regra concêntrica: 1.5rem de fora menos 1.25rem de padding. */ .marca__placa { display: block; overflow: hidden; border-radius: 0.25rem; aspect-ratio: 3.8 / 1; } .marca__placa img { display: block; width: 100%; height: 100%; object-fit: cover; } .marca__nome { font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: 1.25rem; } .marca__acao { font-size: 0.9375rem; color: var(--texto-superficie-suave); } /* A Fasipa não tem lockup com cartão embutido: a placa é montada aqui, com o azul do próprio brandbook e o logotipo em versão para fundo escuro. */ /* Flex, não grid: em grid a linha cresce junto com a imagem e o max-height vira circular — a placa estica e o lockup vaza. */ .marca__placa--fasipa { display: flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; background: #0C1E46; } /* Este lockup é mais quadrado que os outros dois. Cabe pelo limite, não por altura fixa: como item de grid, `height: 100%` resolve contra a própria linha e a imagem cresce além da placa. */ .marca__placa--fasipa img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }