/* ========================================================================== Sana Tourism - "Explore" map section (the Destinations page map) -------------------------------------------------------------------------- Ported from the supplied ROOF map-section export. Everything is scoped under .sana-map-section so it cannot leak into the rest of the site's styles. The INNER class names are unchanged from the export, because explore-map.js queries them by name. Do not rename them. Removed from the export (not used on this page): - the legend / status filter strip (regions have no for-sale status) - the featured-projects slider (the map runs full width instead) ========================================================================== */ .sana-map-section{ /* ---- Palette. Retheme the whole section from these values. ---- */ --navy:#021F41; /* the site's dark navy - card text + shadows only, */ /* no longer the section background */ --slate2:#123255; /* the chevron watermark */ --brand:#795296; /* Sana purple - pin rings + chips, as the old pins */ --brand-dark:#5F3F77; --link:#0894D0; /* Sana blue - the card's "Explore" link */ --section-bg:#0894D1; /* Sana blue, brand guidelines p.4 - section ground */ --light-bg:#EDEBE8; /* MUST match the basemap's land colour, or the */ --light-bg2:#E8E8E8; /* panel flashes a different beige before first paint*/ --light-blue:#96B7E3; --muted:#CECECE; --muted-dark:#7C7C7C; /* 'main' is the site's own self-hosted face, declared with @font-face in the theme's own assets/css/style.css, so this section needs no webfont of its own. (Do not write the path with a glob here - the star-slash would close this comment early and silently eat the declaration underneath it.) */ --font-latin:'main',system-ui,-apple-system,'Segoe UI',sans-serif; --fw-heading:700; --ease:all 0.3s ease; /* ---- The section shell ---- 2026-09-04: the old ground was #021F41, a navy that is not in the brand guidelines at all. Replaced with the brand blue from the guidelines' colour page (p.4: #eaa03d / #e6775c / #008f9d / #0894d1 / #795295 / #090909 / #ffffff). The margin-top:-24px, the border-radius and the clip-path that used to shape the navy block are gone: they made it ride up over the page banner and cut its own top-right corner, and with the map panel now 60% width and centred, a clip-path would only crop the panel's corners. The padding is what gives this section its height. The map panel inside it is a fixed 432px and is NOT affected by these numbers. */ position:relative; background:var(--section-bg); color:#fff; font-family:var(--font-latin); font-weight:300; line-height:1.55; z-index:2; padding:100px 0 110px; overflow:hidden; } .sana-map-section *{margin:0;padding:0;box-sizing:border-box} .sana-map-section a{text-decoration:none;color:inherit} .sana-map-section button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} .sana-map-section h4{font-weight:var(--fw-heading);line-height:1.2} .sana-map-section img{max-width:100%;display:block} /* Width wrapper. Named .sms-container rather than .container so it can never collide with the site's own Bootstrap grid. */ .sana-map-section .sms-container{max-width:1360px;margin:0 auto;padding:0 40px} /* 2026-09-04: the faint blue chevron watermark (.world-shards) was removed by request, from this file and from both page templates. --slate2 above is now unused, kept only so the palette block still reads as the full set. */ /* The map runs the full width of the container (the export's right-hand featured-projects slider is not used here). */ .sana-map-section .explore-layout{display:block} /* ===== The fallback SVG basemap ===== Shown whenever the live vector map cannot start (no WebGL, archive missing, host not serving byte ranges). The section is therefore never blank. */ .sana-map-section .map-panel{ /* 2026-09-04: was full container width at 720px tall, cut to 60%/432px, then stepped back up to 80%/576px. The three responsive heights below are held to the same 4:3-ish ratio as this one, so the Kingdom frames identically at every width - fitToPins just settles at a slightly different zoom. Change `width` and `height` together, or the framing shifts. */ position:relative;height:576px; width:80%;margin-left:auto;margin-right:auto; border-radius:20px;overflow:hidden; /* 2026-09-04: the angled top-right corner is gone by request. It was clip-path:polygon(0 0,calc(100% - 14px) 0,100% 100%,0 100%) - a slanted right edge carried over from the original export. It also cancelled the border-radius down that side, so the panel had one square-cut corner and three rounded ones. With it removed, overflow:hidden + border-radius round all four corners evenly. */ background:var(--light-bg); } .sana-map-section .map-stage{position:absolute;inset:0;transform-origin:center;transition:transform 0.5s ease-in-out} /* sana-map-canvas, NOT the export's .map-canvas: the theme's own external/js/custom.js (loaded on every page of this site) runs `Gmap = $('.map-canvas')` and builds a Google map inside anything carrying that class. It found this SVG, wiped its contents and mounted Google Maps in their place - so the fallback map was blank, and every visit paid for a Google map load nobody could see. */ .sana-map-section .sana-map-canvas{position:absolute;inset:0;width:100%;height:100%} /* stepped zoom on the fallback: the stage grows, pins counter-scale via --pz */ .sana-map-section .map-panel[data-zoom="2"] .map-stage{transform:scale(1.4)} .sana-map-section .map-panel[data-zoom="3"] .map-stage{transform:scale(1.9)} .sana-map-section .map-panel[data-zoom="2"]{--pz:.72} .sana-map-section .map-panel[data-zoom="3"]{--pz:.53} .sana-map-section .mp-land{fill:var(--light-bg)} .sana-map-section .mp-sand{fill:#E4DCCB} .sana-map-section .mp-water{fill:var(--light-blue);opacity:.55} .sana-map-section .mp-green{fill:var(--muted);opacity:.45} .sana-map-section .mp-border{stroke:var(--muted-dark);stroke-width:1.4;fill:none;opacity:.55;stroke-dasharray:7 5;vector-effect:non-scaling-stroke} .sana-map-section .mp-road{stroke:#fff;stroke-width:5;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke} .sana-map-section .mp-road-case{stroke:var(--muted);stroke-width:8;fill:none;opacity:.5;stroke-linecap:round;vector-effect:non-scaling-stroke} .sana-map-section .mp-label{fill:var(--muted-dark);font-size:13px;font-weight:400;letter-spacing:.14em} /* ===== Region pins: the photo sits inside the marker ===== */ .sana-map-section .map-pin{ position:absolute;left:var(--x);top:var(--y);z-index:2; display:flex;flex-direction:column;align-items:center; transform:translate(-50%,-100%) scale(var(--pz,1)); transform-origin:bottom center; color:var(--brand); transition:var(--ease); } .sana-map-section .map-pin:hover{transform:translate(-50%,-100%) scale(calc(var(--pz,1) * 1.07));z-index:5} .sana-map-section .pin-photo{ display:block;width:56px;height:56px; border-radius:10px;border:3px solid currentColor; background-size:cover;background-position:center; background-color:var(--light-bg2); } .sana-map-section .pin-stem{display:block;width:2px;height:10px;background:currentColor} .sana-map-section .pin-chip{ margin-top:6px;padding:6px 14px; border-radius:5px; /* .gpin-wrap sets line-height:0 to kill marker baseline drift; the chip has to restore its own or the text box collapses and the padding never shows */ font-size:11px;line-height:1.1;font-weight:var(--fw-heading);letter-spacing:.04em; white-space:nowrap;background:var(--brand);color:#fff; } /* ===== Zoom / reset controls ===== */ .sana-map-section .map-zoom{position:absolute;right:20px;top:20px;z-index:4;display:flex;flex-direction:column;gap:6px} .sana-map-section .map-zoom button{ width:34px;height:34px; display:flex;align-items:center;justify-content:center; background:#fff;color:var(--navy);font-size:17px;line-height:1; /* 2026-09-04: the matching 8px corner slash removed here too, same reason as on .map-panel above - the three buttons are now plain rounded squares. */ border-radius:8px; transition:var(--ease); } .sana-map-section .map-zoom button:hover{background:var(--light-bg2)} .sana-map-section .map-zoom button svg{display:block} /* ========================================================================== Live vector map (MapLibre + self-hosted PMTiles) .gmap sits under the SVG basemap and cross-fades in once the tiles are up. Everything here is gated on .map-live, so the fallback keeps its own look. ========================================================================== */ .sana-map-section .gmap{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s ease} .sana-map-section .map-live .gmap{opacity:1;pointer-events:auto} .sana-map-section .map-live .map-stage{opacity:0;pointer-events:none;transition:opacity .4s ease} /* same beige the basemap paints - kills the flash before the first frame */ .sana-map-section .map-live{background:var(--light-bg)} .sana-map-section .gmap .maplibregl-map{font-family:var(--font-latin)} .sana-map-section .gmap canvas{outline:none} /* Attribution: OpenStreetMap's licence REQUIRES this stays visible. Restyle it, never hide it. */ .sana-map-section .gmap .maplibregl-ctrl-attrib{ background:rgba(255,255,255,.82); font-size:10px;border-radius:5px 0 0 0; } /* 2026-09-04: the credit was printing at 16px semi-bold and reading like a headline across the bottom of the map. Why the 10px above was not doing anything: the credit is built out of elements, and the theme's own assets/css/style.css has a bare `a { font-size:16px; font-weight:600; font-family:'main' }` that applies to every link on the site. A bare element selector loses to the three classes here, so restating the size and weight on the links themselves is all that is needed - no !important, and nothing in the theme is touched. The text is unchanged. OpenStreetMap's licence requires the credit stays readable, so this makes it small and quiet, never hidden. */ .sana-map-section .gmap .maplibregl-ctrl-attrib a{ color:var(--muted-dark); font-family:inherit; font-size:10px; font-weight:400; line-height:1.5; /* The only !important in this file, and it is unavoidable. Under 768px the theme's own style.css carries a blanket @media screen and (max-width:768px){ a { padding:14px 30px !important } } (and 12px 26px under 480px) that hits every link on the site. It was padding the two credit links out to nearly the full width of the map on a phone, which is most of why the strip looked so big there. Nothing but !important beats !important, so it is restated here - scoped to these two links inside the map credit and nothing else. */ padding:0!important; } .sana-map-section .gmap .maplibregl-ctrl-attrib-inner{line-height:1.5} /* MapLibre ships the little (i) that folds the credit away at 24px, which is now taller than the strip itself. Scaled down and centred on it. */ .sana-map-section .gmap .maplibregl-ctrl-attrib-button{ width:16px;height:16px;border-radius:8px; background-size:16px 16px;background-position:center; top:50%;transform:translateY(-50%); } .sana-map-section .gmap .maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 20px 2px 7px} .sana-map-section .gmap .maplibregl-ctrl-bottom-right{z-index:3} /* 2026-09-04: the "use ctrl + scroll to zoom the map" overlay is hidden by request. It is MapLibre's own .maplibregl-cooperative-gesture-screen, shown over the whole panel whenever the wheel is used on the map. Only the OVERLAY is hidden. explore-map.js keeps cooperativeGestures:true, and that must stay: it is what lets a plain wheel-scroll over the map scroll the PAGE. Turn the option off to kill the overlay and the map swallows the wheel instead, trapping anyone who scrolls down through this section. So the behaviour is unchanged - scroll passes through, cmd/ctrl + scroll zooms - the map just no longer says so. Zooming stays discoverable through the +/- buttons in the corner. */ .sana-map-section .gmap .maplibregl-cooperative-gesture-screen{display:none} /* reset only means something once there's a real camera to reset */ .sana-map-section .map-zoom [data-map-reset]{display:none} .sana-map-section .map-live .map-zoom [data-map-reset]{display:flex} /* ===== Pins on the live map ===== MapLibre owns .gpin-wrap's inline transform (that is how it positions the marker), so the pin inside it only ever scales, from its own bottom-centre tip. The inherited `transition:all` has to go or every map move animates. */ .sana-map-section .gpin-wrap{line-height:0;will-change:transform} .sana-map-section .gpin{ position:static;left:auto;top:auto; transform:scale(var(--pz,1)); transform-origin:bottom center; transition:transform .25s ease,opacity .25s ease,filter .25s ease; } .sana-map-section .gpin:hover{transform:scale(calc(var(--pz,1) * 1.07))} .sana-map-section .gpin .pin-photo{box-shadow:0 6px 18px rgba(2,31,65,.22)} .sana-map-section .gpin-wrap:has(.gpin.hot), .sana-map-section .gpin-wrap:has(.gpin.active){z-index:6} .sana-map-section .gpin.active{transform:scale(calc(var(--pz,1) * 1.12))} .sana-map-section .gpin.active .pin-photo{box-shadow:0 0 0 4px rgba(121,82,150,.30),0 10px 24px rgba(2,31,65,.3)} /* Pulled back to Kingdom scale, fourteen region names overlap into mush, so the chips are dropped - except on the pin actually being hovered, which is how you read a region's name without clicking it. */ .sana-map-section .map-live[data-pz="far"] .pin-chip{display:none} .sana-map-section .map-live[data-pz="far"] .gpin.hot .pin-chip, .sana-map-section .map-live[data-pz="far"] .gpin.active .pin-chip{display:block} .sana-map-section .map-live[data-pz="far"] .pin-photo{border-width:4px;border-radius:14px} /* 2026-09-04: pulled back, --pz shrinks the whole pin to half size, which took the chip's 11px name down to ~5px - the label was on screen but unreadable. The hovered chip now divides --pz back out of itself, so the name always renders at its own size whatever the camera is doing, plus a small bump so it reads as the thing you are pointing at. It grows from its top edge, so it drops away from the photo instead of covering it. */ .sana-map-section .gpin .pin-chip{ transform-origin:top center; transition:transform .2s ease; } .sana-map-section .gpin.hot .pin-chip, .sana-map-section .gpin.active .pin-chip{ transform:scale(calc(1.12 / var(--pz,1))); } /* The photo has the same problem as the chip: --pz takes the 56px thumbnail down to 28px at Kingdom zoom, and the pin's own 1.07 hover on top of that is a change of one pixel - nothing you can see. So the photo divides --pz out of itself too, landing the hovered thumbnail at a steady ~42px however far the camera is pulled back. max() is the floor: once the map is zoomed in and the photo is already near full size, dividing would shrink it, so it takes the flat 1.08 nudge instead. It grows from its bottom edge, so the stem stays joined to it and the pin keeps pointing at the same spot on the map. */ .sana-map-section .gpin .pin-photo{ transform-origin:bottom center; transition:transform .2s ease,box-shadow .2s ease; } .sana-map-section .gpin.hot .pin-photo, .sana-map-section .gpin.active .pin-photo{ transform:scale(max(1.08, calc(0.75 / var(--pz,1)))); } /* ===== Region card, opened by clicking a pin ===== Built in JS by explore-map.js and appended to the panel. */ .sana-map-section .map-card{ position:absolute;left:20px;bottom:44px;z-index:5; width:286px;background:#fff;color:var(--navy); /* 2026-09-04: corner slash removed here as well, so the card matches the panel and the zoom buttons - it was the last thing on the map still cutting its top-right corner. */ border-radius:14px;overflow:hidden; box-shadow:0 18px 44px rgba(2,31,65,.26); opacity:0;visibility:hidden; transform:translateY(14px) scale(.97);transform-origin:bottom left; transition:opacity .3s ease,transform .3s ease,visibility .3s; } .sana-map-section .map-card.open{opacity:1;visibility:visible;transform:none} .sana-map-section .mc-img{height:132px;background:var(--light-bg2) center/cover no-repeat} .sana-map-section .mc-body{padding:14px 16px 16px} .sana-map-section .mc-chip{ display:inline-block;margin-bottom:8px;padding:4px 9px;border-radius:5px; font-size:10px;font-weight:var(--fw-heading);letter-spacing:.06em;text-transform:uppercase; background:var(--brand);color:#fff; } .sana-map-section .mc-title{font-size:17px;line-height:1.25} .sana-map-section .mc-sub{margin-top:3px;font-size:12px;color:var(--muted-dark)} .sana-map-section .mc-cta{ display:inline-flex;align-items:center;gap:6px;margin-top:12px; font-size:12px;font-weight:var(--fw-heading);letter-spacing:.04em; text-transform:uppercase;color:var(--link); } .sana-map-section .mc-cta svg{width:14px;height:14px;transition:var(--ease)} .sana-map-section .mc-cta:hover svg{transform:translate(2px,-2px)} .sana-map-section .mc-x{ position:absolute;right:10px;top:8px;z-index:2; width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.9);color:var(--navy); font-size:19px;line-height:1;transition:var(--ease); } .sana-map-section .mc-x:hover{background:#fff;color:var(--brand-dark)} /* ========================================================================== Host-page defence. The section is rendered inside the Destinations page's own
, and the theme's own assets/css/style.css carries ID-level rules there - `#blog h4` (colour, text-align, padding-bottom) and `#blog p` (colour). An ID selector outranks every class selector in this file, so those two rules were recolouring and re-aligning the pin card's title and subtitle. Restating them at ID strength is the only thing that wins without !important. text-align:start rather than left, so the Arabic page still reads right. ========================================================================== */ #explore .mc-title{color:var(--navy);text-align:start;padding-bottom:0} #explore .mc-sub{color:var(--muted-dark);text-align:start} /* ===== Scroll reveal ===== */ .sana-map-section .reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease} .sana-map-section .reveal.visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .sana-map-section .reveal{opacity:1;transform:none;transition:none} } /* ===== Responsive ===== */ @media (max-width:1024px){ .sana-map-section .map-panel{height:448px} } @media (max-width:640px){ .sana-map-section .sms-container{padding:0 16px} .sana-map-section{padding:60px 0 70px} .sana-map-section .map-panel{height:336px;--pz:.8} .sana-map-section .map-zoom{right:14px;top:14px} /* card spans the panel on a phone rather than floating in a corner */ .sana-map-section .map-card{left:14px;right:14px;bottom:40px;width:auto;display:flex} .sana-map-section .mc-img{flex:none;width:104px;height:auto;min-height:104px} .sana-map-section .mc-body{padding:12px 14px 14px} .sana-map-section .mc-title{font-size:15px} .sana-map-section .mc-cta{margin-top:9px} } /* ===== Arabic ===== themes/ar sets direction:rtl on - with no dir attribute anywhere on the page - so [dir="rtl"] would never match. The Arabic template adds .sana-map-rtl to the section instead. Mirrors the floating controls and card; the MapLibre canvas itself is unaffected. */ .sana-map-section.sana-map-rtl .map-zoom{right:auto;left:20px} .sana-map-section.sana-map-rtl .map-card{left:auto;right:20px;transform-origin:bottom right} .sana-map-section.sana-map-rtl .mc-x{right:auto;left:10px} .sana-map-section.sana-map-rtl .mc-cta svg{transform:scaleX(-1)} .sana-map-section.sana-map-rtl .mc-cta:hover svg{transform:scaleX(-1) translate(2px,-2px)} /* T52: the map credit (© OpenStreetMap, Protomaps) kept MapLibre's Helvetica - `.gmap .maplibregl-map` above never matches. This one does, /ar only. */ .sana-map-section.sana-map-rtl .maplibregl-map{font-family:var(--font-latin)} @media (max-width:640px){ .sana-map-section.sana-map-rtl .map-card{left:14px;right:14px} .sana-map-section.sana-map-rtl .map-zoom{left:14px;right:auto} } /* ========================================================================== Map caption - the title and short description above the map. Added 2026-09-04 on request. Brand typefaces added 2026-09-04. Purely additive. Nothing above this line was touched, and deleting this block (together with the .map-caption markup in themes/en/page/v.phtml and themes/ar/page/v.phtml, and the /exploremap/fonts/ folder) puts the section back exactly as it was. Width is 80%, the same as .map-panel below it, so the text block lines up with the two edges of the map at every screen size. The ID-strength selectors are the same defence the pin card needs further up this file: the section renders inside the Destinations page's own
, and the theme's assets/css/style.css carries `#blog h2` (dark grey, centred, 160px of side padding) and `#blog p` (grey #9B9B9B). An ID selector outranks every class selector here, so on this blue ground the heading would come out dark grey and heavily indented and the paragraph mid-grey. Restating both at ID strength is the only way to win without !important. Centred text reads correctly in Arabic as well, so the RTL block above needs nothing added for this. ---- Why this block carries its own @font-face rules ---- The brand guidelines set Almarai for headings and PT Sans for body. The section used to ask for the theme's own `main` family (--font-latin) for both, which gave neither: - Almarai is not on the site at all - no file, no @font-face, nowhere. - `main` is declared TWICE in themes/{en,ar}/assets/css/style.css (lines 75-87) with NO font-weight descriptor on either rule. Both therefore claim the same slot (family + weight 400 + style normal), the second wins, and the Regular face is shadowed. `main` resolves to PT Sans BOLD and nothing else. That is why the description below rendered bold no matter what font-weight was asked for - there is no lighter face to fall back to, and browsers do not synthesise lighter. Fixing those two @font-face rules in style.css would be the tidy fix, but that file is shared by every page on a live site: it would restyle every h1-h6, link and button at once. So this block declares its own faces under their own family names instead. Nothing outside .map-caption is affected. Files live in /exploremap/fonts/ next to the map's other assets. Both families are SIL OFL (licences alongside them), so self-hosting is fine. unicode-range means an English page downloads only the two latin subsets (~21KB) and an Arabic page only the two arabic ones (~37KB). font-display:swap - text paints immediately in the fallback and reflows when the face lands. Never invisible, which matters for the LCP on a page that ranks. ========================================================================== */ /* Almarai - headings. Latin for themes/en, arabic for themes/ar. */ @font-face{ font-family:'Sana Almarai'; font-style:normal; font-weight:700; font-display:swap; src:url('/exploremap/fonts/Almarai-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Sana Almarai'; font-style:normal; font-weight:700; font-display:swap; src:url('/exploremap/fonts/Almarai-700-arabic.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } /* Almarai Regular - body copy on the Arabic page only. PT Sans carries no Arabic glyphs, so the description there would silently fall through to whatever Arabic face the visitor's OS happens to ship. Almarai 400 is the brand's own regular weight and covers the script. */ @font-face{ font-family:'Sana Almarai'; font-style:normal; font-weight:400; font-display:swap; src:url('/exploremap/fonts/Almarai-400-arabic.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } /* PT Sans Regular - body copy on the English page. The 400 face the theme has but cannot reach. Taken as a woff2 subset rather than pointing at /themes/en/fonts/PTSans-Regular.ttf, which is the same typeface at 278KB. */ @font-face{ font-family:'Sana PT Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/exploremap/fonts/PTSans-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Sana PT Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/exploremap/fonts/PTSans-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } .sana-map-section .map-caption{ width:80%; margin:0 auto 34px; text-align:center; } #explore .map-caption-title{ color:#fff; font-family:'Sana Almarai',var(--font-latin); font-weight:700; font-size:30px; line-height:1.3; letter-spacing:-0.01em; text-align:center; padding:0; margin:0 0 12px; } #explore .map-caption-text{ color:rgba(255,255,255,.92); font-family:'Sana PT Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:17px; font-weight:400; line-height:1.65; text-align:center; max-width:760px; margin:0 auto; padding:0; } /* Arabic page: PT Sans has no Arabic, so the body takes Almarai Regular. */ .sana-map-rtl .map-caption-text, #explore.sana-map-rtl .map-caption-text{ font-family:'Sana Almarai','main',system-ui,sans-serif; /* T52: 'main' is Almarai on /ar - draws the digits and punctuation */ font-weight:400; } @media (max-width:1024px){ #explore .map-caption-title{font-size:26px} } @media (max-width:640px){ .sana-map-section .map-caption{margin-bottom:26px} #explore .map-caption-title{font-size:22px} #explore .map-caption-text{font-size:15px} }