/* ========================================================================== Liquid glass (preview) The header (and the full screen menu on phones) as translucent glass: the page shows through it blurred and a touch more saturated, a bright rim runs along the top edge and a specular sweep crosses the face. Buttons had the same treatment for a while and were reverted; they keep their grove.css look. Loaded after grove.css on every page. site-config.js adds the .glass class to , and ?glass=0 on any URL turns it off for that browsing session (?glass=1 turns it back on), so the two can be compared on one preview. To revert for good: delete this file, the after grove.css in each page, the entry in scripts/build-dist.mjs and the glass lines in site-config.js. ========================================================================== */ html.glass { --glass-rim: rgba(255, 255, 255, 0.55); --glass-edge: rgba(255, 255, 255, 0.32); } /* ---- Header ---------------------------------------------------------- */ html.glass .site-header { background: rgba(251, 245, 234, 0.4); -webkit-backdrop-filter: blur(22px) saturate(175%) brightness(1.04); backdrop-filter: blur(22px) saturate(175%) brightness(1.04); border-bottom: 1px solid rgba(255, 255, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(37, 61, 14, 0.05), 0 14px 40px -26px rgba(37, 61, 14, 0.4); } html.glass .site-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.55); } html.glass .site-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.12) 100%); } /* On the home page the drawing runs up under the glass. */ html.glass .hero-scroll { margin-top: calc(-1 * var(--header-h)); } /* ---- Full screen menu on phones -------------------------------------- */ html.glass .menu { background-color: rgba(26, 44, 8, 0.78); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); }