sfp_vue_franchisee_ginastica_cerebro/src/css/app.scss

// app global css in SCSS format
html,
body,
#q-app {
  font-family: "Montserrat" !important;
  font-size: 14px;
}

.font-h1 {
  font-family: "Montserrat";
  font-size: 96px;
  font-weight: 300;
  line-height: 144px;
}

.font-h2 {
  font-family: "Montserrat";
  font-size: 60px;
  font-weight: 300;
  line-height: 90px;
}

.font-h3 {
  font-family: "Montserrat";
  font-size: 48px;
  font-weight: 400;
  line-height: 72px;
}

.font-h4 {
  font-family: "Montserrat";
  font-size: 34px;
  font-weight: 400;
  line-height: 51px;
}

.font-h5 {
  font-family: "Montserrat";
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
}

.font-h6 {
  font-family: "Montserrat";
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.7px;
}

.font-subtitle-1 {
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.15px;
}

.font-subtitle-2 {
  font-family: "Montserrat";
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0.1px;
  text-align: left;
}

.font-body-1 {
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
}

.font-body-2 {
  font-family: "Montserrat";
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
}

.font-overline {
  font-family: "Montserrat";
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 1.5px;
}

.font-caption {
  font-family: "Montserrat";
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.4px;
}

.font-button {
  font-family: "Montserrat";
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 1.25px;
}

.input-disable {
  .q-field--outlined .q-field__control::before {
    border: 1px solid #565454 !important;
    transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.q-input-border {
  .q-field__control::before {
    border: 1px solid #565454 !important;
    transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.q-field--labeled .q-field__control,
.q-field--focused .q-field__control {
  border-radius: 4px !important;
}

.q-field--outlined.q-field--rounded .q-field__control {
  border-radius: 4px;
}

// quasar component overrides
.q-field__control,
.q-item--active,
.q-toggle__inner--truthy {
  color: #ED3237 !important;
  border-radius: 8px;
}

.q-input-no-border {
  .q-field__control,
  .q-item--active,
  .q-toggle__inner--truthy,
  .q-field--labeled .q-field__control,
  .q-field--focused .q-field__control,
  .q-field--outlined.q-field--rounded .q-field__control {
    color: #ED3237 !important;
    border-radius: 0px;
  }
}

.select-rounded {
  border-radius: 4px;
}

.default-button-padding {
  padding: 12px 16px 12px 16px !important;
  border-radius: 4px;
}

.q-checkbox__bg {
  border-radius: 4px !important;
  border: 1px solid #ED3237 !important;
}

.img-gradient {
  position: relative;
}

.img-gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%; /* A metade inferior da imagem */
  background: linear-gradient(0, #090808 20.86%, rgba(0, 0, 0, 0.3) 81.63%);
}

.rounded-full {
  border-radius: 50% !important;
}

.q-select__dialog {
  background-color: #ffffff !important;
  border: 0.4px solid #5b5a5a6e !important;
  border-radius: 8px !important;
  box-shadow: 0px 1px 2px 0px #00000040 !important;
  color: #000000 !important;
}

.q-menu {
  background-color: #ffffff;
  border: 0.4px solid #5b5a5a6e;
  border-radius: 8px !important;
  box-shadow: 0px 1px 2px 0px #00000040;
  color: #090808 !important;
}

.q-item,
.q-field__append {
  color: #090808 !important;
}

.card-size {
  width: 100px;
  height: 80px;
  padding: 8px 16px 8px 16px;
  border-radius: 8px;
  box-shadow: 0px;
  text-transform: capitalize;
}