/* offices map (design: prokuroriin-hayg.php, map-v4) */ /* ЗУРАГ — viewBox 100:41.3 тул өндөр автоматаар. Өнгө бүгд токеноор. */ #block-offices .pm-map { /* `100%` — хүртээмжийн 130%-д 68rem (=1414px) контейнерээс өргөн болж зураг 2 тийш ~21px гарч байсан (2026-09-28). 100%-д 68rem < эцэг тул өөрчлөлтгүй. */ width: min(92vw, 68rem, 100%); } #block-offices .aimag { fill: rgba(var(--bs-body-color-rgb), .07); stroke: var(--bs-body-bg); stroke-width: .18; stroke-linejoin: round; transition: fill .4s ease-in-out; } /* Тухайн хамрах хүрээнд газартай аймаг — JS `has-office` онооно */ #block-offices .aimag.has-office { fill: rgba(var(--bs-primary-rgb), .5); cursor: pointer; } #block-offices .aimag.has-office.is-active { fill: var(--bs-primary); } #block-offices .aimag-label { fill: rgba(var(--bs-body-color-rgb), .45); font-size: .85px; font-weight: 600; letter-spacing: .05px; text-anchor: middle; text-transform: uppercase; pointer-events: none; transition: fill .4s ease-in-out; } #block-offices .aimag-label-sm { font-size: .6px; } #block-offices .aimag-label.is-active { fill: var(--bs-body-bg); } #block-offices .compass-ring { fill: none; stroke: rgba(var(--bs-body-color-rgb), .2); stroke-width: .12; } #block-offices .compass-north { fill: var(--bs-primary); } #block-offices .compass-south { fill: rgba(var(--bs-body-color-rgb), .2); } #block-offices .compass-n { fill: rgba(var(--bs-body-color-rgb), .45); font-size: 1px; font-weight: 600; text-anchor: middle; } @media (max-width: 767.98px) { /* жижиг дэлгэцэд аймгийн нэр уншигдахааргүй жижгэрдэг тул нуана */ #block-offices .aimag-label { display: none; } } /* КАРТ — зураг дээр хөвнө. Аймгийн ХАЖУУД, босоогоор голлоно (дээр/доор тавибал олон газартай аймгийн карт хайрцгаас халина). */ #block-offices .pm-float { pointer-events: auto; /* эцэг `.pm-cards` нь pe-none — картын сайтын холбоос дарагдах ёстой */ width: 19rem; max-width: 80vw; opacity: 0; visibility: hidden; /* ⭐ left/top нь transition-тэй тул аймаг солиход карт АНИВЧИХГҮЙ, гулсана (mcsi.mn-ий зан). Агуулга нь солигдох мөчид богино cross-fade хийнэ. */ transition: left .4s ease-in-out, top .4s ease-in-out, opacity .4s ease-in-out, visibility .4s ease-in-out; } #block-offices .pm-float.is-active { opacity: 1; visibility: visible; } /* Картын агуулга — авсаархан: гарчиг .875rem, мэдээлэл .75rem */ /* Зай нэг давхар: extra-гийн var-2 нь item-details-д 1.5rem өгдөг тул картын padding 0 */ #block-offices .pm-float .card-item { padding: 0; } #block-offices .pm-float .item-details { gap: .5rem; padding: .875rem 1rem; } #block-offices .pm-float .item-title { font-size: .875rem; line-height: 1.35; } #block-offices .pm-float .item-spec-list { gap: .125rem; margin-bottom: .25rem; } #block-offices .pm-float .item-spec-list > li { flex-wrap: nowrap; font-size: .75rem; line-height: 1.4; } #block-offices .pm-float .item-spec-list > li > span:first-child { flex: 0 0 3.75rem; } #block-offices .pm-float .item-spec-list > li > span:last-child { min-width: 0; font-weight: 500; overflow-wrap: anywhere; } #block-offices .pm-float .item-spec-list a { color: var(--bs-primary); text-decoration: none; } #block-offices .pm-float .item-spec-list a:hover { text-decoration: underline; } /* Зүүн хагасын аймаг → карт БАРУУН талд, баруун хагас → ЗҮҮН талд */ #block-offices .pm-float[data-side="right"] { transform: translate(1rem, -50%); } #block-offices .pm-float[data-side="left"] { transform: translate(calc(-100% - 1rem), -50%); } #block-offices .pm-hint { transition: opacity .4s ease-in-out; } #block-offices .pm-stage.has-active .pm-hint { opacity: 0; } /* Мобайл/таблет — hover байхгүй тул картууд зургийн ДООР, нэг нь л харагдана. ⚠️ `!important` заавал: markup дээрх `position-absolute` / `h-100` утилитууд өөрсдөө `!important`-той тул ID-тай селектор ч дардаггүй. */ @media (max-width: 991.98px) { #block-offices .pm-cards { position: static !important; height: auto !important; } #block-offices .pm-float { position: static !important; width: 100%; max-width: none; transform: none !important; transition: opacity .4s ease-in-out; display: none; } #block-offices .pm-float.is-active { display: block; } /* карт `.pm-map`-ийн ДАРАА (JS зөөнө) — зургийн хайрцаг өндөрсөхгүй, pin-үүд байрандаа */ #block-offices .pm-map + .pm-float { margin-top: 1rem; font-size: .9rem; } } /* УЛААНБААТАРЫН ГАЗРЫН ЗУРАГ — хуудасны толгойн банд (2026-09-28). terraink.app-ийн постер (OpenStreetMap өгөгдөл), цав цагаан дэвсгэртэй. Постерын ДООД хэсэгт хотын нэр, координат, OSM-ийн эх сурвалжийн бичиг байдаг тул `object-position` доод тал руу. Дээд ирмэг нь хуудасны дэвсгэрт уусна; доод талын уусалт хэт богино — OSM-ийн бичгийг (лицензийн шаардлага, ≈95%) хөндөхгүй. */ #block-offices .pm-banner { height: clamp(12rem, 28vw, 26rem); background-color: #fff; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 97%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 97%, transparent 100%); } #block-offices .pm-banner > img { object-position: 50% 100%; } /* «УЛААНБААТАР ХОТ» ХҮРЭЭ — Монголын зургийн оронд УБ-ын зураг + газруудын тэмдэглэгээ. ⚠️ `!important` заавал: SVG дээрх `d-block` утилит өөрөө `!important`-той. */ #block-offices .pm-ub { display: none; } #block-offices .pm-map.is-ub > svg { display: none !important; } #block-offices .pm-map.is-ub .pm-ub { display: block; } /* Суурь зураг — ХҮРЭЭГҮЙ, хуудасны дэвсгэрт уусна: цагаан нь SVG шүүлтүүрээр тунгалаг болж зөвхөн гудамжны зураас үлдэнэ (Монголын зураг шиг цайвар), булангууд бүдгэрнэ. ⚠️ mix-blend-mode ажиллахгүй — `.pm-stage`-ийн AOS transform тусгаарласан давхарга үүсгэдэг. */ #block-offices .pm-ub-map { opacity: .7; -webkit-mask-image: radial-gradient(ellipse 56% 64% at 50% 48%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 56% 64% at 50% 48%, #000 58%, transparent 100%); } #block-offices .pm-ub-credit { font-size: .625rem; } /* Тэмдэглэгээ — үзүүрээрээ (доод төв) газрын цэг дээр буух тул translate(-50%, -100%); цагаан хүрээ (drop-shadow) нь гудамжны зураасаас тусгаарлана */ #block-offices .pm-pin { position: absolute; z-index: 2; padding: 0; border: 0; background: none; color: var(--bs-primary); font-size: 2rem; line-height: 1; transform: translate(-50%, -100%); transform-origin: 50% 100%; /* Цагаан хүрээ + сүүдэр = text-shadow (glyph). ⚠️ `filter: drop-shadow` БҮҮ — ~40 тэмдэглэгээ hover бүрд дахин зурагдаж газрын зураг гацдаг байв (p95 50ms → 17ms). */ text-shadow: 0 0 1px var(--bs-body-bg), 0 0 1px var(--bs-body-bg), 0 0 1px var(--bs-body-bg), 0 .125rem .25rem rgba(0, 0, 0, .3); transition: color .4s ease-in-out, transform .4s ease-in-out; } #block-offices .pm-pin:hover, #block-offices .pm-pin.is-active { z-index: 3; color: var(--bs-gold); transform: translate(-50%, -100%) scale(1.2); } /* Зургийн хүрээнээс ГАДНА газар — зах дээр нэр + зүгийн сумтай шошго (чип шиг: идэвхтэй нь дүүрнэ). Захаасаа дотогш тэлэх тул `data-edge`-ээр зангуу сонгоно. */ #block-offices .pm-pin.is-far { display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .75rem; border: 1px solid rgba(var(--bs-primary-rgb), .35); border-radius: var(--bs-border-radius-pill); background-color: var(--bs-body-bg); font-size: .75rem; font-weight: 600; white-space: nowrap; filter: none; box-shadow: var(--bs-box-shadow-sm); transition: color .4s ease-in-out, background-color .4s ease-in-out, border-color .4s ease-in-out; } #block-offices .pm-pin.is-far[data-edge="left"] { transform: translate(0, -50%); } #block-offices .pm-pin.is-far[data-edge="right"] { transform: translate(-100%, -50%); } #block-offices .pm-pin.is-far[data-edge="top"] { transform: translate(-50%, 0); } #block-offices .pm-pin.is-far[data-edge="bottom"] { transform: translate(-50%, -100%); } #block-offices .pm-pin.is-far:hover, #block-offices .pm-pin.is-far.is-active { color: var(--bs-white); background-color: var(--bs-primary); border-color: var(--bs-primary); } /* Утсанд зураг ≈ 345×194px — захын шошго тэмдэглэгээг дарна. Тэр 3 газар доорх нэрийн товчоор сонгогдож, карт нь (утсанд) зургийн ДООР гарна. */ @media (max-width: 767.98px) { #block-offices .pm-pin { font-size: 1.25rem; } #block-offices .pm-pin.is-far { display: none; } } /* GOOGLE MAP ГОРИМ ($mapMode = 'google', 2026-10-14) — weproperty.mn-ий map-v1: хөлдүү iframe, саарал шүүлтүүр (брэндийн хөх тэмдэглэгээ тод харагдана). */ #block-offices .pm-map.pm-gmap { width: 100%; } #block-offices .pm-gcanvas { height: 50vh; min-height: 20rem; } @media (min-width: 768px) { #block-offices .pm-gcanvas { height: 60vh; min-height: 28rem; } } #block-offices .pm-gframe { opacity: .75; filter: grayscale(1) contrast(.9) brightness(1.12); } /* Hybrid: country view = Mongolia SVG at its own width, the Google canvas only for Ulaanbaatar */ #block-offices .pm-map:is([data-mode="hybrid"], [data-mode="atlas"]):not(.is-ub) { width: min(92vw, 68rem, 100%); } #block-offices .pm-map:is([data-mode="hybrid"], [data-mode="atlas"]):not(.is-ub) .pm-gcanvas { display: none; } #block-offices .pm-map:is([data-mode="hybrid"], [data-mode="atlas"]).is-ub > .pm-pin { display: none; } /* Hybrid country map, Google-like: light neutral land, white borders, soft lift; offices = pins */ #block-offices .pm-map:is([data-mode="hybrid"], [data-mode="atlas"]) > svg { filter: drop-shadow(0 .25rem .75rem rgba(0, 0, 0, .06)); } #block-offices .pm-map:is([data-mode="hybrid"], [data-mode="atlas"]) .aimag, #block-offices .pm-map:is([data-mode="hybrid"], [data-mode="atlas"]) .aimag.has-office { fill: var(--bs-secondary-bg); stroke: var(--bs-body-bg); stroke-width: .3; } #block-offices .pm-map:is([data-mode="hybrid"], [data-mode="atlas"]) .aimag.has-office:hover, #block-offices .pm-map:is([data-mode="hybrid"], [data-mode="atlas"]) .aimag.has-office.is-active { fill: rgba(var(--bs-primary-rgb), .12); } #block-offices .pm-map:is([data-mode="hybrid"], [data-mode="atlas"]) .aimag-label { fill: var(--bs-secondary-color); } /* Hybrid: Улаанбаатарын Google Map нь Монголын зурагтай ИЖИЛ хэмжээ (68rem, 100:41.3) */ #block-offices .pm-map.pm-gmap[data-mode="hybrid"] { width: min(92vw, 68rem, 100%); } #block-offices .pm-map[data-mode="hybrid"] .pm-gcanvas { height: auto; min-height: 0; aspect-ratio: 100 / 41.3; } /* Atlas: хоёр хүрээ хоёулаа SVG — нэг өргөн, УБ-ын дүүргүүд ижил хэв */ #block-offices .pm-map.pm-gmap[data-mode="atlas"] { width: min(92vw, 68rem, 100%); } /* Дүүргүүд кадрыг бүтэн дүүргэдэг тул ирмэг нь хуудасны дэвсгэрт уусна */ #block-offices .pm-ubd-map { -webkit-mask-image: radial-gradient(ellipse 54% 60% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 54% 60% at 50% 50%, #000 62%, transparent 100%); } /* Зүүн захын шошгонд сум нь нэрийн ӨМНӨ (markup-д сум дандаа араас) */ #block-offices .pm-gmap .pm-pin.is-far[data-edge="left"] { flex-direction: row-reverse; }