/* * Витрина магазина. * * ⚠ Палитра снята ЗАМЕРОМ с работающей витрины texnoline.uz (getComputedStyle), * а не подобрана на глаз: плитка 222 px, паддинг 14, радиус 10, рамка 0.8 px * #E5E7EB, цена 18px/700, синяя кнопка #0D6EFD. Покупатель не должен заметить, * что магазин переехал на другой движок. * * ⚠ Это НЕ кабинет. Токены кабинета (--accent #1b6ca8) здесь не используются * намеренно: у витрины свой синий #0D6EFD, и связывать их значило бы, что * смена темы кабинета перекрашивает магазин покупателю. */ :root { --sh-bg: #f8f9fa; --sh-card: #fff; --sh-line: #e5e7eb; --sh-ink: #212529; --sh-muted: #6c757d; --sh-blue: #0d6efd; --sh-soft: #e7f1ff; --sh-ok: #1b8f4a; --sh-warn: #a01c1c; /* * Красный АКЦИИ — отдельный от красного предупреждения, и это не * вкусовщина. `--sh-warn` означает «осторожно»: им подсвечено «убрать» в * списках и сердце избранного. Скидка — противоположное чувство, и * привяжи мы её к тому же токену, первая же правка оттенка предупреждения * перекрасила бы ценники. Три оттенка вместо одного нужны потому, что * красный работает тремя способами сразу: цифрой, чипом и плашкой, и на * плашке поверх фотографии белый текст обязан читаться в обеих темах. */ --sh-sale: #c1121f; --sh-sale-soft: #fdeaec; --sh-sale-deep: #9b1c2e; /* Скругление и шрифт выбирает арендатор в «Шаблоне витрины». Здесь — умолчание на случай, когда не выбирал; выбранное подставляет строкой в партиал app/partials/shop-look.php, ниже этого файла. */ --sh-radius: 10px; --sh-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Тень под липкой шапкой. Токеном, а не числом в правиле: чёрная тень на тёмной странице не видна вовсе, и в тёмной теме её приходится сгущать. */ --sh-lift: 0 4px 14px rgba(0, 0, 0, .09); } * { box-sizing: border-box; } body.shop { margin: 0; background: var(--sh-bg); color: var(--sh-ink); font: 15px/1.5 var(--sh-font); } .shop a { color: var(--sh-blue); text-decoration: none; } .shop a:hover { text-decoration: underline; } .shop .wrap { max-width: 1440px; margin: 0 auto; padding: 0 32px; } /* ── шапка ── */ /* * ⚠ Шапка липкая — `sticky`, а не `fixed`. Fixed вынимает её из потока, и * каждой странице пришлось бы отодвигать верх ровно на высоту шапки; высота же * у неё разная — 75 пикселей на широком экране, 116 на планшете и 168 на * телефоне, где значки и поиск уезжают на свои строки. Sticky держит это место * сам, и первый экран не начинается ни под шапкой, ни пустой полосой. * * ⚠ Опорой для мега-меню шапка остаётся: `sticky` — тоже позиционирование, и * `.shcat` с `top: 100%` по-прежнему считает от неё, а не от страницы. Поменяй * здесь `sticky` на `static` — каталог уедет в левый верхний угол окна. * * ⚠ Свой слой обязателен. Без `z-index` под шапку не проезжают только те, у * кого своего слоя нет: подсказки `[data-tip]` и плашки на плитках всплывают * над ней. 50 взято с запасом — на странице выше 5 ничего не поднимается, — а * подложка каталога (39) и само меню (40) лежат ВНУТРИ шапки и меряются между * собой, а не с ней. * * ⚠ Фон обязан остаться непрозрачным и токеном: под шапкой теперь едет * страница, любая прозрачность покажет её насквозь, а зашитый #fff остался бы * белым в тёмной теме. */ .sh { background: var(--sh-card); border-bottom: 1px solid var(--sh-line); position: sticky; top: 0; z-index: 50; } /* * Тень под шапкой — только у прокрученной страницы: пока страница стоит на * месте, шапка ничего не перекрывает, и тень обещала бы слой, которого нет. * * ⚠ Кадры двигает прокрутка, а не время (`animation-timeline`). Слушать scroll * из JS ради одной тени — это обработчик на каждый пиксель прокрутки на всех * страницах магазина. * * ⚠ Всё под @supports: где прокруточных таймлайнов нет (Safari), правило * выключается целиком. Без проверки анимация досталась бы обычному таймлайну и * тень висела бы всегда — в том числе у нетронутой страницы. */ @supports (animation-timeline: scroll()) { @keyframes sh-lift { to { box-shadow: var(--sh-lift); } } .sh { animation: sh-lift linear both; animation-timeline: scroll(root block); animation-range: 0 20px; } } .sh__in { max-width: 1440px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 16px; } .sh__logo { display: block; color: var(--sh-ink); } .sh__logo:hover { text-decoration: none; } .sh__logo b { display: block; font-size: 20px; letter-spacing: .02em; } .sh__logo span { display: block; font-size: 11px; color: var(--sh-muted); } .sh__cat { display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; background: var(--sh-blue); color: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: 8px; white-space: nowrap; } /* * ⚠ Тёмный оттенок под наведением берётся токеном, а не числом. Зашитый * #0b5ed7 не знал ни про выбранный арендатором цвет (ShopTheme красит витрину * целиком, и зелёная кнопка синела под курсором), ни про тёмную тему, где * синий поднят до #4c8dff, — кнопка на наведении проваливалась в почти * чёрный. Запасное значение оставлено на случай, если `--sh-blue-dark` не * доехал: без него наведение просто перестало бы менять цвет. */ .sh__cat:hover { background: var(--sh-blue-dark, #0b5ed7); } .sh__bars { display: inline-flex; flex-direction: column; gap: 3px; } .sh__bars i { display: block; width: 14px; height: 2px; border-radius: 1px; background: #fff; } /* * Поиск. Кнопка — лупа ВНУТРИ поля, а не синий прямоугольник рядом. * * ⚠ Заливка того же цвета, что «Каталог» и «В корзину», перетягивала взгляд на * себя, хотя нажимают её редко: в поле пишут и жмут Enter. Три ярких пятна в * одной строке спорят между собой, и глазу не за что зацепиться первым. * * ⚠ Кнопка остаётся кнопкой формы, просто выглядит значком: без неё поиск с * телефона нечем отправить — экранная клавиатура не всегда показывает Enter. */ .sh__find { position: relative; flex: 1; display: flex; min-width: 220px; } .sh__find input { flex: 1; padding: 11px 44px 11px 14px; border: 1px solid var(--sh-line); border-radius: 8px; background: var(--sh-bg); font: inherit; font-size: 14px; color: var(--sh-ink); } .sh__find input:focus { outline: 2px solid var(--sh-blue); outline-offset: -1px; } .sh__find button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--sh-muted); cursor: pointer; } .sh__find button:hover { background: var(--sh-soft); color: var(--sh-blue); } /* ⚠ Промежуток маленький: значки стоят подряд и читаются как один блок, а у каждого свои 44 пикселя цели для пальца — воздух уже внутри них. */ .sh__side { display: flex; align-items: center; gap: 2px; font-size: 13px; } /* ── мега-меню каталога ── */ /* * Подложка под открытым каталогом. * * ⚠ Цвет и прозрачность взяты из макета: #17212b при 35 %. Не чёрный — * чистый чёрный поверх светлой страницы выглядит как сбой отрисовки, а не * как «страница отошла на второй план». * * ⚠ `position: fixed`, а не `absolute`: гасить надо всё окно, включая то, что * ниже сгиба. При `absolute` подложка кончалась бы вместе с шапкой. * * ⚠ Ниже меню по z-index, но выше всей страницы: она обязана перехватывать * нажатия — в этом половина её работы. */ .shcat__veil { position: fixed; inset: 0; z-index: 39; background: #17212b; opacity: .35; } .shcat__veil[hidden] { display: none; } .shcat { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; padding: 0 32px 20px; } .shcat[hidden] { display: none; } .shcat__in { max-width: 1376px; margin: 0 auto; display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .12); overflow: hidden; } .shcat__roots { padding: 12px 10px; } .shcat__root { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; color: var(--sh-ink); font-size: 14px; } .shcat__root span { flex: 1; } .shcat__root i { font-style: normal; font-size: 12px; color: var(--sh-muted); } .shcat__root:hover { background: var(--sh-bg); text-decoration: none; } .shcat__root.is-on { background: var(--sh-soft); color: var(--sh-blue); font-weight: 600; } .shcat__root.is-on i { color: var(--sh-blue); } .shcat__inner { background: var(--sh-bg); padding: 16px 20px; } .shcat__branch { display: none; } .shcat__branch.is-on { display: block; } .shcat__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .shcat__head b { font-size: 16px; } .shcat__head a { margin-left: auto; font-size: 13px; font-weight: 600; } .shcat__kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .shcat__kids a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 8px; color: var(--sh-ink); font-size: 13px; } .shcat__kids a span { flex: 1; } .shcat__kids a i { font-style: normal; font-size: 12px; color: var(--sh-muted); } .shcat__kids a:hover { border-color: var(--sh-blue); text-decoration: none; } .shcat__none { margin: 0; color: var(--sh-muted); font-size: 13px; } /* ── общее для страниц ── */ .shop main { padding: 18px 0 40px; } .shop .crumbs { font-size: 12px; color: var(--sh-muted); margin: 0 0 10px; } .shop .crumbs a { color: var(--sh-muted); } .shop h1 { margin: 0; font-size: 24px; } .shop .h1row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .shop .h1row .n { font-size: 13px; color: var(--sh-muted); } /* ── строка отбора ── */ .filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; } .filters .lbl { color: var(--sh-muted); } .filters .sep { width: 1px; height: 22px; background: var(--sh-line); } .filters .chip { padding: 5px 13px; border: 1px solid var(--sh-line); border-radius: 999px; color: var(--sh-muted); background: var(--sh-card); } .filters .chip:hover { text-decoration: none; border-color: var(--sh-blue); } .filters .chip.is-on { background: var(--sh-blue); border-color: var(--sh-blue); color: #fff; } .filters input[type="number"] { width: 110px; padding: 7px 12px; border: 1px solid var(--sh-line); border-radius: 8px; font: inherit; font-size: 13px; } .filters label.have { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .filters .reset { margin-left: auto; } /* ── сетка и плитка ── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(222px, 1fr)); gap: 16px; } .pcard { position: relative; background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: var(--sh-radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; } /* * Сердце «в избранное» — в углу картинки, проявляется при наведении. * * ⚠ У отмеченного товара сердце видно ВСЕГДА. Иначе, чтобы понять, что уже * отложено, покупателю пришлось бы водить мышью по каждой плитке подряд. * * ⚠ Считаем от плитки, а не от картинки: форма лежит рядом со ссылкой на * карточку, а не внутри неё — внутри `` форма невалидна, и браузер * выбрасывает её из ссылки сам, роняя кнопку в случайное место плитки. */ .pcard__fav { position: absolute; right: 10px; top: 10px; z-index: 2; margin: 0; opacity: 0; transition: opacity .15s ease; } .pcard:hover .pcard__fav, .pcard__fav:focus-within, .pcard__fav.is-on { opacity: 1; } .pcard__fav button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: .8px solid var(--sh-line); border-radius: 999px; background: var(--sh-card); color: var(--sh-muted); cursor: pointer; } /* ⚠ Красный берём токеном, а не своим числом: зашитый #d34b4b оставался одинаковым в обеих темах, и на тёмной плитке сердце светилось грязным пятном мимо палитры. `--sh-warn` — единственный красный витрины, тем же помечен «убрать» в списках (lists.css), и это та же семья действий. */ .pcard__fav button:hover, .pcard__fav.is-on button { border-color: var(--sh-warn); color: var(--sh-warn); } /* На телефоне наведения нет вовсе — там сердце видно всегда, иначе до него не добраться ни одним касанием. */ @media (hover: none) { .pcard__fav { opacity: 1; } } .pcard__pic { position: relative; } .pcard__pic .pic { display: block; width: 100%; aspect-ratio: 192 / 170; object-fit: contain; background: var(--sh-bg); border-radius: 8px; } .pcard__pic .pic--none { display: grid; place-items: center; color: var(--sh-muted); font-size: 13px; } /* ⚠ Рамка замешана из синего витрины, а не задана числом. Светло-голубой #b8d4ff не темнел вместе с темой и обводил плашку яркой ниткой поверх тёмной подложки. Первая строка — запасная для браузеров без color-mix: у них рамка сольётся с заливкой, но плашка останется целой. */ .pcard__badge { position: absolute; left: 0; top: 0; font-size: 11px; font-weight: 600; color: var(--sh-blue); background: var(--sh-soft); border: .8px solid var(--sh-soft); border-color: color-mix(in srgb, var(--sh-blue) 30%, var(--sh-card)); border-radius: 999px; padding: 1px 9px; } .pcard__name { font-size: 14px; font-weight: 500; color: var(--sh-ink); } .pcard__name:hover { text-decoration: none; color: var(--sh-blue); } .pcard__price { font-size: 18px; font-weight: 700; } /* ── акция на плитке ── * * ⚠ Ни одно из этих правил не меняет РАЗМЕРОВ плитки. Скидка есть у одного * товара из тридцати, и подрасти плитка на две строки — ряд каталога поехал бы * ступенькой. Поэтому «было» и срок — мелкий текст в тех же 14 px строки, а * плашка лежит поверх фотографии, ничего не занимая. */ /* Колонка в углу фотографии: плашка скидки, под ней плашки складов. */ .pcard__flags { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .pcard__sale { font-size: 11px; font-weight: 700; line-height: 1.5; color: #fff; background: var(--sh-sale-deep); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } /* ⚠ Скрытая плашка обязана СХЛОПНУТЬСЯ, а не побледнеть: в колонке она держала бы место, и плашки складов уехали бы вниз на товаре без скидки. Правило нужно поимённо — `hidden` из браузера слабее любого нашего `display`, а он тут есть у соседей по колонке. */ .pcard__sale[hidden] { display: none; } /* «Было» и выгода — одной строкой над ценой. */ .pcard__was { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 0; } .pcard__was[hidden] { display: none; } .pcard__was s { font-size: 13px; color: var(--sh-muted); text-decoration-thickness: 1px; } .pcard__cut { font-size: 11px; font-weight: 600; color: var(--sh-sale); background: var(--sh-sale-soft); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } /* ⚠ Красная цена — единственный способ отличить её от обычной, когда зачёркнутая строка уехала под обрез узкой плитки. Цвет ставится модификатором, а не через `.pcard__was + .pcard__price`: переключатель состояний меняет их по отдельности, и соседский селектор пришлось бы держать в голове ещё и в JS. */ .pcard__price--sale { color: var(--sh-sale); } .pcard__till { font-size: 12px; color: var(--sh-muted); } .pcard__till[hidden] { display: none; } .pcard__ask { font-size: 14px; font-weight: 500; color: var(--sh-muted); } .pcard__have { font-size: 12px; color: var(--sh-ok); } .pcard__have--none { color: var(--sh-muted); } .pcard__go { display: block; text-align: center; padding: 10px 0; border-radius: 8px; background: var(--sh-blue); color: #fff; font-size: 14px; font-weight: 600; } .pcard__go:hover { background: var(--sh-blue-dark, #0b5ed7); text-decoration: none; color: #fff; } /* ── карточка товара ── */ /* * Три колонки: галерея, «что это за вещь» и блок покупки. * * ⚠ Раскладка ИМЕНОВАННЫМИ областями, а не порядком колонок. Разметка идёт в * том порядке, в каком её читают вслух и без стилей — галерея, название с * характеристиками, покупка, — а на узком экране блок покупки обязан остаться * справа, рядом с ценой, а не уехать под описание третьим экраном прокрутки. * Областями это одна строка правки в медиа-запросе; перестановкой колонок * пришлось бы двигать саму разметку. * * ⚠ 476 — это 64 ленты миниатюр + 12 промежутка + 400 крупного снимка, ровно * как в макете. Число собрано из трёх, а не подобрано на глаз: поменяется * ширина ленты — здесь придётся сложить заново. */ .tovar { display: grid; grid-template-columns: 476px minmax(0, 1fr) 320px; gap: 20px; align-items: start; grid-template-areas: "pic main buy"; } .tovar__shots { grid-area: pic; display: flex; gap: 12px; } /* * ⚠ Лента миниатюр — колонкой СЛЕВА и без переноса. Ряд под снимком уводил * взгляд вниз, к описанию, мимо названия и цены; вертикальная лента остаётся в * стороне и не отнимает у снимка высоту. */ .tovar__thumbs { flex: 0 0 64px; display: flex; flex-direction: column; gap: 8px; } .tovar__thumbs img { width: 64px; height: 64px; object-fit: contain; background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: 8px; cursor: pointer; } .tovar__thumbs img.is-on { border-color: var(--sh-blue); } /* ⚠ `relative` — только ради плашки скидки, и она на СНИМКЕ, а не на всей колонке: считайся плашка от колонки, на товаре с несколькими фотографиями она села бы на первую миниатюру. Раскладку это не трогает: у потомков в потоке позиция своя. */ .tovar__pic { flex: 1; min-width: 0; position: relative; display: flex; } .tovar__big { flex: 1; min-width: 0; aspect-ratio: 400 / 368; object-fit: contain; background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: var(--sh-radius); } .tovar__big--none { display: grid; place-items: center; color: var(--sh-muted); font-size: 13px; } .tovar__main { grid-area: main; min-width: 0; } .tovar__main h1 { font-size: 24px; margin-bottom: 4px; } .tovar__buy { grid-area: buy; background: var(--sh-card); border: .8px solid var(--sh-line); border-radius: var(--sh-radius); padding: 18px; } /* Первым в блоке стоит цена, и её собственный отступ сверху здесь лишний: он отодвигал бы сумму от края карточки на полтора десятка пикселей. */ .tovar__buy > :first-child { margin-top: 0; } .tovar__sub { font-size: 12px; color: var(--sh-muted); margin: 0 0 12px; } .tovar__price { font-size: 26px; font-weight: 700; margin: 10px 0; } /* * ⚠ Своя точка перелома, отдельно от общей 900px. Три колонки требуют 476 + 320 * плюс промежутки — на 1100 пикселях средней колонке остаётся полоска, в * которой название переносится по слогам. Галерея и название встают друг под * друга, а покупка остаётся справа: это то, ради чего затевались области. */ @media (max-width: 1200px) { .tovar { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "pic buy" "main buy"; } } /* ── акция в карточке товара ── */ /* ⚠ Плашка стоит НАД снимком, а не над всей колонкой: под снимком лежат миниатюры, и угол колонки на товаре с одним фото оказался бы в пустоте. */ .tovar__sale { position: absolute; left: 12px; top: 12px; z-index: 1; font-size: 13px; font-weight: 700; line-height: 1.5; color: #fff; background: var(--sh-sale-deep); border-radius: 999px; padding: 3px 12px; } .tovar__was { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .tovar__was s { font-size: 15px; color: var(--sh-muted); text-decoration-thickness: 1px; } /* Выгода суммой — чипом, а не строкой: рядом с зачёркнутой ценой две обычные строки читаются как две цены, и человек ищет, какая из них настоящая. */ .tovar__cut { font-size: 13px; font-weight: 600; color: var(--sh-sale); background: var(--sh-sale-soft); border-radius: 999px; padding: 2px 9px; } /* ⚠ Зачёркнутая цена уже стоит над крупной, поэтому у неё свой отступ сверху, а у цены он гасится: иначе между ними встал бы двойной воздух и они перестали бы читаться одной парой «было — стало». */ .tovar__was + .tovar__price { margin-top: 2px; } .tovar__price--sale { color: var(--sh-sale); } .tovar__promo { background: var(--sh-sale-soft); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; } .tovar__promo b { display: block; font-size: 14px; color: var(--sh-sale); } .tovar__promo span { display: block; font-size: 12px; color: var(--sh-muted); margin-top: 2px; } .tovar__stock { background: var(--sh-bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; } .tovar__stock b { color: var(--sh-ok); font-size: 14px; } .tovar__stock b.none { color: var(--sh-muted); } .tovar__stock span { display: block; font-size: 12px; color: var(--sh-muted); margin-top: 2px; } .tovar__act { display: block; text-align: center; padding: 14px 0; border-radius: var(--sh-radius); background: var(--sh-blue); color: #fff; font-size: 15px; font-weight: 600; } .tovar__act:hover { background: var(--sh-blue-dark, #0b5ed7); text-decoration: none; color: #fff; } /* ⚠ Селектор с тегом (a.tovar__act) намеренно: общее правило `.shop a` красит ссылки синим и перебивает `color: #fff` строкой выше — специфичность 0,1,1 против 0,1,0. Пока этой строки не было, кнопка на карточке товара выходила синим текстом на синем фоне: покупатель видел пустую плашку вместо «Спросить о поступлении» и «Узнать цену по телефону» — то есть ровно там, где товара нет или нет цены и звонок остаётся единственным действием. «В корзину» это не задевало: она