.logo-header {
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.logo-header.show-logo {
opacity: 1 !important;
visibility: visible !important;
}
document.addEventListener("DOMContentLoaded", function () {
function isDesktop() {
return window.innerWidth >= 768;
}
function toggleLogoHeader() {
if (!isDesktop()) return;
const logos = document.querySelectorAll('.logo-header');
if (!logos.length) return;
logos.forEach(function(logo) {
if (window.scrollY > 500) {
logo.classList.add('show-logo');
} else {
logo.classList.remove('show-logo');
}
});
}
// Run on load
toggleLogoHeader();
// Run on scroll
window.addEventListener('scroll', toggleLogoHeader);
// Reset se cambio dimensione (es. resize)
window.addEventListener('resize', function() {
const logos = document.querySelectorAll('.logo-header');
if (!isDesktop()) {
logos.forEach(l => l.classList.remove('show-logo'));
} else {
toggleLogoHeader();
}
});
});
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');
body.vv-intro-running .logo-header,
body.vv-intro-running .elemento-header,
body.vv-intro-running .logo-header *,
body.vv-intro-running .elemento-header * {
transition: none !important;
}
.logo-header, .elemento-header {
will-change: transform, opacity;
}
body.elementor-editor-active .vv-logo-top,
body.elementor-editor-active .vv-logo-bottom,
body.elementor-editor-active .vv-side-left,
body.elementor-editor-active .vv-side-right,
body.elementor-editor-active .vv-loop-wrapper,
body.elementor-editor-active .vv-img-item {
opacity: 1 !important;
filter: none !important;
visibility: visible !important;
transform: scale(1) !important;
}
body.elementor-editor-active #rowTop {
transform: translateY(-180px) !important;
}
body.elementor-editor-active #rowBottom {
transform: translateY(180px) !important;
}
.vv-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F6F7F1;
overflow: hidden;
font-family: "Libre Bodoni", serif;
}
.vv-row {
width: 83.3333%;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 10;
position: relative;
}
.vv-side-left {
width: 8.3333%;
text-align: center;
opacity: 0;
margin-left: 16px;
}
.vv-side-right {
width: 8.3333%;
text-align: center;
opacity: 0;
margin-right: 16px;
}
.vv-center-wrap {
width: 25%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.vv-logo-top {
display: block;
height: 70px;
width: auto;
max-width: 100%;
object-fit: contain;
opacity: 0;
transform: scale(1.1);
filter: blur(4px);
}
.vv-logo-bottom {
display: block;
height: 70px;
width: auto;
max-width: 100%;
object-fit: contain;
opacity: 0;
transform: scale(1.1);
filter: blur(4px);
}
.vv-date {
font-family: open sans;
font-size: 16px;
color: #333;
display: inline-block;
}
.link-button {
font-family: open sans;
font-size: 16px;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 17.6%;
}
.vv-trigger {
cursor: pointer;
text-decoration: underline;
color: #333;
margin-bottom: 35%;
transition: all 0.3s;
display: inline-block;
}
.vv-trigger:hover {
color: #A75B5D;
}
.vv-loop-wrapper {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
height: 320px;
opacity: 0;
display: flex;
align-items: center;
z-index: 1;
}
.vv-marquee {
display: flex;
gap: 8px;
width: max-content;
will-change: transform;
animation: scrollLoop 60s linear infinite;
}
.vv-img-item {
height: 100%;
width: auto;
display: block;
object-fit: cover;
opacity: 0;
transform: scale(0.9);
filter: blur(2px) grayscale(100%);
flex-shrink: 0;
border-radius: 4px;
max-height: 320px;
transition: none;
}
@keyframes scrollLoop {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.vv-row-dates,
.vv-row-buttons {
display: none;
}
/* ================================
LAPTOP (≤1366px)
================================ */
@media (max-width: 1366px) {
.vv-logo-top { height: 56px; }
.vv-logo-bottom { height: 56px; }
.vv-loop-wrapper { height: 240px; }
.vv-img-item { max-height: 240px; }
}
/* ================================
TABLET (481px - 768px)
================================ */
@media (min-width: 481px) and (max-width: 768px) {
#rowTop .vv-side-left,
#rowTop .vv-side-right,
#rowBottom .vv-side-left,
#rowBottom .vv-side-right {
display: none;
}
.vv-row { width: 100%; justify-content: center; }
.vv-center-wrap { width: 50%; justify-content: center; text-align: center; }
.vv-logo-top { height: 44px; }
.vv-logo-bottom { height: 44px; }
.vv-loop-wrapper { height: 160px; }
.vv-img-item { max-height: 160px; }
.vv-row-dates,
.vv-row-buttons {
display: flex;
position: absolute;
left: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
z-index: 10;
opacity: 0;
}
.vv-trigger {
margin-top: 5%;
}
}
/* ================================
MOBILE (≤480px)
QUI NASCONDO DATE E BOTTONI
================================ */
@media (max-width: 480px) {
#rowTop .vv-side-left,
#rowTop .vv-side-right,
#rowBottom .vv-side-left,
#rowBottom .vv-side-right,
.vv-row-dates,
.vv-row-buttons {
display: none !important;
}
.vv-row {
width: 100%;
justify-content: center;
}
.vv-center-wrap {
width: 70%;
justify-content: center;
text-align: center;
}
.vv-logo-top { height: 34px; }
.vv-logo-bottom { height: 34px; }
.vv-loop-wrapper { height: 160px; }
.vv-img-item { max-height: 160px; }
.vv-date, .link-button { font-size: 13px; }
}
document.addEventListener("DOMContentLoaded", () => {
const isEditor = document.body.classList.contains('elementor-editor-active');
const animationPlayed = sessionStorage.getItem('vvHeroAnimationPlayed');
const imageLoop = document.getElementById('imageLoop');
const container = document.getElementById('vvContainer');
const rowDates = document.getElementById('rowDates');
const rowButtons = document.getElementById('rowButtons');
function getGap() {
if (window.matchMedia("(max-width: 767px)").matches) return 40;
if (window.matchMedia("(max-width: 1024px)").matches) return 20;
return 40;
}
function getMoveY() {
return (imageLoop.offsetHeight / 2) + getGap();
}
const isTabletLayout = () => window.matchMedia("(min-width: 481px) and (max-width: 768px)").matches;
function setDateButtonsPosition() {
if (!isTabletLayout()) return;
const containerRect = container.getBoundingClientRect();
const loopRect = imageLoop.getBoundingClientRect();
const loopTopRel = loopRect.top - containerRect.top;
const loopBottomRel = loopRect.bottom - containerRect.top;
const gap = getGap();
rowDates.style.top = (loopTopRel - rowDates.offsetHeight - gap) + 'px';
rowButtons.style.top = (loopBottomRel + gap) + 'px';
}
setDateButtonsPosition();
window.addEventListener('resize', () => {
if (animationPlayed || isEditor) {
gsap.set("#rowTop", { y: -getMoveY() });
gsap.set("#rowBottom", { y: getMoveY() });
}
setDateButtonsPosition();
});
if (!isEditor && !animationPlayed) {
document.body.style.overflow = 'hidden';
document.body.classList.add('vv-intro-running');
gsap.set(".logo-header, .elemento-header", { opacity: 0, y: -20 });
}
const imgsDefault = [
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-generali-verticale-1.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-generali-verticale-2.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-generali-orizzontali-1.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-generali-verticale-3.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-generali-orizzontali-2.webp"
];
const imgsAutentico = [
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-autenticita-verticale-3.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-autenticita-verticale-2.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-autenticita-orizzontale-2.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-autenticita-verticale-1.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-autenticita-orizzontale-1.webp"
];
const imgsModerno = [
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-modernita-verticale-3.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-modernita-verticale-2.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-modernita-orizzontale-2.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-modernita-verticale-1.webp",
"https://villavitalibellagio.com/wp-content/uploads/2026/02/villa-vitali-home-slider-modernita-orizzontale-1.webp"
];
const marqueeTrack = document.getElementById('marqueeTrack');
function initImages(imgArray) {
let baseHTML = '';
imgArray.forEach(url => { baseHTML += `
`; });
marqueeTrack.innerHTML = baseHTML.repeat(5) + baseHTML.repeat(5);
}
initImages(imgsDefault);
const desktopSideEls = ".vv-side-left, .vv-side-right";
const mobileExtraEls = "#rowDates, #rowButtons";
if (animationPlayed || isEditor) {
gsap.set(".vv-logo-top, .vv-logo-bottom", { opacity: 1, scale: 1, filter: "blur(0px)" });
gsap.set("#rowTop", { y: -getMoveY() });
gsap.set("#rowBottom", { y: getMoveY() });
gsap.set(".vv-loop-wrapper", { opacity: 1 });
gsap.set(".vv-img-item", { opacity: 1, scale: 1, filter: "blur(0px) grayscale(0%)" });
gsap.set(desktopSideEls, { marginLeft: 0, marginRight: 0, opacity: 1 });
gsap.set(mobileExtraEls, { opacity: 1 });
gsap.set(".logo-header, .elemento-header", { opacity: 1, y: 0 });
document.body.style.overflow = 'auto';
setTimeout(setDateButtonsPosition, 50);
} else {
const tl = gsap.timeline({
defaults: { ease: "power2.out" },
onComplete: () => {
document.body.style.overflow = 'auto';
sessionStorage.setItem('vvHeroAnimationPlayed', 'true');
document.body.classList.remove('vv-intro-running');
setDateButtonsPosition();
}
});
tl.to(".vv-logo-top, .vv-logo-bottom", { opacity: 1, scale: 1, filter: "blur(0px)", duration: 1.5, delay: 0.5 })
.to("#rowTop", { y: -getMoveY(), duration: 1.5 }, "+=0.2")
.to("#rowBottom", { y: getMoveY(), duration: 1.5 }, " {
const newUrl = targetArray[i % targetArray.length];
const delay = i * 0.05;
gsap.to(img, {
duration: 0.3,
scale: 0.8,
filter: "blur(5px) grayscale(100%)",
delay,
ease: "power2.in",
onComplete: () => {
img.src = newUrl;
gsap.fromTo(img,
{ scale: 0.8, filter: "blur(5px) grayscale(100%)" },
{ duration: 0.5, scale: 1, opacity: 1, filter: "blur(0px) grayscale(0%)", ease: "back.out(1.2)", overwrite: false }
);
}
});
});
}
document.querySelectorAll('.vv-trigger').forEach(trigger => {
trigger.addEventListener('mouseenter', () => {
const type = trigger.getAttribute('data-type');
if (type === 'moderno') transitionToGallery(imgsModerno);
if (type === 'autentico') transitionToGallery(imgsAutentico);
});
trigger.addEventListener('mouseleave', () => {
transitionToGallery(imgsDefault);
});
});
});
STAY
Authentic
STAY
Historic
VILLA
VILLA
IN
IN
Timeless
YOUR RESIDENCE IN THE HISTORIC VILLA: A STAY THAT TELLS OF A HUNDRED YEARS OF ELEGANCE
Each luxury apartment at Villa Vitali in Bellagio on Lake Como exudes the soul of an early 20th-century residence, enhanced by a meticulous restoration that blends original architectural details with contemporary comforts. Staying here means experiencing Bellagio’s history. Overlooking the waters of Lake Como, you’ll experience an atmosphere of tranquility and refined elegance.
SEVEN UNIQUE RESIDENCES, ONE SINGLE VILLA: PRIVACY AND LUXURY ON THE SHORES OF LAKE COMO
The twentieth-century villa houses seven independent apartments, each with its own character. Generous spaces, carefully selected furnishings, and a privileged location just minutes from the center of Bellagio make every stay an authentic and unique experience.
STAY
[Modernity]
STAY
[Privacy]
VILLA
OLIVE GROVE
IN
IN
[Comfort]
EXCLUSIVE RETREATS AMONG THE OLIVE TREES: MODERNITY, DESIGN, AND ABSOLUTE PRIVACY
Created for those who desire maximum privacy without sacrificing any convenience, the apartments in the olive grove are a newly conceived project immersed in greenery. Every detail — from the materials to the amenities
— has been chosen to ensure a contemporary experience of the highest level, within a natural context of extraordinary beauty.
THREE EXCLUSIVE RESIDENCES AMIDST NATURE: THE PERFECT RETREAT FOR AN INTIMATE STAY
Leonardo, Ludovica, and Gigi are three independent apartments born from a new vision of luxury hospitality: spacious, bright, with private gardens and high-quality finishes. Surrounded by the villa’s historic olive trees, they offer an authentic connection with the Lake Como landscape, while providing every comfort of contemporary life.
