@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
:root {
--design-blue-light: #1702FC;
--design-blue: #2B4196;
--design-peach: #FACEBF;
--design-pink: #F4D3E2;
--design-green: #94BEB4;
--design-light: #ffffff;
--design-dark: #171D53;
--design-orange: #F19572;
}
.design_section {
padding: 10rem 0 10rem 0;
position: relative;
}
.design_hero,
.design_footer {
background-image: url(https://www.theschoolab.com/wp-content/themes/theschoolab/design/assets/manifesto.svg);
background-size: cover;
}
.design_hero__title {
color: var(--design-blue-light);
font-family: "Lexend", sans-serif;
font-optical-sizing: auto;
line-height: 95%;
font-weight: 900;
font-style: normal;
font-size: 13rem;
}
.design_footer__title {
color: var(--design-blue-light);
font-family: "Lexend", sans-serif;
font-optical-sizing: auto;
line-height: 95%;
font-weight: 900;
font-style: normal;
font-size: 10rem;
text-align: center;
margin-bottom: 5rem;
}
.design_footer__text {
font-family: "Lexend", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: var(--design-blue-light);
line-height: 125%;
padding: 1rem 0 3rem 0;
text-align: justify;
font-size: 2.5rem;
}
.design_footer__text span {
font-weight: 700;
}
.design_hero__title span {
font-weight: 400;
font-style: normal;
font-size: 7.75rem;
}
.design_hero__quote {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: var(--design-blue-light);
line-height: 95%;
padding: 1rem 0 3rem 0;
text-align: justify;
font-size: 54px;
}
.design_hero__quote--1 {
font-size: 0.74em;
font-weight: 400;
}
.design_hero__quote--1 span {
font-weight: 700;
}
.design_hero__quote--2 {
font-size: 1em;
font-weight: 400;
}
.design_hero__quote--3 {
font-size: 0.77em;
font-weight: 700;
}
.design_hero__quote--4 {
font-size: 0.63em;
font-weight: 700;
}
.design_hero__quote cite {
font-size: 0.5em;
}
.design_hero__scroll::before {
background-image: url(https://www.theschoolab.com/wp-content/themes/theschoolab/design/assets/scroll.svg);
background-repeat: no-repeat;
background-size: 100%;
width: 156px;
height: 100px;
display: inline-block;
content: "";
}
.design_expertises {
background-color: var(--design-blue);
color: var(--design-light);
}
.design_dimension {
background-color: var(--design-pink);
color: var(--design-blue-light);
padding: 10rem 0 20rem 0;
}
.design_dimension::before {
position: absolute;
z-index: 5;
bottom: -60px;
right: -115px;
content: "";
background-image: url(https://www.theschoolab.com/wp-content/themes/theschoolab/design/assets/illu-dimension.svg);
background-repeat: no-repeat;
background-size: 100%;
width: 540px;
height: 500px;
display: inline-block;
content: "";
}
.design_objectifs {
background-color: var(--design-pink);
color: var(--design-blue-light);
padding: 10rem 0 20rem 0;
}
.design_objectifs::before {
position: absolute;
z-index: 5;
bottom: -164px;
right: -7px;
content: "";
background-image: url(https://www.theschoolab.com/wp-content/themes/theschoolab/design/assets/illu-objectifs.svg);
background-repeat: no-repeat;
background-size: 100%;
width: 474px;
height: 476px;
display: inline-block;
content: "";
}
.design_piliers {
background-color: var(--design-green);
color: var(--design-pink);
}
.design_objectifs {
background-color: var(--design-peach);
color: var(--design-green);
}
.design_expertises__border,
.design_dimension__border,
.design_piliers__border {
position: absolute;
top: -6.3rem;
}
.design_objectifs__border {
position: absolute;
top: 0;
}
.design_objectifs__border-bottom {
position: absolute;
bottom: -6.3rem;
}
.design_expertises__border:before {
content: "";
top: 0;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100vw 5rem 0;
border-color: transparent transparent var(--design-blue) transparent;
}
.design_dimension__border:before {
content: "";
top: 0;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 45vw 5rem 55vw;
border-color: transparent transparent var(--design-pink) transparent;
}
.design_piliers__border:before {
content: "";
top: 0;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 55vw 5rem 0;
border-color: transparent transparent var(--design-green) transparent;
}
.design_objectifs__border:before {
content: "";
top: 0;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 5rem 50vw 0rem 50vw;
border-color: transparent var(--design-peach) transparent var(--design-peach);
}
.design_objectifs__border-bottom:before {
content: "";
bottom: 0;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 5rem 0 0 100vw;
border-color: var(--design-peach) transparent transparent transparent;
}
.design__title {
font-family: "Lexend", sans-serif;
font-optical-sizing: auto;
font-size: 5.5rem;
font-weight: 900;
line-height: 85%;
margin-bottom: 2rem;
}
.design__text {
font-family: "Lexend", sans-serif;
font-optical-sizing: auto;
font-size: 1.375rem;
font-weight: 300;
line-height: 125%;
}
.design__content {
display: flex;
padding: 1rem;
}
.design-badges {
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
}
.design_badge {
flex: 1 1 auto;
font-family: "Lexend", sans-serif;
font-optical-sizing: auto;
font-size: 1.5rem;
font-weight: 700;
line-height: 125%;
padding: 1rem;
border: 1px solid var(--design-light);
border-radius: 10rem;
text-align: center;
height: 100%;
margin-bottom: 1rem;
}
.design_button {
font-family: "Lexend", sans-serif;
font-optical-sizing: auto;
font-size: 1rem;
font-weight: 700;
line-height: 125%;
padding: 1rem;
border-radius: 10rem;
text-align: center;
margin-bottom: 1rem;
}
.design_dimension__sub {
display: flex;
gap: 1rem;
}
.design_divider {
width: 2px;
background-color: var(--design-blue-light);
}
.design_button-white {
color: var(--design-dark);
background-color: var(--design-light);
text-decoration: none;
border: 2px solid var(--design-light);
}
.design_button-white:hover {
color: var(--design-light);
border: 2px solid var(--design-light);
background-color: transparent;
text-decoration: none;
}
.design_button-orange {
color: var(--design-light);
background-color: var(--design-orange);
text-decoration: none;
border: 2px solid var(--design-orange);
}
.design_button-orange:hover {
color: var(--design-orange);
border: 2px solid var(--design-orange);
background-color: transparent;
text-decoration: none;
}
.design_expertises__title {
color: var(--design-peach);
}
.design_expertises__text {
flex: 1 0;
padding: 2rem;
color: var(--design-light);
}
.design_dimension__text {
flex: 1 0;
padding: 2rem;
}
.design_piliers__text {
flex: 1 0;
padding: 2rem;
color: var(--design-light);
}
.design_piliers__category-title {
font-size: 2.5rem;
line-height: 100%;
font-weight: 900;
margin-bottom: 1rem;
}
.design_piliers__category-content {
display: flex;
gap: 1rem;
font-size: 1.25;
color: var(--design-light);
}
.design_objectifs__text {
flex: 1 0;
padding: 2rem;
color: var(--design-dark);
}
.design_text-retrait {
float: left;
margin: 0.5rem 1rem 0.5rem 0;
width: 104px;
height: 31px;
}
.design_expertises__text-retrait {
border: solid 3px var(--design-peach);
}
.design_dimension__text-retrait {
border: solid 3px var(--design-blue-light);
}
.design_piliers__text-retrait {
border: solid 3px var(--design-pink);
}
.design_objectifs__text-retrait {
border: solid 3px var(--design-green);
}
.design_number {
background-size: 100%;
flex-basis: 85px;
width: 85px;
height: 120px;
}
.design_expertises__number {
background-image: url(https://www.theschoolab.com/wp-content/themes/theschoolab/design/assets/num-1.svg);
background-repeat: no-repeat;
}
.design_dimension__number {
background-image: url(https://www.theschoolab.com/wp-content/themes/theschoolab/design/assets/num-2.svg);
background-repeat: no-repeat;
}
.design_piliers__number {
background-image: url(https://www.theschoolab.com/wp-content/themes/theschoolab/design/assets/num-3.svg);
background-repeat: no-repeat;
}
.design_objectifs__number {
background-image: url(https://www.theschoolab.com/wp-content/themes/theschoolab/design/assets/num-4.svg);
background-repeat: no-repeat;
}
.design_piliers_content {
width: 100%;
background-image: url(https://www.theschoolab.com/wp-content/themes/theschoolab/design/assets/circle.svg);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center;
}
.design_piliers_content img {
flex-basis: 150px;
width: 100px;
height: auto;
}
.design_objectifs__img {
text-align: center;
width: 100%;
}
.design_objectifs__img img {
width: 50%;
height: auto;
}
@media (max-width: 1200px) {
.design_hero__title {
font-size: 10rem;
}
.design_hero__title span {
font-size: 6.75rem;
}
.design__title {
font-size: 4rem;
}
.design_footer__title {
font-size: 7rem;
margin-bottom: 4rem;
}
.design_footer__text {
font-size: 2rem;
}
.design_badge {
font-size: 1.25rem;
}
.design_dimension::before {
bottom: 43px;
right: -75px;
width: 424px;
height: 320px;
}
}
@media (max-width: 992px) {
.design_section {
padding: 8rem 0 8rem 0;
}
.design_expertises__border,
.design_dimension__border,
.design_piliers__border {
top: -3.3rem;
}
.design_objectifs__border {
top: 0;
}
.design_objectifs__border-bottom {
position: absolute;
bottom: -3.3rem;
}
.design_expertises__border::before {
border-width: 0 100vw 2rem 0;
}
.design_dimension__border::before {
border-width: 0 45vw 2rem 55vw;
}
.design_piliers__border::before {
border-width: 0 55vw 2rem 0;
}
.design_objectifs__border::before {
border-width: 2rem 50vw 0rem 50vw;
}
.design_objectifs__border-bottom:before {
border-width: 2rem 0 0 100vw;
}
.design_hero__title {
font-size: 8rem;
}
.design_hero__title span {
font-size: 5.75rem;
}
.design_hero__quote {
font-size: 40px;
}
.design__title {
font-size: 3.5rem;
}
.design_footer__title {
font-size: 6rem;
margin-bottom: 3rem;
}
.design_footer__text {
font-size: 1.5rem;
}
.design_badge {
font-size: 0.75rem;
}
.design_dimension::before {
bottom: 26px;
right: -115px;
width: 400px;
height: 300px;
}
.design_objectifs::before {
display: none;
}
.design_piliers_content {
background-image: none;
}
.design_piliers__category-title {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.design_section {
padding: 6rem 0 3rem 0;
}
.design_hero__title {
font-size: 6rem;
}
.design__text {
font-size: 1rem;
}
.design_hero__title span {
font-size: 4rem;
}
.design_hero__scroll::before {
width: 100px;
height: 50px;
}
.design_hero__quote {
font-size: 30px;
}
.design__title {
font-size: 3.5rem;
}
.design_text-retrait {
width: 65px;
height: 25px;
}
.design_footer__title {
font-size: 4rem;
margin-bottom: 2rem;
}
.design_footer__text {
font-size: 1rem;
}
.design_dimension::before {
display: none;
}
.design_piliers__category-title {
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.design_hero__title {
font-size: 3rem;
}
.design_hero__title span {
font-size: 2rem;
}
.design_hero__quote {
font-size: 25px;
}
.design__title {
font-size: 2.5rem;
}
.design_footer__title {
font-size: 3rem;
margin-bottom: 1rem;
}
.design_text-retrait {
width: 45px;
height: 20px;
}
}