.qira-next-move { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background-image: url('//p3-ofp.static.pub/ShareResource/qira/media/lenovo-qira-next-move-background-2880w-q75.webp'); background-size: cover; background-position: center 40%; background-repeat: no-repeat; overflow: hidden; } .qira-next-move::before { content: ''; position: absolute; inset: 0; background: rgba(4, 2, 18, .22); pointer-events: none; z-index: 0; } .qira-next-move__inner { position: relative; z-index: 1; width: 100%; max-width: var(--qira-band); margin-inline: auto; padding-block: var(--qira-section-py); padding-inline: var(--qira-gutter); display: flex; flex-direction: column; align-items: center; text-align: center; } .qira-next-move__text { max-width: 660px; margin-bottom: calc(1.125rem + 40px); } .qira-next-move__heading { font-family: var(--qira-font); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-tight); letter-spacing: var(--qira-track-tight); color: #fff; margin: 0 0 1.125rem; } .qira-next-move__body { font-family: var(--qira-font); font-size: clamp(1rem, 1.5vw, 1.1875rem); line-height: var(--qira-lh-body); color: rgba(255, 255, 255, .82); margin: 0; } .qira-next-move__stage { pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; will-change: transform; } .qira-next-move__inset { position: relative; width: min(580px, 88vw, calc(82svh * 1130 / 818)); aspect-ratio: 1130 / 818; border-radius: 18px; overflow: hidden; background: #0f0e1a; box-shadow: 0 24px 64px rgba(0, 0, 0, .55); } .qira-next-move__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px; filter: drop-shadow(0px 2px 6px #00000066); } .qira-next-move__layer--bg { z-index: 1; opacity: 1; } .qira-next-move__layer--wire, .qira-next-move__layer--detail { inset: auto; width: 80%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; } .qira-next-move__layer--wire { z-index: 2; opacity: 0; } .qira-next-move__layer--detail { z-index: 3; opacity: 0; } .qira-nm-card { aspect-ratio: 445 / 349; height: auto; overflow: hidden; container-type: inline-size; background: #fff; border-radius: 16px; filter: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .40); font-family: var(--qira-font); color: #1b1b1f; text-align: left; } .qira-nm-card__banner { height: 22.6%; margin: 2.8% 2.8% 0; border-radius: 9px; background-color: #1aa6b7; background-size: cover; background-position: center; } .qira-nm-card__body { display: flex; gap: 3.5%; padding: 3.4% 4.6% 0; } .qira-nm-card__main { flex: 1 1 60%; min-width: 0; } .qira-nm-card__side { flex: 0 0 33%; } .qira-nm-card__title { margin: 0 0 3.4%; font-size: 5.5cqw; line-height: 1.04; font-weight: 500; letter-spacing: 0; color: #16161a; } .qira-nm-card__lead { margin: 0 0 2.4%; font-size: 2.5cqw; font-weight: var(--qira-fw-semibold); color: #1b1b1f; } .qira-nm-card__text { margin: 0 0 2.4%; font-size: 2.75cqw; line-height: var(--qira-lh-body); color: #3a3a40; } .qira-nm-card__meta { list-style: none; margin: .5% 0 0; padding: 0; display: flex; flex-direction: column; gap: 1cqw; } .qira-nm-card__meta-row { display: flex; align-items: center; gap: 5%; font-size: 2.45cqw; color: #26262c; white-space: nowrap; } .qira-nm-card__icon { width: 3.1cqw; height: 3.1cqw; flex: none; color: #57575f; } .qira-nm-card__rsvp { margin-top: 9%; height: 11cqw; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #1c1b64; color: #fff; font-size: 2.8cqw; font-weight: var(--qira-fw-bold); letter-spacing: .02em; } .qira-nm-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 88%); pointer-events: none; z-index: 5; } .qira-next-move__scan { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; aspect-ratio: 890 / 698; z-index: 4; pointer-events: none; } .qira-next-move__scan > * { position: absolute; inset: 0; border-radius: 16px; } .qira-next-move__film { z-index: 1; background: rgba(255, 255, 255, .72); opacity: 0; } .qira-next-move__wipe { z-index: 2; opacity: .6; --wp: 0; background: linear-gradient(135deg, #4d8cf5 0%, #a179fd 13%, #d26ad1 25%, #e8639e 38%, #fb6f66 51%, #e8639e 63%, #d26ad1 75%, #a179fd 87%, #4d8cf5 100%); -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0) calc(max(var(--wp) - 1, 0) * 128%), #000 calc(max(var(--wp) - 1, 0) * 128% + 14%), #000 calc(min(var(--wp), 1) * 128% - 14%), rgba(0,0,0,0) calc(min(var(--wp), 1) * 128%)); mask-image: linear-gradient(135deg, rgba(0,0,0,0) calc(max(var(--wp) - 1, 0) * 128%), #000 calc(max(var(--wp) - 1, 0) * 128% + 14%), #000 calc(min(var(--wp), 1) * 128% - 14%), rgba(0,0,0,0) calc(min(var(--wp), 1) * 128%)); } .qira-next-move__ring { z-index: 3; padding: 4px; opacity: 0; background: linear-gradient(135deg, #9db7ff 0%, #b89bff 25%, #ed83f2 50%, #ff83b0 75%, #ff8a72 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .qira-next-move__prompts { display: flex; flex-wrap: nowrap; justify-content: center; gap: .5rem; opacity: 0; max-width: min(780px, 92vw); } @media (max-width: 980px) { .qira-next-move__prompts { flex-wrap: wrap; } } .qira-next-move__prompt { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem .5rem .5rem; border-radius: var(--qira-radius-pill); border: none; background: rgba(14, 10, 30, 1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; font-family: var(--qira-font); font-size: .9375rem; font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-flat); white-space: nowrap; cursor: default; } .qira-next-move__prompt--plain { padding: .5rem 1.125rem; } .qira-next-move__prompt--right-icon { padding: .5rem .5rem .5rem 1rem; } .qira-next-move__prompt-wrap { display: inline-flex; border-radius: calc(var(--qira-radius-pill) + 2px); padding: 2px; flex-shrink: 0; } .qira-next-move__prompt-wrap--blue { background: linear-gradient(135deg, #41d6ff, #1844b0); } .qira-next-move__prompt-wrap--tonal { background: linear-gradient(135deg, #9db7ff, #b89bff, #ed83f2, #ff83b0, #ff8a72); } .qira-next-move__prompt-wrap--green { background: linear-gradient(135deg, #04db6c, #058241); } .qira-next-move__prompt-badge { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; overflow: hidden; } .qira-next-move__prompt-badge--outlook { background: #0078d4; } .qira-next-move__prompt-badge--chat { background: #1daa61; } .qira-next-move__prompt-badge img { width: 18px; height: 18px; object-fit: contain; display: block; flex-shrink: 0; max-width: none; max-height: none; } @media (max-width: 640px) { .qira-next-move__prompts { flex-wrap: wrap; } .qira-next-move__prompt { font-size: .875rem; padding: .45rem .875rem .45rem .45rem; min-height: 40px; } .qira-next-move__prompt--plain { padding: .45rem 1rem; } .qira-next-move__prompt--right-icon { padding: .45rem .45rem .45rem .875rem; } .qira-next-move__prompt-badge { width: 26px; height: 26px; } .qira-next-move__prompt-badge img { width: 15px; height: 15px; } } @media (prefers-reduced-motion: reduce) { .qira-next-move__layer--detail, .qira-next-move__prompts, .qira-next-move__ring { opacity: 1  !important; } .qira-next-move__layer--wire, .qira-next-move__film, .qira-next-move__wipe { opacity: 0  !important; } .qira-next-move__prompts { transform: none  !important; } }