/* ============================================================================ tokens.css — дім CSS-токенів проєкту Juliya Kros ---------------------------------------------------------------------------- Джерело всіх значень — канонічна сторінка макета «Верстка ✔». Більшість знята НЕ на око, а зі **змінних Figma**, які завів дизайнер: імена `black/NNN`, `H2-48`, `Txt-16` тощо — його, і збережені навмисно, щоб слід «токен → джерело» лишався прямим. Правила цього файла: · сторінковий CSS токени лише СПОЖИВАЄ і нових не заводить; · кожен токен має коментар-роль: що це, звідки, за яким законом змінюється; · роль без рядка в `docs/ROLES-TABLE.md` тут зʼявитись не має права; · числа дублюються в `config.json` ЛИШЕ там, де їх читає скрипт (контейнер, пороги, контраст-пари) — решта живе тут. Пороги: 820 і 1920 — зареєстровані в `config.json → thresholds.registered`. Незареєстрований поріг = FAIL гейта. ============================================================================ */ :root { /* -------------------------------------------------------------------- 1. ПАЛІТРА — рампа з десяти кроків, підписана дизайнером у легенді дають семантичні токени в §2, і саме ті вживаються в розмітці. -------------------------------------------------------------------- */ --black-000: #ffffff; /* black/ffff */ --black-100: #e7e7e7; /* black/100 — підписаний у легенді як «Line» */ --black-200: #d0cfcf; /* black/200 — лише у стані «Не виготовляється» */ --black-300: #b8b8b7; /* black/300 */ --black-400: #a0a09f; /* black/400 — «Description / buttons» і бейдж Sold */ --black-500: #888887; /* black/500 — бейдж Sale */ --black-600: #717070; /* black/600 — підписаний у легенді як «txt» */ --black-700: #464241; /* black/700 — друга половина зразка «Line» */ --black-800: #322f2e; /* black/800 — бейдж New; ним же H1 на D і T */ --black-900: #232221; /* black/900 — основний чорний проєкту */ /* -------------------------------------------------------------------- 2. СЕМАНТИКА КОЛЬОРУ — те, що вживається в розмітці. Розділення «рампа → роль» зроблено свідомо: рампа описує, ЯКІ кольори є, ролі — ДЕ вони застосовні. Без цього шару зміна одного відтінку розповзається по файлах пошуком-заміною. -------------------------------------------------------------------- */ --surface: var(--black-000); /* тло сторінки */ --ink: var(--black-900); /* основний текст 15.88:1 */ --ink-muted: var(--black-600); /* роль «txt» із легенди 4.94:1 */ /* Макет ставить тут black/400 — на білому це 2.62:1 при вимозі 4.5 (AA). Зсунуто на два кроки рампи вниз: 4.94:1. Неактивний таб — це КОНТРОЛЬ, який користувач може натиснути, а не вимкнений елемент, тому виняток WCAG для неактивних контролів на нього не поширюється. Розходження з макетом, чекає «так» на Чекпоінті 2. */ --ink-subtle: var(--black-600); /* ПІДПИС ПОЛЯ — ОКРЕМА РОЛЬ ВІД `--ink-subtle`, і розійшлись вони не випадково. «Опис», «Артикул:», «Колір:», слот вмісту табів у каноні — selected, ті самі в базовому). ⚠️ 2.62:1 при вимозі 4.5 — свідоме відхилення, рядок. Пара `--label-ink × --surface` у контраст-гейт не входить; поріг 4.5 для решти пар не займаний. */ --label-ink: var(--black-400); /* КРИХТИ. Приглушені тут ПОПЕРЕДНІ ланки, а не поточна: канон дає `black/300` кожній ланці-посиланню й кожній скісній та `black/900` . ⚠️ 1.94:1 — свідоме відхилення, рядок; у гейт ця пара не входить. */ --crumb-ink: var(--black-300); --line: var(--black-100); /* тонкі роздільники — 1.24:1 */ /* Ролі «контрастний роздільник» тут НЕМАЄ. У легенді палітри `black/700` стоїть другою половиною зразка «Line» — вочевидь під роздільник на темному тлі. Суцільний прохід не знайшов **жодного** вузла, де він так ужитий, а темних поверхонь у проєкті немає. Токен без споживача — це дефект, а не запас: він переживає причину своєї появи й потім вживається навмання. Повернеться разом із першою темною поверхнею. */ --btn-bg: var(--black-900); /* кнопка «Купити», базовий стан */ --btn-bg-hover: var(--black-700); /* наведення — знято з легенди відтінок на око», а конкретний крок рампи */ /* КНОПКА «ФІЛЬТР» У ВІДКРИТОМУ СТАНІ. Тон названий замовником а не знятий із вузла: стану «панель відкрита» канон не малює жодним артбордом — таблетка є там тільки при закритій панелі. У палітрі свого рівня цей тон не має, тому стоїть значенням, а не посиланням на `black/*`. Білий підпис на ньому дає 9.92:1 — вище за AA з запасом. */ --filter-open-bg: #464241; --btn-ink: var(--black-000); /* Дві ролі поза рампою дизайнера, і це не недогляд: скрим напівпрозорий, а тло мініатюри світліше за найсвітліший крок рампи. Джерело в кожного названо, бо роль без джерела — це значення «на око». */ /* Скрим половини пари. Значення НЕ на око: середня яскравість лівої `0.6 × 183.7 + 0.4 × 31 = 122.6`. Три різні ділянки дали ту саму відповідь . Права половина в тому ж кадрі не змінюється — темнішає рівно та, що під курсором. */ --scrim: rgba(32, 31, 31, .4); /* затемнення половини */ /* Скрим цитати засновниці — той САМИЙ тон, але інша сила, і це властивість (D) і (T) — суцільний `rgba(32, 31, 31, 0.2)`. Два різні числа на різних якорях; поставити одне «бо схоже» означало б злити половину затемнення на мобільному, де текст найдрібніший. */ --scrim-soft: rgba(32, 31, 31, .2); /* цитата на D і T */ /* Плівка героя сторінки «Про нас». Прозорість 50 % — власна: у вузлі (`--scrim` .4, `--scrim-soft` .2, перший екран Головної — .52 двома шарами). Чорний тут ТОЙ САМИЙ, що в решті плівок: канон цієї сторінки малює `#232221`, а токен веде `#201F1F`, і різниця під прозорістю 0.5 — 1.5/255. Другий чорний заради неї не заводиться. */ --ab-scrim: rgba(32, 31, 31, .5); /**/ /* Пропорції кадрів сторінки «Про нас» — частки, а не пікселі, тому живуть градієнт унизу героя 2 — 455 з 980. */ /* Низ крихт -> верх H1 у героєві. Число канонне (60 на 1920) і стоїть у спільному блоці, а не в десктопному: нижче 1024 воно тримає крихти й заголовок нарізно. Без нього змінна там просто не існувала, зазор ставав нулем, і рядок «Головна» опинявся під коробкою H1 — знайшов `check-clickable`, не око. Що тут буде на 820 і 375, скаже артборд . */ /* СТОРІНКА «ПРО НАС», десктопний якір. ⚠️ ЧИСЛА ПЛОСКІ, І ЦЕ НАВМИСНО, АЛЕ ВЖЕ НЕ ЧЕРЕЗ БРАК АРТБОРДА. і числа стали ДВОПОВЕРХОВІ: тут — планшетні, у блоці ≥1024 — десктопні. Рампою вони не зшиті свідомо: коробка тут — це МІСЦЕ ПЕРЕНОСУ, а не розмір, і плавно текти їй нема куди — рядковість міняється стрибком (цитата 4 рядки на T проти 3 на D). Мобільний стелею разом зі `100%`, а не композицією. Ширини — це МІСЦЯ ПЕРЕНОСУ, а не оформлення: кожна тримає рядковість свого блока (див. `docs/page-plan/about.md` §2.2). Сумами слотів вони не є жодного разу — коробки протягнуті в макеті рукою. */ /* ⚠️ КОРОБКА H1 ВЕДЕ РАМПУ, А НЕ СТОЇТЬ СХОДИНКАМИ. Канон дає два рядки на заголовок ламався двічі й у різні боки, і це заміряно, не помічено: у смузі 520…767 кегль доростав до 95 при коробці 268 — ТРИ рядки; у смузі 1024…1420 коробка стрибала на 800 при кеглі 111 — ОДИН. Замовник назвав це прямо: «він завжди повинен бути в два рядки». Запис — тотожністю двох сегментів, а не перекривачем у медіа-запиті : перекривач обрізав би рампу на стіні 768 і дав би стрибок 473 → 500. На якорях сума дає точно канон: 268 + 500 − 500 = 268, 500 + 500 − 500 = 500, 500 + 1125 − 500 = 1125. */ --ab-title-w: calc(clamp(268px, calc(268px + 232 * (100vw - 375px) / 445), 500px) + clamp(500px, calc(500px + 625 * (100vw - 820px) / 1100), 1125px) - 500px); --ab-note-w: 191px; /**/ --ab-quote-w: 324px; /**/ --ab-aside-w: 343px; /**/ /* H2 «Сьогодні…» на планшеті ДРІБНІШИЙ за решту H2 сторінки: вузол 160 на чотири рядки). Це знято з ВУЗЛА через MCP, а не змірено по знімку (EVIDENCE §14). На десктопі обидва H2 однакові — там ці два токени повертаються до загальної ролі. */ --fs-ab-h2: 28px; /**/ --lh-ab-h2: 32px; --ab-cover-flat-ratio: 375 / 240;/**/ --ab-col-w: 343px; /* колонка А: 29496 · 29497 */ --ab-col-narrow: 343px; /* колонка Б: 29502…29505 */ --ab-lead-w: 343px; /**/ /* КОРОБКА H2 ГЕРОЯ 2 — РАМПА 312 → 590. Плоскі 312 при кеглі, що ріс 28 → 36, давали на 767 ДЕСЯТЬ рядків при канонних 7 (375) і 5 (820). Обидва якорі при цьому були точні — спіймано check-line-count. */ /* Другий сегмент 590 → 710 (820 → 1920) тотожністю: плоскі 710 з 1024 при кеглі 38 давали ЧОТИРИ рядки замість канонних пʼяти — коробка росла швидше за кегль. */ --ab-cover-title-w: calc(clamp(312px, calc(312px + 278 * (100vw - 375px) / 445), 590px) + clamp(590px, calc(590px + 120 * (100vw - 820px) / 1100), 710px) - 590px); /**/ --ab-cover-note-w: 343px; /**/ --ab-tail-lead-w: 319px; /**/ --ab-thanks-w: 343px; /**/ --ab-h2-w: 324px; /**/ --ab-final-w: 312px; /**/ /* СТОРІНКА КОЛЕКЦІЇ, десктопний якір. ⚠️ ЧИСЛА ПЛОСКІ З ТІЄЇ Ж ПРИЧИНИ, ЩО Й у «Про нас»: артборд один . Але ціна тут ВИЩА — сторінка заводить три власні механіки (галерея, відеокадр, оверлей), і жодна з них не бачила вузьких смуг. Чого в цьому переліку НЕМАЄ й бути не повинно: коробка H1 (1003) і крок галереї (200 / 32) — це вже наявні `--hero-title-w` і сітка контейнера; пропорція кадру галереї — наявний `--doc-shot-ratio`. */ /* ⚠️ ТЕПЕР ЧИСЛА ТРИПОВЕРХОВІ, і цим закритий ФАКТОМ тобто підстава «артборд один» відпала. База — мобільна, перекривачі 768 і 1024 — планшетна й десктопна, як у `--ab-*` сторінки «Про нас». */ --cl-quote-w: 324px; /**/ --cl-lead-w: 345px; /**/ --cl-col-w: 344px; /**/ --cl-note-w: 330px; /**/ /* Пропорція ПЛИТКИ ТОВАРУ — своя, не `--doc-shot-ratio`. Ряд кадрів блока «Про колекцію» на мобільному 80×116 (0.690), а плитка товару там же — 168×237 (0.709), тобто це різні кадри з різними пропорціями. На двох старших якорях вони збігаються (181×255, 200×282), і саме тому різницю легко було б не помітити. */ --cl-tile-ratio: 168 / 237; /* герой 375×540, а відеокадр удвічі нижчий. */ --cl-video-ratio: 375 / 240; /* Стеля картки наведення в ПЛОСКІЙ парі — часткою ЇЇ висоти. */ --cl-pair-thumb-h: 70%; /* на 72, заголовок на 104), 32 на планшеті (72 → 120). */ /* Підпис «Fashion Week · дата» від НИЗУ героя: 596 − 572 = 24 на мобільному, 894 − 862 = 32 на планшеті. */ /* КОРОБКА H1 — РАМПА 300 → 500, А НЕ ПЛОСКЕ ЧИСЛО. Плоскі 300 стояли до 768, поки кегль ріс 60 → 95: на 440…767 назва лягала в ТРИ рядки при канонних двох на обох якорях. Жоден чекер якорів цього не бачив — обидва якорі були правильні. Спіймано check-line-count. */ /* Другий сегмент — та сама рампа, що в `--hero-title-w` (500 → 1003 від 820), записана тотожністю: на 1023 було 500, на 1024 — 593. */ --cl-title-w: calc(clamp(300px, calc(300px + 200 * (100vw - 375px) / 445), 500px) + clamp(500px, calc(500px + 503 * (100vw - 820px) / 1100), 1003px) - 500px); /**/ /* ФОКУС КАДРІВ ПЕРШОГО ЕКРАНА У ВУЗЬКІЙ СМУЗІ. Кадри 1920×1960 у слоті 375×270 накриваються `cover`, і центр за замовчуванням різав голови. файли й знайдено зсув кропу перебором — ліве фото на 24 із 578 px запасу (4.2 %), праве на 48 (8.3 %). Замовник: «щоб не обрізались голови». */ --cl-hero-focus-1: 4%; /**/ --cl-hero-focus-2: 8%; /**/ /* КЕГЛІ БЛОКА «ПРО КОЛЕКЦІЮ» — свої, і взяті з ВУЗЛІВ, не з ролі сусідньої Txt-16 (16/20 Regular), виносний абзац — 20/24 Medium. Планшет тримає ті самі кеглі (колонки 300×120 і 300×80 = 6 і 4 рядки по 20; виносний 300×120 = 5 рядків по 24), тоді як загальні `--fs-lead` і `--fs-phrase` у цій смузі вже виросли до 20/24 і 24/28 — числа Головної, не колекції. */ --cl-text-fs: var(--fs-body); --cl-text-lh: var(--lh-body); --cl-lead-fs: var(--fs-phrase); --cl-lead-lh: var(--lh-phrase); /* ВИСОТА ДОКУМЕНТАЛЬНОГО БЛОКА, і вона потрібна саме числом. Липкий блок, вищий за екран, приколений ВЕРХОМ під шапкою, тримає власний низ за згином назавжди: на екрані 1080 кнопка «Більше» стоїть на 1136 і не видима в ЖОДНОМУ положенні прокрутки. CSS не вміє спитати елемент про власну висоту у власному `top`, тому висота названа тут. Число не пливе від довжини тексту: стовпчик обрізаний clamp-ом до сталої кількості рядків — у тому й сенс кнопки. Дрейф ловить `canon-geometry`, яка міряє цей блок проти вузла канону. */ /* ⚠️ ЧИСЛО ТРИПОВЕРХОВЕ, бо блок на кожному якорі свій заввишки: 736 на нижнє поле 48), 827 на планшеті (942 → 1721 + 48), 1176 на десктопі. Плоскі 1176 давали на вузьких якорях `top: 7px` замість 60 — блок приколювався майже до верху вікна, і відеокадр накривав його на половині, не діставши до кінця. Заміряно: висота блока 736 · 827 · 1176 при `--cl-doc-h` 1176 усюди. */ --cl-doc-h: 736px; --cl-head-top: 48px; /* 644 − 596: «≠» під першим екраном */ --cl-quote-top: 24px; /* 688 − 664 */ --cl-shots-top: 24px; /* 840 − 816 */ --cl-lead-top: 24px; /* 980 − 956: «Часи сильних» під кадрами */ --cl-col-step: 16px; /* 1116 − 1100 і 1232 − 1216 */ --cl-grid-top: 24px; /* 1724 − 1700: сітка під H2 «Колекція» */ --cl-play-w: 58.57px; /**/ --cl-play-ratio: 58.57 / 41; /* НИЖНЯ ПАРА НА МОБІЛЬНОМУ — ВЛАСНИЙ КАНОН, А НЕ ПРОПОРЦІЯ ДЕСКТОПА. Тут стояло 960/490, і це давало на 375 половину 191.4 замість канонних 324. Причина не в помилці виведення:, коли смуга виводилась мобільний артборд нижньої пари НЕ МАВ ЗОВСІМ — `screen_5` додався в макет пізніше, і в знімку канону його не було. Тобто число було найкращим із можливих, поки не стало гіршим за наявне. */ --cl-pair-ratio: 375 / 324; /**/ /* ⚠️ СКЛАДІВ ДВА, І ВОНИ РІЗНІ ПО СУТІ, а не по щільності. Вище стіни 1024 канон малює дві колонки: кадр ліворуч, картка й стрічка мініатюр праворуч. Нижче стіни колонки праворуч НЕМАЄ ЗОВСІМ — канон дає повноширинний кадр 3:4 і під ним ПЕРЕЛІК товарів рядками «назва — ціна» з волосинами між ними. Тому тут лишились рівно ті числа, що потрібні вузькій смузі; набір колонки живе в блоці ≥1024, бо ніде більше не існує. ДО БАЗА БУЛА ВИВЕДЕНОЮ, А НЕ КАНОННОЮ: вузьких артбордів оверлея макет не мав, і вузька смуга дзеркалила десктопний склад із власними стелями висоти. Артборди зʼявились — виведені числа пішли разом зі складом, який вони тримали. */ /* Пропорція кадру у вузькій смузі — 3:4 З ВУЗЛА, а не з файла знімка: 1093.33, тобто той самий піксель недбалості макета, що лягає в допуск). Канон тут СВІДОМО ріже знімок: файл `look-NN.jpg` має 400×564 (0.709), а коробка 0.75. Десктоп цю пропорцію скасовує — там ширину кадру дає канонна доріжка 810/1920. */ --cl-zoom-shot: 42.1875%; /* 810 / 1920 — лівий кадр */ --cl-zoom-shot-ratio: 3 / 4; /* ВЕРТИКАЛЬНЕ ПОЛЕ АРКУША — одне число на всі чотири місця: хрестик згори (24 на 375, 32 на 820), стрілки знизу кадру, кадр → перелік і низ переліку до кінця аркуша. Виведене з гутера, а не написане двічі: 16 + 8 = 24 і 24 + 8 = 32 — обидва числа канону. */ --cl-zoom-edge: calc(var(--gutter) + var(--s-8)); /* Проміжок пари цін у рядку переліку. 7 — з вузлів: стара ціна стоїть на обидва якорі дають ту саму сімку. Компонент `.price` носить `--s-8` — число КАРТКИ каталогу; тут воно дало б 146 проти канонних 145. */ --cl-zoom-sale-gap: 7px; --cl-zoom-inset: var(--gutter); /* поле стрілок і хрестика */ /**/ /* КРОК МІЖ БЛОКАМИ СТОРІНКИ — ВЛАСНИЙ, А НЕ ЗАГАЛЬНИЙ `--section-gap`. Таблиця переходів (`docs/canon-rhythm.json`, рахує .qa/canon-rhythm.py) дала на мобільному якорі систему 16 · 24 · 48, тоді як сторінка жила одним числом 48 — звідси накопичувальний зсув до +439 px на підвалі. Загальний токен чіпати не можна: ним живуть заморожені сторінки. */ --ab-block-gap: 24px; --ab-lead-top: 38px; /* герой → цитата: 572 → 596 → 634 на M */ --ab-head-gap: 16px; /**/ --ab-hero-pad-end: 24px; /**/ --ab-crumbs-gap: 16px; --ab-pair-ratio: 400 / 564; /* пара кадрів: 29499 · 32788 · 30788 */ --ab-portrait-ratio: 432 / 631; --ab-portrait-fade: 22.0285%; /* 139 / 631 */ --ab-cover-fade: 46.4286%; /* 455 / 980 */ /* Мініатюра пари — плівка ПОВЕРХ фото, а не суцільна плитка: у кадрі наведення крізь неї видно знімок. Тому це rgba, а не hex. ⚠️ Розходження з каноном: у макеті плівка світла `rgba(255,255,255.35)`, тут темна. Мініатюра лежить ПОВЕРХ скрима половини, тобто світлою плівкою вона виходила світлішою за все навколо — єдина світла пляма в затемненому кадрі. Значення дорівнює `--scrim` не «щоб схоже»: рівно при ньому мініатюра й половина під нею затемнені однаково. */ --thumb-surface: var(--scrim); /* плівка мініатюри 300×412 */ /* Мініатюри першого екрана. Обидва значення зняті ВЛАСТИВОСТЯМИ вузлів диск «кадр уже показано» — `#201F1F` при opacity .8, коло 48 у полі 56; дуга прогресу — обведення `#201F1F` товщиною 1, round cap. Rgb той самий, що в `--scrim`, і це не збіг: обидва — той самий чорний макета. Але прозорість інша, тому це ОКРЕМІ токени, а не `var(--scrim)`. */ --hero-seen: rgba(32, 31, 31, .8); /* диск на показаному кадрі */ --hero-ring: rgb(32, 31, 31); /* дуга прогресу */ /* Бейджі КОНТУРНІ: тло біле, тон дає і рамку, і текст. ⚠️ На білому тони макета дають New 13.28 · Sale 3.55 · Sold 2.62 при вимозі 4.5 — жоден із двох останніх AA не проходить, тому всі три плашки йдуть одним тоном. Тони лишаються трьома ЗМІННИМИ, а не одним значенням: у WooCommerce статус товару дасть класи `--new/--sale/--sold`, і повернути стану власний тон має коштувати одного рядка тут, а не пошуку по всій верстці. */ --badge-new: var(--black-800); /* #322F2E — 13.28:1 ✔ AA */ --badge-sale: var(--black-500); /* #888887 — 3.55:1 ✘ AA */ --badge-sold: var(--black-400); /* #A0A09F — 2.62:1 ✘ AA */ /* ЦІНА — ТОН МАКЕТА `black/400` (#A0A09F). ⚠️ 2.62:1 при вимозі 4.5: ціна — ключова інформація, і частина людей її не прочитає. Відхилення свідоме, рядок; пара `--price-ink × --surface` вийшла зі списку контраст-гейта з іменем того рядка — так само, як бейджі за і волосінь за. Поріг 4.5 не чіпався. */ --price-ink: var(--black-400); /* #A0A09F — 2.62:1 ✘ AA */ /* НЕАКТИВНИЙ КОНТРОЛ ПАНЕЛІ КАТАЛОГУ — теж `black/400`, і теж 2.62:1. `black/400`, тоді як активні сусіди по тій самій панелі — `black/900`. Це НЕ тон таба з легенди (`--ink-subtle`, `black/600`, 4.94:1): у панелі каталогу дизайнер узяв на сходинку світліший. Пара `--ctl-off × --surface` у контраст-гейт не входить. */ --ctl-off: var(--black-400); /* #A0A09F — 2.62:1 ✘ AA */ /* -------------------------------------------------------------------- 3. ШРИФТ. Inter Tight 400 і 500 — рівно ті накреслення, що оголошені в @font-face; інших ваг у проєкті немає (тверда вимога набору). Google Sans із макета не використовується — див. ROLES-TABLE §«Заміна Google Sans» і `docs/WAIVERS.md`. -------------------------------------------------------------------- */ --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fw-regular: 400; --fw-medium: 500; /* -------------------------------------------------------------------- 4. ТИПОГРАФІЧНА ШКАЛА. Закон інтерліньяжу, виведений із усіх заміряних ролей: **line-height = font-size + 4px** для кеглів ≥16. Два винятки, зняті з макета і залишені як є: 14/16 (+2) і 13/16 (+3). Базові значення — мобільний якір; більші — у §8. -------------------------------------------------------------------- */ /* Кеглі ТЕЧУТЬ між якорями сегментним clamp: значення якоря — кінець рампи, тому на якорі число ціле, а між якорями воно росте плавно. Нижче найвужчого якоря рампа впирається в нижню межу — кегль не меншає. Смуга M–T: (100vw − 375) / 445. Смуга T–D — у §8. */ /* Назва першого екрана — роль ОКРЕМА від H1, а не його верхній край. за H1 розділу, тобто H1 нею не накривається. */ /* -------------------------------------------------------------------- ГЕОМЕТРІЯ ПЕРШОГО ЕКРАНА. Усі сім чисел зняті з вузлів нового канону / /. Поле тексту НЕ дорівнює гутеру: 16 / 38 / 48 проти 16 / 24 / 48. На планшеті макет дає 38, і це не описка сусіднього числа — мініатюри слайдів на тому ж якорі стоять від краю рівно на гутер 24. Два різні відступи в одному кадрі, обидва з вузлів. -------------------------------------------------------------------- */ /* Пара «Трансформація» — половина БЕЗ фото: біле поле, мініатюра по центру, таби праворуч угорі. Мініатюра центрована в обох напрямках на всіх трьох якорях — перевірено арифметикою вузлів, а не оком: (960−300)/2 = 330 при x 330, (980−412)/2 = 284 при y 284; (375−146)/2 = 114.5 при 114; (838−412)/2 = 213 при 213. Верх табів власний на кожному якорі: 26 / 35 / 51. */ /* Рампою, як і кеглі: константа 146 до 820 давала провал у середині смуги — частка половини падала з 38.9 % (375) до 19 % (768), бо половина росте, а картка ні. Обидва якорі точні: 375 → 146×198, 820 → 300×412. */ --pair-card-w: clamp(146px, calc(146px + 154 * (100vw - 375px) / 445), 300px); --pair-card-h: clamp(198px, calc(198px + 214 * (100vw - 375px) / 445), 412px); /* СТЕЛЯ мініатюри часткою половини — щоб пікселі не лишались константою там, де половина нею не є. Числа зняті з найвужчої ПРИЙНЯТОЇ ширини 1180: половина 590×602.29 при мініатюрі 300×412. Навіщо — у коментарі біля `.pair__thumb` у `components.css`; тут лише значення. */ --pair-card-max-w: 50.847%; --pair-card-max-h: 68.405%; --pair-tabs-top: 26px; /* Верх кутового підпису половини. НЕ гутер: у каноні підпис стоїть на 16 / 24 / 48 — збігаються вони лише на 1920. Число окреме саме тому, що воно окреме в макеті. */ --pair-label-top: 24px; /* Пауза між кадрами першого екрана. Числа в макеті НЕМАЄ — макет статичний, і це не «не знайшов», а «його там не буває». 6 секунд: рядок підпису 20/24 у 265 px читається приблизно за 4 с, плюс запас на перехід. Живе токеном, а не в JS, щоб мінятись в одному місці разом із рештою руху. */ /* Паралакс живе ТІЛЬКИ на десктопній смузі (з 1420) і тільки з цим запасом. Ціна названа числом: надлишок 6 % — це 5.7 % знімка, яких у кадрі не видно ніколи. ⚠️ На вузьких якорях руху немає зовсім: там прийнятий повний кадр, і 820 заморожений саме таким. Хід іде тільки ВНИЗ від верху фото: знімок лежить верхом до верху коробки, тож плюсовий бік відкрив би кадр згори. */ --parallax-over: 0%; --parallax-rest: 0.5%; --parallax-amp: 0%; /* Інерція плавного скролу. Не входить у три тривалості руху і не має входити: ті три описують ПЕРЕХОДИ елементів, а це — вибіг прокрутки. Числа в макеті немає; 1 с — типове для цього класу бібліотек, крива при цьому проєктна. */ --scroll-duration: 1s; /* Крок стрічки кадрів у половині пари. ⚠️ Числа руху в макеті немає — макет статичний, тому воно назване рішенням і записане рядком. */ --pair-reel-step: 2s; --hero-interval: 6s; --hero-ratio: 375 / 540; /* СТЕЛЯ КАДРУ — висота свого якоря. Пропорція в межах смуги тягне кадр разом із шириною, і на верхньому кінці смуги він виростає над задумом: без стелі перший екран мав би 1124 px при 819 (якір дає 540) і 1144 при 1139 (якір дає 838). Стеля не чіпає самих якорів — на них кадр рівно такий, як у макеті; вона лише не дає йому рости МІЖ ними, і зайве йде в ширину кадру, а не в висоту. Те саме число, що вже діє понад десктопним якорем. */ --hero-cap: 540px; /* СТЕЛЯ КАДРУ ТЕЧЕ, А НЕ СТРИБАЄ. Константа 500 (висота якоря 375) тримала кадр цитати на всю мобільну смугу — і на 768 давала 768×500 при 820×824 через 52 px далі. Пропорція 375/500 хоче там 1024, стеля різала до 500, і кадр із майже квадратного ставав удвічі ширшим за висоту. Рампа веде стелю до висоти наступного якоря тим самим прийомом, що й гутер: на самих якорях числа цілі (375 → 500, 820 → 824), між ними — пряма. На 768 виходить 786 замість 500. */ --quote-cap: clamp(500px, calc(500px + 324 * (100vw - 375px) / 445), 824px); /* ПОЛЕ ПЕРШОГО ЕКРАНА = ГУТЕР, щоб назва стояла в одну лінію з логотипом шапки. Власне число на кожному бенді збігалося б із гутером лише на 375 і 1920, а між ними розходилось на +14 (820), +11.5 (935), +9.6 (1024), +7 (1140), −4.8 (1680). ⚠️ Розходження з каноном на 820: макет дає там 38 при логотипі на і це єдиний якір, де так. */ --hero-pad-x: var(--gutter); --hero-pad-y: var(--s-24); --hero-slides-top: var(--s-32); /* Та сама рампа, що й у кеглів, і з тієї ж причини, що в смузі T–D: кегль ріс 60 → 100, а коробка стояла на 221 — і з 600 назва падала в ЧОТИРИ рядки замість трьох. Обидва якорі рампа віддає точно: 375 → 221 , 820 → 500. Знак росте разом із нею. */ --hero-title-w: clamp(221px, calc(221px + 279 * (100vw - 375px) / 445), 500px); --hero-note-w: 191px; --hero-mark: clamp(45px, calc(45px + 19 * (100vw - 375px) / 445), 64px); --hero-slide: 48px; --fs-display: clamp(60px, calc(60px + 40 * (100vw - 375px) / 445), 100px); --lh-display: clamp(64px, calc(64px + 40 * (100vw - 375px) / 445), 104px); /* Трекінг НЕ інтерполюється: у каноні він не монотонний (+0.6 → −3 → −1.6), і будь-яка рампа між цими трьома числами була б вигадкою. Плато на якорі — єдина чесна форма. */ --ls-display: 0.6px; /* Трекінг заголовка розділу. У каноні на 1920 це −1.4px при кеглі 140 так воно лишається тим самим відношенням на кожному якорі й не застигає десктопним числом. Значення M і T звіряються на своєму якорі (задача «Каталог: планшетний і мобільний якорі»). */ --ls-h1: -0.01em; /* роль власна: збіг чисел не робить її тим самим елементом. */ --fs-hero-note: 16px; --lh-hero-note: 20px; --fs-h1: clamp(50px, calc(50px + 50 * (100vw - 375px) / 445), 100px); --lh-h1: clamp(54px, calc(54px + 50 * (100vw - 375px) / 445), 104px); --fs-h2: clamp(28px, calc(28px + 8 * (100vw - 375px) / 445), 36px); --lh-h2: clamp(32px, calc(32px + 8 * (100vw - 375px) / 445), 40px); --fs-h3: 20px; --lh-h3: 24px; /* підзаголовок; у макеті не міняється */ /* Підпис під цитатою. Роль у шести рівнях типошкали НЕ оголошена і у вузлі руками, на 375 стоїть `ttlType@20/20`, тобто 20/24. Беремо канон як є і записуємо — заокруглити до найближчого рівня означало б мовчки поправити макет. */ --fs-sign: 20px; --lh-sign: 24px; /* Фраза в центрі половини пари. Виглядає як той самий підпис, і саме тому їхала на `--fs-sign`, — але сходинка в них РІЗНА: підпис цитати росте до 24/28 лише на 1920, а фраза бере 24/28 уже на 820 (— 334×28 кегль 24, інтерліньяж 28). Спільний токен давав фразі планшета 20/24, тобто мобільний кегль на планшеті. Дві ролі, бо два різні числа. */ --fs-phrase: 20px; --lh-phrase: 24px; /* Lead. На мобільному 18/22, від планшета 20/24 — це НЕ дві ролі, а одна зі сходинкою. Перевірено: `TXt -18` ужитий рівно там, де на десктопі вживати Body» була помилкою: вона зменшила б обидва місця з 18 до 16. */ --fs-lead: clamp(18px, calc(18px + 2 * (100vw - 375px) / 445), 20px); --lh-lead: clamp(22px, calc(22px + 2 * (100vw - 375px) / 445), 24px); --fs-body: 16px; --lh-body: 20px; /* Txt-16 — основний текст */ /* Txt-18 — значення в полі ціни фільтра. Роль зʼявилась разом із фільтром і в шести рівнях типошкали не оголошена: у макеті поле набране Google Sans 18/24, а пари 18/24 в Inter Tight проєкт доти не мав. Заміна та сама, що й у решти пʼяти ролей Google Sans, — кегль та інтерліньяж канонічні, трекінг 0. */ --fs-18: 18px; --lh-18: 24px; --fs-ui: 14px; --lh-ui: 16px; /* bn-t14 / Info */ --fs-xs: 13px; --lh-xs: 16px; /* Txt-13 — крихти, дрібні підписи */ /* -------------------------------------------------------------------- 5. РИТМ. Значення зібрані суцільним заміром вертикальних просвітів каталогу на трьох якорях; це не «гарний ряд», а те, що в макеті. -------------------------------------------------------------------- */ --s-2: 2px; /**/ --s-4: 4px; /**/ --s-6: 6px; /**/ --s-8: 8px; /* зазор «текст → іконка» в посиланні (легенда кнопок) */ --s-12: 12px; /* заголовок → підзаголовок на M */ --s-16: 16px; --s-20: 20px; /**/ --s-24: 24px; /* панель → сітка на T і M */ --s-32: 32px; /* проміжок колонок великого формату на D */ --s-40: 40px; --s-48: 48px; /* ритм краю секції на T і M */ --s-56: 56px; --s-64: 64px; --s-80: 80px; --s-100: 100px; /* ритм краю секції на D */ --section-gap: var(--s-48); /* базовий (M і T); на D — §8 */ /* ------------------------------------------------------------------------ КАТАЛОГ — вертикальний ритм сторінки. Сім чисел, кожне зняте з ТРЬОХ з одного десктопного: число, різне між сусідніми якорями, пишеться рампою ОДРАЗУ, інакше воно застигає плоским px і смуга між якорями лишається нічия. шов M T D шапка → крихти 16 16 24 крихти → заголовок 48 48 60 заголовок → панель 40 56 80 панель → лінійка 16 16 24 лінійка → сітка 24 24 32 сітка → пагінація 40 40 64 «Переглядали» → плитки 24 24 40 Решта швів каталогу (пагінація → лінійка, лінійка → «Переглядали», плитки → SEO, SEO → підвал) дають 48 · 48 · 100 — це рівно `--section-gap`, і власного токена вони не отримують: другий запис того самого числа розійшовся б із першим при першій же правці. Тільки «заголовок → панель» росте в ОБОХ смугах — решта стоїть плато до 820 і піднімається на десктопі. ------------------------------------------------------------------------ */ --crumbs-top: var(--s-16); --cat-title-top: var(--s-48); /* РАМПА ЧЕРЕЗ ТРИ ЯКОРІ ОДНИМ ВИРАЗОМ — 40 · 56 · 80. Зона на цій стіні дзеркала не міняє, отже розрив був нелегітимний. Тотожність та сама, що на 404: `сегмент1 + сегмент2 − V(820)`. Якорі за побудовою не рухаються — 40 · 56 · 80 точно. */ --cat-bar-top: calc(clamp(40px, calc(40px + 16 * (100vw - 375px) / 445), 56px) + clamp(56px, calc(56px + 24 * (100vw - 820px) / 1100), 80px) - 56px); --cat-bar-rule: var(--s-16); --cat-rule-grid: var(--s-24); --cat-pager-top: var(--s-40); --section-title-gap: var(--s-24); /* ------------------------------------------------------------------------ СТОРІНКА 404 — D · T · M. Композицій дві, не три: планшет і мобайл — одна розкладка (фото 1 ліворуч, пара фото праворуч, знак поверх них, текст під ними), десктоп — інша (чотири фото, текст і кнопка в зазорі ряду). Тому числа стоять двома наборами, а не трьома, і стіна між ними одна — `modes.desktop.from`. ЧОМУ ФОТО ЧАСТКОЮ, А НЕ ПІКСЕЛЯМИ. Канон дає 181 при контейнері 772 і 80 при 343 — це 23.45 % і 23.32 %, тобто ОДНЕ число з точністю 0.9 px на ширшому якорі. Пікселі тут дали б смугу 441…820, де фото лишається планшетним 181 у контейнері 393 і виходить за край утрьох. ------------------------------------------------------------------------ */ /* ШАПКА → РЯД ФОТО. Крихт на сторінці немає (рішення замовника 22.08), і композиція піднімається рівно на їхній СЛІД — не менше й не більше. Слід крихт — це їхня власна висота 16 плюс відступ від шапки `--crumbs-top` (24 на D, 16 на T і M), тобто 40 · 32 · 32. 160−60−40 · 144−56−32 · 136−56−32 = 60 · 56 · 48 — і те саме дає другий, незалежний вивід: відстань від НИЗУ крихт до ряду фото (100→160, 88→144, 88→136). ⚠️ ЧИННІ ЧИСЛА НА КРОК БІЛЬШІ: 76 · 72 · 64 згори і 116 · 56 · 64 знизу. Замовник 22.08 після перегляду зверстаної сторінки — «відступ знизу та зверху трошки більше». Крок один на всі шість чисел і взятий із ряду токенів (`--s-16`), а не підібраний оком: сторінка без крихт лишається єдиною, де повітря згори не має канонного джерела, тож воно принаймні має джерело в ряду. ⚠️ Спершу тут стояло 100 · 88 · 80: ряд фото лишався на канонних 160 / 144 / 136, а місце крихт віддавалось повітрю. Замовник 22.08 — вирівняти відступ згори на всіх трьох якорях. */ /* ДВА СЕГМЕНТИ В ОДНОМУ ВИРАЗІ — і саме тому на стіні режиму немає стрибка. Величина проходить ТРИ якорі (48 → 56 → 60), а один `clamp` уміє тільки один відрізок. Класичний вихід — другий `clamp` у перекривачі `@media (min-width: 768px)` — і дає розрив: нижня смуга йде своєю рампою, а від стіни підлога верхнього clamp миттю піднімає значення до якірного. Заміряно на цьому ж проєкті: `--cat-bar-top` стрибав 42.3 → 56 рівно на стіні. Розрив дає сама конструкція «перекривач», а не координата стіни, тому переїзд стіни від нього не рятує. Тотожність замість перекривача: для монотонної величини через три якорі `V = сегмент1 + сегмент2 − V(середній якір)`. Нижче 820 другий доданок стоїть на своїй підлозі й гаситься відніманням; вище 820 перший стоїть на своїй стелі й гаситься ним же. На самому 820 обидва дорівнюють середньому якорю. Перевірено підстановкою на всіх трьох якорях і на парі 767/768: на якорях числа точні, на стіні розрив 0.02 px при допуску 2. */ --e404-top: calc(clamp(64px, calc(64px + 8 * (100vw - 375px) / 445), 72px) + clamp(72px, calc(72px + 4 * (100vw - 820px) / 1100), 76px) - 72px); /* Низ сторінки → підвал: 48 M · 40 T · 100 D. Та сама тотожність, що й у верху, тільки перший сегмент СПАДНИЙ (48 → 40): у `clamp` міняються місцями не аргументи, а напрям лінійної частини. */ --e404-bottom: calc(clamp(56px, calc(64px - 8 * (100vw - 375px) / 445), 64px) + clamp(56px, calc(56px + 60 * (100vw - 820px) / 1100), 116px) - 56px); /* ЧАСТКИ РЯДУ — ТОЧНІ ДРОБИ ВУЗЛІВ, а не заокруглені до сотих. Спершу тут стояло одне число 23.4 % на обидві вузькі смуги — компроміс між 80/343 і 181/772. Похибка ширини 0.26 px сама по собі непомітна, але висота кадру йде з неї пропорцією, наліз знака — з дна кадру, а текст і підвал — з дна знака: на 375 це давало зсув усієї нижньої половини на 1.36 px при допуску 1. Тому частка своя на кожній смузі: вона ВИВЕДЕНА з вузла, а не підібрана. Крок на стіні режиму — частки пікселя, і стіна для того й існує. */ --e404-shot-w: 23.3236%; /* 80 / 343 — мобільний якір */ --e404-shot-ratio: 80 / 116; /* пропорція кадру — мобільна */ /* ЗАЗОР У ПАРІ ФОТО НА МОБІЛЬНОМУ — 17, І ЦЕ НЕ ЗАЛИШОК. У scan було записано протилежне: «16 на T, 17 на M — розкидка залишку». Замір показав, що це не так. Із зазором 16 обидва праві кадри 375 стають на канонні місця точно — 182 і 279. Тобто число в макеті є, просто воно не з ряду токенів. На планшеті зазор свій — 16 . */ --e404-trio-gap: 17px; /**/ --e404-msg-w: 226px; /* коробка повідомлення — 226 на ВСІХ якорях */ /* Знак «404». Ширина — часткою контейнера, зсув — пікселями: коробка вектора це його ЧОРНИЛО, і бічні напливи літер не дорівнюють нулю. Канон: 344 при 343 і зсув −1 (M), 765 при 772 і зсув +2 (T). */ --e404-glyph-w: 100.2915%; /* 344 / 343 */ --e404-glyph-x: -1px; --e404-glyph-ratio: 344 / 145; /* НАЛІЗ ЗНАКА НА РЯД ФОТО — ЧАСТКА, А НЕ ПІКСЕЛІ. Канон дає 41 · 89 · 100 при висоті кадру 116 · 255 · 282, тобто СТАЛУ частку ≈35 % висоти кадру. Пікселі тримали цю частку рівно на трьох ширинах і розвалювали її між ними — заміряно свіпом: 42.1 % на 320, 29.9 % на 440, **68.6 % на тодішній стіні 441** (знак з'їдав дві третини кадру) і 49.9 % на 1024. Відсотковий `margin-block-start` рахується від ШИРИНИ вмісної коробки — тут це вся смуга ряду, бо знак займає `1 / -1`. Кадр — теж частка тієї самої смуги, отже частка від частки стала: наліз тримає свої 35 % висоти кадру на КОЖНІЙ ширині смуги, а не лише на якорі. Числа — дроби вузлів: 41/343 · 89/772 · 100/1360. Смуги різняться між собою тільки тому, що різниться пропорція кадру (0.690 · 0.710 · 0.709): у частках ВИСОТИ це 35.4 · 34.9 · 35.5 %, тобто одне число з точністю пів відсотка. */ --e404-rise: 11.9534%; /* 41 / 343 — мобільна смуга */ --e404-lead-top: 34px; /* знак → ПОВІДОМЛЕННЯ: 34 на M і на T */ /* ------------------------------------------------------------------------ T · M. Роль набору тут своя, а не позичена: заголовок сторінки 40/44 на M і T проти 60/64 на D не збігається з жодною наявною (display на 1920 дає 160, h1 — 140, h2 — 48). Те саме з заголовком розділу (20/24 → 24/28) і основним текстом (16/20 → 20/24): `--fs-phrase` і `--fs-lead` мають ті самі числа, але перемикаються на 820, а канон цієї сторінки тримає мобільні числа до самого десктопа. Через це ВСІ рампи сторінки йдуть однією формою — від планшетного числа на 820 до десктопного на 1920, з підлогою нижче 820. На стіні режиму вони не переозначуються, тобто розірваних рамп тут немає за побудовою . Виняток один — `--doc-title-top`, де канон дає три різні числа і він узятий тотожністю «сегмент1 + сегмент2 − V(820)». ------------------------------------------------------------------------ */ --fs-doc-title: clamp(40px, calc(40px + 20 * (100vw - 820px) / 1100), 60px); --lh-doc-title: clamp(44px, calc(44px + 20 * (100vw - 820px) / 1100), 64px); --fs-doc-h: clamp(20px, calc(20px + 4 * (100vw - 820px) / 1100), 24px); --lh-doc-h: clamp(24px, calc(24px + 4 * (100vw - 820px) / 1100), 28px); --fs-doc-body: clamp(16px, calc(16px + 4 * (100vw - 820px) / 1100), 20px); --lh-doc-body: clamp(20px, calc(20px + 4 * (100vw - 820px) / 1100), 24px); /* Крихти → заголовок: 48 · 56 · 60 — три різні числа, тому дві ланки. */ --doc-title-top: calc(clamp(48px, calc(48px + 8 * (100vw - 375px) / 445), 56px) + clamp(56px, calc(56px + 4 * (100vw - 820px) / 1100), 60px) - 56px); --doc-shots-top: clamp(40px, calc(40px + 40 * (100vw - 820px) / 1100), 80px); --doc-text-top: clamp(48px, calc(48px + 52 * (100vw - 820px) / 1100), 100px); /* Зазор ряду фото — теж три числа: 8 · 16 · 32. */ --doc-shot-gap: calc(clamp(8px, calc(8px + 8 * (100vw - 375px) / 445), 16px) + clamp(16px, calc(16px + 16 * (100vw - 820px) / 1100), 32px) - 16px); --doc-shot-ratio: 80 / 116; /**/ /* Ширина заголовка — це МІСЦЕ ПЕРЕНОСУ, а не оформлення: у каноні він двома рядками на всіх трьох якорях (88 = 2×44 на M і T, 128 = 2×64 на десктопі — доріжки сітки, тому там стеля знімається. ⚠️ Коробка ЇДЕ ЗА КЕГЛЕМ, а не стоїть на 314. Сталі 314 вистачало рівно до 820: вище кегль росте (43.7 на 1023), слово «конфіденційності» разом із ним, і заголовок ставав ТРИРЯДКОВИМ у смузі 991…1023 — тобто рівно там, куди жоден артборд не дивиться. Множник — це коробка канону, виражена в кеглях; вона тримає два рядки на всій смузі за побудовою, а не за збігом. ⚠️ МНОЖНИК 8.2, А НЕ КАНОННІ 7.85 (= 314/40), І ЦЕ РІЗНИЦЯ РЕНДЕРА, ЗАМІРЯНА З ОБОХ БОКІВ. Найдовше слово документних сторінок — «конфіденційності»: у коробці канону 314, у браузері на 40 px — 313. Запас в ОДИН піксель означав, що на телефоні замовника (де метрики ширші за headless) слово не вміщалось і йшло з дефісом — «конфі-денційності», скарга. 8.2 дає 328 при кеглі 40 запас 15 px, і коробка лишається вужчою за контейнер 343 на M, тобто ані перенос після «Політика», ані два рядки на решті смуги не міняються. Перевірено на всьому свіпі, а не на одній ширині.. */ --doc-title-w: calc(var(--fs-doc-title) * 8.2); --doc-head-gap: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --doc-para-gap: clamp(16px, calc(16px + 8 * (100vw - 820px) / 1100), 24px); --doc-item-gap: clamp(8px, calc(8px + 8 * (100vw - 820px) / 1100), 16px); --doc-indent: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --doc-rule-gap: clamp(32px, calc(32px + 8 * (100vw - 820px) / 1100), 40px); /* `inset 18.75 %`, тобто 10. Коробка потрібна не для вигляду, а щоб круг стояв там само, де в каноні: його ліва грань — на (16 − 10) / 2 = 3. */ --doc-dot: 10px; --doc-dot-box: 16px; /* ------------------------------------------------------------------------ конфіденційності», тому сітка, заголовок і ряд фото беруться з `doc` як є — тут лише те, чого там не було. ------------------------------------------------------------------------ */ --doc-fold-icon: clamp(22px, calc(22px + 10 * (100vw - 820px) / 1100), 32px); /* Рядок → тіло: 24 на M і T, 28 на D — це відстань від НИЗУ рядка, а не від низу тексту заголовка (рядок вищий за текст, бо його тримає знак). */ --doc-fold-body: clamp(24px, calc(24px + 4 * (100vw - 820px) / 1100), 28px); --doc-fold-rule: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --fs-doc-phrase: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --lh-doc-phrase: clamp(28px, calc(28px + 8 * (100vw - 820px) / 1100), 36px); /* Коробка фрази — три різні числа (343 · 456 · 634), тому дві ланки. На мобільному 343 і так дорівнює контейнеру. */ --doc-phrase-w: calc(clamp(343px, calc(343px + 113 * (100vw - 375px) / 445), 456px) + clamp(456px, calc(456px + 178 * (100vw - 820px) / 1100), 634px) - 456px); --doc-phrase-top: clamp(48px, calc(48px + 60 * (100vw - 820px) / 1100), 108px); /* Коробка назви сторінки — знову МІСЦЕ ПЕРЕНОСУ, і для цієї сторінки воно своє: «Ремонт та гарантія» коротше за «Політику конфіденційності» й у доріжках сітки стає ОДНОРЯДКОВИМ, тоді як канон дає два рядки на обох артбордах (128 = 2×64 на D, 88 = 2×44 на T і M). Числа канону — 486 і 200; на десктопі 486 задано рукою (авторозмір дав би ~285), тому важить не саме число, а те, що воно менше за рядок цілком. */ --svc-title-w: clamp(200px, calc(200px + 286 * (100vw - 820px) / 1100), 486px); /* Ширина заголовка розділу — не оформлення, а МІСЦЕ ПЕРЕНОСУ: у каноні він двома рядками на всіх трьох якорях (108 = 2×54 · 208 = 2×104 · 288 = 2×144), і тримає це саме ширина коробки. 370 · 555 · 764. */ --cat-title-w: clamp(370px, calc(370px + 185 * (100vw - 375px) / 445), 555px); /* ------------------------------------------------------------------------ ФІЛЬТР КАТАЛОГУ — D · T · M. Оболонка міняє не лише розміри, а й РІД: на мобільному це лист на весь екран, від планшета — панель зліва поверх каталогу. Числа смуги T–D пишуться рампою одразу, бо різні на сусідніх якорях роль M T D ширина панелі вікно 337 386 окраєць вмісту 16 24 48 підпис від верху 20 24 32 перша секція від верху 80 64 80 ⚠️ Рампа міряє `100vw`, тобто ВРАХОВУЄ смугу прокрутки вікна (близько 15 на Windows). Для панелі, приколотої до вікна, іншої одиниці немає: свого контейнера в неї нема за побудовою. Похибка в середині смуги — менше пікселя, на самих якорях її немає. Ритм секції один на всі три якорі й тому рампи не має: на 46 від верху заголовка стоїть або лінія (згорнуто), або список (розкрито), далі 24 — наступний заголовок. Крок згорнутої секції 70 із цього виходить, а не задається окремо. */ --cf-w: 100%; --cf-pad: var(--s-16); --cf-cap-top: var(--s-20); --cf-body-top: var(--s-80); --cf-sec-gap: var(--s-24); --cf-list-top: 46px; --cf-item-gap: var(--s-16); /* Пункт списку: 20 текст + 16 підбивка + 1 волосина = 37. Волосина має ширину ВЛАСНОГО вмісту, а не колонки — у сусідніх пунктів коробки 203, 257, 196, 254, і підкреслення в кожного своє. */ --cf-box: 16px; --cf-box-gap: 20px; --cf-count-gap: var(--s-80); /* Ціна. Смуга діапазону лежить НА нижній межі пари полів: доріжка сідлають цей край. Окремої рейки канон не малює. */ --cf-field-h: var(--s-56); --cf-field-pad: var(--s-16); --cf-field-line: rgba(32, 31, 31, 0.12); --cf-knob: 16px; --cf-unit-gap: 34px; /* НАЙМЕНША ЦІЛЬ ДОТИКУ. 44 — не з макета: макет малює ЗНАКИ, а не зони, до яких торкається палець. Значення тримає 2.5.8 AA (мінімум 24) із запасом до звичної для пальця величини. Ростуть тільки невидимі зони; жоден намальований розмір цим числом не задається. */ --tap-min: 44px; --cf-bar-h: var(--s-64); /* Окраєць намальованої смужки від краю панелі — 8 на планшеті і 21 на десктопі. Два різні числа на сусідніх якорях, тобто рампа, а не константа. */ --cf-thumb-x: var(--s-8); /* ВЕРХНЯ СМУГА ЛИСТА — 56, рівно як мобільна шапка, яку лист собою накриває. З цього одного числа виходять обидва канонічні положення: підпис 16 заввишки стає на 20, хрестик 24 — на 16. Записати їх двома числами означало б тримати одну вісь двома джерелами. */ --cf-top-h: var(--s-56); /* ------------------------------------------------------------------------ КАРТКА ТОВАРУ — шви інфо-колонки. Кожне число зняте з ТРЬОХ артбордів різниться між сусідніми якорями, написане рампою ОДРАЗУ. шов M T D блок → волосина 24 24 28 волосина → підпис блока 24 24 28 підпис блока → текст 15 15 15 текст → характеристики 24 24 24 характеристики → волосина 8 8 12 волосина → ряд дій 24 24 30 таби → слот вмісту 24 24 24 волосина → стрічка «Вам…» 48 48 80 Два рядки цієї таблиці — та сама відстань, розказана двічі. «Характеристики → волосина» коротші рівно на 16, бо останній рядок характеристик несе власний падінг 16 (волосини в нього немає, а падінг лишається): 12 + 16 = 28 — той самий шов, що й скрізь. Тому токен названий `--pc-rule-tight`, а не окремим числом. ------------------------------------------------------------------------ */ --pc-rule-y: var(--s-24); --pc-rule-tight: var(--s-8); --pc-act-rule-y: var(--s-20); /* M 20 · T 24 · D 30 — рампа нижче */ --pc-label-text: 15px; /* підпис блока → текст: однаково на трьох */ --pc-text-specs: var(--s-24); --pc-reel-top: var(--s-48); /* Заголовок стрічки на M лягає у ДВА рядки, на T і D — в один. Число — коробка тексту з канону: у рядок 343 назва вміщується, і без цієї стелі вона стояла б одним рядком, тобто інакше, ніж у макеті. */ --pc-reel-title-w: 181px; /* ДВІ КОМПОЗИЦІЇ ПЕРШОГО ЕКРАНА, А НЕ ОДНА З РАМПАМИ. Числа нижче не інтерполюються між якорями, і саме тому вони токени, а не рампи: на D галерея це смуга мініатюр плюс кадр у дві колонки, на T — карусель на всю ширину; поле «Розмір» 168 при колонці 570 і 378 при рядку 772. Рампа між цими парами описувала б рух, якого немає: композиція не стискається, вона ЗМІНЮЄТЬСЯ на порозі 1025. Нижче нього працює планшетна композиція, вище десктопна тече часткою — і саме тому частка стоїть у правилах, які знають свою коробку, а не тут, де відсотка нема від чого відняти. */ /* СТАЛА В РЯДУ ДІЙ — КНОПКА, А НЕ ПОЛЕ. Канон дає «Купити» 232 на ОБОХ на T. Отже стоїть кнопка, а слабину бере поле; 168 і 378 виходять залишком рівно (570 − 24 − 232 − 26 − 56 − 8 − 56 і 772 − 16 − 232 − …), тому в проєкті їх немає жодним числом. ⚠️ Зворотне читання — задане поле, кнопка залишком — дає на обох якорях ті самі числа, а розходиться МІЖ ними: у широкому ряду «Купити» роздувається до 969 px. Правильне читання тримається не тільки на якорях. */ --pc-buy-w: 223px; /**/ /* НУЛЬ, І ЦЕ НЕ «НЕМАЄ ЧИСЛА». На M ряд дій розпадається на ДВА рядки, і «Купити» стоїть на початку другого — тобто відступ перед ним не між ним рівно гутер). Від планшетного якоря ряд знову один, і зазор вертається. */ --pc-size-gap: 0; /* «Розмір» → «Купити»: T 16, D 24 */ --pc-round-gap: var(--s-16); /* «Купити» → ♡: M 16, T і D — 26 */ --pc-round: 48px; /* діаметр ♡ і share у ряду дій: M 48, далі 56 */ /* на T і D. Це власний токен картки, а не правка `--btn-h`: та висота стоїть на кнопках усіх сторінок, зокрема заморожених, і зсунути її означало б переверстати Головну з каталогом заразом. */ --pc-btn-h: var(--s-56); /* Внутрішнє поле кнопки «Розмір» — 16 на M і 24 на T і D. Знято з відстані лівому полю на всіх трьох. */ --pc-field-pad: var(--s-16); --pc-spec-col: 210px; /**/ --pc-frame-ar: 343 / 479; /**/ /* 1024 вікно кріпиться до ряду й бере ширину `min(360, 100%)`. */ --pop-pad: var(--s-24); /* поля вікна: 1327 → 1351, 568 → 592 */ --pop-lift: var(--s-16); /* низ вікна 824 → ряд підписів 840 */ --pop-care-w: 279px; /**/ --pop-sizes-w: 643px; /**/ --pop-head-h: 48px; /* смуга підпису таблиці: 376 → 424 */ --pop-cell-h: 40px; /**/ --pop-col-1: 180px; /* перша колонка; решта шість по 77 */ --pop-cell-pad: var(--s-16); /* текст комірки від краю: 952 → 968 */ --pop-row-dim: .4; /* рядок «Juliya Kros / Стандарт» — black/100 на 40 % */ --pop-line-gap: var(--s-16); /* крок рядків довідки 32 = 16 + 16 */ --pc-frame-gap: 11px; /* зазор між кадрами каруселі: M 11, T 16 */ --pc-frame-pad: var(--s-20); /* бейдж і відео від краю кадру: M 20, T 24 */ /* Відео-кадр на M має РІВНО той самий розмір, що мініатюра смуги на D — базовій смузі немає: правило бере ті самі `--pc-thumb-*`, і другого запису тих самих 80×106 у проєкті не зʼявляється. На T кадр більший (120×160) — там токен і зʼявляється. */ /* ЛУПА НА ВЕЛИКОМУ КАДРІ. У каноні цього стану немає жодного вузла — це поведінка, а поведінку макет не описує. Під курсором їде квадрат `--pc-lens`, у якому показано фрагмент того самого знімка в `--pc-zoom` разів. Саме фото при цьому НЕ рухається — сусідні блоки не мають від чого здригатись. ⚠️ ДВА ЧИСЛА ХОДЯТЬ У ПАРІ: скільки ОРИГІНАЛУ потрапляє в квадрат — це `--pc-lens / --pc-zoom`, тут 280/1.8 = 156 px. Міняти одне, не подивившись на друге, не можна: зменшений зум при тому самому квадраті наблизить лупу до звичайного фото. */ --pc-zoom: 1.8; --pc-lens: 280px; /* закінчується рівно низом кнопки, тобто кнопка — її нижні 64: 286 − 64 = 222 = падінг 24 + 4 рядки по 37 + 3 зазори по 16 (+2). Рядок 37 = текст 20 + падінг 16 + волосина 1 — той самий крок, що в характеристиках, і це не збіг: обидва зняті з компонента. */ --psize-list-h: 222px; --psize-pad: var(--s-24); /* НАМАЛЬОВАНА СМУЖКА ПРОКРУТКИ — роль спільна, а не власність одного компонента: той самий прямокутник 2×48 із заокругленням 10 стоїть і в однаково, і саме тому вона там вимкнена, а не підфарбована. */ --thumb-w: 2px; --thumb-h: 48px; --thumb-r: 10px; --psize-thumb-w: var(--thumb-w); --psize-thumb-h: var(--thumb-h); /* краю вікна і 16 під шапкою. Шістнадцять тут СВОЄ число, а не гутер: на 1920 гутер сторінки 48, а тост усе одно стоїть на 16. Час життя — один запис на двох носіїв: CSS крутить ним кільце, JS читає його ж і по ньому закриває. Два записи розійшлись би, і кільце добігало б не тоді, коли тост зникає. */ /* Плашка зі словом (згода на cookie, «дякуємо» форми) ширша за плашку товару: у ній речення, а не назва в колонці (D577). */ /* Рядок підказки під полем форми звернення: місце, яке вона займає, і резерв, який поле тримає під неї нижче 1024 (D582). */ --ct-hint-h: 20px; --toast-word-w: 360px; --toast-w: 267px; /* ІНСЕТ ТОСТА ВІД ПРАВОГО КРАЮ ВІКНА — 16 · 24 · 16, і це три вузли, а не 1920). Планшет тут вибивається — 24 замість 16, — і це не рампа між 16 і 16: два якорі з трьох дають те саме число, а середній стоїть рівно на гутері свого артборда. Гутером це не робиться: на 1920 гутер 48, а тост стоїть на 16. */ --toast-inset: var(--s-16); --toast-pad: var(--s-16); --toast-thumb-w: 48px; --toast-thumb-h: 64px; --toast-close: 32px; --toast-cta-h: 40px; --toast-life: 5s; /* ЛИПКА ПАНЕЛЬ ДІЙ — `Group 734`, 1000×88, по центру, 24 від низу вікна. Тло `black/900`, рамка контролів `black/700` — обидва зняті властивістю вузла, а не з кадру. Кнопки в панелі НИЖЧІ за сторінкові: 56 проти 64, круглі 48 проти 56. */ --pbar-w: 1000px; /* при падінгу 8. Ані назви, ані мініатюри, ані кіл у ній немає. */ --pbar-h: var(--s-56); --pbar-btn-h: 40px; --pbar-size-w: 160px; --pbar-buy-w: 151px; --pbar-pad: var(--s-8); --pbar-round: 48px; --pbar-thumb-w: 48px; --pbar-thumb-h: 64px; --pbar-line: var(--black-700); /* стоїть ВІДНОШЕННЯ й максимальна ширина, а не два числа: 1216 на вужчому вікні не існує, а 16:9 існує завжди. Хрестик 64 стоїть усередині кадру, 32 від верхнього й правого краю. */ --pvideo-w: 1216px; --pvideo-close: 64px; --pvideo-inset: var(--s-32); /* (подяка). Вікно 576×605 стоїть по центру ВІКНА (238…843 при 1080), а не під шапкою, як відео-лайтбокс; скрим — під шапкою, `Rectangle 211` на y = 60, тобто той самий `--scrim-soft`. ВИСОТА 605 — ЦЕ СУМА, А НЕ ЧИСЛО: 8 + 192 (смуга кадру) + 21 + 20 + 16 + 56 + 8 + 56 + 24 + 20 + 16 + 56 + 24 + 56 + 32. Тому висота тут не задається зовсім — вона виходить із падінгів і проміжків, і на вужчому вікні росте разом із полями, що стали в один стовпчик. ⚠️ ПЕРШИЙ ПРОМІЖОК 21, А НЕ 24: низ смуги 438, підпис «Ваші параметри» на 459. Решта проміжків між групами — 24 (низ ряду 377 → «Ваші дані» 401). Три пікселі недбалості макета, узяті як є: на них стоїть уся сума нижче, і подяка їх ПІДТВЕРДЖУЄ — там низ смуги 604, абзац на 625, ті самі 21. */ --cust-w: 576px; --cust-inset: var(--s-8); /* смуга кадру від краю вікна: 680 − 672 */ --cust-band-h: 192px; --cust-pad: var(--s-32); /* тіло вікна від краю: 704 − 672 */ /* ПОЛЕ ОБАБІЧ ТІЛА — НЕ ТЕ САМЕ, ЩО ЗНИЗУ. Нижче стіни планшета воно дорівнює інсету смуги кадру, тобто поля стають рівно завширшки з фото (замовник: «по ширині фото вирівняй поля в адаптиві після 768 і нижче»). Від 768 повертається канонні 32: там вікно вже стоїть на своїй повній ширині 576, і сітка мірок — канонні 2×252. */ --cust-pad-x: var(--cust-inset); --cust-lead: 21px; /* смуга → перший підпис */ --cust-close: 48px; /**/ --cust-close-inset: var(--s-24); /* Заголовок вікна 24/28 medium. Роль ВЛАСНА: у шести рівнях типошкали пари 24/28 немає (найближчі — `--fs-sign` 20/24 і `--fs-h2` від 28/32), і заокруглити до рівня означало б мовчки поправити макет — той самий клас, що. Ширина 267 — місце переносу: канон ставить три рядки. */ --cust-head-fs: 24px; --cust-head-lh: 28px; --cust-head-w: 267px; --cust-fld-h: var(--s-56); /* 56 і НА ДЕСКТОПІ теж — не `--field-h`, */ --cust-fld-x: var(--s-16); /* яке вище стіни 1024 стає 64 і 24 */ /* Коли двох колонок уже не буде. Число ВИВЕДЕНЕ з поля, а не назване: 16 (падінг) + 112 (найдовший підпис «Обхват грудей*») + 8 + 56 (віконце числа) + 8 = 200. Порога в коді немає навмисно — сітка сама складається в один стовпчик через `auto-fit`, тому й реєструвати в `config.json → thresholds` нічого. */ --cust-fld-min: 200px; --cust-gap: var(--s-8); /* між полями: 964 − (704 + 252) */ --cust-num-w: var(--s-56); /**/ --cust-num-h: 40px; --cust-num-face: rgba(231, 231, 231, .2); /* black/100 при 0.2 — вузол несе і заливку, і рамку тим самим тоном, і 20 % прозорості на всій групі */ --cust-send-w: 168px; /**/ --cust-send-x: 42px; --cust-done-w: 348px; /**/ /* РІЗНЕ між сусідніми якорями, тому воно рампа, а не сходинка: перша редакція прочитала «два якорі дають одне число» і поставила поріг на 820, а чекер неперервності спіймав стрибок 20 → 32 на 819/820. Ціна тече всі три: 16/20 → 20/24 → 26/30. */ --pc-title-fs: clamp(20px, calc(20px + 12 * (100vw - 375px) / 445), 32px); --pc-title-lh: clamp(24px, calc(24px + 12 * (100vw - 375px) / 445), 36px); /* Ширина назви — це МІСЦЕ ПЕРЕНОСУ, не оформлення: у каноні назва двома рядками на всіх трьох якорях, і тримає це коробка 182 · 277 · 304. */ --pc-title-w: clamp(182px, calc(182px + 95 * (100vw - 375px) / 445), 277px); --pc-price-fs: var(--fs-body); --pc-price-lh: var(--lh-body); /* Проміжок колонок сітки. НЕ входить у ряд відступів вище, і це навмисно: він не ритмічний, а обчислений — його добирали так, щоб картка вийшла ЦІЛОЮ. Перевірено на всіх трьох якорях: 343 = 166·2 + 11 · 772 = 378·2 + 16 · 1504 = 736·2 + 32. Тому 11 на мобільному лишається як є. Первинна пропозиція «округлити до 12 заради стрункості ряду» була помилкою: вона дала б картку 165.5 — тобто заради охайності токенів зламала б цілу геометрію на якорі. */ --grid-gap: clamp(11px, calc(11px + 5 * (100vw - 375px) / 445), 16px); /* СКІЛЬКИ КОЛОНОК У СІТЦІ — ТОКЕН, А НЕ ЛИШЕ ШАБЛОН `.grid`. Панель каталогу вирівнюється по сітці карток («знаки формату стоять правим краєм на кінці першої колонки» на 820, «лівим краєм від кроку колонки» на 1920), а крок колонки без числа колонок не порахувати. ⚠️ Із двійкою, зашитою у власну формулу панелі, у смузі 935…1419 вона вирівнювалась би по колонці, якої на екрані немає — 458.5 при колонці сітки 318. Пороги значень — ті самі 935 і 1420 сітки, нових чисел тут не зʼявляється. */ --grid-cols: 2; /* РЯД СІТКИ — ІНШЕ ЧИСЛО, НІЖ КОЛОНКА, і збігаються вони лише на десктопі: колонка 11 · 16 · 32 ряд 24 · 24 · 32 (1920) — 706 при 674. Тобто 24 · 24 · 32. ⚠️ Одним `--grid-gap` на обидві осі ряди на вузьких якорях виходять удвічі тіснішими за макет: 11 замість 24 на 375, 16 замість 24 на 820. На десктопі числа збігаються, тому звірка з каноном такого не показує: вона міряє КОРОБКИ вузлів, а проміжок — величина МІЖ коробками, і жоден `data-node` її не називає. */ --grid-row-gap: var(--s-24); /* Слайдер. Проміжок НЕ свій — той самий `--grid-gap`: перевірено на всіх трьох якорях (32 · 16 · 11), збіг точний, тож це одна роль, а не дві. Скільки карток видно і скільки визирає збоку — задається числами, а не шириною картки: ширина виводиться формулою й лишається цілою сама. десктоп 1824 = 432·4 + 32·3 планшет 772 = 378·2 + 16 мобільний 343 = 323 + 20 (визирає наступна) */ --slide-visible: 1; --slide-peek: 0px; /* КРАЙ І ПРОМІЖОК СТРІЧКИ — власні, і лише на мобільному. Сусідні картки мусять визирати з обох боків ОДНАКОВО, як на десктопі (16 і 16). З гутером 16 і проміжком 11 вийшло б 5 ліворуч і 25 праворуч, і жодним проміжком це не лікується: лівий окраєць дорівнює `край − проміжок`, правий — `375 − край − 323 − проміжок`, тобто різниця між ними завжди 375 − 2·край − 323 = 20 при краї 16. Рівність дає одна пара чисел при канонній картці 323: край 26 = (375 − 323) / 2 — картка стоїть по центру полотна проміжок 10 — щоб обидва окрайці вийшли рівно 16 Перевірка: 26 − 10 = 16 ліворуч, 375 − 26 − 323 − 10 = 16 праворуч. ⚠️ Ціна: ряд товарів починається на 26, а заголовок секції — на 16, тобто картка не в одну лінію з рештою сторінки. Проміжок сітки каталогу НЕ чіпається: там 11 — умова цілої картки (343 = 166·2 + 11), і слайдер тепер має свій. */ /* 26 — ЧИСЛО КАНОНУ, і воно НЕ дорівнює гутеру: на 375 заголовок секції стоїть на 16, а стрічка починається на 26, тобто перша картка на 10 px правіша за «Новинки». ⚠️ Вирівняна по гутеру, вона дає картку 343 замість канонічних 323 — це ловить `.qa/canon-geometry.py` на вузлі . */ --slide-edge: 26px; --slide-gap: 10px; /* ------------------------------------------------------------------------ сторінки, а не три сторінки: шапка, крихти, заголовок і рядок під ним на всіх трьох стоять на тих самих координатах. ⚠️ ЧИСЛА ПЛОСКІ: замовник дав рівно один якір (1920). Рампи тут немає й не вигадується — другого кінця не існує. Усе, що вже має рампу в проєкті (заголовок `--fs-display`, гутер, `--crumbs-top`), береться нею, а не переписується плоским числом. Заголовок сторінки НОВОЇ ролі не заводить: канон дає 160/164 при трекінгу −1.6, і це рівно `--fs-display`/`--lh-display`/`--ls-display` на 1920. Збіг перевірений числом, а не на око. ------------------------------------------------------------------------ */ /* ⚠️ ТРИ ЯКОРІ, ТРИ НАБОРИ ЧИСЕЛ. Тут — МОБІЛЬНИЙ якір 375 і далі. Усі три — від замовника. Вертикальні шви, зняті з канону підряд (375 · 820 · 1920): крихти → заголовок 48 · 48 · 60 заголовок → рядок 40 · 56 · 80 шов усередині рядка 24 · 24 · 24 таби → вміст 24 · 24 · 48 низ форми → підвал 48 · 48 · 80 На 1920 карта починається на 448, тобто на 1 px раніше за волосину форми: один шов на обидва стани, бо різниця в 1 px — недбалість макета, а не намір. ⚠️ НА 375 ТА САМА НЕДБАЛІСТЬ КОШТУЄ 8 px, І ТУТ ВОНА ВЖЕ ВИДНА. Стан карти ставить волосину на 324, стан форми — на 332; телефон відповідно на 341 і 357. Узяті числа СТАНУ ФОРМИ (24 і 24), бо їх один проти трьох — це кухня, а не намір. */ --ct-title-top: 48px; --ct-bar-top: clamp(40px, calc(40px + 16 * (100vw - 375px) / 445), 56px); --ct-bar-gap: 24px; /* 820 таби відсуває від пар той самий `--ct-bar-gap` через волосину. */ --ct-tabs-top: 32px; --ct-view-top: 24px; --ct-tail: 48px; /* ПІВ-КОНТЕЙНЕРА — не «дві колонки з проміжком», а РІВНО половини. Канон ставить праву частину на 976 при центрі полотна 960, а мітку right: 50%). Тому шов міряється від ЦЕНТРУ: ліва половина 48…960, права 976…1872 = 896. Смуга фото — 4×200 із проміжком 32 (200·4 + 32·3 = 896), тобто права половина і є ця сітка, без залишку. */ --ct-half-gap: 16px; /* На 820 те саме число 16 — уже звичайний проміжок двох колонок пар: 772 = 378 + 16 + 378. */ --ct-tab-gap: var(--s-24); /* «Карта» 48…92 → «Зворотний звʼязок» 116; на 820 і 375 те саме 24 — коробка табів 204×21 на ВСІХ трьох якорях */ /* Нижче стіни пара стає стовпчиком «мітка над значенням», і шов інший: 1920, де мітка й значення стоять в один рядок. */ --ct-pair-gap: var(--s-8); /* висотою: усередині неї стоїть шпилька, привʼязана до конкретного перехрестя знімка. Плоска висота при плинній ширині зсунула б її з вулиці, бо кадр обрізався б по-різному. */ --ct-map-ratio: 1920 / 800; /* Нижче десктопної стіни висота карти ПЛОСКА, а не пропорційна: канон дає число при ширині, що відрізняється вдвічі. Пропорція там була б вигадкою: 820/448 і 375/448 — це 1.83 і 0.84. */ --ct-map-h: 448px; --ct-map-pad: clamp(24px, calc(24px + 8 * (100vw - 375px) / 445), 32px); --ct-hours-w: 255px; /**/ /* Години на 375 і 820 — основний текст 16/20 (коробка 255×40 = два рядки по 20), на 1920 — Lead 20/24 (334×48). Дві ролі, бо два числа. */ --ct-hours-fs: var(--fs-body); --ct-hours-lh: var(--lh-body); /* у точці кадру 1920×800), бо кадр там масштабується пропорцією. ⚠️ НИЖЧЕ СТІНИ ЦЕ НЕ ОДИН І ТОЙ САМИЙ КАДР КАРТИ. Канон дає шпильку на тобто 41.6 % і 41.1 % ширини, 149 і 160 від верху карти. Той самий знімок, обрізаний по-різному, дав би ОДНАКОВУ частку по обох осях; тут вона різна, отже дизайнер перекадрував мапу, а не масштабував її. Відтворити чужий кадр нашим одним файлом ми не можемо, тому знак ставиться туди, куди його поставив канон: по горизонталі — прямою лінією через обидва якорі (вона проходить майже через нуль, тобто це та сама частка 41.3 %), по вертикалі — пікселями від верху карти, бо сама карта там плоска 448. Знак декоративний: адреса стоїть поруч у рядку й у підписі карти. */ --ct-pin-x: calc(154px + 187 * (100vw - 375px) / 445); --ct-pin-y: calc(160px - 11 * (100vw - 375px) / 445); --ct-pin-w: 50.29px; /**/ --ct-pin-ratio: 71.84 / 80; /* КАДР БУДИНКУ НА КАРТІ — власні ширина й висота, а не пропорція: `aspect-ratio` не інтерполюється, а канон дає 80×116 · 181×255 · 200×282, тобто три РІЗНІ пропорції (0.690 · 0.710 · 0.709). */ --ct-shot-w: clamp(80px, calc(80px + 101 * (100vw - 375px) / 445), 181px); --ct-shot-h: clamp(116px, calc(116px + 139 * (100vw - 375px) / 445), 255px); /* Смуга фото форми стоїть ЛИШЕ на десктопі, і там усі чотири кадри одної пропорції. */ --ct-shot-ratio: 200 / 282; /* двох полів у ряд — те саме число. ⚠️ Канон ставить форму на 50, а не на 48, і проміжок полів дає 31 замість 32: узяті внутрішньо узгоджені 48 і 32, інакше рамка 664 не збіглася б із рядом полів. */ /* Ширини ПОЛЯ тут немає навмисно: воно — половина рамки за вирахуванням проміжку, і рушій рахує це сам (`repeat(2, 1fr)`). Токен на 316 стояв мертвим — правка в ньому не міняла на екрані нічого, і навмисний дефект пройшов повз знімок саме через нього. */ /* і 772 на 820. */ --ct-form-w: 100%; /* Примітка на 375 стоїть ПІД кнопкою по центру, коробкою 329 при рядка», тому й записана числом. */ --ct-note-w: 329px; --ct-head-gap: var(--s-16); /* H2 → перший ряд: 530→546 і 507→523 */ /* КНОПКА ФОРМИ — ВЛАСНА, а не сайтова `--btn-h`/`--btn-min-w`. міняти її тут означало б рухати ВСІ сторінки заради однієї. ⚠️ Це другий випадок 192×56 нижче стіни: перший — «Оформлення замовлення», де 56 стоїть на всіх трьох якорях. Тобто 56 схоже на сайтове число нижче стіни, але доказом це не є: інших адаптивних артбордів із кнопкою в замовника поки немає. Коли прийдуть перевірити й, якщо підтвердиться, підняти в `--btn-h`. */ --ct-btn-h: 56px; --ct-btn-w: 192px; /* Заголовок форми — стиль макета «H2-32» (32/36), НЕ `--fs-h2`: той на 1920 дає 48. Дві ролі, бо два числа. Нижче стіни канон дає коробку 167×24 на обох якорях — 20/24. */ --fs-ct-h2: 20px; --lh-ct-h2: 24px; /* -------------------------------------------------------------------- 5в. ПОЛЕ ФОРМИ — компонент САЙТУ, не сторінки. Ті самі 316×64 і той сторінковий префікс `ct-` разом із появою другої сторінки. Із у компонента ТРИ набори чисел, а не один: адаптивні артборди замовлення дали коробку 56 і відступ 16 нижче за стіну 1024 . Числа лишились сайтовими — інакше та сама коробка мала б два різні розміри на двох сторінках однієї ширини. Ширини поля тут немає навмисно: воно — половина рамки за вирахуванням проміжку, і рушій рахує це сам (`repeat(2, 1fr)`). Мертвий токен на 316 вже коштував один навмисний дефект, що пройшов повз знімок. -------------------------------------------------------------------- */ /* БАЗА ТУТ — МОБІЛЬНА. Коробка поля 56, а не 64: так на обох адаптивних (820). Десктопні 64 повертає перекривач стіни 1024 наприкінці файла. Проміжок ряд→ряд ЄДИНИЙ у трьох числах: 8 (375) → 16 (820) → 24 (1920); на 375 поля стоять 424 · 488 · 552 · 616, тобто крок 64 при коробці 56. */ --field-h: 56px; /**/ --field-x: var(--s-16); /* текст поля від краю: 32 − 16 */ /* Виведене, не записане: рядок 20 центрується в коробці сам. Числом воно давало б ДРУГИЙ носій тієї самої висоти — 22 при 64 і 18 при 56, і перша ж рампа коробки лишила б його на місці. */ --field-y: calc((var(--field-h) - var(--lh-body)) / 2); --field-area-h: 160px; /**/ /* СХОДИНКИ НА СТІНАХ РЕЖИМІВ, а не рампа — і це не полегшення, а замір. Рампа `--field-h` 56 → 64 через смугу десктопа зсунула ШІСТЬ прийнятих ширин кабінету й «Допомоги» (1180…1680: висота документа −9…−26 px), бо поле там ставало 58…62 замість 64. Канон дає рівно дві точки — 56 на 820 і 64 на 1920, — і обидва прочитання їй відповідають; те, що не ламає прийняте, виграє. Розмір КОНТРОЛА і є «розмір режиму» (ADAPTATION §2). */ --field-gap: var(--s-8); /* ряд → ряд на 375: 424 → 488 при 56 */ /* СТАНИ ПОЛЯ — властивістю вузла, не з рендера: Заливка заповненого записана результатом змішування, бо під нею немає жодного напівпрозорого шару: 255 − 0.4 × (255 − 231) = 245.4 → #f5f5f5 (та сама арифметика, що в `--footer-surface`). */ --field-line: var(--black-100); --field-focus: var(--black-900); --field-fill: #f5f5f5; --field-error: #d67272; /* ------------------------------------------------------------------------ 5г. «ОФОРМЛЕННЯ ЗАМОВЛЕННЯ» — файл `ixOWoKfyIpwS3rkCYHmnyo`, знято . Пʼять артбордів — це СТАНИ одного якоря, не пʼять сторінок Сторінка лягає на сітку сайту БЕЗ залишку, і це перевірено числом: контейнер 1824 = 8 × 200 + 7 × 32. Форма стоїть на колонках 3–5 (200·3 + 32·2 = 664), підсумок — на 7–8 (200·2 + 32 = 432). Тому власних ширин тут майже немає: їх рахує сітка. ------------------------------------------------------------------------ */ /* перекривачах стін 768 і 1024 наприкінці файла. Три набори, а не одна рампа: кожне число зняте з власного вузла свого якоря. */ --co-title-top: clamp(48px, calc(48px + 8 * (100vw - 375px) / 393), 56px); --co-title-w: 239px; /**/ --co-head-gap: clamp(40px, calc(40px + 8 * (100vw - 375px) / 393), 48px); --co-sec-gap: var(--s-24); /* низ секції → мітка наступної: 672 → 696 */ /* На 1920 «Оплата» стоїть на 42, а не на 40 (728 → 770), і так на ЧОТИРЬОХ артбордах із пʼяти — тобто це намір макета, а не одноразовий зсув. На обох адаптивних якорях цього зсуву немає: 24, як у решти секцій. Токен лишається власним — два числа означають два шви. */ --co-pay-sec-gap: var(--co-sec-gap); --co-label-gap: var(--s-16); /* мітка секції → перший контрол: 288 → 304 */ --co-opt-top: var(--s-16); /* мітка «Оплата» 720 → перший варіант 736 */ --co-opt-pad: var(--s-16); /* рядок варіанта 20 → волосина на 36 */ --co-opt-row: var(--s-16); /* варіант → варіант: 736 → 789 при 37 */ --co-opt-box: 16px; /**/ --co-opt-gap: var(--s-16); /* прапорець 0…16 → підпис 32 */ /* Коробка компонента «Звʼязатись для уточнень» — 316 на ВСІХ трьох якорях доріжка під нею 316 / 378 / 343. Тобто це власна ширина компонента, а не фігура сітки, — і саме тому вона тут числом, а не половиною доріжки. */ --co-opt-bare-w: 316px; --co-bare-top: var(--s-16); /* рамка коментаря 1103 → прапорець 1120 */ --co-form-col: var(--s-16); /* доріжка → доріжка у формі: 402 → 418 (T) */ --co-select-icon: 20px; /**/ --co-select-inset: 20px; /* знак 319…339 при рамці 16…359 */ /* ПРАВА КОЛОНКА. На адаптивних якорях вона не колонка, а продовження сторінки: мініатюри стоять під прапорцем на тих самих 48, що й на 1920 відділяють H1 від мініатюр. */ --co-aside-top: var(--s-48); /* низ прапорця 1140 → мініатюри 1188 */ /* Кадр НЕ пропорцією, а двома розмірами: пропорція на якорях різна — 80/116 проти 84/118, — тож `aspect-ratio` довелось би перемикати стрибком там, де канон дає дві точки й пряму між ними. */ /* Доріжок у стрічці — ЧИСЛО, а не `auto-fill`. Виведене, не кругле: скільки слотів 80 із проміжком 16 лягає в контейнер 343 — floor((343+16) / (80+16)) = 3. Від стіни планшета їх 4, і це теж замір, а не смак: стрічка там займає пів форми, 4 × 84 + 3 × 14 = 378. ⚠️ `auto-fill` тут стояв один прогін і був НЕПРАВИЛЬНИЙ не розміром, а класом: кількість доріжок входить у підпис композиції, тому сторінка «перемикалась» на кожній ширині, де в стрічку влазив ще один слот, — check-mode-identity назвав чотири такі місця (634→767, 768→820, 1280→1366, 1680→1920). Кількість, виведена формулою від ширини, законна для складу (ADAPTATION §3.2), але не для блока-ідентичності. */ --co-thumb-cols: 3; --co-thumb-w: clamp(80px, calc(80px + 4 * (100vw - 375px) / 393), 84px); --co-thumb-h: clamp(116px, calc(116px + 2 * (100vw - 375px) / 393), 118px); /* 16, а не канонні 14. Канон дає стрічку 378 = 4×84 + 3×14, тобто рівно пів форми, — але 14 у драбині кроків проєкту виявилось ЄДИНИМ числом у вікні 12…16, якого не накриває допуск 1 px, і тому єдиною пробою, що доводила сам закон драбини. Завести його в драбину означало б розмінити робочу перевірку на 6 px ширини стрічки, у якій сьогодні стоїть ОДИН кадр (кількість дає кошик). Кадр 84×118 при цьому канонний точно — звіряється взагалі. */ --co-thumb-gap: var(--s-16); --co-sum-top: var(--s-24); /* низ мініатюр 1304 → перший рядок 1330 */ --co-sum-gap: var(--s-16); /* рядок 20 → волосина 16 → наступний 16 */ --co-sum-step: calc(var(--co-sum-gap) * 2 + var(--hairline)); --co-sum-rule: calc(-1 * (var(--co-sum-gap) + var(--hairline))); --co-panel-top: var(--s-24); /* низ підсумку 1509 → чорна плашка 1533 */ --co-panel-pad: var(--s-16); /* кнопка 1549 при плашці 1533 */ /* СХОДИНКА, а не рампа, і це не виняток із Закону 3, а його межа: проміжок МІЖ елементами потоку — це крок, а кроки живуть драбиною токенів (`config.json → canon.grid_steps.scale`), не проміжними дробами. Рампа дала б 11.37 на 440 — число, якого в проєкті немає. Канон дає 7 при кнопках 152; 8 лишає кнопку 151.5, тобто в межах допуску 1 px, і не заводить восьмого числа в драбину заради півпікселя. */ --co-panel-gap: var(--s-8); /* 184 → 191 між двома кнопками по 152 */ --co-btn-h: 56px; --co-note-top: var(--s-16); /* низ плашки 1621 → примітка 1637 */ --co-note-w: clamp(328px, calc(328px + 287 * (100vw - 375px) / 393), 615px); /* Кнопка «Оплатити» намальована СІРОЮ на всіх пʼятьох артбордах — іншого стану канон не дає жодного разу. Тон і підпис узяті властивістю вузла: заливка `black/200`, підпис `black/600`. Контраст 3.1:1 — нижче AA, рядок; поріг не знижується, пара в контраст-гейт не входить. */ --co-cta-bg: var(--black-200); --co-cta-ink: var(--black-600); --co-alt-line: var(--black-700); /**/ --co-box-line: var(--black-200); /* порожній прапорець варіанта */ /* ------------------------------------------------------------------------ (той самий екран зі зміною пароля) і (Help_1920). Дві сторінки, одна розкладка: ліворуч меню кабінету, праворуч ряди «підпис — поле». Числа рядів на сітку сайту НЕ лягають: поле стоїть на колонках 5–8 (976 = 48 + 4×232, 896 = 4×200 + 3×32), а підпис — на 326, тобто між колонками. Тому колонка меню задана числом, а не сіткою. ------------------------------------------------------------------------ */ /* Крихти → вітання: 48 на 375, 56 на 820, 60 на 1920. Тотожність «сегмент1 + сегмент2 − V(820)» замість перекривача стіни: інакше на 1024 величина стрибала б і стояла плоскою до 1920. */ --acc-title-top: calc( clamp(48px, calc(48px + 8 * (100vw - 375px) / 445), 56px) + clamp(56px, calc(56px + 4 * (100vw - 820px) / 1100), 60px) - 56px); --acc-label-top: clamp(32px, calc(32px + 8 * (100vw - 375px) / 445), 40px); /* крихти → мітка розділу нижче стіни 1024 */ /* Мітка розділу ТЕЧЕ крізь стіну 1024, а не стрибає на ній. До адаптиву вона стояла плоскою 24/28 до 1023 і на стіні падала до 22.2, бо там її підхоплювала роль `--fs-ct-h2`, чий clamp починається від 20 на 820. Обидва якорі при цьому були точні — саме та рампа, обрізана перекривачем стіни, що ловиться лише прогоном ширин поспіль (пастка №24). вона спільна з «Контактами», і підганяти її під кабінет означало б зрушити чужу сторінку. */ --acc-sec-fs: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --acc-sec-lh: clamp(28px, calc(28px + 8 * (100vw - 820px) / 1100), 36px); --acc-bar-top: 80px; /* низ H1 224 → рядок контактів 304 */ --acc-bar-pad: var(--s-24); /* рядок 304…324 → волосина 349 */ --acc-half-gap: var(--s-16); /* друга пара рядка: 960 → 976 */ --acc-pair-gap: var(--s-16); /* мітка → значення: 149→165 і 1092→1108 */ --acc-head-gap: 48px; /* волосина 349 → мітка розділу 397 */ --acc-rail: 278px; /* меню 48…268, вміст від 326 */ --acc-menu-w: 220px; /**/ --acc-menu-top: 15px; /* меню 412 при мітці 397 — так на обох */ --acc-menu-pad: var(--s-16); /* рядок пункту 20 → волосина на 36 */ --acc-menu-gap: var(--s-16); /* волосина → наступний пункт: крок 53 */ --acc-menu-count: 80px; /* назва → лічильник у пункті меню */ --acc-label-fr: 650fr; /* підпис 326…976 */ --acc-field-fr: 896fr; /* поле 976…1872 = 4×200 + 3×32 */ --acc-row-pad: var(--s-16); /* низ поля 529 → волосина 545 */ --acc-area-pad: var(--s-16); /* нижче стіни 16; на 1920 — 24 */ /* Проміжок міряється від ЛІНІЇ, а волосина займає піксель: 545 → 561 це 16 разом із нею. Без віднімання ряди поїхали б на піксель за ряд. */ --acc-row-gap: calc(var(--s-16) - var(--hairline)); --acc-actions-top: var(--s-24);/* нижче стіни 24; на 1920 — 32 */ --acc-pass-top: var(--s-16); /* нижче стіни 16; на 1920 — 24 */ --acc-pass-gap: var(--s-16); /* нижче стіни пара стоїть стовпчиком, крок 16 */ --acc-btn-gap: 7px; /* 168 + 7 + 168 = 343 рівно, і на 820 те саме */ --acc-btn-w: 168px; /**/ --acc-btn-h: 56px; /* нижче стіни кнопка нижча за легенду на 8 */ --acc-send-w: 192px; /**/ --acc-note-w: clamp(329px, calc(329px + 85 * (100vw - 375px) / 445), 414px); /**/ --acc-eye: var(--icon); /**/ --acc-eye-gap: var(--s-24); /* око 749 → «Змінити пароль» 773 */ /* ------------------------------------------------------------------------ (office_820) файла `85Q0QOJTZoyRoK8DGzJkMp`, зняті. Це те саме меню кабінету, що на десктопі стоїть колонкою ліворуч, тільки нижче стіни 1024 воно стає ОКРЕМИМ екраном: вітання, три розділи й «Вихід». Крок пункту 69 = рядок 20 + 24 до волосини + сама волосина + 24 до наступного; на обох вузьких якорях він однаковий, різна лише ширина смуги (343 і 771). ------------------------------------------------------------------------ */ --of-list-top: clamp(40px, calc(40px + 16 * (100vw - 375px) / 445), 56px); /* низ вітання → перший розділ: 40 · 56 */ --of-item-pad: var(--s-24); /* рядок пункту → волосина */ --of-item-gap: var(--s-24); /* волосина → наступний пункт: крок 69 */ --of-arrow: 20px; /**/ /* Стеля смуги розділів вище стіни 1024. Канону цієї сторінки на десктопі немає, тому число виведене з СУСІДНІХ сторінок кабінету: ширша за 896 доріжка там не трапляється смугою 1824 завширшки, у якої підпис і знак розходяться на два краї екрана. Нижче стіни стеля не діє: там смуга дорівнює контейнеру, як у каноні (343 і 771). */ --of-list-max: 896px; /* ⚠️ ЧИСЛО КАНОНУ ТУТ НЕ СТОЇТЬ, і це рішення замовника. Канон дає 219 на 375 і 114 на 820 — відстань, що СПАДАЄ з шириною, тобто не ритм, а заповнення порожнього екрана: у макеті під переліком нічого немає, і «Вихід» просто відсунутий донизу. На живій сторінці це читалось як діра: замовник — «така дирка між допомога та вихід не повинна бути». Один крок замість двох чисел, які ні з чого не виводяться. */ --of-exit-top: var(--s-48); --of-exit-bottom: clamp(24px, calc(24px + 8 * (100vw - 375px) / 445), 32px); /* -------------------------------------------------------------------- . Три якорі. Нижче 820 числа — рампи 375 → 820, вище — рампи 820 → 1920 у блоці ≥768. Стіна десктопної композиції ЦІЄЇ сторінки — 1420, не 1024 (`config.json → modes.desktop.pages`): у десктопній оболонці колонка вмісту на 1024 дає панель 650 — вужчу за планшетний якір (772), і жоден рядок канону в неї не лягає; кошик тим самим механізмом стоїть на 1420. Серії чисел 375 крихти 72 → вітання 136 → рядок «Мої замовлення» 220 → замовлення 264 · 327 (розкрите, 734) · 1069 · 1132 → волосина 1211 → «Персональні дані» 1235 → «Вихід» 1373 820 крихти 72 → вітання 144 → рядок 244 → замовлення 288 (розкрите, 445) · 749 · 820 → волосина 899 → 923 → «Вихід» 1061 1920 волосина 349 → мітка 397 → панель 465 (розкрите, 508) · 989 · 1085 → підвал 1265; рядок 80, кадри 118×165, кола 56 -------------------------------------------------------------------- */ --ord-gap: clamp(8px, calc(8px + 8 * (100vw - 375px) / 445), 16px); /* між замовленнями: 8 (319 → 327) · 16 */ --ord-row-h: 55px; /**/ --ord-head-dim: .4; /* заливка розкритого рядка — `opacity-40` */ --ord-pad-x: clamp(16px, calc(16px + 8 * (100vw - 375px) / 445), 24px); /* панель → кадри: 16 (32 на 375) · 24 */ --ord-pad-y: var(--ord-pad-x); /* низ рядка → кадри: 16 · 24 — те саме */ --ord-tail: var(--s-24); /* останнє замовлення 1187 → волосина 1211 */ --ord-item-gap: var(--s-24); /* довідка 666 → волосина 690 → товар 714 */ /* кадр — третина ряду з пропорцією 101/147, а від 768 — два числа з рампою кожне. */ --ord-thumb-w: 101px; --ord-thumb-h: 147px; --ord-thumb-ratio: 101 / 147; --ord-thumb-gap: 4px; /* 32 → 137 → 242 при 101 */ --ord-name-w: 189px; /**/ --ord-body-gap: clamp(16px, calc(16px + 8 * (100vw - 375px) / 445), 24px); /* кадри → назва: 16 по вертикалі на 375 (546 → 562), 24 по горизонталі на 820 */ --ord-ctl-top: var(--s-16); /* назва 602 → довідка 618 */ --ord-dot: 48px; /**/ --ord-dot-gap: 6px; /* 32+48 → 86 */ --ord-chip-gap: 4px; /* 86+48 → 138 */ --ord-chip-pad: var(--s-24); /* капсула 87 = «Білий» 39 + 2 × 24 */ /* Токена положення «Скасувати» в рядку більше немає: кнопка стоїть під товарами на всіх ширинах (D595), бо доріжку рядка зайняв стан. */ /* -------------------------------------------------------------------- `3QojL2lmdB71wIza55JH2J`, зняті. Сторінка нижче 1024 канону не має — поле бере числа накладки, решта — сітка. 1920 поле 512…1408 × 92…164 · текст від 544 · хрестик 1344…1376 · підсумок 204 · сітка 248 (ряд 674, крок 32) 820 поле 24…796 × 84…156 · текст від 56 · хрестик 732…764 375 поле 16…359 × 73…129 · текст від 32 · хрестик 311…343 Рампи 375 → 820 у базі, 820 → 1920 — у блоці ≥768. -------------------------------------------------------------------- */ --srch-w: var(--auth-w); /* стеля 896 — колонки 3–6, як форма входу; нижче поле = контейнер (772, 343) */ --srch-h: clamp(56px, calc(56px + 16 * (100vw - 375px) / 445), 72px); /**/ /* Низ шапки → поле: 17 на 375 (56 → 73 — тремтіння на 1, узято 16), 24 на 820 (60 → 84), 32 на 1920 (60 → 92); третій якір — тотожністю двох сегментів у блоці ≥768. */ --srch-top: clamp(16px, calc(16px + 8 * (100vw - 375px) / 445), 24px); --srch-pad: clamp(16px, calc(16px + 16 * (100vw - 375px) / 445), 32px); /* поле → текст 16 · 32; хрестик від краю те саме */ --srch-close: var(--s-32); /**/ --srch-ring-dim: .2; /* волосина кола — `black/100` на 20 % */ --srch-field-dim: .4; /* заливка поля сторінки — `black/100` на 40 % */ --srch-ph-dim: .4; /* підпис «Пошук» у темному полі — на 40 % */ --srch-count-top: var(--s-40); /* низ поля 164 → підсумок 204 */ --srch-grid-top: var(--s-24); /* підсумок 224 → сітка 248 */ /* Низ видачі → підвал: артборд обрізаний вікном (1040), канону немає — береться крок секцій сторінки. */ --srch-tail: var(--section-gap); /* -------------------------------------------------------------------- 5ж. ВХІД, РЕЄСТРАЦІЯ, ВІДНОВЛЕННЯ ПАРОЛЯ — `.auth-*`. Дев'ять артбордів файла `ixOWoKfyIpwS3rkCYHmnyo` дають ТРИ сторінки: чотири «Log_1920_» — стани входу, один «Sign up_1920_» — реєстрація, три «Password recovery_1920_» — три КРОКИ відновлення. Одна вісь на всі три: колонка форми 896 = 4×200 + 3×32, тобто рівно колонки 3–6 сітки (512…1408), і вона стоїть посеред контейнера (512 + 448 = 960). Усередині вона ділиться навпіл: 432 + 32 + 432. -------------------------------------------------------------------- */ /* ⚠️ ТРИ ЯКОРІ, ТРИ НАБОРИ ЧИСЕЛ — але лише для ДВОХ сторінок із пʼяти. Замовник передав шість артбордів файла «код» відновлення. Реєстрації, кроку пошти і кроку нового пароля серед них немає — ті три сторінки успадковують числа СПІЛЬНОГО компонента `.auth-*` і лишаються виведеними, а не канонними. Числа нижче — 375 · 820 · 1920 підряд. */ --auth-w: 100%; /* нижче стіни колонка = контейнер */ --auth-col-gap: var(--s-16); /* 820: 772 = 378 + 16 + 378; далі рампа */ --auth-band-w: 100%; /* Плитка смуги: 80×116 · 181×255 · 200×282 — ТРИ різні пропорції, тому висота задана числом, а не `aspect-ratio` (він не інтерполюється). */ --auth-band-h: clamp(116px, calc(116px + 139 * (100vw - 375px) / 445), 255px); --auth-band-gap: clamp(8px, calc(8px + 8 * (100vw - 375px) / 445), 16px); --auth-band-top: 32px; /* крихти 88 → смуга 120 на обох якорях */ --auth-head-top: 40px; /* смуга 236/375 → заголовок 276/415 */ --auth-form-top: var(--s-16); /* низ заголовка 304 → перше поле 320 */ /* Ряд → ряд збігається з проміжком полів сайту: 8 · 16 · 24. */ --auth-row-gap: var(--field-gap); --auth-cta-top: var(--s-24); /* низ поля 440 → кнопка 464 */ --auth-cta-w: 192px; /* «Увійти» — 192 на ВСІХ трьох якорях */ /* ⚠️ 224 — ЧИСЛО ДЕСКТОПУ, І НИЖЧЕ СТІНИ ВОНО ВИВЕДЕНЕ, А НЕ ЗНЯТЕ. Артборда реєстрації на 820 і 375 у замовника немає, тому кнопка там бере єдине число, яке канон нижче стіни ДАЄ, — 192 з входу падінги по 16, тобто 160, і в 192 він вміщається з запасом. На 320 плоскі 224 виносили кнопку на 78 % контейнера — `container-edges` назвав це «елемент майже на всю ширину, але не по краях». */ --auth-cta-w-lg: var(--auth-cta-w); /* Висота кнопки — ВЛАСНА, а не сайтова `--btn-h`: канон дає 56 на обох адаптивних якорях і 64 на 1920. Це вже ТРЕТЯ сторінка з 56 нижче стіни (замовлення — 56 скрізь, «Контакти» — 56 нижче), але підняти число в `--btn-h` не можна без нового приймання: воно зрушить прийняті метрики сторінок, чиї кнопки нижче стіни каноном не покриті. */ --auth-cta-h: 56px; --auth-social-top: var(--s-24);/* кнопка 520 → «Продовжити через» 544 */ --auth-social-gap: var(--s-24);/* підпис 560 → ряд кнопок 584 */ --auth-social-w: 104px; /**/ /* Падінг кнопки постачальника — той самий, що в поля (16 · 16 · 24), але нижче мобільного якоря він ТЕЧЕ до 8: на 320 три кнопки стискаються до 90.7 ((288 − 16) / 3), і підпис «Facebook» 70 плюс два по 16 туди не вліз би. Рампа, а не поріг: 374.98 у реєстрі порогів не потрібне, і смуга 320…375 має власний свіп (`viewports.lowMobileSweep`). */ --auth-social-pad: clamp(8px, calc(8px + 8 * (100vw - 320px) / 55), 16px); --auth-social-h: 56px; /* 8 на 375 (3×104 + 2×8 = 328) і 16 на 820 (3×104 + 2×16 = 344): між якорями число ТЕЧЕ, а не стоїть сходинкою на стіні 768. Вище 820 канон тримає ті самі 16, тому стеля клампа й є кінцем рампи. */ --auth-social-step: clamp(8px, calc(8px + 8 * (100vw - 375px) / 445), 16px); /* Ширина блока постачальників — це ЯВНО три кнопки з двома проміжками: 328 на 375, 344 на 820, 392 на 1920. Числа тут нового немає, воно зібране з двох попередніх. */ --auth-social-row-w: calc(3 * var(--auth-social-w) + 2 * var(--auth-social-step)); --auth-legal-top: var(--s-32); /* низ перемикача 696 → примітка 728 */ --auth-legal-w: clamp(312px, calc(312px + 199 * (100vw - 375px) / 445), 511px); /* ⚠️ ЖИВЕ ЛИШЕ НИЖЧЕ СТІНИ 768. Там перемикач «Зареєструватися» стоїть НЕ ряду 640); вище стіни він повертається в рядок заголовка. */ --auth-switch-top: var(--s-32); /* Інструменти поля пароля: око `260` і «Забули пароль?» `308…408` при полі 432 завширшки — тобто права межа 24 від краю, як і текст поля. */ /* Інструменти в полі стоять на тому самому відступі, що й текст поля: 16 нижче стіни, 24 вище — тобто це `--field-x`, а не своє число. Перевірено обома якорями: на 820 «Забули пароль?» кінчається на 780 при полі 796, на 375 — на 342 при полі 359. */ --auth-tools-pad: var(--field-x); --auth-eye-gap: var(--field-x); --auth-eye-pad: 40px; /* текст поля не заходить під саме око */ --auth-forgot-pad: 156px; /* …і не заходить під око з посиланням */ --auth-hint-gap: var(--s-8); /* низ підказки 451 → верх поля 459 */ /* обмежена контейнером 343, тому 344 нічого не розпирає. */ --auth-lead-w: clamp(344px, calc(344px + 256 * (100vw - 375px) / 445), 600px); --auth-lead-top: var(--s-16); /* заголовок 332 → текст 348 */ --auth-code-top: var(--s-24); /* текст 408 → комірки коду 432 */ --auth-code-w: 166px; /**/ --auth-code-title-w: 216px; /**/ --auth-code-gap: clamp(8px, calc(8px + 8 * (100vw - 375px) / 445), 16px); --auth-note-top: clamp(24px, calc(24px + 8 * (100vw - 375px) / 445), 32px); /* «Код дійсний протягом 10 хвилин»: 203×16 на 375 — це роль Info (14/16), а 232×20 на 820 і 1920 — основний текст. Дві ролі, бо два числа. */ --auth-note-fs: var(--fs-ui); --auth-note-lh: var(--lh-ui); /* Заголовок екрана: 151×28 на обох адаптивних якорях, 36 на 1920. Це НЕ `--fs-ct-h2`: той нижче стіни дає 20/24 («Контакти»). */ --fs-auth-h: 24px; --lh-auth-h: 28px; /* -------------------------------------------------------------------- ширину контейнера, під списком — темна плашка дій. ⚠️ ЧИСЛА БАЗИ — З МОБІЛЬНОГО ЯКОРЯ, а не з десктопного. До сторінка мала рівно один артборд, і все нижче стіни було вигаданим ; замовник дав два вузькі артборди, тож база тепер знята, а не виведена. Десктопні числа переїхали в смугу ≥768 сегментом. Самі токени стоять нижче, після мегаменю (блок кошика розірвав цю шапку — див. примітку там). -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- `brJtdGRPsRJ20nUaRltBEw`. ⚠️ ЧИСЛА БАЗИ — З МОБІЛЬНОГО ЯКОРЯ; між 375 і 820 величини ТЕЧУТЬ сегментним clamp, друга ділянка 820 → 1920 живе в блоці ≥768 десктопна композиція вмикається на власній стіні 1420 плоскими числами одного якоря. Там, де роль збігається з «Обраним» (банер, заголовок, кадр, назва, списки, плашка дій), береться ЙОГО токен — це той самий компонент, знятий на тих самих 375 крихти 72 → заголовок 136 → банер 240 → ряд 464 → волосина 769 → ряд 793 → волосина 1098 → «До оплати» 1121 → плашка 1178 → підвал 1378 820 крихти 72 → заголовок 120 → банер 267 → ряд 553 → волосина 745 → ряд 769 → волосина 961 → «До оплати» 985 → плашка 1058 → підвал 1194 1920 крихти 100 → заголовок 160 → банер 404 → список 748 → підсумок 1323 → плашка 1417 -------------------------------------------------------------------- */ /* Низ банера → ряд: 24 на 375 (440 → 464) і на 1920 (724 → 748); 820 дає 26 (527 → 553) — тремтіння макета на 2 px. */ --cart-list-top: var(--s-24); /* самий склад, інше число — тут береться ВЛАСНИЙ артборд кошика. */ --cart-body-gap: clamp(16px, calc(16px + 8 * (100vw - 375px) / 445), 24px); /* Зазор над волосиною й під нею — ДВА числа на 375: «Видалити» 749 → волосина 769 (20), волосина → ряд 793 (24). На 820 обидва 24 (721 → 745 → 769), на 1920 теж (крок канону 189 = 140 + 24 + волосина + 24). */ --cart-row-pad-b: clamp(20px, calc(20px + 4 * (100vw - 375px) / 445), 24px); --cart-row-gap: var(--s-24); /* Керування нижче стіни 768: перший ряд («Розмір» | лічильник) → «Колір» ряду: 925+56 → 986); «Колір» → «Видалити» через 16 (`--wish-ctl-row`). Число 5 стоїть у: канон дає його двічі, але воно не збігається ані з 16 «Обраного», ані з драбиною `--s-*`. */ --cart-ctl-gap: 5px; /* 307); 56 з кроком 4 на 820 і 1920. */ --cart-qty-dot: clamp(52px, calc(52px + 4 * (100vw - 375px) / 445), 56px); /* Крок між колами СПАДАЄ (6 → 4), тому мінімум стоїть першим аргументом. */ --cart-qty-gap: clamp(4px, calc(6px - 2 * (100vw - 375px) / 445), 6px); /* `--wish-del-icon`: там знак росте до 20 на 1920. */ --cart-del: 56px; --cart-del-icon: 18px; /* Волосина → «До оплати»: 23 на 375 (1098 → 1121), 24 на 820 (961 → 985), 32 на 1920 (низ списку 1291 → 1323). Підсумок → плашка: 32 на 375 (1146 → 1178), 48 на 820 (1010 → 1058), 64 на 1920 (1353 → 1417). */ --cart-total-top: var(--s-24); --cart-actions-top: clamp(32px, calc(32px + 16 * (100vw - 375px) / 445), 48px); /* ДЕСКТОПНИЙ РЯД — числа живуть ЛИШЕ від стіни 1420. Ряд: 140 заввишки, між рядами 24 + волосина + 24 (крок канону 189). */ --cart-row-h: 140px; /* Ліва частина: три ракурси 100×140 із проміжком 16 (`…; — 333 останньому канон дає 101, це тремтіння на 1 px), далі назва через 32. */ --cart-thumb-w: 100px; --cart-thumb-gap: var(--s-16); --cart-name-gap: var(--s-32); /* Права група — 982 від правого краю контейнера, і саме тому вона лягає на канон ТОЧНО, попри те що ряд канону вужчий за контейнер на 2 54 + 32 + 168 + 40 + 176 + 40 + 168 + 208 + 40 + 56 = 982. */ --cart-badge-w: 54px; /* коробка бейджа стоїть і порожня */ --cart-gap-badge: var(--s-32); --cart-gap-ctl: var(--s-40); --cart-price-w: 208px; /* низ 1518 → 1726, текст притиснутий праворуч */ /* Сума до оплати — Inter Tight Medium 20/24 без трекінгу на обох вузьких роль на 375 дає 18/22. Від 820 той самий токен тече до власного кегля проєкту з 26, тому пара живе тут, а не в загальній шкалі. Підпис поруч — Txt-16 у `black/400` на всіх трьох, тобто наявна роль `--label-ink`. */ --cart-total-fs: 20px; --cart-total-lh: 24px; --cart-total-ls: 0; /* -------------------------------------------------------------------- МЕГАМЕНЮ МАГАЗИНУ. Артборд («menu_1920»), знятий. ⚠️ ЯКІР ОДИН — 1920, тому жодної рампи тут немає й бути не може: рампа між двома числами вимагає ДВОХ якорів, а другого нам не давали. Блок живе тільки від стіни десктопа; нижче неї компонента не існує. Коли зʼявиться вузький артборд, ці плоскі числа стануть рампами — і саме тому вони названі, а не вписані в правила. -------------------------------------------------------------------- */ --menu-pad-top: var(--s-48); /* низ шапки 60 → підпис 108 */ --menu-label-gap: var(--s-24); /* низ підпису 124 → верх списку 148 */ --menu-list-gap: var(--s-16); /**/ --menu-cards-gap: var(--s-48); /* низ списку 322 → верх кадрів 370 */ /* `--fs-18/--lh-18` веде 18/24: те саме тіло, ІНШИЙ інтерліньяж, тому переписати її означало б зсунути чужий блок заради свого. */ --menu-link-fs: 18px; --menu-link-lh: 22px; /* сітки шапки дають рівно 200 на 1920 (3 × 45.33 + 2 × 32), тобто ряд стоїть на тій самій сітці, що й пункти — 4 / 7 / 13 / 19 колонка. */ --menu-card-ratio: 200 / 282; --menu-card-bleed: 71px; /* низ панелі 581, низ кадрів 652 */ /* Хрестик — коло 64 з волосиною й БЕЗ заливки (: circle r=31.5 stroke #201F1F/12 %, fill відсутній). Розміру знака окремим токеном НЕМАЄ навмисно: хрест намальований усередині полотна 64×64 (22…42), тож svg на всю кнопку дає канонні 20 сам — окреме число було б другим джерелом тієї самої величини. */ --menu-close: 64px; --menu-close-top: 33px; /* низ шапки 60 → верх кола 93 */ /* -------------------------------------------------------------------- 5і. ОБРАНЕ — токени (шапка блоку з описом якорів стоїть вище, перед кошиком). Числа зняті з артбордів підряд, тому тут вони СЕРІЯМИ, а не поодинці: 375 крихти 72 → заголовок 136 → банер 240 → ряд 464 → волосина 784 → ряд 808 → плашка 1138 → підвал 1338 820 крихти 72 → заголовок 120 → банер 267 → ряд 553 → волосина 745 → ряд 769 → підвал 1111 1920 крихти 100 → заголовок 160 → банер 404 → ряд 748 → волосина 972 → ряд 996 → волосина 1220 → плашка 1284 → підвал 1472 ⚠️ ЦЕЙ КОМЕНТАР БУВ РОЗІРВАНИЙ 03.09–: блок кошика вставили всередину шапки «5і. ОБРАНЕ», і цей хвіст лишився ПОЗА коментарем. Голий текст у `:root` парсер читає як зіпсоване оголошення до першого `;` — і разом із ним зʼїв `--wish-title-top`: нижче 768 H1 «Обраного» і кошика стояв упритул до крихт, а від 768 працювало друге визначення. Жоден чекер цього не бачив (y не звіряється). Закрито з дозволу замовника. -------------------------------------------------------------------- */ /* Заголовок ІДЕ ВГОРУ до планшета й лише потім униз: 88→136 на 375 дає 48, 88→120 на 820 дає 32, 100→160 на 1920 дає 60. Рампа спадна, тому мінімум стоїть першим аргументом `clamp`, а не другим. */ --wish-title-top: clamp(32px, calc(48px - 16 * (100vw - 375px) / 445), 48px); --wish-banner-top: clamp(40px, calc(40px + 3 * (100vw - 375px) / 445), 43px); --wish-banner-h: clamp(200px, calc(200px + 60 * (100vw - 375px) / 445), 260px); --wish-banner-pad: clamp(24px, calc(24px + 8 * (100vw - 375px) / 445), 32px); /* Коло хрестика нижче стіни БІЛЬШЕ, ніж на десктопі: 40 проти 32 на обох вузьких якорях — палець проти курсора. */ --wish-banner-close: 40px; --banner-close-bg: rgb(255 255 255 / 60%); /* хрестик банера: біле 60 % (D562) */ --wish-dot-w: 48px; /* сегмент індикатора — 48 на всіх трьох */ --wish-dot-h: 2px; --wish-dot-gap: var(--s-8); /* 880 · 936 · 992 — крок 56 при 48 */ --wish-dot-bottom: 16px; /* низ смуги 422 → низ банера 440 на 375 */ --wish-dot-dim: .4; /* непоказаний сегмент — прозорість вузла */ --wish-row-pad: var(--s-24);/* ряд 721 → волосина 745 → ряд 769 на 820 */ /* Зазор між верхнім блоком ряду й керуваннями: 580→596 на 375, 641→665 на 820. Вище стіни 1024 ряд стає однією смугою, і зазор не вживається. */ --wish-row-gap: clamp(16px, calc(16px + 8 * (100vw - 375px) / 445), 24px); --wish-pic-w: clamp(80px, calc(80px + 40 * (100vw - 375px) / 445), 120px); --wish-pic-h: clamp(116px, calc(116px + 52 * (100vw - 375px) / 445), 168px); --wish-body-gap: clamp(19px, calc(19px + 5 * (100vw - 375px) / 445), 24px); /* Коробка НАЗВИ, не групи: канон малює групу 197, а текст усередині — 157, і перенос тримає саме текст. */ --wish-body-w: 157px; --wish-body-step: var(--s-8); /* назва → ціна: 464+60 → 532 на 375 */ /* ТЕКСТ СТОРІНКИ нижче стіни — Txt-16 (16/20), а не підзаголовок 20/24. Один крок на дві ролі, бо він у каноні один: назва ряду дає три рядки по 20 у коробці 60, підпис банера — 20 замість десктопних 24 були б одним числом у двох місцях. */ --wish-txt-fs: 16px; --wish-txt-lh: 20px; --wish-ctl-h: 56px; /* висота ВСІХ керувань ряду */ --wish-sel-w: 168px; /* «Розмір» і «Колір» — 168×56 на всіх трьох */ --wish-sel-pad: var(--s-24);/* рамка 168 → підпис 192; знак 288 → 336 */ /* Нижче стіни 768 керування стоять СТОВПЧИКОМ у дві доріжки: два списки поруч, під ними «В корзину» на всю ширину, під нею — «Видалити». */ --wish-ctl-col: var(--s-8); /* 16+167.5+8 = 191.5 при канонних 191 */ --wish-ctl-row: var(--s-16);/* 652→668 і 724→740 */ /* Кошик нижче стіни — не коло, а рядок «Видалити» зі знаком 18 на 820 коло вже є, але знак у ньому теж 18. */ --wish-del-icon: 18px; --wish-del-gap: var(--s-8); /* текст 0…71 → знак на 79 */ --wish-gap-sel: var(--s-16);/* «Розмір» 336 → «Колір» 352 на 820 */ --wish-gap-act: var(--s-24);/* «Колір» 520 → «В корзину» 544 на 820 */ --wish-gap-del: var(--s-16);/* «В корзину» 724 → кошик 740 на 820 */ /* Список → плашка. Канон дає 34 на 375 (1104 → 1138), з яких 24 забирає власне поле останнього ряду, тож полем плашки лишається 10; на 1920 це 64. Проміжного числа немає — плашки на 820 канон не малює, тому рампа тут ОДНА на всю смугу 375…1920, без злому на 820. */ --wish-actions-top: clamp(10px, calc(10px + 54 * (100vw - 375px) / 1545), 64px); --wish-actions-w: 512px; /* 16 + 232 + 16 + 232 + 16 */ --wish-actions-pad: var(--s-16); --wish-actions-gap: var(--s-8);/* 1210 → 1218 між кнопками стовпчика */ /* обидва вузькі артборди показують повний. Числа лишаються десктопними на всій смузі: вигадувати вузькі означало б поставити число без джерела. */ --wish-empty-top: 200px; /* верх списку 724 → «Тут поки порожньо» 924 */ --wish-empty-gap: 236px; /* підпис 948 → плашка 1184 */ /* -------------------------------------------------------------------- 6. КОНТЕЙНЕР. Кап дублюється в `config.json → container.max_width`, бо звідти його читають скрипти свіпу; тут — для CSS. -------------------------------------------------------------------- */ /* Гутер ТЕЧЕ між якорями (рампа 16 → 24 у смузі M–T). Стеля рампи — рівно значення наступного якоря, тому на самому якорі число ціле: 375 → 16, 820 → 24, 1920 → 48. */ --gutter: clamp(16px, calc(16px + 8 * (100vw - 375px) / 445), 24px); /* ЄДИНИЙ кап ширини вмісту. Значення на якорях M і T тут НЕ задаються — вони виводяться з екрана й гутера і збігаються з макетом самі: 375 − 2×16 = 343, 820 − 2×24 = 772, кап 1824 на 1920. ⚠️ Трьома константами по бендах контейнер у межах бенду не росте: 768 показує колонку 343 посеред екрана, 1680 — планшетну композицію з полями по 454 px. */ --container: 1824px; /* на якорях виходить M 343 · T 772 · D 1824 */ /* ВЕЛИКИЙ ФОРМАТ ЗАДАЄТЬСЯ ШИРИНОЮ КАРТКИ, А НЕ ШИРИНОЮ БЛОКА. і колонок при цьому 1 · 1 · 2. Блок — наслідок: 323 · 708 · 1504 (= 2×736 + 32), відцентрований у контейнері. ⚠️ Ширина БЛОКА при двох колонках на всіх якорях дала б на вузьких великий формат двома вузькими картками замість однієї великої — рівно тим, від чого він мав відрізнятись. Через ширину картки колонки рахує сам рушій (`repeat(auto-fit, …)`), і власного порога цей перехід не заводить: він настає там, де дві картки з проміжком уперше вміщаються в контейнер. */ --card-wide-w: clamp(323px, calc(323px + 385 * (100vw - 375px) / 445), 708px); /* -------------------------------------------------------------------- 7. ФОРМИ Й ГЕОМЕТРІЯ КОНТРОЛІВ — з легенди станів. -------------------------------------------------------------------- */ --radius-pill: 100px; /* кнопка «Купити»: 216×64, r=100 — фактично капсула */ --btn-h: 64px; /* висота основної кнопки на D */ --btn-min-w: 216px; /* ширина кнопки в легенді — фіксовані 216 */ --btn-round: 56px; /* кругла кнопка ♡ / «поділитись» */ --icon: 24px; /* стандартна іконка інтерфейсу */ --hairline: 1px; /* роздільники й підкреслення посилань */ --focus-ring: 2px; /* контур фокуса: товщина = відступ */ /* Шапка. Висота й логотип різні на мобільному й десктопному якорях: значення в макеті немає: до десктопного якоря стоїть мобільне. */ --header-h: 56px; --logo-h: 24px; /* Тло тонованого блоку підвала. У каноні це `black/100` з непрозорістю 40% поверх білого; тут результат змішування записаний числом, бо жодного напівпрозорого шару під ним немає: 255 − 0.4 × (255 − 231) = 245.4 → #f5f5f5 */ --footer-surface: #f5f5f5; /* -------------------------------------------------------------------- 8. РУХ. У макеті руху немає — це статичні кадри. Значення нижче — одна крива і рівно три тривалості на весь проєкт. Четвертої тривалості не заводиться: так зʼявляється дванадцять «майже однакових» переходів. -------------------------------------------------------------------- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */ /* ДРУГА крива, і це свідомий виняток: expo-out проходить 55 % відстані за перші 100 мс. Для появи чи підсвітки це правильно — рух починається різко й мʼяко гасне; для ГОРТАННЯ на 464 px читається як стрибок із довгим доповзанням. Гортання — єдиний споживач цієї кривої: рівний розгін і рівне гальмування. */ --ease-glide: cubic-bezier(0.4, 0, 0.2, 1); /* тільки прокрутка стрічки */ --dur-fast: 160ms; /* зміна кольору, підкреслення */ --dur-base: 320ms; /* поява/зникнення, зсув у межах екрана */ --dur-slow: 640ms; /* накат секції, завіса переходу */ } /* ============================================================================ ЯКОРІ. Пороги 820 і 1920 зареєстровані в config.json. Проміжні ширини — інтерполяція за `frontend/agents/ADAPTATION.md`, тому тут стоять ЦІЛІ значення на якорях, а не clamp: закон течії між якорями описаний у ROLES-TABLE і застосовується на етапі adapt, коли є що міряти. ============================================================================ */ /* Скільки карток видно — ціле число, тому воно й далі перемикається порогом, а не рампою. Пороги ВИВЕДЕНІ, не вгадані: наступна кількість вмикається рівно там, де картка інакше переросла б 432 px — найбільшу намальовану в каноні. */ @media (min-width: 488px) { :root { --slide-visible: 2; /* Від двох карток стрічка знову живе гутером і проміжком сітки: окрайці там виходять рівними самі (48 − 32 = 16 і 1920 − 1904 = 16 на десктопі), і власні числа були б другим описом того самого. */ --slide-edge: var(--gutter); --slide-gap: var(--grid-gap); } } @media (min-width: 935px) { :root { --slide-visible: 3; --grid-cols: 3; /* СТЕЛЯ МІНІАТЮРИ — ЧАСТКА КАНОНУ, а не 50.8 %. З 935 половини стоять поруч, тобто половина вужча за 590, і працює саме стеля: без неї картка займає половину кадру замість канонічної третини. Числа з десктопного вузла: 300/960 = 31.25 % ширини половини, 412/980 = 42.041 % її висоти. На 1920 стеля дає рівно 300×412, тобто якір не зачеплений. */ --pair-card-max-w: 31.25%; --pair-card-max-h: 42.041%; } } @media (min-width: 1420px) { :root { --slide-visible: 4; --grid-cols: 4; /* 6 % надлишку = 5.7 % знімка поза кадром; хід 4.5 % знімка (5 % кадру). Менше вже не читається як рух, більше — помітно ріже композицію. */ --parallax-over: 6%; --parallax-amp: 4.5%; } } /* ⚠️ СМУГА T–D: ДРУГІ ДІЛЯНКИ ТИХ САМИХ РАМП, (100vw − 820) / 1100. Величини, що проходять ТРИ якорі, записані ТОТОЖНІСТЮ, а не другим `clamp`-ом: V = calc(clamp(сегмент 375→820) + clamp(сегмент 820→1920) − V(820) ) Чому не двома окремими `clamp`. `clamp` уміє один відрізок, тож пара «база + перекривач» обрізає нижню рампу рівно на стіні: база не встигає дійти до свого верху, а перекривач стартує вже з нього. Обидва ЯКОРІ при цьому точні — 375 і 820 дають канонні числа, — тому жоден замір на якорях цього не бачив; видно було лише на самій стіні, де H1 стрибав 87.6 → 100, ширина заголовка героя 431 → 500, зазор сітки 14.8 → 16. Тотожність знімає стрибок і не чіпає якорів: на 820 другий доданок дорівнює віднімку, на 1920 перший уже стоїть на стелі. Дозвіл переглянути проміжні ширини Головної, Каталогу й Картки дав замовник («дозволяю, зроби як правильно»), і знімки метрик перезняті тим самим комітом. */ /* інтерполяцією між мобільним і десктопом: кожне зняте з власного вузла. Базові значення вище — МОБІЛЬНІ. */ @media (min-width: 768px) { :root { --ab-note-w: 185px; /**/ --ab-quote-w: 456px; /**/ --ab-aside-w: 280px; /**/ --ab-cover-flat-ratio: 820 / 524;/**/ --ab-col-w: 300px; /* колонка А: 32779 · 32780 · 32781 */ --ab-col-narrow: 343px; /* колонка Б: 32783…32786 */ /* Виносний абзац тече 300 → 377 від 820 до 1920: на 1024 він падав до 228 (дві доріжки з восьми) — 11 рядків замість 7…8. */ /* ДВА СЕГМЕНТИ З КОЛІНОМ НА 1420. До 1420 абзац лежить на трьох доріжках під цією стелею; з 1420 — на двох, і дві доріжки там дають рівно 318. Пряма 300 → 377 давала б на 1419 уже 342, і на 1420 абзац ПАДАВ би на 24 px — розмір, що меншає від ширшого екрана. Тому стеля йде 300 → 318 до 1420 і 318 → 377 далі: обидва якорі точні, коліно збігається з доріжками, стрибка немає. */ --ab-lead-w: calc(clamp(300px, calc(300px + 18 * (100vw - 820px) / 600), 318px) + clamp(318px, calc(318px + 59 * (100vw - 1420px) / 500), 377px) - 318px); /**/ /* `--ab-cover-title-w` тут не перевизначається: базова рампа дає 590 на 820 і тримає стелю до 1023. */ --ab-tail-lead-w: 300px; /**/ --ab-thanks-w: 300px; /**/ --ab-h2-w: 365px; /**/ --ab-final-w: 684px; /**/ --ab-block-gap: var(--section-gap); --ab-lead-top: var(--section-gap); --ab-head-gap: var(--s-40); --ab-hero-pad-end: var(--s-48); --ab-crumbs-gap: 60px; } } /* 221…796 під поле, тобто 197: 575 при контейнері 772. Меню й вітання тут так само немає — вони на сторінці «Кабінет». */ @media (min-width: 768px) { :root { --acc-label-fr: 197fr; /* підпис 24…221 */ --acc-field-fr: 575fr; /* поле 221…796 */ /* ПОШУК: низ шапки → поле 24 → 32, тотожність трьох якорів. */ --srch-top: calc( clamp(16px, calc(16px + 8 * (100vw - 375px) / 445), 24px) + clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px) - 24px); /*). Стіна композиції сторінки 1420 рампи не рве: числа течуть крізь неї, на стіні міняється лише розклад (хаб → оболонка кабінету). Крок між замовленнями і поля панелі своїх 24/16 досягають на 820 і далі плоскі (989 − 973 = 16, 352 − 328 = 24 на 1920). */ --ord-row-h: clamp(55px, calc(55px + 25 * (100vw - 820px) / 1100), 80px); /**/ --ord-thumb-w: clamp(101px, calc(101px + 17 * (100vw - 820px) / 1100), 118px); --ord-thumb-h: clamp(147px, calc(147px + 18 * (100vw - 820px) / 1100), 165px); --ord-thumb-gap: clamp(4px, calc(4px + 4 * (100vw - 820px) / 1100), 8px); /* 352 → 478 → 604 при 118 */ --ord-name-w: clamp(189px, calc(189px + 8 * (100vw - 820px) / 1100), 197px); /**/ /* Кадри → назва: 24 на 820, 32 на 1920 (722 → 754) — третій якір тотожністю «сегмент1 + сегмент2 − V(820)». */ --ord-body-gap: calc( clamp(16px, calc(16px + 8 * (100vw - 375px) / 445), 24px) + clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px) - 24px); --ord-dot: clamp(48px, calc(48px + 8 * (100vw - 820px) / 1100), 56px); /**/ --ord-dot-gap: clamp(6px, calc(6px + 10 * (100vw - 820px) / 1100), 16px); /* 1232 → 1248 */ --ord-chip-gap: clamp(4px, calc(4px + 12 * (100vw - 820px) / 1100), 16px); /* 1304 → 1320 */ /* Рядок замовлення колонками, від внутрішнього краю панелі: № у колонці 173 (197 − поле 24) на 820 і 402 на 1920 (352 → 754), дата — у 197 і 422 (754 → 1176), за ними «Скасувати». 197 — колонка підпису кабінету на 820; числа 1920 свої. Сума → знак: 32 (720 → 752) і 122 (1708 → 1830). */ --ord-col-no: clamp(173px, calc(173px + 229 * (100vw - 820px) / 1100), 402px); --ord-col-date: clamp(197px, calc(197px + 225 * (100vw - 820px) / 1100), 422px); --ord-sum-gap: clamp(32px, calc(32px + 90 * (100vw - 820px) / 1100), 122px); } } @media (min-width: 768px) { :root { /* підпису цитати, який лишається 20/24 до самого 1920. */ --fs-phrase: 24px; --lh-phrase: 28px; --pair-tabs-top: 35px; --pair-label-top: 32px; --hero-ratio: 820 / 838; --hero-cap: 838px; --quote-cap: 824px; --hero-pad-y: var(--s-32); /* КОЛЕКЦІЯ, планшетний якір. */ --cl-quote-w: 456px; /**/ /* ЛІД ТЕЧЕ 300 → 332 від 820 до 1920, а не стрибає на стіні: на 1023 він мав 300, на 1024 падав до 228 (дві доріжки з восьми) і повз до 332 лише на 1920 — 9 рядків замість 5…6. Стеля тут, доріжки — у components. */ --cl-lead-w: clamp(300px, calc(300px + 32 * (100vw - 820px) / 1100), 332px); /**/ --cl-col-w: 300px; /**/ --cl-note-w: 300px; /**/ /* `--cl-title-w` тут не перевизначається: базова рампа сама дає 500 на 820 і тримає стелю до 1023. */ /* Той самий замір по артборду: 64 і 152 із 979 px запасу. */ --cl-hero-focus-1: 6.5%; /**/ --cl-hero-focus-2: 15.5%; /**/ --cl-tile-ratio: 181 / 255; --cl-video-ratio: 820 / 524; /**/ --cl-quote-top: 24px; /* 986 − 962 */ --cl-shots-top: 32px; /* 1178 − 1146 */ --cl-lead-top: 32px; /* 1465 − 1433 */ --cl-grid-top: 34px; /* 2415 − 2381 */ /* Кеглі блока не ростуть на планшеті — див. коментар у базі. */ /* КЕГЛЬ ЛІДА ТЕЧЕ 20 → 24 від 820 до 1920, а не стрибає на 1024: канон планшета дає 20/24, десктопа — 24/28, і між ними розмір тече, як усякий розмір. Плоскі 20 до 1023 і 24 з 1024 давали 7 рядків у коробці 306 при канонних 5…6. */ --cl-lead-fs: clamp(20px, calc(20px + 4 * (100vw - 820px) / 1100), 24px); --cl-lead-lh: clamp(24px, calc(24px + 4 * (100vw - 820px) / 1100), 28px); --cl-doc-h: 827px; /* висота липкого блока на планшеті */ --cl-quote-h: 160px; /**/ /* Нижня пара на планшеті — ДВІ половини поруч, 410×320 кожна , тобто пропорція своя, не десктопна. */ --cl-pair-ratio: 410 / 320; /* ШИРИНА НАЗВИ Й РОЗМІР ЗНАКА РОСТУТЬ ТІЄЮ Ж РАМПОЮ, ЩО Й КЕГЛЬ. ⚠️ Якби коробка назви стрибала 500 → 1003 рівно на 1920, уся смуга 1140…1919 набирала б 130–160 px у коробку 500: назва йшла б ТРЬОМА рядками замість двох, а знак лишався б планшетним 64 при кеглі 147. Обидва якорі рампа віддає точно: 820 → 500/64, 1920 → 1003/110. */ --hero-title-w: calc(clamp(221px, calc(221px + 279 * (100vw - 375px) / 445), 500px) + clamp(500px, calc(500px + 503 * (100vw - 820px) / 1100), 1003px) - 500px); --hero-note-w: 265px; --hero-mark: calc(clamp(45px, calc(45px + 19 * (100vw - 375px) / 445), 64px) + clamp(64px, calc(64px + 46 * (100vw - 820px) / 1100), 110px) - 64px); --hero-slide: var(--btn-round); --fs-display: calc(clamp(60px, calc(60px + 40 * (100vw - 375px) / 445), 100px) + clamp(100px, calc(100px + 60 * (100vw - 820px) / 1100), 160px) - 100px); /* ОБРАНЕ, друга смуга 820 → 1920. Там, де рампа є в обох сегментах, стоїть тотожність «сегмент1 + сегмент2 − V(820)»: перекривач розірвав би величину рівно на стіні. Там, де перший сегмент плоский, тотожність не потрібна — нижня стеля другого сегмента і є те плоске число. */ --wish-title-top: calc(clamp(32px, calc(48px - 16 * (100vw - 375px) / 445), 48px) + clamp(32px, calc(32px + 28 * (100vw - 820px) / 1100), 60px) - 32px); --wish-banner-top: calc(clamp(40px, calc(40px + 3 * (100vw - 375px) / 445), 43px) + clamp(43px, calc(43px + 37 * (100vw - 820px) / 1100), 80px) - 43px); --wish-banner-h: calc(clamp(200px, calc(200px + 60 * (100vw - 375px) / 445), 260px) + clamp(260px, calc(260px + 60 * (100vw - 820px) / 1100), 320px) - 260px); --wish-pic-w: calc(clamp(80px, calc(80px + 40 * (100vw - 375px) / 445), 120px) + clamp(120px, calc(120px + 23 * (100vw - 820px) / 1100), 143px) - 120px); --wish-pic-h: calc(clamp(116px, calc(116px + 52 * (100vw - 375px) / 445), 168px) + clamp(168px, calc(168px + 32 * (100vw - 820px) / 1100), 200px) - 168px); --wish-body-gap: calc(clamp(19px, calc(19px + 5 * (100vw - 375px) / 445), 24px) + clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px) - 24px); /* Перший сегмент плоский — тотожність не потрібна. */ --wish-banner-close: clamp(32px, calc(40px - 8 * (100vw - 820px) / 1100), 40px); --wish-body-w: clamp(157px, calc(157px + 40 * (100vw - 820px) / 1100), 197px); --wish-txt-fs: clamp(16px, calc(16px + 4 * (100vw - 820px) / 1100), 20px); --wish-txt-lh: clamp(20px, calc(20px + 4 * (100vw - 820px) / 1100), 24px); --wish-del-icon: clamp(18px, calc(18px + 2 * (100vw - 820px) / 1100), 20px); --wish-gap-sel: clamp(16px, calc(16px + 24 * (100vw - 820px) / 1100), 40px); --wish-gap-act: clamp(24px, calc(24px + 38 * (100vw - 820px) / 1100), 62px); /* Числа, що живуть ЛИШЕ вище стіни 768: нижче неї ряд і плашка беруть висоту від вмісту, і плоске число тут означало б вигадане. */ --wish-row-h: clamp(168px, calc(168px + 32 * (100vw - 820px) / 1100), 200px); --wish-actions-h: 88px; --wish-cta-w: 232px; /* КОШИК, друга смуга 820 → 1920. Що спільне з «Обраним», стоїть вище. Тотожність «сегмент1 + сегмент2 − V(820)» — лише там, де рампа є в обох сегментах; де перший плоский, нижня стеля другого і є те число. */ --cart-actions-top: calc(clamp(32px, calc(32px + 16 * (100vw - 375px) / 445), 48px) + clamp(48px, calc(48px + 16 * (100vw - 820px) / 1100), 64px) - 48px); --cart-total-top: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); /* Сума до оплати: 20/24 без трекінгу на 820 → 26/30 із 0.26 на 1920. */ --cart-total-fs: clamp(20px, calc(20px + 6 * (100vw - 820px) / 1100), 26px); --cart-total-lh: clamp(24px, calc(24px + 6 * (100vw - 820px) / 1100), 30px); --cart-total-ls: clamp(0px, calc(.26px * (100vw - 820px) / 1100), .26px); /* ПРОМІЖОК МІЖ КЕРУВАННЯМИ РЯДУ У ПЛАНШЕТНІЙ СМУЗІ — ВИВЕДЕНИЙ, як (768 − 48 − кадр 115.3 − зазор 23.1) при сумі сталих ширин 568 (168 + 176 + 168 + 56) — тобто на три проміжки є 13.6, і 16 не вміщається фізично: кошик виходив за вікно на 11 px. Рампа від стіни, а не поріг: число на 768 (4) виведене з тих самих канонних ширин, і ряд лишається ОДНІЄЮ лінією на всій смузі. Вище 820 стоїть 16 — свого десктопного числа в цієї композиції немає, вона кінчається стіною 1420. */ --cart-gap-t: clamp(4px, calc(4px + 12 * (100vw - 768px) / 52), 16px); --lh-display: calc(clamp(64px, calc(64px + 40 * (100vw - 375px) / 445), 104px) + clamp(104px, calc(104px + 60 * (100vw - 820px) / 1100), 164px) - 104px); --ls-display: -3px; --fs-hero-note: 20px; --lh-hero-note: 24px; --fs-h1: calc(clamp(50px, calc(50px + 50 * (100vw - 375px) / 445), 100px) + clamp(100px, calc(100px + 40 * (100vw - 820px) / 1100), 140px) - 100px); --lh-h1: calc(clamp(54px, calc(54px + 50 * (100vw - 375px) / 445), 104px) + clamp(104px, calc(104px + 40 * (100vw - 820px) / 1100), 144px) - 104px); --fs-h2: calc(clamp(28px, calc(28px + 8 * (100vw - 375px) / 445), 36px) + clamp(36px, calc(36px + 12 * (100vw - 820px) / 1100), 48px) - 36px); --lh-h2: calc(clamp(32px, calc(32px + 8 * (100vw - 375px) / 445), 40px) + clamp(40px, calc(40px + 12 * (100vw - 820px) / 1100), 52px) - 40px); --fs-lead: 20px; --lh-lead: 24px; /* далі не росте — так у каноні */ --grid-gap: calc(clamp(11px, calc(11px + 5 * (100vw - 375px) / 445), 16px) + clamp(16px, calc(16px + 16 * (100vw - 820px) / 1100), 32px) - 16px); /* ВИЩЕ 1920 ГУТЕР РОСТЕ РАЗОМ ІЗ ПОРОЖНЕЧЕЮ. Контейнер прибитий до 1824 і стоїть по центру, тобто на 2200 його край — 188, а не 48. Усе, що живе гутером, лишалось на 48 і роз'їжджалось із шапкою на 140 px (замір на 2200). `max` віддає ті самі 48 рівно до 1920 і далі веде край нарівні з контейнером. */ --gutter: max( clamp(24px, calc(24px + 24 * (100vw - 820px) / 1100), 48px), calc((100vw - var(--container)) / 2)); --grid-row-gap: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --card-wide-w: calc(clamp(323px, calc(323px + 385 * (100vw - 375px) / 445), 708px) + clamp(708px, calc(708px + 28 * (100vw - 820px) / 1100), 736px) - 708px); /* Вордмарк росте 24 → 28 → 30. Проміжне число планшета не інтерполяція: вузол дає 121.74×28 напряму. */ --logo-h: 28px; --section-gap: clamp(48px, calc(48px + 52 * (100vw - 820px) / 1100), 100px); --crumbs-top: clamp(16px, calc(16px + 8 * (100vw - 820px) / 1100), 24px); /* СТОРІНКА 404, планшетна смуга. Розкладка та сама, що на мобільному, — міняються тільки числа. Ряд фото стоїть по контейнеру: 24…796 при контейнері 772. */ --e404-shot-w: 23.4456%; /* 181 / 772 — планшетний якір */ --e404-trio-gap: var(--s-16); /**/ --e404-shot-ratio: 181 / 255; --e404-glyph-w: 99.0933%; /* 765 / 772 */ --e404-glyph-x: 2px; --e404-glyph-ratio: 765 / 323; --e404-rise: 11.5285%; /* 89 / 772 */ --doc-shot-ratio: 181 / 255; /**/ --cat-title-top: clamp(48px, calc(48px + 12 * (100vw - 820px) / 1100), 60px); --cat-bar-rule: clamp(16px, calc(16px + 8 * (100vw - 820px) / 1100), 24px); --cat-rule-grid: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --cat-pager-top: clamp(40px, calc(40px + 24 * (100vw - 820px) / 1100), 64px); --section-title-gap: clamp(24px, calc(24px + 16 * (100vw - 820px) / 1100), 40px); --cat-title-w: calc(clamp(370px, calc(370px + 185 * (100vw - 375px) / 445), 555px) + clamp(555px, calc(555px + 209 * (100vw - 820px) / 1100), 764px) - 555px); --pc-rule-y: clamp(24px, calc(24px + 4 * (100vw - 820px) / 1100), 28px); --pc-rule-tight: clamp(8px, calc(8px + 4 * (100vw - 820px) / 1100), 12px); --pc-act-rule-y: clamp(24px, calc(24px + 6 * (100vw - 820px) / 1100), 30px); --pc-reel-top: clamp(48px, calc(48px + 32 * (100vw - 820px) / 1100), 80px); /**/ --pc-title-fs: 32px; --pc-title-lh: 36px; --pc-title-w: calc(clamp(182px, calc(182px + 95 * (100vw - 375px) / 445), 277px) + clamp(277px, calc(277px + 27 * (100vw - 820px) / 1100), 304px) - 277px); --pc-price-fs: clamp(20px, calc(20px + 6 * (100vw - 820px) / 1100), 26px); --pc-price-lh: clamp(24px, calc(24px + 6 * (100vw - 820px) / 1100), 30px); /* Планшетна композиція картки товару. Пропорція кадру теж належить сюди: 772/1094 — не 750/1046 у меншому масштабі (різниця 18 px на 772). */ --pc-frame-ar: 772 / 1094; /**/ --pbar-h: 88px; --toast-inset: var(--s-24); /**/ --pbar-btn-h: var(--s-56); --pbar-size-w: 168px; --pbar-buy-w: 232px; } } /* ПОРІГ ІДЕНТИЧНОСТІ 1140 — тут десктопною стає не лише сітка шапки, підвала й пари, а й ПРОПОРЦІЯ повноекранних кадрів. Без цього рядка перший екран у смузі 1140…1919 брав планшетну пропорцію 820/838, тобто на 1680 виходив 1717 px заввишки при вікні 1174: підпис під заголовком лежав за краєм екрана, і з накатом його не бачив ніхто. Замір: 1366 → 1396, 1280 → 1308, 1680 → 1717. Після правки — 857 на 1680. Число те саме, що в композиції: розійшовшись, вони дали б смугу, де пара вже десктопна, а перший екран іще планшетний. */ @media (min-width: 1024px) { :root { /* `:root` як єдині, поки в сторінки був один якір; із приходом вище. Жодне число не здублювалось: кожне живе рівно в одному місці. */ --ab-note-w: 277px; /**/ --ab-quote-w: 599px; /**/ --ab-col-w: 402px; /* широка колонка: 30763 · 30765 · 30784 */ --ab-col-narrow: 355px; /* вузька: 30764 · 30766 · 30767…30769 */ /* `--ab-lead-w` не перевизначається: рампа планшетної смуги дає 377 на 1920. */ /* `--ab-cover-title-w` не перевизначається: другий сегмент базової тотожності дає 710 на 1920. */ --ab-cover-note-w: 393px; /**/ --ab-aside-w: 355px; /**/ --fs-ab-h2: var(--fs-h2); /* на D H2 сторінки один на всі три */ --lh-ab-h2: var(--lh-h2); --ab-tail-lead-w: 305px; /**/ --ab-thanks-w: 389px; /**/ --ab-h2-w: 878px; /**/ --ab-final-w: 928px; /**/ } } @media (min-width: 1024px) { :root { --hero-ratio: 1920 / 980; /* стояли базовими на всю смугу. Тепер вони тут, де їм місце. */ --cl-quote-w: 599px; /**/ /* `--cl-lead-w` не перевизначається: рампа планшетної смуги сама дає 332 на 1920. */ --cl-col-w: 402px; /**/ --cl-note-w: 355px; /**/ /* `--cl-title-w` не перевизначається: другий сегмент базової тотожності і є `--hero-title-w`. */ --cl-tile-ratio: 200 / 282; --cl-video-ratio: 1920 / 980; /**/ --cl-quote-top: 88px; /* 1201 − 1113 */ --cl-shots-top: 70px; /* 1479 − 1409 */ --cl-lead-top: var(--section-gap); /* 1861 − 1761: текст під кадрами */ --cl-grid-top: 40px; /* 3437 − 3397 */ --cl-col-step: 24px; /* крок абзаців колонки на десктопі */ /* ОВЕРЛЕЙ ТОВАРІВ: НАБІР ПРАВОЇ КОЛОНКИ ЖИВЕ ТІЛЬКИ ТУТ, бо нижче стіни колонки немає — там канон дає перелік рядками. Усі числа з склад сходиться точно, 149 + 674 + 87 + 130 + 16 + 2 + 22 = 1080. Це ДНО композиції, а не жорстка висота: висоту віддає картка — власної стелі в неї немає саме тому, що «вся вільна висота» на 1080 і є канонні 674. */ --cl-zoom-top: 149px; /**/ --cl-zoom-bottom: 40px; /* низ стрічки до краю вікна */ --cl-zoom-edge: var(--cl-zoom-bottom); /* стрілки й хрестик — на 40 */ --cl-zoom-strip-gap: 87px; /* 910 − 823: картка → стрічка */ --cl-zoom-photo-ratio: 432 / 612; /**/ --cl-zoom-cap-gap: 16px; /* 628 − 612: знімок → підпис */ --cl-zoom-cap-w: 368px; /**/ --cl-zoom-thumb-w: 92px; /**/ --cl-zoom-thumb-h: 130px; --cl-zoom-mark: 84px; /**/ /* Індикатор прокрутки стрічки — НЕ системна смуга. Канон малює його #232221. Системна смуга такої висоти не буває — на Windows вона приблизно вп'ятеро товща. */ --cl-zoom-bar-h: 2px; --cl-zoom-bar-len: 169px; /**/ --cl-zoom-bar-top: 16px; /* 1056 − 1040: смуга під стрічкою */ --cl-zoom-inset: 48px; --cl-doc-h: 1176px; /* висота липкого блока на десктопі */ --cl-pair-ratio: 960 / 490; /**/ --cl-text-fs: var(--fs-lead); --cl-text-lh: var(--lh-lead); /* `--cl-lead-fs/lh` не перевизначаються: рампа планшетної смуги дає 24/28 на 1920. */ /* СТОРІНКА 404, десктопна композиція. Ряд фото ВУЖЧИЙ за контейнер: 280…1640 при контейнері 48…1872, тобто 1360 по центру екрана. Поля по 232 з обох боків — не гутер, а власне поле композиції. Усередині ряду все — частками ЙОГО ширини, і саме тому композиція не ламається на 1024: фото 200/1360 = 14.706 %, зазор 32/1360 = 2.353 %, знак 895/1360 = 65.81 % зі зсувом 232/1360 = 17.06 %. Пікселі тут давали б на 1024 ряд 1360 у контейнері 976 — переповнення втричі. */ --e404-row-w: clamp(772px, calc(772px + 588 * (100vw - 820px) / 1100), 1360px); --e404-shot-w: 14.7059%; /* 200 / 1360 */ --e404-trio-gap: 2.3529%; /* 32 / 1360 */ --e404-glyph-w: 65.8088%; /* 895 / 1360 */ --e404-glyph-x: 17.0588%; /* 232 / 1360 */ --e404-glyph-ratio: 895 / 375; --e404-rise: 7.3529%; /* 100 / 1360 — частка РЯДУ, не контейнера */ /* Ряд десктопа ВУЖЧИЙ за контейнер: 1360 при 1824, поля по 280 від краю вікна. Число не з повітря — це шість слотів по 200 із зазором 32. Нижній край смуги — планшетний контейнер, як і на 404. */ --doc-row-w: clamp(772px, calc(772px + 588 * (100vw - 820px) / 1100), 1360px); --doc-shot-ratio: 200 / 282; /**/ /* СТЕЛЯ КАДРУ РОСТЕ ВИЩЕ 1920 — на 150 до 2560 і далі не росте. До 1920 включно це ті самі канонічні 980, тобто жоден якір не зачеплений. Без цього кадр на широкому екрані лишався б 980 при ширині 2560 — знімок ішов би в різку обрізку, а композиція виглядала б смугою. */ --hero-cap: clamp(980px, calc(980px + 150 * (100vw - 1920px) / 640), 1130px); --quote-cap: clamp(980px, calc(980px + 150 * (100vw - 1920px) / 640), 1130px); } } /* ЧИСЛА ПЛАНШЕТНОГО СКЛАДУ ПЕРШОГО ЕКРАНА ЇДУТЬ РАЗОМ ІЗ НИМ, а не з якорем. ⚠️ У блоці 820 вони дали б смугу 566…819, де розкладка вже планшетна (ряд одним рядком), а числа ще мобільні: «Купити» 223 у ряду, де канон дає 232, і кола 48 замість 56. Пороги тут ті самі, що в правил: 456 — карусель і відео-кадр, 566 — контроли ряду дій. */ @media (min-width: 768px) { :root { --pc-frame-gap: var(--s-16); --pc-frame-pad: var(--s-24); --pc-video-w: 120px; --pc-video-h: 160px; } } @media (min-width: 768px) { :root { --pc-buy-w: 232px; --pc-size-gap: var(--s-16); --pc-round-gap: 26px; --pc-round: var(--btn-round); --pc-btn-h: var(--btn-h); --pc-field-pad: var(--s-24); } } /* На десктопному якорі й ширше все прибите константами: вище нього росте лише порожнеча (guardrails), а не вміст. */ /* ПОРІГ КОМПОЗИЦІЇ КАРТКИ ТОВАРУ — 1025; повний розбір у `components.css` над тим самим порогом. Десктопні числа вмикаються ТУТ, а не на 1920 і не на власному порозі, інакше в смузі стоїть десктопна розкладка з планшетними числами — саме так «Купити» виходило 176 замість 232 при колонці 570. Числа й розкладка переключаються одним порогом або розходяться. */ @media (min-width: 1024px) { :root { --pc-frame-ar: 750 / 1046; /* кадр 750×1046 замість 772×1094 */ --pc-size-gap: var(--s-24); /**/ --pbar-size-w: 184px; /* поле в плитці ширше рівно тут */ /* ПРОМІЖОК ПРАВОЇ ГРУПИ ШАПКИ ТЕЧЕ ВІД СТІНИ ДО КАНОНУ. Число стоїть двічі — зазор групи й поле перед «Кабінетом», — тому воно одне: розійшовшись, вони дали б смугу, де просвіт до меню є з одного боку й немає з іншого. На 1024 пара віддає 32 замість 64 і знімає наїзд іконок у колонку меню; від 1140 — канонічні 32+32. */ --hdr-tools-gap: clamp(16px, calc(16px + 16 * (100vw - 1024px) / 116), 32px); /* ДВІ РАМПИ, ЩО ТРИМАЮТЬ ШАПКУ НА ЇЇ ВЛАСНІЙ СТІНІ (, рішення замовника 22.08 — варіант 1: блок міняє склад, стіна лишається). Обидві виміряні, обидві гаснуть на 1140 — тій самій осі, що й проміжок правої групи, тобто нового порога не зʼявляється. ЗАЗОР МЕНЮ. На 1024 колонки сітки шапки виродились: 24 треки по 10 px, бо 23 зазори по 32 зʼїдають 736 з 976. Меню дістає коробку 217.8, а три пункти із зазором 24 просять 229 — і «Про нас» переноситься у два рядки на 1024…1069. Пункти 52.8 + 58.4 + 67.6 = 178.8, отже із зазором 16 треба 210.8 — влазить із просвітом 7. Кегль пунктів не чіпається: він канонічний. ПОЛЕ ПЕРЕМИКАЧА МОВ. Вордмарк свідомо виходить за свої три колонки, і на 1024 його правий край стає за 1.6 px від «Eng» — тобто просвіт тисне нижче найменшого токена ряду. Доважок 8 на стіні відсуває мову рівно на цей токен; місця для цього вдосталь — між кінцем «Онлайн магазину» (396.8) і початком меню (528) стоїть 131 px. */ --hdr-menu-gap: clamp(16px, calc(16px + 8 * (100vw - 1024px) / 116), 24px); --hdr-lang-nudge: clamp(0px, calc(8px - 8 * (100vw - 1024px) / 116), 8px); } } /* ТОКЕНИ, ЩО ТЕЧУТЬ ДО ДЕСКТОПНОГО ЯКОРЯ, А НЕ СТРИБАЮТЬ НА НЬОМУ. Девʼять чисел нижче доти стояли плоскими до 1919 і стрибали на 1920 — «плоска пара» з ADAPTATION §3.4: на 1900 сторінка мала планшетну шапку 56 при каноні 60. Рампа має ту саму вісь, що й решта чисел проєкту (820 → 1920), тому на обох якорях віддає канон точно, а між ними інтерполює. Блок стоїть у смузі від стіни планшета: нижче неї в цих чисел свої мобільні значення, і глобальне оголошення їх би затерло. Решта 29 оголошень колишнього блоку 1920 знято як ДУБЛІКАТ — їхні clamp уже досягають канонічної стелі рівно на 1920, тобто блок повторював те, що формула й так дає. */ @media (min-width: 768px) { :root { --header-h: clamp(56px, calc(56px + 4 * (100vw - 820px) / 1100), 60px); --logo-h: clamp(28px, calc(28px + 2 * (100vw - 820px) / 1100), 30px); --pair-tabs-top: clamp(35px, calc(35px + 16 * (100vw - 820px) / 1100), 51px); --pair-label-top: clamp(32px, calc(32px + 16 * (100vw - 820px) / 1100), 48px); --hero-pad-y: clamp(32px, calc(32px + 16 * (100vw - 820px) / 1100), 48px); --hero-slides-top: clamp(32px, calc(32px + 16 * (100vw - 820px) / 1100), 48px); --ls-display: clamp(-3px, calc(-3px + 1.4 * (100vw - 820px) / 1100), -1.6px); --fs-sign: clamp(20px, calc(20px + 4 * (100vw - 820px) / 1100), 24px); --lh-sign: clamp(24px, calc(24px + 4 * (100vw - 820px) / 1100), 28px); } } /* ============================================================================ «ОФОРМЛЕННЯ ЗАМОВЛЕННЯ» — ПЛАНШЕТНИЙ ЯКІР (820) і ДЕСКТОПНИЙ (1920). База вище — мобільна. ---------------------------------------------------------------------------- Три набори чисел, а не одна рампа через три якорі: кожне число зняте з власного вузла свого артборда, а перемикаються вони на СТІНАХ РЕЖИМІВ (768 і 1024), а не на виміряному дні блока. Планшет міняє рівно чотири речі: заголовок і його відступ, стрічку мініатюр (84 замість 80) і проміжок між двома кнопками плашки. Решта мобільних чисел проходить у планшет без правки — і це не лінощі, а замір: мітка → контрол, варіант → варіант, секція → секція й рядок підсумку на обох артбордах однакові. ============================================================================ */ /* ДРУГИЙ СЕГМЕНТ РАМП — 820 → 1920, і він стоїть на стіні ПЛАНШЕТА, а не десктопа. Причина не в зручності: `clamp` із підлогою на планшетному значенні віддає рівно це значення на всій смузі 768…820, тобто вмикається без розриву й тримає якір 820 точним. Перший сегмент (у базі вище) веде 375 → 768, тобто добігає до планшетного числа рівно на стіні режиму — так мобільна смуга ніде не отримує чужого числа, а планшетна ніде не отримує мобільного (ADAPTATION §3.7). */ @media (min-width: 768px) { :root { /* Вікно індивідуального замовлення від стіни планшета стоїть на повній ширині 576 — тобто на канонній коробці, — тому й поле обабіч тіла повертається канонне. */ --cust-pad-x: var(--cust-pad); --co-thumb-cols: 4; /* пів форми: 4 × 84 + 3 × 14 = 378 */ --co-panel-gap: var(--s-16); /* 402 → 418 між двома кнопками по 362 */ --co-title-top: calc(clamp(48px, calc(48px + 8 * (100vw - 375px) / 393), 56px) + clamp(56px, calc(56px + 4 * (100vw - 820px) / 1100), 60px) - 56px); --co-title-w: clamp(239px, calc(239px + 247 * (100vw - 820px) / 1100), 486px); --co-head-gap: calc(clamp(40px, calc(40px + 8 * (100vw - 375px) / 393), 48px) + clamp(48px, calc(48px + 32 * (100vw - 820px) / 1100), 80px) - 48px); --co-sec-gap: clamp(24px, calc(24px + 16 * (100vw - 820px) / 1100), 40px); --co-pay-sec-gap: clamp(24px, calc(24px + 18 * (100vw - 820px) / 1100), 42px); --co-label-gap: clamp(16px, calc(16px + 8 * (100vw - 820px) / 1100), 24px); --co-opt-top: clamp(16px, calc(16px + 6 * (100vw - 820px) / 1100), 22px); --co-opt-pad: clamp(16px, calc(16px + 8 * (100vw - 820px) / 1100), 24px); --co-opt-row: clamp(16px, calc(16px + 8 * (100vw - 820px) / 1100), 24px); --co-bare-top: clamp(16px, calc(16px + 8 * (100vw - 820px) / 1100), 24px); --co-form-col: clamp(16px, calc(16px + 16 * (100vw - 820px) / 1100), 32px); /* Спадна рампа: знак списку підповзає до краю рамки, бо рамка росте. */ /* Знак списку — на відступі тексту поля, а не 4 px від рамки на 1920 (власниця, 11.09, D563: «неправильний відступ праворуч»). */ --co-select-inset: var(--field-x); --co-thumb-gap: clamp(16px, calc(16px + 16 * (100vw - 820px) / 1100), 32px); --co-sum-gap: clamp(16px, calc(16px + 8 * (100vw - 820px) / 1100), 24px); --co-panel-top: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); /* Теж спадна, і це не помилка: на 820 примітка стоїть у контейнері 772, на 1920 — у колонці 432. Ширшої коробки їй там просто немає. */ --co-note-w: clamp(414px, calc(615px - 201 * (100vw - 820px) / 1100), 615px); --field-gap: var(--s-16); /* ряд → ряд на 820: 440 → 512 при 56 */ /* «КОНТАКТИ» — другі ділянки тих самих величин. Три з них проходять ЧЕРЕЗ три якорі й записані тотожністю `сегмент1 + сегмент2 − V(820)`, а не другим `clamp`-ом: пара «база + перекривач» обрізала б нижню рампу рівно на стіні 768, і величина стояла б плоско від 768 до 820. */ --ct-title-top: clamp(48px, calc(48px + 12 * (100vw - 820px) / 1100), 60px); --ct-bar-top: calc(clamp(40px, calc(40px + 16 * (100vw - 375px) / 445), 56px) + clamp(56px, calc(56px + 24 * (100vw - 820px) / 1100), 80px) - 56px); --ct-view-top: clamp(24px, calc(24px + 24 * (100vw - 820px) / 1100), 48px); --ct-tail: clamp(48px, calc(48px + 32 * (100vw - 820px) / 1100), 80px); --ct-pair-gap: clamp(8px, calc(8px + 8 * (100vw - 820px) / 1100), 16px); --ct-head-gap: clamp(16px, calc(16px + 16 * (100vw - 820px) / 1100), 32px); --ct-hours-w: clamp(255px, calc(255px + 79 * (100vw - 820px) / 1100), 334px); --ct-map-pad: calc(clamp(24px, calc(24px + 8 * (100vw - 375px) / 445), 32px) + clamp(32px, calc(32px + 16 * (100vw - 820px) / 1100), 48px) - 32px); --ct-shot-w: calc(clamp(80px, calc(80px + 101 * (100vw - 375px) / 445), 181px) + clamp(181px, calc(181px + 19 * (100vw - 820px) / 1100), 200px) - 181px); --ct-shot-h: calc(clamp(116px, calc(116px + 139 * (100vw - 375px) / 445), 255px) + clamp(255px, calc(255px + 27 * (100vw - 820px) / 1100), 282px) - 255px); --ct-btn-h: clamp(56px, calc(56px + 8 * (100vw - 820px) / 1100), 64px); --ct-btn-w: clamp(192px, calc(192px + 24 * (100vw - 820px) / 1100), 216px); --fs-ct-h2: clamp(20px, calc(20px + 12 * (100vw - 820px) / 1100), 32px); --lh-ct-h2: clamp(24px, calc(24px + 12 * (100vw - 820px) / 1100), 36px); /* Спадна рампа, і це не помилка: на 820 примітка стоїть у рядку 216. Ширшої коробки їй там не намальовано. */ --ct-note-w: clamp(414px, calc(530px - 116 * (100vw - 820px) / 1100), 530px); /* ВХІД І КРОК «КОД» — другі ділянки. Величини, що проходять ТРИ якорі, записані тотожністю `сегмент1 + сегмент2 − V(820)`, а не другим `clamp`-ом. */ --auth-band-h: calc(clamp(116px, calc(116px + 139 * (100vw - 375px) / 445), 255px) + clamp(255px, calc(255px + 27 * (100vw - 820px) / 1100), 282px) - 255px); --auth-band-gap: calc(clamp(8px, calc(8px + 8 * (100vw - 375px) / 445), 16px) + clamp(16px, calc(16px + 16 * (100vw - 820px) / 1100), 32px) - 16px); --auth-band-top: clamp(32px, calc(32px + 28 * (100vw - 820px) / 1100), 60px); --auth-head-top: clamp(40px, calc(40px + 40 * (100vw - 820px) / 1100), 80px); --auth-form-top: clamp(16px, calc(16px + 16 * (100vw - 820px) / 1100), 32px); --auth-cta-top: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --auth-cta-h: clamp(56px, calc(56px + 8 * (100vw - 820px) / 1100), 64px); --auth-social-top: clamp(24px, calc(24px + 24 * (100vw - 820px) / 1100), 48px); --auth-social-w: clamp(104px, calc(104px + 16 * (100vw - 820px) / 1100), 120px); --auth-social-h: clamp(56px, calc(56px + 8 * (100vw - 820px) / 1100), 64px); --auth-social-step: var(--s-16); --auth-legal-top: clamp(32px, calc(32px + 8 * (100vw - 820px) / 1100), 40px); /* Спадна: на 820 примітка стоїть у контейнері 772, на 1920 — у колонці форми 896, і канон дає їй там вужчу коробку. */ /* Другі ділянки трьох величин, що проходять ТРИ якорі, — тотожністю, а не другим `clamp`-ом. */ --auth-legal-w: calc(clamp(312px, calc(312px + 199 * (100vw - 375px) / 445), 511px) + clamp(444px, calc(511px - 67 * (100vw - 820px) / 1100), 511px) - 511px); --auth-lead-w: calc(clamp(344px, calc(344px + 256 * (100vw - 375px) / 445), 600px) + clamp(595px, calc(600px - 5 * (100vw - 820px) / 1100), 600px) - 600px); /* Половини форми розсуваються плавно: 16 на 820 → 32 на 1920, а не сходинкою на стіні 1024. */ --auth-col-gap: clamp(16px, calc(16px + 16 * (100vw - 820px) / 1100), 32px); --auth-lead-top: clamp(16px, calc(16px + 8 * (100vw - 820px) / 1100), 24px); --auth-code-top: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --auth-code-gap: var(--s-16); --auth-note-top: calc(clamp(24px, calc(24px + 8 * (100vw - 375px) / 445), 32px) + clamp(32px, calc(32px + 8 * (100vw - 820px) / 1100), 40px) - 32px); --auth-note-fs: var(--fs-body); --auth-note-lh: var(--lh-body); --fs-auth-h: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --lh-auth-h: clamp(28px, calc(28px + 8 * (100vw - 820px) / 1100), 36px); } } /* ⚠️ ТУТ ЛИШИЛОСЬ РІВНО ДВА ЧИСЛА, І ОБИДВА — СТРИБКИ ЗІ СВОЄЇ ПРИЧИНИ, а не недоспущені рампи. На стіні 1024 підсумок ПЕРЕЇЖДЖАЄ з-під форми у власну колонку, тобто міняє сусіда: `--co-aside-top` нижче стіни — це шов «прапорець → кадри» (48), вище — шов «H1 → кадри» (88). Це два РІЗНІ шви, а не одне число на рампі; розтягнути одне в інше означало б рампу між величинами, які не є початком і кінцем однієї відстані (ADAPTATION §3.9: розрив НА порозі зони — норма, розрив усередині зони — дефект). Числа `--co-btn-w` тут більше немає ЗОВСІМ: 192 на 1920 — це і є половина плашки за вирахуванням полів і проміжку ((432 − 32 − 16) / 2), так само як 362 на 820 і 152 на 375. Один механізм віддає всі три якорі, тому число було не канонічним фактом, а записаною наперед відповіддю. */ @media (min-width: 1024px) { :root { --field-h: var(--btn-h); /* 64 — та сама висота, що в кнопки */ /* Кабінет вище стіни — десктопна композиція: меню колонкою, ряд ділиться 650: 896, поля пароля стають парою, кнопки ширші. Числа нижче стіни живуть у базі, бо там ІНША композиція, а не стиснута ця. */ --acc-label-fr: 650fr; /* підпис 326…976 */ --acc-field-fr: 896fr; /* поле 976…1872 */ --acc-actions-top: var(--s-32);/* волосина 1033 → кнопка й примітка 1065 */ --acc-pass-top: var(--s-24);/* низ рядка пароля 912 → пара полів 936 */ --acc-pass-gap: var(--s-32);/* 432 + 32 + 432 = 896 */ --acc-btn-gap: var(--s-16);/* 192 + 16 + 192 */ --acc-btn-w: 192px; /**/ --acc-btn-h: var(--btn-h); --acc-send-w: 216px; /**/ --acc-note-w: 414px; /**/ --acc-area-pad: var(--s-24);/* низ рамки питання 1009 → волосина 1033 */ --field-x: var(--s-24); /* текст поля від краю: 74 − 50 */ --field-gap: var(--s-24); /* ряд → ряд: 629 → 653 і 959 → 1047 */ /* «Контакти»: на стіні режиму карта переходить із плоскої висоти на пропорцію, і шпилька разом із нею — з пікселів на частку кадру. Це стрибок НА порозі зони, а не всередині неї (ADAPTATION §3.9): вище стіни кадр росте разом зі сторінкою, і знак, прибитий до пікселів, зʼїхав би з перехрестя. */ --ct-form-w: 664px; /* 316·2 + 32 — рамка і ряд полів разом */ --ct-pin-x: 46.875%; /* 900 / 1920 */ --ct-pin-y: 39.125%; /* (761 − 448) / 800 */ --ct-pin-w: 3.7419%; /* 71.84 / 1920 */ --ct-hours-fs: var(--fs-lead); --ct-hours-lh: var(--lh-lead); /* Вхід: колонка форми відривається від контейнера й стає власною шириною, смуга кадрів — шістьма слотами замість чотирьох. */ --auth-w: 896px; /* 512…1408 — колонки 3–6 */ --auth-band-w: 1360px; /* 280…1640 = 6×200 + 5×32 */ --auth-cta-w-lg: 224px; /**/ --auth-social-pad: var(--field-x); --auth-eye-pad: 48px; --auth-forgot-pad: 172px; /* значення 143. Вона не залежить від ширини екрана — текст і кегль сталі, — тому нею й резервується місце в правій половині. */ --ct-tel-w: 225px; } } /* СТІНА ДЕСКТОПНОЇ КОМПОЗИЦІЇ ЦІЄЇ СТОРІНКИ — 1180, а не 1024 (`config.json → modes.desktop.pages`). Замовник подивився на 1024 і сказав: «вигляд такий як на 820». Причина видна числом: на 1024 колонка підсумку виходить 218 px при канонних 432, і плашка дій у неї не лізе. Стіна названа ЗАМОВНИКОМ і рухає композицію сторінки ЦІЛКОМ — це та сама стіна режиму, а не виміряне дно окремого блока. */ @media (min-width: 1180px) { :root { --co-aside-top: 88px; /* низ H1 288 → мініатюри 376 */ /* ⚠️ НА НИЖНЬОМУ КРАЮ СМУГИ СІТКА НА 8 КОЛОНОК НЕ ПРАЦЮЄ, і це видно числом, а не на смак: канон ставить форму на колонки 3–5, а підсумок на 7–8, тобто ДВІ ліві колонки лишає порожніми. На 1920 це 464 px порожнечі при формі 664 — задум макета. На 1180 та сама частка дає порожнечу 279 при формі 398 і колонці підсумку 255: пропорція, у якій поля тісні, а кнопка не вміщається. Тому нижче 1920 обидва блоки мають ВЛАСНУ ширину, а порожнеча ліворуч — власну рампу. Три числа сходяться на якорі точно: 464 + 664 + 264 + 432 = 1824, тобто форма стає на 512, а підсумок на 1440 — рівно лінії 3-ї та 7-ї колонок канону. Проміжок між ними лишається вільним (1fr), щоб сума завжди дорівнювала контейнеру. */ --co-form-x: clamp(0px, calc(464 * (100vw - 1180px) / 740), 464px); --co-form-w: clamp(560px, calc(560px + 104 * (100vw - 1180px) / 740), 664px); --co-aside-w: clamp(320px, calc(320px + 112 * (100vw - 1180px) / 740), 432px); } } /* ============================================================================ ДОСТУПНІСТЬ. `prefers-reduced-motion` вимикає ВЕСЬ декоративний рух — не послаблює, а вимикає. Правило стоїть тут, поруч із тривалостями, щоб його не можна було загубити при правці анімацій. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } } /* ЧИСЛА ПАНЕЛІ ЖИВУТЬ НА ТІЙ САМІЙ СТІНІ, ЩО Й САМА ПАНЕЛЬ. Фільтр стає панеллю з десктопної стіни, тож і рампи його розмірів вмикаються там: розійшовшись, вони дали б смугу, де фільтр ще лист, а числа вже панельні — рівно та помилка, яку класифікує. Виміряне дно панелі — 619 (найвужча ширина, де поруч із нею ще вміщається картка каталогу 282). Порогом воно НЕ є: дно всередині смуги — перевірка, а не число в `@media`. Саме тому фільтр і лишається листом до 1024 а не перемикається на власному дні. */ @media (min-width: 1024px) { :root { /* Фільтр: панель замість листа — числа й рампи в шапці блока `--cf-*`. */ --cf-w: clamp(337px, calc(337px + 49 * (100vw - 820px) / 1100), 386px); --cf-pad: clamp(24px, calc(24px + 24 * (100vw - 820px) / 1100), 48px); --cf-cap-top: clamp(24px, calc(24px + 8 * (100vw - 820px) / 1100), 32px); --cf-body-top: clamp(64px, calc(64px + 16 * (100vw - 820px) / 1100), 80px); --cf-thumb-x: clamp(8px, calc(8px + 13 * (100vw - 820px) / 1100), 21px); } }