/* ========================================================================== МОБИЛЬНАЯ ВЕРСИЯ — четыре плитки-входа под баннером (≤767px) На телефоне четыре плитки по 400 px в один столбец занимают два экрана и отодвигают хиты. По образцу заказчика (lemanapro) плитки идут горизонтальной лентой: видна одна и край следующей — так понятно, что лента листается. Внутри плитка становится колонкой: заголовок, список, снимок у нижней кромки. Абсолютные проценты эталона (снимок на 40 % от верха, орнамент на 38 %) считались от высоты 388 и на высоте «по содержимому» не работают, поэтому снимок переводим в поток. Единицы --u/--d на 375 px упираются в минимум ≈0.7 px, поэтому размеры здесь в явных пикселях. Файл грузится последним; десктопные правила перебиваем специфичностью (.entries .entry …), а не !important. Контур плитки рисует wavy.js по ResizeObserver и перерисуется под новую высоту сам; штрих 8 с обрезкой съедает 4 px по кромке — внутренний отступ 16 px это перекрывает. ========================================================================== */ /* Телефонный слой: узкий экран ИЛИ телефон, повёрнутый набок (ширина до планшетной, высота меньше 520px — у планшета в альбоме высота 768 и больше, он сюда не попадает). Условие одно и то же во всех файлах mobile/ и в их скриптах — менять только всё сразу. */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ /* ---- лента ---- Ширина ровно во всё окно (как у бегущей строки .ticker-wrap), а не margin:0 -16px: на главной поле задаёт не .mac, а .container темы (40 * --d ≈ 27 px), и «минус 16» до кромки бы не доставал. Проценты в margin считаются от родителя, vw — от окна, разность и есть поле. Внутренний отступ ленты — то же поле, но обратно: он входит в область прокрутки, поэтому первая плитка стоит на линии контента, а последняя докручивается до правого поля. Величину поля не вписываем руками (стояли 16 px — на 11 px левее баннера сверху и «Хитов обжарки» снизу), а считаем той же формулой, что и margin: проценты в padding тоже берутся от родителя (.mac), vw — от окна, значит calc(50vw - 50%) и есть поле .container темы (site.css:3797 padding-left:calc(40 * var(--d)), при --d 0.68 на телефоне это 27,2 px). Лента баннеров считает его так же, только через cqw (mobile/hero.css); здесь cqw не подходит: контейнером пришлось бы объявлять .mac — лента и есть тот элемент, у которого мерили бы ширину, а она уже 100vw. */ .entries{ display:flex; align-items:stretch; /* плитки одной высоты — по самой высокой */ gap:12px; box-sizing:border-box; width:100vw; margin-left:calc(50% - 50vw); padding:0 calc(50vw - 50%) 8px; /* 8 px под лентой — запас под прокрутку; чтобы расстояние до бегущей строки не выросло, те же 8 px забираем отрицательным полем. */ margin-bottom:-8px; overflow-x:auto; overflow-y:hidden; /* overflow-x:auto делает и y прокручиваемым — глушим */ scroll-snap-type:x mandatory; /* Плитка встаёт на поле страницы, а не в кромку окна. Проценты здесь не годятся: scroll-padding считает их от самой ленты (100vw), а не от родителя, — поэтому повторяем поле формулой темы. */ scroll-padding-inline:calc(40 * var(--d)); scrollbar-width:none} .entries::-webkit-scrollbar{display:none} /* ---- плитка ---- Десктоп: .entry{height:calc(388*--d)} без медиазапроса (site.css ~3849) и .entry{height:400px} при ≤999 — высоту отпускаем. .rv из home.css поднимает плитку на 30 px до появления: внутри ленты это лишний вертикальный скролл, поэтому оставляем только проявление. .entry:hover{translateY(-6px)} на тапе залипает — тоже снимаем. */ .entries .entry, .entries .entry.rv, .entries .entry:hover{ flex:0 0 62%; /* одна плитка и ≈120 px следующей на 375 px */ min-width:0; scroll-snap-align:start; display:flex; flex-direction:column; height:auto; min-height:0; aspect-ratio:auto; padding:16px; transform:none} .entries .entry.rv.in{transform:none} /* Фокус: контур обрезает плитку clip-path'ом, и штатный outline с offset 2 px снаружи не виден. Рисуем его внутри, под штрихом. */ .entries .entry:focus-visible{outline-offset:-8px} /* штрих контура занимает 0–8 px от кромки */ /* ---- текст ---- .sc2026-page .entry h3 / li (0,2,0) задают роли кеглей через --t-h3 и --t-rg, которые на телефоне ужимаются до 13–14 px. Перебиваем той же силой, файл позже. */ .entries .entry h3{ font-size:18px; line-height:1.15; max-width:none; padding-right:40px} /* место под кнопку-стрелку справа */ .entries .entry ul{margin-top:8px;margin-bottom:12px} /* низ списка не липнет к снимку у длинного заголовка */ .entries .entry li{ font-size:13px; line-height:1.3; gap:4px; margin-bottom:2px} /* ---- кнопка-стрелка 40×40 в правом верхнем углу ---- На десктопе 52*--d ≈ 35 px и сдвиг при наведении. */ .entries .entry .go, .entries .entry:hover .go{ top:12px; right:12px; width:40px; height:40px; transform:none} /* ---- снимок ---- Из абсолютного слоя (.e-home .pic{left;top;width} и .entry .orn,.entry .pic{position:absolute;left:50%}) — в поток, к нижней кромке. position:relative, а не static: нужен z-index, чтобы орнамент (absolute, z-index:1) остался позади снимка, как на десктопе. Наведение (.entry:hover .pic{translateX(-44%)}, 4558) — снимаем. */ .entries .entry .pic, .entries .entry:hover .pic{ position:relative; z-index:2; left:auto; top:auto; width:100%; height:150px; margin-top:auto; /* прижимает снимок к низу при любой длине списка */ transform:none} /* Снимки — вырезки с прозрачным фоном (650×404…494), обрезать их нельзя: contain показывает целиком, прижав к низу. */ .entries .entry .pic img{ width:100%; height:100%; object-fit:contain; object-position:center bottom} /* ---- орнамент ---- Остаётся абсолютным на своих долях (top 27–40 %, ширина 89–100 %): на высоте ≈270 px он ложится за снимком и не выходит за плитку, а что выйдет — режут overflow:hidden и clip-path. Наведение с притуханием (.entries:hover … .orn) действует только при ≥1000. */ /* ---- «Узнать подробнее» ---- Кнопка появляется по наведению при @media(hover:hover) — в узком окне десктопа она висела бы поверх списка на top:150*--d. Вся плитка и так ссылка. */ .entries .entry .entry-btn{display:none} /* Фоновый узор из макета — .bg-orn-1 за плитками. На телефоне прячем, как уже спрятаны остальные четыре (mobile/products.css §.hits и mobile/quiz.css): плитки здесь идут лентой, а не сеткой, --d упёрт в минимум, и узор садится не туда, где нарисован. Кадра под телефон у фона нет — выдумывать положение не станем. */ .entries .bg-orn-1{display:none} } /* ========================================================================== ТЕЛЕФОН В ПОРТРЕТЕ — ЧЕТЫРЕ КАРТОЧКИ СТОЛБИКОМ ПО МАКЕТУ 52:4469 (17.09.2026) Герман 17.09.2026: «так же 4 карточки под баннером» — в макете Figma 52:4469 (узлы 52:4496, 52:5071, 52:5081, 52:5100) это не лента, а четыре широкие карточки друг под другом: 362 × 180, промежуток 12, скругление 32, рукописная зелёная линия 4. Слева заголовок и список, справа снимок с цветным орнаментом, срезанный краем карточки, в правом верхнем углу круглая кнопка «>». Лента из раздела выше остаётся телефону набок. Числа из макета (при отрисовке он сдвигает содержимое на половину рамки — 2 px, замер по снимку 390 × 2049): заголовок Gotham Pro Black 20 / 1,3, зелёный; список Regular 12 / 1,4, чёрный, маркер «▸» тем же начертанием; между ними 8; блок текста по вертикали по центру, слева 24 (22 + 2); ширина колонки 147–163; кнопка 52 × 52: сверху 20, справа 20 (узел «Frame 511», x 288, y 18); снимок с орнаментом — правая часть карточки от x 140 до края, 222 × 180. Слои макета (орнамент «Artboard…» и фото «image 286-Photoroom») собраны в одну картинку на координатах макета: newdesign/img/tile-m-*.webp, 666 × 540 (плотность 3). Её отдаёт в плитки (public/index.sc2026.php); на компьютере и планшете остаются прежние tile-ph-*.webp и tile-orn-*.webp. Отдельный слой орнамента здесь не нужен — прячем. Карточка уже 362 (экран 375 — 347, 320 — 292): текст стоит от левого края, снимок — не левее 140, как в макете, и срезается правым краем (правило у .pic ниже). Шире 362 (экран 430) снимок прижат вправо. Текст в любом случае над снимком (z-index 3 в site.css). Контур рисует wavy.js (.entry, clip, radius 32, линия 8 — внутрь видно 4). ВЫНОС НА 6 (17.09.2026, замечание проверяющего). wavy.js ведёт среднюю линию обводки в 4 px внутри коробки, видна её внутренняя половина, и волна гуляет ещё внутрь. В Figma рамка 4 центрирована по кадру: видимый край на 2 px СНАРУЖИ кадра. При коробке 362 × 180 видимая карточка выходила 353 × 171 (слева x 18–22 против 11,5–15,5 в макете), а промежутки — 20–21 вместо 9–10. Поэтому коробка шире кадра макета на 6 с каждой стороны (374 × 192, стык в стык), а текст, кнопка и снимок сдвинуты внутрь на те же 6 и стоят на координатах макета. Средняя линия обводки ложится на 2 px снаружи кадра — видимая кромка от −2 до +2, как у центрированной рамки в макете. wavy.js не трогаем. Веса: селекторы повторяют раздел выше (он же перебивал site.css) — равный вес, этот блок ниже. Условие — портрет, как у баннера (mobile/hero.css) и у плитки. ========================================================================== */ @media (max-width:767px) and (min-height:521px){ /* Столбик вместо ленты, без прокрутки. От низа баннера до кадра первой карточки 12 (y 384 → 396): 6 здесь и 6 выноса коробки. Вынос за поля 14 на 6 и промежуток 0 — см. «ВЫНОС НА 6» выше: шаг 192, как в макете (396 → 588). */ .entries{ display:flex; flex-direction:column; gap:0; width:auto; margin:6px -6px 0; padding:0; overflow:visible; scroll-snap-type:none; scroll-padding-inline:0} /* Карточка: кадр 180 плюс вынос 6 сверху и снизу, текст колонкой по центру высоты, слева 24 от кадра (6 + 24). */ .entries .entry, .entries .entry.rv, .entries .entry:hover{ flex:none; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; height:192px; padding:0 0 0 30px; border-radius:32px; scroll-snap-align:none} .entries .entry h3{ max-width:163px; margin:0; padding:0; font-size:20px; line-height:1.3; font-weight:900} .entries .entry ul{max-width:163px;margin:8px 0 0;padding:0} .entries .entry li{ margin:0; gap:4px; /* пробел после «▸» при кегле 12 */ font-size:12px; line-height:1.4; white-space:nowrap} /* В макете маркер набран тем же Regular, что и пункт; на компьютере он жирный (site.css). (0,2,1) против (0,1,1). */ .entries .entry li::before{font-weight:400} /* Кнопка «>» 52 × 52 в правом верхнем углу: 20 от кадра + 6 выноса. */ .entries .entry .go, .entries .entry:hover .go{ top:26px; right:26px; width:52px; height:52px} /* Снимок с орнаментом — правая часть карточки 222 × 180, прижат к верхнему краю; обрезку по кромке делает контур wavy.js. По горизонтали: на карточке 362 и шире — к правому краю (как в макете, на 430 слева просто больше воздуха); на карточке уже 362 (экраны 375 и 320) — не левее x = 140, как в макете, чтобы снимок не заходил под текст, а лишнее срезал правый край — в макете снимки и так срезаны краем карточки. Все числа — от кадра макета, то есть плюс 6 выноса: сверху 6, левее не 140, а 146, от правого края коробки 6 + 222 = 228. */ .entries .entry .pic, .entries .entry:hover .pic{ position:absolute; z-index:1; top:6px; right:auto; left:max(146px, calc(100% - 228px)); width:222px; height:180px; margin:0; transform:none} .entries .entry .pic img{ width:100%; height:100%; object-fit:cover; object-position:right top} /* Орнамент уже внутри картинки tile-m-*.webp. display:none заодно не даёт браузеру качать десктопный tile-orn-*.webp: у него loading=lazy, а без коробки ленивая картинка не загружается. */ .entries .entry .orn{display:none} }