/* ============================================================ Custom cursor — glowing ring that trails the pointer. Motion is driven entirely by GSAP (assets/js/anim.js); this file only describes the resting appearance. The ring is centred with negative margins rather than a translate(-50%,-50%) so that GSAP owns `transform` outright and never has to compose with a CSS-authored value. ============================================================ */ .nx-cursor { --nx-cursor-size: 17px; --nx-cursor-rgb: 41, 71, 163; /* --accent #2947a3 */ position: fixed; top: 0; left: 0; width: var(--nx-cursor-size); height: var(--nx-cursor-size); margin: calc(var(--nx-cursor-size) / -2) 0 0 calc(var(--nx-cursor-size) / -2); border-radius: 50%; border: 1.25px solid rgba(var(--nx-cursor-rgb), .68); background: rgba(var(--nx-cursor-rgb), 0); /* Glow scaled with the ring — a 14px blur around a 17px circle reads as a blob rather than a ring. */ box-shadow: 0 0 8px rgba(var(--nx-cursor-rgb), .38), inset 0 0 5px rgba(var(--nx-cursor-rgb), .18); /* Never eat a click, a hover, or a text selection. */ pointer-events: none; /* Above the chat widget (90) and the mega flyout (60). */ z-index: 2147483000; opacity: 0; /* revealed on first pointer move */ will-change: transform; backface-visibility: hidden; contain: layout style paint; /* Colour is CSS-driven so the hover and dark-section states compose; transform is deliberately excluded — GSAP owns it. */ transition: border-color .3s ease, background-color .3s ease, border-width .3s ease, box-shadow .3s ease; } /* Over an interactive element. */ .nx-cursor.is-hover { border-width: 1px; border-color: rgba(var(--nx-cursor-rgb), .9); background: rgba(var(--nx-cursor-rgb), .10); box-shadow: 0 0 11px rgba(var(--nx-cursor-rgb), .45), inset 0 0 7px rgba(var(--nx-cursor-rgb), .20); } /* Over a dark section the blue ring loses contrast, so sections can opt into a light ring with data-cursor="light". */ .nx-cursor.is-light { --nx-cursor-rgb: 255, 255, 255; border-color: rgba(255, 255, 255, .65); } /* Touch and pen: no hover state exists, so a trailing ring is noise. */ @media (hover: none), (pointer: coarse) { .nx-cursor { display: none !important; } } @media (prefers-reduced-motion: reduce) { .nx-cursor { display: none !important; } } /* ============================================================ Drag-to-scroll affordance (see dragScroll() in anim.js) ============================================================ */ /* Only on devices with a real pointer — a grab cursor is meaningless on touch, where the track already drags natively. */ @media (hover: hover) and (pointer: fine) { .team-grid, [data-fh-team-track], .table-wrap, [data-hscroll] { cursor: grab; } .team-grid.is-dragging, [data-fh-team-track].is-dragging, .table-wrap.is-dragging, [data-hscroll].is-dragging { cursor: grabbing; /* Kill the snap-back animation while the pointer is driving. */ scroll-behavior: auto; } /* Mid-drag the children would otherwise show a link/text cursor and take hover states; ignoring them also stops the drag ending on a child. */ .team-grid.is-dragging *, [data-fh-team-track].is-dragging *, [data-hscroll].is-dragging * { cursor: grabbing; pointer-events: none; } /* Belt-and-braces against the browser's native link/image drag, which is what kills the gesture before Observer's threshold is reached. */ .team-grid a, .team-grid img, [data-fh-team-track] a, [data-fh-team-track] img, [data-hscroll] a, [data-hscroll] img { -webkit-user-drag: none; user-drag: none; } } /* ============================================================ Smooth scroll Everything here is gated behind .nx-smooth, which anim.js adds to only after ScrollSmoother.create() succeeds. If GSAP fails to load, the device is touch, or reduced motion is set, the class is never added and the page keeps its original sticky-header layout untouched. ============================================================ */ /* ScrollSmoother translates #smooth-content, which makes a sticky child lag behind the scroll. The header is moved out of the wrapper in header.php and pinned to the viewport instead; the padding replaces the height it no longer occupies in flow. */ .nx-smooth .fh-header { position: fixed; top: 0; left: 0; right: 0; } .nx-smooth #smooth-content { padding-top: var(--nx-header-h, 72px); } /* The "What's included" rail is sticky for the same reason and has the same problem, so anim.js pins it with ScrollTrigger instead. Scoped to the same >=1025px breakpoint as that pin — below it home.css already makes the rail static, and this rule would have no job. */ @media (min-width: 1025px) { .nx-smooth .fh-inc__rail { position: static; top: auto; } }