/* ========================================================= RANKINGS — Premium design (external CSS) - No Razor @media issues ========================================================= */ /* ========================================================= FULL-PAGE BACKGROUND (Ranking page only) - Uses a single full-screen image (cover) - Dark overlay baked into the background-image stack - Feel free to swap the image path below ========================================================= */ body.page-rankings { background: #000; min-height: 100vh; } body.page-rankings main[role="main"] { position: relative; isolation: isolate; min-height: 100vh; background: #000; } /* Bootstrap appends the modal backdrop directly under . If the rankings page keeps main as an isolated stacking context while a modal is open, the backdrop can sit above the entire page and trap all clicks. Drop the isolation only during modal lifetime and keep the modal above its backdrop. */ body.page-rankings.modal-open main[role="main"] { isolation: auto; } body.page-rankings .modal-backdrop { z-index: 1990 !important; } body.page-rankings .rk2-modal { z-index: 2000 !important; } body.page-rankings .rk2-modal .modal-dialog { position: relative; z-index: 1; } body.page-rankings footer.site-footer { position: relative; z-index: 2; } /* ✅ Full-page background for Rankings (won't be overridden easily) */ .rk2-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url('/img/pages/battlegrounds.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; } .rk2-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--aa-page-overlay-top, rgba(7, 10, 18, .50)), var(--aa-page-overlay-mid, rgba(7, 10, 18, .62)) 45%, var(--aa-page-overlay-bottom, rgba(7, 10, 18, .80))); backdrop-filter: blur(var(--aa-page-backdrop-blur, 2px)); -webkit-backdrop-filter: blur(var(--aa-page-backdrop-blur, 2px)); } .rk2-wrap { position: relative; z-index: 1; padding-top: 140px; padding-bottom: 52px; } body.page-rankings footer.site-footer { background: linear-gradient(180deg, rgba(8, 7, 13, 0.42), rgba(8, 7, 13, 0.92)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .rk2-hero { border-radius: 22px; border: 1px solid rgba(255,255,255,.10); background: radial-gradient(900px 520px at 20% 10%, rgba(115,103,240,.18), transparent 62%), radial-gradient(900px 520px at 80% 10%, rgba(0,255,255,.08), transparent 62%), linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.68)); box-shadow: 0 18px 48px rgba(0,0,0,.40); overflow: hidden; } .rk2-hero__inner { padding: 18px 18px 14px; } .rk2-title { margin: 0; color: rgba(255,255,255,.96); font-weight: 900; letter-spacing: .6px; text-transform: uppercase; text-shadow: 0 14px 28px rgba(0,0,0,.55); font-size: clamp(22px, 2.6vw, 34px); } .rk2-sub { margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.5; } .rk2-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; } .rk2-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); font-size: 12px; white-space: nowrap; } /* clickable chips (Rewards button) */ .rk2-chip.rk2-chip--btn, button.rk2-chip.rk2-chip--btn { cursor: pointer; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); transition: transform .12s ease, background .12s ease, border-color .12s ease; } .rk2-chip.rk2-chip--btn:hover, button.rk2-chip.rk2-chip--btn:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); transform: translateY(-1px); } .rk2-chip.rk2-chip--btn:active, button.rk2-chip.rk2-chip--btn:active { transform: translateY(0); } /* Rewards modal (shared by Battlegrounds + Class PvP) */ .rk2-rewards-modal .modal-dialog { max-width: 920px; } .rk2-rewards-modal .modal-content { background: rgba(10, 16, 26, .94); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; color: rgba(255,255,255,.90); box-shadow: 0 18px 60px rgba(0,0,0,.45); overflow: hidden; } .rk2-rewards-modal .modal-header { border-bottom: 1px solid rgba(255,255,255,.10); padding: 16px 18px; } .rk2-rewards-modal .modal-title { font-weight: 900; letter-spacing: .3px; } .rk2-rewards-modal .btn-close { filter: invert(1) grayscale(1); opacity: .85; } .rk2-rewards-modal .modal-body { padding: 18px; } .rk2-rewards-modal .rk2-reward-kicker { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 8px; } .rk2-rewards-modal .rk2-reward-note { color: rgba(255,255,255,.72); font-size: 13px; margin: 0 0 14px 0; } .rk2-reward-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 900px) { .rk2-reward-grid { grid-template-columns: 1fr; } } .rk2-reward-item { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); } .rk2-reward-item:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); } .rk2-reward-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); padding: 5px; object-fit: contain; flex: 0 0 auto; } .rk2-reward-text { min-width: 0; flex: 1 1 auto; } .rk2-reward-name { font-weight: 900; font-size: 13px; line-height: 1.2; color: rgba(255,255,255,.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rk2-reward-sub { margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.58); } .rk2-reward-qty { font-weight: 900; font-size: 14px; color: rgba(255,255,255,.88); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); flex: 0 0 auto; } .rk2-bubble-wrap { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); margin-top: 12px; } .rk2-bubble-img { width: 320px; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 8px 30px rgba(0,0,0,.35); } .rk2-bubble-text { flex: 1 1 auto; min-width: 0; } .rk2-bubble-text .rk2-reward-name { font-size: 14px; } .rk2-chip strong { font-weight: 900; } /* Arena tabs */ .rk2-tabs { display: flex; gap: 8px; /* a bit more breathing like rk2-hero__inner */ padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.10); background: rgba(5, 11, 22, .54); overflow-x: auto; scrollbar-width: none; } .rk2-tabs::-webkit-scrollbar { width: 0; height: 0; } .rk2-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(12, 18, 32, .78); color: rgba(255,255,255,.86); text-decoration: none; font-size: 13px; white-space: nowrap; transition: transform .08s ease, background .08s ease, border-color .08s ease; } /* ✅ Center selectors on desktop (Battlegrounds + Class PvP) */ @media (min-width: 992px) { .rk2-tabs { justify-content: center; flex-wrap: wrap; overflow-x: visible; } } .rk2-tab:hover { transform: translateY(-1px); background: rgba(20, 28, 46, .92); border-color: rgba(255,255,255,.22); } .rk2-tab.is-active { background: linear-gradient(180deg, rgba(74, 118, 204, .88), rgba(48, 82, 154, .92)); border-color: rgba(132,166,236,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.24); } /* Podium */ .rk2-podium { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 16px; border-top: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); } @media (min-width: 992px) { .rk2-podium { grid-template-columns: repeat(3, 1fr); } } .rk2-pod { border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); box-shadow: 0 18px 44px rgba(0,0,0,.25); overflow: hidden; position: relative; } .rk2-pod::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 30% 10%, rgba(255,214,120,.14), transparent 62%); pointer-events: none; } .rk2-pod__head { padding: 12px 12px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; position: relative; z-index: 2; } .rk2-rank { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); color: rgba(255,255,255,.92); font-weight: 900; } .rk2-class { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.86); font-size: 13px; font-weight: 800; } .rk2-class img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); } .rk2-pod__body { padding: 0 12px 12px; position: relative; z-index: 2; } .rk2-name { font-size: 18px; font-weight: 900; color: rgba(255,255,255,.95); margin: 0; } .rk2-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .rk2-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); color: rgba(255,255,255,.82); font-size: 12px; white-space: nowrap; } .rk2-pill strong { font-weight: 900; } /* ✅ NEW: Top3 badges */ .rk2-medal { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; box-shadow: none; line-height: 0; } .rk2-medal__img { display: block; width: auto; height: 50px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28)); } .rk2-medal--gold .rk2-medal__img, .rk2-medal--silver .rk2-medal__img, .rk2-medal--bronze .rk2-medal__img { image-rendering: auto; } /* Table wrapper */ .rk2-table-wrap { margin-top: 20px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.28); box-shadow: 0 18px 44px rgba(0,0,0,.25); overflow: hidden; } .rk2-table-head { padding: 14px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.20)); border-bottom: 1px solid rgba(255,255,255,.10); } .rk2-table-head h5 { margin: 0; color: rgba(255,255,255,.92); font-weight: 900; letter-spacing: .2px; } .rk2-table-sub { color: rgba(255,255,255,.65); font-size: 12.5px; } .rk2-table { width: 100%; min-width: 900px; } .rk2-table th, .rk2-table td { padding: 10px 12px; vertical-align: middle; } .rk2-table thead th { position: sticky; top: 0; z-index: 2; background: rgba(0,0,0,.60); backdrop-filter: blur(6px); color: rgba(255,255,255,.85); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; } /* Align headers with their data */ .rk2-table thead th { text-align: center; } .rk2-table thead th:nth-child(2), .rk2-table thead th:nth-child(8) { text-align: left; } .rk2-table tbody td:nth-child(1), .rk2-table tbody td:nth-child(3), .rk2-table tbody td:nth-child(4), .rk2-table tbody td:nth-child(5), .rk2-table tbody td:nth-child(6), .rk2-table tbody td:nth-child(7) { text-align: center; } .rk2-table tbody td:nth-child(2), .rk2-table tbody td:nth-child(8) { text-align: left; } .rk2-table tbody tr { border-top: 1px solid rgba(255,255,255,.08); } .rk2-table tbody tr:hover { background: rgba(255,255,255,.04); } .rk2-mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .rk2-gender { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 900; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.86); } .rk2-gender-ico { width: 18px; height: 18px; object-fit: contain; display: inline-block; vertical-align: middle; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); } .rk2-pill .rk2-gender-ico { width: 16px; height: 16px; margin-left: 4px; } .rk2-race-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 30px; padding: 4px 8px; } .rk2-race-badge, .badge.badge-race.rk2-race-badge, .badge-race.rk2-race-badge { all: unset; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle; line-height: 0 !important; } .rk2-race-badge--solo { min-width: 0; padding-inline: 0; } .rk2-race-icon { width: 42px; height: 42px; object-fit: contain; display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.34)); } .rk2-empty { padding: 16px; color: rgba(255,255,255,.76); } /* ========================================================= GOLD GLOW (Top 1) + subtle pulse animation ========================================================= */ .rk2-pod.is-gold { border-color: rgba(255,214,120,.55); box-shadow: 0 18px 44px rgba(0,0,0,.25), 0 0 0 2px rgba(255,214,120,.12) inset, 0 0 42px rgba(255,214,120,.22); animation: rk2GoldPulse 2.8s ease-in-out infinite; } .rk2-pod.is-gold::before { background: radial-gradient(85% 75% at 25% 10%, rgba(255,214,120,.22), transparent 62%), radial-gradient(70% 60% at 70% 15%, rgba(255,214,120,.14), transparent 62%); } .rk2-pod.is-gold .rk2-rank { border-color: rgba(255,214,120,.55); background: rgba(255,214,120,.14); } @keyframes rk2GoldPulse { 0%, 100% { box-shadow: 0 18px 44px rgba(0,0,0,.25), 0 0 0 2px rgba(255,214,120,.12) inset, 0 0 38px rgba(255,214,120,.18); transform: translateY(0); } 50% { box-shadow: 0 18px 44px rgba(0,0,0,.25), 0 0 0 2px rgba(255,214,120,.16) inset, 0 0 54px rgba(255,214,120,.28); transform: translateY(-1px); } } @media (prefers-reduced-motion: reduce) { .rk2-pod.is-gold { animation: none; } } /* ========================================================= Class icons only (bigger) ========================================================= */ .rk2-class img { width: 30px; height: 30px; } .rk2-table .rk2-class-ico, .rk2-table img.rk2-class-ico { width: 42px; height: 42px; } @media (max-width: 768px) { .rk2-medal__img { height: 26px; } }