/* ========================================================================== МИЛЯ — магазин спецодежды и медицинской одежды, Череповец Главная страница. Дизайн-токены + компоненты. ========================================================================== */ /* ---------------------------------------------------------------- 1. Токены */ :root { /* Бренд (из логотипа, #B95091). --brand — заливки: кнопки, плашки, фоны (белый текст на нём 4.57:1, AA) --brand-ink — текст и иконки брендового цвета на светлом фоне (7.1:1, AAA) Мелкий текст самим --brand не красим: на белом он сидит на границе 4.5:1. */ --brand: #B95091; --brand-ink: #8E3A6C; --brand-700: #A34179; --brand-900: #7A3059; --brand-deep: #61234A; /* тёмная заливка секций: белый текст даёт 11:1 */ --brand-tint: #F7E5EF; --brand-tint-2: #EBC8DC; /* Текст */ --ink: #2A1220; --ink-2: #5B3F4E; --muted: #7B5A6B; --on-brand: #FFFFFF; /* Поверхности */ --bg: #FBF7F9; --surface: #FFFFFF; --surface-2: #F5EDF1; --dark: #2A1220; --on-dark: #C9AEBD; --on-dark-2: #E9D3DF; /* Статусы */ --ok: var(--brand-ink); /* «успех» в фирменной гамме: зелёный тут чужой */ --danger: #C02638; /* Линии */ --line: #EFDDE7; --line-strong: #D9BBCB; /* Радиусы */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* Единая шкала теней */ --e1: 0 1px 2px rgba(42, 18, 32, .06); --e2: 0 6px 16px -8px rgba(42, 18, 32, .22); --e3: 0 20px 40px -20px rgba(42, 18, 32, .32); --e4: 0 30px 60px -20px rgba(42, 18, 32, .38); /* Ритм 4/8 */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px; /* Движение */ --t-fast: 140ms; --t: 220ms; --t-slow: 320ms; --ease: cubic-bezier(.22, .61, .36, 1); /* лёгкий перелёт — подсветка в меню «доезжает» живее, чем при обычном ease */ --ease-spring: cubic-bezier(.34, 1.32, .48, 1); /* Слои */ --z-header: 100; --z-mega: 110; --z-overlay: 200; --z-drawer: 210; --z-toast: 300; /* Шрифты. Заголовочный меняется одной строкой — подключение в нужно поменять синхронно. Варианты подобраны в _fonts.html. */ --font-display: 'Lora', Georgia, 'Times New Roman', serif; --font-text: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --container: 1280px; --gutter: 16px; /* Высота липкой шапки: на мобиле строка логотипа (64) + строка поиска (58). Используется в scroll-padding, чтобы якоря не уезжали под шапку. */ --header-h: 122px; } @media (min-width: 900px) { :root { --gutter: 32px; --header-h: 140px; } } /* ---------------------------------------------------------------- 2. Сброс */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s5)); } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.is-locked { overflow: hidden; } /* Кадр героя выходит за контейнер вправо; clip срезает возможный перехлёст по горизонтали, не создавая скролл-контейнер (в отличие от hidden, который сломал бы липкую шапку). */ body { overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--brand-ink); text-decoration: none; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--brand-900); } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* Цифры не «прыгают» в ценах и счётчиках */ .num, .price, .stat__n, .cart__count { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------- 3. Доступность */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } :focus { outline: none; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } .on-brand :focus-visible, .footer :focus-visible { outline-color: #fff; } .skip-link { position: absolute; left: var(--s4); top: -100px; z-index: var(--z-toast); padding: var(--s3) var(--s5); background: var(--brand); color: #fff; font-weight: 600; border-radius: 0 0 var(--r-md) var(--r-md); transition: top var(--t) var(--ease); } .skip-link:focus-visible { top: 0; color: #fff; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- 4. Сетка */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(40px, 6vw, 72px); } .section--tight { padding-block: clamp(28px, 4vw, 48px); } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); } .section__title { font-size: clamp(26px, 4vw, 38px); } .section__link { font-weight: 600; font-size: 15px; white-space: nowrap; } .eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); } .eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; flex: none; } /* --------------------------------------------------------------- 5. Иконки */ .icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon--sm { width: 18px; height: 18px; } .icon--lg { width: 28px; height: 28px; } /* --------------------------------------------------------------- 6. Кнопки */ .btn { --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding-inline: var(--s5); border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: 15px; text-align: center; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .btn:hover { --btn-bg: var(--brand-700); color: var(--btn-fg); } .btn:active { --btn-bg: var(--brand-900); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } .btn--lg { min-height: 54px; padding-inline: var(--s6); font-size: 16px; } .btn--sm { min-height: 40px; padding-inline: var(--s4); font-size: 14px; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); } .btn--ghost:hover { --btn-bg: var(--brand-tint); --btn-fg: var(--brand-ink); --btn-bd: var(--brand); } .btn--outline { --btn-bg: var(--surface); --btn-fg: var(--brand-ink); --btn-bd: var(--brand); } .btn--outline:hover { --btn-bg: var(--brand); --btn-fg: #fff; } .btn--light { --btn-bg: #fff; --btn-fg: var(--brand-ink); } .btn--light:hover { --btn-bg: var(--brand-tint); --btn-fg: var(--brand-900); } /* Матовое стекло на тёмной заливке: полупрозрачная белизна, размытие фона, светлая кромка сверху и тонкая обводка. Без backdrop-filter (Firefox старых версий) остаётся аккуратная полупрозрачная кнопка. */ .btn--glass { --btn-bg: rgba(255, 255, 255, .16); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px -14px rgba(0, 0, 0, .65); } .btn--glass:hover { --btn-bg: rgba(255, 255, 255, .28); --btn-bd: rgba(255, 255, 255, .75); --btn-fg: #fff; } .btn--glass:active { --btn-bg: rgba(255, 255, 255, .2); } .btn--block { width: 100%; } /* Иконочная кнопка: визуально 24px, зона нажатия 44px+ */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; transition: background var(--t-fast) var(--ease); } .icon-btn:hover { background: var(--brand-tint); } /* -------------------------------------------------------------- 7. Топ-бар */ .topbar { background: var(--dark); color: var(--on-dark-2); font-size: 13px; } .topbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 38px; } .topbar a { color: var(--on-dark-2); } .topbar a:hover { color: #fff; } .topbar__links { display: flex; align-items: center; gap: var(--s5); } .topbar__social { color: #fff; font-weight: 600; } @media (max-width: 899px) { .topbar { display: none; } } /* --------------------------------------------------------------- 8. Шапка */ .header { position: sticky; top: 0; z-index: var(--z-header); background: var(--surface); border-bottom: 1px solid var(--line); } .header__row { display: grid; grid-template-columns: auto 1fr; /* логотип + действия; поиск на мобиле уходит строкой ниже */ align-items: center; gap: var(--s3); min-height: 64px; padding-block: var(--s2); } .search.search--inline { display: none; } /* .search ниже по файлу — нужна специфичность выше */ /* Лок-ап: эмблема + начертание «МИЛЯ», вырезанное из самого логотипа. Шрифт логотипа — тяжёлый наклонный гротеск с клиновидными засечками, веб-аналога у него нет, поэтому используем оригинальные буквы картинкой. Подпись «СПЕЦОДЕЖДА» разогнана трекингом ровно по ширине вордмарка. Трекинг держим в районе .24em — это предел, после которого слово рассыпается; ширину картинки подбираем под него, а не наоборот. */ .logo { display: flex; align-items: center; gap: var(--s3); color: inherit; flex: none; } .logo__mark { width: 40px; height: 40px; object-fit: contain; } /* flex:none и max-width:none обязательны: без них глобальное img{max-width:100%} вместе с усадкой флекс-элемента ужимали вордмарк вдвое от заданной ширины. */ .logo__lockup { display: block; flex: none; } .logo__word { display: block; width: 104px; max-width: none; height: auto; margin-bottom: 5px; } .logo__tag { /* Кегль и трекинг связаны: растёт шрифт — падает разрядка, чтобы строка осталась ровно шириной вордмарка (104px здесь, 124px на десктопе). */ --tag-ls: .147em; display: block; white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: var(--tag-ls); /* letter-spacing вешает пробел и после последней буквы — снимаем его, иначе строка визуально уезжает влево относительно вордмарка */ margin-right: calc(var(--tag-ls) * -1); text-transform: uppercase; color: var(--muted); line-height: 1; } .header__actions { display: flex; align-items: center; gap: var(--s2); justify-self: end; } .header__phone { display: none; } /* Поиск */ .search { display: flex; align-items: center; gap: var(--s2); height: 46px; padding: 0 var(--s1) 0 var(--s4); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .search:focus-within { border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-tint); } .search__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 16px; /* 16px — иначе iOS зумит при фокусе */ color: var(--ink); } .search__input::placeholder { color: var(--muted); } .search__submit { display: inline-flex; align-items: center; gap: var(--s2); height: 38px; padding-inline: var(--s3); border: 0; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; transition: background var(--t-fast) var(--ease); } .search__submit:hover { background: var(--brand-700); } .search__submit span { display: none; } /* Мобильный поиск — второй строкой */ /* Мобильная строка: слева «Каталог», справа поиск. При фокусе кнопка схлопывается по ширине, и поле плавно занимает всю строку. */ .header__search-row { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s3); } .header__search-row .search { flex: 1; min-width: 0; } .msearch-cat { display: inline-flex; align-items: center; gap: var(--s2); flex: none; height: 46px; max-width: 150px; padding-inline: var(--s4); border: 0; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; transition: max-width var(--t-slow) var(--ease), padding-inline var(--t-slow) var(--ease), opacity var(--t) var(--ease); } .msearch-cat:hover { background: var(--brand-700); } .header__search-row.is-searching .msearch-cat { max-width: 0; padding-inline: 0; opacity: 0; pointer-events: none; } /* Кнопка корзины */ .cart-btn { position: relative; display: inline-flex; align-items: center; gap: var(--s2); height: 44px; padding-inline: var(--s3); border: 1.5px solid var(--brand); border-radius: var(--r-pill); background: var(--surface); color: var(--brand-ink); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .cart-btn:hover { background: var(--brand-tint); } .cart-btn__label { display: none; } .cart-btn__badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding-inline: 6px; display: none; align-items: center; justify-content: center; border: 2px solid var(--surface); border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; } .cart-btn.is-filled .cart-btn__badge { display: flex; } @media (min-width: 900px) { .header__row { grid-template-columns: auto minmax(240px, 1fr) auto; gap: var(--s5); min-height: 88px; } .header__search-row { display: none; } .search.search--inline { display: flex; } .header__phone { display: block; text-align: right; color: var(--ink); line-height: 1.2; } .header__phone strong { display: block; font-size: 17px; white-space: nowrap; } .header__phone span { font-size: 12px; color: var(--muted); } .header__actions { gap: var(--s5); } .logo__mark { width: 56px; height: 56px; } .logo__word { width: 124px; } .logo__tag { --tag-ls: .168em; font-size: 14px; } .search { height: 48px; } .search__submit { padding-inline: var(--s4); } .search__submit span { display: inline; } .search__submit .icon { display: none; } .cart-btn { height: 48px; padding-inline: var(--s4); } .cart-btn__label { display: inline; } .burger { display: none; } } /* ------------------------------------------------------------ 9. Навигация */ .nav { border-top: 1px solid var(--line); } .nav__row { display: flex; align-items: center; gap: var(--s1); height: 56px; } /* Кнопка «Каталог»: обычная пилюля, как остальные кнопки интерфейса, по центру полосы. Раньше она была приклеена к низу шапки и скруглена только снизу — из-за этого выбивалась из общей формы. */ .nav__catalog { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding-inline: var(--s4) var(--s5); margin-right: var(--s4); border: 0; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-weight: 600; font-size: 15px; transition: background var(--t-fast) var(--ease); } .nav__catalog:hover, .nav__catalog[aria-expanded="true"] { background: var(--brand-700); } .nav__catalog:active { background: var(--brand-900); } /* Бургер превращается в крестик, когда меню раскрыто */ .nav__catalog-ico { position: relative; width: 18px; height: 18px; flex: none; } .nav__catalog-ico .icon { position: absolute; inset: 0; transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease); } .nav__catalog .i-close { opacity: 0; transform: rotate(-90deg); } .nav__catalog[aria-expanded="true"] .i-open { opacity: 0; transform: rotate(90deg); } .nav__catalog[aria-expanded="true"] .i-close { opacity: 1; transform: none; } .nav__link { display: inline-flex; align-items: center; padding-inline: var(--s3); color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .nav__link:hover { color: var(--brand-ink); border-bottom-color: var(--brand-ink); } @media (max-width: 899px) { .nav { display: none; } } /* Мега-меню */ .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-mega); background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: var(--e4); transform-origin: top center; animation: megaIn .32s var(--ease) both; } .mega[hidden] { display: none; } /* Панель раскрывается сверху, колонки подтягиваются следом с небольшим разбегом — меню читается как одно движение, а не как мгновенная подмена. */ @keyframes megaIn { from { opacity: 0; transform: translateY(-12px) scale(.994); } to { opacity: 1; transform: none; } } @keyframes megaCol { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes megaPanel { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } .mega__cats { animation: megaCol .42s var(--ease) .05s both; } .mega__promo { animation: megaCol .42s var(--ease) .14s both; } .mega__panel:not([hidden]) { animation: megaPanel .34s var(--ease) both; } .nav { position: relative; } .mega__grid { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) minmax(220px, 300px); min-height: 420px; } @media (max-width: 1199px) { .mega__grid { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); } .mega__promo { display: none; } } .mega__cats { position: relative; border-right: 1px solid var(--line); padding-block: var(--s5); display: flex; flex-direction: column; gap: 2px; } /* Подсветка первого уровня — одна физическая плашка на весь список. Она не гаснет и не появляется заново, а переезжает между пунктами: JS задаёт ей --pointer-y и --pointer-h по геометрии активного пункта. Плоская заливка плюс тонкая акцентная полоска слева — без градиентов, бликов и теней. */ .mega__pointer { position: absolute; left: 0; right: -1px; /* заходит на разделитель, как вкладка */ top: 0; height: var(--pointer-h, 0px); transform: translate3d(0, var(--pointer-y, 0px), 0); border-radius: var(--r-md) 0 0 var(--r-md); background: var(--brand-tint); box-shadow: inset 2px 0 0 var(--brand); opacity: 0; pointer-events: none; } /* Класс ставится после первого замера: иначе плашка при открытии прилетала бы из нулевой позиции через весь список. */ .mega__cats.is-ready .mega__pointer { opacity: 1; transition: transform .44s var(--ease-spring), height .34s var(--ease), opacity .2s var(--ease); } .mega__cat { position: relative; z-index: 1; /* поверх переезжающей плашки */ display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; padding: var(--s3) var(--s5) var(--s3) var(--s4); border: 0; border-radius: var(--r-md) 0 0 var(--r-md); background: transparent; color: var(--ink); font-size: 15px; font-weight: 500; text-align: left; transition: color var(--t-fast) var(--ease), transform var(--t) var(--ease-spring); } .mega__cat[aria-expanded="true"] { color: var(--brand-ink); transform: translateX(4px); /* подхватывается плашкой */ } .mega__cat-name { display: flex; align-items: center; gap: var(--s3); } /* Пиктограмма раздела вместо цветного квадратика: цвет остаётся прежним — берётся из --dot, так что кодировка разделов не потерялась. */ .mega__ico { width: 21px; height: 21px; flex: none; color: var(--brand-ink); /* один цвет на все разделы */ stroke-width: 1.6; transition: transform var(--t) var(--ease-spring); } .mega__cat[aria-expanded="true"] .mega__ico { transform: scale(1.12); } .mega__count { font-size: 12px; color: var(--muted); transition: color var(--t-fast) var(--ease); } .mega__cat[aria-expanded="true"] .mega__count { color: var(--brand-ink); } .mega__panel { padding: var(--s6) var(--s7); } .mega__panel[hidden] { display: none; } .mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); } .mega__title { font-size: 26px; } .mega__sub { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px var(--s5); } /* Строка подкатегории: название слева, количество товаров справа. Между ними — растягивающаяся точечная линейка, как в оглавлении: взгляд не теряет строку, когда названия разной длины. */ .mega__sub a { display: flex; align-items: baseline; gap: var(--s2); padding: 8px 10px; margin-inline: -10px; /* фон при наведении вылезает за текст */ border-radius: var(--r-sm); color: var(--ink); font-size: 15px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .mega__sub a::after { content: ''; flex: 1; height: 1px; margin-bottom: 3px; background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1px); background-size: 5px 1px; background-repeat: repeat-x; opacity: .85; } .mega__sub-n { order: 3; /* всегда правее линейки */ flex: none; min-width: 26px; text-align: right; font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; transition: color var(--t-fast) var(--ease); } .mega__sub a:hover { background: var(--brand-tint); color: var(--brand-ink); } .mega__sub a:hover .mega__sub-n { color: var(--brand-ink); } .chips { display: flex; flex-wrap: wrap; gap: var(--s2); } .chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 500; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .chip:hover { background: var(--brand); border-color: var(--brand); color: #fff; } /* Образец цвета прямо в кнопке: «Малина» и «Ментол» словами не читаются */ .chip--color::before { content: ''; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--sw, var(--brand)); box-shadow: inset 0 0 0 1px rgba(42, 18, 32, .22); } /* Быстрые фильтры: раньше ткани, цвета и сезоны лежали одной россыпью, и «Тиси» рядом с «Малиной» ничего не объясняли. Теперь каждая строка подписана, что это за признак. */ .mega__filters { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3); } .mega__filter { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .mega__filter-l { flex: none; min-width: 72px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .mega__promo { padding: var(--s5) 0 var(--s5) var(--s5); border-left: 1px solid var(--line); } /* Правая плитка мега-меню: кадр раздела во всю площадь, подпись — на полупрозрачной белой панели снизу. Диагональный узор убран: он ложился поверх фотографии и всё портил. */ /* Подпись стоит ПОД кадром, а не поверх него: на плашке-накладке нижняя часть снимка — как раз та, где стоят полки с товаром, — пропадала. */ .mega__promo-card { position: relative; height: 100%; min-height: 340px; display: flex; flex-direction: column; padding: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); } .mega__promo-inner { flex: none; background: var(--surface); padding: var(--s4); } .mega__promo-tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); } .mega__promo-text { font-family: var(--font-display); font-size: 20px; line-height: 1.2; margin-top: var(--s1); } /* ------------------------------------------- 10. Заглушки под фотографии */ /* Пока нет реальных снимков: тонированный блок с паттерном и иконкой. При появлении фото — заменить .ph на . */ .ph { position: relative; overflow: hidden; background: var(--tint, var(--brand-tint-2)); display: grid; place-items: center; color: rgba(42, 18, 32, .34); } .ph::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .3) 0 10px, transparent 10px 22px); pointer-events: none; } .ph .icon { width: 38%; height: auto; max-width: 84px; stroke-width: 1.25; } /* ----------------------------------------------------------------- 11. Hero */ .hero { display: grid; gap: var(--s6); padding-block: clamp(32px, 5vw, 56px) clamp(24px, 3vw, 32px); } @media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: var(--s7); align-items: stretch; } } .hero__body { display: flex; flex-direction: column; justify-content: center; } .hero__title { margin-top: var(--s5); font-size: clamp(30px, 4.4vw, 58px); /* держит заголовок в три строки на всех десктопных ширинах */ line-height: 1.04; text-wrap: balance; } .hero__lead { margin-top: var(--s5); font-size: clamp(16px, 2vw, 18px); line-height: 1.55; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); } .hero__cta .btn { flex: 1 1 auto; min-width: 200px; } @media (min-width: 640px) { .hero__cta .btn { flex: 0 0 auto; } } /* На узком экране обе кнопки убираем: каталог открывается из строки поиска, а оптовый блок всё равно ниже по странице. */ @media (max-width: 639px) { .hero__cta { display: none; } } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); margin-top: clamp(32px, 4vw, 52px); padding-top: var(--s5); border-top: 1px solid var(--line); } @media (min-width: 640px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } } .stat__n { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 36px); font-weight: 600; color: var(--brand); /* крупные цифры — можно ярче */ line-height: 1; } .stat__l { font-size: 13px; color: var(--muted); margin-top: var(--s1); line-height: 1.35; } .hero__media { position: relative; } /* На телефоне кадр разворачиваем во всю ширину экрана и подтягиваем к тексту: отрицательные поля гасят внутренние отступы контейнера. */ @media (max-width: 899px) { .hero__media { margin-top: calc(var(--s5) * -1); margin-inline: calc(var(--gutter) * -1); } .hero__figure { border-radius: 0; } } /* Главный кадр квадратный и со своим светлым фоном, поэтому рамка тоже квадратная, а её заливка подобрана в тон снимку — стык не виден. */ /* Рамки у главного кадра нет: он растворяется в странице маской по всем четырём сторонам, поэтому ни скругления, ни обрезки не требуется. */ .hero__figure { aspect-ratio: 1000 / 885; background: transparent; } @media (min-width: 900px) { .hero { align-items: center; grid-template-columns: minmax(0, 1fr) minmax(300px, 1.08fr); } /* Кадр выходит вверх и влево за свою колонку и упирается в край контейнера справа. */ .hero__media { margin-top: -56px; margin-left: -56px; margin-right: calc(var(--gutter) * -1); } } .hero__badge { position: absolute; z-index: 2; /* поверх фото: у .hero__img z-index 1 */ right: var(--s4); top: var(--s4); padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--dark); color: #fff; font-size: 13px; font-weight: 600; } .hero__card { position: relative; z-index: 2; /* иначе фото модели перекрывает текст плашки */ margin: calc(var(--s5) * -1) var(--s4) 0; display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e3); } @media (min-width: 900px) { .hero__card { position: absolute; /* Кадр теперь выходит влево за свою колонку, и прежний вынос плашки наезжал на цифры статистики — держим её внутри области фото. */ left: var(--s7); bottom: calc(var(--s4) * -1); right: 0; margin: 0; padding: var(--s4) var(--s5); } } .hero__card-ico { width: 50px; height: 50px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-tint); box-shadow: inset 0 0 0 1px rgba(185, 80, 145, .3); color: var(--brand-ink); transition: background var(--t) var(--ease), color var(--t) var(--ease); } .hero__card-ico .icon { width: 24px; height: 24px; stroke-width: 1.6; } .hero__card:hover .hero__card-ico { background: var(--brand); color: #fff; } .hero__card strong { display: block; font-size: 15px; } .hero__card span:not(.hero__card-ico) { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; } /* ------------------------------------------------ 12. Полоса преимуществ */ /* Соцпруф/УТП сразу под hero — снимает базовые возражения до каталога. */ .usp { background: var(--surface); border-block: 1px solid var(--line); } .usp__list { display: grid; grid-template-columns: 1fr; gap: var(--s4); padding-block: var(--s5); } @media (min-width: 640px) { .usp__list { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } } @media (min-width: 1024px) { .usp__list { grid-template-columns: repeat(4, 1fr); } } .usp__item { display: flex; gap: var(--s3); align-items: flex-start; } /* Кружок с тонким кольцом вместо плоского розового квадрата. На наведении заливается брендовым — плоско, без градиентов и теней. */ .usp__ico { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-tint); box-shadow: inset 0 0 0 1px rgba(185, 80, 145, .3); color: var(--brand-ink); transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease-spring); } .usp__ico .icon { width: 23px; height: 23px; stroke-width: 1.6; } .usp__item:hover .usp__ico { background: var(--brand); color: #fff; transform: translateY(-2px); } .usp__item strong { display: block; font-size: 15px; } .usp__item span:not(.usp__ico) { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; } /* ------------------------------------------------------------ 13. Каталог */ .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); } @media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s3); } } @media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: var(--s3); } /* высота по содержимому: фото + текст */ } /* Плитка раздела: белая карточка, фотография сверху, текст под ней. Цветные подложки в полоску убраны — они спорили с самими снимками. Цвет раздела остался, но точкой-акцентом у количества. */ .cat-card { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--ink); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); } @media (min-width: 1024px) { .cat-card { border-radius: var(--r-xl); } } .cat-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--e3); color: var(--ink); } .cat-card:active { transform: translateY(-1px); } .cat-card--wide { grid-column: span 2; } .cat-card__top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); } .cat-card__count { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .cat-card__ico { color: rgba(42, 18, 32, .38); } /* display:block обязателен: это , а на строчных элементах max-width не действует — длинное название уезжало под фото. */ .cat-card__body { position: relative; display: block; } .cat-card__name { font-family: var(--font-display); display: block; /* это : без block описание прилипает в ту же строку */ font-size: clamp(16px, 2vw, 18px); overflow-wrap: break-word; /* страховка; переносы по слогам выключены — «оде-жда» читалось плохо */ font-weight: 600; line-height: 1.15; } .cat-card__desc { font-size: 13px; color: var(--ink-2); margin-top: 2px; } @media (max-width: 639px) { .cat-card__desc { display: none; } } /* ------------------------------------------------------------- 14. Товары */ .tabs { display: flex; gap: var(--s1); padding: 5px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); overflow-x: auto; scrollbar-width: none; max-width: 100%; } .tabs::-webkit-scrollbar { display: none; } .tab { min-height: 38px; padding-inline: var(--s4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .tab:hover { background: var(--brand-tint); color: var(--brand-ink); } .tab[aria-selected="true"] { background: var(--brand); color: #fff; } .products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } @media (min-width: 640px) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } } @media (min-width: 1024px) { .products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); } } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .card:hover { border-color: var(--line-strong); box-shadow: var(--e3); } .card[hidden] { display: none; } .card__media { position: relative; aspect-ratio: 4 / 5; } .card__badge { position: absolute; top: var(--s2); right: var(--s2); z-index: 1; padding: 5px var(--s2); border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .card__sizes { position: absolute; left: var(--s2); right: var(--s2); bottom: var(--s2); z-index: 1; display: flex; flex-wrap: wrap; gap: var(--s1); } .card__size { padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .9); font-size: 11px; font-weight: 600; color: var(--ink); } .card__body { display: flex; flex-direction: column; gap: var(--s1); flex: 1; padding: var(--s3) var(--s3) var(--s4); } @media (min-width: 640px) { .card__body { padding: var(--s4) var(--s4) var(--s5); } } .card__cat { font-size: 12px; color: var(--muted); } .card__name { font-size: 14.5px; font-weight: 600; line-height: 1.3; flex: 1; } .card__name a { color: inherit; } .card__name a:hover { color: var(--brand-ink); } /* Цена слева, кнопка справа. Кнопка забирает весь остаток строки, а если он меньше 120px — переносится вниз и растягивается на всю карточку: подписи бывают длинные («Цена по запросу», «В корзине · 2»), и зажимать её нельзя. */ .card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); } .card__foot .price { margin: 0; flex: 0 1 auto; } .price { font-family: var(--font-display); font-size: 20px; font-weight: 600; white-space: nowrap; } /* Огранка как у кнопки покупки на странице товара, только меньше: то же скругление, тот же градиент и та же тень. Покупка выглядит одинаково, в каком бы месте сайта человек её ни встретил. */ .card__add { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 120px; /* меньше — кнопка уезжает на свою строку */ min-height: 44px; padding-inline: var(--s4); border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 5px 14px -5px rgba(185, 80, 145, .7), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), filter var(--t-fast) var(--ease); } .card__add:hover { transform: translateY(-1px); filter: saturate(1.05); color: #fff; box-shadow: 0 9px 20px -6px rgba(185, 80, 145, .75), inset 0 1px 0 rgba(255, 255, 255, .3); } .card__add:active { transform: translateY(0) scale(.98); } .card__add:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; } /* «В корзине» — тот же бренд глубже, без ухода в почти чёрное */ .card__add.is-in { background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%); color: #fff; box-shadow: 0 5px 14px -5px rgba(122, 48, 89, .5), inset 0 1px 0 rgba(255, 255, 255, .2); } /* «Купить» у размерной вещи ведёт на карточку — там выбирают размер. Вид тот же, что у «В корзину»: для покупателя это одно и то же действие, разница в шагах, а не в намерении. */ .products__empty { padding: var(--s8) var(--s4); text-align: center; color: var(--muted); } /* -------------------------------------------------------------- 15. Отзывы */ .reviews__grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); } @media (min-width: 768px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } } .review { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .stars { display: flex; gap: 2px; color: #E0A32E; } .stars .icon { width: 17px; height: 17px; fill: currentColor; stroke: none; } .review p { font-size: 15px; line-height: 1.55; color: var(--ink-2); } .review__who { display: flex; align-items: center; gap: var(--s3); margin-top: auto; } .review__ava { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-ink); font-weight: 700; font-size: 15px; } .review__who strong { display: block; font-size: 14px; } .review__who span { display: block; font-size: 12.5px; color: var(--muted); } .rating-summary { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: 14px; color: var(--muted); } .rating-summary b { font-size: 18px; color: var(--ink); } /* --------------------------------------------------- 16. Блок «О магазине» */ /* Тёмная брендовая заливка: на светлом #B95091 белый текст давал всего 4.6:1, на глубоком — 11:1, и секция читается как акцентная, а не как большое пятно. */ .on-brand { position: relative; background: radial-gradient(120% 90% at 78% 8%, rgba(255, 255, 255, .16), transparent 58%), radial-gradient(90% 70% at 8% 100%, rgba(255, 255, 255, .09), transparent 60%), var(--brand-deep); color: #fff; } .on-brand a:not(.btn) { color: #fff; } /* кнопки красят себя сами */ .about { display: grid; gap: var(--s6); padding-block: clamp(44px, 6vw, 72px); } @media (min-width: 900px) { .about { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; } } .about__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .78; } .about__title { margin-top: var(--s4); font-size: clamp(26px, 4vw, 42px); text-wrap: balance; } .about__text { margin-top: var(--s5); font-size: 17px; line-height: 1.6; opacity: .92; max-width: 56ch; text-wrap: pretty; } .benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); } .benefit { padding: var(--s5); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-lg); background: rgba(255, 255, 255, .09); } .benefit__k { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1; } .benefit__t { font-weight: 600; font-size: 16px; margin-top: var(--s3); } .benefit__d { font-size: 14px; opacity: .85; margin-top: var(--s1); line-height: 1.45; } /* ---------------------------------------------------------- 17. Форма B2B */ .b2b { display: grid; gap: var(--s6); align-items: start; } @media (min-width: 900px) { .b2b { grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: var(--s8); } } .form { padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--e2); } @media (min-width: 640px) { .form { padding: var(--s6); } } .field { margin-bottom: var(--s4); } /* Имя и телефон рядом: на узком экране всё равно встают друг под друга */ .field-row { display: grid; grid-template-columns: 1fr; gap: 0 var(--s4); } @media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } } .field__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .field__req { color: var(--brand-ink); } .field__ctrl { width: 100%; min-height: 48px; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); font-size: 16px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } textarea.field__ctrl { min-height: 96px; resize: vertical; } .field__ctrl:focus-visible { outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-tint); } .field__hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; } .field__err { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--danger); margin-top: 6px; } .field.is-invalid .field__ctrl { border-color: var(--danger); } .field.is-invalid .field__err { display: flex; } .form__note { font-size: 12.5px; color: var(--muted); margin-top: var(--s3); line-height: 1.45; } .form__status { display: none; align-items: flex-start; gap: var(--s2); margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-md); /* Подтверждение тоже в фирменной гамме: зелёный на этой странице был единственным чужим цветом и выбивался. */ background: var(--brand-tint); color: var(--brand-ink); font-size: 14px; font-weight: 500; } .form__status.is-visible { display: flex; } .b2b__list { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s5); } .b2b__li { display: flex; gap: var(--s3); align-items: flex-start; font-size: 15.5px; } .b2b__li .icon { color: var(--brand-ink); margin-top: 3px; } /* -------------------------------------------------------------- 18. Футер */ .footer { background: var(--dark); color: var(--on-dark); margin-top: auto; } .footer a { color: var(--on-dark); } .footer a:hover { color: #fff; } .footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--s6); padding-block: clamp(36px, 5vw, 56px) var(--s6); } @media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s7); } } /* Тот же лок-ап, что в шапке, но выбеленный: brightness(0) гасит цвет в чёрный, invert(1) поднимает в белый — альфа при этом сохраняется, поэтому отдельный светлый файл логотипа не нужен. */ .footer__brand { display: flex; align-items: center; gap: var(--s3); } .footer__mark { width: 46px; height: 46px; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; } .footer__word { width: 124px; height: auto; filter: brightness(0) invert(1); } .footer__about { font-size: 14px; line-height: 1.55; margin-top: var(--s4); max-width: 40ch; } .footer__phone { display: inline-block; margin-top: var(--s5); color: #fff; font-weight: 700; font-size: 18px; } .footer__addr { font-size: 14px; margin-top: var(--s1); } .footer__h { color: #fff; font-weight: 600; margin-bottom: var(--s3); } .footer__list { display: flex; flex-direction: column; gap: 9px; font-size: 14px; } /* Семь разделов одной колонкой вытягивали футер — раскладываем в две */ .footer__list--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px var(--s4); } .footer__bar { border-top: 1px solid rgba(255, 255, 255, .12); } .footer__bar-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); padding-block: var(--s4); font-size: 13px; } /* ----------------------------------------- 19. Оверлей, дровер, мобменю */ .overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(42, 18, 32, .55); opacity: 0; transition: opacity var(--t) var(--ease); } .overlay[hidden] { display: none; } .overlay.is-open { opacity: 1; } .drawer { position: fixed; top: 0; bottom: 0; right: 0; z-index: var(--z-drawer); width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--e4); transform: translateX(100%); transition: transform var(--t-slow) var(--ease); padding-bottom: env(safe-area-inset-bottom); } .drawer--left { right: auto; left: 0; transform: translateX(-100%); width: min(360px, 90vw); } .drawer[hidden] { display: none; } .drawer.is-open { transform: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s4) var(--s4) var(--s5); border-bottom: 1px solid var(--line); flex: none; } .drawer__title { font-size: 20px; } .drawer__body { flex: 1; overflow-y: auto; padding: var(--s4) var(--s5); overscroll-behavior: contain; } .drawer__foot { flex: none; padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--line); background: var(--surface); } /* Корзина */ .cart-empty { text-align: center; padding-block: var(--s8); color: var(--muted); } .cart-empty .icon { margin: 0 auto var(--s4); color: var(--line-strong); width: 48px; height: 48px; } .cart-list { display: flex; flex-direction: column; gap: var(--s4); } .cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s3); align-items: start; } .cart-item__ph { aspect-ratio: 4/5; border-radius: var(--r-sm); } .cart-item__name { font-size: 14px; font-weight: 600; line-height: 1.3; } .cart-item__price { font-size: 13px; color: var(--muted); margin-top: 2px; } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--s2); } .qty button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--brand-ink); transition: background var(--t-fast) var(--ease); } .qty button:hover { background: var(--brand-tint); } .qty output { min-width: 30px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .cart-item__sum { font-weight: 600; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; } .cart-item__del { display: block; margin-top: var(--s2); border: 0; background: none; padding: 4px 0; font-size: 12.5px; color: var(--muted); text-decoration: underline; } .cart-item__del:hover { color: var(--danger); } .cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s4); font-size: 15px; } .cart-total b { font-family: var(--font-display); font-size: 26px; font-variant-numeric: tabular-nums; } /* Мобильное меню */ /* Раздел — карточка с рамкой, а не строка в плоском списке: на телефоне так понятнее, где заканчивается один пункт и начинается другой. */ .mmenu__group { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; margin-bottom: var(--s2); transition: border-color var(--t) var(--ease); } .mmenu__group:has(.mmenu__toggle[aria-expanded=true]) { border-color: var(--line-strong); } .mmenu__toggle { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s3) var(--s4); border: 0; background: none; font-size: 15.5px; font-weight: 600; text-align: left; color: var(--ink); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .mmenu__toggle[aria-expanded=true] { background: var(--brand-tint); color: var(--brand-ink); } .mmenu__ico { width: 22px; height: 22px; flex: none; color: var(--brand-ink); stroke-width: 1.6; } .mmenu__name { flex: 1; min-width: 0; } .mmenu__count { flex: none; font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; } .mmenu__toggle[aria-expanded=true] .mmenu__count { color: var(--brand-ink); } .mmenu__toggle .icon--chev { transition: transform var(--t) var(--ease); color: var(--muted); } .mmenu__toggle[aria-expanded="true"] .icon--chev { transform: rotate(180deg); } .mmenu__panel { padding: var(--s2) var(--s4) var(--s3); background: var(--bg); } .mmenu__panel[hidden] { display: none; } .mmenu__panel a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; padding: var(--s2) 0 var(--s2) calc(22px + var(--s3)); /* вровень с названием раздела */ color: var(--ink-2); font-size: 15px; border-bottom: 1px solid var(--line); } .mmenu__panel a:last-child { border-bottom: 0; } .mmenu__panel a:hover { color: var(--brand-ink); } .mmenu__n { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .mmenu__link { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding-inline: var(--s4); margin-inline: calc(var(--s4) * -1); font-size: 15.5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .mmenu__link:last-of-type { border-bottom: 0; } .mmenu__link:hover { background: var(--brand-tint); color: var(--brand-ink); } .mmenu__link::after { content: ; width: 7px; height: 7px; flex: none; border-right: 2px solid var(--line-strong); border-top: 2px solid var(--line-strong); transform: rotate(45deg); } .mmenu__contacts { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); } .mmenu__contacts a { display: block; font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: var(--s1); } /* ---------------------------------------------------------------- 20. Тост */ .toast { position: fixed; left: 50%; bottom: calc(var(--s5) + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--s2); max-width: calc(100vw - var(--s6)); padding: var(--s3) var(--s5); border-radius: var(--r-pill); background: var(--dark); color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--e4); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .toast .icon { color: #7FD8A6; } /* ========================================================================== Фотографии каталога ВНИМАНИЕ: снимки временные, взяты со стороннего сайта только чтобы показать заказчику готовый вид. Заменить своей съёмкой до запуска. ========================================================================== */ /* Карточка товара: студийное фото на белом, целиком в кадре. object-fit: cover обрезал бы модели голову и обувь, поэтому contain. */ /* У снимков вырезан фон, поэтому подложка карточки видна насквозь и шва между фото и карточкой нет. Тон чуть глубже страницы — чтобы светлые вещи не растворялись. */ /* Студийная подложка: сверху почти белый, книзу заметно серее. Вещь получает опору, а карточка перестаёт выглядеть плоской. */ .card__media--photo { background: linear-gradient(180deg, #FDFDFE 0%, #F8F6FA 55%, #F0ECF3 100%); } .card__media--photo img { width: 100%; height: 100%; object-fit: contain; padding: 6%; } .card:hover .card__media--photo img { transform: scale(1.03); } .card__media--photo img { transition: transform var(--t-slow) var(--ease); } /* Ярлык размеров лежал на белом полупрозрачном фоне и на белом фото становился невидим — переводим на тёмную подложку. */ .card__media--photo .card__size { background: rgba(42, 18, 32, .07); color: var(--ink-2); } /* Фотография плитки: во всю ширину карточки, пропорция задана явно, поэтому карточка растёт по содержимому и не зависит от высоты строки. */ .cat-card__img { order: -1; /* Пропорция задаёт базовую высоту, но кадру разрешено растянуться: в ряду сетки карточки одной высоты, и без роста под короткими оставалась бы пустая белая полоса. */ flex: 1 1 auto; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; background: var(--surface-2); pointer-events: none; /* Низ кадра растворяем в белом фоне карточки: снимок мягко перетекает в текстовый блок, вместо резкой линии обреза. Осветление, не затемнение. */ -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%); transition: transform var(--t-slow) var(--ease); } .cat-card--wide .cat-card__img { aspect-ratio: 18 / 5; } /* держит высоту ряда наравне с обычными плитками */ /* На мобильном плитка во всю ширину, и при 3:1 кадр вырождается в полоску */ @media (max-width: 639px) { .cat-card--wide .cat-card__img { aspect-ratio: 2 / 1; } } /* широкая плитка задаёт высоту ряда — держим её низкой */ /* У обуви и СИЗ предметы стоят внизу кадра, сверху — пустая стена */ .cat-card__img--bottom { object-position: center bottom; } /* А в медицинских и рабочей вещи висят на штанге у верхнего края, и при обрезке по центру она срезалась — опускаем кадр. */ .cat-card__img--top { object-position: center 20%; } .cat-card:hover .cat-card__img { transform: scale(1.04); } .cat-card__top { display: flex; align-items: center; justify-content: flex-start; /* перебиваем старое space-between */ gap: var(--s2); padding: var(--s3) var(--s4) 0; } .cat-card__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dot, var(--brand)); } .cat-card__body { padding: 2px var(--s4) var(--s3); display: block; } /* Герой */ .hero__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; /* Два градиента, пересечённые между собой, дают мягкий край сразу с четырёх сторон: по одному линейному на горизонталь и вертикаль. */ /* Растворяем только верх и низ: по бокам снимок и так доходит до краёв, боковая маска лишь съедала полезную часть кадра. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 92%, transparent 100%); } /* На десктопе справа кадр упирается в край контейнера — там мягкий переход нужен, чтобы обрыв не читался. Слева его нет: фото начинается сразу за текстом, и растворение съедало бы полезную часть кадра. Правило должно стоять ПОСЛЕ базового: у них одинаковая специфичность. */ @media (min-width: 900px) { /* Справа кадр упирается в край контейнера — там мягкий переход нужен, чтобы обрыв не читался. Слева его нет: фото начинается сразу за текстом. */ .hero__img { -webkit-mask-image: linear-gradient(to right, #000 0, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } } /* Промо в мега-меню */ .mega__promo-img { flex: 1 1 auto; width: 100%; min-height: 0; object-fit: cover; object-position: center; } /* ========================================================================== 19. Каталог: страницы разделов, подкатегорий и карточка товара ========================================================================== */ /* Хлебные крошки. Узкой строкой поверх контента, со скроллом на телефоне: у товаров пять уровней, в одну строку они не влезают. */ .crumbs { display: flex; align-items: center; gap: 6px; max-width: var(--container); margin: 0 auto; padding: var(--s3) var(--gutter) 0; overflow-x: auto; scrollbar-width: none; font-size: 13px; color: var(--muted); white-space: nowrap; } .crumbs::-webkit-scrollbar { display: none; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--brand-ink); } .crumbs .icon { width: 14px; height: 14px; opacity: .5; flex: none; } .crumbs [aria-current] { color: var(--ink-2); } /* На телефоне цепочка из пяти уровней в строку не влезает: она уезжала в свою горизонтальную прокрутку и обрывалась у правого края. Переносим по строкам, а наименование товара — оно длинное и дублирует заголовок ниже — прижимаем к одной строке с многоточием. */ @media (max-width: 639px) { .crumbs { flex-wrap: wrap; row-gap: 2px; overflow: visible; white-space: normal; } .crumbs [aria-current] { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } /* Заголовок идёт сразу за крошками. У .section сверху 40–72px, и между строкой «вы здесь» и h1 зияла пустая полоса — на первой секции её гасим. */ .crumbs + .section, .crumbs + .container.section { padding-top: var(--s4); } @media (min-width: 900px) { .crumbs + .section, .crumbs + .container.section { padding-top: var(--s5); } } .cat-head { margin-bottom: var(--s4); } .cat-head__lead { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; } /* Плитки разделов на /katalog/ — без фотографий: список должен читаться как оглавление, а не как вторая витрина. */ .sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); } .sec-card { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); } .sec-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--e2); color: var(--ink); } .sec-card__ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-md); background: var(--brand-tint); color: var(--brand-ink); } .sec-card__b { min-width: 0; flex: 1 1 auto; } .sec-card__n { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.2; } .sec-card__d { display: block; margin-top: 3px; overflow: hidden; color: var(--ink-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .sec-card__c { flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } /* Подкатегории чипами. Переносим по строкам, а не прячем в горизонтальную прокрутку: отдельная полоса со своим скроллом внутри страницы читается как чужеродный блок, и половина разделов остаётся не видна. */ .subnav { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); } .subnav__i { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: 14px; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .subnav__i:hover { border-color: var(--brand); color: var(--brand-ink); } .subnav__i.is-current { border-color: transparent; background: var(--brand); color: #fff; } .subnav__n { color: inherit; opacity: .6; font-size: 12px; font-variant-numeric: tabular-nums; } /* Сетка каталога: карточка ниже, чем на главной — там витрина, тут список */ .products--catalog { align-items: stretch; } .products--catalog .card__media { aspect-ratio: 3 / 4; } .card__media--plain { display: block; background: #fff; } .card__media--plain img { width: 100%; height: 100%; object-fit: contain; padding: 5%; transition: transform var(--t-slow) var(--ease); } .card:hover .card__media--plain img { transform: scale(1.03); } .card__noph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(180deg, #FBFAFC 0%, #F2EEF5 100%); color: rgba(42, 18, 32, .22); } .card__noph .icon { width: 42px; height: 42px; } .card__name a { color: inherit; } .card__name a:hover { color: var(--brand-ink); } .empty { padding: var(--s6) 0; color: var(--muted); text-align: center; } /* Постраничная разбивка */ .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: var(--s6); } .pager__n, .pager__nav { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; } .pager__n:hover, .pager__nav:hover { border-color: var(--brand); color: var(--brand-ink); } .pager__n.is-current { border-color: transparent; background: var(--brand); color: #fff; font-weight: 600; } .pager__gap { padding: 0 4px; color: var(--muted); } /* ---------------------------------------------------- карточка товара --- */ .pdp { display: grid; gap: var(--s5); padding-top: var(--s4); padding-bottom: var(--s6); } @media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s7); align-items: start; padding-top: var(--s5); } } .pdp__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden; } .pdp__img { width: 100%; height: 100%; object-fit: contain; padding: 4%; } .pdp__noph { display: flex; flex-direction: column; align-items: center; gap: var(--s2); color: var(--muted); font-size: 14px; } .pdp__noph .icon { width: 56px; height: 56px; opacity: .35; } .pdp__name { margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 30px); font-weight: 600; line-height: 1.18; } .pdp__price { margin: var(--s3) 0 0; font-size: clamp(26px, 4vw, 32px); font-weight: 700; letter-spacing: -.01em; } .pdp__buy { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); } .pdp__meta { margin-top: var(--s5); border-top: 1px solid var(--line); } .pdp__row { display: flex; flex-wrap: wrap; gap: 4px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: 14px; } .pdp__k { flex: 0 0 170px; color: var(--muted); } .pdp__v { flex: 1 1 200px; } .pdp__sizes { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 200px; } .pdp__size { padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); font-size: 13px; font-variant-numeric: tabular-nums; } .pdp__note { margin-top: var(--s3); color: var(--muted); font-size: 13px; } .pdp__desc { padding-bottom: var(--s6); } .pdp__desc h2 { margin: 0 0 var(--s2); font-family: var(--font-display); font-size: 20px; font-weight: 600; } .pdp__desc p { max-width: 70ch; margin: 0; color: var(--ink-2); line-height: 1.65; } /* ========================================================================== 20. Наличие, покупка, поиск-подсказки, оформление заказа ========================================================================== */ /* Наличие. В выгрузке 1С есть только то, что лежит на складе, поэтому «нет в наличии» не бывает — но остатки маленькие, и «осталась 1 шт.» это честная и сильная подсказка. */ .stock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1.2; /* Спокойный тон, а не зелёный: плашка стоит на каждой из полутора тысяч карточек, и чужой цвет рябил бы по всей сетке. Точка — в цвет бренда. */ color: var(--ink-2); } .stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } .stock--low::before { background: currentColor; } .stock--low { color: #C0392B; } /* Позиция есть в каталоге, но предложения к ней в выгрузке нет: ни цены, ни остатка. Приглушаем — это не «в наличии» и не тревога. */ .stock--soon { color: var(--muted); } .stock--soon::before { background: currentColor; opacity: .55; } .card__stock { margin: 0 0 4px; } .pdp__stock { margin: var(--s3) 0 0; } .topbar__where { display: inline-flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .topbar__addr { display: inline-flex; align-items: center; gap: 5px; color: inherit; } .topbar__addr:hover { color: #fff; text-decoration: underline; } .topbar__addr .icon { width: 14px; height: 14px; opacity: .75; } @media (max-width: 639px) { .topbar__hours { display: none; } } /* ------------------------------------------------- покупка на карточке --- */ .pdp__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); } /* Стоит вплотную к кнопке покупки, поэтому повторяет её форму и светлую подложку чипов: три элемента в ряд читаются как одна группа. */ .qty-pick { display: inline-flex; align-items: center; height: 56px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #fff 0%, #FBF9FC 100%); box-shadow: 0 1px 2px rgba(42, 18, 32, .06); } .qty-pick button { width: 46px; height: 100%; border: 0; background: transparent; color: var(--ink-2); border-radius: inherit; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .qty-pick button:hover:not(:disabled) { background: var(--brand-tint); color: var(--brand-ink); } .qty-pick button:disabled { opacity: .35; } .qty-pick output { min-width: 34px; text-align: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Главная кнопка страницы — в том же языке, что и выбранный размер над ней: такая же двухцветная заливка, блик сверху и мягкая тень. Разница только в размере, поэтому выбор размера и покупка читаются одним движением. */ .btn--buy { flex: 1 1 240px; min-height: 56px; padding-inline: var(--s6); border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 6px 16px -5px rgba(185, 80, 145, .7), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), filter var(--t-fast) var(--ease); } .btn--buy:hover { transform: translateY(-1px); filter: saturate(1.05); box-shadow: 0 10px 22px -6px rgba(185, 80, 145, .75), inset 0 1px 0 rgba(255, 255, 255, .3); } .btn--buy:active { transform: translateY(0) scale(.99); box-shadow: 0 4px 10px -5px rgba(185, 80, 145, .6), inset 0 1px 0 rgba(255, 255, 255, .2); } .btn--buy:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; } .btn--buy .icon { width: 19px; height: 19px; } /* «В корзине» — не другой цвет, а тот же бренд глубже: состояние читается, а страница остаётся в одной гамме. Не уходим в #61234A: с ним кнопка после добавления выглядела тяжелее, чем до него. */ .btn--buy.is-in { background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%); box-shadow: 0 6px 16px -5px rgba(122, 48, 89, .5), inset 0 1px 0 rgba(255, 255, 255, .2); } /* На странице товара кнопка несёт и .card__add, и .btn--buy. Правила наведения у .card__add светлые — без этой строки белый текст оказывался на белом фоне. */ .btn--buy:hover, .btn--buy.is-in:hover, .btn--buy:focus-visible { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; } .btn--buy.is-in:hover { background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%); } /* Летящая миниатюра: показывает, куда уехал товар. */ .fly { position: fixed; z-index: 90; border-radius: var(--r-sm); object-fit: contain; background: #fff; box-shadow: var(--e3); pointer-events: none; } @keyframes cartPop { 0% { transform: translateY(0) scale(1); } 28% { transform: translateY(-10px) scale(1.09); } 55% { transform: translateY(2px) scale(.97); } 78% { transform: translateY(-3px) scale(1.02); } 100% { transform: translateY(0) scale(1); } } .cart-btn.is-pop { animation: cartPop .62s var(--ease-spring); } @keyframes badgePop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } } .cart-btn.is-pop .cart-btn__badge { animation: badgePop .5s var(--ease-spring); } @media (prefers-reduced-motion: reduce) { .cart-btn.is-pop, .cart-btn.is-pop .cart-btn__badge { animation: none; } } /* --------------------------------------------------- подсказки поиска --- */ .search { position: relative; } .suggest { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 460px); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e3); } .suggest[hidden] { display: none; } .suggest__i { display: flex; align-items: center; gap: var(--s3); padding: 7px 8px; border-radius: var(--r-sm); color: var(--ink); } .suggest__i:hover, .suggest__i.is-on { background: var(--brand-tint); color: var(--ink); } .suggest__ph { width: 44px; height: 52px; flex: none; object-fit: contain; border-radius: 4px; background: #fff; } .suggest__b { min-width: 0; flex: 1 1 auto; } .suggest__n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.3; } .suggest__c { color: var(--muted); font-size: 11px; } .suggest__p { flex: none; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .suggest__all { display: block; padding: 9px 8px; border-top: 1px solid var(--line); margin-top: 4px; color: var(--brand-ink); font-size: 13px; font-weight: 600; text-align: center; } .suggest__empty { padding: var(--s4); color: var(--muted); font-size: 13px; text-align: center; } /* ------------------------------------------------------ оформление ------ */ .checkout { display: grid; gap: var(--s5); padding-bottom: var(--s7); } @media (min-width: 900px) { .checkout { grid-template-columns: minmax(0, 1fr) minmax(330px, 400px); gap: var(--s7); align-items: start; } } .co-list { display: grid; gap: var(--s3); } .co-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .co-row__ph { width: 72px; height: 88px; object-fit: contain; background: #fff; border-radius: 4px; } .co-row__n { font-size: 14px; line-height: 1.35; } .co-row__n a { color: inherit; } .co-row__n a:hover { color: var(--brand-ink); } .co-row__u { margin: 3px 0 0; color: var(--muted); font-size: 12px; } .co-row__right { display: grid; justify-items: end; gap: 6px; } .co-row__sum { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .co-row__del { border: 0; background: none; color: var(--muted); font-size: 12px; padding: 0; } .co-row__del:hover { color: #C0392B; } @media (max-width: 479px) { .co-row { grid-template-columns: 56px minmax(0, 1fr); } .co-row__ph { width: 56px; height: 70px; } .co-row__right { grid-column: 1 / -1; justify-items: stretch; grid-auto-flow: column; align-items: center; } } .co-side { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } @media (min-width: 900px) { .co-side { position: sticky; top: calc(var(--header-h) + 12px); } } .co-side__row { display: flex; justify-content: space-between; gap: var(--s3); padding: 5px 0; font-size: 14px; } .co-side__row b { font-variant-numeric: tabular-nums; } .co-side__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 15px; } .co-side__total b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Форма лежала прямо на фоне страницы, и поля были залиты тем же цветом — блок с данными покупателя терялся. Собираем его в белую карточку с шагами: видно, что заполнять, в каком порядке и сколько осталось. */ .co-h { margin: 0 0 var(--s3); font-family: var(--font-display); font-size: 18px; font-weight: 600; } .co-form { margin-top: var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 1px 2px rgba(42, 18, 32, .05), 0 12px 28px -22px rgba(42, 18, 32, .5); overflow: hidden; } .co-block { display: grid; gap: var(--s4); padding: var(--s5); border-bottom: 1px solid var(--line); } .co-block--last { border-bottom: 0; background: var(--bg); } @media (min-width: 640px) { .co-block { padding: var(--s5) var(--s6); } } .co-block__t { display: flex; align-items: center; gap: var(--s3); margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; } /* Номер шага: заполнение перестаёт быть простынёй полей */ .co-step { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 700; } .co-block__note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .co-form label { display: block; } .co-form .lbl { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; } .co-form .req { color: var(--brand); font-style: normal; } .co-form input[type="text"], .co-form input[type="tel"], .co-form input[type="email"], .co-form textarea { width: 100%; min-height: 50px; padding: 12px var(--s4); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; /* меньше 16px — iOS зумит страницу на фокусе */ transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .co-block--last input[type="text"], .co-block--last textarea { background: var(--surface); } .co-form input::placeholder, .co-form textarea::placeholder { color: #B39BA9; } .co-form input:hover, .co-form textarea:hover { border-color: var(--brand); } .co-form textarea { min-height: 90px; resize: vertical; } .co-form input:focus-visible, .co-form textarea:focus-visible { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(185, 80, 145, .18); } .co-form .hint { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; } .co-form .is-invalid input, .co-form .is-invalid textarea { border-color: #C0392B; } .co-form .err { display: none; margin: 5px 0 0; color: #C0392B; font-size: 12px; } .co-form .is-invalid .err { display: block; } .co-row2 { display: grid; gap: var(--s4); } @media (min-width: 560px) { .co-row2 { grid-template-columns: 1fr 1fr; } } /* Реквизиты организации: свой отступ между полями, раньше он был инлайновым */ #coOrg, #coCdek { display: grid; gap: var(--s4); } /* Способ доставки: две крупные карточки вместо радиокнопок — по ним понятно, что выбираешь, и попасть пальцем легко. */ .ship { display: grid; gap: var(--s3); } @media (min-width: 560px) { .ship { grid-template-columns: 1fr 1fr; } } .ship__opt { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4) var(--s3) var(--s3); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); text-align: left; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .ship__opt:hover { border-color: var(--brand); } .ship__opt.is-active { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 6px 16px -10px rgba(185, 80, 145, .8); } .ship__mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); color: var(--brand-ink); } .ship__mark .icon { width: 20px; height: 20px; } /* Фирменный знак перевозчика показываем как есть, без нашей подложки */ .ship__mark--cdek { background: none; padding: 0; } .ship__mark--cdek img { width: 40px; height: 40px; display: block; } .ship__b { display: grid; gap: 2px; min-width: 0; } .ship__n { font-size: 15px; font-weight: 700; } .ship__d { color: var(--muted); font-size: 12.5px; line-height: 1.35; } .pvz { display: grid; gap: var(--s2); } .pvz__pick { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); align-self: start; min-height: 44px; padding-inline: var(--s5); border: 1.5px solid var(--brand); border-radius: var(--r-md); background: var(--surface); color: var(--brand-ink); font-size: 14px; font-weight: 600; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .pvz__pick:hover { background: var(--brand); color: #fff; } /* Заказ не ушёл — говорим об этом прямо в панели, а не всплывающим окном */ .co-error { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: #FDEEF0; color: #8E2230; font-size: 13px; line-height: 1.45; } /* Размер разобрали, пока человек смотрел страницу */ .size.is-out { opacity: .45; text-decoration: line-through; cursor: not-allowed; box-shadow: none; } .size.is-out:hover { transform: none; border-color: var(--line); color: var(--ink); } .pdp__sold { padding: var(--s4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); font-size: 14px; line-height: 1.5; } .pdp__sold a { color: var(--brand-ink); font-weight: 600; } .pvz__pick .icon { width: 18px; height: 18px; } .hint.is-loud { color: var(--brand-ink); font-weight: 600; } /* Карта пунктов выдачи: разворачивается прямо в форме, без модального окна — так видно и поле адреса, и карту, и не теряется место в заказе. */ .cdek { border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface); } .cdek__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--bg); font-size: 14px; } .cdek__close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; } .cdek__close:hover { background: var(--surface-2); color: var(--ink); } /* Карта и список рядом: на карте видно, где пункт, в списке — режим работы. Выбрать можно и там, и там. */ .cdek__body { display: grid; } @media (min-width: 760px) { .cdek__body { grid-template-columns: 1.25fr 1fr; } } .cdek__map { height: 340px; background: var(--surface-2); } @media (min-width: 760px) { .cdek__map { height: 400px; } } .cdek__list { max-height: 340px; overflow-y: auto; display: grid; align-content: start; gap: 6px; padding: var(--s3); border-top: 1px solid var(--line); } @media (min-width: 760px) { .cdek__list { max-height: 400px; border-top: 0; border-left: 1px solid var(--line); } } .pvz__empty { margin: 0; padding: var(--s4); color: var(--muted); font-size: 14px; } .pvz__i { display: grid; gap: 2px; padding: var(--s3); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .pvz__i:hover { border-color: var(--brand); background: var(--brand-tint); } .pvz__a { font-size: 14px; font-weight: 600; line-height: 1.3; } .pvz__m { color: var(--muted); font-size: 12px; line-height: 1.35; } /* Кнопка выбора внутри балуна карты — балун рисует Яндекс, стили свои */ .pvz__btn { margin-top: 8px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--brand); color: #fff; font: 600 13px/1 inherit; cursor: pointer; } .pvz__btn:hover { background: var(--brand-700); } .buyerswitch { display: inline-flex; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg); } .buyerswitch button { min-height: 42px; padding-inline: var(--s5); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .buyerswitch button:hover { color: var(--brand-ink); } .buyerswitch button.is-active { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; box-shadow: 0 4px 10px -4px rgba(185, 80, 145, .6); } .orgpick { position: relative; } .orgpick__list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e3); } .orgpick__list[hidden] { display: none; } .orgpick__i { display: block; width: 100%; padding: 8px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; } .orgpick__i:hover, .orgpick__i.is-on { background: var(--brand-tint); } .orgpick__i b { display: block; font-size: 14px; } .orgpick__i span { color: var(--muted); font-size: 12px; } .orgcard { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); font-size: 13px; line-height: 1.5; } .orgcard b { display: block; font-size: 14px; } .orgcard button { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--brand-ink); font-size: 12px; } .check { display: flex; gap: var(--s2); align-items: flex-start; font-size: 13px; line-height: 1.45; } .check input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--brand); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .co-done { padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: center; } .co-done .icon { width: 44px; height: 44px; color: var(--brand); } .co-done h2 { margin: var(--s3) 0 var(--s2); font-family: var(--font-display); font-size: 22px; } .co-done p { margin: 0 auto; max-width: 46ch; color: var(--ink-2); } /* Похожие товары — пять в строке: ряд получается плотным и виден целиком, без ощущения оборванной строки. */ @media (min-width: 1024px) { .products--related { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); } } /* ========================================================================== 21. Выбор размера ========================================================================== */ /* Размер у одежды — обязательный параметр заказа, поэтому он стоит крупным блоком перед кнопкой, а не строкой в характеристиках. */ .sizes { margin-top: var(--s5); padding: var(--s3) var(--s4) var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); transition: border-color var(--t) var(--ease), background var(--t) var(--ease); } .sizes__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); } .sizes__lbl { font-size: 14px; font-weight: 700; } .sizes__hint { color: var(--muted); font-size: 13px; } .sizes__list { display: flex; flex-wrap: wrap; gap: var(--s2); } .size { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .size:hover { border-color: var(--brand); color: var(--brand-ink); } .size:active { transform: scale(.97); } .size.is-on { border-color: transparent; background: var(--brand); color: #fff; box-shadow: 0 4px 12px -4px rgba(185, 80, 145, .6); } /* Сколько осталось этого размера: почти всегда одна-две штуки */ .size__n { min-width: 18px; padding: 1px 5px; border-radius: var(--r-pill); background: rgba(42, 18, 32, .07); color: var(--muted); font-size: 11px; font-weight: 700; } .size.is-on .size__n { background: rgba(255, 255, 255, .22); color: #fff; } .size--low .size__n { background: rgba(192, 57, 43, .12); color: #C0392B; } .size--low.is-on .size__n { background: rgba(255, 255, 255, .22); color: #fff; } /* Просьба выбрать размер: короткая тряска и красная рамка — заметно, но не модальное окно на полэкрана. */ @keyframes sizeShake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-7px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 80% { transform: translateX(-2px); } } .sizes.is-bad { border-color: #C0392B; background: rgba(192, 57, 43, .05); animation: sizeShake .5s var(--ease); } .sizes.is-bad .sizes__hint { color: #C0392B; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .sizes.is-bad { animation: none; } } /* В сетке каталога у размерной вещи вместо «В корзину» — «Купить» с переходом на карточку: размер там негде спросить. Вид у ссылки тот же, что у кнопки. */ .card__add--pick { display: inline-flex; align-items: center; justify-content: center; text-align: center; } /* Товар под заказ: покупку не предлагаем, ведём на страницу. Кнопка спокойнее обычной, чтобы не спорить с «В корзину» у соседей по сетке. */ .card__add--ask { border: 1px solid var(--line); background: linear-gradient(180deg, #fff 0%, #FBF9FC 100%); color: var(--muted); font-weight: 600; box-shadow: 0 1px 2px rgba(42, 18, 32, .06); } .card__add--ask:hover { background: linear-gradient(180deg, #fff 0%, #FBF9FC 100%); border-color: var(--brand); color: var(--brand-ink); filter: none; box-shadow: 0 4px 10px -4px rgba(185, 80, 145, .45); } /* «Цена по запросу» длиннее суммы — кегль чуть меньше, перенос разрешён */ .price--ask { font-size: 16px; white-space: normal; color: var(--muted); } .pdp__price.price--ask { font-size: 20px; } .pdp__buy--ask { display: flex; } .pdp__buy--ask .btn--buy { width: 100%; } /* ========================================================================== 21b. Выбор размера — переработка ========================================================================== */ /* Блок должен читаться как обязательный шаг, а не как строка характеристик: подложка в цвет бренда, полоса-акцент слева, крупный заголовок. */ .sizes { position: relative; margin-top: var(--s5); padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 4px); border: 1px solid var(--brand-tint-2, var(--line)); border-radius: var(--r-lg); background: var(--brand-tint); overflow: hidden; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); } .sizes::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); } /* Размер выбран — блок успокаивается и перестаёт тянуть внимание */ /* Выбран — блок успокаивается: подложка белеет, а полоса слева темнеет до глубокого оттенка бренда. Зелёный «успех» здесь чужой: на странице только малиновая гамма, и он выбивался пятном. */ .sizes.is-set { background: var(--surface); border-color: var(--line); } .sizes.is-set::before { background: var(--brand-deep); } .sizes__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); } .sizes__lbl { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.2; } .sizes__hint { padding: 2px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); color: var(--brand-ink); font-size: 12px; font-weight: 600; white-space: nowrap; } /* После выбора метка показывает сам размер — делаем её залитой, чтобы выбранное значение читалось с одного взгляда. */ .sizes.is-set .sizes__hint { background: var(--brand); color: #fff; } .sizes__list { display: flex; flex-wrap: wrap; gap: 7px; } /* Подписи бывают длинные («46 рост 176 талия 100»), поэтому кегль мельче основного текста, а объём даёт не рамка, а мягкая тень и светлый верх. */ .size { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 44px; /* меньше нельзя: на сайте правило по касанию */ padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, #fff 0%, #FBF9FC 100%); color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 1px 2px rgba(42, 18, 32, .06); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .size:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 10px -4px rgba(185, 80, 145, .45); } .size:active { transform: translateY(0) scale(.97); } .size:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Выбранный — та же заливка, что у кнопки покупки: страница читается как один жест, а не как набор разных элементов. */ .size.is-on { border-color: transparent; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; box-shadow: 0 5px 14px -5px rgba(185, 80, 145, .7), inset 0 1px 0 rgba(255, 255, 255, .25); } .size.is-on:hover { transform: translateY(-1px); color: #fff; } /* Остаток по выбранному размеру: одна короткая строка вместо цифр на чипах */ .sizes__left { display: flex; align-items: center; gap: 6px; margin: var(--s3) 0 0; color: var(--ink-2); font-size: 13px; } .sizes__left::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } .sizes__left.is-low { color: #C0392B; font-weight: 600; } .sizes__left.is-low::before { background: currentColor; } .sizes.is-bad { border-color: #C0392B; background: rgba(192, 57, 43, .06); } .sizes.is-bad::before { background: #C0392B; } .sizes.is-bad .sizes__hint { background: rgba(192, 57, 43, .12); color: #C0392B; } /* Атрибут hidden должен побеждать любой display у компонента. Иначе блок, которому задан grid или flex, остаётся на экране: так вылезали остаток по размеру и вся форма заказа при пустой корзине. */ [hidden] { display: none !important; }