/* ===== Page Transition: Fade-in on load / refresh ===== */ /* 'both' fill-mode means the browser holds opacity:0 before the animation starts (no white flash) and keeps opacity:1 after it ends. Because this CSS is in , it applies before the first paint. */ @keyframes ec-page-fade-in { from { opacity: 0; } to { opacity: 1; } } body { animation: ec-page-fade-in 0.45s ease-out both; } /* ===== Get a Call Popup Styles ===== */ /* Overlay — always in DOM, hidden via pointer-events + transparent bg */ .getacall-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); display: flex; align-items: center; justify-content: center; z-index: 99999; pointer-events: none; transition: background 0.4s ease; } .getacall-overlay.active { background: rgba(0, 0, 0, 0.5); pointer-events: auto; } /* ===== Callback Popup Card ===== */ .getacall-popup { background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15); width: 90%; max-width: 420px; padding: 0; position: relative; overflow: hidden; transform: translateY(-120vh); opacity: 0; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; } .getacall-popup.slide-in { transform: translateY(0); opacity: 1; } .getacall-popup.slide-out { transform: translateY(120vh); opacity: 0; transition: transform 0.5s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.4s ease; } /* Popup Header */ .getacall-popup-header { background: linear-gradient(135deg, #45CF90 0%, #2da86e 100%); padding: 20px 24px; text-align: center; } .getacall-popup-header h5 { color: #fff; margin: 0; font-size: 1.2rem; font-weight: 600; font-family: 'Poppins', sans-serif; } .getacall-popup-header p { color: rgba(255, 255, 255, 0.85); margin: 6px 0 0; font-size: 0.85rem; } /* Popup Body */ .getacall-popup-body { padding: 28px 24px 20px; } .getacall-input-group { position: relative; margin-bottom: 8px; } .getacall-input-group .getacall-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #555; font-size: 0.95rem; font-weight: 500; pointer-events: none; } .getacall-input-group input { width: 100%; padding: 14px 16px 14px 58px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 1rem; font-family: 'Inter', 'Poppins', sans-serif; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; } .getacall-input-group input:focus { border-color: #45CF90; box-shadow: 0 0 0 3px rgba(69, 207, 144, 0.15); } .getacall-input-group input.invalid { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1); } .getacall-error-msg { color: #dc3545; font-size: 0.8rem; margin: 4px 0 0 4px; display: none; } .getacall-error-msg.show { display: block; } /* Popup Footer / Buttons */ .getacall-popup-footer { display: flex; gap: 12px; padding: 0 24px 24px; } .getacall-btn { flex: 1; padding: 12px 20px; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; gap: 6px; } .getacall-btn-close { background: #dc3545; color: #fff; } .getacall-btn-close:hover { background: #c82333; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35); } .getacall-btn-submit { background: #28a745; color: #fff; } .getacall-btn-submit:hover { background: #218838; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35); } /* ===== Thank You Popup ===== */ .getacall-thankyou-popup { background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15); width: 90%; max-width: 400px; padding: 40px 28px; text-align: center; position: absolute; visibility: hidden; transform: translateY(-120vh); opacity: 0; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; } .getacall-thankyou-popup.slide-in { transform: translateY(0); opacity: 1; } .getacall-thankyou-popup.slide-out { transform: translateY(120vh); opacity: 0; transition: transform 0.5s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.4s ease; } /* Confetti Ring Burst */ .getacall-thankyou-icon-wrap { position: relative; display: inline-block; } .getacall-confetti-ring { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; border-radius: 50%; border: 3px solid rgba(69, 207, 144, 0.6); opacity: 0; transform: scale(0.3); pointer-events: none; } .getacall-thankyou-popup.slide-in .getacall-confetti-ring { animation: getacall-ringBurst 0.8s ease 0.3s forwards; } .getacall-thankyou-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #45CF90 0%, #2da86e 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; opacity: 0; transform: scale(0) rotate(-180deg); } .getacall-thankyou-popup.slide-in .getacall-thankyou-icon { animation: getacall-iconPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards; } .getacall-thankyou-icon i { font-size: 2.2rem; color: #fff; } .getacall-thankyou-popup h5 { font-size: 1.4rem; font-weight: 700; color: #222; margin: 0 0 10px; font-family: 'Poppins', sans-serif; opacity: 0; transform: translateY(15px); } .getacall-thankyou-popup.slide-in h5 { animation: getacall-textFadeUp 0.5s ease 0.55s forwards; } .getacall-thankyou-popup p { color: #666; font-size: 0.95rem; line-height: 1.6; margin: 0 0 24px; opacity: 0; transform: translateY(15px); } .getacall-thankyou-popup.slide-in p { animation: getacall-textFadeUp 0.5s ease 0.7s forwards; } .getacall-thankyou-close { padding: 10px 32px; background: linear-gradient(135deg, #45CF90 0%, #2da86e 100%); color: #fff; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'Poppins', sans-serif; opacity: 0; transform: translateY(15px); } .getacall-thankyou-popup.slide-in .getacall-thankyou-close { animation: getacall-textFadeUp 0.5s ease 0.85s forwards; } .getacall-thankyou-close:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(69, 207, 144, 0.4); } /* ===== Animations ===== */ @keyframes getacall-iconPop { 0% { opacity: 0; transform: scale(0) rotate(-180deg); } 60% { opacity: 1; transform: scale(1.15) rotate(10deg); } 80% { transform: scale(0.95) rotate(-5deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } @keyframes getacall-textFadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes getacall-ringBurst { 0% { opacity: 0.8; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.8); border-width: 1px; } } /* ===== Responsive ===== */ @media (max-width: 576px) { .getacall-popup { width: 94%; max-width: 360px; } .getacall-popup-header { padding: 16px 18px; } .getacall-popup-header h5 { font-size: 1.05rem; } .getacall-popup-body { padding: 22px 18px 16px; } .getacall-input-group input { padding: 12px 14px 12px 54px; font-size: 0.95rem; } .getacall-popup-footer { padding: 0 18px 20px; gap: 10px; } .getacall-btn { padding: 11px 14px; font-size: 0.88rem; } .getacall-thankyou-popup { width: 94%; max-width: 340px; padding: 32px 20px; } .getacall-thankyou-icon { width: 65px; height: 65px; } .getacall-thankyou-icon i { font-size: 1.8rem; } .getacall-thankyou-popup h5 { font-size: 1.15rem; } .getacall-thankyou-popup p { font-size: 0.88rem; } } @media (max-width: 380px) { .getacall-popup { width: 96%; } .getacall-popup-footer { flex-direction: column-reverse; gap: 8px; } .getacall-btn { width: 100%; } .getacall-thankyou-popup { width: 96%; padding: 28px 16px; } }