lowdefy/packages/website/public/styles.less

@font-face {
  font-family: "Geologica";
  src: url('fonts/Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf') format('truetype');
}

@min768: ~"(min-width: 768px)";
@min992: ~"(min-width: 992px)";

h1 {
  font-family: Geologica;
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */

  @media @min768 {
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem; /* 40px */
  }
  @media @min992 {
    font-size: 3rem; /* 48px */
    line-height: 3.25rem;
  }
}

h2 {
  font-family: Geologica;
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */

  @media @min768 {
    font-size: 1.875rem; /* 30px */
    line-height: 2.25rem; /* 36px */
  }
  @media @min992 {
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem; /* 40px */
  }
}

h3 {
  font-family: Geologica;
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */

  @media @min768 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
  }

  @media @min992 {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
  }
}

h4 {
  font-family: Geologica;
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */

  @media @min768 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }
  @media @min992 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
  }
}

h5 {
  font-family: Geologica;
  font-size: 0.875rem; /* 14px */
  line-height: 1rem; /* 22px */

  @media @min768 {
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
  }
  @media @min992 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }
}

p {
  font-size: 0.875rem; /* 14px */
  @media @min992 {
    font-size: 1rem; /* 16px */
  }
}

li {
  font-size: 0.875rem; /* 14px */
  @media @min992 {
    font-size: 1rem; /* 16px */
  }
}

hr {
  height: 2px;
  width:30%;
  background-color:#1890ff;
  border-width: 0;
}

// marquee component
@keyframes marquee {
  0% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.marqueelogo {
  height: 40px;
  padding-right: 5.4rem;
  filter: grayscale(100%) opacity(40%);
}