/* HEAVEN GAME 0.5.8.0 - Reactive Button Effects Hotfix Fixes flat full-cyan hover fills and detached glow bars. */ @property --hg-hover-strength { syntax: ''; inherits: false; initial-value: 0; } @property --hg-focus-strength { syntax: ''; inherits: false; initial-value: 0; } .hg-reactive-button { --hg-mx: 50%; --hg-my: 50%; --hg-hover-strength: 0; --hg-focus-strength: 0; --hg-base-top: rgba(15, 31, 43, .96); --hg-base-bottom: rgba(8, 18, 28, .98); --hg-edge: rgba(126, 210, 238, .38); --hg-edge-hot: rgba(108, 232, 255, .92); --hg-cyan-soft: rgba(65, 211, 247, .28); --hg-cyan-mid: rgba(73, 223, 255, .48); --hg-cyan-hot: rgba(150, 246, 255, .82); position: relative !important; isolation: isolate !important; overflow: hidden !important; background: linear-gradient(180deg, var(--hg-base-top), var(--hg-base-bottom)) !important; border: 1px solid var(--hg-edge) !important; color: rgba(236, 248, 252, .96) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.16) !important; text-shadow: 0 1px 1px rgba(0,0,0,.55) !important; transition: --hg-hover-strength 185ms cubic-bezier(.2,.75,.2,1), --hg-focus-strength 165ms ease, border-color 185ms ease, box-shadow 185ms ease, color 185ms ease, filter 185ms ease, transform 90ms ease !important; } /* The bright layer lives INSIDE the control, so it can no longer become a detached cyan bar on the side of the menu. */ .hg-reactive-button::before { content: '' !important; display: block !important; pointer-events: none !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; transform: none !important; border-radius: inherit !important; opacity: 1 !important; z-index: 0 !important; background: radial-gradient( circle 115px at var(--hg-mx) var(--hg-my), rgba(178, 250, 255, calc(.48 * var(--hg-hover-strength))) 0%, rgba(72, 226, 255, calc(.42 * var(--hg-hover-strength))) 25%, rgba(25, 165, 213, calc(.20 * var(--hg-hover-strength))) 54%, rgba(16, 92, 128, 0) 78% ), linear-gradient( 90deg, rgba(24, 126, 165, calc(.08 * var(--hg-hover-strength))) 0%, rgba(76, 221, 255, calc(.22 * var(--hg-hover-strength))) 48%, rgba(24, 126, 165, calc(.06 * var(--hg-hover-strength))) 100% ) !important; box-shadow: inset 0 0 16px rgba(67, 219, 255, calc(.16 * var(--hg-hover-strength))), inset 0 1px 0 rgba(198, 252, 255, calc(.26 * var(--hg-hover-strength))) !important; transition: none !important; } /* A restrained trace replaces any previous pseudo-element geometry. */ .hg-reactive-button::after { content: '' !important; display: block !important; pointer-events: none !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; border-radius: inherit !important; border: 1px solid rgba(140, 239, 255, calc(.38 * var(--hg-hover-strength) + .22 * var(--hg-focus-strength))) !important; background: linear-gradient( 105deg, transparent 0 37%, rgba(206, 253, 255, calc(.21 * var(--hg-hover-strength))) 47%, rgba(90, 231, 255, calc(.12 * var(--hg-hover-strength))) 53%, transparent 64% 100% ) !important; opacity: 1 !important; transform: translateX(calc((var(--hg-hover-strength) - 1) * -18%)) !important; z-index: 1 !important; transition: none !important; } .hg-reactive-button > * { position: relative; z-index: 2; } .hg-reactive-button:hover, .hg-reactive-button.hg-pointer-over { --hg-hover-strength: 1; border-color: var(--hg-edge-hot) !important; color: #f6fdff !important; box-shadow: inset 0 1px 0 rgba(218, 253, 255, .13), inset 0 -1px 0 rgba(0,0,0,.28), 0 0 13px rgba(40, 203, 245, .20), 0 0 2px rgba(130, 239, 255, .58) !important; } .hg-reactive-button:focus-visible, .hg-reactive-button.hg-keyboard-focus { --hg-focus-strength: 1; border-color: rgba(154, 242, 255, .95) !important; outline: none !important; box-shadow: inset 0 0 15px rgba(65, 213, 250, .12), 0 0 0 1px rgba(180, 247, 255, .72), 0 0 14px rgba(67, 218, 250, .27) !important; } /* Selected/active stays illuminated, but never becomes a flat cyan slab. */ .hg-reactive-button:is(.selected,.active,.is-selected,.is-active,[aria-selected='true'],[aria-current='page'],[data-selected='true']) { --hg-focus-strength: .72; background: linear-gradient(90deg, rgba(19, 70, 91, .76), rgba(11, 33, 47, .98) 44%, rgba(7, 18, 28, .98)) !important; border-color: rgba(113, 225, 250, .70) !important; box-shadow: inset 3px 0 0 rgba(103, 230, 255, .82), inset 0 0 16px rgba(32, 172, 211, .10), 0 0 9px rgba(37, 183, 224, .10) !important; } .hg-reactive-button:active, .hg-reactive-button.hg-pressed { transform: translateY(1px) scale(.997) !important; filter: brightness(.93) !important; box-shadow: inset 0 2px 7px rgba(0,0,0,.32), 0 0 7px rgba(66, 211, 246, .12) !important; } .hg-reactive-button:disabled, .hg-reactive-button[aria-disabled='true'], .hg-reactive-button.disabled { --hg-hover-strength: 0 !important; filter: saturate(.30) brightness(.72) !important; opacity: .62 !important; cursor: default !important; } /* Main/root menu entries are slightly more transparent so the planet remains visible. */ .hg-reactive-button.hg-root-menu-button { --hg-base-top: rgba(11, 26, 37, .79); --hg-base-bottom: rgba(5, 14, 22, .86); min-height: 38px; } /* Prevent legacy full-cyan hover declarations from winning through descendants. */ .hg-reactive-button:hover, .hg-reactive-button:focus, .hg-reactive-button:focus-visible { background-color: transparent !important; } @media (prefers-reduced-motion: reduce) { .hg-reactive-button { transition: border-color 80ms linear, box-shadow 80ms linear, color 80ms linear !important; } }