/* === Default sizing (max-width/height) — the missing piece: these were previously always emitted inline per-instance; now they live here as the class-based default, with PHP only overriding when an instance's height/mobile_height/max_width actually differ from default. === */ .natureslens-map-shortcode, .natureslens-sm-wrap { max-width: 1140px !important; } .natureslens-map-canvas, .natureslens-sm-canvas { height: 540px !important; } @media (max-width: 700px) { .natureslens-map-canvas, .natureslens-sm-canvas { height: 300px !important; } } /* !important above is required: jsvectormap's own CDN stylesheet (jsvectormap.min.css, .jvm-container{height:100%}) is injected into at runtime AFTER this Sitewide CSS, so at equal class-selector specificity it would otherwise win the cascade by source order and collapse the map to a tiny height. The old code avoided this by always using an ID-scoped selector; the shared class-based default needs !important instead. */ /* === Dest-tag base styles (natureslens_map + nl_trips_map), default colours === */ .natureslens-map-shortcode .natureslens-dest-tag, .natureslens-trips-map-shortcode .natureslens-dest-tag { color: #5C673C; border-color: #dcded5; background: #e9eae4; } .natureslens-map-shortcode .natureslens-dest-tag:hover, .natureslens-trips-map-shortcode .natureslens-dest-tag:hover { background: #e2e4dd; border-color: #5C673C; } .natureslens-map-shortcode .natureslens-dest-tag::before, .natureslens-trips-map-shortcode .natureslens-dest-tag::before { background: #5C673C; } .natureslens-map-shortcode .natureslens-dest-tag--sig, .natureslens-trips-map-shortcode .natureslens-dest-tag--sig { color: #5B6B9A; border-color: #dfe2eb; background: #e8ebf1; } .natureslens-map-shortcode .natureslens-dest-tag--sig:hover, .natureslens-trips-map-shortcode .natureslens-dest-tag--sig:hover { background: #e5e8ef; border-color: #5B6B9A; } .natureslens-map-shortcode .natureslens-dest-tag--sig::before, .natureslens-trips-map-shortcode .natureslens-dest-tag--sig::before { background: #5B6B9A; } .natureslens-map-shortcode .natureslens-tip-trips { color: #5C673C; } .natureslens-map-shortcode .natureslens-tip-dot { background: #5C673C; } /* === nl_trips_map: zoom-in destination panel (static layout/typography) === */ .nl-tm-zoom-panel { position:absolute; top:0; left:0; width:420px; max-width:calc(100% - 24px); background:rgba(255,255,255,0.97); border-radius:6px; box-shadow:0 4px 24px rgba(0,0,0,0.2); opacity:0; transform:scale(0.95); transform-origin:top left; transition:opacity 0.25s ease, transform 0.25s ease; pointer-events:none; z-index:20; display:flex; flex-direction:column; max-height:calc(100% - 24px); overflow:hidden; } .nl-tm-zoom-panel.nl-tm-panel-visible { opacity:1; transform:scale(1); pointer-events:auto; } @media (max-width:600px){ .nl-tm-zoom-panel { width:calc(100% - 24px) !important; left:12px !important; bottom:12px !important; top:auto !important; transform-origin:bottom center; } } .nl-tm-panel-header { position:relative; padding:12px 40px 10px 14px; border-bottom:1px solid #eee; flex-shrink:0; } .nl-tm-close-btn { position:absolute; top:10px; right:10px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; font-family:inherit; color:#aaa; background:none; border:none; border-radius:50%; cursor:pointer; padding:0; transition:color 0.15s, background 0.15s; } .nl-tm-close-btn:hover { color:#333; background:#f0f0f0; } .nl-tm-back-btn { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-family:inherit; color:#888; background:none; border:none; padding:0 0 7px; cursor:pointer; line-height:1; } .nl-tm-back-btn:hover { color:#333; } .nl-tm-panel-name { margin:0 0 2px; font-size:15px; font-weight:700; line-height:1.2; color:#1a1a1a; } .nl-tm-panel-meta { margin:0; font-size:11.5px; color:#888; line-height:1.3; } .nl-tm-trip-list { list-style:none; margin:0; padding:0; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; } .nl-tm-trip-item { border-bottom:1px solid #f0f0f0; } .nl-tm-trip-item:last-child { border-bottom:none; } .nl-tm-trip-link { display:flex; align-items:center; gap:10px; padding:10px 14px; text-decoration:none; color:#1a1a1a; transition:background 0.12s; } .nl-tm-trip-link:hover { background:#f7f8f4; } .nl-tm-trip-thumb { width:48px; height:48px; object-fit:cover; border-radius:3px; flex-shrink:0; background:#e8ead8; } .nl-tm-trip-title { flex:1; font-size:12.5px; line-height:1.35; font-weight:500; } .nl-tm-trip-arrow { font-size:13px; color:#5B6B9A; flex-shrink:0; } @media (max-width:500px){ .nl-tm-zoom-panel { bottom:0; left:0; right:0; width:auto; max-width:none; max-height:55%; border-radius:12px 12px 0 0; } } /* === natureslens_species_map: base styles (moved verbatim from PHP) === */ /* ── Species map: base styles (instance-agnostic) ─────────────────────── */ /* Only written once per page load since inline styles are idempotent here */ .natureslens-sm-wrap { width: 100%; margin: 0 auto; padding: 0 0 3rem; font-family: inherit; } .natureslens-sm-empty { color: #888; font-style: italic; } .natureslens-sm-card { width: 100%; background: #f2f2f2; position: relative; border-radius: 4px; overflow: hidden; } .natureslens-sm-reset { position: absolute; bottom: 10px; right: 10px; z-index: 10; padding: 4px 10px; background: rgba(255,255,255,0.9); border: 1px solid #ccc; border-radius: 4px; font-size: 0.78rem; cursor: pointer; color: #555; transition: background 0.1s; } .natureslens-sm-reset:hover { background: #fff; border-color: #5C673C; color: #5C673C; } .natureslens-sm-canvas { width: 100%; } .natureslens-sm-canvas svg { touch-action: pan-x pan-y; } .natureslens-sm-canvas .jvm-container { background: #f2f2f2 !important; } .natureslens-sm-canvas .jvm-marker { pointer-events: none !important; } .natureslens-sm-canvas svg { user-select: none; -webkit-user-select: none; } .natureslens-sm-canvas text { pointer-events: none; user-select: none; -webkit-user-select: none; } /* ── Custom marker tooltip ────────────────────────────────────────────── */ .natureslens-sm-tip { position: fixed; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 9999; background: #fff; border: 1px solid #d8d8d6; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 1.2rem 1.6rem; min-width: 280px; max-width: 360px; } /* Mobile: center in viewport */ @media (max-width: 700px) { .natureslens-sm-tip { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); min-width: 80vw; max-width: 90vw; max-height: 80vh; overflow-y: auto; } } .natureslens-sm-tip-close-btn { float: right; margin: -4px -6px 6px 10px; background: none; border: none; cursor: pointer; font-size: 1.2rem; color: #aaa; line-height: 1; padding: 2px 6px; pointer-events: auto; } .natureslens-sm-tip-close-btn:hover { color: #333; } .natureslens-sm-tip-name { font-size: 1.4rem; font-weight: 700; color: #1a1a1a; display: block; margin-bottom: 0.3rem; } .natureslens-sm-tip-count { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 0.6rem; } .natureslens-sm-tip-list { margin: 0; padding: 0 0 0 1.1rem; max-height: 200px; overflow-y: auto; font-size: 1rem; color: #444; line-height: 1.9; } .natureslens-sm-tip-nav { display: block; margin-top: 12px; padding: 10px 16px; text-align: center; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: #5C673C; text-decoration: none; border-radius: 3px; } .natureslens-sm-tip-nav:hover { background: #4a5230; color: #fff; text-decoration: none; } /* ── Species panel ────────────────────────────────────────────────────── */ .natureslens-sm-panel { margin-top: 16px; background: #f9f9f7; border: 1px solid #e4e4e0; border-radius: 6px; padding: 14px 18px 18px; } .natureslens-sm-panel-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .natureslens-sm-controls { display: flex; gap: 7px; margin-left: auto; align-items: center; } .natureslens-sm-search { padding: 3px 10px; border-radius: 4px; border: 1px solid #ccc; font-size: 0.85rem; color: #333; width: 150px; outline: none; background: #fff; } .natureslens-sm-search:focus { border-color: #5C673C; } @media (max-width: 700px) { .natureslens-sm-search { width: 110px; } } /* ── A–Z tabs ─────────────────────────────────────────────────────────── */ .natureslens-sm-az { display: flex; flex-wrap: wrap; gap: 3px; } .natureslens-sm-az-btn { padding: 2px 7px; border-radius: 3px; border: 1px solid #ccc; background: #fff; font-size: 0.76rem; font-weight: 700; cursor: pointer; color: #444; line-height: 1.5; transition: background 0.1s, color 0.1s, border-color 0.1s; } /* ── Controls ─────────────────────────────────────────────────────────── */ .natureslens-sm-logic, .natureslens-sm-clear { padding: 3px 11px; border-radius: 4px; border: 1px solid #ccc; background: #fff; font-size: 0.78rem; cursor: pointer; color: #555; transition: background 0.1s, border-color 0.1s, color 0.1s; } .natureslens-sm-clear:hover { background: #fef0f0; border-color: #cc4444; color: #cc4444; } /* ── Species pill list ────────────────────────────────────────────────── */ .natureslens-sm-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 230px; overflow-y: auto; padding-right: 4px; } .natureslens-sm-list-heading { width: 100%; font-size: 0.84rem; color: #555; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .natureslens-sm-list-heading-clear { background: none; border: none; font-size: 0.78rem; cursor: pointer; padding: 0; text-decoration: underline; } .natureslens-sm-pills { display: flex; flex-wrap: wrap; gap: 5px; } /* ── Species pill ─────────────────────────────────────────────────────── */ .natureslens-sm-pill { padding: 2px 10px; border-radius: 30px; border: 1px solid #ccc; background: #fff; font-size: 1rem; color: #333; cursor: pointer; white-space: nowrap; transition: background 0.1s, border-color 0.1s, transform 0.08s; line-height: 1.65; } .natureslens-sm-pill:hover { transform: translateY(-1px); } /* ── Legend ───────────────────────────────────────────────────────────── */ .natureslens-sm-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4e4e0; } .natureslens-sm-legend-item { display: flex; align-items: center; gap: 6px; font-size: 1rem; color: #444; letter-spacing: 0; } /* ── Scrollbars ───────────────────────────────────────────────────────── */ .natureslens-sm-list::-webkit-scrollbar, .natureslens-sm-tip-list::-webkit-scrollbar { width: 5px; } .natureslens-sm-list::-webkit-scrollbar-track, .natureslens-sm-tip-list::-webkit-scrollbar-track { background: #f0f0ee; border-radius: 3px; } .natureslens-sm-list::-webkit-scrollbar-thumb, .natureslens-sm-tip-list::-webkit-scrollbar-thumb { background: #c8c8c4; border-radius: 3px; } /* === natureslens_species_map: A-Z/pill default colours (moved from PHP) === */ .natureslens-sm-wrap .natureslens-sm-az-btn:hover { background: #eff0ec; border-color: #5C673C; } .natureslens-sm-wrap .natureslens-sm-az-btn.is-on { background: #5C673C; border-color: #5C673C; color: #fff; } .natureslens-sm-wrap .natureslens-sm-logic:hover { border-color: #5B6B9A; } .natureslens-sm-wrap .natureslens-sm-pill:hover { background: #eff0ec; border-color: #5C673C; } .natureslens-sm-wrap .natureslens-sm-pill.is-on { background: #5C673C; border-color: #485328; color: #fff; } .natureslens-sm-wrap .natureslens-sm-pill.is-on:hover { background: #525d32; } .natureslens-sm-wrap .natureslens-sm-list-heading-clear { color: #5C673C; } /* === Location child-nav footer (moved verbatim from PHP, was hardcoded/static) === */ .nl-location-child-nav { max-width: 1100px; width: min(100%, 1100px); margin: 2rem auto 0.55rem; padding: 0; } .nl-location-child-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; padding: 0; border: 0; background: transparent; } .nl-location-child-nav__head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; flex: 0 0 auto; } .nl-location-child-nav__title { margin: 0; color: #666; font-size: 1.08rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; } .nl-location-child-nav__meta { color: #777; font-size: 0.9rem; line-height: 1.25; text-transform: uppercase; } .nl-location-child-nav__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; min-width: 0; } .nl-location-child-nav .natureslens-dest-tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border: 1px solid #dcded5; background: #e9eae4; color: #5C673C; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.15; text-decoration: none; text-transform: uppercase; transition: background 0.15s, border-color 0.15s; } .nl-location-child-nav .natureslens-dest-tag:hover, .nl-location-child-nav .natureslens-dest-tag:focus-visible { border-color: #5C673C; background: #e2e4dd; } .nl-location-child-nav .natureslens-dest-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: #5C673C; } .nl-location-child-nav .natureslens-dest-tag--sig { border-color: #dfe2eb; background: #e8ebf1; color: #5B6B9A; } .nl-location-child-nav .natureslens-dest-tag--sig:hover, .nl-location-child-nav .natureslens-dest-tag--sig:focus-visible { border-color: #5B6B9A; background: #e5e8ef; } .nl-location-child-nav .natureslens-dest-tag--sig::before { background: #5B6B9A; } .nl-location-child-nav__count { opacity: 0.85; } @media (max-width: 640px) { .nl-location-child-nav { width: calc(100% - 50px); margin: 1.35rem auto 1.25rem; padding: 0; } .nl-location-child-nav__inner { display: grid; align-items: stretch; justify-content: stretch; gap: 0.75rem; padding: 0; } .nl-location-child-nav__head { display: grid; justify-self: start; gap: 0.2rem; } .nl-location-child-nav__title { font-size: 1rem; } .nl-location-child-nav__meta { font-size: 0.78rem; } .nl-location-child-nav__links { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0.45rem; overflow-x: auto; width: 100%; padding-bottom: 0.15rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nl-location-child-nav__links::-webkit-scrollbar { display: none; } .nl-location-child-nav .natureslens-dest-tag { flex: 0 0 auto; padding: 0.44rem 0.72rem; font-size: 0.88rem; white-space: nowrap; } }