/* sheet.css — LOMON. Палитра снята с баннера бренда СЧЁТОМ ПИКСЕЛЕЙ (_tmp/palette.js), а не глазами: побелка стены, бледное небо, бирюза у берега, тёплый песок, пыльно-розовая рубашка и олива кустов. Имена классов и переменных — из _tokens.js, там же и мерятся по соседям. ⚠ Тёмно-синего тут нет и быть не должно. Первую палитру снимали на глаз — и получился тёмно-синий сайт по светлому средиземноморскому кадру: глаз соврал ровно в главном тоне. Счёт по пикселям показал, что тёмно-синего в баннере НЕТ ВООБЩЕ, самый тёмный частый тон — олива кустов со светлотой 31%. Отсюда тёплый ink вместо морской сини: тёмным на сайте работает почти-чёрный из оливы, а синее осталось только акцентом, каким оно в кадре и есть. ⚠ Внутри этого комментария не должно быть последовательности «звёздочка-слэш»: она закрывает комментарий досрочно и молча съедает весь блок ниже, включая двоеточие-root. Кнопки после такого становятся невидимыми, а сборка остаётся зелёной. ⚠ Шрифты лежат в ОДНОЙ папке с этим файлом, поэтому в url стоит голое имя файла. */ @font-face{font-family:'Bona Nova';font-style:normal;font-weight:400;font-display:swap;src:url('bona-nova-400.woff2') format('woff2')} @font-face{font-family:'Bona Nova';font-style:normal;font-weight:700;font-display:swap;src:url('bona-nova-700.woff2') format('woff2')} @font-face{font-family:'Bona Nova';font-style:italic;font-weight:400;font-display:swap;src:url('bona-nova-400-italic.woff2') format('woff2')} @font-face{font-family:'Lexend Deca';font-style:normal;font-weight:300 700;font-display:swap;src:url('lexend-deca-300-700.woff2') format('woff2')} /* ⚠ Вторая копия этих чисел лежит в VARS файла _tokens.js (нужна ради theme-color и чтобы палитра читалась в доме айдентики). Разъехаться копиям нельзя, поэтому generate.js на старте сверяет их с этим блоком и валит сборку при расхождении. Правишь цвет — правь в обоих местах. Пороги WCAG проверены: _tmp/palcheck.js (21 пара, 0 мимо) до сборки, _tmp/contrast.js по живому дереву после. */ :root{ --lmn-ink:#2f2a24; --lmn-ink-soft:#4a4238; --lmn-paper:#ffffff; --lmn-paper-warm:#f8f4ee; --lmn-sand:#f0e7d9; --lmn-sky:#dceaf4; --lmn-stone:#6b6355; /* ⚠ Приглушённый текст брать ТОЛЬКО отсюда, не из --lmn-stone напрямую. Камень на белом читается, а на тёмной полосе даёт 2.7:1 — серое по тёмному. Тёмные полосы на сайте есть, и любой блок (.postclose, .postsec, .lookword) может однажды на такую полосу переехать; ловить это по одному селектору значит чинить девятнадцать мест по мере того, как заметят. Переменная наследуется, поэтому .weftdark переопределяет её сразу для всего содержимого. */ --lmn-muted:#6b6355; --lmn-sea:#17708a; --lmn-sea-deep:#10586e; /* ⚠ Цвет надкидки (.weftkick) берётся отсюда, а не из --lmn-sea напрямую — по той же причине, что и --lmn-muted выше: полоса может быть тёмной, и лазурь по ink даёт 2.5:1. .weftdark переопределяет эту переменную разом для всего содержимого. Не менять на --lmn-sea в объявлении .weftkick: правило одно, а фонов под ним четыре. */ --lmn-kick:#17708a; /* ⚠ --lmn-surf — бирюза как она в кадре, и она НЕ для текста: на белом даёт 3.5:1, чего хватает элементу интерфейса и не хватает надписи. Текстом идёт затемнённая --lmn-sea. */ --lmn-surf:#3f92b5; --lmn-blush:#d39d9a; --lmn-blush-lit:#edc3bd; --lmn-rule:rgba(47,42,36,.14); --lmn-rule-dark:rgba(255,255,255,.18); --lmn-display:'Bona Nova',Georgia,serif; --lmn-text:'Lexend Deca',system-ui,sans-serif; } *,*::before,*::after{box-sizing:border-box} body{ margin:0; background:var(--lmn-paper); color:var(--lmn-ink); font-family:var(--lmn-text); font-size:17px; font-weight:300; line-height:1.62; -webkit-font-smoothing:antialiased; } /* ⚠ height:auto тут обязателен: генератор ставит в img атрибуты width и height, и без него браузер берёт высоту из атрибута и плющит портретный кадр в квадрат. */ img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3,h4{font-family:var(--lmn-display);font-weight:400;line-height:1.16;margin:0 0 .5em} h1{font-size:clamp(2.1rem,1.35rem + 2.6vw,3.5rem)} h2{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.4rem)} h3{font-size:1.28rem} p{margin:0 0 1.05em} ul,ol{margin:0 0 1.05em;padding-left:1.15em} :focus-visible{outline:3px solid var(--lmn-sea);outline-offset:2px} /* Контейнер: ширина и внутренние поля порознь. Форму min(1180px, 100% - 40px) уже носят несколько соседей, повторять её не за чем. */ .hemrow{width:100%;max-width:1150px;margin-inline:auto;padding-inline:22px} .hemwrap{display:flex;flex-direction:column;min-height:100vh} .hemmain{flex:1 0 auto} /* ---- кнопки ---- */ .hembtn,.hemghost,.hembuy{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--lmn-text);font-size:.95rem;font-weight:500;letter-spacing:.02em; padding:.78em 1.5em;border-radius:2px;border:1px solid transparent; text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s; } /* ⚠ Две кнопки на сайте делают РАЗНОЕ, и раньше они были покрашены наоборот. Навигационная (.hembtn — «смотреть раздел», «открыть подборщик») стояла бирюзовой и звенела на каждой полосе, а кнопка покупки (.hembuy — единственная, ради которой сайт существует) была нейтрально-тёмной. Теперь навигация набрана почти-чёрным, как у магазинов одежды, а бирюза оставлена ровно одной кнопке — той, что ведёт к покупке. Цвет перестал быть украшением и стал указателем. */ .hembtn{background:var(--lmn-ink);color:var(--lmn-paper)} .hembtn:hover{background:var(--lmn-ink-soft)} .hembuy{background:var(--lmn-sea);color:var(--lmn-paper);width:100%;font-weight:500} .hembuy:hover{background:var(--lmn-sea-deep)} /* ⚠ Обводка-кнопка стоит и на светлых полосах, и на тёмных, поэтому подсветка под курсором считается ОТ currentColor, а не задаётся числом. Раньше тут висел белый rgba(255,255,255,.12): на тёмной плитке он работал, а на светлой полосе белое по белому не видно вообще — кнопка выглядела мёртвой, хотя ссылка живая. Ошибка молчаливая: и разметка, и css валидны. */ .hemghost{background:transparent;color:inherit;border-color:currentColor} .hemghost:hover{background:color-mix(in srgb,currentColor 12%,transparent)} /* ---- шапка ---- */ .quayskip{position:absolute;left:-9999px;top:0;background:var(--lmn-ink);color:var(--lmn-paper);padding:.7em 1.2em;z-index:20} .quayskip:focus{left:0} /* ⚠ Шапка светлая, и это не вкусовая правка. Тёмная шапка стояла вплотную к тёмному первому экрану, граница между ними была невидима, и сверху получалась одна тёмная плита в треть экрана: сайт светлой средиземноморской одежды открывался чёрным полем. Тёмное на странице осталось у подвала и двух полос в середине. ⚠ Отбивка от содержимого — волосяная черта, а не тень: шапка залипающая, и при прокрутке тень поехала бы поверх карточек товара. */ .hemhead{position:sticky;top:0;z-index:15;background:var(--lmn-paper);color:var(--lmn-ink); border-bottom:1px solid var(--lmn-rule)} .quaybar{display:flex;align-items:center;gap:1.6em;padding-block:.9em} .quaybrand{flex:0 0 auto;display:block;line-height:0} .quaybrand img{height:34px;width:auto} .quaymenu{display:flex;flex-wrap:wrap;gap:1.35em;margin-left:auto;font-size:.93rem} .quaymenu a{text-decoration:none;padding-block:.2em;border-bottom:1px solid transparent} /* ⚠ Подчерк текущего раздела — единственный признак того, где человек находится, поэтому цвет тут не декоративный. Пыльно-розовый на белом даёт 2.2:1: черта видна на просвет и пропадает на плохом экране, то есть указателя фактически нет. Затемнённая лазурь — 5.6:1. */ .quaymenu a:hover,.quaymenu a[aria-current="page"]{border-bottom-color:var(--lmn-sea)} .quaycta{flex:0 0 auto} /* ---- крошки ---- */ .sailcrumb{font-size:.85rem;color:var(--lmn-muted);padding-block:1.15em} .sailcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45em;margin:0;padding:0} .sailcrumb li::after{content:'/';margin-left:.45em;opacity:.55} .sailcrumb li:last-child::after{content:''} .sailcrumb a{text-decoration:none;border-bottom:1px solid var(--lmn-rule)} /* ---- полосы-секции: фоны чередуются plain / tint / sand / dark ---- ⚠ Тёмных полос на странице теперь ровно две, и обе стоят В СЕРЕДИНЕ (цифры каталога и миссия). Раньше тёмной была каждая полоса-концовка — то есть последнее, что видно перед подвалом, а подвал тоже тёмный: две тёмные плоскости смыкались в одну, и низ страницы читался как обрыв. Концовки переехали на песок. */ .weftband{padding-block:clamp(2.6rem,1.7rem + 3vw,4.4rem)} .weftplain{background:var(--lmn-paper)} .wefttint{background:var(--lmn-paper-warm)} .weftsand{background:var(--lmn-sand)} .weftdark{background:var(--lmn-ink);color:var(--lmn-paper);--lmn-muted:rgba(255,255,255,.78); --lmn-kick:var(--lmn-sky)} /* ⚠ Тут стояла заметка, что правила `.weftdark .weftkick` нет и не надо: тёмных полос было две, и кикера в них не было — правило вышло бы мёртвым. Заодно там было сказано, что делать, если день настанет: чинить НЕ парным правилом на каждый компонент, а переменной, которую .weftdark переопределяет разом. День настал — замыкающая полоса карточки товара тёмная и с кикером, и проба _tmp/contrast.js сразу дала 2.52:1 (лазурь #17708a по ink). Сделано как предписано: цвет кикера вынесен в --lmn-kick, светлая полоса берёт лазурь, тёмная — палевую --lmn-sky того же семейства (11.6:1). Нового цвета в палитре не появилось. ⚠ Правила `.weftdark .hembtn` по-прежнему нет и не надо: кнопка несёт СВОЮ заливку (.hembuy — морская, текст бумажный), поэтому на тёмной полосе читается без правок. Ровно так же тут нет `.weftdark .tideline i` — см. заметку у рейтинга ниже. */ /* ⚠ Изымать отсюда обязан КАЖДЫЙ элемент со своей заливкой. `.weftdark a` (класс+тег) весит больше одного класса, поэтому цвет, заявленный самим компонентом, молча проигрывает: подпись кнопки уходила в розовый по синей заливке, а пилл — в розовый по БЕЛОЙ, и это уже нечитаемо. Список держать одним `:not(...)`, а не цепочкой: у цепочки вес растёт с каждым звеном, и собственные правила компонентов перестают действовать по очереди, молча и не все сразу. */ .weftdark a:not(.hembtn, .hemghost, .cobblepill){color:var(--lmn-blush-lit)} .weftkick{font-size:.79rem;letter-spacing:.15em;text-transform:uppercase;color:var(--lmn-kick);margin:0 0 .55em} .wefttitle{margin:0 0 .45em} .weftsub{max-width:62ch;color:var(--lmn-muted);margin:0 0 2rem} /* Полоса с центрованной начинкой: шапка едет к ней, а не остаётся у левого края. */ .weftmid{text-align:center} .weftmid .weftsub{margin-inline:auto} /* ---- первый экран: слева слово, справа фотография ---- ⚠ Тут была тёмная заливка с двумя радиальными градиентами поверх, тремя цифрами каталога, двумя равновесными кнопками и рейлом из пяти снимков по 64px справа. Всё это ушло, и вот почему по пунктам: - фона не было вообще — под градиентами лежала краска. Магазин одежды первым экраном показывает одежду, а не заголовок; - рейл из пяти мелких снимков в правой колонке читался как боковая колонка поисковой выдачи, а не как витрина, и вдобавок повторял первые пять карточек секции «Picked most» ниже по той же странице; - цифры «254 pieces / 7 sections / 4.3 average rating» интересны владельцу каталога, а не человеку, который пришёл за кофтой. Своя полоса для них на странице есть; - двух одинаковых кнопок рядом не бывает выбором: это вопрос «куда мне вообще». Осталось: кикер, заголовок, одна фраза, одна кнопка и тихая ссылка под ней. */ .covesplit{background:var(--lmn-paper-warm);border-bottom:1px solid var(--lmn-rule)} .covesplit .hemrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:clamp(2rem,1rem + 3vw,3.8rem);align-items:center; padding-block:clamp(2.6rem,1.6rem + 3.4vw,4.6rem)} .covecopy h1{margin-bottom:.4em} /* ⚠ Правило бьёт по ВСЕМ абзацам колонки, а их три: подводка, абзац с кнопкой и абзац со ссылкой. Кнопке и ссылке цвет задают их собственные классы на вложенном , так что наследование до них не доходит — но ширину 46ch они получают, и это как раз нужно. */ .covecopy p{color:var(--lmn-muted);max-width:46ch} .covecopy p:last-child{margin-bottom:0} /* ⚠ Побочный ход набран ссылкой, а не второй кнопкой, — но кликабельным он обязан выглядеть без наведения, иначе это просто серая строчка под кнопкой. Отсюда подчёркивание и стрелка. */ .covelink{display:inline-block;color:var(--lmn-sea);text-decoration:none;font-size:.95rem; border-bottom:1px solid currentColor;padding-bottom:1px} .covelink::after{content:' \2192'} .covelink:hover{color:var(--lmn-sea-deep)} /* ⚠ Кадр вырезан из баннера бренда так, чтобы в него не попали ни плашка «FLOLOW US», ни вплавленный в фотографию словесный знак (подробности — в _tmp/crop.js). Соотношение сторон у него родное, 760x600: тянуть его в портрет нечем, исходный баннер высотой всего 300px. */ .coveshot{min-width:0} .coveshot img{width:100%;border-radius:2px} /* ---- пиллы-запросы ---- */ .cobblerow{display:flex;flex-wrap:wrap;gap:.6rem} /* Заливка своя — значит и цвет текста свой: пилл стоит и на светлой полосе, и на тёмной, а белый кружок наследовать цвет полосы не может, ему нужна тёмная надпись в обоих случаях. */ .cobblepill{display:inline-block;padding:.5em 1.1em;border:1px solid var(--lmn-rule);border-radius:999px; background:var(--lmn-paper);color:var(--lmn-ink);text-decoration:none;font-size:.92rem; transition:background .18s,border-color .18s} .cobblepill:hover{background:var(--lmn-sea);border-color:var(--lmn-sea);color:var(--lmn-paper)} /* ---- usp-полоса ---- */ .briskrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem} .briskitem{border-top:2px solid var(--lmn-sea);padding-top:.95rem} .briskitem h3{font-size:1.06rem;margin:0 0 .3em} .briskitem p{margin:0;font-size:.92rem;color:var(--lmn-muted)} /* ---- сетка и плитка товара ---- Фотографии бренда портретные и разной пропорции, поэтому рамка задаёт форму сама. ⚠ Две ловушки, обе проверены на соседях и закреплены в _verify.js: 1. .pieceplate — флекс-колонка, значит у .piecesnap действует min-height:auto, равный высоте содержимого. Натуральная высота портретного кадра перебивает aspect-ratio, и ряд плиток разъезжается по высоте самого высокого фото. Лечит min-height:0. 2. После этого у обычного потомка height:100% не разрешается против высоты, выведенной из aspect-ratio: кадр остаётся натуральным и лезет на текст. Лечит position:absolute-inset:0, у абсолютного проценты считаются от containing block. */ .piecespread{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem} .pieceplate{display:flex;flex-direction:column;background:var(--lmn-paper);border:1px solid var(--lmn-rule); border-radius:2px;overflow:hidden;text-decoration:none;transition:border-color .18s,transform .18s} .pieceplate:hover{border-color:var(--lmn-sea);transform:translateY(-2px)} .piecesnap{position:relative;display:block;aspect-ratio:1;min-height:0;background:var(--lmn-paper-warm)} .piecesnap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:7%} .piecename{display:block;font-family:var(--lmn-display);font-size:1.04rem;line-height:1.28; padding:.85rem .95rem .35rem;color:var(--lmn-ink)} /* ⚠ Обрезка по двум строкам: нижний отступ тут только margin, НЕ padding. overflow:hidden режет по border-box, поэтому padding-bottom оставляет щель, в которую видно третью строку — обрезанную по горизонтали, с наехавшей на неё полосой рейтинга. Многоточие при этом стоит на месте, и выглядит это не как поломка вёрстки, а как грязный шрифт. */ .piecetrait{padding:0 .95rem;margin-bottom:.5rem;font-size:.87rem;color:var(--lmn-muted); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ⚠ Подпись тут тёмная, а не белая: белое по румяному даёт 2.7:1, и мелкая заглавная надпись на цветном пятне становится нечитаемой. Тёмно-синее по тому же фону — 4.8:1. */ .piecebadge{position:absolute;top:.6rem;left:.6rem;z-index:2;background:var(--lmn-blush);color:var(--lmn-ink); font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;padding:.32em .7em;border-radius:2px} .tickstrip{display:block;padding:0 .95rem .85rem;font-size:.83rem;color:var(--lmn-muted)} /* Рейтинг — полоса прилива вместо звёзд. Жёлоб берётся из currentColor, а не из переменной: карточки стоят и на побелке (weftplain), и на песке (wefttint), и одно правило накрывает оба, потому что цвет текста там уже подобран. ⚠ Правила `.weftdark .tideline i` тут не будет. Оно было написано «на всякий случай, вдруг карточка попадёт на тёмную полосу», а браузерная проба (_tmp/onwhat.js) показала: рейтинг стоит только в weftplain и wefttint, тёмных карточек на сайте нет ни одной. Это был бы мёртвый css — селектор, который никогда не совпадает и которого не видно ни на одном кадре. */ /* Ширина 48px выбрана замером (_tmp/wrap.js), а не на глаз. При 56px строка рейтинга у товара с 9 048 отзывами переставала помещаться в колонку 257px и «ratings» уезжало на вторую строку — 4 карточки из 272. Порог лежит между 54 и 56, но 54 брать нельзя: запас в два пикселя съест первый же товар, у которого счётчик перевалит за 10 000 и станет на знак длиннее, а отзывы только прибавляются. 48px даёт запас и на вид не отличается. ⚠ УЗКОГО ПРАВИЛА ПОД ТЕЛЕФОН ТУТ НЕ БУДЕТ, и вот почему — иначе его заведут снова. На кадре 500px «ratings» съезжает вниз почти у всех карточек, и напрашивается сжать полосу в media-запросе. Замер говорит обратное: на 380px (настоящая ширина телефона) подпись переносится у 264 карточек из 272 ДАЖЕ БЕЗ ПОЛОСЫ — виновата колонка в две плитки, а не полоса. Сжатие помогло бы только в узкой полосе 460–560px, которой почти нет у устройств, и стоило бы читаемости: у полосы 28px разница между 4.1 и 4.5 — два пиксела заливки, то есть полоса перестаёт показывать то единственное, ради чего нарисована. И главное: полоса с отступом занимает 50px против 55.3px у прежних «★★★★☆» (_tmp/starw.js), она УЖЕ звёзд — переносов после замены стало меньше, а не больше. Перенос на телефоне был и до неё. */ .tideline{display:inline-block;width:48px;height:6px;border-radius:3px;overflow:hidden; vertical-align:-1px;margin-right:.15em;background:color-mix(in srgb,currentColor 20%,transparent)} /* ⚠ Полоса — заливка, а не надпись, поэтому ей достаётся --lmn-surf: это бирюза ровно та, что в кадре, и порог для элемента интерфейса (3:1) она берёт. Текстом её ставить нельзя — на белом выходит 3.5:1 при нужных 4.5. */ .tideline i{display:block;height:100%;background:var(--lmn-surf)} /* Цена на плитке. Набрана дисплейной антиквой и крупнее описания: в ряду плиток глаз ищет именно число, и оно должно находиться без чтения. ⚠ Цвет — --lmn-ink, а не акцент. Лазурь на цену просилась, но по побелке она даёт 3.4:1, и ради «поярче» самая нужная строка карточки уехала бы под порог WCAG для обычного текста. ⚠ margin-top:auto стоит ЗДЕСЬ, а не только на .pieceact, и вот почему их два. Прижимает к низу тот элемент, у которого auto; если оставить его лишь на кнопке, между ценой и кнопкой раскроется вся свободная высота плитки, и цена повиснет под описанием отдельно от покупки. Поэтому auto переезжает на цену, а у следующей за ней полосы кнопки он снимается. У плиток без цены (товар без priceValue) правило не сработает — там прижмётся .pieceact, как раньше. */ .pieceworth{display:block;margin-top:auto;padding:0 .95rem;font-family:var(--lmn-display); font-size:1.22rem;line-height:1;color:var(--lmn-ink)} /* ⚠ Полоса кнопки живёт ВНЕ текстового блока и прижата к низу: описания разной длины иначе растаскивают кнопки по ряду и ломают линию. */ .pieceact{margin-top:auto;padding:.7rem .95rem 1rem} .pieceworth + .pieceact{margin-top:.55rem} /* ---- плитки категорий ---- */ .railbay{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem} .railslat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0; aspect-ratio:4/5;overflow:hidden;border-radius:2px;text-decoration:none;color:var(--lmn-paper); background:var(--lmn-ink)} .railslat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1; transition:transform .35s} .railslat:hover img{transform:scale(1.04)} .railslat b,.railslat span{position:relative;z-index:3;padding-inline:1rem} /* ⚠ Числа тут набраны руками, а не взяты из переменной, потому что градиенту нужна альфа, а --lmn-ink это hex. Это ровно тот же ink 47,42,36 — при правке палитры править и здесь. Прежние 18,52,67 были тёмно-синим: подпись раздела лежала на синей вуали поверх тёплого фото, и плитки отдавали холодом, которого в кадре нет. */ .railslat::after{content:'';position:absolute;inset:0;z-index:2; background:linear-gradient(to top,rgba(47,42,36,.88) 12%,rgba(47,42,36,.15) 62%,rgba(47,42,36,.05))} .railslat b{font-family:var(--lmn-display);font-size:1.24rem;font-weight:400;line-height:1.2} .railslat span{font-size:.83rem;color:var(--lmn-blush-lit);padding-bottom:1rem} /* ---- промо-дуэт: тёмная плитка + светлая ---- Две крупные панели в ряд; тёмная ведёт во флагманскую категорию, светлая — в подборщик. */ .duetshelf{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem} .duetpanel{display:flex;flex-direction:column;justify-content:center;gap:.8rem; min-height:300px;padding:2.6rem 2.2rem;border-radius:2px;text-decoration:none} .duetpanel h3{font-size:1.7rem;margin:0} .duetpanel p{margin:0;max-width:38ch} .duetpanel:first-child{background:var(--lmn-ink);color:var(--lmn-paper)} .duetpanel:first-child p{color:rgba(255,255,255,.82)} .duetpanel:last-child{background:var(--lmn-sand);color:var(--lmn-ink)} .duetpanel:last-child p{color:var(--lmn-muted)} /* ---- полоса статистики ---- ⚠ Все четыре числа СЧИТАЮТСЯ из products.json в generate.js. Сочинять их нельзя: каталог перегенерится, а подпись останется и разъедется с витриной. */ .markband{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;text-align:center} .marknum{display:block;font-family:var(--lmn-display);font-size:2.7rem;line-height:1; color:var(--lmn-blush-lit)} .marklabel{display:block;margin-top:.5rem;font-size:.86rem;letter-spacing:.05em; color:rgba(255,255,255,.76)} /* ---- шаги выбора + справочная таблица ---- */ .pickcols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start} .pickflow{list-style:none;counter-reset:rung;margin:0;padding:0} .pickrung{counter-increment:rung;position:relative;padding-left:3.1rem;margin-bottom:1.5rem} .pickrung::before{content:counter(rung);position:absolute;left:0;top:-.1rem; width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%; background:var(--lmn-sea);color:var(--lmn-paper);font-family:var(--lmn-display);font-size:1.05rem} .pickrung b{display:block;font-family:var(--lmn-display);font-size:1.15rem;font-weight:400; color:var(--lmn-ink);margin-bottom:.25rem} .pickrung span{color:var(--lmn-muted);font-size:.95rem} .chartrows{width:100%;border-collapse:collapse;font-size:.92rem} .chartrows caption{text-align:left;font-family:var(--lmn-display);font-size:1.25rem; color:var(--lmn-ink);padding-bottom:.7rem} .chartrows th,.chartrows td{text-align:left;padding:.62rem .7rem;border-bottom:1px solid var(--lmn-rule)} .chartrows th{font-family:var(--lmn-text);font-weight:600;font-size:.8rem;letter-spacing:.06em; text-transform:uppercase;color:var(--lmn-muted)} .chartrows tbody tr:nth-child(odd){background:var(--lmn-paper-warm)} /* ---- spotlight: один герой-товар ---- */ .solowrap{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:3rem;align-items:center} .soloframe{position:relative;aspect-ratio:1;min-height:0;border-radius:2px;overflow:hidden; background:var(--lmn-paper)} .soloframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%} .solobody h3{font-size:2rem;margin:0 0 .8rem} .solobody p{color:var(--lmn-muted);margin:0 0 1.1rem} .solobody .tickstrip{padding:0 0 .9rem} /* ⚠ Тут отменяется и padding, и margin-top:auto. Отступ слева на плитке идёт от края карточки, а в spotlight карточки нет; auto же на не-флексовом .solobody просто ничего не прижимает, но оставлять его значит держать правило, которое врёт о своём назначении. */ .solobody .pieceworth{margin:0 0 1.2rem;padding:0;font-size:1.6rem} /* ---- уход: Do / Don't ---- */ .rinseduo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem} .rinselist{background:var(--lmn-paper);border:1px solid var(--lmn-rule);border-top:3px solid var(--lmn-sea); border-radius:2px;padding:1.8rem} .rinselist:last-child{border-top-color:var(--lmn-blush)} .rinselist h3{font-size:1.3rem;margin:0 0 .9rem} .rinselist ul{list-style:none;margin:0;padding:0} .rinselist li{position:relative;padding-left:1.5rem;margin-bottom:.7rem;font-size:.95rem; color:var(--lmn-muted)} .rinselist li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px; border-radius:50%;background:var(--lmn-sea)} .rinselist:last-child li::before{background:var(--lmn-blush)} /* ---- миссия ---- */ .promisestrip{max-width:66ch;margin-inline:auto;text-align:center} /* Цвет — из --lmn-muted, по той же причине, что у .seeoffband ниже: полоса может переехать. */ .promisestrip p{color:var(--lmn-muted);font-size:1.06rem;margin:0} /* ---- длинная SEO-заметка ---- */ .linennote{max-width:78ch} .linenlede{font-size:1.1rem;color:var(--lmn-ink)} .linenbody p{color:var(--lmn-muted)} .linenbody h3{font-size:1.25rem;margin:2rem 0 .6rem} .linenlist{list-style:none;margin:1.2rem 0;padding:0} .linenlist li{position:relative;padding-left:1.4rem;margin-bottom:.55rem;color:var(--lmn-muted)} .linenlist li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px; background:var(--lmn-sea)} /* ---- цитаты ---- ⚠ Это сочинённые отзывы, и Review/AggregateRating-схемы под ними НЕТ и быть не должно: разметка обещала бы поисковику подтверждённые оценки покупателей. */ .chorusreel{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem} .chorusquote{background:var(--lmn-paper);border:1px solid var(--lmn-rule);border-radius:2px; padding:1.8rem;margin:0} .chorusquote p{font-family:var(--lmn-display);font-size:1.06rem;line-height:1.5; color:var(--lmn-ink);margin:0 0 1rem} .chorusname{display:block;font-size:.83rem;letter-spacing:.05em;color:var(--lmn-muted);font-style:normal} /* ---- финальное закрытие ---- ⚠ Цвет абзаца берётся из --lmn-muted, а не набирается числом. Здесь стоял белый rgba(255,255,255,.84) — верный ровно до того дня, когда полоса-концовка переехала с тёмного фона на песочный: белый текст по песку не читается, а ошибка не роняет ни сборку, ни страницу. Переменная переопределяется самой полосой (.weftdark), поэтому блок ездит по фонам сам. Ради этого --lmn-muted и заведён — см. комментарий у него в :root. */ .seeoffband{max-width:60ch;margin-inline:auto;text-align:center} .seeoffband p{color:var(--lmn-muted);margin:0 0 1.6rem} /* ---- рейл «читать дальше»: карточки заметок ---- */ .postreel{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .postreel a{display:block;background:var(--lmn-paper);border:1px solid var(--lmn-rule); border-radius:2px;padding:1.6rem;text-decoration:none;transition:border-color .18s} .postreel a:hover{border-color:var(--lmn-sea)} .postreel b{display:block;font-family:var(--lmn-display);font-size:1.16rem;font-weight:400; color:var(--lmn-ink);margin-bottom:.45rem} .postreel span{font-size:.92rem;color:var(--lmn-muted)} /* ---- карточка товара (PDP) ---- */ .lookmain{display:grid;grid-template-columns:minmax(0,48%) minmax(0,1fr);gap:3.2rem;align-items:start} /* ⚠ Снимок едет со страницей, и это не украшение, а починка дыры. Фото у нас РОВНО ОДНО на товар (главная картинка листинга), вторым кадром колонку не удлинить, а текста справа вчетверо больше: замер `_tmp/voidcol.js` на шести карточках дал под фото 260–660px пустого белого на 1280 и 304–660 на 1100. То есть у половины страницы левая треть — просто поле. Sticky убирает не пустоту (она остаётся в потоке), а её ВИД: снимок стоит рядом с тем абзацем, который читают, и голого поля глаз не встречает. Механику проверил на футпринт (`_tmp/stickyfp.js`): sticky не на шапке висит у 108 соседей из 186, и почти у всех — ровно на колонке фото карточки (.pdp-img, .product-media, .pdp-shot). Значит это общее место витрин, как img{max-width:100%}, а не примета сети; приметой было бы ИМЯ класса, а оно тут своё. ⚠ Sticky молча умирает от overflow у любого предка — цепочка проверена (`_tmp/stickyfit.js`), все шесть предков visible. ⚠ top=8.5rem, а не «высота шапки»: шапка не одной высоты. Выше 920px она идёт 82px, а в полосе 861–920 меню встаёт лентой на свою строку и шапка вырастает до 131px (`_tmp/headh.js`). Первая попытка с top=6rem честно проезжала под шапку ровно там, и в статике это не видно — только прокруткой (`_tmp/stickygo.js`). ⚠ Число тут пришлось поднимать ДВАЖДЫ, и второй раз — из-за собственной правки: подняв точку переноса меню с 860 до 920 (см. запрос шапки ниже), я сам сделал шапку в этой полосе выше (114 → 131), и top=8rem, только что проверенный, стал мал на три пикселя. Мораль ровно та же, что со сторожем двойников: меняешь измеряемое — перемеряй, а не считай прошлый замер годным. Ставим один запас на всю полосу липкости: лишние 54px воздуха на широком экране прижатому снимку только на пользу, а гоняться за высотой шапки из css нечем — она задаётся содержимым. ⚠ Ниже 860px карточка становится одной колонкой, и там sticky снимается: фото стоит НАД текстом, и липкое оно нависало бы над тем, что читают. */ .lookshot{position:sticky;top:8.5rem;aspect-ratio:1;min-height:0;overflow:hidden;border-radius:2px; border:1px solid var(--lmn-rule);background:var(--lmn-paper)} .lookshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%} .lookside h1{font-size:2.05rem;margin:0 0 .7rem} .lookside .tickstrip{padding:0 0 1rem} .lookside .hembuy{width:100%;justify-content:center;margin-bottom:.8rem} /* Цена на странице товара: число крупно, оговорка под ним мелко. ⚠ Оговорка обязана быть ПОДЧИНЁННОЙ, а не соседней. Раньше цена вообще жила фразой внутри описания («Listed at $32.99 when we last checked…»), то есть число и оговорка весили одинаково — и то, и другое было обычным текстом абзаца. Тут число набрано антиквой в 2.3rem, оговорка — 0.82rem приглушённым: видно сумму, а прочитывается условие. ⚠ .worthnote не убирать «чтобы не мешала»: цена — снимок Creators API на день сборки, обещать её мы не вправе. Правка порядка (цена → кнопка → описание) сделана ради того, чтобы сумма стояла ДО решения, а не после него. */ .lookworth{margin:0 0 1rem} /* ⚠ Цвет числа — inherit, а не var(--lmn-ink). Тот же блок цены стоит теперь дважды: в светлой колонке товара и в тёмной замыкающей полосе. Жёсткий ink на тёмном фоне давал бы почти чёрное на почти чёрном, то есть цену пришлось бы искать. Второе правило `.weftdark .lookworth b` писать нельзя — по той же причине, что расписана у .weftdark выше: тёмная полоса и так переопределяет color и --lmn-muted, и каждый элемент со своей заливкой обязан из этой заливки изыматься, а не обрастать парным правилом. На светлой полосе inherit даёт ink, потому что его несёт body. */ .lookworth b{display:block;font-family:var(--lmn-display);font-size:2.3rem;line-height:1; color:inherit} .worthnote{display:block;margin-top:.45rem;font-size:.82rem;line-height:1.45;color:var(--lmn-muted)} .lookspec + .worthnote{margin:-.9rem 0 1.2rem} /* Замыкающая полоса карточки: цена и кнопка по центру, узкой колонкой. Ширину держим тут, а не шириной полосы: .hemrow общий для всех полос сайта. */ .lookclose{max-width:26rem;margin-inline:auto} .lookclose .hembuy{justify-content:center} .lookword{color:var(--lmn-muted);margin-bottom:1.6rem} .lookword p{margin:0 0 .8rem} .lookspec{list-style:none;margin:0 0 1.7rem;padding:0;border-top:1px solid var(--lmn-rule)} .lookspec li{position:relative;padding:.7rem 0 .7rem 1.5rem;border-bottom:1px solid var(--lmn-rule); font-size:.95rem;color:var(--lmn-ink)} .lookspec li::before{content:'';position:absolute;left:0;top:1.32em;width:8px;height:1px; background:var(--lmn-sea)} .looktrail{margin-top:1.4rem;font-size:.88rem;color:var(--lmn-muted)} .looktrail a{color:var(--lmn-sea-deep)} /* ---- ряд «тот же фасон в другом цвете» ---- Живёт в колонке товара, под списком свойств: выбор цвета — часть выбора этой вещи, а не соседняя витрина. Переносящийся флекс, подпись — первый элемент на всю ширину: отдельный заголовок над рядом потребовал бы ещё одного имени класса, а каждое имя мерится по 217 соседям. ⚠ Плитка узкая (4.6rem), потому что в семье бывает до одиннадцати вещей: шире — и ряд встаёт в четыре этажа и перевешивает описание, ради которого страницу и открыли. */ .dyerow{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.5rem} .dyerow p{flex:0 0 100%;margin:0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase; color:var(--lmn-muted)} .dyerow a{display:block;width:4.6rem;text-decoration:none;color:var(--lmn-ink)} /* ⚠ Рамка на картинке, а не на ссылке: подпись цвета обязана остаться ВНЕ квадрата, иначе имя вроде «Navy Blue White Plaid» распирает квадрат и ряд перестаёт быть рядом. */ .dyerow a img{display:block;width:100%;aspect-ratio:1;object-fit:contain;padding:6%; background:var(--lmn-paper);border:1px solid var(--lmn-rule);border-radius:2px; transition:border-color .18s} .dyerow a:hover img{border-color:var(--lmn-sea)} .dyename{display:block;margin-top:.3rem;font-size:.73rem;line-height:1.25;color:var(--lmn-muted)} /* Подтяжка строки про размер работала от списка свойств; между ними теперь может встать ряд цветов, и без второго селектора отступ на этих карточках разъезжается. */ .dyerow + .worthnote{margin:-.4rem 0 1.2rem} /* ---- ряд «носить с этим» ---- Три плитки, кнопки покупки НЕТ: кнопка на этой странице ведёт на ту вещь, которую читают. Ведём на нашу карточку пары — там своя кнопка и своя цена. */ .wearwith{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem} .pairup{display:flex;flex-direction:column;background:var(--lmn-paper); border:1px solid var(--lmn-rule);border-radius:2px;padding:1rem;text-decoration:none; color:var(--lmn-ink);transition:border-color .18s,transform .18s} .pairup:hover{border-color:var(--lmn-sea);transform:translateY(-2px)} .pairup img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--lmn-paper-warm); border-radius:2px;margin-bottom:.8rem} /* Надкидка — имя раздела: без неё непонятно, почему эта вещь тут стоит. */ .pairup span{font-size:.73rem;letter-spacing:.09em;text-transform:uppercase; color:var(--lmn-sea-deep);margin-bottom:.35rem} .pairup b{font-family:var(--lmn-display);font-size:1.02rem;line-height:1.3;font-weight:400} /* ⚠ Цена прижата к низу, а не отодвинута отступом: названия разной длины иначе растаскивают цены по ряду и ломают линию — та же беда, что чинилась у .pieceact. */ .pairup i{margin-top:auto;padding-top:.6rem;font-family:var(--lmn-display);font-style:normal; font-size:1.1rem;color:var(--lmn-ink)} /* ---- кто везёт и кто принимает назад ---- Стоит у кнопки, а не только на служебной странице: по разбору Baymard 60% покупателей ищут условия возврата прямо на карточке, а 15% из-за них бросали покупку, и на одежде это острее всего. ⚠ Мельче описания, но не мельче оговорки под ценой: это условие сделки, а не сноска. */ .mindease{list-style:none;margin:0 0 1.6rem;padding:0;border-top:1px solid var(--lmn-rule)} .mindease li{position:relative;padding:.6rem 0 .6rem 1.3rem;font-size:.85rem;line-height:1.5; color:var(--lmn-muted)} .mindease li::before{content:'';position:absolute;left:.15rem;top:1.15em;width:5px;height:5px; border-radius:50%;background:var(--lmn-blush)} .mindease a{color:var(--lmn-sea-deep)} /* ---- заметка ---- */ .postroll{max-width:74ch;margin-inline:auto} .posthead h1{font-size:2.3rem;margin:0 0 .7rem} .posthead p{font-size:1.1rem;color:var(--lmn-ink)} .postsec{margin-top:2.4rem} .postsec h2{font-size:1.45rem;margin:0 0 .6rem} .postsec p{color:var(--lmn-muted);margin:0} /* ⚠ В разделе бывает второй абзац (на сервисных страницах их шесть штук), и при margin:0 он встаёт вплотную к первому: два абзаца читаются одной простынёй, а разрыв мысли между ними пропадает. Отступ на p+p, а не на всех p, — иначе он же оторвёт первый абзац от заголовка, у которого уже есть свой margin-bottom. */ .postsec p + p{margin-top:1rem} /* Почтовый адрес на странице контактов. Он стоит ВНУТРИ абзаца, потому что абзац вводит его словами «post reaches the same desk», и разрывать эту связку нечем. ⚠ font-style:normal — та же причина, что в подвале:
браузер набирает курсивом. ⚠ display:block с отступом, а не строкой в тексте: адрес из трёх строк, набранный встык после двоеточия, читается как продолжение предложения, а не как то, что переписывают на конверт. Левая линейка отделяет его от текста, не заводя ещё одной плашки. */ .deskline{display:block;font-style:normal;margin:.9rem 0 0;padding-left:1rem; border-left:2px solid var(--lmn-blush);line-height:1.7;color:var(--lmn-ink)} /* факты — единственная врезка на песке, чтобы длинный текст не шёл сплошняком. ⚠ Класс висит на самом