/* ========================================================================== GX FX — frontend styles Everything namespaced gxfx- / data-gxfx. No global resets, no font-family declarations (type inherits the theme). Border-radius 0 on all plugin elements. ========================================================================== */ /* -------------------------------------------------------------------------- Reduced motion / bail-out fallback: the "already drawn" final state. The engine adds [data-gxfx-drawn] + .gxfx-drawn to draw targets and .gxfx-rm to when it bails. The media query covers no-JS. -------------------------------------------------------------------------- */ [data-gxfx-drawn], .gxfx-drawn { border: 2px solid currentColor; } .gxfx-rm .gxfx-marquee-track { animation: none !important; } .gxfx-rm .gxfx-cursor { display: none !important; } @media (prefers-reduced-motion: reduce) { [data-gxfx="draw-frame"], [data-gxfx="draw-ticks"] { border: 2px solid currentColor; } .gxfx-marquee-track { animation: none !important; } .gxfx-cursor { display: none !important; } } /* -------------------------------------------------------------------------- Text reveal masks (words & chars) -------------------------------------------------------------------------- */ .gxfx-mask { display: inline-block; overflow: hidden; vertical-align: top; } .gxfx-w { display: inline-block; white-space: nowrap; /* words never break mid-word */ } .gxfx-ch { display: inline-block; white-space: pre; will-change: transform; } /* -------------------------------------------------------------------------- Drawn box overlays (full frame + corner ticks) -------------------------------------------------------------------------- */ .gxfx-frame-svg, .gxfx-ticks-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; display: block; border-radius: 0; } /* Inset the rect 1px so the 2px stroke sits inside the box (CSS geometry properties; unsupported engines fall back to the 0/0/100%/100% attributes and simply paint half the stroke outside — overflow is visible). */ .gxfx-frame-svg rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); } .gxfx-frame-svg rect, .gxfx-ticks-svg path { stroke-width: 2; } @media (max-width: 767px) { .gxfx-frame-svg rect, .gxfx-ticks-svg path { stroke-width: 1.5; } } /* Corner ticks: four 26px L-brackets pinned to the corners. */ .gxfx-ticks-svg .gxfx-tick { position: absolute; width: 26px; height: 26px; overflow: visible; } .gxfx-tick-tl { top: 0; left: 0; } .gxfx-tick-tr { top: 0; right: 0; } .gxfx-tick-br { bottom: 0; right: 0; } .gxfx-tick-bl { bottom: 0; left: 0; } /* The custom hero replaces the legacy offering banner. Plugin-owned scope keeps the replacement intact after GenerateBlocks editor saves. */ body.postid-10015 .headOfferingPage { display: none !important; } /* -------------------------------------------------------------------------- Interactive datapoint trend background -------------------------------------------------------------------------- */ .gxfx-growth-host { isolation: isolate; overflow: hidden; } .gxfx-growth-host > :not(.gxfx-growth-canvas) { position: relative; z-index: 1; } .gxfx-growth-canvas { display: block; height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; z-index: 0; } @media (max-width: 767px) { .gxfx-growth-canvas { height: 82%; inset: auto 0 0; } } /* -------------------------------------------------------------------------- Underline draw -------------------------------------------------------------------------- */ .gxfx-underline { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; display: block; pointer-events: none; border-radius: 0; } /* -------------------------------------------------------------------------- Count Up block -------------------------------------------------------------------------- */ .gxfx-count { line-height: 1.1; border-radius: 0; } .gxfx-count-num { display: block; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .gxfx-count-label { display: block; margin-top: 8px; font-size: 0.95em; opacity: 0.8; } /* -------------------------------------------------------------------------- Marquee band -------------------------------------------------------------------------- */ .gxfx-marquee { overflow: hidden; padding: 14px 0; border-radius: 0; } .gxfx-marquee-track { display: flex; align-items: center; width: max-content; animation: gxfx-marquee var(--gxfx-marquee-duration, 22s) linear infinite; will-change: transform; } .gxfx-marquee:hover .gxfx-marquee-track, .gxfx-marquee:focus-within .gxfx-marquee-track { animation-play-state: paused; } @keyframes gxfx-marquee { to { transform: translateX(-50%); } } .gxfx-marquee-chunk { display: flex; align-items: center; flex: none; } .gxfx-mi { white-space: nowrap; padding: 0 18px; } .gxfx-sep { display: inline-block; padding: 0 4px; line-height: 1; } .gxfx-sep-square { width: 8px; height: 8px; background: currentColor; padding: 0; margin: 0 4px; } .gxfx-upper { text-transform: uppercase; letter-spacing: 0.08em; } /* -------------------------------------------------------------------------- Charts (unified system, gx-fx 1.1.0) The shared renderer computes a real pixel viewBox at the container width — no preserveAspectRatio distortion. SVG scales 1:1 (width 100%, height auto). -------------------------------------------------------------------------- */ .gxfx-chart { width: 100%; border-radius: 0; } .gxfx-chart-svg { display: block; width: 100%; height: auto; border-radius: 0; overflow: visible; } .gxfx-chart-svg text { font-family: inherit; } /* Transform-box so the engine can scale bars / pop dots around their own geometry (GSAP sets the transform-origin per element). */ .gxfx-chart .gxfx-bar-rect, .gxfx-chart .gxfx-dot { transform-box: fill-box; } /* Visually-hidden data table the renderer adds for screen readers (the