/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: Default GeneratePress child theme
Author: Tom Usborne
Author URI: https://tomusborne.com
Template: generatepress
Version: 0.1
*/
/****************************/
/* ____FRAMEWORK CSS PP ____*/
/****************************/
/**
* The main template file.
*
* This is the css file for FONT, PADDING e MARGIN
* of the standard theme (the other being style.css).
*
* @package GeneratePress & FRAMEWORD CSS PAOLO PELI
*/
/* ! Helpers */
/* ! Helpers */
body, html{
font-family: "Aeonik Pro", sans-serif;
line-height: 1.1;
font-size: 20px;
box-sizing: border-box;
margin: 0; padding: 0;
}
*, *:before, *:after{ box-sizing: border-box; }
ol, ul{ padding-left: 20px; line-height: 1.5; }
img{ height: auto; }
p{
font-family: "Aeonik Pro", sans-serif; font-size: 20px !important;
font-weight: 300;
line-height: 1.1 !important;
}
div.pointer{ cursor: pointer !important; }
/* ====== @font-face unificati (stessa famiglia per tutti i pesi) ====== */
/* Regular 400 */
@font-face{
font-family: "Aeonik Pro";
src: url("/wp-content/uploads/fonts/aeonik-pro/Aeonik-Pro-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Italic 400 (opzionale) */
@font-face{
font-family: "Aeonik Pro";
src: url("https://www.vdesigntest.it/wp-content/uploads/fonts/aeonik-pro/Aeonik-Pro-Regular-Italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* Bold 700 */
@font-face{
font-family: "Aeonik Pro";
src: url("https://www.vdesigntest.it/wp-content/uploads/fonts/aeonik-pro/Aeonik-Pro-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Black 900 (opzionale) */
@font-face{
font-family: "Aeonik Pro";
src: url("https://www.vdesigntest.it/wp-content/uploads/fonts/aeonik-pro/Aeonik-Pro-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* Strong/b: ora il grassetto VERO è disponibile */
.entry-content strong,
.entry-content b{
color: inherit;
font-weight: 700 !important; /* metti 900 se vuoi più “nero” */
}
/* Classe comoda per usare il 900 dove vuoi */
.fw-900{
font-family: "Aeonik Pro", sans-serif;
font-weight: 900 !important;
}
/* ! Title System Aeonik Pro */
h1, .text-1 {font-family: "Aeonik Pro", sans-serif; font-size: 180px !important; margin-bottom:0.5rem; font-weight:700 !important; }
h1 /*, .text-1v2*/ {font-family: "Aeonik Pro", sans-serif; font-size: 80px !important; margin-bottom:0.5rem; font-weight:700 !important; }
h1.text-1v2 {font-family: "Aeonik Pro", sans-serif; font-size: 70px !important; margin-bottom:0.5rem; font-weight:700 !important; }
h2, .text-2 {font-family: "Aeonik Pro", sans-serif; font-size: 44px !important; font-weight:400 !important; margin-bottom:1rem}
h3, .text-3 {font-family: "Aeonik Pro", sans-serif;font-size: 32px; font-weight:100 !important; margin-bottom:1rem}
h4, .text-4 {font-family: "Aeonik Pro", sans-serif;font-size: 23px; margin-bottom:1rem; line-height: 1.5; font-weight:300 !important;}
h5, .text-5 {font-family: "Aeonik Pro", sans-serif;font-size: 20px; margin-bottom:1rem; line-height: 38px; font-weight:300 !important;}
@media (max-width: 999px){
h1.text-1v2 {font-family: "Aeonik Pro", sans-serif; font-size: 36px !important; margin-bottom:0.5rem; margin-top:80px; padding: 0 10px !important; font-weight:700 !important; }
}
a {text-decoration:none !important;}
/*a {text-decoration:none; color:#000000 !important; font-weight:400;}*/
a:hover {text-decoration:none; font-weight:400;}
a.bianco {text-decoration:none; font-weight:100; color:#fff !important;}
a.bianco:hover {text-decoration:none; font-weight:100; color:#fff !important;}
a.nero {text-decoration:none; font-weight:100; color:#000 !important;}
a.nero:hover {text-decoration:none; font-weight:100; color:#000 !important;}
/* p.widget {line-height:38px; font-weight:300 !important; color:#000 !important;} */
.my-hover-class {
cursor: pointer;
}
.titolopagine h1 {font-weight:900;}
/* === HERO FULLSCREEN con titolo in basso e sfondo fisso === */
.hero-full{
position: relative;
min-height: 100svh; /* usa svh per mobile moderno */
display: grid;
/* titolo in basso, centrato orizzontalmente */
align-content: end;
justify-items: center;
padding: clamp(24px, 6vh, 80px) 7vw; /* spazio dal bordo basso + laterali */
color: #fff;
isolation: isolate; /* per overlay */
overflow: clip;
}
/* Sfondo fisso (desktop/Android) */
.hero-full::before{
content: "";
position: absolute;
inset: 0;
background-image: var(--hero-bg, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: -2;
will-change: transform;
}
/* Overlay scuro per contrasto testo */
.hero-full::after{
content: "";
position: absolute;
inset: 0;
/* background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.1) 100%); */
z-index: -1;
}
/* Contenuto interno (qui c'è l'H1) */
.hero-inner{
width: 100%;
/* max-width: 1200px; */
max-width: 100%;
}
/* Titolo in basso */
.hero-title{
font-family: "Aeonik Pro", sans-serif;
/* font-size: clamp(28px, 6vw, 64px); */
font-size: 21vw !important;
/* line-height: 1.05; */
line-height: 13vw;
font-weight: 900 !important;
text-align: center; /* cambia in left se preferisci allineato a sinistra */
/* effetto leggero di comparsa */
transform: translateY(55px);
opacity: 0;
animation: heroIn .6s cubic-bezier(.22,.61,.36,1) .1s forwards;
}
@media (max-width: 768px){
.hero-title{ font-size: clamp(40px, 12vw, 90px) !important; }
}
@keyframes heroIn{
to{ transform: translateY(0); opacity: 1; }
}
/* --- Fallback iOS: alternativa "fake fixed" --- */
/* iOS ignora spesso background-attachment:fixed.
Qui usiamo position: fixed su un layer sotto al hero, visivamente equivalente. */
@supports (-webkit-touch-callout: none) {
.hero-full::before{
position: fixed;
}
}
/* (Opzionale) Se vuoi allineare il titolo in basso a SINISTRA: */
@media (min-width: 768px){
.hero-full{ justify-items: start; }
.hero-title{ text-align: center;}
}
p.scrabble {
font-size: 60px !important;
font-weight: 300;
line-height: 4.5rem;
color: #000;
}
p.text-be3-1 {font-size:28px !important; line-height:28px !important; font-weight:200 !important; font-family: 'Aeonik Pro', sans-serif;}
p.text-be3-2 {font-size:20px !important; line-height:24px !important; font-weight:200 !important; font-family: 'Aeonik Pro', sans-serif;}
h2.be3-h2 {
font-size:54px !important;
line-height:60px !important;
font-weight:300 !important;
font-family: 'Aeonik Pro', sans-serif;
margin:0 !impportant;
}
h2.be3-h2-light {font-size:40px !important; line-height:44px !important; font-weight:400 !important; font-family: 'Aeonik Pro', sans-serif; margin:0 !impportant;}
/* ========== TITOLI: prevenzione tagli/overflow (mobile) ========== */
@media (max-width: 768px){
/* Sblocca il ritorno a capo naturale dei titoli */
h1, h2, h3, .wp-block-heading {
white-space: normal !important; /* annulla nowrap */
word-break: normal !important; /* non spezzare a caso */
overflow-wrap: break-word !important; /* va a capo se serve */
hyphens: none !important; /* niente sillabazione automatica */
}
/* Se il contenitore del titolo aveva clipping */
.entry-content,
.wp-block-group,
.wp-block-heading,
.hero-title,
.hero-full,
.hero-inner {
overflow: visible !important; /* evita che il testo “sparisca” a destra */
}
/* Disattiva l’utility che forzava il no-wrap (se presente nel tuo CSS) */
.no-break, .no-wrap {
white-space: normal !important;
}
}
/* ========== Utility opzionale: applicala solo dove ti serve ========== */
/* Usa la classe .no-cut sull’elemento (es. …
) */
.no-cut{
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
}
h3.be3-h3 {font-size:32px !important; line-height:38px !important; font-weight:600 !important; font-family: 'Aeonik Pro', sans-serif;}
@media (max-width: 768px) {
p.text-be3-1 {font-size:18px !important; line-height:24px !important; font-weight:200 !important; font-family: 'Aeonik Pro', sans-serif;}
p.text-be3-2 {font-size:20px !important; line-height:24px !important; font-weight:200 !important; font-family: 'Aeonik Pro', sans-serif;}
h2.be3-h2 {font-size:30px !important; line-height:36px !important; font-weight:300 !important; font-family: 'Aeonik Pro', sans-serif; margin:0 !impportant;}
h3.be3-h3 {font-size:28px !important; line-height:32px !important; font-weight:600 !important; font-family: 'Aeonik Pro', sans-serif;}
}
}
p.text-MAXI-1 {font-size:300px !important; font-weight:900 !important; font-family: 'Aeonik Pro', sans-serif;}
p.text-MAXI-2 {font-size:200px !important; font-weight:600 !important; font-family: 'Aeonik Pro', sans-serif;}
span.text-MAXI-2 {font-size:120px !important; font-weight:600 !important; font-family: 'Aeonik Pro', sans-serif;}
p.text-MAXI-2bis {font-size:60px !important; font-weight:600 !important; font-family: 'Aeonik Pro', sans-serif;}
p.text-MAXI-3 {font-size:32px !important; font-weight:600 !important; font-family: 'Aeonik Pro', sans-serif;}
p.text-MAXI-3bis {font-size:36px !important; font-weight:600 !important; font-family: 'Aeonik Pro', sans-serif;}
h2.text-MAXI-2 {font-size:140px !important; font-weight:600 !important; font-family: 'Aeonik Pro', sans-serif;}
h2.text-MAXI-3 {font-size:68px !important; font-weight:600 !important; font-family: 'Aeonik Pro', sans-serif;}
h2.text-MAXI-4 {font-size:48px !important; font-weight:700 !important; font-family: 'Aeonik Pro', sans-serif;}
p.text-MAXI-4 {font-size:26px !important; font-weight:500 !important; line-height:28px !important;}
p.text-MAXI-5 {font-size:21px !important; font-weight:300 !important; line-height:32px !important;}
p.text-MAXI-6 {font-size:18px !important; font-weight:500 !important; line-height:26px !important;}
@media (max-width: 768px) {
p.text-MAXI-1 {font-size:80px !important; font-weight:900 !important;}
p.text-MAXI-2 {font-size:50px !important; font-weight:700 !important;}
span.text-MAXI-2 {font-size:41px !important; font-weight:600 !important;}
p.text-MAXI-2bis {font-size:31px !important; font-weight:600 !important;}
p.text-MAXI-3 {font-size:24px !important; font-weight:600 !important;}
p.text-MAXI-3bis {font-size:28px !important; font-weight:600 !important;}
h2.text-MAXI-2 {font-size:50px !important; font-weight:700 !important;}
h2.text-MAXI-3 {font-size:46px !important; font-weight:700 !important;}
h2.text-MAXI-4 {font-size:28px !important; font-weight:600 !important;}
p.text-MAXI-4 {font-size:25px !important; font-weight:100 !important; line-height:35px !important;}
p.text-MAXI-5 {font-size:18px !important; font-weight:500 !important; line-height:24px !important;}
p.text-MAXI-6 {font-size:16px !important; font-weight:500 !important; line-height:21px !important;}
@media (max-width: 768px) {
h1, .text-1 {
font-size: 36px !important; margin-bottom:0.3rem; margin-left:1px;font-weight:500;
}
}
@media (max-width: 768px) {
h2.wp-block-heading, h2, .text-2 {font-size: 22px; margin-bottom:1rem}
}
@media (max-width: 768px) {
h3.wp-block-heading, h3, .text-3 {font-size: 18px; margin-bottom:1rem}
}
/* font preso da https://www.cdnfonts.com/pp-neue-montreal.font */
/* ! TESTI */
.fw200 {font-weight: 300 !important;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.fw800 {font-weight: 800;}
.fw900 {font-weight: 900;}v
/* ! COLORI TESTI */
.testobianco {color:#ffffff! important;}
h2.testobianco {color:#ffffff! important;}
span.testobianco {color:#ffffff! important;}
.testonero {color:#000! important;}
h2.testonero {color:#000! important;}
/**************************/
/******* Z-INDEX *** *****/
/**************************/
.zindex10 {z-index:10;}
/**************************/
/******* BORDER RADIUS *****/
/**************************/
.wp-block-media-text__media img {border-radius:9px;}
/****************************/
/*____ PADDING E MARGIN ____*/
/****************************/
.left_5x100 div {padding-left: 5%;}
/* Mobile: ≤ 768px -> 22px */
@media (max-width: 768px){
.left_5x100 div {padding-left: 1px;}
}
}
.left0 {left: 0px;}
.padding5 {padding:5px;}
.padding10 {padding:10px;}
.padding20 {padding:20px;}
.padding2040 {padding:20px 40px;}
.margin5 {margin:5px;}
.pt8 {padding-top:8px;}
.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt40 {padding-top:40px;}
.pt60 {padding-top:60px;}
.pt80 {padding-top:80px;}
.pt100 {padding-top:80px;}
.pt120 {padding-top:120px;}
.pt160 {padding-top:160px !important;}
.pt300 {padding-top:300px !important;}
.pb10 {padding-bottom:10px;}
.pb20 {padding-bottom:20px;}
.pb40 {padding-bottom:40px;}
.pb60 {padding-bottom:60px;}
.pb80 {padding-bottom:80px;}
.pb120 {padding-bottom:120px;}
.pr10 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pr40 {padding-right:40px;}
.pr60 {padding-right:60px;}
.pr80 {padding-right:80px;}
.pl5 {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl20 {padding-left:20px;}
.pl40 {padding-left:40px;}
.pl60 {padding-left:60px;}
.pl80 {padding-left:80px;}
/****************************/
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px !important;}
.mt40 {margin-top:40px;}
.mt60 {margin-top:60px;}
.mt80 {margin-top:80px;}
.mt120 {margin-top:120px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb40 {margin-bottom:40px;}
.mb60 {margin-bottom:60px;}
.mb80 {margin-bottom:80px !important;}
.mb120 {margin-bottom:120px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr40 {margin-right:40px;}
.mr60 {margin-right:60px;}
.mr100 {margin-right:100px;}
.mr200 {margin-right:200px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:60px;}
.ml100 {margin-left:100px;}
/******/
.mr-20 {margin-right:-20px !important;}
.mr-40 {margin-right:-40px !important;}
.ml-20 {margin-left:-20px !important;}
.ml-40 {margin-left:-40px !important;}
.ml-100 {margin-left:-100px !important;}
.ml-150 {margin-left:-150px !important;}
.mt-10 {margin-top:-10px;}
.mt-20 {margin-top:-20px;}
.mt-40 {margin-top:-40px;}
.mt-60 {margin-top:-60px;}
.mt-80 {margin-top:-80px !important;}
.mt-120 {margin-top:-120px !important;}
.mt-200 {margin-top:-200px !important;}
.mb-10 {margin-bottom:-10px !important;}
.mb-20 {margin-bottom:-20px !important;}
.mb-40 {margin-bottom:-40px !important;}
.mb-50 {margin-bottom:-50px !important;}
/* vito ritorno a capo */
.no-break {
white-space: nowrap;
}
/****************************/
/*___ PERSONMALIZZO font ___*/
/****************************/
.fs11 {font-size: 11px !important;}
.fs13 {font-size: 13px !important;}
.fs15 {font-size: 15px !important;}
.fs18 {font-size: 18px !important;}
.fs20 {font-size: 20px !important;}
.fs28 {font-size: 28px !important;}
.fs80 {font-size: 80px !important;}
/****************************/
/*______ ALLINEAMENTI ______*/
/****************************/
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left; }
.allineoalcentro {margin:0 auto;}
/****************************/
/*______ COPERTINA ______*/
/****************************/
.copertina-finestra {background-size: cover;}
/****************************/
/*___ SOTTOLINEATO e non ___*/
/****************************/
.underline {text-decoration:underline;}
.underline a {text-decoration:underline !important;}
.text-no-deco {text-decoration:none !important;}
.text-no-deco a {text-decoration:none !important;}
.text-no-deco a:hover {text-decoration:none !important; color:#464646}
.text-no-deco-bianco a:hover {text-decoration:none !important; color:#fff}
/****************************/
/*_______ MAX-WIDTH ________*/
/****************************/
.mw250 {max-width:250px;}
.mw300 {max-width:300px;}
.mw400 {max-width:400px;}
.mw600 {max-width:600px;}
.mw700 {max-width:700px;}
.mw800 {max-width:800px;}
.mw900 {max-width:900px;}
.mw1000 {max-width:1000px;}
.mw1100 {max-width:1100px;}
.mw1200 {max-width:1200px;}
.mw1300 {max-width:1300px;}
.mw1400 {max-width:1400px;}
/* _______________________ */
/* ! REVEAL PER JAVASCRIPT */
/* _______________________ */
.reveal{
position: relative;
transform: translateY(40px) scale(0.99);
opacity: 0;
transition: 4s all ease;
}
.reveal.active{
transform: translateY(0) scale(1);
opacity: 1;
}
/* __________________________________ */
/* ! ANIMAZIONE CARICAMENTO CONTENUTI */
/* __________________________________ */
.animazione-0 {
-webkit-animation: fadeIn_Up 1.2s both;
-moz-animation: fadeIn_Up 1.2s both;
-o-animation: fadeIn_Up 1.2s both;
animation: fadeIn_Up 1.2s ease;
}
.animazione-1 {
-webkit-animation: fadeIn_Up 1.2s both;
-moz-animation: fadeIn_Up 1.2s both;
-o-animation: fadeIn_Up 1.2s both;
animation: fadeIn_Up 1.2s both;
animation-delay: 500ms;
}
.animazione-2 {
-webkit-animation: fadeIn_Up 1.2s both;
-moz-animation: fadeIn_Up 1.2s both;
-o-animation: fadeIn_Up 1.2s both;
animation: fadeIn_Up 1.2s both;
animation-delay: 1s;
}
.animazione-3 {
-webkit-animation: fadeIn_Up 1.2s both;
-moz-animation: fadeIn_Up 1.2s both;
-o-animation: fadeIn_Up 1.2s both;
animation: fadeIn_Up 1.2s both;
animation-delay: 1.5s;
}
/* ----------- */
/** fadeInLeft **/
.animated-words {
position: relative;
height: 100%;
}
.text-line {
position: absolute;
/* right:0; */
margin-left:-250px;
opacity: 0;
transform: translateX(-120px);
animation-fill-mode: forwards;
animation-timing-function: ease-out;
color: white;
white-space: nowrap;
visibility: hidden;
}
@media (max-width: 768px) {
.text-line {margin-left:10px !important;}
.word-1 {margin-left:-70px !important;}
.word-3 {margin-left:-10px !important;}
.word-4 {margin-left:-20px !important;}
}
/* Prima parola: entra, poi fade-down e si nasconde due volte */
.word-1 {
animation:
wordIn 1s forwards,
moveFade-100 1s forwards 6s,
hideAfterFade 0s forwards 7s,
moveFade-200 1s forwards 11s,
hideAfterFade 0s forwards 12s,
moveFade-300 1s forwards 16s,
hideAfterFade 0s forwards 17s;
}
/* Seconda parola: entra, poi fade-down e si nasconde due volte */
.word-2 {
animation:
wordIn 1s forwards 7s,
moveFade-100 1s forwards 12s,
hideAfterFade 0s forwards 13s,
moveFade-200 1s forwards 17s,
hideAfterFade 0s forwards 18s;
}
/* Terza parola: entra, poi fade-down e si nasconde una volta */
.word-3 {
animation:
wordIn 1s forwards 13s,
moveFade-100 1s forwards 18s,
hideAfterFade 0s forwards 19s;
}
/* Quarta parola: entra in alto */
.word-4 {
animation:
wordIn 1s forwards 20s;
}
/* Animazione ingresso */
@keyframes wordIn {
from { opacity: 0; transform: translateX(-100px); top: 0; visibility: visible; }
to { opacity: 1; transform: translateX(0); top: 0; visibility: visible; }
}
/* Discesa con fade */
@keyframes moveFade-100 {
from { top: 0; opacity: 1; }
to { top: 100px; opacity: 0; }
}
@keyframes moveFade-200 {
from { top: 100px; opacity: 1; }
to { top: 200px; opacity: 0; }
}
@keyframes moveFade-300 {
from { top: 200px; opacity: 1; }
to { top: 300px; opacity: 0; }
}
/* Nasconde l’elemento dopo il fade-out */
@keyframes hideAfterFade {
to { visibility: hidden; }
}
/* 🎯 Allinea al centro su mobile */
@media screen and (max-width: 768px) {
.text-line {
right: auto;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
}
/* ___________ */
@-webkit-keyframes fadeIn_Up {
0%{
opacity:0;
-webkit-transform: translateY(5px) scale(0.95);
}
100%{
opacity:1;
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes fadeIn_Up {
0%{
opacity:0;
-webkit-transform: translateY(5px) scale(0.95);
}
100%{
opacity:1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeIn_Up {
0%{
opacity:0;
-moz-transform: translateY(5px) scale(0.95);
}
100%{
opacity:1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeIn_Up {
0%{
opacity:0;
-o-transform: translateY(5px) scale(0.95);
}
100%{
opacity:1;
-o-transform: translateY(0);
}
}
@keyframes fadeIn_Up {
0%{
opacity:0;
/*transform: translateY(10px);*/
transform: translateY(5px) scale(0.95);
}
100%{
opacity:1;
/*transform: translateY(0);*/
-webkit-transform: translateY(0) scale(1);
}
}
/****************************/
/*______ PAGINA 404 ________*/
/****************************/
.content-404 {
position: relative;
z-index: 5;
margin-bottom: 0;
padding: 40px;
border-radius: 32px;
background-color: #fff;
box-shadow: 0 16px 40px 0 rgb(0 0 0 / 20%);
left:20%;
}
@media (max-width: 768px) {
.content-404 {
padding: 20px;
left:5%;
right:5%;
}
}
._404 {
font-size: 6rem;
line-height: 1.556;
font-weight: 700;
}
/****************************/
/*___ HERO VIDEO HOME ______*/
/****************************/
/* Wrapper: fullscreen solo su desktop */
.hero-video-wrapper{
scroll-snap-align: start;
position: relative;
width: 100%;
height: 100svh; /* desktop: full viewport height */
overflow: hidden;
background: #000; /* per le bande nere su mobile/contain */
}
/* Video fullscreen (desktop) */
.background-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* riempi e taglia sui bordi su desktop */
z-index: 0;
}
/* ===== MOBILE / TABLET ===== */
@media (max-width: 768px){
/* Il wrapper non è più fullscreen: rispetta un 16:9 orizzontale */
.hero-video-wrapper{
height: auto;
aspect-ratio: 16 / 9; /* mantiene proporzioni rettangolari */
max-height: 60svh; /* opzionale: limita l’altezza visiva */
overflow: hidden;
}
/* Il video torna "nel flow" e non è più assoluto */
.background-video{
position: static; /* <— importante: annulla l'assoluto */
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* mostra il video intero con eventuali bande */
background: #000;
transform: none; /* annulla eventuali translate */
min-width: 0; /* annulla vincoli precedenti */
min-height: 0;
}
}
/* Fallback per browser senza aspect-ratio (raro) */
@supports not (aspect-ratio: 16 / 9) {
@media (max-width: 768px){
.hero-video-wrapper{
height: auto;
}
.hero-video-wrapper::before{
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
.background-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
/* (opzionale) se avevi questa regola, eliminala perché non c’entra il wrapper del video
.home .page-hero { min-height: auto !important; height: auto !important; }
*/
/******************************/
/* aggiungo audio video home */
/* Posizionamento del toggle audio */
.hero-audio-toggle{
position: absolute;
right: 16px;
bottom: 26px;
z-index: 5;
padding: 10px 14px;
border-radius: 9999px;
border: 1px solid rgba(255,255,255,.6);
background: rgba(0,0,0,.45);
color: #fff;
font-size: 14px;
line-height: 1;
backdrop-filter: blur(6px);
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.hero-audio-toggle:hover{ background: rgba(0,0,0,.6); border-color: #fff; }
.hero-audio-toggle:active{ transform: scale(.98); }
/* Stato attivo (audio ON) */
.hero-audio-toggle.is-on{
background: rgba(0,0,0,.7);
border-color: #7fffd4; /* piccolo feedback (acquamarina) */
}
/* Accessibilità focus */
.hero-audio-toggle:focus-visible{
outline: 2px solid #7fffd4;
outline-offset: 2px;
}
/* Opzionale: nascondi il toggle su mobile se non vuoi audio lì
@media (max-width: 768px){
.hero-audio-toggle{ display:none; }
}
*/
/* Testo centrato */
.slot-container {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
text-align: center;
}
.slot-container-SX {
position: absolute;
bottom: 30%;
z-index: 1;
}
.slot-title {
font-size: 5rem;
font-weight: 900;
color: #fff;
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: 'area-normal', sans-serif;
display: flex;
justify-content: center;
gap: 0.2em;
}
.slot-title span {
opacity: 0;
transform: translateY(50px);
animation: slideUp 1s forwards;
}
@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ! TOLTE LE TRE LINEE DEL grid-lines RICCGIAMATO DEL FUNCTION.PHP */
..grid-lines {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
pointer-events: none;
z-index: 999;
background-image: linear-gradient(to right,
transparent 14.98%,
#8c8989 15%,
transparent 15.03%,
transparent 49.98%,
#8c8989 50%,
transparent 50.03%,
transparent 84.98%,
#8c8989 85%,
transparent 85.03%
);
}
body {
margin: 0;
padding: 0;
}
/*******************************/
/* ! UNDERSCORE ANIMATION MENU */
/*******************************/
.main-nav li a::after {
content: '';
display: block;
width: 0;
height: 1px;
background: currentColor; /* dbd9d9 */
transition: width .3s;
}
.main-nav li a:hover:after {
width: 100%;
}
.main-navigation {
z-index: 100;
padding: 0;
clear: both;
display: block;
}
/*******************************/
/* ! UNDERSCORE ANIMATION A */
/*******************************/
a.animazione-a {
position: relative;
display: inline-block;
text-decoration: none;
color: inherit;
}
a.animazione-a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
transition: width 0.3s ease;
}
a.animazione-a:hover::after {
width: 100%;
}
/****************************/
/*___ PERSONALIZZO CF7 ___*/
/****************************/
/* Personalizzazione dei campi di input e delle aree di testo */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
background-color: #ffffff; /* Colore di sfondo 575760 */
color: #000000; /* Colore del testo d6d6d6 */
border: 0px solid #ccc; /* Bordo */
padding: 10px; /* Spaziatura interna */
border-radius: 5px; /* Angoli arrotondati */
width: 100%; /* Larghezza completa */
box-sizing: border-box; /* Include padding e bordo nella larghezza totale */
font-size: 16px; /* Dimensione del testo */
margin-bottom: 15px; /* Spaziatura inferiore tra i campi */
}
/* Personalizzazione del pulsante di invio */
.wpcf7 input[type="submit"] {
background-color: #ffffff; /* Colore di sfondo del pulsante */
color: #333333; /* Colore del testo del pulsante */
border: none; /* Nessun bordo */
padding: 10px 20px; /* Spaziatura interna */
border-radius: 5px; /* Angoli arrotondati */
font-size: 16px; /* Dimensione del testo */
cursor: pointer; /* Cambia il cursore al passaggio */
transition: background-color 0.3s ease; /* Transizione al passaggio */
}
.wpcf7 input[type="submit"]:hover {
background-color: #000; /* #A69F97 Colore di sfondo al passaggio */
color:#fff;
border:1px solid #fff;
}
.wpcf7-not-valid-tip {
color: #fff;
font-style="italic"
font-size: 13px !important;
font-weight: normal;
display: block;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #a5a5a5 !important;
opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #d6d6d6 !important;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #d6d6d6 !important;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #d6d6d6 !important;
opacity: 1;
}
.labeltext {
color:#fff !important;
font-weight: 400;
}
/****************************/
/*___ Video DX pagina CASE ___*/
/****************************/
/* Contenitore principale */
.hero-section {
display: flex;
min-height: 100vh;
position: relative;
background: black;
overflow: hidden;
margin-top: 0; /* Assicura che non ci sia spazio sopra */
}
/* Colonna del testo a sinistra */
.content-wrapper {
display: flex;
align-items: flex-start;
}
/* Contenuto principale */
.main-content {
width: 66.66%;
padding: 20px;
}
/* Contenitore del video */
.video-container {
width: 33.33%;
position: sticky;
top: 100px; /* Altezza dell'header */
align-self: flex-start;
height: calc(100vh - 100px); /* Altezza viewport meno header */
overflow: hidden;
}
/* Video */
.video-element {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Barra semitrasparente */
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.alumia-layout {
display: flex;
align-items: flex-start;
margin-top: 100px; /* spazio sotto header */
position: relative;
}
.alumia-main-content {
width: 66.66%;
padding-right: 2rem;
}
.alumia-video-wrapper {
width: 33.33%;
position: sticky;
top: 100px; /* lascia visibile il menu */
height: calc(100vh - 100px);
overflow: hidden;
z-index: 1;
}
.alumia-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.alumia-overlay {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
pointer-events: none;
}
/****************************/
/*___ PERSONALIZZO IMG gallery frame ___*/
/****************************/
.gallery-frame img {
padding-top:50px;
}
@media (max-width: 768px) {
.gallery-frame img { padding-top:40px;}
}
/*. colonne invertite su mobile */
@media screen and (max-width: 768px) {
.colonneinvertite {
display: flex; /* Assicurati che il contenitore sia un layout flexbox */
flex-direction: column-reverse;
}
}
/****************************/
/* scroll orizzontale card */
/****************************/
.horizontal-scroll-container {
position: relative;
width: 100%;
height: 800px !important; /* 100vh */
overflow: hidden;
background:#000000;
}
.horizontal-scroll-track {
display: flex;
position: absolute;
margin-top:50px !important;
height: 100%;
top: 0;
left: 0;
will-change: transform;
transition: transform 0.1s ease-out;
}
.scroll-card {
flex: 0 0 400px; /* larghezza card */
height: 500px;
margin: 30px 200px;
background: #eaeaea;
padding: 20px;
box-sizing: border-box;
border-radius: 8px;
text-align: center;
}
.scroll-card-nero {
flex: 0 0 400px; /* larghezza card */
height: 500px;
margin: 30px 200px;
background: #000;
padding: 20px;
box-sizing: border-box;
border-radius: 8px;
text-align: center;
}
.scroll-card img {
width: 100%;
height: auto;
display: block;
margin-bottom: 15px;
}
.primacard {
margin-left:50%;
}
.scroll-card h3 {
font-size: 40px;
margin: 10px 0 5px;
font-weight: 800 !important;
color:#000000 !important;
}
.scroll-card h4 {
font-size: 21px;
margin: 0;
font-weight: 400 !important;
color:#000000 !important;
}
.scroll-card p {
font-size: 18px;
margin: 0;
font-weight: 300 !important;
color: grey;
}
/****************************/
/* tecnolohia home */
/****************************/
.tecnologia-home {
margin-left: -150px !important;
position:relative;
z-index:1 !important;
}
@media (max-width: 768px) {
.tecnologia-home { margin-left: 10px !important;}
}
.tecnologia-home-inversa {
margin-right: -250px !important;
position:relative;
z-index:1 !important;
}
img.tecnologia-home-inversa {
margin-right: -250px !important;
position:relative;
z-index:1 !important;
}
@media (max-width: 768px) {
.tecnologia-home-inversa { margin-right:5px !important;}
}
/* _______________________ */
/* !___ icone social ____ */
i.ico-social{
font-size:20px;
color:#ffffff !important;
transition: transform 0.2s ease;
padding:10px;
}
.ico-social:hover{
color:#ffffff !important;
transform: scale(1.2); /* Ingrandisce del 10% */
}
/* _______________________ */
/* !___ 3 colonne home ____ */
/* Contenitore colonna */
.custom-column-home-1 {
background-color: #000; /* sfondo iniziale nero */
padding: 10px;
transition: background-color 0.3s ease;
overflow: hidden; /* limita immagine nello spazio */
position: relative;
}
.custom-column-home-2 {
background-color: #000; /* sfondo iniziale nero */
padding: 10px;
transition: background-color 0.3s ease;
overflow: hidden; /* limita immagine nello spazio */
position: relative;
}
.custom-column-home-3 {
background-color: #000; /* sfondo iniziale nero */
padding: 10px;
transition: background-color 0.3s ease;
overflow: hidden; /* limita immagine nello spazio */
position: relative;
}
/* Zoom dell’immagine */
.custom-column-home img {
width: 100%;
height: auto;
transition: transform 0.4s ease;
display: block;
}
/* Testo e link (opzionale stile) */
.custom-column-home p,
.custom-column-home a {
color: #fff;
text-align: center;
margin-top: 10px;
}
/* Hover effect */
.custom-column-home-1:hover {
background-color: #F86A41; /* cambia colore sul passaggio del mouse */
}
.custom-column-home-1:hover img {
transform: scale(1.05); /* leggero zoom */
}
.custom-column-home-2:hover {
background-color: #B2B2BE; /* cambia colore sul passaggio del mouse */
}
.custom-column-home-2:hover img {
transform: scale(1.05); /* leggero zoom */
}
.custom-column-home-3:hover {
background-color: #486343; /* cambia colore sul passaggio del mouse */
}
.custom-column-home-3:hover img {
transform: scale(1.05); /* leggero zoom */
}
/*************************/
/* === Griglia 3 colonne: immagini quadrate con angoli superiori 14px === */
/* La card ha lo stesso raggio dell'hero */
.news-grid .wp-block-post{
/* border-radius: 14px; */
border-radius: 10px 10px 0 0 !important; /* 10px per l'angolo superiore sinistro e destro, 0 per gli angoli inferiori */
}
/* Il contenitore dell'immagine gestisce il taglio degli angoli */
.news-grid .wp-block-post-featured-image{
position: relative;
overflow: hidden;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
margin-bottom: 0; /* niente spazio extra tra immagine e meta */
}
/* Immagine sempre quadrata, copre il box */
.news-grid .wp-block-post-featured-image img{
width: 100%;
aspect-ratio: 1 / 1; /* QUADRATA */
object-fit: cover;
display: block;
border-radius: 0; /* il raggio lo gestisce il contenitore */
}
/* (facoltativo) allinea lo zoom già presente alla nuova struttura */
.news-grid .wp-block-post:hover .wp-block-post-featured-image img{
transform: scale(1.06);
}
/***************/
/* === Griglia 3 colonne: immagini quadrate con angoli superiori 14px === */
/* Immagine sempre quadrata, copre il box */
.news-grid .wp-block-post-featured-image img{
width: 100%;
aspect-ratio: 1 / 1 !important; /* QUADRATA */
object-fit: cover;
display: block;
border-radius: 0; /* il raggio lo gestisce il contenitore */
}
/* (facoltativo) allinea lo zoom già presente alla nuova struttura */
.news-grid .wp-block-post:hover .wp-block-post-featured-image img{
transform: scale(1.06);
}
/*************************/
/** test card ***********/
/*************************/
.card-full-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
.card {
flex: 1 1 calc(33.333% - 13.333px);
position: relative;
aspect-ratio: 4 / 5; /* Altezza maggiore della larghezza */
background-size: cover;
background-position: center;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
min-width: 280px;
}
.card:hover {
transform: scale(1.01);
}
.card-overlay {
position: absolute;
bottom: 0;
width: 100%;
padding: 30px 20px;
color: #fff;
transform: translateY(100%);
transition: transform 0.4s ease;
}
.card:hover .card-overlay {
transform: translateY(0);
}
/* Immagini di sfondo */
.card-one {
background-image: url('https://www.vdesigntest.it/wp-content/uploads/2025/06/scala_alluminio-768x432.png');
}
.card-two {
background-image: url('https://www.vdesigntest.it/wp-content/uploads/2025/06/Struttura-casa_alluminio-768x432.png');
}
.card-three {
background-image: url('https://www.vdesigntest.it/wp-content/uploads/2025/06/Casa_alluminio3.png');
}
/* Overlay colors */
.card-one .card-overlay {
background-color: rgba(255, 87, 34, 0.85); /* Arancio */
}
.card-two .card-overlay {
background-color: rgba(76, 175, 80, 0.85); /* Verde */
}
.card-three .card-overlay {
background-color: rgba(33, 150, 243, 0.85); /* Blu */
}
/* Responsive */
@media (max-width: 768px) {
.card-full-container {
flex-direction: column;
}
.card {
flex: 1 1 100%;
aspect-ratio: 2 / 3;
}
.card-overlay {
text-align: center;
padding: 20px;
}
}
/****************************
/*___ PERSONALIZZO OFF-CANVAS ____*/
/*___ MENU A TUTTO SCHERMO _____*/
/****************************/
/* ===== Variabili ===== */
:root{
--offcanvas-bg: #000;
--offcanvas-text: #fff;
--offcanvas-overlay: rgba(0,0,0,.65);
}
/* ===== Pannello off-canvas ===== */
.slideout-navigation{
width: 100% !important;
max-width: 100% !important;
height: 100vh;
background: var(--offcanvas-bg);
color: var(--offcanvas-text);
position: relative;
overflow: hidden; /* evita scroll esterno */
}
/* ===== Contenitore interno (grid + animazione ingresso) ===== */
.slideout-navigation .inside-navigation{
height: 100vh;
padding: min(8vh,80px) 0; /* solo verticale */
overflow-y: auto; /* mobile: può scorrere */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
display: grid;
grid-template-columns: 1fr; /* base: mobile 1 colonna */
grid-template-areas:
"brand"
"nav"
"aside";
row-gap: 32px;
align-items: center;
justify-items: center;
align-content: center;
position: relative; /* per i separatori ::before/::after */
box-sizing: border-box;
transform: translateY(12px) scale(.985);
opacity: 0;
transition:
transform .45s cubic-bezier(.22,.61,.36,1),
opacity .45s cubic-bezier(.22,.61,.36,1);
}
.offside-js--is-open .slideout-navigation .inside-navigation,
.slide-opened .slideout-navigation .inside-navigation{
transform: translateY(0) scale(1);
opacity: 1;
}
/* ===== Mappa aree SEMPRE attiva (evita inversioni) ===== */
.slideout-brand{ grid-area: brand !important; }
.slideout-navigation .main-nav{ grid-area: nav !important; }
.slideout-aside{ grid-area: aside !important; }
/* ===== Aree e allineamenti di base ===== */
.slideout-brand,
.slideout-navigation .main-nav,
.slideout-aside{
align-self: stretch;
display: flex;
align-items: center; /* centrati verticalmente */
justify-content: center; /* default: centrati orizzontalmente */
min-width: 0;
box-sizing: border-box;
}
/* ===== Desktop: 3 colonne + separatori ===== */
@media (min-width:1024px){
.slideout-navigation .inside-navigation{
grid-template-columns: repeat(3, 1fr); /* 33% ciascuna */
grid-template-areas: "brand nav aside";
column-gap: 0;
overflow-y: hidden; /* niente scrollbar interna */
}
/* separatori verticali (1px #eaeaea) */
.offside-js--is-open .slideout-navigation .inside-navigation::before,
.offside-js--is-open .slideout-navigation .inside-navigation::after,
.slide-opened .slideout-navigation .inside-navigation::before,
.slide-opened .slideout-navigation .inside-navigation::after{
content: "";
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: #eaeaea;
pointer-events: none;
}
.offside-js--is-open .slideout-navigation .inside-navigation::before,
.slide-opened .slideout-navigation .inside-navigation::before{
left: 33.3333%;
}
.offside-js--is-open .slideout-navigation .inside-navigation::after,
.slide-opened .slideout-navigation .inside-navigation::after{
left: 66.6666%;
}
}
/* ===== BRAND (colonna sinistra) ===== */
.slideout-brand img{
display: block;
width: 70%;
max-width: 70%;
height: auto;
}
@media (max-width:1023.98px){
.slideout-brand{
justify-content: center !important;
--brand-shift: 100px; /* ↓ abbassa il box LOGO di 100px */
transform: translateY(var(--brand-shift));
}
.slideout-brand img{
width: 50%;
max-width: 50%;
height: auto;
margin: 80px auto;
margin-top: 0 !important; /* evita doppio offset */
}
}
/* ===== MENU (colonna centrale) ===== */
.slideout-navigation .main-nav{ width: 100%; }
.slideout-navigation .main-nav > ul{
list-style: none;
margin: 0;
padding: 0;
min-height: 60vh; /* mantiene il blocco in mezzo (desktop) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .2em;
}
.slideout-navigation .main-nav a{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-decoration: none;
color: var(--offcanvas-text);
}
.slideout-navigation .main-nav > ul > li > a{
display: block;
text-align: center;
font-weight: 600;
line-height: 1.2;
font-size: clamp(20px, 2.6vw, 36px);
padding: .4em 0;
transition: opacity .25s ease, transform .25s ease;
}
.slideout-navigation .main-nav > ul > li > a:hover{
opacity: .8;
transform: translateY(-1px);
}
.slideout-navigation .main-nav .sub-menu{ margin-top: .4em; }
.slideout-navigation .main-nav .sub-menu a{
font-size: clamp(15px, 1.4vw, 18px);
font-weight: 500;
opacity: .9;
text-align: center;
padding: .3em 0;
}
/* niente riquadri sulla voce corrente */
.slideout-navigation .main-nav .current-menu-item > a,
.slideout-navigation .main-nav .current_page_item > a,
.slideout-navigation .main-nav .current-menu-ancestor > a{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* ===== ASIDE (colonna destra) – contatti ===== */
.slideout-aside{
text-align: right;
line-height: 1.6;
opacity: .9;
}
.slideout-aside h3{
margin: 0 0 .5em 0;
font-size: clamp(16px, 1.1vw, 16px) !important;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase !important;
opacity: .4;
}
.slideout-aside p{
margin: 0 0 .75em 0;
font-size: clamp(14px, 1.1vw, 14px) !important;
letter-spacing: .03em;
text-transform: normal !important;
}
.slideout-aside a{
color: var(--offcanvas-text);
text-decoration: none;
border-bottom: 0px solid rgba(255,255,255,.25); /* tolta riga sotto link voci menu ASIDE */
font-size: clamp(14px, 1.1vw, 14px) !important;
text-transform: normal !important;
}
.slideout-aside a:hover{ opacity: .8; }
/* ===== Overlay + transizioni ===== */
.slideout-overlay{
background: var(--offcanvas-overlay);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: opacity .45s cubic-bezier(.22,.61,.36,1), visibility .45s linear;
}
.offside-js--is-open .slideout-overlay,
.slide-opened .slideout-overlay{ opacity: 1; visibility: visible; }
/* ===== Performance ===== */
.slideout-navigation,
.slideout-navigation .inside-navigation,
.slideout-overlay,
.site{
will-change: transform, opacity;
backface-visibility: hidden;
}
/* ===== Shrink del sito quando aperto ===== */
.offside-js--is-open .site,
.slide-opened .site{
transform: scale(.97);
transform-origin: center top;
transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
html.offside-js--is-open, body.offside-js--is-open,
html.slide-opened, body.slide-opened{ overflow: hidden; }
/* ===== Toggle hamburger (apri) ===== */
.menu-toggle,
.slideout-navigation .menu-toggle{
color: var(--offcanvas-text) !important;
background: transparent;
border: 1px solid transparent;
}
.menu-toggle svg,
.slideout-navigation svg{
fill: currentColor;
stroke: currentColor;
}
/* ===== Pulsante CHIUDI (testo) ===== */
.slideout-exit, button.slideout-exit{
position: fixed !important; /* fuori dal flow/grid */
top: 20px; right: 20px;
z-index: 2147483647 !important; /* sempre sopra tutto */
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
height: auto !important;
padding: 10px 16px;
min-height: 40px;
white-space: nowrap;
color: var(--offcanvas-text) !important;
background: transparent !important;
border: 1px solid var(--offcanvas-text);
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1;
transition: opacity .2s ease;
}
.slideout-exit:hover, button.slideout-exit:hover{ opacity: .85; }
.slideout-exit > *, button.slideout-exit > *{ display: none !important; }
.offside-js--is-open .slideout-exit::before,
.offside-js--is-open button.slideout-exit::before,
.slide-opened .slideout-exit::before,
.slide-opened button.slideout-exit::before{
content: "CHIUDI";
display: inline-block;
}
/* ===== Accessibilità ===== */
.slideout-navigation a:focus{ outline: none; }
.slideout-navigation a:focus-visible{
outline: 2px solid var(--offcanvas-text);
outline-offset: 3px;
}
/* ===== Desktop: colonna CONTATTI solida (niente “sfalsamenti”) ===== */
@media (min-width:1024px){
.slideout-aside{
display: flex !important; /* flex container */
flex-direction: column;
align-items: stretch; /* figli a tutta larghezza */
justify-content: center; /* centro verticale */
text-align: right;
gap: .6em;
padding-right: 7vw; /* stacco dal bordo destro */
white-space: normal !important; /* rispetta i ritorni a capo */
word-break: normal;
overflow-wrap: anywhere;
line-height: 1.5;
width: 100%;
max-width: none !important;
}
.slideout-aside > *{
width: 100%;
margin: 0;
}
.slideout-aside h3 + p{ margin-top: .2em; }
.slideout-aside p + p { margin-top: .3em; }
/*.slideout-aside br{ display: none !important; }*/
}
/* ===== Mobile: menù centrato + contatti corretti ===== */
@media (max-width:1023.98px){
/* neutralizza ordini/float del tema */
.slideout-brand,
.slideout-navigation .main-nav,
.slideout-aside{
order: 0 !important;
float: none !important;
}
/* MENU centrato su mobile */
.slideout-navigation .main-nav{
align-items: center !important;
justify-content: center !important;
padding: 0;
width: 100%;
}
.slideout-navigation .main-nav > ul{
min-height: 0; /* annulla 60vh su mobile */
align-items: center !important;
justify-content: center !important;
width: 100%;
}
.slideout-navigation .main-nav > ul > li > a,
.slideout-navigation .main-nav .sub-menu a{
text-align: center !important;
}
/* CONTATTI mobile: piena larghezza, allineati a sx, paragrafi regolari */
.slideout-aside{
display: flex !important;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
max-width: none;
text-align: left;
gap: .6em;
padding: 0 0 0 10px !important;
white-space: normal !important;
word-break: normal;
overflow-wrap: anywhere;
line-height: 1.5;
}
.slideout-aside > *{
width: 100%;
margin: 0;
}
.slideout-aside h3 + p{ margin-top: .4em; }
.slideout-aside p + p { margin-top: .6em; }
.slideout-aside br{ display: none !important; }
}
/* ===== Mobile: menù centrato + contatti corretti ===== */
@media (max-width:1023.98px){
/* MENU centrato su mobile */
.slideout-navigation .main-nav{
align-items: center !important;
justify-content: center !important;
padding: 0;
width: 100%;
}
.slideout-navigation .main-nav > ul{
min-height: 0; /* annulla 60vh su mobile */
align-items: center !important;
justify-content: center !important;
width: 100%;
}
.slideout-navigation .main-nav > ul > li > a,
.slideout-navigation .main-nav .sub-menu a{
text-align: center !important;
}
/* CONTATTI mobile: piena larghezza, allineati a sx, paragrafi regolari */
.slideout-aside{
display: flex !important;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
max-width: none;
text-align: left;
gap: .6em;
padding: 0;
white-space: normal !important;
word-break: normal;
overflow-wrap: anywhere;
line-height: 1.5;
}
.slideout-aside > *{
width: 100%;
margin: 0;
}
.slideout-aside h3 + p{ margin-top: .4em; }
.slideout-aside p + p { margin-top: .6em; }
.slideout-aside br{ display: none !important; }
}
/****************************/
/* ===== CTA stile Rigas: ghost button con fill dal centro ===== */
/****************************/
/* ===== CTA pill con fill dal centro + pallino a destra ===== */
.subscribe-cta-wrap{
display:flex; justify-content:center;
padding: clamp(24px, 5vh, 60px) 7vw;
}
/* Base variables:
--cta-base = colore del bordo/testo allo stato normale
--cta-contrast = colore del testo quando il bottone si riempie */
.cta-subscribe{
--cta-base:#000; /* adatto a sezioni chiare */
--cta-contrast:#fff;
--padY:16px; --padX:28px; --rad:9999px; --dur:1.8s;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
padding:var(--padY) var(--padX);
border:2px solid var(--cta-base);
color:var(--cta-base);
background:transparent; text-decoration:none; text-transform:uppercase;
letter-spacing:.12em; font-weight:900; line-height:1; overflow:hidden;
border-radius:var(--rad);
transition:
color var(--dur) cubic-bezier(.22,.61,.36,1),
letter-spacing var(--dur) cubic-bezier(.22,.61,.36,1),
transform var(--dur) cubic-bezier(.22,.61,.36,1);
z-index:9999; isolation:isolate;
}
/* Variante per sezioni scure */
.cta-subscribe.cta--dark-bg{
--cta-base:#fff; /* bordo/testo bianchi allo stato normale */
--cta-contrast:#000; /* in hover, testo nero sul fill bianco */
}
/* Etichetta e pallino sopra lo sfondo animato */
.cta-subscribe .cta-label,
.cta-subscribe .cta-dot{ position:relative; z-index:1; }
.cta-label { font-size:30px; }
/* Mobile: ≤ 768px -> 22px */
@media (max-width: 768px){
.cta-label{
font-size: 22px;
}
}
/* Pallino a destra (segue currentColor quindi cambia con il testo) */
.cta-subscribe .cta-dot{
width:24px; height:24px; border-radius:50%;
background: currentColor;
margin-left: 20px;
transition: transform var(--dur) cubic-bezier(.22,.61,.36,1),
background var(--dur) cubic-bezier(.22,.61,.36,1);
}
/* Riempimento dal centro: due metà che scalano verso i bordi */
.cta-subscribe::before,
.cta-subscribe::after{
content:""; position:absolute; top:0; bottom:0; width:50%;
background: var(--cta-base);
z-index:0; transform: scaleX(0);
transition: transform var(--dur) cubic-bezier(.22,.61,.36,1);
}
.cta-subscribe::before{ left:0; transform-origin:right center; }
.cta-subscribe::after { right:0; transform-origin:left center; }
/* Hover/focus: riempie, inverte i colori, muove leggermente il pallino */
.cta-subscribe:hover,
.cta-subscribe:focus-visible{
color: var(--cta-contrast);
letter-spacing:.14em;
transform: translateY(-1px);
}
.cta-subscribe:hover::before,
.cta-subscribe:hover::after,
.cta-subscribe:focus-visible::before,
.cta-subscribe:focus-visible::after{
transform: scaleX(1);
}
.cta-subscribe:hover .cta-dot,
.cta-subscribe:focus-visible .cta-dot{
transform: translateX(6px);
}
/* Active/click */
.cta-subscribe:active{ transform: translateY(0); }
/* Focus accessibilità */
.cta-subscribe{ outline:none; }
.cta-subscribe:focus-visible{
box-shadow:0 0 0 3px color-mix(in srgb, var(--cta-base) 35%, transparent) inset,
0 0 0 3px color-mix(in srgb, var(--cta-base) 35%, transparent);
}
/* Riduci motion */
@media (prefers-reduced-motion: reduce){
.cta-subscribe, .cta-subscribe::before, .cta-subscribe::after, .cta-subscribe .cta-dot{
transition:none !important;
}
}
/********************************/
/****************************/
/* ===== CTA ghost button con fill dal sx ===== */
/****************************/
/* ===== CTA pill invertita (classi dedicate, nessun conflitto) ===== */
.subscribe-cta-wrap-INV{
display: flex;
justify-content: left;
padding: clamp(24px, 5vh, 60px) 7vw;
}
/* Palette:
--cta-base = colore bordo/testo allo stato normale
--cta-contrast = colore del testo quando il bottone si riempie */
.cta-subscribe-INV{
/* INVERTED di default: ideale su sezioni scure */
--cta-base:#fff; /* bordo/testo bianchi */
--cta-contrast:#000; /* in hover, testo nero sul fill bianco */
--padY:16px; --padX:28px; --rad:9999px; --dur:1.8s;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--padY) var(--padX);
border: 2px solid var(--cta-base);
color: var(--cta-base);
background: transparent;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 900;
line-height: 1;
overflow: hidden;
border-radius: var(--rad);
transition:
color var(--dur) cubic-bezier(.22,.61,.36,1),
letter-spacing var(--dur) cubic-bezier(.22,.61,.36,1),
transform var(--dur) cubic-bezier(.22,.61,.36,1);
z-index: 1;
isolation: isolate;
}
/* Modificatore per sfondi chiari (nero come stato base) */
.cta-subscribe-INV.cta-subscribe-INV--on-light{
--cta-base:#000; /* bordo/testo neri allo stato normale */
--cta-contrast:#fff; /* in hover, testo bianco sul fill nero */
}
/* Etichetta + pallino sopra al fill animato */
.cta-subscribe-INV .cta-subscribe-INV__label,
.cta-subscribe-INV .cta-subscribe-INV__dot{
position: relative;
z-index: 1;
}
/* Dimensioni etichetta */
.cta-subscribe-INV__label{ font-size:30px; }
@media (max-width: 768px){
.cta-subscribe-INV__label{ font-size:18px; }
}
/* Pallino a destra (segue currentColor) */
.cta-subscribe-INV .cta-subscribe-INV__dot{
width: 24px; height: 24px; border-radius: 50%;
background: currentColor;
margin-left: 20px;
transition:
transform var(--dur) cubic-bezier(.22,.61,.36,1),
background var(--dur) cubic-bezier(.22,.61,.36,1);
}
/* Riempimento dal centro (due metà) */
.cta-subscribe-INV::before,
.cta-subscribe-INV::after{
content:"";
position:absolute; top:0; bottom:0; width:50%;
background: var(--cta-base);
z-index:0;
transform: scaleX(0);
transition: transform var(--dur) cubic-bezier(.22,.61,.36,1);
}
.cta-subscribe-INV::before{ left:0; transform-origin:right center; }
.cta-subscribe-INV::after { right:0; transform-origin:left center; }
/* Hover/focus: riempie, inverte i colori, muove leggermente il pallino */
.cta-subscribe-INV:hover,
.cta-subscribe-INV:focus-visible{
color: var(--cta-contrast);
letter-spacing:.14em;
transform: translateY(-1px);
}
.cta-subscribe-INV:hover::before,
.cta-subscribe-INV:hover::after,
.cta-subscribe-INV:focus-visible::before,
.cta-subscribe-INV:focus-visible::after{
transform: scaleX(1);
}
.cta-subscribe-INV:hover .cta-subscribe-INV__dot,
.cta-subscribe-INV:focus-visible .cta-subscribe-INV__dot{
transform: translateX(6px);
}
/* Active/click */
.cta-subscribe-INV:active{ transform: translateY(0); }
/* Focus accessibilità */
.cta-subscribe-INV{ outline:none; }
.cta-subscribe-INV:focus-visible{
box-shadow:
0 0 0 3px color-mix(in srgb, var(--cta-base) 35%, transparent) inset,
0 0 0 3px color-mix(in srgb, var(--cta-base) 35%, transparent);
}
/* Riduci motion */
@media (prefers-reduced-motion: reduce){
.cta-subscribe-INV,
.cta-subscribe-INV::before,
.cta-subscribe-INV::after,
.cta-subscribe-INV .cta-subscribe-INV__dot{
transition: none !important;
}
}
/*************************************/
/* __ sposto lente a dx del menu __ */
/*************************************/
/* === Sposta la lente subito a destra dell'hamburger SOLO nel header === */
@media (min-width:1024px){
/* 0) Protezione: NON toccare l'off-canvas */
.slideout-navigation .inside-navigation{
display: grid !important; /* lascia il layout del pannello com'è */
}
.slideout-navigation .menu-toggle,
.slideout-navigation .menu-bar-items{
order: initial !important;
margin: 0 !important;
}
/* 1) Header nav: layout flex solo qui */
.site-header nav.main-navigation .inside-navigation{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0;
}
/* 2) Ordine: [hamburger][lente][…] */
.site-header nav.main-navigation .menu-toggle{ order: 10; }
.site-header nav.main-navigation .menu-bar-items{ order: 11; }
.site-header nav.main-navigation .main-nav{ order: 99; }
/* 3) La lente non va più a destra da sola */
.site-header nav.main-navigation .menu-bar-items{
margin-left: 8px !important; /* piccolo spazio dopo l'hamburger */
margin-right: 0 !important;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* metti la lente come primo item delle icone */
.site-header nav.main-navigation .menu-bar-items .search-item{ order: 1; }
/* 4) Click area confortevole sulla lente */
.site-header nav.main-navigation .menu-bar-items .search-item a{
display: inline-flex; align-items: center; padding: 6px;
}
}
/* 5) Quando l'off-canvas è APERTO, nascondi le icone della barra (evita sovrapposizioni) */
.offside-js--is-open .site-header nav.main-navigation .menu-bar-items,
.slide-opened .site-header nav.main-navigation .menu-bar-items{
opacity: 0;
pointer-events: none;
}
/****************************/
/* __ css per immagini __ */
/****************************/
/*************************************************************************/
/* ===== Duo immagini: SX sticky, DX che sale/riscende (no scale) ===== */
/* Applica questa classe al blocco Colonne (2) di Gutenberg */
.rf-grid.wp-block-columns{
align-items: flex-start; /* serve allo sticky */
gap: clamp(16px, 2.5vw, 32px);
}
/* Colonne interne: evita clipping */
.rf-grid .wp-block-column{
min-width: 0;
overflow: visible;
position: relative;
}
/* Immagini: stesse dimensioni + radius */
.rf-grid img{
display:block;
width:100%;
height:auto;
border-radius: 9px;
backface-visibility: hidden;
transform: translateZ(0);
}
/* SINISTRA: sticky (solo desktop) */
.rf-pin{ position: static; }
@media (min-width:1024px){
.rf-pin{
position: sticky;
top: clamp(64px, 10vh, 120px); /* adatta all’header del tuo sito */
align-self: flex-start;
}
}
/* DESTRA: nessuna animazione via CSS; tutto gestito dallo JS */
.rf-floater{ will-change: transform; }
/* Mobile: effetto OFF */
@media (max-width:1023px){
.rf-floater{ transform: none !important; }
}
/* Accessibilità: riduci motion se richiesto */
@media (prefers-reduced-motion: reduce){
.rf-floater{ transform: none !important; transition: none !important; }
}
/********************************************************/
/* ===== Reveal singola immagine da SX (fade + blur) ===== */
/********************************************************/
/* Wrapper opzionale (se usi un Gruppo attorno all'immagine) */
.rf-single{
display: block;
}
/* Immagine: radius e reset */
.rf-single img,
.rf-reveal{
display: block;
width: 100%;
height: auto;
border-radius: 9px;
}
/* Stato iniziale: fuori a sinistra + fade + blur */
.rf-reveal{
--dx: -48px; /* spostamento orizzontale base */
opacity: 0;
transform: translate3d(var(--dx), 0, 0);
filter: blur(6px);
will-change: transform, opacity, filter;
transition:
transform .8s cubic-bezier(.22,.61,.36,1),
opacity .8s cubic-bezier(.22,.61,.36,1),
filter .8s cubic-bezier(.22,.61,.36,1);
}
/* Mobile: spostamento più corto */
@media (max-width:1023px){
.rf-reveal{ --dx: -28px; }
}
/* Stato attivato (in view) */
.rf-reveal.is-in{
opacity: 1;
transform: translate3d(0,0,0);
filter: blur(0);
}
/* Riduci motion: disattiva animazioni */
@media (prefers-reduced-motion: reduce){
.rf-reveal{
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* Variante moderna (opzionale): CSS scroll-driven se supportato
Nei browser compatibili l'animazione segue lo scroll */
@supports (animation-timeline: view()){
.rf-reveal{
animation: rf-single-in .9s cubic-bezier(.22,.61,.36,1) both;
animation-timeline: view();
animation-range: entry -40% cover 45%;
opacity: 1; transform: none; filter: none; /* evita doppio stato col JS */
}
@keyframes rf-single-in{
from { opacity:0; transform:translate3d(var(--dx),0,0); filter:blur(6px); }
to { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
}
}
/*******************************************/
/* ===== SCRITTA SCORREVOLE IN BASSO ===== */
/*******************************************/
/* ===== Marquee footer (loop orizzontale) ===== */
.rf-marquee{
/* Variabili/fallback */
--bg: #111; /* sfondo */
--fg: #fff; /* testo/icone */
--speed: 30s; /* fallback se manca data-speed */
--gap: 48px; /* fallback se manca data-gap */
width: 100%;
overflow: hidden;
background: var(--bg);
color: var(--fg);
position: relative;
/* Tipografia: 300px desktop */
font-size: 300px;
font-family: "Aeonik Pro";
line-height: .9;
letter-spacing: .02em;
font-weight: 900;
text-transform: uppercase;
padding: .15em 0; /* proporzionale alla dimensione */
}
/* Forza bianco puro su TUTTO il contenuto (link inclusi) */
.rf-marquee,
.rf-marquee *{ color: var(--fg) !important; }
.rf-marquee a,
.rf-marquee a:visited,
.rf-marquee a:hover,
.rf-marquee a:active{ color: var(--fg) !important; text-decoration: none; }
.rf-marquee .sep{ opacity: 1; } /* separatore bianco pieno */
.rf-marquee svg{ fill: currentColor; stroke: currentColor; }
/* Pista che scorre */
.rf-marquee__track{
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: var(--gap);
will-change: transform;
animation: rf-marquee var(--speed) linear infinite;
}
/* Pausa su hover (desktop) */
@media (hover:hover){
.rf-marquee:hover .rf-marquee__track{ animation-play-state: paused; }
}
/* Animazione: trasla la lunghezza della pista */
@keyframes rf-marquee{
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* Accessibilità: riduci motion */
@media (prefers-reduced-motion: reduce){
.rf-marquee__track{ animation: none !important; }
}
/* Tablet/Mobile: a 100px su mobile come richiesto */
@media (max-width: 768px){
.rf-marquee{
font-size: 70px; /* <-- MOBILE: 100px */
letter-spacing: .04em;
padding: 0.12em 0;
}
}
/********************************/
/* css per il pulsante fisso */
/* == Sticky label WhatsApp == */
/********************************/
/* ===== Sticky label right-center – "WhatsApp" ===== */
.rf-label-cta{
/* Variabili */
--bg: #000; /* stato normale: sfondo nero */
--fg: #fff; /* stato normale: testo bianco */
--border: #000; /* colore bordo */
--hover-bg: #fff; /* hover: sfondo bianco */
--hover-fg: #000; /* hover: testo nero */
--shadow: 0 8px 24px rgba(0,0,0,.25);
--radius: 1px;
--padY: 12px;
--padX: 10px;
--fs: 13px; /* font-size base */
position: fixed;
top: 50%;
right: 0; /* appoggiata al bordo destro */
transform: translateY(-50%);
z-index: 99999;
pointer-events: none; /* il contenitore non intercetta click */
}
.rf-label-cta__btn{
pointer-events: auto; /* solo il bottone è cliccabile */
display: inline-flex;
align-items: center; /* dot e testo sempre centrati tra loro */
gap: 10px;
background: var(--bg);
color: var(--fg);
border: 1px solid var(--border);
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: var(--padY) var(--padX);
text-decoration: none;
text-transform: uppercase;
letter-spacing: .12em;
font: 700 var(--fs)/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
/* Testo verticale come nel sito d'esempio */
writing-mode: vertical-rl;
transform: rotate(180deg); /* leggibile dall’alto verso il basso */
backface-visibility: hidden;
/* Hit-area minima anche senza aumentare la distanza dal bordo destro */
min-width: 48px; /* spessore minimo (target tocco ≥ 44px) */
box-shadow: var(--shadow);
transition:
transform .25s cubic-bezier(.22,.61,.36,1),
box-shadow .25s ease,
background .2s ease,
color .2s ease,
border-color .2s ease,
border-width .2s ease;
-webkit-tap-highlight-color: rgba(255,255,255,.15);
touch-action: manipulation;
}
/* “Pallino” a fine etichetta (segue il colore del testo) */
.rf-label-cta__dot{
width: 8px; height: 8px;
border-radius: 50%;
background: currentColor;
opacity: .95;
flex: 0 0 auto; /* mantiene la dimensione, sempre allineato */
}
/* Stati link: default SEMPRE bianco su sfondo nero */
.rf-label-cta__btn,
.rf-label-cta__btn:link,
.rf-label-cta__btn:visited{
color: var(--fg);
}
/* Hover/focus/active (desktop/mouse): sfondo bianco, testo nero, bordo 2px */
@media (hover: hover){
.rf-label-cta__btn:hover,
.rf-label-cta__btn:focus{
background: var(--hover-bg);
color: var(--hover-fg);
border-color: var(--border);
border-width: 2px; /* bordo 2px in hover */
transform: rotate(180deg) translateX(-6px);
box-shadow: 0 10px 28px rgba(0,0,0,.32);
}
}
/* Focus accessibile */
.rf-label-cta__btn:focus-visible{
outline: 2px solid #7fffd4;
outline-offset: 3px;
}
/* ===== Mobile: hit-area più grande, sempre attaccato al bordo ===== */
@media (max-width: 768px){
.rf-label-cta{
/* puoi anche aumentare solo il lato destro se ti serve
es.: padding-inline-end sul container, ma non è necessario qui */
}
.rf-label-cta__btn{
--fs: 14px; /* testo un filo più grande */
--padY: 12px; /* più “altezza” per il dito */
--padX: 14px; /* più “spessore” senza staccarsi dal bordo */
gap: 12px; /* gap leggermente maggiore per il dot */
min-width: 54px; /* spessore minimo più generoso su touch */
/* niente “saltino” in tap sui device touch */
transform: rotate(180deg);
}
.rf-label-cta__dot{
width: 10px; height: 10px; /* dot un filo più grande, resta centrato */
}
}
/* (Facoltativo) Nascondi durante l’apertura dell’off-canvas menu */
html.offside-js--is-open .rf-label-cta{
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
/********************************/
/* ===== Layout 3 immagini ===== */
/********************************/
/********************************/
/* ===== Uncover (clip-path) + risalita verticale con tempi differenziati ===== */
.rf-wipe-trio{
--dur-uncover: 1.6s; /* durata “tendina” uguale per tutte */
--dur-rise: 1.6s; /* durata di default della risalita (può essere sovrascritta per img 2/3) */
--radius: 1px; /* bordi immagini */
padding:50px 20px 50px 50px;
}
@media (max-width: 768px){
.rf-wipe-trio {
padding:10px;
}
}
/* target: lo script applica .rf-wipe-img alle ![]()
dentro il blocco */
.rf-wipe-trio img.rf-wipe-img{
display:block;
width:100%;
height:auto;
border-radius: var(--radius);
/* Tendina: immagine inizialmente coperta da sinistra */
clip-path: inset(0 100% 0 0 round var(--radius));
/* Offset verticale iniziale (0 / 50 / 100px) gestito via --lift */
transform: translateY(var(--lift, 0));
/* Fallback IO: transizioni separate per svelare e per risalire */
transition:
clip-path var(--dur-uncover) linear,
transform var(--dur-rise) linear;
will-change: clip-path, transform;
}
/* Attivazione fallback IO */
.rf-wipe-trio img.rf-wipe-img.is-in{
clip-path: inset(0 0 0 0 round var(--radius));
transform: translateY(0);
transition-delay: var(--delay, 0ms); /* applica lo stagger */
}
/* STAGGER + offset (Gutenberg 3 colonne) */
.rf-wipe-trio .wp-block-column:nth-child(1) img.rf-wipe-img{
--delay: 0ms; --ad: 0s; --lift: 0px; --dur-rise: 1.6s;
}
.rf-wipe-trio .wp-block-column:nth-child(2) img.rf-wipe-img{
--delay: 200ms; --ad: .2s; --lift: 50px; --dur-rise: 1.7s; /* un filo più lenta della 1ª */
}
.rf-wipe-trio .wp-block-column:nth-child(3) img.rf-wipe-img{
--delay: 600ms; --ad: .6s; --lift: 150px; --dur-rise: 2.1s; /* più lenta: “ci mette un pochino di più” -- era 400 e .4s*/
}
/* Riduci motion */
@media (prefers-reduced-motion: reduce){
.rf-wipe-trio img.rf-wipe-img{
transition: none !important;
clip-path: inset(0 0 0 0 round var(--radius)) !important;
transform: none !important;
}
}
/* ===== Scroll-driven (browser moderni) =====
Due animazioni parallele sulla stessa timeline: uncover + rise con durate diverse */
@supports (animation-timeline: view()){
.rf-wipe-trio img.rf-wipe-img{
transition: none;
animation:
rf-uncover var(--dur-uncover) linear both,
rf-rise var(--dur-rise) linear both;
animation-timeline: view(), view();
animation-range: entry 0% cover 35%, entry 0% cover 35%;
animation-delay: var(--ad, 0s), var(--ad, 0s); /* stesso delay per entrambe */
}
@keyframes rf-uncover{
from{ clip-path: inset(0 100% 0 0 round var(--radius)); }
to { clip-path: inset(0 0% 0 0 round var(--radius)); }
}
@keyframes rf-rise{
from{ transform: translateY(var(--lift, 0)); }
to { transform: translateY(0); }
}
}
/* --- DEBUG opzionale: mostra il contorno per capire quali img sono target ---
.home .rf-wipe-trio img.rf-wipe-img{ outline: 2px dashed magenta; }
*/
/* Ritarda di 1s la terza */
.rf-wipe-trio .wp-block-column:nth-child(3) img.rf-wipe-img{
--delay: 1000ms !important; /* fallback IO */
--ad: 1.1s !important; /* scroll-driven */
}
/******************************************************/
/* ===== alzo colonna dx img Servizi da desktop ===== */
/*****************************************************/
div.colDXserv {margin-top: 60px;}
@media (max-width: 768px) {
div.colDXserv {margin-top: 10px;}
}
/******************************/
/* __ __ */
/** _________________________ */
/******************************/
.inside-site-info {
display: flex;
align-items: right !important;
justify-content: right;
padding: 20px 10px;
}
.site-footer:not(.footer-bar-active) .copyright-bar {
margin: 0 10px !important;;
text-align:right !important;
}
/* **************************** */
/* __CSS per link neri __ */
/* __altro css è in un hook __ */
/* **************************** */
.be3-breadcrumb {
text-align: right;
font-size: 14px;
opacity: 0.8;
}
/* wrapper */
.be3-breadcrumb-wrap{ padding:12px 7vw 0; }
/* lista breadcrumb */
.be3-bc__list{
display:flex; flex-wrap:wrap; gap:.25rem .5rem;
list-style:none; margin:0; padding:0;
}
.be3-bc__list li+li::before{ content:"›"; opacity:.6; margin:0 .45rem; }
/* link neri ovunque */
.be3-breadcrumb a,
.be3-breadcrumb .nero,
.be3-breadcrumb-wrap .rank-math-breadcrumb a,
.be3-breadcrumb-wrap #breadcrumbs a{
color:#000 !important;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,.25) !important;
}
.be3-breadcrumb a:hover,
.be3-breadcrumb-wrap .rank-math-breadcrumb a:hover,
.be3-breadcrumb-wrap #breadcrumbs a:hover{ opacity:.8; }
/* Spazio di 30px tra Gallery e pulsanti (front-end) */
.single-news .entry-content .wp-block-gallery + .wp-block-buttons{
margin-top: 80px;
}
/* (opzionale) se usi un'immagine singola al posto della gallery */
.single-news .entry-content .wp-block-image + .wp-block-buttons{
margin-top: 40px;
}
/* = Gallery: tutte rettangolari quando ci sono più colonne
(singola immagine non viene toccata) */
/* imposta il rapporto (cambialo a piacere: 3/2, 4/3, 16/9, 1/1...) */
:root { --be3-gallery-ratio: 3/2; }
/* Front-end */
.entry-content .wp-block-gallery.is-cropped:not(.has-1-columns):not(.columns-1) .wp-block-image,
.entry-content .blocks-gallery-grid.is-cropped:not(.columns-1) .blocks-gallery-item {
aspect-ratio: var(--be3-gallery-ratio);
width: 100%;
overflow: hidden;
border-radius: 0; /* opzionale: arrotonda se vuoi */
}
/* Immagini dentro: riempiono il box (niente bande nere) */
.entry-content .wp-block-gallery.is-cropped:not(.has-1-columns):not(.columns-1) .wp-block-image img,
.entry-content .blocks-gallery-grid.is-cropped:not(.columns-1) .blocks-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover; /* taglia e copre */
display: block;
}
/* Editor Gutenberg (così il cliente vede lo stesso risultato mentre lavora) */
body.wp-admin .editor-styles-wrapper .wp-block-gallery.is-cropped:not(.has-1-columns):not(.columns-1) .wp-block-image,
body.wp-admin .editor-styles-wrapper .blocks-gallery-grid.is-cropped:not(.columns-1) .blocks-gallery-item {
aspect-ratio: var(--be3-gallery-ratio);
overflow: hidden;
}
body.wp-admin .editor-styles-wrapper .wp-block-gallery.is-cropped:not(.has-1-columns):not(.columns-1) .wp-block-image img,
body.wp-admin .editor-styles-wrapper .blocks-gallery-grid.is-cropped:not(.columns-1) .blocks-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-news .wp-block-gallery img.reveal{
opacity:0; transform:translateY(24px);
transition: opacity .65s cubic-bezier(.22,.61,.36,1),
transform .65s cubic-bezier(.22,.61,.36,1);
}
.single-news .wp-block-gallery img.reveal.is-in{
opacity:1; transform:none;
}
/* Bottoni nelle singole News */
.single-news .wp-block-button__link.reveal{
opacity: 0;
transform: translateY(16px);
transition:
opacity .55s cubic-bezier(.22,.61,.36,1),
transform .55s cubic-bezier(.22,.61,.36,1);
will-change: opacity, transform;
display: inline-flex; /* mantiene l’aspetto del button */
align-items: center;
}
.single-news .wp-block-button__link.reveal.is-in{
opacity: 1;
transform: none;
}
/******************************/
/* __ POLYLANG aggiungo bandiera __ */
/* __ nell'hamburger menù fuori non dentro__ */
/******************************/
/* Contenitore bandiera accanto a hamburger/lente */
.menu-bar-items .be3-lang-compact {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: 8px;
}
/* Pulizia lista di Polylang */
.menu-bar-items .be3-lang-compact ul,
.menu-bar-items .be3-lang-compact li {
margin: 0;
padding: 0;
list-style: none;
display: inline-flex;
}
/* Bandiera */
.menu-bar-items .be3-lang-compact img {
display: block;
width: 20px;
height: auto;
}
/* Hover/focus */
.menu-bar-items .be3-lang-compact a:hover,
.menu-bar-items .be3-lang-compact a:focus {
opacity: .85;
}
/*******/
.menu-bar-items .be3-lang-compact-wrap { display:inline-flex; align-items:center; margin-left:8px; margin-right:10px; }
.menu-bar-items .be3-lang-code { display:inline-flex; align-items:center; }
.menu-bar-items .be3-lang-code__link {
display:inline-flex; align-items:center; justify-content:center;
min-width:28px; height:28px; padding:0 8px; border-radius:999px;
text-transform:uppercase; font-size:12px; line-height:1; text-decoration:none;
border:0px solid currentColor; opacity:.9;
font-size:15px !important;
}
.menu-bar-items .be3-lang-code__link:hover,
.menu-bar-items .be3-lang-code__link:focus { opacity:1; font-weight:700 !important; }
/******************************/
/* __ SLIDER LOGHI PARTNER __ */
/******************************/
/******************************/
/* __ SLIDER LOGHI PARTNER __ */
/******************************/
/* Disattiva qualsiasi filtro sui loghi quando il contenitore ha .is-gray */
.logo-marquee.is-gray img{
filter: none !important;
opacity: 1 !important;
background: transparent !important; /* solo per sicurezza */
}
/* ===== Slider loghi (marquee) ===== */
.logo-marquee {
--speed: 40s; /* durata del ciclo (più basso = più veloce) */
--gap: 80px; /* spazio tra i loghi */
position: relative;
overflow: hidden;
width: 100%;
padding-block: 12px;
/* evita il “doppio” su due righe */
white-space: nowrap;
font-size: 0;
}
.logo-marquee__track {
display: inline-flex;
align-items: center;
gap: var(--gap);
white-space: nowrap;
will-change: transform;
animation: lm-scroll var(--speed) linear infinite;
vertical-align: top;
}
.logo-marquee:hover .logo-marquee__track {
animation-play-state: paused; /* opzionale: pausa on hover */
}
/* Immagini logo */
.logo-marquee img {
height: 100px !important; /* altezza fissa richiesta */
width: auto; /* mantiene proporzioni */
max-width: none;
object-fit: contain;
display: block;
transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
/* ===== TONALITÀ UNIFORME (opzionali) =====
Applica UNA di queste classi al contenitore .logo-marquee:
- .is-white → loghi bianchi (per sfondi scuri)
- .is-black → loghi neri (per sfondi chiari)
- .is-gray → loghi grigi uniformi
(Niente velatura: opacity = 1) */
.logo-marquee.is-white img {
filter: brightness(0) invert(1) contrast(1000%);
opacity: 1 !important;
}
.logo-marquee.is-black img {
filter: brightness(0) contrast(1000%);
opacity: 1 !important;
}
.logo-marquee.is-gray img {
filter: grayscale(1) brightness(0.9) contrast(0.7);
opacity: 1 !important;
}
/* Hover leggero (facoltativo) */
.logo-marquee img:hover { opacity: 1; }
/* Animazione di scorrimento */
@keyframes lm-scroll {
to { transform: translateX(-50%); }
}
/* Accessibilità: riduci movimento */
@media (prefers-reduced-motion: reduce) {
.logo-marquee__track { animation: none; }
}
/* Responsive: altezza loghi su schermi piccoli */
@media (max-width: 768px) {
.logo-marquee img { height: 140px; }
}
/* Struttura anti-doppia riga (safety) */
.logo-marquee {
white-space: nowrap;
font-size: 0;
overflow: hidden;
}
.logo-marquee__track {
display: inline-flex;
vertical-align: top;
}
/* ===== RIMOZIONE “VELATURA”/SFUMATURA BORDI =====
Se usavi .is-fade per avere il fade ai lati, qui lo azzeriamo */
.logo-marquee.is-fade {
--fade: 0 !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
/* Mobile: slider più veloce (opzionale) */
@media (max-width: 768px) {
.logo-marquee { --speed: 25s !important; } /* prima 40s */
}
/******************/
/****************** HERO (prima riga) ******************/
.entry-content {
padding-top: 40px;
}
/******/
/* La riga HERO è una grid 2-colonne: SX più larga, DX più stretta */
.news-hero-grid .wp-block-columns{
display: grid !important;
grid-template-columns: 2fr 1fr;
align-items: stretch !important; /* colonne stessa altezza */
column-gap: 16px; /* distanza tra SX e DX */
row-gap: 0 !important;
margin-bottom: 16px; /* spazio sotto l’hero */
}
/* Azzera padding/margini che falsano le altezze */
.news-hero-grid .wp-block-column{ padding:0 !important; margin:0 !important; }
.news-hero-grid .wp-block-query{ margin:0 !important; }
.news-hero-grid .wp-block-post-template{
margin:0 !important; padding:0 !important; list-style:none !important;
}
/* COLONNA SINISTRA: Cover QUADRATO (1:1) che detta l’altezza della riga */
.news-hero-grid .wp-block-column:first-child .wp-block-cover{
aspect-ratio: 1 / 1;
height: auto;
border-radius: 14px;
overflow: hidden;
position: relative;
}
.news-hero-grid .wp-block-column:first-child .wp-block-cover__image-background{
width: 100%; height: 100%; object-fit: cover;
}
/* Testi overlay in basso (SX + DX) + gradiente di leggibilità */
.news-hero-grid .wp-block-cover__inner-container{
display: grid; gap: 6px;
margin-top: auto;
padding: clamp(14px, 2.2vw, 22px); /* padding di base */
padding-bottom: 20px !important; /* testi a 20px dal bordo inferiore */
}
.news-hero-grid .wp-block-cover__inner-container > *{ margin-bottom: 0 !important; }
.news-hero-grid .wp-block-post-title a{ color:#fff; text-decoration:none; }
.news-hero-grid .wp-block-post-title a:hover{ text-decoration:underline; }
.news-hero-grid .wp-block-post-date{ color:rgba(255,255,255,.85); }
.news-hero-grid .wp-block-cover{ position:relative; }
.news-hero-grid .wp-block-cover::after{
content:""; position:absolute; inset:0;
background:linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%);
pointer-events:none;
}
/* COLONNA DESTRA: due pannelli che sommano l’altezza della SX, con gap 10px */
.news-hero-grid .wp-block-column:last-child{
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
}
.news-hero-grid .wp-block-column:last-child .wp-block-query{
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.news-hero-grid .wp-block-column:last-child .wp-block-post-template{
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important; /* <-- distacco tra le due immagini */
}
.news-hero-grid .wp-block-column:last-child .wp-block-post{
flex: 1 1 0 !important; /* metà + metà = 100% (gap escluso) */
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.news-hero-grid .wp-block-column:last-child .wp-block-cover{
flex: 1 1 auto !important;
min-height: 0 !important;
margin: 0 !important; /* niente margini: distacco dato dal gap */
border-radius: 14px;
overflow: hidden;
position: relative;
}
.news-hero-grid .wp-block-column:last-child .wp-block-cover__image-background{
width:100% !important; height:100% !important; object-fit:cover !important;
}
/* Spazio sotto: compact */
.news-hero-grid{ margin-bottom: 16px !important; }
.news-hero-grid + .news-grid{ margin-top: 0 !important; }
/* Mobile: stack verticale, niente vincoli di altezza */
@media (max-width: 768px){
.news-hero-grid .wp-block-columns{
display:block !important;
margin-bottom:12px;
}
.news-hero-grid .wp-block-column:first-child .wp-block-cover{
aspect-ratio:auto; min-height:44vh;
}
.news-hero-grid .wp-block-column:last-child .wp-block-post-template{
gap:12px !important;
}
.news-hero-grid .wp-block-column:last-child .wp-block-post,
.news-hero-grid .wp-block-column:last-child .wp-block-cover{
flex: initial !important; height: auto !important;
}
}
/********* GRIGLIA NEWS (sotto l’hero) *********/
/* 3 colonne su desktop, responsive sotto */
.news-grid .wp-block-post-template{
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 28px);
}
/* Card: immagine sopra, testi sotto */
.news-grid .wp-block-post{
display: flex;
flex-direction: column;
}
/* Immagine verticale “editoriale” */
.news-grid .wp-block-post-featured-image img{
width: 100%;
aspect-ratio: 4 / 5; /* rettangolo verticale */
object-fit: cover;
border-radius: 12px;
display: block;
}
/* Meta + titolo sotto l’immagine */
.news-grid .wp-block-post-date{
margin-top: 12px;
font-size: .9rem;
opacity: .75;
}
.news-grid .wp-block-post-title{
margin: 6px 0 0;
line-height: 1.25;
}
.news-grid .wp-block-post-title a{
text-decoration: none;
}
.news-grid .wp-block-post-title a:hover{
text-decoration: underline;
}
/* “Leggi di più” come bottone */
/* Griglia: "Leggi di più" più opaco + margine sotto */
.news-grid .wp-block-read-more{
background: #575760 !important;
color: #fff !important;
opacity: .8; /* più opaco (meno evidente) */
padding: 3px 8px;
border-radius: 9px;
display: inline-block;
margin-top: 10px;
margin-bottom: 20px; /* spazio sotto il bottone */
text-decoration: none !important;
transition: opacity .2s ease, filter .2s ease, transform .1s ease;
font-size:14px !important;
}
.news-grid .wp-block-read-more:hover{
opacity: 1; /* pieno in hover */
filter: brightness(1.05);
}
.news-grid .wp-block-read-more:active{
transform: translateY(1px);
}
/* Responsive griglia */
@media (max-width: 1024px){
.news-grid .wp-block-post-template{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
.news-grid .wp-block-post-template{ grid-template-columns: 1fr; }
}
/********/
/* --- Personalizzazioni griglia sotto (3 colonne) --- */
/* Box card: bordino grigio + padding interno 5px */
.news-grid .wp-block-post{
border: 1px solid #e0e0e0; /* bordino grigio 1px */
padding: 5px; /* spazio tra bordo e contenuto */
border-radius: 12px; /* facoltativo: angoli morbidi coerenti con le immagini */
background: #fff; /* evita trasparenze su sfondi colorati */
}
/* Immagine con raggio leggermente minore per non “toccare” il bordo */
.news-grid .wp-block-post-featured-image img{
border-radius: 8px;
}
/* Data e titolo neri */
.news-grid .wp-block-post-date{
color: #000;
opacity: 1; /* rimuove la semi-trasparenza precedente */
}
.news-grid .wp-block-post-title a{
color: #000;
}
.news-grid .wp-block-post-title a:hover{
color: #111; /* leggero scurimento in hover */
text-decoration: underline;
}
/* (opzionale) bottone "Leggi di più" coerente sul bianco */
.news-grid .wp-block-read-more{
background: #111;
color: #fff !important;
}
.news-grid .wp-block-read-more:hover{
filter: brightness(1.08);
}
/* === Griglia: effetto zoom immagine all'hover della card === */
.news-grid .wp-block-post-featured-image{
position: relative;
overflow: hidden; /* clip dello zoom ai bordi dell'immagine */
border-radius: 8px; /* allineato alla card */
}
.news-grid .wp-block-post-featured-image img{
transform: scale(1);
transition: transform .45s ease; /* morbido */
will-change: transform;
}
.news-grid .wp-block-post:hover .wp-block-post-featured-image img{
transform: scale(1.06); /* zoom */
}
/* (opzionale) micro-elevazione della card all'hover */
.news-grid .wp-block-post{
transition: box-shadow .25s ease, transform .25s ease;
}
.news-grid .wp-block-post:hover{
box-shadow: 0 10px 24px rgba(0,0,0,.08);
transform: translateY(-2px);
}
/* Accessibilità: riduci animazioni se l’utente lo preferisce */
@media (prefers-reduced-motion: reduce){
.news-grid .wp-block-post-featured-image img,
.news-grid .wp-block-post{
transition: none !important;
transform: none !important;
}
}
/* === HERO: zoom immagine all'hover dei singoli box === */
/* clip ai bordi (già impostato, lo rinforziamo) */
.news-hero-grid .wp-block-cover{
overflow: hidden;
}
/* stato base */
.news-hero-grid .wp-block-cover__image-background{
transform: scale(1);
transition: transform .45s ease;
will-change: transform;
}
/* hover sul singolo riquadro (sx o dx) */
.news-hero-grid .wp-block-cover:hover .wp-block-cover__image-background{
transform: scale(1.06); /* 6% di zoom: elegante */
}
/* (opzionale) micro-elevazione del box */
.news-hero-grid .wp-block-cover{
transition: box-shadow .25s ease, transform .25s ease;
}
.news-hero-grid .wp-block-cover:hover{
box-shadow: 0 12px 28px rgba(0,0,0,.10);
transform: translateY(-2px);
}
/* Accessibilità: rispetta "reduced motion" */
@media (prefers-reduced-motion: reduce){
.news-hero-grid .wp-block-cover__image-background,
.news-hero-grid .wp-block-cover{
transition: none !important;
transform: none !important;
}
}
/* ========================================== */
/* ===== Badge categorie – stile comune ===== */
/* ========================================== */
/* ===== Badge Categorie – posizionamento solido ===== */
/* Rendi i contenitori un contesto di posizionamento */
.news-hero-grid .wp-block-cover,
.news-grid .wp-block-post{
position: relative;
}
/* Stile badge + overlay in alto/sinistra */
.news-hero-grid .wp-block-post-terms,
.news-grid .wp-block-post-terms{
position: absolute;
top: 10px;
left: 10px;
z-index: 9; /* sopra a immagine e gradiente */
display: inline-flex;
gap: 6px;
padding: 6px 10px;
background: rgba(0,0,0,.70);
color: #fff;
border-radius: 999px;
font-size: 12px;
line-height: 1;
text-transform: uppercase;
pointer-events: auto;
}
.news-hero-grid .wp-block-post-terms a,
.news-grid .wp-block-post-terms a{
color: #fff !important;
text-decoration: none;
}
.news-hero-grid .wp-block-post-terms a:hover,
.news-grid .wp-block-post-terms a:hover{
text-decoration: underline;
}
/* Metti il gradiente dei Cover sotto il badge */
.news-hero-grid .wp-block-cover::after{ z-index: 1; }
/* ===== (DEBUG) Se non vedi ancora nulla, togli i commenti qui sotto per 1 minuto:
.news-hero-grid .wp-block-post-terms,
.news-grid .wp-block-post-terms{
background: #e60000 !important;
outline: 2px solid yellow !important;
color: #fff !important;
}
*/
/* HERO: ancora il badge al COVER, non all'inner container */
.news-hero-grid .wp-block-cover{
position: relative !important;
overflow: hidden;
}
/* l'inner container NON deve catturare il posizionamento */
.news-hero-grid .wp-block-cover__inner-container{
position: static !important; /* fondamentale */
}
/* badge categorie in alto/sinistra, sopra a tutto */
.news-hero-grid .wp-block-cover .wp-block-post-terms,
.news-hero-grid .wp-block-cover__inner-container .wp-block-post-terms{
position: absolute !important;
top: 12px !important;
left: 12px !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
transform: none !important;
z-index: 30 !important;
display: inline-flex;
gap: 6px;
padding: 6px 10px;
background: rgba(0,0,0,.75);
color: #fff;
border-radius: 999px;
font-size: 12px;
line-height: 1;
text-transform: uppercase;
letter-spacing: .02em;
}
/* assicurati che il gradiente resti sotto al badge */
.news-hero-grid .wp-block-cover::after{
z-index: 1 !important;
}
/* link del badge */
.news-hero-grid .wp-block-post-terms a{
color: #fff !important;
text-decoration: none;
}
.news-hero-grid .wp-block-post-terms a:hover{
text-decoration: underline;
}
/* Fallback: se il badge non è nel Cover ma nel post, forzalo comunque */
.news-hero-grid .wp-block-post{
position: relative !important;
}
.news-hero-grid .wp-block-post > .wp-block-post-terms{
position: absolute !important;
top: 12px !important;
left: 12px !important;
z-index: 30 !important;
margin: 0 !important;
}
/* =============================================== */
/* HERO — colonna destra: abilita badge categorie dentro i Cover */
.news-hero-side .wp-block-cover{
position: relative !important;
overflow: hidden;
}
.news-hero-side .wp-block-cover__inner-container{
position: static !important; /* ancora il badge al Cover */
}
/* Badge in alto/sinistra, sopra a tutto */
.news-hero-side .wp-block-post-terms{
position: absolute !important;
top: 12px !important;
left: 12px !important;
z-index: 30 !important;
margin: 0 !important;
transform: none !important;
display: inline-flex;
gap: 6px;
padding: 6px 10px;
background: rgba(0,0,0,.75);
color: #fff;
border-radius: 999px;
font-size: 12px;
line-height: 1;
text-transform: uppercase;
letter-spacing: .02em;
}
/* Link nei badge: non cliccabili */
.news-hero-side .wp-block-post-terms a{
pointer-events: none;
cursor: default;
color: #fff !important;
text-decoration: none !important;
}
/* (coerenza) gradiente del Cover resta sotto al badge */
.news-hero-side .wp-block-cover::after{ z-index: 1 !important; }
/* ========================================== */
/* Disattiva i link nei badge categorie (HERO + griglia) */
.news-hero-grid .wp-block-post-terms a,
.news-grid .wp-block-post-terms a{
pointer-events: none; /* non cliccabile con mouse/touch */
cursor: default;
text-decoration: none !important;
}
/* Niente underline in hover */
.news-hero-grid .wp-block-post-terms a:hover,
.news-grid .wp-block-post-terms a:hover{
text-decoration: none !important;
}
/****************************/
/* ______ LOGO FOOTER e anche top______*/
/* ___LO RIDUCI DA MOBILE___*/
/****************************/
@media (max-width: 999px){
.logo-footer img {
max-width: 150px !important;
height: auto !important; }
}
/* Logo in alto più piccolo su mobile (GeneratePress) */
@media (max-width: 768px){
/* Variante 1: classi indicate */
.header-image .is-logo-image img{
width: 80px !important;
height: auto !important;
max-width: none !important; /* evita che 100% lo ingrandisca */
}
/* Variante 2: selettori GP standard (fallback) */
.site-logo a img,
.site-logo img{
width: 90px !important;
height: auto !important;
max-width: none !important;
}
/* (opzionale) limita anche il contenitore del logo */
.site-logo,
.header-image .is-logo-image{
max-width: 80px !important;
}
}
/* ======================================================== */
/* Single News: margine destro 10px alle gallerie su mobile */
/* ======================================================== */
@media (max-width: 999px){
/* Gutenberg gallery (blocchi nuovi) */
.single-news .entry-content .wp-block-gallery{
margin-right: 10px !important;
}
/* Compatibilità con versione classica della gallery */
.single-news .entry-content .blocks-gallery-grid{
margin-right: 10px !important;
}
/* Se usi immagini singole al posto della gallery e vuoi lo stesso margine */
.single-news .entry-content .wp-block-image{
margin-right: 10px !important;
}
}