/* Arafura Default Template Styles */ /* Map Container */ #map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; /* Ensure map is behind UI elements */ } /* ===================================================== MAP COLOR FILTERS (brightness, contrast, saturation) ===================================================== */ /* Dark basemap + dark mode */ body.map-basemap-dark.theme-dark #map canvas { filter: brightness(0.9) contrast(1.15) saturate(1.2); transition: filter 200ms ease; } /* Street basemap – Grace + Paper (#39) air/taman */ body.map-basemap-street #map canvas { filter: brightness(1.02) contrast(0.98) saturate(1.05); transition: filter 200ms ease; } /* Satellite + dark mode (ArcGIS fallback & MapTiler hybrid — filter sama agar backdrop-filter stat-card stabil) */ body.map-basemap-satellite.theme-dark #map canvas { filter: brightness(1.03) contrast(1.05) saturate(1.08); transition: filter 200ms ease; } /* Fallback untuk basemap non-street tanpa pasangan tema eksplisit */ body:not(.map-basemap-street):not(.theme-light):not(.map-basemap-satellite) #map canvas { filter: brightness(0.9) contrast(1.15) saturate(1.2); transition: filter 200ms ease; } /* Layer compositing stabil di atas WebGL (penting untuk backdrop-filter UI) */ #map canvas { transform: translateZ(0); } /* Tema alternatif – aktifkan dengan menambahkan class ke atau #app */ .map-theme-soft #map canvas { /* Lebih lembut / pastel */ filter: brightness(1.05) contrast(0.95) saturate(0.9); } .map-theme-vivid #map canvas { /* Warna lebih kuat & terang */ filter: brightness(1.0) contrast(1.25) saturate(1.4); } .map-theme-mono #map canvas { /* Hampir monokrom, cocok untuk fokus ke overlay data */ filter: grayscale(0.85) brightness(1.05) contrast(1.1); } .map-theme-dark #map canvas { filter: brightness(0.8) contrast(1.2) saturate(1.1); } .map-theme-light #map canvas { filter: brightness(1.2) contrast(0.8) saturate(1.3); } /* Glass elevation — selaras stat-card (card, tooltip, menu pill) */ :root { /* Aksen biru — dark / satellite basemap */ --accent-blue: #2ec6ff; --glass-elev-shadow: 0 10px 28px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.22); --glass-elev-shadow-light: 0 8px 22px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08); } /* Street basemap + light theme — aksen biru lebih gelap */ :is(html, body).theme-light, body.map-basemap-street { --accent-blue: #0158cc; } /* Vignette frame — di atas peta, di bawah UI; non-interaktif (hanya dark & satellite) */ .vignette-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: none; } /* Aktif: basemap dark / satellite, bukan street, bukan theme light */ body:not(.map-basemap-street):not(.theme-light):is( .map-basemap-dark, .map-basemap-satellite, .map-basemap-satellite-maptiler ) .vignette-layer, :is(html, body).theme-dark:not(.theme-light):not(.map-basemap-street) .vignette-layer { display: block; } :is(html, body).theme-light .vignette-layer, body.map-basemap-street .vignette-layer { display: none !important; } .vignette-layer::after { content: ''; position: absolute; inset: 0; /* Empat sisi: gradien hitam bertingkat agar transisi sangat halus */ background: linear-gradient( 180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.2) 3%, rgba(0, 0, 0, 0.09) 8%, rgba(0, 0, 0, 0.03) 14%, transparent 30% ), linear-gradient( 0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.50) 4%, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.03) 16%, transparent 30% ), linear-gradient( 90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 4%, rgba(0, 0, 0, 0.08) 10%, rgba(0, 0, 0, 0.025) 16%, transparent 30% ), linear-gradient( 270deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 4%, rgba(0, 0, 0, 0.08) 10%, rgba(0, 0, 0, 0.025) 16%, transparent 30% ); } /* ===================================================== MARKER KEJADIAN (titik api / peringatan di peta) ===================================================== */ /* Overlay di dalam #map — posisi dihitung via map.project() */ .incident-markers-overlay { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; } .incident-marker-anchor { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: block; box-sizing: border-box; pointer-events: auto; cursor: pointer; overflow: visible; margin: 0; will-change: left, top; } .incident-marker-anchor--fire { width: 48px; height: 48px; } .incident-marker-anchor--warning { width: 32px; height: 32px; } .incident-marker { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; overflow: visible; } .incident-marker--fire::before, .incident-marker--fire::after { pointer-events: none; } .incident-marker.is-active .incident-marker-dot { outline: 2px solid #fff; outline-offset: 2px; } /* --- Marker api (merah + pulse) --- */ .incident-marker--fire::before, .incident-marker--fire::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid #ff1744; background: rgba(255, 23, 68, 0.22); box-shadow: 0 0 12px rgba(255, 23, 68, 0.7), 0 0 24px rgba(229, 57, 53, 0.45); animation: incident-marker-pulse 2.4s cubic-bezier(0.15, 0.65, 0.25, 1) infinite; z-index: 0; } .incident-marker--fire::after { animation-delay: 1.2s; } .incident-marker--fire .incident-marker-dot { inset: 10px; background: #ff1744; border: 1px solid #ff8a80; box-shadow: 0 0 14px rgba(255, 23, 68, 1), 0 0 26px rgba(255, 82, 82, 0.85); animation: incident-marker-dot-glow 2.4s ease-in-out infinite; } .incident-marker--fire .incident-marker-dot i { font-size: 16px; } /* --- Marker warning (kuning, tanpa animasi — tampilan awal) --- */ .incident-marker--warning .incident-marker-dot { inset: 4px; background: #f9a825; border: 2px solid #fff59d; box-shadow: 0 0 8px rgba(249, 168, 37, 0.65); animation: none; } .incident-marker--warning .incident-marker-dot i { font-size: 14px; } .incident-marker-dot { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.45); z-index: 2; } .incident-marker-dot i { line-height: 1; color: #fff; } @keyframes incident-marker-pulse { 0% { transform: scale(0.4); opacity: 0.9; border-width: 1px; border-color: #ff1744; } 55% { opacity: 0.35; border-color: #e53935; } 100% { transform: scale(2); opacity: 0; border-width: 1px; border-color: rgba(198, 40, 40, 0.5); } } @keyframes incident-marker-dot-glow { 0%, 100% { box-shadow: 0 0 14px rgba(255, 23, 68, 1), 0 0 26px rgba(255, 82, 82, 0.85); } 50% { box-shadow: 0 0 20px rgba(255, 23, 68, 1), 0 0 40px rgba(255, 120, 120, 0.95); } } /* Tooltip kejadian di peta — tepat di atas marker, rata tengah horizontal */ .incident-map-tooltip { position: absolute; z-index: 6; width: min(400px, calc(100vw - 32px)); max-width: 400px; padding: 0; margin: 0; pointer-events: auto; align-items: stretch; box-sizing: border-box; box-shadow: var(--glass-elev-shadow); } /* Spesifisitas lebih tinggi dari .card — rata tengah horizontal, tepat di atas marker */ .incident-map-tooltip.card { transform: translate(-50%, calc(-100% - var(--incident-tooltip-gap, 20px))) translateZ(0); padding: 12px 15px; box-shadow: var(--glass-elev-shadow); } :is(html, body).theme-light .incident-map-tooltip, body.map-basemap-street .incident-map-tooltip, :is(html, body).theme-light .incident-map-tooltip.card, body.map-basemap-street .incident-map-tooltip.card{ box-shadow: var(--glass-elev-shadow-light); } .incident-map-tooltip[hidden] { display: none !important; } /* Pengukuran tinggi tooltip sebelum flyTo (tetap di DOM, tidak terlihat) */ .incident-map-tooltip.incident-map-tooltip--measure { visibility: hidden; pointer-events: none; } /* Timpa .card > * { position: relative } — tombol tutup di pojok kanan atas card */ .incident-map-tooltip.card > .incident-map-tooltip-close { position: absolute; top: 15px; right: 20px; left: auto; bottom: auto; z-index: 10; width: 28px; height: 28px; margin: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; padding: 0; flex-shrink: 0; } .incident-map-tooltip.card > .incident-map-tooltip-close:hover { background: rgba(0, 0, 0, 0.75); } .incident-map-tooltip-photo { position: relative; z-index: 1; width: 100%; border-radius: 10px; overflow: hidden; line-height: 0; } .incident-map-tooltip-photo img { width: 100%; height: 130px; object-fit: cover; display: block; } .incident-map-tooltip-header { padding: 10px 0; margin: 0; padding-bottom: 10px !important; } .incident-map-tooltip-header .title { font-size: 10px; } .incident-map-tooltip-header .time { font-size: 10px; color: #90a4ae; } .incident-map-tooltip-title-icon { color: #ff7043; } .incident-map-tooltip-body { padding: 0; display: flex; flex-direction: column; gap: 6px; } .incident-map-tooltip-body .bmkg-alerts-desc { -webkit-line-clamp: 3; max-height: calc(1.4em * 3); } .incident-map-tooltip-resources-wrap { margin-top: 4px; } .incident-map-tooltip-resources { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.22); } .incident-map-tooltip-resources--kebakaran { border-color: rgba(255, 112, 67, 0.35); background: transparent; } .incident-map-tooltip-resources--laporan { border-color: rgba(255, 193, 7, 0.28); background: transparent; } .incident-map-tooltip-resources-head { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #90a4ae; margin-bottom: 6px; } .incident-map-tooltip-resources--kebakaran .incident-map-tooltip-resources-head { color: #ffffff; } .incident-map-tooltip-resources--laporan .incident-map-tooltip-resources-head { color: #ffffff; } .incident-map-tooltip-resources-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 20px; } .incident-resource-row { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.3; min-width: 0; } .incident-resource-row > i { flex-shrink: 0; font-size: 11px; color: #78909c; } .incident-map-tooltip-resources--kebakaran .incident-resource-row > i { color: #ffffff; } .incident-map-tooltip-resources--laporan .incident-resource-row > i { color: #ffffff; } .incident-resource-label { flex: 1; min-width: 0; color: #b0bec5; font-weight: 400; } .incident-resource-value { flex-shrink: 0; font-weight: 800; color: var(--accent-blue); font-size: 13px; font-variant-numeric: tabular-nums; } .incident-map-tooltip-resources--kebakaran .incident-resource-value { color: #ff0000; } .incident-map-tooltip-resources--laporan .incident-resource-value { color: #ff0000; } .incident-resource-value--text { color: #90a4ae; font-weight: 600; font-size: 9px; } .incident-map-tooltip-resources-note, .incident-map-tooltip-resources-empty { margin: 6px 0 0; font-size: 12px; line-height: 1.35; color: #78909c; } .incident-map-tooltip-resources--laporan .incident-map-tooltip-resources-note { color: #ffffff; font-style: italic; } :is(html, body).theme-light .incident-map-tooltip-resources, body.map-basemap-street .incident-map-tooltip-resources{ background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); } :is(html, body).theme-light .incident-map-tooltip-resources--kebakaran, body.map-basemap-street .incident-map-tooltip-resources--kebakaran{ border-color: rgba(230, 81, 0, 0.35); background: rgba(255, 152, 0, 0.08); } :is(html, body).theme-light .incident-map-tooltip-resources--laporan, body.map-basemap-street .incident-map-tooltip-resources--laporan{ border-color: rgba(255, 160, 0, 0.35); background: rgba(255, 193, 7, 0.1); } :is(html, body).theme-light .incident-resource-label, body.map-basemap-street .incident-resource-label{ color: #455a64; } :is(html, body).theme-light .incident-map-tooltip-resources-note, body.map-basemap-street .incident-map-tooltip-resources-note, :is(html, body).theme-light .incident-map-tooltip-resources-empty, body.map-basemap-street .incident-map-tooltip-resources-empty{ color: #607d8b; } :is(html, body).theme-light .incident-map-tooltip-title-icon, body.map-basemap-street .incident-map-tooltip-title-icon{ color: #e65100; } /* Hide ALL MapLibre default controls */ .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right, .maplibregl-control-container, .maplibregl-ctrl, .maplibregl-ctrl-group, .mapboxgl-ctrl-attrib, .mapboxgl-ctrl-logo { display: none !important; } .notch { position: absolute; top: 0; left: 50%; width: 180px; height: 45px; background-color: #222; border-radius: 0 0 28px 28px; transform: translateX(-50%); } .notch::before, .notch::after { content: ""; position: absolute; top: 0; left: -7px; width: 14px; height: 7px; /* Curved shape: only quarter-circle visible (mask clips blur + tint to this shape) */ background-image: radial-gradient(circle at 0 100%, transparent 6px, rgba(0, 0, 0, 0.1) 7px); background-size: 50% 100%; background-repeat: no-repeat; -webkit-mask-image: radial-gradient(circle at 0 100%, transparent 6px, #fff 7px); mask-image: radial-gradient(circle at 0 100%, transparent 6px, #fff 7px); -webkit-mask-size: 50% 100%; mask-size: 50% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .notch::after { left: 100%; margin-right: corner-sizepx; background-image: radial-gradient(circle at 100% 100%, transparent 6px, rgba(0, 0, 0, 0.1) 7px); -webkit-mask-image: radial-gradient(circle at 100% 100%, transparent 6px, #fff 7px); mask-image: radial-gradient(circle at 100% 100%, transparent 6px, #fff 7px); } .top-center-logo { z-index: 20; /* Above vignette (z-index: 2) so logo stays visible */ display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.12); background: rgb(24 24 24 / 30%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; user-select: none; } /* Notch + logo — dark & satellite (glass, selaras stat-card / bottom-menu-pill) */ .top-center-logo.notch, body.map-basemap-dark .top-center-logo.notch, body.map-basemap-satellite .top-center-logo.notch, body.map-basemap-satellite-maptiler .top-center-logo.notch, :is(html, body).theme-dark .top-center-logo.notch { background: rgb(24 24 24 / 30%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Left panel – satu tingkat dengan .right-panels-wrapper dan .bottom-panel */ .left-panel { position: absolute; width: 25%; max-width: 25%; top: 40px; left: 10px; display: flex; flex-direction: column; gap: 15px; z-index: 20; padding: 14px 16px 36px; box-sizing: border-box; overflow: visible; } .logo { display: inline-flex; align-items: center; width: fit-content; /* Only wrap around the image */ } .logo img { height: 24px; width: auto; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.9)); } .logo [class^="ri-"] { color: #4dd0e1; } .pill-row { display: flex; gap: 6px !important; flex-wrap: wrap; } .pill { display: inline-flex; align-items: center; gap: 15px !important; padding: 15px 20px !important; border-radius: 999px; font-size: 11px !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: 0.06em !important; border: 1px solid rgba(255, 255, 255, 0.12); background: rgb(0 0 0 / 80%); backdrop-filter: blur(10px); cursor: pointer; user-select: none; white-space: nowrap; } .pill i { font-size: 17px !important; color: var(--accent-blue); } .pill.active { background: transparent; color: var(--accent-blue) !important; border-color: var(--accent-blue) !important; font-weight: 800 !important; text-shadow: none !important; } .title-card{ padding: 10px 20px; padding-right: 0; font-weight: 600; } /* ========================================= BASEMAP SWITCHER - Collapsible with slide animation ========================================= */ .basemap-switcher-wrapper { display: flex; align-items: center; gap: 0; position: relative; } .basemap-trigger-pill { cursor: pointer; flex-shrink: 0; transition: border-color 0.2s, background 0.2s; padding: 8px 15px 8px 12px !important; gap: 10px !important; } .basemap-trigger-pill .basemap-thumbnail { width: 25px !important; height: 25px !important; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.2); } .basemap-options-panel { overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; } .basemap-switcher-wrapper.basemap-expanded .basemap-options-panel { max-width: 600px; opacity: 1; } .basemap-options-panel .pill-row { display: flex; gap: 6px; flex-wrap: nowrap; padding-left: 8px; } .basemap-options-panel .pill .basemap-thumbnail { width: 30px !important; height: 30px !important; border-radius: 50%; object-fit: cover; border: 1px solid rgb(94 94 94 / 50%); margin-left: -5px; } /* ========================================= GEOMETRY OVERLAY - Collapsible (same show/hide as basemap) ========================================= */ .geometry-overlay-wrapper { display: flex; align-items: center; gap: 0; position: relative; } .geometry-trigger-pill { cursor: pointer; flex-shrink: 0; transition: border-color 0.2s, background 0.2s; padding: 12px 15px 12px 15px !important; gap: 15px !important; } .geometry-trigger-pill i{ font-size: 15px !important; } /* Bottom panel main pill – glass blur (dark / light via ::before) */ .bottom-menu-pill { cursor: default; flex-shrink: 0; padding: 15px 20px !important; gap: 20px !important; background: transparent; backdrop-filter: none; position: relative; isolation: isolate; overflow: visible; transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06); } .bottom-menu-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(24 24 24 / 30%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 0; pointer-events: none; } .bottom-menu-pill > * { position: relative; z-index: 1; } .bottom-menu-separator{ height: 20px; width: 1px; background: rgba(255, 255, 255, 0.2); } /* Bottom basemap vertical menu */ .bottom-basemap-menu { position: absolute; bottom: 105px; /* above bottom-panel (bottom: 20px) */ left: 50%; transform: translateX(-50%); z-index: 21; display: none; } .bottom-basemap-menu.active { display: block; } .bottom-basemap-options-panel { width: max-content; /* width menyesuaikan konten terlebar */ max-width: none; opacity: 1; overflow: visible; margin-left: -15px; } .bottom-basemap-options-panel .pill-row { display: flex; flex-direction: column; gap: 8px !important; padding-left: 0; align-items: flex-start; /* jangan stretch, biar lebar ikut konten pill */ } .bottom-basemap-menu .pill { justify-content: flex-start; width: auto; /* lebar pill mengikuti konten masing-masing */ opacity: 0; padding: 10px 20px !important; transform: translateY(10px); transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .bottom-basemap-menu .pill.visible { opacity: 1; transform: translateY(0); } /* Bottom geometry vertical menu – mirror basemap but uses geometry list */ .bottom-geometry-menu { position: absolute; bottom: 105px; /* same height as basemap menu */ left: 50%; transform: translateX(-50%); z-index: 21; display: none; } .bottom-geometry-menu.active { display: block; } .bottom-geometry-options-panel { width: max-content; max-width: none; opacity: 1; overflow: visible; } .bottom-geometry-options-panel .pill-row { display: flex; flex-direction: column; gap: 8px !important; padding-left: 0; align-items: flex-start; } .bottom-geometry-menu .pill { justify-content: flex-start; width: auto; opacity: 0; transform: translateY(10px); transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .bottom-geometry-menu .pill.visible { opacity: 1; transform: translateY(0); } /* Bottom weather vertical menu – for weather overlays */ .bottom-weather-menu { position: absolute; bottom: 105px; left: 50%; transform: translateX(-50%); z-index: 21; display: none; } .bottom-weather-menu.active { display: block; } .bottom-weather-options-panel { width: max-content; max-width: none; opacity: 1; overflow: visible; } .bottom-weather-options-panel .pill-row { display: flex; flex-direction: column; gap: 8px !important; padding-left: 0; align-items: flex-start; } .bottom-weather-menu .pill { justify-content: flex-start; width: auto; opacity: 0; transform: translateY(10px); transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .bottom-weather-menu .pill.visible { opacity: 1; transform: translateY(0); } /* Bottom particle vertical menu – for particle overlays */ .bottom-particle-menu { position: absolute; bottom: 105px; left: 50%; transform: translateX(-50%); z-index: 21; display: none; } .bottom-particle-menu.active { display: block; } .bottom-particle-options-panel { width: max-content; max-width: none; opacity: 1; overflow: visible; } .bottom-particle-options-panel .pill-row { display: flex; flex-direction: column; gap: 8px !important; padding-left: 0; align-items: flex-start; } .bottom-particle-menu .pill { justify-content: flex-start; width: auto; opacity: 0; transform: translateY(10px); transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .bottom-particle-menu .pill.visible { opacity: 1; transform: translateY(0); } /* Bottom settings vertical menu – static items */ .bottom-settings-menu { position: absolute; bottom: 105px; left: 50%; transform: translateX(-50%); z-index: 21; display: none; } .bottom-settings-menu.active { display: block; } .bottom-settings-options-panel { width: max-content; max-width: none; opacity: 1; overflow: visible; } .bottom-settings-options-panel .pill-row { display: flex; flex-direction: column; gap: 8px !important; padding-left: 0; align-items: flex-start; } .bottom-settings-menu .pill { justify-content: flex-start; width: auto; opacity: 0; transform: translateY(10px); transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .bottom-settings-menu .pill.visible { opacity: 1; transform: translateY(0); } /* Bottom raster vertical menu – mirror geometry list */ .bottom-raster-menu { position: absolute; bottom: 105px; left: 50%; transform: translateX(-50%); z-index: 21; display: none; } .bottom-raster-menu.active { display: block; } .bottom-raster-options-panel { width: max-content; max-width: none; opacity: 1; overflow: visible; } .bottom-raster-options-panel .pill-row { display: flex; flex-direction: column; gap: 8px !important; padding-left: 0; align-items: flex-start; } .bottom-raster-menu .pill { justify-content: flex-start; width: auto; opacity: 0; transform: translateY(10px); transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .bottom-raster-menu .pill.visible { opacity: 1; transform: translateY(0); } .geometry-options-panel { overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; } .geometry-overlay-wrapper.geometry-expanded .geometry-options-panel { max-width: 600px; opacity: 1; } .geometry-options-panel .pill-row { display: flex; gap: 6px; flex-wrap: nowrap; padding-left: 8px; } /* ========================================= RASTER OVERLAY - Collapsible (same style as geometry) ========================================= */ .raster-overlay-wrapper { display: flex; align-items: center; gap: 0; position: relative; } .raster-trigger-pill { cursor: pointer; flex-shrink: 0; transition: border-color 0.2s, background 0.2s; padding: 12px 15px 12px 15px !important; gap: 15px !important; } .raster-trigger-pill i{ font-size: 15px !important; } .raster-options-panel { overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; } .raster-overlay-wrapper.raster-expanded .raster-options-panel { max-width: 600px; opacity: 1; } .raster-options-panel .pill-row { display: flex; gap: 6px; flex-wrap: nowrap; padding-left: 8px; } /* Custom style for Basemap pills when active */ #base-layer-pills .pill{ padding: 5px 15px 5px 12px !important; gap: 10px !important; } #base-layer-pills .pill.active { background: transparent !important; border: 1px solid var(--accent-blue) !important; padding: 7px 12px !important; color: #ffffff !important; /* Override dark text for basemap pills */ } #base-layer-pills .pill.active i { color: #ffffff !important; /* Override dark icon color for basemap pills */ } .pill.active i { color: var(--accent-blue) !important; /* Match text color */ } .pill:hover{ border: 1px solid rgba(255, 255, 255, 0.12); } #btn-reset-view{ border: 1px solid var(--accent-blue); } #btn-reset-view i{ color: var(--accent-blue); } /* Vertical pill list for right panel */ .vertical-pill-list { display: flex; flex-direction: column; gap: 10px !important; margin-top: 5px; text-align: right; align-items: end; } .vertical-pill-list .pill { justify-content: flex-start; width: max-content; } /* Right panel wrapper – satu tingkat dengan .left-panel dan .bottom-panel */ .right-panels-wrapper { position: absolute; width: 25%; max-width: 25%; top: 40px; right: 10px; display: flex; flex-direction: column; gap: 20px; z-index: 20; align-items: stretch; max-height: calc(100% - 24px); overflow-y: auto; overflow-x: visible; /* Ruang untuk box-shadow glass (~28px blur) — hindari terpotong scrollport */ padding: 14px 16px 36px; overflow-clip-margin: 24px; box-sizing: border-box; } /* Panel kanan (weather / particle / air quality / berita) – lebar sama isi wrapper */ .right-panel { position: relative; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; overflow: visible; } /* Kartu panel kiri & kanan — tinggi seragam 220px */ .left-panel > .right-panel > .card, .right-panels-wrapper > .right-panel > .card { height: 230px; min-height: 230px; max-height: 230px; display: flex; flex-direction: column; align-items: stretch; align-self: stretch; /* visible agar box-shadow tidak terpotong (blur/konten di .card-body) */ overflow: visible; box-sizing: border-box; } /* Sudut glass tetap rapi — clip hanya layer blur, bukan bayangan */ .left-panel > .right-panel > .card::before, .right-panels-wrapper > .right-panel > .card::before { border-radius: inherit; overflow: hidden; } .left-panel > .right-panel > .card > .card-header, .right-panels-wrapper > .right-panel > .card > .card-header { flex-shrink: 0; } .left-panel > .right-panel > .card > .card-body, .right-panels-wrapper > .right-panel > .card > .card-body, .left-panel > .right-panel > .card.weather-now-card > .card-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* Weather HUD panel */ .weather-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; } .weather-main { display: flex; flex-direction: column; gap: 4px; } .weather-temp { font-size: 26px; font-weight: 600; color: var(--accent-blue); text-shadow: 0 0 12px rgba(65, 209, 230, 0.7); } .weather-condition { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #b0bec5; } .weather-metrics { display: flex; flex-direction: column; gap: 4px; font-size: 11px; min-width: 120px; } .weather-metric { display: flex; justify-content: space-between; gap: 8px; color: #cfd8dc; } .weather-metric .label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; color: #90a4ae; } .weather-metric .value { font-weight: 500; } .weather-chart { width: 100%; height: 150px; margin-top: 6px; } @media (max-width: 768px) { .weather-chart { height: 130px; } } /* Weather Now – layout referensi BMKG (prakiraan cuaca) */ #weather-panel { align-self: stretch; } .weather-now-card { position: relative; overflow: hidden; } .weather-now-card .card-body { position: relative; display: flex; flex-direction: column; gap: 0; } .weather-now-card--capacity .weather-now-top { margin-bottom: 2px; } .weather-now-capacity-desc { margin: 0 0 4px; font-size: 12px; line-height: 1.35; color: #90a4ae; } .weather-now-card--capacity .weather-now-metrics { flex: 1; min-height: 0; overflow-y: auto; } .weather-now-card--capacity .weather-now-row { padding: 5px 0; gap: 6px; } .weather-now-card--capacity .weather-now-row--capacity-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-content: stretch; column-gap: 12px; font-variant-numeric: tabular-nums; } .weather-now-card--capacity .weather-now-row--capacity-split .label-top { font-size: 12px; font-weight: 400; min-width: 0; flex: none; } .weather-now-card--capacity .capacity-values { display: flex; align-items: center; gap: 50px; flex-shrink: 0; } .weather-now-card--capacity .capacity-total-group { display: flex; justify-content: flex-end; align-items: center; min-width: 2.75rem; } .weather-now-card--capacity .capacity-total { font-size: 13px; font-weight: 600; line-height: 1.2; text-align: right; white-space: nowrap; color: #ffffff; } .weather-now-card--capacity .capacity-on-duty-group { display: flex; align-items: baseline; justify-content: flex-end; gap: 15px; min-width: 4.75rem; white-space: nowrap; } .weather-now-card--capacity .capacity-on-duty-label { font-size: 11px; font-weight: 400; line-height: 1.2; color: #bdc1c3; } .weather-now-card--capacity .capacity-on-duty { font-size: 12px; line-height: 1.2; color: #ffcc80; font-weight: 600; min-width: 1.5rem; text-align: right; } :is(html, body).theme-light .weather-now-card--capacity .capacity-total, body.map-basemap-street .weather-now-card--capacity .capacity-total { color: #212121; } .weather-now-card--capacity .label-top { font-size: 12px; font-weight: 400; flex: 1; min-width: 0; color: #bdc1c3; } .weather-now-card--capacity .weather-now-row-value { font-size: 12px; flex-shrink: 0; } :is(html, body).theme-light .weather-now-card--capacity .capacity-on-duty-label, body.map-basemap-street .weather-now-card--capacity .capacity-on-duty-label { color: #757575; } :is(html, body).theme-light .weather-now-card--capacity .capacity-on-duty, body.map-basemap-street .weather-now-card--capacity .capacity-on-duty { color: #bf360c; } :is(html, body).theme-light .weather-now-capacity-desc, body.map-basemap-street .weather-now-capacity-desc{ color: #666666; } .weather-now-top { margin-bottom: 5px; } .weather-now-icon-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .weather-now-icon { font-size: 18px; color: #ffffff; filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.4)); } .weather-now-label { font-weight: 600; font-size: 12px !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: 0.06em !important; color: hsl(0deg 0% 100% / 60%); } .weather-now-info { font-size: 12px; color: #90a4ae; margin-left: 2px; cursor: help; } .weather-now-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 4px; } .weather-now-temp { font-size: 22px; font-weight: 500; color: var(--accent-blue); line-height: 0.8; } .weather-now-unit { font-size: 20px; font-weight: 600; color: #90a4ae; } .weather-now-condition { font-size: 13px; text-align: right; font-weight: 400; color: rgb(255 255 255 / 60%); } .weather-now-location { font-size: 11px; color: #90a4ae; margin: 0; } .weather-now-metrics { display: flex; flex-direction: column; } .weather-now-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; border-bottom: 1px solid rgb(220 220 220 / 20%); color: #cfd8dc; justify-content: space-between; margin-bottom: 1px; } .label-top{ font-weight: 600; color: #ffffff; } .label-bottom{ font-weight: 400; color: rgb(255 255 255 / 60%); } .weather-now-row:last-child { border-bottom: none !important; } .weather-now-row i:first-child { font-size: 14px; color: #90a4ae; width: 18px; text-align: center; } .weather-now-row-label { flex: 1; color: #90a4ae; } .weather-now-row-value { font-weight: 700; font-size: 14px; color: #ffffff; } .weather-now-row-value .ri-arrow-right-line { font-size: 12px; margin-left: 2px; vertical-align: middle; } .weather-now-card .weather-chart { margin-top: 12px; } .label-RTR{ display: flex; flex-direction: column; } .label-RTR-end { display: flex; flex-direction: column; align-items: flex-end; } /* Gempa Bumi Terkini – BMKG style card */ .quake-card { display: flex; flex-direction: column; gap: 8px; } .quake-badge-row { margin-bottom: 2px; } .quake-status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; background: transparent; border: 1px solid rgba(255, 183, 77, 0.6); color: #ffb74d; } .quake-main-title { font-size: 12px; font-weight: 500; color: #ffffff; } .quake-subtime { font-size: 11px; color: #b0bec5; } .quake-stats { display: flex; gap: 8px; margin-top: 4px; justify-content: space-between; padding-top: 15px; border-top: 1px solid rgb(220 220 220 / 20%); } .quake-stat .label { font-size: 10px; color: #90a4ae; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .quake-stat .value { font-weight: 600; color: #eceff1; display: block; align-items: center; gap: 4px; font-size: 14px; } .quake-mag-symbol { font-size: 18px; color: red; margin-right: 5px; } .quake-mag-number { color: rgb(255, 255, 255); font-size: 16px; } .unit-text { font-size: 0.8em; font-weight: 400; } .quake-depth { color: #8bc34a; font-size: 20px; } .quake-depth-note { display: block; font-weight: 400; font-size: 12px; line-height: 1.3; margin-top: 2px; font-size: 11px; color: #90a4ae; } .quake-coord { color: #ffca28; font-size: 11px; } .quake-rth-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; border-top: 1px solid rgb(255 255 255 / 20%); padding-top: 10px; } .quake-rth-row .label { color: #90a4ae; font-weight: 500; } .quake-rth-row .value { color: #8bc34a; font-weight: 600; } .quake-advice { font-size: 11px; line-height: 1.5; color: #cfd8dc; margin-top: 6px; } .quake-advice .label { font-weight: 600; color: var(--accent-blue); margin-right: 4px; } .quake-link { margin-top: 2px; font-size: 11px; color: var(--accent-blue); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; } .quake-link::after { content: '↗'; font-size: 10px; } /* BMKG Peringatan Cuaca – carousel slider (referensi bmkg.go.id) */ .bmkg-alerts-card .bmkg-alerts-body { display: flex; flex-direction: column; gap: 5px; font-weight: normal; overflow: hidden; flex: 1; min-height: 0; } .bmkg-alerts-carousel { display: flex; align-items: stretch; flex: 1; min-height: 0; } .bmkg-alerts-arrow { flex-shrink: 0; width: 32px; height: auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: rgba(255, 183, 77, 0.95); cursor: pointer; border-radius: 8px; transition: background 0.2s, color 0.2s; } .bmkg-alerts-arrow:hover { background: rgba(255, 183, 77, 0.12); color: #ffb74d; } .bmkg-alerts-arrow i { font-size: 22px; } .bmkg-alerts-viewport { flex: 1; min-width: 0; min-height: 0; position: relative; overflow: hidden; } .bmkg-alerts-slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; pointer-events: none; overflow-y: auto; } .bmkg-alerts-slide.active { opacity: 1; visibility: visible; pointer-events: auto; position: relative; height: auto; min-height: 80px; } .bmkg-alerts-icon { font-size: 20px; color: #ff9800; margin: 0 0 4px 0; display: block; flex-shrink: 0; } .incident-slide-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } .incident-type, .incident-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3; } .incident-type--fire { color: #ffccbc; background: rgba(239, 83, 80, 0.28); border: 1px solid rgba(239, 83, 80, 0.45); } /* Light mode: teks badge = warna solid dari border (rgb komponen border) */ :is(html, body).theme-light .incident-type--fire, body.map-basemap-street .incident-type--fire { color: #ff1844; } :is(html, body).theme-light .incident-type--warning, body.map-basemap-street .incident-type--warning { color: #f9a825; /* rgb(249, 168, 37) */ } :is(html, body).theme-light .incident-type--accident, body.map-basemap-street .incident-type--accident { color: #03a9f4; /* rgb(3, 169, 244) */ } :is(html, body).theme-light .incident-status--handling, body.map-basemap-street .incident-status--handling { color: #ff9800; /* rgb(255, 152, 0) */ } :is(html, body).theme-light .incident-status--done, body.map-basemap-street .incident-status--done { color: #4caf50; /* rgb(76, 175, 80) */ } .incident-type--warning { color: #fff9c4; background: rgba(249, 168, 37, 0.28); border: 1px solid rgba(249, 168, 37, 0.45); } .incident-type--accident { color: #b3e5fc; background: rgba(3, 169, 244, 0.22); border: 1px solid rgba(3, 169, 244, 0.4); } .incident-status--handling { color: #ffe082; background: rgba(255, 152, 0, 0.2); border: 1px solid rgba(255, 152, 0, 0.38); } .incident-status--done { color: #c8e6c9; background: rgba(76, 175, 80, 0.2); border: 1px solid rgba(76, 175, 80, 0.38); } .bmkg-alerts-meta { font-size: 12px; line-height: 1.35; color: #90a4ae; margin: 0; flex-shrink: 0; } .bmkg-alerts-title { font-size: 12px; font-weight: 700; color: #ffffff; margin: 0; line-height: 1.35; flex-shrink: 0; margin-top: 5px; } .bmkg-alerts-desc { font-size: 12px; line-height: 1.4; color: #ffffff; margin: 0; flex: 1; min-height: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(1.4em * 3); margin-top: 10px; } .bmkg-alerts-footer { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; } .bmkg-alerts-link { font-size: 11px; font-weight: 600; color: var(--accent-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .bmkg-alerts-link:hover { text-decoration: none; } .bmkg-alerts-link .ri-arrow-right-line { font-size: 12px; } .bmkg-alerts-dots { display: flex; justify-content: flex-start; gap: 6px; flex-wrap: wrap; } .bmkg-alerts-dot { width: 4px; height: 4px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.25); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .bmkg-alerts-dot:hover { background: rgba(100, 181, 246, 0.6); } .bmkg-alerts-dot.active { background: var(--accent-blue); transform: scale(1.2); } /* Kualitas Udara / Agenda Pembangunan – card dengan chart fixed-height */ .bmkg-airquality-card { width: 100%; } .bmkg-airquality-card .bmkg-airquality-body { display: flex; flex-direction: column; flex: 1; /* body mengisi sisa tinggi setelah header */ gap: 0; /* chart menempel ke footer, tanpa jarak ekstra */ font-weight: normal; overflow: hidden; } .aduan-hari-ini-body { overflow: hidden; } .aduan-hari-ini-wrap { width: 100%; min-width: 0; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .aduan-hari-ini-table { width: 100%; min-width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; font-size: 9px; line-height: 1.35; } .aduan-hari-ini-table col.col-pelapor { width: 32%; } .aduan-hari-ini-table col.col-detail { width: auto; } .aduan-hari-ini-table thead, .aduan-hari-ini-table thead tr { background: transparent; } .aduan-hari-ini-table thead th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(0, 185, 255); padding: 4px 5px 5px; border-bottom: 1px solid rgba(144, 164, 174, 0.28); background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .aduan-hari-ini-table tbody td { padding: 4px 5px; vertical-align: top; border-bottom: 1px solid rgba(144, 164, 174, 0.12); color: #90a4ae; font-size: 11px; } .aduan-hari-ini-table tbody tr:last-child td { border-bottom: none; } .aduan-pelapor { font-weight: 600; color: #90a4ae; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aduan-detail-cell { vertical-align: top; } .aduan-detail { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-height: calc(1.3em * 2); line-height: 1.3; font-size: 11px; color: #ffffff; white-space: normal; word-break: break-word; } :is(html, body).theme-light .aduan-hari-ini-table thead, body.map-basemap-street .aduan-hari-ini-table thead, :is(html, body).theme-light .aduan-hari-ini-table thead tr, body.map-basemap-street .aduan-hari-ini-table thead tr, :is(html, body).theme-light .aduan-hari-ini-table thead th, body.map-basemap-street .aduan-hari-ini-table thead th{ background-color: transparent; border-bottom-color: rgba(0, 0, 0, 0.1); } :is(html, body).theme-light .aduan-hari-ini-table thead th, body.map-basemap-street .aduan-hari-ini-table thead th{ color: var(--accent-blue); font-weight: 600; font-size: 11px; } :is(html, body).theme-light .aduan-hari-ini-table tbody td, body.map-basemap-street .aduan-hari-ini-table tbody td{ color: #777777; font-weight: 400; border-bottom-color: rgba(0, 0, 0, 0.08); } :is(html, body).theme-light .aduan-pelapor, body.map-basemap-street .aduan-pelapor{ color: #111111; } :is(html, body).theme-light .aduan-detail, body.map-basemap-street .aduan-detail{ color: #000000; font-weight: 500; } .bmkg-airquality-carousel { display: flex; align-items: stretch; } .bmkg-airquality-viewport { flex: 1; min-width: 0; position: relative; min-height: 100px; overflow: hidden; } .bmkg-airquality-slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; pointer-events: none; overflow-y: auto; } .bmkg-airquality-slide.active { opacity: 1; visibility: visible; pointer-events: auto; position: relative; height: auto; min-height: 80px; } .bmkg-airquality-slide-title { font-size: 12px; font-weight: 700; color: #ffffff; margin: 0 0 2px 0; line-height: 1.3; } .bmkg-airquality-meta { font-size: 10px; color: #90a4ae; margin: 0 0 6px 0; } .bmkg-airquality-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; } .bmkg-airquality-list li { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .bmkg-airquality-list li:last-child { border-bottom: none; } .aq-loc { flex: 1; min-width: 0; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .aq-val { flex-shrink: 0; color: #b0bec5; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; } .aq-cat { flex-shrink: 0; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; } .aq-baik { background: rgba(76, 175, 80, 0.25); color: #81c784; } .aq-sedang { background: rgba(255, 193, 7, 0.25); color: #ffca28; } .aq-tidak-sehat { background: rgba(255, 152, 0, 0.3); color: #ffb74d; } .aq-sangat-tidak-sehat { background: rgba(244, 67, 54, 0.3); color: #e57373; } .aq-berbahaya { background: rgba(183, 28, 28, 0.35); color: #ef5350; } .bmkg-airquality-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; } .bmkg-airquality-dots { display: flex; justify-content: flex-start; gap: 6px; flex-wrap: wrap; } .bmkg-airquality-dot { width: 4px; height: 4px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.25); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .bmkg-airquality-dot:hover { background: rgba(65, 209, 230, 0.5); } .bmkg-airquality-dot.active { background: rgba(65, 209, 230, 1); transform: scale(1.2); } /* Berita BMKG – minimal 3 berita (sumber: bmkg.go.id) */ .bmkg-berita-card .card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .bmkg-berita-header-link { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: red; text-decoration: none; } .bmkg-berita-header-link:hover { text-decoration: none; } .bmkg-berita-body { display: flex; flex-direction: column; gap: 0px; font-weight: normal; flex: 1; min-height: 0; overflow: hidden; } .ews-card-body { gap: 0; } .ews-status-wrap { width: 100%; min-width: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .ews-status-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 6px; } .ews-status-item { padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(144, 164, 174, 0.18); background: rgba(18, 24, 40, 0.55); } .ews-status-item--siaga1 { border-color: rgba(239, 83, 80, 0.2); background: rgba(239, 83, 80, 0.02); } .ews-status-item--siaga2 { border-color: rgba(255, 193, 7, 0.2); background: rgba(255, 152, 0, 0.02); } .ews-status-item--aman { border-color: rgba(76, 175, 80, 0.2); background: rgba(76, 175, 80, 0.02); } .ews-status-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px; } .ews-sektor { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: #eceff1; line-height: 1.3; flex: 1; min-width: 0; } .ews-badge { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 8px; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; padding: 3px 10px; border-radius: 999px; line-height: 1.3; } .ews-status-item--siaga1 .ews-badge { color: #ffab91; border: 1px solid rgba(239, 83, 80, 0.45); } .ews-status-item--siaga2 .ews-badge { color: #ffe082; border: 1px solid rgba(255, 193, 7, 0.35); } .ews-status-item--aman .ews-badge { color: #c8e6c9; border: 1px solid rgba(76, 175, 80, 0.38); } .ews-deskripsi { margin: 0; font-size: 12px; line-height: 1.4; color: #90a4ae; } :is(html, body).theme-light .ews-status-item, body.map-basemap-street .ews-status-item{ background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); } :is(html, body).theme-light .ews-sektor, body.map-basemap-street .ews-sektor{ color: #111111; } :is(html, body).theme-light .ews-deskripsi, body.map-basemap-street .ews-deskripsi{ color: #555555; } /* Light mode: SIAGA I merah, SIAGA II kuning — teks badge = warna border */ :is(html, body).theme-light .ews-status-item--siaga1, body.map-basemap-street .ews-status-item--siaga1 { border-color: rgba(239, 83, 80, 0.25); background: rgba(239, 83, 80, 0.04); } :is(html, body).theme-light .ews-status-item--siaga2, body.map-basemap-street .ews-status-item--siaga2 { border-color: rgba(255, 193, 7, 0.35); background: rgba(255, 193, 7, 0.06); } :is(html, body).theme-light .ews-status-item--siaga1 .ews-badge, body.map-basemap-street .ews-status-item--siaga1 .ews-badge { color: #ef5350; background: transparent; border: 1px solid rgba(239, 83, 80, 0.45); } :is(html, body).theme-light .ews-status-item--siaga2 .ews-badge, body.map-basemap-street .ews-status-item--siaga2 .ews-badge { color: #f9a825; background: transparent; border: 1px solid rgba(255, 193, 7, 0.35); } :is(html, body).theme-light .ews-status-item--aman .ews-badge, body.map-basemap-street .ews-status-item--aman .ews-badge { color: #4caf50; background: transparent; border: 1px solid rgba(76, 175, 80, 0.38); } .bmkg-berita-carousel { display: flex; align-items: stretch; } .bmkg-berita-viewport { flex: 1; min-width: 0; position: relative; min-height: 100px; overflow: hidden; } .bmkg-berita-slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; pointer-events: none; overflow-y: auto; } .bmkg-berita-slide.active { opacity: 1; visibility: visible; pointer-events: auto; position: relative; height: auto; min-height: 80px; } .bmkg-berita-item { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .bmkg-berita-item:last-child { padding-bottom: 0; border-bottom: none; } .bmkg-berita-title { font-size: 12px; font-weight: 700; line-height: 1.35; margin: 0 0 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bmkg-berita-title a { color: #ffffff; text-decoration: none; } .bmkg-berita-title a:hover { color: var(--accent-blue); text-decoration: none; } .bmkg-berita-meta { font-size: 10px; color: #90a4ae; margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 0.05em; } .bmkg-berita-desc { font-size: 11px; line-height: 1.45; color: #b0bec5; margin: 0 0 8px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bmkg-berita-link { font-size: 11px; font-weight: 600; color: var(--accent-blue); text-decoration: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; align-self: flex-end; } .bmkg-berita-link:hover { text-decoration: none; } .bmkg-berita-link .ri-arrow-right-line { font-size: 12px; } .bmkg-berita-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; } .bmkg-berita-dots { display: flex; justify-content: flex-start; gap: 6px; flex-wrap: wrap; } .bmkg-berita-dot { width: 4px; height: 4px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.25); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .bmkg-berita-dot:hover { background: rgba(100, 181, 246, 0.6); } .bmkg-berita-dot.active { background: rgba(100, 181, 246, 1); transform: scale(1.2); } .card { padding: 10px 15px; box-shadow: var(--glass-elev-shadow); align-items: center; border-radius: 15px; border: 1px solid rgb(108 108 108 / 12%); background: transparent; position: relative; z-index: 0; isolation: isolate; overflow: hidden; transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Blur layer — dark mode default */ .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(24 24 24 / 60%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 0; pointer-events: none; } .card > * { position: relative; z-index: 1; } /* Light mode card & text overrides */ :is(html, body).theme-light .card, body.map-basemap-street .card{ background: transparent; color: #111111; box-shadow: var(--glass-elev-shadow-light); } :is(html, body).theme-light .card::before, body.map-basemap-street .card::before{ background: rgb(255 255 255 / 30%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } :is(html, body).theme-light .card-header, body.map-basemap-street .card-header{ color: #000000; font-weight: 600; } :is(html, body).theme-light .card-header .title, body.map-basemap-street .card-header .title { color: #000000; font-weight: 700; letter-spacing: normal; } :is(html, body).theme-light .card-header .title i, body.map-basemap-street .card-header .title i { color: var(--accent-blue); } :is(html, body).theme-light .card-body, body.map-basemap-street .card-body{ color: #222222; } :is(html, body).theme-light .weather-now-label, body.map-basemap-street .weather-now-label{ color: #000000; font-weight: 600; } :is(html, body).theme-light .weather-now-icon, body.map-basemap-street .weather-now-icon{ color: #000000; } :is(html, body).theme-light .quake-mag-number, body.map-basemap-street .quake-mag-number{ color: var(--accent-blue); } :is(html, body).theme-light .quake-main-title, body.map-basemap-street .quake-main-title{ color: #777777 !important; } :is(html, body).theme-light .quake-stat .label, body.map-basemap-street .quake-stat .label{ color: #000000; font-weight: 600; } :is(html, body).theme-light .quake-depth-note, body.map-basemap-street .quake-depth-note{ color: #2aa20e; } :is(html, body).theme-light .quake-stat .value, body.map-basemap-street .quake-stat .value{ color: var(--accent-blue); } :is(html, body).theme-light .pill, body.map-basemap-street .pill{ background: rgb(255 255 255 / 20%); border-color: rgba(255, 255, 255, 0.5); } :is(html, body).theme-light .bottom-menu-pill, body.map-basemap-street .bottom-menu-pill{ background: transparent; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06); } :is(html, body).theme-light .bottom-menu-pill::before, body.map-basemap-street .bottom-menu-pill::before{ background: rgb(255 255 255 / 0%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } :is(html, body).theme-light .pill.visible, body.map-basemap-street .pill.visible{ background: #ffffff !important; color: #000000; font-weight: 600; } :is(html, body).theme-light .bottom-menu-button, body.map-basemap-street .bottom-menu-button{ background: rgb(255 255 255 / 100%); border-color: rgba(255, 255, 255, 0.5); } :is(html, body).theme-light .tool-button, body.map-basemap-street .tool-button{ background: rgb(255 255 255 / 100%); border-color: rgba(255, 255, 255, 0.5); color: #000000; } :is(html, body).theme-light .tool-button:hover, body.map-basemap-street .tool-button:hover, :is(html, body).theme-light .tool-button.active, body.map-basemap-street .tool-button.active{ color: #000000; } :is(html, body).theme-light .bottom-menu-button.active, body.map-basemap-street .bottom-menu-button.active{ color: #000000; } :is(html, body).theme-light .bottom-menu-button.active i, body.map-basemap-street .bottom-menu-button.active i{ color: var(--accent-blue); } :is(html, body).theme-light #base-layer-pills .pill.active, body.map-basemap-street #base-layer-pills .pill.active{ color: #000000 !important; } :is(html, body).theme-light #base-layer-pills .pill.active i, body.map-basemap-street #base-layer-pills .pill.active i{ color: var(--accent-blue) !important; } :is(html, body).theme-light .velocity-div, body.map-basemap-street .velocity-div{ color: #111111; } :is(html, body).theme-light .bottom-menu-thumbnail, body.map-basemap-street .bottom-menu-thumbnail{ height: 35px; width: 35px; } :is(html, body).theme-light .bmkg-alerts-dot, body.map-basemap-street .bmkg-alerts-dot{ background: rgb(118 118 118 / 30%); } :is(html, body).theme-light .bmkg-alerts-dot.active, body.map-basemap-street .bmkg-alerts-dot.active{ background: var(--accent-blue); } :is(html, body).theme-light .top-center-logo, body.map-basemap-street .top-center-logo{ background: rgb(255 255 255 / 50%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, 0.7); } :is(html, body).theme-light .logo img, body.map-basemap-street .logo img{ filter: brightness(0) drop-shadow(0 2px 6px rgba(15, 23, 42, 0.1)); } :is(html, body).theme-light .weather-now-row, body.map-basemap-street .weather-now-row{ border-bottom: 1px solid rgb(134 134 134 / 20%); } :is(html, body).theme-light .quake-stats, body.map-basemap-street .quake-stats{ padding-top: 15px; border-top: 1px solid rgb(134 134 134 / 20%); } :is(html, body).theme-light .stat-card, body.map-basemap-street .stat-card{ background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #111111; } :is(html, body).theme-light .stat-card .label, body.map-basemap-street .stat-card .label{ color: #000000; font-weight: 600; } :is(html, body).theme-light .stat-card .value + .label, body.map-basemap-street .stat-card .value + .label{ color: var(--accent-blue); } :is(html, body).theme-light .stat-card .unit, body.map-basemap-street .stat-card .unit{ color: #000000; font-weight: 600; } :is(html, body).theme-light .stat-card .value, body.map-basemap-street .stat-card .value{ color: var(--accent-blue); } /* Text that was pure/near-white in dark mode */ :is(html, body).theme-light .label-top, body.map-basemap-street .label-top, :is(html, body).theme-light .weather-now-row-value, body.map-basemap-street .weather-now-row-value, :is(html, body).theme-light .bmkg-alerts-title, body.map-basemap-street .bmkg-alerts-title, :is(html, body).theme-light .bmkg-airquality-slide-title, body.map-basemap-street .bmkg-airquality-slide-title, :is(html, body).theme-light .bmkg-berita-title, body.map-basemap-street .bmkg-berita-title, :is(html, body).theme-light .bmkg-berita-title a, body.map-basemap-street .bmkg-berita-title a, :is(html, body).theme-light .quake-main-title, body.map-basemap-street .quake-main-title{ color: #111111; } :is(html, body).theme-light .bmkg-alerts-desc, body.map-basemap-street .bmkg-alerts-desc { color: #000000; font-weight: 500; } :is(html, body).theme-light .label-bottom, body.map-basemap-street .label-bottom, :is(html, body).theme-light .weather-now-condition, body.map-basemap-street .weather-now-condition, :is(html, body).theme-light .bmkg-alerts-meta, body.map-basemap-street .bmkg-alerts-meta, :is(html, body).theme-light .bmkg-airquality-meta, body.map-basemap-street .bmkg-airquality-meta, :is(html, body).theme-light .bmkg-berita-meta, body.map-basemap-street .bmkg-berita-meta, :is(html, body).theme-light .bmkg-berita-desc, body.map-basemap-street .bmkg-berita-desc, :is(html, body).theme-light .quake-advice, body.map-basemap-street .quake-advice{ color: var(--accent-blue); } /* .card { background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.12), transparent 55%); background-color: rgba(0, 0, 0, 0.78); border-radius: 30px; padding: 10px 20px !important; font-weight: 600; border: 1px solid rgb(255 255 255 / 40%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65); } */ .card-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: 0.06em !important; color: hsl(0deg 0% 100% / 60%); gap: 20px; padding-bottom: 15px; } .card-header .title { font-size: 13px; display: inline-flex; gap: 10px !important; align-items: center; font-weight: 600; color: #ffffff; } .card-header .title i { font-size: 13px !important; color: #ffffff; } .card-header .time { font-size: 10px !important; color: red; text-align: right; display: inline-flex; align-items: center; gap: 6px !important; border: 0; padding: 0; } /* Particle panel: Live badge (clickable, mute when disabled) */ #particle-panel .card-header .time { cursor: pointer; } #particle-panel .card-header .time.live-disabled { color: #888888; border-color: #888888; } #particle-panel .card-header .time.live-disabled:hover { color: red; border-color: red; } .card-body { font-size: 12px; line-height: 1.4; color: #eceff1; } .layer-list { margin: 4px 0 0 0; padding: 0; list-style: none; } .layer-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 12px; cursor: pointer; } .layer-item-left { display: flex; align-items: center; gap: 6px; } .layer-item-left i { font-size: 13px; width: 16px; text-align: center; } .layer-item .badge { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: rgba(176, 190, 197, 0.15); /* Light grey background */ color: #b0bec5; /* Light grey text */ border: 1px solid rgba(176, 190, 197, 0.3); /* Grey border */ min-width: 30px; text-align: center; } .layer-item.active .badge { background: rgba(129, 212, 250, 0.4); border-color: rgba(129, 212, 250, 0.9); } /* Panel kiri bawah (search, legenda) */ .left-panel-bottom { position: absolute; left: 12px; bottom: 52px; display: flex; flex-direction: column; gap: 8px; z-index: 20; width: 300px; } .right-panel-bottom { position: absolute; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 20; max-width: 300px; } .search-box { background: rgba(0, 0, 0, 0.78); border-radius: 999px; border: 1px solid #3aced1; padding: 10px 20px; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(10px); max-width: 300px; } .search-box i { color: var(--accent-blue); font-size: 13px; } .search-box input { background: transparent; border: none; outline: none; color: #eceff1; font-size: 13px; width: 100%; } .legend-box { background: rgba(0, 0, 0, 0.78); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); padding: 8px 10px; font-size: 11px; color: #cfd8dc; backdrop-filter: blur(10px); /* Initially hidden, will be shown if an overlay is active */ display: none; } .legend-box.active { display: block; } .legend-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #b0bec5; } .legend-header i { color: #ffcc80; font-size: 12px; } /* Light mode overrides for legend text */ :is(html, body).theme-light .legend-box, body.map-basemap-street .legend-box{ color: #000000; } :is(html, body).theme-light .legend-header, body.map-basemap-street .legend-header{ color: #000000; } .legend-gradient { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #0d47a1, #42a5f5, #aed581, #ffeb3b, #ff9800, #f44336); margin-bottom: 4px; } /* Bottom panel – satu tingkat dengan .left-panel dan .right-panels-wrapper */ .bottom-panel { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); min-width: 650px; max-width: calc(100% - 24px); z-index: 40; /* Above vertical menus (z-index: 21) so tooltips sit on top */ display: flex; justify-content: center; } /* Toolbar kiri bawah (zoom, lokasi, penggaris, dll.) */ .tool-column { position: absolute; bottom: 50px; left: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 21; } .tool-button { width: 30px !important; height: 30px !important; justify-content: center; color: #aeaeae; display: inline-flex; align-items: center; gap: 12px !important; border-radius: 999px; font-size: 10px !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: 0.06em !important; border: 1px solid rgba(255, 255, 255, 0.12); background: rgb(24 24 24 / 60%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; user-select: none; white-space: nowrap; } /* Bottom panel menu button */ .bottom-menu-button { position: relative; width: 40px !important; height: 40px !important; justify-content: center; color: #aeaeae; display: inline-flex; align-items: center; gap: 15px !important; border-radius: 999px; font-size: 10px !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: 0.06em !important; background: transparent; border: 1px solid rgb(255 255 255 / 20%); cursor: pointer; user-select: none; white-space: nowrap; z-index: 40; /* Ensure tooltips render above vertical menus (z-index ~21) */ } .bottom-menu-button.active { border-color: #ffffff; color: #ffffff; } .bottom-menu-button.active i { color: var(--accent-blue); } .bottom-menu-button:hover{ border: 1px solid #ffffff; } /* Bottom menu tooltips (centered above each button) */ .bottom-menu-button[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%) translateY(6px); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgb(217 217 217 / 90%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #000000; font-size: 11px; font-weight: 600; padding: 10px 20px; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: var(--glass-elev-shadow); transition: opacity 0.16s ease-out, transform 0.16s ease-out; z-index: 30; } :is(html, body).theme-light .bottom-menu-button[data-tooltip]::after, body.map-basemap-street .bottom-menu-button[data-tooltip]::after{ box-shadow: var(--glass-elev-shadow-light); } .bottom-menu-button[data-tooltip]::before { content: ""; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); height: 5px; width: 5px; border-radius: 20px; background: rgba(255, 255, 255, 1); border-radius: 999px; opacity: 0; transition: opacity 0.16s ease-out; pointer-events: none; z-index: 29; } .bottom-menu-button[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .bottom-menu-button[data-tooltip]:hover::before { opacity: 1; } .bottom-menu-thumbnail { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .tool-button:hover { border: 1px solid var(--accent-blue); color: #ffffff; } .tool-button.active { border: 1px solid #3aced1; /* Active border color requested by user */ color: #ffffff; background: rgba(0, 0, 0, 0.7); /* Slightly darker background when active */ } /* Target the status display container (velocity-div) */ .velocity-div { /* This is the element containing Wind Direction and Speed */ position: absolute !important; bottom: 20px; /* Position it above the status bar */ right: 20px; /* Aligned with the right edge */ background: rgba(0, 0, 0, 0.85); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); padding: 8px 12px; border-radius: 999px; font-size: 12px; z-index: 20; } .tool-button.small { font-size: 12px; height: 26px; width: 30px; } .tool-separator { height: 1px; margin: 2px 2px; background: rgba(255, 255, 255, 0.12); } /* Status bar bawah kanan */ .status-bar { position: absolute; left: 20px; bottom: 20px; display: flex; font-weight: 600; gap: 10px !important; align-items: center; font-size: 12px !important; line-height: 1 !important; z-index: 20; color: #d0d7e2; /* default: cocok untuk dark */ text-shadow: 0 0 6px rgba(0, 0, 0, 0); } :is(html, body).theme-light .status-bar, body.map-basemap-street .status-bar{ color: #000000; } .status-bar .label { display: inline-flex; align-items: center; gap: 8px !important; } .status-bar .label i { font-size: 11px !important; color: var(--accent-blue); } /* Responsive simplification */ @media (max-width: 768px) { .left-panel { width: 100%; max-width: 280px; } .right-panels-wrapper { width: 210px; } .right-panel { width: 100%; } .tool-column { right: 222px; /* Adjust for smaller right panel */ } .bottom-panel { min-width: 320px; } .logo { font-size: 15px; } } /* NEW Bottom Stats Cards (Requested) */ .bottom-stats-container { position: absolute; bottom: 40px; /* Above timeline which is at bottom: 20px */ left: 50%; transform: translateX(-50%); display: flex; gap: 10px; /* Reduced gap slightly to fit 7 cards better */ z-index: 20; /* Logic for exactly 7 cards visible */ /* Card width fixed: 130px Gap: 10px Total width = (130 * 7) + (10 * 6) = 910 + 60 = 970px Added slight buffer (+2px) to prevent sub-pixel rounding issues cutting off edge */ max-width: 85%; /* Responsive cap */ flex-wrap: nowrap; justify-content: flex-start; /* Cards align left, allowing overflow for scroll */ /* overflow-x:hidden + overflow-y:visible → browser memaksa clip vertikal; clip horizontal di .bottom-stats-scroll */ overflow: visible; pointer-events: auto; padding: 16px 12px 40px; /* ruang bawah untuk box-shadow (~28px blur + offset) */ /* Initially hidden, shown when flood layer is active or always shown if general stats */ display: none; } /* Scroll viewport — animasi via scrollLeft; fade tepi via mask (blur hanya di .stat-card) */ .bottom-stats-scroll { --stats-edge-fade: 112px; position: relative; z-index: 1; flex: 1; min-width: 0; overflow-x: auto; overflow-y: visible; padding: 10px 16px 22px; scrollbar-width: none; -ms-overflow-style: none; transform: translateZ(0); /* Fade kontinu kiri/kanan — celah antar kartu tidak ikut blur */ -webkit-mask-image: linear-gradient( to right, transparent 0, rgb(0 0 0 / 6%) calc(var(--stats-edge-fade) * 0.12), rgb(0 0 0 / 22%) calc(var(--stats-edge-fade) * 0.28), rgb(0 0 0 / 48%) calc(var(--stats-edge-fade) * 0.44), rgb(0 0 0 / 72%) calc(var(--stats-edge-fade) * 0.58), rgb(0 0 0 / 90%) calc(var(--stats-edge-fade) * 0.72), #000 var(--stats-edge-fade), #000 calc(100% - var(--stats-edge-fade)), rgb(0 0 0 / 90%) calc(100% - var(--stats-edge-fade) * 0.72), rgb(0 0 0 / 72%) calc(100% - var(--stats-edge-fade) * 0.58), rgb(0 0 0 / 48%) calc(100% - var(--stats-edge-fade) * 0.44), rgb(0 0 0 / 22%) calc(100% - var(--stats-edge-fade) * 0.28), rgb(0 0 0 / 6%) calc(100% - var(--stats-edge-fade) * 0.12), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, rgb(0 0 0 / 6%) calc(var(--stats-edge-fade) * 0.12), rgb(0 0 0 / 22%) calc(var(--stats-edge-fade) * 0.28), rgb(0 0 0 / 48%) calc(var(--stats-edge-fade) * 0.44), rgb(0 0 0 / 72%) calc(var(--stats-edge-fade) * 0.58), rgb(0 0 0 / 90%) calc(var(--stats-edge-fade) * 0.72), #000 var(--stats-edge-fade), #000 calc(100% - var(--stats-edge-fade)), rgb(0 0 0 / 90%) calc(100% - var(--stats-edge-fade) * 0.72), rgb(0 0 0 / 72%) calc(100% - var(--stats-edge-fade) * 0.58), rgb(0 0 0 / 48%) calc(100% - var(--stats-edge-fade) * 0.44), rgb(0 0 0 / 22%) calc(100% - var(--stats-edge-fade) * 0.28), rgb(0 0 0 / 6%) calc(100% - var(--stats-edge-fade) * 0.12), transparent 100% ); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Satellite: canvas MapTiler repaint lebih sering — perkuat layer stat di atas peta */ body.map-basemap-satellite .bottom-stats-container, body.map-basemap-satellite-maptiler .bottom-stats-container { transform: translateX(-50%) translateZ(0); } .bottom-stats-scroll::-webkit-scrollbar { display: none; height: 0; } .ticker-wrapper { position: relative; display: flex; gap: 10px; width: max-content; padding: 6px 6px 14px; } /* Custom scrollbar for bottom stats */ .bottom-stats-container::-webkit-scrollbar { height: 0px; } .bottom-stats-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 4px; } .bottom-stats-container::-webkit-scrollbar-thumb { background: rgba(65, 209, 230, 0.5); border-radius: 4px; } .bottom-stats-container.active { display: flex; } .stat-card { pointer-events: auto; position: relative; isolation: isolate; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; border-radius: 12px; padding: 10px 10px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Fixed Dimensions for strict grid calculation */ min-width: 145px !important; min-height: 75px !important; flex-shrink: 0; margin-bottom: 4px; transition: border-color 0.2s; overflow: visible; box-shadow: var(--glass-elev-shadow); } /* Frosted glass — portal fixed (JS), di luar mask scroll; kartu hanya teks */ .stat-glass-portal-layer { position: fixed; inset: 0; pointer-events: none; z-index: 19; overflow: visible; } .stat-glass-portal { position: fixed; box-sizing: border-box; border-radius: 12px; background-color: rgb(24 24 24 / 30%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateZ(0); pointer-events: none; } .stat-glass-portal-layer.theme-light .stat-glass-portal { background-color: rgb(255 255 255 / 30%); } .stat-card::before { display: none; } .stat-card > * { position: relative; z-index: 1; } :is(html, body).theme-light .stat-card::before, body.map-basemap-street .stat-card::before{ background-color: rgb(255 255 255 / 30%); } :is(html, body).theme-light .stat-card, body.map-basemap-street .stat-card{ box-shadow: var(--glass-elev-shadow-light); } .stat-card:hover { border-color: var(--accent-blue); } .stat-card .value { font-size: 22px !important; font-weight: 500; margin: 5px !important; color: var(--accent-blue); text-align: center; width: 100%; } .stat-card .label { font-size: 9px !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: 0.05em !important; color: #b0bec5; white-space: nowrap; text-align: center; width: 100%; } /* UNIT SIAGA — biru seperti .value, opacity 50% */ .stat-card .value + .label { color: var(--accent-blue); } .stat-card .unit { font-size: 11px !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: 0.05em !important; color: #ffffff; font-weight: 600; white-space: nowrap; text-align: center; width: 100%; margin-top: 5px; } /* Color variations for statistics */ .stat-card.red .value { color: #FF4136; text-shadow: 0 0 10px rgba(255, 65, 54, 0.3); } .stat-card.orange .value { color: #FF851B; text-shadow: 0 0 10px rgba(255, 133, 27, 0.3); } .stat-card.blue .value { color: var(--accent-blue); text-shadow: 0 0 10px rgba(65, 209, 230, 0.3); } .stat-card.yellow .value { color: #FFDC00; text-shadow: 0 0 10px rgba(255, 220, 0, 0.3); } .stat-card.purple .value { color: #B10DC9; text-shadow: 0 0 10px rgba(177, 13, 201, 0.3); } /* ========================================= AI CHAT & SLIDE PANEL STYLES ========================================= */ .chat-input-container { width: 100%; height: 100%; position: relative; display: flex; align-items: center; border: 1px solid transparent; border-radius: 999px; padding: 0px; background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)) padding-box, linear-gradient(var(--chat-input-angle), #e6414100, #00bcd400, #0097a700, #00838f00, var(--accent-blue)) border-box; animation: chat-input-rotate 8s linear infinite; } .chat-input-container i { position: absolute; left: 20px; color: var(--accent-blue); font-size: 14px; animation: pulse-glow 2s infinite; z-index: 2; } @keyframes pulse-glow { 0% { text-shadow: 0 0 5px rgba(65, 209, 230, 0.5); } 50% { text-shadow: 0 0 15px rgba(65, 209, 230, 0.8), 0 0 5px rgba(255, 255, 255, 0.5); } 100% { text-shadow: 0 0 5px rgba(65, 209, 230, 0.5); } } #chat-input { width: 100%; height: 100%; outline: none; transition: all 0.3s ease; font-family: inherit; border-radius: 999px; padding: 20px 25px; padding-left: 50px; display: flex; align-items: center; gap: 15px; font-size: 13px; color: #cfd8dc; position: relative; z-index: 1; background: transparent; border: none; border: 1px solid #7d7d7d; } /* Send Button */ .chat-send-btn { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: none; background: transparent; border-radius: 50%; color: var(--accent-blue); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; z-index: 2; } .chat-send-btn:hover { color: #fff; } .chat-send-btn i { font-size: 20px; animation: none; position: static; } #chat-input:focus { background: rgba(0, 0, 0, 0.7); /* box-shadow: 0 0 10px rgba(65, 209, 230, 0.5); */ } #chat-input::placeholder { color: #90a4ae; font-style: italic; } /* Chat Slide Panel */ #chat-panel { position: absolute; bottom: 0; /* Start hidden below viewport logic handled by transform */ left: 50%; transform: translate(-50%, 120%); /* Initially off-screen bottom */ width: 50%; max-width: 90%; max-height: 70vh; border-radius: 20px; z-index: 1000; display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; background: rgb(0 0 0 / 65%); backdrop-filter: blur(20px); box-shadow: 0 0 10px rgba(65, 209, 230, 0.2); border: 1px solid rgba(65, 209, 230, 0.3); } #chat-panel.active { transform: translate(-50%, 0); /* Slide up: tampil persis di atas area bawah */ bottom: 120px; /* Di atas bottom panel (pill menu) */ } .chat-header { padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; } .chat-title { font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .chat-title i { font-size: 16px; color: var(--accent-blue); } .chat-header .close-btn { background: none; border: none; color: #90a4ae; cursor: pointer; font-size: 16px; transition: color 0.2s; padding: 5px; } .chat-header .close-btn:hover { color: #fff; } .chat-body { padding: 20px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: #bebebe; min-height: 90px; padding-top: 0; } /* Form pertanyaan AI di dalam chat panel */ .chat-panel-input-wrap { flex-shrink: 0; padding: 16px 20px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.1); } .chat-panel-input-wrap .chat-input-container { height: 48px; max-width: 100%; } .chat-body p { margin-top: 0; } /* Markdown-like styling for AI response */ .chat-body strong { color: #fff; font-weight: 600; } .chat-body em { color: var(--accent-blue); font-style: normal; } .chat-body ul { padding-left: 20px; margin-bottom: 10px; } .chat-body li { margin-bottom: 5px; } .chat-body h3 { font-size: 16px; color: var(--accent-blue); margin: 10px 0 5px; } /* Professional Report Title (H3 only) */ .chat-body .ai-report-title { color: var(--accent-blue); font-weight: 700; font-size: 18px; text-transform: uppercase; display: block; margin: 0px 0 20px 0; padding-bottom: 20px; border-bottom: 1px solid rgba(65, 209, 230, 0.5); letter-spacing: 0.5px; } /* Subsection Headers (Bold, not #) */ .chat-body .ai-subsection-header { color: var(--accent-blue); font-weight: 700; font-size: 17px; display: block; margin: 25px 0 12px 0; letter-spacing: 0.3px; } /* Horizontal Separator (---) */ .chat-body .ai-separator { border: none; border-top: 1px solid rgba(65, 209, 230, 0.3); margin: 25px 0; width: 100%; } /* Heading hierarchy for AI responses - Academic/Professional Style */ .chat-body .ai-h1 { color: var(--accent-blue); font-weight: 700; font-size: 20px; text-transform: uppercase; display: block; margin: 30px 0 15px 0; padding-bottom: 10px; border-bottom: 3px solid rgba(65, 209, 230, 0.5); letter-spacing: 0.5px; } .chat-body .ai-h2 { color: var(--accent-blue); font-weight: 600; font-size: 16px; display: block; margin: 20px 0 10px 0; padding-left: 0; letter-spacing: 0.3px; } /* Blockquote styling for important statements */ .chat-body .ai-blockquote { background: rgba(65, 209, 230, 0.1); border-left: 4px solid var(--accent-blue); padding: 12px 16px; margin: 15px 0; border-radius: 4px; font-style: italic; color: #eceff1; line-height: 1.6; } /* Bullet points styling - Academic Style */ .chat-body .ai-bullet-list { margin: 12px 0; padding-left: 24px; } .chat-body .ai-bullet-item { margin-bottom: 12px; line-height: 1.8; color: #eceff1; padding-left: 8px; text-indent: -8px; list-style-type: disc; margin-left: 20px; } /* Ensure double spacing between list items */ .chat-body .ai-bullet-item + .ai-bullet-item { margin-top: 8px; } /* Numbered list items */ .chat-body .ai-numbered-item { margin: 16px 0; line-height: 1.8; color: #eceff1; } .chat-body .ai-numbered-item .number { font-weight: 600; color: var(--accent-blue); margin-right: 8px; } /* Academic paragraph styling */ .chat-body .ai-paragraph { margin: 12px 0; line-height: 1.8; color: #eceff1; text-align: justify; text-justify: inter-word; } /* Contextual narrative styling - for additional context in short answers */ .chat-body .ai-contextual-narrative { margin: 20px 0; padding: 15px 20px; background: rgba(65, 209, 230, 0.08); border-left: 3px solid rgba(65, 209, 230, 0.4); border-radius: 4px; line-height: 1.8; color: #eceff1; font-style: normal; text-align: justify; text-justify: inter-word; } /* Numbered list styling for AI responses generated via formatAIResponse */ .chat-body .ai-number-line { display: block; margin: 15px 5px; font-size: 16px; } .chat-body .strong { color: #ffffff; font-weight: 600; } /* Simple Markdown-style table for AI responses */ .chat-body .ai-table-wrapper { overflow-x: auto; margin: 20px 0; border-radius: 8px; border: 1px solid rgba(65, 209, 230, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); } .chat-body .ai-table { width: 100%; border-collapse: collapse; background: rgba(10, 15, 30, 0.8); font-size: 13px; min-width: 600px; /* Ensure table doesn't get too squashed */ } .chat-body .ai-table thead { background: linear-gradient(180deg, rgba(65, 209, 230, 0.15), rgba(65, 209, 230, 0.05)); border-bottom: 2px solid rgba(65, 209, 230, 0.3); } .chat-body .ai-table th { padding: 14px 12px; text-align: left; border-right: 1px solid rgba(255, 255, 255, 0.05); color: var(--accent-blue); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle; } .chat-body .ai-table th:last-child { border-right: none; } .chat-body .ai-table th.center { text-align: center; } .chat-body .ai-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.2s; } .chat-body .ai-table tbody tr:last-child { border-bottom: none; } .chat-body .ai-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .chat-body .ai-table tbody tr:hover { background: rgba(65, 209, 230, 0.1); } .chat-body .ai-table td { padding: 12px 12px; border-right: 1px solid rgba(255, 255, 255, 0.05); color: #eceff1; line-height: 1.5; vertical-align: middle; } .chat-body .ai-table td:last-child { border-right: none; } .chat-body .ai-table td.center { text-align: center; } .chat-body .ai-table td.right { text-align: right; } /* Specific column sizing for standard report table */ .chat-body .ai-table th:nth-child(1), .chat-body .ai-table td:nth-child(1) { width: 40px; /* No column */ text-align: center; } .chat-body .ai-table th:nth-child(2), .chat-body .ai-table td:nth-child(2) { min-width: 120px; /* Kabupaten column */ font-weight: 600; color: #fff; } /* Typing Animation */ .typing-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 10px; } .typing-indicator span { width: 4px; height: 4px; background: var(--accent-blue); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; } .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* Footer branding */ .footer-branding { /* Posisi mengikuti kanvas peta (bukan viewport luar) */ position: absolute; bottom: 20px; right: 20px; color: #d0d7e2; /* default: cocok untuk dark */ font-size: 12px; font-weight: 600; z-index: 1000; pointer-events: none; user-select: none; } :is(html, body).theme-light .footer-branding, body.map-basemap-street .footer-branding{ color: #000000; } .footer-branding span { opacity: 0.9; } /* ======================================== AI RESPONSE STYLING (from arafura-ai) ======================================== */ /* Report Title (###) */ .chat-body .ai-report-title { color: var(--accent-blue); font-weight: 700; font-size: 18px; text-transform: uppercase; display: block; margin: 0px 0 20px 0; padding-bottom: 20px; border-bottom: 1px solid rgba(65, 209, 230, 0.5); letter-spacing: 0.5px; } /* Subsection Headers (Bold, not #) */ .chat-body .ai-subsection-header { color: var(--accent-blue); font-weight: 700; font-size: 17px; display: block; margin: 25px 0 12px 0; letter-spacing: 0.3px; } /* Horizontal Separator (---) */ .chat-body .ai-separator { border: none; border-top: 1px solid rgba(65, 209, 230, 0.3); margin: 25px 0; width: 100%; } /* Blockquote styling for important statements */ .chat-body .ai-blockquote { background: rgba(65, 209, 230, 0.1); border-left: 4px solid var(--accent-blue); padding: 12px 16px; margin: 15px 0; border-radius: 4px; font-style: italic; color: #eceff1; line-height: 1.6; } /* Academic paragraph styling */ .chat-body .ai-paragraph { margin: 12px 0; line-height: 1.8; color: #eceff1; text-align: justify; text-justify: inter-word; } .chat-body .strong { color: #ffffff; font-weight: 600; } /* Simple Markdown-style table for AI responses */ .chat-body .ai-table-wrapper { overflow-x: auto; margin: 20px 0; border-radius: 8px; border: 1px solid rgba(65, 209, 230, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); } .chat-body .ai-table { width: 100%; border-collapse: collapse; background: rgba(10, 15, 30, 0.8); font-size: 13px; min-width: 600px; } .chat-body .ai-table thead { background: linear-gradient(180deg, rgba(65, 209, 230, 0.15), rgba(65, 209, 230, 0.05)); border-bottom: 2px solid rgba(65, 209, 230, 0.3); } .chat-body .ai-table th { padding: 14px 12px; text-align: left; border-right: 1px solid rgba(255, 255, 255, 0.05); color: var(--accent-blue); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle; } .chat-body .ai-table th:last-child { border-right: none; } .chat-body .ai-table th.center { text-align: center; } .chat-body .ai-table th.left { text-align: left; } .chat-body .ai-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.2s; } .chat-body .ai-table tbody tr:last-child { border-bottom: none; } .chat-body .ai-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .chat-body .ai-table tbody tr:hover { background: rgba(65, 209, 230, 0.1); } .chat-body .ai-table td { padding: 12px 12px; border-right: 1px solid rgba(255, 255, 255, 0.05); color: #eceff1; line-height: 1.5; vertical-align: middle; } .chat-body .ai-table td:last-child { border-right: none; } .chat-body .ai-table td.center { text-align: center; } .chat-body .ai-table td.left { text-align: left; } .chat-body .ai-table td.right { text-align: right; } /* Specific column sizing for standard report table */ .chat-body .ai-table th:nth-child(1), .chat-body .ai-table td:nth-child(1) { width: 40px; text-align: center; } .chat-body .ai-table th:nth-child(2), .chat-body .ai-table td:nth-child(2) { min-width: 120px; font-weight: 600; color: #fff; } /* Typing Animation */ .typing-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 10px; } .typing-indicator span { width: 4px; height: 4px; background: var(--accent-blue); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; } .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .pb-10{ padding-bottom: 10px; }