/* ============================================================ PADRÃO KANNON — ICONOGRAFIA Depende de: kannon-tokens.css (usa --brand, --ink, --paper…) Sem fonte de ícone externa. Tudo é SVG traço + currentColor. Uso: (ou href="#ic-landing" se o sprite estiver inline no ) REGRA DE COR: o ícone herda a cor do texto ao redor (currentColor). Pra recolorir, mude a cor do CONTAINER — não do ícone. ============================================================ */ /* ---- Ícone base -------------------------------------------- */ .k-ico { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; /* fill NÃO é declarado aqui de propósito: deixa os pontos cheios (fill="currentColor" dentro dos símbolos) funcionarem. */ transition: color var(--dur, .28s) var(--ease-out, ease); } .k-ico--sm { width: 20px; height: 20px; } .k-ico--lg { width: 28px; height: 28px; } .k-ico--xl { width: 40px; height: 40px; } .k-ico--text { width: 1.1em; height: 1.1em; } /* alinha com texto inline */ /* ---- Ladrilho (chip) que carrega o ícone ------------------- */ .k-icotile { --tile: 48px; width: var(--tile); height: var(--tile); flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); transition: background var(--dur, .28s) var(--ease-out, ease), color var(--dur, .28s) var(--ease-out, ease), transform var(--dur, .28s) var(--ease-out, ease); } .k-icotile--lg { --tile: 56px; } .k-icotile--lg .k-ico { width: 28px; height: 28px; } .k-icotile--round { border-radius: var(--r-pill); } /* ---- Chip inline: ícone + rótulo --------------------------- */ .k-icochip { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink-soft); font-size: var(--text-sm); } .k-icochip .k-ico { color: var(--brand-ink); } /* ============================================================ ESTADOS DE RECOLORAÇÃO ============================================================ */ /* 1) NORMAL → ladrilho suave da marca, ícone na tinta da marca (já é o padrão do .k-icotile acima) */ /* 2) HOVER → o card preenche de escuro e o ícone ACENDE em --brand Card "O que faço" com recoloração na interação. */ .k-icocard { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); transition: background var(--dur, .28s) var(--ease-out, ease), color var(--dur, .28s) var(--ease-out, ease), border-color var(--dur, .28s) ease, box-shadow var(--dur, .28s) ease, transform var(--dur, .28s) var(--ease-out, ease); } .k-icocard .k-icotile { margin-bottom: var(--sp-4); } .k-icocard h3 { margin: 0 0 var(--sp-2); font-size: var(--text-md); color: var(--ink); transition: color var(--dur, .28s) ease; } .k-icocard p { margin: 0; color: var(--ink-soft); transition: color var(--dur, .28s) ease; } .k-icocard:hover, .k-icocard:focus-within { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-4px); } .k-icocard:hover h3, .k-icocard:focus-within h3 { color: var(--paper); } .k-icocard:hover p, .k-icocard:focus-within p { color: oklch(0.82 0.01 80); } .k-icocard:hover .k-icotile, .k-icocard:focus-within .k-icotile { background: oklch(1 0 0 / 0.08); /* ladrilho vira vidro fosco claro */ color: var(--brand); /* ÍCONE ACENDE NA COR DA MARCA */ transform: scale(1.06); } /* 3) DENTRO DE BLOCO ESCURO permanente (rodapé, faixa CTA, seção dark) ícone acende em --brand; ícone inline herda o texto claro. */ .k-on-dark .k-icotile, .k-footer .k-icotile, .k-cta-band .k-icotile, .pm-dark .k-icotile { background: oklch(1 0 0 / 0.08); color: var(--brand); } .k-on-dark .k-icochip, .k-footer .k-icochip { color: oklch(0.82 0.01 80); } .k-on-dark .k-icochip .k-ico, .k-footer .k-icochip .k-ico { color: var(--brand); } /* ============================================================ SELO-ASSINATURA — eco / escuta (ondas concêntricas) Estático por padrão; .k-eco--live adiciona o anel que expande, conversando com o ripple do hero. ============================================================ */ .k-eco { position: relative; display: inline-grid; place-items: center; width: 72px; height: 72px; color: var(--brand); } .k-eco .k-ico { width: 100%; height: 100%; } .k-eco--sm { width: 40px; height: 40px; } .k-eco--xl { width: 120px; height: 120px; } .k-eco--live::after { content: ""; position: absolute; width: 26%; height: 26%; border: 1.5px solid currentColor; border-radius: 50%; opacity: 0; animation: k-eco-ripple 2.8s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite; } @keyframes k-eco-ripple { 0% { transform: scale(.5); opacity: .55; } 100% { transform: scale(2.7); opacity: 0; } } /* ---- Acessibilidade / movimento reduzido ------------------- */ @media (prefers-reduced-motion: reduce) { .k-eco--live::after { animation: none; } .k-icocard:hover, .k-icocard:focus-within { transform: none; } .k-icocard:hover .k-icotile, .k-icocard:focus-within .k-icotile { transform: none; } }