/* ============================================================ LP WhatsApp Theme — Tema de cores WhatsApp reutilizavel ============================================================ Como usar: 1. Adicione a classe `wapp-theme` ao elemento wrapper da pagina (ex: body, main, ou qualquer container pai do conteudo) 2. Inclua este CSS na pagina via no ou enqueue Cores WhatsApp: Verde principal : #25D366 (verde WhatsApp) Teal principal : #128C7E (verde escuro) Verde profundo : #075E54 (fundo hero) Verde hover : #22c55e Verde hover dark: #0e7268 Escopo: todos os overrides ficam dentro de .wapp-theme para nao vazar para o restante do site. ============================================================ */ /* ── Variavel principal: substitui --dt-orange pelo verde WhatsApp ── */ .wapp-theme { --dt-orange: #25D366; --wapp-green: #25D366; --wapp-teal: #128C7E; --wapp-dark: #075E54; --wapp-green-hover: #22c55e; --wapp-teal-hover: #0e7268; } /* ── Doodle pattern de fundo (secoes claras das LPs WhatsApp) ── */ .wapp-theme.eb { background-image: url('../../img/whatsapp-doodle.svg'); background-repeat: repeat; background-size: 300px 300px; } /* ── Hero com gradiente WhatsApp ── */ /* Util: aplique .wapp-hero em qualquer section de hero para o gradiente teal */ .wapp-hero { background: linear-gradient(135deg, #075E54 0%, #128C7E 60%, #0a9e8e 100%); } .wapp-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 65% 110% at 10% 50%, rgba(0,0,0,.25) 0%, transparent 65%), radial-gradient(ellipse 45% 90% at 90% 50%, rgba(0,0,0,.15) 0%, transparent 65%); } /* ── Tags / badges verdes ── */ .wapp-theme .tag { background: rgba(37,211,102,.1) !important; border-color: rgba(37,211,102,.25) !important; color: #128C7E !important; } /* ── Cards de dor/problema: borda lateral e icone verdes ── */ /* Util: aplique .wapp-pain-card em cards que representam problemas */ .wapp-pain-card { border-left-color: #128C7E !important; } .wapp-pain-card__icon { background: rgba(18,140,126,.1) !important; color: #128C7E !important; } /* ── Cards de avatar/publico: hover verde ── */ .wapp-theme .eb-avatar-card:hover { border-color: rgba(37,211,102,.4); } .wapp-theme .eb-avatar-card__icon { background: rgba(37,211,102,.1); color: var(--wapp-green); } /* ── Botao principal (.btn--primary) verde ── */ .wapp-theme .btn--primary { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important; background-color: #25D366 !important; border-color: #25D366 !important; color: #fff !important; box-shadow: 0 4px 24px rgba(37,211,102,.4) !important; text-shadow: none !important; } .wapp-theme .btn--primary:hover { background: linear-gradient(135deg, #22c55e 0%, #0e7268 100%) !important; background-color: #22c55e !important; border-color: #22c55e !important; box-shadow: 0 6px 32px rgba(37,211,102,.55) !important; filter: none !important; } /* ── Botao do formulario DTNF verde ── */ .wapp-theme .dtnf-form-wrap .dtnf-btn.dtnf-btn-primary, .wapp-theme .dtnf-btn-primary { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important; background-color: #25D366 !important; border-color: #25D366 !important; box-shadow: 0 4px 20px rgba(37,211,102,.35) !important; color: #fff !important; } .wapp-theme .dtnf-form-wrap .dtnf-btn.dtnf-btn-primary:hover, .wapp-theme .dtnf-btn-primary:hover, .wapp-theme .dtnf-form-wrap .dtnf-btn-primary:hover { background: linear-gradient(135deg, #22c55e 0%, #0e7268 100%) !important; background-color: #22c55e !important; border-color: #22c55e !important; box-shadow: 0 4px 28px rgba(37,211,102,.5) !important; color: #fff !important; filter: none !important; } /* ── Link de privacidade do form DTNF verde ── */ .wapp-theme .dtnf-form-wrap .dtnf-privacy-line a { color: #128C7E !important; } .wapp-theme .dtnf-form-wrap .dtnf-privacy-line a:hover { color: #075E54 !important; } /* ── Borda LED animada verde WhatsApp ── */ /* Arco largo (~160 deg) com fade suave nas pontas para efeito fluido */ .wapp-theme .lp-form-led::before { background: conic-gradient( transparent 0deg, transparent 195deg, rgba(37,211,102,.03) 210deg, rgba(37,211,102,.12) 225deg, rgba(37,211,102,.3) 240deg, rgba(37,211,102,.6) 255deg, #25D366 268deg, #2de072 277deg, #25D366 286deg, rgba(37,211,102,.6) 299deg, rgba(37,211,102,.3) 314deg, rgba(37,211,102,.12) 329deg, rgba(37,211,102,.03) 344deg, transparent 358deg, transparent 360deg ); animation: lp-led-spin 3s linear infinite; }