/* ============================================================ * ============================================================ * * BOOKING MAP MODULE — styles for [booking_map] shortcode * Clickable floor-plan areas + popup that fills the * Gravity Forms "Area" dropdown (CSS class: booking-area). * Pairs with booking-map.php. * * Fonts (Comfortaa / Manrope) are loaded by the @import * in style.css. * * ============================================================ * ============================================================ */ /* Shared tokens — change colours / fonts here */ .booking-map, .booking-map-tooltip { --booking-map-navy: #1A445A; --booking-map-muted: #737272; --booking-map-card-bg: #ffffff; --booking-map-accent: #64A09B; --booking-map-card-shadow: 0 0 24px rgba(0, 0, 0, 0.18); /* even all round — no downward shift */ --booking-map-radius: 16px; --booking-map-pad: 18px; /* popup text padding */ --booking-map-media-pad: 10px; /* badge + close button distance from the photo edges */ --booking-map-heading-font: "Comfortaa", sans-serif; --booking-map-body-font: "Manrope", sans-serif; /* Area highlight brightness (0 = invisible, 1 = solid white) */ --booking-map-zone-rest: 0.3; /* every area, always — "minimum visibility" */ --booking-map-zone-pulse: 0.6; /* peak of the attract loop */ --booking-map-zone-pulse-scale: 1.05; /* area grows this much at the peak of its glow (1 = no scale) */ --booking-map-zone-active: 0.6; /* open popup / chosen in the form */ } /* Map — background image with the zones SVG laid exactly on top. Without a background image the SVG sits in normal flow on its own. */ .booking-map { position: relative; width: 100%; } /* Rounded corners clip the image and the zone highlights alike (the popup lives on , so it is never clipped). isolation: isolate keeps Safari clipping the corners while the zones fade in and out. */ .booking-map-stage { position: relative; overflow: hidden; border-radius: var(--booking-map-radius); isolation: isolate; } .booking-map-bg { display: block; width: 100%; height: auto; } .booking-map-zones svg { display: block; width: 100%; height: auto; } .booking-map-stage.has-bg .booking-map-zones { position: absolute; inset: 0; } .booking-map-stage.has-bg .booking-map-zones svg { height: 100%; } /* Zones. Only opacity is changed, so the fill colour from the SVG artwork is kept (the feather filter is added by booking-map.js). Named shapes that are not (yet) areas stay hidden: before the script runs, if it fails, or a shape in the SVG has no entry in the area list. The script turns real areas into .booking-map-zone. Shapes only, not : a named wrapper group at opacity 0 would hide its zones for good. */ .booking-map-zones svg :is(path, rect, polygon, polyline, circle, ellipse)[id]:not(.booking-map-zone) { opacity: 0; } /* Resting state: every area faintly visible. Two classes so it outranks a