:root { --liquid-glass-radius: 28px; } /* Базовый контейнер “жидкого стекла” */ .liquid-glass, .tn-elem.liquid-glass > .tn-atom { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--liquid-glass-radius) !important; /* почти прозрачный, чтобы фон читался */ background: rgba(255, 255, 255, 0.01) !important; /* лёгкий frost + чуть усиленные цвета под стеклом */ -webkit-backdrop-filter: blur(4px) saturate(180%); backdrop-filter: blur(4px) saturate(180%); /* ОБЪЁМ: тень + светлый кант по периметру */ box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30), /* падающая тень вниз */ 0 0 0 1px rgba(255, 255, 255, 0.40); /* светлый контур стекла */ border: none !important; } /* Контент всегда поверх стекла */ .liquid-glass > *, .tn-elem.liquid-glass > .tn-atom > * { position: relative; z-index: 2; } /* Верхняя плёнка: блик + лёгкая “молекулярность” стекла */ .liquid-glass::before, .tn-elem.liquid-glass > .tn-atom::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; /* блик сверху и лёгкий tint, но без сильной матовости */ background: linear-gradient( to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 22%, rgba(255, 255, 255, 0.00) 60% ); /* лёгкий внутренний объём по краям */ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.10); mix-blend-mode: screen; } /* Нижний слой: ЖИДКОЕ ИСКАЖЕНИЕ без градиентов */ .liquid-glass::after, .tn-elem.liquid-glass > .tn-atom::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; /* чистая “жидкая линза” */ -webkit-filter: url(#liquid-glass-distort); filter: url(#liquid-glass-distort); }