Організм · рівень 3

Футер

Тридцять один екран закінчується цим блоком, і він єдиний організм, який людина бачить на кожному з них. Сімдесят один рядок, і в них дві межі, два оголошення з чужого компонента й одна причина, чому сірий прототип їде вбік на 720.

рівень 3design/system/components/footer.css101 рядок29 селекторів102 оголошення129 екранів

З чого складається

Футер майже нічого не складає: він тримає власну сітку, а всередині неї - рядок посилань, поле розсилки й кнопку, які належать своїм файлам.

Файл	Класів	Які саме
`link-row.css`	2	`.seolink` `.wff-legal`
`field.css`	2	`.field` `.field--s`
`button.css`	1	`.btn--s`

2 класи всередині кореня мають більш ніж одного власника, тож із коду не видно, чий вони: .btn--accent .uiv-ic

Анатомія

Розмітка тут - не переписана від руки. Її знято з design/index.html у цій же сесії, обробники зняті, посилання підняті на рівень.

Показано в рамці шириною 1180, і ширина названа не для краси: це ширина, на якій цей організм у продукті стоїть. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки.

1Смуга довіри .wff-trust - 2 колонки, від 860 чотири, до 619 одна без рамок і фону. Три редакції однієї сітки, і кожна написана окремо. Тут стояло «від 720 / до 479», і це були точки, які крок 10.4 переніс, а ця сторінка не отримала (виправлено 26.08.2026, звірено з footer.css).

2Колонки .wff-cols - одна колонка, від 860 1.5fr repeat(4, 1fr). Саме ця межа тримає A11

3Телефон .wff-phone - 24 / 700 / nowrap. Єдиний елемент футера, який не вміє стискатись. Його колонка на 860 займає 172 у кольорі й 164 у сірому, тобто у кольорі вона ширша - і саме тому він не причина A11. Числа перезаміряні 26.08.2026 і не змінились - хибною була лише ширина, при якій їх названо: на 720 колонок ще немає, там футер в одну колонку на 688.

4Знаки месенджерів - --brand-ink: 16px. Крок 7.16 переписав тут svg{width:16px} на замовлення чорнила: викликач каже, якою має бути фарба, а розмір коробки рахує icon.css

5Іконка довіри .uiv-tc-ic - --size-40, до 619 --size-32. Приїхала сюди з base.css на кроці 5: у базі вона програвала однакову специфічність icon.css і стискалась до 1.05em. Було 27px / --size-24; 26.08.2026 на замовлення власника - при 27 знак читався як маркер перед рядком, а не як якір картки. Висота картки не зросла: 91 при 1280, 132 при 860, 72 при 620 - до і після.

Два оголошення тут не про футер

.fh .ar{ transition:transform .18s ease } у колірному блоці жодного разу не виграє. Заміряно: воно збігається з 280 елементами на сорока екранах, і всі 280 лежать усередині .fgroup - групи фільтра, - де його б'є filter-group.css тим самим селектором на 20 мілісекунд довшим. Футер не малює жодної стрілки: .fh у цьому файлі більше ніде не згадано. Оголошення живе не у своєму файлі, і це видно тільки вирішувачем, бо на екрані воно нічого не змінює.

Стани

Стан	Що робить	Чому так
спокій	посилання `--text-secondary`, фон `--bg-surface`	футер тихіший за сторінку: він завершує, а не кличе
наведення	посилання йде в `--text-action`, перехід 150ms	єдиний власний стан у файлі
фокус	кільце браузера	футер не входить у список тринадцяти селекторів `link-row.css`, які вмикають системне кільце. Питання власника, родина E
до 479	смуга довіри розбирається: рамки, фон і радіус зникають, лишається `inset 0 1px 0` між сусідами	на телефоні чотири картки в рамках з'їдають ширину
720 і вище	смуга довіри в 4 колонки, колонки футера в 5	і саме тут прототип ламається: див. нижче

Межі

У файлі 2 медіа-умови, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.

@media (min-width: 860px)
@media (max-width:619px)

Обмеження

Правила вживання, які називають саме цей компонент: U1 · U2 · U3. Автор правил один, і це architecture.html, розділ I; тут - витяг.

Один підвал на екран. У флоу оформлення і на службових сторінках підвала немає; на п'яти екранах входу шапка є, а підвала немає - це не пропуск, це заміряне правило.

Холостий контроль

Сторінка звіряє себе з файлом: 15 власних класів і 1 стан.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від яких порогів: обох. Що саме міняється: смуга довіри читається 1 → 2 → 4 колонки на двох точках реєстру. Було 479 і 720, обидва поза реєстром. Зміряно: на 600 одна колонка це 568px, на 620 дві по 286, на 860 чотири по 198. Варіант «просто зняти вузьке правило» відкинуто заміром - на 320 дві клітинки по 138px і текст майже подвоює висоту. Ціна названа: 480-619 втрачає ті дві колонки, які має сьогодні, і читається однією.

Рух

Робота: ВІДПОВІДЬ. Рухається: колір посилань підвалу. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них. При prefers-reduced-motion рух зникає, а стан лишається.

Токени

Прочитані з footer.css: 7 семантичних ролей і 21 примітивів.

Семантичні ролі (7)	Примітиви (21)
`--bg-page` `--bg-surface` `--line-hair` `--text-action` `--text-muted` `--text-primary` `--text-secondary`	`--container-page` `--dur-fast` `--ease-standard` `--fs-12` `--fs-14` `--fs-24` `--fw-black` `--lh-airy` `--lh-flat` `--ls-caps` `--ls-display` `--radius-12` `--size-32` `--size-40` `--space-12` `--space-16` `--space-2` `--space-24` `--space-32` `--space-4` `--space-8`

Що знайшов вирішувач

Вирішувач по всіх 23 селекторах: 6 оголошень збігаються з елементами й ніде не виграють. П'ять із них - це transition у чужому файлі, розібраний вище (одне скорочення, п'ять довгих властивостей). Шосте - .wff-tc{ display } зі структурного блоку, яке б'є той самий селектор у колірному: це і є розділ етапу 08, де колір іде другим і виграє навмисне.

A11 · сторінка їде вбік на 720, і винен цей блок

Питання поставлено правильно тільки з другого разу. «Чи є елемент ширший за вікно» - питання неправильне: усередині горизонтального скролера так і має бути. Правильне - чи їде вбік сама сторінка, тобто documentElement.scrollWidth > innerWidth. Заміряно так на 910 парах екран x ширина у двох шарах: 137 пар їдуть, і 129 з них - це рівно ширина 720. Чистих сторінок на 720 п'ятдесят три, і в двадцяти чотирьох із них футерної сітки просто немає, а решта двадцять дев'ять - кольорові. Жоден сірий екран із футером не проходить 720, і жоден кольоровий не падає.

Причина заміряна до числа. На 720 та сама розмітка розкладається в 254.1 105.6 80.7 74.3 164.2 у сірому й у 149.8 116.4 92.9 92.9 172.1 у кольорі: уся різниця в першій колонці, 254 проти 150. Це колонка розсилки, і її min-content справді 254 у сірому й 150 у кольорі - поле дає туди 149 проти 26. При цьому обидва поля рахують однаково: flex: 1 1 0% і min-width: 0px. Отже справа не в цих двох оголошеннях, і наступний замір має бути про внесок поля, а не про його декларації.

Крок 7.84 назвав винним .wff-phone - 23px жирного з nowrap. Це був зовнішній елемент, що переповнює, а не причина: колонка телефону в сірому 164, у кольорі 172, тобто в кольорі вона ширша й нічого не ламає. Виправлено тут.

Немає в коді -> етап 09

Чого бракує

Межа 720 у сірому шарі - A11: 129 сірих екранів їдуть вбік, причина звужена до колонки розсилки, наступний замір названо
.fh .ar не з цього файлу - переїзд у filter-group.css нічого не змінить на екрані, тому це крок 6, а не цей
Своє кільце фокуса - футер поза списком тринадцяти селекторів
Стану «підписка вже оформлена» немає: поле розсилки виглядає однаково до і після

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.