/* ============================================================ ТЕСТОВАЯ КАРТОЧКА ТОВАРА — раскладка и типографика по stanki.ru Подключается ПОСЛЕ styles.css и только на страницах товара (`tovar-*.html`) — их собирает `stranica_tovara()` в `sobrat-stranicy.py`. На остальных страницах этот файл не нужен: Montserrat отсюда переключил бы шрифт всему сайту. Замеры референса (окно 1920, контейнер 1750): колонки 650 / 590 / 430 px, зазор 20 → 38% / 34,5% / 25% H1 занимает 2-ю и 3-ю колонки, фото — всю высоту первой H1 24px/500, вкладки 24px/600, имя товара в списке 16px/500 один шрифт на весь сайт — Montserrat, тексты 14–16px/500 ============================================================ */ /* У референса весь текст одним шрифтом. Остальной сайт набран Inter, поэтому Montserrat включается ТОЛЬКО на странице товара — через класс, который `karkas()` вешает на . Менять шрифт всему сайту ради карточки нельзя: Inter стоит в шапке, подвале и каталоге, они на этой же странице. */ body.stranica-tovar { font-family: Montserrat, Inter, system-ui, sans-serif; font-weight: 500; } body.stranica-tovar .tk p, body.stranica-tovar .tk li, body.stranica-tovar .tk-vkladki p, body.stranica-tovar .tk-vkladki li, body.stranica-tovar .tk-vkladki td { font-weight: 500; } .tk { display: grid; grid-template-columns: minmax(0, 650fr) minmax(0, 590fr) minmax(0, 430fr); /* строки задаём явно. Колонка с фото охватывает обе строки и выше их суммы; при auto-строках браузер раскидывает избыток поровну, и половина уходит в зазор под заголовком — было 51 px вместо 22. С min-content весь избыток достаётся второй строке, и зазор равен ровно row-gap. */ grid-template-rows: min-content 1fr; gap: 22px 20px; align-items: start; padding-top: 6px; } /* заголовок перекрывает вторую и третью колонки — как в референсе. Логотип бренда лежит внутри этого же блока: при перестройке на планшете вторая колонка уезжает под блок покупки, и отдельный логотип отрывался от заголовка на 450 px. Вместе они переезжают как одно целое. */ /* Заголовок опущен ниже верхней кромки фото. Раньше H1 и верх снимка стояли на одной линии (обе на 6 px) — заголовок читался приклеенным к потолку, тогда как сам станок внутри рамки начинается ниже из-за её полей и object-fit. Высоту, которую забирает этот отступ, добирает большое фото (см. .tk__foto), поэтому низ колонки с фото по-прежнему сходится с низом блока покупки. */ .tk__shapka { grid-column: 2 / 4; grid-row: 1; padding-top: 20px; } .tk__h1 { font-family: Montserrat, sans-serif; font-size: 24px; font-weight: 500; line-height: 30px; letter-spacing: 0; margin: 0 0 18px; } /* Колонку НЕ растягивать под высоту строк: пробовали `align-self: stretch` плюс `flex: 1` у кадра, чтобы низ фото сам сходился с низом блока покупки — вторая строка сетки задана как `1fr`, и распорка зациклилась, кадр вырос до 620 px, а низ колонки уехал на 60 px ниже блока покупки. Высота кадра фиксированная. */ .tk__foto { grid-column: 1; grid-row: 1 / 3; } .tk__glavnoe { grid-column: 2; grid-row: 2; } .tk__pokupka { grid-column: 3; grid-row: 2; position: sticky; top: 16px; } /* ---------- колонка 1: фотографии ---------- */ /* рамки нет — как в референсе: там у фото 0px border, прозрачный фон и радиус 6px. Поля оставляем небольшие: у нас в кадре вырезки, и без отступа станок упирается в край */ .tk__foto-bolshoe { /* 560 = прежние 540 + 20 px, на которые опущен заголовок: так низ колонки с фото остаётся на одной линии с низом блока покупки (проверено замером) */ height: 560px; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 8px; background: #fff; cursor: zoom-in; } /* кадр занимает поле целиком. Было `width: auto` от натурального размера, и снимок 450x301 висел посреди поля 620x480 — казалось, что фото уменьшилось, хотя это исходник такой. object-fit не даёт исказить пропорции */ .tk__foto-bolshoe img { width: 100%; height: 100%; object-fit: contain; } /* у части расходников фото в фиде нет вовсе — вместо битой картинки текст */ .tk__net-foto { font-size: 14px; color: var(--tekst-3); text-align: center; padding: 0 20px; } .tk__minatury { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 10px; } .tk__minatura { height: 62px; border: 1px solid var(--linia); border-radius: var(--radius-s); background: #fff; display: flex; align-items: center; justify-content: center; padding: 5px; transition: border-color var(--t); } .tk__minatura img { max-height: 100%; width: auto; object-fit: contain; } .tk__minatura:hover { border-color: var(--sin); } /* имя класса приходит из общего script.js, не из этой страницы */ .tk__minatura.tovar__minatura--aktivna { border-color: var(--sin); box-shadow: inset 0 0 0 1px var(--sin); } /* ---------- колонка 2: описание ---------- */ /* flex-wrap обязателен: логотип завода (до 190 px) и название раздела рядом дают минимальную ширину строки 302 px, а на 320 px экрану доступно 265 — без переноса вся карточка товара уезжала вбок на 17 px. */ .tk__brend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .tk__artikul { font-size: 13px; color: var(--tekst-3); margin-bottom: 20px; } /* логотип бренда грузится в админке — пропорции чужого файла заранее неизвестны, поэтому высота идёт инлайном, а ширину держим в рамках */ .tk__brend-znak--foto { display: block; width: auto; max-width: 190px; object-fit: contain; object-position: left center; } /* запасной значок: показывается сам, если логотип не загружен */ .tk__brend-znak--text { background: var(--grafit); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px; border-radius: 3px; } .tk__brend a { color: var(--sin); font-size: 14px; } .tk__brend a:hover { text-decoration: underline; } .tk__podpis { font-size: 14px; color: var(--tekst-2); } .tk__tip { display: inline-block; color: var(--sin); font-size: 14px; margin: 4px 0 20px; } .tk__tip:hover { text-decoration: underline; } .tk__kluch { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .tk__kluch li { display: flex; gap: 8px; font-size: 14px; color: var(--tekst-2); } .tk__kluch b { font-weight: 600; color: var(--tekst); } .tk__vse-hara { display: inline-block; margin-top: 16px; color: var(--sin); font-size: 14px; } .tk__vse-hara:hover { text-decoration: underline; } .tk__plyusy-zag { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linia); color: var(--sin); font-size: 15px; font-weight: 600; } .tk__plyusy { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; } .tk__plyusy li { position: relative; padding-left: 16px; font-size: 14px; color: var(--tekst-2); } .tk__plyusy li::before { content: "·"; position: absolute; left: 3px; top: -2px; font-size: 18px; color: var(--tekst-3); } /* ---------- колонка 3: покупка ---------- Главное правило блока: У ВСЕХ СТРОК ОДИН ЛЕВЫЙ КРАЙ. Было три разных: 23 px у статуса и цены, 29 у кнопок, 37 у плашки лизинга (её собственный боковой padding), а телефон и режим работы вообще по центру. Замерено через getBoundingClientRect, на глаз такое не ловится. Поэтому: --pole — единственный источник горизонтальных полей, плашка лизинга уходит в край карточки отрицательным margin и возвращает текст на общий край, а контакты переведены с центра влево. Вертикальный ритм тоже сведён к шкале 6 / 12 / 18 / 26 вместо прежних 14 / 16 / 12 / 12 / 14 / 6 «на глаз». */ .tk__pokupka { --pole: 22px; border: 1px solid var(--linia); border-radius: var(--radius); padding: var(--pole); box-shadow: 0 10px 28px rgba(21,24,29,.07); } .tk__nalichie { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--zelen); font-weight: 600; } /* отступление от референса: у них цена 24px/500, но в нашей палитре она теряется рядом с кнопкой — берём тот же кегль, но 700. tabular-nums: чтобы цены в разных карточках стояли разряд в разряд */ .tk__cena { font-family: Montserrat, sans-serif; font-size: 26px; font-weight: 700; margin-top: 12px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .tk__cena-podpis { font-size: 12px; color: var(--tekst-3); margin-top: 6px; } /* плашка во всю ширину карточки: фон идёт до краёв, а текст встаёт на общий левый край. Так она перестаёт быть «вставкой со сдвигом» */ .tk__lizing { margin: 18px calc(var(--pole) * -1) 0; padding: 12px var(--pole); background: var(--fon-tepl); font-size: 13px; line-height: 1.4; color: var(--tekst-2); } .tk__knopka { width: 100%; height: 50px; border-radius: var(--radius-s); font-size: 15px; font-weight: 600; margin-top: 12px; transition: background var(--t), border-color var(--t), color var(--t); } /* цвет берётся из токенов styles.css — один источник на обе таблицы */ .tk__knopka--glav { background: linear-gradient(135deg, var(--kn-zel-1) 0%, var(--kn-zel-2) 52%, var(--kn-zel-3) 100%); color: #fff; box-shadow: 0 6px 16px rgba(var(--kn-zel-ten), .30); } .tk__knopka--glav:hover { background: linear-gradient(135deg, var(--kn-zel-1h) 0%, var(--kn-zel-2h) 52%, var(--kn-zel-3h) 100%); box-shadow: 0 8px 22px rgba(var(--kn-zel-ten), .40); } .tk__knopka--vtor { background: #fff; border: 1px solid var(--linia); color: var(--tekst); } .tk__knopka--vtor:hover { border-color: var(--sin); color: var(--sin); } /* снимает самое частое возражение — «а сколько доставка и когда будет» */ .tk__srok { font-size: 12px; line-height: 1.45; color: var(--tekst-3); margin-top: 12px; } .tk__smotret { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--sin); } .tk__smotret:hover { color: var(--tekst); } .tk__smotret svg { flex: none; } /* контакты: отделены линией, выровнены по тому же левому краю, что и цена */ .tk__svyaz { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linia); } .tk__zvonok { display: flex; align-items: center; gap: 8px; font-family: Montserrat, sans-serif; font-size: 17px; font-weight: 700; } .tk__zvonok:hover { color: var(--sin); } .tk__zvonok svg { flex: none; } .tk__pochta { display: block; margin-top: 6px; font-size: 14px; color: var(--tekst-2); } .tk__pochta:hover { color: var(--sin); } .tk__melko { font-size: 12px; color: var(--tekst-3); margin-top: 6px; } .tk__diler { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linia); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--tekst-3); } /* ---------- вкладки ---------- */ .tk-vkladki { padding-top: 46px; padding-bottom: 20px; } .tk-vkladki__polosa { display: flex; flex-wrap: wrap; gap: 28px; border-bottom: 1px solid var(--linia); padding-bottom: 2px; } .tk-vkladka { font-family: Montserrat, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--tekst-3); padding: 0 0 14px; border-bottom: 3px solid transparent; transition: color var(--t), border-color var(--t); } .tk-vkladka:hover { color: var(--tekst-2); } .tk-vkladka.aktivna { color: var(--tekst); border-bottom-color: var(--sin); } .tk-vkladka-telo { display: none; padding-top: 26px; max-width: 1100px; } .tk-vkladka-telo.aktivna { display: block; } .tk-vkladka-telo p { margin: 0; color: var(--tekst-2); max-width: 92ch; font-size: 15px; line-height: 1.6; } .tk-tablica { width: 100%; border-collapse: collapse; font-size: 14px; max-width: 900px; } .tk-tablica td { padding: 13px 0; border-bottom: 1px solid var(--linia); } .tk-tablica td:first-child { width: 58%; color: var(--tekst-2); } .tk-tablica td:last-child { font-weight: 600; } .tk-spisok { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; max-width: 92ch; } .tk-spisok li { position: relative; padding-left: 16px; font-size: 15px; color: var(--tekst-2); } .tk-spisok li::before { content: "·"; position: absolute; left: 3px; top: -3px; font-size: 20px; color: var(--tekst-3); } /* ---------- видео ---------- */ /* min(320px, 100%) — иначе на экране уже 320 px колонка остаётся 320 px и вылезает за край */ .tk-video { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 22px; max-width: 1100px; } .tk-video__rolik { margin: 0; } .tk-video__ramka { display: block; width: 100%; padding: 0; position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; border: 1px solid var(--linia); border-radius: var(--radius); background: #000; } .tk-video__prevyu { width: 100%; height: 100%; object-fit: cover; opacity: .86; transition: opacity var(--t), transform var(--t); } .tk-video__ramka:hover .tk-video__prevyu { opacity: 1; transform: scale(1.02); } .tk-video__vremya { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.78); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 3px; } .tk-video__imya { margin-top: 11px; font-size: 14px; font-weight: 600; color: var(--tekst); line-height: 1.4; } .tk-video__pusk { position: absolute; inset: 0; margin: auto; width: 74px; height: 52px; background: none; border: 0; padding: 0; pointer-events: none; } .tk-video__pusk svg { width: 100%; height: 100%; display: block; } .tk-video__fon { fill: #1f1f1f; fill-opacity: .82; transition: fill var(--t), fill-opacity var(--t); } /* заливка кнопки «пуск» при наведении — тот же зелёный, что у кнопок действия */ .tk-video__ramka:hover .tk-video__fon { fill: var(--kn-zel-2); fill-opacity: 1; } /* после клика кадр заменён плеером — рамка больше не кликабельна */ .tk-video__ramka--idet { cursor: default; } .tk-video__ramka iframe { width: 100%; height: 100%; border: 0; display: block; } .tk-video__podpis { margin-top: 14px !important; font-size: 13px !important; color: var(--tekst-3) !important; } .tk-metka { max-width: var(--shirina); margin: 30px auto 40px; padding: 12px clamp(20px, 2.6vw, 44px); font-size: 13px; color: var(--tekst-3); border-top: 1px dashed var(--linia); padding-top: 16px; } /* ---------- адаптив ---------- */ @media (max-width: 1280px) { .tk__foto-bolshoe { height: 420px; } .tk__minatury { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 1100px) { /* три колонки не помещаются: фото слева, справа заголовок, описание и покупка */ .tk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* строк теперь три; лишнюю высоту фото отдаём описанию, а не заголовку с покупкой */ .tk { grid-template-rows: min-content min-content 1fr; } .tk__shapka { grid-column: 2; grid-row: 1; } .tk__foto { grid-column: 1; grid-row: 1 / 4; } .tk__glavnoe { grid-column: 2; grid-row: 3; } .tk__pokupka { grid-column: 2; grid-row: 2; position: static; } } @media (max-width: 760px) { /* одна колонка: фото больше не охватывает несколько строк, явные строки не нужны */ .tk { grid-template-columns: 1fr; grid-template-rows: none; } .tk__shapka, .tk__foto, .tk__glavnoe, .tk__pokupka { grid-column: 1; grid-row: auto; } .tk__h1 { font-size: 21px; line-height: 27px; } .tk__foto-bolshoe { height: 300px; padding: 16px; } /* одна колонка: фото уже не сбоку, опускать заголовок не от чего */ .tk__shapka { padding-top: 0; } .tk__minatury { grid-template-columns: repeat(5, 1fr); } .tk-vkladki__polosa { gap: 18px; } .tk-vkladka { font-size: 17px; padding-bottom: 10px; } }