/* ── UTM WhatsApp Tracker Modal ── */ /* A cor base é controlada pela variável --uwt-color injetada pelo PHP no */ :root { --uwt-color: #25D366; --uwt-color-dark: #128C7E; --uwt-color-alpha: rgba(37, 211, 102, 0.15); } #uwt-overlay { display: none; position: fixed; inset: 0; background: rgba(10, 18, 32, 0.66); z-index: 99998; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.25s ease; } #uwt-overlay.active { display: block; opacity: 1; } #uwt-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -45%); z-index: 99999; background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%); border: 1px solid rgba(255,255,255,.78); border-radius: 24px; padding: 42px 36px 34px; width: 92%; max-width: 440px; box-shadow: 0 30px 90px rgba(5,15,35,.32), 0 8px 24px rgba(5,15,35,.14); text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: transform .42s cubic-bezier(.2,.85,.25,1.25), opacity .24s ease; opacity: 0; } #uwt-modal.active { display: block; transform: translate(-50%, -50%); opacity: 1; animation: uwt-modal-in .46s both; } @keyframes uwt-modal-in { 0% { opacity:0; transform:translate(-50%,-44%) scale(.94); } 70% { opacity:1; transform:translate(-50%,-51%) scale(1.01); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } } @keyframes uwt-icon-float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-5px) rotate(-3deg); } } @keyframes uwt-shake { 0%,100% { transform:translate(-50%,-50%); } 25% { transform:translate(calc(-50% - 6px),-50%); } 75% { transform:translate(calc(-50% + 6px),-50%); } } #uwt-modal.uwt-shake { animation:uwt-shake .38s ease; } /* Barra colorida no topo do modal */ #uwt-modal::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--uwt-color), var(--uwt-color-dark)); border-radius: 24px 24px 0 0; } #uwt-close { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 24px; line-height: 1; color: #999; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color 0.2s, background 0.2s; } #uwt-close:hover { color: #333; background: #f0f0f0; } #uwt-modal-icon { width:72px; height:72px; margin:0 auto 16px; border-radius:22px; display:grid; place-items:center; font-size:38px; line-height:1; background:var(--uwt-color-alpha); box-shadow:inset 0 0 0 1px rgba(0,0,0,.03); animation:uwt-icon-float 3s ease-in-out infinite; } #uwt-modal-title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; line-height: 1.3; } #uwt-modal-subtitle { font-size: 15px; color: #666; margin: 0 0 24px; line-height: 1.5; } #uwt-form { display: flex; flex-direction: column; gap: 12px; } #uwt-name, #uwt-phone { width: 100%; padding: 13px 16px; border: 2px solid #e5e7eb; border-radius: 14px; font-size: 16px; color: #1a1a1a; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; background: #f7f9fb; } #uwt-name:focus, #uwt-phone:focus { border-color: var(--uwt-color); box-shadow: 0 0 0 3px var(--uwt-color-alpha); background: #fff; } #uwt-name::placeholder, #uwt-phone::placeholder { color: #aaa; } #uwt-submit { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--uwt-color), var(--uwt-color-dark)); color: #fff; border: none; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity .2s, transform .15s, box-shadow .2s; box-shadow:0 10px 24px var(--uwt-color-alpha); letter-spacing: 0.3px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; } #uwt-submit::before { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } #uwt-submit:hover:not(:disabled) { opacity: .96; transform: translateY(-2px); box-shadow:0 14px 30px var(--uwt-color-alpha); } #uwt-submit:active:not(:disabled) { transform: translateY(0); } #uwt-submit:disabled { opacity: 0.65; cursor: not-allowed; } #uwt-error { font-size: 13px; color: #e53e3e; min-height: 18px; text-align: left; padding-left: 2px; } @media (max-width: 480px) { #uwt-modal { padding: 32px 22px 28px; border-radius: 16px; } #uwt-modal-title { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { #uwt-modal.active, #uwt-modal-icon, #uwt-modal.uwt-shake { animation:none; } #uwt-modal, #uwt-overlay, #uwt-submit { transition:none; } } /* v3.0.2 — refinamento visual sem emojis */ #uwt-modal{overflow:hidden;isolation:isolate;background:linear-gradient(155deg,#fff 0%,#fbfcfe 68%,#f4f8f6 100%);border-radius:26px} #uwt-modal::before{background:linear-gradient(90deg,var(--uwt-color-dark),var(--uwt-color),var(--uwt-color-dark));background-size:200% 100%;animation:uwt-gradient-flow 4s linear infinite} .uwt-orb{position:absolute;z-index:-1;pointer-events:none;border-radius:999px;opacity:.72} .uwt-orb-one{width:210px;height:210px;top:-130px;left:-115px;background:radial-gradient(circle,var(--uwt-color-alpha),transparent 70%);animation:uwt-orb-drift 7s ease-in-out infinite} .uwt-orb-two{width:230px;height:230px;right:-145px;bottom:-150px;background:radial-gradient(circle,var(--uwt-color-alpha),transparent 70%);animation:uwt-orb-drift 8s ease-in-out -2s infinite reverse} #uwt-close{width:34px;height:34px;padding:0;border-radius:50%;background:rgba(238,242,245,.76);color:#7b8492;line-height:32px;transition:color .2s,background .2s,transform .2s} #uwt-close:hover{color:#172033;background:#e8edf1;transform:rotate(7deg)} .uwt-modal-head{display:flex;flex-direction:column;align-items:center;margin-bottom:14px} #uwt-modal-icon{width:74px;height:74px;margin:0 auto 13px;border-radius:25px;color:#fff;background:linear-gradient(145deg,var(--uwt-color),var(--uwt-color-dark));box-shadow:0 15px 34px var(--uwt-color-alpha),inset 0 1px 1px rgba(255,255,255,.4);animation:uwt-icon-float 3.4s ease-in-out infinite} #uwt-modal-icon svg{width:39px;height:39px;fill:currentColor;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))} .uwt-live{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid rgba(34,197,94,.12);border-radius:999px;background:#effbf4;color:#168046;font-size:10px;font-weight:800;letter-spacing:.55px;text-transform:uppercase} .uwt-live span{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:uwt-live-pulse 1.8s ease-out infinite} #uwt-modal-title{font-size:24px;font-weight:780;letter-spacing:-.5px;color:#172033} #uwt-modal-subtitle{max-width:340px;margin:0 auto 24px;color:#667085;font-size:14px;line-height:1.6} #uwt-name,#uwt-phone{min-height:51px;border-width:1.5px;background:rgba(247,249,251,.9);box-shadow:0 1px 2px rgba(16,24,40,.03);transition:border-color .2s,box-shadow .2s,background .2s,transform .2s} #uwt-name:hover,#uwt-phone:hover{border-color:#cbd3dc;background:#fff} #uwt-name:focus,#uwt-phone:focus{box-shadow:0 0 0 4px var(--uwt-color-alpha);transform:translateY(-1px)} #uwt-submit{min-height:53px;font-size:15px;font-weight:780;box-shadow:0 12px 27px var(--uwt-color-alpha)} #uwt-submit:hover:not(:disabled){filter:saturate(1.08);transform:translateY(-2px);box-shadow:0 17px 34px var(--uwt-color-alpha)} #uwt-error{min-height:17px;color:#dc3545;font-size:12px;font-weight:600} .uwt-privacy{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:-2px;color:#8b95a3;font-size:10.5px;line-height:1.35} .uwt-privacy svg{width:14px;height:14px;flex:0 0 auto;fill:currentColor} #uwt-modal.active #uwt-name,#uwt-modal.active #uwt-phone,#uwt-modal.active #uwt-submit,#uwt-modal.active .uwt-privacy{animation:uwt-item-rise .42s ease both} #uwt-modal.active #uwt-name{animation-delay:.12s}#uwt-modal.active #uwt-phone{animation-delay:.18s}#uwt-modal.active #uwt-submit{animation-delay:.24s}#uwt-modal.active .uwt-privacy{animation-delay:.3s} @keyframes uwt-gradient-flow{to{background-position:-200% 0}} @keyframes uwt-live-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.35)}70%,100%{box-shadow:0 0 0 7px rgba(34,197,94,0)}} @keyframes uwt-orb-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(13px,11px,0) scale(1.1)}} @keyframes uwt-item-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}} @media(max-width:480px){#uwt-modal{padding:36px 22px 26px;border-radius:22px}#uwt-modal-icon{width:65px;height:65px;border-radius:21px}#uwt-modal-icon svg{width:34px;height:34px}} @media(prefers-reduced-motion:reduce){#uwt-modal::before,.uwt-live span,.uwt-orb,#uwt-modal.active #uwt-name,#uwt-modal.active #uwt-phone,#uwt-modal.active #uwt-submit,#uwt-modal.active .uwt-privacy{animation:none}}