# Правила применения марки «Букмекерский Рейтинг»

Адресовано тем, кто ставит логотип в код: задача 0.2.2 (оформление элементов),
0.5 (главная страница), 0.6 (графика страницы) и любая последующая.

## 1. Какой файл куда

| поверхность | файл | CSS-размер |
|---|---|---|
| шапка, ширины 1440 и 1024 | `logo-header-desktop-light.svg` | `width:190px; height:38px` |
| шапка, ширины 768 и 390 | `logo-header-mobile-light.svg` | `width:140px; height:24px` |
| подвал, все четыре ширины | `logo-footer-light.svg` | `width:162px; height:32px` |
| тёмная карточка, тёмный подвал | те же имена с `-dark` | те же размеры |
| печать, факс, forced-colors, тиснение | те же имена с `-mono` | те же размеры |
| кнопка, аватар, значок вкладки | `mark-light.svg` / `mark-dark.svg` | от 16 px |
| вкладка браузера | `favicon.svg`, `favicon.ico` | — |

Переключение настольной и мобильной композиции — на границе 1024/768, ровно там,
где слот меняется у эталона:

```html
<a class="brand-logo" href="/" rel="home" aria-label="Букмекерский Рейтинг — на главную">
  <picture>
    <source media="(min-width: 1024px)" srcset="/assets/brand/logo-header-desktop-light.svg">
    <img src="/assets/brand/logo-header-mobile-light.svg"
         alt="Букмекерский Рейтинг" width="190" height="38">
  </picture>
</a>
```

## 2. Что делать нельзя

- Растягивать: пропорции слотов зафиксированы, `object-fit` менять не нужно.
- Пересобирать композицию из знака и своего текста — надпись набрана в кривых
  один раз и живёт целиком.
- Красить логотип в цвета вне `tokens/brand-tokens.css`, в том числе «почти
  такой же» зелёный.
- Класть светлую версию на тёмное и наоборот: для этого есть парный файл.
- Добавлять тень, обводку или свечение, чтобы «вытащить» знак с фона. Если знак
  тонет — меняется поверхность или берётся парная версия, а не эффект.
- Ставить знак ближе охранного поля к другим элементам (см. `proof/clearance-diagram.png`).

## 3. Цвет и поверхность

| роль | токен | где |
|---|---|---|
| яркая зелень бренда | `--brand-signal` | знак на тёмном, метки, акценты |
| та же роль на светлом | `--brand-signal-on-light` | пластина-лидер на белой и мятной поверхности |
| словесная часть на светлом | `--brand-on-light` | надпись в светлой шапке и подвале |
| словесная часть на тёмном | `--brand-on-dark` | знак на тёмной карточке |
| заливка призыва | `--brand-primary` | кнопка с белым текстом (4.54:1) |

Полупрозрачная шапка `rgba(255,255,255,0.6)` над тёмной карточкой даёт
поверхность светлее середины, поэтому в шапке всегда светлая версия логотипа —
менять её при прокрутке не нужно.

## 4. Логотип как ссылка

Логотип в шапке — ссылка на главную и первая цель табуляции. Кольцо фокуса —
отдельные токены, оно не сводится к смене цвета текста:

```css
.brand-logo:focus-visible {
  outline: var(--brand-focus-ring-width) solid var(--brand-focus-on-light);
  outline-offset: var(--brand-focus-ring-offset);
}
[data-brand-surface="dark"] .brand-logo:focus-visible { outline-color: var(--brand-focus-on-dark); }
```

Атрибут `alt` — дословно `Букмекерский Рейтинг`. Пустой `alt` допустим только
если рядом уже есть текстовое название той же ссылки.

## 5. Минимальные размеры

| файл | меньше не ставить |
|---|---|
| `logo-header-desktop-*` | 190×38 (при меньшем — компактная композиция) |
| `logo-header-mobile-*` | 140×24 |
| `logo-footer-*` | 162×32 |
| `mark-*` | 16×16 |

Ниже этих значений прорезь знака и надпись перестают различаться — проверено
прогоном `proof/silhouette-proof.png`.

## 6. Если нужен новый размер или носитель

Не масштабируйте PNG. Добавьте размер в `tools/build_exports.py` и пересоберите:
каждый растр рисуется прямо из вектора. После пересборки обязательно прогоните
`tools/qa.py` и `tools/build_manifest.py` — иначе опись и контрольные суммы
разойдутся с файлами.