/* _bundle.css — все компоненты 20-blocks/*. tokens+skins+base грузить ОТДЕЛЬНО до него. */
/* ===== about-mission-block ===== */
/* ============================================================
* about-mission-block · block.css
* Скоуплено на .about-mission. Только токены (10-tokens/).
* Конвенция: ★research / premium-планка (готовой разметки нет — своя).
* House-style: trust-врезки (.methodology / .stat-strip) на наших токенах;
* эталон структуры/нейминга — casino-item-card.
* Премиум: фикс-слоты глифов, табличные цифры, ОДНА CTA, drawer держит карточку
* чистой, единые pad/radius/shadow, subtle motion. Один акцент — --brand.
* Адаптив: 980 / 640. Touch-target ≥ --tap-min. prefers-reduced-motion — из base.
* ========================================================== */
.about-mission {
/* фикс-слоты: глиф принципа и мин-ширина слота метрики */
--am-glyph: 36px;
--am-stat-min: 120px;
display: block;
padding: var(--s-6);
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
color: var(--text);
}
/* ---- Шапка: eyebrow + заголовок + лид-обещание ---- */
.about-mission__head {
display: flex;
flex-direction: column;
gap: var(--s-2);
margin-bottom: var(--s-5);
}
.about-mission__eyebrow {
margin: 0;
font-family: var(--font-body);
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand);
}
.about-mission__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--text);
}
.about-mission__lede {
margin: 0;
max-width: var(--container-prose);
font-size: var(--t-h4);
line-height: var(--lh-loose);
color: var(--text-dim);
}
/* ---- Принципы: глиф в фикс-слоте + название + одна строка ---- */
.about-mission__pillars {
list-style: none;
margin: 0 0 var(--s-5);
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-5);
}
.about-mission__pillar {
display: grid;
grid-template-columns: var(--am-glyph) minmax(0, 1fr);
gap: var(--s-3);
align-items: start;
}
.about-mission__pillar-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--am-glyph);
height: var(--am-glyph);
color: var(--brand);
background: var(--brand-soft);
border-radius: var(--r-md);
}
.about-mission__pillar-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--s-1);
}
.about-mission__pillar-name {
font-size: var(--t-body);
font-weight: var(--fw-semi);
line-height: var(--lh-snug);
color: var(--text);
}
.about-mission__pillar-text {
font-size: var(--t-small);
line-height: var(--lh-base);
color: var(--text-mute);
}
/* ---- Метрики доверия: равные слоты, хайрлайн-разделители, tabular-nums ---- */
.about-mission__stats {
margin: 0 0 var(--s-5);
padding: var(--s-4) 0;
border-top: var(--hairline);
border-bottom: var(--hairline);
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(var(--am-stat-min), 1fr);
}
.about-mission__stat {
display: flex;
flex-direction: column;
gap: var(--s-1);
min-width: 0;
padding: 0 var(--s-5);
/* вертикальный волосок-разделитель слева; у первого слота снимается */
border-left: var(--hairline);
}
.about-mission__stat:first-child {
padding-left: 0;
border-left: 0;
}
.about-mission__stat-v {
margin: 0;
display: flex;
align-items: baseline;
gap: 1px;
font-family: var(--font-display);
font-size: var(--t-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
color: var(--text);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.about-mission__stat-num { letter-spacing: .01em; }
/* единица/суффикс — приглушённая, не спорит с числом */
.about-mission__stat-unit {
font-family: var(--font-body);
font-size: var(--t-h4);
font-weight: var(--fw-semi);
color: var(--text-faint);
}
.about-mission__stat-k {
font-size: var(--t-small);
line-height: var(--lh-snug);
color: var(--text-mute);
}
/* ---- Подвал: ОДНА CTA + drawer независимости ---- */
.about-mission__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
}
.about-mission__cta { flex: 0 0 auto; }
.about-mission__cta-ic {
display: inline-flex;
transition: transform var(--dur-quick) var(--ease);
}
.about-mission__cta:hover .about-mission__cta-ic { transform: translateX(2px); }
/* drawer-триггер: нейтральный, чтобы не спорить с CTA за акцент */
.about-mission__disclosure { position: relative; min-width: 0; }
.about-mission__disclosure-btn {
display: inline-flex;
align-items: center;
gap: var(--s-1);
min-height: var(--tap-min);
font-size: var(--t-tiny);
font-weight: var(--fw-medium);
color: var(--text-mute);
}
.about-mission__disclosure-btn:hover { color: var(--brand); }
.about-mission__disclosure-chev {
display: inline-flex;
transition: transform var(--dur-quick) var(--ease);
}
.about-mission__disclosure-btn[aria-expanded="true"] .about-mission__disclosure-chev { transform: rotate(180deg); }
.about-mission__disclosure-body {
margin-top: var(--s-2);
padding: var(--s-3) var(--s-4);
font-size: var(--t-tiny);
line-height: var(--lh-base);
color: var(--text-dim);
background: var(--bg-2);
border: var(--hairline);
border-radius: var(--r-md);
}
.about-mission__disclosure-body[hidden] { display: none; }
.about-mission__disclosure-body p { margin: 0 0 var(--s-2); }
.about-mission__disclosure-body p:last-child { margin-bottom: 0; }
/* ============================================================
* Модификатор: компактный (сайдбар/врезка) — один столбец принципов,
* без метрик-ряда, меньше pad/gap.
* ========================================================== */
.about-mission--compact { padding: var(--s-5); }
.about-mission--compact .about-mission__title { font-size: var(--t-h3); }
.about-mission--compact .about-mission__lede { font-size: var(--t-small); line-height: var(--lh-base); }
.about-mission--compact .about-mission__pillars {
grid-template-columns: 1fr;
gap: var(--s-4);
margin-bottom: var(--s-4);
}
.about-mission--compact .about-mission__foot { justify-content: stretch; }
.about-mission--compact .about-mission__cta { flex: 1 1 auto; }
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.about-mission { padding: var(--s-5); }
/* принципы в 1 колонку — длинные строки читаются лучше, чем сжатые столбцы */
.about-mission__pillars { grid-template-columns: 1fr; gap: var(--s-4); }
/* метрики: 3 равных слота не помещаются — переносим в сетку с хайрлайнами */
.about-mission__stats {
grid-auto-flow: row;
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 640px) {
.about-mission { padding: var(--s-4); }
.about-mission__title { font-size: var(--t-h3); }
.about-mission__lede { font-size: var(--t-small); line-height: var(--lh-base); }
/* метрики — один столбец: разделитель становится верхним волоском, метка слева */
.about-mission__stats {
grid-template-columns: 1fr;
gap: 0;
}
.about-mission__stat {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s-2);
padding: var(--s-3) 0;
border-left: 0;
border-top: var(--hairline);
}
.about-mission__stat:first-child { border-top: 0; padding-top: 0; }
.about-mission__stat-k { order: -1; } /* метка слева, значение справа */
.about-mission__foot { flex-direction: column; align-items: stretch; }
.about-mission__cta { width: 100%; }
.about-mission__disclosure-btn { justify-content: flex-start; }
}
/* ===== activity-feed-live ===== */
/* ============================================================
* activity-feed-live · block.css
* Скоуплено на .activity-feed-live / .afl. Только токены (10-tokens/).
* Конвенция: html-base + feed-data в data-feed/aria-live. Адаптив: 640.
* Один акцент = --brand; success/info — тип события, по смыслу.
* ========================================================== */
.activity-feed-live { display: block; }
/* ---- Карточка ---- */
.afl {
display: flex;
flex-direction: column;
max-width: 480px;
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
/* ---- 1 · Голова ---- */
.afl__head {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-bottom: var(--hairline);
}
.afl__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h4); font-weight: var(--fw-bold);
color: var(--text);
}
.afl__live {
display: inline-flex; align-items: center; gap: var(--s-1);
flex: 0 0 auto;
padding: 2px var(--s-2);
font-size: var(--t-tiny); font-weight: var(--fw-semi);
letter-spacing: .06em; text-transform: uppercase;
color: var(--danger); background: var(--danger-soft);
border-radius: var(--r-pill);
}
.afl__live-dot {
width: 6px; height: 6px; border-radius: var(--r-pill);
background: var(--danger);
animation: afl-blink 1.6s var(--ease) infinite;
}
@keyframes afl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .afl__live-dot { animation: none; } }
/* ---- 2 · Лента ---- */
.afl__list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
}
.afl__row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "type who amount" "type who time";
align-items: center;
gap: 0 var(--s-3);
padding: var(--s-3) var(--s-5);
border-bottom: var(--hairline);
animation: afl-in var(--dur-base) var(--ease-out) both;
}
.afl__row:last-child { border-bottom: none; }
@keyframes afl-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .afl__row { animation: none; } }
/* Тип события — bespoke иконка в круглом слоте (фикс-слот) */
.afl__type {
grid-area: type;
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; flex: 0 0 auto;
border-radius: var(--r-pill);
color: var(--brand);
background: var(--brand-soft);
}
.afl__row--win .afl__type { color: var(--success); background: var(--success-soft); }
.afl__row--payout .afl__type { color: var(--info); background: var(--info-soft); }
.afl__row--cashout .afl__type { color: var(--brand); background: var(--brand-soft); }
/* Кто + что */
.afl__who {
grid-area: who;
display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.afl__user {
font-weight: var(--fw-semi); color: var(--text);
font-variant-numeric: tabular-nums;
}
.afl__meta {
font-size: var(--t-small); color: var(--text-mute);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.afl__game { color: var(--text-dim); font-weight: var(--fw-medium); }
/* Сумма — выровнена вправо, tabular */
.afl__amount {
grid-area: amount;
justify-self: end;
font-family: var(--font-display);
font-weight: var(--fw-bold);
color: var(--text);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.afl__row--win .afl__amount { color: var(--success); }
/* Время */
.afl__time {
grid-area: time;
justify-self: end;
font-size: var(--t-tiny); color: var(--text-faint);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ---- 3 · Фут ---- */
.afl__foot {
padding: var(--s-3) var(--s-5);
border-top: var(--hairline);
background: var(--bg-2);
}
.afl__note {
margin: 0;
font-size: var(--t-tiny); color: var(--text-faint);
}
/* ============ Адаптив ============ */
@media (max-width: 640px) {
.afl { max-width: none; }
.afl__head { padding: var(--s-3) var(--s-4); }
.afl__row { padding: var(--s-3) var(--s-4); gap: 0 var(--s-2); }
.afl__type { width: 32px; height: 32px; }
.afl__foot { padding: var(--s-2) var(--s-4); }
}
/* ===== add-to-compare ===== */
/* ============================================================
* add-to-compare · block.css
* Скоуплено на .add-to-compare. Только токены (10-tokens/).
* Назначение: компактный контрол «в сравнение» — чекбокс/кнопка-тоггл,
* который помечает оператора для head-to-head (comparison-table / inline-compare).
* Дефолт = нативный + кастомный SVG-бокс (работает БЕЗ JS,
* состояние держит сам инпут). Варианты: --button (button[aria-pressed]),
* --icon (квадратный иконка-тоггл для угла карточки), --solid (залит брендом).
* Один акцент (--brand); --success — НЕ используется (нет смысловой семантики);
* галочка/состояние дублируются формой+текстом, не только цветом. tabular-nums на счётчике.
* Конвенция-источник: ★research / premium-планка + _CONTRACT (эталон casino-item-card).
* Адаптив: 640 (тап-таргеты, ширина). Motion: subtle (рисование галочки, tap).
* ========================================================== */
.add-to-compare {
/* фикс-геометрия бокса/иконки — единый ритм со всеми инстансами */
--atc-box: 20px; /* сторона чек-бокса */
--atc-fill: var(--surface); /* фон контрола; в --solid → --brand-soft */
display: inline-flex;
align-items: center;
gap: var(--s-2);
position: relative;
min-height: var(--tap-min);
padding: var(--s-1) var(--s-3);
margin: 0;
background: var(--atc-fill);
border: var(--hairline);
border-radius: var(--r-pill);
cursor: pointer;
user-select: none;
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
color: var(--text-dim);
-webkit-tap-highlight-color: transparent;
transition:
background var(--dur-quick) var(--ease),
border-color var(--dur-quick) var(--ease),
color var(--dur-quick) var(--ease),
transform var(--dur-quick) var(--ease);
}
.add-to-compare:hover {
border-color: color-mix(in srgb, var(--brand) 55%, var(--rule));
color: var(--text);
}
.add-to-compare:active { transform: translateY(1px); }
/* ---- Нативный инпут: визуально скрыт, но в потоке для фокуса/клавиатуры ---- */
.add-to-compare__input {
position: absolute;
width: 1px; height: 1px;
margin: 0; padding: 0;
opacity: 0;
pointer-events: none;
}
/* Фокус-кольцо переносим на корень (инпут визуально скрыт) — base :focus-visible не отключаем */
.add-to-compare__input:focus-visible + .add-to-compare__box {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* ---- Кастомный бокс с галочкой (bespoke SVG, не icon-font) ---- */
.add-to-compare__box {
flex: 0 0 auto;
position: relative;
display: inline-grid;
place-items: center;
width: var(--atc-box);
height: var(--atc-box);
background: var(--surface);
border: 1.5px solid var(--rule-strong);
border-radius: var(--r-soft);
transition:
background var(--dur-quick) var(--ease),
border-color var(--dur-quick) var(--ease);
}
.add-to-compare:hover .add-to-compare__box { border-color: var(--brand); }
.add-to-compare__check {
width: 14px; height: 14px;
color: var(--on-brand);
}
/* Рисование галочки штрихом (subtle motion) */
.add-to-compare__check path {
stroke-dasharray: 18;
stroke-dashoffset: 18;
transition: stroke-dashoffset var(--dur-base) var(--ease-out);
}
/* ---- Состояние «выбрано» (нативно через :checked) ---- */
.add-to-compare__input:checked + .add-to-compare__box {
background: var(--brand);
border-color: var(--brand);
}
.add-to-compare__input:checked + .add-to-compare__box .add-to-compare__check path {
stroke-dashoffset: 0;
}
/* Подсветка всей пилюли в выбранном состоянии (не только бокс/цвет — ещё рамка+фон) */
.add-to-compare:has(.add-to-compare__input:checked) {
background: var(--brand-soft);
border-color: color-mix(in srgb, var(--brand) 45%, transparent);
color: var(--brand);
}
/* ---- Лейбл-текст: «В сравнение» ↔ «В сравнении» через два узла ---- */
.add-to-compare__label { white-space: nowrap; }
.add-to-compare__label--on { display: none; }
.add-to-compare__input:checked ~ .add-to-compare__label .add-to-compare__label--off { display: none; }
.add-to-compare__input:checked ~ .add-to-compare__label .add-to-compare__label--on { display: inline; }
/* ============================================================
* Вариант --button: button[aria-pressed] (нужен JS-тоггл, см. block.md)
* Состояние держит aria-pressed (не :checked).
* ========================================================== */
.add-to-compare--button {
/* тот же визуал пилюли; бокс/галочка переключаются по [aria-pressed] */
-webkit-appearance: none;
appearance: none;
}
.add-to-compare--button .add-to-compare__check path {
stroke-dasharray: 18;
stroke-dashoffset: 18;
transition: stroke-dashoffset var(--dur-base) var(--ease-out);
}
.add-to-compare--button:hover .add-to-compare__box { border-color: var(--brand); }
.add-to-compare--button[aria-pressed="true"] .add-to-compare__box {
background: var(--brand);
border-color: var(--brand);
}
.add-to-compare--button[aria-pressed="true"] .add-to-compare__check path { stroke-dashoffset: 0; }
.add-to-compare--button[aria-pressed="true"] {
background: var(--brand-soft);
border-color: color-mix(in srgb, var(--brand) 45%, transparent);
color: var(--brand);
}
.add-to-compare--button[aria-pressed="true"] .add-to-compare__label--off { display: none; }
.add-to-compare--button .add-to-compare__label--on { display: none; }
.add-to-compare--button[aria-pressed="true"] .add-to-compare__label--on { display: inline; }
/* ============================================================
* Вариант --icon: квадратный иконка-тоггл (для угла карточки)
* Текст — в .visually-hidden; видимая часть = бокс «+»→«✓».
* ========================================================== */
.add-to-compare--icon {
gap: 0;
padding: 0;
width: var(--tap-min);
height: var(--tap-min);
min-height: var(--tap-min);
justify-content: center;
border-radius: var(--r-md);
}
.add-to-compare--icon .add-to-compare__box {
--atc-box: 22px;
border-style: solid;
}
/* иконка «плюс» в невыбранном состоянии (рисуется тем же боксом) */
.add-to-compare--icon .add-to-compare__plus {
position: absolute;
width: 12px; height: 12px;
color: var(--text-mute);
transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}
.add-to-compare--icon:hover .add-to-compare__plus { color: var(--brand); }
.add-to-compare--icon .add-to-compare__check { position: absolute; opacity: 0; transform: scale(.6); transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease); }
.add-to-compare--icon .add-to-compare__input:checked + .add-to-compare__box .add-to-compare__plus,
.add-to-compare--icon.add-to-compare--button[aria-pressed="true"] .add-to-compare__plus { opacity: 0; transform: scale(.6) rotate(90deg); }
.add-to-compare--icon .add-to-compare__input:checked + .add-to-compare__box .add-to-compare__check,
.add-to-compare--icon.add-to-compare--button[aria-pressed="true"] .add-to-compare__box .add-to-compare__check { opacity: 1; transform: scale(1); }
/* ============================================================
* Вариант --solid: залит брендовым тоном (для hero/промо-зон)
* ========================================================== */
.add-to-compare--solid {
--atc-fill: var(--brand-soft);
border-color: color-mix(in srgb, var(--brand) 30%, transparent);
color: var(--brand);
}
.add-to-compare--solid .add-to-compare__box { border-color: color-mix(in srgb, var(--brand) 55%, var(--rule-strong)); }
/* ============================================================
* Счётчик «в сравнении: N» (опц. живой индикатор, обновляется JS)
* Самостоятельный inline-элемент — ставится рядом с группой контролов.
* ========================================================== */
.add-to-compare-count {
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: var(--tap-min);
padding: var(--s-1) var(--s-3);
font-size: var(--t-small);
color: var(--text-mute);
}
.add-to-compare-count__num {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
font-size: var(--t-tiny);
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
color: var(--on-brand);
background: var(--brand);
border-radius: var(--r-pill);
}
/* Пусто (N=0) — приглушённый нейтральный бейдж */
.add-to-compare-count[data-count="0"] .add-to-compare-count__num {
color: var(--text-mute);
background: var(--bg-3);
}
/* ============================================================
* Адаптив
* ========================================================== */
@media (max-width: 640px) {
.add-to-compare { padding: var(--s-2) var(--s-3); }
/* в плотных листингах контрол можно растянуть на ширину строки */
.add-to-compare--block { display: flex; width: 100%; justify-content: center; }
}
/* ============================================================
* Reduced motion: без анимации рисования галочки/иконок
* (длительности уже обнулены из base; явно гасим transition на штрихе)
* ========================================================== */
@media (prefers-reduced-motion: reduce) {
.add-to-compare__check path { transition: none; }
.add-to-compare--icon .add-to-compare__plus,
.add-to-compare--icon .add-to-compare__check { transition: none; }
}
/* ===== affiliate-disclosure ===== */
/* ============================================================
* affiliate-disclosure · block.css
* Скоуплено на .affiliate-disclosure. Только токены (10-tokens/).
* Сдержанная плашка раскрытия: --bg-2 / --text-mute, один акцент (--brand).
* Конвенция разметки/JS: html-base (data-* + прогрессивный drawer). Адаптив: 640.
* ========================================================== */
.affiliate-disclosure {
display: block;
background: var(--bg-2);
border: var(--hairline);
border-radius: var(--r-md);
color: var(--text-mute);
font-family: var(--font-body);
font-size: var(--t-small);
line-height: var(--lh-snug);
}
/* ---- Полоса (иконка · текст · тоггл) ---- */
.affiliate-disclosure__bar {
display: flex;
align-items: baseline;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
}
.affiliate-disclosure__icon {
flex: 0 0 auto;
align-self: flex-start;
display: inline-flex;
margin-top: 1px;
color: var(--text-faint);
}
.affiliate-disclosure__text {
flex: 1 1 auto;
min-width: 0;
margin: 0;
color: var(--text-mute);
}
.affiliate-disclosure__accent { color: var(--text-dim); font-weight: var(--fw-medium); }
.affiliate-disclosure__link {
color: var(--brand);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
cursor: pointer;
transition: color var(--dur-quick) var(--ease);
}
.affiliate-disclosure__link:hover { color: var(--brand-2); }
/* ---- Тоггл «Подробнее» ---- */
.affiliate-disclosure__toggle {
flex: 0 0 auto;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--s-1);
min-height: var(--tap-min);
margin: calc(-1 * var(--s-2)) 0;
padding: var(--s-1) var(--s-2);
font: inherit;
font-size: var(--t-tiny);
letter-spacing: .02em;
color: var(--text-dim);
background: none;
border: 0;
border-radius: var(--r-soft);
cursor: pointer;
transition: color var(--dur-quick) var(--ease);
}
.affiliate-disclosure__toggle:hover { color: var(--brand); }
.affiliate-disclosure__chev {
transition: transform var(--dur-base) var(--ease);
}
.affiliate-disclosure__toggle[aria-expanded="true"] .affiliate-disclosure__chev { transform: rotate(180deg); }
/* ---- Drawer условий ---- */
.affiliate-disclosure__drawer {
padding: var(--s-3) var(--s-4) var(--s-4);
border-top: var(--hairline);
color: var(--text-mute);
}
.affiliate-disclosure__drawer[hidden] { display: none; }
.affiliate-disclosure__p {
margin: 0 0 var(--s-2);
color: var(--text-mute);
}
.affiliate-disclosure__p:last-of-type { margin-bottom: 0; }
.affiliate-disclosure__meta {
margin: var(--s-3) 0 0;
font-size: var(--t-tiny);
letter-spacing: .04em;
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.affiliate-disclosure__sublink,
.affiliate-disclosure__meta a {
color: var(--text-mute);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--dur-quick) var(--ease);
}
.affiliate-disclosure__sublink:hover { color: var(--brand); }
/* ============ Вариант: инлайн-сноска ============ */
.affiliate-disclosure--inline {
background: none;
border: 0;
border-radius: 0;
font-size: var(--t-tiny);
}
.affiliate-disclosure--inline .affiliate-disclosure__bar {
padding: var(--s-2) 0;
gap: var(--s-2);
}
.affiliate-disclosure--inline .affiliate-disclosure__text { color: var(--text-faint); }
.affiliate-disclosure--inline .affiliate-disclosure__accent { color: var(--text-mute); }
/* ============ Адаптив ============ */
@media (max-width: 640px) {
.affiliate-disclosure__bar {
flex-wrap: wrap;
padding: var(--s-3);
row-gap: var(--s-2);
}
.affiliate-disclosure__text { flex-basis: 100%; order: 2; }
.affiliate-disclosure__icon { order: 1; }
.affiliate-disclosure__toggle { order: 3; margin-inline-start: auto; }
}
/* ===== age-gate ===== */
/* ============================================================
* age-gate · block.css
* Скоуплено на .age-gate (= id). Только токены (10-tokens/).
* Конвенция разметки/JS: html-base (data-* тексты, bespoke inline SVG,
* прогрессивный JS по data-action). Эталон нейминга/слотов: casino-item-card.
* Назначение: 18+ гейт на входе — модалка (A) + sticky-баннер (B).
* Адаптив: 980 / 640.
* ========================================================== */
.age-gate { --ag-mark: 64px; }
/* ============================================================
* A · МОДАЛКА (overlay, блокирует вход до подтверждения)
* ========================================================== */
.age-gate__overlay {
position: fixed; inset: 0; z-index: var(--z-modal);
display: grid; place-items: center;
padding: var(--gutter);
background: color-mix(in srgb, var(--text) 72%, transparent);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
animation: ag-fade var(--dur-base) var(--ease);
}
.age-gate__overlay[hidden] { display: none; }
.age-gate__dialog {
width: 100%; max-width: 460px;
display: flex; flex-direction: column; gap: var(--s-5);
padding: var(--s-7) var(--s-6) var(--s-6);
text-align: center;
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lift);
animation: ag-rise var(--dur-base) var(--ease-out);
}
/* ---- Знак возрастного ценза 18+ ---- */
.age-gate__mark {
align-self: center;
display: inline-flex; align-items: center; justify-content: center;
width: var(--ag-mark); height: var(--ag-mark);
font-family: var(--font-display);
font-size: var(--t-h3); font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
color: var(--on-brand); background: var(--brand);
border-radius: var(--r-pill);
box-shadow: var(--shadow-card);
}
/* ---- Текстовая часть ---- */
.age-gate__body { display: flex; flex-direction: column; gap: var(--s-2); }
.age-gate__eyebrow { /* .eyebrow из base + центрирование */ }
.age-gate__title { font-family: var(--font-display); font-size: var(--t-h2); line-height: var(--lh-snug); }
.age-gate__text { color: var(--text-mute); line-height: var(--lh-base); }
.age-gate__text strong { color: var(--text); font-weight: var(--fw-semi); }
/* ---- Действия ---- */
.age-gate__actions { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-1); }
.age-gate__actions .btn { width: 100%; }
/* ---- Подвал: правовая сноска + ссылка на ответственную игру ---- */
.age-gate__legal {
margin: 0; padding-top: var(--s-4);
border-top: var(--hairline);
font-size: var(--t-tiny); line-height: var(--lh-snug);
color: var(--text-faint);
}
.age-gate__legal a { color: var(--text-mute); text-underline-offset: 2px; }
.age-gate__legal a:hover { color: var(--brand); }
/* ---- Экран отказа (после «Мне нет 18») ---- */
.age-gate__deny { display: flex; flex-direction: column; gap: var(--s-4); align-items: center; }
.age-gate__deny[hidden] { display: none; }
.age-gate__deny-mark {
display: inline-flex; align-items: center; justify-content: center;
width: var(--ag-mark); height: var(--ag-mark);
color: var(--danger); background: var(--danger-soft);
border-radius: var(--r-pill);
}
.age-gate__deny .age-gate__title { color: var(--text); }
/* когда показан экран отказа — прячем основной интерактив */
.age-gate__dialog.is-denied > .age-gate__mark,
.age-gate__dialog.is-denied > .age-gate__body,
.age-gate__dialog.is-denied > .age-gate__actions,
.age-gate__dialog.is-denied > .age-gate__legal { display: none; }
/* ============================================================
* B · STICKY-БАННЕР (менее навязчивый, низ экрана)
* ========================================================== */
.age-gate--banner {
position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
padding: var(--s-4) var(--gutter);
background: var(--surface);
border-top: var(--hairline);
box-shadow: var(--shadow-pop);
animation: ag-slide var(--dur-base) var(--ease-out);
}
.age-gate--banner[hidden] { display: none; }
.age-gate__bar {
width: 100%; max-width: var(--container); margin-inline: auto;
display: grid;
grid-template-columns: var(--ag-mark) minmax(0, 1fr) auto;
align-items: center; gap: var(--s-5);
}
.age-gate__bar .age-gate__mark { align-self: center; }
.age-gate__bar-body { text-align: left; min-width: 0; }
.age-gate__bar-title { font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.age-gate__bar-text { margin-top: 2px; font-size: var(--t-small); color: var(--text-mute); line-height: var(--lh-snug); }
.age-gate__bar-text a { color: var(--text-mute); text-underline-offset: 2px; }
.age-gate__bar-text a:hover { color: var(--brand); }
.age-gate__bar-actions { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
/* ============================================================
* Анимации (функциональные; обнуляются в prefers-reduced-motion
* через :root --dur-* → 0ms, наследуется из tokens.css)
* ========================================================== */
@keyframes ag-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ag-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ag-slide { from { transform: translateY(100%); } to { transform: none; } }
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.age-gate__bar { grid-template-columns: var(--ag-mark) 1fr; grid-template-areas: "mark body" "act act"; gap: var(--s-4); }
.age-gate__bar .age-gate__mark { grid-area: mark; }
.age-gate__bar-body { grid-area: body; }
.age-gate__bar-actions { grid-area: act; }
.age-gate__bar-actions .btn { flex: 1 1 0; }
}
@media (max-width: 640px) {
.age-gate { --ag-mark: 56px; }
.age-gate__dialog { padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-lg); }
.age-gate__bar { grid-template-columns: 1fr; grid-template-areas: "mark" "body" "act"; justify-items: center; text-align: center; }
.age-gate__bar-body { text-align: center; }
.age-gate__bar-actions { width: 100%; flex-direction: column; }
.age-gate__bar-actions .btn { width: 100%; }
}
/* ===== archive-title-bar ===== */
/* ============================================================
* archive-title-bar · block.css
* Скоуплено на .archive-title-bar. Только токены (10-tokens/).
* Конвенция разметки: ★research / premium-планка (готовой разметки нет).
* Один акцент — --brand (stamp-иконка + активный чип). Счётчик записей —
* tabular-nums. Чипы — touch-target ≥ --tap-min. JS не требуется.
* Адаптив: 980 / 640.
* ========================================================== */
.archive-title-bar {
display: flex;
flex-direction: column;
gap: var(--s-3);
/* Узкая шапка: дисциплинированный вертикальный ритм, без подложки —
садится на любую секцию. Низ отбит тонкой линией как «крышка архива». */
padding-block-end: var(--s-5);
border-bottom: var(--hairline);
}
/* ---- Stamp: мета-метка категории (иконка + лейбл + счётчик) ---- */
.archive-title-bar__stamp {
display: inline-flex;
align-items: center;
gap: var(--s-2);
align-self: flex-start;
margin: 0;
/* Лёгкая пилюля-подложка в акценте — единственный цветной регистр шапки. */
padding: var(--s-1) var(--s-3);
font-family: var(--font-body);
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand);
background: var(--brand-soft);
border-radius: var(--r-pill);
white-space: nowrap;
}
.archive-title-bar__stamp-ic {
display: inline-flex;
flex: 0 0 auto;
}
.archive-title-bar__stamp-ic svg { display: block; }
.archive-title-bar__stamp-label {
/* лейбл наследует цвет/кейс пилюли */
}
/* Счётчик отбит вертикальным волоском, число — табличными цифрами */
.archive-title-bar__stamp-count {
display: inline-flex;
align-items: baseline;
gap: var(--s-1);
padding-inline-start: var(--s-2);
border-inline-start: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.archive-title-bar__stamp-num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
font-weight: var(--fw-bold);
}
.archive-title-bar__stamp-unit {
color: color-mix(in srgb, var(--brand) 72%, var(--text-mute));
font-weight: var(--fw-medium);
}
/* ---- Title: главный заголовок архива ---- */
.archive-title-bar__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h1);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: -0.015em;
color: var(--text);
}
/* ---- Lede: короткое описание (ограничиваем меру строки) ---- */
.archive-title-bar__lede {
margin: 0;
max-width: var(--container-prose);
}
/* ---- Index: ряд чипов-переходов (A–Z / под-категории) ---- */
.archive-title-bar__index {
margin-top: var(--s-1);
}
.archive-title-bar__chips {
list-style: none;
margin: 0;
padding: 0;
/* .cluster уже даёт flex-wrap + gap; обнуляем ul-отступ от base.css */
}
.archive-title-bar__chips > li { display: inline-flex; }
.archive-title-bar__chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tap-min);
min-width: var(--tap-min);
padding: var(--s-1) var(--s-3);
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: var(--fw-semi);
line-height: 1;
color: var(--text-dim);
text-decoration: none;
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-pill);
font-variant-numeric: tabular-nums;
transition:
border-color var(--dur-quick) var(--ease),
background var(--dur-quick) var(--ease),
color var(--dur-quick) var(--ease);
}
.archive-title-bar__chip:hover {
border-color: var(--brand);
color: var(--brand);
}
/* Текущий срез архива: залит акцентом (состояние не только цветом —
несёт aria-current="true" в разметке + плотный фон/контраст). */
.archive-title-bar__chip.is-current,
.archive-title-bar__chip[aria-current="true"] {
color: var(--on-brand);
background: var(--brand);
border-color: var(--brand);
}
.archive-title-bar__chip.is-current:hover,
.archive-title-bar__chip[aria-current="true"]:hover {
color: var(--on-brand);
background: color-mix(in srgb, var(--brand) 88%, #000);
}
/* ============ Вариант: --compact (тоньше ритм, мета-ряд плотнее) ============ */
.archive-title-bar--compact {
gap: var(--s-2);
padding-block-end: var(--s-4);
}
.archive-title-bar--compact .archive-title-bar__title {
font-size: var(--t-h2);
line-height: var(--lh-snug);
letter-spacing: -0.01em;
}
.archive-title-bar--compact .archive-title-bar__lede {
font-size: var(--t-body);
line-height: var(--lh-base);
}
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.archive-title-bar { gap: var(--s-2); }
}
@media (max-width: 640px) {
.archive-title-bar {
padding-block-end: var(--s-4);
}
/* На узком экране stamp может переноситься — снимаем nowrap,
чтобы счётчик не уезжал за край. */
.archive-title-bar__stamp {
white-space: normal;
flex-wrap: wrap;
row-gap: var(--s-1);
}
/* Индекс остаётся в один скролл-ряд: на телефоне A–Z удобнее
листать горизонтально, чем переносить в несколько строк. */
.archive-title-bar__chips {
flex-wrap: nowrap;
overflow-x: auto;
/* плавный край без обрезки фокус-кольца у крайних чипов */
padding-block: var(--s-1);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.archive-title-bar__chips::-webkit-scrollbar { display: none; }
.archive-title-bar__chips > li { flex: 0 0 auto; }
}
/* ===== ask-the-experts-prompt ===== */
/* ============================================================
* ask-the-experts-prompt · block.css
* Скоуплено на .ask-the-experts-prompt. Только токены (10-tokens/).
* Конвенция: ★research / premium-планка (своя разметка),
* ориентир newsletter / contact-cta-block (форма-панель) + единый surface/radius/shadow.
* Один акцент --brand (submit + аватар-кольцо + чип-hover + фокус-ринг textarea).
* ОДНА основная CTA (submit); чипы — вспомогательные (нейтраль до hover). Числа — tabular-nums.
* Форма нативная — без JS работает. Адаптив: 640. Reduced-motion гасит transition.
* ========================================================== */
.ask-the-experts-prompt { display: block; }
.ate-panel {
padding: var(--s-6) var(--s-7);
/* .surface даёт surface/hairline/r-lg/shadow-card */
}
/* ---- Мини-профиль эксперта (trust) ---- */
.ate-expert {
display: flex;
align-items: center;
gap: var(--s-3);
padding-bottom: var(--s-4);
margin-bottom: var(--s-4);
border-bottom: var(--hairline);
}
.ate-expert__avatar {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--brand);
background: var(--brand-soft);
border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
border-radius: var(--r-pill);
}
.ate-expert__id { min-width: 0; }
.ate-expert__name {
margin: 0;
font-weight: var(--fw-semi);
color: var(--text);
line-height: var(--lh-snug);
}
.ate-expert__meta {
margin: 2px 0 0;
display: inline-flex;
align-items: center;
gap: var(--s-1);
font-size: var(--t-tiny);
color: var(--text-mute);
}
.ate-expert__meta-ic { flex: 0 0 auto; color: var(--success); }
.ate-expert__num { font-variant-numeric: tabular-nums; }
/* ---- Заголовок ---- */
.ate-panel__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h2);
line-height: var(--lh-tight);
letter-spacing: -0.01em;
color: var(--text);
}
.ate-panel__lede { margin: var(--s-2) 0 0; }
/* ============================================================
* Форма
* ========================================================== */
.ate-form { margin-top: var(--s-5); }
.ate-form__label {
display: block;
margin-bottom: var(--s-2);
font-size: var(--t-small);
font-weight: var(--fw-semi);
color: var(--text-dim);
}
.ate-form__field { position: relative; }
.ate-form__input {
width: 100%;
min-height: calc(var(--tap-min) * 2);
padding: var(--s-3) var(--s-4);
font-family: var(--font-body);
font-size: var(--t-body);
line-height: var(--lh-base);
color: var(--text);
background: var(--bg);
border: 1px solid var(--rule-strong);
border-radius: var(--r-md);
resize: vertical;
transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.ate-form__input::placeholder { color: var(--text-faint); }
.ate-form__input:hover { border-color: var(--brand); }
.ate-form__input:focus-visible {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft);
}
/* ---- Чип-подсказки ---- */
.ate-form__suggests {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
margin-top: var(--s-3);
}
.ate-form__suggests-k {
font-size: var(--t-tiny);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-faint);
}
.ate-form__chip {
min-height: 34px;
padding: 0 var(--s-3);
font-size: var(--t-small);
font-weight: var(--fw-medium);
color: var(--text-dim);
background: var(--bg-2);
border: var(--hairline);
border-radius: var(--r-pill);
cursor: pointer;
transition: border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease);
}
.ate-form__chip:hover,
.ate-form__chip:focus-visible {
border-color: var(--brand);
color: var(--brand);
background: var(--brand-soft);
}
/* ---- Действия: ОДНА primary + privacy-нота ---- */
.ate-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3) var(--s-4);
margin-top: var(--s-5);
}
.ate-form__submit-ic { flex: 0 0 auto; transition: transform var(--dur-quick) var(--ease-out); }
.ate-form__submit:hover .ate-form__submit-ic,
.ate-form__submit:focus-visible .ate-form__submit-ic { transform: translate(2px, -2px); }
.ate-form__privacy {
flex: 1 1 220px;
margin: 0;
font-size: var(--t-tiny);
line-height: var(--lh-snug);
}
/* ============ Адаптив ============ */
@media (max-width: 640px) {
.ate-panel { padding: var(--s-5); }
.ate-panel__title { font-size: var(--t-h3); }
.ate-form__actions { flex-direction: column; align-items: stretch; }
.ate-form__submit { width: 100%; }
}
/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
.ate-form__input,
.ate-form__chip,
.ate-form__submit-ic { transition: none; }
}
/* ===== audit-trail ===== */
/* ============================================================
* audit-trail · block.css
* Скоуплено на .audit-trail. Только токены (10-tokens/).
* House-style: портфельные блоки (.stk-*/.vs-*/.ledger) на наших токенах —
* вертикальный «гроссбух проверок» в фикс-слотах (колонка иконки-узла,
* рельс последовательности), хайрлайн-разделители, tabular-nums,
* дисциплина нейтралей. Рельс-коннектор и счётчик-логика — из howto-steps
* / timeline (::after-рельс). Drawer деталей (метод/параметры) — как
* rating-ledger. Хэш-чип c copy-on-click — как промокод casino-item-card.
* Один акцент — --brand (заголовок/итог/CTA); статус шага --success/--warning/
* --danger/--info — ТОЛЬКО по смыслу (исход проверки). Состояние — не только
* цветом: иконка + текстовый статус-пилл дублируют исход.
* Эталон нейминга/слотов/CSS-counter позиции — casino-item-card.
* Адаптив: 980 / 640. touch ≥ --tap-min. Motion функц. (наследует reduced-motion).
* ========================================================== */
.audit-trail {
/* фикс-слоты: узел-иконка проверки, толщина рельса, колонка узла (узел + воздух) */
--at-node: 40px;
--at-rail: 2px;
--at-node-col: var(--at-node);
display: flow-root;
color: var(--text);
}
/* ---- Шапка блока: подпись-источник + бейдж «проверено/обновлено» ---- */
.audit-trail__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
margin-bottom: var(--s-5);
flex-wrap: wrap;
}
.audit-trail__caption {
margin: 0;
font-family: var(--font-body);
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-mute);
}
.audit-trail__verified {
display: inline-flex;
align-items: center;
gap: var(--s-1);
flex: 0 0 auto;
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: .04em;
color: var(--brand);
font-variant-numeric: tabular-nums;
}
.audit-trail__verified-ic { display: inline-flex; }
/* ---- Список шагов аудита (вертикальный, нумерация — CSS-counter) ---- */
.audit-trail__list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: at;
display: flex;
flex-direction: column;
}
/* ---- Шаг проверки: грид «узел+рельс | карточка» ---- */
.audit-trail__step {
counter-increment: at;
position: relative;
display: grid;
grid-template-columns: var(--at-node-col) minmax(0, 1fr);
grid-template-areas: "node card";
column-gap: var(--s-5);
align-items: start;
padding-bottom: var(--s-5);
}
.audit-trail__step:last-child { padding-bottom: 0; }
/* Вертикальный рельс — функциональный индикатор последовательности проверок.
Тянется от центра узла до следующего; у последнего шага обрезан. */
.audit-trail__step:not(:last-child)::after {
content: "";
position: absolute;
top: var(--at-node);
left: calc(var(--at-node-col) / 2);
width: var(--at-rail);
height: calc(100% - var(--at-node) + var(--s-5));
background: var(--rule);
transform: translateX(-50%);
}
/* ---- 1 · Узел-иконка проверки (на рельсе) ---- */
.audit-trail__node {
grid-area: node;
position: relative;
z-index: var(--z-base);
width: var(--at-node);
height: var(--at-node);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-mute);
background: var(--surface);
border: var(--at-rail) solid var(--rule-strong);
border-radius: var(--r-pill);
box-shadow: 0 0 0 var(--s-1) var(--bg);
}
.audit-trail__node svg { width: 18px; height: 18px; }
/* Исход проверки задаётся ТОЛЬКО по смыслу (заливка узла) — не для декора:
pass=пройдено, warn=замечание, fail=провал, pending=в процессе, info=справка. */
.audit-trail__step--pass .audit-trail__node { color: var(--on-brand); background: var(--success); border-color: var(--success); }
.audit-trail__step--warn .audit-trail__node { color: var(--on-brand); background: var(--warning); border-color: var(--warning); }
.audit-trail__step--fail .audit-trail__node { color: var(--on-brand); background: var(--danger); border-color: var(--danger); }
.audit-trail__step--info .audit-trail__node { color: var(--on-brand); background: var(--info); border-color: var(--info); }
.audit-trail__step--pending .audit-trail__node { color: var(--text-mute); background: var(--bg-2); border-color: var(--rule-strong); border-style: dashed; }
/* ---- 2 · Карточка проверки ---- */
.audit-trail__card {
grid-area: card;
min-width: 0;
padding: var(--s-4) var(--s-5);
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-quick) var(--ease);
}
.audit-trail__card:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
/* Шапка карточки: № + название проверки слева, статус-пилл справа */
.audit-trail__card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
flex-wrap: wrap;
}
.audit-trail__heading { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.audit-trail__index {
font-family: var(--font-mono);
font-size: var(--t-small);
font-weight: var(--fw-bold);
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.audit-trail__index::before { content: counter(at, decimal-leading-zero); }
.audit-trail__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--text);
}
/* Статус-пилл: исход дублируется ТЕКСТОМ + точкой, не только цветом */
.audit-trail__status {
display: inline-flex;
align-items: center;
gap: var(--s-1);
flex: 0 0 auto;
padding: 2px var(--s-2);
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: .03em;
text-transform: uppercase;
color: var(--text-dim);
background: var(--bg-2);
border: var(--hairline);
border-radius: var(--r-pill);
white-space: nowrap;
}
.audit-trail__status-dot {
width: 6px;
height: 6px;
flex: 0 0 auto;
border-radius: var(--r-pill);
background: var(--text-faint);
}
.audit-trail__step--pass .audit-trail__status { color: var(--success); background: var(--success-soft); border-color: transparent; }
.audit-trail__step--pass .audit-trail__status-dot { background: var(--success); }
.audit-trail__step--warn .audit-trail__status { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.audit-trail__step--warn .audit-trail__status-dot { background: var(--warning); }
.audit-trail__step--fail .audit-trail__status { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.audit-trail__step--fail .audit-trail__status-dot { background: var(--danger); }
.audit-trail__step--info .audit-trail__status { color: var(--info); background: var(--info-soft); border-color: transparent; }
.audit-trail__step--info .audit-trail__status-dot { background: var(--info); }
.audit-trail__step--pending .audit-trail__status-dot { background: var(--text-faint); }
.audit-trail__text {
margin: var(--s-2) 0 0;
font-size: var(--t-small);
line-height: var(--lh-base);
color: var(--text-dim);
}
.audit-trail__num { font-variant-numeric: tabular-nums; }
/* ---- 3 · Мета-полоса значений проверки (фикс-слоты, tabular-nums) ---- */
.audit-trail__metrics {
list-style: none;
margin: var(--s-3) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
}
.audit-trail__metric { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.audit-trail__metric dt {
font-size: var(--t-tiny);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-faint);
}
.audit-trail__metric dd {
margin: 0;
font-size: var(--t-small);
font-weight: var(--fw-semi);
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* функциональная дельта значения — только по смыслу (в норме / отклонение) */
.audit-trail__delta--ok { color: var(--success); }
.audit-trail__delta--down { color: var(--danger); }
/* ---- 4 · Хэш-чип верификации (HMAC/seed/tx) — copy-on-click ---- */
.audit-trail__hash {
display: inline-flex;
align-items: center;
gap: var(--s-2);
position: relative;
max-width: 100%;
margin-top: var(--s-3);
padding: var(--s-2) var(--s-3);
background: var(--bg-2);
border: var(--hairline);
border-radius: var(--r-md);
cursor: pointer;
transition: background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.audit-trail__hash:hover { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.audit-trail__hash-k {
flex: 0 0 auto;
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-faint);
}
.audit-trail__hash-v {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-mono);
font-size: var(--t-small);
font-weight: var(--fw-medium);
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
.audit-trail__hash-ic { display: inline-flex; flex: 0 0 auto; color: var(--text-mute); }
.audit-trail__hash:hover .audit-trail__hash-ic { color: var(--brand); }
.audit-trail__hash-toast {
position: absolute;
inset-inline-start: 50%;
bottom: calc(100% + 6px);
transform: translateX(-50%);
padding: 2px var(--s-2);
font-size: var(--t-tiny);
white-space: nowrap;
color: var(--on-brand);
background: var(--text);
border-radius: var(--r-soft);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-quick) var(--ease);
}
.audit-trail__hash.is-copied .audit-trail__hash-toast { opacity: 1; }
/* ---- 5 · Drawer деталей (метод/параметры/источник) — держит карточку чистой ---- */
.audit-trail__more {
display: inline-flex;
align-items: center;
gap: var(--s-1);
min-height: var(--tap-min);
margin-top: var(--s-2);
padding: 0;
font-family: var(--font-body);
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-mute);
cursor: pointer;
transition: color var(--dur-quick) var(--ease);
}
.audit-trail__more:hover { color: var(--brand); }
.audit-trail__more[aria-expanded="true"] { color: var(--brand); }
.audit-trail__more-ic { display: inline-flex; transition: transform var(--dur-base) var(--ease); }
.audit-trail__more[aria-expanded="true"] .audit-trail__more-ic { transform: rotate(180deg); }
.audit-trail__drawer {
margin-top: var(--s-3);
padding: var(--s-4);
background: var(--bg-2);
border: var(--hairline);
border-radius: var(--r-md);
}
.audit-trail__drawer[hidden] { display: none; }
.audit-trail__drawer p { margin: 0; font-size: var(--t-small); line-height: var(--lh-base); color: var(--text-mute); }
.audit-trail__drawer p + p { margin-top: var(--s-2); }
/* Сетка параметров проверки внутри drawer (метод/реестр/лаборатория) */
.audit-trail__params {
list-style: none;
margin: 0 0 var(--s-3);
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--s-3) var(--s-5);
}
.audit-trail__param { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.audit-trail__param dt {
font-size: var(--t-tiny);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-faint);
}
.audit-trail__param dd {
margin: 0;
font-size: var(--t-small);
font-weight: var(--fw-semi);
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
/* ---- Итоговая сводка аудита (одна CTA на блок: проверить отчёт) ---- */
.audit-trail__summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-4);
margin-top: var(--s-6);
padding: var(--s-5);
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
}
/* тонкая акцент-рамка слева — без второго цвета */
.audit-trail__summary--pass { border-color: var(--rule-strong); box-shadow: inset 3px 0 0 0 var(--brand), var(--shadow-card); }
.audit-trail__summary-body { flex: 1 1 14rem; min-width: 0; }
.audit-trail__summary-score {
display: inline-flex;
align-items: baseline;
gap: var(--s-2);
font-family: var(--font-display);
font-size: var(--t-h3);
font-weight: var(--fw-bold);
color: var(--text);
}
.audit-trail__summary-score b { color: var(--brand); font-variant-numeric: tabular-nums; }
.audit-trail__summary-score small { font-size: var(--t-small); font-weight: var(--fw-medium); color: var(--text-faint); }
.audit-trail__summary-note {
display: block;
margin-top: 2px;
font-size: var(--t-small);
line-height: var(--lh-snug);
color: var(--text-mute);
}
.audit-trail__summary .btn { flex: 0 0 auto; }
/* ---- Подвал: примечание/дисклеймер 18+ ---- */
.audit-trail__foot {
margin-top: var(--s-4);
font-size: var(--t-tiny);
line-height: var(--lh-base);
color: var(--text-faint);
}
/* ============================================================
* Адаптив ≤980px — узел прижимается влево, колонка уже, рельс следует.
* ========================================================== */
@media (max-width: 980px) {
.audit-trail__step { column-gap: var(--s-4); }
.audit-trail__step:not(:last-child)::after { left: calc(var(--at-node-col) / 2); }
}
@media (max-width: 640px) {
.audit-trail { --at-node: 34px; }
.audit-trail__step { column-gap: var(--s-3); }
.audit-trail__card { padding: var(--s-3) var(--s-4); }
.audit-trail__node svg { width: 16px; height: 16px; }
.audit-trail__metrics { gap: var(--s-2) var(--s-4); }
.audit-trail__summary { flex-direction: column; align-items: stretch; }
.audit-trail__summary .btn { width: 100%; }
}
/* ===== author-byline ===== */
/* ============================================================
* author-byline · block.css
* Скоуплено на .author-byline. Только токены (10-tokens/).
* Конвенция разметки: html-base (БЛОК АВТОРА) — инлайн-вариант подписи.
* Адаптив: 980 / 640. Один акцент = --brand; нейтрали дисциплинированы.
* ========================================================== */
.author-byline {
--ab-avatar: 40px; /* малый фикс-слот аватара (40×40) */
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-3);
font-size: var(--t-small);
line-height: var(--lh-snug);
color: var(--text-mute);
}
/* ---- 1 · Аватар (малый фикс-слот, кликабельный) ---- */
.author-byline__avatar {
flex: 0 0 auto;
display: block;
width: var(--ab-avatar);
height: var(--ab-avatar);
border-radius: var(--r-pill);
overflow: hidden;
background: var(--bg-2);
border: var(--hairline);
}
.author-byline__avatar-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Fallback-инициал, когда фото нет */
.author-byline__avatar--mono {
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--bg-3), var(--surface-2));
}
.author-byline__fallback {
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: var(--fw-bold);
line-height: 1;
color: var(--text-faint);
}
/* ---- 2 · Имя + роль ---- */
.author-byline__by {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px var(--s-2);
min-width: 0;
}
.author-byline__intro {
font-size: var(--t-tiny);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-faint);
}
.author-byline__name {
font-weight: var(--fw-semi);
color: var(--text);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.author-byline__name:hover {
color: var(--brand);
border-bottom-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.author-byline__role {
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--brand); /* единственный акцент */
}
/* ---- 3 · Мета: дата + reading-time (· разделители) ---- */
.author-byline__meta {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-3);
min-width: 0;
}
.author-byline__date,
.author-byline__read {
display: inline-flex;
align-items: center;
gap: var(--s-1);
white-space: nowrap;
font-variant-numeric: tabular-nums; /* выравнивание дат/минут */
}
.author-byline__updated {
font-size: var(--t-tiny);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-faint);
}
.author-byline__num { font-variant-numeric: tabular-nums; }
/* Точка-разделитель перед каждым мета-пунктом (декор → не для скринридера) */
.author-byline__meta > * + *::before,
.author-byline__updated + .author-byline__date::before {
content: "";
flex: 0 0 auto;
width: 3px;
height: 3px;
margin-inline-end: var(--s-2);
border-radius: var(--r-pill);
background: var(--rule-strong);
}
/* «Обновлено» примыкает к дате — без точки между ними */
.author-byline__updated + .author-byline__date {
margin-inline-start: calc(-1 * var(--s-2));
}
.author-byline__updated + .author-byline__date::before { content: none; }
/* ---- Иконки (часы / щит) ---- */
.author-byline__icn {
display: inline-flex;
align-items: center;
color: var(--text-faint);
}
/* ---- 4 · Ссылка на методологию ---- */
.author-byline__method {
display: inline-flex;
align-items: center;
gap: var(--s-1);
min-height: var(--tap-min); /* touch-target ≥ 44px */
font-weight: var(--fw-medium);
color: var(--text-dim);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.author-byline__method:hover {
color: var(--brand);
border-bottom-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.author-byline__method:hover .author-byline__icn { color: var(--brand); }
/* На широких экранах методология прижата к правому краю строки */
.author-byline__method { margin-inline-start: auto; }
/* ---- Вариант: на тёмной/цветной подложке (hero) ---- */
.author-byline--on-surface {
padding: var(--s-3) var(--s-4);
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-pill);
box-shadow: var(--shadow-card);
}
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.author-byline__method { margin-inline-start: 0; } /* перестаёт прижиматься вправо */
}
@media (max-width: 640px) {
.author-byline {
align-items: flex-start;
gap: var(--s-2);
}
.author-byline__intro { display: none; } /* экономим строку на узких экранах */
}
/* ===== author-card ===== */
/* ============================================================
* author-card · block.css
* Скоуплено на .author-card. Только токены (10-tokens/).
* Конвенция разметки: html-base (БЛОК АВТОРА). E-E-A-T-блок.
* Адаптив: 980 / 640. Один акцент = --brand; нейтрали дисциплинированы.
* ========================================================== */
.author-card {
--au-avatar: 260px; /* фикс-слот аватара (260×260) */
padding: var(--s-6);
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
}
.author-top {
display: grid;
grid-template-columns: var(--au-avatar) minmax(0, 1fr);
gap: var(--s-6);
align-items: start;
}
/* ---- 1 · Аватар (фикс-слот) ---- */
.author-avatar {
margin: 0;
width: var(--au-avatar);
aspect-ratio: 1 / 1;
border-radius: var(--r-md);
overflow: hidden;
background: var(--bg-2);
border: var(--hairline);
}
.author-avatar__img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Fallback-инициал, когда фото нет */
.author-avatar--mono {
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--bg-3), var(--surface-2));
}
.author-avatar__fallback {
font-family: var(--font-display);
font-size: var(--t-display);
font-weight: var(--fw-bold);
line-height: 1;
color: var(--text-faint);
}
/* ---- 2 · Мета: имя / роль / bio / факты ---- */
.author-meta {
display: flex;
flex-direction: column;
gap: var(--s-2);
min-width: 0;
}
.author-meta__eyebrow { margin: 0; }
.author-name {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
letter-spacing: -0.01em;
color: var(--text);
}
.author-role {
margin: 0;
font-size: var(--t-small);
font-weight: var(--fw-semi);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--brand);
}
.author-bio {
margin: var(--s-1) 0 0;
max-width: var(--container-prose);
font-size: var(--t-body);
line-height: var(--lh-base);
color: var(--text-dim);
}
/* ---- Факты (E-E-A-T): сетка фикс-слотов ключ/значение ---- */
.author-feats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-3);
margin: var(--s-4) 0 0;
padding-top: var(--s-5);
border-top: var(--hairline);
}
.author-feat {
display: flex;
align-items: flex-start;
gap: var(--s-3);
min-width: 0;
}
.author-feat__icn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--brand);
background: var(--brand-soft);
border-radius: var(--r-md);
}
.author-feat__txt { min-width: 0; }
.author-feat__k {
font-size: var(--t-tiny);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-mute);
}
.author-feat__v {
margin: 2px 0 0;
font-size: var(--t-small);
font-weight: var(--fw-semi);
line-height: var(--lh-snug);
color: var(--text);
}
.author-feat__num { font-variant-numeric: tabular-nums; }
/* ---- Вариант: компактный (врезка/сайдбар) ---- */
.author-card--compact {
--au-avatar: 120px;
padding: var(--s-5);
}
.author-card--compact .author-feats {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-2);
}
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.author-card { padding: var(--s-5); }
.author-top {
grid-template-columns: var(--au-avatar) minmax(0, 1fr);
gap: var(--s-5);
}
}
@media (max-width: 640px) {
.author-card { --au-avatar: 96px; }
.author-top {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-4);
justify-items: center;
text-align: center;
}
.author-meta { align-items: center; }
.author-bio { text-align: left; }
.author-feats {
grid-template-columns: minmax(0, 1fr);
width: 100%;
text-align: left;
}
}
/* ===== auto-cashout-explainer ===== */
/* ============================================================
* auto-cashout-explainer · block.css
* Скоуплено на .cashout-explainer. Только токены (10-tokens/).
* Конвенция: ★research / premium-планка. Диаграмма-кривая (bespoke SVG) + шаги + мини-калькулятор.
* ОДИН акцент --brand (линия авто-вывода, выплата, маркер). Краш-точка = --danger по смыслу.
* Числа — tabular-nums. Адаптив: 980 — в колонку; 640 — компактные поля.
* ========================================================== */
.cashout-explainer {
display: block;
font-variant-numeric: tabular-nums;
}
/* ---- Заголовок ---- */
.cashout-explainer__head { max-width: var(--container-prose); margin-bottom: var(--s-5); }
.cashout-explainer__title {
margin: var(--s-2) 0 0;
font-family: var(--font-display);
font-size: var(--t-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--text);
}
.cashout-explainer__lede { margin-top: var(--s-3); }
/* ---- Тело: диаграмма | aside ---- */
.cashout-explainer__body {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: var(--s-5);
align-items: stretch;
}
/* ---- Диаграмма (surface-card) ---- */
.cashout-diagram {
margin: 0;
display: flex; flex-direction: column;
padding: var(--s-4);
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
}
.cashout-diagram__svg { width: 100%; height: auto; }
.cashout-diagram__grid line { stroke: var(--rule); stroke-width: 1; opacity: .6; }
.cashout-diagram__area { fill: var(--brand-soft); }
.cashout-diagram__curve {
fill: none;
stroke: var(--text-dim);
stroke-width: 2.5;
stroke-linecap: round;
}
/* линия целевого авто-вывода — акцент --brand */
.cashout-diagram__target {
stroke: var(--brand);
stroke-width: 1.5;
stroke-dasharray: 4 4;
}
.cashout-diagram__marker circle { fill: var(--brand); }
.cashout-diagram__marker-ring {
fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: .45;
}
/* точка краша — --danger по смыслу */
.cashout-diagram__crash path { stroke: var(--danger); stroke-width: 2.6; stroke-linecap: round; }
.cashout-diagram__cap {
display: flex; flex-wrap: wrap; gap: var(--s-4);
margin-top: var(--s-3);
font-size: var(--t-tiny); color: var(--text-mute);
}
.cashout-diagram__legend { display: inline-flex; align-items: center; gap: var(--s-2); font-variant-numeric: tabular-nums; }
.cashout-diagram__legend b { color: var(--text); font-weight: var(--fw-bold); }
.cashout-diagram__sw { width: 14px; height: 4px; border-radius: var(--r-pill); }
.cashout-diagram__sw--target { background: var(--brand); }
.cashout-diagram__sw--crash { background: var(--danger); }
/* ---- Aside: шаги + калькулятор ---- */
.cashout-explainer__aside { display: flex; flex-direction: column; gap: var(--s-5); }
.cashout-steps {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: var(--s-4);
counter-reset: co-step;
}
.cashout-step { display: flex; gap: var(--s-3); align-items: flex-start; }
.cashout-step__n {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
font-weight: var(--fw-bold); font-size: var(--t-small);
font-variant-numeric: tabular-nums;
color: var(--on-brand); background: var(--brand);
border-radius: var(--r-pill);
}
.cashout-step__t { margin: 0; font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--fw-bold); color: var(--text); line-height: var(--lh-snug); }
.cashout-step__d { margin: var(--s-1) 0 0; font-size: var(--t-small); line-height: var(--lh-base); color: var(--text-mute); }
/* ---- Мини-калькулятор (surface-2) ---- */
.cashout-calc {
padding: var(--s-4);
background: var(--surface-2);
border: var(--hairline);
border-radius: var(--r-lg);
}
.cashout-calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.cashout-field { display: flex; flex-direction: column; gap: var(--s-1); }
.cashout-field__label { font-size: var(--t-tiny); letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute); font-weight: var(--fw-semi); }
.cashout-control {
display: inline-flex; align-items: center; gap: var(--s-1);
padding: 0 var(--s-3);
min-height: var(--tap-min);
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-md);
transition: border-color var(--dur-quick) var(--ease);
}
.cashout-control:focus-within { border-color: var(--brand); }
.cashout-control__unit { color: var(--text-faint); font-weight: var(--fw-medium); }
.cashout-input {
width: 100%;
border: none; background: none;
font-weight: var(--fw-semi); font-size: var(--t-body);
color: var(--text); font-variant-numeric: tabular-nums;
}
.cashout-input:focus { outline: none; }
/* ползунок цели */
.cashout-range {
-webkit-appearance: none; appearance: none;
width: 100%; height: 6px; margin: var(--s-4) 0 var(--s-1);
background: var(--bg-3);
border-radius: var(--r-pill);
}
.cashout-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 20px; height: 20px; border-radius: var(--r-pill);
background: var(--brand); border: 2px solid var(--surface);
box-shadow: var(--shadow-card); cursor: pointer;
}
.cashout-range::-moz-range-thumb {
width: 20px; height: 20px; border-radius: var(--r-pill);
background: var(--brand); border: 2px solid var(--surface);
box-shadow: var(--shadow-card); cursor: pointer;
}
.cashout-range__scale { display: flex; justify-content: space-between; font-size: var(--t-tiny); color: var(--text-faint); font-variant-numeric: tabular-nums; }
/* вывод выплаты */
.cashout-calc__out {
display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px var(--s-3);
margin-top: var(--s-4);
padding-top: var(--s-4);
border-top: var(--hairline);
}
.cashout-calc__out-k { font-size: var(--t-small); color: var(--text-mute); }
.cashout-calc__out-v {
grid-row: span 2;
display: inline-flex; align-items: baseline; gap: 1px;
font-family: var(--font-display);
font-size: var(--t-h2); font-weight: var(--fw-bold);
color: var(--brand); line-height: var(--lh-tight);
font-variant-numeric: tabular-nums;
}
.cashout-calc__cur { font-size: var(--t-h4); color: color-mix(in srgb, var(--brand) 70%, var(--text-faint)); }
.cashout-calc__out-sub { font-size: var(--t-tiny); color: var(--success); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.cashout-explainer__foot { margin-top: var(--s-5); font-size: var(--t-small); line-height: var(--lh-snug); }
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.cashout-explainer__body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.cashout-diagram, .cashout-calc { padding: var(--s-3); }
.cashout-calc__out-v { font-size: var(--t-h3); }
}
/* ===== awards-strip ===== */
/* ============================================================
* awards-strip · block.css
* Скоуплено на .awards-strip. Только токены (10-tokens/).
* Полоса наград/сертификатов + упоминаний прессы (trust-сигнал).
* Один акцент --brand — только ранг медали. Адаптив: 980 / 640.
* ========================================================== */
.awards-strip {
--aw-mark: 44px; /* фикс-слот наградной иконки */
--aw-logo-h: 32px; /* высота лого прессы (фикс-слот) */
padding-block: var(--s-7);
}
/* ---- Шапка ---- */
.awards-strip__head {
display: flex; flex-direction: column; gap: var(--s-1);
margin-bottom: var(--s-5);
}
.awards-strip__sub { font-size: var(--t-small); }
/* ---- Трек наград ---- */
.awards-strip__track {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4);
}
/* ---- Наградной чип (карточка-поверхность) ---- */
.award-chip {
display: flex; align-items: center; gap: var(--s-3);
min-width: 0;
padding: var(--s-4);
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-quick) var(--ease);
}
.award-chip:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
/* Фикс-слот иконки: brand-soft подложка, brand-штрих = единственный акцент */
.award-chip__mark {
flex: 0 0 var(--aw-mark);
width: var(--aw-mark); height: var(--aw-mark);
display: inline-flex; align-items: center; justify-content: center;
color: var(--brand);
background: var(--brand-soft);
border-radius: var(--r-md);
}
/* Сертификат честности — нейтральный знак (success по смыслу: «проверено») */
.award-chip__mark--verified {
color: var(--success);
background: var(--success-soft);
}
.award-chip__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.award-chip__rank {
font-family: var(--font-display);
font-size: var(--t-h4); font-weight: var(--fw-bold);
line-height: var(--lh-snug); color: var(--text);
overflow-wrap: break-word;
}
.award-chip__org {
font-size: var(--t-tiny); letter-spacing: .04em; text-transform: uppercase;
color: var(--text-mute);
}
.award-chip__year { font-variant-numeric: tabular-nums; color: var(--text-faint); }
/* ---- Упоминание прессы ---- */
.awards-strip__press {
position: relative;
margin: var(--s-5) 0 0;
padding: var(--s-5) var(--s-5) var(--s-5) var(--s-7);
background: var(--bg-2);
border-left: 3px solid var(--brand);
border-radius: var(--r-md);
}
.awards-strip__quote-mark {
position: absolute; top: var(--s-3); left: var(--s-3);
color: var(--brand);
opacity: .22;
}
.awards-strip__quote {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h3); line-height: var(--lh-snug);
color: var(--text-dim);
}
.awards-strip__cite {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
margin-top: var(--s-3);
font-size: var(--t-small);
}
.awards-strip__source { font-style: normal; font-weight: var(--fw-semi); color: var(--text); }
.awards-strip__dot { color: var(--rule-strong); }
.awards-strip__date { color: var(--text-mute); font-variant-numeric: tabular-nums; }
/* ---- Методология (disclosure) ---- */
.awards-strip__method { margin-top: var(--s-4); }
.awards-strip__method-btn {
display: inline-flex; align-items: center; gap: var(--s-2);
min-height: var(--tap-min);
font-size: var(--t-small); font-weight: var(--fw-semi);
color: var(--text-mute);
transition: color var(--dur-quick) var(--ease);
}
.awards-strip__method-btn:hover { color: var(--brand); }
.awards-strip__chevron { transition: transform var(--dur-base) var(--ease); }
.awards-strip__method-btn[aria-expanded="true"] .awards-strip__chevron { transform: rotate(180deg); }
.awards-strip__method-body {
max-width: var(--container-prose);
margin-top: var(--s-2);
padding: var(--s-4);
font-size: var(--t-small); line-height: var(--lh-base);
color: var(--text-dim);
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-md);
}
.awards-strip__method-body[hidden] { display: none; }
/* ============================================================
* Вариант --logos · компактная лента логотипов прессы
* ========================================================== */
.awards-strip--logos { padding-block: var(--s-6); }
.awards-strip__inline-label { margin-bottom: var(--s-4); text-align: center; }
.awards-strip__logos {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: var(--s-6);
}
.press-logo { display: inline-flex; }
.press-logo__img {
height: var(--aw-logo-h); width: auto;
/* единый монохром-вид логотипов; на hover — полный контраст */
filter: grayscale(1); opacity: .55;
transition: filter var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.press-logo__img:hover { filter: grayscale(0); opacity: 1; }
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.awards-strip__track { grid-template-columns: repeat(2, 1fr); }
.awards-strip__quote { font-size: var(--t-h4); }
}
@media (max-width: 640px) {
.awards-strip { --aw-mark: 40px; }
.awards-strip__track { grid-template-columns: 1fr; gap: var(--s-3); }
.awards-strip__press { padding-left: var(--s-5); }
.awards-strip__quote-mark { display: none; }
.awards-strip__logos { gap: var(--s-5); }
}
/* ===== back-to-top ===== */
/* ============================================================
* back-to-top · block.css
* Скоуплено на .back-to-top. Только токены (10-tokens/).
* Конвенция разметки/JS: html-base (кнопка «Наверх»). Адаптив: 980 / 640.
* Появление/скрытие — функциональный motion (fade + lift), prefers-reduced-motion из base.
* ========================================================== */
.back-to-top {
/* размер кнопки ≥ --tap-min (touch-target) */
--btt-size: 52px;
position: fixed;
inset-inline-end: var(--s-5);
inset-block-end: var(--s-5);
z-index: var(--z-popover);
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: var(--tap-min);
height: var(--btt-size);
padding-inline: var(--s-4);
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: var(--fw-semi);
line-height: var(--lh-tight);
color: var(--on-brand);
background: var(--brand);
border: 1px solid transparent;
border-radius: var(--r-pill);
box-shadow: var(--shadow-pop);
cursor: pointer;
/* стартовое (скрытое) состояние для плавного появления */
opacity: 0;
transform: translateY(var(--s-3));
transition:
opacity var(--dur-base) var(--ease),
transform var(--dur-base) var(--ease),
box-shadow var(--dur-quick) var(--ease),
background var(--dur-quick) var(--ease);
}
/* JS снимает [hidden] и добавляет .is-visible → плавный ввод.
Без JS кнопка остаётся hidden (страница использует нативный скролл). */
.back-to-top[hidden] { display: none; }
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover {
background: var(--brand-2);
box-shadow: var(--shadow-lift);
}
.back-to-top:active { transform: translateY(1px); }
/* :focus-visible наследуется из base — не переопределяем толщину/видимость,
только смещаем ринг от залитого фона для контраста. */
.back-to-top:focus-visible { outline-offset: 3px; }
/* ---- Иконка (bespoke SVG) ---- */
.back-to-top__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.back-to-top__icon svg { display: block; }
/* ---- Подпись ---- */
.back-to-top__label {
white-space: nowrap;
letter-spacing: .02em;
}
/* ---- Модификатор: только стрелка (круглая иконка-кнопка) ---- */
.back-to-top--bare {
width: var(--btt-size);
padding-inline: 0;
justify-content: center;
}
.back-to-top--bare .back-to-top__label { display: none; }
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.back-to-top {
inset-inline-end: var(--s-4);
inset-block-end: var(--s-4);
}
}
@media (max-width: 640px) {
/* на мобайле — компактная круглая кнопка, подпись прячем (экономим место) */
.back-to-top {
--btt-size: 48px;
width: var(--btt-size);
padding-inline: 0;
justify-content: center;
}
.back-to-top__label { display: none; }
}
/* ===== big-wins-video-rail ===== */
/* ============================================================
* big-wins-video-rail · block.css
* Скоуплено на .big-wins-video-rail. Только токены (10-tokens/).
* Owns: заголовок-блок + дисклеймер + ГОРИЗОНТАЛЬНЫЙ рельс (scroll-snap) карточек
* видео с постером (click-to-load) + тело карточки (название/сумма + метр).
* Один акцент --brand (play/множитель/фокус). Сумма — dataviz-метр + tabular-nums.
* Постер→iframe: заглушка absolute поверх iframe; .is-loaded скрывает заглушку.
* Конвенция house-style: рельс как similar-slots-rail, постер как demo-iframe.
* Адаптив: 980 / 640.
* ========================================================== */
.big-wins-video-rail {
--bwv-card: 320px; /* фикс-ширина снап-ячейки */
--bwv-gap: var(--s-5); /* шаг = шаг снапа */
--bwv-fade: var(--s-7); /* edge-fade у краёв рельса */
}
/* ---- Заголовок ленты ---- */
.big-wins-video-rail__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s-4);
margin-bottom: var(--s-3);
}
.big-wins-video-rail__heading { min-width: 0; }
.big-wins-video-rail__head .eyebrow { margin: 0 0 var(--s-2); }
.big-wins-video-rail__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h2);
line-height: var(--lh-tight);
letter-spacing: -0.01em;
color: var(--text);
}
.big-wins-video-rail__all {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--s-1);
font-size: var(--t-small);
font-weight: var(--fw-semi);
color: var(--brand);
text-decoration: none;
white-space: nowrap;
}
.big-wins-video-rail__all-ic { flex: 0 0 auto; transition: transform var(--dur-quick) var(--ease-out); }
.big-wins-video-rail__all:hover .big-wins-video-rail__all-ic,
.big-wins-video-rail__all:focus-visible .big-wins-video-rail__all-ic { transform: translateX(3px); }
/* ---- Дисклеймер (важно для гемблинга) ---- */
.big-wins-video-rail__disclaimer {
display: flex;
align-items: center;
gap: var(--s-2);
margin-bottom: var(--s-5);
font-size: var(--t-tiny);
color: var(--text-mute);
}
.big-wins-video-rail__disclaimer-ic { display: inline-flex; flex: 0 0 auto; color: var(--warning); }
/* ---- Горизонтальный рельс (scroll-snap) ---- */
.big-wins-video-rail__track {
list-style: none;
margin: 0;
margin-inline: calc(-1 * var(--gutter));
padding-inline: var(--gutter);
padding-block: var(--s-2);
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--bwv-card);
gap: var(--bwv-gap);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: var(--rule-strong) transparent;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--bwv-fade), #000 calc(100% - var(--bwv-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--bwv-fade), #000 calc(100% - var(--bwv-fade)), transparent 100%);
}
.big-wins-video-rail__track::-webkit-scrollbar { height: 8px; }
.big-wins-video-rail__track::-webkit-scrollbar-track { background: transparent; }
.big-wins-video-rail__track::-webkit-scrollbar-thumb { background: var(--rule); border-radius: var(--r-pill); }
.big-wins-video-rail__track:hover::-webkit-scrollbar-thumb { background: var(--rule-strong); }
.big-wins-video-rail__cell {
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
min-width: 0;
}
/* ---- Карточка видео ---- */
.bwv-card {
display: flex;
flex-direction: column;
width: 100%;
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-quick) var(--ease);
}
.bwv-card:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
/* ---- Медиа 16:9 (постер поверх ленивого iframe) ---- */
.bwv-card__media {
position: relative;
aspect-ratio: 16 / 9;
background: var(--bg-3);
}
.bwv-card__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
z-index: var(--z-base); /* по умолчанию под постером */
}
/* Как только у iframe появился src (клик по постеру → loadDemo) — поднимаем
его НАД постером, постер уходит из потока кликов. CSS-only, без доп.JS. */
.bwv-card__frame[src] { z-index: var(--z-sticky); }
/* Постер (click-to-load) */
.bwv-card__poster {
position: absolute;
inset: 0;
z-index: var(--z-sticky); /* поверх пустого iframe до загрузки */
display: block;
cursor: pointer;
border: 0;
transition: opacity var(--dur-base) var(--ease);
}
/* После активации iframe (есть src) постер прячем и выключаем клики */
.bwv-card__media:has(.bwv-card__frame[src]) .bwv-card__poster,
.bwv-card__poster.is-hidden { opacity: 0; pointer-events: none; }
.bwv-card__cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.bwv-card__poster--fallback {
background:
radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
var(--bg-3);
}
.bwv-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 40%,
color-mix(in srgb, var(--text) 55%, transparent) 100%
);
}
.bwv-card__play {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--on-brand);
background: var(--brand);
border-radius: var(--r-pill);
box-shadow: var(--shadow-pop);
transition: transform var(--dur-quick) var(--ease-out);
}
.bwv-card__play-ic { margin-inline-start: 2px; }
.bwv-card__poster:hover .bwv-card__play,
.bwv-card__poster:focus-visible .bwv-card__play { transform: translate(-50%, -50%) scale(1.08); }
/* Бейдж множителя — один акцент */
.bwv-card__mult {
position: absolute;
inset-block-start: var(--s-3);
inset-inline-start: var(--s-3);
display: inline-flex;
align-items: baseline;
padding: 2px var(--s-2);
font-size: var(--t-tiny);
font-weight: var(--fw-bold);
letter-spacing: .02em;
color: var(--on-brand);
background: var(--brand);
border-radius: var(--r-pill);
box-shadow: var(--shadow-card);
}
.bwv-card__mult-n { font-variant-numeric: tabular-nums; }
/* Длительность */
.bwv-card__dur {
position: absolute;
inset-block-end: var(--s-3);
inset-inline-end: var(--s-3);
padding: 2px var(--s-2);
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
color: var(--on-brand);
background: color-mix(in srgb, var(--text) 64%, transparent);
border-radius: var(--r-soft);
}
.bwv-card__dur-t { font-variant-numeric: tabular-nums; }
/* ---- Тело карточки ---- */
.bwv-card__body {
display: flex;
flex-direction: column;
gap: var(--s-1);
padding: var(--s-4);
}
.bwv-card__name {
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--text);
}
.bwv-card__provider { font-size: var(--t-tiny); color: var(--text-mute); }
.bwv-card__win {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-2);
margin-top: var(--s-1);
}
.bwv-card__win-k {
font-size: var(--t-tiny);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-mute);
}
.bwv-card__win-v {
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: var(--fw-bold);
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* dataviz-метр относительной величины выигрыша (не звёзды) */
.bwv-card__meter {
display: block;
height: 6px;
margin-top: var(--s-1);
background: var(--bg-3);
border-radius: var(--r-pill);
overflow: hidden;
}
.bwv-card__meter-fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--rating-from), var(--rating-to));
}
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.big-wins-video-rail { --bwv-card: 300px; --bwv-gap: var(--s-4); }
}
@media (max-width: 640px) {
.big-wins-video-rail { --bwv-card: 80vw; --bwv-fade: var(--s-5); }
.big-wins-video-rail__title { font-size: var(--t-h3); }
.big-wins-video-rail__head { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.big-wins-video-rail__track { grid-auto-columns: min(var(--bwv-card), 340px); }
}
/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
.big-wins-video-rail__track { scroll-behavior: auto; }
.bwv-card__play,
.bwv-card__poster { transition: none; }
}
/* ===== blog-card ===== */
/* ============================================================
* blog-card · block.css
* Скоуплено на .blog-card (грид) / .guide-card (карточка статьи).
* Только токены (10-tokens/). Конвенция разметки: html-rating-guide
* (Guide/Wiki · карточка статьи, вариант A — сетка 3/2/1).
* Один акцент: --brand (категория-чип + ссылка-заголовок на hover). Адаптив: 980 / 640.
* Визуал: премиум-глубина (surface-grad + shadow-card), hover = lift + brand-glow
* + brand-бордер; категория = grad-brand чип. Эффекты через токены →
* работают на всех скинах.
* ========================================================== */
/* ---- Грид-обёртка: 3 → 2 → 1 колонка ---- */
.blog-card {
--bc-cols: 3;
--bc-media: 58.5%; /* aspect-ratio медиа (~1.71:1, editorial 16:9-ish) */
display: grid;
grid-template-columns: repeat(var(--bc-cols), minmax(0, 1fr));
gap: var(--s-5);
margin: 0;
padding: 0;
list-style: none;
}
.blog-card__cell { display: flex; }
/* ---- Карточка статьи ---- */
.guide-card {
position: relative; /* контекст для overlay-ссылки заголовка */
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
background-color: var(--surface);
background-image: var(--surface-grad); /* тонкий градиент-оверлей сверху */
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card); /* глубина + inset верхний хайлайт */
overflow: hidden;
transition:
box-shadow var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.guide-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-pop), var(--shadow-glow); /* lift + мягкое свечение акцентом */
border-color: color-mix(in srgb, var(--brand) 45%, var(--rule));
}
/* ---- Медиа: фикс-слот (aspect-ratio) + категория-чип ---- */
.guide-card__img-wrap {
position: relative;
display: block;
aspect-ratio: 16 / 9;
background: var(--bg-2);
overflow: hidden;
text-decoration: none;
}
.guide-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
.guide-card:hover .guide-card__img { transform: scale(1.05); }
.guide-card__cat {
position: absolute;
inset-block-start: var(--s-3);
inset-inline-start: var(--s-3);
z-index: var(--z-base);
display: inline-flex;
align-items: center;
padding: var(--s-1) var(--s-3);
font-family: var(--font-body);
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--on-brand);
background-color: var(--brand);
background-image: var(--grad-brand); /* градиентная заливка бренда */
border-radius: var(--r-pill);
box-shadow:
var(--border-highlight),
0 6px 18px -8px color-mix(in srgb, var(--brand) 55%, transparent);
}
/* ---- Тело: заголовок + описание + мета ---- */
.guide-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--s-2);
padding: var(--s-4) var(--s-5) var(--s-5);
}
.guide-card__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
letter-spacing: -0.01em;
color: var(--text);
}
.guide-card__title a {
color: inherit;
text-decoration: none;
text-decoration-color: transparent;
transition: color var(--dur-quick) var(--ease);
}
/* Растягиваем ссылку на всю карточку (кликабелен весь юнит), мета остаётся выше по z. */
.guide-card__title a::after {
content: "";
position: absolute;
inset: 0;
}
.guide-card__title a:hover { color: var(--brand); }
.guide-card__desc {
margin: 0;
font-size: var(--t-small);
line-height: var(--lh-base);
color: var(--text-mute);
/* фикс-слот описания: ровно 3 строки, единая высота карточек в ряду */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
/* ---- Мета: дата + время чтения ---- */
.guide-card__meta {
display: flex;
align-items: center;
gap: var(--s-3);
margin-top: auto;
padding-top: var(--s-3);
border-top: var(--hairline);
font-size: var(--t-tiny);
color: var(--text-faint);
}
.guide-card__date,
.guide-card__read {
display: inline-flex;
align-items: center;
gap: var(--s-1);
}
.guide-card__date { font-variant-numeric: tabular-nums; }
.guide-card__read {
position: relative;
z-index: var(--z-base); /* выше overlay-ссылки заголовка */
margin-inline-start: auto;
font-variant-numeric: tabular-nums;
}
.guide-card__meta-ic {
flex: 0 0 auto;
color: var(--text-faint);
}
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.blog-card { --bc-cols: 2; gap: var(--s-4); }
}
@media (max-width: 640px) {
.blog-card { --bc-cols: 1; gap: var(--s-4); }
.guide-card__body { padding: var(--s-4); }
}
/* ============ Reduced motion: гасим доп. трансформы (база зануляет --dur-*) ============ */
@media (prefers-reduced-motion: reduce) {
.guide-card,
.guide-card__img { transition: none; }
.guide-card:hover { transform: none; }
.guide-card:hover .guide-card__img { transform: none; }
}
/* ===== bonus-card ===== */
/* ============================================================
* bonus-card · block.css
* Скоуплено на .bonus-card. Только токены (10-tokens/).
* Карточка оффера: badge + headline (% / сумма) + фикс-слоты
* (min-dep / wager / …) + T&C-drawer + ОДНА CTA. tabular-nums.
* Конвенция: html-rating-guide + _CONTRACT. Адаптив: 980 / 640.
* T&C-drawer — нативный , раскрытие grid-rows 0fr→1fr
* (плавно, без замера высоты в JS).
* Визуал: surface-grad-оверлей + premium-тень (верхний хайлайт внутри),
* hover = lift + brand-glow + brand-бордер. Featured — градиентный бордер
* (mask-техника). Эффекты на токенах → работают на всех скинах.
* ========================================================== */
.bonus-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-4);
padding: var(--s-5);
background-color: var(--surface);
background-image: var(--surface-grad);
border: var(--hairline);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
.bonus-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-pop), var(--shadow-glow);
border-color: color-mix(in srgb, var(--brand) 45%, var(--rule));
}
}
@media (prefers-reduced-motion: reduce) {
.bonus-card:hover {
box-shadow: var(--shadow-pop), var(--shadow-glow);
border-color: color-mix(in srgb, var(--brand) 45%, var(--rule));
}
}
/* Рекомендованный оффер — градиентный brand-бордер (mask) + мягкое свечение.
Один акцент --brand; бордер рисуется поверх, контент не смещается. */
.bonus-card--featured {
border-color: transparent;
box-shadow: var(--shadow-pop), var(--shadow-glow);
}
.bonus-card--featured::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: var(--grad-brand);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.bonus-card--featured:hover { box-shadow: var(--shadow-lift), var(--shadow-glow); }
}
/* ---- Шапка: badge + тип ---- */
.bonus-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
}
.bonus-card__badge {
display: inline-flex;
align-items: center;
min-height: var(--s-5);
padding: 2px var(--s-3);
font-size: var(--t-tiny);
font-weight: var(--fw-bold);
letter-spacing: .04em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--r-pill);
}
/* Бейдж: акцентный (рекомендуем — мягкий glow) и нейтральный (стекло) */
.bonus-card__badge[data-tone="brand"] {
color: var(--brand);
background: var(--brand-soft);
border-color: color-mix(in srgb, var(--brand) 30%, transparent);
box-shadow: var(--shadow-glow);
}
.bonus-card__badge[data-tone="neutral"] {
color: var(--text-mute);
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-color: var(--glass-border);
}
.bonus-card__type {
font-size: var(--t-tiny);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-faint);
}
/* ---- Headline: главная цифра оффера (фикс-слот) ---- */
.bonus-card__headline {
display: flex;
flex-direction: column;
gap: var(--s-1);
min-height: calc(var(--t-display) + var(--s-4)); /* фикс-высота: ровный ряд карточек */
}
.bonus-card__amount {
font-family: var(--font-display);
font-size: var(--t-display);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
/* Gradient display-число (читаемость не страдает — короткий числовой токен) */
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
color: var(--brand);
-webkit-text-fill-color: transparent;
}
.bonus-card__upto {
font-size: var(--t-body);
line-height: var(--lh-snug);
color: var(--text-dim);
}
.bonus-card__num { font-weight: var(--fw-semi); color: var(--text); font-variant-numeric: tabular-nums; }
/* ---- Спеки: фикс-слоты (min-dep / wager / срок …) ---- */
.bonus-card__specs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-2);
margin: 0;
padding-block: var(--s-3);
border-top: var(--hairline);
border-bottom: var(--hairline);
}
.bonus-card__spec {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
text-align: center;
}
.bonus-card__spec + .bonus-card__spec { border-left: var(--hairline); }
.bonus-card__spec-k {
margin: 0;
font-size: var(--t-tiny);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-mute);
}
.bonus-card__spec-v {
margin: 0;
font-weight: var(--fw-semi);
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* ---- T&C-drawer: нативный , держит карточку чистой ---- */
.bonus-card__terms { margin-top: auto; } /* прижать CTA к низу при разной высоте */
.bonus-card__terms-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-2);
min-height: var(--tap-min);
cursor: pointer;
list-style: none;
user-select: none;
font-size: var(--t-small);
font-weight: var(--fw-medium);
color: var(--text-mute);
transition: color var(--dur-quick) var(--ease);
}
.bonus-card__terms-q::-webkit-details-marker { display: none; } /* убрать дефолтный треугольник */
.bonus-card__terms-q:hover { color: var(--brand); }
.bonus-card__terms[open] .bonus-card__terms-q { color: var(--brand); }
.bonus-card__terms-chevron {
flex: 0 0 auto;
color: var(--text-faint);
transition: transform var(--dur-base) var(--ease-out), color var(--dur-quick) var(--ease);
}
.bonus-card__terms-q:hover .bonus-card__terms-chevron { color: var(--brand); }
.bonus-card__terms[open] .bonus-card__terms-chevron { transform: rotate(180deg); color: var(--brand); }
/* Раскрытие: grid-rows 0fr→1fr (плавная высота без JS-замера) */
.bonus-card__terms-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.bonus-card__terms[open] .bonus-card__terms-a { grid-template-rows: 1fr; }
.bonus-card__terms-inner {
overflow: hidden;
min-height: 0; /* критично для коллапса grid-строки */
}
.bonus-card__terms-inner p {
padding-top: var(--s-2);
font-size: var(--t-small);
line-height: var(--lh-base);
color: var(--text-dim);
}
/* ---- CTA: одна на карточку ---- */
.bonus-card__cta { margin-top: auto; }
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.bonus-card { gap: var(--s-3); }
}
@media (max-width: 640px) {
.bonus-card { padding: var(--s-4); }
.bonus-card__headline { min-height: 0; }
/* Спеки в одну колонку: разделитель сверху, не слева */
.bonus-card__specs { grid-template-columns: 1fr; gap: 0; }
.bonus-card__spec {
flex-direction: row;
justify-content: space-between;
align-items: baseline;
gap: var(--s-3);
text-align: left;
padding-block: var(--s-2);
}
.bonus-card__spec + .bonus-card__spec { border-left: none; border-top: var(--hairline); }
}
/* ============ Reduced motion: без анимации высоты/шеврона ============ */
@media (prefers-reduced-motion: reduce) {
.bonus-card__terms-a { transition: none; }
.bonus-card__terms-chevron { transition: color var(--dur-quick) var(--ease); }
}
/* ===== bonus-terms-popover ===== */
/* ============================================================
* bonus-terms-popover · block.css
* Скоуплено на .bonus-terms-popover. Только токены (10-tokens/).
* Конвенция разметки/JS: html-rating-guide (T&C-drawer). Адаптив: 980 / 640.
* Раскрытие: JS-вариант — [hidden] на регионе; -вариант —
* grid-rows 0fr→1fr (плавно, без замера высоты в JS).
* ========================================================== */
.bonus-terms-popover {
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.bonus-terms-popover:hover { box-shadow: var(--shadow-pop); }
/* ---- Шапка: суть бонуса + триггер (JS-вариант) ---- */
.bonus-terms-popover__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: var(--s-4) var(--s-5);
}
.bonus-terms-popover__lead { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bonus-terms-popover__eyebrow {
font-size: var(--t-tiny);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-mute);
font-weight: var(--fw-semi);
}
.bonus-terms-popover__offer {
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--text);
}
/* Числа/проценты/суммы — табличные цифры, акцент */
.bonus-terms-popover__num {
font-variant-numeric: tabular-nums;
color: var(--brand);
}
/* ---- Триггер раскрытия ---- */
.bonus-terms-popover__toggle {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: var(--tap-min);
padding: var(--s-2) var(--s-4);
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: var(--fw-semi);
color: var(--brand);
background: var(--brand-soft);
border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
border-radius: var(--r-pill);
transition: background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.bonus-terms-popover__toggle:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.bonus-terms-popover__toggle-ic { flex: 0 0 auto; opacity: .85; }
.bonus-terms-popover__toggle-txt { white-space: nowrap; }
/* Шеврон — единый индикатор состояния (поворот при раскрытии) */
.bonus-terms-popover__chev {
flex: 0 0 auto;
color: currentColor;
transition: transform var(--dur-base) var(--ease-out);
}
.bonus-terms-popover__toggle[aria-expanded="true"] .bonus-terms-popover__chev { transform: rotate(180deg); }
/* ---- Регион условий (JS-вариант: [hidden] переключается скриптом) ---- */
.bonus-terms-popover__drawer {
padding: 0 var(--s-5) var(--s-5);
border-top: var(--hairline);
}
.bonus-terms-popover__drawer[hidden] { display: none; }
.bonus-terms-popover__drawer > :first-child { margin-top: var(--s-4); }
/* ---- Ключевые факты — фикс-слоты 4-в-ряд ---- */
.bonus-terms-popover__facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-2);
margin: 0 0 var(--s-4);
}
.bonus-terms-popover__fact {
padding: var(--s-2) var(--s-3);
background: var(--bg-2);
border-radius: var(--r-md);
text-align: center;
}
.bonus-terms-popover__fact-k {
margin: 0;
font-size: var(--t-tiny);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-mute);
}
.bonus-terms-popover__fact-v {
margin: 2px 0 0;
font-weight: var(--fw-bold);
font-size: var(--t-h4);
color: var(--text);
}
/* ---- Список условий ---- */
.bonus-terms-popover__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.bonus-terms-popover__li {
position: relative;
padding-left: var(--s-5);
font-size: var(--t-small);
line-height: var(--lh-base);
color: var(--text-dim);
}
.bonus-terms-popover__li::before {
content: "";
position: absolute;
left: var(--s-1);
top: .6em;
width: 6px;
height: 6px;
border-radius: var(--r-pill);
background: var(--brand);
}
/* ---- Мета: ответственная игра + ссылка на правила ---- */
.bonus-terms-popover__meta {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--s-2);
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: var(--hairline);
font-size: var(--t-tiny);
line-height: var(--lh-base);
color: var(--text-faint);
}
.bonus-terms-popover__age {
display: inline-flex;
align-items: center;
padding: 1px var(--s-2);
font-size: var(--t-tiny);
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
color: var(--on-brand);
background: var(--text-mute);
border-radius: var(--r-soft);
}
.bonus-terms-popover__cta {
font-weight: var(--fw-semi);
color: var(--brand);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.bonus-terms-popover__cta:hover { color: color-mix(in srgb, var(--brand) 80%, #000); }
/* ============================================================
* Вариант --inline · нативный / (без JS)
* Раскрытие через grid-rows 0fr→1fr на .drawer.
* ========================================================== */
.bonus-terms-popover--inline { overflow: hidden; }
.bonus-terms-popover__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-height: var(--tap-min);
padding: var(--s-3) var(--s-4);
cursor: pointer;
list-style: none;
user-select: none;
font-size: var(--t-small);
color: var(--text);
}
.bonus-terms-popover__summary::-webkit-details-marker { display: none; }
.bonus-terms-popover__summary-lead { min-width: 0; font-weight: var(--fw-semi); }
.bonus-terms-popover__summary-sep { color: var(--rule-strong); margin-inline: var(--s-1); }
.bonus-terms-popover__summary-mute { color: var(--text-mute); font-weight: var(--fw-medium); }
.bonus-terms-popover__summary-toggle {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--s-1);
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--brand);
}
.bonus-terms-popover__summary:hover .bonus-terms-popover__summary-toggle { color: color-mix(in srgb, var(--brand) 80%, #000); }
.bonus-terms-popover--inline[open] .bonus-terms-popover__chev { transform: rotate(180deg); }
/* Регион внутри : плавное раскрытие высотой через grid */
.bonus-terms-popover--inline .bonus-terms-popover__drawer {
display: grid;
grid-template-rows: 0fr;
padding: 0;
border-top: 0;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.bonus-terms-popover--inline[open] .bonus-terms-popover__drawer { grid-template-rows: 1fr; }
.bonus-terms-popover--inline .bonus-terms-popover__drawer > * {
overflow: hidden;
min-width: 0; /* критично для коллапса grid-строки */
}
/* Внутренний паддинг кладём на содержимое, чтобы коллапс схлопывался в ноль */
.bonus-terms-popover--inline .bonus-terms-popover__list {
padding: var(--s-4) var(--s-4) 0;
border-top: var(--hairline);
}
.bonus-terms-popover--inline .bonus-terms-popover__meta { margin: var(--s-3) var(--s-4) var(--s-4); }
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.bonus-terms-popover__facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.bonus-terms-popover__head {
flex-direction: column;
align-items: stretch;
gap: var(--s-3);
padding: var(--s-4);
}
.bonus-terms-popover__toggle { justify-content: center; }
.bonus-terms-popover__drawer { padding-inline: var(--s-4); }
.bonus-terms-popover__drawer[hidden] { display: none; }
}
/* ============ Reduced motion: без анимации высоты/шеврона ============ */
@media (prefers-reduced-motion: reduce) {
.bonus-terms-popover--inline .bonus-terms-popover__drawer { transition: none; }
.bonus-terms-popover__chev { transition: none; }
}
/* ===== brand-attribution ===== */
/* ============================================================
* brand-attribution · block.css
* Скоуплено на .brand-attribution / .ba-* . Только токены (10-tokens/).
* Назначение: атрибуция владельца/оператора бренда (legal entity behind
* the brand): кто оператор, под какой юрисдикцией, какие бренды в портфеле.
* Конвенция: ★research / premium-планка (готовой разметки нет —
* спроектировано по premium-signals.md). Ориентир house-style:
* casino-item-card (поверхность/радиус/тень/tabular-nums),
* featured-card / provider-card (фикс-слоты, ОДНА CTA, -drawer).
* Сосед по смыслу — license-badge / affiliate-disclosure.
* Один акцент — --brand (verify-ссылка + hover); остальное — нейтрали.
* --success/--info — только по смыслу (статус «активна» / инфо-нота).
* Числа (рег.№ / год / счётчик брендов) — tabular-nums. Адаптив: 980 / 640.
* ========================================================== */
.brand-attribution {
--ba-mark: 56px; /* фикс-слот марки оператора */
}
/* Карточка-поверхность (как casino-item: surface + hairline + r-lg + shadow-card) */
.brand-attribution {
display: block;
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow: hidden; /* радиусы внутренних полос совпадают с карточкой */
}
/* Числа везде табличные */
.ba__num { font-variant-numeric: tabular-nums; }
/* ============================================================
* 1 · Шапка: метка-eyebrow + марка оператора + имя + статус
* ========================================================== */
.ba__head {
display: grid;
grid-template-columns: var(--ba-mark) minmax(0, 1fr) auto;
grid-template-areas: "mark name status";
align-items: center;
gap: var(--s-2) var(--s-4);
padding: var(--s-5) var(--s-5) var(--s-4);
}
/* Марка оператора — фикс-слот (лого вписывается; нет лого → инициалы-градиент) */
.ba-mark {
grid-area: mark;
flex: 0 0 auto;
display: grid;
place-items: center;
width: var(--ba-mark);
height: var(--ba-mark);
padding: var(--s-2);
background: var(--bg-2);
border: var(--hairline);
border-radius: var(--r-md);
overflow: hidden;
}
.ba-mark__img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Fallback без лого: фирменный градиент + инициалы оператора */
.ba-mark--fallback {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
border-color: transparent;
}
.ba-mark--fallback::after {
content: attr(data-initial);
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: var(--fw-bold);
letter-spacing: .02em;
line-height: 1;
color: color-mix(in srgb, var(--on-brand) 92%, transparent);
}
.ba__head-meta { grid-area: name; min-width: 0; }
.ba__eyebrow { margin: 0 0 2px; color: var(--text-mute); }
.ba__name {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--text);
}
.ba__legal {
margin: 2px 0 0;
font-size: var(--t-small);
color: var(--text-mute);
line-height: var(--lh-snug);
}
/* Статус-чип — носитель функц. цвета (по смыслу), не декор.
--active = лицензия активна (--success); базовый = нейтральный info. */
.ba__status {
grid-area: status;
align-self: start;
display: inline-flex;
align-items: center;
gap: var(--s-1);
padding: 2px var(--s-2);
font-size: var(--t-tiny);
font-weight: var(--fw-semi);
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
color: var(--info);
background: var(--info-soft);
border-radius: var(--r-pill);
}
.ba__status--active { color: var(--success); background: var(--success-soft); }
.ba__status-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
/* ============================================================
* 2 · Факт-грид: оператор / юрисдикция / лицензия / основан
* ========================================================== */
.ba-facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px; /* = hairline-ширина: 1px-зазоры рисуют решётку */
margin: 0;
padding: 0;
border-top: var(--hairline);
border-bottom: var(--hairline);
background: var(--rule); /* фон проступает в зазорах как 1px-линии */
}
.ba-fact {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--s-3) var(--s-5);
background: var(--surface); /* перекрывает фон-решётку, оставляя 1px линии */
}
.ba-fact__k {
margin: 0;
font-size: var(--t-tiny);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-faint);
}
.ba-fact__v {
margin: 0;
font-weight: var(--fw-semi);
color: var(--text);
line-height: var(--lh-snug);
}
.ba-fact__v small { color: var(--text-faint); font-weight: var(--fw-medium); }
/* Лицензия — моноширинный номер (как license-badge) */
.ba-fact__v--mono { font-family: var(--font-mono); font-size: var(--t-small); letter-spacing: .02em; }
/* ============================================================
* 3 · Портфель брендов того же оператора (dataviz: счётчик + чипы)
* ========================================================== */
.ba-portfolio { padding: var(--s-4) var(--s-5); }
.ba-portfolio__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
margin: 0 0 var(--s-3);
}
.ba-portfolio__k {
margin: 0;
font-size: var(--t-tiny);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-mute);
}
.ba-portfolio__count {
font-family: var(--font-display);
font-weight: var(--fw-bold);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.ba-portfolio__count small { color: var(--text-faint); font-weight: var(--fw-medium); }
/* Чипы соседних брендов — нейтральные пилюли; «этот бренд» помечен акцентом */
.ba-siblings {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.ba-sibling {
display: inline-flex;
align-items: center;
gap: var(--s-1);
padding: var(--s-1) var(--s-3);
font-size: var(--t-small);
color: var(--text-dim);
background: var(--bg-2);
border: var(--hairline);
border-radius: var(--r-pill);
text-decoration: none;
transition: border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease);
}
a.ba-sibling:hover { border-color: var(--rule-strong); color: var(--text); background: var(--surface-2); }
.ba-sibling__dot {
flex: 0 0 auto;
width: 6px; height: 6px;
border-radius: var(--r-pill);
background: var(--rule-strong);
}
/* Текущий бренд страницы — единственный акцент в портфеле */
.ba-sibling--current {
color: var(--brand);
background: var(--brand-soft);
border-color: color-mix(in srgb, var(--brand) 35%, transparent);
font-weight: var(--fw-semi);
}
.ba-sibling--current .ba-sibling__dot { background: var(--brand); }
/* ============================================================
* 4 · Подвал: ОДНА CTA (проверка реестра) + disclosure-drawer
* ========================================================== */
.ba__foot {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--s-4) var(--s-5) var(--s-5);
border-top: var(--hairline);
}
.ba__cta-ic { transition: transform var(--dur-quick) var(--ease-out); }
.ba__cta:hover .ba__cta-ic,
.ba__cta:focus-visible .ba__cta-ic { transform: translateX(3px); }
/* disclosure-drawer (нативный ) — держит карточку чистой по умолчанию */
.ba-note__sum {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
min-height: var(--tap-min);
list-style: none;
cursor: pointer;
user-select: none;
font-size: var(--t-small);
font-weight: var(--fw-medium);
color: var(--text-mute);
transition: color var(--dur-quick) var(--ease);
}
.ba-note__sum::-webkit-details-marker { display: none; } /* убрать дефолтный треугольник */
.ba-note__sum:hover { color: var(--brand); }
.ba-note[open] .ba-note__sum { color: var(--text); }
.ba-note__chevron {
flex: 0 0 auto;
color: var(--text-faint);
transition: transform var(--dur-base) var(--ease-out), color var(--dur-quick) var(--ease);
}
.ba-note__sum:hover .ba-note__chevron { color: var(--brand); }
.ba-note[open] .ba-note__chevron { transform: rotate(180deg); color: var(--brand); }
/* Раскрытие: grid-rows 0fr→1fr (плавно, без JS-замера высоты) */
.ba-note__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.ba-note[open] .ba-note__body { grid-template-rows: 1fr; }
.ba-note__body > p {
overflow: hidden;
min-height: 0; /* критично для коллапса grid-строки */
margin: 0;
padding-top: var(--s-2);
font-size: var(--t-small);
line-height: var(--lh-base);
color: var(--text-dim);
}
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.ba-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.brand-attribution { --ba-mark: 48px; }
.ba__head {
grid-template-columns: var(--ba-mark) minmax(0, 1fr);
grid-template-areas:
"mark name"
"status status";
padding: var(--s-4) var(--s-4) var(--s-3);
}
.ba__status { justify-self: start; margin-top: var(--s-1); }
.ba-facts { grid-template-columns: 1fr; }
.ba-fact { padding: var(--s-3) var(--s-4); }
.ba-portfolio { padding: var(--s-3) var(--s-4); }
.ba__foot { padding: var(--s-3) var(--s-4) var(--s-4); }
}
/* ============ Reduced motion: гасим доп. анимации (база уже зануляет --dur-*) ============ */
@media (prefers-reduced-motion: reduce) {
.ba-note__body { transition: none; }
}
/* ===== breadcrumb ===== */
/* ============================================================
* breadcrumb · block.css
* Скоуплено на .breadcrumb. Только токены (10-tokens/).
* Конвенция разметки/JS: html-base (Schema BreadcrumbList — в block.md).
* Адаптив: 980 / 640. JS не требуется.
* ========================================================== */
.breadcrumb {
font-family: var(--font-body);
font-size: var(--t-small);
line-height: var(--lh-snug);
color: var(--text-mute);
}
.breadcrumb__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-1) 0;
/* Цифры в названиях разделов/страниц — выровнены по табличным */
font-variant-numeric: tabular-nums;
}
.breadcrumb__item {
display: inline-flex;
align-items: center;
min-width: 0;
}
/* ---- Ссылка-сегмент ---- */
.breadcrumb__link {
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: var(--tap-min);
padding-inline: var(--s-1);
color: var(--text-mute);
text-decoration: none;
border-radius: var(--r-soft);
transition: color var(--dur-quick) var(--ease);
}
.breadcrumb__link:hover {
color: var(--brand);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.breadcrumb__ic {
display: inline-flex;
flex: 0 0 auto;
color: var(--text-faint);
transition: color var(--dur-quick) var(--ease);
}
.breadcrumb__link:hover .breadcrumb__ic { color: var(--brand); }
.breadcrumb__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---- Разделитель (декоративный) ---- */
.breadcrumb__sep {
display: inline-flex;
flex: 0 0 auto;
margin-inline: var(--s-1);
color: var(--text-faint);
}
/* ---- Текущая страница (не ссылка) ---- */
.breadcrumb__current {
display: inline-block;
max-width: min(60ch, 100%);
padding-inline: var(--s-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
font-weight: var(--fw-semi);
}
/* ============ Адаптив ============ */
@media (max-width: 980px) {
/* Не переносим — даём горизонтальный скролл, цепочка остаётся читаемой */
.breadcrumb__list {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-webkit-overflow-scrolling: touch;
}
.breadcrumb__list::-webkit-scrollbar { display: none; } /* WebKit */
.breadcrumb__item { flex: 0 0 auto; }
.breadcrumb__current { max-width: 36ch; }
}
@media (max-width: 640px) {
/* Схлоп: оставляем только первый сегмент и текущую страницу.
Промежуточные пункты прячем, перед текущей — многоточие-маркер. */
.breadcrumb__item:not(:first-child):not(.breadcrumb__item--current) {
display: none;
}
.breadcrumb__item--current::before {
content: "…";
margin-inline: var(--s-1) var(--s-2);
color: var(--text-faint);
}
/* Если цепочка из 2 уровней (текущая идёт сразу за первым) — маркер не нужен */
.breadcrumb__item:first-child + .breadcrumb__item--current::before {
content: none;
}
.breadcrumb__current { max-width: 24ch; }
}
/* ===== callout-note ===== */
/* ============================================================
* callout-note · block.css
* Скоуплено на .callout-note. Только токены (10-tokens/).
* Конвенция разметки: ★research / premium-планка (своя разметка — готовой нет).
* Цвет = СМЫСЛ типа врезки, не декор: note→--brand (единственный акцент),
* info→--info, tip→--success, warning→--warning, danger→--danger.
* Тип задаётся ОДНОЙ парой локальных переменных (--cn-accent/--cn-accent-soft),
* тело блока их только потребляет — добавить тип = одна строка-модификатор.
* Анатомия: left-border-акцент + мягкая подложка + фикс-слот иконки + текст.
* Адаптив: 980 / 640.
* ========================================================== */
.callout-note {
/* тип по умолчанию = note: единственный бренд-акцент (нейтрально-редакторский) */
--cn-accent: var(--brand);
--cn-accent-soft: var(--brand-soft);
/* фикс-слот иконки — единый вертикальный ритм всех врезок */
--cn-ic: 28px;
display: grid;
grid-template-columns: var(--cn-ic) minmax(0, 1fr);
gap: var(--s-3);
align-items: start;
padding: var(--s-4) var(--s-5);
/* left-border-акцент + парная мягкая подложка тем же цветом темы */
border: var(--hairline);
border-left: 3px solid var(--cn-accent);
border-radius: var(--r-md);
background:
linear-gradient(var(--cn-accent-soft), var(--cn-accent-soft)),
var(--surface);
color: var(--text-dim);
}
/* ---- Иконка: фикс-слот, цвет наследует тип, подложка — мягкий тон ---- */
.callout-note__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--cn-ic);
height: var(--cn-ic);
color: var(--cn-accent);
background: var(--cn-accent-soft);
border-radius: var(--r-md);
}
/* пер-тип иконка показывается, лишние — спрятаны (одна разметка на все типы
не нужна: иконка инлайнится в HTML, этот слот лишь центрирует SVG) */
.callout-note__icon svg { display: block; }
/* ---- Тело ---- */
.callout-note__body {
min-width: 0;
/* выравнивание текста по оптической середине иконки-слота */
padding-top: calc((var(--cn-ic) - 1.2em) / 2);
}
.callout-note__title {
margin: 0 0 var(--s-1);
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--text);
}
.callout-note__text {
margin: 0;
font-size: var(--t-body);
line-height: var(--lh-base);
color: var(--text-dim);
}
.callout-note__text + .callout-note__text { margin-top: var(--s-2); }
/* ссылки внутри тела подхватывают цвет типа, а не общий --brand */
.callout-note__text a {
color: var(--cn-accent);
text-decoration-color: color-mix(in srgb, var(--cn-accent) 40%, transparent);
}
.callout-note__text a:hover { text-decoration-color: var(--cn-accent); }
/* числа в теле (лимиты ставок/проценты/возраст) — табличные цифры */
.callout-note__num {
font-variant-numeric: tabular-nums;
font-weight: var(--fw-semi);
color: var(--text);
}
/* ---- Типы (цвет = смысл) ---- */
.callout-note--info { --cn-accent: var(--info); --cn-accent-soft: var(--info-soft); }
.callout-note--tip { --cn-accent: var(--success); --cn-accent-soft: var(--success-soft); }
.callout-note--warning { --cn-accent: var(--warning); --cn-accent-soft: var(--warning-soft); }
.callout-note--danger { --cn-accent: var(--danger); --cn-accent-soft: var(--danger-soft); }
/* note — дефолт (--brand), отдельный класс не нужен */
/* ---- Модификатор: компактный (без заголовка, плотнее) ---- */
.callout-note--compact {
padding: var(--s-3) var(--s-4);
--cn-ic: 24px;
}
.callout-note--compact .callout-note__text { font-size: var(--t-small); }
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.callout-note { padding: var(--s-4); }
}
@media (max-width: 640px) {
.callout-note { gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.callout-note__text { font-size: var(--t-small); }
}
/* ===== casino-item-card ===== */
/* ============================================================
* casino-item-card · block.css
* Скоуплено на .rating-block / .casino-item. Только токены (10-tokens/).
* Конвенция разметки/JS: html-rating-guide. Адаптив: 980 / 640.
* Визуал: surface-grad-оверлей + premium-тень (верхний хайлайт),
* hover = lift + brand-glow + brand-бордер; рейтинг-бар светится акцентом.
* Всё на токенах → эффекты работают на всех скинах (вкл. midnight-crypto).
* ========================================================== */
.rating-block { --ci-logo: 124px; }
.casino-list {
list-style: none; margin: 0; padding: 0;
counter-reset: ci;
display: flex; flex-direction: column; gap: var(--s-4);
}
.casino-list__row { display: block; }
/* ---- Карточка ---- */
.casino-item {
counter-increment: ci;
display: grid;
grid-template-columns: var(--ci-logo) minmax(0, 1.5fr) 0.9fr 1.05fr minmax(150px, auto);
grid-template-areas: "logo main nd mini cta";
gap: var(--s-5);
align-items: center;
padding: var(--s-4);
background-color: var(--surface);
background-image: var(--surface-grad);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
.casino-item:hover {
box-shadow: var(--shadow-pop), var(--shadow-glow);
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--brand) 42%, var(--rule));
}
}
@media (prefers-reduced-motion: reduce) {
.casino-item:hover {
box-shadow: var(--shadow-pop), var(--shadow-glow);
border-color: color-mix(in srgb, var(--brand) 42%, var(--rule));
}
}
/* ---- 1 · Логотип + бейдж позиции ---- */
.ci-logo { grid-area: logo; position: relative; }
.ci-logo__img {
width: var(--ci-logo); height: var(--ci-logo);
object-fit: cover; border-radius: var(--r-md);
background: var(--bg-2); border: var(--hairline);
}
.ci-logo::after {
content: counter(ci);
position: absolute; top: calc(-1 * var(--s-2)); left: calc(-1 * var(--s-2));
min-width: 26px; height: 26px; padding: 0 6px;
display: inline-flex; align-items: center; justify-content: center;
font-size: var(--t-tiny); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
color: var(--on-brand);
background-color: var(--brand); background-image: var(--grad-brand);
border-radius: var(--r-pill); box-shadow: var(--shadow-glow), 0 1px 2px rgba(0,0,0,.18);
}
/* ---- 2 · Имя + рейтинг + промо ---- */
.ci-main { grid-area: main; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ci-name { font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.ci-rating__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.ci-rating__k { font-size: var(--t-tiny); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.ci-rating__v { font-weight: var(--fw-bold); color: var(--brand); font-variant-numeric: tabular-nums; }
.ci-rating__v small { color: var(--text-faint); font-weight: var(--fw-medium); }
.ci-rating__bar { height: 8px; margin-top: var(--s-1); background: var(--bg-3); border-radius: var(--r-pill); overflow: hidden; }
.ci-rating__fill {
display: block; height: 100%; border-radius: inherit;
background: linear-gradient(90deg, var(--rating-from), var(--rating-to));
/* мягкое свечение шкале (dataviz-акцент) */
box-shadow: 0 0 12px -2px color-mix(in srgb, var(--rating-to) 60%, transparent);
}
.ci-promo__box {
align-self: flex-start;
display: inline-flex; align-items: center; gap: var(--s-2); position: relative;
padding: var(--s-2) var(--s-3); margin-top: var(--s-1);
background: var(--brand-soft); color: var(--brand);
border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
border-radius: var(--r-md); cursor: pointer;
transition: background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.ci-promo__box:hover {
background: color-mix(in srgb, var(--brand) 16%, transparent);
border-color: color-mix(in srgb, var(--brand) 60%, transparent);
box-shadow: var(--shadow-glow);
}
.ci-promo__code { font-family: var(--font-mono); font-weight: var(--fw-semi); letter-spacing: .03em; }
.ci-promo__ic { display: inline-flex; }
.ci-promo__toast {
position: absolute; inset-inline-start: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
padding: 2px var(--s-2); font-size: var(--t-tiny); white-space: nowrap;
color: var(--on-brand); background: var(--text); border-radius: var(--r-soft);
opacity: 0; pointer-events: none; transition: opacity var(--dur-quick) var(--ease);
}
.ci-promo__box.is-copied .ci-promo__toast { opacity: 1; }
/* ---- 3 · Бездеп ---- */
.ci-nd { grid-area: nd; text-align: center; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.ci-nd__title { font-size: var(--t-tiny); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.ci-nd__fs { font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.ci-nd__wager { font-size: var(--t-small); color: var(--text-mute); }
.ci-nd__terms { position: relative; margin-top: var(--s-1); }
.ci-nd__terms-btn { font-size: var(--t-tiny); color: var(--text-mute); text-decoration: underline; text-underline-offset: 2px; }
.ci-nd__terms-btn:hover { color: var(--brand); }
.ci-nd__terms-pop {
position: absolute; inset-inline: 50% auto; left: 50%; transform: translateX(-50%); top: calc(100% + 6px);
width: max(220px, 100%); z-index: var(--z-popover);
padding: var(--s-3); text-align: left; font-size: var(--t-small); line-height: var(--lh-snug);
color: var(--text-dim);
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
.ci-nd__terms-pop[hidden] { display: none; }
/* ---- 4 · Мини-грид ---- */
.ci-mini-grid { grid-area: mini; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin: 0; }
.ci-mini { padding: var(--s-2) var(--s-3); background: var(--bg-2); border-radius: var(--r-md); }
.ci-mini__k { margin: 0; font-size: var(--t-tiny); letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute); }
.ci-mini__v { margin: 2px 0 0; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
/* ---- 5 · CTA + страны ---- */
.ci-cta { grid-area: cta; display: flex; flex-direction: column; gap: var(--s-2); }
.ci-countries { font-size: var(--t-tiny); line-height: var(--lh-snug); }
.ci-countries__k { display: block; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.ci-countries__v { color: var(--text-mute); }
/* ============ Адаптив ============ */
@media (max-width: 980px) {
.casino-item {
grid-template-columns: var(--ci-logo) 1fr 1fr;
grid-template-areas:
"logo main main"
"logo nd mini"
"cta cta cta";
gap: var(--s-4);
}
.ci-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4); }
.ci-cta .btn { width: auto; flex: 0 0 auto; min-width: 160px; }
}
@media (max-width: 640px) {
.rating-block { --ci-logo: 96px; }
.casino-item {
grid-template-columns: var(--ci-logo) 1fr;
grid-template-areas:
"logo main"
"nd nd"
"mini mini"
"cta cta";
gap: var(--s-3);
}
.ci-nd { flex-direction: row; gap: var(--s-3); text-align: left; justify-content: center; align-items: baseline; flex-wrap: wrap; }
.ci-cta { flex-direction: column; }
.ci-cta .btn { width: 100%; }
}
/* ===== casino-matcher-quiz ===== */
/* ============================================================
* casino-matcher-quiz · block.css
* Квиз-подбор казино: анкета (single-select option-cards) → матч-карточка
* с dataviz-мерой совпадения и ОДНОЙ CTA. Скоуплено на .casino-matcher-quiz.
* Только токены (10-tokens/). Конвенция: ★research (премиум-сигналы) +
* переиспользование паттернов wagering-calculator (segmented/radio, dataviz-мера
* на --val, T&C-drawer на ) и casino-item-card (фикс-слот лого, рейтинг-
* бар на --bg-3-треке с градиентом, tabular-nums, --surface+--hairline+--r-lg+
* --shadow-card). Один акцент --brand. Адаптив: 980 / 640.
* JS: quiz.js (data-action="casinoQuiz") — прогрессивно; без JS виден 1-й шаг +
* статичная демо-матч-карточка. Источник истины меры совпадения — --val 0..100.
* ========================================================== */
.casino-matcher-quiz {
--cmq-fit-h: 10px; /* высота меры совпадения */
--cmq-progress-h: 6px; /* высота прогресс-бара */
--cmq-logo: 120px; /* фикс-слот лого матча */
display: flex;
flex-direction: column;
gap: var(--s-5);
padding: var(--s-6);
background: var(--surface);
border: var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
font-variant-numeric: tabular-nums;
}
/* ============ Шапка: eyebrow + заголовок + прогресс ============ */
.cmq-head { display: flex; flex-direction: column; gap: var(--s-3); }
.cmq-head__top {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-3); flex-wrap: wrap;
}
.cmq-eyebrow {
font-size: var(--t-tiny); font-weight: var(--fw-semi);
letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
}
.cmq-title {
margin: 0;
font-family: var(--font-display); font-size: var(--t-h2);
font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text);
}
/* Счётчик шага (tabular-nums, не «прыгает») */
.cmq-step {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 4px;
padding: 2px var(--s-3);
font-size: var(--t-tiny); font-weight: var(--fw-semi);
letter-spacing: .04em; text-transform: uppercase;
color: var(--text-mute); background: var(--bg-2);
border-radius: var(--r-pill);
}
.cmq-step__n, .cmq-step__total { font-variant-numeric: tabular-nums; }
.cmq-step--done { color: var(--brand); background: var(--brand-soft); }
/* Прогресс — dataviz-мера (не точки): ширина = шаг/всего */
.cmq-progress {
height: var(--cmq-progress-h);
background: var(--bg-3);
border-radius: var(--r-pill);
overflow: hidden;
}
.cmq-progress__fill {
display: block; height: 100%; border-radius: inherit;
width: calc(clamp(0, var(--val, 25), 100) * 1%);
background: linear-gradient(90deg, var(--brand), var(--brand-2));
transition: width var(--dur-slow) var(--ease-out);
}
/* ============ Форма / шаги ============ */
.cmq-form { display: flex; flex-direction: column; gap: var(--s-5); margin: 0; border: none; padding: 0; }
/* Панель шага =