@font-face {
font-family: 'Druk Cyr';
src: url('./fonts/drukwidecyr-bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
body {
background-color: #999;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form {
position: relative;
font-family: "Golos Text", sans-serif;
width: 100%;
max-width: 492px;
padding: 32px;
box-sizing: border-box;
background-color: #fff;
border-radius: 25px;
@media(max-width: 640px) {
max-width: 320px;
padding: 40px 20px 20px;
}
}
/* Кнопка "Назад" */
.form__back-btn {
font-family: "Golos Text", sans-serif;
border: none;
font-size: 16px;
font-weight: 600;
color: #222222;
cursor: pointer;
margin-bottom: 25px;
padding-left: 25px;
background-color: transparent;
background-image: url("./icons/arrow-up-right.svg"); /* Своя стрелка */
background-repeat: no-repeat;
background-position: left bottom; /* Смещение стрелки */
@media(max-width: 640px) {
display: none;
}
}
.form__close-btn {
display: none;
width: 15px;
height: 15px;
position: absolute;
right: 20px;
top: 20px;
background-image: url("./icons/close.svg");
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
border: 0;
@media(max-width: 640px) {
display: block;
}
}
/* Заголовок */
.form__title {
font-family: 'Druk Cyr', sans-serif;
font-size: 45px;
font-weight: 900;
color: #222432;
margin-bottom: 32px;
margin-top: 0;
@media(max-width: 640px) {
font-size: 24px;
font-weight: 700;
}
}
.form__row {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.form__row:not(:last-child) {
margin-bottom: 8px;
}
.form__label {
font-size: 14px;
color: #454F5B;
text-align: left;
margin-bottom: 4px;
}
.form__select {
appearance: none;
-webkit-appearance: none; /* Для Safari */
-moz-appearance: none; /* Для Firefox */
background-image: url("./icons/select-arrow.svg"); /* Своя стрелка */
background-repeat: no-repeat;
background-position: right 10px center; /* Смещение стрелки */
padding-right: 30px; /* Убираем перекрытие текста */
}
.form__select:focus, .form__input:focus {
border-color: #8B8B8B;
}
.form__select, .form__input {
border: 1px solid transparent;
width: 100%;
height: 56px;
padding: 0 12px;
box-sizing: border-box;
font-size: 16px;
border-radius: 16px;
background-color: #f7f7f7;
outline: none;
@media(max-width: 640px) {
height: 48px;
border-radius: 12px;
}
}
/* Кнопка "Отправить" */
.form__submit-btn {
font-family: "Golos Text", sans-serif;
width: 100%;
margin-top: 15px;
padding: 20px 12px;
font-size: 16px;
font-weight: 600;
background-color: #212B36;
color: #fff;
border: none;
border-radius: 16px;
cursor: pointer;
}
.form__submit-btn:hover {
background-color: #333;
}
/* Подсказка */
.form__note {
font-size: 14px;
color: #636D79;
margin-top: 12px;
margin-bottom: 0;
text-align: left;
}
.form__link {
color: #212B36;
text-decoration: none;
}