_home.scss

.home {
  .wrapper {
    @include container-fixed();

    @media (min-width: $screen-sm-min) {
      width: $container-sm;
    }
    @media (min-width: $screen-md-min) {
      width: $container-md;
    }
    @media (min-width: $screen-lg-min) {
      width: $container-lg;
    }
  }

  line-height: 1.3;

  .site-header {
    background-color: transparent;
    color: $grey;
    position: fixed;
    width: 100%;
    z-index: 99;
  }

  .section {
    .inner {
      @include container-fixed();

      @media (min-width: $screen-sm-min) {
        max-width: $container-sm;
      }

      @media (min-width: $screen-md-min) {
        max-width: 830px;
      }
    }

    nav {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;

      ul {
        margin: 0;
        padding: 0;
        @include container-fixed();

        @media (min-width: $screen-sm-min) {
          width: $container-sm;
        }
        @media (min-width: $screen-md-min) {
          width: $container-md;
        }
        @media (min-width: $screen-lg-min) {
          width: $container-lg;
        }

        li {
          display: block;
          width: 50%;

          .icon {
            display: inline-block;
            width: 56px;
            height: 56px;
          }

          svg {
            fill: #fff;
            background-color: $grey;
            width: 100%;
            height: 100%;
            padding-top: 6px;
          }

          .text {
            display: none;

            @media (min-width: $screen-sm-min) {
              display: inline-block;
              font-size: 20px;
              line-height: 56px;
              font-weight: 500;
            }
          }

          &.prev {
            float: left;

            .icon {
              float: left;
              @include rotate(180deg);
              margin-right: 15px;
            }

          }
          &.next {
            float: right;
            text-align: right;

            .icon {
              float: right;
              margin-left: 15px;
            }
          }

          a {
            color: inherit;
            text-decoration: none;
          }
        }
      }
    }
  }

  .search {
    background-color: $lighter-grey;

    h1 {
      font-size: 1.5em;

      @media (min-width: $screen-sm-min) {
        font-size: 36px;
      }
    }

    .form {
      font-size: 1.2em;

      @media (min-width: $screen-sm-min) {
        margin-top: 8vh;
        font-size: 1.7em;
        margin-left: -1em;
        margin-right: -1em;
      }

      .input-group {
        font-size: inherit;
      }
    }

    .featured {
      display: none;

      @media (min-width: $screen-sm-min) and (min-height: 500px) {
        display: block;
        float: left;
        width: 50%;
        margin-top: 8vh;

        h3 {
          font-size: 15px;
          border-bottom: solid 1px rgba($text-color,0.1);
          margin: $base-spacing/2 0 1em 0;
          padding: 6px 0;
          color: rgba($text-color,0.25);
          position: relative;

          .icon {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 2px;
            right: 0;

            svg {
              width: 100%;
              height: 100%;
            }
          }
        }

        a {
          display: block;
          margin-top: 3vh;
          color: rgba($text-color,0.75);
          text-decoration: none;

          &:hover {
            color: $primary-colour;
          }
        }

        svg {
          float: left;
          width: 32px;
          height: 32px;
          fill: currentColor;
        }

        h4,
        p {
          margin-left: 45px;
        }

        h4 {
          font-size: 18px;
          margin-bottom: 0.2em;
        }

        p {
          font-size: 15px;
        }

        &.data-package {
          .inner {
            padding-left: 0;
          }
        }
        &.app {
          .inner {
            padding-right: 0;
          }
        }
      }
    }
  }

  .what,
  .publishers,
  .hackers,
  .society {
    .inner {
      font-size: 5vmin;
      font-weight: 500;

      h2 {
        font-size: 1.3em;
        font-weight: 600;
      }

      a {
        color: inherit;
      }
    }
  }

  .what {
    background-color: $grey;
    @include light-text;

    nav {
      ul {
        li {
          svg {
            fill: $grey;
            background-color: #fff;
          }
        }
      }
    }
  }

  .publishers {
    background-color: $green;
    @include light-text;

    nav {
      ul {
        li {
          svg {
            fill: $green;
            background-color: #fff;
          }
        }
      }
    }
  }

  .hackers {
    background-color: $purple;
    @include light-text;

    nav {
      ul {
        li {
          svg {
            fill: $purple;
            background-color: #fff;
          }
        }
      }
    }
  }

  .society {
    background-color: $blue;
    @include light-text;

    nav {
      ul {
        li {
          svg {
            fill: $blue;
            background-color: #fff;
          }
        }
      }
    }
  }

  .involved {
    .inner {
      font-size: 3.5vmin;
      line-height: 1.4;

      h2 {
        font-size: 1.8em;
        font-weight: 600;
      }
    }
  }

  &.fp-viewing-search,
  &.fp-viewing-involved {
    .logo {
      svg {
        fill: $grey;
      }
      &.small{
        background-color: $grey;
        svg {
          fill: #fff;
        }
      }
    }
  }

  &.fp-viewing-what,
  &.fp-viewing-publishers,
  &.fp-viewing-hackers,
  &.fp-viewing-society {
    .site-header {
      color: #fff;
    }
  }

  &.fp-viewing-publishers {
    .logo {
      &.small{
        svg {
          fill: $green;
        }
      }
    }
  }
  &.fp-viewing-hackers {
    .logo {
      &.small{
        svg {
          fill: $purple;
        }
      }
    }
  }
  &.fp-viewing-society {
    .logo {
      &.small{
        svg {
          fill: $blue;
        }
      }
    }
  }

  &.fp-viewing-footer {
    .site-header {
      display: none;
    }
  }
}