/* Специфичность: класс `.item_inner` продублирован намеренно. В теме уже есть
`figma-redesign.css` с правилами `.offers_list .item_inner .img` — это три
класса, и обычный `.item_inner .img` им проигрывает при любом порядке
подключения. Дубль поднимает вес до трёх классов, а грузимся мы позже.
── Карточка специалиста в списках (каталог, главная, поиск).
Эталон: `out/ref_card.png`, вырезан из узла 769:35606 в полном разрешении.
Порядок узлов в макете: бейдж и сердечко сверху, фото в разноцветном кольце,
имя, локация пилюлей с линейками по бокам, строка статистики, описание,
кнопка во всю ширину. В теме описание лежит ВЫШЕ локации и вложено вместе с
именем в общий `.texts`, поэтому одним `order` его не переставить — `.texts`
переводится в `display: contents`, и его дети становятся детьми карточки. */
.item_inner.item_inner .texts { display: contents; }
.item_inner.item_inner .name { order: 3; }
.item_inner.item_inner .location { order: 4; }
.item_inner.item_inner .reviews_stat { order: 5; }
.item_inner.item_inner .text { order: 6; }
.item_inner.item_inner .contacts_wrap { order: 7; }
/* ── Фото ────────────────────────────────────────────────────────────────
Узел 769:35633 (Card person Web): рамка карточки 380px, внутренний
auto-layout padding 16px с каждой стороны → полезная ширина 348px,
Foto внутри неё 290×290px. В браузере `width:%` у `.img` считается от
content-box родителя (`.item_inner`, а не от рамки карточки), поэтому
и сравнивать нужно с той же базой: 290/348 = 83.33%, не 290/380.
Раньше в файле стояла оценка «около 68%» (240px) — тоже неточная. */
.item_inner.item_inner .img {
position: relative;
width: 83.33%;
max-width: 290px;
height: auto;
margin: 4px auto 18px;
aspect-ratio: 1 / 1;
}
.item_inner.item_inner .img > a:not(.js-add-wishlist) {
display: block;
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
border-radius: 50%;
background:
conic-gradient(from 200deg,
#B98CE8 0deg, #7FD8F7 70deg, #3FC7C0 150deg,
rgba(255, 255, 255, 0) 190deg, rgba(255, 255, 255, 0) 250deg,
#4A90E2 300deg, #B98CE8 360deg);
}
.item_inner.item_inner .img > a:not(.js-add-wishlist) img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
border: 4px solid #fff !important;
border-radius: 50%;
box-sizing: border-box;
}
/* Звёзды, наложенные на фото, — в макете их там нет. */
.item_inner.item_inner .img .listing-stars { display: none; }
/* Сердечко со счётчиком: в макете это контурное сердце и число справа сверху. */
.item_inner.item_inner .img > a.js-add-wishlist {
position: absolute;
top: -6px;
right: -4px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #5B6D9C;
}
.item_inner.item_inner .img > a.js-add-wishlist svg.heart {
width: 17px;
height: 16px;
fill: none;
stroke: #5B6D9C;
stroke-width: 2.4;
}
/* ── Бейдж ───────────────────────────────────────────────────────────────
В макете зелёная пилюля с точкой слева, прижата к верхнему левому углу. */
.item_inner.item_inner .card-badge {
top: 14px;
left: 14px;
align-items: center;
gap: 6px;
padding: 4px 12px 4px 10px;
font-size: 12px;
line-height: 1.2;
color: #fff;
background: #0066B2;
border-radius: 20px;
}
.item_inner.item_inner .card-badge::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
}
/* ── Имя ─────────────────────────────────────────────────────────────────
В макете крупное синее имя по центру. В данных вместо имени лежит SEO-
заголовок анкеты, поэтому ограничиваем двумя строками, чтобы карточки не
разъезжались по высоте (расхождение вынесено в GAPS). */
.item_inner.item_inner .name { text-align: center; margin: 0 0 8px; }
.item_inner.item_inner .name a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 19px;
line-height: 1.25;
font-weight: 500;
color: #0066B2;
text-decoration: none;
}
/* ── Локация ─────────────────────────────────────────────────────────────
Зум-кроп эталона в полном разрешении показал не «линейки по бокам», как
казалось по уменьшенной картинке, а две горизонтальные черты: короткая
светлая НАД строкой и длинная под ней. Текст и булавка синие. */
.item_inner.item_inner .location {
position: relative;
display: block;
margin: 4px 0 0;
padding: 14px 0 12px;
text-align: center;
}
.item_inner.item_inner .location::before,
.item_inner.item_inner .location::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 1px;
}
.item_inner.item_inner .location::before { top: 0; width: 82px; background: #B6D4EC; }
.item_inner.item_inner .location::after { bottom: 0; width: 84%; background: #9CC3E5; }
.item_inner.item_inner .location a {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
padding-left: 20px;
font-size: 13px;
line-height: 1.3;
color: #0066B2;
text-decoration: none;
background: url("data:image/svg+xml;utf8,") left center / 14px 14px no-repeat;
}
/* ── Строка статистики ───────────────────────────────────────────────────
В макете: слева иконка реплики с числом, справа рейтинг цифрой и контурная
звезда, сверху тонкая синяя линия. На сайте были подчёркнутая ссылка
«6 отзывов», дубль сердечка и пять ЗАЛИТЫХ ЗЕЛЁНЫХ звёзд. */
.item_inner.item_inner .reviews_stat {
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0 0 14px;
padding: 10px 2px 0;
}
.item_inner.item_inner .reviews_stat > a.js-open-popup {
order: 1;
padding-left: 22px;
font-size: 13px;
color: #5B6D9C;
text-decoration: none;
background: url("data:image/svg+xml;utf8,") left center / 16px 16px no-repeat;
}
/* Дубль сердечка — в макете его в этой строке нет, оно только над фото. */
.item_inner.item_inner .reviews_stat > a.js-add-wishlist { display: none; }
.item_inner.item_inner .reviews_stat .listing-stars--single { order: 3; display: flex; align-items: center; gap: 4px; }
/* Число рейтинга подставляет `gw-card.js`; здесь только вид. */
.item_inner.item_inner .sp-rate { font-size: 14px; color: #5B6D9C; }
.item_inner.item_inner .sp-star { font-size: 16px; line-height: 1; color: #5B6D9C; }
/* ── Описание ────────────────────────────────────────────────────────────
В макете мелкий серо-синий текст, ограниченный по числу строк. */
.item_inner.item_inner .text {
display: block;
overflow: hidden;
margin: 0 0 16px;
font-size: 13px;
line-height: 1.5;
color: #5B6D9C;
text-align: left;
height: 117px;
min-height: 117px;
max-height: 117px;
}
/* Список из контроллера (/- , ранее вырезался strip_tags) — маркеры
в макете это дефис, а не точка, свой отступ, без стандартного списка. */
.item_inner.item_inner .text ul,
.item_inner.item_inner .text ol {
margin: 0;
padding: 0;
list-style: none;
}
.item_inner.item_inner .text li {
position: relative;
padding-left: 14px;
}
.item_inner.item_inner .text li::before {
content: "–";
position: absolute;
left: 0;
}
/* ── Низ карточки ────────────────────────────────────────────────────────
В макете внизу только одна кнопка во всю ширину со стрелкой. Иконок
WhatsApp/Instagram/Facebook в макете нет — по правилу «как в дизайне»
скрываем, разметку оставляем.
Два типа кнопки — сплошная «Перейти на сайт» и контурная «Подробнее» —
в макете не случайное чередование через nth-child (в узле 769:35606 это
просто позиция карточки в 3-колоночной сетке макета, у всех карточек
один и тот же демо-текст «Наталья Петрова», т.е. паттерн мокапа, не
данные). Реальный признак есть в контроллере: `$product['contact_site']`
уже переключает текст кнопки («Перейти на сайт» / «Подробнее о
специалисте») — используем то же поле и для стиля кнопки, шаблон
добавляет класс `btn--outline`, когда `contact_site` пуст.
Цвета сверены по узлам:
— сплошная (769:35633, button body): линейный градиент сверху вниз
#2E437B → #0066B2 (это тот самый легитимный «стоп градиента» из
палитры), белый текст;
— контурная (769:35634): белый фон, обводка 1.3px #0066B2, текст #5B6D9C. */
.item_inner.item_inner .contacts_wrap {
margin-top: auto;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 34px 34px;
gap: 8px;
min-height: 76px;
align-content: start;
justify-items: stretch;
width: 100%;
max-width: none;
align-self: stretch;
box-sizing: border-box;
}
.item_inner.item_inner .contacts_wrap > a.icon { display: none; }
.item_inner.item_inner .contacts_wrap > a.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: none;
min-width: 0;
margin-left: 0;
margin-right: 0;
justify-self: stretch;
height: 34px;
padding: 0 16px;
font-size: 14px;
color: #fff;
background: linear-gradient(180deg, #2E437B 0%, #0066B2 100%);
border: 0;
border-radius: 6px;
text-decoration: none;
box-sizing: border-box;
}
.item_inner.item_inner .contacts_wrap > a.btn:hover { background: #0066B2; }
.item_inner.item_inner .contacts_wrap > a.btn::after {
content: none;
}
.item_inner.item_inner .contacts_wrap > a.btn.btn--more::after {
content: "↗";
font-size: 14px;
line-height: 1;
}
/* Контурный вариант — «Узнать больше». */
.item_inner.item_inner .contacts_wrap > a.btn.btn--outline {
background: #fff;
color: #0066B2;
border: 1.3px solid #0066B2;
}
.item_inner.item_inner .contacts_wrap > a.btn.btn--outline:hover {
background: #eaf2fb;
color: #00538F;
}
/* ── Узкие экраны ────────────────────────────────────────────────────────
Карточка в одну колонку: фото не должно занимать пол-экрана. */
@media (max-width: 640px) {
.item_inner.item_inner .img { width: 83.33%; max-width: 220px; }
.item_inner.item_inner .name a { font-size: 18px; }
.item_inner.item_inner .text { -webkit-line-clamp: 5; }
}
/* Сердечко приходило на полупрозрачной чёрной пилюле (`rgba(0,0,0,.5)`,
скругление 50px) — в макете это просто контурное сердце с числом. */
.item_inner.item_inner .img > a.js-add-wishlist {
padding: 0;
background: none;
border-radius: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
PRODUCT PAGE HERO (slug=master-card, node 769 card chrome → desktop fold)
Cascade: this file loads AFTER gw13-pro2. gw13 re-opened avatar to 480px +
full bio on «Обо мне» (no .is-teaser clamp) → .pro_whatsapp_cta at y≈981
under a 1440×900 fold. Compact card layout: title → contacts/CTA → teaser
bio; avatar 280; muted kicker. Scoped to product pages only; mobile ≤480
untouched (gw7/gw13 own that).
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
/* ---- Shell: grid, contacts under title, avatar right 280 ---- */
body[class*="product-product"] .pro_page_top {
min-height: 0;
padding-bottom: 12px;
margin-bottom: 0;
}
body[class*="product-product"] .pro_page_top .container {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
column-gap: 32px;
align-items: start;
position: relative;
}
body[class*="product-product"] .pro_page_top .breadcrumb {
grid-column: 1 / -1;
grid-row: 1;
}
body[class*="product-product"] .pro_page_top .bottom_flex {
display: contents;
}
/* Breadcrumbs muted (beat gw13 #0066B2 14px) */
body[class*="product-product"] .pro_page_top .breadcrumb,
body[class*="product-product"] .pro_page_top .breadcrumb li,
body[class*="product-product"] .pro_page_top .breadcrumb li a {
color: #5B6D9C !important;
font-size: 13px !important;
line-height: 1.3;
font-weight: 400;
}
body[class*="product-product"] .pro_page_top .breadcrumb li + li:before,
body[class*="product-product"] .pro_page_top .breadcrumb .separator {
color: #5B6D9C !important;
}
/* Kicker: compact muted (was 28/400 #2E437B) */
body[class*="product-product"] .pro_page_top .name_before {
grid-column: 1;
grid-row: 2;
font-size: 16px;
line-height: 1.3;
font-weight: 500;
color: #5B6D9C;
margin: 0 0 8px;
max-width: 677px;
}
/* H1: 32/600 compact (was 38/400 + large top gap) */
body[class*="product-product"] .pro_page_top h1 {
grid-column: 1;
grid-row: 3;
font-size: 32px;
font-weight: 600;
line-height: 1.2;
margin: 0 0 14px;
max-width: 677px;
padding-right: 0;
color: #0066B2;
}
/* Contacts/CTA directly under title (DOM was: bio → link → contacts) */
body[class*="product-product"] .pro_page_top .address_wrap,
body[class*="product-product"] .pro_page_top .bottom_flex .address_wrap {
grid-column: 1;
grid-row: 4;
width: 100%;
max-width: 677px;
margin: 0 0 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 18px;
row-gap: 10px;
}
body[class*="product-product"] .pro_page_top .pro_contacts_row {
width: 100%;
margin: 0;
padding: 0 0 2px;
}
body[class*="product-product"] .pro_page_top .address_wrap-contacts .offer_contacts_item a {
font-size: 16px;
line-height: 1.25;
color: #0066B2;
}
body[class*="product-product"] .pro_page_top .pro_copy_btn {
font-size: 14px;
}
body[class*="product-product"] .pro_page_top .pro_whatsapp_cta {
order: 2;
margin: 0;
border-radius: 8px;
padding: 12px 28px;
min-height: 48px;
font-size: 16px;
}
/* Bio teaser ALWAYS clamped on desktop (even without .is-teaser on About) */
body[class*="product-product"] .pro_page_top .preview_text,
body[class*="product-product"] .pro_page_top:not(.is-teaser) .preview_text,
body[class*="product-product"] .pro_page_top.is-teaser .preview_text {
grid-column: 1;
grid-row: 5;
max-width: 640px;
max-height: 200px;
overflow: hidden;
font-size: 15px;
line-height: 1.45;
color: #5B6D9C;
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
/* Expanded state (if JS adds .is-expanded later) */
body[class*="product-product"] .pro_page_top.is-expanded .preview_text {
max-height: none;
-webkit-mask-image: none;
mask-image: none;
}
/* Teaser control: left-aligned under clamp; label always «Развернуть» while clamped */
body[class*="product-product"] .pro_page_top .description_link {
grid-column: 1;
grid-row: 6;
text-align: left;
max-width: 677px;
margin: 8px 0 12px;
padding-left: 0;
position: relative;
z-index: 2;
}
body[class*="product-product"] .pro_page_top .description_link a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0 !important; /* hide JS «Свернуть» text while bio is clamped */
color: #0066B2 !important;
text-decoration: none;
}
body[class*="product-product"] .pro_page_top .description_link a::before {
content: "Развернуть";
font-size: 14px;
line-height: 1.3;
}
body[class*="product-product"] .pro_page_top .description_link a::after {
content: "\25BE"; /* ▾ */
font-size: 12px;
line-height: 1;
}
body[class*="product-product"] .pro_page_top.is-expanded .description_link a::before {
content: "Свернуть";
}
body[class*="product-product"] .pro_page_top.is-expanded .description_link a::after {
content: "\25B4"; /* ▴ */
}
/* Avatar 280 (beat gw13 480) — static in right grid column.
Span only rows 2–5 so «Развернуть» (row 6) is not under the circle. */
body[class*="product-product"] .pro_page_top .img_wrap,
body[class*="product-product"] .pro_page_top .bottom_flex .img_wrap {
grid-column: 2;
grid-row: 2 / 6;
position: static !important;
top: auto !important;
right: auto !important;
width: 360px !important;
max-width: 360px;
margin: 0;
overflow: hidden;
justify-self: end;
align-self: start;
z-index: 0;
}
body[class*="product-product"] .pro_page .img_wrap .img,
body[class*="product-product"] .pro_page_top .img_wrap .img {
width: 360px !important;
height: 360px !important;
padding: 6px;
border: 2px solid #0066B2;
background: #fff;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden !important;
}
body[class*="product-product"] .pro_page .img_wrap .img img,
body[class*="product-product"] .pro_page_top .img_wrap .img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transform: none;
border-radius: 50%;
border: 0;
box-sizing: border-box;
}
/* Secondary in-content CTAs (Написать / Записаться) — unhide if present */
body[class*="product-product"] #about .description_text a.btn, body[class*="product-product"] #tab-about .description_text a.btn,
body[class*="product-product"] #about .description_text .btn , body[class*="product-product"] #tab-about .description_text .btn {
display: inline-flex !important;
align-items: center;
margin: 12px 0;
padding: 10px 18px;
border-radius: 8px;
background: #0066B2;
color: #fff !important;
text-decoration: none;
font-size: 14px;
font-weight: 500;
line-height: 1.25;
border: 0;
}
}
/* Заголовок услуги на вкладке «Услуги»: 2 строки, как Figma 745:55584. */
body[class*="product-product"] #services .item .service-title,
body[class*="product-product"] #photo_gallery .item .service-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin: 12px 0 0;
padding: 0;
font-family: 'Rubik', 'Open Sans', system-ui, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.3;
color: #0066B2;
text-align: center;
text-decoration: none;
}
body[class*="product-product"] #services .item .description,
body[class*="product-product"] #photo_gallery .item .description {
/* Кнопки WhatsApp в макете превью нет; текст вынесен в .service-title. */
display: none;
}