/* ═══════════════════════════════════════════════════════════════════════
PixAfar Globe Experience — Styles
Dark premium design with gold (#c9973b) accent
═══════════════════════════════════════════════════════════════════════ */
/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
/* Surfaces — dark to light progression */
--bg: #0b0d12;
--surface: #121218;
--surface-2: #1a1a24;
--surface-3: #22222e;
/* Borders */
--border: rgba(255,255,255,0.08);
--border-subtle: rgba(255,255,255,0.05);
--border-gold: rgba(201,151,59,0.25);
/* Brand */
--gold: #c9973b;
--gold-light: #e0b05a;
--gold-warm: #f0d28a;
--gold-glow: rgba(201,151,59,0.22);
--teal: #5bc49f;
--blue: #8db4d6;
--ocean: #4a90c4;
--danger: #f66;
/* Text */
--text: #f0f0f0;
--text-secondary: #b0b0b0;
--text-muted: #888;
--text-dim: #555;
--success: #7cd9b3;
/* Type scale — modular (1.2 ratio, base 14px) */
--fs-xs: 11px;
--fs-sm: 12px;
--fs-base: 14px;
--fs-md: 16px;
--fs-lg: 20px;
--fs-xl: 24px;
--fs-2xl: 30px;
--fs-3xl: 38px;
/* Spacing scale — 4px base grid */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
/* Radius scale */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
--r-pill: 999px;
/* Shadows — layered depth system */
--shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
--shadow-md: 0 8px 24px rgba(0,0,0,0.4);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
--shadow-xl: 0 24px 64px rgba(0,0,0,0.6);
--shadow-gold: 0 4px 20px rgba(201,151,59,0.2);
/* Layout */
--panel-w: 340px;
--panel-r: var(--r-lg);
--hdr-h: 52px;
/* Easing */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out: cubic-bezier(0.0, 0, 0.2, 1);
}
/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Ensure [hidden] always hides regardless of CSS display overrides */
[hidden] { display: none !important; }
html, body {
height: 100%;
overflow: hidden;
background: var(--bg);
color: var(--text);
font-family: 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
a { color: inherit; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ── Loading screen ─────────────────────────────────────────────────────── */
.loading-screen {
position: fixed; inset: 0; z-index: 9999;
background: var(--bg);
display: flex; align-items: center; justify-content: center;
flex-direction: column;
transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.loading-screen.is-hidden {
opacity: 0; pointer-events: none; visibility: hidden;
}
.loading-inner { text-align: center; }
.loading-logo {
font-size: 36px; font-weight: 700; letter-spacing: -1px;
margin-bottom: 24px;
}
.loading-text {
color: var(--text-muted); font-size: 13px;
letter-spacing: 1px; text-transform: uppercase;
margin-bottom: 20px;
}
.loading-bar-track {
width: 200px; height: 2px;
background: var(--surface-3);
border-radius: 2px; overflow: hidden;
margin: 0 auto;
}
.loading-bar {
height: 100%;
background: var(--gold);
border-radius: 2px;
animation: loadBar 2.5s var(--ease) forwards;
}
@keyframes loadBar { from { width: 0 } to { width: 90% } }
/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
position: fixed; top: 0; left: 0; right: 0;
height: var(--hdr-h);
z-index: 500;
background: rgba(11,13,18,0.85);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border-bottom: 1px solid var(--border);
}
.header-inner {
display: flex; align-items: center; gap: 16px;
height: 100%; padding: 0 20px;
}
.header-logo {
text-decoration: none;
font-size: 18px; font-weight: 700; letter-spacing: -0.5px;
flex-shrink: 0;
}
.logo-pix { color: var(--text); }
.logo-afar { color: var(--gold); }
.header-hint {
flex: 1; text-align: center;
/* Brighter than --text-muted (#888) so the hint stays legible against the
3D globe's city-lights and cloud textures during rotation. A subtle
dark text-shadow rescues readability when the hint sits over a bright
region (lit coastal cities on the night texture). */
font-size: 12px;
color: rgba(255, 255, 255, 0.88);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
letter-spacing: 0.3px;
transition: opacity 0.3s;
}
/* ── View toggle ─────────────────────────────────────────────────────────── */
.view-toggle {
display: flex; gap: 4px; flex-shrink: 0;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 3px;
}
.toggle-btn {
background: none; border: none;
padding: 5px 14px;
border-radius: 6px;
font-size: 12px; font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
}
.toggle-btn.is-active {
background: var(--gold);
color: #0b0d12;
}
.toggle-btn:hover:not(.is-active) { color: var(--text); }
/* ── Globe stage ─────────────────────────────────────────────────────────── */
.globe-stage, .map-stage, .atlas-stage {
position: fixed;
inset: 0;
top: var(--hdr-h);
}
/* Globe.gl injects a canvas — make it fill fully */
.globe-stage canvas { width: 100% !important; height: 100% !important; display: block; }
/* ── Mode switching ──────────────────────────────────────────────────────── */
[data-mode="globe"] .globe-stage { display: block; }
[data-mode="globe"] .map-stage { display: none; }
[data-mode="globe"] .atlas-stage { display: none; }
[data-mode="map"] .globe-stage { display: none; }
[data-mode="map"] .map-stage { display: block; }
[data-mode="map"] .atlas-stage { display: none; }
[data-mode="atlas"] .globe-stage { display: none; }
[data-mode="atlas"] .map-stage { display: none; }
[data-mode="atlas"] .atlas-stage { display: block; }
/* Hide non-globe overlays in map + atlas modes */
[data-mode="map"] .flight-overlay,
[data-mode="map"] .panel-hint,
[data-mode="atlas"] .flight-overlay,
[data-mode="atlas"] .panel-hint,
[data-mode="atlas"] .control-panel, /* covers .panel-from + .panel-to */
[data-mode="atlas"] .destination-panel,
[data-mode="atlas"] .timeline-scrubber,
[data-mode="atlas"] .timeline-toggle-btn { display: none !important; }
/* ── Leaflet dark override ───────────────────────────────────────────────── */
/* NOTE: L.map() initializes ON #map-container, not INSIDE it, so
`.leaflet-container` lands on the SAME element as `.map-stage`.
Use no-space selector (compound class), not descendant combinator. */
.map-stage.leaflet-container,
.leaflet-container {
background: var(--bg) !important;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.map-stage.leaflet-container {
/* Leaflet requires an explicit height on its container. Previously this
was `100%` which resolved to 100% of (viewport height) and,
combined with the 52px `top` offset for our header, pushed the bottom
of the map — and its zoom controls — 52px below the fold. Using
calc(100vh - hdr-h) makes the map exactly fill the visible area below
the header, so the leaflet-bottom controls land inside the viewport. */
height: calc(100vh - var(--hdr-h, 52px)); width: 100%;
}
/* Hide Leaflet attribution bar — copyright retained in page footer */
.leaflet-control-attribution { display: none !important; }
.leaflet-popup-content-wrapper {
background: var(--surface);
border: 1px solid var(--border-gold);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
color: var(--text);
}
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content { margin: 14px 16px; font-size: 13px; }
.leaflet-bar a, .leaflet-bar a:hover {
background: var(--surface-2);
border-color: var(--border);
color: var(--text);
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out { color: var(--text) !important; }
/* Fix: zoom controls were clipping against viewport edge — give them breathing
room and make sure they stay above the destination panel bottom edge. */
.leaflet-bottom.leaflet-right {
bottom: 24px !important;
right: 24px !important;
z-index: 500;
}
.leaflet-control-zoom {
border: 1px solid var(--border-gold) !important;
border-radius: 10px !important;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.leaflet-control-zoom a {
background: rgba(15,17,22,0.92) !important;
width: 36px !important;
height: 36px !important;
line-height: 36px !important;
font-size: 20px !important;
border-bottom: 1px solid var(--border) !important;
}
.leaflet-control-zoom a:last-child { border-bottom: none !important; }
.leaflet-control-zoom a:hover { background: rgba(201,151,59,0.18) !important; }
/* When the destination panel is open (covers ~68vh bottom), lift the zoom
controls up above it so Joyce can still zoom while a gallery is open. */
body.phase-landed .leaflet-bottom.leaflet-right {
bottom: calc(68vh + 20px) !important;
}
/* ── Photo marker pins (flat map) ────────────────────────────────────────── */
.photo-marker { background: none; border: none; }
.photo-marker-inner {
width: 56px; height: 56px;
border-radius: 50% 50% 50% 0;
border: 2.5px solid var(--gold);
overflow: hidden;
/* Rotate the parent 45deg so the sharp corner points DOWN-LEFT as a
teardrop. Chrome renders the asymmetric border-radius as a teardrop
even without rotation, but Safari/Firefox don't — they show a plain
rounded square. This rotation makes the shape consistent across all
browsers (Joyce's #10 feedback).
We counter-rotate the ![]()
below so the photo stays upright. */
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: center;
transform-origin: center;
box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 3px var(--gold-glow);
background: var(--surface-2);
transition: border-color 0.2s, transform 0.2s var(--ease-spring), box-shadow 0.2s;
cursor: pointer;
}
.photo-marker-inner img {
width: 100%; height: 100%;
object-fit: cover;
/* Counter-rotate the image so it stays upright even though the teardrop
container is rotated -45deg. Without !important the rule can lose
specificity battles in Safari. */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
display: block;
}
.photo-marker-inner.is-featured { border-color: #fff; box-shadow: 0 4px 20px rgba(255,255,255,0.25); }
/* ── Control panels (glassmorphism) ──────────────────────────────────────── */
.control-panel {
position: fixed;
top: calc(var(--hdr-h) + 24px);
width: var(--panel-w);
background: rgba(14,15,22,0.88);
backdrop-filter: blur(24px) saturate(1.5);
-webkit-backdrop-filter: blur(24px) saturate(1.5);
border: 1px solid var(--border-gold);
border-radius: var(--panel-r);
z-index: 200;
transition: opacity 0.4s var(--ease), transform 0.45s var(--ease);
}
/* NOTE: .panel-from was removed when per-gallery from_mode replaced the live
departure picker. The .panel-to positioning lives further down under the
"PANEL-TO POSITIONING" section. */
.panel-to {
opacity: 0; pointer-events: none;
transform: translateX(20px);
}
.panel-to.is-visible { opacity: 1; pointer-events: auto; transform: translateX(0); }
.panel-inner { padding: 22px 20px 20px; }
/* panel-step-badge: consolidated into the polish block. Keeping the
text-transform:none override from UX5 + the polish block's token-based
version as the single source of truth. */
/* panel-step-badge + panel-title: see consolidated versions in polish block */
.panel-hint { font-size: 11px; color: var(--text-dim); margin-top: 10px; text-align: center; }
/* Fade panels during flight */
.panels-hidden .control-panel { opacity: 0; pointer-events: none; }
/* ── Location input ──────────────────────────────────────────────────────── */
.input-wrap { position: relative; }
.location-input {
width: 100%;
padding: 11px 40px 11px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(201,151,59,0.3);
border-radius: 9px;
color: var(--text);
font-size: 14px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
appearance: none;
}
.location-input::placeholder { color: var(--text-dim); }
.location-input:focus {
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-glow);
}
/* Remove browser search-cancel button */
.location-input::-webkit-search-cancel-button { display: none; }
.input-spinner {
position: absolute; right: 12px; top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
border: 2px solid var(--border); border-top-color: var(--gold);
border-radius: 50%;
animation: spin 0.7s linear infinite;
opacity: 0; transition: opacity 0.2s;
pointer-events: none;
}
.input-spinner.is-active { opacity: 1; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
/* ── Suggestions dropdown ────────────────────────────────────────────────── */
.suggestions-list {
list-style: none;
margin-top: 6px;
background: rgba(16,16,24,0.98);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.25s var(--ease), opacity 0.2s;
}
.suggestions-list.is-open {
max-height: 320px;
opacity: 1;
overflow-y: auto;
}
.suggestion-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
cursor: pointer;
transition: background 0.15s;
border-bottom: 1px solid var(--border);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover,
.suggestion-item[aria-selected="true"] { background: rgba(201,151,59,0.1); }
.suggestion-thumb {
width: 50px; height: 38px;
object-fit: cover; border-radius: 5px;
flex-shrink: 0; background: var(--surface-3);
}
.suggestion-text { flex: 1; min-width: 0; }
.suggestion-name {
font-size: 13px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggestion-sub {
font-size: 11px; color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── Input error ─────────────────────────────────────────────────────────── */
.panel-error {
font-size: 12px; color: #f06; margin-top: 6px;
min-height: 16px;
}
/* ── Confirmed location state ────────────────────────────────────────────── */
.confirmed-loc {
display: flex; align-items: center; gap: 8px;
margin-top: 12px;
padding: 10px 12px;
background: rgba(201,151,59,0.08);
border: 1px solid var(--border-gold);
border-radius: 9px;
}
.confirmed-icon { font-size: 16px; flex-shrink: 0; }
.confirmed-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--gold); }
.confirmed-change {
background: none; border: none;
font-size: 11px; color: var(--text-muted);
cursor: pointer; padding: 2px 6px;
border-radius: 4px; transition: color 0.2s, background 0.2s;
text-decoration: underline; text-underline-offset: 2px;
}
.confirmed-change:hover { color: var(--text); background: rgba(255,255,255,0.05); }
/* ── Flight overlay banner ───────────────────────────────────────────────── */
.flight-overlay {
position: fixed;
top: calc(var(--hdr-h) + 16px);
left: 50%; transform: translateX(-50%) translateY(-12px);
background: rgba(8,9,14,0.94);
border: 1px solid rgba(201,151,59,0.45);
border-radius: 40px;
padding: 12px 24px;
display: flex; align-items: center; gap: 14px;
font-size: 13px; font-weight: 500; color: var(--text);
z-index: 400;
opacity: 0; pointer-events: none;
transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
white-space: nowrap;
}
.flight-overlay.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.flight-plane {
display: inline-flex; align-items: center;
animation: planeBob 1.1s ease-in-out infinite alternate;
}
.flight-plane svg { width: 22px; height: 22px; fill: var(--gold); }
@keyframes planeBob {
from { transform: translateY(0) rotate(45deg); }
to { transform: translateY(-5px) rotate(45deg); }
}
.flight-label-from, .flight-label-to { color: var(--gold); font-weight: 700; }
.flight-arrow { color: var(--text-muted); }
.flight-skip {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: var(--text-muted);
font-size: 11px; font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
cursor: pointer;
margin-left: 12px;
transition: background 0.15s, color 0.15s, border-color 0.15s;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.flight-skip:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.3); }
/* ── Destination panel ───────────────────────────────────────────────────── */
.destination-panel {
position: fixed;
bottom: 0; left: 0; right: 0;
height: 68vh;
background: linear-gradient(
180deg,
rgba(11,13,18,0.0) 0%,
rgba(11,13,18,0.97) 6%,
rgba(11,13,18,1.0) 10%
);
transform: translateY(100%);
transition: transform 0.55s var(--ease);
z-index: 300;
overflow-y: auto;
border-top: 1px solid var(--border-gold);
overscroll-behavior: contain;
}
.destination-panel.is-open { transform: translateY(0); }
.dest-header {
display: flex; align-items: center; gap: 12px;
padding: 16px 24px 12px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
position: sticky; top: 0;
background: rgba(11,13,18,0.97);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 10;
}
.dest-back {
background: none; border: 1px solid var(--border);
border-radius: 7px; padding: 7px 12px;
font-size: 12px; color: var(--text-muted);
cursor: pointer; flex-shrink: 0;
transition: border-color 0.2s, color 0.2s;
}
.dest-back:hover { border-color: var(--gold); color: var(--text); }
.dest-location-info { flex: 1; min-width: 0; }
/* dest-city + dest-country: consolidated into the polish block below.
Keeping overflow/ellipsis here as it's structural, not visual. */
.dest-city {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dest-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dest-star-btn {
background: none;
border: 1px solid var(--border-gold);
border-radius: 7px; padding: 7px 12px;
font-size: 12px; color: var(--gold);
cursor: pointer; display: flex; align-items: center; gap: 5px;
transition: background 0.2s, border-color 0.2s;
}
.dest-star-btn:hover { background: var(--gold-glow); }
.dest-star-btn.is-starred { background: var(--gold-glow); }
.dest-star-btn.is-starred .star-icon::before { content: '★'; }
.star-icon { font-size: 14px; }
.star-label { font-size: 11px; }
/* SVG icons inside dest-header action buttons */
.dest-btn-icon { width: 16px; height: 16px; vertical-align: -2px; flex-shrink: 0; }
.dest-share-btn, .dest-edit-btn, .dest-delete-btn {
background: none;
border: 1px solid var(--border-gold);
border-radius: 7px; padding: 7px 12px;
font-size: 12px; color: var(--gold);
cursor: pointer; display: flex; align-items: center; gap: 5px;
transition: background 0.2s, border-color 0.2s;
}
.dest-share-btn:hover, .dest-edit-btn:hover { background: var(--gold-glow); }
.dest-delete-btn:hover { background: rgba(255,80,80,0.12); border-color: rgba(255,80,80,0.4); color: #f66; }
.dest-delete-btn.is-confirming { background: rgba(255,80,80,0.2); border-color: #f66; color: #f66; }
/* "Open full gallery" link — hidden while the Globe app IS the gallery
viewer. Re-enable when deployed to production with a real domain by
removing this display:none. The markup stays in index.html so it's
a one-line CSS change to bring it back. */
.dest-view-full {
display: none;
background: var(--gold); color: #0b0d12;
border-radius: 7px; padding: 8px 14px;
font-size: 12px; font-weight: 700;
text-decoration: none; flex-shrink: 0;
transition: background 0.2s;
white-space: nowrap;
}
.dest-view-full:hover { background: var(--gold-light); }
.dest-meta {
padding: 8px 24px 4px;
font-size: 12px; color: var(--text-muted);
}
.dest-photographer { color: var(--text); font-weight: 600; margin-left: 4px; }
/* ── Photo grid ──────────────────────────────────────────────────────────── */
.dest-photo-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
padding: 14px 20px 48px;
}
.photo-card { border-radius: 9px; overflow: hidden; background: var(--surface-3); }
.photo-card-btn {
display: block; width: 100%;
aspect-ratio: 4/3;
padding: 0; border: none; background: none;
cursor: pointer; overflow: hidden;
}
.photo-card-btn img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.35s var(--ease), filter 0.25s;
filter: brightness(0.9);
}
.photo-card-btn:hover img { transform: scale(1.06); filter: brightness(1.05); }
.photo-card-btn:focus-visible {
outline: 2px solid var(--gold); outline-offset: 2px;
}
/* Video badge */
.photo-card { position: relative; }
.photo-card-video-badge {
position: absolute; top: 8px; left: 8px;
background: rgba(0,0,0,0.7); border-radius: 4px;
padding: 2px 6px; font-size: 10px; color: #fff;
pointer-events: none;
}
/* ── Destination loading dots ───────────────────────────────────────────── */
.dest-loading {
display: flex; justify-content: center;
padding: 40px 0;
}
.dest-loading.is-hidden { display: none; }
.dest-loading-dots { display: flex; gap: 8px; }
.dest-loading-dots span {
width: 8px; height: 8px;
background: var(--gold);
border-radius: 50%;
animation: dotPulse 1.2s ease-in-out infinite;
}
.dest-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.dest-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
0%, 100% { opacity: 0.2; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.3s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.93);
}
.lightbox-img-wrap {
position: relative; z-index: 1;
max-width: min(90vw, 1200px);
max-height: 85vh;
display: flex; align-items: center; justify-content: center;
}
.lightbox-img {
max-width: 100%; max-height: 85vh;
object-fit: contain; display: block;
border-radius: 4px;
box-shadow: 0 24px 80px rgba(0,0,0,0.8);
}
.lightbox-close {
position: absolute; top: 20px; right: 20px;
background: rgba(255,255,255,0.1); border: none;
width: 40px; height: 40px; border-radius: 50%;
font-size: 18px; color: #fff;
cursor: pointer; z-index: 2;
transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-rotate {
position: absolute; top: 20px; right: 70px;
background: rgba(255,255,255,0.1); border: none;
width: 40px; height: 40px; border-radius: 50%;
color: #fff;
cursor: pointer; z-index: 2;
transition: background 0.2s, transform 0.2s;
display: flex; align-items: center; justify-content: center;
}
.lightbox-rotate:hover { background: rgba(255,255,255,0.2); }
.lightbox-rotate:active { transform: scale(0.92); }
.lightbox-img {
/* Smooth the rotation when the user clicks ⟳. The img element gets a
CSS variable set on it from JS each time the rotate button is clicked. */
transform: rotate(var(--lb-rotate, 0deg));
transition: transform 220ms ease;
/* When the photo is on its side (90/270°) the image's natural aspect
ratio rotates too, so the wrap can clip the long edge. Constrain by
the wrap's shorter dimension to keep the rotated photo fully visible. */
max-width: 100%; max-height: 100%;
object-fit: contain;
}
.lightbox-prev, .lightbox-next {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
width: 48px; height: 48px; border-radius: 50%;
font-size: 20px; color: #fff;
cursor: pointer; z-index: 2;
transition: background 0.2s;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.18); }
.lightbox-caption {
position: absolute; bottom: 56px; left: 50%;
transform: translateX(-50%);
font-size: 12px; color: rgba(255,255,255,0.6);
z-index: 2; text-align: center;
max-width: 480px; pointer-events: none;
}
.lightbox-counter {
position: absolute; bottom: 28px; left: 50%;
transform: translateX(-50%);
font-size: 11px; color: rgba(255,255,255,0.4);
z-index: 2; pointer-events: none;
}
/* ── Globe tooltip (rendered inside Globe.gl's element) ──────────────────── */
.globe-tooltip {
background: rgba(10,11,18,0.95);
border: 1px solid rgba(201,151,59,0.5);
border-radius: 10px;
padding: 10px;
max-width: 190px;
font-size: 12px;
color: var(--text);
pointer-events: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.globe-tooltip img {
width: 100%; height: 76px;
object-fit: cover; border-radius: 6px;
display: block; margin-bottom: 8px;
}
.globe-tooltip-name {
font-size: 12px; font-weight: 700; color: var(--gold);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: 2px;
}
.globe-tooltip-sub {
font-size: 11px; color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── Leaflet popup content ───────────────────────────────────────────────── */
.map-popup { min-width: 200px; }
.map-popup-img {
width: 100%; height: 100px;
object-fit: cover; border-radius: 7px;
margin-bottom: 10px; display: block;
background: var(--surface-3);
}
.map-popup-name { font-size: 14px; font-weight: 700; color: var(--gold); margin-bottom: 2px; }
.map-popup-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.map-popup-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.map-popup-btn {
background: var(--gold); color: #0b0d12;
border: none; border-radius: 6px;
padding: 7px 12px; font-size: 12px; font-weight: 700;
cursor: pointer; text-decoration: none;
display: inline-block;
transition: background 0.2s;
}
.map-popup-btn:hover { background: var(--gold-light); }
.map-popup-star {
background: none;
border: 1px solid var(--border-gold);
border-radius: 6px; padding: 7px 10px;
font-size: 14px; color: var(--gold);
cursor: pointer; transition: background 0.2s;
}
.map-popup-star:hover { background: var(--gold-glow); }
.map-popup-star.is-starred { background: var(--gold-glow); }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
:root { --panel-w: calc(100vw - 32px); }
.panel-to { left: 16px; right: 16px; top: auto; bottom: 16px; }
.panel-to.is-visible { transform: translateY(0); }
.header-hint { display: none; }
.star-label { display: none; }
.destination-panel { height: 80vh; }
.dest-photo-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; padding: 10px 12px 40px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.dest-view-full { font-size: 11px; padding: 7px 10px; }
}
@media (max-width: 480px) {
.dest-header { flex-wrap: wrap; }
.dest-city { font-size: 16px; }
}
/* ── Mobile header: fit everything in ~375px ─────────────────────────── */
/* At 600px: shrink gaps, collapse toggle text labels to icons only,
shorten auth name, hide tour text. This brings the header from ~560px
down to ~330px so all controls are reachable on a phone. */
@media (max-width: 600px) {
.header-inner { gap: 4px; padding: 0 8px; }
.view-toggle { gap: 2px; padding: 2px; }
/* 44px min touch target (Apple HIG + Google Material) so middle button
(Map) is reliably tappable between Globe and Atlas. */
.toggle-btn { padding: 10px 12px; min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center; }
.toggle-btn .hdr-icon { margin-right: 0; }
.toggle-btn-label { display: none; } /* hide "Globe", "Map", "Atlas" text */
.tour-btn { margin-left: 2px; padding: 10px; min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.tour-btn-label { display: none; } /* hide "Tour" text, keep icon */
.auth-menu-trigger { margin-left: 2px; padding: 5px 6px 5px 8px; gap: 4px;
min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center; }
.auth-name { display: none; } /* hide name — tap opens dropdown with full name */
.auth-avatar-icon { display: block !important; } /* show person icon on mobile */
.auth-caret { font-size: 10px; }
.timeline-toggle-btn { padding: 10px; min-width: 44px; min-height: 44px; }
.timeline-btn-label { display: none; }
.header-logo .brand-img { max-height: 22px; }
}
/* ════════════════════════════════════════════════════════════════════════
LOGIN OVERLAY
════════════════════════════════════════════════════════════════════════ */
.login-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: radial-gradient(ellipse at center, rgba(11,13,18,0.96) 0%, rgba(5,6,10,0.99) 70%);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
animation: loginFade 280ms ease;
}
@keyframes loginFade { from { opacity: 0; } to { opacity: 1; } }
.login-card {
width: 100%;
max-width: 420px;
background: linear-gradient(180deg, rgba(26,26,30,0.92), rgba(18,18,22,0.92));
border: 1px solid rgba(201,151,59,0.32);
border-radius: 18px;
padding: 36px 32px 28px;
box-shadow:
0 24px 60px rgba(0,0,0,0.6),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 80px rgba(201,151,59,0.08);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
.login-logo {
text-align: center;
font-family: 'Georgia', serif;
font-size: 30px;
letter-spacing: -0.5px;
margin-bottom: 6px;
}
.login-logo .logo-pix { color: #f0f0f0; font-weight: 600; }
.login-logo .logo-afar { color: var(--gold); font-weight: 600; }
.login-tag {
display: inline-block;
margin-left: 8px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gold);
border: 1px solid rgba(201,151,59,0.4);
border-radius: 4px;
padding: 2px 8px;
vertical-align: middle;
}
.login-title {
margin: 18px 0 4px;
font-size: 18px;
font-weight: 500;
text-align: center;
color: #f0f0f0;
}
.login-sub {
margin: 0 0 22px;
font-size: 13px;
text-align: center;
color: #888;
}
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field-label {
font-size: 11px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #999;
}
.login-field input {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 12px 14px;
font-size: 14px;
color: #f0f0f0;
outline: none;
transition: border-color 160ms ease, background 160ms ease;
}
.login-field input::placeholder { color: #555; }
.login-field input:focus {
border-color: rgba(201,151,59,0.6);
background: rgba(255,255,255,0.06);
}
.login-error {
min-height: 18px;
margin: 4px 0 0;
font-size: 12.5px;
color: #f66;
}
.login-btn {
position: relative;
margin-top: 6px;
padding: 13px 18px;
background: linear-gradient(180deg, #d6a544, #b3812f);
color: #181410;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.4px;
border: 0;
border-radius: 10px;
cursor: pointer;
transition: transform 120ms ease, box-shadow 160ms ease, opacity 160ms ease;
box-shadow: 0 6px 16px rgba(201,151,59,0.25);
}
.login-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(201,151,59,0.35);
}
.login-btn:active:not(:disabled) { transform: translateY(0); }
.login-btn:disabled { opacity: 0.6; cursor: progress; }
.login-btn .login-btn-spinner {
display: none;
width: 14px;
height: 14px;
border: 2px solid rgba(24,20,16,0.35);
border-top-color: rgba(24,20,16,0.95);
border-radius: 50%;
margin-left: 8px;
vertical-align: middle;
animation: spin 700ms linear infinite;
}
.login-btn.is-busy .login-btn-spinner { display: inline-block; }
.login-btn.is-busy .login-btn-label::after { content: '…'; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-foot {
margin: 22px 0 0;
font-size: 12.5px;
text-align: center;
color: #777;
}
.login-foot a { color: var(--gold); text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }
/* When the body is in the 'guest' auth state, fade everything else */
body[data-auth="checking"] .site-header,
body[data-auth="checking"] .panel-to,
body[data-auth="guest"] .site-header,
body[data-auth="guest"] .panel-to {
opacity: 0;
pointer-events: none;
}
/* ════════════════════════════════════════════════════════════════════════
AUTH BADGE (header)
════════════════════════════════════════════════════════════════════════ */
.auth-badge {
display: flex;
align-items: center;
gap: 10px;
margin-left: 12px;
padding: 6px 10px 6px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 999px;
font-size: 12.5px;
color: #cfcfcf;
}
.auth-name { font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Person silhouette icon — hidden by default (desktop shows the name),
shown on mobile ≤600px where name is hidden. */
.auth-avatar-icon { display: none; width: 20px; height: 20px; flex-shrink: 0; stroke: var(--gold); }
.auth-logout {
background: rgba(201,151,59,0.16);
border: 1px solid rgba(201,151,59,0.35);
color: var(--gold);
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 999px;
cursor: pointer;
transition: background 140ms ease;
}
.auth-logout:hover { background: rgba(201,151,59,0.28); }
/* ════════════════════════════════════════════════════════════════════════
FROM-PICKER MODAL
════════════════════════════════════════════════════════════════════════ */
.from-picker {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.from-picker[hidden] { display: none; }
.from-picker-backdrop {
position: absolute;
inset: 0;
background: rgba(5,6,10,0.78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
animation: loginFade 220ms ease;
}
.from-picker-card {
position: relative;
width: 100%;
max-width: 460px;
background: linear-gradient(180deg, rgba(26,26,30,0.96), rgba(18,18,22,0.96));
border: 1px solid rgba(201,151,59,0.34);
border-radius: 16px;
padding: 28px 26px 22px;
box-shadow:
0 22px 50px rgba(0,0,0,0.6),
0 0 0 1px rgba(255,255,255,0.04) inset;
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
animation: fpRise 260ms cubic-bezier(.2,.8,.2,1);
}
@keyframes fpRise {
from { opacity: 0; transform: translateY(14px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.from-picker-close {
position: absolute;
top: 12px;
right: 12px;
width: 30px;
height: 30px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: #ccc;
border-radius: 50%;
font-size: 14px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
.from-picker-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.from-picker-title {
margin: 0 0 4px;
font-size: 18px;
font-weight: 500;
color: #f0f0f0;
}
.from-picker-sub {
margin: 0 0 14px;
font-size: 12.5px;
color: #888;
}
.from-picker-current {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding: 10px 12px;
background: rgba(201,151,59,0.08);
border: 1px solid rgba(201,151,59,0.22);
border-radius: 10px;
font-size: 12.5px;
}
.fpc-label { color: #888; }
.fpc-value { color: var(--gold); font-weight: 500; }
.from-picker .input-wrap { position: relative; }
.from-picker .location-input {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 12px 14px;
font-size: 14px;
color: #f0f0f0;
outline: none;
}
.from-picker .location-input:focus {
border-color: rgba(201,151,59,0.6);
}
.from-picker .input-spinner {
position: absolute;
right: 12px; top: 50%;
width: 14px; height: 14px;
margin-top: -7px;
border: 2px solid rgba(201,151,59,0.25);
border-top-color: var(--gold);
border-radius: 50%;
opacity: 0;
transition: opacity 140ms ease;
}
.from-picker .input-spinner.is-active {
opacity: 1;
animation: spin 700ms linear infinite;
}
.from-picker .suggestions-list {
list-style: none;
margin: 8px 0 0;
padding: 0;
max-height: 240px;
overflow-y: auto;
border-radius: 10px;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.06);
display: none;
}
.from-picker .suggestions-list.is-open { display: block; }
.from-picker .suggestion-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 120ms ease;
}
.from-picker .suggestion-item:last-child { border-bottom: 0; }
.from-picker .suggestion-item:hover,
.from-picker .suggestion-item[aria-selected="true"] { background: rgba(201,151,59,0.12); }
.from-picker .suggestion-name { font-size: 13.5px; color: #f0f0f0; }
.from-picker .suggestion-sub { font-size: 11.5px; color: #777; margin-top: 2px; }
.from-picker-error {
min-height: 18px;
margin: 8px 0 0;
font-size: 12.5px;
color: #f66;
}
.from-picker-actions {
display: flex;
justify-content: center;
margin-top: 14px;
}
.from-picker-reset {
background: transparent;
border: 1px dashed rgba(255,255,255,0.18);
color: #888;
font-size: 12px;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
transition: border-color 140ms ease, color 140ms ease;
}
.from-picker-reset:hover { color: var(--gold); border-color: rgba(201,151,59,0.4); }
/* ════════════════════════════════════════════════════════════════════════
DESTINATION-PANEL "FROM" BUTTON
════════════════════════════════════════════════════════════════════════ */
.dest-from-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
color: #f0f0f0;
font-size: 12px;
padding: 7px 12px;
border-radius: 999px;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.dest-from-btn:hover {
background: rgba(201,151,59,0.16);
border-color: rgba(201,151,59,0.4);
color: var(--gold);
}
.dest-from-btn.is-default {
border-style: dashed;
color: #aaa;
}
.dest-from-btn.is-default:hover { color: var(--gold); }
.dest-from-btn .from-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ════════════════════════════════════════════════════════════════════════
PANEL-TO POSITIONING (now lives on the LEFT — was previously on the right)
════════════════════════════════════════════════════════════════════════ */
.panel-to {
left: 24px;
right: auto;
top: calc(var(--hdr-h, 64px) + 16px);
transform: none;
opacity: 1;
pointer-events: auto;
}
.panels-hidden .panel-to { opacity: 0; pointer-events: none; }
/* Declutter: when a destination is landed, hide the "Where do you want to go?"
card so the open gallery panel owns the screen. The phase class is set by
flight.js via document.body.classList when State.phase === 'LANDED'. */
body.phase-landed .panel-to { opacity: 0; pointer-events: none; transform: translateX(-20px); transition: opacity 240ms ease, transform 240ms ease; }
@media (max-width: 720px) {
.panel-to {
/* Bottom sheet on mobile — sits at the bottom of the viewport so the
globe/map stays visible above. max-height keeps it from covering
everything; the suggestion list scrolls inside. */
left: 12px; right: 12px;
top: auto;
bottom: 12px;
max-height: 40vh;
overflow-y: auto;
border-radius: var(--r-xl);
}
.panel-to .panel-inner { padding: 14px 16px 12px; }
/* Collapse the "START YOUR JOURNEY" badge + "Where do you want to go?"
heading on mobile — just show the search box to save space. */
.panel-to .panel-step-badge { display: none; }
.panel-to .step-title { font-size: 16px; margin-bottom: 8px; }
.panel-to .step-hint { font-size: 11px; }
.auth-badge { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
MODE CHIPS (inside from-picker)
════════════════════════════════════════════════════════════════════════ */
.mode-chips {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin: 6px 0 14px;
}
.mode-chip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 4px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
color: #bbb;
font-size: 11.5px;
font-weight: 500;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
}
.mode-chip:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(255,255,255,0.18);
color: #f0f0f0;
transform: translateY(-1px);
}
.mode-chip-icon {
font-size: 20px;
line-height: 1;
}
.mode-chip.is-selected {
background: rgba(201,151,59,0.14);
border-color: rgba(201,151,59,0.55);
color: var(--gold);
box-shadow: 0 0 0 1px rgba(201,151,59,0.3) inset, 0 4px 14px rgba(201,151,59,0.18);
}
.mode-chip.is-selected[data-mode="drive"] {
background: rgba(91,196,159,0.14);
border-color: rgba(91,196,159,0.55);
color: #7cd9b3;
box-shadow: 0 0 0 1px rgba(91,196,159,0.3) inset, 0 4px 14px rgba(91,196,159,0.18);
}
.mode-chip.is-selected[data-mode="train"] {
background: rgba(141,180,214,0.14);
border-color: rgba(141,180,214,0.55);
color: #a8c8e5;
box-shadow: 0 0 0 1px rgba(141,180,214,0.3) inset, 0 4px 14px rgba(141,180,214,0.18);
}
.mode-chip.is-selected[data-mode="boat"] {
background: rgba(74,144,196,0.14);
border-color: rgba(74,144,196,0.55);
color: #82b2dc;
box-shadow: 0 0 0 1px rgba(74,144,196,0.3) inset, 0 4px 14px rgba(74,144,196,0.18);
}
/* ════════════════════════════════════════════════════════════════════════
DEST-PANEL FROM-BUTTON — color the icon by mode
════════════════════════════════════════════════════════════════════════ */
.dest-from-btn[data-mode="fly"] .from-icon { color: #c9973b; }
.dest-from-btn[data-mode="drive"] .from-icon { color: #5bc49f; }
.dest-from-btn[data-mode="train"] .from-icon { color: #8db4d6; }
.dest-from-btn[data-mode="boat"] .from-icon { color: #4a90c4; }
/* ════════════════════════════════════════════════════════════════════════
FLIGHT OVERLAY — tint accent by mode
════════════════════════════════════════════════════════════════════════ */
.flight-overlay[data-mode="drive"] { border-color: rgba(91,196,159,0.55); box-shadow: 0 8px 32px rgba(91,196,159,0.22); }
.flight-overlay[data-mode="drive"] .flight-plane { color: #7cd9b3; }
.flight-overlay[data-mode="drive"] .flight-arrow { color: #7cd9b3; }
.flight-overlay[data-mode="train"] { border-color: rgba(141,180,214,0.55); box-shadow: 0 8px 32px rgba(141,180,214,0.22); }
.flight-overlay[data-mode="train"] .flight-plane { color: #a8c8e5; }
.flight-overlay[data-mode="train"] .flight-arrow { color: #a8c8e5; }
.flight-overlay[data-mode="boat"] { border-color: rgba(74,144,196,0.55); box-shadow: 0 8px 32px rgba(74,144,196,0.22); }
.flight-overlay[data-mode="boat"] .flight-plane { color: #82b2dc; }
.flight-overlay[data-mode="boat"] .flight-arrow { color: #82b2dc; }
/* ════════════════════════════════════════════════════════════════════════
BRAND IMAGE — live-site logo.png (377×187 white PNG on dark)
════════════════════════════════════════════════════════════════════════ */
.brand-img {
display: block;
width: auto;
height: auto;
max-width: 100%;
-webkit-user-drag: none;
user-select: none;
}
/* Loading screen: big + centered */
.loading-logo .brand-img { max-width: 220px; margin: 0 auto 4px; }
/* Login card: centered, medium */
.login-logo .brand-img { max-width: 180px; margin: 0 auto; }
.login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.login-logo .login-tag { margin-left: 0; }
/* Site header: small, aligned with nav row */
.header-logo { display: inline-flex; align-items: center; }
.header-logo .brand-img { max-height: 30px; width: auto; }
@media (max-width: 720px) {
.header-logo .brand-img { max-height: 24px; }
.login-logo .brand-img { max-width: 140px; }
}
/* ════════════════════════════════════════════════════════════════════════
AUTH MENU (replaces auth-badge)
════════════════════════════════════════════════════════════════════════ */
.auth-menu {
position: relative;
margin-left: 12px;
}
.auth-menu-trigger {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
color: #cfcfcf;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.auth-menu-trigger:hover {
background: rgba(201,151,59,0.12);
border-color: rgba(201,151,59,0.35);
color: var(--gold);
}
.auth-menu-trigger .auth-name {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.auth-caret {
font-size: 10px;
opacity: 0.7;
transition: transform 160ms ease;
}
.auth-menu-trigger[aria-expanded="true"] .auth-caret { transform: rotate(180deg); }
.auth-menu-list {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
margin: 0;
padding: 6px;
list-style: none;
background: linear-gradient(180deg, rgba(26,26,30,0.96), rgba(18,18,22,0.96));
border: 1px solid rgba(201,151,59,0.3);
border-radius: 12px;
box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
z-index: 500;
animation: authMenuRise 160ms cubic-bezier(.2,.8,.2,1);
}
@keyframes authMenuRise {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.auth-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
background: transparent;
border: 0;
color: #e6e6e6;
font-size: 13px;
text-align: left;
text-decoration: none;
border-radius: 8px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.auth-menu-item:hover,
.auth-menu-item:focus-visible {
background: rgba(201,151,59,0.14);
color: var(--gold);
outline: none;
}
.auth-menu-item .am-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
flex-shrink: 0;
font-size: 14px;
}
.auth-menu-sep {
height: 1px;
margin: 4px 6px;
background: rgba(255,255,255,0.08);
list-style: none;
}
.auth-menu-signout { color: #f0a0a0; }
.auth-menu-signout:hover { background: rgba(240,80,80,0.14); color: #ff8a8a; }
/* ════════════════════════════════════════════════════════════════════════
EMPTY-STATE CTA inside panel-to (when user has no galleries)
════════════════════════════════════════════════════════════════════════ */
.panel-to.is-empty .input-wrap,
.panel-to.is-empty .suggestions-list,
.panel-to.is-empty .panel-hint { display: none; }
.empty-cta {
display: block;
margin-top: 12px;
padding: 14px 16px;
background: linear-gradient(180deg, #d6a544, #b3812f);
color: #181410;
font-size: 13px;
font-weight: 600;
text-align: center;
text-decoration: none;
border-radius: 10px;
box-shadow: 0 6px 16px rgba(201,151,59,0.25);
transition: transform 120ms ease, box-shadow 160ms ease;
}
.empty-cta:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(201,151,59,0.35);
}
.empty-msg {
margin: 8px 0 0;
color: #bbb;
font-size: 12px;
text-align: center;
}
/* ════════════════════════════════════════════════════════════════════════
SITE VIEW SHELL — full-screen panels for signup/membership/account/etc.
════════════════════════════════════════════════════════════════════════ */
.site-view {
position: fixed;
inset: 0;
z-index: 400;
padding: calc(var(--hdr-h, 64px) + 24px) 24px 48px;
overflow-y: auto;
background: radial-gradient(ellipse at top, rgba(20,24,34,0.94) 0%, rgba(6,7,11,0.99) 70%);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
animation: siteViewFade 220ms ease;
}
.site-view[hidden] { display: none; }
@keyframes siteViewFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.view-inner {
max-width: 480px;
margin: 0 auto;
padding: 36px 32px 32px;
background: linear-gradient(180deg, rgba(26,26,30,0.92), rgba(18,18,22,0.92));
border: 1px solid rgba(201,151,59,0.28);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.view-inner.wide { max-width: 980px; }
.view-back {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 14px;
padding: 6px 12px;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
color: #aaa;
font-size: 12px;
border-radius: 999px;
cursor: pointer;
transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.view-back:hover { color: var(--gold); border-color: rgba(201,151,59,0.45); background: rgba(201,151,59,0.08); }
.view-title {
margin: 0 0 4px;
font-size: 24px;
font-weight: 500;
color: #f0f0f0;
letter-spacing: -0.2px;
}
.view-sub {
margin: 0 0 22px;
font-size: 13.5px;
color: #888;
}
/* ── Form primitives ── */
.view-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label {
font-size: 11px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #999;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="tel"] {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 12px 14px;
font-size: 14px;
color: #f0f0f0;
outline: none;
transition: border-color 160ms ease, background 160ms ease;
}
.form-field input::placeholder { color: #555; }
.form-field input:focus {
border-color: rgba(201,151,59,0.6);
background: rgba(255,255,255,0.06);
}
.form-hint { font-size: 11.5px; color: #777; }
.form-error { min-height: 18px; margin: 4px 0 0; font-size: 12.5px; color: #f66; }
.form-success { min-height: 18px; margin: 4px 0 0; font-size: 12.5px; color: #7cd9b3; }
.form-section {
margin: 18px 0 4px;
font-size: 13px;
font-weight: 600;
color: #cfcfcf;
text-transform: uppercase;
letter-spacing: 0.7px;
}
.view-btn {
position: relative;
margin-top: 6px;
padding: 13px 18px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
border: 0;
border-radius: 10px;
cursor: pointer;
transition: transform 120ms ease, box-shadow 160ms ease, opacity 160ms ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.view-btn.primary {
background: linear-gradient(180deg, #d6a544, #b3812f);
color: #181410;
box-shadow: 0 6px 16px rgba(201,151,59,0.25);
}
.view-btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(201,151,59,0.35); }
.view-btn.ghost {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.14);
color: #cfcfcf;
}
.view-btn.ghost:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: #f0f0f0; }
.view-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.view-btn .btn-spinner {
display: none;
width: 14px; height: 14px;
border: 2px solid rgba(24,20,16,0.3);
border-top-color: rgba(24,20,16,0.95);
border-radius: 50%;
animation: spin 700ms linear infinite;
}
.view-btn.is-busy .btn-spinner { display: inline-block; }
.view-btn.is-busy .btn-label::after { content: '…'; }
.view-foot { margin: 22px 0 0; font-size: 12.5px; text-align: center; color: #777; }
.view-foot-note { margin: 20px 0 0; font-size: 12px; text-align: center; color: #666; }
.view-link {
background: transparent; border: 0; padding: 0;
color: var(--gold);
font-size: inherit;
text-decoration: none;
cursor: pointer;
}
.view-link:hover { text-decoration: underline; }
.login-link-btn {
background: transparent; border: 0; padding: 0;
color: var(--gold);
font-size: inherit;
font-weight: 500;
cursor: pointer;
}
.login-link-btn:hover { text-decoration: underline; }
/* ════════════════════════════════════════════════════════════════════════
MEMBERSHIP GRID
════════════════════════════════════════════════════════════════════════ */
.plan-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 16px;
}
.plan-card {
position: relative;
padding: 32px 24px 24px;
background: linear-gradient(180deg, rgba(30,30,36,0.96), rgba(20,20,26,0.96));
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.plan-card:hover { transform: translateY(-2px); border-color: rgba(201,151,59,0.4); }
.plan-card.is-current {
border-color: rgba(201,151,59,0.65);
box-shadow: 0 0 0 1px rgba(201,151,59,0.45) inset, 0 16px 40px rgba(201,151,59,0.15);
}
/* plan-ribbon, plan-title, plan-price: see consolidated rules in the
"PLAN CARDS — premium pricing grid" section near end of file. */
.plan-price { text-align: center; margin: 8px 0 20px; color: #f0f0f0; }
.plan-price-period { font-size: 13px; color: #888; margin-left: 2px; }
.plan-price-year { font-size: 11.5px; color: #777; margin-top: 4px; }
.plan-features {
list-style: none; padding: 0; margin: 0 0 20px;
font-size: 13px; color: #cfcfcf;
display: flex; flex-direction: column; gap: 8px;
}
.plan-card .view-btn { width: 100%; }
/* ════════════════════════════════════════════════════════════════════════
BILLING CARDS
════════════════════════════════════════════════════════════════════════ */
.billing-card {
margin: 16px 0;
padding: 20px 22px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
}
.billing-label {
font-size: 11px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #888;
margin-bottom: 6px;
}
.billing-plan { font-size: 20px; font-weight: 600; color: #f0f0f0; margin-bottom: 4px; }
.billing-meta { font-size: 12.5px; color: #aaa; }
.storage-bar-track {
height: 10px;
margin: 12px 0 8px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
overflow: hidden;
}
.storage-bar {
height: 100%;
background: linear-gradient(90deg, #5bc49f, #c9973b);
transition: width 400ms cubic-bezier(.2,.8,.2,1);
}
.storage-bar[data-level="warn"] { background: linear-gradient(90deg, #c9973b, #e67a22); }
.storage-bar[data-level="danger"] { background: linear-gradient(90deg, #e67a22, #ff5555); }
.billing-actions {
display: flex;
gap: 12px;
margin-top: 18px;
flex-wrap: wrap;
}
/* ════════════════════════════════════════════════════════════════════════
CREATE GALLERY — map picker + dropzone
════════════════════════════════════════════════════════════════════════ */
.cg-mappick { margin: 6px 0 0; }
.cg-map {
height: 320px;
margin-top: 6px;
background: #0a0d14;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
overflow: hidden;
}
.cg-coords {
margin-top: 6px;
font-size: 12px;
color: #888;
text-align: center;
}
.cg-dropzone {
margin-top: 6px;
padding: 22px;
background: rgba(255,255,255,0.03);
border: 2px dashed rgba(255,255,255,0.14);
border-radius: 14px;
transition: border-color 160ms ease, background 160ms ease;
}
.cg-dropzone.is-dragging {
border-color: var(--gold);
background: rgba(201,151,59,0.08);
}
.cg-dropzone-inner { text-align: center; color: #aaa; }
.cg-dropzone-icon { font-size: 32px; margin-bottom: 8px; }
.cg-dropzone-text { font-size: 14px; color: #ccc; }
.cg-dropzone-sub { margin-top: 4px; font-size: 11.5px; color: #777; }
.cg-thumbs {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.cg-thumb {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.4);
}
.cg-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.cg-cover-tag {
position: absolute;
top: 6px; left: 6px;
padding: 2px 8px;
background: var(--gold);
color: #181410;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
border-radius: 999px;
}
.cg-thumb-remove {
position: absolute;
top: 6px; right: 6px;
width: 22px; height: 22px;
background: rgba(0,0,0,0.7);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
font-size: 11px;
border-radius: 50%;
cursor: pointer;
transition: background 140ms ease;
}
.cg-thumb-remove:hover { background: rgba(220,50,50,0.85); }
/* Upload progress bar — shown only while a gallery POST is in flight. */
.cg-progress {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0 4px;
}
.cg-progress[hidden] { display: none; }
.cg-progress-track {
flex: 1;
height: 6px;
background: rgba(255,255,255,0.08);
border-radius: 3px;
overflow: hidden;
}
.cg-progress-fill {
height: 100%;
width: 0;
background: linear-gradient(90deg, #c9a35a, #e8c987);
transition: width 180ms ease;
}
.cg-progress-label {
font-size: 12px;
color: #aaa;
min-width: 6ch;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ════════════════════════════════════════════════════════════════════════
Hide globe/map/panels when inside a site-view
════════════════════════════════════════════════════════════════════════ */
body[data-view="signup"] .globe-stage,
body[data-view="signup"] .map-stage,
body[data-view="signup"] .panel-to,
body[data-view="membership"] .globe-stage,
body[data-view="membership"] .map-stage,
body[data-view="membership"] .panel-to,
body[data-view="account"] .globe-stage,
body[data-view="account"] .map-stage,
body[data-view="account"] .panel-to,
body[data-view="billing"] .globe-stage,
body[data-view="billing"] .map-stage,
body[data-view="billing"] .panel-to,
body[data-view="create-gallery"] .globe-stage,
body[data-view="create-gallery"] .map-stage,
body[data-view="create-gallery"] .panel-to {
display: none;
}
@media (max-width: 720px) {
.view-inner { padding: 24px 18px; }
.form-row { grid-template-columns: 1fr; }
.billing-actions { flex-direction: column; }
.billing-actions .view-btn { width: 100%; }
.cg-map { height: 260px; }
}
/* ════════════════════════════════════════════════════════════════════════
PUBLIC SHARE VIEW
Chrome stripped down for logged-out viewers arriving via /?share=XXX
════════════════════════════════════════════════════════════════════════ */
/* Hide everything that only makes sense to the gallery owner */
body[data-mode="public"] .auth-menu,
body[data-mode="public"] .panel-to,
body[data-mode="public"] #dest-from-btn,
body[data-mode="public"] #dest-star-btn,
body[data-mode="public"] #dest-share-btn {
display: none !important;
}
/* Re-brand the header hint for public viewers */
body[data-mode="public"] #step-hint {
content: 'Viewing a shared journey on PixAfar';
}
/* The persistent "Join PixAfar" CTA in the corner */
.public-cta {
position: fixed;
top: 84px;
right: 24px;
z-index: 150;
max-width: 260px;
padding: 16px 18px;
background: linear-gradient(180deg, rgba(26,26,30,0.94), rgba(18,18,22,0.94));
border: 1px solid rgba(201,151,59,0.4);
border-radius: 14px;
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 60px rgba(201,151,59,0.08);
animation: publicCtaSlide 480ms cubic-bezier(.2,.8,.2,1) 800ms backwards;
}
@keyframes publicCtaSlide {
from { opacity: 0; transform: translateY(-12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.public-cta-title {
font-size: 15px;
font-weight: 600;
color: #f0f0f0;
margin-bottom: 4px;
}
.public-cta-sub {
font-size: 12.5px;
color: #aaa;
line-height: 1.45;
margin-bottom: 12px;
}
.public-cta-btn {
display: inline-block;
padding: 9px 16px;
background: linear-gradient(180deg, #d6a544, #b3812f);
color: #181410;
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
transition: transform 120ms ease, box-shadow 160ms ease;
box-shadow: 0 4px 14px rgba(201,151,59,0.25);
}
.public-cta-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(201,151,59,0.35);
}
/* Public view error surface */
.public-error {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
max-width: 440px;
padding: 22px 26px;
background: rgba(26,26,30,0.95);
border: 1px solid rgba(255,100,100,0.35);
border-radius: 14px;
color: #f0f0f0;
font-size: 14px;
line-height: 1.5;
text-align: center;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 200;
}
@media (max-width: 720px) {
.public-cta { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
}
/* ════════════════════════════════════════════════════════════════════════
SHARE BUTTON + MODAL
Lives in the destination panel for gallery owners.
════════════════════════════════════════════════════════════════════════ */
.dest-share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
color: #f0f0f0;
font-size: 12px;
padding: 7px 12px;
border-radius: 999px;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.dest-share-btn:hover {
background: rgba(201,151,59,0.16);
border-color: rgba(201,151,59,0.45);
color: var(--gold);
}
.dest-share-btn.is-public {
background: rgba(91,196,159,0.14);
border-color: rgba(91,196,159,0.5);
color: #7cd9b3;
}
.share-modal {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.share-modal[hidden] { display: none; }
.share-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(5,6,10,0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.share-modal-card {
position: relative;
width: 100%;
max-width: 460px;
background: linear-gradient(180deg, rgba(26,26,30,0.96), rgba(18,18,22,0.96));
border: 1px solid rgba(201,151,59,0.36);
border-radius: 16px;
padding: 28px 26px 24px;
box-shadow: 0 22px 50px rgba(0,0,0,0.6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
animation: fpRise 260ms cubic-bezier(.2,.8,.2,1);
}
.share-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 30px;
height: 30px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: #ccc;
border-radius: 50%;
font-size: 14px;
cursor: pointer;
}
.share-modal-title {
margin: 0 0 4px;
font-size: 18px;
font-weight: 500;
color: #f0f0f0;
}
.share-modal-sub {
margin: 0 0 18px;
font-size: 12.5px;
color: #888;
}
.share-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
margin-bottom: 16px;
}
.share-toggle-label { font-size: 13.5px; color: #e0e0e0; }
.share-toggle-sub { font-size: 11.5px; color: #888; margin-top: 2px; }
/* Simple pill switch */
.share-switch {
position: relative;
width: 42px;
height: 24px;
background: rgba(255,255,255,0.1);
border-radius: 999px;
cursor: pointer;
transition: background 160ms ease;
flex-shrink: 0;
}
.share-switch::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 18px; height: 18px;
background: #f0f0f0;
border-radius: 50%;
transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}
.share-switch.is-on { background: rgba(91,196,159,0.6); }
.share-switch.is-on::after { transform: translateX(18px); }
.share-url-row {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.share-url-input {
flex: 1;
min-width: 0;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
padding: 10px 12px;
font-size: 12.5px;
color: #e0e0e0;
font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.share-copy-btn {
padding: 10px 16px;
background: linear-gradient(180deg, #d6a544, #b3812f);
color: #181410;
font-size: 12.5px;
font-weight: 600;
border: 0;
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
}
.share-copy-btn.is-copied {
background: linear-gradient(180deg, #7cd9b3, #5bc49f);
}
.share-hint {
font-size: 11.5px;
color: #888;
margin: 4px 0 0;
}
/* ════════════════════════════════════════════════════════════════════════
EXIF AUTO-FILL BADGE
Shown inside the create-gallery map picker after EXIF GPS auto-places pin
════════════════════════════════════════════════════════════════════════ */
.cg-exif-badge {
display: inline-block;
margin-top: 8px;
padding: 6px 12px;
background: rgba(91,196,159,0.12);
border: 1px solid rgba(91,196,159,0.35);
border-radius: 999px;
font-size: 12px;
color: #7cd9b3;
animation: exifPop 320ms cubic-bezier(.2,.8,.2,1);
transition: opacity 1.2s ease;
}
.cg-exif-badge.is-fading { opacity: 0; }
@keyframes exifPop {
from { opacity: 0; transform: translateY(-6px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ════════════════════════════════════════════════════════════════════════
MARKER CLUSTER — dark theme
Overrides leaflet.markercluster's default blue bubbles with our gold-
accented glass-panel style.
════════════════════════════════════════════════════════════════════════ */
.px-cluster-wrap {
background: transparent !important;
border: none !important;
}
.px-cluster-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 30% 30%, rgba(26,26,30,0.95), rgba(12,13,18,0.95));
border: 2px solid rgba(201,151,59,0.65);
border-radius: 50%;
box-shadow:
0 4px 14px rgba(0,0,0,0.55),
0 0 0 4px rgba(201,151,59,0.12),
0 0 20px rgba(201,151,59,0.18);
color: var(--gold);
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-weight: 600;
transition: transform 180ms cubic-bezier(.2,.8,.2,1);
cursor: pointer;
}
.px-cluster-inner:hover {
transform: scale(1.08);
}
.px-cluster-count {
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
line-height: 1;
}
/* Hide the default leaflet.markercluster bubbles that might leak through */
.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large,
.marker-cluster div {
background: transparent !important;
color: inherit !important;
}
/* ════════════════════════════════════════════════════════════════════════
TRAVEL STATS CHIP (header)
"🌐 23 of 195 countries · 4 of 7 continents"
════════════════════════════════════════════════════════════════════════ */
.stats-chip {
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: 16px;
padding: 7px 14px;
background: rgba(201,151,59,0.10);
border: 1px solid rgba(201,151,59,0.32);
border-radius: 999px;
font-size: 12px;
color: #e0e0e0;
white-space: nowrap;
transition: background 160ms ease, transform 160ms ease;
cursor: default;
}
.stats-chip:hover {
background: rgba(201,151,59,0.18);
transform: translateY(-1px);
}
.stats-chip .stats-icon {
width: 15px; height: 15px;
margin-right: 4px;
vertical-align: -2px;
stroke: var(--gold);
}
.stats-chip .stats-num {
font-weight: 600;
color: var(--gold);
font-variant-numeric: tabular-nums;
}
.stats-chip .stats-sub {
color: #999;
margin-left: 4px;
}
.stats-chip .stats-divider {
color: rgba(255,255,255,0.18);
font-weight: 300;
}
body[data-mode="public"] .stats-chip { display: none; }
@media (max-width: 1100px) {
.stats-chip .stats-sub { display: none; } /* just "23 · 4" on narrow screens */
}
@media (max-width: 820px) {
.stats-chip { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
AUTO-TOUR BUTTON (header)
════════════════════════════════════════════════════════════════════════ */
.tour-btn {
margin-left: 10px;
padding: 8px 16px;
background: rgba(201,151,59,0.10);
border: 1px solid rgba(201,151,59,0.4);
border-radius: 999px;
color: var(--gold);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 140ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.tour-btn:hover {
background: rgba(201,151,59,0.2);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(201,151,59,0.2);
}
.tour-btn[data-state="playing"] {
background: rgba(91,196,159,0.16);
border-color: rgba(91,196,159,0.5);
color: #7cd9b3;
box-shadow: 0 0 0 3px rgba(91,196,159,0.12), 0 4px 14px rgba(91,196,159,0.2);
animation: tourPulse 2.4s ease-in-out infinite;
}
@keyframes tourPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(91,196,159,0.12), 0 4px 14px rgba(91,196,159,0.2); }
50% { box-shadow: 0 0 0 5px rgba(91,196,159,0.2), 0 6px 22px rgba(91,196,159,0.32); }
}
body[data-mode="public"] .tour-btn,
body[data-mode="embed"] .tour-btn,
body[data-mode="landing"] .tour-btn { display: none; }
@media (max-width: 820px) {
.tour-btn { padding: 6px 12px; font-size: 11.5px; }
}
/* ════════════════════════════════════════════════════════════════════════
LIGHTBOX MINI-MAP (roadmap #7)
Small Leaflet map in the bottom-left of the lightbox showing the gallery's
geographic location. Non-interactive — pure context.
════════════════════════════════════════════════════════════════════════ */
.lightbox-minimap {
position: absolute;
bottom: 20px;
left: 20px;
width: 220px;
border-radius: 12px;
overflow: hidden;
background: rgba(12,13,18,0.94);
border: 1px solid rgba(201,151,59,0.35);
box-shadow: 0 10px 30px rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 320ms ease 180ms, transform 320ms ease 180ms;
z-index: 5;
}
.lightbox.is-open .lightbox-minimap {
opacity: 1;
transform: translateY(0);
}
.lightbox-minimap-inner {
width: 100%;
height: 140px;
background: rgba(20,20,26,0.9);
}
.lightbox-minimap-label {
padding: 8px 12px 10px;
font-size: 11.5px;
color: #e0e0e0;
border-top: 1px solid rgba(201,151,59,0.2);
text-align: center;
letter-spacing: 0.3px;
}
/* Override the global leaflet-container background so the mini-map tiles
don't bleed through as #0b0d12 before they load */
.lightbox-minimap .leaflet-container {
background: #0a0b10 !important;
}
@media (max-width: 720px) {
.lightbox-minimap { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
TIMELINE SCRUBBER (roadmap #10)
Bottom-floating year slider that filters pins by gallery_date.
════════════════════════════════════════════════════════════════════════ */
.timeline-scrubber {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
width: min(560px, calc(100vw - 48px));
padding: 14px 20px 12px;
background: linear-gradient(180deg, rgba(22,22,28,0.92), rgba(14,14,20,0.92));
border: 1px solid rgba(201,151,59,0.35);
border-radius: 14px;
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
box-shadow: 0 16px 40px rgba(0,0,0,0.55);
z-index: 180;
animation: timelineSlide 340ms cubic-bezier(.2,.8,.2,1);
}
.timeline-scrubber[hidden] { display: none; }
@keyframes timelineSlide {
from { opacity: 0; transform: translateX(-50%) translateY(14px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.timeline-label {
font-size: 12.5px;
color: var(--gold);
font-weight: 600;
letter-spacing: 0.3px;
text-align: center;
margin-bottom: 8px;
}
/* Dual-thumb range container: two stacked on top of a
shared track. Pointer-events only on the thumbs so both remain draggable. */
.timeline-range {
position: relative;
height: 28px;
margin: 6px 0 2px;
}
.timeline-range-track {
position: absolute;
left: 0; right: 0; top: 50%;
transform: translateY(-50%);
height: 4px;
background: rgba(201,151,59,0.18);
border-radius: 999px;
pointer-events: none;
}
.timeline-range-fill {
position: absolute;
top: 0; bottom: 0;
background: linear-gradient(90deg, #c9973b, #f0d28a);
border-radius: 999px;
box-shadow: 0 0 10px rgba(201,151,59,0.5);
}
.timeline-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
-webkit-appearance: none;
appearance: none;
background: transparent;
pointer-events: none; /* track doesn't capture — thumbs do */
margin: 0;
padding: 0;
}
/* Native tracks are invisible — our .timeline-range-track handles the look */
.timeline-input::-webkit-slider-runnable-track {
height: 4px;
background: transparent;
}
.timeline-input::-moz-range-track {
height: 4px;
background: transparent;
}
.timeline-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px; height: 18px;
background: radial-gradient(circle at 35% 35%, #f0d28a, #c9973b 70%);
border: 2px solid rgba(255,255,255,0.9);
border-radius: 50%;
box-shadow: 0 4px 12px rgba(201,151,59,0.45), 0 0 0 4px rgba(201,151,59,0.1);
cursor: grab;
pointer-events: auto; /* thumbs ARE interactive */
transition: transform 140ms ease;
position: relative;
z-index: 2;
}
.timeline-input::-webkit-slider-thumb:hover { transform: scale(1.12); }
.timeline-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); }
.timeline-input::-moz-range-thumb {
width: 18px; height: 18px;
background: radial-gradient(circle at 35% 35%, #f0d28a, #c9973b 70%);
border: 2px solid rgba(255,255,255,0.9);
border-radius: 50%;
box-shadow: 0 4px 12px rgba(201,151,59,0.45);
cursor: grab;
pointer-events: auto;
}
/* Stack the "max" input above "min" so when thumbs overlap, dragging
either direction still works naturally. */
.timeline-input-max { z-index: 1; }
.timeline-bookends {
display: flex;
justify-content: space-between;
font-size: 10.5px;
color: #888;
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
/* Header toggle button */
/* Timeline button — matches the Tour button style (auto-width with label).
font-size and font-weight bumped to match .tour-btn (12.5px / 600) so
the standalone header buttons (Tour, Timeline, My Galleries) read as
one consistent group. Joyce's report: "the links for like a timeline
seems smaller my galleries I think looked [smaller too]." */
.timeline-toggle-btn {
margin-left: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 14px 7px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-md);
color: #e0e0e0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: all 180ms var(--ease);
}
.timeline-toggle-btn:hover {
background: rgba(201,151,59,0.14);
border-color: rgba(201,151,59,0.4);
transform: translateY(-1px);
}
.timeline-toggle-btn.is-active {
background: rgba(201,151,59,0.22);
border-color: rgba(201,151,59,0.55);
color: var(--gold);
}
body[data-mode="public"] .timeline-toggle-btn,
body[data-mode="public"] .timeline-scrubber { display: none; }
/* "My Galleries" top-level header button — promoted out of the avatar
dropdown per Joyce's feedback. Hidden by default; revealed only when
the user is authenticated (body[data-auth="in"]) so anonymous landing
visitors don't see it. Visual style matches .timeline-toggle-btn so it
reads as part of the existing toolbar group. */
.galleries-btn {
display: none;
margin-left: 8px;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 14px 7px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-md);
color: #e0e0e0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: all 180ms var(--ease);
}
body[data-auth="in"] .galleries-btn { display: inline-flex; }
.galleries-btn:hover {
background: rgba(201,151,59,0.14);
border-color: rgba(201,151,59,0.4);
transform: translateY(-1px);
}
.galleries-btn:active { transform: translateY(0); }
/* On narrow viewports the label gets crowded — drop it and keep the icon. */
@media (max-width: 720px) {
.galleries-btn-label { display: none; }
.galleries-btn { padding: 7px 10px; }
}
@media (max-width: 720px) {
.timeline-scrubber { bottom: 16px; width: calc(100vw - 32px); padding: 12px 16px 10px; }
.timeline-toggle-btn { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
EMBED MODE (roadmap #13)
Triggered by ?share=XXX&embed=1 — strips even more chrome than public
mode. Designed to live inside an iframe on a blog.
════════════════════════════════════════════════════════════════════════ */
/* Everything that public mode hides, plus the header entirely and the Join CTA */
body[data-mode="embed"] .site-header,
body[data-mode="embed"] .public-cta,
body[data-mode="embed"] .auth-menu,
body[data-mode="embed"] .panel-to,
body[data-mode="embed"] .tour-btn,
body[data-mode="embed"] .timeline-toggle-btn,
body[data-mode="embed"] .timeline-scrubber,
body[data-mode="embed"] .stats-chip,
body[data-mode="embed"] #dest-from-btn,
body[data-mode="embed"] #dest-star-btn,
body[data-mode="embed"] #dest-share-btn,
body[data-mode="embed"] #dest-view-full-link {
display: none !important;
}
/* Make the globe/map stage fill the iframe edge-to-edge */
body[data-mode="embed"] .globe-stage,
body[data-mode="embed"] .map-stage {
top: 0 !important;
}
/* Subtle "Made with PixAfar" badge in the corner — bottom-right so it
doesn't compete with the destination panel that still appears after flight */
.embed-badge {
position: fixed;
top: 12px;
right: 12px;
padding: 5px 12px;
background: rgba(12,13,18,0.85);
border: 1px solid rgba(201,151,59,0.4);
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--gold);
text-decoration: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 150;
transition: background 140ms ease;
}
.embed-badge:hover {
background: rgba(201,151,59,0.18);
}
/* ════════════════════════════════════════════════════════════════════════
EMBED ROW inside the share modal
════════════════════════════════════════════════════════════════════════ */
.share-embed-row {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.share-embed-header {
margin-bottom: 10px;
}
.share-embed-title {
display: block;
font-size: 13px;
font-weight: 600;
color: #e0e0e0;
margin-bottom: 2px;
}
.share-embed-sub {
display: block;
font-size: 11px;
color: #888;
}
.share-embed-row .share-url-input {
font-size: 11px; /* smaller because iframe snippets are long */
}
/* ════════════════════════════════════════════════════════════════════════
LANDING VIEW (marketing page for logged-out visitors)
Auto-tour of real public galleries with a hero CTA overlay
════════════════════════════════════════════════════════════════════════ */
/* Landing mode strips the header + all owner chrome, then layers a hero card */
body[data-mode="landing"] .auth-menu,
body[data-mode="landing"] .panel-to,
body[data-mode="landing"] .stats-chip,
body[data-mode="landing"] .header-hint,
body[data-mode="landing"] .timeline-toggle-btn,
body[data-mode="landing"] .timeline-scrubber,
body[data-mode="landing"] #dest-from-btn,
body[data-mode="landing"] #dest-star-btn,
body[data-mode="landing"] #dest-share-btn {
display: none !important;
}
/* The sign-in + sign-up hero card — floats on the left, doesn't block the globe */
.landing-hero {
position: fixed;
left: 6vw;
top: 50%;
transform: translateY(-50%);
max-width: 440px;
padding: 36px 34px 32px;
background: linear-gradient(170deg, rgba(22,22,28,0.72), rgba(10,11,16,0.88));
border: 1px solid rgba(201,151,59,0.35);
border-radius: 18px;
backdrop-filter: blur(22px) saturate(1.6);
-webkit-backdrop-filter: blur(22px) saturate(1.6);
box-shadow: 0 28px 60px rgba(0,0,0,0.55), 0 0 80px rgba(201,151,59,0.08);
z-index: 120;
animation: landingHeroRise 680ms cubic-bezier(.2,.8,.2,1) 260ms backwards;
}
@keyframes landingHeroRise {
from { opacity: 0; transform: translateY(calc(-50% + 24px)) scale(0.96); }
to { opacity: 1; transform: translateY(-50%) scale(1); }
}
.landing-eyebrow {
display: inline-block;
padding: 6px 14px;
background: rgba(201,151,59,0.14);
border: 1px solid rgba(201,151,59,0.4);
border-radius: 999px;
color: var(--gold);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
margin-bottom: 18px;
}
.landing-title {
margin: 0 0 14px;
font-family: 'Georgia', serif;
font-size: 38px;
line-height: 1.12;
font-weight: 400;
color: #f4f4f4;
white-space: pre-line; /* honour the \n in "Pin every trip.\nFly..." */
letter-spacing: -0.5px;
}
.landing-sub {
margin: 0 0 26px;
font-size: 14.5px;
line-height: 1.55;
color: #bbb;
}
.landing-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.landing-btn {
padding: 13px 22px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
}
.landing-btn-primary {
background: linear-gradient(180deg, #d6a544, #b3812f);
color: #181410;
border: 0;
box-shadow: 0 6px 18px rgba(201,151,59,0.28);
}
.landing-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(201,151,59,0.4);
}
.landing-btn-ghost {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: #e0e0e0;
}
.landing-btn-ghost:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.22);
}
/* Sign-in link in the top-right so returning users don't have to hunt */
body[data-mode="landing"] .site-header .header-logo {
pointer-events: none; /* logo isn't a link on the landing page */
}
@media (max-width: 820px) {
.landing-hero {
left: 16px; right: 16px; max-width: none;
top: auto; bottom: 24px; transform: none;
padding: 24px 22px;
}
.landing-title { font-size: 28px; }
.landing-sub { font-size: 13px; }
}
/* ════════════════════════════════════════════════════════════════════════
HERO LOGO (landing page)
Large brand mark above the eyebrow chip — gives the pitch a real
centerpiece instead of relying on the tiny 60px header logo.
════════════════════════════════════════════════════════════════════════ */
.landing-hero-logo {
display: block;
margin: 0 auto 22px;
width: 200px;
max-width: 80%;
text-align: center;
pointer-events: auto;
transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.landing-hero-logo:hover {
transform: scale(1.03);
}
.landing-hero-logo .brand-img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 4px 18px rgba(201,151,59,0.18));
}
@media (max-width: 820px) {
.landing-hero-logo { width: 160px; margin-bottom: 16px; }
}
/* ════════════════════════════════════════════════════════════════════════
SITE FOOTER (copyright + design credit)
Persistent thin bar at the bottom of the viewport. Shown on landing,
public share, and embed views — visible everywhere except inside the
authed app where the destination panel needs the screen real estate.
════════════════════════════════════════════════════════════════════════ */
.site-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 24px;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,9,14,0.78) 60%, rgba(8,9,14,0.92) 100%);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.4px;
color: rgba(220,220,220,0.55);
text-align: center;
pointer-events: none; /* purely informational, no interaction */
user-select: none;
}
.site-footer-copy { color: rgba(220,220,220,0.7); }
.site-footer-sep { color: rgba(201,151,59,0.5); }
.site-footer-credit-wrap {
color: rgba(220,220,220,0.55);
}
.site-footer-credit {
/* Interactive link — re-enable pointer events on just this element
(parent .site-footer has pointer-events: none to avoid trapping clicks
over the globe) */
pointer-events: auto;
color: var(--gold);
font-weight: 500;
letter-spacing: 0.6px;
text-decoration: none;
border-bottom: 1px solid rgba(201,151,59,0);
transition: color 160ms ease, border-bottom-color 160ms ease, text-shadow 160ms ease;
}
.site-footer-credit:hover,
.site-footer-credit:focus-visible {
color: #f0d28a;
border-bottom-color: rgba(240,210,138,0.7);
text-shadow: 0 0 12px rgba(201,151,59,0.4);
outline: none;
}
.site-footer-credit:focus-visible {
outline: 2px solid rgba(201,151,59,0.6);
outline-offset: 3px;
border-radius: 2px;
}
/* Hide the footer in the authed app — the destination panel needs
that bottom region for photos, and the credit feels noisy when you're
actively using the product */
body[data-auth="in"] .site-footer { display: none; }
/* In embed mode the iframe host sets its own footer; ours would compete */
body[data-mode="embed"] .site-footer { display: none; }
@media (max-width: 720px) {
.site-footer {
padding: 8px 14px;
font-size: 10px;
flex-wrap: wrap;
gap: 6px;
}
.site-footer-sep { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
UX IMPROVEMENTS — April 2026 polish pass
════════════════════════════════════════════════════════════════════════ */
/* UX1: Hide the empty header bar on the landing page.
In landing mode everything in the header is hidden (auth menu, stats,
hint, toggle, tour), so the 52px bar is pure dead space. Removing it
lets the hero card + globe claim the full viewport. */
body[data-mode="landing"] .site-header { display: none !important; }
body[data-mode="landing"] .globe-stage { top: 0 !important; }
body[data-mode="landing"] .map-stage { top: 0 !important; }
/* UX2: Primary CTA dominance.
"Create free account" is the single most important button on the page.
Make it full-width, taller, and separated from the ghost "Sign in". */
.landing-actions {
flex-direction: column;
gap: 10px;
}
.landing-btn-primary {
width: 100%;
padding: 16px 24px;
font-size: 15px;
text-align: center;
}
.landing-btn-ghost {
width: 100%;
padding: 12px 24px;
text-align: center;
font-size: 13.5px;
}
/* UX3: Tour ticker — shows "Touring N destinations" during landing auto-tour */
.landing-tour-ticker {
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px;
padding: 10px 16px;
background: rgba(201,151,59,0.06);
border: 1px solid rgba(201,151,59,0.2);
border-radius: 10px;
font-size: 12px;
color: rgba(220,220,220,0.65);
letter-spacing: 0.3px;
animation: tickerFade 1s ease 3s backwards;
}
@keyframes tickerFade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.landing-tour-ticker .ticker-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
animation: tickerPulse 2.2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes tickerPulse {
0%, 100% { opacity: 0.5; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
.landing-tour-ticker .ticker-text {
color: rgba(220,220,220,0.75);
}
.landing-tour-ticker .ticker-count {
color: var(--gold);
font-weight: 600;
}
/* UX4: Soften the hero card border — reduce gold opacity so the CTAs
breathe and the card feels more "floating in space" than "boxed in". */
.landing-hero {
border-color: rgba(201,151,59,0.18);
box-shadow: 0 28px 60px rgba(0,0,0,0.5), 0 0 40px rgba(201,151,59,0.04);
}
/* UX5: Already sentence-case in HTML ("Start your journey"), but the CSS
was uppercasing it. Remove the text-transform. */
.panel-step-badge {
text-transform: none;
}
/* UX6: Hide the "Or click any gold pin on the globe" hint when in map mode,
because map mode has photo-marker teardrops, not gold pins. */
[data-mode="map"] .panel-hint { display: none; }
/* ════════════════════════════════════════════════════════════════════════
4-TIER PRICING GRID — updated membership view
════════════════════════════════════════════════════════════════════════ */
.plan-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 24px;
}
/* "Most popular" tier gets a glow + slight scale lift */
.plan-card.is-popular {
border-color: rgba(201,151,59,0.65);
box-shadow: 0 0 0 2px rgba(201,151,59,0.2), 0 12px 36px rgba(201,151,59,0.18);
transform: scale(1.02);
z-index: 1;
}
.ribbon-free {
background: linear-gradient(135deg, #5bc49f, #3da87e) !important;
border-color: rgba(91,196,159,0.6) !important;
color: #0a1a14 !important;
font-weight: 700 !important;
box-shadow: 0 2px 10px rgba(91,196,159,0.3);
}
.ribbon-popular {
background: linear-gradient(135deg, #d6a544, #b3812f) !important;
color: #181410 !important;
font-weight: 700 !important;
}
.ribbon-current {
background: rgba(91,196,159,0.18) !important;
border-color: rgba(91,196,159,0.5) !important;
color: #7cd9b3 !important;
}
/* Popular CTA button gets extra emphasis */
.popular-btn {
box-shadow: 0 6px 20px rgba(201,151,59,0.35) !important;
font-size: 14px !important;
}
/* Feature list per-tier styling */
.plan-features .feature-yes {
color: #e0e0e0;
}
.plan-features .feature-no {
color: rgba(255,255,255,0.25);
text-decoration: line-through;
text-decoration-color: rgba(255,255,255,0.12);
}
/* Yearly savings highlight */
.plan-price-year {
font-size: 11.5px;
color: #7cd9b3;
margin-top: 4px;
}
@media (max-width: 1100px) {
.plan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.plan-grid { grid-template-columns: 1fr; }
.plan-card.is-popular { transform: none; }
}
/* ════════════════════════════════════════════════════════════════════════
GALLERY CRUD — Edit form, delete buttons, photo management
════════════════════════════════════════════════════════════════════════ */
/* Edit + Delete buttons in destination header */
.dest-edit-btn, .dest-delete-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
color: #e0e0e0;
font-size: 12px;
padding: 7px 12px;
border-radius: 999px;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.dest-edit-btn:hover {
background: rgba(201,151,59,0.16);
border-color: rgba(201,151,59,0.4);
color: var(--gold);
}
.dest-delete-btn:hover {
background: rgba(255,80,80,0.12);
border-color: rgba(255,80,80,0.4);
color: #ff6666;
}
.dest-delete-btn.is-confirming {
background: rgba(255,60,60,0.18);
border-color: rgba(255,60,60,0.6);
color: #ff4444;
animation: confirmPulse 600ms ease;
}
@keyframes confirmPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
/* Hide edit/delete in public/embed/landing modes */
body[data-mode="public"] .dest-edit-btn,
body[data-mode="public"] .dest-delete-btn,
body[data-mode="embed"] .dest-edit-btn,
body[data-mode="embed"] .dest-delete-btn,
body[data-mode="landing"] .dest-edit-btn,
body[data-mode="landing"] .dest-delete-btn {
display: none !important;
}
/* Inline edit form */
.dest-edit-form {
padding: 14px 20px;
background: rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dest-edit-form[hidden] { display: none; }
.dest-edit-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.dest-edit-form .form-field { display: flex; flex-direction: column; gap: 4px; }
.dest-edit-form .form-label { font-size: 11px; text-transform: uppercase; color: #999; letter-spacing: 0.5px; }
.dest-edit-form input {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
padding: 10px 12px;
font-size: 13.5px;
color: #f0f0f0;
outline: none;
}
.dest-edit-form input:focus { border-color: rgba(201,151,59,0.55); }
.dest-edit-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.dest-edit-actions .view-btn { padding: 9px 18px; font-size: 12.5px; }
/* Per-photo delete button (✕ in corner of each thumbnail) */
.photo-card {
position: relative;
}
.photo-delete-btn {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.65);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 50%;
color: #ccc;
font-size: 11px;
cursor: pointer;
opacity: 0;
transition: opacity 160ms ease, background 140ms ease, color 140ms ease, transform 120ms ease;
z-index: 2;
}
.photo-card:hover .photo-delete-btn {
opacity: 1;
}
.photo-delete-btn:hover {
background: rgba(255,60,60,0.7);
border-color: rgba(255,60,60,0.8);
color: #fff;
transform: scale(1.1);
}
.photo-delete-btn.is-confirming {
opacity: 1;
background: rgba(255,60,60,0.8);
color: #fff;
font-weight: 700;
animation: confirmPulse 500ms ease;
}
@media (max-width: 720px) {
.dest-edit-form .form-row { grid-template-columns: 1fr; }
}
/* "Set as cover" star button — shows on hover, top-LEFT (mirroring the
delete ✕ on the top-right). Owner-only. Hidden on the cover thumb
itself; replaced there by .photo-cover-tag. */
.photo-cover-btn {
position: absolute;
top: 6px;
left: 6px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.65);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 50%;
color: #ccc;
cursor: pointer;
opacity: 0;
transition: opacity 160ms ease, background 140ms ease, color 140ms ease, transform 120ms ease;
z-index: 2;
}
.photo-card:hover .photo-cover-btn { opacity: 1; }
.photo-cover-btn:hover {
background: rgba(201,151,59,0.85);
border-color: rgba(201,151,59,0.95);
color: #fff;
transform: scale(1.1);
}
.photo-cover-tag {
position: absolute;
top: 6px;
left: 6px;
padding: 2px 8px;
background: rgba(201,151,59,0.85);
border-radius: 999px;
color: #fff;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3px;
pointer-events: none;
z-index: 2;
}
/* "Add photos" header button on the destination panel */
.dest-addphotos-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
color: #ddd;
font-size: 12.5px;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.dest-addphotos-btn:hover {
background: rgba(201,151,59,0.18);
color: #fff;
border-color: rgba(201,151,59,0.4);
}
.dest-addphotos-btn.is-busy {
opacity: 0.6;
cursor: progress;
}
/* ════════════════════════════════════════════════════════════════════════
DESIGN POLISH — April 2026
Comprehensive visual upgrade using the token system above.
Applied as overrides to avoid disrupting existing cascade.
════════════════════════════════════════════════════════════════════════ */
/* ── HEADER ──────────────────────────────────────────────────────────── */
.site-header {
background: linear-gradient(180deg, rgba(11,13,18,0.95) 0%, rgba(11,13,18,0.85) 100%);
border-bottom: 1px solid var(--border-subtle);
backdrop-filter: blur(12px) saturate(1.3);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
}
/* Toggle buttons — more refined shape + hover */
.toggle-btn {
border-radius: var(--r-md);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0.3px;
transition: all 180ms var(--ease);
}
.toggle-btn.is-active {
box-shadow: 0 0 0 1px rgba(201,151,59,0.4) inset, var(--shadow-gold);
}
/* ── LOADING SCREEN ──────────────────────────────────────────────────── */
.loading-screen {
background: radial-gradient(ellipse at 40% 40%, rgba(18,18,24,0.98), var(--bg) 70%);
}
.loading-bar-track {
border-radius: var(--r-pill);
overflow: hidden;
}
.loading-bar {
border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--gold), var(--gold-warm));
}
/* ── LOGIN OVERLAY — premium feel ────────────────────────────────────── */
.login-card {
border-radius: var(--r-xl);
box-shadow: var(--shadow-xl), 0 0 100px rgba(201,151,59,0.06);
}
.login-field input {
border-radius: var(--r-md);
font-size: var(--fs-base);
transition: border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.login-field input:focus {
box-shadow: 0 0 0 3px rgba(201,151,59,0.12);
}
.login-btn {
border-radius: var(--r-md);
font-size: var(--fs-base);
letter-spacing: 0.5px;
transition: transform 140ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}
/* ── DESTINATION PANEL — tighter, more editorial ─────────────────────── */
.destination-panel {
background: linear-gradient(180deg, rgba(14,15,20,0.96) 0%, rgba(10,11,16,0.98) 100%);
border-top: 1px solid rgba(201,151,59,0.15);
box-shadow: 0 -12px 48px rgba(0,0,0,0.5);
}
.dest-header {
padding: var(--sp-4) var(--sp-5);
gap: var(--sp-3);
}
.dest-city {
font-family: 'Georgia', serif;
font-weight: 400;
letter-spacing: -0.3px;
}
.dest-country {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--gold);
font-weight: 500;
}
.dest-meta {
padding: var(--sp-2) var(--sp-5);
border-bottom: 1px solid var(--border-subtle);
font-size: var(--fs-sm);
}
.dest-by {
color: var(--text-dim);
font-weight: 300;
}
.dest-photographer {
color: var(--text);
font-weight: 600;
}
/* Action buttons — unified capsule style */
.dest-from-btn, .dest-star-btn, .dest-share-btn, .dest-edit-btn, .dest-delete-btn {
border-radius: var(--r-md);
font-size: var(--fs-xs);
font-weight: 500;
padding: var(--sp-2) var(--sp-3);
transition: all 160ms var(--ease);
}
/* ── PHOTO GRID — editorial spacing ──────────────────────────────────── */
.dest-photo-grid {
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4) var(--sp-10);
}
.photo-card {
border-radius: var(--r-sm);
overflow: hidden;
transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.photo-card:hover {
transform: scale(1.02);
box-shadow: var(--shadow-md);
z-index: 1;
}
.photo-card img {
transition: filter 300ms var(--ease);
}
.photo-card:hover img {
filter: brightness(1.08) contrast(1.02);
}
/* ── LIGHTBOX — cinematic ────────────────────────────────────────────── */
.lightbox-backdrop {
background: rgba(0,0,0,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lightbox-img {
border-radius: var(--r-sm);
box-shadow: var(--shadow-xl);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
border-radius: var(--r-pill);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 180ms var(--ease);
}
/* No transform on hover — moving buttons are hard to click.
Use color + glow instead so the button responds without shifting. */
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
background: rgba(201,151,59,0.25);
color: var(--gold-warm);
box-shadow: 0 0 16px rgba(201,151,59,0.3);
}
/* ── FLIGHT OVERLAY — more premium pill ──────────────────────────────── */
.flight-overlay {
background: linear-gradient(135deg, rgba(18,18,24,0.92), rgba(14,14,20,0.92));
border: 1px solid rgba(201,151,59,0.35);
border-radius: var(--r-pill);
padding: var(--sp-3) var(--sp-6);
backdrop-filter: blur(16px) saturate(1.5);
-webkit-backdrop-filter: blur(16px) saturate(1.5);
box-shadow: var(--shadow-lg), 0 0 40px rgba(201,151,59,0.12);
gap: var(--sp-3);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0.4px;
}
.flight-plane {
font-size: var(--fs-lg);
filter: drop-shadow(0 0 8px rgba(201,151,59,0.4));
}
.flight-label-from, .flight-label-to {
font-weight: 600;
}
.flight-arrow {
opacity: 0.5;
font-size: var(--fs-sm);
}
/* ── CONTROL PANEL (destination picker) ──────────────────────────────── */
.control-panel {
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg), 0 0 60px rgba(201,151,59,0.04);
}
.panel-step-badge {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--gold);
background: rgba(201,151,59,0.1);
border: 1px solid rgba(201,151,59,0.3);
border-radius: var(--r-pill);
padding: var(--sp-1) var(--sp-3);
display: inline-block;
margin-bottom: var(--sp-3);
}
.panel-title {
font-family: 'Georgia', serif;
font-size: var(--fs-lg);
font-weight: 400;
color: var(--text);
letter-spacing: -0.3px;
margin-bottom: var(--sp-4);
}
.panel-title em {
color: var(--gold);
font-style: normal;
}
.location-input {
border-radius: var(--r-md);
font-size: var(--fs-base);
padding: var(--sp-3) var(--sp-4);
transition: border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.location-input:focus {
box-shadow: 0 0 0 3px rgba(201,151,59,0.1);
}
/* ── SUGGESTION LIST — refined dropdown ──────────────────────────────── */
.suggestions-list.is-open {
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
border: 1px solid rgba(201,151,59,0.15);
}
.suggestion-item {
padding: var(--sp-3) var(--sp-4);
transition: background 120ms var(--ease);
border-bottom: 1px solid var(--border-subtle);
}
.suggestion-item:last-child { border-bottom: 0; }
.suggestion-item:hover, .suggestion-item[aria-selected="true"] {
background: rgba(201,151,59,0.1);
}
.suggestion-name {
font-size: var(--fs-base);
font-weight: 500;
}
.suggestion-sub {
font-size: var(--fs-xs);
color: var(--text-dim);
margin-top: 2px;
}
/* ── MAP POPUP — refined ─────────────────────────────────────────────── */
.map-popup-name {
font-family: 'Georgia', serif;
font-weight: 400;
font-size: var(--fs-base);
color: var(--text);
}
.map-popup-btn {
border-radius: var(--r-md);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: 0.3px;
padding: var(--sp-2) var(--sp-4);
background: linear-gradient(180deg, var(--gold), #b3812f);
color: #181410;
border: 0;
cursor: pointer;
transition: transform 120ms var(--ease), box-shadow 160ms var(--ease);
}
.map-popup-btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-gold);
}
/* ── SITE VIEWS — cleaner card chrome ────────────────────────────────── */
.site-view .view-inner {
border-radius: var(--r-xl);
border: 1px solid var(--border-gold);
box-shadow: var(--shadow-xl);
}
.view-title {
font-family: 'Georgia', serif;
font-weight: 400;
letter-spacing: -0.3px;
}
.view-back {
border-radius: var(--r-md);
font-size: var(--fs-sm);
transition: all 160ms var(--ease);
}
.view-back:hover {
background: rgba(201,151,59,0.1);
color: var(--gold);
}
.view-btn {
border-radius: var(--r-md);
font-weight: 600;
letter-spacing: 0.3px;
transition: all 180ms var(--ease);
}
.view-btn.primary {
background: linear-gradient(180deg, #d6a544, #b3812f);
box-shadow: var(--shadow-gold);
}
.view-btn.primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 28px rgba(201,151,59,0.35);
}
.view-btn.ghost {
border-radius: var(--r-md);
}
.view-btn.ghost:hover:not(:disabled) {
border-color: rgba(201,151,59,0.3);
background: rgba(201,151,59,0.08);
}
/* Form fields in site views */
.view-form input[type="text"],
.view-form input[type="email"],
.view-form input[type="tel"],
.view-form input[type="password"],
.view-form input[type="date"],
.view-form input[type="search"] {
border-radius: var(--r-md);
padding: var(--sp-3) var(--sp-4);
font-size: var(--fs-base);
transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.view-form input:focus {
border-color: rgba(201,151,59,0.5);
box-shadow: 0 0 0 3px rgba(201,151,59,0.1);
}
.form-label {
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-muted);
}
.form-hint {
font-size: var(--fs-xs);
color: var(--text-dim);
}
.form-optional {
font-weight: 400;
color: var(--text-dim);
font-size: 0.85em;
}
.form-section {
font-size: var(--fs-md);
font-weight: 600;
color: var(--text);
margin-top: var(--sp-6);
margin-bottom: var(--sp-3);
padding-top: var(--sp-4);
border-top: 1px solid var(--border-subtle);
}
.form-error {
font-size: var(--fs-sm);
color: var(--danger);
}
.form-success {
font-size: var(--fs-sm);
color: var(--success);
}
/* ── PLAN CARDS — premium pricing grid ───────────────────────────────── */
.plan-card {
border-radius: var(--r-xl);
padding: var(--sp-6) var(--sp-5);
background: linear-gradient(180deg, rgba(22,22,28,0.95), rgba(16,16,22,0.95));
border: 1px solid rgba(255,255,255,0.08);
transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.plan-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: rgba(255,255,255,0.14);
}
.plan-ribbon {
display: inline-block;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: var(--sp-1) var(--sp-3);
border-radius: var(--r-pill);
border: 1px solid rgba(201,151,59,0.3);
background: rgba(201,151,59,0.1);
color: var(--gold);
margin-bottom: var(--sp-4);
}
.plan-title {
font-family: 'Georgia', serif;
font-size: var(--fs-xl);
font-weight: 400;
color: var(--text);
margin-bottom: var(--sp-4);
}
.plan-price {
margin-bottom: var(--sp-5);
}
.plan-price-currency {
font-size: var(--fs-base);
color: var(--text-muted);
vertical-align: super;
}
.plan-price-amount {
font-size: var(--fs-3xl);
font-weight: 700;
color: var(--text);
line-height: 1;
}
.plan-price-period {
font-size: var(--fs-base);
color: var(--text-muted);
}
.plan-features {
list-style: none;
margin: 0 0 var(--sp-6);
padding: 0;
}
.plan-features li {
font-size: var(--fs-sm);
line-height: 1.7;
padding: var(--sp-1) 0;
}
/* ── BILLING DASHBOARD — card polish ─────────────────────────────────── */
.billing-card {
border-radius: var(--r-lg);
padding: var(--sp-5);
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
margin-bottom: var(--sp-4);
}
.billing-label {
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--sp-2);
}
.billing-plan {
font-family: 'Georgia', serif;
font-size: var(--fs-xl);
font-weight: 400;
color: var(--text);
}
.storage-bar-track {
height: 8px;
border-radius: var(--r-pill);
background: rgba(255,255,255,0.06);
overflow: hidden;
}
.storage-bar {
height: 100%;
border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--teal), var(--gold));
transition: width 600ms var(--ease-out);
}
.storage-bar[data-level="warn"] {
background: linear-gradient(90deg, var(--gold), #e8a020);
}
.storage-bar[data-level="danger"] {
background: linear-gradient(90deg, #e8a020, var(--danger));
}
/* ── FROM-PICKER + SHARE MODAL — unified modal chrome ────────────────── */
.from-picker-card, .share-modal-card {
border-radius: var(--r-xl);
box-shadow: var(--shadow-xl);
}
/* ── STATS CHIP — micro-refinement ───────────────────────────────────── */
.stats-chip {
border-radius: var(--r-pill);
font-size: var(--fs-xs);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ── TOUR BUTTON — cleaner ───────────────────────────────────────────── */
.tour-btn {
border-radius: var(--r-md);
font-size: var(--fs-sm);
}
/* ── TIMELINE SCRUBBER — refined chrome ──────────────────────────────── */
.timeline-scrubber {
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg), 0 0 40px rgba(201,151,59,0.06);
}
/* ── LANDING HERO — editorial refinement ─────────────────────────────── */
.landing-hero {
border-radius: var(--r-xl);
padding: var(--sp-10) var(--sp-8) var(--sp-8);
}
.landing-title {
font-size: var(--fs-3xl);
line-height: 1.15;
letter-spacing: -0.8px;
margin-bottom: var(--sp-4);
}
.landing-sub {
font-size: var(--fs-base);
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: var(--sp-6);
}
.landing-eyebrow {
font-size: var(--fs-xs);
letter-spacing: 1.2px;
border-radius: var(--r-pill);
padding: var(--sp-2) var(--sp-4);
margin-bottom: var(--sp-5);
}
/* ── LOGIN LINK BUTTONS — styled to look clickable ───────────────────── */
.login-link-btn {
background: none;
border: none;
color: var(--gold);
font-size: inherit;
font-family: inherit;
cursor: pointer;
text-decoration: none;
border-bottom: 1px solid rgba(201,151,59,0);
transition: border-bottom-color 160ms var(--ease), color 160ms var(--ease);
padding: 0;
}
.login-link-btn:hover {
color: var(--gold-warm);
border-bottom-color: var(--gold-warm);
}
/* ── CREATE-GALLERY — dropzone refinement ────────────────────────────── */
.cg-dropzone {
border-radius: var(--r-lg);
border: 2px dashed rgba(201,151,59,0.2);
background: rgba(201,151,59,0.02);
padding: var(--sp-8) var(--sp-6);
transition: border-color 200ms var(--ease), background 200ms var(--ease);
text-align: center;
}
.cg-dropzone:hover, .cg-dropzone.is-dragging {
border-color: rgba(201,151,59,0.5);
background: rgba(201,151,59,0.06);
}
.cg-dropzone-icon {
margin-bottom: var(--sp-3);
opacity: 0.6;
color: var(--gold);
}
.cg-dropzone-icon svg {
width: 48px; height: 48px;
stroke: var(--gold);
}
.cg-dropzone-text {
font-size: var(--fs-base);
color: var(--text-secondary);
}
.cg-dropzone-sub {
font-size: var(--fs-xs);
color: var(--text-dim);
margin-top: var(--sp-2);
}
.cg-map {
border-radius: var(--r-lg);
border: 1px solid var(--border);
overflow: hidden;
}
/* ── GLOBAL TRANSITIONS — smoother hover states everywhere ──────────── */
button, a, input, select, textarea {
transition-property: background, border-color, color, box-shadow, transform, opacity;
transition-duration: 160ms;
transition-timing-function: var(--ease);
}
/* ── SCROLLBAR — dark themed ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(201,151,59,0.2);
border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(201,151,59,0.4); }
/* ── SELECTION COLOR — brand-aligned ─────────────────────────────────── */
::selection {
background: rgba(201,151,59,0.3);
color: var(--text);
}
/* ════════════════════════════════════════════════════════════════════════
PHOTO THUMBNAIL FADE-IN
Images start transparent and fade in once loaded. This makes the load
feel intentional ("revealing") instead of broken ("popping in").
════════════════════════════════════════════════════════════════════════ */
.photo-card-btn img {
opacity: 0;
transition: opacity 350ms var(--ease);
}
.photo-card-btn img.is-loaded {
opacity: 1;
}
/* Timeline button — now has a text label so users can find it */
.timeline-btn-label {
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0.3px;
}
.timeline-toggle-btn {
gap: 5px;
padding: 7px 14px 7px 10px;
border-radius: var(--r-md);
}
@media (max-width: 1000px) {
.timeline-btn-label { display: none; }
}
/* Day/night texture toggle button */
.daynight-btn {
margin-left: 6px;
width: 36px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-md);
color: #e0e0e0;
font-size: 16px;
cursor: pointer;
transition: all 180ms var(--ease);
}
.daynight-btn:hover {
background: rgba(201,151,59,0.14);
border-color: rgba(201,151,59,0.4);
transform: translateY(-1px);
}
/* Hide in modes where the globe isn't the primary view */
body[data-mode="public"] .daynight-btn,
body[data-mode="embed"] .daynight-btn,
body[data-mode="landing"] .daynight-btn {
display: none;
}
@media (max-width: 820px) {
.daynight-btn { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
HEADER SVG ICONS — crisp inline SVGs replacing emoji icons
════════════════════════════════════════════════════════════════════════ */
.hdr-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
vertical-align: -2px;
}
.toggle-btn .hdr-icon,
.tour-btn .hdr-icon,
.timeline-toggle-btn .hdr-icon {
margin-right: 4px;
}
/* ════════════════════════════════════════════════════════════════════════
PREMIUM FEEL PASS — eliminate every "basic" element
════════════════════════════════════════════════════════════════════════ */
/* ── DESTINATION PICKER PANEL — luxury glass card ────────────────────── */
.control-panel {
background: linear-gradient(165deg, rgba(18,18,26,0.82) 0%, rgba(12,13,20,0.88) 100%);
backdrop-filter: blur(28px) saturate(1.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
border: 1px solid rgba(201,151,59,0.22);
box-shadow:
0 24px 48px rgba(0,0,0,0.45),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 1px 0 0 rgba(255,255,255,0.06) inset;
}
/* ── BADGE — bolder, with shimmer highlight ──────────────────────────── */
.panel-step-badge {
background: linear-gradient(135deg, rgba(201,151,59,0.18), rgba(201,151,59,0.08));
border: 1px solid rgba(201,151,59,0.45);
box-shadow: 0 1px 4px rgba(201,151,59,0.15);
padding: var(--sp-1) var(--sp-4);
}
/* ── SEARCH INPUT — premium depth ────────────────────────────────────── */
.location-input {
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 2px 6px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.03);
}
.location-input::placeholder {
color: rgba(255,255,255,0.28);
font-weight: 300;
}
.location-input:focus {
background: rgba(0,0,0,0.3);
border-color: rgba(201,151,59,0.5);
box-shadow: 0 2px 6px rgba(0,0,0,0.2) inset, 0 0 0 3px rgba(201,151,59,0.08);
}
/* ── HINT TEXT — elegant whisper or hide ──────────────────────────────── */
.panel-hint {
font-size: var(--fs-xs);
color: rgba(255,255,255,0.22);
font-style: italic;
letter-spacing: 0.3px;
}
/* ── HEADER — more depth and polish ──────────────────────────────────── */
.site-header {
background: linear-gradient(180deg, rgba(8,9,14,0.96) 0%, rgba(11,13,18,0.92) 100%);
border-bottom: 1px solid rgba(201,151,59,0.08);
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
/* ── HEADER HINT — match the stats-chip sub-label colour ──────────────── */
/* Aligned with `.stats-chip .stats-sub` (#999) — the same colour used for
"of 195 countries" / "of 7 continents" in the header chip, so all the
secondary header text reads at one consistent weight. Was rgba(…,0.3)
which failed AA and looked like a forgotten placeholder. */
.header-hint {
font-size: var(--fs-xs);
color: #999;
font-weight: 400;
letter-spacing: 0.5px;
}
/* ── STATS CHIP — premium badge with more substance ──────────────────── */
.stats-chip {
background: linear-gradient(135deg, rgba(18,18,26,0.85), rgba(12,13,20,0.85));
border: 1px solid rgba(201,151,59,0.35);
box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03) inset;
padding: 8px 16px;
}
/* ── TOGGLE BUTTONS — more refined pill shape ────────────────────────── */
.view-toggle {
background: rgba(0,0,0,0.25);
border-radius: var(--r-md);
padding: 3px;
border: 1px solid rgba(255,255,255,0.06);
}
.toggle-btn {
padding: 6px 16px;
border: none;
background: transparent;
color: rgba(255,255,255,0.5);
font-weight: 500;
}
.toggle-btn.is-active {
background: linear-gradient(180deg, rgba(201,151,59,0.9), rgba(179,129,47,0.9));
color: #121014;
border-radius: 7px;
box-shadow: 0 2px 8px rgba(201,151,59,0.35);
}
.toggle-btn:not(.is-active):hover {
color: rgba(255,255,255,0.75);
background: rgba(255,255,255,0.05);
border-radius: 7px;
}
/* ── TOUR + TIMELINE BUTTONS — consistent premium capsules ──────────── */
.tour-btn, .timeline-toggle-btn {
background: rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.tour-btn:hover, .timeline-toggle-btn:hover {
background: rgba(201,151,59,0.12);
border-color: rgba(201,151,59,0.4);
box-shadow: 0 2px 8px rgba(201,151,59,0.15);
}
.tour-btn[data-state="playing"] {
background: linear-gradient(135deg, rgba(91,196,159,0.15), rgba(91,196,159,0.08));
border-color: rgba(91,196,159,0.5);
color: #7cd9b3;
}
/* ── AUTH MENU TRIGGER — premium dropdown handle ─────────────────────── */
#auth-menu-trigger, .auth-menu-trigger {
background: rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
#auth-menu-trigger:hover {
border-color: rgba(201,151,59,0.35);
background: rgba(201,151,59,0.08);
}
/* ── FLIGHT OVERLAY PILL — premium glass ─────────────────────────────── */
.flight-overlay {
background: linear-gradient(135deg, rgba(14,15,22,0.94) 0%, rgba(10,11,18,0.94) 100%);
border: 1px solid rgba(201,151,59,0.4);
box-shadow:
0 12px 40px rgba(0,0,0,0.55),
0 0 60px rgba(201,151,59,0.08),
0 1px 0 rgba(255,255,255,0.06) inset;
}
/* ── DESTINATION PANEL — elevated premium surface ────────────────────── */
.destination-panel {
background: linear-gradient(180deg, rgba(12,13,20,0.97) 0%, rgba(8,9,14,0.98) 100%);
border-top: 1px solid rgba(201,151,59,0.2);
box-shadow:
0 -16px 48px rgba(0,0,0,0.5),
0 -1px 0 rgba(255,255,255,0.04) inset;
}
/* ── DEST HEADER ACTION BUTTONS — consistent capsule style ───────────── */
.dest-from-btn, .dest-star-btn, .dest-share-btn, .dest-edit-btn, .dest-delete-btn {
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.dest-from-btn:hover, .dest-star-btn:hover, .dest-share-btn:hover, .dest-edit-btn:hover {
background: rgba(201,151,59,0.12);
border-color: rgba(201,151,59,0.4);
box-shadow: 0 2px 8px rgba(201,151,59,0.12);
}
/* ── PHOTO GRID — premium card feel ──────────────────────────────────── */
.photo-card {
background: rgba(20,20,28,0.6);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.04);
}
.photo-card:hover {
border-color: rgba(201,151,59,0.25);
box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,151,59,0.15);
}
/* ── SUGGESTION DROPDOWN — luxury dropdown ───────────────────────────── */
.suggestions-list.is-open {
background: linear-gradient(180deg, rgba(18,18,26,0.96), rgba(12,13,20,0.96));
border: 1px solid rgba(201,151,59,0.2);
box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* ── LOGIN CARD — premium depth ──────────────────────────────────────── */
.login-card {
background: linear-gradient(170deg, rgba(22,22,30,0.94) 0%, rgba(14,14,22,0.94) 100%);
border: 1px solid rgba(201,151,59,0.25);
box-shadow:
0 32px 80px rgba(0,0,0,0.6),
0 0 120px rgba(201,151,59,0.06),
0 1px 0 rgba(255,255,255,0.06) inset;
}
/* ── MODALS — consistent premium glass ───────────────────────────────── */
.from-picker-card, .share-modal-card {
background: linear-gradient(170deg, rgba(22,22,30,0.96) 0%, rgba(14,14,22,0.96) 100%);
border: 1px solid rgba(201,151,59,0.3);
box-shadow:
0 32px 64px rgba(0,0,0,0.6),
0 1px 0 rgba(255,255,255,0.06) inset;
}
/* ── LIGHTBOX — truly cinematic ──────────────────────────────────────── */
.lightbox-backdrop {
background: rgba(0,0,0,0.94);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
background: rgba(20,20,28,0.6);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
/* ── SITE VIEW CARDS — premium wrapper ───────────────────────────────── */
.site-view .view-inner {
background: linear-gradient(170deg, rgba(18,18,26,0.96) 0%, rgba(12,13,20,0.96) 100%);
border: 1px solid rgba(201,151,59,0.2);
box-shadow:
0 24px 64px rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.04) inset;
}
/* ── VIEW FORM INPUTS — premium depth ────────────────────────────────── */
.view-form input[type="text"],
.view-form input[type="email"],
.view-form input[type="tel"],
.view-form input[type="password"],
.view-form input[type="date"],
.view-form input[type="search"] {
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 2px 4px rgba(0,0,0,0.15) inset;
}
.view-form input:focus {
background: rgba(0,0,0,0.3);
border-color: rgba(201,151,59,0.45);
box-shadow: 0 2px 4px rgba(0,0,0,0.15) inset, 0 0 0 3px rgba(201,151,59,0.08);
}
/* ── PLAN CARDS — premium elevation ──────────────────────────────────── */
.plan-card {
background: linear-gradient(170deg, rgba(20,20,28,0.96) 0%, rgba(14,14,22,0.96) 100%);
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.plan-card:hover {
border-color: rgba(201,151,59,0.2);
box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,151,59,0.1);
}
.plan-card.is-popular {
border-color: rgba(201,151,59,0.5);
box-shadow:
0 12px 40px rgba(0,0,0,0.4),
0 0 40px rgba(201,151,59,0.1),
0 0 0 1px rgba(201,151,59,0.3) inset;
}
/* ── BILLING CARDS — premium surface ─────────────────────────────────── */
.billing-card {
background: linear-gradient(170deg, rgba(20,20,28,0.8) 0%, rgba(14,14,22,0.8) 100%);
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* ── TIMELINE SCRUBBER — premium floating panel ──────────────────────── */
.timeline-scrubber {
background: linear-gradient(180deg, rgba(18,18,26,0.94) 0%, rgba(12,13,20,0.94) 100%);
border: 1px solid rgba(201,151,59,0.3);
box-shadow:
0 20px 48px rgba(0,0,0,0.5),
0 0 40px rgba(201,151,59,0.06),
0 1px 0 rgba(255,255,255,0.04) inset;
}
/* ── LANDING HERO — luxe glass ───────────────────────────────────────── */
.landing-hero {
background: linear-gradient(165deg, rgba(18,18,26,0.78) 0%, rgba(10,11,16,0.88) 100%);
border: 1px solid rgba(201,151,59,0.22);
box-shadow:
0 32px 72px rgba(0,0,0,0.5),
0 0 80px rgba(201,151,59,0.05),
0 1px 0 rgba(255,255,255,0.06) inset;
backdrop-filter: blur(32px) saturate(1.7);
-webkit-backdrop-filter: blur(32px) saturate(1.7);
}
/* ── GLOBAL — premium inset highlight on every glass surface ─────────── */
/* The single-pixel white inset line at the top edge is what separates
"flat dark" from "glass panel catching light from above." It's the
subtle detail that makes Apple, Linear, and Vercel designs feel premium. */
/* ════════════════════════════════════════════════════════════════════════
MAP FLIGHT — animated transport icon
The icon (✈/🚗/🚆/⛵) moves along the great-circle curve from
departure to destination at 60fps via requestAnimationFrame.
════════════════════════════════════════════════════════════════════════ */
/* ── Map flight: directional arrow + mode badge ──────────────────────── */
.flight-map-icon-wrap {
background: transparent !important;
border: none !important;
}
.flight-map-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* SVG arrow — points in direction of travel via JS rotate() */
.flight-arrow-svg {
width: 28px;
height: 28px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)) drop-shadow(0 0 10px currentColor);
transition: transform 120ms ease-out;
}
/* Small transport mode emoji badge in the corner */
.flight-map-mode-label {
position: absolute;
bottom: -2px;
right: -2px;
font-size: 11px;
background: rgba(0,0,0,0.75);
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
}
/* ════════════════════════════════════════════════════════════════════════
GLOBE FLIGHT ARROW — animated directional marker on the 3D globe
Rendered via Globe.gl's htmlElementsData layer so it projects correctly
onto the 3D surface and follows the arc path at 60fps.
════════════════════════════════════════════════════════════════════════ */
/* Globe arrow — pulsing transport icon that rides the arc.
No rotation (HTML overlays on Globe.gl are billboarded — they always
face the camera, so compass rotation doesn't make visual sense). */
.globe-flight-arrow {
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.globe-arrow-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
font-size: 22px;
background: radial-gradient(circle, var(--flight-color, #c9973b) 0%, rgba(0,0,0,0.6) 70%);
border: 2px solid var(--flight-color, #c9973b);
border-radius: 50%;
/* Rotation is now applied to the OUTER `.globe-flight-arrow` element by
globe.js every frame (translate + rotate in one transform). This inner
span just contains the SVG and doesn't need its own transform. */
box-shadow:
0 0 16px var(--flight-color, #c9973b),
0 0 32px var(--flight-color, rgba(201,151,59,0.4)),
0 4px 12px rgba(0,0,0,0.6);
animation: globeArrowPulse 1.4s ease-in-out infinite;
}
@keyframes globeArrowPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 16px var(--flight-color, #c9973b), 0 0 32px rgba(201,151,59,0.3), 0 4px 12px rgba(0,0,0,0.6); }
50% { transform: scale(1.12); box-shadow: 0 0 24px var(--flight-color, #c9973b), 0 0 48px rgba(201,151,59,0.5), 0 4px 12px rgba(0,0,0,0.6); }
}
/* Password eye toggle */
.password-wrap {
position: relative;
}
.password-wrap input {
padding-right: 44px;
}
.password-eye {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: rgba(255,255,255,0.35);
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: color 160ms ease;
}
.password-eye:hover { color: var(--gold); }
.eye-icon { width: 20px; height: 20px; }
/* SVG icons inside mode chips + flight overlay */
.mode-svg {
width: 22px;
height: 22px;
}
.mode-chip-icon { line-height: 0; }
.flight-plane .mode-svg {
width: 18px;
height: 18px;
}
.from-icon .mode-svg {
width: 14px;
height: 14px;
}
/* Auth menu SVG icons (replacing emojis) */
svg.am-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: 0.7;
vertical-align: middle;
}
.auth-menu-item:hover svg.am-icon {
opacity: 1;
color: var(--gold);
}
/* Date input — fix low-contrast placeholder on dark backgrounds */
input[type="date"] {
color-scheme: dark;
color: var(--text);
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
color: var(--text-secondary);
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(0.7) sepia(0.3) hue-rotate(10deg);
cursor: pointer;
}
/* Globe arrow icon — SVG inside the gold pill */
.globe-arrow-icon .mode-svg {
width: 18px;
height: 18px;
stroke: #fff;
}
/* ════════════════════════════════════════════════════════════════════════
Atlas view (choropleth coverage map)
════════════════════════════════════════════════════════════════════════ */
.atlas-stage {
/* Water colour is applied inline by atlas.js via payload.colors.water.
Fallback here in case the payload fails. */
background: var(--bg);
overflow: hidden;
}
.atlas-map {
width: 100%;
height: calc(100vh - var(--hdr-h, 52px));
}
/* Leaflet attaches .leaflet-container to #atlas-map — override the default
off-white bg so water shows through when no tile layer is used. */
#atlas-map.leaflet-container {
background: transparent !important;
font-family: 'Helvetica Neue', Arial, sans-serif;
outline: none;
}
/* The Atlas view is all polygons — Leaflet's path:focus has an ugly blue
ring by default. Remove it; we surface interactivity via tooltip. */
#atlas-map path:focus { outline: none; }
/* ── Sub-toolbar floating over the map ─────────────────────────────────── */
.atlas-controls {
position: absolute;
top: calc(var(--hdr-h) + 14px);
left: 14px;
z-index: 520;
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.atlas-subgroup {
display: inline-flex;
background: rgba(15, 17, 22, 0.88);
border: 1px solid var(--border);
border-radius: 10px;
padding: 2px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.atlas-sub-btn {
appearance: none;
background: transparent;
color: var(--muted);
border: 0;
padding: 6px 12px;
border-radius: 8px;
font: 500 12px/1 'Helvetica Neue', Arial, sans-serif;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
display: inline-flex;
align-items: center;
gap: 4px;
}
.atlas-sub-btn:hover:not(.is-active) { color: var(--text); }
.atlas-sub-btn.is-active {
background: var(--px-gold, #c9973b);
color: #111;
}
.atlas-colors-btn {
/* Stand alone — not inside a subgroup */
background: rgba(15, 17, 22, 0.88);
border: 1px solid var(--border);
border-radius: 10px;
padding: 6px 12px;
}
/* ── Tooltip over a region ─────────────────────────────────────────────── */
.leaflet-tooltip.atlas-tip {
background: rgba(15, 17, 22, 0.96);
color: var(--text);
border: 1px solid var(--border-gold);
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0,0,0,0.55);
padding: 8px 10px;
font-size: 12px;
line-height: 1.35;
}
.leaflet-tooltip.atlas-tip::before { display: none; } /* hide the arrow */
/* ── Colour picker modal ───────────────────────────────────────────────── */
.atlas-picker[hidden] { display: none; }
.atlas-picker {
position: fixed;
inset: 0;
z-index: 9500;
display: grid;
place-items: center;
}
.atlas-picker-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.atlas-picker-card {
position: relative;
width: min(92vw, 380px);
background: var(--surface);
border: 1px solid var(--border-gold);
border-radius: 14px;
padding: 22px 22px 18px;
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
color: var(--text);
}
.atlas-picker-card h3 {
margin: 0 0 4px;
font-size: 18px;
font-weight: 600;
}
.atlas-picker-hint {
margin: 0 0 14px;
font-size: 12px;
color: var(--muted);
}
.atlas-picker-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-top: 1px solid var(--border);
font-size: 13px;
}
.atlas-picker-row:first-of-type { border-top: 0; }
.atlas-picker-row input[type="color"] {
appearance: none;
width: 44px;
height: 28px;
border: 1px solid var(--border);
border-radius: 6px;
background: transparent;
cursor: pointer;
padding: 0;
}
.atlas-picker-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.atlas-picker-row input[type="color"]::-webkit-color-swatch { border-radius: 4px; border: 0; }
.atlas-picker-reset {
margin-top: 14px;
width: 100%;
padding: 10px;
background: var(--px-gold, #c9973b);
color: #111;
border: 0;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
font-size: 13px;
}
.atlas-picker-reset:hover { filter: brightness(1.05); }
.atlas-picker-close {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
border-radius: 50%;
border: 0;
background: transparent;
color: var(--muted);
font-size: 16px;
cursor: pointer;
}
.atlas-picker-close:hover { color: var(--text); }
/* ── Atlas: visited regions are clickable ──────────────────────────────── */
/* cursor:pointer is applied per-path via inline style (see atlas.js) so it
only targets the regions Joyce has actually visited. This rule is a
safety net for environments where inline styles are stripped. */
.atlas-stage .leaflet-interactive:hover { filter: brightness(1.12); }
/* ── Atlas region panel ────────────────────────────────────────────────── */
.atlas-region-panel[hidden] { display: none; }
.atlas-region-panel {
position: fixed;
top: var(--hdr-h, 52px);
right: 0;
bottom: 0;
width: min(92vw, 380px);
background: var(--surface);
border-left: 1px solid var(--border-gold);
box-shadow: -12px 0 32px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
z-index: 540;
transform: translateX(100%);
transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text);
}
.atlas-region-panel.is-open { transform: translateX(0); }
.atlas-region-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 18px 18px 12px;
border-bottom: 1px solid var(--border);
}
.atlas-region-meta { min-width: 0; flex: 1; }
.atlas-region-title {
margin: 0 0 2px;
font-size: 18px;
font-weight: 600;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.atlas-region-count {
margin: 0;
font-size: 12px;
color: var(--muted);
}
.atlas-region-close {
appearance: none;
background: transparent;
border: 0;
color: var(--muted);
cursor: pointer;
padding: 6px;
border-radius: 8px;
line-height: 0;
flex-shrink: 0;
}
.atlas-region-close:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.atlas-region-list {
list-style: none;
margin: 0;
padding: 8px 8px 24px;
overflow-y: auto;
flex: 1;
}
.atlas-region-row { margin: 0; }
.atlas-region-btn {
appearance: none;
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
background: transparent;
border: 0;
border-radius: 10px;
cursor: pointer;
text-align: left;
color: inherit;
transition: background 120ms ease;
}
.atlas-region-btn:hover,
.atlas-region-btn:focus-visible {
background: rgba(201,151,59,0.08);
outline: none;
}
.atlas-region-thumb {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
background: var(--surface-2);
border: 1px solid var(--border);
}
.atlas-region-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atlas-region-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.atlas-region-name {
font-size: 14px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.atlas-region-sub {
font-size: 12px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 2px;
}
/* ── Atlas legend (roadmap #6 from Joyce's 2026-04-14 feedback) ──────── */
.atlas-legend {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 16px;
z-index: 520;
display: inline-flex;
gap: 16px;
align-items: center;
padding: 8px 14px;
background: rgba(15, 17, 22, 0.88);
border: 1px solid var(--border);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: 12px;
color: var(--text);
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
pointer-events: none; /* decorative — never intercept map clicks */
}
.atlas-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.atlas-legend-swatch {
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.15);
display: inline-block;
}
/* Photo swatch: a miniature rainbow gradient to suggest "a photo" without
committing to any specific one. */
.atlas-legend-photo {
background: linear-gradient(135deg, #6aa8ff 0%, #c9973b 50%, #e34d4d 100%);
}
/* Hide the photo swatch when the Map theme is active (photos aren't shown). */
body[data-atlas-theme="map"] .atlas-legend-photo,
body[data-atlas-theme="map"] .atlas-legend-item:has(.atlas-legend-photo) {
display: none;
}
/* On narrow mobile the legend pill would overflow — shrink gap + pad */
@media (max-width: 520px) {
.atlas-legend { gap: 10px; padding: 6px 10px; font-size: 11px; }
.atlas-legend-swatch { width: 12px; height: 12px; }
}
/* ────────────────────────────────────────────────────────────────────────
My Galleries grid view (roadmap: Joyce #12 from 2026-04-15)
──────────────────────────────────────────────────────────────────────── */
.galleries-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.galleries-meta {
margin: 4px 0 0;
color: var(--muted);
font-size: 13px;
}
.galleries-search {
min-width: 280px;
flex: 0 0 auto;
}
.galleries-search input[type="search"] {
width: 100%;
padding: 10px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text);
font-size: 13px;
font-family: inherit;
}
.galleries-search input[type="search"]:focus {
outline: none;
border-color: var(--border-gold);
box-shadow: 0 0 0 3px rgba(201,151,59,0.18);
}
.galleries-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
.galleries-empty {
padding: 40px 0;
text-align: center;
color: var(--muted);
font-size: 14px;
}
.gallery-card {
appearance: none;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
cursor: pointer;
text-align: left;
color: inherit;
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.gallery-card:hover,
.gallery-card:focus-visible {
transform: translateY(-2px);
border-color: var(--border-gold);
box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,151,59,0.15);
outline: none;
}
.gallery-card.is-featured {
border-color: rgba(201,151,59,0.45);
}
.gallery-card-thumb {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
background: var(--surface-2);
overflow: hidden;
}
.gallery-card-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.gallery-card-badge {
position: absolute;
top: 8px; left: 8px;
background: rgba(201,151,59,0.92);
color: #111;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3px;
padding: 3px 8px;
border-radius: 999px;
text-transform: uppercase;
}
.gallery-card-body {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.gallery-card-name {
font-size: 14px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gallery-card-sub,
.gallery-card-date {
font-size: 12px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gallery-card-date { margin-top: 2px; opacity: 0.75; }
@media (max-width: 520px) {
.galleries-grid { grid-template-columns: repeat(2, 1fr); }
.galleries-search { min-width: 0; width: 100%; }
}
/* ── My Galleries: always-visible scrollbar (Joyce 2026-04-15) ──────── */
/* macOS hides scrollbars by default ("show when scrolling"), so Joyce
couldn't see a drag handle for the gallery grid. Force a visible
scrollbar on the galleries view — on every OS and browser. */
#view-galleries {
/* Firefox: scrollbar-width + colour */
scrollbar-width: thin;
scrollbar-color: rgba(201,151,59,0.45) rgba(255,255,255,0.04);
}
#view-galleries::-webkit-scrollbar {
/* WebKit (Chrome, Safari, Edge, Brave) */
width: 12px;
}
#view-galleries::-webkit-scrollbar-track {
background: rgba(255,255,255,0.03);
}
#view-galleries::-webkit-scrollbar-thumb {
background: rgba(201,151,59,0.45);
border-radius: 999px;
border: 3px solid rgba(10,10,14,0.85); /* halo so it sits away from track edges */
}
#view-galleries::-webkit-scrollbar-thumb:hover {
background: rgba(201,151,59,0.75);
}
/* ════════════════════════════════════════════════════════════════════
NATIVE-APP COMPLIANCE — html[data-native] is set inline in
when the WebView is wrapped by the iOS/Android Capacitor shell.
Apple's App Review (4.7 / 3.1.1) forbids in-app links that route to
external payment for content/subscription purchases that compete with
IAP. We hide every trigger that opens the Membership upgrade flow,
leaving only the read-only "current plan" view (which the membership
view itself renders via the native branch in views/membership.js).
════════════════════════════════════════════════════════════════════ */
html[data-native] button[data-view="membership"],
html[data-native] a[data-view="membership"] {
display: none !important;
}
/* Tighten the in-app current-plan card — single centered card on phones. */
html[data-native] .native-current-plan {
max-width: 480px;
margin: 24px auto;
}
html[data-native] .plan-native-notice {
margin-top: 16px;
padding: 12px 14px;
border-radius: 10px;
background: rgba(201, 151, 59, 0.10);
border: 1px solid rgba(201, 151, 59, 0.25);
color: #f0e8d6;
font-size: 13px;
line-height: 1.45;
text-align: center;
}
/* Honour iOS safe-area insets so fixed UI doesn't sit under the home
indicator or behind the notch. capacitor.config.ts has
contentInset: "always" + viewport-fit=cover in the shell stub, which
together populate these env() values. */
html[data-native] body {
padding-bottom: env(safe-area-inset-bottom);
padding-top: env(safe-area-inset-top);
}
/* ════════════════════════════════════════════════════════════════════
WCAG 2.5.5 AAA tap-target compliance — bump 4 mobile tap targets to ≥44×44.
Elements stay visually similar (min-height + padding tweaks, no font-size
changes), so layout doesn't shift on desktop.
════════════════════════════════════════════════════════════════════ */
/* Tour-banner Skip button — was 53×24 (AA only). */
.flight-skip {
min-height: 44px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Destination panel back button — was 69×31. */
.dest-back {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Lightbox close button — was 40×40, just shy of AAA. */
.lightbox-close {
width: 44px;
height: 44px;
}
/* Landing primary/secondary CTAs — were 43px tall, 1px shy of AAA. */
.landing-btn {
padding: 14px 22px;
}
/* ════════════════════════════════════════════════════════════════════
Native share-sheet button — visible only inside the iOS / Android
shell (toggled in share.js based on window.__IS_NATIVE_APP__).
Sits below the Copy URL row and above the share hint. Tap fires
@capacitor/share which opens the system share sheet.
════════════════════════════════════════════════════════════════════ */
.share-native-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 10px;
min-height: 48px;
padding: 12px 18px;
border-radius: 10px;
background: linear-gradient(180deg, #d6a544, #b3812f);
color: #181410;
border: 0;
font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
letter-spacing: 0.2px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(201, 151, 59, 0.28);
transition: transform 120ms ease, box-shadow 160ms ease;
}
.share-native-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(201, 151, 59, 0.4);
}
.share-native-btn:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(201, 151, 59, 0.3);
}
.share-native-btn svg {
flex-shrink: 0;
}