.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; }