sono un doppio click, e il
browser fa quello che fa sempre in quel caso, cioe' seleziona il testo piu' vicino — tipicamente
il titolo della sezione, che resta evidenziato in azzurro. Il CSS di Swiper 4 sulle frecce non
include user-select, quindi va messo qui. Il prefisso -webkit- serve a Safari (macOS e iOS). */
.swiper-button-next,
.swiper-button-prev{
background-image:none!important;
-webkit-user-select: none;
user-select: none;
}
.swiper-button-next svg,
.swiper-button-prev svg{
margin-left: -10px;
}
/* Freccia arrivata a inizio/fine corsa: resta al suo posto, ingrigita, e assorbe il click.
Qui c'era "[aria-disabled=true] { display:none }", che faceva sparire la freccia: il click
finiva su quello che si trova sotto (la card, o l'
del titolo) e lo apriva. L'attributo
lo mette il modulo a11y di Swiper 4.4.6, che e' attivo di default, quindi la regola scattava
davvero. Sparire non basta nemmeno come rimedio: un elemento display:none non riceve click,
quindi non c'e' modo di fermarli da li'.
Swiper aggiunge di suo ".swiper-button-disabled { opacity:.35; cursor:auto; pointer-events:none }":
dell'opacity ci teniamo l'effetto "spenta", mentre pointer-events va rimesso ad auto o il click
torna ad attraversare la freccia. Riprendendoselo, il bottone lo assorbe senza fare nulla:
Swiper non naviga comunque, essendo gia' a fine corsa. */
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next[aria-disabled="true"],
.swiper-button-prev[aria-disabled="true"]{
pointer-events: auto;
cursor: default;
}
/* La caption va nascosta (translateY 100%, tagliata da overflow:hidden su .video__caption)
finché expandableVideoBlock() non la porta a 0% quando il video parte, a espansione
completata. Lo spostamento è su .video__caption > .container (vedi swup.js), non sullo
interno: .container ha la stessa altezza di .video__caption (che ci si adatta
attorno), quindi 100% della SUA altezza lo porta davvero fuori dal riquadro clippato —
spostare solo lo span, molto più piccolo del contenuto reale (titolo + griglia), non
sarebbe bastato a nascondere tutto.
opacity:0 in aggiunta al translateY: su Safari (desktop e iOS) il clipping di overflow:hidden
su un figlio transformato non è affidabile, e senza questa rete di sicurezza il testo restava
visibile al primo caricamento anche se già "fuori" dal riquadro secondo la sola transform.
L'opacity garantisce l'invisibilità su ogni browser a prescindere dal clipping; lo scorrimento
resta come effetto visivo quando la caption viene mostrata (swup.js anima entrambe insieme). */
figure.video {
margin: 0;
}
figure.video .video__caption {
overflow: hidden;
position: absolute;
left: 24px;
bottom: 100px;
color: #fff;
z-index: 1;
}
figure.video .video__caption > .container {
transform: translateY(100%);
opacity: 0;
}
.video-block__container {
overflow: hidden;
position: relative;
width: 100%;
box-sizing: border-box;
height: 100%;
height: calc(var(--vh) * 100 + 1px);
/* Il video deve coprire SEMPRE tutto lo schermo, anche dietro la barra indirizzi di Safari.
--vh (swup.js) e 100dvh valgono il viewport "piccolo" quando la barra è visibile, quindi il
video si ferma sopra la barra lasciando la fascia scoperta. 100lvh è il viewport "grande"
(schermo intero, come se la barra non ci fosse) ed è costante: copre tutto in ogni stato.
Sui browser che non supportano lvh la riga è invalida e viene ignorata, restando valido il
calc(var(--vh)...) sopra. */
height: 100lvh;
/* --fixedbar-h (swup.js) = altezza di #menulandscape/.shape-wrapper, la barra fissa in cima
al viewport per il breakpoint corrente: con box-sizing:border-box il padding-top resta
dentro l'altezza già calcolata sopra, quindi spinge giù figure/video (height:100% del
content-box) senza sforare il fondo del viewport. */
/*padding-top: var(--fixedbar-h, 0px);*/
}
.video-block figure.video {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
.video-block video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.video-block_full-width {
max-width: calc(var(--vw) * 100);
margin-left: calc(50% - (var(--vw) * 50));
margin-right: calc(50% - (var(--vw) * 50));
width: auto;
overflow: hidden;
}
/* Da schermata intera .video-block__container diventa position:fixed (il pin di ScrollTrigger):
senza un z-index esplicito resta a "auto", che con un elemento fixed dello stesso stacking
context finisce SEMPRE sotto qualunque z-index positivo (qui #menulandscape a 1020), a
prescindere dall'ordine nel DOM — non è un problema di "quanto alto" il numero, ma del fatto
che non ce n'era affatto uno su questo elemento. Applicato solo mentre il pin è attivo
(classe aggiunta/rimossa da onEnter/onLeave in swup.js): fuori dal pin torna sotto al menu,
come un elemento qualunque nel flusso normale. */
.video-block__container.is-above-menu {
z-index: 1021;
}
.video__caption > .container {transform: translate(0px, 100%);opacity:0;}
/* ============================================================================
Sezione "image-grow" (include/functions.php: con ![]()
e ).
Stile ripreso da puppolegno.it/css/style.css: l'immagine .grow parte rimpicciolita
(scale .4) e la .tagline parte ingrandita e invisibile (scale 3, opacity 0); GSAP
(growTl in functions.php, pin di scroll) le anima fino alla dimensione naturale.
Nel tema queste regole erano presenti ma commentate/disabilitate (proprietà con
prefisso "d"), quindi la sezione restava senza stile.
============================================================================ */
.image-grow {height: 100vh;}
.bgimage {
line-height: 0;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.bgimage > div {
width: 100%;
}
.bgimage img {
width: 100%;
object-fit: contain;
max-height: 80vh;
}
/* stato iniziale della tagline della SOLA sezione "in evidenza" (functions.php: la è figlia DIRETTA di ). Va usato il
combinatore figlio ">": la classe .grow-tagline è riutilizzata anche da riganolink(), ma lì la
tagline è annidata dentro .grow-tagline-wrapper (non figlia diretta di .image-grow) e il suo
GSAP non anima l'opacity — un opacity:0 su .grow-tagline in generale lasciava invisibile quel
titolo. Qui la scala/opacity iniziali le anima imagegrow() in swup.js. */
.image-grow > .grow-tagline {
position: absolute;
transform: scale(3);
opacity: 0;
}
.grow {
transform: scale(.4);
}
/* ============================================================================
Countdown delle cover di home (include/functions.php: il
con quattro
, emesso solo per i contenuti con countdown = 1).
I numeri li scrive startCountdown() in js/swup/swup.js; qui c'e' solo la resa.
Selettori di classe e non di id perche' in pagina ce ne puo' essere piu' d'uno:
la cover singola (rigahomesingolo) ne ha uno, lo slider uno per slide, ognuno
con la data del proprio contenuto.
Le etichette sotto ai numeri arrivano da :nth-of-type: dipendono quindi dalla
POSIZIONE della span fra i fratelli, non da una classe. Per questo il JS, quando
mancano meno di 24 ore, nasconde la prima span con d-none invece di rimuoverla:
togliendola dal DOM le altre scalerebbero di uno e le ore finirebbero
etichettate "giorni".
============================================================================ */
.grow-countdown-wrapper span {
min-width: 70px;
color: #fff;
display: inline-block;
text-align: center;
font-family: fontdefaultbold;
}
.grow-countdown-wrapper span:after {
font-size: 10pt;
font-family: fontdefault;
display: block;
margin-top: -.5em;
}
.grow-countdown-wrapper span:nth-of-type(1):after {
content: "giorni";
}
.grow-countdown-wrapper span:nth-of-type(2):after {
content: "ore";
}
.grow-countdown-wrapper span:nth-of-type(3):after {
content: "minuti";
}
.grow-countdown-wrapper span:nth-of-type(4):after {
content: "secondi";
}