/* =============================================================================
DON CASINO RO — brand skin для форка gmb-univ-multi-v2-doncasino
-----------------------------------------------------------------------------
Подключается ПОСЛЕ /css/sfb-design.css (см. partials/head-additions.html).
Дизайн ОРИГИНАЛЬНЫЙ, от смысла имени: «Don» — обращение к хозяину заведения,
отсюда образ «салона/кабинета»: СВЕТЛАЯ кремовая бумага, глубокая зелень
сукна игрового стола, латунь и терракотовый CTA. Чужая графика/вордмарки не
копируются: логотип — собственный SVG (пика в ромбе + серифный вордмарк).
Намеренно НЕ похоже на эталон gmb-univ-multi-v2-mrbit (тёмный navy + cyan/
magenta, Space Grotesk/Manrope) и не повторяет соседний RO-форк vladcazino
(тёмный бордо + золото, Marcellus/Figtree).
Контраст считался, не «на глаз» (sRGB relative luminance, WCAG 2.x):
#FFFFFF на --dn-cta #A83A12 = 6.40:1
#FFFFFF на --dn-green #0E3D2A = 12.21:1
--dn-ink #14211B на бумаге #F5F1E6 = 14.73:1
--dn-green #0E3D2A на бумаге = 10.82:1
--dn-brass #7F6115 на бумаге = 5.14:1 (у #8A6A18 было 4.48 — ниже 4.5)
--dn-dim #4A5C51 на бумаге = 6.33:1
--dn-faint #5E6E63 на бумаге = 4.79:1
--dn-brass-lt #E8C87A на зелени = 7.54:1
SECTION MAP
00 Токены :root (перекрывают базовые sfb-токены → красит и внутренние)
01 Каркас / общее (.dn, .dn-wrap, кнопки, заголовки секций)
02 Хедер + zero-JS мобильное меню (≤720px)
03 Морда: hero-салон · сигилии · купон · карты-бонусы · столы · регистр
04 YMYL + FAQ + футер
05 Внутренние страницы (.dn-sheet: планка + БОКОВОЙ нумерованный индекс)
06 Перекраска inline pipeline-блоков .sfb-* внутри .dn-prose
07 Спойлер промо-кода (.sfb-code-spoiler)
08 Адаптив
============================================================================= */
/* =============================================================================
00 · ТОКЕНЫ
============================================================================= */
:root {
/* фирменные */
--dn-paper: #F5F1E6; /* фон страницы — кремовая бумага */
--dn-paper-2: #EFEADA; /* оттенённая полоса */
--dn-card: #FFFFFF; /* панели / карточки */
--dn-line: #DCD3BE; /* хайрлайн на бумаге */
--dn-line-2: #C4B896; /* акцентный хайрлайн */
--dn-green: #0E3D2A; /* сукно стола — основной бренд */
--dn-green-2: #12523A; /* осветлённое сукно */
--dn-green-dk: #092619;
--dn-green-lt: #1B6444;
--dn-brass: #7F6115; /* латунь — ТЕКСТОВЫЙ акцент */
--dn-brass-lt: #E8C87A; /* латунь-текст на зелёном */
--dn-gild: #C9A227; /* декоративная латунь (не текст) */
--dn-cta: #A83A12; /* терракота под белым текстом */
--dn-cta-dk: #8B2F0E;
--dn-ink: #14211B; /* основной текст */
--dn-dim: #4A5C51; /* вторичный текст */
--dn-faint: #5E6E63; /* подписи */
--dn-leaf: #1B6444; /* «да / проверено» */
/* базовые sfb-токены → бренд (перекрашивает внутренние через каскад) */
--accent: #0E3D2A;
--accent-ink: #1B6444;
--accent-tint: #E6EDE7;
--cta: #A83A12;
--cta-ink: #8B2F0E;
--success: #1B6444;
--success-tint:#E4F0E8;
--success-bd: #B7D4C2;
--warn: #7F6115;
--warn-tint: #F6EEDA;
--danger: #A83A12;
--ink: #14211B;
--body: #2C3B33;
--reading: #2C3B33;
--muted: #4A5C51;
--muted-2: #5E6E63;
--surface: #FFFFFF;
--surface-2: #EFEADA;
--border: #DCD3BE;
--border-soft: #E7E0CD;
--dark: #0E3D2A;
--dark-2: #092619;
--dark-hover: #1B6444;
--dark-muted: #C9D8CE;
--dark-faint: #A8BDB0;
--page-bg: #F5F1E6;
--cream: #EFEADA;
--cream-2: #F5F1E6;
--cream-bd: #DCD3BE;
--cream-bd-2: #C4B896;
--star: #C9A227;
--font-body: 'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-mono: 'Space Mono', ui-monospace, Menlo, Consolas, monospace;
--sh-cta: 0 6px 18px rgba(168,58,18,.22);
--sh-card: 0 10px 30px rgba(20,33,27,.10);
--sh-panel: 0 18px 44px rgba(20,33,27,.16);
--dn-r: 6px; /* намеренно «бумажный» малый радиус, не пилюли */
--dn-r-lg: 10px;
}
html { background: var(--dn-paper); }
body.sfb-body { background: var(--dn-paper); color: var(--body); font-family: var(--font-body); }
/* =============================================================================
01 · КАРКАС
============================================================================= */
.dn { color: var(--dn-ink); font-family: var(--font-body); }
.dn *, .dn *::before, .dn *::after { box-sizing: border-box; }
.dn-wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.dn h1, .dn h2, .dn h3, .dn h4 {
font-family: var(--font-head); color: var(--dn-ink); margin: 0;
font-weight: 600; letter-spacing: -.005em;
}
/* кнопки — прямоугольные с тонкой рамкой (не «пилюли» эталона) */
.dn-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5em;
background: var(--dn-cta); color: #fff; font-weight: 700; font-size: 15px;
padding: 13px 26px; border-radius: var(--dn-r); text-decoration: none;
border: 1px solid var(--dn-cta-dk); box-shadow: var(--sh-cta);
letter-spacing: .02em; line-height: 1.15; white-space: nowrap;
transition: background .14s ease, box-shadow .14s ease;
}
.dn-btn:hover { background: var(--dn-cta-dk); color: #fff; text-decoration: none; }
.dn-btn.sm { padding: 9px 16px; font-size: 13px; }
.dn-btn.lg { padding: 16px 34px; font-size: 16.5px; }
.dn-btn.ghost {
background: transparent; color: var(--dn-green); border: 1px solid var(--dn-green);
box-shadow: none;
}
.dn-btn.ghost:hover { background: var(--dn-green); color: #fff; }
/* заголовок секции: латунная линейка + серифный H2 по центру блока */
.dn-sec { padding: 62px 0; }
.dn-sec.tint { background: var(--dn-paper-2); border-block: 1px solid var(--dn-line); }
.dn-sec.baize { background: var(--dn-green); color: #fff; }
.dn-sec.baize h2, .dn-sec.baize h3 { color: #fff; }
/* На сукне тёмная латунь --dn-brass даёт 2.11:1 — надзаголовок нечитаем.
Светлая --dn-brass-lt на #0E3D2A = 7.54:1. */
.dn-sec.baize .dn-eyebrow { color: var(--dn-brass-lt); }
.dn-eyebrow {
display: block; font-family: var(--font-mono); font-size: 11px;
letter-spacing: .26em; text-transform: uppercase; color: var(--dn-brass);
margin-bottom: 10px;
}
.dn-h2 { font-size: clamp(26px, 3.3vw, 38px); line-height: 1.16; }
.dn-h2 + .dn-rule { margin-top: 14px; }
.dn-rule { width: 84px; height: 3px; background: var(--dn-gild); border-radius: 2px; }
.dn-intro { color: var(--dn-dim); font-size: 16.5px; line-height: 1.72; max-width: 72ch; margin: 16px 0 0; }
/* =============================================================================
02 · ХЕДЕР + ZERO-JS МОБИЛЬНОЕ МЕНЮ
============================================================================= */
.dn-top {
position: sticky; top: 0; z-index: 60;
background: var(--dn-paper);
border-bottom: 3px double var(--dn-line-2);
}
.dn-top .dn-wrap { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.dn-logo { height: 46px; width: auto; display: block; flex: none; }
.dn-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.dn-nav > a, .dn-cat > .dn-cat-t {
display: inline-flex; align-items: center; gap: 6px;
color: var(--dn-green); font-size: 14px; font-weight: 700; text-decoration: none;
padding: 10px 12px; border-radius: var(--dn-r); cursor: pointer; white-space: nowrap;
letter-spacing: .01em;
}
.dn-nav > a:hover, .dn-cat:hover > .dn-cat-t { background: var(--dn-paper-2); color: var(--dn-cta); text-decoration: none; }
.dn-cat { position: relative; }
.dn-cat > .dn-cat-t em { font-style: normal; font-size: 10px; color: var(--dn-faint); }
.dn-drop {
position: absolute; top: 100%; left: 0; min-width: 258px;
background: var(--dn-card); border: 1px solid var(--dn-line); border-top: 3px solid var(--dn-green);
border-radius: 0 0 var(--dn-r) var(--dn-r);
box-shadow: var(--sh-panel); padding: 8px; display: none; flex-direction: column;
}
.dn-drop.wide { display: none; min-width: 540px; }
.dn-cat:hover .dn-drop { display: flex; }
.dn-cat:hover .dn-drop.wide { display: grid; grid-template-columns: 1fr 1fr; max-height: 72vh; overflow: auto; }
.dn-drop a { color: var(--dn-dim); font-size: 14px; text-decoration: none; padding: 9px 12px; border-radius: 4px; }
.dn-drop a:hover { background: var(--dn-paper-2); color: var(--dn-green); text-decoration: none; }
.dn-top .dn-btn { flex: none; }
/* burger: zero-JS через скрытый checkbox */
.dn-burger { display: none; }
.dn-burger-l {
display: none; flex: none; width: 44px; height: 44px; border-radius: var(--dn-r);
border: 1px solid var(--dn-line-2); background: var(--dn-card); cursor: pointer;
align-items: center; justify-content: center; margin-left: auto;
}
.dn-burger-l span { display: block; width: 20px; height: 2px; background: var(--dn-green); position: relative; }
.dn-burger-l span::before, .dn-burger-l span::after {
content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--dn-green);
}
.dn-burger-l span::before { top: -6px; } .dn-burger-l span::after { top: 6px; }
/* =============================================================================
03 · МОРДА
============================================================================= */
/* — девиз-планка (зелёное сукно) — */
.dn-motto { background: var(--dn-green); color: #fff; }
.dn-motto .dn-wrap { display: flex; align-items: center; justify-content: center; gap: 34px; padding: 12px 0; flex-wrap: wrap; }
.dn-motto span {
font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--dn-brass-lt);
}
.dn-motto span b { color: #fff; font-weight: 700; }
/* — hero-салон: центрированная композиция (эталон — асимметричная сетка) — */
.dn-hero {
position: relative; overflow: hidden; text-align: center;
background:
repeating-linear-gradient(135deg, rgba(14,61,42,.035) 0 2px, transparent 2px 9px),
var(--dn-paper);
border-bottom: 1px solid var(--dn-line);
padding: 66px 0 58px;
}
.dn-kick {
display: inline-block; font-family: var(--font-mono); font-size: 11px;
letter-spacing: .28em; text-transform: uppercase; color: var(--dn-brass);
border-top: 1px solid var(--dn-line-2); border-bottom: 1px solid var(--dn-line-2);
padding: 7px 16px;
}
.dn-hero h1 { font-size: clamp(31px, 4.6vw, 54px); line-height: 1.06; margin: 22px auto 0; max-width: 19ch; }
.dn-sub { color: var(--dn-dim); font-size: 18px; line-height: 1.66; margin: 18px auto 0; max-width: 64ch; }
.dn-hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dn-hero-note { color: var(--dn-faint); font-size: 12.5px; margin: 18px auto 0; max-width: 74ch; }
/* — сигилии: 4 «печати» в ряд под hero — */
.dn-sigils { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; border: 1px solid var(--dn-line); background: var(--dn-card); }
.dn-sigil { padding: 22px 18px; border-left: 1px dashed var(--dn-line); }
.dn-sigil:first-child { border-left: 0; }
.dn-sigil b { display: block; font-family: var(--font-head); font-size: 28px; font-weight: 600; color: var(--dn-green); line-height: 1; }
.dn-sigil span { display: block; margin-top: 6px; color: var(--dn-faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono); }
/* — купон: широкий «билет» с перфорацией (эталон — карточка-терминал) — */
.dn-coupon {
display: grid; grid-template-columns: 1.25fr 1fr; align-items: stretch;
background: var(--dn-card); border: 1px solid var(--dn-line-2); border-radius: var(--dn-r-lg);
box-shadow: var(--sh-card); overflow: hidden; margin-top: 34px;
}
.dn-coupon .left { padding: 30px 32px; }
.dn-coupon .amt {
font-family: var(--font-head); font-size: clamp(30px, 4vw, 44px); font-weight: 600;
color: var(--dn-green); line-height: 1.04;
}
.dn-coupon .lab { color: var(--dn-brass); font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin-top: 10px; }
.dn-coupon ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.dn-coupon ul li { display: flex; gap: 10px; color: var(--dn-dim); font-size: 14.5px; line-height: 1.55; }
.dn-coupon ul li::before { content: "♠"; color: var(--dn-gild); flex: none; font-size: 12px; line-height: 1.7; }
.dn-coupon .stub {
position: relative; padding: 30px 30px; background: var(--dn-green); color: #fff;
display: flex; flex-direction: column; justify-content: center;
}
/* перфорация по стыку «корешка» */
.dn-coupon .stub::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
border-left: 2px dashed rgba(245,241,230,.5);
}
.dn-coupon .stub .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dn-brass-lt); }
.dn-coupon .stub .t { font-family: var(--font-head); font-size: 20px; margin-top: 8px; color: #fff; }
.dn-coupon .stub .dn-btn { width: 100%; margin-top: 18px; }
.dn-coupon .stub .rg { color: var(--dn-brass-lt); font-size: 11.5px; margin-top: 12px; }
/* спойлер промо-кода в купоне */
.dn-codebox { margin-top: 16px; border: 1px dashed var(--dn-brass-lt); border-radius: var(--dn-r); padding: 12px 14px; }
.dn-codebox .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dn-brass-lt); }
.dn-code {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 8px; text-decoration: none; color: #fff;
font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: .14em;
}
.dn-code:hover { text-decoration: none; color: #fff; }
.dn-code .v { filter: blur(5px); transition: filter .16s ease; user-select: none; }
.dn-code:hover .v, .dn-code:focus .v { filter: blur(0); }
.dn-code .go { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .1em; color: var(--dn-brass-lt); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
/* — бонусы как ИГРАЛЬНЫЕ КАРТЫ (эталон — нумерованные плиты во всю ширину) — */
.dn-hand { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.dn-card-b {
position: relative; background: var(--dn-card); border: 1px solid var(--dn-line-2);
border-radius: var(--dn-r-lg); padding: 26px 26px 24px; box-shadow: var(--sh-card);
display: flex; flex-direction: column;
}
.dn-card-b::before, .dn-card-b::after {
position: absolute; font-size: 15px; color: var(--dn-gild); line-height: 1; font-family: var(--font-mono);
}
.dn-card-b::before { content: attr(data-pip); top: 12px; left: 14px; }
.dn-card-b::after { content: attr(data-pip); bottom: 12px; right: 14px; transform: rotate(180deg); }
.dn-card-b h3 { font-size: 20px; margin-top: 6px; }
.dn-card-b .amt { color: var(--dn-cta); font-family: var(--font-mono); font-weight: 700; font-size: 15px; margin-top: 8px; }
.dn-card-b p { color: var(--dn-dim); font-size: 14.5px; line-height: 1.62; margin: 12px 0 0; }
.dn-card-b .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.dn-card-b .tags span {
font-size: 11.5px; color: var(--dn-green); background: var(--dn-paper-2);
border: 1px solid var(--dn-line); border-radius: 3px; padding: 4px 9px;
}
.dn-card-b .dn-btn { margin-top: 18px; align-self: flex-start; }
/* — столы: игры сеткой 3 в ряд (эталон — горизонтальные дорожки) — */
.dn-tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.dn-table-t {
background: rgba(255,255,255,.06); border: 1px solid rgba(232,200,122,.34);
border-radius: var(--dn-r-lg); padding: 22px 22px 20px;
}
.dn-table-t .ix {
width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid var(--dn-brass-lt); color: var(--dn-brass-lt);
font-family: var(--font-head); font-size: 18px; font-weight: 600;
}
.dn-table-t b { display: block; font-family: var(--font-head); font-size: 18px; color: #fff; margin-top: 14px; font-weight: 600; }
.dn-table-t span { display: block; color: #C9D8CE; font-size: 14px; line-height: 1.58; margin-top: 7px; }
/* — регистр платежей: строки с точечными выносками — */
.dn-ledger { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; margin-top: 32px; }
.dn-reg { border-top: 2px solid var(--dn-green); }
.dn-reg-row { display: grid; grid-template-columns: 1.2fr auto auto; gap: 14px; align-items: baseline; padding: 15px 2px; border-bottom: 1px dashed var(--dn-line-2); }
.dn-reg-row b { font-family: var(--font-head); font-size: 16px; color: var(--dn-ink); font-weight: 600; }
.dn-reg-row .typ { color: var(--dn-faint); font-size: 13px; }
.dn-reg-row .dur { color: var(--dn-cta); font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.dn-vouch { display: grid; gap: 0; align-content: start; counter-reset: dnv; border-top: 2px solid var(--dn-gild); }
.dn-vouch-i { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--dn-line); }
.dn-vouch-i::before {
counter-increment: dnv; content: counter(dnv, upper-roman);
font-family: var(--font-head); color: var(--dn-brass); font-size: 16px; font-weight: 600;
}
.dn-vouch-i b { display: block; font-family: var(--font-head); font-size: 15.5px; color: var(--dn-ink); font-weight: 600; }
.dn-vouch-i small { display: block; color: var(--dn-dim); font-size: 13.5px; line-height: 1.55; margin-top: 4px; }
/* — editorial: контейнер сгенерированного текста на морде — */
.dn-editorial { max-width: 80ch; margin-inline: auto; }
/* =============================================================================
04 · YMYL · FAQ · ФУТЕР
============================================================================= */
.dn-ymyl {
background: var(--dn-card); border: 1px solid var(--dn-line-2);
border-left: 5px solid var(--dn-cta); border-radius: var(--dn-r-lg); padding: 30px 32px;
}
.dn-ymyl h3 { display: flex; align-items: center; gap: 13px; font-size: 22px; }
.b18 {
display: inline-grid; place-items: center; min-width: 46px; height: 30px; padding: 0 9px;
border-radius: 4px; background: var(--dn-cta); color: #fff;
font-family: var(--font-mono); font-weight: 700; font-size: 14px;
}
.dn-ymyl p { color: var(--dn-dim); font-size: 15px; line-height: 1.72; margin: 14px 0 0; max-width: 84ch; }
.dn-ymyl .tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 22px; border: 1px solid var(--dn-line); }
.dn-ymyl .tool { padding: 15px 16px; border-left: 1px dashed var(--dn-line); }
.dn-ymyl .tool:first-child { border-left: 0; }
.dn-ymyl .tool b { display: block; font-family: var(--font-head); color: var(--dn-green); font-size: 15px; font-weight: 600; }
.dn-ymyl .tool span { display: block; color: var(--dn-faint); font-size: 12.5px; line-height: 1.5; margin-top: 4px; }
.dn-ymyl .help { font-size: 14px; }
.dn-ymyl .help a { color: var(--dn-cta); }
.dn-faq { margin-top: 28px; border-top: 1px solid var(--dn-line-2); }
.dn-faq details { border-bottom: 1px solid var(--dn-line); background: transparent; }
.dn-faq summary {
cursor: pointer; list-style: none; padding: 18px 44px 18px 0; position: relative;
font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--dn-ink);
}
.dn-faq summary::-webkit-details-marker { display: none; }
.dn-faq summary::after {
content: "+"; position: absolute; right: 8px; top: 15px; font-family: var(--font-mono);
font-size: 20px; color: var(--dn-brass); line-height: 1;
}
.dn-faq details[open] summary::after { content: "–"; }
.dn-faq details[open] summary { color: var(--dn-green); }
.dn-faq details p { color: var(--dn-dim); font-size: 14.5px; line-height: 1.72; margin: 0; padding: 0 44px 20px 0; }
.dn-agebar { background: var(--dn-paper-2); border-top: 1px solid var(--dn-line-2); }
.dn-agebar .dn-wrap { display: flex; align-items: center; gap: 16px; padding: 15px 0; flex-wrap: wrap; }
.dn-agebar span:not(.b18) { color: var(--dn-dim); font-size: 13.5px; line-height: 1.6; }
.dn-agebar .b18 { color: #fff; }
.dn-agebar a { color: var(--dn-cta); }
.dn-foot { background: var(--dn-green-dk); border-top: 4px solid var(--dn-gild); padding: 46px 0 30px; }
.dn-foot .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.dn-foot .logo { height: 44px; margin-bottom: 14px; }
.dn-foot p { color: #A8BDB0; font-size: 13.5px; line-height: 1.66; max-width: 38ch; margin: 0; }
.dn-foot .fh {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--dn-brass-lt); margin-bottom: 12px;
}
.dn-foot a { display: block; color: #C9D8CE; font-size: 13.5px; text-decoration: none; padding: 5px 0; }
.dn-foot a:hover { color: var(--dn-brass-lt); }
.dn-foot .fine {
margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(232,200,122,.26);
color: #A8BDB0; font-size: 12.5px; line-height: 1.62;
}
/* =============================================================================
05 · ВНУТРЕННИЕ СТРАНИЦЫ (.dn-sheet)
Скелет намеренно ДРУГОЙ и относительно базы (.page-wrap/.reading/.rail —
таких классов в форке нет вовсе), и относительно эталона mrbit (там hero-band
+ ГОРИЗОНТАЛЬНЫЙ chapter-bar и одна колонка): здесь светлая планка-«шапка
досье» + ДВЕ колонки с БОКОВЫМ липким нумерованным индексом слева.
============================================================================= */
.dn-page { background: var(--dn-paper); }
.dn-plate {
background: var(--dn-paper-2);
border-bottom: 3px double var(--dn-line-2);
padding: 28px 0 30px;
}
.dn-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dn-faint); }
.dn-crumbs a { color: var(--dn-dim); text-decoration: none; }
.dn-crumbs a:hover { color: var(--dn-cta); }
.dn-crumbs .sep { color: var(--dn-line-2); }
.dn-crumbs .cur { color: var(--dn-green); font-weight: 700; }
.dn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.dn-chip {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--dn-dim); border: 1px solid var(--dn-line-2); background: var(--dn-card);
border-radius: 3px; padding: 5px 10px;
}
.dn-chip.ok { color: var(--dn-leaf); border-color: #B7D4C2; }
.dn-chip.age { color: #fff; background: var(--dn-cta); border-color: var(--dn-cta-dk); }
.dn-plate h1 { font-size: clamp(28px, 3.9vw, 44px); line-height: 1.12; margin: 16px 0 0; max-width: 28ch; }
.dn-artilead { color: var(--dn-dim); font-size: 17px; line-height: 1.66; margin: 14px 0 0; max-width: 74ch; }
.dn-artimeta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.dn-by { display: inline-flex; align-items: center; gap: 9px; color: var(--dn-dim); font-size: 13.5px; }
.dn-by .av {
width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
background: var(--dn-green); color: var(--dn-brass-lt);
font-family: var(--font-head); font-weight: 600; font-size: 14px;
}
/* полоса-оффер под планкой (со спойлером кода) — на зелёном сукне */
.dn-offerstrip {
display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
background: var(--dn-green); border-radius: var(--dn-r-lg); padding: 18px 24px; margin: 24px 0 0;
}
.dn-offerstrip .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dn-brass-lt); }
.dn-offerstrip .t { font-family: var(--font-head); font-size: 18px; color: #fff; margin-top: 4px; }
.dn-offerstrip .m { color: #A8BDB0; font-size: 12.5px; margin-top: 4px; }
.dn-offerstrip .dn-codebox { margin: 0; }
/* тело: две колонки — липкий индекс слева, текст справа */
.dn-sheet { padding: 34px 0 62px; }
.dn-sheet .dn-wrap { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 46px; align-items: start; }
.dn-index { position: sticky; top: 96px; border-top: 2px solid var(--dn-green); padding-top: 14px; }
.dn-index .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dn-brass); }
.dn-index ol { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: dnx; }
.dn-index ol li { counter-increment: dnx; }
/* Селекторы нумерации ТОЛЬКО внутри ol: иначе под них попадала и кнопка
.side-cta (она тоже внутри .dn-index) — получала grid-раскладку и
счётчик «03» вместо ровной надписи. */
.dn-index ol a {
display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline;
color: var(--dn-dim); font-size: 13.5px; line-height: 1.45; text-decoration: none;
padding: 8px 0; border-bottom: 1px dashed var(--dn-line);
}
.dn-index ol a::before { content: counter(dnx, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--dn-gild); }
.dn-index ol a:hover { color: var(--dn-cta); text-decoration: none; }
.dn-index .side-cta { margin-top: 20px; display: inline-flex; width: 100%; }
/* типографика статьи */
.dn-prose { color: var(--reading); font-size: 17px; line-height: 1.76; max-width: 74ch; }
.dn-prose > h2 {
font-family: var(--font-head); font-size: clamp(23px, 2.6vw, 30px); color: var(--dn-ink);
margin: 46px 0 14px; line-height: 1.2; padding-bottom: 10px;
border-bottom: 2px solid var(--dn-gild);
}
.dn-prose > h3 { font-family: var(--font-head); font-size: 21px; color: var(--dn-green); margin: 30px 0 10px; }
.dn-prose p { margin: 0 0 18px; }
/* буквица у первого абзаца — «бумажная» подача, у эталона её нет */
.dn-prose > p:first-of-type::first-letter {
float: left; font-family: var(--font-head); font-size: 3.4em; line-height: .84;
color: var(--dn-green); padding: .06em .12em 0 0; font-weight: 600;
}
.dn-prose a { color: var(--dn-cta); text-decoration: underline; text-underline-offset: 3px; }
.dn-prose ul, .dn-prose ol { margin: 0 0 20px; padding-left: 22px; }
.dn-prose li { margin: 7px 0; }
.dn-prose ul li::marker { color: var(--dn-gild); }
.dn-prose ol li::marker { color: var(--dn-green); font-family: var(--font-mono); font-weight: 700; }
.dn-prose blockquote {
margin: 24px 0; padding: 18px 22px; border-left: 3px solid var(--dn-gild);
background: var(--dn-paper-2); border-radius: 0 var(--dn-r) var(--dn-r) 0; color: var(--dn-dim);
}
.dn-prose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14.5px; }
.dn-prose th {
background: var(--dn-green); color: #fff; font-family: var(--font-mono);
font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 12px 14px;
}
.dn-prose td { padding: 12px 14px; border-bottom: 1px solid var(--dn-line); color: var(--dn-dim); }
.dn-prose tr:nth-child(even) td { background: var(--dn-paper-2); }
.dn-block { margin: 26px 0; }
.dn-block-cta { margin-top: 14px; }
.dn-rgline {
display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
background: var(--dn-card); border: 1px solid var(--dn-line-2); border-left: 5px solid var(--dn-cta);
border-radius: var(--dn-r); padding: 18px 20px; margin: 34px 0 0;
}
.dn-rgline p { color: var(--dn-dim); font-size: 14px; line-height: 1.66; margin: 0; }
.dn-rgline a { color: var(--dn-cta); }
.dn-disclosure { color: var(--dn-faint); font-size: 12.5px; line-height: 1.62; margin: 16px 0 0; }
.dn-related { margin-top: 38px; }
.dn-related__h {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--dn-brass); margin-bottom: 12px;
}
.dn-rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dn-rcard {
display: block; padding: 16px 18px; border: 1px solid var(--dn-line);
border-top: 3px solid var(--dn-green); border-radius: 0 0 var(--dn-r) var(--dn-r);
background: var(--dn-card); text-decoration: none;
}
.dn-rcard:hover { border-color: var(--dn-line-2); border-top-color: var(--dn-cta); text-decoration: none; }
.dn-rcard .t { display: block; color: var(--dn-ink); font-family: var(--font-head); font-size: 15.5px; font-weight: 600; }
.dn-rcard .tag { display: block; margin-top: 6px; color: var(--dn-faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
/* =============================================================================
06 · INLINE PIPELINE-БЛОКИ .sfb-* внутри .dn-prose / .dn-editorial
(в .Content их вставляет генератор; базовый sfb-design.css красит их по-своему)
============================================================================= */
.dn-prose .sfb-cta, .dn-editorial .sfb-cta,
.dn-prose .sfb-card, .dn-editorial .sfb-card,
.dn-prose .sfb-slot, .dn-editorial .sfb-slot,
.dn-prose .sfb-table, .dn-editorial .sfb-table,
.dn-prose .sfb-faq, .dn-editorial .sfb-faq,
.dn-prose .sfb-rg, .dn-editorial .sfb-rg {
background: var(--dn-card) !important; border-color: var(--dn-line-2) !important;
color: var(--dn-dim) !important; border-radius: var(--dn-r) !important;
}
.dn-prose .sfb-cta a, .dn-editorial .sfb-cta a,
.dn-prose .sfb-slot a.button, .dn-editorial .sfb-slot a.button {
background: var(--dn-cta) !important; color: #fff !important; border: 1px solid var(--dn-cta-dk) !important;
box-shadow: var(--sh-cta) !important; border-radius: var(--dn-r) !important;
}
.dn-prose .sfb-slots, .dn-editorial .sfb-slots { background: transparent !important; }
.dn-prose .sfb-faq summary, .dn-editorial .sfb-faq summary { color: var(--dn-ink) !important; }
.dn-prose .sfb-table th, .dn-editorial .sfb-table th { background: var(--dn-green) !important; color: #fff !important; }
/* =============================================================================
07 · СПОЙЛЕР ПРОМО-КОДА — клик = переход по CTA
============================================================================= */
.sfb-code-spoiler {
display: inline-flex; align-items: center; gap: .45em; padding: .3em .9em;
border: 1px dashed var(--dn-brass); border-radius: var(--dn-r); color: var(--dn-brass);
font-weight: 700; font-size: .92em; cursor: pointer; text-decoration: none;
line-height: 1.2; white-space: nowrap; background: #F6EEDA;
}
.sfb-code-spoiler::before { content: "♠"; font-size: .95em; }
.sfb-code-spoiler:hover { background: #EFE2C2; text-decoration: none; color: var(--dn-brass); }
/* =============================================================================
08 · АДАПТИВ
============================================================================= */
@media (max-width: 1080px) {
.dn-coupon { grid-template-columns: 1fr; }
.dn-coupon .stub::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 0; border-left: 0; border-top: 2px dashed rgba(245,241,230,.5); }
.dn-hand { grid-template-columns: 1fr; }
.dn-tables { grid-template-columns: repeat(2, 1fr); }
.dn-ledger { grid-template-columns: 1fr; }
.dn-sigils { grid-template-columns: repeat(2, 1fr); }
.dn-sigil:nth-child(3) { border-left: 0; }
.dn-ymyl .tools { grid-template-columns: repeat(2, 1fr); }
.dn-foot .cols { grid-template-columns: 1fr 1fr; }
.dn-sheet .dn-wrap { grid-template-columns: 1fr; gap: 26px; }
.dn-index { position: static; }
.dn-index ol { columns: 2; column-gap: 26px; }
}
@media (max-width: 720px) {
.dn-wrap { width: min(1180px, 100% - 26px); }
/* мобильное меню: burger виден, nav — НЕПРОЗРАЧНАЯ панель на бумаге */
.dn-burger-l { display: inline-flex; }
.dn-top .dn-wrap { flex-wrap: wrap; min-height: 62px; row-gap: 0; gap: 8px; }
.dn-logo { height: 34px; }
.dn-top .dn-btn { order: 2; margin-left: auto; padding: 9px 14px; font-size: 13px; }
.dn-burger-l { order: 3; margin-left: 0; width: 42px; height: 42px; }
.dn-nav {
order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch;
gap: 2px; margin: 0 0 12px; padding: 12px; border-radius: var(--dn-r);
background: var(--dn-card);
border: 1px solid var(--dn-line-2); box-shadow: var(--sh-panel);
max-height: 74vh; overflow-y: auto;
}
.dn-burger:checked ~ .dn-nav { display: flex; }
.dn-nav > a, .dn-cat > .dn-cat-t { padding: 12px 14px; font-size: 15px; }
.dn-cat { position: static; }
.dn-drop, .dn-drop.wide {
position: static; display: flex !important; grid-template-columns: 1fr !important;
box-shadow: none; border: 0; border-left: 2px solid var(--dn-line); border-radius: 0;
background: transparent; padding: 0 0 6px 14px; margin-left: 14px; min-width: 0; max-height: none;
}
.dn-sec { padding: 44px 0; }
.dn-hero { padding: 46px 0 42px; }
.dn-tables { grid-template-columns: 1fr; }
.dn-reg-row { grid-template-columns: 1fr; gap: 3px; }
.dn-ymyl { padding: 24px 20px; }
.dn-ymyl .tools { grid-template-columns: 1fr; }
.dn-ymyl .tool { border-left: 0; border-top: 1px dashed var(--dn-line); }
.dn-ymyl .tool:first-child { border-top: 0; }
.dn-foot .cols { grid-template-columns: 1fr; gap: 24px; }
.dn-offerstrip { grid-template-columns: 1fr; gap: 14px; }
.dn-offerstrip .dn-btn { width: 100%; }
.dn-coupon .left, .dn-coupon .stub { padding: 24px 20px; }
.dn-index ol { columns: 1; }
.dn-prose > p:first-of-type::first-letter { font-size: 3em; }
}
@media (max-width: 460px) {
.dn-sigils { grid-template-columns: 1fr; }
.dn-sigil { border-left: 0; border-top: 1px dashed var(--dn-line); }
.dn-sigil:first-child { border-top: 0; }
.dn-hand { grid-template-columns: 1fr; }
}
/* =============================================================================
MARKDOWN-ТАБЛИЦЫ + ДОБОР ПЕРЕКРАСКИ .sfb-* (2026-08-06)
Перенос правок, отлаженных на теме mrbit (mrbit-brand.css, блоки 06/07).
Построено на БАЗОВЫХ sfb-токенах, которые эта тема переопределяет под себя,
→ одна заготовка корректна и на тёмных, и на светлых темах.
============================================================================= */
.dn-prose,
.dn-editorial {
--sfbx-bg: var(--surface);
--sfbx-bg-2: var(--surface-2);
--sfbx-line: var(--border);
--sfbx-line-2: var(--border-soft);
--sfbx-tx: var(--reading);
--sfbx-strong: var(--ink);
--sfbx-mut: var(--muted);
--sfbx-faint: var(--muted-2);
--sfbx-acc: var(--accent);
--sfbx-acc-bg: var(--accent-tint);
--sfbx-acc-dk: var(--accent-ink);
}
/* ---- (а) таблицы из markdown -----------------------------------------------
Приходят голым без обёртки .sfb-table (её ставит только blockify),
поэтому под правила sfb-design.css не попадали и рисовались браузерным
дефолтом. Скоуп — ПРЯМОЙ потомок, чтобы не конфликтовать с `.sfb-table table`
(одинаковая специфичность, выигрывает то, что ниже по файлу). */
.dn-prose > table,
.dn-editorial > table {
display: block; /* даёт горизонтальный скролл на узких экранах */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
border-collapse: collapse;
margin: 26px 0;
font-size: 15px;
line-height: 1.5;
background: var(--sfbx-bg);
border: 1px solid var(--sfbx-line);
border-radius: var(--r-md, 9px);
color: var(--sfbx-tx);
}
.dn-prose > table thead th,
.dn-editorial > table thead th {
text-align: left;
font-family: var(--font-head, inherit);
font-weight: 700;
font-size: 13.5px;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--sfbx-acc);
background: var(--sfbx-acc-bg);
padding: 12px 16px;
border-bottom: 1px solid var(--sfbx-line);
white-space: nowrap;
}
.dn-prose > table td,
.dn-editorial > table td {
padding: 12px 16px;
border-bottom: 1px solid var(--sfbx-line-2);
vertical-align: top;
color: var(--sfbx-tx);
}
.dn-prose > table tbody tr:last-child td,
.dn-editorial > table tbody tr:last-child td { border-bottom: 0; }
.dn-prose > table tbody tr:nth-child(even),
.dn-editorial > table tbody tr:nth-child(even) { background: var(--sfbx-bg-2); }
.dn-prose > table tbody tr:hover,
.dn-editorial > table tbody tr:hover { background: var(--sfbx-acc-bg); }
.dn-prose > table td:first-child,
.dn-editorial > table td:first-child { color: var(--sfbx-strong); font-weight: 600; }
.dn-prose > table td strong,
.dn-editorial > table td strong { color: var(--sfbx-acc); font-weight: 700; }
.dn-prose > table caption,
.dn-editorial > table caption {
caption-side: top; text-align: left;
padding: 0 0 10px; color: var(--sfbx-faint); font-size: 14px;
}
/* ---- (б) добор: .sfb-* блоки, которые перекраска выше не покрывала ----------
В sfb-design.css у них зашиты светлые константы (#fff, #eef1f6, #c2cad6,
#5a4413 …), а блок 06 темы перечисляет лишь cta/card/slot/table/faq/rg —
и то ТОЛЬКО на уровне контейнера. Ниже — то, что оставалось светлым.
Фактический список классов снят с живых страниц (mrbit-bg-casino.com,
nv-casino-igri.com, casino-stake-bg.com … /bonusi/, /registraciya/). */
/* .sfb-faq красится только как КОНТЕЙНЕР, карточки .sfb-faq details держат
`background:#fff` из sfb-design.css:625 → светлые плашки. */
.dn-prose .sfb-faq details,
.dn-editorial .sfb-faq details {
background: var(--sfbx-bg-2) !important;
border-color: var(--sfbx-line) !important;
}
.dn-prose .sfb-faq details[open],
.dn-editorial .sfb-faq details[open] { border-color: var(--sfbx-acc-dk) !important; }
.dn-prose .sfb-faq summary,
.dn-editorial .sfb-faq summary { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-faq summary::after,
.dn-editorial .sfb-faq summary::after { color: var(--sfbx-acc) !important; }
.dn-prose .sfb-faq p,
.dn-editorial .sfb-faq p { color: var(--sfbx-mut) !important; }
/* FAQ шире 640px базового лимита — на внутренних колонка позволяет */
.dn-prose .sfb-faq,
.dn-editorial .sfb-faq { max-width: none !important; }
/* .sfb-license (sfb-design.css:870) — в списке перекраски не значился вовсе. */
.dn-prose .sfb-license,
.dn-editorial .sfb-license {
background: var(--sfbx-bg) !important;
border-color: var(--sfbx-line) !important;
color: var(--sfbx-mut) !important;
}
.dn-prose .sfb-license__badge,
.dn-editorial .sfb-license__badge {
background: var(--sfbx-acc-bg) !important;
border-color: var(--sfbx-acc-dk) !important;
color: var(--sfbx-acc) !important;
}
.dn-prose .sfb-license__name,
.dn-editorial .sfb-license__name { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-license__num,
.dn-editorial .sfb-license__num { color: var(--sfbx-faint) !important; }
.dn-prose .sfb-license__foot,
.dn-editorial .sfb-license__foot { border-top-color: var(--sfbx-line-2) !important; }
.dn-prose .sfb-license__foot span,
.dn-editorial .sfb-license__foot span { color: var(--sfbx-mut) !important; }
.dn-prose .sfb-license__foot strong,
.dn-editorial .sfb-license__foot strong { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-license a,
.dn-editorial .sfb-license a { color: var(--sfbx-acc) !important; }
/* .sfb-bonus (sfb-design.css:747) — background:#fff; __logo красится
`background:var(--ink); color:#fff` → на тёмной теме --ink светлый и
белый текст пропадает. Ставим акцент+поверхность: работает в обе стороны. */
.dn-prose .sfb-bonus,
.dn-editorial .sfb-bonus {
background: var(--sfbx-bg) !important;
border-color: var(--sfbx-line) !important;
color: var(--sfbx-tx) !important;
}
.dn-prose .sfb-bonus__head,
.dn-editorial .sfb-bonus__head {
background: linear-gradient(120deg, var(--cream, var(--sfbx-bg-2)), var(--cream-2, var(--sfbx-bg))) !important;
border-bottom-color: var(--sfbx-line) !important;
}
.dn-prose .sfb-bonus__value,
.dn-editorial .sfb-bonus__value { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-bonus__logo,
.dn-editorial .sfb-bonus__logo { background: var(--sfbx-acc) !important; color: var(--sfbx-bg) !important; }
.dn-prose .sfb-bonus__grid span,
.dn-editorial .sfb-bonus__grid span { color: var(--sfbx-mut) !important; }
.dn-prose .sfb-bonus__grid strong,
.dn-editorial .sfb-bonus__grid strong { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-bonus__row > span,
.dn-editorial .sfb-bonus__row > span { color: var(--sfbx-mut) !important; }
.dn-prose .sfb-bonus__fine,
.dn-editorial .sfb-bonus__fine { color: var(--sfbx-faint) !important; }
/* промокод-чип: `border: 1.5px dashed #c2cad6` — холодный светлый хайрлайн */
.dn-prose .sfb-code,
.dn-editorial .sfb-code,
.dn-prose .sfb-bonus code,
.dn-editorial .sfb-bonus code {
background: var(--sfbx-bg-2) !important;
border-color: var(--sfbx-acc-dk) !important;
color: var(--sfbx-strong) !important;
}
/* .sfb-voucher__mask — светлая полосатая заливка #f4f6fa/#eef1f7 и текст #9aa6b6 */
.dn-prose .sfb-voucher__mask,
.dn-editorial .sfb-voucher__mask {
background: repeating-linear-gradient(45deg,
var(--sfbx-bg-2), var(--sfbx-bg-2) 6px,
var(--sfbx-bg) 6px, var(--sfbx-bg) 12px) !important;
color: var(--sfbx-faint) !important;
}
.dn-prose .sfb-voucher__tag,
.dn-editorial .sfb-voucher__tag { background: var(--cream, var(--sfbx-bg-2)) !important; }
/* .sfb-safety (sfb-design.css:838) — background:#fff, gauge-inner #fff,
track #eef1f6, barhead #3a4656 */
.dn-prose .sfb-safety,
.dn-editorial .sfb-safety {
background: var(--sfbx-bg) !important;
border-color: var(--sfbx-line) !important;
}
.dn-prose .sfb-safety__gauge-inner,
.dn-editorial .sfb-safety__gauge-inner { background: var(--sfbx-bg) !important; }
.dn-prose .sfb-safety__score,
.dn-editorial .sfb-safety__score { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-safety__max,
.dn-editorial .sfb-safety__max { color: var(--sfbx-faint) !important; }
.dn-prose .sfb-safety__desc,
.dn-editorial .sfb-safety__desc { color: var(--sfbx-mut) !important; }
.dn-prose .sfb-safety__barhead,
.dn-editorial .sfb-safety__barhead { color: var(--sfbx-mut) !important; }
.dn-prose .sfb-safety__track,
.dn-editorial .sfb-safety__track { background: var(--sfbx-bg-2) !important; }
/* .sfb-compare (sfb-design.css:895) — background:#fff, is-pick #fffaf5 */
.dn-prose .sfb-compare,
.dn-editorial .sfb-compare {
background: var(--sfbx-bg) !important;
border-color: var(--sfbx-line) !important;
}
.dn-prose .sfb-compare table,
.dn-editorial .sfb-compare table { color: var(--sfbx-tx) !important; }
.dn-prose .sfb-compare thead th,
.dn-editorial .sfb-compare thead th { color: var(--sfbx-mut) !important; border-bottom-color: var(--sfbx-line) !important; }
.dn-prose .sfb-compare thead th.is-pick,
.dn-editorial .sfb-compare thead th.is-pick { background: var(--sfbx-acc-bg) !important; color: var(--sfbx-strong) !important; }
.dn-prose .sfb-compare td,
.dn-editorial .sfb-compare td { border-bottom-color: var(--sfbx-line-2) !important; }
.dn-prose .sfb-compare td:first-child,
.dn-editorial .sfb-compare td:first-child { color: var(--sfbx-mut) !important; }
.dn-prose .sfb-compare td.is-pick,
.dn-editorial .sfb-compare td.is-pick { background: var(--sfbx-bg-2) !important; }
/* .sfb-contact__card (sfb-design.css:930) — background:#fff, hover #cdd6e3;
иконка --tg зашита светло-голубой #eaf4fb */
.dn-prose .sfb-contact__card,
.dn-editorial .sfb-contact__card {
background: var(--sfbx-bg) !important;
border-color: var(--sfbx-line) !important;
}
.dn-prose .sfb-contact__card:hover,
.dn-editorial .sfb-contact__card:hover { border-color: var(--sfbx-acc) !important; }
.dn-prose .sfb-contact__icon--tg,
.dn-editorial .sfb-contact__icon--tg { background: var(--sfbx-acc-bg) !important; color: var(--sfbx-acc) !important; }
.dn-prose .sfb-contact__title,
.dn-editorial .sfb-contact__title { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-contact__sub,
.dn-editorial .sfb-contact__sub { color: var(--sfbx-mut) !important; }
/* .sfb-logos__chip / .sfb-author / .sfb-feat / .sfb-steps li / .sfb-game —
все с `background:#fff` (sfb-design.css:958, 966, 1023, 1037, 1053). */
.dn-prose .sfb-logos__chip,
.dn-editorial .sfb-logos__chip {
background: var(--sfbx-bg) !important;
border-color: var(--sfbx-line) !important;
color: var(--sfbx-strong) !important;
}
.dn-prose .sfb-author,
.dn-editorial .sfb-author {
background: var(--sfbx-bg) !important;
border-color: var(--sfbx-line) !important;
}
/* аватар: во втором стопе градиента зашит синий #1b4f9e */
.dn-prose .sfb-author__avatar,
.dn-editorial .sfb-author__avatar {
background: linear-gradient(135deg, var(--sfbx-acc), var(--sfbx-acc-dk)) !important;
}
.dn-prose .sfb-author__name,
.dn-editorial .sfb-author__name { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-author__role,
.dn-editorial .sfb-author__role { color: var(--sfbx-mut) !important; }
.dn-prose .sfb-author__date,
.dn-editorial .sfb-author__date { color: var(--sfbx-faint) !important; }
.dn-prose .sfb-author__quote,
.dn-editorial .sfb-author__quote { color: var(--sfbx-tx) !important; border-left-color: var(--sfbx-acc) !important; }
.dn-prose .sfb-feat,
.dn-editorial .sfb-feat {
background: var(--sfbx-bg) !important;
border-color: var(--sfbx-line) !important;
}
.dn-prose .sfb-feat__title,
.dn-editorial .sfb-feat__title { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-feat__desc,
.dn-editorial .sfb-feat__desc { color: var(--sfbx-mut) !important; }
.dn-prose .sfb-steps li,
.dn-editorial .sfb-steps li {
background: var(--sfbx-bg) !important;
border-color: var(--sfbx-line) !important;
color: var(--sfbx-strong) !important;
}
.dn-prose .sfb-steps__n,
.dn-editorial .sfb-steps__n { background: var(--sfbx-acc-bg) !important; color: var(--sfbx-acc) !important; }
.dn-prose .sfb-game,
.dn-editorial .sfb-game {
background: var(--sfbx-bg) !important;
border-color: var(--sfbx-line) !important;
}
.dn-prose .sfb-game__title,
.dn-editorial .sfb-game__title { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-game__meta,
.dn-editorial .sfb-game__meta { color: var(--sfbx-mut) !important; }
/* .sfb-rg: контейнер блок 06 красит, но текст внутри зашит коричневым
(#5a4413 / #3d2d08, sfb-design.css:654-655). */
.dn-prose .sfb-rg p,
.dn-editorial .sfb-rg p { color: var(--sfbx-mut) !important; }
.dn-prose .sfb-rg strong,
.dn-editorial .sfb-rg strong { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-cta__note,
.dn-editorial .sfb-cta__note { color: var(--sfbx-faint) !important; }
/* .sfb-bc .sep — chevron зашит #c2cad6; .sfb-stars — пустые звёзды #dfe4ec */
.dn-prose .sfb-bc .sep,
.dn-editorial .sfb-bc .sep { color: var(--sfbx-faint) !important; }
.dn-prose .sfb-bc [aria-current="page"],
.dn-editorial .sfb-bc [aria-current="page"] { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-stars,
.dn-editorial .sfb-stars { color: var(--sfbx-line) !important; }
.dn-prose .sfb-rating__num,
.dn-editorial .sfb-rating__num { color: var(--sfbx-strong) !important; }
.dn-prose .sfb-rating__max,
.dn-editorial .sfb-rating__max { color: var(--sfbx-mut) !important; }
/* .sfb-card__icon — рамка зашита #d4e2fb */
.dn-prose .sfb-card__icon,
.dn-editorial .sfb-card__icon {
background: var(--sfbx-acc-bg) !important;
border-color: var(--sfbx-acc-dk) !important;
color: var(--sfbx-acc) !important;
}