/* ============================================================================ ВИТРИНА v2 — слой нового дизайна поверх «Свежего рынка». ============================================================================ ЗАЧЕМ ОТДЕЛЬНЫМ ФАЙЛОМ, А НЕ ПРАВКОЙ design-system.css. Новый дизайн едет за флагом design_v2. Пока флаг не включён, этот файл вообще не подключается к странице — ни одного лишнего байта клиенту и ни одного шанса зацепить работающую витрину. Выключение флага возвращает прежний вид целиком, без отката кода. Правка внутри design-system.css такого свойства не даёт. ЧТО ЗА СИСТЕМА. Значения сняты с эталонной витрины, а не выбраны на глаз: • земля серая, карточки белые и без рамок — товар отделяет фон, а не обводка • скруглений нет нигде, кроме настоящих кружков (истории, радио, бейдж) • один вес шрифта на весь интерфейс; иерархию держат кегль и регистр • шкала 9 / 11 / 14 / 16 / 25 / 35, капслок с разрядкой .155em Именно разнобой весов (400/500/600/700/800) и делал прежнюю витрину похожей на служебный экран — поэтому вес сбрасывается ниже одним правилом. ПРО !important. Он стоит ровно в двух местах: вес шрифта и скругления. Это не борьба со специфичностью по мелочи, а сброс двух сквозных свойств, которые заданы в полусотне селекторов исходной системы. Всё остальное написано обычными правилами и живёт за счёт порядка подключения. КЛАСС .dv2 СТОИТ НА (а не на body): фон берёт и зона overscroll, и безопасные зоны, иначе на резинке прокрутки виден прежний бежевый. ========================================================================== */ /* ── Токены. Светлая ──────────────────────────────────────────────────────── */ html.dv2{ --bg: oklch(0.955 0.004 150); /* серая земля */ --paper: #fff; /* карточка */ --ink: oklch(0.15 0.012 155); --muted: oklch(0.42 0.010 155); --line: oklch(0.90 0.005 150); --green: oklch(0.47 0.13 158); --green-deep: oklch(0.36 0.11 158); --green-soft: oklch(0.955 0.025 150); --terra: oklch(0.55 0.10 55); --terra-soft: oklch(0.95 0.02 60); --amber: oklch(0.84 0.19 100); --red: oklch(0.55 0.19 25); --red-soft: oklch(0.95 0.03 25); --rare: oklch(0.50 0.13 300); --rare-soft: oklch(0.95 0.03 300); /* Тёмная шапка экрана — единственная тёмная плоскость в системе */ --head: oklch(0.17 0.04 162); --on-head: oklch(0.985 0.005 150); --on-head-2: oklch(0.72 0.02 152); --on-head-line: oklch(0.29 0.03 162); /* Подложка под фотографию: место товара видно до загрузки картинки. Литерал здесь был бы ошибкой — в тёмной теме он светил бы белым пятном. */ --tile: oklch(0.94 0.004 150); --ls-cap: 0.155em; /* разрядка капслока */ --ls-big: -0.012em; /* поджатие крупного кегля */ } /* ── Токены. Тёмная. .dk стоит на том же , поэтому селектор из двух классов — он обязан выигрывать у html.dv2 выше ────────────────────────── */ html.dv2.dk{ --bg: oklch(0.20 0.012 155); --paper: oklch(0.25 0.012 155); --ink: oklch(0.96 0.004 150); --muted: oklch(0.72 0.010 152); --line: oklch(0.32 0.012 155); --green: oklch(0.62 0.14 158); --green-deep: oklch(0.75 0.13 155); --green-soft: oklch(0.28 0.04 158); --head: oklch(0.14 0.02 160); --on-head: oklch(0.96 0.004 150); --on-head-2: oklch(0.70 0.010 152); --on-head-line: oklch(0.26 0.02 160); --tile: oklch(0.28 0.010 155); } /* ── Два сквозных сброса ──────────────────────────────────────────────────── */ html.dv2 *{ font-weight:500 !important; } html.dv2 *{ border-radius:0 !important; } /* …и обратно — то, что действительно круг */ html.dv2 :is( .story-ring, .story-ring .si, .card .fav, .nav .ndot, .promo-dot, .auth-pulse, .os-step-dot, .story-close, .sg-add, .cs-close, .ci-del-btn svg, input[type="radio"], .co-option input[type="radio"] ){ border-radius:50% !important; } /* ── Основание ────────────────────────────────────────────────────────────── */ html.dv2, html.dv2 body{ background:var(--bg); } html.dv2 body{ color:var(--ink); font-size:16px; line-height:1.35; letter-spacing:0; /* 78 вместо прежних 96: меню больше не плавает, оно в пол. Но безопасную зону снизу отбрасывать нельзя — на телефоне с жестом «домой» последняя строка списка уходила бы под полосу. Прежнее правило её учитывало, и потерять её при переносе значило бы починить одно и сломать другое. */ padding-bottom:calc(78px + var(--safe-bottom, 0px)); } html.dv2 h1, html.dv2 h2, html.dv2 h3, html.dv2 h4{ letter-spacing:var(--ls-big); line-height:1.06; text-wrap:balance; overflow-wrap:break-word; } /* ── Шапка экрана ─────────────────────────────────────────────────────────── */ html.dv2 .top{ padding:14px 16px; align-items:center; } html.dv2 .top .htitle{ font-size:16px; } html.dv2 .loc small{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--muted); } html.dv2 .loc b{ font-size:14px; margin-top:3px; } html.dv2 .loc b svg{ color:var(--muted); } html.dv2 .iconbtn{ width:34px; height:34px; background:transparent; border:0; color:var(--muted); } html.dv2 .iconbtn svg{ width:20px; height:20px; color:inherit; } html.dv2 .iconbtn:active{ transform:none; opacity:.55; } html.dv2 .h1{ font-size:25px; padding:22px 16px 0; } /* ── Поиск ────────────────────────────────────────────────────────────────── */ html.dv2 .search{ margin:12px 16px 2px; background:var(--paper); border:0; padding:13px 14px; gap:11px; } html.dv2 .search input{ font-size:16px; } html.dv2 .search .clr{ background:var(--bg); } /* ── Заголовок секции. Кегль и регистр вместо жирности ────────────────────── */ html.dv2 .sec{ padding:30px 16px 0; align-items:baseline; } html.dv2 .sec h2, html.dv2 .coll-hdr h2{ font-size:25px; letter-spacing:var(--ls-big); } html.dv2 .sec a, html.dv2 .coll-hdr a{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--green-deep); } html.dv2 .kick, html.dv2 .coll-hdr .kick{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--muted); } html.dv2 .coll-hdr{ padding:30px 16px 0; align-items:baseline; flex-wrap:wrap; } html.dv2 .coll-hdr > div:first-child{ display:grid; gap:6px; } html.dv2 .coll-row{ padding:14px 16px 0; gap:10px; } html.dv2 .coll{ padding-bottom:4px; } /* ── Чипы: прямоугольные, как вся система ─────────────────────────────────── */ html.dv2 .chips{ padding:14px 16px 2px; gap:8px; } html.dv2 .chip{ background:var(--paper); border:0; color:var(--ink); padding:9px 13px; font-size:11px; } html.dv2 .chip.active{ background:var(--ink); color:var(--paper); } /* ── Карточка товара ──────────────────────────────────────────────────────── */ html.dv2 .grid{ gap:10px; padding:14px 16px; } html.dv2 .card, html.dv2 .coll-card, html.dv2 .rc{ background:var(--paper); border:0; box-shadow:none; } html.dv2 .card:active, html.dv2 .coll-card:active{ transform:none; opacity:.7; } html.dv2 .card .img, html.dv2 .coll-img, html.dv2 .rc .ri, html.dv2 .ci-img{ background:var(--tile); } html.dv2 .card .info, html.dv2 .coll-info{ padding:10px 12px 12px; } html.dv2 .card .nm, html.dv2 .coll-nm{ font-size:16px; line-height:1.25; min-height:0; } html.dv2 .card .mt{ font-size:11px; margin:3px 0 7px; } html.dv2 .card .pr .now, html.dv2 .coll-pr .now{ font-size:16px; letter-spacing:0; font-variant-numeric:tabular-nums; } html.dv2 .card .pr .now.deal, html.dv2 .coll-pr .now.deal{ color:var(--red); } html.dv2 .card .pr .old, html.dv2 .coll-pr .old{ font-size:11px; } /* Бейдж — плашка, а не пилюля */ html.dv2 .card .badge, html.dv2 .coll-img .cbadge{ top:0; left:0; padding:4px 7px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; background:var(--ink); color:#fff; box-shadow:none; } html.dv2 .card .badge.sale, html.dv2 .coll-img .cbadge{ background:var(--red); color:#fff; } html.dv2 .card .badge.rare{ background:var(--rare); color:#fff; } html.dv2 .card .fav{ top:8px; right:8px; background:rgba(255,255,255,.86); } /* «+» — знак, а не кнопка-таблетка: он стоит в строке цены, а не поверх фото */ html.dv2 .card .add{ right:8px; bottom:9px; width:28px; height:28px; background:transparent; box-shadow:none; } html.dv2 .card .add svg{ width:20px; height:20px; color:var(--ink); } html.dv2 .card .add:active{ transform:none; opacity:.5; } html.dv2 .card .step{ right:8px; bottom:6px; height:34px; background:var(--bg); box-shadow:none; } html.dv2 .card .step button{ width:32px; height:34px; color:var(--ink); font-size:16px; } html.dv2 .card .step b{ color:var(--ink); font-size:14px; } /* ── Приветствие и промо ──────────────────────────────────────────────────── */ html.dv2 .greeting{ padding:22px 16px 2px; animation:none; } html.dv2 .g-hi{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--muted); } html.dv2 .g-name{ font-size:25px; letter-spacing:var(--ls-big); margin-top:8px; } html.dv2 .greeting:not(:has(.g-name)) .g-hi{ font-size:25px; letter-spacing:var(--ls-big); text-transform:none; color:var(--ink); } html.dv2 .promo-slider{ margin:16px 16px 2px; } html.dv2 .promo-banner{ box-shadow:none; background:var(--tile); } html.dv2 .promo-banner:active{ transform:none; opacity:.85; } html.dv2 .promo-dot{ background:var(--line); } html.dv2 .promo-dot.on{ background:var(--ink); transform:none; } /* ── Истории. Кольцо одно, без радуги ─────────────────────────────────────── */ html.dv2 .story-strip{ padding:18px 16px 6px; gap:13px; } html.dv2 .story-ring{ width:60px; height:60px; padding:1.5px; background:var(--ink); transition:none; } html.dv2 .story-ring.seen{ background:var(--line); } html.dv2 .story-ring .si{ border-width:2px; border-color:var(--bg); } html.dv2 .story-lbl{ font-size:9px; letter-spacing:.04em; color:var(--muted); max-width:64px; margin-top:1px; } /* ── Полка маркетплейса: плоская, без градиента и рамки ───────────────────── */ html.dv2 .coll-mp{ margin:0; padding-bottom:6px; background:var(--paper); border:0; } html.dv2 .coll-mp .coll-hdr{ padding-top:26px; } html.dv2 .coll-mp .coll-hdr h2{ color:var(--ink); } html.dv2 .mp-lead .mp-text{ font-size:14px; line-height:1.45; color:var(--muted); } html.dv2 .mp-adv li{ font-size:14px; color:var(--muted); } html.dv2 .mp-adv li b{ color:var(--ink); } /* ── Плитки «почему мы» ───────────────────────────────────────────────────── */ html.dv2 .values{ gap:2px; padding:30px 16px 4px; } html.dv2 .val-card{ background:var(--paper); border:0; padding:16px 14px; } html.dv2 .vc-icon{ width:32px; height:32px; font-size:20px; margin-bottom:8px; background:transparent !important; } html.dv2 .vc-title{ font-size:16px; margin-bottom:5px; } html.dv2 .vc-sub{ font-size:14px; line-height:1.4; } /* ── Кнопки ───────────────────────────────────────────────────────────────── */ html.dv2 .btn{ height:52px; font-size:16px; background:var(--green); } html.dv2 .btn.ghost{ background:var(--paper); border:0; color:var(--ink); } html.dv2 .btn.soft{ background:var(--green-soft); color:var(--green-deep); } html.dv2 .btn:active, html.dv2 .btn:not([data-loading]):active{ transform:none; opacity:.85; } html.dv2 .panel{ background:var(--paper); border:0; margin:0 16px 2px; padding:16px; } /* ── Нижнее меню. Пять целей пиктограммами, дом по центру ─────────────────── */ /* Порядок задаётся здесь, а не в разметке: order у элементов грид-контейнера. Каталог переехал под лупу и встал первым — он и есть поиск. Диапазон до 1024 — телефон и планшет: меню внизу. С 1024 витрина переходит на десктопную раскладку с ВЕРХНЕЙ панелью (desktop.css), и эти правила там только мешали бы — поэтому они в границах, а не глобальные. */ @media (max-width:1023px){ html.dv2 .nav{ left:0; right:0; bottom:0; transform:none; width:100%; max-width:480px; margin:0 auto; background:var(--paper); border:0; border-top:1px solid var(--line); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0 0 env(safe-area-inset-bottom,0); } html.dv2 .nav button{ gap:0; font-size:0; padding:13px 0 15px; color:var(--muted); } html.dv2 .nav button svg{ width:23px; height:23px; } html.dv2 .nav button.active{ color:var(--ink); } html.dv2 .nav button[data-route="#catalog"]{ order:1; } html.dv2 .nav button[data-route="#podpiska"]{ order:2; color:var(--muted); } html.dv2 .nav button[data-route="#podpiska"].active{ color:var(--ink); } html.dv2 .nav button[data-route="#podpiska"] svg{ width:23px; height:23px; padding:0; margin:0; border:0; box-shadow:none; background:transparent; color:inherit; } html.dv2 .nav button[data-route="#home"]{ order:3; } html.dv2 .nav button[data-route="#cart"]{ order:4; } html.dv2 .nav button[data-route="#profile"]{ order:5; } html.dv2 .nav .ndot{ top:7px; right:50%; margin-right:-18px; min-width:15px; height:15px; font-size:9px; background:var(--green); padding:0 4px; line-height:1; } } /* Планшет: колонка витрины расширяется до 760 (catalog-polish.css) — меню обязано идти за ней, иначе снизу висит полоса в 480 по центру чужой ширины. */ @media (min-width:720px) and (max-width:1023px){ html.dv2 .nav{ max-width:760px; } } /* ── Нижняя липкая панель (товар, корзина) ────────────────────────────────── */ html.dv2 .sticky-bar{ padding:0; background:none; } html.dv2 .sticky-bar .inner{ background:var(--paper); border:0; border-top:1px solid var(--line); box-shadow:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0)); } /* ── Карточка товара (страница) ───────────────────────────────────────────── */ html.dv2 .pd-hero{ background:var(--tile); } html.dv2 .pd-cbtn{ background:rgba(255,255,255,.88); border:0; } html.dv2 .pd-sheet{ margin-top:0; background:var(--paper); padding:20px 16px 0; } html.dv2 .pd-nm{ font-size:25px; line-height:1.06; max-width:24ch; } html.dv2 .pd-meta{ margin-top:10px; } html.dv2 .pd-meta .w{ font-size:14px; } html.dv2 .pd-meta .tag{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; background:transparent; color:var(--muted); padding:0; } html.dv2 .pd-prc{ margin:18px 0 16px; gap:13px; } html.dv2 .pd-prc .now{ font-size:35px; line-height:1; letter-spacing:var(--ls-big); font-variant-numeric:tabular-nums; } html.dv2 .pd-prc .old{ font-size:14px; } html.dv2 .pd-prc .save{ font-size:11px; background:transparent; color:var(--red); padding:0; } html.dv2 .pd-desc{ font-size:14px; line-height:1.45; color:var(--muted); margin:0 0 18px; } html.dv2 .pd-acc{ background:transparent; border:0; border-top:1px solid var(--line); padding:12px 0; margin:0; } html.dv2 .pd-acc b{ font-size:14px; } html.dv2 .pd-bar .pp b{ font-size:20px; } html.dv2 .rrow{ gap:10px; } html.dv2 .rc{ padding:0 0 10px; } html.dv2 .rc .ri{ margin-bottom:8px; } html.dv2 .rc .rn{ font-size:14px; padding:0 10px; } html.dv2 .rc .rp{ font-size:14px; padding:0 10px; margin-top:3px; } /* ── Корзина ──────────────────────────────────────────────────────────────── */ html.dv2 .cart-list{ margin:0; } html.dv2 .ci-swipe .ci{ background:var(--paper); border-bottom:0; margin-bottom:2px; padding:12px 16px; } html.dv2 .ci{ gap:11px; } html.dv2 .ci-img{ width:44px; height:44px; } html.dv2 .ci-name{ font-size:14px; } html.dv2 .ci-unit{ font-size:14px; color:var(--muted); margin-top:3px; } html.dv2 .ci-row{ margin-top:9px; } html.dv2 .ci-price{ font-size:14px; font-variant-numeric:tabular-nums; } html.dv2 .ci-step{ background:var(--bg); height:34px; } html.dv2 .ci-step button{ width:34px; height:34px; font-size:16px; } html.dv2 .order-totals{ background:var(--paper); border:0; margin:14px 0 0; padding:14px 16px; } html.dv2 .ot-row{ padding:5px 0; } html.dv2 .ot-label, html.dv2 .ot-value{ font-size:14px; } html.dv2 .ot-value{ font-variant-numeric:tabular-nums; } html.dv2 .ot-row.total{ border-top:1px solid var(--line); margin-top:6px; padding-top:11px; } html.dv2 .ot-row.total .ot-label{ font-size:16px; } html.dv2 .ot-row.total .ot-value{ font-size:16px; } /* ── Оформление ───────────────────────────────────────────────────────────── */ html.dv2 .co-sec{ background:var(--paper); border:0; margin:0 0 2px; } html.dv2 .co-sec-hdr{ padding:16px 16px 0; border-bottom:0; } html.dv2 .co-sec-hdr h3{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--muted); } html.dv2 .co-sec-hdr .co-badge{ background:transparent; color:var(--green-deep); padding:0; font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; } html.dv2 .co-option{ padding:13px 16px; } html.dv2 .co-option:not(:last-child){ border-bottom:1px solid var(--line); } html.dv2 .co-option.selected{ background:transparent; } html.dv2 .co-option.selected label{ color:var(--ink); } html.dv2 .co-option label{ font-size:16px; } html.dv2 .co-option .co-cost{ font-size:14px; font-variant-numeric:tabular-nums; } html.dv2 .co-addr-text{ font-size:16px; padding:6px 16px 14px; } html.dv2 .co-addr-change{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--green-deep); padding:0 16px 14px; } html.dv2 .co-bonus-icon{ background:transparent; color:var(--ink); width:24px; height:24px; } html.dv2 .co-bonus-info b{ font-size:16px; } html.dv2 .co-bonus-info small{ font-size:14px; } /* ── Статус заказа ────────────────────────────────────────────────────────── */ html.dv2 .os-hero{ padding:28px 16px 16px; } html.dv2 .os-icon{ width:56px; height:56px; font-size:28px; margin-bottom:14px; background:transparent !important; } html.dv2 .os-headline{ font-size:25px; letter-spacing:var(--ls-big); } html.dv2 .os-number{ font-size:14px; margin-top:6px; display:block; } html.dv2 .os-step-dot{ width:12px; height:12px; border:0; background:var(--line); color:transparent; } html.dv2 .os-step.done .os-step-dot, html.dv2 .os-step.active .os-step-dot{ background:var(--green); box-shadow:none; } html.dv2 .os-step-label{ font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:8px; } html.dv2 .os-step.done .os-step-label, html.dv2 .os-step.active .os-step-label{ color:var(--ink); } html.dv2 .os-step:not(:last-child)::after{ top:5px; height:1px; } html.dv2 .os-pay{ background:var(--paper); border:0; padding:14px 16px; } html.dv2 .os-pay-label, html.dv2 .os-pay-value{ font-size:14px; } html.dv2 .os-pay-status{ background:transparent !important; padding:0; font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; } /* ── Подписка ─────────────────────────────────────────────────────────────── */ html.dv2 .pod-card{ background:var(--paper); border:0; box-shadow:none; } html.dv2 .pod-h{ font-size:25px; letter-spacing:var(--ls-big); } html.dv2 .pod-sub{ font-size:14px; color:var(--muted); line-height:1.45; } html.dv2 .pod-bul{ font-size:14px; } /* ── Пустые состояния и вход ──────────────────────────────────────────────── */ html.dv2 .empty, html.dv2 .cart-empty{ padding:64px 28px; } html.dv2 .empty .em, html.dv2 .cart-empty .em{ font-size:44px; } html.dv2 .empty h3, html.dv2 .cart-empty h2{ font-size:25px; margin:16px 0 8px; } html.dv2 .empty p, html.dv2 .cart-empty p{ font-size:14px; } html.dv2 .auth-input{ border:0; background:var(--paper); font-size:16px; padding:15px 16px; } html.dv2 .auth-input:focus{ outline:2px solid var(--green); outline-offset:-2px; } html.dv2 .auth-code-card{ background:var(--paper); padding:22px 16px; } html.dv2 .auth-code-label{ font-size:9px; letter-spacing:var(--ls-cap); color:var(--muted); } html.dv2 .auth-code-value{ font-size:35px; letter-spacing:.16em; } html.dv2 .auth-copy-btn{ background:var(--bg); border:0; } html.dv2 .auth-status-bar{ background:var(--paper); border:0; } /* ── Баннер заказа и установки ────────────────────────────────────────────── */ html.dv2 .order-banner{ background:var(--paper); border:0; margin:14px 16px 0; padding:14px; } html.dv2 .ob-icon{ width:32px; height:32px; background:var(--ink); } html.dv2 .ob-title{ font-size:16px; color:var(--ink); } html.dv2 .ob-sub{ font-size:14px; margin-top:3px; } html.dv2 .pwa-banner{ background:var(--ink); padding:20px 16px; margin:24px 16px 0; } html.dv2 .pwa-banner h3{ font-size:16px; } html.dv2 .pwa-banner p{ font-size:14px; } /* ── Тосты и подсказки ────────────────────────────────────────────────────── */ html.dv2 .toast{ font-size:14px; box-shadow:0 8px 28px rgba(0,0,0,.16); } html.dv2 .cs-title{ font-size:25px; letter-spacing:var(--ls-big); } html.dv2 .cs-text{ font-size:14px; } html.dv2 .cs-body{ background:var(--paper); } /* ── Скелетоны под новую землю ────────────────────────────────────────────── */ html.dv2 .sk{ background:var(--tile); } html.dv2 .sk-card{ background:var(--paper); border:0; } /* ── Планшет и десктоп ────────────────────────────────────────────────────── */ /* Витрина — колонка 480px по центру. На широком экране остаётся колонка, но земля вокруг не должна выглядеть обрезанным телефоном: даём ей ту же серую плоскость и убираем тень-«подложку» от прежней системы. */ @media (min-width:600px){ /* Границы колонки на широком фоне: витрина остаётся объектом, а не разлитой землёй */ html.dv2 body{ box-shadow:none; border-left:1px solid var(--line); border-right:1px solid var(--line); } html.dv2 .nav{ border-left:1px solid var(--line); border-right:1px solid var(--line); } } /* ── Узкий телефон (360 и меньше) ─────────────────────────────────────────── */ /* На 360 крупный кегль 25px в заголовках секций начинает жать поля; шкала сдвигается на шаг вниз, ритм и отступы остаются прежними. */ @media (max-width:380px){ html.dv2 .sec h2, html.dv2 .coll-hdr h2, html.dv2 .h1, html.dv2 .g-name, html.dv2 .pd-nm, html.dv2 .os-headline, html.dv2 .pod-h, html.dv2 .empty h3, html.dv2 .cart-empty h2, html.dv2 .cs-title{ font-size:22px; } html.dv2 .pd-prc .now{ font-size:30px; } html.dv2 .card .nm, html.dv2 .coll-nm{ font-size:15px; } } /* ── Уважение к настройке «меньше движения» ───────────────────────────────── */ @media (prefers-reduced-motion:reduce){ html.dv2 *{ animation:none !important; transition:none !important; } } /* ============================================================================ БЛОКИ, ПРИЕХАВШИЕ ПОЗЖЕ БАЗОВОЙ СИСТЕМЫ ============================================================================ Рубрики, наборы, статьи и выбор города рисуются своими стилями (частью прямо в разметке). Найдены прогоном по всем экранам, а не на глаз: аудит искал уцелевшие рамки, тени и цвета прежней палитры. ========================================================================== */ /* ── Рубрики главной ──────────────────────────────────────────────────────── */ html.dv2 .rubrics{ gap:2px; } html.dv2 .rubrics .rubric{ background:var(--paper); border:0; padding:15px 14px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; } html.dv2 .rubric:active{ opacity:.6; } html.dv2 .rubrics .rubric-name{ font-size:16px; color:var(--ink); } html.dv2 .rubrics .rubric-count{ font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; } /* ── Наборы ───────────────────────────────────────────────────────────────── */ html.dv2 .bundle{ background:var(--paper); border:0; box-shadow:none; } html.dv2 .bundle-top h3{ font-size:25px; letter-spacing:var(--ls-big); } html.dv2 .bundle-top p{ font-size:14px; color:var(--muted); line-height:1.45; } html.dv2 .bundle-list li{ font-size:14px; border-top:1px solid var(--line); } html.dv2 .bundle-list li b{ font-variant-numeric:tabular-nums; } /* ── Статьи и рецепты ─────────────────────────────────────────────────────── */ html.dv2 .post-card{ background:var(--paper); border:0; box-shadow:none; } html.dv2 .post-card-kind{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--muted); } html.dv2 .post-card h3{ font-size:25px; letter-spacing:var(--ls-big); margin-top:8px; } html.dv2 .post-card p{ font-size:14px; color:var(--muted); line-height:1.45; margin-top:10px; } html.dv2 .post-body h2{ font-size:25px; margin-top:22px; } html.dv2 .post-body p, html.dv2 .post-body li{ font-size:16px; line-height:1.55; } /* ── Выбор города ─────────────────────────────────────────────────────────── */ html.dv2 .citychip{ background:var(--paper); border:0; padding:9px 13px; font-size:11px; color:var(--ink); } html.dv2 .citychip:active{ transform:none; opacity:.6; } html.dv2 .cityp__sheet{ background:var(--paper); } html.dv2 .cityp__hd{ font-size:25px; letter-spacing:var(--ls-big); } html.dv2 .cityp__note{ font-size:14px; opacity:1; color:var(--muted); } html.dv2 .cityp__row{ background:var(--bg); } html.dv2 .cityp__row.is-on{ background:var(--ink); color:var(--paper); } /* ── Переключатель режима каталога ────────────────────────────────────────── */ html.dv2 .modeseg{ background:var(--bg); border:0; box-shadow:none; padding:2px; } html.dv2 .mseg{ font-size:11px; color:var(--muted); } html.dv2 .mseg.on{ background:var(--paper); color:var(--ink); box-shadow:none; } /* ── Кнопка подписки ──────────────────────────────────────────────────────── */ html.dv2 .pod-cta{ box-shadow:none; background:var(--green); font-size:16px; } /* ── Плашка «Местное» ─────────────────────────────────────────────────────── */ /* Единственное место, где нужен !important сверх двух сквозных: цвет и фон прописаны прямо в атрибуте style, а инлайн бьёт любой селектор. */ html.dv2 .lmark{ background:transparent !important; color:var(--muted) !important; padding:0 !important; font-size:9px !important; letter-spacing:var(--ls-cap); text-transform:uppercase; } /* ── Подвал главной ───────────────────────────────────────────────────────── */ html.dv2 .home-foot{ font-size:14px; } /* ── «+» переезжает из фотографии в строку цены ───────────────────────────── */ /* Кнопка лежит в разметке внутри .img, а привязана абсолютно — то есть к ближайшему позиционированному предку. Снимаем позиционирование с .img, и якорем становится сама карточка: «плюс» встаёт справа от цены, как в макете, а не поверх фотографии. Бейдж и «избранное» при этом не двигаются — верх карточки и верх фотографии здесь одно и то же место. */ html.dv2 .card .img{ position:static; } html.dv2 .card{ position:relative; } /* Единица измерения — подпись, а не плашка */ html.dv2 .card .tags .mt, html.dv2 .tags .mt{ background:transparent !important; padding:0 !important; color:var(--muted); font-size:11px; } /* Выбор города в шапке говорит тише: это ссылка, а не главное действие экрана */ html.dv2 .citychip{ background:transparent; padding:0 4px; font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--muted); } /* Ручка листа товара остаётся — ею закрывают карточку смахиванием, — но говорит тише */ html.dv2 .pd-drag-handle{ opacity:.6; } /* ============================================================================ ДЕСКТОП (от 1024). Здесь у витрины своя раскладка: колонка расходится на всю ширину, а меню уезжает НАВЕРХ (desktop.css). Новая система от этого не меняется — меняется только носитель, поэтому правила ниже переводят верхнюю панель и подложку на те же токены, а не рисуют вторую систему. ========================================================================== */ @media (min-width:1024px){ /* Подложка была тёплым градиентом прежней палитры — теперь та же серая земля. max-width повторяет значение широкой полосы: между 1024 и 1039 витрина иначе оставалась в 760 (значение планшетного диапазона) уже с ДЕСКТОПНОЙ верхней панелью — узкая колонка под широкой шапкой, ничьё состояние. */ html.dv2 body{ background:var(--bg); border:0; max-width:1040px; } /* Верхняя панель: плоская полоса с волоском, а не плавающая таблетка */ html.dv2 .nav{ top:0; left:0; right:0; transform:none; width:100%; max-width:none; margin:0; justify-content:center; gap:2px; background:var(--paper); border:0; border-bottom:1px solid var(--line); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; } /* Подписи здесь остаются: на панели есть место, и слово точнее иконки */ html.dv2 .nav button{ font-size:14px; padding:16px 18px; color:var(--muted); gap:9px; } html.dv2 .nav button svg{ width:20px; height:20px; } html.dv2 .nav button.active{ background:transparent; color:var(--ink); } html.dv2 .nav button[data-route="#podpiska"]{ color:var(--muted); order:2; } html.dv2 .nav button[data-route="#podpiska"].active{ color:var(--ink); } html.dv2 .nav button[data-route="#podpiska"] svg{ color:inherit; } html.dv2 .nav button[data-route="#catalog"]{ order:1; } html.dv2 .nav button[data-route="#home"]{ order:3; } html.dv2 .nav button[data-route="#cart"]{ order:4; } html.dv2 .nav button[data-route="#profile"]{ order:5; } html.dv2 .nav .ndot{ position:static; margin:0 0 0 -6px; } /* Экран каталога на десктопе — грид из двух колонок: товары и боковые рубрики. Шапка попадала в первую колонку и обрывалась на середине экрана, а рядом с ней висел столбец категорий — тёмная плашка выглядела обрезанной. Растягиваем её на всю ширину: это шапка ЭКРАНА, а не колонки с товарами. */ /* grid-row:1 обязателен. Без него шапка, заняв обе колонки, уезжает во ВТОРОЙ ряд — под столбец категорий: у сайдбара колонка задана явно, а ряд нет, и он занимает первый ряд раньше. Шапка экрана обязана быть первой строкой сетки. */ html.dv2 [data-view="catalog"] > .head{ grid-column:1 / -1; grid-row:1; } /* Столбец рубрик закреплён за первым рядом (grid-row:1/span 4) — с шапкой во всю ширину они оказывались в одной клетке и наезжали друг на друга. Сдвигаем его на ряд ниже: первый ряд теперь принадлежит шапке. */ html.dv2 [data-view="catalog"] > .chips{ grid-row:2 / span 4; /* Столбец рубрик тоже липкий, и прилипал он на 88 пикселях — то есть ПОД шапкой: первый пункт «Все» уезжал за неё и был не виден. Смещаем ниже шапки: 53 (верхняя панель) + 122 (шапка каталога). Высота шапки здесь постоянна: сжатие при прокрутке убирает строку-кнопку поиска и ленту фактов, а на каталоге поле поиска настоящее и не прячется. */ top:175px; } html.dv2 .h1{ font-size:42px; letter-spacing:var(--ls-big); } html.dv2 .g-name{ font-size:42px; } html.dv2 .sec h2, html.dv2 .coll-hdr h2{ font-size:28px; } /* Полоса покупки внизу — плоская плашка вместо градиента прежней земли */ html.dv2 .sticky-bar{ background:none; } html.dv2 .sticky-bar .inner{ border:0; border-top:1px solid var(--line); } } /* ── Статья и рецепт (страница post.php) ──────────────────────────────────── */ /* Отдельная страница со своей вёрсткой: заголовок, лид, текст, коробка покупки. Переводим её на ту же шкалу. У абзаца свой шаг, а не общий 14: длинный текст читают, а не просматривают, и мелкий кегль здесь работает против чтения. */ html.dv2 .post h1{ font-size:25px; letter-spacing:var(--ls-big); line-height:1.06; } html.dv2 .post .lead{ font-size:16px; line-height:1.5; color:var(--muted); margin-bottom:22px; } html.dv2 .post h2{ font-size:25px; letter-spacing:var(--ls-big); margin:28px 0 12px; } html.dv2 .post p, html.dv2 .post li{ font-size:16px; line-height:1.55; } html.dv2 .post .crumbs{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--muted); margin-bottom:18px; } html.dv2 .post .buy{ border:0; background:var(--paper); padding:20px 16px; } html.dv2 .post .buy b{ font-size:25px; letter-spacing:var(--ls-big); margin-bottom:8px; } html.dv2 .post .buy p{ font-size:14px; } html.dv2 .post .back{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--green-deep); } /* ── Две мелочи, вскрытые прогоном ────────────────────────────────────────── */ /* Кнопка объявляла шрифт сокращённой записью `font:600 15px "Onest"` — то есть БЕЗ запасного семейства. Пока Onest грузится (или если не догрузится вовсе), надпись на главной кнопке экрана падает в системную засечку. Наследуем шрифт у страницы: там стек с фолбэками уже есть. */ html.dv2 .btn{ font-family:inherit; } /* Статус оплаты — это слово, которое ищут глазами («оплачено» / «ждём оплату»). На 9 кегле оно теряется среди строк таблицы, поэтому шаг крупнее. */ html.dv2 .os-pay-status{ font-size:11px; letter-spacing:.08em; } /* ============================================================================ ШИРОКИЙ ЭКРАН: ПОЧЕМУ СТРАНИЦУ РАСПИРАЛО ============================================================================ Экран витрины (.view) и её содержимое (.js-content) — гриды. У элемента грида min-width по умолчанию auto: он НЕ сжимается ниже минимальной ширины своего содержимого. Внутри лежит блок рубрик с сеткой repeat(auto-fill,minmax(150px,1fr)), и его минимальная ширина — это все одиннадцать рубрик в ряд, 1844px. Колонка витрины 976px, но грид-элемент упирался и распирал документ до 2278px: страница ехала вбок, шапка оставалась на месте, содержимое уползало за край. Лечится одной строкой — min-width:0 у детей грида. Это не косметика, а то, чего не хватало разметке изначально: проверено снятием класса dv2 — без нового дизайна документ ровно такой же ширины, значит блок распирал страницу и до него. Правило живёт здесь, потому что и рубрики, и дизайн пока за флагами; когда home_v2 поедет в общий выпуск, ему нужна такая же строка в базовой системе. ========================================================================== */ html.dv2 .view > *, html.dv2 .js-content > *{ min-width:0; } /* ============================================================================ СРЕДНЯЯ ШИРИНА: КОЛОНКА, А НЕ РАСТЯНУТЫЙ ТЕЛЕФОН ============================================================================ Между 720 и 1023 витрина растягивала телефонную раскладку до 760px: те же отступы в 16, те же однорядные полки, но с широкими пустыми полями по бокам, — и получался не планшетный экран, а увеличенный телефон. Новая система — это колонка; до десктопной раскладки она такой и остаётся, а лишняя ширина уходит в поле. С 1024 включается собственный десктопный макет витрины, и мы не мешаем. ========================================================================== */ @media (min-width:600px) and (max-width:1023px){ html.dv2 body{ max-width:480px; } html.dv2 .nav{ max-width:480px; } } /* Подпись истории обрезалась на «Маркетплей»: даём строке ширину кружка и второй ряд */ html.dv2 .story-lbl{ max-width:72px; } /* ============================================================================ ШАПКА ЭКРАНА ИЗ МАКЕТА ============================================================================ Тёмная плоскость, в которой живут адрес, поиск и строка фактов. Классы те же, что на утверждённом макете (.head / .row / .cap / .srch / .tick), — разметку рисует locationHeaderV2(), и это единственная тёмная поверхность в системе: она отделяет «где я и что искать» от «что у вас есть». ========================================================================== */ html.dv2 .head{ background:var(--head); color:var(--on-head); padding:14px 0; } html.dv2 .head:has(.tick:not([hidden])){ padding-bottom:0; } html.dv2 .head .row{ display:flex; align-items:center; gap:12px; padding:0 16px; } html.dv2 .head .loc{ display:flex; flex-direction:column; flex:1; min-width:0; background:transparent; border:0; padding:0; text-align:left; cursor:pointer; } html.dv2 .head .loc .cap{ display:block; font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--on-head-2); } html.dv2 .head .loc b{ font-size:14px; margin-top:3px; color:var(--on-head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; } html.dv2 .head .iconbtn{ color:var(--on-head-2); background:transparent; } html.dv2 .head .citychip{ color:var(--on-head-2); } /* Строка поиска: вход в каталог, а не второе поле ввода на сервис */ html.dv2 .head .srch{ display:block; width:calc(100% - 32px); margin:12px 16px 0; background:oklch(1 0 0 / .1); border:0; padding:12px 13px; color:var(--on-head-2); font:inherit; font-size:14px; text-align:left; cursor:pointer; } html.dv2 .head .srch:active{ opacity:.7; } /* Бегущая строка. Гаснет у правого края, а не обрывается на полуслове */ /* iOS САМ МЕНЯЕТ КЕГЛЬ, ЕСЛИ ЕМУ НЕ ЗАПРЕТИТЬ. В бегущей строке на айфоне часть слов крупнее остальных, хотя в стилях у всех один размер — 9px, я замерил. Это не наша вёрстка: WKWebView и Safari «подкручивают» размер текста в блоках, которые считают широкими (text autosizing), и решают это для каждого куска отдельно. Строка едет двойным содержимым в одну линию — самый широкий блок на странице, поэтому доставалось именно ей. Запрещаем подкрутку для всей витрины: размер шрифта — решение дизайна, а не догадка браузера о ширине. */ html.dv2, html.dv2 body{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } html.dv2 .head .tick{ margin-top:11px; overflow:hidden; border-top:1px solid var(--on-head-line, oklch(0.29 0.03 162)); padding:8px 0; } html.dv2 .head .tick .run{ display:flex; gap:22px; white-space:nowrap; padding-left:16px; -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent); mask-image:linear-gradient(90deg,#000 78%,transparent); } html.dv2 .head .tick span{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--on-head-2); } html.dv2 .head .tick b{ color:var(--on-head); } /* Заголовок экрана вместо приветствия */ html.dv2 .h1w{ padding:24px 16px 0; } html.dv2 .h1w h1{ font-size:25px; letter-spacing:var(--ls-big); line-height:1.06; } html.dv2 .h1w p{ margin-top:8px; color:var(--muted); font-size:14px; line-height:1.4; } /* Рубрики чипами сразу под заголовком */ /* Чипы рубрик. Класс .rubric здесь тот же, что у плиток прежней главной, но элемент другой — правила плиток обязаны остаться в своей сетке, иначе чип получает кегль 16 и отступы 15 и перестаёт быть чипом. */ html.dv2 .home-head-v2 .chips.wide{ padding:16px; flex-wrap:wrap; overflow:visible; gap:8px; } html.dv2 .home-head-v2 .chip{ background:var(--paper); gap:7px; padding:9px 13px; font-size:11px; color:var(--ink); } html.dv2 .home-head-v2 .chip .rubric-name{ font-size:11px; } html.dv2 .home-head-v2 .chip i{ font-style:normal; font-size:9px; opacity:.55; } /* Истории идут сразу под шапкой — воздух над ними даёт сама шапка */ html.dv2 [data-view="home"] > .js-stories-strip .story-strip{ padding-top:18px; } /* На десктопе тёмная шапка живёт внутри колонки, а не во всю ширину окна */ @media (min-width:1024px){ html.dv2 .head{ padding-top:18px; } } /* ── Полка подбора (.picks) ───────────────────────────────────────────────── */ /* Отдельный тип карточки, приехавший с новой главной: без кнопки «плюс», с подписью и ценой. В системе он обязан выглядеть как остальные товары — белая карточка на серой земле, имя и цена одного кегля. */ html.dv2 .picks{ gap:10px; padding:14px 16px 4px; } html.dv2 .pick{ background:var(--paper); padding-bottom:12px; flex:0 0 148px; } html.dv2 .pick:active{ opacity:.7; } html.dv2 .pick-img{ background:var(--tile); aspect-ratio:1; overflow:hidden; } html.dv2 .pick-img img{ width:100%; height:100%; object-fit:cover; display:block; } html.dv2 .pick-name{ font-size:16px; line-height:1.25; margin:10px 12px 0; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } html.dv2 .pick-price{ font-size:16px; margin:9px 12px 0; color:var(--ink); font-variant-numeric:tabular-nums; } html.dv2 .pick-off{ font-size:11px; color:var(--red); margin-left:7px; } /* ============================================================================ ПРАВКИ ПО ЗАМЕЧАНИЯМ ========================================================================== */ /* ── Красные полосы в корзине ─────────────────────────────────────────────── */ /* Под каждой строкой корзины лежит слой удаления по смахиванию — красная плашка во всю высоту строки. Я отделил строки друг от друга отступом У САМОЙ СТРОКИ, и в этот двухпиксельный зазор стал виден красный слой снизу. Отступ должен быть у обёртки, внутри которой лежит и строка, и её красная подложка. */ html.dv2 .ci-swipe{ margin-bottom:2px; } html.dv2 .ci-swipe .ci{ margin-bottom:0; } /* ── Состав готового набора ───────────────────────────────────────────────── */ /* Строки состава шли встык: линейка сверху есть, воздуха нет, и четыре позиции читались одним абзацем. Даём строке высоту и разводим название с ценой. */ html.dv2 .bundle-list{ margin-top:16px; } html.dv2 .bundle-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--line); } html.dv2 .bundle-list li:first-child{ border-top:0; } html.dv2 .bundle-list li b{ font-variant-numeric:tabular-nums; white-space:nowrap; } /* ── Карточка товара: белый лист до самого низа ───────────────────────────── */ /* Лист с описанием стал белым, а страница под ним осталась серой — и у короткого описания под карточкой зияла серая яма до нижней панели. Лист растягивается на остаток экрана: это одна поверхность, а не блок посреди пустоты. */ html.dv2 [data-view="product"]{ display:flex; flex-direction:column; min-height:100dvh; } html.dv2 [data-view="product"] .pd-hero{ flex:none; } html.dv2 .pd-sheet{ flex:1 0 auto; padding-bottom:96px; } /* ── Бегущая строка действительно бежит ───────────────────────────────────── */ /* Содержимое в разметке лежит дважды (см. fillTicker), поэтому сдвиг ровно на половину длины возвращает строку в исходное положение без шва. Скорость взята от длины: короткая строка не должна проноситься за секунду. */ @keyframes dv2-tick{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } } html.dv2 .head .tick .run{ animation:dv2-tick 34s linear infinite; will-change:transform; } html.dv2 .head .tick:hover .run{ animation-play-state:paused; } @media (prefers-reduced-motion:reduce){ html.dv2 .head .tick .run{ animation:none; } } /* ── Порядок блоков главной ───────────────────────────────────────────────── */ /* .js-content — грид, поэтому порядок задаётся стилями, а не пересборкой разметки: приложение продолжает рисовать блоки в удобном ему порядке. Сверху то, ради чего человек пришёл: рубрики, магазины рядом, местное. */ html.dv2 .js-content{ display:grid; } /* Очередь пронумерована ЦЕЛИКОМ, до последнего блока. Стоило подвинуть один блок, оставив остальные в нуле, — и статьи уехали под подвал: у грида порядок задаёт число, а не место элемента в разметке. */ html.dv2 .js-content > *{ order:1; } /* полки магазинов — по умолчанию */ html.dv2 .js-content > .home-head{ order:-4; } /* чипы рубрик */ html.dv2 .js-content > .coll-mp{ order:-3; } /* маркетплейс */ html.dv2 .js-content > .home-picks{ order:-2; } /* местное, Тулагино */ html.dv2 .js-content > .home-bundles{ order:-1; } /* готовые наборы */ html.dv2 .js-content > .home-story{ order:0; } /* рецепт недели с набором */ html.dv2 .js-content > .home-posts{ order:2; } /* остальные материалы */ html.dv2 .js-content > .home-values{ order:3; } /* «о нас» */ html.dv2 .js-content > .home-foot{ order:4; } /* подвал всегда последний */ /* ── Полка местной фермы: цветное поле ────────────────────────────────────── */ /* Единственный ассортимент, которого нет ни у кого другого в городе. На макете он вынесен на цветную плоскость — не ради красоты: полка в общем ряду читается как «ещё один магазин», а это довод купить именно здесь. */ html.dv2 .coll-field{ background:var(--field, oklch(0.93 0.06 128)); padding:28px 0 22px; margin:0; } html.dv2 .coll-field .coll-hdr{ padding-top:0; align-items:baseline; } html.dv2 .coll-field .kick{ color:oklch(0.42 0.05 140); } html.dv2 .coll-field h2{ font-size:35px; max-width:14ch; color:oklch(0.18 0.03 140); } /* Ссылка не помещается рядом с заголовком в 35 кегль и переносится под него — значит она и должна выглядеть отдельной строкой, а не прижиматься к названию. */ html.dv2 .coll-field .js-all{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:oklch(0.30 0.06 145); border-bottom:1px solid currentColor; padding-bottom:3px; white-space:nowrap; margin-top:14px; } html.dv2 .coll-field .muted{ margin-top:12px !important; } html.dv2 .coll-field .muted{ color:oklch(0.38 0.03 140) !important; font-size:14px !important; } html.dv2 .coll-field .coll-row{ padding-top:18px; } html.dv2.dk .coll-field{ background:oklch(0.26 0.04 140); } html.dv2.dk .coll-field h2, html.dv2.dk .coll-field .kick, html.dv2.dk .coll-field .js-all{ color:var(--ink); } /* ── Рецепт недели: материал, который заканчивается корзиной ──────────────── */ html.dv2 .home-story{ background:var(--paper); padding-bottom:18px; } html.dv2 .home-story .story-cover{ display:block; aspect-ratio:16/9; background:var(--tile); overflow:hidden; } html.dv2 .home-story .story-cover img{ width:100%; height:100%; object-fit:cover; display:block; } html.dv2 .home-story .story-tx{ padding:22px 16px 0; } html.dv2 .home-story h2{ font-size:35px; margin-top:10px; max-width:15ch; } html.dv2 .home-story p{ margin-top:10px; color:var(--muted); font-size:14px; line-height:1.45; } html.dv2 .home-story .story-buy{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:20px 16px 0; } html.dv2 .home-story .story-buy .s{ font-size:14px; color:var(--muted); } html.dv2 .home-story .story-buy .s b{ display:block; color:var(--ink); font-variant-numeric:tabular-nums; } html.dv2 .home-story .story-buy .btn{ width:auto; padding:0 20px; height:48px; flex:none; } /* ── Пометки в карточке: подписи, а не плашки ─────────────────────────────── */ /* «От партнёра», «Местное», «Новинка» рисуются прямо в разметке — цвет, фон и скругление в атрибуте style, поэтому только !important. В системе это подписи одного кегля с единицей измерения: три разноцветные пилюли на карточке спорят и с названием, и с ценой, и друг с другом. */ html.dv2 .card .pmark, html.dv2 .card .lmark, html.dv2 .card .new, html.dv2 .card .premark, html.dv2 .tags .pmark, html.dv2 .tags .lmark{ background:transparent !important; padding:0 !important; font-size:9px !important; color:var(--muted) !important; letter-spacing:var(--ls-cap); text-transform:uppercase; } html.dv2 .card .tags{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:3px 12px 0; } /* ── Строка поиска внутри тёмной шапки (каталог) ──────────────────────────── */ /* Поле то же самое, что жило на сером фоне: класс .search менять нельзя, на нём висят обработчики ввода и очистки. Меняем только среду обитания. */ html.dv2 .head .search{ margin:12px 16px 0; background:oklch(1 0 0 / .1); border:0; padding:12px 13px; } html.dv2 .head .search input{ color:var(--on-head); font-size:14px; } html.dv2 .head .search input::placeholder{ color:var(--on-head-2); } html.dv2 .head .search svg{ color:var(--on-head-2); } html.dv2 .head .search .clr{ background:oklch(1 0 0 / .14); color:var(--on-head); } html.dv2 .head:has(.search){ padding-bottom:14px; } /* Переключатель «Арбуз / Маркетплейс» идёт сразу под шапкой, а не липнет к ней */ html.dv2 [data-view="catalog"] .modeseg{ margin:14px 16px; } /* ── Шапка экрана товара ──────────────────────────────────────────────────── */ /* Раньше «назад» и «избранное» висели белыми кружками ПОВЕРХ фотографии: на светлом снимке они терялись, на тёмном спорили с товаром, а название экрана не было видно вовсе. Теперь это обычная шапка — та же плоскость, что на каталоге и главной, и в ней написано, что открыто. */ html.dv2 .pd-head .row{ gap:8px; } html.dv2 .pd-head .loc{ align-items:flex-start; } html.dv2 .pd-head .loc b{ font-size:16px; margin:0; color:var(--on-head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%; } html.dv2 .pd-head .ib{ color:var(--on-head-2); } html.dv2 .pd-head .ib:active{ opacity:.55; } /* Фотография начинается сразу под шапкой — наложения больше нет */ html.dv2 [data-view="product"] .pd-hero{ margin-top:0; } /* ── «От партнёра» уходит с карточки ──────────────────────────────────────── */ /* Три подписи капслоком — единица, «местное», «от партнёра» — не помещаются в карточку шириной 148 и переносятся на три строки: карточка растёт втрое там, где хватает одной строки. Убираем ту, что не несёт информации: на полке маркетплейса ОТ ПАРТНЁРА стоит у каждого товара без исключения. На странице товара она остаётся — там это ответ на вопрос «кто это привезёт», и там есть место. */ /* display стоит в атрибуте style («display:inline-flex»), поэтому скрыть её обычным правилом нельзя — инлайн сильнее любого селектора. */ html.dv2 .card .tags .pmark{ display:none !important; } html.dv2 .card .tags{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; } /* ПОДПИСИ ПЕРЕНОСЯТСЯ, А НЕ ОБРЕЗАЮТСЯ. Сначала я запретил перенос и включил обрезку многоточием — чтобы длинная метка не распирала карточку. Вышло хуже болезни: в карточке шириной 170 три подписи («~4 кг», «Местное», «с 09:00») сжались и обрезались до огрызков — «~4 · МЕ( · С (». Обрезка уместна там, где остаток текста угадывается: в названии товара. В наборе коротких подписей угадывать нечего — каждая обрезанная становится мусором. Поэтому: подписи переносятся на вторую строку целиком, ничего не режется. За ровный низ отвечает не запрет переноса, а прижатая к низу строка цены — сколько бы строк ни заняли подписи, цены соседних карточек стоят на одной линии. */ /* «МЕСТНОЕ» НА МЕСТНОЙ ПОЛКЕ — ЭТО ПОВТОР. У полки Тулагино в подзаголовке написано «Овощи и зелень из Тулагино — села в 26 км к северу от Якутска». Метка «Местное» на каждой карточке той же полки ничего не добавляет, зато занимает целую строку подписей: вместе с фасовкой и временем открытия получалось три строки в карточке высотой 242. В каталоге и поиске, где местное соседствует с привозным, метка остаётся — там она отвечает на настоящий вопрос. */ /* ВРЕМЯ ОТКРЫТИЯ УХОДИТ С КАРТОЧКИ. Пока магазины закрыты, метка «🌙 с 09:00» стоит у КАЖДОГО товара витрины. То, что написано у всех без исключения, не сообщает ничего — зато занимает строку рядом с ценой и налезает на счётчик количества. Факт при этом важный, и он остаётся там, где на него смотрят при решении: одной строкой в шапке витрины («магазины откроются в 09:00»), на странице товара в строке «Соберут» и при оформлении, где выбирают время доставки. */ /* ТРИ БЛОКА ГЛАВНОЙ УБРАНЫ (решение владельца 20.08). Заголовок «Свежее в Якутске» с чипами рубрик, подбор «Местное сегодня» и «Рецепт недели». Общее у них одно: они стояли между человеком и товаром, а отвечали не на его вопрос. Чипы дублируют каталог, до которого один тап снизу. Подбор показывал те же товары Тулагино, что и полка «Местные овощи» следом за ним. Рецепт — материал, которому место в статьях, а не первым экраном. Скрываем стилями, а не удаляем код: блоки живые, данные для них считаются, и вернуть любой — это снять одну строку. */ html.dv2 .js-content > .home-head, html.dv2 .js-content > .home-picks, html.dv2 .js-content > .home-story{ display:none !important; } html.dv2 .h1w{ display:none !important; } html.dv2 .card .tags .premark{ display:none !important; } html.dv2 .coll-field .card .tags .lmark{ display:none !important; } html.dv2 .card .tags{ flex-wrap:wrap; overflow:visible; row-gap:2px; } html.dv2 .card .tags > *{ white-space:nowrap; flex:0 0 auto; overflow:visible; } html.dv2 .card{ display:flex; flex-direction:column; } html.dv2 .card .pr{ margin-top:auto; } /* ГОРОД, ГДЕ НАС ЕЩЁ НЕТ. Над экраном «здесь пока нет магазинов» шапка обещала доставку в этом самом городе и предлагала поиск по каталогу, которого нет. Оба элемента уместны только там, где мы работаем. Остаётся выбор города — единственное осмысленное действие в шапке: уйти туда, где магазины есть. */ html.city-soon .head .loc, html.city-soon .head .srch, html.city-soon .head .tick{ display:none !important; } html.city-soon .head .row{ justify-content:flex-end; } /* ══ ОФОРМЛЕНИЕ ══════════════════════════════════════════════════════════════ У этого экрана не было НИ ОДНОГО правила нового дизайна: он остался на старой системе, где секция — карточка со скруглением и рамкой. Новый слой скругления срезал, рамки обесцветил, и ритм рассыпался: заголовок «Время доставки» садился вплотную к тому, что над ним, поле комментария липло к краю, а внутренние отступы у соседних секций были разными (у шапки 14, у ряда окон 0, у подписи 16). Отсюда ощущение съехавшей вёрстки — не потому что что-то сломано, а потому что ничто не выровнено. Задаём одно правило на все секции: секция во всю ширину, внутри один отступ по краям, между секциями один воздух. Ни одна из них больше не решает сама. */ html.dv2 [data-view="checkout"] .co-sec{ margin:0 0 10px; border:0; background:var(--paper); padding:2px 0 4px; } /* Заголовок секции — подпись того же кегля, что и остальные подписи системы, с воздухом сверху и снизу. Разделительная линия под ним не нужна: секции и так разделены цветом фона, а две границы подряд читаются как ошибка. */ html.dv2 [data-view="checkout"] .co-sec-hdr{ padding:14px 16px 8px; border-bottom:0; align-items:baseline; } html.dv2 [data-view="checkout"] .co-sec-hdr h3{ font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--muted); font-weight:500; } html.dv2 [data-view="checkout"] .co-sec-hdr .co-badge{ background:transparent; padding:0; border-radius:0; font-size:9px; letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--muted); } /* Внутренности секции живут с инлайновыми margin:0 16px — их не переписать, они в атрибуте style. Поэтому секция сама не добавляет боковых полей, и 16 пикселей остаются единственным отступом от края экрана. */ html.dv2 [data-view="checkout"] .co-option{ padding:12px 16px; } html.dv2 [data-view="checkout"] .co-option:not(:last-child){ border-bottom:1px solid var(--tile); } html.dv2 [data-view="checkout"] .co-addr-text{ padding:4px 16px 8px; } html.dv2 [data-view="checkout"] .co-addr-change{ padding:0 16px 14px; } /* Ряд окон доставки: сам ряд отвечает за нижний отступ, кнопки — только за себя. Раньше между рядом и подписью под ним оставалось 14 пикселей от одного правила и 14 от другого, а между заголовком и рядом — ноль. */ html.dv2 [data-view="checkout"] .co-sec [data-slot]{ border-radius:0 !important; font-weight:500 !important; } /* Поле комментария — такая же плоскость, как всё остальное: без скругления, с тем же отступом от края, что у соседних секций. */ html.dv2 [data-view="checkout"] .js-order-comment{ border-radius:0 !important; border-color:var(--tile) !important; } /* Итоги и кнопка оплаты — последний блок экрана, ему нужен воздух снизу, иначе он упирается в нижнее меню. */ html.dv2 [data-view="checkout"] .order-totals{ margin-top:4px; } html.dv2 [data-view="checkout"] .btn.js-place{ border-radius:0 !important; } /* ── Кнопки в тёмной шапке ────────────────────────────────────────────────── */ /* .ib — это