*, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { background: var(--room); } body::before { content: none !important; } body { background: var(--room) !important; color: var(--on-room); font-family: var(--sans); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); } .room { position: relative; background: radial-gradient(72% 58% at 16% 10%, var(--aurora-violet) 0%, transparent 58%), radial-gradient(62% 52% at 90% 26%, var(--aurora-plum) 0%, transparent 60%), radial-gradient(46% 38% at 79% 54%, var(--sig-core) 0%, var(--sig-halo) 45%, transparent 72%), radial-gradient(95% 72% at 52% 104%, var(--aurora-cold) 0%, transparent 62%), linear-gradient(180deg, var(--void) 0%, var(--room) 26%, var(--room) 74%, var(--void) 100%); } .room::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(3, 6, 15, 0.55) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } .room::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); mask-image: radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 82%); -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 82%); } .room > * { position: relative; z-index: 1; } .display, .h1, .h2 { font-family: var(--serif); font-weight: 400; } .display { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } .h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: var(--ls-h1); } .h2 { font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.018em; } .display em, .h1 em, .h2 em { font-style: italic; } .label { font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--on-room-mute); } .label b { color: var(--on-room); font-weight: 500; } .lede { font-size: var(--t-lede); line-height: 1.6; color: var(--on-room-mute); letter-spacing: -0.008em; } .label + .display, .label + .h1, .label + .h2 { margin-top: var(--s4); } .display + .lede, .h1 + .lede, .h2 + .lede { margin-top: var(--s4); } .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; background: rgba(5,16,36,.78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--edge); } .nav__links a:hover { color: var(--on-room); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-tag); font-size: var(--t-ui); font-weight: 500; border: 1px solid transparent; } .btn--spark:hover { background: #B3A6FF; } .face { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .face__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .face__in { position: relative; z-index: 2; display: flex; align-items: stretch; min-height: 100svh; padding: clamp(64px, 6.6vh, 84px) 0 48px; } .face__col { max-width: min(900px, 48vw); display: flex; flex-direction: column; align-items: flex-start; } .face__col .face__cta { margin-top: auto; } .face__head { margin-top: 0; max-width: min(860px, 46vw); font-size: clamp(44px, 8.65vw - 64px, 122px); line-height: 1.16; } .face__claim, .face__answer { display: block; } .face__lede { margin-top: var(--s4); max-width: clamp(460px, 34vw, 650px); font-size: clamp(19px, 1.32vw, 26px); } .face__pain { margin-top: var(--s3); max-width: clamp(460px, 41vw, 780px); font-size: clamp(15px, 1.02vw, 20px); margin-bottom: calc(var(--hero-lift) + 18px); color: var(--live); letter-spacing: -0.005em; } .face .wrap { max-width: none; margin-inline: 0; padding-inline: clamp(32px, 2.8vw, 72px); } .face::before { background-position: 0 calc(100% - var(--hero-lift)); } :root { --hero-lift: 16.8px; } .face__cta, .face__index { transform: translateY(calc(-1 * var(--hero-lift))); } .face__col .face__cta { margin-top: auto; } .face__index { width: 100%; max-width: clamp(320px, 78vw - 790px, 672px); margin-top: 0; margin-bottom: 0; position: relative; } .face__index::before { content: ""; position: absolute; inset: -1px 0 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 100% 48px; opacity: .85; mask-image: linear-gradient(to right, #000 62%, transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%); } .face__index-set { list-style: none; position: relative; z-index: 1; padding-inline: 0; margin-inline: calc(var(--s4) * -1); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .30) 100%); box-shadow: inset 0 4px 9px -2px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(0, 0, 0, .60), inset 0 -1px 0 rgba(155, 140, 255, .16), 0 1px 0 rgba(170, 160, 230, .17); } .face__partner { height: 48px; display: flex; align-items: center; font-family: var(--sans); font-size: clamp(13px, 0.85vw, 17px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-room-mute); } .face__index li { border-bottom: 1px solid rgba(0, 0, 0, .48); box-shadow: 0 1px 0 rgba(155, 140, 255, .075); } .face__index-set li:last-child { border-bottom-color: transparent; box-shadow: none; } .face__index a { display: flex; align-items: center; gap: var(--s3); min-height: 47px; padding-block: 0; padding-inline: var(--s4); position: relative; transition: background-color .22s var(--ease), box-shadow .22s var(--ease); } .face__index a:hover { background-color: rgba(155, 140, 255, .085); box-shadow: inset 0 1px 0 rgba(196, 186, 255, .14); } .face__index-set li:first-child a { border-radius: var(--r-panel) var(--r-panel) 0 0; } .face__index-set li:last-child a { border-radius: 0 0 var(--r-panel) var(--r-panel); } .face__index .t { flex: 1 1 auto; min-width: 0; white-space: nowrap; font-size: clamp(16px, 1.13vw, 22px); letter-spacing: -0.008em; } .face__index .b { flex: 0 0 124px; font-family: var(--sans); font-size: clamp(11px, 0.72vw, 14px); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--on-room-mute); text-align: right; white-space: nowrap; } .face__index a::before { content: "↗"; order: 3; flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--edge-hi); font-family: var(--sans); font-size: 14px; line-height: 1; font-style: normal; color: var(--on-room-mute); opacity: .8; transition: opacity .22s var(--ease), transform .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease); } .face__index a:hover::before { opacity: 1; color: var(--spark); border-color: var(--spark); background-color: rgba(155, 140, 255, .12); transform: translate(2px, -2px); } .face__index-set--products .b { color: var(--live); opacity: .78; } .face__index-set--services .b { color: var(--spark); opacity: .78; } .face__index a:hover .b { opacity: 1; } .face__index-set--services { margin-top: 0; } @media (max-height: 940px) { .face__partner { height: 0; overflow: hidden; } } @media (max-width: 1400px) { .face__index .b { flex-basis: 68px; font-size: 10px; letter-spacing: .08em; } .face__index a { gap: 12px; } } .face__index a:focus-visible { background-color: rgba(155, 140, 255, .085); } .face__index a:hover .t { color: var(--on-room); } .face__index a:hover .b, .face__index a:hover .n { color: var(--live); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .face__index a { transition: background-color .22s var(--ease), box-shadow .34s var(--ease), translate .34s var(--ease); } .face__index a:hover { translate: 0 -7px; z-index: 3; background-color: rgba(155, 140, 255, .145); box-shadow: inset 0 1px 0 rgba(208, 199, 255, .34), 0 1px 0 rgba(150, 138, 224, .18), 0 12px 20px -6px rgba(2, 1, 10, .80), 0 30px 50px -18px rgba(2, 1, 10, .66); } .face__index a .t, .face__index a .b { transition: translate .34s var(--ease), color .22s var(--ease), opacity .22s var(--ease); } .face__index a:hover .t, .face__index a:hover .b { translate: 0 -4px; } .face__cta { transition: color .22s var(--ease), translate .34s var(--ease); } .face__cta i { transition: translate .34s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease); } .face__cta:hover { translate: 0 -4px; } .face__cta:hover i { translate: 0 -3px; background-color: rgba(155, 140, 255, .14); box-shadow: 0 8px 16px -6px rgba(2, 1, 10, .78); } } .face__cta { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: var(--s5); margin-bottom: 24px; font-size: var(--t-ui); font-weight: 500; } .face__cta i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--edge-hi); font-style: normal; } .face__cta:hover { color: var(--spark); } .face__cta:hover i { border-color: var(--spark); } .face__index > .face__cta { position: relative; z-index: 1; transform: none; min-height: 48px; padding: 0; gap: 12px; background: none; box-shadow: none; translate: none; } .face__index > .face__cta::before { content: none; } .face__index > .face__cta:hover, .face__index > .face__cta:focus-visible { background: none; box-shadow: none; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .face__index > .face__cta:hover { translate: 0 -4px; } } @media (min-width: 1200px) { .face__art { transform: translateX(clamp(112px, 11vw, 225px)); transform-origin: center; } .face__in { min-height: 100svh; padding-top: clamp(64px, 6.2vh, 78px); padding-bottom: 48px; } .face__col { --hero-well-inset: 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(18px, .24fr) minmax(296px, 1fr) auto auto; column-gap: 24px; align-items: start; width: 100%; max-width: none; } .face__head { grid-column: 1 / span 6; grid-row: 1; max-width: none; } .face__claim { white-space: nowrap; } .face__answer { margin-left: calc((100% - 120px) / 6 + 24px); white-space: nowrap; } .face__lede { grid-column: 1 / span 6; grid-row: 3; align-self: center; position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; max-width: none; margin: 0; padding: 0; font-size: clamp(18px, 1.18vw, 23px); line-height: 1.34; } .face__lede-step { display: grid; grid-template-columns: minmax(190px, 2.05fr) minmax(0, 3fr); column-gap: clamp(24px, 2vw, 40px); align-items: start; position: relative; min-width: 0; padding: clamp(13px, 1.2vh, 18px) 0 clamp(12px, 1.1vh, 17px); border-top: 1px solid rgba(195, 215, 228, .12); } .face__lede-step--resolve { padding-bottom: clamp(15px, 1.5vh, 22px); border-bottom: 1px solid rgba(195, 215, 228, .12); } .face__step-line, .face__step-detail { display: block; } .face__step-line { margin: 0; color: var(--on-room); font-size: clamp(31px, 2.15vw, 43px); line-height: 1; letter-spacing: -.04em; } .face__step-prefix { color: var(--on-room-mute); font-weight: 400; } .face__verb { color: inherit; font-weight: 620; } .face__lede-step--clean .face__verb { color: var(--spark); } .face__lede-step--resolve .face__verb { color: var(--live); } .face__step-detail { max-width: 34ch; padding-top: clamp(4px, .45vw, 8px); color: rgba(222, 217, 205, .76); } .face__lede-step--resolve .face__step-detail { max-width: calc(34ch - 16px); } .face__step-detail strong { color: rgba(222, 217, 205, .92); font-weight: 600; } .face__lede-step--resolve .face__cta { grid-column: 2; width: max-content; min-height: 42px; margin: 13px 0 0; padding: 0; gap: 14px; transform: none; color: var(--on-room); font-size: clamp(13px, .78vw, 15px); } .face__lede-step--resolve .face__cta i { width: 36px; height: 36px; } .face__pain { grid-column: 1 / span 7; grid-row: 4; display: block; max-width: none; font-size: clamp(15px, .94vw, 17px); padding-inline: var(--hero-well-inset); margin: 0 0 calc(var(--hero-lift) + 16px); } .face__index { grid-column: 1 / span 7; grid-row: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 48px auto; column-gap: 24px; width: 100%; max-width: none; margin: 0; transform: translateY(calc(-1 * var(--hero-lift))); } .face__partner { grid-column: 2; grid-row: 1; height: 48px; overflow: visible; justify-content: flex-start; padding-left: var(--hero-well-inset); text-align: left; } .face__index-set--products { grid-column: 1; grid-row: 2; } .face__index-set--services { grid-column: 2; grid-row: 2; } .face__index-set { width: 100%; margin-inline: 0; } .face__index-set a { padding-inline: var(--hero-well-inset); } } @media (min-width: 1200px) and (max-width: 1600px) { .face__col { --hero-well-inset: 14px; } .face__index-set a { gap: 10px; } .face__index .t { font-size: clamp(14.5px, 1.08vw, 17px); letter-spacing: -.012em; } .face__index .b { flex-basis: auto; font-size: 10px; letter-spacing: .07em; } .face__index-set a::before { flex-basis: 28px; width: 28px; height: 28px; } } @media (min-width: 1200px) and (max-width: 1360px) { .face__col { --hero-well-inset: 12px; } .face__index-set a { gap: 8px; } .face__index .t { font-size: 14.5px; } } @media (min-width: 901px) and (max-width: 1199px) { .face { align-items: flex-start; } .face__in { height: auto; min-height: 100svh; } .face__col { width: min(760px, 68vw); max-width: none; } .face__pain { margin-bottom: 24px; } .face__index { max-width: 100%; transform: none; } .face__index > .face__cta { margin: 0 0 24px; } .face__partner { height: 48px; overflow: visible; } } .face__scale { position: absolute; right: clamp(20px,4vw,48px); top: 22%; z-index: 2; text-align: right; } .face__scale strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(26px,2.6vw,52px); letter-spacing: -0.02em; color: var(--live); } .face__scale span { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--on-room-mute); } .offer { padding-block: var(--s7); } .offer__head { display: grid; grid-template-columns: minmax(0, clamp(620px, 46vw, 820px)) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: end; margin-bottom: var(--s5); } .offer__intro { max-width: clamp(620px, 46vw, 820px); } .offer__head { align-items: start; } .offer__lede { max-width: 44ch; margin-top: .55em; } .offer__index { list-style: none; border-top: 1px solid var(--edge); } .offer__index li { border-bottom: 1px solid var(--edge); } .offer__index a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: 14px 0; position: relative; } .offer__index .n { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; color: var(--on-room-mute); } .offer__index .t { font-size: var(--t-sm); letter-spacing: -0.005em; } .offer__index .b { font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--on-room-mute); text-align: right; } .offer__index li[data-seen="true"] .n, .offer__index li[data-seen="true"] .b { color: var(--live); } .offer__index a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--live), var(--spark)); transform: scaleX(0); transform-origin: left; } .offer__index a:hover::after, .offer__index a:focus-visible::after { transform: scaleX(1); } .offer__index a:hover .n { color: var(--live); } .offer__index a:hover .b { color: var(--on-room); } .offer__index a:focus-visible .n { color: var(--live); } #svc-02, #svc-03, #svc-04, #segmentation { scroll-margin-top: 84px; } .offer__grid { display: grid; grid-template-columns: repeat(6, 1fr); align-items: start; gap: var(--s4); } .panel { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, transparent 34%), var(--panel); color: var(--on-panel); border-radius: var(--r-panel); padding: var(--s5); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 18px 40px -18px rgba(8, 4, 30, .55), 0 2px 6px rgba(8, 4, 30, .18); display: flex; flex-direction: column; gap: var(--s3); } .offer__close { margin-top: var(--s6); font-family: var(--serif); font-weight: 400; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.018em; color: var(--on-room); text-align: center; } .offer__close em { font-style: italic; color: var(--spark-lit); } .panel:not(.panel--bare):not(.panel--band) { box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 18px 40px -18px rgba(8, 4, 30, .55), 0 2px 6px rgba(8, 4, 30, .18), 0 0 0 1px rgba(176, 160, 126, .22) inset; } .panel--tint { background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, transparent 32%), var(--panel-2); } .panel--bare { background: none; box-shadow: none; color: var(--on-room); padding: var(--s5) 0 var(--s5) 46px; border-top: 1px solid var(--edge-hi); } .panel--bare .label { color: var(--on-room-mute); } .panel--bare .label b { color: var(--on-room); } .panel--bare h3 { color: var(--on-room); } .panel.panel--bare p { color: #C3CBE4; } .panel.panel--bare .who button:hover { border-color: var(--spark); color: var(--spark); } .panel--band { --band-pad-y: var(--s4); --band-pad-x: var(--s5); --band-gap: clamp(24px, 4vw, 72px); --band-copy-col: 38%; flex-direction: row; align-items: stretch; gap: var(--band-gap); padding: var(--band-pad-y) var(--band-pad-x); } .panel--band > div:first-child { flex: 0 0 var(--band-copy-col); display: flex; flex-direction: column; gap: var(--s2); justify-content: center; } .panel--wide { grid-column: span 4; } .panel--band > :nth-child(2) { flex: 1 1 auto; min-width: 0; } .panel.panel--band { flex-direction: row; align-items: stretch; } .funnel__readout .offer__head { display: block; margin-bottom: var(--s3); } .funnel__readout .offer__intro { max-width: none; } .funnel__readout .offer__head .h1 { font-size: clamp(22px, 1.85vw, 34px); line-height: 1.16; } .funnel__readout .offer__lede { max-width: 54ch; margin-top: .5em; font-size: var(--t-sm); } #svc-02.panel--band .audit { margin-top: 0; gap: var(--s3); align-items: center; } #svc-02.panel--band .audit { margin-top: 0; align-items: center; } #svc-02.panel--band .audit__trace { align-self: center; } .panel .label { color: var(--on-panel-mute); } .panel .label b { color: var(--spark-deep); } .panel h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); letter-spacing: -0.01em; } .panel p { font-size: var(--t-sm); line-height: 1.6; color: var(--on-panel-mute); } .panel .panel__claim { font-size: var(--t-sm); color: var(--on-panel); padding-top: var(--s2); border-top: 1px solid var(--rule); } .panel .panel__claim b { font-weight: 500; color: var(--spark-deep); } .funnel { position: relative; } .funnel__rail { height: auto; } .funnel__sticky { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: clamp(20px, 2vw, 40px); width: 100%; padding: 100px clamp(20px, 4vw, 56px) var(--s6) 0; } .funnel .h1 { font-size: clamp(30px, 3vw, 60px); } .funnel__readout { max-width: clamp(620px, 46vw, 820px); } .funnel__stagearea { position: relative; height: 100%; display: grid; place-items: center; margin-left: clamp(-460px, -14vw, -120px); } .funnel__stagearea::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(1.36 * min(118%, clamp(720px, 46vw, 1040px))); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle closest-side, var(--room) 78%, rgba(5, 16, 36, 0) 100%); pointer-events: none; } .funnel__field { position: absolute; inset: -8% -4%; z-index: 0; pointer-events: none; } .funnel__orb { position: relative; z-index: 1; width: min(118%, clamp(720px, 46vw, 1040px)); aspect-ratio: 1; } .funnel__orb, .funnel__orb > * { background: transparent !important; } .funnel__readout { display: flex; flex-direction: column; gap: var(--s4); } .funnel__count { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--edge-hi); } .funnel__count::before { content: ""; position: absolute; right: calc(100% + 16px); top: calc(var(--s4) + 34px); width: clamp(80px, 13vw, 210px); height: 1px; background: linear-gradient(90deg, transparent 0%, var(--live) 42%, var(--spark) 100%); opacity: 0; } .funnel__count[data-live="true"]::before { opacity: .85; } .funnel__count strong { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.6vw, 90px); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--spark) calc(var(--cool, 0) * 100%), var(--live)); } .funnel__count strong[data-state="raw"] { font-family: var(--serif); color: var(--live); } .funnel__count strong[data-state="resolving"], .funnel__count strong[data-state="locked"] { font-family: var(--mono); font-size: clamp(32px, 3.9vw, 76px); letter-spacing: -0.02em; } .funnel__count strong[data-state="resolving"] { color: var(--on-room); } .funnel__count strong[data-state="locked"] { color: var(--spark-lit); } .funnel__count small { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--on-room-mute); } .funnel__steps { list-style: none; display: flex; flex-direction: column; } .funnel__steps li { border-bottom: 1px solid var(--edge); } .funnel__steps button { position: relative; width: 100%; text-align: left; display: grid; grid-template-columns: 18px 118px 1fr; gap: var(--s3); align-items: baseline; padding: 13px 0 13px 12px; opacity: .22; } .funnel__steps li[data-on="true"] button { opacity: 1; } .funnel__steps button:hover, .funnel__steps button:focus-visible { opacity: .82; } .funnel__steps li[data-on="true"] button:hover { opacity: 1; } .funnel__steps button::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--live); border-radius: 1px; transform: scaleY(0); transform-origin: center; } .funnel__steps li[data-here="true"] button::before { transform: scaleY(1); } .funnel__steps .tick { color: var(--spark); font-size: var(--t-micro); opacity: 0; } .funnel__steps li[data-on="true"] .tick { opacity: 1; } .funnel__steps .k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--on-room-mute); } .funnel__steps .v { font-size: var(--t-sm); } .funnel__ctl { display: flex; flex-direction: column; gap: var(--s3); } .funnel__replay { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .12em; text-transform: uppercase; color: var(--on-room-mute); padding: 7px 13px 7px 9px; border: 1px solid var(--edge-hi); border-radius: var(--r-pill); } .funnel__replay i { font-style: normal; font-size: 13px; line-height: 1; color: var(--live); } .funnel__replay:hover, .funnel__replay:focus-visible { color: var(--on-room); border-color: var(--live); } .funnel__foot { font-size: var(--t-sm); color: var(--on-room-mute); } .audit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s2); } .audit__rec { list-style: none; border-top: 1px solid var(--rule); } .audit__rec button { display: grid; grid-template-columns: 92px 1fr; gap: var(--s3); width: 100%; text-align: left; padding: 11px 10px 11px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); position: relative; } .audit__rec button::before { content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: var(--r-pill); background: transparent; } .audit__rec button:hover { color: var(--spark-deep); } .audit__rec button[aria-pressed="true"] { color: var(--spark-deep); } .audit__rec button[aria-pressed="true"]::before { background: var(--spark-deep); } .audit__rec .k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--on-panel-mute); } .audit__rec button[aria-pressed="true"] .k { color: var(--spark-deep); } .audit__trace { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-panel); padding: var(--s4); align-self: start; margin-right: calc(var(--s5) * -1 - 18px); box-shadow: 0 16px 34px -16px rgba(8, 4, 30, .35), 0 1px 0 rgba(255,255,255,.8) inset; } .audit__rows { display: flex; flex-direction: column; gap: 12px; margin-top: var(--s3); } .audit__rows div { display: flex; flex-direction: column; gap: 2px; } .audit__rows dt { font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--on-panel-mute); } .audit__rows dd { font-size: var(--t-sm); } .audit__rows div:nth-child(1) dt { color: var(--live-deep); } .audit__rows div:nth-child(3) dt { color: var(--spark-deep); } .run { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; } .run__card { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-panel); box-shadow: var(--cast-2); margin-top: 20px; } .run__card::before, .run__card::after { content: ""; position: absolute; left: 14px; right: 14px; border: 1px solid var(--rule); border-radius: var(--r-panel); background: #DCD7CD; z-index: -1; } .run__card::before { top: -10px; height: 22px; opacity: 1; } .run__card::after { top: -19px; left: 32px; right: 32px; height: 22px; opacity: .6; } .run__head { border-radius: var(--r-panel) var(--r-panel) 0 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--paper); } .run__ttl { font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .12em; text-transform: uppercase; color: var(--on-panel-mute); } .run__state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--spark-deep); } .run__state i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--spark-deep); } .run__rows { list-style: none; } .run__rows li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--rule); } .run__rows li:last-child { border-bottom: 0; } .run__where { font-size: var(--t-sm); color: var(--on-panel); letter-spacing: -0.005em; } .run__chip { font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .04em; color: var(--live-deep); background: linear-gradient(180deg, #CDE6EB 0%, #E0F2F5 100%); border-radius: var(--r-tag); padding: 4px 8px; font-variant-numeric: tabular-nums; box-shadow: inset 0 2px 3px -1px rgba(10, 60, 70, .26), inset 0 -1px 0 rgba(255, 255, 255, .80), 0 1px 0 rgba(255, 255, 255, .70); } .sheet { background: var(--paper); color: var(--on-panel); padding-block: var(--s7); } .sheet--wash { background: var(--band); } .sheet .label { color: var(--on-panel-mute); } .sheet .label b { color: var(--spark-deep); } .sheet .lede { color: var(--on-panel-mute); } .sheet .h1, .sheet .h2 { color: var(--on-panel); } .sect { margin-bottom: var(--s6); max-width: clamp(620px, 46vw, 820px); } .query { position: relative; display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid var(--rule); border-radius: 34px; padding: 28px 38px; box-shadow: var(--cast-1); } .query__icon { color: var(--spark-deep); flex: none; margin-top: 4px; } .query__icon svg { width: 20px; height: 20px; } .query__line { font-size: clamp(18px, 1.9vw, 34px); line-height: 1.72; letter-spacing: -0.01em; } .chip { display: inline-block; background: #E9E4F4; border-radius: var(--r-tag); padding: 2px 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .chip--slot { --slot-h: 1.5em; display: inline-block; vertical-align: bottom; text-align: center; padding: 0 12px; } .chip__win { display: block; overflow: hidden; height: var(--slot-h); } .chip__win > i { display: block; font-style: normal; transform: translateY(0); } .chip__win > i > b { display: block; height: var(--slot-h); line-height: var(--slot-h); font-weight: inherit; white-space: nowrap; } .chip--slot[data-spinning] .chip__win > i { transition: transform var(--reel-dur, 900ms) cubic-bezier(.16, 1, .3, 1); } @media (prefers-reduced-motion: reduce) { .chip--slot[data-spinning] .chip__win > i { transition: none; } } .query__eg { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-left: 38px; } .query__eg[hidden] { display: none; } .query__eg-label { font-family: var(--sans); font-size: var(--t-nano); font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--on-panel-mute); } .query__eg b { font-weight: 500; font-size: var(--t-ui); min-width: 21ch; text-align: center; } .query__eg button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--r-pill); background: #fff; color: var(--on-panel-mute); font-size: 13px; line-height: 1; cursor: pointer; transition: color .22s var(--ease), border-color .22s var(--ease); } .query__eg button:hover { color: var(--spark-deep); border-color: var(--spark-deep); } .ds-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .answer { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(30px, 3.6vw, 60px); margin-top: var(--s5); align-items: start; } .answer__doc { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-panel); padding: var(--s4) var(--s5) var(--s5); box-shadow: var(--cast-2); margin-top: -8px; } .answer__doc::before { content: ""; position: absolute; left: var(--s5); right: var(--s5); top: calc(var(--s4) + 26px); height: 1px; background: var(--rule); } .answer__stamp { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .12em; text-transform: uppercase; color: var(--on-panel-mute); padding-bottom: var(--s4); } .answer__stamp b { color: var(--spark-deep); font-weight: 500; } .answer__list { list-style: none; } .answer__list li { position: relative; display: flex; align-items: baseline; gap: 20px; padding: 21px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-lede); letter-spacing: -0.012em; } .answer__list li:last-child { border-bottom: 0; padding-bottom: 0; } .answer__list .label { flex: none; color: var(--on-panel-mute); font-size: var(--t-ui); } .specs { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-panel); box-shadow: var(--cast-1); padding: var(--s5); } .specs__lead { display: block; padding-bottom: var(--s4); margin-bottom: var(--s2); border-bottom: 1px solid var(--rule); } .specs__lead b { color: var(--spark-deep); font-weight: 500; } .specs__list { list-style: none; counter-reset: spec; } .specs__list li { counter-increment: spec; display: grid; grid-template-columns: 34px minmax(0, 22ch) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); } .specs__list li:last-child { border-bottom: 0; padding-bottom: 0; } .specs__list li::before { content: counter(spec, decimal-leading-zero); font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .1em; color: var(--live-deep); } .specs__list b { font-weight: 500; font-size: var(--t-read); letter-spacing: -0.01em; } .specs__list span { color: var(--on-panel-mute); font-size: var(--t-sm); } @media (max-width: 1080px) { .offer__head { grid-template-columns: 1fr; align-items: start; } .funnel__sticky { grid-template-columns: 1fr; } .funnel__stagearea { display: none; } .answer { grid-template-columns: 1fr; } .offer__grid > * { grid-column: 1 / -1 !important; } } .proof { list-style: none; max-width: 760px; margin: var(--s6) auto 0; } .proof li:first-child { border-top: 1px solid var(--edge); } .proof li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: 15px 0; border-bottom: 1px solid var(--edge); } .proof li > a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; } .proof span { font-size: var(--t-read); color: var(--on-room); letter-spacing: -0.01em; } .proof em { flex: none; font-family: var(--mono); font-size: var(--t-nano); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--spark); } .panel .panel__claim, .panel--tint p, .funnel__foot { max-width: 62ch; } .specs .specs__lead { max-width: none; } @media (prefers-reduced-transparency: reduce) { .nav { background: var(--room); backdrop-filter: none; -webkit-backdrop-filter: none; } .room { background: var(--room); } .room::after { background: none; } .chip { background: #E4DEF6; } } @media (forced-colors: active) { .panel, .run__card, .audit__trace, .answer__doc, .specs, .query { border: 1px solid CanvasText; } .run__chip, .chip { border: 1px solid CanvasText; } :where(a, button, [tabindex]):focus-visible { outline: 2px solid Highlight; } .room::before, .room::after, .panel::after { display: none; } } @media print { @page { margin: 18mm 16mm; } body { background: #fff; color: #111; font-size: 11pt; } .room, .sheet, .sheet--wash, .panel, .panel--tint, .run__card, .specs, .answer__doc, .query { background: #fff !important; color: #111 !important; box-shadow: none !important; } .room::before, .room::after, .panel::after { display: none !important; } .nav, .face__art, .funnel__field, .funnel__orb, .funnel__replay { display: none !important; } .funnel__steps li, .funnel__steps button { opacity: 1 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } .panel, .specs, .answer__doc, .query { break-inside: avoid; page-break-inside: avoid; } section { break-after: auto; } } .audit__trace { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px -1px rgba(8, 4, 30, .30), 0 28px 56px -18px rgba(8, 4, 30, .55), 0 60px 90px -40px rgba(8, 4, 30, .40); transform: translateZ(0) scale(1.015); transform-origin: center right; } .run__card { position: relative; } .run__card::before, .run__card::after { content: ""; position: absolute; left: 50%; z-index: -1; border-radius: var(--r-panel); background: var(--panel-in); border: 1px solid var(--rule); } .run__card::before { top: -9px; width: calc(100% - 22px); height: 24px; transform: translateX(-50%); opacity: .72; box-shadow: 0 -2px 6px rgba(8,4,30,.10); } .run__card::after { top: -17px; width: calc(100% - 46px); height: 24px; transform: translateX(-50%); opacity: .45; box-shadow: 0 -2px 6px rgba(8,4,30,.08); } .run { padding-top: 20px; } .run__rows li { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s4); padding: 13px 18px; } .run__head { padding: 11px 18px; } :root { --panel: #E9E6E0; --panel-2: #E2DED7; --panel-in: #F7F5F2; } .panel { color: #14121F; } .run { position: relative; } .run__slab { position: absolute; top: 0; bottom: 0; left: 0; right: -26px; z-index: 0; border-radius: var(--r-panel); background: var(--room); background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 24px 24px; box-shadow: 0 14px 30px -14px rgba(8, 4, 30, .5), inset 0 1px 0 rgba(155, 140, 255, .18); } .run__card { position: relative; z-index: 1; } .run__slab ~ .run__card { box-shadow: 0 18px 40px -18px rgba(0,0,0,.65); } :root { --mill: #C7C1B5; --mill-in: #B9B2A4; } .offer .panel.panel--tint, .offer .panel.panel--band { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .90), inset 0 -1px 0 rgba( 20, 14, 40, .07), 0 5px 0 -1px var(--mill), 0 7px 12px -5px rgba(3, 1, 14, .50), 0 30px 52px -22px rgba(3, 1, 14, .60), 0 64px 96px -56px rgba(3, 1, 14, .48); } .offer .audit__trace { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 0 -1px var(--mill-in), 0 3px 5px -1px rgba(8, 4, 30, .32), 0 28px 56px -18px rgba(8, 4, 30, .58), 0 60px 90px -40px rgba(8, 4, 30, .42); } .offer .run__slab ~ .run__card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 4px 0 -1px var(--mill-in), 0 6px 10px -3px rgba(0, 0, 0, .55), 0 26px 48px -18px rgba(0, 0, 0, .70); } @media (prefers-reduced-motion: no-preference) { .offer [data-par] { will-change: transform; } .offer .audit__trace[data-par] { transform: translate3d(0, calc(var(--par, 0) * 1px), 0) scale(1.015); } .offer .run__card[data-par] { transform: translate3d(0, calc(var(--par, 0) * 1px), 0); } .offer .run__slab[data-par] { transform: translate3d(0, calc(var(--par, 0) * -0.5px), 0); } } .offer .panel .run__foot { margin: 0; padding: 11px 18px; border-top: 1px solid var(--rule); background: var(--paper); border-radius: 0 0 var(--r-panel) var(--r-panel); font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .03em; line-height: 1.5; color: var(--on-panel-mute); } .offer .audit__trace { position: relative; } .offer .audit__trace::after { content: ""; position: absolute; left: -8px; top: var(--notch, 56px); width: 16px; height: 16px; margin-top: -8px; background: #fff; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-bottom-left-radius: 3px; transform: rotate(45deg); box-shadow: -3px 3px 5px -2px rgba(8, 4, 30, .16); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .offer .audit__trace::after { transition: top .34s var(--ease); } } .offer .panel.panel--bare .label b { color: var(--spark); } .offer .run { padding-top: 27px; padding-bottom: 14px; } .offer .run__card { margin-top: 0; } .offer .run__slab { left: -14px; right: -14px; } .offer .audit__rec { border-top: 1px solid var(--rule); display: flex; flex-direction: column; } .offer .audit__rec li button { background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; } .offer .audit__rec li button:hover:not([aria-pressed="true"]) { background: rgba(91, 52, 196, .045); } .offer .audit__rec button::before { display: block; } .offer .audit__rec li { flex: 1; display: flex; } .offer .audit__rec li button { width: 100%; } .offer .audit__rec button { grid-template-columns: 96px minmax(0, 1fr); padding: 11px 10px 11px 0; align-items: center; } .offer .panel.panel--bare .who button:hover { border-color: var(--spark); color: var(--spark); background: none; } .offer .run__rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; } .offer .run__rows li { display: block; padding: 11px 12px 10px; border-bottom: 0; border-radius: 7px; background: linear-gradient(180deg, #E2DED6 0%, #EFECE6 100%); box-shadow: inset 0 2px 4px -1px rgba(20, 14, 40, .20), inset 0 -1px 0 rgba(255, 255, 255, .85), 0 1px 0 rgba(255, 255, 255, .80); } .offer .run__rows .run__where { display: block; font-size: var(--t-sm); line-height: 1.25; } .offer .run__rows em { display: block; margin-top: 3px; margin-bottom: 8px; font-style: normal; font-size: var(--t-nano); line-height: 1.35; color: var(--on-panel-mute); } .offer .run__rows .run__chip { display: inline-block; } .offer .run__head { padding: 9px 14px; } .offer .panel .run__foot { padding: 9px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .offer .run__tally { display: inline-flex; align-items: center; gap: 3px; padding: 5px 7px; border-radius: var(--r-pill); background: rgba(20, 14, 40, .10); box-shadow: inset 0 2px 3px -1px rgba(20, 14, 40, .34), 0 1px 0 rgba(255, 255, 255, .70); } .offer .run__tally i { width: 3px; height: 11px; border-radius: 2px; background: var(--live-deep); opacity: .55; } .offer .run__tally i.is-today { opacity: 1; background: #12879A; box-shadow: 0 0 6px rgba(18, 135, 154, .85); } @media (prefers-reduced-motion: no-preference) { .offer .run__tally i.is-today { animation: runPulse 3.4s ease-in-out infinite; } } .offer .run__card::before { top: -7px; height: 18px; } .offer .run__card::after { top: -13px; height: 18px; } .offer__head { gap: clamp(32px, 3.5vw, 64px); } .offer__index .b { white-space: nowrap; } .offer .panel.panel--tint::after, .offer .panel.panel--band::after { content: ""; position: absolute; z-index: -2; inset: -12% -7%; pointer-events: none; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(244, 236, 220, 0.085) 0%, rgba(178, 160, 236, 0.045) 46%, transparent 74%); } .offer { --aurora-violet: rgba(140, 96, 255, 0.50); --aurora-plum: rgba(208, 92, 226, 0.30); --aurora-cold: rgba( 38, 110, 224, 0.36); --sig-core: rgba( 96, 224, 236, 0.24); --sig-halo: rgba( 44, 150, 198, 0.11); } @media (prefers-reduced-motion: no-preference) { } @keyframes fieldSort { 0% { opacity: 0; transform: translateX(-6px); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .offer .audit__rows div { animation: traceIn .32s var(--ease) both; } .offer .audit__rows div:nth-child(1) { animation-delay: 0ms; } .offer .audit__rows div:nth-child(2) { animation-delay: 45ms; } .offer .audit__rows div:nth-child(3) { animation-delay: 90ms; } .offer .audit__rows div:nth-child(4) { animation-delay: 135ms; } } @keyframes traceIn { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { } @keyframes permSweep { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } } .offer .run__slab { background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 28px 28px, 28px 28px; } .offer__index li { border-bottom: 1px solid rgba(0, 0, 0, .45); box-shadow: 0 1px 0 rgba(155, 140, 255, .085); } .offer .audit__rec li button { border-bottom: 1px solid rgba(20, 14, 40, .13); box-shadow: 0 1px 0 rgba(255, 255, 255, .78); } .offer .panel .panel__claim { margin-top: var(--s2); padding: var(--s2) 0 0; border-top: 1px solid rgba(20, 14, 40, .13); border-radius: 0; background: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78); } .offer .panel.panel--tint { background: linear-gradient(180deg, rgba(255, 255, 255, .40) 0%, transparent 30%), radial-gradient(118% 70% at 12% 112%, rgba(150, 132, 255, .34) 0%, transparent 66%), radial-gradient(98% 62% at 90% 106%, rgba(112, 202, 224, .28) 0%, transparent 64%), var(--panel-2); } .offer .panel.panel--band { background: linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, transparent 38%), radial-gradient(80% 98% at 97% 104%, rgba(150, 132, 255, .32) 0%, transparent 64%), radial-gradient(66% 90% at 3% 100%, rgba(112, 202, 224, .26) 0%, transparent 62%), var(--panel); } .offer .audit__trace, .offer .run__card, .offer .run__card::before, .offer .run__card::after, .offer .panel.panel--bare .rec { border-radius: var(--r-inner); } .offer .run__slab { border-radius: var(--r-panel); } .offer .label, .offer .offer__index .n, .offer .offer__index .b, .offer .audit__rec .k, .offer .audit__rows dt, .offer .rec .k, .offer .who button, .offer .run__ttl, .offer .run__state, .offer .perm__count, .offer .panel .run__foot { font-family: var(--sans); letter-spacing: .11em; font-weight: 500; } .offer .run__chip, .offer .perm__count, .offer .offer__index .n { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .06em; } .offer .panel .run__foot { letter-spacing: .005em; font-weight: 400; } .offer .proof em { font-family: var(--sans); letter-spacing: .11em; font-weight: 500; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .offer .panel.panel--tint, .offer .panel.panel--band { transition: box-shadow .42s var(--ease); } .offer .panel.panel--tint::after, .offer .panel.panel--band::after { transition: opacity .5s var(--ease), transform .5s var(--ease); } .offer .panel.panel--tint:hover, .offer .panel.panel--band:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba( 20, 14, 40, .07), 0 6px 0 -1px var(--mill), 0 12px 20px -6px rgba(3, 1, 14, .52), 0 44px 74px -26px rgba(3, 1, 14, .66), 0 92px 130px -60px rgba(3, 1, 14, .55); } .offer .panel.panel--tint:hover::after, .offer .panel.panel--band:hover::after { transform: scale(1.06); opacity: 1.35; } .offer .audit__trace { transition: transform .42s var(--ease), box-shadow .42s var(--ease); } .offer .panel--tint:hover .audit__trace { transform: translate3d(0, calc(var(--par, 0) * 1px - 7px), 0) scale(1.022); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 0 -1px var(--mill-in), 0 5px 8px -1px rgba(8, 4, 30, .34), 0 38px 70px -20px rgba(8, 4, 30, .60), 0 76px 110px -44px rgba(8, 4, 30, .44); } .offer .run__card { transition: transform .42s var(--ease), box-shadow .42s var(--ease); } .offer .panel--band:hover .run__card { transform: translate3d(0, calc(var(--par, 0) * 1px - 6px), 0); } .offer .run__slab { transition: transform .42s var(--ease); } .offer .panel--band:hover .run__slab { transform: translate3d(0, calc(var(--par, 0) * -0.5px + 3px), 0); } } .offer .panel.panel--tint, .offer .panel.panel--band { background: linear-gradient(158deg, rgb(207, 218, 245) 0%, rgb(196, 210, 242) 100%); border-radius: 26px; border: 0; overflow: hidden; box-shadow: rgba(8, 5, 22, .45) 0 18px 48px 0, rgba(255, 255, 255, .35) 0 1px 0 0 inset; transition: transform .15s cubic-bezier(.2, .8, .3, 1), box-shadow .22s; } .offer .panel.panel--tint::after, .offer .panel.panel--band::after { content: none; } @media (hover: hover) { .offer .panel.panel--tint:hover, .offer .panel.panel--band:hover { transform: translateY(-5px); box-shadow: rgba(201, 182, 236, .55) 0 0 0 1.5px, rgba(8, 5, 22, .6) 0 30px 66px, rgba(255, 255, 255, .4) 0 1px 0 inset; } } .offer .audit__trace, .offer .run__card { background: rgb(255, 254, 254); border: 1px solid rgba(15, 10, 30, .10); border-radius: 14px; box-shadow: rgba(20, 16, 40, .10) 0 4px 12px 0; } .offer .run__chip, .offer .panel.panel--bare .who button { border-radius: 100px; border: 1px solid rgba(15, 10, 30, .10); padding: 3px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .84px; } .offer .run__chip { background: rgba(255, 255, 255, .88); color: rgb(74, 69, 102); box-shadow: none; } .offer .audit__rec { border-top: 0; display: flex; flex-direction: column; gap: 9px; } .offer .audit__rec li { flex: 0 0 auto; display: block; } .offer .audit__rec li button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 15px; border: 1px solid rgba(15, 10, 30, .10); border-radius: 14px; background: rgb(255, 254, 254); box-shadow: rgba(20, 16, 40, .10) 0 4px 12px 0; transition: box-shadow .22s, transform .15s cubic-bezier(.2, .8, .3, 1); } .offer .audit__rec .ic { flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: rgb(228, 235, 251); border: 1px solid rgba(15, 10, 30, .07); } .offer .audit__rec .ic svg { width: 15px; height: 15px; fill: none; stroke: rgb(95, 55, 138); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; } .offer .audit__rec .pn { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .offer .audit__rec .v { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -.16px; color: rgb(15, 10, 30); } .offer .audit__rec .k { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .22px; text-transform: none; color: rgb(106, 100, 134); } .offer .audit__rec button[aria-pressed="true"] { box-shadow: rgba(201, 182, 236, .95) 0 0 0 1.5px, rgba(20, 16, 40, .16) 0 6px 16px 0; } @media (hover: hover) { .offer .audit__rec button:hover:not([aria-pressed="true"]) { transform: translateY(-2px); box-shadow: rgba(20, 16, 40, .16) 0 8px 18px 0; background: rgb(255, 254, 254); } } .offer .audit__rec button::before { display: none; } .offer .run__card { background: linear-gradient(158deg, rgb(207, 218, 245) 0%, rgb(196, 210, 242) 100%); border: 1px solid rgba(15, 10, 30, .10); } .offer .run__card::before, .offer .run__card::after { background: rgb(199, 212, 243); border-color: rgba(15, 10, 30, .10); } .offer .run__head, .offer .panel .run__foot { background: none; border-color: rgba(15, 10, 30, .12); } .offer .run__rows { gap: 9px; padding: 12px; } .offer .run__rows li { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid rgba(15, 10, 30, .10); border-radius: 14px; background: rgb(255, 254, 254); box-shadow: rgba(20, 16, 40, .10) 0 4px 12px 0; } .offer .run__rows .ic { flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: rgb(228, 235, 251); border: 1px solid rgba(15, 10, 30, .07); } .offer .run__rows .ic svg { width: 15px; height: 15px; fill: none; stroke: rgb(95, 55, 138); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; } .offer .run__rows .pn { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .offer .run__rows .run__where { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.16px; color: rgb(15, 10, 30); } .offer .run__rows em { display: block; margin: 0; font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .22px; color: rgb(106, 100, 134); } .offer .run__rows .run__chip { flex: 0 0 auto; padding: 3px 8px; } .offer .panel--band { --band-gap: clamp(24px, 3vw, 56px); --band-copy-col: 33%; } .offer .run__rows li { display: grid; grid-template-columns: 27px minmax(0, 1fr); column-gap: 11px; row-gap: 6px; align-items: start; } .offer .run__rows li { grid-template-rows: auto 1fr; } .offer .run__rows .ic { grid-column: 1; grid-row: 1; } .offer .run__rows .pn { grid-column: 2; grid-row: 1; } .offer .run__rows .run__chip { grid-column: 2; grid-row: 2; justify-self: start; align-self: end; margin-left: 0; } .offer .run__state { color: var(--live-deep); } .offer .run__state i { background: var(--live-deep); } @media (prefers-reduced-motion: no-preference) { .offer .run__state i { animation: runPulse 3.4s ease-in-out infinite; } } @keyframes runPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(10, 90, 102, .45); } 50% { opacity: .72; box-shadow: 0 0 0 4px rgba(10, 90, 102, 0); } } .offer .audit__rec { border-top: 1px solid rgba(20, 14, 40, .13); box-shadow: 0 1px 0 rgba(255, 255, 255, .78); display: flex; flex-direction: column; gap: 0; margin-top: var(--s3); } .offer .audit__rec li { flex: 1; display: flex; } .offer .audit__rec li button { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: center; width: 100%; padding: 15px 4px 15px 0; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(20, 14, 40, .13); border-radius: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .78); font-size: inherit; } .offer .audit__rec li:last-child button { border-bottom: 0; box-shadow: none; } .offer .audit__rec .ic { grid-column: 1; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cream); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(20, 14, 40, .10), var(--cast-1); } .offer .audit__rec .ic svg { width: 17px; height: 17px; fill: none; stroke: var(--spark-deep); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .offer .audit__rec .pn { display: contents; } .offer .audit__rec .v { grid-column: 2; grid-row: 1; display: block; font-size: var(--t-read); font-weight: 500; color: var(--on-panel); letter-spacing: -.006em; } .offer .audit__rec .k { grid-column: 2; grid-row: 2; display: block; font-size: var(--t-micro); color: var(--on-panel-mute); text-transform: none; letter-spacing: .01em; } .offer .audit__rec .use { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; width: clamp(54px, 5.4vw, 88px); height: 4px; border-radius: 3px; overflow: hidden; background: rgba(20, 14, 40, .10); box-shadow: inset 0 1px 2px rgba(20, 14, 40, .22), 0 1px 0 rgba(255, 255, 255, .70); } .offer .audit__rec .use i { display: block; height: 100%; width: calc(var(--u) * 100%); border-radius: inherit; background: var(--spark-deep); } .offer .audit__rec li:nth-child(3) .use i { background: var(--live-deep); } .offer .audit__rec .fig { grid-column: 3; grid-row: 1; justify-self: end; min-width: 6ch; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--t-sm); font-weight: 500; color: var(--on-panel); letter-spacing: -.004em; } .offer .audit__rec button:hover:not([aria-pressed="true"]) { background: rgba(83, 43, 184, .045); } .offer .audit__rec button[aria-pressed="true"] .v { color: var(--spark-deep); } .offer .audit__rec button[aria-pressed="true"]::before { background: var(--spark-deep); } .offer .panel.panel--bare { background-color: #0A1730; background-image: radial-gradient(47.16% 90.82% at 50% 0%, rgba(155, 140, 255, .24) 0%, rgba(155, 140, 255, 0) 100%), radial-gradient(34% 32% at 50% 38%, rgba(155, 140, 255, .15) 0%, rgba(155, 140, 255, 0) 100%), linear-gradient(rgba(5, 16, 36, 0) 30%, rgba(14, 8, 38, .48) 100%); border: 0; box-shadow: inset 0 1px 0 rgba(178, 164, 255, .26), 0 24px 60px -30px rgba(4, 2, 20, .8); border-radius: var(--r-panel); padding: var(--s5) var(--s4); } .offer .audit__trace, .offer .run__card { background: var(--cream); border-color: var(--cream-rule); } .offer .run__head { border-bottom-color: var(--cream-rule); } .offer .run__rows > li { background: var(--cream-2); border: 1px solid var(--cream-rule); } .offer .run__rows .ic { background: var(--cream); border: 1px solid var(--cream-rule); } .offer .run__card::before, .offer .run__card::after { background: var(--cream-2); } .offer .panel .label b { color: var(--on-panel); } .offer .panel .panel__claim b { color: var(--on-panel); } .offer .audit__rows dd b { color: var(--on-panel); } .offer .audit__rec button[aria-pressed="true"] { box-shadow: 0 1px 0 rgba(255, 255, 255, .78); background: rgba(83, 43, 184, .05); transform: none; } .offer .audit__rec li:last-child button[aria-pressed="true"] { box-shadow: none; } .offer .audit__rec button[aria-pressed="true"] .ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(20, 14, 40, .10), var(--cast-2); } .offer .audit__trace { margin-right: calc(var(--s5) * -1 - 8px); } .offer .panel .panel__claim b { font-family: var(--serif); font-weight: 500; letter-spacing: -.006em; } .offer .audit__rows div:nth-child(1) dt { color: var(--on-panel-mute); } .offer .audit__rows div:nth-child(3) dt { color: var(--on-panel-mute); } .offer .audit__rows div:nth-child(4) dt { color: var(--live-deep); } .dsv2-live-example > .dsv2-wrap > span { color: rgba(246, 241, 230, .55); } .offer .offer__head { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(280px, 24vw, 400px)); } .offer .offer__intro { max-width: none; } .offer .offer__intro h2 { text-wrap: balance; } @media (max-width: 2000px) { } .offer .panel.panel--tint, .offer .panel.panel--band { overflow: clip; overflow-clip-margin: 24px; } .offer .panel.panel--tint { background: radial-gradient(120% 74% at 6% 108%, rgba(122, 96, 255, .42) 0%, transparent 62%), radial-gradient( 70% 52% at 98% -10%, rgba(255, 255, 255, .60) 0%, transparent 58%), linear-gradient(158deg, rgb(206, 214, 246) 0%, rgb(191, 200, 240) 100%); } .offer .panel.panel--band { background: radial-gradient(112% 82% at 97% 106%, rgba( 38, 190, 214, .40) 0%, transparent 60%), radial-gradient( 66% 50% at 3% -10%, rgba(255, 255, 255, .58) 0%, transparent 56%), linear-gradient(158deg, rgb(199, 221, 238) 0%, rgb(183, 209, 232) 100%); } .offer .offer__grid { align-items: stretch; } .offer .panel.panel--bare { display: flex; flex-direction: column; } .offer .panel.panel--bare .govern { margin-top: var(--s4); padding: var(--s4) 16px calc(var(--s4) - 2px); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .14) 100%); box-shadow: inset 0 3px 7px -1px rgba(0, 0, 0, .70), inset 0 1px 0 rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(155, 140, 255, .10), 0 1px 0 rgba(160, 150, 220, .10); } .offer .audit__rec button[data-linked="true"] .v { color: var(--spark-deep); } .offer .panel.panel--bare .panel__claim { margin-top: var(--s2); padding: var(--s2) 0 0; border-top: 1px solid rgba(0, 0, 0, .48); border-radius: 0; background: none; box-shadow: inset 0 1px 0 rgba(155, 140, 255, .085); color: #C3CBE4; } .offer .panel.panel--bare .panel__claim b { color: var(--on-room); } .offer .panel.panel--tint { display: flex; flex-direction: column; } .offer .panel.panel--tint > .audit { flex: 1; align-items: stretch; } .offer .audit__rec { height: 100%; } .offer .panel.panel--band { flex-direction: row; align-items: stretch; } .offer .panel.panel--band > div:first-child { flex: 0 0 33%; justify-content: center; } .offer .panel.panel--band > :nth-child(2) { flex: 1 1 auto; min-width: 0; } .offer .panel.panel--tint.panel--band > .audit { flex: 1 1 auto; align-items: center; height: auto; } .offer .panel.panel--band .audit__rec { height: auto; } .offer .panel.panel--band .audit { align-items: center; } .offer .panel.panel--band .audit__rec { height: auto; align-self: center; } .offer .panel.panel--band > .audit { flex: 0 1 auto; align-items: center; } .offer .panel.panel--band .audit__rec li button { align-content: normal; } .offer .panel.panel--band .audit__rec li { flex: 0 0 auto; } .offer .panel.panel--band .audit__rec li button { padding: 11px 10px 11px 0; } #svc-03.panel--band { min-height: 295px; } #segmentation > .offer { padding-top: var(--s4); } .offer .panel--band .run__slab { background: linear-gradient(180deg, rgba(14, 26, 52, .155) 0%, rgba(14, 26, 52, .065) 100%); background-image: linear-gradient(to right, rgba(14, 26, 52, .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(14, 26, 52, .055) 1px, transparent 1px); background-size: 24px 24px; box-shadow: inset 0 7px 16px -4px rgba(10, 20, 42, .52), inset 0 2px 1px -1px rgba(10, 20, 42, .30), inset 0 -1px 0 rgba(255, 255, 255, .74), 0 1px 0 rgba(255, 255, 255, .95); } .offer .panel--band .run__slab ~ .run__card { box-shadow: 0 10px 22px -10px rgba(10, 20, 42, .34), 0 2px 5px -2px rgba(10, 20, 42, .18); } .offer .audit__rec li button { align-content: center; } .offer .audit__rows .is-flag dt { color: var(--live-deep); display: flex; align-items: center; gap: 6px; } .offer .audit__rows .is-flag dt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live-deep); flex: none; } .offer .audit__trace[data-view="month"] .is-flag dd { font-weight: 500; color: var(--on-panel); } .offer .audit__trace[data-view="stream"] .is-flag dt { color: var(--on-panel-mute); } .offer .audit__trace[data-view="stream"] .is-flag dt::before { background: var(--on-panel-mute); opacity: .45; } .offer .audit__rec button[aria-pressed="false"] .v { color: var(--on-panel); } .offer .audit__trace[data-view="month"]::after { opacity: 0; } .offer .audit__trace::after { transition: opacity .22s var(--ease), top .28s var(--ease); } .offer .audit__trace::after { background: var(--cream); border-left-color: var(--cream-rule); border-bottom-color: var(--cream-rule); } .offer .scope { margin: 0; padding: 0; } .offer .scope__who { font-family: var(--sans); font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--spark); } .offer .scope__hero { display: block; margin-top: var(--s3); } .offer .scope__hero b { display: block; font-family: var(--sans); font-weight: 500; font-size: clamp(38px, 3.15vw, 56px); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--on-room); } .offer .scope__hero b i { font-style: normal; font-size: .46em; font-weight: 500; letter-spacing: 0; margin-left: .07em; color: var(--live); } .offer .scope__hero em { display: block; margin-top: 8px; font-style: normal; font-family: var(--sans); font-size: var(--t-nano); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #9AA6C6; } .offer .scope__qual { display: grid; grid-template-columns: 1fr 1.1fr; margin-top: var(--s3); font-family: var(--sans); font-size: var(--t-sm); color: #9AA6C6; letter-spacing: -.002em; } .offer .scope__qual span + span { padding-left: 14px; border-left: 1px solid rgba(0, 0, 0, .5); box-shadow: inset 1px 0 0 rgba(155, 140, 255, .13); } .offer .scope__qual b { color: var(--on-room); font-weight: 500; font-variant-numeric: tabular-nums; } .offer .scope__of { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(0, 0, 0, .45); box-shadow: 0 -1px 0 rgba(155, 140, 255, .10) inset; font-family: var(--sans); font-size: var(--t-sm); color: #9AA6C6; letter-spacing: -.002em; } .offer .scope__of b { color: var(--on-room); font-weight: 500; font-variant-numeric: tabular-nums; } .capture-fields { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; } .capture-fields > * { flex: 0 0 auto; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .offer .panel.panel--tint, .offer .panel.panel--band { transition: box-shadow .52s var(--ease), translate .34s var(--ease); } .offer .panel.panel--tint:hover, .offer .panel.panel--band:hover { translate: 0 -6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba( 20, 14, 40, .07), 0 10px 0 -1px var(--mill), 0 18px 26px -8px rgba(3, 1, 14, .55), 0 58px 92px -30px rgba(3, 1, 14, .70), 0 118px 160px -70px rgba(3, 1, 14, .58); } .offer .audit__trace { transition: translate .34s var(--ease), scale .34s var(--ease), box-shadow .34s var(--ease); } .offer .panel--tint:hover .audit__trace { translate: 0 -14px; scale: 1.03; } .offer .run__card { transition: translate .34s var(--ease), box-shadow .34s var(--ease); } .offer .panel--band:hover .run__card { translate: 0 -14px; box-shadow: 0 4px 0 -1px rgba(255, 255, 255, .55), 0 8px 14px -4px rgba(10, 20, 42, .40), 0 42px 70px -24px rgba(10, 20, 42, .52), 0 84px 120px -56px rgba(10, 20, 42, .40); } .offer .run__slab { transition: translate .34s var(--ease); } .offer .panel--band:hover .run__slab { translate: 0 -14px; } } .xt { display: grid; grid-template-columns: minmax(0, 168px) minmax(0, 158px) minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: center; column-gap: 28px; row-gap: 5px; height: 100%; padding: 4px 0; } .xt__src { grid-column: 1; grid-row: 2; } .xt__api { grid-column: 2; grid-row: 2; } .xt__axis { grid-column: 3; grid-row: 1; } .xt__outs { grid-column: 3; grid-row: 2; } .xt__legend { grid-column: 1 / -1; grid-row: 3; } .xt__axis { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 44px 56px; align-items: end; gap: 10px; padding: 0 12px; } .xt__axis li { grid-column: auto; font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .05em; text-transform: uppercase; color: var(--on-panel-mute); white-space: nowrap; } .xt__axis .xt__axis-v { text-align: right; } .xt__legend { display: flex; align-items: center; gap: 7px; padding: 0 12px; font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .04em; text-transform: uppercase; color: var(--on-panel-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xt__legend i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 2px; background: var(--spark-deep); } .xt__src, .xt__api { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--rule); box-shadow: var(--cast-2); min-width: 0; } .xt__api { background: linear-gradient(180deg, #fff 0%, rgba(91, 52, 196, .055) 100%); border-color: rgba(91, 52, 196, .34); } .xt .xt__k { font-family: var(--mono); font-size: var(--t-nano); letter-spacing: .09em; text-transform: uppercase; color: var(--on-panel-mute); } .xt__src b, .xt__api b { font-size: 13px; font-weight: 600; letter-spacing: -0.008em; color: var(--on-panel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xt__api b { color: var(--spark-deep); } .xt__src em { font-style: normal; font-family: var(--mono); font-size: var(--t-nano); line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; color: var(--on-panel-mute); } .xt__src::after, .xt__api::after { content: ""; position: absolute; top: 50%; left: 100%; width: 44px; height: 0; border-top: 1px solid rgba(91, 52, 196, .58); } .xt__src::before { content: ""; position: absolute; top: 50%; left: calc(100% + 38px); width: 0; height: 0; transform: translateY(-50%); border-left: 5px solid rgba(91, 52, 196, .55); border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .xt__api::after { width: 22px; } .xt__outs { position: relative; list-style: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .xt__outs::before { content: ""; position: absolute; left: -22px; top: 22px; bottom: 22px; border-left: 1px solid rgba(91, 52, 196, .58); } .xt__outs > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px 56px; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 9px; background: #fff; border: 1px solid var(--rule); box-shadow: var(--cast-2); min-width: 0; } .xt__outs .xt__pips { display: contents; } .xt__rows { display: block; height: 6px; border-radius: 3px; background: rgba(20, 18, 46, .07); overflow: hidden; } .xt__rows i { display: block; height: 100%; border-radius: 3px; background: rgba(91, 52, 196, .55); min-width: 3px; } .xt__outs > li::before { content: ""; position: absolute; top: 50%; left: -22px; width: 22px; height: 0; border-top: 1px solid rgba(91, 52, 196, .58); } .xt .xt__p { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.15; letter-spacing: -0.008em; color: var(--on-panel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xt .xt__p em { font-style: normal; font-family: var(--mono); font-size: var(--t-nano); font-weight: 400; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; color: var(--on-panel-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xt__outs > li.is-next { background: transparent; border: 1px dashed rgba(91, 52, 196, .38); box-shadow: none; } .xt__outs > li.is-next .xt__p { color: var(--on-panel-mute); font-weight: 500; } .xt__outs > li.is-next .xt__vol { font-size: var(--t-nano); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--spark-deep); } .xt__outs > li.is-next .xt__pips li { border-style: dashed; background: transparent; } .xt__outs > li.is-next .xt__rows { display: none; } .xt__outs > li.is-next .xt__vol { grid-column: span 2; } .xt__outs > li.is-next::before { border-top-style: dashed; } .xt__pips { list-style: none; display: flex; gap: 3px; } .xt__pips li { width: 9px; height: 9px; border-radius: 2px; background: rgba(20, 18, 46, .085); border: 1px solid rgba(20, 18, 46, .075); } .xt__pips li.on { background: var(--spark-deep); border-color: var(--spark-deep); } .xt__src .xt__pips { margin-top: 3px; } .xt .xt__vol { font-family: var(--mono); font-size: 15.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--on-panel); text-align: right; white-space: nowrap; } .xt .xt__vol em { font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: 0; color: var(--on-panel-mute); } .xt .xt__vol::after { content: ""; display: block; width: var(--v, 0); height: 3px; margin: 3px 0 0 auto; border-radius: 2px; background: rgba(91, 52, 196, .45); } .xt__outs > li.is-next .xt__vol::after { display: none; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .offer .xt { transition: translate .34s var(--ease); } .offer .panel--band:hover .xt { translate: 0 -10px; } .offer .xt__outs > li, .offer .xt__src, .offer .xt__api { transition: translate .34s var(--ease), box-shadow .34s var(--ease); } .offer .xt__outs > li:nth-child(1) { transition-delay: 0ms; } .offer .xt__outs > li:nth-child(2) { transition-delay: 55ms; } .offer .xt__outs > li:nth-child(3) { transition-delay: 110ms; } .offer .panel--band:hover .xt__src, .offer .panel--band:hover .xt__api { translate: 0 -4px; } .offer .panel--band:hover .xt__outs > li { translate: 0 -9px; box-shadow: 0 3px 0 -1px rgba(255, 255, 255, .60), 0 8px 14px -4px rgba(120, 104, 76, .34), 0 24px 36px -14px rgba(120, 104, 76, .42); } } .offer .deck { position: relative; } .offer .deck + .deck { margin-top: var(--s4); } .offer .deck__stage { display: grid; gap: var(--s4); } .offer .deck__rail { display: none; } .offer .deck.js-deck .deck__rail { display: flex; } .offer .deck.js-deck .deck__stage { --deck-bleed: 56px; --slide-gap: clamp(16px, calc(var(--deck-bleed) * .28), 64px); --slide-shift: calc(100% + var(--slide-gap)); display: grid; gap: 0; position: relative; overflow: hidden; margin-inline: calc(-1 * var(--deck-bleed)); padding-inline: var(--deck-bleed); margin-block: -8px -72px; padding-block: 8px 72px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--deck-bleed), #000 calc(100% - var(--deck-bleed)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--deck-bleed), #000 calc(100% - var(--deck-bleed)), transparent 100%); } .offer .deck.js-deck .deck__slide { grid-area: 1 / 1; width: 100%; opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .34s cubic-bezier(.165, .84, .44, 1); } .offer .deck.js-deck .deck__slide[data-slide="active"] { z-index: 2; opacity: 1; pointer-events: auto; } .offer .deck.js-deck .deck__slide > .panel { height: 100%; } .offer .deck.js-deck .deck__slide > .panel--band > :nth-child(2) { margin-block: auto; } .offer .deck.js-deck .deck__slide[data-slide="prev"], .offer .deck.js-deck .deck__slide[data-slide="far-prev"] { transform: translateX(calc(-1 * var(--slide-shift))); } .offer .deck.js-deck .deck__slide[data-slide="next"], .offer .deck.js-deck .deck__slide[data-slide="far-next"] { transform: translateX(var(--slide-shift)); } .offer .deck.js-deck .deck__slide[data-slide="prev"], .offer .deck.js-deck .deck__slide[data-slide="next"] { opacity: .2; } .offer .deck.js-deck .deck__stage.is-aside-l { cursor: w-resize; } .offer .deck.js-deck .deck__stage.is-aside-r { cursor: e-resize; } .offer .deck.js-deck[data-enter="right"]:not(.is-lit) .deck__slide[data-slide="active"] { transform: translateX(var(--slide-shift)); opacity: 0; } .offer .deck.js-deck[data-enter="left"]:not(.is-lit) .deck__slide[data-slide="active"] { transform: translateX(calc(-1 * var(--slide-shift))); opacity: 0; } .offer .deck.js-deck:not(.is-lit) .deck__slide[data-slide="prev"], .offer .deck.js-deck:not(.is-lit) .deck__slide[data-slide="next"] { opacity: 0; } .offer .deck.js-deck:not(.is-lit) .deck__rail { opacity: 0; transform: translateY(6px); } .offer .deck.js-deck.is-lit .deck__slide[data-slide="prev"], .offer .deck.js-deck.is-lit .deck__slide[data-slide="next"] { transition-delay: .18s; } .offer .deck.js-deck .deck__rail { transition: opacity .28s ease .26s, transform .34s cubic-bezier(.165, .84, .44, 1) .26s; } .offer .deck__rail { align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: 18px; flex-wrap: wrap; } .offer .deck__tabs { position: relative; display: flex; gap: 26px; flex-wrap: wrap; } .offer .deck__tab { appearance: none; background: none; border: 0; padding: 0 0 10px; margin: 0; font: inherit; cursor: pointer; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--on-room-mute); transition: color .15s cubic-bezier(.165, .84, .44, 1); } .offer .deck__tab:hover { color: var(--on-room); } .offer .deck__tab.is-active { color: var(--on-room); } .offer .deck__tab .amp { letter-spacing: 0; } .offer .deck__ind { position: absolute; left: 0; bottom: 0; height: 1px; width: var(--indicator-width, 0); transform: translateX(var(--indicator-x, 0)); background: var(--spark); opacity: 0; transition: transform .34s cubic-bezier(.165, .84, .44, 1), width .34s cubic-bezier(.165, .84, .44, 1), opacity .2s ease; } .offer .deck__tabs[data-indicator-ready] .deck__ind { opacity: 1; } .offer .deck__nav { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; } .offer .deck__step { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--on-room-mute); transition: color .15s cubic-bezier(.165, .84, .44, 1); } .offer .deck__step:hover:not(:disabled) { color: var(--on-room); } .offer .deck__step:disabled { visibility: hidden; } .offer .deck__count { margin: 0; font-size: 13px; color: var(--on-room-mute); font-variant-numeric: lining-nums tabular-nums; min-width: 4.5em; text-align: center; } @media (prefers-reduced-motion: reduce) { .offer .deck.js-deck .deck__slide, .offer .deck.js-deck .deck__rail, .offer .deck__ind { transition: none; } .offer .deck.js-deck:not(.is-lit) .deck__slide[data-slide="active"] { transform: none; opacity: 1; } .offer .deck.js-deck:not(.is-lit) .deck__rail { opacity: 1; transform: none; } } .offer .offer__ask { margin: var(--s6) 0 0; text-align: center; } .offer .offer__ask + .offer__close { margin-top: var(--s4); } .offer #svc-05, .offer #svc-06, .offer #svc-07, .offer #svc-08 { --idb-paper: #F6F1E6; --idb-face: #FCFAF4; --idb-sunk: #EFEADE; --idb-rule: #DED6C5; --idb-ink: #121026; --idb-mute: #46415A; --idb-blue: #26386B; --idb-wash: rgba(38, 56, 107, .09); --idb-lav: #532BB8; } .offer .panel#svc-05, .offer .panel#svc-06, .offer .panel#svc-07, .offer .panel#svc-08 { background: var(--idb-paper); border: 1px solid var(--idb-rule); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80), rgba(8, 5, 22, .45) 0 18px 48px 0; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .offer .panel#svc-05:hover, .offer .panel#svc-06:hover, .offer .panel#svc-07:hover, .offer .panel#svc-08:hover { translate: 0 -6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 18px 26px -8px rgba(3, 1, 14, .55), 0 58px 92px -30px rgba(3, 1, 14, .70); } } .offer .panel#svc-05 .label b, .offer .panel#svc-06 .label b, .offer .panel#svc-07 .label b, .offer .panel#svc-08 .label b { color: var(--idb-blue); } .offer .panel#svc-05 .panel__claim, .offer .panel#svc-06 .panel__claim, .offer .panel#svc-07 .panel__claim, .offer .panel#svc-08 .panel__claim { border-top-color: var(--idb-rule); } .offer .panel#svc-05 .panel__claim b, .offer .panel#svc-06 .panel__claim b { color: var(--idb-blue); } .offer .qc .ic, .offer .sc .ic, .offer .ac .ic, .offer .ig .ic { width: 13px; height: 13px; flex: 0 0 13px; display: block; } .offer .qc .ic svg, .offer .sc .ic svg, .offer .ac .ic svg, .offer .ig .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-05 { min-height: 430px; } .offer #svc-05 .qc { display: flex; min-width: 0; align-self: stretch; } .offer .qc__win { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--idb-face); border: 1px solid var(--idb-rule); border-radius: 12px; overflow: hidden; position: relative; } .offer .qc__top { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 14px 10px; border-bottom: 1px solid var(--idb-rule); } .offer .qc__view { font-size: 14px; font-weight: 600; color: var(--idb-ink); letter-spacing: -.01em; } .offer .qc__count { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--idb-mute); font-variant-numeric: tabular-nums; } .offer .qc__count::after { content: " records"; } .offer .qc__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px 0; } .offer .qc__conj, .offer .qc__add { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; line-height: 1; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--idb-rule); background: var(--idb-sunk); color: var(--idb-mute); white-space: nowrap; } .offer .qc__conj { font-weight: 600; color: var(--idb-ink); } .offer .qc__add .ic { color: var(--idb-blue); } .offer .qc__rule { display: flex; align-items: center; gap: 6px; padding: 9px 14px 11px; flex-wrap: wrap; } .offer .qc__field, .offer .qc__op, .offer .qc__val { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 1; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--idb-rule); background: var(--idb-face); color: var(--idb-mute); white-space: nowrap; } .offer .qc__field .ic { color: var(--idb-mute); opacity: .7; } .offer .qc__op { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--idb-ink); padding: 7px 10px; } .offer .qc__val { background: var(--idb-wash); border-color: rgba(38, 56, 107, .22); color: var(--idb-ink); font-weight: 500; } .offer .qc__val i { font-style: normal; color: var(--idb-mute); opacity: .6; } .offer .qc__go { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1; padding: 8px 12px; border-radius: 8px; border: 0; cursor: default; background: var(--idb-blue); color: #F6F1E6; white-space: nowrap; } .offer .qc__go .ic { color: #F6F1E6; } .offer .qc__met { display: flex; align-items: center; gap: 24px; padding: 9px 14px; background: var(--idb-sunk); border-top: 1px solid var(--idb-rule); border-bottom: 1px solid var(--idb-rule); } .offer .qc__met > span { display: flex; align-items: baseline; gap: 7px; } .offer .qc__met em { font-style: normal; font-size: 11px; color: var(--idb-mute); } .offer .qc__met b { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; color: var(--idb-ink); font-variant-numeric: tabular-nums; } .offer .qc__met b i { font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--idb-mute); } .offer .qc__ok { margin-left: auto; font-size: 10.5px; color: var(--idb-mute); display: inline-flex; align-items: center; gap: 5px; } .offer .qc__ok i { width: 6px; height: 6px; border-radius: 50%; background: var(--idb-lav); display: block; } .offer .qc__grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .offer .qc__hd, .offer .qc__rows > div { display: grid; grid-template-columns: .62fr .68fr 1.05fr 1.3fr 1.5fr; gap: 12px; padding: 0 14px; align-items: center; } .offer .qc__hd { height: 28px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--idb-mute); border-bottom: 1px solid var(--idb-rule); background: var(--idb-face); } .offer .qc__rows > div { height: 30px; font-size: 11.5px; color: var(--idb-ink); border-bottom: 1px solid rgba(222, 214, 197, .55); } .offer .qc__rows > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .offer .qc__rows > div > span:nth-child(5) { color: var(--idb-mute); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; } .offer .qc__more { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; pointer-events: none; background: linear-gradient(180deg, rgba(252, 250, 244, 0) 0%, rgba(252, 250, 244, .92) 62%, var(--idb-face) 100%); } .offer #svc-06 { min-height: 360px; } .offer #svc-06 .sc { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; align-self: stretch; } .offer .sc__ord { background: var(--idb-sunk); border: 1px solid var(--idb-rule); border-radius: 12px; padding: 11px 14px 12px; } .offer .sc__k { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--idb-mute); margin-bottom: 5px; } .offer .sc__ord b { display: block; font-size: 14.5px; font-weight: 600; color: var(--idb-ink); letter-spacing: -.01em; } .offer .sc__ord code { display: block; margin: 7px 0 8px; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1.5; color: var(--idb-mute); padding: 7px 9px; border-radius: 7px; background: var(--idb-face); border: 1px solid var(--idb-rule); overflow-wrap: anywhere; } .offer .sc__cad { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--idb-mute); } .offer .sc__cad .ic { color: var(--idb-blue); } .offer .sc__stat { display: flex; align-items: baseline; gap: 9px; margin: 0 0 9px; } .offer .sc__stat em { font-style: normal; font-size: 11px; color: var(--idb-mute); } .offer .sc__stat b { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 21px; font-weight: 600; color: var(--idb-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .offer .sc__runs { display: flex; align-items: flex-end; justify-content: space-between; gap: 0; height: 54px; margin: 0; padding: 0 0 6px; list-style: none; border-bottom: 1px solid var(--idb-rule); } .offer .sc__runs li { position: relative; flex: 0 0 6px; width: 6px; height: 46%; border-radius: 2px 2px 0 0; background: rgba(70, 65, 90, .24); } .offer .sc__runs li.is-now, .offer .sc__runs li.is-next { height: 100%; flex-basis: 8px; width: 8px; } .offer .sc__runs li.is-now { background: var(--idb-blue); } .offer .sc__runs li.is-next { background: transparent; border: 1px dashed rgba(38, 56, 107, .42); border-bottom: 0; } .offer .sc__n { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 5px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--idb-mute); white-space: nowrap; } .offer .sc__runs li.is-now .sc__n { color: var(--idb-blue); font-weight: 600; } .offer .sc__axis { display: flex; justify-content: space-between; margin: 6px 0 0; padding: 0; list-style: none; font-size: 10.5px; color: var(--idb-mute); } .offer .sc__dest { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; } .offer .sc__dest code { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: var(--idb-ink); padding: 6px 9px; border-radius: 7px; background: var(--idb-wash); border: 1px solid rgba(38, 56, 107, .20); } .offer .sc__to { font-size: 11px; color: var(--idb-mute); margin: 0 2px; } .offer .sc__chip { font-size: 10.5px; line-height: 1; padding: 6px 8px; border-radius: 6px; background: var(--idb-face); border: 1px solid var(--idb-rule); color: var(--idb-mute); white-space: nowrap; } .offer #svc-07 .ac { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .offer .ac__src { align-self: center; text-align: center; padding: 9px 18px 10px; min-width: 190px; } .offer .ac__src b { display: block; font-size: 14.5px; font-weight: 600; color: var(--on-panel); } .offer .ac__src em { font-style: normal; font-size: 11.5px; color: var(--on-panel-mute); } .offer .ac__seats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; } .offer .ac__seats::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: -16px; height: 1px; background: rgba(19, 16, 38, .22); } .offer .ac__seats::after { content: ""; position: absolute; left: 50%; top: -30px; width: 1px; height: 14px; background: rgba(19, 16, 38, .22); } .offer .ac__seat { position: relative; padding: 11px 12px 10px; min-width: 0; } .offer .ac__seat::before { content: ""; position: absolute; left: 50%; top: -16px; width: 1px; height: 11px; background: rgba(19, 16, 38, .22); } .offer .ac__seat::after { content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--idb-face); border: 1px solid rgba(19, 16, 38, .30); } .offer .ac__seat header { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 9px; min-width: 0; } .offer .ac__ic, .offer .ac__badge { margin-top: 1px; } .offer .ac__ic { width: 15px; height: 15px; border-radius: 5px; flex: 0 0 15px; } .offer .ac__ic--a { background: linear-gradient(150deg, rgba(122, 96, 255, .95), rgba(96, 74, 214, .95)); } .offer .ac__ic--b { background: linear-gradient(150deg, rgba(38, 190, 214, .95), rgba(28, 150, 178, .95)); } .offer .ac__ic--c { background: rgba(19, 16, 38, .18); } .offer .ac__seat header b { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--on-panel); line-height: 1.25; overflow-wrap: anywhere; } .offer .ac__badge { flex: 0 0 auto; font-size: 10.5px; line-height: 1; padding: 4px 7px; border-radius: 7px; background: rgba(122, 96, 255, .12); color: rgba(66, 42, 150, .95); font-weight: 500; } .offer .ac__seat:nth-child(2) .ac__badge { background: rgba(38, 190, 214, .16); color: rgba(16, 84, 100, .95); } .offer .ac__seat.is-ended .ac__badge { background: rgba(19, 16, 38, .07); color: rgba(19, 16, 38, .45); } .offer .ac__rows { margin: 0; padding: 0; list-style: none; } .offer .ac__rows li { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-top: 1px solid rgba(19, 16, 38, .07); font-size: 11.5px; min-width: 0; } .offer .ac__rows li:first-child { border-top: 0; } .offer .ac__rows .ic { color: rgba(19, 16, 38, .28); width: 13px; height: 13px; flex: 0 0 13px; } .offer .ac__rows span { flex: 0 0 auto; color: rgba(19, 16, 38, .46); } .offer .ac__rows em { flex: 1 1 auto; min-width: 0; text-align: right; font-style: normal; font-weight: 500; color: var(--on-panel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .offer .ac__seat.is-ended { opacity: .72; } .offer .ac__seat.is-ended header b { text-decoration: line-through; text-decoration-color: rgba(19, 16, 38, .35); color: var(--on-panel-mute); } .offer .ac__seat.is-ended .ac__rows em { color: var(--on-panel-mute); font-weight: 400; } .offer .ac__more { margin: 11px 0 0; text-align: center; font-size: 11.5px; color: rgba(246, 241, 230, .0); } .offer .panel .ac__more { color: rgba(19, 16, 38, .40); } .offer #svc-08 .ig { position: relative; display: flex; align-items: center; min-width: 0; } .offer .ig__slab { position: absolute; inset: 0; border-radius: 13px; pointer-events: none; background: linear-gradient(to right, rgba(14, 26, 52, .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(14, 26, 52, .055) 1px, transparent 1px), linear-gradient(180deg, rgba(14, 26, 52, .155) 0%, rgba(14, 26, 52, .065) 100%); background-size: 24px 24px, 24px 24px, auto; box-shadow: inset 0 7px 16px -4px rgba(10, 20, 42, .52), inset 0 2px 1px -1px rgba(10, 20, 42, .30), inset 0 -1px 0 rgba(255, 255, 255, .74), 0 1px 0 rgba(255, 255, 255, .95); } .offer .ig__lane { position: relative; z-index: 1; flex: 1 1 auto; margin: 0; padding: 11px 14px; list-style: none; min-width: 0; } .offer .ig__lane li { display: flex; align-items: center; gap: 11px; padding: 7px 0; min-width: 0; border-top: 1px solid rgba(14, 26, 52, .085); } .offer .ig__lane li:first-child { border-top: 0; } .offer .ig__mk { --bk: rgba(19, 16, 38, .26); position: relative; flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; color: rgba(19, 16, 38, .58); background-repeat: no-repeat; background-image: linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)); background-size: 7px 1px, 1px 7px, 7px 1px, 1px 7px, 7px 1px, 1px 7px, 7px 1px, 1px 7px; background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom; } .offer .ig__mk .ic { width: 14px; height: 14px; flex: 0 0 14px; } .offer .ig__pn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .offer .ig__pn b { font-size: 13px; font-weight: 600; color: var(--on-panel); } .offer .ig__pn em { font-style: normal; font-size: 11.5px; color: var(--on-panel-mute); } .offer .ig__n { flex: 0 0 auto; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 13px; font-weight: 500; color: var(--on-panel); font-variant-numeric: tabular-nums; } .offer .ig__n.is-dn { color: rgb(150, 74, 60); } .offer .ig__n.is-up { color: rgb(19, 122, 92); } .offer .ig__lane li.is-out { margin-top: 3px; padding-top: 10px; border-top: 1px solid rgba(0, 120, 78, .30); } .offer .ig__lane li.is-out .ig__mk { color: rgb(6, 108, 74); } .offer .ig__lane li.is-out .ig__mk { --bk: rgba(0, 120, 78, .48); } .offer .ig__lane li.is-out .ig__n { color: rgb(6, 108, 74); font-weight: 600; font-size: 14px; } .offer .ig__cta { margin: 6px 0 0; } .offer .ig__cta .bp-btn { font-size: 11.5px; padding: 11px 20px; } .offer .ig__cta .bp-btn--solid { background: #12362B; color: #EAF7F0; } .offer .ig__cta .bp-btn--solid:hover { background: #0B241C; translate: 0 -2px; } .offer .ac__src { background: var(--idb-sunk); border: 1px solid var(--idb-rule); box-shadow: none; } .offer .ac__seat { background: transparent; border: 0; box-shadow: none; border-left: 1px solid var(--idb-rule); border-radius: 0; padding-left: 13px; } .offer .ac__seats { gap: 0; } .offer .ac__seat:first-child { border-left: 0; padding-left: 0; } .offer .ac__seat::after { background: var(--idb-paper); border-color: rgba(38, 56, 107, .38); } .offer .ac__seat::before, .offer .ac__seats::before, .offer .ac__seats::after { background: rgba(38, 56, 107, .30); } .offer .ac__badge { background: var(--idb-wash); color: var(--idb-blue); } .offer .ac__seat:nth-child(2) .ac__badge { background: var(--idb-wash); color: var(--idb-blue); } .offer .ac__seat.is-ended .ac__badge { background: var(--idb-sunk); color: var(--idb-mute); } .offer .ac__ic--a { background: var(--idb-blue); } .offer .ac__ic--b { background: var(--idb-lav); } .offer .ac__ic--c { background: rgba(70, 65, 90, .28); } .offer .ac__rows li { border-top-color: var(--idb-rule); } .offer .ac__rows .ic { color: var(--idb-mute); opacity: .55; } .offer .ac__rows span { color: var(--idb-mute); } .offer .ac__rows em, .offer .ac__seat header b { color: var(--idb-ink); } .offer .panel .ac__more { color: var(--idb-mute); } .offer .ig__slab { background: linear-gradient(to right, rgba(70, 60, 40, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(70, 60, 40, .05) 1px, transparent 1px), var(--idb-sunk); background-size: 24px 24px, 24px 24px, auto; box-shadow: inset 0 6px 14px -4px rgba(60, 48, 28, .28), inset 0 -1px 0 rgba(255, 255, 255, .8), 0 1px 0 rgba(255, 255, 255, .9); } .offer .ig__lane li { border-top-color: var(--idb-rule); } .offer .ig__mk { --bk: rgba(70, 65, 90, .30); color: var(--idb-mute); } .offer .ig__pn b { color: var(--idb-ink); } .offer .ig__pn em { color: var(--idb-mute); } .offer .ig__n { color: var(--idb-ink); } .offer .ig__n.is-dn { color: #8A4436; } .offer .ig__n.is-up { color: var(--idb-blue); } .offer .ig__lane li.is-out { border-top-color: rgba(38, 56, 107, .34); } .offer .ig__lane li.is-out .ig__mk { --bk: rgba(38, 56, 107, .48); color: var(--idb-blue); } .offer .ig__lane li.is-out .ig__n { color: var(--idb-blue); font-weight: 600; font-size: 14px; } .offer .ig__cta .bp-btn--solid { background: var(--idb-blue); color: #F6F1E6; } .offer .ig__cta .bp-btn--solid:hover { background: #1B2A52; translate: 0 -2px; } .pship { max-width: 1207px; margin: clamp(56px, 7vh, 92px) auto clamp(34px, 4.5vh, 54px); padding: 0 24px; } .pship__lock { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2.6vw, 40px); margin: 0; font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; font-weight: 400; line-height: 1; color: rgba(246, 241, 230, .96); } .pship__lock::before, .pship__lock::after { content: ""; flex: 1 1 auto; height: 1px; min-width: 20px; background: linear-gradient(90deg, transparent, rgba(233, 220, 255, .30) 42%, rgba(233, 220, 255, .30) 58%, transparent); } .pship__side { display: inline-flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); flex: 0 0 auto; } .pship__lock { gap: 0; } .pship__lock::before, .pship__lock::after { display: none; } .pship__side { flex: 1 1 0; min-width: 0; } .pship__side:first-of-type { justify-content: flex-end; } .pship__side:last-of-type { justify-content: flex-start; } .pship__side:first-of-type::before, .pship__side:last-of-type::after { content: ""; flex: 0 0 auto; height: 1px; width: clamp(40px, 4.5vw, 86px); background: linear-gradient(90deg, transparent, rgba(233, 220, 255, .30) 42%, rgba(233, 220, 255, .30) 58%, transparent); } .pship__join { flex: 0 0 auto; padding-inline: clamp(18px, 2.4vw, 46px); } .pship__mg { width: clamp(44px, 4.4vw, 62px); height: clamp(37px, 3.7vw, 52px); color: rgba(246, 241, 230, .97); display: block; } .pship__nm { font-size: clamp(26px, 2.7vw, 38px); font-weight: 500; letter-spacing: -.022em; color: rgba(246, 241, 230, .97); white-space: nowrap; } .pship__idb { height: clamp(30px, 3.1vw, 44px); width: auto; display: block; } .pship__join { flex: 0 0 auto; font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: clamp(10px, 0.85vw, 12px); letter-spacing: .18em; text-transform: uppercase; color: rgba(246, 241, 230, .72); white-space: nowrap; line-height: 1.45; } .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: no-preference) { .offer .js-stage .qc__rows > div, .offer .js-stage .ac__seat, .offer .js-stage .ig__lane li, .offer .js-stage .sc__runs li { opacity: 0; } .offer .js-stage .qc__rows > div { transform: translateY(4px); } .offer .js-stage .sc__runs li { transform: scaleY(.04); transform-origin: bottom; } .offer .is-lit .qc__rows > div, .offer .is-lit .ac__seat, .offer .is-lit .ig__lane li { opacity: 1; transform: none; transition: opacity .42s cubic-bezier(.2, .7, .3, 1), transform .42s cubic-bezier(.2, .7, .3, 1); } .offer .is-lit .qc__rows > div:nth-child(1) { transition-delay: .92s; } .offer .is-lit .qc__rows > div:nth-child(2) { transition-delay: .99s; } .offer .is-lit .qc__rows > div:nth-child(3) { transition-delay: 1.06s; } .offer .is-lit .qc__rows > div:nth-child(4) { transition-delay: 1.13s; } .offer .is-lit .qc__rows > div:nth-child(5) { transition-delay: 1.20s; } .offer .is-lit .qc__rows > div:nth-child(6) { transition-delay: 1.27s; } .offer .is-lit .ac__seat:nth-child(2) { transition-delay: .12s; } .offer .is-lit .ac__seat:nth-child(3) { transition-delay: .24s; } .offer .is-lit .ig__lane li:nth-child(2) { transition-delay: .10s; } .offer .is-lit .ig__lane li:nth-child(3) { transition-delay: .20s; } .offer .is-lit .ig__lane li:nth-child(4) { transition-delay: .30s; } .offer .is-lit .ig__lane li:nth-child(5) { transition-delay: .40s; } .offer .is-lit .qc__go { animation: qcPress .42s cubic-bezier(.3, .7, .4, 1) .30s 1 both; } @keyframes qcPress { 0% { transform: none; } 38% { transform: scale(.965); } 100% { transform: none; } } .offer .is-lit .sc__runs li { opacity: 1; transform: none; transition: opacity .3s linear, transform .46s cubic-bezier(.2, .75, .3, 1); } .offer .is-lit .sc__runs li:nth-child(1) { transition-delay: .05s } .offer .is-lit .sc__runs li:nth-child(2) { transition-delay: .09s } .offer .is-lit .sc__runs li:nth-child(3) { transition-delay: .13s } .offer .is-lit .sc__runs li:nth-child(4) { transition-delay: .17s } .offer .is-lit .sc__runs li:nth-child(5) { transition-delay: .21s } .offer .is-lit .sc__runs li:nth-child(6) { transition-delay: .25s } .offer .is-lit .sc__runs li:nth-child(7) { transition-delay: .29s } .offer .is-lit .sc__runs li:nth-child(8) { transition-delay: .33s } .offer .is-lit .sc__runs li:nth-child(9) { transition-delay: .37s } .offer .is-lit .sc__runs li:nth-child(10) { transition-delay: .41s } .offer .is-lit .sc__runs li:nth-child(11) { transition-delay: .45s } .offer .is-lit .sc__runs li:nth-child(12) { transition-delay: .49s } .offer .is-lit .sc__runs li:nth-child(13) { transition-delay: .58s } } @media (prefers-reduced-motion: reduce) { .offer .js-stage .qc__rows > div, .offer .js-stage .ac__seat, .offer .js-stage .ig__lane li, .offer .js-stage .sc__runs li { opacity: 1; transform: none; } } .offer #svc-05, .offer #svc-06, .offer #svc-07, .offer #svc-08 { --pc-stage: #C4D0F2; --pc-stage-2: #B7C6EE; --pc-face: #EDEEF2; --pc-face-a: #F1F2F5; --pc-face-b: #E7E9EF; --pc-lift: #F5F6F9; --pc-sunk: #E2E4EB; --pc-rule: #D1D4DD; --pc-rule-2: #D6D8E0; --pc-ink: #121026; --pc-ink-2: #3F3A52; --pc-ink-3: #5C5A6E; --pc-act: #26386B; --pc-act-ink: #EEF2FB; --pc-spark: #532BB8; --pc-live: #0A5A66; --pc-ease: cubic-bezier(.25, .46, .45, .94); --pc-stage: cubic-bezier(.165, .84, .44, 1); } .offer #svc-05 .qc, .offer #svc-06 .sc, .offer #svc-07 .ac, .offer #svc-08 .ig { --idb-face: var(--pc-face); --idb-sunk: var(--pc-sunk); --idb-rule: var(--pc-rule); --idb-ink: var(--pc-ink); --idb-mute: var(--pc-ink-2); --idb-blue: var(--pc-act); --idb-lav: var(--pc-spark); --idb-wash: rgba(38, 56, 107, .12); } .offer .pcon { border-radius: 22px; padding: 8px; background: var(--cream-2); box-shadow: inset 0 0 0 1px var(--cream-rule); } .offer .pcon__win { position: relative; border-radius: 12px; overflow: hidden; background: linear-gradient(146deg, var(--pc-face-a) 0%, var(--pc-face) 46%, var(--pc-face-b) 100%); box-shadow: inset 0 0 0 1px var(--pc-rule); color: var(--pc-ink); } .offer .pcon__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 14px; margin: 0; border-bottom: .5px solid var(--pc-rule); opacity: .8; } .offer .pcon__name { font-size: 13px; line-height: 1.5; letter-spacing: -.01em; font-weight: 510; color: var(--pc-ink); } .offer .pcon__dial { display: flex; align-items: center; gap: 8px; flex: none; } .offer .pcon__ring { width: 22px; height: 22px; display: block; flex: none; } .offer .pcon__ring circle { fill: none; stroke-width: 2; } .offer .pcon__ring .pcon__trk { stroke: var(--pc-rule); } .offer .pcon__ring .pcon__arc { stroke: var(--pc-act); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 56.5; stroke-dashoffset: 56.5; transition: stroke-dashoffset .62s var(--pc-stage); } .offer .pcon__ms { font-family: var(--mono, ui-monospace, "JetBrains Mono", monospace); font-size: 12px; line-height: 1.4; letter-spacing: 0; font-weight: 510; font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; color: var(--pc-ink); } .offer .pcon__ms i { font-style: normal; color: var(--pc-ink-3); } .offer .pcon--clip { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%); } .offer .pcon__sunk { background: linear-gradient(var(--pc-sunk), var(--pc-sunk)); border: 1px solid var(--pc-rule); border-radius: 4px; box-shadow: inset 0 0 12px 0 rgba(18, 16, 38, .16); } .offer .pcon__pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 4px 8px 4px 6px; border: 1px solid var(--pc-rule); border-radius: 9999px; font-size: 12px; line-height: 14px; font-weight: 510; color: var(--pc-ink-2); } .offer .pcon__dot { position: relative; width: 16px; height: 16px; flex: none; } .offer .pcon__dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--pc-live); transform: translate(-50%, -50%); } .offer .pcon__val { flex: 1 0 0; min-width: 0; text-align: right; font-family: var(--mono, ui-monospace, "JetBrains Mono", monospace); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; color: var(--pc-ink-2); } @media (prefers-reduced-motion: reduce) { .offer .pcon__ring .pcon__arc { transition: none; } } .offer .pcon__lead { display: flex; align-items: baseline; gap: 9px; min-width: 0; } .offer .pcon__cap { font-family: var(--mono); font-size: 9.5px; line-height: 1; letter-spacing: .11em; text-transform: uppercase; color: var(--pc-ink-3); flex: none; } .offer .pcon__meta { font-family: var(--mono); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; color: var(--pc-ink-3); flex: none; } .offer .pcon__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .offer .sc__win, .offer .ac__win { display: flex; flex-direction: column; } .offer .sc__win > .sc__ord, .offer .sc__win > .sc__plot, .offer .sc__win > .sc__dest { margin-inline: 14px; } .offer .sc__win > .sc__ord { margin-top: 12px; } .offer .sc__win > .sc__dest { margin-bottom: 13px; } .offer .ac__win > .ac__seats { margin: 12px 14px 4px; } .offer .ac__win > .ac__more { margin: 0 14px 12px; } .offer .ig__win { position: relative; display: flex; flex-direction: column; } .offer .ig__win .ig__slab { inset: 44px 0 0 0; border-radius: 0 0 12px 12px; } .offer .sc__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px; border-radius: 6px; background: var(--pc-lift); border: 1px solid var(--pc-rule-2); color: var(--pc-ink-2); } .offer .sc__mk { width: 18px; height: 18px; flex: none; border-radius: 2px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 8%, transparent); } .offer .sc__mk svg { width: 11px; height: 11px; display: block; fill: var(--brand); } .offer .js-stage .ig__lane li, .offer .js-stage .ac__seat { opacity: 0; transform: translateY(10px); transition: opacity .42s ease, transform .5s var(--pc-stage); } .offer .js-stage.is-lit .ig__lane li, .offer .js-stage.is-lit .ac__seat { opacity: 1; transform: none; } .offer .js-stage.is-lit .ig__lane li:nth-child(1) { transition-delay: .10s; } .offer .js-stage.is-lit .ig__lane li:nth-child(2) { transition-delay: .20s; } .offer .js-stage.is-lit .ig__lane li:nth-child(3) { transition-delay: .30s; } .offer .js-stage.is-lit .ig__lane li:nth-child(4) { transition-delay: .40s; } .offer .js-stage.is-lit .ig__lane li:nth-child(5) { transition-delay: .50s; } .offer .js-stage.is-lit .ac__seat:nth-child(1) { transition-delay: .10s; } .offer .js-stage.is-lit .ac__seat:nth-child(2) { transition-delay: .22s; } .offer .js-stage.is-lit .ac__seat:nth-child(3) { transition-delay: .34s; } .offer .js-stage .ig__mk { transform: scale(.78); opacity: 0; transition: transform .46s var(--pc-stage), opacity .3s ease; } .offer .js-stage.is-lit .ig__mk { transform: none; opacity: 1; } .offer .js-stage.is-lit .ig__lane li:nth-child(1) .ig__mk { transition-delay: .16s; } .offer .js-stage.is-lit .ig__lane li:nth-child(2) .ig__mk { transition-delay: .26s; } .offer .js-stage.is-lit .ig__lane li:nth-child(3) .ig__mk { transition-delay: .36s; } .offer .js-stage.is-lit .ig__lane li:nth-child(4) .ig__mk { transition-delay: .46s; } .offer .js-stage.is-lit .ig__lane li:nth-child(5) .ig__mk { transition-delay: .56s; } @media (prefers-reduced-motion: reduce) { .offer .js-stage .ig__lane li, .offer .js-stage .ac__seat, .offer .js-stage .ig__mk { opacity: 1; transform: none; transition: none; } } .offer .pcon > .pcon__win { flex: 1 1 auto; width: 100%; min-width: 0; } .offer .sc__win > .sc__ord { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 12px 14px 13px; border-bottom: 1px solid var(--pc-rule-2); } .offer .sc__win > .sc__plot { margin-top: 13px; } .offer .ac__win .ac__seats { margin-top: 18px; } .offer .ac__win .ac__seats::before, .offer .ac__win .ac__seats::after, .offer .ac__win .ac__seat::before { content: none; } .offer .ac__win .ac__seat::after { top: -18px; width: 6px; height: 6px; } .offer .ig__win .ig__slab { background: linear-gradient(to right, rgba(38, 56, 107, .10) 1px, transparent 1px), linear-gradient(to bottom, rgba(38, 56, 107, .10) 1px, transparent 1px), var(--pc-sunk); background-size: 24px 24px, 24px 24px, auto; box-shadow: inset 0 0 14px 0 rgba(18, 16, 38, .13); } .offer #svc-05, .offer #svc-06, .offer #svc-07, .offer #svc-08 { --pc-face: #14161D; --pc-face-a: #191B23; --pc-face-b: #101218; --pc-lift: #23262F; --pc-lift-2: #2B2E38; --pc-plate-ring: rgba(255, 255, 255, .05); --pc-plate-ring-2: rgba(255, 255, 255, .09); --pc-sunk: #0E1017; --pc-rule: #2B2E3A; --pc-rule-2: #262933; --pc-ink: #EEF0F6; --pc-ink-2: #B3B8C7; --pc-ink-3: #7F8597; --pc-act: #AFC0F5; --pc-act-ink: #0F1220; --pc-spark: #C4B5FF; --pc-live: #6EE7D2; } .offer #svc-05 .qc, .offer #svc-06 .sc, .offer #svc-07 .ac, .offer #svc-08 .ig { --idb-wash: rgba(175, 192, 245, .14); } .offer #svc-05 .qc__go .ic { color: var(--pc-act-ink); } .offer #svc-05 .qw__sg { box-shadow: inset 0 0 0 1px var(--pc-rule), inset 0 1px 0 rgba(255, 255, 255, .06); } .offer #svc-05 .qw__sg.is-on { box-shadow: inset 0 0 0 1px var(--pc-act), inset 0 1px 0 rgba(255, 255, 255, .10); } .offer #svc-05 .qw__foot { box-shadow: inset 0 0 0 1px var(--pc-rule), inset 0 1px 0 rgba(255, 255, 255, .07); } .offer #svc-08 .ig__n.is-dn { color: #F2A08C; } .offer #svc-05 .qw__more { background: linear-gradient(180deg, rgba(20, 22, 29, 0) 0%, rgba(20, 22, 29, .86) 54%, var(--pc-face) 100%); } .offer #svc-05 .qw__edge { background: linear-gradient(90deg, rgba(20, 22, 29, 0) 0%, rgba(20, 22, 29, .9) 62%, var(--pc-face) 100%); } .offer #svc-06 .sc6__haze--l { background: linear-gradient(to right, var(--pc-face) 0%, rgba(20, 22, 29, 0) 100%); } .offer #svc-06 .sc6__haze--r { background: linear-gradient(to left, var(--pc-face) 0%, rgba(20, 22, 29, 0) 100%); } .offer #svc-08 .ig__st:hover { background-color: rgba(175, 192, 245, .10); } .offer #svc-08 .ig__tbl tbody tr:hover { background-color: rgba(175, 192, 245, .12); } .offer #svc-05 .qw__top { gap: 8px; flex: none; background: var(--pc-lift); } .offer #svc-05 .qw__crumb { flex: none; gap: 5px; align-items: center; } .offer #svc-05 .qw__crumb .pcon__name { font-size: 13px; } .offer #svc-05 .qw__sel { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 20px; padding: 0 5px 0 4px; border-radius: 5px; background: color-mix(in srgb, var(--pc-act) 9%, transparent); box-shadow: inset 0 0 0 1px var(--pc-rule); font-size: 10px; color: var(--pc-act); } .offer #svc-05 .qw__sel em { font-style: normal; color: var(--pc-ink-3); } .offer #svc-05 .qw__clr { font-size: 11px; line-height: 1; color: var(--pc-ink-3); padding-left: 1px; font-weight: 400; } .offer #svc-05 .qw__odo { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; line-height: 12px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--pc-act); } .offer #svc-05 .qw__dg { display: block; width: 1ch; height: 12px; overflow: hidden; } .offer #svc-05 .qw__dg > b { display: block; font-weight: inherit; transform: translateY(0); transition: transform .42s var(--pc-stage); } .offer #svc-05 .qw__dg > b > i { display: block; height: 12px; font-style: normal; } .offer #svc-05.is-lit .qw__dg > b { transform: translateY(calc(var(--d) * -12px)); } .offer #svc-05 .qw__go { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 21px; padding: 0 9px 0 7px; border: 0; border-radius: 5px; font: inherit; font-size: 10.5px; font-weight: 500; line-height: 1; cursor: default; background: var(--pc-act); color: var(--pc-act-ink); transition: background-color .18s var(--pc-ease); } .offer #svc-05 .qw__i--sc { width: 9px; height: 9px; } .offer #svc-05 .qw__i--sc path { fill: var(--pc-act); stroke: none; } .offer #svc-05 .qw__i--sd { width: 9px; height: 9px; opacity: 0; } .offer #svc-05 .qw__i--sd path { fill: var(--pc-ink-3); stroke: none; } .offer #svc-05 .qw__box { width: 12px; height: 12px; border-radius: 3px; flex: none; display: grid; place-items: center; transform: translateY(2px); background: var(--pc-face); box-shadow: inset 0 0 0 1px var(--pc-rule); transition: box-shadow .12s cubic-bezier(.4, 0, .2, 1); } .offer #svc-05 .qw__box svg { width: 9px; height: 9px; display: block; opacity: 0; } .offer #svc-05 .qw__box path { fill: none; stroke: var(--pc-act-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-05 .qw__box.is-on, .offer #svc-05 .qw__box.is-part { background: var(--pc-act); box-shadow: none; } .offer #svc-05 .qw__box.is-on svg, .offer #svc-05 .qw__box.is-part svg { opacity: 1; } .offer #svc-05 .qw__i--v { width: 10px; height: 10px; flex: none; } .offer #svc-05 .qw__i--v path { fill: var(--pc-live); stroke: none; } .offer #svc-05 .qw__i--li { width: 12px; height: 12px; } .offer #svc-05 .qw__i--li path { fill: var(--pc-act); stroke: none; opacity: .78; } .offer #svc-05 .qw__i--sr { width: 9px; height: 9px; } .offer #svc-05 .qw__i--sr path { stroke-width: 1.4; opacity: .8; } .offer #svc-05 .qw__i--ac { width: 12px; height: 12px; opacity: .34; transition: opacity .16s cubic-bezier(.4, 0, .2, 1); } @keyframes qwRow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .offer #svc-05 .qw__i { width: 12px; height: 12px; flex: none; display: block; } .offer #svc-05 .qw__i svg { width: 100%; height: 100%; display: block; } .offer #svc-05 .qw__i path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-05 .qw__i--f path { fill: currentColor; stroke: none; } .offer #svc-05 .qw__i--nav { width: 12px; height: 12px; opacity: .72; } .offer #svc-05 .qw__it.is-on .qw__i--nav { opacity: 1; } .offer #svc-05 .qw__i--t { width: 10px; height: 10px; margin-left: 3px; opacity: .5; transition: transform .2s cubic-bezier(.4, 0, .2, 1); } .offer #svc-05 .qw__i--c { width: 11px; height: 11px; opacity: .5; } .offer #svc-05 .qw__i--s { width: 11px; height: 11px; opacity: .55; } .offer #svc-05 .qw__i--x { width: 10px; height: 10px; opacity: .45; } .offer #svc-05 .qw__i--k { width: 12px; height: 12px; opacity: .4; } .offer #svc-05 .qw__i--a { width: 10px; height: 10px; color: var(--pc-act); } .offer #svc-05 .qw__i--f { width: 10px; height: 10px; opacity: .55; } .offer #svc-05 .qw__i--g { width: 11px; height: 11px; } .offer #svc-05 .qw__i--n { width: 11px; height: 11px; opacity: .6; } .offer #svc-05 .qw__i--p { width: 11px; height: 11px; opacity: .5; } .offer #svc-05 .qw__i--fi { width: 10px; height: 10px; opacity: .5; } .offer #svc-05 .qw__i--in { width: 11px; height: 11px; opacity: .45; } .offer #svc-05 .qw__i--in path { fill: var(--pc-ink-3); stroke: none; } .offer #svc-05 .qs { display: grid; grid-template-rows: 44px 446px; } .offer #svc-05 .qs__pill { gap: 6px; } .offer #svc-05 .qs__stms { font-family: var(--mono); font-weight: 600; color: var(--pc-ink); font-variant-numeric: tabular-nums; } .offer #svc-05 .qs[data-qs="wind"] .qs__stms, .offer #svc-05 .qs[data-qs="sweep"] .qs__stms { opacity: 0; width: 0; overflow: hidden; } .offer #svc-05 .qs__body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 256px; grid-template-rows: 214px minmax(0, 1fr); gap: 10px 12px; padding: 10px; } .offer #svc-05 .qs__ask { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: auto auto auto; gap: 12px; align-content: start; min-width: 0; } .offer #svc-05 .qs__rule { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 7px; } .offer #svc-05 .qs__chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 7px; border-radius: 6px; white-space: nowrap; font-family: var(--mono); font-size: 12px; line-height: 26px; background: var(--pc-lift); box-shadow: inset 0 0 0 1px var(--pc-plate-ring), inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 5px rgba(7, 9, 19, .22); opacity: .2; transform: translateY(3px); transition: opacity .3s ease, transform .34s var(--pc-stage), box-shadow .15s ease; transition-delay: calc(.05s + var(--i) * .08s); } .offer #svc-05 .qs:not([data-qs="idle"]) .qs__chip, .offer #svc-05.js-stage.is-lit .qs__chip { opacity: 1; transform: none; } .offer #svc-05 .qs__chip:hover { box-shadow: inset 0 0 0 1px var(--pc-act), inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 5px rgba(7, 9, 19, .22); } .offer #svc-05 .qs__chip:active { transform: scale(.97); } .offer #svc-05 .qs__ci { width: 12px; height: 12px; flex: none; color: var(--pc-ink-3); } .offer #svc-05 .qs__ci svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-05 .qs__chip em { font-style: normal; color: var(--pc-ink-2); } .offer #svc-05 .qs__chip b { font-weight: 500; color: var(--pc-ink); } .offer #svc-05 .qs__and { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-ink-3); } .offer #svc-05 .qs__act { display: flex; align-items: center; margin-left: auto; padding-left: 10px; } .offer #svc-05 .qs__go { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 11px; border: 0; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--pc-act-ink); background: var(--pc-act); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 10px rgba(7, 9, 19, .24); transition: transform .1s ease, box-shadow .15s ease, filter .15s ease; } .offer #svc-05 .qs__go:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 6px 14px rgba(7, 9, 19, .25); } .offer #svc-05 .qs__go:active { transform: scale(.96); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 5px rgba(7, 9, 19, .22); } .offer #svc-05 .qs__go .qw__i { width: 14px; height: 14px; } .offer #svc-05 .qs__go .qw__i svg { width: 14px; height: 14px; fill: currentColor; } .offer #svc-05 .qs__lab { margin: 0 0 4px; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--pc-ink-3); white-space: nowrap; } .offer #svc-05 .qs__lab b { color: var(--pc-ink); font-weight: 600; font-variant-numeric: tabular-nums; } .offer #svc-05 .qs__scan { position: relative; } .offer #svc-05 .qs__ticks { display: grid; grid-template-columns: repeat(120, minmax(0, 1fr)); gap: 1px; height: 12px; padding: 2px; border-radius: 3px; background: var(--pc-sunk); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .04); } .offer #svc-05 .qs__cur { position: absolute; top: 14px; left: calc(var(--qs-p, 0) * 100%); transform: translateX(-50%); z-index: 2; padding: 0 5px; height: 16px; font-family: var(--mono); font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--pc-ink); background: var(--pc-lift-2); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--pc-plate-ring-2), inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 5px rgba(7, 9, 19, .24); opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .22s ease; } .offer #svc-05 .qs[data-qs="sweep"] .qs__cur { opacity: 1; } .offer #svc-05 .qs__ok { width: 14px; height: 14px; display: grid; place-items: center; color: var(--pc-live); } .offer #svc-05 .qs__ok svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.2s + var(--r) * .05s); } .offer #svc-05 .qs[data-qs="done"] .qs__rows li .qs__ok svg { stroke-dashoffset: 0; } .offer #svc-05 .qs__fi { width: 12px; height: 12px; color: var(--pc-ink-3); margin-bottom: 1px; } .offer #svc-05 .qs__facts li b { transition: color .35s ease .12s; } .offer #svc-05 .qs[data-qs="done"] .qs__facts li b { color: var(--pc-act); } .offer #svc-05 .qs__fi svg { width: 12px; height: 12px; } .offer #svc-05 .qs__rti { display: inline-grid; place-items: center; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; color: var(--pc-ink-3); } .offer #svc-05 .qs__rti svg { width: 11px; height: 11px; } @keyframes qs-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } .offer #svc-05 .qs[data-qs="sweep"] .qs__rti, .offer #svc-05 .qs[data-qs="wind"] .qs__rti { animation: qs-breathe 1s ease-in-out infinite; color: var(--pc-act); } .offer #svc-05 .qs__ticks b { display: block; border-radius: 1px; background: var(--pc-sunk); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); transition: background .12s ease, box-shadow .12s ease; } .offer #svc-05 .qs__ticks b.is-on { background: var(--pc-act); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); } .offer #svc-05 .qs__ticks b.is-on:nth-child(5n) { background: var(--pc-spark); } .offer #svc-05 .qs__grid { display: grid; grid-template-columns: repeat(13, 8px); gap: 3px; } .offer #svc-05 .qs__grid b { display: block; width: 8px; height: 5px; border-radius: 1px; background: var(--pc-sunk); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); transition: background .25s ease; transition-delay: calc(var(--g) * 6ms); } .offer #svc-05 .qs[data-qs="done"] .qs__grid b { background: rgba(175, 192, 245, .45); } .offer #svc-05 .qs__timer { grid-column: 2; grid-row: 1; position: relative; border-radius: 9px; padding: 12px 12px 10px; display: grid; justify-items: center; align-content: start; gap: 4px; background: var(--pc-sunk); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .05); } .offer #svc-05 .qs__ring { position: relative; width: 104px; height: 104px; } .offer #svc-05 .qs__ring svg { position: absolute; inset: 0; width: 104px; height: 104px; overflow: visible; transform: rotate(-90deg); transform-origin: 50% 50%; transition: transform .62s var(--sc6-tick, cubic-bezier(.16, 1, .3, 1)); } .offer #svc-05 .qs[data-qs="wind"] .qs__ring svg { transform: rotate(-98deg); transition: transform .22s var(--pc-stage); } .offer #svc-05 .qs__ring::before { content: ""; position: absolute; left: 6px; top: 6px; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, .12), rgba(0, 0, 0, .38)); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .65), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 1px 0 rgba(255, 255, 255, .04); } .offer #svc-05 .qs__tk { stroke: rgba(255, 255, 255, .12); stroke-width: 1; } .offer #svc-05 .qs__tk--m { stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; } .offer #svc-05 .qs__trk { fill: none; stroke: rgba(0, 0, 0, .62); stroke-width: 7; } .offer #svc-05 .qs__arc { fill: none; stroke: var(--pc-act); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; filter: drop-shadow(0 3px 4px rgba(7, 9, 19, .6)); transition: stroke-dashoffset .62s var(--sc6-tick, cubic-bezier(.16, 1, .3, 1)); } .offer #svc-05 .qs__hi { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset .62s var(--sc6-tick, cubic-bezier(.16, 1, .3, 1)); } .offer #svc-05 .qs[data-qs="sweep"] .qs__arc, .offer #svc-05 .qs[data-qs="done"] .qs__arc, .offer #svc-05 .qs[data-qs="sweep"] .qs__hi, .offer #svc-05 .qs[data-qs="done"] .qs__hi { stroke-dashoffset: 0; } .offer #svc-05 .qs__ms { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin: 0; padding-top: 2px; font-family: var(--mono); } .offer #svc-05 .qs__ms b { display: block; height: 30px; font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--pc-ink); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); } .offer #svc-05 .qs__ms i { font-style: normal; font-size: 11px; line-height: 12px; letter-spacing: .1em; color: var(--pc-ink-3); margin-top: 5px; } .offer #svc-05 .qs__rt { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-3); } .offer #svc-05 .qs__facts { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .offer #svc-05 .qs__facts li { display: grid; justify-items: center; gap: 0; padding: 4px 4px 3px; min-width: 0; overflow: hidden; border-radius: 6px; background: var(--pc-lift); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--pc-plate-ring), 0 4px 10px rgba(7, 9, 19, .22); } .offer #svc-05 .qs__facts b { font-family: var(--mono); font-size: 15px; line-height: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--pc-ink); font-variant-numeric: tabular-nums; } .offer #svc-05 .qs__facts li:nth-child(2) b { color: var(--pc-act); } .offer #svc-05 .qs__facts em { font-style: normal; font-family: var(--mono); font-size: 11px; line-height: 13px; color: var(--pc-ink-3); } .offer #svc-05 .pcon--clip { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%); } .offer #svc-05 .qs__res { grid-column: 1 / -1; grid-row: 2; min-height: 0; border-radius: 8px 8px 0 0; padding: 4px 8px 0; margin-bottom: -10px; overflow: hidden; background: var(--pc-lift); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--pc-plate-ring), 0 6px 14px rgba(7, 9, 19, .25); font-family: var(--mono); font-size: 12px; } .offer #svc-05 .qs__hd, .offer #svc-05 .qs__rows li { display: grid; grid-template-columns: 30px 100px 116px 156px minmax(0, 1fr) 18px; align-items: center; gap: 0 6px; height: 20px; } .offer #svc-05 .qs__hd { height: 22px; border-bottom: 1px solid var(--pc-rule); color: var(--pc-ink-3); letter-spacing: .02em; } .offer #svc-05 .qs__hd span, .offer #svc-05 .qs__rows span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .offer #svc-05 .qs__rows { list-style: none; margin: 0; padding: 0; } .offer #svc-05 .qs__rows li { border-bottom: 1px solid var(--pc-rule-2); color: var(--pc-ink); opacity: 0; filter: blur(4px); transform: translateY(3px); transition: opacity .32s ease, filter .38s ease, transform .4s var(--pc-stage), background .15s ease; transition-delay: calc(var(--r) * .04s); } .offer #svc-05 .qs__rows li:last-child { border-bottom: 0; } .offer #svc-05 .qs[data-qs="done"] .qs__rows li { opacity: 1; filter: none; transform: none; } .offer #svc-05 .qs__rows li:hover { background: rgba(175, 192, 245, .06); } .offer #svc-05 .qs__av { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--pc-ink-2); background: var(--pc-sunk); box-shadow: inset 0 0 0 1px var(--pc-rule); font-style: normal; } .offer #svc-05 .qs__rows li span:nth-child(3) { color: var(--pc-ink-2); } .offer #svc-05 .qs__rows li span:nth-child(5) { color: var(--pc-ink-2); } @media (prefers-reduced-motion: reduce) { .offer #svc-05 .qs * { transition: none !important; animation: none !important; } .offer #svc-05 .qs__arc, .offer #svc-05 .qs__hi { stroke-dashoffset: 0; } .offer #svc-05 .qs__rows li, .offer #svc-05 .qs__chip { opacity: 1; filter: none; transform: none; } } .offer #svc-06 { --sc6-tick: linear(0, .1689, .3302, .4607, .5662, .6515, .7205, .7763, .8214, .8579, .8874, .9113, .9306, .9461, .9588, .969, .9772, .9839, .9893, .9936, .9971, 1); --sc6-slide: linear(0, .1763, .45, .6682, .8119, .8979, .9464, .9726, .9863, .9933, .9968, .9985, .9993, .9997, .9999, 1); --sc6-seg: 11.1111%; --sc6-ok: rgba(38, 56, 107, .38); min-height: 0; } @property --sc6-v { syntax: ""; inherits: true; initial-value: 0; } .offer #svc-06 .sc { display: block; align-self: stretch; } .offer #svc-06 .sc6__top { grid-column: 1 / -1; } .offer #svc-06 .sc6__topr { display: flex; align-items: center; gap: 10px; flex: none; } .offer #svc-06.js-stage.is-lit .pcon__arc { stroke-dashoffset: 30.9; } .offer #svc-06 .sc6__cap { display: flex; align-items: center; gap: 5px; margin: 0; height: 16px; font-family: var(--mono); font-size: 9.5px; line-height: 16px; letter-spacing: .11em; text-transform: uppercase; color: var(--pc-ink-3); } .offer #svc-06 .sc6__cap .ic { color: var(--pc-act); } .offer #svc-06 .sc6__dg { position: relative; display: inline-block; width: 1ch; height: 1.08em; overflow-x: visible; overflow-y: clip; --sc6-v: var(--v1); } .offer #svc-06 .sc6__dg > b { position: absolute; left: 0; right: 0; top: 0; height: 1.08em; display: block; line-height: 1.08em; text-align: center; font-weight: inherit; transform: translateY(calc((var(--i) - var(--sc6-v)) * 100%)); } .offer #svc-06 .sc6__sep { display: inline-block; width: .46ch; height: 1.08em; line-height: 1.08em; text-align: center; } .offer #svc-06.js-stage .sc6__dg { --sc6-v: var(--v0); transition: --sc6-v .42s var(--sc6-slide); transition-delay: calc(.5s + var(--k) * .05s); } .offer #svc-06.js-stage.is-lit .sc6__dg { --sc6-v: var(--v1); } .offer #svc-06 .sc6__link { grid-column: 3; grid-row: 2; position: relative; z-index: 4; } .offer #svc-06 .sc6__node { position: absolute; left: 4px; top: 187px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--pc-sunk); box-shadow: inset 0 0 0 1px var(--pc-rule); color: var(--pc-act); } .offer #svc-06 .sc6__node .ic { width: 17px; height: 17px; flex-basis: 17px; } .offer #svc-06 .sc6__node b, .offer #svc-06 .sc6__node em { position: absolute; left: -2px; font-style: normal; font-family: var(--mono); font-size: 9px; font-weight: 510; line-height: 12px; letter-spacing: -.01em; white-space: nowrap; } .offer #svc-06 .sc6__node b { top: calc(100% + 8px); color: var(--pc-ink); } .offer #svc-06 .sc6__node em { top: calc(100% + 20px); color: var(--pc-ink-3); } .offer #svc-06 .sc6__nb { position: absolute; left: 5px; right: 5px; bottom: 5px; height: 3px; border-radius: 2px; background: rgba(38, 56, 107, .16); overflow: hidden; } .offer #svc-06 .sc6__nb i { display: block; height: 100%; width: 100%; background: var(--pc-act); } .offer #svc-06.js-stage .sc6__nb i { width: 0; transition: width .9s var(--pc-stage) .3s; } .offer #svc-06.js-stage.is-lit .sc6__nb i { width: 100%; } .offer #svc-06.js-stage .sc6__node { transform: scale(.86); opacity: 0; transition: transform .34s var(--pc-stage), opacity .3s ease; transition-delay: .18s; } .offer #svc-06.js-stage.is-lit .sc6__node { transform: none; opacity: 1; } .offer #svc-06 .sc6__beams { position: absolute; left: 52px; right: -10px; top: 0; bottom: 0; overflow: visible; } .offer #svc-06 .sc6__bp { fill: none; stroke: var(--pc-rule); stroke-width: 1.4; stroke-opacity: .85; stroke-linecap: round; } .offer #svc-06 .sc6__bl { fill: none; stroke: url(#sc6-beam); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 30 100; stroke-dashoffset: 130; animation: sc6-beam var(--d) cubic-bezier(.16, 1, .3, 1) var(--dl) infinite; } @keyframes sc6-beam { from { stroke-dashoffset: 130 } to { stroke-dashoffset: -30 } } .offer #svc-06 .sc6__out { grid-column: 4; grid-row: 2; position: relative; z-index: 2; margin-left: -22px; width: calc(100% + 34px); padding: 10px 0 0 24px; border-left: 1px solid var(--pc-rule-2); } .offer #svc-06 .sc6__more { margin-left: auto; margin-right: 34px; padding: 1px 5px; border-radius: 3px; font-size: 8.5px; letter-spacing: .06em; color: var(--pc-ink-3); background: var(--pc-sunk); } .offer #svc-06 .sc6__tiles { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .offer #svc-06 .sc6__tile { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; height: 72px; padding: 0 12px 8px 10px; border-radius: 8px; background: var(--pc-lift); box-shadow: inset 0 0 0 1px var(--pc-rule-2); transition: box-shadow .16s var(--pc-ease), background-color .16s var(--pc-ease); } .offer #svc-06 .sc6__tile:hover { box-shadow: inset 0 0 0 1px var(--pc-act); background: var(--pc-face-a); } .offer #svc-06 .sc6__tb { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .offer #svc-06 .sc6__tb b { font-size: 14px; font-weight: 560; letter-spacing: -.012em; color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .offer #svc-06 .sc6__tb em { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; color: var(--pc-ink-3); font-variant-numeric: tabular-nums; } .offer #svc-06 .sc6__sg { position: absolute; left: 38px; top: 10px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--pc-face); box-shadow: inset 0 0 0 1px var(--pc-rule); color: var(--pc-act); } .offer #svc-06 .sc6__sg svg { width: 10px; height: 10px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-06 .sc6__meter { position: absolute; left: 66px; bottom: 9px; height: 5px; display: flex; gap: 4px; } .offer #svc-06 .sc6__meter i { display: block; width: 13px; height: 5px; border-radius: 1px; background: var(--pc-act); opacity: .34; transform-origin: left center; transition: opacity .3s ease, transform .44s var(--pc-stage); } .offer #svc-06 .sc6__tile:hover .sc6__meter i { opacity: .62; } .offer #svc-06.js-stage .sc6__meter i { opacity: 0; transform: scaleX(.1); transition-delay: calc(.86s + var(--i) * .1s + var(--t) * .045s); } .offer #svc-06.js-stage.is-lit .sc6__meter i { opacity: .34; transform: none; } .offer #svc-06.js-stage .sc6__tile .sc__mk { transform: scale(.78); opacity: 0; transition: transform .46s var(--pc-stage), opacity .3s ease; transition-delay: calc(.34s + var(--i) * .09s); } .offer #svc-06.js-stage.is-lit .sc6__tile .sc__mk { transform: none; opacity: 1; } .offer #svc-06 .sc6__haze { position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; z-index: 6; } .offer #svc-06 .sc6__haze--r { right: 0; background: linear-gradient(to left, var(--pc-face) 0%, rgba(196, 208, 242, 0) 100%); } .offer #svc-06 .sc6__haze i { position: absolute; inset: 0; display: block; -webkit-backdrop-filter: blur(calc(var(--l) * .25px)); backdrop-filter: blur(calc(var(--l) * .25px)); --p0: calc(var(--l) * var(--sc6-seg)); --p1: calc((var(--l) + 1) * var(--sc6-seg)); --p2: calc((var(--l) + 2) * var(--sc6-seg)); --p3: calc((var(--l) + 3) * var(--sc6-seg)); } .offer #svc-06 .sc6__haze--r i { -webkit-mask-image: linear-gradient(90deg, transparent var(--p0), #000 var(--p1), #000 var(--p2), transparent var(--p3)); mask-image: linear-gradient(90deg, transparent var(--p0), #000 var(--p1), #000 var(--p2), transparent var(--p3)); } @media (prefers-reduced-motion: reduce) { .offer #svc-06.js-stage .sc6__dg { --sc6-v: var(--v1); transition: none; } .offer #svc-06.js-stage .sc6__meter i, .offer #svc-06.js-stage .sc6__nb i { width: 100%; transition: none; } } .offer #svc-06 .sc6__foot { position: absolute; left: 20px; right: 34px; bottom: 12px; display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--mono); font-size: 9.5px; color: var(--pc-ink-3); } .offer #svc-06 .sc6__foot b { color: var(--pc-ink-2); font-weight: 600; font-variant-numeric: tabular-nums; } .offer #svc-06 .sc6__foot em { font-style: normal; letter-spacing: .05em; } .offer #svc-06 .sc6__fb { flex: 1 1 auto; min-width: 0; height: 3px; margin-left: 2px; border-radius: 2px; background: rgba(38, 56, 107, .12); overflow: hidden; } .offer #svc-06 .sc6__fb i { display: block; height: 100%; width: var(--w); background: var(--pc-act); opacity: .5; } .offer #svc-06.js-stage .sc6__fb i { width: 0; transition: width 1.1s var(--sc6-tick) 1.2s; } .offer #svc-06.js-stage.is-lit .sc6__fb i { width: var(--w); } @media (prefers-reduced-motion: reduce) { .offer #svc-06.js-stage .sc6__fb i { width: var(--w); transition: none; } } @media (prefers-reduced-motion: reduce) { .offer #svc-06.js-stage .sc6__meter i { opacity: .34; transform: none; transition: none; } } .offer #svc-06 .sc6__tile .sc__mk { width: 36px; height: 36px; border-radius: 7px; background: color-mix(in srgb, var(--brand) 11%, transparent); } .offer #svc-06 .sc6__tile .sc__mk svg { width: 22px; height: 22px; } .offer #svc-06 { --sc6-warn: #F2B08C; } .offer #svc-06 .sc__win { display: grid; grid-template-columns: minmax(0, 1fr) 96px 236px; grid-template-rows: 44px 446px; align-items: stretch; } .offer #svc-06 .sc6__link { grid-column: 2; grid-row: 2; } .offer #svc-06 .sc6__out { grid-column: 3; grid-row: 2; } .offer #svc-06 .sc6__pipe { grid-column: 1; grid-row: 2; position: relative; z-index: 3; overflow: hidden; border-right: 1px solid var(--pc-rule-2); } .offer #svc-06 .sc6__st { position: absolute; left: 0; right: 12px; padding-left: 32px; } .offer #svc-06 .sc6__st--rule { top: 8px; height: 150px; } .offer #svc-06 .sc6__st--run { top: 168px; bottom: 0; } .offer #svc-06 .sc6__sp { position: absolute; left: 14px; top: 24px; width: 2px; height: 157px; border-radius: 1px; background: var(--pc-rule); z-index: 1; } .offer #svc-06 .sc6__sf { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 1px; background: linear-gradient(180deg, var(--pc-act), var(--pc-spark)); box-shadow: 0 0 8px rgba(175, 192, 245, .45); transform-origin: top; transform: scaleY(0); transition: transform .35s ease; } .offer #svc-06 .sc6.is-run .sc6__sf { transform: none; transition: transform 2.6s var(--sc6-tick); } .offer #svc-06 .sc6__nd { position: absolute; left: 10px; width: 10px; height: 10px; border-radius: 50%; z-index: 2; background: var(--pc-face); box-shadow: inset 0 0 0 2px var(--pc-rule); transition: box-shadow .3s ease, background .3s ease; } .offer #svc-06 .sc6__st--rule .sc6__nd { top: 11px; } .offer #svc-06 .sc6__st--run .sc6__nd { top: 8px; } .offer #svc-06 .sc6.is-run .sc6__nd { background: var(--pc-act); box-shadow: inset 0 0 0 2px var(--pc-act), 0 0 0 3px rgba(175, 192, 245, .18); transition-delay: calc(.2s + (var(--n) - 1) * 3.2s); } .offer #svc-06 .sc6__rail { position: relative; } .offer #svc-06 .sc6__rail::before, .offer #svc-06 .sc6__rail::after { content: ""; position: absolute; left: 15px; right: -12px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--pc-rule); } .offer #svc-06 .sc6__rail::after { background: linear-gradient(90deg, var(--pc-spark), var(--pc-act)); box-shadow: 0 0 8px rgba(175, 192, 245, .4); transform-origin: left; transform: scaleX(0); transition: transform .3s ease; } .offer #svc-06 .sc6.is-run .sc6__rail::after { transform: none; transition: transform 1.2s var(--sc6-tick) 5s; } .offer #svc-06 .sc6__rail > span { position: relative; z-index: 2; } .offer #svc-06 .sc6__rail > .sc6__lbl { background: var(--pc-face); padding-right: 6px; } .offer #svc-06 .sc6__pk { position: absolute; left: 10px; top: 19px; width: 10px; height: 10px; border-radius: 3px; z-index: 1; background: var(--pc-spark); opacity: 0; box-shadow: 0 0 0 2px rgba(196, 181, 255, .25), 0 0 12px rgba(196, 181, 255, .7); } .offer #svc-06 .sc6.is-run .sc6__pk { animation: sc6-pk 5.9s var(--pc-ease) .8s both; } @keyframes sc6-pk { 0% { left: 10px; top: 19px; opacity: 0; } 6% { opacity: 1; } 44% { left: 10px; top: 176px; } 75% { left: 10px; top: 176px; } 97% { left: calc(100% - 6px); top: 176px; opacity: 1; } 100% { left: calc(100% - 6px); top: 176px; opacity: 0; } } .offer #svc-06 .sc6__cap { display: flex; align-items: center; gap: 8px; margin: 0; height: 18px; white-space: nowrap; font-family: var(--mono); font-size: 12px; line-height: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-3); } .offer #svc-06 .sc6__lbl::before { content: attr(data-n); margin-right: 7px; color: var(--pc-act); font-weight: 600; letter-spacing: .06em; } .offer #svc-06 .sc6__lock { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; height: 16px; border-radius: 3px; background: var(--pc-sunk); box-shadow: inset 0 0 0 1px var(--pc-rule); color: var(--pc-ink-2); letter-spacing: .08em; cursor: default; transition: box-shadow .15s ease, color .15s ease, transform .1s ease; } .offer #svc-06 .sc6__lock .ic { width: 11px; height: 11px; flex-basis: 11px; color: var(--pc-act); } .offer #svc-06 .sc6__lock:hover { box-shadow: inset 0 0 0 1px var(--pc-act); color: var(--pc-ink); } .offer #svc-06 .sc6__lock:active { transform: scale(.96); } .offer #svc-06 .sc6__when { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; height: 22px; white-space: nowrap; font-family: var(--mono); font-size: 13px; line-height: 22px; } .offer #svc-06 .sc6__when b { color: var(--pc-act); font-weight: 600; letter-spacing: -.01em; } .offer #svc-06 .sc6__when em { font-style: normal; color: var(--pc-ink-3); } .offer #svc-06 .sc6__when em .sc6__cd { color: var(--pc-ink-2); font-variant-numeric: tabular-nums; } .offer #svc-06 .sc6__ring { position: relative; width: 20px; height: 20px; flex: none; } .offer #svc-06 .sc6__ring svg { position: absolute; inset: 0; width: 20px; height: 20px; overflow: visible; } .offer #svc-06 .sc6__ring .sc6__dt { fill: none; stroke: var(--pc-rule); stroke-width: 3; } .offer #svc-06 .sc6__ring .sc6__gone { fill: none; stroke: var(--pc-act); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset .3s ease; } .offer #svc-06 .sc6.is-run .sc6__ring .sc6__gone { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--sc6-tick) .6s; } .offer #svc-06 .sc6__ring .sc6__tk { fill: var(--pc-spark); } .offer #svc-06 .sc6__pred { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 46px; grid-auto-rows: 24px; gap: 5px 8px; } .offer #svc-06 .sc6__pred li { grid-column: 1; } .offer #svc-06 .sc6__pred .sc6__more { grid-column: 2; grid-row: 3; padding: 0; } .offer #svc-06 .sc6__pred li { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); align-items: center; gap: 0 6px; height: 24px; padding: 0 8px; border-radius: 5px; min-width: 0; background: var(--pc-lift); box-shadow: inset 0 0 0 1px var(--pc-plate-ring), inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 5px rgba(7, 9, 19, .22); font-family: var(--mono); font-size: 12px; line-height: 24px; white-space: nowrap; opacity: .18; transform: translateX(-4px); transition: opacity .3s ease, transform .34s var(--pc-stage), box-shadow .15s ease; } .offer #svc-06 .sc6.is-run .sc6__pred li { opacity: 1; transform: none; transition-delay: calc(.3s + var(--i) * .16s); } .offer #svc-06 .sc6__pred li:hover { box-shadow: inset 0 0 0 1px var(--pc-act), inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 5px rgba(7, 9, 19, .22); } .offer #svc-06 .sc6__pred li:active { transform: scale(.97); } .offer #svc-06 .sc6__pred .ic { width: 12px; height: 12px; flex-basis: 12px; color: var(--pc-ink-3); transition: color .15s ease; } .offer #svc-06 .sc6__pred li:hover .ic { color: var(--pc-act); } .offer #svc-06 .sc6__pred em { font-style: normal; color: var(--pc-ink-2); } .offer #svc-06 .sc6__pred b { font-weight: 500; color: var(--pc-ink); overflow: hidden; text-overflow: ellipsis; } .offer #svc-06 .sc6__more { grid-template-columns: 1fr; text-align: center; color: var(--pc-ink-3); } .offer #svc-06 .sc6__more b { color: var(--pc-ink-2); overflow: visible; } .offer #svc-06 .sc6__st--run .sc6__cap { height: 26px; line-height: 26px; } .offer #svc-06 .sc6__pkl { margin-left: auto; padding: 0 8px; height: 20px; border-radius: 10px; letter-spacing: 0; text-transform: none; font-size: 12px; line-height: 20px; font-weight: 600; color: var(--pc-act-ink); background: var(--pc-act); cursor: default; transition: background .15s ease, transform .1s ease; } .offer #svc-06 .sc6__pkl:hover { background: var(--pc-spark); } .offer #svc-06 .sc6__pkl:active { transform: scale(.96); } .offer #svc-06 .sc6__body { margin-top: 10px; } .offer #svc-06 .sc6__stat { margin: 0; font-family: var(--mono); font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; color: var(--pc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .offer #svc-06 .sc6__dg { width: .62em; } .offer #svc-06 .sc6__sep { width: .6em; } .offer #svc-06.js-stage.is-lit .sc6:not(.is-run) .sc6__dg { --sc6-v: var(--v0); } .offer #svc-06.js-stage.is-lit .sc6.is-run .sc6__dg { --sc6-v: var(--v1); transition-delay: calc(3.8s + var(--k) * .06s); } .offer #svc-06 .sc6__dl { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; white-space: nowrap; font-family: var(--mono); font-size: 13px; line-height: 16px; color: var(--pc-ink-2); } .offer #svc-06 .sc6__dl b { color: var(--pc-live); font-weight: 600; } .offer #svc-06 .sc6__dl .ic { width: 12px; height: 12px; flex-basis: 12px; color: var(--pc-live); } .offer #svc-06 .sc6__hist { position: absolute; left: 32px; right: 12px; top: 106px; height: 92px; } .offer #svc-06 .sc6__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; margin: 0; padding: 0; list-style: none; } .offer #svc-06 .sc6__bars li { position: relative; flex: 1 1 0; min-width: 0; height: 100%; cursor: default; } .offer #svc-06 .sc6__bars li i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 1px 1px 0 0; background: var(--pc-ink-3); opacity: .55; transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--pc-stage), opacity .2s ease; } .offer #svc-06 .sc6.is-run .sc6__bars li i { transform: none; transition-delay: calc(4s + var(--i) * .04s); } .offer #svc-06 .sc6__bars li s { position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--pc-rule); } .offer #svc-06 .sc6__scale { position: absolute; left: 0; right: 0; bottom: -9px; height: 3px; pointer-events: none; } .offer #svc-06 .sc6__scale b { position: absolute; left: calc(var(--k) * 10%); width: 3px; height: 3px; margin-left: -1px; border-radius: 50%; background: var(--pc-rule); opacity: .9; } .offer #svc-06 .sc6__bars li.is-late i { background: var(--sc6-warn); opacity: .7; } .offer #svc-06 .sc6__bars li.is-partial i { background: repeating-linear-gradient(180deg, var(--pc-ink-3) 0 3px, transparent 3px 5px); opacity: .6; } .offer #svc-06 .sc6__bars li.is-now i { background: linear-gradient(180deg, var(--pc-spark), var(--pc-act)); opacity: 1; } .offer #svc-06 .sc6__bars li:hover i { opacity: 1; } .offer #svc-06 .sc6__bars li::after { content: attr(data-t); position: absolute; left: 50%; bottom: 100%; margin-bottom: 4px; padding: 2px 6px; border-radius: 3px; font-family: var(--mono); font-size: 12px; line-height: 14px; white-space: nowrap; color: var(--pc-ink); background: var(--pc-lift); box-shadow: inset 0 0 0 1px var(--pc-plate-ring-2), 0 4px 10px rgba(7, 9, 19, .3); opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .15s ease, transform .2s var(--pc-stage); z-index: 5; } .offer #svc-06 .sc6__bars li:hover::after { opacity: 1; transform: translate(-50%, 0); } .offer #svc-06 .sc6__bars li:nth-child(-n+6)::after { left: 0; transform: translate(0, 4px); } .offer #svc-06 .sc6__bars li:nth-child(-n+6):hover::after { transform: none; } .offer #svc-06 .sc6__bars li:nth-last-child(-n+6)::after { left: auto; right: 0; transform: translate(0, 4px); } .offer #svc-06 .sc6__bars li:nth-last-child(-n+6):hover::after { transform: none; } .offer #svc-06 .sc6__weeks { position: absolute; left: 32px; right: 12px; top: 208px; height: 6px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(52, minmax(0, 1fr)); gap: 2px; } .offer #svc-06 .sc6__weeks li { border-radius: 1px; background: var(--pc-sunk); box-shadow: inset 0 0 0 1px var(--pc-rule-2); transition: background .3s ease; } .offer #svc-06 .sc6.is-run .sc6__weeks li.is-run { background: var(--pc-act); opacity: .5; transition-delay: calc(4.2s + var(--i) * .02s); } .offer #svc-06 .sc6__axis { position: absolute; left: 32px; right: 12px; top: 222px; margin: 0; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--pc-ink-3); white-space: nowrap; } .offer #svc-06 .sc6__axis span:nth-child(2) { color: var(--pc-ink-2); } .offer #svc-06 .sc6__node { top: 159px; } .offer #svc-06 .sc6__node b, .offer #svc-06 .sc6__node em { left: -4px; right: -4px; text-align: center; white-space: nowrap; font-size: 12px; line-height: 14px; } .offer #svc-06 .sc6__node b { top: calc(100% + 6px); } .offer #svc-06 .sc6__node em { top: calc(100% + 20px); } .offer #svc-06.js-stage.is-lit .sc6__nb i { width: 0; transition: width .9s var(--pc-stage) 0s; } .offer #svc-06.js-stage.is-lit .sc6.is-run .sc6__nb i { width: 100%; transition: width 1.2s var(--pc-stage) 6.6s; } .offer #svc-06 .sc6__dv { position: absolute; left: 0; top: 0; width: 24px; height: 17px; border-radius: 4px; z-index: 6; background: var(--pc-act); box-shadow: 0 0 0 2px rgba(175, 192, 245, .22), 0 8px 16px rgba(7, 9, 19, .45), inset 0 1px 0 rgba(255, 255, 255, .35); display: grid; align-content: center; gap: 2px; padding: 0 5px; opacity: 0; offset-rotate: 0deg; offset-distance: 0%; offset-anchor: center; } .offer #svc-06 .sc6__dv i { display: block; height: 2px; border-radius: 1px; background: var(--pc-act-ink); opacity: .75; } .offer #svc-06 .sc6__dv i:nth-child(2) { width: 70%; } .offer #svc-06 .sc6__dv i:nth-child(3) { width: 85%; } .offer #svc-06 .sc6.is-delivering .sc6__dv { animation: sc6-fly 1.5s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(var(--i) * .38s); } @keyframes sc6-fly { 0% { offset-distance: 0%; opacity: 0; transform: scale(.6); } 10% { opacity: 1; transform: scale(1.04); } 86% { opacity: 1; transform: scale(.94); } 100% { offset-distance: 100%; opacity: 0; transform: scale(.5); } } .offer #svc-06 .sc6__out { display: flex; flex-direction: column; } .offer #svc-06 .sc6__tiles { flex: none; } .offer #svc-06 .sc6__tile { height: 70px; transition: box-shadow .3s ease, background-color .3s ease, transform .3s var(--pc-stage); } .offer #svc-06 .sc6__tile.is-landed { box-shadow: inset 0 0 0 1px var(--pc-act), 0 6px 14px rgba(7, 9, 19, .28); background: var(--pc-face-a); } .offer #svc-06 .sc6__tile.is-landed .sc__mk { animation: sc6-land .42s var(--pc-stage); } @keyframes sc6-land { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } .offer #svc-06 .sc6__tb em { opacity: 0; transform-origin: left center; } .offer #svc-06 .sc6__tile.is-landed .sc6__tb em { animation: sc6-stamp .42s var(--pc-stage) .06s both; } @keyframes sc6-stamp { 0% { opacity: 0; transform: scale(1.6); filter: blur(2px); } 55% { opacity: 1; transform: scale(.96); filter: none; } 100% { opacity: 1; transform: scale(1); } } .offer #svc-06 .sc6.is-still .sc6__tb em, .offer #svc-06 .sc6.is-still .sc6__tile.is-landed .sc6__tb em { opacity: 1; animation: none; } .offer #svc-06 .sc6__sg { opacity: 0; transform: scale(.6); transition: opacity .3s ease .1s, transform .3s var(--pc-stage) .1s; } .offer #svc-06 .sc6__tile.is-landed .sc6__sg { opacity: 1; transform: none; } .offer #svc-06.js-stage.is-lit .sc6__meter i { opacity: 0; transform: scaleX(.1); transition-delay: 0s; } .offer #svc-06.js-stage.is-lit .sc6__tile.is-landed .sc6__meter i { opacity: .34; transform: none; transition-delay: calc(var(--t) * .07s); } .offer #svc-06 .sc6__foot { position: static; margin: 6px 34px 0 -4px; flex: none; } .offer #svc-06.js-stage.is-lit .sc6__fb i { width: 0; transition: width .3s ease; } .offer #svc-06.js-stage.is-lit .sc6.is-delivering .sc6__fb i { width: var(--w); transition: width 1.1s var(--sc6-tick) 3.2s; } .offer #svc-06 .sc6.is-still * { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; } @media (prefers-reduced-motion: reduce) { .offer #svc-06 .sc6 * { transition: none !important; animation: none !important; } .offer #svc-06 .sc6__dv { opacity: 0; } } @media (max-width: 1540px) { .offer #svc-06 .sc6__axis span:nth-child(2) { display: none; } } .offer #svc-07 .ac { display: block; align-self: stretch; } .offer #svc-07 .acl { display: grid; grid-template-columns: 186px minmax(0, 1fr); grid-template-rows: 44px 446px; align-items: stretch; --acl-row: 29px; --acl-head: 24px; } .offer #svc-07 .acl__top { grid-column: 1 / -1; } .offer #svc-07 .acl__topr { display: flex; align-items: center; gap: 12px; flex: none; } .offer #svc-07 .acl__stat { font-family: var(--mono); font-size: 12px; color: var(--pc-ink-3); white-space: nowrap; } .offer #svc-07 .acl__stat b { color: var(--pc-ink); font-weight: 600; font-variant-numeric: tabular-nums; } .offer #svc-07 .acl__seats { grid-column: 1; grid-row: 2; list-style: none; margin: 0; padding: 8px 8px 8px 10px; display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; border-right: 1px solid var(--pc-rule-2); background: var(--pc-sunk); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .03); } .offer #svc-07 .acl__seat { position: relative; z-index: 4; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 3px 7px; align-content: start; padding: 9px 9px 8px; border-radius: 7px; outline: none; cursor: default; background: var(--pc-lift); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--pc-plate-ring), 0 6px 14px rgba(7, 9, 19, .25); opacity: .72; transform: scale(.985); transition: box-shadow .48s var(--pc-stage), background .3s ease, transform .48s var(--pc-stage), opacity .4s ease; } .offer #svc-07 .acl__seat:hover, .offer #svc-07 .acl__seat:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--pc-rule), 0 8px 18px rgba(7, 9, 19, .3); opacity: 1; } .offer #svc-07 .acl__seat:active { transform: scale(.975); } .offer #svc-07 .acl[data-seat="1"] .acl__seat[data-seat="1"], .offer #svc-07 .acl[data-seat="2"] .acl__seat[data-seat="2"], .offer #svc-07 .acl[data-seat="3"] .acl__seat[data-seat="3"] { opacity: 1; transform: translateY(-2px) scale(1.025); z-index: 5; background: var(--pc-lift-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px var(--pc-act), 0 14px 28px rgba(7, 9, 19, .38), 0 0 0 3px rgba(175, 192, 245, .1); } .offer #svc-07 .acl[data-seat="3"] .acl__seat[data-seat="3"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px var(--sc7-warn, #F2B08C), 0 14px 28px rgba(7, 9, 19, .38), 0 0 0 3px rgba(242, 176, 140, .1); } .offer #svc-07 .acl__av { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-sunk); box-shadow: inset 0 0 0 1px var(--pc-rule); color: var(--pc-ink-2); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; transition: box-shadow .3s ease, color .3s ease; } .offer #svc-07 .acl__av i { font-style: normal; } .offer #svc-07 .acl[data-seat="1"] .acl__seat[data-seat="1"] .acl__av, .offer #svc-07 .acl[data-seat="2"] .acl__seat[data-seat="2"] .acl__av, .offer #svc-07 .acl[data-seat="3"] .acl__seat[data-seat="3"] .acl__av { box-shadow: inset 0 0 0 1.5px var(--pc-act); color: var(--pc-act); } .offer #svc-07 .acl__who { display: grid; gap: 1px; min-width: 0; } .offer #svc-07 .acl__who b { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; } .offer #svc-07 .acl[data-seat="1"] .acl__seat[data-seat="1"] .acl__who b, .offer #svc-07 .acl[data-seat="2"] .acl__seat[data-seat="2"] .acl__who b { color: var(--pc-act); } .offer #svc-07 .acl[data-seat="3"] .acl__seat[data-seat="3"] .acl__who b { color: var(--sc7-warn, #F2B08C); } .offer #svc-07 .acl__line { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1px 5px; margin-top: 4px; min-width: 0; white-space: nowrap; font-family: var(--mono); font-size: 13px; line-height: 18px; } .offer #svc-07 .acl__line em { flex: 1 1 100%; min-width: 0; padding-left: 17px; } .offer #svc-07 .acl__line svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--pc-act); } .offer #svc-07 .acl__line--full svg { fill: currentColor; stroke: none; } .offer #svc-07 .acl__line b { font-weight: 600; color: var(--pc-act); letter-spacing: -.01em; } .offer #svc-07 .acl__line em { font-style: normal; color: var(--pc-ink-2); overflow: hidden; text-overflow: ellipsis; } .offer #svc-07 .acl__line--ended svg, .offer #svc-07 .acl__line--ended b { color: var(--sc7-warn, #F2B08C); } .offer #svc-07 .acl__seat::after { content: ""; position: absolute; left: 100%; top: 50%; width: 38px; height: 2px; margin-top: -1px; border-radius: 1px; background: linear-gradient(90deg, var(--pc-act), rgba(175, 192, 245, .55)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--pc-stage); } .offer #svc-07 .acl[data-seat="1"] .acl__seat[data-seat="1"]::after, .offer #svc-07 .acl[data-seat="2"] .acl__seat[data-seat="2"]::after, .offer #svc-07 .acl[data-seat="3"] .acl__seat[data-seat="3"]::after { transform: none; transition-delay: .2s; } .offer #svc-07 .acl[data-seat="3"] .acl__seat[data-seat="3"]::after { background: linear-gradient(90deg, var(--sc7-warn, #F2B08C), rgba(242, 176, 140, .55)); } .offer #svc-07 .acl__th--s svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-07 .acl__mk { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -1px; margin-right: 5px; } .offer #svc-07 .acl__mk--lock { display: block; width: 16px; height: 16px; margin: 0 auto 6px; stroke-width: 1.4; } .offer #svc-07 .acl__who em { font-style: normal; font-family: var(--mono); font-size: 12px; line-height: 14px; color: var(--pc-ink-3); white-space: nowrap; } .offer #svc-07 .acl__meter { grid-column: 1 / -1; display: flex; gap: 3px; height: 6px; margin-top: 6px; } .offer #svc-07 .acl__meter i { flex: 1 1 0; border-radius: 2px; background: var(--pc-sunk); box-shadow: inset 0 0 0 1px var(--pc-rule-2); position: relative; overflow: hidden; } .offer #svc-07 .acl__meter i::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--pc-act); border-radius: 2px; } .offer #svc-07 .acl__meter i.is-on::after { width: 100%; } .offer #svc-07 .acl__meter i.is-part::after { width: calc(var(--p) * 100%); } .offer #svc-07 .acl__table { grid-column: 2; grid-row: 2; position: relative; margin: 8px 8px 8px 0; padding: 6px 0 0 8px; min-width: 0; overflow: hidden; border-radius: 8px; background: var(--pc-lift); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--pc-plate-ring), 0 8px 18px rgba(7, 9, 19, .28); } .offer #svc-07 .acl__cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; height: 20px; font-family: var(--mono); font-size: 12px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-3); white-space: nowrap; } .offer #svc-07 .acl__shown { text-transform: none; letter-spacing: 0; } .offer #svc-07 .acl__shown { display: inline-flex; align-items: baseline; gap: 5px; } .offer #svc-07 .acl__shown b { color: var(--pc-ink); font-weight: 700; font-size: 19px; line-height: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .offer #svc-07 .acl__grid { position: relative; margin-top: 4px; font-family: var(--mono); font-size: 12px; } .offer #svc-07 .acl__tr { display: grid; grid-template-columns: 18px 116px 116px 55px 76px 69px 26px; align-items: center; height: var(--acl-row); } .offer #svc-07 .acl__tr--h { height: var(--acl-head); border-bottom: 1px solid var(--pc-rule); } .offer #svc-07 .acl__th { position: relative; display: flex; align-items: center; gap: 4px; padding: 0 4px 0 15px; min-width: 0; height: 100%; font-size: 12px; letter-spacing: .02em; color: var(--pc-ink-2); white-space: nowrap; overflow: hidden; } .offer #svc-07 .acl__th b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .offer #svc-07 .acl__th--n, .offer #svc-07 .acl__th--s { color: var(--pc-ink-3); justify-content: center; padding: 0; } .offer #svc-07 .acl__th { transition: color .25s ease; } .offer #svc-07 .acl__th:hover { color: var(--pc-ink); } .offer #svc-07 .acl__sig { position: absolute; left: 2px; top: 50%; margin-top: -5px; width: 10px; height: 10px; color: var(--pc-ink-3); transition: opacity .3s ease; } .offer #svc-07 .acl__sig svg, .offer #svc-07 .acl__lk svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-07 .acl__lk { position: absolute; left: 1px; top: 50%; margin-top: -6px; width: 12px; height: 12px; color: var(--sc7-warn, #F2B08C); opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s var(--pc-stage); } .offer #svc-07 .acl__td { position: relative; padding: 0 4px; min-width: 0; color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s ease, color .3s ease; font-variant-numeric: tabular-nums; } .offer #svc-07 .acl__hatch { position: absolute; inset: 3px 2px; border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: repeating-linear-gradient(135deg, rgba(127, 133, 151, .38) 0 1.5px, transparent 1.5px 5px); } .offer #svc-07 .acl[data-seat="2"] .acl__td[data-c="4"] .acl__hatch, .offer #svc-07 .acl[data-seat="2"] .acl__td[data-c="5"] .acl__hatch, .offer #svc-07 .acl[data-seat="3"] .acl__td .acl__hatch { opacity: 1; } .offer #svc-07 .acl__td > span { display: block; overflow: hidden; text-overflow: ellipsis; } .offer #svc-07 .acl__td--n { color: var(--pc-ink-3); text-align: center; padding: 0; } .offer #svc-07 .acl__td--s { display: flex; gap: 3px; justify-content: center; padding: 0; } .offer #svc-07 .acl__td--s i { width: 6px; height: 6px; border-radius: 50%; background: var(--pc-sunk); box-shadow: inset 0 0 0 1px var(--pc-rule); transition: background .3s ease, box-shadow .3s ease; } .offer #svc-07 .acl__td--s i.is-on { background: var(--pc-ink-3); box-shadow: none; } .offer #svc-07 .acl__tr:not(.acl__tr--h) { border-bottom: 1px solid var(--pc-rule-2); transition: background .15s ease; } .offer #svc-07 .acl__tr:not(.acl__tr--h):hover { background: rgba(175, 192, 245, .06); } .offer #svc-07 .acl__tr:nth-child(2n+1):not(.acl__tr--h) { background: rgba(255, 255, 255, .012); } .offer #svc-07 .acl[data-seat="2"] .acl__td[data-c="4"] > span, .offer #svc-07 .acl[data-seat="2"] .acl__td[data-c="5"] > span { opacity: .18; } .offer #svc-07 .acl__td > span { transition: opacity .35s ease; } .offer #svc-07 .acl[data-seat="2"] .acl__tr:nth-child(n+9) .acl__td:not(.acl__td--s):not(.acl__td--n) { opacity: .22; } .offer #svc-07 .acl[data-seat="2"] .acl__th[data-c="4"] .acl__lk, .offer #svc-07 .acl[data-seat="2"] .acl__th[data-c="5"] .acl__lk { opacity: 1; transform: none; } .offer #svc-07 .acl[data-seat="2"] .acl__th[data-c="4"] .acl__sig, .offer #svc-07 .acl[data-seat="2"] .acl__th[data-c="5"] .acl__sig { opacity: 0; } .offer #svc-07 .acl[data-seat="2"] .acl__th[data-c="4"], .offer #svc-07 .acl[data-seat="2"] .acl__th[data-c="5"] { color: var(--pc-ink-3); } .offer #svc-07 .acl[data-seat="3"] .acl__th:not(.acl__th--n):not(.acl__th--s) .acl__sig { opacity: 0; } .offer #svc-07 .acl[data-seat="3"] .acl__td:not(.acl__td--s):not(.acl__td--n) > span { opacity: .14; } .offer #svc-07 .acl[data-seat="3"] .acl__th:not(.acl__th--n):not(.acl__th--s) .acl__lk { opacity: 1; transform: none; } .offer #svc-07 .acl[data-seat="1"] .acl__td--s i:nth-child(1).is-on, .offer #svc-07 .acl[data-seat="2"] .acl__td--s i:nth-child(2).is-on { background: var(--pc-act); box-shadow: 0 0 0 2px rgba(175, 192, 245, .2); } .offer #svc-07 .acl[data-seat="3"] .acl__td--s i:nth-child(3) { box-shadow: inset 0 0 0 1px var(--sc7-warn, #F2B08C); } .offer #svc-07 .acl__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(20, 22, 29, .42); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0, 18px 0; mask-position: 0 0, 18px 0; -webkit-mask-size: 100% 100%, 432px 372px; mask-size: 100% 100%, 432px 372px; -webkit-mask-composite: xor; mask-composite: exclude; transition: -webkit-mask-size .48s var(--pc-stage), mask-size .48s var(--pc-stage), background .3s ease; } .offer #svc-07 .acl[data-seat="2"] .acl__veil { -webkit-mask-size: 100% 100%, 287px 227px; mask-size: 100% 100%, 287px 227px; } .offer #svc-07 .acl[data-seat="3"] .acl__veil { -webkit-mask-size: 100% 100%, 0px 0px; mask-size: 100% 100%, 0px 0px; background: rgba(20, 22, 29, .55); } .offer #svc-07 .acl__lens { position: absolute; left: 18px; top: 0; width: 432px; height: calc(var(--acl-head) + 12 * var(--acl-row)); border-radius: 6px; pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 1.5px var(--pc-act), 0 0 0 1px rgba(175, 192, 245, .18), 0 0 22px 0 rgba(175, 192, 245, .18); transition: left .48s var(--pc-stage), top .48s var(--pc-stage), width .48s var(--pc-stage), height .48s var(--pc-stage), opacity .3s ease; } .offer #svc-07 .acl__lens::before { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; background: linear-gradient(180deg, rgba(175, 192, 245, .07), rgba(175, 192, 245, 0) 40%); } .offer #svc-07 .acl[data-seat="2"] .acl__lens { width: 287px; height: calc(var(--acl-head) + 7 * var(--acl-row)); } .offer #svc-07 .acl[data-seat="3"] .acl__lens { width: 0; height: 0; opacity: 0; } .offer #svc-07 .acl__capline { position: absolute; left: 18px; right: 26px; top: calc(var(--acl-head) + 7 * var(--acl-row) + 2px); height: 2px; pointer-events: none; z-index: 3; background: repeating-linear-gradient(90deg, var(--sc7-warn, #F2B08C) 0 6px, transparent 6px 10px); box-shadow: 0 1px 0 rgba(7, 9, 19, .7); opacity: 0; transition: opacity .3s ease .2s; } .offer #svc-07 .acl__capline b { position: absolute; right: 0; top: 6px; padding: 0 7px; height: 18px; border-radius: 4px; font-family: var(--mono); font-size: 12px; line-height: 18px; font-weight: 600; color: var(--sc7-warn, #F2B08C); background: var(--pc-face); box-shadow: inset 0 0 0 1px rgba(242, 176, 140, .5), 0 3px 8px rgba(7, 9, 19, .4); white-space: nowrap; } .offer #svc-07 .acl[data-seat="2"] .acl__capline { opacity: 1; } .offer #svc-07 .acl__ended { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.94); margin: 0; padding: 10px 16px; border-radius: 7px; z-index: 4; pointer-events: none; display: grid; gap: 3px; justify-items: center; text-align: center; white-space: nowrap; background: var(--pc-face); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--sc7-warn, #F2B08C), 0 12px 28px rgba(7, 9, 19, .5); opacity: 0; transition: opacity .3s ease, transform .4s var(--pc-stage); } .offer #svc-07 .acl__ended b { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--pc-ink); } .offer #svc-07 .acl__ended em { font-style: normal; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--sc7-warn, #F2B08C); letter-spacing: .04em; } .offer #svc-07 .acl[data-seat="3"] .acl__ended { opacity: 1; transform: translate(-50%, -50%); transition-delay: .25s; } .offer #svc-07 .acl__legend { position: absolute; left: 8px; right: 0; bottom: 6px; margin: 0; display: flex; gap: 14px; font-family: var(--mono); font-size: 12px; line-height: 15px; color: var(--pc-ink-3); white-space: nowrap; } .offer #svc-07 .acl__legend span { display: flex; align-items: center; gap: 6px; transition: color .2s ease; cursor: default; } .offer #svc-07 .acl__legend span:hover { color: var(--pc-ink); } .offer #svc-07 .acl__legend i { width: 12px; height: 12px; display: grid; place-items: center; } .offer #svc-07 .acl__legend i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; } .offer #svc-07 .acl__legend .is-read i { color: var(--pc-act); } .offer #svc-07 .acl__legend .is-read i svg { fill: currentColor; } .offer #svc-07 .acl__legend .is-mask i { color: var(--pc-ink-3); } .offer #svc-07 .acl__legend .is-cap i { color: var(--sc7-warn, #F2B08C); } .offer #svc-07.js-stage .acl__tr:not(.acl__tr--h) { opacity: 0; filter: blur(4px); transform: translateY(3px); transition: opacity .35s ease, filter .4s ease, transform .4s var(--pc-stage), background .15s ease; transition-delay: calc(.15s + var(--r) * .04s); } .offer #svc-07.js-stage.is-lit .acl__tr:not(.acl__tr--h) { opacity: 1; filter: none; transform: none; } .offer #svc-07.js-stage:not(.is-lit) .acl__seat { opacity: 0; transform: translateX(-8px) scale(.985); transition: opacity .3s ease, transform .4s var(--pc-stage); transition-delay: calc(.1s + var(--i) * .09s); } .offer #svc-07.js-stage .acl__meter i::after { width: 0 !important; transition: width .7s var(--sc6-tick, ease-out); transition-delay: calc(.5s + var(--k) * .03s); } .offer #svc-07.js-stage.is-lit .acl__meter i.is-on::after { width: 100% !important; } .offer #svc-07.js-stage.is-lit .acl__meter i.is-part::after { width: calc(var(--p) * 100%) !important; } .offer #svc-07.js-stage .acl__lens { opacity: 0; transition: opacity .3s ease .9s, left .48s var(--pc-stage), top .48s var(--pc-stage), width .48s var(--pc-stage), height .48s var(--pc-stage); } .offer #svc-07.js-stage.is-lit .acl__lens { opacity: 1; animation: acl-breathe 3.6s ease-in-out 1.6s infinite; } .offer #svc-07.js-stage.is-lit .acl[data-seat="3"] .acl__lens { opacity: 0; animation: none; } @keyframes acl-breathe { 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--pc-act), 0 0 0 1px rgba(175, 192, 245, .18), 0 0 22px 0 rgba(175, 192, 245, .18); } 50% { box-shadow: inset 0 0 0 1.5px var(--pc-act), 0 0 0 1px rgba(175, 192, 245, .26), 0 0 30px 0 rgba(175, 192, 245, .30); } } .offer #svc-07.js-stage .acl__td--s i.is-on { background: var(--pc-sunk); transition: background .3s ease, box-shadow .3s ease; transition-delay: calc(.7s + var(--r) * .04s); } .offer #svc-07.js-stage.is-lit .acl__td--s i.is-on { background: var(--pc-ink-3); } @media (prefers-reduced-motion: reduce) { .offer #svc-07.js-stage .acl__tr, .offer #svc-07.js-stage .acl__seat, .offer #svc-07.js-stage .acl__meter i::after, } .offer #svc-08 .ig { display: block; align-self: stretch; } .offer #svc-08 .ig__win { position: relative; display: grid; grid-template-rows: 44px 446px; overflow: hidden; --ig-fall: cubic-bezier(.5, 0, 1, 1); --ig-warn: #F2B08C; --ig-y0: -170px; --ig-y1: 6px; --ig-y2: 77px; --ig-y3: 148px; } .offer #svc-08 .ig__win > .pcon__top { grid-row: 1; } .offer #svc-08 .ig__hdr { display: flex; align-items: center; gap: 14px; flex: none; } .offer #svc-08 .pcon__def { font-style: normal; font-weight: 400; font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--pc-ink-3); margin-left: 2px; white-space: nowrap; } .offer #svc-08 .ig__hc { display: grid; justify-items: end; gap: 0; font-family: var(--mono); line-height: 14px; } .offer #svc-08 .ig__hk { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-3); font-style: normal; } .offer #svc-08 .ig__hv { font-size: 12.5px; font-weight: 600; color: var(--pc-ink); font-variant-numeric: tabular-nums; } .offer #svc-08 .ig__slab { position: absolute; left: 8px; right: 8px; top: 52px; height: 292px; z-index: 0; } .offer #svc-08 .ig__docks { position: absolute; left: 16px; top: 52px; width: 176px; height: 292px; list-style: none; margin: 0; padding: 0; z-index: 2; } .offer #svc-08 .ig__dock { position: absolute; left: 0; width: 176px; height: 72px; padding: 7px 9px 6px; border-radius: 7px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 8px; align-content: start; background: var(--pc-lift); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--pc-plate-ring), 0 6px 14px rgba(7, 9, 19, .25); transition: transform .45s var(--pc-stage), box-shadow .45s var(--pc-stage), background .3s ease; } .offer #svc-08 .ig__win[data-step="1"] .ig__dock[data-dock="1"], .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="2"], .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="3"] { transform: translateX(3px) scale(1.03); z-index: 3; background: var(--pc-lift-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px var(--pc-act), 0 12px 24px rgba(7, 9, 19, .36), 0 0 0 3px rgba(175, 192, 245, .1); } .offer #svc-08 .ig__dock[data-dock="1"] { top: 6px; } .offer #svc-08 .ig__dock[data-dock="2"] { top: 77px; } .offer #svc-08 .ig__dock[data-dock="3"] { top: 148px; } .offer #svc-08 .ig__mk { grid-row: 1 / 3; width: 26px; height: 26px; margin-top: 3px; display: grid; place-items: center; border-radius: 5px; background: var(--pc-face); box-shadow: inset 0 0 0 1px var(--pc-rule); color: var(--pc-ink-3); transition: color .3s ease, box-shadow .3s ease; } .offer #svc-08 .ig__mk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-08 .ig__mk path { stroke-dasharray: 1; stroke-dashoffset: 0; } .offer #svc-08 .ig__dn { font-family: var(--mono); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-ink-2); white-space: nowrap; transition: color .3s ease; } .offer #svc-08 .ig__dc { display: grid; font-family: var(--mono); font-size: 12px; line-height: 14px; color: var(--pc-ink-3); white-space: nowrap; } .offer #svc-08 .ig__dc b { display: block; color: var(--pc-ink); font-weight: 700; font-size: 22px; line-height: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .offer #svc-08 .ig__dr { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 2px; } .offer #svc-08 .ig__dm { flex: 1 1 0; display: flex; gap: 2px; height: 4px; } .offer #svc-08 .ig__dm i { flex: 1 1 0; border-radius: 1px; background: var(--pc-sunk); box-shadow: inset 0 0 0 1px var(--pc-rule-2); position: relative; overflow: hidden; } .offer #svc-08 .ig__dm i::after { content: ""; position: absolute; inset: 0; background: var(--pc-act); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--pc-ease); transition-delay: calc(var(--k) * .04s); } .offer #svc-08 .ig__rung { position: absolute; left: 176px; top: 36px; width: 18px; height: 1px; background: var(--pc-rule); transition: background .3s ease, box-shadow .3s ease; } .offer #svc-08 .ig__win[data-step="1"] .ig__dock[data-dock="1"], .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="2"], .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="3"] { --on: 1; } .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="1"], .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="1"], .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="2"], .offer #svc-08 .ig__win[data-step="4"] .ig__dock { --done: 1; } .offer #svc-08 .ig__dock[style*="--i"] .ig__mk { color: var(--pc-ink-3); } .offer #svc-08 .ig__win[data-step="1"] .ig__dock[data-dock="1"] .ig__mk, .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="2"] .ig__mk, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="3"] .ig__mk { color: var(--pc-act); box-shadow: inset 0 0 0 1px var(--pc-act), 0 0 0 3px rgba(175, 192, 245, .14); } .offer #svc-08 .ig__win[data-step="1"] .ig__dock[data-dock="1"] .ig__mk path, .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="2"] .ig__mk path, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="3"] .ig__mk path { animation: ig-draw .9s var(--pc-ease) both; } @keyframes ig-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } } .offer #svc-08 .ig__win[data-step="1"] .ig__dock[data-dock="1"] .ig__dn, .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="2"] .ig__dn, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="3"] .ig__dn { color: var(--pc-ink); } .offer #svc-08 .ig__win[data-step="1"] .ig__dock[data-dock="1"] .ig__rung, .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="2"] .ig__rung, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="3"] .ig__rung { background: var(--pc-act); box-shadow: 0 0 6px rgba(175, 192, 245, .6); } .offer #svc-08 .ig__win[data-step="1"] .ig__dock[data-dock="1"] .ig__dm i.is-on::after, .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="2"] .ig__dm i.is-on::after, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="3"] .ig__dm i.is-on::after, .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="1"] .ig__dm i.is-on::after, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="1"] .ig__dm i.is-on::after, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="2"] .ig__dm i.is-on::after, .offer #svc-08 .ig__win[data-step="4"] .ig__dock .ig__dm i.is-on::after { transform: none; } .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="1"] .ig__mk, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="1"] .ig__mk, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="2"] .ig__mk, .offer #svc-08 .ig__win[data-step="4"] .ig__dock .ig__mk { color: var(--pc-live); } .offer #svc-08 .ig__dock:hover .ig__dn { color: var(--pc-ink); } .offer #svc-08 .ig__dock:hover .ig__mk { box-shadow: inset 0 0 0 1px var(--pc-ink-3); } .offer #svc-08 .ig__ruler { position: absolute; right: 10px; top: 52px; width: 48px; height: 292px; list-style: none; margin: 0; padding: 0; z-index: 2; } .offer #svc-08 .ig__ruler li { position: absolute; right: 0; top: calc(4px + var(--k) * 2.84px); width: 5px; height: 1px; background: var(--pc-ink-3); opacity: .55; } .offer #svc-08 .ig__ruler li.is-lab { width: 12px; height: 2px; margin-top: -1px; background: var(--pc-ink-2); opacity: 1; } .offer #svc-08 .ig__ruler li b { position: absolute; right: 15px; top: -8px; font-family: var(--mono); font-size: 13px; line-height: 16px; font-weight: 600; color: var(--pc-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .offer #svc-08 .ig__cursor { position: absolute; right: 0; top: 4px; width: 16px; height: 3px; margin-top: -1px; border-radius: 2px; background: var(--pc-act); box-shadow: 0 0 6px rgba(175, 192, 245, .6); transition: top 1.1s var(--pc-ease); } .offer #svc-08 .ig__win[data-step="1"] .ig__cursor { top: calc(4px + 33 * 2.84px); } .offer #svc-08 .ig__win[data-step="2"] .ig__cursor { top: calc(4px + 66 * 2.84px); } .offer #svc-08 .ig__win[data-step="3"] .ig__cursor { top: calc(4px + 100 * 2.84px); } .offer #svc-08 .ig__win[data-step="4"] .ig__cursor { top: calc(4px + 100 * 2.84px); animation: ig-breathe 2.8s ease-in-out 1.2s infinite; } .offer #svc-08 .ig__cl { position: absolute; right: 54px; top: 50%; transform: translateY(-50%); padding: 0 6px; height: 18px; border-radius: 4px; font-family: var(--mono); font-size: 12px; line-height: 18px; font-weight: 600; color: var(--pc-act); background: var(--pc-face); box-shadow: inset 0 0 0 1px rgba(175, 192, 245, .45), 0 3px 8px rgba(7, 9, 19, .4); white-space: nowrap; font-variant-numeric: tabular-nums; } @keyframes ig-breathe { 0%, 100% { box-shadow: 0 0 6px rgba(175, 192, 245, .6) } 50% { box-shadow: 0 0 12px rgba(175, 192, 245, .95) } } .offer #svc-08 .ig__file { position: absolute; left: 204px; top: 52px; width: 348px; z-index: 3; border-radius: 6px; padding: 5px 8px 6px; background: var(--pc-lift); box-shadow: inset 0 0 0 1px var(--pc-plate-ring-2), inset 0 1px 0 rgba(255, 255, 255, .06), var(--pc-cast-med); transform: translateY(var(--ig-y0)); transition: transform .32s var(--ig-fall), opacity .3s ease; } .offer #svc-08 .ig__win[data-step="1"] .ig__file { transform: translateY(var(--ig-y1)); } .offer #svc-08 .ig__win[data-step="2"] .ig__file { transform: translateY(var(--ig-y2)); } .offer #svc-08 .ig__win[data-step="3"] .ig__file { transform: translateY(var(--ig-y3)); } .offer #svc-08 .ig__win[data-step="4"] .ig__file { transform: translateY(var(--ig-y3)); } .offer #svc-08 .ig__shadow { position: absolute; left: 224px; width: 290px; top: 52px; height: 6px; border-radius: 50%; z-index: 2; background: rgba(0, 0, 0, .55); filter: blur(4px); opacity: 0; transform: translateY(var(--ig-y0)); transition: transform .32s var(--ig-fall), opacity .2s ease; } .offer #svc-08 .ig__win[data-step="1"] .ig__shadow { transform: translateY(calc(var(--ig-y1) + 161px)); opacity: .7; } .offer #svc-08 .ig__win[data-step="2"] .ig__shadow { transform: translateY(calc(var(--ig-y2) + 161px)); opacity: .7; } .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .ig__shadow { transform: translateY(calc(var(--ig-y3) + 161px)); opacity: .7; } .offer #svc-08 .ig__beam { position: absolute; left: 50%; top: 100%; width: 2px; height: 0; margin-left: -1px; border-radius: 1px; background: linear-gradient(180deg, var(--pc-live), rgba(110, 231, 210, 0)); box-shadow: 0 0 8px rgba(110, 231, 210, .5); transition: height .5s var(--pc-ease); } .offer #svc-08 .ig__win[data-step="4"] .ig__beam { height: 42px; transition-delay: .1s; } .offer #svc-08 .ig__dt { flex: none; display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; line-height: 14px; color: var(--pc-ink-3); white-space: nowrap; opacity: 0; transform: translateY(2px); transition: opacity .3s ease, transform .3s var(--pc-stage); } .offer #svc-08 .ig__dt i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--pc-ink-3); border-top-color: var(--pc-live); } .offer #svc-08 .ig__win[data-step="1"] .ig__dock[data-dock="1"] .ig__dt, .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="2"] .ig__dt, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="3"] .ig__dt { opacity: 1; transform: none; transition-delay: .5s; } .offer #svc-08 .ig__win[data-step="1"] .ig__dock[data-dock="1"] .ig__dt i, .offer #svc-08 .ig__win[data-step="2"] .ig__dock[data-dock="2"] .ig__dt i, .offer #svc-08 .ig__win[data-step="3"] .ig__dock[data-dock="3"] .ig__dt i { animation: ig-spin 1s linear infinite; } @keyframes ig-spin { to { transform: rotate(360deg) } } .offer #svc-08 .ig__win:is([data-step="2"],[data-step="3"],[data-step="4"]) .ig__dock[data-dock="1"] .ig__dt, .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .ig__dock[data-dock="2"] .ig__dt, .offer #svc-08 .ig__win[data-step="4"] .ig__dock[data-dock="3"] .ig__dt { opacity: 1; transform: none; } .offer #svc-08 .ig__win:is([data-step="2"],[data-step="3"],[data-step="4"]) .ig__dock[data-dock="1"] .ig__dt i, .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .ig__dock[data-dock="2"] .ig__dt i, .offer #svc-08 .ig__win[data-step="4"] .ig__dock[data-dock="3"] .ig__dt i { border-color: var(--pc-live); animation: none; } .offer #svc-08 .ig__win[data-step="0"] .ig__file { transition: none; transform: translateY(-10px); } .offer #svc-08 .ig__mini { transition: filter .38s ease; } .offer #svc-08 .ig__win.is-moving .ig__mini { filter: blur(2px); transition: filter .12s ease; } .offer #svc-08 .ig__win.is-moving .ig__file { box-shadow: inset 0 0 0 1px var(--pc-plate-ring-2), inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 4px rgba(7, 9, 19, .35); } .offer #svc-08 .ig__floor { position: absolute; left: 16px; right: 60px; top: 60px; height: 276px; z-index: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 3px; pointer-events: none; } .offer #svc-08 .ig__floor b { border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025); background: rgba(0, 0, 0, .08); } .offer #svc-08 .ig__fh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 3px; height: 18px; white-space: nowrap; font-family: var(--mono); font-size: 12px; line-height: 18px; } .offer #svc-08 .ig__fn { font-weight: 600; color: var(--pc-ink); } .offer #svc-08 .ig__fm { color: var(--pc-ink-3); } .offer #svc-08 .ig__fm b { color: var(--pc-ink-2); font-weight: 600; font-variant-numeric: tabular-nums; } .offer #svc-08 .ig__mini { font-family: var(--mono); font-size: 12px; } .offer #svc-08 .ig__row { display: grid; grid-template-columns: 18px 122px 104px 88px; align-items: center; height: 19px; overflow: hidden; transition: height .4s var(--pc-stage), opacity .3s ease; } .offer #svc-08 .ig__row--h { height: 18px; border-bottom: 1px solid var(--pc-rule); } .offer #svc-08 .ig__ch { display: flex; align-items: center; gap: 4px; padding: 0 4px; color: var(--pc-ink-3); white-space: nowrap; overflow: hidden; } .offer #svc-08 .ig__c--n { display: flex; align-items: center; gap: 3px; padding: 0 0 0 2px; color: var(--pc-ink-3); } .offer #svc-08 .ig__c--n i { width: 4px; height: 4px; border-radius: 50%; background: var(--pc-ink-3); opacity: .5; transition: background .3s ease, opacity .3s ease; } .offer #svc-08 .ig__win:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .ig__row[style="--r:0"] .ig__c--n i { background: var(--ig-warn); opacity: 1; transition-delay: .5s; } .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .ig__row .ig__c--n i { background: var(--pc-live); opacity: 1; } .offer #svc-08 .ig__fx { display: flex; gap: 12px; margin: 4px 0 0; height: 14px; font-family: var(--mono); font-size: 12px; line-height: 14px; color: var(--pc-ink-3); white-space: nowrap; } .offer #svc-08 .ig__fx span { opacity: .35; transition: opacity .3s ease, color .3s ease; } .offer #svc-08 .ig__fx b { font-weight: 600; color: inherit; font-variant-numeric: tabular-nums; } .offer #svc-08 .ig__win:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .ig__fx--fix { opacity: 1; color: var(--ig-warn); transition-delay: 1s; } .offer #svc-08 .ig__win:is([data-step="2"],[data-step="3"],[data-step="4"]) .ig__fx--dupe { opacity: 1; color: var(--pc-ink-2); transition-delay: .8s; } .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .ig__fx--fill { opacity: 1; color: var(--pc-live); transition-delay: .9s; } .offer #svc-08 .ig__ch b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .offer #svc-08 .ig__mapd { width: 10px; height: 10px; flex: none; margin-left: auto; border-radius: 50%; display: grid; place-items: center; color: var(--pc-live); box-shadow: inset 0 0 0 1px currentColor; opacity: .6; transition: opacity .3s ease, color .3s ease; } .offer #svc-08 .ig__mapd svg { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-08 .ig__ch[data-c="3"] .ig__mapd { color: var(--pc-ink-3); opacity: .4; } .offer #svc-08 .ig__ch[data-c="3"] .ig__mapd svg { opacity: 0; transition: opacity .3s ease; } .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .ig__ch[data-c="3"] .ig__mapd { color: var(--pc-live); opacity: .9; } .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .ig__ch[data-c="3"] .ig__mapd svg { opacity: 1; } .offer #svc-08 .ig__fi { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: var(--pc-act); } .offer #svc-08 .ig__fi svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-08 .ig__sg { width: 10px; height: 10px; flex: none; } .offer #svc-08 .ig__sg svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-08 .ig__c { position: relative; display: block; padding: 0 4px; min-width: 0; color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .offer #svc-08 .ig__c > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .offer #svc-08 .ig__old { position: absolute; left: 4px; right: 4px; top: 0; color: var(--pc-ink-2); transition: color .3s ease, opacity .45s ease, transform .45s var(--pc-stage); } .offer #svc-08 .ig__new { color: var(--pc-live); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .4s var(--pc-stage); } .offer #svc-08 .is-fill .ig__old { color: var(--pc-ink-3); } .offer #svc-08 .ig__ch[data-c="3"], .offer #svc-08 .ig__c[data-c="3"] { opacity: .3; transition: opacity .4s ease; } .offer #svc-08 .ig__win:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .is-fix .ig__old { text-decoration: line-through; text-decoration-color: var(--ig-warn); color: var(--pc-ink-3); opacity: 0; transform: translateY(-6px); } .offer #svc-08 .ig__win:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .is-fix .ig__new { opacity: 1; transform: none; } .offer #svc-08 .ig__win[data-step="1"] .is-fix[data-c="2"] .ig__new { transition-delay: .45s; } .offer #svc-08 .ig__win[data-step="1"] .is-fix[data-c="3"] .ig__new { transition-delay: .7s; } .offer #svc-08 .ig__win[data-step="1"] .is-fix[data-c="4"] .ig__new { transition-delay: .95s; } .offer #svc-08 .ig__win[data-step="1"] .is-fix[data-c="2"] .ig__old { transition-delay: .45s; } .offer #svc-08 .ig__win[data-step="1"] .is-fix[data-c="3"] .ig__old { transition-delay: .7s; } .offer #svc-08 .ig__win[data-step="1"] .is-fix[data-c="4"] .ig__old { transition-delay: .95s; } .offer #svc-08 .ig__win[data-step="0"] .is-fix .ig__old { transition: none; } .offer #svc-08 .ig__win:is([data-step="2"],[data-step="3"],[data-step="4"]) .ig__row.is-dupe { height: 0; opacity: 0; } .offer #svc-08 .ig__win[data-step="2"] .ig__row.is-dupe { transition-delay: .5s; } .offer #svc-08 .ig__row:not(.ig__row--h) { border-radius: 3px; } .offer #svc-08 .ig__win[data-step="2"] .ig__row[style="--r:0"] { animation: ig-take 1.1s ease-out .6s both; } @keyframes ig-take { 0% { background: rgba(175, 192, 245, 0) } 30% { background: rgba(175, 192, 245, .22) } 100% { background: rgba(175, 192, 245, 0) } } .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .is-fill .ig__old { opacity: 0; } .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .is-fill .ig__new { opacity: 1; transform: none; } .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .ig__ch[data-c="3"], .offer #svc-08 .ig__win:is([data-step="3"],[data-step="4"]) .ig__c[data-c="3"] { opacity: 1; } .offer #svc-08 .ig__win[data-step="3"] .is-fill .ig__new { transition-delay: calc(.4s + var(--r, 0) * .14s); } .offer #svc-08 .ig__foot { position: absolute; left: 8px; right: 8px; top: 348px; height: 134px; z-index: 2; padding: 5px 8px 4px; border-radius: 8px; font-family: var(--mono); font-size: 12px; background: var(--pc-lift); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--pc-plate-ring), 0 8px 18px rgba(7, 9, 19, .28); } .offer #svc-08 .ig__fbar { display: flex; align-items: center; gap: 10px; margin: 0; height: 20px; white-space: nowrap; } .offer #svc-08 .ig__fcap { letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-3); } .offer #svc-08 .ig__ftot, .offer #svc-08 .ig__fnew { color: var(--pc-ink-3); } .offer #svc-08 .ig__ftot b { color: var(--pc-ink); font-weight: 600; font-variant-numeric: tabular-nums; } .offer #svc-08 .ig__ftot b:first-child { font-size: 19px; letter-spacing: -.02em; vertical-align: -1px; } .offer #svc-08 .ig__fnew { margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .4s var(--pc-stage); } .offer #svc-08 .ig__fnew b { color: var(--pc-live); font-weight: 600; } .offer #svc-08 .ig__win[data-step="4"] .ig__fnew { opacity: 1; transform: none; transition-delay: .9s; } .offer #svc-08 .ig__tbl { margin-top: 2px; } .offer #svc-08 .ig__mr { display: grid; grid-template-columns: 18px 196px 176px minmax(0, 1fr); align-items: center; height: 18px; border-bottom: 1px solid var(--pc-rule-2); transition: background .3s ease; } .offer #svc-08 .ig__mr--h { height: 17px; border-bottom-color: var(--pc-rule); } .offer #svc-08 .ig__mr:not(.ig__mr--h):hover { background: rgba(175, 192, 245, .06); } .offer #svc-08 .ig__mh { display: flex; align-items: center; gap: 4px; padding: 0 4px; color: var(--pc-ink-3); white-space: nowrap; overflow: hidden; } .offer #svc-08 .ig__mh b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .offer #svc-08 .ig__mc { padding: 0 4px; min-width: 0; color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; transition: opacity .35s ease; } .offer #svc-08 .ig__mc--n { display: flex; align-items: center; padding: 0 0 0 4px; } .offer #svc-08 .ig__mc--n i { width: 5px; height: 5px; display: block; opacity: .55; } .offer #svc-08 .ig__mc--n i svg { width: 5px; height: 5px; display: block; fill: var(--pc-ink-3); } .offer #svc-08 .ig__fg { width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .offer #svc-08 .ig__mh--st, .offer #svc-08 .ig__mc--st { justify-self: end; } .offer #svc-08 .ig__mc--st { display: flex; align-items: center; gap: 5px; color: var(--pc-ink-3); } .offer #svc-08 .ig__mc--st i { width: 10px; height: 10px; border-radius: 50%; display: grid; place-items: center; color: var(--pc-ink-3); box-shadow: inset 0 0 0 1px currentColor; opacity: .5; transition: color .3s ease, opacity .3s ease, box-shadow .3s ease; } .offer #svc-08 .ig__mc--st i svg { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s ease; } .offer #svc-08 .ig__mr.is-held .ig__mc--st i svg { opacity: 1; } .offer #svc-08 .ig__mc--st em { font-style: normal; } .offer #svc-08 .ig__mr.is-new .ig__mc { opacity: .16; } .offer #svc-08 .ig__mr.is-updated .ig__mc--st em, .offer #svc-08 .ig__mr.is-new .ig__mc--st em { opacity: 0; transition: opacity .3s ease; } .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-new .ig__mc { opacity: 1; } .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-new .ig__mc--st i { color: var(--pc-live); opacity: 1; box-shadow: inset 0 0 0 1px currentColor, 0 0 0 2px rgba(110, 231, 210, .18); } .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-new .ig__mc--st i svg, .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-updated .ig__mc--st i svg { opacity: 1; } .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-new .ig__mc--st em, .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-updated .ig__mc--st em { opacity: 1; } .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-new .ig__mc--st em { color: var(--pc-live); } .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-new { animation: ig-land .9s ease-out both; } .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-new .ig__mc, .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-new .ig__mc--st i, .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-new .ig__mc--st em, .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-new { animation-delay: calc(.55s + (var(--r) - 2) * .16s); transition-delay: calc(.55s + (var(--r) - 2) * .16s); } .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-updated { animation: ig-take 1.2s ease-out .6s both; } .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-updated .ig__mc--st i { color: var(--pc-act); opacity: 1; transition-delay: .6s; } .offer #svc-08 .ig__win[data-step="4"] .ig__mr.is-updated .ig__mc--st em { color: var(--pc-act); transition-delay: .6s; } @keyframes ig-land { 0% { background: rgba(110, 231, 210, 0) } 25% { background: rgba(110, 231, 210, .16) } 100% { background: rgba(110, 231, 210, 0) } } .offer #svc-08.js-stage .ig__dock { opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .4s var(--pc-stage); transition-delay: calc(.1s + var(--i) * .1s); } .offer #svc-08.js-stage.is-lit .ig__dock { opacity: 1; transform: none; } .offer #svc-08.js-stage .ig__ruler li { opacity: 0; transition: opacity .25s ease; transition-delay: calc(.2s + var(--k) * .02s); } .offer #svc-08.js-stage.is-lit .ig__ruler li { opacity: 1; } .offer #svc-08.js-stage .ig__mr:not(.ig__mr--h) { opacity: 0; filter: blur(3px); transition: opacity .3s ease, filter .35s ease, background .3s ease; transition-delay: calc(.3s + var(--r) * .06s); } .offer #svc-08.js-stage.is-lit .ig__mr:not(.ig__mr--h) { opacity: 1; filter: none; } .offer #svc-08.js-stage .ig__slab { opacity: 0; transition: opacity .5s ease; } .offer #svc-08.js-stage.is-lit .ig__slab { opacity: 1; } @media (prefers-reduced-motion: reduce) { .offer #svc-08 .ig__file, .offer #svc-08 .ig__row, .offer #svc-08 .ig__new, .offer #svc-08 .ig__old, .offer #svc-08 .ig__cursor, .offer #svc-08.js-stage .ig__dock, .offer #svc-08.js-stage .ig__ruler li, .offer #svc-08.js-stage .ig__mr { transition: none !important; animation: none !important; } } .offer #svc-05, .offer #svc-06, .offer #svc-07, .offer #svc-08 { --pc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E"); --pc-grain-op: .47; --pc-grain-op-2: .30; --pc-lit: rgba(255, 255, 255, .78); --pc-shade: rgba(18, 16, 38, .16); --pc-cast-tiny: 0 1px 1px 0 rgba(18, 16, 38, .09); --pc-cast-low: 0 1px 4px -1px rgba(18, 16, 38, .09); --pc-cast-med: 0 3px 12px 0 rgba(18, 16, 38, .09), 0 1px 2px 0 rgba(18, 16, 38, .06); --pc-cast-high: 0 7px 24px 0 rgba(18, 16, 38, .06), 0 2px 6px 0 rgba(18, 16, 38, .05); --pc-stack: 0 -1px 1px 0 rgba(18, 16, 38, .11) inset, 0 8px 2px 0 rgba(18, 16, 38, 0), 0 5px 2px 0 rgba(18, 16, 38, .012), 0 3px 2px 0 rgba(18, 16, 38, .04), 0 1px 1px 0 rgba(18, 16, 38, .07), 0 0 1px 0 rgba(18, 16, 38, .08); } .offer .pcon { position: relative; isolation: isolate; background: radial-gradient(118% 88% at 46% -12%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .34) 42%, rgba(255, 255, 255, 0) 78%), linear-gradient(152deg, var(--pc-stage) 0%, var(--pc-stage-2) 100%); box-shadow: inset 0 0 0 1px var(--cream-rule), inset 0 1px 0 0 rgba(255, 255, 255, .7); } .offer .pcon::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background-image: var(--pc-grain); background-size: 128px 128px; mix-blend-mode: overlay; opacity: var(--pc-grain-op-2); } .offer .pcon__win { position: relative; z-index: 1; box-shadow: inset 0 0 0 1px var(--pc-rule), inset 0 1px 0 0 rgba(255, 255, 255, .38), inset 0 -1px 0 0 rgba(18, 16, 38, .07), var(--pc-cast-high); } .offer .pcon__win::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(155deg, var(--pc-lit) 0%, rgba(255,255,255,.10) 38%, rgba(18,16,38,.05) 66%, var(--pc-shade) 100%); -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); -webkit-mask-clip: content-box, border-box; mask-clip: content-box, border-box; -webkit-mask-composite: xor; mask-composite: exclude; } .offer .pcon__win::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background-image: linear-gradient(rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 34%), var(--pc-grain); background-size: auto, 128px 128px; mix-blend-mode: overlay; opacity: var(--pc-grain-op); } .offer .pcon__win > .pcon__grain::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 34%); mix-blend-mode: normal; } .offer .pcon__win > .pcon__grain { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background-image: var(--pc-grain); background-size: 128px 128px; mix-blend-mode: overlay; opacity: var(--pc-grain-op); } .offer .pcon__top { position: relative; z-index: 7; background: linear-gradient(rgba(204, 215, 250, .82), rgba(196, 208, 242, .72)); -webkit-backdrop-filter: saturate(1.6) blur(8px); backdrop-filter: saturate(1.6) blur(8px); box-shadow: 0 1px 0 0 rgba(255, 255, 255, .34), var(--pc-cast-tiny); } .offer .pc-back { opacity: .46; filter: saturate(.82); } .offer .pc-front { position: relative; z-index: 4; box-shadow: var(--pc-cast-med); } .offer .deck.js-deck .deck__slide[data-slide="active"] > .panel { box-shadow: 0 18px 48px -12px rgba(18, 16, 38, .17), 0 6px 18px -6px rgba(18, 16, 38, .10); } .offer .deck.js-deck .deck__slide[data-slide="prev"] > .panel, .offer .deck.js-deck .deck__slide[data-slide="next"] > .panel { filter: saturate(.72) brightness(.985); } .offer .pcon__sunk { box-shadow: inset 0 0 12px 0 rgba(18, 16, 38, .16), inset 0 1px 2px 0 rgba(18, 16, 38, .18), inset 0 -1px 0 0 rgba(255, 255, 255, .40); } .offer .ig__win .ig__slab { box-shadow: inset 0 0 14px 0 rgba(18, 16, 38, .13), inset 0 2px 3px 0 rgba(18, 16, 38, .15), inset 0 -1px 0 0 rgba(255, 255, 255, .34); } .offer #svc-05 .qw__it, .offer #svc-05 .qw__box, .offer #svc-05 .qw__av, .offer #svc-06 .sc6__tile, .offer #svc-06 .sc6__node, .offer #svc-06 .sc6__rd, .offer #svc-07 .acl__av, .offer #svc-07 .acl__lname, .offer #svc-07 .acl__chip--full, .offer #svc-07 .acl__pass, .offer #svc-08 .ig__mk, .offer #svc-08 .ig__fn { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .46), inset 0 -1px 0 0 rgba(18, 16, 38, .045), var(--pc-cast-tiny); } .offer #svc-06 .sc6__tile { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .18), var(--pc-cast-low); } .offer .pcon__pill, .offer .sc__chip { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .55), inset 0 -1px 0 0 rgba(18, 16, 38, .05), var(--pc-cast-tiny); } @media (prefers-reduced-motion: no-preference) { .offer .pcon::before, .offer .pcon__win > .pcon__grain { animation: none !important; } } @media (forced-colors: active) { .offer .pcon::before, .offer .pcon__win > .pcon__grain, .offer .pcon__win::after { display: none; } } .offer #svc-05, .offer #svc-06, .offer #svc-07, .offer #svc-08 { --pc-lit: rgba(255, 255, 255, .16); --pc-shade: rgba(7, 9, 19, .25); --pc-cast-tiny: 0 1px 1px 0 rgba(7, 9, 19, .22); --pc-cast-low: 0 1px 4px -1px rgba(7, 9, 19, .25); --pc-cast-med: 0 3px 12px 0 rgba(7, 9, 19, .24), 0 1px 2px 0 rgba(7, 9, 19, .24); --pc-cast-high: 0 7px 24px 0 rgba(7, 9, 19, .25), 0 2px 6px 0 rgba(7, 9, 19, .22); --pc-stack: 0 -1px 1px 0 rgba(7, 9, 19, .25) inset, 0 8px 2px 0 rgba(7, 9, 19, 0), 0 5px 2px 0 rgba(7, 9, 19, .04), 0 3px 2px 0 rgba(7, 9, 19, .12), 0 1px 1px 0 rgba(7, 9, 19, .22), 0 0 1px 0 rgba(7, 9, 19, .25); --pc-grain-op: .5; } .offer #svc-05 .pcon__win, .offer #svc-06 .pcon__win, .offer #svc-07 .pcon__win, .offer #svc-08 .pcon__win { box-shadow: inset 0 0 0 1px var(--pc-rule), inset 0 1px 0 0 rgba(255, 255, 255, .07), inset 0 -1px 0 0 rgba(7, 9, 19, .25), var(--pc-cast-high); } .offer #svc-05 .pcon__win::after, .offer #svc-06 .pcon__win::after, .offer #svc-07 .pcon__win::after, .offer #svc-08 .pcon__win::after { background: linear-gradient(155deg, var(--pc-lit) 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .03) 70%, rgba(255, 255, 255, .04) 100%); } .offer #svc-05 .pcon__win > .pcon__grain::before, .offer #svc-06 .pcon__win > .pcon__grain::before, .offer #svc-07 .pcon__win > .pcon__grain::before, .offer #svc-08 .pcon__win > .pcon__grain::before { background: linear-gradient(rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 34%); } .offer #svc-05 .pcon__win::before, .offer #svc-06 .pcon__win::before, .offer #svc-07 .pcon__win::before, .offer #svc-08 .pcon__win::before { background-image: var(--pc-grain); background-size: 128px 128px; } .offer #svc-05 .pcon__win, .offer #svc-06 .pcon__win, .offer #svc-07 .pcon__win, .offer #svc-08 .pcon__win { background-image: linear-gradient(rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 34%), linear-gradient(146deg, var(--pc-face-a) 0%, var(--pc-face) 46%, var(--pc-face-b) 100%); } .offer #svc-05 .pcon__top, .offer #svc-06 .pcon__top, .offer #svc-07 .pcon__top, .offer #svc-08 .pcon__top { background: linear-gradient(rgba(28, 31, 40, .90), rgba(21, 23, 30, .86)); -webkit-backdrop-filter: saturate(1.25) blur(8px); backdrop-filter: saturate(1.25) blur(8px); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .06), inset 0 -1px 0 0 var(--pc-rule), var(--pc-cast-tiny); } .offer #svc-08 .ig__win .ig__slab, .offer #svc-08 .ig__slab { box-shadow: inset 0 7px 16px -4px rgba(7, 9, 19, .25), inset 0 2px 1px -1px rgba(7, 9, 19, .25), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 1px 0 rgba(255, 255, 255, .05); } .offer #svc-08 .ig__lane { box-shadow: inset 0 6px 14px -4px rgba(7, 9, 19, .25), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 1px 0 rgba(255, 255, 255, .05); } @media (min-width: 981px) { .offer .panel.panel--band > div:first-child { justify-content: flex-start; padding-top: 4px; gap: 0; } .offer .panel.panel--band > div:first-child .label { font-size: 16px; margin: 0 0 12px; } .offer .panel.panel--band > div:first-child h3 { font-size: clamp(26px, 1.51vw, 29px); line-height: 1.2; margin: 0 0 16px; } .offer .panel.panel--band > div:first-child p { font-size: clamp(17px, .99vw, 19px); line-height: 1.55; margin: 0; } .offer .panel.panel--band > div:first-child p + p:not(.panel__claim) { margin-top: 12px; } .offer .panel.panel--band > div:first-child .panel__claim { margin-top: 18px; padding-top: 18px; font-size: clamp(17px, .99vw, 19px); } .offer .deck[data-deck="blue"] .panel.panel--band > div:first-child .label { font-size: 15.5px; margin-bottom: 10px; } .offer .deck[data-deck="blue"] .panel.panel--band > div:first-child h3 { font-size: clamp(23px, 1.29vw, 24.7px); margin-bottom: 12px; } .offer .deck[data-deck="blue"] .panel.panel--band > div:first-child p, .offer .deck[data-deck="blue"] .panel.panel--band > div:first-child .panel__claim { font-size: clamp(15.5px, .85vw, 16.3px); } .offer .deck[data-deck="blue"] .panel.panel--band > div:first-child .panel__claim { margin-top: 14px; padding-top: 14px; } } @media (min-width: 981px) { .pship { max-width: 1480px; padding: 0 12px; } .pship__lock { gap: clamp(22px, 2vw, 34px); } .pship__side { gap: clamp(14px, 1.2vw, 20px); } .pship__mg { width: clamp(66px, 4.4vw, 84px); height: clamp(55px, 3.7vw, 70px); } .pship__nm { font-size: clamp(38px, 2.7vw, 51px); } .pship__idb { height: clamp(44px, 3.1vw, 59px); } .pship__join { font-size: clamp(12px, .85vw, 15px); letter-spacing: .2em; } .pship__lock::before, .pship__lock::after { min-width: 40px; } } @media (min-width: 981px) { .funnel__sticky { overflow-x: clip; } } @media (min-width: 1180px) { .offer > .wrap { max-width: 1480px; } .offer .panel.panel--band > .pcon { flex: none; width: 694px; } } @media (min-width: 1560px) { .offer .panel.panel--band > .pcon { zoom: 1.145; } } @media (min-width: 1560px) { .scrape-products.room { padding-bottom: 26px; } .pship { max-width: 1840px; margin: 54px auto 54px; padding: 0 12px; } .pship__side { gap: 30px; } .pship__mg { width: 115px; height: 96px; } .pship__nm { font-size: 70.5px; } .pship__idb { height: 105px; } .pship__join { font-size: 20px; letter-spacing: .2em; } }