.event-shop-card-purchase-item-title, .event-shop-unavailable-message-title, .event-shop-help-modal-event-name, .event-shop-help-modal-title, .event-shop-help-modal-topic, .event-shop-token-shop-offer-card-title, .event-shop-token-shop-offer-card-price, .event-shop-token-shop-offer-items-size, .event-shop-page-header-name, .event-shop-token-shop-balance-amount, .event-shop-token-shop-name, .event-shop-token-shop-details, .event-shop-xp-header-pass-track, .event-shop-xp-label-progress-locked, .event-shop-xp-label-xp { font-family: var(--font-display); } .event-shop-card-purchase-item-details, .event-shop-card-purchase-confirmation, .event-shop-card-purchase-confirmation-link, .event-shop-card-purchase-not-enough-tokens, .event-shop-unavailable-message-description, .event-shop-help-description, .event-shop-page-header-end-timer-text, .event-shop-page-header-time-tooltip-top-date, .event-shop-progression-label, .event-shop-progression-label-pass-purchased, .event-shop-progression-label-tokens, .event-shop-progression-unclaimed-wrapper, .event-shop-progression-unclaimed-box, .event-shop-progression-unclaimed-box span, .event-shop-token-shop-balance-current, .event-shop-token-shop-buy-tokens-tooltip, .event-shop-xp-iteration, .event-shop-xp-label-level-xp, .event-shop-xp-label-level, .event-shop-xp-label-progress-locked { font-family: var(--font-body); } .event-shop-card-purchase-item-details, .event-shop-card-purchase-confirmation, .event-shop-card-purchase-confirmation-link, .event-shop-card-purchase-not-enough-tokens, .event-shop-card-purchase-item-title, .event-shop-unavailable-message-title, .event-shop-unavailable-message-description, .event-shop-help-modal-event-name, .event-shop-help-modal-title, .event-shop-help-modal-topic, .event-shop-help-description, .event-shop-token-shop-offer-card-title, .event-shop-token-shop-offer-card-price, .event-shop-token-shop-offer-items-size, .event-shop-page-header-name, .event-shop-page-header-end-timer-text, .event-shop-page-header-time-tooltip-top-date, .event-shop-progression-label, .event-shop-progression-label-pass-purchased, .event-shop-progression-label-tokens, .event-shop-progression-unclaimed-wrapper, .event-shop-progression-unclaimed-box, .event-shop-progression-unclaimed-box span, .event-shop-token-shop-balance-amount, .event-shop-token-shop-name, .event-shop-token-shop-details, .event-shop-token-shop-balance-current, .event-shop-token-shop-buy-tokens-tooltip, .event-shop-xp-iteration, .event-shop-xp-label-level-xp, .event-shop-xp-header-pass-track, .event-shop-xp-label-level, .event-shop-xp-label-progress-locked, .event-shop-xp-label-xp { -webkit-user-select: none; } .event-shop-card-purchase-item-details, .event-shop-card-purchase-confirmation, .event-shop-card-purchase-confirmation-link, .event-shop-card-purchase-not-enough-tokens, .event-shop-card-purchase-item-title, .event-shop-unavailable-message-title, .event-shop-unavailable-message-description, .event-shop-help-modal-event-name, .event-shop-help-modal-title, .event-shop-help-modal-topic, .event-shop-help-description, .event-shop-token-shop-offer-card-title, .event-shop-token-shop-offer-card-price, .event-shop-token-shop-offer-items-size, .event-shop-page-header-name, .event-shop-page-header-end-timer-text, .event-shop-page-header-time-tooltip-top-date, .event-shop-progression-label, .event-shop-progression-label-pass-purchased, .event-shop-progression-label-tokens, .event-shop-progression-unclaimed-wrapper, .event-shop-progression-unclaimed-box, .event-shop-progression-unclaimed-box span, .event-shop-token-shop-balance-amount, .event-shop-token-shop-name, .event-shop-token-shop-details, .event-shop-token-shop-balance-current, .event-shop-token-shop-buy-tokens-tooltip, .event-shop-xp-iteration, .event-shop-xp-label-level-xp, .event-shop-xp-header-pass-track, .event-shop-xp-label-level, .event-shop-xp-label-progress-locked, .event-shop-xp-label-xp { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .event-shop-card-purchase-item-title, .event-shop-unavailable-message-title, .event-shop-help-modal-event-name, .event-shop-help-modal-title, .event-shop-help-modal-topic, .event-shop-token-shop-offer-card-title, .event-shop-page-header-name, .event-shop-token-shop-name, .event-shop-token-shop-details, .event-shop-xp-header-pass-track, .event-shop-xp-label-progress-locked, .event-shop-xp-label-xp { text-transform: uppercase; } .event-shop-card-purchase-item-title:lang(ko-kr), .event-shop-unavailable-message-title:lang(ko-kr), .event-shop-help-modal-event-name:lang(ko-kr), .event-shop-help-modal-title:lang(ko-kr), .event-shop-help-modal-topic:lang(ko-kr), .event-shop-token-shop-offer-card-title:lang(ko-kr), .event-shop-page-header-name:lang(ko-kr), .event-shop-token-shop-name:lang(ko-kr), .event-shop-token-shop-details:lang(ko-kr), .event-shop-xp-header-pass-track:lang(ko-kr), .event-shop-xp-label-progress-locked:lang(ko-kr), .event-shop-xp-label-xp:lang(ko-kr), .event-shop-card-purchase-item-title:lang(ja-jp), .event-shop-unavailable-message-title:lang(ja-jp), .event-shop-help-modal-event-name:lang(ja-jp), .event-shop-help-modal-title:lang(ja-jp), .event-shop-help-modal-topic:lang(ja-jp), .event-shop-token-shop-offer-card-title:lang(ja-jp), .event-shop-page-header-name:lang(ja-jp), .event-shop-token-shop-name:lang(ja-jp), .event-shop-token-shop-details:lang(ja-jp), .event-shop-xp-header-pass-track:lang(ja-jp), .event-shop-xp-label-progress-locked:lang(ja-jp), .event-shop-xp-label-xp:lang(ja-jp), .event-shop-card-purchase-item-title:lang(tr-tr), .event-shop-unavailable-message-title:lang(tr-tr), .event-shop-help-modal-event-name:lang(tr-tr), .event-shop-help-modal-title:lang(tr-tr), .event-shop-help-modal-topic:lang(tr-tr), .event-shop-token-shop-offer-card-title:lang(tr-tr), .event-shop-page-header-name:lang(tr-tr), .event-shop-token-shop-name:lang(tr-tr), .event-shop-token-shop-details:lang(tr-tr), .event-shop-xp-header-pass-track:lang(tr-tr), .event-shop-xp-label-progress-locked:lang(tr-tr), .event-shop-xp-label-xp:lang(tr-tr), .event-shop-card-purchase-item-title:lang(el-gr), .event-shop-unavailable-message-title:lang(el-gr), .event-shop-help-modal-event-name:lang(el-gr), .event-shop-help-modal-title:lang(el-gr), .event-shop-help-modal-topic:lang(el-gr), .event-shop-token-shop-offer-card-title:lang(el-gr), .event-shop-page-header-name:lang(el-gr), .event-shop-token-shop-name:lang(el-gr), .event-shop-token-shop-details:lang(el-gr), .event-shop-xp-header-pass-track:lang(el-gr), .event-shop-xp-label-progress-locked:lang(el-gr), .event-shop-xp-label-xp:lang(el-gr), .event-shop-card-purchase-item-title:lang(th-th), .event-shop-unavailable-message-title:lang(th-th), .event-shop-help-modal-event-name:lang(th-th), .event-shop-help-modal-title:lang(th-th), .event-shop-help-modal-topic:lang(th-th), .event-shop-token-shop-offer-card-title:lang(th-th), .event-shop-page-header-name:lang(th-th), .event-shop-token-shop-name:lang(th-th), .event-shop-token-shop-details:lang(th-th), .event-shop-xp-header-pass-track:lang(th-th), .event-shop-xp-label-progress-locked:lang(th-th), .event-shop-xp-label-xp:lang(th-th), .event-shop-card-purchase-item-title:lang(zh-tw), .event-shop-unavailable-message-title:lang(zh-tw), .event-shop-help-modal-event-name:lang(zh-tw), .event-shop-help-modal-title:lang(zh-tw), .event-shop-help-modal-topic:lang(zh-tw), .event-shop-token-shop-offer-card-title:lang(zh-tw), .event-shop-page-header-name:lang(zh-tw), .event-shop-token-shop-name:lang(zh-tw), .event-shop-token-shop-details:lang(zh-tw), .event-shop-xp-header-pass-track:lang(zh-tw), .event-shop-xp-label-progress-locked:lang(zh-tw), .event-shop-xp-label-xp:lang(zh-tw) { text-transform: none; } .event-shop-unavailable-message-title, .event-shop-help-modal-event-name, .event-shop-help-modal-topic, .event-shop-token-shop-offer-card-title, .event-shop-page-header-name, .event-shop-xp-header-pass-track, .event-shop-xp-label-progress-locked, .event-shop-xp-label-xp { text-transform: none; } .event-shop-help-modal-title { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .event-shop-help-modal-title:lang(ar-ae) { letter-spacing: 0; } .event-shop-card-purchase-item-title, .event-shop-page-header-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .event-shop-card-purchase-item-title:lang(ar-ae), .event-shop-page-header-name:lang(ar-ae) { letter-spacing: 0; } .event-shop-page-header-name { letter-spacing: 0.025em; } .event-shop-page-header-name:lang(ar-ae) { letter-spacing: 0; } .event-shop-help-modal-event-name, .event-shop-help-modal-topic, .event-shop-token-shop-name, .event-shop-token-shop-details, .event-shop-xp-header-pass-track, .event-shop-xp-label-progress-locked, .event-shop-xp-label-xp { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .event-shop-help-modal-event-name:lang(ar-ae), .event-shop-help-modal-topic:lang(ar-ae), .event-shop-token-shop-name:lang(ar-ae), .event-shop-token-shop-details:lang(ar-ae), .event-shop-xp-header-pass-track:lang(ar-ae), .event-shop-xp-label-progress-locked:lang(ar-ae), .event-shop-xp-label-xp:lang(ar-ae) { letter-spacing: 0; } .event-shop-help-modal-event-name, .event-shop-help-modal-topic, .event-shop-xp-header-pass-track, .event-shop-xp-label-progress-locked, .event-shop-xp-label-xp { letter-spacing: 0.0375em; } .event-shop-help-modal-event-name:lang(ar-ae), .event-shop-help-modal-topic:lang(ar-ae), .event-shop-xp-header-pass-track:lang(ar-ae), .event-shop-xp-label-progress-locked:lang(ar-ae), .event-shop-xp-label-xp:lang(ar-ae) { letter-spacing: 0; } .event-shop-unavailable-message-title, .event-shop-token-shop-offer-card-title { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .event-shop-unavailable-message-title:lang(ja-jp), .event-shop-token-shop-offer-card-title:lang(ja-jp) { font-size: 13px; } .event-shop-unavailable-message-title:lang(ar-ae), .event-shop-token-shop-offer-card-title:lang(ar-ae) { letter-spacing: 0; } .event-shop-unavailable-message-title, .event-shop-token-shop-offer-card-title { letter-spacing: 0.0375em; } .event-shop-unavailable-message-title:lang(ar-ae), .event-shop-token-shop-offer-card-title:lang(ar-ae) { letter-spacing: 0; } .event-shop-unavailable-message-description, .event-shop-page-header-time-tooltip-top-date { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .event-shop-unavailable-message-description:lang(ar-ae), .event-shop-page-header-time-tooltip-top-date:lang(ar-ae) { letter-spacing: 0; } .event-shop-card-purchase-item-details, .event-shop-card-purchase-confirmation, .event-shop-card-purchase-not-enough-tokens, .event-shop-page-header-end-timer-text, .event-shop-progression-unclaimed-box, .event-shop-xp-iteration, .event-shop-xp-label-level-xp, .event-shop-xp-label-level, .event-shop-xp-label-progress-locked { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .event-shop-card-purchase-item-details:lang(ja-jp), .event-shop-card-purchase-confirmation:lang(ja-jp), .event-shop-card-purchase-not-enough-tokens:lang(ja-jp), .event-shop-page-header-end-timer-text:lang(ja-jp), .event-shop-progression-unclaimed-box:lang(ja-jp), .event-shop-xp-iteration:lang(ja-jp), .event-shop-xp-label-level-xp:lang(ja-jp), .event-shop-xp-label-level:lang(ja-jp), .event-shop-xp-label-progress-locked:lang(ja-jp) { font-size: 13px; } .event-shop-card-purchase-item-details:lang(ar-ae), .event-shop-card-purchase-confirmation:lang(ar-ae), .event-shop-card-purchase-not-enough-tokens:lang(ar-ae), .event-shop-page-header-end-timer-text:lang(ar-ae), .event-shop-progression-unclaimed-box:lang(ar-ae), .event-shop-xp-iteration:lang(ar-ae), .event-shop-xp-label-level-xp:lang(ar-ae), .event-shop-xp-label-level:lang(ar-ae), .event-shop-xp-label-progress-locked:lang(ar-ae) { letter-spacing: 0; } .event-shop-help-description, .event-shop-progression-label, .event-shop-progression-label-pass-purchased, .event-shop-progression-unclaimed-wrapper, .event-shop-progression-unclaimed-box span, .event-shop-token-shop-balance-current, .event-shop-token-shop-buy-tokens-tooltip { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .event-shop-help-description:lang(ja-jp), .event-shop-progression-label:lang(ja-jp), .event-shop-progression-label-pass-purchased:lang(ja-jp), .event-shop-progression-unclaimed-wrapper:lang(ja-jp), .event-shop-progression-unclaimed-box span:lang(ja-jp), .event-shop-token-shop-balance-current:lang(ja-jp), .event-shop-token-shop-buy-tokens-tooltip:lang(ja-jp) { font-size: 13px; } .event-shop-help-description:lang(ar-ae), .event-shop-progression-label:lang(ar-ae), .event-shop-progression-label-pass-purchased:lang(ar-ae), .event-shop-progression-unclaimed-wrapper:lang(ar-ae), .event-shop-progression-unclaimed-box span:lang(ar-ae), .event-shop-token-shop-balance-current:lang(ar-ae), .event-shop-token-shop-buy-tokens-tooltip:lang(ar-ae) { letter-spacing: 0; } .event-shop-progression-label-tokens { color: #a09b8c; font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .event-shop-progression-label-tokens:lang(ja-jp) { font-size: 13px; } .event-shop-progression-label-tokens:lang(ar-ae) { letter-spacing: 0; } .event-shop-card-purchase-confirmation-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .event-shop-card-purchase-confirmation-link:lang(ja-jp) { font-size: 13px; } .event-shop-card-purchase-confirmation-link:lang(ar-ae) { letter-spacing: 0; } .event-shop-card-purchase-confirmation-link { color: #0596aa; text-decoration: none; } .event-shop-card-purchase-confirmation-link:hover, .event-shop-card-purchase-confirmation-link.hover { color: #cdfafa; } .event-shop-card-purchase-confirmation-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-event-shop/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .event-shop-card-purchase-confirmation-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .event-shop-card-purchase-confirmation-link:hover:after { background-color: #cdfafa; } .event-shop-token-shop-offer-card-price, .event-shop-token-shop-offer-items-size, .event-shop-token-shop-balance-amount { font-size: 16px; font-weight: 700; letter-spacing: 0.05em; } .event-shop-token-shop-offer-card-price:lang(ar-ae), .event-shop-token-shop-offer-items-size:lang(ar-ae), .event-shop-token-shop-balance-amount:lang(ar-ae) { letter-spacing: 0; } .event-shop-card-purchase-modal-image-container { height: 300px; display: flex; justify-content: center; } .event-shop-card-purchase-modal-image { max-width: 100%; } .event-shop-card-purchase-currency-icon { width: 20px; margin-right: 3px; } .event-shop-card-purchase-currency-wrapper { display: flex; } .event-shop-card-purchase-item-details { display: flex; align-items: center; justify-content: space-around; height: 35px; margin: 0 0 10px 0; color: #785a28; border: solid #463714; border-width: 1px 0; } .event-shop-card-purchase-item-details.contains-multiple-detail { align-items: center; justify-content: space-between; } .event-shop-card-purchase-item-details.contains-multiple-detail::after { content: ''; } .event-shop-card-purchase-confirmation { display: flex; align-items: center; justify-content: center; height: 30px; margin: 10px 20px 0; } .event-shop-card-purchase-details { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-top: 20px; } .event-shop-card-purchase-not-enough-tokens { margin-top: 10px; color: #be1e37; } .event-shop-card-purchase-item-title { margin-top: 8px; text-align: center; } .event-shop-nav-bar-tab { display: flex; justify-content: center; align-items: center; width: 100%; height: 55px; cursor: pointer; } .event-shop-nav-bar-tab.event-shop-nav-bar-tab-selected { display: flex; position: relative; } .event-shop-nav-bar-tab.event-shop-nav-bar-tab-selected .event-shop-nav-bar-tab-icon { opacity: 1; } .event-shop-nav-bar-tab.event-shop-nav-bar-tab-selected::after { content: ''; position: absolute; display: flex; left: 0; bottom: auto; height: 38px; width: 3px; background: #c89b3c; } .event-shop-nav-bar-tab-icon { opacity: 0.5; } .event-shop-category-nav-bar { width: 54px; height: 100%; background: #010a13; border-right: solid 1px #1e282d; } .event-shop-categories { width: 100%; } .event-shop-token-shop-category-offers { display: flex; gap: 16px; flex-wrap: wrap; } .event-shop-fallback { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; background: #010a13; border-top: solid 1px; border-bottom: solid 1px; border-color: #0a323c; } .event-shop-spinner { transform: translate(-50%, -50%); top: 50%; left: 50%; } .event-shop-unavailable-message-title { display: flex; color: #be1e37; margin-bottom: 10px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; align-items: center; } .event-shop-unavailable-message-title-warning { width: 16px; height: 16px; margin-right: 10px; } .event-shop-unavailable-error-image { height: 75px; width: 75px; margin-right: 30px; } .event-shop-unavailable-message-description { display: flex; flex-direction: column; justify-content: center; align-items: center; } .event-shop-unavailable-container { display: flex; } .event-shop-unavailable-message { width: 300px; display: flex; flex-direction: column; justify-content: center; } #event-shop-help-modal { display: flex; flex-direction: column; width: 960px; height: 592px; padding: 18px 0 48px 0; } .event-shop-help-modal-logo { height: 22px; width: 22px; margin-right: 3px; } .event-shop-help-modal-event-name { color: #a09b8c; display: flex; align-items: center; justify-content: center; } .event-shop-help-modal-image { width: 100%; height: 256px; object-fit: cover; border-top: 1px solid #463714; border-bottom: 1px solid #463714; } .event-shop-help-modal-bot { display: flex; padding: 16px 32px 0 32px; } .event-shop-help-modal-bot-containers { display: flex; flex-direction: column; align-items: center; width: 256px; padding: 10px 25px; } .event-shop-help-modal-icons { width: 24px; height: 24px; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; background: #5b5a56; } .event-shop-help-modal-icon-loot { -webkit-mask-image: url("/fe/lol-static-assets/images/event-shop/loot.png"); } .event-shop-help-modal-icon-currency { -webkit-mask-image: url("/fe/lol-static-assets/images/event-shop/currency.png"); } .event-shop-help-modal-icon-boost { -webkit-mask-image: url("/fe/lol-static-assets/images/event-shop/boost.svg"); } .event-shop-help-modal-topic { line-height: 24px; letter-spacing: 0.07em; padding: 8px; } .event-shop-help-description { font-size: 14px; line-height: 24px; color: #a09b8c; text-transform: none; letter-spacing: 0.03em; } .event-shop-help-modal-vertical-divider { border-right: 1px solid #1e2328; } .event-shop-offer-card { display: flex; position: relative; flex-direction: column; height: 273px; width: 223px; background-color: #010a13; border: solid 1px #1e2328; } .event-shop-token-shop-offer-card-footer { position: relative; text-overflow: ellipsis; width: calc(100% - 20px); margin: 10px; } .event-shop-token-shop-offer-card-image { width: 223px; height: 218px; object-fit: cover; } .event-shop-token-shop-offer-card-title { font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-shop-token-shop-offer-card-price { display: flex; align-content: center; font-size: 12px; font-weight: 400; } .event-shop-token-shop-offer-card-price-currency-icon { width: 20px; } .event-shop-token-shop-offer-card-price-value { display: flex; align-items: center; margin-left: 5px; margin-bottom: 1px; } .event-shop-token-shop-offer-items-size { position: absolute; align-items: center; justify-content: center; display: flex; background-color: #3c3c41; color: #010a13; box-shadow: -2px 2px 0px 0px #010a13, -3px 3px 0px #3c3c41; font-size: 12px; width: 15px; height: 15px; border-radius: 2px; bottom: 2px; right: 0px; } .event-shop-token-shop-highlighted-card { width: 464px; } .event-shop-token-shop-highlighted-card .event-shop-token-shop-offer-card-image { width: inherit; object-fit: cover; } .event-shop-token-shop-card-owned { border-color: #1e282d; } .event-shop-token-shop-card-owned .event-shop-token-shop-offer-card-image { filter: brightness(0.4); } .event-shop-token-shop-card-owned:hover { border-color: #5b5a56; } .event-shop-token-shop-card-owned:hover .event-shop-token-shop-offer-card-image { filter: brightness(0.6); } .event-shop-token-shop-card-owned:active { border-image: linear-gradient(#785a28, #463714) 1; } .event-shop-token-shop-card-available { cursor: pointer; border-image: linear-gradient(#c8aa6e, #a98130, #8a6b32, #6b5028, #6b5028) 1; } .event-shop-token-shop-card-available .event-shop-token-shop-offer-card-image { filter: brightness(0.8); } .event-shop-token-shop-card-available:hover { border-image: linear-gradient(#f0e6d2, #c89b3c) 1; } .event-shop-token-shop-card-available:hover .event-shop-token-shop-offer-card-image { filter: unset; } .event-shop-token-shop-card-available:hover::after { content: ''; position: absolute; inset: -1px; background: linear-gradient(#f0e6d2, #c89b3c); filter: blur(6px); z-index: -1; } .event-shop-token-shop-card-available .event-shop-token-shop-offer-card-price { color: #c8aa6e; } .event-shop-token-shop-card-available:active { border-image: linear-gradient(#785a28, #463714) 1; } .event-shop-token-shop-card-unavailable { border-color: #1e282d; } .event-shop-token-shop-card-unavailable .event-shop-token-shop-offer-card-image { filter: brightness(0.6); } .event-shop-token-shop-card-unavailable:hover { cursor: pointer; border-color: #5b5a56; } .event-shop-token-shop-card-unavailable:hover .event-shop-token-shop-offer-card-price { color: #ff2345; } .event-shop-token-shop-card-unavailable:hover .event-shop-token-shop-offer-card-image { filter: brightness(0.8); } .event-shop-token-shop-card-unavailable:active { border-image: linear-gradient(#785a28, #463714) 1; } .event-shop-token-shop-offer-card-owned-icon { width: 16px; height: 16px; margin-top: 1px; margin-right: 4px; } .event-shop-progression-tooltip-block-bold { font-weight: 750; } .event-shop-token-shop-offer-card-spinner { margin-right: 5px; } .event-shop-page-header { display: flex; padding: 0 32px; height: 43px; align-items: center; border-bottom: 1px solid #1e2328; background: rgba(1,10,19,0.8); backdrop-filter: blur(16px); } .event-shop-page-header-vertical-divider { border-right: 1px solid #1e2328; height: 100%; } .event-shop-page-header-logo { height: 32px; width: 32px; } .event-shop-page-header-name { padding-left: 8px; padding-right: 16px; color: #f0e6d2; } .event-shop-page-header-end-timer { display: flex; padding-left: 16px; padding-right: 16px; color: #c8aa6e; } .event-shop-page-header-end-timer:hover .event-shop-page-header-clock-icon { filter: brightness(0) saturate(100%) invert(86%) sepia(17%) saturate(281%) hue-rotate(345deg) brightness(108%) contrast(88%); } .event-shop-page-header-end-timer:hover .event-shop-page-header-end-timer-text { color: #f0e6d2; } .event-shop-page-header-tooltip-content { background: #1a1c21; min-width: 284px; } .event-shop-page-header-tooltip-block { display: flex; flex-direction: column; align-items: center; } .event-shop-page-header-tooltip-block-top { padding-bottom: 16px; border-bottom: 1px solid #1e2328; } .event-shop-page-header-tooltip-block-bottom { align-items: center; padding-top: 16px; } .event-shop-page-header-clock-icon { width: 13px; height: 13px; margin: 3px 6px 0 0; } .event-shop-page-header-end-timer-text { color: #c8aa6e; line-height: 18px; border-bottom: 1px dashed; } .event-shop-page-header-help-container { height: 100%; width: 40px; display: flex; justify-content: center; align-items: center; } .event-shop-page-header-help-button { cursor: pointer; --uikit-info-icon-width: 16px; --uikit-info-icon-height: 16px; } .event-shop-page-header-description { color: #a09b8c; } .event-shop-page-header-time-tooltip-bot-title { color: #a09b8c; margin-bottom: 5px; } .event-shop-page-header-description-top { color: #a09b8c; } .event-shop-page-header-time-tooltip-top-date { color: #ccc4b3; } .event-shop-page-header-time-tooltip-top-title { margin-bottom: 5px; } .event-shop-progression { display: flex; flex-direction: column; height: 179px; background: rgba(1,10,19,0.8); box-shadow: 0 -26px 26px rgba(0,0,0,0.85); backdrop-filter: blur(16px); } .event-shop-progression-info { display: flex; justify-content: space-between; padding-right: 16px; border-bottom: 1px solid #1e2328; border-top: 1px solid #1e2328; background: rgba(1,10,19,0.4); backdrop-filter: blur(16px); } .event-shop-progression-token-icon { width: 26px; height: 26px; margin: 0 4px 0 4px; } .event-shop-progression-upgrade-button { height: 32px; } .event-shop-progression-ticket-icon { margin-right: 3px; } .event-shop-progression-label-wrapper { display: flex; align-items: center; } .event-shop-progression-label-pass-purchased { height: 40px; display: flex; align-items: center; } .event-shop-progression-check-icon { height: 23px; margin-right: 5px; } .event-shop-progression-pass-purchase { display: flex; align-items: center; } .event-shop-progression-label-tokens { margin-right: 20px; } .event-shop-progression-button-content { display: flex; align-items: center; } .event-shop-progression-unclaimed-wrapper { display: flex; align-items: center; font-weight: 550; color: #c89b3c; margin: 0 5px; } .event-shop-progression-unclaimed-box { border-radius: 4px; width: 23px; height: 22px; background: #c89b3c; margin: 0 8px; text-align: center; display: flex; flex-direction: column; justify-content: center; } .event-shop-progression-unclaimed-box span { color: #010a13; font-weight: 550; } .event-shop-reward-track-wrapper { background: linear-gradient(to top, rgba(1,10,19,0.8) 16.81%, rgba(1,10,19,0) 100%); border-top: thin solid #010a13; width: 100%; } @property --event-shop-token-balance { syntax: '<integer>'; initial-value: 0; inherits: false; } .event-shop-token-shop-balance-amount { display: flex; align-items: center; color: #f0e6d2; flex: none; margin: 0 4px; transition: --event-shop-token-balance 1s; counter-reset: event-shop-token-balance var(--event-shop-token-balance); } .event-shop-token-shop-balance-amount::after { content: counter(event-shop-token-balance); } .event-shop-token-shop { display: flex; width: 100%; } .event-shop-token-shop-header { position: sticky; display: flex; align-items: center; height: 48px; padding: 0 16px; width: 949px; margin: 0; background: #010a13; border: 1px solid #1e2328; box-sizing: border-box; box-shadow: 0px -11px 18px 7px #000; backdrop-filter: blur(16px); top: 0; z-index: 1; } .event-shop-token-shop-name { white-space: nowrap; padding: 0 10px; margin-right: 5px; } .event-shop-token-shop-details { font-weight: normal; white-space: nowrap; margin-left: 10px; } .event-shop-token-shop-balance { display: flex; justify-content: flex-end; align-items: center; height: 28px; width: 100%; } .event-shop-token-shop-balance-label { padding-top: 2px; } .event-shop-token-shop-balance-current { display: flex; justify-content: center; align-items: center; flex: none; margin: 0 6px; } .event-shop-token-shop-balance-icon { width: 26px; height: 26px; flex: none; margin: 0 0 0 4px; } .event-shop-token-shop-buy-tokens-link { flex: none; margin: 0 6px; } .event-shop-token-shop-buy-tokens-tooltip { letter-spacing: 0.05em; } .event-shop-token-shop-offers { height: 351px; box-sizing: border-box; display: flex; flex-direction: column; } .event-shop-token-shop-content { padding-bottom: 0px; width: 100%; } .event-shop-token-shop-scrollable-section { box-sizing: border-box; margin-left: 6px; padding: 10px 16px 0 20px; } .event-shop-token-shop-offers .event-shop-category-offers { padding: 16px 0px; border-bottom: solid 1px #3c3c41; } .event-shop-token-shop-offers .event-shop-category-offers:last-child { padding-bottom: 40px; } .event-shop-xp { display: flex; align-items: center; } .event-shop-xp-label-level, .event-shop-xp-label-progress-locked { display: flex; } .event-shop-xp-repeat { display: flex; min-width: 25px; margin-right: 0px; align-items: center; justify-content: space-between; } .event-shop-xp-iteration { font-family: var(--font-display); font-size: 12px; font-weight: 700; } .event-shop-xp-repeat-icon { width: 15px; margin-bottom: 3px; margin-right: 5px; } .event-shop-xp-repeat-icon-path { fill: #a09b8c; } .event-shop-xp-label-xp-wrapper { display: flex; flex-direction: row; justify-content: center; } .event-shop-xp-label-xp-wrapper.xp-overflow .event-shop-xp-label-xp-current { color: #c8aa6e; } .event-shop-xp-label-xp-wrapper.xp-overflow .event-shop-xp-label-xp { color: #5b5a56; } .event-shop-xp-label-xp-wrapper.unclaimed .event-shop-xp-label-xp-current { color: #c8aa6e; } .event-shop-xp-label-xp-wrapper.unclaimed .event-shop-xp-label-xp { color: #5b5a56; } .event-shop-xp-label-xp { display: flex; } .event-shop-xp-level { display: flex; justify-content: space-between; align-items: center; } .event-shop-xp-level .event-shop-xp-vertical-divider { height: 15px; margin: 0px 10px; width: 0px; } .event-shop-xp-label-level-xp { font-weight: 400; font-size: 14px; margin-top: 1px; } .event-shop-xp-button-content { display: flex; align-items: center; } .event-shop-xp { display: flex; align-items: center; } .event-shop-xp-header-pass-track { padding-left: 32px; padding-right: 16px; } .event-shop-xp-label-level, .event-shop-xp-label-progress-locked { font-family: var(--font-display); font-size: 12px; color: #a09b8c; font-weight: 700; } .event-shop-xp-label-progress-locked { font-size: 14px; letter-spacing: 0.07em; } .event-shop-xp-label-xp { color: #0ac8b9; margin-right: 5px; } .event-shop-xp-vertical-divider { border-right: 1px solid #1e2328; height: 100%; width: 5px; } .event-shop-xp-tooltip-content { background: #010a13; } .event-shop-xp-tooltip-block { display: flex; flex-direction: column; align-items: center; padding: 0, 15px, 16px, 15px; } .event-shop-xp-label-xp-wrapper { display: flex; align-items: center; } .event-shop-xp-tooltip-block-description { display: flex; flex-direction: column; justify-content: center; align-content: center; width: 170px; margin: 5px; margin-right: 15px; } .event-shop-xp-tooltip-block-description-content { width: 170px; white-space: initial; } .event-shop-xp-tooltip-block-description-content span { color: #c89b3c; } .event-shop-xp-tooltip-block-description-header { margin-bottom: 5px; } .event-shop-xp-tooltip-repeat-icon { width: 22px; } .event-shop-xp-horizontal-divider { height: 1px; border-right: 1px solid #1e2328; width: 100%; background: #1e2328; margin-bottom: 10px; } .event-shop-progression-tooltip-block-loop { display: flex; align-items: center; justify-content: center; flex-direction: column; padding-left: 20px; } .event-shop-progression-tooltip-block-loop .event-shop-xp-iteration { font-size: 24px; color: #c8aa6e; } .event-shop-progression-tooltip-block-loop .event-shop-xp-repeat-icon-path { fill: #c8aa6e; } .event-shop-progression-tooltip-block { padding: 10px; } .event-shop-progression-tooltip-block h5 { margin-bottom: 5px; } .event-shop-progression-tooltip-block-repeat { display: flex; padding-right: 15px; padding-left: 15px; align-items: center; } .event-shop-progression-tooltip-block-repeat .event-shop-xp-vertical-divider { border-right: 1px solid #1e2328; height: 80px; width: 5px; } .event-shop-xp-tooltip-repeat { margin-bottom: 2px; } .event-shop-xp-level-tooltip { margin: 0 16px 0 16px; } .event-shop-xp-level-tooltip.is-completed { margin: 0 10px 0 10px; } .event-shop-xp-level-tooltip:hover .event-shop-xp-label-level { color: #aaa; } .event-shop-xp-level-tooltip:hover .event-shop-xp-iteration { color: #cdfafa; } .event-shop-xp-level-tooltip:hover .event-shop-xp-repeat-icon-path { fill: #cdfafa; } .event-shop-xp-level-tooltip:hover .event-shop-xp-label-progress-locked { cursor: pointer; } .event-shop-index { display: flex; flex-direction: column; width: 1055px; height: 639px; background: rgba(1,10,19,0.5); } .event-shop-index-token-shop { display: flex; flex-grow: 1; } .event-shop-index-header { box-shadow: 0 25px 8px rgba(0,0,0,0.8); } .rcp-fe-lol-event-shop-application { display: flex; padding-top: 82px; width: 100%; height: 100%; background: no-repeat center center fixed; background-size: cover; animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; color: #a09b8c; }