/* LIQUID GLASS — one material, three sites. * * WHY A SEPARATE FILE. honecoding and honejobs share style.css; honeweek has * its own calendar.css. Both already declare the same palette, variable for * variable. Writing the material twice is how the Google sign-in flow ended up * existing three times and only one of them getting fixed. So the material is * declared once here and every site loads it. * * WHAT LIQUID GLASS ACTUALLY IS, from Apple's own description: a translucent * material that reflects and refracts its surroundings and dynamically * transforms to bring greater focus to content. The parts that matter for a * browser approximation are translucency, a real backdrop blur, and the * specular edge — the thin bright line where a glass boundary catches light. * That edge is what separates glass from the flat translucent panels people * have been shipping since 2014; without it this is just glassmorphism. * * ADAPTED FOR A DARK PRODUCT, and this is the part every tutorial gets wrong. * The canonical recipe is rgba(255,255,255,0.12) over a light backdrop. On * --bg:#080a0d that reads as grey haze, not glass. On dark, the glass is * mostly the BLUR plus a brighter top edge and a darker bottom, because the * light is above. Saturation is pushed harder than Apple's default because * there is little colour underneath to refract. * * COST, AND WHY IT IS RATIONED. backdrop-filter forces the compositor to * re-sample everything behind an element on every frame. Two or three panes * on a screen are free; a list where every row is glass drops frames on a * phone, and this product is used on phones. So .glass is applied to * surfaces that FRAME content — headers, modals, the sign-in gate — and never * to repeating rows. * * ACCESSIBILITY IS NOT OPTIONAL HERE. prefers-reduced-transparency exists * because translucency genuinely hurts some people, and text over a live blur * has no guaranteed contrast ratio. Every rule below has an opaque fallback, * and the fallback is a real panel rather than a thinner glass. */ /* ── the material ───────────────────────────────────────────────────────── */ .glass { position: relative; /* Sits ON the blur, not instead of it: enough to lift the surface off the page without becoming the haze that flat glassmorphism settles for. */ background: linear-gradient( 180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.022) 38%, rgba(255, 255, 255, 0.012) 100%); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 16px; box-shadow: /* the specular edge — the whole difference between glass and haze */ inset 0 1px 0 rgba(255, 255, 255, 0.16), /* thickness: the underside catches no light */ inset 0 -1px 0 rgba(0, 0, 0, 0.30), /* the pane sits above the page rather than being printed on it */ 0 12px 32px rgba(0, 0, 0, 0.42); } /* THE REFRACTED RIM. A real edge bends light along its whole length, brightest at the top where the source is. One pseudo-element, no JavaScript, no SVG filter — feDisplacementMap gets closer but costs a full filter pass per frame, which is not worth it for a rim nobody consciously sees. */ .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 140deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.05) 32%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.09) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* A quieter pane for things that sit inside another pane. Stacking full glass inside full glass doubles the blur cost and reads as fog. */ .glass-sub { background: rgba(255, 255, 255, 0.028); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); } /* ── liquid: the response to touch ──────────────────────────────────────── */ /* "Liquid" is the half everyone drops. Apple's material reacts to movement; a pane that never responds is just glass. This is deliberately small — a lift and a brightening of the specular edge, 180ms, nothing that moves layout. */ .glass-tap { transition: transform .18s cubic-bezier(.22, .61, .36, 1), box-shadow .18s ease, background-color .18s ease; will-change: transform; } .glass-tap:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.30), 0 16px 38px rgba(0, 0, 0, 0.48); } .glass-tap:active { transform: translateY(0) scale(.994); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 2px 8px rgba(0, 0, 0, 0.34); } /* ── the honest fallbacks ───────────────────────────────────────────────── */ /* A browser without backdrop-filter must not get the translucent background ALONE: that is unblurred text over live page content, which is the one genuinely unreadable outcome. Opaque panel instead. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .glass-sub { background: var(--panel, #11161c); border-color: var(--line2, #242d38); } } /* Somebody has told their operating system that translucency is a problem for them. Honour it completely -- no blur, no gradient, a real surface. A thinner glass would be answering a different request. */ @media (prefers-reduced-transparency: reduce) { .glass, .glass-sub { background: var(--panel, #11161c) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: var(--line2, #242d38) !important; } .glass::before { display: none !important; } } /* Motion carries no information here, so removing it costs nothing. */ @media (prefers-reduced-motion: reduce) { .glass-tap, .glass-tap:hover, .glass-tap:active { transition: none !important; transform: none !important; } } /* PHONES GET LESS, on purpose. A 22px backdrop blur across several panes is the difference between a smooth scroll and a janky one on the hardware most of this product is used on, and "swift" was the brief. */ @media (max-width: 560px) { .glass { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 22px rgba(0, 0, 0, 0.40); } .glass-sub { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }