:root { --gold-1: #785a28; --gold-2: #c8aa6e; --gold-3: #f0e6d2; --silver-1: #8d99a4; --silver-2: #e8edf2; --text: #f0e6d2; --muted: #a09b8c; --nav-h: 62px; --font-display: "Cinzel", "Times New Roman", serif; --font-ui: "Montserrat", "Segoe UI", sans-serif; /* aliases kept for compatibility with existing rules */ --serif: var(--font-display); --sans: var(--font-ui); } * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; background: #03050a; /* the intro's light burst scales past the viewport; clip it without turning into a scroll container (which would break smooth scroll) */ overflow-x: clip; } body { color: var(--text); font-family: var(--sans); overflow-x: clip; background: radial-gradient(56vw 40vh at 50% 108%, rgba(200, 170, 110, 0.07), transparent 65%), radial-gradient(60vw 36vh at 50% -12%, rgba(38, 84, 148, 0.45), transparent 70%), linear-gradient(180deg, #060a12 0%, #04070d 45%, #02040a 100%); } /* the logo's blue spotlight beams, fixed behind everything */ .beams { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(104deg, transparent 10%, rgba(70, 128, 200, 0.075) 16%, transparent 25%), linear-gradient(90deg, transparent 43%, rgba(96, 156, 226, 0.065) 50%, transparent 57%), linear-gradient(76deg, transparent 75%, rgba(70, 128, 200, 0.075) 84%, transparent 93%); animation: beam-pulse 9s ease-in-out infinite alternate; } @keyframes beam-pulse { from { opacity: 0.6; } to { opacity: 1; } } /* drifting embers */ .motes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .mote { position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%; background: rgba(200, 170, 110, 0.85); box-shadow: 0 0 8px rgba(200, 170, 110, 0.6); animation: mote-rise linear infinite; } @keyframes mote-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: 0.7; } 85% { opacity: 0.5; } 100% { transform: translateY(-104vh) translateX(var(--drift, 24px)); opacity: 0; } } /* soft vignette over everything */ body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 96% at 50% 42%, transparent 55%, rgba(1, 3, 6, 0.62) 100%); } .landing, .section, .topnav, .site-foot { position: relative; z-index: 2; } /* ---------- nav ---------- */ .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 3vw, 42px); background: linear-gradient(180deg, rgba(4, 8, 15, 0.92), rgba(4, 8, 15, 0.62) 70%, transparent); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); border-bottom: 1px solid transparent; transform: translateY(-100%); opacity: 0; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s, border-color 0.4s; } .topnav.show { transform: none; opacity: 1; border-bottom-color: rgba(120, 90, 40, 0.35); } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } /* the mark is cut out, so it needs more height than the old boxed file to carry the same weight */ .nav-logo { height: 42px; width: auto; } .nav-logo.hidden { display: none; } .nav-tag { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.22em; text-indent: 0.22em; background: linear-gradient(180deg, #f7ecd0 12%, #c8aa6e 62%, #96732f 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav-links { display: flex; gap: clamp(14px, 2.4vw, 34px); } .nav-link { position: relative; font-family: var(--serif); font-size: clamp(10px, 0.9vw, 12.5px); font-weight: 600; letter-spacing: 0.2em; text-indent: 0.2em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 6px 2px; transition: color 0.2s; } .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .nav-link:hover { color: var(--gold-3); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .nav-link.active { color: var(--gold-2); } /* The same bar the About page wears: the sections on the left, the mark in the middle, About and the login on the right. It only changes how .topnav lays its children out — the fixed position and the slide-in on scroll are still the ones above. */ .topnav.nav-split { display: grid; grid-template-columns: 1fr auto 1fr; height: 72px; padding: 0 clamp(16px, 3vw, 44px); } .nav-side { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 42px); } .nav-side-left { grid-column: 1; justify-content: flex-start; } .nav-side-right { grid-column: 3; justify-content: flex-end; gap: clamp(16px, 2.2vw, 34px); } /* centred on the bar itself rather than on the middle column, so a long link on one side cannot push the mark off centre */ .nav-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; text-decoration: none; } .nav-mark-logo { display: block; width: 58px; height: 58px; object-fit: contain; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease; } .nav-mark:hover .nav-mark-logo { transform: scale(1.07); filter: brightness(1.1) drop-shadow(0 0 10px rgba(201, 165, 90, 0.18)); } .nav-login { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 105px; height: 38px; padding: 0 22px; border: 1px solid rgba(201, 165, 90, 0.55); color: var(--gold-2); background: transparent; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; overflow: hidden; transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); } .nav-login:hover { color: var(--gold-3); border-color: rgba(201, 165, 90, 0.95); background: rgba(201, 165, 90, 0.06); box-shadow: 0 0 20px rgba(201, 165, 90, 0.08), inset 0 0 18px rgba(201, 165, 90, 0.025); transform: translateY(-1px); } /* the gold sweep the About page's button has */ .nav-login::before { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255, 225, 150, 0.09), transparent); transform: skewX(-18deg); transition: left 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; } .nav-login:hover::before { left: 150%; } /* narrow screens: the mark would sit on top of the links, so it steps aside */ @media (max-width: 620px) { .topnav.nav-split { height: var(--nav-h); } .nav-mark { display: none; } .nav-login { min-width: 0; height: 32px; padding: 0 14px; font-size: 11px; } } /* ---------- landing ---------- */ /* Taller than the screen on purpose: the mark below is pinned to the top of it, so this extra height is not empty page — it is the length of the shot. The script writes --p across it (0 at the top, 1 when the landing has been scrolled through) and everything here reads off that, so the whole move is retimed by changing these numbers alone. */ .landing { height: 140vh; display: block; } .landing::before { content: ""; position: absolute; left: 50%; top: 0; width: 90vw; height: 78vh; transform: translateX(-50%); background: radial-gradient(46% 52% at 50% 34%, rgba(110, 165, 230, 0.11), transparent 70%); pointer-events: none; } .landing-content { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5vh; padding: 0 20px; max-width: 100%; will-change: transform, opacity, filter; /* the camera pulling back: the mark grows a little, softens, and is gone before the roster arrives, rather than sliding off the top of the page */ transform: scale(calc(1 + var(--p, 0) * 0.24)) translateY(calc(var(--p, 0) * -4vh)); filter: blur(calc(var(--p, 0) * 16px)); /* holds full strength through the first third, then leaves */ opacity: clamp(0, calc(1.32 - var(--p, 0) * 1.4), 1); } /* the title trails the mark: it leaves a touch sooner and spreads as it goes */ .landing-content .team-title { opacity: clamp(0, calc(1.2 - var(--p, 0) * 2.2), 1); letter-spacing: calc(0.3em + var(--p, 0) * 0.14em); } /* A phone has less patience and a shorter thumb, so the shot is shorter there. */ @media (max-width: 760px) { .landing { height: 165vh; } } /* Anyone who asked for less motion gets the old single screen: no pull-back, no blur, just the roster one scroll away. */ @media (prefers-reduced-motion: reduce) { .landing { height: 100vh; } .landing-content { transform: none; filter: none; opacity: 1; } .landing-content .team-title { opacity: 1; letter-spacing: 0.3em; } } .logo-wrap { position: relative; animation: logo-float 7s ease-in-out 1.5s infinite; } @keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .logo { display: block; width: min(50vh, 70vw); animation: logo-in 1.3s cubic-bezier(0.16, 0.8, 0.2, 1) both, logo-glow 5.5s ease-in-out 1.8s infinite; } /* logo file with a baked-in dark background: feather it into the page */ .logo.baked { -webkit-mask-image: radial-gradient(ellipse 68% 64% at 50% 50%, #000 52%, transparent 76%); mask-image: radial-gradient(ellipse 68% 64% at 50% 50%, #000 52%, transparent 76%); } @keyframes logo-in { 0% { opacity: 0; transform: scale(0.7) translateY(4vh); filter: blur(16px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; filter: blur(0); } } @keyframes logo-glow { 0%, 100% { filter: drop-shadow(0 0 26px rgba(200, 170, 110, 0.12)); } 50% { filter: drop-shadow(0 0 52px rgba(200, 170, 110, 0.3)); } } /* Light sweep across the mark. The mark itself is the mask, so the light can only ever fall on metal — an ellipse or any other shape leaves a bright streak on the background beside the wings. That means the band has to travel by sliding its own background rather than by transforming this box: a transform would drag the mask along with it and the light would never move relative to the logo. */ .logo-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* a hot core with a softer spill either side, rather than one flat band — the narrow bright line is what reads as polished metal catching the light */ background: linear-gradient( 104deg, transparent 36%, rgba(255, 244, 214, 0.34) 44%, rgba(255, 253, 242, 0.98) 49%, rgba(255, 244, 214, 0.34) 54%, transparent 62% ); background-size: 260% 100%; background-repeat: no-repeat; background-position: 100% 0; mix-blend-mode: overlay; opacity: 0; animation: sweep 6.5s ease-in-out 2.2s infinite; -webkit-mask-image: url("assets/logo.png"); mask-image: url("assets/logo.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @keyframes sweep { 0% { opacity: 0; background-position: 100% 0; } 8% { opacity: 1; } 26% { opacity: 0; background-position: 0% 0; } 100% { opacity: 0; background-position: 0% 0; } } .logo-fallback { font-family: var(--serif); font-weight: 700; font-size: clamp(60px, min(17vh, 22vw), 165px); letter-spacing: 0.08em; background: linear-gradient(180deg, #f4f7fa 12%, #aeb9c4 48%, #6d7883 60%, #dfe6ec 78%, #8d99a4 96%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.8)); animation: logo-in 1.3s cubic-bezier(0.16, 0.8, 0.2, 1) both; } .team-title { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 3.3vw, 46px); letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; text-align: center; filter: drop-shadow(0 2px 14px rgba(200, 170, 110, 0.2)); } /* word wrappers only group letters: they must not paint text themselves, or the word renders twice (once here, once per letter) and ghosts */ .team-title .word { display: inline-block; white-space: nowrap; text-indent: 0; } .team-title .word-gap { display: inline-block; text-indent: 0; } .team-title .word > span { display: inline-block; background: linear-gradient(180deg, #f7ecd0 10%, #c8aa6e 58%, #96732f 95%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: char-in 0.7s cubic-bezier(0.16, 0.8, 0.2, 1) both; } @keyframes char-in { from { opacity: 0; transform: translateY(22px) scale(1.12); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } .scroll-hint { position: absolute; bottom: 4.5vh; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; background: none; border: none; cursor: pointer; opacity: 0; animation: hint-in 0.8s ease 2.6s both; } .scroll-hint i { display: block; width: 14px; height: 14px; margin: 0 auto; border-right: 2px solid var(--gold-2); border-bottom: 2px solid var(--gold-2); transform: rotate(45deg); animation: hint-bob 1.9s ease-in-out infinite; } @keyframes hint-in { to { opacity: 0.85; } } @keyframes hint-bob { 0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: 0.5; } 50% { transform: translateY(4px) rotate(45deg); opacity: 1; } } /* ---------- sections ---------- */ .section { scroll-margin-top: var(--nav-h); } #roster { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vh; } .stage { width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 1vw; padding: calc(var(--nav-h) * 0.6) 0.8vw 0; } /* the V formation: center banner big, sides step down and back */ .banner { --scale: 1; --d: 0.05s; } .banner:nth-child(1), .banner:nth-child(5) { --scale: 0.84; margin-top: 6.5vh; --d: 0.4s; } .banner:nth-child(2), .banner:nth-child(4) { --scale: 0.93; margin-top: 3.2vh; --d: 0.22s; } /* scroll reveal: hidden until the stage enters view, then center-out */ .stage:not(.revealed) .banner { opacity: 0; pointer-events: none; } .stage.revealed .banner { animation: banner-in 0.95s cubic-bezier(0.16, 0.85, 0.25, 1) var(--d) backwards; } @keyframes banner-in { 0% { opacity: 0; transform: translateY(10vh) scale(0.9); filter: blur(8px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } } /* shells (achievements / about) */ .shell { min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: 9vh 6vw; } .shell-inner { text-align: center; max-width: 640px; } .section-title { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: 0.24em; text-indent: 0.24em; text-transform: uppercase; background: linear-gradient(180deg, #f7ecd0 10%, #c8aa6e 60%, #8d6b2f 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } .rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px auto 22px; } .rule span { width: min(130px, 20vw); height: 1px; } .rule span:first-child { background: linear-gradient(90deg, transparent, var(--gold-2)); } .rule span:last-child { background: linear-gradient(90deg, var(--gold-2), transparent); } .rule i { width: 7px; height: 7px; background: var(--gold-2); transform: rotate(45deg); box-shadow: 0 0 10px rgba(200, 170, 110, 0.7); } .shell-text { color: var(--muted); font-size: clamp(13px, 1.15vw, 16px); line-height: 1.9; letter-spacing: 0.04em; } /* scroll-in for sections */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 0.8, 0.2, 1); } .reveal.in { opacity: 1; transform: none; } .site-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px 40px; text-align: center; font-family: var(--serif); font-size: 11px; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: rgba(160, 155, 140, 0.5); border-top: 1px solid rgba(120, 90, 40, 0.18); } /* ---------- banner ---------- */ .banner { --accent: #6a6862; --bw: min(20.7vw, 38.5vh); position: relative; width: calc(var(--bw) * var(--scale)); display: flex; flex-direction: column; align-items: center; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.55)); } .banner:hover { transform: translateY(-14px) scale(1.02); } .banner::before { content: ""; position: absolute; inset: -4% -18%; background: radial-gradient(55% 46% at 50% 38%, var(--accent) 0%, transparent 70%); opacity: 0.16; transition: opacity 0.35s; pointer-events: none; } .banner:hover::before { opacity: 0.42; } /* ---------- card ---------- */ .card { position: relative; width: 100%; aspect-ratio: 400 / 723; /* the frames' inner line box */ cursor: pointer; } .portrait { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 32%, #131e2c, #060c14 78%); display: flex; align-items: center; justify-content: center; } .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: none; transition: filter 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } .portrait.has-art .art { display: block; } .portrait.has-art .icon-letter { display: none; } .icon-letter { font-family: var(--serif); font-weight: 700; font-size: calc(var(--bw) * var(--scale) * 0.3); color: var(--gold-1); text-shadow: 0 0 26px rgba(0, 0, 0, 0.9); user-select: none; margin-bottom: 30%; } .banner.loading .portrait { animation: breathe 1.2s ease-in-out infinite; } @keyframes breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } } /* hover / tap: art dims and the stats fade in over it */ .banner:hover .art, .banner.stats-open .art { filter: brightness(0.3) blur(3px) saturate(0.75); transform: scale(1.08); } /* ---------- stats overlay ---------- */ .stats { position: absolute; left: 9%; right: 9%; top: 9%; bottom: 33%; z-index: 1; /* belt and braces: whatever ends up in here stays inside the card */ overflow: hidden; display: flex; flex-direction: column; gap: 4.5%; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 0.8, 0.2, 1); } .banner:hover .stats, .banner.stats-open .stats { opacity: 1; transform: none; } .banner.editing .stats { opacity: 0 !important; } /* keeps the lists readable over bright splash art */ .stats::before { content: ""; position: absolute; inset: -8% -9% -12%; background: linear-gradient(180deg, rgba(3, 7, 13, 0.82), rgba(3, 7, 13, 0.66) 70%, transparent); z-index: -1; } .stats-title { font-family: var(--font-ui); font-size: clamp(8px, 0.62vw, 10px); font-weight: 600; letter-spacing: 0.24em; text-indent: 0.24em; text-transform: uppercase; color: var(--gold-2); padding-bottom: 3px; margin-bottom: 5px; border-bottom: 1px solid rgba(120, 90, 40, 0.45); } .matches { list-style: none; display: flex; flex-direction: column; gap: 3px; } .champs { list-style: none; display: flex; flex-direction: column; gap: 4px; } .stat-row { display: flex; align-items: center; gap: 7px; font-size: clamp(9px, 0.68vw, 11.5px); color: var(--text); letter-spacing: 0.02em; } .stat-row img { width: clamp(16px, 1.4vw, 22px); height: clamp(16px, 1.4vw, 22px); border-radius: 2px; border: 1px solid rgba(120, 90, 40, 0.55); flex: none; } .stat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } .stat-val { font-variant-numeric: tabular-nums; color: var(--gold-3); } .stat-row.win .stat-val { color: #6fcf97; } .stat-row.loss .stat-val { color: #e5758a; } .stats-empty { font-size: clamp(9px, 0.68vw, 11px); color: rgba(160, 155, 140, 0.65); line-height: 1.7; } /* ---------- info plate ---------- */ .info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22% 8% 7.5%; text-align: center; background: linear-gradient(180deg, transparent 0%, rgba(3, 8, 15, 0.72) 34%, rgba(3, 8, 15, 0.96) 72%); pointer-events: none; } .info .name { pointer-events: auto; } .role-tag { font-family: var(--font-ui); font-size: clamp(9px, 0.75vw, 12px); font-weight: 600; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 6px; } .name { background: none; border: none; cursor: pointer; font-family: var(--serif); color: var(--text); font-weight: 700; font-size: clamp(15px, 1.5vw, 23px); letter-spacing: 0.04em; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .name:hover .game-name { color: var(--gold-3); text-shadow: 0 0 12px rgba(200, 170, 110, 0.5); } .tag-line { color: var(--muted); font-size: 0.58em; font-weight: 500; margin-left: 5px; } .rank-row { position: relative; margin-top: 8px; min-height: 22px; perspective: 600px; } .rank-current { display: flex; align-items: center; justify-content: center; gap: 8px; backface-visibility: hidden; } .rank-old { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-family: var(--serif); font-size: clamp(10px, 1vw, 14px); font-weight: 600; letter-spacing: 0.15em; text-indent: 0.15em; text-transform: uppercase; color: rgba(160, 155, 140, 0.85); backface-visibility: hidden; } .crest-ico { width: clamp(17px, 1.5vw, 24px); height: auto; display: none; } .rank-row.has-crest .crest-ico { display: block; } .rank-text { font-family: var(--font-ui); font-size: clamp(10px, 1vw, 14px); font-weight: 600; letter-spacing: 0.15em; text-indent: 0.15em; text-transform: uppercase; color: var(--accent); } .tier-unranked .rank-text { color: var(--muted); } .wl-line { margin-top: 4px; font-size: clamp(10px, 0.8vw, 12px); color: var(--muted); letter-spacing: 0.08em; min-height: 14px; } .note { margin-top: 3px; font-size: clamp(10px, 0.8vw, 12px); color: #d8846b; min-height: 14px; } /* ---------- the ranked border ---------- */ .frame { position: absolute; z-index: 3; pointer-events: none; transition: filter 0.35s; } .banner:hover .frame { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 55%, transparent)); } /* ---------- pennant tail + pin ---------- */ .tail { width: 92%; aspect-ratio: 100 / 48; margin-top: -1px; clip-path: polygon(0 0, 100% 0, 100% 26%, 50% 100%, 0 26%); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 50%, #2a3340) 0%, color-mix(in srgb, var(--accent) 22%, #131b26) 55%, color-mix(in srgb, var(--accent) 30%, #0b1119) 100%); padding: 1px; } .tail-in { width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0, 100% 25.5%, 50% 99.4%, 0 25.5%); background: linear-gradient(180deg, rgba(5, 10, 18, 0.96), rgba(4, 9, 16, 0.8) 55%, rgba(3, 7, 13, 0.45)); position: relative; } .tail-in::before { content: ""; position: absolute; left: 8%; right: 8%; top: 7.5%; height: 4.5%; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 70%, transparent) 18%, color-mix(in srgb, var(--accent) 70%, transparent) 82%, transparent 100%); opacity: 0.4; } .pin { width: 9px; height: 9px; margin-top: 12px; transform: rotate(45deg); background: var(--accent); opacity: 0.85; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); transition: box-shadow 0.35s, opacity 0.35s; } .banner:hover .pin { opacity: 1; box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 90%, transparent); } /* ---------- edit ---------- */ .edit-btn { position: absolute; top: 3.2%; right: 6.5%; z-index: 5; width: 27px; height: 27px; background: rgba(4, 10, 18, 0.85); border: 1px solid var(--gold-1); color: var(--gold-2); font-size: 12px; cursor: pointer; opacity: 0; transition: opacity 0.2s, border-color 0.15s; } .banner:hover .edit-btn { opacity: 1; } .edit-btn:hover { border-color: var(--gold-2); color: var(--gold-3); } .edit { position: absolute; inset: 10% 8%; z-index: 6; display: none; flex-direction: column; justify-content: center; gap: 8px; background: rgba(3, 8, 15, 0.96); border: 1px solid rgba(120, 90, 40, 0.5); padding: 14px 13px; } .banner.editing .edit { display: flex; } .banner.editing .edit-btn { opacity: 0; pointer-events: none; } .edit-id, .edit-champ, .edit-skin, .edit-region, .edit-tier { width: 100%; background: #0a1420; border: 1px solid var(--gold-1); color: var(--text); font-family: var(--sans); font-size: 13px; padding: 7px 9px; outline: none; } .edit-id:focus, .edit-champ:focus, .edit-skin:focus, .edit-region:focus, .edit-tier:focus { border-color: var(--gold-2); box-shadow: 0 0 8px rgba(200, 170, 110, 0.25); } .edit-id, .edit-champ { text-align: center; letter-spacing: 0.03em; } .edit-row { display: flex; gap: 8px; } .edit-row > * { flex: 1; } .btn { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 0; cursor: pointer; background: linear-gradient(180deg, #1e2328, #10171d); border: 1px solid var(--gold-1); color: var(--gold-2); transition: all 0.15s; } .btn:hover { border-color: var(--gold-2); color: var(--gold-3); box-shadow: 0 0 10px rgba(200, 170, 110, 0.3); } .btn.cancel { color: var(--muted); } /* ---------- tier accents ---------- */ .tier-unranked { --accent: #6a6862; } .tier-iron { --accent: #8e867c; } .tier-bronze { --accent: #b0793f; } .tier-silver { --accent: #9fadb3; } .tier-gold { --accent: #e3a94d; } .tier-platinum { --accent: #3fbcb4; } .tier-emerald { --accent: #1fb35c; } .tier-diamond { --accent: #6b8ce0; } .tier-master { --accent: #a54ce4; } .tier-grandmaster{ --accent: #e5484d; } .tier-challenger { --accent: #f4c874; } /* ---------- tablet ---------- */ @media (max-width: 1100px) { .banner { --bw: min(26vw, 40vh); } .stage { flex-wrap: wrap; gap: 2.5vh 1.5vw; } #roster { height: auto; padding: calc(var(--nav-h) + 5vh) 0 8vh; } .banner:nth-child(n) { margin-top: 0; --scale: 1; } .banner { width: min(30vw, 260px); } } /* ---------- phones ---------- */ @media (max-width: 700px) { :root { --nav-h: 54px; } .landing { height: 100svh; } .logo { width: min(72vw, 40vh); } .team-title { font-size: clamp(15px, 4.6vw, 26px); letter-spacing: 0.22em; text-indent: 0.22em; } .landing-content { gap: 3.4vh; } .nav-links { gap: 15px; } .nav-link { font-size: 9.5px; letter-spacing: 0.12em; text-indent: 0.12em; } .nav-logo { height: 33px; } .nav-tag { font-size: 14px; } } @media (max-width: 400px) { .topnav { padding: 0 12px; } .nav-links { gap: 11px; } .nav-link { font-size: 8.6px; letter-spacing: 0.08em; text-indent: 0.08em; } .nav-tag { font-size: 12.5px; letter-spacing: 0.16em; text-indent: 0.16em; } .nav-logo { height: 28px; } #roster { padding: calc(var(--nav-h) + 4vh) 0 6vh; } .stage { flex-direction: column; align-items: center; gap: 42px; padding: 0 20px; } .banner, .banner:nth-child(n) { --scale: 1; width: min(80vw, 320px); margin-top: 0; } .icon-letter { font-size: 68px; } /* tap to open stats on touch screens */ .stats { left: 8%; right: 8%; top: 8%; bottom: 34%; } .stat-row { font-size: 11.5px; } .stat-row img { width: 22px; height: 22px; } .stats-title { font-size: 9.5px; } .shell { min-height: 52vh; padding: 8vh 22px; } .edit-btn { opacity: 1; } } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ---------- richer match rows ---------- */ .stat-row.match { align-items: center; gap: 8px; } .stat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; } .stat-main .stat-name { color: var(--text); font-size: clamp(9.5px, 0.72vw, 12px); } .stat-meta { font-size: clamp(8px, 0.58vw, 9.5px); color: rgba(160, 155, 140, 0.75); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.15; } .badge { font-family: var(--font-ui); font-size: clamp(7px, 0.52vw, 8.5px); font-weight: 700; letter-spacing: 0.12em; text-indent: 0.12em; padding: 0 4px; border: 1px solid currentColor; border-radius: 2px; line-height: 1.45; } .badge.mvp { color: #f0c26b; box-shadow: 0 0 9px rgba(240, 194, 107, 0.3); } .badge.ace { color: #b9c6d2; } .badge.place { color: #9fb0c2; } .badge.place.first { color: #f0c26b; box-shadow: 0 0 9px rgba(240, 194, 107, 0.3); } /* ---------- live in-game badge ---------- */ .live-badge { position: absolute; top: 5.5%; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(6, 12, 20, 0.92); border: 1px solid rgba(226, 84, 84, 0.65); box-shadow: 0 0 16px rgba(226, 84, 84, 0.28); white-space: nowrap; } .live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #e25454; box-shadow: 0 0 8px #e25454; animation: live-pulse 1.5s ease-in-out infinite; flex: none; } @keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } } .live-text { font-family: var(--font-ui); font-size: clamp(8px, 0.6vw, 10px); font-weight: 600; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; color: #f4dcdc; } /* a live player's banner glows a little hotter */ .banner.is-live::before { opacity: 0.3; } .banner.editing .live-badge { display: none; } /* ---------- loading shimmer ---------- */ .banner.loading .info .rank-row, .banner.loading .info .wl-line { position: relative; overflow: hidden; } .banner.loading .info .rank-row::after, .banner.loading .info .wl-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(200, 170, 110, 0.16), transparent); animation: shimmer 1.3s ease-in-out infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ---------- keyboard focus ---------- */ .name:focus-visible, .edit-btn:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .scroll-hint:focus-visible, .edit-id:focus-visible, .edit-champ:focus-visible, .edit-skin:focus-visible, .edit-region:focus-visible, .edit-tier:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; } /* ---------- form dots ---------- */ .form-dots { display: flex; gap: 5px; justify-content: center; margin-top: 6px; min-height: 7px; } .form-dots .dot { width: 7px; height: 7px; border-radius: 50%; display: block; } .form-dots .dot.w { background: #5fbf82; box-shadow: 0 0 7px rgba(95, 191, 130, 0.55); } .form-dots .dot.l { background: #d15f74; box-shadow: 0 0 7px rgba(209, 95, 116, 0.45); } /* ---------- team overview bar ---------- */ /* The same plate the About page wears: cut corners, a gold frame with a second one inside it, diamonds between the figures, and a small ornament hanging under the middle. Kept here rather than shared with about.css because that sheet is only loaded on the About page. */ .team-bar { position: relative; isolation: isolate; width: min(1180px, calc(100% - 48px)); min-height: 112px; margin: 10px auto 44px; padding: 20px clamp(20px, 4vw, 56px); display: flex; align-items: center; justify-content: center; gap: 0; border: 1px solid rgba(201, 165, 90, 0.68); background: rgba(5, 9, 16, 0.22); clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ); box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.16), 0 0 24px rgba(0, 0, 0, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: bar-in 0.7s cubic-bezier(0.16, 0.8, 0.2, 1) 0.55s backwards; } @keyframes bar-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* the inner frame */ .team-bar::before { content: ""; position: absolute; inset: 7px; z-index: -1; pointer-events: none; border: 1px solid rgba(201, 165, 90, 0.16); clip-path: polygon( 9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px ); } /* line — diamond — line, hanging under the plate */ .team-bar::after { content: ""; position: absolute; left: 50%; bottom: -22px; width: 280px; height: 12px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent 0, rgba(201, 165, 90, 0.52) 40%, transparent 40%) left center / 46% 1px no-repeat, linear-gradient(90deg, transparent 0, rgba(201, 165, 90, 0.52) 60%, transparent 60%) right center / 46% 1px no-repeat, linear-gradient(45deg, #d5ad55 0 50%, transparent 50% 100%) center / 7px 7px no-repeat; filter: drop-shadow(0 0 5px rgba(213, 173, 85, 0.35)); } .team-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; } .team-val { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.2vw, 34px); line-height: 1; letter-spacing: 0.02em; color: #d5ad55; text-shadow: 0 0 18px rgba(201, 165, 90, 0.08); text-transform: capitalize; } .team-label { font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: #c9a55a; } .team-sub { font-size: 9px; letter-spacing: 0.06em; color: rgba(201, 165, 90, 0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* the divider, with its diamond at the middle */ .team-sep { position: relative; flex: none; width: 1px; height: 48px; margin: 0 clamp(12px, 2.4vw, 30px); background: linear-gradient( to bottom, transparent 0%, rgba(201, 165, 90, 0.18) 15%, rgba(201, 165, 90, 0.62) 50%, rgba(201, 165, 90, 0.18) 85%, transparent 100% ); } .team-sep::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: #d5ad55; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 8px rgba(213, 173, 85, 0.35); } /* a phone cannot hold four figures in a row: they wrap into two pairs and the dividers step out of the way rather than cutting the rows in half */ @media (max-width: 760px) { .team-bar { flex-wrap: wrap; gap: 18px 0; min-height: 0; padding: 18px 16px; } .team-stat { flex: 0 0 50%; } .team-sep { display: none; } } @media (max-width: 700px) { .team-bar { flex-wrap: wrap; gap: 14px 18px; padding: 12px 16px; } .team-sep { display: none; } .team-stat { min-width: 40%; } } /* ---------- LP movement ---------- */ .climb { margin-top: 5px; font-size: clamp(9.5px, 0.72vw, 11.5px); font-weight: 600; letter-spacing: 0.06em; } .climb.up { color: #6fcf97; } .climb.down { color: #d78f9c; } /* ---------- promotions ---------- */ /* A rank change plays once when the page opens: the old rank is shown, then the badge flips over to reveal the new one. After that the card sits still. */ .banner.promoting .rank-old { display: flex; animation: rank-flip-away 0.55s ease-in 0.55s both; } .banner.promoting .rank-current { animation: rank-flip-in 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) 1.05s both; } @keyframes rank-flip-away { 0% { transform: rotateX(0deg); opacity: 1; } 100% { transform: rotateX(-90deg); opacity: 0; } } @keyframes rank-flip-in { 0% { transform: rotateX(90deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotateX(0deg); opacity: 1; } } /* The border changes tier as well: the old frame sits on top, flares, then dissolves to reveal the new tier's frame underneath. */ .frame-old { display: none; z-index: 4; } /* "Before" state, held from the moment we learn about the change until the animation runs — the card wears the rank they are about to leave behind. */ .banner.pre-promo .rank-old { display: flex; opacity: 1; } .banner.pre-promo .rank-current { opacity: 0; } .banner.pre-promo.frame-swaps .frame-old { display: block; opacity: 1; } .banner.pre-promo.frame-swaps .frame:not(.frame-old) { filter: brightness(0.55) saturate(0.5); } .banner.promoting.frame-swaps .frame-old { display: block; animation: frame-swap 0.9s ease-in-out 0.8s both; } @keyframes frame-swap { 0% { opacity: 1; filter: none; } 35% { opacity: 1; filter: brightness(2.4) drop-shadow(0 0 30px rgba(255, 238, 190, 0.95)); } 70% { opacity: 0.25; filter: brightness(1.6); } 100% { opacity: 0; filter: none; } } /* the incoming frame brightens up as the old one burns off */ .banner.promoting.frame-swaps .frame:not(.frame-old) { animation: frame-arrive 0.9s ease-out 0.95s both; } @keyframes frame-arrive { 0% { filter: brightness(0.55) saturate(0.5); } 45% { filter: brightness(1.6) saturate(1.2) drop-shadow(0 0 24px rgba(255, 235, 180, 0.7)); } 100% { filter: none; } } /* a single flash of the border as the new rank lands (no tier change) */ .banner.promoted-up:not(.frame-swaps) .frame:not(.frame-old) { animation: frame-flash 1s ease-out 1.05s 1 both; } @keyframes frame-flash { 0% { filter: drop-shadow(0 0 6px rgba(240, 194, 107, 0.2)); } 25% { filter: drop-shadow(0 0 30px rgba(255, 226, 160, 1)); } 100% { filter: drop-shadow(0 0 10px rgba(240, 194, 107, 0.3)); } } /* the tag itself stays calm, so it can sit there for a day without nagging */ .promo { margin-top: 6px; font-family: var(--serif); font-size: clamp(8.5px, 0.66vw, 10.5px); font-weight: 700; letter-spacing: 0.16em; text-indent: 0.16em; text-transform: uppercase; animation: promo-fade 0.5s ease 1.5s both; } @keyframes promo-fade { from { opacity: 0; } to { opacity: 1; } } .promo.up { color: #f0c26b; text-shadow: 0 0 10px rgba(240, 194, 107, 0.35); } /* the tag is clickable to replay the flip */ .promo:not([hidden]) { cursor: pointer; pointer-events: auto; } .promo:not([hidden]):hover { filter: brightness(1.25); } .promo.down { color: #b9a1a6; } /* ---------- recent movement feed ---------- */ .movement { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); flex-wrap: wrap; justify-content: center; max-width: min(1100px, 92vw); animation: bar-in 0.7s cubic-bezier(0.16, 0.8, 0.2, 1) 0.75s backwards; } .movement-title { font-family: var(--font-ui); font-size: clamp(8px, 0.6vw, 10px); font-weight: 600; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: rgba(160, 155, 140, 0.7); } .movement-list { list-style: none; display: flex; gap: clamp(10px, 1.6vw, 22px); flex-wrap: wrap; justify-content: center; } .movement-row { font-size: clamp(10px, 0.76vw, 12px); color: var(--muted); letter-spacing: 0.03em; display: flex; align-items: baseline; gap: 4px; } .movement-row strong { color: var(--text); font-weight: 600; } .movement-row em { font-style: normal; text-transform: capitalize; } .movement-row.up em { color: #f0c26b; } .movement-row.down em { color: #d78f9c; } .movement-when { color: rgba(160, 155, 140, 0.55); font-size: 0.9em; } /* ---------- team records ---------- */ .records { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 6px; text-align: center; } .record { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 12px 16px; background: linear-gradient(180deg, rgba(9, 16, 26, 0.85), rgba(4, 9, 16, 0.6)); border: 1px solid rgba(120, 90, 40, 0.35); transition: border-color 0.25s, transform 0.25s; } .record:hover { border-color: rgba(200, 170, 110, 0.7); transform: translateY(-3px); } .record-value { font-family: var(--font-ui); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1; background: linear-gradient(180deg, #f7ecd0 10%, #c8aa6e 60%, #96732f 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } .record-label { font-family: var(--font-ui); font-size: clamp(8.5px, 0.62vw, 10px); font-weight: 600; letter-spacing: 0.18em; text-indent: 0.18em; text-transform: uppercase; color: var(--gold-2); margin-top: 5px; } .record-who { font-size: clamp(11px, 0.9vw, 13.5px); color: var(--text); font-weight: 600; margin-top: 4px; } .record-detail { font-size: clamp(9.5px, 0.72vw, 11px); color: rgba(160, 155, 140, 0.75); } @media (max-width: 700px) { .records { grid-template-columns: repeat(2, 1fr); gap: 10px; } .record { padding: 14px 8px; } } /* ---------- saved-data notice ---------- */ /* Sits in the flow rather than fixed on top: as a fixed bar it overlapped the nav once the page scrolled. Only shown when the key has actually expired. */ .stale-banner { position: relative; z-index: 50; padding: 7px 16px; text-align: center; font-size: clamp(10.5px, 0.8vw, 12.5px); letter-spacing: 0.05em; color: #f0dcb4; background: linear-gradient(180deg, rgba(70, 48, 12, 0.96), rgba(44, 30, 8, 0.92)); border-bottom: 1px solid rgba(200, 170, 110, 0.45); } /* ---------- personal bests, inside a profile ---------- */ .bests { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 26px 10px; } .best { flex: 1 1 100px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 8px; background: rgba(9, 16, 26, 0.6); border: 1px solid rgba(120, 90, 40, 0.28); } .best-val { font-family: var(--font-ui); font-weight: 700; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.1; background: linear-gradient(180deg, #f7ecd0 12%, #c8aa6e 64%, #96732f 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } .best-label { font-family: var(--font-ui); font-size: 8.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-2); margin-top: 3px; text-align: center; } .best-detail { font-size: 10px; color: rgba(160, 155, 140, 0.7); text-align: center; } @media (max-width: 760px) { .bests { padding: 0 16px 12px; gap: 7px; } .best { flex: 1 1 72px; padding: 7px 5px; } } /* ---------- rank journey + activity ---------- */ .panels { display: flex; gap: 22px; padding: 0 26px 12px; flex-wrap: wrap; } .panel { flex: 1 1 300px; min-width: 0; } .panel-empty { font-size: 11.5px; color: rgba(160, 155, 140, 0.7); line-height: 1.7; padding: 8px 0; } .journey-svg { width: 100%; height: 84px; display: block; overflow: visible; } .journey-svg.sparse { height: 54px; } .journey-count { margin-top: 3px; font-size: 10px; color: rgba(160, 155, 140, 0.6); letter-spacing: 0.03em; } .journey-svg circle { transition: r 0.15s; } .journey-svg circle:hover { r: 5; } .journey-ends { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--font-ui); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(160, 155, 140, 0.75); } /* Fixed cell size: stretching cells to fill the width made the grid taller than its panel, and the footer ended up printed over the squares. */ .heat-grid { display: flex; gap: 3px; flex-wrap: nowrap; overflow-x: auto; } .heat-col { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; } .heat-cell { display: block; width: clamp(8px, 1vw, 12px); height: clamp(8px, 1vw, 12px); border-radius: 2px; background: rgba(200, 170, 110, 0.07); } .heat-cell.l1 { background: rgba(200, 170, 110, 0.28); } .heat-cell.l2 { background: rgba(200, 170, 110, 0.5); } .heat-cell.l3 { background: rgba(216, 183, 112, 0.74); } .heat-cell.l4 { background: rgba(240, 205, 130, 0.95); box-shadow: 0 0 6px rgba(240, 205, 130, 0.45); } .heat-cell.future { opacity: 0.25; } .heat-foot { margin-top: 6px; font-size: 10.5px; color: rgba(160, 155, 140, 0.7); letter-spacing: 0.03em; } @media (max-width: 760px) { .panels { flex-direction: column; gap: 16px; padding: 0 16px 14px; } .journey-svg { height: 96px; } } /* ---------- season goal ---------- */ .goal { margin-top: 7px; } .goal-bar { height: 3px; background: rgba(200, 170, 110, 0.16); border-radius: 2px; overflow: hidden; } .goal-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #f0dcb4); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .goal-text { display: block; margin-top: 4px; font-size: clamp(9px, 0.68vw, 11px); letter-spacing: 0.05em; color: rgba(160, 155, 140, 0.85); } .goal.done .goal-bar i { background: linear-gradient(90deg, #6fcf97, #b8f0cd); } .goal.done .goal-text { color: #6fcf97; font-weight: 600; } /* ---------- weekly recap & wall of shame ---------- */ .sub-title { font-family: var(--font-ui); font-size: clamp(11px, 1vw, 13px); font-weight: 600; letter-spacing: 0.24em; text-indent: 0.24em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 12px; } .recap { margin-bottom: 26px; text-align: center; } .recap-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .recap-list li { font-size: clamp(12px, 1.05vw, 14.5px); line-height: 1.75; color: var(--muted); letter-spacing: 0.02em; } .recap-list b { color: var(--gold-3); font-weight: 600; } .shame-wrap { margin-top: 26px; } .shame .record { border-color: rgba(120, 60, 60, 0.3); } .shame .record:hover { border-color: rgba(215, 143, 156, 0.55); } .shame .record-value { background: linear-gradient(180deg, #f3d6dc 10%, #d78f9c 60%, #8d5560 96%); -webkit-background-clip: text; background-clip: text; } .shame .record-label { color: #d78f9c; } .goal-pace { display: block; margin-top: 2px; font-size: clamp(8.5px, 0.62vw, 10px); color: rgba(160, 155, 140, 0.6); letter-spacing: 0.03em; font-style: italic; } .goal.done .goal-pace { display: none; } .foot-note { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.06em; text-transform: none; color: rgba(160, 155, 140, 0.45); } /* ---------- full-screen player page ---------- */ /* Replaces the old profile modal. A roster card expands into this; the URL carries #player/ so back and a shared link both land in the right place. */ .pp { position: fixed; inset: 0; z-index: 60; background: radial-gradient(60vw 36vh at 50% -12%, rgba(38, 84, 148, 0.3), transparent 70%), linear-gradient(180deg, #060a12 0%, #04070d 45%, #02040a 100%); animation: pp-in 0.32s ease both; } @keyframes pp-in { from { opacity: 0; } to { opacity: 1; } } .pp-shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: 100%; } /* ---- sidebar ---- */ .pp-side { position: relative; display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid rgba(120, 90, 40, 0.4); background: linear-gradient(180deg, rgba(8, 15, 25, 0.96), rgba(3, 7, 13, 0.99)); } .pp-back { position: absolute; top: 16px; left: 16px; z-index: 5; padding: 8px 14px; background: rgba(4, 10, 18, 0.72); border: 1px solid rgba(200, 170, 110, 0.4); color: var(--gold-2); font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color 0.15s, color 0.15s; } .pp-back:hover { border-color: var(--gold-2); color: var(--gold-3); } .pp-portrait { position: relative; height: 290px; flex: none; overflow: hidden; } .pp-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: saturate(0.85); } .pp-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 7, 13, 0.5) 0%, transparent 28%, rgba(3, 7, 13, 0.92) 84%, #050a11 100%); } .pp-id { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; text-align: center; padding: 0 18px; } .pp-role { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.38em; text-indent: 0.38em; text-transform: uppercase; color: var(--gold-2); } .pp-name { margin-top: 6px; font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.2vw, 32px); line-height: 1; background: linear-gradient(180deg, #fbf3df 8%, #e0c489 56%, #a07c33 98%); -webkit-background-clip: text; background-clip: text; color: transparent; } .pp-tag { margin-top: 4px; font-size: 12px; color: rgba(160, 155, 140, 0.8); letter-spacing: 0.08em; } .pp-rank { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 18px 0; } .pp-crest { width: 42px; height: auto; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 35%, transparent)); } .pp-tier { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .pp-lp { font-size: 11.5px; color: var(--muted); letter-spacing: 0.08em; margin-top: 2px; } .pp-lpbar { margin: 14px 22px 0; height: 4px; background: rgba(200, 170, 110, 0.14); border-radius: 3px; overflow: hidden; } .pp-lpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #f7e7b1); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .pp-wl { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); } .pp-wl b { color: var(--gold-3); font-weight: 600; } .pp-trend { align-self: center; margin-top: 8px; padding: 2px 8px; border-radius: 2px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; } .pp-trend.up { color: #6fcf97; background: rgba(111, 207, 151, 0.12); } .pp-trend.down { color: #d78f9c; background: rgba(215, 143, 156, 0.12); } .pp-form { justify-content: center; margin-top: 12px; } .pp-sep { height: 1px; margin: 20px 22px 0; background: linear-gradient(90deg, transparent, rgba(200, 170, 110, 0.32), transparent); } .pp-block { padding: 18px 22px 4px; } .pp-block:last-child { padding-bottom: 26px; } .pp-h { font-family: var(--serif); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 12px; } .pp-rec { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(120, 90, 40, 0.14); } .pp-rec:last-child { border-bottom: none; } .pp-rec b { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--gold-3); min-width: 46px; } .pp-rec-l { flex: 1; font-size: 12px; color: rgba(160, 155, 140, 0.9); } .pp-rec-d { font-size: 11px; color: rgba(160, 155, 140, 0.55); } .pp-rec.good b { color: #6fcf97; } .pp-rec.bad b { color: #d78f9c; } .pp-goal-label { font-size: 12px; color: rgba(160, 155, 140, 0.85); } .pp-goal-pct { font-size: 12px; color: var(--gold-3); font-weight: 600; font-variant-numeric: tabular-nums; } .pp-goal-pace { margin-top: 7px; font-size: 11px; color: rgba(160, 155, 140, 0.6); font-style: italic; } /* ---- main column ---- */ /* ---- main area: tiles across the top, then games beside the stack ---- */ .pp-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .pp-close { position: absolute; top: 18px; right: 22px; z-index: 5; width: 34px; height: 34px; background: rgba(4, 10, 18, 0.8); border: 1px solid rgba(120, 90, 40, 0.5); color: var(--gold-2); font-size: 18px; line-height: 1; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .pp-close:hover { border-color: var(--gold-2); color: var(--gold-3); } .pp-tiles { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px 74px 18px 26px; } /* Two columns that each fill the height and scroll on their own. Sharing one scrollbar left whichever column ran out first sitting under a block of empty space, which is what made the old layout look unfinished. */ .pp-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 2fr 1fr; gap: 18px; padding: 0 26px 22px; } /* The row's width depends on whether the body is in its two-column or its one-column mode, not on the viewport — at 1100px wide the games column is actually roomier than at 1250px, so viewport breakpoints would hide the teams and then bring them back on the way down. Measuring the column itself says what it means: show the teams when there is room for them. */ .pp-games-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; container-type: inline-size; container-name: games; } .pp-games-col .pm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 8px; } .pp-side-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; overflow-y: auto; padding-right: 6px; } /* ---- the match row ---- Read left to right the way a match history is: what the game was and how it ended, then the loadout with the score beside it and the build underneath, then the numbers that explain the score, then both teams. */ .pm-list { list-style: none; display: flex; flex-direction: column; gap: 5px; } .pm-match { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 132px) 214px 26px; align-items: center; gap: 14px; padding: 8px 12px; border: 1px solid transparent; border-left: 4px solid transparent; background: linear-gradient(90deg, rgba(9, 16, 26, 0.72), rgba(6, 11, 19, 0.45)); transition: border-color 0.15s, background 0.15s; } /* older records have no scoreboard to draw, so the row closes the gap rather than leaving a column of empty space where the teams would be */ .pm-match.no-teams { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 132px) 26px; } .pm-match.win { border-left-color: #4e9e6e; background: linear-gradient(90deg, rgba(24, 48, 38, 0.62), rgba(6, 14, 19, 0.42)); } .pm-match.loss { border-left-color: #a1596a; background: linear-gradient(90deg, rgba(52, 24, 32, 0.6), rgba(14, 7, 12, 0.42)); } .pm-match.win:hover { border-color: rgba(111, 207, 151, 0.45); } .pm-match.loss:hover { border-color: rgba(215, 143, 156, 0.4); } /* what the game was, and how it ended */ .pm-when { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pm-queue { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--gold-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-ago { font-size: 11px; color: rgba(160, 155, 140, 0.7); } .pm-when-rule { height: 1px; background: rgba(200, 170, 110, 0.18); margin: 2px 0; } .pm-result { font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; } .pm-match.win .pm-result { color: #6fcf97; } .pm-match.loss .pm-result { color: #d78f9c; } .pm-length { font-size: 11px; color: rgba(160, 155, 140, 0.7); font-variant-numeric: tabular-nums; } /* the middle: loadout and score on top, build and badges underneath */ .pm-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .pm-top { display: flex; align-items: center; gap: 12px; min-width: 0; } .pm-bottom { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; } /* what they took in */ .pm-loadout { display: flex; align-items: center; gap: 4px; flex: none; } .pm-champ-wrap { position: relative; flex: none; } .pm-champ { display: block; width: 46px; height: 46px; border-radius: 4px; border: 1px solid rgba(120, 90, 40, 0.5); background: rgba(0, 0, 0, 0.35); } .pm-level { position: absolute; left: -3px; bottom: -3px; min-width: 17px; padding: 0 3px; border-radius: 9px; background: rgba(4, 8, 14, 0.92); border: 1px solid rgba(200, 170, 110, 0.45); color: var(--gold-3); font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; } .pm-mini { display: flex; flex-direction: column; gap: 3px; flex: none; } .pm-mini img { display: block; width: 21px; height: 21px; border-radius: 3px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.16); } .pm-runes img { border-radius: 50%; } .pm-mini img.empty { visibility: hidden; } /* what they did */ .pm-score { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 84px; } .pm-kda { font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .pm-kda .d { color: #d78f9c; } .pm-kda .sep { color: rgba(160, 155, 140, 0.45); margin: 0 3px; font-weight: 500; } .pm-ratio { font-size: 11.5px; color: rgba(160, 155, 140, 0.8); font-variant-numeric: tabular-nums; } .pm-ratio.high { color: #f0c26b; } /* what they finished with */ .pm-items { display: flex; gap: 3px; flex: none; } .pm-item { width: 23px; height: 23px; border-radius: 3px; background: rgba(200, 170, 110, 0.07); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.08); overflow: hidden; flex: none; } .pm-item img { display: block; width: 100%; height: 100%; } .pm-trinket { border-radius: 50%; margin-left: 3px; } /* whatever the game is remembered for */ .pm-marks { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } /* the shared badge is sized for the card hover overlay, where it sits over splash art at a third of this size; here it has room to be read */ .pp .badge { font-size: 9.5px; padding: 1px 5px; letter-spacing: 0.1em; } /* a multikill is a moment rather than a verdict on the game, so it takes the theme's blue rather than competing with MVP's gold — except a penta, which has earned the gold */ .badge.multi { color: #7ea8dd; border-color: rgba(126, 168, 221, 0.55); } .badge.multi.penta { color: #f0c26b; box-shadow: 0 0 9px rgba(240, 194, 107, 0.35); } /* the supporting numbers */ .pm-stats { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pm-stat { font-size: 11.5px; color: rgba(160, 155, 140, 0.8); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-stat.good { color: #6fcf97; } .pm-stat.bad { color: #d78f9c; } /* both sides, the player's own team in the left column */ .pm-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; } .pm-team { list-style: none; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pm-mate { display: flex; align-items: center; gap: 5px; min-width: 0; } .pm-mate img { width: 15px; height: 15px; border-radius: 2px; flex: none; background: rgba(0, 0, 0, 0.4); } .pm-mate span { font-size: 10.5px; color: rgba(160, 155, 140, 0.68); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-mate.me span { color: var(--gold-3); font-weight: 600; } /* what the game is remembered for, in a word */ .pm-tag { font-family: var(--font-ui); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 9px; white-space: nowrap; color: rgba(160, 155, 140, 0.9); background: rgba(160, 155, 140, 0.1); box-shadow: inset 0 0 0 1px rgba(160, 155, 140, 0.2); } .pm-tag.gold { color: #f0c26b; background: rgba(240, 194, 107, 0.12); box-shadow: inset 0 0 0 1px rgba(240, 194, 107, 0.35); } .pm-tag.blue { color: #7ea8dd; background: rgba(126, 168, 221, 0.12); box-shadow: inset 0 0 0 1px rgba(126, 168, 221, 0.32); } .pm-tag.good { color: #6fcf97; background: rgba(111, 207, 151, 0.12); box-shadow: inset 0 0 0 1px rgba(111, 207, 151, 0.3); } .pm-tag.bad { color: #d78f9c; background: rgba(215, 143, 156, 0.12); box-shadow: inset 0 0 0 1px rgba(215, 143, 156, 0.3); } /* where their damage placed in the lobby */ .pm-rank { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: rgba(160, 155, 140, 0.85); font-variant-numeric: tabular-nums; } .pm-rank.top { color: #f0c26b; } .pm-laning b { font-weight: 700; color: var(--text); } .pm-laning b.good { color: #6fcf97; } .pm-laning b.bad { color: #d78f9c; } .pm-laning-sep { color: rgba(160, 155, 140, 0.45); } /* ---- the game, opened out ---- */ .pm-expand { align-self: stretch; display: flex; align-items: center; justify-content: center; width: 26px; padding: 0; border: 0; border-radius: 3px; background: rgba(200, 170, 110, 0.06); color: rgba(160, 155, 140, 0.7); cursor: pointer; transition: background 0.15s, color 0.15s; } .pm-expand svg { width: 15px; height: 15px; transition: transform 0.18s; } .pm-expand:hover { background: rgba(200, 170, 110, 0.14); color: var(--gold-3); } .pm-match.win .pm-expand { background: rgba(111, 207, 151, 0.08); } .pm-match.loss .pm-expand { background: rgba(215, 143, 156, 0.08); } .pm-match.open .pm-expand svg { transform: rotate(180deg); } .pm-match.open .pm-expand { color: var(--gold-3); } .pm-detail { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(200, 170, 110, 0.14); overflow-x: auto; } .pm-detail[hidden] { display: none; } .pm-detail-note { font-size: 11.5px; color: rgba(160, 155, 140, 0.7); padding: 4px 2px; } .pm-side { min-width: 560px; } .pm-side-head { display: flex; align-items: baseline; gap: 12px; padding: 2px 4px 5px; font-size: 11px; color: rgba(160, 155, 140, 0.75); font-variant-numeric: tabular-nums; } .pm-side-res { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.06em; font-size: 11.5px; } .pm-side.win .pm-side-res { color: #6fcf97; } .pm-side.loss .pm-side-res { color: #d78f9c; } .pm-side-obj { margin-left: auto; letter-spacing: 0.04em; } .pm-board { list-style: none; display: flex; flex-direction: column; gap: 2px; } .pm-brow { display: grid; grid-template-columns: 74px minmax(70px, 1fr) 74px 78px 74px 26px 172px; align-items: center; gap: 8px; padding: 3px 4px; border-left: 2px solid transparent; border-radius: 2px; } .pm-side.win .pm-brow { background: rgba(78, 158, 110, 0.09); } .pm-side.loss .pm-brow { background: rgba(161, 89, 106, 0.09); } .pm-brow.me { border-left-color: var(--gold-2); background: rgba(200, 170, 110, 0.13); } .pm-bload { display: flex; align-items: center; gap: 3px; } .pm-bchamp { display: block; width: 28px; height: 28px; border-radius: 3px; border: 1px solid rgba(120, 90, 40, 0.45); background: rgba(0, 0, 0, 0.35); } .pm-brow .pm-level { min-width: 14px; font-size: 8.5px; line-height: 12px; left: -2px; bottom: -2px; } .pm-btiny { display: flex; flex-direction: column; gap: 2px; } .pm-btiny img { display: block; width: 13px; height: 13px; border-radius: 2px; background: rgba(0, 0, 0, 0.4); } .pm-btiny.ru img { border-radius: 50%; } .pm-btiny img.empty { visibility: hidden; } .pm-bwho { display: flex; flex-direction: column; min-width: 0; } .pm-bname { font-size: 11px; color: rgba(200, 195, 180, 0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-brow.me .pm-bname { color: var(--gold-3); font-weight: 700; } .pm-bpos { font-size: 9.5px; color: rgba(160, 155, 140, 0.55); letter-spacing: 0.04em; } .pm-bscore { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; } .pm-bkda { font-size: 11.5px; font-weight: 600; color: var(--text); } .pm-bratio { font-size: 9.5px; color: rgba(160, 155, 140, 0.6); } .pm-bdmg { display: flex; flex-direction: column; gap: 3px; font-variant-numeric: tabular-nums; } .pm-bdmg > span:first-child { font-size: 10.5px; color: rgba(160, 155, 140, 0.85); } .pm-bbar { display: block; height: 4px; border-radius: 2px; background: rgba(160, 155, 140, 0.16); overflow: hidden; } .pm-bbar span { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #c8aa6e, #f0c26b); } .pm-side.loss .pm-bbar span { background: linear-gradient(90deg, #a1596a, #d78f9c); } .pm-bcs { display: flex; flex-direction: column; font-size: 10.5px; color: rgba(160, 155, 140, 0.8); font-variant-numeric: tabular-nums; } .pm-bper { font-size: 9.5px; color: rgba(160, 155, 140, 0.5); } .pm-bvis { font-size: 10.5px; color: rgba(160, 155, 140, 0.6); text-align: center; font-variant-numeric: tabular-nums; } .pm-bitems { display: flex; gap: 2px; } .pm-bitem { width: 20px; height: 20px; border-radius: 3px; background: rgba(200, 170, 110, 0.07); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.08); overflow: hidden; flex: none; } .pm-bitem img { display: block; width: 100%; height: 100%; } .pm-btrinket { border-radius: 50%; margin-left: 3px; } /* Too narrow for the other nine players: the row keeps everything that describes this player's own game and drops the scoreboard. */ @container games (max-width: 720px) { .pm-match { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 132px) 26px; } .pm-teams { display: none; } } /* Narrower still: the numbers move under the build rather than squeezing the champion and the score into nothing. */ @container games (max-width: 480px) { .pm-match { grid-template-columns: 88px minmax(0, 1fr) 26px; gap: 6px 10px; padding: 8px 10px; } .pm-when { grid-row: 1 / span 2; } .pm-stats { grid-column: 2; flex-flow: row wrap; gap: 2px 12px; } .pm-expand { grid-row: 1 / span 2; } } @media (max-width: 1280px) { .pp-body { grid-template-columns: 1.5fr 1fr; } } /* ---- panels and tiles ---- */ /* the shared .panel is sized for the old side-by-side row; here it is a card */ .pp .panel { flex: none; padding: 15px 16px 16px; background: linear-gradient(180deg, rgba(9, 16, 26, 0.85), rgba(4, 9, 16, 0.6)); border: 1px solid rgba(120, 90, 40, 0.35); } .pp .best { flex: 1 1 auto; padding: 13px 10px 12px; } .pp .best-val { font-size: clamp(18px, 1.7vw, 24px); } .pp .best-label { font-size: 9px; } .pp .best-detail { font-size: 11px; } /* ---- playstyle bars ---- */ .pp-play { display: flex; flex-direction: column; gap: 12px; } .pbar-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 4px; } .pbar-label { color: rgba(160, 155, 140, 0.85); letter-spacing: 0.03em; } .pbar-val { color: var(--gold-3); font-weight: 600; font-variant-numeric: tabular-nums; } .pbar-track { height: 4px; background: rgba(200, 170, 110, 0.12); border-radius: 2px; overflow: hidden; } .pbar-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #f0dcb4); } .pbar-track i.bad { background: linear-gradient(90deg, #a1596a, #e9b6c1); } .pp-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 15px; } .pp-fact { text-align: center; padding: 10px 6px; border: 1px solid rgba(120, 90, 40, 0.22); } .pp-fact b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--gold-3); } .pp-fact span { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(160, 155, 140, 0.7); } /* ---- where they play ---- */ .pp-q { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(120, 90, 40, 0.16); } .pp-q:last-child { border-bottom: none; } .pp-q-name { flex: 1; font-size: 13px; color: var(--text); } .pp-q-games { font-size: 11.5px; color: rgba(160, 155, 140, 0.7); } .pp-q-wr { font-weight: 700; font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pp-q-wr.good { color: #6fcf97; } .pp-q-wr.bad { color: #d78f9c; } .pp-q-wr.even { color: rgba(200, 170, 110, 0.9); } /* ---- champion pool rows ---- */ .pool { list-style: none; display: flex; flex-direction: column; gap: 7px; } .pool-row { display: flex; align-items: center; gap: 10px; } .pool-row img { width: 32px; height: 32px; flex: none; border-radius: 3px; border: 1px solid rgba(120, 90, 40, 0.5); object-fit: cover; } .pool-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.22; } .pool-name { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pool-meta { font-size: 11.5px; color: rgba(160, 155, 140, 0.78); } .pool-bar { display: block; height: 2px; margin-top: 5px; background: rgba(200, 170, 110, 0.12); border-radius: 2px; overflow: hidden; } .pool-bar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(200, 170, 110, 0.55), rgba(240, 220, 180, 0.8)); } .pool-wr { font-family: var(--font-ui); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; flex: none; } .pool-wr.good { color: #6fcf97; } .pool-wr.bad { color: #d78f9c; } .pool-wr.even { color: rgba(200, 170, 110, 0.9); } /* a rate off two games is not a ranking; say so quietly rather than hiding it */ .pool-row.thin { opacity: 0.55; } .pool-row.thin .pool-wr { color: rgba(160, 155, 140, 0.85); } /* ---- column heads, chips, filters ---- */ .pm-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid rgba(120, 90, 40, 0.4); } .pm-col-head .pp-h { margin-bottom: 0; } .pm-chips { display: flex; gap: 4px; flex-wrap: wrap; } .pm-chip { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; cursor: pointer; color: rgba(160, 155, 140, 0.85); background: rgba(9, 16, 26, 0.7); border: 1px solid rgba(120, 90, 40, 0.35); border-radius: 2px; transition: color 0.15s, border-color 0.15s, background 0.15s; } .pm-chip:hover { color: var(--gold-3); border-color: rgba(200, 170, 110, 0.6); } .pm-chip.on { color: #0a1420; background: linear-gradient(180deg, #f0dcb4, #c8aa6e); border-color: var(--gold-2); } /* a queue with no games in this window keeps its place, so the row of filters never shifts under the pointer, but says plainly that there is nothing there */ .pm-chip:disabled { opacity: 0.35; pointer-events: none; } .pm-formline { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.03em; color: var(--muted); } .pm-formstat { font-weight: 600; color: var(--gold-3); } .pm-formstat.good { color: #6fcf97; } .pm-formstat.bad { color: #d78f9c; } .pm-formstat.gold { color: #f0c26b; } .pm-formstat.muted { color: rgba(160, 155, 140, 0.8); font-weight: 500; } .pm-formsep { color: rgba(160, 155, 140, 0.4); } .pm-more { margin-top: 12px; padding: 7px 13px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-2); background: none; border: 1px solid rgba(120, 90, 40, 0.45); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .pm-more:hover { color: var(--gold-3); border-color: var(--gold-2); } /* ---- mastery ---- */ .pm-mastery { margin-top: 22px; } .pm-mastery-head { font-family: var(--serif); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: var(--gold-2); padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid rgba(120, 90, 40, 0.28); } .pm-mastery-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .pm-mastery-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; font-size: 13px; } .pm-mastery-list img { width: 24px; height: 24px; border-radius: 2px; border: 1px solid rgba(120, 90, 40, 0.45); } .pm-m-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-m-lvl { font-size: 10px; color: rgba(160, 155, 140, 0.7); letter-spacing: 0.04em; } .pm-m-pts { color: var(--gold-3); font-variant-numeric: tabular-nums; font-weight: 600; } /* ---- the card-expands-into-the-page flight ---- */ /* A copy of the card art flown from the banner to the sidebar portrait, so the page reads as the card growing rather than a panel appearing over it. */ .pp-flyer { position: fixed; z-index: 70; margin: 0; object-fit: cover; object-position: 50% 18%; pointer-events: none; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9); } .pp-side, .pp-main { transition: opacity 0.3s ease; } .pp.flying .pp-side, .pp.flying .pp-main { opacity: 0; } /* ---- scrollbars ---- */ .pp ::-webkit-scrollbar { width: 8px; height: 8px; } .pp ::-webkit-scrollbar-track { background: rgba(3, 8, 15, 0.75); border-radius: 8px; } .pp ::-webkit-scrollbar-thumb { border-radius: 8px; background: linear-gradient(180deg, rgba(200, 170, 110, 0.5), rgba(120, 90, 40, 0.7)); border: 1px solid rgba(200, 170, 110, 0.18); } .pp ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(232, 205, 150, 0.75), rgba(160, 122, 55, 0.85)); } .pp * { scrollbar-width: thin; scrollbar-color: rgba(200, 170, 110, 0.45) rgba(3, 8, 15, 0.75); } .pp-back:focus-visible, .pp-close:focus-visible, .pm-chip:focus-visible, .pm-more:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; } .pp .heat-cell { width: 13px; height: 13px; border-radius: 3px; } .pp .heat-foot { margin-top: 10px; font-size: 11.5px; color: rgba(160, 155, 140, 0.85); } .pp .journey-svg { height: 104px; } /* ---- narrower screens ---- A first pass only: the phone layout is still to be designed. This keeps the page usable rather than broken at small sizes. */ @media (max-width: 1150px) { .pp-shell { grid-template-columns: 290px minmax(0, 1fr); } .pp-tiles { grid-template-columns: repeat(2, 1fr); } /* below this the two columns are too thin to sit together, so the stack drops under the games list and the whole main area scrolls as one */ .pp-body { grid-template-columns: 1fr; overflow-y: auto; } .pp-games-col .pm-list, .pp-side-col { overflow: visible; flex: none; } } @media (max-width: 820px) { .pp-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .pp-side { border-right: none; border-bottom: 1px solid rgba(120, 90, 40, 0.4); max-height: 46vh; } .pp-tiles { padding: 16px 66px 14px 16px; } .pp-body { padding: 0 16px 18px; } /* the row itself reflows on its own width, not the viewport — see the `games` container queries above */ .pm-champ { width: 42px; height: 42px; } } /* the plate above owns .team-sub now; this older rule would win on order */