.qira-partners { position: relative; height: 350vh; background-color: #2d0957; } .qira-partners__sticky { position: relative; height: 100vh; overflow: hidden; background-color: #2d0957; } .qira-partners__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: .5; filter: blur(80px); transform: scale(1.15); pointer-events: none; user-select: none; z-index: 0; } .qira-partners__list { position: absolute; left: 50%; top: 0; width: 100%; max-width: 780px; padding-inline: var(--qira-gutter); display: flex; flex-direction: column; align-items: stretch; z-index: 2; } .qira-partners__intro-item { width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem var(--qira-gutter); } .qira-partners__headline { font-family: var(--qira-font); font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-tight); color: #fff; margin: 0 0 1.25rem; } .qira-partners__intro-body { font-family: var(--qira-font); font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: var(--qira-fw-regular); color: rgba(255, 255, 255, .85); line-height: var(--qira-lh-body); margin: 0; max-width: 560px; margin-inline: auto; } .qira-partners__item { width: 100%; } .qira-partners__hd { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; height: 110px; background: none; border: none; font-family: inherit; cursor: pointer; padding: 0 .5rem; text-align: center; position: relative; z-index: 1; } .qira-partners__hd:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 4px; border-radius: 8px; } .qira-partners__hd--more { cursor: default; pointer-events: none; } .qira-partners__icon { width: 72px; height: 72px; flex-shrink: 0; border-radius: 12px; object-fit: contain; } .qira-lp .qira-partners__icon { max-width: none; max-height: none; display: inline-block; } .qira-partners__name { font-family: var(--qira-font); font-size: 88px; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-flat); color: #fff; } .qira-partners__name--more { } .qira-partners__panel { height: 0; overflow: hidden; opacity: 0; } .qira-partners__panel-inner { display: flex; border-radius: 30px; overflow: hidden; background: #fff; margin-bottom: 16px; } .qira-partners__features { flex: 0 0 40%; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; justify-content: center; gap: .875rem; background: #fff; } .qira-partners__feat { font-family: var(--qira-font); font-size: .9375rem; font-weight: var(--qira-fw-medium); color: #4a5fd4; line-height: 1.4; margin: 0; } .qira-partners__footnote { font-family: var(--qira-font); font-size: .75rem; font-weight: var(--qira-fw-regular); color: rgba(0, 0, 0, .45); margin: .25rem 0 0; } .qira-partners__visual { flex: 1; background: var(--qira-white); overflow: hidden; border-radius: 0; padding: 4px; display: flex; align-items: flex-start; justify-content: center; } .qira-lp .qira-partners__visual > img { width: 100%; height: auto; max-width: none; max-height: none; display: block; border-radius: 10px 10px 0 0; } .qira-partners__ex { container-type: inline-size; position: relative; pointer-events: none; width: 100%; aspect-ratio: 806 / 540; overflow: hidden; display: flex; flex-direction: column; gap: .5cqw; padding: 30px 50px 0; font-family: var(--qira-font); border-radius: 26px; } .qira-partners__ex--expedia { background: linear-gradient(155deg, #b7a6e8 0%, #9078dc 46%, #6c55ce 100%); } .qira-partners__ex--expedia::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(to bottom, rgba(108, 85, 206, 0) 0%, #6c55ce 100%); pointer-events: none; z-index: 2; } .qira-partners__ex--perplexity { padding: 0 70px; justify-content: center; background: radial-gradient(ellipse 55% 45% at 92% 6%, rgba(206, 160, 244, .55) 0%, transparent 55%), linear-gradient(145deg, #3e1f9e 0%, #7b5fd8 42%, #d7c6ee 100%); } .qira-partners__ex-pp-card { overflow: hidden; border-radius: 5cqw; padding: 4cqw 4.5cqw; background: rgba(246, 243, 252, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 3cqw 12cqw rgba(30, 10, 70, .18); display: flex; flex-direction: column; gap: 3cqw; } .qira-partners__ex-pp-title { margin: 0; font-size: 4cqw; font-weight: var(--qira-fw-semibold); line-height: 1.3; color: #5b3fd0; } .qira-partners__ex-pp-imgs { width: 120%; max-width: none; height: auto; display: block; -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 88%); mask-image: linear-gradient(to right, #000 70%, transparent 88%); } .qira-partners__ex-pp-body { margin: 0; font-size: 3.7cqw; line-height: 1.5; color: #3a3a42; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); } .qira-partners__ex-pp-actions { display: flex; gap: 3cqw; } .qira-partners__ex-pp-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2.5cqw; padding: 3cqw 5cqw; border-radius: 999px; background: #fff; box-shadow: 0 1cqw 3cqw rgba(30, 10, 70, .10); font-size: 3.6cqw; font-weight: var(--qira-fw-medium); color: #1a1a20; white-space: nowrap; } .qira-partners__ex-pp-logo { width: 4.5cqw; height: 4.5cqw; flex: 0 0 auto; } .qira-partners__ex--notion { aspect-ratio: 806 / 540; padding: 0; overflow: hidden; background: linear-gradient(140deg, #e48abe 0%, #b57cd8 42%, #8578e4 100%); } .qira-partners__ex-nt-layout { position: absolute; right: 0; top: 38%; width: 60%; height: auto; max-width: none; opacity: .5; -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%); mask-image: linear-gradient(to left, #000 55%, transparent 100%); } .qira-partners__ex-nt-card { position: absolute; left: 6cqw; top: 3cqw; width: 70%; z-index: 2; overflow: hidden; border-radius: 5cqw 5cqw 0 0; padding: 3.5cqw 3.5cqw 0; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 2cqw 8cqw rgba(30, 10, 70, .15); display: flex; flex-direction: column; gap: 2.5cqw; font-family: var(--qira-font); } .qira-partners__ex-nt-tabs { display: flex; align-items: center; gap: 4cqw; } .qira-partners__ex-nt-tab { font-size: 2.9cqw; color: #6b6b76; white-space: nowrap; } .qira-partners__ex-nt-tab--active { color: #3a2e86; font-weight: var(--qira-fw-semibold); background: #ede9fb; border-radius: 2cqw; padding: 1.2cqw 2.6cqw; } .qira-partners__ex-nt-sub { display: flex; align-items: center; gap: 1.5cqw; font-size: 2.8cqw; font-weight: var(--qira-fw-semibold); color: #6c43c6; } .qira-partners__ex-nt-atom { width: 4cqw; height: 4cqw; flex: 0 0 auto; } .qira-partners__ex-nt-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 3cqw 3cqw 0; border-radius: 2.5cqw 2.5cqw 0 0; background: #fff; display: flex; flex-direction: column; gap: 1.5cqw; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); } .qira-partners__ex-nt-label { margin: 1cqw 0 0; font-size: 2.5cqw; font-weight: var(--qira-fw-bold); letter-spacing: .08em; color: #8a8a93; } .qira-partners__ex-nt-text { margin: 0; font-size: 2.9cqw; line-height: 1.45; color: #3a3a42; } .qira-partners__ex-nt-text b { font-weight: var(--qira-fw-semibold); color: #26262c; } .qira-partners__ex-nt-cmd { position: absolute; top: 12cqw; right: 2.5cqw; width: 62%; z-index: 3; --qira-grad-fill: #fff; --qira-grad-bw: .5cqw; border-radius: 8cqw; padding: 3.2cqw 4.5cqw; font-family: var(--qira-font); font-size: 2.5cqw; font-weight: var(--qira-fw-medium); line-height: 1.35; color: #1a1a20; box-shadow: 0 2cqw 8cqw rgba(30, 10, 70, .20); } .qira-partners__ex--card { margin: 0; padding: 4cqw 4.5cqw 0; border-radius: 5cqw 5cqw 0 0; background: rgba(255, 255, 255, .8); display: flex; flex-direction: column; gap: 4cqw; } .qira-partners__ex-resp { font-size: 3.6cqw; font-weight: var(--qira-fw-medium); line-height: 1.45; color: #3e2e86; } .qira-partners__ex-src { display: flex; align-items: center; gap: 2cqw; } .qira-partners__ex-src-icon { width: 5cqw; height: 5cqw; border-radius: 1.4cqw; flex: 0 0 auto; } .qira-partners__ex-src-name { font-size: 3.8cqw; font-weight: var(--qira-fw-medium); color: #2a2340; } .qira-partners__ex-info { width: 4cqw; height: 4cqw; flex: 0 0 auto; } .qira-partners__ex-ticket { background: #fff; border-radius: 3.5cqw 3.5cqw 0 0; padding: 4cqw 4.5cqw 0; display: flex; flex-direction: column; gap: 3cqw; } .qira-partners__ex-ticket-row { display: flex; align-items: flex-start; justify-content: space-between; } .qira-partners__ex-trip { font-size: 5cqw; font-weight: var(--qira-fw-semibold); color: #1a1a20; } .qira-partners__ex-dates { font-size: 3.3cqw; color: #6b6b76; margin-top: .6cqw; } .qira-partners__ex-ticket-price { text-align: right; } .qira-partners__ex-price { font-size: 6.5cqw; font-weight: var(--qira-fw-semibold); color: #1a1a20; } .qira-partners__ex-price-sub { font-size: 3.3cqw; color: #6b6b76; margin-top: .6cqw; } .qira-partners__ex-flight { display: flex; align-items: center; gap: 2.5cqw; } .qira-partners__ex-plane { width: 5cqw; height: 5cqw; flex: 0 0 auto; } .qira-partners__ex-time { font-size: 4.6cqw; font-weight: var(--qira-fw-medium); color: #1a1a20; } .qira-partners__ex-line { flex: 1 1 auto; height: 0; border-top: .3cqw solid #1a1a20; } .qira-partners__ex-carrier { align-self: flex-start; font-size: 3.3cqw; color: #3a3a42; background: #eceaf3; border-radius: 2cqw; padding: 1.4cqw 3cqw; } .qira-partners__ex-route { font-size: 3.8cqw; color: #9a96a6; } .qira-partners__features { position: relative; } .qira-partners__ex-note { position: absolute; left: 1.5rem; bottom: .9rem; font-size: .75rem; color: #9a96a6; } .qira-partners__ex--workato { padding: 0 50px; justify-content: center; background: linear-gradient(145deg, #5b6fe0 0%, #7b5fd0 50%, #c9b6e8 100%); } .qira-partners__ex-wk-card { overflow: hidden; border-radius: 5cqw; padding: 4cqw 4.5cqw; background: rgba(255, 255, 255, .60); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 3cqw 12cqw rgba(30, 10, 70, .18); display: flex; flex-direction: column; gap: 3cqw; } .qira-partners__ex-wk-recap { margin: 0; font-size: 3.6cqw; font-weight: var(--qira-fw-semibold); color: #6c43c6; } .qira-partners__ex-wk-event { background: #fff; border-radius: 3cqw; padding: 3.5cqw; display: flex; flex-direction: column; gap: 2.5cqw; } .qira-partners__ex-wk-title { margin: 0; font-size: 4cqw; font-weight: var(--qira-fw-semibold); color: #1a1a20; } .qira-partners__ex-wk-when { border: .3cqw solid #e2e2ec; border-radius: 2.5cqw; padding: 3cqw; background: #f7f8fc; display: flex; flex-direction: column; gap: 2cqw; } .qira-partners__ex-wk-row { display: flex; align-items: center; gap: 2.5cqw; font-size: 3.3cqw; color: #3a3a42; } .qira-partners__ex-wk-ico { width: 4.5cqw; height: 4.5cqw; flex: 0 0 auto; } .qira-partners__ex-wk-label { margin: 0; font-size: 3.3cqw; color: #8a8a93; } .qira-partners__ex-wk-attendee { display: flex; align-items: center; gap: 2.5cqw; font-size: 3.3cqw; color: #1a1a20; } .qira-partners__ex-wk-avatar { width: 6cqw; height: 6cqw; border-radius: 50%; flex: 0 0 auto; } .qira-partners__ex-wk-actions { display: flex; gap: 3cqw; } .qira-partners__ex-wk-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2.5cqw; padding: 3cqw 4.5cqw; border-radius: 999px; background: #fff; border: .35cqw solid #4c86f0; font-size: 3.3cqw; font-weight: var(--qira-fw-medium); color: #1a1a20; white-space: nowrap; } .qira-partners__ex-wk-pill-ico { width: 4.5cqw; height: 4.5cqw; flex: 0 0 auto; } @media (min-width: 1600px) { .qira-partners__ex--perplexity { } } @media (orientation: portrait) and (max-width: 900px) { .qira-partners { height: 375vh; } .qira-partners__headline { font-size: clamp(1.75rem, 5.5vw, 2.25rem); } .qira-partners__name { font-size: clamp(2rem, 7vw, 4rem); } .qira-partners__intro-item { min-height: 0; padding: 3.5rem var(--qira-gutter) calc(3.5rem + 100px); } .qira-partners__hd { height: 80px; } .qira-partners__panel-inner { flex-direction: column; min-height: 0; } .qira-partners__visual { order: 0; flex: 0 0 auto; border-radius: 20px 20px 0 0; padding: 4px 4px 0; } .qira-partners__features { order: 1; flex: 0 0 auto; padding: 1.25rem 1.25rem 2.5rem; gap: .625rem; justify-content: center; } .qira-partners__feat { font-size: .9375rem; } } @media (orientation: portrait) and (min-width: 601px) and (max-width: 900px) { .qira-partners__item {max-width: 500px; margin: auto} .qira-partners__panel-inner { border-radius: 30px; } .qira-lp .qira-partners__visual img { border-radius: 2vw 2vw 0 0; } .qira-partners__ex {padding: 8cqw 10cqw 0} .qira-partners__ex.qira-partners__ex--perplexity, .qira-partners__ex.qira-partners__ex--workato {padding: 0 10cqw} .qira-partners__ex-nt-card {height: 100%; zoom: 1.4} .qira-partners__ex-nt-cmd {zoom: 1.4} } @media (orientation: portrait) and (max-width: 480px) { .qira-partners__name { font-size: clamp(1.75rem, 8.5vw, 2.5rem); } .qira-partners__hd { height: 64px; gap: .5rem; } .qira-partners__icon { width: 36px; height: 36px; } .qira-partners__ex {padding: 8cqw 12cqw 0} .qira-partners__ex.qira-partners__ex--perplexity, .qira-partners__ex.qira-partners__ex--workato {padding: 0 15cqw} .qira-partners__ex-nt-card {height: 100%; zoom: 1.4} .qira-partners__ex-nt-cmd {zoom: 1.4} } @media (orientation: landscape) and (max-height: 600px) { .qira-partners__name { font-size: clamp(1.75rem, 8.5vw, 2.5rem); } .qira-partners__icon { width: 36px; height: 36px; } .qira-partners__hd { height: 64px; gap: .5rem; } .qira-partners__panel-inner {min-height: unset} }