*{ margin: 0; padding: 0; box-sizing: border-box; } :root{ --surface-white:#ffffff; --primary:#ce0058; --secondary:#910048; --surface-mango:#FFA300; --paragraph:#252A2D; --stroke-section:#EFEFEF; --primary-tone-300:#FEE0EC; } html, body{ font-size: 100%; scroll-behavior: smooth; } body{ font: 400 1.125em/1.75em 'Inter'; color: var(--paragraph); } #page__header{ background-color: var(--surface-white); width: 100%; display: flex; justify-content: center; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.10); padding: 1.25rem 0; } .anchor__header{ cursor: pointer; height: 3rem; } .logo__header{ width: auto; height: 3rem; } #above__fold{ background: radial-gradient(319.58% 141.42% at 0% 0%, rgba(206, 0, 88, 0.00) 0%, rgba(206, 0, 88, 0.05) 100%); } .main__container{ width: 75rem; margin: 0 auto; } .product__intro{ padding: 4.5rem 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; row-gap: 3.75rem; } .product__info{ width: 35.625rem; } .product__title{ margin-bottom: 1.5rem; font: 600 4em/1.2em 'Bree'; color: var(--primary); } .product__subtitle{ font: 400 1.5em/2em 'Inter'; color: var(--paragraph); } .product__cover{ width: 35.625rem; height: 28rem; display: flex; } .product__cover > img{ border-radius: .75rem; width: 100%; height: auto; object-fit: cover; } .main__cta{ border: 3px solid var(--primary); font: 500 1.25em/1.25em 'Inter'; color: var(--primary); text-decoration: none; padding: 1rem 0; display: none; justify-content: center; width: 18.75rem; border-radius: 3.75rem; margin: 2.5rem 0 0 0; } .main__cta:hover{ color: var(--secondary); border-color: var(--secondary); animation: all 500ms ease-in-out; } #product__description{ padding-top: 7.5rem; } .section__division{ border-bottom: 1px solid #EFEFEF; padding-bottom: 7.5rem; } .section__division > h2{ text-align: center; margin-bottom: 4.5rem; } .section__title{ font: 500 3em/1em 'Bree'; color: var(--primary); } .concepts__list{ display: flex; flex-direction: column; row-gap: 1.5rem; } .row__list{ display: flex; flex-direction: row; column-gap: 1.5rem; justify-content: center; } .row__item{ width: 22rem; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .check__icon{ width: 1rem; height: 1rem; margin-right: 1rem; } #product__benefits{ padding-top: 7.5rem; } .benefits__container{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; column-gap: 3.75rem; padding-bottom: 7.5rem; } .section__image{ display: flex; width: 35.625rem; height: 23.75rem; } .section__image > img{ border-radius: .75rem; object-fit: cover; width: 100%; height: auto; } .benefits__content{ width: 35.625rem; height: auto; } .benefits__content > h2{ margin-bottom: 1.875rem; } .benefits__list{ list-style: none; display: flex; flex-direction: column; row-gap: 1.25rem; } .benefits__list > li{ display: flex; flex-direction: row; align-items: center; } .mention__link{ color: var(--primary); text-decoration: underline; } #product__requirements{ background: var(--Gradients-Section, radial-gradient(118.94% 141.42% at 0% 0%, rgba(206, 0, 88, 0.00) 0%, rgba(206, 0, 88, 0.10) 50.52%, rgba(255, 163, 0, 0.10) 78.13%, rgba(255, 163, 0, 0.00) 99.48%)); } .requirements__container{ padding: 7.5rem 0; display: flex; flex-direction: column; align-items: center; } .requirements__container > h2{ text-align: center; margin-bottom: 4.5rem; } .requirements__container > div{ margin-bottom: 4.5rem; } .requirements__action{ border: 2px solid var(--primary); width: 26.25rem; text-align: center; padding: 2rem 0; border-radius: .5rem; font-style: italic; } .legal__container{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; column-gap: 3.75rem; padding-top: 7.5rem; padding-bottom: 7.5rem; } .legal__list{ display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; column-gap: .5rem; } .legal__container > .concepts__list > h2{ margin-bottom: 4.5rem; } .legal__info{ font-size: 1.25em; line-height: 2em; font-weight: 500; } .legal__label{ color: var(--primary); } .legal__documentation{ display: flex; flex-direction: column; row-gap: 1.5rem; margin-top: 1.5rem; } .legal__row{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .legal__row__item{ width: 16.25rem; max-width: 17.0625rem; } .legal__document{ color: var(--primary); text-decoration: underline; display: flex; flex-direction: row; align-items: center; column-gap: .5rem; } .legal__document__icon{ width: auto; height: 1rem; } #related__products{ background: var(--Gradients-Section, radial-gradient(118.94% 141.42% at 0% 0%, rgba(206, 0, 88, 0.00) 0%, rgba(206, 0, 88, 0.10) 50.52%, rgba(255, 163, 0, 0.10) 78.13%, rgba(255, 163, 0, 0.00) 99.48%)); } .related__products__container{ padding: 7.5rem 0 6.25rem; } .related__products__container > .section__title{ text-align: center; max-width: 37.5rem; margin: 0 auto; } .related__slider{ display: flex; flex-direction: row; justify-content: space-between; margin: 4.5rem 0 0; width: 100%; padding: 0 0 1.5rem; column-gap: 1.5rem; scroll-snap-type: x mandatory; overflow-x: visible; overflow-y: visible; -ms-overflow-style: none; scrollbar-width: none; } .related__slider::-webkit-scrollbar{ display: none; } .related__slider__item{ display: flex; flex-direction: column; width: auto; height: auto; scroll-snap-align: center; box-shadow: 1px 3px 12px 0px rgba(0, 0, 0, 0.10); border-radius: .5rem; } .related__slider__cover{ display: flex; width: 24rem; height: 16rem; } .related__slider__image{ object-fit: cover; width: 100%; height: auto; border-radius: .5rem .5rem 0 0; } .related__slider__action{ width: 24rem; height: auto; cursor: pointer; text-decoration: none; } .related__slider__content{ display: flex; justify-content: center; flex-direction: column; width: 24rem; height: auto; background-color: var(--surface-white); padding: 2.5rem 1.5rem; border-radius: 0 0 .5rem .5rem; row-gap: 1.25rem; cursor: pointer; } .related__product__name{ font: 400 1.5em/1.2em 'Bree'; color: var(--primary); width: 100%; } .related__product__description{ color: var(--paragraph); } #help__contact{ padding-top: 7.5rem; } .contact__container{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; column-gap: 3.75rem; padding-bottom: 7.5rem; } .contact__button{ width: auto; height: auto; display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 2.5rem; margin-right: 12.5rem; background-color: var(--surface-white); border-radius: .5rem; box-shadow: 1px 3px 12px 0px rgba(0, 0, 0, 0.10); padding: 1.25rem 0; text-decoration: none; color: var(--paragraph); column-gap: 1rem; cursor: pointer; } .contact__button:hover{ background-color: var(--primary-tone-300); transition: background-color 300ms ease-out; } .contact__icono{ width: 3rem; height: 3rem; } .contact__desktop{ display: block; } .contact__mobile{ display: none; } .contact__text{ text-align: left; } .footer__container{ padding: 7.5rem 0; display: flex; flex-direction: column; row-gap: 3rem; } .footer__content{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .footer__info{ display: flex; flex-direction: row; align-items: center; column-gap: 2rem; } .footer__logo{ display: flex; width: auto; height: 3.75rem; margin: 0; } .footer__logo > img{ width: auto; height: 3.75rem; } .footer__enterprise{ display: flex; flex-direction: column; row-gap: .3rem; } .footer__enterprise > p{ font-size: .875rem; line-height: 1.5rem; } .footer__enterprise > p img{ width: auto; height: 1.375rem; } .footer__social{ display: flex; flex-direction: row; column-gap: 2rem; } .footer__social__icon{ width: 1.5rem; height: 1.5rem; cursor: pointer; } .footer__social__icon > img{ width: 1.5rem; height: 1.5rem; } .closing__message{ font-size: .875rem; line-height: 1.5rem; } @media screen and (max-width:75rem) { .main__container{ width: 100%; } .related__slider{ padding-left: 1.25rem; padding-right: 1.25rem; } } @media screen and (max-width:73rem){ .product__intro{ flex-direction: column; padding-bottom: 0; } .product__info{ width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; text-align: center; } .product__title{ text-align: center; } .product__subtitle{ text-align: center; } .product__cover{ width: 100%; height: auto; } .product__cover > img{ border-radius: 0; height: 37.5rem; } .main__cta{ display: flex; margin: 2.5rem auto 0; } .concepts__list{ column-gap: 1.25rem; align-items: center; } .section__division{ padding-left: 1.25rem; padding-right: 1.25rem; } .row__list{ flex-direction: column; column-gap: 0; row-gap: 1.25rem; } .row__item{ width: 100%; justify-content: center; } #product__benefits{ padding-top: 0; } .benefits__container{ flex-direction: column; } .benefits__content{ width: 100%; padding: 7.5rem 1.25rem 0; } .benefits__content > h2{ text-align: center; } .benefits__list{ align-items: center; } .section__image{ width: 100%; height: auto; } .section__image > img{ border-radius: 0; width: 100%; height: 25rem; object-position: center; } .requirements__container > h2{ width: 100%; } .legal__container{ flex-direction: column-reverse; padding-top: 0; } .legal__container > .concepts__list{ padding: 7.5rem 1.25rem 0; width: 100%; } .legal__container > .concepts__list > .section__title{ width: 100%; text-align: center; } .legal__list{ align-items: center; width: 100%; } .legal__documentation{ row-gap: 1.25rem;align-items: center; } .legal__row{ flex-direction: column; row-gap: 1.25rem; } .legal__row__item{ width: 100%; max-width: 100%; } .legal__document{ justify-content: center; } .related__slider{ overflow-x: scroll; } #help__contact{ padding-top: 0; } .contact__container{ flex-direction: column-reverse; padding-bottom: 0; } .contact__text{ text-align: center; } .contact__button{ margin-right: 0; margin-bottom: 7.5rem; width: 100%; } .footer__container{ padding-left: 1.25rem; padding-right: 1.25rem; } .footer__content{ flex-direction: column; } .footer__info{ flex-direction: column; width: 100%; } .footer__enterprise{ align-items: center; margin-bottom: 2rem; } .closing__message{ text-align: center; } .footer__social{ width: 100%; justify-content: center; } } @media screen and (max-width:37.5rem){ .product__cover > img{ height: auto; } .product__intro{ padding-top: 2.5rem; } .product__title{ font-size: 2.7em; text-align: left; } .product__subtitle{ text-align: left; font-size: 1.25em; } .main__cta{ width: 100%; } .section__title{ font-size: 2.25em; line-height: 1.25em; } .section__image > img{ height: auto; } .section__division > h2{ text-align: left; margin-bottom: 2.5rem; } #product__description{ padding-top: 3rem; } .concepts__list{ align-items: flex-start; } .row__item{ justify-content: flex-start; } .section__division{ padding-bottom: 2.5rem; } .benefits__container{ padding-bottom: 2.5rem; } .benefits__content{ padding-top: 2.5rem; } .benefits__content > h2{ text-align: left; } .benefits__list{ align-items: flex-start; } .requirements__container{ padding: 2.5rem 1.25rem; } .requirements__container > h2{ margin-bottom: 2.5rem; text-align: left; } .requirements__container > div{ margin-bottom: 2.5rem; } .requirements__action{ width: 100%; padding: 1.25rem; } .legal__container{ padding-bottom: 2.5rem; } .legal__container > .concepts__list{ padding-top: 2.5rem; } .legal__container > .concepts__list > .section__title{ margin-bottom: 1.25rem; text-align: left; } .legal__list{ align-items: flex-start; } .legal__document{ justify-content: flex-start; } .related__products__container{ padding-top: 2.5rem; padding-bottom: 1.25rem; } .related__products__container > .section__title{ text-align: left; padding: 0 1.25rem; } .related__slider{ margin-top: 2.5rem; margin-bottom: 0; column-gap: 1.25rem; } .related__slider__action{ width: 17.5rem; } .related__slider__cover{ width: 17.5rem; height: 11.25rem; } .related__slider__content{ width: 17.5rem; padding: 1.5rem 1.25rem; row-gap: 1rem; } .related__product__name{ font-size: 1.14em; } .related__product__description{ font-size: .8em; line-height: 2em; } .contact__text{ text-align: left; } .contact__button{ margin-bottom: 2.5rem; padding-left: 1.25rem; padding-right: 1.25rem; column-gap: 1.25rem; } .contact__desktop{ display: none; } .contact__mobile{ display: block; } .footer__container{ padding-top: 2.5rem; padding-bottom: 2.5rem; } .footer__logo{ margin-bottom: 1.5rem; } .footer__content{ align-items: flex-start; width: 100%; } .footer__info{ align-items: flex-start; } .footer__enterprise{ align-items: flex-start; row-gap: 0; } .footer__social{ justify-content: flex-start; } .closing__message{ text-align: left; } }