.rcp-fe-lol-tft-hub .pass-expired, .rcp-fe-lol-tft-hub .battlepass-currency-container { font-family: var(--font-display); } .rcp-fe-lol-tft-hub .publishing-error-container { font-family: var(--font-body); } .rcp-fe-lol-tft-hub .battlepass-currency-container, .rcp-fe-lol-tft-hub .publishing-error-container { -webkit-user-select: none; } .rcp-fe-lol-tft-hub .battlepass-currency-container, .rcp-fe-lol-tft-hub .publishing-error-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-hub .battlepass-currency-container { text-transform: uppercase; } .rcp-fe-lol-tft-hub .battlepass-currency-container:lang(ko-kr), .rcp-fe-lol-tft-hub .battlepass-currency-container:lang(ja-jp), .rcp-fe-lol-tft-hub .battlepass-currency-container:lang(tr-tr), .rcp-fe-lol-tft-hub .battlepass-currency-container:lang(el-gr), .rcp-fe-lol-tft-hub .battlepass-currency-container:lang(th-th), .rcp-fe-lol-tft-hub .battlepass-currency-container:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-tft-hub .battlepass-currency-container { font-size: 14px; font-weight: 700; letter-spacing: 0.075em; color: #cdbe91; } .rcp-fe-lol-tft-hub .battlepass-currency-container.active { position: relative; color: #f0e6d2; } .rcp-fe-lol-tft-hub .battlepass-currency-container:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-hub .publishing-error-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-hub .publishing-error-container:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-tft-hub .publishing-error-container:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-hub { position: relative; margin-top: 79px; width: 100%; padding: 42px 0; } .rcp-fe-lol-tft-hub .battlepass-timeline { padding: 0 32px; margin-top: -11px; z-index: 1; } .rcp-fe-lol-tft-hub .pass-expired { color: #f0e6d2; font-size: 24px; font-weight: bold; letter-spacing: 0.04em; text-align: center; height: 435px; display: flex; align-items: center; justify-content: center; } .rcp-fe-lol-tft-hub .top { position: relative; display: flex; flex-direction: row; justify-content: space-around; } .rcp-fe-lol-tft-hub .column-left { display: flex; flex-direction: column; justify-content: flex-start; } .rcp-fe-lol-tft-hub .pass-series-info { padding-left: 32px; margin-bottom: 75px; display: flex; flex-direction: column; align-items: flex-start; } .rcp-fe-lol-tft-hub .pass-reward-details { margin-right: 32px; } .rcp-fe-lol-tft-hub .column-right { display: flex; flex-direction: column; justify-content: flex-start; } .rcp-fe-lol-tft-hub .pass-missions-button { position: absolute; right: 100px; top: 6px; } .rcp-fe-lol-tft-hub .pass-level-bar { position: absolute; top: 186px; } .rcp-fe-lol-tft-hub .battlepass-currency-container { position: absolute; color: #f0e6d2; padding: 3px 8px 4px 30px; border-radius: 8px; background: rgba(0,0,0,0.5); cursor: pointer; left: 946px; top: 20px; } .rcp-fe-lol-tft-hub .battlepass-currency-container::after { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 35px; background-image: url("/fe/lol-static-assets/images/icon-star-shards-active-88.png"); background-position: 0 center; background-size: 35px 35px; background-repeat: no-repeat; } .rcp-fe-lol-tft-hub .cards-spinner-container { position: absolute; bottom: -90px; left: 50%; transform: translate(-50%, -50%); } .rcp-fe-lol-tft-hub .publishing-error-container { position: absolute; bottom: -90px; left: 50%; transform: translate(-50%, -50%); } .rcp-fe-lol-tft-battlepass-level-bar .header-text { 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/reckoning/level-shadow.png"); background-repeat: no-repeat; background-position-x: left; background-position-y: top; } .rcp-fe-lol-tft-battlepass-level-bar .content { position: relative; width: 300px; } .rcp-fe-lol-tft-battlepass-level-bar .header { position: relative; width: 195px; display: flex; align-items: flex-end; margin-bottom: 5px; } .rcp-fe-lol-tft-battlepass-level-bar.pass-complete .header { width: 100%; padding-top: 3px; margin-bottom: 2px; } .rcp-fe-lol-tft-battlepass-level-bar .header-text { color: #f0e6d2; font-size: 24px; font-weight: bold; letter-spacing: 0.04em; margin-right: 5px; } .rcp-fe-lol-tft-battlepass-level-bar.pass-complete .header-text { font-size: 16px; letter-spacing: 0.05em; } .rcp-fe-lol-tft-battlepass-level-bar .progress-counter-alignment-wrapper { display: flex; width: 95px; align-items: flex-end; justify-content: flex-end; } .rcp-fe-lol-tft-battlepass-level-bar .progress-counter { display: flex; margin-bottom: 3px; } .rcp-fe-lol-tft-battlepass-level-bar.pass-complete .progress-counter { visibility: hidden; } .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 { color: #848484; content: '/'; margin: 0 0.5em; } .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.pass-complete .bar-fill { background: linear-gradient(90deg, #c89b3c 80.73%, #f0e6d2 100%); } .rcp-fe-lol-tft-battlepass-level-bar.bonus .count { color: #de9dff; } .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 header .title { text-transform: uppercase; } .rcp-fe-lol-tft-battlepass-series-info header .title:lang(ko-kr), .rcp-fe-lol-tft-battlepass-series-info header .title:lang(ja-jp), .rcp-fe-lol-tft-battlepass-series-info header .title:lang(tr-tr), .rcp-fe-lol-tft-battlepass-series-info header .title:lang(el-gr), .rcp-fe-lol-tft-battlepass-series-info header .title:lang(th-th), .rcp-fe-lol-tft-battlepass-series-info header .title:lang(zh-tw) { text-transform: none; } .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; padding-bottom: 13px; margin-bottom: 10px; background-image: url("/fe/lol-tft/images/pass/reckoning/header-line.png"); background-repeat: no-repeat; background-position-x: left; background-position-y: bottom; } .rcp-fe-lol-tft-battlepass-series-info header .logo { margin-right: 4px; margin-bottom: -5px; height: 40px; width: 40px; } .rcp-fe-lol-tft-battlepass-series-info header .title { font-weight: bold; font-size: 36px; line-height: 36px; color: #f0e6d2; letter-spacing: 0.05em; max-height: 3em; overflow: hidden; } .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; background-image: url("/fe/lol-tft/images/pass/reckoning/premium-upgraded-text.svg"); background-repeat: no-repeat; background-position: center; padding: 3px 20px; letter-spacing: 0.02em; text-align: center; height: 28px; line-height: 22px; width: 158px; } .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 .icon-frame { flex: 0 0 auto; position: absolute; height: 100%; width: 100%; background: url("/fe/lol-tft/images/pass/reckoning/tft-bp-border-large.png"); background-size: contain; visibility: hidden; } .rcp-fe-lol-tft-battlepass-selected-reward-details .icon-frame.visible { visibility: visible; } .rcp-fe-lol-tft-battlepass-selected-reward-details .reward-premium-glow { position: absolute; } .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: 128px; height: 26px; font-weight: 900; font-size: 14px; color: #010a13; letter-spacing: 0.02em; background-image: url("/fe/lol-tft/images/pass/reckoning/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: #f0e6d2; } .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/reckoning/lock.png"); background-repeat: no-repeat; background-position: 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/reckoning/checkmark-dark.png"); background-repeat: no-repeat; background-position: 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-image { top: 2px; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .premium-tag, .rcp-fe-lol-tft-battlepass-selected-reward-details-old header, .rcp-fe-lol-tft-battlepass-selected-reward-details-old sub { font-family: var(--font-display); } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .description { font-family: var(--font-body); } .rcp-fe-lol-tft-battlepass-selected-reward-details-old { 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-old .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-old .reward-image { flex: 0 0 auto; position: relative; height: auto; width: 100%; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .icon-frame { flex: 0 0 auto; position: absolute; height: 100%; width: 100%; background: url("/fe/lol-tft/images/pass/reckoning/tft-bp-border-large.png"); background-size: contain; visibility: hidden; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .icon-frame.visible { visibility: visible; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .reward-premium-glow { position: absolute; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .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-old .premium-tag { flex: 0 0 auto; position: relative; width: 128px; height: 26px; font-weight: 900; font-size: 14px; color: #010a13; letter-spacing: 0.02em; background-image: url("/fe/lol-tft/images/pass/reckoning/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-old .premium-tag.visible { visibility: visible; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .premium-tag img { margin: 0 6px 3px 0; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .premium-tag label { margin-bottom: 1px; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old 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-old 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-old sub.bonus { color: #c05aff; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .description { font-weight: 500; font-size: 12px; line-height: 18px; width: 318px; height: 90px; letter-spacing: 0.05em; color: #f0e6d2; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .button { flex: 0 0 auto; position: absolute; bottom: 0px; width: 135px; height: 32px; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .button .button-content.locked { height: 20px; width: 20px; background-image: url("/fe/lol-tft/images/pass/reckoning/lock.png"); background-repeat: no-repeat; background-position: center; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old .button .button-content.complete { height: 24px; width: 24px; background-image: url("/fe/lol-tft/images/pass/reckoning/checkmark-dark.png"); background-repeat: no-repeat; background-position: center; } .rcp-fe-lol-tft-battlepass-selected-reward-details-old 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-old .lol-uikit-spinner-image { top: 2px; } .rcp-fe-lol-tft-pcs-cards-row .pcs-card { font-family: var(--font-body); } .rcp-fe-lol-tft-pcs-cards-row .pcs-card { -webkit-user-select: none; } .rcp-fe-lol-tft-pcs-cards-row .pcs-card { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-tft-pcs-cards-row .pcs-card { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-tft-pcs-cards-row .pcs-card:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-tft-pcs-cards-row .pcs-card:lang(ar-ae) { letter-spacing: 0; } .rcp-fe-lol-tft-pcs-cards-row { position: relative; width: 100%; height: 193px; display: flex; justify-content: space-between; align-items: flex-start; box-sizing: border-box; margin-top: -11px; 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-pcs-cards-row .pcs-card { position: relative; width: 236px; display: flex; justify-content: flex-end; text-align: center; box-sizing: border-box; flex-direction: column; line-height: 18px; cursor: pointer; border: 2px solid #000; transition: border-color 0.1s linear; box-shadow: 0 0 0 0.5px #3c3c41; } .rcp-fe-lol-tft-pcs-cards-row .pcs-card img { width: 100%; } .rcp-fe-lol-tft-pcs-cards-row .pcs-card * { pointer-events: none; } .rcp-fe-lol-tft-pcs-cards-row .pcs-card:hover { border: 2px solid #c8aa6e; } .rcp-fe-lol-tft-pcs-cards-row .pcs-card .pcs-card-overlay-footer { position: absolute; bottom: 0px; left: 0px; right: 0px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 30px, rgba(0,0,0,0.75) 100%); } .rcp-fe-lol-tft-pcs-cards-row .pcs-card .pcs-card-overlay-footer .pcs-card-title { text-align: center; padding: 30px 10px 6px; font-size: 14px; letter-spacing: 0.03em; } .rcp-fe-lol-tft-application-background, .rcp-fe-lol-tft-application { direction: rtl; color: #fff; cursor: default; box-sizing: border-box; position: absolute; width: 1055px; height: 718px; top: 1px; background-image: radial-gradient(transparent 50%, #000 120%); 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-background *, .rcp-fe-lol-tft-application * { box-sizing: border-box; } .rcp-fe-lol-tft-application-background .spinner-container, .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-repeat: no-repeat; background-position: center; background-size: contain; 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); }