/* ========================================================================== ОСНОВНЫЕ СТИЛИ САЙТА Порядок подключения в index.html важен и намеренный: styles.css этот файл — общее оформление и раскладка games.css игровые экраны (свои токены --gx-*, container queries) slots.css каталог слотов referral.css партнёрка bonus-enhanced.css окно ежедневного бонуса legal.css документы mobile.css ПОСЛЕДНИМ — слой мобильных переопределений ПРАВИЛО: всё, что касается узких экранов, пишется в mobile.css, а не блоком @media здесь. Мобильные правила уже были размазаны по этому файлу шестнадцатью @media с пересекающимися брейкпоинтами и войной !important — правка в одном месте молча ломала другое. Разделы 25 и 27 ниже остались от той поры; новые не добавляйте. Игровые экраны сюда не лезут: у них своя система в games.css на container queries, поэтому игра перестраивается по ширине СВОЕГО блока, а не окна — и одинаково работает и на телефоне, и в узкой колонке. Разделы (по порядку в файле): 0–2 сброс, toast, кнопки 3 шапка и навигация 4–6 карточки, дашборд, баннеры главной 7–13 игры-витрина, статистика, меню, правая колонка 14–24 игровые экраны (общее), мины, bubbles, честность 25,27 СТАРЫЕ мобильные блоки — не расширять, см. mobile.css 26 SPA-страницы 28 авторизация 29 профиль игрока 30–32 касса далее бонусы, уровни, промокоды, экран загрузки ========================================================================== */ /* ========================================================================== ТОКЕНЫ ТЕМЫ ПЕРЕЕХАЛИ В theme.css Он подключается раньше этого файла и на всех страницах со своим , включая документы, где styles.css не нужен. Все цвета ниже берутся оттуда через var(--…); не возвращайте объявления сюда. ========================================================================== */ /* ------------------------------------------------------------------------ ТЁМНАЯ ТЕМА ДЛЯ ЛОКАЛЬНЫХ ТОКЕНОВ У карточек бонусов и лестницы уровней свои переменные — они появились раньше общей темы. Светлыми там были только подложки; их и перенацеливаем на общую палитру. Без этого выходило самое неприятное сочетание: подложка оставалась светлой (--lv-soft: #f1f5f9), а текст на ней брал var(--text), который в тёмной теме светлый. Белым по белому — карточка уровня читалась как пустая. Остальные локальные токены (--lv-ink, --lvb-ink, янтарь ВИПа) НЕ трогаем: это белый текст и фирменные градиенты на цветных плашках, они одинаковы в обеих темах. Список повторяется дважды — для системной настройки и ручного выбора. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bx-card { --bx-accent-soft: var(--surface-accent); } :root:not([data-theme="light"]) .lv-step { --lv-soft: var(--surface-2); } } :root[data-theme="dark"] .bx-card { --bx-accent-soft: var(--surface-accent); } :root[data-theme="dark"] .lv-step { --lv-soft: var(--surface-2); } /* ======================================================================== */ /* 1. БАЗОВЫЕ СТИЛИ И СБРОС */ /* ======================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } body { background-color: var(--bg); color: var(--text); /* Плавное переключение темы. Только фон и текст: анимировать всё подряд — значит получить заметную волну перерисовки на слабых телефонах. */ transition: background-color var(--theme-switch), color var(--theme-switch); padding: 16px; min-height: 100vh; } .app-container { width: 100%; max-width: 100%; background: var(--surface); border-radius: clamp(16px, 2vw, 32px); padding: clamp(16px, 2vw, 32px); box-shadow: 0 4px 24px rgba(0, 20, 40, 0.04); min-height: 100vh; } /* ======================================================================== */ /* 0. TOAST */ /* ======================================================================== */ .toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { padding: 12px 20px; border-radius: 12px; color: #ffffff; font-weight: 600; font-size: 14px; line-height: 1.3; opacity: 0; transform: translateY(-12px); transition: all 0.25s ease; pointer-events: auto; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18); text-align: center; max-width: 90vw; } .toast-show { opacity: 1; transform: translateY(0); } /* ТОСТ С ДЕЙСТВИЕМ. Появляется, когда сообщение не просто уведомляет, а предлагает выход, — например «доиграйте раунд в Минах, нажмите, чтобы перейти». Нажимаемость обязана быть видна: молча кликабельная плашка ничем не отличается от обычной, и нажать на неё никто не догадается. :hover перебивает transform у .toast-show по специфичности (два класса против одного) — иначе подсветка не сдвинула бы плашку. */ .toast-action { cursor: pointer; } .toast-action:hover, .toast-action:focus-visible { filter: brightness(1.08); transform: translateY(1px); } .toast-action:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } .toast-info { background: var(--accent); } .toast-success { background: var(--ok); } .toast-error { background: var(--danger); } /* ======================================================================== */ /* 2. КНОПКИ И УТИЛИТЫ */ /* ======================================================================== */ .btn-primary { background: var(--accent); color: #fff; border: none; padding: 14px 32px; border-radius: 40px; font-weight: 600; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; transition: all 0.2s ease; } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25); } .btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); padding: 8px 18px; border-radius: 20px; font-weight: 500; font-size: 13px; cursor: pointer; transition: all 0.2s ease; } .btn-ghost:hover { background: var(--surface-2); border-color: var(--accent); } .btn-arrow { transition: transform 0.2s ease; } .btn-primary:hover .btn-arrow { transform: translateX(4px); } /* ======================================================================== */ /* 3. НАВИГАЦИЯ (Header) */ /* ======================================================================== */ .top-nav { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--border-soft); margin-bottom: 24px; } .logo { font-size: 22px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 12px; cursor: pointer; } .logo img { height: 32px; width: auto; } .nav-center { display: flex; align-items: center; gap: 8px; background: var(--surface-2); padding: 6px; border-radius: 40px; } .nav-link { text-decoration: none; padding: 10px 24px; border-radius: 30px; color: var(--text-dim); font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 10px; transition: all 0.2s ease; cursor: pointer; } /* Иконки пунктов — svg. Цвет наследуется через currentColor, поэтому активный и наведённый пункт красят значок вместе с подписью: у прежних png так не получалось, там менялась только прозрачность. flex: none — иначе значок сжимается, когда подписи не хватает места. */ .nav-link svg { width: 19px; height: 19px; flex: none; opacity: 0.55; transition: opacity 0.2s ease; } .nav-link:hover { color: var(--accent); } .nav-link.active { background: var(--surface); color: var(--accent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); } .nav-link:hover svg, .nav-link.active svg { opacity: 1; } .nav-right { display: flex; align-items: center; gap: 20px; } /* Баланс с кассой по бокам. * * Вместо картинки банка на 1.1 МБ (она рисовалась в 18 px) — две кнопки: * слева вывод, справа пополнение. Пополнение справа и оно же единственное * цветное: это основное действие, и взгляд заканчивает движение на нём. * Поменять местами — переставить два блока в разметке, стили завязаны на * модификаторы --in / --out, а не на позицию. * * Разметка живёт в index.html и в balancePillHtml() внутри auth.js. */ .balance-pill { background: var(--surface); border: 1px solid var(--border); padding: 4px 5px; border-radius: 30px; display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .balance-pill:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } .balance-pill__sum { color: var(--accent); padding: 0 6px; min-width: 62px; text-align: center; /* Цифры не должны прыгать при каждом обновлении баланса */ font-variant-numeric: tabular-nums; white-space: nowrap; } .balance-pill__btn { width: 30px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: all 0.18s ease; } .balance-pill__btn svg { width: 15px; height: 15px; } .balance-pill__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .balance-pill__btn:active { transform: scale(0.92); } /* Пополнить — основное действие */ .balance-pill__btn--in { background: var(--accent); color: #ffffff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28); } .balance-pill__btn--in:hover { background: var(--accent-hover); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.38); } /* Вывести — второстепенное, поэтому без заливки */ .balance-pill__btn--out { background: var(--surface-3); color: var(--text-dim); } .balance-pill__btn--out:hover { background: var(--border); color: var(--text); } .avatar { width: 44px; height: 44px; background: var(--surface-accent); color: var(--accent); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 18px; cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; position: relative; } .avatar:hover { border-color: var(--accent); transform: scale(1.05); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); } .avatar.clickable::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; background: #22c55e; border: 2px solid var(--surface); border-radius: 50%; } /* ======================================================================== */ /* МЕНЮ ПРОФИЛЯ (аватар в шапке) */ /* */ /* Раздела «Игры» здесь больше нет: те же Мины, Бабл и Дайс стоят в левом */ /* меню и в нижней панели, третья копия ничего не добавляла. */ /* ======================================================================== */ .pmenu { position: absolute; /* Выше залипающей шапки (1000), но ниже модалок (2000): из меню открываются касса и колесо, они должны лечь поверх. */ z-index: 1500; width: 292px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16); animation: pmenuIn 0.18s ease; } @keyframes pmenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .pmenu__head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; } .pmenu__avatar { width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-accent); color: var(--accent); font-size: 17px; font-weight: 700; } .pmenu__id { min-width: 0; /* иначе длинная почта распирает меню */ } .pmenu__name { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pmenu__role { font-size: 12px; color: var(--text-faint); font-weight: 500; margin-top: 2px; } .pmenu__balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface-accent); border: 1px solid var(--border); } .pmenu__balance-main { display: flex; flex-direction: column; min-width: 0; } .pmenu__balance-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); } .pmenu__balance-value { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -0.4px; } .pmenu__fs { flex: none; padding: 5px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: var(--violet); font-size: 12px; font-weight: 700; } .pmenu__pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .pmenu__pay-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text-2); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all 0.18s ease; } .pmenu__pay-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .pmenu__pay-btn--in { background: var(--accent); border-color: var(--accent); color: #ffffff; } .pmenu__pay-btn--in:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #ffffff; } .pmenu__list { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--border-soft); } .pmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 10px 12px; border: none; border-radius: 12px; background: transparent; color: var(--text-2); font-family: inherit; font-size: 14px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .pmenu__item:hover { background: var(--surface-3); color: var(--text); } .pmenu__icon { width: 18px; height: 18px; flex: none; color: var(--text-faint); } .pmenu__item:hover .pmenu__icon { color: var(--accent); } .pmenu__item--exit { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border-soft); border-radius: 0 0 12px 12px; color: var(--danger); } .pmenu__item--exit:hover { background: var(--danger-soft); color: var(--danger); } .pmenu__item--exit:hover .pmenu__icon { color: var(--danger); } .pmenu__pay-btn .pmenu__icon { width: 15px; height: 15px; color: currentColor; } .auth-nav-btn { background: var(--accent); color: #fff; border: none; padding: 10px 20px; border-radius: 30px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .auth-nav-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); } /* ======================================================================== */ /* 4. КАРТОЧКИ */ /* ======================================================================== */ .card { background: var(--surface); border-radius: 24px; padding: 24px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); opacity: 0; transition: opacity 0.3s ease; } .card:hover::before { opacity: 1; } .card-interactive:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); border-color: rgba(37, 99, 235, 0.1); } .section-title { font-size: 11px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--surface-3); } /* ======================================================================== */ /* 5. МАКЕТ ДАШБОРДА */ /* ======================================================================== */ /* КОЛОНКИ ПЛАВНЫЕ, А НЕ СТУПЕНЯМИ — и это не украшательство. * * Раньше ширины боковых колонок переключались по @media на 1280, 1100 и 1024. * Каждая такая ступень идёт ВВЕРХ с ростом окна, и на её границе средняя * колонка проваливалась: при 1280px игра получала 657px, а при 1281px — 582. * То есть расширение окна на один пиксель ДЕЛАЛО ИГРУ УЖЕ на семьдесят пять. * * Ступенями это неизбежно: как ни подбирай числа, скачок ширины рельсов * всегда съедает больше, чем добавляет пиксель окна. Поэтому clamp — ширина * средней колонки растёт непрерывно, и провалов нет ни на одной ширине от * 860 до 1920 (проверено перебором по пикселю). * * Побочный, но главный выигрыш: при 1280px игре достаётся 694px вместо 657, * при 1366 — 758 вместо 663. Двухколоночная раскладка стола включается * с 1221px вместо прежних 1440 — то есть на всех обычных ноутбуках. */ .dashboard-layout { display: grid; grid-template-columns: clamp(196px, 14.8vw, 240px) minmax(0, 1fr) clamp(258px, 19.6vw, 320px); gap: clamp(18px, 1.9vw, 28px); } /* Правое меню есть не у всех страниц: у профиля и партнёрки оно пустое. Без этого колонка всё равно занимала свои 320px, и контент прижимался влево, оставляя справа полосу пустого места. */ .sidebar-right:empty { display: none; } /* Только на широком экране. Без min-width правило перебило бы одноколоночную раскладку телефона: у :has() специфичность выше, чем у .dashboard-layout в мобильных @media, и порядок в файле тут не спасает. 851px — на пиксель выше мобильного брейкпоинта (см. mobile.css). */ @media (min-width: 851px) { .dashboard-layout:has(.sidebar-right:empty) { grid-template-columns: clamp(196px, 14.8vw, 240px) minmax(0, 1fr); } } /* ======================================================================== */ /* 5.1 НОУТБУЧНАЯ РАСКЛАДКА: 851–1439px */ /* ======================================================================== */ /* ОБЕ БОКОВЫЕ КОЛОНКИ УХОДЯТ ВНИЗ, ИГРА ЗАБИРАЕТ ВСЮ ШИРИНУ. * * Зачем. Три колонки съедали столько, что средней оставалось меньше 640px, и * стол сваливался в один столб: панель настроек во всю ширину, доска под * сгибом. Игрок открывал мины и не видел ни одной клетки — ради чего пришёл, * оказывалось за нижним краем экрана. * * Сузить рельсы было нечем: категории с подписями вроде «Ice Fishing» и * карточки «Ваши раунды» ниже двухсот пикселей нечитаемы. Поэтому они не * ужимаются, а переезжают вниз — там ширины сколько угодно, и обе разложатся * в ряд вместо столбца. * * ПОРЯДОК: игра, история раундов, категории. Игра первой, потому что за ней и * пришли. Категории последними — это навигация, к ней возвращаются после игры, * а не до. * * ГРАНИЦА 1439, А НЕ 1279. Сначала я поставил её на 1280: стол там получает * 694px, две колонки складываются, формально всё хорошо. Но 694px — это ещё * и ширина сетки игр на главной, а в неё влезает ровно две карточки по 337px * вместо трёх по 230. Полоса 1280–1439 оказалась худшей из возможных: игре * тесно, карточкам просторно. За 1439 таких мест уже нет. * * ВСЕ СЕЛЕКТОРЫ ЗДЕСЬ НАЧИНАЮТСЯ С .dashboard-layout — И ЭТО ОБЯЗАТЕЛЬНО. * * Блок стоит в файле РАНЬШЕ базовых правил боковых колонок (.sidebar-right на * 1966-й строке, .category-list на 1610-й). Медиазапрос веса не добавляет, у * голых имён классов вес тот же — и побеждает то, что ниже по файлу, то есть * базовое. Первая версия этого блока так и не сработала: display: grid у * правой колонки проиграл базовому display: flex, зато align-items: start * применился (его в базовом нет) — и карточки, вместо ряда, встали столбцом * шириной по содержимому, оставив справа пустоту. * * Дополнительный класс поднимает вес и снимает зависимость от порядка строк. */ @media (min-width: 851px) and (max-width: 1439px) { .dashboard-layout, .dashboard-layout:has(.sidebar-right:empty) { grid-template-columns: minmax(0, 1fr); gap: 20px; } .dashboard-layout > .content-area { order: 1; } .dashboard-layout > .sidebar-right { order: 2; } .dashboard-layout > .sidebar-left { order: 3; } /* Карточки правого меню — в ряд, а не столбцом: во всю ширину столбец растянул бы страницу на два экрана пустотой по бокам. auto-fit, а не фиксированное число колонок: карточек на разных страницах разное количество, от одной до четырёх. */ .dashboard-layout > .sidebar-right { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; } /* Карточка тянется на всю высоту своей колонки: у «Ваших раундов» строк десяток, у «Статистики» четыре, и без этого нижние края шли лесенкой. */ .dashboard-layout > .sidebar-right > * { height: 100%; } /* Категории лентой. height: 100% из обычной раскладки здесь ни к чему — карточка больше не тянется до низа соседней колонки. */ .dashboard-layout .sidebar-left .card { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 18px; align-items: center; } .dashboard-layout .sidebar-left .section-title { grid-column: 1 / -1; margin-bottom: 0; } .dashboard-layout .category-list { flex-direction: row; flex-wrap: wrap; gap: 8px; } /* Пункт становится чипом: подпись рядом со значком, стрелка не нужна — она указывала вправо в вертикальном списке, а в ленте не значит ничего. */ .dashboard-layout .category-item { justify-content: flex-start; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--border); } /* Сдвиг вправо при наведении был уместен в столбце, где пункты стоят друг под другом. В ленте он толкает чип на соседа. */ .dashboard-layout .category-item:hover { transform: none; background: var(--surface-2); } .dashboard-layout .category-item::before, .dashboard-layout .cat-arrow { display: none; } /* Плитка бонуса встаёт справа от ленты и не растягивается: во всю ширину она превратилась бы в баннер и перетянула внимание с самих категорий. */ .dashboard-layout .sidebar-left .promo-block { margin-top: 0; } } /* ======================================================================== */ /* 6. БАННЕР */ /* ======================================================================== */ .banner { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%); border-radius: 28px; padding: 44px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; position: relative; overflow: hidden; color: #fff; box-shadow: 0 8px 32px rgba(37, 99, 235, 0.2); } .banner::before { content: ''; position: absolute; top: -80px; right: -40px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%); border-radius: 50%; animation: float 6s ease-in-out infinite; } .banner::after { content: ''; position: absolute; bottom: -60px; left: 20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 60%); border-radius: 50%; } @keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20px, 20px); } } .banner-content { max-width: 420px; position: relative; z-index: 2; } .banner-title { font-size: 36px; font-weight: 800; margin-bottom: 12px; color: #ffffff; line-height: 1.2; letter-spacing: -0.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .banner-desc { color: rgba(255, 255, 255, 0.9); font-size: 16px; margin-bottom: 28px; line-height: 1.6; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .banner-image img { width: 180px; position: relative; z-index: 2; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.2)); animation: float 4s ease-in-out infinite; } .banner .btn-primary { /* Числом, а НЕ токеном: кнопка лежит на баннере, который цветной в обеих темах. Токен поверхности сделал бы её тёмной на синем фоне. */ background: #ffffff; color: #2563eb; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } /* ======================================================================== */ /* 6.1 ПАРА БАННЕРОВ НА ГЛАВНОЙ */ /* */ /* Отдельный компонент, а не вариант .banner: тот же класс используют */ /* профиль, партнёрка и слоты как шапку страницы, и правки под главную */ /* поехали бы туда же. */ /* */ /* Слева широкий, справа узкий — пропорция 1.9 : 1. Оба баннера кликабельны */ /* целиком и сделаны ссылками, а не
с onclick: так работают клавиатура,*/ /* средняя кнопка мыши и «открыть в новой вкладке». Именно ссылками, а не */ /* кнопками: