sfp_front_nuxt_serprati_landing/app/assets/css/main.css

@import "tailwindcss";

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@theme {
  --color-primary: #35A30A;
  --color-primary-4: #CDE8C2;

  --color-text: #161616;
  --color-text-2: #505050;

  --color-white-2: #FEFCFF;

  --color-border: #C0C0C0;

  --color-error: #D4183D;

  /* Violet */
  --color-violet-light: #f0e8f1;
  --color-violet-light-hover: #e8ddea;
  --color-violet-light-active: #d0b9d4;
  --color-violet-normal: #661d75;
  --color-violet-normal-hover: #5c1a69;
  --color-violet-normal-active: #52175e;
  --color-violet-dark: #4d1658;
  --color-violet-dark-hover: #3d1146;
  --color-violet-dark-active: #2e0d35;
  --color-violet-darker: #240a29;

  /* Neutral */
  --color-neutral-light: #fefefe;
  --color-neutral-light-hover: #fdfdfd;
  --color-neutral-light-active: #fbfbfb;
  --color-neutral-normal: #f2f2f2;
  --color-neutral-normal-hover: #dadada;
  --color-neutral-normal-active: #c2c2c2;
  --color-neutral-dark: #b6b6b6;
  --color-neutral-dark-hover: #919191;
  --color-neutral-dark-active: #6d6d6d;
  --color-neutral-darker: #555555;
}

/* ── Typography ─────────────────────────────────────────────────── */

.text-h1 {
  font-family: "Nunito", sans-serif;
  font-weight: 300;
  font-size: 96px;
  line-height: 100%;
  letter-spacing: -1.5px;
}

.text-h2 {
  font-family: "Nunito", sans-serif;
  font-weight: 300;
  font-size: 60px;
  line-height: 100%;
  letter-spacing: -0.5px;
}

.text-h3 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 100%;
  letter-spacing: 0px;
}

.text-h4 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 100%;
  letter-spacing: 0.25px;
}

.text-h5 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0px;
}

.text-h6 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0.15px;
}

.text-subtitle-1 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.15px;
}

.text-subtitle-2 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.1px;
}

.text-body-1 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.5px;
}

.text-body-2 {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.25px;
}

.text-button {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 1.25px;
}

.text-caption {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.4px;
}

.text-overline {
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

::selection,
::-moz-selection {
  background-color: #E38B37;
  color: white;
}

html {
  font-family: "Poppins", sans-serif;
}