lowdefy/packages/website/public/styles.less

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
}

@primary-color: #1990ff;
@border-radius-base: 20px;
:root {
  --primary-color: @primary-color;
}

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

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

// https://typescale.com/?size=17&scale=1.250&text=Abc&font=Inter&fontweight=800&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000&preview=false
html {
  font-size: 103%;
} /*18px*/

body {
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 1.75;
  font-size: 100%;
}

p {
  margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5 {
  // margin: 3rem 0 1.38rem;
  font-family: Inter, sans-serif;
  font-weight: 800;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {
  font-size: 2.441rem;
}

h3 {
  font-size: 1.953rem;
}

h4 {
  font-size: 1.563rem;
  font-weight: 500;
}

h5 {
  font-size: 1.25rem;
  font-weight: 500;
}

small,
.text_small {
  font-size: 0.8rem;
}

ul.checks {
  list-style: none;
  padding-inline-start: 0;
}

ul.checks li:before {
  content: '✓';
  color: #1990ff;
  padding-right: 1rem;
}

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

th,
td {
  padding: 5px 8px;
  vertical-align: top;
}

// 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%);
}

.gradient-text {
  background-color: #1990ff;
  background-image: linear-gradient(45deg, #1990ff, #65e1da);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.gray-text {
  color: #a3a3a3;
}

.light-blob {
  position: absolute;
  width: 100%;
  height: 800px;
  background: #65e1da;
  filter: blur(100px);
  mix-blend-mode: overlay;
  transform: translate3d(0, 0, 0);
  z-index: 3;
  border-radius: 100%;
  opacity: 0.6;
  pointer-events: none;
}

// Sliders

@slider-track-background-color: @primary-color;
@slider-track-background-color-hover: @primary-color;
@slider-handle-border-width: 0px;
@slider-handle-background-color: @primary-color;
@slider-handle-color: @primary-color;
@slider-handle-size: 18px;
@slider-handle-margin-top: -7px;

.ant-slider-rail {
  height: 10px;
  margin-top: -3px;
  border-radius: 2px;
}

.ant-slider-track {
  height: 10px;
  margin-top: -3px;
  border-radius: 2px;
}

.ant-slider-dot {
  display: none;
}

// CSS Grid for pricing breakdown
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  margin-bottom: 2rem;
}

.pricing-grid .pricing-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}