<стиль>
/* Voc-форма — контактная форма (для минимального и узкого пространства) */
.voc-form-fields-container {
дисплей: гибкий;
гибкое направление: столбец;
разрыв: 0,8бэр; /* Пространства значительно уменьшены */
фон: прозрачный; /* Фон и толстые отступы удалены */
граница: нет;
заполнение: 0;
ширина: 100%;
}
.voc-form-group {
дисплей: гибкий;
гибкое направление: столбец;
зазор: 0,3бэр; /* Пространство между тегом и входными данными сужено */
ширина: 100%;
поле-дно: 0 !важно;
}
.voc-метка {
цвет: rgba(255, 255, 255, 0,8) !важно;
вес шрифта: 600;
размер шрифта: 13 пикселей! важно; /* Более минимальный размер шрифта */
семейство шрифтов: «Интер», без засечек;
дисплей: гибкий;
выровнять-элементы: по центру;
зазор: 0,2бэр;
}
.voc-required-mark {
цвет: var(--brand-red, #f7374f) !important;
}
.voc-вход {
ширина: 100%;
фон: rgba(0, 0, 0, 0,2) !важно;
граница: 1 пиксель сплошной rgba(255, 255, 255, 0,1) !важно;
цвет: #fff !важно;
отступ: 0,7rem 1rem !важно; /* Утончено */
border-radius: 8px !important; /* Более минимальные овальные углы */
размер шрифта: 14 пикселей! важно;
семейство шрифтов: «Интер», без засечек;
контур: нет;
переход: все 0,3 секунды легкости;
фоновый фильтр: размытие (5 пикселей);
}
.voc-input::placeholder {
цвет: rgba(255, 255, 255, 0,3) !важно;
}
.voc-input:focus {
border-color: var(--brand-red, #f7374f) !important;
фон: rgba(0, 0, 0, 0,4) !важно;
box-shadow: 0 0 0 2px rgba(247, 55, 79, 0.1);
}
/* Выбор (всплывающее меню) пользовательских настроек */
.voc-select {
внешний вид: нет;
фоновое изображение: URL("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4% 22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5% 200-9,3%201,8-12,9%205,4А17,6%2017,6%200%200%200%200%2082.2c 0%205%201,8%209,3%205,4%2012,9l128%20127,9c3,6%203,6%207,8%2 05.4%2012.8%205.4с9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4- 7,8%205,4-12,8%200-5-1,9-9,2-5,5-12,8z%22%2F%3E%3C%2Fsvg%3E") !important;
фоновый повтор: без повтора !важно;
фоновая позиция: справа 1rem сверху 50% !important;
размер фона: 0,6rem авто !важно;
}
.voc-выбрать опцию {
фон: #0f172a;
цвет: #fff;
}
/* Настройки текстовой области */
.voc-textarea {
изменение размера: вертикальное;
минимальная высота: 80 пикселей! важно; /* Высота значительно уменьшена */
}
/* Дизайн флажка KVKK */
.voc-checkbox-wrapper {
маржа-верх: 0,2рем;
}
.voc-checkbox-label {
дисплей: гибкий;
выровнять-элементы: гибкий старт;
зазор: 0,6бэр;
курсор: указатель;
цвет: rgba(255, 255, 255, 0,7);
высота строки: 1,4;
размер шрифта: 12 пикселей! важно; /* Текст KVKK уменьшен */
}
.voc-checkbox-input {
внешний вид: нет;
минимальная ширина: 16 пикселей;
высота: 16 пикселей;
граница: 1 пиксель сплошной rgba(255, 255, 255, 0,2) !важно;
border-radius: 4px !important;
фон: rgba(0, 0, 0, 0,2) !важно;
курсор: указатель;
положение: относительное;
переход: все 0,2 секунды легкости;
поле сверху: 1 пиксель;
}
.voc-checkbox-input:проверено {
фон: var(--brand-red, #f7374f) !important;
border-color: var(--brand-red, #f7374f) !important;
}
.voc-checkbox-input:checked::after {
содержимое: '';
позиция: абсолютная;
слева: 4 пикселя;
мяч: 2 пикселя;
ширина: 4 пикселя;
высота: 8 пикселей;
граница: сплошная белая;
ширина границы: 0 2px 2px 0;
преобразование: поворот (45 градусов);
}
.voc-checkbox-content а {
цвет: var(--brand-red, #f7374f) !important;
оформление текста: подчеркивание;
размер шрифта: 12 пикселей! важно;
}
/* Кнопка отправки (минимальная) */
.voc-submit-btn {
маржа-верх: 0,5рем;
фон: var(--brand-red, #f7374f) !important;
цвет: #fff !важно;
граница: нет !важно;
отступ: 0,8рем 1,5рем !важно; /* Утончено */
border-radius: 8px !important; /* Совместимые ребра */
вес шрифта: 600;
размер шрифта: 14 пикселей! важно;
семейство шрифтов: «Интер», без засечек;
курсор: указатель;
дисплей: гибкий;
выровнять-элементы: по центру;
оправдание-содержание: центр;
зазор: 0,5бэр;
переход: все 0,3 секунды легкости;
ширина: 100%;
}
.voc-submit-btn:hover {
фон: #e02040 !important;
преобразование: TranslateY (-1px);
}
/* Загрузка счетчика */
.voc-спиннер {
отображение: встроенный блок;
ширина: 14 пикселей;
высота: 14 пикселей;
граница: 2 пикселя, сплошная rgba (255,255,255,0,3);
радиус границы: 50%;
цвет границы-топа: #fff;
анимация: vocSpin 1s, бесконечная легкость входа и выхода;
}
@keyframes vocSpin {
в {преобразование: поворот (360 градусов); }
}