/* GetLuck — светлая тема «Ivory & Gold» (решение Amal 31.08.2026). * Активация: класс theme-light на (страницы layout-b). * Принцип: слоновая кость + белые карты; золото — единственный яркий металл. * Подключать ПОСЛЕ styles.css и home-b.css, с ?v= при каждом деплое. * * v2 (02.09.2026) — правка по замечанию Amal: не должно быть ни тёмного текста * на тёмном, ни одиночных чёрных блоков на белой странице. Все пары цветов * замерены скриптом theme/audit_contrast.py (WCAG AA: 4.5:1 текст, 3:1 крупный). * - серая шкала опущена: iron 4.11 -> 7.03, charcoal 3.02 -> 5.92 * - золото как ТЕКСТ 2.68 -> 5.18 (метал остаётся ярким в декоре) * - зелёное/красное 1.88 / 2.05 -> 5.67 / 6.37 * - чёрные острова убраны: рейл, арт-блок героя, .primary, .wallet-btn, .inp */ body.layout-b.theme-light { --void: #f3efe6; --surface-1: #fdfcf8; --surface-2: #eee8da; --hairline: #ddd5c2; --hairline-strong: #c9bfa4; --white: #191410; --bone: #2a231b; --smoke: #3f382f; /* Серая шкала: каждое значение >= 4.5:1 на surface-1 И на void. */ --ash: #4a4136; /* 9.74 / 8.71 */ --iron: #5f5648; /* 7.03 / 6.29 */ --charcoal: #6b6152; /* 5.92 / 5.29 */ --violet: #4534b8; --violet-glow: #35279a; /* Золото используется как ЦВЕТ ТЕКСТА в 25 местах — берём читаемый тон. Яркий метал остаётся в декоре через явные hex ниже. */ --gold: #8a6508; /* 5.18 / 4.64 */ --gold-soft: #7d5c07; /* 6.01 / 5.37 */ --green: #17743f; /* 5.67 / 5.07 */ --red: #b3261e; /* 6.37 / 5.70 */ background: var(--void); color: var(--bone); } /* ============================================================ 1. Рейл — светлый. В тёмной теме это якорь бренда, в светлой он превращался в единственный чёрный блок на белой странице. ============================================================ */ body.layout-b.theme-light .rail-b { background: linear-gradient(#faf7ef, #f1ebdd); border-right: 1px solid var(--hairline); } body.layout-b.theme-light .rail-b a.ri { color: #6b6152; } body.layout-b.theme-light .rail-b a.ri:hover { background: #e7dfcc; color: var(--white); } body.layout-b.theme-light .rail-b a.ri.on { background: rgba(138, 101, 8, .13); color: #7d5c07; } body.layout-b.theme-light .rail-b .ri-tip { background: #2a231b; color: #f3efe6; border-color: #2a231b; } body.layout-b.theme-light .rail-b a.ri i.dot { background: var(--green); } /* Логотип: угловатая золотая G рисовалась под ТЁМНЫЙ фон — у неё светлые блики (#fff…), которые на слоновой кости растворяются и знак читается как размытое пятно. Возвращаем ему тёмную подложку: Ink #171310 из палитры бренда. Знак не меняется, меняется только то, на чём он лежит. */ body.layout-b.theme-light .rail-b .rail-mark { background: #171310; border-radius: 9px; padding: 5px; width: 40px; box-sizing: border-box; box-shadow: 0 2px 8px rgba(60, 45, 10, .18); } body.layout-b.theme-light .top-brand img { background: #171310; border-radius: 7px; padding: 4px; box-sizing: border-box; } /* ============================================================ 2. Шапка ============================================================ */ body.layout-b.theme-light .top-b { background: rgba(243, 239, 230, .92); border-bottom-color: var(--hairline); } body.layout-b.theme-light .top-b .crumb-b, body.layout-b.theme-light .top-brand span { color: var(--white); } body.layout-b.theme-light .top-b .net-chip { color: var(--iron); } /* Кошелёк: был чёрной плашкой — делаем фирменным фиолетовым (белый текст 7.4:1) */ body.layout-b.theme-light .wallet-btn { background: #4534b8; color: #ffffff; border-color: #4534b8; } body.layout-b.theme-light .wallet-btn:hover { background: #35279a; border-color: #35279a; } body.layout-b.theme-light .wallet-btn:disabled { background: #8079b8; border-color: #8079b8; color: #ffffff; } body.layout-b.theme-light .wallet-btn.connected { background: var(--surface-1); color: var(--violet-glow); border-color: var(--hairline-strong); } body.layout-b.theme-light .wallet-btn .pulse { background: var(--green); } /* ============================================================ 3. Кнопки. В styles.css .primary = var(--white) фон + #000 текст: в светлой теме это чёрный блок с чёрным текстом одновременно. ============================================================ */ body.layout-b.theme-light .primary, body.layout-b.theme-light .feat-cta, body.layout-b.theme-light button.post, body.layout-b.theme-light .transaction-btn { background: #4534b8; border-color: #4534b8; color: #ffffff; } body.layout-b.theme-light .primary:hover, body.layout-b.theme-light .feat-cta:hover, body.layout-b.theme-light button.post:hover, body.layout-b.theme-light .transaction-btn:hover { background: #35279a; border-color: #35279a; color: #ffffff; } body.layout-b.theme-light .primary:disabled, body.layout-b.theme-light button.post:disabled, body.layout-b.theme-light .transaction-btn:disabled { background: #ece6d8; border: 1px solid var(--hairline-strong); color: #6b6152; } body.layout-b.theme-light .secondary { background: var(--surface-1); border-color: var(--hairline-strong); color: var(--bone); } body.layout-b.theme-light .secondary:hover { background: #f0eade; } /* ============================================================ 4. Карты и панели ============================================================ */ body.layout-b.theme-light .featured-b, body.layout-b.theme-light .mini-b, body.layout-b.theme-light .panel-b, body.layout-b.theme-light .promo-vs, body.layout-b.theme-light .strip-b, body.layout-b.theme-light .feat-b, body.layout-b.theme-light .room, body.layout-b.theme-light .panel, body.layout-b.theme-light .account-shell, body.layout-b.theme-light .transaction-card, body.layout-b.theme-light .account-hero-panel, body.layout-b.theme-light .rules-contract-card { background: var(--surface-1); border-color: var(--hairline); box-shadow: 0 8px 26px rgba(60, 45, 10, .07); } /* ============================================================ 5. Герой: арт-блок колеса. Был #000 — чёрный прямоугольник внутри белой карточки. Делаем тёплый песочный остров; колесо остаётся золотым и читается за счёт кольца и тени. ============================================================ */ body.layout-b.theme-light .feat-b .feat-art { background: radial-gradient(66% 74% at 50% 46%, rgba(138, 101, 8, .14), transparent 70%), linear-gradient(#f6efdc, #ece2c9); border-right-color: var(--hairline); border-radius: 12px 0 0 12px; } body.layout-b.theme-light .mini-wheel-wrap { filter: drop-shadow(0 12px 22px rgba(90, 66, 10, .22)); } /* Мини-колесо использует .wheel из styles.css с четырьмя секторами, два из которых тёмно-коричневые (#7d5318 / #b9872f). На светлом фоне это те же «грязные» клинья, что и на /wheel — переводим на золотую шкалу. */ body.layout-b.theme-light .mini-wheel-wrap .wheel { background: conic-gradient( #f6d98a 0deg 90deg, #b8860b 90deg 180deg, #fdeec0 180deg 270deg, #9a7108 270deg 360deg ); box-shadow: inset 0 0 0 2px rgba(125, 92, 7, .55), inset 0 9px 20px rgba(255, 255, 255, .34), inset 0 -12px 26px rgba(101, 74, 12, .26); } body.layout-b.theme-light .mini-wheel-wrap .wheel::after { background: radial-gradient(105% 105% at 32% 22%, rgba(255, 255, 255, .30), transparent 46%); } /* Мини-колесо: разделители заданы «28.5deg 30deg» — лежат целиком слева от указателя. from 0.75deg центрирует их на границе (29.25..30.75). */ body.layout-b.theme-light .mini-wheel-wrap::after { background: repeating-conic-gradient( from 0.75deg, rgba(0, 0, 0, 0) 0deg 28.5deg, rgba(101, 74, 12, .34) 28.5deg 30deg ); } body.layout-b.theme-light .wheel-center { background: radial-gradient(120% 120% at 50% 20%, #ffffff, #fbf7ec 70%); border: 1px solid rgba(125, 92, 7, .45); color: var(--white); } body.layout-b.theme-light .wheel-center b { color: var(--gold); } body.layout-b.theme-light .wheel-center small { color: var(--charcoal); } @media (max-width: 900px) { body.layout-b.theme-light .feat-b .feat-art { border-radius: 12px 12px 0 0; } } /* ============================================================ 5b. КОЛЕСО НА СТРАНИЦЕ ИГРЫ (/wheel) В тёмной теме колесо построено на чёрном: тёмно-коричневые сектора, чёрные спицы (rgba(0,0,0,.78)), чёрный хаб radial-gradient(#17181b,#000) и чёрные тени. На слоновой кости это читалось как грязь с дырой посередине. Здесь колесо переведено на тёплую золотую шкалу: контраст между секторами держится светлотой золота, а не примесью чёрного; всё чёрное заменено на тёмно-янтарное. ============================================================ */ /* Сектора: чередование светлого и глубокого золота вместо золото/коричневый. Спицы: заданы как «29deg 30deg», то есть лежат ЦЕЛИКОМ слева от границы секторов (граница на 30deg), а не по центру шва. from 0.5deg сдвигает их в 29.5..30.5 — спица садится ровно на шов, а верхняя (359.5..360.5) совпадает с указателем и с чертой обода. */ body.layout-b.theme-light .game-wheel { background: repeating-conic-gradient( from 0.5deg, rgba(0, 0, 0, 0) 0deg 29deg, rgba(101, 74, 12, .38) 29deg 30deg ), conic-gradient( #f6d98a 0deg 30deg, #b8860b 30deg 60deg, #ffd75e 60deg 90deg, #9a7108 90deg 120deg, #fdeec0 120deg 150deg, #8a6508 150deg 180deg, #f6d98a 180deg 210deg, #b8860b 210deg 240deg, #ffd75e 240deg 270deg, #9a7108 270deg 300deg, #fdeec0 300deg 330deg, #8a6508 330deg 360deg ) !important; border: none; box-shadow: inset 0 0 0 3px rgba(125, 92, 7, .42), inset 0 14px 34px rgba(255, 255, 255, .34), inset 0 -18px 40px rgba(101, 74, 12, .30) !important; } /* Световая линза: подсветку усиливаем, нижнюю затемняющую делаем янтарной */ body.layout-b.theme-light .game-wheel::after { background: radial-gradient(105% 105% at 32% 22%, rgba(255, 255, 255, .34), transparent 46%), radial-gradient(120% 120% at 50% 118%, rgba(101, 74, 12, .20), transparent 55%) !important; } /* Тень под колесом: была чёрная .6, на светлом фоне давала грязный ореол */ body.layout-b.theme-light .game-wheel-stage { filter: drop-shadow(0 18px 34px rgba(90, 66, 10, .22)) !important; } /* Обод. ГЕОМЕТРИЯ (замечание Amal 02.09): conic-gradient отсчитывает углы от 12 часов, поэтому черта, заданная как «0deg 1.6deg», лежит ЦЕЛИКОМ справа от указателя — визуально смещена на пол-ширины. Чтобы она села на указатель серединой, начало отсчёта сдвигаем на минус половину её ширины: from -0.8deg -> черта занимает -0.8deg..+0.8deg, центр ровно на 0deg. */ body.layout-b.theme-light .game-wheel-rim { background: repeating-conic-gradient(from -0.8deg, #8a6508 0deg 1.6deg, transparent 1.6deg 30deg), radial-gradient(closest-side, transparent calc(100% - 16px), rgba(125, 92, 7, .16) calc(100% - 15px), rgba(125, 92, 7, .38)) !important; } /* Хаб: был чёрным кругом — главная «дыра» в центре светлой страницы */ body.layout-b.theme-light .game-wheel-hub { background: radial-gradient(120% 120% at 50% 20%, #ffffff, #fbf6e9 72%) !important; border: 1px solid rgba(125, 92, 7, .45) !important; box-shadow: 0 8px 20px rgba(90, 66, 10, .18), inset 0 1px 0 rgba(255, 255, 255, .9) !important; } body.layout-b.theme-light .game-wheel-hub span { color: var(--charcoal); } body.layout-b.theme-light .game-wheel-hub b { color: var(--gold); } body.layout-b.theme-light .game-wheel-hub small { color: var(--iron); } /* Указатель сверху */ body.layout-b.theme-light .game-wheel-stage::before { border-top-color: #7d5c07; } body.layout-b.theme-light .game-wheel-stage:not(.gl-empty)::before { filter: drop-shadow(0 2px 5px rgba(90, 66, 10, .45)) !important; } /* Живые сектора (SVG-слой wheel-live) и пустое состояние */ body.layout-b.theme-light .gl-wheel-empty b { color: var(--bone); } body.layout-b.theme-light .gl-wheel-empty span { color: var(--iron); } /* ============================================================ 6. Текст внутри карточек ============================================================ */ body.layout-b.theme-light .feat-b h1, body.layout-b.theme-light .feat-b h2, body.layout-b.theme-light .feat-copy, body.layout-b.theme-light .feat-head, body.layout-b.theme-light .feat-b p { color: var(--bone); } body.layout-b.theme-light .feat-stats b { color: var(--gold); } body.layout-b.theme-light .feat-stats span, body.layout-b.theme-light .feat-stats small { color: var(--charcoal); } body.layout-b.theme-light .feat-timer { color: var(--white); } body.layout-b.theme-light .mini-c p, body.layout-b.theme-light .pv-body p { color: var(--smoke); } body.layout-b.theme-light .mini-m b { color: var(--gold); } body.layout-b.theme-light .mini-m span { color: var(--charcoal); } body.layout-b.theme-light .mini-b h3, body.layout-b.theme-light .featured-b h2 { color: var(--white); } body.layout-b.theme-light .promo-vs { background: linear-gradient(90deg, rgba(138, 101, 8, .09), transparent 55%), var(--surface-1); } body.layout-b.theme-light .pv-meta b.gr, body.layout-b.theme-light .fact-zero, body.layout-b.theme-light b.gr, body.layout-b.theme-light .safe-points span { color: var(--green); } body.layout-b.theme-light .muted, body.layout-b.theme-light span.muted { color: var(--iron); } /* ============================================================ 7. Формы и инпуты (в duels .inp — div, а не input: был чёрным) ============================================================ */ body.layout-b.theme-light input[type="text"], body.layout-b.theme-light input[type="number"], body.layout-b.theme-light select, body.layout-b.theme-light textarea, body.layout-b.theme-light .inp, body.layout-b.theme-light .account-input-row, body.layout-b.theme-light .field .inp { background: #ffffff; color: var(--bone); border-color: var(--hairline-strong); } body.layout-b.theme-light .inp input, body.layout-b.theme-light .inp b, body.layout-b.theme-light .inp span { color: var(--bone); } body.layout-b.theme-light input::placeholder { color: var(--iron); } body.layout-b.theme-light label, body.layout-b.theme-light .field label { color: var(--charcoal); } /* ============================================================ 8. Состояния и сообщения ============================================================ */ body.layout-b.theme-light .transaction-message.error { color: var(--red); } body.layout-b.theme-light .transaction-message.ok { color: var(--green); } body.layout-b.theme-light .transaction-note { color: var(--charcoal); } body.layout-b.theme-light .gpick { background: var(--surface-1); border-color: var(--hairline); } body.layout-b.theme-light .gpick.on { background: #f0e9d7; border-color: var(--hairline-strong); } body.layout-b.theme-light .gpick small { color: var(--iron); } body.layout-b.theme-light .fchip { background: var(--surface-1); border-color: var(--hairline); } body.layout-b.theme-light .fchip small { color: var(--charcoal); } /* ============================================================ 9. Таблицы, разделители, футер ============================================================ */ body.layout-b.theme-light table th { color: var(--charcoal); border-color: var(--hairline); } body.layout-b.theme-light table td { border-color: var(--hairline); color: var(--bone); } body.layout-b.theme-light hr { border-color: var(--hairline); } body.layout-b.theme-light footer, body.layout-b.theme-light .footer-net { color: var(--charcoal); } body.layout-b.theme-light .footer-net::before { background: var(--green); } /* ============================================================ 10. Переключатель темы (кнопка в шапке) ============================================================ */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; border: 1px solid var(--hairline, #292d30); background: transparent; color: var(--ash, #a1a4a5); transition: color .2s ease, border-color .2s ease; font-size: 15px; line-height: 1; padding: 0; } .theme-toggle-btn:hover { color: var(--gold, #ffca16); border-color: var(--hairline-strong, #3a3f43); } body.layout-b.theme-light .theme-toggle-btn { color: var(--charcoal); } /* ============================================================ 11. Мобильная выдвижная панель (.gl-dr — mobile-drawer.css) ПРОБЛЕМА (Amal 02.09): панель залита жёстким linear-gradient(#0a0a0b,#000) без учёта темы. В светлой теме текст красится в --ash #4a4136 и ложится на почти чёрный фон: замер по пикселям дал 2.01:1 для пунктов, 1.30:1 для заголовка «GetLuck», 1.83:1 для активного пункта. Норма 4.5:1. Решение: в светлой теме панель тоже светлая, цвета берём из палитры темы. ============================================================ */ body.layout-b.theme-light .mnav-panel { background: #faf7ef; border-color: var(--hairline); } body.layout-b.theme-light .mnav-panel a { color: var(--bone); } body.layout-b.theme-light .mnav-panel a:hover { background: #eee6d4; } body.layout-b.theme-light .mnav-btn { color: var(--bone); border-color: var(--hairline-strong); } /* Панель шторки */ body.theme-light .gl-dr { background: linear-gradient(#fdfcf8, #f3efe6); border-right: 1px solid #ddd5c2; } body.theme-light .gl-dr-head { border-bottom: 1px solid #ddd5c2; } body.theme-light .gl-dr-head span { color: #191410; } /* 13.9:1 */ body.theme-light .gl-dr-x { color: #5f5648; } body.theme-light .gl-dr-x:active { background: rgba(101, 74, 12, .08); } /* Логотип в шапке шторки нарисован под тёмный фон — даём подложку */ body.theme-light .gl-dr-head img { background: #171310; border-radius: 7px; padding: 4px; width: 34px; height: auto; box-sizing: border-box; } body.theme-light .gl-dr-i { color: #3f382f; } /* 10.4:1 */ body.theme-light .gl-dr-i:active { background: rgba(101, 74, 12, .07); } body.theme-light .gl-dr-i.on { background: rgba(69, 52, 184, .12); color: #35279a; /* 8.5:1 */ font-weight: 500; } body.theme-light .gl-dr-backdrop { background: rgba(60, 45, 10, .38); } /* Кнопка-бургер в шапке */ body.theme-light .gl-dr-btn { color: #3f382f; border-color: #c9bfa4; } body.theme-light .gl-dr-btn:active { background: rgba(101, 74, 12, .08); }