/* ========================================================================== Glass UI Recipes (utilities) Scope: Purpose: - Small reusable utility surfaces (opt-in) - GlassPage shell + animated blobs ========================================================================== */ :root[data-ui="glass"] .glass-surface { background: var(--surface-1); border: 1px solid var(--border-1); box-shadow: var(--shadow-float); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-radius: var(--radius-3); } :root[data-ui="glass"] .glass-panel { background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--radius-2); padding: 16px; backdrop-filter: blur(calc(var(--glass-blur) - 6px)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 6px)); } :root[data-ui="glass"] .glass-chip { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-1); backdrop-filter: blur(calc(var(--glass-blur) - 6px)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 6px)); } /* GlassPage layout + blobs */ :root[data-ui="glass"] .glass-page { min-height: calc(100vh - var(--mud-appbar-height, 64px)); padding: 8vh 16px 14vh 16px; display: flex; justify-content: center; align-items: flex-start; position: relative; overflow: hidden; } :root[data-ui="glass"] .glass-shell { position: relative; width: 100%; z-index: 1; } :root[data-ui="glass"] .glass-shell--xs { max-width: var(--container-xs); } :root[data-ui="glass"] .glass-shell--sm { max-width: var(--container-sm); } :root[data-ui="glass"] .glass-shell--md { max-width: var(--container-md); } :root[data-ui="glass"] .glass-shell--lg { max-width: var(--container-lg); } :root[data-ui="glass"] .glass-shell--xl { max-width: var(--container-xl); } :root[data-ui="glass"] .glass-shell--xxl { max-width: var(--container-xxl); } :root[data-ui="glass"] .glass-shell--fluid { max-width: none; } :root[data-ui="glass"] .glass-blob { position: absolute; width: 560px; height: 560px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%); opacity: 0.65; pointer-events: none; mix-blend-mode: screen; filter: blur(1px); transform: translate3d(0, 0, 0); animation: glassFloaty 12s ease-in-out infinite; } :root[data-ui="glass"] .blob-1 { left: -200px; top: -160px; animation-delay: 0s; } :root[data-ui="glass"] .blob-2 { right: -240px; top: 40px; animation-delay: 1.4s; } :root[data-ui="glass"] .blob-3 { left: 8%; bottom: -260px; width: 680px; height: 680px; opacity: 0.55; animation-delay: 2.6s; } @keyframes glassFloaty { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18px, -22px) scale(1.03); } }