Интерактивный макет карты России для компании Лукойл Интернешнл

style /* Основные стили формы */ .elementor-4442 .elementor-element.elementor-element-2d081b6 { --row-gap: 26px !important; } .custom-contact-form { background-color: #F2C94C; /* Желтый фон */ border-radius: 4px; /* Закругленные углы */ padding-top: 20px !important; padding-left: 20px !important; width: 530px; height: 200px; box-sizing: border-box; align-content: center; } /* Заголовок формы */ .form-title { font-family: 'GothamProBold', sans-serif; font-size: 14px; color: #000; margin-bottom: 5px; line-height: 1.2; text-align: left; } /* Контейнер полей ввода */ .custom-contact-form p { display: flex; gap: 9px; margin-bottom: 15px; margin-top: 0px; /* Поднимает кнопку */ } /* Стили полей ввода */ .form-input { width: 230px !important; height: 50px !important; background-color: #fff !important; border: none !important; border-radius: 0px !important; padding: 10px !important; font-family: 'MontserratRegular', sans-serif; font-size: 14px !important; color: #666 !important; box-sizing: border-box !important; } /* Плейсхолдер */ .form-input::placeholder { color: #999 !important; } .form-submit2 { padding-bottom: 5px; } /* Кнопка отправки */ .submit-button2 { background: none !important; border: none !important; color: #000 !important; font-family: 'MontserratRegular', sans-serif; font-size: 16px !important; padding-left: 10px !important; margin-top: -10px !important; cursor: pointer !important; text-align: left !important; text-transform: none !important; /* Убираем преобразование в нижний регистр */ font-weight: 600 !important; /* Устанавливаем жирное начертание */ } /*планшетная версия*/ @media (min-width: 1024px) and (max-width: 1500px) { .custom-contact-form { padding-top: 20px !important; padding-left: 20px !important; padding-right: 20px !important; /* width: 350px !important; height: auto; } .custom-contact-form p { flex-direction: column; /* Поля будут друг под другом на мобильных */ } .form-title { font-family: 'GothamProBold', sans-serif; font-size: 14px; color: #000; margin-bottom: 10px; text-align: center; } .form-input { width: 100% !important; margin-bottom: -30px !important; } .form-submit2 { text-align: center; /* Кнопка по центру */ padding-bottom: 0; /* Уберите или настройте padding-bottom */ } .submit-button2 { font-family: 'MontserratRegular', sans-seri; text-align: center !important; margin-top: 40px !important; margin-bottom: -20px !important; font-weight: 600 !important; /* Устанавливаем жирное начертание */ font-size: 17px !important; } } /* Мобильная версия */ @media (max-width: 750px) { .custom-contact-form { padding-top: 45px !important; padding-left: 20px !important; padding-right: 20px !important; width: 100% !important; height: auto; } .custom-contact-form p { flex-direction: column; /* Поля будут друг под другом на мобильных */ } .form-title { font-family: 'GothamProBold', sans-serif; font-size: 14px; color: #000; margin-bottom: 10px; text-align: center; } .form-input { width: 100% !important; margin-bottom: -30px !important; } .form-submit2 { text-align: center; /* Кнопка по центру */ padding-bottom: 0; /* Уберите или настройте padding-bottom */ } .submit-button2 { font-family: 'MontserratRegular', sans-seri; text-align: center !important; margin-top: 40px !important; margin-bottom: -20px !important; font-weight: 600 !important; /* Устанавливаем жирное начертание */ font-size: 17px !important; } } /style script document.addEventListener('DOMContentLoaded', function() { // Принудительно проверяем и исправляем расположение полей var container = document.querySelector('.form-inputs-container'); if (container) { container.style.display = 'flex'; container.style.flexDirection = 'row'; container.style.flexWrap = 'nowrap'; } // Применяем маску для телефона var phoneInput = document.querySelector('input[type="tel"]'); if (phoneInput) { phoneInput.addEventListener('input', function(e) { var x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/); e.target.value = !x[2] ? '+7' : '+7(' + x[2] + (x[3] ? ') ' + x[3] : '') + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : ''); }); phoneInput.value = '+7('; } }); /script