/* Extracted from bahrain-map.php so it is cached once instead of being re-sent inside the HTML on every page view. Enqueued by lumoria_enqueue_template_styles() in functions.php. */ #lumBahrainMap, #lumBahrainMap * { box-sizing: border-box; } #lumBahrainMap { --map-mint: #44bda1; --map-mint-dark: #14836e; --map-ink: #04272f; --map-paper: #faf9f7; --map-line: rgba(116, 194, 179, .21); font-family: var(--font-primary); padding: clamp(58px, 7vw, 92px) 0; background: var(--map-paper); color: var(--map-ink); /* Geographic positioning below is deliberately physical: the pins, labels and leader lines are placed against a fixed map of Bahrain. Mirroring them under [dir="rtl"] would mirror the country, so they must NOT use logical properties. */ } #lumBahrainMap .lum-map-shell { width: 100%; max-width: var(--container-w); margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); } #lumBahrainMap .lum-map-head { max-width: 870px; margin-bottom: 38px; } #lumBahrainMap .lum-map-eyebrow { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 20px; border: 1px solid rgba(68, 189, 161, .45); border-radius: 999px; color: var(--map-mint-dark); background: rgba(88, 199, 166, .06); font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin-bottom: 23px; } #lumBahrainMap .lum-map-title { margin: 0 0 12px; font-family: var(--font-primary); font-size: var(--text-h2); font-weight: var(--fw-heading); letter-spacing: var(--ls-h2); line-height: 1.15; color: var(--map-ink); } #lumBahrainMap .lum-map-intro { margin: 0; color: #607070; font-size: var(--text-base); line-height: var(--lh-prose); } /* This height is load-bearing and must stay DEFINITE. The map is an SVG with no intrinsic height, and .lum-map-canvas/.lum-map-image are height:100% of it, so a percentage here has to resolve against a real number; relaxing it to min-height made the percentages indefinite, the row fell back to the image's own box and the section rendered 1299px tall. The card beside it therefore has a fixed 700px budget to divide -- see .lum-map-card-media. */ #lumBahrainMap .lum-map-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(410px, 1fr); gap: 24px; align-items: stretch; height: 700px; } /* The stage is the map image itself. Its own sea colour fills the frame so the letterboxing either side of the portrait image is invisible. */ #lumBahrainMap .lum-map-stage { position: relative; display: flex; justify-content: center; height: 100%; min-height: 0; overflow: hidden; isolation: isolate; border: 1px solid #bcdfec; border-radius: 34px; background: #91d6e9; } /* Shrink-wrapped to the rendered image, so a pin's percentage is a percentage of the map rather than of the frame around it. */ #lumBahrainMap .lum-map-canvas { position: relative; flex: 0 0 auto; height: 100%; } #lumBahrainMap .lum-map-image { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } /* Every building on this map sits inside Manama, so the labels would pile on top of each other if each one were pinned to its own coordinate. The pin is therefore a zero-size anchor at the true position: the dot stays exactly on it, while the label is free to slide up or down (--label-dy, set by bahrain-map.js) until it clears its neighbours. A leader line, sized and angled by the same script, ties the moved label back to its dot. */ #lumBahrainMap .lum-map-pin { position: absolute; z-index: 4; width: 0; height: 0; padding: 0; border: 0; background: none; color: #0a3030; font: inherit; cursor: pointer; text-decoration: none; } /* Whichever pin the visitor is on comes forward, labels and all. */ #lumBahrainMap .lum-map-pin:hover, #lumBahrainMap .lum-map-pin:focus-visible, #lumBahrainMap .lum-map-pin.is-active { z-index: 6; } #lumBahrainMap .lum-map-pin:focus-visible { outline: 0; } #lumBahrainMap .lum-map-pin-dot { position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; border: 2px solid #fff; border-radius: 50%; background: var(--map-ink); box-shadow: 0 2px 6px rgba(9, 40, 48, .4); transition: background .28s ease, transform .28s ease; } #lumBahrainMap .lum-map-pin-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; } #lumBahrainMap .lum-map-pin:hover .lum-map-pin-dot, #lumBahrainMap .lum-map-pin:focus-visible .lum-map-pin-dot, #lumBahrainMap .lum-map-pin.is-active .lum-map-pin-dot { background: var(--map-mint-dark); transform: scale(1.18); } #lumBahrainMap .lum-map-pin-label { --label-gap: 22px; position: absolute; left: 0; top: 0; z-index: 1; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .96); color: inherit; box-shadow: 0 2px 4px rgba(9, 40, 48, .28), 0 8px 20px rgba(9, 40, 48, .18); font-size: 13px; font-weight: 700; line-height: 1.15; white-space: nowrap; transform: translate(var(--label-gap), calc(-50% + var(--label-dy, 0px))); transition: color .28s ease, background .28s ease, box-shadow .28s ease; } #lumBahrainMap .lum-map-pin.is-left .lum-map-pin-label { left: auto; right: 0; transform: translate(calc(var(--label-gap) * -1), calc(-50% + var(--label-dy, 0px))); } #lumBahrainMap .lum-map-pin:hover .lum-map-pin-label, #lumBahrainMap .lum-map-pin:focus-visible .lum-map-pin-label, #lumBahrainMap .lum-map-pin.is-active .lum-map-pin-label { color: #062c2b; background: var(--map-mint); box-shadow: 0 12px 30px rgba(4, 22, 21, .24); } #lumBahrainMap .lum-map-pin:focus-visible .lum-map-pin-label { outline: 3px solid #fff; outline-offset: 3px; } /* Leader line: it starts at the label edge nearest the dot and is rotated back onto it, so a label that has been pushed aside still reads as belonging to its own point. */ #lumBahrainMap .lum-map-pin-label::before { content: ''; position: absolute; top: 50%; left: 0; width: var(--conn-len, var(--label-gap)); height: 2px; border-radius: 2px; background: rgba(4, 39, 47, .72); /* Hairline of white so the line stays legible over roads and place names on the map beneath it. */ box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); transform-origin: 0 50%; transform: rotate(var(--conn-rot, 180deg)); } #lumBahrainMap .lum-map-pin.is-left .lum-map-pin-label::before { left: auto; right: 0; transform-origin: 100% 50%; } #lumBahrainMap .lum-map-pin:hover .lum-map-pin-label::before, #lumBahrainMap .lum-map-pin:focus-visible .lum-map-pin-label::before, #lumBahrainMap .lum-map-pin.is-active .lum-map-pin-label::before { background: var(--map-mint-dark); } #lumBahrainMap .lum-map-caption { position: absolute; left: 22px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #17494a; font-size: 12px; line-height: 1.5; box-shadow: 0 2px 8px rgba(9, 40, 48, .14); } #lumBahrainMap .lum-map-caption::before { content: ''; width: 22px; height: 1px; background: var(--map-mint-dark); } #lumBahrainMap .lum-map-card { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #d7e3e1; border-radius: 34px; background: #fff; box-shadow: 0 14px 34px rgba(12, 54, 51, .075); } /* The card divides the fixed 700px budget set by .lum-map-grid, and this photo is what is left after the body. It is worth knowing how tight that is: when the actions took two lines, the body needed 524px of the 698px available and the card's overflow:hidden silently ate the difference -- which is exactly where the Maps link sat. A single-line action bar buys those 52px back, which is the only reason the photo can keep its designed height. Verified: every building, both languages, all three pages, still clears the body's 30px bottom padding by ~39px. Shortening that action bar is what pays for this, so lengthening a button label again will start clipping. Below 1100px the card is a two-column grid and this is overridden. */ #lumBahrainMap .lum-map-card-media { flex: 0 0 232px; height: 232px; overflow: hidden; background: #d8e4e1; } #lumBahrainMap .lum-map-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .24s cubic-bezier(.4, 0, .2, 1), transform .65s cubic-bezier(.4, 0, .2, 1); } #lumBahrainMap .lum-map-card:hover .lum-map-card-media img { transform: scale(1.025); } #lumBahrainMap .lum-map-card-body { display: flex; flex: 1; min-height: 0; flex-direction: column; padding: 28px 30px 30px; opacity: 1; transform: translateY(0); transition: opacity .24s cubic-bezier(.4, 0, .2, 1), transform .24s cubic-bezier(.4, 0, .2, 1); } #lumBahrainMap .lum-map-card.is-changing .lum-map-card-body, #lumBahrainMap .lum-map-card.is-changing .lum-map-card-media img { opacity: 0; } #lumBahrainMap .lum-map-card.is-changing .lum-map-card-body { transform: translateY(5px); } #lumBahrainMap .lum-map-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; min-height: 29px; } #lumBahrainMap .lum-map-chip { padding: 6px 13px; border-radius: 999px; color: #073734; background: rgba(68, 189, 161, .88); font-size: 11px; font-weight: 600; } #lumBahrainMap .lum-map-card-title { min-height: 35px; margin: 0 0 5px; font-family: var(--font-primary); font-size: var(--text-xl); line-height: var(--lh-snug); color: #062d2c; font-weight: var(--fw-semibold);} #lumBahrainMap .lum-map-location { display: flex; align-items: center; gap: 8px; min-height: 21px; margin: 0 0 14px; color: #657272; font-size: 13px; } #lumBahrainMap .lum-map-location i { color: var(--map-mint-dark); } #lumBahrainMap .lum-map-description { display: -webkit-box; min-height: 64px; max-height: 64px; margin: 0 0 17px; overflow: hidden; color: #5e6b6b; font-size: 14px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } #lumBahrainMap .lum-map-stats { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0 0 18px; padding: 15px 18px; border-radius: 18px; background: #f7ece5; } #lumBahrainMap .lum-map-stat span { display: block; margin-bottom: 3px; color: #6b7473; font-size: 11px; } #lumBahrainMap .lum-map-stat strong { color: #092f2f; font-size: 16px; } #lumBahrainMap .lum-map-stat:last-child strong { color: var(--map-mint-dark); } #lumBahrainMap .lum-map-suitable { min-height: 48px; margin: 0 0 18px; color: #102f2f; font-size: 12px; line-height: 1.45; } #lumBahrainMap .lum-map-suitable span { display: block; margin-bottom: 4px; color: #697473; font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; } #lumBahrainMap .lum-map-suitable b { display: -webkit-box; overflow: hidden; font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #lumBahrainMap .lum-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; } /* white-space keeps a label from breaking inside its own pill, which is what a two-line "Open in Google Maps" inside a 42px rounded button looked like. The row wraps between buttons instead. */ #lumBahrainMap .lum-map-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 12px; border-radius: 999px; color: #082e2d; border: 1px solid #d5dfdd; background: #fff; text-decoration: none; font-size: var(--text-sm); font-weight: var(--fw-semibold); white-space: nowrap; transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; line-height: 1;} #lumBahrainMap .lum-map-action:hover { transform: translateY(-2px); border-color: var(--map-mint); } #lumBahrainMap .lum-map-action.primary { border-color: var(--map-mint); background: var(--map-mint); } /* The Ask button leaves for WhatsApp, so it carries WhatsApp's own green on the mark. Only the icon is tinted: a fully green button would out-shout "View building", which is still the primary action. */ #lumBahrainMap .lum-map-action.whatsapp i { color: #25d366; font-size: 15px; } #lumBahrainMap .lum-map-action.whatsapp:hover { border-color: #25d366; } /* The three actions divide the row evenly: flex-basis 0 makes the share equal rather than proportional to label length, and min-width:max-content stops a pill being squeezed narrower than its own text where the card is tightest (345px at 768px). Below 481px they go full width instead -- see the media query further down, where a comfortable tap target matters more than keeping one row. */ #lumBahrainMap .lum-map-action { flex: 1 1 0; min-width: max-content; } /* Maps is a pill like the other two, so the three read as one set. It was a small muted text link, which is what made the row look lopsided: 57px of grey type beside two 120px buttons. Its label is short by necessity -- measured in the pill's own font, "Google Maps" needs 389px against the 345px the card column gives at 768px, so the row would wrap on tablets. The Google-red pin carries the brand and the full phrase is the link's aria-label. */ #lumBahrainMap .lum-map-action.maps:hover { border-color: #d5dfdd; } /* Google Maps pin, in Google's brand red. Never mirrored in RTL — a brand mark reads the same way round in every language. */ #lumBahrainMap .lum-map-gicon { width: 15px; height: 15px; flex-shrink: 0; display: block; } [dir="rtl"] #lumBahrainMap .lum-map-gicon { transform: none; } @media (max-width: 1100px) { #lumBahrainMap .lum-map-grid { grid-template-columns: 1fr; height: auto; } /* Once the grid drops its fixed 700px the stage needs a definite height of its own, for the same reason given above .lum-map-grid. It used to get height:auto plus a min-height, which left the image at its natural 1067x1297: a 1298px-tall stage on every phone and tablet, cropped to a strip down the middle of the country. The stage is now sized from its width by the map's own aspect ratio, made taller at the client's request in two 5% steps (1297 -> 1362 -> 1430): the map scales up with it and loses ~18px of open sea either side on a phone (465px tall at 375px). The cap, raised by the same two steps from the old 620px, stops tablets and landscape phones growing taller than that or the screen; width:100% keeps the cap from narrowing the frame, so the map is centred on the sea colour instead. Stage-only maps are sized by their host page and keep their own rules below. */ #lumBahrainMap:not(.is-stage-only) .lum-map-stage { width: 100%; height: auto; min-height: 0; aspect-ratio: 1067 / 1430; max-height: min(684px, 88vh); } #lumBahrainMap .lum-map-card { display: grid; grid-template-columns: minmax(300px, .85fr) 1.15fr; } #lumBahrainMap .lum-map-card-media { height: 100%; min-height: 520px; } #lumBahrainMap .lum-map-card-body { min-height: 520px; } } @media (max-width: 720px) { #lumBahrainMap .lum-map-shell { padding-inline: 14px; } #lumBahrainMap .lum-map-head { margin-inline: 6px; } #lumBahrainMap .lum-map-grid { gap: 18px; } #lumBahrainMap .lum-map-stage { border-radius: 24px; } /* The stage is now only as wide as the column (277px at 320px), so the caption gets an even inset and may not run past the frame. */ #lumBahrainMap .lum-map-caption { left: 12px; bottom: 12px; max-width: calc(100% - 24px); } /* Phones keep the building names, just smaller, and bahrain-map.js stacks them clear of each other exactly as on desktop. Checked with all eight pins, English and Arabic, from 320px to 720px: no label is clipped or overlaps another; the tightest is "Salmaniya Plaza" at 320px, 6px inside the frame. The 22px --label-gap must stay as it is: the script's LABEL_GAP draws the leader lines from it. */ #lumBahrainMap .lum-map-pin-label { padding: 5px 9px; font-size: 11px; } #lumBahrainMap .lum-map-pin-dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; } #lumBahrainMap .lum-map-pin-dot::after { width: 6px; height: 6px; } #lumBahrainMap .lum-map-card { display: flex; border-radius: 24px; } #lumBahrainMap .lum-map-card-media { height: 230px; min-height: 230px; } #lumBahrainMap .lum-map-card-body { min-height: 490px; padding: 25px 22px; } /* The Maps link is full-width and left-aligned at every width now, so the override that used to do it only here has gone. */ } #lumBahrainMap.is-stage-only { min-width: 0; height: 100%; padding: 0; background: transparent; } #lumBahrainMap.is-stage-only .lum-map-shell, #lumBahrainMap.is-stage-only .lum-map-grid { width: 100%; height: 100%; padding-inline: 0; } #lumBahrainMap.is-stage-only .lum-map-grid { display: block; } #lumBahrainMap.is-stage-only .lum-map-stage { height: 100%; min-height: 520px; border-radius: 18px; } /* Phones: the two buttons go full width. They would otherwise wrap to two ragged, unequal pills, and a full-width target is easier to hit. */ @media (max-width: 480px) { #lumBahrainMap .lum-map-action { flex: 1 1 100%; } } @media (max-width: 1100px) { #lumBahrainMap.is-stage-only .lum-map-stage { min-height: 460px; } } @media (max-width: 720px) { #lumBahrainMap.is-stage-only .lum-map-stage { min-height: 420px; } } @media (prefers-reduced-motion: reduce) { #lumBahrainMap *, #lumBahrainMap *::before, #lumBahrainMap *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }