evandro
c7d09d63d4
Hero e movimento - cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py): marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao cursor e, parada no topo, passa sozinha pelos estados com legenda - três níveis de aparelho (full, lite, static); sem WebGL fica o pôster - título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha." - faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções - rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa compartilhada entre a lista de cases e o case Ofertas - atendimento no WhatsApp com IA e nota fiscal para a reforma tributária (páginas de serviço, cartões da home, formulário e aviso com data de validade) - página /ia atualizada, com fontes - peças 3D em loop nos cartões e topos de página (3d/pecas.py) Design - hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta - um destino por rótulo: "Falar sobre meu projeto" leva ao formulário, "Chamar no WhatsApp" abre o WhatsApp - logo montado em blocos, 404 redesenhado, grades sem célula vazia - ícones do PWA e manifesto novos Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.
31 lines
826 B
CSS
31 lines
826 B
CSS
/*
|
|
* Os quatro blocos lima do símbolo encaixam quando o link que contém o logo recebe o ponteiro ou o foco do teclado:
|
|
* sobem cerca de 6% da altura do símbolo e assentam, um depois do outro. A animação nasce com o :hover, então roda
|
|
* uma vez por entrada do ponteiro. Só `translate` anima; em SVG o px da transformação é a unidade do viewBox, e o
|
|
* símbolo tem 322 unidades de altura (19 = 6%).
|
|
*/
|
|
@keyframes logo-encaixe {
|
|
40% {
|
|
translate: 0 -19px;
|
|
}
|
|
}
|
|
|
|
.logo-bloco:nth-child(2) {
|
|
--logo-atraso: 60ms;
|
|
}
|
|
|
|
.logo-bloco:nth-child(3) {
|
|
--logo-atraso: 120ms;
|
|
}
|
|
|
|
.logo-bloco:nth-child(4) {
|
|
--logo-atraso: 180ms;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
a:hover .logo-bloco,
|
|
a:focus-visible .logo-bloco {
|
|
animation: logo-encaixe 280ms var(--ease-out) var(--logo-atraso, 0ms);
|
|
}
|
|
}
|