{"id":6576,"date":"2026-03-16T10:26:57","date_gmt":"2026-03-16T07:26:57","guid":{"rendered":"https:\/\/www.obadifferentbyluxury.ro\/?page_id=6576"},"modified":"2026-03-16T10:38:33","modified_gmt":"2026-03-16T07:38:33","slug":"proiecte-o-b-a","status":"publish","type":"page","link":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/proiecte-o-b-a\/","title":{"rendered":"Proiecte O.B.A."},"content":{"rendered":"\n<!-- ================== OBA \u2014 HART\u0102 PROIECTE (embeddable) ================== -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&#038;family=DM+Sans:wght@300;400;500&#038;display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\/>\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n\n<div id=\"obam\">\n<style>\n  \/* \u2550\u2550\u2550 TOATE STILURILE IZOLATE SUB #obam \u2550\u2550\u2550 *\/\n  #obam {\n    --gold: #C4973A;\n    --gold2: #9f8438;\n    --gold-dim: rgba(196,151,58,0.11);\n    --gold-border: rgba(196,151,58,0.26);\n    --sb: #0F1014;\n    --sb-w: 320px;\n    --serif: 'Cormorant Garamond', Georgia, serif;\n    --sans: 'DM Sans', system-ui, sans-serif;\n    --r: 14px;\n    font-family: var(--sans);\n    \/* \u2190 dimensiune fix\u0103, nu afecteaz\u0103 nimic din exterior *\/\n    height: 620px;\n    display: flex;\n    border-radius: 20px;\n    overflow: hidden;\n    box-shadow: 0 24px 64px rgba(0,0,0,0.32);\n    position: relative;\n    isolation: isolate;\n  }\n  #obam * { box-sizing: border-box; margin: 0; padding: 0; }\n  #obam a { text-decoration: none; color: inherit; }\n\n  \/* \u2550\u2550\u2550 SIDEBAR \u2550\u2550\u2550 *\/\n  #obam-sb {\n    width: var(--sb-w);\n    flex-shrink: 0;\n    background: var(--sb);\n    display: flex;\n    flex-direction: column;\n    border-right: 1px solid rgba(255,255,255,0.05);\n    position: relative;\n    z-index: 2;\n  }\n\n  #obam-sb-top {\n    padding: 22px 20px 16px;\n    border-bottom: 1px solid rgba(255,255,255,0.05);\n    flex-shrink: 0;\n  }\n  #obam-sb-top .ey {\n    font-size: 10px;\n    font-weight: 500;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    color: var(--gold);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 9px;\n  }\n  #obam-sb-top .ey::before {\n    content: '';\n    width: 18px; height: 1px;\n    background: var(--gold);\n  }\n  #obam-sb-top h2 {\n    font-family: var(--serif);\n    font-size: 22px;\n    font-weight: 400;\n    color: #fff;\n    line-height: 1.15;\n    letter-spacing: -0.01em;\n  }\n  #obam-sb-top h2 em { font-style: italic; color: var(--gold); }\n  #obam-sb-top p {\n    margin-top: 6px;\n    font-size: 11.5px;\n    color: rgba(255,255,255,0.32);\n    font-weight: 300;\n    line-height: 1.55;\n  }\n\n  \/* lista carduri *\/\n  #obam-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 10px;\n    scrollbar-width: thin;\n    scrollbar-color: rgba(196,151,58,0.15) transparent;\n  }\n  #obam-list::-webkit-scrollbar { width: 3px; }\n  #obam-list::-webkit-scrollbar-thumb { background: rgba(196,151,58,0.18); border-radius: 2px; }\n\n  \/* card proiect *\/\n  .obam-card {\n    display: flex;\n    align-items: stretch;\n    border-radius: 12px;\n    overflow: hidden;\n    cursor: pointer;\n    margin-bottom: 6px;\n    background: rgba(255,255,255,0.025);\n    border: 1px solid rgba(255,255,255,0.05);\n    transition: background 0.22s, border-color 0.22s, transform 0.22s;\n    position: relative;\n  }\n  .obam-card::after {\n    content: '';\n    position: absolute;\n    left: 0; top: 0; bottom: 0;\n    width: 2px;\n    background: linear-gradient(180deg, var(--gold), var(--gold2));\n    opacity: 0;\n    transition: opacity 0.22s;\n  }\n  .obam-card:hover {\n    background: rgba(255,255,255,0.05);\n    border-color: rgba(255,255,255,0.09);\n    transform: translateX(2px);\n  }\n  .obam-card.act {\n    background: rgba(196,151,58,0.07);\n    border-color: var(--gold-border);\n    transform: translateX(3px);\n  }\n  .obam-card.act::after { opacity: 1; }\n\n  .obam-card-img {\n    width: 68px;\n    flex-shrink: 0;\n    overflow: hidden;\n  }\n  .obam-card-img img {\n    width: 100%; height: 100%;\n    object-fit: cover;\n    display: block;\n    filter: brightness(0.7) saturate(0.75);\n    transition: filter 0.3s;\n  }\n  .obam-card:hover .obam-card-img img,\n  .obam-card.act .obam-card-img img { filter: brightness(0.88) saturate(1); }\n\n  .obam-card-body {\n    padding: 11px 12px;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 4px;\n    min-width: 0;\n  }\n  .obam-card-name {\n    font-family: var(--serif);\n    font-size: 14.5px;\n    font-weight: 600;\n    color: #fff;\n    line-height: 1.2;\n    letter-spacing: -0.01em;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .obam-card.act .obam-card-name { color: var(--gold); }\n  .obam-card-zone {\n    font-size: 11px;\n    color: rgba(255,255,255,0.35);\n    font-weight: 300;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n  .obam-card-zone svg {\n    width: 9px; height: 9px;\n    stroke: var(--gold);\n    stroke-width: 2.2;\n    fill: none;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n  .obam-tag {\n    display: inline-flex;\n    font-size: 9.5px;\n    font-weight: 500;\n    letter-spacing: 0.05em;\n    padding: 2px 6px;\n    border-radius: 3px;\n    border: 1px solid;\n    width: fit-content;\n  }\n  .obam-tag-f { color: #4ade80; border-color: rgba(74,222,128,0.22); background: rgba(74,222,128,0.05); }\n  .obam-tag-c { color: var(--gold); border-color: var(--gold-border); background: var(--gold-dim); }\n\n  .obam-card-arr {\n    display: flex; align-items: center;\n    padding: 0 10px 0 4px;\n    color: rgba(255,255,255,0.15);\n    transition: color 0.2s, transform 0.2s;\n  }\n  .obam-card:hover .obam-card-arr,\n  .obam-card.act .obam-card-arr { color: var(--gold); transform: translateX(2px); }\n  .obam-card-arr svg {\n    width: 12px; height: 12px;\n    stroke: currentColor; stroke-width: 2.2;\n    fill: none; stroke-linecap: round; stroke-linejoin: round;\n  }\n\n  \/* footer sidebar *\/\n  #obam-sb-bot {\n    padding: 12px;\n    border-top: 1px solid rgba(255,255,255,0.05);\n    flex-shrink: 0;\n  }\n  #obam-sb-bot a {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 7px;\n    width: 100%;\n    padding: 11px;\n    background: linear-gradient(135deg, var(--gold), var(--gold2));\n    color: #0E0E0E;\n    font-size: 12px;\n    font-weight: 600;\n    border-radius: 9px;\n    letter-spacing: 0.02em;\n    transition: transform 0.2s, box-shadow 0.2s;\n  }\n  #obam-sb-bot a:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 6px 18px rgba(196,151,58,0.3);\n  }\n  #obam-sb-bot a svg {\n    width: 13px; height: 13px;\n    stroke: currentColor; stroke-width: 2.2;\n    fill: none; stroke-linecap: round; stroke-linejoin: round;\n  }\n\n  \/* \u2550\u2550\u2550 MAP \u2550\u2550\u2550 *\/\n  #obam-map-wrap {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n  }\n  #obam-map {\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* tile style \u2014 CartoDB Voyager: modern, minimal, elegant *\/\n  #obam .leaflet-tile {\n    filter: saturate(0.55) brightness(0.97) contrast(1.04) !important;\n  }\n\n  \/* override Leaflet globals ONLY inside #obam *\/\n  #obam .leaflet-container {\n    font-family: var(--sans) !important;\n    background: #e8e4dc !important;\n  }\n  #obam .leaflet-control-zoom {\n    border: none !important;\n    box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;\n    border-radius: 10px !important;\n    overflow: hidden;\n  }\n  #obam .leaflet-control-zoom a {\n    background: #fff !important;\n    color: #333 !important;\n    width: 32px !important;\n    height: 32px !important;\n    line-height: 32px !important;\n    font-size: 16px !important;\n    border-bottom: 1px solid #eee !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    transition: background 0.15s !important;\n  }\n  #obam .leaflet-control-zoom a:hover { background: #f5f5f5 !important; }\n  #obam .leaflet-control-attribution {\n    background: rgba(255,255,255,0.6) !important;\n    font-size: 9px !important;\n    color: #888 !important;\n    border-radius: 6px 0 0 0 !important;\n  }\n\n  \/* \u2550\u2550\u2550 MARKER \u2550\u2550\u2550 *\/\n  .obam-pin {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .obam-pin-dot {\n    width: 38px; height: 38px;\n    border-radius: 50% 50% 50% 4px;\n    transform: rotate(-45deg);\n    background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);\n    box-shadow: 0 4px 16px rgba(196,151,58,0.45), 0 0 0 2px rgba(255,255,255,0.18);\n    display: flex; align-items: center; justify-content: center;\n    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;\n  }\n  .obam-pin-dot.act {\n    transform: rotate(-45deg) scale(1.25);\n    background: #fff;\n    box-shadow: 0 6px 24px rgba(196,151,58,0.6), 0 0 0 3px rgba(196,151,58,0.3);\n  }\n  .obam-pin-dot span {\n    transform: rotate(45deg);\n    font-family: var(--serif);\n    font-size: 11px;\n    font-weight: 700;\n    color: #fff;\n    line-height: 1;\n    pointer-events: none;\n  }\n  .obam-pin-dot.act span { color: var(--gold2); }\n\n  .obam-pin-ring {\n    position: absolute;\n    top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    width: 56px; height: 56px;\n    border-radius: 50%;\n    border: 2px solid rgba(196,151,58,0.45);\n    opacity: 0;\n    pointer-events: none;\n    animation: none;\n  }\n  .obam-pin-ring.act {\n    opacity: 1;\n    animation: obamRing 1.8s ease infinite;\n  }\n  @keyframes obamRing {\n    0%   { transform: translate(-50%,-50%) scale(0.7); opacity: 0.5; }\n    70%  { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }\n    100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }\n  }\n\n  \/* \u2550\u2550\u2550 POPUP \u2550\u2550\u2550 *\/\n  #obam .leaflet-popup-content-wrapper {\n    background: #fff !important;\n    border: none !important;\n    border-radius: 16px !important;\n    box-shadow: 0 16px 48px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1) !important;\n    padding: 0 !important;\n    overflow: hidden;\n    min-width: 240px;\n    max-width: 260px;\n  }\n  #obam .leaflet-popup-tip-container { display: none !important; }\n  #obam .leaflet-popup-close-button {\n    top: 8px !important; right: 10px !important;\n    color: rgba(255,255,255,0.8) !important;\n    font-size: 18px !important;\n    font-weight: 300 !important;\n    z-index: 10 !important;\n    text-shadow: 0 1px 3px rgba(0,0,0,0.4);\n    transition: color 0.15s !important;\n  }\n  #obam .leaflet-popup-close-button:hover { color: #fff !important; }\n  #obam .leaflet-popup-content { margin: 0 !important; width: auto !important; }\n\n  .obam-pu-img {\n    height: 130px;\n    overflow: hidden;\n    position: relative;\n  }\n  .obam-pu-img img {\n    width: 100%; height: 100%;\n    object-fit: cover; display: block;\n  }\n  .obam-pu-img::after {\n    content: '';\n    position: absolute; inset: 0;\n    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 100%);\n  }\n  .obam-pu-badge {\n    position: absolute;\n    bottom: 10px; left: 12px;\n    z-index: 2;\n    font-size: 9.5px;\n    font-weight: 500;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: rgba(255,255,255,0.8);\n    font-family: var(--sans);\n  }\n  .obam-pu-body {\n    padding: 14px 16px 16px;\n  }\n  .obam-pu-name {\n    font-family: var(--serif);\n    font-size: 18px;\n    font-weight: 600;\n    color: #111;\n    letter-spacing: -0.01em;\n    line-height: 1.2;\n    margin-bottom: 4px;\n  }\n  .obam-pu-addr {\n    font-size: 11.5px;\n    color: #999;\n    font-weight: 300;\n    display: flex;\n    align-items: flex-start;\n    gap: 4px;\n    line-height: 1.4;\n    margin-bottom: 12px;\n    font-family: var(--sans);\n  }\n  .obam-pu-addr svg {\n    width: 10px; height: 10px;\n    stroke: var(--gold); stroke-width: 2.2;\n    fill: none; stroke-linecap: round; stroke-linejoin: round;\n    flex-shrink: 0; margin-top: 1px;\n  }\n  .obam-pu-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    width: 100%;\n    padding: 10px;\n    background: var(--ink, #0E0E0E);\n    color: #fff;\n    font-family: var(--sans);\n    font-size: 12px;\n    font-weight: 500;\n    border-radius: 9px;\n    letter-spacing: 0.02em;\n    transition: background 0.2s;\n  }\n  .obam-pu-btn:hover { background: #222; }\n  .obam-pu-btn svg {\n    width: 12px; height: 12px;\n    stroke: currentColor; stroke-width: 2.2;\n    fill: none; stroke-linecap: round; stroke-linejoin: round;\n  }\n\n  \/* \u2550\u2550\u2550 BADGE PROIECTE \u2550\u2550\u2550 *\/\n  #obam-badge {\n    position: absolute;\n    top: 14px; right: 14px;\n    z-index: 900;\n    background: rgba(15,16,20,0.88);\n    border: 1px solid rgba(196,151,58,0.22);\n    border-radius: 10px;\n    padding: 8px 14px;\n    backdrop-filter: blur(10px);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    pointer-events: none;\n  }\n  #obam-badge .n {\n    font-family: var(--serif);\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--gold);\n    line-height: 1;\n  }\n  #obam-badge .l {\n    font-size: 10.5px;\n    color: rgba(255,255,255,0.4);\n    font-weight: 300;\n    line-height: 1.4;\n    font-family: var(--sans);\n  }\n\n  \/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550 *\/\n  @media (max-width: 720px) {\n    #obam {\n      flex-direction: column;\n      height: auto;\n      border-radius: 16px;\n    }\n    #obam-sb {\n      width: 100%;\n      border-right: none;\n      border-bottom: 1px solid rgba(255,255,255,0.05);\n    }\n    #obam-list {\n      display: flex;\n      flex-direction: row;\n      overflow-x: auto;\n      overflow-y: hidden;\n      padding: 8px 10px 10px;\n      gap: 6px;\n      max-height: none;\n      height: auto;\n      scrollbar-width: none;\n    }\n    #obam-list::-webkit-scrollbar { display: none; }\n    .obam-card {\n      flex-shrink: 0;\n      width: 180px;\n      flex-direction: column;\n      margin-bottom: 0;\n    }\n    .obam-card-img { width: 100%; height: 70px; }\n    .obam-card-arr { display: none; }\n    #obam-sb-bot { display: none; }\n    #obam-map-wrap { height: 380px; }\n  }\n<\/style>\n\n  <!-- SIDEBAR -->\n  <aside id=\"obam-sb\">\n    <div id=\"obam-sb-top\">\n      <div class=\"ey\">Loca\u021bii<\/div>\n      <h2>Proiecte <em>O.B.A.<\/em><br\/>pe hart\u0103<\/h2>\n      <p>Click pe un proiect pentru a vedea loca\u021bia exact\u0103.<\/p>\n    <\/div>\n    <div id=\"obam-list\"><\/div>\n    <div id=\"obam-sb-bot\">\n      <a href=\"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/proiecte\/\" target=\"_blank\" rel=\"noopener\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M3 21h18\"\/><path d=\"M6 21V8l6-4 6 4v13\"\/><\/svg>\n        Toate proiectele O.B.A.\n        <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14\"\/><path d=\"M13 6l6 6-6 6\"\/><\/svg>\n      <\/a>\n    <\/div>\n  <\/aside>\n\n  <!-- MAP -->\n  <div id=\"obam-map-wrap\">\n    <div id=\"obam-map\"><\/div>\n    <div id=\"obam-badge\">\n      <span class=\"n\">6<\/span>\n      <span class=\"l\">proiecte<br\/>reziden\u021biale<\/span>\n    <\/div>\n  <\/div>\n\n<\/div><!-- \/#obam -->\n\n<script>\n(function() {\n\nconst PROJ = [\n  { id:'luxury-plus', name:'O.B.A. Luxury Plus', zone:'Constan\u021ba', addr:'Str. Liviu Rebreanu, Constan\u021ba', status:'c', lat:44.2198, lng:28.6024, url:'https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/proiecte\/oba-luxury-plus\/', img:'https:\/\/i0.wp.com\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/ap-1-1.jpg', abbr:'LP' },\n  { id:'tower',       name:'O.B.A. Tower',        zone:'Mamaia Nord', addr:'Bd. Mamaia Nord, Mamaia-Sat', status:'c', lat:44.2720, lng:28.6330, url:'https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/proiecte\/oba-tower\/', img:'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Apartament-2-camere-in-Mamaia-Nord.webp', abbr:'TW' },\n  { id:'urban',       name:'O.B.A. Urban Residence', zone:'Mamaia Nord', addr:'Str. T2, Mamaia-Sat', status:'c', lat:44.2648, lng:28.6275, url:'https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/proiecte\/oba-residence-apartamente-noi-mamaia-nord\/', img:'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Apartament-Mamaia-Nord-2-camere-6.webp', abbr:'UR' },\n  { id:'residence',   name:'O.B.A. Residence',    zone:'Mamaia Nord', addr:'Str. C2, Mamaia-Sat', status:'f', lat:44.2598, lng:28.6248, url:'https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/proiecte-finalizate\/urban-residence\/', img:'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Appartament-O.B.A-Urban-Residence.webp', abbr:'RE' },\n  { id:'lake',        name:'O.B.A. Lake',         zone:'Mamaia Nord', addr:'Str. M17, Mamaia-Sat', status:'f', lat:44.2672, lng:28.6308, url:'https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/proiecte-finalizate\/m17-apartamente-noi-mamaia-nord\/', img:'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/OBA-LAKE-APARTAMENTE-FINALIZATE-1.webp', abbr:'LK' },\n  { id:'m14',         name:'O.B.A. M14',          zone:'Mamaia Nord', addr:'Str. M14 nr.29, Mamaia-Sat', status:'f', lat:44.2638, lng:28.6290, url:'https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/proiecte-finalizate\/o-b-a-m14\/', img:'https:\/\/www.obadifferentbyluxury.ro\/wp-content\/uploads\/Studio-Mamaia-Nord-O.B.A.-M14-1.webp', abbr:'M14' }\n];\n\n\/\/ \u2500\u2500 MAP INIT \u2500\u2500\nconst map = L.map('obam-map', {\n  center: [44.254, 28.624],\n  zoom: 12,\n  zoomControl: false,\n  attributionControl: true\n});\n\n\/\/ CartoDB Voyager \u2014 stil modern, curat, minimal\nL.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}{r}.png', {\n  attribution: '\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> \u00a9 <a href=\"https:\/\/carto.com\/\">CARTO<\/a>',\n  subdomains: 'abcd',\n  maxZoom: 20\n}).addTo(map);\n\nL.control.zoom({ position: 'bottomleft' }).addTo(map);\n\n\/\/ \u2500\u2500 HELPERS \u2500\u2500\nfunction pinIcon(p, act) {\n  return L.divIcon({\n    className: '',\n    html: `<div class=\"obam-pin\">\n      <div class=\"obam-pin-dot${act?' act':''}\"><span>${p.abbr}<\/span><\/div>\n      <div class=\"obam-pin-ring${act?' act':''}\"><\/div>\n    <\/div>`,\n    iconSize: [44, 44],\n    iconAnchor: [22, 42],\n    popupAnchor: [0, -46]\n  });\n}\n\nfunction popupHTML(p) {\n  const sl = p.status === 'f' ? 'Finalizat' : '\u00cen construc\u021bie';\n  return `<div>\n    <div class=\"obam-pu-img\">\n      <img decoding=\"async\" src=\"${p.img}\" alt=\"${p.name}\" loading=\"lazy\"\/>\n      <div class=\"obam-pu-badge\">${sl}<\/div>\n    <\/div>\n    <div class=\"obam-pu-body\">\n      <div class=\"obam-pu-name\">${p.name}<\/div>\n      <div class=\"obam-pu-addr\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/><\/svg>\n        ${p.addr}\n      <\/div>\n      <a class=\"obam-pu-btn\" href=\"${p.url}\" target=\"_blank\" rel=\"noopener\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M3 21h18\"\/><path d=\"M6 21V8l6-4 6 4v13\"\/><\/svg>\n        Vezi proiectul\n        <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14\"\/><path d=\"M13 6l6 6-6 6\"\/><\/svg>\n      <\/a>\n    <\/div>\n  <\/div>`;\n}\n\n\/\/ \u2500\u2500 BUILD \u2500\u2500\nconst markers = {}, list = document.getElementById('obam-list');\nlet active = null;\n\nfunction activate(id, fromMap) {\n  const p = PROJ.find(x => x.id === id);\n  if (!p) return;\n\n  \/\/ deactivate old\n  if (active && active !== id) {\n    const op = PROJ.find(x => x.id === active);\n    markers[active].setIcon(pinIcon(op, false));\n    document.querySelector(`.obam-card[data-id=\"${active}\"]`)?.classList.remove('act');\n  }\n  active = id;\n\n  \/\/ activate pin\n  markers[id].setIcon(pinIcon(p, true));\n\n  \/\/ activate card + scroll\n  document.querySelectorAll('.obam-card').forEach(c => c.classList.remove('act'));\n  const card = document.querySelector(`.obam-card[data-id=\"${id}\"]`);\n  card?.classList.add('act');\n  if (!fromMap && card) card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n\n  \/\/ fly + popup\n  const zoom = fromMap ? 16 : 16;\n  const dur  = fromMap ? 0.7 : 1.1;\n  map.flyTo([p.lat, p.lng], zoom, { animate: true, duration: dur, easeLinearity: 0.35 });\n  if (!fromMap) setTimeout(() => markers[id].openPopup(), dur * 1000 + 200);\n  else markers[id].openPopup();\n}\n\nPROJ.forEach(p => {\n  \/\/ sidebar card\n  const div = document.createElement('div');\n  div.className = 'obam-card';\n  div.dataset.id = p.id;\n  const tagCls = p.status === 'f' ? 'obam-tag-f' : 'obam-tag-c';\n  const tagLbl = p.status === 'f' ? 'Finalizat' : '\u00cen construc\u021bie';\n  div.innerHTML = `\n    <div class=\"obam-card-img\"><img decoding=\"async\" src=\"${p.img}\" alt=\"${p.name}\" loading=\"lazy\"\/><\/div>\n    <div class=\"obam-card-body\">\n      <div class=\"obam-card-name\">${p.name}<\/div>\n      <div class=\"obam-card-zone\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/><\/svg>\n        ${p.zone}\n      <\/div>\n      <span class=\"obam-tag ${tagCls}\">${tagLbl}<\/span>\n    <\/div>\n    <div class=\"obam-card-arr\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/div>`;\n  div.addEventListener('click', () => activate(p.id, false));\n  list.appendChild(div);\n\n  \/\/ marker\n  const mk = L.marker([p.lat, p.lng], { icon: pinIcon(p, false) })\n    .addTo(map)\n    .bindPopup(L.popup({ maxWidth: 260, minWidth: 240, closeButton: true, autoClose: true, closeOnClick: false })\n      .setContent(popupHTML(p)));\n\n  mk.on('click', () => activate(p.id, true));\n  mk.on('popupclose', () => {\n    if (active === p.id) {\n      mk.setIcon(pinIcon(p, false));\n      document.querySelector(`.obam-card[data-id=\"${p.id}\"]`)?.classList.remove('act');\n      active = null;\n    }\n  });\n  markers[p.id] = mk;\n});\n\nmap.on('click', e => {\n  if (active && !e.originalEvent.target.closest?.('.leaflet-popup, .obam-pin')) {\n    const op = PROJ.find(x => x.id === active);\n    if (op) markers[active].setIcon(pinIcon(op, false));\n    document.querySelector(`.obam-card[data-id=\"${active}\"]`)?.classList.remove('act');\n    active = null;\n  }\n});\n\n\/\/ invalidate size after insert in page\nsetTimeout(() => map.invalidateSize(), 300);\n\n})();\n<\/script>\n<!-- ================== \/OBA \u2014 HART\u0102 PROIECTE ================== -->\n\n","protected":false},"excerpt":{"rendered":"<p>Loca\u021bii Proiecte O.B.A.pe hart\u0103 Click pe un proiect pentru a vedea loca\u021bia exact\u0103. Toate proiectele O.B.A. 6 proiectereziden\u021biale<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6576","page","type-page","status-publish","hentry","description-off"],"_links":{"self":[{"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/pages\/6576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/comments?post=6576"}],"version-history":[{"count":0,"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/pages\/6576\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.obadifferentbyluxury.ro\/ro_ro\/wp-json\/wp\/v2\/media?parent=6576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}