| .map-view-page { |
| display: grid; |
| gap: var(--sp-5); |
| } |
|
|
| .map-view { |
| position: relative; |
| background: var(--bg); |
| overflow: hidden; |
| min-height: clamp(420px, 68vh, 760px); |
| border: 1px solid var(--border); |
| } |
|
|
| .map-view__hint { |
| position: absolute; |
| bottom: var(--sp-5); |
| right: var(--sp-5); |
| font-family: var(--font-mono); |
| font-size: var(--fs-xs); |
| letter-spacing: 0.16em; |
| text-transform: uppercase; |
| color: var(--text-faint); |
| background: rgba(13, 15, 20, 0.6); |
| border: 1px solid var(--border); |
| padding: 6px 10px; |
| pointer-events: none; |
| } |
|
|
| |
| .spin { |
| animation: spin 900ms linear infinite; |
| } |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| .map-view__loading { |
| position: absolute; |
| bottom: var(--sp-5); |
| left: var(--sp-5); |
| display: flex; |
| align-items: center; |
| gap: var(--sp-2); |
| font-size: var(--fs-xs); |
| letter-spacing: 0.16em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| background: rgba(13, 15, 20, 0.6); |
| border: 1px solid var(--border); |
| padding: 6px 10px; |
| } |
|
|
| |
|
|
| .map-legend { |
| position: absolute; |
| top: var(--sp-5); |
| left: var(--sp-5); |
| z-index: 4; |
| background: rgba(13, 15, 20, 0.65); |
| border: 1px solid var(--border); |
| padding: var(--sp-3) var(--sp-4); |
| min-width: 220px; |
| } |
|
|
| .map-legend__title { |
| margin-bottom: var(--sp-2); |
| } |
|
|
| .map-legend__bar { |
| display: grid; |
| grid-template-columns: repeat(5, 1fr); |
| height: 8px; |
| } |
|
|
| .map-legend__cell { |
| height: 100%; |
| } |
|
|
| .map-legend__scale { |
| display: grid; |
| grid-template-columns: max-content 1fr max-content; |
| align-items: center; |
| column-gap: var(--sp-3); |
| margin-top: var(--sp-2); |
| width: 100%; |
| } |
|
|
| .map-legend__scale-label { |
| font-size: var(--fs-xs); |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| color: var(--text-faint); |
| white-space: nowrap; |
| } |
|
|
| .map-legend__scale-label--low { |
| justify-self: start; |
| } |
|
|
| .map-legend__scale-label--high { |
| justify-self: end; |
| } |
|
|
| |
| .map-legend__scale-gap { |
| display: block; |
| height: 1px; |
| min-width: var(--sp-4); |
| background: linear-gradient( |
| 90deg, |
| transparent, |
| var(--border) 35%, |
| var(--border-strong) 50%, |
| var(--border) 65%, |
| transparent |
| ); |
| opacity: 0.85; |
| } |
|
|
| |
|
|
| .map-tooltip { |
| position: fixed; |
| top: 0; |
| left: 0; |
| z-index: 6; |
| background: rgba(13, 15, 20, 0.92); |
| border: 1px solid var(--border-strong); |
| padding: var(--sp-3) var(--sp-4); |
| min-width: 200px; |
| pointer-events: none; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .map-tooltip__name { |
| font-family: var(--font-display); |
| font-size: var(--fs-lg); |
| margin-bottom: var(--sp-2); |
| } |
|
|
| .map-tooltip__row { |
| display: flex; |
| justify-content: space-between; |
| align-items: baseline; |
| font-size: var(--fs-xs); |
| margin-top: 2px; |
| } |
|
|
| .map-tooltip__row.faint { |
| color: var(--text-faint); |
| letter-spacing: 0.06em; |
| } |
|
|
| .map-articles { |
| border: 1px solid var(--border); |
| background: var(--surface); |
| padding: var(--sp-5); |
| } |
|
|
| .map-articles__head { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: var(--sp-4); |
| margin-bottom: var(--sp-4); |
| } |
|
|
| .map-articles__title { |
| margin-top: 4px; |
| font-family: var(--font-display); |
| } |
|
|
| .map-articles__loading { |
| display: flex; |
| align-items: center; |
| gap: var(--sp-2); |
| font-size: var(--fs-xs); |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| } |
|
|
| .map-articles__list { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .map-article { |
| padding: var(--sp-4) 0; |
| border-top: 1px dashed var(--border); |
| } |
|
|
| .map-article:first-child { |
| border-top: 0; |
| padding-top: 0; |
| } |
|
|
| .map-article__title { |
| font-family: var(--font-display); |
| color: var(--text); |
| text-decoration: none; |
| } |
|
|
| .map-article__title:hover { |
| text-decoration: underline; |
| } |
|
|
| .map-article__meta { |
| margin-top: var(--sp-1); |
| color: var(--text-muted); |
| display: flex; |
| gap: var(--sp-2); |
| font-size: var(--fs-xs); |
| } |
|
|
| .map-article__summary { |
| margin-top: var(--sp-2); |
| color: var(--text-muted); |
| line-height: var(--lh-relaxed); |
| } |
|
|
| @media (max-width: 900px) { |
| .map-view { |
| min-height: clamp(360px, 56vh, 560px); |
| } |
|
|
| .map-legend { |
| top: var(--sp-3); |
| left: var(--sp-3); |
| min-width: 0; |
| width: calc(100% - (2 * var(--sp-3))); |
| max-width: 320px; |
| } |
|
|
| .map-view__loading { |
| left: var(--sp-3); |
| bottom: var(--sp-3); |
| } |
|
|
| .map-view__hint { |
| right: var(--sp-3); |
| bottom: var(--sp-3); |
| max-width: calc(100% - (2 * var(--sp-3))); |
| } |
|
|
| } |
|
|
| @media (max-width: 640px) { |
| .map-legend, |
| .map-view__hint { |
| display: none; |
| } |
|
|
| .map-articles { |
| padding: var(--sp-4); |
| } |
| } |
|
|
