open-nomad/website/pages/home/style.css

#p-home {
  /* Section-level styling and theming */
  & > section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  & .simple-lightweight,
  & .simplify-operations {
    background: var(--nomad);
    color: white;
  }

  & .utilization-costs {
    background: var(--black);
    color: white;
  }

  /* Local component styling */
  & .headline {
    & h1 {
      margin-bottom: 0.2em;
    }
    & h5 {
      margin-top: 0.5em;
    }
    & .tag {
      background: black;
      color: white;
      padding: 5px;

      &.dark {
        background: white;
        color: black;
      }

      &.green {
        background: white;
        color: var(--nomad);
      }
    }
  }

  & .two-column-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;

    & li {
      flex-basis: 45%;

      &:nth-child(odd) {
        margin-right: 5%;
      }

      @media (max-width: 768px) {
        flex-basis: 100%;
        &:nth-child(odd) {
          margin-right: 0;
        }
      }
    }

    & a {
      color: inherit;
      border-bottom: 1px solid;
      transition: color 0.2s ease;

      &:hover {
        color: var(--nomad-d1);
      }
    }
  }

  & .left-right-list {
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      display: flex;

      @media (max-width: 768px) {
        flex-direction: column;
      }

      &:nth-child(even) {
        flex-direction: row-reverse;

        @media (max-width: 768px) {
          flex-direction: column;
        }
      }

      & .image {
        display: flex;
        flex-basis: 41%;
        align-items: center;
        justify-content: center;

        @media (max-width: 768px) {
          flex-basis: 100%;
          margin: 50px 30px;
        }
      }

      & img {
        max-height: 150px;
      }

      & .text {
        flex-basis: 59%;

        @media (max-width: 768px) {
          flex-basis: 100%;
        }
      }
    }
  }

  & .code-sample {
    background: var(--black);
    padding: 15px 20px 20px 20px;

    & .chrome {
      display: flex;
      margin-bottom: 15px;

      & span {
        width: 12px;
        height: 12px;
        background-color: white;
        border-radius: 50%;
        margin-right: 8px;
      }
    }

    & .green {
      color: #23ffb8;
    }

    & .yellow {
      color: #f5bf49;
    }

    & .blue {
      color: #71a4f5;
    }

    & .bold {
      font-weight: bold;
    }
  }

  /* Section specific styling */
  & .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    & h1 {
      max-width: 750px;
      margin: 32px 0;
    }

    & .g-alert {
      margin-bottom: 32px;
    }

    & .buttons {
      @media (max-width: 768px) {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      & a:first-child {
        margin-right: 16px;

        @media (max-width: 768px) {
          margin-right: 0;
          margin-bottom: 16px;
        }
      }
    }
  }

  & .hybrid-multi-cloud {
    & img {
      max-height: 115px;
      margin: 15px auto;
      display: block;
    }
  }

  & .flexible-workloads {
    & img {
      max-height: 100px;
      margin: 15px auto;
      display: block;
    }
  }

  & .utilization-costs {
    & img {
      display: block;
      margin: 60px auto;
      max-height: 300px;
    }
  }

  & .examples {
    background: var(--gray-7);

    & h3 {
      margin-bottom: 0.2em;
    }

    & .centered {
      max-width: 750px;
      text-align: center;
      margin: 0 auto;
    }
  }
}