/* M367_TOKEN_SOURCE_CONTRACT_V1 START Owner: m367_tokens.css Purpose: explicit own source for shared design tokens. Note: tokens are not inherited from homepage; homepage consumes this layer. M367_TOKEN_SOURCE_CONTRACT_V1 END */ /* * M367 TOKENS v0.1.1 * Base token layer. No page-family selectors. */ :root { --m367-accent-muted-hover: #e86624; --m367-accent-muted-rgb: 216, 90, 27; --m367-accent-muted: #d85a1b; --m367-on-accent: #ffffff; --m367-accent-rgb: var(--m367-accent-muted-rgb); --m367-accent: var(--m367-accent-muted); /* ЗАЛИВКА, НА КОТОРОЙ ЧИТАЕТСЯ БЕЛЫЙ ТЕКСТ (26.09, блок «дрескод-2»). Третья ступень акцента заведена не для красоты, а по замеру контраста. Белый текст на нашем акценте #d85a1b даёт **3,89** при норме 4,5 — то есть подпись на кнопке норму НЕ проходит. Белый на марке #ff5a00 — 3,13, ещё хуже. А кирпичный `--accent: #c44932` из слоя бывшего подрядчика проходит (4,83) — и именно поэтому главная кнопка сайта «Купить» до 26.09 была ЧУЖОГО цвета: правило подрядчика с `!important` красило её, и контраст на ней держался чужим цветом, а не нашим. Просто «сменить цвет на наш» значило бы сломать читаемость. Поэтому взята та же краска на тон темнее: оттенок 20° и насыщенность 78% сохранены ровно, светлота спущена 48% → 42%. Контраст с белым стал **4,83** — ровно как у чужого кирпичного, то есть не хуже ни на сотую, а цвет теперь наш. Что это не одно и то же, видно по оттенку: наш акцент 20°, марка 21° — одна семья; кирпичный подрядчика 9°, он заметно краснее. Три акцента были не тремя оттенками одной краски, а двумя красками. */ --m367-accent-strong: #bf4f18; --m367-accent-strong-rgb: 191, 79, 24; /* Наведение углубляет, а не осветляет: светлее нельзя — контраст с белым упадёт ниже нормы. Светлота 42% → 38%, белый текст 4,83 → 5,68. */ --m367-accent-strong-hover: #ac4815; --m367-breadcrumb-border: var(--m367-foundation-border-soft, rgba(255,255,255,.14)); --m367-breadcrumb-separator: var(--m367-text-tertiary); --m367-breadcrumb-current: var(--m367-text-secondary); --m367-breadcrumb-link: var(--m367-text-strong); /* RESERVED: задел под волну контентных страниц / каталога (2026-07-07) */ --m367-breadcrumb-bg: var(--m367-foundation-bg); /* M367_TOKENS_CLEANUP_V0_2_20260706 START Канон: единый тёмный дизайн на токенах (решение Максима 2026-07-06). - Ширина shell удалена: единственный владелец — mitino367_shell_geometry_v1.css (1200px). - Мёртвая строка --m367-foundation-accent удалена (перебивалась foundation, не работала никогда). - Оранжевый сведён к паре brand (#ff5a00, foundation) / muted-action (#d85a1b, здесь). - Инпуты переведены на тёмные foundation-поверхности (фикс белое-на-белом в форме заявки). - Блок LIGHT-LEGACY ниже: потребителей в home/tasks нет; НЕ удалён до grep по всему public_html (могут читать CSS страниц вне бандла: guarantee, delivery, news и др.). M367_TOKENS_CLEANUP_V0_2_20260706 END */ /* СЛОЙ СВЕТЛОЙ ТЕМЫ ЗАКРЫТ (26.09, блок «дрескод-2»). Тут лежали пять красок светлой темы, помеченные «кандидаты на удаление после серверного grep». Grep сделан — по всему корню, по css, php и js, без резервных копий и кеша: четыре из пяти не читает НИКТО, они удалены. Пятая читалась девятью местами, и вот чем это было: `#777777` — серый для БЕЛОЙ бумаги, а сайт тёмный. Замер на странице товара: примечание «после оплаты» давало контраст **4,04** при норме 4,5, то есть подпись под кнопкой покупки читалась хуже нормы. Тем же серым набраны «нет в наличии», счётчики разделов мобильного меню и строки пустой корзины. Имя оставлено ссылкой на системный «тихий текст» — так девять мест починились разом, а не по одному, и второго серого в системе не появилось. Убрать само имя можно, когда эти девять правил перепишут на `--m367-text-tertiary` напрямую; сегодня это была бы правка ради правки. */ --m367-color-muted-500: var(--m367-text-tertiary); --m367-border-soft: 1px solid var(--m367-foundation-border-soft, rgba(255, 255, 255, .14)); --m367-border-strong: 1px solid rgba(var(--m367-accent-muted-rgb), 0.42); --m367-action-tonal-bg: rgba(var(--m367-accent-muted-rgb), 0.10); --m367-action-tonal-text: var(--m367-foundation-text, rgba(255, 255, 255, .94)); --m367-focus-ring: 0 0 0 3px rgba(var(--m367-accent-muted-rgb), 0.28); /* M367_SITE_COLOR_SEMANTIC_TOKENS_V0_1_20260730 START Site-wide color roles. Page families consume these roles and must not redeclare their numeric color channels, alpha values or elevations. */ --m367-neutral-white-rgb: 255, 255, 255; --m367-neutral-black-rgb: 0, 0, 0; --m367-surface-rgb: 16, 17, 19; --m367-text-strong: rgba(var(--m367-neutral-white-rgb), .92); --m367-text-secondary: rgba(var(--m367-neutral-white-rgb), .86); --m367-text-tertiary: rgba(var(--m367-neutral-white-rgb), .74); /* НЕРАБОЧЕЕ СОСТОЯНИЕ (27.09). Самая тихая краска палитры была .74 — на тёмном фоне это почти белый, и значок недоступного товара не отличался от значка покупки: «нельзя купить» читалось как «можно». Ступень ниже нужна именно состоянию, а не тексту: ею красится то, что видно, но не работает. Контраста для таких элементов стандарт не требует, но 0.38 белого на фоне карточки даёт около 3,4:1 — значок остаётся различимым. */ --m367-text-disabled: rgba(var(--m367-neutral-white-rgb), .38); --m367-border-disabled: rgba(var(--m367-neutral-white-rgb), .16); --m367-surface-overlay-subtle: rgba(var(--m367-neutral-white-rgb), .03); --m367-surface-overlay-soft: rgba(var(--m367-neutral-white-rgb), .08); --m367-action-bg-faint: rgba(var(--m367-accent-muted-rgb), .055); --m367-action-bg-hover: rgba(var(--m367-accent-muted-rgb), .07); --m367-action-bg-tonal: rgba(var(--m367-accent-muted-rgb), .12); --m367-action-bg-selected: rgba(var(--m367-accent-muted-rgb), .13); --m367-action-border-divider: rgba(var(--m367-accent-muted-rgb), .14); --m367-action-border-soft: rgba(var(--m367-accent-muted-rgb), .16); --m367-action-border-subtle: rgba(var(--m367-accent-muted-rgb), .18); --m367-action-border-base: rgba(var(--m367-accent-muted-rgb), .28); --m367-action-border-contact: rgba(var(--m367-accent-muted-rgb), .32); --m367-action-border-control: rgba(var(--m367-accent-muted-rgb), .38); --m367-action-border-hover: rgba(var(--m367-accent-muted-rgb), .48); --m367-action-border-strong: rgba(var(--m367-accent-muted-rgb), .55); --m367-action-border-focus: rgba(var(--m367-accent-muted-rgb), .72); --m367-action-outline-strong: 2px solid rgba(var(--m367-accent-muted-rgb), .68); --m367-action-ring-soft: 0 0 0 4px rgba(var(--m367-accent-muted-rgb), .16); --m367-action-glow-soft: 0 0 36px rgba(var(--m367-accent-muted-rgb), .08); --m367-brand-bg-soft: rgba(var(--m367-brand-orange-rgb), .08); --m367-brand-bg-quiet: rgba(var(--m367-brand-orange-rgb), .09); --m367-brand-border-strong: rgba(var(--m367-brand-orange-rgb), .38); /* Тень наведения трёхслойная: ближний слой очерчивает край, дальний даёт глубину, третий — тёплый отсвет марки под карточкой. Одним рассеянным чёрным слоем на почти чёрном фоне подъём не читался вовсе. */ --m367-shadow-card-hover: 0 2px 6px rgba(var(--m367-neutral-black-rgb), .55), 0 18px 38px rgba(var(--m367-neutral-black-rgb), .50), 0 10px 30px rgba(var(--m367-accent-muted-rgb), .16); --m367-shadow-card-soft: 0 14px 32px rgba(var(--m367-neutral-black-rgb), .18); --m367-shadow-floating-up: 0 -14px 34px rgba(var(--m367-neutral-black-rgb), .24); --m367-shadow-floating-menu: 0 18px 52px rgba(var(--m367-neutral-black-rgb), .36); /* M367_SITE_COLOR_SEMANTIC_TOKENS_V0_1_20260730 END */ /* RESERVED: задел под волну контентных страниц / каталога (2026-07-07) */ --m367-shell-pad-x: clamp(16px, 3vw, 28px); --m367-section-gap-y: 56px; --m367-section-head-gap: 22px; --m367-grid-gap: 20px; --m367-card-pad: 24px; --m367-card-radius: 18px; --m367-control-height: 46px; --m367-control-pad-x: 20px; --m367-input-height: 46px; --m367-font-size-body: 16px; --m367-font-size-small: 14px; /* Site-level control geometry. Modules may alias these values, never redefine them numerically. */ --m367-button-radius: 8px; --m367-button-min-h: 46px; --m367-button-pad-x: 20px; --m367-button-font-size: 14px; /* Вес кнопки — ссылка на шкалу, а не своё число: 850 в Open Sans рисуется ровно как 700 (замер 26.09), и отдельное число было вторым источником правды о жирности. */ --m367-button-weight: var(--m367-font-weight-strong); --m367-button-gap: 8px; --m367-button-focus-ring: 3px solid rgba(255, 90, 0, .72); --m367-button-focus-offset: 2px; /* M367_SHARED_SEMANTIC_TOKENS_V0_2_20260714 START Existing sticky-breadcrumb fallback promoted without changing its value. */ --m367-z-sticky-breadcrumbs: 950; /* Шапка выше полосы крошек: выпадающее меню каталога живёт ВНУТРИ шапки, то есть внутри её контекста наложения, и при прежних 10 против 950 оно ныряло под крошки — описание раздела обрезалось полосой (владелец 21.09: «баг крошек, они выше описаний раздела каталога»). Своего слоя меню иметь не может: контекст задаёт родитель. */ --m367-z-site-header: 960; /* Просмотрщик снимка перекрывает всё, включая липкую шапку (её потолок 1151). */ --m367-z-modal: 1200; /* M367_SHARED_SEMANTIC_TOKENS_V0_2_20260714 END */ /* T-5: ранние дубли --m367-card-bg/--m367-card-border удалены; владельцы — блок OVERLAP_BUTTONS ниже. */ --m367-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.08); /* T-2: инпуты на тёмных foundation-поверхностях (было: белый --m367-bg-surface → белое-на-белом в .m367-task-request) */ --m367-input-bg: var(--m367-foundation-surface-raised, #151619); --m367-input-border: 1px solid var(--m367-foundation-border-soft, rgba(255, 90, 0, .18)); --m367-input-focus-ring: var(--m367-focus-ring); } [data-m367-density="compact"] { /* shell-width удалена: владелец — shell_geometry (T-1) */ --m367-shell-pad-x: clamp(12px, 2vw, 20px); --m367-section-gap-y: 40px; --m367-section-head-gap: 16px; --m367-grid-gap: 16px; --m367-card-pad: 18px; --m367-card-radius: 14px; --m367-control-height: 40px; --m367-control-pad-x: 16px; --m367-input-height: 40px; --m367-font-size-body: 15px; --m367-font-size-small: 13px; } [data-m367-density="spacious"] { /* shell-width удалена: владелец — shell_geometry (T-1) */ --m367-shell-pad-x: clamp(20px, 4vw, 36px); --m367-section-gap-y: 72px; --m367-section-head-gap: 30px; --m367-grid-gap: 28px; --m367-card-pad: 32px; --m367-card-radius: 24px; --m367-control-height: 52px; --m367-control-pad-x: 24px; --m367-input-height: 52px; --m367-font-size-body: 17px; --m367-font-size-small: 15px; } /* M367_TASKS_OVERLAP_BUTTONS_TOKEN_V0_2_20260701_TOKENS_START */ /* Paired tokens: every action/surface token has an on-* partner. No hardcoded component colors here. */ :root { --m367-surface-card: var(--m367-foundation-surface-raised); --m367-on-surface-card: var(--m367-foundation-text); --m367-card-bg: var(--m367-surface-card); --m367-card-bg-hover: var(--m367-foundation-surface-lifted, #1e2025); --m367-card-border: var(--m367-foundation-border-soft); } /* M367_TASKS_OVERLAP_BUTTONS_TOKEN_V0_2_20260701_TOKENS_END */ /* M367_TASKS_STICKY_STACK_BREADCRUMB_TOKENS_V0_1_20260701_TOKENS_START */ /* Breadcrumb colors are token-only and inherit from m367 foundation tokens. */ /* M367_TASKS_STICKY_STACK_BREADCRUMB_TOKENS_V0_1_20260701_TOKENS_END */ /* M367_TASKS_BUTTON_MUTED_HOME_TOKENS_V0_2_20260702_TOKENS_START */ /* Tasks buttons use muted homepage action orange; roles stay separated: cta, search button, active category. */ /* M367_TASKS_BUTTON_MUTED_HOME_TOKENS_V0_2_20260702_TOKENS_END */ /* M367_TASKS_BUTTONS_HERO_CHIPS_FROM_SCRATCH_V3_20260705_TOKENS_START */ :root { --m367-brand-title-name: var(--m367-foundation-text); --m367-brand-title-code: var(--m367-button-action-orange); --m367-button-action-orange: var(--m367-accent-muted); --m367-button-action-orange-hover: var(--m367-accent-muted-hover, #e86624); --m367-button-action-orange-rgb: var(--m367-accent-muted-rgb); --m367-button-active-1-bg: #c05018; --m367-button-active-1-bg-hover: #a84615; --m367-button-active-1-border: rgba(var(--m367-button-action-orange-rgb), .72); --m367-button-active-1-border-hover: rgba(var(--m367-button-action-orange-rgb), .86); --m367-button-active-1-text: #fff8f1; --m367-button-active-1-text-hover: #fff; --m367-button-active-1-shadow: none; --m367-button-active-2-bg: linear-gradient(180deg, rgba(var(--m367-button-action-orange-rgb), .26), rgba(var(--m367-button-action-orange-rgb), .17)); --m367-button-active-2-bg-hover: linear-gradient(180deg, rgba(var(--m367-button-action-orange-rgb), .36), rgba(var(--m367-button-action-orange-rgb), .23)); --m367-button-active-2-border: rgba(var(--m367-button-action-orange-rgb), .66); --m367-button-active-2-border-hover: rgba(var(--m367-button-action-orange-rgb), .82); --m367-button-active-2-text: #fff8f1; --m367-button-active-2-text-hover: #fff; --m367-button-active-2-shadow: 0 12px 26px rgba(var(--m367-button-action-orange-rgb), .11); --m367-button-active-2-shadow-hover: 0 14px 30px rgba(var(--m367-button-action-orange-rgb), .17); --m367-button-passive-bg: rgba(var(--m367-button-action-orange-rgb), .045); --m367-button-passive-bg-hover: rgba(var(--m367-button-action-orange-rgb), .10); --m367-button-passive-border: rgba(var(--m367-button-action-orange-rgb), .48); --m367-button-passive-border-hover: rgba(var(--m367-button-action-orange-rgb), .74); --m367-button-passive-text: #fff8f1; --m367-button-passive-text-hover: #fff; --m367-button-passive-shadow: none; } /* M367_TASKS_BUTTONS_HERO_CHIPS_FROM_SCRATCH_V3_20260705_TOKENS_END */ /* M367_SHARED_PAGE_FORM_TOKEN_CONTRACT_V1_20260903 START Owner: shared design-token source. Consumers must not redeclare numeric visual values, colors, typography, borders, radii, shadows, motion or account content measures locally. */ :root { /* Typography */ --m367-font-family-base: var(--ui-font-family-primary, "Open Sans", Arial, sans-serif); --m367-font-size-caption: 12px; --m367-font-size-page-title: clamp(32px, 3vw, 40px); --m367-font-size-component-title: clamp(20px, 1.8vw, 24px); /* ШКАЛА НАЧЕРТАНИЙ РАВНА ТОМУ, ЧТО ЕСТЬ В ШРИФТЕ (26.09, блок «дрескод-2»). Open Sans приходит своим пакетом из поставки Битрикса (`/bitrix/js/ui/fonts/opensans/`) и несёт ровно четыре начертания: 300, 400, 600, 700. Больше в файлах нет ничего. Замер на живой странице: девять разных чисел дают ЧЕТЫРЕ разные картинки. Строка «Начертание Handgloves 123» в 40px шириной — 300: 587,63 · 400 и 500: 543,88 · 600: 559,52 · 700, 750, 800, 850 и 900: 575,45 — одна и та же, до сотой пикселя. То есть система обещала четыре ступени жирности, а на экране их одна: крошка-ссылка (800), текущая крошка (750) и заголовок (900) выглядели одинаково с обычным «жирным». Браузер берёт ближайшее доступное начертание, и число сверх 700 не делает ничего. Хуже, чем бесполезно: у зрителя с полновесным Open Sans в системе `local('Open Sans')` подхватит его, и три числа вдруг разойдутся — вид страницы стал бы зависеть от устройства. Та же беда, от которой уходили, назначая единую гарнитуру. Числа сведены к настоящим. Имена оставлены: они называют РОЛЬ, и роль остаётся, даже когда две роли рисуются одинаково. КРОШКИ РАЗЛИЧАЮТСЯ ВЕСОМ — решение владельца 26.09 («да»). Прежние 800 у ссылки и 750 у текущей обещали разницу, которой на экране не было: оба числа рисуются как 700. Теперь разница настоящая и идёт в ту сторону, в какую читают: ПУТЬ набран обычным (400), ТЕКУЩЕЕ МЕСТО — жирным (700). Так вес говорит то же, что цвет, а не спорит с ним: пройденное тише, «вы здесь» громче. */ --m367-font-weight-regular: 400; --m367-font-weight-medium: 600; --m367-font-weight-strong: 700; --m367-font-weight-breadcrumb-current: 700; --m367-font-weight-breadcrumb-link: 400; --m367-font-weight-display: 700; --m367-line-height-icon: 1; --m367-line-height-page-title: 1.1; --m367-line-height-heading: 1.2; --m367-line-height-label: 1.35; --m367-line-height-meta: 1.45; --m367-line-height-copy: 1.55; --m367-letter-spacing-page-title: -.02em; --m367-letter-spacing-eyebrow: .08em; /* Page intro and content measures */ --m367-content-form-max-inline: 1006px; --m367-content-copy-max-inline: 72ch; --m367-content-field-min-inline: 260px; --m367-account-form-column-inline: 680px; --m367-account-aside-column-inline: 250px; --m367-account-layout-gap: 76px; --m367-account-flow-top-gap: 46px; --m367-account-mobile-gap: 32px; --m367-account-aside-pad-inline: 22px; --m367-account-aside-border: 2px solid var(--m367-foundation-accent); --m367-page-intro-crumb-title-gap: var(--m367-button-gap); --m367-page-intro-content-gap: var(--m367-section-head-gap); --m367-page-title-color: var(--m367-text-strong); /* Breadcrumb renderer */ --m367-breadcrumb-font-family: var(--m367-font-family-base); --m367-breadcrumb-font-size: var(--m367-font-size-small); --m367-breadcrumb-line-height: var(--m367-line-height-label); --m367-breadcrumb-gap: var(--m367-button-gap); --m367-breadcrumb-link-weight: var(--m367-font-weight-breadcrumb-link); --m367-breadcrumb-current-weight: var(--m367-font-weight-breadcrumb-current); --m367-breadcrumb-link-hover: var(--m367-foundation-accent); /* Form surface and controls */ --m367-color-transparent: transparent; --m367-page-color-scheme: dark; --m367-form-surface-bg: var(--m367-foundation-surface); --m367-form-surface-text: var(--m367-foundation-text); --m367-form-surface-border: var(--m367-border-soft); --m367-form-surface-radius: var(--m367-foundation-radius); --m367-form-surface-shadow: none; --m367-form-section-border: 1px solid var(--m367-action-border-divider); --m367-form-field-gap: 22px; --m367-form-notice-pad-block: 14px; --m367-form-notice-pad-inline: 16px; --m367-form-notice-accent-border: 2px solid var(--m367-foundation-accent); --m367-form-notice-bg: var(--m367-surface-overlay-subtle); --m367-form-notice-border: 1px solid var(--m367-action-border-soft); --m367-form-label-color: var(--m367-text-secondary); --m367-form-label-size: var(--m367-font-size-small); --m367-form-label-weight: var(--m367-font-weight-strong); --m367-form-help-color: var(--m367-foundation-muted); --m367-form-help-size: var(--m367-font-size-caption); --m367-form-link-color: var(--m367-button-action-orange); --m367-form-link-hover: var(--m367-button-action-orange-hover); --m367-input-text: var(--m367-foundation-text); --m367-input-placeholder: var(--m367-text-tertiary); --m367-input-caret: var(--m367-foundation-accent); --m367-input-radius: var(--m367-button-radius); --m367-input-font-weight: var(--m367-font-weight-medium); --m367-input-height: 50px; --m367-input-border-hover: var(--m367-action-border-hover); --m367-input-border-focus: var(--m367-action-border-focus); --m367-textarea-min-block: 92px; --m367-checkbox-size: 16px; --m367-link-underline-offset: 3px; /* Component geometry */ --m367-profile-status-min-inline: 240px; --m367-profile-status-max-inline: 340px; --m367-captcha-column-inline: 184px; --m367-submit-min-inline: 220px; --m367-password-toggle-inline: 100px; --m367-status-icon-size: 54px; --m367-tile-min-block: 184px; --m367-tile-icon-size: 48px; --m367-autofill-cover: 1000px; --m367-visually-hidden-size: 1px; --m367-border-width-hairline: 1px; --m367-border-width-status: 4px; --m367-radius-round: 50%; /* Interaction and states */ --m367-motion-control: 180ms ease; /* Отклик на наведение: замедляющаяся кривая без отскока — движение «садится», а не дёргается. Общий язык всего каталога: карточка, плитка направления, чип. */ --m367-motion-lift: 220ms cubic-bezier(.2, .7, .2, 1); --m367-motion-reduced: .01ms; --m367-motion-iteration-once: 1; --m367-state-error-border: rgba(190, 40, 40, .55); --m367-state-success-border: rgba(39, 132, 82, .55); --m367-button-border: 1px solid var(--m367-color-transparent); --m367-button-line-height: var(--m367-line-height-heading); --m367-button-motion: var(--m367-motion-control); } /* M367_SHARED_PAGE_FORM_TOKEN_CONTRACT_V1_20260903 END */