/* Next Stops — a real satellite world map of all 19 Crewtrips voyages. Past routes muted; tap one (or its list item) to light it rust, ease the map to it, and open an info card. An aspirational "where next?" dashed line reaches out from Cowes. Palette + type reuse the site DNA. Scoped #ns-root. */ #ns-root{background:#e8dcc4;color:#FCF6EC} #ns-root *{box-sizing:border-box} #ns-root a{color:#E4B93B;text-decoration:none} /* keep the sticky site header above the map overlay so the title tucks behind it on scroll */ .site-header{z-index:1000} /* full-bleed stage — the light chart map fills the viewport below the sticky 78px header */ #ns-root .ns-stage{position:relative;width:100%;height:calc(100dvh - 78px);min-height:520px;overflow:hidden} #ns-root #ns-map{position:absolute;inset:0;height:100%;width:100%;background:#e8dcc4;z-index:1} #ns-root #ns-map:focus-visible{outline:3px solid #E4B93B;outline-offset:-3px} /* vintage-parchment tone over the light NatGeo basemap tiles */ #ns-root .ns-parchment{filter:sepia(.4) saturate(.85) hue-rotate(-8deg) brightness(1) contrast(.98)} /* corner scrim so the overlaid title/subtitle stay legible over any imagery */ #ns-root .ns-stage::before{content:"";position:absolute;top:0;left:0;width:min(700px,96%);height:min(480px,82%);z-index:590;pointer-events:none;background:linear-gradient(148deg,rgba(6,15,17,.92) 0%,rgba(6,15,17,.68) 32%,rgba(6,15,17,.30) 58%,rgba(6,15,17,0) 82%)} /* overlay panel — kicker + h1 + subtitle + era chips, floated over the darkened corner */ #ns-root .ns-overlay{position:absolute;top:0;left:0;z-index:600;max-width:min(560px,92vw);padding:clamp(30px,5vw,56px) clamp(18px,3vw,40px) clamp(18px,3vw,40px);pointer-events:none} #ns-root .ns-kicker{font:800 12px/1 'Nunito Sans',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#E4B93B;margin-bottom:10px;text-shadow:0 2px 12px rgba(6,15,17,.7)} #ns-root h1.ns-title{font:700 clamp(46px,8vw,92px)/.86 'Caveat',cursive;color:#FCF6EC;margin:0;transform:rotate(-1.4deg);text-shadow:2px 3px 0 rgba(0,0,0,.45),0 2px 18px rgba(6,15,17,.6)} #ns-root .ns-intro{font:400 clamp(14px,1.7vw,17px)/1.6 'Nunito Sans',sans-serif;color:#eef4f2;margin:16px 0 0;max-width:440px;text-wrap:pretty;text-shadow:0 1px 10px rgba(6,15,17,.75)} /* era filter chips */ #ns-root .ns-filters{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0;pointer-events:auto} #ns-root .ns-chip{pointer-events:auto;font:800 11px/1 'Nunito Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#eef4f2;background:rgba(10,22,25,.62);border:1.5px solid rgba(255,255,255,.30);padding:11px 15px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:background .2s ease,color .2s ease,border-color .2s ease} #ns-root .ns-chip:hover{border-color:#E4B93B;color:#FCF6EC} #ns-root .ns-chip[aria-selected="true"]{background:#B8431F;border-color:#B8431F;color:#FCF6EC} #ns-root .ns-chip:focus-visible{outline:3px solid #E4B93B;outline-offset:3px} #ns-root .ns-chip .ns-chip-span{opacity:.72;font-weight:700} /* info card — its own HTML panel overlaid on the map */ #ns-root .ns-card{position:absolute;top:16px;right:16px;z-index:600;width:min(340px,calc(100% - 32px));background:#FCF6EC;color:#3A2E22;border-radius:10px;padding:20px 20px 22px;box-shadow:0 24px 50px -20px rgba(0,0,0,.75);transform:translateY(6px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease} #ns-root .ns-card.is-open{opacity:1;transform:translateY(0);pointer-events:auto} #ns-root .ns-card-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border:none;background:rgba(58,46,34,.08);border-radius:50%;color:#3A2E22;font:700 18px/1 'Nunito Sans',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center} #ns-root .ns-card-close:hover{background:rgba(58,46,34,.16)} #ns-root .ns-card-close:focus-visible{outline:3px solid #0B6E66;outline-offset:2px} #ns-root .ns-card-era{display:inline-block;font:800 9.5px/1 'Nunito Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#B8431F;background:rgba(184,67,31,.1);padding:6px 9px;border-radius:3px;margin-bottom:12px} #ns-root .ns-card-year{font:700 40px/1 'Oswald',sans-serif;color:#B8431F;letter-spacing:.01em;margin:0 0 6px} #ns-root .ns-card-route{font:800 16px/1.3 'Nunito Sans',sans-serif;color:#3A2E22;margin:0 0 10px;text-wrap:pretty} #ns-root .ns-card-line{font:400 14px/1.6 'Nunito Sans',sans-serif;color:#5c4a37;margin:0 0 14px;text-wrap:pretty} /* Per-stop photo thumbnail (Stage 3, 86d3q351t) — injected by next-stops-map.js, shown only for a selected voyage with a photographed stop. The [hidden] rule is more specific than the base, so a hidden thumbnail truly collapses. */ #ns-root .ns-card-photo{display:block;width:100%;height:120px;object-fit:cover;border-radius:6px;margin:0 0 14px;border:1px solid #d8c6a8;background:#efe6d4} #ns-root .ns-card-photo[hidden]{display:none} #ns-root .ns-card-crew{font:800 9.5px/1.5 'Nunito Sans',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#5c4a37;margin:0 0 14px;padding-top:12px;border-top:1px dashed #d8c6a8} #ns-root .ns-card-crew span{color:#0B6E66} #ns-root .ns-card-btn{display:inline-flex;align-items:center;gap:8px;font:800 11px/1 'Nunito Sans',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#FCF6EC;background:#B8431F;padding:13px 18px;border-radius:4px;border:2px solid #3A2E22;box-shadow:3px 3px 0 #3A2E22;transition:gap .2s ease} #ns-root .ns-card-btn:hover{color:#FCF6EC;gap:12px} #ns-root .ns-card-btn:focus-visible{outline:3px solid #0B6E66;outline-offset:2px} #ns-root .ns-card-note{display:inline-flex;align-items:center;gap:7px;font:800 10.5px/1.4 'Nunito Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#4c3a29} #ns-root .ns-card-next{background:rgba(11,110,102,.08);border-radius:6px;padding:12px 12px 14px;margin-top:2px} /* "Planned voyage" pill in the info card — teal, to sit beside the rust era pill; hidden unless fillCard() flags the selected leg as planned (86d3q351t) */ #ns-root .ns-card-planned-badge{display:none} #ns-root .ns-card.ns-card-is-planned .ns-card-planned-badge{display:inline-block;vertical-align:top;font:800 9.5px/1 'Nunito Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#0B6E66;background:rgba(11,110,102,.12);padding:6px 9px;border-radius:3px;margin:0 0 12px 6px} /* pulsing "where next?" marker */ #ns-root .ns-pulse{position:relative} #ns-root .ns-pulse .ns-pulse-dot{position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:#E4B93B;border:2.5px solid #B8431F;box-shadow:0 1px 4px rgba(0,0,0,.5);z-index:2} #ns-root .ns-pulse .ns-pulse-ring{position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:rgba(228,185,59,.5);animation:nsPulse 2.4s ease-out infinite;z-index:1} @keyframes nsPulse{0%{transform:scale(1);opacity:.75}70%{transform:scale(4.2);opacity:0}100%{transform:scale(4.2);opacity:0}} /* Dreamworld's last known SPOT Trace position (86d3q351t). Same divIcon construction as .ns-pulse above, deliberately NOT the same look: the "where next?" beacon is gold-on-rust and aspirational, this is a real vessel and reads teal-on-cream, so the two can never be confused. */ #ns-root .ns-live{position:relative} #ns-root .ns-live .ns-live-dot{position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;background:#0B6E66;border:3px solid #FCF6EC;box-shadow:0 1px 5px rgba(0,0,0,.55);z-index:2} #ns-root .ns-live .ns-live-ring{position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;background:rgba(11,110,102,.45);animation:nsLive 2.8s ease-out infinite;z-index:1} @keyframes nsLive{0%{transform:scale(1);opacity:.7}70%{transform:scale(3.6);opacity:0}100%{transform:scale(3.6);opacity:0}} /* Older than 24h: muted and static. A week-old fix shouldn't pulse like a live one — the animation is the thing that says "now". */ #ns-root .ns-live--stale .ns-live-dot{background:#7d8d8a;border-color:#e6ddc8;box-shadow:0 1px 3px rgba(0,0,0,.4)} #ns-root .ns-live--stale .ns-live-ring{animation:none;opacity:0} /* The toggle gets its own overlay row under the era pills (it isn't a tab), which also keeps it off their line at 375px. */ #ns-root .ns-live-filters{margin-top:9px} #ns-root .ns-live-chip[aria-pressed="true"]{background:#0B6E66;border-color:#0B6E66;color:#FCF6EC} /* ------------------------------------------------------------------ TRACKING-STATE CHIP — the "standing by" companion to the toggle above. Deliberately NOT .ns-live-dot: that class belongs to the real Leaflet map marker (see .ns-live above) and giving it an animation here would silently retune the marker's pulse. This dot is .ns-track-dot and shares nothing with it but a palette. Three states, one slot — the chip never moves or resizes between them, so a returning visitor watches dim become lit in a spot they already know. Informational only: it is a , so no hover/press affordance. ------------------------------------------------------------------ */ #ns-root .ns-track-chip{display:inline-flex;align-items:center;gap:8px;cursor:default} #ns-root .ns-track-chip[hidden]{display:none} /* the base .ns-chip:hover lifts the border to gold; this isn't a control */ #ns-root .ns-track-chip:hover{border-color:rgba(255,255,255,.30);color:#eef4f2} #ns-root .ns-track-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#0B6E66} /* Standing by: ~38% of the live teal, flat, no glow — glow is reserved for a real position so the two can never be confused. Slow 2s breathe. */ #ns-root .ns-track-chip--standby{color:#b9cbc7} #ns-root .ns-track-chip--standby .ns-track-dot{background:#3f6f6a;animation:ns-breathe 2s ease-in-out infinite} /* Stale (>24h): muted and static, matching .ns-live--stale on the marker. */ #ns-root .ns-track-chip--stale{color:#c6cdcb} #ns-root .ns-track-chip--stale .ns-track-dot{background:#7d8d8a;animation:none} /* Live: full vivid teal, lit. */ #ns-root .ns-track-chip--live{color:#FCF6EC;border-color:rgba(11,110,102,.85)} #ns-root .ns-track-chip--live .ns-track-dot, #ns-root .ns-track-dot--lit{background:#0B6E66;animation:ns-lit 2.4s ease-in-out infinite} @keyframes ns-breathe{0%,100%{opacity:.42}50%{opacity:1}} @keyframes ns-lit{0%,100%{opacity:.78;box-shadow:0 0 0 0 rgba(11,110,102,.5)}50%{opacity:1;box-shadow:0 0 0 4px rgba(11,110,102,0)}} /* ------------------------------------------------------------------ LIVE DISPATCH REVEAL — the wax-sealed banner that unrolls the first time a genuinely fresh fix arrives. Values ported verbatim from next-stops-live-dispatch-REFERENCE.html (approved 2026-08-01); the reference is inline-styled as a mockup export, this page styles by class, so they moved here unchanged rather than into the template. Every animation hangs off .ns-dispatch--play rather than the element itself. The class is stripped and re-added when a NEWER timestamp arrives in the same session, which is what makes the sequence replay — an animation with `both` fill that has already finished will not restart on its own just because the section was unhidden again. ------------------------------------------------------------------ */ #ns-root .ns-dispatch{position:relative;padding:22px clamp(20px,4vw,48px) 6px;z-index:12} #ns-root .ns-dispatch[hidden]{display:none} #ns-root .ns-dispatch-lift{position:relative;filter:drop-shadow(0 18px 26px rgba(58,46,34,.34))} #ns-root .ns-unroll{display:grid} #ns-root .ns-unroll-clip{min-height:0;overflow:hidden} #ns-root .ns-dispatch-btn{display:block;width:100%;text-align:left;cursor:pointer;position:relative;border:2px solid #3a2e22;border-bottom:0;background:#fcf6ec;background-image:repeating-linear-gradient(#efe6d6 0 1px,transparent 1px 34px),radial-gradient(#ece0c8 1px,transparent 1px);background-size:100% 34px,22px 22px;padding:60px clamp(20px,4vw,44px) clamp(24px,3vw,34px);font-family:'Nunito Sans',sans-serif} #ns-root .ns-dispatch-btn:focus-visible{outline:3px solid #b8431f;outline-offset:3px} /* faint compass-rose watermark; clipped by .ns-unroll-clip where it overhangs */ #ns-root .ns-dispatch-compass{position:absolute;top:50%;right:clamp(-30px,1vw,26px);transform:translateY(-50%);opacity:.09;pointer-events:none} #ns-root .ns-dispatch-row{position:relative;display:flex;gap:clamp(16px,3vw,40px);align-items:flex-end;flex-wrap:wrap} #ns-root .ns-dispatch-main{flex:1 1 420px;min-width:0} #ns-root .ns-dispatch-eyebrow-row{display:flex;align-items:center;gap:9px;margin-bottom:6px} #ns-root .ns-dispatch-eyebrow{font:800 12px/1 'Oswald',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#0b6e66} /* The rotation sits on this inner span, not on .ns-ink-2: the ns-ink keyframe ends at `transform:none`, so carrying both on one element would wipe the hand-inked tilt the moment the entrance finished. Same values, both kept. */ #ns-root .ns-dispatch-head{display:block;font:700 clamp(38px,6.4vw,76px)/.92 'Caveat',cursive;color:#3a2e22;transform:rotate(-1.2deg);text-wrap:pretty} #ns-root .ns-dispatch-head-hot{color:#0b6e66} #ns-root .ns-dispatch-lede{font:600 clamp(15px,1.6vw,18px)/1.55 'Nunito Sans',sans-serif;color:#5c4a37;margin-top:12px;max-width:620px;text-wrap:pretty} #ns-root .ns-dispatch-lede strong{color:#3a2e22} #ns-root .ns-dispatch-cta{color:#b8431f;font-weight:800} #ns-root .ns-dispatch-fine{font:700 11px/1 'Oswald',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8a7358;margin-top:14px} #ns-root .ns-stampmark{flex:0 0 auto;transform:rotate(-8deg);opacity:.95;border:2.5px solid rgba(11,110,102,.72);border-radius:6px;padding:9px 14px 7px;text-align:center;color:rgba(11,110,102,.85);box-shadow:inset 0 0 0 1.5px rgba(11,110,102,.28)} #ns-root .ns-stamp-cap{font:800 10px/1 'Oswald',sans-serif;letter-spacing:.22em;text-transform:uppercase} #ns-root .ns-stamp-big{font:700 30px/1.05 'Oswald',sans-serif;letter-spacing:.02em} #ns-root .ns-stamp-cap:empty{display:none} #ns-root .ns-deckle{display:block;width:100%;height:18px;margin-top:-1px} #ns-root .ns-seal{position:absolute;top:-34px;left:50%;z-index:3;overflow:visible;transform:translate(-50%,0)} @keyframes ns-seal-drop{0%{transform:translate(-50%,-38px) scale(.35) rotate(-22deg);opacity:0}55%{transform:translate(-50%,0) scale(1.14) rotate(3deg);opacity:1}78%{transform:translate(-50%,0) scale(.95) rotate(-1deg)}100%{transform:translate(-50%,0) scale(1) rotate(0)}} @keyframes ns-crack-l{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-19px,7px) rotate(-15deg)}} @keyframes ns-crack-r{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(19px,7px) rotate(15deg)}} @keyframes ns-open{0%{grid-template-rows:0fr}100%{grid-template-rows:1fr}} @keyframes ns-ink{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}} @keyframes ns-stamp{0%{opacity:0;transform:rotate(-19deg) scale(2.1)}65%{opacity:.95;transform:rotate(-6deg) scale(.94)}100%{opacity:.95;transform:rotate(-8deg) scale(1)}} /* reduced-motion only — ns-ink for the seal, but keeping it horizontally centred */ @keyframes ns-ink-seal{0%{opacity:0;transform:translate(-50%,10px)}100%{opacity:1;transform:translate(-50%,0)}} #ns-root .ns-dispatch--play .ns-seal{animation:ns-seal-drop .46s cubic-bezier(.3,1.5,.5,1) both} #ns-root .ns-dispatch--play .ns-seal-l{transform-box:fill-box;transform-origin:right center;animation:ns-crack-l .42s .46s cubic-bezier(.2,.9,.3,1) both} #ns-root .ns-dispatch--play .ns-seal-r{transform-box:fill-box;transform-origin:left center;animation:ns-crack-r .42s .46s cubic-bezier(.2,.9,.3,1) both} #ns-root .ns-dispatch--play .ns-unroll{animation:ns-open .74s .58s cubic-bezier(.16,.9,.24,1) both} #ns-root .ns-dispatch--play .ns-ink-1{animation:ns-ink .5s 1.12s ease-out both} #ns-root .ns-dispatch--play .ns-ink-2{animation:ns-ink .5s 1.26s ease-out both} #ns-root .ns-dispatch--play .ns-ink-3{animation:ns-ink .5s 1.4s ease-out both} #ns-root .ns-dispatch--play .ns-stampmark{animation:ns-stamp .42s 1.5s cubic-bezier(.2,1.4,.4,1) both} @media (max-width:720px){ /* single column: the stamp drops under the headline instead of beside it */ #ns-root .ns-dispatch{padding:26px 14px 6px} #ns-root .ns-dispatch-row{align-items:flex-start} #ns-root .ns-dispatch-main{flex:1 1 100%} #ns-root .ns-stampmark{margin-top:16px} #ns-root .ns-dispatch-btn{padding:52px 18px 22px} /* the seal has to stay whole and legible, so it shrinks rather than crops */ #ns-root .ns-seal{width:62px;height:62px;top:-27px} #ns-root .ns-dispatch-compass{width:150px;height:150px} } @media (prefers-reduced-motion:reduce){ #ns-root .ns-live .ns-live-ring{animation:none;opacity:0} /* the standing-by lamp goes static; it still reads as "on", just not breathing */ #ns-root .ns-track-dot{animation:none!important;opacity:1;box-shadow:none} /* the whole dispatch collapses to one quick fade — no crack, no unroll */ #ns-root .ns-dispatch--play .ns-seal-l, #ns-root .ns-dispatch--play .ns-seal-r{animation:none;opacity:1;transform:none} #ns-root .ns-dispatch--play .ns-ink-1, #ns-root .ns-dispatch--play .ns-ink-2, #ns-root .ns-dispatch--play .ns-ink-3, #ns-root .ns-dispatch--play .ns-stampmark{animation:ns-ink .3s ease-out both} /* The seal fades on its own keyframe. ns-ink ends at `transform:none`, and an animation's fill outranks a plain declaration — so reusing it here would strip the seal's translate(-50%) and shove it off-centre. */ #ns-root .ns-dispatch--play .ns-seal{animation:ns-ink-seal .3s ease-out both} #ns-root .ns-dispatch--play .ns-unroll{animation:none;grid-template-rows:1fr} #ns-root .ns-dispatch--play .ns-stampmark{transform:rotate(-8deg);opacity:.95} } /* accessible voyage list */ #ns-root .ns-list{max-width:1120px;margin:0 auto;padding:clamp(32px,5vw,54px) clamp(16px,4vw,32px) clamp(46px,6vw,74px)} #ns-root .ns-list-lead{font:800 11px/1 'Nunito Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#E4B93B;margin-bottom:6px} #ns-root .ns-list-sub{font:400 14px/1.6 'Nunito Sans',sans-serif;color:#bcccc7;margin:0 0 20px;max-width:560px} #ns-root .ns-era-group{margin-bottom:26px} #ns-root .ns-era-h{font:600 clamp(24px,4vw,34px)/1 'Caveat',cursive;color:#FCF6EC;margin:0 0 3px} #ns-root .ns-era-span{font:800 10px/1 'Nunito Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8fb0a9;margin-bottom:14px;display:block} #ns-root .ns-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} #ns-root .ns-voyage{display:block;width:100%;text-align:left;cursor:pointer;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);border-radius:8px;padding:14px 15px;color:#FCF6EC;font-family:'Nunito Sans',sans-serif;transition:background .2s ease,border-color .2s ease,transform .2s ease} #ns-root .ns-voyage:hover{background:rgba(255,255,255,.09);border-color:rgba(228,185,59,.6);transform:translateY(-2px)} #ns-root .ns-voyage:focus-visible{outline:3px solid #E4B93B;outline-offset:2px} #ns-root .ns-voyage[aria-pressed="true"]{background:#B8431F;border-color:#E4B93B} #ns-root .ns-voyage-yr{font:700 22px/1 'Oswald',sans-serif;color:#E4B93B;margin-bottom:5px} #ns-root .ns-voyage[aria-pressed="true"] .ns-voyage-yr{color:#FCF6EC} #ns-root .ns-voyage-rt{font:700 13px/1.35 'Nunito Sans',sans-serif;color:#eef4f2} #ns-root .ns-voyage-tag{display:inline-block;margin-top:8px;font:800 8.5px/1 'Nunito Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#0B6E66;background:#E4B93B;padding:4px 7px;border-radius:3px} #ns-root .ns-voyage[aria-pressed="true"] .ns-voyage-tag{background:#FCF6EC} /* routes rest invisible and fade in only when hovered or chosen */ #ns-root .ns-stroke{transition:stroke-opacity .35s ease,stroke-width .35s ease,stroke .35s ease} /* attribution readability on dark */ #ns-root .leaflet-control-attribution{background:rgba(13,27,30,.82)!important;color:#cdd8d5!important;font:400 10px/1.4 'Nunito Sans',sans-serif} #ns-root .leaflet-control-attribution a{color:#E4B93B!important} #ns-root .leaflet-bar a{background:#122a2e;color:#FCF6EC;border-bottom-color:rgba(255,255,255,.18)} #ns-root .leaflet-bar a:hover{background:#1c3d43} /* lift the bottom map controls (zoom, bottom-left) clear of the viewport's bottom edge so they aren't hidden behind a mobile browser toolbar or an always-on-top desktop taskbar; env() adds the device safe-area on top. */ #ns-root .leaflet-bottom{margin-bottom:calc(12px + env(safe-area-inset-bottom))} #ns-root .leaflet-popup-content-wrapper{background:#FCF6EC;color:#3A2E22;border-radius:8px} #ns-root .leaflet-popup-content{font:700 13px/1.5 'Nunito Sans',sans-serif;margin:14px 16px} #ns-root .leaflet-popup-content a{color:#B8431F} #ns-root .leaflet-popup-tip{background:#FCF6EC} @media (max-width:720px){ #ns-root .ns-stage{height:calc(100dvh - 58px)} #ns-root .ns-stage::before{width:100%;height:min(400px,66%);background:linear-gradient(180deg,rgba(6,15,17,.92) 0%,rgba(6,15,17,.6) 45%,rgba(6,15,17,0) 100%)} #ns-root .ns-overlay{max-width:100%;width:100%;padding:16px 16px 14px} #ns-root .ns-intro{max-width:none} #ns-root h1.ns-title{font-size:clamp(40px,13vw,60px)} /* info card becomes a bottom sheet within the map */ #ns-root .ns-card{left:8px;right:8px;bottom:8px;top:auto;width:auto;max-height:64%;overflow:auto;transform:translateY(10px)} #ns-root .ns-card.is-open{transform:translateY(0)} /* Shorter thumbnail so it doesn't eat the limited bottom-sheet height */ #ns-root .ns-card-photo{height:88px} } @media (prefers-reduced-motion:reduce){ #ns-root .ns-pulse .ns-pulse-ring{animation:none;opacity:0} #ns-root .ns-card,#ns-root .ns-voyage,#ns-root .ns-chip,#ns-root .ns-stroke{transition:none!important} }