/* * brand.css — стили визуального направления EpicInvest * * Направление принято 2026-07-19…20, разбор целиком — __wiki/product/visual-direction.md. * Характер: спокойное достоинство, эпос без крика. * * ⚠️ ЭТО ЕДИНСТВЕННЫЙ ЖИВОЙ ЭКЗЕМПЛЯР (решение владельца 2026-07-25). * Такой же файл лежит в PHP-макете (`assets/css/brand.css`) — он ЗАМОРОЖЕН вместе с * макетом, своё отработал. Правки вносятся только сюда; обратно в макет не переносятся. * * ЧТО ЭТО ЗА ФАЙЛ И ЧЕМ ОН ОТЛИЧАЕТСЯ ОТ ОСТАЛЬНЫХ ЧЕТЫРЁХ * Это НОВАЯ база, собираемая с чистого листа, а не правка старой. Старые файлы * (root.css, bs-style.css, style.css, loader.css) не трогаются и продолжают жить: * из них сюда ПЕРЕЕЗЖАЕТ только то, что понадобится и будет опознано как нужное * (например модалка). Мусор не вычищается — он просто не переезжает. * * Порядок внутри файла: токены → тёмная тема → мосты → база → компоненты. * Значения не вписывать в компоненты руками: любое число, встреченное дважды, * должно стать токеном. */ /* ========================================================================== 1. ТОКЕНЫ — единственное место, где живут значения ========================================================================== */ :root { /* --- Гамма. Роли, а не оттенки: тёмная тема меняет значения, не имена --- */ --paper: #F7F5F0; /* фон страницы; выбран как «та же светлота, меньше жёлтого» */ --surface: #FFFEFA; /* врез, карточка — светлее бумаги */ --ink: #241F1B; /* основной текст */ --ink-soft: #6A6157; /* подписи, сноски, вторичное */ --line: #E0D5C2; /* границы, разделители */ --accent: #A8462B; /* терракота: кнопка, ссылка, линия цитаты */ --accent-ink: #FFF9F4; /* текст НА акценте */ /* Рамка вреза. В светлой теме её нет: поверхность отделяет светлота. В тёмной она появляется тёплым отблеском — см. блок тёмной темы. */ --edge: transparent; /* --- Шкала риска. Единственное место в проекте, где цвет несёт СЕМАНТИКУ: от «понятно, кто платит» к «непонятно». Принято владельцем 2026-07-20, набор D из четырёх, разобранных рядом → __wiki/product/visual-direction.md. Устроена как сгущение ОДНОГО оттенка, а не как светофор: шаг по светлоте 1.13 · 1.18 · 1.22 (ускоряется кверху), размах 1.63. Замер важен, потому что глаз на тёплой бумаге видит разницу там, где её нет: прежние временные значения давали шаг 1.00 — ступени были неразличимы, а в тёмной теме верхняя оказывалась светлее средней, то есть шкала шла назад. ⚠️ Пятой ступени здесь нет намеренно. «Обещают вдвое больше рынка» — не инструмент, а обещание, и она выпадает из шкалы не цветом, а ОТСУТСТВИЕМ заливки: разомкнутый пунктир рисует «непонятно, кто платит» буквально. Красным её залить нельзя вдвойне — терракота занята созидательным действием, а оценку «плохо» продукт за читателя не делает. --- */ --risk-1: #F3EEE3; /* вклад, накопительный счёт */ --risk-2: #E9E0CE; /* государственные облигации */ --risk-3: #DCCFB4; /* облигации крупных компаний */ --risk-4: #CDBB98; /* высокодоходные облигации */ /* ⚠️ Обводка ОДНА на все ступени, а не своя у каждой — роли разведены: рамка говорит «это ступень» и отделяет её от бумаги, заливка несёт шкалу. Сперва обводки были градуированы вместе с заливками, и нижняя ступень оказалась невидимой: заливка 1.06 к бумаге, обводка 1.33 — текст висел в воздухе. Догонять норму 3.0 подъёмом каждой обводки бессмысленно: пять ступеней с шагом 3.0 требуют размаха яркости в 81 раз, столько в шкале нет. Отличать от фона обязан КОНТУР, а соседние ступени различаются заливкой. */ --risk-line: #8B7A5E; --risk-open-line: #7E6A4C; /* пунктир ступени без заливки: держит её один, поэтому темнее */ --risk-ink: #241F1B; /* имя ступени: текст НА заливке, идёт вместе с ней */ --risk-note: #453D35; /* сноска под именем: то же, но мельче */ /* --- Типографика --- */ --font-voice: 'Lora', Georgia, serif; /* заголовки и цитаты: книга, вечное */ --font-text: 'Nunito Sans', system-ui, sans-serif; /* текст: сегодня, тепло */ --size-h1: 42px; --size-h2: 26px; --size-body: 19px; /* база 110 %: владелец выбрал на переключателе доски */ --size-lead: 24px; /* первая фраза главной: крупнее текста, но не заголовок */ --size-quote: 23px; --size-small: 17px; --leading: 1.75; /* --- Форма. Радиус — ШКАЛА по размеру элемента, а не одно число: 14 px на кнопке читается скруглением, на карточке 700×400 — прямым углом --- */ --radius-control: 14px; /* кнопки, поля, бейджи */ --radius-card: 20px; /* врезы, карточки */ --radius-large: 24px; /* модалки, крупные блоки */ /* --- Раскладка. 700 px при 19 px = ~70 знаков в строке (норма 55–75). 780 проверено и отклонено: ~79 знаков, читается слишком широко --- */ --col: 700px; --pad-col: 24px; /* боковые поля колонки */ --gap: 22px; --block: 56px; /* вертикальный шаг между смысловыми блоками */ --grain: .35; /* светлая тема: компенсирует малую амплитуду overlay на светлом */ /* Нативные элементы (полоса прокрутки, поля форм, выпадающие списки) следуют теме: без этого в тёмной теме остаётся светлый системный скроллбар. */ color-scheme: light; } /* ========================================================================== 2. ТЁМНАЯ ТЕМА — те же роли, другие значения ========================================================================== */ [data-theme="dark"] { --paper: #1D1917; --surface: #262120; --ink: #EEE5D7; --ink-soft: #A79A8B; --line: #3A322C; --accent: #D9805C; --accent-ink: #221713; /* Шкала риска: та же конструкция, свои значения. Шаг сохранён (1.15 · 1.20 · 1.22), но идёт от тёмного к светлому — в тёмной теме «тяжелее» означает светлее, иначе верхние ступени слились бы с бумагой. */ --risk-1: #2C2622; --risk-2: #37302A; --risk-3: #453C33; --risk-4: #54483C; --risk-line: #7C6B57; --risk-open-line: #8E7A61; --risk-ink: #EEE5D7; --risk-note: #D3C7B7; /* Здесь рамка нужна: светлота в тёмной теме почти не разделяет поверхности. Полупрозрачным берётся ЦВЕТ ГАММЫ (охра), а не белый — белый с прозрачностью на тёплом тёмном даёт мёртвое серое пятно вместо блика. */ --edge: rgba(210, 164, 92, .12); --grain: .14; /* подобрано владельцем глазами; см. арифметику в разделе 6 */ color-scheme: dark; } /* ========================================================================== 3. ЯЗЫК СХЕМ — собственные роли вместо чужих имён -------------------------------------------------------------------------- Семь схем (_tpl/schema-*.php) были нарисованы в токенах Bootstrap, и до 2026-07-20 здесь стоял МОСТ: он подставлял им новую гамму, не трогая семь файлов. Мост снят — схемы переведены на роли ниже. ⚠️ ЗАЧЕМ СНЯТ. Пока схема обращалась к --bs-*, её вид решала СТРАНИЦА, а не она сама: на витрине значения давал мост, на боевых страницах — Bootstrap и старый CSS. Одна и та же схема выглядела и мерилась по-разному в двух местах (голубовато-серые подписи на тёплых ступенях; вылет глифов 0.57 на rule-7 при «чисто» на витрине). Схема — самостоятельный объект, и её вид не должен зависеть от того, куда её положили. ⚠️ В САМИХ СХЕМАХ У КАЖДОГО ТОКЕНА ЕСТЬ ЗАПАСНОЕ ЗНАЧЕНИЕ, равное светлой теме: страницы принципов пока живут на старом CSS, где этих ролей нет. Без запасного значение стало бы недействительным, а fill и stroke наследуются — заливка ушла бы в чёрный, линия исчезла бы вовсе, и всё это без единой ошибки в консоли. Контроль, что чужих имён не осталось (должен давать пусто): grep -rho "var(--bs-[a-z0-9-]*" _tpl/schema-*.php | sed 's/var(//' | sort -u */ :root { --sch-ink: var(--ink); /* имя блока, основной текст в схеме */ --sch-ink-on: #453D35; /* текст на плотной заливке: темнее подписи, но не чернила */ --sch-label: var(--ink-soft); /* заголовок схемы и подписи под ней */ /* ⚠️ Второстепенный путь — тот, что БЕЗ принципа (плоская линия Павла, «до вас не доходит», засечки времени). Он обязан быть тусклее выделенного, но не нечитаемым: прежнее #8B8074 давало 3.54 на бумаге при норме 4.5, и под это подпадали 16 подписей в четырёх схемах. Решение владельца 2026-07-20 — довести до нормы на бумаге, сохранив разрыв с подписью (5.57) и с акцентом. */ --sch-dim: #786E64; /* 4.58 на бумаге */ --sch-block: #EDE7DC; /* заливка обычного блока */ --sch-block-dim: #DDD4C4; /* заливка второстепенного блока; оси и тики */ --sch-line: #C9BDA9; /* стрелки, рамки, направляющие */ --sch-empty: var(--surface); /* фон пустого блока */ /* ⚠️ Смысловая правка, а не только цвет: «правильный» вариант был залит --bs-success, то есть ЗЕЛЁНЫМ. Зелёный «успех» — чужой язык для этой гаммы; правильный путь в проекте отмечается терракотой. */ --sch-accent: var(--accent); /* выделенный путь — тот, что ПО принципу */ --sch-accent-ink: var(--accent-ink); /* текст на акценте */ /* Роли принципов в схеме «семь принципов как система». Имена им достались от Bootstrap случайно (success/warning), к успеху и опасности отношения не имеют: один принцип ключевой, другой охраняющий. */ --sch-key: #E9E4D6; --sch-key-line: #CDBFA6; --sch-guard: #EFE3CD; --sch-guard-line: #D6BE94; } [data-theme="dark"] { /* ⚠️ Тут шкала серых переворачивается: «текст на заливке» становится СВЕТЛЕЕ подписи, а не темнее. Значение выбрано не «на шаг от соседа», а по худшему месту — сноске на верхней ступени лестницы риска: при #C9BCAB там выходило 4.75 при норме 4.5, то есть впритык. */ --sch-ink-on: #D3C7B7; /* В тёмной теме контраст растёт от ОСВЕТЛЕНИЯ, поэтому правка идёт в другую сторону. Значение подобрано по ХУДШЕМУ фону, а не по бумаге: приглушённый текст лежит не только на бумаге (5.11), но и в пустом блоке очереди платежей — там 4.66. Подбор по бумаге давал 4.49 на пустом блоке, то есть промах на сотую долю: цель ставилась не по тому фону. */ --sch-dim: #96897C; --sch-block: #332C28; --sch-block-dim: #463D37; --sch-line: #5A4F47; --sch-key: #332C28; --sch-key-line: #4A4038; --sch-guard: #3B3025; --sch-guard-line: #574733; } /* ⚠️ Здесь стояло правило, гасившее opacity .85 у подписей на акценте: прозрачность срезала контраст с 5.45 до ~4.2, и подпись «плыла» на терракоте (замечено владельцем в тёмной теме). Правило снято 2026-07-20 вместе с мостом — вылечена причина: прозрачность убрана из самих схем. Она там ничего не значила, разницу между строками задаёт размер. Пока лечение жило здесь, на боевых страницах (где этого файла нет) подпись продолжала плыть. */ /* Утилиты Bootstrap, от которых зависят схемы. Без них обе раскладки (широкий экран и телефон) показались бы одновременно. */ .d-none { display: none !important; } .d-block { display: block !important; } @media (min-width: 576px) { .d-sm-block { display: block !important; } .d-sm-none { display: none !important; } } .my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .mt-2 { margin-top: .5rem; } .small { font-size: .875em; } .text-secondary { color: var(--ink-soft); } /* ========================================================================== 4. БАЗА ========================================================================== */ * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: var(--size-body); line-height: var(--leading); -webkit-font-smoothing: antialiased; } .col { max-width: var(--col); margin: 0 auto; padding: 0 var(--pad-col); } h1, h2, h3 { font-family: var(--font-voice); font-weight: 500; line-height: 1.2; margin: 0; } h1 { font-size: var(--size-h1); letter-spacing: -.015em; margin-bottom: 32px; } h2 { font-size: var(--size-h2); line-height: 1.3; margin: var(--block) 0 18px; } p { margin: 0 0 22px; } strong { font-weight: 600; } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; } a:hover { border-bottom-color: transparent; } ol, ul { margin: 0 0 22px; padding-left: 24px; } li { margin-bottom: 10px; } /* Список функций подписки (/pay) — единый источник $conf['features']. Не буллеты-точки, а перечень «что даёт подписка»: имя-strong ведёт строку. */ .features { list-style: none; padding-left: 0; } .features li { margin-bottom: 14px; } /* У figure браузер по умолчанию ставит БОКОВЫЕ отступы 40 px. В Bootstrap их снимал reboot; в чистой базе снимать некому, и схема молча оказывается уже колонки на 80 px. Поймано замером — на глаз читается просто как «схема поменьше». Вертикальные отступы не трогаем: их задаёт класс на самом figure. */ figure { margin-left: 0; margin-right: 0; } figcaption { color: var(--ink-soft); font-size: var(--size-small); } /* Подсветка — примеры промтов/команд «впиши это боту». Тёплая подложка из акцента (color-mix сам адаптируется к теме: терракота в светлой, тёплый рыжий в тёмной), текст обычными чернилами. box-decoration-break: длинный промт переносится на 2–3 строки — фон обтекает каждую, а не рвётся плашкой. */ mark { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); padding: .12em .36em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Таблица. В проекте она одна — сравнение возрастов старта в шестом принципе, и выбрана осознанно вместо схемы: в ячейки просятся числа, значит таблица честнее рисунка. Отсюда и оформление: никаких заливок строк и рамок-сетки, только линии под строками — глаз ведут числа, а не разлиновка. Обёртка с прокруткой обязательна: четыре колонки чисел на телефоне не помещаются в 335 px, и без неё страница поехала бы горизонтально целиком. */ .table-responsive { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: var(--size-small); margin: 0; } th, td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; } th { font-weight: 600; font-size: 15px; letter-spacing: .02em; color: var(--ink-soft); border-bottom-color: var(--ink-soft); } tbody tr:last-child td { border-bottom: 0; } /* Цитата — голос принципа. Линия сбоку вместо кавычек-украшений; прямой угол здесь намеренный: это не карточка, а отчёркнутый текст. */ blockquote { font-family: var(--font-voice); font-style: italic; font-size: var(--size-quote); line-height: 1.5; margin: 40px 0; padding: 6px 0 6px 24px; border-left: 2px solid var(--accent); color: var(--ink); } /* ========================================================================== 5. КОМПОНЕНТЫ ========================================================================== */ /* --- Шапка: логотип и одна кнопка. Иконка — своя SVG, не иконочный шрифт --- */ .site-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); max-width: calc(var(--col) + 200px); margin: 0 auto; padding: 22px 24px; } .logo { display: inline-flex; align-items: center; font-family: var(--font-voice); font-size: 22px; color: var(--ink); text-decoration: none; border: 0; letter-spacing: -.01em; } .logo .brand-seal { flex: none; margin-right: 11px; } .logo b { font-weight: 600; } .logo span { color: var(--ink-soft); font-weight: 400; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-control); background: transparent; color: var(--ink); cursor: pointer; } .icon-btn svg { width: 20px; height: 20px; display: block; } /* Правая часть шапки: тумблер темы и кнопка меню рядом. Обёртка нужна потому, что .site-head раскладывается через space-between — без неё три элемента (лого, тема, меню) разъехались бы по краям и центру. */ .site-head__actions { display: flex; align-items: center; gap: 10px; } /* Тумблер показывает иконку ТЕКУЩЕЙ темы: солнце в светлой, луна в тёмной. Видимостью правит CSS по data-theme, а не JS, — иначе иконка мелькнула бы при загрузке, до того как отработает обработчик. */ .theme-toggle .i-moon { display: none; } [data-theme="dark"] .theme-toggle .i-sun { display: none; } [data-theme="dark"] .theme-toggle .i-moon { display: block; } /* --- Панель навигации. Выезжает справа поверх затемнённой страницы. ⚠️ Первая редакция (2026-07-20) открывала меню на той же бумаге, во весь экран, без затемнения — из соображения «затемнение и скольжение это язык приложения, а не книги». Владелец забраковал сразу: «не понимаешь, что открылось меню». Урок записан в вику: меню обязано читаться как НАЛОЖЕНИЕ, иначе человек не понимает, что произошло, — и красивое рассуждение о характере тут проигрывает понятности. Затемнение и выезд остались, а от характера здесь другое: затемнение тёплое (цвет тёмной бумаги проекта), а не чёрное, и никакого размытия — блюр отклонён как спорящий с бумагой. --- */ .nav-panel { position: fixed; inset: 0; z-index: 20; } .nav-panel[hidden] { display: none; } .nav-panel__veil { position: absolute; inset: 0; background: rgba(29, 25, 23, .55); opacity: 0; transition: opacity .22s ease; } .nav-panel__inner { position: absolute; top: 0; right: 0; bottom: 0; width: min(370px, 86vw); background: var(--surface); border-left: 1px solid var(--edge); box-shadow: -18px 0 44px rgba(29, 25, 23, .18); overflow-y: auto; padding: 22px 26px 48px; transform: translateX(100%); transition: transform .22s ease; } .nav-panel.is-open .nav-panel__veil { opacity: 1; } .nav-panel.is-open .nav-panel__inner { transform: translateX(0); } /* Шапка панели повторяет шапку страницы: слово слева, кнопка справа. Крестик встаёт по тем же правилам, что гамбургер, и не «уезжает» относительно него. */ .nav-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); margin-bottom: 10px; } .nav-panel__label { font-family: var(--font-voice); font-size: 21px; color: var(--ink); } .nav-panel__title { font-size: var(--size-small); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 30px 0 14px; } /* Кому не нужна анимация — тому её нет; панель просто появляется на месте. */ @media (prefers-reduced-motion: reduce) { .nav-panel__veil, .nav-panel__inner { transition: none; } } /* Номер принципа — часть пути, поэтому список нумерованный и номер виден. Ссылки без подчёркивания: здесь их и так все, линии превратились бы в шум. */ .nav-panel__list { margin: 0; padding-left: 26px; } .nav-panel__list--plain { list-style: none; padding-left: 0; } .nav-panel__list li { margin-bottom: 14px; } .nav-panel__list li::marker { color: var(--ink-soft); font-size: var(--size-small); } .nav-panel__list a { color: var(--ink); border-bottom: 0; } .nav-panel__list a:hover { color: var(--accent); } /* --- Кнопки. Терракота — ТОЛЬКО для созидательных действий. Отмена, удаление, выход не получают заливку никогда: терракота из красного семейства, и заливкой их было бы не отличить от опасных. --- */ .btn { display: inline-block; font-family: var(--font-text); font-weight: 500; font-size: 18px; line-height: 1; padding: 16px 26px; border: 1px solid transparent; border-radius: var(--radius-control); text-decoration: none; cursor: pointer; } .btn--main { background: var(--accent); color: var(--accent-ink); } .btn--quiet { background: transparent; color: var(--ink); border-color: var(--line); } /* Контур на hover акцентируется ЦЕЛИКОМ: правило a:hover (выше) гасит border-bottom-color у всех ссылок, из-за чего у контурной кнопки пропадал НИЗ рамки. Задаём border-color со всех сторон — это перебивает a:hover и чинит. Терракота здесь уместна: `--quiet` несёт созидательные действия (расчёт, переход к следующему принципу), а не отмену. */ .btn--quiet:hover { border-color: var(--accent); color: var(--accent); } /* Кнопка на время запроса: гаснет и не принимает повторных нажатий. Форма ждёт ответа сервера — второе нажатие завело бы вторую попытку входа или оплаты. */ .btn:disabled, .btn[disabled] { opacity: .55; cursor: default; } /* --- Врез применения. Звучит ТИШЕ окружающего текста, а не громче: в старом макете на этом месте стояла красная кнопка — самое громкое пятно страницы. --- */ .offer { margin: var(--block) 0 0; padding: 30px 34px 34px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-card); } .offer h2 { margin-top: 0; font-size: var(--size-quote); } .offer p { font-size: 18px; } .offer .price { color: var(--ink-soft); font-size: var(--size-small); } /* --- Ценник во врезе оплаты. Цена вынута из прозы и стоит объектом: глаз берёт её один раз, а текст рядом идёт без цифр. Без этого одна и та же сумма повторяется в блоке четыре раза (подводка, условия, согласие, кнопка) и перестаёт читаться — заметно у вернувшегося после отмены, где «сейчас» и «дальше» совпадают. Голосом заголовка (Lora): число здесь не служебная сноска, а то, ради чего человек пришёл на страницу. --- */ .offer .price-tag { margin: 0 0 6px; font-family: var(--font-voice); font-size: 34px; line-height: 1.15; letter-spacing: -.015em; } /* Период — при сумме, но тише её: он уточняет, а не спорит за внимание. */ .offer .price-tag span { font-family: var(--font-text); font-size: var(--size-small); color: var(--ink-soft); letter-spacing: 0; } /* Вторая ступень (у новичка «дальше 149 ₽ / 7 дней»): про будущее, не про то, что спишется сейчас, — поэтому мельче ценника и тише его. */ .offer .price-next { margin: 0; color: var(--ink-soft); font-size: var(--size-small); } /* Ценник и условия — разные по работе («сколько платить» / «как это устроено»), поэтому между ними воздух; вплотную они читались одной серой простынёй. */ .offer .price-tag + .price, .offer .price-next + .price { margin-top: 16px; } /* Абзац сразу после врезка (когда между ними нет заголовка) отделяется тем же шагом, что и смысловые блоки: без этого он прилипает к нижнему краю врезка — у

верхний отступ нулевой. Затрагивает только СМЕЖНЫЙ абзац; на rule-страницах после врезка идёт заголовок, а не p, поэтому там правило не срабатывает. */ .offer + p { margin-top: var(--block); } .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; } /* Подсказка под кнопкой («отметьте согласия», дорога назад к возобновлению). У абзаца отступ по базе нижний, а здесь он нужен наоборот: подсказка примыкает к действию сверху, а снизу за ней край врезка — лишний воздух там читается как пустая строка. */ .actions ~ .text-secondary { margin: 12px 0 0; } /* Переход к следующему принципу. Кнопка контурная, а не заливная: это не покупка и не главное действие страницы — главное действие человек делает не на сайте, а в приложении банка. */ .next-step { margin-top: 34px; } /* --- Лид на главной. Крупнее основного текста, но НЕ заголовок: это первая фраза по существу, а не титул. Засечками, как заголовки, — чтобы вступление звучало одним голосом с h1, а дальше голос переходил к Nunito. --- */ .lead { font-family: var(--font-voice); font-size: var(--size-lead); line-height: 1.5; margin-bottom: 26px; } /* --- Карта пути: семь принципов, каждый строкой сути. Номер виден и снаружи колонки текста — это шкала, по которой человек понимает, где находится. Название — ссылка, суть под ним обычным цветом: суть здесь важнее перехода, и красить её в акцент значило бы звать кликать, а не читать. --- */ .path { list-style: none; padding: 0; margin: 26px 0 26px; counter-reset: path; } .path li { position: relative; padding-left: 44px; margin-bottom: 22px; counter-increment: path; } .path li::before { content: counter(path); position: absolute; left: 0; top: 1px; width: 28px; text-align: right; font-family: var(--font-voice); font-size: 21px; color: var(--ink-soft); } .path a { display: block; border-bottom: 0; } /* Название — терракотой, как все ссылки проекта: это и есть сигнал «сюда можно перейти», видимый сразу и без наведения (на телефоне курсора нет вообще). */ .path__name { display: block; font-weight: 600; color: var(--accent); } /* Подчёркивание только на наведении — показывает, на каком пункте курсор. text-decoration, а не border: линия рисуется поверх и не двигает вёрстку (тот же прыжок, что чинили в подвале). */ .path a:hover .path__name { text-decoration: underline; text-underline-offset: 3px; } /* Суть — обычным приглушённым текстом. Она внутри ссылки, но цвет НЕ наследует акцент: читается как текст, а не как продолжение ссылки. */ .path__sub { display: block; color: var(--ink-soft); font-size: var(--size-small); line-height: 1.6; margin-top: 2px; } /* --- Карта дерева (страница-концепт «Денежное дерево существует»). Роль соседняя с .path, но НЕ та же, поэтому свой класс, а не модификатор: там номер = шкала «где я в курсе», здесь номеров нет намеренно (порядок идёт снизу вверх по растению, 7→2→1→3→4→6→5, и цифры об этот порядок спотыкались бы). Там суть — подпись под ссылкой, здесь объяснение — основной текст, а имя принципа стоит хвостом как переход. --- */ .tree-map { list-style: none; padding: 0; margin: 26px 0; } .tree-map li { margin-bottom: 26px; } .tree-map p { margin-bottom: 6px; } /* Стрелка — частью ссылки, а не текстом в разметке: так она не попадает в выделение при копировании и не читается голосом скринридера как «стрелка». */ .tree-map__to::before { content: '→'; margin-right: 8px; color: var(--ink-soft); } .tree-map__to { font-weight: 600; border-bottom: 0; } .tree-map__to:hover { text-decoration: underline; text-underline-offset: 3px; } /* --- Согласия. Чекбокс + текст рядом; первый служебный компонент-форма (экраны входа и регистрации переиспользуют его). Нативный input, крашенный терракотой через accent-color: поставленная галочка — созидательное действие, цвет уместен. Метка обёрнута в