/* Lanelink Outcomes Block — one sticky section per panel row */ /* —— Visibility: double structure —— */ .outcomes-mobile { display: none; } @media (max-width: 767px) { .Lanelink-outcomes-block { display: none !important; } .outcomes-mobile { display: block; background: var(--color-navy); color: var(--color-white); padding: 0 0 0 0; } } .Lanelink-outcomes-block { --outcomes-panel-height: 385px; position: sticky; top: var(--header-height); z-index: 1; background: var(--color-navy); color: var(--color-white); height: var(--outcomes-panel-height); min-height: var(--outcomes-panel-height); box-sizing: border-box; border-top: 1px solid var(--color-white); overflow: visible; } .Lanelink-outcomes-block.is-sticky-end { position: sticky; } .Lanelink-outcomes-block.outcomes-first { border-top: 1px solid var(--color-white); } .Lanelink-outcomes-block .outcomes-body { position: relative; height: 100%; display: flex; align-items: center; overflow: visible; } .better-outcomes { position: sticky; top: var(--header-height); } /* Pin in first section (before sticky) */ .Lanelink-outcomes-block .outcomes-visual-pin { position: absolute; top: 60px; right: 0; width: min(42vw, 782px); max-width: 782px; height: 297px; margin: 0; pointer-events: none; } /* Sticky — JS moves pin to */ body > .outcomes-visual-pin.is-stuck { position: fixed; top: auto; bottom: auto; right: 0; left: auto; z-index: 1; width: min(42vw, 782px); max-width: 782px; height: 297px; margin: 0; opacity: 1; visibility: visible; pointer-events: none; } /* Last section — car sits on bottom, stays visible */ .Lanelink-outcomes-block.is-car-bottom .outcomes-visual-pin, .Lanelink-outcomes-block .outcomes-visual-pin.is-at-bottom { position: absolute; top: auto; bottom: 0; right: 0; left: auto; opacity: 1; visibility: visible; } .Lanelink-outcomes-block .outcomes-visual, body > .outcomes-visual-pin.is-stuck .outcomes-visual, .Lanelink-outcomes-block .outcomes-visual-pin.is-at-bottom .outcomes-visual { width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; } .Lanelink-outcomes-block .outcomes-visual img, body > .outcomes-visual-pin.is-stuck img { width: 100%; height: 100%; object-fit: contain; object-position: right center; max-width: 100%; display: block; } .Lanelink-outcomes-block .outcomes-track { position: relative; width: 100%; } .Lanelink-outcomes-block .outcomes-panel { display: flex; align-items: center; width: 100%; height: var(--outcomes-panel-height); min-height: var(--outcomes-panel-height); padding: 78px 0 65px; box-sizing: border-box; } .Lanelink-outcomes-block .outcomes-panel-inner { display: flex; align-items: flex-start; gap: 77px; width: 100%; max-width: 770px; box-sizing: border-box; padding: 0 0 0 80px; } .Lanelink-outcomes-block .outcomes-num { display: block; flex: 0 0 auto; font-size: 51.2px; font-weight: 700; line-height: 1; color: var(--color-lime); } .Lanelink-outcomes-block .outcomes-text { display: flex; flex-direction: column; flex: 0 1 612px; max-width: 612px; padding-top: 10px; } .Lanelink-outcomes-block .outcomes-text h3 { font-size: 32px; font-weight: 700; line-height: 40px; letter-spacing: 0.0156em; margin: 0 0 11px; text-align: left; } .Lanelink-outcomes-block .outcomes-text > p { font-size: 24px; font-weight: 400; line-height: 36px; margin: 0 0 11px; max-width: 559px; letter-spacing: 0.5px; color: var(--color-white); } .Lanelink-outcomes-block .outcomes-text ul { display: flex; flex-direction: column; margin: 0 0 0 37px; padding: 0; list-style: none; } .Lanelink-outcomes-block .outcomes-text li { font-size: 24px; font-weight: 400; line-height: 1.5; letter-spacing: 0.0208em; list-style-type: disc; } /*Mobile SLider Css*/ /*Slider Css*/ .outcomes-slider .outcomes-panel-inner span.outcomes-num { color: #D3EE14; font-size: 48px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 13px; display: block; } .outcomes-slider .outcomes-panel-inner .outcomes-text h3 { text-align: left; font-size: 32px; font-style: normal; font-weight: 700; line-height: 32px; letter-spacing: 0.5px; margin-bottom: 14px; } .outcomes-slider .outcomes-panel-inner .outcomes-text p { color: #FFF; font-size: 24px; font-style: normal; font-weight: 400; line-height: 28.8px; letter-spacing: 0.5px; margin-bottom: 11px; } .outcomes-slider .outcomes-panel-inner .outcomes-text ul li { color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: 0.5px; } .outcomes-slider .outcomes-panel-inner .outcomes-text ul { margin: 0 0 0 25px; list-style-type: disc; } .outcomes-slider .slick-dotted.slick-slider { margin-bottom: 0; } .outcomes-mobile-visual { max-width: 418px; width: 100%; margin: 0 0 0 auto; } .outcomes-mobile-visual img { max-width: 418px; margin: 0 auto 0 0; height: auto; width: 100%; } .outcomes-mobile-bg { text-align: right; } /* Slick dots */ .outcomes-mobile .slick-dots { position: static; display: flex !important; justify-content: center; align-items: center; gap: 10px; padding: 8px 16px 0; margin: 0; list-style: none; bottom: auto; width: 100%; } .outcomes-mobile .slick-dots li { width: auto; height: auto; margin: 0; } .outcomes-mobile .slick-dots li button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.35); font-size: 0; line-height: 0; color: transparent; } .outcomes-mobile .slick-dots li button:before { display: none; } .outcomes-mobile .slick-dots li.slick-active button { background: var(--color-lime); } /* Arrows + counter */ .outcomes-mobile .outcomes-slider-nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 20px 16px 0; } .outcomes-mobile .outcomes-slider-prev, .outcomes-mobile .outcomes-slider-next { position: relative; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-white); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; } .outcomes-mobile .outcomes-slider-prev.slick-disabled, .outcomes-mobile .outcomes-slider-next.slick-disabled { opacity: 0.35; cursor: default; } .outcomes-mobile .outcomes-slider-counter { display: flex; align-items: baseline; gap: 6px; min-width: 4.5em; justify-content: center; font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0.04em; color: #F5F5F5; } .outcomes-mobile .outcomes-slider-current { color: #ffffff; font-weight: 600; } .outcomes-mobile .outcomes-slider-sep { color: #F5F5F5; font-weight: 400; } .outcomes-slider-nav-button { display: flex; gap: 0; } @media (max-width: 1379px) { .Lanelink-outcomes-block .outcomes-panel-inner { gap: 40px; padding: 0 0 0 clamp(16px, 4vw, 48px); max-width: min(750px, 100%); } .Lanelink-outcomes-block .outcomes-visual-pin, body > .outcomes-visual-pin.is-stuck { width: min(38vw, 640px) !important; } } @media (max-width: 1199px) { .Lanelink-outcomes-block { top: calc(var(--header-height) + 0px); } .Lanelink-outcomes-block .outcomes-panel { padding: 40px 0 48px; } .Lanelink-outcomes-block .outcomes-panel-inner { gap: 24px; max-width: none; padding-left: 0; } .Lanelink-outcomes-block .outcomes-text { flex: 1 1 auto; max-width: none; padding-top: 8px; } .Lanelink-outcomes-block .outcomes-text > p, .Lanelink-outcomes-block .outcomes-text li { font-size: 20px; line-height: 1.45; } } @media (max-width: 1024px) { .Lanelink-outcomes-block .outcomes-text { flex: 1 1 auto; max-width: 50%; padding-top: 8px; width: 100%; } } @media (max-width: 991px) { .Lanelink-outcomes-block .outcomes-visual-pin, body > .outcomes-visual-pin.is-stuck { width: min(30vw, 640px); } } @media (max-width: 767px) { .Lanelink-outcomes-block { position: sticky; top: calc(var(--header-height) - 20px); height: auto; min-height: 0; } .better-outcomes { position: relative; top: 0; } .Lanelink-outcomes-block .outcomes-body { height: auto; } .Lanelink-outcomes-block .outcomes-panel { height: auto; min-height: 0; padding: 30px 0 40px; } .Lanelink-outcomes-block .outcomes-visual-pin, .Lanelink-outcomes-block .outcomes-visual, body > .outcomes-visual-pin.is-stuck, body > .outcomes-visual-pin.is-hidden { display: none; } .Lanelink-outcomes-block .outcomes-panel-inner { gap: 16px; } .Lanelink-outcomes-block .outcomes-num { font-size: 36px; } .Lanelink-outcomes-block .outcomes-text { padding-top: 4px; } .Lanelink-outcomes-block .outcomes-text h3 { font-size: 24px; line-height: 1.25; } .Lanelink-outcomes-block .outcomes-text > p, .Lanelink-outcomes-block .outcomes-text li { font-size: 16px; line-height: 1.5; } }