/* ————— Photo globe ————— */ /* Scoped to the .pg root (plus the pg-prefixed grid-state controls and the home-page embed that live outside it). Every color here comes from the site's existing light token set — --paper/--ink/--line for the surface, --accent for markers. rgba(250,247,242,…) is --paper with alpha, and rgba(26,24,21,…) is --ink with alpha for shadows. */ /* Pre-boot: the globe is on its way, so never paint the grid underneath it. Set synchronously in (see base.njk) and cleared by globe.js the moment it lands in the grid state — or if it fails to start at all. */ .pg-booting body { background: var(--paper); } .pg-booting .bar, .pg-booting .foot, .pg-booting .section-head, .pg-booting #pg-grid { display: none; } /* Grid-state control, revealed by JS only when the globe is possible (§11) */ .pg-explore { display: inline-block; margin-top: 1rem; padding: 0; font: inherit; font-size: 0.82rem; letter-spacing: 0.04em; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; transition: color 200ms, border-color 200ms; } .pg-explore:hover { color: var(--accent); border-color: var(--accent); } .pg-group-meta { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-faint); margin-left: 0.6rem; } /* Place groups in the grid: header + fanned three-photo stack as the ; opening reveals the full gallery. Shadow color is --ink with alpha. */ .pg-place-group { margin: 0 0 2.6rem; } .pg-place-summary { list-style: none; cursor: pointer; } .pg-place-summary::-webkit-details-marker { display: none; } .pg-place-summary::marker { content: ""; } .pg-place-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .pg-place-summary:hover .group-label { color: var(--accent); } .group-label { transition: color 200ms; } .pg-fan { position: relative; display: block; height: 200px; margin: 1.2rem calc(var(--pad) + 2.2rem) 0.6rem; } .pg-fan-item { position: absolute; top: 0; left: 0; width: 240px; aspect-ratio: 3/2; overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 10px 26px rgba(26, 24, 21, 0.18); transition: transform 350ms var(--ease); } .pg-fan-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-fan-item:nth-child(1) { transform: rotate(-2deg); z-index: 3; } .pg-fan-item:nth-child(2) { transform: translate(36px, 8px) rotate(5deg); z-index: 2; } .pg-fan-item:nth-child(3) { transform: translate(-30px, 15px) rotate(-8deg); z-index: 1; } .pg-place-summary:hover .pg-fan-item:nth-child(1), .hp-place:hover .pg-fan-item:nth-child(1) { transform: translateY(-5px) rotate(-1deg); } .pg-place-summary:hover .pg-fan-item:nth-child(2), .hp-place:hover .pg-fan-item:nth-child(2) { transform: translate(52px, 4px) rotate(8deg); } .pg-place-summary:hover .pg-fan-item:nth-child(3), .hp-place:hover .pg-fan-item:nth-child(3) { transform: translate(-46px, 12px) rotate(-11deg); } .pg-fan-hint { display: inline-block; margin: 0 var(--pad) 0.4rem; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-soft); border-bottom: 1px solid var(--line); transition: color 200ms, border-color 200ms; } .pg-place-summary:hover .pg-fan-hint { color: var(--accent); border-color: var(--accent); } .pg-place-group[open] .pg-fan, .pg-place-group[open] .pg-fan-hint { display: none; } @media (max-width: 560px) { .pg-fan { height: 150px; margin: 1rem calc(var(--pad) + 1.4rem) 0.5rem; } .pg-fan-item { width: 172px; } } /* ————— Home-page place cards ————— */ /* Reuses the .pg-fan stack from the grid view. The fan's items overhang its box by ~46px left and ~52px right, so the column needs room on both sides. */ .hp-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.8rem 1.4rem; margin-top: 1.4rem; } .hp-place { display: block; text-decoration: none; color: inherit; } .hp-place .pg-fan { height: 168px; margin: 0 3.4rem 0.9rem 3rem; } .hp-place .pg-fan-item { width: 196px; } .hp-place-name { display: block; font-family: var(--serif); font-size: 1.16rem; font-style: italic; transition: color 200ms; } .hp-place:hover .hp-place-name { color: var(--accent); } .hp-place-meta { display: block; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-faint); } @media (max-width: 560px) { .hp-place .pg-fan { height: 138px; margin: 0 2.6rem 0.8rem 2.4rem; } .hp-place .pg-fan-item { width: 158px; } } /* ————— Home-page embed ————— */ /* Bounded rather than full-screen; shares the marker/hover/tether styles above, which are deliberately unscoped for exactly this reason. */ .home-globe { padding: 1rem var(--pad) 4rem; max-width: 90rem; } .hg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .hg-stage { position: relative; height: clamp(320px, 46vh, 460px); margin-top: 0.9rem; border: 1px solid var(--line); background: var(--paper); overflow: hidden; cursor: grab; } .hg-stage:active { cursor: grabbing; } .hg-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* NB: the embed's canvas needs touch-action: pan-y so a vertical swipe scrolls the page instead of spinning the globe, but OrbitControls writes touch-action: none as an inline style, which no rule here can outrank — home-globe.js sets it on the element after the view is built. */ /* ————— Root ————— */ .pg { position: fixed; inset: 0; z-index: 80; background: var(--paper); color: var(--ink); font-family: var(--sans); } .pg [hidden] { display: none !important; } /* :where() keeps these resets at zero specificity so every single-class component rule below can override them without escalation */ :where(.pg) a { text-decoration: none; color: inherit; } :where(.pg) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .pg a:focus-visible, .pg button:focus-visible, .pg [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pg-stage { position: absolute; inset: 0; cursor: grab; } .pg-stage:active { cursor: grabbing; } .pg-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* One-finger drag must spin the globe, not scroll the page (§9) */ .pg-stage canvas { touch-action: none; } /* Fly-in overlay. Thumbnails animate with transform/opacity only. */ .pg-flyover { position: absolute; inset: 0; z-index: 95; pointer-events: none; } .pg-flyer { position: absolute; top: 0; left: 0; will-change: transform, opacity; } .pg-flyer img { display: block; border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(26, 24, 21, 0.18); } /* ————— Markers ————— */ .pg-marker { position: relative; cursor: pointer; pointer-events: auto; } /* Hollow squares, not filled dots (§6.7): tiny frames, consistent with the rest of the system, and a square reads as a mark where a dot reads as a pin. */ .pg-marker-dot { display: block; border-radius: 0; background: none; border: 1.5px solid var(--petrol); box-shadow: 0 0 0 3px rgba(28, 74, 71, 0.16); transition: transform 200ms var(--ease), background 200ms; transform-origin: 50% 50%; } .pg-marker:hover .pg-marker-dot, .pg-marker.is-hover .pg-marker-dot { background: var(--petrol); } .pg-marker:hover .pg-marker-dot, .pg-marker.is-hover .pg-marker-dot { transform: scale(1.3) translateY(-1px); } .pg-marker.is-pulse .pg-marker-dot { animation: pg-pulse 900ms var(--ease) infinite; } @keyframes pg-pulse { 0% { box-shadow: 0 0 0 4px rgba(28, 74, 71, 0.35); } 70% { box-shadow: 0 0 0 12px rgba(28, 74, 71, 0); } 100% { box-shadow: 0 0 0 4px rgba(28, 74, 71, 0); } } .pg-marker.is-dim { opacity: 0.3; } .pg-marker.is-active .pg-marker-dot { box-shadow: 0 0 0 4px rgba(28, 74, 71, 0.5); } .pg-marker-label { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink); background: rgba(250, 247, 242, 0.92); border: 1px solid var(--line); padding: 3px 9px; opacity: 0; transition: opacity 150ms; pointer-events: none; } .pg-marker:hover .pg-marker-label, .pg-marker.is-hover .pg-marker-label { opacity: 1; } .pg-cluster { display: grid; place-items: center; border-radius: 0; cursor: pointer; pointer-events: auto; background: rgba(28, 74, 71, 0.12); border: 1px solid var(--petrol); color: var(--ink); font-size: 0.66rem; transition: transform 200ms var(--ease); } .pg-cluster:hover { transform: scale(1.15); } .pg-cluster .pg-marker-label { opacity: 0; } .pg-cluster:hover .pg-marker-label { opacity: 1; } /* ————— Hovering photos (§5.1) ————— */ .pg-hover { cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity 400ms; } .pg-hover.is-shown { opacity: 1; } .pg-hover:not(.is-shown) { pointer-events: none; } .pg-hover img { display: block; border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(26, 24, 21, 0.20); transition: transform 250ms var(--ease); } .pg-hover:hover img { transform: translateY(-3px); } .pg-tethers { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .pg-tether { position: absolute; top: 0; left: 0; width: 1px; height: 100px; background: var(--line); transform-origin: 0 0; transition: opacity 400ms; } /* Suppressed entirely while a place or the viewer is open (§5.1) */ .pg[data-state="place"] .pg-hover, .pg[data-state="viewer"] .pg-hover, .pg[data-state="place"] .pg-tether, .pg[data-state="viewer"] .pg-tether { opacity: 0 !important; pointer-events: none !important; } /* Far-hemisphere occlusion, applied by globe.gl's visibility callback */ .pg-marker.is-behind, .pg-cluster.is-behind, .pg-hover.is-behind { opacity: 0 !important; pointer-events: none !important; } .pg-marker, .pg-cluster { transition: opacity 150ms; } /* Pre-assembly: markers wait at scale(0) for the west→east sweep (§4) */ .pg-marker.pre .pg-marker-dot { transform: scale(0) !important; } .pg-cluster.pre { transform: scale(0) !important; } .pg-marker-dot, .pg-cluster { transition-property: transform, opacity; transition-duration: 250ms, 150ms; } .no-fade { transition: none !important; } /* ————— Rails (§6) ————— */ .pg-rail { position: absolute; top: 0; bottom: 0; width: 220px; z-index: 90; display: flex; flex-direction: column; padding: 3.4rem 0 1rem; } .pg-rail-left { left: 0; background: linear-gradient(to right, rgba(250, 247, 242, 0.92) 60%, rgba(250, 247, 242, 0)); } .pg-rail-right { right: 0; background: linear-gradient(to left, rgba(250, 247, 242, 0.92) 60%, rgba(250, 247, 242, 0)); } .pg-rail-head { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--ink-faint); margin: 0 0 0.6rem; padding: 0 1rem; } .pg-rail-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 0 1rem; } .pg-recent { display: flex; gap: 0.6rem; align-items: center; padding: 0.45rem 0.4rem; min-height: 44px; border-bottom: 1px solid var(--line-soft); } .pg-recent-thumb { width: 44px; height: 44px; object-fit: cover; flex: none; border: 1px solid var(--line); } .pg-recent-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pg-recent-name { font-family: var(--serif); font-size: 0.98rem; line-height: 1.25; transition: color 200ms; } .pg-recent-meta { font-size: 0.66rem; letter-spacing: 0.05em; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-recent:hover .pg-recent-name { color: var(--accent); } .pg-country { position: sticky; top: 0; z-index: 1; margin: 0.9rem 0 0.2rem; padding: 0.25rem 0.4rem; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); background: rgba(250, 247, 242, 0.92); } .pg-all { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.32rem 0.4rem; font-size: 0.88rem; } .pg-all span:first-child { font-family: var(--serif); transition: color 200ms; } .pg-all-count { color: var(--ink-faint); font-size: 0.72rem; } .pg-all:hover span:first-child { color: var(--accent); } .pg-recent.is-active, .pg-all.is-active { box-shadow: inset 2px 0 0 var(--accent); } .pg-recent.is-active .pg-recent-name, .pg-all.is-active span:first-child { color: var(--accent); } .pg-sheet-toggle { display: none; } /* ————— Filmstrip (§7) ————— */ .pg-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 92; padding: 0.7rem var(--pad) 0.9rem; background: linear-gradient(to top, rgba(250, 247, 242, 0.97) 65%, rgba(250, 247, 242, 0)); transform: translateY(102%); transition: transform 300ms var(--ease); } .pg-strip.is-open { transform: none; } .pg-strip-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.55rem; } .pg-strip-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; margin: 0; } .pg-strip-meta { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0; } .pg-strip-scroll { display: flex; gap: 0.6rem; align-items: center; overflow-x: auto; height: 148px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .pg-strip-item { position: relative; flex: none; height: 136px; background: var(--line-soft); border: 1px solid transparent; padding: 0; } .pg-strip-item canvas, .pg-strip-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .pg-strip-item img { opacity: 0; transition: opacity 300ms; } .pg-strip-item img.is-loaded { opacity: 1; } .pg-strip-item.is-current { border-color: var(--accent); } /* ————— Viewer (§7) ————— */ .pg-viewer { position: absolute; inset: 0; z-index: 100; background: rgba(250, 247, 242, 0.97); display: grid; grid-template-columns: minmax(44px, auto) 1fr minmax(44px, auto); align-items: center; } .pg-viewer-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; min-width: 0; } .pg-viewer-figure img { max-width: min(2000px, 90vw); max-height: 82vh; width: auto; height: auto; object-fit: contain; } .pg-viewer-caption { font-size: 0.82rem; color: var(--ink-soft); text-align: center; padding: 0 1rem; } .pg-viewer-prev, .pg-viewer-next { min-width: 44px; min-height: 44px; font-size: 1.3rem; color: var(--ink-soft); transition: color 200ms; z-index: 1; } .pg-viewer-prev:hover, .pg-viewer-next:hover { color: var(--ink); } .pg-viewer-close { position: absolute; top: 0.7rem; right: 0.9rem; min-width: 44px; min-height: 44px; font-size: 1.6rem; line-height: 1; color: var(--ink); } /* ————— Corner controls ————— */ .pg-home, .pg-gridview, .pg-skip { position: absolute; z-index: 110; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 0.15rem 0; transition: color 200ms, border-color 200ms; } .pg-home:hover, .pg-gridview:hover, .pg-skip:hover { color: var(--accent); border-color: var(--accent); } .pg-home { top: 1rem; left: var(--pad); } .pg-gridview { top: 1rem; right: var(--pad); } .pg-skip { bottom: 1.2rem; right: var(--pad); z-index: 120; } /* Live region: present for screen readers, invisible on screen */ .pg-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ————— State-driven visibility ————— */ .pg[data-state="assembling"] .pg-rail { opacity: 0; } .pg[data-state="globe"] .pg-rail { opacity: 1; transition: opacity 400ms var(--ease), transform 400ms var(--ease); } .pg[data-state="place"] .pg-rail-left, .pg[data-state="viewer"] .pg-rail-left { opacity: 0.5; } /* ————— Mobile (§9): rails relocate, globe keeps the upper 55% ————— */ @media (max-width: 900px) { .pg-stage { bottom: 45%; } .pg-rail-left { top: 55%; bottom: 0; left: 0; right: 0; width: auto; padding: 0.6rem 0 0.8rem; background: var(--paper); } .pg-rail-left .pg-rail-scroll { display: flex; gap: 0.5rem; overflow-x: auto; overflow-y: hidden; } .pg-recent { flex: none; width: 200px; border-bottom: 0; border: 1px solid var(--line-soft); padding: 0.5rem; } .pg-sheet-toggle { display: block; position: absolute; top: calc(55% - 2.6rem); right: var(--pad); z-index: 94; min-height: 44px; padding: 0 0.9rem; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink); background: rgba(250, 247, 242, 0.92); border: 1px solid var(--line); } .pg-rail-right { top: 18%; bottom: 0; left: 0; right: 0; width: auto; z-index: 96; background: var(--paper); border-top: 1px solid var(--line); transform: translateY(104%); transition: transform 300ms var(--ease); } .pg-rail-right.is-open { transform: none; } .pg-all, .pg-recent { min-height: 44px; } /* Filmstrip replaces the recently-added row rather than stacking (§9) */ .pg[data-state="place"] .pg-rail-left, .pg[data-state="viewer"] .pg-rail-left { display: none; } .pg-strip { padding: 0.6rem 1rem 0.8rem; } .pg-home { left: 1rem; } .pg-gridview { right: 1rem; } } @media (prefers-reduced-motion: reduce) { .pg *, .pg-explore, .pg-fan-item, .pg-fan-hint, .group-label { transition: none !important; animation: none !important; } }