.site-logo{ transition: all .2s ease; transform: translateY(0) translateX(-2px); @apply hidden md:block fixed bottom-10 left-10 z-20 mix-blend-difference; svg{ width: 40px; @apply block; } &.is-visible{ transform: translateY(0) translateX(-50%); @apply left-0; } @at-root body.footer-in-viewport .site-logo.is-visible{ transform: translateY(0) translateX(-2px); @apply left-10; } }