:root {
--grigio-scuro: #0e1116;
--blu: #226ce0;
--grigio-chiaro: #e3f2fd;
--giallo: #fcf300;
--blu-metallo: #457b9d;
--nero: #000000;
--bianco: #ffffff;
--blu-stefano: #5171A5;
--arancione-emiliano: #FFC857;
}
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Didact+Gothic&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-wrap: break-word;
}
body {
background-color: var(--grigio-scuro);
scroll-behavior: smooth;
scroll-padding-top: 70px;
}
.ctn-metalba {
max-width: 85rem;
margin: 0 auto;
padding: 40px 10px;
color: var(--grigio-chiaro);
}
.hero-metalba {
min-height: 100vh;
width: auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding-bottom: 40px;
background-color: var(--giallo);
}
.hero-title {
width: max-content;
max-width: 100vw;
padding: 30px 40px;
background-color: #101820c7;
color: var(--grigio-chiaro);
box-shadow: 0 0 10px 2px var(--grigio-scuro);
text-align: center;
display: flex;
flex-direction: column;
gap: 15px;
opacity: 0%;
animation: dissolvenza-giu 0.7s ease-in-out forwards 0.3s;
}
.hero-title h1 {
font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Barlow', sans-serif;
}
.h1-metalba {
font-weight: 600;
font-size: clamp(42px, 2em, 60px);
}
.h2-metalba {
font-weight: 600;
font-size: clamp(36px, 1.8em, 50px);
}
.h3-metalba {
font-weight: 500;
font-size: 35px;
font-size: clamp(28px, 1.33em, 36px);
}
.h4-metalba {
font-weight: 500;
font-size: clamp(23px, 1.23em, 28px);
}
p, ul, li {
font-family: 'Didact Gothic', sans-serif;
font-size: 18px;
}
ul {
padding: 0;
margin: 0;
}
.p-descrizione-centrata {
max-width: 1000px;
margin: 15px auto;
text-align: center;
}
a {
text-decoration: none;
font-family: 'Barlow', sans-serif;
font-size: 1.06em;
}
.btn-metalba {
font-family: 'Barlow', sans-serif;
font-size: clamp(20px, 1.08em, 26px);
font-weight: 500;
text-decoration: none;
display: inline-block;
padding: 13px 10%;
background-color: var(--grigio-scuro);
color: var(--grigio-chiaro);
box-shadow: 0 0 10px var(--grigio-chiaro);
transition: all ease-in-out 0.15s;
}
.btn-metalba:hover {
transform: scale(1.06);
color: var(--giallo);
} @keyframes dissolvenza-giu {
0% {
opacity: 0;
transform: translate(0, -180px);
}
100% {
opacity: 100%;
transform: translate(0, 0);
}
}
@keyframes dissolvenza-destra {
0% {
opacity: 0;
transform: translate(200px, 0);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
background-color: #1032CF!important;
border-color: #1032CF!important;
color: #ffffff!important;
}
.elementor-kit-881 button, .elementor-kit-881 input[type="button"], .elementor-kit-881 input[type="submit"], .elementor-kit-881 .elementor-button {
box-shadow:none!important;
}