/* Шрифты темы (локальные, с кириллицей) */ @font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/prata-400-cyrext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/prata-400-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/prata-400-lat.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:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/golostext-400-cyrext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/golostext-400-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/golostext-400-latext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/golostext-400-lat.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:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/golostext-500-cyrext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/golostext-500-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/golostext-500-latext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/golostext-500-lat.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:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/golostext-600-cyrext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/golostext-600-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/golostext-600-latext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/golostext-600-lat.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:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/golostext-700-cyrext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/golostext-700-cyr.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/golostext-700-latext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/golostext-700-lat.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;} /* ============================================================================ «Латунь» — тема frank-cassinos.casino ---------------------------------------------------------------------------- Слой поверх штатных стилей: подключается ПОСЛЕДНИМ (47-м) и переопределяет переменные темы, не трогая 46 PHP-шаблонов. Откат — убрать один из head.php и head2.php. Что ломает узнаваемость шаблона: шрифт Gilroy -> Golos Text, заголовки Prata форма 8px / 4px -> 20px / 14px, кнопки капсульные гамма фиолетовая -> зелёно-чёрная с латунью ============================================================================ */ /* ---------------------------------------------------------------- 1. ТОКЕНЫ */ html { --b-radius: 20px; --b-radius-sm: 14px; --font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --brass: #d3a64b; --brass-bright: #e3bd72; --brass-deep: #b98b34; } /* --- Тёмная тема (по умолчанию: ) --- */ html.dark { --bg_main__100: #131b16; --bg_main__200: #131b16; --bg_main__300: #0d1310; --bg_primary__100: #101712; --bg_primary__200: #18211b; --bg_secondary__100: #17201a; --bg_secondary__200: #243228; --bg_secondary__300: #16201a; --bg_secondary__400: #101712; /* «Поднятые» поверхности: выпадашки, чипы, счётчики. В оригинале этот токен был #673893 — заметно светлее фона. Первый вариант я сделал почти в цвет фона, из-за чего выпадашка языка и счётчик «15» пропали. */ --bg_light__100: #3b5245; --bg_light__100-rgb: 59 82 69; --bg_light_hover__100: #46614f; --bg_light_hover__200: #46614f; --bg_light_hover__300: #35483c; --color_main__100: #eef2ec; --color_main__200: #c2d2c6; --color_main__300: #a8bcad; --color_primary__100: #eef2ec; --color_secondary__100: #a8bcad; --color_secondary__300: #eef2ec; --color-nav: #a9bcae; --color-dark: #94a898; --color_link__100: #d3a64b; --color_link_hover__100: #e3bd72; --primary-1: #131b16; --primary-50: #131b16; --primary-100: #17201a; --primary-200: #1a241d; --primary-300: #8fa093; --primary-400: #2a3a2f; --primary-500: #e3bd72; --primary-600: #d3a64b; --primary-700: #b98b34; --primary-800: #eef2ec; --primary-bg: #0d1310; --gradient-primary: radial-gradient(73.33% 73.33% at 50% 50%, #e3bd72 0%, #b98b34 100%); --gradient-purple: linear-gradient(90deg, #b98b34 .06%, #e3bd72 98.49%); --gradient-orange: linear-gradient(90deg, #e3bd72 -18.18%, #c9992f 49.18%, #e3bd72 120%); --gradient-yellow: linear-gradient(90deg, #c9992f 0%, #e3bd72 100%); } /* --- Светлая тема (по переключателю) --- */ html:not(.dark) { --bg_main__100: #f6f3ec; --bg_main__200: #f6f3ec; --bg_main__300: #f6f3ec; --bg_primary__100: #ffffff; --bg_primary__200: #ffffff; --bg_secondary__100: #efeae0; --bg_secondary__200: #efeae0; --bg_secondary__300: #efeae0; --bg_secondary__400: #efeae0; --bg_light__100: #e8e1d3; --bg_light__100-rgb: 232 225 211; --bg_light_hover__100: #e3dbc9; --bg_light_hover__200: #e3dbc9; --color_main__100: #1b211d; --color_main__200: #1b211d; --color_main__300: #5c6b60; --color_primary__100: #1b211d; --color_secondary__100: #5c6b60; --color_secondary__300: #1b211d; --color-nav: #5c6b60; --color_link__100: #9a7327; --color_link_hover__100: #b98b34; --primary-1: #f6f3ec; --primary-50: #f6f3ec; --primary-100: #efeae0; --primary-200: #efeae0; --primary-300: #b9c0b6; --primary-400: #e8e1d3; --primary-800: #1b211d; --primary-bg: #ffffff; } /* ------------------------------------------------------- 2. ТИПОГРАФИКА */ body, button, input, select, textarea { font-family: var(--font-family); } /* Заголовки — антиква. Меняет характер сильнее, чем цвет. */ h1, h2, h3, .homeinfo h1 { font-family: 'Prata', 'Times New Roman', Georgia, serif; font-weight: 400; letter-spacing: -.01em; } h1, .homeinfo h1 { line-height: 1.18; } /* Текст на баннерах — гротеск, не антиква: Prata витринная, в короткой строке на плашке она проваливается по весу и выглядит случайной. */ .slide__wrapper b { font-family: var(--font-family); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; } /* Надзаголовки в слайдере — разрядка, которой в шаблоне нет */ .slide__sb { text-transform: uppercase; letter-spacing: .14em; font-size: .78em; font-weight: 600; } /* ------------------------------------------------------------ 3. ФОРМА */ .v-btn, .slide__btn, .btn_all_slider { border-radius: 999px !important; } .plink, .game-card, .card { border-radius: var(--b-radius); } /* -------------------------------- 4. ЦВЕТА, ВШИТЫЕ В РАЗМЕТКУ (44 класса) */ /* Оттенки стоят прямо в class= и минуют переменные. Перекрываем правилами на те же классы — правки шаблонов не нужны. Регистр важен: Tailwind генерирует селектор ровно так, как написано в HTML. */ /* --- сиренево-фиолетовая гамма: главный признак шаблона --- */ .dark .dark\:text-\[\#F2F0FF\], .text-\[\#F2F0FF\] { color: #eef2ec !important; } .border-\[\#F2F0FF\] { border-color: #d7ddd4; } .text-\[\#574D81\] { color: #5c6b60; } .text-\[\#413B63\] { color: #1b211d; } .dark .dark\:text-\[\#A8B2D2\], .text-\[\#A8B2D2\] { color: #8fa093 !important; } .text-\[\#D7D3E8\] { color: #c3cec6; } .bg-\[\#B6B0D7\] { background-color: #a9bcae; } .bg-\[\#7F6FC9\] { background-color: var(--brass); } .bg-\[\#F7F5FE\] { background-color: #f6f3ec; } .bg-\[\#E8E5FF\] { background-color: #e8e1d3; } .border-\[\#DAD3EE\] { border-color: #ddd6c6; } /* --- тёмные сине-серые фоны --- */ .bg-\[\#0f141c\] { background-color: #0d1310; } .text-\[\#192232\] { color: #1b211d; } .text-\[\#2C3034\] { color: #1b211d; } .text-\[\#434959\] { color: #3a463d; } .dark .dark\:bg-\[\#192232\] { background-color: #131b16 !important; } .dark .dark\:bg-\[\#1f2a3d\] { background-color: #17201a !important; } .dark .dark\:bg-\[\#27344b\] { background-color: #1e2922 !important; } .dark .dark\:bg-\[\#282C37\] { background-color: #17201a !important; } .dark .dark\:bg-\[\#243045\] { background-color: #1a241d !important; } .dark .dark\:bg-\[\#3F536A\] { background-color: #2a3a2f !important; } .dark .dark\:bg-\[\#545d74\] { background-color: #3a463d !important; } .dark .dark\:text-\[\#525A70\] { color: #6d7d71 !important; } .dark .dark\:border-\[\#434959\] { border-color: #2a3a2f !important; } .dark .dark\:border-\[\#38485B\] { border-color: #2a3a2f !important; } /* --- янтарный акцент -> латунь --- */ .text-\[\#F5A509\], .text-\[\#FEAB07\] { color: var(--brass); } .border-\[\#F4A202\] { border-color: var(--brass-deep); } .bg-\[\#F9C154\] { background-color: var(--brass-bright); } /* Счётчик «все N» рядом с заголовками лент: у него есть и .bg-[#B6B0D7], и dark:bg-secondary-200 — в тёмной теме должен побеждать второй. */ /* Семантику не трогаем: зелёный «выигрыш» и красный «ошибка» должны оставаться узнаваемыми статусами, а не частью гаммы. */ /* ------------------------------------------- 5. УБРАННЫЙ ВЫБОР ТЕМЫ */ /* Сайт теперь только тёмный: тема «Латунь» построена под тёмный фон, а светлый вариант был ещё и общим признаком шаблона сети. */ .switch-mode, .switch-mode-pre { display: none !important; } /* --------------------------------------------------------- 6. АКЦЕНТЫ */ a:hover { color: var(--brass-bright); } .gamemenu .active { color: var(--brass) !important; } html.dark ::-webkit-scrollbar-thumb { background: #2a3a2f; border-radius: 999px; } html.dark ::-webkit-scrollbar-track { background: #0d1310; } ::selection { background: var(--brass); color: #17140b; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============ 7. ФИОЛЕТОВЫЙ, ЗАШИТЫЙ В ПРАВИЛАХ CSS ============ */ /* 23 правила красят элементы напрямую, мимо переменных, — перекрытие токенов их не ловило. Отсюда и оставшаяся сиреневая вкладка. */ .v-tabs button.active, .bonus-rang__tab.active, .v-btn-primary, .slot__body-wrapper-type .btn-primary, .gradient--purple, .bg-tour-purple, .app_footer__mobile-link_main, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight, .v-date .dp__active_date, .dp__overlay_cell_active, .dp__range_end, .dp__range_start { background: linear-gradient(90deg, #b98b34 0%, #e3bd72 100%) !important; color: #17140b !important; border-color: transparent !important; } .v-btn-light-gradient .btn-overlay, .v-input__gradient, .heading-1:after, .v-toggle:before { background: linear-gradient(90deg, #b98b34 0%, #e3bd72 100%) !important; } .text-gradient-primary { background: linear-gradient(90deg, #e3bd72 0%, #d3a64b 100%) !important; -webkit-background-clip: text; background-clip: text; } .game_sidebar-icon, .profile-game__icon, .v-spoiler2__header-icon, .bonus-header__logo, .profile-pagination button:after { background: var(--brass) !important; } /* ============ 8. ТАБЛИЦА ВЫИГРЫШЕЙ ============ */ /* Было: тёмный текст #2c2d33 на тёмных строках — цифры не читались, плюс каждая строка оформлена как отдельная «таблетка». Делаем список: тонкие разделители, моноширинные цифры, латунь на сумме. */ .livefeed_table { color: var(--color_main__100); border-spacing: 0 !important; } .livefeed_table th > div { background: transparent !important; color: var(--color_main__300) !important; font-size: .72em; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; border-radius: 0 !important; padding-bottom: .9rem; border-bottom: 1px solid rgba(211,166,75,.28); } .livefeed_table td > div { background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid rgba(168,188,173,.10); min-height: 3.4rem; transition: background .18s; } .livefeed_table tr:hover td > div { background: rgba(59,82,69,.35) !important; } /* Сумма выигрыша — латунь и табличные цифры, чтобы разряды стояли в столбик */ .livefeed_table td:last-child > div { color: var(--brass-bright) !important; font-variant-numeric: tabular-nums; font-weight: 700; } .livefeed_table td:last-child > div * { color: inherit !important; } /* Ник игрока — приглушённый, он вторичен */ .livefeed_table td:nth-child(3) > div { color: var(--color_main__300) !important; font-variant-numeric: tabular-nums; } /* ============ 9. ОСТАТКИ СТАРОЙ ГАММЫ В ПРАВИЛАХ ============ */ /* Пункты выпадашек красятся напрямую, минуя утилиты Tailwind: в списке языков текст оставался старым лиловым #a8b2d2. */ .v-select__dropdown-item, .v-select__dropdown-item span { color: var(--color_main__300) !important; } .v-select__dropdown-item:hover { color: var(--color_main__100); background: var(--bg_light_hover__100); } .v-select__dropdown { background: var(--bg_secondary__200); border: 1px solid rgba(211,166,75,.18); } /* Единственная кнопка входа в шапке — основная, латунная */ .app_header-sign.logbut { min-width: 8.5rem; } /* ============ 10. ФИЛЬТР ОТТЕНКА НА ИКОНКАХ ШАПКИ ============ */ /* Шаблон подкрашивал иконки через filter: hue-rotate(201deg) — приём из фиолетовой темы. На латунных иконках он даёт сиреневый. Заменяем на обесцвечивание: оттенок не едет, различие активного и неактивного пункта сохраняется. */ .header-nav img { filter: none !important; } .header-nav a:not(.router-link-active) img, .header-nav span:not(.router-link-active) img, .header-nav button:not(.router-link-active) img { filter: grayscale(.55) brightness(.82) !important; } .header-nav a:hover img, .header-nav span:hover img { filter: none !important; } /* ============ 11. КНОПКА НА БАННЕРЕ ============ */ /* Фон приходил как rgba(97,37,175,.93) — остаток фиолетовой гаммы. */ .slide__btn, .slide__btn.openchat, span.slide__btn { background: linear-gradient(90deg, #b98b34 0%, #e3bd72 100%) !important; color: #17140b !important; font-weight: 700; } .slide__btn:hover { filter: brightness(1.06); } /* ============================================================================ 12. СКЕЛЕТ: СЕТКА ВМЕСТО КАРУСЕЛЕЙ ---------------------------------------------------------------------------- Главная подпись шаблона — шесть горизонтальных каруселей с горизонтальными плитками. Ленты построены на flex, а Swiper inline-стилей не выставляет, поэтому переход на сетку делается стилями, без правки шаблонов. ========================================================================== */ .home-slider .swiper-container, .home-slider .slider { overflow: visible !important; } .home-slider .swiper-wrapper { display: grid !important; /* Фиксированное число колонок, а не auto-fill: тогда 12 плиток дают ровные ряды на любом брейкпоинте и не остаётся «хвоста» из одной. */ grid-template-columns: repeat(6, 1fr); gap: 14px; transform: none !important; /* гасим сдвиг, который ставит Swiper */ margin-left: 0 !important; } /* Ширина слайда задавалась Tailwind-классами basis-* — снимаем */ .home-slider .swiper-slide { width: auto !important; flex: none !important; padding-left: 0 !important; margin: 0 !important; } /* Плитка. ВАЖНО: обложки игр приходят из общей БД горизонтальными (контейнер картинки имеет пропорцию 10:6). Насильные 3:4 на карточке растягивали её и оставляли ~100px пустоты под картинкой — карточка должна расти по содержимому. */ .home-slider .card-slot { height: auto !important; } .home-slider .card-slot_wrapper { width: 100%; } .home-slider .section-slots { gap: 8px !important; } /* Стрелки прокрутки в сетке не нужны */ .home-slider ~ * .slid__next, .home-slider ~ * .slid__prev, .slid__next, .slid__prev { display: none !important; } /* Порядок лент: заученную последовательность ломаем. Живые дилеры и новинки наверх, слоты ниже. */ .slideContainer:has(.home-slider.live) { order: 1; } .slideContainer:has(.home-slider.new) { order: 2; } .slideContainer:has(.home-slider.slots) { order: 3; } .slideContainer:has(.home-slider.bonusbuy) { order: 4; } .slideContainer:has(.home-slider.instant) { order: 5; } .slideContainer:has(.home-slider.liveblackjack) { order: 6; } /* Липкая строка поиска во всю ширину — тоже примета шаблона */ .home-search.sticked { position: static !important; } /* Показываем два полных ряда; остальное — по кнопке «Больше» */ .home-slider .swiper-slide:nth-child(n+13) { display: none !important; } @media (max-width: 1100px) { .home-slider .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .home-slider .swiper-wrapper { grid-template-columns: repeat(3, 1fr); gap: 10px; } } /* ============================================================================ 13. ПОДВАЛ: ИЗ ТРЁХ ПОЛОС В АСИММЕТРИЧНУЮ СЕТКУ ---------------------------------------------------------------------------- Было: колонки ссылок -> полоса платёжек -> низ с копирайтом. Ровно та же схема у всех клонов. Делаем двухчастную композицию: слева бренд и правовой блок, справа ссылки; платёжки уезжают вниз мелкой строкой. ========================================================================== */ .app_footer_wrap { display: grid !important; grid-template-columns: minmax(260px, 1fr) 1.9fr; grid-template-areas: "brand links" "meta meta"; gap: 34px 60px; align-items: start; padding: 34px 20px 0; /* Ограничение ширины было на .container у .app_footer__nav — я его снял, и на широком экране подвал расползался, а логотип уходил за край. Возвращаем ограничение на сам грид. */ max-width: 1320px; margin-inline: auto; border-top: 1px solid rgba(211,166,75,.22); } .app_footer__bottom { grid-area: brand; display: block !important; } .app_footer__nav { grid-area: links; } .app_footer__methods { grid-area: meta; border-top: 1px solid rgba(168,188,173,.12); padding-top: 18px; } /* Ссылки — четыре колонки; язык и соцсети уходят в блок бренда */ .app_footer__nav { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 28px; max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; } .app_footer__nav-item:has(.v-select), .app_footer__nav-item:has(.app_footer__nav-socials) { grid-column: span 2; flex-direction: row !important; align-items: center; gap: 14px; } /* Заголовки колонок — разрядка вместо жирности */ .app_footer__nav-item-title { font-size: 11px !important; letter-spacing: .15em; text-transform: uppercase; color: var(--brass) !important; margin-bottom: 6px; } .app_footer__nav-item-link { color: var(--color_main__300) !important; transition: color .15s; } .app_footer__nav-item-link:hover { color: var(--color_main__100) !important; } /* Правовой текст — узкая колонка, читается как абзац, а не как подпись */ .app_footer__bottom-desc { max-width: 42ch; font-size: 12.5px; line-height: 1.65; } .app_footer__bottom-row { margin-bottom: 14px; } .app_footer__bottom-trix { margin-top: 14px; color: var(--color_main__300); } /* ============ 14. ОБЩИЕ АССЕТЫ: ПЛАТЁЖКИ И ПРОВАЙДЕРЫ ============ */ /* 75 логотипов провайдеров совпадают побайтно у всех восьми сайтов — это заметный отпечаток. Файлы не трогаем, меняем подачу: приглушённый монохром, цвет проступает только при наведении. */ .app_footer__methods-grid img, .app_footer__methods img { filter: grayscale(1) brightness(1.5) opacity(.45); transition: filter .2s; max-height: 22px; } .app_footer__methods img:hover { filter: grayscale(0) brightness(1) opacity(1); } img[src*="/img/providers/"] { filter: grayscale(1) brightness(1.35) opacity(.55); transition: filter .2s; } a:hover img[src*="/img/providers/"] { filter: grayscale(0) brightness(1) opacity(1); } @media (max-width: 900px) { .app_footer_wrap { grid-template-columns: 1fr; grid-template-areas: "links" "brand" "meta"; gap: 26px; } .app_footer__nav { grid-template-columns: repeat(2, minmax(0,1fr)); } .app_footer__nav-item:has(.v-select), .app_footer__nav-item:has(.app_footer__nav-socials) { grid-column: span 1; } } /* ============================================================================ 15. ШАПКА: ИЗ ОДНОЙ СТРОКИ В ДВА ЯРУСА ---------------------------------------------------------------------------- Было: [бургер+лого] [меню] [кнопка] — одна строка 68px, ровно как у всех клонов. Разносим на два яруса: сверху бренд и действие, снизу навигация во всю ширину. Композиция читается иначе с первого взгляда. ========================================================================== */ @media (min-width: 1280px) { /* Шапка фиксированная с высотой 68px, а контент отодвигается ровно на столько же через margin-top у .app_main. Ярусов стало два — обе величины надо поднять согласованно, иначе контент наедет на шапку. */ .app_header { height: 104px !important; align-items: flex-start !important; } .app_main { margin-top: 104px !important; } /* Логотип прижимаем к верхнему ярусу — иначе он центрируется по всей высоте шапки и провисает между строками. */ .app_header__aside { align-self: flex-start !important; margin-top: 8px !important; } .app_header__container { flex-wrap: wrap !important; align-items: center; row-gap: 0; } /* кнопка входа — в верхний ярус, прижата вправо */ .app_header__container .logbuts { order: 1; margin-left: auto; } /* навигация — отдельная строка во всю ширину */ .app_header__container .header-nav { order: 2; flex: 1 0 100% !important; justify-content: flex-start; height: 46px !important; margin-top: 2px; border-top: 1px solid rgba(211,166,75,.16); padding-top: 4px; } /* пункты меню — разрядка вместо привычного плотного набора */ .header-nav > a, .header-nav > span { text-transform: uppercase; letter-spacing: .09em; font-size: 12.5px; font-weight: 600; } } /* Логотип чуть крупнее — он теперь один в верхнем ярусе */ .app_header__aside .header-logo_host img { max-height: 34px; } /* Тонкая латунная линия под всей шапкой */ .app_header { border-bottom: 1px solid rgba(211,166,75,.18); } /* ============================================================================ 16. ПОСЛЕДНИЕ ОЧАГИ ФИОЛЕТОВОГО ---------------------------------------------------------------------------- Градиент #993EF7 -> #B84BFF красит подчёркивание в меню, кнопки турниров, кнопку «На деньги» на карточке и плитки бокового меню. Искал по тону в HSL, а не по списку hex — прошлый скан эти места пропускал. ========================================================================== */ .card-tournament-btn, .card-slot-play, .v-btn-orange, [class*="bg-sf-"] { background-image: linear-gradient(90deg, #b98b34 0%, #e3bd72 100%) !important; background-color: transparent !important; color: #17140b !important; } /* Подчёркивание активного пункта меню */ .header-nav a::after, .header-nav span::after, .header-nav button::after { background-image: none !important; background-color: var(--brass) !important; } /* Кнопка «На деньги» на карточке была 130×48 — крупно для плитки 197px. Ужимаем и делаем обе кнопки одного размера. */ .card-slot-play, .card-slot_wrapper .v-btn { width: auto !important; min-width: 96px; max-width: 78% !important; height: 34px !important; font-size: 12.5px !important; padding: 0 14px !important; } .card-slot_wrapper .die, .card-slot_wrapper [class*="card-slot-btns"] { gap: 6px !important; } /* Плитки бокового меню (Кешбэк, Рейкбэк, Турниры, Бонусы) были разноцветными — фиолетовая, зелёная, оранжевая, синяя. Приводим к теме: тёмная подложка, латунная типографика. */ [class*="bg-sf-"] { background-image: none !important; background-color: var(--bg_secondary__200) !important; color: var(--color_main__100) !important; border: 1px solid rgba(211,166,75,.22); /* Высота была жёсткой (h-[65px]) при overflow:hidden. После смены шрифта и добавления рамки содержимое перестало помещаться и срезалось сверху. Пусть плитка растёт по содержимому. */ height: auto !important; min-height: 65px; padding: 9px 8px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; overflow: visible !important; } [class*="bg-sf-"] img { max-height: 26px !important; width: auto !important; object-fit: contain !important; flex: none; } [class*="bg-sf-"] > * { max-width: 100%; } [class*="bg-sf-"]:hover { background-color: var(--bg_light_hover__100) !important; } /* Остатки сиреневого в тексте */ [style*="rgb(198, 94, 255)"], .log_keep.remember__container { color: var(--color_main__300) !important; } /* ============================================================================ 17. ЦВЕТНЫЕ PNG-ПЛИТКИ МЕНЮ -> ЕДИНЫЙ НАБОР ---------------------------------------------------------------------------- cashback.png, rakeback.png, tournaments.png, bonus.png — растровые картинки старого шаблона, файлом их на SVG не подменить. Прячем и рисуем те же иконки Lucide через CSS-маску: цвет берётся из темы. ========================================================================== */ [class*="bg-sf-"] img { display: none !important; } [class*="bg-sf-"]::before { content: ''; display: block; width: 26px; height: 26px; flex: none; background-color: var(--brass); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .bg-sf-cashback::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); } .bg-sf-rakeback::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); } .bg-sf-tournaments::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E"); } .bg-sf-bonus::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); } /* ============ 18. ТУРНИРЫ: НИЖЕ И ДРУГОЙ ВИД ============ */ /* Блок турниров стоял сразу под лентой — уводим его вниз, ближе к подвалу, и снимаем «карточный» вид старого шаблона. */ /* Блок турниров — это .slider-tournament, прямой ребёнок флекс-контейнера лент. Ленты идут order 1..6, поэтому турниры ставим после них, а таблицу выигрышей — в самый низ. */ .slider-tournament { order: 8 !important; } .livefeed { order: 9 !important; } .card-tournament { border: 1px solid rgba(211,166,75,.20) !important; background: var(--bg_secondary__100) !important; border-radius: var(--b-radius) !important; overflow: hidden; } .card-tournament-btn { height: 40px !important; font-size: 13px !important; }