/* glass.css — жидкое стекло с лестницей фолбэков и компоненты кита. * * Требует tokens.css. Подключать после него. * * ЯРУСЫ. Атрибут data-glass-tier на задаёт ярус: * solid — непрозрачная поверхность. Прозрачность недоступна или запрещена. * frost — матовое стекло + кромка. Базовый ярус, работает во всех браузерах. * lens — frost + преломление на карте смещения. ТОЛЬКО Chromium. * * В CSS по умолчанию действует frost — без единой строчки JS страница уже * выглядит как стекло. glass-tier.js либо понижает до solid, либо повышает * до lens. Между ярусами меняется ТОЛЬКО преломление: матовость, кромка, * тень и геометрия одинаковы. Поэтому повышение после гидратации не читается * как сбой отрисовки — пользователь его не замечает. * * ПОЧЕМУ НЕ @supports. Firefox разбирает `backdrop-filter: url(#f)` как * валидное значение — @supports отвечает «поддерживаю» — и затем молча ничего * не рисует. Safari тоже не применяет смещение (WebKit bug 245510, открыт). * Фича-детект здесь врёт, поэтому ярус lens включается по движку в * glass-tier.js, а не по @supports. Это единственное место в ките, где * приходится нюхать браузер: проверить преломление из JS нельзя — подложку * под элементом не прочитать. Определение намеренно консервативное: * сомневаемся — остаёмся на frost. */ /* ── Примитив ─────────────────────────────────────────────────────────── */ .glass { position: relative; isolation: isolate; border-radius: var(--radius-lg); background: var(--glass-tint); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: .5px solid var(--glass-border); box-shadow: var(--shadow-md); color: var(--ink); } /* Кромка — блик по краю, который читается как толщина стекла. * Внутренние тени, а не border: border не умеет быть ярче сверху и темнее снизу. * Чистый CSS, работает везде, поэтому есть и на frost, и на lens. */ .glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 0 var(--rim-light), inset 0 -1px 0 0 var(--rim-dark), inset 1px 0 0 0 color-mix(in srgb, var(--rim-light) 55%, transparent), inset -1px 0 0 0 color-mix(in srgb, var(--rim-light) 55%, transparent); z-index: 1; } /* Плотное стекло — модалки, панели, всё, поверх чего читают текст. */ .glass-2 { background: var(--glass-tint-2); backdrop-filter: blur(var(--glass-blur-2)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur-2)) saturate(var(--glass-sat)); box-shadow: var(--shadow-lg); } /* ── Ярус lens ───────────────────────────────────────────────────────────── * Включается только когда glass-tier.js поставил tier=lens И повесил на * элемент --lens-filter с id сгенерированной под его размер карты смещения. * Без карты правило не срабатывает (var без фолбэка → значение невалидно), * элемент остаётся на frost. Это защита от «включили ярус, а карта не успела». * * Порядок фильтров важен: сначала смещение, потом размытие — размытие * сглаживает ступеньки карты. Наоборот получается грязь. */ html[data-glass-tier="lens"] .glass[data-lens] { backdrop-filter: var(--lens-filter) blur(var(--glass-blur)) saturate(var(--glass-sat)); } /* ── Ярус solid ─────────────────────────────────────────────────────────── * Не деградация в серый прямоугольник: поверхность остаётся поверхностью, * просто непрозрачной. Тень и кромка на месте — иерархия слоёв не рушится. */ html[data-glass-tier="solid"] .glass { background: var(--solid); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-glass-tier="solid"] .glass-2 { background: var(--solid-2); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Пользовательские настройки сильнее любого яруса — поэтому ниже и с той же * специфичностью, что и правила яруса. Прозрачность отключают не от скуки: * она мешает при вестибулярных расстройствах и слабом зрении. */ @media (prefers-reduced-transparency: reduce) { html[data-glass-tier] .glass, html[data-glass-tier] .glass-2 { background: var(--solid); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (forced-colors: active) { html[data-glass-tier] .glass, html[data-glass-tier] .glass-2 { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid CanvasText; } .glass::before { display: none; } } /* Браузер вообще без backdrop-filter — сюда попадают старые движки. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--solid); } .glass-2 { background: var(--solid-2); } } /* ── Каркас страницы ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--bg); min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", "Helvetica Neue", sans-serif; font-feature-settings: "ss01", "cv01", "cv11"; letter-spacing: -.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Подложка. Это не украшение — это условие, при котором стекло вообще * читается как стекло. Под бледной однотонной заливкой преломлять нечего: * карточки выродятся в белые прямоугольники, и весь материал пропадёт. * Проверено глазами: с пастельными пятнами на 20 % кит выглядел как обычный * скруглённый блок. Поэтому пятна плотные и разного тона — стеклу нужен * контраст под собой, а не вежливый градиент. * * ЧТО ПЕРЕПИСАТЬ: положение и цвета пятен — это лицо продукта. Не трогать * только плотность: ниже 45 % эффект снова пропадает. */ .bg-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 760px 560px at 14% 12%, color-mix(in srgb, var(--accent) 62%, transparent), transparent 58%), radial-gradient(ellipse 680px 620px at 86% 8%, color-mix(in srgb, var(--blue) 58%, transparent), transparent 56%), radial-gradient(ellipse 820px 640px at 72% 62%, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent 58%), radial-gradient(ellipse 700px 700px at 20% 88%, color-mix(in srgb, var(--blue) 45%, transparent), transparent 60%), var(--bg); } /* Зерно поверх пятен. Убирает бандинг на больших градиентах и добавляет * подложке фактуру, за которую цепляется преломление. */ .bg-field::after { content: ''; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .grid { display: grid; gap: 20px; } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* ── Навигация ────────────────────────────────────────────────────────── */ /* Липкий навбар обязан быть ПЛОТНЫМ стеклом, а не лёгким. * На базовой прозрачности (0.05 на тёмной теме) сквозь него читался контент, * который проезжает снизу: заголовок навбара накладывался на заголовки * карточек и цены — страница выглядела сломанной. Увидено глазами при * прокрутке до тарифов. Лёгкое стекло годится для того, что стоит на месте; * для того, под чем всё движется, нужна плотность. */ .glass-nav { position: sticky; top: 12px; z-index: var(--z-sticky); display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 18px; border-radius: var(--radius-pill); background: var(--glass-tint-2); backdrop-filter: blur(var(--glass-blur-2)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur-2)) saturate(var(--glass-sat)); box-shadow: var(--shadow-lg); } html[data-glass-tier="lens"] .glass-nav[data-lens] { backdrop-filter: var(--lens-filter) blur(var(--glass-blur-2)) saturate(var(--glass-sat)); } html[data-glass-tier="solid"] .glass-nav { background: var(--solid); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Якорные переходы не должны прятать заголовок под липким навбаром. */ section[id], header[id] { scroll-margin-top: 92px; } /* ── Кнопки ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); border: none; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -.008em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .btn:active { transform: scale(.97); } .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { transform: scale(1.02); } .btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); } .btn-accent:hover { transform: scale(1.02); } .btn-glass { color: var(--ink); } .btn-glass:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--ink-2); } .btn-ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } /* ── Пилюли, плашки ───────────────────────────────────────────────────── */ .pill { padding: 7px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--ink-3); background: transparent; border: none; cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast); } .pill:hover { color: var(--ink); } .pill[aria-selected="true"], .pill.is-active { background: var(--ink); color: var(--bg); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: .015em; text-transform: uppercase; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); } .badge-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; } /* ── Карточки ─────────────────────────────────────────────────────────── */ .glass-card { padding: 26px; border-radius: var(--radius-lg); } .glass-card > * { position: relative; z-index: 2; } /* ── Поля ввода ───────────────────────────────────────────────────────── */ .field { width: 100%; padding: 12px 16px; border-radius: var(--radius-md); border: .5px solid var(--glass-border); background: color-mix(in srgb, var(--surface) 65%, transparent); color: var(--ink); font: inherit; font-size: 15px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .field::placeholder { color: var(--ink-4); } .field:focus { outline: none; border-color: color-mix(in srgb, var(--blue) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); } /* ── Модалка ──────────────────────────────────────────────────────────── */ .scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: color-mix(in srgb, var(--ink) 32%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .glass-modal { position: fixed; z-index: var(--z-modal); top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 40px)); padding: 30px; border-radius: var(--radius-xl); } /* ── Мелочи ───────────────────────────────────────────────────────────── */ .hairline { border: 0; border-top: .5px solid var(--glass-border); margin: 0; } .live-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--green); animation: live-pulse 2.4s infinite cubic-bezier(.4, 0, .6, 1); } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 40%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .reveal { animation: reveal var(--dur-slow) var(--ease-out) backwards; } @keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Движение выключают по медицинским причинам. Уважать без исключений. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }