/* ── Стиль оформления — независимая ось (Soft по умолчанию · Glass) ─────────── Меняет МАТЕРИАЛ поверхностей через класс на (.style-glass), поверх цвета (пресет) и режима (light/dark). Стиль меняет материал, НЕ геометрию: радиусы и отступы — инварианты между Soft и Glass. */ /* ── База: фиксы, не зависящие от стиля ───────────────────────────────────── */ /* Базовый .container (an_app_smooth.css) — скруглённая overflow:hidden «карточка-приложение» max-width:400 c фоном/тенью. Она обрезала full-bleed hero (скруглённые углы + серый бортик). Для страницы участника убираем обрамление: страница во всю ширину устройства, без рамки/клипа. */ body.participant-page .container{ max-width: 480px; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } /* Запрет горизонтального скролла страницы. В старых шаблонах его давал .container{overflow:hidden}, но у нас он снят (см. выше — для full-bleed hero). Без этой блокировки блоки с отриц. margin (prize-track {margin:0 -1rem}, шары фона) вылезают за viewport и юзер может свайпнуть страницу вбок / съехать «за границу». Тени/паттерны/full-bleed внутри контейнера НЕ страдают. */ html, body.participant-page{ overflow-x: hidden; max-width: 100vw; } body.participant-page{ overscroll-behavior-x: none; } /* Убрать ВСЕ видимые скроллбары на странице (скролл колесом/тачем работает, полоса не видна). Раньше прятали только у листа попапа — оставались скроллы страницы/контейнера/iframe. */ html{ scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar{ width: 0; height: 0; display: none; } body.participant-page, body.participant-page *{ scrollbar-width: none; -ms-overflow-style: none; } body.participant-page::-webkit-scrollbar, body.participant-page *::-webkit-scrollbar{ width: 0; height: 0; display: none; } /* тени карточек не режутся контейнером (.container из an_app_smooth: overflow:hidden) */ body.participant-page .container{ overflow: visible; } /* КОРЕНЬ бага «жирный текст крупнее»: an_app_smooth.css `*{font-size:16px}` ставит 16px НАПРЯМУЮ на каждый элемент, включая / → они НЕ наследуют размер контейнера (14/13/12px), а получают 16px от `*`. Глобальный фикс: инлайновые акценты наследуют размер родителя (специфичность (0,1,2) бьёт `*` (0,0,0)). Чинит весь класс бага (share-описание, reftrack, доп-блок, офферы и т.д.); делает прежние точечные `font-size:1em` патчи избыточными. Заголовки/таймеры не затронуты — у них свой размер. */ body.participant-page b, body.participant-page strong, body.participant-page em, body.participant-page i{ font-size: inherit; } /* тот же корень для ВЕСА: базовый an_app_smooth `*{font-weight:400}` плющит / до 400 (фикс был только для size). Возвращаем полужир — иначе при смене шрифта «жирность не сохраняется». */ body.participant-page b, body.participant-page strong{ font-weight: 700; } /* ── Шрифтовые пары (ось «Шрифт»). Инжектятся как --font-sans (body) и --font-display (заголовки) инлайн-стилем на ; нужный Google-шрифт грузит из шаблона. КОРЕНЬ: базовый an_app_smooth `*{font-family:system}` (специфичность 0,0,0) бьёт наследование от body → токен на body не доходит до детей. Перебиваем через :where() (тоже 0 спец., но ПОЗЖЕ в каскаде): текст → --font-sans; заголовки → --font-display; моно (коды/таймеры) НЕ трогаем — у их правил `var(--font-mono)` специфичность выше 0 → они выигрывают у :where(). */ :where(body.participant-page) *{ font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); } :where(body.participant-page) :where(h1, h2, .heading-2xl, .rf-hero-title, .section-header-title, .rf-offers-title, .rf-offers-all-title, .rf-offer-title, .gift-title, .rf-prize-title, .rf-prize-name, .rf-block-title, .rf-reftrack-title, .about-raffle-header-title, .grouped-card-item .font-semibold){ font-family: var(--font-display, var(--font-sans, inherit)); } /* моно (коды) пере-утверждаем — :where(text) выше мог бы их задеть на элементах без своего правила */ :where(body.participant-page) :where(.rf-scratch-code){ font-family: var(--font-mono); } /* Таймер — редактируемый шрифт (ось timerFont). Правило с реальной специфичностью бьёт .countdown-digits из an_tma.css (weight/ls). Без класса timerfont-* фолбэк = моно/700/.05em (как было). */ body.participant-page .countdown-digits{ font-family: var(--timer-font, var(--font-mono)); font-weight: var(--timer-weight, 700); letter-spacing: var(--timer-ls, .05em); font-variant-numeric: tabular-nums; } body.participant-page.timerfont-auto { --timer-font: var(--font-display, var(--font-sans)); --timer-weight:700; --timer-ls:.02em; } body.participant-page.timerfont-mono { --timer-font:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --timer-weight:500; --timer-ls:.02em; } body.participant-page.timerfont-heavy { --timer-font:'Manrope', var(--font-sans, sans-serif); --timer-weight:800; --timer-ls:-.02em; } body.participant-page.timerfont-clean { --timer-font:'Inter', var(--font-sans, sans-serif); --timer-weight:600; --timer-ls:.01em; } /* hero без общей подложки — системно (оба режима): внутри свои под-секции */ body.participant-page #success > .card{ background: transparent; border: none; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } /* КОРЕНЬ «разного блюра»: .animate-fade-in анимирует opacity/transform → элемент становится backdrop-root, и backdrop-filter у него/вложенных стеклянных поверхностей сэмплит пустого предка вместо фона страницы (кнопка «Подробнее» под hero-картой блюрила пусто, а grouped-card — реальный фон). Под Glass отключаем входную анимацию (косметика) — backdrop-filter у ВСЕХ стеклянных поверхностей сэмплит один и тот же фон → одинаковый блюр. Soft не трогаем. */ body.participant-page.style-glass .animate-fade-in{ animation: none; opacity: 1; } /* единый источник межсекционного отступа. ВАЖНО: перешли с `* + *` (source-order) на `gap` — иначе CSS-перестановка блоков (order) ломала бы отступы (margin оставался бы на исходных парах, а не на визуально-соседних). */ body.participant-page .container{ gap: 2.25rem; } body.participant-page .container > * + *{ margin-top: 0; } /* слот переставляемого блока (flex-child контейнера); порядок задаёт inline `order`. Внутренние mt-* партиалов гасим — вертикальный ритм держит только gap контейнера. */ body.participant-page .rf-slot{ width: 100%; min-width: 0; } body.participant-page .rf-slot > :first-child{ margin-top: 0 !important; } body.participant-page .rf-slot:empty{ display: none; } /* info-banner — карточный радиус, не кнопочный (единая шкала радиусов 16) */ body.participant-page .info-banner{ border-radius: var(--radius-card, 16px); } /* ── GLASS (glassmorphism) — единый материал через токены ──────────────────── */ /* Мобильная версия — ховера нет; will-change:transform промоутит элемент в отдельный композ-слой → backdrop-filter считается иначе и у части стеклянных карт блюр выглядел по-другому. Убираем промоут и hover/active-трансформы на всей странице участника. */ body.participant-page .interactive, body.participant-page .btn, body.participant-page .card, body.participant-page .grouped-card, body.participant-page .rf-offers--inline, body.participant-page .special_offers_popup, body.participant-page [data-surface]{ will-change: auto !important; } body.participant-page .interactive:hover, body.participant-page .interactive:active, body.participant-page .btn:hover, body.participant-page .btn:active{ transform: none !important; } body.participant-page.style-glass{ /* подложка стекла — прозрачная/«сквозная» (корень неравномерного блюра устранён, плотность для маскировки больше не нужна) */ --glass-bg: color-mix(in srgb, var(--surface-page) 52%, transparent); /* кромка тема-зависимая: видна и на светлом, и на тёмном (через --text-strong) */ --glass-edge: color-mix(in srgb, var(--text-strong) 14%, transparent); --glass-blur: 16px; --glass-blur-sm: 16px; --glass-sat: 160%; /* радиус НЕ переопределяем — наследуем карточный (стиль меняет материал, не геометрию) */ --glass-radius: var(--radius-card, 16px); --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,0) 52%); /* высота: верхний блик-бевел + одна мягкая тень у карт. Мелкие элементы — только бевел (без внешней тени). */ --glass-bevel: inset 0 1px 0 rgba(255,255,255,.5); --glass-elev-2: 0 6px 18px rgba(15,23,42,.08); } /* поверхности уровня «карта». Контракт: [data-surface="card"] (layout-agnostic) ИЛИ легаси-классы (страховка). */ body.participant-page.style-glass [data-surface="card"], body.participant-page.style-glass .card:not(.gradient), body.participant-page.style-glass .grouped-card, body.participant-page.style-glass .info-banner, body.participant-page.style-glass .rf-block:not(.rf-block--image), body.participant-page.style-glass .rf-prize-card, body.participant-page.style-glass .about-raffle-card, body.participant-page.style-glass .rf-reftrack, body.participant-page.style-glass .rf-scratch, body.participant-page.style-glass .rf-offers--inline, body.participant-page.style-glass .special_offers_popup{ background: var(--glass-sheen), var(--glass-bg); border: 1px solid var(--glass-edge); border-radius: var(--glass-radius); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow: var(--glass-elev-2), var(--glass-bevel); will-change: auto; /* перебиваем .interactive/.btn will-change:transform — иначе backdrop-filter композится в отдельном слое и блюр выглядит иначе у части карт */ } /* в стекле внутренний список модалки прозрачен (строки прямо на стеклянном листе, без glass-on-glass) */ body.participant-page.style-glass .special_offers_popup_content_offers.rf-offers-list{ background: transparent; border: none; box-shadow: none; } /* «Розыгрыш завершён» — вложен в стеклянную success-карту: не даём своё backdrop-filter (иначе glass-on-glass и разный блюр), а лёгкая тонировка-инсет на стеклянном листе */ body.participant-page.style-glass [data-surface="inset"], body.participant-page.style-glass .main-heading-info{ background: color-mix(in srgb, var(--surface-card) 55%, transparent); border: 1px solid var(--glass-edge); border-radius: var(--glass-radius); box-shadow: var(--glass-bevel); } /* Оси «Плашка "Завершён" — фон/обводка» задавались в базовом файле правилом без классов, а это — с .style-glass, и оно выигрывало: на стеклянных пресетах выбранный цвет до экрана не доезжал, плашка оставалась цвета карточек. Заданный цвет берём как есть — человек выбрал конкретный и ждёт именно его. Не задан — прежняя полупрозрачная тонировка. */ body.participant-page.style-glass .main-heading-info{ background: var(--finished-bg, color-mix(in srgb, var(--surface-card) 55%, transparent)); border-color: var(--finished-border, var(--glass-edge)); } /* glass-on-glass: стеклянная поверхность внутри другой → понижаем до inset (без своего blur) */ body.participant-page.style-glass [data-surface] [data-surface="card"]{ -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--surface-card) 55%, transparent); box-shadow: var(--glass-bevel); } /* акцент-карта «Особые предложения» — тот же материал (радиус/тень/кромка), но плотный градиент сохраняем ради контраста белого текста (glass-tinted) */ body.participant-page.style-glass .card.gradient{ border: 1px solid var(--glass-edge); border-radius: var(--glass-radius); box-shadow: var(--glass-elev-2), var(--glass-bevel); } /* картинка приза в стекле — без матовой подложки-леттербокса */ body.participant-page.style-glass .rf-prize-img{ background: var(--img) center / contain no-repeat; } /* карты витрины («плитка»: в горизонтальном скроллере overflow-x:auto внешняя тень режется → только inset-блик) */ body.participant-page.style-glass [data-surface="tile"], body.participant-page.style-glass .rf-prize-card{ box-shadow: var(--glass-bevel); } /* поверхности уровня «чип/кнопка/иконка» — тот же материал, меньше блюр и высота */ body.participant-page.style-glass [data-surface="chip"], body.participant-page.style-glass .btn--secondary, body.participant-page.style-glass .share-invite-icon, body.participant-page.style-glass .rf-hicon-circle, body.participant-page.style-glass .section-header-title{ /* border: 1px solid var(--glass-edge); */ -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-sat)); box-shadow: var(--glass-bevel); will-change: auto; } body.participant-page.style-glass [data-surface="chip"], body.participant-page.style-glass .btn--secondary{ background: var(--glass-sheen), var(--glass-bg); } /* Иконка успеха под стеклом: --glass-bevel — это белая грань inset 0 1px 0 по верхней кромке. На чипах и кнопках она к месту, а на круге с логотипом ложится поверх картинки и читается как белёсый ободок. Кромку (border) оставляем — она держит форму круга. */ body.participant-page.style-glass .rf-hicon-circle{ box-shadow: none; border-color: transparent; } body.participant-page.style-glass .section-header-title{ background: color-mix(in srgb, var(--surface-page) 40%, transparent); } /* ── Перф / фоллбэк / гейты ────────────────────────────────────────────────── */ /* (Ранее при bg=off стекло уплотнялось до surface-card 92% — по фидбеку убрано: «Выкл» теперь выглядит так же полупрозрачно-стеклянно, как «Шары» с нулевой непрозрачностью. Translucent-вид одинаков при любом фоне. Фолбэк для движков без backdrop-filter ниже сохранён.) */ /* движок без backdrop-filter → плотнее подложка (текст читается без блюра) */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){ body.participant-page.style-glass{ --glass-bg: color-mix(in srgb, var(--surface-page) 86%, transparent); } } /* экономия движения / класс .glass-degraded от JS-гейта (прод: saveData/deviceMemory) → без блюра */ @media (prefers-reduced-motion: reduce){ body.participant-page.style-glass{ --glass-blur: 0px; --glass-blur-sm: 0px; --glass-bg: color-mix(in srgb, var(--surface-page) 88%, transparent); } } body.participant-page.style-glass.glass-degraded{ --glass-blur: 0px; --glass-blur-sm: 0px; --glass-bg: color-mix(in srgb, var(--surface-page) 88%, transparent); } /* ── Round 2: типографика, кнопка, шкала (оба режима) ─────────────────────── */ /* вторичная кнопка «Подробнее о розыгрыше» — чистая (а не лавандовый блоб на лавандовом фоне). В Glass её перебивает стеклянное правило выше — там она остаётся стеклянной. */ body.participant-page .btn--secondary{ background: var(--surface-card, #fff); border: 1px solid var(--surface-border, var(--color-border)); color: var(--brand-primary, var(--color-primary)); font-weight: 600; box-shadow: var(--card-shadow-sm, 0 1px 2px rgba(15,23,42,.05)); } /* заголовки карточек — единый вес/размер (убираем разнобой 700/900) */ body.participant-page .rf-block-title, body.participant-page .gift-title, body.participant-page .rf-prize-name, body.participant-page .rf-reftrack-title{ font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text-strong, var(--color-text-dark)); } /* ── Доп-блок с фоном (картинка/градиент): читаемый текст + не глассится (фикс 2026-06-03) ── 1) текст поверх картинки/градиента бьёт унификацию выше (та = body.participant-page .rf-block-title, 0,2,1 → перебивала #fff из an_brand_elements). Префикс body.participant-page → 0,3,1, выигрывает. */ body.participant-page .rf-block--bg-image .rf-block-title, body.participant-page .rf-block--bg-image .rf-block-desc{ color: #fff; } body.participant-page .rf-block--bg-gradient .rf-block-title, body.participant-page .rf-block--bg-gradient .rf-block-desc{ color: var(--on-gradient); } /* 2) под стеклом фоновая картинка НЕ заменяется стеклянным листом (glass-правило выше красило background поверх --block-bg-image → картинка пропадала). Возвращаем картинку, снимаем blur. */ body.participant-page.style-glass .rf-block--bg-image{ background: var(--block-bg-image, var(--brand-primary-soft)) center / cover no-repeat !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* то же для градиентного варианта: брендовый градиент держим, не глассим (иначе белый текст на светлом стекле) */ body.participant-page.style-glass .rf-block--bg-gradient{ background: linear-gradient(120deg, var(--feature-gradient-from), var(--feature-gradient-to)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* подписи карточек — единый размер 13px */ body.participant-page .rf-prize-sub, body.participant-page .rf-reftrack-hint, body.participant-page .gift-subtitle, body.participant-page .so-sub{ font-size: 13px; } /* gift-cta вес 900 → 700 (900 нигде больше не используется) */ body.participant-page .gift-cta{ font-weight: 700; } /* ════════════ Поп-апы: единый WCAG-корректный фон ════════════════════════════ Лист попапа = --surface-card (поверхность, на которой тема гарантирует контраст текста по WCAG). Контент сидит ПРЯМО на листе — без вложенных подложек. Внутренние группы — КОНТУРНЫЕ (border), без своего фона, чтобы текст всегда был на surface-card. База хардкодит #F0EFF5/black/синие кнопки/серые тексты/чёрные кресты — перекрываем токенами. */ /* листы всех попапов → surface-card (WCAG-поверхность текста). В стандартной теме БЕЗ внешней рамки (bottom-sheet, прибит к низу). min-height:0 — лист обнимает контент у нижнего края (оверлеи уже flex-end), юзеру не нужно тянуться вверх. (В стекле кромка возвращается ниже в glass-правиле.) */ body.participant-page [data-popup="sheet"], body.participant-page .share_popup, body.participant-page .offer_detail_popup, body.participant-page .special_offers_popup, body.participant-page .about-raffle-sheet{ background: var(--surface-card); border: none; min-height: 0; } /* Свой фон листа «О розыгрыше» — независимо от общего фона карточек. Не задан в пресете → остаётся surface-card, как было. */ body.participant-page .about-raffle-sheet{ background: var(--about-sheet-bg, var(--surface-card)); } /* лист about: тач-скролл + без видимого скроллбара */ body.participant-page .about-raffle-sheet{ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; } body.participant-page .about-raffle-sheet::-webkit-scrollbar{ width: 0; height: 0; display: none; } /* убираем вложенные подложки — контент прямо на листе; группы становятся контурными */ body.participant-page .share_popup_content{ background: transparent; } /* описание — просто текст, без ненужной рамки/подложки (было в бордер-коробке) */ body.participant-page .about-raffle-desc{ background: transparent; border: none; color: var(--about-desc, var(--text-body)); padding: 0; line-height: 1.45; margin-bottom: 10px; white-space: normal; /* база ставит pre-line → сохранял ведущий перенос/отступ из Twig-индентации */ } /* у внутреннего
из description_html дефолтный margin браузера (≈1em верт.) делал отступы неровными */ body.participant-page .about-raffle-desc p{ margin: 0; } /* группы (список офферов в модалке, параметры/каналы) — БЕЗ бордер-коробки: строки прямо на листе, разделены тонкими дивайдерами (.rf-offer-row::before / .about-raffle-row border-bottom) */ body.participant-page .about-raffle-card, body.participant-page .special_offers_popup_content_offers.rf-offers-list{ background: transparent; border: none; border-radius: 0; } /* поле ссылки — без рамки, лёгкая подложка (читается как поле) */ body.participant-page .share_popup_content_info_item_share_link{ color: var(--text-strong); border: none; background: color-mix(in srgb, var(--text-strong) 6%, transparent); } /* share-попап прибит к низу: убираем лишний нижний отступ под кнопками */ body.participant-page .share_popup .about-raffle-body{ padding-bottom: 16px; } body.participant-page .share_popup_content_info_item_share_buttons{ margin-bottom: 0; } /* sticky-шапка about — surface-card (фрост, маскирует контент под собой при скролле). Своя переменная: базовый файл держал здесь светло-серую константу rgba(242,242,247,.85), которая брендингу не подчинялась вовсе. */ body.participant-page .about-raffle-header{ background: var(--about-header-bg, color-mix(in srgb, var(--surface-card) 90%, transparent)); border-bottom-color: var(--about-divider, var(--surface-border)); } body.participant-page .about-raffle-header-title{ color: var(--about-header-text, var(--text-strong)); } body.participant-page .about-raffle-close{ color: var(--about-header-text, var(--text-muted)); } body.participant-page .about-raffle-row{ border-bottom-color: var(--about-divider, var(--surface-border)); } body.participant-page .about-raffle-label{ color: var(--about-label, var(--text-strong)); } body.participant-page .about-raffle-value{ color: var(--about-value, var(--text-muted)); } body.participant-page .about-raffle-channel:not(:last-child){ border-bottom-color: var(--about-divider, var(--surface-border)); } body.participant-page .about-raffle-channel-name{ color: var(--about-label, var(--text-strong)); } /* заголовки секций попапа — как «Билеты»/«Получить больше шансов» на главном (бренд-чип + полоска) */ body.participant-page .about-raffle-section-title{ display: inline-flex; align-items: center; gap: 7px; color: var(--about-section-title, var(--brand-primary)); font-weight: 600; font-size: 13px; padding: 4px 12px 4px 9px; border-radius: 999px; background: var(--about-section-chip-bg, color-mix(in srgb, var(--surface-page) 72%, transparent)); box-shadow: 0 1px 2px rgba(0,0,0,.04); margin: 18px 0 10px; } body.participant-page .about-raffle-section-title::before{ content: ''; width: 4px; height: 13px; border-radius: 3px; background: var(--about-section-title, var(--brand-primary)); flex-shrink: 0; } /* Кружок канала с буквой. В базовом файле — жёстко зашитый сине-фиолетовый градиент #4A5FFF → #C084FC, который на чужом бренде смотрелся чужеродно. Пока свой цвет не задан, оставляем прежний градиент один в один. */ body.participant-page .about-raffle-channel-initial{ background: var(--about-channel-icon, linear-gradient(135deg, #4A5FFF, #C084FC)); } /* share-попап: тексты/кнопки → токены (были синяя #4A5FFF и серый хардкод) */ body.participant-page .share_popup_content_text_title{ color: var(--text-strong); } body.participant-page .share_popup_content_text_description{ color: var(--text-body); } body.participant-page .share_popup_content_info_item_title span{ color: var(--text-muted); } body.participant-page .share_popup_content_info_item_share_button{ background: var(--share-btn-bg, var(--brand-primary)); color: var(--share-btn-text, var(--brand-primary-contrast)); } body.participant-page .share_popup_content_info_item_share_button:active{ background: color-mix(in srgb, var(--brand-primary) 86%, #000); } /* кресты-закрытия (хардкод fill в разметке #0F0F0F/#9da3af) → токен */ body.participant-page [data-popup] [class*="_cross"] svg path, body.participant-page .special_offers_popup_cross svg path, body.participant-page .offer_detail_popup_cross svg path, body.participant-page .share_popup_cross svg path{ fill: var(--text-muted); } /* share-крест переехал в шапку-бар (как у about) → гасим legacy absolute-позицию и размер svg */ body.participant-page .share_popup .share_popup_cross{ position: static; top: auto; right: auto; padding: 0.25rem; } body.participant-page .share_popup .share_popup_cross svg{ width: 20px; height: 20px; } /* ── Glass: лист = ПЛОТНОЕ стекло (WCAG: достаточно непрозрачно для текста над тёмным оверлеем); шапка about — фрост-бар (маскирует скролл); внутренние группы — контур, без своего фона/блюра ── */ body.participant-page.style-glass [data-popup="sheet"], body.participant-page.style-glass .share_popup, body.participant-page.style-glass .offer_detail_popup, body.participant-page.style-glass .special_offers_popup, body.participant-page.style-glass .about-raffle-sheet{ background: var(--glass-sheen), color-mix(in srgb, var(--surface-card) 84%, transparent); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); will-change: auto; } body.participant-page.style-glass .about-raffle-header{ background: color-mix(in srgb, var(--surface-card) 80%, transparent); border-bottom-color: var(--glass-edge); } /* Стиль «стекло» задаёт листу и шапке свой фон правилом с классом style-glass — оно специфичнее общего, и заданный в пресете цвет попапа до экрана не доезжал. Проводим переменные и сюда. Когда цвет задан — берём его как есть, без подмешивания прозрачности: человек выбрал в палитре конкретный цвет и ждёт увидеть именно его, а не осветлённый на 16%. Блики и размытие под листом при этом остаются, стиль не ломается. Не задан — всё как было, полупрозрачный фрост от surface-card. */ body.participant-page.style-glass .about-raffle-sheet{ background: var(--glass-sheen), var(--about-sheet-bg, color-mix(in srgb, var(--surface-card) 84%, transparent)); } body.participant-page.style-glass .about-raffle-header{ background: var(--about-header-bg, color-mix(in srgb, var(--surface-card) 80%, transparent)); border-bottom-color: var(--about-divider, var(--glass-edge)); } body.participant-page.style-glass .share_popup_content, body.participant-page.style-glass .about-raffle-desc, body.participant-page.style-glass .about-raffle-card, body.participant-page.style-glass .special_offers_popup_content_offers.rf-offers-list, body.participant-page.style-glass .share_popup_content_info_item_share_link{ background: transparent; border-color: var(--glass-edge); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Рамка вокруг блоков «Параметры» и «Каналы» — тот же разделитель, что и линии внутри них. Без этого «Разделители» перекрашивали внутренние строки, а внешний контур оставался прежним, и выглядело это недоделанным. */ body.participant-page.style-glass .about-raffle-card{ border-color: var(--about-divider, var(--glass-edge)); } /* ════════════ Экран входа («не подписан»): каналы/кнопки под тему + стекло (2026-06-03) ════════════ База (an_main_smooth.css) хардкодит белый фон карточек каналов, индиго-кнопку «Подписаться», светло-зелёный пилл «Подписан», фикс-px-аватар — в тёмной теме и на цветных пресетах выбиваются. Перекрываем токенами темы (body.participant-page = выше базовых .class по специфичности). */ body.participant-page .channel-card.divided{ background: var(--channel-card-bg, var(--surface-card, #fff)); } body.participant-page .channel-name{ font-weight: 600; } body.participant-page .subscribe-btn{ background: var(--subscribe-bg, var(--brand-primary)); color: var(--subscribe-text, var(--brand-primary-contrast, #fff)); font-size: 1rem; } body.participant-page .status-check{ color: var(--ok-text, #15803d); background: var(--ok-bg, #dcfce7); } body.participant-page .default-channel-icon{ background: var(--icon-bg, var(--brand-primary-soft)); color: var(--icon-ink, var(--brand-primary)); font-size: 1rem; } /* стекло: карточки каналов = стеклянный лист, как прочие data-surface=card (иначе остаются белыми) */ body.participant-page.style-glass .channel-card.divided{ /* Ось «Карточка канала — фон» задаётся правилом без классов, а это — с .style-glass, и оно выигрывало: на стеклянных пресетах выбранный цвет не доезжал. Задан — берём как есть, не задан — прежнее стекло. */ background: var(--glass-sheen), var(--channel-card-bg, var(--glass-bg)); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow: var(--glass-elev-2), var(--glass-bevel); } /* ── Кнопки: свечение под тему + без text-shadow (2026-06-03) ────────────────── База an_tma.css хардкодит индиго-тень .btn--primary (rgba(74,95,255,…)) — на ruby/emerald/тёмной выбивается. Перекрываем тенью из --brand-primary. Текст кнопок — без хардкод-тени. */ body.participant-page .btn--primary{ box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary) 30%, transparent); } body.participant-page .btn--primary:hover{ box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-primary) 40%, transparent); } body.participant-page .btn--primary:active{ box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 20%, transparent); } body.participant-page .btn{ text-shadow: none; } /* Блок «Розыгрыш завершен» (result screen) — цвет по теме, не хардкод серый. */ body.participant-page .main-heading-info-general span{ color: var(--finished-label, var(--text-secondary, rgb(107 114 128))); } body.participant-page .main-heading-info-general svg{ fill: var(--finished-label, var(--text-secondary, #6c7280)); } body.participant-page .main-heading-info-title{ color: var(--text-strong, var(--text-body, inherit)); } body.participant-page .main-heading-info-date{ color: var(--finished-label, var(--text-secondary, inherit)); } /* === 2026-07-15: тест-фикс скролла на мобиле === Силой снимаем все возможные блокаторы вертикального скролла для брендированной страницы. Если после этого мобильный скролл заработает — оставляем, если нет — уберём. */ html, body.participant-page { height: auto !important; min-height: 100vh !important; overflow-x: hidden !important; overflow-y: auto !important; touch-action: pan-y !important; overscroll-behavior-y: auto !important; position: static !important; -webkit-overflow-scrolling: touch !important; }