/*
Theme Name: Revinnit
Description: Tema del sito Revinnit: assistenza tecnica, ricambi e consumabili per macchine da stampa e taglio. Testi, immagini e prodotti si modificano dall'editor senza programmatore.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Author: LNW srls per Revinnit S.r.l.
Text Domain: revinnit
License: Proprietario
*/
/* La barra di registro: i quattro colori di quadricromia, come sul bordo di
un foglio di stampa. È il dettaglio che dice "stampa" prima di leggere. */
.revinnit-registro { display: flex; height: 5px; }
.revinnit-registro span { flex: 1; }
.revinnit-registro span:nth-child(1) { background: #00a0e3; }
.revinnit-registro span:nth-child(2) { background: #e6007e; }
.revinnit-registro span:nth-child(3) { background: #ffd500; }
.revinnit-registro span:nth-child(4) { background: #3fb34f; }
.revinnit-loghi img { max-width: 100%; height: auto; }
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid #f2c230;
outline-offset: 2px;
}
/* Dentro il riquadro bianco dei loghi i link tornano petrolio */
footer .revinnit-loghi a { color: #12556b; }
/* Il marchio in testata: il logo vero, non la scritta */
.revinnit-marchio { display: inline-flex; align-items: center; line-height: 0; perspective: 700px; }
.revinnit-marchio img { height: 56px; width: auto; }
@media (max-width: 600px) { .revinnit-marchio img { height: 42px; } }
/* Scheda macchina: le caratteristiche come tabella leggibile */
.revinnit-specifiche table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.revinnit-specifiche th, .revinnit-specifiche td { border-bottom: 1px solid #dcdad3; padding: .55rem .5rem; vertical-align: top; text-align: left; }
.revinnit-specifiche th { width: 34%; font-weight: 600; color: #4c5262; }
.rv-su-preventivo { font-weight: 700; color: #12556b; }
.rv-preventivo { margin-top: 1.5rem; }
/* «Richiedi un preventivo» nella griglia del negozio: un pulsante vero e
centrato, che sul telefono (colonne strette) va a capo DENTRO di sé. Era un
elemento in linea: andando a capo il riquadro si spezzava e il testo usciva */
.rv-bottone-preventivo { display: block; width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; line-height: 1.25; box-sizing: border-box; }
/* =========================================================================
L'ASPETTO 2026: GLI INCHIOSTRI DELLA STAMPA
Fondo notte, nuvole d'inchiostro ciano/magenta/giallo con il verde e il
blu del logo, polvere di colore, la R del logo che gira. Ispirato ai siti
che piacciono a Revinnit (fascia scura importante, punti di forza, schede
con icone) e alle foto di polvere colorata che ha mandato.
Tutte le animazioni si fermano per chi ha chiesto «riduci il movimento».
========================================================================= */
:root {
--rv-notte: #0a1f2e;
--rv-notte-2: #0e2d40;
--rv-ciano: #00a0e3;
--rv-magenta: #e6007e;
--rv-giallo: #ffd500;
--rv-verde: #3fb34f;
--rv-blu: #2f62c9;
--rv-petrolio: #12556b;
--rv-arcobaleno: linear-gradient(90deg, #ffd500, #ff9f1c 18%, #e6007e 42%, #00a0e3 70%, #3fb34f);
--rv-ombra: 0 24px 48px -24px rgba(10, 31, 46, .45);
--rv-bordo: #e2e7ec;
}
/* ---- testata: riga dei contatti, logo che gira, pulsante -------------- */
.rv-barra-info { background: var(--rv-notte); color: #c9dbe6; font-size: .82rem; height: 36px; overflow: hidden; }
.rv-barra-info__dentro { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 var(--wp--style--root--padding-right, 1.25rem) 0 var(--wp--style--root--padding-left, 1.25rem); display: flex; align-items: center; gap: 1.6rem; white-space: nowrap; }
.rv-barra-info a, .rv-barra-info span { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; }
.rv-barra-info a:hover { color: #fff; }
.rv-barra-info svg { width: 15px; height: 15px; fill: none; stroke: var(--rv-ciano); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rv-barra-info__destra { margin-left: auto; }
@media (max-width: 781px) { .rv-solo-largo { display: none !important; } .rv-barra-info__dentro { gap: 1.1rem; } }
/* La testata resta in alto mentre si scorre; la riga dei contatti scorre via */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) - 36px); z-index: 100; transition: box-shadow .3s; }
.rv-scorso .wp-site-blocks > header.wp-block-template-part { box-shadow: 0 10px 30px -18px rgba(10, 31, 46, .5); }
.rv-testata__riga { gap: 1rem; }
.rv-testata .wp-block-navigation-item__content { position: relative; color: var(--rv-notte); }
.rv-testata .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 2px; background: var(--rv-arcobaleno); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.rv-testata .wp-block-navigation-item__content:hover::after,
.rv-testata .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
/* Il logo fa un giro su sé stesso quando si apre la pagina, e uno ogni volta che ci si passa sopra */
.revinnit-marchio img { animation: rv-giro 1.6s cubic-bezier(.25, .8, .25, 1) .35s both; }
.revinnit-marchio:hover img, .revinnit-marchio:focus-visible img { animation: rv-giro-ancora 1.1s cubic-bezier(.25, .8, .25, 1) both; }
@keyframes rv-giro { from { transform: rotateY(-360deg); } to { transform: rotateY(0); } }
@keyframes rv-giro-ancora { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
/* ---- pulsanti --------------------------------------------------------- */
.rv-bottone, .rv-bottone-colore .wp-block-button__link, .rv-bottone-bianco .wp-block-button__link, .rv-bottone-vetro .wp-block-button__link {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .8rem 1.4rem; border-radius: 12px; font-weight: 700; text-decoration: none; line-height: 1.2;
transition: transform .25s ease, box-shadow .25s ease, background-position .6s ease, background-color .25s;
}
.rv-bottone--colore, .rv-bottone-colore .wp-block-button__link {
color: #fff; background: linear-gradient(120deg, #e6007e, #b5179e 45%, #2f62c9 100%); background-size: 180% 100%; background-position: 0 0;
box-shadow: 0 12px 24px -12px rgba(230, 0, 126, .7); border: 0;
}
.rv-bottone--colore:hover, .rv-bottone-colore .wp-block-button__link:hover { background-position: 100% 0; transform: translateY(-2px); color: #fff; box-shadow: 0 16px 30px -12px rgba(47, 98, 201, .7); }
.rv-bottone-bianco .wp-block-button__link { background: #fff; color: var(--rv-notte); border: 0; }
.rv-bottone-bianco .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5); }
.rv-bottone-vetro .wp-block-button__link { background: rgba(255, 255, 255, .08); color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); backdrop-filter: blur(6px); }
.rv-bottone-vetro .wp-block-button__link:hover { background: rgba(255, 255, 255, .18); border-color: #fff; transform: translateY(-2px); }
/* ---- la fascia d'apertura: notte, inchiostri, polvere di colore ------- */
body.home .wp-site-blocks > main { margin-block-start: 0; }
.rv-eroe {
position: relative; overflow: hidden; isolation: isolate; color: #fff;
background: radial-gradient(1100px 600px at 85% -10%, #15506a 0%, transparent 60%), linear-gradient(180deg, var(--rv-notte) 0%, var(--rv-notte-2) 100%);
padding-top: clamp(3rem, 7vw, 6rem) !important; padding-bottom: clamp(10rem, 18vw, 15rem) !important;
}
.rv-eroe::before { /* la griglia, come la carta millimetrata di un tavolo da taglio */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(ellipse at 55% 35%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse at 55% 35%, #000 25%, transparent 75%);
}
.rv-eroe::after { /* la polvere di colore che sale dal bordo */
content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: clamp(150px, 22vw, 300px); z-index: -1; pointer-events: none;
background: url(assets/polvere-di-colore.svg) center bottom / max(1600px, 100%) 100% no-repeat;
transform-origin: center bottom; animation: rv-respiro 7s ease-in-out infinite alternate;
}
@keyframes rv-respiro { from { transform: scaleY(1); } to { transform: scaleY(1.08); } }
.rv-inchiostri { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.rv-nube { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; mix-blend-mode: screen; opacity: .9; will-change: transform; animation: rv-deriva 20s ease-in-out infinite alternate; }
.rv-nube--ciano { top: -20vmax; right: -14vmax; background: radial-gradient(circle, rgba(0, 160, 227, .7), transparent 62%); }
.rv-nube--magenta { top: 4%; right: 16%; width: 32vmax; height: 32vmax; background: radial-gradient(circle, rgba(230, 0, 126, .55), transparent 62%); animation-duration: 24s; animation-delay: -7s; }
.rv-nube--giallo { bottom: -16vmax; left: -12vmax; background: radial-gradient(circle, rgba(255, 213, 0, .42), transparent 62%); animation-duration: 22s; animation-delay: -3s; }
.rv-nube--verde { bottom: -14vmax; left: 34%; width: 36vmax; height: 36vmax; background: radial-gradient(circle, rgba(63, 179, 79, .4), transparent 62%); animation-duration: 26s; animation-delay: -12s; }
.rv-nube--blu { top: -14vmax; left: 12%; width: 38vmax; height: 38vmax; background: radial-gradient(circle, rgba(47, 98, 201, .5), transparent 62%); animation-duration: 28s; animation-delay: -5s; }
@keyframes rv-deriva {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(4vmax, -3vmax, 0) scale(1.14); }
100% { transform: translate3d(-3vmax, 2.5vmax, 0) scale(.94); }
}
/* La R del logo, grande, che ruota piano dietro la scheda */
.rv-r-grande { position: absolute; right: -4vw; top: 46%; width: min(44vw, 560px); height: auto; opacity: .3; animation: rv-ruota 48s linear infinite; filter: drop-shadow(0 0 40px rgba(230, 0, 126, .35)); }
@keyframes rv-ruota { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }
@media (max-width: 781px) { .rv-r-grande { width: 70vw; right: -26vw; top: 22%; opacity: .2; } }
.rv-pillola {
display: inline-flex; align-items: center; gap: .6rem; margin: 0; padding: .42rem .95rem; border-radius: 999px;
border: 1px solid rgba(0, 160, 227, .55); background: rgba(0, 160, 227, .12); color: #bfe9fb;
font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.rv-pillola::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(#ffd500, #e6007e, #00a0e3, #3fb34f, #ffd500); animation: rv-gira-punto 3s linear infinite; }
@keyframes rv-gira-punto { to { transform: rotate(360deg); } }
.rv-eroe__titolo { font-family: var(--wp--preset--font-family--titoli); font-weight: 700; font-size: clamp(2.5rem, 5.8vw, 4.8rem) !important; line-height: 1.02; letter-spacing: -.01em; color: #fff; margin-top: 1.25rem !important; text-wrap: balance; }
.rv-evidenzia { background: linear-gradient(90deg, #ffd500, #ff9f1c, #e6007e, #00a0e3, #3fb34f, #ffd500); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rv-scorri 10s linear infinite; }
@keyframes rv-scorri { to { background-position: 250% 0; } }
.rv-eroe__sottotitolo { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; color: #cfe0ea; max-width: 40rem; }
.rv-eroe__bottoni { margin-top: 2rem !important; gap: .8rem; }
.rv-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 1.6rem 0 0; }
.rv-chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #e3eef4; font-size: .85rem; }
.rv-chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rv-ciano); }
.rv-chips li:nth-child(2)::before { background: var(--rv-magenta); }
.rv-chips li:nth-child(3)::before { background: var(--rv-giallo); }
.rv-chips li:nth-child(4)::before { background: var(--rv-verde); }
/* La scheda di vetro con le macchine */
.rv-vetro { position: relative; padding: 1.3rem 1.2rem; border-radius: 22px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.rv-vetro__titolo { margin: 0 0 .4rem .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9fc3d6; }
.rv-vetro__riga { display: flex; align-items: center; gap: 1rem; padding: .85rem .5rem; border-radius: 14px; color: #fff; text-decoration: none; transition: background .25s, transform .25s; }
.rv-vetro__riga + .rv-vetro__riga { border-top: 1px solid rgba(255, 255, 255, .09); }
.rv-vetro__riga:hover { background: rgba(255, 255, 255, .07); transform: translateX(4px); color: #fff; }
.rv-vetro__riga strong { display: block; font-family: var(--wp--preset--font-family--titoli); font-size: 1.15rem; }
.rv-vetro__riga small { display: block; color: #a9c5d4; font-size: .85rem; }
/* Le icone colorate: una tinta d'inchiostro per ognuna */
.rv-icona { --c: var(--rv-ciano); flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.rv-icona svg { width: 23px; height: 23px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rv-icona--ciano { --c: var(--rv-ciano); }
.rv-icona--magenta { --c: var(--rv-magenta); }
.rv-icona--giallo { --c: #f5b800; }
.rv-icona--verde { --c: var(--rv-verde); }
/* ---- i punti di forza, a cavallo della polvere di colore -------------- */
.rv-fiducia {
position: relative; z-index: 2; max-width: 1240px !important; width: calc(100% - 2 * var(--wp--style--root--padding-left, 1.25rem));
margin-top: calc(-1 * clamp(5rem, 9vw, 7rem)) !important; padding: 1.2rem; border-radius: 22px; background: #fff; box-shadow: var(--rv-ombra);
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem;
}
.rv-fiducia__voce { display: flex; align-items: center; gap: .9rem; padding: .7rem .8rem; border-radius: 14px; transition: background .25s; }
.rv-fiducia__voce:hover { background: #f4f7fa; }
.rv-fiducia__voce strong { display: block; font-family: var(--wp--preset--font-family--titoli); font-size: 1.08rem; color: var(--rv-notte); }
.rv-fiducia__voce small { display: block; color: #5b6676; font-size: .85rem; line-height: 1.35; }
@media (max-width: 1000px) { .rv-fiducia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rv-fiducia { grid-template-columns: minmax(0, 1fr); } }
/* ---- sezioni, occhielli, titoli --------------------------------------- */
.rv-sezione { padding-top: clamp(4rem, 8vw, 6.5rem); }
.rv-occhiello { display: flex; align-items: center; gap: .7rem; margin: 0; color: var(--rv-magenta); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.rv-occhiello::before { content: ""; width: 34px; height: 4px; border-radius: 2px; background: var(--rv-arcobaleno); }
.rv-sezione__titolo { font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important; line-height: 1.08; max-width: 24ch; text-wrap: balance; margin-top: .6rem !important; color: var(--rv-notte); }
.rv-sezione__testo { max-width: 46rem; color: #4c5262; font-size: 1.08rem; }
.rv-freccia a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--rv-petrolio); text-decoration: none; }
.rv-freccia a::after { content: "→"; transition: transform .25s; }
.rv-freccia a:hover::after { transform: translateX(5px); }
.rv-freccia a:hover { color: var(--rv-magenta); }
/* ---- schede «cosa facciamo» con l'icona colorata ---------------------- */
.rv-schede { gap: 1.4rem !important; margin-top: 2.2rem !important; }
.rv-scheda {
--c: var(--rv-ciano); position: relative; overflow: hidden; background: #fff; border: 1px solid var(--rv-bordo); border-radius: 20px;
padding: 6.3rem 1.7rem 1.6rem !important; box-shadow: inset 0 4px 0 var(--c); transition: transform .35s ease, box-shadow .35s ease;
}
.rv-scheda::before { content: ""; position: absolute; top: 1.7rem; left: 1.7rem; width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--c) 16%, #fff); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.rv-scheda::after { content: ""; position: absolute; top: calc(1.7rem + 14px); left: calc(1.7rem + 14px); width: 28px; height: 28px; background: var(--c); -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.rv-scheda:hover { transform: translateY(-6px); box-shadow: inset 0 4px 0 var(--c), 0 28px 50px -28px color-mix(in srgb, var(--c) 70%, #0a1f2e); }
.rv-scheda:hover::before, .rv-scheda:hover::after { transform: rotate(-8deg) scale(1.08); }
.rv-scheda h3 { font-size: 1.45rem !important; margin-top: 0 !important; color: var(--rv-notte); }
.rv-scheda p { color: #4c5262; }
.rv-scheda--ciano { --c: var(--rv-ciano); }
.rv-scheda--magenta { --c: var(--rv-magenta); }
.rv-scheda--giallo { --c: #f5b800; }
.rv-scheda--sede { --icona: url("data:image/svg+xml;utf8,"); }
.rv-scheda--remoto { --icona: url("data:image/svg+xml;utf8,"); }
.rv-scheda--manutenzione { --icona: url("data:image/svg+xml;utf8,"); }
/* ---- come funziona: quattro passi numerati ---------------------------- */
.rv-fascia-chiara { margin-top: clamp(4rem, 8vw, 6.5rem) !important; padding-block: clamp(3.5rem, 7vw, 5.5rem) !important; background: linear-gradient(180deg, #f3f7fa, #eef3f7); position: relative; overflow: hidden; }
.rv-fascia-chiara::before { content: ""; position: absolute; width: 40vmax; height: 40vmax; right: -14vmax; top: -18vmax; border-radius: 50%; background: radial-gradient(circle, rgba(0, 160, 227, .14), transparent 65%); pointer-events: none; }
.rv-passi { counter-reset: passo; list-style: none; padding: 0 !important; margin-top: 2.2rem !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; max-width: 1240px !important; }
.rv-passi li { counter-increment: passo; position: relative; background: #fff; border: 1px solid var(--rv-bordo); border-radius: 20px; padding: 4.6rem 1.4rem 1.5rem; color: #4c5262; line-height: 1.55; transition: transform .35s ease, box-shadow .35s ease; }
.rv-passi li:hover { transform: translateY(-5px); box-shadow: var(--rv-ombra); }
.rv-passi li::before { content: counter(passo, decimal-leading-zero); position: absolute; top: 1.1rem; left: 1.4rem; font-family: var(--wp--preset--font-family--titoli); font-weight: 700; font-size: 2.9rem; line-height: 1; background: var(--rv-arcobaleno); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-passi li strong { display: block; color: var(--rv-notte); font-family: var(--wp--preset--font-family--titoli); font-size: 1.2rem; margin-bottom: .2rem; }
@media (max-width: 1000px) { .rv-passi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rv-passi { grid-template-columns: minmax(0, 1fr); } }
/* ---- le tessere delle macchine, ognuna sul suo colore ----------------- */
.rv-tessere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; max-width: 1240px !important; }
.rv-tessera { --c: var(--rv-ciano); display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--rv-bordo); text-decoration: none; color: var(--rv-notte); transition: transform .35s ease, box-shadow .35s ease; }
.rv-tessera__foto { display: block; aspect-ratio: 1; padding: 1.2rem; background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--c) 38%, #fff) 0%, color-mix(in srgb, var(--c) 10%, #fff) 45%, #fff 72%); }
.rv-tessera__foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.rv-tessera__nome { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.2rem; font-family: var(--wp--preset--font-family--titoli); font-weight: 700; font-size: 1.15rem; border-top: 3px solid var(--c); }
.rv-tessera__nome::after { content: "→"; color: var(--c); transition: transform .25s; }
.rv-tessera:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--c) 75%, #0a1f2e); color: var(--rv-notte); }
.rv-tessera:hover img { transform: scale(1.07) rotate(-1.5deg); }
.rv-tessera:hover .rv-tessera__nome::after { transform: translateX(5px); }
.rv-tessera--ciano { --c: var(--rv-ciano); }
.rv-tessera--magenta { --c: var(--rv-magenta); }
.rv-tessera--giallo { --c: #f5b800; }
.rv-tessera--verde { --c: var(--rv-verde); }
@media (max-width: 1000px) { .rv-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---- l'invito finale, sul gradiente degli inchiostri ------------------ */
.rv-invito { position: relative; overflow: hidden; isolation: isolate; margin-top: clamp(4rem, 8vw, 6.5rem) !important; padding-block: clamp(3.5rem, 7vw, 5rem) !important; color: #fff; background: linear-gradient(115deg, #e6007e 0%, #b5179e 30%, #2f62c9 65%, #00a0e3 100%); background-size: 160% 160%; animation: rv-onda 14s ease-in-out infinite alternate; }
@keyframes rv-onda { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.rv-invito::after { content: ""; position: absolute; right: -6vw; top: 50%; width: min(40vw, 420px); aspect-ratio: 1; transform: translateY(-50%); background: url(assets/marchio-r.svg) center / contain no-repeat; opacity: .22; z-index: -1; animation: rv-ruota 60s linear infinite; }
.rv-invito__titolo { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem) !important; margin: 0 !important; }
.rv-invito__testo { font-size: 1.15rem; max-width: 36rem; color: #fdf1f8; }
body.home .wp-site-blocks > footer { margin-block-start: 0; }
body.home .wp-site-blocks > footer > footer { margin-top: 0 !important; }
/* ---- piè di pagina: la notte con la riga degli inchiostri ------------- */
.wp-site-blocks > footer > footer { position: relative; background-image: linear-gradient(180deg, #0c2a3b, var(--rv-notte)); }
.wp-site-blocks > footer > footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rv-arcobaleno); }
/* ---- testata delle pagine interne ------------------------------------- */
.rv-testata-pagina { position: relative; overflow: hidden; isolation: isolate; margin-top: 0 !important; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4.5rem, 8vw, 6rem) !important; color: #fff; background: linear-gradient(180deg, var(--rv-notte), var(--rv-notte-2)); }
.rv-testata-pagina::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: clamp(60px, 9vw, 110px); z-index: -1; background: url(assets/polvere-di-colore.svg) center bottom / max(1600px, 100%) 100% no-repeat; opacity: .95; }
.rv-testata-pagina h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem) !important; margin: 0 !important; text-wrap: balance; }
.rv-inchiostri--piccoli .rv-nube { width: 30vmax; height: 30vmax; }
.wp-site-blocks > .rv-testata-pagina { margin-block-start: 0; }
/* ---- negozio: ogni prodotto sul suo colore ---------------------------- */
.wc-block-product { --c: var(--rv-ciano); background: #fff; border: 1px solid var(--rv-bordo); border-radius: 18px; padding: .8rem .8rem 1.1rem !important; transition: transform .35s ease, box-shadow .35s ease; }
.wc-block-product:nth-child(4n+2) { --c: var(--rv-magenta); }
.wc-block-product:nth-child(4n+3) { --c: #f5b800; }
.wc-block-product:nth-child(4n+4) { --c: var(--rv-verde); }
.wc-block-product .wc-block-components-product-image { border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--c) 32%, #fff) 0%, color-mix(in srgb, var(--c) 8%, #fff) 48%, #fff 75%); }
.wc-block-product .wc-block-components-product-image img { mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.wc-block-product:hover { transform: translateY(-5px); box-shadow: 0 28px 48px -30px color-mix(in srgb, var(--c) 75%, #0a1f2e); }
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.06); }
/* ---- compaiono mentre si scorre (solo con JavaScript e movimento) ----- */
.rv-js .rv-appare { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.rv-js .rv-appare.rv-visibile { opacity: 1; transform: none; }
.rv-js .rv-appare .rv-scheda, .rv-js .rv-appare .rv-tessera, .rv-js .rv-appare .rv-passi li, .rv-js .rv-appare .rv-fiducia__voce { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.rv-js .rv-appare.rv-visibile .rv-scheda, .rv-js .rv-appare.rv-visibile .rv-tessera, .rv-js .rv-appare.rv-visibile .rv-passi li, .rv-js .rv-appare.rv-visibile .rv-fiducia__voce { opacity: 1; transform: none; }
.rv-js .rv-visibile :is(.rv-scheda, .rv-tessera, .rv-passi li, .rv-fiducia__voce):nth-child(2) { transition-delay: .12s; }
.rv-js .rv-visibile :is(.rv-scheda, .rv-tessera, .rv-passi li, .rv-fiducia__voce):nth-child(3) { transition-delay: .24s; }
.rv-js .rv-visibile :is(.rv-scheda, .rv-tessera, .rv-passi li, .rv-fiducia__voce):nth-child(4) { transition-delay: .36s; }
.rv-js .rv-visibile :is(.rv-scheda, .rv-tessera, .rv-passi li):hover { transition-delay: 0s; }
.rv-js .rv-eroe__testo > *, .rv-js .rv-eroe__lato { animation: rv-entra .9s cubic-bezier(.2, .7, .2, 1) both; }
.rv-js .rv-eroe__testo > :nth-child(2) { animation-delay: .1s; }
.rv-js .rv-eroe__testo > :nth-child(3) { animation-delay: .2s; }
.rv-js .rv-eroe__testo > :nth-child(4) { animation-delay: .3s; }
.rv-js .rv-eroe__testo > :nth-child(5) { animation-delay: .4s; }
.rv-js .rv-eroe__lato { animation-delay: .35s; }
@keyframes rv-entra { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.rv-js .rv-appare, .rv-js .rv-appare * { opacity: 1 !important; transform: none !important; }
}
/* ---- le icone disegnate dallo stile (nel contenuto delle pagine WordPress
toglie i disegni SVG: così restano anche modificando la pagina) ------- */
.rv-icona::after { content: ""; width: 23px; height: 23px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.rv-ico-stampante { --ico: url("data:image/svg+xml;utf8,"); }
.rv-ico-sole { --ico: url("data:image/svg+xml;utf8,"); }
.rv-ico-forbici { --ico: url("data:image/svg+xml;utf8,"); }
.rv-ico-fulmine { --ico: url("data:image/svg+xml;utf8,"); }
.rv-ico-chiave { --ico: url("data:image/svg+xml;utf8,"); }
.rv-ico-schermo { --ico: url("data:image/svg+xml;utf8,"); }
.rv-ico-cancelletto { --ico: url("data:image/svg+xml;utf8,"); }
.rv-ico-pacco { --ico: url("data:image/svg+xml;utf8,"); }
/* ---- testata: il menu su una riga; tra telefono e computer, il menu a tendina */
.rv-testata__comandi { flex-wrap: nowrap !important; }
.rv-testata .wp-block-navigation__container { flex-wrap: nowrap; gap: 1.4rem; }
.rv-testata .wp-block-navigation { font-size: 1rem; }
.rv-bottone { white-space: nowrap; }
@media (max-width: 1180px) {
.rv-testata .rv-bottone { display: none; }
.rv-testata .wp-block-navigation__container { gap: 1.1rem; }
}
@media (min-width: 600px) and (max-width: 1080px) {
.rv-testata .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
.rv-testata .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
/* ---- titoli e testi delle sezioni allineati a sinistra sulla colonna ---- */
.wp-block-group > :is(.rv-sezione__titolo, .rv-sezione__testo, .rv-invito__titolo, .rv-invito__testo) { margin-left: max(0px, (100% - 1240px) / 2) !important; margin-right: auto !important; }
.rv-passi li strong { margin-bottom: .35rem; }
.rv-testata .wp-block-navigation-item__content { white-space: nowrap; }
/* La tendina di «Assistenza»: bianca, con le voci ben distanziate */
.rv-testata .wp-block-navigation__submenu-container { border: 1px solid var(--rv-bordo) !important; border-radius: 14px; padding: .4rem !important; box-shadow: 0 18px 36px -18px rgba(10, 31, 46, .45); background: #fff !important; min-width: 240px !important; }
.rv-testata .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .6rem .8rem !important; border-radius: 9px; }
.rv-testata .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: #f3f7fa; }
.rv-testata .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
/* ---- chi siamo: i settori ---------------------------------------------- */
.rv-ico-legno { --ico: url("data:image/svg+xml;utf8,"); }
.rv-settori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 2rem !important; }
.rv-settore { --c: var(--rv-ciano); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: 18px; background: #fff; border: 1px solid var(--rv-bordo); box-shadow: inset 4px 0 0 var(--c); transition: transform .3s ease, box-shadow .3s ease; }
.rv-settore .rv-icona { grid-row: span 2; }
.rv-settore strong { font-family: var(--wp--preset--font-family--titoli); font-size: 1.2rem; color: var(--rv-notte); line-height: 1.2; }
.rv-settore small { color: #5b6676; font-size: .9rem; line-height: 1.4; }
.rv-settore:hover { transform: translateY(-4px); box-shadow: inset 4px 0 0 var(--c), 0 22px 40px -26px color-mix(in srgb, var(--c) 70%, #0a1f2e); }
.rv-settore--magenta { --c: var(--rv-magenta); }
.rv-settore--giallo { --c: #f5b800; }
.rv-settore--verde { --c: var(--rv-verde); }
@media (max-width: 600px) { .rv-settori { grid-template-columns: minmax(0, 1fr); } }
/* Le nuvole occupano TUTTA la fascia: WordPress dà ai figli delle fasce una
larghezza massima e i margini automatici, che qui non servono */
.wp-block-group > .rv-inchiostri { max-width: none !important; margin: 0 !important; }
/* Il titolo delle pagine interne sulla colonna del testo, sopra la polvere */
.rv-testata-pagina { padding-bottom: clamp(5.5rem, 10vw, 7.5rem) !important; }
.rv-testata-pagina::after { height: clamp(55px, 7vw, 95px); }
.rv-testata-pagina h1 { margin-block: 0 !important; }
.rv-testata-pagina > h1 { margin-inline: auto !important; }
/* La dicitura obbligatoria sotto i loghi: presente e leggibile, ma piccola */
.revinnit-loghi .rv-dicitura { font-size: .78rem; line-height: 1.45; color: #4c5262; margin-top: .4rem; }
/* Il riquadro dei quattro loghi in fondo alle pagine: più piccolo e discreto
(richiesta di Giuseppe), ma con l'emblema UE ancora ben leggibile. Nella
pagina «Progetto finanziato» il blocco resta grande, a tutta larghezza. */
footer .revinnit-loghi.alignwide { max-width: 640px !important; margin-inline: auto !important; padding: .75rem 1.1rem !important; border-radius: 12px !important; }
footer .revinnit-loghi figure { margin: 0 !important; }
footer .revinnit-loghi img { max-height: 64px; width: auto; max-width: 100%; margin-inline: auto; display: block; }
footer .revinnit-loghi .rv-dicitura { font-size: .72rem; margin-top: .45rem; }
@media (max-width: 600px) { footer .revinnit-loghi img { max-height: none; } }
/* ---- Scrivici su WhatsApp: il verde di WhatsApp con testo scuro (il bianco
sul verde non si leggerebbe abbastanza) -------------------------------- */
.rv-whatsapp, .rv-bottone-whatsapp .wp-block-button__link { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.15rem; border-radius: 12px; background: #25d366; color: #052e1a !important; font-weight: 700; text-decoration: none !important; line-height: 1.2; border: 0; transition: transform .25s ease, box-shadow .25s ease, background-color .25s; }
.rv-whatsapp:hover, .rv-bottone-whatsapp .wp-block-button__link:hover { background: #1ebe5a; transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(37, 211, 102, .8); }
.rv-whatsapp__icona { width: 20px; height: 20px; flex: none; }
.rv-bottone-whatsapp .wp-block-button__link::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico-wa) center / contain no-repeat; mask: var(--ico-wa) center / contain no-repeat; }
.rv-bottone-whatsapp { --ico-wa: url("data:image/svg+xml;utf8,"); }
.rv-barra-info .rv-barra-info__wa svg { fill: #25d366; stroke: none; }
.rv-assistente-whatsapp { margin: .2rem 0 .6rem; font-size: .85rem; color: #4c5262; }
.rv-assistente-whatsapp .rv-whatsapp { margin-top: .4rem; padding: .5rem .85rem; font-size: .9rem; }
.rv-esito .rv-whatsapp { margin-top: .2rem; }
/* Il selettore della lingua nella riga in alto: IT · EN */
.rv-lingue { display: inline-flex; align-items: center; gap: .45rem; margin-left: 1.1rem; padding-left: 1.1rem; border-left: 1px solid rgba(255, 255, 255, .18); font-weight: 700; letter-spacing: .06em; }
.rv-barra-info__dentro > .rv-lingue:first-child, .rv-barra-info__dentro > .rv-solo-largo + .rv-lingue { margin-left: auto; }
.rv-lingue a { color: #9fc3d6; text-decoration: none; padding: .1rem .2rem; border-radius: 4px; }
.rv-lingue a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.rv-lingue__attiva { color: #fff; }
@media (max-width: 781px) { .rv-lingue { margin-left: auto; padding-left: .8rem; } }
/* Nel menu a schermo intero del telefono la tendina è una lista rientrata, senza riquadro */
.rv-testata .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none !important; padding: .2rem 0 .4rem 1rem !important; min-width: 0 !important; background: transparent !important; }
.rv-testata .is-menu-open .wp-block-navigation-item__content { font-size: 1.15rem; }
/* Versione 2 (8/10): il menu ha cinque voci più lunghe. Stesse posizioni,
distanze un po' più strette, così sul computer il pulsante «Prenota
assistenza» resta dentro lo schermo. Sotto i 1340 px il pulsante si
nasconde (è anche nella home). */
.rv-testata .wp-block-navigation__container { gap: clamp(1.2rem, 1.5vw, 2rem); }
.rv-testata .wp-block-navigation { font-size: clamp(.84rem, .5vw + .38rem, .93rem); }
/* La freccia della tendina sta attaccata alla sua voce, così la distanza fra
una voce e l'altra si legge (Giuseppe, 8/10: «sembrano tutte attaccate») */
.rv-testata .wp-block-navigation__submenu-icon { margin-left: .15rem; width: .55em; }
.rv-testata .wp-block-navigation__submenu-icon svg { width: .55em; height: .55em; }
.rv-testata__comandi { gap: clamp(.6rem, .7vw, .9rem) !important; }
.rv-testata .rv-bottone { padding: .72rem 1.05rem; font-size: .95rem; }
@media (max-width: 1300px) { .rv-testata .rv-bottone { display: none; } }
/* La vetrina dei ricambi in home (27/10/2026): le stesse tessere delle macchine, col prezzo */
.rv-tessere--prodotti .rv-tessera__foto img { object-fit: contain; background: #fff; }
.rv-tessera__prezzo { display: block; padding: 0 1rem 1rem; font-weight: 700; color: var(--rv-notte); font-size: .95rem; }
.rv-tessera__prezzo small, .rv-tessera__prezzo .woocommerce-price-suffix { display: block; font-weight: 500; color: #5b6472; font-size: .78rem; }
.rv-vetrina__tutti { margin-top: 1.6rem; }
.wp-block-group > .rv-vetrina__tutti { margin-left: max(0px, (100% - 1240px) / 2) !important; }
/* «Una soluzione per ogni esigenza, anche su progetto» (27/10/2026) */
.rv-misura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; max-width: 1240px !important; }
.rv-misura__voce { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; background: #fff; border-radius: 16px; border: 1px solid rgba(10, 31, 46, .08); border-top: 4px solid var(--c, var(--rv-ciano)); box-shadow: 0 10px 24px -18px rgba(10, 31, 46, .35); font-size: 1.02rem; }
.rv-misura__voce--ciano { --c: #00a0e3; } .rv-misura__voce--magenta { --c: #e6007e; } .rv-misura__voce--giallo { --c: #f5b800; }
@media (max-width: 800px) { .rv-misura { grid-template-columns: 1fr; } }