/* ========================================================================== NEVERLATE · дизайн-система 2.0 · nl.css Форк версии 1.0 (октябрь 2026) с практиками lululemon, Stronger и Gymshark: лёгкие крупные заголовки, регистр предложения в кнопках и секциях, полноширинная сетка товаров, честная информация о посадке, «шторочная» кривая. Все классы 1.0 сохранены, поверх добавлены новые. ========================================================================== */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/montserrat-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/montserrat-latin-ext.woff2") format("woff2"); unicode-range: U+20A0-20AB, U+20AD-20C0; } :root { /* ЦВЕТ · нейтрали (без изменений) */ --ink-900: #221E1C; --ink-700: #4B4743; --ink-500: #6E6A67; --line-400: #C7C3C1; --line-300: #DDDAD7; --surface-200: #F0EEEC; --surface-100: #F8F6F5; --surface-0: #FEFCFB; --on-dark: #FFFFFF; /* 2.0: один тёплый тинт для архива, комплектов и редакционных блоков (Stronger) */ --surface-tint: #F3ECE4; /* ЦВЕТ · акценты строго по смыслу */ --accent: #E04E10; /* путь к оплате, счётчик корзины, точка «мало». Светлее #D04300, белый текст читается. Фирменный #FC5000 — логотип и кампании */ --on-accent: #FFFFFF; /* белый 600 на оранжевом: 4,0:1 — решение владельца (тёмный на оранжевом читался хуже) */ --accent-strong: #D04300; /* 1.0: тёмный оранжевый под белый текст. Во 2.0 не используется */ --accent-soft: #FFEDE3; --sale: #E0203A; /* 2.0: только текст цены со скидкой и ошибки. Без красных плашек */ --sale-soft: #FBE9EA; --success: #15803D; --success-soft: #EDF7F0; --scrim: rgba(34, 30, 28, 0.44); /* ТИПОГРАФИКА 2.0 */ --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* только холст */ --text-2xs: 11px; /* надзаголовки капсом, подписи таб-бара */ --text-xs: 12px; /* подписи, посадка в карточке, старая цена */ --text-sm: 14px; /* названия в списке, кнопки, цены в карточке */ --text-md: 16px; /* основной текст, поля */ --text-lg: 20px; /* 2.0: заголовок секции и товара на телефоне (было 18) */ --text-xl: 24px; /* H1 на телефоне */ --text-2xl: 32px; /* H1 на десктопе */ --text-3xl: clamp(32px, 24px + 2.5vw, 56px); /* заголовки редакционных блоков */ --text-display: clamp(40px, 28px + 4vw, 72px); /* 2.0: герой главной и лендингов */ --leading-display: 1.05; --leading-tight: 1.2; --leading-caps: 1.1; /* 2.0: капс не плотнее 1.1 — запас для Й и Ё */ --leading-base: 1.45; --leading-loose: 1.6; --tracking-display: -0.02em; /* 2.0: от 32 px и выше (lululemon −4%, у широкого Montserrat меньше) */ --tracking-snug: -0.01em; /* 20–24 px */ --tracking-caps: 0.08em; /* только надзаголовки капсом 11–12 px */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* 2.0: только итоговые суммы. Заголовки 400–500 */ /* ОТСТУПЫ · шаг 4 и смысловые имена (Gymshark) */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --gutter: 16px; /* поля страницы на телефоне */ --stack-tight: 4px; /* строки внутри компонента */ --stack-related: 12px; /* связанные элементы */ --stack-group: 24px; /* группы внутри секции */ --section: 48px; /* между секциями на телефоне */ --section-d: 80px; /* между секциями на десктопе */ --grid-gap-x: 4px; /* 2.0: сетка товаров почти встык (Stronger 2, Gymshark 4) */ --grid-gap-y: 24px; --card-inset: 12px; /* текст карточки отбит от края экрана */ /* 2.0 · ритм форм (замечание владельца 13.10, доска Forms): подсказки не прилипают к соседям */ --form-label-gap: 6px; /* подпись → поле */ --form-help-gap: 6px; /* поле → подсказка или ошибка (6–8) */ --form-field-gap: 16px; /* подсказка (или поле без неё) → следующее поле, не меньше */ --form-group-gap: 24px; /* группы внутри секции формы (= --stack-group) */ --form-head-gap: 16px; /* заголовок секции → первый элемент */ /* ФОРМА */ --radius-none: 0; --radius-sm: 4px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(34, 30, 28, 0.06), 0 4px 12px rgba(34, 30, 28, 0.06); --shadow-md: 0 16px 40px rgba(34, 30, 28, 0.16); --photo-dim: brightness(0.9); /* 2.0: приглушение фото под белым текстом вместо градиента */ /* РАЗМЕРЫ */ --tap: 44px; --control-h: 48px; --control-h-lg: 52px; --control-h-sm: 40px; /* 2.0: компактный контрол строки товара — селект размера и степпер, одной высоты и формы */ --header-h: 56px; /* 2.0 (13.10): шапка телефона 56, липкая (лупа 44 / «назад» 44; 14.10 поля поиска в шапке нет); было 52 */ --tabbar-h: 56px; /* ДВИЖЕНИЕ */ --duration-press: 120ms; --duration-fast: 200ms; --duration-base: 320ms; --duration-slow: 520ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* 2.0: шторки и корзина, как в iOS (Stronger) */ /* СЛОИ */ --z-sticky: 200; --z-overlay: 300; --z-sheet: 400; --z-toast: 500; } /* ---------- База ---------- */ .nl { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-base); color: var(--ink-900); background: var(--surface-0); -webkit-font-smoothing: antialiased; font-kerning: normal; } .nl *, .nl *::before, .nl *::after { box-sizing: border-box; } .nl img { display: block; max-width: 100%; } .nl button, .nl input, .nl select, .nl textarea { font-family: inherit; } .nl :focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; } .nl h1, .nl h2, .nl h3, .nl h4, .nl p { margin: 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Текстовые стили 2.0 ---------- */ .t-display { font-size: var(--text-display); line-height: var(--leading-display); font-weight: 400; letter-spacing: var(--tracking-display); } .t-h1 { font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: 500; letter-spacing: var(--tracking-snug); } .t-h1-d { font-size: var(--text-2xl); line-height: 1.15; font-weight: 500; letter-spacing: var(--tracking-display); } .t-h2 { font-size: var(--text-lg); line-height: 1.25; font-weight: 500; letter-spacing: var(--tracking-snug); } .t-h2-d { font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: 500; letter-spacing: var(--tracking-snug); } .t-h3 { font-size: var(--text-md); line-height: 1.3; font-weight: 500; } .t-eyebrow { font-size: var(--text-2xs); line-height: var(--leading-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-500); } .t-product { font-size: var(--text-lg); line-height: 1.25; font-weight: 500; letter-spacing: var(--tracking-snug); } .t-product-d { font-size: 28px; line-height: 1.15; font-weight: 400; letter-spacing: var(--tracking-display); } .t-body { font-size: var(--text-md); line-height: var(--leading-base); } .t-body-sm { font-size: var(--text-sm); line-height: var(--leading-base); } .t-long { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-700); max-width: 68ch; } .t-caption { font-size: var(--text-xs); line-height: 1.4; color: var(--ink-500); } .t-overline { font-size: var(--text-2xs); line-height: var(--leading-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; } .t-price { font-size: var(--text-sm); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .t-price--lg { font-size: var(--text-lg); } .t-price-old { font-size: var(--text-xs); line-height: 1; font-weight: 400; color: var(--ink-500); text-decoration: line-through; font-variant-numeric: tabular-nums; white-space: nowrap; } .t-sale { color: var(--sale); } .t-success { color: var(--success); } .t-muted { color: var(--ink-500); } .t-link { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--line-400); text-underline-offset: 4px; transition: text-decoration-color var(--duration-fast) var(--ease-out); } .t-link:hover, .t-link.is-hover { text-decoration-color: currentColor; } /* Заголовок секции 2.0: надзаголовок капсом + заголовок в регистре предложения + ссылка (Stronger) */ .nl-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); } .nl-sechead__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .nl-sechead__link { flex: none; font-size: var(--text-sm); color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--line-400); text-underline-offset: 4px; } /* ---------- Иконки ---------- */ .i { width: 24px; height: 24px; flex: none; display: block; } .i--20 { width: 20px; height: 20px; } .i--16 { width: 16px; height: 16px; } .i--32 { width: 32px; height: 32px; } /* ---------- Кнопки 2.0: регистр предложения, 14/500, без трекинга ---------- */ .nl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); height: var(--control-h); padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out); } .nl-btn:active, .nl-btn.is-pressed { transform: scale(0.97); } .nl-btn--primary { background: var(--ink-900); color: var(--on-dark); } .nl-btn--primary:hover, .nl-btn--primary.is-hover { background: #3B3633; } .nl-btn--accent { background: var(--accent); color: var(--on-accent); font-weight: 600; } .nl-btn--accent:hover, .nl-btn--accent.is-hover { background: #C94308; } .nl-btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); } .nl-btn--secondary:hover, .nl-btn--secondary.is-hover { background: var(--ink-900); color: var(--on-dark); } .nl-btn--onphoto { background: var(--surface-0); color: var(--ink-900); } .nl-btn--onphoto:hover, .nl-btn--onphoto.is-hover { background: var(--surface-200); } .nl-btn--onphoto-outline { background: transparent; color: var(--on-dark); border-color: var(--on-dark); } .nl-btn--text { height: var(--tap); padding: 0 var(--space-2xs); background: transparent; color: var(--ink-900); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-400); text-underline-offset: 5px; } .nl-btn--text:hover, .nl-btn--text.is-hover { text-decoration-color: var(--ink-900); } .nl-btn--lg { height: var(--control-h-lg); padding: 0 var(--space-xl); font-size: 15px; } .nl-btn--sm { height: 36px; padding: 0 var(--space-md); font-size: var(--text-xs); } .nl-btn--block { display: flex; width: 100%; } /* 2.0: кнопка с состоянием слева и ценой справа (lululemon, Stronger) */ .nl-btn--split { justify-content: space-between; padding: 0 var(--space-lg); } .nl-btn__price { font-variant-numeric: tabular-nums; opacity: 0.86; } .nl-btn:disabled, .nl-btn.is-disabled { background: var(--surface-200); color: var(--ink-500); border-color: transparent; cursor: not-allowed; transform: none; } .nl-btn.is-focus { outline: 2px solid var(--ink-900); outline-offset: 3px; } /* Фокус с клавиатуры по типу кнопки. У текстовой нет рамки вокруг слова: тёмное подчёркивание 2 px и тинт. На фото кольцо прилегает к кнопке, белое внутри и тёмное снаружи, поэтому читается на любом кадре. */ .nl-btn--text:focus-visible, .nl-btn--text.is-focus { outline: none; background: var(--surface-tint); border-radius: var(--radius-sm); text-decoration-color: var(--ink-900); text-decoration-thickness: 2px; } .nl-btn--onphoto:focus-visible, .nl-btn--onphoto.is-focus { outline: none; box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--ink-900); } .nl-btn.is-success { background: var(--ink-900); color: var(--on-dark); } /* 2.0: плавающая панель покупки — пилюля с отступами 16, без белой подложки (Stronger) */ .nl-buybar { position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); display: flex; gap: var(--space-xs); z-index: var(--z-sticky); } .nl-buybar .nl-btn { flex: 1; height: var(--control-h-lg); box-shadow: var(--shadow-md); } .nl-buybar .nl-iconbtn { width: var(--control-h-lg); height: var(--control-h-lg); background: var(--surface-0); box-shadow: var(--shadow-md); } /* 2.0 (13.10): таб-бар есть на всех экранах телефона, кроме оформления — пилюля встаёт прямо над ним */ .nl-buybar--tabbar { bottom: calc(var(--tabbar-h) + var(--space-xs)); } .nl-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-900); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out); } .nl-iconbtn:hover, .nl-iconbtn.is-hover { background: var(--surface-200); } /* Текущий раздел в десктопной шапке (кабинет, избранное, корзина) — черта 2 px под значком, ширина значка 24, на 4 ниже него: как подчёркивание текстовых пунктов меню. 2.0 · 13.10 · волна 3: раньше был постоянный круг 44, у корзины (последняя иконка, значок на R) он заходил в поле на 10 — отметка текущего раздела не выходит за край колонки. Круг остаётся только при наведении на другие иконки; у текущей наведение ничего не добавляет */ .nl-iconbtn[aria-current="page"], .nl-iconbtn[aria-current="page"]:hover { background: transparent; } .nl-iconbtn[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--ink-900); pointer-events: none; } .nl-iconbtn:active { transform: scale(0.92); } .nl-iconbtn--photo:hover { background: rgba(254, 252, 251, 0.6); } /* 2.0: счётчик корзины — единственная оранжевая точка вне чекаута (lululemon) */ .nl-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: var(--text-2xs); font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } /* 2.0 (13.10): счётчик избранного — тёмный: оранжевый остаётся только у корзины */ .nl-count--ink { background: var(--ink-900); color: var(--on-dark); } .nl-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: nl-spin 0.7s linear infinite; flex: none; } /* ---------- Размеры 2.0: плитки с российским размером, сеткой (Gymshark, lululemon) ---------- */ .nl-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); } .nl-size { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; height: var(--control-h-lg); padding: 0 var(--space-sm); border: 1px solid var(--line-400); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--ink-900); font-size: var(--text-sm); font-weight: 500; line-height: 1; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out); } .nl-sizes .nl-size { min-width: 0; width: 100%; } .nl-size__ru { font-size: var(--text-xs); font-weight: 400; color: var(--ink-500); } .nl-size:hover, .nl-size.is-hover { border-color: var(--ink-900); } .nl-size:active { transform: scale(0.96); } .nl-size.is-selected { background: var(--ink-900); border-color: var(--ink-900); color: var(--on-dark); } .nl-size.is-selected .nl-size__ru { color: rgba(255, 255, 255, 0.72); } .nl-size.is-unavailable { color: var(--ink-500); border-color: var(--line-300); background: linear-gradient(to top left, transparent calc(50% - 0.5px), var(--line-400) 50%, transparent calc(50% + 0.5px)), var(--surface-100); } .nl-size.is-low::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* 2.0: строки уверенности рядом с размером */ .nl-fitline { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); line-height: 1.4; color: var(--ink-700); } .nl-fitline strong { font-weight: 500; color: var(--ink-900); } /* 2.0: шкала посадки по отзывам (lululemon, Stronger, Gymshark) */ .nl-fitscale { display: flex; flex-direction: column; gap: 6px; } .nl-fitscale__track { position: relative; height: 4px; border-radius: 2px; background: var(--line-300); } .nl-fitscale__mark { position: absolute; top: -4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink-900); box-shadow: 0 0 0 3px var(--surface-0); } .nl-fitscale__labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--ink-500); } .nl-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 40px; padding: 0 var(--space-md); border: 1px solid var(--line-300); border-radius: var(--radius-pill); background: var(--surface-0); color: var(--ink-900); font-size: var(--text-sm); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out); } .nl-pill:hover, .nl-pill.is-hover { border-color: var(--ink-900); } .nl-pill:active { transform: scale(0.97); } .nl-pill.is-selected { background: var(--ink-900); border-color: var(--ink-900); color: var(--on-dark); } .nl-pill__count { font-size: var(--text-xs); opacity: 0.72; font-variant-numeric: tabular-nums; } /* 2.0: тег «для чего» — серая плашка со стрелкой (Stronger) */ .nl-tag { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-sm); background: var(--surface-200); color: var(--ink-900); font-size: var(--text-xs); font-weight: 500; text-decoration: none; white-space: nowrap; } .nl-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .nl-swatch > span { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(34, 30, 28, 0.14); } .nl-swatch.is-selected::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid var(--ink-900); } /* 3-я волна (owner-notes 13.10): миниатюра цвета 64 × 85 (3:4), выбранная — рамка 2 с отступом 2 (было 56 и 1,5) */ .nl-thumb { flex: none; display: block; width: 64px; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-200); cursor: pointer; transition: outline-color var(--duration-fast) var(--ease-out); outline: 2px solid transparent; outline-offset: 2px; position: relative; } .nl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .nl-thumb.is-selected { outline-color: var(--ink-900); } .nl-thumb__dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--sale); box-shadow: 0 0 0 2px var(--surface-0); } /* ---------- 3-я волна · страница товара: цвет без подписей и параметры модели (owner-notes 13.10) ---------- Доски: Selectors (правило), D-/M-Product, PDPBlocks, USP. Демо: product.js. Под миниатюрами подписей нет: имя цвета — в строке «Цвет: ● Название» над рядом. Наведение и фокус на миниатюре временно показывают там её цвет, уход — снова выбранный. У каждой миниатюры aria-label с названием цвета, у выбранной — aria-current (ссылка на соседний товар) или aria-checked (радио). */ .nl-colorname { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: var(--text-sm); line-height: 1.4; color: var(--ink-500); } .nl-colorname b { overflow: hidden; font-weight: 500; color: var(--ink-900); white-space: nowrap; text-overflow: ellipsis; } .nl-colorname__note { flex: none; color: var(--ink-500); } .nl-cicon { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(34, 30, 28, 0.14); } /* Ряд миниатюр: зазор 8. Десктоп — перенос строк; телефон — лента с прокруткой до края экрана, без полосы */ .nl-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .nl-thumbs > li { display: flex; } .nl-thumbs--strip { flex-wrap: nowrap; margin: -4px calc(-1 * var(--chiprow-pad, 16px)); padding: 4px var(--chiprow-pad, 16px); overflow-x: auto; overscroll-behavior-x: contain; scroll-padding: 0 var(--chiprow-pad, 16px); scrollbar-width: none; } .nl-thumbs--strip::-webkit-scrollbar { display: none; } .nl-thumb[aria-current="true"] { cursor: default; } .nl-thumb.is-hover { outline-color: var(--line-400); } @media (hover: hover) and (pointer: fine) { .nl-thumb:not(.is-selected):hover { outline-color: var(--line-400); } } /* Фокус с клавиатуры — кольцо внутри фото (тёмное 2 + светлое 2): не путается с рамкой выбранной и не лезет в зазор 8 */ .nl-thumb:focus-visible { outline-color: transparent; } .nl-thumb.is-selected:focus-visible { outline-color: var(--ink-900); } .nl-thumb:focus-visible::after, .nl-thumb.is-focus::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ink-900), inset 0 0 0 4px var(--surface-0); pointer-events: none; } /* Параметры модели · строка под размерами: «На фото: размер S · рост [N] · грудь [N] · талия [N] · бёдра [N] см» + «Сравнить с таблицей». Пары «грудь [N]» не рвутся; на телефоне строка переносится на две. Ссылка открывает таблицу размеров с подсвеченной строкой размера модели */ .nl-fitline.nl-modelline { align-items: flex-start; } .nl-modelline > .i { flex: none; margin-top: 1px; } .nl-modelline__p { white-space: nowrap; } .nl-modelline__link { display: inline; padding: 0; border: 0; background: none; color: var(--ink-900); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-400); text-underline-offset: 3px; white-space: nowrap; cursor: pointer; transition: text-decoration-color var(--duration-fast) var(--ease-out); } .nl-modelline__link:focus-visible { outline: none; border-radius: 2px; background: var(--surface-tint); text-decoration-color: var(--ink-900); text-decoration-thickness: 2px; } @media (hover: hover) and (pointer: fine) { .nl-modelline__link:hover { text-decoration-color: currentColor; } } /* Параметры модели · блок в «Как сидит»: размер на фото, рост, грудь, талия, бёдра; вторая модель — вторая строка */ .nl-modelparams { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--ink-900); } .nl-modelparams caption { padding-bottom: 6px; font-size: 13px; text-align: left; color: var(--ink-500); } .nl-modelparams th { padding: 0 12px 6px 0; font-size: var(--text-xs); font-weight: 400; text-align: left; color: var(--ink-500); white-space: nowrap; } .nl-modelparams td { padding: 8px 12px 8px 0; border-top: 1px solid var(--line-300); white-space: nowrap; } .nl-modelparams td:first-child { font-weight: 500; } .nl-modelparams th:last-child, .nl-modelparams td:last-child { padding-right: 0; } /* Таблица размеров: строка размера модели, подсвеченная по «Сравнить с таблицей» */ .nl-table tr.is-model th, .nl-table tr.is-model td { background: var(--surface-tint); color: var(--ink-900); font-weight: 500; box-shadow: inset 0 1px 0 var(--ink-900), inset 0 -1px 0 var(--ink-900); } /* ---------- конец блока 3-й волны (страница товара) ---------- */ /* 2.0: бейджи нейтральные, один на фото. Скидка — текстом в цене, не плашкой (lululemon) */ .nl-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-xs); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--ink-900); font-size: var(--text-2xs); font-weight: 500; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; } .nl-badge--tint { background: var(--surface-tint); color: var(--ink-700); } .nl-badge--dark { background: var(--ink-900); color: var(--on-dark); } .nl-badge--soft { background: var(--surface-200); color: var(--ink-700); } .nl-badge--success { background: var(--success-soft); color: var(--success); } .nl-badge--sale { background: var(--sale); color: var(--on-dark); } /* наследие 1.0: в 2.0 на фото не используется */ /* 2.0: чип модели на фото — «Рост 172 · S» (Stronger) */ .nl-modelchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-sm); background: rgba(254, 252, 251, 0.92); color: var(--ink-900); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; } /* 2.0: свойства изделия иконками (Stronger) */ .nl-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); } .nl-feature { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-2xs); text-align: center; font-size: var(--text-xs); line-height: 1.3; color: var(--ink-700); } .nl-feature .i { width: 32px; height: 32px; color: var(--ink-900); } /* ---------- Поля (без изменений 1.0) ---------- */ .nl-field { display: flex; flex-direction: column; gap: var(--form-label-gap); min-width: 0; } /* подпись → поле → подсказка по 6; соседние поля и группы разводит родитель: --form-field-gap, --form-group-gap */ .nl-label { font-size: var(--text-xs); font-weight: 500; line-height: 1.3; color: var(--ink-700); } .nl-input { width: 100%; height: var(--control-h-lg); padding: 0 var(--space-md); border: 1px solid var(--line-400); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--ink-900); font-size: var(--text-md); line-height: 1.2; -webkit-appearance: none; appearance: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .nl-input::placeholder { color: var(--ink-500); } .nl-input:hover, .nl-input.is-hover { border-color: var(--ink-500); } .nl-input:focus, .nl-input.is-focus { outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-900); } .nl-input.is-error { border-color: var(--sale); box-shadow: 0 0 0 1px var(--sale); } .nl-input:disabled, .nl-input.is-disabled { background: var(--surface-200); color: var(--ink-500); border-color: var(--line-300); } .nl-textarea { height: auto; min-height: 104px; padding: 14px var(--space-md); line-height: var(--leading-base); resize: vertical; } .nl-input-wrap { position: relative; } .nl-input-wrap > .nl-input { padding-right: 52px; } .nl-input-wrap > .nl-input-addon { position: absolute; top: 4px; right: 4px; } .nl-input-wrap > .i { position: absolute; top: 50%; right: 14px; margin-top: -12px; pointer-events: none; color: var(--ink-700); } .nl-help { font-size: var(--text-xs); line-height: 1.4; color: var(--ink-500); } .nl-help--error { color: var(--sale); } .nl-check { position: relative; display: flex; align-items: flex-start; gap: var(--space-sm); min-height: var(--tap); padding: 11px 0; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-900); cursor: pointer; } .nl-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .nl-check__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--ink-500); border-radius: var(--radius-sm); background: var(--surface-0); color: transparent; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .nl-check.is-checked .nl-check__box, .nl-check input:checked + .nl-check__box { background: var(--ink-900); border-color: var(--ink-900); color: var(--on-dark); } .nl-check--radio .nl-check__box { border-radius: 50%; } .nl-check--radio.is-checked .nl-check__box, .nl-check--radio input:checked + .nl-check__box { background: var(--surface-0); box-shadow: inset 0 0 0 5px var(--ink-900); } .nl-check.is-error .nl-check__box { border-color: var(--sale); } .nl-option { display: flex; align-items: flex-start; gap: var(--space-sm); width: 100%; padding: var(--space-md); border: 1px solid var(--line-300); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--ink-900); text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .nl-option:hover, .nl-option.is-hover { border-color: var(--ink-500); } .nl-option.is-selected { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); } .nl-option__radio { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--ink-500); transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .nl-option.is-selected .nl-option__radio { border-color: var(--ink-900); box-shadow: inset 0 0 0 5px var(--ink-900); } .nl-option__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .nl-option__title { font-size: var(--text-sm); font-weight: 500; line-height: 1.3; } .nl-option__meta { font-size: var(--text-xs); line-height: 1.4; color: var(--ink-500); } .nl-option__price { margin-left: auto; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; } /* 2.0 (13.10, решение владельца): количество — значение, поэтому прямоугольник 4, как поле и плитка размера, а не пилюля. Компактный контрол 40 (тот же, что селект размера .nl-selectbtn); зона нажатия кнопок 40 × 44 */ .nl-stepper { display: inline-flex; align-items: center; height: var(--control-h-sm); border: 1px solid var(--line-400); border-radius: var(--radius-sm); } .nl-stepper button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: 100%; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-900); cursor: pointer; } .nl-stepper button::before { content: ""; position: absolute; inset: -3px 0; } @media (hover: hover) and (pointer: fine) { .nl-stepper button:not(:disabled):hover { background: var(--surface-200); } } .nl-stepper button:disabled { color: var(--line-400); cursor: not-allowed; } .nl-stepper output, .nl-stepper span { min-width: 24px; text-align: center; font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; } .nl-switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--line-400); transition: background-color var(--duration-fast) var(--ease-out); } .nl-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--on-dark); box-shadow: var(--shadow-sm); transition: transform var(--duration-base) var(--ease-out); } .nl-switch.is-on { background: var(--ink-900); } .nl-switch.is-on::after { transform: translateX(18px); } /* ---------- Аккордеон, вкладки, крошки ---------- */ .nl-acc { border-top: 1px solid var(--line-300); } .nl-acc--last { border-bottom: 1px solid var(--line-300); } .nl-acc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: 100%; min-height: 56px; padding: 0; border: 0; background: transparent; color: var(--ink-900); font-size: var(--text-md); font-weight: 500; text-align: left; cursor: pointer; } .nl-acc__head .i { transition: transform var(--duration-base) var(--ease-out); } .nl-acc.is-open .nl-acc__head .i { transform: rotate(180deg); } .nl-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease-out); } .nl-acc.is-open .nl-acc__body { grid-template-rows: 1fr; } .nl-acc__inner { overflow: hidden; } .nl-acc__content { padding: 0 0 var(--space-md); font-size: var(--text-sm); line-height: var(--leading-loose); color: var(--ink-700); } .nl-tabs { display: flex; gap: var(--space-lg); border-bottom: 1px solid var(--line-300); } .nl-tab { position: relative; height: var(--tap); padding: 0; border: 0; background: transparent; color: var(--ink-500); font-size: var(--text-sm); font-weight: 500; cursor: pointer; white-space: nowrap; transition: color var(--duration-fast) var(--ease-out); } .nl-tab.is-active { color: var(--ink-900); } .nl-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink-900); } .nl-seg { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-200); } .nl-seg button { height: 36px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-700); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .nl-seg button.is-active { background: var(--surface-0); color: var(--ink-900); box-shadow: var(--shadow-sm); } .nl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-xs); line-height: 1.4; color: var(--ink-500); } .nl-crumbs a { color: var(--ink-500); text-decoration: none; } .nl-crumbs a:hover { color: var(--ink-900); } .nl-crumbs [aria-current] { color: var(--ink-900); } .nl-hr { height: 1px; margin: 0; border: 0; background: var(--line-300); } /* ---------- Карточка товара 2.0 ---------- */ /* Сетка во всю ширину экрана, фото почти встык, текст отбит 12 px (lululemon, Stronger, Gymshark) */ .nl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap-x); row-gap: var(--grid-gap-y); } .nl-card { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; color: var(--ink-900); text-decoration: none; } .nl-card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-200); } .nl-card__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .nl-card__media img.is-alt { position: absolute; inset: 0; opacity: 0; } /* 1.0: «второе фото по наведению» отменено 13.10, кадр всегда скрыт */ /* 2.0 · 13.10: на десктопе наведение листает фото по зонам. В ссылке фото: первое , кадры .nl-card__shot--2…5, .nl-card__zones и .nl-card__segs — по на каждое фото (до 5). Одно фото — ни зон, ни полос */ .nl-card .nl-card__media img.nl-card__shot { position: absolute; inset: 0; opacity: 0; transition: none; } /* кадр меняется сразу */ .nl-card__zones, .nl-card__segs { display: none; } @media (hover: hover) and (pointer: fine) { .nl-card__zones { position: absolute; inset: 0; display: flex; } .nl-card__zones > span { flex: 1; } /* Полосы — тёмные на белой плашке 92 % (как чип «1 / 5» в галерее): видны и на светлом студийном, и на тёмном фото. Плашка слева внизу, по центру высоты «+» 36: 8 + (36 − 14) / 2 = 19 */ .nl-card__segs { position: absolute; left: var(--space-xs); bottom: 19px; gap: 4px; padding: 6px var(--space-xs); border-radius: var(--radius-pill); background: rgba(254, 252, 251, 0.92); pointer-events: none; } .nl-card__segs > span { flex: none; width: 16px; height: 2px; border-radius: 1px; background: rgba(34, 30, 28, 0.24); } .nl-card__media:hover .nl-card__segs { display: flex; } .nl-card__media:has(.nl-card__zones > :nth-child(2):hover) .nl-card__shot--2, .nl-card__media:has(.nl-card__zones > :nth-child(3):hover) .nl-card__shot--3, .nl-card__media:has(.nl-card__zones > :nth-child(4):hover) .nl-card__shot--4, .nl-card__media:has(.nl-card__zones > :nth-child(5):hover) .nl-card__shot--5 { opacity: 1; } .nl-card__media:not(:has(.nl-card__zones > :hover)) .nl-card__segs > :first-child, .nl-card__media:has(.nl-card__zones > :nth-child(1):hover) .nl-card__segs > :nth-child(1), .nl-card__media:has(.nl-card__zones > :nth-child(2):hover) .nl-card__segs > :nth-child(2), .nl-card__media:has(.nl-card__zones > :nth-child(3):hover) .nl-card__segs > :nth-child(3), .nl-card__media:has(.nl-card__zones > :nth-child(4):hover) .nl-card__segs > :nth-child(4), .nl-card__media:has(.nl-card__zones > :nth-child(5):hover) .nl-card__segs > :nth-child(5) { background: var(--ink-900); } /* Панель размеров над фото открыта (.is-open) — фото не листается, полос нет */ .nl-card__media:has(.is-open) .nl-card__zones, .nl-card__media:has(.is-open) .nl-card__segs { display: none; } } .nl-card__badges { position: absolute; top: var(--space-xs); left: var(--space-xs); display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .nl-card__fav { position: absolute; top: var(--space-2xs); right: var(--space-2xs); } /* отступ 4: круг наведения 44 целиком на фото, не режется краем */ .nl-card__dots { position: absolute; left: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs); display: flex; gap: 3px; } .nl-card__dots span { flex: 1; height: 2px; border-radius: 1px; background: rgba(254, 252, 251, 0.55); } .nl-card__dots span.is-active { background: var(--surface-0); } /* 2.0: «+» — квадрат со скруглением 4 в углу фото (Stronger) */ .nl-card__quick { position: absolute; right: var(--space-xs); bottom: var(--space-xs); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--surface-0); color: var(--ink-900); cursor: pointer; transition: transform var(--duration-press) var(--ease-out); } .nl-card__quick::before { content: ""; position: absolute; inset: -4px; } .nl-card__quick:active { transform: scale(0.92); } .nl-card__body { display: flex; flex-direction: column; gap: var(--stack-tight); padding: 0 var(--card-inset); } .nl-card__name { font-size: var(--text-sm); line-height: 1.35; font-weight: 400; color: var(--ink-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ===== 3-я волна · 14.10 · строка свойств (владелец 13.10: «в разных местах по-разному свойства написаны») ===== Надзаголовка над названием нет (.nl-card__eyebrow снят). Под названием ОДНА серая строка .nl-card__fit: «[польза] · [посадка, поддержка или силуэт]» словами из словаря доски «Голос и нейминг», не больше двух частей, одна строка. 14.10 (как в демо): вторая часть, которая не влезает рядом с первой, уходит целиком — слово не режем («Утягивают · Высокая посадка» в плитке 169 → «Утягивают»); многоточие — только если не влезает и первая часть. Нет данных — пустой : название держит 2 строки, строка свойств — 1, поэтому цены в ряду стоят на одной линии. Баллов NEVERLATE CLUB на плитках нет. Распроданная модель: строка свойств та же, «Нет в наличии» — бейдж на фото (фото 50 %), не вместо строки. Компактные плитки «Добавьте к заказу» (мини-корзина, шторки) — название и цена, без строки свойств */ .nl-card > .nl-card__body > .nl-card__name { min-height: calc(2em * 1.35); } .nl-card__fit { display: block; min-width: 0; min-height: calc(1em * 1.35); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-xs); line-height: 1.35; color: var(--ink-500); } /* Строка по частям: Утягивают · Высокая посадка. Вторая часть с разделителем — отдельный блок: не влезла — переносится на вторую строку, которую обрезает высота, то есть уходит целиком; первая длиннее строки — многоточие. Для экранного диктора текст строки полный */ .nl-card__fit--parts { display: flex; flex-wrap: wrap; height: calc(1em * 1.35); } .nl-card__pp { flex: none; max-width: 100%; overflow: hidden; white-space: pre; text-overflow: ellipsis; } .nl-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); margin-top: 2px; } .nl-card__meta { font-size: var(--text-xs); line-height: 1.3; color: var(--ink-500); } .nl-card__swatches { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--text-xs); color: var(--ink-500); } .nl-card__swatches > span:not(:last-child) { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(34, 30, 28, 0.16); } .nl-card__rating { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--ink-700); font-variant-numeric: tabular-nums; } .nl-card.is-soldout .nl-card__media img:not(.nl-card__shot) { opacity: 0.5; } /* кадры листания не проявляются сами */ /* 2.0: карточка линейки над листингом (lululemon) */ .nl-linecard { flex: none; display: flex; flex-direction: column; width: 220px; background: var(--surface-0); border: 1px solid var(--line-300); color: var(--ink-900); text-decoration: none; } .nl-linecard__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-200); } .nl-linecard__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .nl-linecard__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm); } .nl-linecard__title { font-size: var(--text-md); font-weight: 500; } .nl-linecard__row { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--text-xs); line-height: 1.4; color: var(--ink-700); } /* 2.0: плитка с фото и живой подписью поверх (Stronger) */ .nl-tile { position: relative; display: block; overflow: hidden; background: var(--surface-200); color: var(--on-dark); text-decoration: none; } .nl-tile img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-dim); } .nl-tile__caption { position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); display: flex; flex-direction: column; gap: 4px; } .nl-tile__title { font-size: var(--text-lg); line-height: 1.2; font-weight: 500; letter-spacing: var(--tracking-snug); } .nl-tile__link { font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 4px; } /* ---------- Шапка, промо, таб-бар, меню ---------- */ .nl-promo { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); height: 32px; padding: 0 var(--space-md); background: var(--ink-900); color: var(--on-dark); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; } .nl-header { display: flex; align-items: center; gap: var(--space-2xs); height: var(--header-h); padding: 0 var(--space-2xs); background: var(--surface-0); border-bottom: 1px solid var(--line-300); } .nl-logo { display: inline-flex; align-items: center; color: var(--ink-900); text-decoration: none; } /* 2.0 (14.10): шапка телефона — на корне вкладки логотип и лупа (.nl-header--root), на внутренней странице «назад» и лупа (.nl-header--inner) — см. раздел «Шапка телефона: лупа всегда». Поля поиска в шапке страницы нет: .nl-header--search с полем .nl-hsearch — только шапка выдачи поиска (поле с запросом). Корзины и профиля в шапке нет: они в таб-баре. Шапка липкая и при прокрутке не прячется */ .nl-header--search { gap: var(--space-xs); padding: 0 var(--space-md) 0 var(--space-2xs); } .nl-header--search > .nl-logo { flex: none; height: var(--tap); padding: 0 var(--space-2xs) 0 var(--space-sm); } .nl-hsearch { display: flex; align-items: center; gap: var(--space-xs); flex: 1; min-width: 0; height: 40px; padding: 0 var(--space-md) 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--surface-200); color: var(--ink-500); font-family: inherit; font-size: var(--text-md); line-height: 1; text-align: left; text-decoration: none; white-space: nowrap; cursor: text; } .nl-hsearch .i { flex: none; color: var(--ink-700); } .nl-hsearch span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nl-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--tabbar-h); background: var(--surface-0); border-top: 1px solid var(--line-300); } .nl-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-500); font-size: var(--text-2xs); font-weight: 500; line-height: 1.1; text-decoration: none; } .nl-tabbar a.is-active { color: var(--ink-900); } .nl-tabbar .nl-count { top: 3px; right: calc(50% - 22px); } /* 2.0: строки меню и переход вглубь (lululemon, Stronger, Gymshark) */ .nl-menurow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 56px; padding: 0 var(--gutter); color: var(--ink-900); font-size: var(--text-lg); font-weight: 400; letter-spacing: var(--tracking-snug); text-decoration: none; } .nl-menurow--sm { min-height: 48px; font-size: var(--text-md); } .nl-menurow .i { color: var(--ink-500); } .nl-menugroup { padding: var(--space-lg) var(--gutter) var(--space-xs); } .nl-drillhead { display: flex; align-items: center; gap: var(--space-2xs); height: var(--header-h); padding: 0 var(--space-2xs); border-bottom: 1px solid var(--line-300); font-size: var(--text-sm); color: var(--ink-700); } /* ---------- Шторки, окна, тосты ---------- */ .nl-scrim { position: absolute; inset: 0; background: var(--scrim); } .nl-sheet { position: relative; display: flex; flex-direction: column; background: var(--surface-0); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-md); overflow: hidden; } .nl-sheet__grab { flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--line-400); } .nl-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: 56px; padding: 0 var(--space-2xs) 0 var(--space-md); } .nl-sheet__title { font-size: var(--text-lg); font-weight: 500; line-height: 1.25; letter-spacing: var(--tracking-snug); } .nl-sheet__body { padding: 0 var(--space-md) var(--space-md); overflow: auto; } .nl-sheet__foot { display: flex; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) 28px; border-top: 1px solid var(--line-300); background: var(--surface-0); } .nl-modal { position: relative; display: flex; flex-direction: column; background: var(--surface-0); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .nl-drawer { position: relative; display: flex; flex-direction: column; background: var(--surface-0); box-shadow: var(--shadow-md); } .nl-sticky { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md) 28px; background: var(--surface-0); border-top: 1px solid var(--line-300); box-shadow: 0 -8px 24px rgba(34, 30, 28, 0.06); } /* 2.0 (13.10): «Итого · Оформить заказ» в корзине стоит прямо над таб-баром — safe-area забирает таб-бар */ .nl-sticky--tabbar { padding-bottom: var(--space-sm); } /* 2.0: прогресс до бесплатной доставки — ink, не акцент (Stronger, Gymshark) */ .nl-progress { display: flex; flex-direction: column; gap: var(--space-xs); } .nl-progress__track { height: 4px; border-radius: 2px; background: var(--line-300); overflow: hidden; } .nl-progress__fill { height: 100%; border-radius: 2px; background: var(--ink-900); transform-origin: left center; animation: nl-grow var(--duration-slow) var(--ease-out) both; } .nl-progress__text { font-size: var(--text-sm); line-height: 1.4; color: var(--ink-900); } .nl-toast { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--ink-900); color: var(--on-dark); font-size: var(--text-sm); font-weight: 500; line-height: 1.35; box-shadow: var(--shadow-md); } .nl-toast__action { margin-left: auto; padding: 0; border: 0; background: none; color: var(--on-dark); font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; white-space: nowrap; } .nl-alert { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--surface-100); color: var(--ink-900); font-size: var(--text-sm); line-height: 1.45; } .nl-alert--error { background: var(--sale-soft); } .nl-alert--error > .i { color: var(--sale); } .nl-alert--success { background: var(--success-soft); } .nl-alert--success > .i { color: var(--success); } .nl-alert--accent { background: var(--accent-soft); } .nl-alert--tint { background: var(--surface-tint); } .nl-skel { background: linear-gradient(100deg, var(--surface-200) 30%, var(--surface-100) 50%, var(--surface-200) 70%); background-size: 300% 100%; animation: nl-shimmer 1.6s var(--ease-in-out) infinite; border-radius: var(--radius-sm); } /* ---------- 2.0: служебные страницы (lululemon Help Centre, Stronger FAQ) ---------- */ .nl-quick { display: flex; align-items: center; gap: var(--space-sm); min-height: 64px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--line-300); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--ink-900); text-decoration: none; } .nl-quick__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .nl-quick__title { font-size: var(--text-md); font-weight: 500; } .nl-quick__meta { font-size: var(--text-xs); color: var(--ink-500); } .nl-summary { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-sm); background: var(--surface-tint); } .nl-steps { display: flex; flex-direction: column; gap: var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: nl-step; } .nl-steps > li { position: relative; padding-left: 40px; counter-increment: nl-step; font-size: var(--text-md); line-height: var(--leading-base); } .nl-steps > li::before { content: counter(nl-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-900); color: var(--on-dark); font-size: var(--text-sm); font-weight: 500; line-height: 28px; text-align: center; } .nl-table-wrap { overflow-x: auto; border: 1px solid var(--line-300); border-radius: var(--radius-sm); } .nl-table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .nl-table th, .nl-table td { height: 44px; padding: 0 var(--space-sm); border-bottom: 1px solid var(--line-300); text-align: left; white-space: nowrap; } .nl-table thead th { background: var(--surface-100); font-size: var(--text-xs); font-weight: 500; color: var(--ink-700); } .nl-table th:first-child, .nl-table td:first-child { position: sticky; left: 0; background: var(--surface-0); font-weight: 500; box-shadow: 1px 0 0 var(--line-300); } .nl-table thead th:first-child { background: var(--surface-100); } .nl-table tr.is-hl td { background: var(--surface-tint); } /* 2.0 · 14.10 · Таблица размеров одной модели на телефоне (шторка размера, вкладка «Таблица»): 5 колонок помещаются в 358 без прокрутки — «Грудь» не обрезается, по «Сравнить с таблицей» все мерки модели видны сразу. Поля ячеек 6, цифры 13. Общая таблица всех размеров (страница «Размеры») остаётся с прокруткой и липкой первой колонкой */ .nl-table--fit { font-size: 13px; } .nl-table--fit th, .nl-table--fit td { padding: 0 6px; } .nl-table--fit thead th { font-size: 12px; } /* ---------- Движение: ключевые кадры и классы ---------- */ @keyframes nl-spin { to { transform: rotate(360deg); } } @keyframes nl-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } @keyframes nl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } } @keyframes nl-bump { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 100% { transform: scale(1); } } @keyframes nl-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes nl-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes nl-sheet-in { from { transform: translateY(100%); } to { transform: none; } } @keyframes nl-sheet-out { from { transform: none; } to { transform: translateY(100%); } } @keyframes nl-drawer-in { from { transform: translateX(-100%); } to { transform: none; } } @keyframes nl-drill-in { from { transform: translateX(100%); } to { transform: none; } } @keyframes nl-toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes nl-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } @keyframes nl-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes nl-word-up { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } } @keyframes nl-peek { 0% { transform: none; } 45% { transform: translateX(-30%); } 100% { transform: none; } } .anim-pop { animation: nl-pop var(--duration-base) var(--ease-pop); } .anim-bump { animation: nl-bump var(--duration-base) var(--ease-pop); } .anim-fade-in { animation: nl-fade-in var(--duration-fast) var(--ease-out) both; } .anim-fade-up { animation: nl-fade-up var(--duration-slow) var(--ease-out) both; } .anim-sheet-in { animation: nl-sheet-in var(--duration-slow) var(--ease-sheet) both; } /* 2.0: 520 мс по «шторочной» кривой */ .anim-sheet-out { animation: nl-sheet-out var(--duration-fast) var(--ease-in) both; } .anim-drawer-in { animation: nl-drawer-in var(--duration-slow) var(--ease-sheet) both; } .anim-drill-in { animation: nl-drill-in var(--duration-base) var(--ease-sheet) both; } .anim-toast-in { animation: nl-toast-in var(--duration-base) var(--ease-out) both; } .anim-draw { stroke-dasharray: 24; animation: nl-draw var(--duration-base) var(--ease-out) both; } .anim-word { display: inline-block; animation: nl-word-up var(--duration-base) var(--ease-out) both; } .anim-peek { animation: nl-peek 840ms var(--ease-in-out) 1 both; } @media (prefers-reduced-motion: reduce) { .nl *, .nl *::before, .nl *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .nl-skel { animation: none; } } /* ========================================================================== 2.0 · 13.10 · Корзина и оформление: форма контролов и ритм форм (волна 2; доски D-Cart, M-Cart, D-Checkout, M-Checkout, Forms, Selectors, Overlays) Правило формы: всё, что выбирает или вводит значение (поле, плитка размера, селект размера, количество, карточка-радио, поле-выбор пункта), — прямоугольник --radius-sm; всё, что действие или фильтр (кнопка, чип), — пилюля. ========================================================================== */ /* Селект размера в строке товара «M · 46 ▾»: компактный контрол 40, как .nl-stepper; зона нажатия 44 */ .nl-selectbtn { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: var(--control-h-sm); min-width: 0; padding: 0 8px 0 12px; border: 1px solid var(--line-400); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--ink-900); font-family: inherit; font-size: var(--text-sm); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out); } .nl-selectbtn::before { content: ""; position: absolute; inset: -3px 0; } .nl-selectbtn > .i { flex: none; color: var(--ink-700); } .nl-selectbtn:active { transform: scale(0.98); } .nl-selectbtn.is-hover { border-color: var(--ink-900); } @media (hover: hover) and (pointer: fine) { .nl-selectbtn:hover { border-color: var(--ink-900); } } /* Строка контролов товара: селект и степпер рядом, одной высоты и формы, промежуток 8; под цветом и артикулом */ .nl-linectl { display: flex; align-items: center; gap: var(--space-xs); } /* Ритм форм: подпись → поле 6 и поле → подсказка 6 (.nl-field); подсказка → следующее поле 16 (.nl-fstack); группы внутри секции 24 (.nl-fgroups); подпись группы (.nl-glabel) — над группой: 16 выше, 8 до первого элемента (.nl-gblock) */ .nl-fstack { display: flex; flex-direction: column; gap: var(--form-field-gap); } .nl-fgroups { display: flex; flex-direction: column; gap: var(--form-group-gap); } .nl-gblock { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-md); } .nl-glabel { font-size: var(--text-xs); font-weight: 500; line-height: 1.3; color: var(--ink-500); } /* ========================================================================== 2.0 · 13.10 · Главная, каталог, поиск: ряд чипов на телефоне и «Как носят Neverlate» (волна 2; доски M-Home, D-Home, M-Catalog, M-Search, Search). Имена и значения — как в демо (demo/site/nl.css — nl-chiprow; demo/site/home.js — hm-ugc), чтобы холст и демо читались одинаково ========================================================================== */ /* Ряд чипов на телефоне (владелец 13.10.2026) — одна строка с горизонтальной прокруткой: чипы 36 px без переноса, первый чип на поле страницы (--chiprow-pad, по умолчанию 16), прокрутка до края экрана, без полосы прокрутки. Подпись ряда (t-eyebrow) стоит над строкой, 8 px до чипов. --bleed выносит ряд из блока с полями в край экрана. Вертикальные 4 px внутри — место для кольца фокуса (прокрутка обрезает всё, что выходит за ряд). Десктоп: ряды как были. Не для групп фильтров в шторке: там выбор вариантов, чипы переносятся */ .nl-chiprow { display: flex; flex-wrap: nowrap; gap: var(--space-xs); margin: -4px 0; padding: 4px var(--chiprow-pad, 16px); overflow-x: auto; overscroll-behavior-x: contain; scroll-padding: 0 var(--chiprow-pad, 16px); scrollbar-width: none; } .nl-chiprow::-webkit-scrollbar { display: none; } .nl-chiprow--bleed { margin-left: calc(-1 * var(--chiprow-pad, 16px)); margin-right: calc(-1 * var(--chiprow-pad, 16px)); } /* Потомок, а не прямой ребёнок: на досках чипы часто приходят через sc-for (display: contents) */ .nl-chiprow .nl-pill, .nl-chiprow .nl-btn { flex: none; } .nl-chiprow .nl-pill { height: 36px; padding: 0 14px; } .nl-chiprow__label { display: block; margin-bottom: var(--space-xs); } /* «Как носят Neverlate» (#NEVERLATE_GIRLS, social-proof.md §4): плитка — фото блогера 754/1022 без обрезки, на вещах точки, точка открывает маленькую карточку товара (одна на страницу). Лента — каркас «Новинок»: десктоп 4 плитки по 322, зазор 24, стрелки и полоса положения; телефон — плитка 72 %, зазор 8, видна следующая. «+» на фото не ставим (в 2.0 он значит «размер и в корзину»), звёзд, логотипов и ссылок соцсетей нет */ .hm-ugc__tile { margin: 0; min-width: 0; } .hm-ugc__media { position: relative; aspect-ratio: 754 / 1022; background: var(--surface-200); } .hm-ugc__media > img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Точка: круг 22 в прозрачной области нажатия 44, центр в (x %, y %). Тень нужна на светлых фото (белый комбинезон) */ .hm-ugc__spot { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%); cursor: pointer; -webkit-tap-highlight-color: transparent; } .hm-ugc__dot { position: relative; width: 22px; height: 22px; border: 1px solid rgba(34, 30, 28, 0.12); border-radius: 50%; background: rgba(254, 252, 251, 0.92); box-shadow: 0 2px 8px rgba(34, 30, 28, 0.24); transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); animation: hm-ugc-dot-in 240ms var(--ease-out) var(--d, 0ms) both; } .hm-ugc__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink-900); transition: background-color var(--duration-fast) var(--ease-out); } /* Открыта: инверсия; светлое кольцо 2 px — тёмная точка читается на тёмной одежде (ugc-5, ugc-7) */ .hm-ugc__spot[aria-expanded="true"] .hm-ugc__dot { border-color: var(--ink-900); background: var(--ink-900); box-shadow: 0 0 0 2px rgba(254, 252, 251, 0.92), 0 2px 8px rgba(34, 30, 28, 0.24); } .hm-ugc__spot[aria-expanded="true"] .hm-ugc__dot::after { background: var(--surface-0); } .hm-ugc__spot:focus-visible { outline: none; } .hm-ugc__spot:focus-visible .hm-ugc__dot { outline: 2px solid var(--ink-900); outline-offset: 2px; box-shadow: 0 0 0 6px var(--surface-0), 0 2px 8px rgba(34, 30, 28, 0.24); } /* Первое появление блока (раз за сессию): точки проявляются по очереди, задержка 60 мс на плитку (--d). Это и есть подсказка «можно нажать» */ @keyframes hm-ugc-dot-in { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } } /* Карточка на фото: внутри плитки; точка в нижней половине (y > 50 %) — карточка над ней (.is-up), иначе под ней (.is-down); по горизонтали центр на точке, упор в края плитки 8. Ширина min(плитка − 16, 280): десктоп 280, телефон ≈ 242. Стоит в DOM сразу после своей точки: следующий Tab попадает на неё */ .hm-ugc__card { --w: min(calc(100% - 16px), 280px); position: absolute; z-index: 3; left: clamp(8px, calc(var(--x) - var(--w) / 2), calc(100% - 8px - var(--w))); width: var(--w); box-sizing: border-box; display: grid; grid-template-columns: 48px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-0); box-shadow: var(--shadow-md); color: var(--ink-900); text-decoration: none; visibility: hidden; opacity: 0; transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), visibility 0s linear 120ms; } .hm-ugc__card.is-up { bottom: calc(100% - var(--y) + 19px); transform: translateY(4px); } .hm-ugc__card.is-down { top: calc(var(--y) + 19px); transform: translateY(-4px); } .hm-ugc__card.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s; } .nl a.hm-ugc__card, .nl a.hm-ugc__card:hover { color: var(--ink-900); } .hm-ugc__thumb { display: block; width: 48px; height: 64px; overflow: hidden; background: var(--surface-200); } .hm-ugc__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .hm-ugc__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hm-ugc__note { font-size: var(--text-xs); line-height: 1.3; color: var(--ink-500); } .hm-ugc__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-sm); line-height: 1.35; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--duration-fast) var(--ease-out); } .hm-ugc__info .nl-card__price { margin-top: 0; } .hm-ugc__chev { color: var(--ink-500); transition: color var(--duration-fast) var(--ease-out); } .hm-ugc__card:hover .hm-ugc__name, .hm-ugc__card:focus-visible .hm-ugc__name { text-decoration-color: var(--ink-900); } .hm-ugc__card:hover .hm-ugc__chev, .hm-ugc__card:focus-visible .hm-ugc__chev { color: var(--ink-900); } /* Подпись: ник как есть (текст без ссылки и значка соцсети), состав образа — каждая вещь ссылкой */ .hm-ugc__cap { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; } .hm-ugc__who { font-size: var(--text-sm); line-height: 20px; font-weight: 500; color: var(--ink-900); overflow-wrap: anywhere; } .hm-ugc__what { font-size: var(--text-xs); line-height: 1.4; color: var(--ink-500); } .nl .hm-ugc__what a { color: var(--ink-700); text-decoration: underline; text-decoration-color: var(--line-400); text-underline-offset: 3px; transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out); } .nl .hm-ugc__what a:hover { color: var(--ink-900); text-decoration-color: var(--ink-900); } @media (hover: hover) and (pointer: fine) { .hm-ugc__spot:hover .hm-ugc__dot { transform: scale(1.1); } .hm-ugc__spot:hover:not([aria-expanded="true"]) .hm-ugc__dot { background: var(--surface-0); } } @media (prefers-reduced-motion: reduce) { .hm-ugc__dot { animation: none; } .hm-ugc__card.is-up, .hm-ugc__card.is-down { transform: none; } } /* ========================================================================== 2.0 · 22.10 · NEVERLATE CLUB v2: баллы вместо опыта и уровней (specs/loyalty-v2.md, 5.13) Было шесть компонентов клуба (полоса уровня, карточка уровня, подарок, задание, значок), осталось три: nl-clubline, nl-balancecard, nl-pointsrow. Убраны nl-levelbar, nl-levelcard, nl-giftcard, nl-quest, nl-medal (+ nl-medalbtn). Где баллы видны: строка на странице товара, мини-корзина (только «Можно оплатить баллами»), корзина, оформление, «Заказ оформлен», кабинет. В каталоге, лентах, поиске и на плитках — нигде (решение владельца 14.10). Только нейтрали: --ink-900/700/500, --line-300/400, --surface-tint, --surface-0. Без --accent и без --sale; без поповеров — объяснения ссылкой в «Помощь» (#help-club) ========================================================================== */ /* nl-clubline — строка клуба в корзине, оформлении и мини-корзине: star 16 + текст 12/400 --ink-700, числа 500 --ink-900, важная строка 12/500 --ink-900 (__l--strong), ссылка 12. Иконка–текст 8, строки 2, без фона и рамки */ .nl-clubline { display: flex; align-items: flex-start; gap: var(--space-xs); margin: 0; font-size: var(--text-xs); line-height: 1.4; color: var(--ink-700); } .nl-clubline > .i { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ink-700); } .nl-clubline__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nl-clubline b { font-weight: 500; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; } .nl-clubline__l--strong { font-weight: 500; color: var(--ink-900); } .nl .nl-clubline a { align-self: flex-start; color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--line-400); text-underline-offset: 3px; } /* nl-balancecard — карточка баланса: тинт, отступы 16/20, промежуток 8: надзаголовок t-eyebrow, число 24/500 (__v, «= 1 240 ₽» мелко), или заголовок 16/500 (__t), подпись 12 --ink-700 (__s; на тинте не --ink-500), ссылка 14 (__a), кнопка (__btn). ЛК десктоп 440 справа от приветствия, телефон — во всю ширину; «Заказ оформлен» — компактный вид (--compact: число 16/500) */ .nl-balancecard { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; padding: var(--space-md) 20px; border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--ink-900); } .nl-balancecard__v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: var(--text-xl); line-height: 1.2; font-weight: 500; letter-spacing: var(--tracking-snug); color: var(--ink-900); font-variant-numeric: tabular-nums; } .nl-balancecard__v small { font-size: var(--text-xs); line-height: 1.4; font-weight: 400; letter-spacing: 0; color: var(--ink-700); } .nl-balancecard__t { margin: 0; font-size: var(--text-md); line-height: 1.35; font-weight: 500; color: var(--ink-900); font-variant-numeric: tabular-nums; } .nl-balancecard__s { margin: 0; font-size: var(--text-xs); line-height: 1.45; color: var(--ink-700); font-variant-numeric: tabular-nums; } .nl-balancecard__s--strong { font-size: var(--text-sm); font-weight: 500; color: var(--ink-900); } .nl-balancecard__a { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; font-family: inherit; font-size: var(--text-sm); font-weight: 500; line-height: 1.3; color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--line-400); text-underline-offset: 5px; cursor: pointer; } .nl-balancecard__a:hover { text-decoration-color: var(--ink-900); } .nl-balancecard__btn { align-self: flex-start; margin-top: 4px; } .nl-balancecard--compact .nl-balancecard__v { font-size: var(--text-md); } /* nl-pointsrow — строка списания в сводке «Итог»: чекбокс nl-check (то, что выбирает значение, прямоугольник 4 px) + заголовок 14/500 «Списать N баллов» (__t) + текстовая ссылка «изменить» (__edit) справа + подпись 12 --ink-700 (__s) под чекбоксом; высота от 56. Состояния: выкл, вкл, с полем суммы (__field: поле 40 px, радиус 4, шаг 1, ошибка __e), недоступно с причиной (is-off: серый текст и disabled-чекбокс, кнопка __go «Подтвердить»), загрузка (is-load: подпись и заголовок — скелетон) */ .nl-pointsrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-sm); min-height: 56px; padding: 4px 0; color: var(--ink-900); } .nl-pointsrow__c { min-width: 0; padding: 8px 0; } .nl-pointsrow__t { min-width: 0; font-size: var(--text-sm); line-height: 1.35; font-weight: 500; font-variant-numeric: tabular-nums; } .nl-pointsrow__edit { margin-right: -4px; font-size: var(--text-sm); } .nl-pointsrow__go { margin-left: var(--space-xs); } .nl-pointsrow__s { grid-column: 1 / -1; margin: -4px 0 0; padding: 0 0 4px 34px; font-size: var(--text-xs); line-height: 1.4; color: var(--ink-700); font-variant-numeric: tabular-nums; } .nl-pointsrow__field { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-xs); padding: 0 0 4px 34px; } .nl-pointsrow__field .nl-input { width: 112px; height: 40px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; } .nl-pointsrow__max { font-size: var(--text-xs); color: var(--ink-700); font-variant-numeric: tabular-nums; } .nl-pointsrow__e { grid-column: 1 / -1; margin: 0; padding-left: 34px; } .nl-pointsrow.is-off .nl-pointsrow__t { font-weight: 400; color: var(--ink-500); } .nl-pointsrow.is-off .nl-check { cursor: default; } .nl-pointsrow.is-load .nl-pointsrow__t, .nl-pointsrow.is-load .nl-pointsrow__s { color: transparent; background: var(--surface-200); border-radius: var(--radius-sm); } /* УДАЛЕНО 14.10 (владелец 13.10: «опыт в каталоге — лишнее»): .nl-card__row и .nl-card__xp — строка в строке цветов плитки. На плитках каталога, лент, поиска и комплектов баллов нет ни в одном состоянии клуба; доски переведены на строку свойств */ /* Точка «новое в клубе» на иконке кабинета (шапка десктопа) и на вкладке «Кабинет» (таб-бар): 8 --ink-900, обводка 2 цвета фона. Новые баллы или скорое сгорание; пропадает, как только открыт раздел «Баллы» */ .nl-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-900); box-shadow: 0 0 0 2px var(--surface-0); pointer-events: none; } .nl-tabbar .nl-dot { top: 9px; right: auto; left: calc(50% + 4px); } /* ========================================================================== 2.0 · 14.10 · Шапка телефона: лупа всегда (владелец 14.10: «Лупа на телефоне свёрнута всегда должна быть» — отменяет сворачивание поля при прокрутке из волны 2; все доски M-*, Navigation, MobileUX, Templates, Main, Motion, Interactions, Forms) Корни вкладок (Главная, Каталог, Избранное, Корзина, Кабинет, «Заказ оформлен») — .nl-header--root: [логотип … лупа 44]. Логотип с полем 16 слева, лупа 24 в зоне 44 у правого края (справа 4, как «Назад» слева). Внутренние страницы — .nl-header--inner: [Назад 44 · название · лупа 44]; название .nl-htitle 16/500 проявляется (.is-titled), только когда H1 из контента ушёл за верх экрана, и гаснет, когда он вернулся. Поля поиска в шапке страницы нет никогда: тап по лупе — экран поиска (поле + «Отмена», клавиатура сразу). Поле .nl-hsearch живёт только в потоке поиска: экран поиска и шапка выдачи (.nl-header--search, поле с запросом). Высота 56 не меняется, шапка не прячется; ничего не сворачивается и не разворачивается — анимации шапки нет ========================================================================== */ .nl-header--root { justify-content: space-between; padding: 0 var(--space-2xs); } .nl-header--root > .nl-logo { flex: none; height: var(--tap); padding: 0 var(--space-sm); } .nl-header--root > .nl-iconbtn:last-child { margin-left: auto; } /* Внутренняя страница: [Назад 44] [название 16/500, скрыто] [лупа 44]; поля 4, как у «Назад» */ .nl-header--inner { padding: 0 var(--space-2xs); } .nl-header--inner > .nl-iconbtn:last-child { margin-left: auto; } .nl-htitle { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-900); font-size: var(--text-md); font-weight: 500; line-height: 1.2; letter-spacing: var(--tracking-snug); white-space: nowrap; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .nl-header--inner.is-titled .nl-htitle { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .nl-htitle { transition: none; transform: none; } } /* ========================================================================== 2.0 · 13.10 · Фильтры десктопа: у каждой пилюли свой блок, «Фильтры» — шторка слева (волна 3, владелец 13.10: «все эти кнопки открывают одинаковое боковое меню, и оно появляется с противоположной стороны от кнопок»; доски D-Catalog, D-Search, Overlays). Телефон без изменений: шторка снизу. Пилюля фильтра .nl-fpill (в обёртке .nl-fpw) открывает свой блок .nl-fpop прямо под собой: на 8 ниже, левый край блока = левый край пилюли; если блок не помещается до правого края колонки — .nl-fpop--end (правый край блока = правый край пилюли). В блоке только опции этого фильтра, внизу «Сбросить» (этот фильтр) и «Показать N товаров» — применение кнопкой, как в шторке телефона; число считает фильтр на сервере. Открыт один блок за раз (клик по другой пилюле переключает). Esc, клик мимо (.nl-fcatch) и повторный клик по пилюле закрывают без применения; фокус возвращается на пилюлю. Подложки нет: страница не темнеет. Применённый фильтр: пилюля залита (.is-selected) и показывает значение — размеры до трёх через запятую («Размер: S, M»), в остальных фильтрах одно значение целиком, дальше «+N» («Польза: Утягивают +1»); под панелью строка .nl-fchips: чип на каждое значение с «×» и «Сбросить всё». «Фильтры» (все сразу) — шторка 440 с ЛЕВОГО края, со стороны кнопок: translateX(−100 %) → 0, 520 · --ease-sheet (nl-drawer-in), уход 200 · ease-in; сверху «Выбрано» чипами, ниже все группы, внизу «Сбросить всё» / «Показать N». Сортировка справа — свой список под кнопкой, правый край списка = правый край кнопки (= край колонки). Узкий десктоп (ряд не помещается, окно ~900–1180, 14.10 как в демо): последние пилюли уходят в «Ещё» («Ещё · N» — выбрано), его блок — эти группы стопкой с общими «Сбросить» / «Показать N товаров»; ряд не прокручивается и не переносится. Кольцо фокуса только с клавиатуры (:focus-visible); после клика мышью кольца нет. ========================================================================== */ .nl-fpw { position: relative; flex: none; display: flex; } .nl-fpill > .i:last-child { transition: transform var(--duration-fast) var(--ease-out); } .nl-fpill[aria-expanded="true"] { border-color: var(--ink-900); } .nl-fpill[aria-expanded="true"] > .i:last-child { transform: rotate(180deg); } .nl-fpill:focus:not(:focus-visible), .nl-fchip:focus:not(:focus-visible) { outline: none; } .nl-fpop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 300; display: flex; flex-direction: column; width: 360px; max-height: 480px; border-radius: var(--radius-sm); background: var(--surface-0); box-shadow: var(--shadow-md); text-align: left; white-space: normal; animation: nl-fpop-in var(--duration-fast) var(--ease-out) both; } .nl-fpop--end { left: auto; right: 0; } .nl-fpop__body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--space-sm); padding: 20px 20px 24px; overscroll-behavior: contain; } .nl-fpop__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: 20px; } .nl-fpop__pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .nl-fpop__foot { flex: none; display: flex; align-items: center; gap: var(--space-xs); padding: 12px 20px 16px; border-top: 1px solid var(--line-300); } .nl-fpop__foot > .nl-btn--primary { flex: 1; min-width: 0; padding: 0 var(--space-md); } .nl-fpop__foot > .nl-btn--text { flex: none; } @keyframes nl-fpop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .nl-fcatch { position: absolute; inset: 0; z-index: 250; } .nl-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); } .nl-fchip { height: 36px; padding: 0 10px 0 14px; gap: 4px; } .nl-fchip > .i { color: var(--ink-700); } .nl-fdrawer { left: 0; right: auto; animation: nl-drawer-in var(--duration-slow) var(--ease-sheet) both; } .nl-fdrawer__sel { flex: none; display: flex; flex-direction: column; gap: var(--space-xs); padding: 16px 24px; border-bottom: 1px solid var(--line-300); background: var(--surface-100); } @media (prefers-reduced-motion: reduce) { .nl-fpop, .nl-fdrawer { animation: none; } .nl-fpill > .i:last-child { transition: none; } } /* ========================================================================== 2.0 · 13.10 · Рассылка: тёмная полоса с фото бренда (волна 3, владелец 13.10: «очень скучная и непривлекательная»; доски D-Home, M-Home, Forms) Полоса во всю ширину окна, --ink-900, белый текст. Десктоп .nl-news--d: фото от края окна до правой линии 2-й колонки (на 1440 — 708), текст и форма — с линии 3-й колонки до R, всё содержимое не шире 560. Телефон .nl-news--m: фото 4:3 сверху, ниже текст и форма с полями 16. Порядок: надзаголовок «Рассылка Neverlate» → заголовок с пользой → три пункта с иконками → форма в одну строку (поле email, подсказка «you@mail.ru», + светлая кнопка «Подписаться», не оранжевая) → одна строка согласия 12 «Подписываясь, вы соглашаетесь на рассылку и с политикой обработки данных» со ссылкой, без флажка → «или в Telegram» — текстовая кнопка-ссылка с иконкой (14.10, как в демо). Третий пункт: гостье «[Подарок] на первый заказ», участнице NEVERLATE CLUB — «Напомним, когда баллы будут сгорать». Полоса — на главной и в конце гидов. Интересов в первом шаге нет: после подписки — «Готово! Проверьте почту» и чипы «Что вам интереснее?» по желанию. Чисел подписчиц нет. Поле на тёмном: заливка 6 % белого, рамка 40 % белого (3,8:1), фокус — белая рамка 2; ошибка — --news-err (7:1 на --ink-900), текст ошибки по правилам форм в 6 под полем. Кольца фокуса кнопок и чипов — белые. ========================================================================== */ .nl-news { --news-err: #FF9AA2; --news-dim: rgba(255, 255, 255, 0.72); --news-line: rgba(255, 255, 255, 0.4); display: grid; background: var(--ink-900); color: var(--on-dark); } .nl-news__media { position: relative; min-width: 0; overflow: hidden; background: #3B3633; } .nl-news__media > img { display: block; width: 100%; height: 100%; object-fit: cover; } .nl-news__body { display: flex; flex-direction: column; gap: var(--space-xl); min-width: 0; } .nl-news__head { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 560px; } .nl-news .t-eyebrow { color: var(--news-dim); } .nl-news__title { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 400; letter-spacing: var(--tracking-display); color: var(--on-dark); } .nl-news__perks { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; } .nl-news__perks li { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; } .nl-news__perks .i { flex: none; color: var(--on-dark); } .nl-news__form { display: flex; flex-direction: column; gap: 6px; max-width: 560px; } .nl-news__label { font-size: var(--text-xs); font-weight: 500; line-height: 1.3; color: var(--news-dim); } .nl-news__row { display: flex; align-items: center; gap: var(--space-xs); } .nl-news__row > .nl-btn { flex: none; } .nl-news__input { flex: 1; min-width: 0; width: 100%; height: var(--control-h-lg); padding: 0 var(--space-md); border: 1px solid var(--news-line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.06); color: var(--on-dark); font-family: inherit; font-size: var(--text-md); line-height: 1.2; -webkit-appearance: none; appearance: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .nl-news__input::placeholder { color: rgba(255, 255, 255, 0.56); } .nl-news__input:hover { border-color: rgba(255, 255, 255, 0.72); } .nl-news__input:focus, .nl-news__input.is-focus { outline: none; border-color: var(--on-dark); box-shadow: 0 0 0 1px var(--on-dark); } .nl-news__input.is-error { border-color: var(--news-err); box-shadow: 0 0 0 1px var(--news-err); } .nl-news__err { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); line-height: 1.4; color: var(--news-err); } .nl-news__err > .i { flex: none; } .nl-news__legal { margin: 10px 0 0; max-width: 560px; font-size: var(--text-xs); line-height: 1.5; color: var(--news-dim); } .nl-news__legal a, .nl-news__legal a:hover { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--news-line); text-underline-offset: 3px; } .nl-news__alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); font-size: var(--text-sm); line-height: 1.4; color: var(--news-dim); } .nl-news a.nl-btn--onphoto, .nl-news a.nl-btn--onphoto:hover { color: var(--ink-900); } .nl-news a.nl-btn--onphoto-outline, .nl-news a.nl-btn--onphoto-outline:hover { color: var(--on-dark); } .nl-news .nl-btn--onphoto-outline:hover, .nl-news .nl-btn--onphoto-outline.is-hover { background: rgba(255, 255, 255, 0.14); } .nl-news .nl-btn:focus-visible, .nl-news .nl-btn.is-focus { outline: 2px solid var(--on-dark); outline-offset: 3px; box-shadow: none; } .nl-news .nl-btn--text { color: var(--on-dark); text-decoration-color: var(--news-line); } .nl-news .nl-btn--text:hover { text-decoration-color: var(--on-dark); } .nl-news .nl-btn--text:focus-visible { outline: none; background: rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); text-decoration-color: var(--on-dark); } /* После подписки: письмо ушло, чипы интересов по желанию, «Другой адрес» */ .nl-news__done { display: flex; flex-direction: column; gap: var(--space-lg); max-width: 560px; } .nl-news__donehead { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-md); align-items: start; } .nl-news__ok { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--on-dark); color: var(--ink-900); } .nl-news__done-t { margin: 0; font-size: var(--text-lg); line-height: 1.25; font-weight: 500; letter-spacing: var(--tracking-snug); } .nl-news__done-s { margin: 6px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--news-dim); overflow-wrap: anywhere; } .nl-news__done-s b { font-weight: 500; color: var(--on-dark); } .nl-news__ints { display: flex; flex-direction: column; gap: var(--space-xs); } .nl-news__pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .nl-news .nl-pill { background: transparent; border-color: var(--news-line); color: var(--on-dark); } .nl-news .nl-pill:hover, .nl-news .nl-pill.is-hover { border-color: var(--on-dark); } .nl-news .nl-pill.is-selected { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink-900); } .nl-news .nl-pill:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; } .nl-news__note { font-size: var(--text-xs); line-height: 1.4; color: var(--news-dim); } /* Десктоп: фото — край окна … правая линия 2-й колонки (--news-photo), текст — с линии 3-й колонки (зазор 24) до R (--news-edge) */ .nl-news--d { grid-template-columns: var(--news-photo, 708px) minmax(0, 1fr); } .nl-news--d .nl-news__media { min-height: 520px; } .nl-news--d .nl-news__media > img { position: absolute; inset: 0; } .nl-news--d .nl-news__body { justify-content: center; padding: var(--space-3xl) var(--news-edge, 40px) var(--space-3xl) var(--space-lg); } /* Телефон: фото 4:3 сверху, поля 16; кнопка в строке с полем, поля кнопки 24 */ .nl-news--m { grid-template-columns: minmax(0, 1fr); } .nl-news--m .nl-news__media { aspect-ratio: 4 / 3; } .nl-news--m .nl-news__body { gap: var(--space-lg); padding: var(--space-xl) var(--gutter) var(--space-2xl); } .nl-news--m .nl-news__title { font-size: 28px; line-height: 1.15; } .nl-news--m .nl-news__row > .nl-btn { padding: 0 var(--space-lg); } @media (prefers-reduced-motion: reduce) { .nl-news__input { transition: none; } } /* ========================================================================== 2.0 · 13.10 · «Ничего не тянется бесконечно» (волна 3, владелец 13.10 после широкой колонки: «Собери комплект» — кнопка растянулась, в подвале слишком большие зазоры; доски Layout, D-Home, Templates). Кнопки действий — по содержимому, не уже 200 и не шире 400; на всю ширину — только внутри контейнеров ≤ 440 (шторки, правая колонка 440, мини-корзина, телефон). Поля и формы — не шире 760, текст — не шире 720 (проза 680). Панель рядом с фото — не шире 480 (кнопка внутри ≤ 400), лишнее место отдаётся фото. Подвал: колонки ссылок по содержимому (160–240) с зазором 48–64, «Контакты» прижаты к R, нижняя строка — по L и R. ========================================================================== */ .nl-btn--cap { min-width: 200px; max-width: 400px; } .nl-capform { max-width: 760px; } .nl-captext { max-width: 720px; } .nl-kitband { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: stretch; } .nl-kitband__media { position: relative; min-width: 0; overflow: hidden; background: var(--surface-200); } .nl-kitband__media > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .nl-kitband__panel { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; padding: 40px; background: var(--surface-tint); } .nl-kitband__panel .nl-btn--block { max-width: 400px; } .nl-footcols { display: flex; align-items: flex-start; column-gap: clamp(48px, 3.34vw, 64px); } .nl-footcols > * { flex: 0 1 auto; min-width: 160px; max-width: 240px; } .nl-footcols > .nl-footcols__end { flex: none; margin-left: auto; } /* Проход по доскам D-* (волна 3, 14.10): «Контакты» не сжимаются — телефон в одну строку и на узком окне (как в демо, .app-dfoot__col:last-child). Кнопка действия в широком контейнере — nl-btn--cap (200–400, по содержимому); кнопка внутри строки «поле + кнопка» (рассылка, промокод) — часть поля, по содержимому. Плашки и подсказки (nl-alert, баннер баллов, трек-номер, история баллов) — по ширине формы: nl-capform (760) */ /* ========================================================================== Оформление досок холста (не часть сайта) ========================================================================== */ .doc { background: var(--surface-0); color: var(--ink-900); font-family: var(--font-sans); } .doc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; padding-bottom: 40px; border-bottom: 1px solid var(--ink-900); } .doc-kicker { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); } .doc-title { margin: 12px 0 0; font-size: 64px; line-height: 0.98; font-weight: 400; letter-spacing: -0.03em; } .doc-lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-700); max-width: 620px; } .doc-sec { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; padding: 48px 0; border-top: 1px solid var(--line-300); } .doc-sec__title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; } .doc-sec__desc { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-500); } .doc-label { font-family: var(--font-mono); font-size: 11px; line-height: 1.45; color: var(--ink-500); } .doc-token { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--ink-900); } .doc-tile { background: var(--surface-100); border-radius: var(--radius-sm); padding: 24px; } .doc-stage { background: var(--surface-100); border-radius: var(--radius-sm); padding: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .doc-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark); } .doc-tag--do { background: var(--success); } .doc-tag--dont { background: var(--sale); } .doc-tag--new { background: var(--ink-900); } .doc-src { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--ink-700); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; } .doc-code { margin: 0; padding: 24px; border-radius: var(--radius-sm); background: var(--ink-900); color: #EDE9E6; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre; overflow: auto; } .doc-was { font-family: var(--font-mono); font-size: 13px; color: var(--ink-500); text-decoration: line-through; } .doc-phone { position: relative; width: 390px; overflow: hidden; background: var(--surface-0); box-shadow: 0 0 0 1px var(--line-300), var(--shadow-md); }