/* CH Mapa Interativo — site * * O canvas inteiro é um único elemento transformado (translate + scale) e os * pinos são filhos dele, posicionados em % — acompanham o zoom de graça. Só o * tamanho do pino é contra-escalado, via --chmi-scale que o JS escreve no * canvas; senão ele vira um balão quando a arte é ampliada. * * Tudo fica sob .chmi-map para não vazar estilo no tema. */ :root { --chmi-pin: #1C7FA3; --chmi-ink: #111827; --chmi-ink-soft: #4B5563; --chmi-ink-mute: #9CA3AF; --chmi-paper: #FFFFFF; --chmi-paper-alt: #F5F7FA; --chmi-line: #E5E7EB; --chmi-radius: 10px; --chmi-radius-lg: 16px; } .chmi-map { margin: 0 0 1.5rem; color: var(--chmi-ink); } .chmi-map__hint { margin: 0 0 1rem; font-size: .875rem; color: var(--chmi-ink-soft); } .chmi-map__hint--touch { display: none; } @media (pointer: coarse) { .chmi-map__hint--touch { display: block; margin: .5rem 0 0; } } /* ── Palco ─────────────────────────────────────────────────────────────── */ .chmi-map__stage { position: relative; overflow: hidden; border: 1px solid var(--chmi-line); border-radius: var(--chmi-radius-lg); background: var(--chmi-paper-alt); /* pan-y em 1x deixa o dedo rolar a página normalmente por cima do mapa; o JS troca para none ao ampliar, quando o gesto passa a ser do mapa. */ touch-action: pan-y; } .chmi-map__stage.is-zoomed { cursor: grab; } .chmi-map__stage.is-panning { cursor: grabbing; } .chmi-map__canvas { position: relative; transform-origin: 0 0; } /* Sem object-fit: cover — qualquer recorte deslocaria os pontos, que são gravados em % da arte inteira. */ .chmi-map__img { display: block; width: 100%; height: auto; max-width: none; border-radius: 0; -webkit-user-drag: none; user-select: none; } .chmi-pin { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box; background: var(--chmi-pin); color: var(--chmi-pin-ink, #fff); text-decoration: none; font-weight: 800; font-size: 13px; line-height: 1; border: 2px solid #fff; /* Dois anéis: o branco separa de mata e telhado escuros, o escuro separa de céu e lago claros. A arte tem de tudo, nenhum sozinho bastaria. */ box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .45); transform: translate(-50%, -50%) scale(calc(1 / var(--chmi-scale, 1))); transition: filter .15s ease, box-shadow .15s ease; } .chmi-pin:hover, .chmi-pin:focus { filter: brightness(1.25); z-index: 2; color: var(--chmi-pin-ink, #fff); } .chmi-pin:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(0, 0, 0, .45); z-index: 3; } /* O número do pino não herda a cor de link do tema: um ".rm a { color: inherit }" deixava o número escuro sobre o pino escuro. A classe raiz repetida ganha desse tipo de regra sem !important. */ .chmi-map .chmi-pin, .chmi-map .chmi-pin:visited, .chmi-map .chmi-pin:hover, .chmi-map .chmi-pin:focus { color: var(--chmi-pin-ink, #fff); } /* Cinto e suspensório: se algum CSS do site (ou de um plugin de cache/otimização que reescreve o CSS) pintar os links com um seletor mais forte ou com !important, o número do pino, o da lista e o do painel continuam legíveis sobre a cor do pino, e o botão "Conhecer" também. É texto de componente com fundo próprio: a cor não depende da página. */ .chmi-map .chmi-pin, .chmi-map .chmi-pin .chmi-pin__num, .chmi-map .chmi-map__num, .chmi-map .chmi-map__panel-num, .chmi-map.chmi-map .chmi-map__link, .chmi-map.chmi-map .chmi-map__link:hover, .chmi-map.chmi-map .chmi-map__link:focus { color: var(--chmi-pin-ink, #fff) !important; } /* Ponto selecionado: anel pulsante, para achar o pino depois que o mapa anda. */ .chmi-pin.is-active { z-index: 4; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 6px rgba(255, 255, 255, .55); animation: chmi-pulse 1.6s ease-out 2; } @keyframes chmi-pulse { 0% { box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.45), 0 0 0 18px rgba(255,255,255,0); } } @media (pointer: coarse) { .chmi-pin { width: 34px; height: 34px; font-size: 14px; } /* Alvo de toque de 44px sem inflar o pino — inflar sobreporia os vizinhos no desktop, onde o mouse não precisa da folga. */ .chmi-pin::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; } } /* Pino recolhido pelo declutter: vira um ponto sem número, dizendo "tem algo aqui" sem disputar espaço com o vizinho. Ampliar o mapa afasta os dois e ele volta a ser pino inteiro sozinho. */ .chmi-pin--dot { width: 14px; height: 14px; border-width: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 4px rgba(0, 0, 0, .4); z-index: 0; } .chmi-pin--dot .chmi-pin__num { display: none; } /* Pino afastado do vizinho (opção "Afastar pinos que se encostam"): o pino anda e uma linha fina o liga à marca do ponto exato. As variáveis vêm do JS, em px de tela; dentro do pino 1 unidade já é 1px, porque a contra-escala anula o zoom. */ .chmi-pin--shifted { transform: translate(calc(-50% + var(--chmi-dx, 0px) / var(--chmi-scale, 1)), calc(-50% + var(--chmi-dy, 0px) / var(--chmi-scale, 1))) scale(calc(1 / var(--chmi-scale, 1))); } .chmi-pin__lead { display: none; } .chmi-pin--shifted .chmi-pin__lead { display: block; position: absolute; z-index: -1; pointer-events: none; left: calc(50% + var(--chmi-sx, 0px)); top: calc(50% + var(--chmi-sy, 0px)); width: var(--chmi-len, 0px); height: 2px; margin-top: -1px; transform-origin: 0 50%; transform: rotate(var(--chmi-ang, 0rad)); background: var(--chmi-pin); box-shadow: 0 0 0 1px rgba(255, 255, 255, .85); } .chmi-pin--shifted .chmi-pin__lead::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; box-sizing: border-box; border-radius: 50%; background: var(--chmi-pin); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); } /* Nome ao lado do pino (mapa com "mostrar o nome" ligado). O rótulo é filho do pino, então herda a contra-escala do zoom e o tamanho na tela não muda ao ampliar. 8px = a borda de 2px do pino + 6px de respiro. O pino é a descrição para leitor de tela (aria-label), por isso o rótulo é aria-hidden. */ .chmi-pin__label { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: rgba(17, 24, 39, .74); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; text-shadow: none; text-decoration: none; } .chmi-pin--label-left .chmi-pin__label { left: auto; right: calc(100% + 8px); } /* Pino recolhido em ponto não tem nome; nome que colide com outro some por visibility (e não display) para o JS ainda conseguir medi-lo. */ .chmi-pin--dot .chmi-pin__label { display: none; } .chmi-pin.is-label-hidden .chmi-pin__label { visibility: hidden; } .chmi-pin.is-label-hidden:hover .chmi-pin__label, .chmi-pin.is-label-hidden:focus-visible .chmi-pin__label { visibility: visible; } @media (pointer: coarse) { .chmi-pin__label { font-size: 13px; } } @media (pointer: coarse) { .chmi-pin--dot { width: 16px; height: 16px; } /* Alvo de toque menor que o do pino inteiro, de propósito: pontos recolhidos estão perto uns dos outros, e áreas grandes se sobreporiam. Quem quer precisão amplia o mapa ou usa a lista. */ .chmi-pin--dot::after { inset: -4px; } } .chmi-map__zoom { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: flex; flex-direction: column; gap: 4px; } .chmi-map__zbtn { width: 36px; height: 36px; border-radius: var(--chmi-radius); border: 1px solid var(--chmi-line); background: rgba(255, 255, 255, .92); color: var(--chmi-ink); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .chmi-map__zbtn:hover { background: #fff; border-color: var(--chmi-pin); } .chmi-map__zbtn[disabled] { opacity: .4; cursor: default; } .chmi-map__placeholder { min-height: 220px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--chmi-paper-alt) 0, var(--chmi-paper-alt) 16px, var(--chmi-paper) 16px, var(--chmi-paper) 32px); } .chmi-map__placeholder span { font-family: monospace; font-size: 13px; color: var(--chmi-ink-mute); } /* ── Painel do ponto selecionado ───────────────────────────────────────── */ .chmi-map__panel { position: relative; margin-top: .75rem; padding: 1rem 2.5rem 1rem 1rem; background: var(--chmi-paper); border: 1px solid var(--chmi-line); border-left: 4px solid var(--chmi-pin); border-radius: var(--chmi-radius); box-shadow: 0 4px 20px rgba(0, 0, 0, .08); animation: chmi-panel-in .25s ease-out; } @keyframes chmi-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .chmi-map__panel-inner { display: flex; gap: 12px; align-items: flex-start; } .chmi-map__panel-title { margin: 0 0 .25rem; font-size: 1.0625rem; line-height: 1.25; } .chmi-map__panel-desc { margin: 0; color: var(--chmi-ink-soft); line-height: 1.55; white-space: pre-line; } .chmi-map__panel-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; padding: 0; border: 0; background: transparent; color: var(--chmi-ink-mute); font-size: 20px; line-height: 1; cursor: pointer; } .chmi-map__panel-close:hover { background: var(--chmi-paper-alt); color: var(--chmi-ink); } /* ── Lista numerada ────────────────────────────────────────────────────── */ .chmi-map__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .chmi-map__item { margin: 0; overflow: hidden; background: var(--chmi-paper-alt); border: 1px solid var(--chmi-line); border-radius: var(--chmi-radius); } /* O mesmo seletor serve para o (sem JS) e para o