Сторінка інформації
Тіло сервісної сторінки: рядок «оновлено», колонка прози на мірі читання і картка для того, що не є реченням. Шість сторінок вузла 8.x - «Про нас», «Контакти», «Доставка й оплата», «Гарантія», «Повернення», «Правова інформація» - це один шаблон під шістьма темами.
Розмітка звідси - та сама, що в сірому оригіналі wireframes/content-about.html. Заголовок і .lintro стоять над тілом і належать своїм компонентам; цей файл починається з дати.
Про Stack
Оновлено: 1 липня 2026
Ми - український магазин спортивного харчування. Наша задача проста: провести людину від «хочу досягти результату» до безпечного, зрозумілого набору продуктів.
Хто ми
Stack - це команда, яка любить спорт і розбирається в харчуванні. Кожна картка товару показує склад, дозування, походження й сертифікацію відкрито, а не ховає їх у дрібному шрифті. Докладніше про це - у гарантії та сертифікатах.
Наші принципи
Склад, дозування, походження й сертифікат - це не другорядні деталі, а головне. Спершу знімаємо сумнів, потім пропонуємо купити.
.info-updated - 12, --text-muted. Найтихіший рядок сторінки навмисно: це походження, а не зміст. Стоїть на всіх шести.info-body - --container-text, 68ch. П'ятий читач міри в системі; до 10.6b їх було двоєh3 - 18/700, і відступи несиметричні: 32 згори, 8 знизу. Далеко від того, що скінчилось, близько до того, що починає - через це низка h3 + p читається блоками, а не стіною.info-card - волосина, радіус 12, 16 усередині. Ті самі числа, що в .syscard: це той самий об'єкт на сусідній сторінці, і другий набір чисел для нього був би саме тим дрейфом, проти якого стоїть цей етапКомпонент завели наперед на кроці 12.2 - і половина ставки зіграла: тіло сервісної сторінки закрило всі шість екранів без питань. Друга половина і є урок: шість сторінок виявились не «одним шаблоном під шістьма темами». Нижче те, що дописали два агенти, які на цьому зупинились.
🚚 Нова Пошта
- Відділення по всій Україні
- Трек-номер приходить у SMS
| Спосіб | Термін |
|---|---|
| Відділення | 1-3 дні |
| Кур'єр | 1-2 дні |
- Напишіть намВкажіть номер замовлення
- Відправте товарБудь-яким зручним перевізником
Публічна оферта
1. Предмет договору
Продавець зобов'язується передати покупцеві товар.
Цей компонент замовлено до того, як екран його попросив - перший такий випадок у проєкті, і за рішенням власника: етап 12 роздає 50 екранів субагентам, а те, що потрібне шістьом із них, шестеро вигадали б окремо.
Але цікавіше, чому його не було в системі досі. inventory.md v2 виведений зі стилів, правило за правилом - саме цим виправленням він пишається, і саме воно зробило цю родину невидимою:
Сірий шар малює ці шість сторінок голою структурою без жодного правила. Список, зібраний зіставленням кожного ПРАВИЛА з компонентом, не мав чого зіставляти. Клас без правила не потрапляє в інвентар, виведений зі стилів, - за побудовою, а не через недогляд.
Родина info-* має вісім імен. У систему пішли три. Заміряно по шести сірих оригіналах:
| Клас | Екранів | Куди |
|---|---|---|
info-updated | 6 | сюди |
info-body | 4 | сюди |
info-card | 3 | сюди |
info-toc | 2 → 3 | сюди (batch 3) |
info-stats · info-stat | 1 | ще ні |
info-vals | 1 | ще ні |
info-steps | 1 | ще ні |
Правило сходинки власне й каже: композиція потребує трьох екранів. Нижче цього - це блок свого екрана, і його замовлять тоді, коли той екран збиратимуть; на той момент буде видно, чи це нова річ, чи link-row під місцевим іменем. Побудувати всі вісім зараз означало б вигадати п'ять.
Стан тут один, і він на посиланні в прозі. Картка не клікабельна на жодному з шести екранів, а дата не є контролом - отже станів у них немає, і це записано словами, а не порожньою клітинкою.
Звичайне посилання в прозі: умови повернення - підкреслене, чорнилом сторінки. Наведіть, щоб побачити відповідь.
--text-primary, 700, підкреслення з відступом 2px--text-action за --dur-fast. Робота «відповідь»: відгук, повільніший за 150 мс, уже не відповідьbase.css, компонент свого не оголошуєПідкреслення, а не колір. Акцент у цьому продукті - це дія купівлі, а правова сторінка нічого не продає. Той самий вибір зробив .sys-links a на системних сторінках.
У файлі немає блоку [data-theme="dark"], і це не пропуск. Кожен колір тут - семантичний токен, а семантичний токен уже несе власну пару світло/темрява. Другий блок був би другою редакцією рішення, яке tokens.css уже ухвалив.
Прочитані з info-page.css: 13 семантичних ролей і 34 примітивів. Літералів у файлі немає жодного.
| Семантичні ролі (13) | Примітиви (34) |
|---|---|
--bg-inverse --bg-page --bg-sunken --bg-surface --line-action --line-hair --line-strong --text-action --text-body --text-muted --text-oninverse --text-primary --text-secondary | --container-index --container-text --dur-fast --ease-standard --fs-12 --fs-14 --fs-16 --fs-18 --fs-20 --fs-24 --fs-34 --fw-black --fw-bold --fw-semibold --grid-col-fluid --grid-col-min-panel --grid-gap-fluid --lh-airy --lh-flat --ls-caps --ls-lead --radius-12 --radius-16 --radius-circle --size-20 --size-32 --space-12 --space-16 --space-2 --space-24 --space-32 --space-4 --space-40 --space-8 |
ПОВЕДІНКА НА ШИРИНІ - 12.11
Що робить: покажчик розділів і текст стають однією розкладкою. Нижче точки нічого не змінюється - коробка стоїть у потоці над текстом, як стояла з етапу 04. Від точки.info-layout робиться сіткою у дві колонки, --container-text і --container-index, а коробка їде праворуч і липне під шапку. Від якої точки: 53.75rem = 860px, --bp-shell-wide, вже в реєстрі. Третьої точки не заведено.
Чому саме сюди, і це заміряно, а не вибрано. На
content-delivery при 1280 колонка тексту 686px у рамці 1064: 362px порожнього повітря праворуч від кожного рядка, при 1600 - 498. Сам покажчик має висоту 221px, стоїть на y=342, а документ - 2683: він на екрані першу п'яту частину сторінки і відсутній там, де питання «де я» власне й ставлять. Точку обрано мірою рядка: при 860 сітка лишає тексту 532px (близько 60ch, підлога смуги 60-75), при 820 - 508 (57ch). Тому нижче точки коробка лишається в потоці, а не рейка стискається. Перша колонка це МІРА, і перша редакція писала там 1fr - помилка, виправлена власником, який подивився. Доріжка тягнулась на всю решту ширини, поки --container-text тримав текст на 686, тож відстань між останнім словом і рейкою була 40px на 880 і 1000, 90 на 1280 і 226 від 1440. Щілина, яка потроюється разом з вікном, це не рішення, а доріжка, розміряна залишком. Тепер щілина дорівнює --space-40 на кожній ширині.А далі власник подивився ще раз і сказав центрувати пару - і це рішення РАМКИ, не цього файла. Заголовок, дата, крихти і ряд «Далі» - це СУСІДИ розкладки, тож центрування самої сітки зсунуло б прозу праворуч, поки заголовок, якому вона належить, лишився б на місці. Рухається вся колонка або нічого.
design/_stand.css звужує .wf-page рівно до цієї пари, коли сторінка її несе, і ширина написана відношенням, а не числом: --container-text + --space-40 + --container-index + власні поля рамки. Заміряно на 1600: крихти, h1, лід, проза і ряд «Далі» починаються на 417, рейка закривається на правому краї рамки.
Поточний розділ - НЕ акцентом.
.acc-link[aria-current="page"] малює поточне акцентним чорнилом і має право: там 14px bold на своїй заливці. Тут діє правило DESIGN-artifacts.md §3 - Signal Orange це 3.13:1 на білому, тобто AA лише для великого тексту, а пункт покажчика має --fs-14. Тому акцент з'являється лінією (поверхня з порогом 3:1), а різниця в самому тексті - чорнило, не відтінок. І вага однакова в обох станах: жирніший поточний пункт переносить власний підпис і колонка стрибає на рядок під час прокрутки.
Позначку кладе один прохід на всі носії.
design/system/page-index.js, aria-current="location" (не page: page означає «посилання веде на документ, який ви читаєте», а location - «поточне місце всередині сторінки, наприклад пункт змісту»). Носіїв у продукті чотири: ця коробка, липка смуга пілюль content-legal, ряд чипів content-faq, полиця .pdp-tabs на чотирьох екранах товару і смуга літер brands. Механізм один, бо річ, написана двічі, це дефект, про який у цього файла вже є розділ.
Чого тут не зробили.
content-legal лишає свою липку смугу і на широкій ширині: це рішення 12.10 із заміряною арифметикою шапки під ним, і заміна носія - рішення власника, а не побічний ефект цього кроку. Записано в backlog.md.Сторінка звіряє себе з файлом: 17 власних класів і 0 станів, які вона може назвати, але не показати наживо.
- Сітка карток
.info-vals- контейнер для.info-cardживе на одному екрані; сама картка в системі, її сітка ні - Кроки процесу
.info-stepsі цифри.info-stats- по одному екрану кожен - Жодного кольорового екрана поки що - компонент стоїть у системі раніше за свої сторінки, тож
comp-width.mjsпокаже 0. Це корпус говорить, а не мертвий файл, і те саме сьогодні кажеsystem-page.css