marble/build/templates/landing.css

WeDeploy's style guide and UI components

.header {
  padding: 75px 0 60px;
  text-align: center; }

.header-title {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 57px;
  margin: 0; }

.header-subtitle {
  font-family: "Open Sans", sans-serif;
  font-size: 19px;
  line-height: 24px;
  margin: 25px 0 35px; }

.header-cta a {
  font-size: 17px;
  margin: 0 20px 20px; }

@media (min-width: 600px) {
  .header-title {
    font-size: 99px; }
  .header-subtitle {
    font-size: 24px; } }

@media (min-width: 960px) {
  .header {
    padding: 200px 0 140px; } }

.about {
  background: #0e141a;
  text-align: center;
  padding: 150px 0; }

.about-title {
  color: white;
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 36px;
  margin: 20px 0; }

.about-description {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 26px;
  margin: 0; }

.features {
  padding: 90px 0 90px; }

.feature {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 60px; }

.feature-title {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 32px;
  margin: 20px 0; }

.feature-description {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 26px;
  margin: 0; }

.feature-graphic {
  border-radius: 50%;
  text-align: center; }

.feature .feature-graphic [class^="icon-16-"],
.feature .feature-graphic [class*="icon-16-"] {
  box-shadow: 0 2px 8px rgba(14, 20, 26, 0.2);
  border-radius: 50%;
  color: #00d46a;
  display: block;
  font-size: 28px;
  height: 84px;
  line-height: 84px;
  margin: auto;
  width: 84px; }

.highlight {
  margin: 150px 0; }

.highlight-title {
  font-family: "Galano", sans-serif;
  font-weight: 700;
  font-size: 48px;
  margin: 20px 0; }

.highlight-description {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 20px; }

.highlight-image {
  border-radius: 80px;
  max-width: 100%; }

.footer {
  background: #0e141a;
  padding: 45px 0 30px; }

.footer-description {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  text-align: center; }
  .footer-description a {
    color: white;
    border-bottom: 2px solid #00d46a;
    font-weight: 600; }

@media (min-width: 960px) {
  .footer-description {
    text-align: left; }
  .footer-description:last-child {
    text-align: right; } }