Show Popup on Squarespace with Swiper Slider [Team Members]

team.html

<section class="team-section">
  <div class="swiper teamSwiper" style="max-height: 600px;">
    <div class="swiper-wrapper">

      <!-- Slide 1 -->
      <div class="swiper-slide">
        <div class="card" onclick="openModal(
          'Babu Purevsuren',
          'Owner &amp; CEO',
          '<p>Babu came to the United States in 2004 at just 19 years old. He arrived alone, without family and without speaking English, determined to build a better future through hard work and faith.</p><p>He began by studying English at the English Language Center, then earned a business degree from LDS College, followed by a Construction Management degree from BYU. In 2015, he started a handyman business, which quickly grew into subcontracting work for companies such as UDK, Utah Flood Network, and other restoration providers across Utah.</p><p>In 2019, Babu founded Summit Restoration with a clear purpose: to serve Utah families during some of the most difficult moments of their lives. He believes restoration work is more than construction. It is a calling to help, to serve, and to be a blessing when people need it most.</p>',
          'https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/944532d3-1903-4fbe-8509-1e4803e5dada/1.jpg',
          '#')">
          <img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/944532d3-1903-4fbe-8509-1e4803e5dada/1.jpg" alt="Babu Purevsuren">
          <div class="overlay">
            <h4>Babu Purevsuren</h4>
            <span>Owner & CEO</span>
            <p>Babu came to the United States in 2004 at just 19 years old. He arrived alone, without family and without speaking English, determined to build a better future through hard work and faith.</p>
            <a href="#"><img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/dd3feb9c-4767-435a-97c5-3c309396b1d2/linkedin.png"></a>
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="swiper-slide">
        <div class="card" onclick="openModal(
          'Ronald Medina',
          'Project Manager &amp; Estimator',
          '<p>Ronald brings over 25 years of construction experience to Summit Restoration. Throughout his career, he has repaired and remodeled hundreds of homes across Utah.</p><p>In addition to his construction expertise, Ronald is also a licensed home inspector and has worked closely with realtors and homebuyers, helping them identify property concerns and make confident decisions. He is especially skilled at identifying hidden water leaks and determining the right long-term solution.</p><p>Originally from Venezuela, Ronald is a dedicated father of three and takes pride in providing stability and excellence both at work and at home.</p>',
          'https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/391f02ab-f163-4d74-8ec1-8d7703cc1b86/2.jpg',
          '#')">
          <img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/391f02ab-f163-4d74-8ec1-8d7703cc1b86/2.jpg" alt="Ronald Medina">
          <div class="overlay">
            <h4>Ronald Medina</h4>
            <span>Project Manager & Estimator</span>
            <p>Ronald brings over 25 years of construction experience to Summit Restoration. Throughout his career, he has repaired and remodeled hundreds of homes across Utah.</p>
            <a href="#"><img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/dd3feb9c-4767-435a-97c5-3c309396b1d2/linkedin.png"></a>
          </div>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="swiper-slide">
        <div class="card" onclick="openModal(
          'Angel Ferrell',
          'Senior Project Manager &amp; Lead Technician',
          '<p>Angel has more than 30 years of hands-on construction experience. Over the course of his career, he has remodeled thousands of homes, bathrooms, basements, and full interior spaces.</p><p>He previously worked extensively with developers and real estate investors, contributing to high-volume property renovations and home flips, sometimes overseeing up to 75 homes per year. His depth of experience makes him an invaluable leader in the field.</p><p>Angel is known for his craftsmanship, efficiency, and deep understanding of construction systems. When he\'s on a project, clients can trust it\'s being done right.</p>',
          'https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/911d59ba-9801-4ca9-a181-da34fadfd03d/3.jpg',
          '#')">
          <img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/911d59ba-9801-4ca9-a181-da34fadfd03d/3.jpg" alt="Angel Ferrell">
          <div class="overlay">
            <h4>Angel Ferrell</h4>
            <span>Senior Project Manager & Lead Technician</span>
            <p>Angel has more than 30 years of hands-on construction experience. Over the course of his career, he has remodeled thousands of homes, bathrooms, basements, and full interior spaces.</p>
            <a href="#"><img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/dd3feb9c-4767-435a-97c5-3c309396b1d2/linkedin.png"></a>
          </div>
        </div>
      </div>

      <!-- Slide 4 -->
      <div class="swiper-slide">
        <div class="card" onclick="openModal(
          'Isaac Medina',
          'Mitigation Manager &amp; Lead Technician',
          '<p>Isaac is an IICRC-certified Mitigation Technician and has been a core part of Summit Restoration for six years.</p><p>He specializes in water damage, fire restoration, and mold remediation. Isaac is often the one handling the most difficult jobs, working in attics, crawl spaces, and severely damaged areas where precision and safety are critical.</p><p>Efficient, hardworking, knowledgeable, and approachable, Isaac brings both technical skill and calm reassurance to homeowners during stressful situations.</p>',
          'https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/7b4a7191-bd34-41d5-8b3c-c56142d6259e/4.jpg',
          '#')">
          <img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/7b4a7191-bd34-41d5-8b3c-c56142d6259e/4.jpg" alt="Isaac Medina">
          <div class="overlay">
            <h4>Isaac Medina</h4>
            <span>Mitigation Manager & Lead Technician</span>
            <p>Isaac is an IICRC-certified Mitigation Technician and has been a core part of Summit Restoration for six years.</p>
            <a href="#"><img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/dd3feb9c-4767-435a-97c5-3c309396b1d2/linkedin.png"></a>
          </div>
        </div>
      </div>

      <!-- Slide 5 -->
      <div class="swiper-slide">
        <div class="card" onclick="openModal(
          'Robert Hernandez',
          'Repair &amp; Mitigation Technician',
          '<p>Robert plays a key role in both mitigation and reconstruction projects. He is known for his strong work ethic, problem-solving mindset, and ability to handle complex and physically demanding tasks.</p><p>He takes pride in finding practical solutions, maintaining equipment and facilities, and ensuring projects stay on schedule. His dedication and attention to detail help keep Summit operating at a high level every day.</p>',
          'https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/944532d3-1903-4fbe-8509-1e4803e5dada/1.jpg',
          '#')">
          <img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/944532d3-1903-4fbe-8509-1e4803e5dada/1.jpg" alt="Robert Hernandez">
          <div class="overlay">
            <h4>Robert Hernandez</h4>
            <span>Repair & Mitigation Technician</span>
            <p>Robert plays a key role in both mitigation and reconstruction projects. He is known for his strong work ethic, problem-solving mindset, and ability to handle complex and physically demanding tasks.</p>
            <a href="#"><img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/dd3feb9c-4767-435a-97c5-3c309396b1d2/linkedin.png"></a>
          </div>
        </div>
      </div>

    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>
</section>

<!-- ===== TEAM MODAL ===== -->
<div id="teamModal" class="team-modal-backdrop" onclick="handleBackdropClick(event)">
  <div class="team-modal-box">
    <button class="team-modal-close" onclick="closeModal()" aria-label="Close">&times;</button>
    <div class="team-modal-inner">
      <div class="team-modal-img-wrap">
        <img id="modalImg" src="" alt="">
      </div>
      <div class="team-modal-content">
        <h2 id="modalName"></h2>
        <span id="modalRole"></span>
        <div id="modalDesc"></div>
        <a id="modalLinkedIn" href="#" target="_blank" class="team-modal-linkedin">
          <img src="https://images.squarespace-cdn.com/content/698bbfd98b28c155ce2933c4/dd3feb9c-4767-435a-97c5-3c309396b1d2/linkedin.png" alt="LinkedIn">
          View LinkedIn
        </a>
      </div>
    </div>
  </div>
</div>

<style>
.card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.team-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.team-modal-backdrop.active {
  display: flex;
  animation: fadeIn 0.25s ease;
}
.team-modal-box {
  position: relative;
  background: #fff;
  border-radius: 18px;
  max-width: 780px;
  width: 100%;
  max-height: 90vh;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
  overflow: hidden;
  animation: slideUp 0.3s cubic-bezier(.22,.68,0,1.2);
  display: flex;
  flex-direction: column;
}
.team-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: rgba(0,0,0,0.08);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}
.team-modal-close:hover { background: rgba(0,0,0,0.16); }
.team-modal-inner {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  flex: 1;
}
.team-modal-img-wrap {
  width: 260px;
  min-width: 260px;
  flex-shrink: 0;
}
.team-modal-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-modal-content {
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.team-modal-content h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 400;
  color: #000;
  line-height: 1.2em;
}
.team-modal-content span {
  font-size: 0.92rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Full HTML paragraphs in modal */
#modalDesc p {
  margin: 10px 0 0;
  font-size: 0.97rem;
  color: #444;
  line-height: 1.7;
}
.team-modal-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 20px;
  background: #0077b5;
  color: #fff !important;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  width: fit-content;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.team-modal-linkedin:hover {
  background: #005e8e;
  transform: translateY(-1px);
}
.team-modal-linkedin img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
  .team-modal-inner { flex-direction: column; }
  .team-modal-img-wrap { width: 100%; min-width: unset; height: 240px; }
  .team-modal-content { padding: 24px 20px 28px; }
  .team-modal-content h2 { font-size: 1.3rem; }
}
</style>

<script>
function openModal(name, role, descHTML, imgSrc, linkedinUrl) {
  document.getElementById('modalName').textContent = name;
  document.getElementById('modalRole').innerHTML   = role;
  document.getElementById('modalDesc').innerHTML   = descHTML;  // full HTML
  document.getElementById('modalImg').src          = imgSrc;
  document.getElementById('modalImg').alt          = name;
  document.getElementById('modalLinkedIn').href    = linkedinUrl;

  document.getElementById('teamModal').classList.add('active');
  document.body.style.overflow = 'hidden';
}
function closeModal() {
  document.getElementById('teamModal').classList.remove('active');
  document.body.style.overflow = '';
}
function handleBackdropClick(e) {
  if (e.target === document.getElementById('teamModal')) closeModal();
}
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeModal();
});
</script>