/* ============================================================================ * 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). Под: слоты, бонусы, промо. * onyx-gold - проектный скин 1xslotscasino.guide (17.09.2026): графит и золото * по мотивам лобби 1xSlots, тёмная тема - основной режим. В конце файла. * * 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); } /* ============================== onyx-gold ============================== * 1xslotscasino.guide, 17.09.2026. Скин по мотивам лобби 1xSlots: графит и золото * (_дизайн/оригинал-1xslots.md, разд. 10; _план/план-сайта.md, разд. 6.1). Тёмная * тема - основной режим сайта (config/site.php 'тема_по_умолчанию' => 'dark'), * светлая - честная вторая: слоновая кость, не белый (золото на чистом белом плывёт). * Канон 03: светлая база здесь, переопределения - в блоке [data-mode="dark"] ниже; * в тёмном блоке ни одной новой роли. Шрифты: display Unbounded (тяжёлый геометрический * гротеск, ближе всего к характеру логотипа), body Inter, mono JetBrains Mono - все * три уже self-hosted в assets/fonts/ (@font-face выше). * * ОТСТУПЛЕНИЕ ОТ ПЛАНА 6.1 (замер контраст.py 17.09.2026): план держал в светлой теме * --on-brand #1b1a1d (тёмный текст на бледно-золотой кнопке), а --brand #7a5a12 - и * контраст.py судит --on-brand НА --brand: 1b1a1d на 7a5a12 = 2.1 при пороге 4.5. В * светлой теме кнопка - тёмное золото с белым текстом (как у editorial-light: 6.4 на * --brand, 5.5 на конце градиента); бледное золото #fde4a5 остаётся заливкой плашек и * бордюров (--accent/--gold), не текстом и не кнопкой. В тёмной теме кнопка - как * REGISTRATION оригинала: градиент #fee5a4 -> #dcb87c, текст #1b1a1d (>= 9.7). * * СВОИ РОЛИ СКИНА (объявлены в светлой базе, переопределены в тёмной): * --poly полигональная сетка граней (SVG data-URI, контраст к --bg < 5%) - * фон оригинального лобби; на неё ложится герой главной (blocks.css). * --hero-bg золотое свечение поверх --poly - фон .home-hero и героев разделов. * --field поверхность полей ввода и кода промокода (#333333 оригинала в тёмной). * --gold-ink золото как ЦВЕТ ТЕКСТА крупных цифр и надзаголовков: в тёмной = --brand, * в светлой темнее бледного золота (#7a5a12), потому что бледное на * слоновой кости не читается. */ html[data-skin="onyx-gold"] { color-scheme: light; --bg: #fbf8f1; --bg-2: #f3eee2; --bg-3: #ebe4d3; --surface: #ffffff; --surface-2: #f7f3ea; --surface-3: #efe9dc; --text: #1b1a1d; --text-dim: #4a4744; --text-mute: #6b675f; --text-faint: #8f8a80; --on-brand: #ffffff; --rule: #e6dfcf; --rule-strong: #d2c8b0; --hairline: 1px solid var(--rule); --brand: #7a5a12; --brand-2: #a17a1f; --brand-soft: #fdf1d2; --accent: #fde4a5; --gold: #d6b376; --gold-ink: #7a5a12; --highlight-pale: #fff6dd; --grad-brand: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--brand-2))); --success: #1e7a49; --success-soft: #e3f4ea; --danger: #b3261e; --danger-soft: #fbe4e2; --warning: #9a6b00; --warning-soft: #fdf1d2; --info: #2456b3; --info-soft: #e2eafb; --rating-from: var(--danger); --rating-to: var(--success); --field: #ffffff; --surface-hi: rgba(255,255,255,.85); --shadow-card: var(--border-highlight), 0 1px 2px -1px rgba(27,26,29,.08), 0 6px 20px -8px rgba(60,45,10,.14); --shadow-pop: var(--border-highlight), 0 4px 10px -4px rgba(27,26,29,.10), 0 24px 50px -16px rgba(60,45,10,.18); --shadow-lift: var(--border-highlight), 0 30px 60px -18px rgba(60,45,10,.22); --shadow-glow: 0 10px 34px -10px color-mix(in srgb, var(--brand) 30%, transparent); --glass-bg: rgba(251,248,241,.84); --glass-border: rgba(210,200,176,.6); --poly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1600' height='900' fill='%23fbf8f1'/%3E%3Cpolygon points='0,0 127,0 0,110' fill='%23f3eee2'/%3E%3Cpolygon points='127,0 190,144 0,110' fill='%23f6f1e6'/%3E%3Cpolygon points='127,0 351,0 190,144' fill='%23f8f4ea'/%3E%3Cpolygon points='351,0 344,108 190,144' fill='%23fbf8f1'/%3E%3Cpolygon points='351,0 504,0 475,169' fill='%23fbf8f1'/%3E%3Cpolygon points='351,0 475,169 344,108' fill='%23efe9db'/%3E%3Cpolygon points='504,0 618,0 475,169' fill='%23fbf8f1'/%3E%3Cpolygon points='618,0 616,187 475,169' fill='%23f3eee2'/%3E%3Cpolygon points='618,0 800,0 616,187' fill='%23efe9db'/%3E%3Cpolygon points='800,0 836,111 616,187' fill='%23fbf8f1'/%3E%3Cpolygon points='800,0 955,0 917,153' fill='%23efe9db'/%3E%3Cpolygon points='800,0 917,153 836,111' fill='%23f6f1e6'/%3E%3Cpolygon points='955,0 1134,0 1159,140' fill='%23fbf8f1'/%3E%3Cpolygon points='955,0 1159,140 917,153' fill='%23fbf8f1'/%3E%3Cpolygon points='1134,0 1306,0 1255,143' fill='%23f8f4ea'/%3E%3Cpolygon points='1134,0 1255,143 1159,140' fill='%23f8f4ea'/%3E%3Cpolygon points='1306,0 1404,0 1255,143' fill='%23fbf8f1'/%3E%3Cpolygon points='1404,0 1398,127 1255,143' fill='%23f6f1e6'/%3E%3Cpolygon points='1404,0 1600,0 1600,145' fill='%23fbf8f1'/%3E%3Cpolygon points='1404,0 1600,145 1398,127' fill='%23efe9db'/%3E%3Cpolygon points='0,110 190,144 136,277' fill='%23f8f4ea'/%3E%3Cpolygon points='0,110 136,277 0,300' fill='%23fbf8f1'/%3E%3Cpolygon points='190,144 344,108 136,277' fill='%23efe9db'/%3E%3Cpolygon points='344,108 295,297 136,277' fill='%23fbf8f1'/%3E%3Cpolygon points='344,108 475,169 461,260' fill='%23f6f1e6'/%3E%3Cpolygon points='344,108 461,260 295,297' fill='%23efe9db'/%3E%3Cpolygon points='475,169 616,187 670,305' fill='%23fbf8f1'/%3E%3Cpolygon points='475,169 670,305 461,260' fill='%23efe9db'/%3E%3Cpolygon points='616,187 836,111 813,274' fill='%23efe9db'/%3E%3Cpolygon points='616,187 813,274 670,305' fill='%23f8f4ea'/%3E%3Cpolygon points='836,111 917,153 813,274' fill='%23fbf8f1'/%3E%3Cpolygon points='917,153 1004,330 813,274' fill='%23f6f1e6'/%3E%3Cpolygon points='917,153 1159,140 1086,286' fill='%23fbf8f1'/%3E%3Cpolygon points='917,153 1086,286 1004,330' fill='%23efe9db'/%3E%3Cpolygon points='1159,140 1255,143 1300,318' fill='%23f6f1e6'/%3E%3Cpolygon points='1159,140 1300,318 1086,286' fill='%23f3eee2'/%3E%3Cpolygon points='1255,143 1398,127 1300,318' fill='%23f8f4ea'/%3E%3Cpolygon points='1398,127 1479,293 1300,318' fill='%23f6f1e6'/%3E%3Cpolygon points='1398,127 1600,145 1600,328' fill='%23efe9db'/%3E%3Cpolygon points='1398,127 1600,328 1479,293' fill='%23fbf8f1'/%3E%3Cpolygon points='0,300 136,277 142,457' fill='%23efe9db'/%3E%3Cpolygon points='0,300 142,457 0,464' fill='%23f3eee2'/%3E%3Cpolygon points='136,277 295,297 354,479' fill='%23efe9db'/%3E%3Cpolygon points='136,277 354,479 142,457' fill='%23f6f1e6'/%3E%3Cpolygon points='295,297 461,260 480,457' fill='%23fbf8f1'/%3E%3Cpolygon points='295,297 480,457 354,479' fill='%23efe9db'/%3E%3Cpolygon points='461,260 670,305 598,428' fill='%23efe9db'/%3E%3Cpolygon points='461,260 598,428 480,457' fill='%23f6f1e6'/%3E%3Cpolygon points='670,305 813,274 827,443' fill='%23f3eee2'/%3E%3Cpolygon points='670,305 827,443 598,428' fill='%23fbf8f1'/%3E%3Cpolygon points='813,274 1004,330 931,454' fill='%23efe9db'/%3E%3Cpolygon points='813,274 931,454 827,443' fill='%23fbf8f1'/%3E%3Cpolygon points='1004,330 1086,286 1138,465' fill='%23efe9db'/%3E%3Cpolygon points='1004,330 1138,465 931,454' fill='%23fbf8f1'/%3E%3Cpolygon points='1086,286 1300,318 1138,465' fill='%23efe9db'/%3E%3Cpolygon points='1300,318 1269,445 1138,465' fill='%23f6f1e6'/%3E%3Cpolygon points='1300,318 1479,293 1269,445' fill='%23f8f4ea'/%3E%3Cpolygon points='1479,293 1441,473 1269,445' fill='%23efe9db'/%3E%3Cpolygon points='1479,293 1600,328 1600,452' fill='%23f8f4ea'/%3E%3Cpolygon points='1479,293 1600,452 1441,473' fill='%23f3eee2'/%3E%3Cpolygon points='0,464 142,457 0,591' fill='%23f8f4ea'/%3E%3Cpolygon points='142,457 159,560 0,591' fill='%23efe9db'/%3E%3Cpolygon points='142,457 354,479 159,560' fill='%23f8f4ea'/%3E%3Cpolygon points='354,479 279,617 159,560' fill='%23f3eee2'/%3E%3Cpolygon points='354,479 480,457 523,608' fill='%23f3eee2'/%3E%3Cpolygon points='354,479 523,608 279,617' fill='%23f6f1e6'/%3E%3Cpolygon points='480,457 598,428 630,572' fill='%23f6f1e6'/%3E%3Cpolygon points='480,457 630,572 523,608' fill='%23f6f1e6'/%3E%3Cpolygon points='598,428 827,443 800,640' fill='%23fbf8f1'/%3E%3Cpolygon points='598,428 800,640 630,572' fill='%23efe9db'/%3E%3Cpolygon points='827,443 931,454 800,640' fill='%23f3eee2'/%3E%3Cpolygon points='931,454 984,603 800,640' fill='%23efe9db'/%3E%3Cpolygon points='931,454 1138,465 1152,578' fill='%23f8f4ea'/%3E%3Cpolygon points='931,454 1152,578 984,603' fill='%23f3eee2'/%3E%3Cpolygon points='1138,465 1269,445 1152,578' fill='%23f8f4ea'/%3E%3Cpolygon points='1269,445 1281,638 1152,578' fill='%23f3eee2'/%3E%3Cpolygon points='1269,445 1441,473 1281,638' fill='%23efe9db'/%3E%3Cpolygon points='1441,473 1447,597 1281,638' fill='%23fbf8f1'/%3E%3Cpolygon points='1441,473 1600,452 1447,597' fill='%23fbf8f1'/%3E%3Cpolygon points='1600,452 1600,581 1447,597' fill='%23efe9db'/%3E%3Cpolygon points='0,591 159,560 201,708' fill='%23f8f4ea'/%3E%3Cpolygon points='0,591 201,708 0,754' fill='%23f6f1e6'/%3E%3Cpolygon points='159,560 279,617 201,708' fill='%23f3eee2'/%3E%3Cpolygon points='279,617 345,777 201,708' fill='%23f6f1e6'/%3E%3Cpolygon points='279,617 523,608 345,777' fill='%23f8f4ea'/%3E%3Cpolygon points='523,608 515,770 345,777' fill='%23f8f4ea'/%3E%3Cpolygon points='523,608 630,572 515,770' fill='%23fbf8f1'/%3E%3Cpolygon points='630,572 668,752 515,770' fill='%23fbf8f1'/%3E%3Cpolygon points='630,572 800,640 805,744' fill='%23efe9db'/%3E%3Cpolygon points='630,572 805,744 668,752' fill='%23efe9db'/%3E%3Cpolygon points='800,640 984,603 805,744' fill='%23f3eee2'/%3E%3Cpolygon points='984,603 920,781 805,744' fill='%23f3eee2'/%3E%3Cpolygon points='984,603 1152,578 1126,725' fill='%23f3eee2'/%3E%3Cpolygon points='984,603 1126,725 920,781' fill='%23efe9db'/%3E%3Cpolygon points='1152,578 1281,638 1126,725' fill='%23f8f4ea'/%3E%3Cpolygon points='1281,638 1280,749 1126,725' fill='%23efe9db'/%3E%3Cpolygon points='1281,638 1447,597 1427,737' fill='%23f8f4ea'/%3E%3Cpolygon points='1281,638 1427,737 1280,749' fill='%23fbf8f1'/%3E%3Cpolygon points='1447,597 1600,581 1427,737' fill='%23fbf8f1'/%3E%3Cpolygon points='1600,581 1600,753 1427,737' fill='%23f3eee2'/%3E%3Cpolygon points='0,754 201,708 171,900' fill='%23f8f4ea'/%3E%3Cpolygon points='0,754 171,900 0,900' fill='%23fbf8f1'/%3E%3Cpolygon points='201,708 345,777 330,900' fill='%23fbf8f1'/%3E%3Cpolygon points='201,708 330,900 171,900' fill='%23f3eee2'/%3E%3Cpolygon points='345,777 515,770 330,900' fill='%23efe9db'/%3E%3Cpolygon points='515,770 476,900 330,900' fill='%23f8f4ea'/%3E%3Cpolygon points='515,770 668,752 476,900' fill='%23f3eee2'/%3E%3Cpolygon points='668,752 598,900 476,900' fill='%23f8f4ea'/%3E%3Cpolygon points='668,752 805,744 776,900' fill='%23f3eee2'/%3E%3Cpolygon points='668,752 776,900 598,900' fill='%23fbf8f1'/%3E%3Cpolygon points='805,744 920,781 776,900' fill='%23f8f4ea'/%3E%3Cpolygon points='920,781 931,900 776,900' fill='%23f3eee2'/%3E%3Cpolygon points='920,781 1126,725 1128,900' fill='%23f6f1e6'/%3E%3Cpolygon points='920,781 1128,900 931,900' fill='%23efe9db'/%3E%3Cpolygon points='1126,725 1280,749 1128,900' fill='%23fbf8f1'/%3E%3Cpolygon points='1280,749 1312,900 1128,900' fill='%23f8f4ea'/%3E%3Cpolygon points='1280,749 1427,737 1312,900' fill='%23fbf8f1'/%3E%3Cpolygon points='1427,737 1467,900 1312,900' fill='%23f6f1e6'/%3E%3Cpolygon points='1427,737 1600,753 1600,900' fill='%23f3eee2'/%3E%3Cpolygon points='1427,737 1600,900 1467,900' fill='%23f6f1e6'/%3E%3C/svg%3E"); --hero-bg: radial-gradient(60% 55% at 85% 0%, rgba(253,228,165,.55), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(214,179,118,.28), transparent 70%), var(--poly); --ambient: radial-gradient(58% 40% at 88% -6%, rgba(253,228,165,.45), transparent 70%), radial-gradient(40% 32% at -6% 4%, rgba(214,179,118,.22), transparent 72%); --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; } /* --- onyx-gold, тёмная тема: основной режим гида. Поверхности - между полигональным * фоном #0d0d11 и сайдбаром #1b1a1d оригинала; золото - между #d6b376 и #fde4a5 из CSS * платформы; зелёный FAB оригинала взят без белой иконки (у него 1.8). */ html[data-skin="onyx-gold"][data-mode="dark"] { color-scheme: dark; --bg: #121115; --bg-2: #1b1a1d; --bg-3: #222124; --surface: #1b1a1d; --surface-2: #222124; --surface-3: #2a292d; --text: #f4f3f6; --text-dim: #c8c6cc; --text-mute: #9a979f; --text-faint: #75727b; --on-brand: #1b1a1d; --rule: #2a292d; --rule-strong: #3a393e; --brand: #e9cf95; --brand-2: #d6b376; --brand-soft: rgba(253,228,165,.12); --accent: #fde4a5; --gold: #fde4a5; --gold-ink: #e9cf95; --highlight-pale: #3a3320; --grad-brand: linear-gradient(180deg, #fee5a4 0%, #e8cb90 55%, #dcb87c 100%); --success: #7ee2b0; --success-soft: rgba(126,226,176,.14); --danger: #ff8a80; --danger-soft: rgba(255,138,128,.14); --warning: #ffd27a; --warning-soft: rgba(255,210,122,.14); --info: #8ab4ff; --info-soft: rgba(138,180,255,.14); --field: #333333; --surface-hi: rgba(255,255,255,.06); --shadow-card: var(--border-highlight), 0 2px 6px -2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.45); --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,.7); --shadow-glow: 0 0 24px rgba(253,228,165,.18); --glass-bg: rgba(27,26,29,.78); --glass-border: rgba(255,255,255,.08); --poly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1600' height='900' fill='%23121115'/%3E%3Cpolygon points='0,0 127,0 0,110' fill='%23151419'/%3E%3Cpolygon points='127,0 190,144 0,110' fill='%230f0e13'/%3E%3Cpolygon points='127,0 351,0 190,144' fill='%230d0c11'/%3E%3Cpolygon points='351,0 344,108 190,144' fill='%23121115'/%3E%3Cpolygon points='351,0 504,0 475,169' fill='%23121115'/%3E%3Cpolygon points='351,0 475,169 344,108' fill='%2317161b'/%3E%3Cpolygon points='504,0 618,0 475,169' fill='%23121115'/%3E%3Cpolygon points='618,0 616,187 475,169' fill='%23151419'/%3E%3Cpolygon points='618,0 800,0 616,187' fill='%2317161b'/%3E%3Cpolygon points='800,0 836,111 616,187' fill='%23121115'/%3E%3Cpolygon points='800,0 955,0 917,153' fill='%2317161b'/%3E%3Cpolygon points='800,0 917,153 836,111' fill='%230f0e13'/%3E%3Cpolygon points='955,0 1134,0 1159,140' fill='%23121115'/%3E%3Cpolygon points='955,0 1159,140 917,153' fill='%23121115'/%3E%3Cpolygon points='1134,0 1306,0 1255,143' fill='%230d0c11'/%3E%3Cpolygon points='1134,0 1255,143 1159,140' fill='%230d0c11'/%3E%3Cpolygon points='1306,0 1404,0 1255,143' fill='%23121115'/%3E%3Cpolygon points='1404,0 1398,127 1255,143' fill='%230f0e13'/%3E%3Cpolygon points='1404,0 1600,0 1600,145' fill='%23121115'/%3E%3Cpolygon points='1404,0 1600,145 1398,127' fill='%2317161b'/%3E%3Cpolygon points='0,110 190,144 136,277' fill='%230d0c11'/%3E%3Cpolygon points='0,110 136,277 0,300' fill='%23121115'/%3E%3Cpolygon points='190,144 344,108 136,277' fill='%2317161b'/%3E%3Cpolygon points='344,108 295,297 136,277' fill='%23121115'/%3E%3Cpolygon points='344,108 475,169 461,260' fill='%230f0e13'/%3E%3Cpolygon points='344,108 461,260 295,297' fill='%2317161b'/%3E%3Cpolygon points='475,169 616,187 670,305' fill='%23121115'/%3E%3Cpolygon points='475,169 670,305 461,260' fill='%2317161b'/%3E%3Cpolygon points='616,187 836,111 813,274' fill='%2317161b'/%3E%3Cpolygon points='616,187 813,274 670,305' fill='%230d0c11'/%3E%3Cpolygon points='836,111 917,153 813,274' fill='%23121115'/%3E%3Cpolygon points='917,153 1004,330 813,274' fill='%230f0e13'/%3E%3Cpolygon points='917,153 1159,140 1086,286' fill='%23121115'/%3E%3Cpolygon points='917,153 1086,286 1004,330' fill='%2317161b'/%3E%3Cpolygon points='1159,140 1255,143 1300,318' fill='%230f0e13'/%3E%3Cpolygon points='1159,140 1300,318 1086,286' fill='%23151419'/%3E%3Cpolygon points='1255,143 1398,127 1300,318' fill='%230d0c11'/%3E%3Cpolygon points='1398,127 1479,293 1300,318' fill='%230f0e13'/%3E%3Cpolygon points='1398,127 1600,145 1600,328' fill='%2317161b'/%3E%3Cpolygon points='1398,127 1600,328 1479,293' fill='%23121115'/%3E%3Cpolygon points='0,300 136,277 142,457' fill='%2317161b'/%3E%3Cpolygon points='0,300 142,457 0,464' fill='%23151419'/%3E%3Cpolygon points='136,277 295,297 354,479' fill='%2317161b'/%3E%3Cpolygon points='136,277 354,479 142,457' fill='%230f0e13'/%3E%3Cpolygon points='295,297 461,260 480,457' fill='%23121115'/%3E%3Cpolygon points='295,297 480,457 354,479' fill='%2317161b'/%3E%3Cpolygon points='461,260 670,305 598,428' fill='%2317161b'/%3E%3Cpolygon points='461,260 598,428 480,457' fill='%230f0e13'/%3E%3Cpolygon points='670,305 813,274 827,443' fill='%23151419'/%3E%3Cpolygon points='670,305 827,443 598,428' fill='%23121115'/%3E%3Cpolygon points='813,274 1004,330 931,454' fill='%2317161b'/%3E%3Cpolygon points='813,274 931,454 827,443' fill='%23121115'/%3E%3Cpolygon points='1004,330 1086,286 1138,465' fill='%2317161b'/%3E%3Cpolygon points='1004,330 1138,465 931,454' fill='%23121115'/%3E%3Cpolygon points='1086,286 1300,318 1138,465' fill='%2317161b'/%3E%3Cpolygon points='1300,318 1269,445 1138,465' fill='%230f0e13'/%3E%3Cpolygon points='1300,318 1479,293 1269,445' fill='%230d0c11'/%3E%3Cpolygon points='1479,293 1441,473 1269,445' fill='%2317161b'/%3E%3Cpolygon points='1479,293 1600,328 1600,452' fill='%230d0c11'/%3E%3Cpolygon points='1479,293 1600,452 1441,473' fill='%23151419'/%3E%3Cpolygon points='0,464 142,457 0,591' fill='%230d0c11'/%3E%3Cpolygon points='142,457 159,560 0,591' fill='%2317161b'/%3E%3Cpolygon points='142,457 354,479 159,560' fill='%230d0c11'/%3E%3Cpolygon points='354,479 279,617 159,560' fill='%23151419'/%3E%3Cpolygon points='354,479 480,457 523,608' fill='%23151419'/%3E%3Cpolygon points='354,479 523,608 279,617' fill='%230f0e13'/%3E%3Cpolygon points='480,457 598,428 630,572' fill='%230f0e13'/%3E%3Cpolygon points='480,457 630,572 523,608' fill='%230f0e13'/%3E%3Cpolygon points='598,428 827,443 800,640' fill='%23121115'/%3E%3Cpolygon points='598,428 800,640 630,572' fill='%2317161b'/%3E%3Cpolygon points='827,443 931,454 800,640' fill='%23151419'/%3E%3Cpolygon points='931,454 984,603 800,640' fill='%2317161b'/%3E%3Cpolygon points='931,454 1138,465 1152,578' fill='%230d0c11'/%3E%3Cpolygon points='931,454 1152,578 984,603' fill='%23151419'/%3E%3Cpolygon points='1138,465 1269,445 1152,578' fill='%230d0c11'/%3E%3Cpolygon points='1269,445 1281,638 1152,578' fill='%23151419'/%3E%3Cpolygon points='1269,445 1441,473 1281,638' fill='%2317161b'/%3E%3Cpolygon points='1441,473 1447,597 1281,638' fill='%23121115'/%3E%3Cpolygon points='1441,473 1600,452 1447,597' fill='%23121115'/%3E%3Cpolygon points='1600,452 1600,581 1447,597' fill='%2317161b'/%3E%3Cpolygon points='0,591 159,560 201,708' fill='%230d0c11'/%3E%3Cpolygon points='0,591 201,708 0,754' fill='%230f0e13'/%3E%3Cpolygon points='159,560 279,617 201,708' fill='%23151419'/%3E%3Cpolygon points='279,617 345,777 201,708' fill='%230f0e13'/%3E%3Cpolygon points='279,617 523,608 345,777' fill='%230d0c11'/%3E%3Cpolygon points='523,608 515,770 345,777' fill='%230d0c11'/%3E%3Cpolygon points='523,608 630,572 515,770' fill='%23121115'/%3E%3Cpolygon points='630,572 668,752 515,770' fill='%23121115'/%3E%3Cpolygon points='630,572 800,640 805,744' fill='%2317161b'/%3E%3Cpolygon points='630,572 805,744 668,752' fill='%2317161b'/%3E%3Cpolygon points='800,640 984,603 805,744' fill='%23151419'/%3E%3Cpolygon points='984,603 920,781 805,744' fill='%23151419'/%3E%3Cpolygon points='984,603 1152,578 1126,725' fill='%23151419'/%3E%3Cpolygon points='984,603 1126,725 920,781' fill='%2317161b'/%3E%3Cpolygon points='1152,578 1281,638 1126,725' fill='%230d0c11'/%3E%3Cpolygon points='1281,638 1280,749 1126,725' fill='%2317161b'/%3E%3Cpolygon points='1281,638 1447,597 1427,737' fill='%230d0c11'/%3E%3Cpolygon points='1281,638 1427,737 1280,749' fill='%23121115'/%3E%3Cpolygon points='1447,597 1600,581 1427,737' fill='%23121115'/%3E%3Cpolygon points='1600,581 1600,753 1427,737' fill='%23151419'/%3E%3Cpolygon points='0,754 201,708 171,900' fill='%230d0c11'/%3E%3Cpolygon points='0,754 171,900 0,900' fill='%23121115'/%3E%3Cpolygon points='201,708 345,777 330,900' fill='%23121115'/%3E%3Cpolygon points='201,708 330,900 171,900' fill='%23151419'/%3E%3Cpolygon points='345,777 515,770 330,900' fill='%2317161b'/%3E%3Cpolygon points='515,770 476,900 330,900' fill='%230d0c11'/%3E%3Cpolygon points='515,770 668,752 476,900' fill='%23151419'/%3E%3Cpolygon points='668,752 598,900 476,900' fill='%230d0c11'/%3E%3Cpolygon points='668,752 805,744 776,900' fill='%23151419'/%3E%3Cpolygon points='668,752 776,900 598,900' fill='%23121115'/%3E%3Cpolygon points='805,744 920,781 776,900' fill='%230d0c11'/%3E%3Cpolygon points='920,781 931,900 776,900' fill='%23151419'/%3E%3Cpolygon points='920,781 1126,725 1128,900' fill='%230f0e13'/%3E%3Cpolygon points='920,781 1128,900 931,900' fill='%2317161b'/%3E%3Cpolygon points='1126,725 1280,749 1128,900' fill='%23121115'/%3E%3Cpolygon points='1280,749 1312,900 1128,900' fill='%230d0c11'/%3E%3Cpolygon points='1280,749 1427,737 1312,900' fill='%23121115'/%3E%3Cpolygon points='1427,737 1467,900 1312,900' fill='%230f0e13'/%3E%3Cpolygon points='1427,737 1600,753 1600,900' fill='%23151419'/%3E%3Cpolygon points='1427,737 1600,900 1467,900' fill='%230f0e13'/%3E%3C/svg%3E"); --hero-bg: radial-gradient(60% 55% at 85% 0%, rgba(253,228,165,.14), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(214,179,118,.08), transparent 70%), var(--poly); --ambient: radial-gradient(58% 40% at 88% -6%, rgba(253,228,165,.10), transparent 70%), radial-gradient(40% 32% at -6% 4%, rgba(214,179,118,.06), transparent 72%); }