/* Главная страница. Ряд из четырёх баннеров-категорий (секция Elementor 7580c73: COMFORT / SILK / PREMIUM / COTTON). Проблема: виджет ts-banner печатает картинку как обычный с `width:100%` и высотой по натуральной пропорции. У четырёх фотографий пропорции чуть разные (1829×2560, 1844×2560, 1570×2189, 1702×2368), поэтому при ширине колонки 291px высоты выходят 408 / 404 / 406 / 405 — верхние кромки на одной линии, нижние гуляют на 4px. Сильнее всех выбивается SILK: у него самая «плоская» пропорция, плитка самая короткая. Лечение: колонки в ряду и так растягиваются по самой высокой (flex), лишнюю высоту съедает `align-content:flex-start` у .elementor-widget-wrap. Меняем на stretch — виджет занимает всю колонку, — и тянем высоту по цепочке до самой картинки, а кадр подрезаем через object-fit: cover. Пропорцию не задаём числом: если владелец заменит фотографию, ряд по-прежнему выровняется сам, по самой высокой плитке. Scoped на id секции намеренно: ниже на главной есть мозаика из баннеров разной высоты (АКСЕСУАРЫ, «хлопковые пижамы», «Новинка») — там разнобой задуман, растягивать её нельзя. */ .elementor-element-7580c73 .elementor-widget-wrap { align-content: stretch; } .elementor-element-7580c73 .elementor-widget-ts-banner > .elementor-widget-container, .elementor-element-7580c73 .ts-banner, .elementor-element-7580c73 .ts-banner .banner-wrapper, .elementor-element-7580c73 .ts-banner .banner-bg, .elementor-element-7580c73 .ts-banner .banner-bg .bg-content { height: 100%; } /* Тема даёт `.ts-banner .banner-bg img { width:100% }` — ширину не трогаем, добавляем только высоту и подрезку. Наведение (rotate(3deg) scale(1.14) из themesky.css) работает поверх object-fit без правок. */ .elementor-element-7580c73 .ts-banner .banner-bg img { height: 100%; object-fit: cover; object-position: center; } /* ================================================================== Паспарту вокруг витрины. Макет Claude Design «Главная — герой и полоска · 10c». Было: полоса объявлений печаталась в шапке и упиралась в фотографии — зелёная плашка читалась приклеенной к витрине, а не связанной с ней. Стало: подложка обтекает витрину со всех сторон и превращается в раму. Зазоры между карточками того же цвета, обещание о доставке стоит подписью к блоку. Разметку и выбор места печати держит inc/home-showcase.php. Цвет рамы — небесно-голубой `#B8D8E8` из фирменной палитры («свежий акцент», палитра пришла 08.09.2026), а не тёмно-зелёный шапки и подвала: рама занимает верх первого экрана, и в фирменном зелёном читалась продолжением шапки, а не подложкой под витрину. ЦВЕТ И ЧЕРНИЛА — ДВА ЧИСЛА, И МЕНЯТЬ ИХ НАДО ВМЕСТЕ. Поле светлое, поэтому подпись на нём тёмная: кремовая давала бы 1,2:1, то есть не читалась бы вовсе. Захотят снова тёмную раму — вернуть полю тёмный цвет, а чернилам кремовый; порознь получится либо белое по белому, либо тёмное по тёмному. Проверять замером контраста, а не на глаз: у капслока в 9–10,5px запаса нет, нужно от 4,5:1. Число одно на раму и на полосу: цвета у них разные источники (секция красится здесь, полоса — переменной `--tk-ann-deep` из announce.css), и разъехавшись на тон они дали бы горизонтальный шов посреди блока. Поэтому переменная объявлена на `:root` — этот файл подключается только на главной, шире он не разойдётся. */ :root { /* Поле рамы. */ --tk-show-deep: #B8D8E8; /* Чернила по нему: подпись, рамка пилюли и крестик. Фирменный зелёный по голубому даёт 9:1. */ --tk-show-ink: #1D3A37; --tk-show-ink-line: rgba(29, 58, 55, 0.28); --tk-show-ink-soft: rgba(29, 58, 55, 0.60); --tk-show-ink-wash: rgba(29, 58, 55, 0.10); /* Заливка пилюли — белым на просвет: она отделяет подпись от поля, не делая из неё вторую плашку. */ --tk-show-pill: rgba(255, 255, 255, 0.38); } /* Поля считаются из двух чисел: отступ секции + отступ колонки. Их сумма — поле рамы, удвоенный отступ колонки — зазор между карточками. На десктопе 15 + 7 даёт поле 22px и зазор 14px, как в макете; на телефоне числа вдвое меньше, иначе рама съедает половину узкого экрана. Поле одинаковое со всех четырёх сторон, в том числе сверху, хотя в макете полоса лежит на карточках вплотную: полосу можно закрыть крестиком, и без верхнего поля рама осталась бы обрезанной по верхней кромке. Селекторы длиннее нужного не от хорошей жизни. Отступы и отрицательный верхний вынос секции Elementor печатает в CSS страницы (`uploads/elementor/css/post-16479.css`) селектором в три класса — короче него правило просто не доезжает. Четвёртым классом взят `.elementor-section`, а не id страницы: он не изменится, если владелец пересоберёт главную заново. `margin-top` обнуляем: секция стояла с выносом −10px и заезжала под полосу в шапке ровно на отступ колонок. Теперь над ней своя полоса, и вынос срезал бы верх карточек. ================================================================== */ .elementor .elementor-element.elementor-element-7580c73.elementor-section { background: var(--tk-show-deep); margin-top: 0; padding: 15px; } .elementor .elementor-element.elementor-element-7580c73.elementor-section .elementor-column > .elementor-element-populated { padding: 7px; } /* ---------- обещание пилюлей ---------- */ /* Полоса стоит соседом перед секцией: внутрь секции Elementor встать не даёт. Секцию он растягивает во всю ширину окна сам, скриптом, — полоса тянется тем же приёмом, но на CSS. Лишнее (ширина полосы считается с полосой прокрутки, ширина секции — без) срезает `overflow:clip` у `#page`, он же держит прилипание шапки; см. assets/header.css. Во всю ширину тянется только зелёное поле — оно продолжение рамы. Сама фраза собрана в пилюлю по центру: строка капслоком через весь экран читалась вторым баннером поверх витрины, а нужна подпись. Пилюля — тот же язык, что у подписей на карточках, только тише: не заливка, а волосяная рамка на зелёном. */ .tk-ann.tk-ann--show { /* Полоса красится переменной из announce.css — подменяем её значение, чтобы поле над карточками и рама были одного цвета. */ --tk-ann-deep: var(--tk-show-deep); width: 100vw; margin-left: calc(50% - 50vw); height: auto; padding: 12px 22px 0; justify-content: center; } /* Фактура сатина здесь лишняя: на зелёном поле складки и блик снова очертили бы прямоугольник — ровно то, от чего уходим. Поле остаётся плоским, в цвет рамы. На странице магазина полоса живёт в шапке и фактуру сохраняет. */ .tk-ann.tk-ann--show .tk-ann__folds, .tk-ann.tk-ann--show .tk-ann__shade, .tk-ann.tk-ann--show .tk-ann__sheen, .tk-ann.tk-ann--show .tk-ann__thread { display: none; } /* Пилюля. В шапке эта обёртка занимает всю полосу, здесь сжимается по содержимому и получает тело. `max-width` держит её в поле рамы: на узком экране фраза переносится внутрь пилюли, а не вылезает наружу. Поле слева равно всему, что стоит справа от фразы (зазор + крестик + поле): 8 + 20 + 8. Иначе крестик съедает место с одной стороны, и фраза уезжает влево — пилюля стоит по центру экрана, а читается косо. */ .tk-ann.tk-ann--show .tk-ann__inner { flex: 0 1 auto; align-self: auto; max-width: 100%; gap: 8px; padding: 8px 8px 8px 36px; border: 1px solid var(--tk-show-ink-line); border-radius: 999px; background: var(--tk-show-pill); } /* Поля в 52px под крестик полосе больше не нужны: он стоит в строке, внутри пилюли. */ .tk-ann.tk-ann--show.is-still .tk-ann__track { flex: 0 1 auto; padding: 0; overflow: visible; } /* Разрядка мельче, чем у полосы в шапке: 0.24em растаскивает фразу на всю ширину пилюли, и подпись снова становится плашкой. Тень не нужна — она была рассчитана на фактуру. Интервал задан числом: тема ставит `span`'ам глухие 22px, и пилюля с ними вырастала до 44px — из подписи снова получалась плашка. */ .tk-ann.tk-ann--show .tk-ann__text { font-size: 10.5px; line-height: 16px; letter-spacing: 0.14em; color: var(--tk-show-ink); text-shadow: none; } /* Крестик из края полосы переезжает в строку — кружком у правого края пилюли. Растушёвка в цвет полосы тут не нужна: лента под него не уезжает. */ .tk-ann.tk-ann--show .tk-ann__close { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: none; color: var(--tk-show-ink-soft); } /* Кружок в 20px пальцем не взять — поле попадания шире самого знака, тем же приёмом, что у крестика виджета контактов. */ .tk-ann.tk-ann--show .tk-ann__close::after { content: ""; position: absolute; inset: -8px; } .tk-ann.tk-ann--show .tk-ann__close:hover, .tk-ann.tk-ann--show .tk-ann__close:focus-visible { opacity: 1; background: var(--tk-show-ink-wash); color: var(--tk-show-ink); } .tk-ann.tk-ann--show .tk-ann__close svg { width: 9px; height: 9px; } /* ---------- телефон ---------- */ @media only screen and (max-width: 767px) { .elementor .elementor-element.elementor-element-7580c73.elementor-section { padding: 9px; } /* Elementor и сам ставит здесь 5px, но своим правилом с id страницы. Повторяем явно: геометрия рамы должна читаться целиком в одном месте. */ .elementor .elementor-element.elementor-element-7580c73.elementor-section .elementor-column > .elementor-element-populated { padding: 5px; } /* Минимума высоты у поля нет: его рост считает пилюля. */ .tk-ann.tk-ann--show, .tk-ann.tk-ann--show.is-still { height: auto; min-height: 0; padding: 10px 14px 0; } /* Поле слева опять равно правой стороне: 6 + 16 + 6. Числа мельче десктопных не ради вида, а ради строки: симметричные поля стоят фразе 56px, и на 375px она без этого переносится. */ .tk-ann.tk-ann--show .tk-ann__inner { gap: 6px; padding: 7px 6px 7px 28px; } /* Кегль и разрядка подобраны замером: фраза должна встать в одну строку на 375px и шире. Уже она переносится на две, и пилюля растёт лозенгом; это лучше, чем строка, вылезающая за поле рамы. Менять кегль и разрядку только вместе, проверяя ширину строки. */ .tk-ann.tk-ann--show.is-still .tk-ann__text { font-size: 9px; letter-spacing: 0.04em; line-height: 15px; } /* Знак мельче, поле попадания то же: его держит ::after, а не размер кружка. */ .tk-ann.tk-ann--show .tk-ann__close { width: 16px; height: 16px; } }