/* ================= BO MAP SECTION WIDGET — default styling ================= Scoped under .bo-map-wrap. Self-contained: own CSS vars, own class names, does not depend on theme globals (.wrap, .reveal-scale, :root vars) so it renders correctly even without the parent theme stylesheet loaded. ========================================================================= */ .bo-map-wrap{ --map-navy: #031B39; --map-accent: #1083E6; --map-slate-light: #8B97A8; --map-line: #E4E8EE; --map-bg: #F7F9FC; --map-height: 380px; --map-radius: 20px; --map-ease: cubic-bezier(.22,1,.36,1); font-family:'Roboto', sans-serif; } .bo-map-wrap .bo-map-section{ padding:0 0 80px; background:var(--map-bg); } .bo-map-wrap .bo-map-inner{ max-width:1220px; margin:0 auto; padding:0 40px; } /* ---------- Card ---------- */ .bo-map-wrap .bo-map-card{ position:relative; border-radius:var(--map-radius); overflow:hidden; height:var(--map-height); border:1px solid var(--map-line); box-shadow:0 30px 60px -40px rgba(3,27,57,.18); } .bo-map-wrap .bo-map-card iframe{ position:absolute; inset:0; width:100%; height:100%; display:block; } /* ---------- Overlay label ---------- */ .bo-map-wrap .map-overlay-label{ position:absolute; top:18px; right:18px; z-index:2; background:rgba(255,255,255,.97); border-radius:12px; padding:14px 18px; display:flex; align-items:center; gap:12px; box-shadow:0 12px 28px -12px rgba(3,27,57,.28); backdrop-filter:blur(6px); text-decoration:none; max-width:calc(100% - 36px); } .bo-map-wrap .map-overlay-clickable{ cursor:pointer; transition:transform .3s var(--map-ease), box-shadow .3s var(--map-ease); } .bo-map-wrap .map-overlay-clickable:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(3,27,57,.35); } .bo-map-wrap .mol-icon{ width:36px; height:36px; border-radius:9px; background:color-mix(in srgb, var(--map-accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--map-accent) 20%, transparent); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .bo-map-wrap .mol-icon svg{ width:16px; height:16px; stroke:var(--map-accent); } .bo-map-wrap .map-overlay-label strong{ display:block; font-size:14px; font-weight:600; color:var(--map-navy); margin-bottom:3px; font-family:'Roboto', sans-serif; } .bo-map-wrap .map-overlay-label span{ font-size:12px; color:var(--map-slate-light); } /* ---------- Reveal (self-contained, opt-in via .bo-map-reveal) ---------- */ .bo-map-wrap .bo-map-reveal{ opacity:0; transform:scale(.96); transition:opacity .8s var(--map-ease), transform .9s var(--map-ease); } .bo-map-wrap .bo-map-reveal.bo-map-in{ opacity:1; transform:scale(1); } @media (prefers-reduced-motion: reduce){ .bo-map-wrap .bo-map-reveal{ opacity:1; transform:none; transition:none; } } /* ---------- Editor-active safety net ---------- Elementor adds this class to the preview iframe so plugins can force-show scroll-reveal content while editing, independent of any JS timing race. */ body.elementor-editor-active .bo-map-wrap .bo-map-reveal{ opacity:1 !important; transform:none !important; } /* ================= RESPONSIVE ================= */ @media (max-width:980px){ .bo-map-wrap .bo-map-inner{ padding:0 40px; } } @media (max-width:640px){ .bo-map-wrap .bo-map-inner{ padding:0 20px; } .bo-map-wrap .bo-map-section{ padding:0 0 56px; } .bo-map-wrap .map-overlay-label{ padding:11px 14px; gap:10px; top:14px; right:14px; } .bo-map-wrap .mol-icon{ width:32px; height:32px; } .bo-map-wrap .mol-icon svg{ width:14px; height:14px; } .bo-map-wrap .map-overlay-label strong{ font-size:13px; } .bo-map-wrap .map-overlay-label span{ font-size:11px; } }