/* ─────────────────────────────────────────────────────────────────────────── */ /* OPONYTOMY — design tokens */ /* */ /* Джерело: `специфікація 1. OponyToMy.md` + `кнопки. OponyToMy 2.html` */ /* (дизайнерський handoff, mobile-390 prototype). */ /* */ /* Sibling до Inforeisen. Імена токенів збігаються з `new/css/main.css :root` */ /* v44 набором — той самий шаблон працює під обома брендами, змінюється */ /* тільки цей файл під siteId=2. */ /* */ /* Ключова відмінність від Inforeisen'івської teal-системи: */ /* - палітра тільки на 3 кольорах (чорний / білий / accent-red) */ /* - accent зарезервований ВИКЛЮЧНО під Primary CTA */ /* - «Кольорові лінки» / другорядні дії → --text-muted, ніколи accent */ /* - --status-success (зелений) — єдиний виняток, тільки для «в наявності» */ /* ─────────────────────────────────────────────────────────────────────────── */ :root { /* ── ACCENT (Primary CTA states) ───────────────────────────────────────── */ /* 2026-08-05: --accent-hover повернуто за design system §9.1 — OTM Primary hover робить background swap на цей токен (не filter, як INFR). */ --accent-primary: #B41522; /* default */ --accent-primary-rgb: 180, 21, 34; /* rgb() companion — used in header hairline / icon-btn hover tint (DS §9.12) */ --accent-hover: #CC1A28; /* :hover — світліший за default (design system §9.1, §2.2) */ --accent-pressed: #8A0F19; /* :active — темніший */ --accent-disabled-bg: #C8A3A6; /* :disabled — десатурований */ --accent-disabled-text: rgba(250, 250, 250, 0.65); --on-accent: #FAFAFA; /* текст поверх accent */ /* ── TEXT ──────────────────────────────────────────────────────────────── */ /* Затемнено 2026-08-24 per DS §2.1 + §16.3 (WCAG 1.4.3). Старі значення не проходили AA: --text-placeholder 3.31:1, --text-muted 3.17:1 на --bg-page. Нові дають 4.54 / 4.54 — затемнення в HLS зі збереженням відтінку. ⚠ Наслідок для §2.1: до цієї правки приглушена трійка OP збігалась повністю (#8A8A8A), тож твердження «усі три рівні» більше не чинне — --text-muted тепер #707070, а --text-placeholder/--text-subtle #767676. Звуження палітри до трьох ролей (--text-on-light = --text-default) лишається чинним. */ --text-default: #282424; /* аліас до on-light (Inforeisen main.css узує обидва) */ --text-on-light: #282424; --text-muted: #707070; /* було #8A8A8A */ /* Стрілка селекта — data-URI, тож колір у ній зашитий і токеном керуватись не може. Значення дорівнює --text-muted ЦЬОГО бренду: #707070. Раніше обидва бренди ділили один сірий INFR-івський гліф (див. .adres-select у main.css) — тут це розведено. */ --chevron-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --text-placeholder: #767676; /* було #8A8A8A */ --text-subtle: #767676; /* було #8A8A8A */ --text-inverted: #FAFAFA; /* DS §3 line 1826 — muted-on-dark. --text-muted (#8A8A8A) on --bg-chip (#282424) contrasts 3.4:1, below readable threshold. This token replaces it wherever muted text sits on the dark OP header/chip surfaces (nav-links in centered menu per §9.12 line 3051). Contrast ≈ 8:1. */ --text-inverted-muted: rgba(250, 250, 250, 0.58); /* ── SURFACES ──────────────────────────────────────────────────────────── */ --bg-page: #F5F5F5; /* Поверхня плитки-зрізу над списком (.orl-stat). Не --bg-surface-light: плитка має читатись як зріз даних, а не як ще одна біла картка поруч із таблицею. Значення з прототипу «ОСНОВНИЙ», бежева картка на світлій сторінці. */ --benefit-bg: #DDD8D4; --bg-surface-light: #FAFAFA; /* #FFFFFF з 2026-09-11 (рішення користувачки). Було #FAFAFA з посиланням на DS §9.12 / §2.3 («muted-white, not pure»), але прототип «Менеджери» задає тут чистий білий, і на практиці #FAFAFA не працював: сторінка OTM це #F5F5F5 (245), картка була 250 — 5 пунктів із 255, тобто 2% яскравості. Нижче межі, на якій око взагалі бачить межу. Наслідок був видимий у трьох місцях одразу: розриви між записами-картками в мобільному режимі обох списків, тіні на картках, і тло форми клієнта. Тепер 255 проти 245 — удвічі більший відрив, як у прототипі. ⚠ Токен беруть ще й pill-дії (§9.12) і бічна навігація профілю — там він теж стає чистим білим. Це свідомо: «піднята поверхня» на світлій сторінці мусить бути світлішою за неї на всіх носіях однаково. */ --bg-surface-elevated: #FFFFFF; --bg-input: #FAFAFA; --bg-chip: #282424; /* темні заливки чипів + EU-бейджів */ --bg-subtle: #FAFAFA; /* DS §2.3 (2026-08-21, admin-scope) — затемнення сторінки під відкритим оверлеєм (дропдаун статусу, панель історії). --color-bg-surface-overlay є, але заскоуплений лише на Home (home_new.css, §13) і поза Home недоступний. Значення — rgba від --bg-chip з альфою .12. Для Inforeifen — TBD. */ --bg-scrim: rgba(40, 36, 36, .12); /* Chip selected state — DS §chip виняток для OTM: bg = --bg-chip (dark), text = --text-inverted (white), border same as bg (invisible). Ніяких червоних (accent-primary reserved for Primary CTA per §2.2/§10.3). */ --chip-selected-fg: var(--text-inverted); --chip-selected-border: var(--bg-chip); /* ── BORDERS ───────────────────────────────────────────────────────────── */ /* #DDD8D4 → #cdc6c0 per DS §16.4 (23.08.2026). Відтінок і насиченість збережені (H 27°, S 12%), змінена лише світлість 85% → 78%. Це рішення про ВИГЛЯД, не про доступність: поле OP стоїть на майже однаковій зі сторінкою заливці (#FAFAFA на #F5F5F5 = 1.04:1), і при світлій рамці контур читався розмито. 1.4.11 це НЕ закриває (1.62/1.55 при порозі 3:1) — борг лишається відкритим свідомо, розбір чотирьох механізмів межі у §16.4. */ --border-default: #cdc6c0; /* було #D9D9D9 */ --border-subtle: #ECECEC; /* design system §2.4 (2026-08-10) — hover непофарбованих outline-елементів (Qty-степер §9.3) */ --card-border: #E5E5E7; /* зовнішня обводка карток (замість тіні). ⚠ OTM-only: в inforeisen/tokens.css його немає. Споживачі мусять писати var(--card-border, var(--border-surface)) — інакше на INFR декларація з невизначеним кольором відкидається цілком і межа зникає. */ --border-surface: #E5E5E7; /* аліас — Inforeisen main.css узує це ім'я */ --border-on-surface: rgba(10, 10, 10, .12); /* DS §9.12 — subtle divider inside pill surfaces (lang-divider) */ --border-module: rgba(107, 114, 128, 0.4); /* legacy — не в спеці, лишаю */ /* DS §2.4 (2026-08-21, admin-scope) — роздільник на ТЕМНІЙ поверхні. Жоден із наявних токенів меж (#cdc6c0 / #ECECEC / #E5E5E7) на фоні #282424 не читається як хейрлайн — усі надто світлі. Застосування: вертикальний роздільник у темному хедері, роздільники рядків усередині темного тултипа. Значення для Inforeifen — TBD (див. §2.1: свідомо OP-only, не недорахований). */ --border-on-dark: rgba(250, 250, 250, .16); /* ── STATUS (семантика, поза брендом) ──────────────────────────────────── */ /* УНІФІКОВАНО З INFOREIFEN 2026-08-24 per DS §2.5 (рішення 22.08) + кандидат B (23.08). Значення мусять бути ІДЕНТИЧНІ inforeisen/tokens.css — статус це стан даних, а не голос бренду: замовлення однаково скасоване на обох сайтах. Попередні пари відрізнялись косметично й безпідставно (#1A6E63 проти #4F7A52 — 5 одиниць в одному каналі); жодна різниця не читалась як брендування. Брендування лишається в --accent-primary, --bg-chip і формі компонентів. Було 60 hex на синхронізацію вручну, стало 30. ⚠ Правити ці 12 рядків ТІЛЬКИ разом з Inforeifen. */ --status-success: #1A6E63; /* було #4F7A52 */ --status-success-soft: #f0f7f6; /* було #EDF2EC */ --status-success-ink: #bedad6; /* було #375C3A */ --status-warning: #8a6a3d; /* було #8C6A34 */ --status-warning-soft: #f6f0e6; /* було #F5EEDD */ --status-warning-ink: #e3d4b8; /* було #6B4F24 */ /* ⚠ OP-специфіка: --status-danger (#b3261e) і --accent-primary (#B41522) — контраст 1.05:1, тобто фізично один колір. Тому danger-стан на Oponytomy МУСИТЬ нести другий носій (форма, іконка, подвоєна рамка, текст), а не лише колір — §2.5 «Error-стан у формах». */ --status-danger: #b3261e; /* було #9E4A34 */ --status-danger-soft: #f6eeee; /* було #F5E3DC */ --status-danger-ink: #e3cfcf; /* було #7A3323 */ --status-info: #5a708a; /* було #4E6C86 */ --status-info-soft: #eef1f5; /* було #E7ECF1 */ --status-info-ink: #d3dce6; /* було #37506A */ /* ── FOCUS RING ────────────────────────────────────────────────────────── */ --focus-ring: 0 0 0 3px rgba(180, 21, 34, 0.32); --focus-ring-inset: inset 0 0 0 2px rgba(180, 21, 34, 0.55); /* DS §9.22 — темна нейтральна поверхня системного повідомлення. Значення збігається з --text-on-light (Oponytomy), і спокуса написати background: var(--text-on-light) велика. Робити так НЕ можна: це рівно та помилка, яку §9.15 виправляв 10.08.2026, коли крапка радіо-картки брала колір із текстового токена замість статусного. Текстовий токен, використаний як поверхня, ламається при першій же зміні палітри. Поверхня має власну роль — отже, власне ім'я. */ --bg-notice: #282424; /* ── SHADOWS ───────────────────────────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(40, 36, 36, 0.06), 0 1px 1px rgba(40, 36, 36, 0.04); --shadow-2: 0 8px 24px rgba(40, 36, 36, 0.10), 0 2px 6px rgba(40, 36, 36, 0.05); --shadow-3: 0 20px 48px rgba(40, 36, 36, 0.14), 0 6px 12px rgba(40, 36, 36, 0.08); /* ── RADII / SPACING / TYPOGRAPHY (перенесено з Inforeisen 1:1) ────────── */ --radius-sm: 8px; --radius-lg: 8px; --radius-pill: 100px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; --font-mono: 'JetBrains Mono', monospace; --font-body: 'Outfit', sans-serif; /* ─────────────────────────────────────────────────────────────────────── */ /* COMPONENT GEOMETRY (override Inforeisen main.css defaults) */ /* Джерело: `кнопки. OponyToMy 2.html` */ /* ─────────────────────────────────────────────────────────────────────── */ /* Page-level Primary CTA (Pokaż opony, login submit, orders empty CTA) */ /* 2026-08-19: height 52→56 — DS §7 знову перескочив на 56. Впливає на всі OTM primary CTA через token (cart/checkout/orders/profile forms). */ --btn-cta-height: 56px; --btn-cta-radius: 30px; --btn-cta-padding: 18px 24px; --btn-cta-font-size: 18px; /* Smaller Primary (Zapisz, Dodaj do koszyka в картці) */ /* 2026-08-10: radius 30→999 (pill) per design system §9.1 — узгоджено з --btn-cta-radius pill і з --qty-stepper-radius OP (теж 999). Попереднє значення 30px (2026-08-05) було експериментом «той самий радіус, що й у головних», скасовано на користь спекованого pill. */ --btn-md-height: 52px; --btn-md-radius: 999px; --btn-md-padding: 0 20px; --btn-md-font-size: 15px; /* Compact Primary (tablet/desktop 112×36 add-btn) — height locked by row layout; adopt brand-language: pill + bold + compact typography. NOT in designer spec (mobile-390 only); extrapolated. 2026-08-10: radius 30→999 (pill) per design system §9.1. */ --btn-sm-height: 36px; --btn-sm-radius: 999px; --btn-sm-font-size: 15px; --btn-sm-font-weight: 700; --btn-font-weight: 700; /* Secondary CTA у картці акції (Do koszyka) — без брендового винятку: нейтральний контур і базова вага, як у решти Secondary-кнопок. ⚠ Формули 16.09 («C») тут НЕМАЄ свідомо: прототип змінив лише кнопку рівня CTA у кошику/касі (--btn-cta-secondary-* нижче), а цю лишив як була. ДС §10.2 при цьому описує нову формулу — розбіжність винесена у звіт. */ --btn-secondary-border-width: var(--hairline); --btn-secondary-border-color: var(--border-default); --btn-secondary-color: var(--accent-primary); --btn-secondary-weight: 700; /* Вторинна кнопка рівня CTA — кошик, каса, екрани успіху (.btn-cart-secondary). 16.09 · рішення Ляни, варіант «C»: текст --accent-primary → --text-on-light межа --border-default → --text-muted ПРИЧИНА 1 (ієрархія): у стеку стояли два червоних елементи різної ваги — залита primary і червоний текст в обведенні. Око секунду вирішувало, який головний. Тепер червоне на екрані одне, а різниця між кнопками — не колір, а вага (залита vs обведена). ПРИЧИНА 2 (доступність): #D9D9D9 на тлі картки #FAFAFA дає 1.35:1, тоді як WCAG 1.4.11 вимагає 3:1 для межі, яка ідентифікує контрол. Поки текст був червоним, кнопку впізнавали за кольором і межа працювала декоративно; з чорним текстом впізнавання лягає на межу, і 1.35 стає дефектом. --text-muted (#707070) дає 4.74:1. Заливки на ховері немає — у зразку OponyToMy її немає взагалі, темнішає тільки рамка. Товщина 1px і форма — як у ДС. */ --btn-cta-secondary-border-width: var(--border-width-default); --btn-cta-secondary-border-color: var(--text-muted); --btn-cta-secondary-color: var(--text-on-light); --btn-cta-secondary-hover-bg: transparent; --btn-cta-secondary-hover-border: var(--text-on-light); /* Текстова дія рівня tertiary (ДС §10.13/§10.20) — чорнилом, не акцентом: §3.2 віддає акцент Primary CTA, і два червоних рівні в одному стеку змагалися б за увагу. */ --text-action: var(--text-on-light); --text-action-hover: var(--text-muted); /* Коло-галочка на екрані успіху. Було #1e6b3c літералом у main.css — третій зелений, якого немає в токенах, і єдина зелена пляма на екрані OponyToMy. Знак «зроблено» несе форма галочки, а не колір. */ --success-mark-bg: var(--text-on-light); /* Chip / EU-badge */ --chip-radius: 8px; --chip-font-size: 14px; /* Qty stepper — design system §7 + §9.3 (2026-08-10 pill-outline редизайн). Height 44px (2026-08-10) — раніше було 52px. Radius 999px pill — узгоджено з CTA-кнопкою поруч (--btn-md-radius OP теж 999px, повернуто до spec 2026-08-10 в цьому ж коміті). */ --qty-stepper-height: 44px; --qty-stepper-radius: 999px; --qty-stepper-width: 104px; /* mobile target */ --qty-stepper-width-tablet: 120px; --qty-stepper-width-desktop:132px; --qty-btn-width: 28px; --qty-btn-font-size: 20px; /* символ − / + */ --qty-value-font-size: 18px; --qty-value-weight: 700; /* accent-tinted surfaces — cardinal замість teal. --shadow-hover-cta прибрано 2026-08-10 per design system §9.1 (hover ефект-тіні на Primary CTA скасовано — hover тепер тільки background swap на --accent-hover). */ --bg-accent-tint-soft: rgba(180, 21, 34, 0.06); --bg-accent-tint-medium: rgba(180, 21, 34, 0.12); /* Note: --color-old-blue навмисно НЕ перевизначаємо — під oponytomy показуємо той самий Inforeisen'івський блакитний, що й на siteId=1 (див. utils/variables.css). Якщо колись треба буде змінити — bridge тут. */ /* Маркетингові секції головної — прототип 01.09. Плитки «Elastyczne warunki»: бежевий #ddd8d4 — тепла пара до фону OTM. Заголовки секцій нейтральні (за прототипом OP), не акцентні. */ --benefit-bg: #ddd8d4; --color-heading: var(--color-text-primary); /* Фон звичайного чипа й піл-перемикача. У прототипі це --chip-bg, окремий від --bg-chip (той для обраного стану й lock-label). */ --chip-bg: #DDD8D4; /* Текст поверх --bg-chip (OTM він майже чорний, тож напис світлий) і обводка чипа. Пара до --bg-chip / --chip-bg. */ --bg-chip-fg: var(--text-inverted); --chip-border: rgba(40, 36, 36, .14); /* Обраний чип: OTM — суцільна темна плашка, напис світлий. */ --chip-selected-bg: var(--bg-chip); --chip-selected-border: var(--bg-chip); --chip-selected-fg: var(--bg-chip-fg); /* Рамки SearchDropdown — еталонний CSS ДС (§11.3 + §11.7). OTM інакше: відкритий стан бере ПОВНИЙ акцент (задокументований виняток «акцент як маркер, не фон»), а обраний — бежеву рамку чипа. */ /* Фон опції під курсором — нейтральний сірий (ДС §11.7: живий код тут точніше відповідає 3-кольоровій дисципліні бренду, ніж акцентний тінт §11.3). Парний токен INFR стоїть на тінті. */ --dd-option-hover-bg: var(--hover-grey); --dd-border-hover: #323744; --dd-border-open: var(--accent-primary); /* Selected — нейтральна рамка, акцентними лишаються тільки текст і «×». ДС суперечить сама собі: текстова таблиця §11.3 каже --text-placeholder («той самий, що й hover і Open»), а її ж демо-CSS і прототип 01.09 — #DDD8D4 (--chip-bg). Рішення 03.09: беремо --text-placeholder. */ --dd-border-selected: var(--text-placeholder); /* ── Видача: підсвітка рядка під курсором (еталон 15.09) ───────────── Тепла (коричнева) поверхня — родич бежевого чипа --bg-chip, але висвітлений так, щоб текст на ньому лишався читабельним. Заміряно проти #FAFAFA (тло картки): різниця заливок 1.05:1 — підсвітка веде око по рядку, а не позначає подію. На такій слабкій заливці чинне чорнило норму тримає (муте 4.52, зелений 4.57 при вимозі 4.5), тож окремих hover-значень не заводимо. */ --row-hover-bg: #F7F4F1; /* ── Промо-слот у стрічці видачі (еталон 15.09) ────────────────────── Той самий бежевий, що чип «Szybki wybór» — уперше вжитий як ПОВЕРХНЯ. Заміри 11.09 забороняли робити його тлом екрана через приглушений текст; тут заборона не діє: на смузі приглушеного тексту немає — заголовок іде основним чорнилом (10.85 на бежевому). */ --promo-band-bg: #DDD8D4; /* Цінник промо-плитки — знято піпеткою з макета. Біле на ньому 3.62, тобто лише для ВЕЛИКОГО тексту (WCAG 1.4.3): звідси число 28px bold і «zł» 20px bold, дрібного білого на помаранчевому в плитці немає. */ --promo-price-bg: #DA623E; }