.personalized-offers-header, .personalized-offers-footer-expiration { font-family: var(--font-display); } .personalized-offers-root, .personalized-offers-not-full-message, .personalized-offers-footer-notice { font-family: var(--font-body); } .personalized-offers-root, .personalized-offers-header, .personalized-offers-not-full-message, .personalized-offers-footer-expiration, .personalized-offers-footer-notice { -webkit-user-select: none; } .personalized-offers-root, .personalized-offers-header, .personalized-offers-not-full-message, .personalized-offers-footer-expiration, .personalized-offers-footer-notice { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .personalized-offers-header { text-transform: uppercase; } .personalized-offers-header:lang(ko-kr), .personalized-offers-header:lang(ja-jp), .personalized-offers-header:lang(tr-tr), .personalized-offers-header:lang(el-gr), .personalized-offers-header:lang(th-th), .personalized-offers-header:lang(zh-tw) { text-transform: none; } .personalized-offers-header { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .personalized-offers-header:lang(ar-ae) { letter-spacing: 0; } .personalized-offers-footer-expiration { color: #a09b8c; font-size: 16px; font-weight: normal; line-height: 24px; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .personalized-offers-footer-expiration:lang(ar-ae) { letter-spacing: 0; } .personalized-offers-root { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .personalized-offers-root:lang(ar-ae) { letter-spacing: 0; } .personalized-offers-not-full-message, .personalized-offers-footer-notice { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .personalized-offers-not-full-message:lang(ja-jp), .personalized-offers-footer-notice:lang(ja-jp) { font-size: 13px; } .personalized-offers-not-full-message:lang(ar-ae), .personalized-offers-footer-notice:lang(ar-ae) { letter-spacing: 0; } .personalized-offers-root { padding-left: 34px; padding-right: 35px; } .personalized-offers-root { position: relative; height: 718px; width: 100%; padding-bottom: 30px; padding-top: 100px; box-sizing: border-box; background-image: url("/fe/lol-static-assets/images/uikit/backdrop-magic/backdrop-magic.png"); background-size: contain; background-position: center; background-repeat: no-repeat; background-size: cover; cursor: default; } .personalized-offers-root.seasonal-background { background-image: url("/fe/lol-static-assets/images/po-seasonal-background.jpg"); background-size: contain; background-position: center; background-repeat: no-repeat; background-size: cover; } .personalized-offers-root.seasonal-background::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); background-image: radial-gradient(rgba(1,10,19,0.4) 0%, rgba(1,10,19,0.6) 40%, rgba(1,10,19,0.9) 80%); } .personalized-offers-content-wrapper { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: space-between; position: relative; direction: ltr; } .personalized-offers-header { width: 100%; height: 40px; text-align: center; box-sizing: border-box; background-image: url("/fe/lol-static-assets/images/po-main-rule.png"); background-position: center bottom; background-repeat: no-repeat; } .personalized-offers-not-full-message { color: #c89b3c; position: absolute; margin-top: 45px; left: 0; right: 0; text-align: center; } .personalized-offers-error-message { margin: 100px 100px 0 100px; text-align: center; } .personalized-offers-body { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; } .personalized-offers-spinner { opacity: 0; margin-top: 130px; animation: fadeSpinner 0.5s forwards; } .personalized-offers-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .personalized-offers-footer-expiration { color: #c8aa6e; } .personalized-offers-footer-rule { width: 100%; border-color: #c89b3c; border-bottom-width: 0; } .personalized-offers-footer-notice { min-width: 630px; text-align: center; color: #c89b3c; } @-moz-keyframes fadeSpinner { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeSpinner { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadeSpinner { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeSpinner { from { opacity: 0; } to { opacity: 1; } } .offer-card-pricing-discounted { font-family: var(--font-display); } .offer-card-pricing-original { font-family: var(--font-body); } .offer-card-pricing-original, .offer-card-pricing-discounted { -webkit-user-select: none; } .offer-card-pricing-original, .offer-card-pricing-discounted { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .offer-card-pricing-discounted { text-transform: uppercase; } .offer-card-pricing-discounted:lang(ko-kr), .offer-card-pricing-discounted:lang(ja-jp), .offer-card-pricing-discounted:lang(tr-tr), .offer-card-pricing-discounted:lang(el-gr), .offer-card-pricing-discounted:lang(th-th), .offer-card-pricing-discounted:lang(zh-tw) { text-transform: none; } .offer-card-pricing-discounted { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .offer-card-pricing-discounted:lang(ar-ae) { letter-spacing: 0; } .offer-card-pricing-original { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .offer-card-pricing-original:lang(ar-ae) { letter-spacing: 0; } .personalized-offers-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .offer-card-pricing-original { e padding-top: 8px; color: #5b5a56; text-decoration: line-through; } .offer-card-pricing-discounted { display: flex; align-items: center; justify-content: center; } .offer-card-rp-icon { background: url("/fe/lol-static-assets/images/icon-rp-gradient-32.png") center center no-repeat; width: 16px; height: 16px; background-size: contain; margin: 0 5px 0 0 ; } .offer-card-owned-text, .offer-card-discount { font-family: var(--font-display); } .offer-card-owned-text, .offer-card-discount { -webkit-user-select: none; } .offer-card-owned-text, .offer-card-discount { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .offer-card-owned-text, .offer-card-discount { text-transform: uppercase; } .offer-card-owned-text:lang(ko-kr), .offer-card-discount:lang(ko-kr), .offer-card-owned-text:lang(ja-jp), .offer-card-discount:lang(ja-jp), .offer-card-owned-text:lang(tr-tr), .offer-card-discount:lang(tr-tr), .offer-card-owned-text:lang(el-gr), .offer-card-discount:lang(el-gr), .offer-card-owned-text:lang(th-th), .offer-card-discount:lang(th-th), .offer-card-owned-text:lang(zh-tw), .offer-card-discount:lang(zh-tw) { text-transform: none; } .offer-card-discount { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .offer-card-discount:lang(ar-ae) { letter-spacing: 0; } .offer-card-owned-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .offer-card-owned-text:lang(ar-ae) { letter-spacing: 0; } .personalized-offers-card-content, .personalized-offers-card-content-owned, .offer-card-frame-image, .offer-card-skin-tile, .offer-card-frame-back { width: 122px; height: 259.25px; } .offer-card-frame-image, .offer-card-frame-back { position: absolute; cursor: pointer; } .personalized-offers-card-content, .personalized-offers-card-content-owned { display: flex; margin: 0 23px; position: relative; cursor: pointer; transition: -webkit-filter 0.3s ease-out, opacity 1s; } .personalized-offers-card-content-owned, .personalized-offers-card-content-owned-owned { opacity: 0.7; cursor: default; pointer-events: none; transition: opacity 1s; } .personalized-offers-card-content:hover, .personalized-offers-card-content-owned:hover { -webkit-filter: brightness(1.4); } .offer-card-unrevealed-loop-video, .offer-card-purchase-intro-video, .offer-card-purchase-loop-video, .offer-card-reveal-intro-video, .offer-card-reveal-outro-video { display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .offer-card-reveal-intro-video { z-index: 1; } .offer-card-skin-tile { -webkit-mask-image: url("/fe/lol-static-assets/images/po-offer-card-back.png"); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; left: 0; object-fit: cover; position: absolute; top: 0; -webkit-mask-size: 122px 257px; } .offer-card-champion-icon { position: absolute; height: 50px; width: 50px; top: calc(185px - 25px); left: calc(50% - 25px); border-radius: 50%; } .offer-card-owned-text, .offer-card-discount { bottom: 0; position: absolute; text-align: center; width: 100%; } .offer-card-owned-text { color: #785a28; padding-bottom: 22px; animation: card-content-fade-in 1s; } .offer-card-discount { color: #c89b3c; padding-bottom: 18px; } .offer-card-rarity-gem { position: absolute; bottom: 0; height: 16px; width: 100%; display: flex; align-items: center; justify-content: center; object-fit: contain; animation: card-content-fade-in 1s; } .offer-card-legacy-emblem { width: 35px; height: 35px; position: absolute; top: 0; right: 0 ; left: auto ; animation: card-content-fade-in 1s; } .offer-card-legacy-emblem::before { background-image: url("/fe/lol-static-assets/images/po-card-corner.png"); background-size: contain; background-position: center; background-repeat: no-repeat; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: none ; } .offer-card-legacy-emblem::after { width: 25px; height: 25px; background-image: url("/fe/lol-static-assets/images/po-legacy-icon.png"); background-size: contain; background-position: center; background-repeat: no-repeat; content: ''; position: absolute; top: 0; right: 0 ; left: auto ; } .offer-card-frame-back { background-image: url("/fe/lol-static-assets/images/po-offer-card-back.png"); } @-moz-keyframes card-content-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes card-content-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes card-content-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes card-content-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .offer-details-sale-badge, .offer-details-skin-name { font-family: var(--font-display); } .offer-details-contents, .offer-details-item-details, .offer-details-purchase-confirmation, .personalized-offers-purchase-confirmation-link, .offer-details-currency-type, .offer-details-new-balance, .offer-details-not-enough-rp { font-family: var(--font-body); } .offer-details-contents, .offer-details-sale-badge, .offer-details-skin-name, .offer-details-item-details, .offer-details-purchase-confirmation, .personalized-offers-purchase-confirmation-link, .offer-details-currency-type, .offer-details-new-balance, .offer-details-not-enough-rp { -webkit-user-select: none; } .offer-details-contents, .offer-details-sale-badge, .offer-details-skin-name, .offer-details-item-details, .offer-details-purchase-confirmation, .personalized-offers-purchase-confirmation-link, .offer-details-currency-type, .offer-details-new-balance, .offer-details-not-enough-rp { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .offer-details-skin-name { text-transform: uppercase; } .offer-details-skin-name:lang(ko-kr), .offer-details-skin-name:lang(ja-jp), .offer-details-skin-name:lang(tr-tr), .offer-details-skin-name:lang(el-gr), .offer-details-skin-name:lang(th-th), .offer-details-skin-name:lang(zh-tw) { text-transform: none; } .offer-details-skin-name { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .offer-details-skin-name:lang(ar-ae) { letter-spacing: 0; } .offer-details-contents { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .offer-details-contents:lang(ar-ae) { letter-spacing: 0; } .offer-details-item-details, .offer-details-purchase-confirmation, .offer-details-currency-type, .offer-details-new-balance, .offer-details-not-enough-rp { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .offer-details-item-details:lang(ja-jp), .offer-details-purchase-confirmation:lang(ja-jp), .offer-details-currency-type:lang(ja-jp), .offer-details-new-balance:lang(ja-jp), .offer-details-not-enough-rp:lang(ja-jp) { font-size: 13px; } .offer-details-item-details:lang(ar-ae), .offer-details-purchase-confirmation:lang(ar-ae), .offer-details-currency-type:lang(ar-ae), .offer-details-new-balance:lang(ar-ae), .offer-details-not-enough-rp:lang(ar-ae) { letter-spacing: 0; } .personalized-offers-purchase-confirmation-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .personalized-offers-purchase-confirmation-link:lang(ja-jp) { font-size: 13px; } .personalized-offers-purchase-confirmation-link:lang(ar-ae) { letter-spacing: 0; } .personalized-offers-purchase-confirmation-link { color: #0596aa; text-decoration: none; } .personalized-offers-purchase-confirmation-link:hover, .personalized-offers-purchase-confirmation-link.hover { color: #cdfafa; } .personalized-offers-purchase-confirmation-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-personalized-offers/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .personalized-offers-purchase-confirmation-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .personalized-offers-purchase-confirmation-link:hover:after { background-color: #cdfafa; } .offer-details-sale-badge { font-size: 16px; font-weight: 700; letter-spacing: 0.05em; } .offer-details-sale-badge:lang(ar-ae) { letter-spacing: 0; } .offer-details-contents { display: flex; flex-direction: column; width: 526px; cursor: default; direction: ltr; } .offer-details-sale-badge { width: 59.5px; height: 60.5px; background-image: url("/fe/lol-static-assets/images/po-offer-details-sale-badge.png"); background-size: contain; background-position: center; background-repeat: no-repeat; display: flex; justify-content: center; position: absolute; top: -5px; left: 8px ; right: auto ; padding-top: 12px; box-sizing: border-box; text-shadow: 0 0 2px #000; color: #f0e6d2; font-weight: 500; } .offer-details-hero { position: relative; height: 294px; } .offer-details-skin-splash { position: absolute; width: 100%; height: 294px; object-fit: cover; } .offer-details-skin-vignette { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(to top, #010a13 0%, rgba(1,10,19,0) 55%); } .offer-details-hero-copy { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .offer-details-skin-name { line-height: 40px; text-align: center; } .offer-details-item-details { display: flex; align-items: center; justify-content: space-around; height: 35px; margin: 0 20px; color: #785a28; border: solid #463714; border-width: 1px 0; } .offer-details-item-details.contains-multiple-detail { align-items: center; justify-content: space-between; } .offer-details-item-details.contains-multiple-detail::after { content: ''; } .offer-details-champion-owned { display: flex; } .offer-details-champion-owned-icon { width: 18px; height: 18px; -webkit-mask-image: url("/fe/lol-static-assets/images/po-icon-helmet.png"); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; background-color: #785a28; margin: 0 6px 0 0 ; } .offer-details-champion-icon { position: absolute; } .offer-details-skin-rarity { display: flex; align-items: center; } .offer-details-skin-rarity-image { height: 25px; margin: 0 6px 0 0 ; } .offer-details-purchase-confirmation { display: flex; align-items: center; justify-content: center; height: 30px; margin: 10px 20px 0; } .offer-details-purchase-details { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; } .offer-details-includes-champion { display: flex; justify-content: center; align-items: center; } .offer-details-includes-champion-icon { height: 40px; width: 40px; margin: 0 10px 0 0 ; } .offer-details-currency-type { margin-bottom: 10px; } .offer-details-new-balance { margin-top: 10px; color: #3c3c41; } .offer-details-not-enough-rp { margin-top: 10px; color: #be1e37; }