/* ============================================================================ * 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-дайджеста ресёрча. * ========================================================================== */ /* 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; --on-brand: #ffffff; --rule: rgba(164,144,194,.18); --rule-strong: rgba(164,144,194,.34); --hairline: 1px solid var(--rule); --brand: #7b5cff; /* electric violet */ --brand-2: #00d9ff; /* neon cyan */ --brand-soft: rgba(123,92,255,.16); --accent: #a490c2; /* lavender */ --gold: #d7b454; --highlight-pale: rgba(123,92,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%); --font-display: "Space Grotesk", "Sora", "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; } /* ============================== 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); --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); --brand: #e8590c; /* burnt orange */ --brand-2: #f4a261; /* coral */ --brand-soft: rgba(232,89,12,.10); --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); --font-display: "Sora", "Poppins", "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; } /* Optional dark variant of clean-trust for crypto/no-KYC dark hubs */ html[data-skin="clean-trust"][data-mode="dark"] { --bg: #0e1820; --bg-2: #132230; --bg-3: #1a2c3a; --surface: #16242f; --surface-2: #1d2f3c; --surface-3: #243a49; --text: #eaf2f7; --text-dim: #c2d2dc; --text-mute: #8fa3b0; --text-faint: #67798a; --rule: rgba(143,163,176,.18); --rule-strong: rgba(143,163,176,.34); --brand: #34a7bd; --brand-2: #4a90d9; --brand-soft: rgba(52,167,189,.16); --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.45); } /* ================================= mine ================================== * СКИН ЭТОГО ПРОЕКТА: minecraft-slots.com. Палитра снята с самих игр - небо, * трава, земля, камень, красная руда, золото, алмаз, обсидиан. Ни один цвет не * выдуман «для красоты»: каждый есть на скриншотах, лежащих в исследовании. * * ГЕОМЕТРИЯ ТОЖЕ ЧАСТЬ СКИНА, И ЭТО ОСОЗНАННОЕ ОТСТУПЛЕНИЕ. Радиусы объявлены в * первом слое как примитивы, одинаковые во всех скинах. Здесь они обнуляются: * скруглённый угол в пиксельной игре невозможен физически, и скруглённая карточка * рядом с блоком земли читается как чужая. Тени по той же причине жёсткие, без * размытия - так рисуется объём в пиксель-арте. * * Три состояния темы: системная светлая (этот блок), системная тёмная (media ниже), * ручной выбор (data-theme перебивает систему в обе стороны). * ========================================================================== */ html[data-skin="mine"] { /* --- поверхности: дневное небо над шахтой --- */ --bg: #e8f4fd; --bg-2: #ffffff; --bg-3: #d4e9f9; --surface: #ffffff; --surface-2: #f5f9fc; --surface-3: #e6f1f9; /* --- текст: земля и уголь --- */ --text: #17130d; --text-dim: #33291c; --text-mute: #55493a; --text-faint: #6e6152; --on-brand: #ffffff; /* --- линии: камень --- */ --rule: #bcd6e6; --rule-strong: #8fb6cd; --hairline: 2px solid var(--rule); /* --- акценты --- */ --brand: #0d6b62; /* алмаз, приглушённый до читаемого на белом */ --brand-2: #2f7a1f; /* трава */ --brand-soft: rgba(13,107,98,.10); --accent: #b57f13; /* золото, тёмный вариант */ --gold: #b57f13; --highlight-pale: #fff6e0; --success: #17714a; --success-soft: rgba(23,113,74,.12); --danger: #b3271f; --danger-soft: rgba(179,39,31,.12); --warning: #8a5605; --warning-soft: rgba(138,86,5,.14); --info: #2465a8; --info-soft: rgba(36,101,168,.12); --rating-from: var(--danger); --rating-to: var(--success); /* --- РОЛИ ЭТОГО ПРОЕКТА. Компоненты берут только их. --- */ --cta-bg: #f3b73f; /* золотой блок */ --cta-bg-2: #ffd076; --cta-text: #17130d; --cta-edge: #9a6d10; --block-dirt: #a5673f; --block-grass: #59b33a; --block-stone: #a8a8a8; --block-ore: #c4453c; --block-gold: #f2b23c; --block-diamond: #4de3dc; --block-obsidian: #2c2140; --block-blast: #e06b2a; --block-mystery: #8e5cc9; --block-edge: rgba(23,19,13,.35); --pane: #ffffff; --pane-edge: #8fb6cd; --pane-shade: #c4dcec; /* --- геометрия: блок, а не таблетка --- */ --r-sharp: 0; --r-soft: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; --r-pill: 0; /* --- тени: жёсткие, без размытия --- */ --surface-hi: rgba(255,255,255,.9); --border-highlight: inset 0 2px 0 var(--surface-hi); --shadow-card: 4px 4px 0 0 var(--pane-shade); --shadow-pop: 6px 6px 0 0 var(--pane-shade); --shadow-lift: 8px 8px 0 0 var(--pane-shade); --shadow-glow: 4px 4px 0 0 var(--cta-edge); --glass-blur: none; --glass-bg: #ffffff; --glass-border: #8fb6cd; --grad-brand: none; --grad-text: none; --surface-grad: none; /* Небо над страницей: одна мягкая полоса сверху, без пятен по углам. */ --ambient: linear-gradient(180deg, #cfe8fb 0, rgba(207,232,251,0) 520px); --font-display: "Pixelify Sans", "Trebuchet MS", Verdana, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* --- ТЁМНАЯ ТЕМА: ночь в шахте. Только переопределения, не вторая палитра. --- * Системная тёмная действует, пока читатель не выбрал светлую руками. */ @media (prefers-color-scheme: dark) { html[data-skin="mine"]:not([data-theme="light"]) { --bg: #16101f; --bg-2: #1d1529; --bg-3: #100b17; --surface: #201829; --surface-2: #2a2036; --surface-3: #342843; --text: #f1ece4; --text-dim: #d3cabb; --text-mute: #a3998a; --text-faint: #857a6b; --on-brand: #10161a; --rule: #3a2f4a; --rule-strong: #574766; --hairline: 2px solid var(--rule); --brand: #4fd8cf; --brand-2: #7fd15a; --brand-soft: rgba(79,216,207,.14); --accent: #f3b73f; --gold: #f3b73f; --highlight-pale: #2c2140; --success: #4fc48a; --success-soft: rgba(79,196,138,.16); --danger: #ef6a60; --danger-soft: rgba(239,106,96,.16); --warning: #f0ac36; --warning-soft: rgba(240,172,54,.16); --info: #6aa8e8; --info-soft: rgba(106,168,232,.16); --pane: #201829; --pane-edge: #574766; --pane-shade: #100b17; /* В тёмной теме тёмная обводка сливается с фоном, и квадратик обсидиана пропадает целиком. Обводка светлеет: она нужна ровно для того, чтобы самый тёмный материал оставался видимым. */ --block-edge: rgba(241,236,228,.45); --surface-hi: rgba(255,255,255,.08); --border-highlight: inset 0 2px 0 var(--surface-hi); --glass-bg: #201829; --glass-border: #574766; --ambient: linear-gradient(180deg, #241a33 0, rgba(36,26,51,0) 520px); } } /* Ручной выбор тёмной темы перебивает систему в обе стороны. */ html[data-skin="mine"][data-theme="dark"] { --bg: #16101f; --bg-2: #1d1529; --bg-3: #100b17; --surface: #201829; --surface-2: #2a2036; --surface-3: #342843; --text: #f1ece4; --text-dim: #d3cabb; --text-mute: #a3998a; --text-faint: #857a6b; --on-brand: #10161a; --rule: #3a2f4a; --rule-strong: #574766; --hairline: 2px solid var(--rule); --brand: #4fd8cf; --brand-2: #7fd15a; --brand-soft: rgba(79,216,207,.14); --accent: #f3b73f; --gold: #f3b73f; --highlight-pale: #2c2140; --success: #4fc48a; --success-soft: rgba(79,196,138,.16); --danger: #ef6a60; --danger-soft: rgba(239,106,96,.16); --warning: #f0ac36; --warning-soft: rgba(240,172,54,.16); --info: #6aa8e8; --info-soft: rgba(106,168,232,.16); --pane: #201829; --pane-edge: #574766; --pane-shade: #100b17; --block-edge: rgba(241,236,228,.45); --surface-hi: rgba(255,255,255,.08); --border-highlight: inset 0 2px 0 var(--surface-hi); --glass-bg: #201829; --glass-border: #574766; --ambient: linear-gradient(180deg, #241a33 0, rgba(36,26,51,0) 520px); }