/* /* @link https://utopia.fyi/type/calculator/?c=360,18,1.333,1240,20,1.414,7,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,NaN */
:root {
--step--2: clamp(0.6252rem, 0.6364rem + -0.0144vw, 0.6331rem);
--step--1: clamp(0.844rem, 0.8276rem + 0.0728vw, 0.884rem);
--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--step-1: clamp(1.4996rem, 1.39rem + 0.487vw, 1.7675rem);
--step-2: clamp(1.999rem, 1.7944rem + 0.9095vw, 2.4992rem);
--step-3: clamp(2.6647rem, 2.3091rem + 1.5805vw, 3.5339rem);
--step-4: clamp(3.552rem, 2.9609rem + 2.6272vw, 4.997rem);
--step-5: clamp(4.7348rem, 3.7813rem + 4.238vw, 7.0657rem);
--step-6: clamp(6.3115rem, 4.8063rem + 6.6899vw, 9.9909rem);
--step-7: clamp(8.4132rem, 6.0757rem + 10.389vw, 14.1272rem);
--mainfont: 'UfficioDisplay', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
--bodyfont: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
--offwhite: hsl(54 4% 95%);
--offblack: hsl(0 34% 12%);
}
body{
font-family: var(--bodyfont);
background-color: var(--offwhite);
color: var(--offblack);
font-size: var(--step-0);
margin: 0;
}
h1{
font-family: var(--mainfont);
text-transform: uppercase;
font-size: var(--step-6);
line-height: 0.8;
margin: 0;
@media screen and (max-width: 768px){
font-size: 12vw;
}
@media screen and (max-width: 1280px) and (min-width: 768px){
font-size: 11vw;
}
}
header > h2{
letter-spacing: 7px;
font-size: var(--step-1);
text-align: center;
@media screen and (max-width: 768px){
font-size: var(--step-0);
letter-spacing: 3px;
}
}
footer h2{
font-family: var(--mainfont);
text-transform: uppercase;
font-size: var(--step-3);
line-height: 0.8;
margin: 0;
margin-bottom: 2rem;
}
footer a{
color: var(--offwhite);
}
h2{
text-transform: uppercase;
font-size: var(--step-0);
font-weight: 600;
line-height: 1;
margin: 0;
margin-bottom: 2rem;
}
h3{
font-family: var(--mainfont);
font-size: var(--step-2);
line-height: 1.1;
margin: 0;
}
header{
height: 70svh;
display: flex;
align-items: center;
justify-content: center;
gap: 0rem;
flex-direction: column;
@media screen and (max-width: 768px){
height: 30svh;
}
}
main{
padding: 0 2rem;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
@media screen and (max-width: 768px){
padding: 0 .5rem;
}
}
section{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.introduction{
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
font-weight: 500;
opacity: .6;
}
section:has(.introduction) > h2{margin-bottom: .5rem}
#flavours{
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0rem;
padding-bottom: 8rem ;
@media screen and (max-width: 1280px){
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 680px){
grid-template-columns: repeat(1, 1fr);
}
}
.card{
font-family: var(--mainfont);
font-size: var(--step-2);
border-radius: 1rem;
border: 0;
aspect-ratio: 1 / 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2rem;
padding: 5% 15% 0 15%;
line-height: 1;
width: 100%;
@media screen and (max-width: 1280px){
font-size: var(--step-2);
}
}
.card span{
font-size: var(--step--1);
font-family: var(--bodyfont);
padding: 0.5rem;
border: 1px solid currentcolor;
border-radius: .5rem;
}
#card-training{
transform: rotate(-2deg);
transition: transform 250ms ease-in-out;
background-image: url('data:image/svg+xml,');
will-change: transform;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: #024c28;
}
#card-training:hover{
transform: rotate(1deg) translateY(-2rem);
}
#training{
background-color: #9cff45;
color: #024c28;
}
#card-assessment{
transform: rotate(4deg);
transition: transform 250ms ease-in-out;
background-image: url('data:image/svg+xml,');
will-change: transform;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: #5b0c3c;
}
#card-assessment:hover{
transform: rotate(1deg) translateY(-2rem);
}
#assessment{
background-color: #ff85cf;
color: #5b0c3c;
}
#card-optimization{
transform: rotate(-3deg);
transition: transform 250ms ease-in-out;
background-image: url('data:image/svg+xml,');
will-change: transform;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: #ff4300;
}
#card-optimization:hover{
transform: rotate(-1deg) translateY(-2rem);
}
#optimization{
background-color: #ffe346;
color: #ff4300;
}
#card-strategy{
transform: rotate(4deg);
transition: transform 250ms ease-in-out;
background-image: url('data:image/svg+xml,');
will-change: transform;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: #202b4e;
}
#card-strategy:hover{
transform: rotate(1deg) translateY(-2rem);
}
#strategy{
background-color: #7ed4fd;
color: #202b4e;
}
[popover]{
padding: 1rem;
border-radius: 1rem;
border: .5rem solid currentcolor;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
font-size: var(--step-0);
@media screen and (max-width: 768px){
margin: 1rem;
}
}
[popover]:popover-open{display: flex;}
[popover] h2{
font-family: var(--mainfont);
font-size: var(--step-3);
text-transform: none;
}
[popover] h3{
font-family: var(--mainfont);
font-size: var(--step-1);
text-transform: none;
margin: 0;
line-height: 1;
margin-top: 1rem;
}
.container-popover{
max-width: 60ch;
display: flex;
flex-direction: column;
gap: 1rem;
max-height: 74svh;
padding: 4rem;
@media screen and (max-width: 768px){
padding: 2rem 0;
max-height:calc(94svh - 8rem);
}
}
[popover]::backdrop {
background-color: hsl(54 4% 95% / 40%);
backdrop-filter: blur(15px);
}
.closepopover{
font-family: var(--mainfont);
font-size: var(--step-0);
color: currentcolor;
font-weight: 800;
background-color: transparent;
border: 0;
position: sticky;
top: 2rem;
right: 2rem;
cursor: pointer;
margin-right: 0;
margin-left: auto;
@media screen and (max-width: 768px){
top: 1rem;
right: .5rem;
}
}
#why-decarbonade{
height: 80svh;
max-height: 980px;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
padding: 20rem 0;
@media screen and (max-width: 768px){
height: auto;
max-height: none;
}
}
.arguments, .figures{
max-width: 1680px;
padding: 0 2rem;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 80svh;
max-height: 980px;
align-items: center;
font-size: 1rem;
line-height: 1;
text-align: center;
@media screen and (max-width: 768px){
grid-template-columns: repeat(1, 1fr);
padding:0;
height: auto;
max-height: none;
}
}
.arguments {
margin-top: 4rem;
}
.argument{
border-radius: 99999999px;
color: var(--offwhite);
background-color: var(--offblack);
aspect-ratio: 1/1;
padding: 15%;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
gap: 1rem;
}
.title-argument h3{line-height: 1}
.figures{
margin-top: 8rem;
}
.figure{ aspect-ratio: 1/1;
padding: 15%;
@media screen and (max-width: 768px){
aspect-ratio: auto;
}
}
.figure h3 {
font-family: var(--mainfont);
font-size: var(--step-2);
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
text-align: center;
}
.figure h3 > span{
font-size: var(--step-4);
}
.logo1_list {
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: .5rem;
padding-bottom: .5rem;
display: flex;
gap: 4rem;
max-width: 1480px;
padding:0 2rem;
@media screen and (max-width: 768px){
padding:1rem;
gap: 2rem;
}
}
.logo-client{max-height: 50px; max-width: 200px;
@media screen and (max-width: 768px){
max-width: 100px;
}
}
footer{
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
gap: 0rem;
flex-direction: column;
background-image: url('data:image/svg+xml,'); will-change: transform;
background-size: cover;
margin-top: 10svh;
}
.decarbonade-round{
position: absolute;
top:-22%;
@media screen and (max-width: 768px){
width: 140%;
}
}
.contact{
border-radius: 99999999px;
color: hsl(54 4% 95%);
background-color: hsl(0 34% 12%);
aspect-ratio: 1/1;
padding: 2rem;
max-width: 480px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0rem;
flex-direction: column;
text-align: center;
position: relative;
@media screen and (max-width: 768px){
max-width:none;
width:55%;
}
}
@font-face {
font-family: 'UfficioDisplay';
src: url("./UfficioDisplay-700.woff2") format("woff2");
font-weight: 700;
}