/* ============================================================================ * Camelia Flowers — оформление главной. Перенос принятого прототипа v5 * (clients/camelia-flowers/site/prototype/glavnaya-he-v5.html, TASK-004). * * Здесь ТОЛЬКО оформление: раскладка секций, которую Elementor не выражает * настройкой без потери принятой композиции. Содержание живёт в Elementor, * значения цвета и типографики — в camelia-tokeny.css (design.md §4–§6). * * ⚠ Все селекторы начинаются с `body` намеренно. Elementor красит контейнеры * правилами вида `.e-con{display:flex}` весом 0,1,0; `body .cml-…` даёт 0,1,1 * и выигрывает по весу, а не по порядку подключения. Без этого раскладка * зависела бы от того, чей файл встал в ниже. * * ⚠ Имена классов префиксованы `cml-`: в прототипе они были общими (.head, * .grid, .card, .form) и на живом сайте столкнулись бы с темой и плагинами. * * Israsky, 30.08.2026. * ========================================================================== */ :root{ --cml-r:0; /* блоки и карточки: прямой угол */ --cml-pad:20px; /* поле страницы на телефоне */ --cml-inner-w:1200px; /* шкала 60/15 = 4:1 — разброс между H1 и мелкой подписью взят от принятого экрана v4, чтобы композиция не поехала. Корпусные 17 px — нижняя граница диапазона design.md §5.4. */ --cml-t-hero:60px; --cml-t-h2:30px; --cml-t-h3:21px; --cml-t-lead:19px; --cml-t-body:17px; --cml-t-small:15px; --cml-foot-tx:#DCD8E2; --cml-foot-mu:#ABA6B5; } @media (max-width:379px){ :root{ --cml-t-hero:52px } } /* ⚠ Русская строка на 20–30 % длиннее ивритской (design.md §5.4), и принятый прототип задаёт русской главной свою шкалу заголовка. Привязка к [lang], а не к rtl/ltr: величина зависит от языка, а не от направления письма. */ html[lang^="ru"]{ --cml-t-hero:52px } @media (max-width:379px){ html[lang^="ru"]{ --cml-t-hero:46px } } @media (max-width:339px){ html[lang^="ru"]{ --cml-t-hero:40px } } /* --------------------------------------------------------------------------- * Обнуление собственных отступов контейнеров Elementor. * Правится через его же переменные, а не поверх его правил: так настройка * остаётся в редакторе рабочей, а наши секции не получают двойных полей. * ------------------------------------------------------------------------- */ /* ⚠ Вес селектора здесь не украшение. Кит Elementor задаёт поля контейнера правилом `.elementor-kit-5 .e-con` — это 0,2,0, и `body .cml-sec` (0,1,1) ему проигрывает. Поймано кадром: `--padding-block-start` слушался, а `--padding-inline-start` оставался 10 px, и полоса обещания не доходила до края экрана на 10 px с каждой стороны. `body .e-con.cml-sec` даёт 0,2,1. */ body .e-con.cml-sec, body .e-con.cml-sub, body .cml-sec .e-con{ --padding-block-start:0px; --padding-block-end:0px; --padding-inline-start:0px; --padding-inline-end:0px; --margin-block-start:0px; --margin-block-end:0px; --margin-inline-start:0px; --margin-inline-end:0px; --gap:0px; --row-gap:0px; --column-gap:0px; --widgets-spacing:0px; --widgets-spacing-row:0px; --widgets-spacing-column:0px; --width:100%; --content-width:100%; --min-height:0px; } body .cml-sec .elementor-widget:not(:last-child){ margin-block-end:0 } /* html-виджет, который обязан исчезнуть из раскладки: сеточным или флекс- элементом становится не обёртка Elementor, а сама разметка внутри неё. Без этого каждый такой блок получает лишний уровень и принятая сетка перестаёт быть сеткой. */ body .cml-passthru, body .cml-passthru > .elementor-widget-container{ display:contents } /* --------------------------------- основа -------------------------------- */ body{ font:400 var(--cml-t-body)/1.62 var(--cml-antikva); padding-block-end:76px; /* место под липкую панель — резерв, не сдвиг */ overflow-wrap:break-word; overflow-x:clip; /* clip, не hidden: не ломает fixed-элементы */ } body img{ max-inline-size:100% } body .cml-sec h1, body .cml-sec h2, body .cml-sec h3, body .cml-foot h2{ font-family:var(--cml-antikva); font-weight:400; color:var(--cml-zagolovok); margin:0; line-height:1.14; } body .cml-sec p{ margin:0 } body .cml-vh{ position:absolute;inline-size:1px;block-size:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap } body .cml-skip{ position:absolute;inset-block-start:-70px;inset-inline-start:12px;z-index:60; background:var(--cml-siren);color:#fff;padding:12px 22px; border-radius:var(--cml-radius-knopki);text-decoration:none;font-size:var(--cml-t-small) } /* сдвиг ТОЛЬКО вверх: смещение вбок в RTL растягивает страницу */ body .cml-skip:focus{ inset-block-start:8px } body .cml-wrap{ padding-inline:var(--cml-pad) } body .cml-i{ inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;flex:none } body bdi{ white-space:nowrap } /* телефон и «11:00–19:00» неделимы */ /* кнопка: капсула шаблона, гротеск, вес 700. ⚠ Прописных нет: у иврита их не существует вовсе, а русская строка прописными начинает кричать и переноситься (разбор — TASK-004). */ body .cml-btn, body .cml-btn-w .elementor-button{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-block-size:52px;padding:0 30px;border:0;border-radius:var(--cml-radius-knopki); font:700 var(--cml-t-small)/1 var(--cml-grotesk);letter-spacing:.04em; text-transform:none;text-decoration:none;cursor:pointer; background:var(--cml-siren);color:#fff; transition:background-color var(--cml-perehod) ease } body .cml-btn:hover, body .cml-btn:focus, body .cml-btn-w .elementor-button:hover, body .cml-btn-w .elementor-button:focus{ background:var(--cml-siren-hover);color:#fff } /* вторичная кнопка — лайм с тёмной надписью: 10,13 при норме 4,5 */ body .cml-btn-lime{ background:var(--cml-lajm);color:var(--cml-zagolovok) } body .cml-btn-lime:hover, body .cml-btn-lime:focus{ background:#B4BF3C;color:var(--cml-zagolovok) } /* надглавие несёт факт, а не украшает — единственное место гротеска в тексте */ body .cml-eyebrow, body .cml-eyebrow .elementor-heading-title{ font:500 13px/1.45 var(--cml-grotesk);text-transform:uppercase;letter-spacing:.09em; color:var(--cml-prigl);display:block } body .cml-eyebrow{ margin-block-end:8px } body a.cml-more{ display:inline-block;margin-block-start:26px; color:var(--cml-siren);min-block-size:48px;line-height:48px;font-size:var(--cml-t-body) } /* ---------------------- полоса обещания: строка, не панель ---------------- */ body .cml-promise{ background:var(--cml-siren);color:#fff; font:400 var(--cml-t-small)/1.45 var(--cml-grotesk);padding:9px var(--cml-pad);margin:0 } body .cml-promise b{ font-weight:500 } /* --------------------------------- шапка --------------------------------- */ body .cml-head{ display:flex;align-items:center;gap:14px;padding:12px var(--cml-pad) 8px } body .cml-brand{ text-decoration:none;color:var(--cml-zagolovok);margin-inline-end:auto; display:block } body .cml-brand-name{ font-family:var(--cml-antikva);font-weight:400;font-size:26px; line-height:1.1;display:block } body .cml-brand-sub{ font:400 13px/1.3 var(--cml-grotesk);color:var(--cml-prigl); display:block;margin-block-start:2px } body .cml-brand-sub .cml-nb{ white-space:nowrap } body .cml-mainnav, body .cml-head-tel{ display:none } /* переключатель языков — заметный элемент шапки, а не флажок в углу */ body .cml-langs{ display:flex;gap:10px;align-items:baseline;font-size:var(--cml-t-small) } body .cml-langs a{ text-decoration:none;color:var(--cml-prigl);padding:6px 2px; min-block-size:44px;font:500 13px/1 var(--cml-grotesk);text-transform:uppercase; letter-spacing:.07em;display:flex;align-items:center } /* состояние передаётся не одним цветом: черта + вес + aria-current */ body .cml-langs a[aria-current]{ color:var(--cml-zagolovok);font-weight:700; box-shadow:inset 0 -2px 0 0 var(--cml-siren) } body .cml-cart{ display:flex;align-items:center;gap:6px;color:var(--cml-zagolovok); text-decoration:none;font-size:var(--cml-t-small);min-block-size:48px; min-inline-size:48px;justify-content:center } /* --------------------------------- герой --------------------------------- * Порядок на телефоне: текст → фотография → кнопка, и кнопка заходит НА * фотографию. Так снимок попадает на первый экран, а перекрытие даёт * асимметрию вместо ряда полос. * ------------------------------------------------------------------------ */ body .cml-hero{ display:grid;grid-template-columns:100%;padding-block:6px 0 } body .cml-hero > .cml-hero-txt{ order:1;padding-inline:var(--cml-pad) } body .cml-hero > .cml-shots{ order:2 } body .cml-hero > .cml-cta{ order:3 } body .cml-hero .cml-catbar{ order:4;margin-block-start:18px } body .cml-hero > .cml-order{ order:5 } /* ⛔ ЛОВУШКА ch: единица считается по ширине латинского «0», а заголовок набран ивритом или кириллицей из других файлов — пока файлы едут, ширина колонки и ширина текста в ней считаются по РАЗНЫМ шрифтам (CLS 0,134). Мера строки задаётся в em: em считается от font-size и от подмены шрифта не зависит. */ body .cml-hero-h1 .elementor-heading-title{ font-size:var(--cml-t-hero);color:var(--cml-zagolovok);line-height:1.14; max-inline-size:min(100%,9em) } html[lang^="ru"] body .cml-hero-h1 .elementor-heading-title{ max-inline-size:7.32em } body .cml-hero-h1{ margin-block-end:10px } body .cml-lead p{ font-size:var(--cml-t-body);line-height:1.5;color:var(--cml-tekst); max-inline-size:21.59em } body .cml-hero > .cml-cta{ margin-block-start:-36px;position:relative;z-index:1; padding-inline:var(--cml-pad) } /* фотография героя выходит за оба края экрана — кадрируется вьюпортом */ body .cml-shot{ margin-block-start:14px;aspect-ratio:16/9;overflow:clip; background:var(--cml-linii) } body .cml-shot img{ inline-size:100%;block-size:100%;object-fit:cover; object-position:center;display:block } body .cml-thumbs{ display:none } /* ---------- категории на телефоне: лента, а не гамбургер ---------- */ body .cml-catbar{ display:flex;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain; scroll-snap-type:inline mandatory;scrollbar-width:none; padding:2px var(--cml-pad) 12px;background:var(--cml-bumaga);margin:0 } body .cml-catbar::-webkit-scrollbar{ display:none } body .cml-catbar a{ flex:none;scroll-snap-align:start;text-decoration:none;white-space:nowrap; display:inline-flex;align-items:center;min-block-size:44px;padding:0 16px; color:var(--cml-zagolovok);background:var(--cml-kartochka); border:1px solid var(--cml-linii);border-radius:var(--cml-radius-knopki); font:500 13px/1 var(--cml-grotesk);text-transform:uppercase;letter-spacing:.07em; transition:border-color var(--cml-perehod) ease,color var(--cml-perehod) ease } body .cml-catbar a:hover, body .cml-catbar a:focus{ border-color:var(--cml-siren);color:var(--cml-siren) } /* ---------- строка выбора: заказ произносят фразой ---------- */ body .cml-order{ background:var(--cml-kartochka);border-block:1px solid var(--cml-linii); padding-block:34px 32px } body .cml-order-in{ padding-inline:var(--cml-pad) } body .cml-order-h .elementor-heading-title{ font-size:var(--cml-t-h3) } body .cml-order-h{ margin-block-end:18px } body .cml-say{ display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 } body .cml-say .cml-part{ display:inline-flex;align-items:center;gap:9px } /* ⚠ Подпись поля не переносится внутри себя: «לשלוח ל» ломалось на «לשלוח» и отдельное «ל». Фраза обязана переноситься ПО ЧАСТЯМ (.cml-part), а не внутри слова — ради этого подпись и поле и держатся одним куском. Причина, по которой на живом сайте места меньше, чем в прототипе: поле даты пустое, и браузер показывает полную маску «дд.мм.гггг» вместо короткой даты демо. Дату по умолчанию сюда не ставим — статическая дата протухнет. */ body .cml-say label{ font-family:var(--cml-antikva);font-weight:400;font-size:21px; color:var(--cml-zagolovok);white-space:nowrap } body .cml-say select, body .cml-say input{ font:400 var(--cml-t-body)/1 var(--cml-antikva);color:var(--cml-zagolovok); background:var(--cml-kartochka); border:1px solid var(--cml-siren); /* рамка есть только у полей ввода */ border-radius:var(--cml-radius-knopki);min-block-size:48px;padding:0 16px; max-inline-size:100% } /* правило шаббата — условие доставки, а не декоративная подпись: основной цвет */ body .cml-order .cml-hint{ display:block;font-size:var(--cml-t-small);line-height:1.55; color:var(--cml-tekst);margin-block-start:16px } body .cml-order .cml-cta{ margin-block-start:20px } /* ------------------- ⭐ ПОЛОСА ИЗ ТРЁХ ПЛАШЕК ------------------- * Главное заимствование у шаблона Camelia и единственное украшение страницы: * под первым экраном лента из трёх блоков в трёх разных цветах. Магазин * отвечает на страх покупателя («привезут ли вовремя и сколько это стоит») * до того, как тот начал искать. Плашки идут В КРАЙ ЭКРАНА и стыкуются без * зазора: это лента, а не три карточки. * ⚠ Надписи на лайме и розовом — тёмные (10,13 и 10,43 при норме 4,5). * Цвет самих плашек не тронут ни на тон. * ------------------------------------------------------------- */ body .cml-facts{ display:grid;grid-template-columns:1fr } body .cml-facts > .cml-fact{ padding:24px var(--cml-pad) 26px } body .cml-fact-1{ background:var(--cml-siren);color:#fff } body .cml-fact-2{ background:var(--cml-lajm);color:var(--cml-zagolovok) } body .cml-fact-3{ background:var(--cml-rozovyj);color:var(--cml-zagolovok) } body .cml-fact a{ color:inherit;text-underline-offset:3px } body .cml-fact .cml-rows dt, body .cml-fact .cml-rows dd, body .cml-fact .cml-big, body .cml-fact .cml-sub{ color:inherit } /* иерархию внутри плашки несут кегль и трекинг, а не второй серый: приглушённого цвета здесь нет вовсе, иначе контраст на цветном фоне поплывёт */ body .cml-lbl{ display:block;font:500 12px/1.4 var(--cml-grotesk);text-transform:uppercase; letter-spacing:.11em;color:inherit;margin-block-end:12px } body .cml-rows{ margin:0;max-inline-size:20em } body .cml-rows div{ display:flex;justify-content:space-between;align-items:baseline; gap:14px;padding-block:3px } body .cml-rows dt{ font-size:var(--cml-t-body) } body .cml-rows dd{ margin:0;font-weight:500;font-size:21px;white-space:nowrap; font-variant-numeric:tabular-nums } body .cml-big{ font-size:25px;line-height:1.2;margin:0 } body .cml-sub{ font-size:var(--cml-t-small);line-height:1.55;margin-block-start:8px } body .cml-pair{ white-space:nowrap } /* ------------------ витрина: карточка целиком ссылка ------------------ */ body .cml-showcase{ padding-block:38px 34px } body .cml-showcase-h .elementor-heading-title{ font-size:var(--cml-t-h2) } body .cml-showcase-h{ margin-block-end:22px } body .cml-grid{ display:grid;grid-template-columns:1fr 1fr;gap:26px 12px } body .cml-card{ display:block;text-decoration:none;color:inherit } /* «карточку» рисует не рамка, а тёплый фон самой фотографии */ body .cml-card img{ display:block;inline-size:100%;block-size:auto;aspect-ratio:1/1; border-radius:var(--cml-r) } body .cml-nm .elementor-heading-title{ font-size:var(--cml-t-body);line-height:1.35; color:var(--cml-tekst);font-weight:400 } body .cml-nm{ margin-block-start:10px } /* цена читается, а не кричит: вес 500, не 700 */ body .cml-pr .elementor-heading-title{ font-weight:500;color:var(--cml-zagolovok); font-size:var(--cml-t-body) } body .cml-pr{ margin-block-start:6px } body .cml-card:hover .cml-nm .elementor-heading-title{ text-decoration:underline; text-underline-offset:3px } /* ------------------------------- магазин ------------------------------- */ body .cml-shop{ background:var(--cml-kartochka);color:var(--cml-tekst); padding-block:40px 42px } body .cml-shop-h .elementor-heading-title{ font-size:var(--cml-t-h2) } body .cml-shop-h{ margin-block-end:14px } /* кадр фасада — документальный снимок: без рамки, скругления и тени */ body .cml-fasad img{ display:block;inline-size:100%;block-size:auto; background:var(--cml-linii) } body .cml-fasad{ margin-block:0 22px } body .cml-shop-p p{ color:var(--cml-tekst);margin-block-end:22px } body .cml-hours{ margin:24px 0 0;font-size:var(--cml-t-body) } body .cml-hours div{ display:flex;justify-content:space-between;gap:12px;padding-block:11px; border-block-end:1px solid var(--cml-linii) } body .cml-hours dt{ color:var(--cml-tekst) } body .cml-hours dd{ margin:0;font-weight:500;color:var(--cml-zagolovok) } body .cml-shop-cta{ display:flex;flex-wrap:wrap;gap:12px;align-items:center; margin-block-start:24px;margin-block-end:0 } body .cml-shop-cta .cml-lnk{ color:var(--cml-siren);font-size:var(--cml-t-body); min-block-size:48px;display:inline-flex;align-items:center;gap:9px;padding-inline:6px } /* ------------------------------- вопросы ------------------------------- */ body .cml-faq{ padding-block:36px 30px } body .cml-faq-h .elementor-heading-title{ font-size:var(--cml-t-h2) } body .cml-faq-h{ margin-block-end:18px } body .cml-qa{ padding-block:16px;border-block-end:1px solid var(--cml-linii) } body .cml-qa:last-of-type{ border-block-end:0 } body .cml-qa-q .elementor-heading-title{ font-size:var(--cml-t-h3) } body .cml-qa-q{ margin-block-end:6px } body .cml-qa-a p{ color:var(--cml-tekst) } /* --------------------- отзывы: список, а не карточки --------------------- */ body .cml-reviews{ padding-block:36px 34px } body .cml-rev-h .elementor-heading-title{ font-size:var(--cml-t-h2) } body .cml-rev-h{ margin-block-end:10px } body .cml-rev-lead p{ color:var(--cml-tekst);max-inline-size:34em } body .cml-rev-lead{ margin-block-end:20px } /* рамка блока собирается из тех же волосяных линий, что разделяют строки */ body .cml-rv{ margin:0;padding-block:20px;border-block-start:1px solid var(--cml-linii) } body .cml-rv:last-of-type{ border-block-end:1px solid var(--cml-linii) } /* отзыв набран крупнее корпуса: это речь покупателя, а не наш текст */ body .cml-rv-q{ margin:0;font-size:var(--cml-t-lead);line-height:1.55; color:var(--cml-zagolovok);max-inline-size:34em } body .cml-rv-m{ display:block;margin-block-end:8px } /* имя остаётся антиквой и ровно в том написании, в каком человек подписался */ body .cml-rv-m .cml-who{ display:block;font-size:var(--cml-t-body); color:var(--cml-zagolovok) } body .cml-rv-m .cml-when, body .cml-rv-m .cml-tr{ display:block; font:500 13px/1.5 var(--cml-grotesk);text-transform:uppercase;letter-spacing:.09em; color:var(--cml-prigl);font-variant-numeric:tabular-nums;margin-block-start:3px } /* -------------------------------- форма -------------------------------- */ body .cml-lead-form{ padding-block:38px 40px;background:var(--cml-kartochka) } body .cml-form-h .elementor-heading-title{ font-size:var(--cml-t-h2) } body .cml-form-h{ margin-block-end:8px } body .cml-form-lead p{ color:var(--cml-prigl) } body .cml-form-lead{ margin-block-end:22px } body .cml-privacy p{ font-size:var(--cml-t-small);color:var(--cml-prigl);line-height:1.6 } body .cml-privacy{ margin-block-start:18px } /* поля формы Elementor — на те же токены, что и поля прототипа */ body .cml-form-w .elementor-field-group{ margin-block-end:18px;padding:0 } body .cml-form-w .elementor-field-label{ display:block;font:500 13px/1.4 var(--cml-grotesk); text-transform:uppercase;letter-spacing:.08em;color:var(--cml-zagolovok); margin-block-end:7px } body .cml-form-w .elementor-field-textual{ inline-size:100%; font:400 var(--cml-t-body)/1.5 var(--cml-antikva);color:var(--cml-zagolovok); background:var(--cml-kartochka);border:1px solid var(--cml-granica-polya); border-radius:var(--cml-radius-knopki);min-block-size:52px;padding:13px 18px } body .cml-form-w textarea.elementor-field-textual{ min-block-size:96px;resize:vertical; border-radius:var(--cml-radius-bloka) } body .cml-form-w .elementor-field-description{ font-size:var(--cml-t-small); color:var(--cml-prigl);margin-block-start:6px;display:block } body .cml-form-w .elementor-field-type-acceptance .elementor-field-option, body .cml-form-w .elementor-field-type-checkbox .elementor-field-subgroup{ display:flex;gap:10px;align-items:flex-start;font-size:var(--cml-t-small); line-height:1.55 } body .cml-form-w .elementor-field-type-acceptance input[type="checkbox"], body .cml-form-w .elementor-field-type-checkbox input[type="checkbox"]{ inline-size:24px;block-size:24px;margin:2px 0 0;flex:none;accent-color:var(--cml-siren) } body .cml-form-w .cml-fg-hint{ margin-block-start:-12px } body .cml-form-w .cml-hint-txt{ font-size:var(--cml-t-small);color:var(--cml-prigl); display:block } body .cml-form-w .elementor-button{ min-block-size:52px;padding:0 30px; border-radius:var(--cml-radius-knopki);background:var(--cml-siren);color:#fff; font:700 var(--cml-t-small)/1 var(--cml-grotesk);letter-spacing:.04em; text-transform:none } body .cml-form-w .elementor-button:hover{ background:var(--cml-siren-hover) } /* -------------------------------- подвал -------------------------------- */ body .cml-foot{ background:var(--cml-zagolovok);color:var(--cml-foot-tx); padding-block:32px 30px;font-size:var(--cml-t-small);line-height:1.7 } /* колонки подвала озаглавлены не заголовками, а метками */ body .cml-foot h2{ font:500 13px/1.4 var(--cml-grotesk);text-transform:uppercase; letter-spacing:.1em;color:#fff;margin-block-end:10px } body .cml-foot a{ color:var(--cml-foot-tx) } body .cml-foot ul{ list-style:none;margin:0 0 24px;padding:0 } body .cml-foot li a{ display:inline-block;min-block-size:40px;line-height:40px } body .cml-foot p{ margin:0 } body .cml-foot .cml-legal{ margin-block-start:20px;padding-block-start:18px; border-block-start:1px solid rgba(220,216,226,.22);color:var(--cml-foot-mu) } /* ------------------------ липкая мобильная панель ------------------------ */ body .cml-sticky{ position:fixed;inset-block-end:0;inset-inline:0;z-index:40;display:flex; background:var(--cml-kartochka);box-shadow:0 -2px 14px rgba(27,23,38,.16); padding-block-end:env(safe-area-inset-bottom,0px) } body .cml-sticky a{ flex:1;min-block-size:64px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:3px;color:var(--cml-zagolovok); text-decoration:none;font:400 13px/1.2 var(--cml-grotesk) } body .cml-sticky a + a{ border-inline-start:1px solid var(--cml-linii) } /* ======================= десктоп: другая композиция ======================= * Не «то же самое шире»: колонка текста несёт заголовок, обещание, строку * выбора и одну кнопку; колонка снимков идёт в край экрана; под героем — * полоса из трёх фактов. Проверено на 1440×900 и 1920×1080. * ======================================================================== */ @media (min-width:900px){ :root{ --cml-pad:48px; --cml-t-hero:clamp(72px,5vw,104px); --cml-t-h2:40px; --cml-t-h3:24px; --cml-t-lead:21px; /* высота первого экрана: столько, чтобы под ним осталось место полосе фактов и верхнему краю карточек витрины */ --cml-hero-h:clamp(440px,calc(100vh - 470px),640px); --cml-thumb:min(clamp(150px,12.5vw,236px), calc((var(--cml-hero-h) - 16px)/2 - 52px)); } html[lang^="ru"]{ --cml-t-hero:clamp(60px,4vw,84px); /* ⚠ по-русски подпись миниатюры ложится в две строки, и столбик перерастал героя (463 против 440 px при 1440). Резервируем две строки: 52 → 75 px. */ --cml-thumb:min(clamp(150px,12.5vw,236px), calc((var(--cml-hero-h) - 16px)/2 - 75px)) } body{ padding-block-end:0 } body .cml-sticky{ display:none } body .cml-inner{ max-inline-size:var(--cml-inner-w);margin-inline:auto } /* шапка: на широком экране в ней есть меню и телефон. Меню шапки и лента категорий никогда не видны одновременно. */ body .cml-catbar{ display:none } body .cml-head{ padding-block:18px 12px } body .cml-brand{ margin-inline-end:0 } body .cml-brand-name{ font-size:32px } body .cml-mainnav{ display:flex;gap:22px;margin-inline-end:auto;margin-inline-start:38px; font-size:var(--cml-t-body) } body .cml-mainnav a{ color:var(--cml-zagolovok);text-decoration:none;min-block-size:44px; display:flex;align-items:center; font:500 14px/1 var(--cml-grotesk);text-transform:uppercase;letter-spacing:.07em } body .cml-mainnav a:hover{ box-shadow:inset 0 -2px 0 0 var(--cml-siren) } body .cml-head-tel{ display:inline-flex;align-items:center;gap:8px; color:var(--cml-zagolovok);text-decoration:none;font-size:var(--cml-t-body); min-block-size:48px;margin-inline-end:12px } body .cml-head-tel:hover{ box-shadow:inset 0 -2px 0 0 var(--cml-siren) } /* ------------------------------ герой ------------------------------ */ body .cml-hero{ max-inline-size:none;margin-inline:0;overflow:clip; padding-inline-start:max(var(--cml-pad), calc((100% - var(--cml-inner-w))/2)); padding-inline-end:0;padding-block:0; grid-template-columns:minmax(0,1fr) min(var(--cml-hero-h),44vw); grid-template-rows:1fr auto auto 1fr; column-gap:clamp(36px,3.6vw,72px); min-block-size:var(--cml-hero-h) } body .cml-hero > .cml-hero-txt{ grid-column:1;grid-row:2;padding-inline:0;padding-block:0 } body .cml-hero-h1 .elementor-heading-title{ max-inline-size:none } html[lang^="ru"] body .cml-hero-h1 .elementor-heading-title{ max-inline-size:7.32em } body .cml-hero-h1{ margin-block-end:16px } body .cml-lead p{ font-size:var(--cml-t-lead);max-inline-size:25.40em } body .cml-hero > .cml-cta{ display:none } /* одна кнопка на экран — в строке выбора */ /* колонка снимков: два товара с ценой + большой кадр, строго 1:1 */ body .cml-hero > .cml-shots{ grid-column:2;grid-row:1/5;display:flex; justify-content:space-between;align-items:flex-end;gap:20px;block-size:100% } body .cml-thumbs{ flex-direction:column;justify-content:flex-end;gap:16px; inline-size:var(--cml-thumb);flex:none;block-size:100% } body .cml-thumb{ display:block;text-decoration:none;color:inherit } body .cml-thumb img{ display:block;inline-size:100%;block-size:auto;aspect-ratio:1/1; border-radius:var(--cml-r) } body .cml-thumb .cml-nm .elementor-heading-title{ font-size:var(--cml-t-small); line-height:1.3 } body .cml-thumb .cml-nm{ margin-block-start:8px } body .cml-thumb .cml-pr .elementor-heading-title{ font-size:var(--cml-t-small); font-weight:500;font-variant-numeric:tabular-nums } body .cml-thumb .cml-pr{ margin-block-start:2px } html[lang^="ru"] body .cml-thumb .cml-nm .elementor-heading-title{ min-block-size:calc(2 * 1lh) } /* ⚠ размер снимка задаётся ЯВНО: block-size:100% + aspect-ratio здесь не работает — высота флекс-элемента при растяжении для процентов неопределённа, и квадрат брал собственные 800×800, а колонка текста сжималась до 248 px. */ body .cml-hero .cml-shot{ flex:0 0 auto;margin-block-start:0; block-size:var(--cml-hero-h);inline-size:min(var(--cml-hero-h),44vw);overflow:clip; aspect-ratio:auto } /* строка выбора внутри героя: подписи и поля идут одной фразой */ body .cml-hero > .cml-order{ grid-column:1;grid-row:3;background:none;border:0;padding:0; margin-block-start:30px } body .cml-hero .cml-order-in{ padding-inline:0;max-inline-size:none;margin-inline:0 } body .cml-hero .cml-order .cml-hint{ display:none } /* то же словами — в полосе фактов */ body .cml-hero .cml-order .cml-cta{ margin:0 } body .cml-hero .cml-order-form{ display:flex;flex-wrap:wrap;align-items:center; gap:14px 18px } body .cml-hero .cml-say{ display:contents } /* поля и кнопка в одном потоке переноса */ /* лента категорий: своё место в сетке героя — под единственной кнопкой. ⚠ Это не вкус, а замер: строка под шапкой стоит 80 px первого экрана и уводит кнопку призыва под куки-баннер на обоих языках. */ body .cml-hero .cml-catbar{ grid-column:1;grid-row:4;align-self:start; margin-block-start:26px;padding:0;background:none; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%) } /* ------- полоса из трёх плашек: десктопная раскладка ------- ⚠ Высота полосы задана не вкусом, а свойством принятой композиции: верхний ряд витрины обязан выглядывать из-под сгиба. Полоса на 253 px это свойство отменяла — карточка уходила на 52–63 px ниже окна. */ body .cml-facts{ grid-template-columns:repeat(3,1fr) } body .cml-facts > .cml-fact{ padding-block:20px 22px; padding-inline:clamp(24px,2.6vw,48px) } body .cml-lbl{ margin-block-end:8px } body .cml-rows div{ padding-block:0 } body .cml-big{ font-size:26px } body .cml-sub{ margin-block-start:6px } /* ------------------------------ витрина ------------------------------ */ body .cml-showcase{ padding-block:12px 56px } body .cml-head-row{ display:flex;align-items:baseline;justify-content:space-between; gap:28px;margin-block-end:20px;border-block-end:1px solid var(--cml-linii); padding-block-end:14px } /* в разметке надглавие стоит перед заголовком, как на телефоне; на десктопе их меняет местами order, а не перестановка тегов */ body .cml-showcase-h{ margin-block-end:0;order:1 } body .cml-head-row .cml-eyebrow{ margin-block-end:0;order:2 } body .cml-grid{ grid-template-columns:repeat(3,1fr);gap:34px 26px } /* --------------------------- прочие секции --------------------------- */ body .cml-reviews{ padding-block:56px } /* 240 px держат самое длинное имя и самую длинную метку каждое в одну строку */ body .cml-rv{ display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 40px; align-items:start;padding-block:24px } body .cml-rv-m{ margin-block-end:0 } body .cml-shop{ padding-block:60px } body .cml-shop-cols{ display:grid;grid-template-columns:1.05fr .95fr;gap:48px; align-items:stretch } /* часы сверху, связь снизу — вровень со ссылкой «как доехать» слева */ body .cml-shop-col2{ display:flex;flex-direction:column } /* контакты сразу под часами, а не в пустоте у низа колонки (замечание 31.08) */ body .cml-shop-col2 .cml-shop-cta{ margin-block-start:20px;margin-block-end:0 } /* ссылка «как доехать» стоит сразу за абзацем, своего верхнего отступа ей не нужно */ body .cml-shop a.cml-more{ margin-block-start:0 } body .cml-faq{ padding-block:56px } body .cml-faq-rows{ display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px } body .cml-qa{ border-block-end:0;border-block-start:2px solid var(--cml-linii); padding-block:18px 0 } body .cml-lead-form{ padding-block:56px } body .cml-form-cols{ display:grid;grid-template-columns:1fr 1fr;gap:0 48px; align-items:stretch } /* заголовок сверху, уведомление §11 снизу: у колонки два конца */ body .cml-form-col1{ display:flex;flex-direction:column } body .cml-form-col1 .cml-privacy{ margin-block-start:auto;margin-block-end:0 } body .cml-privacy p{ max-inline-size:34em } /* имя и телефон — в один ряд: форма ниже на строку, разрыв колонок меньше */ body .cml-form-w .elementor-form-fields-wrapper{ display:grid; grid-template-columns:1fr 1fr;gap:0 22px;align-content:start } body .cml-form-w .elementor-field-group{ grid-column:1/-1;max-inline-size:none; inline-size:auto } body .cml-form-w .elementor-field-group.cml-fg-name{ grid-column:1 } body .cml-form-w .elementor-field-group.cml-fg-tel{ grid-column:2 } body .cml-form-w .elementor-field-group.cml-fg-hint{ grid-column:2 } body .cml-foot-cols{ display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px } } /* столбик миниатюр включается только с 1200 px: ниже он съедает колонку текста */ @media (min-width:1200px){ body .cml-thumbs{ display:flex } /* 20 px — зазор флекса .cml-shots между столбиком миниатюр и большим кадром */ body .cml-hero{ grid-template-columns:minmax(0,1fr) calc(var(--cml-thumb) + 20px + min(var(--cml-hero-h),44vw)) } } /* на широком мониторе полотно шире: 1160 оставляло по 380 px пустых полей */ @media (min-width:1600px){ :root{ --cml-inner-w:1280px } } /* --------- русская шапка длиннее ивритской на четверть --------- * Замеры переполнения: на 320 корзина вылезала за край на 14 px из-за слова * «Русский», на 900–1024 за край уезжала вся строка шапки (+175 px при 900). * Ивритская шапка там же помещается — дело в длине слов, а не в композиции. */ @media (max-width:359px){ html[lang^="ru"] body .cml-head{ gap:10px } html[lang^="ru"] body .cml-brand-name{ font-size:24px } html[lang^="ru"] body .cml-langs{ gap:6px } html[lang^="ru"] body .cml-langs a{ font-size:14px } } @media (min-width:900px) and (max-width:1199px){ html[lang^="ru"] body .cml-brand-sub, html[lang^="ru"] body .cml-mainnav a, html[lang^="ru"] body .cml-head-tel, html[lang^="ru"] body .cml-langs a{ white-space:nowrap } /* меню шапки на этой ширине ещё не помещается — значит работает лента */ html[lang^="ru"] body .cml-mainnav{ display:none } html[lang^="ru"] body .cml-catbar{ display:flex } /* ⭐ 900–1199: лента показывает все шесть категорий, прокрутки нет. Своя строка для ленты — иначе нижняя доля 1fr отражается пустой верхней. */ html[lang^="ru"] body .cml-hero{ grid-template-rows:1fr auto auto auto 1fr } html[lang^="ru"] body .cml-hero > .cml-shots{ grid-row:1/-1 } html[lang^="ru"] body .cml-hero .cml-catbar{ grid-row:4;flex-wrap:wrap;row-gap:8px; overflow-x:visible;scroll-snap-type:none; -webkit-mask-image:none;mask-image:none } /* ⚠ Главный источник сдвига — строка выбора: по-русски она стоит ровно на границе, до подмены шрифта ложится в один ряд, после — в два, и блок рос с 91 до 281 px. Перенос по ширине заменён сеткой: рядов всегда два. */ html[lang^="ru"] body .cml-hero .cml-order-form{ display:grid; grid-template-columns:auto auto;justify-content:start;align-items:center; gap:16px 22px } html[lang^="ru"] body .cml-hero .cml-say{ display:contents } html[lang^="ru"] body .cml-hero > .cml-order{ margin-block-start:18px } } @media (min-width:1600px){ html[lang^="ru"] body .cml-mainnav{ gap:22px;font-size:var(--cml-t-body) } } /* мелочи чек-листа интерфейса */ body a, body button, body label, body select, body input, body summary{ touch-action:manipulation } html{ -webkit-tap-highlight-color:rgba(27,23,38,.14) } body .cml-sec h2, body .cml-sec h3{ text-wrap:balance } @supports not (aspect-ratio:1/1){ body .cml-shot{ min-block-size:290px } } @media (prefers-reduced-motion:reduce){ body .cml-sec *{ transition:none !important } } /* --------------------------------------------------------------------------- * ⚠ Направление флекса у контейнеров Elementor задаётся ЕГО переменной * `--flex-direction`, и по умолчанию она `column`. Наше `display:flex` его не * отменяет: колонка снимков вставала вертикально, миниатюры уезжали к краю, * а герой вырастал с 440 до 933 px при 1440. Поэтому ряд объявляется явно — * и свойством, и переменной, чтобы правка в редакторе тоже осталась рабочей. * Найдено кадром приёмки 30.08.2026, а не рассуждением. * ------------------------------------------------------------------------- */ @media (min-width:900px){ body .cml-hero > .cml-shots{ --flex-direction:row; flex-direction:row } body .cml-head-row{ --flex-direction:row; flex-direction:row } body .cml-thumbs{ --flex-direction:column; flex-direction:column } body .cml-shop-col2{ --flex-direction:column; flex-direction:column } body .cml-form-col1{ --flex-direction:column; flex-direction:column } } /* ============================================================================ Посадочная «Цветочный магазин в Бат-Яме» — /ru/flowers-in-bat-yam/ Хвост переписан начисто 31.08.2026 (четвёртая редакция, по четырём замечаниям Марины: лого, кнопка с телефоном, фото крупнее, пустое место у отзывов). Новых цветов нет — только токены главной. ========================================================================= */ /* логотип клиента в шапке — замена текстового бренда, общая для всех страниц */ body .cml-brand .cml-logo{ display:block;block-size:46px;inline-size:auto; max-inline-size:100% } /* ⛔ Переносы в словах не используем (указание Марины 31.08.2026: «не используй переносы в словах»). Их включает родительская тема Kava (.site{hyphens:auto} в theme.css) — на её кегле героя это давало «мага-зин» в H1 и «БУ-КЕТЫ» в навигации. hyphens наследуемое, перекрытие на том же селекторе накрывает всё. */ body .site{ -webkit-hyphens:manual;-ms-hyphens:manual;hyphens:manual } /* заголовок секции — тот же кегль, что у секций главной */ body .cml-sec-h .elementor-heading-title{ font-size:var(--cml-t-h2) } body .cml-sec-h{ margin-block-end:14px } /* Плашка состояния магазина. ⚠ Состояние передаётся СЛОВОМ, а не цветом: точка лишь усиливает, и при отключённом цвете смысл не теряется — требование ת"י 5568 AA. */ body .cml-status{ display:inline-flex;align-items:center;gap:9px; margin-block:14px 0;padding:8px 15px; background:var(--cml-kartochka);border:1px solid var(--cml-linii); border-radius:var(--cml-radius-knopki); font-family:var(--cml-grotesk);font-size:var(--cml-t-body); color:var(--cml-zagolovok);line-height:1.2 } body .cml-status-tochka{ inline-size:9px;block-size:9px;border-radius:50%; background:var(--cml-tekst);flex:0 0 auto } body .cml-status-on .cml-status-tochka{ background:#3F7D20 } body .cml-status-off .cml-status-tochka{ background:#9A3B3B } body .cml-status-noscript{ margin-block:14px 0;color:var(--cml-tekst); font-family:var(--cml-grotesk);font-size:var(--cml-t-body) } /* Разделитель хлебных крошек темы: серый #A1A2A4 на бумаге давал 2,32 при норме 4,5 — дефект каждой внутренней страницы, на главной крошек нет. */ body .breadcrumbs_item_sep{ color:var(--cml-tekst) } /* отступы секций: .cml-sec обнуляет всё, поэтому свои */ body .cml-lend-hero{ padding-block:26px 30px } body .cml-lend-magazin, body .cml-lend-dostavka{ padding-block:32px 8px } /* мера строки H1 посадочной шире главной: заголовок длиннее */ body .cml-lend-hero .cml-hero-h1 .elementor-heading-title{ max-inline-size:min(100%,11em) } html[lang^="ru"] body .cml-lend-hero .cml-hero-h1 .elementor-heading-title{ max-inline-size:min(100%,11em) } /* плашка: .cml-passthru = display:contents, дети попадают прямо в колонку-флекс и растягиваются — прижимаем явно */ body .cml-lend-hero .cml-status{ align-self:start } /* две капсулы в ряд (разметка ссылками, как cml-shop-cta главной); переносятся сами, когда не влезают */ body .cml-hero-knopki{ display:flex;flex-wrap:wrap;gap:12px 14px; margin-block-start:20px;align-items:center } /* кадры в колонках: во всю ширину своей колонки, не страницы */ body .cml-lend-hero-foto .cml-fasad img, body .cml-dost-foto img{ inline-size:100%;block-size:auto;display:block } /* сноска под часами */ body .cml-chasy-snoska{ margin-block:14px 0;color:var(--cml-tekst); font-size:var(--cml-t-small,15px) } /* телефон: всё одним столбиком, пары складываются */ body .cml-lend-hero-cols, body .cml-mag-cols, body .cml-dost-cols{ display:flex;flex-direction:column;gap:24px } @media (min-width:900px){ body .cml-lend-hero{ padding-block:46px 52px } body .cml-lend-magazin, body .cml-lend-dostavka{ padding-block:56px 12px } /* герой: текст слева, крупный фасад справа. Колонки тянутся на одну высоту, кадр заполняет свою целиком — «фото нужно крупнее» */ body .cml-lend-hero-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,50%);gap:56px;align-items:stretch } body .cml-lend-hero-foto .cml-fasad, body .cml-lend-hero-foto .cml-fasad .elementor-widget-container{ block-size:100% } body .cml-lend-hero-foto .cml-fasad img{ inline-size:100%;block-size:100%; object-fit:cover;min-block-size:400px } /* магазин: рассказ слева, часы справа */ body .cml-mag-cols{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:start } /* доставка: текст слева, букет справа */ body .cml-dost-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:56px;align-items:center } /* отзывы: карточки в три колонки — правая половина полосы не пустует */ body .cml-lend-rv .cml-rv-grid .elementor-widget-container{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch } body .cml-lend-rv .cml-rv{ background:var(--cml-kartochka); border:1px solid var(--cml-linii);border-radius:var(--cml-radius-bloka); padding:22px } } /* контакт в середине колонки формы (замечание Марины 31.08: пустое место) */ body .cml-form-alt{ margin-block:24px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--cml-tekst) }