391 lines
10 KiB
CSS
391 lines
10 KiB
CSS
@font-face {
|
|
font-family: "Gilroy";
|
|
src:
|
|
url("../assets/fonts/Gilroy-Bold.woff2") format("woff2"),
|
|
url("../assets/fonts/Gilroy-Bold.woff") format("woff");
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Gilroy";
|
|
src:
|
|
url("../assets/fonts/Gilroy-Black.woff2") format("woff2"),
|
|
url("../assets/fonts/Gilroy-Black.woff") format("woff");
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Gilroy";
|
|
src:
|
|
url("../assets/fonts/Gilroy-Regular.woff2") format("woff2"),
|
|
url("../assets/fonts/Gilroy-Regular.woff") format("woff");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
/* Primitive values */
|
|
--bg-svg-color: #ffffff;
|
|
|
|
/* Colors */
|
|
--dark-gray: #252525;
|
|
--light-gray: #444444;
|
|
--base-white: #ffffff;
|
|
--base-black: #000000;
|
|
|
|
--main-pink-50: #fcedf1;
|
|
--main-pink-100: #f7c8d4;
|
|
--main-pink-200: #f3adc0;
|
|
--main-pink-300: #ee87a3;
|
|
--main-pink-400: #ea7091;
|
|
--main-pink-500: #e54c75;
|
|
--main-pink-600: #d0456a;
|
|
--main-pink-700: #a33653;
|
|
--main-pink-800: #7e2a40;
|
|
--main-pink-900: #602031;
|
|
|
|
--main-yellow-50: #fef8f1;
|
|
--main-yellow-100: #fde9d4;
|
|
--main-yellow-200: #fbdfbf;
|
|
--main-yellow-300: #fad0a1;
|
|
--main-yellow-400: #f9c78f;
|
|
--main-yellow-500: #f7b973;
|
|
--main-yellow-600: #e1a869;
|
|
--main-yellow-700: #af8352;
|
|
--main-yellow-800: #88663f;
|
|
--main-yellow-900: #684e30;
|
|
|
|
--main-mistyRose-50: #fefcfa;
|
|
--main-mistyRose-100: #fcf6f0;
|
|
--main-mistyRose-200: #faf2e9;
|
|
--main-mistyRose-300: #f8ece0;
|
|
--main-mistyRose-400: #f6e8d9;
|
|
--main-mistyRose-500: #f4e2d0;
|
|
--main-mistyRose-600: #decebd;
|
|
--main-mistyRose-700: #ada094;
|
|
--main-mistyRose-800: #867c72;
|
|
--main-mistyRose-900: #665f57;
|
|
|
|
/* Fonts */
|
|
--font-family-primary: "Gilroy";
|
|
|
|
/* Font sizes */
|
|
/* Desktop: */
|
|
--xsm-desktop: 8px;
|
|
--sm-desktop: 12px;
|
|
--base-desktop: 16px;
|
|
--h6-desktop: 20px;
|
|
--h5-desktop: 28px;
|
|
--h4-desktop: 40px;
|
|
--h3-desktop: 52px;
|
|
--h2-desktop: 68px;
|
|
--h1-desktop: 88px;
|
|
/* Movil: */
|
|
--xsm-mobile: 8px;
|
|
--sm-mobile: 12px;
|
|
--base-mobile: 16px;
|
|
--h6-mobile: 18px;
|
|
--h5-mobile: 20px;
|
|
--h4-mobile: 24px;
|
|
--h3-mobile: 28px;
|
|
--h2-mobile: 32px;
|
|
--h1-mobile: 36px;
|
|
/* line-heights */
|
|
/* Desktop: */
|
|
--lh-xsm-desktop: 12px;
|
|
--lh-sm-desktop: 18px;
|
|
--lh-base-desktop: 24px;
|
|
--lh-h6-desktop: 30px;
|
|
--lh-h5-desktop: 40px;
|
|
--lh-h4-desktop: 56px;
|
|
--lh-h3-desktop: 64px;
|
|
--lh-h2-desktop: 80px;
|
|
--lh-h1-desktop: 104px;
|
|
/* Movil: */
|
|
--lh-xsm-mobile: 12px;
|
|
--lh-sm-mobile: 18px;
|
|
--lh-base-mobile: 24px;
|
|
--lh-h6-mobile: 28px;
|
|
--lh-h5-mobile: 28px;
|
|
--lh-h4-mobile: 32px;
|
|
--lh-h3-mobile: 40px;
|
|
--lh-h2-mobile: 40px;
|
|
--lh-h1-mobile: 40px;
|
|
|
|
/* spacing, padding, margin */
|
|
--space-none: 0px;
|
|
--space-1: 8px;
|
|
--space-2: 16px;
|
|
--space-3: 24px;
|
|
--space-4: 32px;
|
|
--space-5: 48px;
|
|
--space-6: 64px;
|
|
--space-7: 96px;
|
|
--space-8: 128px;
|
|
--space-9: 160px;
|
|
|
|
/* Tokens */
|
|
/* Light theme (default) */
|
|
--main-bg-color: var(--base-white);
|
|
--main-text-color: var(--light-gray);
|
|
--secundary-text-color: var(--base-white);
|
|
--card-bg-color: var(--main-mistyRose-500);
|
|
--naliia-n-bg-color: var(--main-pink-500);
|
|
--main-icon-color: var(--light-gray);
|
|
--navbar-border-color: rgba(68, 68, 68, 0.2);
|
|
--navbar-n-naliia-start: var(--main-pink-500);
|
|
--navbar-n-naliia-end: var(--main-yellow-500);
|
|
--main-border: 1px solid rgba(68, 68, 68, 0.2);
|
|
--pricingcard-bgcolor: var(--dark-gray);
|
|
--pricingcard-section-bgcolor: var(--dark-gray);
|
|
--pricingcard-sec-car-bgcolor: var(--light-gray);
|
|
--pricingcard-plantype-bgcolor: var(--main-pink-500);
|
|
--pricingcard-plantype-txtcolor: var(--base-white);
|
|
--pricingcard-value-txtcolor: var(--base-white);
|
|
--pricingcard-features-subtitlecolor: var(--main-pink-500);
|
|
--pricingcard-features-txtcolor: var(--base-white);
|
|
|
|
/* spacing, padding, margin */
|
|
--space-none-0: var(--space-none);
|
|
--space-sm-8px: var(--space-1);
|
|
--space-md-16px: var(--space-2);
|
|
--space-lg-24px: var(--space-3);
|
|
--space-xl-32px: var(--space-4);
|
|
--space-2xl-48px: var(--space-5);
|
|
--space-3xl-64px: var(--space-6);
|
|
--space-4xl-96px: var(--space-7);
|
|
--space-5xl-128px: var(--space-8);
|
|
--space-6xl-160px: var(--space-9);
|
|
|
|
--padding-none-0: var(--space-none);
|
|
--padding-sm-8px: var(--space-1);
|
|
--padding-md-16px: var(--space-2);
|
|
--padding-lg-24px: var(--space-3);
|
|
--padding-xl-32px: var(--space-4);
|
|
--padding-2xl-48px: var(--space-5);
|
|
--padding-3xl-64px: var(--space-6);
|
|
--padding-4xl-96px: var(--space-7);
|
|
--padding-5xl-128px: var(--space-8);
|
|
--padding-6xl-160px: var(--space-9);
|
|
|
|
--margin-none-0: var(--space-none);
|
|
--margin-sm-8px: var(--space-1);
|
|
--margin-md-16px: var(--space-2);
|
|
--margin-lg-24px: var(--space-3);
|
|
--margin-xl-32px: var(--space-4);
|
|
--margin-2xl-48px: var(--space-5);
|
|
--margin-3xl-64px: var(--space-6);
|
|
--margin-4xl-96px: var(--space-7);
|
|
--margin-5xl-128px: var(--space-8);
|
|
--margin-6xl-160px: var(--space-9);
|
|
|
|
/* Font-sizes */
|
|
/* Desktop: */
|
|
--font-desktop-xsm: var(--xsm-desktop);
|
|
--font-desktop-sm: var(--sm-desktop);
|
|
--font-desktop-base: var(--base-desktop);
|
|
--font-desktop-h6: var(--h6-desktop);
|
|
--font-desktop-h5: var(--h5-desktop);
|
|
--font-desktop-h4: var(--h4-desktop);
|
|
--font-desktop-h3: var(--h3-desktop);
|
|
--font-desktop-h2: var(--h2-desktop);
|
|
--font-desktop-h1: var(--h1-desktop);
|
|
/* Movil: */
|
|
--font-mobile-xsm: var(--xsm-mobile);
|
|
--font-mobile-sm: var(--sm-mobile);
|
|
--font-mobile-base: var(--base-mobile);
|
|
--font-mobile-h6: var(--h6-mobile);
|
|
--font-mobile-h5: var(--h5-mobile);
|
|
--font-mobile-h4: var(--h4-mobile);
|
|
--font-mobile-h3: var(--h3-mobile);
|
|
--font-mobile-h2: var(--h2-mobile);
|
|
--font-mobile-h1: var(--h1-mobile);
|
|
|
|
/* Line-heights */
|
|
/* Desktop: */
|
|
--line-height-desktop-xsm: var(--lh-xsm-desktop);
|
|
--line-height-desktop-sm: var(--lh-sm-desktop);
|
|
--line-height-desktop-base: var(--lh-base-desktop);
|
|
--line-height-desktop-h6: var(--lh-h6-desktop);
|
|
--line-height-desktop-h5: var(--lh-h5-desktop);
|
|
--line-height-desktop-h4: var(--lh-h4-desktop);
|
|
--line-height-desktop-h3: var(--lh-h3-desktop);
|
|
--line-height-desktop-h2: var(--lh-h2-desktop);
|
|
--line-height-desktop-h1: var(--lh-h1-desktop);
|
|
/* Movil: */
|
|
--line-height-mobile-xsm: var(--lh-xsm-mobile);
|
|
--line-height-mobile-sm: var(--lh-sm-mobile);
|
|
--line-height-mobile-base: var(--lh-base-mobile);
|
|
--line-height-mobile-h6: var(--lh-h6-mobile);
|
|
--line-height-mobile-h5: var(--lh-h5-mobile);
|
|
--line-height-mobile-h4: var(--lh-h4-mobile);
|
|
--line-height-mobile-h3: var(--lh-h3-mobile);
|
|
--line-height-mobile-h2: var(--lh-h2-mobile);
|
|
--line-height-mobile-h1: var(--lh-h1-mobile);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* Dark theme */
|
|
--navbar-n-naliia-start: var(--base-white);
|
|
--navbar-n-naliia-end: var(--base-white);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100vh;
|
|
background-color: var(--main-bg-color);
|
|
font-family: var(--font-family-primary), sans-serif, Arial;
|
|
}
|
|
|
|
p {
|
|
font-size: var(--font-desktop-base);
|
|
line-height: var(--line-height-desktop-base);
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--main-text-color);
|
|
|
|
@media (max-width: 768px) {
|
|
font-size: var(--font-mobile-base);
|
|
line-height: var(--line-height-mobile-base);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-desktop-h1);
|
|
line-height: var(--line-height-desktop-h1);
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--main-text-color);
|
|
|
|
@media (max-width: 768px) {
|
|
font-size: var(--font-mobile-h1);
|
|
line-height: var(--line-height-mobile-h1);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-desktop-h2);
|
|
line-height: var(--line-height-desktop-h2);
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--main-text-color);
|
|
|
|
@media (max-width: 768px) {
|
|
font-size: var(--font-mobile-h2);
|
|
line-height: var(--line-height-mobile-h2);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--font-desktop-h3);
|
|
line-height: var(--line-height-desktop-h3);
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--main-text-color);
|
|
|
|
@media (max-width: 768px) {
|
|
font-size: var(--font-mobile-h3);
|
|
line-height: var(--line-height-mobile-h3);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--font-desktop-h4);
|
|
line-height: var(--line-height-desktop-h4);
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--main-text-color);
|
|
|
|
@media (max-width: 768px) {
|
|
font-size: var(--font-mobile-h4);
|
|
line-height: var(--line-height-mobile-h4);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
h5 {
|
|
font-size: var(--font-desktop-h5);
|
|
line-height: var(--line-height-desktop-h5);
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--main-text-color);
|
|
|
|
@media (max-width: 768px) {
|
|
font-size: var(--font-mobile-h5);
|
|
line-height: var(--line-height-mobile-h5);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
h6 {
|
|
font-size: var(--font-desktop-h6);
|
|
line-height: var(--line-height-desktop-h6);
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--main-text-color);
|
|
|
|
@media (max-width: 768px) {
|
|
font-size: var(--font-mobile-h6);
|
|
line-height: var(--line-height-mobile-h6);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
a,
|
|
li,
|
|
summary {
|
|
color: var(--main-text-color);
|
|
text-decoration: none;
|
|
font-size: var(--font-desktop-base);
|
|
line-height: var(--line-height-desktop-base);
|
|
|
|
@media (max-width: 768px) {
|
|
font-size: var(--font-mobile-base);
|
|
line-height: var(--line-height-mobile-base);
|
|
}
|
|
}
|
|
|
|
.bg-svg {
|
|
position: absolute;
|
|
top: -180px;
|
|
right: 0px;
|
|
width: 1400px;
|
|
height: 1400px;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
opacity: 0.05;
|
|
transform: translateX(8%);
|
|
}
|
|
|
|
.body-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
z-index: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
}
|