/* ============================================================ RSZ TYPE — Logo div rsz-logo.css Sostituisce body::before con #rsz-logo Incolla nel tuo styleshop.css oppure carica come file separato e linkalo nel DOPO styleshop.css ============================================================ */ /* ── Rimuovi il vecchio pseudo-elemento ───────────────────── */ body::before { display: none !important; content: none !important; } /* ── Logo div — Desktop ───────────────────────────────────── * * L'elemento è ancorato a top:0 left:50% e non si muove mai. * * Tutta la posizione è gestita via transform → animazione * * fluida senza salti tra unità diverse (%, px, ecc). * * ─────────────────────────────────────────────────────────── */ #rsz-logo { position: fixed; top: -17px !important; left: 50%; width: 120px; height: 120px; background-image: url('https://www.resistenza.es/fontdue/includes/resistenza-logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 900; opacity: 1; cursor: pointer; filter: none !important; /* Stato base: centrato orizzontalmente, sceso di 32px */ transform: translateX(-50%) translateY(32px) scale(1); /* Solo transform e opacity animati — interpolazione GPU perfetta */ transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, filter 0.4s ease; /* ← aggiunto qui */ will-change: transform, opacity; backface-visibility: hidden; -webkit-font-smoothing: antialiased; pointer-events: auto; } #rsz-logo:hover{ filter: grayscale(1) contrast(2) brightness(0.8) !important; } /* ── Logo scrolled — Desktop ──────────────────────────────── * * translateX porta il centro del logo a ~75px dal bordo sx. * * calc(-50vw + 75px + 65px): * * -50vw = torna al bordo sx della viewport * * +75px = margine dal bordo * * +65px = metà larghezza logo (130px/2) per ancorare left * * ─────────────────────────────────────────────────────────── */ body.scrolled #rsz-logo { transform: translateX(calc(-56vw + 140px)) translateY(-22px) scale(0.5); top: 0px !important; } /* ── Mobile — Logo in alto a destra ──────────────────────── */ @media (max-width: 768px) { #rsz-logo { top:10px !important; left: auto; right: 15px; transform-origin: top right; /* Dimensione 70px = scale 0.538 sul div da 130px */ transform: translateX(3px) translateY(15px) scale(0.538); transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; } body.scrolled #rsz-logo { opacity: 0; transform: translateX(3px) translateY(8px) scale(0.538); } }