/* Microinterações da capa do Simple Agenda (amostra de 2026-09-28). Só valem com a classe "animar" no (posta pelo animacoes.js). Sem ela, tudo aparece no estado final. Quem pede menos movimento no aparelho (prefers-reduced-motion) não vê animação nenhuma. */ /* 1. Botões: respondem ao mouse, ao toque e ao teclado */ .capa .c-botao, .capa .c-nav a.c-nav-botao, .c-menu-botao { transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .capa .c-botao-vivo:hover { background: #34D399; color: #0B2A22; box-shadow: 0 8px 22px -8px rgba(16, 185, 129, 0.7); transform: translateY(-1px); } .capa .c-botao-verde:hover, .capa .c-nav a.c-nav-botao:hover { background: #047857; color: #ffffff; box-shadow: 0 8px 22px -10px rgba(5, 150, 105, 0.8); transform: translateY(-1px); } .capa .c-botao-contorno:hover { border-color: #6EE7B7; color: #ffffff; } .capa .c-botao-cinza:hover { border-color: #14213D; color: #14213D; } .capa .c-botao-claro:hover { background: #6EE7B7; color: #14213D; } .capa .c-botao:active, .capa .c-nav a.c-nav-botao:active, .c-menu-botao:active { transform: translateY(0) scale(0.98); box-shadow: none; } .capa .c-botao:focus-visible, .capa .c-nav a:focus-visible, .c-menu-botao:focus-visible { outline: 3px solid #6EE7B7; outline-offset: 3px; } .capa .c-nav a:not(.c-nav-botao) { transition: color 160ms ease; } .capa .c-nav a:not(.c-nav-botao):hover { color: #6EE7B7; } /* 2. Abertura em partes: o texto entra, o celular sobe de baixo, o painel vem da lateral */ .animar .c-azul { overflow-x: clip; } /* o painel entrando pela lateral não cria rolagem lateral */ .animar .c-abertura-texto > * { opacity: 0; transform: translateY(14px); } .animar .c-abertura.entra .c-abertura-texto > * { opacity: 1; transform: none; transition: opacity 500ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1); } .animar .c-abertura.entra .c-abertura-texto > *:nth-child(2) { transition-delay: 80ms; } .animar .c-abertura.entra .c-abertura-texto > *:nth-child(3) { transition-delay: 160ms; } .animar .c-abertura.entra .c-abertura-texto > *:nth-child(4) { transition-delay: 240ms; } .animar .c-abertura.entra .c-abertura-texto > *:nth-child(5) { transition-delay: 320ms; } /* O celular sobe de TRÁS da parte branca: o conteúdo abaixo da faixa azul fica na frente dele, e o painel fica na frente de tudo (ele passa um pouco para a parte branca, como na maquete). */ .animar main { position: relative; z-index: 1; background: #ffffff; } .animar .c-celular { z-index: 0; translate: 0 100%; } .animar .c-painel { z-index: 2; } .animar .c-celular.entra { translate: 0 0; transition: translate 1100ms cubic-bezier(0.16, 1, 0.3, 1); } .animar .c-painel { opacity: 0; translate: 120px 0; } .animar .c-painel.entra { opacity: 1; translate: 0 0; transition: opacity 450ms ease, translate 800ms cubic-bezier(0.16, 1, 0.3, 1); } /* 3. A conversa se conta sozinha, uma vez */ .animar .c-conversa-anima .c-balao, .animar .c-conversa-anima .c-balao-resposta { opacity: 0; transform: translateY(10px) scale(0.98); } .animar .c-conversa-anima .c-balao.aparece, .animar .c-conversa-anima .c-balao-resposta.aparece { opacity: 1; transform: none; transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2); } .c-digitando { align-self: flex-end; display: none; gap: 4px; padding: 11px 14px; border-radius: 14px 4px 14px 14px; background: #D1FAE5; } .animar .c-digitando.aparece { display: inline-flex; } .c-digitando i { width: 6px; height: 6px; border-radius: 50%; background: #065F46; opacity: 0.35; animation: c-pulo 900ms infinite ease-in-out; } .c-digitando i:nth-child(2) { animation-delay: 150ms; } .c-digitando i:nth-child(3) { animation-delay: 300ms; } @keyframes c-pulo { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-4px); opacity: 1; } } /* A linha da Maria no painel: de "Aguardando" para "Confirmada" */ .c-selo { transition: background-color 260ms ease, color 260ms ease; } .c-selo.muda { animation: c-selo 520ms cubic-bezier(0.2, 0.9, 0.3, 1.4); } @keyframes c-selo { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } .c-painel-linha.destaque { animation: c-linha 1400ms ease; } @keyframes c-linha { 0% { background: transparent; } 25% { background: #ECFDF5; } 100% { background: transparent; } } /* 4. Menu do celular: desliza ao abrir; o ícone vira um X */ .c-menu-icone { position: relative; width: 20px; height: 14px; display: block; } .c-menu-icone i { position: absolute; left: 0; width: 20px; height: 2.2px; border-radius: 2px; background: #ffffff; transition: transform 220ms ease, opacity 160ms ease, top 220ms ease; } .c-menu-icone i:nth-child(1) { top: 0; } .c-menu-icone i:nth-child(2) { top: 6px; } .c-menu-icone i:nth-child(3) { top: 12px; } .c-menu-botao[aria-expanded="true"] .c-menu-icone i:nth-child(1) { top: 6px; transform: rotate(45deg); } .c-menu-botao[aria-expanded="true"] .c-menu-icone i:nth-child(2) { opacity: 0; } .c-menu-botao[aria-expanded="true"] .c-menu-icone i:nth-child(3) { top: 6px; transform: rotate(-45deg); } @media (max-width: 860px) { .animar .c-menu:not([hidden]) .c-caixa > * { animation: c-menu 260ms ease both; } .animar .c-menu:not([hidden]) .c-caixa > *:nth-child(2) { animation-delay: 40ms; } .animar .c-menu:not([hidden]) .c-caixa > *:nth-child(3) { animation-delay: 80ms; } .animar .c-menu:not([hidden]) .c-caixa > *:nth-child(4) { animation-delay: 120ms; } } @keyframes c-menu { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* 5. Números do painel contam até o valor (o código faz a contagem) */ .c-contagem-n { font-variant-numeric: tabular-nums; } /* 6. As seções entram ao rolar: sobem de leve e aparecem em sequência (o código marca cada peça) */ .animar .revela { opacity: 0; translate: 0 28px; } .animar .revela.visto { opacity: 1; translate: 0 0; transition: opacity 600ms ease var(--atraso, 0ms), translate 850ms cubic-bezier(0.16, 1, 0.3, 1) var(--atraso, 0ms), transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease, border-color 240ms ease; } /* 7. Página de planos: o texto entra, a calculadora vem da lateral, os valores respondem */ .animar .p-abertura-texto > * { opacity: 0; transform: translateY(14px); } .animar .p-abertura.entra .p-abertura-texto > * { opacity: 1; transform: none; transition: opacity 500ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1); } .animar .p-abertura.entra .p-abertura-texto > *:nth-child(2) { transition-delay: 90ms; } .animar .p-abertura.entra .p-abertura-texto > *:nth-child(3) { transition-delay: 180ms; } .animar .p-calculadora { opacity: 0; translate: 80px 0; } .animar .p-abertura.entra .p-calculadora { opacity: 1; translate: 0 0; transition: opacity 500ms ease 250ms, translate 950ms cubic-bezier(0.16, 1, 0.3, 1) 250ms; } .p-perda strong.pulsa { animation: c-pulsa 420ms ease; } @keyframes c-pulsa { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } } .p-perda strong { transform-origin: left center; } .animar .p-lista-perguntas details[open] p { animation: c-abre 320ms ease both; } @keyframes c-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .animar .p-destaque.visto .p-selo-plano { animation: c-selo-entra 700ms cubic-bezier(0.2, 0.9, 0.3, 1.4) 500ms both; } @keyframes c-selo-entra { from { opacity: 0; transform: translateY(8px) scale(0.8); } to { opacity: 1; transform: none; } } /* Menos movimento: nada se mexe, tudo já no estado final */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .animar .c-conversa-anima .c-balao, .animar .c-conversa-anima .c-balao-resposta, .animar .c-abertura-texto > * { opacity: 1; transform: none; } .animar .c-celular, .animar .c-painel, .animar .revela, .animar .p-calculadora { opacity: 1; translate: 0 0; } .animar .p-abertura-texto > * { opacity: 1; transform: none; } }