/* ======================================== SYRIA MAP ======================================== */ .syria-map-section { position: relative; padding: 120px 0; background: #fff; overflow: hidden; font-family: "Rubik", sans-serif !important; } /* ARABIC FONT FIX ---------------- Rubik's Google Fonts build only ships the Latin/Cyrillic/Hebrew weights by default unless the Arabic script is explicitly requested — most /@import embed codes (and self-hosted copies) only pull those weights, so on an Arabic page the browser silently falls back to the plain "sans-serif" system font, which is why the Arabic text looks inconsistent/plain while the English text looks fine. Two things fix this together: 1) Make sure the Google Fonts embed in your actually requests the Arabic subset, e.g.: https://fonts.googleapis.com/css2?family=Rubik:wght@300..900&subset=arabic&display=swap (or, if self-hosting, use a Rubik build that includes the Arabic glyphs — the variable font from fonts.google.com/specimen/Rubik does include them). 2) As a safety net regardless of the above, give Arabic text a proper Arabic-native fallback (Cairo) instead of the browser default before falling back to system sans-serif, so it still looks clean even if Rubik's Arabic glyphs fail to load. */ html[lang="ar"] .syria-map-section, .syria-map-section[dir="rtl"] { font-family: "Rubik", "Cairo", "Tajawal", sans-serif !important; } /* HEADER */ .syria-map-header { margin-bottom: 60px; } .map-eyebrow, .modal-eyebrow { display: block; margin-bottom: 15px; font-size: 16px; font-weight: 600; /* letter-spacing: 3px; */ text-transform: uppercase; color: #ce2029; } .syria-map-header h2 { margin: 0 0 15px; font-size: 52px; line-height: 1.1; font-weight: 400; color: #222; } .syria-map-header p { margin: 0; font-size: 16px; color: #222; } /* MAP WRAPPER */ .syria-map-wrapper { position: relative; width: 100%; max-width: 850px; margin: 0 auto; } /* SVG */ .syria-map { position: relative; width: 100%; } .syria-map svg { display: block; width: 100%; height: auto; overflow: visible; } /* PROVINCES */ .syria-map .province { /* fill color is now set per-province inline via style="fill:#..." */ stroke: #f5f2ec; stroke-width: 2; cursor: pointer; transition: filter .35s ease, transform .35s ease; } /* HOVER */ .syria-map .province:hover, .syria-map .province.is-active { filter: brightness(1.12) saturate(1.15) drop-shadow(0 8px 15px rgba(0,0,0,.18)); } .syria-map .province:hover, .syria-map .province.is-active { overflow: hidden; } /* PROVINCE NAME LABELS (drawn on top of each province) */ .syria-map .province-label { font-family: inherit; font-size: 18px; font-weight: 700; fill: #222; paint-order: stroke fill; stroke: #ffffff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; user-select: none; } @media (max-width: 767px) { .syria-map .province-label { font-size: 24px; stroke-width: 2px; } } /* HOTSPOT */ .map-hotspot { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; z-index: 10; } .map-hotspot span { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: #9b8060; box-shadow: 0 0 0 5px rgba(155,128,96,.15); } /* PULSE */ .map-hotspot span::before { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border: 1px solid #9b8060; border-radius: 50%; animation: hotspotPulse 1.8s infinite; } @keyframes hotspotPulse { 0% { opacity: .8; transform: translate(-50%, -50%) scale(.5); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2); } } /* TOOLTIP */ .map-tooltip { position: absolute; z-index: 20; min-width: 170px; padding: 15px 18px; background: #fff; box-shadow: 0 15px 40px rgba(0,0,0,.12); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 25px)); transition: opacity .25s ease, transform .25s ease; } .map-tooltip.is-visible { opacity: 1; transform: translate(-50%, calc(-100% - 35px)); } .tooltip-label { display: block; margin-bottom: 4px; font-size: 12px; /* letter-spacing: 2px; */ text-transform: uppercase; color: #ce2029; } .map-tooltip strong { display: block; font-size: 18px; font-weight: 500; color: #222; } .tooltip-hint { display: block; margin-top: 5px; font-size: 12px; color: #ce2029; } /* ======================================== MODAL ======================================== */ .province-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 30px; visibility: hidden; opacity: 0; transition: opacity .4s ease, visibility .4s ease; } .province-modal.is-open { visibility: visible; opacity: 1; } /* OVERLAY */ .province-modal-overlay { position: absolute; inset: 0; background: rgba(25,22,18,.72); backdrop-filter: blur(8px); } /* CONTENT */ .province-modal-content { position: relative; z-index: 2; display: flex; width: 100%; max-width: 925px; min-height: 480px; background: #f7f4ee; box-shadow: 0 30px 80px rgba(0,0,0,.25); overflow: hidden; transform: translateY(40px) scale(.96); transition: transform .45s cubic-bezier(.22,.61,.36,1); } .province-modal.is-open .province-modal-content { transform: translateY(0) scale(1); } /* IMAGE */ .province-modal-image { width: 45%; background: #ddd; } .province-modal-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* INFO */ .province-modal-info { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 60px; } .province-modal-info h3 { margin: 0 0 20px; font-size: 46px; font-weight: 400; color: #222; } .province-modal-info p { max-width: 420px; margin: 0 0 35px; font-size: 15px; line-height: 1.8; color: #222; } /* META */ .province-meta { display: flex; gap: 50px; margin-bottom: 35px; justify-content: space-between; } .province-meta span { display: block; margin-bottom: 6px; font-size: 9px; letter-spacing: 2px; font-weight: bold; color: #ce2029; } .province-meta strong { font-size: 20px; font-weight: 500; color: #222; } /* CENTERS LIST (stacked, scrollable when there are many centers) */ .province-centers-list { display: flex; flex-direction: column; gap: 12px; max-height: 260px; overflow-y: auto; margin-bottom: 30px; padding-right: 6px; } .province-centers-list:empty { display: none; margin-bottom: 0; } /* thin, on-brand scrollbar (webkit browsers) */ .province-centers-list::-webkit-scrollbar { width: 6px; } .province-centers-list::-webkit-scrollbar-track { background: #eee6d8; border-radius: 10px; } .province-centers-list::-webkit-scrollbar-thumb { background: #ce2029; border-radius: 10px; } .center-item { padding: 14px 16px; background: #fff; border: 1px solid #ece3d5; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; } .address-center-single { display: flex; justify-content: space-between; } .center-item-name { font-size: 15px; font-weight: 600; color: #222; margin-bottom: 2px; } .center-item-row { display: block; font-size: 13px; line-height: 1.6; color: #555; } .center-item-label { font-weight: 600; color: #ce2029; } /* LINK */ .province-modal-link { display: inline-flex; align-items: center; gap: 20px; width: fit-content; padding-bottom: 8px; border-bottom: 1px solid #9b8060; color: #222; text-decoration: none; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } .province-modal-link span { font-size: 18px; transition: transform .25s ease; } .province-modal-link:hover span { transform: translateX(5px); } /* CLOSE */ .province-modal-close { position: absolute; top: 20px; left: 20px; z-index: 5; display:flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 0; background: rgba(255,255,255,.8); border-radius: 50%; font-size: 28px; line-height: 1; color: #222; cursor: pointer; transition: transform .25s ease; } .province-modal-close:hover { transform: rotate(90deg); } .syria-map .province:hover, .syria-map .province.is-active:focus { outline: none; } /*body.map-modal-open {*/ /* overflow: hidden;*/ /*}*/ /* ======================================== MOBILE ======================================== */ @media (max-width: 767px) { .syria-map-section { padding: 80px 0; } .syria-map-header { margin-bottom: 35px; } .syria-map-header h2 { font-size: 38px; } .province-modal { padding: 15px; } .province-modal-content { display: block; max-height: 90vh; overflow-y: auto; } .province-modal-image { width: 100%; height: 230px; } .province-modal-info { width: 100%; padding: 35px 25px; } .province-modal-info h3 { font-size: 36px; } .province-meta { gap: 30px; } .province-centers-list { max-height: 200px; } }