/* ============================================================ TOKENS ============================================================ */ /* ========================================================================== KAPIKA CORE: токены, контейнер, база, утилиты Desktop-first. Лестница брейкпоинтов (max-width): 1240 · 1024 · 900 · 768 · 560 · 400 База (без @media) = 1240–1920, контейнер капается на 1680. Шрифт: Nunito 400;500;600;700;800 (Google Fonts). Иконки: Tabler icons webfont. ========================================================================== */ /* ---------- ТОКЕНЫ ---------- */ :root{ /* синий (акцент/бренд) */ --blue:#005EB8; --blue-d:#00498f; --blue-t:#E6F1FB; /* зелёный (действие/корзина) */ --green:#A4D65E; --green-d:#9DCB5C; --green-t:#EAF3DE; /* ЧЕМ ПИШУТ НА ЛАЙМЕ. Белый текст на --green давал 1.70:1 (на ховерном --green-d 1.89:1) при пороге AA 4.5:1 для текста и 3:1 для иконок. Провал на всех 20 экранах, а не особенность одной страницы. --green-ink: 8.26:1 на --green и 7.44:1 на --green-d. Значение приехало с главной (там тёмный ink на лайме жил с самого начала, см. .button--loud) и теперь одно на проект: .button--primary, .cartbtn, кнопка поиска шапки, активная пилюля «В наличии». */ --green-ink:#173208; /* ГЛУБОКИЙ ЗЕЛЁНЫЙ: ЛАЙМ, КОТОРЫЙ ВИДНО НА БЕЛОМ. Первым потребителем стало промо мега-меню (.header__promo--green): карточка по построению белый текст на цвете, а на прежнем #7fb53f это 2.45:1 (иконка 54px и заголовок 19px не проходят даже порог 3:1). Тот же тон, опущенная светлота → 5.05:1 на белом; синее промо рядом (--blue) даёт 6.38:1. ВТОРОЙ ПОТРЕБИТЕЛЬ (ЭТОТ РАУНД): ГРАФИКА НА БЕЛОМ. Сам --green на белом даёт 1.70:1, а WCAG 1.4.11 требует 3:1 от любой фигуры, которая НЕСЁТ СМЫСЛ. Лаймовая точка пройденного шага в таймлайне заказа и лаймовая линия между шагами и есть ровно такая фигура: ими показано, докуда дошёл заказ. Правило: лайм остаётся ЗАЛИВКОЙ (на нём пишут --green-ink), а ГРАНИЦУ фигуры и ТОНКУЮ ЛИНИЮ на белом красит --green-deep. */ --green-deep:#55792A; /* текст */ --ink:#2E3138; /* заголовки, сильный текст */ --ink2:#41454B; /* основной body-текст */ --muted:#676C74; /* вторичный/мета, AA-контраст (см. notes) */ /* поверхности и линии */ --bg2:#F3F6FA; /* бледная панель/зебра */ --page:#EDF1F7; /* фон страницы (body) */ --line:#E7EDF6; /* мягкая граница карточек */ --line2:#DCE2EC; /* контрастная граница/контролы */ /* --control: ГРАНИЦА КОНТРОЛА, КОТОРАЯ САМА И ЕСТЬ СОСТОЯНИЕ. Не «ещё один серый»: у него ровно один повод существовать. WCAG 1.4.11 требует 3:1 от фигуры, несущей смысл, а --line2 на белом даёт 1.30:1. Для рамки поля ввода или карточки этого хватает (у них есть и высота, и заливка, и подпись, а граница там лишь очерчивает), но у НЕОТМЕЧЕННОГО чекбокса рамка остаётся ЕДИНСТВЕННЫМ носителем: заливка приходит только с :checked, галочка внутри погашена, и в пустом состоянии контраста не оставалось вовсе (замер: 1.30:1). --control даёт 3.58:1 на белом, 3.30:1 на --bg2, 3.16:1 на --page. ЗАКОН: этим цветом красят ТОЛЬКО такие рамки, а именно чекбокс .check__box и чекбокс-опцию фасета .filters__opt-box. Всё прочее (карточки, поля, чипы, селекты) остаётся на --line2: подменить его целиком значило бы перекрасить каждый контрол на двадцати экранах. */ --control:#7F8896; /* --faint: ТОЛЬКО ДЕКОРАЦИЯ, И ЭТО ПРАВИЛО, А НЕ ОПИСАНИЕ. На белом он даёт 1.65:1, на --bg2 всего 1.50:1. Значит им можно красить лишь то, чего не жалко не увидеть: иконку-заглушку внутри подложки (рядом с ней всегда есть текст), тонкую разделительную мелочь. ⚠️ ПРОЧЕРК «—» ЭТИМ ЦВЕТОМ НЕ ПИШУТ. Прочерк несёт смысл «данных нет» (остатка/пола/ростовки у этой позиции взять неоткуда). Это ТЕКСТ, порог AA 4.5:1, и красить его нужно --muted (5.28:1 на белом, 4.88:1 на --bg2). Второго имени для «нет данных» не заводим: --muted и есть «вторичный текст», а второе имя тому же смыслу лишь начало расхождения (та же логика, что у серого на тинтах, см. семью ink-on-tint ниже). ⚠️ ИКОНКА-УПРАВЛЕНИЕ (кнопка, ссылка) тоже не --faint: у графики интерфейса порог 3:1 (WCAG 1.4.11). И ЛЮБАЯ ФИГУРА, НЕСУЩАЯ СОСТОЯНИЕ: шаг таймлайна, иконка недоступного документа, для них те же 3:1 (для зелёной графики на светлом есть --green-deep). ТОЧКИ НАЛИЧИЯ (.stock__dot) оставлены согласованным исключением: их скин зафиксирован макетом, а уровень там дублируют форма и подпись; не перекрашивайте их «под порог», см. STOCK. Прежняя формулировка токена разрешала им «прочерк сумма 0», из-за неё прочерки поехали по четырём файлам. ⚠️ ЗАКРЫТЫЕ СПИСКИ «ЗАПРЕЩЕНО / РАЗРЕШЕНО» И САМОПРОВЕРКА ГРЕПОМ: assets/_core-notes.md, ## tokens, первый блок («ПРАВИЛО --faint: закон проекта»). Замеры точек наличия там же, ## core-b4fix §1. */ --faint:#C3CAD6; /* ---------- ПОЛОСА ПРОКРУТКИ: ОДНА НА ПРОЕКТ ---------- ЗНАЧЕНИЯ ИЗ ОРИГИНАЛА (kapika-*.html:163-167, восемь одинаковых копий правила aside{…}), а не «похожие» токены: при миграции ползунок отдали --line2 (#DCE2EC, светлее оригинала), а ховер отдали --muted (#676C74, это цвет ТЕКСТА: полоса под курсором становилась тёмной плашкой). Замер: #CDD5E1 на белом 1.46:1 (оригинал), #DCE2EC 1.30:1 (было), #676C74 5.28:1 (было на ховере). Полоса входит в согласованный вид, контраст ей не «чинят». --sb-face задаёт цвет панели-хозяина: из него рисуется поле вокруг ползунка (border у ::-webkit-scrollbar-thumb) и «шторки» подсказки (см. секцию SCROLLER). Хозяин на другом фоне перебивает переменные У СЕБЯ. */ --sb-w:10px; --sb-pad:3px; --sb-thumb:#CDD5E1; --sb-thumb-hover:#B4BDCD; --sb-face:#fff; /* ПУСТОЙ СЛОТ ТОЧКИ НАЛИЧИЯ (.stock__dot). Значение из согласованного макета (#dbe0e8 в исходных kapika-*.html), а не «ближайший» --line2: --line2 задаёт цвет ГРАНИЦ, и подмена уводила кружок в другой оттенок. Закон тот же, что у полосы прокрутки выше: контраст согласованному виду не пересчитывают. Почему именно так, см. секцию STOCK. */ --stock-slot:#DBE0E8; /* акценты статусов */ --sale:#E5332A; /* цена/скидка/ошибка: ФОН и ГРАНИЦА, не текст (см. --ink-alert) */ --pink:#FBEAF0; /* мягкая розовая подложка (девочки/промо) */ /* ЭКСКЛЮЗИВ: ТЁПЛОЕ ЗОЛОТО, И ЭТО НЕ УКРАШЕНИЕ. На розовом бейдж сливался с пилюлей «Девочки» (--pink с тем же цветом текста #A23A63): в строке выдачи они стоят рядом и читались как одна метка. Свободных смыслов в палитре не осталось: зелёный занят наличием, синий предзаказом, красный распродажей, поэтому вводим пару. Контраст 6.07:1. */ --gold-t:#FBEFD6; --gold-ink:#7A5200; /* ---------- ЧЕМ ПИШУТ НА ТИНТАХ (семья «ink-on-tint») ---------- ДОЛГ, ЗАКРЫТЫЙ В БАТЧЕ Б3. Тон-в-тон текст-цвета бейджей были литералами в семи местах (#5a7d22 / #4a6b1e / #6b7280 / #A23A63 + var(--sale) как текст) и подбирались «на глаз»: при кегле 10–12px замер дал 3.75–5.57:1 при пороге AA 4.5:1. Не проходили ТРИ пилюли статуса и два тега: .status--ship #5a7d22 на --green-t 4.18:1 .status--pack #6b7280 на --bg2 4.46:1 .status--cancel --sale на --pink 3.75:1 .tag--tint-green #5a7d22 на --green-t 4.18:1 .tag--sale #fff на --sale 4.34:1 Чинится СЕМЬЁЙ, а не по одному бейджу: у «текста на тинте» теперь два имени на весь проект, и любой новый тинтовый бейдж берёт их, а не подбирает свой оттенок. --ink-ok: зелёный текст на зелёных тинтах (--green-t, #E4F0D3) и на белом: 5.38 / 5.19 / 6.15:1. Заменил ОБА прежних зелёных (#5a7d22 и #4a6b1e): двух оттенков «того же зелёного» на одном экране (пилюли «Отгружен» и «Выполнен» стоят рядом в одной таблице) быть не должно. --ink-alert: красный текст на --pink и на белом: 5.39 / 6.25:1. var(--sale) как ЦВЕТ ТЕКСТА больше не используется. Он остался фоном, границей и цветом иконок (порог 3:1). --sale-d: тёмный красный ФОН под белым текстом (.tag--sale): на самом --sale белый давал 4.34:1, здесь 5.54:1. Серый текст на --bg2 своего имени не получил: там уже есть --muted (4.88:1 на --bg2), второе имя тому же смыслу не заводим. */ --ink-ok:#4a6b1e; --ink-alert:#B82820; --sale-d:#C9271E; /* радиусы */ --r:20px; /* крупный (карточки/меню) */ --r2:12px; /* средний (плитки/поля) */ /* ---------- ШКАЛА Z-INDEX (единая точка правды) ---------- Порядок слоёв снизу вверх: контент → хром над контентом → липкая панель → шапка → дропдауны/мега → затемнение (scrim) → элемент поверх затемнения → плавающая шапка → лайтбокс. Токенов РОВНО 10, и это полный набор. Правила: новые слои берут ТОЛЬКО эти токены; «магических» 999/9999 и вообще голых чисел в z-index в проекте нет (проверяется грепом `z-index:[[:space:]]*[0-9]`, должно быть пусто). Значения с запасом в 10 нужны, чтобы точечно вклиниться между слоями, не переписывая шкалу. Первые ДВА токена живут ВНУТРИ собственного стекинг-контекста блока (карточка, лайтбокс): там важен лишь порядок между своими детьми. */ --z-content:1; /* бейджи/оверлеи внутри своей карточки */ /* Второй «этаж» того же внутреннего контекста: хром, который обязан лежать ПОВЕРХ такого оверлея. Сегодня такой потребитель один, лайтбокс: .lightbox__dialog стоит на --z-content, а панель/крестик/стрелки в разметке идут ДО диалога, и без своего слоя диалог закрашивал бы их собой. Менять порядок узлов нельзя: подпись и счётчик обязаны читаться (и получать фокус) раньше картинки. Поэтому токен узаконен как 10-й, а не выкинут. */ --z-content-top:3; /* хром поверх такого оверлея (панель/кнопки лайтбокса) */ --z-suggest:30; /* подсказки поля поиска в потоке страницы */ --z-sticky:50; /* липкие панели контента (.orderbar), НИЖЕ шапки */ --z-header:60; /* шапка (.header, sticky) */ --z-dropdown:70; /* дропдауны/селекты/мега шапки, над шапкой */ --z-scrim:80; /* затемнение экрана (поиск, выезд фильтров) */ --z-above-scrim:95; /* то, ради чего затемнили (шапка с поиском, drawer) */ --z-float:120; /* плавающая шапка главной над hero-каруселью (быв. --z-header-float) */ --z-toast:220; /* сообщение об отказе: поверх всего, включая просмотрщик */ --z-lightbox:200; /* модальный просмотрщик фото: поверх всего */ } /* ---------- RESET / БАЗА ---------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:14px; color:var(--ink2); background:var(--page); -webkit-font-smoothing:antialiased; } button{font-family:inherit} input,select,textarea{font-family:inherit} img{max-width:100%} [hidden]{display:none!important} /* переход по якорю: шапка приклеена, без отступа заголовок раздела уезжает под неё, и человек попадает на середину текста. Высоту шапки не зашиваем: она разная на страницах с полками каталога и без них; нижнюю кромку уже считает и публикует kapika.js (--header-bottom). */ :target{scroll-margin-top:calc(var(--header-bottom, 160px) + 16px)} /* видимый фокус для клавиатуры (в шапке/подвале нативный outline сброшен, возвращаем глобально) */ :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px} a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } /* ---------- ССЫЛКА «К СОДЕРЖИМОМУ» ---------- В шапке проекта логотип, две пилюли раздела, поиск, три дропдауна и корзина: с клавиатуры до содержимого приходилось проходить их на КАЖДОЙ странице, и обхода не было ни на одной из 21. Ссылка стоит ПЕРВОЙ в документе (partials/header.html), не видна, пока не получит фокус, и ведёт на ландмарк #main. Слой --z-float: она обязана быть видна и над плавающей шапкой главной. */ .skip-link{ position:fixed; top:12px; left:12px; z-index:var(--z-float); padding:11px 18px; border-radius:var(--r2); background:#fff; border:1px solid var(--line2); box-shadow:0 8px 24px -12px rgba(20,38,90,.4); color:var(--blue); font-size:14px; font-weight:800; line-height:1.2; text-decoration:none; /* строка не переносится: без этого ссылка шириной по содержимому вставала в две строки (замер: 135×62 вместо 197×40) */ white-space:nowrap; transform:translateY(calc(-100% - 20px)); } .skip-link:focus{transform:none} /* Цель ссылки фокусируется ПРОГРАММНО (в табуляцию она не входит, у неё tabindex="-1"), а кольцо вокруг всей области содержимого ничего не сообщает: переход виден прокруткой и следующим Tab. Кольцо самой skip-ссылки при этом на месте: она обычная (см. :focus-visible). */ main[tabindex="-1"]:focus{outline:none} /* ---------- КОНТЕЙНЕР ---------- */ /* Центрирующая обёртка (бывш. .page). Горизонтальный padding задан clamp вместо лесенки 32→24→18. padding-block несёт вертикальный ритм: сверху 22px, снизу 104px, это зазор под мобильную залипающую панель заказа/корзины. */ .wrap{ width:100%; max-width:1680px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px); padding-block:22px 104px; } /* инлайн-контейнер внутри залипающего тулбара (бывш. .tbin), без верхнего ритма */ .wrap--flush{padding-block:0 16px} /* контентные/легал-страницы без залипающей панели: уменьшенный низ */ .wrap--calm{padding-bottom:44px} /* ---------- РАЗРЕЗ КОНТЕЙНЕРА ПОД ЛАНДМАРК ---------- Главная остаётся единственной страницей, где содержимое НАЧИНАЕТСЯ вне .wrap (hero во всю ширину вьюпорта), а подвал живёт ВНУТРИ .wrap. Ландмарк
обязан накрыть hero вместе с сеткой блоков и не накрыть подвал, значит контейнер разрезан надвое: первый закрывается внутри
, второй несёт подвал. Вертикальный ритм обязан остаться прежним, поэтому у первого нет низа, у второго нет верха: сумма отступов между сеткой и подвалом та же (margin-top подвала), низ страницы тот же. */ .wrap--cut-b{padding-bottom:0} .wrap--cut-t{padding-top:0} /* На широком экране kapika.js измеряет залипающую .orderbar и пишет --orderbar-h в :root, чтобы панель не перекрывала низ страницы. */ .wrap--orderbar{padding-bottom:calc(var(--orderbar-h,104px) + 22px)} /* На телефоне .orderbar скрыт: не оставляем под него пустое место. */ @media(max-width:768px){ .wrap--orderbar{padding-bottom:22px} } /* ---------- УТИЛИТЫ: ЗАГОЛОВКИ ---------- */ /* Заголовок страницы H1 (бывш. .h1) */ /* ⚠️ ДЛИННОЕ СЛОВО ЛОМАЕТ СТРАНИЦУ, А НЕ ПЕРЕНОСИТСЯ. «Политика конфиденциальности» при 32px/800 занимает 350px, а бокс на 320px виден 288px, и документ получал горизонтальную прокрутку (замер: scrollWidth 351 при innerWidth 320). Заголовок не имеет права быть шире своей колонки, поэтому перенос внутри слова разрешён ЗДЕСЬ, у самого компонента, а не правилом страницы. break-word, а не anywhere: он срабатывает ТОЛЬКО когда слово не влезает целиком, и на всех ступенях выше ничего не меняет (проверено: переносов на 360+ не появилось). */ .page-title{ margin:0; font-size:26px; font-weight:800; color:var(--ink); overflow-wrap:break-word; } /* приписка-мета рядом с H1 (бывш. .h1 em) */ .page-title__meta{ margin-left:8px; font-size:14px; font-weight:500; font-style:normal; color:var(--muted); } /* --lg: КРУПНЫЙ ПЛОСКИЙ H1 КОНТЕНТНОЙ СТРАНИЦЫ (бывш. .ab-h1). Второй размер заголовка страницы, а не второй блок: рабочие экраны (каталог, корзина, кабинет) носят 26px и живут рядом с таблицей, а у редакционных страниц («О компании», «Контакты», легал) заголовок занимает первый экран целиком, и он набран крупно и без надзаголовка. max-width 20ch задаёт МЕРУ СТРОКИ, а не «случайно так вышло»: при 50px без неё «Детская обувь, одежда и аксессуары» растягивается на всю ширину колонки в одну строку и заголовок перестаёт быть блоком. Короткие названия («Контакты») ограничение не замечают. */ .page-title--lg{ font-size:clamp(32px,4vw,50px); line-height:1.06; letter-spacing:-.025em; max-width:20ch; text-wrap:balance; } /* ЛИД: абзац-врезка под заголовком страницы (бывш. .ab-hero-lead инфо-страниц и .lead экранов входа). Он не элемент заголовка: на экранах входа между H1 и лидом ничего нет, а на «О компании» лид стоит внутри своей зоны с водяным знаком. --narrow: где под лидом идёт полоса статов, мера уже (56ch), иначе лид перекрывает по ширине сетку под ним. */ .page-lead{ max-width:62ch; margin:18px 0 0; font-size:16.5px;line-height:1.62;font-weight:500; color:var(--ink2);text-wrap:pretty; } .page-lead--narrow{max-width:56ch} .page-lead a{color:var(--blue);font-weight:700;text-decoration:none} .page-lead a:hover{text-decoration:underline} /* Заголовок секции (бывш. .blk-head / .blk-head h2) */ .sec-head{margin:0 0 16px} /* --split: заголовок и ссылка «Все новинки»/«Вся история» ОДНОЙ строкой. Выравнивание по baseline: 27px заголовка и 15px ссылки садятся на общую линию шрифта, а не по центру блока. flex-wrap нужен, чтобы на узком ссылка уходила под заголовок, а не резалась. (Витрины главной; в теле сайта .sec-head пока встречается без ссылки, там модификатор не ставится.) */ .sec-head--split{ display:flex; align-items:baseline; justify-content:space-between; gap:8px 20px; flex-wrap:wrap; } .sec-head__title{ margin:0; font-size:clamp(22px,2.4vw,27px); font-weight:800; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; } /* --lg: заголовок секции на РЕДАКЦИОННОЙ странице («Материалы», «Производство», «Способы доставки»). Там секции разделяет воздух, а не карточка, и заголовок держит эту роль на три пункта крупнее. Второго имени тому же заголовку не заводим: это его размер. */ .sec-head--lg .sec-head__title{font-size:clamp(23px,2.5vw,30px);line-height:1.14} /* ---------- УТИЛИТЫ: ПРОЧЕЕ ---------- */ /* доступное скрытие (для лейблов/подписей скринридеру) */ .visually-hidden{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap;border:0; } /* ========================================================================== АДАПТИВ (только для core; остальные брейкпоинты лестницы живут в компонентах) ========================================================================== */ @media (max-width:1240px){ /* :not(--lg) ЗДЕСЬ ОБЯЗАТЕЛЕН. У модификатора та же одноклассовая специфичность (0,1,0), а это правило стоит в файле ниже, поэтому без оговорки оно перебивало бы crumb-размер редакционного H1: на планшете и телефоне clamp(32…50px) молча превращался в 22px, и «крупный плоский заголовок» инфо-страниц оставался только на десктопе. Свою ступень --lg держит сам (clamp по вьюпорту). */ .page-title:not(.page-title--lg){font-size:22px} } /* ============================================================ BUTTONS ============================================================ */ /* ========================================================= BUTTONS: core.css Blocks: .button .iconbtn .cartbtn .textlink Tokens used: --green/--green-d --blue/--blue-d/--blue-t --ink2 --line2 --muted Desktop-first. Ladder used here: 1240 / 1024 / 768 ========================================================= */ /* ---------- .button: pill text / CTA button ---------- */ .button{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:13px 24px; border:0; border-radius:999px; background:#fff; color:var(--ink2); font-family:inherit; font-size:14.5px; font-weight:800; line-height:1; white-space:nowrap; text-decoration:none; cursor:pointer; /* box-shadow В ПЕРЕХОДЕ БОЛЬШЕ НЕТ. Своей тени у базовой кнопки нет (её заводит только примесь --loud, и у той свой transition), а вот КОЛЬЦО ФОКУСА рисуется именно box-shadow, и с переходом оно проявлялось 140 мс после нажатия Tab. Реакция на клавиатуру обязана быть мгновенной. */ transition:background .14s, border-color .14s, color .14s; } .button i{font-size:18px} /* ---------- ДВУХСЛОЙНОЕ КОЛЬЦО ФОКУСА ---------- Кольцо кнопки обязано читаться на ЛЮБОЙ подложке: кнопки проекта стоят и на белой карточке формы, и на тинте, и поверх фотографии первого экрана. Одним цветом это не решается, и попытка решить стоила проекта: у .button--accent тут стояло outline-color:#fff, и БЕЛОЕ кольцо на БЕЛОЙ карточке входа не меняло ни одного пикселя (замер: 1.76:1 при пороге 3:1 для носителя состояния), и единственным следом фокуса оставался бледный ореол. • box-shadow белым заполняет ЗАЗОР outline-offset вплотную к кнопке (spread 2px = offset 2px, без размытия); • outline --blue-d идёт снаружи этой белой полосы. Тёмная линия против белой полосы даёт 8.94:1 независимо от того, что под кнопкой; на белой карточке работает внешняя тёмная линия (8.94:1 к белому), на тёмном фото работает внутренняя белая. Своего кольца скинам больше не нужно. */ .button:focus-visible{ outline:2px solid var(--blue-d); outline-offset:2px; box-shadow:0 0 0 2px #fff; } /* недоступность задаётся ТОЛЬКО атрибутом: кнопка обязана выпадать и из клавиатуры. УДАЛЕНО (четвёртая приёмка): класс-дубль .button.is-disabled, generic-имя вне БЭМ, ни одна страница его не ставила. */ .button:disabled, .button[disabled]{opacity:.5; cursor:default; pointer-events:none} /* primary: green CTA (в заказ, оформить, оплатить). ТЁМНЫЙ ИНК ЗАДАЁТ --green-ink (8.26:1; на ховере 7.44:1). Белый текст, стоявший здесь раньше, давал 1.70:1: канон-кнопка была нечитаемой на всех экранах, где она есть (панель заказа, карточка товара, главная, корзина). */ .button--primary{background:var(--green); color:var(--green-ink)} .button--primary:hover{background:var(--green-d)} /* УДАЛЕНО (четвёртая приёмка): .is-ok / .is-warn, generic-имена вне БЭМ, ни одного потребителя в 20 страницах и партиалах (единственная кнопка с таким поведением, kapika-order-excel.html:753, красится своим страничным классом .ok и ещё не мигрирована). Когда мигрирует: подписи-состояния объявляются модификаторами БЛОКА (.button--ok / .button--warn) и живут здесь же, рядом с --primary. */ /* ghost: white, outlined, neutral secondary */ .button--ghost{ background:#fff; color:var(--ink2); border:1.5px solid var(--line2); font-weight:700; } .button--ghost:hover{border-color:var(--blue); color:var(--blue)} /* ghost-accent: white outlined but brand-blue label (менеджер, ещё, bulk-step) */ .button--ghost-accent{ background:#fff; color:var(--blue); border:1.5px solid var(--line2); font-weight:800; } .button--ghost-accent:hover{border-color:var(--blue); background:var(--blue-t)} /* accent: solid blue */ .button--accent{background:var(--blue); color:#fff} .button--accent:hover{background:var(--blue-d)} /* СВОЕГО КОЛЬЦА ФОКУСА У --accent НЕТ. Здесь стояло outline-color:#fff плюс ореол rgba(0,94,184,.35). На белой карточке входа (все три экрана входа) белое кольцо было невидимо, а ореол давал 1.76:1. Двухслойное кольцо базовой .button работает и на белом, и на цвете, см. комментарий выше. */ /* ---------- loud: «громкая» кнопка витрины (hero и дашборд главной) ---------- ПРИМЕСЬ К СКИНУ, а не самостоятельный скин: цвет ЦЕЛИКОМ даёт --primary/ --accent, --loud добавляет РОВНО ОДНО, а именно ОБЪЁМ (тень + подъём на ховере). Плоский канон тела сайта не меняется: у --loud ровно два потребителя, это первый экран главной и её карточка «Продолжить заказ», то есть места, где кнопка обязана читаться поверх фотографии и градиента. СВОЕГО ЦВЕТА ТЕКСТА У --loud БОЛЬШЕ НЕТ. Раньше здесь стояло правило .button--primary.button--loud{color:#173208}, потому что базовый --primary был белым по лайму (1.70:1) и «громкая» кнопка главной чинила контраст ТОЛЬКО у себя. Теперь тёмный ink живёт в самом --primary (--green-ink, 8.26:1), одинаково на всех 20 экранах, и примеси нечего переопределять: у неё осталась одна ответственность: громкость. ТЕНЬ ОДНА НА ДВА КОНТЕКСТА. В источнике их было две: чёрная 0 14px 34px -14px rgba(0,0,0,.45) у hero (кнопка на фотографии) и зелёное свечение 0 10px 22px -12px rgba(120,170,50,.9) у дашборда (кнопка на белой карточке). Свели к теневой семье ядра rgba(20,38,90,…), той же, что у .tile/.header; на тёмном фото тень и так не читается, а на белой карточке даёт тот же объём. Ховер-подсветка фона тоже одна: --green-d (у дашборда был свой #b0e06a). */ .button--loud{ box-shadow:0 12px 26px -14px rgba(20,38,90,.45); transition:background .14s, border-color .14s, color .14s, box-shadow .18s, transform .16s; } .button--loud:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -16px rgba(20,38,90,.5); } /* ФОКУС НЕ ГАСИТ ОБЪЁМ. Белую полосу кольца базовая .button:focus-visible печатает тем же свойством box-shadow, которым --loud держит тень, и одно молча стирало бы другое: кнопка первого экрана «сплющивалась» бы под клавиатурой. Здесь оба слоя названы вместе: полоса кольца и тень объёма. БЕЗ box-shadow В ПЕРЕХОДЕ: у --loud он свой (.18s, ради подъёма на ховере), и кольцо проявлялось бы 180 мс. Именно у этой кнопки ждать нельзя, ведь она стоит на фотографии, где ЧИТАЕТСЯ ИМЕННО БЕЛАЯ ПОЛОСА. Подъём и цвет по-прежнему с переходом. */ .button--loud:focus-visible{ box-shadow:0 0 0 2px #fff, 0 12px 26px -14px rgba(20,38,90,.45); transition:background .14s, border-color .14s, color .14s, transform .16s; } /* size modifiers */ .button--lg{min-height:52px; padding:0 24px; font-size:16px} .button--lg i{font-size:21px} .button--block{width:100%} /* ---------- .iconbtn: round icon button ---------- */ .iconbtn{ position:relative; flex-shrink:0; width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--line2); border-radius:50%; background:#fff; color:var(--ink2); cursor:pointer; transition:border-color .14s, color .14s, background .14s; } .iconbtn i{font-size:21px} .iconbtn:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-t)} .iconbtn:focus-visible{outline:2px solid var(--blue); outline-offset:2px} /* burger / menu: blue-tint filled */ .iconbtn--menu{background:var(--blue-t); border-color:transparent; color:var(--blue)} /* второй селектор ловит РЕАЛЬНОЕ состояние «дропдаун бургера открыт» (хук .header__menu-toggle из партиала). Раньше здесь стоял generic-класс .is-open, которого нет ни в одной разметке, и правило было мёртвым. */ .iconbtn--menu:hover, .header__menu--open .header__menu-toggle{background:#d3e5fa; border-color:transparent; color:var(--blue-d)} /* ---------- .cartbtn: green cart with counter ---------- Носителем служит (переход в заказ = навигация; см. partials/header.html). Кнопкой блок был раньше, поэтому в объявлении остаются border/font-family (обнуляют дефолты