/* ============================================================================ * skins.css - ВИЗУАЛЬНЫЕ СКИНЫ (Layer-2 overrides поверх tokens.css) * Подключать ПОСЛЕ tokens.css. Переключение: . * * Скин меняет ТОЛЬКО семантические токены (цвет/шрифты/тени) - структура * блоков и примитивы (spacing/type/radius) не трогаются. Это даёт «4 проекта * на одном движке, но не на одно лицо» без дублирования кода. * * editorial-light - ДЕФОЛТ (значения в tokens.css :root). Тёплая бумага, * глубокий ink, золото. Под: обзоры казино, досье, гайды, блог. * midnight-crypto - тёмный премиум-гейминг (Midnight Galaxy + Tech Innovation). * Под: крипто/web3, краш, premium-dark. * clean-trust - холодный navy/teal на белом (Ocean Depths / Arctic Frost). * Под: рейтинги/сравнения, no-KYC, trust-hubs. * vibrant-slots - энергичный тёплый (Sunset Boulevard). Под: слоты, бонусы, промо. * * v1 палитры - выверены на контраст, но допускают тюнинг после premium-дайджеста ресёрча. * * ТЁМНАЯ ТЕМА (31.08.2026). Канон один: html[data-mode="dark"] ПОВЕРХ светлой базы. * Атрибут ставит app.js (часть 4) + анти-мигание в head layout.php; CSS сам решений * не принимает, media-запроса prefers-color-scheme здесь нет намеренно - дефолт по * системной теме выбирает тот же инлайн-скрипт, и источник решения один. * midnight-crypto тёмный ПО ПРИРОДЕ: его dark-вариант тождествен базе (пустое * правило ниже), кнопка темы на нём честно ничего не меняет. * ========================================================================== */ /* ============================ ШРИФТЫ (self-hosted) ============================ * * Правило дома: библиотек и CDN на сайте нет - все файлы лежат в assets/fonts/. * @font-face собраны ЗДЕСЬ, а не в tokens.css, намеренно: пары display+body - * собственность скинов (стеки объявляют tokens.css для дефолта и блоки ниже для * остальных), и один закрытый список рядом с ними проверяется сетевым замером в * один взгляд. Браузер качает ТОЛЬКО те face, чьи семейства реально использованы * активным скином, - файлы «чужих» скинов на диске законны и на вес страницы не * влияют (замер 31.08.2026, network: страница editorial-light тянет literata+inter, * jetbrains-mono - только при на странице; unbounded/manrope/onest не * запрашиваются вовсе, пока их скин не активен). * * САБСЕТЫ РАЗДЕЛЬНО (latin/cyrillic + unicode-range): страница на одном языке * не качает чужой алфавит. Диапазоны - фактические из ответа Google Fonts CSS API. * ВЕСА: каждый файл - variable-шрифт, ось wght покрывает 400-700 (проверено * fontTools по fvar; API с Chrome-UA отдаёт ОДИН файл на оба веса - сверено * md5-хешами). Поэтому face на сабсет один, font-weight диапазоном; h4 с весом 600 * рендерится настоящим полужирным, а не синтетикой. * * КИРИЛЛИЦА ПРОВЕРЕНА ФАКТОМ (Google Fonts CSS API, 31.08.2026), не памятью. * Замены шрифтов без кириллицы - характер тот же, кириллица есть: * Newsreader (нет cyrillic) -> Literata (editorial-serif чтения) * Space Grotesk, Sora (нет cyrillic) -> Unbounded (техно-дисплей, крипто-характер) * Sora, Poppins (нет cyrillic) -> Onest (дружелюбный геометрический гротеск) * Manrope, Inter, JetBrains Mono - кириллицу несут сами, оставлены как есть. */ /* Literata - display скина editorial-light */ @font-face { font-family: "Literata"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/literata-latin-400-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Literata"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/literata-cyrillic-400-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Unbounded - display скина midnight-crypto */ @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/unbounded-latin-400-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/unbounded-cyrillic-400-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Manrope - display скина clean-trust */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/manrope-latin-400-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/manrope-cyrillic-400-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Onest - display скина vibrant-slots */ @font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/onest-latin-400-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/onest-cyrillic-400-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Inter - body ВСЕХ четырёх скинов */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin-400-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-cyrillic-400-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* JetBrains Mono - mono всех скинов (code/kbd/pre, .coin__sym) */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-cyrillic-400-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* editorial-light - равен дефолту в tokens.css; селектор оставлен явно, чтобы можно было принудительно вернуть скин на под-дереве. */ html[data-skin="editorial-light"] { /* see :root in tokens.css */ } /* ============================ midnight-crypto ============================ */ html[data-skin="midnight-crypto"] { --bg: #14101f; --bg-2: #1b1430; --bg-3: #241a3a; --surface: #1e1730; --surface-2: #271d40; --surface-3: #31254e; --text: #ece9f5; --text-dim: #c7c0e0; --text-mute: #9a92ba; --text-faint: #6f6792; /* ТЮНИНГ ПАЛИТРЫ 31.08.2026 (замер WCAG по фактическим парам): белый on-brand * давал 4.36 на --brand и всего 3.18 на светлом конце --grad-brand (135deg до * mix(brand 60%, brand-2) = #5096ff) - текст кнопки ниже порога 4.5; сам --brand * как цвет ссылок давал 4.29 на --bg и 3.95 на --surface. Решение: --brand * осветлён #7b5cff -> #856aff (минимальный сдвиг, тон тот же: ссылки 4.90/4.51), * --on-brand стал тёмным #0a0812 (на кнопке 5.21 и 6.77 по обоим концам града) - * тот же ход, что в dark-вариантах editorial/vibrant/clean-trust. */ --on-brand: #0a0812; --rule: rgba(164,144,194,.18); --rule-strong: rgba(164,144,194,.34); --hairline: 1px solid var(--rule); --brand: #856aff; /* electric violet, осветлён 31.08.2026 - см. замер выше */ --brand-2: #00d9ff; /* neon cyan */ --brand-soft: rgba(133,106,255,.16); --accent: #a490c2; /* lavender */ --gold: #d7b454; --highlight-pale: rgba(133,106,255,.12); --success: #2ecf8f; --success-soft: rgba(46,207,143,.16); --danger: #ff5d5d; --danger-soft: rgba(255,93,93,.16); --warning: #ffb020; --warning-soft: rgba(255,176,32,.18); --info: #4aa8ff; --info-soft: rgba(74,168,255,.16); --rating-from: var(--danger); --rating-to: var(--success); /* Premium-глубина для тёмного: верхний световой край + слои + неон-glow */ --surface-hi: rgba(255,255,255,.16); /* glow завязан на --brand (адаптируется под per-brand оверрайд, напр. Riobet-красный) */ --shadow-card: var(--border-highlight), 0 2px 6px -2px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.6), 0 0 26px -10px color-mix(in srgb, var(--brand) 22%, transparent); --shadow-pop: var(--border-highlight), 0 8px 18px -8px rgba(0,0,0,.6), 0 28px 56px -18px rgba(0,0,0,.7), 0 0 32px -8px color-mix(in srgb, var(--brand) 32%, transparent); --shadow-lift: var(--border-highlight), 0 32px 70px -20px rgba(0,0,0,.75), 0 0 46px -10px color-mix(in srgb, var(--brand) 38%, transparent); --shadow-glow: 0 12px 44px -10px color-mix(in srgb, var(--brand) 48%, transparent); --glass-bg: rgba(30,23,48,.72); --glass-border: rgba(164,144,194,.30); --ambient: radial-gradient(58% 48% at 84% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 68%), radial-gradient(52% 44% at -6% 4%, color-mix(in srgb, var(--brand-2) 12%, transparent), transparent 70%), radial-gradient(42% 32% at 50% 110%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 72%); /* ЗАМЕНА 31.08.2026: были "Space Grotesk", "Sora" - у обоих НЕТ кириллицы * (Google Fonts CSS API), русские заголовки падали в system-ui. Unbounded: * тот же техно-дисплейный характер, крипто-родословная, кириллица фактом. */ --font-display: "Unbounded", "Inter", system-ui, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Скин тёмный по природе - системным виджетам об этом сказать обязаны мы. */ color-scheme: dark; } /* Скин тёмный ПО ПРИРОДЕ: dark-вариант тождествен базе. Правило пусто намеренно - * оно документ: канон один (data-mode="dark" поверх светлой базы), светлого * варианта у midnight-crypto НЕТ, и кнопка темы на нём честно ничего не меняет. */ html[data-skin="midnight-crypto"][data-mode="dark"] { /* база уже тёмная */ } /* ============================== clean-trust ============================== */ html[data-skin="clean-trust"] { --bg: #f7fafc; --bg-2: #eef3f7; --bg-3: #e3ebf2; --surface: #ffffff; --surface-2: #f3f7fa; --surface-3: #e9f0f5; --text: #11212e; --text-dim: #2b3b48; --text-mute: #51626f; --text-faint: #7c8b97; --on-brand: #ffffff; --rule: #cdd9e2; --rule-strong: #a9bccb; --hairline: 1px solid var(--rule); --brand: #1f7a8c; /* teal */ --brand-2: #2d6cb0; /* steel blue */ --brand-soft: rgba(31,122,140,.10); --accent: #2d8b8b; --gold: #b5840a; --highlight-pale: #e6f2f4; --success: #1d7a52; --success-soft: rgba(29,122,82,.12); --danger: #c8322c; --danger-soft: rgba(200,50,44,.12); --warning: #b5780a; --warning-soft: rgba(181,120,10,.14); --info: #2f6db0; --info-soft: rgba(47,109,176,.12); --rating-from: var(--danger); --rating-to: var(--success); --surface-hi: rgba(255,255,255,.9); --shadow-card: var(--border-highlight), 0 1px 2px -1px rgba(17,33,46,.10), 0 14px 30px -14px rgba(17,33,46,.14); --shadow-pop: var(--border-highlight), 0 4px 10px -4px rgba(17,33,46,.12), 0 24px 50px -16px rgba(17,33,46,.18); --shadow-lift: var(--border-highlight), 0 30px 60px -18px rgba(17,33,46,.22); --shadow-glow: 0 10px 38px -10px color-mix(in srgb, var(--brand) 26%, transparent); --glass-bg: rgba(255,255,255,.80); --glass-border: rgba(205,217,226,.6); /* Manrope кириллицу несёт сам (проверено фактом 31.08.2026) - без замены. */ --font-display: "Manrope", "Inter", system-ui, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; } /* ============================= vibrant-slots ============================= */ html[data-skin="vibrant-slots"] { --bg: #fffaf4; --bg-2: #fff1e3; --bg-3: #ffe6d0; --surface: #ffffff; --surface-2: #fff4ea; --surface-3: #ffe9d8; --text: #2a1c14; --text-dim: #443127; --text-mute: #6e5446; --text-faint: #9a7d6c; --on-brand: #ffffff; --rule: #f0d3bb; --rule-strong: #e0b394; --hairline: 1px solid var(--rule); /* ТЮНИНГ 03.09.2026 (замер шаблоны/tools/контраст.py): прежний #e8590c давал ссылкам * 3.45 на --bg и 3.58 на --surface, белому тексту кнопки 3.58, а на светлом конце * --grad-brand (60% brand + 40% кораллового --brand-2) всего 2.90. Затемнён до #c44806 * (тот же жжёно-оранжевый тон): ссылки 4.73 / 4.91, белый на кнопке 4.91. Градиент * кнопки у этого скина сужен до 92% brand (ниже) - коралл слишком светел для белого * текста при любой тёмности brand: 60% давало бы 3.46, 92% даёт 4.59. */ --brand: #c44806; /* burnt orange, затемнён 03.09.2026 - см. замер выше */ --brand-2: #f4a261; /* coral */ --brand-soft: rgba(196,72,6,.10); --grad-brand: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 92%, var(--brand-2))); --accent: #f9a620; /* marigold */ --gold: #d99311; --highlight-pale: #fff2d6; --success: #1d8a4f; --success-soft: rgba(29,138,79,.12); --danger: #d4332b; --danger-soft: rgba(212,51,43,.12); --warning: #c9760a; --warning-soft: rgba(201,118,10,.14); --info: #2f6db0; --info-soft: rgba(47,109,176,.12); --rating-from: var(--danger); --rating-to: var(--success); --surface-hi: rgba(255,255,255,.9); --shadow-card: var(--border-highlight), 0 1px 2px -1px rgba(42,28,20,.10), 0 14px 30px -14px rgba(42,28,20,.15); --shadow-pop: var(--border-highlight), 0 4px 10px -4px rgba(42,28,20,.12), 0 24px 50px -16px rgba(42,28,20,.20); --shadow-lift: var(--border-highlight), 0 30px 60px -18px rgba(42,28,20,.24); --shadow-glow: 0 10px 38px -10px color-mix(in srgb, var(--brand) 28%, transparent); --glass-bg: rgba(255,255,255,.80); --glass-border: rgba(240,211,187,.6); /* ЗАМЕНА 31.08.2026: были "Sora", "Poppins" - у обоих НЕТ кириллицы (Google * Fonts CSS API). Onest: тот же дружелюбный геометрический характер, кириллица * родная (шрифт рисовался под неё). */ --font-display: "Onest", "Inter", system-ui, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; } /* ========================= ТЁМНЫЕ ВАРИАНТЫ СКИНОВ ========================= * Канон (скил css-tokens-dark-theme + образец clean-trust): переопределяются * ТОЛЬКО семантические токены; тёмное - не инверсия. Чистого чёрного нет * (ореол под белым текстом), акценты светлее и ЧУТЬ спокойнее (насыщенное на * тёмном «звенит»), тени глубже прозрачностью, а не яркостью. Контраст всех * текстовых токенов на --bg и --surface посчитан скриптом (WCAG, 31.08.2026): * --text и --text-dim >=4.5, --text-mute >=4.5, --text-faint - только для * подписей-мелочи (>=3). color-scheme: dark обязателен - без него формы и * скроллбары остаются белыми. */ /* --- editorial-light: тёплая бумага гаснет в тёплый ink, золото светлеет. * НЕ инвертировано: --on-brand стал ТЁМНЫМ - бренд теперь светлое золото, * белый текст на нём не читался бы. */ html[data-skin="editorial-light"][data-mode="dark"] { color-scheme: dark; --bg: #181510; --bg-2: #1f1b13; --bg-3: #272217; --surface: #201c14; --surface-2: #292318; --surface-3: #332c1e; --text: #f1ecdf; --text-dim: #d6cdb8; --text-mute: #ab9f83; --text-faint: #8b8168; --on-brand: #221804; --rule: rgba(200,190,156,.22); --rule-strong: rgba(200,190,156,.40); --brand: #d9ad4b; --brand-2: #82aadb; --brand-soft: rgba(217,173,75,.14); --accent: #d9ad4b; --gold: #d9ad4b; --crimson: #d47c74; --forest: #85b285; --steel: #82aadb; --plum: #b493d6; --highlight-pale: rgba(217,173,75,.12); --success: #4cc48d; --success-soft: rgba(76,196,141,.16); --danger: #e88379; --danger-soft: rgba(232,131,121,.16); --warning: #dfa93f; --warning-soft: rgba(223,169,63,.18); --info: #74aeea; --info-soft: rgba(116,174,234,.16); --surface-hi: rgba(255,255,255,.07); --shadow-card: var(--border-highlight), 0 2px 6px -2px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.55); --shadow-pop: var(--border-highlight), 0 8px 18px -8px rgba(0,0,0,.55), 0 28px 56px -18px rgba(0,0,0,.65); --shadow-lift: var(--border-highlight), 0 32px 70px -20px rgba(0,0,0,.7); --glass-bg: rgba(32,28,20,.72); --glass-border: rgba(200,190,156,.28); } /* --- clean-trust: вариант-образец (был здесь до общего механизма) дополнен * тем, что образцу прощалось, а канону нет: color-scheme, тёмное стекло шапки * (белая --glass-bg из светлой базы давала белую полосу над тёмной страницей), * приглушённый --surface-hi и тёмный --on-brand - бренд посветлел, белый на * нём не дотягивал до контраста. */ html[data-skin="clean-trust"][data-mode="dark"] { color-scheme: dark; --bg: #0e1820; --bg-2: #132230; --bg-3: #1a2c3a; --surface: #16242f; --surface-2: #1d2f3c; --surface-3: #243a49; --text: #eaf2f7; --text-dim: #c2d2dc; --text-mute: #93a7b4; --text-faint: #7a8d99; --on-brand: #04181d; --rule: rgba(143,163,176,.18); --rule-strong: rgba(143,163,176,.34); --brand: #3fb4ca; --brand-2: #5c9de0; --brand-soft: rgba(63,180,202,.16); --highlight-pale: rgba(63,180,202,.12); --success: #45c187; --success-soft: rgba(69,193,135,.16); --danger: #e8837b; --danger-soft: rgba(232,131,123,.16); --warning: #d9a844; --warning-soft: rgba(217,168,68,.18); --info: #74aeea; --info-soft: rgba(116,174,234,.16); --surface-hi: rgba(255,255,255,.08); --shadow-card: var(--border-highlight), 0 2px 6px -2px rgba(0,0,0,.45), 0 18px 40px -16px rgba(0,0,0,.5); --shadow-pop: var(--border-highlight), 0 8px 18px -8px rgba(0,0,0,.5), 0 28px 56px -18px rgba(0,0,0,.6); --shadow-lift: var(--border-highlight), 0 32px 70px -20px rgba(0,0,0,.65); --glass-bg: rgba(22,36,47,.72); --glass-border: rgba(143,163,176,.28); } /* --- vibrant-slots: тёплый крем гаснет в тлеющий уголь, оранжевый светлеет. * --on-brand тёмный по той же причине, что у editorial: бренд стал светлым. */ html[data-skin="vibrant-slots"][data-mode="dark"] { color-scheme: dark; --bg: #1e1410; --bg-2: #261a13; --bg-3: #2f2017; --surface: #271b14; --surface-2: #30221a; --surface-3: #3a2a1f; --text: #f8ede3; --text-dim: #e2d0c1; --text-mute: #b7a291; --text-faint: #96806f; --on-brand: #2b1305; --rule: rgba(240,211,187,.20); --rule-strong: rgba(240,211,187,.38); --brand: #f08a4b; --brand-2: #f4a973; --brand-soft: rgba(240,138,75,.15); --accent: #f5b34f; --gold: #e3a836; --highlight-pale: rgba(245,179,79,.12); --success: #4cc48d; --success-soft: rgba(76,196,141,.16); --danger: #ef8078; --danger-soft: rgba(239,128,120,.16); --warning: #e0a944; --warning-soft: rgba(224,169,68,.18); --info: #74aeea; --info-soft: rgba(116,174,234,.16); --surface-hi: rgba(255,255,255,.08); --shadow-card: var(--border-highlight), 0 2px 6px -2px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.55); --shadow-pop: var(--border-highlight), 0 8px 18px -8px rgba(0,0,0,.55), 0 28px 56px -18px rgba(0,0,0,.65); --shadow-lift: var(--border-highlight), 0 32px 70px -20px rgba(0,0,0,.7); --glass-bg: rgba(39,27,20,.72); --glass-border: rgba(240,211,187,.26); }