.qira-you { position: relative; background: var(--bg-you); overflow: hidden; } .qira-you::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 60vw; pointer-events: none; z-index: 0; background-color: var(--bg-you-surface); background-image: linear-gradient(to bottom, transparent 48%, var(--bg-you) 100%), radial-gradient(ellipse 55% 130% at 110% 92%, rgba(194, 95, 198, .70) 0%, transparent 60%), radial-gradient(ellipse 85% 65% at 11% 110%, #356eff 0%, #134bc2 50%, transparent 70%); } .qira-you__blade { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .qira-you__blade--1 { min-height: 100vh; height: 100vh; margin-bottom: 40vh; } .qira-you__blade--2, .qira-you__blade--3 { min-height: 0; } .qira-you__blade--2 { margin-top: max(60px, calc(50vh - 240px)); margin-bottom: max(60px, calc(50vh - 240px)); } .qira-you__blade--3 { margin-bottom: 0; } .qira-you__center { position: relative; z-index: 2; text-align: center; pointer-events: none; } .qira-you__pre { font-family: var(--qira-font); font-size: clamp(32px, 3vw, 42px); font-weight: var(--qira-fw-medium); color: #fff; margin: 0 0 0; letter-spacing: -0.01em; } .qira-you__you { font-family: var(--qira-font); font-size: clamp(160px, 22vw, 340px); font-weight: var(--qira-fw-regular); line-height: .88; letter-spacing: var(--qira-track-tight); margin: 0; color: #c8b8ff; background: linear-gradient(165deg, #a6b4f2 0%, #c1b6f6 52%, #d9bdf7 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .qira-you__floats { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .qira-you__float { position: absolute; border-radius: 16px; display: block; margin: 0; padding: 0; object-fit: cover; will-change: transform, opacity; opacity: 0; } .qira-you__float--svg { border-radius: 12px; } .qira-you__float--1 { width: 15vw; height: calc(15vw * 1.42); top: -5%; left: 9%; z-index: 4; } .qira-you__float--2 { width: 22vw; height: calc(22vw * .81); top: 13%; right: -3%; z-index: 4; } .qira-you__float--3 { width: 16vw; height: calc(16vw * .79); top: -2%; right: 20%; } .qira-you__float--4 { width: 18vw; height: calc(18vw * .75); bottom: -6%; left: 35%; } .qira-you__float--5 { width: 20vw; height: calc(20vw * .70); bottom: -23%; left: 20%; } .qira-you__float--6 { width: 18vw; height: calc(18vw * .67); top: 45%; left: -4%; z-index: 4; } .qira-you__float--7 { width: 14vw; height: calc(14vw * .73); top: -2%; left: 25%; } .qira-you__float--8 { width: 22vw; height: calc(22vw * .98); bottom: -15%; right: 18%; } .qira-you__float--9 { width: 14vw; height: calc(14vw * .68); bottom: 35%; right: 19%; } .qira-you__float--10 { width: 20vw; height: calc(20vw * 1.22); bottom: -11%; right: -3%; } .qira-you__float--11 { width: 26vw; height: calc(26vw * .75); bottom: 3%; left: -6%; } .qira-you__float--12 { width: 12vw; height: calc(12vw * 1.22); top: 15%; left: 2%; } .qira-you__float--13 { width: 17vw; height: calc(17vw * .97); bottom: 9%; right: -3%; } .qira-you__float--14 { width: 15vw; height: calc(15vw * .77); top: 37%; right: -5%; } .qira-you__blade--2, .qira-you__blade--3 { padding: 0; } .qira-you__inner { width: 100%; display: grid; grid-template-columns: minmax(var(--qira-gutter), 1fr) repeat(12, minmax(0, calc(var(--qira-max-width) / 12))) minmax(var(--qira-gutter), 1fr); align-items: center; column-gap: 0; } .qira-you__blade--3 .qira-you__visual { grid-column: 2 / 8; grid-row: 1; } .qira-you__blade--3 .qira-you__text { grid-column: 8 / 13; grid-row: 1; padding-right: 0; padding-left: clamp(1rem, 2.5vw, 2.5rem); } .qira-you__text { grid-column: 3 / 8; padding-right: clamp(1rem, 2.5vw, 2.5rem); display: flex; flex-direction: column; gap: 20px; } .qira-you__blade-heading { font-family: var(--qira-font); font-size: clamp(24px, 3vw, 48px); font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-tight); color: #fff; margin: 0; } .qira-you__blade-body { font-family: var(--qira-font); font-size: clamp(16px, 1.1vw, 18px); font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-body); color: rgba(255,255,255,0.70); margin: 0; } .qira-you__visual { grid-column: 8 / 14; position: relative; display: flex; align-items: center; justify-content: center; min-height: 400px; } .qira-you__visual img { position: relative; z-index: 2; width: 88%; height: auto; display: block; } .qira-you__visual img.glow { filter: drop-shadow(0px 6px 22px #ffffff66); } .qira-you__blade--4 .qira-you__visual img { width: 100%; } .qira-you__convo { position: relative; width: 100%; container-type: inline-size; } .qira-you__convo-img { position: relative; z-index: 1; width: 100%; height: auto; display: block; } .qira-you__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .qira-you__glow-blob { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; opacity: .5; filter: blur(6cqw); background: conic-gradient(from 210deg, #4d8cf5, #a179fd, #d26ad1, #e8639e, #fb6f66, #e8639e, #d26ad1, #a179fd, #4d8cf5); } .qira-you__glow-blob--phone { left: 26.2%; top: 25.2%; width: 30cqw; height: 40cqw; } .qira-you__glow-blob--laptop { left: 65.8%; top: 43.1%; width: 46cqw; height: 38cqw; } .qira-you__glow-blob--tablet { left: 44.5%; top: 77.6%; width: 44cqw; height: 32cqw; } .qira-you__bubble { position: absolute; pointer-events: none; transform: translate(-50%, -50%); padding: max(1.5px, .14em); border-radius: 999px; background: linear-gradient(90deg, #4d8cf5 0%, #a179fd 13%, #d26ad1 25%, #e8639e 38%, #fb6f66 51%, #e8639e 63%, #d26ad1 75%, #a179fd 87%, #4d8cf5 100%); box-shadow: 0 6px 20px rgba(20, 8, 60, .10); white-space: nowrap; pointer-events: none; z-index: 2; } .qira-you__bubble-inner { display: block; border-radius: 999px; background: #fff; color: var(--font-color); font-family: var(--qira-font); font-weight: var(--qira-fw-regular); font-size: clamp(10px, 1.9cqw, 20px); line-height: 1.33; padding: .9em 1.67em; text-align: left; } .qira-you__bubble--1 { left: 28.3%; top: 20.3%; } .qira-you__bubble--2 { left: 61.5%; top: 38.2%; } .qira-you__bubble--3 { left: 36.6%; top: 73.6%; } .qira-you__blade--3 .qira-you__visual { margin-top: -48px; margin-bottom: 48px; } .qira-you__blade--3 .qira-you__visual img { aspect-ratio: 509 / 480; } .qira-you__doc-travel { position: absolute; left: 50%; top: 41%; width: 64px; height: 68px; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; } .qira-you__doc-travel .qira-you__doc-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; filter: drop-shadow(0 4px 14px rgba(20, 8, 60, .35)); } .qira-you__rings { position: absolute; inset: 0; pointer-events: none; transform: translate(-4.5%, 1.2%); } .qira-you__ring-svg { position: absolute; top: 50%; left: 50%; will-change: transform; } .qira-you__ring-svg--1 { width: 280px; height: 280px; margin: -140px 0 0 -140px; } .qira-you__ring-svg--2 { width: 380px; height: 380px; margin: -190px 0 0 -190px; } .qira-you__ring-svg--3 { width: 480px; height: 480px; margin: -240px 0 0 -240px; } .qira-you__device-morph { position: relative; width: 40%; margin: 0 0 4px; } .qira-you__device-morph svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 28px rgba(20, 8, 60, .35)); } .qira-morph-phone-extra { opacity: 0; } .qira-you__device-morph svg.qira-you__device-morph-icon { position: absolute; top: 55.7%; left: 50%; transform: translate(-50%, -50%); width: 41.6%; height: auto; filter: none; pointer-events: none; } @media (orientation: portrait) and (max-width: 900px) { .qira-you__blade--1 {margin-bottom: 25vh} .qira-you__blade--2, .qira-you__blade--3 { min-height: auto; padding: 60px 0 100px; margin: 0; } .qira-you__blade--3 { padding-bottom: 160px; } .qira-you__inner { grid-template-columns: 1fr; row-gap: 48px; padding-inline: var(--qira-gutter); } .qira-you__text, .qira-you__visual, .qira-you__blade--3 .qira-you__text, .qira-you__blade--3 .qira-you__visual { grid-column: 1; grid-row: auto; padding-left: 0; padding-right: 0; } .qira-you__visual { order: 1; min-height: 280px; } .qira-you__text { order: 0; } .qira-you__blade--3 .qira-you__visual { margin-top: 0; margin-bottom: 0; } .qira-you__float--1 { width: 32vw; height: calc(32vw * 1.42); top: 0%; } .qira-you__float--2 { width: 40vw; height: calc(40vw * .81); top: 21%; right: -5%} .qira-you__float--3 { width: 33vw; height: calc(33vw * .79); top: 13%; left: 56%; } .qira-you__float--4 { width: 42vw; height: calc(42vw * .75); bottom: 9%; left: 26%} .qira-you__float--5 { width: 32vw; height: calc(32vw * .70); bottom: 3%; left: 17%; } .qira-you__float--6 { width: 37vw; height: calc(37vw * .67); top: 55%; left: -13%} .qira-you__float--7 { width: 26vw; height: calc(26vw * .73); top: 2%; left: 35%; z-index: 4} .qira-you__float--8 { width: 36vw; height: calc(36vw * .98); bottom: -7%; right: 6%; z-index: 4} .qira-you__float--9 { width: 22vw; height: calc(22vw * .68); bottom: 44%; right: 1%} .qira-you__float--10 { width: 31vw; height: calc(31vw * 1.22); bottom: -18%; right: -3%; } .qira-you__float--11 { width: 36vw; height: calc(36vw * .75); bottom: 25%; left: -6%; } .qira-you__float--12 { width: 21vw; height: calc(21vw * 1.22); top: 15%; left: -3%; z-index: 4; } .qira-you__float--13 { width: 23vw; height: calc(23vw * .97); bottom: 5%; right: -3%; z-index: 4} .qira-you__float--14 { width: 21vw; height: calc(21vw * .77); top: 33%; right: -5%} } @media (max-height: 600px) { .qira-you__blade { min-height: auto; } .qira-you__blade--1 { height: auto; min-height: 100svh; margin-bottom: 12vh; } .qira-you__blade--2, .qira-you__blade--3 { min-height: auto; margin: 0; padding: 40px 0 56px; } .qira-you__blade--4 .qira-you__visual { min-height: 0; } .qira-you__blade--4 .qira-you__convo { max-width: min(100%, 58svh); margin-inline: auto; } .qira-you__blade--4 .qira-you__device-morph { width: 22%; } .qira-you__blade--4 .qira-you__text { gap: 10px; } } @media (orientation: portrait) and (max-width: 1024px) { .qira-you__pre { font-size: clamp(32px, 5.5vw, 60px); } .qira-you__you { font-size: clamp(160px, 32vw, 350px); } .qira-you__float--1 { width: 22vw; height: calc(22vw * 1.42); top: 0%; } .qira-you__float--2 { width: 32vw; height: calc(32vw * .81); top: 8%; right: -5%; } .qira-you__float--3 { width: 26vw; height: calc(26vw * .79); top: -2%; left: 61%; } .qira-you__float--4 { width: 30vw; height: calc(30vw * .75); bottom: 9%; left: 26%; } .qira-you__float--5 { width: 22vw; height: calc(22vw * .70); bottom: 2%; left: 17%; } .qira-you__float--6 { width: 28vw; height: calc(28vw * .67); top: 50%; left: -14%; } .qira-you__float--7 { width: 22vw; height: calc(22vw * .73); top: 8%; left: 26%; z-index: 4; } .qira-you__float--8 { width: 36vw; height: calc(36vw * .98); bottom: -7%; right: 6%; z-index: 4; } .qira-you__float--9 { width: 22vw; height: calc(22vw * .68); bottom: 44%; right: 1%; } .qira-you__float--10 { width: 31vw; height: calc(31vw * 1.22); bottom: -18%; right: -3%; } .qira-you__float--11 { width: 36vw; height: calc(36vw * .75); bottom: 23%; left: -16%; } .qira-you__float--12 { width: 21vw; height: calc(21vw * 1.22); top: 15%; left: -7%; z-index: 3; } .qira-you__float--13 { width: 23vw; height: calc(23vw * .97); bottom: 12%; right: -7%; z-index: 4; } .qira-you__float--14 { width: 21vw; height: calc(21vw * .77); top: 22%; right: -7%; } } @media (orientation: portrait) and (max-width: 480px) { .qira-you__float--1 { width: 28vw; height: calc(28vw * 1.42); top: 0%; } .qira-you__float--2 { width: 41vw; height: calc(41vw * .81); top: 15%; right: -5%; } .qira-you__float--3 { width: 26vw; height: calc(26vw * .79); top: 5%; left: 59%; } .qira-you__float--4 { width: 33vw; height: calc(33vw * .75); bottom: 13%; left: 26%; } .qira-you__float--5 { width: 28vw; height: calc(28vw * .70); bottom: 7%; left: 17%; } .qira-you__float--6 { width: 28vw; height: calc(28vw * .67); top: 55%; left: -14%; } .qira-you__float--7 { width: 22vw; height: calc(22vw * .73); top: 8%; left: 26%; z-index: 4; } .qira-you__float--8 { width: 41vw; height: calc(41vw * .98); bottom: -10%; right: 6%; z-index: 4; } .qira-you__float--9 { width: 22vw; height: calc(22vw * .68); bottom: 44%; right: 1%; } .qira-you__float--10 { width: 31vw; height: calc(31vw * 1.22); bottom: -18%; right: -3%; } .qira-you__float--11 { width: 36vw; height: calc(36vw * .75); bottom: 23%; left: -16%; } .qira-you__float--12 { width: 21vw; height: calc(21vw * 1.22); top: 15%; left: -7%; z-index: 3; } .qira-you__float--13 { width: 23vw; height: calc(23vw * .97); bottom: 12%; right: -7%; z-index: 4; } .qira-you__float--14 { width: 21vw; height: calc(21vw * .77); top: 22%; right: -7%; } .qira-you__blade--4 .qira-you__device-morph { width: 24%; } .qira-you__blade--4 .qira-you__text { gap: 10px; } } @media (orientation: landscape) and (max-width: 932px) { .qira-you__float--1 { width: 12vw; height: calc(12vw * 1.42); top: -5%; left: 6%; z-index: 4; } .qira-you__float--2 { width: 22vw; height: calc(22vw * .81); top: 13%; right: -3%; z-index: 4; } .qira-you__float--3 { width: 16vw; height: calc(16vw * .79); top: -2%; right: 12%; } .qira-you__float--4 { width: 20vw; height: calc(20vw * .75); bottom: -15%; left: 26%; } .qira-you__float--5 { width: 15vw; height: calc(15vw * .70); bottom: -18%; left: 15%; } .qira-you__float--6 { width: 18vw; height: calc(18vw * .67); top: 50%; left: -8%; z-index: 4; } .qira-you__float--7 { width: 14vw; height: calc(14vw * .73); top: -4%; left: 19%; } .qira-you__float--8 { width: 22vw; height: calc(22vw * .98); bottom: -23%; right: 18%; } .qira-you__float--9 { width: 11vw; height: calc(11vw * .68); bottom: 35%; right: 23%; } .qira-you__float--10 { width: 15vw; height: calc(15vw * 1.22); bottom: -40%; right: 2%; } .qira-you__float--11 { width: 20vw; height: calc(20vw * .75); bottom: 3%; left: -7%; } .qira-you__float--12 { width: 12vw; height: calc(12vw * 1.22); top: 15%; left: 0%; } .qira-you__float--13 { width: 17vw; height: calc(17vw * .97); bottom: -19%; right: -3%; } .qira-you__float--14 { width: 15vw; height: calc(15vw * .77); top: 41%; right: -5%; } }