/* ──────────────────────────────────────────────────────────────── Divine Pathways — Lead form styles Scoped to .lead-form so existing CSS elsewhere is untouched. Loaded last in so these rules win on equal specificity. ──────────────────────────────────────────────────────────────── */ /* Hide the reCAPTCHA v3 floating badge — disclosure shown under every submit button instead. Allowed by Google as long as the disclosure text is visible to the user. */ .grecaptcha-badge { visibility: hidden !important; } /* ──────────── Form layout ──────────── */ .lead-form { width: 100%; margin: 0; } .lead-form .row { margin-left: -8px; margin-right: -8px; } .lead-form .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; margin-bottom: 22px; } /* ──────────── Labels ──────────── */ .lead-form label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 500; color: #555; letter-spacing: 0.2px; } /* ──────────── Inputs / textarea / select ──────────── */ .lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="email"], .lead-form input[type="number"], .lead-form select, .lead-form textarea { display: block; width: 100%; min-height: 46px; /* touch-friendly */ padding: 12px 16px; margin: 0; font-family: inherit; font-size: 15px; line-height: 1.4; color: #222; background-color: #fff; border: 1px solid #d8d8d8; border-radius: 4px; outline: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; } .lead-form input::placeholder, .lead-form textarea::placeholder { color: #aaa; opacity: 1; } .lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: #888; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); } .lead-form input:invalid:not(:placeholder-shown) { border-color: #d96565; } .lead-form input[readonly] { background: #f5f5f5; color: #666; cursor: not-allowed; } .lead-form textarea { min-height: 96px; resize: vertical; } /* Custom select arrow (since we removed native appearance) */ .lead-form select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px; padding-right: 36px; cursor: pointer; } /* ──────────── Submit button ──────────── */ .lead-form button[type="submit"], .lead-form input[type="submit"] { display: block; width: 100%; min-height: 50px; padding: 14px 24px; margin-top: 4px; margin-top: 8px; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-align: center; color: #fff; background: #f18915; /* brand orange */ border: 0; border-radius: 4px; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background 0.15s ease, transform 0.05s ease; } .lead-form button[type="submit"]:hover, .lead-form input[type="submit"]:hover { background: #d77a13; } .lead-form button[type="submit"]:active, .lead-form input[type="submit"]:active { transform: translateY(1px); } .lead-form button[type="submit"]:disabled, .lead-form input[type="submit"]:disabled { opacity: 0.7; cursor: not-allowed; } /* ──────────── reCAPTCHA disclosure (under every submit button) ──────────── */ .lead-form__notice { display: block; margin-top: 14px; padding: 0 4px; font-size: 11px; line-height: 1.5; color: #888; text-align: center; } .lead-form__notice a { color: #888; text-decoration: underline; } .lead-form__notice a:hover { color: #555; } /* ──────────── Modal-specific tweaks ──────────── */ .modal .lead-form { margin: 0; } .modal .modal-body { padding: 28px; } .modal .modal-content { border-radius: 8px; border: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .modal .modal-header { border: 0; padding: 12px 16px 0; } .modal .heading { font-size: 22px; margin-bottom: 16px; line-height: 1.3; } /* Image column inside enquiry popups */ .modal .popup_img, .modal .index_modal { text-align: center; } .modal .popup_img img, .modal .index_modal img { max-width: 100%; height: auto; border-radius: 6px; } /* ──────────── Quick Query slide-out (sidebar) overrides ──────────── */ #slideout .lead-form input[type="text"], #slideout .lead-form input[type="tel"], #slideout .lead-form input[type="email"], #slideout .lead-form select, #slideout .lead-form textarea { margin-bottom: 8px; font-size: 14px; min-height: 40px; padding: 8px 12px; } #slideout .lead-form textarea { min-height: 70px; } #slideout .lead-form button[type="submit"] { margin-top: 6px; min-height: 42px; font-size: 13px; } #slideout .lead-form__notice { font-size: 10px; margin-top: 8px; line-height: 1.4; } /* ──────────── Footer "Request A Call Back" — sits on dark bg ──────────── */ .request_a_call_back .lead-form label { color: rgba(255, 255, 255, 0.7); } .request_a_call_back .lead-form input { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #fff; } .request_a_call_back .lead-form input::placeholder { color: rgba(255, 255, 255, 0.45); } .request_a_call_back .lead-form input:focus { border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); } .request_a_call_back .lead-form__notice { color: rgba(255, 255, 255, 0.55); } .request_a_call_back .lead-form__notice a { color: rgba(255, 255, 255, 0.7); } /* ──────────── Responsive: tablet & below ──────────── */ @media (max-width: 991px) { .lead-form button[type="submit"], .lead-form input[type="submit"] { font-size: 13px; } } /* ──────────── Responsive: phones ──────────── */ @media (max-width: 767px) { /* Stack image above form inside enquiry modals */ .modal-dialog { margin: 12px; max-width: calc(100vw - 24px); } .modal .modal-body { padding: 16px; } .modal .heading { font-size: 18px; } .modal .popup_img, .modal .index_modal { margin-bottom: 16px; } .modal .popup_img img, .modal .index_modal img { max-width: 50%; margin: 0 auto; } .lead-form .row > [class*="col-"] { margin-bottom: 12px; } .lead-form input, .lead-form select, .lead-form textarea { font-size: 16px; /* prevents iOS zoom-on-focus */ } /* Quick Query slide-out: use most of the screen on phone */ #slideout { width: calc(100vw - 24px); max-width: 320px; } /* Reduce footer-form crowding */ .request_a_call_back .lead-form .row > [class*="col-"] { margin-bottom: 10px; } } /* ──────────── Responsive: very small phones ──────────── */ @media (max-width: 360px) { .modal .heading { font-size: 16px; } .lead-form button[type="submit"] { letter-spacing: 0.5px; } } /* ──────────── Larger modals on desktop ──────────── */ @media (min-width: 992px) { #exampleModalCenter, .modal[id^="exampleModalCenter"], #myModal { --modal-max: 760px; } .modal[id^="exampleModalCenter"] .modal-dialog, #myModal .modal-dialog { max-width: 760px; } } /* ════════════════════════════════════════════════════════════════ Footer polish ════════════════════════════════════════════════════════════════ */ .ast_footer_wrapper .widget { margin-bottom: 28px; } @media (min-width: 992px) { .ast_footer_wrapper .widget { margin-bottom: 0; } } /* Social icons row */ .ast_footer_info ul.dp-social { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .ast_footer_info ul.dp-social li { margin: 0; padding: 0; display: inline-block; } .ast_footer_info ul.dp-social li a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.75); font-size: 16px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .ast_footer_info ul.dp-social li a:hover { background: #f18915; color: #fff; transform: translateY(-2px); } /* Copyright bar — spans the full footer width, items pinned to opposite edges */ .ast_copyright_bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 36px; padding: 20px 40px 4px; } .ast_copyright_bar .dp-copyright, .ast_copyright_bar .dp-credit { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.6); line-height: 1.7; } .ast_copyright_bar a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.15s ease; } .ast_copyright_bar a:hover { color: #f18915; } @media (max-width: 991px) { .ast_copyright_bar { padding: 18px 24px 4px; } } @media (max-width: 767px) { .ast_copyright_bar { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 20px 4px; } } /* ════════════════════════════════════════════════════════════════ Quick Query slide-out trigger button (replaces the old ) ════════════════════════════════════════════════════════════════ */ #slideout .slideout-trigger { display: inline-block; margin: 0; padding: 18px 11px; background: #f18915; color: #fff; border: 0; border-radius: 6px 0 0 6px; cursor: pointer; font-family: inherit; line-height: 1; text-align: center; box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2); -webkit-appearance: none; appearance: none; transition: background 0.2s ease, padding 0.2s ease, box-shadow 0.2s ease; } #slideout .slideout-trigger__label { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; } #slideout .slideout-trigger:hover { background: #d77a13; padding-right: 14px; box-shadow: -3px 3px 14px rgba(0, 0, 0, 0.25); } #slideout .slideout-trigger:focus { outline: 0; box-shadow: -2px 2px 12px rgba(255, 111, 0, 0.55); } #slideout .slideout-trigger:active { transform: translateX(1px); } @media (max-width: 767px) { #slideout .slideout-trigger { padding: 14px 9px; } #slideout .slideout-trigger__label { font-size: 11px; letter-spacing: 1px; } } /* ════════════════════════════════════════════════════════════════ Floating WhatsApp action button New class .whatsapp-fab — old .call_me CSS no longer applies. ════════════════════════════════════════════════════════════════ */ .whatsapp-fab { position: fixed; bottom: 28px; left: 28px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; /* WhatsApp brand green */ color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; text-decoration: none; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15); z-index: 9990; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .whatsapp-fab:hover, .whatsapp-fab:focus { background: #1ebe57; color: #fff; transform: scale(1.08); box-shadow: 0 8px 22px rgba(37, 211, 102, 0.55), 0 3px 8px rgba(0, 0, 0, 0.18); outline: 0; } .whatsapp-fab i { line-height: 1; } /* Pulse ripple ring (uses ::before so it doesn't affect layout) */ .whatsapp-fab::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.6); animation: dp-fab-pulse 1.8s ease-out infinite; pointer-events: none; } @keyframes dp-fab-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.55); opacity: 0; } } /* Respect users who've opted out of motion */ @media (prefers-reduced-motion: reduce) { .whatsapp-fab::before { animation: none; } } @media (max-width: 767px) { .whatsapp-fab { bottom: 20px; left: 20px; width: 50px; height: 50px; font-size: 24px; } }