/* app.css — лейаут личного кабинета реферера (сайдбар + контент). Адаптив: брейкпоинт 640px (сайдбар → off-canvas по бургеру, таблицы → скролл). Контраст ≥ WCAG AA, видимый фокус, семантические компоненты. Цикл G: цвет, шрифт и радиус приходят из ui-kit «Редант» (`/static/vendor/redant-ui/`, commit 134e135). Свои правила НАМЕРЕННО остаются вне @layer: кит целиком лежит в `@layer rui.*`, а неслоёное правило перекрывает слоёное независимо от специфичности (ADR-004 кита, S-4). Именно так платформа удерживает свой лейаут поверх чужой дизайн-системы. Обратная сторона: перевод элемента на класс кита ОБЯЗАН быть парным — своё правило удаляется, класс `.rui-*` добавляется в разметку (ADR-G03, S-3). */ /* 🔴 Цикл G, поправка к ADR-G04 (принята на реализации, основание — замер в браузере). Роли `bg` и `surface` у платформы и у кита ИНВЕРТИРОВАНЫ: у кита в светлой теме --rui-bg = #ffffff (фон страницы), --rui-surface = #f6f7f9 (приподнятая поверхность); у платформы наоборот — серая страница и БЕЛЫЕ карточки. Дизайн предлагал развернуть это в наших алиасах (--bg: var(--rui-surface)). Для НАШИХ правил этого достаточно, но компоненты кита красят себя сами: `.rui-card` и `.rui-input` берут `background: var(--rui-surface)`. Замер после перевода: страница #f6f7f9 И карточка #f6f7f9 — карточки и поля сливались с фоном, их выдавала только рамка. Это больше визуальное изменение, чем сама смена акцента, ради которой цикл затевался. Поэтому разворот делается ОДИН раз — на уровне ролей кита и только в собственных шеллах (auth и кабинет; в админке ролевые токены не трогаем, S-6). Значения берутся из примитивов кита, литералов нет. После этого и наши правила, и компоненты кита дают прежний вид, а имена перестают противоречить смыслу. Меняются ровно два цвета: акцент #2f6fed → медь #9E5B16 и акцентный текст #1b4fbf → #7a4712. Остальные семь ролей совпадают с прежними побайтово. */ :root { /* Модель поверхностей платформы, наложенная на роли кита. */ --rui-bg: var(--rui-gray-50); /* #f6f7f9 — фон страницы */ --rui-surface: var(--rui-gray-0); /* #ffffff — карточки, плитки, поля */ --accent: var(--rui-accent); /* #9E5B16 — заливки, акцентные рамки */ --accent-ink: var(--rui-accent-text); /* #7a4712 — акцентный ТЕКСТ, AA на белом */ --bg: var(--rui-bg); /* #f6f7f9 */ --surface: var(--rui-surface); /* #ffffff */ --fg: var(--rui-fg); /* #1c2430 */ --muted: var(--rui-muted); /* #5b6472 */ --border: var(--rui-border); /* #e3e6ea */ --err: var(--rui-danger); /* #c0392b */ --ok: var(--rui-success); /* #1e7a34 */ --sidebar-w: 240px; /* лейаут, а не токен кита */ } * { box-sizing: border-box; } /* Цикл G, ADR-G03: объявления font-family и line-height убраны — они перекрывали типографику кита (Inter в тексте, Oswald в заголовках; line-height 1.5 кит задаёт сам, значение то же). Фон и цвет остаются за нами: html кит красит в --rui-bg, а он развёрнут выше под нашу модель. */ body { background: var(--bg); color: var(--fg); } /* Правила `a { color }` и `h1, h2 { line-height }` удалены (ADR-G03): их роль берёт rui.base кита — тот же цвет через тот же токен и line-height 1.2. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- Каркас: topbar + sidebar + content -------------------------------------------------------------------------- */ .layout { min-height: 100vh; } .topbar { display: flex; align-items: center; gap: .6rem; background: var(--surface); border-bottom: 1px solid var(--border); padding: .6rem 1rem; position: sticky; top: 0; z-index: 20; } /* Цикл G, ADR-G10: в шапке теперь логотип + подпись, поэтому .brand стал флекс-строкой. */ .topbar .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--fg); text-decoration: none; } /* Ред. 2026-07-27: логотип стал растровым (знак брендбука 1040×518 — вектора не существует, INSPECTION кита §П1 №2). Атрибуты width/height в разметке — пара 68×34, целочисленное приближение пропорции 2,0077; чтобы приближение не жало знак по горизонтали, ширину считает браузер от самой картинки. 34px вместо прежних 28: у знака брендбука вордмарк — только ~31% высоты, на 28px буквы уходят в ~8,6px. Шапка от этого выше на 6px — цена принята осознанно, ADR-F13 (экономия вертикали) касается плиток кабинета, не шапки. Правило общее для обоих шеллов: app.css подключён и в base.html, и в cabinet/base.html. */ .brand img { block-size: 34px; inline-size: auto; } .burger { font-size: 1.2rem; line-height: 1; color: var(--fg); background: transparent; border: 1px solid var(--border); border-radius: var(--rui-radius); padding: .3rem .55rem; cursor: pointer; } .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 1rem; display: flex; flex-direction: column; gap: 1rem; } .sidebar .who { margin: 0; color: var(--muted); font-size: .9rem; } .sidebar .who strong { color: var(--fg); word-break: break-all; } .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; } .menu a { display: block; padding: .55rem .7rem; border-radius: var(--rui-radius); color: var(--fg); text-decoration: none; font-weight: 600; } .menu a:hover { background: var(--rui-surface-2); } .menu a[aria-current="page"] { background: var(--accent); color: var(--rui-accent-fg); } /* Кнопка выхода остаётся своей (ADR-G12): она во всю ширину сайдбара и прижата книзу — у .rui-btn другая ширина и минимальная высота 44px. */ .logout { margin-top: auto; } .logout button { width: 100%; padding: .6rem .8rem; font-weight: 600; cursor: pointer; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--rui-radius); } .logout button:hover { background: var(--rui-surface-2); } .content { padding: 1.25rem 1rem; max-width: 1000px; } /* Desktop: постоянный двухколоночный грид, бургер скрыт */ @media (min-width: 640px) { .layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: auto 1fr; grid-template-areas: "topbar topbar" "sidebar content"; } .topbar { grid-area: topbar; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .burger { display: none; } } /* Mobile: off-canvas сайдбар, тогглится Alpine (класс is-open) */ @media (max-width: 639.98px) { .sidebar { display: none; border-right: 0; border-bottom: 1px solid var(--border); } .sidebar.is-open { display: flex; } } /* -------------------------------------------------------------------------- Контент: заголовки, секции, карточки -------------------------------------------------------------------------- */ .page-title { font-size: 1.4rem; margin: 0 0 1rem; } /* 🔴 Цикл F (ADR-F13): заголовки секций съедали вертикаль, ради которой партнёр и приходит. На дашборде четыре секции подряд, у каждой — своя строка с h2 1.1rem и отступ 1.75rem снизу; блоки с цифрами уезжали вниз (жалоба владельца «строки со словами баланс и активность сдвигают блоки с цифрами»). Экономия — на служебных элементах: заголовок мельче, отступы плотнее. Пояснения под плитками (.hint) НЕ трогаем — решение владельца: партнёры видят эти экраны впервые, и объяснение про деньги важнее пары строк. */ .section { margin-bottom: 1.1rem; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; } .section-head h2 { font-size: .95rem; margin: 0; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); } .section-note { color: var(--muted); font-size: .85rem; } /* Цикл G, ADR-G03: правила `.card` и `.card-title` удалены — карточки переведены на `.rui-card` / `.rui-card__title` кита (радиус 10px вместо 12px, отступ 20px, мягкая тень --rui-shadow-1). Класс без удаления правила не подействовал бы: наше неслоёное правило выигрывало у слоёного правила кита. */ /* minmax 150px → 190px (цикл F): при 150px ряды рассыпались на разное число колонок у соседних секций, и плитки «прыгали» друг относительно друга. 🔴 Цикл G: НЕ переводится на `.rui-grid--auto` (ADR-G12). Кит задаёт там те же три свойства (display/minmax/gap), но с minmax(240px) и gap 20px, и все три перекрыты правилом ниже — класс кита стал бы декоративным шумом, а ширина 190px введена в цикле F против «прыгающих» рядов. */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; } /* 🔴 Плитка переведена на `.rui-card`, но ДВА свойства кита гасятся намеренно — оба съедают вертикаль, за которую боролся ADR-F13 цикла F (см. комментарий выше, жалоба владельца): padding — у кита 20px против наших 16px; gap — у кита 12px между строками карточки, а у плитки три строки (подпись/число/подсказка), и их собственные отступы .2rem/.35rem уже задают ритм. Замер в браузере: с gap кита плитка 172px, без него 148px — те самые 24px на каждую из десяти плиток дашборда. Фон, рамку, радиус и тень даёт кит. */ .stat-card { padding: 1rem; gap: 0; } /* Итог «Заработано всего»: до цикла F он жил в ОТДЕЛЬНОЙ сетке и растягивался во всю ширину — читался как ещё один шаг пути денег. Теперь это плитка в общей сетке, а её роль показывает акцентная полоса (ADR-F13). Цикл G: полосу рисует `.rui-card--accent` кита (медная граница слева 4px), своё правило удалено. */ .stat-card .label { color: var(--muted); font-size: .85rem; } .stat-card .value { font-size: 1.5rem; font-weight: 700; margin-top: .2rem; font-variant-numeric: tabular-nums; } .stat-card .value.money::after { content: " ₽"; font-size: .9rem; font-weight: 600; color: var(--muted); } /* Подсказка ВНУТРИ плитки (цикл C, 08-ui-specs §1.5) — единственная правка CSS за цикл. У .hint не было правила вовсе: неоформленная подсказка унаследовала бы размер body, стала бы крупнее подписи плитки и раздула бы карточки (min-width 150px), похоронив числа. Скоуп .stat-card — 8 подсказок вне плиток не меняются ни на пиксель. */ .stat-card .hint { font-size: .78rem; color: var(--muted); margin-top: .35rem; line-height: 1.3; } /* 🔴 Цикл G: код реф-ссылки берёт у кита ФОРМУ (`.rui-tag` — фон, отступы, рамка, радиус 6px), но сохраняет СВОЙ цвет. У кита тег нейтральный (--rui-fg на --rui-surface-2), а здесь это ключевой элемент кабинета — ради него партнёр и заходит, — и акцентный медный текст его выделяет. Пара «медный текст #7a4712 на #eceef1» = 6.60:1, AA проходит. */ .code-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent-ink); } /* Быстрые действия / кнопки. 🔴 `.actions` НЕ переводится на `.rui-stack--row` (ADR-G12): кит добавил бы только align-items, а полный переход поменял бы зазор кнопок с .6rem на 16px. Правила `.btn`, `.btn.primary`, `.btn.ghost`, `.btn:hover` удалены — кнопки переведены на `.rui-btn` + `--accent`/`--ghost` (ADR-G03). */ .actions { display: flex; gap: .6rem; flex-wrap: wrap; } /* Селектор периода (htmx) */ .periods { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; } /* Переключатель периода остаётся своим (ADR-G12): внешне он близок к `.rui-pill`, но несёт роль навигации с aria-current и htmx-запросом, а у пилюли кита состояние выражено через [aria-pressed]. */ .periods a { text-decoration: none; padding: .4rem .8rem; border-radius: var(--rui-radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--fg); font-weight: 600; font-size: .9rem; } .periods a:hover { background: var(--rui-surface-2); } .periods a.active { background: var(--accent); color: var(--rui-accent-fg); border-color: var(--accent); } /* Таблица by_link — на мобиле горизонтальный скролл в контейнере. Цикл G, ADR-G03: правила `.table-wrap` и `table.data*` удалены — таблица переведена на `.rui-table-wrap` / `.rui-table` кита. Числовые ячейки несут `.rui-num num`: выравнивание по правому краю и табличные цифры даёт кит правилом `.rui-table .rui-num`. */ /* Лента событий */ .feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .feed li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rui-radius); padding: .5rem .7rem; } .feed .when { color: var(--muted); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Метка события: ФОРМА своя (мелкий капс — плотная лента, у `.rui-badge` шрифт и отступы крупнее), ЦВЕТ от кита. Правила `.feed .tag.click` и `.order` удалены (ADR-G03), их место заняли `.rui-badge--accent` / `--success`. */ .feed .tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; padding: .1rem .45rem; border-radius: var(--rui-radius-sm); } .feed .grow { flex: 1; min-width: 0; } .badge-state { color: var(--muted); font-size: .8rem; } .empty { color: var(--muted); padding: .8rem 0; } /* Утилита скрытия. Она НЕслоёная, поэтому гасит и компоненты кита: у бокса ошибки `class="rui-alert rui-alert--danger hidden"` display:none выигрывает у display:flex кита независимо от специфичности (forms.js снимает класс). Правила `.msg`, `.msg.error`, `.msg.ok` удалены (ADR-G03) — сообщения переведены на `.rui-alert` + `--danger`/`--success`; заодно ушёл дубль тех же правил из инлайнового