/* ============================================================================= v5 «Gablota» в теме. Этап 1: шапка, подвал, главная. Перенос с эталона designs/v5/style.css — правила взяты оттуда, а не написаны заново. Расхождения с эталоном ровно два, и оба вынужденные: 1. Сырых цветов здесь нет. Эталон писал rgba(23,24,26,.42) прямо в правиле; здесь то же значение собирается из токена: color-mix(… var(--ink) 42% …). Читается как «ink на 42 %», и «сделай чуть темнее» правится в tokens.css, а не в двадцати местах. 2. Обёртка называется .v5-wrap, а не .container. Класс .container занят прежним макетом (1312 px + поля 24) и держит ещё не перенесённые страницы; переопределить его здесь значило бы сдвинуть каталог и товар. Файл подключается последним, поэтому побеждает прежние правила весом порядка, без !important. Всё, что относится к содержимому страницы, живёт под .sns-v5: класс стоит на только у переведённых шаблонов. Шапка и подвал вне этой рамки — они уже общие для всего сайта. ========================================================================== */ html { scroll-behavior: smooth; /* Шапка липкая на всех страницах: без запаса якорь уводит заголовок под неё. */ scroll-padding-top: var(--header-h); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Пятно света под предметом. Одно на плитку каталога и на будущие экраны — поэтому токен, а не повтор градиента. */ :root { --v5-stage-light: radial-gradient(ellipse 62% 52% at 50% 42%, var(--stage) 0%, color-mix(in srgb, var(--paper) 62%, transparent) 62%, color-mix(in srgb, var(--hair) 52%, transparent) 100%); } /* ------------------------------------------------------------------------- Обёртка, служебное ------------------------------------------------------------------------- */ .v5-wrap { width: 100%; max-width: calc(var(--v5-container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } @media (max-width: 620px) { .v5-wrap { --gutter: 22px; } } .v5-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 18px; font: 500 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; transition: transform var(--t-enter) var(--ease-out); } .v5-skip:focus { transform: translateY(72px); } .v5-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- Страница на v5 ------------------------------------------------------------------------- */ body.sns-v5 { background: var(--paper); color: var(--ink); font: 400 16px/1.65 var(--f-ui); text-rendering: optimizeLegibility; /* Подвал прижат к низу окна на коротких страницах: у «Dostawa» и 404 текста на треть экрана, и под чёрной лентой оставалась полоса бумаги в шестьдесят пикселей — читалась как обрыв вёрстки. Колонкой, а не гардой overflow: та ломает липкую шапку в Safari. Баннер cookie в счёт не идёт, он fixed. */ min-height: 100svh; display: flex; flex-direction: column; } body.sns-v5 > main { flex: 1 0 auto; } body.sns-v5 :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .sns-v5 ul { list-style: none; margin: 0; padding: 0; } /* Типографика */ .label { font: 500 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin: 0; } .sns-v5 .h-display { font: 300 clamp(2.4rem, 5.4vw, 4.4rem)/1.06 var(--f-display); letter-spacing: -.01em; margin: 0; } .sns-v5 .h-section { font: 400 clamp(1.7rem, 2.7vw, 2.5rem)/1.15 var(--f-display); letter-spacing: .005em; margin: 0; } /* ========================================================================= Шапка ========================================================================= */ .hdr { position: sticky; top: 0; z-index: 40; background: var(--paper); /* фолбэк */ background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); } /* Волосяная линия проявляется только на прокрученной странице — в покое шапка не отделена от бумаги. Анимируется opacity, не border. */ .hdr::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair); opacity: 0; transition: opacity var(--t-enter) var(--ease-out); } .hdr.is-stuck::after { opacity: 1; } /* Админская панель — тоже фиксированная полоса: без сдвига шапка уезжает под неё. */ body.admin-bar .hdr { top: 32px; } @media (max-width: 782px) { body.admin-bar .hdr { top: 46px; } } .hdr__row { display: flex; align-items: center; gap: 32px; min-height: var(--header-h); } /* Бренд отступает через transform, не через font-size: ноль пересчёта раскладки. */ .hdr__brand { display: block; color: var(--ink); text-decoration: none; transform-origin: left center; transition: transform var(--t-enter) var(--ease-out); } .hdr.is-stuck .hdr__brand { transform: scale(.86); } .hdr__name { display: block; font: 400 22px/1.15 var(--f-display); letter-spacing: .045em; } .hdr__sub { display: block; font: 400 10px/1.4 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; } .hdr__tag { font: 400 11px/1.4 var(--f-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); max-width: 150px; margin: 0; padding-left: 24px; border-left: 1px solid var(--hair); } @media (max-width: 1080px) { .hdr__tag { display: none; } } .hdr__nav { margin-left: auto; } .hdr__nav ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; } .hdr__nav a { display: block; color: var(--ink); text-decoration: none; font: 400 13px/1 var(--f-ui); letter-spacing: .13em; text-transform: uppercase; padding-block: 8px; /* Осознанно только цвет: пункты меню видны на каждом экране, выезжающее подчёркивание здесь было бы шумом. */ transition: color var(--t-hover) var(--ease-out); } .hdr__nav a[aria-current="page"], .hdr__nav .current-menu-item > a, .hdr__nav .current_page_item > a { color: var(--accent); } @media (hover: hover) and (pointer: fine) { .hdr__nav a:hover { color: var(--accent); } } @media (max-width: 860px) { .hdr__nav { display: none; } } .hdr__tools { display: flex; align-items: center; gap: 4px; margin-left: 28px; } @media (max-width: 860px) { .hdr__tools { margin-left: auto; } } .v5-icon-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink-2); text-decoration: none; transition: color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .v5-icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; } @media (hover: hover) and (pointer: fine) { .v5-icon-btn:hover { color: var(--ink); } } .v5-icon-btn:active { transform: scale(.92); } /* Счётчик. В эталоне его нет — там шапка статическая; форма взята у счётчика на чипе фильтра, но прямоугольная: в v5 нет ни одного скругления. */ .v5-count { position: absolute; top: 2px; right: 0; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; background: var(--accent); color: var(--stage); font: 500 9px/1 var(--f-ui); letter-spacing: 0; } .v5-count[hidden] { display: none; } /* place-content, а не place-items: у грида с автострочками свободная высота кнопки раздаётся строкам поровну, полосы расходятся на 13 px вместо 7, и крест не сходится — вместо крестика получается шеврон «вперёд». */ .burger { display: none; width: 40px; height: 40px; place-content: center; background: none; border: 0; padding: 0; cursor: pointer; } @media (max-width: 860px) { .burger { display: grid; } } .burger span { display: block; width: 20px; height: 1px; background: var(--ink); transition: transform var(--t-enter) var(--ease-out), opacity 90ms var(--ease-out); } .burger span + span { margin-top: 6px; } /* Средняя полоса гаснет за 90 мс — раньше, чем сходятся крайние. Иначе три элемента движутся одновременно и морф читается как каша. */ .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mnav { display: none; border-top: 1px solid var(--hair); background: var(--paper); } .mnav[data-open="true"] { display: block; } .mnav ul { list-style: none; margin: 0; padding: 0; } .mnav a { display: block; padding: 16px 0; color: var(--ink); text-decoration: none; font: 400 13px/1 var(--f-ui); letter-spacing: .13em; text-transform: uppercase; border-bottom: 1px solid var(--hair); } /* Узкий экран. В эталоне бренд на 390 разваливается на четыре строки и упирается в бургер: имя магазина — не то место, где можно переносить слова. Держим его в одну строку, а место отбираем у иконок и у зазора, а не у названия. */ @media (max-width: 620px) { .hdr__row { gap: 12px; } .hdr__name { font-size: 19px; white-space: nowrap; } .hdr__sub { white-space: nowrap; } .v5-icon-btn, .burger { width: 34px; height: 34px; } .hdr__tools { gap: 0; } } /* ========================================================================= Hero ========================================================================= */ .sns-v5 .hero { position: relative; overflow: hidden; background: var(--ink); } .sns-v5 .hero__frame { position: relative; } .sns-v5 .hero__img { width: 100%; height: clamp(440px, 56vw, 660px); object-fit: cover; /* Один медленный уход масштаба при загрузке. Один раз за визит. */ transform: scale(1.045); transition: transform var(--t-settle) var(--ease-glass); } .sns-v5 .hero.is-ready .hero__img { transform: scale(1); } .sns-v5 .hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 42%, transparent) 0%, color-mix(in srgb, var(--ink) 24%, transparent) 38%, color-mix(in srgb, var(--ink) 58%, transparent) 100%); } .sns-v5 .hero__body { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; padding: var(--gutter); } /* Тонкая рамка внутри кадра — приём музейной вывески. Декоративная. */ .sns-v5 .hero__border { position: absolute; inset: clamp(16px, 2.4vw, 34px); border: 1px solid color-mix(in srgb, var(--vitrine) 32%, transparent); pointer-events: none; } .sns-v5 .hero__eyebrow { color: color-mix(in srgb, var(--vitrine) 78%, transparent); margin-bottom: clamp(20px, 3vw, 34px); } .sns-v5 .hero__quote { color: var(--vitrine); max-width: 16ch; text-shadow: 0 1px 24px color-mix(in srgb, var(--ink) 50%, transparent); } .sns-v5 .hero__quote em { font-style: italic; } .sns-v5 .hero__cta { margin: clamp(26px, 3.4vw, 42px) 0 0; } /* Появление содержимого hero: opacity + короткий подъём. Порядок чтения — надзаголовок, цитата, кнопка. */ .sns-v5 .hero__eyebrow, .sns-v5 .hero__quote, .sns-v5 .hero__cta { opacity: 0; transform: translateY(14px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); } .sns-v5 .hero.is-ready .hero__eyebrow { opacity: 1; transform: none; transition-delay: 60ms; } .sns-v5 .hero.is-ready .hero__quote { opacity: 1; transform: none; transition-delay: 160ms; } .sns-v5 .hero.is-ready .hero__cta { opacity: 1; transform: none; transition-delay: 300ms; } /* ------------------------------------------------------------------------- Кнопки. Под .sns-v5, потому что .btn занят прежним макетом. ------------------------------------------------------------------------- */ .sns-v5 .btn { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 30px; background: none; border-radius: 0; font: 500 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .sns-v5 .btn:active { transform: scale(.978); } .sns-v5 .btn--light { color: var(--vitrine); border-color: color-mix(in srgb, var(--vitrine) 62%, transparent); } @media (hover: hover) and (pointer: fine) { .sns-v5 .btn--light:hover { background: var(--vitrine); color: var(--ink); border-color: var(--vitrine); } } .sns-v5 .btn--ink { color: var(--ink); border-color: var(--ink); } @media (hover: hover) and (pointer: fine) { .sns-v5 .btn--ink:hover { background: var(--ink); color: var(--paper); } } /* Едет стрелка, а не кнопка: зона клика остаётся на месте. */ .sns-v5 .btn svg { width: 26px; height: 8px; flex: none; stroke: currentColor; stroke-width: 1.2; fill: none; transition: transform var(--t-enter) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .btn:hover svg { transform: translateX(5px); } } .arrow-link { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 500 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; padding-block: 8px; transition: color var(--t-hover) var(--ease-out); } .arrow-link svg { width: 30px; height: 8px; flex: none; stroke: currentColor; stroke-width: 1.2; fill: none; transition: transform var(--t-enter) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .arrow-link:hover { color: var(--accent); } .arrow-link:hover svg { transform: translateX(6px); } } .arrow-link:active svg { transform: translateX(2px); transition-duration: var(--t-press); } /* ------------------------------------------------------------------------- Баннер согласия на cookie. Стоит на каждой странице и раньше пользовался кнопками прежнего макета. После перевода .btn на v5 у «Akceptuję wszystkie» осталась заливка от старой кнопки, а фон — от новой: белый текст на белой карточке, кнопки не видно. Поэтому он одевается здесь целиком и больше ни от чьих кнопок не зависит. Тень оставлена намеренно: это единственный элемент, который лежит слоем над страницей, и тень обозначает именно слой. ------------------------------------------------------------------------- */ .consent-banner__card { max-width: 460px; padding: 24px 26px; background: var(--vitrine); color: var(--ink); border: 1px solid var(--hair); border-radius: 0; box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--ink) 34%, transparent); } .consent-banner__text { margin: 0 0 20px; font: 400 13px/1.6 var(--f-ui); color: var(--ink-2); } .consent-banner__link { color: var(--accent); text-underline-offset: 3px; } .consent-banner__link:hover { color: var(--accent); } .consent-banner .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; background: none; border: 1px solid currentColor; border-radius: 0; font: 500 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .consent-banner .btn:active { transform: scale(.978); } .consent-banner .btn--outline { color: var(--ink-2); } .consent-banner .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } @media (hover: hover) and (pointer: fine) { .consent-banner .btn--outline:hover { background: none; color: var(--ink); } .consent-banner .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); } } @media (max-width: 700px) { .consent-banner__card { border-radius: 0; } } /* ========================================================================= Плитка товара — «витрина» ========================================================================= */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; /* зазор 1px + фон линии = сетка волосяных линий */ background: var(--hair); border: 1px solid var(--hair); } @media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); } } /* Ряд ровно из четырёх плиток. Три колонки оставляют одинокую четвёртую и полторы пустые ячейки — в каталоге пустая ячейка читается как пустое место в витрине, но здесь товаров ровно четыре, и это просто дыра. Поэтому либо четыре в ряд, либо два на два. */ @media (max-width: 1080px) { .grid--row4 { grid-template-columns: repeat(2, 1fr); } } .tile { position: relative; background: var(--vitrine); display: flex; flex-direction: column; } .tile__link { display: flex; flex-direction: column; flex: 1; color: var(--ink); text-decoration: none; transition: transform var(--t-press) var(--ease-out); } .tile__link:active { transform: scale(.985); } .tile__stage { position: relative; display: block; background: var(--stage); overflow: hidden; /* Пропорция под самый вытянутый исходник. Ни один кадр не режется. */ aspect-ratio: 3 / 4; } /* Пятно света на подложке — статичное, не анимируется. */ .tile__stage::before { content: ''; position: absolute; inset: 0; background: var(--v5-stage-light); } .tile__stage img { position: relative; width: 100%; height: 100%; object-fit: contain; /* предмет целиком — это и есть товар */ padding: clamp(14px, 1.6vw, 22px); transition: transform var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .tile__link:hover .tile__stage img { transform: scale(1.022); } } .tile__meta { display: block; padding: 18px clamp(14px, 1.6vw, 20px) 20px; border-top: 1px solid var(--hair); transition: border-color var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .tile__link:hover .tile__meta { border-color: var(--hair-2); } } .tile__name { display: block; font: 400 clamp(1.05rem, 1.25vw, 1.22rem)/1.2 var(--f-display); letter-spacing: .01em; } .tile__coll { display: block; font: 400 10px/1.4 var(--f-ui); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; } .tile__price { display: inline-block; position: relative; font: 500 14px/1 var(--f-ui); letter-spacing: .05em; color: var(--accent); margin-top: 14px; padding-bottom: 5px; } /* Старая цена у распродажи: цену как текст v5 не анимирует нигде, поэтому зачёркнутое просто уходит во вторичный цвет и не спорит с акцентом. */ .tile__price del { color: var(--ink-2); font-weight: 400; margin-right: 7px; text-decoration-thickness: 1px; } .tile__price ins { text-decoration: none; } /* Подчерк цены растёт слева. Единственный видимый отклик на ховер, который ничего не двигает: зона клика неподвижна, работает только transform. */ .tile__price::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 240ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .tile__link:hover .tile__price::after { transform: scaleX(1); } } /* Избранное — тихая кнопка в строке подписи, а не чёрный кружок поверх фото. Ховер и «сохранено» разведены: обводка против заливки. Кнопка несёт ещё и класс прежнего макета, потому что на него завязан рабочий скрипт избранного; все его правила перекрыты здесь весом .tile .fav. */ .tile .fav { position: absolute; right: clamp(10px, 1.2vw, 14px); bottom: clamp(14px, 1.6vw, 18px); top: auto; left: auto; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 0; background: var(--vitrine); transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .tile .fav svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.3; fill: none; transition: fill var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .tile .fav:hover { border-color: var(--ink); color: var(--ink); background: var(--vitrine); } } .tile .fav:active { transform: scale(.9); } .tile .fav.is-active, .tile .fav[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--stage); } .tile .fav.is-active svg, .tile .fav[aria-pressed="true"] svg { fill: currentColor; } /* ---------- Появление: занавес витрины ---------- */ /* clip-path снизу вверх + opacity. Видно один раз за визит — поэтому длиннее 300 мс. */ html.js .reveal { opacity: 0; clip-path: inset(0 0 100% 0); } html.js .reveal.is-in { opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path var(--t-reveal) var(--ease-glass), opacity 380ms var(--ease-out); transition-delay: var(--rd, 0ms); } /* Блик по стеклу. Проходит один раз вместе с появлением и больше не повторяется. Keyframe уместен: событие однократное и неперебиваемое. */ html.js .tile.sweep .tile__stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--stage) 72%, transparent) 50%, transparent 62%); animation: v5-sweep 520ms linear; animation-delay: calc(var(--rd, 0ms) + 200ms); transform: translateX(-140%); } @keyframes v5-sweep { from { transform: translateX(-140%); } to { transform: translateX(140%); } } /* ========================================================================= Секции главной ========================================================================= */ .sns-v5 .sec { padding-block: clamp(64px, 8vw, 118px); } .sns-v5 .sec--tight { padding-block: clamp(48px, 5.5vw, 80px); } .sns-v5 .sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 22px; margin-bottom: 34px; border-bottom: 1px solid var(--hair); } .sns-v5 .sec__head h2 { margin: 0; } .sns-v5 .sec__head .label { margin-bottom: 12px; } @media (max-width: 620px) { .sns-v5 .sec__head { flex-direction: column; align-items: flex-start; gap: 14px; } } /* --- Три преимущества: музейные этикетки --- */ .sns-v5 .labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); } @media (max-width: 900px) { .sns-v5 .labels { grid-template-columns: 1fr; } } .sns-v5 .labels__item { background: var(--paper); padding: clamp(28px, 3vw, 42px) clamp(22px, 2.4vw, 34px); } .sns-v5 .labels__no { display: block; margin-bottom: 18px; font: 300 clamp(2rem, 3vw, 2.8rem)/1 var(--f-display); color: var(--hair-2); } .sns-v5 .labels__title { font: 400 clamp(1.2rem, 1.6vw, 1.5rem)/1.25 var(--f-display); margin: 0 0 12px; } .sns-v5 .labels__text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); } /* Подписи стоят на одной линии с низом кадра — как этикетки у экспоната. По центру короткий текст висел в середине высокого кадра, и по обе стороны от предмета открывались дыры в полсотни пикселей. */ .sns-v5 .usp-figure { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: clamp(24px, 4vw, 60px); margin-top: clamp(32px, 4vw, 56px); } @media (max-width: 900px) { .sns-v5 .usp-figure { grid-template-columns: 1fr; text-align: center; align-items: center; } } .sns-v5 .usp-figure img { width: clamp(240px, 26vw, 380px); height: auto; margin-inline: auto; display: block; } .sns-v5 .usp-figure__side { margin: 0; font: 300 clamp(1.1rem, 1.6vw, 1.4rem)/1.5 var(--f-display); color: var(--ink-2); } .sns-v5 .usp-figure__side--r { text-align: right; } @media (max-width: 900px) { .sns-v5 .usp-figure__side--r { text-align: center; } } /* --- kim jesteśmy --- */ /* Тёмная полоса ровно по высоте содержимого: сплошного прямоугольника пустоты, который есть на боевом сайте, здесь нет физически. */ .sns-v5 .about { background: var(--ink); color: var(--paper); } .sns-v5 .about__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; gap: 0; } @media (max-width: 900px) { .sns-v5 .about__grid { grid-template-columns: 1fr; } } .sns-v5 .about__text { padding: clamp(48px, 6vw, 92px) clamp(32px, 4.4vw, 72px); align-self: center; } .sns-v5 .about__text h2 { color: var(--paper); margin: 0 0 20px; } .sns-v5 .about__text .label { color: color-mix(in srgb, var(--paper) 55%, transparent); margin-bottom: 12px; } .sns-v5 .about__text p { color: color-mix(in srgb, var(--paper) 82%, transparent); font-size: 16px; line-height: 1.75; max-width: 52ch; margin: 0 0 16px; } .sns-v5 .about .btn--light { margin-top: 12px; } .sns-v5 .about__img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; } /* ========================================================================= Подвал ========================================================================= */ .ftr { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 6vw, 88px) 40px; font-family: var(--f-ui); } .ftr__top { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; padding-bottom: 42px; border-bottom: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); } @media (max-width: 760px) { .ftr__top { grid-template-columns: 1fr; } } .ftr__brand { font: 300 clamp(2.2rem, 4.6vw, 3.6rem)/1 var(--f-display); margin: 0; letter-spacing: .01em; } .ftr__sub { font: 400 11px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 60%, transparent); margin: 14px 0 0; } .ftr__links { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; } .ftr__links a { font: 400 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 80%, transparent); text-decoration: none; transition: color var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .ftr__links a:hover { color: var(--paper); } } .ftr__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; flex-wrap: wrap; } .ftr__legal { font: 400 11px/1 var(--f-ui); letter-spacing: .1em; color: color-mix(in srgb, var(--paper) 50%, transparent); margin: 0; } .ftr__social { display: flex; gap: 8px; } .ftr__social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--paper) 24%, transparent); color: color-mix(in srgb, var(--paper) 80%, transparent); transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .ftr__social svg { width: 16px; height: 16px; fill: currentColor; } @media (hover: hover) and (pointer: fine) { .ftr__social a:hover { border-color: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--paper); } } .ftr__social a:active { transform: scale(.92); } /* ========================================================================= Каталог: /sklep/, страницы коллекций, выдача поиска Перенос с эталона designs/v5/sklep.html. ========================================================================= */ :root { /* Высота полосы фильтров: чип 38 + поля 14×2 + две линии. Нужна константой, потому что от неё считается «липкий» упор маркера коллекции. */ --fbar-h: 68px; } /* --- Кадр над каталогом --- */ /* Ни оседания, ни параллакса: страницу магазина открывают часто, и движение в ней стоило бы дороже, чем добавляло. На главной кадр оседает один раз, потому что главную открывают один раз. */ .sns-v5 .shop-hero { position: relative; overflow: hidden; } .sns-v5 .shop-hero img { display: block; width: 100%; height: clamp(220px, 28vw, 340px); object-fit: cover; } /* Завеса гуще посередине, где стоит текст, и легче у краёв, где виден кадр. Ровные 34 % эталона держали заголовок, но описание коллекции в 14 пикселей на светлой ткани под ними не читалось. */ .sns-v5 .shop-hero__veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 38%, transparent); /* фолбэк */ background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 26%, transparent) 0%, color-mix(in srgb, var(--ink) 52%, transparent) 50%, color-mix(in srgb, var(--ink) 30%, transparent) 100%); } .sns-v5 .shop-hero__body { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px; } .sns-v5 .shop-hero__body h1 { margin: 0; color: var(--vitrine); font: 300 clamp(1.8rem, 3.6vw, 3rem)/1.1 var(--f-display); text-shadow: 0 1px 20px color-mix(in srgb, var(--ink) 50%, transparent); } .sns-v5 .shop-hero__desc { margin: 14px 0 0; max-width: 52ch; color: var(--vitrine); font: 400 14px/1.65 var(--f-ui); text-shadow: 0 1px 16px color-mix(in srgb, var(--ink) 78%, transparent); } /* --- Крошки --- */ .sns-v5 .crumbs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: 400 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-block: 22px; } .sns-v5 .crumbs a { color: var(--ink-2); text-decoration: none; transition: color var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .crumbs a:hover { color: var(--accent); } } .sns-v5 .crumbs [aria-current] { color: var(--ink); } .sns-v5 .crumbs span[aria-hidden] { color: var(--hair-2); } /* ========================================================================= Полоса фильтров ========================================================================= */ .sns-v5 .fbar { position: sticky; top: var(--header-h); z-index: 30; background: var(--paper); /* фолбэк */ background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-block: 1px solid var(--hair); } body.admin-bar.sns-v5 .fbar { top: calc(var(--header-h) + 32px); } @media (max-width: 782px) { body.admin-bar.sns-v5 .fbar { top: calc(var(--header-h) + 46px); } } /* Пока открыт лист фильтров, полоса перестаёт быть липкой и теряет размытие. Причина не в красоте: backdrop-filter делает элемент точкой отсчёта для position: fixed внутри него, и лист на телефоне разворачивался не на экран, а внутрь полосы высотой 68 px. Заодно снимается z-index полосы, иначе лист ушёл бы под шапку — у неё слой выше. Класс вешает скрипт: лист без скрипта не открывается вовсе. */ .sns-v5 .fbar.is-sheet { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; } .sns-v5 .fbar__form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: 14px; margin: 0; } /* display: contents — чтобы группы стояли в той же строке, что счётчик и сброс, и при этом остались одним узлом, который на телефоне уезжает в лист. */ .sns-v5 .fbar__body { display: contents; } /* --- Чип: он же своего
--- */ /* Раскрытие даёт браузер. Без этого список значений на странице без JavaScript не открыть ничем — а именно там выбор фильтра и терялся. */ .sns-v5 .fgroup { position: relative; } .sns-v5 .chip { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px; list-style: none; cursor: pointer; user-select: none; font: 400 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--hair); background: var(--vitrine); transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .sns-v5 .chip::-webkit-details-marker { display: none; } .sns-v5 .chip::marker { content: ''; } @media (hover: hover) and (pointer: fine) { .sns-v5 .chip:hover { border-color: var(--hair-2); } } .sns-v5 .chip:active { transform: scale(.97); } .sns-v5 .fgroup[open] > .chip { border-color: var(--ink); } .sns-v5 .chip.is-on { border-color: var(--accent); color: var(--accent); } .sns-v5 .chip__chev { width: 9px; height: 6px; flex: none; stroke: currentColor; stroke-width: 1.4; fill: none; transition: transform var(--t-enter) var(--ease-out); } .sns-v5 .fgroup[open] > .chip .chip__chev { transform: rotate(180deg); } /* Счётчик выбранного. Прямоугольный, как счётчик корзины в шапке: в v5 нет ни одного скругления, и второе исключение сделало бы форму случайной. Появляется из scale(.85), а не из нуля. */ .sns-v5 .chip__count { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; background: var(--accent); color: var(--stage); font: 500 10px/1 var(--f-ui); letter-spacing: 0; transform: scale(.85); opacity: 0; transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out); } .sns-v5 .chip.is-on .chip__count { transform: scale(1); opacity: 1; } /* Пока счётчик пуст, он не должен занимать место в чипе. */ .sns-v5 .chip:not(.is-on) .chip__count { display: none; } /* --- Панель значений --- */ /* Растёт из своего чипа: transform-origin в левый верхний угол триггера. */ .sns-v5 .pop { position: absolute; z-index: 5; top: calc(100% + 7px); left: 0; min-width: 246px; padding: 8px; background: var(--vitrine); border: 1px solid var(--hair); box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--ink) 34%, transparent); transform-origin: top left; animation: v5-pop-in 180ms var(--ease-out); } @keyframes v5-pop-in { from { opacity: 0; transform: scale(.97) translateY(-6px); } } /* Уход — 130 мс против 180 мс на вход: система отвечает, а не заставляет ждать. Класс вешает скрипт, откладывая закрытие
на длину анимации; без скрипта панель просто закрывается сразу. */ .sns-v5 .fgroup.no-anim > .pop { animation: none; } .sns-v5 .fgroup.is-closing > .pop { animation: v5-pop-out var(--t-exit) var(--ease-out) forwards; } @keyframes v5-pop-out { to { opacity: 0; transform: scale(.97) translateY(-6px); } } .sns-v5 .pop__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 9px 10px; font: 400 13px/1.3 var(--f-ui); letter-spacing: .03em; cursor: pointer; transition: background-color 110ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .pop__row:hover { background: var(--paper); } } .sns-v5 .pop__row input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; } .sns-v5 .pop__n { font-size: 11px; letter-spacing: .1em; color: var(--ink-2); } /* --- Цена --- */ .sns-v5 .pop--price { display: flex; gap: 8px; min-width: 268px; } .sns-v5 .pfield { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--hair); background: var(--stage); font: 400 13px/1 var(--f-ui); transition: border-color var(--t-hover) var(--ease-out); } .sns-v5 .pfield:focus-within { border-color: var(--ink); } .sns-v5 .pfield__cap { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .pfield__cur { font-size: 12px; color: var(--ink-2); } .sns-v5 .pfield input { width: 100%; min-width: 0; border: 0; background: none; padding: 0; font: 400 14px/1 var(--f-ui); color: var(--ink); -moz-appearance: textfield; } .sns-v5 .pfield input::-webkit-outer-spin-button, .sns-v5 .pfield input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* --- Состояние выдачи --- */ .sns-v5 .fbar__state { margin-left: auto; display: flex; align-items: center; gap: 18px; } .sns-v5 .fbar__count { margin: 0; font: 400 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .fbar__reset { font: 400 11px/1 var(--f-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 3px; transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .fbar__reset:hover { color: var(--accent); border-color: var(--accent); } } .sns-v5 .fbar__reset:active { transform: scale(.96); } /* --- Кнопка «Filtruj» --- */ /* Видна ровно до того момента, как скрипт возьмёт применение на себя. Без скрипта это единственный способ отправить выбор на сервер. */ .sns-v5 .fbar__submit { height: 38px; padding: 0 20px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .fbar__submit:hover { background: var(--accent); border-color: var(--accent); } } .sns-v5 .fbar__submit:active { transform: scale(.978); } .sns-v5 .fbar__form.is-enhanced .fbar__submit { display: none; } /* Кнопку «Wszystkie filtry», шапку и подвал листа показывает только телефон. */ .sns-v5 .fbar__all, .sns-v5 .fbar__sheet-head, .sns-v5 .fbar__sheet-foot { display: none; } /* --- Телефон: одна кнопка и полноэкранный лист --- */ /* Механика прежней темы, переодетая в v5. Показываем её только после того, как скрипт объявил себя живым (.is-enhanced): без него чипы должны остаться на виду, иначе фильтры на телефоне исчезнут вместе со скриптом. */ @media (max-width: 760px) { .sns-v5 .fbar__form { gap: 8px; } .sns-v5 .fbar__state { width: 100%; margin-left: 0; justify-content: space-between; } .sns-v5 .fbar__form.is-enhanced .fbar__body { display: none; } .sns-v5 .fbar__form.is-enhanced .fbar__all { order: -1; display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--hair); background: var(--vitrine); color: var(--ink); font: 400 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .sns-v5 .fbar__form.is-enhanced .fbar__all:active { transform: scale(.985); } .sns-v5 .fbar__all-icon { width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; } .sns-v5 .fbar__all-label { flex: 1; text-align: left; } .sns-v5 .fbar__all-count { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--accent); color: var(--stage); font: 500 10px/1 var(--f-ui); letter-spacing: 0; } /* Лист: занимает экран целиком и складывается в колонку. */ .sns-v5 .fbar__form.is-all-open { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; gap: 0; /* nowrap и stretch обязательны: в колонке с flex-wrap: wrap, который достаётся от полосы, содержимое выше экрана уезжает во вторую колонку — шапка листа остаётся слева, а список фильтров встаёт справа за краем. */ flex-wrap: nowrap; align-items: stretch; padding: 0; margin: 0; background: var(--paper); animation: v5-sheet-in 240ms var(--ease-out); } .sns-v5 .fbar__form.is-all-open .fbar__all, .sns-v5 .fbar__form.is-all-open .fbar__state, .sns-v5 .fbar__form.is-all-open .fbar__submit { display: none; } .sns-v5 .fbar__form.is-all-open .fbar__sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; flex: none; border-bottom: 1px solid var(--hair); } .sns-v5 .fbar__sheet-title { font: 400 1.4rem/1 var(--f-display); } .sns-v5 .fbar__close { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-2); cursor: pointer; transition: color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .sns-v5 .fbar__close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.4; fill: none; } .sns-v5 .fbar__close:active { transform: scale(.92); } /* Группы в листе — не поповеры, а строки списка во всю ширину. */ .sns-v5 .fbar__form.is-all-open .fbar__body { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sns-v5 .fbar__form.is-all-open .fgroup { position: static; border-bottom: 1px solid var(--hair); } .sns-v5 .fbar__form.is-all-open .chip { width: 100%; height: 54px; padding: 0 22px; border: 0; background: none; } .sns-v5 .fbar__form.is-all-open .chip__label { flex: 1; text-align: left; } .sns-v5 .fbar__form.is-all-open .pop { position: static; min-width: 0; padding: 0 22px 16px; border: 0; box-shadow: none; background: none; animation: none; } .sns-v5 .fbar__form.is-all-open .pop__row { padding: 12px 0; } .sns-v5 .fbar__form.is-all-open .pop__row input { width: 18px; height: 18px; } .sns-v5 .fbar__form.is-all-open .pop--price { padding-bottom: 16px; } .sns-v5 .fbar__form.is-all-open .fbar__sheet-foot { display: flex; align-items: center; gap: 12px; flex: none; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--paper); } .sns-v5 .fbar__sheet-clear { flex: none; padding: 0 16px; height: 48px; display: inline-flex; align-items: center; color: var(--ink-2); text-decoration: none; border: 1px solid var(--hair); font: 400 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; } .sns-v5 .fbar__apply { flex: 1; height: 48px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: transform var(--t-press) var(--ease-out); } .sns-v5 .fbar__apply:active { transform: scale(.978); } } @keyframes v5-sheet-in { from { opacity: 0; transform: translateY(12px); } } /* Фон под листом не должен ехать вместе с ним. */ html.filters-overlay-open, html.filters-overlay-open body { overflow: hidden; } /* ========================================================================= Сетка каталога ========================================================================= */ /* Линии рисует кольцо box-shadow вокруг плитки, а не фон контейнера. Разница видна в последнем ряду: у контейнера с фоном-линией незанятые ячейки заливались бы цветом линии — тремя четвертями ряда глухого бежевого. С кольцом пустая ячейка остаётся цветом витрины и читается ровно тем, чем она является, — свободным местом на полке. */ .sns-v5 .cat-grid, .sns-v5 .coll__grid { display: grid; gap: 1px; background: var(--vitrine); border: 1px solid var(--hair); } .sns-v5 .cat-grid > .tile, .sns-v5 .coll__grid > .tile { box-shadow: 0 0 0 1px var(--hair); } .sns-v5 .cat-grid { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1080px) { .sns-v5 .cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .sns-v5 .cat-grid { grid-template-columns: repeat(2, 1fr); } } .sns-v5 .coll__grid { grid-template-columns: repeat(3, 1fr); } @media (max-width: 760px) { .sns-v5 .coll__grid { grid-template-columns: repeat(2, 1fr); } } /* --- Коллекция: маркер в поле, а не лента во всю ширину --- */ .sns-v5 .coll { display: grid; grid-template-columns: 214px 1fr; gap: 0 40px; padding-block: clamp(38px, 4.4vw, 64px); border-top: 1px solid var(--hair); } .sns-v5 .coll:first-of-type { border-top: 0; } @media (max-width: 1020px) { .sns-v5 .coll { grid-template-columns: 1fr; gap: 22px; } } /* Маркер держится у верхнего края, пока идёт его коллекция: длинный каталог не теряет ответ на вопрос «что я сейчас смотрю». Упор — под шапкой и полосой фильтров, обе липкие. */ .sns-v5 .coll__marker { position: sticky; top: calc(var(--header-h) + var(--fbar-h) + 24px); align-self: start; } @media (max-width: 1020px) { .sns-v5 .coll__marker { position: static; } } .sns-v5 .coll__no { display: block; font: 300 2.4rem/1 var(--f-display); color: var(--hair-2); margin-bottom: 12px; } .sns-v5 .coll__name { margin: 0 0 8px; font: 400 clamp(1.5rem, 2vw, 2rem)/1.1 var(--f-display); } .sns-v5 .coll__meta { margin: 0; font: 400 11px/1.5 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .coll__meta .woocommerce-Price-amount { font-size: 11px; letter-spacing: .16em; } .sns-v5 .coll__link { margin-top: 22px; display: inline-flex; } /* --- Пустая выдача --- */ .sns-v5 .empty { padding: clamp(48px, 7vw, 96px) 0; text-align: center; } .sns-v5 .empty h2 { font: 300 clamp(1.5rem, 2.4vw, 2.1rem)/1.2 var(--f-display); margin: 0 0 10px; } .sns-v5 .empty p { color: var(--ink-2); margin: 0 0 24px; } /* ========================================================================= Пагинация ========================================================================= */ .sns-v5 .woocommerce-pagination { padding-block: clamp(40px, 5vw, 64px); } .sns-v5 .woocommerce-pagination ul.page-numbers { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } /* Соседние ячейки делят одну линию, а не ставят две рядом. */ .sns-v5 .woocommerce-pagination li + li { margin-left: -1px; } /* Селектор идёт через li: класс page-numbers WooCommerce вешает и на сам
    , и без li рамка ячейки растягивалась бы на весь список. */ .sns-v5 .woocommerce-pagination li .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 0; background: var(--vitrine); color: var(--ink); text-decoration: none; font: 400 12px/1 var(--f-ui); letter-spacing: .1em; transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .woocommerce-pagination li a.page-numbers:hover { border-color: var(--ink); position: relative; z-index: 1; } } .sns-v5 .woocommerce-pagination li a.page-numbers:active { transform: scale(.97); } .sns-v5 .woocommerce-pagination li .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--paper); position: relative; z-index: 1; } .sns-v5 .woocommerce-pagination li .page-numbers.dots { background: none; border-color: transparent; color: var(--hair-2); } /* ========================================================================= Перефильтровка выдачи Уходят только те плитки, которых не будет; приходящие набегают со стаггером. Приход медленнее ухода: новую выдачу читают, старую — уже нет. Префикс html.js поднимает вес до веса правила появления (html.js .reveal), иначе уходящая плитка осталась бы непрозрачной. ========================================================================= */ html.js .sns-v5 .tile.is-leaving, .sns-v5 .tile.is-leaving { opacity: 0; transform: scale(.985); transition: opacity var(--t-exit) var(--ease-out), transform var(--t-exit) var(--ease-out); pointer-events: none; } html.js .sns-v5 .tile.is-arriving, .sns-v5 .tile.is-arriving { opacity: 0; transform: translateY(7px); transition: none; } html.js .sns-v5 .tile.is-arrived, .sns-v5 .tile.is-arrived { opacity: 1; transform: none; clip-path: inset(0 0 0 0); /* снимает занавес .reveal, если плитка ещё не показывалась */ transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); transition-delay: var(--rd, 0ms); } /* Пока идёт запрос за новой выдачей, полоса фильтров не принимает новых нажатий: иначе три быстрых клика дают три ответа, и последний не обязан быть верным. */ .sns-v5 .fbar[aria-busy="true"] .fbar__form { pointer-events: none; } .sns-v5 .fbar[aria-busy="true"] .fbar__count { opacity: .5; } /* ========================================================================= prefers-reduced-motion — честно. Убираем перемещение и масштаб. Прозрачность и цвет остаются: они объясняют состояние, а не двигают картинку. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .hdr, .hdr *, .ftr, .ftr *, .sns-v5 *, .sns-v5 *::before, .sns-v5 *::after { animation: none !important; transition-duration: 200ms !important; transition-property: opacity, color, background-color, border-color, fill, stroke !important; transition-delay: 0ms !important; } html.js .reveal, html.js .reveal.is-in { opacity: 1 !important; clip-path: none !important; } .sns-v5 .hero__img { transform: none !important; } .sns-v5 .hero__eyebrow, .sns-v5 .hero__quote, .sns-v5 .hero__cta { opacity: 1 !important; transform: none !important; } .hdr.is-stuck .hdr__brand { transform: none !important; } .sns-v5 .tile.is-arriving, .sns-v5 .tile.is-arrived { opacity: 1 !important; transform: none !important; } .sns-v5 .tile.is-leaving { opacity: 0 !important; transform: none !important; } .sns-v5 .chip__count { transform: none !important; } .sns-v5 .pop { animation: none !important; } .sns-v5 .fbar__form.is-all-open { animation: none !important; } } /* ========================================================================= Этап 3: товар, корзина, оформление, кабинет. Перенос с эталонов designs/v5/produkt.html, koszyk.html, koszyk-pusty.html, zamowienie.html, konto.html, konto-panel.html. Отличие от эталона одно и вынужденное: галерея переключается селекторами по порядку (:nth-of-type), а не по именам #shot-1…#shot-4. У товара в магазине столько кадров, сколько сняли, а не четыре; имена в разметке должны быть уникальны на странице, иначе вторая галерея на том же экране перехватила бы чужие радиокнопки. ========================================================================= */ /* Пятно света в витрине — то же, что под плиткой каталога. */ .sns-v5 .stagebox { position: relative; display: block; background: var(--stage); overflow: hidden; } .sns-v5 .stagebox::before { content: ''; position: absolute; inset: 0; background: var(--v5-stage-light); } .sns-v5 .stagebox img { position: relative; width: 100%; height: 100%; object-fit: contain; } .sns-v5 .h-page { font: 300 clamp(2rem, 3.6vw, 3.1rem)/1.08 var(--f-display); letter-spacing: -.005em; margin: 0; } .sns-v5 .shop { padding-block: clamp(6px, 1vw, 14px) clamp(64px, 8vw, 112px); } /* Когда следом идёт своя секция, нижний отступ отдаём ей: два отступа подряд дают между товаром и «inne» дыру почти в 200 px. */ .sns-v5 .shop--flush { padding-bottom: 0; } /* Заголовок экрана — та же конструкция, что .sec__head на главной. */ .sns-v5 .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 22px; margin-bottom: clamp(28px, 3.4vw, 46px); border-bottom: 1px solid var(--hair); } @media (max-width: 620px) { .sns-v5 .page-head { flex-direction: column; align-items: flex-start; gap: 14px; } } .sns-v5 .note { font: 400 13px/1.6 var(--f-ui); color: var(--ink-2); margin: 0; } .sns-v5 .note--tight { margin-top: 14px; } .sns-v5 .rule { border: 0; border-top: 1px solid var(--hair); height: 0; margin: 0; } /* Метка состояния — прямоугольная, как всё остальное. */ /* Высота не фиксированная: «W trakcie realizacji» в колонке статуса встаёт в две строки, и жёсткие 23 px обрезали бы вторую. */ .sns-v5 .tag { display: inline-flex; align-items: center; min-height: 23px; padding: 4px 9px; border: 1px solid var(--hair-2); font: 500 10px/1.35 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .tag--live { border-color: var(--accent); color: var(--accent); } /* Залитая кнопка — единственный главный призыв на экране. */ .sns-v5 .btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); } @media (hover: hover) and (pointer: fine) { .sns-v5 .btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); } } .sns-v5 .btn--block { display: flex; width: 100%; justify-content: center; } .sns-v5 .btn--sm { min-height: 42px; padding: 0 18px; } .sns-v5 .btn[disabled] { opacity: .5; pointer-events: none; } /* ------------------------------------------------------------------------- Поля ------------------------------------------------------------------------- */ .sns-v5 .fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px; } .sns-v5 .fields--one { grid-template-columns: 1fr; } .sns-v5 .field--wide { grid-column: 1 / -1; } @media (max-width: 620px) { .sns-v5 .fields { grid-template-columns: 1fr; } } /* --- свёртка: группа полей, которая нужна не всегда ---------------------- Адрес доставки при выдаче в паczkomat, NIP без фактуры. Не display:none: раздел под ними подпрыгивал бы на высоту четырёх полей при каждом переключении способа доставки. Свёртка оседает — строка сетки едет от 1fr к 0fr, единственный способ довести до нуля блок неизвестной высоты одним переходом, без вшитой в правила высоты, которая разойдётся с содержимым. */ .sns-v5 .fold { display: grid; grid-template-rows: 1fr; min-height: 0; opacity: 1; transition: grid-template-rows var(--t-enter) var(--ease-glass), opacity var(--t-enter) var(--ease-out); } .sns-v5 .fold__in { min-height: 0; overflow: hidden; visibility: visible; } /* Отступ сверху лежит внутри свёртки, а не над ней: снаружи он остался бы стоять на месте спрятанного блока пустой полосой. */ .sns-v5 .addrsec > * + * { margin-top: 18px; } .sns-v5 .addrsec > .fold { margin-top: 0; } /* Отступ висит на содержимом, а не на коробке свёртки: своё поле у коробки уменьшается вместе с высотой, а padding — нет, и от свёрнутого блока осталась бы полоска в те же 18px. */ .sns-v5 .addrsec > .fold > .fold__in > * { margin-top: 18px; } .sns-v5 .checkout[data-sns-pickup] .fold--addr, .sns-v5 .checkout:not([data-sns-pickup]) .fold--note, .sns-v5 .checkout:not([data-sns-invoice]) .fold--nip { grid-template-rows: 0fr; opacity: 0; pointer-events: none; /* Уходит быстрее, чем приходит: закрытие — ответ системы, а не решение. */ transition: grid-template-rows var(--t-enter) var(--ease-glass), opacity var(--t-exit) var(--ease-out); } /* Скрытое перестаёт ловить табуляцию — но только когда осело, иначе содержимое пропадало бы раньше, чем закроется место под ним. */ .sns-v5 .checkout[data-sns-pickup] .fold--addr > .fold__in, .sns-v5 .checkout:not([data-sns-pickup]) .fold--note > .fold__in, .sns-v5 .checkout:not([data-sns-invoice]) .fold--nip > .fold__in { visibility: hidden; transition: visibility 0s linear var(--t-enter); } /* Поле —

    или

  • и , отступ списка ей ни к чему */ border-bottom: 1px solid var(--hair); } .sns-v5 .cart__head { padding-block: 11px; font: 500 10px/1 var(--f-ui); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .cart__row { padding-block: 20px; } .sns-v5 .cart__thumb { grid-area: thumb; aspect-ratio: 3 / 4; border: 1px solid var(--hair); } .sns-v5 .cart__thumb img { padding: 6px; } .sns-v5 .cart__info { grid-area: info; min-width: 0; } .sns-v5 .cart__name { display: block; font: 400 1.12rem/1.25 var(--f-display); letter-spacing: .01em; text-decoration: none; color: var(--ink); transition: color var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .cart__name:hover { color: var(--accent); } } .sns-v5 .cart__coll { display: block; margin-top: 6px; font: 400 10px/1.4 var(--f-ui); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .cart__price { grid-area: price; margin: 0; font: 400 14px/1.4 var(--f-ui); color: var(--ink-2); } .sns-v5 .cart__qty { grid-area: qty; } .sns-v5 .cart__total { grid-area: total; margin: 0; font: 500 15px/1 var(--f-ui); letter-spacing: .04em; color: var(--accent); } .sns-v5 .cart__rm { grid-area: rm; justify-self: end; width: 34px; height: 34px; display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--ink-2); text-decoration: none; background: none; border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .cart__rm:hover { color: var(--accent); border-color: var(--hair); } } .sns-v5 .cart__rm:active { transform: scale(.9); } @media (max-width: 860px) { .sns-v5 .cart__head { display: none; } .sns-v5 .cart__row { grid-template-columns: 84px minmax(0, 1fr) 36px; grid-template-areas: "thumb info rm" "thumb price price" "qty total total"; gap: 12px 16px; align-items: start; padding-block: 18px; } .sns-v5 .cart__qty { align-self: center; } .sns-v5 .cart__total { align-self: center; justify-self: end; } .sns-v5 .cart__thumb { align-self: start; } } .sns-v5 .cart__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; flex-wrap: wrap; } /* Шапка таблицы пользуется теми же классами колонок, что и строка. */ .sns-v5 .cart__head .cart__info, .sns-v5 .cart__head .cart__price, .sns-v5 .cart__head .cart__qty, .sns-v5 .cart__head .cart__total { font: inherit; color: inherit; letter-spacing: inherit; } /* Кнопка «пересчитать» нужна только там, где скрипт не поднялся: со скриптом количество уходит на сервер само, и вторая кнопка была бы мебелью. */ .sns-cart-live .cart__update { display: none; } .sns-v5 .cart__qty--fixed { grid-area: qty; font: 400 15px/1 var(--f-ui); color: var(--ink-2); } /* Итог корзины сидит в общей .panel; своей карточки у него нет. */ .sns-v5 .cart_totals { width: auto; background: none; padding: 0; } .sns-v5 .cart-collaterals { display: block; margin: 0; } /* ========================================================================= Оформление заказа ========================================================================= */ .sns-v5 .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin: 0 0 clamp(30px, 3.6vw, 48px); list-style: none; padding: 0; } .sns-v5 .steps__item { display: grid; gap: 7px; align-content: start; padding: 15px 18px; background: var(--vitrine); color: var(--ink); font: inherit; /* Прозрачная кромка стоит всегда, чтобы включение акцента ничего не сдвигало. */ border-left: 2px solid transparent; transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); } /* Текущий шаг — свет витрины плюс кромка в 2 px: одного света мало, --stage и --vitrine различаются на четыре единицы яркости. */ .sns-v5 .steps__item--now { background: var(--stage); border-left-color: var(--accent); } .sns-v5 .steps__no { display: block; font: 300 1.35rem/1 var(--f-display); color: var(--hair-2); } .sns-v5 .steps__item--now .steps__no { color: var(--accent); } .sns-v5 .steps__name { font: 400 11px/1.3 var(--f-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .steps__item--now .steps__name { color: var(--ink); } @media (max-width: 480px) { .sns-v5 .steps__item { padding: 12px; } .sns-v5 .steps__name { letter-spacing: .1em; } } .sns-v5 .fset + .fset, .sns-v5 .fset--gap { margin-top: clamp(32px, 4vw, 52px); } .sns-v5 .fset__head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 13px; margin-bottom: 20px; border-bottom: 1px solid var(--hair); } .sns-v5 .fset__no { font: 300 1.45rem/1 var(--f-display); color: var(--hair-2); } .sns-v5 .fset__head h2 { margin: 0; font: 400 clamp(1.15rem, 1.5vw, 1.32rem)/1.2 var(--f-display); } .sns-v5 .mini { display: grid; gap: 14px; } .sns-v5 .mini__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; } .sns-v5 .mini__thumb { aspect-ratio: 3 / 4; border: 1px solid var(--hair); } .sns-v5 .mini__thumb img { padding: 4px; } .sns-v5 .mini__name { font: 400 1rem/1.25 var(--f-display); display: block; } .sns-v5 .mini__qty { display: block; margin-top: 4px; font: 400 10px/1.4 var(--f-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .mini__sum { font: 500 13px/1 var(--f-ui); letter-spacing: .04em; color: var(--accent); } .sns-v5 .p24 { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: 400 11px/1.4 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .p24 span { border: 1px solid var(--hair-2); padding: 4px 8px; letter-spacing: .1em; color: var(--ink); } /* Поле платёжного шлюза (описание, форма BLIK/карты) раскрывается под выбором и продолжает ту же подсвеченную карточку: отступ слева ставит текст на одну вертикаль с названием способа. */ .sns-v5 .payment_box { margin: 0; padding: 2px 18px 16px 49px; background: var(--stage); border-left: 2px solid var(--accent); font: 400 13px/1.6 var(--f-ui); color: var(--ink-2); } .sns-v5 .payment_box p:first-child { margin-top: 0; } .sns-v5 .payment_box p:last-child { margin-bottom: 0; } .sns-v5 .opt__logo { display: flex; align-items: center; gap: 6px; } .sns-v5 .opt__logo img { max-height: 22px; width: auto; display: block; } /* ------------------------------------------------------------------------- Поля, которые печатает сам WooCommerce ------------------------------------------------------------------------- */ .sns-v5 .woocommerce-input-wrapper { display: block; } .sns-v5 .field label.checkbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; margin: 0; font: 400 14px/1.55 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink-2); } .sns-v5 .field label.checkbox input { accent-color: var(--accent); width: 15px; height: 15px; margin: 3px 0 0; } .sns-v5 .field .optional { font-weight: 400; letter-spacing: .06em; } /* У галочки «(opcjonalne)» не значит ничего: галочку и так можно не ставить, а приписка уезжала на свою строку под квадратик. */ .sns-v5 .field label.checkbox .optional { display: none; } .sns-v5 .field label.checkbox .required { color: var(--accent); text-decoration: none; } /* Второй адрес: галочка отбита от полей заказа, поля под ней — своим блоком. */ .sns-v5 .woocommerce-shipping-fields { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); } .sns-v5 .shipping_address { margin-top: 18px; } .sns-v5 .woocommerce-additional-fields { margin-top: 22px; } .sns-v5 .field .description { margin-top: 7px; font: 400 12px/1.5 var(--f-ui); color: var(--ink-2); } /* Список стран WooCommerce поднимает через select2. Собственные стили магазина отключены темой целиком, поэтому базовые правила select2 подключаются отдельно (inc/assets.php), а вид закрытого поля задан здесь — как у обычного поля. */ .sns-v5 .select2-container--default .select2-selection--single { height: var(--field-h); background: var(--vitrine); border: 1px solid var(--hair); border-radius: 0; transition: border-color var(--t-hover) var(--ease-out); } .sns-v5 .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--field-h) - 2px); padding-left: 15px; font: 400 15px/1 var(--f-ui); line-height: calc(var(--field-h) - 2px); color: var(--ink); } .sns-v5 .select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--field-h); right: 10px; } .sns-v5 .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ink); background: var(--stage); } .select2-container--default .select2-dropdown { background: var(--stage); border: 1px solid var(--ink); border-radius: 0; font: 400 15px/1.4 var(--f-ui); color: var(--ink); } .select2-container--default .select2-search--dropdown .select2-search__field { height: 40px; padding: 0 12px; background: var(--vitrine); border: 1px solid var(--hair); border-radius: 0; font: 400 15px/1 var(--f-ui); color: var(--ink); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent); color: var(--paper); } .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--hair); color: var(--ink); } /* ========================================================================= Кабинет ========================================================================= */ .sns-v5 .auth { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); } @media (max-width: 860px) { .sns-v5 .auth { grid-template-columns: 1fr; } } .sns-v5 .auth__col { background: var(--vitrine); padding: clamp(26px, 3vw, 40px); } .sns-v5 .auth__col h2 { margin: 0 0 8px; font: 400 clamp(1.3rem, 1.8vw, 1.6rem)/1.2 var(--f-display); } /* min-height в две строки: без него подводки разной длины сдвигают формы в соседних колонках, и поля перестают стоять на одной линии. */ .sns-v5 .auth__lede { margin: 0 0 24px; font-size: 14px; line-height: 1.65; color: var(--ink-2); max-width: 42ch; min-height: 3.3em; } .sns-v5 .auth__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; } .sns-v5 .auth__link { font: 400 11px/1 var(--f-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 3px; background: none; transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .auth__link:hover { color: var(--accent); border-color: var(--accent); } } .sns-v5 .acct { display: grid; grid-template-columns: 206px minmax(0, 1fr); gap: 0 clamp(28px, 3.4vw, 56px); } @media (max-width: 1020px) { .sns-v5 .acct { grid-template-columns: 1fr; gap: 26px; } } .sns-v5 .acct__nav { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; } @media (max-width: 1020px) { .sns-v5 .acct__nav { position: static; } } .sns-v5 .acct__nav ul { margin: 0; padding: 0; list-style: none; } .sns-v5 .acct__nav a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--hair); font: 400 12px/1 var(--f-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; transition: color var(--t-hover) var(--ease-out); } .sns-v5 .acct__nav li:first-child a { border-top: 1px solid var(--hair); } @media (hover: hover) and (pointer: fine) { .sns-v5 .acct__nav a:hover { color: var(--accent); } } .sns-v5 .acct__nav .is-active a { color: var(--ink); } .sns-v5 .acct__no { font: 300 15px/1 var(--f-display); color: var(--hair-2); } .sns-v5 .acct__nav .is-active .acct__no { color: var(--accent); } .sns-v5 .acct__block + .acct__block { margin-top: clamp(38px, 4.4vw, 64px); } /* scroll-margin — иначе якорь уводит заголовок под липкую шапку. */ .sns-v5 .acct__block { scroll-margin-top: calc(var(--header-h) + 20px); } .sns-v5 .orders { border-top: 1px solid var(--hair); } .sns-v5 .order { display: grid; grid-template-columns: 130px minmax(0, 1fr) 150px 116px 108px; align-items: center; gap: 6px 20px; padding-block: 17px; border-bottom: 1px solid var(--hair); } .sns-v5 .order__no { margin: 0; font: 500 13px/1.3 var(--f-ui); letter-spacing: .06em; } .sns-v5 .order__date { display: block; margin-top: 5px; font: 400 12px/1 var(--f-ui); color: var(--ink-2); } .sns-v5 .order__meta { margin: 0; font: 400 1.02rem/1.45 var(--f-display); color: var(--ink); } .sns-v5 .order__status { margin: 0; } .sns-v5 .order__sum { margin: 0; font: 500 14px/1 var(--f-ui); letter-spacing: .04em; color: var(--accent); } .sns-v5 .order .arrow-link { justify-self: end; } /* На узком экране автопоток раскладывал строку по DOM: длинный перечень выдавливал сумму за правое поле. Раскладку задаём явно. */ @media (max-width: 860px) { .sns-v5 .order { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no sum" "meta meta" "tag link"; gap: 10px 16px; align-items: center; padding-block: 18px; } .sns-v5 .order__no { grid-area: no; } .sns-v5 .order__sum { grid-area: sum; justify-self: end; } .sns-v5 .order__meta { grid-area: meta; } .sns-v5 .order__status { grid-area: tag; } .sns-v5 .order .arrow-link { grid-area: link; justify-self: end; } } .sns-v5 .addr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); } @media (max-width: 760px) { .sns-v5 .addr { grid-template-columns: 1fr; } } .sns-v5 .addr--spaced { margin-top: 18px; } /* Один адрес — одна карточка во всю ширину: вторая ячейка сетки иначе стоит пустым бежевым прямоугольником и читается как непрогрузившийся блок. */ .sns-v5 .addr > .addr__card:only-child { grid-column: 1 / -1; } .sns-v5 .addr__card { background: var(--vitrine); padding: clamp(22px, 2.4vw, 30px); display: grid; align-content: start; gap: 12px; } .sns-v5 .addr__kind { margin: 0; font: 500 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .addr__lines { margin: 0; font-size: 15px; line-height: 1.65; } .sns-v5 .addr__acts { display: flex; gap: 18px; margin: 4px 0 0; } /* Избранное живёт в колонке, уже суженной боковой навигацией. */ .sns-v5 .grid--acct { grid-template-columns: repeat(3, 1fr); } @media (max-width: 760px) { .sns-v5 .grid--acct { grid-template-columns: repeat(2, 1fr); } } /* Вход через Google остаётся рабочим — переодеваем разметку плагина. */ .sns-v5 .social-login { margin-top: 22px; } .sns-v5 .social-login__divider { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font: 400 10px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .social-login__divider::before, .sns-v5 .social-login__divider::after { content: ''; flex: 1; height: 1px; background: var(--hair); } .sns-v5 .social-login .nsl-container { margin: 0; } .sns-v5 .social-login .nsl-container-buttons a { border-radius: 0 !important; font-family: var(--f-ui) !important; } /* ========================================================================= Сообщения WooCommerce ========================================================================= */ .sns-v5 .woocommerce-message, .sns-v5 .woocommerce-info, .sns-v5 .woocommerce-error, .sns-v5 .woocommerce-notice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; margin: 0 0 24px; padding: 15px 18px; list-style: none; background: var(--vitrine); border: 1px solid var(--hair); border-left: 2px solid var(--accent); border-radius: 0; font: 400 14px/1.55 var(--f-ui); color: var(--ink); } /* Ошибки приходят списком
    • . Прежний макет одевал в карточку со скруглением и тенью каждый пункт, а не сам блок — внутри нашей рамки получался второй, белый, ящик. */ .sns-v5 .woocommerce-error { display: block; } .sns-v5 .woocommerce-error li { display: block; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font: inherit; color: inherit; } .sns-v5 .woocommerce-error li + li { margin-top: 8px; } .sns-v5 .woocommerce-message .button, .sns-v5 .woocommerce-info .button { display: inline-flex; align-items: center; justify-self: end; min-height: 38px; padding: 0 18px; background: none; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; font: 500 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .woocommerce-message .button:hover, .sns-v5 .woocommerce-info .button:hover { background: var(--ink); color: var(--paper); } } .sns-v5 .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .sns-v5 .opt__mark::after { transform: none !important; } .sns-v5 .shot { filter: none !important; } /* Оседание свёртки — движение, а не пояснение: убираем целиком. */ .sns-v5 .fold, .sns-v5 .fold > .fold__in { transition: none !important; } } /* ------------------------------------------------------------------------- Выбор вариации (у одного товара в каталоге — «Szklana kula»). Таблицу рисует WooCommerce; переодеваем её на месте, чтобы не тащить в тему шаблон вариаций целиком со всеми его внутренностями. ------------------------------------------------------------------------- */ .sns-v5 .variations { width: 100%; margin: 26px 0 0; border-collapse: collapse; border: 0; } .sns-v5 .variations tr, .sns-v5 .variations th, .sns-v5 .variations td { border: 0; } .sns-v5 .variations tr { display: grid; grid-template-columns: 1fr; gap: 9px; } .sns-v5 .variations tr + tr { margin-top: 16px; } .sns-v5 .variations th.label { padding: 0; text-align: left; font: 500 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .variations td.value { padding: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .sns-v5 .variations .selectwrap { flex: 1 1 200px; min-width: 0; } .sns-v5 .variations select { width: 100%; min-width: 0; appearance: none; -webkit-appearance: none; height: var(--field-h); padding: 0 38px 0 15px; cursor: pointer; font: 400 15px/1 var(--f-ui); color: var(--ink); background: var(--vitrine); border: 1px solid var(--hair); border-radius: 0; transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out); } .sns-v5 .variations select:focus { background: var(--stage); border-color: var(--ink); outline: none; } .sns-v5 .reset_variations { font: 400 11px/1 var(--f-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 3px; } .sns-v5 .woocommerce-variation-price { margin-top: 18px; font: 500 1.2rem/1 var(--f-ui); letter-spacing: .04em; color: var(--accent); } .sns-v5 .woocommerce-variation-availability { margin-top: 10px; font: 400 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .woocommerce-variation-description { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--ink-2); } /* ========================================================================= Гасим прежний макет там, где он спорит с кассой. components.css одевал корзину и оформление прежнего сайта и остаётся ради ещё не перенесённых страниц. Часть его правил бьёт по тем же узлам, что и наши, и делает это либо через id, либо через !important — то есть весом, который порядком подключения не перебить. Ниже ровно те правила, которые нужно снять, и ничего сверх них. ========================================================================= */ /* Раскладку разворота задаёт .shoplayout, а не колонки 1.15fr/.85fr. */ .sns-v5 form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside); gap: clamp(30px, 3.6vw, 56px); align-items: start; } @media (max-width: 1020px) { .sns-v5 form.checkout { grid-template-columns: 1fr; } } .sns-v5 #customer_details { grid-column: auto; } /* Кнопка оплаты — залитая кнопка v5, а не терракотовая плашка прежнего сайта. */ .sns-v5 #place_order { width: 100%; margin: 0; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0; } @media (hover: hover) and (pointer: fine) { .sns-v5 #place_order:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); } } /* Сводка заказа — панель витрины, без белой карточки со скруглением. */ .sns-v5 #order_review { grid-column: auto; background: none; border-radius: 0; padding: 0; box-shadow: none; position: static; } /* Карточка способа оплаты: прежние рамка и скругление стояли с !important. */ .sns-v5 .wc_payment_method, .sns-v5 .wc_payment_method:has(input:checked) { border: 0 !important; border-radius: 0 !important; padding: 0; margin: 0; box-shadow: none; } .sns-v5 #payment div.payment_box { background: var(--stage); border-radius: 0; } /* Поля формы: прежний макет красил их белым с другой линией правилом `.woocommerce form .form-row .input-text` — три класса и элемент, вес выше нашего. Повторяем ту же глубину селектора, значения берём из палитры. */ .sns-v5 form .form-row .input, .sns-v5 form .form-row select, .sns-v5 form .form-row textarea { background: var(--vitrine); border: 1px solid var(--hair); border-radius: 0; color: var(--ink); box-shadow: none; } .sns-v5 form .form-row .input:focus, .sns-v5 form .form-row select:focus, .sns-v5 form .form-row textarea:focus, .sns-v5 form .form-row .input:focus-visible, .sns-v5 form .form-row select:focus-visible, .sns-v5 form .form-row textarea:focus-visible { background: var(--stage); border-color: var(--ink); outline: none; box-shadow: none; } .sns-v5 form .form-row.woocommerce-invalid .input, .sns-v5 form .form-row.woocommerce-invalid select, .sns-v5 form .form-row.woocommerce-invalid textarea { border-color: var(--accent); } /* Стрелка списка стран — та же, что у остальных списков: короткий шеврон, собранный из двух линий, а не треугольник select2. */ .sns-v5 .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; } .sns-v5 .select2-container--default .select2-selection--single .select2-selection__arrow::after { content: ''; position: absolute; right: 5px; top: 50%; margin-top: -4px; width: 7px; height: 7px; border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); transform: rotate(45deg); } /* ------------------------------------------------------------------------- Мелочи кабинета ------------------------------------------------------------------------- */ .sns-v5 .woocommerce-MyAccount-content { min-width: 0; } /* Восстановление пароля — тот же ящик витрины, только в одну колонку. */ .sns-v5 .auth--single { grid-template-columns: 1fr; max-width: 560px; } .sns-v5 .acct__order-panel { margin-top: 22px; } /* Пустая сетка избранного — не полоска волосяной линии во всю ширину. */ .sns-v5 .grid:empty { display: none; } .sns-v5 .acct__block .empty--boxed { margin-top: 4px; padding-block: clamp(30px, 4vw, 54px); } /* Гасим прежний кабинет: обёртка шорткода была сеткой «240 px + остальное», и наш разворот вставал во вторую колонку, отступив на 280 px от поля. */ .sns-v5 .woocommerce { display: block; } .sns-v5 .woocommerce-MyAccount-navigation ul { background: none; border-radius: 0; box-shadow: none; overflow: visible; } .sns-v5 .woocommerce-MyAccount-navigation li a { border-left: 0; } .sns-v5 .woocommerce-MyAccount-navigation li.is-active a, .sns-v5 .woocommerce-MyAccount-navigation li a:hover { background: none; } .sns-v5 .woocommerce-MyAccount-content { background: none; border-radius: 0; box-shadow: none; padding: 0; } /* Согласие на обработку данных при регистрации печатает WooCommerce; ставим его тем же голосом, что и остальные пояснения на экране. */ .sns-v5 .woocommerce-privacy-policy-text p, .sns-v5 .woocommerce-privacy-policy-text { margin: 12px 0 0; font: 400 13px/1.6 var(--f-ui); color: var(--ink-2); } .sns-v5 .woocommerce-privacy-policy-text a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair-2); transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .woocommerce-privacy-policy-text a:hover { color: var(--accent); border-color: var(--accent); } } /* Сообщения об ошибках WooCommerce вставляет первым ребёнком формы. Форма — разворот в две колонки, поэтому без этого правила сообщение занимало левую колонку, поля уезжали в узкую правую, а сводка — на строку ниже. */ .sns-v5 form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } /* Подпись под неверно заполненным полем: она объясняет поле, а не начинает новый разговор — тот же размер, что и остальные пояснения. */ .sns-v5 .checkout-inline-error-message { display: block; margin: 7px 0 0; font: 400 12px/1.5 var(--f-ui); color: var(--accent); } /* ========================================================================= Этап 4: обычные страницы. «O nas», «Dostawa», «Kontakt», регламент, политика приватности, возвраты и 404. Своего эталона у них в designs/v5 нет: эталон описывает витрину, а не документ. Поэтому взята обвязка уже перенесённых экранов (крошки, .page-head, .shoplayout, .panel), а внутри — колонка сплошного текста. Ширина колонки — 680 px: строка держит около десяти слов, дальше глаз теряет начало следующей. Регламент из одиннадцати параграфов читают сверху вниз, и длина строки решает, дочитают ли. На эту же ширину посажены крошки и шапка экрана. Иначе линия под заголовком уходила на 1280 px, текст обрывался на 680, и голова с телом читались как две разные раскладки, между которыми забыли что-то поставить. Обёртка при этом остаётся общей: левый край документа совпадает с левым краем шапки сайта, а не уезжает в середину экрана. ========================================================================= */ .sns-v5 .page--doc { --doc-band: 680px; } .sns-v5 .page--doc .crumbs, .sns-v5 .page--doc .page-head { max-width: var(--doc-band); } .sns-v5 .doc { max-width: var(--doc-band, 680px); font: 400 16px/1.75 var(--f-ui); color: var(--ink); padding-bottom: 4px; } .sns-v5 .doc > :first-child { margin-top: 0; } .sns-v5 .doc > :last-child { margin-bottom: 0; } .sns-v5 .doc p { margin: 0 0 20px; } .sns-v5 .doc strong, .sns-v5 .doc b { font-weight: 600; color: var(--ink); } /* Первый абзац — вступление ко всему документу: набран дисплейным шрифтом и крупнее остального. Только :first-child: если страница начинается не с абзаца, вступления у неё нет и назначать его нечему. */ .sns-v5 .doc > p:first-child { font: 300 clamp(1.16rem, 1.7vw, 1.42rem)/1.5 var(--f-display); color: var(--ink); margin-bottom: 30px; } .sns-v5 .doc > p:first-child strong { font-weight: 500; } /* Заголовок раздела. Короткая черта над ним размечает документ, не деля его линией во всю меру: в регламенте одиннадцать разделов, и одиннадцать полных линеек весили бы больше текста, который они разделяют. */ .sns-v5 .doc h2 { font: 400 clamp(1.44rem, 2.1vw, 1.86rem)/1.22 var(--f-display); letter-spacing: .005em; color: var(--ink); margin: clamp(38px, 4.4vw, 58px) 0 15px; } .sns-v5 .doc h2::before { content: ''; display: block; width: 46px; height: 1px; margin-bottom: 22px; background: var(--hair-2); } .sns-v5 .doc > h2:first-child { margin-top: 0; } .sns-v5 .doc > h2:first-child::before { display: none; } .sns-v5 .doc h3 { font: 500 clamp(1.14rem, 1.5vw, 1.3rem)/1.3 var(--f-display); color: var(--ink); margin: 34px 0 12px; } .sns-v5 .doc h4 { font: 500 11px/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin: 30px 0 10px; } /* Ссылка в тексте подчёркнута волосяной линией, а не системным подчёркиванием: толстая линия под каждым адресом почты в регламенте рябит. Линия цвета волоса была бы к бумаге 1,6:1 — ссылку в абзаце не отличить от текста; 55 % чернил дают 3,7:1 и остаются тоньше буквы. Кнопка на 404 — не ссылка в тексте, у неё своя рамка. */ .sns-v5 .doc a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-hover) var(--ease-out), text-decoration-color var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .doc a:not(.btn):hover { color: var(--accent); text-decoration-color: var(--accent); } } /* Списки. Маркер у ul — та же волосяная черта, что и над заголовком; кружков и точек в системе нет ни одного. У ol номер настоящий: в «Zwroty» это три шага по порядку, и «сначала второе» там означало бы потерянные деньги. */ .sns-v5 .doc ul, .sns-v5 .doc ol { list-style: none; margin: 0 0 20px; padding: 0; } .sns-v5 .doc li { position: relative; padding-left: 30px; margin-bottom: 11px; } .sns-v5 .doc li:last-child { margin-bottom: 0; } .sns-v5 .doc ul > li::before { content: ''; position: absolute; left: 0; top: .82em; width: 15px; height: 1px; background: var(--hair-2); } .sns-v5 .doc ol { counter-reset: sns-step; } .sns-v5 .doc ol > li { padding-left: 38px; margin-bottom: 16px; } .sns-v5 .doc ol > li::before { counter-increment: sns-step; content: counter(sns-step); /* Отступ сверху выравнивает номер по базовой линии первой строки пункта: при top: 0 он вставал выше прописных и читался как сноска. */ position: absolute; left: 0; top: .46em; min-width: 22px; font: 500 11px/1.6 var(--f-ui); letter-spacing: .12em; color: var(--accent); } .sns-v5 .doc li > ul, .sns-v5 .doc li > ol { margin: 10px 0 0; } /* Бланк отказа от покупки. Стоит в тексте как отдельный лист бумаги: его выделяют, копируют и заполняют, а не читают подряд. */ .sns-v5 .doc blockquote { margin: 30px 0; padding: clamp(22px, 3vw, 30px); background: var(--vitrine); border: 1px solid var(--hair); font-size: 15px; color: var(--ink-2); } .sns-v5 .doc blockquote p { margin: 0 0 15px; } .sns-v5 .doc blockquote p:last-child { margin-bottom: 0; } .sns-v5 .doc hr { border: 0; border-top: 1px solid var(--hair); margin: 34px 0; } .sns-v5 .doc img { margin-block: 8px; } .sns-v5 .doc figure { margin: 26px 0; } .sns-v5 .doc figcaption { margin-top: 10px; font: 400 12px/1.5 var(--f-ui); color: var(--ink-2); } /* --- Таблица реестра обработки данных ---------------------------------- */ /* Своя прокрутка вместо сжатия: четыре колонки юридического текста на телефоне схлопываются в столбики по одному слогу. Обёртку ставит фильтр в inc/pages.php. Таблице тесно в мере текста, поэтому на широком экране она выходит вправо за колонку — место там всё равно пустое. Порог 1060 px взят с запасом на полосу прокрутки: при нём обёртка страницы гарантированно шире 940, и переполнения не возникает. */ .sns-v5 .doc__scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--hair); } @media (min-width: 1060px) { .sns-v5 .doc__scroll { width: 940px; max-width: none; } } .sns-v5 .doc__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sns-v5 .doc table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--stage); font-size: 13px; line-height: 1.55; } .sns-v5 .doc thead th { padding: 13px 16px; text-align: left; vertical-align: bottom; background: var(--vitrine); border-bottom: 1px solid var(--hair-2); font: 500 10px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); } .sns-v5 .doc tbody td { padding: 14px 16px; vertical-align: top; color: var(--ink); } .sns-v5 .doc tbody tr + tr td { border-top: 1px solid var(--hair); } /* Первая колонка называет строку и потому набрана голосом подписи, а не текста. */ .sns-v5 .doc tbody td:first-child { color: var(--ink); font-weight: 500; } .sns-v5 .doc tbody td:not(:first-child) { color: var(--ink-2); } .sns-v5 .doc figure.doc__table { margin: 26px 0 30px; } /* Подпись нужна только там, где таблица шире своей рамки: на широком экране она помещается целиком, и приглашение прокрутить сбивало бы с толку. */ .sns-v5 .doc .doc__hint { display: none; } @media (max-width: 900px) { .sns-v5 .doc .doc__hint { display: block; margin-top: 11px; font: 500 10px/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); } } /* --- Карточка продавца на «Kontakt» ------------------------------------ */ /* Разметка идёт «карточка, потом текст» — так её читает и телефон, и экранный диктор. На широком экране сетка возвращает карточку в правую колонку. */ .sns-v5 .shoplayout--contact { grid-template-areas: "text card"; } .sns-v5 .shoplayout--contact > .shoplayout__aside { grid-area: card; } .sns-v5 .shoplayout--contact > .doc { grid-area: text; } @media (max-width: 1020px) { .sns-v5 .shoplayout--contact { grid-template-columns: 1fr; grid-template-areas: "card" "text"; } } .sns-v5 .contact { font-style: normal; } /* Строки адреса приходят одним узлом с переводами строк:
      в шаблоне означал бы, что вёрстка знает, из скольких частей состоит адрес. */ .sns-v5 .contact__line { margin: 0 0 6px; font: 400 15px/1.6 var(--f-ui); color: var(--ink); white-space: pre-line; } .sns-v5 .contact__line--soft { color: var(--ink-2); } .sns-v5 .contact .label + .contact__line { margin-top: 11px; } .sns-v5 .contact__line a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair-2); transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .sns-v5 .contact__line a:hover { color: var(--accent); border-color: var(--accent); } } .sns-v5 .contact__vat { margin: 12px 0 0; font: 400 12px/1.5 var(--f-ui); letter-spacing: .04em; color: var(--ink-2); } /* --- 404 ---------------------------------------------------------------- */ .sns-v5 .doc__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } @media (max-width: 620px) { .sns-v5 .doc { font-size: 15.5px; } .sns-v5 .doc__actions .btn { flex: 1 1 100%; justify-content: center; } } /* --- выбор точки выдачи (Furgonetka) ------------------------------------- */ /* Плагин отдаёт голую ссылку и сажает её на собственную серую подложку — посреди наших карточек это читалось как чужеродная плашка. Подложку гасим, ссылку одеваем в кнопку системы: прямоугольник, волосяная рамка, Archivo в разрядку. Кнопка живёт под выбранным способом доставки и относится только к нему, поэтому прижата к его левому краю и отделена линией. */ /* Блок с кнопкой — это низ выбранной карточки, а не отдельная полоса. Без своего фона сквозь него просвечивал контейнер, и между карточками зияла серая заплатка. Красная кромка слева продолжает кромку выбранного способа. */ .sns-v5 .sns-ship .opts > *:not(.opt), .sns-v5 .sns-ship #select-point-container, .sns-v5 .sns-ship #selected-point { margin: 0; padding: 0 18px 0 0; background: var(--stage); border-left: 2px solid var(--accent); } /* Нижний край выбранного способа закрывает последний из этих блоков. */ .sns-v5 .sns-ship .opts > *:not(.opt):last-child { padding-bottom: 16px; } /* Адрес выбранного автомата — подпись под кнопкой, а не отдельная плашка. */ .sns-v5 .sns-ship #selected-point { padding-left: 44px; padding-bottom: 16px; font: 400 13px/1.5 var(--f-ui); color: var(--ink-2); } .sns-v5 .sns-ship #selected-point:empty { display: none; } .sns-v5 .sns-ship #select-point { display: inline-flex; align-items: center; gap: 10px; margin-left: 44px; /* до текста в карточке */ padding: 11px 18px; border: 1px solid var(--hair); background: var(--stage); color: var(--ink); font: 500 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); } .sns-v5 .sns-ship #select-point::after { content: '→'; font-size: 13px; letter-spacing: 0; transform: translateX(0); transition: transform var(--t-hover) var(--ease-out); } .sns-v5 .sns-ship #select-point:hover { border-color: var(--accent); color: var(--accent); } .sns-v5 .sns-ship #select-point:hover::after { transform: translateX(4px); } .sns-v5 .sns-ship #select-point:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Выбранная точка приходит сюда же — её адрес важнее приглашения выбрать. */ .sns-v5 .sns-ship #select-point-label { text-decoration: none; } @media (max-width: 620px) { .sns-v5 .sns-ship #select-point { margin-left: 38px; } }