/* ========================================================= HEADER MENU — универсально для Zero Block ========================================================= */ .t396__artboard .t396__elem[data-elem-type="text"] .tn-atom a { transition: color 0.2s ease; } @media (hover: hover) and (pointer: fine) { .t396__artboard .t396__elem[data-elem-type="text"] .tn-atom a:hover { color: #E31B23 !important; } } .t396__artboard .t396__elem[data-elem-type="text"] .tn-atom a:focus-visible { color: #E31B23 !important; } /* ========================================================= ПРОМОКОСТЕР — DROPDOWN "ПРОДУКЦИЯ" Универсально для всех T794 ========================================================= */ .t794__tooltip-menu { max-width: 290px !important; background: #ffffff; border: 1px solid #e8e8e8; border-radius: 8px; box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08); text-align: left; } .t794__content { padding: 8px 0; } .t794__list_item { margin-bottom: 0; } .t794__typo { box-sizing: border-box; padding: 11px 20px; font-family: 'TildaSans', Arial, sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: #222222 !important; transition: color 0.15s ease, background-color 0.15s ease; } .t794__typo:hover { color: #e31b23 !important; background-color: #fff5f5; } /* "Вся продукция" */ .t794__list_item:first-child { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #eeeeee; } .t794__list_item:first-child .t794__typo { font-weight: 600; } /* Убираем декоративный треугольник */ .t794__tooltip-menu::before, .t794__tooltip-menu::after, .t794__tooltip-menu-corner { display: none !important; } /* ========================================================= ПРОМОКОСТЕР ФОРМЫ ZERO BLOCK Универсальный стиль. Без #rec Без data-elem-id ========================================================= */ .tn-atom__form { --pm-red: #e31b23; --pm-red-hover: #c91820; --pm-red-active: #b9151c; --pm-text: #111111; --pm-label: #222222; --pm-muted: #666666; --pm-placeholder: #999999; --pm-border: #dcdcdc; --pm-border-hover: #bdbdbd; --pm-border-light: #eeeeee; --pm-white: #ffffff; } /* ========================================================= 1. КАРТОЧКА ФОРМЫ ========================================================= */ .tn-atom__form { box-sizing: border-box !important; width: 100% !important; padding: 18px !important; background: var(--pm-white) !important; border: 1px solid var(--pm-border-light) !important; border-radius: 12px !important; box-shadow: none !important; } /* Внутренняя форма */ .tn-atom__form .t-form, .tn-atom__form .t-form__inputsbox { box-sizing: border-box !important; width: 100% !important; } /* ========================================================= 2. СЕТКА И ОТСТУПЫ Продукция + Тираж Имя + Телефон ========================================================= */ .tn-atom__form .t-form__inputsbox { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; column-gap: 12px !important; row-gap: 0 !important; } .tn-atom__form .t-input-group { box-sizing: border-box !important; margin-bottom: 14px !important; } /* Убираем штатные horizontal margin */ .tn-atom__form .t-input-group_inrow-withsibling, .tn-atom__form .t-input-group_inrow-last { margin-right: 0 !important; } /* Половинные поля */ .tn-atom__form .t-input-group_width50 { box-sizing: border-box !important; flex: 0 0 calc(50% - 6px) !important; width: calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; min-width: 0 !important; } /* Остальные поля */ .tn-atom__form .t-input-group:not(.t-input-group_width50) { box-sizing: border-box !important; flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } /* Комментарий */ .tn-atom__form .t-input-group_ta { margin-bottom: 12px !important; } /* Upload */ .tn-atom__form .t-input-group_uw { margin-bottom: 12px !important; } /* Checkbox */ .tn-atom__form .t-input-group_cb { margin-bottom: 14px !important; } /* Error + submit */ .tn-atom__form .t-form__errorbox-middle, .tn-atom__form .tn-form__submit { flex: 0 0 100% !important; width: 100% !important; } /* ========================================================= 3. НАЗВАНИЯ ПОЛЕЙ ========================================================= */ .tn-atom__form .t-input-title { box-sizing: border-box !important; padding-bottom: 5px !important; font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 16px !important; color: var(--pm-label) !important; } /* ========================================================= 4. INPUT / EMAIL / TEXT ========================================================= */ .tn-atom__form input.t-input:not(.t-input-phonemask) { box-sizing: border-box !important; width: 100% !important; height: 44px !important; padding: 0 13px !important; background: var(--pm-white) !important; border: 1px solid var(--pm-border) !important; border-radius: 6px !important; box-shadow: none !important; outline: none !important; font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 42px !important; color: var(--pm-text) !important; transition: border-color .18s ease, background-color .18s ease !important; } /* ========================================================= 5. DROPDOWN "ПРОДУКЦИЯ" ========================================================= */ .tn-atom__form .t-select { box-sizing: border-box !important; width: 100% !important; height: 44px !important; padding-left: 13px !important; padding-right: 38px !important; background-color: var(--pm-white) !important; border: 1px solid var(--pm-border) !important; border-radius: 6px !important; box-shadow: none !important; outline: none !important; font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 14px !important; font-weight: 400 !important; color: var(--pm-text) !important; transition: border-color .18s ease !important; } /* Placeholder */ .tn-atom__form .t-select:invalid { color: var(--pm-placeholder) !important; } .tn-atom__form .t-select option { color: var(--pm-text) !important; } /* Стрелка */ .tn-atom__form .t-select__wrapper::after { border-top-color: #666666 !important; } /* ========================================================= 6. ТЕЛЕФОН ========================================================= */ .tn-atom__form .t-input-phonemask__wrap { box-sizing: border-box !important; width: 100% !important; height: 44px !important; background: var(--pm-white) !important; border: 1px solid var(--pm-border) !important; border-radius: 6px !important; box-shadow: none !important; outline: none !important; color: var(--pm-text) !important; transition: border-color .18s ease !important; } /* Внутренний input телефона */ .tn-atom__form input.t-input-phonemask { box-sizing: border-box !important; height: 42px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 14px !important; font-weight: 400 !important; color: var(--pm-text) !important; } .tn-atom__form .t-input-phonemask__select-code { font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--pm-text) !important; } /* ========================================================= 7. TEXTAREA ========================================================= */ .tn-atom__form textarea.t-input { box-sizing: border-box !important; width: 100% !important; height: 60px !important; min-height: 60px !important; padding: 10px 13px !important; resize: none !important; background: var(--pm-white) !important; border: 1px solid var(--pm-border) !important; border-radius: 6px !important; box-shadow: none !important; outline: none !important; font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 19px !important; color: var(--pm-text) !important; transition: border-color .18s ease !important; } /* ========================================================= 8. PLACEHOLDER ========================================================= */ .tn-atom__form input::placeholder, .tn-atom__form textarea::placeholder { color: var(--pm-placeholder) !important; opacity: 1 !important; } .tn-atom__form input::-webkit-input-placeholder, .tn-atom__form textarea::-webkit-input-placeholder { color: var(--pm-placeholder) !important; opacity: 1 !important; } /* ========================================================= 9. HOVER ========================================================= */ .tn-atom__form input.t-input:not(.t-input-phonemask):hover, .tn-atom__form .t-select:hover, .tn-atom__form textarea.t-input:hover, .tn-atom__form .t-input-phonemask__wrap:hover { border-color: var(--pm-border-hover) !important; } /* ========================================================= 10. FOCUS ========================================================= */ .tn-atom__form input.t-input:not(.t-input-phonemask):focus, .tn-atom__form .t-select:focus, .tn-atom__form textarea.t-input:focus, .tn-atom__form .t-input-phonemask__wrap:focus-within { border-color: var(--pm-red) !important; box-shadow: none !important; outline: none !important; } /* ========================================================= 11. ЗАГРУЗКА ФАЙЛА ========================================================= */ .tn-atom__form .t-upwidget { min-height: 36px !important; margin-bottom: 0 !important; } /* Кнопка */ .tn-atom__form .t-upwidget-container__button, .tn-atom__form .t-upwidget-container__button-indiv { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 36px !important; padding: 0 14px !important; background: var(--pm-white) !important; border: 1px solid #d8d8d8 !important; border-radius: 6px !important; box-shadow: none !important; font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; color: #333333 !important; cursor: pointer !important; transition: color .18s ease, border-color .18s ease, background-color .18s ease !important; } .tn-atom__form .t-upwidget-container__button:hover, .tn-atom__form .t-upwidget-container__button-indiv:hover { color: var(--pm-red) !important; border-color: var(--pm-red) !important; background: var(--pm-white) !important; } /* Данные выбранного файла */ .tn-atom__form .t-upwidget-container__data { font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 12px !important; color: var(--pm-muted) !important; } /* Subtitle */ .tn-atom__form .t-input-subtitle { padding-bottom: 6px !important; color: #888888 !important; font-size: 11px !important; font-weight: 400 !important; line-height: 14px !important; } /* ========================================================= 12. CHECKBOX СОГЛАСИЯ ========================================================= */ .tn-atom__form .t-checkbox__control { --size: 18px !important; --border-width: 1px !important; align-items: flex-start !important; font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 16px !important; color: #555555 !important; } .tn-atom__form .t-checkbox__indicator { box-sizing: border-box !important; width: 18px !important; height: 18px !important; flex: 0 0 18px !important; margin-top: 0 !important; background: var(--pm-white) !important; border: 1px solid #cfcfcf !important; border-radius: 4px !important; transition: background-color .15s ease, border-color .15s ease !important; } /* Checked */ .tn-atom__form .t-checkbox:checked + .t-checkbox__indicator { background: var(--pm-red) !important; border-color: var(--pm-red) !important; } /* Галочка */ .tn-atom__form .t-checkbox__indicator::after { border-color: var(--pm-white) !important; } /* Текст */ .tn-atom__form .t-checkbox__labeltext { padding-left: 8px !important; color: #555555 !important; font-size: 12px !important; line-height: 16px !important; } /* Privacy */ .tn-atom__form .t-checkbox__labeltext a { color: var(--pm-red) !important; text-decoration: none !important; transition: color .18s ease !important; } .tn-atom__form .t-checkbox__labeltext a:hover { color: var(--pm-red-hover) !important; text-decoration: underline !important; } /* ========================================================= 13. SUBMIT ========================================================= */ .tn-atom__form .tn-form__submit { width: 100% !important; margin: 0 !important; } .tn-atom__form .t-submit { box-sizing: border-box !important; width: 100% !important; height: 46px !important; padding: 0 20px !important; background: var(--pm-red) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--pm-white) !important; cursor: pointer !important; transition: background-color .18s ease, transform .08s ease !important; } .tn-atom__form .t-submit:hover { background: var(--pm-red-hover) !important; } .tn-atom__form .t-submit:active { background: var(--pm-red-active) !important; transform: translateY(1px); } .tn-atom__form .t-submit:focus-visible { outline: 2px solid var(--pm-red) !important; outline-offset: 2px !important; } /* Текст */ .tn-atom__form .t-submit__text { color: var(--pm-white) !important; } /* ========================================================= 14. ОШИБКИ ========================================================= */ .tn-atom__form .t-input-error { box-sizing: border-box !important; margin-top: 6px !important; padding: 7px 9px !important; background: var(--pm-white) !important; border: 1px solid #f0c9cc !important; border-radius: 6px !important; box-shadow: 0 6px 18px rgba(17, 17, 17, .08) !important; font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 14px !important; color: #c91820 !important; } /* Стрелка tooltip */ .tn-atom__form .t-input-error::after { border-bottom-color: var(--pm-white) !important; } /* Красная рамка */ .tn-atom__form .js-error-control-box input.t-input:not(.t-input-phonemask), .tn-atom__form .js-error-control-box .t-select, .tn-atom__form .js-error-control-box textarea.t-input, .tn-atom__form .js-error-control-box .t-input-phonemask__wrap { border-color: #d92d20 !important; } /* ========================================================= 15. SUCCESS ========================================================= */ .tn-atom__form .t-form__successbox { box-sizing: border-box !important; padding: 28px 20px !important; background: var(--pm-white) !important; border-radius: 8px !important; font-family: var( --t-text-font, Arial, sans-serif ) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; text-align: center !important; color: var(--pm-text) !important; } /* ========================================================= 16. МОБИЛЬНАЯ АДАПТАЦИЯ ========================================================= */ @media screen and (max-width: 639px) { .tn-atom__form { padding: 14px !important; border-radius: 10px !important; } .tn-atom__form .t-form__inputsbox { column-gap: 0 !important; } /* 50% -> 100% */ .tn-atom__form .t-input-group_width50 { flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; } .tn-atom__form .t-input-title { font-size: 12px !important; line-height: 15px !important; } .tn-atom__form input.t-input:not(.t-input-phonemask), .tn-atom__form .t-select, .tn-atom__form .t-input-phonemask__wrap { height: 44px !important; } .tn-atom__form input.t-input:not(.t-input-phonemask), .tn-atom__form .t-select, .tn-atom__form textarea.t-input, .tn-atom__form input.t-input-phonemask, .tn-atom__form .t-input-phonemask__select-code { font-size: 14px !important; } .tn-atom__form .t-submit { height: 44px !important; font-size: 13px !important; } .tn-atom__form .t-checkbox__control, .tn-atom__form .t-checkbox__labeltext { font-size: 11px !important; line-height: 15px !important; } } /* ========================================================= ПРОМОКОСТЕР — FOOTER Лёгкий стилистический эффект Только блок #rec4940931601 ========================================================= */ /* Сам футер */ #rec4940931601 .t396__artboard { background: linear-gradient( 180deg, rgba(17, 17, 17, 0.025) 0px, rgba(17, 17, 17, 0.008) 28px, rgba(255, 255, 255, 0) 70px ), #ffffff; box-shadow: inset 0 1px 0 rgba(17, 17, 17, 0.06); transition: background-color .25s ease; } /* ========================================================= ССЫЛКИ ========================================================= */ #rec4940931601 .tn-atom a { display: inline-block; text-decoration: none !important; transition: color .18s ease, transform .18s ease; } /* Hover только на устройствах с мышью */ @media (hover: hover) and (pointer: fine) { #rec4940931601 .tn-atom a:hover { color: #E31B23 !important; transform: translateX(2px); } } /* ========================================================= ЛОГОТИП ========================================================= */ #rec4940931601 [data-elem-id="1792405980449"] .tn-atom { transition: transform .22s ease; } @media (hover: hover) and (pointer: fine) { #rec4940931601 [data-elem-id="1792405980449"] .tn-atom:hover { transform: translateY(-2px); } } /* ========================================================= MOBILE На мобильном никаких движений элементов ========================================================= */ @media screen and (max-width: 639px) { #rec4940931601 .tn-atom a { transform: none !important; } } #rec4940931601 [data-elem-id="1792405130675"] .tn-atom span { display: inline-block; transform-origin: center center; animation: pm-heartbeat 1.4s ease-in-out infinite; will-change: transform; } @keyframes pm-heartbeat { /* 1 */ 0% { transform: scale(1); } /* 2 */ 16.6% { transform: scale(1.24); } /* 3 */ 33.3% { transform: scale(1.48); } /* 3 */ 50% { transform: scale(1.48); } /* 2 */ 66.6% { transform: scale(1.24); } /* 1 */ 83.3%, 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { #rec4940931601 [data-elem-id="1792405130675"] .tn-atom span { animation: none; } } /* ========================================================= ПРОМОКОСТЕР — золотой блик на логотипе Эффект ограничен центральными 70% ========================================================= */ [data-elem-id="1792405581790"] .tn-atom { position: relative; overflow: hidden; } /* Сам логотип */ [data-elem-id="1792405581790"] .tn-atom__img { display: block; transition: filter .3s ease, transform .3s ease; } /* Золотой блик */ [data-elem-id="1792405581790"] .tn-atom::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* * Оставляем по 15% от каждого края. * Эффект работает только внутри * центральной круглой зоны. */ clip-path: circle(35% at 50% 50%); background: linear-gradient( 110deg, rgba(255,255,255,0) 0%, rgba(255,244,180,0.10) 35%, rgba(255,255,220,0.90) 48%, rgba(255,215,90,0.55) 56%, rgba(255,255,255,0) 70% ); background-size: 35% 100%; background-repeat: no-repeat; background-position: -60% 0; mix-blend-mode: screen; animation: pm-gold-shine-center 4.5s ease-in-out infinite; } /* Движение блика */ @keyframes pm-gold-shine-center { 0%, 62% { background-position: -60% 0; opacity: 0; } 67% { opacity: 1; } 82% { background-position: 160% 0; opacity: 1; } 87%, 100% { background-position: 160% 0; opacity: 0; } } /* Небольшое усиление золота при наведении */ @media (hover: hover) and (pointer: fine) { [data-elem-id="1792405581790"] .tn-atom:hover .tn-atom__img { filter: brightness(1.06) saturate(1.08); } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { [data-elem-id="1792405581790"] .tn-atom::after { animation: none; } } /* ========================================================= ФУТЕР — золотой блик на логотипе Для логотипа с data-elem-id="1792405980449" ========================================================= */ [data-elem-id="1792405980449"] .tn-atom { position: relative; overflow: hidden; display: inline-block; border-radius: 50%; } /* Сам логотип */ [data-elem-id="1792405980449"] .tn-atom__img { display: block; transition: filter .3s ease, transform .3s ease; } /* Блик */ [data-elem-id="1792405980449"] .tn-atom::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* Эффект только в центральной зоне */ clip-path: circle(35% at 50% 50%); background: linear-gradient( 110deg, rgba(255,255,255,0) 0%, rgba(255,244,180,0.10) 35%, rgba(255,255,220,0.90) 48%, rgba(255,215,90,0.55) 56%, rgba(255,255,255,0) 70% ); background-size: 35% 100%; background-repeat: no-repeat; background-position: -60% 0; mix-blend-mode: screen; animation: footer-logo-gold-shine 4.5s ease-in-out infinite; } /* Анимация блика */ @keyframes footer-logo-gold-shine { 0%, 62% { background-position: -60% 0; opacity: 0; } 67% { opacity: 1; } 82% { background-position: 160% 0; opacity: 1; } 87%, 100% { background-position: 160% 0; opacity: 0; } } /* Чуть усиливаем золото при наведении */ @media (hover: hover) and (pointer: fine) { [data-elem-id="1792405980449"] .tn-atom:hover .tn-atom__img { filter: brightness(1.06) saturate(1.08); } } /* Если у пользователя отключены анимации */ @media (prefers-reduced-motion: reduce) { [data-elem-id="1792405980449"] .tn-atom::after { animation: none; } } /* ========================================================= ПРОМОКОСТЕР ЕДИНЫЙ СТИЛЬ ШТАТНЫХ POPUP-ФОРМ TILDA T702 Один код для: - Обратный звонок - Получить консультацию - Рассчитать стоимость - любых следующих popup T702 Tilda продолжает самостоятельно: - открывать / закрывать popup - валидировать поля - отправлять форму - показывать success ========================================================= */ /* ========================================================= 1. ПЕРЕМЕННЫЕ ========================================================= */ .t702 { --pm-red: #E31B23; --pm-red-hover: #C91820; --pm-text: #111111; --pm-muted: #666666; --pm-placeholder: #999999; --pm-border: #D8D8D8; --pm-border-hover: #BDBDBD; --pm-light: #F5F5F5; --pm-white: #FFFFFF; } /* ========================================================= 2. OVERLAY display НЕ задаём. Им управляет сама Tilda. ========================================================= */ .t702 .t-popup { overflow-x: hidden !important; overflow-y: auto !important; background: rgba(17, 17, 17, .52) !important; -webkit-overflow-scrolling: touch; } .t702 .t-popup__bg { background: rgba(17, 17, 17, .52) !important; } /* ========================================================= 3. КАРТОЧКА POPUP padding:0 принципиален: Tilda на мобильном добавляет свои 50px сверху под внешний крестик. Мы переносим крестик внутрь карточки. ========================================================= */ .t702 .t-popup__container { position: relative !important; width: calc(100% - 32px) !important; max-width: 440px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; overflow: visible !important; background: var(--pm-white) !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 22px 70px rgba(0, 0, 0, .18) !important; } /* ========================================================= 4. ВНУТРЕННЯЯ ОБЁРТКА ========================================================= */ .t702 .t702__wrapper { box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 28px 32px 30px !important; overflow: visible !important; background: var(--pm-white) !important; border-radius: 16px !important; font-family: "TildaSans", Arial, sans-serif !important; } /* ========================================================= 5. FORM RESET ========================================================= */ .t702 .t-form, .t702 .t-form__inputsbox { height: auto !important; min-height: 0 !important; overflow: visible !important; } .t702 .t-form { margin: 0 !important; } .t702 .t-form__inputsbox { display: block !important; } /* ========================================================= 6. ШАПКА ========================================================= */ .t702 .t702__text-wrapper { margin: 0 0 24px !important; padding: 0 !important; text-align: left !important; } /* ПРОМОКОСТЕР */ .t702 .t702__text-wrapper::before { content: "ПРОМОКОСТЕР"; display: block; margin: 0 0 6px !important; padding: 0 !important; font-family: "TildaSans", Arial, sans-serif; font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: .02em; color: var(--pm-red); text-transform: uppercase; } /* ========================================================= 7. ЗАГОЛОВОК ========================================================= */ .t702 .t702__title { margin: 0 !important; padding: 0 44px 0 0 !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 28px !important; line-height: 34px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--pm-text) !important; text-align: left !important; } /* ========================================================= 8. ОПИСАНИЕ ========================================================= */ .t702 .t702__descr { max-width: 365px !important; margin: 11px 0 0 !important; padding: 0 !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 14px !important; line-height: 21px !important; font-weight: 400 !important; color: var(--pm-muted) !important; text-align: left !important; } /* ========================================================= 9. ГРУППЫ ПОЛЕЙ ========================================================= */ .t702 .t-input-group { margin: 0 0 14px !important; } /* ========================================================= 10. НАЗВАНИЕ ПОЛЯ ========================================================= */ .t702 .t-input-title { display: block !important; margin: 0 0 7px !important; padding: 0 !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 14px !important; line-height: 19px !important; font-weight: 500 !important; color: var(--pm-text) !important; } /* ========================================================= 11. ПОДЗАГОЛОВОК ПОЛЯ ========================================================= */ .t702 .t-input-subtitle { margin: 5px 0 0 !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 11px !important; line-height: 16px !important; color: var(--pm-muted) !important; } /* ========================================================= 12. ОБЫЧНЫЕ INPUT ========================================================= */ .t702 input.t-input:not(.t-input-phonemask), .t702 select.t-input { box-sizing: border-box !important; width: 100% !important; height: 56px !important; padding: 0 18px !important; border: 1px solid var(--pm-border) !important; border-radius: 9px !important; outline: 0 !important; background: var(--pm-white) !important; box-shadow: none !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 16px !important; line-height: 56px !important; font-weight: 400 !important; color: var(--pm-text) !important; transition: border-color .18s ease, box-shadow .18s ease !important; } .t702 input.t-input:not(.t-input-phonemask):hover, .t702 select.t-input:hover { border-color: var(--pm-border-hover) !important; } .t702 input.t-input:not(.t-input-phonemask):focus, .t702 select.t-input:focus { border-color: var(--pm-red) !important; box-shadow: 0 0 0 3px rgba(227, 27, 35, .06) !important; } /* Placeholder */ .t702 input.t-input::placeholder, .t702 textarea.t-input::placeholder { color: var(--pm-placeholder) !important; opacity: 1 !important; } /* ========================================================= 13. TEXTAREA ========================================================= */ .t702 textarea.t-input { box-sizing: border-box !important; width: 100% !important; min-height: 105px !important; padding: 14px 18px !important; border: 1px solid var(--pm-border) !important; border-radius: 9px !important; outline: 0 !important; background: var(--pm-white) !important; box-shadow: none !important; resize: vertical; font-family: "TildaSans", Arial, sans-serif !important; font-size: 16px !important; line-height: 22px !important; color: var(--pm-text) !important; } .t702 textarea.t-input:focus { border-color: var(--pm-red) !important; box-shadow: 0 0 0 3px rgba(227, 27, 35, .06) !important; } /* ========================================================= 14. ТЕЛЕФОН ========================================================= */ .t702 .t-input-phonemask__wrap { box-sizing: border-box !important; width: 100% !important; height: 56px !important; display: flex !important; align-items: center !important; padding: 0 !important; border: 1px solid var(--pm-border) !important; border-radius: 9px !important; background: var(--pm-white) !important; overflow: visible !important; box-shadow: none !important; transition: border-color .18s ease, box-shadow .18s ease !important; } .t702 .t-input-phonemask__wrap:hover { border-color: var(--pm-border-hover) !important; } .t702 .t-input-phonemask__wrap:focus-within { border-color: var(--pm-red) !important; box-shadow: 0 0 0 3px rgba(227, 27, 35, .06) !important; } /* Выбор страны */ .t702 .t-input-phonemask__select { height: 54px !important; display: flex !important; align-items: center !important; padding-left: 18px !important; } /* Код страны */ .t702 .t-input-phonemask__select-code { font-family: "TildaSans", Arial, sans-serif !important; font-size: 16px !important; line-height: 20px !important; color: var(--pm-text) !important; } /* Номер */ .t702 input.t-input-phonemask { box-sizing: border-box !important; height: 54px !important; padding: 0 18px 0 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 16px !important; line-height: 54px !important; color: var(--pm-text) !important; } /* ========================================================= 15. CHECKBOX ========================================================= */ .t702 .t-input-group_cb { margin: 2px 0 17px !important; } .t702 .t-checkbox__control { position: relative !important; display: flex !important; align-items: flex-start !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 11px !important; line-height: 16px !important; font-weight: 400 !important; color: var(--pm-muted) !important; cursor: pointer !important; } /* Настоящий checkbox */ .t702 .t-checkbox { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } /* Визуальный checkbox */ .t702 .t-checkbox__indicator { box-sizing: border-box !important; position: relative !important; width: 20px !important; height: 20px !important; min-width: 20px !important; flex: 0 0 20px !important; margin: 1px 0 0 !important; border: 1px solid #BDBDBD !important; border-radius: 4px !important; background: #FFFFFF !important; box-shadow: none !important; transition: background-color .16s ease, border-color .16s ease !important; } .t702 .t-checkbox:checked + .t-checkbox__indicator { border-color: var(--pm-red) !important; background: var(--pm-red) !important; } /* Галочка */ .t702 .t-checkbox:checked + .t-checkbox__indicator::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); } .t702 .t-checkbox__control:hover .t-checkbox__indicator { border-color: var(--pm-red) !important; } .t702 .t-checkbox__control > span { flex: 1 1 auto !important; } /* Ссылка */ .t702 .t-checkbox__control a { color: var(--pm-red) !important; text-decoration: none !important; border-bottom: 1px solid rgba(227, 27, 35, .30) !important; } /* ========================================================= 16. ОШИБКИ ========================================================= */ .t702 .t-input-error { margin: 5px 0 0 !important; padding: 0 !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 11px !important; line-height: 15px !important; color: var(--pm-red) !important; } .t702 .t-form__errorbox-wrapper { margin: 7px 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .t702 .t-form__errorbox-text { margin: 0 !important; padding: 0 !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 11px !important; line-height: 15px !important; color: var(--pm-red) !important; } /* ========================================================= 17. SUBMIT ========================================================= */ .t702 .t-form__submit { margin: 0 !important; } .t702 .t-submit { box-sizing: border-box !important; width: 100% !important; height: 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 20px !important; border: 1px solid var(--pm-red) !important; border-radius: 9px !important; background: var(--pm-red) !important; box-shadow: none !important; color: #FFFFFF !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; cursor: pointer !important; transition: background-color .18s ease, border-color .18s ease !important; } .t702 .t-submit:hover { background: var(--pm-red-hover) !important; border-color: var(--pm-red-hover) !important; } .t702 .t-btnflex__text { font-family: "TildaSans", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; } /* ========================================================= 18. FILE UPLOAD ========================================================= */ .t702 .t-upwidget-container__button { min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 18px !important; border: 1px solid var(--pm-border) !important; border-radius: 9px !important; background: #FFFFFF !important; color: var(--pm-text) !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; } /* ========================================================= 19. КРЕСТИК .t-popup__close — только позиционирующий контейнер. Круг рисуется ТОЛЬКО у button. ========================================================= */ .t702 .t-popup__close { position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; z-index: 30 !important; } .t702 .t-popup__close-wrapper { position: static !important; box-sizing: border-box !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--pm-light) !important; box-shadow: none !important; } /* Не пытаемся перебивать встроенный mobile fill Tilda по специфичности. Filter гарантированно делает SVG серым. */ .t702 .t-popup__close-icon { width: 15px !important; height: 15px !important; opacity: .45 !important; filter: brightness(0) saturate(100%) !important; } /* ========================================================= 20. SUCCESS POPUP ========================================================= */ .t-form-success-popup__wrapper { box-sizing: border-box !important; width: calc(100% - 32px) !important; max-width: 440px !important; height: auto !important; min-height: 0 !important; padding: 30px 28px 28px !important; background: #FFFFFF !important; border-radius: 16px !important; box-shadow: 0 22px 70px rgba(0, 0, 0, .18) !important; font-family: "TildaSans", Arial, sans-serif !important; } .t-form-success-popup__content-icon { width: 48px !important; height: 48px !important; margin-bottom: 18px !important; } .t-form-success-popup__content-icon-background { fill: #30C546 !important; } .t-form-success-popup__content-icon-check { stroke: #FFFFFF !important; } .t-form-success-popup__title { margin: 0 0 9px !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 27px !important; line-height: 33px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: #111111 !important; } .t-form-success-popup__text { max-width: 350px !important; margin-left: auto !important; margin-right: auto !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 14px !important; line-height: 21px !important; color: #666666 !important; } .t-form-success-popup__button { min-width: 150px !important; min-height: 50px !important; margin-top: 20px !important; padding: 0 25px !important; border: 1px solid #E31B23 !important; border-radius: 9px !important; background: #E31B23 !important; color: #FFFFFF !important; box-shadow: none !important; font-family: "TildaSans", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; } .t-form-success-popup__button:hover { background: #C91820 !important; border-color: #C91820 !important; } .t-form-success-popup__close-icon { top: 14px !important; right: 14px !important; width: 38px !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #F5F5F5 !important; } /* ========================================================= 21. MOBILE <= 640px ВАЖНО: - popup НЕ получает display:flex - карточка НЕ скроллится - overlay скроллится только если форма физически выше экрана ========================================================= */ @media screen and (max-width: 640px) { .t702 .t-popup { padding: 10px 10px max( 10px, env(safe-area-inset-bottom) ) !important; overflow-x: hidden !important; overflow-y: auto !important; } .t702 .t-popup__container { width: calc(100% - 20px) !important; max-width: 420px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 10px auto !important; padding: 0 !important; overflow: visible !important; border-radius: 15px !important; } .t702 .t702__wrapper { padding: 18px 18px 20px !important; border-radius: 15px !important; } /* Шапка */ .t702 .t702__text-wrapper { margin: 0 0 18px !important; } .t702 .t702__text-wrapper::before { margin-bottom: 5px !important; font-size: 10px !important; line-height: 14px !important; } .t702 .t702__title { padding-right: 40px !important; font-size: 25px !important; line-height: 30px !important; } .t702 .t702__descr { max-width: 100% !important; margin-top: 8px !important; font-size: 13px !important; line-height: 19px !important; } /* Поля */ .t702 .t-input-group { margin-bottom: 12px !important; } .t702 .t-input-title { margin-bottom: 6px !important; font-size: 13px !important; line-height: 18px !important; } .t702 input.t-input:not(.t-input-phonemask), .t702 select.t-input { height: 50px !important; padding-left: 15px !important; padding-right: 15px !important; font-size: 16px !important; line-height: 50px !important; border-radius: 8px !important; } /* Телефон */ .t702 .t-input-phonemask__wrap { height: 50px !important; border-radius: 8px !important; } .t702 .t-input-phonemask__select { height: 48px !important; padding-left: 15px !important; } .t702 input.t-input-phonemask { height: 48px !important; padding-right: 15px !important; line-height: 48px !important; } /* Textarea */ .t702 textarea.t-input { min-height: 90px !important; padding: 12px 15px !important; border-radius: 8px !important; } /* Checkbox */ .t702 .t-input-group_cb { margin: 1px 0 14px !important; } .t702 .t-checkbox__control { gap: 8px !important; font-size: 10px !important; line-height: 14px !important; } .t702 .t-checkbox__indicator { width: 19px !important; height: 19px !important; min-width: 19px !important; flex: 0 0 19px !important; margin-top: 0 !important; } .t702 .t-checkbox:checked + .t-checkbox__indicator::after { left: 5px; top: 2px; } /* Button */ .t702 .t-submit { height: 52px !important; border-radius: 8px !important; } /* Close */ .t702 .t-popup__close { top: 9px !important; right: 9px !important; } .t702 .t-popup__close-wrapper { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } .t702 .t-popup__close-icon { width: 14px !important; height: 14px !important; } /* Success */ .t-form-success-popup__wrapper { width: calc(100% - 24px) !important; max-width: 420px !important; padding: 26px 20px 22px !important; border-radius: 15px !important; } .t-form-success-popup__title { font-size: 25px !important; line-height: 30px !important; } .t-form-success-popup__text { font-size: 13px !important; line-height: 20px !important; } } /* ========================================================= 22. MOBILE <= 380px Samsung S22 / 360px ========================================================= */ @media screen and (max-width: 380px) { .t702 .t-popup { padding: 8px 8px max( 8px, env(safe-area-inset-bottom) ) !important; } .t702 .t-popup__container { width: calc(100% - 16px) !important; margin: 8px auto !important; } .t702 .t702__wrapper { padding: 17px 17px 19px !important; } .t702 .t702__text-wrapper { margin-bottom: 16px !important; } .t702 .t702__title { font-size: 24px !important; line-height: 29px !important; } .t702 .t702__descr { font-size: 12.5px !important; line-height: 18px !important; } .t702 .t-checkbox__control { font-size: 9.5px !important; line-height: 14px !important; } } /* ========================================================= 23. HOVER ТОЛЬКО ДЛЯ МЫШИ ========================================================= */ @media (hover: hover) and (pointer: fine) { .t702 .t-checkbox__control a:hover { color: var(--pm-red-hover) !important; } } /* ========================================================= 24. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .t702 *, .t-form-success-popup__wrapper, .t-form-success-popup__button { transition: none !important; } }