/*Стили Apple Liquid Glass*/ /* ========================= Liquid Glass System ========================= */ :root{ --glass-radius: 24px; --glass-blur: 18px; --glass-blur-strong: 30px; --glass-fill: rgba(255,255,255,.10); --glass-fill-soft: rgba(255,255,255,.08); --glass-fill-strong: rgba(255,255,255,.14); --stroke-white: rgba(255,255,255,.22); --stroke-green: rgba(51,209,122,.55); /* #33D17A */ --stroke-slate: rgba(111,138,131,.60); /* #6F8A83 */ --shadow-apple: 0 30px 70px rgba(0,0,0,.45), 0 12px 24px rgba(0,0,0,.28); } /*Карточки форматов участия (Apple Liquid Glass)*/ .glass-product{ position: relative; border-radius: var(--glass-radius); background: var(--glass-fill); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--stroke-white); box-shadow: var(--shadow-apple); overflow: hidden; } .glass-product::before{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.10) 20%, rgba(255,255,255,0) 55%, rgba(255,255,255,.08) 100% ); mix-blend-mode: screen; opacity:.55; } /*Карточки формата "Что вы получите на форуме?*/ .glass-benefit{ position: relative; border-radius: var(--glass-radius); background: var(--glass-fill-soft); backdrop-filter: blur(var(--glass-blur)) saturate(145%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%); border: 1px solid var(--stroke-green); box-shadow: var(--shadow-apple); overflow: hidden; } .glass-benefit::before{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 60% ); mix-blend-mode: screen; opacity:.45; } /*Карточки формата "Программа форума"*/ .glass-program{ position: relative; border-radius: 28px; background: var(--glass-fill-strong); backdrop-filter: blur(var(--glass-blur-strong)) saturate(155%); -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(155%); border: 1px solid var(--stroke-slate); box-shadow: var(--shadow-apple); overflow: hidden; } .glass-program::before{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.08) 25%, rgba(255,255,255,0) 65% ); mix-blend-mode: screen; opacity:.6; } /* ========================= Apple Liquid Glass Button class: btn-glass ========================= */ .btn-glass{ /* базовая геометрия */ border-radius: 8px; border: 1px solid rgba(255,255,255,.18); /* стекло (фон как в Figma) */ background: linear-gradient( 180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 100% ); /* размытие фона */ -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); /* тень как в Figma */ box-shadow: 0 18px 45px rgba(0,0,0,.40); /* поведение */ position: relative; overflow: hidden; transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease, transform .22s ease; } /* фирменный “блик” (делает кнопку дорогой) */ .btn-glass::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit; background: linear-gradient( 180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 35%, rgba(255,255,255,0) 70% ); mix-blend-mode: screen; opacity: .55; } /* hover */ .btn-glass:hover{ border-color: rgba(255,255,255,.35); background: linear-gradient( 180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.24) 100% ); -webkit-backdrop-filter: blur(34px) saturate(155%); backdrop-filter: blur(34px) saturate(155%); box-shadow: 0 22px 55px rgba(0,0,0,.48); transform: translateY(-1px); } /* active (чтобы клик ощущался) */ .btn-glass:active{ transform: translateY(0px); box-shadow: 0 16px 42px rgba(0,0,0,.42); } /* чтобы текст/иконки не “мылились” */ .btn-glass > *{ position: relative; z-index: 1; } /* ========================= Premium White Glass – Partners (Light Boosted) ========================= */ .glass-partner{ position: relative; border-radius: 22px; /* БОЛЬШЕ БЕЛОГО */ background: linear-gradient( 180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.14) 40%, rgba(255,255,255,.10) 100% ); -webkit-backdrop-filter: blur(42px) saturate(170%); backdrop-filter: blur(42px) saturate(170%); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 18px 36px rgba(0,0,0,.35); overflow: hidden; transition: all .25s ease; } /* Сильный верхний блик */ .glass-partner::before{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.25) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 80% ); mix-blend-mode: screen; opacity:.75; } /* Внутреннее белое свечение */ .glass-partner::after{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 0 40px rgba(255,255,255,.15); } /* Hover — ещё чище и светлее */ .glass-partner:hover{ background: linear-gradient( 180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.18) 100% ); -webkit-backdrop-filter: blur(48px) saturate(180%); backdrop-filter: blur(48px) saturate(180%); border-color: rgba(255,255,255,.55); transform: translateY(-2px); } /*Усиливаем логотипы в Партнёрах*/ .glass-partner img{ filter: brightness(1.25) contrast(1.1); transition: .25s ease; } .glass-partner:hover img{ filter: brightness(1.35) contrast(1.15); } /*Адаптация под устройства*/ /* ===== Планшет ===== */ @media (max-width: 1024px) { .tmenu-mobile__burgerlogo img { width: 90px !important; max-width: 90px !important; height: auto !important; } } /* ===== Мобильная версия ===== */ @media (max-width: 640px) { .tmenu-mobile__burgerlogo img { width: 70px !important; max-width: 70px !important; height: auto !important; } }