Gainsight/Custom_Templates/customer_templates/Skuid/_footer.html.liquid

<footer class="np-footer">
  <div class="np-footer-top custom-footer-divider mobile-footer">
    <div>
      <span>© {{"now" | date: "%Y"}} Skuid, Inc.</span>
      <span class="np-hidden-mobile inline-text" style="margin-left: 15px;">
        <a class="policy-links" href="{{ current_school.terms_of_service_url }}">Terms of Use</a> | <a class="policy-links" href="https://www.skuid.com/legal/privacy-policy">Privacy Policy</a>
      </span>
      <span class="inline-text" style="margin-left: 15px;">
        Can we help you? Contact us at <a href="mailto:training@skuid.com" class="policy-links inline-text">training@skuid.com</a> 
      </span>
    </div>
    <div>
      <nav class="np-footer-social-links">
        {% if website_footer.show_social_media_links? %}
        <ul class="np-footer-social-links-list">
          {% for social_media_link in website_footer.social_media_links %}
          <li class="np-footer-social-links-item">
            <a class="np-footer-social-links-link np-button-color" href="{{ social_media_link.link }}" target="_blank"
              title="{{ social_media_link.name }}">
              <i class="np-footer-social-links-icon
                        np-button-color
                        fab fa-{{ social_media_link.name }}"></i>
            </a>
          </li>
          {% endfor %}
        </ul>
        {% endif %}
      </nav>
    </div>
  </div>
</footer>
{% include "carousels" %}

{% if current_person.signed_in? %}
  <script>
    $(document).ready(function () {
        fixCorauselCrash('carousel')
        fixCorauselCrash('lp-carousel')
      })

  function fixCorauselCrash(htmlClass) {
      if ($('.' + htmlClass).width() < 150) {
        setTimeout(function () {
          $('.' + htmlClass).slick('setPosition');
        }, 600);
      }
    }
  </script>

  <style>
    @media (max-width: 2499px) {
      .np-footer {
        padding-left: 21%;
      }
    }

    @media (min-width: 2500px) {
      .np-footer {
        padding-left: 16%;
      }
    }
  </style>
{% endif %}

<style>
  .policy-links {
    font-family: Inter;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
  }

  .np-footer {
    background-color: transparent;
  }

  .custom-footer-divider {
    border-top: 1px solid #D7D8DA;
  }

  @media (max-width: 768px) {
    #ReadMoreButon {
      margin-bottom: 10px;
    }

    .np-footer {
      padding-left: 0;
      width: 90%;
      margin: 0 5%;
    }

    .custom-footer-divider {
      font-size: 0.9rem !important;
      flex-direction: column;
    }

    .np-footer-social-links-list {
      margin-bottom: 0;
    }

    .mobile-footer {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }

  .popup-button-container {
    display: flex;
    justify-content: space-around;
  }
  .popup-button {
    width: 160px;
    height: 50px;
  }
  @media (max-width:768px) {
    .popup-button {
      margin-bottom: 0;
    }
    .popup-button-container {
      flex-direction: column;
      align-items: center;
    }
  }
  .overlay {
    z-index: 1000;
    position: fixed;
    top: 0;
    bottom: -100%;
    left: -2%;
    right: -2%;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
  }
  .overlay:target {
    visibility: visible;
    opacity: 1;
  }
  .popup {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 5s ease-in-out;
  }
  .popup h2 {
    margin-top: 0;
    color: #333;
    font-family: F37 Moon !important;;
  }
  .popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  .popup .close:hover {
    color: #06D85F;
  }
  .popup .content {
    max-height: 30%;
    overflow: auto;
    font-family: F37 Moon !important;
  }
  @media screen and (max-width: 700px) {
    .box {
      width: 70%;
    }
    .popup {
      width: 70%;
    }
  }
</style>

{%comment%} View More Styles/Scripts {%endcomment%}
<style>
  .view-more-hidden{
    display: block;
  }

  .view-more-button{
    display: none;
  }

  @media (max-width: 767px){
    .view-more-hidden{
      display: none;
    }

    .view-more-button{
      display: block;
      width: 50%;
      margin: 0 auto;
      float: none;
    }
  }

</style>

<script>
  let viewMore = () => {
    let additionalCourses = document.querySelectorAll('.view-more-hidden');
    let viewMoreButton = document.querySelector('.view-more-button');

    viewMoreButton.style.display = 'none';

    additionalCourses.forEach((courseNode) => {
      courseNode.style.display = 'block';
    })
  }
</script>
{% if current_person.signed_in? %}
  <script>
    console.log('Appcues Identifying')
    window.Appcues.identify(
      '{{current_person.id}}',
      {
        accountId: '{{current_person.id}}', 
        firstName: '{{current_person.first_name}}', 
        lastName: '{{current_person.last_name}}',
        email: '{{current_person.email}}',
        createdAt: '{{current_person.created_at}}'
      }
    );
  </script>
{% endif %}