/* Retro Love Profile GLASS LIVE v1.3.0 * Only decorative CSS. No DOM clone, no API hooks, no user settings overwritten. * Theme source: html[data-rl-profile-theme] (30 existing profile themes) * Optional Gem source: html[data-premium-gem-theme] + existing --premium-gem-a/b. * All rules scoped to the current profile and its settings dialog. */ :root { --rlpg-a: #ff58b3; --rlpg-b: #80e8ff; --rlpg-speed: 9s; } html[data-rl-profile-theme="aqua-glow"] { --rlpg-a:#27e5fc; --rlpg-b:#3e8dff; } html[data-rl-profile-theme="neon-love"] { --rlpg-a:#ff4fa7; --rlpg-b:#ad6eff; } html[data-rl-profile-theme="golden-night"] { --rlpg-a:#f9c96a; --rlpg-b:#f7a24a; } html[data-rl-profile-theme="ice-glass"] { --rlpg-a:#8defff; --rlpg-b:#63baff; } html[data-rl-profile-theme="sunset-flame"] { --rlpg-a:#ff8053; --rlpg-b:#ff56a4; } html[data-rl-profile-theme="galaxy"] { --rlpg-a:#a88aff; --rlpg-b:#5de9f9; } html[data-rl-profile-theme="aurora"] { --rlpg-a:#40edc1; --rlpg-b:#8e8eff; } html[data-rl-profile-theme="ruby-heart"] { --rlpg-a:#ff416b; --rlpg-b:#ff8cbd; } html[data-rl-profile-theme="emerald-crown"] { --rlpg-a:#4cf5a5; --rlpg-b:#38dace; } html[data-rl-profile-theme="sakura-dream"] { --rlpg-a:#ff99c7; --rlpg-b:#f36da6; } html[data-rl-profile-theme="cosmic-purple"] { --rlpg-a:#b88bff; --rlpg-b:#687cff; } html[data-rl-profile-theme="ocean-breeze"] { --rlpg-a:#3de3f4; --rlpg-b:#438bfc; } html[data-rl-profile-theme="royal-velvet"] { --rlpg-a:#b390fc; --rlpg-b:#e4bf85; } html[data-rl-profile-theme="fire-ice"] { --rlpg-a:#ff6575; --rlpg-b:#61ddff; } html[data-rl-profile-theme="matrix-noir"] { --rlpg-a:#7ef3a1; --rlpg-b:#93ced0; } html[data-rl-profile-theme="retro-neon"] { --rlpg-a:#ff58b3; --rlpg-b:#80e8ff; } html[data-rl-profile-theme="cosmic-dream"] { --rlpg-a:#a68aff; --rlpg-b:#ff79df; } html[data-rl-profile-theme="liquid-glass"] { --rlpg-a:#8bdaff; --rlpg-b:#dee9fc; } html[data-rl-profile-theme="ruby-night"] { --rlpg-a:#ff607c; --rlpg-b:#b984e9; } html[data-rl-profile-theme="emerald-pulse"] { --rlpg-a:#46eeb4; --rlpg-b:#70d3c0; } html[data-rl-profile-theme="ocean-glow"] { --rlpg-a:#30cdf1; --rlpg-b:#6c9dfb; } html[data-rl-profile-theme="sunset-peach"] { --rlpg-a:#ffa87d; --rlpg-b:#f083b9; } html[data-rl-profile-theme="golden-luxe"] { --rlpg-a:#f7d57c; --rlpg-b:#f4b869; } html[data-rl-profile-theme="arctic-frost"] { --rlpg-a:#abf1ff; --rlpg-b:#90b0ff; } html[data-rl-profile-theme="cyber-lime"] { --rlpg-a:#c1ff57; --rlpg-b:#6deeba; } html[data-rl-profile-theme="velvet-rose"] { --rlpg-a:#f48fc9; --rlpg-b:#b685fa; } html[data-rl-profile-theme="purple-smoke"] { --rlpg-a:#b49ef1; --rlpg-b:#97b2ed; } html[data-rl-profile-theme="midnight-chrome"] { --rlpg-a:#becde0; --rlpg-b:#91a4c0; } html[data-rl-profile-theme="tropical-mirage"] { --rlpg-a:#54eddb; --rlpg-b:#f7a0c7; } html[data-rl-profile-theme="mono-crystal"] { --rlpg-a:#e2e9f4; --rlpg-b:#a9bbc8; } /* Gem overrides base profile accents only when an actual Gem theme is selected. */ html[data-premium-gem-theme] { --rlpg-a: var(--premium-gem-a, #ff58b3); --rlpg-b: var(--premium-gem-b, #80e8ff); --rlpg-speed: var(--premium-gem-speed, 9s); } /* Base container: no new panel, no global body overrides, no second background. */ .profilePage[data-rl-profile-controls="1"] { --rlpg-ink: #f8fbff; --rlpg-ice: rgba(239,248,255,.9); --rlpg-stroke: color-mix(in srgb,var(--rlpg-a) 53%,rgba(255,255,255,.55)); --rlpg-secondary-stroke: color-mix(in srgb,var(--rlpg-b) 49%,rgba(255,255,255,.4)); --rlpg-tint: color-mix(in srgb,var(--rlpg-a) 23%,transparent); --rlpg-soft: color-mix(in srgb,var(--rlpg-b) 15%,transparent); } .profilePage[data-rl-profile-controls="1"] .profilePanel { border-color: color-mix(in srgb,var(--rlpg-a) 32%,rgba(255,255,255,.23)); background: linear-gradient(145deg,rgba(35,28,59,.74),rgba(14,18,41,.91) 64%),rgba(10,8,28,.88); box-shadow: 0 30px 65px rgba(0,0,0,.44), 0 0 38px color-mix(in srgb,var(--rlpg-a) 11%,transparent); } .profilePage[data-rl-profile-controls="1"] .rl-profile-glass-card { border-color: var(--rlpg-stroke); box-shadow: 0 22px 46px rgba(0,0,0,.34),0 0 30px color-mix(in srgb,var(--rlpg-a) 19%,transparent),inset 0 1px rgba(255,255,255,.31); } /* Existing profile navigation + original functional action controls. Never style inputs, checkbox/radio toggles, danger-zone deletion, or submit handler wrappers. */ .profilePage[data-rl-profile-controls="1"] :is( .rl-profile-quicknav__button, .profileBackButton, .profileSettingsButton, .saveProfileButton, .rl-v316-direct__save, .choiceButton, .profileBottleButton, .rl-profile-glass-card__edit, .rl-v316-more-card, .rl-profile-photo-toolbar button, .rl-profile-photo-item-actions button, .rl-profile-status-actions button, .rl-profile-status-actions a, .rl-v317-theme-actions button, .rl-v317-theme-card ), body.retroProfileSettingsPage > .profileSettingsBackdrop :is( .profileSettingsBack,.profileSettingsClose,.profileSettingsTile, .profileSettingsPrimary,.profileSettingsSecondary,.profileSettingsStudioLink ) { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; border: 1px solid var(--rlpg-stroke); color: var(--rlpg-ink); border-radius: 20px; background: radial-gradient(120px 34px at 82% -8%,rgba(255,255,255,.25),transparent 90%), linear-gradient(164deg,rgba(255,255,255,.20),rgba(255,255,255,.035) 33%,rgba(255,255,255,.045) 74%,rgba(255,255,255,.14)), linear-gradient(114deg,var(--rlpg-tint),rgba(18,25,53,.78) 44%,var(--rlpg-soft)); box-shadow: inset 0 1px 0 rgba(255,255,255,.57),inset 0 -1px 0 rgba(255,255,255,.13), 0 7px 20px rgba(0,0,0,.27),0 0 16px color-mix(in srgb,var(--rlpg-a) 22%,transparent); -webkit-backdrop-filter: blur(6px) saturate(1.15); backdrop-filter: blur(6px) saturate(1.15); transition: border-color .22s ease,box-shadow .24s ease, background-color .24s ease; } /* Glass glint is a single compositor-friendly transform, decorative only. */ .profilePage[data-rl-profile-controls="1"] :is( .rl-profile-quicknav__button,.profileBackButton,.profileSettingsButton, .saveProfileButton,.rl-v316-direct__save,.choiceButton,.profileBottleButton, .rl-profile-glass-card__edit,.rl-v316-more-card, .rl-profile-photo-toolbar button,.rl-profile-photo-item-actions button, .rl-profile-status-actions button,.rl-profile-status-actions a, .rl-v317-theme-actions button,.rl-v317-theme-card )::after, body.retroProfileSettingsPage > .profileSettingsBackdrop :is( .profileSettingsBack,.profileSettingsClose,.profileSettingsTile, .profileSettingsPrimary,.profileSettingsSecondary,.profileSettingsStudioLink )::after { content: ""; position: absolute; pointer-events: none; inset: -42% auto -42% -95%; width: 66%; z-index: 3; opacity: .91; transform: translate3d(-160%,0,0) skewX(-24deg); background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 16%, rgba(255,255,255,.19) 38%, rgba(255,255,255,.68) 53%, rgba(255,255,255,.19) 65%, transparent 90%); animation: rlpg-glass-sweep var(--rlpg-speed) ease-in-out infinite; will-change: transform; } @keyframes rlpg-glass-sweep { 0%, 17%, 100% { transform:translate3d(-170%,0,0) skewX(-24deg); } 47%, 65% { transform:translate3d(430%,0,0) skewX(-24deg); } } /* Stagger sweeps instead of lighting every pill at the same millisecond. */ .profilePage[data-rl-profile-controls="1"] .rl-profile-quicknav__button:nth-child(3n+2)::after { animation-delay:-3.2s; } .profilePage[data-rl-profile-controls="1"] .rl-profile-quicknav__button:nth-child(3n+3)::after { animation-delay:-6.1s; } .profilePage[data-rl-profile-controls="1"] .rl-profile-quicknav__button:nth-child(4n)::after { animation-duration:11.4s; } /* Selected/focused buttons remain obvious and accessible. */ .profilePage[data-rl-profile-controls="1"] :is(.rl-profile-quicknav__button[data-active="1"],.choiceButton.selected,[aria-pressed="true"].choiceButton) { border-color: color-mix(in srgb,var(--rlpg-b) 66%,white); box-shadow: inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px color-mix(in srgb,var(--rlpg-b) 38%,transparent), 0 0 24px color-mix(in srgb,var(--rlpg-a) 32%,transparent),0 8px 20px rgba(0,0,0,.25); } .profilePage[data-rl-profile-controls="1"] :is(.rl-profile-quicknav__button,.profileBackButton,.profileSettingsButton,.saveProfileButton,.rl-v316-direct__save,.choiceButton,.profileBottleButton):focus-visible, body.retroProfileSettingsPage > .profileSettingsBackdrop button:focus-visible { outline: 3px solid color-mix(in srgb,var(--rlpg-b) 75%,white); outline-offset: 3px; } .profilePage[data-rl-profile-controls="1"] :is(button,a):disabled::after, .profilePage[data-rl-profile-controls="1"] :is(button,a)[aria-disabled="true"]::after, body.retroProfileSettingsPage > .profileSettingsBackdrop button:disabled::after { animation:none!important;opacity:0; } .profilePage[data-rl-profile-controls="1"] :is(.rl-profile-quicknav__button,.profileBackButton,.profileSettingsButton,.rl-v316-direct__save,.saveProfileButton) { text-shadow:0 1px 2px rgba(0,0,0,.45); } /* On touch devices the decorative glint is gentle and slow to preserve battery. */ @media (hover:none) and (pointer:coarse){ :root {--rlpg-speed:12s;} .profilePage[data-rl-profile-controls="1"] :is(.rl-profile-quicknav__button,.profileBackButton,.profileSettingsButton,.saveProfileButton,.rl-v316-direct__save)::after{opacity:.68;} } @media (prefers-reduced-motion:reduce), (prefers-reduced-transparency:reduce){ .profilePage[data-rl-profile-controls="1"] :is(button,a)::after, body.retroProfileSettingsPage > .profileSettingsBackdrop :is(button,a)::after { animation:none!important; opacity:0!important;will-change:auto; } .profilePage[data-rl-profile-controls="1"] .profilePanel {backdrop-filter:none;-webkit-backdrop-filter:none;} } @media print{.profilePage[data-rl-profile-controls="1"] :is(button,a)::after{display:none!important}} @media (forced-colors:active){ .profilePage[data-rl-profile-controls="1"] :is(.rl-profile-quicknav__button,.profileBackButton,.profileSettingsButton,.saveProfileButton,.rl-v316-direct__save,.choiceButton,.profileBottleButton), body.retroProfileSettingsPage > .profileSettingsBackdrop button { background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText!important;box-shadow:none!important;backdrop-filter:none!important; } .profilePage[data-rl-profile-controls="1"] :is(button,a)::after {animation:none!important;display:none!important;} } /* v1.1 HIGH-VISIBILITY SHINE. Same existing buttons, no duplicate DOM and no new panels. The v1.0 animation was deliberately slow and faint on touch screens, and can be visually hidden by older ::after button decorations. The stronger selectors and explicit animation values below keep the animated layer visible above old art. */ :root { --rlpg-v11-cycle: 6.8s; } html body main.profilePage[data-rl-profile-controls="1"] :is( button.rl-profile-quicknav__button, a.profileBackButton, button.profileSettingsButton, button.saveProfileButton, button.rl-v316-direct__save, button.choiceButton, button.profileBottleButton, button.rl-profile-glass-card__edit, button.rl-v316-more-card, .rl-profile-photo-toolbar button, .rl-profile-photo-item-actions button, .rl-profile-status-actions button, .rl-profile-status-actions a ), html body.retroProfileSettingsPage > .profileSettingsBackdrop :is( .profileSettingsBack, .profileSettingsClose, .profileSettingsTile, .profileSettingsPrimary, .profileSettingsSecondary, .profileSettingsStudioLink ) { position:relative !important; overflow:hidden !important; isolation:isolate; border-color:color-mix(in srgb, var(--rlpg-a) 70%, white 30%) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.52), inset 0 -2px 0 color-mix(in srgb,var(--rlpg-b) 42%,transparent), 0 0 0 1px color-mix(in srgb,var(--rlpg-b) 44%,transparent), 0 0 18px color-mix(in srgb,var(--rlpg-a) 35%,transparent), 0 9px 20px rgba(0,0,0,.24) !important; background-image: linear-gradient(174deg,rgba(255,255,255,.26),rgba(255,255,255,.07) 27%,rgba(255,255,255,.025) 72%,rgba(255,255,255,.14)), linear-gradient(110deg,var(--rlpg-tint,rgba(255,99,170,.15)),rgba(17,22,48,.85) 55%,var(--rlpg-soft,rgba(65,208,240,.12))) !important; } /* Use a wide luminous stripe rather than a tiny static star. Translate is animated independently of skew and does not block button click events. */ html body main.profilePage[data-rl-profile-controls="1"] :is( button.rl-profile-quicknav__button, a.profileBackButton, button.profileSettingsButton, button.saveProfileButton, button.rl-v316-direct__save, button.choiceButton, button.profileBottleButton, button.rl-profile-glass-card__edit, button.rl-v316-more-card, .rl-profile-photo-toolbar button, .rl-profile-photo-item-actions button, .rl-profile-status-actions button, .rl-profile-status-actions a )::after, html body.retroProfileSettingsPage > .profileSettingsBackdrop :is( .profileSettingsBack, .profileSettingsClose, .profileSettingsTile, .profileSettingsPrimary, .profileSettingsSecondary, .profileSettingsStudioLink )::after { content:"" !important; display:block !important; position:absolute !important; top:-60% !important; bottom:-60% !important; left:-85% !important; right:auto !important; width:78% !important; height:auto !important; border:0 !important; border-radius:0 !important; pointer-events:none !important; visibility:visible !important; opacity:1 !important; z-index:11 !important; filter:none !important; transform:skewX(-21deg) !important; translate:-120% 0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.025) 14%, rgba(255,255,255,.18) 30%, rgba(255,255,255,.82) 46%, rgba(255,255,255,.99) 51%, rgba(255,255,255,.42) 57%, rgba(255,255,255,.04) 82%,transparent 100%) !important; box-shadow:0 0 21px rgba(255,255,255,.18) !important; animation:rlpg-v11-sweep var(--rlpg-v11-cycle) ease-in-out infinite !important; will-change:translate; } @keyframes rlpg-v11-sweep { 0%, 12% { translate:-120% 0; } 62%, 100% { translate:410% 0; } } /* Different pills shimmer at different moments instead of a wall of simultaneous flashes. */ html body main.profilePage[data-rl-profile-controls="1"] .rl-profile-quicknav__button:nth-child(4n+2)::after{animation-delay:-1.5s!important} html body main.profilePage[data-rl-profile-controls="1"] .rl-profile-quicknav__button:nth-child(4n+3)::after{animation-delay:-3.2s!important} html body main.profilePage[data-rl-profile-controls="1"] .rl-profile-quicknav__button:nth-child(4n+4)::after{animation-delay:-4.6s!important} /* This deliberate mobile override keeps the glint visible, not dimmed to .68 like v1.0. */ @media (hover:none) and (pointer:coarse){ :root{--rlpg-v11-cycle:7.4s} html body main.profilePage[data-rl-profile-controls="1"] .rl-profile-quicknav__button::after{opacity:1!important} } /* Respect reduced-motion and forced-colors instead of defeating accessibility settings. */ @media (prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce){ html body main.profilePage[data-rl-profile-controls="1"] :is(button,a)::after, html body.retroProfileSettingsPage > .profileSettingsBackdrop :is(button,a)::after { animation:none!important;translate:120% 0!important;opacity:0!important;will-change:auto!important; } } @media (forced-colors:active){ html body main.profilePage[data-rl-profile-controls="1"] :is(button,a)::after, html body.retroProfileSettingsPage > .profileSettingsBackdrop :is(button,a)::after {display:none!important;animation:none!important} } @media print { html body main.profilePage[data-rl-profile-controls="1"] :is(button,a)::after{display:none!important} } /* Accessibility-specific selectors deliberately match the specificity of the v1.1 high-visibility rule above, so motion preferences cannot be overridden. */ @media (prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce){ html body main.profilePage[data-rl-profile-controls="1"] :is( button.rl-profile-quicknav__button,a.profileBackButton,button.profileSettingsButton, button.saveProfileButton,button.rl-v316-direct__save,button.choiceButton, button.profileBottleButton,button.rl-profile-glass-card__edit,button.rl-v316-more-card, .rl-profile-photo-toolbar button,.rl-profile-photo-item-actions button, .rl-profile-status-actions button,.rl-profile-status-actions a )::after, html body.retroProfileSettingsPage > .profileSettingsBackdrop :is( .profileSettingsBack,.profileSettingsClose,.profileSettingsTile, .profileSettingsPrimary,.profileSettingsSecondary,.profileSettingsStudioLink )::after {animation:none!important;display:none!important;opacity:0!important;will-change:auto!important} } @media (forced-colors:active){ html body main.profilePage[data-rl-profile-controls="1"] :is( button.rl-profile-quicknav__button,a.profileBackButton,button.profileSettingsButton, button.saveProfileButton,button.rl-v316-direct__save,button.choiceButton, button.profileBottleButton,button.rl-profile-glass-card__edit,button.rl-v316-more-card )::after {display:none!important;animation:none!important} } /* ------------------------------------------------------------------------- Retro Love Profile Glass Shine v1.2.0 — PSF1 navigation fix. Verified source: public/retro-profile-sections-psf1/profile-sections-1.0.0.js creates BUTTON elements with class rl-profile-quicknav__button. v1.1 used only ::after as its moving highlight; old site decoration can mask/redefine this pseudo-element. The navigation therefore animates a reflected highlight INSIDE the button's own background-image layers. One real button per section, no new DOM, handlers or API changes. ------------------------------------------------------------------------- */ /* All section pills and Save/Back controls use one sweep painted under the existing text/icon content. No ::before/::after dependency. */ html body main.profilePage[data-rl-profile-controls="1"] :is( button.rl-profile-quicknav__button, a.profileBackButton, button.saveProfileButton, button.rl-v316-direct__save, button.profileBottleButton ) { --rlpg-v12-period: 6.2s; background-image: linear-gradient(112deg, transparent 0%, transparent 35%, rgba(255,255,255,.045) 39%, rgba(255,255,255,.16) 43%, rgba(255,255,255,.48) 47%, rgba(255,255,255,.91) 50%, rgba(255,255,255,.47) 53%, rgba(255,255,255,.14) 57%, transparent 65%, transparent 100%), linear-gradient(177deg, rgba(255,255,255,.30), rgba(255,255,255,.075) 30%, rgba(255,255,255,.025) 72%, rgba(255,255,255,.15)), linear-gradient(111deg, var(--rlpg-tint,rgba(255,88,179,.20)), rgba(19,25,54,.84) 50%, var(--rlpg-soft,rgba(128,232,255,.16))) !important; background-size: 300% 100%,100% 100%,100% 100% !important; background-repeat: no-repeat !important; background-position: 100% 0,50% 0,50% 0; animation: rlpg-v12-surface-sweep var(--rlpg-v12-period) cubic-bezier(.3,.12,.4,.9) infinite !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.51), inset 0 -2px 0 color-mix(in srgb,var(--rlpg-b) 38%,transparent), 0 0 0 1px color-mix(in srgb,var(--rlpg-a) 41%,transparent), 0 0 17px color-mix(in srgb,var(--rlpg-a) 29%,transparent), 0 9px 19px rgba(0,0,0,.25) !important; -webkit-tap-highlight-color: transparent; } /* Disable only obsolete v1.1 shimmer pseudo-element on the same controls. The PSF1 arrow is a real span, not ::after. */ html body main.profilePage[data-rl-profile-controls="1"] :is( button.rl-profile-quicknav__button, a.profileBackButton, button.saveProfileButton, button.rl-v316-direct__save, button.profileBottleButton )::after { content: none !important; display: none !important; animation: none !important; } @keyframes rlpg-v12-surface-sweep { 0%, 11% { background-position:100% 0,50% 0,50% 0; } 63%, 100% { background-position:0% 0,50% 0,50% 0; } } /* Deliberate phase offsets make the sheen visible on different rows instead of an invisible synchronized pause across the whole list. */ html body main.profilePage[data-rl-profile-controls="1"] nav.rl-profile-quicknav > button:nth-child(4n+2) { animation-delay:-1.3s !important; } html body main.profilePage[data-rl-profile-controls="1"] nav.rl-profile-quicknav > button:nth-child(4n+3) { animation-delay:-2.9s !important; } html body main.profilePage[data-rl-profile-controls="1"] nav.rl-profile-quicknav > button:nth-child(4n+4) { animation-delay:-4.6s !important; } /* Compact Android/mobile remains bright, but motion stays leisurely. */ @media (max-width:460px) and (pointer:coarse) { html body main.profilePage[data-rl-profile-controls="1"] :is( button.rl-profile-quicknav__button,a.profileBackButton, button.saveProfileButton,button.rl-v316-direct__save ) { --rlpg-v12-period:6.7s; } } /* Accessibility: no sweeping animation when OS asks for reduced motion. Retain a static glass reflection and borders so buttons remain premium. */ @media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) { html body main.profilePage[data-rl-profile-controls="1"] :is( button.rl-profile-quicknav__button,a.profileBackButton, button.saveProfileButton,button.rl-v316-direct__save, button.profileBottleButton ) { animation:none !important; background-position:40% 0,50% 0,50% 0; } } @media (forced-colors: active) { html body main.profilePage[data-rl-profile-controls="1"] :is( button.rl-profile-quicknav__button,a.profileBackButton, button.saveProfileButton,button.rl-v316-direct__save, button.profileBottleButton ) { animation:none !important; background:ButtonFace !important; color:ButtonText !important; border-color:ButtonText !important; box-shadow:none !important; } } @media print { html body main.profilePage[data-rl-profile-controls="1"] :is(button.rl-profile-quicknav__button,button.saveProfileButton) { animation:none !important; } } /* =========================================================================== Retro Love Profile Glass Capsules v1.3.0 - one original button, one visual lens. v1.2 backgrounds could animate yet be almost invisible on real phone screens. v1.3 paints a permanent three-dimensional glass capsule and animates a NEW, decoration-only span inside the existing interactive BUTTON/ANCHOR element. No React cloning, no handlers replaced, no second page, no wallet/API changes. =========================================================================== */ html body main.profilePage[data-rl-profile-controls="1"] :is( button.rl-profile-quicknav__button,button.saveProfileButton, button.rl-v316-direct__save,a.profileBackButton, button.profileSettingsButton,button.profileBottleButton ).rlpg13-capsule { position:relative!important; overflow:hidden!important; isolation:isolate!important; border-radius:999px!important; border:1.4px solid color-mix(in srgb,var(--rlpg-a,#ff58b3) 62%,white)!important; background-image: radial-gradient(140% 160% at 18% -65%,rgba(255,255,255,.44) 0%,rgba(255,255,255,.14) 42%,transparent 74%), linear-gradient(175deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.065) 28%,rgba(255,255,255,.015) 52%,rgba(255,255,255,.15) 94%), linear-gradient(112deg,color-mix(in srgb,var(--rlpg-a,#ff58b3) 32%,#1b254d) 0%,rgba(26,32,66,.84) 38%,color-mix(in srgb,var(--rlpg-b,#80e8ff) 20%,#171d3d) 100%)!important; background-size:100% 100%,100% 100%,100% 100%!important; background-position:center!important; background-repeat:no-repeat!important; animation:none!important; /* v1.2 moving background is replaced by independent lens */ box-shadow: inset 0 2px 0 rgba(255,255,255,.69), inset 0 5px 12px rgba(255,255,255,.085), inset 0 -3px 4px rgba(4,9,32,.40), inset 0 -1px 0 color-mix(in srgb,var(--rlpg-b,#80e8ff) 74%,white), 0 0 0 1px color-mix(in srgb,var(--rlpg-b,#80e8ff) 36%,transparent), 0 0 21px color-mix(in srgb,var(--rlpg-a,#ff58b3) 30%,transparent), 0 7px 22px rgba(0,0,0,.30)!important; -webkit-backdrop-filter:blur(8px) saturate(1.3); backdrop-filter:blur(8px) saturate(1.3); } html body main.profilePage[data-rl-profile-controls="1"] button.saveProfileButton.rlpg13-capsule, html body main.profilePage[data-rl-profile-controls="1"] button.rl-v316-direct__save.rlpg13-capsule { border-radius:24px!important; } /* The lens is decorative and is a child of the ORIGINAL button. */ html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-capsule > .rlpg13-lens { position:absolute!important; inset:0!important; display:block!important; overflow:hidden!important; border-radius:inherit!important; pointer-events:none!important; user-select:none!important; z-index:1!important; opacity:1!important; background: radial-gradient(ellipse 34% 45% at 91% 0%,rgba(255,255,255,.39),transparent 95%), linear-gradient(180deg,rgba(255,255,255,.22),transparent 30%,transparent 77%,rgba(255,255,255,.09)); box-shadow:inset 0 2px rgba(255,255,255,.38),inset 0 -2px color-mix(in srgb,var(--rlpg-b,#80e8ff) 54%,transparent)!important; } /* Put actual text/icons ABOVE the reflection without obstructing clicks. */ html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-capsule > :not(.rlpg13-lens) { position:relative; z-index:2; } /* Broad moving specular streak. Independent of legacy button pseudo-elements. */ html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-lens::before { content:""!important; position:absolute!important; top:-38%!important; left:-72%!important; width:72%!important; height:176%!important; display:block!important; pointer-events:none!important; opacity:.94!important; background:linear-gradient(90deg, transparent 0%,rgba(255,255,255,.015) 12%, rgba(255,255,255,.18) 32%,rgba(255,255,255,.67) 45%, rgba(255,255,255,.96) 51%,rgba(255,255,255,.46) 60%, rgba(255,255,255,.08) 81%,transparent 100%)!important; filter:none!important; transform:translate3d(0,0,0) skewX(-19deg); animation:rlpg13-crossing 6.3s cubic-bezier(.22,.07,.39,.96) infinite!important; animation-delay:var(--rlpg13-delay,0s)!important; will-change:transform; } @keyframes rlpg13-crossing { 0%,13% { transform:translate3d(0,0,0) skewX(-19deg); } 68%,100% { transform:translate3d(270%,0,0) skewX(-19deg); } } /* Small sparkle at the upper-right border, also present on still screenshots. */ html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-lens::after { content:""!important; position:absolute!important; width:8px;height:8px; right:16%;top:5%; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 0 7px 2px rgba(255,255,255,.8),0 0 14px 4px color-mix(in srgb,var(--rlpg-b,#80e8ff) 62%,transparent); opacity:.48; animation:rlpg13-star 5.5s ease-in-out infinite; animation-delay:var(--rlpg13-delay,0s); pointer-events:none; } @keyframes rlpg13-star { 0%,19%,100%{opacity:.16;transform:scale(.67)} 47%,54%{opacity:.84;transform:scale(1.25)} } /* Accessibility: visible 3D glass is retained even when motion is off. */ @media(prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce){ html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-lens::before, html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-lens::after { animation:none!important; will-change:auto!important; } html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-lens::before { transform:translate3d(120%,0,0) skewX(-19deg)!important; opacity:.37!important; } html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-capsule { -webkit-backdrop-filter:none;backdrop-filter:none; } } @media(forced-colors:active){ html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-capsule {background:ButtonFace!important;color:ButtonText!important;box-shadow:none!important;border:2px solid ButtonText!important} html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-lens{display:none!important} } @media print{html body main.profilePage[data-rl-profile-controls="1"] .rlpg13-lens{display:none!important}}