.qira-devices { --devices-pad-x: var(--qira-gutter); --devices-visible-w: min(calc(100vw - 2 * var(--qira-gutter)), var(--qira-max-width)); --devices-pad-y: clamp(4rem, 8vw, 7rem); --card-gap: 16px; --card-radius: 20px; } .qira-devices { position: relative; overflow: hidden; background-color: var(--bg-devices-base); background-image: radial-gradient(ellipse 50% 45% at 95% 130%, rgba(191, 67, 196, .25) 0%, transparent 50%), radial-gradient(ellipse 65% 75% at 108% 25%, rgba(200, 140, 245, .65) 0%, transparent 60%), radial-gradient(ellipse 50% 65% at -8% 30%, rgba(200, 140, 245, .60) 0%, transparent 55%), radial-gradient(ellipse 65% 65% at 40% 55%, rgba(20, 5, 75, .65) 0%, transparent 60%); } .qira-devices__inner { position: relative; z-index: 1; max-width: var(--qira-band); margin: 0 auto; padding: var(--devices-pad-y) var(--devices-pad-x); } .qira-devices__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; } .qira-devices__header-left { display: flex; flex-direction: column; gap: 24px; } .qira-devices__heading { font-family: var(--qira-font); font-size: clamp(24px, 3vw, 48px); font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-tight); letter-spacing: var(--qira-track-tight); color: #fff; margin: 0; } .qira-devices__ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .qira-devices__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: none; background: var(--light-blue, #c9d0f0); box-shadow: var(--qira-btn-shadow); font-family: var(--qira-font); font-size: 14px; font-weight: var(--qira-fw-medium); color: var(--font-color, #171717); text-decoration: none; white-space: nowrap; transition: background .2s ease, transform .2s ease; } .qira-devices__cta:hover { background: var(--pale-blue, #eaeef5); transform: translateY(-1px); } .qira-devices__cta img { width: 14px; height: 14px; display: block; flex-shrink: 0; filter: brightness(0); } .qira-devices__nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .qira-devices__arrow { width: 44px; height: 44px; border-radius: 999px; border: none; background: var(--light-blue, #c9d0f0); box-shadow: var(--qira-btn-shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, opacity .2s ease, transform .15s ease; } .qira-devices__arrow:hover:not(:disabled) { background: var(--pale-blue, #eaeef5); transform: scale(1.06); } .qira-devices__arrow:active:not(:disabled) { transform: scale(0.97); } .qira-devices__arrow img { width: 18px; height: 18px; display: block; filter: brightness(0); } .qira-devices__arrow.is-disabled, .qira-devices__arrow:disabled { opacity: .30; cursor: default; pointer-events: none; } .qira-devices__carousel { width: 100vw; margin-inline: calc(50% - 50vw); } .qira-devices__track { display: flex; gap: var(--card-gap); overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-left: max(var(--qira-gutter), calc((100vw - var(--qira-max-width)) / 2)); scroll-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: 12px; } .qira-devices__track::-webkit-scrollbar { display: none; } .qira-devices__card { flex: 0 0 308px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; scroll-snap-align: start; border-radius: var(--card-radius); background: rgba(255, 255, 255, .70); overflow: hidden; text-decoration: none; color: inherit; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .25s ease, background .25s ease; } .qira-devices__card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .88); } .qira-devices__card-img-wrap { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0 20px; } .qira-lp .qira-devices__card-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .qira-devices__card-info { flex-shrink: 0; padding: 14px 20px 22px; display: flex; flex-direction: column; gap: 3px; } .qira-devices__card-brand { font-family: var(--qira-font); font-size: 13px; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-snug); color: var(--font-color); display: block; } .qira-devices__card-name { font-family: var(--qira-font); font-size: 17px; font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-snug); color: var(--font-color, #171717); display: block; } .qira-devices__card-spec { font-family: var(--qira-font); font-size: 12px; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-snug); color: var(--font-color, #171717); display: block; margin-top: 2px; } .qira-devices.is-static .qira-devices__carousel { width: auto; margin-inline: 0; } .qira-devices.is-static .qira-devices__track { overflow-x: visible; scroll-snap-type: none; padding-left: 0; padding-right: 0; scroll-padding-left: 0; justify-content: flex-start; } .qira-devices.is-static .qira-devices__nav, .qira-devices.is-static .qira-devices__scrollbar-wrap { display: none; } .qira-devices__scrollbar-wrap { display: flex; justify-content: center; padding: 28px 0 0; } .qira-devices__scrollbar { position: relative; width: 200px; height: 6px; background: rgba(255, 255, 255, .25); border-radius: 3px; } .qira-devices__scrollbar-thumb { position: absolute; top: 0; left: 0; height: 100%; background: #fff; border-radius: 3px; min-width: 24px; } .qira-devices--centered .qira-devices__header { flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-bottom: 0; } .qira-devices--centered .qira-devices__header-left { align-items: center; text-align: center; max-width: 900px; } .qira-devices--centered .qira-devices__ctas { justify-content: center; } .qira-devices--group { --dg-content: min(calc(100vw - 2 * var(--qira-gutter)), var(--qira-max-width)); --dg-w: min(calc((50vw + var(--dg-content) / 6) / .8518), 1300px); --dg-overlap: calc(var(--dg-w) * -0.0373); } .qira-devices--group .qira-devices__inner { display: flex; align-items: center; } .qira-devices--group .qira-devices__copy { flex: 0 0 33.333%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; position: relative; z-index: 2; } .qira-devices--group .qira-devices__heading { font-size: clamp(24px, 2.6vw, 40px); } .qira-devices--group .qira-devices__ctas { gap: 8px; } .qira-devices--group .qira-devices__cta { padding: 11px 20px; } .qira-devices--group .qira-devices__group { flex: 0 0 var(--dg-w); width: var(--dg-w); margin-left: var(--dg-overlap); position: relative; z-index: 1; } .qira-devices--group .qira-devices__group-list { position: relative; aspect-ratio: 1154 / 480.5; margin: 0; padding: 0; list-style: none; } .qira-devices--group .qira-devices__device { list-style: none; margin: 0; padding: 0; } .qira-devices--group .qira-devices__device-img { position: absolute; display: block; height: auto; max-width: none; max-height: none; } .qira-devices--group .qira-devices__device--tab .qira-devices__device-img { z-index: 1; left: 59.92%; top: 26.95%; width: 40.08%; } .qira-devices--group .qira-devices__device--laptop .qira-devices__device-img { z-index: 2; left: 0; top: 0; width: 50.82%; } .qira-devices--group .qira-devices__device--phone .qira-devices__device-img { z-index: 3; left: 37.26%; top: 1.25%; width: 32.28%; } .qira-devices--group .qira-devices__device-label { position: absolute; z-index: 4; margin: 0; display: flex; flex-direction: column; gap: 2px; color: #fff; white-space: nowrap; } .qira-devices--group .qira-devices__device--laptop .qira-devices__device-label { left: 18.34%; top: 5.58%; } .qira-devices--group .qira-devices__device--phone .qira-devices__device-label { left: 55.96%; top: 18.48%; } .qira-devices--group .qira-devices__device--tab .qira-devices__device-label { left: 74.44%; top: 16.38%; } .qira-devices--group .qira-devices__device-brand { font-family: var(--qira-font); font-size: max(11px, calc(var(--dg-w) * .0130)); font-weight: var(--qira-fw-regular); line-height: 1.3; } .qira-devices--group .qira-devices__device-name { font-family: var(--qira-font); font-size: max(13px, calc(var(--dg-w) * .0156)); font-weight: var(--qira-fw-medium); line-height: 1.3; } @media (max-width: 960px) { .qira-devices--group { --dg-w: calc(100vw - 2 * var(--qira-gutter)); } .qira-devices--group .qira-devices__inner { flex-direction: column; align-items: stretch; row-gap: 40px; } .qira-devices--group .qira-devices__copy { flex: none; } .qira-devices--group .qira-devices__heading { font-size: clamp(24px, 4.5vw, 36px); max-width: 560px; } .qira-devices--group .qira-devices__group { flex: none; margin-left: 0; } .qira-devices--group .qira-devices__group-list { margin-top: 44px; } .qira-devices--group .qira-devices__device .qira-devices__device-label { top: auto; bottom: calc(100% + 8px); } .qira-devices--group .qira-devices__device--laptop .qira-devices__device-label { left: 8%; } .qira-devices--group .qira-devices__device--phone .qira-devices__device-label { left: 46%; } .qira-devices--group .qira-devices__device--tab .qira-devices__device-label { left: 74%; } }