/* =================================================== MOLDE-BASE — STYLE.CSS (cola do template) Complementa o Padrão Kannon. Só contém o que os componentes .k-* / .pm-* não cobrem: - modo do CTA (whatsapp / formulário / ambos) - foto do hero com proporção fixa - passos "como funciona" - FAQ accordion - banner LGPD + WhatsApp flutuante - PROTEÇÕES DE CELULAR (360px) e proporção de imagem Carrega DEPOIS de kannon-tokens/components/icons/motion. =================================================== */ /* ---- MODO DO CTA: controla o que aparece ------------------- */ body[data-modo="whatsapp"] .so-formulario { display: none; } body[data-modo="formulario"] .so-whatsapp { display: none; } body[data-modo="formulario"] .whatsapp-flutuante { display: none; } /* "ambos" mostra os dois (padrão) */ /* ---- FOTO DO HERO (proporção 4:5 retrato, preenche sem distorcer) */ .hero-foto { aspect-ratio: 4 / 5; width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); /* placeholder listrado: aparece se a foto ainda não foi colocada */ background: repeating-linear-gradient(45deg, oklch(0.92 0.01 80) 0 10px, oklch(0.95 0.008 80) 10px 20px); border: 1px solid var(--line); } .hero-foto img { width: 100%; height: 100%; object-fit: cover; } /* se a imagem falhar (template sem foto), esconde o ícone quebrado */ .hero-foto img:not([src]), .hero-foto img[src=""] { display: none; } /* ---- "COMO FUNCIONA" — passos numerados ------------------- */ .passos { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, 1fr); } @media (max-width: 760px) { .passos { grid-template-columns: 1fr; } } .passo { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); transition: background 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); } .passo h3, .passo p { transition: color var(--dur, .28s) ease; } /* hover: preenche escuro e o número acende (mesmo efeito dos cards) */ .passo:hover { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-4px); } .passo:hover .passo__n { color: var(--brand); } .passo:hover h3 { color: var(--paper); } .passo:hover p { color: oklch(0.82 0.01 80); } .passo__n { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); font-weight: 500; line-height: 1; color: var(--brand-ink); min-width: 1.6em; } .passo h3 { font-size: var(--text-md); margin: 0 0 var(--sp-2); } .passo p { margin: 0; color: var(--ink-soft); } /* ---- FAQ accordion ---------------------------------------- */ .faq { max-width: 760px; margin-inline: auto; display: grid; gap: var(--sp-3); } .faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); transition: border-color var(--dur, .3s) ease, box-shadow var(--dur, .3s) ease; } /* hover na FAQ: borda turquesa + sombra (leve de propósito — o item abre ao clicar, um preenchimento escuro brigaria com a leitura da resposta) */ .faq details:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); } .faq summary { transition: color var(--dur, .3s) ease; } .faq details:hover summary { color: var(--brand-ink); } .faq details[open] { border-color: var(--brand); } .faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--brand-ink); font-size: 1.4em; line-height: 1; transition: transform .2s ease; flex: none; } .faq details[open] summary::after { content: "−"; } .faq details p { margin: var(--sp-4) 0 0; color: var(--ink-soft); } /* ---- FORMULÁRIO: grupo de checkboxes ---------------------- */ .k-checks { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0; } .k-checks legend { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp-2); } .k-check { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-base); color: var(--ink-soft); cursor: pointer; } .k-check input { width: 18px; height: 18px; accent-color: var(--brand-strong); flex: none; } /* ---- BANNER LGPD ------------------------------------------ */ .lgpd { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; max-width: 720px; margin-inline: auto; background: var(--ink); color: var(--paper); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); z-index: 100; font-size: var(--text-sm); box-shadow: var(--shadow-md); } .lgpd p { margin: 0; max-width: 60ch; } .lgpd .k-btn--primary { flex: none; } /* o atributo hidden precisa vencer o display:flex acima (senão não some ao Aceitar) */ .lgpd[hidden] { display: none; } /* ---- WHATSAPP FLUTUANTE ----------------------------------- */ .whatsapp-flutuante { position: fixed; bottom: 1.25rem; right: 1.25rem; width: 56px; height: 56px; border-radius: var(--r-pill); background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px oklch(0.3 0.02 60 / 0.25); z-index: 60; transition: transform .2s var(--ease-out, ease); } .whatsapp-flutuante:hover { transform: scale(1.06); } .whatsapp-flutuante svg { width: 28px; height: 28px; } /* =========================================================== PROPORÇÃO DE IMAGEM (colheita da agência) Só proporções padrão: 4:5, 4:3, 1:1, 16:9. O container fixa a proporção e a foto preenche com object-fit: cover. =========================================================== */ .img-cover { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); } .img-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .ratio-4-5 { aspect-ratio: 4 / 5; } .ratio-4-3 { aspect-ratio: 4 / 3; } .ratio-1-1 { aspect-ratio: 1 / 1; } .ratio-16-9 { aspect-ratio: 16 / 9; } /* =========================================================== PROTEÇÕES DE CELULAR — pior caso 360px (colheita da agência) =========================================================== */ @media (max-width: 640px) { /* respiro lateral garantido */ .k-container { padding-inline: 20px; } /* botões longos quebram linha em vez de estourar a tela */ .k-btn { white-space: normal; line-height: 1.25; max-width: 100%; text-align: center; } /* no hero, botões ocupam a largura toda (mais fáceis de tocar) */ .k-hero__actions .k-btn, .pm-nav__cta .k-btn { width: 100%; } /* títulos longos quebram melhor */ .k-display, .pm-hero__title, .pm-final h2 { word-break: break-word; hyphens: auto; } /* faixa de CTA com menos respiro interno */ .k-cta-band { padding: var(--sp-6) var(--sp-5); } } /* no topo do celular, o CTA do header sai (já tem flutuante + sheet) */ @media (max-width: 520px) { .pm-nav__cta .k-btn--primary { display: none; } } /* =========================================================== FITA DE DEMONSTRAÇÃO (catálogo) — usada nas páginas de estilo =========================================================== */ .demo-ribbon { position: sticky; top: 0; z-index: 95; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); background: var(--ink); color: var(--paper); padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); text-align: center; } .demo-ribbon a { color: var(--brand); font-weight: 600; text-decoration: none; } .demo-ribbon a:hover { text-decoration: underline; } .demo-ribbon .sep { opacity: .4; } .demo-ribbon strong { color: var(--paper); }