.cb-cursor { position: fixed; top: 0; left: 0; z-index: 1100; contain: layout style size; pointer-events: none; will-change: transform; -webkit-transition: opacity 3s, color 0.4s; -o-transition: opacity 3s, color 0.4s; -moz-transition: opacity 3s, color 0.4s; transition: opacity 3s, color 0.4s; /* mix-blend-mode: exclusion; */ } .cb-cursor:before { content: ""; position: absolute; top: -25px; left: -25px; width: 50px; height: 50px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); background: var(--tg-primary-color); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: opacity 1s, -webkit-transform 0.3s ease-in-out; transition: opacity 1s, -webkit-transform 0.3s ease-in-out; -o-transition: opacity 1s, -o-transform 0.3s ease-in-out; -moz-transition: transform 0.3s ease-in-out, opacity 1s, -moz-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 1s; transition: transform 0.3s ease-in-out, opacity 1s, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out, -o-transform 0.3s ease-in-out; opacity: 1 !important; } .cb-cursor-text { position: absolute; top: -50px; left: -50px; width: 100px; height: 100px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: scale(0) rotate(10deg); -moz-transform: scale(0) rotate(10deg); -ms-transform: scale(0) rotate(10deg); -o-transform: scale(0) rotate(10deg); transform: scale(0) rotate(10deg); opacity: 0; color: white; font-weight: 700; font-size: 14px; line-height: 18px; text-align: center; text-transform: uppercase; letter-spacing: 0; -webkit-transition: opacity 0.4s, -webkit-transform 0.3s; transition: opacity 0.4s, -webkit-transform 0.3s; -o-transition: opacity 0.4s, -o-transform 0.3s; -moz-transition: opacity 0.4s, transform 0.3s, -moz-transform 0.3s; transition: opacity 0.4s, transform 0.3s; transition: opacity 0.4s, transform 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s; } @supports (mix-blend-mode: exclusion) { .cb-cursor.-exclusion, .cb-cursor.-opaque { mix-blend-mode: exclusion; } } @supports (mix-blend-mode: exclusion) { .cb-cursor.-exclusion:before, .cb-cursor.-opaque:before { background: white; } } .cb-cursor.-normal, .cb-cursor.-text { mix-blend-mode: normal; } .cb-cursor.-black { color: #182029; } .cb-cursor.-black::before { background: currentColor; opacity: .95 !important; } .cb-cursor.-theme { color: var(--tg-theme-primary); } .cb-cursor.-theme .cb-cursor-text { font-weight: var(--tg-fw-extra-bold); color: var(--tg-common-color-black-2); } .cb-cursor.-theme::before { background: currentColor; opacity: .95 !important; } .cb-cursor.-inverse { color: white; } .cb-cursor.-visible:before { -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -ms-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); } .cb-cursor.-visible.-active:before { -webkit-transform: scale(0.23); -moz-transform: scale(0.23); -ms-transform: scale(0.23); -o-transform: scale(0.23); transform: scale(0.23); -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } .cb-cursor.-pointer:before { -webkit-transform: scale(0.15); -moz-transform: scale(0.15); -ms-transform: scale(0.15); -o-transform: scale(0.15); transform: scale(0.15); } .cb-cursor.-text:before { opacity: 0.85; -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -ms-transform: scale(1.7); -o-transform: scale(1.7); transform: scale(1.7); } .cb-cursor.-text .cb-cursor-text { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .cb-cursor.-text.-active:before { -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } .cb-cursor.-opaque:before { -webkit-transform: scale(1.32); -moz-transform: scale(1.32); -ms-transform: scale(1.32); -o-transform: scale(1.32); transform: scale(1.32); } .cb-cursor.-opaque.-active:before { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .cb-cursor.-lg:before { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } .cb-cursor.-hidden:before { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } @media (max-width: 767.98px) { .cb-cursor { display: none !important; } }