cartodb/assets/stylesheets/common/footer.scss

// Footer styles
// --------------------------------------------------

@import "../variables/mixins";
@import "../variables/colors";
@import "../variables/sizes";
@import '~cartoassets/src/scss/cdb-variables/colors';
@import '~cartoassets/src/scss/cdb-variables/sizes';

.Footer {
  display: block;
  position: relative;
  width: 100%;
  padding: $baseSize * 5 0;
  border-top: 1px solid $cSecondaryLine;
  background: $cThirdBackground;
}

.Footer--light {
  background: WHITE;
}

.Footer.Footer--public {
  padding-bottom: 0;
  overflow: hidden;
  border-top: 0;
  box-shadow: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

.Footer-inner {
  margin-top: $sIcon-layout;
}

.Footer-inner.Footer-inner--public * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.Footer-inner .Footer-logo {
  position: absolute;
  top: $sMargin-element;
  left: 50%;
  margin-left: -$sIcon-layout / 2;
}

.Footer-inner--public .Footer-logo {
  position: static;
  top: auto;
  left: auto;
  margin: 0;
}

.Footer-columns {
  border-top: 1px solid #EEE;
}

.Footer-columns--footer {
  @media (max-width: $sMedia-tablet) {
    padding-bottom: 40px;
  }
  padding-bottom: 60px;
}

.Footer-columns--noBorder {
  border-top: 0;
}

.Footer-column {
  padding-bottom: 40px;
}

.Footer-column--mobile {
  border-top: 1px solid #EEE;
}

.Footer-columnTitle {
  margin-bottom: 12px;
  color: #2E3C43;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.Footer-link {
  transition: color 0.2s ease;
  color: #3AA9E3;
  line-height: 28px;

  &:hover {
    color: #2E3C43;
    text-decoration: none;
  }
}

.Footer-logo,
.Footer-credits {
  display: inline-block;
  vertical-align: middle;
}

.Footer-credits {
  color: #979EA1;
  text-align: left;
}

.Footer-title {
  display: block;
  color: #2E3C43;
  font-weight: 600;
}

.Colophon {
  @media (max-width: 750px) {
    padding-top: 0;
    text-align: left;
  }
  padding-top: 13px;
  text-align: right;
}

.Colophon-item {
  display: inline-block;
}

.Footer-item {
  display: block;
}

.Newsletter {
  position: relative;

  .hs-form {
    margin-right: 0 !important;
    padding-left: 0;

    .input {
      margin-right: 0;
      margin-bottom: 0;
    }

    .hs-input {
      padding-right: 88px;
    }
  }
}

.hs-newsletter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  transition: all 0.15s;
  border: 0;
  border-radius: 0 4px 4px 0;
  outline: none;
  background: #3AA9E3;
  color: #FFF;
  font: 400 13px Lato, sans-serif;
  text-transform: none;
  cursor: pointer;

  &:hover {
    background: darken(#3AA9E3, 5%);
    color: #FFF;
  }
}

@media only screen and (max-width: $sMedia-mobile) {
  .Footer-inner .Footer-logo {
    position: absolute;
    left: 50%;
    margin-left: -$sIcon-layout / 2;
  }

  .Footer-inner--public .Footer-logo {
    position: static;
    top: auto;
    left: auto;
    margin: 0;
  }

  .Footer-logo.Logo.Logo--grey {
    top: 25px;
  }

  .Footer .Footer-inner {
    margin-top: 45px;
  }
}

@media (min-width: $sMedia-tablet) {
  .Footer-list {
    display: flex;
    align-items: center;
    width: 450px;
    padding: 0 $sMargin-element;
  }

  .Footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
  }

  .Footer-inner .Footer-logo {
    position: static;
    top: auto;
    left: auto;
    margin: 0;
  }

  .Footer-list--primary {
    justify-content: flex-start;
  }

  .Footer-list--secondary {
    justify-content: flex-end;
  }

  .Footer-listItem {
    padding: 0 $sMargin-elementInline;
  }

  .Footer-listItem:first-child {
    padding-left: 0;
  }

  .Footer-listItem:last-child {
    padding-right: 0;
  }
}

@media (min-width: $sMedia-desktop) {
  .Footer-list {
    padding: 0;
  }

  .Footer-inner .Footer-logo {
    display: inline-block;
    position: relative;
    top: auto;
    left: auto;
    margin-left: auto;
  }
}