and applies the className, so this rule targets the wrapper. */ .lt-ais-label{ background:rgba(255,255,255,0.85); padding:1px 6px; border-radius:6px; text-shadow:0 1px 1px rgba(255,255,255,0.8); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); box-shadow:0 1px 2px rgba(9,28,53,0.12); white-space:nowrap; line-height:1.2; } .lt-ais-label--oncoming{ /* Light-red tint pairs with the red halo on oncoming vessels. */ background:rgba(255,232,228,0.92); box-shadow:0 1px 2px rgba(225,29,42,0.18); } /* "You are here" dot - the AdvancedMarker content div that src/shared/my-location.js renders on EVERY map surface (standard tour, vaarverkeer, vaarinfo). Google-Maps-default skin: solid blue disc, white stroke, soft halo. Lives here, not in tour.css: my-location.js is shared by three pages but the rule used to sit in src/tour/tour.css, which pages/vaarinfo.html does not load. Result was a 0x0 transparent div on that page - the captain saw only the 8%-opacity accuracy circle and had to zoom all the way in to find himself (2026-07-27). Keep this rule in a stylesheet every map page links. */ .gmaps-userdot{ width:16px;height:16px;border-radius:50%;background:#1976D2;border:2.5px solid #fff; box-shadow:0 0 0 4px rgba(25,118,210,0.18); } /* ── Liquid Glass treatment for Google InfoWindow popups ───────────────── Applied here in shared-overlays.css (loaded by BOTH index.html standard tour + live.html live tour) so both surfaces render identical glass chrome. Content INSIDE the popup is still styled per-page: - .gmaps-popup (tour.js, standard tour) -> stacked image on top - .lt-popup (live-tour.js, live tour) -> side-by-side compact card The OUTER chrome (.gm-style-iw-c + .gm-style-iw-d + .gm-style-iw-chr + tail) is identical here. 2026-05-27: close-X moved from chrome row to image overlay (save ~30 px vertical real-estate). 2026-05-28: padding resets re-applied after a Google v=weekly bump reintroduced them; glass body + tail added. */ /* Commit K (2026-07-06): the glass literals below are now var() aliases of the canonical --bb-glass-* tokens (styles/shared-prototype.css). Every page that loads this file also loads shared-prototype.css; the fallbacks carry the same bb values as a safety net. Visible deltas vs the old literals: radius 24 -> 22px, border alpha 0.22 -> 0.55, shadow tint black -> navy, inset highlight 0.6 -> 0.70. */ .gm-style .gm-style-iw-c{ max-width:none!important;padding:0!important; background:var(--bb-glass-bg, rgba(255,255,255,0.66))!important; backdrop-filter:var(--bb-glass-blur, blur(22px) saturate(180%))!important; -webkit-backdrop-filter:var(--bb-glass-blur, blur(22px) saturate(180%))!important; border:1px solid var(--bb-glass-border, rgba(255,255,255,0.55))!important; border-radius:var(--bb-glass-radius, 22px)!important; box-shadow:var(--bb-glass-shadow, 0 14px 44px rgba(9,28,53,0.18), inset 0 1px 0 rgba(255,255,255,0.70))!important; } /* ── D2 Variant 1 - "Deep Navy Glass" InfoWindow popups in DARK theme ────── 2026-06-08: when the APP is in dark theme ([data-theme="dark"] on ), the Google InfoWindow chrome flips from frosted-white to frosted DEEP NAVY glass with a cyan hairline + cyan accents, matching the legend / gear panel / dark map popups so the whole dark UI reads as one Liquid-Glass material. The MAP itself keeps its own theme - this only restyles the popup chrome. Mirrors pages/proto/bk-darkpopup-1.html. The popup BUILDERS already emit the .gmaps-popup / .lt-popup classes; this is purely the outer chrome skin, so no JS changes. The links / text inside flip via the per-page rules at the foot of this file + the popup content stylesheets; this block owns the chrome (body fill, border, tail, close-X). SCOPE: the stremming + opstap popups inject their OWN light-glass chrome (scoped via :has(.gmaps-popup--strem) / :has(.gmaps-popup--opstap)) and are deliberately LIGHT on every page in every theme (captain decision). The :not(:has(...)) guard below excludes them so this dark flip ONLY catches the generic route-highlight .gmaps-popup InfoWindow, never their self-styled bubbles - independent of stylesheet injection order. */ :root[data-theme="dark"] .gm-style .gm-style-iw-c:not(:has(.gmaps-popup--strem)):not(:has(.gmaps-popup--opstap)){ /* Commit K: this rule sits under [data-theme="dark"], so the bb-glass tokens resolve to their DARK-theme values from shared-prototype.css (bg navy 0.74, blur 22px, cyan hairline 0.30, shadow 0.46). Deltas vs the old literals: blur 24 -> 22px, border 0.28 -> 0.30, shadow 0.50 -> 0.46. Fallbacks carry the dark token values. */ background:var(--bb-glass-bg, rgba(9,28,53,0.74))!important; backdrop-filter:var(--bb-glass-blur, blur(22px) saturate(180%))!important; -webkit-backdrop-filter:var(--bb-glass-blur, blur(22px) saturate(180%))!important; border:1px solid var(--bb-glass-border, rgba(105,254,255,0.30))!important; box-shadow:var(--bb-glass-shadow, 0 18px 48px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.08))!important; } .gm-style-iw-d{ max-width:none!important;overflow-x:hidden!important;padding:0!important; /* Hide the scrollbar on the inner d-container (Google adds overflow:auto when content exceeds the popup height) - it was rendering as a white vertical bar on the right edge of the glass body, breaking the look. */ scrollbar-width:none; } .gm-style-iw-d::-webkit-scrollbar{display:none} /* Same scrollbar reset on the outer popup wrappers per page so neither the standard tour's .gmaps-popup nor the live tour's .lt-popup ever shows a white bar on the right edge. */ .gmaps-popup, .lt-popup{scrollbar-width:none} .gmaps-popup::-webkit-scrollbar, .lt-popup::-webkit-scrollbar{display:none} /* Style Google's tail/pointer (the small triangle pointing at the marker) so it matches the glass body. .gm-style-iw-tc is the tail container in modern InfoWindow chrome. */ .gm-style .gm-style-iw-tc::after{ background:var(--bb-glass-bg, rgba(255,255,255,0.66))!important; box-shadow:none!important; } /* Dark-theme tail matches the navy-glass body fill. The strem/opstap tails are styled light by their own injected chrome (and excluded here via the sibling :has guard on the container above); their tail container does not carry the popup class, so we cannot :not(:has()) it directly - but their own tail rule is !important + injected later, so it wins the tie for those bubbles. This generic dark tail therefore only ends up applied to the route-highlight popup. */ :root[data-theme="dark"] .gm-style .gm-style-iw-tc::after{ background:var(--bb-glass-bg, rgba(9,28,53,0.74))!important; } @supports not (backdrop-filter: blur(1px)){ .gm-style .gm-style-iw-c{background:rgba(255,255,255,0.94)!important} .gm-style .gm-style-iw-tc::after{background:rgba(255,255,255,0.94)!important} :root[data-theme="dark"] .gm-style .gm-style-iw-c{background:rgba(9,28,53,0.96)!important} :root[data-theme="dark"] .gm-style .gm-style-iw-tc::after{background:rgba(9,28,53,0.96)!important} } /* Close-X chrome row repositioned to overlay the image as a small white circle (28 px) at top-right. Same rule for both popup types. */ .gm-style-iw-chr{ position:absolute!important;top:8px!important;right:8px!important; z-index:2;min-height:0!important;padding:0!important; } .gm-style-iw-chr .gm-ui-hover-effect{ width:28px!important;height:28px!important; background:rgba(255,255,255,0.92)!important;border-radius:50%!important; box-shadow:0 1px 3px rgba(0,0,0,0.25)!important; display:flex!important;align-items:center!important;justify-content:center!important; opacity:1!important; /* Hover anim: subtle rotate + scale + crimson tint so it feels native. 280ms cubic ease matches the lang-toggle slide elsewhere. Touch users get the active-state on tap-down for instant feedback. */ transition:background 200ms ease, transform 280ms cubic-bezier(.2,.7,.3,1.4), box-shadow 200ms ease!important; } .gm-style-iw-chr .gm-ui-hover-effect:hover{ background:#FFE8E4!important; transform:rotate(90deg) scale(1.08)!important; box-shadow:0 2px 6px rgba(255,80,60,0.28)!important; } .gm-style-iw-chr .gm-ui-hover-effect:active{ transform:rotate(90deg) scale(0.94)!important; transition-duration:80ms!important; } .gm-style-iw-chr .gm-ui-hover-effect:focus-visible{ outline:2px solid #FF503C!important;outline-offset:2px!important; } .gm-style-iw-chr .gm-ui-hover-effect span{ width:14px!important;height:14px!important;margin:0!important; transition:background 200ms ease!important; } .gm-style-iw-chr .gm-ui-hover-effect:hover span{ background:#8A1C0F!important; } /* ── Dark-theme (Deep Navy Glass) close-X ───────────────────────────────── The light disc + navy glyph above flips to a frosted NAVY disc with a light hairline + a near-white glyph, tinting red on hover. The glyph element is the inner that Google paints as the X mask; we recolour it light, and to red on hover. Scoped under the same :not(:has(...)) container guard as the chrome so the self-styled strem / opstap close-X (light, injected later) is untouched. */ :root[data-theme="dark"] .gm-style-iw-c:not(:has(.gmaps-popup--strem)):not(:has(.gmaps-popup--opstap)) .gm-style-iw-chr .gm-ui-hover-effect{ background:rgba(9,28,53,0.55)!important; border:1px solid rgba(255,255,255,0.16)!important; box-shadow:0 1px 3px rgba(0,0,0,0.4)!important; -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important; } :root[data-theme="dark"] .gm-style-iw-c:not(:has(.gmaps-popup--strem)):not(:has(.gmaps-popup--opstap)) .gm-style-iw-chr .gm-ui-hover-effect span{ background:rgba(243,246,249,0.78)!important; } :root[data-theme="dark"] .gm-style-iw-c:not(:has(.gmaps-popup--strem)):not(:has(.gmaps-popup--opstap)) .gm-style-iw-chr .gm-ui-hover-effect:hover{ background:rgba(255,80,60,0.30)!important; box-shadow:0 2px 6px rgba(255,80,60,0.34)!important; } :root[data-theme="dark"] .gm-style-iw-c:not(:has(.gmaps-popup--strem)):not(:has(.gmaps-popup--opstap)) .gm-style-iw-chr .gm-ui-hover-effect:hover span{ background:#FFFFFF!important; } /* ── Stremming (waterway-closure) InfoWindow ───────────────────────────── 2026-05-31: the stremming popup is now the SAME light Liquid-Glass card as the route-highlights popup (captain: "visueel hetzelfde als bij route highlights"). Its complete style - light white-glass chrome + navy ink + brand-blue links - is shipped self-contained by live-stremmingen.js injectGlassChrome(), scoped via :has(.gmaps-popup--strem) so it renders identically on /vaarinfo (which does NOT load this file), /vaarverkeer and the live tour. Edit the stremming popup in live-stremmingen.js, not here. (Same pattern as the opstap popup below.) */ /* ── Opstap / doorvaartprofiel (ABC pickup) InfoWindow ─────────────────── The opstap popup (src/live/live-opstap.js) reuses the SAME .gmaps-popup structure + dark navy Liquid Glass as the stremming popup above, so all three map popups read as one component (captain complaint, 2026-05-31: the opstap card was the last white-card popup). Its styles are NOT defined here. They live in a one-time injected