/* activity-map.css - v2.0 * Live activity map on the landing (web/index.php "Global Stats" section). * Base = Leaflet + OSM tiles (same setup as the partner client-analytics map, * so coordinate bindings are exact and the map is interactive). On top we emit * short-lived, colored pulse markers for recent leads and dialogues. * Driven by web/assets/js/activity-map.js. */ .activity-map-wrap { position: relative; } /* Smooth reveal when JS un-hides the map (instead of an instant pop that shoves the page down): unfold the height + fade in. JS adds .is-revealing (collapsed), then .is-revealing.is-revealed with an inline target max-height, then clears it. */ .activity-map-wrap.is-revealing { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.6s ease, opacity 0.6s ease; } .activity-map-wrap.is-revealing.is-revealed { opacity: 1; } .activity-map { height: 480px; overflow: hidden; background: transparent; /* ocean = the section showing through */ /* No mask: the map is a full-section backdrop (.activity-map-wrap--bg) spanning hero + stats + testimonials. It is never clipped mid-page — its top reaches the page top (behind the navbar) and its land tapers into its own ocean (the shared .hero-stats-canvas glow) before the tabs section. No fade, no cut — the continuous map reads as open space. */ } /* Full-section background variant: the map fills the whole stats section and the cards + CTA float on top of it (instead of the map being a confined band). It is absolutely positioned, so it reveals by opacity alone (no height unfold). */ .activity-map-wrap--bg { position: absolute; inset: 0; z-index: 0; margin: 0; opacity: 0; transition: opacity 0.9s ease; } .activity-map-wrap--bg.is-shown { opacity: 1; } /* JS adds this once activity appears -> smooth bloom in */ .activity-map-wrap--bg .activity-map { height: 100%; } .activity-map-wrap--bg.is-revealing { max-height: none; overflow: visible; } @media (prefers-reduced-motion: reduce) { .activity-map-wrap--bg { transition: none; } } /* Open map zone (the gap that frames the live pulses). Collapsed by default so when the map is hidden (no activity / just arrived) there is NO empty reserved space. JS adds .map-live to once the map reveals on activity, expanding the zone smoothly so the pulses get their open band; it stays expanded after that (no flicker). */ .map-open-gap { margin-top: 2.5rem; transition: margin-top 0.8s ease; } .map-live .map-open-gap { margin-top: 340px; } @media (min-width: 1024px) { .map-live .map-open-gap { margin-top: 440px; } } @media (prefers-reduced-motion: reduce) { .map-open-gap { transition: none; } } /* The map is a full-section backdrop behind the content (z-0). The live pulses sit in the live-stats section, which paints ON TOP of the map and would otherwise eat the pulse hover. Make that section transparent to the mouse so hover reaches the map's hit-targets through its empty areas, while keeping every real control clickable. */ #live-stats-section { pointer-events: none; } #live-stats-section a, #live-stats-section button, #live-stats-section input, #live-stats-section label, #live-stats-section select, #live-stats-section textarea, #live-stats-section [role="button"] { pointer-events: auto; } /* Pulse marker root (Leaflet divIcon). Leaflet positions it at the lat/lng; children are centered on that point. */ .activity-ping { background: transparent; border: none; pointer-events: none; --c: #a855f7; /* dialogue (default) - violet */ } .activity-ping.is-lead { --c: #ec4899; /* lead = goal reached - red-violet */ } .activity-ping.is-message { --c: #e6e8f2; /* message = chat just started (lowest tier) - soft white */ } /* Visitor "presence" tiers: small dots, blue (site) / dark-blue (portal), and NO sonar rings - visually distinct from the lead/dialogue/message activity pulses. */ .activity-ping.is-visit-site { --c: #3b82f6; } /* site visitor - blue */ .activity-ping.is-visit-partner { --c: #6366f1; } /* partner LK visitor - indigo */ .activity-ping.is-visit-client { --c: #1e3a8a; } /* client LK visitor - dark blue */ .activity-ping.is-visit-site .activity-ping__ring, .activity-ping.is-visit-partner .activity-ping__ring, .activity-ping.is-visit-client .activity-ping__ring { display: none; } /* no sonar rings */ .activity-ping.is-visit-site .activity-ping__core, .activity-ping.is-visit-partner .activity-ping__core, .activity-ping.is-visit-client .activity-ping__core { width: 5px; height: 5px; /* smaller than the 8px activity cores */ box-shadow: 0 0 6px 0 var(--c); animation: activity-in 0.4s ease-out; /* gentle fade-in, no shimmer loop */ } .activity-ping__core, .activity-ping__ring { position: absolute; top: 0; left: 0; border-radius: 50%; transform: translate(-50%, -50%); } /* A pulse lives for an adaptive duration (set by JS from event density). While alive it gently shimmers and keeps emitting concentric rings; JS adds .is-out to fade it. So a sparse map holds pulses up to a minute (softly mercающие), a busy map retires them fast. */ .activity-ping__core { width: 8px; height: 8px; background: var(--c); box-shadow: 0 0 12px 1px var(--c); animation: activity-in 0.4s ease-out, activity-shimmer 2.2s ease-in-out 0.4s infinite; } .activity-ping__ring { /* Full size + animate transform:scale (compositor-only) instead of width/height (which forces a layout + paint every frame for every ring). Resting scale ~0.16 ≈ the 8px core, so it starts at the dot and expands out. */ width: 52px; height: 52px; border: 2px solid var(--c); transform: translate(-50%, -50%) scale(0.16); animation: activity-ring 2.4s ease-out infinite; } .activity-ping__ring--2 { animation-delay: 1.2s; /* offset -> continuous gentle sonar */ opacity: 0.6; } /* Lead pulses are a bit bolder than dialogue pulses. */ .activity-ping.is-lead .activity-ping__core { width: 10px; height: 10px; } /* Retire (fade out) when JS removes the pulse at the end of its lifetime. */ .activity-ping.is-out .activity-ping__core, .activity-ping.is-out .activity-ping__ring { animation: activity-out 0.55s ease-in forwards; } @keyframes activity-ring { 0% { transform: translate(-50%, -50%) scale(0.16); opacity: 0.85; } 70% { opacity: 0.25; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } @keyframes activity-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes activity-shimmer { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.82); } } @keyframes activity-out { to { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } } /* Scrolled out of view (set by JS via IntersectionObserver): pause every looping animation so we don't spend CPU/GPU on what's off-screen. Resumes on return. */ .activity-map-wrap.is-paused .activity-ping__core, .activity-map-wrap.is-paused .activity-ping__ring, .activity-map-wrap.is-paused .activity-ping__count, .activity-map-wrap.is-paused .activity-map-counter__dot { animation-play-state: paused; } /* One-shot sonar ring: a burst when a NEW event lands in an existing cluster (added/removed by JS). Single run, unlike the looping base rings. */ .activity-ping__ring--once { animation: activity-ring 2.4s ease-out 1 forwards; opacity: 0.7; } /* Cluster count bubble, centered on the pulse (standard map-cluster idiom): how many events are active here, shown only when >= 2. Color = stream (green lead / blue dialogue); a lone event shows just the dot, no number. */ .activity-ping__count { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9999px; background: var(--c); color: #fff; font: 800 11px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; box-shadow: 0 0 8px 1px var(--c), 0 1px 5px rgba(0, 0, 0, 0.4); opacity: 0; /* fade/scale in, then keep gently pulsing (same feel as the lone-dot shimmer) */ animation: activity-count-in 0.3s ease-out forwards, activity-count-pulse 2.4s ease-in-out 0.4s infinite; pointer-events: none; z-index: 2; } /* Message tier (.is-message) is soft-white, so the count bubble is soft-white too -> a #fff number on it is invisible. Use a dark number on the message count so it always reads. */ .activity-ping.is-message .activity-ping__count { color: #0b0b16; } .activity-ping.is-out .activity-ping__count { animation: none; opacity: 0; transition: opacity 0.4s ease; } @keyframes activity-count-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes activity-count-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(0.88); } } /* Floating chip naming the tier above a pulse ("Lead · Berlin"): the inline label (no static legend). Pops on new activity (JS auto-hides it after a beat) and also on hover/tap of the pulse. The colored dot (::before = var(--c)) doubles as the type key. Driven by the .is-on class from JS. */ .activity-ping__label { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 6px)); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 9999px; background: rgba(17, 19, 28, 0.85); color: #fff; font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; z-index: 3; } .activity-ping__label.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 12px)); } .activity-ping__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex-shrink: 0; } /* Invisible hit target so hover (desktop) / tap (mobile) re-shows the chip. The pulse itself is pointer-events:none; only this transparent disc is. */ .activity-ping__hit { position: absolute; top: 0; left: 0; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: transparent; pointer-events: auto; cursor: pointer; z-index: 4; } /* Live counter pill (over the map). */ /* Live counters row: sits IN FLOW directly above the sub-CTA heading (desktop + mobile), not absolutely over the map. Hidden counters take no space (display:none), so when the map is hidden there is no empty hole above the heading; they fade in once live. */ .activity-counters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .activity-map-counter { display: none; /* .is-visible (added by JS once the feed is live) shows it */ align-items: baseline; /* labels, numbers and the suffix share ONE text baseline (center made the standalone suffix float mid-height against the taller bold numbers) */ gap: 10px; padding: 9px 15px; border-radius: 9999px; background: rgba(17, 19, 28, 0.55); /* translucent: the map shows through; blur keeps the numbers readable */ border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; line-height: 1.1; pointer-events: none; } .activity-map-counter.is-visible { display: inline-flex; animation: activity-counter-in 0.6s ease; } @keyframes activity-counter-in { from { opacity: 0; } to { opacity: 1; } } /* Single combined pill: "Messages: N, Leads: M in 24 hours". Each segment is one flex item (the pill's gap separates them); the messages segment is optional (config-gated server-side): hidden, the pill reads "Leads: M in 24 hours". */ .activity-map-counter__part { white-space: nowrap; } .activity-map-counter__part--msgs { display: none; } .activity-map-counter__part--msgs.is-visible { display: inline; } .activity-map-counter__dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; /* the dot has no baseline — keep it vertically centered */ background: #a855f7; box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7); animation: activity-live 2s ease-out infinite; flex-shrink: 0; } @keyframes activity-live { 0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(168, 85, 247, 0); } 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); } } .activity-map-counter__num { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; } .activity-map-counter__label { font-size: 12px; opacity: 0.8; } /* Mobile */ @media (max-width: 640px) { .activity-map { height: 340px; } .activity-ping__ring { width: 38px; height: 38px; } /* smaller sonar; scale keyframe is shared */ /* Mobile diet: no infinite core shimmer — the compositor is the phone's bottleneck (measured 35fps @ 134 markers; main thread idle). One ring stays (JS skips the second), the core just fades in and sits lit. */ .activity-ping__core { animation: activity-in 0.4s ease-out; } .activity-ping__count { min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; } .activity-map-counter { gap: 8px; padding: 7px 12px; } .activity-map-counter__num { font-size: 13px; } .activity-map-counter__label { font-size: 11px; } .activity-ping__label { font-size: 10px; padding: 2px 7px; } .activity-ping__hit { width: 46px; height: 46px; } } /* Reduced motion: static dot, no shimmer/sonar; still fades out on retire. */ @media (prefers-reduced-motion: reduce) { .activity-ping__core { animation: activity-in 0.4s ease-out forwards; } .activity-ping__count { animation: activity-count-in 0.3s ease-out forwards; } .activity-ping__ring, .activity-ping__ring--2, .activity-ping__ring--once { display: none; } .activity-ping.is-out .activity-ping__core { animation: activity-out 0.55s ease-in forwards; } .activity-map-counter__dot { animation: none; } }