/* ============================================================================= mh-themeglass.css - THEMEGLASS29 (29 September 2026): EVERY THEME IS LIQUID GLASS. Owner, with four screenshots on Blush Pink: "the theme only the background getting the effects, not the KPI cards, not the left sidebar panel ... I want glassy look theme same as iPhone 18 Pro Max ... rebuild every theme one by one and apply it on all mocks, fields, looks and design." The global nav rail (HOME, CLIENTS ...) is left alone on his order - it is decided after this build. WHAT WAS WRONG (measured, not guessed). The panels, KPI cards and record cards were ALREADY glass - a census on Blush Pink found almost no opaque surface. But every pane was WHITE glass (42% -> 18% white) over a pale, nearly flat ground, pushed brighter still by brightness(1.06). White glass over pale pink reads as white. The theme reached the ground and stopped there. Six surfaces were not glass at all (Admin > Users cards, Settings' two panels, the Requests cards and counters, the Reports card, the Help search). WHAT THE MATERIAL IS. Apple's name for it is LIQUID GLASS - the material, not the phone. It shipped with iOS 26 (June 2025); the iPhone 18 Pro Max (September 2026) runs iOS 27, which REFINED it: "a darkened edge around Liquid Glass elements, along with brighter specular highlights", better diffusion of busy content, and a Settings slider from "ultra clear to fully tinted". Its colour is taken from what sits behind it. HOW THIS FILE DOES IT - three moves, no new blur anywhere: 1. THE GROUND (css/mh-canvas.css). Every theme keeps its own base colour and gains soft blooms in its own colour family, so the glass has something to show. 2. THE TINT. Every translucent-white glass FILL in 31 stylesheets (841 of them) now reads rgba(var(--tg-rgb), A) instead of rgba(255,255,255, A) - a one-time scripted retint, backups in _handoff/backup_THEMEGLASS29. --tg-rgb is set per theme below, so a pane on Blush Pink is rose glass and a pane on Still Water is water glass. RIMS STAY WHITE: the lit edge is light, not glass. 3. THE iOS 27 EDGE. The far edges (right + bottom) of a glass pane take a darkened, theme-coloured line (--tg-edge-r / --tg-edge-b) while the near edges stay lit - the pane reads as a lens with thickness. Hairlines and shadows take the theme's deep hue. PLUS the iOS 27 slider: Settings > Themes > Glass - Clear / Standard / Frosted (html[data-glass], key mh.glass, multiplies every glass alpha under .80 through --tg-k). THE GUARDS. - Light mode only. Every token is set under body:not(.dark); dark mode reads the var() fallback, which is the exact old white. - Reading surfaces (alpha .80 and over - menus, popovers, sticky headers) never move with the slider: they exist to mask what is under them. - QR tiles are opaque white and were never touched (the scanner needs pure white). - Pine surfaces (headers, wizard rails, primary buttons) are brand identity and stay pine - iOS keeps an app's accent colour the same on every wallpaper. - prefers-reduced-transparency: the glass goes solid. ============================================================================= */ /* ---------------------------------------------------------------- 1. THE TWELVE TINTS --tg-rgb : the glass body - near white with a breath of the theme's hue --tg-deep : the theme's deep hue - the far edge, the hairlines, the float shadow Declared on the page (html[data-canvas] body) AND on any element that carries its own data-canvas (the Settings swatches), so each swatch shows its OWN theme's glass. */ html[data-canvas="slate"] body:not(.dark), body:not(.dark) [data-canvas="slate"], html:not([data-canvas]) body:not(.dark) { --tg-rgb:246,249,253; --tg-deep:38,60,88; } html[data-canvas="white"] body:not(.dark), body:not(.dark) [data-canvas="white"] { --tg-rgb:255,255,255; --tg-deep:40,58,76; } html[data-canvas="pure"] body:not(.dark), body:not(.dark) [data-canvas="pure"] { --tg-rgb:255,255,255; --tg-deep:30,42,54; } html[data-canvas="cloud"] body:not(.dark), body:not(.dark) [data-canvas="cloud"] { --tg-rgb:251,252,255; --tg-deep:52,66,88; } html[data-canvas="current"] body:not(.dark), body:not(.dark) [data-canvas="current"] { --tg-rgb:250,251,254; --tg-deep:46,62,84; } html[data-canvas="sage"] body:not(.dark), body:not(.dark) [data-canvas="sage"] { --tg-rgb:245,252,248; --tg-deep:30,74,58; } html[data-canvas="water"] body:not(.dark), body:not(.dark) [data-canvas="water"] { --tg-rgb:244,250,254; --tg-deep:24,72,104; } html[data-canvas="dawn"] body:not(.dark), body:not(.dark) [data-canvas="dawn"] { --tg-rgb:254,250,245; --tg-deep:62,84,72; } html[data-canvas="aurora"] body:not(.dark), body:not(.dark) [data-canvas="aurora"] { --tg-rgb:246,252,252; --tg-deep:30,78,94; } html[data-canvas="stone"] body:not(.dark), body:not(.dark) [data-canvas="stone"] { --tg-rgb:255,250,244; --tg-deep:112,72,46; } html[data-canvas="blush"] body:not(.dark), body:not(.dark) [data-canvas="blush"] { --tg-rgb:255,244,249; --tg-deep:124,52,86; } html[data-canvas="liquid"] body:not(.dark), body:not(.dark) [data-canvas="liquid"] { --tg-rgb:255,255,255; --tg-deep:22,42,62; } /* ---------------------------------------------------------------- 2. WHAT EACH THEME DERIVES Re-declared wherever a theme is declared, so a swatch recomputes from its own hue. */ html[data-canvas] body:not(.dark), html:not([data-canvas]) body:not(.dark), body:not(.dark) [data-canvas] { --tg-edge-r: rgba(var(--tg-deep), .10); /* the far rims - iOS 27's darkened edge */ --tg-edge-b: rgba(var(--tg-deep), .17); --tg-line: rgba(var(--tg-deep), .15); /* hairlines, dividers */ --tg-shadow: rgba(var(--tg-deep), .34); /* the float */ --tg-sweep: linear-gradient(118deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 70%, rgba(255,255,255,.16) 100%); --tg-glass: linear-gradient(180deg, rgba(var(--tg-rgb), calc(.60 * var(--tg-k, 1))) 0%, rgba(var(--tg-rgb), calc(.34 * var(--tg-k, 1))) 100%); --tg-ctrl: linear-gradient(180deg, rgba(var(--tg-rgb), calc(.46 * var(--tg-k, 1))) 0%, rgba(var(--tg-rgb), calc(.20 * var(--tg-k, 1))) 100%); /* the app's shared tokens pick the theme up too */ --mh-line: var(--tg-line); --mh-shadow-sm: 0 8px 22px -14px rgba(var(--tg-deep), .36); --mh-shadow-lg: 0 30px 70px -28px rgba(var(--tg-deep), .44); } /* the record / wizard scopes that set their own opaque grey hairline (#D9DFE7) */ body:not(.dark) :is(#mhDetail, #hhDetail, #clWiz, #clMbr, #clDetail) { --line: var(--tg-line); } /* ---------------------------------------------------------------- 2b. THE SOLID SURFACES TAKE THE THEME Owner, mid-build, with the notification list open: "the notification lists still not get effect - you have to be very careful to apply the theme on all pieces." The first census only measured what is ON the page; a menu, a drop-down or a date picker only exists once it is opened. The fix is at the source: every menu, popover, field and wizard window paints from a handful of shared tokens (--mh-surface alone: 218 uses), so the tokens take the theme. Calibrated so Slate Calm lands within a few levels of the old greys: surface = the tint, cream-2 = 4% of the deep hue, cream = 9%, field well = 12%. Liquid Glass keeps its own translucent --mh-surface / --mh-cream-2 (mh-liquid.css). */ html[data-canvas] body:not(.dark), html:not([data-canvas]) body:not(.dark), body:not(.dark) [data-canvas] { --tg-cream2: color-mix(in srgb, rgb(var(--tg-rgb)) 96%, rgb(var(--tg-deep))); --tg-cream: color-mix(in srgb, rgb(var(--tg-rgb)) 91%, rgb(var(--tg-deep))); --tg-well: color-mix(in srgb, rgb(var(--tg-rgb)) 88%, rgb(var(--tg-deep))); --tg-well-h: color-mix(in srgb, rgb(var(--tg-rgb)) 90%, rgb(var(--tg-deep))); --mh-cream: var(--tg-cream); --mh-ctrl-fill: var(--tg-cream2); /* the rest fill of every textbox / select / search / combo (85 uses) */ --mh-ctrl-fill-2: var(--tg-well); /* checkbox-off / toggle-track-off */ } html[data-canvas]:not([data-canvas="liquid"]) body:not(.dark), html:not([data-canvas]) body:not(.dark) { --mh-surface: rgb(var(--tg-rgb)); --mh-cream-2: var(--tg-cream2); } /* the record / wizard / window scopes that declare their own copies of those greys */ body:not(.dark) :is(#mhDetail, #hhDetail, #clWiz, #clMbr, #clDetail, #enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #cnDelete, #pgWiz, #schWiz, #latePts, #ecsWiz, .wzx), body:not(.dark) .mh-app :is(.tm-page, .tm-modal) { --f-rest-bg: var(--tg-well); --f-hover-bg: var(--tg-well-h); --f-focus-bg: rgb(var(--tg-rgb)); --cream: var(--tg-cream); --cream2: var(--tg-cream2); } body:not(.dark) :is(#clWiz, #clMbr, #clDetail) { --surface: rgb(var(--tg-rgb)); } html:not([data-canvas="liquid"]) body:not(.dark) .wzx { --card: rgb(var(--tg-rgb)); } body:not(.dark) .dp { --dp-bg: rgb(var(--tg-rgb)); --dp-field-bg: rgb(var(--tg-rgb)); } body:not(.dark) .country-combo { --cf-canvas: var(--mh-canvas); --cf-rest-bg: var(--tg-well); --cf-hover-bg: var(--tg-well-h); --cf-focus-bg: rgb(var(--tg-rgb)); --cf-menu-bg: rgb(var(--tg-rgb)); } body:not(.dark) :is(#mhMail, #mhCompose, .ml-dock) { --ml-canvas: var(--mh-canvas); } body:not(.dark) #ppProfOv { --pp-surface: rgb(var(--tg-rgb)); --pp-cream: var(--tg-cream); --pp-cream2: var(--tg-cream2); --pp-line: var(--tg-line); } /* ---------------------------------------------------------------- 2c. EVERY MENU AND POPOVER IS DENSE GLASS iOS menus are the thickest glass on the screen: they float over text, so the words beneath must never bleed into the words on top. MEASURED: at 95% with a blur, the KPI numbers under the notification list still showed through - most menus sit inside the top bar or a record, which is already a backdrop root, so a menu's own blur has nothing to sample and never frosts. So a menu is OPAQUE in the theme's tint (the words underneath cannot bleed), and it reads as glass by its optics: the specular sweep, the lit rim, the darkened far edge and a deep float in the theme's hue. No backdrop-filter. */ body:not(.dark) .mh-app :is(.search-pop, .bell-menu, .top-menu, .tb-menu, .pl-menu, .pp-menu, .exp-menu, .att-navpop, .cl-iomenu, .filterpop, .mrq-filter-menu, .cd-photomenu, .mh-pop, .wg-pop, .sel-pop, .cn-tbmenu, .mhcombo-panel--float), body:not(.dark) :is(#mhDetail, #hhDetail, #clWiz, #clMbr, #clDetail, #enrollWiz, #cnWiz, #pgWiz, #schWiz, #latePts, .wzx) :is(.selpop, .dv-menu, .pv-menu, .f-menu, .sd-mentionpop, .cnd-mentionpop, .cl-mentionpop, .cd-mentionpop), body:not(.dark) :is(.mh-ssp, .dp-pop, .combo .menu), body:not(.dark) .tm-page :is(.tm-me-menu, .tm-emojipop, .tm-mentionpop), body:not(.dark) :is(#mhMail, #mhCompose) :is(.ml-pop, .mc-menu, .mc-pop) { background: var(--tg-sweep), linear-gradient(180deg, rgb(var(--tg-rgb)) 0%, var(--tg-cream2) 100%); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(255,255,255,.85); border-right-color: var(--tg-edge-r); border-bottom-color: var(--tg-edge-b); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 28px 60px -24px var(--tg-shadow), 0 2px 8px -4px rgba(var(--tg-deep), .18); } /* ---------------------------------------------------------------- 2d. INSIDE THE RECORD AND THE WIZARD, THE SAME WALLPAPER A record window or wizard painted the theme as ONE FLAT colour, so its glass cards had nothing behind them either - the same fault as the page, one layer down. The working pane of every window now carries its theme's wallpaper, painted ONCE on the pane (not on the scroller - the blooms stay still while the cards scroll over them, and no fixed background is used, which would repaint on every scroll frame). The pane's footer goes clear so it sits on the same wallpaper instead of cutting a flat strip across it. */ body:not(.dark) #mhDetail :is(.pane, .sheet, .kid-pane), body:not(.dark) :is(#enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #cnDelete) :is(.pane, .kid-pane, .kid-ov), body:not(.dark) :is(#pgWiz, #schWiz, #latePts) .pane, body:not(.dark) #hhDetail .hhbox, body:not(.dark) :is(#clWiz, #clMbr) .dzright.w1, body:not(.dark) #ecsWiz .ecs-body, body:not(.dark) #mhMail .ml-pane, body:not(.dark) .wzx .wright, body:not(.dark) .mh-app .pgp-win.pgp-win, body:not(.dark) #latePts .modal.lp2 { background-color: var(--mh-canvas); background-image: var(--mh-canvas-img); } body:not(.dark) #mhDetail :is(.pane, .sheet, .kid-pane) :is(.m-foot, .kid-foot), body:not(.dark) :is(#enrollWiz, #cnWiz, #cnXfer, #cnUnlock, #cnAccess, #cnDelete) :is(.pane, .kid-pane) :is(.m-foot, .kid-foot), body:not(.dark) :is(#pgWiz, #schWiz, #latePts) .pane .m-foot, body:not(.dark) #hhDetail .hhbox :is(.hh-scroll, .foot), body:not(.dark) :is(#clWiz, #clMbr) .dzright.w1 :is(.dzmain, .foot), body:not(.dark) #mhMail .ml-pane .ml-foot, body:not(.dark) #latePts .modal.lp2 .lp-foot { background: transparent; } /* ---------------------------------------------------------------- 3. THE GLASS SLIDER (iOS 27) Clear lets more of the wallpaper through, Frosted holds more of the pane. Standard = 1. */ html[data-glass="clear"] body:not(.dark) { --tg-k: .70; } html[data-glass="frosted"] body:not(.dark) { --tg-k: 1.45; } /* ---------------------------------------------------------------- 4. THE SIX THAT WERE NOT GLASS The content-glass recipe: the tint, the specular sweep, a lit near rim, a darkened far rim, a thickness shade and the theme's float. NO backdrop-filter - these repeat per row, and a blur over a smooth ground returns the same smooth ground (see the 21 Sep blur cull). */ body:not(.dark) .mh-app .adu, body:not(.dark) .mh-app .mrq-card, body:not(.dark) .mh-app .rqp-stat, body:not(.dark) .cs-card { /* (#view-settings .set-body left this list 29 Sep: SETMINT29 - its cards float on the theme) */ background: var(--tg-sweep), var(--tg-glass); border: 1px solid rgba(255,255,255,.80); border-right-color: var(--tg-edge-r); border-bottom-color: var(--tg-edge-b); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -12px 24px -20px rgba(var(--tg-deep), .30), 0 14px 30px -20px var(--tg-shadow); } body:not(.dark) .mh-app .adu:hover { background: var(--tg-sweep), linear-gradient(180deg, rgba(var(--tg-rgb), .78) 0%, rgba(var(--tg-rgb), .50) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 22px 44px -22px var(--tg-shadow); } /* the counter that is picked keeps its pine ring */ body:not(.dark) .mh-app .rqp-stat.on { border-color: rgba(47,107,87,.55); } /* Settings' views panel: the same glass as every other views panel (FILTERWX18); its own #view-settings rule out-ranked the shared one, which is why it stayed solid white */ body:not(.dark) #view-settings .set-side { background: var(--tg-sweep), linear-gradient(180deg, rgba(var(--tg-rgb), calc(.42 * var(--tg-k, 1))) 0%, rgba(var(--tg-rgb), calc(.18 * var(--tg-k, 1))) 100%); border: 1px solid rgba(255,255,255,.85); border-right-color: var(--tg-edge-r); border-bottom-color: var(--tg-edge-b); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 32px -18px var(--tg-shadow); } /* the Help Center search was the last #DFE4EA search bar - it takes the toolbar control glass */ body:not(.dark) .mh-app .bigbar.hlp-srch, body:not(.dark) .mh-app .mrq-filter-btn:not(.active):not([aria-pressed="true"]):not(:hover) { background: var(--tg-ctrl); border: 1px solid rgba(47,107,87,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 16px -10px var(--tg-shadow); } /* ---------------------------------------------------------------- 5. THE FAR EDGE ON THE BIG PANES The retint added the darkened edge wherever a glass rule wore a plain 1px white rim. These are the big panes whose rim is written another way; they get the same edge here. */ body:not(.dark) .mh-app .topbar { border-bottom-color: var(--tg-edge-b); } /* ---------------------------------------------------------------- 6. REDUCED TRANSPARENCY Someone who has asked the computer for less transparency gets solid panes in the theme's own near-white, never soup. */ @media (prefers-reduced-transparency: reduce) { html[data-canvas] body:not(.dark) { --tg-k: 2.4; } }