/*! * andri Smooth Scrolling for Elementor — Frontend CSS * v1.0.1 */ /* ================================================================== CUSTOM CURSOR Dual-Layer strategy: dark core + light contrast ring via box-shadow. This guarantees visibility on ALL backgrounds — no blend-mode tricks. IMPORTANT: Cursor elements must live OUTSIDE the Locomotive scroll container (we move them to via JS). The rules below enforce viewport-locked positioning so transforms on ancestors cannot affect the cursor position. ================================================================== */ .andri-cursor, .andri-cursor-follower { position: fixed !important; top: 0 !important; left: 0 !important; pointer-events: none !important; z-index: 2147483647; /* max int — above every UI chrome */ will-change: transform; opacity: 0; transition: opacity 0.25s; /* Contain layout so we never accidentally create a new containing block */ contain: layout style; } html.andri-ready .andri-cursor, html.andri-ready .andri-cursor-follower { opacity: 1; } /* --- DOT (the one that follows exactly) --- */ .andri-cursor { width: var(--andri-cursor-dot, 10px); height: var(--andri-cursor-dot, 10px); background: var(--andri-cursor-color, #0A0A0B); border-radius: 50%; margin: calc(var(--andri-cursor-dot, 10px) / -2) 0 0 calc(var(--andri-cursor-dot, 10px) / -2); } /* --- FOLLOWER (the trailing ring) --- */ .andri-cursor-follower { width: var(--andri-cursor-size, 44px); height: var(--andri-cursor-size, 44px); border-radius: 50%; border: 1.5px solid var(--andri-cursor-color, #0A0A0B); background: transparent; margin: calc(var(--andri-cursor-size, 44px) / -2) 0 0 calc(var(--andri-cursor-size, 44px) / -2); display: flex; align-items: center; justify-content: center; transition: width 0.35s cubic-bezier(0.65, 0, 0.35, 1), height 0.35s cubic-bezier(0.65, 0, 0.35, 1), margin 0.35s cubic-bezier(0.65, 0, 0.35, 1), background 0.35s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.35s cubic-bezier(0.65, 0, 0.35, 1), transform 0.08s linear, opacity 0.25s; } /* ================================================================== STYLE: DUAL-LAYER (default) — always visible Uses layered box-shadows to create a contrast ring around both the dot and the follower. Works on any background. ================================================================== */ html.andri-cursor-dual .andri-cursor { /* dark core + white contrast ring outside */ box-shadow: 0 0 0 1.5px var(--andri-cursor-ring, #FFFFFF), 0 2px 6px rgba(0, 0, 0, 0.25); } html.andri-cursor-dual .andri-cursor-follower { /* dark border + subtle white outer halo + inner light line */ border-color: var(--andri-cursor-color, #0A0A0B); box-shadow: 0 0 0 1.5px var(--andri-cursor-ring, #FFFFFF), inset 0 0 0 1.5px var(--andri-cursor-ring, #FFFFFF); } /* ================================================================== STYLE: BLEND-MODE — invertierend (opt-in) ================================================================== */ html.andri-cursor-blend .andri-cursor, html.andri-cursor-blend .andri-cursor-follower { mix-blend-mode: difference; background: #FFFFFF; border-color: #FFFFFF; } html.andri-cursor-blend .andri-cursor { background: #FFFFFF; } /* ================================================================== STYLE: SOLID — single color, no blend, no ring ================================================================== */ html.andri-cursor-solid .andri-cursor { background: var(--andri-cursor-color, #0A0A0B); } html.andri-cursor-solid .andri-cursor-follower { border-color: var(--andri-cursor-color, #0A0A0B); } /* ================================================================== LABEL STATE — when hovering data-cursor elements ================================================================== */ .andri-cursor-label { font-family: 'Syne', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 0; color: #0A0A0B; letter-spacing: 0.02em; text-transform: lowercase; opacity: 0; transition: opacity 0.25s 0.1s; white-space: nowrap; } .andri-cursor-follower.is-label { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--andri-cursor-label-bg, #6FB8DC); border-color: var(--andri-cursor-label-bg, #6FB8DC); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); mix-blend-mode: normal; } html.andri-cursor-dual .andri-cursor-follower.is-label, html.andri-cursor-blend .andri-cursor-follower.is-label, html.andri-cursor-solid .andri-cursor-follower.is-label { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .andri-cursor-follower.is-label .andri-cursor-label { font-size: 12px; opacity: 1; } /* Hide the dot when the follower is labeled (looks cleaner) */ .andri-cursor-follower.is-label ~ .andri-cursor, html.andri-cursor-labeled .andri-cursor { opacity: 0; } /* Link hover — grows slightly */ .andri-cursor-follower.is-link { width: calc(var(--andri-cursor-size, 44px) * 1.5); height: calc(var(--andri-cursor-size, 44px) * 1.5); margin: calc(var(--andri-cursor-size, 44px) * -0.75) 0 0 calc(var(--andri-cursor-size, 44px) * -0.75); } .andri-cursor-follower.is-click { transform-origin: center; transform: scale(0.85) translate3d(var(--cx, 0), var(--cy, 0), 0); } /* Hide native cursor on desktop when custom cursor is active */ @media (hover: hover) and (pointer: fine) { body.andri-cursor-active, body.andri-cursor-active *, body.andri-cursor-active *::before, body.andri-cursor-active *::after { cursor: none !important; } } /* Hide custom cursor on touch/mobile */ @media (hover: none), (pointer: coarse) { .andri-cursor, .andri-cursor-follower { display: none !important; } } /* ================================================================== LOCOMOTIVE — tweaks ================================================================== */ .has-andri-smooth [data-scroll-container] { min-height: 100vh; } /* Show native scrollbar in case locomotive fails */ html.andri-native-scroll { overflow-x: hidden; overflow-y: auto; } /* Elementor: override their CSS smooth scroll (known conflict) */ html.andri-smooth-on { scroll-behavior: auto !important; } /* ================================================================== ELEMENTOR COMPATIBILITY ================================================================== */ /* Sticky sections should remain sticky */ .has-andri-smooth .elementor-sticky, .has-andri-smooth [data-elementor-type="header"], .has-andri-smooth [data-scroll-sticky] { position: -webkit-sticky; position: sticky; top: 0; z-index: 99; } /* Fix: Elementor popups should live on top of Locomotive transforms */ .elementor-popup-modal { z-index: 100000 !important; position: fixed !important; } /* Fix: Elementor Menu Anchor — no visible jump on smooth scroll */ .has-andri-smooth .elementor-menu-anchor { position: relative; } /* Fix: WP Admin bar — keep on top while scrolling smooth */ .has-andri-smooth #wpadminbar { position: fixed !important; top: 0; z-index: 99999; } /* ================================================================== ACCESSIBILITY ================================================================== */ @media (prefers-reduced-motion: reduce) { .andri-cursor, .andri-cursor-follower { display: none !important; } } /* Focus states shouldn't be hidden by custom cursor */ body.andri-cursor-active a:focus-visible, body.andri-cursor-active button:focus-visible, body.andri-cursor-active input:focus-visible, body.andri-cursor-active textarea:focus-visible, body.andri-cursor-active select:focus-visible { outline: 2px solid var(--andri-cursor-label-bg, #6FB8DC); outline-offset: 3px; }