/* CartCraft FX — effect styles.
* Namespace: everything lives under .ccfx-. Nothing here targets theme or
* Elementor selectors, so the classes can be dropped on any element from the
* Advanced tab without side effects.
* Portions adapted from react-bits (MIT).
*
* Palette: accent #FF8E2B, light line #FFB765, page navy #0B1227.
*/
:root {
--ccfx-accent: #FF8E2B;
--ccfx-line: #FFB765;
--ccfx-navy: #0B1227;
}
/* ====================================================================
* SPECULAR — rim light that follows the pointer (canvas is injected by JS)
* Use: add class ccfx-specular to a button or link.
* ==================================================================== */
.ccfx-specular {
position: relative;
}
.ccfx-specular > .ccfx-specular__fx {
position: absolute;
inset: -20px;
pointer-events: none;
z-index: 0;
line-height: 0;
}
.ccfx-specular > .ccfx-specular__fx canvas {
display: block;
width: 100%;
height: 100%;
}
/* Fallback whenever the canvas is skipped (touch, reduced motion, context
* budget reached, no WebGL): a plain thin rim in the same colour family. */
.ccfx-specular--static {
box-shadow: inset 0 0 0 1px var(--ccfx-specular-rim, rgba(255, 183, 101, 0.22));
}
/* ====================================================================
* LOGO LOOP — endless marquee row
* Markup:
*
*
*
*
*