/* ============================================================================= mh-liquid.css - LIQUID GLASS (19 September 2026) Owner, with a photo of the iOS 26 Control Center: "can you see the iPhone Liquid Glass style? Change the top bar like that, add the Liquid Glass theme too and apply it EVERYWHERE across the database - I want to double check it." He also asked that I read about it first, so the recipe below is built from what the material actually is, not from a guess at the picture. WHAT LIQUID GLASS IS (Apple, iOS 26 / macOS Tahoe, June 2025). Five optical parts: 1. translucency + blur of whatever is behind it 2. SATURATION and a lift in brightness - the backdrop reads richer through the glass 3. REFRACTION - the pane acts as a lens and displaces the backdrop at its edges 4. chromatic aberration - red and blue bend by slightly different amounts 5. SPECULAR LIGHT - a directional highlight along one rim, shade along the opposite WHAT A BROWSER CAN AND CANNOT DO. 1, 2 and 5 are straight CSS and are all here. 3 and 4 need an SVG feDisplacementMap fed into `backdrop-filter: url(#id)`, and ONLY Chromium honours an SVG filter there - Safari and Firefox drop it, and with it the blur. It is also a per-pixel displacement map that has to be rebuilt whenever the element resizes, which on a page of ninety household cards is not a trade worth making. So this theme does the optics that are real everywhere, and fakes the edge of the lens with a bright specular rim and an inner shade - which is the part the eye actually reads as "glass". HOW IT REACHES EVERYWHERE. Two halves: A. the TOKENS. `--mh-surface` alone is behind ~250 painted surfaces across 25 stylesheets; `--surface`, `--card` and `--paper` cover the wizard, detail and subsidy scopes. Re-tinting those four reaches every white panel in the app at once, without touching 25 files. B. the BLUR. backdrop-filter has to sit on the element itself, so the big surfaces are named explicitly below. A small chip that only inherits the token still reads as glass, because the canvas behind it has colour to show through. READABILITY IS NOT NEGOTIABLE. This is a case-work tool people read all day. Panels stay near half white, not the 20% a marketing page can afford, and anything that floats OVER other text - menus, popovers, dialogs - is denser still (82%). Dark mode is untouched; every rule here is `body:not(.dark)`. Scoped entirely to html[data-canvas="liquid"] - picking any other theme leaves the app exactly as it was. ============================================================================= */ /* ---------------------------------------------------------------- A. the tokens */ html[data-canvas="liquid"] body:not(.dark) { /* the one surface token behind most of the app */ --mh-surface: rgba(255,255,255,.46); --mh-cream-2: rgba(255,255,255,.32); /* shadows go deeper and softer - glass floats, it does not sit */ --mh-shadow-sm: 0 8px 22px -14px rgba(16,42,56,.42); --mh-shadow-lg: 0 30px 70px -28px rgba(16,42,56,.55); } html[data-canvas="liquid"] body:not(.dark) :is(#clWiz, #clMbr, #clDetail) { --surface: rgba(255,255,255,.46); } html[data-canvas="liquid"] body:not(.dark) .wzx { --card: rgba(255,255,255,.46); } /* ---------------------------------------------------------------- the recipe One definition, used by every surface below. The three box-shadow insets ARE the lens edge: a bright line where the light hits (top + left), a faint one on the opposite rim, and a soft inner shade at the bottom that gives the pane thickness. */ /* NOTE on the shape of this selector: `.mh-fs .kpi` is TWO classes, and an :is() takes the specificity of its most specific argument - so folding it in here would have made this rule out-rank the single-class overrides further down (it did: the top bar's own rule lost and its 34px blur never applied). Each :is() below holds selectors of the SAME weight. */ html[data-canvas="liquid"] body:not(.dark) .mh-app :is(.topbar, .idcard, .cl-side, .set-side, .passcard), html[data-canvas="liquid"] body:not(.dark) .mh-app .mh-fs :is(.kpi, .panel, .whcard), html[data-canvas="liquid"] body:not(.dark) #mhDetail :is(.modal, .sheet), html[data-canvas="liquid"] body:not(.dark) :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts) .modal { background: /* the specular sweep - the light running across the pane */ linear-gradient(118deg, rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 68%, rgba(var(--tg-rgb,255,255,255),calc(.22*var(--tg-k,1))) 100%), /* the body of the glass */ linear-gradient(180deg, rgba(var(--tg-rgb,255,255,255),calc(.52*var(--tg-k,1))) 0%, rgba(var(--tg-rgb,255,255,255),calc(.30*var(--tg-k,1))) 100%); -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.08); backdrop-filter: blur(30px) saturate(200%) brightness(1.08); border: 1px solid rgba(255,255,255,.62);border-right-color:var(--tg-edge-r,rgba(255,255,255,.62));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.62)); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), /* the lit rim */ inset 1px 0 0 rgba(255,255,255,.55), /* and down its left edge */ inset -1px -1px 0 rgba(255,255,255,.20), /* the far rim, faint */ inset 0 -14px 26px -20px rgba(12,38,52,.45), /* thickness */ 0 14px 34px -18px rgba(12,38,52,.38); /* float */ } /* the top bar is the one he pointed at: same glass, edge to edge, no side rims */ html[data-canvas="liquid"] body:not(.dark) .mh-app .topbar { border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.62); -webkit-backdrop-filter: blur(34px) saturate(210%) brightness(1.10); backdrop-filter: blur(34px) saturate(210%) brightness(1.10); } /* ---------------------------------------------------------------- the controls Small glass: less blur, a pine hairline so a button still reads as a button. */ html[data-canvas="liquid"] body:not(.dark) .mh-app .topbar :is(.icon-btn, .tb-user), html[data-canvas="liquid"] body:not(.dark) .mh-app .topbar .gsearch .bigbar.b14, html[data-canvas="liquid"] body:not(.dark) .mh-app .main :is( .seg, .wg-seg, .cl-switch, .cl-filterbtn, .cl-iobtn, .bigbar.b14.cl-srchbar, .icf.pill.country, .ad-approvals, .mh-fs .filter-btn), html[data-canvas="liquid"] body:not(.dark) .mh-app .main :is(.cl-head, .toolbar) .mh-sel select { background: linear-gradient(118deg, rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1))) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(var(--tg-rgb,255,255,255),calc(.20*var(--tg-k,1))) 100%), linear-gradient(180deg, rgba(var(--tg-rgb,255,255,255),calc(.52*var(--tg-k,1))) 0%, rgba(var(--tg-rgb,255,255,255),calc(.30*var(--tg-k,1))) 100%); -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.06); backdrop-filter: blur(18px) saturate(190%) brightness(1.06); border: 1px solid rgba(255,255,255,.60);border-right-color:var(--tg-edge-r,rgba(255,255,255,.60));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.60)); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -6px 14px -12px rgba(12,38,52,.45), 0 6px 16px -10px rgba(12,38,52,.35); } html[data-canvas="liquid"] body:not(.dark) .mh-app .topbar :is(.icon-btn, .tb-user):hover, html[data-canvas="liquid"] body:not(.dark) .mh-app .main :is( .cl-filterbtn, .cl-iobtn, .icf.pill.country, .bigbar.b14.cl-srchbar, .ad-approvals, .mh-fs .filter-btn):hover { background: linear-gradient(118deg, rgba(var(--tg-rgb,255,255,255),.80) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))) 100%), linear-gradient(180deg, rgba(var(--tg-rgb,255,255,255),calc(.66*var(--tg-k,1))) 0%, rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 100%); } /* ---------------------------------------------------------------- readability guard Anything that floats OVER other text is denser and blurs harder, so the words underneath never bleed into the words on top. Apple does the same with menus. */ html[data-canvas="liquid"] body:not(.dark) .mh-app :is( .search-pop, .bell-menu, .tb-menu, .sel-pop, .mh-pop, .cd-photomenu, .pass-emailmenu, .dp-pop, .wg-pop) { background: linear-gradient(180deg, rgba(var(--tg-rgb,255,255,255),.90) 0%, rgba(var(--tg-rgb,255,255,255),.82) 100%); -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%); border: 1px solid rgba(255,255,255,.75);border-right-color:var(--tg-edge-r,rgba(255,255,255,.75));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.75)); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 30px 70px -28px rgba(12,38,52,.55); } /* a card lifts out of the glass rather than just moving up */ html[data-canvas="liquid"] body:not(.dark) .mh-app .idcard:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -14px 26px -20px rgba(12,38,52,.45), 0 26px 56px -22px rgba(12,38,52,.48); } /* the pine surfaces (the nav rail, the wizard rails, the pass header) are IDENTITY, not chrome - they stay solid, exactly as in iOS, where the dock and the wallpaper do not both become glass. Left deliberately untouched. */ @media (prefers-reduced-transparency: reduce) { /* someone who has asked the OS for less transparency gets flat panels, not soup */ html[data-canvas="liquid"] body:not(.dark) { --mh-surface: #FFFFFF; --mh-cream-2: #F1F4F7; } html[data-canvas="liquid"] body:not(.dark) .mh-app :is( .topbar, .idcard, .mh-fs .kpi, .mh-fs .panel, .mh-fs .whcard, .cl-side, .set-side, .passcard) { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ---------------------------------------------------------------- cost control The Clients grid renders 94 household cards, and every backdrop-filter is a separate blur of the page behind it - at blur(30) that is 94 full-surface blurs on every scroll frame. The cards drop to blur(18) with the same optics: at a card's size the difference is invisible, and the frame cost roughly halves. The big single surfaces (top bar, panels, side rails, modals) keep the full 30. */ html[data-canvas="liquid"] body:not(.dark) .mh-app .idcard{ -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.07); backdrop-filter: blur(18px) saturate(190%) brightness(1.07); }