/* ═══════════════════════════════════════════ НЕОНОВАЯ ОБВОДКА ДЛЯ ТИЛЬДЫ Классы: button_neon (кнопки), shape_neon (фигуры) button_green_neon (зелёные кнопки) Вставить в: Настройки сайта → Ещё → CSS ═══════════════════════════════════════════ */ /* ── Цвет свечения — меняйте только здесь ── */ :root { --neon-color: #E0257E; --neon-glow-1: rgba(224, 37, 126, 0.35); --neon-glow-2: rgba(224, 37, 126, 0.13); --neon-glow-3: rgba(224, 37, 126, 0.05); --neon-green-color: #00E87A; --neon-green-glow-1: rgba(0, 232, 122, 0.40); --neon-green-glow-2: rgba(0, 232, 122, 0.16); --neon-green-glow-3: rgba(0, 232, 122, 0.06); } /* ══ КНОПКИ (розовые) ════════════════════════════ */ .button_neon .t-btn, .button_neon a.t-btn, .button_neon .t396__elem.tn-atom { border: 1px solid var(--neon-color) !important; border-radius: 30px !important; box-shadow: 0 0 4px var(--neon-glow-1), 0 0 12px var(--neon-glow-2), 0 0 28px var(--neon-glow-3), inset 0 0 8px rgba(224, 37, 126, 0.03) !important; transition: box-shadow 0.3s ease, border-color 0.3s ease !important; } .button_neon .t-btn:hover, .button_neon a.t-btn:hover, .button_neon .t396__elem.tn-atom:hover { box-shadow: 0 0 7px var(--neon-glow-1), 0 0 20px var(--neon-glow-2), 0 0 50px var(--neon-glow-3), inset 0 0 14px rgba(224, 37, 126, 0.05) !important; } .button_neon { border: 1px solid var(--neon-color) !important; border-radius: 30px !important; box-shadow: 0 0 4px var(--neon-glow-1), 0 0 12px var(--neon-glow-2), 0 0 28px var(--neon-glow-3), inset 0 0 8px rgba(224, 37, 126, 0.03) !important; transition: box-shadow 0.3s ease, border-color 0.3s ease !important; } .button_neon:hover { box-shadow: 0 0 7px var(--neon-glow-1), 0 0 20px var(--neon-glow-2), 0 0 50px var(--neon-glow-3), inset 0 0 14px rgba(224, 37, 126, 0.05) !important; } /* ══ КНОПКИ (зелёные) ════════════════════════════ */ .button_green_neon .t-btn, .button_green_neon a.t-btn, .button_green_neon .t396__elem.tn-atom { border: 1px solid var(--neon-green-color) !important; border-radius: 30px !important; box-shadow: 0 0 4px var(--neon-green-glow-1), 0 0 12px var(--neon-green-glow-2), 0 0 28px var(--neon-green-glow-3), inset 0 0 8px rgba(0, 232, 122, 0.03) !important; transition: box-shadow 0.3s ease, border-color 0.3s ease !important; } .button_green_neon .t-btn:hover, .button_green_neon a.t-btn:hover, .button_green_neon .t396__elem.tn-atom:hover { box-shadow: 0 0 7px var(--neon-green-glow-1), 0 0 20px var(--neon-green-glow-2), 0 0 50px var(--neon-green-glow-3), inset 0 0 14px rgba(0, 232, 122, 0.05) !important; } .button_green_neon { border: 1px solid var(--neon-green-color) !important; border-radius: 30px !important; box-shadow: 0 0 4px var(--neon-green-glow-1), 0 0 12px var(--neon-green-glow-2), 0 0 28px var(--neon-green-glow-3), inset 0 0 8px rgba(0, 232, 122, 0.03) !important; transition: box-shadow 0.3s ease, border-color 0.3s ease !important; } .button_green_neon:hover { box-shadow: 0 0 7px var(--neon-green-glow-1), 0 0 20px var(--neon-green-glow-2), 0 0 50px var(--neon-green-glow-3), inset 0 0 14px rgba(0, 232, 122, 0.05) !important; } /* ══ ФИГУРЫ ══════════════════════════════════════ */ .shape_neon, .shape_neon .t396__elem.tn-atom, .shape_neon .tn-atom { border: 1px solid var(--neon-color) !important; border-radius: 30px !important; box-shadow: 0 0 5px var(--neon-glow-1), 0 0 16px var(--neon-glow-2), 0 0 38px var(--neon-glow-3), inset 0 0 10px rgba(224, 37, 126, 0.02) !important; transition: box-shadow 0.4s ease !important; } .shape_neon:hover, .shape_neon .t396__elem.tn-atom:hover, .shape_neon .tn-atom:hover { box-shadow: 0 0 9px var(--neon-glow-1), 0 0 28px var(--neon-glow-2), 0 0 65px var(--neon-glow-3), inset 0 0 16px rgba(224, 37, 126, 0.04) !important; } /* ═══════════════════════════════════════════ LIQUID GLASS для Тильды Классы: glass_card, glass_nav, glass_btn, glass_pill, glass_section Вставить в: Настройки сайта → Ещё → CSS ═══════════════════════════════════════════ */ /* ══ ПЕРЕМЕННЫЕ ══════════════════════════════ */ :root { --glass-bg: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.14); --glass-shine: rgba(255, 255, 255, 0.11); --glass-shadow: rgba(0, 0, 0, 0.35); --glass-blur: 18px; --glass-radius: 24px; } /* ══ БАЗОВЫЙ СТЕКЛЯННЫЙ БЛОК ═════════════════ */ .glass_card .t-col, .glass_card .t396__elem.tn-atom, .glass_card .tn-atom, .glass_card { background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--glass-radius) !important; box-shadow: 0 1px 0 var(--glass-shine) inset, 0 0 0 0.5px rgba(255,255,255,0.06) inset, 0 4px 24px var(--glass-shadow) !important; position: relative !important; overflow: hidden !important; transition: background 0.3s ease, box-shadow 0.3s ease !important; } /* Световой отблеск сверху */ .glass_card::before, .glass_card .t396__elem.tn-atom::before { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: linear-gradient( 135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.04) 100% ) !important; pointer-events: none !important; z-index: 0 !important; } .glass_card:hover { background: rgba(255, 255, 255, 0.09) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 8px 36px rgba(0,0,0,0.4) !important; } /* ══ НАВИГАЦИЯ ═══════════════════════════════ */ .glass_nav, .glass_nav .t-header, .glass_nav .t-menu { background: rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(24px) saturate(150%) !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 50px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 8px 32px rgba(0,0,0,0.4) !important; overflow: hidden !important; } /* ══ КНОПКИ ══════════════════════════════════ */ .glass_btn .t-btn, .glass_btn a.t-btn, .glass_btn .t396__elem.tn-atom, .glass_btn { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 50px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 16px rgba(0,0,0,0.3) !important; position: relative !important; overflow: hidden !important; transition: background 0.25s ease, box-shadow 0.25s ease !important; } /* Верхний блик кнопки */ .glass_btn .t-btn::before, .glass_btn a.t-btn::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 50% !important; border-radius: 50px 50px 0 0 !important; background: linear-gradient(to bottom, rgba(255,255,255,0.14), transparent) !important; pointer-events: none !important; } .glass_btn .t-btn:hover, .glass_btn a.t-btn:hover, .glass_btn:hover { background: rgba(255, 255, 255, 0.14) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.24) inset, 0 8px 28px rgba(0,0,0,0.38) !important; } /* ══ ПИЛЮЛИ / БЕЙДЖИ ══════════════════════════ */ .glass_pill, .glass_pill .t396__elem.tn-atom, .glass_pill .tn-atom { background: rgba(255, 255, 255, 0.07) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 50px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 2px 12px rgba(0,0,0,0.25) !important; overflow: hidden !important; } /* ══ СЕКЦИИ / БОЛЬШИЕ БЛОКИ ══════════════════ */ .glass_section, .glass_section .t-section__container { background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 32px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 12px 48px rgba(0,0,0,0.3) !important; overflow: hidden !important; }