.currency-be-component, .currency-rp, .ticker-incident-header, .ready-check-button-accept, .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp), .animated-progress-bar.main .progress-percent-text, .update-available-tooltip h1, .basic-button .play-button-container .play-button-content .play-button-text, .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl), #patcher-progress-tooltip h1 { font-family: var(--font-display); } .navigation-status-ticker-content, .navigation-status-ticker-content-no-link, .ticker-incident-link, .ready-check-status-text .ready-check-status-details, lol-uikit-content-block.lol-patcher-client-patch-modal-body p, .lol-patcher-error-modal ul, .update-available-tooltip .info, #patcher-progress-tooltip .info { font-family: var(--font-body); } .currency-be-component, .currency-rp, .navigation-status-ticker-content, .navigation-status-ticker-content-no-link, .ticker-incident-link, .ticker-incident-header, .ready-check-button-accept, .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp), .ready-check-status-text .ready-check-status-details, lol-uikit-content-block.lol-patcher-client-patch-modal-body p, .animated-progress-bar.main .progress-percent-text, .lol-patcher-error-modal ul, .update-available-tooltip h1, .update-available-tooltip .info, .basic-button .play-button-container .play-button-content .play-button-text, .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl), #patcher-progress-tooltip h1, #patcher-progress-tooltip .info { -webkit-user-select: none; } .currency-be-component, .currency-rp, .navigation-status-ticker-content, .navigation-status-ticker-content-no-link, .ticker-incident-link, .ticker-incident-header, .ready-check-button-accept, .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp), .ready-check-status-text .ready-check-status-details, lol-uikit-content-block.lol-patcher-client-patch-modal-body p, .animated-progress-bar.main .progress-percent-text, .lol-patcher-error-modal ul, .update-available-tooltip h1, .update-available-tooltip .info, .basic-button .play-button-container .play-button-content .play-button-text, .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl), #patcher-progress-tooltip h1, #patcher-progress-tooltip .info { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .currency-be-component, .currency-rp, .ticker-incident-header, .ready-check-button-accept, .ready-check-status-text .ready-check-status-title, .ready-check-status-text .ready-check-status-title:lang(ja-jp), .animated-progress-bar.main .progress-percent-text, .update-available-tooltip h1, .basic-button .play-button-container .play-button-content .play-button-text, .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl), #patcher-progress-tooltip h1 { text-transform: uppercase; } .currency-be-component:lang(ko-kr), .currency-rp:lang(ko-kr), .ticker-incident-header:lang(ko-kr), .ready-check-button-accept:lang(ko-kr), .ready-check-status-text .ready-check-status-title:lang(ko-kr), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(ko-kr), .animated-progress-bar.main .progress-percent-text:lang(ko-kr), .update-available-tooltip h1:lang(ko-kr), .basic-button .play-button-container .play-button-content .play-button-text:lang(ko-kr), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(ko-kr), #patcher-progress-tooltip h1:lang(ko-kr), .currency-be-component:lang(ja-jp), .currency-rp:lang(ja-jp), .ticker-incident-header:lang(ja-jp), .ready-check-button-accept:lang(ja-jp), .ready-check-status-text .ready-check-status-title:lang(ja-jp), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(ja-jp), .animated-progress-bar.main .progress-percent-text:lang(ja-jp), .update-available-tooltip h1:lang(ja-jp), .basic-button .play-button-container .play-button-content .play-button-text:lang(ja-jp), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(ja-jp), #patcher-progress-tooltip h1:lang(ja-jp), .currency-be-component:lang(tr-tr), .currency-rp:lang(tr-tr), .ticker-incident-header:lang(tr-tr), .ready-check-button-accept:lang(tr-tr), .ready-check-status-text .ready-check-status-title:lang(tr-tr), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(tr-tr), .animated-progress-bar.main .progress-percent-text:lang(tr-tr), .update-available-tooltip h1:lang(tr-tr), .basic-button .play-button-container .play-button-content .play-button-text:lang(tr-tr), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(tr-tr), #patcher-progress-tooltip h1:lang(tr-tr), .currency-be-component:lang(el-gr), .currency-rp:lang(el-gr), .ticker-incident-header:lang(el-gr), .ready-check-button-accept:lang(el-gr), .ready-check-status-text .ready-check-status-title:lang(el-gr), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(el-gr), .animated-progress-bar.main .progress-percent-text:lang(el-gr), .update-available-tooltip h1:lang(el-gr), .basic-button .play-button-container .play-button-content .play-button-text:lang(el-gr), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(el-gr), #patcher-progress-tooltip h1:lang(el-gr), .currency-be-component:lang(th-th), .currency-rp:lang(th-th), .ticker-incident-header:lang(th-th), .ready-check-button-accept:lang(th-th), .ready-check-status-text .ready-check-status-title:lang(th-th), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(th-th), .animated-progress-bar.main .progress-percent-text:lang(th-th), .update-available-tooltip h1:lang(th-th), .basic-button .play-button-container .play-button-content .play-button-text:lang(th-th), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(th-th), #patcher-progress-tooltip h1:lang(th-th), .currency-be-component:lang(zh-tw), .currency-rp:lang(zh-tw), .ticker-incident-header:lang(zh-tw), .ready-check-button-accept:lang(zh-tw), .ready-check-status-text .ready-check-status-title:lang(zh-tw), .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(zh-tw), .animated-progress-bar.main .progress-percent-text:lang(zh-tw), .update-available-tooltip h1:lang(zh-tw), .basic-button .play-button-container .play-button-content .play-button-text:lang(zh-tw), .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(zh-tw), #patcher-progress-tooltip h1:lang(zh-tw) { text-transform: none; } .ready-check-status-text .ready-check-status-title { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .ready-check-status-text .ready-check-status-title:lang(ar-ae) { letter-spacing: 0; } .ready-check-status-text .ready-check-status-title:lang(ja-jp) { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .ready-check-status-text .ready-check-status-title:lang(ja-jp):lang(ar-ae) { letter-spacing: 0; } .ready-check-button-accept, .update-available-tooltip h1, #patcher-progress-tooltip h1 { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .ready-check-button-accept:lang(ar-ae), .update-available-tooltip h1:lang(ar-ae), #patcher-progress-tooltip h1:lang(ar-ae) { letter-spacing: 0; } .ticker-incident-header, .animated-progress-bar.main .progress-percent-text, .basic-button .play-button-container .play-button-content .play-button-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .ticker-incident-header:lang(ar-ae), .animated-progress-bar.main .progress-percent-text:lang(ar-ae), .basic-button .play-button-container .play-button-content .play-button-text:lang(ar-ae) { letter-spacing: 0; } .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl) { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(ja-jp) { font-size: 13px; } .basic-button .play-button-container .play-button-content .play-button-text:lang(pl-pl):lang(ar-ae) { letter-spacing: 0; } lol-uikit-content-block.lol-patcher-client-patch-modal-body p { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } lol-uikit-content-block.lol-patcher-client-patch-modal-body p:lang(ar-ae) { letter-spacing: 0; } .navigation-status-ticker-content, .navigation-status-ticker-content-no-link, .lol-patcher-error-modal ul, .update-available-tooltip .info, #patcher-progress-tooltip .info { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .navigation-status-ticker-content:lang(ja-jp), .navigation-status-ticker-content-no-link:lang(ja-jp), .lol-patcher-error-modal ul:lang(ja-jp), .update-available-tooltip .info:lang(ja-jp), #patcher-progress-tooltip .info:lang(ja-jp) { font-size: 13px; } .navigation-status-ticker-content:lang(ar-ae), .navigation-status-ticker-content-no-link:lang(ar-ae), .lol-patcher-error-modal ul:lang(ar-ae), .update-available-tooltip .info:lang(ar-ae), #patcher-progress-tooltip .info:lang(ar-ae) { letter-spacing: 0; } .currency-be-component, .currency-rp { font-size: 14px; font-weight: 700; letter-spacing: 0.075em; color: #cdbe91; } .currency-be-component.active, .currency-rp.active { position: relative; color: #f0e6d2; } .currency-be-component:lang(ar-ae), .currency-rp:lang(ar-ae) { letter-spacing: 0; } .ready-check-status-text .ready-check-status-details { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .ready-check-status-text .ready-check-status-details:lang(ja-jp) { font-size: 13px; } .ready-check-status-text .ready-check-status-details:lang(ar-ae) { letter-spacing: 0; } .ticker-incident-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .ticker-incident-link:lang(ja-jp) { font-size: 13px; } .ticker-incident-link:lang(ar-ae) { letter-spacing: 0; } .ticker-incident-link { color: #0596aa; text-decoration: none; } .ticker-incident-link:hover, .ticker-incident-link.hover { color: #cdfafa; } .ticker-incident-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-navigation/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .ticker-incident-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .ticker-incident-link:hover:after { background-color: #cdfafa; } .currency-be-component { display: flex; color: #f0e6d2; min-width: 5px; pointer-events: auto; align-items: center; } .currency-be-icon-container { display: inline-block; position: relative; height: 17px; width: 17px; margin: 0 4px 0 3px; } .currency-be-icon-container video { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .currency-be-icon-static { height: 100%; width: 100%; background-image: url("/fe/lol-static-assets/images/icon-be-150.png"); background-repeat: no-repeat; background-position: -3px center; background-size: contain; } .currency-rp { color: #f0e6d2; background-repeat: no-repeat; background-position: 0% 50%; background-size: contain; padding-left: 24px; min-width: 5px; pointer-events: auto; } .currency-rp { background-image: url("/fe/lol-static-assets/images/icon-rp-32.png"); background-position: 1px center; background-size: 15px 15px; } .currency-container { display: flex; align-items: center; cursor: default; } .currency-container .currency-rp { margin-left: 14px; margin-right: 10px; } .currency-container-stacked { margin-left: 23px; margin-right: 9px; } .currency-container-stacked .currency-rp { margin-bottom: 5px; } .currency-container-tooltip p { white-space: nowrap; } .main-navigation-menu-item { min-width: 40px; height: 100%; pointer-events: auto; position: relative; --disabled-color: rgba(240,230,210,0.5); } .main-navigation-menu-item:lang(zh-tw), .main-navigation-menu-item:lang(zh-cn), .main-navigation-menu-item:lang(zh-my) { border: 0; border-image-source: linear-gradient(to bottom, transparent 15%, rgba(205,190,145,0.7) 50%, transparent 85%); border-right: 2px solid transparent; border-image-slice: 2; border-image-repeat: stretch; min-width: 68px; } .main-navigation-menu-item:last-of-type { border-right-width: 0; } .main-navigation-menu-item[disabled] .menu-item-icon { background: rgba(240,230,210,0.5); } .main-navigation-menu-item[active] { pointer-events: none; } .main-navigation-menu-item[active] .menu-item-icon { background: #f0e6d2; } .main-navigation-menu-item:hover .menu-item-icon { background: #f0e6d2; } .main-navigation-menu-item .navigation-icon-click-video { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; } .main-navigation-menu-item .navigation-cta-state-machine { position: absolute; pointer-events: none; } .main-navigation-menu-item .navigation-cta-state-machine.navigation-icon-cta { top: 0; left: 0; right: 0; bottom: 0; } .main-navigation-menu-item .navigation-cta-state-machine.navigation-icon-cta .navigation-cta-intro, .main-navigation-menu-item .navigation-cta-state-machine.navigation-icon-cta .navigation-cta-loop { display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .main-navigation-menu-item .navigation-cta-state-machine:not(.navigation-icon-cta) { right: 7px; top: 25px; } .main-navigation-menu-item .navigation-cta-state-machine:not(.navigation-icon-cta) .navigation-cta-intro { position: absolute; top: -60px; right: -60px; } .main-navigation-menu-item .navigation-cta-state-machine:not(.navigation-icon-cta) .navigation-cta-loop { position: absolute; width: 10px; height: 10px; top: -5px; left: -5px; border-radius: 10px; background-color: #c89b3c; } .main-navigation-menu-item .navigation-cta-state-machine:not(.navigation-icon-cta) .navigation-cta-loop::after { content: ''; position: absolute; background-image: url("/fe/lol-navigation/call-to-action-animation.png"); background-size: contain; top: -20px; right: -21px; width: 50px; height: 50px; animation: glowAnimation 0.9s infinite alternate ease-in-out; } .main-navigation-menu-item .menu-item-icon { background-color: #cdbe91; width: 24px; height: 24px; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .main-navigation-menu-item .menu-item-icon:hover { background-color: #f0e6d2; } .main-navigation-menu-item .menu-item-icon:active { background-color: #785a28; } .main-navigation-menu-item .menu-item-icon-placeholder { height: 24px; width: 24px; } @-moz-keyframes glowAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes glowAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes glowAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes glowAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } .right-nav-menu .main-navigation-menu-item:lang(zh-tw):last-of-type, .right-nav-menu .main-navigation-menu-item:lang(zh-cn):last-of-type, .right-nav-menu .main-navigation-menu-item:lang(zh-my):last-of-type { margin-right: 0px; } .right-nav-menu .main-navigation-menu-item:last-of-type { margin-right: 10px; } .rcp-fe-lol-navigation.main-nav-bar { display: flex; position: relative; width: 100%; } .wallet-and-badges { display: flex; align-items: center; margin-right: 26px; margin-bottom: 1px; } .left-nav-menu, .right-nav-menu { display: flex; align-items: center; height: 79px; } .right-nav-vertical-rule { width: 1px; height: 57px; background: linear-gradient(to top, rgba(205,190,145,0) 0%, #cdbe91 50%, rgba(205,190,145,0) 100%); } .navigation-root-component, .navigation-root-component-ticker-only { display: flex; padding-left: 215px; padding-right: 223px; height: 100%; width: 840px; border-bottom: thin solid rgba(240,230,210,0.25); } .navigation-root-component-ticker-only { border-bottom: none; } .navigation-root-component-ticker-only:before { content: none; } .navigation-status-ticker { position: relative; display: none; align-items: center; outline: none; } .navigation-status-ticker .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-blue.png"); } .navigation-status-ticker .ticker-button:hover { background-image: url("/fe/lol-navigation/button-ticker-blue-hover.png"); } .navigation-status-ticker .ticker-button:active { background-image: url("/fe/lol-navigation/button-ticker-blue-active.png"); } .navigation-status-ticker.ticker-flyout-visible .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-blue-active.png"); } .navigation-status-ticker.has-incidents { display: flex; } .navigation-status-ticker.status-offline .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-red.png"); } .navigation-status-ticker.status-offline .ticker-button:hover { background-image: url("/fe/lol-navigation/button-ticker-red-hover.png"); } .navigation-status-ticker.status-offline .ticker-button:active { background-image: url("/fe/lol-navigation/button-ticker-red-active.png"); } .navigation-status-ticker.status-offline.ticker-flyout-visible .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-red-active.png"); } .navigation-status-ticker.status-degraded .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-yellow.png"); } .navigation-status-ticker.status-degraded .ticker-button:hover { background-image: url("/fe/lol-navigation/button-ticker-yellow-hover.png"); } .navigation-status-ticker.status-degraded .ticker-button:active { background-image: url("/fe/lol-navigation/button-ticker-yellow-active.png"); } .navigation-status-ticker.status-degraded.ticker-flyout-visible .ticker-button { background-image: url("/fe/lol-navigation/button-ticker-yellow-active.png"); } .ticker-button { height: 32px; width: 32px; margin-left: -10px; margin-right: 15px; background-size: contain; } .ticker-toggle { height: 32px; width: 32px; cursor: pointer; pointer-events: auto; } .navigation-status-ticker-content, .navigation-status-ticker-content-no-link { direction: rtl; width: 300px; pointer-events: auto; padding: 18px; box-sizing: border-box; } .navigation-status-ticker-content-no-link .status-ticker-incident:last-of-type { padding: 0; } .status-ticker-list { width: 100%; box-sizing: border-box; cursor: default; } .status-ticker-links { display: block; text-align: right; margin-bottom: -4px; } .status-ticker-incident { padding: 15px 0; border-top: thin solid #3c3c41; } .status-ticker-incident:first-of-type { border-top: none; padding-top: 0; margin-top: -4px; } .status-ticker-incident:last-of-type { margin-bottom: -4px; } .ticker-incident-radio { display: none; } .ticker-incident-radio:checked + .ticker-incident-content .ticker-incident-body { display: block; } .ticker-incident-radio:checked + .ticker-incident-content .ticker-incident-link { display: inline; } .ticker-incident-content { display: block; padding: 10px 0; } .ticker-incident-content .ticker-incident-body { display: none; } .ticker-incident-content .ticker-incident-link { display: none; } .ticker-incident-header { width: calc(100% - 15px); padding: 0 0 0 15px; color: #f0e6d2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 0 10px; } .ready-check-button-accept { background-image: url(/fe/lol-navigation/button-accept-default.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 212px; height: 70px; box-sizing: border-box; padding-top: 20px; text-align: center; color: #a3c7c7; cursor: pointer; } .ready-check-button-accept:hover:not(.ready-check-button-accept-disabled) { background-image: url("/fe/lol-static-assets/images/button-accept-hover.png"); color: #cdfafa; } .ready-check-button-accept-disabled { cursor: default; background-image: url("/fe/lol-static-assets/images/button-accept-disabled.png"); color: #5c5b57; } .ready-check-button-decline { width: 120px; margin-top: 8px; transition: 100ms opacity; } .ready-check-map-icon { position: relative; width: 92px; height: 92px; } .ready-check-map-icon .ready-check-map-icon-image { width: 100%; } .ready-check-map-background { -webkit-mask-image: url(/fe/lol-navigation/default-background.png); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; width: 410px; height: 410px; position: absolute; left: calc(50% - 205px); top: calc(50% - 205px); } .ready-check-map-background-declined { -webkit-filter: grayscale(100%); } .ready-check-root-element { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; color: #f0e6d2; width: 530px; height: 530px; -webkit-user-select: none; } .ready-check-root-element .ready-check-visible-state-hack { display: flex; flex-direction: column; justify-content: center; align-items: center; direction: rtl; } .ready-check-buttons-element { position: absolute; display: flex; width: 300px; flex-direction: column; align-items: center; left: calc(50% - 150px); bottom: -11px; } .ready-check-buttons-element .ready-check-decline-button { width: 120px; margin-top: 8px; transition: 100ms opacity; } .ready-check-frame-element { background-image: url("/fe/lol-static-assets/images/ready-check-main-frame.png"); background-repeat: no-repeat; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .ready-check-status-text { position: relative; width: 300px; height: 80px; direction: rtl; } .ready-check-status-text .ready-check-status-title { margin: 10px auto 0 auto; text-align: center; } .ready-check-status-text .ready-check-status-details { color: #a09b8c; text-align: center; margin-top: 5px; } .ready-check-status-text .ready-check-bullet { display: inline-block; margin: 0 0.3em; } .ready-check-timer { position: absolute; top: 2px; left: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; } .ready-check-timer-countdown, .ready-check-timer-accepted-intro, .ready-check-timer-accepted-idle, .ready-check-timer-declined { display: flex; } .update-available-proxy { position: absolute; top: 11px; left: 29px; width: 141px; height: 76px; padding: 7px 0; pointer-events: none; } .patching-progress-bar { width: 174px; height: 122px; position: absolute; top: -22px; left: 16px; pointer-events: none; } .patching-progress-bar.disabled { display: none; } .patching-progress-bar .modal-holder { pointer-events: auto; } .patcher-bar-proxy { position: absolute; z-index: 1; width: 100%; height: 55px; top: 33px; left: 0; pointer-events: auto; } lol-uikit-content-block.lol-patcher-client-patch-modal-body p { display: flex; flex-direction: column; align-items: center; justify-content: center; } .animated-progress-bar { position: relative; width: 100%; height: 100%; } .animated-progress-bar.patching, .animated-progress-bar.repairing { display: block; } .animated-progress-bar.outro { -webkit-animation: fadeout 800ms forwards; -webkit-animation-delay: 1200ms; } .animated-progress-bar.main .global-mask { display: inherit; position: absolute; width: 100%; height: 100%; padding: inherit; } .animated-progress-bar.main .global-mask.active { -webkit-mask-image: url("/fe/lol-static-assets/images/mask-progress-bar-overlay.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center right; } .animated-progress-bar.main .progress-bar-wrapper { position: relative; width: 100%; height: 100%; padding-left: 48px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-animation: fadein 300ms forwards; } .animated-progress-bar.main .progress-bar-wrapper.outro { -webkit-animation: fadeout 300ms forwards; } .animated-progress-bar.main .progress-bar-wrapper .progress-bar-container { position: relative; display: flex; flex-flow: row nowrap; width: 100%; height: 100%; } .animated-progress-bar.main .progress-bar-wrapper .endpoint-container { position: relative; width: 4px; height: 100%; } .animated-progress-bar.main .progress-bar-wrapper .endpoint-container .video-wrapper { position: absolute; width: 174px; height: 122px; top: 0; left: 0; transform: translateX(-124px); } .animated-progress-bar.main .progress-bar-mask { position: relative; width: 0; height: 100%; border-right: 10px solid transparent; padding: 31px 0; box-sizing: border-box; transition: 300ms all; -webkit-mask-image: linear-gradient(to right, #000, #000); } .animated-progress-bar.main .progress-bar-mask .video-wrapper { position: relative; width: 100%; height: 100%; } .animated-progress-bar.main .progress-percent-text { display: flex; flex-direction: column; justify-content: center; position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 31px 0; padding-left: inherit; box-sizing: border-box; text-align: center; text-shadow: 1px 1px 2px #000; line-height: 16px; direction: rtl; } .animated-progress-bar.main .progress-percent-text .phase { font-size: 12px; } .animated-progress-bar.main .video-state { position: absolute; top: 0; left: 0; object-fit: cover; overflow: hidden; box-sizing: border-box; } .animated-progress-bar.main .video-state.main { width: 122px; padding: 14px 0; } .animated-progress-bar.main .video-state.main .loop { top: 14px; } .animated-progress-bar.main .video-state.border { width: 148px; height: 60px; top: -1px; left: -11px; } .animated-progress-bar.main .video-state.endpoint { transition: 300ms all; top: -1px; } .animated-progress-bar.main .video-state.endpoint .intro { width: 92px; height: 122px; left: 78px; } .animated-progress-bar.main .video-state.endpoint .loop { width: 154px; height: 122px; } .animated-progress-bar.main .video-state.frame { padding: 41px 0; padding-left: 12px; } .animated-progress-bar.main .video-state.logo { padding: 33px 0; } .animated-progress-bar.main .video-state.outro { width: 178px; height: 100%; padding-left: 36px; box-sizing: content-box; } .animated-progress-bar.main .video-state.outro .outro, .animated-progress-bar.main .video-state.outro .intro { width: inherit; height: 108px; margin: 7px 0; } .animated-progress-bar.main .video-state.disabled { display: none; } @-webkit-keyframes fadein { from { filter: opacity(0); } to { filter: opacity(1); } } @-webkit-keyframes fadeout { from { filter: opacity(1); } to { filter: opacity(0); display: none !important; } } @-webkit-keyframes indeterminate { 100% { background-position: -200%; } } .patcher-tooltip-holder, .lol-patcher-modal-holder { display: none; } #rcp-fe-lol-patcher-bootstrap { z-index: 10000; display: flex; width: 500px; height: 274px; overflow: hidden; border: 2px solid #1e282d; top: 0; left: 0; box-sizing: border-box; color: #a09b8c; } .lol-patcher-error-modal { direction: rtl; } .lol-patcher-error-modal h6 { text-align: left; margin: 20px 0; } .lol-patcher-error-modal ul { text-align: left; margin: 20px 0; padding-left: 20px; } .long-progress-bar { width: 804px; height: 122px; top: -20px; left: 240px; } .long-progress-bar .animated-progress-bar .global-mask { display: inherit; position: absolute; width: 100%; height: 100%; padding: inherit; } .long-progress-bar .animated-progress-bar .global-mask.active { -webkit-mask-image: url("/fe/lol-static-assets/images/long-mask-progress-bar-overlay.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center right; padding-right: 25px; } .long-progress-bar .animated-progress-bar .frame { position: absolute; top: 40px; left: 12px; } .long-progress-bar .animated-progress-bar .progress-bar-wrapper .endpoint-container .video-wrapper { position: absolute; width: 272px; height: 272px; top: 7px; left: -51px; transform: translateX(-124px); } .long-progress-bar .animated-progress-bar .progress-percent-text { flex-direction: row; justify-content: center; align-items: center; padding: 0; } .long-progress-bar .animated-progress-bar .progress-percent-text span:last-of-type { padding: 0 0 0 5px; } .long-progress-bar .animated-progress-bar .video-state.endpoint { overflow: visible; } .long-progress-bar .animated-progress-bar .video-state.main { width: 754px; } .long-progress-bar .animated-progress-bar .video-state.main .loop { top: 12px; } .long-progress-bar .animated-progress-bar .video-state.border { width: 776px; height: 66px; left: -11px; top: -2px; } .long-progress-bar .animated-progress-bar .video-state.endpoint .loop { width: 272px; height: 120px; margin: 0; } .video-state { width: 100%; height: 100%; } .video-state .intro, .video-state .loop, .video-state .outro { position: absolute; } .video-state .loop, .video-state .outro { -webkit-animation: fadein 100ms forwards; } .video-state .hanging { -webkit-filter: grayscale(); } .video-state.logo .loop { top: 33px; } .video-state.main .loop { top: 17px; } .league-logo { cursor: pointer; } @-webkit-keyframes fadein { from { filter: opacity(0); } to { filter: opacity(1); } } .update-available-tooltip { text-align: center; user-select: none; direction: rtl; } .update-available-tooltip h1 { color: #f0e6d2; margin: 0px; } .update-available-tooltip hr { border-color: #a09b8c; color: #a09b8c; filter: opacity(50%); border-bottom: 0px; margin: 9px 0px 12px; } .update-available-tooltip .info { color: #a09b8c; font-size: 11px; text-align: initial; } .basic-button { position: absolute; top: 10px; left: 29px; width: 162px; height: 58px; padding: 7px 0; box-sizing: border-box; transition: opacity 300ms ease-out; cursor: default; pointer-events: none; } .basic-button .play-button-frame { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("/fe/lol-static-assets/images/play-button-frame-default.png"); transition: 400ms background ease; } .basic-button .play-button-video, .basic-button .play-button-hover-magic { position: absolute; top: -7px; left: 20px; } .basic-button .large-video { position: absolute; top: -25px; padding-left: 2px; } .basic-button .play-button-container { position: relative; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position: 20px center; transition: 400ms 200ms background ease; } .basic-button .play-button-container .play-button-content { position: relative; width: calc(100% - 34px); height: 100%; left: 36px; padding: 6px; box-sizing: border-box; pointer-events: all; cursor: pointer; } .basic-button .play-button-container .play-button-content .play-button-text { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; text-align: center; pointer-events: none; } .basic-button .play-button-container .play-button-content .play-button-text.clicked { color: #3c3c41; } .basic-button .league-logo { position: absolute; top: -6px; left: -13px; cursor: default; } .basic-button.play .play-button-container .play-button-content .play-button-text { width: calc(100% - 16px); } .basic-button:disabled .play-button-content, .basic-button.disabled .play-button-content { cursor: default; } .basic-button:disabled .play-button-container .play-button-content .play-button-text, .basic-button.disabled .play-button-container .play-button-content .play-button-text { color: #3c3c41; } .basic-button.hidden { filter: opacity(0); } .basic-button.hidden .play-button-content { cursor: default; pointer-events: none; } .basic-button.repairing .play-button-container .play-button-text { background-image: url("/fe/lol-static-assets/images/icon-repair.png"); background-size: 36px 36px; background-position: 35px center; background-repeat: no-repeat; } #patcher-progress-tooltip { text-align: center; user-select: none; } #patcher-progress-tooltip h1 { color: #f0e6d2; margin: 0px; } #patcher-progress-tooltip hr { border-color: #a09b8c; color: #a09b8c; filter: opacity(50%); border-bottom: 0px; margin: 9px 0px 12px; } #patcher-progress-tooltip .info { color: #a09b8c; font-size: 11px; text-align: initial; } #patcher-progress-tooltip .filename { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } .tooltip-holder #patcher-progress-tooltip { display: none; } .shutdown-notification-content p { white-space: pre-line; } .navigation-badge-container { display: flex; align-items: center; } .loyalty-navbar-badge { display: flex; align-items: center; justify-content: flex-end; margin: 0 1px 0 15px; width: 34px; height: 61px; pointer-events: auto; } .loyalty-navbar-badge-icon { width: 33px; height: 42px; background: url("/fe/lol-static-assets/images/loyalty-badge-PCBRewards.png") center center no-repeat; background-size: cover; } .loyalty-tooltip-unlocked-wrapper { display: flex; } .loyalty-tooltip-unlocked-logo { background: url("/fe/lol-static-assets/images/loyalty-icon-league-unlock.png") center center no-repeat; background-size: cover; text-align: center; height: 50px; width: 50px; margin: 7px 0 0 7px; } .loyalty-tooltip-unlocked-desc { text-align: right; height: 100%; } .loyalty-tooltip-lolcafe-wrapper { display: flex; align-items: center; } .loyalty-tooltip-lolcafe-logo { background: url("/fe/lol-static-assets/images/loyalty-icon-lolcafe2.png") center center no-repeat; background-size: cover; width: 77px; height: 92px; margin: 5px 0 5px 10px; } .loyalty-tooltip-lolcafe-desc { text-align: right; } .screen-root[data-screen-name='lol-kr-rating-screen'] { z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } .screen-root[data-screen-name='lol-kr-rating-screen'] lol-uikit-full-page-backdrop { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; bottom: 0; right: 0; left: 0; background: #000; -webkit-animation: ratingScreenFadeOut 6000ms forwards; animation: ratingScreenFadeOut 6000ms forwards; } .screen-root[data-screen-name='lol-kr-rating-screen'] lol-uikit-dialog-frame { -webkit-animation: ratingScreenFadeInOut 5400ms forwards; animation: ratingScreenFadeInOut 5400ms forwards; } .lol-kr-rating-screen { max-width: 1160px; max-height: 640px; } lol-uikit-content-block.lol-kr-playtime-reminder-toast-content[type=notification] { width: 300px; } @-moz-keyframes ratingScreenFadeInOut { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } } @-webkit-keyframes ratingScreenFadeInOut { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } } @-o-keyframes ratingScreenFadeInOut { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } } @keyframes ratingScreenFadeInOut { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } } @-moz-keyframes ratingScreenFadeOut { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes ratingScreenFadeOut { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes ratingScreenFadeOut { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } @keyframes ratingScreenFadeOut { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } .rcp-fe-lol-uikit-full-page-modal-iframe { position: absolute; display: flex; width: 100%; height: 100%; -webkit-user-select: none; } div[data-screen-name="rcp-fe-lol-home"] { position: relative; overflow: hidden; width: 100%; height: 100%; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home { width: 100%; height: 100%; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home .root-home { margin-top: 20vh; font-size: 100px; color: #fff; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-user-select: none; border: none; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home .rcp-fe-lol-home-sub-nav lol-uikit-navigation-item:only-child { display: none; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home .wrapper { width: 100%; height: 100%; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home-content { position: relative; top: 0; left: 0; color: #fff; background-color: #000; border: 0; margin: 0; padding: 0; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home-sub-nav { -webkit-user-select: none; position: absolute; top: 79px; left: 35px; border: 0; margin: 0; padding: 0; } div[data-screen-name="rcp-fe-lol-home"] .rcp-fe-lol-home-sub-nav lol-uikit-navigation-item { direction: rtl; margin-top: 9px; } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 50%; align-items: center; transform: translateY(50%); } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error .rcp-fe-lol-home-error-group { width: 300px; margin: 0 auto; } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error .rcp-fe-lol-home-error-group .rcp-fe-lol-home-error-wrench { width: 76px; height: 76px; margin: 0 auto -4px; background-size: contain; background-image: url("/fe/lol-static-assets/images/icon-repair.png"); background-repeat: no-repeat; } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error .rcp-fe-lol-home-error-group .rcp-fe-lol-home-error-content { direction: rtl; text-align: center; } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error .rcp-fe-lol-home-error-group .rcp-fe-lol-home-error-btn-container { justify-content: center; display: flex; margin-top: 15px; } div[data-screen-name="rcp-fe-lol-home"] #rcp-fe-lol-home-error .rcp-fe-lol-home-error-group .rcp-fe-lol-home-error-retry-spinner { display: none; width: 32px; height: 32px; animation: spin 1s linear 0s infinite; background-size: contain; background-image: url("$image-rootspinner.png"); background-repeat: no-repeat; } @-moz-keyframes spin { 100% { transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { transform: rotate(360deg); } } @-o-keyframes spin { 100% { transform: rotate(360deg); } } @keyframes spin { 100% { transform: rotate(360deg); } } div[data-screen-name="rcp-fe-lol-home"]:not(.active) .rcp-fe-lol-home-loading-spinner { display: none; } .rcp-fe-lol-home-article-loading-spinner, div[data-screen-name="rcp-fe-lol-home"].active .rcp-fe-lol-home-loading-spinner { display: none; visibility: hidden; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: transparent url("/fe/lol-static-assets/images/spinner.png") no-repeat 50% 50%; background-size: contain; } .rcp-fe-lol-home-article-loading-spinner.loading, div[data-screen-name="rcp-fe-lol-home"].active .rcp-fe-lol-home-loading-spinner.loading { display: block; animation: rcp-fe-lol-home-loading-fadein 250ms forwards, rcp-fe-lol-home-loading-spin 4000ms infinite linear; } .rcp-fe-lol-home-article-loading-spinner.loaded, div[data-screen-name="rcp-fe-lol-home"].active .rcp-fe-lol-home-loading-spinner.loaded { display: none; } .precache-iframe { position: absolute; bottom: 0; left: 0; visibility: hidden; width: 1px; height: 1px; pointer-events: none; } @-moz-keyframes rcp-fe-lol-home-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes rcp-fe-lol-home-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes rcp-fe-lol-home-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rcp-fe-lol-home-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rcp-fe-lol-home-loading-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @-webkit-keyframes rcp-fe-lol-home-loading-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @-o-keyframes rcp-fe-lol-home-loading-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @keyframes rcp-fe-lol-home-loading-fadeout { 0% { visibility: visible; opacity: 1; } 99% { visibility: visible; opacity: 0; } 100% { visibility: hidden; opacity: 0; } } @-moz-keyframes rcp-fe-lol-home-loading-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @-webkit-keyframes rcp-fe-lol-home-loading-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @-o-keyframes rcp-fe-lol-home-loading-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @keyframes rcp-fe-lol-home-loading-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } div[data-screen-name='rcp-fe-lol-navigation-screen'] { height: 79px; width: 1278px; border-top: 2px solid #785a28; box-sizing: border-box; } div[data-screen-name='rcp-fe-lol-navigation-screen'] .rcp-fe-lol-navigation-app.navbar_backdrop:before { content: ''; position: absolute; left: 0; top: 0; width: 1057px; height: 100%; background-color: rgba(1,0,13,0.3); } .rcp-fe-lol-navigation-app { height: 100%; width: 1055px; -webkit-user-select: none; } #rcp-fe-viewport-root #rcp-fe-lol-navigation-app { pointer-events: none; } .lol-tooltip-component { display: none; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm { text-transform: uppercase; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ko-kr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ja-jp), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(tr-tr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(el-gr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(th-th), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(zh-tw) { text-transform: none; } .decorated-footer { width: 100%; display: flex; flex-direction: row; justify-content: center; padding: 0 0 1px; height: 50px; box-sizing: border-box; } .decorated-footer .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; padding-bottom: 15px; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm { display: flex; min-width: 160px; pointer-events: auto; } .decorated-footer .button-img { width: 30px; height: 30px; background-size: contain; background-color: transparent; border: 0px; outline: 0px; } .decorated-footer .button-img.close { background-image: url(/fe/lol-navigation/button_close.png); } .decorated-footer .button-img.close:hover { background-image: url(/fe/lol-navigation/button_close_hover.png); } .decorated-footer .button-img.close:active { background-image: url(/fe/lol-navigation/button_close_click.png); } .decorated-footer .button-img.close:disabled { background-image: url(/fe/lol-navigation/button_close_inactive.png); } .decorated-footer .decorated-footer-decoration { display: flex; position: relative; flex: 1 1 auto; height: 34px; margin-top: 15px; } .decorated-footer .decorated-footer-decoration.decorated-footer-left .button { position: absolute; top: -13px; right: 2px; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { font-family: var(--font-display); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { -webkit-user-select: none; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { text-transform: uppercase; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ko-kr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ja-jp), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(tr-tr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(el-gr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(th-th), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(zh-tw) { text-transform: none; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { color: #c8aa6e; font-size: 14px; font-weight: 700; letter-spacing: 0.0325em; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ar-ae) { letter-spacing: 0; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover { color: #f0e6d2; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:disabled, .arrow-footer[version="7.13"] .confirm-button-container button.confirm:disabled:hover, .arrow-footer[version="7.13"] .confirm-button-container button.confirm[disabled='true'], .arrow-footer[version="7.13"] .confirm-button-container button.confirm[disabled='true']:hover { color: #5c5b57; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active { color: #785a28; } .arrow-footer[version="7.13"] { width: 100%; display: flex; flex-direction: row; justify-content: center; padding: 0 0 1px; height: 51px; box-sizing: border-box; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm { margin-left: 0px; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm .left-confirm { background-image: url(/fe/lol-navigation/LeftStraightDefault.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-navigation/LeftStraightHover.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-navigation/LeftStraightClick.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-navigation/LeftStraightDisabled.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-navigation/LeftStraightCompleted.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.close { display: none; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container .border-bg .left-border-bg { background-image: url(/fe/lol-navigation/BGLeftStraight.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container .border-bg .middle-border-bg { margin: 0 7px; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration { flex-direction: column; justify-content: center; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child { background-size: 100% 100%; width: 256px; height: 8px; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child.arrow-footer-decoration-left { margin-right: 50px; align-self: flex-end; background-image: url(/fe/lol-navigation/FooterMetalDecorationLeft.png); } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child.arrow-footer-decoration-right { margin-left: 50px; align-self: flex-start; background-image: url(/fe/lol-navigation/FooterMetalDecorationRight.png); } .arrow-footer[version="7.13"] .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; } .arrow-footer[version="7.13"] .confirm-button-container .border-bg { position: absolute; width: 100%; height: 44px; display: flex; top: -5px; } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .left-border-bg { height: 44px; width: 29px; position: absolute; top: 0px; left: -6px; background-size: 100% 100%; background-image: url(/fe/lol-navigation/BGLeft.png); } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .middle-border-bg { flex-grow: 1; height: 44px; margin: 0px 12px; background-size: contain; background-image: url(/fe/lol-navigation/BGMid.png); } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .right-border-bg { height: 44px; width: 26px; position: absolute; top: 0; right: -6px; background-size: 100% 100%; background-image: url(/fe/lol-navigation/BGRight.png); } .arrow-footer[version="7.13"] .confirm-button-container button { border: 0; outline: 0; padding: 0; background-color: transparent; cursor: pointer; } .arrow-footer[version="7.13"] .confirm-button-container button.disabled { cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { height: 34px; min-width: 170px; margin-left: 29px; padding-right: 1px; color: #a3c7c7; position: relative; display: flex; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm > div { background-size: 100% 100%; height: 34px; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .left-confirm { width: 12px; background-image: url(/fe/lol-navigation/LeftDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm { display: flex; justify-content: center; align-items: center; flex-grow: 1; padding: 0px 10px; background-repeat: repeat-x; background-image: url(/fe/lol-navigation/MidDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm:lang(ar-ae) { direction: rtl; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .right-confirm { width: 17px; background-image: url(/fe/lol-navigation/RightDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-navigation/LeftHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .middle-confirm { background-image: url(/fe/lol-navigation/MidHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .right-confirm { background-image: url(/fe/lol-navigation/RightHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active { color: #005a82; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-navigation/LeftClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .middle-confirm { background-image: url(/fe/lol-navigation/MidClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .right-confirm { background-image: url(/fe/lol-navigation/RightClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled { color: #5c5b57; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-navigation/LeftDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .middle-confirm { background-image: url(/fe/lol-navigation/MidDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .right-confirm { background-image: url(/fe/lol-navigation/RightDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed { color: #c89b3c; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-navigation/LeftCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .middle-confirm { background-image: url(/fe/lol-navigation/MidCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .right-confirm { background-image: url(/fe/lol-navigation/RightCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close { width: 34px; height: 34px; background-size: contain; position: absolute; left: 0px; background-image: url(/fe/lol-navigation/Normal.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close .close-icon { height: 34px; width: 34px; background-size: 18px; background-repeat: no-repeat; background-position: center; background-image: url(/fe/lol-navigation/Exit_Default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close[type="back"] .close-icon { background-image: url(/fe/lol-navigation/Back_default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover { background-image: url(/fe/lol-navigation/Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover .close-icon { background-image: url(/fe/lol-navigation/Exit_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover[type="back"] .close-icon { background-image: url(/fe/lol-navigation/Back_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active { background-image: url(/fe/lol-navigation/Clicked.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active .close-icon { background-image: url(/fe/lol-navigation/Exit_Click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active[type="back"] .close-icon { background-image: url(/fe/lol-navigation/Back_click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled { background-image: url(/fe/lol-navigation/Disabled.png); cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled .close-icon { background-image: url(/fe/lol-navigation/Exit_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled[type="back"] .close-icon { background-image: url(/fe/lol-navigation/Back_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed { cursor: default; background-image: url(/fe/lol-navigation/Completed.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed .close-icon { background-image: url(/fe/lol-navigation/Checkmark.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed[type="back"] .close-icon { background-image: url(/fe/lol-navigation/Checkmark.png); } .arrow-footer[version="7.13"] .arrow-footer-decoration { display: flex; position: relative; flex: 1 1 auto; height: 34px; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button, .basic-footer .confirm-button-container lol-uikit-flat-button { text-transform: uppercase; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ko-kr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(ko-kr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ja-jp), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(ja-jp), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(tr-tr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(tr-tr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(el-gr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(el-gr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(th-th), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(th-th), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(zh-tw), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(zh-tw) { text-transform: none; } .basic-footer { padding-left: 34px; padding-right: 35px; } .basic-footer { width: 100%; display: flex; flex-direction: row; justify-content: center; height: 48px; box-sizing: border-box; } .basic-footer .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; flex-grow: 1; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button, .basic-footer .confirm-button-container lol-uikit-flat-button { display: flex; min-width: 160px; pointer-events: auto; margin-left: 10px; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button:last-child, .basic-footer .confirm-button-container lol-uikit-flat-button:last-child { margin-right: 10px; } .basic-footer .confirm-button-container::after, .basic-footer .confirm-button-container::before { display: flex; border-top: thin solid #785a28; margin-top: 16px; height: 1px; flex-grow: 1; content: " "; } .media-fader { position: absolute; top: 0; } .media-fader .media-fader-asset { -webkit-user-drag: none; } .media-swapper { position: relative; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-title { font-family: var(--font-display); } .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-header { font-family: var(--font-body); } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-title, .honor-late-recognition-header { -webkit-user-select: none; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-title, .honor-late-recognition-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-title { text-transform: uppercase; } .honor-late-recognition-component h1:lang(ko-kr), .honor-late-recognition-component h1.subhead:lang(ko-kr), .honor-late-recognition-component h1.preserve-case:lang(ko-kr), .honor-late-recognition-component h2:lang(ko-kr), .honor-late-recognition-component h2.subhead:lang(ko-kr), .honor-late-recognition-component h2.preserve-case:lang(ko-kr), .honor-late-recognition-component h3:lang(ko-kr), .honor-late-recognition-component h3.subhead:lang(ko-kr), .honor-late-recognition-component h3.preserve-case:lang(ko-kr), .honor-late-recognition-component h4:lang(ko-kr), .honor-late-recognition-component h4.subhead:lang(ko-kr), .honor-late-recognition-component h4.preserve-case:lang(ko-kr), .honor-late-recognition-component h5:lang(ko-kr), .honor-late-recognition-component h5.subhead:lang(ko-kr), .honor-late-recognition-component h5.preserve-case:lang(ko-kr), .honor-late-recognition-component h6:lang(ko-kr), .honor-late-recognition-component h6.subhead:lang(ko-kr), .honor-late-recognition-component h6.preserve-case:lang(ko-kr), .honor-late-recognition-component ul.title-list li:lang(ko-kr), .honor-late-recognition-title:lang(ko-kr), .honor-late-recognition-component h1:lang(ja-jp), .honor-late-recognition-component h1.subhead:lang(ja-jp), .honor-late-recognition-component h1.preserve-case:lang(ja-jp), .honor-late-recognition-component h2:lang(ja-jp), .honor-late-recognition-component h2.subhead:lang(ja-jp), .honor-late-recognition-component h2.preserve-case:lang(ja-jp), .honor-late-recognition-component h3:lang(ja-jp), .honor-late-recognition-component h3.subhead:lang(ja-jp), .honor-late-recognition-component h3.preserve-case:lang(ja-jp), .honor-late-recognition-component h4:lang(ja-jp), .honor-late-recognition-component h4.subhead:lang(ja-jp), .honor-late-recognition-component h4.preserve-case:lang(ja-jp), .honor-late-recognition-component h5:lang(ja-jp), .honor-late-recognition-component h5.subhead:lang(ja-jp), .honor-late-recognition-component h5.preserve-case:lang(ja-jp), .honor-late-recognition-component h6:lang(ja-jp), .honor-late-recognition-component h6.subhead:lang(ja-jp), .honor-late-recognition-component h6.preserve-case:lang(ja-jp), .honor-late-recognition-component ul.title-list li:lang(ja-jp), .honor-late-recognition-title:lang(ja-jp), .honor-late-recognition-component h1:lang(tr-tr), .honor-late-recognition-component h1.subhead:lang(tr-tr), .honor-late-recognition-component h1.preserve-case:lang(tr-tr), .honor-late-recognition-component h2:lang(tr-tr), .honor-late-recognition-component h2.subhead:lang(tr-tr), .honor-late-recognition-component h2.preserve-case:lang(tr-tr), .honor-late-recognition-component h3:lang(tr-tr), .honor-late-recognition-component h3.subhead:lang(tr-tr), .honor-late-recognition-component h3.preserve-case:lang(tr-tr), .honor-late-recognition-component h4:lang(tr-tr), .honor-late-recognition-component h4.subhead:lang(tr-tr), .honor-late-recognition-component h4.preserve-case:lang(tr-tr), .honor-late-recognition-component h5:lang(tr-tr), .honor-late-recognition-component h5.subhead:lang(tr-tr), .honor-late-recognition-component h5.preserve-case:lang(tr-tr), .honor-late-recognition-component h6:lang(tr-tr), .honor-late-recognition-component h6.subhead:lang(tr-tr), .honor-late-recognition-component h6.preserve-case:lang(tr-tr), .honor-late-recognition-component ul.title-list li:lang(tr-tr), .honor-late-recognition-title:lang(tr-tr), .honor-late-recognition-component h1:lang(el-gr), .honor-late-recognition-component h1.subhead:lang(el-gr), .honor-late-recognition-component h1.preserve-case:lang(el-gr), .honor-late-recognition-component h2:lang(el-gr), .honor-late-recognition-component h2.subhead:lang(el-gr), .honor-late-recognition-component h2.preserve-case:lang(el-gr), .honor-late-recognition-component h3:lang(el-gr), .honor-late-recognition-component h3.subhead:lang(el-gr), .honor-late-recognition-component h3.preserve-case:lang(el-gr), .honor-late-recognition-component h4:lang(el-gr), .honor-late-recognition-component h4.subhead:lang(el-gr), .honor-late-recognition-component h4.preserve-case:lang(el-gr), .honor-late-recognition-component h5:lang(el-gr), .honor-late-recognition-component h5.subhead:lang(el-gr), .honor-late-recognition-component h5.preserve-case:lang(el-gr), .honor-late-recognition-component h6:lang(el-gr), .honor-late-recognition-component h6.subhead:lang(el-gr), .honor-late-recognition-component h6.preserve-case:lang(el-gr), .honor-late-recognition-component ul.title-list li:lang(el-gr), .honor-late-recognition-title:lang(el-gr), .honor-late-recognition-component h1:lang(th-th), .honor-late-recognition-component h1.subhead:lang(th-th), .honor-late-recognition-component h1.preserve-case:lang(th-th), .honor-late-recognition-component h2:lang(th-th), .honor-late-recognition-component h2.subhead:lang(th-th), .honor-late-recognition-component h2.preserve-case:lang(th-th), .honor-late-recognition-component h3:lang(th-th), .honor-late-recognition-component h3.subhead:lang(th-th), .honor-late-recognition-component h3.preserve-case:lang(th-th), .honor-late-recognition-component h4:lang(th-th), .honor-late-recognition-component h4.subhead:lang(th-th), .honor-late-recognition-component h4.preserve-case:lang(th-th), .honor-late-recognition-component h5:lang(th-th), .honor-late-recognition-component h5.subhead:lang(th-th), .honor-late-recognition-component h5.preserve-case:lang(th-th), .honor-late-recognition-component h6:lang(th-th), .honor-late-recognition-component h6.subhead:lang(th-th), .honor-late-recognition-component h6.preserve-case:lang(th-th), .honor-late-recognition-component ul.title-list li:lang(th-th), .honor-late-recognition-title:lang(th-th), .honor-late-recognition-component h1:lang(zh-tw), .honor-late-recognition-component h1.subhead:lang(zh-tw), .honor-late-recognition-component h1.preserve-case:lang(zh-tw), .honor-late-recognition-component h2:lang(zh-tw), .honor-late-recognition-component h2.subhead:lang(zh-tw), .honor-late-recognition-component h2.preserve-case:lang(zh-tw), .honor-late-recognition-component h3:lang(zh-tw), .honor-late-recognition-component h3.subhead:lang(zh-tw), .honor-late-recognition-component h3.preserve-case:lang(zh-tw), .honor-late-recognition-component h4:lang(zh-tw), .honor-late-recognition-component h4.subhead:lang(zh-tw), .honor-late-recognition-component h4.preserve-case:lang(zh-tw), .honor-late-recognition-component h5:lang(zh-tw), .honor-late-recognition-component h5.subhead:lang(zh-tw), .honor-late-recognition-component h5.preserve-case:lang(zh-tw), .honor-late-recognition-component h6:lang(zh-tw), .honor-late-recognition-component h6.subhead:lang(zh-tw), .honor-late-recognition-component h6.preserve-case:lang(zh-tw), .honor-late-recognition-component ul.title-list li:lang(zh-tw), .honor-late-recognition-title:lang(zh-tw) { text-transform: none; } .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component ul.title-list li { text-transform: none; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .honor-late-recognition-component h1:lang(ar-ae), .honor-late-recognition-component h1.subhead:lang(ar-ae), .honor-late-recognition-component h1.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h1.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h1.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h1.subhead { color: #a09b8c; } .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .honor-late-recognition-component h2:lang(ar-ae), .honor-late-recognition-component h2.subhead:lang(ar-ae), .honor-late-recognition-component h2.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h2.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h2.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h2.subhead { color: #a09b8c; } .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .honor-late-recognition-component h3:lang(ar-ae), .honor-late-recognition-component h3.subhead:lang(ar-ae), .honor-late-recognition-component h3.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h3.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h3.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h3.subhead { color: #a09b8c; } .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .honor-late-recognition-component h4:lang(ar-ae), .honor-late-recognition-component h4.subhead:lang(ar-ae), .honor-late-recognition-component h4.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h4.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h4.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h4.subhead { color: #a09b8c; } .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component ul.title-list li { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .honor-late-recognition-component h5:lang(ar-ae), .honor-late-recognition-component h5.subhead:lang(ar-ae), .honor-late-recognition-component h5.preserve-case:lang(ar-ae), .honor-late-recognition-component ul.title-list li:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component ul.title-list li { letter-spacing: 0.0375em; } .honor-late-recognition-component h5.preserve-case:lang(ar-ae), .honor-late-recognition-component ul.title-list li:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h5.subhead { color: #a09b8c; } .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-title { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .honor-late-recognition-component h6:lang(ja-jp), .honor-late-recognition-component h6.subhead:lang(ja-jp), .honor-late-recognition-component h6.preserve-case:lang(ja-jp), .honor-late-recognition-title:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component h6:lang(ar-ae), .honor-late-recognition-component h6.subhead:lang(ar-ae), .honor-late-recognition-component h6.preserve-case:lang(ar-ae), .honor-late-recognition-title:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h6.preserve-case { letter-spacing: 0.0375em; } .honor-late-recognition-component h6.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h6.subhead { color: #a09b8c; } .honor-late-recognition-component p { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component p:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component p:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component .lol-typekit-label { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component .lol-typekit-label:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component .lol-typekit-label:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-header { color: #a09b8c; font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component .lol-typekit-value:lang(ja-jp), .honor-late-recognition-header:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component .lol-typekit-value:lang(ar-ae), .honor-late-recognition-header:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component a:link:lang(ja-jp), .honor-late-recognition-component a:visited:lang(ja-jp), .honor-late-recognition-component a:link.display:lang(ja-jp), .honor-late-recognition-component a:visited.display:lang(ja-jp), .honor-late-recognition-component a:link.external:lang(ja-jp), .honor-late-recognition-component a:visited.external:lang(ja-jp), .honor-late-recognition-component a:link.external-display:lang(ja-jp), .honor-late-recognition-component a:visited.external-display:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component a:link:lang(ar-ae), .honor-late-recognition-component a:visited:lang(ar-ae), .honor-late-recognition-component a:link.display:lang(ar-ae), .honor-late-recognition-component a:visited.display:lang(ar-ae), .honor-late-recognition-component a:link.external:lang(ar-ae), .honor-late-recognition-component a:visited.external:lang(ar-ae), .honor-late-recognition-component a:link.external-display:lang(ar-ae), .honor-late-recognition-component a:visited.external-display:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display { color: #cdbe91; } .honor-late-recognition-component a:link:hover, .honor-late-recognition-component a:visited:hover, .honor-late-recognition-component a:link.display:hover, .honor-late-recognition-component a:visited.display:hover, .honor-late-recognition-component a:link.hover, .honor-late-recognition-component a:visited.hover, .honor-late-recognition-component a:link.display.hover, .honor-late-recognition-component a:visited.display.hover { color: #f0e6d2; } .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display { color: #0596aa; text-decoration: none; } .honor-late-recognition-component a:link.external:hover, .honor-late-recognition-component a:visited.external:hover, .honor-late-recognition-component a:link.external-display:hover, .honor-late-recognition-component a:visited.external-display:hover, .honor-late-recognition-component a:link.external.hover, .honor-late-recognition-component a:visited.external.hover, .honor-late-recognition-component a:link.external-display.hover, .honor-late-recognition-component a:visited.external-display.hover { color: #cdfafa; } .honor-late-recognition-component a:link.external:after, .honor-late-recognition-component a:visited.external:after, .honor-late-recognition-component a:link.external-display:after, .honor-late-recognition-component a:visited.external-display:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-navigation/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .honor-late-recognition-component a:link.external:lang(ar-ae):after, .honor-late-recognition-component a:visited.external:lang(ar-ae):after, .honor-late-recognition-component a:link.external-display:lang(ar-ae):after, .honor-late-recognition-component a:visited.external-display:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .honor-late-recognition-component a:link.external:hover:after, .honor-late-recognition-component a:visited.external:hover:after, .honor-late-recognition-component a:link.external-display:hover:after, .honor-late-recognition-component a:visited.external-display:hover:after { background-color: #cdfafa; } .honor-late-recognition-component .lol-typekit-value { color: #f0e6d2; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-title { font-family: var(--font-display); } .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-header { font-family: var(--font-body); } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-title, .honor-late-recognition-header { -webkit-user-select: none; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component p, .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-component .lol-typekit-label, .honor-late-recognition-title, .honor-late-recognition-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component ul.title-list li, .honor-late-recognition-title { text-transform: uppercase; } .honor-late-recognition-component h1:lang(ko-kr), .honor-late-recognition-component h1.subhead:lang(ko-kr), .honor-late-recognition-component h1.preserve-case:lang(ko-kr), .honor-late-recognition-component h2:lang(ko-kr), .honor-late-recognition-component h2.subhead:lang(ko-kr), .honor-late-recognition-component h2.preserve-case:lang(ko-kr), .honor-late-recognition-component h3:lang(ko-kr), .honor-late-recognition-component h3.subhead:lang(ko-kr), .honor-late-recognition-component h3.preserve-case:lang(ko-kr), .honor-late-recognition-component h4:lang(ko-kr), .honor-late-recognition-component h4.subhead:lang(ko-kr), .honor-late-recognition-component h4.preserve-case:lang(ko-kr), .honor-late-recognition-component h5:lang(ko-kr), .honor-late-recognition-component h5.subhead:lang(ko-kr), .honor-late-recognition-component h5.preserve-case:lang(ko-kr), .honor-late-recognition-component h6:lang(ko-kr), .honor-late-recognition-component h6.subhead:lang(ko-kr), .honor-late-recognition-component h6.preserve-case:lang(ko-kr), .honor-late-recognition-component ul.title-list li:lang(ko-kr), .honor-late-recognition-title:lang(ko-kr), .honor-late-recognition-component h1:lang(ja-jp), .honor-late-recognition-component h1.subhead:lang(ja-jp), .honor-late-recognition-component h1.preserve-case:lang(ja-jp), .honor-late-recognition-component h2:lang(ja-jp), .honor-late-recognition-component h2.subhead:lang(ja-jp), .honor-late-recognition-component h2.preserve-case:lang(ja-jp), .honor-late-recognition-component h3:lang(ja-jp), .honor-late-recognition-component h3.subhead:lang(ja-jp), .honor-late-recognition-component h3.preserve-case:lang(ja-jp), .honor-late-recognition-component h4:lang(ja-jp), .honor-late-recognition-component h4.subhead:lang(ja-jp), .honor-late-recognition-component h4.preserve-case:lang(ja-jp), .honor-late-recognition-component h5:lang(ja-jp), .honor-late-recognition-component h5.subhead:lang(ja-jp), .honor-late-recognition-component h5.preserve-case:lang(ja-jp), .honor-late-recognition-component h6:lang(ja-jp), .honor-late-recognition-component h6.subhead:lang(ja-jp), .honor-late-recognition-component h6.preserve-case:lang(ja-jp), .honor-late-recognition-component ul.title-list li:lang(ja-jp), .honor-late-recognition-title:lang(ja-jp), .honor-late-recognition-component h1:lang(tr-tr), .honor-late-recognition-component h1.subhead:lang(tr-tr), .honor-late-recognition-component h1.preserve-case:lang(tr-tr), .honor-late-recognition-component h2:lang(tr-tr), .honor-late-recognition-component h2.subhead:lang(tr-tr), .honor-late-recognition-component h2.preserve-case:lang(tr-tr), .honor-late-recognition-component h3:lang(tr-tr), .honor-late-recognition-component h3.subhead:lang(tr-tr), .honor-late-recognition-component h3.preserve-case:lang(tr-tr), .honor-late-recognition-component h4:lang(tr-tr), .honor-late-recognition-component h4.subhead:lang(tr-tr), .honor-late-recognition-component h4.preserve-case:lang(tr-tr), .honor-late-recognition-component h5:lang(tr-tr), .honor-late-recognition-component h5.subhead:lang(tr-tr), .honor-late-recognition-component h5.preserve-case:lang(tr-tr), .honor-late-recognition-component h6:lang(tr-tr), .honor-late-recognition-component h6.subhead:lang(tr-tr), .honor-late-recognition-component h6.preserve-case:lang(tr-tr), .honor-late-recognition-component ul.title-list li:lang(tr-tr), .honor-late-recognition-title:lang(tr-tr), .honor-late-recognition-component h1:lang(el-gr), .honor-late-recognition-component h1.subhead:lang(el-gr), .honor-late-recognition-component h1.preserve-case:lang(el-gr), .honor-late-recognition-component h2:lang(el-gr), .honor-late-recognition-component h2.subhead:lang(el-gr), .honor-late-recognition-component h2.preserve-case:lang(el-gr), .honor-late-recognition-component h3:lang(el-gr), .honor-late-recognition-component h3.subhead:lang(el-gr), .honor-late-recognition-component h3.preserve-case:lang(el-gr), .honor-late-recognition-component h4:lang(el-gr), .honor-late-recognition-component h4.subhead:lang(el-gr), .honor-late-recognition-component h4.preserve-case:lang(el-gr), .honor-late-recognition-component h5:lang(el-gr), .honor-late-recognition-component h5.subhead:lang(el-gr), .honor-late-recognition-component h5.preserve-case:lang(el-gr), .honor-late-recognition-component h6:lang(el-gr), .honor-late-recognition-component h6.subhead:lang(el-gr), .honor-late-recognition-component h6.preserve-case:lang(el-gr), .honor-late-recognition-component ul.title-list li:lang(el-gr), .honor-late-recognition-title:lang(el-gr), .honor-late-recognition-component h1:lang(th-th), .honor-late-recognition-component h1.subhead:lang(th-th), .honor-late-recognition-component h1.preserve-case:lang(th-th), .honor-late-recognition-component h2:lang(th-th), .honor-late-recognition-component h2.subhead:lang(th-th), .honor-late-recognition-component h2.preserve-case:lang(th-th), .honor-late-recognition-component h3:lang(th-th), .honor-late-recognition-component h3.subhead:lang(th-th), .honor-late-recognition-component h3.preserve-case:lang(th-th), .honor-late-recognition-component h4:lang(th-th), .honor-late-recognition-component h4.subhead:lang(th-th), .honor-late-recognition-component h4.preserve-case:lang(th-th), .honor-late-recognition-component h5:lang(th-th), .honor-late-recognition-component h5.subhead:lang(th-th), .honor-late-recognition-component h5.preserve-case:lang(th-th), .honor-late-recognition-component h6:lang(th-th), .honor-late-recognition-component h6.subhead:lang(th-th), .honor-late-recognition-component h6.preserve-case:lang(th-th), .honor-late-recognition-component ul.title-list li:lang(th-th), .honor-late-recognition-title:lang(th-th), .honor-late-recognition-component h1:lang(zh-tw), .honor-late-recognition-component h1.subhead:lang(zh-tw), .honor-late-recognition-component h1.preserve-case:lang(zh-tw), .honor-late-recognition-component h2:lang(zh-tw), .honor-late-recognition-component h2.subhead:lang(zh-tw), .honor-late-recognition-component h2.preserve-case:lang(zh-tw), .honor-late-recognition-component h3:lang(zh-tw), .honor-late-recognition-component h3.subhead:lang(zh-tw), .honor-late-recognition-component h3.preserve-case:lang(zh-tw), .honor-late-recognition-component h4:lang(zh-tw), .honor-late-recognition-component h4.subhead:lang(zh-tw), .honor-late-recognition-component h4.preserve-case:lang(zh-tw), .honor-late-recognition-component h5:lang(zh-tw), .honor-late-recognition-component h5.subhead:lang(zh-tw), .honor-late-recognition-component h5.preserve-case:lang(zh-tw), .honor-late-recognition-component h6:lang(zh-tw), .honor-late-recognition-component h6.subhead:lang(zh-tw), .honor-late-recognition-component h6.preserve-case:lang(zh-tw), .honor-late-recognition-component ul.title-list li:lang(zh-tw), .honor-late-recognition-title:lang(zh-tw) { text-transform: none; } .honor-late-recognition-component h1.preserve-case, .honor-late-recognition-component h2.preserve-case, .honor-late-recognition-component h3.preserve-case, .honor-late-recognition-component h4.preserve-case, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-component ul.title-list li { text-transform: none; } .honor-late-recognition-component h1, .honor-late-recognition-component h1.subhead, .honor-late-recognition-component h1.preserve-case { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .honor-late-recognition-component h1:lang(ar-ae), .honor-late-recognition-component h1.subhead:lang(ar-ae), .honor-late-recognition-component h1.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h1.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h1.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h1.subhead { color: #a09b8c; } .honor-late-recognition-component h2, .honor-late-recognition-component h2.subhead, .honor-late-recognition-component h2.preserve-case { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .honor-late-recognition-component h2:lang(ar-ae), .honor-late-recognition-component h2.subhead:lang(ar-ae), .honor-late-recognition-component h2.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h2.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h2.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h2.subhead { color: #a09b8c; } .honor-late-recognition-component h3, .honor-late-recognition-component h3.subhead, .honor-late-recognition-component h3.preserve-case { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .honor-late-recognition-component h3:lang(ar-ae), .honor-late-recognition-component h3.subhead:lang(ar-ae), .honor-late-recognition-component h3.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h3.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h3.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h3.subhead { color: #a09b8c; } .honor-late-recognition-component h4, .honor-late-recognition-component h4.subhead, .honor-late-recognition-component h4.preserve-case { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .honor-late-recognition-component h4:lang(ar-ae), .honor-late-recognition-component h4.subhead:lang(ar-ae), .honor-late-recognition-component h4.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h4.preserve-case { letter-spacing: 0.025em; } .honor-late-recognition-component h4.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h4.subhead { color: #a09b8c; } .honor-late-recognition-component h5, .honor-late-recognition-component h5.subhead, .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component ul.title-list li { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .honor-late-recognition-component h5:lang(ar-ae), .honor-late-recognition-component h5.subhead:lang(ar-ae), .honor-late-recognition-component h5.preserve-case:lang(ar-ae), .honor-late-recognition-component ul.title-list li:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h5.preserve-case, .honor-late-recognition-component ul.title-list li { letter-spacing: 0.0375em; } .honor-late-recognition-component h5.preserve-case:lang(ar-ae), .honor-late-recognition-component ul.title-list li:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h5.subhead { color: #a09b8c; } .honor-late-recognition-component h6, .honor-late-recognition-component h6.subhead, .honor-late-recognition-component h6.preserve-case, .honor-late-recognition-title { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .honor-late-recognition-component h6:lang(ja-jp), .honor-late-recognition-component h6.subhead:lang(ja-jp), .honor-late-recognition-component h6.preserve-case:lang(ja-jp), .honor-late-recognition-title:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component h6:lang(ar-ae), .honor-late-recognition-component h6.subhead:lang(ar-ae), .honor-late-recognition-component h6.preserve-case:lang(ar-ae), .honor-late-recognition-title:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h6.preserve-case { letter-spacing: 0.0375em; } .honor-late-recognition-component h6.preserve-case:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component h6.subhead { color: #a09b8c; } .honor-late-recognition-component p { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component p:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component p:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component .lol-typekit-label { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component .lol-typekit-label:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component .lol-typekit-label:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component .lol-typekit-value, .honor-late-recognition-header { color: #a09b8c; font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component .lol-typekit-value:lang(ja-jp), .honor-late-recognition-header:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component .lol-typekit-value:lang(ar-ae), .honor-late-recognition-header:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display, .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-component a:link:lang(ja-jp), .honor-late-recognition-component a:visited:lang(ja-jp), .honor-late-recognition-component a:link.display:lang(ja-jp), .honor-late-recognition-component a:visited.display:lang(ja-jp), .honor-late-recognition-component a:link.external:lang(ja-jp), .honor-late-recognition-component a:visited.external:lang(ja-jp), .honor-late-recognition-component a:link.external-display:lang(ja-jp), .honor-late-recognition-component a:visited.external-display:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-component a:link:lang(ar-ae), .honor-late-recognition-component a:visited:lang(ar-ae), .honor-late-recognition-component a:link.display:lang(ar-ae), .honor-late-recognition-component a:visited.display:lang(ar-ae), .honor-late-recognition-component a:link.external:lang(ar-ae), .honor-late-recognition-component a:visited.external:lang(ar-ae), .honor-late-recognition-component a:link.external-display:lang(ar-ae), .honor-late-recognition-component a:visited.external-display:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-component a:link, .honor-late-recognition-component a:visited, .honor-late-recognition-component a:link.display, .honor-late-recognition-component a:visited.display { color: #cdbe91; } .honor-late-recognition-component a:link:hover, .honor-late-recognition-component a:visited:hover, .honor-late-recognition-component a:link.display:hover, .honor-late-recognition-component a:visited.display:hover, .honor-late-recognition-component a:link.hover, .honor-late-recognition-component a:visited.hover, .honor-late-recognition-component a:link.display.hover, .honor-late-recognition-component a:visited.display.hover { color: #f0e6d2; } .honor-late-recognition-component a:link.external, .honor-late-recognition-component a:visited.external, .honor-late-recognition-component a:link.external-display, .honor-late-recognition-component a:visited.external-display { color: #0596aa; text-decoration: none; } .honor-late-recognition-component a:link.external:hover, .honor-late-recognition-component a:visited.external:hover, .honor-late-recognition-component a:link.external-display:hover, .honor-late-recognition-component a:visited.external-display:hover, .honor-late-recognition-component a:link.external.hover, .honor-late-recognition-component a:visited.external.hover, .honor-late-recognition-component a:link.external-display.hover, .honor-late-recognition-component a:visited.external-display.hover { color: #cdfafa; } .honor-late-recognition-component a:link.external:after, .honor-late-recognition-component a:visited.external:after, .honor-late-recognition-component a:link.external-display:after, .honor-late-recognition-component a:visited.external-display:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-navigation/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .honor-late-recognition-component a:link.external:lang(ar-ae):after, .honor-late-recognition-component a:visited.external:lang(ar-ae):after, .honor-late-recognition-component a:link.external-display:lang(ar-ae):after, .honor-late-recognition-component a:visited.external-display:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .honor-late-recognition-component a:link.external:hover:after, .honor-late-recognition-component a:visited.external:hover:after, .honor-late-recognition-component a:link.external-display:hover:after, .honor-late-recognition-component a:visited.external-display:hover:after { background-color: #cdfafa; } .honor-late-recognition-component .lol-typekit-value { color: #f0e6d2; } .honor-late-recognition-component { box-sizing: border-box; /* * headings */ /* * dividers / separators */ /* * paragraph styling */ /* * For paragraphs that are direct children of the content block, * and which are the first or last element in that block, * we account for the extra line-height spacing of the text. */ /* * default ul title-list styles */ /* * value list table */ /* * For tables which are direct children of the content block, * and which are the first or last element in that block, * we account for the extra line-height spacing within the rows. */ /* * typography clases */ } .honor-late-recognition-component > h1:first-child, .honor-late-recognition-component > h2:first-child, .honor-late-recognition-component > h3:first-child, .honor-late-recognition-component > h4:first-child, .honor-late-recognition-component > h5:first-child, .honor-late-recognition-component > h6:first-child { margin-top: -3px; } .honor-late-recognition-component h1, .honor-late-recognition-component h2, .honor-late-recognition-component h3, .honor-late-recognition-component h4, .honor-late-recognition-component h5, .honor-late-recognition-component h6 { margin: 0; } .honor-late-recognition-component h1 + p, .honor-late-recognition-component h2 + p, .honor-late-recognition-component h3 + p, .honor-late-recognition-component h4 + p, .honor-late-recognition-component h5 + p, .honor-late-recognition-component h6 + p { margin-top: 2px; } .honor-late-recognition-component hr.heading-spacer { border: none; height: 12px; margin: 0px; } .honor-late-recognition-component p { margin: 0; margin-bottom: 8px; } .honor-late-recognition-component p:last-child { margin-bottom: 0; } .honor-late-recognition-component > p:first-child { margin-top: -2px; } .honor-late-recognition-component > p:last-child { margin-bottom: -2px; } .honor-late-recognition-component ul.title-list { list-style-type: none; margin: 0; padding: 0; } .honor-late-recognition-component table.lol-uikit-list-table { box-sizing: border-box; display: table; width: 100%; padding: 0; margin: 0; text-align: left; border-collapse: collapse; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr, .honor-late-recognition-component table.lol-uikit-list-table > tr { box-sizing: border-box; display: table-row; margin: 0; border-top: thin solid #1d1e1f; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr:first-child, .honor-late-recognition-component table.lol-uikit-list-table > tr:first-child { border-top: none; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr > td, .honor-late-recognition-component table.lol-uikit-list-table > tr > td { box-sizing: border-box; display: table-cell; vertical-align: top; padding: 7px 0px 6px 12px; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr > td:first-child, .honor-late-recognition-component table.lol-uikit-list-table > tr > td:first-child { padding-left: 0px; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr:first-child > td, .honor-late-recognition-component table.lol-uikit-list-table > tr:first-child > td { padding-top: 0; } .honor-late-recognition-component table.lol-uikit-list-table > tbody > tr:last-child > td, .honor-late-recognition-component table.lol-uikit-list-table > tr:last-child > td { padding-bottom: 0; } .honor-late-recognition-component > table.lol-uikit-list-table:first-child { margin-top: -3px; } .honor-late-recognition-component > table.lol-uikit-list-table:last-child { margin-bottom: -3px; } .honor-late-recognition-component { display: block; width: 296px; text-align: left; background-image: url("/fe/lol-honor/assets/Honor_Late_Notification_Backdrop.png"); background-repeat: no-repeat; background-position: top; } .honor-late-recognition-title { padding: 16px 30px 0 18px; text-align: left; display: flex; align-items: center; } .honor-late-recognition-header { padding: 8px 30px 0 18px; text-align: left; display: flex; align-items: center; } .honor-late-recognition-icon-container { margin: 6px 24px 12px 24px; } .honor-late-recognition-icon-text, .honor-late-recognition-icon-count { font-family: var(--font-body); } .honor-late-recognition-icon-text, .honor-late-recognition-icon-count { -webkit-user-select: none; } .honor-late-recognition-icon-text, .honor-late-recognition-icon-count { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .honor-late-recognition-icon-text, .honor-late-recognition-icon-count { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .honor-late-recognition-icon-text:lang(ja-jp), .honor-late-recognition-icon-count:lang(ja-jp) { font-size: 13px; } .honor-late-recognition-icon-text:lang(ar-ae), .honor-late-recognition-icon-count:lang(ar-ae) { letter-spacing: 0; } .honor-late-recognition-icon-component { display: block; position: relative; height: 24px; } .honor-late-recognition-icon { height: 24px; width: 24px; position: absolute; top: 0; left: 0; } .honor-late-recognition-icon-text { position: absolute; height: 24px; left: 38px; display: flex; vertical-align: middle; align-items: center; } .honor-late-recognition-icon-count { position: absolute; top: 1px; left: 24px; } #honor-levelup-vignette-component .emblem-text .header, #honor-levelup-vignette-component .reward-container .header { font-family: var(--font-display); } #honor-levelup-vignette-component .emblem-text .body, #honor-levelup-vignette-component .reward-container .text { font-family: var(--font-body); } #honor-levelup-vignette-component .emblem-text .header, #honor-levelup-vignette-component .emblem-text .body, #honor-levelup-vignette-component .reward-container .header, #honor-levelup-vignette-component .reward-container .text { -webkit-user-select: none; } #honor-levelup-vignette-component .emblem-text .header, #honor-levelup-vignette-component .emblem-text .body, #honor-levelup-vignette-component .reward-container .header, #honor-levelup-vignette-component .reward-container .text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } #honor-levelup-vignette-component .emblem-text .header, #honor-levelup-vignette-component .reward-container .header { text-transform: uppercase; } #honor-levelup-vignette-component .emblem-text .header:lang(ko-kr), #honor-levelup-vignette-component .reward-container .header:lang(ko-kr), #honor-levelup-vignette-component .emblem-text .header:lang(ja-jp), #honor-levelup-vignette-component .reward-container .header:lang(ja-jp), #honor-levelup-vignette-component .emblem-text .header:lang(tr-tr), #honor-levelup-vignette-component .reward-container .header:lang(tr-tr), #honor-levelup-vignette-component .emblem-text .header:lang(el-gr), #honor-levelup-vignette-component .reward-container .header:lang(el-gr), #honor-levelup-vignette-component .emblem-text .header:lang(th-th), #honor-levelup-vignette-component .reward-container .header:lang(th-th), #honor-levelup-vignette-component .emblem-text .header:lang(zh-tw), #honor-levelup-vignette-component .reward-container .header:lang(zh-tw) { text-transform: none; } #honor-levelup-vignette-component .emblem-text .header, #honor-levelup-vignette-component .reward-container .header { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } #honor-levelup-vignette-component .emblem-text .header:lang(ar-ae), #honor-levelup-vignette-component .reward-container .header:lang(ar-ae) { letter-spacing: 0; } #honor-levelup-vignette-component .emblem-text .body, #honor-levelup-vignette-component .reward-container .text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } #honor-levelup-vignette-component .emblem-text .body:lang(ar-ae), #honor-levelup-vignette-component .reward-container .text:lang(ar-ae) { letter-spacing: 0; } #honor-levelup-vignette-component { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } #honor-levelup-vignette-component .midground { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #honor-levelup-vignette-component .midground.transition { animation-fill-mode: both; animation-timing-function: ease-in-out; } #honor-levelup-vignette-component .midground.level0 { -webkit-filter: hue-rotate(270deg); } #honor-levelup-vignette-component .midground.level1 { -webkit-filter: hue-rotate(270deg); } #honor-levelup-vignette-component .midground.level2 { -webkit-filter: hue-rotate(270deg); } #honor-levelup-vignette-component .midground.level3 { -webkit-filter: hue-rotate(0deg); } #honor-levelup-vignette-component .midground.level3.transition { animation-name: midground-color-transition-3; animation-delay: 1.32s; animation-duration: 0.78s; } #honor-levelup-vignette-component .midground.level4 { -webkit-filter: hue-rotate(90deg); } #honor-levelup-vignette-component .midground.level4.transition { animation-name: midground-color-transition-4; animation-delay: 1.42s; animation-duration: 1.46s; } #honor-levelup-vignette-component .midground.level5 { -webkit-filter: hue-rotate(200deg) brightness(0.85) saturate(1.75); } #honor-levelup-vignette-component .midground.level5.transition { animation-name: midground-color-transition-5; animation-delay: 2.06s; animation-duration: 2.57s; } #honor-levelup-vignette-component .foreground { animation-delay: 0s; animation-duration: 0.5s; } #honor-levelup-vignette-component .foreground.hidden { opacity: 0; } #honor-levelup-vignette-component .honor-video { position: absolute; pointer-events: none; margin: auto; top: 0; bottom: 0; right: 0; left: 0; } #honor-levelup-vignette-component .honor-video.emblem { width: 448px; height: 418px; top: -54px; } #honor-levelup-vignette-component .honor-video.emblem.level0 { left: 4px; top: 45px; } #honor-levelup-vignette-component .honor-video.emblem.level1 { left: -4px; top: 0; } #honor-levelup-vignette-component .honor-video.emblem.level2 { left: -16px; } #honor-levelup-vignette-component .honor-video.emblem.level3 { left: -15px; } #honor-levelup-vignette-component .honor-video.emblem.level4 { left: -12px; } #honor-levelup-vignette-component .honor-video.emblem.level5 { left: 11px; top: -66px; } #honor-levelup-vignette-component .honor-video.checkpoint { width: 600px; height: 650px; top: 10px; left: 4px; } #honor-levelup-vignette-component .honor-video.outro-smoke { width: 100%; height: 100%; top: -4px; bottom: 4px; } #honor-levelup-vignette-component .honor-video.outro-smoke.level0 { -webkit-filter: hue-rotate(0deg); } #honor-levelup-vignette-component .honor-video.outro-smoke.level1 { -webkit-filter: hue-rotate(0deg); } #honor-levelup-vignette-component .honor-video.outro-smoke.level2 { -webkit-filter: hue-rotate(0deg); } #honor-levelup-vignette-component .honor-video.outro-smoke.level3 { -webkit-filter: hue-rotate(90deg); } #honor-levelup-vignette-component .honor-video.outro-smoke.level4 { -webkit-filter: hue-rotate(160deg); } #honor-levelup-vignette-component .honor-video.outro-smoke.level5 { -webkit-filter: hue-rotate(270deg) brightness(0.75) saturate(3); } #honor-levelup-vignette-component .honor-video.outro-smoke.vignette-small { transform: scaleY(1); } #honor-levelup-vignette-component .honor-video.outro-smoke.vignette-medium { transform: scaleY(1); } #honor-levelup-vignette-component .honor-video.outro-smoke.vignette-large { transform: scaleY(1); } #honor-levelup-vignette-component .frame-container { position: absolute; margin: auto; width: 600px; height: 650px; top: 10px; bottom: 0; right: 0; left: 4px; } #honor-levelup-vignette-component .frame-container .frame { width: 600px; height: 650px; } #honor-levelup-vignette-component .embellishment-container { position: absolute; margin: auto; width: 600px; height: 650px; top: 0; bottom: 0; right: 0; left: 0; } #honor-levelup-vignette-component .embellishment-container.level2 { top: -64px; } #honor-levelup-vignette-component .embellishment-container.level3 { top: -14px; } #honor-levelup-vignette-component .embellishment-container.level4 { top: 29px; } #honor-levelup-vignette-component .embellishment { width: 600px; height: 650px; animation-delay: 2s; animation-duration: 2s; } #honor-levelup-vignette-component .emblem-text { position: absolute; margin: auto; height: 0; width: 100%; top: 0; bottom: 0; right: 0; left: 0; animation-delay: 3.1s; animation-duration: 0.3s; } #honor-levelup-vignette-component .emblem-text .header { position: absolute; bottom: -194px; left: 0; right: 0; text-align: center; } #honor-levelup-vignette-component .emblem-text .body { position: absolute; bottom: -224px; left: 0; right: 0; text-align: center; } #honor-levelup-vignette-component .reward-container { position: absolute; margin: auto; height: 0; width: 100%; top: 0; bottom: 0; right: 0; left: 0; animation-delay: 0.75s; animation-duration: 0.75s; } #honor-levelup-vignette-component .reward-container.low-spec { animation-delay: 0.25s; animation-duration: 0.75s; } #honor-levelup-vignette-component .reward-container .reward { position: absolute; margin: auto; height: 256px; width: 256px; top: -32px; bottom: 0; right: 0; left: 0; } #honor-levelup-vignette-component .reward-container .reward.small { height: 192px; width: 192px; top: -48px; } #honor-levelup-vignette-component .reward-container .reward.large { height: 512px; width: 512px; top: -64px; } #honor-levelup-vignette-component .reward-container .header { position: absolute; top: 82px; left: 0; right: 0; text-align: center; } #honor-levelup-vignette-component .reward-container .header.vignette-medium { top: 107px; } #honor-levelup-vignette-component .reward-container .header.vignette-large { top: 127px; } #honor-levelup-vignette-component .reward-container .text { position: absolute; top: 117px; left: 0; right: 0; margin: auto; width: 450px; text-align: center; } #honor-levelup-vignette-component .reward-container .text.vignette-medium { top: 145px; } #honor-levelup-vignette-component .reward-container .text.vignette-large { top: 165px; } #honor-levelup-vignette-component .low-spec-emblem { position: absolute; margin: auto; height: 300px; width: 300px; top: 0; bottom: 0; right: 0; left: 0; } #honor-levelup-vignette-component .low-spec-emblem.level0 { top: -95px; } #honor-levelup-vignette-component .low-spec-emblem.level1 { top: -95px; } #honor-levelup-vignette-component .low-spec-emblem.level2 { top: -119px; height: 275px; width: 275px; } #honor-levelup-vignette-component .low-spec-emblem.level3 { top: -108px; height: 304px; width: 304px; } #honor-levelup-vignette-component .low-spec-emblem.level4 { top: -103px; height: 345px; width: 345px; } #honor-levelup-vignette-component .low-spec-emblem.level5 { top: -103px; height: 377px; width: 377px; } #honor-levelup-vignette-component .low-spec-checkpoint { position: absolute; margin: auto; height: 500px; width: 500px; top: 0; bottom: 0; right: 0; left: 0; } #honor-levelup-vignette-component .low-spec-checkpoint.level2 { top: 162px; height: 420px; width: 420px; } #honor-levelup-vignette-component .low-spec-checkpoint.level3 { top: 206px; } #honor-levelup-vignette-component .low-spec-checkpoint.level4 { top: 245px; height: 450px; width: 450px; } #honor-levelup-vignette-component .fade-in { animation-name: fade-in; animation-fill-mode: both; animation-timing-function: ease-in; } #honor-levelup-vignette-component .fade-out { animation-name: fade-out; animation-fill-mode: both; animation-timing-function: ease-in; animation-delay: 0.5s; animation-duration: 0.75s; } #honor-levelup-vignette-component .fade-out.low-spec { animation-delay: 0s; } @-moz-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes midground-color-transition-3 { 0% { -webkit-filter: hue-rotate(270deg); } 100% { -webkit-filter: hue-rotate(360deg); } } @-webkit-keyframes midground-color-transition-3 { 0% { -webkit-filter: hue-rotate(270deg); } 100% { -webkit-filter: hue-rotate(360deg); } } @-o-keyframes midground-color-transition-3 { 0% { -webkit-filter: hue-rotate(270deg); } 100% { -webkit-filter: hue-rotate(360deg); } } @keyframes midground-color-transition-3 { 0% { -webkit-filter: hue-rotate(270deg); } 100% { -webkit-filter: hue-rotate(360deg); } } @-moz-keyframes midground-color-transition-4 { 0% { -webkit-filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(90deg); } } @-webkit-keyframes midground-color-transition-4 { 0% { -webkit-filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(90deg); } } @-o-keyframes midground-color-transition-4 { 0% { -webkit-filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(90deg); } } @keyframes midground-color-transition-4 { 0% { -webkit-filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(90deg); } } @-moz-keyframes midground-color-transition-5 { 0% { -webkit-filter: hue-rotate(90deg); } 100% { -webkit-filter: hue-rotate(200deg) brightness(0.85) saturate(1.75); } } @-webkit-keyframes midground-color-transition-5 { 0% { -webkit-filter: hue-rotate(90deg); } 100% { -webkit-filter: hue-rotate(200deg) brightness(0.85) saturate(1.75); } } @-o-keyframes midground-color-transition-5 { 0% { -webkit-filter: hue-rotate(90deg); } 100% { -webkit-filter: hue-rotate(200deg) brightness(0.85) saturate(1.75); } } @keyframes midground-color-transition-5 { 0% { -webkit-filter: hue-rotate(90deg); } 100% { -webkit-filter: hue-rotate(200deg) brightness(0.85) saturate(1.75); } }