/** * Реф-баннер. Стили вынесены из ref_banner.js, чтобы шапка могла отдать * разметку баннера сразу с сервера: если стили приезжают скриптом, серверная * плашка успевает мелькнуть нестилизованной. * * Показываем только в мини-аппе: класс tg-mini ставит инлайн-скрипт в * ДО отрисовки body, поэтому на сайте плашка не мигает и не появляется вовсе. */ .rfb-banner{display:none;--art:clamp(118px,calc(100vw - 224px),200px);position:relative;overflow:hidden;align-items:center;gap:10px;margin:15px 10px 14px;padding:14px;border-radius:14px;background:linear-gradient(90deg,rgba(74,222,128,.16),rgba(74,222,128,.05));border:1px solid rgba(74,222,128,.34);line-height:1.25;text-decoration:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} html.tg-mini .rfb-banner{display:flex} /* В мини-аппе слот всегда занят плашкой — либо скидкой, либо рефералкой. Поэтому заголовки прячем БЕЗУСЛОВНО и сразу стилем: ждать ответа сервера про скидку значит показать их на полсекунды. На сайте (без tg-mini) заголовки остаются — важно для SEO. */ html.tg-mini .top_text, html.tg-mini .page-header, html.tg-mini .hero-info .hero-breadcrumbs, html.tg-mini .hero-info h1{display:none!important} /* вместо заголовка внутри .section: сверху уже работает padding секции */ .rfb-flush{margin-top:0} /* место занято, содержимое ещё не подтверждено — см. RefBanner::html($pending) */ .rfb-pending{visibility:hidden} .rfb-banner:active{transform:scale(.99)} .rfb-txt{flex:1;min-width:0;position:relative;z-index:2} .rfb-l1{display:block;color:#fff;font-size:16px;font-weight:700} .rfb-l2{display:block;color:#4ade80;font-size:16px;font-weight:700} .rfb-l3{display:block;color:rgba(255,255,255,.6);font-size:11px;margin-top:3px} /* Вместо эмодзи ⭐ (свой вид в каждой ОС) — силуэт звезды, обведённый по pink-star.png. Картинка кадрирована по самой звезде, поэтому размер задаётся только этим правилом */ .rfb-star{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.28em;background:url(/img/tg-star.svg?v=5) center/contain no-repeat} .rfb-art{content:"";position:absolute;right:6px;bottom:0;z-index:1;width:var(--art);height:100%;background:url(/img/ref-tigers.png?v=5) right bottom/contain no-repeat} .rfb-st{position:absolute;background-repeat:no-repeat;background-size:contain;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,201,74,.75)) drop-shadow(0 0 10px rgba(255,170,40,.45))} .rfb-big{background-image:url(/img/ref-star.png);filter:drop-shadow(0 0 5px rgba(255,201,74,.8)) drop-shadow(0 0 14px rgba(255,170,40,.5))} .rfb-big1{width:20px;height:20px;right:calc(var(--art) - 2px);top:10px} .rfb-big2{z-index:1;width:18px;height:18px;right:6px;top:28px;transform:rotate(22deg)} .rfb-bonus{position:absolute;right:12px;top:0;bottom:0;display:flex;width:max-content;padding:0;color:#4ade80;font-size:16px;align-items:center;gap:3px;font-weight:700;line-height:1;pointer-events:none} /* «?» рядом с бонусом. Появляется только когда бонус упёрся в потолок (класс ставит ref_banner.js): в обычной ситуации поле выглядит как раньше. Клики ловит только «?» — у самой плашки pointer-events:none, чтобы не перехватывать тап по полю ввода. */ .rfb-bn{color:#4ade80;font-size:16px;font-weight:400;line-height:1} .rfb-q{display:none;position:relative;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.12);color:#9aa0b5;font-size:11px;font-style:normal;font-weight:700;line-height:16px;text-align:center;cursor:pointer;pointer-events:auto} .rfb-capped .rfb-q{display:block} /* Зона тапа больше самой иконки: 16px пальцем не поймать. Влево расширяем меньше — там начинается поле ввода, и его тап важнее подсказки. */ .rfb-q::after{content:'';position:absolute;top:-12px;right:-12px;bottom:-12px;left:-6px} .rfb-qtip{display:none;position:fixed;z-index:2147483000;width:330px;max-width:calc(100vw - 32px);padding:10px 12px;border-radius:10px;background:#1b1f35;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.45);color:rgba(255,255,255,.72);font-size:13px;font-weight:400;line-height:1.35;text-align:left;white-space:normal;pointer-events:auto} .rfb-tip-open .rfb-qtip{display:block} .rfb-qtip b{display:block;margin-bottom:5px;color:#fff;font-size:14px} .rfb-qtip span{display:block;margin-top:4px} .rfb-qtip .rfb-sub{margin-top:1px} /* абзацный отступ перед призывом — он про действие, а не про текущий расчёт */ .rfb-qtip .rfb-gap{margin-top:9px} .rfb-sp{z-index:1;background-image:url(/img/ref-spark.png);filter:drop-shadow(0 0 3px rgba(255,201,74,.55)) drop-shadow(0 0 8px rgba(255,170,40,.3))} .rfb-a1{width:8px;height:8px;right:min(calc(var(--art) + 2px),calc(100% - 163px));top:4px;opacity:.66} .rfb-a2{width:7px;height:7px;right:min(calc(var(--art) + 9px),calc(100% - 162px));top:33px;opacity:.7} .rfb-a3{width:5px;height:5px;right:min(calc(var(--art) + 17px),calc(100% - 160px));top:4px;opacity:.61} .rfb-a4{width:6px;height:6px;right:min(calc(var(--art) + 26px),calc(100% - 161px));top:48px;opacity:.8} .rfb-a5{width:4px;height:4px;right:min(calc(var(--art) + 34px),calc(100% - 159px));top:4px;opacity:.6} .rfb-r1{width:6px;height:6px;right:calc(var(--art) * 0.634);top:11px;opacity:.73} .rfb-r2{width:4px;height:4px;right:calc(var(--art) * 0.959);top:2px;opacity:.55} .rfb-r3{width:3px;height:3px;right:calc(var(--art) * 0.893);top:55px;opacity:.82} .rfb-r4{width:4px;height:4px;right:calc(var(--art) * 0.051);top:18px;opacity:.52} .rfb-r5{width:9px;height:9px;right:calc(var(--art) * 0.819);top:47px;opacity:.71} .rfb-r6{width:12px;height:12px;right:calc(var(--art) * 0.777);top:5px;opacity:.67} .rfb-r7{width:8px;height:8px;right:calc(var(--art) * 0.271);top:11px;opacity:.84} .rfb-r8{width:7px;height:7px;right:calc(var(--art) * 0.159);top:33px;opacity:.61} .rfb-r9{width:5px;height:5px;right:calc(var(--art) * 0.352);top:33px;opacity:.72} .rfb-r10{width:5px;height:5px;right:calc(var(--art) * 0.097);top:6px;opacity:.88} .rfb-r11{width:10px;height:10px;right:calc(var(--art) * 0.438);top:33px;opacity:.64} .rfb-r12{width:3px;height:3px;right:calc(var(--art) * 0.223);top:55px;opacity:.8} .rfb-r13{width:4px;height:4px;right:calc(var(--art) * 0.414);top:62px;opacity:.53} .rfb-r14{width:5px;height:5px;right:calc(var(--art) * 0.308);top:22px;opacity:.68} .rfb-r15{width:6px;height:6px;right:calc(var(--art) * 0.447);top:1px;opacity:.77} .rfb-r16{width:3px;height:3px;right:calc(var(--art) * 0.496);top:55px;opacity:.64} .rfb-r17{width:3px;height:3px;right:calc(var(--art) * 0.72);top:6px;opacity:.63}