/* ============================================================ MIR — блок «Отзывы». Партиал: template-parts/mir-reviews.php НИЧЕГО НЕ ИЗОБРЕТЕНО, кроме метки города (см. ниже — она помечена отдельно). Донор — страница /reviews/: разметка из tech_content_html страницы reviews (стенд, ID 191), стили — assets/tech.css:86-112, адаптив — tech.css:157-161. Номер строки-источника стоит у каждого значения. Почему свои классы .mir-rvw*, а не .rvw: tech.css подключается только на тех-страницах (functions.php:337-371), на главной его нет — .rvw остался бы без стилей. Та же причина, что у mir-team.css. Обёртка и заголовок — из arenda.css (подключён везде): .av-wrap (arenda.css:89), .av-head (:90), .av-eyebrow (:91), .av-title (:92). ⚠️ Переменные темы вложены в .av-fleet (arenda.css:82-83) и вне неё не существуют. ⚠️ Одноимённые переменные tech.css и arenda.css имеют РАЗНЫЕ значения (--plate: #f0f2f3 против #f5f6f7), поэтому набор tech.css живёт под --tp-*. ============================================================ */ .mir-reviews{ /* набор arenda.css:82-83 — для .av-head/.av-title/.av-eyebrow */ --ac:#cefe46; --ink:#202020; --dark:#1d1d1d; --plate:#f0f2f3; --plate2:#e7ebec; --muted:#8b8f93; --white:#fff; /* набор tech.css:8-9 — для карточек отзывов */ --tp-ac:#cefe46; --tp-ink:#1d1d1d; --tp-black:#0e100f; --tp-plate:#f5f6f7; --tp-line:#ededee; --tp-grey:#5f6368; --tp-grey2:#8b8f93; --tp-text:#3a3f43; --tp-bio:#42474b; font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; /* arenda.css:84 */ background:#fff;color:var(--ink);padding:90px 0; /* arenda.css:85 */ -webkit-font-smoothing:antialiased; /* arenda.css:86 */ } .mir-reviews,.mir-reviews *,.mir-reviews *::before,.mir-reviews *::after{box-sizing:border-box} /* arenda.css:88 */ /* ---------- плашка среднего балла = .tp-agg (tech.css:86-94) ---------- Только видимый текст: ни itemprop, ни JSON-LD — см. шапку партиала. max-width:1240px — ширина контейнера донора .tp-wrap (tech.css:10). */ .mir-agg{display:flex;flex-wrap:wrap;align-items:center;gap:28px;background:var(--tp-black);border-radius:24px; padding:26px 30px;margin:0 auto 26px;max-width:1240px} .mir-agg__main{display:flex;flex-direction:column;gap:2px;padding-inline-end:28px;border-inline-end:1px solid #2a2c2b} .mir-agg__score{font-size:54px;font-weight:800;line-height:1;color:var(--tp-ac)} .mir-agg__lbl{font-size:14px;color:#c9cccf} .mir-agg__sources{list-style:none;display:flex;flex-wrap:wrap;gap:26px;margin:0;padding:0} .mir-agg__sources li{font-size:15px;color:#e6e8ea} .mir-agg__sources b{display:block;font-size:13px;font-weight:600;color:#9aa0a6;margin-bottom:2px} /* ---------- сетка = .tp-reviews (tech.css:97) ---------- Две колонки и потолок 1240px (tech.css:10): без потолка сетка растянулась бы на всю .av-wrap (до 1800px, arenda.css:89) и строка отзыва стала бы ~870px — вдвое длиннее донорской и заметно хуже читаемой. */ .mir-reviews__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:6px; max-width:1240px;margin-inline:auto} /* ---------- карточка = .rvw (tech.css:98-112) ---------- */ .mir-rvw{background:var(--tp-plate);border:1px solid var(--tp-line);border-radius:20px;padding:22px 24px; display:flex;flex-direction:column} .mir-rvw__head{display:flex;align-items:center;gap:13px;margin-bottom:13px} .mir-rvw__ava{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--tp-ac);color:var(--tp-ink); display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px} .mir-rvw__id{flex:1;min-width:0} .mir-rvw__name{font-size:16px;font-weight:700;margin:0} .mir-rvw__meta{font-size:12.5px;color:var(--tp-grey2)} .mir-rvw__rate{flex:0 0 auto;color:#f5b301;font-size:15px;letter-spacing:1px} .mir-rvw__text{font-size:15.5px;line-height:1.6;color:var(--tp-text);margin:0 0 14px} .mir-rvw__reply{background:#fff;border:1px solid var(--tp-line);border-inline-start:3px solid var(--tp-ac); border-radius:12px;padding:12px 16px;margin:0 0 14px} .mir-rvw__reply-by{display:block;font-size:12.5px;font-weight:700;color:var(--tp-ink);margin-bottom:4px} .mir-rvw__reply p{font-size:14px;line-height:1.5;color:var(--tp-bio);margin:0} .mir-rvw__badge{font-size:12px;font-weight:600;color:#1f9d57;background:#e7f6ee;border-radius:100px;padding:4px 11px} .mir-rvw__likes{font-size:13px;color:var(--tp-grey2)} /* ---------- подвал карточки = .rvw__foot (tech.css:110) ---------- У донора два узла и justify-content:space-between. У нас их бывает три (добавляется метка города), и space-between разложил бы их «край — центр — край»: город повис бы в середине непонятно к чему относящимся. Поэтому бейджи прижаты к началу строки, а лайки уводит в конец логический отступ margin-inline-start:auto (не margin-left: на арабской ветке left/right меняются местами — грабля RTL записана в памяти проекта). flex-wrap — чтобы на 390px три узла переносились, а не выдавливали карточку. */ .mir-rvw__foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:auto} .mir-rvw__likes{margin-inline-start:auto} /* ---------- МЕТКА ГОРОДА — единственный узел, которого у донора нет ---------- На /reviews/ города не нужно: страница одного города. На глобальной главной и на странице страны в одном списке лежат отзывы из РАЗНЫХ городов, и без метки список врёт — читатель считает все отзывы своим городом. Форма — бейдж .rvw__badge (tech.css:111): те же кегль, вес, радиус и паддинги. Тон — «нейтральный на карточке»: фон #fff и рамка var(--line) взяты у .rvw__reply (tech.css:107), текст — var(--grey) (tech.css:9). Зелёный занят подтверждением отзыва, лаймовый — акцентом; третий смысл требует третьего тона, иначе метка города читается как ещё один статус. Значок — пин из футера темы (footer.php:63, .hdr-drawer__city, стиль arenda.css:452-453), currentColor: на тёмном фоне шапки он лаймовый, здесь — серый, как текст рядом. */ .mir-rvw__city{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600; color:var(--tp-grey);background:#fff;border:1px solid var(--tp-line);border-radius:100px;padding:3px 10px} .mir-rvw__city svg{flex:0 0 auto} /* ---------- адаптив ---------- Донор ломает отзывы на 680 (tech.css:157), плашку .tp-agg — там же (:159-161). Блок стоит на ГЛАВНОЙ рядом с .av-fleet/.mir-tiles/.mir-team, которые ломаются на 1080 и 760 (arenda.css:203, :208): в полосе 680…760 у соседей уже одна колонка, а у отзывов ещё две — на глаз это выглядит поломкой сетки. Точки перелома взяты у соседей по странице, значения (1 колонка, вертикальная плашка) — донорские. */ @media(max-width:1080px){ .mir-reviews{padding:70px 0} /* arenda.css:205 */ } @media(max-width:760px){ .mir-reviews{padding:28px 0 60px} /* arenda.css:210 */ .mir-reviews__grid{grid-template-columns:1fr} /* tech.css:157 */ .mir-agg{gap:18px;padding:22px} /* tech.css:159 */ .mir-agg__main{border-inline-end:0;border-bottom:1px solid #2a2c2b;padding-inline-end:0;padding-bottom:16px;width:100%} /* tech.css:160 */ .mir-agg__sources{gap:18px} /* tech.css:161 */ }