/* ============================================================ ПРАВКИ ПОВЕРХ ТИЛЬДЫ Отдельный файл, подключён последним. Минифицированный CSS Тильды не трогаем: правки должны оставаться видимыми списком, а не растворяться в сгенерированном коде. Палитра (контрасты с белым текстом проверены расчётом): --wood #3A2318 плашка навигации 14.65:1 --wood-card #6B3A20 карточки услуг 9.33:1 --cta #67744A кнопки действия (вар. 4) 5.03:1 --accent #A85428 мелкие акценты 5.30:1 --cream #FDF8F2 фон вместо светло-серого ============================================================ */ :root{ --wood:#3a2318; --wood-2:#4c2f20; --wood-card:#6b3a20; --cta:#67744a; --cta-dark:#55613a; --accent:#a85428; --accent-on-dark:#e2a173; --cream:#fdf8f2; } /* ------------------------------------------------------------ 1. ПЛАШКА НАВИГАЦИИ — из оранжевой в тёмно-древесную Блоков навигации четыре: два настольных и два мобильных ------------------------------------------------------------ */ #rec2043031921 .tn-elem[data-elem-id="1775049172881000001"] .tn-atom, #rec2099557801 .tn-elem[data-elem-id="1774948312773000001"] .tn-atom{ background-color:var(--wood) !important; } #rec2108866891 .tmenu-mobile, #rec2108866891 .t-menu-base__maincontainer, #rec2108866891 .t-menu-base__burgermenu, #rec2108866891 .t-menu-base__burgermenu__close-button, #rec2100824411 .tmenu-mobile, #rec2100824411 .t-menu-base__maincontainer, #rec2100824411 .t-menu-base__burgermenu, #rec2100824411 .t-menu-base__burgermenu__close-button{ background-color:var(--wood) !important; } /* ------------------------------------------------------------ 2. КАРТОЧКИ УСЛУГ — «Восстановление навыков», «Парковка» и другие Были ярко-оранжевые, стали древесные ------------------------------------------------------------ */ #rec2065039171 .tn-elem[data-elem-id="1774252024907000001"] .tn-atom, #rec2065039171 .tn-elem[data-elem-id="1774252024907000005"] .tn-atom, #rec2065039171 .tn-elem[data-elem-id="1774252024908000009"] .tn-atom, #rec2065039171 .tn-elem[data-elem-id="1774252024908000021"] .tn-atom, #rec2065039171 .tn-elem[data-elem-id="1774252024909000033"] .tn-atom{ background-color:var(--wood-card) !important; } /* ------------------------------------------------------------ 3. КНОПКИ ДЕЙСТВИЯ — оливковый, чтобы выделялись на дереве Тильда красит кнопки через переменные --t396-* и --uc-* ------------------------------------------------------------ */ #rec2104406371 .tn-elem[data-elem-id="1773828341938000007"] .tn-atom, #rec2050933451 .tn-elem[data-elem-id="1773907941622000018"] .tn-atom{ --t396-bgcolor-color:var(--cta) !important; background-color:var(--cta) !important; } #rec2104406371 .tn-elem[data-elem-id="1773828341938000007"] .tn-atom:hover, #rec2050933451 .tn-elem[data-elem-id="1773907941622000018"] .tn-atom:hover{ --t396-bgcolor-hover-color:var(--cta-dark) !important; background-color:var(--cta-dark) !important; } #allrecords .r, body{ --uc-button-bgcolor-GkxyRHD:var(--cta) !important; } /* ------------------------------------------------------------ 4. СЕКЦИЯ СКИДОК — целиком была оранжевой, стала древесной ------------------------------------------------------------ */ #rec2050933451 .t396__artboard{ background-color:var(--wood) !important; } #rec2050933451 .tn-elem[data-elem-id="1773904289096000001"] .tn-atom{ background-color:var(--wood-2) !important; } /* ------------------------------------------------------------ 5. МЕЛКИЕ АКЦЕНТЫ — точки у заголовков и подложки ------------------------------------------------------------ */ #rec2047533521 .tn-elem[data-elem-id="1773842376685000004"] .tn-atom, #rec2047533521 .tn-elem[data-elem-id="1773841119005000001"] .tn-atom, #rec2048323661 .tn-elem[data-elem-id="1773860213463000003"] .tn-atom, #rec2087657141 .tn-elem[data-elem-id="1773860213463000003"] .tn-atom{ background-color:var(--accent) !important; } .t-title{color:var(--accent) !important} /* ------------------------------------------------------------ 6. ПОДВАЛ И РАЗДЕЛИТЕЛЬНЫЕ ПОЛОСЫ — были оранжевыми ------------------------------------------------------------ */ #rec2046236321 .t396__artboard, #rec2046814731 .t396__artboard, #rec2105860471 .t396__artboard{ background-color:var(--wood) !important; } /* Юридические документы всегда доступны из футера. */ #rec2046236321 .tn-elem[data-elem-id="1774527135921000001"]{ width:520px !important; height:auto !important; } #rec2046236321 .kostarev-offer-link{ display:inline-block; margin-left:18px; color:inherit; text-decoration:underline; } #rec2046236321 .kostarev-offer-link::before{ content:'\00B7'; display:inline-block; margin-right:18px; text-decoration:none; } @media screen and (max-width:1199px){ #rec2046236321 .tn-elem[data-elem-id="1774527135921000001"]{ width:400px !important; } } @media screen and (max-width:559px){ #rec2046236321 .tn-elem[data-elem-id="1774527135921000001"]{ width:300px !important; } #rec2046236321 .kostarev-offer-link{ display:block; margin:8px 0 0; } #rec2046236321 .kostarev-offer-link::before{ content:none; } } /* ------------------------------------------------------------ 7. ВЫДЕЛЕННЫЕ ТАРИФЫ «Комфорт» и «Комфорт +» Две крупные карточки 313x443 в блоке цен ------------------------------------------------------------ */ #rec2052800671 .tn-elem[data-elem-id="1773929060415000002"] .tn-atom, #rec2052800671 .tn-elem[data-elem-id="1773936778834000001"] .tn-atom{ background-color:var(--wood-card) !important; } /* Лента «Популярно» */ #rec2052800671 .tn-elem[data-elem-id="1773932133024000039"] .tn-atom{ background-color:var(--accent) !important; } /* ------------------------------------------------------------ 8. ТОЧКИ ПЕРЕД ЗАГОЛОВКАМИ СЕКЦИЙ (18x18) ------------------------------------------------------------ */ #rec2052100081 .tn-elem[data-elem-id="1773913384134000003"] .tn-atom, #rec2052800671 .tn-elem[data-elem-id="1773922163730000003"] .tn-atom, #rec2054264181 .tn-elem[data-elem-id="1774108422192000003"] .tn-atom{ background-color:var(--accent) !important; } /* ------------------------------------------------------------ 9. СКРЫТОЕ: мобильное меню и всплывающие окна Сейчас 0x0, но при открытии были бы оранжевыми ------------------------------------------------------------ */ #nav2108866891, #nav2100824411{ background-color:var(--wood) !important; } #rec2062311121 .tn-elem[data-elem-id="1774174515169000013"] .tn-atom, #rec2105577881 .tn-elem[data-elem-id="1774174515169000013"] .tn-atom, #rec2105605051 .tn-elem[data-elem-id="1774174515169000013"] .tn-atom, #rec2105608531 .tn-elem[data-elem-id="1774174515169000013"] .tn-atom, #rec2105611221 .tn-elem[data-elem-id="1774174515169000013"] .tn-atom, #rec2062497161 .tn-elem[data-elem-id="1774177695402000001"] .tn-atom{ background-color:var(--wood) !important; } /* Полоса прогресса прокрутки — тонкая линия сверху */ .t360__bar, .t360__barprogress{ background-color:var(--accent) !important; } /* ------------------------------------------------------------ 10. ТАРИФ «МАКСИМУМ» — под «Комфорт», а не в левый край Было: ряд 3: Максимум(222) ...пусто... Стало: ряд 3: ... Максимум(556) Сдвиг +334px = разница между колонкой «Минимум» (222) и «Комфорт» (556). Двигаем только ЧЕТЫРЕ прямых ребёнка артборда: подложку, две группы с текстом и кнопку. Вложенные группы имеют left:0 и едут с родителями — если сдвинуть и их, смещение удвоится. Только настольная раскладка: ниже 1200px Тильда ставит карточки в столбик, и сдвиг там всё развалит. Сдвиг задан через transform, а НЕ через left в пикселях: Тильда пересчитывает абсолютные координаты под каждую ширину окна, и жёсткий left:555.5px совпадал с колонкой «Комфорт» только при 1440px, а на других ширинах карточка уезжала. Разница между колонками (334px) в сетке 1200 постоянна, поэтому translateX верен на любой ширине. ------------------------------------------------------------ */ @media screen and (min-width:1200px){ #rec2052800671 .tn-elem[data-elem-id="1773922482639000001"], #rec2052800671 .tn-group__20528006711785154150829000009, #rec2052800671 .tn-group__20528006711773933803087000052, #rec2052800671 .tn-elem[data-elem-id="1773931290237000035"]{ transform:translateX(334px) !important; } } /* ------------------------------------------------------------ 11. ГЕРОЙ — заполняем пустоту заголовком Было: «Оренбург» на 31, текст на 394 — дыра 335px посередине, текст прижат к низу карточки. Стало: кегль 40 -> 56px, группа поднята на 230 — пустота распределилась сверху и снизу вместо провала в середине. ------------------------------------------------------------ */ @media screen and (min-width:1200px){ #rec2104406371 .tn-group__21044063711773828912149000011{ top:230px !important } /* Заголовок «Костарев Максим» */ #rec2104406371 .tn-elem[data-elem-id="1773827957908000005"] .tn-atom{ font-size:56px !important; line-height:1.1 !important; } } /* ------------------------------------------------------------ 12. ПЛАШКА АВИТО — крупнее и с цветом Была кнопка 313x42 белая, стала 561x56 оливковая по ширине карусели отзывов над ней ------------------------------------------------------------ */ @media screen and (min-width:1200px){ #rec2052100081 .tn-elem[data-elem-id="1774526262342000002"]{ width:561px !important; height:56px !important; } } #rec2052100081 .tn-elem[data-elem-id="1774526262342000002"] .tn-atom{ background-color:var(--cta) !important; border-color:var(--cta) !important; color:#fff !important; font-size:17px !important; font-weight:500 !important; } #rec2052100081 .tn-elem[data-elem-id="1774526262342000002"] .tn-atom:hover{ background-color:var(--cta-dark) !important; border-color:var(--cta-dark) !important; } #rec2052100081 .tn-elem[data-elem-id="1774526262342000002"] .tn-atom svg, #rec2052100081 .tn-elem[data-elem-id="1774526262342000002"] .tn-atom path{ fill:#fff !important; stroke:#fff !important; } /* 13. Колесо убрано по просьбе инструктора — оставляем только собственные анимации Тильды. */ /* ------------------------------------------------------------ 14. ПОЯСНЕНИЕ в блоке «Преимущества» Левая колонка была почти пустой: только слово «Преимущества» и 488px дыры до списка. Текст добавляет js/fixes.js. ------------------------------------------------------------ */ .fix-note{ position:absolute; font-family:'Roboto',Arial,sans-serif; font-size:18px;line-height:1.55; color:#171717; z-index:2; } .fix-note b{font-weight:500} @media screen and (max-width:1199px){ .fix-note{display:none} } /* ------------------------------------------------------------ 15. БЛОК ФОРМЫ «Поехали?» — тёмный, как в первом варианте Было: белый артборд, белые кнопки мессенджеров, оранжевая отправка. Стало: древесный фон, светлый текст, поля на просвет, оливковая кнопка отправки. Фото инструктора остаётся как есть. ------------------------------------------------------------ */ #rec2054264181 .t396__artboard{ background-color:var(--wood) !important } /* Фото было вписано по ширине (background-size:100%) на белой подложке: 679x599 против картинки 4:3 => 90px белой полосы сверху и снизу. На белом артборде их не было видно, на древесном стали бы белыми полосами. Накрываем подложку целиком, сама подложка прозрачная. */ #rec2054264181 .tn-elem[data-elem-id="1774082242964000001"] .tn-atom{ background-size:cover !important; background-position:center !important; background-color:transparent !important; } /* Заголовок, подзаголовок и подписи — светлыми */ #rec2054264181 .tn-elem[data-elem-id="1774108422192000002"] .tn-atom, #rec2054264181 .tn-elem[data-elem-id="1774082379639000007"] .tn-atom{ color:#f0e7e0 !important; } #rec2054264181 .t-input-title, #rec2054264181 .t-descr, #rec2054264181 .t-text{ color:#f0e7e0 !important } /* Кнопки мессенджеров — карточками на тёмном, а не белыми плашками */ #rec2054264181 .tn-group__20542641811774104961292000004 .tn-atom{ background-color:var(--wood-2) !important; border-color:rgba(255,255,255,.22) !important; color:#f0e7e0 !important; } #rec2054264181 .tn-group__20542641811774104961292000004 .tn-atom:hover{ background-color:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } /* Поля ввода — на просвет */ #rec2054264181 input[type="text"], #rec2054264181 input[type="tel"], #rec2054264181 input[type="email"], #rec2054264181 textarea{ background-color:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.2) !important; color:#fff !important; } #rec2054264181 input::placeholder, #rec2054264181 textarea::placeholder{ color:rgba(240,231,224,.5) !important } #rec2054264181 input:focus, #rec2054264181 textarea:focus{ border-color:var(--cta) !important; background-color:rgba(255,255,255,.12) !important; } /* Кнопка отправки — оливковая */ #rec2054264181 .t-submit, #rec2054264181 button[type="submit"]{ background-color:var(--cta) !important; border-color:var(--cta) !important; color:#fff !important; } #rec2054264181 .t-submit:hover, #rec2054264181 button[type="submit"]:hover{ background-color:var(--cta-dark) !important; border-color:var(--cta-dark) !important; } /* Согласие на обработку данных и ссылка в нём */ #rec2054264181 .t-checkbox__control, #rec2054264181 .t-form__errorbox-text{ color:rgba(240,231,224,.75) !important } #rec2054264181 .t-checkbox__control a{ color:var(--accent-on-dark,#e2a173) !important } /* ------------------------------------------------------------ 16. БЕЛАЯ ПОЛОСА между формой и подвалом Отдельный блок высотой 150px. На белом сайте не был заметен, на тёмном разрывал форму и подвал светлой лентой. ------------------------------------------------------------ */ #rec2105346301 .t396__artboard{ background-color:var(--wood) !important } /* ------------------------------------------------------------ 17. ЛИПКАЯ ПЛАШКА НАКРЫВАЛА ЗАГОЛОВКИ СЕКЦИЙ При переходе по якорю из меню секция вставала под плашку, и её заголовок оказывался наполовину скрыт. Касалось всех разделов. ------------------------------------------------------------ */ [id^="rec"]{ scroll-margin-top:110px } /* Заголовок отзывов висел на top:-14px, а артборд обрезает по краю — у букв срезало верх. Опускаем внутрь блока. */ #rec2052100081 .tn-elem[data-elem-id="1773913384133000002"]{ transform:translateY(16px) !important; } /* ------------------------------------------------------------ 18. КНОПКИ МЕССЕНДЖЕРОВ — были коричневым на коричневом Тёмная заливка на тёмном фоне почти не читалась. Делаем контурными: рамка светлая, при наведении заливаются акцентом. ------------------------------------------------------------ */ #rec2054264181 .tn-group__20542641811774104961292000004 .tn-atom{ background-color:transparent !important; border:1.5px solid rgba(255,255,255,.38) !important; color:#f5efe9 !important; } #rec2054264181 .tn-group__20542641811774104961292000004 .tn-atom:hover{ background-color:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } /* Кнопка отправки была узкой рядом с широкими полями — тянем по их ширине */ #rec2054264181 .t-submit{ width:100% !important; min-height:52px !important; font-size:17px !important; } /* ------------------------------------------------------------ 19. ЧЁРНЫЙ ТЕКСТ НА ДРЕВЕСНОМ — контраст был 1.43 Прежние правила красили только .tn-atom, а текст лежит во вложенных элементах и оставался чёрным. Красим и потомков. Затронуто: «Бесплатный урок», «@instruktor_kostarev», «Первый урок вдвое дешевле», «1000 ₽», «Телеграм», «Инстаграм*», согласие на обработку данных. ------------------------------------------------------------ */ #rec2050933451 .tn-atom, #rec2050933451 .tn-atom *, #rec2054264181 .tn-atom, #rec2054264181 .tn-atom *{ color:#f0e7e0 !important; } /* НО: внутри древесной секции скидок стоят две СВЕТЛЫЕ карточки #f5f5f5. Их содержимое лежит группами, и правило выше делало текст светлым на светлом — читать было невозможно. Возвращаем тёмный. */ #rec2050933451 .tn-group__20509334511774364598880000006 .tn-atom, #rec2050933451 .tn-group__20509334511774364598880000006 .tn-atom *, #rec2050933451 .tn-group__20509334511774526106527000005 .tn-atom, #rec2050933451 .tn-group__20509334511774526106527000005 .tn-atom *{ color:#171717 !important; } /* Ссылка на профиль внутри светлой карточки — акцентом */ #rec2050933451 .tn-group__20509334511774526106527000005 a.tn-atom, #rec2050933451 .tn-group__20509334511774526106527000005 a.tn-atom *{ color:var(--accent) !important; } /* Кнопки поверх этого правила остаются с белым текстом */ #rec2050933451 .tn-elem[data-elem-id="1773907941622000018"] .tn-atom, #rec2050933451 .tn-elem[data-elem-id="1773907941622000018"] .tn-atom *, #rec2054264181 .t-submit{ color:#fff !important } /* Ссылка в согласии — акцентом, чтобы читалась как ссылка */ #rec2054264181 .t-checkbox__control a, #rec2054264181 .t-form__errorbox-text a{ color:var(--accent-on-dark) !important } /* ------------------------------------------------------------ 20. КНОПКА АВИТО вылезала за низ блока на 14px и обрезалась Артборд 619, кнопка была на 577 высотой 56 => низ 633. Поднимаем так, чтобы её низ совпал с низом плашки-заглушки. ------------------------------------------------------------ */ @media screen and (min-width:1200px){ #rec2052100081 .tn-elem[data-elem-id="1774526262342000002"]{ transform:translateY(-15px) !important; } } /* ------------------------------------------------------------ 21. «ГАРАНТИЯ ВОЗВРАТА» — текст по центру карточки Заголовок на 128, текст был на 398: между ними 233px пустоты, а под текстом всего 30px. Ставим текст посередине свободной части карточки под заголовком. ------------------------------------------------------------ */ @media screen and (min-width:1200px){ #rec2052800671 .tn-elem[data-elem-id="1773929248353000005"]{ transform:translateY(-102px) !important; } } /* ------------------------------------------------------------ 22. БЛОК ФОРМЫ — отступ сверху и кнопка не обрезана Было: фото на top:0 вплотную к границе цвета, заголовок на top:-14 (обрезан), кнопка «Отправить» уходила на 609 при артборде 600 — низ срезало. Стало: артборд выше на 100px, всё содержимое опущено на 40px. ------------------------------------------------------------ */ @media screen and (min-width:1200px){ #rec2054264181 .t396__artboard, #rec2054264181 .t396{ height:700px !important; } #rec2054264181 .tn-elem[data-elem-id="1774108422192000002"], #rec2054264181 .tn-elem[data-elem-id="1774108422192000003"], #rec2054264181 .tn-elem[data-elem-id="1774082242964000001"], #rec2054264181 .tn-elem[data-elem-id="1774082379639000007"], #rec2054264181 .tn-group__20542641811774104961292000004, #rec2054264181 .tn-elem[data-elem-id="1570289271162"]{ transform:translateY(40px) !important; } } /* ------------------------------------------------------------ 23. ГЕРОЙ — кнопки по центру карточки Карточка занимает -47..615 (центр 284), пара кнопок -27..373 (центр 173). Сдвиг +111px выравнивает их по центру. Значения сеточные и постоянны на любой ширине. ------------------------------------------------------------ */ @media screen and (min-width:1200px){ #rec2104406371 .tn-elem[data-elem-id="1773828341938000007"], #rec2104406371 .tn-elem[data-elem-id="1773828267432000006"]{ transform:translateX(111px) !important; } } /* ------------------------------------------------------------ 24. СВОЁ ВИДЕО вместо плеера ВКонтакте Элемент подставляет js/fixes.js. ВК по IP-адресу видео не отдаёт, да и незачем тянуть чужой плеер, когда файл лежит у нас. ------------------------------------------------------------ */ #rec2087657141 .tn-elem[data-elem-id="1774631173806000001"] .tn-atom{ position:relative; overflow:hidden; border-radius:inherit; } /* Прижимаем абсолютно, а не через height:100%. На iOS видео с preload="none" берёт размер от обложки и может вырасти выше контейнера — тогда оно вылезает из блока, и карточка «Преимущества» ложится прямо на него. При inset:0 видео физически не может выйти за пределы плашки, что бы браузер ни решил про его собственные пропорции. */ video.fix-video{ position:absolute; inset:0; display:block; width:100%; height:100%; max-height:100%; object-fit:cover; background:#000; border:0; } /* ------------------------------------------------------------ 25. «50%» НА СВЕТЛОЙ КАРТОЧКЕ Кружок под этой надписью прозрачный, а текст лежит поверх светлой карточки #f5f5f5. Общее правило раздела 19 покрасило его светлым — надпись исчезла. Ставим акцент: на светлом читается (4.86:1) и отвечает смыслу скидки. ------------------------------------------------------------ */ #rec2050933451 .tn-elem[data-elem-id="1773907941621000016"] .tn-atom, #rec2050933451 .tn-elem[data-elem-id="1773907941621000016"] .tn-atom *{ color:var(--accent) !important; font-weight:600 !important; } /* ------------------------------------------------------------ 26. МОБИЛЬНЫЕ ОБРЕЗАНИЯ Артборд обрезает по краю, и на узких экранах содержимое не влезало: форма на 13px, подвал на 7px. ------------------------------------------------------------ */ @media screen and (max-width:1199px){ #rec2054264181 .t396__artboard, #rec2054264181 .t396{ height:auto !important; min-height:660px !important } #rec2046236321 .t396__artboard, #rec2046236321 .t396{ height:auto !important; min-height:600px !important } } /* Лента «Популярно»: на узкой карточке угловая лента ложилась прямо на текст «Комфорт / 7 занятий — 12500 ₽» (перекрытие 65×18px, и она выше по слоям), плюс уходила за правый край на 4px. Сдвигаем влево и поднимаем над текстом. */ @media screen and (max-width:1199px){ #rec2052800671 .tn-elem[data-elem-id="1773932133024000039"]{ transform:translate(-14px, -26px) !important; } } /* Отступ под липкую плашку: на мобильной она 65px, а не 110 — иначе после перехода по якорю остаётся лишняя дыра */ @media screen and (max-width:1199px){ [id^="rec"]{ scroll-margin-top:75px } } /* ------------------------------------------------------------ 27. ЗАГОЛОВКИ СЕКЦИЙ СВИСАЛИ ВЫШЕ СВОИХ БЛОКОВ На мобильной Тильда ставит их на top:-12px. Блок начинается ниже, и заголовок ложился на то, что сверху: на фото предыдущей секции или ровно на границу смены цвета. Опускаем внутрь блока — это и «наслоение текста на фото», и «Поехали? прилипает к началу блока». ------------------------------------------------------------ */ /* Опускать заголовок внутри блока НЕЛЬЗЯ: зазор до подзаголовка всего 5px, любой сдвиг вниз даёт наложение. Поэтому отодвигаем сам блок — свисающий заголовок ложится на пустоту между блоками, а не на фото предыдущей секции. Внутри блока ничего не сдвигается, значит ни наложений, ни обрезания снизу. ВАЖНО: отступ ВНУТРЕННИЙ (padding), а не внешний (margin). Внешний отступ красится фоном страницы, то есть белым — и на тёмных блоках «Поехали?» и подвале вылезал белыми полосами. Внутренний закрашивается фоном самого блока, поэтому цвет задаём каждому явно. */ @media screen and (max-width:1199px){ #rec2047533521, #rec2065039171, #rec2048323661, #rec2087657141, #rec2052800671, #rec2052100081{ margin-top:0 !important; padding-top:26px !important; background-color:#fff !important; } /* Блок формы и подвал древесные — отступ должен быть того же цвета */ #rec2054264181, #rec2046236321{ margin-top:0 !important; padding-top:26px !important; background-color:var(--wood) !important; } } /* ------------------------------------------------------------ 28. КНОПКА АВИТО переносилась на две строки Текст требует 209px в одну строку, а кнопка была 273px — с иконкой и отступами не влезало, блок текста 53px при высоте кнопки 41. Растягиваем почти на всю ширину. ------------------------------------------------------------ */ @media screen and (max-width:1199px){ #rec2052100081 .tn-elem[data-elem-id="1774526262342000002"]{ width:calc(100vw - 44px) !important; max-width:340px !important; height:52px !important; left:18px !important; /* Кнопка стала выше на 11px и вылезала за низ артборда — поднимаем на столько же */ transform:translateY(-12px) !important; } #rec2052100081 .tn-elem[data-elem-id="1774526262342000002"] .tn-atom{ white-space:nowrap !important; font-size:16px !important; } } /* ------------------------------------------------------------ 29. МЕНЬШЕ БЕЛОГО — светло-серые подложки в кремовые ------------------------------------------------------------ */ .t396__artboard[style*="#f5f5f5"], .tn-atom[style*="#f5f5f5"]{ background-color:var(--cream) !important; } /* ------------------------------------------------------------ 30. ХВОСТ СТРАНИЦЫ — три пустые полосы подряд ------------------------------------------------------------ Между формой и подвалом стояли три пустых блока Тильды: разделитель на 150 пикселей и два отступа подвала по 100. Пока разделитель был белым, он читался как граница разделов. После перекраски в древесный всё три слились с формой и подвалом в одно бурое пятно на 350 пикселей — те самые «дырки». Оставляем воздух, но один раз и столько, сколько нужно глазу. Высоту артборда Тильда ставит и в своём CSS, и строчным стилем через t396_init, поэтому только !important. Блоки пустые, обрезать нечего. */ #rec2105346301 .t396__artboard{ height:0 !important; min-height:0 !important; } #rec2046814731 .t396__artboard{ height:40px !important; min-height:0 !important; } #rec2105860471 .t396__artboard{ height:40px !important; min-height:0 !important; } /* ------------------------------------------------------------ 31. КНОПКА ОНЛАЙН-ОПЛАТЫ ПОД БЛОКОМ ЦЕН ------------------------------------------------------------ Своя кнопка, а не элемент Zero Block: координаты там пересчитываются под каждую ширину, и вписываться в них ради одной ссылки нельзя. */ .kostarev-pay{ display:flex;flex-direction:column;align-items:center;gap:8px; padding:0 20px 48px;background:#fff;text-align:center; } .kostarev-pay a{ display:inline-block;background:var(--cta);color:#fff;text-decoration:none; font-weight:600;font-size:17px;padding:16px 28px;border-radius:999px; transition:background .15s; } .kostarev-pay a:hover{background:var(--cta-dark)} .kostarev-pay span{color:#6d5a50;font-size:14px} /* ------------------------------------------------------------ 32. ВЫБОР СПОСОБА ЗАПИСИ ------------------------------------------------------------ */ body.kostarev-booking-open{overflow:hidden} .kostarev-booking-choice, .kostarev-booking-choice *, .kostarev-booking-choice *::before, .kostarev-booking-choice *::after{box-sizing:border-box} .kostarev-booking-choice{ position:fixed;inset:0;z-index:1000000;display:grid;place-items:center; padding:24px;visibility:hidden;opacity:0;pointer-events:none; transition:opacity .22s ease-out,visibility .22s; } .kostarev-booking-choice.is-open{visibility:visible;opacity:1;pointer-events:auto} .kostarev-booking-choice__backdrop{ position:absolute;inset:0;background:rgba(23,12,7,.56); } .kostarev-booking-choice__dialog{ position:relative;width:min(100%,460px);max-height:calc(100dvh - 32px); overflow:auto;overscroll-behavior:contain;padding:38px 30px 30px; border-radius:24px;color:#fff;background:var(--wood);outline:none; box-shadow:0 22px 64px rgba(23,12,7,.28);transform:translateY(12px); transition:transform .28s cubic-bezier(.2,.8,.2,1); } .kostarev-booking-choice.is-open .kostarev-booking-choice__dialog{transform:translateY(0)} .kostarev-booking-choice__dialog h2{ margin:0 44px 8px 0;color:#fff; font:500 clamp(26px,5vw,34px)/1.15 var(--t-headline-font,Arial,sans-serif); letter-spacing:-.02em; } .kostarev-booking-choice__dialog>p{ margin:0 0 26px;color:rgba(255,255,255,.72); font:300 17px/1.45 var(--t-headline-font,Arial,sans-serif); } .kostarev-booking-choice__close{ position:absolute;top:20px;right:20px;width:44px;height:44px;padding:0; appearance:none;border:0 !important;border-radius:50%; background:rgba(255,255,255,.1) !important;box-shadow:none !important;cursor:pointer; } .kostarev-booking-choice__close::before, .kostarev-booking-choice__close::after{ content:'';position:absolute;top:21px;left:12px;width:20px;height:2px;background:#fff; } .kostarev-booking-choice__close::before{transform:rotate(45deg)} .kostarev-booking-choice__close::after{transform:rotate(-45deg)} .kostarev-booking-choice__actions{display:grid;gap:12px} .kostarev-booking-choice__actions a, .kostarev-booking-choice__actions button{ display:block;width:100%;min-height:72px;padding:14px 20px;border:0; border-radius:16px;color:#171717;text-align:left;text-decoration:none; background:#fff;cursor:pointer;font-family:var(--t-headline-font,Arial,sans-serif); transition:transform .18s ease-out,background-color .18s ease-out; } .kostarev-booking-choice__actions strong, .kostarev-booking-choice__actions span{display:block} .kostarev-booking-choice__actions strong{font-size:18px;line-height:1.3;font-weight:500} .kostarev-booking-choice__actions span{ margin-top:3px;color:#5f554f;font-size:14px;line-height:1.35;font-weight:300; } @media (hover:hover){ .kostarev-booking-choice__actions a:hover, .kostarev-booking-choice__actions button:hover{ transform:translateY(-2px);background:#f5f1ed; } } .kostarev-booking-choice__actions a:focus-visible, .kostarev-booking-choice__actions button:focus-visible, .kostarev-booking-choice__close:focus-visible{ outline:3px solid var(--accent);outline-offset:3px; } @media screen and (max-width:559px){ .kostarev-booking-choice{padding:16px} .kostarev-booking-choice__dialog{padding:36px 20px 22px;border-radius:24px} .kostarev-booking-choice__dialog h2{margin-right:40px} .kostarev-booking-choice__dialog>p{margin-bottom:20px} .kostarev-booking-choice__close{top:14px;right:14px} } @media screen and (max-height:700px){ .kostarev-booking-choice{padding:12px} .kostarev-booking-choice__dialog{ max-height:calc(100dvh - 24px);padding:28px 22px 22px;border-radius:20px; } .kostarev-booking-choice__dialog h2{ margin-right:44px;font-size:28px; } .kostarev-booking-choice__dialog>p{margin-bottom:16px;font-size:15px} .kostarev-booking-choice__close{top:12px;right:12px} .kostarev-booking-choice__actions{gap:9px} .kostarev-booking-choice__actions a, .kostarev-booking-choice__actions button{min-height:64px;padding:10px 16px} } @media (prefers-reduced-motion:reduce){ .kostarev-booking-choice,.kostarev-booking-choice__dialog, .kostarev-booking-choice__actions a, .kostarev-booking-choice__actions button{transition:none} }