/* V5.0.435 — Piano/Menu 21-key distressed ivory surface and real front-lip key tips. */ .bhk-v5-playerRail__contentSlot--menu .bhk-v5-playerRail__pianoKey { isolation: isolate; border-color: rgba(44, 34, 22, .34); background: linear-gradient(90deg, rgba(64, 46, 26, .105) 0 1px, transparent 1px 12px), linear-gradient(180deg, rgba(98, 76, 44, .075) 0 1px, transparent 1px 9px), radial-gradient(circle at 84% 33%, rgba(255, 255, 255, .96) 0 10%, rgba(255, 255, 255, .28) 24%, transparent 42%), radial-gradient(circle at 70% 75%, rgba(122, 90, 46, .16), transparent 32%), linear-gradient(180deg, #fffbed 0%, #f5eed6 32%, #e7d9bb 72%, #cfb993 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -10px 18px rgba(82, 55, 28, .19), inset 10px 0 18px rgba(255, 255, 255, .16), inset -14px 0 18px rgba(87, 61, 32, .105), 0 1px 0 rgba(255, 255, 255, .11); } .bhk-v5-playerRail__contentSlot--menu .bhk-v5-playerRail__pianoKey::after { content: ""; position: absolute; z-index: 0; right: 8px; top: 50%; width: clamp(54px, 32%, 88px); height: min(23px, calc(100% - 9px)); transform: translateY(-50%); pointer-events: none; border-radius: 0 11px 11px 0 / 0 13px 13px 0; background: linear-gradient(90deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .56) 42%, rgba(236, 221, 184, .92) 100%), radial-gradient(circle at 88% 50%, rgba(255, 255, 255, .62), transparent 44%), linear-gradient(180deg, rgba(255, 250, 232, .95), rgba(219, 198, 158, .88)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), inset -4px 0 8px rgba(255, 255, 255, .28), inset 0 -6px 10px rgba(86, 58, 27, .18), -10px 0 16px rgba(255, 255, 255, .08), 0 1px 0 rgba(60, 42, 20, .16); } .bhk-v5-playerRail__contentSlot--menu .bhk-v5-playerRail__pianoKey.has-blackKey::before { z-index: 1; border-right: 1px solid rgba(255, 255, 255, .10); background: radial-gradient(circle at 75% 34%, rgba(255, 255, 255, .18), transparent 26%), linear-gradient(90deg, #050509 0%, #15141a 56%, #2b2932 100%); box-shadow: inset -8px 0 18px rgba(255, 255, 255, .075), inset 0 -8px 14px rgba(0, 0, 0, .42), 5px 0 12px rgba(0, 0, 0, .24); } .bhk-v5-playerRail__contentSlot--menu .bhk-v5-playerRail__keyOrder, .bhk-v5-playerRail__contentSlot--menu .bhk-v5-playerRail__keyCopy { z-index: 3; } .bhk-v5-playerRail__contentSlot--menu .bhk-v5-playerRail__pianoKey strong { color: #08070a; text-shadow: 0 1px 0 rgba(255, 255, 255, .60), 0 0 1px rgba(255, 255, 255, .50); } .bhk-v5-playerRail__contentSlot--menu .bhk-v5-playerRail__pianoKey em { color: rgba(19, 13, 9, .68); } .bhk-v5-playerRail__contentSlot--menu .bhk-v5-playerRail__pianoKey.is-current { border-color: rgba(255, 47, 213, .62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -10px 18px rgba(82, 55, 28, .19), 0 0 0 1px rgba(255, 47, 213, .34), 0 0 20px rgba(255, 47, 213, .15); } /* BHK-V5-PIANO-IVORY-TIPS-435: distressed ivory skin and front-lip key tips loaded. */ /* BHK-V5-PIANO-MENU-VISIBILITY-435A: distressed ivory key tips preserved after visibility recovery. */ /* V5.0.437 — distressed ivory material recovery and authentic front-tip pass. The ivory key is the object; the black key is a raised overlay. */ .bhk-v5-playerRail[data-bhk-v5-rail-current="menu"] .bhk-v5-playerRail__pianoKey, html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey { background: linear-gradient(90deg, rgba(93,67,34,.10) 0 1px, transparent 1px 11px), linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,0) 19%, rgba(98,67,31,.08) 100%), radial-gradient(circle at 88% 36%, rgba(255,255,255,.66) 0 10%, rgba(255,255,255,.20) 25%, transparent 42%), radial-gradient(circle at 63% 76%, rgba(126,89,43,.13), transparent 31%), linear-gradient(180deg, #fffdf0 0%, #f7efd5 35%, #e9dab9 76%, #cdb58d 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 -10px 19px rgba(77,52,25,.18), inset 15px 0 24px rgba(255,255,255,.13), inset -18px 0 26px rgba(83,57,29,.10), 0 1px 0 rgba(255,255,255,.08) !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="menu"] .bhk-v5-playerRail__pianoKey .bhk-v5-playerRail__keyCopy, html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey .bhk-v5-playerRail__keyCopy { position: relative !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="menu"] .bhk-v5-playerRail__pianoKey .bhk-v5-playerRail__keyCopy::before, html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey .bhk-v5-playerRail__keyCopy::before { content: ""; position: absolute; z-index: -1; right: 0; top: 50%; width: min(92px, 96%); height: min(25px, calc(100% - 9px)); transform: translateY(-50%); pointer-events: none; border-radius: 0 12px 12px 0 / 0 14px 14px 0; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.67) 42%, rgba(235,218,180,.98) 100%), radial-gradient(circle at 86% 50%, rgba(255,255,255,.78), transparent 42%), linear-gradient(180deg, rgba(255,253,238,.98), rgba(219,197,156,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset -4px 0 9px rgba(255,255,255,.32), inset 0 -7px 11px rgba(80,54,24,.18), -11px 0 17px rgba(255,255,255,.08), 0 1px 0 rgba(54,36,16,.16); } .bhk-v5-playerRail[data-bhk-v5-rail-current="menu"] .bhk-v5-playerRail__pianoKey .bhk-v5-playerRail__keyCopy::after, html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey .bhk-v5-playerRail__keyCopy::after { content: ""; position: absolute; z-index: -1; right: 6px; bottom: calc(50% - 15px); width: min(78px, 82%); height: 3px; pointer-events: none; background: linear-gradient(90deg, rgba(101,67,28,.08), rgba(85,55,23,.26), rgba(255,255,255,.18)); box-shadow: 0 1px 0 rgba(255,255,255,.22); } .bhk-v5-playerRail[data-bhk-v5-rail-current="menu"] .bhk-v5-playerRail__pianoKey.is-current, html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey.is-current { box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 -10px 19px rgba(77,52,25,.16), 0 0 0 1px rgba(255,47,213,.38), 0 0 22px rgba(255,47,213,.14) !important; } /* BHK-V5-PIANO-IVORY-DISTRESSED-437: aged ivory face, scuffed grain, and piano front-tip/lip restored. */