@font-face {
font-family: 'ClashDisplay';
src: url(//www.luigiciriello.it/wp-content/themes/custom/fonts/ClashDisplay-Variable.woff2) format('woff2-variations');
font-weight: 200 800; font-style: normal;
font-display: swap;
}
html {
overflow-x: hidden !important;
}
body {
font-family: 'ClashDisplay', sans-serif;
font-size: 1.3rem;
line-height: 1.4;
margin: 0;
}
p {
text-align: justify;
hyphens: auto;
}
body * {
color: rgb(0, 0, 0);
font-weight: 400;
}
h3 span, h3 {
font-weight: 500 !important;
}
svg#warp {
position: fixed; top: -100vh;
height: 212vh;
left: 0;
z-index: -1;
transition: 1s;
filter: blur(2.2px);
opacity: 0.8;
animation: rotate 200s normal linear infinite;
}
body.scrolled svg#warp {
filter: blur(5px);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}  
.container {
max-width: 1100px;
margin: 0 auto;
padding: 10px;
position: relative;
}
header .container, footer .container {
max-width: 1280px;
}
p, .wp-block-list, ul:not(.sub-menu):not(.principale):not(.sliderparole), ol, .footerlink {
opacity: 0;
transform: translateX(-20px);
transition: opacity 1s ease, transform 1s ease;
font-weight: 400;
}
a.linklined {
opacity: 0;
transform: translateY(-20px);
transition: opacity 1s ease, transform 1s ease;
margin-top: 30px;
display: flex;
align-items: center;
border: 1px solid rgb(0, 0, 0);
padding: 5px 10px;
text-decoration: none;
display: inline-flex;
border-radius: 20px;
padding-left: 25px;
}
a.linklined svg {
width: 40px;
height: 40px;
}
h1 {
font-size: 7rem;
font-weight: 500;
line-height: 1;
margin-top: 0px;
opacity: 0;
transform: translateY(-20px);
transition: opacity 1s ease, transform 1s ease;
}
h1 strong, h2 strong, h3 strong, .h2 strong {
font-weight: inherit;
}
body:not(.home) h1 {
margin-bottom: 30px;
}
#breadcrumbs {
margin-bottom: 20px;
}
#breadcrumbs * {
text-decoration: none;
}
h2, .h2 {
font-size: 4.2rem;
font-weight: 500;
line-height: 1;
opacity: 0;
transform: translateY(-20px);
transition: opacity 1s ease, transform 1s ease;
}
h3 {
font-size: 3rem;
font-weight: 400;
line-height: 1;
opacity: 0;
transform: translateY(-20px);
transition: opacity 1s ease, transform 1s ease;
}
h4 {
font-size: 2.1rem;
font-weight: 400;
line-height: 1;
opacity: 0;
transform: translateY(-20px);
transition: opacity 1s ease, transform 1s ease;
}
p.h2 {
margin: 60px 0 40px 0;
} .header-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.hamburger {
background: none;
border: none;
cursor: pointer;
display: none;
} nav.menu-principale {
display: flex;
}
nav.menu-principale ul {
list-style: none;
display: flex;
gap: 40px;
margin: 0;
padding: 0;
}
nav.menu-principale ul li {
list-style: none;
position: relative;
}
nav.menu-principale ul li a {
text-decoration: none;
display: flex;
}
nav.menu-principale ul li.menu-item-has-children svg {
width: 30px;
height: 30px;
}
nav.menu-principale ul li.menu-item-has-children svg g path {
stroke: black !important;
}
.menu-close {
align-self: flex-end;
background: none;
border: none;
cursor: pointer;
padding: 0px;
margin-bottom: 10px;
transform: translateY(10px) translateX(-6.5px);
display: none; }
.menu-close svg {
width: 55px;
height: 55px;
transform: translateX(6px) translateY(-6px);
fill: white;
}
@media screen and (max-width: 768px) {
.menu-close {
display: block;
}
}
footer {
margin-top: 90px;
padding-bottom: 80px;
}
footer h3 {
margin-top: 0;
font-size: 2rem;
}
footer .container {
display: flex;
gap: 20px;
flex-direction: row;
}
footer .container .colonna {
width: 25%;
}
footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
margin-top: 20px;
}
footer ul.social {
gap: 20px;
}
footer ul.contatti, footer ul.verticale {
flex-direction: column;
}
footer ul.verticale li a {
text-decoration: none;
}
footer ul svg {
width: 30px;
height: 30px;
}
#richiedipreventivo {
position: fixed;
bottom: 15px;
left: 0;
width: 100%;
z-index: 1;
pointer-events: none;
}
#richiedipreventivo .container {
max-width: 1460px;
margin: 0 auto;
display: flex; align-items: flex-end;
-webkit-align-items: flex-end;
pointer-events: none;
gap: 20px; flex-direction: row;
-webkit-justify-content: space-between;
}
#scrolltop {
cursor: pointer;
}
#richiedipreventivo .container a,
#richiedipreventivo .container button {
text-decoration: none;
font-weight: 500;
box-sizing: content-box; display: inline-flex; align-items: center;
padding: 15px;
background: #ffffff ;
border: 1px solid black; border-radius: 15px;
pointer-events: all;
z-index: 2;
width: 40px;
height: 40px;
}
#richiedipreventivo .bottonifixed {
display: flex;
gap: 20px;
flex-direction: row;
}
footer ul#menu-menu-comuni {
display: block;
columns: 4;
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
footer ul#menu-menu-comuni a {
text-decoration: none;
}
footer ul#menu-menu-comuni li.cta {
list-style: none;
margin-top: 28px;
}
footer ul#menu-menu-comuni li.cta a {
font-weight: bold; 
text-decoration: underline;
}
.stellaverde {
width: 160px;
height: 160px;
position: absolute;
opacity: 0;
transform: translateY(-20px);
transition: opacity 1s ease, transform 1s ease;
}
.stellaviola {
width: 250px;
height: 250px;
position: absolute;
opacity: 0;
transform: translateY(-20px);
transition: opacity 1s ease, transform 1s ease;
}
.stellaverde.top {
top: -40px;
left: -90px;
}
.stellaviola.top {
top: -20px;
left: -30px;
}
.stellaverde.bottom {
bottom: 0px;
right: -60px;
}
.stellaviola.bottom {
bottom: 40px;
right: 0px;
}
#richiedipreventivo svg {
margin: 0 auto;
} @media screen and (max-width: 768px) {
html {
overflow-x: hidden !important;
}
.stellaverde {
width: 90px;
height: 90px;
position: absolute;
}
.stellaviola {
width: 150px;
height: 150px;
position: absolute;
}
.stellaverde.top {
top: -60px;
left: 0px;
}
.stellaverde.bottom {
bottom: 0px;
right: 0px;
}
.stellaviola.top {
top: -20px;
left: 0px;
}
footer .container {
flex-direction: column;
}
footer h3 {
margin-top: 20px;
}
footer .container .colonna {
width: 100%;
}
footer ul#menu-menu-comuni {
columns: 1;
}
.hamburger {
display: block;
}
body {
font-size: 1.2rem;
line-height: 1.5;
}
h1 {
font-size: 3.7rem;
}
h2, .h2 {
font-size: 2.9rem;
}
h3 {
font-size: 2.5rem;
}
h4 {
font-size: 1.3rem;
}
.container {
padding: 10px 20px;
}
svg#warp {
filter: blur(0.5px);
opacity: 0.4;
}
body.scrolled svg#warp {
filter: blur(2.2px);
}
#richiedipreventivo {
bottom: 10px;
}
footer {
margin-top: 70px;
padding-bottom: 100px;
}
#richiedipreventivo .container a, #richiedipreventivo .container button {
padding: 10px;
}
#richiedipreventivo svg {
width: 30px;
height: 30px;
margin: 0 auto;
}
p.h2 {
margin: 40px 0 30px 0;
}
}
.visibleY {
opacity: 1 !important;
transform: translateY(0) !important;
}
.visibleX {
opacity: 1 !important;
transform: translateX(0) !important;
}  .menu-list .sub-menu {
display: none;
background-color: #ffffff ;
box-shadow: 0 4px 16px rgb(0 0 0 / 16%);
padding-left: 0;
margin: 0;
list-style: none;
position: absolute;
top: 100%;
left: 0;
min-width: 300px;
z-index: 9999;
} nav.menu-principale ul .sub-menu {
padding: 10px;
}
nav.menu-principale ul .sub-menu li a {
display: block;
padding: 5px;
text-decoration: none;
} @media (min-width: 768px) {
.menu-list li.menu-item-has-children:hover > .sub-menu {
display: block;
position: absolute;
}
}
a {
-webkit-tap-highlight-color: transparent;
outline: none;
}
a:focus-visible {
outline: 2px solid #fff; } @media (max-width: 767px) {
nav.menu-principale {
position: absolute;
top: 0px;
padding: 10px 20px;
background: #fffffff5 ;
height: 100vh;
left: 0;
right: 0;
flex-direction: column;
align-items: left;
transform:translateY(-100%);
visibility: hidden;
pointer-events: none;
transition: all 600ms ease;
z-index: 2;
backdrop-filter: blur(5px);
}
nav.menu-principale.active {
transform:translateY(0);
visibility: visible;
pointer-events: all;
}
.menu-list {
margin: 0;
padding: 0;
list-style: none;
display: flex; flex-direction: column; gap: 10px; } nav.menu-principale .menu-list {
display: flex;
position: static; } nav.menu-principale ul {
gap: 20px;
} nav.menu-principale .menu-list .sub-menu {
position: static;
box-shadow: none;
padding-left: 15px;
background: none;
}
nav.menu-principale .menu-list li.menu-item-has-children.open > .sub-menu {
display: block;
}
}
.comunionpage {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.comunionpage li a {
border: 1px solid black;
border-radius: 10px;
padding: 5px 10px;
text-decoration: none;
display: inline-block;
transition: 300ms;
}
.comunionpage li:hover a {
transform: translateY(-5px);
transition: 300ms;
}