.qira-bento { --bento-pad-x: var(--qira-gutter); --bento-pad-y: clamp(4rem, 8vw, 7rem); --card-gap: 16px; --card-radius: 20px; --row-tall: 305px; --row-short: 222px; --grid-h: calc(var(--row-tall) + var(--card-gap) + var(--row-short) + 72px); --col-pair-w: 390px; --col-span-w: 390px; --card-pink: #f5eeff; } .qira-bento { background: #fff; overflow-x: clip; overflow-y: visible; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .qira-bento__header { width: 100%; box-sizing: border-box; max-width: var(--qira-band); margin: 0 auto; padding: var(--bento-pad-y) var(--bento-pad-x) 32px; } .qira-bento__heading { font-family: var(--qira-font); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-tight); letter-spacing: var(--qira-track-tight); color: var(--font-color, #171717); margin: 0 0 16px; } .qira-bento__subhead { font-family: var(--qira-font); font-size: clamp(0.9rem, 1.2vw, 1rem); font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-body); color: var(--font-color, #171717); max-width: 460px; margin: 0; } .qira-bento__scroll-wrap { overflow-x: auto; overflow-y: visible; scrollbar-width: none; } .qira-bento__scroll-wrap::-webkit-scrollbar { display: none; } html.qira-js .qira-bento__scroll-wrap { overflow-x: hidden; scroll-snap-type: none; } .qira-bento__grid { display: flex; flex-direction: row; align-items: stretch; gap: var(--card-gap); height: var(--grid-h); padding-left: max(var(--qira-gutter), calc((100vw - var(--qira-max-width)) / 2)); padding-right: max(var(--qira-gutter), calc((100vw - var(--qira-max-width)) / 2)); padding-top: 10px; padding-bottom: 72px; width: max-content; } .qira-bento__pair { display: flex; flex-direction: column; gap: var(--card-gap); width: var(--col-pair-w); flex-shrink: 0; } .qira-bento__card--tall { flex: var(--row-tall); } .qira-bento__card--short { flex: var(--row-short); } .qira-bento__card { position: relative; border-radius: var(--card-radius); overflow: hidden; cursor: pointer; outline: none; padding: 4px; -webkit-user-select: none; user-select: none; transition: transform .25s ease, box-shadow .25s ease; } .qira-bento__card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(80, 40, 180, .38); } .qira-bento__card:focus-visible { box-shadow: 0 0 0 3px #864bdb; } .qira-bento__card.is-static { cursor: default; } .qira-bento__card.is-static:hover { transform: none; box-shadow: none; } .qira-bento__card--span { width: var(--col-span-w); flex-shrink: 0; } .qira-bento__card--a { background: linear-gradient(to top right, #5c8dff 0%, #a079ff 55%, #d06ad6 100%); display: flex; } .qira-bento__card--a .qira-bento__card-media { flex: 1; position: relative; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; } .qira-bento__card--a .qira-bento__card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .qira-bento__card--a .qira-bento__card-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%); z-index: 1; } .qira-bento__card--a .qira-bento__card-body { position: relative; z-index: 2; padding: 16px 18px 20px; } .qira-bento__card--a .qira-bento__card-eyebrow, .qira-bento__card--a .qira-bento__card-title, .qira-bento__card--a .qira-bento__card-text { color: #fff; } .qira-bento__card--b { background: var(--card-pink); display: flex; flex-direction: column; gap: 4px; } .qira-bento__card-visual { flex: 1; position: relative; overflow: hidden; border-radius: 16px; -webkit-user-select: none; user-select: none; } .qira-bento__card-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .qira-bento__ca { container-type: inline-size; display: flex; flex-direction: column; gap: 1cqw; padding: 1cqw 1.5cqw; background: radial-gradient(ellipse 72% 95% at 2% 100%, rgba(96,114,232,0.60) 0%, transparent 66%), radial-gradient(ellipse 85% 100% at 87% 105%, rgba(196,96,206,0.55) 0%, transparent 68%), #0e0e17; } .qira-bento__ca-logo { width: 10cqw  !important; height: auto  !important; display: block; } .qira-bento__ca-q { margin: 0; font-family: var(--qira-font); font-size: 7.5cqw; font-weight: var(--qira-fw-bold); line-height: 1; letter-spacing: -0.01em; color: #fff; } .qira-bento__ca-grad { background: linear-gradient(95deg, #7fb0ff 0%, #b07cf0 55%, #e8734e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .qira-bento__nt { container-type: inline-size; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: url('https://p1-ofp.static.pub/ShareResource/qira/media/lenovo-qira-bento-7-summarize-background.jpg'); background-size: cover; background-position: center; } .qira-bento__nt-center { position: relative; } .qira-bento__nt-pill { --qira-grad: linear-gradient(135deg, #b69cff 0%, #e7a0da 100%); --qira-grad-fill: rgba(18, 16, 28, .52); --qira-grad-bw: .5cqw; white-space: nowrap; padding: 3.6cqw 6cqw; font-family: var(--qira-font); font-size: 5.4cqw; font-weight: var(--qira-fw-medium); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .qira-bento__nt-pill--active { position: relative; --qira-grad: linear-gradient(135deg, #c4a6ff 0%, #f0a9e0 100%); --qira-grad-fill: rgba(30, 24, 40, .42); } .qira-bento__nt-pill--left, .qira-bento__nt-pill--right { position: absolute; top: 50%; transform: translateY(-50%); } .qira-bento__nt-pill--left { right: 100%; margin-right: 4cqw; } .qira-bento__nt-pill--right { left: 100%; margin-left: 4cqw; } .qira-bento__ra { container-type: inline-size; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1.5cqw; background-image: url('https://p4-ofp.static.pub/ShareResource/qira/media/lenovo-qira-bento-6-local-agent-background.jpg'); background-size: cover; background-position: center; } .qira-bento__ra-card { width: 85cqw; flex: 0 0 auto; display: flex; flex-direction: column; gap: 3cqw; padding: 4.5cqw; border-radius: 5cqw; background: rgba(255, 255, 255, .70); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 6cqw 20cqw rgba(20, 20, 60, .18); font-family: var(--qira-font); } .qira-bento__ra-command { padding: 3.4cqw 4cqw; border-radius: 3.4cqw; background: #fff; font-size: 3.1cqw; color: #3a3a42; text-align: right; } .qira-bento__ra-answer { display: flex; flex-direction: column; gap: 3cqw; padding: 4cqw; border-radius: 4cqw; background: #fff; } .qira-bento__ra-status { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; } .qira-bento__ra-status-text { font-size: 3.5cqw; font-weight: var(--qira-fw-semibold); color: #6c43c6; } .qira-bento__ra-play { width: 4cqw; height: 4cqw; flex: 0 0 auto; } .qira-bento__ra-selectall { display: flex; align-items: center; gap: 2.5cqw; font-size: 2.9cqw; color: #6b6b76; } .qira-bento__ra-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.4cqw; } .qira-bento__ra-file { display: flex; align-items: center; gap: 1cqw; padding: 2cqw; border-radius: 3cqw; background: #eceaf8; } .qira-bento__ra-file-iconwrap { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 .25cqw rgba(20, 20, 60, .05); } .qira-bento__ra-file-icon { width: 40%; height: auto; display: block; } .qira-bento__ra-file-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .5cqw; } .qira-bento__ra-file-meta b { font-size: 3.1cqw; font-weight: var(--qira-fw-semibold); color: #26262c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qira-bento__ra-file-meta small { display: flex; align-items: center; font-size: 2.5cqw; color: #6b6b76; white-space: nowrap; } .qira-bento__ra-dot { display: inline-block; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; margin: 0 1.2cqw; flex: 0 0 auto; } .qira-bento__ra-dot--local { background: #9a9aa4; } .qira-bento__ra-dot--kb { background: #4c86f0; } .qira-bento__ra-check { position: relative; flex: 0 0 auto; width: 5cqw; height: 5cqw; border: .4cqw solid #c4c4cc; border-radius: 1.5cqw; } .qira-bento__ra-check--on { background: #6c43c6; border-color: #6c43c6; } .qira-bento__ra-check--on::after { content: ""; position: absolute; left: 34%; top: 16%; width: 24%; height: 50%; border: solid #fff; border-width: 0 .5cqw .5cqw 0; transform: rotate(45deg); } .qira-bento__ul { container-type: inline-size; display: flex; flex-direction: column; gap: 1cqw; padding: 3cqw; overflow: hidden; background: radial-gradient(ellipse 55% 48% at 14% 102%, rgba(70, 120, 255, .78) 0%, transparent 60%), radial-gradient(ellipse 55% 50% at 52% 95%, rgba(168, 92, 236, .70) 0%, transparent 60%), radial-gradient(ellipse 55% 48% at 90% 100%, rgba(236, 110, 170, .64) 0%, transparent 62%), linear-gradient(180deg, #1c0a42 0%, #290e56 50%, #3a1a7a 100%); } .qira-bento__ul-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 3cqw; padding: 3.5cqw; border-radius: 4cqw; background: rgba(255, 255, 255, .80); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 6cqw 20cqw rgba(20, 10, 50, .20); } .qira-bento__ul-head { display: flex; align-items: center; gap: 2cqw; padding: 1cqw 1.5cqw 0; font-family: var(--qira-font); } .qira-bento__ul-atom { width: 8cqw; height: auto; flex: 0 0 auto; } .qira-bento__ul-rec { font-size: 3.5cqw; font-weight: var(--qira-fw-semibold); color: #6c43c6; } .qira-bento__ul-dur { margin-left: auto; font-size: 2.9cqw; color: #6c43c6; } .qira-bento__ul-translate { width: 6.5cqw; height: 6.5cqw; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .qira-bento__ul-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 3.5cqw; border-radius: 3cqw; background: #fff; font-family: var(--qira-font); -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); } .qira-bento__ul-body p { margin: 0 0 2.5cqw; } .qira-bento__ul-en, .qira-bento__ul-de { font-size: 4cqw; line-height: 1.5; color: #1a1a20; } .qira-bento__ul-live { font-size: 3cqw; font-weight: var(--qira-fw-semibold); color: #6c43c6; } .qira-bento__ul-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 2cqw; padding: 2cqw; border-radius: 999px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .qira-bento__ul-btn { flex: 0 0 auto; width: 12cqw; height: 12cqw; border-radius: 50%; background: rgba(255, 255, 255, .90); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); display: flex; align-items: center; justify-content: center; } .qira-bento__ul-btn svg { width: 56%; height: 56%; } .qira-bento__ul-btn { color: #6c43c6; } .qira-bento__ul-split { flex: 0 0 auto; display: flex; align-items: center; height: 12cqw; border-radius: 999px; background: rgba(255, 255, 255, .90); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); } .qira-bento__ul-btn--bare { background: none; box-shadow: none; } .qira-bento__ul-split-sep { flex: 0 0 auto; width: 1px; height: 6cqw; background: rgba(30, 0, 19, .14); } .qira-bento__ul-btn-atom { width: 60%; height: auto; } .qira-bento__ul-recbtn { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 5cqw; height: 12cqw; padding: 0 4cqw; border-radius: 999px; background: rgba(255, 255, 255, .90); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); } .qira-bento__ul-recdot { flex: 0 0 auto; width: 3cqw; height: 3cqw; border-radius: .8cqw; background: #e1251b; } .qira-bento__ul-recwave { width: 15cqw; height: 4.2cqw; flex: 0 0 auto; } .qira-bento__ul-recchev { width: 3.5cqw; height: 3.5cqw; flex: 0 0 auto; } .qira-bento__card-footer { flex-shrink: 0; padding: 14px 56px 18px 18px; } .qira-bento__card.is-static .qira-bento__card-footer { padding-right: 18px; } .qira-bento__card--b .qira-bento__card-title { color: var(--font-color, #171717); } .qira-bento__card--b .qira-bento__card-text { color: var(--font-color, #171717); } .qira-bento__card-eyebrow { font-family: var(--qira-font); font-size: 10px; font-weight: var(--qira-fw-medium); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.75); display: block; margin: 0 0 5px; } .qira-bento__card-title { font-family: var(--qira-font); font-size: clamp(13px, 1vw, 16px); font-weight: var(--qira-fw-medium); line-height: 1.25; margin: 0 0 4px; } .qira-bento__card-text { font-family: var(--qira-font); font-size: 12px; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-relaxed); margin: 0; } .qira-bento__card-badge { display: inline-block; font-family: var(--qira-font); font-size: 10px; font-weight: var(--qira-fw-medium); letter-spacing: .07em; text-transform: uppercase; color: #864bdb; background: rgba(134, 75, 219, .12); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; display: block; } .qira-bento__card-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); transition: transform .2s ease; } .qira-bento__card--a .qira-bento__card-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .qira-bento__card:hover .qira-bento__card-play-btn { transform: translate(-50%, calc(-50% - 6px)); } .qira-bento__card-expand { position: absolute; bottom: 14px; right: 14px; width: 32px; height: 32px; z-index: 4; pointer-events: none; opacity: .5; transition: opacity .2s ease; } .qira-bento__card--b .qira-bento__card-expand { } .qira-bento__card--a .qira-bento__card-expand { filter: invert(1); opacity: .6; } .qira-bento__card:hover .qira-bento__card-expand { opacity: .9; } .qira-bento__scrollbar-wrap { display: flex; justify-content: center; padding: 20px 0 var(--bento-pad-y); margin-top: -50px; } .qira-bento__scrollbar { position: relative; width: 200px; height: 6px; background: rgba(134, 75, 219, .15); border-radius: 3px; } .qira-bento__scrollbar-thumb { position: absolute; top: 0; left: 0; height: 100%; background: #864bdb; border-radius: 3px; min-width: 24px; } .qira-bento__overlay { position: fixed; inset: 0; z-index: 500; background: rgba(22, 18, 60, .93); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .qira-bento__overlay.is-open { opacity: 1; pointer-events: auto; } .qira-bento__overlay-close { position: absolute; top: 28px; right: 32px; width: 40px; height: 40px; border: none; background: rgba(255,255,255,0.12); border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s ease, transform .18s ease; z-index: 10; } .qira-bento__overlay-close:hover { background: rgba(255,255,255,0.22); transform: rotate(90deg); } .qira-bento__overlay-close svg { width: 18px; height: 18px; display: block; } .qira-bento__overlay-video { display: none; width: min(800px, 90vw); } .qira-bento__overlay.is-video .qira-bento__overlay-video { display: block; } .qira-bento__overlay-iframe-wrap { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 16px; overflow: hidden; background: #000; } .qira-bento__overlay-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; } .qira-bento__overlay-content { display: none; width: min(920px, 92vw); } .qira-bento__overlay.is-content .qira-bento__overlay-content { display: block; } .qira-bento__overlay-card { background: linear-gradient(140deg, #ede9fe 0%, #f5eeff 50%, #fdf4ff 100%); border-radius: 24px; display: grid; grid-template-columns: 1fr 1.35fr; min-height: 440px; overflow: hidden; } .qira-bento__overlay-text { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .qira-bento__overlay-title { font-family: var(--qira-font); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-snug); letter-spacing: var(--qira-track-tight); color: var(--font-color, #171717); margin: 0; } .qira-bento__overlay-body { font-family: var(--qira-font); font-size: 15px; line-height: var(--qira-lh-body); color: var(--font-color, #171717); } .qira-bento__overlay-body p { margin: 0 0 12px; } .qira-bento__overlay-body p:last-child { margin: 0; } .qira-bento__overlay-media { position: relative; overflow: hidden; border-radius: 0 24px 24px 0; min-height: 280px; background: linear-gradient(145deg, #c4b5fd 0%, #a78bfa 50%, #7c3aed 100%); } .qira-bento__overlay-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .qira-bento__scroll-wrap { scroll-snap-type: x mandatory; scroll-padding-left: var(--qira-gutter); } .qira-bento__pair, .qira-bento__card--span { scroll-snap-align: start; } .qira-bento__overlay-card { grid-template-columns: 1fr; } .qira-bento__overlay-media { display: none; } .qira-bento__overlay-text { padding: 36px 28px; } .qira-bento__ca { gap: 20px; padding: 20px; } } @media (max-width: 600px) { .qira-bento { --bento-peek: 44px; --row-tall: 356px; --row-short: 183px; --col-pair-w: calc(100vw - 2 * var(--qira-gutter) - var(--bento-peek)); --col-span-w: calc(100vw - 2 * var(--qira-gutter) - var(--bento-peek)); } } @media (max-height: 600px) { .qira-bento__grid { max-height: calc(100dvh - 2 * var(--card-gap) - 12px); padding-bottom: 24px; } .qira-bento__scrollbar-wrap { margin-top: -38px; } .qira-bento__pair { display: contents; } .qira-bento__card--tall, .qira-bento__card--short, .qira-bento__card--span { flex: 0 0 auto; align-self: stretch; width: auto; aspect-ratio: 10 / 11; min-width: 330px; } .qira-bento__card--a { aspect-ratio: 16 / 9; } .qira-bento__card { scroll-snap-align: start; } .qira-bento__ca { gap: 3cqw; padding: 3cqw; } }