/* Вид формы заявки · попап #rec2837108601 */ /* Шрифт на всё внутри формы. Через * — потому что подзаголовки полей, подпись галочки и текст кнопки загрузки это div и label, а не input: правило только для полей ввода их не задевает. Заголовок ниже переопределяется на Oswald — он идёт после и потому выигрывает */ #rec2837108601 .t-form, #rec2837108601 .t-form *{font-family:'Golos Text',Arial,sans-serif!important} /* Заголовок и описание попапа. Выравнивание не задаём — оно в панели «Основные настройки», там же выравниваются и поля */ #rec2837108601 .t-form__title, #rec2837108601 .t-title{font-family:'Oswald',Impact,sans-serif!important;font-weight:600!important;font-size:26px!important;line-height:1.1!important;text-transform:uppercase;letter-spacing:.4px;color:#ffffff!important;margin-bottom:8px!important} #rec2837108601 .t-form__descr, #rec2837108601 .t-descr{font-weight:400!important;font-size:16px!important;line-height:1.6!important;color:#b7b1ab!important;margin-bottom:26px!important} /* Подпись поля */ #rec2837108601 .t-input-title{font-weight:600!important;font-size:15px!important;line-height:1.3!important;color:#ffffff!important;margin-bottom:2px!important} /* ▼ ГЛАВНОЕ: подзаголовок поля — настройки для него в Тильде нет */ #rec2837108601 .t-input-subtitle{font-weight:400!important;font-size:12.5px!important;line-height:1.45!important;color:#8a827b!important;margin:0 0 10px!important} /* Поля ввода. 16px обязательно: при меньшем iOS увеличивает страницу */ #rec2837108601 .t-input, #rec2837108601 textarea.t-input{font-size:16px!important;color:#ffffff!important;border-radius:0!important;padding:10px 0!important} #rec2837108601 .t-input::placeholder{color:#8a827b!important;opacity:1} #rec2837108601 textarea.t-input{min-height:96px!important;resize:vertical} /* Телефон: выпадашка с флагом не должна выбиваться фоном */ #rec2837108601 .t-input-phonemask__select, #rec2837108601 .t-input-phonemask__wrap{background:transparent!important} /* Кнопка загрузки файла — пунктирная рамка вместо розовой плашки. Розовый здесь спорит с кнопкой отправки: две одинаково яркие кнопки в одной форме, а «Загрузить файлы» — необязательное действие */ #rec2837108601 .t-form__uploadbtn, #rec2837108601 .t-inputfile__btn, #rec2837108601 .t-input-uploadfile__btn, #rec2837108601 .t-uploadfile__btn, #rec2837108601 .t-input-group_uw label, #rec2837108601 .t-input-group_uw .t-btn{display:inline-block;font-size:14px!important;font-weight:600!important;color:#ffffff!important;background:transparent!important;border:1px dashed #3a342f!important;border-radius:0!important;padding:14px 20px!important;box-shadow:none!important} #rec2837108601 .t-form__uploadbtn:hover, #rec2837108601 .t-inputfile__btn:hover, #rec2837108601 .t-input-uploadfile__btn:hover, #rec2837108601 .t-uploadfile__btn:hover, #rec2837108601 .t-input-group_uw label:hover{border-color:#ca7093!important;border-style:solid!important} /* Галочка согласия */ #rec2837108601 .t-checkbox__control{display:flex;align-items:flex-start;gap:11px;font-size:13.5px!important;line-height:1.5!important;color:#9a938c!important} #rec2837108601 .t-checkbox__indicator{border-radius:0!important} #rec2837108601 .t-checkbox__control a{color:#ca7093!important;text-decoration:underline;text-underline-offset:3px} /* Кнопка отправки */ #rec2837108601 .t-submit{font-weight:600!important;font-size:15.5px!important;border-radius:0!important;padding:18px 34px!important} /* Сообщения об ошибке. Правила для текста под формой нет намеренно: поле «Текст под формой» остаётся пустым, согласие живёт в галочке */ #rec2837108601 .t-form__errorbox-item{font-size:13.5px!important;border-radius:0!important} @media (max-width:640px){ #rec2837108601 .t-form__title, #rec2837108601 .t-title{font-size:22px!important} #rec2837108601 .t-form__descr, #rec2837108601 .t-descr{font-size:14px!important;margin-bottom:20px!important} #rec2837108601 .t-input{font-size:16px!important} } /* Шрифты корзины и избранного · drovosekmetall.ru #rec2837600501 — корзина ST100, #rec2837600601 — избранное ST110. Только типографика: фон, цвета и отступы не затрагиваются. !important обязателен — Тильда пишет стили магазина инлайном. */ /* ─── Базовый шрифт обоих окон ─── */ /* Через * — потому что артикул, опции и подписи это div и span, правило только для полей ввода их не задевает */ #rec2837600501, #rec2837600501 *, #rec2837600601, #rec2837600601 *{font-family:'Golos Text',Arial,sans-serif!important} /* ─── Заголовки окон: «Ваш заказ», «Избранное» ─── */ #rec2837600501 .t706__cartwin-heading, #rec2837600501 .t706__cartwin-top .t-name, #rec2837600601 .t1002__heading{font-family:'Oswald',Impact,sans-serif!important;font-weight:600!important;font-size:22px!important;line-height:1.15!important} /* Регистр не меняем: на сайте заголовки в верхнем регистре, но это уже не шрифт, а вмешательство в текст. Нужен капс — допиши сюда text-transform:uppercase;letter-spacing:.4px */ /* ─── Название позиции ─── */ #rec2837600501 .t706__product-title, #rec2837600601 .t1002__product-title, #rec2837600601 .t1002__product-title a{font-weight:600!important;font-size:15px!important;line-height:1.35!important} /* ▼ Артикул и опции — то, по чему сверяют позицию перед оплатой */ #rec2837600501 .t706__product-title__option, #rec2837600501 .t706__product-sku, #rec2837600601 .t1002__product-title__option, #rec2837600601 .t1002__product-sku{font-size:12.5px!important;line-height:1.5!important;letter-spacing:.2px} /* ─── Цены и суммы: Oswald, как все числа на сайте ─── */ #rec2837600501 .t706__product-amount, #rec2837600501 .t706__product-price, #rec2837600501 .t706__cartwin-prodamount, #rec2837600501 .t706__cartwin-totalamount, #rec2837600501 .t706__cartwin-prodamount-label, #rec2837600501 .t706__cartwin-totalamount-label, #rec2837600601 .t1002__product-amount, #rec2837600601 .t1002__product-price{font-family:'Oswald',Impact,sans-serif!important;font-weight:600!important;white-space:nowrap} #rec2837600501 .t706__product-amount, #rec2837600501 .t706__product-price, #rec2837600601 .t1002__product-amount, #rec2837600601 .t1002__product-price{font-size:17px!important} #rec2837600501 .t706__cartwin-prodamount, #rec2837600501 .t706__cartwin-totalamount, #rec2837600501 .t706__cartwin-prodamount-label, #rec2837600501 .t706__cartwin-totalamount-label{font-size:19px!important} /* Количество — не подпись, а значение: покупатель его меняет и сверяет. Держим весом цены, иначе цифра в тоннах читается хуже суммы рядом */ #rec2837600501 .t706__product-quantity{font-size:15px!important;font-weight:600!important} /* ─── Экран оформления заказа ─── */ #rec2837600501 .t706__orderform .t-descr, #rec2837600501 .t706__cartwin-bottom .t-descr{font-size:15px!important;line-height:1.6!important} #rec2837600501 .t706__inputtitle, #rec2837600501 .t706__orderform .t-inputtitle, #rec2837600501 .t706__orderform .t-input-title{font-weight:600!important;font-size:15px!important;line-height:1.3!important} #rec2837600501 .t706__orderform .t-input-subtitle{font-weight:400!important;font-size:12.5px!important;line-height:1.45!important} /* Поля: 16px обязательно — при меньшем iOS увеличивает страницу */ #rec2837600501 .t706__orderform .t-input, #rec2837600501 .t706__orderform textarea.t-input, #rec2837600501 .t706__orderform select.t-input{font-size:16px!important} /* Радио «Вы покупаете как» и «Как получите», галочка согласия */ #rec2837600501 .t706__orderform .t-radio__control, #rec2837600501 .t706__orderform .t-checkbox__control{font-size:14.5px!important;line-height:1.5!important} /* Кнопка заказа и текст под ней */ #rec2837600501 .t706__cartwin .t-submit, #rec2837600501 .t706__orderform .t-submit, #rec2837600501 .t706__cartwin-bottom .t-submit{font-weight:600!important;font-size:15.5px!important} #rec2837600501 .t706__form-bottom-text, #rec2837600501 .t706__orderform .t-form__bottom-text{font-size:12.5px!important;line-height:1.6!important} @media (max-width:640px){ #rec2837600501 .t706__cartwin-heading, #rec2837600601 .t1002__heading{font-size:19px!important} #rec2837600501 .t706__orderform .t-input, #rec2837600501 .t706__orderform textarea.t-input{font-size:16px!important} } /* Шрифты карточки товара · drovosekmetall.ru Только типографика. Ширина, отступы, колонки и раскладка не трогаются — ни на десктопе, ни на мобильном. */ /* ─── Базовый шрифт карточки ─── */ /* Через * — артикул, характеристики и подписи это div и span: правило только для полей ввода их не задевает */ body #allrecords .t-catalog__product-snippet, body #allrecords .t-catalog__product-snippet *, body #allrecords .t-catalog__prod-snippet__container, body #allrecords .t-catalog__prod-snippet__container *, body #allrecords .t-catalog__tabs, body #allrecords .t-catalog__tabs *, body #allrecords .js-catalog-product, body #allrecords .js-catalog-product *, body #allrecords .js-catalog-tabs, body #allrecords .js-catalog-tabs *{font-family:'Golos Text',Arial,sans-serif!important} /* ─── Название и цена — Oswald ─── */ body #allrecords .t-catalog__product-snippet [class*="product-title"], body #allrecords .t-catalog__product-snippet [class*="prod-name"], body #allrecords .t-catalog__prod-snippet__container [class*="product-title"], body #allrecords .t-catalog__prod-snippet__container [class*="prod-name"]{font-family:'Oswald',Impact,sans-serif!important;font-weight:600!important;font-size:clamp(22px,2.2vw,30px)!important;line-height:1.12!important;letter-spacing:.3px} body #allrecords .t-catalog__product-snippet [class*="price"], body #allrecords .t-catalog__prod-snippet__container [class*="price"]{font-family:'Oswald',Impact,sans-serif!important;font-weight:600!important;font-size:clamp(20px,1.8vw,26px)!important} /* ─── Производитель и артикул ─── */ body #allrecords .t-catalog__product-snippet [class*="brand"], body #allrecords .t-catalog__product-snippet [class*="sku"], body #allrecords .t-catalog__product-snippet [class*="part-num"], body #allrecords .t-catalog__prod-snippet__container [class*="brand"], body #allrecords .t-catalog__prod-snippet__container [class*="sku"]{font-size:13px!important;line-height:1.5!important;letter-spacing:.2px} /* ─── Описание. [class*="descr"] намеренно НЕ используем: t-descr — общий класс текста Тильды, он висит и на артикуле, и на ссылке «Назад», и правило раздуло бы их до размера описания */ body #allrecords .t-catalog__product-snippet [class*="prod-text"], body #allrecords .t-catalog__product-snippet [class*="all-text"], body #allrecords .t-catalog__product-snippet [class*="product-text"], body #allrecords .t-catalog__prod-snippet__container [class*="prod-text"]{font-size:15.5px!important;line-height:1.7!important} /* ─── Услуги, количество, кнопка ─── */ /* 16px обязательно: при меньшем iOS увеличивает страницу при фокусе */ body #allrecords .t-catalog__product-snippet [class*="option-title"]{font-weight:600!important;font-size:14px!important} body #allrecords .t-catalog__product-snippet [class*="option-select"], body #allrecords .t-catalog__product-snippet [class*="option-input"], body #allrecords .t-catalog__product-snippet select, body #allrecords .t-catalog__product-snippet input[type="text"]{font-size:16px!important} body #allrecords .t-catalog__product-snippet [class*="quantity"]{font-size:16px!important;font-weight:600!important} body #allrecords .t-catalog__product-snippet .t-btn, body #allrecords .t-catalog__product-snippet [class*="buy-btn"]{font-weight:600!important;font-size:15.5px!important} /* ─── Табы: подписи и содержимое ─── */ /* Были набраны тем же размером, что текст — непонятно, что кликабельны */ body #allrecords .t-catalog__tabs [class*="button"], body #allrecords .t-catalog__tabs [class*="title"]{font-weight:600!important;font-size:15px!important;line-height:1.3!important;letter-spacing:.2px} body #allrecords .t-catalog__tabs [class*="content"], body #allrecords .t-catalog__tabs [class*="content"] *{font-size:15px!important;line-height:1.75!important} /* ─── Вид табов ─── */ /* Строки-аккордеоны читаются как список текста: непонятно, что это кнопки. Даём наведение, курсор и заметную линию под активной. */ body #allrecords .t-catalog__tabs [class*="button"], body #allrecords .t-catalog__tabs [class*="title"]{cursor:pointer;transition:color .18s} body #allrecords .t-catalog__tabs [class*="button"]:hover, body #allrecords .t-catalog__tabs [class*="title"]:hover{color:#ca7093!important} /* Разделители между строками — тоньше и спокойнее */ body #allrecords .t-catalog__tabs [class*="controls"], body #allrecords .t-catalog__tabs [class*="list"] > *{border-bottom-color:#ddd6cf!important} /* Активная строка: розовая линия вместо серой, толще на 1px */ body #allrecords .t-catalog__tabs [class*="active"]{border-bottom-color:#ca7093!important;border-bottom-width:2px!important} /* Плюс и крестик справа — приглушены, розовеют вместе со строкой */ body #allrecords .t-catalog__tabs [class*="icon"], body #allrecords .t-catalog__tabs [class*="button"] svg, body #allrecords .t-catalog__tabs [class*="button"]::after{color:#8a827b!important;transition:color .18s,transform .2s} body #allrecords .t-catalog__tabs [class*="button"]:hover [class*="icon"], body #allrecords .t-catalog__tabs [class*="button"]:hover svg{color:#ca7093!important} body #allrecords .t-catalog__tabs [class*="active"] [class*="icon"], body #allrecords .t-catalog__tabs [class*="active"] svg{color:#ca7093!important} /* ─── Мобильная версия: тоже только размеры ─── */ @media (max-width:640px){ body #allrecords .t-catalog__product-snippet [class*="product-title"], body #allrecords .t-catalog__product-snippet [class*="prod-name"]{font-size:22px!important} body #allrecords .t-catalog__product-snippet [class*="prod-text"], body #allrecords .t-catalog__product-snippet [class*="product-text"]{font-size:15px!important} body #allrecords .t-catalog__tabs [class*="content"], body #allrecords .t-catalog__tabs [class*="content"] *{font-size:14.5px!important} }