/* es-ui (wp-plataforma): base de motion e componentes comuns. Contrato de tokens — o tema define no :root (claro) e no escuro; aqui só há valores de reserva. Mesmos nomes nos 4 sites: --es-primaria, --es-primaria-texto (texto sobre a primária), --es-fundo, --es-superficie, --es-texto, --es-texto-2, --es-linha, --es-foco, --es-raio, --es-sombra, --es-wa (verde do WhatsApp; o padrão #0C8340 passa AA com texto branco), --es-erro. Motion: --es-dur-1/2/3 (rápido/médio/lento), --es-ease (saída suave), --es-ease-mola (leve sobra no fim), --es-desloc (distância da entrada). */ :root{ --es-dur-1:.16s;--es-dur-2:.32s;--es-dur-3:.7s; --es-ease:cubic-bezier(.2,.7,.2,1);--es-ease-mola:cubic-bezier(.34,1.4,.64,1); --es-desloc:22px;--es-cascata:70ms; --es-wa:#0C8340;--es-erro:#D92D20; } /* Navegação entre páginas com transição nativa (Chrome/Edge/Safari 18+); quem não suporta navega normal. */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--es-dur-2)} /* Entrada ao rolar. Variantes: data-rev="" (sobe), "esq", "dir", "zoom", "fade". */ [data-rev]{transition:opacity var(--es-dur-3) var(--es-ease),transform var(--es-dur-3) var(--es-ease),filter var(--es-dur-3) var(--es-ease);transition-delay:calc(var(--i,0) * var(--es-cascata))} [data-rev].escondido{opacity:0;transform:translateY(var(--es-desloc))} [data-rev="esq"].escondido{transform:translateX(calc(var(--es-desloc) * -1))} [data-rev="dir"].escondido{transform:translateX(var(--es-desloc))} [data-rev="zoom"].escondido{transform:scale(.96)} [data-rev="fade"].escondido{transform:none} /* Primeira dobra: entrada em cascata só com CSS (não espera o JS; não afeta o LCP porque começa visível com opacidade parcial e dura pouco). */ @keyframes es-surge{from{opacity:.001;transform:translateY(12px)}} .es-surge>*{animation:es-surge var(--es-dur-3) var(--es-ease) both} .es-surge>:nth-child(2){animation-delay:60ms}.es-surge>:nth-child(3){animation-delay:120ms} .es-surge>:nth-child(4){animation-delay:180ms}.es-surge>:nth-child(5){animation-delay:240ms} /* Micro-interações */ .es-lift{transition:transform var(--es-dur-2) var(--es-ease),box-shadow var(--es-dur-2) var(--es-ease),border-color var(--es-dur-2)} @media(hover:hover){.es-lift:hover{transform:translateY(-4px);box-shadow:var(--es-sombra-forte,0 24px 48px -28px rgba(10,20,50,.45))}} [data-brilho]{position:relative;isolation:isolate} [data-brilho]:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity var(--es-dur-2); background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--es-primaria,#0A5BF0) 14%,transparent),transparent 70%)} @media(hover:hover){[data-brilho]:hover:after{opacity:1}} .es-seta{display:inline-block;transition:transform var(--es-dur-2) var(--es-ease)} a:hover .es-seta,button:hover .es-seta{transform:translateX(4px)} .btn,.es-btn{transition:transform var(--es-dur-1) var(--es-ease),filter var(--es-dur-2),box-shadow var(--es-dur-2)} .btn:active,.es-btn:active{transform:scale(.97)} button.enviando{position:relative;color:transparent!important;pointer-events:none} button.enviando:after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-color:var(--es-primaria-texto,#fff) transparent var(--es-primaria-texto,#fff) transparent;animation:es-gira .7s linear infinite} @keyframes es-gira{to{transform:rotate(360deg)}} /* Foco visível e pular para o conteúdo */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--es-foco,var(--es-primaria,#0A5BF0));outline-offset:3px;border-radius:6px} .es-pular{position:absolute;left:12px;top:-60px;z-index:1000;padding:10px 16px;border-radius:10px;background:var(--es-primaria,#0A5BF0);color:var(--es-primaria-texto,#fff);font-weight:600;transition:top var(--es-dur-2) var(--es-ease)} .es-pular:focus{top:12px} /* Topo: estados que o JS põe no (.rolou, .descendo). O tema usa a classe .topo-fixo no header que deve grudar. */ .topo-fixo{position:sticky;top:0;z-index:50;transition:transform var(--es-dur-2) var(--es-ease),box-shadow var(--es-dur-2),background-color var(--es-dur-2)} .rolou .topo-fixo{box-shadow:0 10px 30px -22px rgba(10,20,50,.45)} @media(max-width:900px){.descendo .topo-fixo{transform:translateY(-100%)}} /* Barra de leitura:
*/ .es-progresso{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:var(--es-primaria,#0A5BF0);pointer-events:none} /* WhatsApp flutuante (es-editorial/includes/ui.php) */ .es-wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 16px;border-radius:999px; background:var(--es-wa);color:#fff;font:600 15px/1 inherit;box-shadow:0 18px 40px -16px rgba(0,60,30,.55);text-decoration:none; transform:translateY(120%) scale(.9);opacity:0;transition:transform var(--es-dur-2) var(--es-ease-mola),opacity var(--es-dur-2)} .es-wa.pronto{transform:none;opacity:1} .es-wa.oculto{transform:translateY(120%) scale(.9);opacity:0;pointer-events:none} .es-wa svg{width:26px;height:26px;flex:none} .es-wa:hover{filter:brightness(1.05)} .es-wa:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 color-mix(in srgb,var(--es-wa) 60%,transparent);animation:es-pulso 2.6s var(--es-ease) 1.2s 3} @keyframes es-pulso{70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}} @media(max-width:600px){.es-wa{width:56px;padding:0;justify-content:center}.es-wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}} /* Índice do artigo: item da seção atual */ [data-indice] a{transition:color var(--es-dur-2),border-color var(--es-dur-2)} [data-indice] a.on{color:var(--es-primaria,#0A5BF0)} /* Formulário enviado */ .form-lead .sucesso{text-align:center;padding:24px 8px;animation:es-surge var(--es-dur-3) var(--es-ease) both} .form-lead .sucesso .ok{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:var(--es-wa);color:#fff;animation:es-pop .5s var(--es-ease-mola) both .1s} @keyframes es-pop{from{transform:scale(.4);opacity:0}} .form-lead [aria-invalid=true]{border-color:var(--es-erro)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--es-erro) 18%,transparent)} /* Esqueleto de carregamento para imagens com fundo */ .es-img{background:var(--es-linha,rgba(0,0,0,.06))} /* Quem pediu menos movimento no sistema não vê animação nenhuma. */ @media(prefers-reduced-motion:reduce){ *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} [data-rev].escondido{opacity:1;transform:none} @view-transition{navigation:none} }