/* ============================================================ MUI — LIQUID GLASS iOS-27-inspired translucent material layer. Loaded LAST so it refines the existing design system without touching component markup. Everything keys off the app's own theme tokens (--orange / --sky / --green / --surface / --ink …) so every named theme (Citrus · Lagoon · Crimson · Midnight/dark) inherits the glass automatically. Principles · Surfaces become a layered translucent MATERIAL, not flat fills: a tinted blur + a soft top-edge highlight + a grounded shadow. · An ambient light field behind the UI gives the blur something real to refract — calm, theme-tinted, never busy. · Opacity stays high enough that dark ink keeps AA contrast. · One continuous corner language; floating elements get depth, not decoration. ============================================================ */ :root{ /* glass material — LIGHT */ --glass: rgba(255,255,255,.58); --glass-strong: rgba(255,255,255,.74); --glass-thin: rgba(255,255,255,.42); --glass-tint: rgba(255,255,255,.50); --glass-blur: saturate(180%) blur(22px); --glass-blur-lg: saturate(190%) blur(34px); /* edge lighting — a bright top hairline + a faint outer ring */ --glass-edge: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.42), inset 0 -10px 22px -18px rgba(120,80,20,.28); --glass-edge-soft: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.35); /* grounded, layered drop shadows */ --glass-lift: 0 1px 2px rgba(80,55,15,.06), 0 10px 26px -16px rgba(80,55,15,.42), 0 28px 48px -30px rgba(80,55,15,.30); --glass-lift-sm: 0 1px 2px rgba(80,55,15,.05), 0 8px 20px -14px rgba(80,55,15,.40); --glass-float: 0 6px 16px -6px rgba(80,55,15,.30), 0 22px 50px -18px rgba(80,55,15,.40); /* continuous, harmonised radii */ --r-sm:16px; --r:20px; --r-lg:26px; --r-xl:32px; } /* ---- LAGOON: cool glass + cool shadows ---- */ [data-palette="lagoon"]{ --glass: rgba(255,255,255,.56); --glass-strong: rgba(255,255,255,.72); --glass-edge: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -10px 22px -18px rgba(20,60,65,.26); --glass-lift: 0 1px 2px rgba(20,60,65,.06), 0 10px 26px -16px rgba(20,60,65,.40), 0 28px 48px -30px rgba(20,60,65,.28); --glass-lift-sm:0 1px 2px rgba(20,60,65,.05), 0 8px 20px -14px rgba(20,60,65,.38); } /* ---- DARK / MIDNIGHT: smoked charcoal glass ---- */ [data-theme="dark"]{ --glass: rgba(46,42,32,.52); --glass-strong: rgba(50,46,35,.70); --glass-thin: rgba(46,42,32,.38); --glass-tint: rgba(46,42,32,.46); --glass-blur: saturate(150%) blur(24px); --glass-blur-lg: saturate(160%) blur(36px); --glass-edge: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -10px 24px -18px rgba(0,0,0,.5); --glass-edge-soft: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.06); --glass-lift: 0 1px 2px rgba(0,0,0,.5), 0 12px 28px -16px rgba(0,0,0,.7), 0 30px 54px -30px rgba(0,0,0,.6); --glass-lift-sm: 0 1px 2px rgba(0,0,0,.5), 0 10px 22px -14px rgba(0,0,0,.66); --glass-float: 0 8px 20px -6px rgba(0,0,0,.6), 0 26px 56px -18px rgba(0,0,0,.7); } /* ============================================================ 1 · AMBIENT LIGHT FIELD A calm, theme-tinted wash behind the whole app so the glass has something to refract. Fixed within the phone, never scrolls, pointer-transparent. Sits under all content. ============================================================ */ .tc-app{ background:var(--bg); isolation:isolate; } .tc-app::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(120% 70% at 12% -8%, color-mix(in srgb, var(--orange) 24%, transparent) 0%, transparent 55%), radial-gradient(110% 60% at 100% 4%, color-mix(in srgb, var(--sky) 30%, transparent) 0%, transparent 52%), radial-gradient(120% 80% at 50% 116%, color-mix(in srgb, var(--green) 20%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 60%); opacity:.9; } [data-theme="dark"] .tc-app::before{ opacity:.55; } /* keep app content above the field */ .tc-scroll, .nav-wrap, .toast{ z-index:1; } /* A bottom sheet is a modal: hide the floating nav while one is open so the sheet's own action buttons (e.g. "Read the report") can't sit under it. (Sheets opened from inside .tc-scroll are trapped in its stacking context, so they can't simply out-z-index the nav.) */ .tc-app:has(.sheet-backdrop) .nav-wrap, .tc-app:has(.dialog-backdrop) .nav-wrap{ display:none; } /* ============================================================ 2 · GLASS SURFACES The neutral white cards across every screen become the same layered material. Accent-tinted cards (focus/companion) keep their colour but gain the glass edge + depth. ============================================================ */ .card, .card-sm, .card-flat, .ins-list, .ai-brief, .numtile, .insf-card, .stat, .snap-card, .me-head, .group-toggle, .tt-wrap, .tl-cat, .numgrid > .numtile, .wf-opt, .wf-blood, .wf-check, .wf-pref, .wf-medcard, .qa-item{ background:var(--glass-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-lift-sm), var(--glass-edge); border:none; } .card, .tt-wrap, .me-head{ box-shadow:var(--glass-lift), var(--glass-edge); } /* dark cards: the app forced solid charcoal — restore glass */ [data-theme="dark"] .card, [data-theme="dark"] .card-sm, [data-theme="dark"] .card-flat{ background:var(--glass-strong); } /* flat/outlined variants keep a hairline ring instead of a heavy lift */ .card-flat, .tl-cat{ box-shadow:var(--glass-edge-soft), var(--glass-lift-sm); } /* the Today content panel tucks over the hero as frosted glass */ .under-scene{ background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 78%, transparent), var(--bg) 40%); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); box-shadow:0 -1px 0 rgba(255,255,255,.6) inset, 0 -12px 30px -20px rgba(80,55,15,.4); } [data-theme="dark"] .under-scene{ box-shadow:0 -1px 0 rgba(255,255,255,.08) inset, 0 -12px 30px -20px rgba(0,0,0,.6); } /* accent-tinted hero cards (Today focus / companion / smart briefing): keep colour, gain the glass edge highlight + lift for depth */ .focus-card, .comp-card{ box-shadow:var(--glass-lift-sm), var(--glass-edge-soft); } /* nested fills inside glass cards stay readable as quiet inner panes */ .focus-stats, .fstat{ background:transparent; } .fstat{ background:color-mix(in srgb, var(--surface) 30%, transparent); } /* ============================================================ 3 · FLOATING NAVIGATION (already glass — deepen + lighten) ============================================================ */ .nav{ height:72px; background:rgba(255,255,255,.10); -webkit-backdrop-filter:saturate(200%) blur(10px); backdrop-filter:saturate(200%) blur(10px); box-shadow:var(--glass-float), inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.4); border-radius:28px; } [data-theme="dark"] .nav{ background:rgba(46,42,32,.16); box-shadow:var(--glass-float), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08); } .nav button{ transition:transform .18s cubic-bezier(.22,1,.36,1), color .18s; } .nav button:active{ transform:translateY(1px) scale(.94); } .nav .plus{ border-radius:20px; box-shadow:var(--sh-pop), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -8px 16px -8px rgba(120,40,0,.45); } /* ============================================================ 4 · BUTTONS · CHIPS · CONTROLS ============================================================ */ .btn{ transition:transform .14s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .25s; } /* primary keeps the accent gradient but gains a glossy top sheen */ .btn-primary, .wf-btn-primary, .section .link-pill{ box-shadow:var(--sh-pop), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px -10px rgba(120,40,0,.4); } /* ghost / soft / icon buttons become clear glass */ .btn-ghost, .wf-btn-ghost, .wf-btn-google, .icon-btn, .chip, .seg, .ai-refresh, .ai-cta, .stepper-btn, .me-id-edit, .tl-toggle{ background:var(--glass-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:none; box-shadow:var(--glass-edge-soft), var(--glass-lift-sm); } .chip{ box-shadow:var(--glass-edge-soft); } .chip.on, .seg button.on, .tl-toggle.on{ -webkit-backdrop-filter:none; backdrop-filter:none; } /* segmented control: glass trough, floating glass thumb */ .seg{ box-shadow:var(--glass-edge-soft), var(--glass-lift-sm); } .seg button.on{ background:var(--glass-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:0 2px 8px -3px rgba(80,55,15,.3), inset 0 1px 0 rgba(255,255,255,.8); } /* switches get a touch of depth on the knob */ .switch .knob, .switch-knob{ box-shadow:0 2px 6px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.9); } /* ============================================================ 5 · INPUTS — frosted wells ============================================================ */ .input, .textarea, select.input, .upload-drop{ background:var(--glass-tint); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid rgba(255,255,255,.5); box-shadow:inset 0 1px 3px rgba(80,55,15,.06); } [data-theme="dark"] .input, [data-theme="dark"] .textarea, [data-theme="dark"] select.input, [data-theme="dark"] .upload-drop{ border:1px solid rgba(255,255,255,.08); } .input:focus, .textarea:focus{ border-color:var(--orange); box-shadow:0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent), inset 0 1px 3px rgba(80,55,15,.06); } /* ============================================================ 6 · SHEETS · DIALOGS · TOAST — heavy, premium frost ============================================================ */ .sheet-backdrop, .dialog-backdrop{ background:color-mix(in srgb, var(--ink) 22%, transparent); -webkit-backdrop-filter:blur(10px) saturate(130%); backdrop-filter:blur(10px) saturate(130%); } [data-theme="dark"] .sheet-backdrop, [data-theme="dark"] .dialog-backdrop{ background:rgba(0,0,0,.5); } .sheet, .dialog{ background:var(--glass-strong); -webkit-backdrop-filter:var(--glass-blur-lg); backdrop-filter:var(--glass-blur-lg); box-shadow:0 -24px 60px -24px rgba(46,32,12,.5), inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.4); } [data-theme="dark"] .sheet, [data-theme="dark"] .dialog{ box-shadow:0 -24px 60px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.07); } .sheet{ border-radius:32px 32px 0 0; } .dialog{ border-radius:28px; } .sheet-grip{ background:color-mix(in srgb, var(--ink-3) 60%, transparent); } .toast{ background:color-mix(in srgb, var(--ink) 86%, transparent); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:var(--glass-float), inset 0 1px 0 rgba(255,255,255,.18); } /* ============================================================ 7 · STATUS BAR — let the ambient field show through ============================================================ */ .statusbar{ z-index:70; } /* ============================================================ 8 · MOTION — fluid, settled transitions on tappable glass ============================================================ */ @media (prefers-reduced-motion: no-preference){ .card, .card-sm, .numtile, .insf-card, .snap-card, .stat, .qa-item, .me-row, .chip, .btn, .wf-opt, .tl-cat-head{ transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1), background .2s ease; } button.tip-card:active, .numtile:active, .insf-card:active, .snap-card:active, .stat:active, .qa-item:active{ transform:scale(.985); } } /* never let the glass blur the printed/exported view into mush */ @media print{ .tc-app::before{ display:none; } .card,.card-sm,.card-flat,.nav,.sheet,.dialog,.ai-brief,.ins-list{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface); } }