.rcp-fe-lol-tft-daily-orb .header .title, .rcp-fe-lol-tft-daily-orb .orb-disabled-label, .rcp-fe-lol-tft-daily-orb .orb-timer-label, .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger { font-family: var(--font-display); } .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button { font-family: var(--font-body); } .rcp-fe-lol-tft-daily-orb .header .title, .rcp-fe-lol-tft-daily-orb .orb-disabled-label, .rcp-fe-lol-tft-daily-orb .orb-timer-label, .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger, .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button { -webkit-user-select: none; } .rcp-fe-lol-tft-daily-orb .header .title, .rcp-fe-lol-tft-daily-orb .orb-disabled-label, .rcp-fe-lol-tft-daily-orb .orb-timer-label, .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger, .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-daily-orb .header .title, .rcp-fe-lol-tft-daily-orb .orb-disabled-label, .rcp-fe-lol-tft-daily-orb .orb-timer-label, .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger { text-transform: uppercase; } .rcp-fe-lol-tft-daily-orb .header .title:lang(ko-kr), .rcp-fe-lol-tft-daily-orb .orb-disabled-label:lang(ko-kr), .rcp-fe-lol-tft-daily-orb .orb-timer-label:lang(ko-kr), .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger:lang(ko-kr), .rcp-fe-lol-tft-daily-orb .header .title:lang(ja-jp), .rcp-fe-lol-tft-daily-orb .orb-disabled-label:lang(ja-jp), .rcp-fe-lol-tft-daily-orb .orb-timer-label:lang(ja-jp), .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger:lang(ja-jp), .rcp-fe-lol-tft-daily-orb .header .title:lang(tr-tr), .rcp-fe-lol-tft-daily-orb .orb-disabled-label:lang(tr-tr), .rcp-fe-lol-tft-daily-orb .orb-timer-label:lang(tr-tr), .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger:lang(tr-tr), .rcp-fe-lol-tft-daily-orb .header .title:lang(el-gr), .rcp-fe-lol-tft-daily-orb .orb-disabled-label:lang(el-gr), .rcp-fe-lol-tft-daily-orb .orb-timer-label:lang(el-gr), .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger:lang(el-gr), .rcp-fe-lol-tft-daily-orb .header .title:lang(th-th), .rcp-fe-lol-tft-daily-orb .orb-disabled-label:lang(th-th), .rcp-fe-lol-tft-daily-orb .orb-timer-label:lang(th-th), .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger:lang(th-th), .rcp-fe-lol-tft-daily-orb .header .title:lang(zh-tw), .rcp-fe-lol-tft-daily-orb .orb-disabled-label:lang(zh-tw), .rcp-fe-lol-tft-daily-orb .orb-timer-label:lang(zh-tw), .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-daily-orb .header .title, .rcp-fe-lol-tft-daily-orb .orb-disabled-label, .rcp-fe-lol-tft-daily-orb .orb-timer-label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .rcp-fe-lol-tft-daily-orb .header .title:lang(ar-ae), .rcp-fe-lol-tft-daily-orb .orb-disabled-label:lang(ar-ae), .rcp-fe-lol-tft-daily-orb .orb-timer-label:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button { color: #0596aa; text-decoration: none; } .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button:hover, .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button.hover { color: #cdfafa; } .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-tft/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button:hover:after { background-color: #cdfafa; } .rcp-fe-lol-tft-daily-orb { position: absolute; top: 114px; left: 35px; } .rcp-fe-lol-tft-daily-orb:lang(ar-ae) { left: auto; right: 35px; } .rcp-fe-lol-tft-daily-orb .orb-contents { border: 2px solid #32281e; margin-top: 10px; width: 346px; height: 249px; text-align: center; background: url("/fe/lol-tft/images/orb-bg.png") no-repeat; background-position: 50% 40%; background-size: contain; background-color: rgba(1,10,19,0.6); } .rcp-fe-lol-tft-daily-orb .orb { display: block; width: 128px; height: 128px; margin: 25px auto 0; background: url("/fe/lol-tft/images/orb-0.png") no-repeat center/contain; } .rcp-fe-lol-tft-daily-orb .orb.level-1 { background-image: url("/fe/lol-tft/images/orb-1.png"); } .rcp-fe-lol-tft-daily-orb .orb.level-2 { background-image: url("/fe/lol-tft/images/orb-2.png"); } .rcp-fe-lol-tft-daily-orb .orb.level-3 { background-image: url("/fe/lol-tft/images/orb-3.png"); } .rcp-fe-lol-tft-daily-orb .orb.level-4 { background-image: url("/fe/lol-tft/images/orb-4.png"); } .rcp-fe-lol-tft-daily-orb .orb.level-5 { background-image: url("/fe/lol-tft/images/orb-5.png"); } .rcp-fe-lol-tft-daily-orb .orb.disabled { background-image: url("/fe/lol-tft/images/orb-4.png"); -webkit-filter: saturate(0.2); } .rcp-fe-lol-tft-daily-orb .orb-disabled-label { color: #785a28; margin: 18px 25px; } .rcp-fe-lol-tft-daily-orb .orb-timer-label { color: #785a28; margin: 8px 0; } .rcp-fe-lol-tft-daily-orb .progress-bar-wrapper { position: absolute; bottom: 45px; left: 0; right: 0; } .rcp-fe-lol-tft-daily-orb .progress-bar-wrapper::before, .rcp-fe-lol-tft-daily-orb .progress-bar-wrapper::after { content: ""; position: absolute; display: block; height: 2px; width: 50px; top: 3px; left: 0 ; background-image: linear-gradient(to right, #32281e, #32281e 50%, transparent); } .rcp-fe-lol-tft-daily-orb .progress-bar-wrapper::after { left: auto ; right: 0 ; background-image: linear-gradient(to left, #32281e, #32281e 50%, transparent); } .rcp-fe-lol-tft-daily-orb .progress-bar { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; } .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .progress-bar-tick { background-color: #3c3c41; -webkit-filter: brightness(0.9) opacity(0.5); } .rcp-fe-lol-tft-daily-orb .progress-bar.leveling-disabled .orb-leveling-tooltip-trigger { display: block; width: 20px; position: absolute; left: 50%; transform: translateX(-50%); top: -12px; color: #a09b8c; } .rcp-fe-lol-tft-daily-orb .progress-bar-tick { width: 42px; height: 6px; background-color: #0a323c; margin: 0 3px; } .rcp-fe-lol-tft-daily-orb .progress-bar-tick.complete { background-image: linear-gradient(#049cff, #243f69); } .rcp-fe-lol-tft-daily-orb .orb-buttons { position: absolute; bottom: -13px; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; } .rcp-fe-lol-tft-daily-orb .orb-buttons lol-uikit-flat-button { margin: 0 3px; width: 140px; } .rcp-fe-lol-tft-daily-orb .orb-buttons .tft-patch-notes-button { direction: ltr; position: absolute; bottom: -20px; margin: auto; width: 100%; left: 0; cursor: pointer; } .rcp-fe-lol-tft-orb-leveling-disabled-tooltip-header, .rcp-fe-lol-tft-orb-leveling-disabled-tooltip-body { text-align: left; } .rcp-fe-lol-tft-weekly-missions .header .title { font-family: var(--font-display); } .rcp-fe-lol-tft-weekly-missions .header .unprocessed-games-container { font-family: var(--font-body); } .rcp-fe-lol-tft-weekly-missions .header .title, .rcp-fe-lol-tft-weekly-missions .header .unprocessed-games-container { -webkit-user-select: none; } .rcp-fe-lol-tft-weekly-missions .header .title, .rcp-fe-lol-tft-weekly-missions .header .unprocessed-games-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-weekly-missions .header .title { text-transform: uppercase; } .rcp-fe-lol-tft-weekly-missions .header .title:lang(ko-kr), .rcp-fe-lol-tft-weekly-missions .header .title:lang(ja-jp), .rcp-fe-lol-tft-weekly-missions .header .title:lang(tr-tr), .rcp-fe-lol-tft-weekly-missions .header .title:lang(el-gr), .rcp-fe-lol-tft-weekly-missions .header .title:lang(th-th), .rcp-fe-lol-tft-weekly-missions .header .title:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-tft-weekly-missions .header .title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .rcp-fe-lol-tft-weekly-missions .header .title:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-weekly-missions .header .unprocessed-games-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-weekly-missions .header .unprocessed-games-container:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-tft-weekly-missions .header .unprocessed-games-container:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-weekly-missions { position: absolute; top: 114px; right: 35px; width: 346px; height: 290px; } .rcp-fe-lol-tft-weekly-missions:lang(ar-ae) { right: auto; left: 35px; } .rcp-fe-lol-tft-weekly-missions .header .unprocessed-games-container { position: absolute; display: flex; top: 0; right: 0; align-items: center; } .rcp-fe-lol-tft-weekly-missions .header .unprocessed-games { margin-top: 3px; } .rcp-fe-lol-tft-weekly-missions .unprocessed-games-container .clock-icon { background: url("/fe/lol-tft/images/clock-icon.png") no-repeat center/contain; display: inline-block; width: 18px; height: 18px; margin-right: 5px; } .rcp-fe-lol-tft-weekly-missions .missions { border: 2px solid #32281e; margin-top: 10px; padding: 3px 10px; height: 262px; display: flex; flex-direction: column; justify-content: space-between; background-color: rgba(1,10,19,0.6); } .rcp-fe-lol-tft-weekly-missions .missions > *:not(:last-child)::after { content: ''; position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background-color: #1e2328; } .rcp-fe-lol-tft-unprocessed-games-tooltip-note { color: #3c3c41; } .rcp-fe-lol-tft-unprocessed-games-tooltip-header, .rcp-fe-lol-tft-unprocessed-games-tooltip-body, .rcp-fe-lol-tft-unprocessed-games-tooltip-note { text-align: left; } .rcp-fe-lol-tft-mission-card .mission-footer .expiry, .rcp-fe-lol-tft-mission-card .mission-footer .reward-description, .rcp-fe-lol-tft-mission-card .progress-dials .or-separator, .rcp-fe-lol-tft-mission-card lol-uikit-radial-progress .top, .rcp-fe-lol-tft-mission-card .description, .rcp-fe-lol-tft-mission-card .points { font-family: var(--font-body); } .rcp-fe-lol-tft-mission-card .mission-footer .expiry, .rcp-fe-lol-tft-mission-card .mission-footer .reward-description, .rcp-fe-lol-tft-mission-card .progress-dials .or-separator, .rcp-fe-lol-tft-mission-card lol-uikit-radial-progress .top, .rcp-fe-lol-tft-mission-card .description, .rcp-fe-lol-tft-mission-card .points { -webkit-user-select: none; } .rcp-fe-lol-tft-mission-card .mission-footer .expiry, .rcp-fe-lol-tft-mission-card .mission-footer .reward-description, .rcp-fe-lol-tft-mission-card .progress-dials .or-separator, .rcp-fe-lol-tft-mission-card lol-uikit-radial-progress .top, .rcp-fe-lol-tft-mission-card .description, .rcp-fe-lol-tft-mission-card .points { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-mission-card .mission-footer .expiry, .rcp-fe-lol-tft-mission-card .mission-footer .reward-description, .rcp-fe-lol-tft-mission-card .progress-dials .or-separator, .rcp-fe-lol-tft-mission-card .description, .rcp-fe-lol-tft-mission-card .points { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-mission-card .mission-footer .expiry:lang(ja-jp), .rcp-fe-lol-tft-mission-card .mission-footer .reward-description:lang(ja-jp), .rcp-fe-lol-tft-mission-card .progress-dials .or-separator:lang(ja-jp), .rcp-fe-lol-tft-mission-card .description:lang(ja-jp), .rcp-fe-lol-tft-mission-card .points:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-tft-mission-card .mission-footer .expiry:lang(ar-ae), .rcp-fe-lol-tft-mission-card .mission-footer .reward-description:lang(ar-ae), .rcp-fe-lol-tft-mission-card .progress-dials .or-separator:lang(ar-ae), .rcp-fe-lol-tft-mission-card .description:lang(ar-ae), .rcp-fe-lol-tft-mission-card .points:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-mission-card lol-uikit-radial-progress .top { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-mission-card lol-uikit-radial-progress .top:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-tft-mission-card lol-uikit-radial-progress .top:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-mission-card { position: relative; height: 84px; flex-grow: 1; } .rcp-fe-lol-tft-mission-card .mission-unavailable, .rcp-fe-lol-tft-mission-card .mission-content { display: flex; align-items: center; justify-content: space-between; position: relative; height: 54px; margin-top: 8px; } .rcp-fe-lol-tft-mission-card .mission-unavailable { height: 70px; } .rcp-fe-lol-tft-mission-card .mission-footer { height: 16px; position: relative; } .rcp-fe-lol-tft-mission-card .mission-footer .expiry { color: #3c3c41; text-align: left ; position: absolute; left: 0 ; right: auto ; top: 0; } .rcp-fe-lol-tft-mission-card .mission-footer .reward-description { position: absolute; right: 0 ; left: auto ; top: 0; width: 50%; text-align: right ; } .rcp-fe-lol-tft-mission-card .progress-dials { display: flex; align-items: center; } .rcp-fe-lol-tft-mission-card .progress-dials .or-separator { height: 16px; position: relative; margin: 0 3px; opacity: 0.8; white-space: nowrap; } .rcp-fe-lol-tft-mission-card .progress-dials .or-separator::before, .rcp-fe-lol-tft-mission-card .progress-dials .or-separator::after { content: ""; display: block; position: absolute; left: 50%; width: 1px; height: 14px; background-color: #1e2328; } .rcp-fe-lol-tft-mission-card .progress-dials .or-separator::before { bottom: 18px; } .rcp-fe-lol-tft-mission-card .progress-dials .or-separator::after { top: 18px; } .rcp-fe-lol-tft-mission-card lol-uikit-radial-progress { width: 54px; height: 54px; } .rcp-fe-lol-tft-mission-card lol-uikit-radial-progress .top { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); padding-top: 2px; } .rcp-fe-lol-tft-mission-card .description { flex-grow: 2; padding: 0 10px; word-wrap: break-word; width: 220px; } .rcp-fe-lol-tft-mission-card .sleepy .description { padding: 0 10px 0; } .rcp-fe-lol-tft-mission-card .mission-completed { padding-bottom: 10px; } .rcp-fe-lol-tft-mission-card .reward { text-align: center; } .rcp-fe-lol-tft-mission-card .reward-icon { border: thin solid #3c3c41; box-shadow: inset 0 0 0 1px #000; width: 48px; height: 48px; } .rcp-fe-lol-tft-mission-card .sleeping-poro { background: url("/fe/lol-tft/images/sleeping-poro.png") no-repeat center/contain; display: inline-block; width: 50px; height: 50px; } .rcp-fe-lol-tft-mission-card .claim { display: flex; align-items: center; justify-content: center; background: url("/fe/lol-tft/images/mission-claim-magic.png") no-repeat center/contain; position: absolute; width: 100%; height: 100%; top: 0; } .rcp-fe-lol-tft-mission-card .claim-button { display: block; margin-top: -6px; box-shadow: 0px 0px 20px 5px #005a82; } .rcp-fe-lol-tft-mission-card .claim-button:hover { box-shadow: 0px 0px 30px 5px #005a82; -webkit-filter: brightness(125%); } .rcp-fe-lol-tft-mission-card .claim-button:active { -webkit-filter: brightness(80%); } .rcp-fe-lol-tft-mission-card .claimable-background { opacity: 0.25; } .rcp-fe-lol-tft-battle-pass .header .title { font-family: var(--font-display); } .rcp-fe-lol-tft-battle-pass .header .title { -webkit-user-select: none; } .rcp-fe-lol-tft-battle-pass .header .title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-battle-pass .header .title { text-transform: uppercase; } .rcp-fe-lol-tft-battle-pass .header .title:lang(ko-kr), .rcp-fe-lol-tft-battle-pass .header .title:lang(ja-jp), .rcp-fe-lol-tft-battle-pass .header .title:lang(tr-tr), .rcp-fe-lol-tft-battle-pass .header .title:lang(el-gr), .rcp-fe-lol-tft-battle-pass .header .title:lang(th-th), .rcp-fe-lol-tft-battle-pass .header .title:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-tft-battle-pass .header .title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .rcp-fe-lol-tft-battle-pass .header .title:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-battle-pass { position: absolute; bottom: 50px; left: 16px; width: 1024px; height: 230px; } .rcp-fe-lol-tft-battle-pass .header { display: flex; justify-content: center; margin: 8px 20px; } .rcp-fe-lol-tft-battle-pass .header .title { line-height: 30px; white-space: nowrap; } .rcp-fe-lol-tft-battle-pass .header .line-break { max-width: 715px; display: flex; flex-direction: column; justify-content: center; margin: 0 8px; } .rcp-fe-lol-tft-battle-pass .header .line-break-img { width: 100%; display: block; transform: none ; } .rcp-fe-lol-tft-progression-milestone-list { direction: ltr ; } .rcp-fe-lol-tft-progression-milestone-list .milestones-wrapper { display: flex; justify-content: center; } .rcp-fe-lol-tft-progression-milestone-list .milestones { display: flex; overflow-x: hidden; overflow-y: hidden; white-space: nowrap; } .rcp-fe-lol-tft-progression-milestone-list .left-button-group, .rcp-fe-lol-tft-progression-milestone-list .right-button-group { display: flex; justify-content: center; flex-direction: column; } .rcp-fe-lol-tft-progression-milestone-list .left-button-group .arrow, .rcp-fe-lol-tft-progression-milestone-list .right-button-group .arrow { width: 30px; } .rcp-fe-lol-tft-progression-milestone .progress-indicator-info { font-family: var(--font-body); } .rcp-fe-lol-tft-progression-milestone .progress-indicator-info { -webkit-user-select: none; } .rcp-fe-lol-tft-progression-milestone .progress-indicator-info { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-progression-milestone .progress-indicator-info { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-progression-milestone .progress-indicator-info:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-progression-milestone { height: 216px; display: inline-block; } .rcp-fe-lol-tft-progression-milestone .rewards { position: relative; height: 150px; } .rcp-fe-lol-tft-progression-milestone .progress-bar-container { position: relative; width: 148px; height: 54px; } .rcp-fe-lol-tft-progression-milestone .progress-bar-container:before { content: ""; position: absolute; width: 100%; height: 100%; background: url("/fe/lol-tft/images/pass-progress-bar.png") no-repeat center/contain; } .rcp-fe-lol-tft-progression-milestone .progress-bar-container.first-bar:before { background: url("/fe/lol-tft/images/pass-progress-bar-end.png") no-repeat center/contain; } .rcp-fe-lol-tft-progression-milestone .progress-bar-container.last-bar:before { background: url("/fe/lol-tft/images/pass-progress-bar-end.png") no-repeat center/contain; transform: scaleX(-1); } .rcp-fe-lol-tft-progression-milestone .milestone-container { position: relative; left: 38px; bottom: 58px; width: 72px; height: 72px; } .rcp-fe-lol-tft-progression-milestone .progress-bar { position: absolute; top: 25px; left: -62px; max-width: 124px; height: 4px; background-color: #0f5f87; border-radius: 1px; } .rcp-fe-lol-tft-progression-milestone .progress-bar.in-progress { background: linear-gradient(to right, #0f5f87 50%, #1bd8e3 100%); } .rcp-fe-lol-tft-progression-milestone .progress-bar.progress-complete { left: 86px; width: 54px; } .rcp-fe-lol-tft-progression-milestone .progress-bar.progress-complete:after { content: ""; left: 100%; position: absolute; height: 0; width: 0; border: solid transparent; border-left-color: #0f5f87; border-width: 2px; } .rcp-fe-lol-tft-progression-milestone .first-bar .progress-bar::after { content: ""; right: 100%; position: absolute; height: 0; width: 0; border: solid transparent; border-right-color: #0f5f87; border-width: 2px; } .rcp-fe-lol-tft-progression-milestone .progress-indicator-container { position: absolute; top: 0; right: 0; } .rcp-fe-lol-tft-progression-milestone .progress-indicator-line { position: absolute; width: 1px; height: 16px; background: linear-gradient(#cdfafa, #fff 20%, transparent); } .rcp-fe-lol-tft-progression-milestone .progress-indicator-info { direction: ltr; position: absolute; top: 18px; transform: translateX(-50%); } .rcp-fe-lol-tft-progression-milestone .progress-indicator-points-earned { color: #cdfafa; } .rcp-fe-lol-tft-progression-milestone .progress-indicator-points-required { color: #0596aa; } .rcp-fe-lol-tft-progression-milestone .milestone-complete { position: absolute; bottom: 5px; z-index: 1; width: 72px; } .rcp-fe-lol-tft-progression-milestone .milestone-locked { position: absolute; top: 15px; left: 20px; width: 33px; } .rcp-fe-lol-tft-progression-reward .reward, .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame { font-family: var(--font-display); } .rcp-fe-lol-tft-progression-reward .claim-label { font-family: var(--font-body); } .rcp-fe-lol-tft-progression-reward .reward, .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame, .rcp-fe-lol-tft-progression-reward .claim-label { -webkit-user-select: none; } .rcp-fe-lol-tft-progression-reward .reward, .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame, .rcp-fe-lol-tft-progression-reward .claim-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-progression-reward .reward, .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame { text-transform: uppercase; } .rcp-fe-lol-tft-progression-reward .reward:lang(ko-kr), .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame:lang(ko-kr), .rcp-fe-lol-tft-progression-reward .reward:lang(ja-jp), .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame:lang(ja-jp), .rcp-fe-lol-tft-progression-reward .reward:lang(tr-tr), .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame:lang(tr-tr), .rcp-fe-lol-tft-progression-reward .reward:lang(el-gr), .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame:lang(el-gr), .rcp-fe-lol-tft-progression-reward .reward:lang(th-th), .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame:lang(th-th), .rcp-fe-lol-tft-progression-reward .reward:lang(zh-tw), .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-progression-reward .reward { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .rcp-fe-lol-tft-progression-reward .reward:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-progression-reward .claim-label { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-progression-reward .claim-label:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-progression-reward { position: absolute; width: 100%; height: 100%; } .rcp-fe-lol-tft-progression-reward .reward { position: absolute; top: 25px; left: 24px; width: 100px; height: 100px; text-align: center; } .rcp-fe-lol-tft-progression-reward .reward:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #081010; } .rcp-fe-lol-tft-progression-reward .reward-frame { direction: ltr; position: absolute; width: 148px; height: 150px; left: -24px; top: -25px; pointer-events: none; } .rcp-fe-lol-tft-progression-reward .reward-image { position: absolute; left: 0; top: 0px; height: 100%; width: 100%; pointer-events: none; } .rcp-fe-lol-tft-progression-reward .label { position: absolute; bottom: 12px; left: 45px; width: 60px; pointer-events: all; line-height: 28px; } .rcp-fe-lol-tft-progression-reward .state-acquired .reward-frame { background: url("/fe/lol-tft/images/pass-reward-frame-default.png") no-repeat center/contain; } .rcp-fe-lol-tft-progression-reward .state-acquired:hover .reward-frame { background: url("/fe/lol-tft/images/pass-reward-frame-default-hover.png") no-repeat center/contain; } .rcp-fe-lol-tft-progression-reward .state-unclaimed { cursor: pointer; transition: all 0.25s ease; } .rcp-fe-lol-tft-progression-reward .state-unclaimed[disabled] { pointer-events: none; -webkit-filter: grayscale(75%); cursor: default; } .rcp-fe-lol-tft-progression-reward .state-unclaimed .reward-frame { background: url("/fe/lol-tft/images/pass-reward-frame-claim.png") no-repeat center/contain; } .rcp-fe-lol-tft-progression-reward .state-unclaimed:hover .reward-frame { background: url("/fe/lol-tft/images/pass-reward-frame-claim-hover.png") no-repeat center/contain; } .rcp-fe-lol-tft-progression-reward .state-in-progress { top: 7px; left: 15px; width: 118px; height: 118px; } .rcp-fe-lol-tft-progression-reward .state-in-progress .reward-frame { left: -14px; top: -8px; background: url("/fe/lol-tft/images/pass-reward-frame-next.png") no-repeat center/contain; color: #c89b3c; } .rcp-fe-lol-tft-progression-reward .state-in-progress:hover .reward-frame { background: url("/fe/lol-tft/images/pass-reward-frame-next-hover.png") no-repeat center/contain; color: #f0e6d2; } .rcp-fe-lol-tft-progression-reward .state-unavailable .reward-image { -webkit-filter: saturate(0.5) opacity(0.5); transition: -webkit-filter 0.1s linear; } .rcp-fe-lol-tft-progression-reward .state-unavailable .reward-frame { background: url("/fe/lol-tft/images/pass-reward-frame-locked.png") no-repeat center/contain; } .rcp-fe-lol-tft-progression-reward .state-unavailable .label { color: #5c5b57; } .rcp-fe-lol-tft-progression-reward .state-unavailable:hover { -webkit-filter: brightness(120%); } .rcp-fe-lol-tft-progression-reward .state-unavailable:hover .reward-image { -webkit-filter: saturate(1) opacity(1); } .rcp-fe-lol-tft-progression-reward .claim-label { position: absolute; top: -26px; left: 0; width: 100%; pointer-events: none; text-align: center; text-transform: uppercase; font-weight: 900; letter-spacing: 0.05em; background: linear-gradient(to bottom, #0f5f87 10%, #1bd8e3 70%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .rcp-fe-lol-tft-progression-reward .particles { position: absolute; top: -25px; left: -24px; pointer-events: none; } .rcp-fe-lol-tft-progression-reward .particles img { position: absolute; width: 148px; height: 148px; top: 0; left: 0; } .rcp-fe-lol-tft-progression-reward .particles img:nth-child(1) { animation: change-background-1 10s linear alternate infinite; } .rcp-fe-lol-tft-progression-reward .particles img:nth-child(2) { animation: change-background-2 10s linear alternate infinite; } .rcp-fe-lol-tft-progression-reward .particles img:nth-child(3) { animation: change-background-3 10s linear alternate infinite; } .rcp-fe-lol-tft-progression-reward .particles img:nth-child(4) { animation: change-background-4 10s linear alternate infinite; } .rcp-fe-lol-tft-progression-reward .particles img:nth-child(5) { animation: change-background-5 10s linear alternate infinite; } @-moz-keyframes change-background-1 { 0% { opacity: 1; } 50% { opacity: 1; } 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { opacity: 0; } } @-webkit-keyframes change-background-1 { 0% { opacity: 1; } 50% { opacity: 1; } 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { opacity: 0; } } @-o-keyframes change-background-1 { 0% { opacity: 1; } 50% { opacity: 1; } 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { opacity: 0; } } @keyframes change-background-1 { 0% { opacity: 1; } 50% { opacity: 1; } 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { opacity: 0; } } @-moz-keyframes change-background-2 { 10% { opacity: 1; } 60% { opacity: 1; } 0%, 20%, 30%, 40%, 50%, 70%, 80%, 90%, 100% { opacity: 0; } } @-webkit-keyframes change-background-2 { 10% { opacity: 1; } 60% { opacity: 1; } 0%, 20%, 30%, 40%, 50%, 70%, 80%, 90%, 100% { opacity: 0; } } @-o-keyframes change-background-2 { 10% { opacity: 1; } 60% { opacity: 1; } 0%, 20%, 30%, 40%, 50%, 70%, 80%, 90%, 100% { opacity: 0; } } @keyframes change-background-2 { 10% { opacity: 1; } 60% { opacity: 1; } 0%, 20%, 30%, 40%, 50%, 70%, 80%, 90%, 100% { opacity: 0; } } @-moz-keyframes change-background-3 { 20% { opacity: 1; } 70% { opacity: 1; } 0%, 10%, 30%, 40%, 50%, 60%, 80%, 90%, 100% { opacity: 0; } } @-webkit-keyframes change-background-3 { 20% { opacity: 1; } 70% { opacity: 1; } 0%, 10%, 30%, 40%, 50%, 60%, 80%, 90%, 100% { opacity: 0; } } @-o-keyframes change-background-3 { 20% { opacity: 1; } 70% { opacity: 1; } 0%, 10%, 30%, 40%, 50%, 60%, 80%, 90%, 100% { opacity: 0; } } @keyframes change-background-3 { 20% { opacity: 1; } 70% { opacity: 1; } 0%, 10%, 30%, 40%, 50%, 60%, 80%, 90%, 100% { opacity: 0; } } @-moz-keyframes change-background-4 { 30% { opacity: 1; } 80% { opacity: 1; } 0%, 10%, 20%, 40%, 50%, 60%, 70%, 90%, 100% { opacity: 0; } } @-webkit-keyframes change-background-4 { 30% { opacity: 1; } 80% { opacity: 1; } 0%, 10%, 20%, 40%, 50%, 60%, 70%, 90%, 100% { opacity: 0; } } @-o-keyframes change-background-4 { 30% { opacity: 1; } 80% { opacity: 1; } 0%, 10%, 20%, 40%, 50%, 60%, 70%, 90%, 100% { opacity: 0; } } @keyframes change-background-4 { 30% { opacity: 1; } 80% { opacity: 1; } 0%, 10%, 20%, 40%, 50%, 60%, 70%, 90%, 100% { opacity: 0; } } @-moz-keyframes change-background-5 { 40% { opacity: 1; } 90% { opacity: 1; } 0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 100% { opacity: 0; } } @-webkit-keyframes change-background-5 { 40% { opacity: 1; } 90% { opacity: 1; } 0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 100% { opacity: 0; } } @-o-keyframes change-background-5 { 40% { opacity: 1; } 90% { opacity: 1; } 0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 100% { opacity: 0; } } @keyframes change-background-5 { 40% { opacity: 1; } 90% { opacity: 1; } 0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 100% { opacity: 0; } } .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-provisional-text-container, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label { font-family: var(--font-display); } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-league-points-display { font-family: var(--font-body); } .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-provisional-text-container, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-league-points-display { -webkit-user-select: none; } .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-provisional-text-container, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-league-points-display { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label { text-transform: uppercase; } .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label:lang(ko-kr), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title:lang(ko-kr), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank:lang(ko-kr), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label:lang(ko-kr), .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label:lang(ja-jp), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title:lang(ja-jp), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank:lang(ja-jp), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label:lang(ja-jp), .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label:lang(tr-tr), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title:lang(tr-tr), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank:lang(tr-tr), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label:lang(tr-tr), .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label:lang(el-gr), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title:lang(el-gr), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank:lang(el-gr), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label:lang(el-gr), .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label:lang(th-th), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title:lang(th-th), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank:lang(th-th), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label:lang(th-th), .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label:lang(zh-tw), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title:lang(zh-tw), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank:lang(zh-tw), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .rcp-fe-lol-tft-ranked-banner.emphasized .banner-position-rank-label:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank, .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title:lang(ar-ae), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank:lang(ar-ae), .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-provisional-text-container { color: #a09b8c; font-size: 16px; font-weight: normal; line-height: 24px; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-provisional-text-container:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-league-points-display { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-league-points-display:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-league-points-display:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-ranked-banner { position: relative; top: -60px; display: flex; justify-content: center; } .rcp-fe-lol-tft-ranked-banner lol-regalia-ranked-banner-element { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); } .rcp-fe-lol-tft-ranked-banner.low-spec lol-regalia-ranked-banner-element { --regalia-ranked-banner-banner-mask-image: linear-gradient(rgba(0,0,0,0) 20%, #000 80%); } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container { display: flex; flex-direction: column; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .hidden { visibility: hidden; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .removed { display: none; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-spacer { height: 225px; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-spacer.has-position { height: 120px; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-spacer.has-position.narrow { height: 41px; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .non-position-rank-spacer { height: 20px; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .position-icon-container { display: flex; justify-content: center; margin-bottom: 10px; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .position-icon-container.removed { display: none; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .svg-icon { width: 42px; height: 42px; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-ranked-emblem-container { display: flex; justify-content: center; height: 226px; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-ranked-emblem-container .banner-regalia-crest-sizer { width: 125px; height: 125px; position: relative; top: 48px; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-ranked-emblem-container .banner-regalia-crest-sizer .banner-regalia-crest-glow { width: 100%; height: 100%; position: absolute; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-position-title { width: 100%; color: #969081; text-align: center; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-apex-ladder-rank { width: 100%; text-align: center; color: #a09b8c; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-provisional-text-container { width: 100%; color: #f0e6d2; text-align: center; height: 18px; line-height: 20px; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .ranked-coming-soon-icon { background: url("/fe/lol-tft/images/ranked-coming-soon.png") no-repeat center/contain; width: 44px; height: 44px; opacity: 0.5; margin: -40px auto 0; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-tier-division-label { width: 100%; margin: 5px 0; padding: 0 15px; color: #785a28; text-align: center; } .rcp-fe-lol-tft-ranked-banner .ranked-banner-contents-container .banner-league-points-display { width: 100%; color: #a09b8c; text-align: center; } .rcp-fe-lol-tft-battle-pass-paid { position: relative; margin-top: 79px; width: 100%; padding: 32px 0; } .rcp-fe-lol-tft-battle-pass-paid .pass-timeline { padding: 0 32px; margin-top: -11px; z-index: 1; } .rcp-fe-lol-tft-battle-pass-paid .top { position: relative; display: flex; flex-direction: row; justify-content: space-around; } .rcp-fe-lol-tft-battle-pass-paid .column-left { display: flex; flex-direction: column; justify-content: flex-start; } .rcp-fe-lol-tft-battle-pass-paid .pass-series-info { padding-left: 32px; margin-bottom: 75px; } .rcp-fe-lol-tft-battle-pass-paid .pass-reward-details { margin-right: 32px; } .rcp-fe-lol-tft-battle-pass-paid .pass-missions-button { position: absolute; right: 9px; top: 27px; } .rcp-fe-lol-tft-battlepass-level-bar .level { font-family: var(--font-display); } .rcp-fe-lol-tft-battlepass-level-bar .count, .rcp-fe-lol-tft-battlepass-level-bar .total, .rcp-fe-lol-tft-battlepass-level-bar .total:before { font-family: var(--font-body); } .rcp-fe-lol-tft-battlepass-level-bar { position: relative; width: 357px; height: 52px; padding-left: 32px; background-image: url("/fe/lol-tft/images/pass/galaxy/level-shadow.png"); background-repeat: no-repeat; background-position-x: left; background-position-y: top; } .rcp-fe-lol-tft-battlepass-level-bar.pass-complete { visibility: hidden; } .rcp-fe-lol-tft-battlepass-level-bar .content { position: relative; width: 300px; } .rcp-fe-lol-tft-battlepass-level-bar .header { position: relative; width: 155px; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 5px; } .rcp-fe-lol-tft-battlepass-level-bar .level { font-size: 24px; font-weight: bold; color: #f0e6d2; letter-spacing: 0.04em; } .rcp-fe-lol-tft-battlepass-level-bar .progress-counter { display: flex; } .rcp-fe-lol-tft-battlepass-level-bar .count, .rcp-fe-lol-tft-battlepass-level-bar .total, .rcp-fe-lol-tft-battlepass-level-bar .total:before { font-size: 14px; font-weight: normal; letter-spacing: 0.03em; } .rcp-fe-lol-tft-battlepass-level-bar .count { color: #0ac8b9; } .rcp-fe-lol-tft-battlepass-level-bar .total:before { content: '/'; margin: 0 0.5em; color: #848484; } .rcp-fe-lol-tft-battlepass-level-bar .total { color: #848484; } .rcp-fe-lol-tft-battlepass-level-bar .bar { width: 300px; height: 8px; display: flex; align-items: center; background-color: #0a323c; border: 1px solid rgba(0,0,0,0.33); outline: 1px solid #463714; box-shadow: 0 0 0 1px rgba(0,0,0,0.33); } .rcp-fe-lol-tft-battlepass-level-bar .bar-fill { flex: 0 0 auto; background: linear-gradient(to right, #089fc5 80.73%, #dcf8ff 100%); height: 6px; } .rcp-fe-lol-tft-battlepass-level-bar.bonus .bar-fill { background: linear-gradient(to right, #bc57f0 80.73%, #f1d5ff 100%); } .rcp-fe-lol-tft-battlepass-level-bar.bonus .count { color: #de9dff; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container { font-family: var(--font-body); } .rcp-fe-lol-tft-battlepass-promo .promo-item-container { -webkit-user-select: none; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-battlepass-promo { position: relative; width: 100%; height: 193px; display: flex; justify-content: space-between; align-items: flex-start; box-sizing: border-box; margin-top: -13px; padding: 20px 32px; background: linear-gradient(180deg, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0) 25.69%); } .rcp-fe-lol-tft-battlepass-promo .promo-item-container { position: relative; width: 236px; height: 132px; display: flex; justify-content: flex-end; border: 2px solid #000; text-align: center; box-sizing: border-box; flex-direction: column; line-height: 18px; letter-spacing: 0.03em; cursor: pointer; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container:hover { border: 2px solid #c8aa6e; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container::before { content: ""; border: thin solid #3c3c41; position: absolute; top: -2px; left: -2px; width: 236px; height: 132px; box-sizing: border-box; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container .promo-item-text-container { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container .promo-item-text-container .promo-item-title { font-size: 14px; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container .promo-item-text-container .promo-item-subtitle-container { display: flex; font-size: 12px; position: relative; width: 100%; justify-content: space-evenly; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container .promo-item-text-container .promo-item-subtitle-container .promo-item-cost { position: relative; color: #bc9e6b; padding-left: 15px; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container .promo-item-text-container .promo-item-subtitle-container .promo-item-rp-cost::before { content: ""; position: absolute; top: 3px; left: 0; width: 11px; height: 11px; background: url("/fe/lol-static-assets/images/icon-rp-32.png"); background-size: contain; } .rcp-fe-lol-tft-battlepass-promo .promo-item-container .promo-item-text-container .promo-item-subtitle-container .promo-item-be-cost::before { content: ""; position: absolute; top: 3px; left: 0; width: 11px; height: 11px; background: url("/fe/lol-static-assets/images/icon-be-150.png"); background-size: contain; } .rcp-fe-lol-tft-battlepass-series-info header .title, .rcp-fe-lol-tft-battlepass-series-info .button-alt-text { font-family: var(--font-display); } .rcp-fe-lol-tft-battlepass-series-info sub .expiry { font-family: var(--font-body); } .rcp-fe-lol-tft-battlepass-series-info { position: relative; width: 435px; } .rcp-fe-lol-tft-battlepass-series-info header { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; background-image: url("/fe/lol-tft/images/pass/galaxy/header-line.png"); background-repeat: no-repeat; padding-bottom: 13px; margin-bottom: 10px; background-position-x: left; background-position-y: bottom; } .rcp-fe-lol-tft-battlepass-series-info header .logo { margin-right: 4px; margin-bottom: -5px; } .rcp-fe-lol-tft-battlepass-series-info header .title { font-weight: bold; font-size: 36px; line-height: 36px; color: #f0e6d2; letter-spacing: 0.05em; } .rcp-fe-lol-tft-battlepass-series-info sub { position: relative; height: 20px; display: flex; align-items: center; justify-content: flex-start; } .rcp-fe-lol-tft-battlepass-series-info sub .clock { margin-right: 10px; } .rcp-fe-lol-tft-battlepass-series-info sub .expiry { font-weight: normal; height: 16px; font-size: 16px; color: #a09b8c; letter-spacing: 0.03em; } .rcp-fe-lol-tft-battlepass-series-info .button-alt-text { position: relative; top: 15px; font-weight: bold; font-size: 14px; color: #c89b3c; } .rcp-fe-lol-tft-battlepass-series-info .magic-button-group { padding-top: 25px; flex: 0 0 auto; position: relative; width: 147px; height: 32px; } .rcp-fe-lol-tft-battlepass-series-info .magic-button-group lol-uikit-flat-button { width: 100%; height: 100%; } .rcp-fe-lol-tft-battlepass-series-info .magic-button-group lol-uikit-flat-button.glow { --flat-button-border-transition-opacity: 1; --flat-button-glow-animation: hoverGlow 600ms cubic-bezier(0, 0, 0.33, 1) alternate infinite, hoverTextShadow 1000ms cubic-bezier(0, 0, 0.33, 1) alternate infinite, clickScale 1000ms cubic-bezier(0, 0, 0.33, 1) alternate infinite; } .rcp-fe-lol-tft-battlepass-selected-reward-details .premium-tag, .rcp-fe-lol-tft-battlepass-selected-reward-details header, .rcp-fe-lol-tft-battlepass-selected-reward-details sub { font-family: var(--font-display); } .rcp-fe-lol-tft-battlepass-selected-reward-details .description { font-family: var(--font-body); } .rcp-fe-lol-tft-battlepass-selected-reward-details { position: relative; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; height: 256px; width: 578px; } .rcp-fe-lol-tft-battlepass-selected-reward-details .reward-tile { flex: 0 0 auto; position: relative; height: 216px; width: 216px; display: flex; justify-content: center; align-items: center; } .rcp-fe-lol-tft-battlepass-selected-reward-details .reward-image { flex: 0 0 auto; position: relative; height: auto; width: 100%; } .rcp-fe-lol-tft-battlepass-selected-reward-details .reward-details { flex: 0 0 auto; position: relative; margin-left: 25px; height: 318px; height: 212px; display: flex; flex-direction: column; } .rcp-fe-lol-tft-battlepass-selected-reward-details .premium-tag { flex: 0 0 auto; position: relative; width: 127px; height: 25px; font-weight: 900; font-size: 14px; color: #010a13; letter-spacing: 0.02em; background-image: url("/fe/lol-tft/images/pass/galaxy/premium-tag-gold.svg"); background-repeat: no-repeat; background-position: center; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; visibility: hidden; } .rcp-fe-lol-tft-battlepass-selected-reward-details .premium-tag.visible { visibility: visible; } .rcp-fe-lol-tft-battlepass-selected-reward-details .premium-tag img { margin: 0 6px 3px 0; } .rcp-fe-lol-tft-battlepass-selected-reward-details .premium-tag label { margin-bottom: 1px; } .rcp-fe-lol-tft-battlepass-selected-reward-details header { font-weight: bold; width: 318px; font-size: 20px; letter-spacing: 0.03em; color: #f0e6d2; text-transform: uppercase; } .rcp-fe-lol-tft-battlepass-selected-reward-details sub { font-weight: bold; font-size: 14px; letter-spacing: 0.03em; margin-bottom: 5px; text-transform: uppercase; color: #c89b3c; } .rcp-fe-lol-tft-battlepass-selected-reward-details sub.bonus { color: #c05aff; } .rcp-fe-lol-tft-battlepass-selected-reward-details .description { font-weight: 500; font-size: 12px; line-height: 18px; width: 318px; height: 90px; letter-spacing: 0.05em; color: #a09b8c; } .rcp-fe-lol-tft-battlepass-selected-reward-details .button { flex: 0 0 auto; position: absolute; bottom: 0px; width: 135px; height: 32px; } .rcp-fe-lol-tft-battlepass-selected-reward-details .button .button-content.locked { height: 20px; width: 20px; background-image: url("/fe/lol-tft/images/pass/galaxy/lock.png"); background-repeat: no-repeat; background-position: center center; } .rcp-fe-lol-tft-battlepass-selected-reward-details .button .button-content.complete { height: 24px; width: 24px; background-image: url("/fe/lol-tft/images/pass/galaxy/checkmark-dark.png"); background-repeat: no-repeat; background-position: center center; } .rcp-fe-lol-tft-battlepass-selected-reward-details lol-uikit-flat-button.glow { --flat-button-border-transition-opacity: 1; --flat-button-glow-animation: hoverGlow 600ms cubic-bezier(0, 0, 0.33, 1) alternate infinite, hoverTextShadow 1000ms cubic-bezier(0, 0, 0.33, 1) alternate infinite, clickScale 1000ms cubic-bezier(0, 0, 0.33, 1) alternate infinite; } .rcp-fe-lol-tft-battlepass-selected-reward-details lol-uikit-spinner { top: 2px; } .rcp-fe-lol-tft-application { direction: ltr; color: #fff; cursor: default; box-sizing: border-box; position: absolute; width: 1055px; height: 718px; top: 1px; background: no-repeat center center fixed; background-size: cover; animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } .rcp-fe-lol-tft-application * { box-sizing: border-box; } .rcp-fe-lol-tft-application .spinner-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .rcp-fe-lol-tft-reward-celebration .reward-description { font-family: var(--font-display); } .rcp-fe-lol-tft-reward-celebration .reward { font-family: var(--font-body); } .rcp-fe-lol-tft-reward-celebration .reward, .rcp-fe-lol-tft-reward-celebration .reward-description { -webkit-user-select: none; } .rcp-fe-lol-tft-reward-celebration .reward, .rcp-fe-lol-tft-reward-celebration .reward-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-reward-celebration .reward-description { text-transform: uppercase; } .rcp-fe-lol-tft-reward-celebration .reward-description:lang(ko-kr), .rcp-fe-lol-tft-reward-celebration .reward-description:lang(ja-jp), .rcp-fe-lol-tft-reward-celebration .reward-description:lang(tr-tr), .rcp-fe-lol-tft-reward-celebration .reward-description:lang(el-gr), .rcp-fe-lol-tft-reward-celebration .reward-description:lang(th-th), .rcp-fe-lol-tft-reward-celebration .reward-description:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-tft-reward-celebration .reward-description { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .rcp-fe-lol-tft-reward-celebration .reward-description:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-reward-celebration .reward { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-reward-celebration .reward:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-tft-reward-celebration .reward:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-reward-celebration { cursor: default; box-sizing: border-box; } .rcp-fe-lol-tft-reward-celebration * { box-sizing: border-box; } .rcp-fe-lol-tft-reward-celebration .rewards-container { display: flex; flex-direction: row; justify-content: center; align-items: center; top: 0; left: 0; position: absolute; width: 100%; height: 100%; } .rcp-fe-lol-tft-reward-celebration .reward { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; flex-basis: 100%; min-width: 300px; max-width: 300px; height: 330px; position: relative; margin: 0 8px; } .rcp-fe-lol-tft-reward-celebration .reward-icon { position: absolute; width: 256px; height: 256px; top: 10px; left: 22px; display: flex; align-items: center; justify-content: center; } .rcp-fe-lol-tft-reward-celebration .reward-icon img { max-width: 100%; max-height: none; } .rcp-fe-lol-tft-reward-celebration .reward-icon.MISSION_PROGRESS img, .rcp-fe-lol-tft-reward-celebration .reward-icon.SUMMONER_ICON img { max-width: 148px; border: 2px solid #c89b3c; box-shadow: 0px 0px 1px 2px rgba(1,10,19,0.4); border-image: linear-gradient(to bottom, #c29739, #503c23) 2; } .rcp-fe-lol-tft-reward-celebration .reward-description-wrapper { position: absolute; width: 100%; bottom: 15px; height: 56px; display: flex; align-items: center; justify-content: center; } .rcp-fe-lol-tft-reward-celebration .reward-description { text-align: center; word-break: break-word; font-size: 14px; padding: 0; } .rcp-fe-lol-tft-reward-celebration .reward.selectable { cursor: pointer; } .rcp-fe-lol-tft-reward-celebration .reward.selectable .brightener-bg { -webkit-filter: opacity(0); transition: -webkit-filter 0.15s; position: absolute; top: 0px; left: 0; right: 0; bottom: 0px; background: linear-gradient(transparent, rgba(255,255,255,0.1)); } .rcp-fe-lol-tft-reward-celebration .reward.selectable .radial-glow { height: 120px; width: 100%; bottom: -2px; background-position: bottom center; background-image: url("/fe/lol-tft/images/reward-hover-highlight.png"); background-size: contain; background-repeat: no-repeat; transition: -webkit-filter 0.15s ease-in; position: absolute; -webkit-filter: opacity(0); z-index: 1; pointer-events: none; } .rcp-fe-lol-tft-reward-celebration .reward.selectable:not(.selected):hover .brightener-bg { -webkit-filter: opacity(1); } .rcp-fe-lol-tft-reward-celebration .reward.selectable:not(.selected):hover .radial-glow { -webkit-filter: opacity(0.5); } .rcp-fe-lol-tft-reward-celebration .reward.selectable.selected .brightener-bg { -webkit-filter: opacity(1); background: radial-gradient(rgba(255,255,255,0.4), transparent 60%); } .rcp-fe-lol-tft-reward-celebration .reward.selectable.selected .radial-glow { -webkit-filter: opacity(0.5); } .rcp-fe-lol-tft-reward-celebration .reward.selectable.selection-made:not(.selected):not(:hover) { -webkit-filter: opacity(0.5); } .rcp-fe-lol-tft-reward-celebration .reward.selectable.selection-made:not(.selected):not(:hover) .reward-icon { -webkit-filter: saturate(0.5); }