/* Globe World Map — Frontend v1.5 */ .gwm-root { position: relative; width: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ── Canvas wrap ── */ .gwm-canvas-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: visible; background: transparent; } #gwm-canvas { display: block; width: 100% !important; height: 100% !important; background: transparent; } /* ── Loading ── */ .gwm-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity 0.5s; } .gwm-loading.hidden { opacity: 0; } .gwm-loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(120,140,180,0.2); border-top-color: rgba(120,160,255,0.7); border-radius: 50%; animation: gwm-spin 0.85s linear infinite; } @keyframes gwm-spin { to { transform: rotate(360deg); } } /* ── Tooltip ── */ .gwm-tip { position: absolute; pointer-events: none; background: rgba(8,12,24,0.92); color: #e8edf8; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 5px 13px; font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s; z-index: 30; backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .gwm-tip.show { opacity: 1; transform: translateY(0); } /* ── Controls bar ── */ .gwm-controls-bar { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 8px 0 2px; } .gwm-controls-bar:empty { display: none; } .gwm-ctrl-pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; padding: 4px 12px; font-size: 11.5px; color: #556; line-height: 1; } .gwm-ctrl-key { background: rgba(0,0,0,0.08); border-radius: 4px; padding: 2px 6px; font-size: 10.5px; font-family: monospace; color: #334; } @media (prefers-color-scheme: dark) { .gwm-ctrl-pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #aab; } .gwm-ctrl-key { background: rgba(255,255,255,0.09); color: #dde; } } /* ════════════════════════════════════════════════ LEGEND — pill design with readable text ════════════════════════════════════════════════ */ .gwm-legend { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 4px 0; justify-content: center; } .gwm-legend:empty { display: none; } .gwm-legend-item { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border-radius: 20px; /* Dark pill with colored left dot — readable on any background */ padding: 5px 11px 5px 5px; background: rgba(20,30,50,0.82); border: 1.5px solid var(--gwm-item-color, #4f8ef7); transition: transform 0.16s, box-shadow 0.16s, background 0.16s; font-size: 12.5px; font-weight: 500; line-height: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); will-change: transform; } .gwm-legend-item:hover, .gwm-legend-item.focused { background: rgba(30,45,75,0.95); transform: translateY(-2px) scale(1.04); box-shadow: 0 5px 18px rgba(0,0,0,0.25), 0 0 0 2px var(--gwm-item-color, #4f8ef7); } /* Dot */ .gwm-legend-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.55); box-shadow: 0 1px 5px rgba(0,0,0,0.25); } /* Flag */ .gwm-legend-flag { font-size: 14px; line-height: 1; } /* Name — always white on dark pill */ .gwm-legend-name { color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* ════════════════════════════════════════════════ DRAWER ════════════════════════════════════════════════ */ /* Moved to at runtime to escape stacking contexts */ .gwm-drawer, body > .gwm-drawer { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; pointer-events: none; } .gwm-drawer.open { pointer-events: all; } .gwm-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .gwm-drawer.open .gwm-drawer-backdrop { opacity: 1; } .gwm-drawer-inner { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 88vw); /* Default bg — overridden by inline style from admin settings */ background: #0e1628; border-left: 1px solid rgba(255,255,255,0.07); box-shadow: -20px 0 80px rgba(0,0,0,0.55); display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform 0.36s cubic-bezier(0.32,0.72,0,1); z-index: 1; } .gwm-drawer.open .gwm-drawer-inner { transform: translateX(0); } .gwm-drawer-accent { height: 4px; flex-shrink: 0; background: #4f8ef7; transition: background 0.3s; } .gwm-drawer-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: rgba(255,255,255,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; z-index: 3; } .gwm-drawer-close:hover { background: rgba(255,255,255,0.13); color: #fff; } .gwm-drawer-body { flex: 1; overflow-y: auto; padding: 20px 28px 40px; position: relative; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; } .gwm-drawer-body::-webkit-scrollbar { width: 3px; } .gwm-drawer-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; } .gwm-drawer-flag { font-size: 48px; line-height: 1; margin-bottom: 10px; display: block; } .gwm-drawer-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 4px; line-height: 1.2; padding-right: 36px; } .gwm-drawer-iso { font-size: 10px; font-family: monospace; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.28); display: block; margin-bottom: 18px; } .gwm-drawer-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 0 0 18px; } .gwm-drawer-content { /* Color overridden by dynamic style from admin settings */ color: rgba(210,225,248,0.82); font-size: 14px; line-height: 1.75; } .gwm-drawer-content h1,.gwm-drawer-content h2,.gwm-drawer-content h3 { color:#fff; margin:16px 0 6px; font-size:15px; } .gwm-drawer-content h1:first-child,.gwm-drawer-content h2:first-child { margin-top:0; } .gwm-drawer-content p { margin:0 0 10px; } .gwm-drawer-content a { color:#7ab4ff; text-decoration:none; border-bottom:1px solid rgba(122,180,255,0.28); } .gwm-drawer-content a:hover { color:#aed0ff; } .gwm-drawer-content ul,.gwm-drawer-content ol { padding-left:18px; margin:0 0 10px; } .gwm-drawer-content li { margin-bottom:5px; } .gwm-drawer-content strong { color:#e8f0ff; } .gwm-drawer-content img { max-width:100%; border-radius:8px; margin:8px 0; } .gwm-no-content { color:rgba(255,255,255,0.25); font-size:13px; font-style:italic; text-align:center; padding:32px 0; } /* ── Responsive ── */ @media (max-width: 600px) { .gwm-drawer-inner { width: 100vw; } .gwm-drawer-body { padding: 16px 18px 32px; } .gwm-legend-item { font-size: 11.5px; } .gwm-legend-dot { width: 16px; height: 16px; } }