/* base.css */ /* Основа: токены, сетка, типографика. * * Все числа взяты замером с оригинала (`_data/probe.json`, `_data/typo.json`) * или прочитаны в `theme.1.css` — ни одно не подобрано на глаз. Где значение * пришло из CSS темы, рядом указано откуда. * * ШРИФТЫ. На боевом сайте `@font-face` для Jost отсутствует: тема объявляет * `Jost-Medium`/`Jost-SemiBold`, файлов нет, и браузер рисует всё это системным * serif (Liberation Serif на Linux, Times New Roman у посетителя). Замер CDP * `CSS.getPlatformFontsForNode` по главной: 89 узлов serif, 15 — Tenor Sans. * 16.08 владелец отменил починку дефекта («шрифт просто похожий с засечками»), * поэтому здесь: * • основной текст — тот же системный serif, что и на боевом: совпадают * переносы строк и высоты блоков (Jost был шире и рвал кнопки на две строки); * • «Tenor Sans» — оригинальные файлы темы, ровно на тех же 15 узлах * (признак `style.tenor` в _data/blocks.json). * * Брейкпоинты — как в UIkit темы: 640 (@s), 960 (@m), 1200 (@l), 1600 (@xl). */ /* --------------------------------------------------------------- шрифты */ /* Tenor Sans темы разбит по unicode-range: кириллица отдельным файлом 11 644 Б, * латиница 18 588 Б. Диапазоны — из theme.1.css, не выдуманы. */ @font-face { font-family: 'Tenor Sans'; src: url('/wp-content/themes/yootheme/fonts/tenorsans-3a5130e6.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Tenor Sans'; src: url('/wp-content/themes/yootheme/fonts/tenorsans-c620f32b.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Tenor Sans'; src: url('/wp-content/themes/yootheme/fonts/tenorsans-c243987d.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------------------------------------------------------------- токены */ :root { --font: 'Times New Roman', 'Liberation Serif', Times, serif; --font-display: 'Tenor Sans', var(--font); /* палитра — по частоте в theme.1.css */ --bg: #fff; --text: #484848; /* html{color} */ --dark: #1a1a1a; /* заголовки, меню */ --muted: #a3a3a3; /* .uk-text-muted */ --link: #999; /* a по умолчанию */ --link-custom: #252323; /* ссылки из кастома клиента */ --gold: #aa8163; /* .uk-text-secondary, бордеры, вторичная кнопка */ --gold-btn: #a87b4f; /* фон первичной кнопки, бордеры полей */ /* ⚠️ Переменной «золото потемнее» здесь больше нет. Она была придумана мной * под реакцию «фон темнеет», которой у оригинала нет ни у одной кнопки. */ --section-muted: #f7f7f7; --card: #eaeaea; --danger: #e54e4e; --success: #65a758; --tg: #0088cc; --tg-hover: #007dbb; --viber: #59267c; --viber-hover: #774a95; --overlay: rgba(0, 0, 0, .7); --line: rgba(26, 26, 26, .2); /* бордер .uk-button-default */ /* размеры — из theme.1.css */ --container: 1200px; /* .uk-container max-width (content-box) */ --container-large: 1400px; --pad: 15px; /* .uk-container padding до 640 */ --header-h: 100px; /* замер оригинала: шапка 100px на всех ширинах ≥390 */ } /* --------------------------------------------------------------- сброс */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font); font-size: 15px; /* html{font-size:15px} темы */ line-height: 1.5; /* 22.5px — замер */ color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; } /* ⚠️ Слова НЕ разрываются: у оригинала `overflow-wrap: normal` и на `html`, и * на `body` (единственный узел с `break-word` на всём сайте — один). Стоявший * здесь `break-word` рвал длинные слова там, где тема их не рвёт: заголовок * карточки «Вироби з Діамантами» ложился в три строки вместо одной, и карточка * вырастала с 309 до 405 px. У оригинала он в одну строку ВЫЛЕЗАЕТ за колонку * (334 px при ширине 160) — это его свойство, а не наша вольность. */ /* ⚠️ `overflow-x: clip` — правило темы, снятое с оригинала (`body` там именно * `clip`, не `hidden`). Оно нужно вместе с отказом от разрыва слов: длинный * заголовок «Политика конфиденциальности» на 390 px не переносится и вылезает * до 480 px У ОБЕИХ сторон, но оригинал обрезает переполнение, а копия давала * горизонтальную прокрутку страницы. */ /* ⚠️ `html { overflow-x: auto }` обязателен вместе с `clip` у body. Пока у * корневого элемента значение по умолчанию, браузер переносит поведение body на * область просмотра, и обрезка не срабатывает: body честно показывал `clip`, а * страница всё равно прокручивалась вбок. У оригинала стоит ровно эта пара. */ html { overflow-x: auto; } body { margin: 0; overflow-x: clip; } img, picture, video, svg { max-width: 100%; height: auto; } img { border: 0; vertical-align: middle; } a { color: var(--link); text-decoration: none; } /* См. пояснение у кнопок: наведение — только настоящей мыши. */ @media (hover: hover) and (pointer: fine) { a:hover { color: var(--gold-btn); } } /* Цели якорей форм не должны уезжать под липкую шапку. У оригинала это делает * его скрипт прокрутки (`scroll-padding-top` у html и body там `auto`), у нас — * CSS. Шапка липкая только от 960: ниже `.hdr--mobile` стоит `position: * relative` (chrome.css), поэтому смещение задаётся ровно в этом диапазоне. */ #forma1, #forma2 { scroll-margin-top: 0; } @media (min-width: 960px) { #forma1, #forma2 { scroll-margin-top: var(--header-h); } } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0 0 20px; } :where(h1, h2, h3, h4, h5, h6) { color: var(--dark); font-weight: 600; } ul, ol { padding-left: 30px; } li > ul, li > ol { margin: 0; } hr { border: 0; border-top: 1px solid #e5e5e5; margin: 20px 0; } /* ---------------------------------------------------------- типографика * Кегли и интерлиньяж — замеры с оригинала на 1440 (см. _data/typo.json). * Заголовки набраны прописными с разрядкой: это свойство оригинала, а не * наше решение (`text-transform: uppercase; letter-spacing: 3px`). */ h1, .h1 { font-size: 28.9px; line-height: 1.2; letter-spacing: 3px; text-transform: uppercase; } h2, .h2 { font-size: 23.8px; line-height: 1.3; letter-spacing: 3px; text-transform: uppercase; } @media (min-width: 960px) { h1, .h1 { font-size: 34px; } h2, .h2 { font-size: 30px; } } h3, .h3 { font-size: 22px; line-height: 1.35; letter-spacing: 3px; text-transform: uppercase; } h4, .h4 { font-size: 18px; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; } h5, .h5 { font-size: 15px; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 400; } h6, .h6 { font-size: 16px; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; } /* ⚠️ Кегль заголовка НЕ выводится из его тега. * * У оригинала один и тот же `

` встречается кеглем 18, 22, 28, 30 и 34 px, * а `

` — 16 и 18 px: вид задаётся классом конструктора (`uk-h4` на теге * h2 и наоборот), а не уровнем. Пока размеры назначались по тегу, 264 * заголовка каталога рисовались 18 px вместо 16, а 704 подписи шагов — 16 * вместо 12. Сверка структуры этого не видит: заголовок на месте, текст тот * же, уровень тот же. * * Поэтому сборщик печатает класс кегля ПО ЗАМЕРУ оригинала, а тег остаётся * семантическим. Значения ниже — из `_data/blocks.json`, все семь встреченных * сочетаний размера, интерлиньяжа и разрядки. * * ⚠️ Начертание тоже приходит замером: у оригинала оно задано именем семейства * (`Jost-Medium` при весе 400), у нас — весом внутри одного семейства. */ /* ⚠️ Два самых крупных кегля у темы АДАПТИВНЫЕ: до 960 px h1 рисуется 28,9 px * вместо 34, а крупный h2 — 23,8 вместо 28 (замер оригинала на 390 и 1440, * остальные девять кеглей на обеих ширинах одинаковы). Пока классы держали * десктопное значение на всех ширинах, первый экран копии был выше оригинала * в полтора раза. */ .fs-34 { font-size: 28.9px; line-height: 34.68px; letter-spacing: 3px; } .fs-30 { font-size: 30px; line-height: 39px; letter-spacing: 3px; } .fs-28 { font-size: 23.8px; line-height: 30.94px; letter-spacing: 3px; } @media (min-width: 960px) { .fs-34 { font-size: 34px; line-height: 40.8px; } .fs-28 { font-size: 28px; line-height: 36.4px; } } /* Кегли страницы «не найдено». У темы это `uk-heading-2xlarge` (виден от 960) * и `uk-heading-xlarge` (виден до 960) — оба адаптивные, замер оригинала на * семи ширинах: 2xlarge 80,1 → 120 (от 960) → 165 (от 1200); xlarge 60 → 90 * (от 960) → 120 (от 1200). Печатать одно значение нельзя: на телефоне * заголовок в 165 px не поместился бы в экран. */ .fs-165 { font-size: 80.1px; line-height: 80.1px; letter-spacing: 3px; } .fs-120 { font-size: 60px; line-height: 60px; letter-spacing: 3px; } @media (min-width: 960px) { .fs-165 { font-size: 120px; line-height: 120px; } .fs-120 { font-size: 90px; line-height: 90px; } } @media (min-width: 1200px) { .fs-165 { font-size: 165px; line-height: 165px; } .fs-120 { font-size: 120px; line-height: 120px; } } .fs-22 { font-size: 22px; line-height: 29.7px; letter-spacing: 3px; } .fs-18 { font-size: 18px; line-height: 25.2px; letter-spacing: 1.5px; } /* ⚠️ Тот же кегль с ДРУГИМИ интерлиньяжем и разрядкой — отдельные классы, а не * округление к соседу: у 18 px разрядка бывает 1,5 и 3 (36 и 18 заголовков), * у 16 px интерлиньяж 22,4 и 20,8. Заголовок 16/20.8 при чужом интерлиньяже * ломался на две строки и поднимал секцию главной с 221 до 308 px. */ .fs-18-ls3 { font-size: 18px; line-height: 25.2px; letter-spacing: 3px; } .fs-16 { font-size: 16px; line-height: 22.4px; letter-spacing: 1.5px; } .fs-16-20 { font-size: 16px; line-height: 20.8px; letter-spacing: 3px; } .fs-15 { font-size: 15px; line-height: 21px; letter-spacing: 1.5px; } .fs-12 { font-size: 12px; line-height: 16.8px; letter-spacing: 1.5px; } .tt-up { text-transform: uppercase; } .tt-none { text-transform: none; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } /* ⚠️ Вес 700 у оригинала настоящий, а файла Jost 700 нет ни там, ни у нас: * браузер синтезирует жирное начертание из имеющегося. Совпадает механизм, а * не только число. Замер по `_data/blocks.json`: 176 текстовых узлов на боевых * страницах и оба заголовка 404. Пока класса не было, все они печатались * `fw-600` — на 165 px разница в толщине видна прямо. */ .fw-700 { font-weight: 700; } /* Классы кегля самой темы. Внутри текстов постов и раскрывающихся списков * разметка переносится как есть, вместе с классами `uk-h1…uk-h6`, — и без * этих правил заголовок получал размер по тегу: `

` рисовался * 30 px вместо 22. Значения те же, что у наших классов кегля. */ .uk-h1 { font-size: 28.9px; line-height: 34.68px; letter-spacing: 3px; } .uk-h2 { font-size: 23.8px; line-height: 30.94px; letter-spacing: 3px; } @media (min-width: 960px) { .uk-h1 { font-size: 34px; line-height: 40.8px; } .uk-h2 { font-size: 28px; line-height: 36.4px; } } .uk-h3 { font-size: 22px; line-height: 29.7px; letter-spacing: 3px; } .uk-h4 { font-size: 16px; line-height: 22.4px; letter-spacing: 1.5px; } .uk-h5 { font-size: 15px; line-height: 21px; letter-spacing: 1.5px; } .uk-h6 { font-size: 12px; line-height: 16.8px; letter-spacing: 1.5px; } /* Tenor Sans ставится точечно — там, где он рисует и в оригинале. Класс * проставляет сборщик по признаку `style.tenor` из разбора, а не правилом * «все заголовки»: на главной h3 набран фолбэком, а на карточках — Tenor Sans. */ .tenor { font-family: var(--font-display); } .lead { font-size: 18px; line-height: 1.5; } .text-muted { color: var(--muted); } /* Надпись над заголовком первого экрана — «Працюємо в м.Одеса» / «Работаем в * г.Одесса». У оригинала она золотая (класс темы `uk-text-secondary`, замер * computed style дал rgb(170, 129, 99)), у нас рисовалась серым цветом абзаца * rgb(72, 72, 72). Перепись по `_data/blocks.json`: текстовых блоков этого * цвета 174 — 87 украинских и 87 русских, других текстов с ним нет. */ .text-gold { color: var(--gold); } .text-center { text-align: center; } /* Кнопки мессенджеров у оригинала на узком экране растянуты во всю ширину * колонки: правило конструктора `@media (max-width:500px){width:100%}`, * 522 штуки по 188 страницам слепка. Порог здесь СВОЙ — 500 px, а не * общий рубеж вёрстки 960 px. */ @media (max-width: 500px) { .btn--full-xs { width: 100%; } } /* Центрирование до порога. У темы порогов три — `uk-text-left@s` (640), * `@m` (960), `@l` (1200): выше порога текст прижат влево, ниже стоит по * центру. Значения сняты из классов слепка (`_data/textalign.json`, * `_qa/ta.py`), а не назначены: по 188 страницам это 862 узла, центрированных * всегда, 462 с порогом 960 и 54 с порогом 640. * Ряды кнопок — раскладка flex, `text-align` их не двигает, поэтому у них * собственная пара классов. */ @media (max-width: 639px) { .text-center-s { text-align: center; } .row--center-s { justify-content: center; } } @media (max-width: 1199px) { .text-center-l { text-align: center; } .row--center-l { justify-content: center; } } .row--center { justify-content: center; } @media (max-width: 959px) { .text-center-m { text-align: center; } .row--center-m { justify-content: center; } h1, .h1 { font-size: 28.9px; } h2, .h2 { font-size: 23.8px; } h3, .h3 { font-size: 22px; } } /* --------------------------------------------------------------- сетка */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); /* content-box, как у .uk-container темы: max-width не включает паддинги */ box-sizing: content-box; } .container--large { max-width: var(--container-large); } .container--small { max-width: 900px; } .container--xsmall { max-width: 700px; } .container--expand { max-width: none; } /* `expand-right` прижат влево по обычной сетке и расширяется вправо до края * окна: max-width = половина окна плюс половина обычного контейнера минус * паддинг. Формула снята с оригинала (`calc(50% + 560px)` при 1200 и * `calc(50% + 660px)` при 1400), а не подобрана под один замер. */ /* ⚠️ Вычитается 40 px, а не отступ контейнера. В теме формула записана * буквально: `calc(50% + (1200px / 2) - 40px)` и `calc(50% + (1400px / 2) - 40px)` * для крупного. Стояло `var(--pad)` = 15, и картинка первого экрана выходила * 680 px вместо 720. */ .container--expand-right { max-width: calc(50% + var(--container) / 2 - 40px); margin-left: auto; margin-right: 0; } .container--expand-right.container--large { max-width: calc(50% + var(--container-large) / 2 - 40px); } /* Контейнер внутри контейнера паддингов не добавляет — иначе содержимое * сдвигается внутрь дважды. Так же у темы. */ .container .container { padding-left: 0; padding-right: 0; } /* Паддинг контейнера меняется по ширине окна, и его же вычитает формула * `expand-right` — поэтому он живёт переменной, а не двумя разными числами: * иначе правая граница расширенного контейнера разъедется на 25 px. */ @media (min-width: 640px) { .container { --pad: 30px; padding: 0 var(--pad); } } @media (min-width: 960px) { .container { --pad: 40px; padding: 0 var(--pad); } } /* Панели с собственным ограничителем ширины: `uk-width-large` темы — это * `width: 450px`, а не доля колонки. Без них панель растягивалась на всю * колонку и заголовок из двух строк становился одной. */ .panel--center { margin-left: auto; margin-right: auto; } .panel--small { width: 150px; max-width: 100%; } .panel--medium { width: 300px; max-width: 100%; } .panel--large { width: 450px; max-width: 100%; } .panel--xlarge { width: 600px; max-width: 100%; } .panel--xxlarge { width: 750px; max-width: 100%; } @media (min-width: 640px) { .panel--large-at-s { width: 450px; max-width: 100%; } } @media (min-width: 960px) { .panel--large-at-m { width: 450px; max-width: 100%; } .panel--xlarge-at-m { width: 600px; max-width: 100%; } .panel--medium-at-m { width: 300px; max-width: 100%; } } @media (min-width: 1600px) { .panel--xlarge-at-xl { width: 600px; max-width: 100%; } } .section { padding: 40px 0; } .section--large { padding: 70px 0; } .section--small { padding: 40px 0; } .section--xsmall { padding: 20px 0; } .section--muted { background: var(--section-muted); } .section--secondary { background: var(--gold); color: #fff; } .section--secondary :where(h1, h2, h3, h4, h5, h6) { color: #fff; } @media (min-width: 960px) { .section { padding: 70px 0; } .section--large { padding: 140px 0; } .section--small { padding: 40px 0; } } /* ⚠️ Снятые отступы объявлены ПОСЛЕ медиазапроса намеренно. * * Пока они стояли выше, правило `.section--large { padding: 140px 0 }` внутри * медиазапроса возвращало снятый отступ обратно: секция «Швидкий викуп» * выходила 360 px против 200 у оригинала — и так на 33 страницах. Вес * селекторов одинаковый, решает порядок. */ .section--no-top { padding-top: 0; } .section--no-bottom { padding-bottom: 0; } /* Колонки: доли берутся из разбора оригинала (widthClasses/widthPct), * поэтому сетка описана «долями», а не именованными раскладками. */ /* ⚠️ `row-gap` — это отступ КОЛОНКИ, перенесённой на новую строку. У темы его * ставит скрипт (`.uk-grid > .uk-grid-margin { margin-top }`), поэтому в * разметке признака нет и перенести его классом нельзя: перенос зависит от * ширины. Без правила иконка и подпись внутри карточки слипались — блок * выходил 82,5 px вместо 112,5 у оригинала на каждой карточке услуги. * Значения — из стилей темы: 30 px, 40 от 1200; small 15, medium 30, * large 40/70, collapse 0. */ .row { display: flex; flex-wrap: wrap; margin-left: -30px; row-gap: 30px; } /* ⚠️ Ширина по умолчанию задаётся flex-basis, а НЕ `width` у `.row > .col`: * составной селектор весит больше одиночного `.col--1-2`, и колонки молча * оставались на всю ширину — страница выходила вдвое выше оригинала при * полностью правильных классах в разметке. */ /* ⚠️ Доля колонки задаётся `width`, как у темы, а НЕ `flex-basis` с * `max-width`. Разница видна только в растягиваемых строках * (`tm-grid-expand`): там доля обязана быть базой, а не потолком, и * единственная колонка `1-2@m` растёт на всю строку. Попытка снять потолок * отдельным правилом сделала хуже — колонка раздувалась под ширину панели * внутри (600 px) и уезжала на свою строку: секция из двух колонок * превращалась в две секции по одной. */ .row > :where(.col, .card, .card-link) { padding-left: 30px; box-sizing: border-box; width: 100%; max-width: 100%; flex: 0 1 auto; position: relative; } /* Узел вне потока. У темы это `uk-position-absolute` + `uk-width-1-1`, а * точкой отсчёта служит `.uk-panel` (`position: relative`), совпадающая с * колонкой по размеру — поэтому опорой здесь сделана сама колонка. */ /* ⚠️ Ширина берётся от КОНТЕНТА колонки, а не от её внешнего бокса. У темы * точка отсчёта — `.uk-panel` внутри колонки, у неё отступа нет; у нас опорой * служит сама колонка, а у неё слева отступ сетки. `width: 100%` считался от * padding-box и вылезал за экран ровно на этот отступ — 15 px на телефоне, * 28 страниц с горизонтальной прокруткой. Отступ повторяется через `inherit`, * поэтому правило одно на все ширины (15 / 30 / 40 px). */ .is-abs { position: absolute; left: 0; right: 0; width: auto; padding-left: inherit; } /* ⚠️ У последнего потомка контейнера нижнего отступа нет. У темы это правило * стоит на двенадцати обёртках (`.uk-panel`, `.uk-tile`, `.uk-section`, * `.uk-table td`, …); у нас его не было, и заголовок в конце колонки оставлял * лишние 20 px — секция архива статей выходила 194,7 вместо 144,7 px. */ /* В списке и наши «прозрачные» обёртки (отступ блока, видимость, вне потока): * у темы соответствующего узла нет вовсе, и без них правило не доходит до * самого содержимого. */ :where(.col, .panel, .tile, .card, .card-link, .prose, .section, .is-abs, .container, [class~="mt--small"], [class~="mt--medium"], [class~="mt--large"], [class^="only-"], [class^="not-"]) > :last-child { margin-bottom: 0; } /* ⚠️ Пустая колонка-распорка. У темы такие «expand» слева и справа держат * содержимое по центру строки, а на узком экране, где все колонки во всю * ширину, скрипт не даёт им отступа: они нулевой высоты и в счёт рядов не * идут. Наш `row-gap` ставит зазор механически между всеми рядами, включая * пустые, — секция заголовка архива получала лишние 30 px на каждую распорку. * * Замер обеих сторон: у оригинала ПЕРВАЯ распорка отступа не даёт никогда (она * первая в сетке), а последняя даёт — 30 px. Поэтому убирается только первая и * только ниже 960, где она ничего не центрирует: колонки и так во всю ширину. * От 960 распорка стоит в одном ряду с содержимым и зазора не создаёт. * Убрать обе — секция выходит на 30 px НИЖЕ оригинала, это проверено. */ @media (max-width: 959px) { .row > .col:empty:first-child { display: none; } } /* Модификаторы отступов — ПОСЛЕ базового правила колонки, иначе оно их * перебивает (одинаковая специфичность, `:where` веса не добавляет). * Встречаемость по данным разбора: collapse 4, column-collapse 2, medium 2, * row-large 2, stack 2. */ .row--small { margin-left: -15px; row-gap: 15px; } .row--small > :where(.col, .card, .card-link) { padding-left: 15px; } .row--collapse { margin-left: 0; row-gap: 0; } .row--column-collapse { margin-left: 0; } .row--collapse > :where(.col, .card, .card-link), .row--column-collapse > :where(.col, .card, .card-link) { padding-left: 0; } .row--medium { margin-left: -30px; row-gap: 30px; } .row--medium > :where(.col, .card, .card-link) { padding-left: 30px; } .row--stack > :where(.col, .card, .card-link) { width: 100%; } /* `tm-grid-expand` темы: колонки заполняют свободное место строки. Доля * остаётся базой, но перестаёт быть потолком — иначе единственная колонка * `1-2@m` держится половины вместо всей строки. */ /* Плитка секции. Отступы адаптивные, как у темы: 15 / 30 / 40 px по * брейкпоинтам 640 и 960; «слева убран» — правило конструктора, действует * только от 960 (замер оригинала на 390, 640, 960 и 1440). */ .tile { box-sizing: border-box; width: 100%; padding: 15px; } .tile--default { padding: 30px; } @media (min-width: 640px) { .tile--small { padding: 30px; } .tile--default { padding: 50px; } } @media (min-width: 960px) { .tile--small { padding: 40px; } .tile--default { padding: 70px; } .tile--no-left { padding-left: 0; } } /* Плитка первого экрана главной: тянется на всю высоту колонки и центрирует * содержимое по вертикали, как `uk-flex uk-flex-middle` у оригинала. Вне * медиазапроса — у оригинала центрирование действует на всех ширинах. */ /* @ `flex-direction: column` тут был неверен: во flex-колонке отступы соседей * НЕ схлопываются, и плитка выросла на 40 px (на 1280 — 497 против 457 у * оригинала), а заголовок встал на 20 px выше. У оригинала плитка — flex-СТРОКА * с одним ребёнком `.uk-panel uk-width-1-1`, внутри которого обычный блочный * контекст со схлопыванием. Повторяем ту же конструкцию: обёртка `.tile__mid`. */ .tile--middle { display: flex; align-items: center; height: 100%; } .tile--middle > .tile__mid { width: 100%; } .row--expand > :where(.col, .card, .card-link) { flex-grow: 1; } /* Большой вертикальный зазор между строками (`uk-grid-row-large` = 70 px от * 1200, 40 px ниже). ⚠️ Это зазор ПО ВЕРТИКАЛИ: раньше он ошибочно * отображался в горизонтальный отступ колонок, и строка архива рубрики * выходила на 30 px шире оригинала. */ * + .row--rowgap-large.row--margin, .row--rowgap-large + .row { margin-top: 40px; } /* Отступ строки-продолжения задаётся классом (`uk-grid-margin` у темы), а не * только соседством: строки одной секции теперь лежат в разных контейнерах, * и селектор `.row + .row` их не связывает. */ /* ⚠️ Только при наличии предыдущего соседа. Правило темы — * `*+.uk-grid-margin, .uk-grid+.uk-grid, .uk-grid>.uk-grid-margin`: класс есть * и у ПЕРВОЙ строки контейнера, но отступа она не получает. Безусловное * правило поднимало высоту секции на 40 px на широком экране и на 30 px на * узком — вторая половина расхождения «Як відбувається продаж» ×1.26. */ * + .row--margin { margin-top: 30px; } .row + .row { margin-top: 30px; } /* ⚠️ Медиазапрос стоит ПОСЛЕ базовых правил намеренно. Специфичность у них * одинаковая (`:where` не добавляет веса), и стоящий выше медиазапрос молча * проигрывает: колонки оставались с отступом 30 px и выходили на 10 px шире * оригинала на каждом широком экране. На этой же грабле уже терялись отступы * секций. * * Значения сняты замером оригинала на шести ширинах: 30 px до 1200 и 40 px * от 1200. */ @media (min-width: 1200px) { .row { margin-left: -40px; row-gap: 40px; } .row > :where(.col, .card, .card-link) { padding-left: 40px; } * + .row--margin, .row + .row { margin-top: 40px; } .row--large { margin-left: -70px; row-gap: 70px; } .row--large > :where(.col, .card, .card-link) { padding-left: 70px; } .row--collapse { margin-left: 0; row-gap: 0; } .row--column-collapse { margin-left: 0; } .row--collapse > :where(.col, .card, .card-link), .row--column-collapse > :where(.col, .card, .card-link) { padding-left: 0; } .row--medium { margin-left: -30px; row-gap: 30px; } .row--medium > :where(.col, .card, .card-link) { padding-left: 30px; } .row--small { margin-left: -15px; row-gap: 15px; } .row--small > :where(.col, .card, .card-link) { padding-left: 15px; } * + .row--rowgap-large.row--margin, .row--rowgap-large + .row { margin-top: 70px; } } @media (min-width: 640px) { .col--1-2\@s { width: 50%; } .col--1-3\@s { width: 33.333%; } .col--2-3\@s { width: 66.666%; } .col--1-4\@s { width: 25%; } .col--auto\@s { width: auto; } } /* ⚠️ Классы БЕЗ рубежа: у темы `uk-width-1-3` без суффикса означает «треть на * любой ширине». Пока такой класс переводился в вариант «от 640», карточка на * телефоне складывалась в столбик: у оригинала она 135 px (картинка справа на * треть, текст слева), у нас — 300 с лишним, и секция главной выходила * 4062 px против 1199. */ .colx--1-2 { width: 50%; } .colx--1-3 { width: 33.333%; } .colx--2-3 { width: 66.666%; } .colx--1-4 { width: 25%; } .colx--3-4 { width: 75%; } .colx--1-5 { width: 20%; } .colx--4-5 { width: 80%; } .colx--1-6 { width: 16.666%; } .colx--1-1 { width: 100%; } .colx--2-5 { width: 40%; } .colx--3-5 { width: 60%; } /* Отступ блока от предыдущего. Значения — из стилей темы: small 10, medium 40, * large 40 и 70 от 1200. Правило с двумя классами перекрывает общий отступ * колонки (`.col > * + *`, 20 px) по специфичности; у темы там `!important`. */ /* `uk-margin` темы: 20 px сверху и снизу. Значение из `theme.1.css` * (`.uk-margin { margin-top: 20px !important; margin-bottom: 20px }`). */ * + .mt--default, .col > * + .mt--default { margin-top: 20px; } .mt--default { margin-bottom: 20px; } /* ⚠️ Общее правило темы `* + h1…h6 { margin-top: 40px }` — заголовок, идущий не * первым в своём контейнере, отбивается от предыдущего блока на 40 px. Его не * было вовсе: в первом экране главной заголовок «Професійна Скупка та Оцінка» * шёл вплотную к подписи над ним, и секция выходила ниже оригинала. */ /* ⚠️ БЕЗ `:where`. С ним селектор весит ноль и проигрывает сбросу * `h1…h6 { margin: 0 0 20px }`, который обнуляет верхний отступ: правило было в * стилях, но не действовало ни разу. */ * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 { margin-top: 40px; } * + .mt--small, .col > * + .mt--small { margin-top: 10px; } * + .mt--medium, .col > * + .mt--medium { margin-top: 40px; } * + .mt--large, .col > * + .mt--large { margin-top: 40px; } @media (min-width: 1200px) { * + .mt--large, .col > * + .mt--large { margin-top: 70px; } } /* Те же три размера, но с отступом СНИЗУ тоже — `uk-margin-small`, * `uk-margin-medium`, `uk-margin-large` темы. Верхний повторяет `mt--*` * (включая рубеж 1200 у large), нижний задаётся безусловно: у темы он есть и * у первого элемента в контейнере. */ * + .m--small, .col > * + .m--small { margin-top: 10px; } * + .m--medium, .col > * + .m--medium { margin-top: 40px; } * + .m--large, .col > * + .m--large { margin-top: 40px; } .m--small { margin-bottom: 10px; } .m--medium { margin-bottom: 40px; } .m--large { margin-bottom: 40px; } @media (min-width: 1200px) { * + .m--large, .col > * + .m--large { margin-top: 70px; } .m--large { margin-bottom: 70px; } } /* Только снизу: верхний отступ тема сняла (`uk-margin-remove-top` у самого * узла или `uk-margin-remove-first-child` у его родителя), нижний оставила. */ /* Отступ, снятый темой (`uk-margin-remove-top|bottom|vertical`). Селекторы с * `* +` нужны, чтобы перебить наши же общие правила той же силы * (`* + h1 { margin-top: 40px }`): при равной специфичности выигрывает то, что * ниже по файлу, а этот блок идёт последним. */ .mt--0, * + .mt--0, .col > * + .mt--0 { margin-top: 0; } .mb--0, * + .mb--0, .col > * + .mb--0 { margin-bottom: 0; } .mb--default { margin-bottom: 20px; } .mb--small { margin-bottom: 10px; } .mb--medium { margin-bottom: 40px; } .mb--large { margin-bottom: 40px; } @media (min-width: 1200px) { .mb--large { margin-bottom: 70px; } } /* ⚠️ Исключения для `:last-child` тут БЫЛИ и убраны: у темы нижний отступ * последнего элемента колонки схлопывается наружу и высоты не добавляет * (родитель без padding и рамки), а у нас добавлял — первый экран каталога * уезжал на +40 px. Наше `.col > *:last-child { margin-bottom: 0 }` из * blocks.css это схлопывание и изображает, трогать его не нужно. */ /* «По содержимому» без рубежа — у темы `uk-width-auto` действует всюду. */ .colx--auto { width: auto; } .col--expand-x { flex: 1; width: auto; min-width: 1px; } /* Порядок: `uk-flex-last` ставит колонку последней — у карточек так стоит * картинка, то есть справа от текста. */ .order-last { order: 99; } /* Секция с фотографией на фоне: у оригинала текст на ней белый (`uk-light`). * Без этого правила заголовок оставался тёмным и на фотографии не читался. */ .section--photo, .section--photo :where(h1, h2, h3, h4, h5, h6, p, div, span) { color: #fff; } /* ⚠️ Рамка и реакция — по замеру НАВЕДЕНИЕМ (`_qa/btnhover.mjs`, главная), а не * по догадке «на тёмном виднее» и не по чтению таблиц стилей. Было взято .6 в * покое и наш общий тёмный hover: под курсором кнопка темнела и получала * подложку. У оригинала меняется РОВНО ОДНО свойство — рамка светлеет с .2 до * .5; фон остаётся прозрачным, текст остаётся белым. * Промежуточная правка добавляла сюда ещё и золотой текст: её подсказал разбор * таблиц стилей, который не считает специфичность и выдал общее `a:hover`. * Наведение мышью показало, что цвет не меняется вовсе. */ .section--photo .btn--default { color: #fff; border-color: rgba(255, 255, 255, .2); } @media (hover: hover) and (pointer: fine) { .section--photo .btn--default:hover { background: none; border-color: rgba(255, 255, 255, .5); color: #fff; } } @media (min-width: 960px) { .col--1-2 { width: 50%; } .col--1-3 { width: 33.333%; } .col--2-3 { width: 66.666%; } .col--1-4 { width: 25%; } .col--3-4 { width: 75%; } .col--1-5 { width: 20%; } .col--4-5 { width: 80%; } .col--1-6 { width: 16.666%; } .col--2-5 { width: 40%; } .col--3-5 { width: 60%; } /* ⚠️ `flex: none` обязателен. Колонка «по содержимому» — flex-элемент, и * при нехватке места она сжимается: значок этапа 60×60 ужимался до 50×50, * потому что соседняя текстовая колонка набрана Jost и требует больше * ширины, чем засечный фолбэк оригинала. Размер в разметке при этом * правильный (width=60), поэтому ни разметку, ни контракт полноты * расхождение не задевает — видно только замером отрисованного значка. */ .col--auto { width: auto; flex: none; } /* Отступ колонки из правила конструктора — только от 960, как у оригинала. */ .col--pr-40 { padding-right: 40px; } .col--expand { flex: 1; width: auto; min-width: 1px; } } /* ⚠️ Колонка «expand» внутри растягиваемой строки имеет у темы приоритет роста * `flex-grow: 999` — весь свободный остаток достаётся ей, а не делится поровну * с соседями. Правило стоит ПОСЛЕ медиазапроса намеренно: сокращённое * `flex: 1` внутри него сбрасывает `flex-grow` обратно в единицу, и на архиве * статей боковые колонки выходили 253 px вместо 380, а средняя — 773 вместо * 520. Второй случай той же грабли с порядком правил за сегодня. */ .row--expand > :where(.col--expand, .col--expand-x) { flex-grow: 999; } .stack > * + * { margin-top: 20px; } .flex { display: flex; } .flex--middle { align-items: center; } .flex--center { justify-content: center; } .flex--wrap { flex-wrap: wrap; } .gap-10 { gap: 10px; } .gap-15 { gap: 15px; } .gap-20 { gap: 20px; } .gap-30 { gap: 30px; } .mb-0 { margin-bottom: 0; } .mt-0 { margin-top: 0; } /* --------------------------------------------------------------- кнопки * Замеры оригинала: 14px, вес 500, uppercase, letter-spacing 1.5px, * высота строки 48px (то есть высота кнопки задаётся именно line-height). * * ⚠️ Отступ и скругление тоже сняты замером, а не выбраны: на четырёх * страницах все кнопки оригинала дают `padding: 0 28px` и `border-radius: 4px` * при рамке 1px. Стояло 30px и 0 — кнопка выходила на 4 px шире и с прямыми * углами. Разница мелкая, но она есть на каждой кнопке каждой страницы, а * прямой угол вместо скругления владелец на соседнем сайте назвал первым. */ .btn { display: inline-block; /* ⚠️ Замер оригинала (_qa/btn3.mjs): кнопка карточки — * display:inline-block, white-space:nowrap, ширина по тексту 185 px при * контейнере 160 px, то есть она НАМЕРЕННО вылезает за колонку и никогда не * переносится. У нас родитель — flex-колонка, и кнопка как флекс-элемент * растягивалась ровно на 160 px и ложилась в две строки (160×68 против * 185×35). Лечится не шрифтом, а этими двумя строками. */ align-self: start; white-space: nowrap; padding: 0 28px; font-size: 14px; font-weight: 500; line-height: 48px; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: background-color .1s ease-in-out, color .1s ease-in-out; } /* ⚠️ Реакция кнопок — дословно из темы (`theme.1.css`, правила `.uk-button-*:hover`) * и подтверждена наведением настоящей мыши (`_qa/btnmap.mjs`, главная). Раньше * здесь стояло «фон темнеет на пару тонов» — придуманное поведение, которого у * оригинала нет ни у одной кнопки: у первичной вид ВЫВОРАЧИВАЕТСЯ (золотой фон → * белый, текст и рамка → золото), у вторичной вместе с заливкой ПРОПАДАЕТ рамка, * у нейтральной меняется только прозрачность рамки (.2 → .4), а фон и текст * остаются на месте. */ /* ⚠️ Наведение отдаётся ТОЛЬКО настоящей мыши. На тач-экране `:hover` * прилипает после касания и держится, пока не тронут другое место: кнопка * «ОНЛАЙН КОНСУЛЬТАЦІЯ» оставалась вывернутой (белый фон, золотой текст) — * жалоба владельца от 16.08 «цвет не возвращается». Условие двойное, как * советует Codex: на гибридном ноутбуке `hover: hover` истинно и для пальца, * отсекает именно `pointer: fine`. Внутри — те же объявления, что стояли * здесь до правки, дословно. */ .btn--primary { background: var(--gold-btn); color: #fff; } .btn--secondary { background: #fff; color: var(--gold); border-color: var(--gold); } .btn--default { background: transparent; color: var(--dark); border-color: var(--line); } @media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: #fff; color: var(--gold-btn); border-color: var(--gold-btn); } .btn--secondary:hover { background: var(--gold); color: #fff; border-color: transparent; } .btn--default:hover { background: transparent; color: var(--dark); border-color: rgba(26, 26, 26, .4); } } /* Отклик на само касание: палец видит, что нажатие принято, и состояние * снимается вместе с отпусканием — залипнуть тут нечему. */ .btn:active { transform: translateY(1px); } /* Обводка с клавиатуры. `:focus-visible`, а не `:focus`: у оригинала обводки * после клика мышью нет, и добавлять её мы не должны. */ .btn:focus-visible { outline: 2px solid var(--gold-btn); outline-offset: 2px; } /* Размеры — из темы: `.uk-button-small` 13px/33, `.uk-button-large` 12px/68. * ⚠️ Без них восемь кнопок «Продати …» в ленте главной выходили 160×98 вместо * 185×35: подпись не помещалась в 14px и ложилась в три строки. Разбор класс * размера снимал (`variant`), а сборка его не читала — то есть данные были, а * до вёрстки не доходили. */ .btn--small { padding: 0 18px; font-size: 13px; line-height: 33px; } .btn--large { padding: 0 50px; font-size: 12px; line-height: 68px; } .btn--tg { background: var(--tg); color: #fff; } .btn--viber { background: var(--viber); color: #fff; } @media (hover: hover) and (pointer: fine) { .btn--tg:hover { background: var(--tg-hover); color: #fff; } .btn--viber:hover { background: var(--viber-hover); color: #fff; } } .btn--block { display: block; width: 100%; } /* Значок внутри кнопки: у оригинала это `span.uk-icon` со вставленным SVG, * выровненный по середине строки. Отступ печатается инлайном из замера — он * задан классом темы и у разных кнопок разный. */ .btn__icon { display: inline-flex; align-items: center; vertical-align: middle; } .btn__icon svg { width: 100%; height: 100%; } /* ------------------------------------------------------- прочие мелочи */ /* ⚠️ Тот же приём под ДВУМЯ именами. Наш класс — `visually-hidden`, но в * перенесённой как есть разметке WordPress (архивы, комментарии) служебные * подписи размечены классом `screen-reader-text`. Без правила для него подпись * «к записи Характеристики брилліанта», предназначенная чтению с экрана, * показывалась на странице обычным текстом. */ .visually-hidden, .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* Видимость по ширине экрана — рубежи UIkit оригинала: * s = 640, m = 960, l = 1200, xl = 1600. * `only-*` — элемент существует только от рубежа и выше (`uk-visible@*`), * `not-*` — наоборот, скрывается от рубежа (`uk-hidden@*`). * ⚠️ Правила обязаны совпадать с рубежами темы: колонка, скрытая у оригинала * на телефоне, в копии рисовалась всегда — на мобильной странице появлялась * лишняя картинка, а страница становилась выше. */ /* ⚠️ `!important` здесь не небрежность, а требование задачи. * * Видимость по ширине — утилита, которая обязана побеждать раскладку. Без неё * правило `.section--large .row > .col { display: flex }` (вес больше) молча * возвращало на телефон колонки, скрытые у оригинала: в первом экране копии * появлялась картинка на 270 px, которой там нет, и секция выходила в полтора * раза выше. Отказ был частичным — вне `.section--large` правило работало, — * поэтому по числу «перенесено 172 класса видимости» всё выглядело исправным. */ /* ⚠️ Прячем ТОЛЬКО в нужном диапазоне и нигде не возвращаем display обратно — * ровно как тема. Стояла пара «спрятать всегда + `display: revert` от рубежа»: * `revert` откатывает к стилю браузера, то есть к `block`, и элемент, который * должен быть `flex` или `inline-block`, на широком экране получал чужой тип * раскладки. Для скрытых на телефоне колонок это незаметно, для ряда иконок * мессенджеров — разъезжается. */ /* Границы дробные (`639.98`), как у самой темы: при масштабе страницы и на * экранах с дробным CSS-пикселем целочисленный `max-width: 639px` оставляет * щель 639…640, где не срабатывает ни одно из двух правил и видны ОБА * варианта блока. */ @media (max-width: 639.98px) { .only-s { display: none !important; } } @media (max-width: 959.98px) { .only-m { display: none !important; } } @media (max-width: 1199.98px) { .only-l { display: none !important; } } @media (max-width: 1599.98px) { .only-xl { display: none !important; } } @media (min-width: 640px) { .not-s { display: none !important; } } @media (min-width: 960px) { .not-m { display: none !important; } } @media (min-width: 1200px) { .not-l { display: none !important; } } @media (min-width: 1600px) { .not-xl { display: none !important; } } /* Отступы самого контейнера (`uk-margin-*`, `uk-grid-margin` на `.uk-container`). * Значения — из стилей темы, те же, что у блоков. Встречаются редко: 6 раз * `margin-large`, 4 раза `margin` — но без них между блоком заголовка и * карточками адресов на странице контактов пропадали 70 px. */ * + .container--gap { margin-top: 20px; } .container--gap { margin-bottom: 20px; } * + .container--gap-small { margin-top: 10px; } .container--gap-small { margin-bottom: 10px; } * + .container--gap-medium { margin-top: 40px; } .container--gap-medium { margin-bottom: 40px; } * + .container--gap-large { margin-top: 40px; } .container--gap-large { margin-bottom: 40px; } * + .container--gap-row { margin-top: 30px; } /* ⚠️ Обнуление у последнего потомка — ПОСЛЕ значений и с двумя классами в * селекторе: правило `:where(…) > :last-child` имеет тот же вес, что * `.container--gap-large`, и медиазапрос ниже по файлу его перебивал — * последний контейнер секции держал 70 px, которых у оригинала нет. */ .container > .container:last-child, .section > .container:last-child { margin-bottom: 0; } @media (min-width: 1200px) { * + .container--gap-large { margin-top: 70px; } .container--gap-large { margin-bottom: 70px; } * + .container--gap-row { margin-top: 40px; } } /* chrome.css */ /* Шапка, подвал, модальное окно. * * Числа — замеры оригинала (`_data/hdr` прогон, 1440 и 390): * шапка 100 px на всех ширинах; контейнер отступ 40 (≥960) / 15 (моб); * логотип 200×67 на десктопе (y=17) и 140×47 на мобильном (y=27); * иконка меню 36×36; мессенджеры 25×25 с шагом 40; * телефон 12px/16.8, uppercase, ls 1.5, цвет #252323; * кнопка «Замовити дзвінок» 224×50, кегль 14, ls 1.5; * переключатель языка — ДВЕ строки по 19×18, кегль 12. * Подвал: 4 колонки (логотип + три), h5 15px uppercase ls 1.5, * телефон 18px вес 600, иконки-кнопки мессенджеров 36×36. */ /* ---------------------------------------------------------------- шапка */ .hdr { position: sticky; top: 0; z-index: 980; height: var(--header-h); background: #fff; } .hdr__inner { display: flex; align-items: center; height: 100%; } /* Цвет задан, хотя внутри только картинка: у темы `.uk-logo{color:#1a1a1a}` и * `.uk-logo:hover{color:#1a1a1a}` — ссылка НЕ меняет цвет под курсором. У нас * она подхватывала общее правило `a` (#999 → золото при наведении), и контракт * наведения показывал реакцию, которой у оригинала нет. Видимой разницы не * было бы только пока в логотипе картинка. */ .hdr__logo { display: flex; align-items: center; height: 100%; color: var(--dark); } .hdr__logo:hover { color: var(--dark); } .hdr--mobile .hdr__logo { margin-right: auto; } /* ⚠️ Размер НЕ задаётся стилем — его несут атрибуты `width`/`height`, как у * оригинала. Зашитые здесь 200×67 и 140×47 переопределяли разметку и ставили * русскому логотипу украинский размер (`logosru` размечен 200 px, `logosua` — * 140). Стиль только ограничивает, не назначает. */ .hdr__logo img { display: block; max-width: 100%; height: auto; } .hdr__nav { display: flex; align-items: center; gap: 0; height: 100%; } /* Значок меню и его список: 292 px от левого края, как на оригинале * (логотип кончается на 240, отсюда отступ 52). `margin-right: auto` * отжимает остальную навигацию вправо. */ .hdr__menu { position: relative; display: flex; align-items: center; height: 100%; margin-left: 52px; margin-right: auto; } .hdr__menu-btn { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .hdr__menu-btn img { display: block; width: 36px; height: 36px; } .hdr__phone { margin: 0 30px; /* ⚠️ Кегль и начертание — из замера ВИДИМОГО узла. * * В шапке оригинала три телефона, и два из них скрыты (мобильные варианты). * Ссылка-обёртка объявляет 12 px, а текст лежит во вложенном `span` с 18 px — * первый замер снял размер обёртки, и телефон в шапке копии был в полтора * раза мельче оригинала. Начертание задано семейством `Jost-Medium`, то есть * насыщенностью 500: сверка `font-weight` этого не видит, у оригинала он * тоже 400. */ font-size: 18px; line-height: 25.2px; letter-spacing: 1.5px; font-weight: 500; text-transform: uppercase; color: var(--link-custom); white-space: nowrap; } .hdr__phone:hover { color: var(--gold-btn); } /* Номер в мобильной шапке: замер оригинала на 767 — 15/21, разрядка 1,5, * `uppercase`, цвет #1a1a1a, начертание Jost-Medium (то есть 500). Показан * только от 640: ниже рубежа у оригинала номера в шапке нет вовсе. */ .hdr__phone-m { margin: 0 15px 0 0; font-size: 15px; line-height: 21px; letter-spacing: 1.5px; font-weight: 500; text-transform: uppercase; white-space: nowrap; } .hdr__phone-m a { color: var(--dark); } .hdr__phone-m a:hover { color: var(--gold-btn); } .hdr__msg { display: flex; align-items: center; gap: 15px; } .hdr__msg a { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; color: var(--dark); } .hdr__msg a:hover { color: var(--gold); } .hdr__msg svg, .hdr__msg img { width: 25px; height: 25px; } /* ⚠️ `align-self: center` отменяет общее `.btn { align-self: start }` * (base.css): оно нужно кнопкам внутри карточек, чтобы те не растягивались на * ширину колонки, но в шапке прижимало кнопку к верхнему краю — она стояла на * 25 px выше телефона, мессенджеров и переключателя языка. */ /* ⚠️ Зазоры правой группы — замер оригинала на 1280, а не круглые числа: у * него между мессенджерами и кнопкой 50 px и столько же между кнопкой и * языками. Своя версия давала 30 и 0, из-за чего вся правая группа стояла * правее оригинала: телефон и мессенджеры на 68 px, кнопка на 48. Правый край * группы (1240) совпадал и раньше — расходились именно внутренние зазоры. */ .hdr__cta { align-self: center; margin-left: 50px; min-width: 224px; line-height: 48px; } /* ⚠️ Переключатель языков воспроизводится вместе с маркерами списка: у * оригинала `list-style: disc` и отступ 30 px под точки — они видны на * скриншоте слева от «Укр» и «Ру». Своя версия рисовала список без маркеров, * прижатым на 10 px выше (лишний нижний отступ 20 px от общего сброса * списков перекашивал выравнивание по центру) и красила активный язык * золотом, тогда как на оригинале обе подписи одного цвета #252323. */ .hdr__lang { display: block; margin: 0 0 0 50px; padding-left: 30px; list-style: disc; color: #252323; } /* Своя высота строки у самого пункта: без неё пункт тянется до межстрочного * интервала страницы (21 px против 18 у оригинала) и блок вырастает на 6 px. */ .hdr__lang li { font-size: 12px; line-height: 18px; } .hdr__lang a { /* Замер оригинала: Jost-SemiBold (то есть 600) и БЕЗ разрядки — в отличие от * соседних надписей шапки, где разрядка 1.5px есть. */ display: block; font-size: 12px; line-height: 18px; letter-spacing: normal; font-weight: 600; /* ⚠️ Без превращения в прописные: у оригинала подписи «Укр» и «Ру» набраны * как есть, а мы рисовали «УКР» и «РУ». */ text-transform: none; color: #252323; } .hdr__lang a:hover { color: var(--gold); } /* выпадающее меню услуг */ .hdr__drop { position: absolute; top: 100%; left: 0; z-index: 990; width: 400px; padding: 25px; background: #fff; box-shadow: 0 5px 12px rgba(0, 0, 0, .15); display: none; } .hdr__drop.is-open { display: block; } .hdr__drop ul { margin: 0; padding: 0; list-style: none; } /* ⚠️ Раскладка пункта — СЕТКА, а не flex-строка: у оригинала иконка слева, а * справа СТОЛБЕЦ «название / описание». На flex три ребёнка вставали тремя * колонками в ряд, описание уезжало правее названия. Иконка занимает обе * строки сетки (grid-row: 1 / span 2), поэтому вторая колонка — это столбец. * Шаг между пунктами у оригинала 72 px = высота пункта 62 + отступ 10. */ .hdr__drop li + li { margin-top: 10px; } .hdr__drop a { display: grid; grid-template-columns: 50px 1fr; column-gap: 15px; align-items: center; min-height: 50px; padding: 6px 0; color: var(--dark); } .hdr__drop a:hover { color: var(--gold); } /* ⚠️ Правило по img СЛЕПО к части пунктов: у 6 из 9 картинка обёрнута в * , и в сетке ребёнком становится picture, а не img. Пункт молча * терял привязку иконки к двум строкам, вырастал 62 -> 81, шаг ломался * 72 -> 91. Селектор берёт ПЕРВОГО ребёнка ссылки, чем бы он ни был. */ .hdr__drop a > *:first-child { grid-row: 1 / span 2; align-self: center; } .hdr__drop img { width: 50px; height: 50px; } .hdr__drop .t { display: block; grid-column: 2; align-self: end; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: 1.5px; } /* ⚠️ Название и описание — РАЗНЫЕ элементы с переводом строки между ними в * разметке. Вложенный span давал слитный текст ссылки («Изделия с * бриллиантамиОценка и выкуп…»): на вид всё правильно, `display:block` рисует * их в две строки, но в тексте страницы и в поиске слова склеены. Тот же класс * дефекта, что и склейки PageSpeed на соседнем проекте. */ .hdr__drop .sub { display: block; grid-column: 2; align-self: start; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); text-transform: none; letter-spacing: 0; } /* мобильная шапка */ .hdr--mobile { display: none; } /* ⚠️ Потолок ширины логотипа до 500 px — замер оригинала, а не круглое число. * Там правило `.uk-logo.uk-navbar-item{max-width:160px}` (media ≤500), но внутри * ссылки лежат ДВА `` — обычный и инверсный (нулевой ширины), — и * `column-gap: .25em` при кегле 18 px съедает 4,5 px: логотип выходит 155,5, а * не 160. Русский логотип размечен 200 px и упирается в этот потолок; украинский * размечен 140 px и до него не достаёт. */ @media (max-width: 500px) { .hdr--mobile .hdr__logo { max-width: 155.5px; } } .hdr--mobile .hdr__msg { gap: 15px; } /* ⚠️ `padding: 0` обязателен: у кнопки есть собственные поля браузера * (1px 6px), и при ширине 25 px значок ужимался до 13×13 — вдвое меньше * оригинальных 25×25. Тот же промах был у значка меню на десктопе. */ .hdr__toggle { display: flex; align-items: center; justify-content: center; width: 25px; height: 100%; margin-left: 15px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--dark); } @media (max-width: 959px) { .hdr--desktop { display: none; } .hdr--mobile { display: block; position: relative; } } /* ---- Мобильное меню ------------------------------------------------------- * Полоса под шапкой во всю ширину (у оригинала — `uk-dropbar-top`), а не * панель сбоку. Числа сняты с оригинала на 390: фон #f2f2f2, отступ 15, * высота — остаток экрана под шапкой, содержимое при нехватке места * прокручивается внутри полосы. * ⚠️ Мобильная шапка у оригинала НЕ липкая (`position: relative`), и меню * уезжает вместе со страницей. Пока шапка липла, а полоса считалась от начала * документа, при прокрутке с открытым меню она заезжала под шапку. */ /* Высота полосы. ⚠️ Две строки `height` — не опечатка и не дубль. * * `100vh` в Safari на iOS — это высота окна БЕЗ панели браузера, она всегда * больше того, что видно. Пока стояла только она, нижние ~100 px полосы лежали * под адресной строкой Safari, а внутренняя прокрутка к тому моменту была уже * в самом конце — докручивать нечего. Отсюда жалоба владельца: последние два * пункта («Питання та відповіді», «Політика конфіденційності») видно, только * пока тянешь пальцем, а отпустил — резинка вернула их вниз. * * Оригинал этой беды не знает, потому что высоту дропбара ему считает JS * UIkit: `uikit.min.js` берёт размеры из `window.visualViewport` (грепом — * `{height:n,width:o,scale:r,pageTop:a,pageLeft:l}=e.visualViewport`), а это * ровно видимая область. На 375×667 он ставит инлайн `height: 567px`. * * `100dvh` — та же величина средствами CSS: динамическая видимая высота. * Первая строка `100vh` остаётся фолбэком для браузеров старше Safari 15.4 / * Chrome 108: они не понимают `dvh`, отбросят вторую строку и возьмут первую. * Прокрутку страницы под открытым меню мы запираем (см. `is-mmenu-open` ниже), * поэтому панель Safari не схлопывается и `dvh` держится на «малом» значении — * полоса гарантированно вписана в видимое. */ .mmenu { position: absolute; top: var(--header-h); left: 0; z-index: 1020; display: none; box-sizing: border-box; width: 100%; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); padding: 15px; background: #f2f2f2; overflow-y: auto; overscroll-behavior-y: contain; } .mmenu.is-open { display: block; } /* Замок прокрутки страницы на время открытого меню — теми же двумя свойствами, * какие ставит оригинал (замер `_qa/menu-lock.mjs`: у него на `` появляется * инлайн `overflow-y: clip; touch-action: none`). Без него жест, дойдя до конца * полосы, перетекает на документ и уносит меню за верх экрана. * `touch-action: none` на `` внутреннюю прокрутку полосы НЕ ломает: * для панорамирования браузер смотрит значения только до ближайшего * прокручиваемого предка, а это сама `.mmenu` с `overflow-y: auto`. Проверено * поведением, не рассуждением: под правкой полоса доезжает до упора (85 px на * 390×844, 262 px на 375×667) — ровно как у оригинала. * `overscroll-behavior-y: contain` выше — второй рубеж: он рвёт цепочку * прокрутки на границе самой полосы, даже если замок почему-то не встал. */ html.is-mmenu-open { overflow-y: clip; touch-action: none; } /* Боковое поле панели от 640 — 30 px (замер оригинала на 640/768/959). */ @media (min-width: 640px) { .mmenu { padding: 15px 30px; } } /* Нижний блок прижат к низу полосы: у оригинала это `uk-margin-auto-bottom` * на верхней части, а не отступ сверху у нижней. */ .mmenu__inner { display: flex; flex-direction: column; min-height: 100%; } .mmenu__top { margin-bottom: auto; } .mmenu__nav { margin: 0; padding: 0; list-style: none; } .mmenu__nav a { display: block; padding: 6px 0; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; } /* Линия — разделитель МЕЖДУ пунктами: у первого её нет, поэтому `li + li`. */ .mmenu__nav li + li { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(26, 26, 26, .2); } .mmenu__nav a.is-current { color: var(--dark); } /* Кнопка золотая с белым текстом (`uk-button-primary` у оригинала), высота * 50 = 48 строки + две рамки. Ширина зависит от языка: на украинских * страницах во всю полосу, на русских — по содержимому и по центру. */ .mmenu__btnbox { margin-top: 30px; text-align: center; } .mmenu__btn--full { display: block; box-sizing: border-box; width: 100%; } .mmenu__tel { margin: 20px 0 0; color: var(--dark); font-size: 15px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; } .mmenu__tel a { color: inherit; } .mmenu__bottom { margin-top: 30px; } /* Языки у оригинала — список С МАРКЕРАМИ (Polylang), отступ слева 30, * подпись обычным регистром без разрядки, рядом флаг 16×11. */ .mmenu__lang { margin: 0; padding-left: 30px; list-style: disc outside; } .mmenu__lang a { color: #252323; font-size: 15px; font-weight: 400; letter-spacing: normal; text-transform: none; } .mmenu__lang img { vertical-align: baseline; } .mmenu__lang span { margin-left: 5px; } /* Строка самого списка — 15 px, как у оригинала: внутри неё стоит ссылка * меньшего кегля, и именно этот зазор даёт +2 px сверху и шаг 32, а не 30. */ /* Ряд с переносом по центру: на узком экране ссылки встают в две строки с * зазором 10, от 639 — в одну. Смещения -41/+41 повторяют раскладку оригинала * (UIkit `uk-subnav`): при них пункт выходит 224 px при тексте 183, а весь ряд * стоит на 20,5 px левее центра — ровно как на оригинале. */ .mmenu__sub { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 10px; margin: 30px 0 0 -41px; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; } /* Пункт = 20 px отступа + палочка 1 px + 20 px = те же 41 px, но с чертой. * У первого пункта черта прозрачная: место занимает, линию не рисует — * ровно как `uk-subnav-divider` у оригинала (замер `_qa/mm-div2.mjs`). */ .mmenu__sub li { display: flex; align-items: center; padding-left: 20px; } .mmenu__sub li::before { content: ""; height: 22.5px; margin-right: 20px; border-left: 1px solid rgba(26, 26, 26, .2); } .mmenu__sub li:first-child::before { border-left-color: rgba(0, 0, 0, 0); } /* display:block — не косметика: у строчной ссылки высота считается по шрифту * (13 px → 15), а у оригинала это блок в 1,5 строки (20). Отсюда и расхождение * в 1-3 px по вертикали у обеих нижних ссылок. */ .mmenu__sub a { display: inline-block; color: var(--muted); font-size: var(--mm-sub-fs, 13px); line-height: 1.5; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; } /* Бургер превращается в крестик, пока меню открыто. */ .hdr__toggle .i-close { display: none; } .hdr__toggle[aria-expanded="true"] .i-burger { display: none; } .hdr__toggle[aria-expanded="true"] .i-close { display: block; } /* --------------------------------------------------------------- подвал */ /* ⚠️ Подвал — обычная секция темы (`uk-section`), а не своя раскладка: отступ * 40 px до 960 и 70 px от 960. Пока стояла константа 70, подвал на КАЖДОЙ * странице был на 60 px выше оригинала ниже 960 — замер на 767 давал 652,5 * против 420,5. Числа сняты с оригинала на 640/767/960/1200. */ .ftr { padding: 40px 0; background: #fff; } @media (min-width: 960px) { .ftr { padding: 70px 0; } } /* Сетка подвала снята замером оригинала на 390/500/639/640/767/959/960/1200: * • доли 1/2 → 1/3 от 640 → 1/5 от 960, колонка логотипа во всю ширину до 960; * • колонки РАСТЯГИВАЮТСЯ (`tm-grid-expand` = flex-grow), поэтому на 1200 они * по 25 %, а не по 20 %, а «Про нас» одна в строке ниже 640 занимает 100 %; * • разрыв рядов 30 px ниже 960 (`uk-grid-margin`), выше — рядов нет; * • зазор колонок 30 px, от 1200 — 40 px. * Стояли фиксированные `width` + `margin-bottom: 30px`: лишний отступ под * последним рядом и неверная раскладка ниже 640. */ .ftr__cols { display: flex; flex-wrap: wrap; margin-left: -30px; row-gap: 30px; } .ftr__col h5 { font-weight: 500; } /* замер: Jost-Medium */ /* ⚠️ `flex-shrink` обязан остаться 1. С `flex: 1 0 …` три доли по 33,333 % * не влезали в строку из-за округления последнего пикселя, третья колонка * уходила на новую строку и растягивалась во всю ширину: подвал на 640 был * 613,5 против 420,5 у оригинала. У темы доли заданы `width`, сжатие * разрешено. */ .ftr__col { flex: 1 1 50%; padding-left: 30px; box-sizing: border-box; } /* Логотип подвала до 960 у оригинала стоит по центру, дальше — слева. * Замер боксов: 390 -> x=95 (ширина 200 в 390), 640 -> 220, 960 и 1440 -> 40. * Подвал лежит вне `#tm-main`, поэтому в общий замер выравнивания не попал. */ .ftr__logo { flex-basis: 100%; text-align: center; } @media (min-width: 960px) { .ftr__logo { text-align: left; } } @media (min-width: 640px) { .ftr__col { flex-basis: 33.333%; } .ftr__logo { flex-basis: 100%; } .ftr__col--contacts { order: 1; } } @media (min-width: 960px) { .ftr__cols { row-gap: 0; } .ftr__col, .ftr__logo { flex-basis: 20%; } } @media (min-width: 1200px) { .ftr__cols { margin-left: -40px; } .ftr__col { padding-left: 40px; } } .ftr__logo img { width: 200px; height: 67px; } .ftr h5 { font-size: 15px; line-height: 21px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dark); margin-bottom: 20px; } .ftr ul { margin: 0; padding: 0; list-style: none; } /* ⚠️ Пункт подвала — ровно строка: замер оригинала `li.el-item` даёт h=22,5 * при pad 0/0 и разрыве 0. Стоявшие здесь `padding: 3px 0` — выдуманное число: * каждый пункт становился 28,5 px, колонка из 9 ссылок — на 54 px выше. */ .ftr li { padding: 0; } /* Интерлиньяж 22,5 px — замер оригинала. Стояло 16 px, и 380 ссылок подвала * были сжаты по вертикали; на глаз это читается как «другой подвал», а сверка * кегля и начертания такого не видит. */ .ftr li a { font-size: 15px; line-height: 22.5px; color: var(--text); } .ftr li a:hover { color: var(--gold-btn); } .ftr__phone { display: inline-block; margin-top: 20px; font-size: 18px; line-height: 27px; font-weight: 600; color: var(--text); } .ftr__phone:hover { color: var(--gold-btn); } .ftr__note { margin-top: 12px; font-size: 18px; line-height: 27px; color: var(--gold); } .ftr__msg { display: flex; gap: 15px; } /* ⚠️ Замер оригинала (подвал, 1440): кнопка 36×36 КРУГЛАЯ (`border-radius: 500px`), * без рамки, с заливкой #f7f7f7, значок 25×25, цвет #252323. У нас стоял * квадрат с рамкой, без заливки и со значком 20×20 — пять отличий сразу, и все * невидимы для числовых сверок: размер кнопки совпадал, ссылка была на месте. * Поймано глазами на полосе «оригинал | копия». */ .ftr__msg a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 500px; background: var(--section-muted); color: var(--link-custom); } .ftr__msg a:hover { color: var(--gold); } .ftr__msg svg, .ftr__msg img { width: 25px; height: 25px; } /* -------------------------------------------------------------- модалка * Значения из конфигурации плагина оригинала: ширина 350, отступ сверху 10vh, * скругление 5, подложка rgba(0,0,0,.7), крестик 28×28 чёрный. */ .modal { position: fixed; inset: 0; z-index: 999999; display: none; background: var(--overlay); } .modal.is-open { display: block; } /* ⚠️ Прокрутка длинной формы висела на самом окне (`overflow-y: auto`), а * крестик стоит ЗА его границей — и срезался собственной прокруткой окна. * Прокрутка перенесена на подложку: окно ничего не обрезает, а форма, не * влезающая в экран, по-прежнему прокручивается (проверено на 390×667). */ .modal { overflow-y: auto; } .modal__box { position: relative; width: 350px; max-width: 90vw; margin: 10vh auto; padding: 10px; background: #fff; border-radius: 5px; } /* Крестик: замер оригинала — 28×28, `border-radius: 0` (квадрат), правый край * вровень с краем окна, верх на 20 px выше окна. Стоял круглым и сдвинутым * наружу на 14 px по обеим осям. */ .modal__close { position: absolute; top: -20px; right: 0; width: 28px; height: 28px; border: 0; border-radius: 0; background: #000; color: #fff; font-size: 18px; line-height: 28px; text-align: center; cursor: pointer; } body.is-locked { overflow: hidden; } /* blocks.css */ /* Содержательные блоки: текст, картинки, списки, появление секций. * Отступы — те же, что даёт тема: 20 px между блоками, 30 px между колонками. */ /* ⚠️ Кегль текста, как и кегль заголовка, приходит ЗАМЕРОМ оригинала. * * У темы базовый текст 15 px, но крупные абзацы первого экрана и подписи * карточек набраны 18 и 20 px (`uk-text-large`, `uk-h6` и прочие классы * конструктора), а мелкая приписка — 12 и 13 px. Пока весь текст печатался * одним размером, 764 абзаца рисовались мельче оригинала: 18 px вместо * положенных. На сверке структуры это невидимо — текст на месте и совпадает * дословно. * * Пары «размер + интерлиньяж» взяты из `_data/blocks.json`; разрядка есть * только у двух мелких вариантов, у остальных её нет. */ .tx-12 { font-size: 12px; line-height: 16.8px; letter-spacing: 1.5px; } .tx-13 { font-size: 13px; line-height: 18.2px; } .tx-13-33 { font-size: 13px; line-height: 33px; letter-spacing: 1.5px; } .tx-14 { font-size: 14px; line-height: 21px; letter-spacing: 1.5px; } .tx-15 { font-size: 15px; line-height: 22.5px; } .tx-15-15 { font-size: 15px; line-height: 15px; } .tx-16 { font-size: 16px; line-height: 24px; } .tx-18 { font-size: 18px; line-height: 27px; } .tx-20 { font-size: 20px; line-height: 30px; } .tx-22 { font-size: 22px; line-height: 33px; } .prose { margin: 0 0 20px; } .prose:last-child { margin-bottom: 0; } .prose p { margin: 0 0 20px; } .prose p:last-child { margin-bottom: 0; } /* ⚠️ БЕЗ подчёркивания. Перепись по оригиналу: 345 видимых ссылок на восьми * страницах — подчёркнутых НОЛЬ, у темы стоит `text-decoration: none` и на * `a`, и на `:hover`. Здесь стояло `underline` — выдуманное правило, из-за * которого ссылки в тексте, адреса и подписи мессенджеров выглядели иначе, чем * у оригинала. Ни сверка содержимого, ни геометрия этого не видят: текст и * высоты совпадают. Поймано глазами на полосе «оригинал | копия». */ .prose a { color: var(--link-custom); } .prose a:hover { color: var(--gold-btn); } .prose strong, .prose b { font-weight: 600; color: var(--dark); } /* ⚠️ Разрыв между пунктами был вписан константой 8 px — взят на глаз и неверен * во всех четырёх видах списка, какие есть у темы. Перепись по всем * 186 страницам (`_qa/listgap.mjs`, 616 списков) дала: * • 408× маркированный: разрыв 10 (верхний отступ ВТОРОГО пункта), маркер — * кружок 6 px псевдоэлементом в поле 30×30, вынесенный влево; * • 108× текст из редактора: родной маркер `disc`, отступ 30, а разрыв 20 * даёт АБЗАЦ внутри пункта, а не сам пункт; * • 96× центрированный: без маркера, отступы пункта 5/5; * • 4× со сброшенным оформлением: ни маркера, ни отступов. * Вид приходит замером (`look` в разборе), потому что у последних двух видов * классов нет вовсе — оформление стоит инлайном прямо в контенте. */ .prose ul, .prose ol { margin: 0 0 20px; padding-left: 30px; } ul.prose { list-style: disc; } /* Абзац внутри пункта отступ СОХРАНЯЕТ — в отличие от последнего абзаца * текстового блока. Это и есть разрыв 20 px у списков из редактора; нижний * отступ последнего пункта схлопывается с отступом самого списка. */ .prose li > p:last-child { margin-bottom: 20px; } .prose.list--bullet { padding-left: 0; list-style: none; } .prose.list--bullet > li { padding-left: 30px; } .prose.list--bullet > li + li { margin-top: 10px; } /* ⚠️ Высота маркера — `1.5em`, а не 30 px: замер дал 30 только потому, что * снят на тексте 20 px. Отрицательный нижний отступ той же величины убирает * маркер из потока — иначе каждый пункт вырос бы на высоту маркера. */ .prose.list--bullet > li::before { content: ""; display: list-item; position: relative; left: -30px; top: 0; width: 30px; height: 1.5em; margin-bottom: -1.5em; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20fill%3D%22%23484848%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%3C%2Fsvg%3E") 50% 50% no-repeat; } .prose.list--center { padding-left: 0; list-style: none; text-align: center; } /* ⚠️ Рамка пункта — замер оригинала, а не украшение: конструктор задаёт * `#page\#N .el-item{border:1px solid black;margin:5px 50px;border-radius:5px}`. * Так нарисованы ВСЕ 96 центрированных списков на 32 страницах (веса слитков, * номиналы монет): пункт — рамочка 273 px внутри колонки 373 px. Копия рисовала * их голым текстом во всю ширину — расхождение видно глазами, но контракт * картинок его не ловит, картинок в этих списках нет. */ .prose.list--center > li { margin: 5px 50px; border: 1px solid #000; border-radius: 5px; } .prose.list--plain { padding-left: 0; list-style: none; } .col > * + * { margin-top: 20px; } /* Последний блок колонки нижнего отступа не имеет: у темы на панелях стоит * `uk-margin-remove-last-child`. Без этого каждая секция выходила ровно на * 20 px выше оригинала — на всех страницах, где колонка чем-то заканчивается. */ .col > *:last-child { margin-bottom: 0; } .col > h1, .col > h2, .col > h3, .col > h4, .col > h5, .col > h6 { margin-bottom: 0; } .col > .btn + .btn { margin-left: 15px; } .col img, .col picture { display: block; } /* Тот же случай, что и в `.cards img` ниже: ширину диктует атрибут. */ .col picture img { height: auto; } /* ⚠️ Колонка здесь БОЛЬШЕ НЕ flex-контейнер. * * Было: `display:flex; flex-direction:column; justify-content:center`. В * flex-контейнере вертикальные margin соседних детей не схлопываются, и пара * «20 сверху / 20 снизу» из стилей темы давала зазор 40 вместо 20. У самой * темы колонка в этих секциях — `display:block` (проверено на слепке: * `uk-grid tm-grid-expand`, `align-items:normal`, дети `block`), поэтому * отступы там схлопываются. Цена ошибки на главной: блок онлайн-оценки был * выше оригинала на 120 px, в RU-версии — на 80. * Вертикального центрирования колонок в этих секциях у оригинала нет вовсе. */ .section--large .row > .col { display: block; } /* Вертикальное центрирование — ТОЧЕЧНО, по классам оригинала. * * Прежнее общее правило `.section--large .row > .col { display:flex; … }` * промахивалось в обе стороны сразу: центрировало колонки, которые у темы не * центрированы (и давало им зазор 40 вместо 20, потому что в flex вертикальные * margin не схлопываются), и не доставало до тех, что центрированы, но лежат в * `uk-section-small`. Теперь признак берётся из разметки: ряд с * `uk-flex-middle` → `.row--middle`, колонка с парой * `uk-grid-item-match uk-flex-middle` → `.col--middle`. */ .row--middle { align-items: center; } .col--middle { display: flex; flex-direction: column; justify-content: center; } /* ⚠️ Тот же капкан, из-за которого сняли общее правило: у flex-контейнера * вертикальные margin детей не схлопываются, и пара «20 снизу + 20 сверху» * дала бы зазор 40. Нижний отступ снимается, расстояние задаёт только * `.col > * + * { margin-top: 20px }` выше. */ .col--middle > * { margin-bottom: 0; } /* `uk-margin-remove-first-child` темы: первый элемент колонки к её верху не * отбивается. Двух классов в селекторе хватает, чтобы перебить наше * `.card h3 { margin: 10px 0 0 }` — оно давало карточке лишние 10 px. */ .col--nomt-first > *:first-child { margin-top: 0; } /* ⚠️ То же правило, но заголовок в карточке услуг обёрнут ещё одним div (`.mb--0`), * поэтому строка выше до него НЕ доставала: первым ребёнком колонки был div, * а `.card h3 { margin: 10px 0 0 }` (ниже) продолжал давать заголовку 10 px. * Область действия — 18 h3 карточек услуг на двух главных (DOM-проход по всем * 186 страницам). Там у оригинала `margin-top: 0`, у нас было 10, и плитка * выходила на 10 px выше; после правки геометрия на 1500 и 1280 совпала с оригиналом * точно (0 расхождений по cH/hY/bY/low). * ⛔ h4 СОЗНАТЕЛЬНО не включён: у карточек преимуществ (12 h4 там же) копия * на широких экранах и так НИЖЕ оригинала (960: 241 против 253; RU 1500: 145 * против 160) — минус 10 там увеличивает недобор, а не чинит. Карточки монет * (264 h4 на 24 страницах, обёртка `.mt--small.mb--0` внутри `.tilebox`) под селектор * не попадают и не должны: у них оригинал даёт те же 10 px, высоты плиток совпадают. */ .card .col--nomt-first > *:first-child > h3:first-child { margin-top: 0; } /* Правило конструктора `@media (min-width:960px) { #page\#19 { padding-top:5% } }` * — секция карточек услуг обеих главных. До 960 действует обычный отступ * секции, с 960 он становится резиновым: 48 px на 960, 72 на 1440. Значение * оставлено в процентах намеренно — фиксированное число совпало бы ровно на * одной ширине. */ @media (min-width: 960px) { .section--pt-5pct { padding-top: 5%; } } /* ⚠️ Обёртка потока внутри колонки — из-за правила выше, а не для красоты. * Колонка здесь flex-контейнер, а у абсолютного ребёнка flex-контейнера * static position считается так, будто он ЕДИНСТВЕННЫЙ flex-item: он встаёт * по `justify-content`, то есть в вертикальный центр. Подпись «працюємо в * м.Одеса» ложилась на 472 px поверх абзаца вместо 762 под кнопками. * Проверено арифметикой: (612 − 27 − 20) / 2 = 282,5 = замеренный used-top. * У оригинала содержащий блок — блочная `.uk-panel` (`display:flow-root` на * всех 176 страницах замера), и подпись стоит РОВНО у её нижней границы: * D1 = abs.top − panel.bottom = 0 на 172 страницах из 176 на обеих ширинах. * Обёртка возвращает тот же блочный содержащий блок, поэтому координата не * задаётся числом — она снова вычисляется потоком. */ .col__flow { position: relative; display: flow-root; width: 100%; } /* Первый экран главных: на телефоне фото стоит НАД текстом. У темы это * сделано `flex-wrap: wrap-reverse` на контейнере секции, но тот механизм * разворачивает поперечную ось всех строк сразу и при трёх колонках даёт * неочевидный результат. Здесь тот же видимый порядок выражен прямо — * порядком колонок, и только ниже 960, где колонки стоят столбиком. * Охват: два контейнера на 186 страницах (аудит), обе главные. */ @media (max-width: 959px) { .row--rev-m > .col { order: 1; } .row--rev-m > .col:last-child { order: 0; } } /* ------------------------------------------------------------- появление * IntersectionObserver + переход, без библиотек. * * ⚠️ Где именно — решает замер оригинала (`recon/anim.mjs`), а не «раз есть * uk-scrollspy, значит анимируем». Контейнеры `uk-scrollspy` стоят почти на * каждой странице, но без `cls:` и без целей они не делают ничего: по всем 186 * страницам анимируются ровно две — главная и `/ru/`, по два контейнера * (9+9 карточек `slide-top-small` и 2 колонки `fade`). Пока класс висел на * каждой секции, копия прятала до прокрутки 6 секций внутренней страницы, * которых оригинал не прячет вовсе. * * Оригинал двигает карточку СВЕРХУ (`uk-animation-slide-top-small`), поэтому * смещение отрицательное; у `fade` смещения нет вовсе. * * ⚠️ Три страховки, каждая проверяется отдельно: * • нет IntersectionObserver → всё показано (класс на не ставится); * • prefers-reduced-motion → без перехода; * • main.js не загрузился → всё показано, потому что скрывает * содержимое только правило, включаемое самим скриптом (`html.js`). * Скрывать блоки в CSS без этого условия нельзя: при сбое скрипта страница * осталась бы пустой при HTTP 200. */ .reveal { opacity: 1; } html.js .reveal { opacity: 0; transition: opacity .3s ease-out, transform .3s ease-out; } html.js .reveal--slide { transform: translateY(-10px); } html.js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } } /* ------------------------------------------------------------- карточки * Карусель оригинала (`uk-slider`) показывает несколько карточек и листается * по горизонтали; сетка раскладывает их по строкам. Число видимых в ряд * приходит из разбора оригинала (`data-per-row`), а не назначается правилом: * на соседнем проекте своё правило «карточек больше шести — значит плотнее» * промахнулось 120 раз в обе стороны. */ /* ⚠️ Вертикальный зазор между рядами — `row-gap`, а не `margin-bottom` у * карточки. У темы отступ получает только карточка, ПЕРЕНЕСЁННАЯ на новую * строку (`.uk-grid > .uk-grid-margin`), поэтому под последним рядом отступа * нет. Собственный `margin-bottom` добавлял его всегда: секция «Як * відбувається продаж» выходила на 30 px выше оригинала на каждой из 56 * проверенных страниц. * * Зазоры сняты замером (`_qa/cardgap.mjs`) на обеих сторонах: 30 px до 1200, * 40 px от 1200 — это просвет сетки темы по умолчанию, тот же, что у строк. */ .cards { display: flex; flex-wrap: wrap; margin-left: -30px; row-gap: 30px; } .cards > .card, .cards > .card-link { padding-left: 30px; box-sizing: border-box; flex: 0 0 100%; max-width: 100%; } /* Карточка со своим классом ширины (слайды карусели): ширину задаёт класс, * а не базис контейнера. Правила по `data-per-row` для таких не печатаются. */ .cards > .card--w, .cards > .card-link.card--w { flex: 0 1 auto; } /* В ленте карусели переноса нет: без запрета на сжатие два слайда по 100 % * делят ширину пополам — 339 px вместо 708. У темы лента шире контейнера и * прокручивается. */ .cards--slider > .card--w, .cards--slider > .card-link.card--w { flex: 0 0 auto; } /* ⚠️ Ширину картинки задаёт её атрибут `width`, а не растяжка на 100 %. * * Было `.cards img { width: 100% }` — правило перебивает атрибут разметки, и * значок этапа 60×60 в колонке «по содержимому» рисовался 50×50 (ширина * содержимого колонки), при том что в HTML стояло `width="60"`. * Замер оригинала на 12 страницах: из 100 картинок 77 отрисованы РОВНО в * ширину своего атрибута, 23 меньше (узкая колонка) и ни одна больше. То есть * поведение оригинала — «атрибут плюс `max-width:100%`», а не «во всю * колонку»; `max-width` уже задан общим правилом в base.css. */ .cards img { height: auto; } .card-link { color: inherit; display: block; } .card-link:hover { color: var(--gold-btn); } .card > * + *, .card-link > * + * { margin-top: 10px; } .card h3, .card h4, .card h5, .card-link h3, .card-link h4, .card-link h5 { margin: 10px 0 0; } /* карусель: горизонтальная лента с прилипанием, без библиотек */ .cards--slider { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* Полоса прокрутки скрыта, как у темы: её карусель листается кнопками и * точками, своей полосы не показывает. Отведённые под полосу 10 px давали * секции лишнюю высоту. Прокрутка колесом и пальцем остаётся. */ scrollbar-width: none; } .cards--slider::-webkit-scrollbar { display: none; } /* Точки карусели — значения из стилей темы (`.uk-dotnav`). */ .dots { display: flex; flex-wrap: wrap; justify-content: center; margin: 20px 0 0 -12px; padding: 0; list-style: none; } .dots > li { flex: none; padding-left: 12px; } .dots__dot { display: block; box-sizing: border-box; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(72, 72, 72, .2); cursor: pointer; transition: background-color .2s ease-in-out; } .dots__dot.is-active { background: rgba(72, 72, 72, .6); } .cards--slider > .card, .cards--slider > .card-link { scroll-snap-align: start; } /* До первого рубежа число колонок берётся из замера оригинала: на телефоне * тема раскладывает часть сеток по две карточки в ряд, а часть — по одной. * * ⚠️ Значений было ровно два — 2 и 3. Сетка, у которой замер дал 5 (цепочка * «шаг → стрелка → шаг» на главной, у оригинала пять иконок в ряд на любой * ширине), не находила своего правила и раскладывалась в столбик: секция * выходила вдвое выше (377 → 775 px). Правило молча не срабатывало ровно там, * ради чего задумано, поэтому ряд значений закрыт целиком, до шести. */ .cards[data-per-row-mobile="2"] > .card, .cards[data-per-row-mobile="2"] > .card-link { flex-basis: 50%; max-width: 50%; } .cards[data-per-row-mobile="3"] > .card, .cards[data-per-row-mobile="3"] > .card-link { flex-basis: 33.333%; max-width: 33.333%; } .cards[data-per-row-mobile="4"] > .card, .cards[data-per-row-mobile="4"] > .card-link { flex-basis: 25%; max-width: 25%; } .cards[data-per-row-mobile="5"] > .card, .cards[data-per-row-mobile="5"] > .card-link { flex-basis: 20%; max-width: 20%; } .cards[data-per-row-mobile="6"] > .card, .cards[data-per-row-mobile="6"] > .card-link { flex-basis: 16.666%; max-width: 16.666%; } /* ⚠️ Средний диапазон (640–959) берётся из СВОЕГО признака `data-per-row-s`, а * не из общего правила «три и четыре → по две в ряд». У темы это класс `@s`, и * он у сеток разный: карточки контактов стоят по три уже от 640, а карточки * каталога — по две. Пока правило было общим, секция контактов на 768 выходила * 613,8 px против 466,6 у оригинала. */ @media (min-width: 640px) { .cards[data-per-row-s="2"] > .card, .cards[data-per-row-s="2"] > .card-link { flex-basis: 50%; max-width: 50%; } .cards[data-per-row-s="3"] > .card, .cards[data-per-row-s="3"] > .card-link { flex-basis: 33.333%; max-width: 33.333%; } .cards[data-per-row-s="4"] > .card, .cards[data-per-row-s="4"] > .card-link { flex-basis: 25%; max-width: 25%; } .cards[data-per-row-s="5"] > .card, .cards[data-per-row-s="5"] > .card-link { flex-basis: 20%; max-width: 20%; } .cards[data-per-row-s="6"] > .card, .cards[data-per-row-s="6"] > .card-link { flex-basis: 16.666%; max-width: 16.666%; } } @media (min-width: 960px) { .cards[data-per-row="2"] > .card, .cards[data-per-row="2"] > .card-link { flex-basis: 50%; max-width: 50%; } .cards[data-per-row="3"] > .card, .cards[data-per-row="3"] > .card-link { flex-basis: 33.333%; max-width: 33.333%; } .cards[data-per-row="4"] > .card, .cards[data-per-row="4"] > .card-link { flex-basis: 25%; max-width: 25%; } .cards[data-per-row="5"] > .card, .cards[data-per-row="5"] > .card-link { flex-basis: 20%; max-width: 20%; } .cards[data-per-row="6"] > .card, .cards[data-per-row="6"] > .card-link { flex-basis: 16.666%; max-width: 16.666%; } } /* От 1200 просвет сетки темы 40 px — и по горизонтали, и по вертикали. * Замер: карточка ряда из шести у оригинала 206,7 px, у нас была 205. */ @media (min-width: 1200px) { .cards { margin-left: -40px; row-gap: 40px; } .cards > .card, .cards > .card-link { padding-left: 40px; } } /* Вложенная сетка внутри карточки (иконка + текст рядом). * ⚠️ Отрицательный внешний отступ `.row` рассчитан на полную ширину секции; * внутри карточки он съедал ширину, и колонка `col--expand` сжималась до * содержимого — текст шёл по одной букве в строке. Внутри карточек ряд * работает без компенсации отступов. */ /* ⚠️ Просвет внутри карточки задают МОДИФИКАТОРЫ её сетки, а не константа. * Здесь стояло «отступ первой колонки 0, следующих 15 px»; перепись по * оригиналу (330 сеток на семи страницах) дала шесть разных значений: без * модификаторов 40, `uk-grid-small` 15, `uk-grid-column-medium` 30, * `uk-grid-large` 70, `collapse` 0. Из-за константы колонка текста в карточке * каталога выходила 180 px вместо 200, заголовок ломался на три строки, и * секция русской главной была 1526 px против 1065. * ⚠️ `width: 100%` тоже убрано: с ним отрицательный отступ ряда не расширял * его наружу (ширина уже задана жёстко), ряд оставался 360 px вместо 400, и * колонки внутри выходили по 180 вместо 200. У темы у внутренней сетки ширина * не задана вовсе. */ /* Иконка UIkit из разбора. * * ⚠️ Размер приходит ЗАМЕРОМ и печатается на самой иконке инлайном: в разметке * темы у контактных иконок стоит `width: 80`, а рисуются они 25×25 — атрибуты * врут. Общее правило «все иконки 25×25» держалось на переписи по страницам * контактов и оказалось шире, чем перепись: стрелка карусели 14×24 тоже стала * 25×25. * * Общий сброс (`svg { max-width: 100%; height: auto }`) здесь пришлось * перебить: при `height: auto` SVG с viewBox тянется по ширине колонки, и * иконка вырастала с 25 до 86 px. */ .icon { display: inline-block; line-height: 0; color: inherit; } .icon svg { display: block; width: 100%; height: 100%; } .icon:not([style]) svg { width: auto; height: auto; } /* Блок, целиком обёрнутый ссылкой (мобильный набор карточек главной): у темы * это `a.uk-card` — блочная ссылка со своим фоном, цвет текста наследуется. * Замер оригинала на 390: фон #eaeaea, внутренний отступ 0, ширина во всю * колонку. */ .linkbox { display: block; color: inherit; } .linkbox:hover { color: inherit; } /* ---- карточка услуги на телефоне ------------------------------------------- * Правки владельца от 16.08: «иконки большие, максимум информации» и «шрифт * осветлить». * * Замер 390 (оба сайта одним кодом): карточка у нас 143 px, у оригинала 113. * Разложение по блокам дало три слагаемых, каждое чинится отдельно: * +20 h4 несёт общий отступ заголовка (`h1..h6 { margin: 0 0 20px }`); * +20 просвет между строкой заголовка и строкой описания: у нас 30 * (`.row { row-gap: 30px }`), у оригинала 10; * −10 блок описания у оригинала на 10 выше — уходит вместе с первыми двумя. * Отдельная, не влияющая на высоту причина (замечание Codex принято): внешний * ряд у оригинала центрирован по вертикали, у нас `align-items: normal` — * значок и текст стоят вразнобой. * Цвет заголовка: у нас rgb(26,26,26) (`--dark`), у оригинала rgb(72,72,72) — * такой же, как у описания под ним. * * ⚠️ Глобальные `.row { row-gap }` и `h1..h6 { margin }` НЕ трогаем: на них * держится сетка всего сайта. Область правил задана колонкой `col--2-3@s` — * перечисление по готовому dist: 18 вхождений, 9 + 9, только на двух главных, * и все внутри `.not-s` (то есть ниже 640). */ .linkbox:has(.col--2-3\@s) > .row { align-items: center; } .row--stack:has(> .col--2-3\@s) { row-gap: 10px; } .col--2-3\@s :where(h1, h2, h3, h4, h5, h6) { margin-bottom: 0; color: #484848; } /* Плитка каталога: узел, соответствующий `.el-item.uk-card` темы. Обнимает всю * плитку целиком — картинку, заголовок и подпись (замер `/golden-coins/`: * 167×313 против ячейки 207×313, разница — промежуток сетки). Несёт рамку и * подсветку под курсором. * * Значения подсветки — замер наведением у оригинала (`_qa/cardstyle.mjs`, * 15.08): фон rgba(0,0,0,0) → #fff, цвет рамки rgba(0,0,0,0) → rgba(26,26,26,.2), * переход 0.1 с; тень и отступы не меняются. То же говорит правило темы * `.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover`. * Класс ставится сборщиком ВМЕСТЕ с рамкой: подсвечивается ровно то, что * обведено, — иначе фон лёг бы на ячейку шириной с промежуток сетки. */ .tilebox { box-sizing: border-box; } .tilebox { transition: background-color .1s ease, border-color .1s ease; } .tilebox:hover { background-color: #fff; border-color: rgba(26, 26, 26, .2); } /* Классы темы, приехавшие ВМЕСТЕ С ТЕКСТОМ. * * Заголовки, абзацы и списки печатаются дословным HTML оригинала, поэтому в * нашей разметке остаются классы UIkit: перепись по `dist` даёт `uk-link-heading` * 264, `uk-link-text` 4, `uk-link-reset` 2, `uk-button uk-button-text` 2, `uk-h3` 3. * Правил для них у нас не было, и вид определялся общим правилом для тега: все * 264 ссылки-заголовка плиток каталога красились в #999 вместо #1a1a1a. Ни один * контракт этого не видел — типографика сверяется по НАШИМ классам. Сторож — * `_qa/foreignclass.mjs` (сверяет узлы по уникальному тексту, а не по классу). * * Значения — из CSS темы, не из головы: * a.uk-link-heading{color:inherit} :hover{color:rgba(26,26,26,.6);text-decoration:none} * a.uk-link-reset{color:inherit!important;text-decoration:none!important} * .uk-button{display:inline-block;font-weight:500;…} .uk-button-text{padding:0;line-height:1.5;color:#1a1a1a} * Селекторы записаны с тегом (`a.uk-link-heading`), иначе общее правило `a` * той же силы, но объявленное ниже, снова перекрасит ссылку. */ a.uk-link-heading, a.uk-link-reset { color: inherit; } a.uk-link-heading:hover { color: rgba(26, 26, 26, .6); text-decoration: none; } a.uk-link-reset:hover { color: inherit; text-decoration: none; } /* `uk-button-text` — текстовая кнопка «Читати далі» в архиве статей: подчёркивание * рисуется псевдоэлементом и разъезжается под курсором (transition 0.3 с). */ /* ⚠️ Селектор с тегом обязателен и здесь: кнопка стоит внутри текстового блока, * а `.prose a` (класс + тег) специфичнее одного класса и красила её в #252323 * поверх нашего правила. */ .uk-button-text, a.uk-button-text { display: inline-block; padding: 0; line-height: 1.5; background: none; color: var(--dark); font-weight: 500; position: relative; z-index: 0; } .uk-button-text::before { content: ""; position: absolute; bottom: 0; left: 0; right: 100%; z-index: -1; border-bottom: 2px solid currentColor; transition: .3s ease-out; transition-property: left, right; } .uk-button-text:hover, a.uk-button-text:hover { color: var(--dark); } .uk-button-text:hover::before { left: 0; right: 0; } /* Стрелки карусели. Замер оригинала на 960: кнопка 45×53 (иконка 25×43 плюс * отступ 5/10), прижата к краю ленты, центрирована по высоте, цвет * rgba(72,72,72,.5). У темы они лежат поверх ленты в контейнере с * `position: relative` — здесь роль такого контейнера берёт на себя предок * ленты. */ .slidenav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; padding: 5px 10px; border: 0; background: none; line-height: 0; cursor: pointer; color: rgba(72, 72, 72, .5); } .slidenav:hover { color: rgba(72, 72, 72, .8); } /* ⚠️ Отступ от края СОДЕРЖИМОГО, а не от края ленты. У ленты отрицательный * отступ слева 30 px (`.cards`), который гасится паддингом карточек, поэтому * содержимое начинается на 30 px правее её границы. У темы стрелка отстоит от * содержимого на 30 px (`uk-position-medium`) — слева это 30 + 30, справа 30. * Замер оригинала на 960: стрелки на 70 и 845 при ленте 910@10. */ .slidenav--prev { left: 60px; } .slidenav--next { right: 30px; } :where(.col, .container, .panel, .tile):has(> .cards--slider) { position: relative; } /* Навигация карусели прячется, когда листать нечего — как у темы (там при * помещающихся слайдах стрелки и точки имеют нулевой размер). Класс ставит * скрипт: помещаемость зависит от ширины окна и пересчитывается на resize. */ .slidenav.is-idle, .dots.is-idle { display: none; } /* Модификаторы просвета для СЕТКИ КАРТОЧЕК. Правила `.row--*` до карточек не * доставали: `.cards > .card { padding-left: 30px }` весит больше, чем * `.row--collapse > :where(.card)`, где `:where` веса не добавляет. Итог был * виден только замером: девять плиток каталога, у оригинала стоящих ВПЛОТНУЮ, * копия раздвигала на 40 px — карточка сужалась, заголовок ложился в три * строки вместо двух, секция вырастала с 1065 до 1526 px. * Перечень модификаторов — по данным разбора: collapse 4, large 2, stack 2 * (плюс `uk-grid` и `uk-grid-match`, которые отступов не меняют). */ .cards.row--collapse { margin-left: 0; row-gap: 0; } .cards.row--collapse > .card, .cards.row--collapse > .card-link { padding-left: 0; } .cards.row--large { margin-left: -40px; row-gap: 40px; } .cards.row--large > .card, .cards.row--large > .card-link { padding-left: 40px; } .cards.row--stack > .card, .cards.row--stack > .card-link { width: 100%; } @media (min-width: 1200px) { .cards.row--large { margin-left: -70px; row-gap: 70px; } .cards.row--large > .card, .cards.row--large > .card-link { padding-left: 70px; } } /* Разрыв рядов 15 px (`uk-grid-row-small` темы: `margin-top: 15px` у элементов, * перенесённых на новую строку). */ .row--rowgap-small { row-gap: 15px; } .cards.row--rowgap-small { row-gap: 15px; } /* Вынос блока за правый отступ контейнера (`uk-container-item-padding-remove-right` * темы). Замер оригинала: до 960 компенсации нет, от 960 — ширина +40 px и * `margin-right: -40px`. Так картинка первого экрана касается правого края * экрана: у оригинала она 720 px при колонке 680. */ @media (min-width: 960px) { .bleed-right { width: calc(100% + 40px); margin-right: -40px; } } /* Ряд карточек услуг: серый фон на всю плитку + кнопки по одной нижней линии. * Замер живого сайта и оригинала (1500/1400/1280/1024/960/900/768/700/640): * у ОРИГИНАЛА фон карточки (`a.uk-panel.uk-flex-stretch`) равен высоте плитки * во всех рядах — 309/309/309, 332/332/332. У нас фон рисуется на `.linkbox`, * который тянулся только по содержимому (280/280/309 в третьем ряду), поэтому * плитки выглядели разной высоты. `height: 100%` это возвращает к оригиналу. * Кнопки у оригинала вразнобой (262/269/269, 240/217/269) — их выравнивание * сделано СВЕРХ оригинала по прямой просьбе владельца 18.08 («чтобы все было * на уровне одном и кнопки и прочее»). * ⚠️ `margin-bottom: 0` у `.prose` обязателен: в блочном потоке его 20 px * схлопывались с `margin-top: 70 px` кнопочного блока (побеждало 70), а во * флексе margin не схлопываются и складываются — без обнуления каждая плитка * становилась на 20 px выше (замерено: 309 → 329, 332 → 352). * ⚠️ Колонку картинки центрируем вручную: `align-items: stretch` на ряду * отменяет прежнее центрирование, и картинка прижималась к верху (i80 → i40). * Высоты плиток после правки не изменились ни на одной из 9 ширин. */ .cards--grid > .card > .linkbox { height: 100%; display: flex; flex-direction: column; } .cards--grid > .card > .linkbox > .row { flex: 1; align-items: stretch; } .cards--grid > .card > .linkbox > .row > .col--nomt-first { display: flex; flex-direction: column; } .cards--grid > .card > .linkbox > .row > .col--nomt-first > .prose { flex: 1 0 auto; margin-bottom: 0; } .cards--grid > .card > .linkbox > .row > *:first-child { display: flex; flex-direction: column; justify-content: center; } /* forms.css */ /* Формы. Замеры оригинала: поля 18px, рамка золотая (#a87b4f), * кнопка отправки 22px/37.4px белым по золотому, заголовок формы — h3. */ .form { } /* Заголовок и подпись формы у оригинала стоят по центру колонки, а не * прижаты влево. Перепись `_data/align390.json`: узлы H3 и P с этими * текстами встречаются на 174 страницах (87 украинских + 87 русских) и * на обеих замеренных ширинах (390 и 1440) имеют text-align: center. */ .form__head, .form__sub { text-align: center; } .form__head { margin-bottom: 10px; } .form__head h3 { margin-bottom: 10px; } .form__sub { margin-bottom: 20px; } .form__row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; } .form__row > * { flex: 1 1 200px; min-width: 0; } /* Замер оригинала (`/swiss-watches/rolex/`, 1440): поле 33–34 px высотой, * внутренний отступ 5 px, кегль 18, интерлиньяж `normal`, скругление 5 px. * Стояло `padding: 8px 12px`, `line-height: 1.4` и `border-radius: 0` — поле * выходило 43 px вместо 33 и с прямыми углами. Ни сверка содержимого, ни * геометрия секций этого не видят: поле на месте, секция той же высоты. * Поймано глазами на полосе «оригинал | копия». */ .form input[type=text], .form input[type=tel], .form select, .form textarea { width: 100%; padding: 5px; font-size: 18px; line-height: normal; color: #000; background: #fff; border: 1px solid var(--gold-btn); border-radius: 5px; appearance: none; } /* У textarea свой отступ (10 px) и высота 85 px — тоже замер. */ .form textarea { padding: 10px; min-height: 85px; resize: vertical; } .form select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3e%3cpath fill='%23a87b4f' d='M6 8 0 0h12z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } .form :focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } .form ::placeholder { color: #767676; opacity: 1; } /* ⚠️ Рамка, скругление и тень — не украшение, а замер оригинала: * `border: 2px solid rgb(168,123,79)`, `border-radius: 1px`, * `box-shadow: rgba(0,0,0,.5) 0 5px 5px -5px`, `padding: 5px 6px`. * Без рамки кнопка отправки выходила 47 px вместо 51 — на глаз почти незаметно, * но это высота КАЖДОЙ формы сайта, а форм на странице до тринадцати. */ .form__submit { width: 100%; padding: 5px 6px; font-size: 22px; line-height: 37.4px; color: #fff; background: var(--gold-btn); border: 2px solid var(--gold-btn); border-radius: 1px; box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .5); cursor: pointer; } /* ⚠️ Под курсором кнопка отправки ВЫВОРАЧИВАЕТСЯ: замер мышью на главной дал * `bg #a87b4f → #fff` и `color #fff → #a87b4f` при неизменной рамке 2px #a87b4f. * Стояло «фон темнеет» — придуманное поведение. Форма есть на каждой странице, * так что расхождение было на всех 186. */ .form__submit:hover { background: #fff; color: var(--gold-btn); } .form__submit[disabled] { opacity: .6; cursor: progress; } /* Согласие с политикой. Замер оригинала (модалка «Замовити дзвінок», 1280): * блок 330×54 — ДВЕ строки, 18px/27px, `rgb(72,72,72)`, ссылка БЕЗ * подчёркивания цветом `rgb(37,35,35)`. Стояло 12px/18px светло-серым в одну * строку с подчёркнутой ссылкой — согласие выглядело сноской, а не условием, * под которым человек подписывается. Блок есть только в форме 2156 (в 1272 и * 1267 согласия нет вовсе — проверено по `_data/forms.json`), поэтому правило * не задевает страничные формы. */ .form__consent { margin-top: 12px; font-size: 18px; line-height: 27px; color: #484848; } .form__consent a { color: #252323; text-decoration: none; } .form__consent a:hover { text-decoration: underline; } .form__label { display: block; margin-bottom: 6px; font-size: 15px; } /* Ответ обработчика. Сообщение об ошибке обязано быть видимым и не совпадать по * виду с успехом: одинаковый ответ на успех и отказ — это ровно тот случай, * когда «форма работает» проверяется глазами и проходит, а заявки не доходят. */ .form__msg { margin-top: 15px; padding: 10px 12px; font-size: 15px; display: none; } .form__msg.is-ok { display: block; background: #f0f6ee; color: #3a6a2e; border: 1px solid var(--success); } .form__msg.is-error { display: block; background: #fceeee; color: #8a2b2b; border: 1px solid var(--danger); } .form__field-error { display: block; margin-top: 4px; font-size: 13px; color: var(--danger); } .form input[aria-invalid="true"], .form textarea[aria-invalid="true"], .form select[aria-invalid="true"] { border-color: var(--danger); } /* Капча. * * ⚠️ Резерв 65 px оказался пустотой, а не местом под виджет. Замер модалки на * стенде (Turnstile отработал, токен получен): контейнер `330×65`, а внутри — * `
` высотой `0` с одним скрытым `input[name=cf-turnstile-response]`, * iframe нет вовсе. При `appearance: interaction-only` виджет НИЧЕГО не рисует, * пока проверка проходит молча, поэтому `:not(:empty)` срабатывал на скрытом * поле и держал 65 px + 15 px отступа — те самые ~95 px дыры между временем * звонка и кнопкой, на которые указал владелец. * * Место резервируется тогда, когда виджету действительно есть что показать, — * а это ровно случай появления iframe с окном проверки. Проверка сдвига кнопки * при этом сохраняется: iframe вставляется до того, как окно станет видимым. */ .form__captcha { min-height: 0; margin-bottom: 0; } .form__captcha:has(iframe) { min-height: 65px; margin-bottom: 15px; } /* honeypot: поле-приманка. Скрываем не через display:none — часть ботов его * игнорирует именно по этому признаку, — а уводим из потока. */ .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Время звонка. Замер оригинала (модалка, ширина формы 330): * подпись «Час дзвінка» — 18px/27px `rgb(72,72,72)`, отдельной строкой слева; * ниже строка со списками, прижатая ВПРАВО: «з» `select 79×34` «до» * `select 79×34`, правый край второго списка совпадает с краем формы. * У копии оба списка растягивались на всю ширину и стояли друг под другом, * а подписи не было ни одной — текст «з»/«до» в CF7 лежит голым текстовым * узлом рядом с полем, и съёмщик его не брал. */ .form__timebox { margin-bottom: 5px; } .form__timelabel { margin: 0 0 20px; font-size: 18px; line-height: 27px; color: #484848; } .form__timeline { margin: 0 0 20px; font-size: 18px; line-height: 27px; color: #484848; text-align: right; } .form__timeline select { width: 79px; display: inline-block; vertical-align: middle; } .form__pre { color: #484848; } /* оформление плитки каталога — замер оригинала (`recon/blocks.mjs`) */ .tilebox { border:1px solid rgba(0, 0, 0, 0);border-radius:4px;box-shadow:rgb(158, 158, 158) 14px 14px 18px -19px } /* блоки, светлеющие под курсором — замер оригинала (`recon/blocks.mjs`, поле `hover`) */ .lit-1 { background:rgb(247, 247, 247);padding:40px; transition: background-color .1s ease-in-out, border-color .1s ease-in-out, color .1s ease-in-out; } .lit-1:hover { background-color: rgb(242, 242, 242); } .lit-2 { background:rgb(255, 255, 255);padding:40px; transition: background-color .1s ease-in-out, border-color .1s ease-in-out, color .1s ease-in-out; } .lit-2:hover { background-color: rgb(242, 242, 242); } .lit-3 { background:rgb(255, 255, 255);padding:0px; transition: background-color .1s ease-in-out, border-color .1s ease-in-out, color .1s ease-in-out; } .lit-3:hover { background-color: rgb(242, 242, 242); }