styles.less

@import "vendor/bootstrap/less/variables.less";

@sidebarColor: #d54361;
@footerBackgroundColor: #f1f1f1;

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

@media (min-width: @screen-md-min) {
  body > .container-fluid {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  body > .container-fluid > .row {
    flex-grow: 1;
    display: flex;
  }

  .hero-unit {
    margin-right: -(@grid-gutter-width / 2);
  }
}

.hero-unit {
  background-image: url(img/hero-unit.jpg);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 450px;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-unit h1 {
  padding: @grid-gutter-width;
}

.hero-unit .btn-awsm {
  min-width: 150px;
}

.btn.btn-awsm {
  background-color: #FFCE34;
  color: #4C4F56;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 4px solid #C4A650;
  padding: 1rem;
}

a.bold-link {
  color: #9f9f9f;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5rem;
  white-space: pre;
}

.sidebar {
  background-color: @sidebarColor;
  color: white;

  a {
    color: inherit;
  }

  .sidebar-header {
    position: relative;
    background-color: white;
    font-size: 2rem;
    color: #595a5e;
    margin-left: -(@grid-gutter-width / 2);
    margin-right: -(@grid-gutter-width / 2);
    padding: (@grid-gutter-width / 4) (@grid-gutter-width / 2);
    overflow: hidden;
  }

  .sidebar-header .corner {
    position: absolute;

    /* Ensure there isn't a sliver of empty space
     * between the corner and adjacent elements. */
    bottom: -1px;
    right: -1px;

    fill: @sidebarColor;
  }

  .sidebar-login {
    padding-top: 1rem;
    padding-bottom: 3rem;
  }

  .sidebar-menu a {
    position: relative;
    display: block;
    margin: 0 -(@grid-gutter-width / 2);
    padding: @grid-gutter-width / 2;
  }

  .sidebar-menu a:hover, .sidebar-menu a:focus {
    text-decoration: none;
    background-color: darken(@sidebarColor, 10%);
  }

  .sidebar-menu a strong {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
  }

  .sidebar-menu a .help-text {
    font-size: 1.2rem;
    font-weight: 400;
    margin-right: 4em;
  }

  .sidebar-menu a .glyphicon {
    position: absolute;
    right: 4px;
    font-size: 15px;
    top: calc(50% - 15px / 2);
    color: lighten(@sidebarColor, 10%);
  }
}

.values {
  padding: @grid-gutter-width 0;
  font-size: 3rem;

  @media (min-width: @screen-md-min) {
    display: flex;
    align-items: center;
  }

  img {
    width: 100%;
  }
}

.case-studies {
  @quote-symbol-size: 5rem;

  blockquote {
    font-size: 3rem;
    text-align: center;
    font-style: italic;
    border: none;
  }

  .quote-symbol:before {
    margin-left: -0.15em;
    content: '\201C';
  }

  .quote-symbol {
    display: inline-block;
    border-radius: 50%;
    background-color: #f36b21;
    font-family: Georgia, serif;
    color: white;
    padding-top: 0.05em;
    font-size: @quote-symbol-size;
    width: @quote-symbol-size;
    height: @quote-symbol-size;
  }
}

footer {
  .sidebar {
    line-height: 4rem;
    @media (min-width: @screen-md-min) {
      display: flex;
      align-items: flex-end;
    }
  }

  .sidebar a {
    text-transform: uppercase;
    font-weight: 600;
  }

  > div {
    padding: @grid-gutter-width 0;
  }

  > .content {
    background: @footerBackgroundColor;
  }

  .logos div {
    padding: 0 @grid-gutter-width;
  }

  .logos a img {
    height: 100px;
    padding-bottom: @grid-gutter-width;
  }

  .logos a img.maker-party {
    // This is just a hack to make the logo a bit smaller, so it looks
    // about the same size as the other logos.
    //
    // TODO: Accomplish the same thing in a non-hacky way.
    padding-top: 12px;
  }
}