/* ================================================================= * SyncVPN rebrand overrides for ex-WearVPN bundle. * MINIMAL scope: brand color only, plus a fix for raster PNG gems. * Original WearVPN design (Unbounded font, layout, etc.) is kept. * ================================================================= */ /* ---------- 1. Accent color: violet -> sky-blue -------------------- * Safety-net override on top of _rebrand.py which already swapped * #8040ff -> #0ea5e9 inside the runtime-injected UnoCSS string. * Single place to tweak the brand color later if needed. */ :root, :host { --colors-accent: #0ea5e9 !important; } /* ---------- 2. Brand name letter-spacing fix ----------------------- * In Unbounded the lowercase 'y' has a long descender. With the parent *

applying tracking-tight (-0.025em), the 'y' in "SyncVPN" reads * as visually stuck against the 'n'. Give the brand spans positive * tracking + explicit kerning so glyphs breathe. / h1 .text-accent, h1 [class="from-accent"], .text-accent.inline-block, .inline-block[class="from-accent"] { letter-spacing: 0.03em !important; font-feature-settings: "kern" 1, "liga" 1; font-kerning: normal; vertical-align: baseline; / Unbounded 'y' has a long descender. With bg-clip-text + text-transparent * on "Преимущества SyncVPN", the descender visually escapes the line box * and reads as "going past the edge". Force visible overflow + bottom * padding gives the descender breathing room without breaking layout. / overflow: visible !important; padding-bottom: 0.12em; line-height: 1.15; } / Big tight-tracked h1s also need extra line height so descenders fit. / h1.tracking-tight { line-height: 1.15; padding-bottom: 0.08em; } / ---------- 3. Recolor decorative crystal PNGs --------------------- * static/shapes/{2,3,4,5,8}.png are raster renders of violet 3D gems. * CSS can't recolor pixels, so we hue-shift them toward sky-blue * to match the new accent color. Tuned visually: -60deg + slight * saturation drop reads as sky #0ea5e9. / img[src="/static/shapes/"], img[src="static/shapes/"] { filter: hue-rotate(-60deg) saturate(0.9) brightness(1.05); } / ================================================================= * 4. Connect-choice modal (#sv-cm-) Перехватывает клики по CTA «Начать сейчас / Подключить» и предлагает * выбор: Telegram-бот или личный кабинет (/cabinet — та же web-app, * что открывается из бота). Полностью в стиле сайта: чёрный фон, * sky-акцент #0ea5e9, шрифт Unbounded (наследуется от ), стекло, * скруглённые формы, accent-glow. Всё под #sv-cm- — не задевает UnoCSS. * ================================================================= / #sv-cm-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 3, 5, 0.66); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0s linear 0.28s; } #sv-cm-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.28s ease; } #sv-cm-dialog { position: relative; width: 100%; max-width: 440px; padding: 30px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.09); background: radial-gradient(120% 80% at 50% -10%, rgba(14, 165, 233, 0.14), transparent 60%), linear-gradient(165deg, rgba(18, 20, 27, 0.97), rgba(8, 9, 12, 0.98)); box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.85), 0 0 70px -12px rgba(14, 165, 233, 0.28); color: #fff; transform: translateY(14px) scale(0.94); opacity: 0; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease; } #sv-cm-overlay.is-open #sv-cm-dialog { transform: translateY(0) scale(1); opacity: 1; } #sv-cm-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; color: #cbd5e1; background: rgba(255, 255, 255, 0.06); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } #sv-cm-close:hover { background: rgba(14, 165, 233, 0.18); color: #fff; transform: rotate(90deg); } #sv-cm-dialog .sv-cm-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #0ea5e9; margin-bottom: 12px; } #sv-cm-dialog h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; font-weight: 800; color: #fff; } #sv-cm-dialog .sv-cm-sub { margin: 0 0 24px; font-size: 14px; line-height: 1.5; color: oklch(70.7% 0.022 261.325); / совпадает с .text-gray сайта */ } .sv-cm-options { display: flex; flex-direction: column; gap: 14px; } .sv-cm-opt { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; text-decoration: none; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease; } .sv-cm-opt:hover { transform: translateY(-2px); } .sv-cm-opt:active { transform: translateY(0); } .sv-cm-opt--primary { background: linear-gradient(135deg, #0ea5e9, #0284c7); box-shadow: 0 0 20px rgba(14, 165, 233, 0.3); } .sv-cm-opt--primary:hover { box-shadow: 0 0 28px rgba(14, 165, 233, 0.55); } .sv-cm-opt--ghost { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); } .sv-cm-opt--ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(14, 165, 233, 0.5); } .sv-cm-ico { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 13px; } .sv-cm-opt--primary .sv-cm-ico { background: rgba(255, 255, 255, 0.18); color: #fff; } .sv-cm-opt--ghost .sv-cm-ico { background: rgba(14, 165, 233, 0.14); color: #0ea5e9; } .sv-cm-ico svg { width: 24px; height: 24px; display: block; } .sv-cm-txt { flex: 1 1 auto; min-width: 0; text-align: left; } .sv-cm-txt b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; } .sv-cm-txt span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; } .sv-cm-opt--primary .sv-cm-txt b { color: #fff; } .sv-cm-opt--primary .sv-cm-txt span { color: rgba(255, 255, 255, 0.82); } .sv-cm-opt--ghost .sv-cm-txt b { color: #fff; } .sv-cm-opt--ghost .sv-cm-txt span { color: oklch(70.7% 0.022 261.325); } .sv-cm-arrow { flex: 0 0 auto; opacity: 0.6; transition: transform 0.25s ease, opacity 0.25s ease; } .sv-cm-opt:hover .sv-cm-arrow { opacity: 1; transform: translateX(3px); } .sv-cm-opt--primary .sv-cm-arrow { color: #fff; } .sv-cm-opt--ghost .sv-cm-arrow { color: #0ea5e9; } #sv-cm-dialog .sv-cm-foot { margin: 22px 0 0; text-align: center; font-size: 12px; color: oklch(70.7% 0.022 261.325); } #sv-cm-dialog .sv-cm-foot a { color: #0ea5e9; text-decoration: none; } #sv-cm-dialog .sv-cm-foot a:hover { text-decoration: underline; } @media (max-width: 480px) { #sv-cm-dialog { padding: 24px 20px; border-radius: 24px; } #sv-cm-dialog h2 { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { #sv-cm-overlay, #sv-cm-dialog, .sv-cm-opt, #sv-cm-close, .sv-cm-arrow { transition: none !important; } #sv-cm-dialog { transform: none; } }