/** * R&H Interactive Map — FRONTEND styling. * * IMPORTANT: This file consumes ONLY `--rh-map-*` custom properties, which are * emitted per-instance from the user's Appearance settings (Elementor globals * or manual). It deliberately contains NO RAW&HUNGRY design tokens — the map's * look belongs to the host site, not the plugin's admin brand. * * Sensible fallbacks are baked into each var() so the map renders even if a * variable is missing. */ .rh-map { position: relative; width: 100%; max-width: 100%; margin: 0 auto; background: var(--rh-map-globe-space, #ffffff); } .rh-map__stage { position: relative; width: 100%; line-height: 0; padding: var(--rh-map-stage-pad-top, 7%) var(--rh-map-stage-pad-right, 7%) var(--rh-map-stage-pad-bottom, 7%) var(--rh-map-stage-pad-left, 7%); } /* Responsive reduction scales each configured side proportionally so the * admin's per-side padding is respected at every breakpoint (defaults * reproduce the original 7% / 5% / 3% steps). */ @media (max-width: 1024px) { .rh-map__stage { padding: calc(var(--rh-map-stage-pad-top, 7%) * 0.714) calc(var(--rh-map-stage-pad-right, 7%) * 0.714) calc(var(--rh-map-stage-pad-bottom, 7%) * 0.714) calc(var(--rh-map-stage-pad-left, 7%) * 0.714); } } @media (max-width: 767px) { .rh-map__stage { padding: calc(var(--rh-map-stage-pad-top, 7%) * 0.428) calc(var(--rh-map-stage-pad-right, 7%) * 0.428) calc(var(--rh-map-stage-pad-bottom, 7%) * 0.428) calc(var(--rh-map-stage-pad-left, 7%) * 0.428); } } /* Backdrop flows naturally so it always shows in full and defines the stage * height — no forced aspect, no cropping, no empty bands. */ .rh-map__backdrop { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; } /* Pins overlay the world map exactly (relative to the stage box). */ .rh-map__pins { position: absolute; inset: 0; pointer-events: none; } /* Branded decoration layer (circuit lines, corner grids, curves). Rendered * undistorted (SVG default xMidYMid meet). */ .rh-map__deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; } .rh-map__inner { position: relative; width: 100%; background: var(--rh-map-globe-space, #ffffff); } /* A configured canvas height changes the drawing area itself, so the flat * backdrop, pins, boundaries, and canvas all retain the same coordinate box. */ .rh-map--canvas-height-custom .rh-map__inner { height: var(--rh-map-canvas-height-desktop, auto); aspect-ratio: var(--rh-map-canvas-aspect-desktop, auto); } .rh-map--canvas-height-custom .rh-map__backdrop { height: 100%; object-fit: fill; } /* The framed wrapper normally owns its height through artwork padding. A * custom canvas height must instead let its live stage establish that height. */ .rh-map--framed.rh-map--canvas-height-custom { height: auto; padding-top: 0; } .rh-map--framed.rh-map--canvas-height-custom .rh-map__stage { position: relative; top: auto; transform: none; } @media (max-width: 1024px) { .rh-map--canvas-height-custom .rh-map__inner { height: var(--rh-map-canvas-height-tablet, var(--rh-map-canvas-height-desktop, auto)); aspect-ratio: var(--rh-map-canvas-aspect-tablet, var(--rh-map-canvas-aspect-desktop, auto)); } } @media (max-width: 767px) { .rh-map--canvas-height-custom .rh-map__inner { height: var(--rh-map-canvas-height-mobile, var(--rh-map-canvas-height-tablet, var(--rh-map-canvas-height-desktop, auto))); aspect-ratio: var(--rh-map-canvas-aspect-mobile, var(--rh-map-canvas-aspect-tablet, var(--rh-map-canvas-aspect-desktop, auto))); } } .rh-map:not(.rh-map--globe-capable) .rh-map__inner { background: var(--rh-map-mapbox-bg, #ffffff); box-shadow: 0 0 14px var(--rh-map-globe-atmosphere, #ffffff); } /* --------------------------------------------------------------------------- * Framed layout — decorations ON. * The container adopts the ORIGINAL artwork aspect (1597:857) so the branded * decorations render exactly as designed (undistorted). The accurate world * map is centred inside, filling the width; the natural top/bottom margin is * where the framing circuit lines sit — matching the source composition. * ------------------------------------------------------------------------- */ .rh-map--framed { position: relative; width: 100%; height: 0; padding-top: 53.6631%; /* 857 / 1597 */ } .rh-map--framed .rh-map__stage { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; } .rh-map__sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --------------------------------------------------------------------------- * Pinpoints — positioned absolutely via inline left/top percentages. * ------------------------------------------------------------------------- */ .rh-pinpoint { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .rh-pinpoint.is-selection-muted { opacity: 0.32; } .rh-pinpoint.is-selection-target { z-index: 30; } .rh-pinpoint--simple.is-selection-target { transform: translate(-50%, -50%) scale(1.45); } /* .rh-pinpoint--simple IS the dot (no separate .rh-pinpoint__dot child like HQ has below), so the enlarge-on-select scale above also scales its appended popup tip as an unwanted side effect, making a selected Simple pin's popup render ~45% larger than every other popup. Counter-scale the tip back to 1x so its size stays governed only by the popup's own padding/font-size settings, same as HQ's selected tooltip (which the rule below never touches, since it only scales the dot). */ .rh-pinpoint--simple.is-selection-target .rh-pinpoint__simple-tip--selected { transform: translateX(-50%) scale(calc(1 / 1.45)); } .rh-pinpoint--hq.is-selection-target .rh-pinpoint__dot { transform: translate(-50%, -50%) scale(1.2); } /* Simple pinpoint: a small dot, no interaction. */ .rh-pinpoint--simple { width: var(--rh-map-simple-size, 5px); height: var(--rh-map-simple-size, 5px); border-radius: 50%; background: var(--rh-map-simple-color, #8a837a); pointer-events: none; } /* When titles-on-hover is enabled, the dot must receive pointer events so its mouseenter/mouseleave listeners can fire. */ .rh-pinpoint--simple[data-show-title="1"] { pointer-events: auto; } .rh-map--boundary-hover .rh-pinpoint--simple[data-show-boundary="1"] { pointer-events: auto; } /* HQ pinpoint. */ .rh-pinpoint--hq { width: 0; height: 0; /* HQ pins (and their tooltips) always stack above simple pins and the rotation-showcase labels below. */ z-index: 20; } /* The simple pin currently showing a title tip sits above the rest of the map (dots, boundaries, other simple pins) but stays below HQ. */ .rh-pinpoint--simple.is-labeled { z-index: 15; } /* Whichever pin currently has a popup showing (hover tip or the full click-opened tooltip) always wins any overlap with a neighbouring pin's dot/glow — see frontend.js open()/close() and the hover handlers in _bindInteractions. */ .rh-pinpoint.is-front { z-index: 999; } /* A pin with its own highlighted-boundary polygon uses that shape (hit-tested on the canvas — see svg-globe.js _updateBoundaryHover/_onCanvasClick) as its real click/hover reaction area instead of this button's box. Clip the button's own hit-testable region back down to just the dot (leaving its width/height alone — some host themes' button resets fight literal width/height overrides here in ways clip-path sidesteps entirely) so it can't overlap into a neighbouring pin's territory the way the full glow-sized box could. Note: the dot's own precise pixel is still reachable — clicks on `.rh-pinpoint__dot` (an unclipped child) bubble up to this button. */ .rh-pinpoint--hq[data-show-boundary="1"] .rh-pinpoint__hit { clip-path: circle(12px at center); } .rh-pinpoint__hit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--rh-map-hq-glow-size, 64px); height: var(--rh-map-hq-glow-size, 64px); min-width: 24px; min-height: 24px; padding: 0; margin: 0; border: none; background: none; cursor: pointer; display: grid; place-items: center; } /* HQ pins are a dot-and-tooltip interaction only. These resets also prevent theme button styles or cached legacy glow markup from reintroducing a hover halo around the pin. */ .rh-pinpoint__glow, .rh-pinpoint__hit::before, .rh-pinpoint__hit::after { display: none !important; } .rh-pinpoint--hq .rh-pinpoint__hit:hover, .rh-pinpoint--hq .rh-pinpoint__hit:active { transform: translate(-50%, -50%) !important; background: none !important; box-shadow: none !important; filter: none !important; transition: none !important; } .rh-pinpoint--hq .rh-pinpoint__hit:hover .rh-pinpoint__dot, .rh-pinpoint--hq .rh-pinpoint__hit:active .rh-pinpoint__dot { transform: translate(-50%, -50%) !important; box-shadow: none !important; filter: none !important; transition: none !important; } /* Some host themes style every button hover with their brand colour (often #c36). The HQ hit target is only an invisible interaction area, so harden its reset against late-loading theme styles without touching its tooltip. */ .rh-map .rh-pinpoint--hq > button.rh-pinpoint__hit, .rh-map .rh-pinpoint--hq > button.rh-pinpoint__hit:hover, .rh-map .rh-pinpoint--hq > button.rh-pinpoint__hit:active, .rh-map .rh-pinpoint--hq > button.rh-pinpoint__hit:focus:not(:focus-visible) { appearance: none !important; -webkit-appearance: none !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; color: inherit !important; filter: none !important; text-decoration: none !important; } .rh-map .rh-pinpoint--hq > button.rh-pinpoint__hit::before, .rh-map .rh-pinpoint--hq > button.rh-pinpoint__hit::after { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; } .rh-pinpoint__hit:focus-visible { outline: 2px solid var(--rh-map-hq-color, #dc0312); outline-offset: 4px; border-radius: 50%; } .rh-pinpoint__dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--rh-map-hq-size, 10px); height: var(--rh-map-hq-size, 10px); border-radius: 50%; background: var(--rh-map-hq-color, #dc0312); } /* --------------------------------------------------------------------------- * Tooltip / badge. * ------------------------------------------------------------------------- */ .rh-pinpoint__tooltip { position: absolute; left: 50%; bottom: calc(50% + (var(--rh-map-hq-glow-size, 64px) / 2) + 6px); transform: translate(-50%, 8px); opacity: 0; visibility: hidden; z-index: 20; min-width: 120px; max-width: 280px; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s; pointer-events: none; } .rh-map__boundaries-container { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .rh-map__boundaries { width: 100%; height: 100%; display: block; } .rh-map__boundary-path { fill: var(--rh-map-boundary-fill); fill-opacity: var(--rh-map-boundary-opacity, 0.05); stroke: var(--rh-map-boundary-stroke, #ff3c00); stroke-width: var(--rh-map-boundary-width, 1.5); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } /* HQ and Simple boundary highlights each use their own independently configured border/fill (see boundary_color/boundary_fill and boundary_simple_color/boundary_simple_fill, Pin Settings → Country borders). HQ's fill/stroke come from the base rule above, unchanged here — this rule only adds the fill-opacity/transition behaviour specific to HQ. */ .rh-map__boundary-path.rh-map__boundary-path--hq { fill-opacity: var(--rh-map-boundary-opacity, 0.4); transition: fill-opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* On click (pin open) the country fill becomes less transparent — this is the highlight that replaces the glow halo when the glow is disabled. With the glow ON, --rh-map-hq-fill-opacity equals the base opacity, so clicking makes no visible change; with the glow OFF it is boosted, so the fill pops. */ .rh-map__boundary-path.rh-map__boundary-path--hq.is-active { fill-opacity: var(--rh-map-hq-fill-opacity, var(--rh-map-boundary-opacity, 0.4)); } .rh-map__boundary-path.rh-map__boundary-path--simple { fill: var(--rh-map-boundary-fill-simple, #8a837a); stroke: var(--rh-map-boundary-stroke-simple, #8a837a); } /* World country background layer — every country's outline, drawn first (see InteractiveMap._renderWorldCountries) so the per-pin highlight paths above it still read on top. */ .rh-map__boundary-path--world { fill: var(--rh-map-country-fill, #e8e8e8); fill-opacity: var(--rh-map-country-opacity, 0.4); stroke: var(--rh-map-country-stroke, #888888); stroke-width: var(--rh-map-country-width, 1); stroke-opacity: var(--rh-map-country-stroke-opacity, 0.7); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .rh-map--boundary-hover .rh-map__boundary-path { fill-opacity: 0; stroke-opacity: 0; transition: fill-opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), stroke-opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .rh-map--boundary-hover .rh-map__boundary-path.is-active { fill-opacity: var(--rh-map-boundary-hover-opacity, 0.7); stroke-opacity: 1; } /* The world background layer is a constant backdrop, not a per-pin interactive highlight — "boundary hover" mode (which dims all boundaries until hovered) must not hide it. */ .rh-map--boundary-hover .rh-map__boundary-path--world { fill-opacity: var(--rh-map-country-opacity, 0.4); stroke-opacity: var(--rh-map-country-stroke-opacity, 0.7); } .rh-pinpoint__simple-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; white-space: nowrap; pointer-events: none; z-index: 100; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } /* --------------------------------------------------------------------------- * Pin popups: Hover/Ambient state vs. Selected/Clicked state. * * Two admin-configurable states (Appearance tab) govern EVERY popup a pin can * show: hover tip + the ambient showcase share the "Hover/Ambient" style; * click-opened tooltip + dropdown-selected label + "show by default" share * the "Selected/Clicked" style. Each state has independent HQ and Simple * colors/radius/padding (a "use the same style for HQ and Simple pins" * toggle can mirror HQ's onto Simple instead) — that resolution happens in * PHP (RH_Style_Manager::generate_css_vars()), so the vars below are always * each pin type's real effective style; no scope/attribute gating needed. * ------------------------------------------------------------------------- */ /* HQ hover/ambient chip: also HQ's click-opened tooltip look (see .rh-pinpoint__tooltip-inner below) so an HQ's popup looks identical no matter what triggered it. */ .rh-pinpoint__simple-tip--hq { background: var(--rh-map-popup-hover-hq-bg, #dc0312); color: var(--rh-map-popup-hover-hq-text, #fff); border-radius: var(--rh-map-popup-hover-hq-radius, 23px); padding: var(--rh-map-popup-hover-hq-padding, 14px) calc(var(--rh-map-popup-hover-hq-padding, 14px) + 6px); font-family: var(--rh-map-tooltip-font, inherit); font-weight: var(--rh-map-tooltip-weight, 600); font-size: var(--rh-map-tooltip-font-size, 14px); text-transform: var(--rh-map-tooltip-transform, none); line-height: 1.2; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.4); } .rh-pinpoint__simple-tip--hq::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 12px solid var(--rh-map-popup-hover-hq-bg, #dc0312); } /* Simple pins' hover/ambient chip (base class, no --hq/--selected modifier). */ .rh-pinpoint__simple-tip:not(.rh-pinpoint__simple-tip--hq):not(.rh-pinpoint__simple-tip--selected) { background: var(--rh-map-popup-hover-simple-bg, #dc0312); color: var(--rh-map-popup-hover-simple-text, #fff); border-radius: var(--rh-map-popup-hover-simple-radius, 23px); padding: var(--rh-map-popup-hover-simple-padding, 14px) calc(var(--rh-map-popup-hover-simple-padding, 14px) + 6px); font-family: var(--rh-map-tooltip-font, inherit); font-weight: var(--rh-map-tooltip-weight, 600); font-size: var(--rh-map-tooltip-font-size, 14px); text-transform: var(--rh-map-tooltip-transform, none); line-height: 1.2; text-align: center; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.4); } .rh-pinpoint__simple-tip:not(.rh-pinpoint__simple-tip--hq):not(.rh-pinpoint__simple-tip--selected)::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 12px solid var(--rh-map-popup-hover-simple-bg, #dc0312); } /* Simple pins' dropdown-selected persistent label. */ .rh-pinpoint__simple-tip--selected { background: var(--rh-map-popup-selected-simple-bg, #dc0312); color: var(--rh-map-popup-selected-simple-text, #fff); border-radius: var(--rh-map-popup-selected-simple-radius, 23px); padding: var(--rh-map-popup-selected-simple-padding, 14px) calc(var(--rh-map-popup-selected-simple-padding, 14px) + 6px); font-family: var(--rh-map-tooltip-font, inherit); font-weight: var(--rh-map-tooltip-weight, 600); font-size: var(--rh-map-tooltip-font-size, 14px); text-transform: var(--rh-map-tooltip-transform, none); line-height: 1.2; text-align: center; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.4); } .rh-pinpoint__simple-tip--selected::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 12px solid var(--rh-map-popup-selected-simple-bg, #dc0312); } /* HQ's click-opened/dropdown-selected/"show by default" tooltip. */ .rh-pinpoint__tooltip-inner { background: var(--rh-map-popup-selected-hq-bg, #dc0312); color: var(--rh-map-popup-selected-hq-text, #fff); border-radius: var(--rh-map-popup-selected-hq-radius, 23px); padding: var(--rh-map-popup-selected-hq-padding, 14px) calc(var(--rh-map-popup-selected-hq-padding, 14px) + 6px); text-align: center; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.4); } .rh-pinpoint__tooltip-pointer { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 12px solid var(--rh-map-popup-selected-hq-bg, #dc0312); } .rh-pinpoint__title { display: block; font-family: var(--rh-map-tooltip-font, inherit); font-weight: var(--rh-map-tooltip-weight, 600); font-size: var(--rh-map-tooltip-font-size, 14px); text-transform: var(--rh-map-tooltip-transform, none); line-height: 1.2; color: inherit; text-decoration: none; white-space: nowrap; } .rh-pinpoint__title--link:hover { text-decoration: underline; } .rh-pinpoint__desc { font-family: var(--rh-map-tooltip-body-font, inherit); text-transform: var(--rh-map-tooltip-body-transform, none); font-size: calc(var(--rh-map-tooltip-font-size, 14px) - 2px); line-height: 1.5; margin-top: 6px; opacity: 0.92; white-space: normal; } .rh-pinpoint__desc p { margin: 0 0 0.4em; } .rh-pinpoint__desc p:last-child { margin-bottom: 0; } /* Visible states (driven by JS class + default-visible fallback). */ .rh-pinpoint--hq.is-open .rh-pinpoint__tooltip, .rh-pinpoint--hq.is-tooltip-default-visible .rh-pinpoint__tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; } /* A visitor's location/country selection is authoritative. A default-open tooltip stays hidden until that selection is cleared. */ .rh-map.is-pin-selection-active .rh-pinpoint--hq.is-tooltip-default-visible:not(.is-open) .rh-pinpoint__tooltip { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Flip tooltip below the pinpoint when JS detects top overflow. */ .rh-pinpoint__tooltip.is-below { bottom: auto; top: calc(50% + (var(--rh-map-hq-glow-size, 64px) / 2) + 6px); } .rh-pinpoint__tooltip.is-below .rh-pinpoint__tooltip-pointer { bottom: auto; top: -9px; border-top: none; border-bottom: 12px solid var(--rh-map-popup-selected-hq-bg, #dc0312); } /* --------------------------------------------------------------------------- * Reduced motion: kill transitions; states still resolve instantly. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .rh-pinpoint__tooltip { transition: none !important; } } /* --------------------------------------------------------------------------- * Pinpoint Count Shortcode * ------------------------------------------------------------------------- */ .rh-map-count { display: inline-block; line-height: 1; } .rh-map-count--hq { font-family: var(--rh-map-hq-count-font, inherit); font-weight: var(--rh-map-hq-count-weight, 700); color: var(--rh-map-hq-count-color, #dc0312); font-size: var(--rh-map-hq-count-size, 24px); } .rh-map-count--simple { font-family: var(--rh-map-simple-count-font, inherit); font-weight: var(--rh-map-simple-count-weight, 700); color: var(--rh-map-simple-count-color, #8a837a); font-size: var(--rh-map-simple-count-size, 24px); } /* --------------------------------------------------------------------------- * SVG globe (self-hosted, no Mapbox) — canvas overlay + view toggle. * ------------------------------------------------------------------------- */ .rh-map__globe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } /* First-paint view lock. Reserve the map's geometry through the backdrop, but do not expose any visual layer until the selected layout has a real frame. This makes the async dot-data/canvas path atomic on reload. */ .rh-map--globe-capable.rh-map--view-pending .rh-map__inner { opacity: 0; visibility: hidden; pointer-events: none; transition: none; } /* Protect the first paint before the stylesheet has parsed. */ .rh-map__inner[data-rh-map-initial-lock] { visibility: hidden !important; } .rh-map--globe-capable.rh-map--view-pending .rh-map__controls { opacity: 0; pointer-events: none; } .rh-map__view-loader { position: absolute; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--rh-map-control-label, #1a1816); font-family: var(--rh-map-control-font, inherit); font-size: 13px; font-weight: var(--rh-map-control-weight, 700); line-height: 1; background: var(--rh-map-globe-space, #ffffff); opacity: 0; visibility: hidden; pointer-events: none; transition: none; } .rh-map--globe-capable.rh-map--view-pending .rh-map__view-loader { opacity: 1; visibility: visible; transition-delay: 0s; } /* A navigation or reload stops the outgoing document's JavaScript before the replacement page can paint. Switch from the canvas to the compositor-only loader immediately, so the visitor sees deliberate continuity rather than a frozen globe. */ .rh-map--globe-capable.rh-map--navigating .rh-map__inner, .rh-map--globe-capable.rh-map--navigating .rh-map__controls { opacity: 0; visibility: hidden; pointer-events: none; transition: none; } .rh-map--globe-capable.rh-map--navigating .rh-map__view-loader { opacity: 1; visibility: visible; transition-delay: 0s; } .rh-map--globe-capable.rh-map--navigating .rh-map__view-loader-spinner { animation-duration: 0.55s; } .rh-map__view-loader-spinner { width: 14px; height: 14px; border: 2px solid var(--rh-map-control-border, #e0e0e0); border-top-color: var(--rh-map-control-active-dot, #dc0312); border-radius: 50%; animation: rh-map-view-loader-spin 0.7s linear infinite; } @keyframes rh-map-view-loader-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rh-map__view-loader, .rh-map--globe-capable .rh-map__inner { transition: none; } .rh-map__view-loader-spinner { animation: none; } } .rh-map--globe-capable.rh-map--view-pending[data-rh-current-view="globe"] .rh-map__backdrop, .rh-map--globe-capable.rh-map--view-pending[data-rh-current-view="globe"] .rh-map__boundaries-container, .rh-map--globe-capable.rh-map--view-pending[data-rh-current-view="globe"] .rh-map__pins { visibility: hidden; } .rh-map--globe-capable.rh-map--view-pending[data-rh-current-view="map"] .rh-map__globe-canvas { visibility: hidden; } /* Once the canvas has rendered its first frame it owns dots in both layouts. Keep the raster fallback suppressed even if navigation pauses JavaScript mid-frame. */ .rh-map--globe-capable.rh-map--canvas-owning .rh-map__backdrop { visibility: hidden !important; } /* Pins snap to hidden as they rotate onto the back of the globe — not a fade: a solid-colour name popup fading out over the globe's dark backdrop visibly desaturates toward grey mid-transition before disappearing. */ .rh-map--globe-capable .rh-pinpoint.is-behind { opacity: 0; pointer-events: none; transition: opacity 0s; } /* --------------------------------------------------------------------------- * Map controls row — location selectors (Standort / Land) + the segmented * Globe | Map switch. Colours, font, border and spacing are all driven by the * "Map controls" appearance settings. * ------------------------------------------------------------------------- */ .rh-map__controls { position: absolute; z-index: 30; display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--rh-map-control-gap, 10px); transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1); } /* "Glass" control styling (admin toggle) — the whole controls row becomes one frosted panel instead of each button/select carrying its own. Matches the site's own reference glass widget (a dark tint reads against a light backdrop far better than a translucent white one does). The border/ highlight colour prefers the site's own Elementor glass global (if that page defines one) and falls back to translucent white. Padding is uniform on all sides (matching the top) — extra breathing room goes OUTSIDE the panel instead (see the bottom-anchored position offsets below). */ .rh-map__controls.is-controls-glass { border-radius: var(--rh-map-control-panel-radius, 20px); border: 0.3px solid var(--e-global-color-de5d6cf, rgba(255, 255, 255, var(--rh-map-glass-border-opacity, 0.4))); background: color-mix(in srgb, var(--rh-map-glass-bg-color, #040405) calc(var(--rh-map-glass-bg-opacity, 0.1) * 100%), transparent); backdrop-filter: blur(var(--rh-map-glass-blur, 24px)) saturate(120%); -webkit-backdrop-filter: blur(var(--rh-map-glass-blur, 24px)) saturate(120%); box-shadow: inset 0 1px 0 var(--e-global-color-de5d6cf, rgba(255, 255, 255, var(--rh-map-glass-border-opacity, 0.4))); padding: var(--rh-map-glass-panel-padding, 8px); } /* Overlay placements (3x3 grid). */ .rh-map__controls--top-left { top: 12px; left: 12px; } .rh-map__controls--top-center { top: 12px; left: 50%; transform: translateX(-50%); } .rh-map__controls--top-right { top: 12px; right: 20px; } .rh-map__controls--center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .rh-map__controls--bottom-left { bottom: 12px; left: 12px; } .rh-map__controls--bottom-center { bottom: 12px; left: 50%; transform: translateX(-50%); } .rh-map__controls--bottom-right { bottom: 12px; right: 20px; } /* The glass panel's extra clearance goes below it (outside), not as padding inside it. */ .rh-map__controls.is-controls-glass.rh-map__controls--bottom-left, .rh-map__controls.is-controls-glass.rh-map__controls--bottom-center, .rh-map__controls.is-controls-glass.rh-map__controls--bottom-right { bottom: 1.875em; } /* The two-segment switch groups its buttons; hidden until the globe is ready. */ .rh-map__view-switch { display: none; align-items: center; gap: var(--rh-map-control-gap, 10px); } .rh-map__view-switch:not([hidden]) { display: var(--rh-map-view-switch-desktop-display, inline-flex); } /* Globe/Map is one paired switch, so it gets ONE shared glass card (like Standort/Land each get their own) rather than one per button — the two buttons inside go bare, matching how pills sit inside the main panel. No padding of its own — relying only on the buttons' own padding (same as the select cards do) keeps this card the same height as theirs; adding an extra ring of padding on top of the buttons' own was what made it taller. */ .rh-map__view-switch.is-controls-glass { border-radius: var(--rh-map-control-radius, 100px); border: 0.3px solid var(--e-global-color-de5d6cf, rgba(255, 255, 255, var(--rh-map-glass-border-opacity-nested, 0.55))); background: color-mix(in srgb, var(--rh-map-glass-bg-color-nested, #040405) calc(var(--rh-map-glass-bg-opacity-nested, 0.04) * 100%), transparent); backdrop-filter: blur(var(--rh-map-glass-blur, 24px)) saturate(120%); -webkit-backdrop-filter: blur(var(--rh-map-glass-blur, 24px)) saturate(120%); box-shadow: inset 0 1px 0 var(--e-global-color-de5d6cf, rgba(255, 255, 255, var(--rh-map-glass-border-opacity-nested, 0.55))); /* Tighter than the shared --rh-map-control-gap used elsewhere in the row — the dot-to-label gap inside each button is 8px, so pulling GLOBUS/KARTE closer than that would look cramped relative to their own dots. */ gap: 6px; } .rh-map__view-switch.is-controls-glass .rh-map__view-seg.is-controls-glass { border-color: transparent; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* Manually-placed control (via shortcode) — sits inline in page content. */ .rh-map-control-scope { display: inline-flex; vertical-align: middle; } .rh-map__view-control { display: var(--rh-map-view-switch-desktop-display, inline-flex); } /* Per-device "allow switching views" admin toggle. Same breakpoints as --rh-map-canvas-height-*: tablet <=1024px, mobile <=767px — the mobile query comes last so it wins the cascade at the narrowest widths, same as the canvas-height vars above. Hiding the control this way (rather than in JS) means a disabled device just can't reach the switch; whichever view is already showing (persisted choice or default) stays put. */ @media (max-width: 1024px) { .rh-map__view-switch:not([hidden]), .rh-map__view-control { display: var(--rh-map-view-switch-tablet-display, inline-flex); } } @media (max-width: 767px) { .rh-map__view-switch:not([hidden]), .rh-map__view-control { display: var(--rh-map-view-switch-mobile-display, inline-flex); } } .rh-map__view-seg { display: inline-flex; align-items: center; gap: 8px; margin: 0; /* !important throughout: Elementor's own global kit CSS ships a `.elementor-kit-N button { padding: 0.5em 1em; border-radius: 50px; color: var(--e-global-color-primary); }` rule that — because it targets the bare `button` element and this IS a