/* ============================================================ MIR — блок «Команда». Партиал: template-parts/mir-team.php НИЧЕГО НЕ ИЗОБРЕТЕНО. Донор — блок команды страницы /about/: разметка — tech_content_html страницы about (стенд, ID 182), секция
, стили — assets/tech.css:54-61 и :177 (правка M9, портрет вместо буквенного аватара), адаптив — tech.css:152 и :157. Номер строки-источника стоит у каждого значения. Почему свои классы .mir-member*, а не прямое переиспользование .tp-member: 1) tech.css подключается ТОЛЬКО на тех-страницах (functions.php:337-371) — на главной его нет, и .tp-member там был бы голым
без единого стиля; 2) .tp-member уже правится под тех-страницы отдельно от темы (arenda.css:1036 добавляет ему scroll-margin-top под якорь автора статьи) — чужие правки не должны ездить по блоку главной и наоборот. Обёртка и заголовок ПЕРЕИСПОЛЬЗУЮТСЯ как есть из arenda.css (он подключён везде): .av-wrap (arenda.css:89), .av-head (:90), .av-eyebrow (:91), .av-title (:92). ⚠️ ПЕРЕМЕННЫЕ ТЕМЫ ВЛОЖЕНЫ В .av-fleet (arenda.css:82-83) и вне неё не существуют, поэтому .mir-team объявляет их у себя — та же грабля, что у mir-tiles.css. ⚠️ У tech.css И arenda.css ЕСТЬ ОДНОИМЁННЫЕ ПЕРЕМЕННЫЕ С РАЗНЫМИ ЗНАЧЕНИЯМИ (--plate: #f0f2f3 против #f5f6f7, --ink: #202020 против #1d1d1d). Положить оба набора в одну секцию нельзя — второй молча затрёт первый и заголовок/карточка разъедутся по тону. Набор tech.css живёт здесь под префиксом --tp-*. ============================================================ */ .mir-team{ /* набор 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-ac-dk:#bdf02c; --tp-ink:#1d1d1d; --tp-plate:#f5f6f7; --tp-line:#ededee; --tp-grey:#5f6368; --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-team,.mir-team *,.mir-team *::before,.mir-team *::after{box-sizing:border-box} /* arenda.css:88 */ /* ---------- сетка = .tp-team (tech.css:55) ---------- auto-fit, а не фиксированные 4 колонки: людей ПЯТЬ, и в сетке 4×N пятая карточка висела во втором ряду одна — грабля записана прямо в комментарии донора (tech.css:52-54). max-width:1240px — ширина контейнера донора .tp-wrap (tech.css:10). Без неё сетка растянулась бы на всю .av-wrap (до 1800px, arenda.css:89) и карточки стали бы вдвое шире донорских: на 1240px это ровно 5 колонок по 217px, как и задумано. */ .mir-team__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:18px;margin-top:6px; max-width:1240px;margin-inline:auto} /* ---------- карточка = .tp-member (tech.css:56) ---------- */ .mir-member{background:var(--tp-plate);border:1px solid var(--tp-line);border-radius:20px;padding:24px;text-align:start} /* ---------- портрет = .tp-member__photo (tech.css:177) ---------- Слот 72px и object-fit:cover — оттуда же вместе с причиной (на 56px лицо не читается, исходники квадратные, но обрезка не должна от этого зависеть). */ .mir-member__photo{display:block;width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:14px; background:var(--tp-plate)} /* ---------- запасной кружок с инициалами = .tp-member__ava (tech.css:57-58) ---------- Это НЕ заглушка «фото скоро»: тот же аватар донор рисовал до правки M9, пока портретов не было. Показывается, только если файла портрета нет на диске (проверка в партиале). */ .mir-member__ava{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%; background:var(--tp-ac);color:var(--tp-ink);font-weight:800;font-size:19px;letter-spacing:.02em;margin-bottom:14px} /* ---------- имя и должность = .tp-member__name/__role (tech.css:59-60) ---------- ⚠️ ЦВЕТ ДОЛЖНОСТИ ОСТАВЛЕН ДОНОРСКИМ СОЗНАТЕЛЬНО. #bdf02c на плашке #f5f6f7 — это контраст 1.24:1 (замерено, формула WCAG), то есть ниже любого порога читаемости. Так выглядит живая страница /about/ донора, принятая заказчицей, — менять её тон в новом блоке значит разъехаться с уже принятым сайтом. Значение вынесено в переменную --tp-ac-dk: решение заказчицы «сделать читаемым» стоит одну строку (--tp-ac-dk:#5f6368 даёт 6.06:1), и менять его надо ОДНОВРЕМЕННО с tech.css:8, иначе одна и та же должность будет разного цвета на /about/ и на главной. */ .mir-member__name{font-size:17px;font-weight:700;margin:0 0 2px} .mir-member__role{display:block;font-size:13.5px;font-weight:600;color:var(--tp-ac-dk);margin-bottom:10px} /* ---------- биография = .tp-member__bio (tech.css:61) ---------- */ .mir-member__bio{font-size:14.5px;line-height:1.55;color:var(--tp-bio);margin:0} /* ---------- адаптив ---------- Донор ломает команду на 980 и 680 (tech.css:152, :157), но блок стоит на ГЛАВНОЙ рядом с .av-fleet и .mir-tiles, которые ломаются на 1080 и 760 (arenda.css:203, :208). Разные точки перелома дают полосу 980…1080, где автопарк ещё в 4 колонки, а команда уже в 2 — на глаз это выглядит поломкой сетки. Поэтому точки взяты у соседей по странице, а не у донорской страницы; сами значения (2 колонки → 1) донорские. */ @media(max-width:1080px){ .mir-team{padding:70px 0} /* arenda.css:205 */ .mir-team__grid{grid-template-columns:repeat(2,1fr)} /* tech.css:152 */ } @media(max-width:760px){ .mir-team{padding:28px 0 60px} /* arenda.css:210 */ .mir-team__grid{grid-template-columns:1fr} /* tech.css:157 */ }