/* ═════════════════════════════════════════════════════════════ Backbase Captain (standard) - visual polish layer (TIER 1C). Stacks on top of tour.css. Adds: - Hero placeholder shimmer (heroTitle/heroSubtitle while loading) - Offline banner above the map section - Vaarverkeer "connecting" dot pulse + better empty-state copy - Body text inside InfoWindows uses Libre Franklin (existing JS had 'Inter' fallback; we override here via a class hook) ═════════════════════════════════════════════════════════════ */ /* ── Hero shimmer placeholder ────────────────────────────────────── Until tour.js fills in heroTitle/heroSubtitle/heroOverline they render as "…". We swap that for a subtle skeleton shimmer so the hero feels alive while data loads. The .hero-loading class is added to on DOMContentLoaded and removed by tour.js once the active route is rendered - or auto-removed after 4s for safety so it never gets stuck. */ body.hero-loading #heroOverline, body.hero-loading #heroTitle, body.hero-loading #heroSubtitle{ display:inline-block; color:transparent !important; background:linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 100%); background-size:200% 100%; animation:tour-shimmer 1.4s linear infinite; border-radius:4px; } body.hero-loading #heroOverline{min-width:200px;height:11px} body.hero-loading #heroTitle{min-width:340px;height:48px;margin:0.4rem 0} body.hero-loading #heroSubtitle{min-width:260px;height:18px} @keyframes tour-shimmer{ from{background-position:200% 0} to{background-position:-200% 0} } /* ── Offline banner (parity with live tour) ── */ .lt-offline-banner{ position:absolute;top:0;left:0;right:0;z-index:6; display:flex;align-items:center;gap:8px; padding:8px 14px 8px 11px; background:#FFF4D6;color:#5C3A00; border-bottom:1px solid rgba(180,83,9,0.18); font-family:'Libre Franklin',-apple-system,system-ui,sans-serif; font-size:0.75rem;font-weight:500;letter-spacing:0.02em; box-shadow:0 1px 4px rgba(92,58,0,0.08); animation:tour-banner-down 0.22s ease-out; } .lt-offline-banner-icon{flex-shrink:0;font-size:0.9rem;line-height:1} @keyframes tour-banner-down{from{transform:translateY(-100%)}to{transform:translateY(0)}} /* ── Vaarverkeer connection dot: pulse while connecting ── The vaarverkeer route renders #vvDot which lives in the live-feed status card. While the AIS feed is still in the 'connecting' state the dot is amber - add a pulsing ring for "alive" feel. Pulse stops automatically once the dot recolours to green (.vv-dot-ok set by JS; the connecting state is set via inline background and matched by the amber colour test below). */ .vv-dot{position:relative} .vv-dot::after{ content:'';position:absolute;inset:-4px;border-radius:50%; background:#B45309;opacity:0;pointer-events:none;z-index:-1; } /* Pulse only when the dot is still amber/connecting. Inline style on the element drives the test - tour.js sets dot.style.background to #B45309 (connecting) or #0F5132 (ok). We can't condition on inline style directly, so live-polish.js toggles a .vv-dot--connecting class. For static fallback, also pulse when the surrounding container has the data-vv-state attr set to "connecting". */ .vv-dot--connecting::after, [data-vv-state="connecting"] .vv-dot::after{ opacity:0.5;animation:vv-pulse 1.4s ease-out infinite; } @keyframes vv-pulse{ 0%{transform:scale(1);opacity:0.5} 70%{transform:scale(2.2);opacity:0} 100%{transform:scale(2.2);opacity:0} } /* ── Mobile (<=420px) ── All three top-nav pills (route picker, lang toggle, live icon) sit at 36 px tall across viewports per captain feedback 2026-05-24. We DON'T bump them to 44 px on mobile - 36 px is the chosen visual height even though it's slightly under the iOS HIG touch-target sweet spot. The pills are wide enough (route picker is full-width, lang toggle ~70 px, live icon 36 px circle) that the actual tap area is fine. */ @media(max-width:420px){ .route-btn{padding:8px 12px;font-size:0.72rem;display:inline-flex;align-items:center} /* No min-height overrides here - .route-picker select, .lang-toggle and .nav-link.nav-live all keep their 36 px height from tour.css. */ }