.free-ticket-popup, .free-ticket-popup * { box-sizing: border-box; } .free-ticket-popup { position: fixed; z-index: 90; right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); width: min(380px, calc(100vw - 24px)); aspect-ratio: 1552 / 322; font-family: Arial, Helvetica, sans-serif; } .free-ticket-popup__card { position: absolute; right: 0; bottom: 0; display: block; width: 100%; height: 100%; color: inherit; cursor: pointer; filter: drop-shadow(0 4px 7px rgba(126, 86, 0, .3)); text-decoration: none; transform-origin: center bottom; will-change: transform, filter; } .free-ticket-popup__image { display: block; width: 100%; height: 100%; object-fit: contain; } .free-ticket-popup__ticket-text, .free-ticket-popup__button-text { position: absolute; z-index: 2; color: #06429b; font-weight: 900; text-align: center; text-shadow: 0 1px rgba(255, 255, 255, .35); pointer-events: none; } .free-ticket-popup__ticket-text { top: 37%; left: 3.2%; width: 21%; transform: rotate(-8deg); font-size: clamp(8px, 2.8vw, 12px); line-height: .86; text-transform: uppercase; } .free-ticket-popup__button-text { top: 36%; right: 17%; bottom: auto; left: 28%; display: flex; height: 30%; align-items: center; justify-content: center; gap: .2em; overflow: hidden; color: #282828; font-size: clamp(8px, 2.8vw, 11px); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .free-ticket-popup__button-highlight { color: #075bdc; } .free-ticket-popup__card:hover, .free-ticket-popup__card:focus-visible { transform: translateY(-3px) scale(1.06); filter: brightness(1.06) drop-shadow(0 4px 6px rgba(0, 35, 105, .42)); outline: 1px solid rgba(112, 183, 255, .9); outline-offset: 1px; } .free-ticket-popup__card:active { transform: translateY(0) scale(.96); } .free-ticket-popup__card--loading { animation: free-ticket-loading .75s linear infinite !important; cursor: wait; opacity: .72; } .free-ticket-popup--claimed { display: none; } body.free-ticket-result-open { overflow: hidden; } .free-ticket-result[hidden] { display: none; } .free-ticket-error-43[hidden], .free-ticket-error-44[hidden], .free-ticket-error-45[hidden] { display: none; } .free-ticket-error-45 { position: fixed; z-index: 230; inset: 0; display: grid; place-items: center; padding: clamp(10px, 4vw, 24px); font-family: Arial, Helvetica, sans-serif; } .free-ticket-error-45__backdrop { position: absolute; inset: 0; background: rgba(0, 20, 72, .68); backdrop-filter: blur(3px); } .free-ticket-error-45__panel { position: relative; z-index: 1; container-type: inline-size; width: min(460px, 100%, calc((100dvh - 32px) * 508 / 406)); aspect-ratio: 508 / 406; overflow: hidden; border-radius: clamp(12px, 3vw, 18px); box-shadow: 0 22px 55px rgba(0, 15, 70, .45); } .free-ticket-error-45__image { display: block; width: 100%; height: 100%; object-fit: contain; } .free-ticket-error-45__copy { position: absolute; z-index: 2; box-sizing: border-box; margin: 0; color: #082d7d; font-weight: 700; line-height: 1.05; pointer-events: none; text-align: center; } .free-ticket-error-45__copy--ticket-free, .free-ticket-error-45__copy--ticket-tickets, .free-ticket-error-45__copy--ticket-sold-out { left: 38%; width: 24%; color: #fff; font-size: clamp(18px, 4.57cqw, 21px); font-weight: 900; text-transform: uppercase; transform: rotate(-8deg); } .free-ticket-error-45__copy--ticket-free { top: 8.8%; } .free-ticket-error-45__copy--ticket-tickets { top: 17.5%; } .free-ticket-error-45__copy--ticket-sold-out { top: 26.2%; color: #0a358b; font-size: clamp(14px, 3.7cqw, 17px); } .free-ticket-error-45__copy--title { top: 44.8%; left: 18%; width: 64%; font-size: clamp(16px, 4.13cqw, 19px); font-weight: 900; white-space: nowrap; } .free-ticket-error-45__copy--title span { color: #e0182d; } .free-ticket-error-45__copy--description { top: 55.4%; left: 20%; width: 60%; color: #4d5876; font-size: clamp(11px, 2.61cqw, 12px); font-weight: 400; line-height: 1.3; } .free-ticket-error-45__copy--next-title, .free-ticket-error-45__copy--next-primary, .free-ticket-error-45__copy--next-secondary { left: 39%; width: 40%; font-size: clamp(10px, 2.61cqw, 12px); text-align: left; } .free-ticket-error-45__copy--next-title { top: 67.4%; } .free-ticket-error-45__copy--next-primary { top: 71%; color: #e0182d; } .free-ticket-error-45__copy--next-secondary { top: 74.5%; font-weight: 400; } .free-ticket-error-45__copy--buy, .free-ticket-error-45__copy--close { top: 80.7%; display: flex; height: 7.5%; align-items: center; justify-content: center; font-size: clamp(10px, 2.83cqw, 13px); font-weight: 900; } .free-ticket-error-45__copy--buy { left: 12.2%; width: 37.2%; color: #fff; } .free-ticket-error-45__copy--close { left: 51.2%; width: 35%; } .free-ticket-error-45__copy--footer { top: 90.3%; left: 30%; width: 59%; font-size: clamp(10px, 2.61cqw, 12px); font-weight: 400; line-height: 1.05; } .free-ticket-error-45__action { position: absolute; z-index: 2; display: block; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: transparent; } .free-ticket-error-45__action--dismiss-icon { top: 2.5%; right: 1.8%; width: 7.5%; height: 10%; } .free-ticket-error-45__action--buy { top: 80.9%; left: 12.2%; width: 37.2%; height: 8.1%; } .free-ticket-error-45__action--close { top: 80.9%; left: 51.2%; width: 35%; height: 8.1%; } .free-ticket-error-45__action:focus-visible { outline: 3px solid #ffd447; outline-offset: 2px; } .free-ticket-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .free-ticket-error-43, .free-ticket-error-44 { position: fixed; z-index: 230; inset: 0; display: grid; place-items: center; padding: clamp(10px, 4vw, 24px); font-family: Arial, Helvetica, sans-serif; } .free-ticket-error-43__backdrop, .free-ticket-error-44__backdrop { position: absolute; inset: 0; background: rgba(0, 20, 72, .68); backdrop-filter: blur(3px); } .free-ticket-error-43__panel, .free-ticket-error-44__panel { position: relative; z-index: 1; container-type: inline-size; width: min(460px, 100%, calc((100dvh - 32px) * 547 / 437)); aspect-ratio: 547 / 437; overflow: hidden; border-radius: clamp(12px, 3vw, 18px); box-shadow: 0 22px 55px rgba(0, 15, 70, .45); } .free-ticket-error-43__image, .free-ticket-error-44__image { display: block; width: 100%; height: 100%; object-fit: contain; } .free-ticket-error-43__copy, .free-ticket-error-44__copy, .free-ticket-result__copy { position: absolute; z-index: 2; box-sizing: border-box; margin: 0; pointer-events: none; text-align: center; } .free-ticket-error-43__copy--badge { top: 14%; left: 29%; width: 34%; color: #0a358b; font-size: clamp(12px, 3.26cqw, 15px); font-weight: 900; line-height: 1.05; text-transform: uppercase; transform: rotate(-7deg); } .free-ticket-error-43__copy--title, .free-ticket-error-44__copy--title { top: 39.2%; left: 10%; width: 80%; color: #082d7d; font-size: clamp(19px, 4.78cqw, 22px); font-weight: 900; line-height: 1; text-wrap: balance; } .free-ticket-error-44__copy--title { top: 43.7%; font-size: clamp(18px, 4.57cqw, 21px); } .free-ticket-error-43__copy--description, .free-ticket-error-44__copy--description { top: 51.5%; left: 16%; width: 68%; color: #4d5876; font-size: clamp(9px, 2.61cqw, 12px); line-height: 1.25; text-wrap: balance; } .free-ticket-error-44__copy--description { top: 55.2%; left: 17%; width: 66%; font-size: clamp(11px, 2.83cqw, 13px); } .free-ticket-error-43__copy--description { font-size: clamp(11px, 3.04cqw, 14px); } .free-ticket-error-43__copy--daily-title { top: 64.5%; left: 36%; width: 47%; color: #074dc7; font-size: clamp(12px, 3.26cqw, 15px); font-weight: 900; line-height: 1.05; text-align: left; } .free-ticket-error-43__copy--daily-description { top: 69.2%; left: 36%; width: 47%; color: #44516e; font-size: clamp(10px, 2.83cqw, 13px); line-height: 1.15; text-align: left; } .free-ticket-error-43__copy--buy, .free-ticket-error-43__copy--close, .free-ticket-error-44__copy--buy, .free-ticket-error-44__copy--close { top: 79.8%; display: flex; height: 9.4%; align-items: center; justify-content: center; font-size: clamp(13px, 3.48cqw, 16px); font-weight: 900; line-height: 1; } .free-ticket-error-43__copy--buy, .free-ticket-error-44__copy--buy { left: 12.3%; width: 36.8%; color: #fff; } .free-ticket-error-43__copy--close, .free-ticket-error-44__copy--close { left: 51.1%; width: 35.9%; color: #0843ac; } .free-ticket-error-44__copy--buy { left: 10.9%; width: 38%; } .free-ticket-error-44__copy--close { left: 51.4%; width: 37.8%; } .free-ticket-error-43__copy--footer, .free-ticket-error-44__copy--footer { top: 90.3%; left: 23%; width: 65%; color: #133b7f; font-size: clamp(10px, 2.61cqw, 12px); line-height: 1.05; } .free-ticket-error-43__copy--footer { font-size: clamp(10px, 2.61cqw, 12px); } .free-ticket-error-44__copy--footer { left: 27%; width: 61%; } .free-ticket-error-44__copy--badge { top: 14%; left: 30%; width: 30%; color: #fff; font-size: clamp(18px, 4.57cqw, 21px); font-weight: 900; line-height: 1.05; text-transform: uppercase; transform: rotate(-4deg); } .free-ticket-error-44__copy--chance { top: 65.8%; left: 34%; width: 46%; color: #44516e; font-size: clamp(10px, 2.61cqw, 12px); line-height: 1.15; text-wrap: balance; } .free-ticket-error-44__copy--prize { top: 72.2%; left: 34%; width: 46%; color: #1353c7; font-size: clamp(15px, 3.91cqw, 18px); font-weight: 900; white-space: nowrap; } .free-ticket-error-43__action, .free-ticket-error-44__action { position: absolute; z-index: 2; display: block; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: transparent; } .free-ticket-error-43__action--dismiss-icon, .free-ticket-error-44__action--dismiss-icon { top: 2.5%; right: 1.8%; width: 7.5%; height: 10%; } .free-ticket-error-43__action--buy, .free-ticket-error-44__action--buy { top: 79.4%; left: 12.3%; width: 36.8%; height: 8.8%; } .free-ticket-error-44__action--buy { top: 79.8%; left: 10.9%; width: 38%; height: 9.4%; } .free-ticket-error-43__action--close, .free-ticket-error-44__action--close { top: 79.4%; left: 51.1%; width: 35.9%; height: 8.8%; } .free-ticket-error-44__action--close { top: 79.8%; left: 51.4%; width: 37.8%; height: 9.4%; } .free-ticket-error-43__action:focus-visible, .free-ticket-error-44__action:focus-visible { outline: 3px solid #ffd447; outline-offset: 2px; } @media (max-width: 359px) { .free-ticket-error-43, .free-ticket-error-44 { padding: 8px; } } .free-ticket-result { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; padding: 20px; font-family: Arial, Helvetica, sans-serif; } .free-ticket-result__backdrop { position: absolute; inset: 0; background: rgba(0, 20, 72, .68); backdrop-filter: blur(3px); } .free-ticket-result__panel { position: relative; z-index: 1; container-type: inline-size; width: min(460px, 100%, calc((100dvh - 32px) * 520 / 412)); aspect-ratio: 520 / 412; overflow: hidden; border-radius: clamp(12px, 3vw, 18px); box-shadow: 0 22px 55px rgba(0, 15, 70, .45); } .free-ticket-result__image { display: block; width: 100%; height: 100%; object-fit: contain; } .free-ticket-result__copy--badge { top: 12%; left: 34%; width: 32%; color: #fff4a1; font-size: clamp(20px, 5cqw, 23px); font-weight: 900; line-height: .95; text-transform: uppercase; transform: rotate(-5deg); } .free-ticket-result__copy--title { top: 41.5%; left: 16%; width: 68%; color: #061f69; font-size: clamp(22px, 5.43cqw, 25px); font-weight: 900; line-height: 1.05; } .free-ticket-result__copy--received { top: 50.5%; left: 25%; width: 50%; color: #4d5876; font-size: clamp(11px, 2.83cqw, 13px); } .free-ticket-result__copy--ticket { top: 54.2%; left: 18%; width: 64%; color: #d60021; font-size: clamp(15px, 3.91cqw, 18px); font-weight: 900; } .free-ticket-result__copy--chance { top: 64.2%; left: 31%; width: 52%; color: #4d5876; font-size: clamp(10px, 2.5cqw, 11.5px); line-height: 1.1; } .free-ticket-result__copy--prize { top: 70.2%; left: 31%; width: 52%; color: #d00020; font-size: clamp(15px, 3.91cqw, 18px); font-weight: 900; white-space: nowrap; } .free-ticket-result__copy--use, .free-ticket-result__copy--later { top: 79.4%; display: flex; height: 10.1%; align-items: center; justify-content: center; font-size: clamp(13px, 3.48cqw, 16px); font-weight: 900; line-height: 1; } .free-ticket-result__copy--use { left: 9.2%; width: 39.2%; color: #fff; } .free-ticket-result__copy--later { left: 51%; width: 39.6%; color: #0843ac; } .free-ticket-result__copy--validity { top: 89.8%; left: 34%; width: 56%; color: #133b7f; font-size: clamp(10px, 2.61cqw, 12px); line-height: 1.05; } .free-ticket-result__action { position: absolute; z-index: 2; display: block; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: transparent; } .free-ticket-result__action--dismiss-icon { top: 1.8%; right: 1.5%; width: 8%; height: 11%; } .free-ticket-result__action--use { top: 80.1%; left: 9.2%; width: 39.2%; height: 10.1%; } .free-ticket-result__action--later { top: 80.1%; left: 51%; width: 39.6%; height: 10.1%; } .free-ticket-result__action:focus-visible { outline: 3px solid #ffd447; outline-offset: 2px; } @media (max-width: 359px) { .free-ticket-popup { right: 10px; } } @media (max-width: 600px) { .free-ticket-error-43, .free-ticket-error-44, .free-ticket-error-45, .free-ticket-result { padding: 6px; } } @media (prefers-reduced-motion: no-preference) { .free-ticket-popup__card { animation: free-ticket-attention 1s ease-in-out infinite; } .free-ticket-popup__card:hover, .free-ticket-popup__card:focus-visible, .free-ticket-popup__card:active { animation-play-state: paused; } } @keyframes free-ticket-attention { 0%, 68%, 100% { transform: translateY(0) rotate(0); filter: drop-shadow(0 3px 4px rgba(0, 35, 105, .3)); } 73% { transform: translateY(-2px) scale(1.008); } 78% { transform: translateY(-3px) scale(1.015); filter: brightness(1.07) drop-shadow(0 0 5px rgba(255, 201, 40, .8)); } 83% { transform: translateY(-2px) scale(1.008); } 88% { transform: translateY(0) rotate(0); } } @keyframes free-ticket-loading { to { transform: rotate(360deg); } }