/* ========================================================================== AROMAWAY — типографічний шар (етап 1) -------------------------------------------------------------------------- Що робить: 1. Зводить типографіку в токени (--aw-font, --aw-ls-caps). 2. Вмикає tabular-nums на всьому, що є числом: ціни, мл, кількість, артикули, лічильники, відсотки. Це головна зміна — цифри в списках і кнопках стають однакової ширини й вишиковуються в колонку. 3. Дає вагу 600 блокам ціни та перемикачам об'єму. 4. Уніфікує uppercase + letter-spacing точково (бренди, CTA, секційні мітки). H1-H3 НЕ переводяться в uppercase навмисно — кирилиця капсом читається гірше, а H1 на сторінці товару це його назва. 5. Піднімає читабельність бренду в картці (було 11px/#aaa). Сімейство шрифта НЕ змінюється — це окремий етап. Коли всі хардкоди зведені в --aw-font, підміна Roboto на Inter стане зміною одного рядка. -------------------------------------------------------------------------- ПОРІВНЯННЯ СТАРОЇ Й НОВОЇ ВЕРСІЇ: ?typo=old — вимкнути цей шар (стара типографіка), запам'ятовується ?typo=new — увімкнути назад Прапорець живе в localStorage, тому діє на всі сторінки, поки не змінити. Усі правила навмисно scoped через html:not(.typo-legacy), щоб: а) прапорець ?typo=old вимикав шар цілком; б) специфічність (0,2,0) перебивала catalog-premium.css (0,1,0), який підвантажується пізніше з bridge-logic.js. ========================================================================== */ :root { --aw-font: 'Roboto', Arial, sans-serif; --aw-ls-caps: .05em; /* єдиний трекінг для UPPERCASE */ --aw-ls-caps-sm: .08em; /* дрібний капс (11-12px) потребує більше повітря */ } /* -------------------------------------------------------------------------- 1. ЦИФРИ — tabular-nums Головний пункт. Роботo підтримує OpenType-фічу tnum, вона просто ніде не була увімкнена. -------------------------------------------------------------------------- */ /* Ціни в картках каталогу */ html:not(.typo-legacy) .aw-card-price, html:not(.typo-legacy) .aw-card-price span, /* Ціна на сторінці/в модалці товару */ html:not(.typo-legacy) .aw-product-price-row, html:not(.typo-legacy) .aw-price, html:not(.typo-legacy) .aw-unit, /* Артикул */ html:not(.typo-legacy) .aw-product-sku, /* Перемикач варіантів (об'єм, мл) */ html:not(.typo-legacy) .aw-card-pick-pill, html:not(.typo-legacy) .t-product__option-item, html:not(.typo-legacy) .t-product__option-select, /* Кількість */ html:not(.typo-legacy) .aw-qty, html:not(.typo-legacy) .aw-qty-val, html:not(.typo-legacy) .aw-qty-btn, /* Залишок / характеристики */ html:not(.typo-legacy) .aw-remain-text, html:not(.typo-legacy) .aw-product-char-item, /* Фільтри: лічильники фасетів і поля ціни */ html:not(.typo-legacy) .aw-fc, html:not(.typo-legacy) .aw-price-line, html:not(.typo-legacy) .aw-price-min, html:not(.typo-legacy) .aw-price-max-input, html:not(.typo-legacy) .aw-price-inputs input, /* Пагінація */ html:not(.typo-legacy) .aw-pagination, /* Схожі за нотами — відсотки збігу */ html:not(.typo-legacy) .aw-sim-pct, html:not(.typo-legacy) .aw-sim-match, html:not(.typo-legacy) .aw-sim-tbl, /* Кошик (власний) */ html:not(.typo-legacy) .av-ci-pr, html:not(.typo-legacy) .av-ci-sku, html:not(.typo-legacy) .av-ci-q, html:not(.typo-legacy) .av-ci-q span, html:not(.typo-legacy) .av-cp-tot, /* Кошик (Tilda) */ html:not(.typo-legacy) .t706__cartwin-prodamount, html:not(.typo-legacy) .t706__cartwin-prodamount-price, html:not(.typo-legacy) .t706__cartwin-totalamount-info_value, html:not(.typo-legacy) .t706__product-amount, html:not(.typo-legacy) .t706__sidebar-prodamount-wrap { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* -------------------------------------------------------------------------- 2. ВАГА 600 для ціни та вибору об'єму ЗАСТЕРЕЖЕННЯ: справжнього файлу ваги 600 у проєкті поки немає — @font-face для 500 і 600 обидва вказують на roboto-bold.woff2 (=700). Тому візуально 600 зараз відпрацює як 700. Файли ваг треба довантажити окремо, це зафіксовано у звіті. -------------------------------------------------------------------------- */ html:not(.typo-legacy) .aw-product-price-row, html:not(.typo-legacy) .aw-price, html:not(.typo-legacy) .aw-card-price, html:not(.typo-legacy) .aw-card-pick-pill, html:not(.typo-legacy) .aw-qty-val { font-weight: 600; } /* Одиниця («грн», «мл») лишається легкою — це підпис, не число */ html:not(.typo-legacy) .aw-unit, html:not(.typo-legacy) .aw-product-price-row .aw-unit { font-weight: 400; letter-spacing: .01em; } /* -------------------------------------------------------------------------- 3. UPPERCASE + трекінг — точково -------------------------------------------------------------------------- */ /* Бренд у картці каталогу: був 11px / #aaa / letter-spacing:1px. 11px сірим по білому — найслабше місце на мобільному. */ html:not(.typo-legacy) .aw-product-brand { font-size: 12px; color: #8a8a8a; text-transform: uppercase; letter-spacing: var(--aw-ls-caps-sm); font-weight: 500; } /* Бренд у списку «схожі» — той самий вигляд */ html:not(.typo-legacy) .aw-sim-brand, html:not(.typo-legacy) .aw-sim-ai-target-brand { text-transform: uppercase; letter-spacing: var(--aw-ls-caps-sm); font-weight: 500; } /* Секційні мітки («ОПИС», «ХАРАКТЕРИСТИКИ» тощо) */ html:not(.typo-legacy) .aw-section-title, html:not(.typo-legacy) .aw-gallery-label, html:not(.typo-legacy) .aw-sim-ai-section-title { text-transform: uppercase; letter-spacing: var(--aw-ls-caps); font-weight: 600; } /* CTA-кнопки */ html:not(.typo-legacy) .aw-card-btn, html:not(.typo-legacy) .aw-btn-buy, html:not(.typo-legacy) .av-cp-co { text-transform: uppercase; letter-spacing: var(--aw-ls-caps); font-weight: 600; } /* Мітка над перемикачем варіанта */ html:not(.typo-legacy) .aw-card-pick-label { text-transform: uppercase; letter-spacing: var(--aw-ls-caps-sm); font-size: 11px; } /* -------------------------------------------------------------------------- 4. ЗАГОЛОВКИ — трекінг без uppercase Тільки прибираємо розкид letter-spacing, регістр не чіпаємо. -------------------------------------------------------------------------- */ html:not(.typo-legacy) .aw-product-title, html:not(.typo-legacy) .aw-sim-title, html:not(.typo-legacy) .aw-faq-title { letter-spacing: -.01em; } /* -------------------------------------------------------------------------- 5. Індикатор версії — показується лише коли прапорець ?typo= вже вживали. Потрібен, щоб під час порівняння було видно, яка версія зараз на екрані. -------------------------------------------------------------------------- */ #aw-typo-badge { position: fixed; left: 12px; bottom: 12px; z-index: 2147483000; padding: 5px 10px; border-radius: 5px; font: 600 11px/1 var(--aw-font); letter-spacing: var(--aw-ls-caps); text-transform: uppercase; color: #fff; background: #16a34a; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); pointer-events: none; opacity: .85; } html.typo-legacy #aw-typo-badge { background: #6b7280; }