/* ============================================================= GLASS.CSS — surface treatment that pairs with js/glass.js. Only applies once .glass-on is set on , i.e. the browser supports an SVG filter in backdrop-filter and the filter was built. Without it the plain blur() in styles.css / typer.css stays. ============================================================= */ /* The default dock fill is 72% opaque, which would sit on top of the refraction and hide it. Glass needs a much thinner frost plus a rim highlight to read as a physical edge. */ .glass-on .home-dock { background: hsl(0 0% 100% / 0.045); border-color: hsl(0 0% 100% / 0.1); box-shadow: inset 0 0 2px 1px hsl(0 0% 100% / 0.3), inset 0 0 10px 4px hsl(0 0% 100% / 0.12), inset 0 2px 1px -1px hsl(0 0% 100% / 0.5), 0 6px 20px hsl(0 0% 0% / 0.3), 0 16px 44px hsl(0 0% 0% / 0.22); } /* Keep the hover tint subtle so it reads through the glass instead of flattening it into a solid chip. */ .glass-on .home-dock a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .glass-on .lb-nav, .glass-on .lb-close { background: hsl(0 0% 100% / 0.06); border: 1px solid hsl(0 0% 100% / 0.12); box-shadow: inset 0 0 2px 1px hsl(0 0% 100% / 0.28), inset 0 0 8px 3px hsl(0 0% 100% / 0.1), 0 4px 16px hsl(0 0% 0% / 0.35); } /* Keep the accent hover from styles.css, just softened so the glass still shows through instead of going flat lime. */ .glass-on .lb-nav:hover, .glass-on .lb-close:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); } /* The refraction is a still image, not motion, so it stays on for reduced-motion users — but drop it if the OS asks for less transparency. */ @media (prefers-reduced-transparency: reduce) { .glass-on .home-dock { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } .glass-on .lb-nav, .glass-on .lb-close { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } }