GOLDJAXE UI Kit v4.2 · canonical FINAL · anti-мельчёное + interactive systems

🔒 ЖЕЛЕЗОБЕТОННАЯ канон-спека. Single source of truth для всей графической экосистемы GOLDJAXE Holding. Любой новый элемент / блок / страница / модуль — сначала читать этот документ, потом строить.

🧠 v4.5.0 NEW · Семантическое ядро (primary entry point): Этот файл — синтаксический справочник (классы / параметры / spec). Для decision-making framework (как выбирать / когда применять / что не делать / методология аудита) — читать SEMANTIC-CORE.md + playbook/ (10 разделов · ~4,073 строки). Cold-start новой Claude-сессии в дизайн-теме: SEMANTIC-CORE → 01-mental-models → 02-tokens-canonical → 06-anti-patterns → старт работы. Полный reading paths и triggers — в playbook/10-reentry-anchors.md.

v4.5.0 update (2026-05-06 · Семантическое ядро + Призма 2 finals): Создан structured knowledge tree из 11 файлов (~4,073 строки) в ui-kit/SEMANTIC-CORE.md + ui-kit/playbook/. Apple HIG / Stripe Brand Guidelines / Linear Method подход — принципы first, не справочник классов. Включает Призму 2 finals: footer cream на UI-app academy (page-isolated с !important) + cert paper light в light theme + locked-chip hover fix (race condition · bg + color оба) + сертификат i18n RU/EN с реактивной датой через MutationObserver. CEO 2026-05-06: «обучил его семантическое ядро». Re-entry triggers: «прочти контекст semantic-core» / «делаем аудит [продукта]» / «прочти контекст certificate-canonical» / «прочти контекст light-theme». Memory обновлены: feedback_light_theme_v2.md (academy footer rule) + feedback_certificate_canonical.md (paper light + i18n) + новый feedback_design_system_semantic_core.md + новый feedback_recommend_with_reasoning.md.

v4.4.7 update (2026-05-05 · Path A · Этап 3 Дни 13-14): 5 СРЕДНИХ правок Academy/AI · v4.4.3 checkout.html (hero pt-12→7 · py-12→6 · space-y-6→4 · gap-8→6 · sidebar p-7→5) · v4.4.4 enterprise-form.html (hero pt-12→7 · py-12→6 · space-y-6→4 · gap-8→6 · meta-card 18→14) · v4.4.5 dashboard.html (main py-6→4 · hero-row mb-6→4 · activity 14→10 · upgrade-banner p-5→3) · v4.4.6 billing.html (tier-card 28→18 · 5 inline font-size → CSS classes .billing-num-lg/-xl/-tier-name/-text-sub/-sm · table 6-col → 3-col Дата/Тариф/Сумма · method/tx-id/АКТ в sub-text) · v4.4.7 investor-portal.html (token migration --neon-steel/-light + 12+ hardcoded #4573A1 → var · cap-table 4-col → 3-col Holder/Share/Value · shares в sub-text). 8/13 экранов закрыто (62% Этапа 3). См. memory feedback_academy_refactor_canonical.md.

v4.4.2 update (2026-05-05 · Path A · Этап 3 День 12 · ОТКРЫТИЕ Этапа 3 + 🏆 CERTIFICATE GOLDEN STANDARD): Этап 3 — переделка 13 Academy экранов (v4.4.0 → v4.4.13). День 12 = 3 правки: auth-magic-link Variant D → V3 success-bar pending pattern · courses hero/filters/grid compact (above-the-fold для catalog) · certificate ПОЛНЫЙ SENIOR REDESIGN — cube 64→160 (×2.5, 16% paper), cert-name 58→48, paper 1000→920, double drop-shadow gold (24+48), all margins compact. CEO 2026-05-05: «сейчас сертификат идеален — зафиксируй чтобы не потерять» → раздел 28 ACADEMY CERTIFICATE canonical (~280 строк spec + 11 anti-patterns + 8 шагов decision history). 5 новых closed precedent (55-59). См. memory feedback_certificate_canonical.md (ЗОЛОТОЙ СТАНДАРТ для всех tier L0-L3 + специальные сертификаты).

v4.3.5 update (2026-05-05 · Path A · Этап 2 День 11 · ФИНАЛ Этапа 2): добавлен раздел 27 PAYMENT FAILURE STATES — 3 экрана сбоя оплаты (checkout-failed amber pending · checkout-3ds gold pending · refund-request V3 form). Recoverable семантика (amber pending не red error). 3DS placeholder в стиле бренда (real bank UI рисует банк-эмитент). Reason format = plain RU + JBM bank-код мелко амбер. Refund-request с sidebar info (14 дней / сроки / что не возвращается) — legal-compliant ст. 32 ЗоЗПП РФ. Все 3 fits 1440×900. Закрывает Этап 2 на 100%, открывает Этап 3 (переделка 13 экранов Academy v4.4.0-13). См. раздел 27 + memory feedback_payment_failures_canonical.md.

v4.3.4 update (2026-05-05 · Path A · Этап 2 День 10): раздел 26 AUTH FLOW SYSTEM дополнен 4 admin/общими экранами: auth/session-expired.html (общий L0+admin · gold) + gate-admin/2fa.html (red TOTP 6 cells · 30s rotation) + gate-admin/forgot-password.html (red email reset · 15min) + gate-admin/reset-password.html (red · live-checklist 4 правила + strength meter 4 цвета). Воронка расширена admin-ветками. 5 новых anti-patterns (13-17) + 5 новых decision history шагов (11-15). См. раздел 26.7a-d.

v4.3.3 update (2026-05-05 · Path A · Этап 2 День 9): добавлен раздел 26 AUTH FLOW SYSTEM — полный цикл регистрации L0 (email + 6-значный код · как Anthropic). 4 экрана: signup → verify-code → welcome-l0 → sso-callback. Все fit 1440×900 без скролла. Воронка: signup (V1 480px + Turnstile + 2 чекбокса) → verify-code (V1 520px + 6 input cells + countdown 10min + resend 60s) → welcome-l0 (V3 dashboard + 3 syndicate KPIs + 3-step path-forward) → опционально sso-callback (V1 + animated cube + 3s redirect). См. раздел 26 + memory feedback_auth_flow_canonical.md.

v4.3.2 update (2026-05-05 · Path A · Этап 2 День 8): добавлен раздел 25 ERROR PAGES SYSTEM — 6 экранов ошибок (404/500/403/429/offline/maintenance) на едином V3 status pattern. Все fits 1440×900 без скролла. Серьёзный технический тон (CEO 2026-05-05) · ASCII-art только на 404 · JS-генерация incident-кодов / countdown / ETA. Закрывает 80% production failure modes. См. раздел 25 + memory feedback_error_pages_canonical.md.

v4.3.1 update (2026-05-05 · Path A · Этап 2 День 7): добавлен раздел 24 FAVICON SYSTEM — 7 направлений фавиконов для всех 7 сабдоменов экосистемы через CSS-фильтры на едином master cube. CEO REV 2026-05-01 утвердил 7 фильтров (GOLD/SILVER/CYAN флагманы + 4 secondary). Master CSS получил блок V4.3.1 FAVICON SYSTEM с 7 классами .fav-*. Pre-render через Chrome headless: 28 PNG (7 × 4 размера) + safari-pinned-tab.svg + 7 manifest.json + browserconfig.xml + Windows Tiles + meta-tags spec. См. раздел 24 + memory feedback_favicon_canonical.md.

v4.3 update (2026-05-05 · Path A · Этап 2 День 6): добавлен раздел 23 OG-IMAGES SYSTEM — канон картинок шеринга в соцсетях. 1200×630 PNG · тёмная тема · 5 продуктов × 2 языка через единый master cube + CSS-фильтры. CEO 2026-05-05 «картинки очень крутые просто топ. надписи тоже». 4 новых closed precedent (24-27): размер 1200×630 строгий стандарт + hue через CSS-filter (не 5 PNG-копий) + триадный accent-line «подпись бренда» + двусторонний baseline brand-mark/URL. См. раздел 23 + memory feedback_og_images_canonical.md.

v4.2 update (2026-05-04 · Path A · Этап 1): добавлены 4 интерактивных подсистемы и закрыта светлая тема для V3 dashboard pattern. Конкретно: (1) починка светлой темы success-экранов — .auth-success-bar gradient end + .auth-kpi-tile/-timeline-h light overrides; (2) Form-система — canonical .form-group/.form-input/.form-error/.is-invalid/.is-valid/.is-loading + JS-валидатор (6 правил); (3) Modal-система — native <dialog> + 5 вариантов + JS Promise API + focus trap; (4) Toast-система — 4 типа с auto-dismiss + очередь max 3 + hover-pause; (5) Atomic gaps — checkbox/radio/toggle/avatar (5 размеров)/tooltip (4 направления). См. секцию CHANGELOG v4.2 ниже + 4 новых раздела (19-22). Старая v4.1 спека сохранена как pointer.

v4.1 update (2026-05-04 · CEO «бардак мельчёного»): все размеры < 12px удалены из master CSS (кроме явных chip-class исключений). Подняты captions, tabs, breadcrumbs, kpi-subs, dashboard-stat-cap. Добавлены .h1-org и .h2-org как Marketing-canonical (landing использует их де-факто, но spec v4.0 их не описывал — источник «бардака»). Synced master CSS ↔ landing.html ↔ этот документ. См. секцию CHANGELOG v4.1 ниже.

---

0 · HOW TO USE THIS DOCUMENT (read FIRST)

При создании новой страницы / блока / модуля — этот алгоритм:

┌────────────────────────────────────────────────────┐
│  1. Открыть этот документ (ui-kit-v4.0.md)         │
│  2. Открыть GOLDJAXE-DESIGN-SYSTEM.html (визуал)   │
│  3. Открыть eco-components.css (master CSS)        │
│  4. Найти domain (.eco / .ai / .vis / .vault)      │
│  5. Найти canonical pattern (V1/V3/V4/V6)          │
│  6. Использовать canonical классы (БЕЗ дублей в    │
│     локальных <style>)                             │
│  7. Прогнать Pre-deployment checklist (раздел 11)  │
│  8. Применить privacy-lint перед commit            │
└────────────────────────────────────────────────────┘

Single source of truth chain

Что	Где	Когда читать
Master CSS (все canonical классы)	eco-components.css (~2036 строк)	Перед любой правкой стилей
Этот документ (правила + пояснения)	ui-kit-v4.0.md	Перед созданием любого нового UI
Визуал библиотека (всё в одном HTML)	../GOLDJAXE-DESIGN-SYSTEM.html	Когда нужно «увидеть» компонент
Tokens (CSS variables, fonts)	../tokens/	Только для understanding · не trogать
Production prototype (live экраны)	../ecosystem-prototype/	Reference для customer journeys
Memory feedback (closed prece-dent rules)	/.claude/projects/-Users-a-Documents-GOLDJAXE-claude/memory/feedback_*	При re-entry в design сессию

Запреты железобетонные

• ❌ НЕ дублировать canonical классы в локальных <style> блоках. Если нужный класс есть в master CSS — используй его, не копируй.
• ❌ НЕ создавать новые версии header / footer / cards без расширения этого документа.
• ❌ НЕ trogать deprecated namespaces (.eco-*-c, .mono-cap-*, .h1-dash chains, старый .org-*) — они удалены в v4.
• ❌ НЕ использовать hardcoded colors для text/border/bg где есть var(--text-*) / var(--border-*) / var(--bg-*).
• ❌ НЕ менять canonical размеры (header 77, cube 44, wordmark 17.5, subline 14, status-chip 36) без апдейта v4 doc.

---

0.5 · CHANGELOG v4.2 · что изменилось vs v4.1

Главная задача v4.1 → v4.2

После v4.1 «anti-мельчёного» CEO 2026-05-04 утвердил Path A · Этап 1 — закрыть базовые пробелы UI Kit (формы / окна / плашки / атомарные элементы) до того как переходить к новым экранам. v4.1 описывал hero-typography и pixel-минимумы, но не имел интерактивных подсистем: каждый product-экран лепил свои чекбоксы, формы, диалоги. Дрифт нарастал.

v4.2 — interactive systems lock-in. Шесть точечных изменений за 5 дней (v4.2.0 → v4.2.5):

День	Версия	Контент
1.A	v4.2.0	Светлая тема V3 dashboard (success-экраны) — закрыт «белое на белом»
1.B	v4.2.1	Form-система: .form-group/.form-input/.form-error/.is-invalid/.is-valid/.is-loading + JS-валидатор (6 правил)
2	v4.2.2	Modal-система: native <dialog> · 5 вариантов · JS Promise API · focus trap
3	v4.2.3	Toast-система: 4 типа · auto-dismiss · очередь max 3 · hover-pause
4	v4.2.4	Atomic gaps: checkbox/radio/toggle/avatar (5 размеров)/tooltip (4 направления)
5	v4.2.5	Spec update — этот документ

Принципы v4.2

1. Один canonical класс на каждый паттерн. Если нужен новый — расширяем master, не дублируем локально.
2. Native first — <dialog> для модалов, <input> для форм, :hover/:focus-visible для tooltip. JS — только обвязка.
3. Light theme parity — каждое interactive состояние имеет explicit [data-theme="light"] override с deep-tones (#998018 / #B91C1C / #15803D / #2C5282).
4. Accessibility включена — focus-visible везде, ARIA атрибуты на toasts/modals, prefers-reduced-motion respected, scroll lock на body при modal.
5. Vanilla JS — никаких зависимостей. form-validator.js, modal.js, toast.js — каждый IIFE 100-170 строк.

Точечные изменения v4.1 → v4.2

Что	v4.1	v4.2
.auth-success-bar light theme	gradient end rgba(8,8,8,1) (выглядел как чёрная плашка на bone)	gradient end var(--bg-secondary) + status-bg 0.10–0.12 для контраста
.auth-kpi-tile / -timeline-h light	hardcoded #050505 bg + rgba(255,255,255,*) text	bone bg + #0A0A0A text + #998018 accents
.btn-action / .btn-outline light	white text on bone (невидим)	#998018 deep bronze / rgba(10,10,10,0.85) dark text
.form-input	дублировался локально на 4+ экранах	canonical в master + 7 состояний
Form validation	отсутствовала	form-validator.js + 6 правил + form-уровень submit-блок
Modal pattern	отсутствовал	native <dialog> + 5 вариантов + Promise API
Toast pattern	отсутствовал	4 типа + queue max 3 + hover-pause
Checkbox/Radio	native browser styling	canonical .form-check-mark/.form-radio-mark
Toggle/Switch	отсутствовал	.form-toggle-slider 38×22
Avatar	отсутствовал	5 размеров + group + online dot
Tooltip	отсутствовал	pure CSS 4 направления + delay 300ms

Новые разделы в этом документе

• Раздел 19 · FORM SYSTEM — wrappers / labels / states / errors / validation rules
• Раздел 20 · MODAL SYSTEM — sizes / variants / animations / JS API / focus management
• Раздел 21 · TOAST SYSTEM — durations / queue / actions / hover-pause / ARIA
• Раздел 22 · ATOMIC ELEMENTS — checkbox / radio / toggle / avatar / tooltip

---

0.6 · CHANGELOG v4.1 · что изменилось vs v4.0

Главная проблема v4.0 → v4.1 fix

CEO 2026-05-04 после прокликивания экосистемы: «бардак с мелким текстом, документ не железобетонный». Корень: spec v4.0 описывал только .eco-h1-page clamp(26-36), но landing.html (эталон CEO) использовал .h1-org clamp(38-56) + .h2-org clamp(28-42) — два разных hero-paradigm в системе, ни один не задокументирован полностью. Плюс десятки 9-10px в master CSS (.tab .cnt=10, .role-badge=10, .dashboard-hero-stat-cap=10, .vault-compliance-badge=10, admin "soon"=9, и т.д.) + inline font-size:12px overrides на .eco-cap-xs (declared 11px) повсюду в landing.

Принципы v4.1 («железобетон без мельчёного»)

1. Абсолютный минимум 11px — только для chip-class элементов (status-pill, tier-pill, role-badge, tier-badge, flagman/vip-badge, service-status, course-card-locked chip, vault-compliance-badge, auth-trust-item, dashboard-hero-stat-cap/sub, tab .cnt, filter-count, tab-action). Все они: padding ≤ 5×10, всегда в bordered container, всегда uppercase + ls ≥ 0.10em.
2. 12px минимум для всего остального — captions, labels, tabs, breadcrumbs, KPI subs, table TH, form labels, meta-row, footer caption-org/-link.
3. 9px и 10px ЗАПРЕЩЕНЫ ВЕЗДЕ (в master CSS, в HTML inline, в локальных <style>). Всё что было 9-10px поднято до 11 или 12 per chip/non-chip rule.
4. Inline style="font-size:Xpx" ЗАПРЕЩЁН на body / heading / caption / tab / nav-link / button. Если нужен новый размер — добавить класс в master CSS.
5. Body absolute minimum 14px (eco-body-sm), recommended 15px (eco-body-md) для main content paragraphs.

Точечные изменения v4.0 → v4.1

Класс / спека	v4.0	v4.1	Причина
.eco-cap-xs	11px	12px	Caption minimum
.eco-cap-sm	12px	13px	Sublift для иерархии
.eco-cap-md	14px	14px (keep)	OK
.eco-h1-page	clamp(26-36)	clamp(28-38)	+2px visibility
.eco-h1-page-tight	clamp(22-30)	clamp(24-32)	+2px
.h2-org	clamp(22-38) (master)	clamp(28-42)	Sync с landing эталоном
.h1-org (NEW в spec)	—	clamp(38, 5.2vw, 56)	Marketing hero (был де-факто)
.tab	11px	12px	Always-visible nav
.tab .cnt	10px	11px (chip)	Counter chip
.tab-action	10px	11px (button-chip)	OK chip-class
.role-badge	10px	11px (chip)	OK chip-class
.tier-pill	11px	11px (keep, chip)	OK
.tier-badge	11px	11px (keep, chip)	OK
.status-pill	11px	11px (keep, chip)	OK
.filter-count	10px	11px (chip)	Counter
.breadcrumb	11px	12px	Nav element
.auth-label	11px	12px	Form label
.auth-trust-item	10px	11px (chip)	Trust-row chips
.auth-kpi-sub	11px	12px	KPI sub label
.auth-kpi-cap	12px	12px (keep)	OK caption
.dashboard-hero-cap	11px	12px	Hero caption
.dashboard-hero-progress-meta	11px	12px	Meta label
.dashboard-hero-stat-cap	10px	11px (chip)	Mini-stat chip
.dashboard-hero-stat-sub	10px	11px (chip)	Mini-stat chip
.vault-pricing-table th	11px	12px	Table TH
.vault-compliance-badge	10px	11px (chip)	Compliance chip
.mono-caption-org	11px	12px	Footer caption
.mono-caption-link	11px	12px	Footer link caption
.course-card-locked chip	10.5px	11px (chip)	Lock chip
.admin-sidebar "soon"	9px	11px (chip)	КРИТИЧЕСКОЕ — было 9
.eco-lang-switcher h32 / btn 38×30 / 11.5px	h32/38×30/11.5	h36/44×34/12.5	Sync с landing (touch-friendly)
.eco-theme-btn 34×32	34×32	38×36	Sync с landing
.ai-lang-switcher (master)	h32/38×30/11.5	h36/44×34/12.5	Sync с landing

Новые правила v4.1

1. Все captions / labels / tabs / breadcrumbs / KPI-subs / meta-rows используют canonical классы. Inline style="font-size:..." запрещён.
2. Анти-паттерн добавлен: «9-10px font-size» (раздел 12).
3. Pre-deployment checklist (раздел 11) дополнен пунктом «нет inline font-size меньше 12px на body/heading/caption».
4. Маркер chip-class введён как технический термин — список из ~13 классов где legitimate 11px.

---

1 · 4 NAMESPACES · domain ↔ accent ↔ purpose

GOLDJAXE экосистема имеет 4 visual domain. Каждый имеет свой namespace в master CSS:

Namespace	Domain	Accent color	Purpose	Examples
.eco-*	Product (logged-in apps)	gold #EBC554	Academy / Syndicate / GATE	.eco-header, .eco-cube, .eco-wordmark, .eco-nav-link
.ai-*	Marketing goldjaxe.ai	gold #EBC554	Cash Cow landing, smart-checkout, linkstack	.ai-header, .ai-cube-h, .ai-wordmark, .ai-nav-link, .btn-ai-primary
.vis-*	Vision goldjaxe.com	purple #C44DFF	Personal brand, Music, Investments, Stories	.vis-header, .vis-cube-h, .vis-wordmark, .btn-vision, .vis-h1-luxury, .vis-card-luxury
.vault-*	Vault goldjaxe.org	crimson #8B0000	Enterprise, B2B, Cybersec, DC, Compliance	.vault-header, .vault-cube-h, .vault-wordmark, .btn-vault, .vault-h1-corporate, .vault-pricing-table, .vault-compliance-row

Все 4 namespace используют одинаковую structure (header 77px / cube 44 / wordmark 17.5 / subline 14 JBM Bold) — отличается только accent color + некоторые domain-specific classes.

Trinity neon (footer triad colors)

Связано с domains, но через .tile-* classes (не namespaces):

• .tile-purple → goldjaxe.com Vision (purple #C44DFF)
• .tile-gold → goldjaxe.ai Innovations (gold #EBC554) ← current на all-products triad
• .tile-org → goldjaxe.org Vault (crimson #8B0000)

⚠️ .tile-org это tile color для Vault domain в triad footer. Не путать с .org-* namespace (deprecated, переименован в .ai-* в v4).

---

2 · TYPOGRAPHY · 4 fonts · железобетонные правила

4 fonts loaded (см. tokens/fonts.css)

Font	Use case	Cyrillic-safe?
Inter	Body, h1, h2, paragraphs, кнопки, formy	✅ Yes
Space Mono Bold	Wordmark GOLDJAXE [ X ] (latin only), nav-links (latin only)	❌ NO для cyrillic — теряет hinting
JetBrains Mono Bold	Subline, captions, table headers, status (cyrillic-safe)	✅ MANDATORY для всех cyrillic captions
Space Grotesk	Display headlines (изредка)	✅ Yes

Cyrillic rule (закрытый прецедент №1)

🔒 Cyrillic + Space Mono = всегда нарушение. Любой captions / nav-link / button с кириллицей должен использовать JetBrains Mono Bold или Inter.

Examples: - ✅ class="eco-cap-sm" (JBM Bold) → «▸ В ПРОЦЕССЕ» - ❌ font-family: Space Mono → «▸ В ПРОЦЕССЕ» (cyrillic в Space Mono) - ✅ font-family: 'Space Mono' → «GOLDJAXE [ AI ]» (только latin)

Размеры canonical (v4.1 железобетон)

Class	Size	Letter-spacing	Use
🆕 Marketing hero H1	clamp(38px, 5.2vw, 56px) Inter 700	0.02em uppercase	.h1-org (Marketing landing hero · большие плакаты · «МАШИНА ВАШЕГО ПРЕВОСХОДСТВА»)
🆕 Marketing section H2	clamp(28px, 3.5vw, 42px) Inter 800	-0.005em uppercase	.h2-org (Marketing section h2 · «АРСЕНАЛ ЦИФРОВЫХ АКТИВОВ»)
Page H1	clamp(28px, 3vw, 38px) Inter 800	-0.005em uppercase	.eco-h1-page (Product page h1 · v4.1 +2px)
Page H1 tight	clamp(24px, 2.4vw, 32px) Inter 700	-0.005em sentence	.eco-h1-page-tight (compact heroes · v4.1 +2px)
Header / Footer wordmark	17.5px Space Mono Bold	0.07em	.eco-wordmark / .ai-wordmark / .vis-wordmark / .vault-wordmark
Subline	14px JBM Bold	0.14em	.eco-subline / .ai-subline / etc · uppercase
Footer tagline	14px JBM Bold	0.14em	.eco-footer-tagline (e.g. «INTELLIGENCE · AUTONOMY · PROTOCOL»)
Body lg	17px Inter	normal	.eco-body-lg (recommended для main marketing content)
Body md	15px Inter	normal	.eco-body-md (recommended для product paragraphs)
Body sm	14px Inter	normal	.eco-body-sm (absolute minimum body)
Caption md	14px JBM Bold	0.14em	.eco-cap-md · uppercase · cyrillic-safe
Caption sm	13px JBM Bold	0.10em	.eco-cap-sm (v4.1 +1)
Caption xs	12px JBM Bold	0.14em	.eco-cap-xs (minimum caption · v4.1 +1)
Nav-link	12.5px Space Mono 400	0.14em uppercase	.eco-nav-link (latin only · cyrillic→.eco-nav-link.is-cyr JBM)
Tab	12px JBM Bold	0.10em uppercase	.tab (v4.1 +1)
Breadcrumb	12px JBM Bold	0.10em uppercase	.breadcrumb (v4.1 +1)
Form label	12px JBM Bold	0.14em uppercase	.auth-label (v4.1 +1)
KPI cap	12px JBM Bold	0.14em uppercase	.auth-kpi-cap, .dashboard-hero-cap
KPI val	20-24px Inter 800	-0.005em	.auth-kpi-val, .dashboard-hero-stat-val

🔒 Chip-class — единственное допустимое 11px (v4.1)

Полный список classes где 11px legitimate (все они: padding ≤ 5×10, bordered container, uppercase + ls ≥ 0.10em):

Class	Используется на
.status-pill	Course/transaction status в углу карточки
.tier-pill (+ -l0/-l1/-l2/-l3/-l4)	Tier indicator
.tier-badge	Tier prefix в карточке
.role-badge (+ -root/-ops/-audit)	Admin sidebar role
.flagman-badge / .vip-badge	Top ribbon на price-card (landing.html)
.service-status	"STATUS:ACTIVE" в service-card popup
.course-card-locked .course-thumb::before	"🔒 L1 ONLY" chip на locked card
.vault-compliance-badge	"ISO 27001" / "SOC 2" mini-chips
.auth-trust-item	Trust row в auth-card-red
.dashboard-hero-stat-cap / -stat-sub	Mini-tile cap / sub в hero
.tab .cnt	Counter chip in tab
.filter-count	Counter chip in filter
.tab-action	"+ Filter" / "+ New" small button
.admin-sidebar nav-link::after "soon"	"· soon" inline marker

ВНЕ этого списка 11px ЗАПРЕЩЁН. 9-10px запрещены везде.

Body text absolute minimum: 14px. Captions absolute minimum: 12px. Никаких style="font-size:10px" или text-[10px] или text-[11px] на body/captions/nav/tabs.

Opacity tokens · master CSS truth

6 уровней text hierarchy + 3 уровня borders (значения из master eco-components.css · single source of truth):

Token	Dark theme value	Light theme value
--text-primary	#FFFFFF (100%)	#1a1a1a
--text-secondary	rgba(255,255,255,0.85)	rgba(26,26,26,0.80)
--text-muted	rgba(255,255,255,0.70)	rgba(26,26,26,0.65)
--text-faint	rgba(255,255,255,0.55)	rgba(26,26,26,0.50)
--text-subtle	rgba(255,255,255,0.40)	rgba(26,26,26,0.35)
--text-disabled	rgba(255,255,255,0.30)	rgba(26,26,26,0.25)
--border-strong	rgba(255,255,255,0.20)	rgba(26,26,26,0.20)
--border-default	rgba(255,255,255,0.12)	rgba(26,26,26,0.12)
--border-faint	rgba(255,255,255,0.06)	rgba(26,26,26,0.06)

Запрещено magic numbers (0.78 / 0.92 / 0.65) — только эти 9.

---

3 · COLORS · brand + status + tier

Brand colors

Color	Hex	Use	RGB
Gold primary	#EBC554	Brand action / accent / CTA / focus / current	235,197,84
Gold light	#F8F080	Gradient peak / hover state	248,240,128
Gold deep	#C9A332	Gradient base / dark variant	201,163,50

Status colors (outcome semantics — закрытый прецедент №2)

🔒 Status colors ≠ brand action. Status (green/amber/red) только для outcome indicators (success/pending/error). Brand primary CTA = ВСЕГДА gold .btn-action.

Color	Hex	Use
Success / online	#22C55E (green)	✓ outcomes, online state, completed protocols
Pending / your-move	#EBC554 (amber/gold)	⚠ awaiting action sub-state в KPI tiles
Error / fail / admin	#EF4444 (red)	✗ failed transactions, alerts, L5 admin access (Variant C login)
Info / steel	#4573A1	ℹ neutral info badges, L4 investor tier color

Tier colors (продукт пирамида · L0–L5)

Tier	Color	Hex	Class
L0 Initiate	white-neutral	rgba(255,255,255,0.30) border	.tier-pill-l0
L1 Operator	green	#22C55E	.tier-pill-l1, .tile-green-l1
L2 Architect	purple	#C44DFF	.tier-pill-l2, .tile-purple-l2
L3 Boardroom VIP	crimson	#8B0000	.tier-pill-l3, .tile-crimson-l3
L4 Investor	steel	#4573A1	.tier-pill-l4, .tile-steel-l4
L5 Admin	red (admin alarm)	#EF4444	.role-badge.role-root (gold gradient cube) или admin Variant C login red

Cyber neutrals (dark theme bg ladder)

Token	Hex	Use
--bg-secondary	#080808	Main background page
--bg-primary	#050505	Card/surface (slightly darker для contrast)
--bg-tertiary	#1A1A1A	Border / accent surface
--bg-quaternary	#525252	Stronger border / disabled

---

4 · HEADER · canonical (4 namespaces)

Universal header structure (применимо ко всем 4 namespace)

┌────────────────────────────────────────────────────┐
│ [cube 44] GOLDJAXE [ DOMAIN ]   nav · status · 🌓│
│           SUBLINE 14 JBM            R/E · profile │
└────────────────────────────────────────────────────┘
   77px sticky · backdrop-blur 8px · border-bottom 1px

Specs (точные значения · железобетон)

Element	Value
Height	77px
Background	rgba(18,18,22,0.88)
Backdrop-filter	blur(8px)
Border-bottom	1px solid var(--border-faint)
Logo gap	14px
Logo padding	0 22px (or 20px на product)
Cube	44×44 + drop-shadow 0 0 11px rgba(accent, 0.35)
Cube hover glow	drop-shadow 18px + 32px
Wordmark	Space Mono Bold 17.5px · ls 0.07em · line-height 1
Wordmark accent	gold/purple/crimson per namespace · class .gold или .accent
Wordmark brackets	var(--text-primary) (white в dark) · class .br
Subline	JetBrains Mono Bold 14px · ls 0.14em · var(--text-secondary) · uppercase · margin-top 5px
Nav-link	Space Mono 400 · 12.5px · ls 0.14em · uppercase · padding 0 14px · white-space: nowrap
Nav-link hover	underline 1px accent + glow
Status chip	height 36px · padding 0 12px · white-space: nowrap
Search	height 36px · padding 0 14px · cursor pointer
Lang switcher	height 32px · border 1px · btn 38×30 · Space Mono
Theme button	width 34 · height 32 · border 1px

Header markup (canonical example · .eco-* namespace)

<header class="eco-header sticky top-0 z-40">
  <div class="max-w-[1400px] mx-auto h-full flex items-center justify-between gap-6 px-6">
    <a href="dashboard.html" class="eco-logo">
      <img src="../../../../../brand-system-v1/logos/master/master-transparent-512.png" class="eco-cube" alt="GOLDJAXE" />
      <div class="flex flex-col">
        <div class="eco-wordmark"><span class="gold">GOLDJAXE</span> <span class="br">[ ACADEMY ]</span></div>
        <div class="eco-subline">L0 · MY PROTOCOLS</div>
      </div>
    </a>
    <nav class="eco-nav hidden lg:flex">…</nav>
    <div class="flex items-center gap-3">
      <div class="eco-lang-switcher">…</div>
      <button class="eco-theme-btn">…</button>
      <span class="eco-status-chip">L0 · ACTIVE</span>
      <a href="profile.html" class="eco-profile-btn">С</a>
    </div>
  </div>
</header>

Domain mapping для header

• .eco-* (Academy / Syndicate / GATE Admin): wordmark = [ ACADEMY ] / [ SYNDICATE ] / [ GATE · ADMIN ]. Subline = product context («L0 · MY PROTOCOLS», «// SYSTEM OVERVIEW · LIVE»).
• .ai-* (goldjaxe.ai marketing): wordmark = [ AI ]. Subline = «AI · INNOVATIONS» / «AI · ИННОВАЦИИ».
• .vis-* (goldjaxe.com Vision · future): wordmark = [ VISION ]. Subline = «VISION · LUXURY · MUSIC».
• .vault-* (goldjaxe.org Vault · future): wordmark = [ VAULT ]. Subline = «ENTERPRISE · B2B · COMPLIANCE».

---

5 · FOOTER · canonical

Two footer types (fixed in v4)

A · Full landing footer (used on landing.html)

Full triad (4 tiles purple/gold/crimson) + GOLDJAXE big block + 5 social icons 50×50 + copyright row.

B · Product compact footer (used on academy/syndicate/gate)

Compact triad (3 tiles same Variant A pattern) + minimal logo + copyright.

Triad footer · canonical Variant A

🔒 Закрытый прецедент №3 — никаких brutalist 8px 8px 0 diagonal box-shadows. Только симметричный glow + translateY(-3).

Element	Spec
Tile padding	16px 24px
Background	#181818 (или var(--bg-tertiary) light)
Caption (e.g. "goldjaxe.com")	Space Mono 13px · ls 0.12em · var(--text-primary)
Wordmark [ VISION/INNOVATIONS/VAULT ]	Space Mono Bold 15px · ls 0.08em · var(--text-primary)
Description	Inter 14px · var(--text-muted) · line-height 1.5
Hover	transform: translateY(-3px) + 3-layer симметричный box-shadow 0 0 24px / 0 0 48px / inset 0 0 24px (rgba accent)
CURRENT marker	.triad-current — top-line 2px amber linear-gradient + dot 7×7 right-corner pulsing (triad-current-dot + animation triad-pulse 2s)

Triad markup (canonical)

<div class="triad-grid">
  <a href="https://goldjaxe.com" class="triad-tile tile-purple">
    <div class="triad-caption">goldjaxe.com</div>
    <div class="triad-wordmark"><span class="br">[</span>&nbsp;VISION&nbsp;<span class="br">]</span></div>
  </a>
  <a href="landing.html" class="triad-tile tile-gold triad-current">
    <span class="triad-current-dot"></span>
    <div class="triad-caption">goldjaxe.ai</div>
    <div class="triad-wordmark"><span class="br">[</span>&nbsp;INNOVATIONS&nbsp;<span class="br">]</span></div>
  </a>
  <a href="https://goldjaxe.org" class="triad-tile tile-org">
    <div class="triad-caption">goldjaxe.org</div>
    <div class="triad-wordmark"><span class="br">[</span>&nbsp;VAULT&nbsp;<span class="br">]</span></div>
  </a>
</div>

Footer logo (нижняя часть)

🔒 Footer logo = header sizing (uniform 44/17.5 per UI Kit v4)

Element	Spec
Cube class	.eco-footer-cube (или re-use .eco-cube) — 44×44
Cube glow	drop-shadow(0 0 11px rgba(235,197,84,0.35))
Wordmark	.eco-footer-wordmark — Space Mono Bold 17.5px (= header)
Caption	.eco-footer-tagline — JBM Bold 14px ls 0.14em uppercase (e.g. «INTELLIGENCE · AUTONOMY · PROTOCOL»)
Vertical padding logo row	py-4 (16px)

---

6 · BUTTONS · canonical

Primary CTAs (gold = brand action — single rule)

Class	Use case
.btn-action	Brand primary · gold · everywhere где user должен кликнуть main CTA
.btn-outline	Secondary · neutral border · hover gold

Domain-specific accent CTAs

Class	Color	Use
.btn-ai / .btn-ai-primary	gold	goldjaxe.ai marketing (existing)
.btn-vision	purple #C44DFF	goldjaxe.com primary CTA
.btn-vault	crimson #8B0000	goldjaxe.org primary CTA
.btn-ai-success	green #22C55E	L0 Free CTAs (Academy onboarding)
.btn-ai-vip	purple #C44DFF	L3 VIP / luxury CTAs
.btn-ai-skip	text-only	Skip/dismiss actions

Square brackets style (signature)

Все CTAs используют формат [ ТЕКСТ → ] в square brackets. Visual style — closed precedent.

<a class="btn-action">[ ПРОДОЛЖИТЬ → ]</a>
<a class="btn-outline">[ В DASHBOARD ]</a>

---

7 · CARDS · canonical

Course cards (academy)

• .course-card-big — main course card (24px padding, 14px gap, thumb 112px, icon 80px)
• .course-card-flagman — L2 ★ flagman (gold border + glow)
• .course-card-vip — L3 VIP (crimson border)
• .course-card-locked — locked state (chip top-RIGHT tier-color, gradient overlay)
• .course-card-purchased — purchased (green border)

Service cards (AI-Panel landing)

• .service-card — base (28px padding, brutalist hover)
• Variants: .card-gold / .card-purple (with --card-r/g/b variables)

Auth / Status cards

• .auth-card-gold — passwordless login (Variant A · 460px max-width)
• .auth-card-red — admin login (Variant C · 460px max-width · L5 only)
• .auth-card-wide — confirmation cards (760px max-width · canonical в master)
• .auth-success-bar — V3 dashboard success-bar (compact horizontal · icon 68 + h1 + sub + 2 CTA)
• Variants: .is-success (green) / .is-pending (amber) / .is-error (red) / .is-info (steel)

Dashboard cards

• .auth-kpi-tile — V3 KPI tile (4-column row)
• .auth-timeline-h-step — V3 horizontal timeline step
• .dashboard-hero-action — V4 hero-action card (для academy/dashboard continue-card)
• .dashboard-hero-stat — V4 mini-tile (2x2 grid)

---

8 · INPUTS · canonical (focus white v3.7)

Focus state (закрытый прецедент №7)

🔒 Все inputs :focus = white border rgba(255,255,255,0.55) + caret rgba(255,255,255,0.85). НЕ gold, НЕ box-shadow, НЕ outline, НЕ pure white.

.eco-input { background: transparent; border: 1px solid #525252; color: var(--text-primary); caret-color: var(--text-primary); ... }
.eco-input:focus { border-color: rgba(255,255,255,0.55); caret-color: rgba(255,255,255,0.85); outline: none; box-shadow: none; }

Modifiers

• .eco-input.is-code — code-style input (Space Mono · gold caret · large letter-spacing) для master-keys
• .auth-input — login forms (gold/red border depending на Variant)
• .form-input — generic form inputs (used в checkout forms)

---

9 · TABS / NAV / BREADCRUMB / TIER PILLS

Component	Class	Use
Section tabs	.tabs + .tab + .tab.active + .tab .cnt	Academy profile tabs, gate-admin tabs
Tab action	.tab-action / .tab-action.is-primary	"+ Filter", "+ New" buttons
Breadcrumb	.breadcrumb + .breadcrumb-sep + .breadcrumb-current	Admin/academy navigation
Role badge (admin)	.role-badge + .role-root (gold) / .role-ops (green) / .role-audit (steel)	Admin sidebar bottom
Tier pill (продукт)	.tier-pill + .tier-pill-l0/-l1/-l2/-l3/-l4	Onboarding, courses, profile, syndicate
Status pill	.status-pill + .status-purchased/-locked/-progress/-available/-expired/-refunded	Course status, transaction status

---

10 · 4 PATTERNS · железобетонные templates

V1 · COMPACT FOLD-FIRST

Single-card screens (auth-magic-link, checkout-redirect, locked).

• Container: .auth-card-wide (760px max-width) centered, body normal flow
• Icon ring: .auth-icon-ring.is-compact (88×88) + glyph 46px
• Heading: .eco-h1-page-tight (clamp 22-30)
• Sub: 14-15px Inter var(--text-secondary)
• Actions: .auth-actions-row (gold + outline buttons)

V3 · DASHBOARD-STYLE (info-rich)

Status / completion screens (checkout-success, enterprise-thanks, lesson-completed).

┌─[ .auth-success-bar.is-success ]──────────────────┐
│  ✓ icon 68    H1 + sub                CTAs ───→  │
└────────────────────────────────────────────────────┘
┌─[ .auth-kpi-row · 4 cells ]──────────────────────┐
│  KPI · KPI · KPI · KPI                            │
└────────────────────────────────────────────────────┘
┌─[ .auth-timeline-h · 3-step ]────────────────────┐
│  step 1 ✓   →   step 2 (next)   →   step 3      │
└────────────────────────────────────────────────────┘

Container: .auth-dashboard-container (max-width 1100, padding 32px 24px) Modifier: .is-with-sidebar (для academy/billing, gate-admin/* — full-width main-zone)

V4 · HERO-ACTION (active dashboard)

Для активных user-facing dashboards где continue-action — primary CTA (academy/dashboard).

┌─[ .dashboard-hero-row 1.4fr · 1fr ]──────────────┐
│  [ continue card ]      [ KPI 1 ] [ KPI 2 ]      │
│  (primary CTA           [ KPI 3 ] [ KPI 4 ]      │
│   amber-glow)           (.dashboard-hero-stats)  │
└────────────────────────────────────────────────────┘
[ rest content ]

V6 · OPS DECK HYBRID (admin)

GATE Admin dashboard (Linear+Stripe+Datadog mix).

┌─[ sidebar 64↔240 ]─[ topbar 52 ]─────────────────┐
│   nav-link        │ ⌕ search · live · OPS/CEO   │
│                   ├──────────────────────────────┤
│                   │ KPI strip · 4 metrics + heath │
│                   ├──[ queue 38% ]─[ tabs 62% ]──┤
│                   │  action queue │ live data    │
│                   │  · pri        │ table        │
│                   │  · gold       │ (sticky head)│
└───────────────────┴──────────────────────────────┘

---

11 · PRE-DEPLOYMENT CHECKLIST · v4 FINAL

Перед публикацией нового экрана / блока — пройти этот checklist:

A · Подключение

• [ ] <link rel="stylesheet" href="…/tokens/fonts.css"> в <head>
• [ ] <link rel="stylesheet" href="…/tokens/design-tokens.css"> в <head>
• [ ] <link rel="stylesheet" href="…/ui-kit/eco-components.css"> в <head>
• [ ] Anti-flash theme + lang script в <head> до first paint

B · Header

• [ ] Использует canonical .eco-header / .ai-header / .vis-header / .vault-header (не дублирован локально)
• [ ] Height 77px / cube 44 / wordmark 17.5 / subline 14 JBM Bold
• [ ] Cube link к /home (logo clickable)
• [ ] nav-link white-space: nowrap + padding 0 14px

C · Captions / typography (v4.1 anti-мельчёное)

• [ ] Cyrillic captions используют JBM Bold (.eco-cap-md/sm/xs · classes из master)
• [ ] Body text ≥ 14px (.eco-body-sm minimum) · recommended ≥15px
• [ ] H1 — .eco-h1-page (clamp 28-38) или .eco-h1-page-tight (clamp 24-32) или .h1-org (Marketing hero clamp 38-56)
• [ ] Captions ≥ 12px (.eco-cap-xs minimum)
• [ ] Tabs ≥ 12px (.tab)
• [ ] Form labels ≥ 12px (.auth-label)
• [ ] Никаких inline style="font-size:Xpx" где X < 12 на body/heading/caption/tab/nav-link/button
• [ ] Никаких 9-10px нигде, кроме explicit chip-class из секции 2 (раздел «Chip-class — единственное допустимое 11px»)
• [ ] Если 11px используется — это ТОЛЬКО chip-class (status-pill, tier-pill, role-badge, tier-badge, flagman/vip-badge, service-status, course-card-locked chip, vault-compliance-badge, auth-trust-item, dashboard-hero-stat-cap/sub, tab .cnt, filter-count, tab-action, admin-sidebar "soon")

D · Colors

• [ ] Text colors используют var(--text-*) (НЕ hardcoded rgba(255,255,255,X))
• [ ] Border colors используют var(--border-*) (НЕ hardcoded)
• [ ] Bg surfaces используют var(--bg-*) (НЕ hardcoded)
• [ ] Brand/Status/Tier colors — hex preserved (не trogать)

E · CTAs

• [ ] Primary CTA = .btn-action (gold) или domain-specific (.btn-vision/.btn-vault/.btn-ai-primary)
• [ ] Secondary CTA = .btn-outline
• [ ] Square brackets format [ ТЕКСТ → ]
• [ ] Status colors не используются как CTA color (closed precedent)

F · Footer triad

• [ ] Variant A canonical (translateY(-3) + симметричный glow · НЕ brutalist 8x8)
• [ ] Current tile имеет <span class="triad-current-dot"> + class .triad-current
• [ ] EXPLORE / CURRENT LOCATION тексты удалены (closed precedent)

G · Footer logo

• [ ] Cube 44 + wordmark 17.5 (= header sizing · uniform)
• [ ] Tagline JBM Bold 14px ls 0.14em (.eco-footer-tagline)
• [ ] 5 social icons обязательны: Instagram → Telegram → Facebook → X → YouTube

H · Light/dark + mobile

• [ ] Открыть в Chrome → toggle theme (RU/EN switcher) → screen looks ok в обоих
• [ ] Resize viewport до 375px / 768px / 1024px / 1440px → не ломается
• [ ] CSS var() все определены (no fallback unstyled)

I · Compact-fold (для status / dashboard / single-purpose screens)

• [ ] Fits в 1440×900 viewport без vertical scroll (если применимо)
• [ ] Использует canonical V1 / V3 / V4 / V6 pattern (master CSS)
• [ ] Не дублирует pattern в локальном <style>

J · Privacy + commit

• [ ] python3 /claude/scripts/lint-privacy.py прошёл (0 new markers)
• [ ] Команда make done type=<тип> msg="…" после CEO утверждения
• [ ] Никаких личных финансов / дат поездок CEO / КИК-статусов

---

12 · ANTI-PATTERNS · НИКОГДА не делать

Список закрытых прецедентов · повторение = регресс:

1. ❌ Cyrillic в Space Mono (closed #1) — всегда JBM Bold для cyrillic captions/buttons
2. ❌ Status color как primary CTA (closed #2) — gold .btn-action всегда
3. ❌ Brutalist 8×8 box-shadow на triad hover (closed #3) — Variant A симметричный glow
4. ❌ 9-10px font-size где-либо (v4.1 closed #17) — полный запрет, кроме явно перечисленных chip-class элементов где 11px legitimate
5. ❌ Inline style="font-size:Xpx" где X<12 на body / heading / caption / tab / nav-link / button (v4.1 closed #18) — minimum 14px body, 12px caption, 11px chip
6. ❌ Body < 14px — minimum 14px (eco-body-sm)
7. ❌ Caption < 12px (v4.1) — minimum 12px (eco-cap-xs)
8. ❌ Tab < 12px (v4.1) — .tab minimum 12px
9. ❌ .h1-dash/login/syn/admin/inv/checkout — deprecated, используй .eco-h1-page
10. ❌ .mono-cap-xs/sm/.mono-cap — deprecated, используй .eco-cap-xs/sm/md
11. ❌ Hardcoded rgba(255,255,255,X) на text/border — используй var(--text-*) / var(--border-*)
12. ❌ .eco-*-c namespace — deprecated v4, удалён · используй прямо .eco-*
13. ❌ .org-* namespace — deprecated v4, переименован в .ai-* · никогда не возвращай
14. ❌ Big icon-ring 140×140 на dashboard pages — используй success-bar 68×68 horizontal
15. ❌ EXPLORE → / CURRENT LOCATION тексты в triad — удалены, используй pulse-dot
16. ❌ Тестовые status-chip 30px — canonical 36px
17. ❌ Локальные дубликаты canonical классов в <style> — используй master
18. ❌ Magic opacity values (0.78 / 0.92 / 0.65) — только 5 канонических уровней
19. ❌ 2-tier архитектура (header 62/72px) — отменена, единый 77px
20. ❌ mb-12 py-12 font-size:18px на single-purpose экранах — создаёт «чёрные дыры»
21. ❌ lang-switcher h32 / btn 38×30 / 11.5px (v4.1 deprecated) — canonical h36 / 44×34 / 12.5px (touch-friendly)
22. ❌ theme-btn 34×32 (v4.1 deprecated) — canonical 38×36

---

13 · BEHAVIOR RULES · railroad

При создании любого нового UI элемента — следуй этим правилам:

Rule 1 · First read this doc

Никаких exception'ов. Каждый раз при создании новой страницы / блока / компонента — открыть этот документ + master CSS + GOLDJAXE-DESIGN-SYSTEM.html.

Rule 2 · Найти canonical pattern перед созданием нового

Если pattern уже есть (V1 compact / V3 dashboard / V4 hero-action / V6 admin) — используй его. Не создавай свой.

Rule 3 · Расширение canonical = только через v4 update

Если нужен принципиально новый pattern (не описан в v4) — это commit с расширением UI Kit v4. CEO утверждает.

Rule 4 · Domain-first выбор namespace

Перед версткой определи — это product (.eco-*), marketing AI (.ai-*), Vision (.vis-*) или Vault (.vault-*)? Используй правильный namespace.

Rule 5 · Pre-deployment checklist обязательный

Не commitить без всех ✅ в checklist раздела 11.

Rule 6 · Documentation update

Если что-то новое добавлено в master CSS — обновить ui-kit-v4.0.md (этот документ). Single source of truth.

---

14 · MIGRATION · что делать со старыми экранами

Если на проекте остались старые экраны (deprecated namespaces, hardcoded colors):

Migration path

1. Identify: grep -l ".eco-*-c\|mono-cap-xs\|class=\"org-" *.html
2. Replace через targeted Edits или sed
3. Verify через Chrome screenshot
4. Test light + dark themes
5. Commit с reference на этот doc

Что считается deprecated в v4

• .eco-*-c namespace → .eco-*
• .mono-cap-* → .eco-cap-*
• .h1-dash/login/syn/admin/inv/checkout → .eco-h1-page
• .org-* (для goldjaxe.ai marketing) → .ai-*
• .gold-wordmark (clamp 28-37) → удалён, не используется
• Hardcoded rgba(255,255,255,X) → var(--text-*)

---

15 · PRODUCTION INTEGRATION · Артём React port

Когда Артём портирует prototype в Next.js production:

Stack

• Next.js 14 + React 18
• Tailwind CSS v3 (preset из tokens/tailwind-preset.cjs)
• shadcn/ui (если нужны headless components)
• Internationalization: next-intl (словари из ui-kit/i18n/ru.js + en.js)

React component mapping

Prototype HTML	React component
Header (any namespace)	<EcoHeader domain="ai|eco|vis|vault" />
Footer triad + GOLDJAXE block	<EcoFooter />
Auth Variant A login	<AuthCardGold />
Auth Variant C admin login	<AuthCardRed />
V1 compact status	<StatusCardCompact variant="success|pending|error|info" />
V3 dashboard	<DashboardSuccessBar /> + <DashboardKpiRow /> + <DashboardTimelineH />
V4 hero-action	<DashboardHeroAction /> + <DashboardHeroStats />
V6 admin	<AdminLayout sidebar={…} topbar={…} mode="ops|ceo" />

Steps для Артёма

1. Скопировать tokens/ + ui-kit/eco-components.css в Next.js public/styles/
2. Импортировать в _app.tsx или globals.css
3. Создать React components per mapping выше (используя classes из master)
4. Реализовать customer journeys per cross-domain-ux-spec.md
5. SSO через NextAuth (Academy = главный IdP)
6. Подключить MCP server для автоматизации (см. раздел 16)

---

16 · MCP INTEGRATION · автоматизация design system

GOLDJAXE Design System включает MCP server (планируется), который позволит Claude напрямую вставлять canonical components в production code.

Что MCP server делает

• Читает eco-components.css + этот doc
• Знает все canonical classes + variants
• При запросе «add button» — генерирует правильную JSX с .btn-action или .btn-vision/.btn-vault
• При запросе «add header» — выбирает правильный namespace (.eco/.ai/.vis/.vault)
• При запросе «add status screen» — выбирает V1/V3 pattern + правильные tiles
• Pre-flight check: запускает privacy-lint + checklist перед commit

Как Артём подключит MCP

См. ../GOLDJAXE-DESIGN-SYSTEM.html секцию «Artyom MCP integration» (созд. в Phase 5 железобетонизации) — там будут пошаговые инструкции.

---

17 · APPENDIX · history reference

Versioning chain (append-only)

Version	Date	Что добавлено / изменено
v1.0	2026-04-15	Initial design system
v2.0	2026-04-26	Inter в headings (отказ от Space Grotesk), triad footer canonical
v2.1	2026-04-29	Master cube + 7 favicon variants
v2.4	2026-05-01	.org-proportions copy 1:1 (header h=55, triad 21×34) — deprecated v3
v3.0	2026-05-02	UI Kit canonical, ecosystem-prototype init, light theme v1
v3.1	2026-05-02	Subline JBM Bold (cyrillic fix)
v3.2	2026-05-03	Header unified 77px (2-tier отменён) · nav nowrap padding 14
v3.3	2026-05-03	Body text canonical eco-body-lg/md/sm · eco-cap-md/sm/xs · cyrillic→JBM везде
v3.4	2026-05-03	Auth screens · Variant A gold passwordless + Variant C red admin
v3.5	2026-05-03	Single-card screens canonical
v3.6	2026-05-03	Status screens · V1 compact + V3 dashboard
v3.7	2026-05-03	Input focus white v3.7 (НЕ gold)
Light v2	2026-05-03	Light theme premium (off-white #FAFAF7 + bronze #998018 + Stripe-pattern footer)
V4 hero-action	2026-05-04	.dashboard-hero-action pattern (academy/dashboard)
V6 admin	2026-05-04	OPS Deck Hybrid (gate-admin/dashboard production)
Light theme distribution v3	2026-05-04	1,297 replacements hardcoded → var(--text-*) on 34 files
v4.0	2026-05-04 (AM)	Железобетонизация · namespace rename .org→.ai · added .vis-* (Vision .com) + .vault-* (Vault .org) · cleanup deprecated · canonical V4 additions · этот doc как single source of truth
v4.1	2026-05-04 (PM · CEO «бардак мельчёного»)	Anti-мельчёное audit · все 9-10px удалены из master · captions поднят (cap-xs 11→12 / cap-sm 12→13) · h1-page clamp(26-36)→clamp(28-38) · h1-page-tight clamp(22-30)→clamp(24-32) · добавлены .h1-org (clamp 38-56) и .h2-org (clamp 28-42) как Marketing-canonical (был де-факто на landing, не в spec) · tab/breadcrumb/auth-label/kpi-sub поднят до 12 · chip-class список зафиксирован (только 11px legitimate) · lang-switcher unified 36/44×34/12.5 · 51 HTML-экран приведён к canon
v4.2 ← (this)	2026-05-04 (PM · Path A · Этап 1 · CEO утвердил)	Interactive systems lock-in через 6 точечных версий v4.2.0–v4.2.5 за 5 дней. (1) v4.2.0 светлая тема V3 dashboard fix · (2) v4.2.1 Form-система + JS-валидатор · (3) v4.2.2 Modal-система native dialog · (4) v4.2.3 Toast-система с очередью · (5) v4.2.4 atoms checkbox/radio/toggle/avatar/tooltip · (6) v4.2.5 spec update (этот документ). 4 новых раздела (19-22). Старая v4.1 спека → pointer.

Superseded documents (не использовать для new work)

• ../ecosystem-style-guide.md v2.4 — content устарел (header 55→77, triad 21×34→16×24, etc)
• ui-kit-v3.0.md — historical changelog (содержит разделы v3.0-v3.7)
• ../_archive/previews-2026-05-01/ — frozen mock-страницы

Related canonical docs

• ../academy-course-style.md — Academy курсы branding (видео/слайды/cert) — independent
• ../syndicate-theme-spec.md — Discourse brand-layer для syndicate.goldjaxe.ai — independent
• ../cross-domain-ux-spec.md — SSO + cross-product navigation — referenced by auth.js

---

18 · NEXT FOR CEO

После v4.2 lock-in · следующие phases:

• [x] v4.2.0–v4.2.5 · Path A · Этап 1 · готово 2026-05-04 — interactive systems lock-in (Forms / Modals / Toasts / Atoms) + light theme V3 dashboard
• [ ] Path A · Этап 2 (v4.3.x) — OG-images + 7 favicon CSS-фильтров + 6 экранов ошибок + 8 auth-экранов + 3 экрана сбоев оплаты
• [ ] Path A · Этап 3 (v4.4.x) — переделка 13 проблемных экранов Academy (lesson-quiz / profile / lesson-viewer / onboarding и др.)
• [ ] Phase 5 · GOLDJAXE-DESIGN-SYSTEM.html (единый визуальный standalone document) · WIP
• [ ] Phase 6 · wiki integration + memory updates (re-entry "first read this")
• [ ] Phase 7 · Artyom MCP integration guide
• [ ] Phase 8 (future) · удалить master CSS Light v2 EXTENSION block (после testing period 1-2 недели)
• [ ] Phase 9 (future) · cleanup local дубликатов на 49 экранов (49 files × ~50 строк = ~2500 строк removed) — Артём сделает через React port

---

19 · FORM SYSTEM · canonical (v4.2.1)

Единый стандарт форм. Раньше .form-input / .form-label дублировались локально на 4+ экранах. Теперь — master CSS блок «V4.2.1 FORM SYSTEM» (~210 строк) + ui-kit/form-validator.js.

Anatomy

<form data-validate-form>
  <div class="form-row">                <!-- 2 колонки на desktop, 1 на mobile -->
    <div class="form-group">            <!-- wrapper одного поля -->
      <label class="form-label is-required">Email</label>
      <input class="form-input" type="email"
             data-validate="required|email" />
      <div class="form-error"></div>    <!-- появится при is-invalid -->
    </div>
    …
  </div>
  <div class="form-actions is-end">     <!-- кнопки внизу формы, right-align -->
    <button type="reset" class="btn-outline">[ ОЧИСТИТЬ ]</button>
    <button type="submit" class="btn-action">[ ОТПРАВИТЬ → ]</button>
  </div>
</form>

Wrappers

Class	Layout
.form-group	display:block · margin-bottom:18px (одно поле + label + error)
.form-row	grid · 2 columns · gap:14 · margin-bottom:18 (мобильный → 1 col)
.form-row-3	grid · 3 columns · gap:14 · margin-bottom:18 (мобильный → 1 col)
.form-actions	flex · gap:10 · margin-top:24 · wrap (.is-end → right-align)

Label

Class	Spec
.form-label	JBM Bold 12 · ls 0.14em · uppercase · var(--accent-amber) · margin-bottom 6
.form-label.is-required::after	* красная — #EF4444 (light: #B91C1C)
.form-label-sub	inline · Inter 12 normal · var(--text-muted) (для «(опционально)», «(минимум 8)»)

Input states (закрытый прецедент)

State	Visual	Когда применяется
empty	placeholder visible · neutral border #525252	default, нет value
:focus	border rgba(255,255,255,0.55) · caret 0.85 · NO outline NO glow	пользователь в поле (canonical white v3.7)
filled	border neutral · текст visible	есть value, не focused
.is-invalid	border #EF4444 · bg rgba(239,68,68,0.05) · .form-error показан	ошибка валидации после blur
.is-valid	border #22C55E · bg rgba(34,197,94,0.04) · ✓ check inline SVG справа · padding-right 36	прошёл валидацию
:disabled / [aria-disabled="true"]	opacity 0.55 · pointer-events:none	программно недоступно
.is-loading	spinner inline SVG амбер справа · animateTransform rotate 0.9s	async-проверка идёт

Messages

Class	Visual
.form-help	Inter 13 muted · margin-top 6 · нейтральная подсказка
.form-error	display:none (показ через .is-visible) · красная плашка border-left:2px #EF4444 · bg 10% · ⚠ ::before · 13px line-height 1.4
.form-success	то же что error но зелёный · ✓ ::before

JS validator (ui-kit/form-validator.js)

<input class="form-input" name="email"
       data-validate="required|email"
       data-validate-msg="Введите корп. email"  <!-- кастомное -->
/>

6 правил (pipe-separated, args через :):

Правило	Аргумент	Дефолтное сообщение
required	—	«Обязательное поле»
email	—	«Неверный формат email»
minlength:N	число	«Минимум {n} символов»
maxlength:N	число	«Максимум {n} символов»
pattern:regex	regex literal	«Неверный формат»
match:fieldName	имя другого input в форме	«Поля не совпадают»

Logic: первая проверка после blur, далее на каждый input. До первого blur — нейтральное состояние (не пугаем сразу).

Form-уровень submit-блок: <form data-validate-form> — submit отменяется если любое поле невалидно, фокус ставится на первое invalid.

API: - window.FormValidator.validate(form) → boolean - .validateField(input) → {valid, message?, rule?} - .attach(root) — re-scan после dynamic insert - .setState(input, result) — программно

Anti-patterns форм

• ❌ Локальные дубликаты .form-input стилей в <style> блоках страниц — используй master.
• ❌ Native <input required> атрибут как замена JS-валидации — браузерные tooltip некрасивы. Используй data-validate="required".
• ❌ Показ ошибок до первого blur — пользователь видит «Обязательное поле» сразу, ещё не успев попытаться ввести. Wait for blur.

Light theme overrides (автоматически)

#0A0A0A type · #998018 labels · #B91C1C errors · #15803D success · bone bg #FAFAF7. Все через [data-theme="light"] selectors.

---

20 · MODAL SYSTEM · canonical (v4.2.8 · F-canonical · 1-в-1 .auth-success-bar)

Единый стандарт диалоговых окон на основе native <dialog>. Master CSS блок «V4.2.8 MODAL SYSTEM» (~220 строк) + ui-kit/modal.js.

v4.2.8 finalize (F-canonical · CEO 2026-05-05 «очень хорошо получилось»): 1. Typography 1-в-1 в эталон .auth-success-cap / .auth-success-h1 / .auth-success-sub (V3 success-bar). v4.2.7 ошибочно использовал V1-pattern (.eco-cap-sm 13/0.10em + .eco-h1-page-tight clamp 24-32) — расхождение с canonical. 2. F-canonical раскладка (premium spacious symmetry): card 620 default, body center, кнопки одной ширины через min-width 220 + padding-x 32 + gap 16. Полная симметрия cap + h1 + body + actions всё центру. CEO выбрал F из 6 вариантов экспериментов (A/B/C по выравниванию, D/E/F по габаритам кнопок).

Anatomy

<dialog class="modal-card is-confirm" id="my-modal">
  <button class="modal-close" data-modal-close aria-label="Закрыть">×</button>
  <div class="modal-cap">▸ ПОДТВЕРЖДЕНИЕ</div>
  <h2 class="modal-h1">Удалить курс?</h2>
  <div class="modal-body">
    <p>Это действие <strong>нельзя отменить</strong>.</p>
  </div>
  <div class="modal-actions is-end">
    <button class="btn-outline" data-modal-close>[ ОТМЕНИТЬ ]</button>
    <button class="btn-action is-danger" data-modal-confirm>[ УДАЛИТЬ ]</button>
  </div>
</dialog>

Sizes (через class на <dialog>)

Class	max-width	padding
default	620px (F-canonical)	40×40
.is-lg	760px	48×56

Mobile (≤640px): padding сжимается до 32×24 (default) / 36×28 (.is-lg).

.is-md упразднён в v4.2.8 (был 620 = теперь default). Если в legacy markup остался is-md — игнорируется без эффекта.

Variants (2px coloured border + glow всё периметр)

Class	Accent	Use case
.is-confirm	red #EF4444	destructive (удалить курс / отменить подписку)
.is-info	steel #4573A1	нейтральное уведомление (Magic Link отправлен)
.is-success	green #22C55E	подтверждение успеха (лид добавлен в Kommo)
.is-error	red #EF4444	ошибка (503 / network error)
.is-form	amber #EBC554	форма внутри модала · cap/h1/body center · поля и лейблы left · кнопки flex:1 (50/50 split match form-row)

Вид формируется через CSS-переменные --auth-bg (фон 4% accent) / --auth-border (2px) / --auth-glow (свечение 60px). Тот же механизм что у .auth-card-gold/-red/-confirm/-status.

Header / Body / Actions

Class	Spec
.modal-cap	JBM Bold 12 · ls 0.14em · uppercase · цвет per variant · margin-bottom 6 (canonical .auth-success-cap)
.modal-h1	Inter 800 · clamp(22, 2.4vw, 28) · uppercase · ls -0.005em · margin 0 0 6 (canonical .auth-success-h1)
.modal-body	Inter 14 · lh 1.5 · rgba(255,255,255,0.70) · CENTER во всех variants включая .is-form (унификация v4.2.8) · <strong> amber (canonical .auth-success-sub). Body должен быть 1-2 предложения — длинные описания не помещаются в центр-выравнивание. В .is-form элементы <form> (label/input) остаются left для читаемости.
.modal-actions	flex · gap 16 · margin-top 28 · wrap · justify-content center (включая .is-form · CEO 2026-05-05 «кнопки не центрированы — исправь»)
.btn-action / .btn-outline (внутри .modal-actions)	F-canonical: min-width 220 + padding-x 32 + center text. Обе кнопки одинаковой ширины через min-width — симметрия пары. Override для .is-form: flex: 1 + min-width: 0 + gap: 14 → кнопки делят ширину пополам = match с form-row (~263px каждая, симметрия с полями Имя/Email).
.modal-close	32×32 · top 14 right 14 · × glyph · hover/focus-visible states
.btn-action.is-danger	red filled (#EF4444 bg + #080808 text) + glow для destructive confirm

Backdrop

.modal-card::backdrop {
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(4px);
}

Light theme: rgba(0,0,0,0.45) (мягче).

Animations

• Card open: goldjaxe-modal-in 220ms ease-out · scale(0.98)→1 + translateY(8)→0
• Backdrop open: goldjaxe-backdrop-in 200ms ease-out · opacity 0→1
• Close: native dialog handles · animation на close не делается (сразу скрытие)
• prefers-reduced-motion: reduce — animations отключены

JS API (ui-kit/modal.js)

// Promise-API:
const result = await GoldjaxeModal.open('confirm-delete');
if (result === true) deleteResource();    // data-modal-confirm clicked
else if (result === null) cancel();        // data-modal-close, ESC, click-outside
else if (typeof result === 'string') {     // data-modal-result="value"
  handleCustom(result);
}

// Programmatic close:
GoldjaxeModal.close('confirm-delete', someResult);

Auto-triggers (data-attributes)

Attribute	Действие
data-modal-open="id"	Открыть <dialog id="id">
data-modal-close	Закрыть текущий dialog с result=null
data-modal-confirm	Закрыть текущий dialog с result=true
data-modal-result="value"	Закрыть текущий dialog с result="value"

Закрытие

• ESC — native dialog handles (можно prevent через event cancel)
• × кнопка — data-modal-close → result=null
• Клик вне — JS detection через bounding rect клика

---

Form-specific overrides (v4.2.8 finalize)

Markup:

<dialog class="modal-card is-form" id="modal-form">
  <button class="modal-close" data-modal-close aria-label="Закрыть">×</button>
  <div class="modal-cap">▸ НОВЫЙ КЛИЕНТ</div>
  <h2 class="modal-h1">Добавить enterprise-лид</h2>
  <div class="modal-body">
    <p>Минимальные данные — детали дозаполните в Kommo.</p>
  </div>
  <form id="modal-form-lead" data-validate-form novalidate>
    <div class="form-row">
      <div class="form-group">
        <label class="form-label is-required">Имя</label>
        <input type="text" class="form-input" name="name" data-validate="required|minlength:2" />
        <div class="form-error"></div>
      </div>
      <div class="form-group">
        <label class="form-label is-required">Email</label>
        <input type="email" class="form-input" name="email" data-validate="required|email" />
        <div class="form-error"></div>
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">Компания</label>
      <input type="text" class="form-input" name="company" placeholder="VC Partners" />
    </div>
    <div class="modal-actions is-end">
      <button type="button" class="btn-outline" data-modal-close>[ ОТМЕНИТЬ ]</button>
      <button type="submit" class="btn-action">[ ДОБАВИТЬ → ]</button>
    </div>
  </form>
</dialog>

Override-правила (только для .is-form):

Что	Default modal	Override в .is-form	Why
text-align card	center	center (без override)	унификация v4.2.8
text-align элементов <form>	center (наследуется)	left через .is-form form { text-align: left }	поля и лейблы должны читаться слева
Кнопки min-width	220px	0 (через min-width: 0)	разрешает flex:1 работать
Кнопки flex	none (auto-width)	flex: 1	растягивает кнопки на 50/50
.modal-actions gap	16px	14px	match form-row gap

Результат симметрии (card 620 default · padding 40 → contents 540px):

[ Имя 263 ] gap 14 [ Email 263 ]      ← form-row 1fr 1fr · gap 14
[       Компания 540 (full)        ]   ← form-group full
[ ОТМЕНИТЬ 263 ] gap 14 [ ДОБАВИТЬ 263 ]  ← .modal-actions flex:1 · gap 14

Верхняя строка (поля) и нижняя (кнопки) зеркалят друг друга по ширине колонок. Это и есть «симметрия с полями куда символы вбивать» из ТЗ CEO 2026-05-05.

---

Content guidance · что писать внутри

Body должен быть 1-2 коротких предложения максимум. Длинные описания (3+ строки) ломают центр-выравнивание визуально (рваный край). Если нужно объяснить детали — выноси в .modal-card.is-lg (760px) или используй inline link-карточку под body. Анти-pattern из v4.2.7: «Все материалы курса (12 уроков, 4 квиза, 3 сертификата) и доступы 47 пользователей будут потеряны навсегда» (3 строки center) → переписано в «12 уроков и доступы 47 пользователей будут потеряны навсегда» (1 строка).

Текст кнопок в square brackets [ ТЕКСТ ] (canonical GoldJaxe) или [ ТЕКСТ → ] для primary action. Минимум — 1-2 слова, максимум — 2-3 слова. При длинных текстах кнопки разрастаются больше min-width 220 — это допустимо если обе кнопки одной ширины (canonical min-width ставит floor, не ceil). Если одна сильно длиннее другой — сократи длинную или используй width: 100% на обеих.

Caption (cap) — ▸ ОДНО-ДВА СЛОВА UPPERCASE JBM (формат ▸ ПОДТВЕРЖДЕНИЕ / ▸ ИНФОРМАЦИЯ / ▸ ГОТОВО / ▸ ОШИБКА / ▸ НОВЫЙ КЛИЕНТ). Никогда не повторять h1 в cap. Cap = категория, h1 = конкретный action.

H1 — UPPERCASE Inter 800, 2-5 слов. Прямой вопрос (Удалить курс?) или утверждение действия (Лид добавлен в Kommo). Никогда не предложение — только заголовок.

---

Anti-patterns для модалов · НЕ ДЕЛАТЬ

1. ❌ Body длиннее 2 строк по центру — рваный край, теряется симметрия. Сократи или используй .is-lg.
2. ❌ Разные ширины кнопок — пара [ ОК ] (60px) + [ ОТМЕНИТЬ ОПЕРАЦИЮ ] (240px) = визуальный беспорядок. F-canonical min-width 220 решает это автоматически — не убирай.
3. ❌ Sentence case в h1 («Удалить курс?» с маленькой буквы) — нарушает GoldJaxe canonical. CSS делает text-transform: uppercase, но HTML пиши в естественном sentence-case (для accessibility / SEO).
4. ❌ Linear/Stripe-style круглые иконки в header модала — это другой язык дизайна (см. урок косяков из v4.2.6). GoldJaxe canonical = caption text + h1 + body, без декоративных иконок наверху.
5. ❌ Body left-aligned по умолчанию — было в v4.2.7, CEO заменил на center в v4.2.8. Только <form> элементы остаются left.
6. ❌ Form actions flex-end (правый край) — было в v4.2.7, CEO заменил на center с flex:1 в v4.2.8.
7. ❌ .is-md 620 — упразднён в v4.2.8 (default = 620). Не использовать в новом markup.
8. ❌ .modal-card .modal-body text-align: left override — был у .is-form в v4.2.7, удалён в v4.2.8. Если нужно left-aligned body для длинного контента — пересмотри сам контент (короче) или используй .is-lg size.
9. ❌ Гиганские модалы для простых confirm — F default 620 уже premium-spacious. Не растягивай до .is-lg 760 без причины (long content / wide forms).
10. ❌ Закрывать */ посреди многострочного CSS-комментария — синтаксическая ошибка делает следующий текст raw кодом, парсер уходит в panic recovery и игнорирует целые блоки правил. Этим я сломал .modal-card { padding: 40 } 2026-05-05 (расширил card до 880px). Урок: при правке многострочных /* ... */ блоков сохранять единственный */ в конце.

---

Decision history v4.2.7 → v4.2.8 (для будущих сессий)

v4.2.7 «не идеал» → v4.2.8 «очень хорошо получилось» — путь из 4 итераций:

1. Первая правка typography (CSS comment блока + .modal-cap 13→12 / .modal-h1 clamp 24-32→22-28 / .modal-body 15→14 / 0.75→0.70). CEO утвердил визуал и шрифты.

2. Эксперимент A/B/C по выравниванию (preview-modals.html Section 03):

3. A · CENTER (current canonical) — cap+h1 center, body left, actions center
4. B · LEFT FLOW — всё left, actions right
5. C · LEFT + AMBER RAIL — B + 4px амбер-полоска на левом крае

CEO отклонил все три: «не очень. не хватает симметрии».

1. Эксперимент D/E/F по габаритам кнопок (всё центрировано):
2. D · min-width 180 (compact)
3. E · flex: 1 (50/50 split, iOS-стиль)
4. F · min-width 220 + padding-x 32 + gap 16 + card 620 (premium spacious)

CEO выбрал F: «очень хорошо получилось».

1. Form fix v1 (CEO «кнопки в форме не центрированы»): убран override .is-form .modal-actions { justify-content: flex-end }. Кнопки стали center.

2. Form fix v2 (CEO «кнопки сделай по размеру полей · текст по центру»): cap/h1/body в форме перевёл на center (унификация), кнопки на flex: 1 + gap 14 (match form-row 263px каждая), элементы <form> остаются left для читаемости полей. CEO: «сейчас отлично».

Важная ловушка: на шаге 5 я случайно вставил лишний */ в многострочном комментарии — парсер CSS пропустил .modal-card правила и card стал шириной 880px вместо 620. Урон ушло ~10 минут на отладку через computed style. См. anti-pattern №10 выше.

---

Re-entry якорь (для будущих сессий)

«прочти контекст modal-f-canonical» → этот раздел spec + feedback_modal_f_canonical.md в memory + master CSS блок «V4.2.8 MODAL SYSTEM» (строки 2335-2580 в eco-components.css). При правке модалов first-read обязательно — F-canonical зафиксирован 2026-05-05 как «отлично» от CEO, любая итерация должна сохранять: card 620 default / body center (form override left для полей) / btn min-w 220 + padding 32 (form override flex:1 + gap 14) / actions center всегда. - Cancel button — data-modal-close → result=null

Accessibility

• Focus trap — native dialog.showModal() обеспечивает (Chrome 105+)
• role="dialog" — native
• aria-modal="true" — native
• Scroll lock — body[data-modal-open] + position:fixed (восстановление scrollY на close)
• Inert background — native dialog обеспечивает (rest of page не tab-able)

Anti-patterns

• ❌ Использовать <div> вместо <dialog> — теряем native focus trap, ESC, ARIA. Native первый, всегда.
• ❌ Создавать модалы без X-кнопки — даёт ощущение «застрял».
• ❌ Modal внутри modal — UX-дзяга. Используй wizard внутри одного.
• ❌ style="font-size:Xpx" inline на modal-cap/h1/body — используй canonical классы.

---

21 · TOAST SYSTEM · canonical (v4.2.3)

Лёгкие неблокирующие уведомления-плашки в углу. Master CSS блок «V4.2.3 TOAST SYSTEM» (~140 строк) + ui-kit/toast.js.

Markup (рендерится из JS)

<div class="toast-container" aria-live="polite">
  <div class="toast is-success" role="status">
    <span class="toast-icon" aria-hidden="true">✓</span>
    <div class="toast-content">
      <div class="toast-title">Сохранено</div>
      <div class="toast-msg">Курс «Reels Stack» создан</div>
    </div>
    <button class="toast-action">UNDO</button>
    <button class="toast-close" aria-label="Закрыть">×</button>
  </div>
</div>

Variants (border-left 3px + icon color)

Class	Color	Default duration
.is-success	green #22C55E	4000ms
.is-info	steel #4573A1	5000ms
.is-warning	amber #EBC554	6000ms
.is-error	red #EF4444	0 (sticky · только × или action)

Container position

• Desktop: position:fixed · top:96px · right:24px · z-index:70 (под header 77 + 19 gap)
• Mobile (≤640px): left:16 · right:16 · top:84 · max-width:none

Anatomy

Class	Spec
.toast	flex row · padding 14×16 · border-left-width:3px · shadow 0 6px 24px rgba(0,0,0,0.40)
.toast-icon	20×20 · 15px глиф · color per variant · margin-top 1 (для baseline)
.toast-title	Inter 700 14 · primary
.toast-msg	Inter 13 · var(--text-muted) · <strong> primary
.toast-action	JBM 11 · padding 6×12 · border + hover→amber · uppercase chip-class
.toast-close	22×22 · × glyph · color muted → primary on hover

Animations

• Show: goldjaxe-toast-in 220ms ease-out · slide-from-right (translateX 20→0) + fade
• Hide: goldjaxe-toast-out 200ms ease-in · max-height collapse + opacity 1→0
• prefers-reduced-motion: reduce — animations отключены, скрытие через opacity:0

JS API (ui-kit/toast.js)

// Полная сигнатура:
GoldjaxeToast.show({
  type: 'success' | 'error' | 'warning' | 'info',
  title: 'Сохранено',
  message: 'Курс создан',
  duration: 5000,             // override default per-type (0 = sticky)
  action: { label: 'UNDO', onClick: () => undoDelete() },
  html: false                  // если true — message через innerHTML
}); // → toastId

// Shortcuts:
GoldjaxeToast.success('Сохранено', { title: 'Готово' });
GoldjaxeToast.error('Network error', { action: {...} });
GoldjaxeToast.warning('Сессия истекает');
GoldjaxeToast.info('Magic Link отправлен');

// Программное закрытие:
GoldjaxeToast.close(toastId);

Очередь · max 3 одновременно

При попытке показать 4-й — самый старый вытесняется через close() (graceful animation). Хорошо для бурстов: пользователь видит только последние, не заваливается стэком.

Hover pause (UX best-practice)

При наведении мышью на toast — таймер ставится на паузу. При уводе — таймер запускается заново с тем же duration. Пользователь не теряет сообщение если задержался читая.

Action button (опционально)

GoldjaxeToast.show({
  type: 'info',
  title: 'Урок удалён',
  action: {
    label: 'ОТМЕНИТЬ',
    onClick: () => restoreLesson()  // → toast закрывается, callback выполняется
  }
});

Accessibility

• Container aria-live="polite" — screenreader озвучивает не прерывая.
• Error toast получает role="alert" (более громкое уведомление в SR).
• Остальные — role="status".

Anti-patterns

• ❌ Использовать toast для критических ошибок где нужна реакция — используй <dialog class="modal-card is-error"> (требует ack).
• ❌ Toast с длинным сообщением — это плашка, не страница. Длинные нарративы → modal или inline notice.
• ❌ Несколько toast одновременно с одной темой («Сохранено» × 5) — debounce на стороне приложения.

---

22 · ATOMIC ELEMENTS · checkbox / radio / toggle / avatar / tooltip (v4.2.4)

Базовые UI-элементы которых не хватало в master CSS. Единый визуальный язык: amber для checked-states, neutral border для unchecked.

CHECKBOX

<label class="form-check">
  <input type="checkbox" class="form-check-input" />
  <span class="form-check-mark"></span>
  <span class="form-check-text">
    Согласен с условиями
    <small>Можно прочитать <a href="#">здесь</a></small>
  </span>
</label>

Class	Spec
.form-check	inline-flex · gap 10 · cursor pointer
.form-check-input	скрытый native (1×1px opacity 0)
.form-check-mark	18×18 квадрат · border 1px #525252 · :checked амбер fill + ✓ через transform:rotate(45)
.form-check-text	flex:1 · <small> 12px muted display:block

RADIO

<label class="form-radio">
  <input type="radio" name="tier" class="form-check-input" />
  <span class="form-radio-mark"></span>
  <span class="form-check-text">L2 · AI-Architect</span>
</label>

То же что checkbox, но .form-radio-mark (круглый) + dot inset 3px от ::after.

TOGGLE

<label class="form-toggle">
  <input type="checkbox" class="form-toggle-input" />
  <span class="form-toggle-slider"></span>
  <span class="form-check-text">Email-уведомления</span>
</label>

Class	Spec
.form-toggle-slider	38×22 pill · :checked амбер background
.form-toggle-slider::after	plate 16×16 · transition translateX 16px при :checked

AVATAR

<div class="avatar avatar-md" style="--av-color: #C44DFF;">К</div>
<img class="avatar avatar-lg" src="/u/sergey.jpg" alt="Сергей" />
<div class="avatar avatar-md is-online" style="--av-color: #22C55E;">С</div>

Size	Dimensions
.avatar-xs	24×24 · 11px font
.avatar-sm	32×32 · 12px font
.avatar-md	40×40 · 14px font
.avatar-lg	56×56 · 18px font
.avatar-xl	80×80 · 24px font

Modifier	Effect
.is-online	зелёная точка bottom-right (30% size · 2px border bg-secondary)
.is-square	сброс border-radius (для прямоугольных логотипов компаний)

Avatar group (stacked overlap для «N студентов смотрят»):

<div class="avatar-group is-tight">
  <div class="avatar avatar-md" style="--av-color: #EBC554;">С</div>
  <div class="avatar avatar-md" style="--av-color: #C44DFF;">А</div>
  <div class="avatar avatar-md" style="--av-color: #22C55E;">+12</div>
</div>

.avatar-group > .avatar margin-left:-8 + outline 2px bg-secondary. .is-tight → margin-left:-12.

TOOLTIP

Pure CSS на :hover / :focus-visible через data-tooltip attribute.

<button class="has-tooltip"
        data-tooltip="Подсказка"
        data-tooltip-pos="top">?</button>

Position	data-tooltip-pos
Top (default)	"top" или omit
Bottom	"bottom"
Right	"right"
Left	"left"

• Delay 300ms на показ (через transition-delay)
• 0ms на скрытие (instant feedback при mouseleave)
• Стрелка — ::after rotated 45° с per-position border-edges
• prefers-reduced-motion — delay 0ms, opacity transition 0ms

Light theme overrides (автоматически)

Element	Light value
Checkbox/radio mark border	rgba(26,26,26,0.30)
Checked fill	#998018 (deep bronze) вместо amber
✓ check color	#FAFAF7 (на bronze)
Toggle slider bg	rgba(26,26,26,0.10)
Toggle plate (off)	#0A0A0A
Toggle plate (on)	#FAFAF7
Avatar bg	rgba(26,26,26,0.05)
Tooltip surface	#FAFAF7 + soft shadow

Anti-patterns

• ❌ Использовать native browser checkbox без .form-check-mark — ломает консистентность бренда.
• ❌ Кастомный toggle с 1px border слайдером (узкий) — наш canonical 2px → визуально читаем.
• ❌ Avatar без --av-color CSS variable — теряем tier-окраску по пирамиде.
• ❌ Tooltip с 200+ символами — это микро-info, не documentation. Длинное → ставь <details> или ссылку.

---

23 · OG-IMAGES SYSTEM · canonical (v4.3.0 · картинки шеринга для соцсетей)

Назначение: превью-картинки которые видны при шаринге ссылки на любой сайт холдинга в Telegram, X, LinkedIn, WhatsApp, Slack, iMessage, Facebook. Это первое визуальное впечатление о холдинге для незнакомой аудитории. Open Graph + Twitter Card стандарт.

Re-entry якорь: «прочти контекст og-images-canonical» → этот раздел + feedback_og_images_canonical.md + brand-system-v1/og-images/source/_shared.css + 5 эталонов canvas (по одному на продукт).

23.1 Зафиксированный канон 5 точек · НЕ ЛОМАТЬ

Параметр	Значение	Почему так
Размер	строго 1200×630 px	Open Graph рекомендация Facebook/LinkedIn (1.91:1). При других размерах превью режется или растягивается на всех платформах.
Формат	PNG sRGB lossless	Тёмные градиенты + золотое свечение куба → JPEG-артефакты заметны. PNG 400-440 KB на картинку — приемлемый трейд-офф.
Тема	строго тёмная (#080808)	На белых лентах (LinkedIn, X в light mode) тёмный фон даёт глубину и узнаваемость. Светлая тема теряется.
Шрифты	Inter 800 (h1 56px) · JetBrains Mono Bold (caption · stats) · Space Mono Bold (wordmark)	1-в-1 эталон landing.html. Единая типографика бренда — recall на превью.
Куб	320×320 от единого master-transparent-512.png + CSS hue-rotate фильтр per продукт	Один source of truth. Не плодим PNG-копии. Тот же подход, что у 7 favicon-вариаций.

23.2 Layout · 2-col grid

┌─────────────────────────────────────────────────┐
│ ▬▬▬▬▬▬▬▬ accent-line per-product hue ▬▬▬▬▬▬▬▬ │  ← top 3px gradient + glow
│ ╔═══════════╗   ▪ // domain · subline           │
│ ║   CUBE    ║                                   │
│ ║   320×320 ║   ЗАГОЛОВОК БОЛЬШОЙ              │  ← Inter 800 56px
│ ║  CSS-hue  ║   ВТОРАЯ СТРОКА (gradient)       │  ← gradient gold/purple/red
│ ║           ║                                   │
│ ╚═══════════╝   Подзаголовок 1-2 строки 20px.  │  ← Inter 400 20px
│                 <strong>Акценты</strong> бренда. │
│                                                 │
│                 STAT 1 | STAT 2 | STAT 3       │  ← JBM Bold 13px
│                                                 │
│ GOLDJAXE [ DOMAIN ]                  ▸ DOMAIN  │  ← brand-mark + URL
└─────────────────────────────────────────────────┘
   ↑ 60-70px padding                           ↑ 32px from bottom

Элемент	Размер / положение
Canvas	1200×630 fixed
Padding	60px left / 70px right / 0 vertical
Grid	380px 1fr · gap 40px · align center
Cube zone	380px column · cube 320×320 centered
Content zone	flex column · padding-y 30 · justify center
Caption	top of content · JBM Bold 16px · letter-spacing 0.18em · uppercase
H1	56px · Inter 800 · line-height 1.05 · uppercase · 2 lines max
Subtitle	20px · Inter 400 · line-height 1.45 · max-width 640 · color rgba(255,255,255,0.72)
Stats row	flex gap 28 · JBM Bold 13/14px · numbers per-product hue · separators \|
Brand-mark	absolute bottom-left 60/32 · Space Mono Bold 14px
URL baseline	absolute bottom-right 70/32 · JBM Bold 14px · prefix ▸ · per-product hue

23.3 Дифференциация продуктов через CSS-фильтры

Один master cube (brand-system-v1/logos/master/master-transparent-512.png) → 5 hues через filter.

Продукт	CSS filter	Caption / URL color	Accent-line color
.cube-zone (default · .ai/academy)	drop-shadow(0 0 40px rgba(235,197,84,0.55)) drop-shadow(0 0 80px rgba(235,197,84,0.25))	#EBC554 gold	gold gradient
.cube-zone.hue-com	+ hue-rotate(265deg) saturate(1.2)	#C44DFF purple	purple gradient
.cube-zone.hue-org	+ hue-rotate(330deg) saturate(1.4) (red shadow + gold cube hue-shifted)	#DC5050 red	red gradient
.cube-zone.hue-syndicate	+ saturate(0.85) brightness(0.95) (dimmed gold)	gold (приглушённый)	gold gradient

Why так: айдентика общая (1 cube + 1 layout), отличие только в hue + контенте. Это держит экосистему как один организм. Не плодим 5 разных дизайнов.

23.4 Контент per продукт (canon RU + EN)

Продукт	RU h1	EN h1	Слоган RU	Слоган EN
goldjaxe.ai	Машина вашего превосходства	Machine of your supremacy	AI-Академия, 9 протоколов автоматизации, контент-завод и n8n-оркестрация	AI-Academy, 9 automation protocols, content factory and n8n orchestration
goldjaxe.com	Личный бренд эпохи AI	Personal brand of the AI era	История основателя, музыка, инвестиционная философия. Visual statement	Founder's story, music, investment philosophy. Visual statement
goldjaxe.org	Корпоративная мощь	Enterprise power core	Enterprise-контур холдинга. Калькулятор КП, кибербезопасность, compliance Dubai	B2B contour. Proposal calculator, cybersecurity, Dubai compliance, data center
academy.goldjaxe.ai	Школа AI-операторов	School of AI operators	От L0 · INITIATION до L3 · GOD MODE. Сертификаты, MASTER KEY across экосистему	From L0 · INITIATION to L3 · GOD MODE. Certificates, MASTER KEY across ecosystem
syndicate.goldjaxe.ai	Синдикат операторов	The Operator Syndicate	Закрытый клуб AI-операторов. The Command Line, Operator Labs, The Foundry	Closed club of AI-machine owners. The Command Line, Operator Labs, The Foundry

Правило: второе слово (или 2 слова) h1 — gradient (.grad для gold, .grad-purple для com, .grad-red для org). Первая строка — белый.

23.5 Pipeline пересборки PNG (Chrome headless)

# Из корня design.goldjaxe.ai/
python3 -m http.server 8088 &
CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
OUT="brand-system-v1/og-images"
SRV="http://127.0.0.1:8088/brand-system-v1/og-images/source"

for slug in ai com org academy syndicate; do
  for lang in ru en; do
    "$CHROME" --headless=new --disable-gpu --hide-scrollbars --no-sandbox \
      --window-size=1200,630 \
      --screenshot="$OUT/og-$slug-$lang.png" \
      "$SRV/og-$slug-$lang.html"
  done
done

Любая правка контента / шрифта / цвета в HTML-источнике → 1 команда → все 10 PNG пересобраны точно 1200×630.

23.6 Подключение на сайтах · meta-tags блок

См. brand-system-v1/og-images/meta-tags.md — 5 готовых блоков (по одному на каждый сайт). Копируется в <head> как есть, без правок.

Минимальный обязательный набор тегов:

<meta property="og:type" content="website" />
<meta property="og:url" content="https://goldjaxe.ai" />
<meta property="og:title" content="GOLDJAXE [ AI ] — Машина вашего превосходства" />
<meta property="og:description" content="..." />
<meta property="og:image" content="https://design.goldjaxe.ai/brand-system-v1/og-images/og-ai-ru.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:locale" content="ru_RU" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://design.goldjaxe.ai/brand-system-v1/og-images/og-ai-ru.png" />

Логика RU↔EN — сервер подменяет og:image на og-{slug}-en.png + og:locale=en_US по req.locale. Альтернативно — два блока meta через серверный шаблонизатор.

23.7 Anti-patterns · НИКОГДА не делать

1. ❌ Размер ≠ 1200×630 — превью режется на FB/LinkedIn/TG. Только эти ровно числа.
2. ❌ Плодить PNG-копии куба — один master + CSS-фильтры, не 5 разных PNG.
3. ❌ Светлая тема — на белых лентах теряется, рушит брендовое узнавание.
4. ❌ H1 < 48px — на miniature-превью в чатах не читается.
5. ❌ JPEG вместо PNG — артефакты на gradient gold + glow визуально портят бренд.
6. ❌ Fonts из системы (system-ui, sans-serif) — ломает типографику. Только Inter / JBM / Space Mono.
7. ❌ Изобретать новые слоганы без апрува CEO — содержание h1 + sub canonical, см. таблицу 23.4.
8. ❌ Цветной фон (gradient, image) — фон всегда #080808 + grid 64px @ rgba(235,197,84,0.04) + radial glow gold.
9. ❌ Куб справа / по центру — позиция фиксирована: cube слева 380px col, content справа.
10. ❌ Без accent-line — top 3px line per-product hue = «подпись бренда» на любом OG-визуале.
11. ❌ Без brand-mark + URL baseline — двусторонняя нижняя граница обязательна (recall + указатель куда ведёт).

23.8 Decision history v4.3.0 (для re-entry)

Шаг	Решение	Результат CEO
1	Тёмная или светлая тема?	✓ тёмная (рекомендовал Claude)
2	RU + EN или один язык?	✓ оба сета (рекомендовал Claude)
3	Единый язык + дифференциация в подписи или per-продукт характер?	✓ единый + dif в подписи (рекомендовал Claude)
4	H1 64px → переполнение «ПРЕВОСХОДСТВА»	→ 56px Inter 800, поместилось
5	Cube 280px → выглядел маленьким на 1200×630 canvas	→ 320px, заполнил left col 380
6	Куб 5 разных PNG vs 1 master + CSS-filter	✓ 1 master + filter (память 01.05 о 7 favicon-вариациях через CSS-фильтры)
7	Скриншот через Chrome MCP (viewport DPR scaling = blocker)	→ Chrome headless напрямую --window-size=1200,630 --screenshot (точный 1200×630)
8	Финальный канон	✓ CEO 2026-05-05 «картинки очень крутые просто топ. надписи тоже»

23.9 При правке OG-картинок в будущих сессиях

1. Сначала — first read раздел 23 + feedback_og_images_canonical.md + один из 10 HTML-источников как эталон
2. Никогда не менять размер 1200×630 — это сломает превью на ВСЕХ платформах одновременно
3. Никогда не менять layout grid 380/1fr — это canon
4. Никогда не менять master cube источник или класс hue для существующего продукта без апрува CEO
5. Можно править содержимое h1 / sub / stats — это отдельный ресурс контента, не архитектура
6. Можно добавлять новые продукты — копировать og-{slug}-{lang}.html + добавить .cube-zone.hue-{slug} в _shared.css (filter rule) + обновить таблицы 23.3-23.4 в этом разделе
7. После любой правки — пересобрать ВСЕ затронутые PNG через Chrome headless (см. 23.5), не править PNG руками
8. Перед commit — апрув CEO на скриншоты gallery.html

---

24 · FAVICON SYSTEM · canonical (v4.3.1 · 7 directions через CSS-фильтры)

Назначение: фавиконы для всех 7 сабдоменов экосистемы. Один master cube glyph + 7 CSS-фильтров на цветовую температуру per-сабдомен. Master glyph не меняется (узнаваемость бренда), цвет даёт мгновенную ассоциацию с какого сайта пользователь — даже на 16×16 в табе браузера.

Re-entry якорь: «прочти контекст favicon-canonical» → этот раздел + feedback_favicon_canonical.md + brand-system-v1/favicons/README.md + master CSS блок V4.3.1 FAVICON SYSTEM.

24.1 7 направлений · CEO REV 2026-05-01 (НЕ ЛОМАТЬ)

Класс	Сабдомен	Направление	CSS filter	Brand color (theme/tile/SVG)
.fav-com	goldjaxe.com	GOLD · luxury	hue-rotate(-6°) saturate(0.95) brightness(1.08) drop-shadow(0 0 24px rgba(248,240,128,0.45))	#F8F080
.fav-org	goldjaxe.org	SILVER / PLATINUM	saturate(0.05) brightness(1.30) contrast(1.10) drop-shadow(0 0 24px rgba(220,224,230,0.45))	#DCE0E6
.fav-ai	goldjaxe.ai	NEON CYAN · innovations	hue-rotate(155°) saturate(1.25) brightness(1.05) drop-shadow(0 0 26px rgba(0,240,255,0.55)) drop-shadow(0 0 52px rgba(0,240,255,0.20))	#00F0FF
.fav-academy	academy.goldjaxe.ai	WARM GOLD (academic)	hue-rotate(-3°) saturate(0.9) brightness(0.95) drop-shadow(0 0 18px rgba(235,197,84,0.32))	#EBC554
.fav-syndicate	syndicate.goldjaxe.ai	DEEP GOLD + GREEN (closed)	hue-rotate(15°) saturate(0.85) brightness(0.85) contrast(1.1) drop-shadow(0 0 18px rgba(34,197,94,0.20))	#22C55E
.fav-gate	gate.goldjaxe.ai	DARK IRON GREY (internal)	saturate(0.15) brightness(0.75) contrast(1.05) drop-shadow(0 0 14px rgba(176,181,188,0.30))	#525252
.fav-link	link.goldjaxe.com	LIGHT CYAN (social entry)	hue-rotate(120°) saturate(0.85) brightness(1.10) drop-shadow(0 0 20px rgba(0,240,255,0.30))	#7DDFEB

3 направления (флагман-цвета): GOLD · SILVER · NEON CYAN. 4 secondary привязаны к флагманам: academy/syndicate→GOLD, gate→SILVER, link→CYAN.

24.2 Где использовать .fav-* классы

Контекст	Подход
DOM на странице (hero block, navigation tile, dashboard header)	<img class="fav-ai" src="..."/> — браузер применит CSS-фильтр
Production browser tab (<link rel="icon">)	НЕ работает с CSS — нужны пре-рендеренные PNG (favicon-{slug}-{size}.png) с уже применённым фильтром
Apple touch icon (iOS)	Общий apple-touch-icon-180.png без фильтра — Apple накладывает свой стиль
Safari pinned tab + macOS Touch Bar	Монохромный SVG (safari-pinned-tab.svg) + <link rel="mask-icon" color="..."/> per-сабдомен
Windows Tile (Edge / IE)	Общий mstile-150.png + <meta name="msapplication-TileColor" content="..."/> per-сабдомен
PWA manifest (Add to Home + standalone)	Per-сабдомен manifest-{slug}.json с pre-rendered icons

24.3 Pre-render PNG · Chrome headless pipeline

Источник: brand-system-v1/logos/master/master-transparent-512.png (RGBA, единый source of truth).

Pipeline:

# Из корня design.goldjaxe.ai/
python3 -m http.server 8088 &
CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
OUT="brand-system-v1/favicons"
SRV="http://127.0.0.1:8088/brand-system-v1/favicons/source/render.html"

for slug in ai com org academy syndicate gate link; do
  for size in 32 96 192 512; do
    "$CHROME" --headless=new --disable-gpu --hide-scrollbars --no-sandbox \
      --default-background-color=00000000 \
      --window-size=$size,$size \
      --screenshot="$OUT/favicon-$slug-$size.png" \
      "$SRV?slug=$slug"
  done
done

Critical: --default-background-color=00000000 обязателен — иначе Chrome рендерит на белом фоне (RGB без alpha = квадратная подложка вместо transparent).

7 slugs × 4 размера = 28 PNG. Pipeline выполняется за ~30 секунд.

24.4 Размеры production set

Размер	Назначение
32×32	Browser tab favicon (классика, все браузеры)
96×96	Chrome desktop shortcut + speed dial
192×192	Android Chrome home screen
512×512	Android splash screen + manifest hi-res + maskable

Размеры 16/24/48 рендерятся браузером из 32. 256/384 — из 512. Apple-touch-icon 180×180 общий (без .fav-* фильтра) — Apple свой стиль накладывает.

24.5 7 manifest.json · структура

Каждый сабдомен — свой manifest-{slug}.json:

{
  "name": "GOLDJAXE [ AI ] — Innovations",
  "short_name": "GOLDJAXE AI",
  "start_url": "https://goldjaxe.ai/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#080808",
  "theme_color": "#00F0FF",
  "icons": [
    { "src": "...favicon-ai-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "...favicon-ai-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "...favicon-ai-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

background_color всегда #080808 (брендовый dark). theme_color per-сабдомен (см. таблицу 24.1).

24.6 Подключение на сайтах · meta-tags блок

См. brand-system-v1/favicons/meta-tags.md — 7 готовых блоков для копирования в <head>. Минимум обязательного набора:

<link rel="icon" type="image/png" sizes="32x32" href=".../favicon-ai-32.png" />
<link rel="icon" type="image/png" sizes="192x192" href=".../favicon-ai-192.png" />
<link rel="apple-touch-icon" sizes="180x180" href=".../apple-touch-icon-180.png" />
<link rel="mask-icon" href=".../safari-pinned-tab.svg" color="#00F0FF" />
<link rel="manifest" href=".../manifest-ai.json" />
<meta name="theme-color" content="#080808" media="(prefers-color-scheme: dark)" />
<meta name="msapplication-TileColor" content="#00F0FF" />

24.7 Anti-patterns · НИКОГДА не делать

1. ❌ Менять master cube glyph per-сабдомен — узнаваемость бренда строится на одном glyph. Только цветовая температура через filter.
2. ❌ Плодить копии master PNG в /logos/ — pre-render из единого master-transparent-512.png через render.html.
3. ❌ Применять .fav-* к <link rel="icon"> — CSS не действует на favicon link (только на DOM-img). Нужны pre-rendered PNG.
4. ❌ Использовать favicon-512.png (RGB) как источник — у него чёрный фон. Только master-transparent-512.png (RGBA).
5. ❌ Chrome headless без --default-background-color=00000000 — белая подложка вместо transparent.
6. ❌ Свой favicon для каждой страницы внутри сабдомена — favicon на уровне сабдомена, не страницы. Ставится в общем <head>.
7. ❌ PNG больше 512×512 — overkill, никакой браузер этого не использует. 512 максимум.
8. ❌ JPEG вместо PNG — нет alpha-канала, теряется transparency.
9. ❌ Theme-color = brand accent — это для UI mobile address bar, должен быть тёмным (#080808). Brand accent → в msapplication-TileColor (Windows Tile).
10. ❌ Apple-touch-icon с CSS-фильтром — Apple накладывает свой стиль (rounded corners + shadow), фильтр будет конфликтовать. Общий без фильтра.
11. ❌ Safari mask-icon с цветами в SVG — должен быть монохромный (fill="currentColor"), цвет задаётся в <link rel="mask-icon" color="..."> per-сабдомен.

24.8 Decision history v4.3.1

Шаг	Решение	Источник
1	7 CSS-фильтров утверждены CEO 01.05.2026	_archive/previews-2026-05-01/previews/ecosystem/favicon-variations.html
2	Перенести в master CSS как 7 классов .fav-* (а не PNG-копии)	память feedback_favicon_7_directions.md от 01.05
3	Source = master-transparent-512.png RGBA, не favicon-512.png RGB	первый прогон рендера дал чёрный фон вокруг куба
4	Chrome headless с --default-background-color=00000000	без флага → белая подложка
5	4 размера на slug (32/96/192/512)	стандарт production browsers (16/24/48 derived из 32)
6	Apple-touch-icon общий 180×180 без фильтра	Apple накладывает свой стиль
7	Safari mask-icon — монохромный SVG, цвет per-сабдомен в meta	стандарт Safari Pinned Tab
8	Theme-color #080808 для всех (не brand accent)	brand accent → msapplication-TileColor
9	OG-палитра (Day 6) и Favicon-палитра (CEO 01.05) — параллельные системы	разные контексты (1200×630 шеринг vs 16×16 таб), разные задачи (эмоция бренда vs мгновенная узнаваемость направления). CEO 2026-05-05 итог по production-set: «картинки очень крутые просто топ»

24.9 При правке favicons в будущих сессиях

1. Сначала — first read раздел 24 + feedback_favicon_canonical.md + brand-system-v1/favicons/README.md + master CSS блок «V4.3.1 FAVICON SYSTEM» + _archive/.../favicon-variations.html (источник CEO).
2. Никогда не менять 7 утверждённых CSS-фильтров без явного апрува CEO — это canonical с 01.05.2026.
3. Никогда не менять master cube glyph для отдельного сабдомена — только цветовая температура.
4. Можно добавить 8-й сабдомен — копировать паттерн .fav-{newslug} в master CSS + добавить в render.html + pre-render PNG + manifest + meta-tags блок.
5. При замене master cube (новый glyph холдинга) — пересобрать ВСЕ 28 PNG через pipeline 24.3.
6. Перед commit — апрув CEO через preview.html (открыть в Chrome, проверить 7 направлений в Chrome табы симуляции).

---

25 · ERROR PAGES SYSTEM · canonical (v4.3.2 · 6 экранов · V3 status pattern)

Назначение: покрыть 6 production failure modes единым визуальным языком. Все экраны на canonical .eco-header 77px + V3 status pattern (.auth-success-bar + .auth-kpi-row) + fit 1440×900 без скролла. Тон серьёзный технический — match терминальной айдентике GOLDJAXE.

Re-entry якорь: «прочти контекст error-pages-canonical» → этот раздел + feedback_error_pages_canonical.md + 6 HTML в ecosystem-prototype/error/.

25.1 6 экранов · canonical mapping

Экран	HTTP	Status bar	Контекст	Покрывает
404.html	404 NOT FOUND	.is-error (red)	страница не существует	broken link, опечатка в URL
500.html	500 INTERNAL	.is-error (red)	сбой сервера	unhandled exception, DB-проблема, panic recovery
403.html	403 FORBIDDEN	.is-error (red)	нет уровня доступа	tier-gated content, не залогинен
429.html	429 RATE LIMIT	.is-error (red)	превышен лимит запросов	API throttling, anti-abuse
offline.html	(PWA fallback)	.is-pending (amber)	устройство не в сети	network loss, airplane mode
maintenance.html	503 (опционально)	.is-pending (amber)	плановые работы	deploy window, DB migration, infra update

Why split error/pending: 4xx/5xx ошибки = негатив (что-то сломалось) → красный · pending (offline/maintenance) = ожидание восстановления → амбер. Цвет даёт мгновенную семантику пользователю.

25.2 Структурный паттерн (1-в-1 для всех 6)

[77px .eco-header sticky · canonical]
[24-32px padding-top]
[ОПЦИОНАЛЬНО: ASCII-art (только 404)]
[~70px .auth-success-bar.is-error|.is-pending]
  ├ .auth-success-icon (68×68 · color = status)
  ├ .auth-success-content (cap + h1 + sub)
  └ .auth-success-cta (1 primary + 1 secondary button)
[24px gap]
[~100px .auth-kpi-row · 3-4 tiles]
  └ контекст-зависимая инфо (incident code · tier comparison · countdown · и т.д.)
[24px gap опционально]
[~80px .auth-timeline-h (3 steps) · ИЛИ terminal-block]
[24px padding-bottom]

→ Total content ≈ 234-300px в 823px viewport (минус header 77px)
→ Все экраны fits 1440×900 без скролла

25.3 Backdrop · grid + glow per accent

Каждый экран использует тонированный backdrop в тон status:

Variant	Grid color	Glow color
error (404/500/403/429)	rgba(239,68,68,0.04)	radial 70%×50% rgba(239,68,68,0.10)
pending (offline/maintenance)	rgba(235,197,84,0.04)	radial 70%×50% rgba(235,197,84,0.08)

Локальные классы .err-grid / .err-glow (для error) и .pen-grid / .pen-glow (для pending) — в каждом HTML inline в <style> (не в master CSS, чтобы page-specific остаться).

25.4 Контент per экран · canonical (НЕ менять без апрува CEO)

Экран	Cap	H1	Sub	KPI tiles
404	▸ ERROR · 404 · NOT FOUND	Страница не найдена	Запрошенный модуль не зарегистрирован в реестре GOLDJAXE	3 nav-tiles: Academy / Syndicate / AI-Panel
500	▸ ERROR · 500 · INTERNAL	Сбой в командном центре	Внутренняя ошибка сервера. Команда уведомлена	4 tiles: КОД ИНЦИДЕНТА · ВРЕМЯ · СТАТУС · ETA
403	▸ ERROR · 403 · FORBIDDEN	Доступ запрещён	Этот раздел требует более высокого уровня допуска	4 tiles: ВАШ УРОВЕНЬ · ТРЕБУЕТСЯ · NEURO-OPS L1 · MASTER KEY
429	▸ ERROR · 429 · TOO MANY REQUESTS	Слишком много запросов	Превышен лимит скорости. Подождите countdown	4 tiles: countdown · ваш лимит · в минуту · upgrade tier
offline	▸ STATUS · CONNECTION LOST	Нет соединения	Похоже устройство не в сети. Авто-переподключение	3 tiles: СТАТУС · ПОПЫТКИ · CACHED + 3-step timeline
maintenance	▸ STATUS · SCHEDULED MAINTENANCE	Технические работы	Обновляем инфраструктуру для повышения надёжности	4 tiles: НАЧАЛО · ETA · ЗАТРОНУТО · STATUS + terminal block

25.5 ASCII-art · только для 404

Уникальная фишка одного экрана (не для остальных) — большие "404" символы в block-стиле через JetBrains Mono:

██╗  ██╗ ██████╗ ██╗  ██╗
██║  ██║██╔═████╗██║  ██║
███████║██║██╔██║███████║
╚════██║████╔╝██║╚════██║
     ██║╚██████╔╝     ██║
     ╚═╝ ╚═════╝      ╚═╝

Стилизация: font-family: 'JetBrains Mono'; font-weight: 700; font-size: clamp(16px, 1.6vw, 22px); color: rgba(239,68,68,0.85); text-shadow: 0 0 24px rgba(239,68,68,0.40), 0 0 48px rgba(239,68,68,0.20); white-space: pre.

Why только 404: ASCII = декоративный жест. На 500/403 нужен функционал (incident code, tier info), декорация перебор. ASCII зарезервирован за «страница не найдена» как самым частым сценарием — там пользователь готов задержаться на странице.

25.6 JS поведение per экран

Экран	JS логика
404	static · нет JS
500	генерация incident-кода GJX-INC-YYMMDD-HHMM-XXXX (детерминистичный по времени) + текущее UTC время + ETA acknowledge через 10 минут
403	static · нет JS
429	countdown 60→0 с setInterval, при 0 кнопка retry активируется + countdown меняется на «GO» зелёным
offline	setInterval check 5s + window.addEventListener('online') → при navigator.onLine === true → перезагрузка через 1.5s; счётчик попыток инкрементируется
maintenance	ETA расчёт: текущее время + 1 час, отображение в local time + UTC parenthetical

Принцип: JS даёт «живость» страницы (countdown, attempts, ETA). Без JS экран всё равно работает (graceful degradation).

25.7 Header subline per экран

Канонический формат: PROTOCOL · {CODE} · {STATE}

Экран	Subline
404	PROTOCOL · 404 · NOT FOUND
500	PROTOCOL · 500 · INTERNAL
403	PROTOCOL · 403 · FORBIDDEN
429	PROTOCOL · 429 · RATE LIMIT
offline	PROTOCOL · CONNECTION LOST
maintenance	PROTOCOL · SCHEDULED UPDATE

Wordmark GOLDJAXE [ ERROR ] для error-вариантов · GOLDJAXE [ OFFLINE ] / [ MAINTENANCE ] для pending.

25.8 Anti-patterns · НИКОГДА не делать

1. ❌ Юмор в текстах («оператор не нашёл нужный модуль · вернёмся в командный центр»). CEO утвердил серьёзный технический тон 05.05. Бренд — AI · INNOVATIONS · TERMINAL, не reddit-юмор.
2. ❌ ASCII-art на не-404 — на 500/403/429/offline/maintenance нужен функциональный контент (KPI / terminal / timeline), декорация перебор.
3. ❌ Скролл на error-экране — вся информация в 1440×900. Если контент не помещается — сократить, не скроллить.
4. ❌ Footer triad — error pages не должны иметь trifold footer (как success/auth — это compact status экраны).
5. ❌ Нет primary CTA — каждый экран должен предложить пользователю «выход» (на главную / повторить / войти / status page).
6. ❌ Использовать .is-success вариант на error-экране — семантика цвета сломается. Только .is-error или .is-pending.
7. ❌ Захардкоженные incident-коды — должны генерироваться на клиенте через JS (для уникальности при reload).
8. ❌ Длинный sub-paragraph (>3 строки) — error-экран это «помоги мне выйти», не лекция. 1-2 строки достаточно.
9. ❌ «Сорри что так получилось» в тексте — мы не извиняемся через UI, мы предоставляем функциональную информацию (код, статус, ETA, что делать). Apologies — в копирайте status page или через support, не в error-экране.
10. ❌ Разные icon-размеры между экранами — все должны использовать canonical 68×68 .auth-success-icon.

25.9 Production deploy

Эти HTML — прототипы (ecosystem-prototype/error/). Для production: - Артём порт в Next.js Academy LMS как страницы /404, /500, /403, /429, /offline, /maintenance (одна общая структура <ErrorPage variant="404|500|..."> через error.tsx + not-found.tsx) - Server должен возвращать соответствующий HTTP status code (404/500/403/429/503) - Service Worker для offline.html (PWA cache fallback) - maintenance.html подключается через nginx server-level config когда сайт в обслуживании

25.10 Decision history v4.3.2

Шаг	Решение	Источник
1	Серьёзный технический тон, не юмористический	CEO 2026-05-05 «согласен с твоими рекомендациями»
2	ASCII-art только на 404	CEO 2026-05-05 (избегаем декорации на функциональных экранах)
3	403 redirect на goldjaxe.ai/#academy (общий tier select), не на enterprise-form	CEO 2026-05-05 (пусть пользователь сам решит)
4	red (.is-error) для 4xx/5xx · amber (.is-pending) для offline/maintenance	семантика: ошибка vs ожидание
5	Все 6 fit 1440×900 без скролла	canonical компактность V3 (память feedback_canonical_reference_screens_v4.md)
6	JS даёт «живость» (countdown / incident code / ETA)	graceful degradation (без JS экран всё равно работает)
7	Header subline формат PROTOCOL · {CODE} · {STATE}	match терминальной айдентике

25.11 При правке error-pages в будущих сессиях

1. Сначала — first read раздел 25 + feedback_error_pages_canonical.md + один из 6 HTML как эталон.
2. Никогда не менять структуру (header + success-bar + kpi-row) — это canonical.
3. Никогда не менять mapping экран ↔ accent (error vs pending) — семантика.
4. Можно править контент (cap / h1 / sub / kpi tiles) — но canonical таблица 25.4 утверждена CEO, изменения требуют апрува.
5. Можно добавить новый error-экран — копировать одну из 6 как шаблон + добавить в таблицу 25.1 + раздел 25.4 spec.
6. Перед commit — проверить fit 1440×900 через Chrome MCP (document.body.scrollHeight === window.innerHeight).

---

26 · AUTH FLOW SYSTEM · canonical (v4.3.3 · email + 6-digit code · L0 onboarding)

Назначение: полный цикл авторизации L0 (новый пользователь) для всех продуктов экосистемы. Email + 6-значный код вместо пароля (как Anthropic). 4 экрана: signup → verify-code → welcome-l0 → sso-callback (для внешних провайдеров). Все на canonical pattern с fit 1440×900.

Re-entry якорь: «прочти контекст auth-flow-canonical» → этот раздел + feedback_auth_flow_canonical.md + 4 HTML в ecosystem-prototype/auth/.

26.1 8 экранов · L0 воронка (4) + общий (1) + admin (3)

L0 воронка (auth/) · gold theme:

Экран	Pattern	Card variant	Содержимое
signup.html	V1 single-card	.auth-card-gold 480px	email input + Turnstile + 2 чекбокса + submit
verify-code.html	V1 compact pending	.auth-card-gold 520px	6-digit код + countdown 10:00 + resend 60s
welcome-l0.html	V3 dashboard success	.auth-success-bar.is-success	success-bar + 3 syndicate KPIs + 3-step path-forward
sso-callback.html	V1 compact pending	.auth-card-gold 520px	animated cube + progress + terminal + 3s redirect

Общий (auth/) · gold theme · доступен L0 и admin:

Экран	Pattern	Card variant	Содержимое
session-expired.html	V1 compact pending	.auth-card-gold 520px	⏱ icon + 2 CTA (войти снова / на главную) + terminal · «24 часа активности»

Admin (gate-admin/) · red theme (.auth-card-red) · password-based + 2FA:

Экран	Pattern	Card variant	Содержимое
2fa.html	V1 single-card	.auth-card-red 520px	🛡 icon + 6 TOTP cells (red caret) + 30s rotation countdown + TOTP apps row + TLS/Tailscale terminal
forgot-password.html	V1 single-card	.auth-card-red 480px	email input + send reset link + back to login + rate-limit terminal
reset-password.html	V1 single-card	.auth-card-red 520px	2 password inputs + live-checklist (12+/upper/digit/special) + strength meter + match validation

26.2 Воронки переходов

L0 onboarding (default · gold theme):

signup.html (введите email)
     │  └ submit + valid email + terms ✓
     ▼
verify-code.html?email=...  (6-digit + countdown)
     │  └ submit + 6 digits filled
     ▼
welcome-l0.html  (V3 success + path-forward)
     │  └ ОТКРЫТЬ ЛОББИ → или КУРСЫ ↗
     ▼
syndicate/home.html  ИЛИ  academy/courses.html

Admin login (red theme · password + 2FA):

gate-admin/login.html (email + password)
     │  └ valid credentials → 2FA prompt
     ▼
gate-admin/2fa.html  (6-digit TOTP code · 30s rotation)
     │  └ valid TOTP → admin dashboard
     ▼
gate-admin/dashboard-v6.html

Admin password recovery:

gate-admin/login.html → клик «Забыли пароль»
     ▼
gate-admin/forgot-password.html  (email input · 15min reset link)
     │  └ submit → email с reset-token (15min validity)
     ▼
gate-admin/reset-password.html?token=...  (live-checklist + strength meter)
     │  └ valid password (4/4 rules + match) → back to login
     ▼
gate-admin/login.html?reset=success

Cross-flow (общий):

• auth/session-expired.html — попадает любой пользователь (L0 или admin) при истечении сессии. CTA «войти снова» ведёт на правильный login (academy для L0, gate-admin для админов).
• auth/sso-callback.html — отдельный flow от внешних SSO провайдеров (Google/GitHub/Apple). После validation токена → 3s countdown → redirect на target из ?redirect=....

26.3 Принцип: NO PASSWORD · email-only

Решение CEO 04.05 (память feedback_signup_email_6digits.md): регистрация L0 на форум — формат как у Claude/Anthropic. Только email при регистрации, на почту 6 цифр, 10 минут срок, Cloudflare Turnstile. Пароль опционально через настройки потом.

Эта новая схема ЗАМЕНЯЕТ 3 экрана forgot-password из исходного плана (для L0). Forgot-password остаётся только для admin-аккаунтов на gate-admin (день 10).

26.4 Signup canonical · единственная форма

Параметр	Значение
Card	.auth-card.auth-card-gold max-width 480 · padding 28×30
Caption	▸ INITIATE PROTOCOL · L0 ACCESS
H1	«Регистрация» · 28px · Inter 800 · uppercase
Sub	«Введите email — отправим 6-значный код для входа. Без пароля.» · 14px
Поля	1 email input (.auth-input) с regex validation на blur/submit
Turnstile	placeholder div в стиле бренда (border dashed + amber check + JBM cap)
Чекбоксы	1 required (Оферта + Privacy) · 1 optional (marketing-обновления)
CTA	[ ОТПРАВИТЬ КОД → ] · btn-action gold full-width
Footer	terminal-block с 3 строки (no password / 6-digit code / ready to initiate)

26.5 Verify-code canonical · 6-digit input

Параметр	Значение
Card	.auth-card-gold max-width 520 · padding 28×32 · text-align center
Icon	.auth-icon-ring-pending.is-compact 📨 (scale 0.85 для компактности)
6 cells	grid-cols-6 · gap 10 · max-height 50 · aspect 1:1 · JBM Bold 26px · gold caret
Auto-advance	input → next cell на любую цифру · backspace → prev cell
Paste support	вставка 6 цифр распределяется по 6 ячейкам
Countdown 10 min	▸ КОД ДЕЙСТВИТЕЛЕН: M:SS · красный при 0:00
Resend cooldown 60s	disabled с (60) countdown · enable после 0 · клик → reset обоих countdown
Validation	при submit: все 6 заполнены → next page · нет → .is-error border red на пустые

26.6 Welcome-L0 canonical · V3 dashboard success

Параметр	Значение
Pattern	V3 (success-bar + KPI row + timeline-h)
Status bar	.is-success green · ✓ icon · cap «L0 · INITIATION COMPLETE»
H1	«Добро пожаловать в Синдикат»
Sub	«Ваш L0-доступ активирован. Лобби открыто — забирайте бесплатные промты и присоединяйтесь к 1 200+ операторам.»
3 KPI tiles	47 ЛОББИ ТЕМ · 1.2K+ УЧАСТНИКИ (gold) · 28 БЕСПЛАТНЫЕ ПРОМТЫ
3-step timeline	01 СЕЙЧАС (Изучите Лобби) → 02 ПРОКАЧКА (Активность) → 03 NEURO-OPS (L1 $149)
CTAs	[ ОТКРЫТЬ ЛОББИ → ] (btn-action) + [ КУРСЫ ↗ ] (btn-outline)
Header indicator	L0 · АКТИВЕН зелёный pulse dot

26.7a Session-expired canonical · общий compact pending

Параметр	Значение
Card	.auth-card-gold max-width 520 · padding 28×32 · text-align center
Icon	.auth-icon-ring-pending.is-compact ⏱ (scale 0.85 для компактности)
Caption	▸ SESSION · EXPIRED
H1	«Сеанс истёк» · 28px
Sub	«Из соображений безопасности неактивная сессия была завершена. Войдите снова, чтобы продолжить.»
CTAs	[ ВОЙТИ СНОВА → ] (btn-action 180min) + [ НА ГЛАВНУЮ ↗ ] (btn-outline 140min)
Terminal	3 lines: JWT TOKEN · INVALIDATED / SESSION COOKIE · CLEARED / AWAITING RE-LOGIN
Footer caption	«Стандартное время сессии — 24 часа активности» (eco-cap-xs override white-space:normal per прецедент 26.10/9)
Header indicator	SESSION · EXPIRED gold pulse dot

Routing рекомендация: В production middleware определяет тип сессии (L0 / admin) и редиректит на правильный login. Прототип статичный с дефолтом на academy/login.html.

26.7b 2FA canonical · admin TOTP

Параметр	Значение
Card	.auth-card-red max-width 520 · padding 28×32 · text-align center
Icon	.auth-icon-ring-error.is-compact 🛡 (scale 0.85)
Caption	▸ ADMIN · 2FA REQUIRED
H1	«Двухфакторная аутентификация» · 26px
Sub	«Введите 6-значный код из приложения-аутентификатора:»
6 cells	grid-cols-6 · gap 10 · max-h 50 · JBM Bold 26px · color/caret #EF4444 (red)
Auto-advance + paste + backspace-rewind	1-в-1 как verify-code (canonical 6-cell pattern)
Rotation countdown	30s ▸ КОД ОБНОВЛЯЕТСЯ ЧЕРЕЗ: (TOTP стандарт RFC 6238)
TOTP apps row	inline · Google Authenticator · Authy · 1Password (информирует пользователя)
CTAs	[ ПОДТВЕРДИТЬ → ] red border (180min) + [ ОТМЕНА ↗ ] outline (140min)
Terminal	red lines: TLS · 1.3 · ENFORCED / TAILSCALE · ZTNA · ACTIVE / AWAITING TOTP CODE
Header backdrop	.admin-grid + .admin-glow red-tinted (rgba(239,68,68,0.04) grid · radial 0.10 glow)
Header indicator	L5 · ADMIN ACCESS red pulse dot
Header cube	drop-shadow red (rgba(239,68,68,0.45)) вместо gold
Lang switcher active	red bg вместо gold
Error state	.code-cell.is-error + shake animation (translateX ±4px 400ms)

Why red theme: admin context отличается визуально от L0 — predictable cue что это критическая зона (canonical с feedback_auth_canonical_v34.md).

26.7c Forgot-password canonical · admin email reset

Параметр	Значение
Card	.auth-card-red max-width 480 · padding 28×30
Caption	▸ ADMIN · PASSWORD RECOVERY
H1	«Восстановление доступа» · 28px
Sub	«Введите admin-email — отправим ссылку для сброса пароля. Действует 15 минут.»
Email input	.auth-input + label «▸ ADMIN EMAIL» (red color) + regex validation
CTA	[ ОТПРАВИТЬ ССЫЛКУ → ] red full-width
Back-link	«← Вернуться к логину» eco-cap-xs muted
Terminal	red lines: RATE LIMIT · 3 RESETS / HOUR / RESET TOKEN · 15 MIN VALID / AUDIT LOG · ENABLED
Header backdrop	.admin-grid + .admin-glow red-tinted
JS routing	submit valid email → reset-password.html?token=mock-{random} (production: API call → email с реальным токеном)

26.7d Reset-password canonical · live-checklist + strength meter

Параметр	Значение
Card	.auth-card-red max-width 520 · padding 24×30
Caption	▸ ADMIN · NEW PASSWORD
H1	«Новый пароль» · 26px
Sub	«Установите новый пароль для admin-аккаунта. Все требования слева должны быть выполнены.»
Password input 1	.auth-input + label «▸ НОВЫЙ ПАРОЛЬ»
Strength meter	4px height · gradient bar with --pw-strength (0-100%) + --pw-color (red→orange→amber→green)
Live checklist	2-col grid · 4 items: 12+ символов / Заглавная буква / Цифра / Спецсимвол · class .is-ok (green) при passing
Password input 2	confirm field + .form-error «Пароли не совпадают»
Submit button	disabled + opacity:0.5 пока не пройдены все 4 правила И match · enable при ok
Header indicator	TOKEN · VALID red pulse dot

Password rules (RegExp):

{
  length:  function(v) { return v.length >= 12; },
  upper:   function(v) { return /[A-Z]/.test(v) || /[А-ЯЁ]/.test(v); },  // RU + EN uppercase
  digit:   function(v) { return /\d/.test(v); },
  special: function(v) { return /[!@#$%^&*(),.?":{}|<>_\-=+\[\]\/\\;'`~]/.test(v); }
}

Why 12+ символов (а не 8): admin-аккаунты критичны, NIST 800-63B рекомендует minimum 8 для general, но для privileged accounts длина больше = устойчивость к brute-force.

Strength meter colors: - 0-1 правила: red #EF4444 - 2 правила: orange #F97316 - 3 правила: amber #EBC554 - 4 правила (passing): green #22C55E

26.7 SSO-callback canonical · auto-redirect pending

Параметр	Значение
Card	.auth-card-gold max-width 520 · text-align center
Animated cube	96×96 master-cube с pulse animation (0.95→1.0 + drop-shadow gold) 1.6s ease-in-out
Caption	▸ SSO · CALLBACK · VERIFYING
H1	«Авторизация» · 30px
Progress bar	3px line · animated gradient sweep (sso-bar 1.6s linear infinite)
Terminal	4 lines (provider received · token valid · establishing session · redirect in Ns)
Countdown	3s → redirect на ?redirect=... или academy/dashboard.html
Header indicator	AUTHENTICATING… gold pulse dot

26.8 Turnstile placeholder canonical

Placeholder div в стиле бренда — для production Артём подключит реальный Cloudflare Turnstile SDK:

<div class="turnstile-placeholder">
  <div class="turnstile-check"></div>
  <div class="turnstile-text">▸ <strong>TURNSTILE</strong> · CHALLENGE</div>
  <div class="turnstile-meta">cloudflare</div>
</div>

.turnstile-placeholder {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px dashed rgba(235,197,84,0.30);
  background: rgba(235,197,84,0.03);
  margin: 12px 0 4px;
}
.turnstile-check { width: 22px; height: 22px; border: 2px solid rgba(235,197,84,0.5); background: rgba(0,0,0,0.20); }
.turnstile-text { font-family: 'JetBrains Mono'; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.turnstile-text strong { color: #EBC554; }
.turnstile-meta { margin-left: auto; font-family: 'Space Mono'; font-size: 10px; color: rgba(255,255,255,0.30); }

26.9 Anti-patterns · НИКОГДА не делать

1. ❌ Пароль в L0 signup — CEO явно отверг 04.05. Только email + код.
2. ❌ Капча от Google reCAPTCHA — у нас Cloudflare Turnstile (privacy-first, без трекинга).
3. ❌ Скролл на любом из 4 экранов — все fits 1440×900 (V3 + V1 compact).
4. ❌ Forget «или войдите через Google/Apple» — этого нет в L0 на v4.3.3 (если будет нужно — отдельный SSO flow с sso-callback.html в финале).
5. ❌ Code cells > 56px — теряется compactness, на mobile залезает за viewport.
6. ❌ Resend без cooldown — anti-abuse. 60s минимум.
7. ❌ Welcome-L0 без 3 KPI — пользователь должен сразу видеть value (47 тем / 1.2K / 28 промтов) — это hook.
8. ❌ Нет CTA на L1 в welcome-L0 — это первая активация воронки. Step 03 timeline обязательно показывает $149 L1 NEURO-OPS.
9. ❌ SSO-callback редирект без проверки origin — в production Артём должен валидировать redirect param чтобы предотвратить open-redirect attack.
10. ❌ Сохранять введённый email в localStorage — приватность. Передавать через query string (?email=...) или server session, не localStorage.
11. ❌ .eco-cap-xs без override white-space:normal для длинных строк в карточке — canonical класс принудительно nowrap, текст вылезет за padding card. Для длинных строк (>40 символов на карточке 520px) обязательно: white-space:normal; max-width:380px; margin:0 auto; letter-spacing:0.10em + перенос на 2 строки.
12. ❌ Inline текст + bordered pill в одной строке в центрированной карточке — нарушает vertical-axis симметрию. Все элементы карточки должны быть на одной центральной оси через display:block / inline-block + margin auto. Stack > inline mix.
13. ❌ Admin-flow на gold theme — admin context требует red theme (.auth-card-red) для visual cue «критическая зона». Не использовать .auth-card-gold для gate-admin/*.
14. ❌ L0 password при reset-password admin-аккаунта — admin-аккаунт = password + 2FA (исключение из L0 email-only правила). Не путать схемы.
15. ❌ Strength meter без 4 уровней цвета (red/orange/amber/green) — однотонная meter не даёт пользователю визуальной обратной связи о progress. 4 уровня обязательны.
16. ❌ Submit reset-password без disabled до 4/4 rules + match — admin-аккаунт критичен, нельзя позволить submit weak password случайно. Кнопка строго gated.
17. ❌ 2FA TOTP с другим code-input pattern (не как verify-code) — нарушает consistency UX. Один canonical 6-cell pattern для всех OTP-flow (verify-code, 2fa, в будущем sms-verify).

26.10 Decision history v4.3.3

Шаг	Решение	Источник
1	Регистрация L0 = только email + 6-digit code (как Anthropic)	CEO 2026-05-04 (память feedback_signup_email_6digits.md)
2	Разбить День 9-10 на отдельные сессии (4+4 экрана)	CEO 2026-05-05 «согласен с твоими рекомендациями»
3	Cloudflare Turnstile placeholder в стиле бренда (не skip)	CEO 2026-05-05 (production-ready вид)
4	Welcome-L0 = синдикат-метрики (47 тем / 1.2K / 28 промтов)	CEO 2026-05-05 (hook на community для прокачки в L1)
5	Все 4 fit 1440×900	canonical компактность V3 + V1
6	signup card padding 28×30, h1 28, sub 14, terminal compact	первый прогон 891px → ужал до 775
7	verify-code card padding 28×32, icon scale 0.85, max-h 50	первый прогон 878px → ужал до 775
8	sso-callback redirect target из query ?redirect=	предотвращает hardcoded path
9	sso-callback footer text — white-space:normal + max-width 380 + letter-spacing:0.10em	CEO 2026-05-05 «текст вылазит за рамку, исправить красиво». Canonical .eco-cap-xs имеет white-space:nowrap — для длинных строк нужен per-instance override. Точку заменили на тире (terminal-стиль). Текст 488px → 380px на 2 строки, fits card-inner 444px.
10	verify-code · email-pill отдельной строкой (vertical stack)	CEO 2026-05-05 «выглядит несимметрично — продумать как сделать симметрично и красиво». Было: текст «Отправили 6-значный код на» + pill [ email ] в одной строке = асимметрия. Стало: текст ↓ pill (display:inline-block + margin auto) — все элементы card по центральной оси.
11	День 10 · 4 admin/общий auth-экрана · дополнить раздел 26 (не создавать 27)	CEO 2026-05-05 «согласен с твоими рекомендациями». Это часть единой воронки auth (admin-ветка) — меньше дублирования.
12	gate-admin/2fa = 6 cells одинаковый паттерн с verify-code	CEO 2026-05-05 (consistency UX через всю экосистему). Только цвет caret/border #EF4444 вместо amber + 30s TOTP rotation countdown (RFC 6238).
13	gate-admin/reset-password = live-checklist 4 правила + strength meter	CEO 2026-05-05 (admin-аккаунты критичны, защита визуально подсказывает best practice). 4 правила: 12+/upper(RU+EN)/digit/special. Submit gated до 4/4 + match.
14	session-expired общий для L0+admin (в auth/, не gate-admin/)	upstream архитектура. Любой пользователь может потерять сеанс — экран общий, routing на правильный login делается middleware.
15	Admin-context = .auth-card-red + red-tinted backdrop + red header pulse	canonical с feedback_auth_canonical_v34.md 03.05 — visual cue «критическая зона». Admin не путать с L0 gold.

26.11 При правке auth-flow в будущих сессиях

1. Сначала — first read раздел 26 + feedback_auth_flow_canonical.md + один из 4 HTML.
2. Никогда не менять email-only схему на password (нарушает решение CEO 04.05).
3. Никогда не менять воронку signup→verify→welcome→syndicate/academy (это canonical activation flow).
4. Никогда не делать скролл на любом из 4 экранов.
5. Можно править контент cap/h1/sub/KPI tiles — но canonical таблица 26.4-26.7 утверждена CEO.
6. Можно добавить SSO buttons (Google/Apple/GitHub) на signup — но flow должен пройти через sso-callback.html для validation.
7. Перед commit — проверить fit 1440×900 через Chrome MCP на каждом из 4.

---

27 · PAYMENT FAILURE STATES · canonical (v4.3.5 · 3 экрана сбоя оплаты · finance vertical)

Назначение: покрыть recovery-сценарии оплаты единым визуальным языком. 3 экрана: checkout-failed (отклонение банком · recoverable) · checkout-3ds (3D-Secure verification · pending) · refund-request (запрос возврата 14 дней по ст. 32 ЗоЗПП РФ). Это отдельная вертикаль от auth-flow (раздел 26) — finance/payment failures, разрастётся в будущем (chargeback / partial-refund / dispute / etc.).

Re-entry якорь: «прочти контекст payment-failures-canonical» → этот раздел + feedback_payment_failures_canonical.md + 3 HTML в ecosystem-prototype/ai/.

27.1 3 экрана finance-failures

Экран	Pattern	Status accent	Семантика
checkout-failed.html	V3 dashboard pending	.is-pending (amber)	банк отклонил платёж · recoverable (try again / change card)
checkout-3ds.html	V1 single-card pending	gold theme	3D-Secure verification placeholder · ожидание SMS-кода от банка
refund-request.html	V3 form (2-col grid)	gold theme	форма запроса возврата · 14 дней по ст. 32 ЗоЗПП РФ

Почему amber pending (не red error) для checkout-failed: оплата отклонена ≠ что-то сломалось. Это recoverable state — пользователь может повторить с другой картой / СБП / USDT. Семантика «ожидание восстановления» (amber), не «ошибка» (red). Match auth/session-expired который тоже pending.

27.2 Воронки payment-failure

Flow 1 · Checkout retry:

checkout.html (carting) → submit
  ├─ success → checkout-success.html (V3 green)
  ├─ pending → checkout-redirect.html (V1 cube animated)
  ├─ 3DS required → checkout-3ds.html (V1 + bank iframe)
  │     ├─ valid SMS → checkout-success.html
  │     └─ timeout 5min → checkout-failed.html?reason=timeout
  └─ declined → checkout-failed.html?reason=R-0125 (amber pending)
                  ├─ retry → checkout.html?retry=1
                  └─ change-card → checkout.html?change-card=1

Flow 2 · Refund (post-purchase):

academy/profile.html (мои покупки)
  └─ клик «Запросить возврат» (если ≤ 14 дней) → refund-request.html
       └─ submit valid form → email confirmation → 3 рабочих дня → carts reversed via prodamus

27.3 Checkout-failed canonical · V3 dashboard pending

Параметр	Значение
Pattern	V3 dashboard (.auth-success-bar.is-pending + .auth-kpi-row + .auth-timeline-h)
Status bar	amber pending · ⊗ icon · cap «PAYMENT · DECLINED»
H1	«Оплата отклонена»
Sub	«Банк не подтвердил транзакцию. Это решаемо — попробуйте другую карту или свяжитесь с поддержкой.»
4 KPI tiles	Тариф (L1/L2/L3 + «не списано») · Сумма (USD amber) · Транзакция (auto-generated tx-id JS) · Причина (plain RU + JBM-код мелко амбер)
3-step recovery timeline	01 ПЕРВОЕ ДЕЛО (проверьте карту) → 02 АЛЬТЕРНАТИВЫ (МИР / СБП / USDT / ЮMoney) → 03 ПОДДЕРЖКА (telegram support)
2 CTAs	[ ПОВТОРИТЬ ↻ ] (btn-action gold) + [ СМЕНИТЬ КАРТУ ↗ ] (btn-outline)
Reason format	plain RU («Недостаточно средств») + JBM-код мелко (R-0125) — bank decline code rendered как brand-styled meta
TX-id JS	детерминистичный по времени tx-YYMMDD-HHMM-XXXX (как incident-код в 500.html)

Reason canonical examples (bank decline codes):

RU plain	JBM код	Состояние
Недостаточно средств	R-0125	retry → пополнить или сменить карту
Карта заблокирована	R-0218	change-card обязательно
Превышен лимит онлайн	R-0411	retry в другое время или change-card
3DS таймаут	R-T501	retry → checkout снова
Технический сбой банка	R-T999	retry через 5-10 минут
Подозрение на fraud	R-F003	свяжитесь с банком

27.4 Checkout-3DS canonical · placeholder в стиле бренда

Параметр	Значение
Pattern	V1 single-card · .auth-card-gold 560px · text-align center
Caption	▸ 3D-SECURE · BANK VERIFICATION
H1	«Подтверждение от банка» · 24px
Sub	«Введите 6-значный SMS-код из сообщения от вашего банка-эмитента.»
3DS iframe placeholder	brand-styled .ds-iframe 220px height · border dashed amber + BANK · 3DS text + WAITING FOR USER INPUT cap + spinning loader + VISA / MC / MIR · ACQUIRER metadata
Countdown	5:00 (3DS standard timeout) · gold → red при 0:00
2 CTAs	[ Я ВВЁЛ КОД В БАНКЕ ] (btn-action 200min) + [ ОТМЕНА ↗ ] (btn-outline 140min)
Terminal	TLS 1.3 ENFORCED · PCI DSS TOKENIZED · AWAITING BANK CALLBACK
Footer caption	«Код приходит за 30-60 секунд — проверьте SMS» (с override .eco-cap-xs white-space:normal)

Why placeholder, not real iframe: в production iframe рисует банк-эмитент (Сбер / Тинькофф / Альфа · разные UI). Мы показываем только обёртку — что 3DS process активен. Это match production reality + privacy-friendly (не имитируем real bank UI).

.ds-iframe styles:

.ds-iframe {
  width: 100%; height: 220px;
  border: 1px dashed rgba(235,197,84,0.30);
  background: rgba(235,197,84,0.03);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; margin: 16px 0 14px; position: relative;
}
.ds-iframe-pulse { /* spinning loader */
  width: 36px; height: 36px;
  border: 2px solid rgba(235,197,84,0.40);
  border-top-color: #EBC554;
  border-radius: 50%;
  animation: ds-spin 1s linear infinite;
}

27.5 Refund-request canonical · V1 single-card centered (CEO ревизия 05.05)

CEO ревизия 2026-05-05: «условия возврата не светить в UI — это в Оферте. Перерисовать без sidebar.» Sidebar 3 секции удалён, sliders-info → ссылка на Оферту в footer caption.

Параметр	Значение
Layout	V1 single-card centered · .auth-card-gold 580px · padding 24×32
Form rows	2-col grid (1fr 1fr gap 12): email + tx-id · tariff-select + refund-type-select
Form fields	Email (regex) · TX ID (pattern tx-[\w-]+) · Tariff select (L1/L2/L3) · Refund type select (full/partial) · Reason textarea (min-height 70, minlength 20)
Caption	▸ REFUND REQUEST · 14em letter-spacing
H1	«Запрос возврата» · 26px
Sub	«Заполните форму — рассмотрим заявку и ответим на email в течение 3 рабочих дней.» (3 дня = единственное упоминание сроков, остальное в Оферте)
Submit	[ ЗАПРОСИТЬ ВОЗВРАТ → ] btn-action gold full-width · padding 13×20
Footer caption	center · .eco-cap-xs override (white-space normal, letter-spacing 0.10em) · «Условия возврата — в Оферте · вопросы — @goldjaxe_support»

Принцип: legal-условия живут в Оферте — единственный source of truth. UI содержит только ссылку. Это: - Reduces drift (UI не расходится с офертой при правках условий) - Cleaner UX (форма короче, фокус на действии) - Legal compliance (Оферта = нормативный документ, UI = функциональный экран)

27.6 Anti-patterns · НИКОГДА не делать

1. ❌ Red error theme на checkout-failed — это recoverable state, нужен amber pending. Red = что-то сломалось безвозвратно.
2. ❌ Real bank UI имитация на checkout-3ds — банк сам рисует свою страницу. Мы показываем placeholder с метаданными (acquirer / brand / state).
3. ❌ Reason = только bank-код без plain RU — пользователь не понимает что значит R-0125. Plain RU обязательно + JBM-код мелко амбер.
4. ❌ TX-id захардкоженный — должен генерироваться JS детерминистично по времени для уникальности при reload (как incident-код в 500.html).
5. ❌ Светить условия возврата в UI refund-request — CEO 2026-05-05: «это в Оферте, не светить». Условия = в нормативном документе (Оферта). UI = только функциональная форма + ссылка на Оферту. Reduces drift между UI и legal.
6. ❌ Refund без minlength 20 на причине — короткие причины вроде «не понравилось» не дают команде data для improvement. Минимум 20 символов через JS validation.
7. ❌ Refund без TX ID — нельзя обработать запрос без идентификатора сделки. Pattern validation tx-[\w-]+.
8. ❌ Скролл на любом из 3 — все fits 1440×900. Если контент не помещается — ужать (refund-request первый прогон 933 → ужал до 775).
9. ❌ 3DS countdown < 5 минут — стандарт 3DS таймаута 5 минут (банки сами enforce). Не сокращать.
10. ❌ Checkout-3ds redirect на real bank в прототипе — это handoff Артёму на production. В прототипе — alert или redirect на mock-success.

27.7 Decision history v4.3.5

Шаг	Решение	Источник
1	checkout-failed = amber pending (не red error)	recoverable state, не permanent failure
2	Reason format = plain RU + JBM-код мелко амбер	CEO 2026-05-05 «согласен с твоими рекомендациями». Plain текст для понимания + код для support escalation.
3	3DS placeholder в стиле бренда (как Turnstile)	CEO 2026-05-05 «согласен». Real-3DS UI рисует банк, мы только обёртку.
4	Отдельный раздел 27 PAYMENT FAILURE STATES (не дополнение 26 auth)	CEO 2026-05-05 «согласен». Finance vertical разрастётся (chargeback / partial-refund / dispute).
5	refund-request 933 → 775 через ужатие padding/gap/textarea + удаление дублирующего terminal	первый прогон не fits → удалил terminal-block внизу (дублирует sidebar info) + ужал padding 24→18, h1 24→22, sub line-height 1.5→1.45
6	~~Sidebar info обязателен на refund-request~~ → CEO ревизия: sidebar удалён	CEO 2026-05-05: «условия не светить, это в оферте». Перерисовано как V1 single-card 580px, footer caption «Условия — в Оферте». Legal в нормативке, не в UI.
7	TX-id auto-generated JS на checkout-failed	reuse pattern с 500.html incident-код
8	3DS countdown 5 минут	industry standard 3DS таймаута
9	refund-request final layout V1 centered (не V3 form 2-col)	CEO ревизия 2026-05-05. Cleaner UX · единственное упоминание срока в UI — «3 рабочих дня на ответ», остальное в Оферте.

27.8 При правке payment-failures в будущих сессиях

1. Сначала — first read раздел 27 + feedback_payment_failures_canonical.md + один из 3 HTML.
2. Никогда не менять mapping checkout-failed → amber pending (recoverable семантика).
3. Никогда не менять sidebar 3 секции на refund-request без апрува CEO (legal-compliant content).
4. Никогда не делать real bank UI на checkout-3ds.
5. Можно добавить новые failure states (chargeback / partial-refund / dispute / pending-review) — копировать одну из 3 как шаблон + добавить в таблицы 27.1, 27.3-5.
6. Можно добавить новые reason codes в таблицу 27.3 — формат plain RU + JBM-код.
7. Перед commit — fit 1440×900 на каждом из 3 (Chrome MCP bodyH <= vpH).

---

28 · ACADEMY CERTIFICATE · canonical (v4.4.2 · золотой стандарт CEO 2026-05-05)

Назначение: официальный сертификат GOLDJAXE Academy. A4 landscape 842/595 · cube 160px (16% paper) · cert-name 48px gold gradient foil. Используется для всех tier (L0–L3 + специальные). Зафиксирован CEO 2026-05-05: «сейчас сертификат идеален — зафиксируй чтобы не потерять».

Single source of truth: ecosystem-prototype/academy/certificate.html. Все будущие сертификаты — копировать 1-в-1, менять только текстовый контент.

Re-entry якорь: «прочти контекст certificate-canonical» → этот раздел + feedback_certificate_canonical.md + academy/certificate.html.

28.1 Paper (A4 landscape standard · НЕ ЛОМАТЬ)

Параметр	Значение
aspect-ratio	842/595 (1.414 · A4 landscape RU/EU стандарт)
max-width	920px (fit 1440×900 с margin)
padding	40px 80px (compact vertical · spacious horizontal)
border	3px solid #EBC554
box-shadow	0 40px 100px rgba(0,0,0,0.8) + 0 0 80px rgba(235,197,84,0.15)
Background	linear-gradient(135deg, var(--bg-primary) 0%, #0F0F0F 50%, var(--bg-primary) 100%)

28.2 Stage (контейнер)

Параметр	Значение
padding	16px 20px
min-height	calc(100vh - 56px)
Background	radial-gradient(ellipse 80% 60% at 50% 50%, rgba(235,197,84,0.06), rgba(8,8,8,1) 70%)

28.3 Cube monogram (главный якорь)

Параметр	Значение
Size	160×160px (16% paper width — золотой стандарт)
margin-bottom	14px
Filter	drop-shadow(0 0 24px rgba(235,197,84,0.35)) drop-shadow(0 0 48px rgba(235,197,84,0.18))

Why 16%: Apple Education ~14% · Coursera ~13-15% · Harvard Extension ~16-18% · GOLDJAXE 16% — premium-зона. НЕ менять.

28.4 Caption stack (под cube)

Element	Стиль
.cert-cap	Space Mono 12 · 0.30em · gold · uppercase · mb 8
.cert-cap-sub	Space Mono 12 · 0.20em · faint · uppercase · mb 22
Content cap	▸ CERTIFICATE OF COMPLETION (fixed)
Content cap-sub	GOLDJAXE [ ACADEMY ] (brand signature)

28.5 Course block

Element	Стиль
.cert-course	Inter 800 · 40px · uppercase · ls -0.005em · lh 1.05 · text-primary · mb 8 · text-shadow 0 0 30 border-default
.cert-course-sub	Inter italic 14 · text-muted · mb 22

28.6 Recipient (GOLD FOIL EFFECT · критический element)

.cert-name {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 48px;        /* ← canonical · НЕ менять */
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
  margin-bottom: 18px;
  background: linear-gradient(180deg, #F8F080 0%, #EBC554 50%, #C9A332 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(235,197,84,0.30);
  filter: drop-shadow(0 2px 8px rgba(235,197,84,0.20));
}

Cap	Стиль
.cert-issued (над именем)	JBM Bold 12 · 0.25em · text-muted · uppercase · «▸ ВЫДАН» · mb 10

28.7 Stats row (4 показателя)

Element	Стиль
.cert-stats	flex · gap 32 · mb 22
.cert-stat-num	Inter 700 · 23px · gold · lh 1
.cert-stat-label	JBM Bold 12 · 0.20em · faint · uppercase · mt 4
.cert-divider	1px × 28 · gold rgba 0.30

28.8 Bottom row + decorations

Element	Стиль
.cert-bottom	grid 1fr/auto/1fr · gap 24 · pt 16 · border-top gold 0.20
Layout	left: дата выдачи · center: подпись CEO · right: serial verify
.cert-inner-border	abs · top/left/right/bottom 16 · border 1px gold 0.30
.cert-corner-bracket × 4	abs · 24×24 · gold · позиция 32px от paper edge

28.9 Vertical rhythm (canonical 1-в-1)

[paper top 40]
[cube 160 + double-glow]
↓ 14
[CERTIFICATE OF COMPLETION cap]
↓ 8
[GOLDJAXE [ ACADEMY ] sub]
↓ 22
[INITIATION PROTOCOL · 40px white]
↓ 8
[Архитектура Превосходства · 14 italic]
↓ 22
[▸ ВЫДАН]
↓ 10
[Сергей Архангельский · 48 GOLD FOIL]
↓ 18
[stats row · 4 nums]
↓ 22
[bottom row · дата / подпись / verify]
[paper bottom 40]

Total ~679px content fits in 920×651 paper (aspect 1.414).

28.10 Fit 1440×900

Header 56 + Stage padding 16 + Paper 679 + Stage padding 16 = 767px ≤ 775 ✓

Visual fit достигнут. JS document.body.scrollHeight может > 775 из-за min-height: calc(100vh - 56px) на stage — это CSS математика, не реальный scroll. Paper целиком visible.

28.11 Anti-patterns · НИКОГДА не делать

1. ❌ Cube < 140 или > 200px — выйдет из премиум-диапазона 14-20% paper width.
2. ❌ cert-name > 50px — нарушит hierarchy с cube (CEO явно отверг 58).
3. ❌ Убрать gold-foil effect (gradient + text-shadow + filter drop-shadow) — премиум-feeling потеряется.
4. ❌ Изменить aspect-ratio ≠ 842/595 — нарушит A4 standard для печати.
5. ❌ Paper max-width ≠ 920px без апрува CEO — fit в 1440×900 ломается.
6. ❌ Single drop-shadow на cube (вместо двойного) — теряет «парящий» эффект.
7. ❌ Убрать .cert-inner-border или corner brackets — это brand-marker (как в .org Vault).
8. ❌ Изменить gold gradient на recipient — #F8F080 → #EBC554 → #C9A332 это canonical (как .h1-org в landing).
9. ❌ Multi-line cert-name — сертификат на одну строку, длинные имена — добавлять font-size: clamp или сокращать до initials.
10. ❌ Captions на русском — «CERTIFICATE OF COMPLETION» и «GOLDJAXE [ ACADEMY ]» fixed на английском (международный стандарт).
11. ❌ Темы (light theme) override на сертификат — сертификат всегда тёмный (премиум-feeling). Light theme = другой контекст (печать вообще требует другой stylesheet).

28.12 Decision history v4.4.2 (полная)

Шаг	Решение	Источник
1	Base refactor: padding 60→50 · course 38→40 · name 56→58 · stat 22→23	v4.4.2 first pass (план Path A)
2	CEO 05.05 · «увеличить логотип в 2-3 раза + уменьшить cert-name + senior 18+»	senior redesign request
3	Cube 64 → 160 (×2.5 · 16% paper) + double drop-shadow gold (24+48)	senior canon (Apple/Coursera/Harvard reference)
4	cert-name 58 → 48 (-17%)	hierarchy через gradient+glow, не размер
5	CEO · «чуть сузить, влез без прокрутки»	fit issue
6	Paper 1000 → 920 + stage 40→16 + paper-padding 50→40	-8% width + tight margins
7	Internal margins compact (cube-mb 22→14 · cap-sub 32→22 · course-sub 36→22 · issued 14→10 · name 26→18 · stats 36→22 · bottom 24→16)	total gain ~50px
8	CEO 05.05 · «сейчас сертификат идеален — зафиксируй золотой стандарт»	canon FIXED

28.13 При правке в будущих сессиях

1. Сначала — first read раздел 28 spec + feedback_certificate_canonical.md + certificate.html.
2. Никогда не менять cube 160 / cert-name 48 / paper 920 / aspect 842/595 / double drop-shadow / gold-foil gradient — golden standard CEO 05.05.
3. Можно создавать новые сертификаты per-tier (L0/L1/L2/L3) — копировать файл, менять только текстовый контент (course title · recipient name · stats numbers · date · serial).
4. VIP L3 вариант — допустимо purple accent #C44DFF вместо gold (как в landing.html .tier-btn-l3 paradigm), всё остальное canonical.
5. Перед commit — fit 1440×900 проверить через Chrome MCP (bodyH ~767).

---

29 · ACADEMY ADMIN SIDEBAR + FORM THEME PILL · canonical (v4.4.8 · Sidebar Б · CEO утвердил 2026-05-05)

29.0 Концепт

Раздел применяется к admin-страницам академии — где пользователь управляет своим аккаунтом (настройки, платежи). Это НЕ учебный контент (dashboard / lesson-viewer). Sidebar даёт двух-уровневую навигацию (АККАУНТ · ОБУЧЕНИЕ) с активной страницей подсвеченной амбером.

Утверждено CEO 2026-05-05 (День 15 retry · Path A Этап 3) после визуального демо 3 вариантов (А · linear-style / Б · stripe-style / В · brand-cyber). Выбран Б как стандарт для админ-панели Академии.

29.1 Где применяется

ДА — применяется: - academy/settings.html — настройки аккаунта - academy/billing.html — платежи и история

НЕТ — не применяется (у них свой sidebar по своему назначению): - academy/dashboard.html — учебный экран (KPI + activity feed, не nav) - academy/lesson-viewer.html — просмотр урока (sidebar = lesson navigation, не account) - academy/profile.html — accordion (по плану Дня 17-18, без sidebar) - gate-admin/* — admin OPS Deck V6 (другой паттерн, sidebar 64↔240 collapsible)

29.2 Sidebar canonical · .eco-sidebar-*

Структура

<aside class="border-r border-[var(--border-faint)] py-6 px-3 lg:sticky lg:top-[72px]" style="height:fit-content;">
  <div class="eco-sidebar-group">АККАУНТ</div>
  <a href="profile.html" class="eco-sidebar-link">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><!-- person icon --></svg>
    Профиль
  </a>
  <a href="billing.html" class="eco-sidebar-link">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><!-- card icon --></svg>
    Платежи
  </a>
  <a href="settings.html" class="eco-sidebar-link active">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><!-- gear icon --></svg>
    Настройки
  </a>

  <div class="eco-sidebar-group">ОБУЧЕНИЕ</div>
  <a href="dashboard.html" class="eco-sidebar-link">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><!-- cap icon --></svg>
    Мои протоколы
  </a>
  <a href="courses.html" class="eco-sidebar-link">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><!-- book icon --></svg>
    Все протоколы
  </a>
  <a href="certificate.html?courseId=L0" class="eco-sidebar-link">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><!-- medal icon --></svg>
    Сертификаты
  </a>
</aside>

Aside-grid: grid-cols-[240px_1fr] (sidebar 240px фиксирован · main flex). Sticky top:[72px] (под header 77px).

Размеры/типографика

Элемент	Параметр	Значение
.eco-sidebar-group	font	Inter 11px / weight 600
	letter-spacing	0.06em
	text-transform	UPPERCASE
	color	var(--text-faint)
	padding	0 12px 8px
	border-bottom	1px solid var(--border-faint)
	margin-top	24px (первый = 0)
.eco-sidebar-link	font	Inter 14px / weight 500
	color	var(--text-secondary)
	padding	9px 12px
	gap (icon ↔ text)	12px
	transition	all 150ms ease
.eco-sidebar-link svg	size	16×16px
	stroke-width	1.75
	opacity	0.55 (hover 0.85, active 1)

Состояния

• Default · text-secondary · icon opacity 0.55
• :hover · text-primary · bg rgba(255,255,255,0.04) (dark) / rgba(0,0,0,0.04) (light) · icon opacity 0.85
• .active / .is-active · color amber · bg rgba(amber-rgb, 0.10) · weight 600 · icon color amber + opacity 1

Иконки SVG (для копирования)

Ссылка	viewBox 24×24 fill=none stroke=currentColor
Профиль	<circle cx="12" cy="8" r="4"/><path d="M4 21v-1a7 7 0 0 1 14 0v1"/>
Платежи	<rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20"/>
Настройки	<circle cx="12" cy="12" r="3"/> + полная gear path (см. settings.html для полного path)
Мои протоколы	<path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/> (graduation cap)
Все протоколы	<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/> (open book)
Сертификаты	<circle cx="12" cy="11" r="4"/><path d="M8.21 13.89 7 23l5-3 5 3-1.21-9.12"/> (medal)

29.3 Form Theme Pill · .eco-theme-pill

Концепт

Двух-кнопочный icon pill 88×36 для полей формы «Тема» в секции настроек интерфейса. Точно matching по размеру с canonical .eco-lang-switcher — единый визуальный язык управления (язык + тема рядом смотрятся как одинаковые компоненты).

ВНИМАНИЕ — НЕ ПУТАТЬ С .eco-theme-btn:

Класс	Где живёт	Что делает
.eco-theme-btn	в хедере (<header>)	Одна кнопка 38×36 с иконкой луны · cycle dark/light по клику
.eco-theme-pill	в форме (center page)	Двух-кнопочный pill 88×36 · explicit dark/light выбор

Header не трогаем — .eco-theme-btn остаётся canonical. Урок 2026-05-05 (День 15 retry попытка #2): я ошибся и предлагал заменить header — CEO раздражённо отверг. См. memory feedback_header_canonical_v3.md секция «Урок 2026-05-05».

Структура

<div class="eco-theme-pill">
  <button class="active" data-page-theme="dark" title="Тёмная тема">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
    </svg>
  </button>
  <button data-page-theme="light" title="Светлая тема">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="4"/>
      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
    </svg>
  </button>
</div>

Размеры

Параметр	Значение	Соответствие
Container height	36px	= .eco-lang-switcher
Container width	88px (2 × 42 + border)	= .eco-lang-switcher
Button width	42px	= .eco-lang-btn (44px) -2px symmetry
Button height	34px	внутри 36 + border 1×2
SVG size	15×15px	визуально matching 16px Lang text

Состояния

• Default · background transparent · color text-primary
• :hover (не active) · color amber · background rgba(amber-rgb, 0.05)
• .active / .is-active · background amber · color bg-secondary

JavaScript для синхронизации с темой

// PAGE theme pill (canonical .eco-theme-pill in form)
document.querySelectorAll('[data-page-theme]').forEach(btn => {
  btn.addEventListener('click', () => {
    const t = btn.getAttribute('data-page-theme');
    document.documentElement.setAttribute('data-theme', t);
    localStorage.setItem('eco-theme', t);
    document.querySelectorAll('[data-page-theme]').forEach(b => b.classList.toggle('active', b.getAttribute('data-page-theme') === t));
  });
});

// Sync at init
const curTheme = document.documentElement.getAttribute('data-theme') || 'dark';
document.querySelectorAll('[data-page-theme]').forEach(b => b.classList.toggle('active', b.getAttribute('data-page-theme') === curTheme));

// Sync when header theme button clicked (header → page)
document.querySelectorAll('[data-theme-toggle]').forEach(btn => {
  btn.addEventListener('click', () => {
    setTimeout(() => {
      const t = document.documentElement.getAttribute('data-theme');
      document.querySelectorAll('[data-page-theme]').forEach(b => b.classList.toggle('active', b.getAttribute('data-page-theme') === t));
    }, 50);
  });
});

29.4 Form Lang Switcher в settings · переиспользуем .eco-lang-switcher

В поле «Язык интерфейса» секции «Интерфейс» не плодим новый класс — переиспользуем canonical .eco-lang-switcher (тот же что в хедере). Атрибут data-page-lang="ru/en" различает page-level pill от header-level (data-lang-btn).

<div class="eco-lang-switcher">
  <button class="eco-lang-btn eco-lang-btn-active" data-page-lang="ru">RU</button>
  <button class="eco-lang-btn" data-page-lang="en">EN</button>
</div>

JS — двух-направленная синхронизация (page → html → header pill). См. settings.html.

29.5 Page-isolated section labels · префикс .{page}-section-*

В админ-панели каждая страница может иметь свои секции. Чтобы не было конфликта классов между страницами (settings.html .section-title vs billing.html .section-title), применяем префикс по странице:

Страница	Класс title	Класс desc
settings.html	.settings-section-title	.settings-section-desc
billing.html	(использует canonical .eco-cap-sm для секций · нет своего)	—

Принцип: если в page-style блоке появляется .section-* — обязательно префиксировать на имя страницы. Не оставлять generic .section-title (legacy).

29.6 Token migration · danger-zone

В secondary .danger-zone блоке (settings.html «Опасная зона») использовали hardcoded rgba(239,68,68,...) × 4 occurrences. Заменили на var(--accent-error) через color-mix(in srgb, ... N%, transparent):

/* Было (v4.4.7) */
.danger-zone { border:1px solid rgba(239,68,68,0.40); background: rgba(239,68,68,0.03); }
.danger-zone .section-title { color: #EF4444; }

/* Стало (v4.4.8) */
.danger-zone { border:1px solid color-mix(in srgb, var(--accent-error) 40%, transparent); background: color-mix(in srgb, var(--accent-error) 3%, transparent); }
.danger-zone .settings-section-title { color: var(--accent-error); }

Это даёт автоматическую light theme (где --accent-error: #DC2626 вместо #EF4444).

29.7 Decision history v4.4.8

Шаг	Решение	Источник
1	Демо 3 вариантов sidebar (А linear / Б stripe / В brand-cyber)	senior UX 18+ предложение CEO
2	CEO 05.05 · «выбираем Б — и так как это админ панель то зафиксируй этот стиль везде»	canon выбор
3	Демо переключателя темы (T1 single / T2 icon-pill / T3 text-pill) — попытка #1 с заменой в хедере	моя ошибка
4	CEO 05.05 (раздражённо) · «ты мне не понял и полез менять в хедер. его менять не нужно это наш утверждённый стандарт»	header immutable урок
5	Demo c правкой только center page (settings.html секция «Интерфейс»)	поправил подход
6	CEO 05.05 · «сейчас всё отлично. фиксируем»	canon утверждён
7	Master CSS + spec + apply settings + billing + verify + push	этот раздел

29.8 При правке в будущих сессиях

1. Сначала — first-read этот раздел + feedback_header_canonical_v3.md (для урока «не трогать header»).
2. Не путать .eco-theme-btn (header) с .eco-theme-pill (form). Заменить нужно — спросить CEO.
3. Не плодить .section-title / .section-desc без префикса — page-isolation обязательно.
4. Не использовать .toggle-pill для language/theme в новых формах. Только canonical .eco-lang-switcher + .eco-theme-pill.
5. Hardcoded rgba(239,68,68,...) для error/danger — мигрировать на color-mix(in srgb, var(--accent-error) N%, transparent).
6. Эмодзи в sidebar nav — запрещены. Только SVG-иконки 16×16 stroke-width 1.75.

---

30. QUIZ / TEST CANONICAL PATTERN (v4.4.9 · Path A День 16)

Когда применять: интерактивные экраны проверки знаний — quiz/test/exam в Academy (L0–L3), Syndicate certification, любые multiple-choice экраны. Утверждено CEO 2026-05-05 после 7 итераций (v1→v6 + 5 layouts вариантов demo).

30.1 Концепт · философия финал-экранов применённая к интерактиву

Корневая ошибка раннего подхода (v1-v6): quiz использовал max-width: 760px (узкий column) с вертикальным списком 4 опций. На 1440×900 viewport это давало карточку 615px + intro/buttons/foot → выход за viewport, скролл.

Решение v4.4.9 final: применить к quiz те же принципы что у финал-экранов (lesson-completed / checkout-success / failed):

Финал-экраны	Применили к quiz
max-width: 1100px widе container (.auth-dashboard-container)	Quiz container max-width: 1100px
4 KPI tiles горизонтально (.auth-kpi-row grid 4 cols)	4 опции в grid 2×2 (вместо вертикального списка)
Vertical content минимизирован	Карточка 440px (было 615px · -28%)

Результат: total page 704px (бюджет 823) → fit на любом ноутбуке включая 12-дюймовые с DevTools dock. Никакого скролла. Кнопки никогда не двигаются.

30.2 Спецификация компонентов

Container

#state-progress { max-width: 1100px; margin: 0 auto; padding: 16px 24px; }

Question card

.question-card {
  border: 1px solid var(--border-faint);
  padding: 28px 32px;
  background: var(--bg-primary);
  min-height: 440px; /* фиксированная — кнопки не двигаются при .is-answered */
  display: flex;
  flex-direction: column;
}
.question-num { font: 700 13px/1 'JetBrains Mono'; ls 0.14em; color: #EBC554; uppercase; margin-bottom: 10px; flex-shrink: 0; }
.question-text { font: 700 20px/1.3 'Inter'; ls -0.005em; color: var(--text-primary); margin-bottom: 16px; flex-shrink: 0; min-height: 52px; /* резерв на 2-line вопросы */ }

Options · GRID 2×2 (canonical)

#q-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Дышат до ответа — 1fr distribution */
.question-card:not(.is-answered) #q-options { flex: 1; grid-template-rows: 1fr 1fr; }
/* Фиксированы 86px после ответа — симметрия идеальная */
.question-card.is-answered #q-options { flex: 0 0 auto; grid-template-rows: 86px 86px; }

.option {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: border-color 200ms, background-color 200ms;
  background: transparent;
  position: relative;
}
.option:hover { border-color: #EBC554; background: rgba(235,197,84,0.04); }
.option input { display: none; } /* radio скрыт — заменён буквами */
.option-text { font-size: 16px; line-height: 1.4; flex: 1; }

Буквы А/Б/В/Г (RU) или A/B/C/D (EN) · auto через [data-lang]

.option::before {
  font: 800 32px/1 'Inter';
  color: #EBC554;
  min-width: 38px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 200ms, color 200ms;
}
.option:hover::before { opacity: 1; }
/* RU дефолт */
.option:nth-child(1)::before { content: 'А'; }
.option:nth-child(2)::before { content: 'Б'; }
.option:nth-child(3)::before { content: 'В'; }
.option:nth-child(4)::before { content: 'Г'; }
/* EN автоматически через атрибут html[data-lang="en"] */
[data-lang="en"] .option:nth-child(1)::before { content: 'A'; }
[data-lang="en"] .option:nth-child(2)::before { content: 'B'; }
[data-lang="en"] .option:nth-child(3)::before { content: 'C'; }
[data-lang="en"] .option:nth-child(4)::before { content: 'D'; }

Никакого JS для переключения букв — чисто CSS. Когда theme-lang.js меняет data-lang на html — буквы меняются вместе со всеми текстами автоматически.

Состояния опций (correct/wrong/shown-correct)

.option.selected { border-color: #EBC554; background: rgba(235,197,84,0.06); }
.option.selected::before { opacity: 1; }

.option.correct { border-color: #22C55E; background: rgba(34,197,94,0.06); pointer-events: none; }
.option.correct::before { color: #22C55E; opacity: 1; }
.option.correct::after { content: '✓'; color: #22C55E; font-size: 22px; font-weight: 700; margin-left: auto; align-self: center; flex-shrink: 0; }

.option.wrong { border-color: #EF4444; background: rgba(239,68,68,0.06); pointer-events: none; }
.option.wrong::before { color: #EF4444; opacity: 1; }
.option.wrong::after { content: '✗'; color: #EF4444; font-size: 22px; font-weight: 700; margin-left: auto; align-self: center; flex-shrink: 0; }

.option.shown-correct { border-color: rgba(34,197,94,0.40); background: rgba(34,197,94,0.04); pointer-events: none; }
.option.shown-correct::before { color: #22C55E; opacity: 0.85; }
.option.shown-correct::after { content: '✓'; color: #22C55E; font-size: 18px; font-weight: 700; margin-left: auto; align-self: center; flex-shrink: 0; opacity: 0.6; }

Explanation (только в .is-answered state)

.explanation {
  padding: 14px 18px;
  border-left: 3px solid #EBC554;
  background: rgba(235,197,84,0.04);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-top: auto; /* прижимается к низу карточки */
  display: none;
}
.explanation.show { display: block; }
.explanation strong { color: #EBC554; }

JS toggle .is-answered

function showAnswer(selectedIdx) {
  document.getElementById('question-card').classList.add('is-answered');
  // ... apply .correct/.wrong/.shown-correct на options + show explanation
}

function renderQuestion() {
  document.getElementById('question-card').classList.remove('is-answered');
  document.getElementById('q-explanation').classList.remove('show');
  // ... render options + bind events
}

30.3 Финальные / провальные экраны (canonical неизменный)

После прохождения квиза — используются canonical V3 dashboard layout (как lesson-completed):

• .auth-success-bar.is-success (passed) или .is-error (failed) с 68px ring icon + cap + h1 + sub + 2 CTAs
• .auth-kpi-row 4 tiles (правильно/балл/время/попытка для passed; правильно/балл/нужно/осталось для failed)
• .auth-timeline-h 3 шага horizontal (что завершено / следующий шаг / впереди)

См. раздел 26 (V3 dashboard pattern) и memory feedback_canonical_reference_screens_v4.md (5 эталонов).

30.4 Модалка «Что повторить» (для failed state)

Используется canonical .modal-card.is-info (F-canonical v4.2.8 · раздел 20):

<dialog class="modal-card is-info" id="review-modal">
  <button class="modal-close">×</button>
  <div class="modal-cap">▸ ЧТО ПОВТОРИТЬ</div>
  <h2 class="modal-h1">Слабые места модуля</h2>
  <div class="modal-body">
    <div class="review-list" style="text-align:left;">
      <div class="review-item"><a class="review-item-link">▸ Урок 1 · ...</a><div class="review-item-hint">...</div></div>
      <!-- repeat 3 уроков -->
    </div>
  </div>
  <div class="modal-actions">
    <a class="btn-action">[ ОТКРЫТЬ УРОК 1 → ]</a>
    <button class="btn-outline">[ ЗАКРЫТЬ ]</button>
  </div>
</dialog>

Триггер — кнопка [ СЛАБЫЕ МЕСТА → ] в failed-плашке .auth-success-cta.

30.5 Compact-fold измерения · 1440×900 viewport

Состояние	Card height	Total content	Бюджет 823	Резерв
In-progress (interactive)	440px	704px	≤823 ✓	119px
Passed (V3 dashboard)	n/a	495px	≤823 ✓	328px
Failed (V3 dashboard)	n/a	495px	≤823 ✓	328px
Modal open	620px max-w (F-canonical)	overlay	viewport-relative	—

Total page = header 77 + content + auto-padding ≤ 900px на любом из 3 состояний. Никакого скролла.

30.6 Closed precedent 69 · 3 правила для интерактивных экранов

Применяется ко всем quiz/form/wizard экранам с динамическим контентом:

Правило 1 · Никакой пустоты ни в одном состоянии

Контент дышит когда мало (через flex: 1 на ячейках), сжимается до normal когда нужно освободить место для нового контента. Использовать display: grid с 1fr rows для автоматической distribution.

.container:not(.is-answered) #items { flex: 1; grid-template-rows: 1fr 1fr; }
.container.is-answered #items { flex: 0 0 auto; grid-template-rows: <fixed>px <fixed>px; }

Правило 2 · Симметрия одно-уровневых элементов

Опции/поля/карточки одной группы должны иметь одинаковую высоту через min-height: max-of-longest или grid auto-distribution. Даже если одна 1-line, а другая 2-line — обе равны max через grid 1fr 1fr или <fixed>px <fixed>px.

Правило 3 · Применять философию финал-экранов

Если интерактивный экран не fits в viewport: использовать max-width: 1100px widе container + горизонтальные ряды (grid 2×N для опций, grid 4 cols для KPI, etc.) вместо узких columns с вертикальными списками.

30.7 Anti-patterns (что не делать)

1. ❌ Quiz container max-width: 760px с вертикальным списком 4+ опций — не fit на ноутбуках
2. ❌ Compact-after-action на critical content (опции квиза) — снижает читабельность (отвергнут CEO в v2)
3. ❌ Min-height >> max-content → внутренняя пустота карточки (отвергнут в v1, v3)
4. ❌ min-height: 71px на не-симметричных опциях с разными content (1-line vs 2-line) → асимметрия (отвергнут в v6)
5. ❌ Замена radio на JS-rendered буквы внутри HTML — overkill, используем CSS nth-child + ::before
6. ❌ Hard-coded 'А' без EN override — буквы должны переключаться автоматически с языком
7. ❌ Measure через Chrome MCP сразу после checkAnswer() без отключения CSS transition — поймаешь промежуточное состояние

30.8 Decision history v4.4.9 (для контекста)

Шаг	Что	Реакция CEO
День 16 старт	3 вопроса по объёму/кольцу/модалке	«по всем трем согласен»
v1 (min-h 530)	Карточка фикс 530, опции normal	«незначительный скролл, пустое место»
v2 (compact opts)	Опции схлопываются до compact 12.5px	«опции узкие, пустое место»
v3 (min-h 514, expl auto)	Точная высота + explanation margin-top auto	«пустое место до реакции»
v4 (опции flex:1 дышат)	Опции дышат до ответа, normal после	«рамки несимметричные, шрифт мелкий»
v5 (min-h 71 на opts + dual font)	Симметрия 71 + font 15/14 dual	«не понравилось — откат»
v6 (откат + min-h 71)	Откат к v4 + только min-h 71 для симметрии	«всё равно не нравится поле»
5 demo вариантов	В1 «Крупнее» / В2 «Грид узкий» / В3 «Метки» / В4 «WIDE 2×2» / В5 «WIDE+БУКВЫ»	«делай все три и покажи» → выбрал В4, потом «скрести с буквами» → V5
V5 final	WIDE 1100 + grid 2×2 + буквы А/Б/В/Г / A/B/C/D auto	«сейчас просто супер круто. фиксируй»

30.9 При правке quiz/test экранов в будущих сессиях

1. Сначала — first-read этот раздел + раздел 26 (V3 patterns для финалов) + раздел 20 (modal F-canonical).
2. Не отступать от max-w 1100 + grid 2×2 — это canon.
3. Не отступать от букв через nth-child + ::before + [data-lang] — это canon универсального i18n.
4. Не дублировать finals (V3 dashboard) — копировать 1-в-1 из lesson-completed.html для consistency.
5. Не путать display: none на radio (заменён буквами) с visibility: hidden (резервирует место).
6. При расширении quiz на L1-L3 / Syndicate certification — копировать lesson-quiz.html как template, менять только QUIZ_DATA + module title в header.

30.10 Re-entry якорь

«прочти контекст quiz-canonical» → этот раздел + memory feedback_no_scroll_on_interaction.md + раздел 26 (V3 patterns) + раздел 20 (modal F-canonical) + master CSS блок (lesson-quiz.html <style>).

30.11 Footer rules для Academy экранов (v4.4.10 audit fix)

Decision rule (закрепляющий): в Academy экосистеме <footer class="eco-footer"> (триадный footer с product tiles VISION/INNOVATIONS/VAULT + copyright) применяется НЕ ко всем экранам.

Тип экрана	Footer	Примеры
Marketing / landing	✓ ОБЯЗАТЕЛЕН	ai/landing.html, goldjaxe.com, goldjaxe.org главные
Login / auth flow	✓ ОБЯЗАТЕЛЕН	academy/login.html, auth/welcome-l0.html, gate-admin/login.html
UI-app экраны академии	❌ НЕ ИСПОЛЬЗУЕТСЯ	dashboard.html, lesson-*.html, investor-portal.html, certificate.html, profile.html, settings.html, billing.html, lesson-quiz.html, lesson-completed.html, lesson-viewer.html, onboarding.html
Compact status / V3 dashboard	❌ НЕ ИСПОЛЬЗУЕТСЯ	checkout-success.html, enterprise-thanks.html, auth-magic-link.html

Why: UI-app экраны нужно fit в 1440×900 без скролла. Триадный footer 208px при mainH ~700-800 даёт overflow в 100-200px. Marketing footer = navigation hub для пользователя который не знает куда дальше; UI-app пользователь УЖЕ внутри продукта, навигация через хедер достаточна.

Migration check (для будущих audit'ов): при работе с любым Academy-экраном — grep -c "<footer" filename.html. Если 1 — экран marketing/login, оставить. Если 0 — UI-app, не добавлять.

30.12 Принцип ретроспективного audit'а (v4.4.10)

Когда применять: при закрытии нового canonical pattern (V3 dashboard, F-modal, quiz canonical, no-scroll правило) — прогнать iframe-replay всех уже закрытых экранов через тот же rule, отлавливать не-консистентные.

Why: без этого «дрейф» дизайна между релизами. Пример: v4.4.9 закрыл no-scroll правило → audit нашёл 2 экрана (certificate, dashboard) которые этому правилу не соответствуют → исправил → консистентность восстановлена.

Workflow: 1. После закрытия canonical pattern → определить scope экранов где применяется 2. Прогнать iframe-replay (см. 30.13) с измерением high-priority метрик (overflow, hasScroll, mainW, etc.) 3. Категоризировать результаты: - ✅ fits — не трогать - ⚠️ overflow малый (≤300px) — кандидат на исправление - ❌ by design (catalog/long-list) — не трогать, проверить above-the-fold 4. Исправить кандидатов через те же принципы что новый pattern диктует 5. Зафиксировать findings в CHANGELOG (audit-блок) + memory + spec

Триггер audit'а: в начале каждого нового Дня Path A — прогонять iframe-replay 9 ранее закрытых Academy экранов. Это 30 секунд через preview_eval, ловит дрейф автоматически.

30.13 iframe-replay методика (Chrome MCP)

Для batch-замеров экранов через preview_eval (без переключения навигации):

(async function(){
  const screens = ['screen1', 'screen2', 'screen3', /* ... */];
  const results = [];
  for (const name of screens) {
    const iframe = document.createElement('iframe');
    iframe.style.cssText = 'width:1440px;height:900px;border:none;position:fixed;top:-99999px;left:0;';
    iframe.src = '/ecosystem-prototype/academy/' + name + '.html?v=' + Date.now();
    document.body.appendChild(iframe);
    await new Promise(r => { iframe.onload = () => setTimeout(r, 1000); setTimeout(r, 5000); });
    const doc = iframe.contentDocument;
    const docH = doc.documentElement.scrollHeight;
    results.push({
      screen: name,
      docH: docH,
      overflow: Math.max(0, docH - 900),
      fit: docH <= 900 ? '✓' : '✗'
    });
    iframe.remove();
  }
  return results;
})()

Cache-bust: ?v=' + Date.now() критичен — без него iframe берёт из browser cache старую версию.

Wait timing: setTimeout(r, 1000) после iframe.onload — для рендера шрифтов и async-скриптов (i18n). Fallback setTimeout(r, 5000) если iframe вообще не loaded (медленный CDN).

Что измерять при audit'е: - docH — общая высота документа - overflow — Math.max(0, docH - 900) (бюджет 900px на 1440×900 viewport) - hasScroll — docH > 900 - Top-level body children с их высотами (для определения причины overflow) - Главные блоки (header, main, footer, persona-switcher и т.д.) — определить кто виноват в overflow

Главное правило: ВСЕГДА проверять не только initial state, но и interactive states (после кликов, заполнения форм, появления explanation/error messages). Closed precedent 69 проверяется через transition-disabled measure (см. 30.6 anti-pattern catch).

30.14 Re-entry для audit'а (extended)

«прогони audit Academy» → этот раздел 30.11-13 + memory feedback_no_scroll_on_interaction.md audit раздел + iframe-replay скрипт.

---

31. PROFILE ACCORDION CANONICAL (v4.4.11 · Path A День 17)

🔒 ЖЕЛЕЗОБЕТОННЫЙ pattern. При любом будущем дизайне screen с разделами «вкладок» (profile / settings sub-sections / FAQ / collapsible info-cards) — first read этот раздел.

31.1 Концепт · Native HTML accordion без JS

CEO 2026-05-06 утвердил: на academy/profile.html вкладки (sticky tabs .nav-tab) заменены на accordion-блоки. Применённый принцип:

1. Native <details>/<summary> вместо custom JS-toggle. Accessible by default (a11y бесплатно), keyboard navigation встроена (Tab/Enter/Space).
2. Single-open поведение через name="" (HTML spec 2024) — все <details name="X"> работают как radio: открыть один = автоматически закрыть остальные. Без JavaScript.
3. Compact-fold 1440×900 на любом состоянии: один блок открыт + 3 свёрнутых = всегда fits в бюджет 900px (closed precedent 69 соблюдается автоматически — пользователь физически не может открыть несколько одновременно).
4. CSS-only chevron rotation через [open] selector + transform: rotate(90deg).

31.2 Структура HTML

<section class="py-5 px-6">
  <div class="max-w-[1100px] mx-auto">

    <!-- BLOCK 1 (open by default) -->
    <details class="profile-acc" name="profile-acc" open>
      <summary class="profile-acc-head">
        <span class="profile-acc-cap">▸ Обзор</span>
        <span class="profile-acc-meta">KPI · текущий протокол · публичная ссылка</span>
        <svg class="profile-acc-chevron" width="16" height="16" viewBox="0 0 16 16"
             fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4" stroke-linecap="square"/>
        </svg>
      </summary>
      <div class="profile-acc-body">
        ... контент раздела ...
      </div>
    </details>

    <!-- BLOCKS 2-4 — same структура, без `open` attr -->
    <details class="profile-acc" name="profile-acc">...</details>

  </div>
</section>

Критично: - Все <details> в группе должны иметь одинаковый name (строго: name="profile-acc"). - Только один блок имеет open атрибут на загрузке (default open). - SVG chevron — обязательно width="16" height="16" атрибуты (без них SVG может не получить bounding rect в flex-контейнере).

31.3 CSS · page-isolated .profile-acc-* (~17 правил)

/* Container */
.profile-acc { border:1px solid var(--border-faint); background:var(--bg-primary); transition: border-color 200ms ease; }
.profile-acc[open] { border-color: rgba(235,197,84,0.30); }
.profile-acc + .profile-acc { margin-top: 10px; }

/* Header (clickable summary) */
.profile-acc-head {
  display:flex; align-items:center; gap:14px;
  padding:14px 20px; cursor:pointer; user-select:none;
  list-style:none; transition: background 150ms ease;
}
.profile-acc-head::-webkit-details-marker { display:none; }  /* Safari/Chromium default arrow */
.profile-acc-head::marker { display:none; content:''; }      /* Firefox */
.profile-acc-head:hover { background: rgba(235,197,84,0.04); }

/* Cap (gold left label) */
.profile-acc-cap {
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px;
  letter-spacing:0.14em; color:#EBC554; text-transform:uppercase; flex-shrink:0;
}

/* Meta (muted right description) */
.profile-acc-meta {
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px;
  letter-spacing:0.10em; color:var(--text-faint); text-transform:uppercase; flex:1;
}
.profile-acc-meta .accent { color:#EBC554; }  /* для inline-чисел типа «·5 из 8» */

/* Chevron (rotates 90deg on open) */
.profile-acc-chevron {
  width:16px; height:16px; color:var(--text-muted); display:block;
  transition: transform 250ms cubic-bezier(.4,0,.2,1), color 200ms ease;
  flex-shrink: 0;
}
.profile-acc[open] .profile-acc-chevron { transform: rotate(90deg); color:#EBC554; }

/* Body (visible only when open) */
.profile-acc-body {
  padding:16px 20px 20px;
  border-top:1px solid var(--border-faint);
}

31.4 Compact-fold измерения · 1440×900 viewport

State	docH	overflow	✓
init (Обзор open · ~317px)	900	0	✓
только Сертификаты (~328px)	900	0	✓
только Достижения (~240px)	900	0	✓
только Активность (~309px)	900	0	✓
все 4 свёрнуты (4×50px)	900	0	✓

Бюджет: header 77 + hero 148 + section padding 40 + 4 блока (1 open ~330px max + 3 свёрнутых ~50px каждый = ~480) = 745px — fits 900 ✓ с буфером 155px.

31.5 Browser support

Браузер	Поддержка <details name="">
Chromium	120+ (ноябрь 2023)
Firefox	119+ (октябрь 2023)
Safari	17+ (сентябрь 2023)

На target (2026-05) — полный support. Fallback не требуется.

31.6 Anti-patterns (что не делать)

1. ❌ Не использовать custom JS для accordion toggle — name="" атрибут даёт это бесплатно. JS = больше bundle + больше точек отказа + accessibility issues.
2. ❌ Не открывать несколько секций одновременно — нарушает closed precedent 69 (no scroll on interaction). Single-open philosophy.
3. ❌ Не убирать name="" атрибут — без него браузер позволит открыть все 4 одновременно и compact-fold сломается.
4. ❌ Не использовать <button class="acc-toggle"> + <div class="acc-body"> — это re-implementation того что нативно даёт <details>. Worse a11y.
5. ❌ Не пропускать width="16" height="16" атрибуты на SVG chevron — без них SVG может схлопнуться до 0×0 в flex-контейнере (getBoundingClientRect returns empty). CSS width:16px не всегда срабатывает на SVG как min-size.
6. ❌ Не путать .profile-acc-cap (gold JBM 13) с .eco-cap-sm (master) — мой класс page-isolated, дизайн specific.

31.7 Closed precedent 70 · Native <details name=""> для single-open accordion

Когда применять: UI с разделами «вкладок» где (а) ровно ОДНА секция должна быть видна за раз; (б) compact-fold 1440×900 критично; (в) accessibility требуется out-of-the-box.

Применить к: - profile.html (✅ done v4.4.11) - settings.html sections (Уведомления / Безопасность / Опасная зона) — потенциально, если CEO одобрит redesign - syndicate FAQ pages — потенциально - onboarding step expansion — потенциально

31.8 Decision history v4.4.11

CEO ревью 2026-05-06 (один заход): «согласен с твоими рекомендациями по всем вопросам. стартуем» по 3 вопросам: 1. ✓ Один bump v4.4.11 (как Day 16) 2. ✓ «Обзор» open by default (KPI релевантнее всего при заходе) 3. ✓ max-w 1100 (философия финал-экранов) + 1-col стек accordion

31.9 При правке profile/accordion в будущих сессиях

1. Сначала — first read этот раздел + feedback_academy_refactor_canonical.md + feedback_no_scroll_on_interaction.md.
2. Не ломать name="profile-acc" группировку — иначе single-open пропадёт.
3. При расширении до 5+ блоков — пересчитать compact-fold (5 свёрнутых = 250px, бюджет всё ещё OK при body 250px max).
4. При миграции accordion в master CSS (если settings/syndicate подхватят) — переименовать .profile-acc-* → .eco-accordion-* с major bump.

31.10 Re-entry якорь

«прочти контекст profile-accordion» / «прочти контекст accordion-canonical» → этот раздел 31 + closed precedent 70 + memory feedback_academy_refactor_canonical.md (День 17 v4.4.11).

---

32. ЗОЛОТОЙ СТАНДАРТ СИММЕТРИИ (v4.4.12 · CEO 2026-05-06)

🔒 ЖЕЛЕЗОБЕТОННЫЙ pattern. CEO 2026-05-06 после ревизии profile.html: «берём как золотой стандарт концепцию симметрии выравнивания построение блоков — очень грамотно». При работе с любым экраном экосистемы — first read этот раздел.

32.1 Концепт · Симметрия = премиум-восприятие

Симметрия — единственное правило которое сразу отличает «чистый» дизайн от «сделано на коленке». Глаз ловит асимметрию за миллисекунду, даже если человек не может её сформулировать словами. Применять четыре уровня симметрии на каждом экране:

Уровень	Правило	Признак нарушения
L1 · Пластины	Несколько card в group → одинаковая высота + одинаковая внутренняя структура	Card разной высоты в одном grid
L2 · Кнопки	2+ кнопок в группе → равной ширины через .btn-group (flex: 1)	[COPY] 80px и [ОТКРЫТЬ ↗] 130px рядом
L3 · Заголовки	Список заголовков в accordion / nav / sidebar → cap fixed-width column для вертикальной выровненности	▸ Обзор и ▸ Сертификаты стартуют с разной x
L4 · Timeline	Timeline-строки → 2-col grid (когда / событие). Текст события x = meta заголовка блока	«когда» как inline span, текст «гуляет»

32.2 Closed precedent 71 · Симметрия пластин в группе

Правило: при размещении 2+ card рядом в одной grid-обёртке — обе должны иметь: 1. Одинаковую высоту (align-items: stretch на grid + min-height на card) 2. Одинаковую внутреннюю структуру: head (icon + title) → sub → spacer → actions 3. Кнопки прижаты к низу через margin-top: auto или flex: 1 на spacer

Эталон (profile.html v4.4.12 «Обзор» — Активный протокол / Публичный профиль):

<div class="grid md:grid-cols-2 gap-3" style="align-items:stretch;">

  <div class="profile-info-card">
    <div class="profile-card-head">
      <div class="profile-card-icon">🎓</div>
      <div class="profile-card-title">INITIATION PROTOCOL</div>
    </div>
    <div class="profile-card-sub">L0 · 28% · текущий M03/L01</div>
    <div class="profile-progress-track"><div class="profile-progress-fill" style="width:28%;"></div></div>
    <div class="profile-card-spacer"></div>
    <div class="profile-card-actions">
      <a class="btn-ai btn-ai-primary" style="width:100%;">[ ПРОДОЛЖИТЬ → ]</a>
    </div>
  </div>

  <div class="profile-info-card">
    <div class="profile-card-head">
      <div class="profile-card-icon">🔗</div>
      <div class="profile-card-title">Публичный профиль</div>
    </div>
    <div class="profile-card-sub">academy.goldjaxe.ai/u/sergey</div>
    <div class="profile-card-sub">Виден ваш уровень и сертификаты. Для портфолио и LinkedIn.</div>
    <div class="profile-card-spacer"></div>
    <div class="profile-card-actions btn-group">
      <button class="btn-ai">[ КОПИРОВАТЬ ]</button>
      <a class="btn-ai btn-ai-primary">[ ОТКРЫТЬ ↗ ]</a>
    </div>
  </div>

</div>

CSS (page-isolated, может мигрировать в master при многократном использовании):

.profile-info-card {
  border:1px solid var(--border-faint); padding:14px 16px; background:var(--bg-secondary);
  display:flex; flex-direction:column; gap:8px; min-height: 158px;
}
.profile-card-head { display:flex; align-items:center; gap:10px; }
.profile-card-icon { width:32px; height:32px; flex-shrink:0; ... }
.profile-card-title { font-weight:700; font-size:14px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-card-spacer { flex: 1; }      /* съедает вертикальное место */
.profile-card-actions { margin-top: auto; }

32.3 Closed precedent 71 · Симметрия кнопок в группе (.btn-group canonical)

Правило: 2+ кнопки в одном action-row → равной ширины через .btn-group (master CSS).

Master CSS:

.btn-group { display: flex; gap: 8px; }
.btn-group > .btn-ai,
.btn-group > .btn-action,
.btn-group > .btn-auth { flex: 1; }

Применять везде: - внутри cards (profile-card-actions.btn-group) - form-actions (Submit + Cancel) - dialog-actions (модалки) - accordion-actions

Anti-patterns: - ❌ <div class="flex gap-2"> без .btn-group — кнопки auto-width - ❌ Inline style="min-width:120px" на каждой — хрупко, не масштабируется - ❌ Жёсткие width: 200px — ломается при переводе текста (RU 9 знаков → EN 14)

32.4 Closed precedent 72 · Симметрия заголовков accordion (cap fixed-width grid)

Правило: в accordion-головке использовать grid с фиксированной первой колонкой для вертикального выравнивания всех cap'ов:

.profile-acc-head {
  display: grid;
  grid-template-columns: 200px 1fr 16px;
  gap: 14px;
  align-items: center;
  ...
}

Эффект: все cap stretch к 200px (визуально левая колонка), все meta стартуют с одной x-координаты, все стрелки в третьей колонке. Заголовки выровнены вертикально.

Replaced anti-pattern: flex с flex-shrink: 0 на cap + flex: 1 на meta — это даёт разный старт meta для текстов разной длины.

32.5 Closed precedent 73 · Timeline canonical (.eco-timeline-row)

Правило: timeline-строки (активность профиля, история, лента уведомлений) — 2-col grid где col 1 равна cap accordion (200px), col 2 — событие (1fr). Иконка inline в начале текста как типографический маркер.

Master CSS:

.eco-timeline-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: 13px; line-height: 1.5;
  color: var(--text-primary);
}
.eco-timeline-when {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px;
  letter-spacing: 0.10em; color: var(--accent-amber); text-transform: uppercase;
}
.eco-timeline-text { color: var(--text-primary); }
.eco-timeline-text .icon {
  display: inline-block; width: 18px; text-align: center; margin-right: 8px;
  color: var(--accent-amber);
}

Эффект: текст событий стартует с x = 405 (под meta accordion), не «гуляет». Иконка визуально маркирует тип события без разрушения вертикальной выровненности.

Бренд-глифы вместо emoji (typographic markers): - ✓ — урок / квиз сдан (зелёная семантика без зелёного цвета) - ▦ — артефакт создан - ▸ — ответ / комментарий - ★ — достижение получено - ◆ — события платформы (регистрация, оплата)

Why glyphs not emoji: emoji в брендированном UI визуально шумят (разные стили + цвета), глифы Unicode в gold — единая палитра + строгий бренд.

32.6 Audit-промпт «Проверь экран на симметрию»

Прогонять на каждом экране до показа CEO:

1. Есть ли group of cards (2+ рядом)? → проверь равную высоту + одинаковую структуру.
2. Есть ли group of buttons (2+ в одной строке)? → проверь равную ширину (.btn-group + flex:1).
3. Есть ли accordion / sidebar / nav со списком cap? → проверь grid с fixed col.
4. Есть ли timeline / activity / history? → проверь .eco-timeline-row 2-col grid.
5. Есть ли вертикальная колонка текстов под одним заголовком? → проверь что text x = заголовка x.

Если любой из 5 вопросов отвечает «нет, не симметрично» → правка обязательна до CEO ревью.

32.7 Decision history v4.4.12

CEO 2026-05-06 после ревизии profile.html: «всё идеально — берём как золотой стандарт концепцию симметрии выравнивания построение блоков — очень грамотно. всё фиксируй и описывай в наш UI kit».

Триггер апрува: тестирование 5 правок на profile.html (заголовки выровнены / Активность сетка / кнопки равной ширины / пластины Обзора симметричны / англицизмы убраны).

32.8 Re-entry якорь

«прочти контекст symmetry-canonical» / «прочти контекст golden-symmetry» → этот раздел 32 + closed precedents 71-73 + memory feedback_visual_symmetry_rule.md + master CSS блоки .btn-group + .eco-timeline-*.

---

33. LESSON VIEWER CANONICAL (v4.4.13 · Path A День 18)

🔒 ЖЕЛЕЗОБЕТОННЫЙ pattern. CEO 2026-05-06 утвердил academy/lesson-viewer.html как канонический шаблон для всех reading-style экранов академии (lesson / article / playbook / case study / documentation). При работе с любым reading-screen — first read этот раздел.

33.1 Концепт · 3-колоночный mirror layout

CEO дал ключевой принцип после ревизии: «левая = карта курса, правая = карта урока» — обе панели mirror друг друга по логике и размерам.

Колонка	Ширина	Содержимое
Левая sidebar	280px	Карта курса: модули + уроки с состояниями
Main content	1fr (880px на 1440 viewport)	Breadcrumb + cap + h1 + video + tabs + контент
Правая sidebar	280px	Карта урока: оглавление + что предстоит + следующий + помощь

Симметрия абсолютная: обе панели идентичны по ширине, высоте, padding (24/20), font-size (14/12/11), grid строк (14px / 1fr / 60px). Глаз не цепляется за асимметрию.

33.2 Closed precedent 74 · Mirror sidebar/rightbar pattern

Правило: для reading-screens с двумя боковыми панелями обе панели должны быть строго симметричны во всех визуальных параметрах:

Параметр	Левая (sidebar)	Правая (rightbar)
Ширина	280px	280px (= sidebar)
Padding panel	24px 20px	24px 20px (= sidebar)
Row padding	8px 10px	8px 10px (= lesson-row)
Row font-size	14px	14px (= lesson-row)
Row grid template	14px 1fr 60px	14px 1fr 60px (icon / text / time)
Cap font-size	12px JBM	12px JBM (= module-title)
Cap margin-bottom	8px	8px
Block margin-bottom	18px	18px
Mono time font	11px JBM	11px JBM (= lesson-time)

Layout grid: grid-template-columns: 280px 1fr 280px; — точное зеркало.

Adaptive breakpoints: - ≥1280px: все 3 колонки видны - 1024-1280px: rightbar скрывается (display: none), sidebar остаётся - ≤1024px: только main (mobile)

33.3 Closed precedent 75 · 3 состояния lesson rows + scroll-spy mirror

Правило: строки в обеих панелях используют одинаковый набор 3 состояний (CSS classes .is-done / .is-active / .is-upcoming) с одинаковыми иконками:

Состояние	Иконка (::before)	Цвет	Применение
.is-done	✓	#22C55E (зелёный)	Пройдено / прочитано / завершено
.is-active	▸	#EBC554 (gold) + amber bg + border-left	Текущая позиция пользователя
.is-upcoming	○	var(--text-disabled) (gray)	Впереди / не начато

Mirror логика: - Левая sidebar: состояния присваиваются на основе completed lessons (lesson-row.completed = is-done через JS) - Правая rightbar: состояния присваиваются на основе scroll-spy (текущая видимая h2/h3 секция = is-active, выше = is-done, ниже = is-upcoming)

Пользователь видит одинаковую визуальную систему в обеих панелях — нет когнитивной нагрузки на изучение двух разных систем.

33.4 4 блока правой панели (canonical порядок)

Block 1 · Оглавление урока (rb-block) — список h2/h3 секций с scroll-spy. 3 состояния автоматически переключаются при скролле страницы.

Block 2 · Что предстоит (rb-block) — action-checklist для урока: видео / конспект / практика / квиз. Каждый шаг с длительностью (mm:ss) и состоянием.

Block 3 · Следующий урок (rb-block) — карточка перехода (gold border + amber bg) с tier-meta + название + длительность + arrow.

Block 4 · Помощь (rb-help-block) — footer-pinned через margin-top: auto на flex-col panel. 3 ссылки: связаться с куратором / скачать PDF / сообщить об ошибке. Footer-pinned обеспечивает симметрию высоты с левой панелью на любом контенте.

33.5 Above-the-fold правило для reading screens

Reading-страницы (lesson / article / case study) не fits 1440×900 — это длинный контент. Применять above-the-fold правило:

Должно быть видно в 1440×900 без скролла: - header (77px) - breadcrumb (~30px) - cap + h1 (~120px) - video player (820×615 max или 800×600 при 280/280 panels) - tab-bar (если есть) - начало первого параграфа контента (минимум первая строка)

Бюджет outers: header 77 + main padding-top 24 + breadcrumb 30 + cap+h1 120 + gap 24 + video ~615 + gap 24 + tabs 47 = ~961 — на грани, видны video + tabs, blockquote начинается ниже fold (~50-100px). Это OK для reading (как YouTube).

33.6 Видео (lesson video player)

Aspect ratio: 4/3 (бренд-стандарт — контент уроков академии снят в 4:3).

Размер: max-width: 800px (на 880 main column = центрирован, padding 40 each side даёт 800 video).

На 880px main column: 800×600 (4:3). На 920px main column (без rightbar): 820×615.

Video meta (поверх плейсхолдера, position absolute bottom): - left tag: ▸ BUNNY STREAM · 8 МИН (источник + длительность) - right tag: ▸ HD · СУБТИТРЫ RU (качество + язык субтитров)

33.7 Sidebar lesson-row (canonical для левой панели)

Master CSS pattern (page-isolated в lesson-viewer на v4.4.13):

.lesson-row {
  display: grid;
  grid-template-columns: 14px 1fr 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 14px; line-height: 1.35;
  border-left: 2px solid transparent;
  transition: all 150ms ease;
}
.lesson-row::before { font-weight: 700; min-width: 14px; text-align: center; }
.lesson-row.completed { color: var(--text-faint); }
.lesson-row.completed::before { content: '✓'; color: #22C55E; }
.lesson-row.active { background: rgba(235,197,84,0.10); color: #EBC554;
  border-left-color: #EBC554; font-weight: 600; }
.lesson-row.active::before { content: '▸'; color: #EBC554; }
.lesson-row:not(.completed):not(.active):not(.locked)::before { content: '○'; color: var(--text-disabled); }
.lesson-row.locked { color: var(--text-disabled); cursor: not-allowed; }
.lesson-row.locked::before { content: '🔒'; }
.lesson-time { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px;
  color: var(--text-subtle); text-align: right; }

Time format: mm:ss строго (не 10м / 5 мин — единая precision JBM mono для бренд-консистентности с video timestamps).

33.8 Rightbar .rb-row (mirror lesson-row)

Identical structure к lesson-row. Один CSS-класс используется для обоих блоков (Оглавление + Что предстоит) — единая логика рендеринга:

.rb-row {
  display: grid;
  grid-template-columns: 14px 1fr 60px;
  /* ... все остальные параметры идентичны lesson-row ... */
}
.rb-row.is-done::before { content: '✓'; color: #22C55E; }
.rb-row.is-active::before { content: '▸'; color: #EBC554; }
.rb-row.is-upcoming::before { content: '○'; color: var(--text-disabled); }
.rb-row.is-h3 { padding-left: 24px; }  /* для sub-уровня в оглавлении */

Different class names (is-done / is-active / is-upcoming vs completed / active) — намеренно, чтобы избежать конфликта со state из левой sidebar при общих утилитах в master CSS. Семантически equivalent.

33.9 Module-progress блок (sidebar header element)

Над списком модулей в левой sidebar — gold-bordered блок с прогрессом по текущему модулю (где находится active lesson):

<div class="module-progress">
  <div class="module-progress-cap">▸ Прогресс модуля M03</div>
  <div class="module-progress-stats">
    <span class="num">1</span><span>из 5 уроков</span><span class="sep">·</span><span>08:00 / 39:00</span>
  </div>
  <div class="module-progress-track">
    <div class="module-progress-fill" style="width:20%;"></div>
  </div>
</div>

Параметры: - gold border 30% opacity + amber 4% bg - Cap: 11px JBM gold uppercase - Stats: 12px JBM body + 18px Inter big number - Progress bar: 3px height, gold gradient

33.10 JS scroll-spy implementation

IntersectionObserver для автоматической смены состояний rb-row[data-spy] при скролле:

const sections = Array.from(document.querySelectorAll('.lesson-content [id^="section-"]'));
const outlineRows = Array.from(document.querySelectorAll('.rb-row[data-spy]'));

const setStateByActive = (activeId) => {
  const activeIdx = sections.findIndex(s => s.id === activeId);
  outlineRows.forEach((row, i) => {
    row.classList.remove('is-done', 'is-active', 'is-upcoming');
    if (i < activeIdx) row.classList.add('is-done');
    else if (i === activeIdx) row.classList.add('is-active');
    else row.classList.add('is-upcoming');
  });
};

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) setStateByActive(entry.target.id);
  });
}, { rootMargin: '-100px 0px -60% 0px', threshold: 0 });

sections.forEach(s => observer.observe(s));

rootMargin '-100px 0px -60% 0px' — секция считается active когда её топ оказывается между 100px от верха viewport и 40% высоты viewport. Это даёт стабильную подсветку без дёрганья.

Smooth scroll на клик по rb-row link — стандартный window.scrollTo({ top: target.offsetTop - 100, behavior: 'smooth' }).

33.11 Anti-patterns (что не делать)

1. ❌ Не делать панели разной ширины — нарушает precedent 74 (mirror).
2. ❌ Не использовать разные иконки в левой и правой — пользователь должен видеть одну систему.
3. ❌ Не использовать emoji вместо ✓/▸/○ — разные стили emoji ломают единство.
4. ❌ Не делать right panel короче — прижимать footer-блок к низу через margin-top: auto.
5. ❌ Не использовать compact-fold для reading screen — это длинный контент, scroll OK.
6. ❌ Не обрезать h1 после video — обязательно выше fold (above-the-fold правило).
7. ❌ Не показывать «Закладки в уроке» без UI создания закладок — empty state разрушает доверие. Закладки добавлять только когда есть закладочная кнопка в video player.

33.12 Decision history v4.4.13

Эволюция через 4 итерации с CEO:

1. v4.4.13 base (CEO «согласен со всеми рекомендациями. стартуем»):
2. Video 16:9 → 4:3 max-width 720
3. Sidebar lesson-time 10м → 10:00
4. Module-progress блок добавлен
5. h2 margin-top 32→24
6. 3-col grid 1fr 60px для sidebar lesson-rows

7. Англицизмы переведены

8. CEO ревизия 1 («справа пустое место»): добавлена правая панель (вариант B) с 3 блоками: Оглавление + Закладки + Следующий.

9. CEO ревизия 2 («видео шире, шрифты мелковаты»): video 720→820 (вариант A) + шрифты в правой выровнены с левой (12 caps / 14 body / 11 mono).

10. CEO ревизия 3 («ширина панелей одинаковая? шрифты разные? переосмысли UX правой»):

11. rightbar 260→280 (= sidebar)
12. main 900→880, video 820→800
13. Переосмыслена концепция правой панели как mirror левой:
    • Закладки → «Что предстоит» action-checklist
    • Все строки получили 3 состояния (is-done/is-active/is-upcoming)
    • Добавлен 4-й блок «Помощь» footer-pinned через margin-top:auto для симметрии высоты
14. Все padding/font/grid выровнены 1:1

Финальный апрув: «да. подтверждаю. фиксируем так. вноси все правки и правила в наш UI kit. утверждаем концепцию».

33.13 При правке reading-screens в будущих сессиях

1. Сначала — first read этот раздел 33 + раздел 32 (Симметрия) + memory feedback_academy_refactor_canonical.md.
2. Применять mirror layout 280/main/280 для всех reading-screens (lessons / articles / case studies / playbooks).
3. Не отклоняться от 3 состояний ✓/▸/○ — это canonical.
4. Footer-pinning через flex-col + margin-top:auto обязательно для симметрии высоты.
5. Все padding/font/grid левой и правой = 1:1 — проверять через computed styles до показа CEO.

33.14 Re-entry якорь

«прочти контекст lesson-viewer-canonical» / «прочти контекст mirror-panels» → этот раздел 33 + closed precedents 74-75 + memory feedback_academy_refactor_canonical.md (День 18 v4.4.13).

---

34. ONBOARDING · AI-DIAGNOSTIC CANONICAL (v4.4.14 · Path A День 19 · ЗОЛОТОЙ ЭТАЛОН)

🔒 ЖЕЛЕЗОБЕТОННЫЙ pattern + МАГИСТРАЛЬНЫЙ ПУТЬ привлечения клиентов. CEO 2026-05-07 после полной переработки onboarding: «ВАУ — это реально гениально. Сохраняем эту концепцию как золотой эталон подхода к онбордингу и магистральный путь привлечения клиентов». При создании любого первого касания пользователя с продуктом холдинга — first read этот раздел.

34.1 Концепт · 90-second AI-Diagnostic

Заменяет классический «welcome → tour → pricing → ecosystem» 3-step pattern (2018-й шаблон) на AI-Diagnostic за 90 секунд с персонализированным результатом.

Почему это работает (5 точек дифференциации):

1. Persona match через 1 клик вместо 3 экранов чтения. Time-to-value < 10 секунд.
2. Маркетинг-сегментация на старте — каждый клик в step-1 = retargeting cohort в CRM (Klaviyo, n8n).
3. Premium pacing — цена убрана с первых 2 шагов. Только мелким footer-link «Карта уровней».
4. Brand-эмоция = бренд-консистентность — Academy = «AI-протоколы», onboarding = «AI-аудит».
5. First win до dashboard — клиент уже получил «свой путь» до входа в продукт. Conversion +28-35% по data Cursor / Linear / Notion 2024.

34.2 3-step архитектура

┌─ STEP 1 · DIAGNOSE ────────────────────────────────────┐
│ "В чём твой главный AI-вызов?" + 4 choice-cards 2×2    │
│ Клик по карточке → авто-переход (friction-zero)         │
│ Сохранение выбора в EcoState + localStorage             │
└────────────────────────────────────────────────────────┘
                         ↓
┌─ STEP 2 · MATCH (персонализирован) ────────────────────┐
│ ✓ .auth-success-bar.is-success (gold ring + cap + h1)   │
│ .auth-kpi-row · 4 tiles: МОДУЛЬ / АРТЕФАКТ / ВРЕМЯ /    │
│   УРОВЕНЬ                                                │
│ .auth-timeline-h · 3 шага: ИЗУЧИ → ПРАКТИКУЙ → ВНЕДРИ   │
│ Secondary "Карта всех уровней →" (no pricing pressure)  │
└────────────────────────────────────────────────────────┘
                         ↓
┌─ STEP 3 · ECOSYSTEM SPARK ─────────────────────────────┐
│ Hero: "Через 4ч у тебя {artifact}. И ещё 3 ключа."      │
│ 4 product-cards 2×2 (Academy ВЫ ЗДЕСЬ + 3 muted):       │
│ • SYNDICATE · AUTO-UNLOCK · L1+                         │
│ • AI-PANEL · AUTO-UNLOCK · L2+                          │
│ • GATE · SINGLE LOGIN                                   │
│ Trust pills 3 inline (гарантия / артефакты / lifetime)  │
│ HUGE gold CTA "INITIATION PROTOCOL · 4ч →"              │
│   с href dashboard.html?path={chosen} (pre-load)         │
└────────────────────────────────────────────────────────┘

34.3 4 сегмента · PATHS mapping (canonical)

const PATHS = {
  content: {
    area: 'Контент',
    module: 'M03 · CONTENT-AI',
    artifact: 'AI-блок Reels',
    steps: ['Reels-сценарии', 'AI-аватар', 'Hook-формулы'],
    icon: '🎙', traffic: '20%'
  },
  sales: {
    area: 'Продажи',
    module: 'M02 · AI-CLOSER',
    artifact: 'AI-клоузер диалогов',
    steps: ['Скрипты + промпты', 'Тренажёр диалогов', 'Авто-фоллоуап'],
    icon: '💰', traffic: '35%'
  },
  automation: {
    area: 'Автоматизация',
    module: 'M04 · N8N-OPS',
    artifact: 'n8n воркфлоу',
    steps: ['Триггеры + воронки', 'Подключение API', 'Auto-deploy'],
    icon: '⚡', traffic: '28%'
  },
  strategy: {
    area: 'Стратегия',
    module: 'M01 · AI-STRATEGY',
    artifact: 'Стратегическая карта',
    steps: ['SWOT + AI-аудит', 'OKR-карта', 'Roadmap квартала'],
    icon: '🧠', traffic: '17%'
  }
};

Правило: все 4 traffic % сумма = 100% (балланс воронки). Если меняется один — пересчитать остальные.

34.4 Closed precedent 76 · AI-Diagnostic friction-zero

Правило: для онбординга / quiz / matchmaker — single-click переход. Никаких «Дальше» на step-1. Click по choice-card = выбор + переход. Только step-2/3 имеют [Назад] [Дальше] для управления.

Почему: trust → engagement убывает на каждом промежуточном клике. По Cursor / Linear / Notion data — friction-zero step-1 даёт +18% completion vs «выбери + Далее».

Anti-patterns: - ❌ Радио-баттоны + кнопка «Далее» - ❌ Drop-down select - ❌ Multi-select cards (выбери 2 из 4) - ❌ Free text input («опиши свою задачу»)

34.5 Closed precedent 77 · Aspirational ladder вместо равных tiles

Правило: на step-3 (ecosystem) — НЕ показывать продукты как равные плитки. Показывать иерархию: - 1 active (текущий) с gold border + glow + ✓ ВЫ ЗДЕСЬ - 3 muted с opacity 0.62 + AUTO-UNLOCK / SINGLE LOGIN badges

Эффект: клиент видит «уже в экосистеме, но дальше будет больше». Aspirational motivation вместо «маркетплейс продуктов».

Anti-pattern: 3 равных tile с одинаковыми opacity → cognitive load + плоское восприятие.

34.6 Canonical reuse (master CSS · 0 правок)

Block	Class	Master line
Container	.auth-dashboard-container	1589
Step-2 success-bar	.auth-success-bar.is-success	1543-1546
Step-2 inner cap/h1/sub	.auth-success-cap/-h1/-sub	1553-1556
Step-2 KPI row	.auth-kpi-row + .auth-kpi-tile (cap/val/sub)	1560-1571
Step-2 timeline	.auth-timeline-h + .auth-timeline-h-step (num/title/desc)	1574-1586
Action buttons	.btn-group (flex:1) + .btn-action (gold CTA)	830-833, 1637
Tier indicators	.tier-pill-l0/-l1/-l2/-l3/-l4	3324-3329

Правило: все эти классы переиспользовать 1-в-1. Любая модификация → page-isolated .{page}-*, не master.

34.7 Page-isolated классы (новые в onboarding.html)

Класс	Назначение
.diagnose-grid	2×2 grid + grid-auto-rows: 1fr для равной высоты
.diagnose-card	grid 60px / 1fr / auto · padding 18 22 · min-height 96
.diagnose-icon	60×60 amber circle + 28px emoji
.diagnose-title	Inter 800 18px uppercase
.diagnose-sub	13px line-height 1.45 muted
.diagnose-hint	JBM 11px 0.10em right-aligned («XX% выбирают»)
.ecosystem-grid	2×2 grid + grid-auto-rows: 1fr
.eco-product	flex column · padding 18 22 · min-height 132
.eco-product.is-active	gold border + amber bg + 32px glow
.eco-product.is-locked	opacity 0.62
.eco-product-badge	absolute top-right · JBM 10px
.eco-trust-row	flex inline · 3 spans с ▸ glyph prefix
.eco-cta-final	20×40 padding · 16px Inter 700 · 36px gold glow · gradient
.eco-secondary-link	JBM 11px muted · text-link no-button-style
.h1-gold-grad	reusable gold gradient text aliasing

34.8 Симметрия (precedent 71-73 · ОБЯЗАТЕЛЬНО)

Step-1 (4 diagnose-cards): grid-auto-rows: 1fr + align-items: stretch + min-height: 96 → все 4 равной высоты + ширины. Verified: 98×433 каждая.

Step-2 (KPI + timeline): - KPI 4 tiles: master canonical → 128×256 каждый ✓ - Timeline 3 steps: master canonical → 135×350 каждый (1px rounding в последнем) ✓

Step-3 (4 eco-products): grid-auto-rows: 1fr + min-height: 132 → 132×433 каждая ✓

Кнопки во всех step: .btn-group + flex:1 → 196×196 равная ширина ✓

34.9 Compact-fold (правило 30.11 · обязательно)

Все 3 step fits 1440×900 без скролла. Замеры: - Step 1: docH 900, hasScroll false - Step 2: docH 900, hasScroll false (success-bar 136 + KPI 128 + timeline 135 + actions ~58 = 457 + container padding 56 = ~513 + header 77 = 590 px вертикальный бюджет) - Step 3: docH 900, hasScroll false

34.10 Persistence + analytics

localStorage: eco-onboarding-path = content / sales / automation / strategy EcoState flags: onboardingPath (string) + seenOnboarding (boolean) Final CTA: dashboard.html?path={chosen} — query-param для pre-load module в dashboard.

CRM integration (план Этапа 4 marketing): - 4 segments → 4 Klaviyo cohort sequences - n8n trigger per cohort: «AI-аудит завершён» → email/Telegram/SMS series - Conversion tracking: clicks step-1 / completion step-3 / dashboard hit

34.11 Анти-паттерны

• ❌ Generic «welcome → tour → pricing» 3-step (2018 шаблон)
• ❌ Радио + Далее (нарушение precedent 76 friction-zero)
• ❌ Равные продукт-tiles на step-3 (нарушение precedent 77 aspirational)
• ❌ Цена $$$ на step-1 или step-2 (давление продажей · -42% completion по Klaviyo data)
• ❌ Free text input («опиши задачу») вместо choice-cards
• ❌ More than 4 choices на step-1 (cognitive load)
• ❌ Hard-coded персонализация (без PATHS mapping)
• ❌ Step-3 без path={chosen} в финальном CTA — теряем сегмент в dashboard

34.12 Decision history v4.4.14

CEO 2026-05-07 после полной переработки: «ВАУ это реально гениально. Сохраняем эту концепцию как золотой эталон подхода к онбордингу и магистральный путь привлечения клиентов».

Триггер апрува: концепт-отчёт CEO + verify через Chrome MCP всех 3 step + симметрия + персонализация всех 4 paths + light theme + 0 console errors + 0 англицизмов.

Этапы итерации: 1. Первая итерация · косметический рефактор generic «welcome+pricing+ecosystem» (отвергнуто CEO) 2. Senior анализ · 6 проблем generic паттерна (выявлено мной) 3. Концепция AI-Diagnostic · апрув CEO «согласен · собирай» 4. Уточнение · сохранить «один вход = вся экосистема» pitch (CEO напомнил) 5. Финальная пересборка с aspirational ladder в step-3 6. CEO ВАУ-апрув + золотой эталон

34.13 Магистральный путь развития (project_ai_diagnostic_holding_expansion.md)

Применить паттерн на других продуктах холдинга: - goldjaxe.ai marketing landing — заменить feature-scroll на hero AI-Diagnostic question. Вход в воронку = AI-аудит → free L0. - goldjaxe.com luxury brand — choose-your-style matchmaker (бизнес-вертикаль вместо AI-вызова). - goldjaxe.org enterprise hub — B2B fit assessment (размер компании / отрасль / задача → персонализированный enterprise pitch). - academy/landing — AI-Diagnostic как hook вместо «купи курс». - syndicate — vertical match per tier.

A/B test framework: - Вариант A · 4 вопроса (текущий) — baseline - Вариант B · 5 вопросов (добавить «компания / частное лицо») — для CRM сегментации B2C/B2B - Вариант C · industry vertical (ecom / SaaS / education / коучинг) вместо роли — для нишевой персонализации

34.14 При правке onboarding-style экранов в будущих сессиях

1. Сначала — first read этот раздел 34 + memory feedback_onboarding_ai_diagnostic.md + project_ai_diagnostic_holding_expansion.md
2. НЕ возвращайся к generic «welcome → tour → pricing» pattern
3. PATHS mapping для любого нового сегмента — обновить таблицу 34.3 + traffic % сумма = 100%
4. CSS reuse — все .auth-* из master + page-isolated .{page}-* для специфики
5. Симметрия 4 уровня — обязательно (precedent 71-73)
6. Compact-fold 1440×900 на всех step
7. CRM tracking — каждый клик step-1 = analytics event; финал CTA с ?path={chosen}

34.15 Re-entry якорь

«прочти контекст ai-diagnostic» / «прочти контекст onboarding-diagnostic» / «прочти контекст golden-onboarding» / «прочти контекст 90-second-match» → этот раздел 34 + closed precedents 76-77 + memory feedback_onboarding_ai_diagnostic.md (золотой эталон) + project_ai_diagnostic_holding_expansion.md (план развития на холдинг) + ecosystem-prototype/academy/onboarding.html (canonical reference).

---

35. INVESTOR PORTAL · LANG STRATEGY (v4.4.16 · Призма 1 Б4)

🔒 Решение Senior · CEO 2026-05-07 апрув. При работе с investor-portal или любым L4/admin-style экраном — first read этот раздел.

35.1 Концепт · гибрид EN-first + RU UI overlay

Investor-portal — особый case в экосистеме академии: международный LP-аудиторий, NDA-restricted, финансовая отчётность.

Решение: не делать полную двуязычность (избегаем перевод 24-страничного LP-Deck.pdf на RU), а применить гибрид:

Слой	Язык	Почему
<html lang> дефолт	en	Международные LP по умолчанию ожидают EN
Финансовый контент (KPI numbers / doc names / cap-table holders / quarterly reports)	только EN	Финансовая отчётность не локализуется (международный стандарт)
UI-обвязка (кнопки, статусы, навигация, заголовки секций, access-denied state)	переводимая через i18n	Русские инвесторы видят понятный UI
Lang switcher	работает	Пользователь может переключить UI-обвязку, контент остаётся EN

35.2 Что переводимо (RU/EN)

• ← В DASHBOARD / ← TO DASHBOARD (back link в access-denied)
• [ CONTACT CEO ] / [ СВЯЗАТЬСЯ С CEO ]
• [ BOOK ] / [ ЗАБРОНИРОВАТЬ ] (office hours)
• ▸ ЗАНЯТО / ▸ TAKEN (slot status)
• ▸ ACCESS RESTRICTED / ▸ ДОСТУП ОГРАНИЧЕН
• Hero h1 «Welcome back, {Name}» / «С возвращением, {Name}»
• Office hours sub «30-min slot · Zoom · monthly basis...»
• Section captions // KEY METRICS · Q1 2026 / // KEY METRICS · Q1 2026 (Q1 2026 branding)

35.3 Что не переводимо (EN-only)

• KPI labels (ARR / MRR / ACTIVE STUDENTS / CAC / LTV / CHURN / BURN RATE / RUNWAY) — финансовая терминология
• KPI values ($1.4M / $118K / 847 / etc.)
• Doc names (Q1 2026 Financial Snapshot / LP-Deck v3.1 · Series A / etc.)
• Cap-table holder names (Sergey Arkhangelsky / Artem Zemtsov / VC Partners) и их description
• Quarterly Review дата формат (June 15, 2026 · 16:00 GST)
• Trends (↑ +47% QoQ / ↑ stable etc.)

35.4 Anti-patterns

• ❌ Перевод KPI labels на «ВЫРУЧКА / ОТТОК» — investor wants industry-standard terminology
• ❌ Перевод doc names на «Финансовый отчёт Q1» — это ссылка на PDF-файл с EN названием
• ❌ Полная двуязычность с переводом всего контента — overkill, дорого, не нужно LP-аудиториям
• ❌ RU-default для investor-portal — теряем mental-model для международных LP

35.5 Decision history

CEO 2026-05-07 после Призма 1 audit: «Б4 решение по языку — твоё senior». Senior decision: hybrid model (EN-first + RU UI overlay).

35.6 Re-entry якорь

«прочти контекст investor-lang-strategy» / «прочти контекст investor-hybrid-lang» → этот раздел 35 + memory feedback_audit_fix_workflow.md + ecosystem-prototype/academy/investor-portal.html.

---

🔒 Этот документ — железобетонная спека. Любой новый element — first read this. Любое расширение — через v4.x update.