/* ============================================================ Liquid Glass — global tokens & reusable classes iOS 26 style (gradient mesh + specular highlight + SF Pro) Підключається у base.html. Сторінки використовують ці класи та можуть розширювати інлайн стилі (з nonce!). ============================================================ */ :root { --liq-accent-1: #007aff; /* Apple blue */ --liq-accent-2: #5856d6; /* Apple indigo */ --liq-accent-3: #ff2d92; /* Apple pink */ --liq-accent-4: #00c7be; /* Apple teal */ --liq-glass-bg-light: rgba(255, 255, 255, 0.55); --liq-glass-bg-dark: rgba(20, 20, 24, 0.55); --liq-glass-border-light: rgba(255, 255, 255, 0.7); --liq-glass-border-dark: rgba(255, 255, 255, 0.12); --liq-spring: cubic-bezier(0.32, 0.72, 0, 1); } /* ---- STAGE: контейнер з атмосферним фоном ---- */ .liq-stage { position: relative; margin: -16px -16px 0; padding: 32px 16px 64px; } @media (min-width: 1024px) { .liq-stage { margin: -32px -32px 0; padding: 48px 32px 80px; } } /* Меш — фіксований на весь viewport, тож кольоровий фон проступає ВСЮДИ (включно з page header і sidebar), а не лише в межах stage. */ .liq-mesh { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; } /* Body робимо прозорим лише для сторінок зі stage'ом, щоб не зламати landing/auth. :has() — підтримується у всіх сучасних браузерах. КРИТИЧНО: одночасно встановлюємо тематичний фон на , інакше у dark mode сторінка стане білою (без жодного фону). */ html:has(body .liq-mesh) { background-color: var(--ios-bg-primary); } body:has(.liq-mesh) { background: transparent !important; } /* Сторінки зі stage — sidebar, page-header теж прозорішають, щоб мещ просвічував через них з ефектом справжнього скла. */ body:has(.liq-mesh) .ios-sidebar { background: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%); border-right: 0.5px solid rgba(255, 255, 255, 0.5); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5) inset, 4px 0 24px -10px rgba(0, 30, 80, 0.15); } body:has(.liq-mesh).dark .ios-sidebar, .dark body:has(.liq-mesh) .ios-sidebar { background: rgba(20, 20, 24, 0.5); border-right-color: rgba(255, 255, 255, 0.08); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06) inset, 4px 0 24px -10px rgba(0, 0, 0, 0.4); } body:has(.liq-mesh) .ios-page-header.ios-glass { background: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%); border-bottom: 0.5px solid rgba(255, 255, 255, 0.5); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; } .dark body:has(.liq-mesh) .ios-page-header.ios-glass { background: rgba(20, 20, 24, 0.45); border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; } /* Активний пункт sidebar — м'який синій glass, не плоский */ body:has(.liq-mesh) .sidebar-link.active { background: linear-gradient(180deg, rgba(0, 122, 255, 0.18), rgba(0, 122, 255, 0.1)); box-shadow: inset 0 0 0 0.5px rgba(0, 122, 255, 0.35), 0 1px 0 rgba(255, 255, 255, 0.3) inset; color: var(--liq-accent-1); } .dark body:has(.liq-mesh) .sidebar-link.active { background: linear-gradient(180deg, rgba(10, 132, 255, 0.22), rgba(10, 132, 255, 0.12)); box-shadow: inset 0 0 0 0.5px rgba(10, 132, 255, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06) inset; color: #5ac8fa; } body:has(.liq-mesh) .sidebar-link:hover:not(.active) { background: rgba(255, 255, 255, 0.5); } .dark body:has(.liq-mesh) .sidebar-link:hover:not(.active) { background: rgba(255, 255, 255, 0.06); } .liq-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; } .liq-blob--1 { top: -10%; left: -8%; width: 480px; height: 480px; background: radial-gradient(circle, var(--liq-accent-1), transparent 70%); animation: liq-drift-1 22s ease-in-out infinite; } .liq-blob--2 { top: 20%; right: -12%; width: 520px; height: 520px; background: radial-gradient(circle, var(--liq-accent-2), transparent 70%); animation: liq-drift-2 28s ease-in-out infinite; } .liq-blob--3 { bottom: -10%; left: 18%; width: 440px; height: 440px; background: radial-gradient(circle, var(--liq-accent-3), transparent 70%); opacity: 0.32; animation: liq-drift-3 32s ease-in-out infinite; } .liq-blob--4 { bottom: 15%; right: 24%; width: 360px; height: 360px; background: radial-gradient(circle, var(--liq-accent-4), transparent 70%); opacity: 0.4; animation: liq-drift-4 26s ease-in-out infinite; } .dark .liq-blob { opacity: 0.42; } .dark .liq-blob--3 { opacity: 0.22; } .dark .liq-blob--4 { opacity: 0.28; } @keyframes liq-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } } @keyframes liq-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 50px) scale(0.95); } } @keyframes liq-drift-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -40px) scale(1.05); } } @keyframes liq-drift-4 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, -20px) scale(1.1); } } .liq-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; opacity: 0.18; mix-blend-mode: overlay; pointer-events: none; } .dark .liq-grain { opacity: 0.08; } @media (prefers-reduced-motion: reduce) { .liq-blob { animation: none !important; } } /* ---- CONTENT: центральна колонка ---- */ .liq-content { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } .liq-content--wide { max-width: 1100px; } /* ---- CARD: базова glass-картка ---- */ .liq-card { position: relative; border-radius: 28px; background: var(--liq-glass-bg-light); -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%); border: 1px solid var(--liq-glass-border-light); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -20px rgba(0, 30, 80, 0.25), 0 8px 24px -8px rgba(0, 0, 0, 0.08); } .dark .liq-card { background: var(--liq-glass-bg-dark); border-color: var(--liq-glass-border-dark); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.5); } .liq-card--sm { border-radius: 18px; } .liq-highlight { position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 45%, rgba(255, 255, 255, 0.95) 55%, transparent); border-radius: 1px; filter: blur(0.5px); pointer-events: none; } .dark .liq-highlight { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4) 50%, transparent); } /* ---- BUTTONS ---- */ .liq-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 14px; border: none; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; transition: all 0.25s var(--liq-spring); text-decoration: none; overflow: hidden; } .liq-btn:active:not(:disabled) { transform: scale(0.98); } .liq-btn-primary { color: white; background: linear-gradient(180deg, #1f8bff 0%, #006eff 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 12px 24px -6px rgba(0,122,255,0.5), 0 2px 4px rgba(0,0,0,0.1); } .liq-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 16px 28px -6px rgba(0,122,255,0.6), 0 4px 6px rgba(0,0,0,0.1); } .liq-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; background: linear-gradient(180deg, #8e8e93, #6e6e73); box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 12px -4px rgba(0,0,0,0.15); } .liq-btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 12px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; color: rgba(20, 20, 24, 0.92); background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 0.5px solid rgba(255, 255, 255, 0.7); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 2px 8px -2px rgba(0,30,80,0.12); text-decoration: none; transition: all 0.2s var(--liq-spring); } .liq-btn-back:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.65); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 12px -2px rgba(0,30,80,0.18); } .liq-btn-back:active { transform: scale(0.98); } .dark .liq-btn-back { color: rgba(255, 255, 255, 0.92); background: rgba(40, 40, 44, 0.5); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 8px -2px rgba(0,0,0,0.3); } .dark .liq-btn-back:hover { background: rgba(50, 50, 54, 0.6); } .liq-btn-glow { position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent 50%); pointer-events: none; } /* ---- CHIPS ---- */ .liq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; font-weight: 600; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; background: rgba(0, 0, 0, 0.05); color: rgba(60, 60, 67, 0.85); border-radius: 8px; text-transform: uppercase; } .dark .liq-chip { background: rgba(255, 255, 255, 0.08); color: rgba(235, 235, 245, 0.7); } /* ---- INPUT ---- */ .liq-input { padding: 10px 14px; background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 12px; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; color: rgba(20, 20, 24, 0.92); transition: all 0.2s var(--liq-spring); width: 100%; } .liq-input:focus { outline: none; border-color: rgba(0, 122, 255, 0.5); box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1); background: rgba(255, 255, 255, 0.8); } .dark .liq-input { background: rgba(40, 40, 44, 0.6); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.92); } .dark .liq-input:focus { background: rgba(50, 50, 54, 0.8); border-color: rgba(10, 132, 255, 0.6); box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15); } /* ---- TYPOGRAPHY ---- */ .liq-title { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.025em; color: rgba(20, 20, 24, 0.92); margin: 0; } .dark .liq-title { color: rgba(255, 255, 255, 0.95); } .liq-section-title { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: rgba(20, 20, 24, 0.92); margin: 0; } .dark .liq-section-title { color: rgba(255, 255, 255, 0.92); } .liq-meta { font-size: 13px; color: rgba(60, 60, 67, 0.6); font-variant-numeric: tabular-nums; } .dark .liq-meta { color: rgba(235, 235, 245, 0.5); } .liq-mono { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } /* ---- CUSTOM GLASS DROPDOWN ---- Замінює нативний