/** * HukVPN Popup-Banner — стили. * Красится через уже существующие мостовые переменные каждого сайта * (--huk-widget-accent/--huk-widget-bg/--huk-widget-text — те же, что * питают huk-widget.js/huk-widget.css), поэтому 1 файл на всю сеть * автоматически совпадает с палитрой конкретного бренда. * Шрифты (--huk-b-head-font/--huk-b-body-font) выставляет huk-banner.js * инлайново под бренд — сеть их уже грузит через свой . */ #huk-banner-root { --huk-b-accent: var(--huk-widget-accent, #10B981); --huk-b-bg: var(--huk-widget-bg, #0d0d0d); --huk-b-text: var(--huk-widget-text, #ededed); position: fixed; left: 16px; bottom: 16px; z-index: 99997; width: min(380px, calc(100vw - 32px)); font-family: var(--huk-b-body-font, system-ui, sans-serif); pointer-events: none; /* включаем обратно на карточке — не блокируем страницу под баннером */ } #huk-banner-root .huk-banner-card { pointer-events: auto; position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 18px 18px 18px 16px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--huk-b-accent) 7%, var(--huk-b-bg)) 0%, var(--huk-b-bg) 100%); border: 1px solid color-mix(in srgb, var(--huk-b-accent) 30%, transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 44px -18px rgba(0, 0, 0, 0.55); transform: translateY(24px) scale(0.98); opacity: 0; transition: transform 0.38s cubic-bezier(0.22, 0.98, 0.32, 1), opacity 0.32s ease; } #huk-banner-root.huk-banner-visible .huk-banner-card { transform: translateY(0) scale(1); opacity: 1; } .huk-banner-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--huk-b-accent); background: color-mix(in srgb, var(--huk-b-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--huk-b-accent) 30%, transparent); } .huk-banner-body { flex: 1 1 auto; min-width: 0; } .huk-banner-title { font-family: var(--huk-b-head-font, inherit); font-weight: 700; font-size: 15.5px; line-height: 1.32; color: var(--huk-b-text); margin: 0 20px 6px 0; letter-spacing: -0.01em; } .huk-banner-text { font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--huk-b-text) 74%, transparent); margin: 0 0 13px 0; } .huk-banner-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 11px 16px; border-radius: 11px; background: var(--huk-b-accent); color: #fff; /* переопределяется JS (_autoContrastText) под реальный акцент бренда */ font-family: var(--huk-b-body-font, inherit); font-weight: 700; font-size: 13.5px; text-decoration: none; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--huk-b-accent) 65%, transparent); transition: transform 0.16s ease, box-shadow 0.16s ease; } .huk-banner-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--huk-b-accent) 75%, transparent); } .huk-banner-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: none; border-radius: 7px; background: transparent; color: color-mix(in srgb, var(--huk-b-text) 55%, transparent); font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .huk-banner-close:hover { background: color-mix(in srgb, var(--huk-b-text) 10%, transparent); color: var(--huk-b-text); } @media (max-width: 480px) { #huk-banner-root { left: 10px; bottom: 10px; width: calc(100vw - 20px); } #huk-banner-root .huk-banner-card { padding: 16px 16px 16px 14px; } } @media (prefers-reduced-motion: reduce) { #huk-banner-root .huk-banner-card { transition: opacity 0.2s ease; transform: none !important; } }