/** * Pin Travel — World Map styles * Uses brand palette CSS vars defined in style.css when present, with * sensible fallbacks so the map looks correct even outside the theme. */ .pt-world-map { position: relative; width: 100%; max-width: 1280px; margin: 2rem auto; padding: 1rem; background: radial-gradient( ellipse at 50% 0%, rgba( 255, 255, 255, 0.7 ) 0%, transparent 60% ), linear-gradient( 180deg, #fbf6ec 0%, #f1e9d6 100% ); border: 1px solid rgba( 20, 48, 77, 0.08 ); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba( 20, 48, 77, 0.04 ), 0 8px 28px rgba( 20, 48, 77, 0.08 ); isolation: isolate; } /* Decorative latitude grid — very subtle, suggests an atlas without dominating */ .pt-world-map::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, rgba( 20, 48, 77, 0.04 ) 0 1px, transparent 1px 60px ), repeating-linear-gradient( 90deg, rgba( 20, 48, 77, 0.04 ) 0 1px, transparent 1px 60px ); pointer-events: none; z-index: 0; } .pt-world-map__svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow( 0 1px 0 rgba( 255, 255, 255, 0.5 ) ); } /* INACTIVE COUNTRIES — flat ivory, hairline strokes, no interaction affordance */ .pt-world-map__feature { fill: #ece3cf; stroke: #cfc4ad; stroke-width: 0.4; stroke-linejoin: round; transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease, filter 0.25s ease, transform 0.25s cubic-bezier( 0.34, 1.56, 0.64, 1 ); pointer-events: all; cursor: default; outline: none; transform-box: fill-box; transform-origin: center; } /* ACTIVE COUNTRIES — branded navy, slight glow, clear click affordance */ .pt-world-map__feature.is-active { fill: var( --pt-navy, #14304d ); stroke: #ffffff; stroke-width: 0.65; cursor: pointer; filter: drop-shadow( 0 1px 2px rgba( 20, 48, 77, 0.25 ) ); } .pt-world-map__feature.is-active:hover, .pt-world-map__feature.is-active:focus { fill: var( --pt-rust, #c05d3a ); stroke-width: 1; filter: drop-shadow( 0 3px 6px rgba( 192, 93, 58, 0.45 ) ); transform: translateY( -1px ) scale( 1.015 ); } .pt-world-map__feature.is-active:focus-visible { outline: 2px solid var( --pt-rust, #c05d3a ); outline-offset: 3px; } /* Pulse ring on the most-recently-hovered active feature. * Pure CSS — no JS state needed. */ @keyframes pt-pulse { 0% { stroke-opacity: 1; stroke-width: 0.65; } 50% { stroke-opacity: 0.4; stroke-width: 1.4; } 100% { stroke-opacity: 1; stroke-width: 0.65; } } .pt-world-map__feature.is-active:hover { animation: pt-pulse 1.4s ease-in-out infinite; } /* Make sure the states layer sits above the country layer (USA region). */ .pt-world-map__states { pointer-events: all; } /* Smooth fade-in on first paint */ .pt-world-map__countries, .pt-world-map__states { animation: pt-map-fade-in 0.6s ease-out both; } .pt-world-map__states { animation-delay: 0.1s; } @keyframes pt-map-fade-in { from { opacity: 0; transform: translateY( 6px ); } to { opacity: 1; transform: translateY( 0 ); } } /* POPOVER — rich card with image + child destinations list. * Lives inside .pt-world-map by default, but the JS portals it to * once at init so it can extend beyond the map's overflow:hidden bounds. * Either way: position is set in JS (absolute when nested, fixed when portaled). */ .pt-world-map__popover { position: absolute; width: 260px; background: #fff; color: var( --pt-navy, #14304d ); border-radius: 12px; overflow: hidden; z-index: 20; box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.06 ), 0 12px 36px rgba( 20, 48, 77, 0.25 ); transform: translate( -50%, -100% ); transition: opacity 0.15s ease; pointer-events: auto; font-family: inherit; line-height: 1.4; animation: pt-popover-in 0.18s ease-out; } .pt-world-map__popover.is-below { transform: translate( -50%, -100% ); } @keyframes pt-popover-in { from { opacity: 0; transform: translate( -50%, calc( -100% - 4px ) ); } to { opacity: 1; transform: translate( -50%, -100% ); } } .pt-world-map__popover[hidden] { display: none; } /* When portaled to body, switch to fixed positioning so the popover lives * in viewport coordinates and can extend outside the map's clipping. */ .pt-world-map__popover--portaled { position: fixed; z-index: 9999; } .pt-world-map__popover-img { width: 100%; height: 130px; background-size: cover; background-position: center; background-color: #ece3cf; position: relative; } .pt-world-map__popover-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba( 20, 48, 77, 0 ) 50%, rgba( 20, 48, 77, 0.4 ) 100% ); } .pt-world-map__popover-body { padding: 14px 16px 16px; } .pt-world-map__popover-title { margin: 0 0 2px; font-size: 18px; font-weight: 700; color: var( --pt-navy, #14304d ); letter-spacing: -0.01em; } .pt-world-map__popover-meta { margin: 0 0 12px; font-size: 12px; color: rgba( 20, 48, 77, 0.55 ); font-weight: 500; } .pt-world-map__popover-eyebrow { margin: 0 0 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba( 20, 48, 77, 0.5 ); } /* Force list-reset with high specificity — Divi/parent theme often adds * list-style:disc + indent to

. */ ul.pt-world-map__popover-list { list-style: none !important; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 7px; } ul.pt-world-map__popover-list li { margin: 0; padding: 0; list-style: none !important; background: none !important; } ul.pt-world-map__popover-list li::before, ul.pt-world-map__popover-list li::marker { content: none !important; display: none !important; } /* CITY PILLS — gradient surface, brand-accent ring on hover, lift + glow */ .pt-world-map__popover-list a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.005em; padding: 5px 11px 5px 9px; border-radius: 999px; background: linear-gradient( 180deg, #ffffff 0%, #f3eada 100% ); color: var( --pt-navy, #14304d ); text-decoration: none; white-space: nowrap; border: 1px solid rgba( 20, 48, 77, 0.08 ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.9 ), 0 1px 2px rgba( 20, 48, 77, 0.08 ); transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier( 0.34, 1.56, 0.64, 1 ), box-shadow 0.2s ease, border-color 0.2s ease; position: relative; overflow: hidden; } /* Tiny accent dot — picks up the rust brand color */ .pt-world-map__popover-list a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var( --pt-rust, #c05d3a ); opacity: 0.7; flex-shrink: 0; transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease; } /* Subtle shimmer sweep on hover */ .pt-world-map__popover-list a::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient( 100deg, transparent 0%, rgba( 255, 255, 255, 0.55 ) 50%, transparent 100% ); transition: left 0.6s ease; pointer-events: none; } .pt-world-map__popover-list a:hover, .pt-world-map__popover-list a:focus { background: linear-gradient( 180deg, var( --pt-navy, #14304d ) 0%, #0c2138 100% ); color: #fff; border-color: transparent; transform: translateY( -2px ) scale( 1.04 ); box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.1 ) inset, 0 6px 14px rgba( 20, 48, 77, 0.32 ), 0 0 0 3px rgba( 192, 93, 58, 0.18 ); } .pt-world-map__popover-list a:hover::before, .pt-world-map__popover-list a:focus::before { background: var( --pt-rust, #c05d3a ); opacity: 1; transform: scale( 1.3 ); box-shadow: 0 0 8px rgba( 192, 93, 58, 0.7 ); } .pt-world-map__popover-list a:hover::after, .pt-world-map__popover-list a:focus::after { left: 130%; } .pt-world-map__popover-list a:active { transform: translateY( -1px ) scale( 1.02 ); transition-duration: 0.05s; } .pt-world-map__popover-cta { display: block; width: 100%; text-align: center; font-size: 13px; font-weight: 600; color: #fff; background: var( --pt-navy, #14304d ); padding: 9px 12px; border-radius: 8px; text-decoration: none; transition: background 0.15s ease, transform 0.15s ease; } .pt-world-map__popover-cta:hover, .pt-world-map__popover-cta:focus { background: var( --pt-rust, #c05d3a ); transform: translateY( -1px ); } /* Arrow tail — points down by default, points up in is-below mode */ .pt-world-map__popover::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: #fff; transform: translateX( -50% ) rotate( 45deg ); border-radius: 2px; box-shadow: 4px 4px 8px rgba( 20, 48, 77, 0.08 ); z-index: -1; } .pt-world-map__popover.is-below::after { bottom: auto; top: -7px; box-shadow: -4px -4px 8px rgba( 20, 48, 77, 0.08 ); } /* LEGEND — small key in the corner so visitors know navy = bookable */ .pt-world-map::after { content: "● Click navy regions to explore"; position: absolute; bottom: 14px; left: 18px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgba( 20, 48, 77, 0.55 ); z-index: 2; pointer-events: none; } /* EMPTY STATE — when no destinations are linked yet */ .pt-world-map-empty { max-width: 720px; margin: 2rem auto; padding: 1.75rem; background: linear-gradient( 180deg, #fbf6ec 0%, #f1e9d6 100% ); border: 1px dashed rgba( 20, 48, 77, 0.2 ); border-radius: 12px; color: rgba( 20, 48, 77, 0.7 ); font-size: 14px; line-height: 1.5; text-align: center; } /* Spacing for the optional destinations grid below the map */ .pt-world-map + .pt-destinations-grid, .pt-world-map + h2 + .pt-destinations-grid { margin-top: 3rem; } @media ( max-width: 760px ) { .pt-world-map { margin: 1rem auto; padding: 0.5rem; border-radius: 14px; } .pt-world-map::before { background-size: 40px 40px; } .pt-world-map::after { font-size: 10px; bottom: 8px; left: 10px; } .pt-world-map__popover { width: 220px; } .pt-world-map__popover-img { height: 110px; } .pt-world-map__popover-body { padding: 12px 14px 14px; } .pt-world-map__popover-title { font-size: 16px; } } @media ( prefers-reduced-motion: reduce ) { .pt-world-map__feature, .pt-world-map__feature.is-active:hover { animation: none !important; transition: fill 0.1s ease; transform: none !important; } .pt-world-map__countries, .pt-world-map__states { animation: none; } } /* ============================================================ COUNTRY MAP — single-country zoomed view with state polygons and pins for cities ============================================================ */ .pt-country-map { position: relative; width: 100%; max-width: 1100px; margin: 0 auto 2.5rem; background: #f7faff; border-radius: 14px; overflow: hidden; border: 1px solid #e5e9ef; } .pt-country-map__svg { display: block; width: 100%; height: auto; background: linear-gradient(180deg, #eef4fb 0%, #f7faff 100%); } .pt-country-map__country { fill: #d9e3f2; stroke: #1B2A4A; stroke-width: 0.7; stroke-linejoin: round; } /* All other world countries shown as muted context */ .pt-country-map__context { fill: #ece3cf; stroke: #ffffff; stroke-width: 0.4; } /* The country we are zoomed into — highlighted in deep navy */ .pt-country-map__context.is-target { fill: #14304d; stroke: #ffffff; stroke-width: 0.6; } /* Region/state navigation row below the map */ .pt-country-map-col { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; } .pt-country-map-col .pt-country-map { flex: 1 1 auto; min-height: 0; } .pt-country-map-states { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; justify-content: center; } .pt-country-map-state-btn { display: inline-block; padding: 6px 12px; background: #fff; border: 1px solid #d9e3f2; border-radius: 999px; color: #14304d; text-decoration: none; font-size: .82rem; font-weight: 600; transition: all .15s; white-space: nowrap; } .pt-country-map-state-btn:hover { background: #14304d; color: #fff; border-color: #14304d; } /* ============================================================ CITY MAP — Leaflet base + branded pins ============================================================ */ .pt-city-map-section { margin: 0 0 3rem; } .pt-city-map-section h2 { font-size: 1.6rem; font-weight: 800; color: #1B2A4A; margin: 0 0 1rem; } .pt-city-map { position: relative; width: 100%; height: 520px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(27, 42, 74, 0.10); border: 1px solid #e5e9ef; background: #f7faff; } .pt-city-map__hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.95); background: rgba(20, 48, 77, 0.92); color: #ffffff; padding: 12px 22px; border-radius: 999px; font-size: 0.95rem; font-weight: 600; pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; z-index: 600; box-shadow: 0 6px 18px rgba(0,0,0,.25); letter-spacing: 0.2px; } .pt-city-map__hint.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } .pt-city-map__hint kbd { display: inline-block; padding: 1px 7px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28); border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace; font-size: 0.85em; margin: 0 2px; } .pt-city-map__hint strong { font-weight: 800; } @media (max-width: 720px) { .pt-city-map { height: 380px; } } /* ── Numbered teardrop pin marker ────────────────────────── */ .pt-city-pin { background: none !important; border: none !important; cursor: pointer; position: relative; transform-origin: 50% 100%; transition: transform .15s ease; } .pt-city-pin:hover { transform: scale(1.12); z-index: 9999 !important; } .pt-city-pin__shape { position: absolute; left: 50%; top: 0; width: 100%; aspect-ratio: 1 / 1; transform: translateX(-50%) rotate(-45deg); border-radius: 50% 50% 50% 0; background: #C4572A; border: 3px solid #ffffff; box-shadow: 0 4px 10px rgba(0,0,0,.28); transition: background .12s ease; } .pt-city-pin__num { position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); color: #ffffff; font-weight: 800; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.35); z-index: 2; } .pt-city-pin:hover .pt-city-pin__shape { background: #14304d; } /* Top-3 standout — bigger, gold/silver/bronze with glow */ .pt-city-pin.is-top .pt-city-pin__shape { border-width: 3.5px; } .pt-city-pin.is-top .pt-city-pin__num { font-size: 15px; top: 36%; } .pt-city-pin.is-gold .pt-city-pin__shape { background: linear-gradient(135deg, #ffd54a 0%, #d49000 100%); box-shadow: 0 4px 14px rgba(212, 144, 0, .45), 0 0 0 4px rgba(255, 213, 74, .25); } .pt-city-pin.is-silver .pt-city-pin__shape { background: linear-gradient(135deg, #e8eaed 0%, #8a9095 100%); box-shadow: 0 4px 14px rgba(120, 125, 130, .45), 0 0 0 4px rgba(232, 234, 237, .35); } .pt-city-pin.is-bronze .pt-city-pin__shape { /* Deep coppery brown — clearly distinct from the rust used by ranks 4+ */ background: linear-gradient(135deg, #c46f2c 0%, #5b2a08 100%); box-shadow: 0 4px 14px rgba(91, 42, 8, .55), 0 0 0 4px rgba(196, 111, 44, .3); border-color: #faecd6; } .pt-city-pin.is-top:hover .pt-city-pin__shape { background-image: none; background-color: #14304d; } /* Hidden gem — emerald gradient with diamond glyph instead of number */ .pt-city-pin.is-gem .pt-city-pin__shape { background: linear-gradient(135deg, #2ecc71 0%, #16a085 100%); box-shadow: 0 4px 14px rgba(22, 160, 133, .45), 0 0 0 4px rgba(46, 204, 113, .25); border-width: 3.5px; } .pt-city-pin.is-gem .pt-city-pin__num { top: 35%; display: flex; align-items: center; justify-content: center; } .pt-city-pin__num--gem svg { display: block; } .pt-city-pin.is-gem:hover .pt-city-pin__shape { background-image: none; background-color: #14304d; } /* ── Polaroid-style attraction pin ───────────────────────── */ .pt-polaroid { background: none !important; border: none !important; cursor: pointer; overflow: visible !important; transform-origin: 50% 100%; transition: transform .18s ease, filter .18s ease; } .pt-polaroid:hover { transform: scale(1.18); z-index: 10000 !important; } .pt-polaroid__inner { position: absolute; left: 50%; bottom: 8px; width: 100%; transform-origin: 50% 100%; background: #ffffff; padding: 3px 3px 0 3px; border-radius: 3px; box-shadow: 0 5px 12px rgba(0,0,0,.30), 0 0 0 1px rgba(0,0,0,.04); transform: translateX(-50%); } .pt-polaroid__photo { width: 100%; aspect-ratio: 1 / 1; background-color: #d9e3f2; background-size: cover; background-position: center; border-radius: 2px; } .pt-polaroid__caption { font-size: 8px; font-weight: 700; color: #1B2A4A; text-align: center; padding: 3px 2px 4px; line-height: 1.05; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Small triangle / "tape" anchor to the location point */ .pt-polaroid__tail { position: absolute; bottom: 0; left: 50%; width: 8px; height: 8px; background: #ffffff; transform: translate(-50%, 50%) rotate(45deg); box-shadow: 1px 1px 3px rgba(0,0,0,.18); z-index: -1; } /* Rank badge in corner */ .pt-polaroid__badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #C4572A; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); line-height: 1; } /* Top 3 — gold/silver/bronze frame + badge */ .pt-polaroid.is-top .pt-polaroid__inner { box-shadow: 0 6px 16px rgba(212,144,0,.35), 0 0 0 1px rgba(0,0,0,.04); } .pt-polaroid.is-gold .pt-polaroid__badge { background: linear-gradient(135deg, #ffd54a 0%, #d49000 100%); color: #14304d; } .pt-polaroid.is-gold .pt-polaroid__inner { box-shadow: 0 6px 16px rgba(212,144,0,.45), 0 0 0 2px #ffd54a; } .pt-polaroid.is-silver .pt-polaroid__badge { background: linear-gradient(135deg, #e8eaed 0%, #8a9095 100%); color: #14304d; } .pt-polaroid.is-silver .pt-polaroid__inner { box-shadow: 0 6px 16px rgba(120,125,130,.4), 0 0 0 2px #c7ccd1; } .pt-polaroid.is-bronze .pt-polaroid__badge { background: linear-gradient(135deg, #c46f2c 0%, #5b2a08 100%); color: #fff; } .pt-polaroid.is-bronze .pt-polaroid__inner { box-shadow: 0 6px 16px rgba(91,42,8,.45), 0 0 0 2px #c46f2c; } /* Hidden gems — emerald frame */ .pt-polaroid.is-gem .pt-polaroid__inner { box-shadow: 0 6px 16px rgba(22,160,133,.45), 0 0 0 2px #2ecc71; } .pt-polaroid__badge--gem { background: linear-gradient(135deg, #2ecc71 0%, #16a085 100%) !important; padding: 0; width: 18px; height: 18px; } .pt-polaroid__badge--gem svg { width: 10px; height: 10px; } /* ── Off-screen edge markers — round thumbnails with direction arrow ── */ .pt-city-edge { background: none !important; border: none !important; cursor: pointer; z-index: 500 !important; } .pt-city-edge__btn { position: relative; width: 44px; height: 44px; border: none; padding: 0; background: transparent; cursor: pointer; transition: transform .15s ease; } .pt-city-edge__btn:hover { transform: scale(1.1); } /* Circular thumbnail with white border */ .pt-city-edge__photo { display: block; width: 100%; height: 100%; border-radius: 50%; background-color: #d9e3f2; background-size: cover; background-position: center; border: 3px solid #ffffff; box-shadow: 0 3px 10px rgba(0,0,0,.35); box-sizing: border-box; } /* Direction arrow — small triangle attached to the thumbnail edge, rotated to point toward the off-screen attraction. */ .pt-city-edge__arrow { position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #ffffff; transform-origin: 50% 28px; /* point of rotation = thumbnail centre */ margin-left: -7px; margin-top: -28px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } /* Variants — colored ring for top-3 / gem so they stand out at edges */ .pt-city-edge.is-top .pt-city-edge__photo { border-color: #ffd54a; } .pt-city-edge.is-top .pt-city-edge__arrow { border-bottom-color: #ffd54a; } .pt-city-edge.is-gem .pt-city-edge__photo { border-color: #2ecc71; } .pt-city-edge.is-gem .pt-city-edge__arrow { border-bottom-color: #2ecc71; } /* Leaflet popup overrides */ .leaflet-container .pt-city-popup .leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; overflow: hidden; box-shadow: 0 10px 24px rgba(27, 42, 74, 0.18); } .leaflet-container .pt-city-popup .leaflet-popup-content { margin: 0; width: 240px !important; } .leaflet-container .pt-city-popup .leaflet-popup-tip { box-shadow: 0 4px 8px rgba(27,42,74,.12); } .pt-city-map__popup { display: flex; flex-direction: column; color: inherit; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .pt-city-map__popup:hover { transform: translateY(-1px); } .pt-city-map__popup:hover .pt-city-map__popup-cta { color: #14304d; text-decoration: underline; } .pt-city-map__popup-img { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #d9e3f2; } .pt-city-map__popup-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; } .pt-city-map__popup-title { font-size: .98rem; font-weight: 800; margin: 0; color: #1B2A4A; line-height: 1.2; } .pt-city-map__popup-gem { display: inline-block; font-size: .72rem; color: #b8860b; font-weight: 600; } .pt-city-map__popup-cta { display: inline-block; margin-top: 4px; color: #C4572A; font-weight: 700; font-size: .88rem; text-decoration: none; } .pt-city-map__popup-cta:hover { color: #14304d; text-decoration: underline; } .pt-country-map__region { fill: #d9e3f2; stroke: #ffffff; stroke-width: 0.6; transition: fill .18s ease; cursor: default; } .pt-country-map__region.is-active { fill: #C4572A; /* rust */ cursor: pointer; } .pt-country-map__region.is-active:hover { fill: #8E3B17; } .pt-country-map__pin-shadow { fill: rgba(0,0,0,0.25); filter: blur(1.5px); } .pt-country-map__pin-dot { fill: #C4572A; stroke: #ffffff; stroke-width: 2; transition: r .15s ease, fill .15s ease; } .pt-country-map__pin-core { fill: #ffffff; pointer-events: none; } .pt-country-map__pin:hover .pt-country-map__pin-dot { fill: #1B2A4A; r: 9; } .pt-country-map__empty { padding: 2rem; text-align: center; color: #666; } .pt-country-map-section { margin-bottom: 3rem; } .pt-country-map-section h2 { font-size: 1.6rem; font-weight: 800; color: #1B2A4A; margin: 0 0 1rem; } /* ============================================================ COUNTRY MAP LAYOUT: 2/3 map + 1/3 vertical auto-scroll gallery ============================================================ */ .pt-country-map-layout { display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; align-items: stretch; /* Lock the whole row to a single height. Map width = container * 3/4, map aspect = 16:10 → row height = (3/4) * (10/16) of container width = 15/32. 32:15 keeps the map a clean 16:10 and the gallery exactly the same height. */ aspect-ratio: 32 / 15; } .pt-country-map-layout .pt-country-map { margin: 0; max-width: none; height: 100%; aspect-ratio: auto; } /* Gallery — same height as map, scrolls vertically */ .pt-country-gallery { position: relative; background: #f7faff; border: 1px solid #e5e9ef; border-radius: 14px; overflow: hidden; height: 100%; min-height: 0; mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); } .pt-country-gallery__track { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; will-change: transform; } .pt-country-gallery__card { position: relative; display: block; aspect-ratio: 16 / 10; background: #1B2A4A; border-radius: 10px; overflow: hidden; text-decoration: none; color: #fff; transition: transform .2s, box-shadow .2s; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.08); } .pt-country-gallery__card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); } .pt-country-gallery__img { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-color: #d9e3f2; transition: transform .5s ease; } .pt-country-gallery__card:hover .pt-country-gallery__img { transform: scale(1.06); } .pt-country-gallery__img--ph { background: linear-gradient(135deg, #d9e3f2 0%, #b8c5dc 100%); } /* Dark gradient overlay so the title is always readable on top of any image */ .pt-country-gallery__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 75%); pointer-events: none; } .pt-country-gallery__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; z-index: 2; color: #fff; } .pt-country-gallery__name { font-size: 1.05rem; font-weight: 800; margin: 0; line-height: 1.15; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); } .pt-country-gallery__meta { font-size: .78rem; color: rgba(255,255,255,.85); margin-top: 4px; display: block; } @media (max-width: 760px) { .pt-country-map-layout { grid-template-columns: 1fr; } .pt-country-gallery { max-height: 320px; } } /* ────────────────────────────────────────────────────────────── Scattered city polaroids over the world map. Each polaroid is positioned absolutely at its city's lat/lng (projected via JS using the same projection as the SVG map). Wild rotations and layered shadows give it a "pinned scrapbook" feel. ────────────────────────────────────────────────────────────── */ .pt-world-map { position: relative; } .pt-world-map__polaroids { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .pt-world-map__polaroid { position: absolute; /* Hidden until JS positions us — avoids FOUC of all polaroids stacked at top-left while waiting for projection */ opacity: 0; transition: opacity .3s, transform .3s, box-shadow .3s, z-index 0s linear .3s; width: clamp(76px, 7.5vw, 110px); background: #fff; padding: 6px 6px 0; text-decoration: none; color: #1a1a1a; pointer-events: auto; /* center the polaroid on its computed left/top point */ transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); transform-origin: center center; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.28); border-radius: 1px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .pt-world-map__polaroid.is-positioned { opacity: 1; } .pt-world-map__polaroid-photo { display: block; width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: #ddd; } .pt-world-map__polaroid-caption { display: block; text-align: center; font-weight: 700; font-size: clamp(.7rem, 0.95vw, .92rem); letter-spacing: -0.01em; color: #1a1a1a; padding: 8px 4px 12px; line-height: 1.1; /* Slightly handwritten feel without requiring an extra font */ font-style: normal; } .pt-world-map__polaroid:hover { /* Lift, level out, scale up — feels like grabbing the photo */ transform: translate(-50%, -50%) rotate(0deg) scale(1.18); box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 16px 36px rgba(0,0,0,.35); z-index: 30; transition: opacity .3s, transform .3s, box-shadow .3s, z-index 0s; } /* Allow polaroids to spill off the map edges. The world-map container itself stays the same size for layout, but polaroids absolutely positioned beyond inset:0 need overflow:visible to be drawn. */ .pt-world-map { overflow: visible; } .pt-world-map__polaroids { overflow: visible; } /* When polaroids are present, break the map out to full viewport width regardless of any constrained Divi container around it. The max-width override is critical — base .pt-world-map CSS sets a max-width of 1280px which would otherwise clamp 100vw on wider screens. */ .pt-world-map:has(.pt-world-map__polaroid) { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; /* Match the map's parchment cream background so the edges blend into the page — you can't tell where the SVG ends */ background: var(--fb-cream, #FAF6F0); } /* Strip horizontal padding so the map fills viewport width, and remove the bottom padding so Antarctica flushes against the next section (no empty cream strip under it). Top padding stays — the map shouldn't crash into whatever sits above it. */ .et_pb_section:has(.pt-world-map__polaroid){ padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; background: var(--fb-cream, #FAF6F0) !important; } .et_pb_section:has(.pt-world-map__polaroid) .et_pb_row, .et_pb_section:has(.pt-world-map__polaroid) .et_pb_column, .et_pb_section:has(.pt-world-map__polaroid) .et_pb_module, .et_pb_section:has(.pt-world-map__polaroid) .et_pb_code_inner{ padding-bottom: 0 !important; margin-bottom: 0 !important; } .pt-world-map:has(.pt-world-map__polaroid){ margin-bottom: 0 !important; padding-bottom: 0 !important; } /* The world map SVG should not have any vertical gap below the final feature (Antarctica). Auto-height + viewBox crop already handles this — this is a belt-and-braces guard. */ .pt-world-map:has(.pt-world-map__polaroid) .pt-world-map__svg{ display: block; vertical-align: bottom; margin-bottom: 0; } /* Underlying map SVG already has a parchment fill internally; ensure no white gap shows through if the SVG fits with letterboxing. */ .pt-world-map:has(.pt-world-map__polaroid) .pt-world-map__svg { display: block; width: 100%; height: auto; } /* ────────────────────────────────────────────────────────────── Polaroid cluster icon (city map) Replaces the default Leaflet.markercluster bubble with a small stack of three overlapping polaroid thumbs + a count badge. ────────────────────────────────────────────────────────────── */ .pt-polaroid-cluster { background: transparent !important; border: 0 !important; cursor: pointer; } .pt-polaroid-cluster .pt-polaroid-cluster__stack { position: relative; width: 64px; height: 64px; margin: 0 auto; } .pt-polaroid-cluster .pt-polaroid-cluster__card { position: absolute; inset: 0; background-color: #fff; background-size: cover; background-position: center; border: 3px solid #fff; border-radius: 3px; box-shadow: 0 4px 10px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.18); transform-origin: 50% 60%; } .pt-polaroid-cluster .pt-polaroid-cluster__count { position: absolute; bottom: -6px; right: -6px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: #c0552d; /* rust accent */ color: #fff; font-weight: 700; font-size: 13px; line-height: 26px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.35); border: 2px solid #fff; z-index: 10; } .pt-polaroid-cluster:hover .pt-polaroid-cluster__stack { transform: scale(1.05); transition: transform 0.18s ease-out; } /* Hide the default markercluster bubble that ships with the plugin for any clusters we may have missed (defensive). */ .leaflet-marker-icon.marker-cluster { background: transparent; } .leaflet-marker-icon.marker-cluster div { display: none; }