Slider careers | Outset Medical

Outsetters in their own words

  <div class="stack">
    <div class="card">
      <img
        src="/wp-content/uploads/2025/06/Outsetters-Thumbnail_Marc-Nash_263x410.jpg"
        alt="" /><a href="#" class="open-popup-link id-patients-page id-5704" data-popup-id="5973" target="_blank" style="font-size:20px;color:#fff; position:absolute"><span class="slider-icon-play "></span></a>
    </div>
    
    <div class="card">
      <img
        src="/wp-content/uploads/2025/06/Outsetters-Thumbnail_Marco-Morales_263x410.jpg"
        alt="" /><a href="#" class="open-popup-link  id-patients-page id-5705" data-popup-id="5976" target="_blank" style="font-size:20px;color:#fff; position:absolute"><span class="slider-icon-play "></span></a>
    </div>
    

    <div class="card">
      <img
        src="/wp-content/uploads/2025/06/Outsetters-Thumbnail_Manish-Khemani_263x410.jpg" /><a href="#" class="open-popup-link id-patients-page id-5706" data-popup-id="5978" target="_blank" style="font-size:20px;color:#fff; position:absolute"><span class="slider-icon-play "></span></a>
    </div>
    
  </div>

	.stack-move em::before, .stack-move em::after{
		display:none;
	}
.stack {
  position: relative;
  width:100%;
  height:400px;
}
.card {
  max-width:250px;
}

.card {
  position: absolute;
  transform: translate(-16%, 10%);
  width: 100%;
  height: 390px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  font-family: sans-serif;
  font-size: 10rem;
  background-color: transparent;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25),
    0 15px 20px 0 rgba(0, 0, 0, 0.125);
  transition: transform 0.6s;
  user-select: none;
	z-index:2;
	transition: all 0.4s ease-out;
}

.card img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  transition: transform 0.4s;
}

.card:nth-last-child(n + 5) {
  --x: calc(16% + 30px);
  transform: translate(var(--x), 0%) scale(0.85);
 filter: grayscale(100%) blur(4px);
}

.card:nth-last-child(4) {
  --x: calc(16% + 10px);
  transform: translate(var(--x),0%) scale(0.9);
	filter: grayscale(100%) blur(4px);
}

.card:nth-last-child(3) {
  --x: calc(16% - 10px);
  transform: translate(var(--x), 0%) scale(0.95);
	filter: grayscale(100%) blur(4px);
}

.card:nth-last-child(2) {
  --x: calc(16% - 30px);
  transform: translate(var(--x),0%) scale(1);
	filter: grayscale(100%) blur(4px);
}

.card:nth-last-child(1) {
  --x: calc(16% - 50px);
  transform: translate(var(--x), 0%) scale(1.05);
	
}



.swap {
  animation: swap 1.3s ease-out forwards;
}

@keyframes swap {
  30% {
    transform: translate(calc(var(--x) - 250px), 0%) scale(0.85) rotate(-5deg)
      rotateY(65deg);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translate(calc(var(--x) - 30px), 0%) scale(0.5);
    z-index: -1;
  }
}

/* Media queries for keyframes */

@media (max-width: 1200px) {
  @keyframes swap {
    30% {
      transform: translate(calc(var(--x) - 200px), 0%) scale(0.85)
        rotate(-5deg) rotateY(65deg);
    }

    100% {
      transform: translate(calc(var(--x) - 30px), 0%) scale(0.5);
      z-index: -1;
    }
  }
}

@media (max-width: 1050px) {
  @keyframes swap {
    30% {
      transform: translate(calc(var(--x) - 150px), 0%) scale(0.85)
        rotate(-5deg) rotateY(65deg);
    }

    100% {
      transform: translate(calc(var(--x) - 30px), 0%) scale(0.5);
      z-index: -1;
    }
  }
}

/* Media queries for other classes */

@media (max-width: 1200px) {
  .stack {
    width:100%;
    height:400px;
  }
  .content {
    padding-left: 40px;
  }

  .content p {
    padding-right: 40px;
  }

  .card {
    width: 95%;
    height: 390px;
  }
}

@media (max-width: 1050px) {
  .stack {
    width:100%;
    height:400px;
  }
  .content {
    padding-left: 60px;
  }

  .content p {
    line-height: 1.5;
  }

  .card {
    width: 95%;
    height: 390px;
  }
}

@media (max-width: 990px) {
  .stack {
    width:95%;
    height:400px;
  }
  .content p {
    padding-right: 0;
  }

  .card {
    width: 95%;
    height: 390px;
  }
}

@media (max-width: 950px) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: 4fr 3fr;
    grid-template-areas:
      "stacked"
      "content";
  }

  .content {
    grid-area: content;
    text-align: center;
    padding: 0 90px;
  }

  .btn {
    margin-bottom: 30px;
  }

  .stack {
    grid-area: stacked;
  }
}

@media (max-width: 650px) {
  main {
    grid-template-rows: 1fr 1fr;
  }

  .content {
    padding: 0 50px;
  }

  .content h1 {
    padding-left: 0;
  }

  .btn {
    padding: 8px 16px;
  }

  .card {
    width: 95%;
    height: 390px;
  }
}
	.slider-icon-play::before {
    content: '';
    background: #FF6A39 url(https://www.outsetmedical.com/wp-content/uploads/polygon5.png);
border-radius:100px;
    width: 60px;
    height: 60px;
    display: flex;
    background-repeat: no-repeat;
    background-position: 19px center;
}
.slider-icon-play{
  background:#FF6A39;
  width: 60px;
  height: 60px;
}

document.addEventListener("DOMContentLoaded", function () {
  if (typeof jQuery !== 'undefined') {
    (function($) {
      const $stack = $(".stack");
      const $stackMove = $(".stack-move");
      const $cards = $stack.children().toArray().reverse().filter(function(child) {
        return $(child).hasClass("card");
      });

      $.each($cards, function(index, card) {
        $stack.append(card);
      });

      function moveCard() {
        const $lastCard = $stack.children().last();
        if ($lastCard.hasClass("card")) {
          $lastCard.addClass("swap");

          setTimeout(function() {
            $lastCard.removeClass("swap");
            $stack.prepend($lastCard);
          }, 800);
        }
      }

      $stackMove.on('click', moveCard);
    })(jQuery);
  } else {
    console.warn("⚠️ jQuery is not loaded. Check your theme or plugin settings.");
  }
});



document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.open-popup-link').forEach(function (el) {
    el.addEventListener('click', function (e) {
      e.preventDefault();
      const popupId = el.getAttribute('data-popup-id');
      console.log('Clicked popup ID:', popupId); // ✅ Logs the popup ID
      if (typeof bricksOpenPopup === 'function' && popupId) {
        bricksOpenPopup(popupId);
      }
    });
  });
});

<div style="    background: var(--base);
    color: white;
    padding: 10px;
    display: flex;
    justify-content: end;
    max-width: 50px;
    margin-left: auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    max-width: 50px;">
<span class="stack-move"><em><i class="fa-solid fa-arrow-right tf_fa tf-fas-angle-right" aria-hidden="true"></i><use href="#tf-fas-angle-right"></use></i></em> </span></div>