/* * Liquid Glass — opt-in Apple-style frosted-translucent theme. * * GATED ENTIRELY behind : every surface rule is prefixed * with :root[data-glass="on"], so when the Utilities toggle is OFF this file * contributes ZERO active rules and the app renders exactly as before. Loaded * LAST in the cascade (after footer-dock.css) so, when ON, it overrides the * per-feature surface backgrounds. * * INTENSITY: a single 0..1 knob --glass-t (set inline on by the slider * in js/init/liquid-glass.js) drives blur + tint opacity + saturation together — * low = clear/see-through, high = milky/frosted. Defaults live here so the look * is correct even before the script runs. * * LIGHT/DARK: only the tint base + edge highlight + shadow swap. The dark block * (:root[data-glass="on"]) applies to BOTH themes; the light block overrides just * those few variables. Text colors already adapt via the app's --ink tokens. */ :root[data-glass="on"] { --glass-t: 0.55; /* slider overrides this inline */ --glass-blur: calc(3px + var(--glass-t) * 30px); /* 3px clear → 33px frosted */ --glass-saturate: calc(135% + var(--glass-t) * 65%); /* 135% → 200% (vivid Apple look) */ /* Dark surface tint (navy), alpha ramps with intensity. */ --glass-tint-rgb: 12, 24, 38; --glass-tint-a: calc(0.16 + var(--glass-t) * 0.5); /* 0.16 see-through → 0.66 frosted */ --glass-edge: rgba(255, 255, 255, calc(0.06 + var(--glass-t) * 0.12)); /* hairline rim */ --glass-hi: rgba(255, 255, 255, calc(0.05 + var(--glass-t) * 0.14)); /* top gloss */ --glass-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.55); } :root[data-theme="light"][data-glass="on"] { /* White tint; light backgrounds need a touch more opacity to stay legible. */ --glass-tint-rgb: 255, 255, 255; --glass-tint-a: calc(0.30 + var(--glass-t) * 0.5); /* 0.30 → 0.80 */ --glass-edge: rgba(255, 255, 255, calc(0.5 + var(--glass-t) * 0.3)); --glass-hi: rgba(255, 255, 255, calc(0.4 + var(--glass-t) * 0.4)); --glass-shadow: 0 18px 46px -24px rgba(40, 70, 100, 0.4); } /* ── The reusable glass surface (floating / sticky / overlay chrome) ───────── */ :root[data-glass="on"] .top-pinned-shell, :root[data-glass="on"] .sticky-nav-bar, :root[data-glass="on"] .scorecard-controls-shell, :root[data-glass="on"] .games-controls-shell, :root[data-glass="on"] .ui-dialog-card, :root[data-glass="on"] .paywall-card, :root[data-glass="on"] .player-entry-modal, :root[data-glass="on"] .games-picker-modal, :root[data-glass="on"] .banker-sheet, :root[data-glass="on"] .wolf-sheet, :root[data-glass="on"] .voice-sheet, :root[data-glass="on"] .voice-fab-ribbon, :root[data-glass="on"] .unified-menu, :root[data-glass="on"] .course-dropdown, :root[data-glass="on"] .game-options-panel { background: rgba(var(--glass-tint-rgb), var(--glass-tint-a)) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); /* Edge rim + top gloss via inset shadow (no layout shift), plus a soft drop. */ box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge), var(--glass-drop, 0 0 0 0 transparent); } /* The drop shadow is only for FLOATING surfaces (modals / sheets / dropdowns / menu / FAB ribbon / option panels). The edge-flush header + footer dock opt OUT — their downward drop shadow cast a heavy band over the top of the scorecard. They keep just the hairline edge + top gloss. */ :root[data-glass="on"] .ui-dialog-card, :root[data-glass="on"] .paywall-card, :root[data-glass="on"] .player-entry-modal, :root[data-glass="on"] .games-picker-modal, :root[data-glass="on"] .banker-sheet, :root[data-glass="on"] .wolf-sheet, :root[data-glass="on"] .voice-sheet, :root[data-glass="on"] .voice-fab-ribbon, :root[data-glass="on"] .unified-menu, :root[data-glass="on"] .course-dropdown, :root[data-glass="on"] .game-options-panel { --glass-drop: var(--glass-shadow); } /* Sheet/modal headers sit on the same glass — make them transparent so the one blurred surface reads as a single pane instead of a seam. */ :root[data-glass="on"] .banker-sheet-header, :root[data-glass="on"] .wolf-sheet-header, :root[data-glass="on"] .voice-sheet-header, :root[data-glass="on"] .player-entry-modal-header, :root[data-glass="on"] .unified-menu-header { background: transparent !important; } /* Scrims behind modals/sheets: scale the behind-glass blur with intensity too, so the whole stack feels like one material. Keep their existing dim color. */ :root[data-glass="on"] .ui-dialog-scrim, :root[data-glass="on"] .paywall-overlay, :root[data-glass="on"] .player-entry-modal-backdrop, :root[data-glass="on"] .games-picker-modal-backdrop, :root[data-glass="on"] .banker-sheet-backdrop, :root[data-glass="on"] .wolf-sheet-backdrop, :root[data-glass="on"] .voice-sheet-backdrop, :root[data-glass="on"] .unified-menu-backdrop { -webkit-backdrop-filter: blur(calc(2px + var(--glass-t) * 14px)); backdrop-filter: blur(calc(2px + var(--glass-t) * 14px)); } /* ── WebKit / iOS compositing fix ───────────────────────────────────────────── * A glassed (-webkit-backdrop-filter) sibling — our header / footer dock — can * paint OVER a higher-z-index fixed overlay that has no compositing layer of its * own. On iOS WKWebView/Safari that hid the logo + title on the Welcome and * "My Rounds" screens (both are .welcome-overlay: z-index 20000, but NOT glassed, * so it wasn't on its own layer). It looks fine in Chromium, which honors the * z-index regardless. Promoting the overlay to its own GPU layer makes WebKit * keep it above the glass. Safe: the overlay has no position:fixed descendants, * so translateZ(0) re-anchors nothing, and the base element animates opacity, not * transform. Only needed while glass is on. */ :root[data-glass="on"] .welcome-overlay { transform: translateZ(0); isolation: isolate; } /* ─────────────────────────────────────────────────────────────────────────── * The Utilities controls (always styled — not gated; they live in the menu * regardless of whether glass is on). * ───────────────────────────────────────────────────────────────────────── */ .glass-toggle .glass-toggle-label { font-weight: 600; } .glass-toggle.is-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 14%, var(--btn-bg, var(--panel))); } .glass-toggle.is-on .glass-toggle-icon { color: var(--accent); } .glass-intensity-row { align-items: center; } .glass-intensity-slider { -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent)); outline: none; cursor: pointer; } .glass-intensity-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-solid, #fff); border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32); cursor: pointer; } .glass-intensity-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--panel-solid, #fff); border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32); cursor: pointer; } .glass-intensity-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }