/* ============================================================ Página /teste — clone de https://resultadofacil.digital/teste Bloco 1: layout do portal (originalmente inline no ) ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif; background: #F3F6F5; color: #14232A; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; } .nav { background: #0F3D2E; color: #fff; position: sticky; top: 0; z-index: 10; } .nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; } .logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; } .logo .lg { width: 30px; height: 30px; border-radius: 9px; background: #22C55E; display: grid; place-items: center; font-size: 16px; color: #062B1C; } .menu { display: flex; gap: 20px; font-size: 13.5px; font-weight: 600; color: #CFE7DC; } .menu span:first-child { color: #fff; } .burger { display: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.1); } .bar { background: #16553F; color: #DDF5EA; font-size: 12.5px; font-weight: 600; } .bar .wrap { display: flex; gap: 14px; overflow-x: auto; white-space: nowrap; padding: 9px 18px; } .hero { padding: 28px 0 8px; } .hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } .hero p { color: #5F7370; font-size: 14.5px; margin-top: 8px; max-width: 640px; line-height: 1.5; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .chip { background: #fff; border: 1px solid #DCE6E2; border-radius: 999px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; color: #1F3A34; } .chip.on { background: #0F3D2E; color: #fff; border-color: #0F3D2E; } .sec { padding: 22px 0 6px; } .sec-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .sec-h small { display: block; font-size: 11.5px; font-weight: 700; color: #16A34A; letter-spacing: 0.02em; margin-bottom: 3px; } .sec-h h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; } .sec-h a { font-size: 13px; font-weight: 700; color: #16A34A; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .card { background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 1px 2px rgba(20,35,42,0.05), 0 8px 24px -16px rgba(20,35,42,0.25); } .card .t { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .card .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; } .card .t b { display: block; font-size: 14.5px; } .card .t span { font-size: 12px; color: #6B7F7A; } .tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 6px; background: #DCFCE7; color: #15803D; margin: 4px 0 8px; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } td { padding: 7px 4px; border-bottom: 1px solid #EEF2F0; } td:first-child { color: #6B7F7A; font-weight: 700; width: 34px; } td:last-child { text-align: right; font-weight: 800; letter-spacing: 0.02em; } tr:last-child td { border-bottom: 0; } .balls { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; } .ball { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; } .meta { font-size: 12.5px; color: #5F7370; line-height: 1.5; } .meta b { color: #14232A; } .btn { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 800; color: #16A34A; } .palp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .p { background: #fff; border-radius: 14px; padding: 14px; text-align: center; box-shadow: 0 8px 24px -16px rgba(20,35,42,0.25); } .p .g { font-size: 11px; font-weight: 800; color: #16A34A; letter-spacing: 0.04em; } .p .n { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 2px; } .p .a { font-size: 12.5px; color: #5F7370; font-weight: 600; } .states { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .st { background: #fff; border-radius: 12px; padding: 12px 6px; text-align: center; font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 18px -14px rgba(20,35,42,0.3); } .st em { display: block; font-style: normal; font-size: 18px; font-weight: 800; color: #0F3D2E; } footer { margin-top: 30px; background: #0F3D2E; color: #B9D6C9; font-size: 12.5px; padding: 26px 0 30px; line-height: 1.6; } footer b { color: #fff; } @media (max-width: 760px) { .menu { display: none; } .burger { display: block; } .grid { grid-template-columns: 1fr; } .palp { grid-template-columns: repeat(2, 1fr); } .states { grid-template-columns: repeat(4, 1fr); } .hero h1 { font-size: 22px; } } /* ============================================================ Bloco 2: widget de chat / captura de lead ============================================================ */ /* ---------- Launcher: avatar redondo no canto ---------- O chat NUNCA abre sozinho. Fica só este botão, e o badge avisa que tem mensagem esperando. Abrir é decisão do visitante. */ .rp-launcher { position: fixed; right: 18px; z-index: 2147482999; /* respeita a barra de gestos do iPhone */ bottom: calc(18px + env(safe-area-inset-bottom)); display: none; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 14px 34px -10px rgba(9,24,32,0.45), 0 0 0 1px rgba(9,24,32,0.06); transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease; } .rp-launcher.rp-show { display: flex; animation: rpLauncherIn 0.55s cubic-bezier(0.16,1,0.3,1) both; } .rp-launcher:hover { transform: scale(1.06); box-shadow: 0 20px 42px -10px rgba(9,24,32,0.5), 0 0 0 1px rgba(9,24,32,0.09); } .rp-launcher:active { transform: scale(0.96); } .rp-launcher:focus-visible { outline: 3px solid rgba(240,61,6,0.45); outline-offset: 3px; } /* a marca e um simbolo, nao uma foto: contain mantem a mao inteira, e o respiro impede que ela encoste na borda do disco */ .rp-launcher img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; padding: 10px; box-sizing: border-box; pointer-events: none; } @keyframes rpLauncherIn { from { opacity: 0; transform: translateY(16px) scale(0.8); } to { opacity: 1; transform: none; } } /* contador de nao lidas */ .rp-badge { position: absolute; top: -3px; right: -3px; min-width: 23px; height: 23px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; border: 2px solid #fff; background: #F03D06; color: #fff; font-size: 12px; font-weight: 800; line-height: 19px; text-align: center; display: none; pointer-events: none; } .rp-badge.rp-on { display: block; animation: rpBadgePop 0.5s cubic-bezier(0.16,1,0.3,1) both; } @keyframes rpBadgePop { from { opacity: 0; transform: scale(0.2); } 60% { transform: scale(1.2); } to { opacity: 1; transform: scale(1); } } /* anel discreto enquanto houver mensagem nao lida */ .rp-launcher.rp-nudge::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(240,61,6,0.5); pointer-events: none; animation: rpRing 2.4s ease-out infinite; } @keyframes rpRing { 0% { opacity: 0.75; transform: scale(0.9); } 70% { opacity: 0; transform: scale(1.28); } 100% { opacity: 0; transform: scale(1.28); } } @media (prefers-reduced-motion: reduce) { .rp-launcher.rp-show, .rp-badge.rp-on { animation: none; } .rp-launcher.rp-nudge::after { display: none; } } /* ---------- Tela do chat: fullscreen, como abrir um app de mensagem ---------- Paleta inspirada no WhatsApp claro: header branco, fundo bege, balao recebido branco e balao enviado verde claro. */ .rp-screen { /* Altura por 100% do proprio fixed, nunca por 100dvh: o dvh ignora o teclado do celular, a tela fica mais alta que o espaco visivel e o navegador rola para revelar o campo, levando o header junto. O JS ajusta esta altura pelo visualViewport quando o teclado abre. */ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2147483000; overflow: hidden; display: none; background: #EFEAE2; font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; /* WebKit infla o corpo de texto ao girar o aparelho se nao travar isto */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; /* Cinto de seguranca: uma moldura solida da cor do fundo, larga como a tela. Se em algum quadro a tela ficar deslocada (o iOS mexe na area visivel antes de avisar), o vao mostra esta cor em vez do site atras. Nao e sombra decorativa: e zero blur, zero offset, so preenchimento. */ box-shadow: 0 0 0 100vh #EFEAE2; } .rp-screen.rp-show { display: block; animation: rpScreenIn 0.34s cubic-bezier(0.16,1,0.3,1) both; } @keyframes rpScreenIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .rp-screen.rp-leaving { animation: rpScreenOut 0.3s ease-in forwards; pointer-events: none; } @keyframes rpScreenOut { to { opacity: 0; transform: translateY(16px); } } .rp-chat { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; color: #111B21; } .rp-chat * { box-sizing: border-box; } /* trama sutil no fundo, no lugar do doodle do WhatsApp */ .rp-chat::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: radial-gradient(circle at 18% 22%, rgba(11,32,26,0.045) 1px, transparent 1.6px), radial-gradient(circle at 68% 62%, rgba(11,32,26,0.035) 1px, transparent 1.6px); background-size: 52px 52px, 74px 74px; } /* ---------- Header ---------- */ .rp-head { position: relative; z-index: 2; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); background: #FFFFFF; border-bottom: 1px solid #E9EDEF; } /* fundo branco: o cinza do avatar padrao suja o laranja da marca */ .rp-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #fff; } .rp-ava img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; } .rp-peer { flex: 1; min-width: 0; } /* Selo de verificado antes do nome. Ele e IRMAO do , nunca filho: o JS reescreve o textContent de #rpBotName ao iniciar, e um filho ali dentro seria apagado junto. */ .rp-nome { display: flex; align-items: center; gap: 5px; min-width: 0; } .rp-selo { display: block; flex-shrink: 0; width: 14px; height: 14px; } .rp-nome b { min-width: 0; } .rp-peer b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: #111B21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } /* "online" e "digitando…" usam exatamente o mesmo cinza: só o texto muda, sem destaque de cor — é assim no WhatsApp. */ .rp-peer small { display: block; font-size: 12.5px; font-weight: 500; color: #667781; line-height: 1.3; } .rp-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .rp-icon { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: #54656F; cursor: pointer; display: grid; place-items: center; transition: background 0.15s ease; } .rp-icon:hover { background: #F0F2F5; } .rp-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .rp-icon.rp-dots svg { stroke-width: 2.4; } /* ---------- Menu dos tres pontinhos ---------- Um item so: sair da conversa. Sair apenas esconde o chat — a conversa continua viva e o avatar volta pro canto para reabrir de onde parou. */ .rp-menu-wrap { position: relative; } .rp-menu { position: absolute; top: calc(100% + 6px); right: 4px; z-index: 5; min-width: 150px; padding: 6px 0; background: #FFFFFF; border-radius: 10px; box-shadow: 0 2px 5px rgba(11,20,26,0.2), 0 12px 28px rgba(11,20,26,0.16); transform-origin: top right; animation: rpMenuIn 0.13s ease-out; } .rp-menu[hidden] { display: none; } @keyframes rpMenuIn { from { opacity: 0; transform: scale(0.94); } } .rp-menu-item { display: block; width: 100%; padding: 11px 24px 11px 18px; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; font-size: 14.5px; color: #3B4A54; } .rp-menu-item:hover { background: #F5F6F6; } .rp-menu-item:focus-visible { background: #F5F6F6; outline: none; } /* ---------- Toque no iOS ---------- `touch-action: manipulation` tira o atraso de 300ms que o WebKit guarda esperando um duplo toque, e o par callout/user-select impede a lupa de selecao de texto quando o dedo fica parado em cima de um botao. */ .rp-launcher, .rp-icon, .rp-menu-item, .rp-b.rp-suggest, .rp-go { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* o campo de texto e a excecao: ali selecionar e copiar tem de funcionar */ .rp-ask-in { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* ---------- Mensagens ---------- */ .rp-msgs { position: relative; z-index: 1; flex: 1; overflow-y: auto; scroll-behavior: smooth; overscroll-behavior: contain; /* nao arrasta a pagina atras */ -webkit-overflow-scrolling: touch; /* inercia no iOS */ padding: 14px 5% 14px; display: flex; flex-direction: column; gap: 3px; } /* ---------- Composer desabilitado ---------- A conversa toda acontece no fio (balao de escolha e campo inline), entao a tela terminava num vazio grande embaixo. Esta barra fecha o desenho com a forma que todo mundo reconhece — e so isso: `pointer-events: none` e `aria-hidden` no HTML deixam ela inerte para o mouse, para o teclado e para o leitor de tela. O botao redondo fica cinza, nao verde, porque verde prometeria acao. */ .rp-composer { position: relative; z-index: 2; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #F0F2F5; border-top: 1px solid #E1E4E8; pointer-events: none; user-select: none; } .rp-comp-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 14px; background: #FFFFFF; border-radius: 22px; box-shadow: 0 1px 0.5px rgba(11,20,26,0.08); } .rp-comp-ph { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: #8696A0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-composer svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: #8696A0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rp-comp-send { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: #C7CED2; display: grid; place-items: center; } .rp-comp-send svg { width: 21px; height: 21px; stroke: #FFFFFF; } .rp-msgs::-webkit-scrollbar { width: 6px; } .rp-msgs::-webkit-scrollbar-thumb { background: rgba(11,32,26,0.18); border-radius: 3px; } .rp-b { position: relative; max-width: 78%; padding: 6px 9px 8px 10px; font-size: 15px; line-height: 1.42; font-weight: 400; border-radius: 8px; box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); word-wrap: break-word; animation: rpBubble 0.26s cubic-bezier(0.16,1,0.3,1) both; } @keyframes rpBubble { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } } /* ---------- Balao de "digitando" ---------- Espelha o status do header: entra e sai junto com ele, no fim do fio e sempre do lado do bot. Sem hora e sem recibo — nao e mensagem ainda. */ .rp-b.rp-typing { display: inline-flex; align-items: center; gap: 4px; padding: 13px 14px; } .rp-typing .rp-dot { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: rpDot 1.25s ease-in-out infinite; } .rp-typing .rp-dot:nth-child(2) { animation-delay: 0.16s; } .rp-typing .rp-dot:nth-child(3) { animation-delay: 0.32s; } @keyframes rpDot { 0%, 60%, 100% { opacity: 0.34; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .rp-b b { font-weight: 700; } .rp-b.rp-bot { align-self: flex-start; background: #FFFFFF; margin-right: auto; } .rp-b.rp-me { align-self: flex-end; background: #D9FDD3; margin-left: auto; } /* espaco extra so quando muda de lado, como no WhatsApp */ .rp-b.rp-bot + .rp-b.rp-me, .rp-b.rp-me + .rp-b.rp-bot { margin-top: 9px; } /* rabicho do balao */ .rp-b.rp-first::after { content: ''; position: absolute; top: 0; width: 9px; height: 13px; } .rp-b.rp-bot.rp-first { border-top-left-radius: 0; } .rp-b.rp-me.rp-first { border-top-right-radius: 0; } .rp-b.rp-bot.rp-first::after { left: -8px; background: #FFFFFF; clip-path: polygon(100% 0, 100% 100%, 0 0); } .rp-b.rp-me.rp-first::after { right: -8px; background: #D9FDD3; clip-path: polygon(0 0, 0 100%, 100% 0); } /* hora + check, o detalhe que faz parecer WhatsApp de verdade */ .rp-meta-line { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px -3px -4px 10px; font-size: 11px; color: #667781; line-height: 1; } .rp-b.rp-me .rp-meta-line { color: #5B8C71; } /* Recibo: cinza em enviando/enviado/entregue, azul só quando for lido. */ .rp-tick { display: inline-flex; align-items: center; } .rp-tick svg { width: 15px; height: 15px; fill: none; stroke: #8696A0; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s ease; } .rp-tick[data-s="clock"] svg { width: 13px; height: 13px; stroke-width: 1.8; } .rp-tick[data-s="read"] svg { stroke: #53BDEB; } /* ---------- Frase pronta: balao dentro da conversa ---------- A sugestao nao fica numa barra separada: entra no fio, do lado do visitante, ja com a cara da mensagem que vai ser enviada. Ao clicar ela simplesmente vira a mensagem enviada, no mesmo lugar onde ja estava. */ /* Respiro curto: a escolha (e o campo de texto, que usa o mesmo wrapper) entra logo abaixo da ultima fala do bot, como resposta dela. O respiro antigo era em vh e, em tela alta, jogava as opcoes para o meio da tela, longe demais do que estava sendo perguntado. */ .rp-suggests { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 14px; } /* Antes de enviar o balao e todo arredondado e SEM rabicho: ainda nao e mensagem, e uma opcao. O rabicho so nasce quando vira fala de verdade. */ /* O balao de escolha e um