/* ===================================================================== FPL Analyzer — Pure Liquid Glass buttons Applies a translucent frosted-glass ("liquid glass") material to every button across the site: backdrop blur + saturation, a specular top highlight, soft inner shadow, and depth. Uses !important on the material properties so it also overrides JS-injected inline-styled buttons. EXCLUDED (kept as their original flat menu tabs): .tab-btn main navigation menu bar .rsnav-btn results / league sub-navigation bar .pos-filter-btn scout position-filter bar .seg-btn segmented controls .ftab filter-tabs bar .pm-tab player-modal tabs bar The top bar (header-nav: .mode-toggle-btn, .auth-btn) is intentionally NOT excluded, so it keeps the glass treatment. ===================================================================== */ /* Material — applied to all buttons except the excluded menu-bar tabs */ button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab), .btn, .mc-btn, [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn), [class*="btn-"] { position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.20) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.40), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.18), inset 0 0 18px 0 rgba(255, 255, 255, 0.06), 0 6px 22px rgba(0, 0, 0, 0.22) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); background-clip: padding-box !important; transition: background-color 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, transform 0.12s ease; } /* Glossy "liquid" sheen across the top half of the glass. */ button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab)::after, .mc-btn::after, [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn)::after, [class*="btn-"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0) 60%); mix-blend-mode: screen; opacity: 0.7; z-index: 0; } /* Keep real content above the sheen */ button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab) > *, .mc-btn > *, [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn) > *, [class*="btn-"] > * { position: relative; z-index: 1; } /* Hover — the glass brightens and lifts, like wet glass catching light */ button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):hover, .btn:hover, .mc-btn:hover, [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):hover, [class*="btn-"]:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.09) 100%) !important; border-color: rgba(255, 255, 255, 0.32) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.18), 0 10px 30px rgba(0, 0, 0, 0.30) !important; transform: translateY(-1px); } /* Pressed — the glass compresses, highlight dims */ button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):active, .btn:active, .mc-btn:active, [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):active, [class*="btn-"]:active { transform: translateY(0) scale(0.985); box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 3px 12px rgba(0, 0, 0, 0.22) !important; } /* Selected / active state — tint the glass with the FPL green accent */ button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab).active, .btn.active, [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn).active, [class*="btn-"].active, button.logged-in, .mc-btn-primary { background: linear-gradient(135deg, rgba(0, 255, 135, 0.26) 0%, rgba(0, 255, 135, 0.10) 100%) !important; border-color: rgba(0, 255, 135, 0.45) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.15), 0 6px 24px rgba(0, 255, 135, 0.20) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } button.active:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):hover, [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn).active:hover, .mc-btn-primary:hover { background: linear-gradient(135deg, rgba(0, 255, 135, 0.34) 0%, rgba(0, 255, 135, 0.16) 100%) !important; border-color: rgba(0, 255, 135, 0.6) !important; } /* Keep SVG icons legible on the glass */ button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab) svg, [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn) svg, [class*="btn-"] svg { stroke: currentColor; } /* Disabled — frostier and faded */ button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):disabled, .btn:disabled, [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):disabled, [class*="btn-"]:disabled { opacity: 0.45 !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15) !important; transform: none !important; cursor: not-allowed !important; } /* Accessible focus ring on top of the glass */ button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):focus-visible, .btn:focus-visible, .mc-btn:focus-visible, [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):focus-visible, [class*="btn-"]:focus-visible { outline: 2px solid var(--pl-green, #00ff87); outline-offset: 2px; } /* ─── Light mode — clear/white frosted glass with dark text ─────────── */ :root.light-mode button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab), :root.light-mode .btn, :root.light-mode .mc-btn, :root.light-mode [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn), :root.light-mode [class*="btn-"] { background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.42) 100%) !important; border: 1px solid rgba(26, 8, 32, 0.10) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.10) !important; color: var(--text-primary, #0d0a14) !important; -webkit-text-fill-color: var(--text-primary, #0d0a14); text-shadow: none; } :root.light-mode button.active:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab), :root.light-mode [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn).active, :root.light-mode .mc-btn-primary { background: linear-gradient(135deg, rgba(0, 184, 94, 0.26) 0%, rgba(0, 184, 94, 0.10) 100%) !important; border-color: rgba(0, 184, 94, 0.45) !important; color: var(--text-primary, #0d0a14) !important; -webkit-text-fill-color: var(--text-primary, #0d0a14); } :root.light-mode button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab)::after, :root.light-mode [class*="-btn"]:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn)::after, :root.light-mode [class*="btn-"]::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 65%); mix-blend-mode: normal; } /* Respect users who reduce motion / transparency */ @media (prefers-reduced-motion: reduce) { button, .btn, .mc-btn, [class*="-btn"], [class*="btn-"] { transition: none; } button:hover, [class*="-btn"]:hover, [class*="btn-"]:hover, .mc-btn:hover { transform: none; } } /* ─── Custom Google sign-in button — keep its own branding (no glass) ───── It is a