/* ========================================================================== Get In Touch modal opened from the floating social email button. Reuses Bootstrap 5 modal markup + the contact-form component styles. Scoped to .jfs-get-in-touch-modal so it can never bleed into other modals. ========================================================================== */ /* -------------------------------------------------------------------------- Anti-jump: disable Bootstrap 5's body scrollbar compensation. - Bootstrap adds `padding-right: px` to when opening a modal so fixed-position elements (e.g. navbar) stay aligned. The page then snaps back when the modal closes -> perceived page jump. - Our floating social bar uses `right: var(--jfs-offset-x)` (relative to the viewport), not the body, so it does not need compensation. - Forcing padding-right to 0 keeps the document width stable and prevents any other layout shift while the modal is open. -------------------------------------------------------------------------- */ body.modal-open.jfs-modal-open, body.modal-open.jfs-modal-open > * { padding-right: 0 !important; } /* While the modal is open the floating sidebar trigger must not stay in its :hover/:focus-visible state (translateX/scale), which itself would look like a small jump when the modal closes. */ body.jfs-modal-open .jfs-floating-social__link { pointer-events: none; } body.jfs-modal-open .jfs-floating-social__link, body.jfs-modal-open .jfs-floating-social__link:hover, body.jfs-modal-open .jfs-floating-social__link:focus, body.jfs-modal-open .jfs-floating-social__link:focus-visible { transform: none !important; } body.jfs-modal-open .jfs-floating-social__link > span { opacity: 0 !important; } .jfs-get-in-touch-modal.modal { z-index: var(--jfs-modal-z-index, 1080); } .jfs-get-in-touch-modal .modal-dialog { max-width: 640px; margin: 1.75rem auto; } .jfs-get-in-touch-modal .modal-content { border: 0; border-radius: 18px; background: #ffffff; box-shadow: 0 24px 64px rgba(11, 68, 135, 0.18); overflow: hidden; } .jfs-get-in-touch-modal .modal-header { position: relative; padding: 28px 64px 16px 28px; border-bottom: 1px solid rgba(11, 68, 135, 0.08); background: linear-gradient(135deg, #0b4487 0%, #176eb6 100%); color: #fff; } .jfs-get-in-touch-modal .modal-title { margin: 0; color: inherit; font-family: "Outfit", "Helvetica Neue", Arial, sans-serif; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: 0; } .jfs-get-in-touch-modal .modal-subtitle { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.82); font-size: 14px; font-weight: 500; letter-spacing: 0.2px; } .jfs-get-in-touch-modal .btn-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; opacity: 1; transition: background-color 180ms ease, transform 180ms ease; background-image: url("data:image/svg+xml;charset=utf-8,"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } .jfs-get-in-touch-modal .btn-close:hover, .jfs-get-in-touch-modal .btn-close:focus-visible { background-color: rgba(255, 255, 255, 0.36); box-shadow: none; transform: scale(1.05); } .jfs-get-in-touch-modal .modal-body { padding: 24px 28px 28px; background: #f8faff; } /* ---- Contact form overrides inside the modal (lighter than page variant) ---- */ .jfs-get-in-touch-modal .contact-form { margin: 0; } .jfs-get-in-touch-modal .contact-form .form-grid { grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 14px; } .jfs-get-in-touch-modal .contact-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea.form-control, textarea) { height: 46px; padding: 0 14px; background: rgba(225, 239, 255, 0.95); color: #0b4487; font-size: 15px; border-radius: 6px; } .jfs-get-in-touch-modal .contact-form textarea.form-control, .jfs-get-in-touch-modal .contact-form textarea { height: 130px; padding: 12px 14px; margin-bottom: 16px; font-size: 15px; } .jfs-get-in-touch-modal .contact-form button[type="submit"] { height: 50px; background: linear-gradient(90deg, #0b4487 0%, #4eb7e2 50%, #0b4487 100%); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 1.4px; border-radius: 4px; } .jfs-get-in-touch-modal .l-cfts-widget { margin: 12px 0 16px; min-height: 65px; min-width: 300px; } .jfs-get-in-touch-modal .l-cfts-widget iframe { display: block; width: 100% !important; max-width: 100%; } .jfs-get-in-touch-modal .contact-form-status { margin-top: 12px; font-size: 13px; color: #0b4487; } .jfs-get-in-touch-modal .contact-form-status[data-state="success"] { color: #2c9a6f; } .jfs-get-in-touch-modal .contact-form-status[data-state="error"] { color: #c2473b; } /* ---- Floating-bar trigger visual hint ---- */ .jfs-floating-social__link[data-jfs-modal="get-in-touch"] { cursor: pointer; } .jfs-floating-social__link[data-jfs-modal="get-in-touch"]:focus-visible { outline: 2px solid var(--jfs-primary, #0b4487); outline-offset: 2px; } /* ---- Reduced motion + responsive ---- */ @media (prefers-reduced-motion: reduce) { .jfs-get-in-touch-modal .modal-content, .jfs-get-in-touch-modal .btn-close { transition: none; } } @media (max-width: 575.98px) { .jfs-get-in-touch-modal .modal-dialog { margin: 0.5rem; } .jfs-get-in-touch-modal .modal-header { padding: 22px 56px 12px 20px; } .jfs-get-in-touch-modal .modal-title { font-size: 19px; } .jfs-get-in-touch-modal .modal-subtitle { font-size: 13px; } .jfs-get-in-touch-modal .modal-body { padding: 18px 20px 22px; } .jfs-get-in-touch-modal .contact-form .form-grid { grid-template-columns: 1fr; } }