assets/stylesheets/_landing.scss

// ---
// version: 5
// ---

@import "variables";

.landing {
  font-size: $body-font-size;
  background-color: $landing-gl-gray-50;

  // buttons, text and utilities
  .btn-outline-primary {
    transition: 0.3s all;
    border-color: $landing-gl-purple-500;
    color: $landing-gl-purple-500;

    &:hover {
      color: $gds-white;
      background-color: $landing-gl-purple-500;
    }
  }

  // cards
  .card {
    box-shadow: 0 0.5rem 1.5rem -0.75rem $landing-gl-blue-1000;
    border-radius: 0.25rem;
    transition: all 0.5s;

    &.transparent {
      box-shadow: none;
      background-color: transparent;
    }

    .card-title {
      color: $gds-purple-900;
    }

    .card-link {
      text-decoration: none;
      position: relative;

      &:hover {
        text-decoration: underline;
      }
    }

    &:hover {
      box-shadow: 0.1rem 0.5rem 2rem 0rem $landing-gl-blue-1000;
    }
  }

  // images
  img {
    display: inline;
  }

  // sections
  .hero {
    // background-image: url('/assets/images/hero-bg.svg');
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-position: 50% 10%;

    @media (max-width: $bp-sm) {
      // background-image: url('/assets/images/hero-bg-mobile.svg');
    }

    .card-body {
      padding: 1.75rem 2.25rem 2.5rem 2.25rem;
    }

    .intro {
      background: none;
      border: none;
      box-shadow: none;
      font-size: 1.2rem;
      border-bottom: 1px solid #ddd;

      width: 70%;

      @media (max-width: $bp-md) {
        width: 100%;
      }

      .card-title {
        font-size: 3rem;
        line-height: 3.25rem;
        font-weight: 700;
        letter-spacing: -0.05rem;
        color: $gds-purple-900;

        @media (max-width: $bp-xs) {
          font-size: 2rem;
        }
      }

      .algolia-autocomplete {
        width: 100%;
      }

      .search-icon {
        position: absolute;
        left: 2rem;
        top: 6.75rem;
        z-index: 1;

        @media all and (max-width: $bp-sm) {
          top: 10rem;
        }
      }

      .form-control {
        background: $gds-white;
        border: 1px solid $landing-gl-purple-550;
        box-sizing: border-box;
        box-shadow: 0 0 0 0.25rem $landing-gl-blue-200;
        border-radius: 1.5rem;
        padding-left: 2.5rem;
      }

      .card-link {
        font-size: 1.5rem;
        line-height: 1.5rem;
        color: $landing-gl-purple-500;
      }
    }

    .oval {
      border-radius: 50%;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: 43.188rem;
      height: 29rem;
      background: $landing-gl-purple-50;
      mix-blend-mode: multiply;
      opacity: 0.24;
      filter: blur(10.25rem);
    }

    .topic {
      border: 0;

      .card-img-top {
        width: 4rem;
        height: 4rem;
      }

      .card-title {
        font-weight: 500;
        font-size: 1.75rem;
        line-height: 2.125rem;
        color: $gds-purple-900;
      }

      .card-text {
        font-style: normal;
        font-weight: normal;
        font-size: 1rem;
        line-height: 1.5rem;
        color: $landing-gl-gray-500;
      }

      ul {
        list-style: none;
      }

      li {
        margin: 0.5rem 0 0;
      }

      a {
        font-size: 0.875rem;
        line-height: 1.5rem;
        color: $landing-gl-purple-500;
      }
    }

    h2 {
      font-style: normal;
      font-weight: 500;
      font-size: 2.5rem;
      line-height: 3.063rem;
      color: $gds-purple-900;
    }

    .btn {
      color: $gds-white;
      background: $landing-gl-purple-500;
      border: 1px solid $landing-gl-purple-600;
      box-sizing: border-box;
      border-radius: 4px;
      padding: 28px 1.5rem;

      &:hover {
        color: $landing-gl-purple-500;
        background: $gds-white;
      }
    }
  }

  .other {
    background: $gds-white;
    border: 1px solid $landing-gl-gray-50;

    h2 {
      font-weight: 500;
      font-size: 2.5rem;
      line-height: 3.063rem;
      color: $gds-purple-900;
    }

    h5 {
      font-weight: 500;
      font-size: 1.75rem;
      line-height: 2.125rem;
      color: $gds-purple-900;
    }

    ul {
      list-style: none;
      li {
        line-height: 1.313rem;
        margin: 0.5rem;

        &::before {
          position: relative;
          right: 0.2rem;
          top: -0.125rem;
          content: url("/assets/images/rectangle.svg");
        }
      }

      a {
        font-size: 0.875rem;
        color: $landing-gl-purple-700;
      }
    }
  }

  // footer
  footer {
    height: 3rem;
    background-color: $landing-gl-purple-550;

    @media (max-width: $bp-xl) {
      height: auto;
      padding: 1rem 0;
    }

    ul {
      list-style: none;
    }

    a {
      font-style: normal;
      font-weight: normal;
      font-size: 0.875rem;
      line-height: 1rem;
      text-align: center;
      color: $gds-white;

      &:hover {
        color: $gds-white;
      }

      @media (max-width: $bp-xl) {
        display: block;
        text-align: left;
        margin: .5rem 0;
      }
    }

    a:not(:nth-last-child(-n + 2)),
    .ot-sdk-show-settings {
      @media (min-width: $bp-xl) {
        &::after {
          content: '\2022'; // bullet
          margin: 0 .35rem;
          display: inline-block;
          &:hover {
            text-decoration: none;
          }
        }
      }
    }

    .ot-sdk-show-settings {
      all: unset;
      text-align: center;
      color: $gds-white !important;
      font-size: 0.875rem !important;
      line-height: 1rem !important;
      border: 0 !important;
      padding: 0 !important;

      &:hover {
        text-decoration: underline;
        background-color: inherit !important;
      }
      @media (max-width: $bp-xl) {
        display: block;
      }
    }
  }
}

nav.navbar {
  .btn.btn-visit {
    background-color: #6666c4 !important;
  }
}