/* ══════════════════════════════════════════════════════════════════ Visitor Segmentation helpers The tag carries data-visitor="new|returning|member". Use these helpers on Elementor elements via Advanced → CSS Classes. ══════════════════════════════════════════════════════════════════ */ /* ── Explicit show/hide (for headline/CTA copy swaps, NOT content gating) */ html[data-visitor="new"] .visitor-only-returning, html[data-visitor="new"] .visitor-only-member, html[data-visitor="returning"] .visitor-only-new, html[data-visitor="returning"] .visitor-only-member, html[data-visitor="member"] .visitor-only-new, html[data-visitor="member"] .visitor-only-returning { display: none !important; } /* ── De-emphasize: dim + slightly shrink (layout preserved) */ html[data-visitor="new"] .visitor-dim-for-new, html[data-visitor="returning"] .visitor-dim-for-returning, html[data-visitor="member"] .visitor-dim-for-member { opacity: 0.55; transform: scale(0.97); transform-origin: top center; transition: opacity 0.3s ease, transform 0.3s ease; } /* ── Reorder helpers (use inside an Elementor Flexbox container). Lower = shown earlier. Default flex order is 0. */ html[data-visitor="new"] .visitor-first-for-new, html[data-visitor="returning"] .visitor-first-for-returning, html[data-visitor="member"] .visitor-first-for-member { order: -1; } html[data-visitor="new"] .visitor-last-for-new, html[data-visitor="returning"] .visitor-last-for-returning, html[data-visitor="member"] .visitor-last-for-member { order: 10; } /* ══════════════════════════════════════════════════════════════════ Elementor editor: visualize segmentation targeting Only active while editing — never shown to visitors. ══════════════════════════════════════════════════════════════════ */ body.elementor-editor-active [class*="visitor-"] { position: relative; } body.elementor-editor-active [class*="visitor-only-"], body.elementor-editor-active [class*="visitor-dim-for-"], body.elementor-editor-active [class*="visitor-first-for-"], body.elementor-editor-active [class*="visitor-last-for-"] { outline: 2px dashed #1A3373; outline-offset: 3px; } body.elementor-editor-active [class*="-new"] { outline-color: #2BA3BB; } body.elementor-editor-active [class*="-returning"] { outline-color: #F89939; } body.elementor-editor-active [class*="-member"] { outline-color: #A94382; } /* Always render hidden variants in the editor so authors can edit them */ body.elementor-editor-active .visitor-only-new, body.elementor-editor-active .visitor-only-returning, body.elementor-editor-active .visitor-only-member { display: revert !important; opacity: 1 !important; transform: none !important; }