/* Neo3 Instant Experience 2.0.2 — Modal Stack Hotfix */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: neo3-view-old 110ms ease both; } ::view-transition-new(root) { animation: neo3-view-new 190ms cubic-bezier(.2,.75,.2,1) both; } @keyframes neo3-view-old { to { opacity: .72; transform: translateY(-2px); } } @keyframes neo3-view-new { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* A named view-transition on the page root creates a local stacking context. Bootstrap appends its backdrop to , so modals nested in the page can otherwise render underneath that backdrop. Keep the root transition only. */ #neo3-page-main { view-transition-name: none; } /* Modal layer contract for Neo3. The modal itself is moved to by JS. */ body.modal-open .modal.show { z-index: 1065; } body.modal-open .modal-backdrop { z-index: 1060; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } body.modal-open #neo3-page-main { transform: none !important; filter: none !important; } .neo3-card-enter { animation: neo3-card-enter 260ms cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(var(--neo3-enter-index, 0) * 18ms); } @keyframes neo3-card-enter { from { opacity: 0; transform: translateY(7px) scale(.997); } to { opacity: 1; transform: translateY(0) scale(1); } } .neo3-nav-skeleton-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; } .neo3-nav-skeleton-block { position: fixed; overflow: hidden; border: 1px solid rgba(255,255,255,.045); border-radius: 7px; background: #171717; box-shadow: 0 12px 30px rgba(0,0,0,.18); animation: neo3-skeleton-in 130ms ease both; } .neo3-nav-skeleton-block::after, .tracker-instant-skeleton-line::after, .tracker-instant-skeleton-chip::after, .tracker-instant-skeleton-avatar::after { content: ''; position: absolute; inset: 0; transform: translateX(-105%); background: linear-gradient(90deg, transparent, rgba(126,157,255,.11), transparent); animation: neo3-shimmer 950ms linear infinite; } .neo3-nav-skeleton-block::before { content: ''; position: absolute; inset: 14px; border-radius: 4px; opacity: .82; background: linear-gradient(rgba(255,255,255,.055), rgba(255,255,255,.055)) 0 0 / 38% 9px no-repeat, linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035)) 0 22px / 72% 7px no-repeat, linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)) 0 43px / 55% 7px no-repeat; } @keyframes neo3-skeleton-in { from { opacity: 0; } to { opacity: 1; } } @keyframes neo3-shimmer { to { transform: translateX(105%); } } .tracker-instant-skeleton { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; background: var(--bg-surface); } .tracker-instant-skeleton-head, .tracker-instant-skeleton-row { display: grid; grid-template-columns: minmax(170px, 1.3fr) .55fr minmax(170px, 1.1fr) .7fr .45fr .55fr; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.035); } .tracker-instant-skeleton-head { min-height: 58px; grid-template-columns: 1fr 92px; } .tracker-instant-skeleton-row:last-child { border-bottom: 0; } .tracker-instant-skeleton-player { display: flex; align-items: center; gap: 10px; } .tracker-instant-skeleton-avatar, .tracker-instant-skeleton-line, .tracker-instant-skeleton-chip { position: relative; overflow: hidden; background: rgba(255,255,255,.048); } .tracker-instant-skeleton-avatar { width: 32px; height: 32px; border-radius: 5px; flex: 0 0 auto; } .tracker-instant-skeleton-line { width: 100%; height: 8px; border-radius: 999px; } .tracker-instant-skeleton-line.short { width: 54%; } .tracker-instant-skeleton-line.tiny { width: 34%; } .tracker-instant-skeleton-chip { width: 58px; height: 24px; border-radius: 5px; } #trackerResultsMount.is-loading { min-height: 260px; } #trackerResultsMount .tracker-results-panel, #trackerResultsMount > .card { transform-origin: top center; } #trackerResultsMount.is-ready .tracker-results-panel, #trackerResultsMount.is-ready > .card { animation: tracker-result-enter 230ms cubic-bezier(.2,.75,.2,1) both; } @keyframes tracker-result-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 767.98px) { .tracker-instant-skeleton-head, .tracker-instant-skeleton-row { grid-template-columns: 1fr 66px; } .tracker-instant-skeleton-row > :nth-child(n+3) { display: none; } .neo3-nav-skeleton-block:nth-child(n+6) { display: none; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), .neo3-card-enter, .neo3-nav-skeleton-block, #trackerResultsMount.is-ready .tracker-results-panel, #trackerResultsMount.is-ready > .card { animation-duration: .01ms !important; animation-delay: 0ms !important; } .neo3-nav-skeleton-block::after, .tracker-instant-skeleton-line::after, .tracker-instant-skeleton-chip::after, .tracker-instant-skeleton-avatar::after { animation: none !important; } }