/* ============================================================================ * 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); }