/* ═══ IL VISORE DELLE MAPPE ═══════════════════════════════════════════════ Portato da st26 così com'era: è cartografia già disegnata e già provata — i marker a goccia, la bussola, la scala, il segno «SicilyTravel Maps» in verticale. Non si ridisegna quello che funziona. L'altezza la decide chi la usa, con `--stmap-h`: in una card sono 180 pixel, in una pagina 460. */ #stmap { width: 100%; height: var(--stmap-h, 460px); border-radius: 14px; overflow: hidden; background: #aad3df; box-shadow: 0 8px 22px -6px rgba(10, 61, 98, .35); border: 1px solid rgba(10, 61, 98, .12); } #stmap .maplibregl-canvas { outline: none; } /* La «i» dei crediti (OpenStreetMap), sotto i comandi a destra: più piccola dei bottoni (22px contro 36) e centrata con loro, quindi spostata a sinistra di metà della differenza. Si apre verso sinistra: il testo compare accanto, il bottone resta dov'è (vedi crediti() in visore.js). */ #stmap .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact { margin: 8px calc(var(--bordo, 5px) + 7px) 0 0; min-height: 22px; padding: 0 22px 0 0; border-radius: 11px; background: #fff; box-shadow: 0 1px 4px rgba(10, 61, 98, .25); } #stmap .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 3px 26px 3px 9px; } #stmap .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button { width: 22px; height: 22px; border-radius: 11px; background-size: 20px; background-position: center; } #stmap .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner { font-size: .66rem; line-height: 16px; color: #0a3d62; white-space: nowrap; } #stmap .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib a { color: inherit; } /* Marker HTML: pin a goccia colorato con icona/etichetta. MapLibre imposta `transform` (translate) SULL'ELEMENTO del Marker → la rotazione della goccia NON va su quell'elemento (verrebbe sovrascritta, goccia storta), ma su un figlio interno. .stmap-pinwrap = elemento del Marker; .stmap-pin = goccia. */ /* ═══ SI TOCCA QUELLO CHE SI VEDE ════════════════════════════════════ Il wrap è un quadrato di trenta pixel, e la goccia ci sta dentro — ma non sempre: dove ci sono più eventi nello stesso posto, il disegno si sposta di lato per farsi vedere e il quadrato resta dov'era. Da lì in poi il bersaglio e il disegno sono due cose diverse: si tocca la goccia e il tocco finisce nel quadrato VUOTO del marker accanto, che se lo prende e non fa niente. Allora il quadrato non si tocca affatto, e si tocca solo quello che è disegnato: la goccia e il suo nome. Il tocco continua a salire fino al wrap — un genitore sordo non ferma quello che arriva dai figli — quindi chi ascolta lì continua a sentire, e sente il pin giusto. */ .stmap-pinwrap { width: 30px; height: 30px; cursor: pointer; pointer-events: none; } /* Lo strato libero fra la posizione e il disegno: qui dentro si può animare quello che si vuole senza toccare né l'una né l'altro. */ .stmap-anim { width: 30px; height: 30px; } .stmap-pinwrap .stmap-pin, .stmap-pinwrap .stmap-nome { pointer-events: auto; } .stmap-pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--pin, #0a3d62); transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; } .stmap-pin > * { transform: rotate(45deg); color: #fff; font-size: .8rem; } .stmap-pin.is-num > * { font-weight: 800; font-size: .8rem; font-family: 'JetBrains Mono', monospace; } .maplibregl-popup-content { border-radius: 10px; padding: .6rem .8rem; font-family: 'Inter', sans-serif; } .maplibregl-popup-content a { color: #0a3d62; font-weight: 700; text-decoration: none; } /* Controlli stile around-me (zoom · nord · posizione · seguimi) — attivi con OPTS.controls='around'. */ #stmap .stm-glnav { display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; background: transparent; box-shadow: none; border: 0; margin: 9px 5px 0 0; } #stmap .stm-glgrp { background: #fff; border-radius: 13px; overflow: hidden; box-shadow: 0 6px 18px -6px rgba(10,61,98,.5), 0 0 0 1px rgba(10,61,98,.06); display: flex; flex-direction: column; } #stmap .stm-glnav-btn { width: 36px; height: 34px; border: 0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #0a3d62; font-size: .82rem; padding: 0; } #stmap .stm-glnav-btn:hover { background: #eef3f6; } #stmap .stm-glnav-val { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: .66rem; font-weight: 700; color: #0a3d62; background: #fff; padding: .2rem 0; line-height: 1; border-top: 1px solid rgba(10,61,98,.14); border-bottom: 1px solid rgba(10,61,98,.14); } /* ── I PALLINI ────────────────────────────────────────────────────────────── Nord, posizione e seguimi fanno tre cose che non c'entrano niente fra loro: dentro un blocco unico sembravano un elenco di voci. Tondi e staccati si leggono uno per uno — e un tondo bianco su una carta è un bottone da qualunque parte lo si guardi. */ #stmap .stm-glpallino { width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px -6px rgba(10,61,98,.5), 0 0 0 1px rgba(10,61,98,.06); transition: transform .15s, background-color .15s; } #stmap .stm-glpallino:active { transform: scale(.9); background: #eef3f6; } #stmap .stm-glnav-north { height: 36px; } #stmap .stm-glnav-needle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: transform .12s linear; } /* La freccia da sola, e più grande: adesso ha tutto il tondo per sé. La coda scura sotto la punta rossa è quello che la fa leggere come un ago di bussola invece che come un triangolo. */ #stmap .stm-glnav-needle .tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #c0392b; display: block; } #stmap .stm-glnav-needle::after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid rgba(10,61,98,.35); display: block; } #stmap .stm-glnav-locate { color: #2e86de; font-size: .9rem; } /* ── SEGUIMI ACCESO ───────────────────────────────────────────────────────── Prima cambiava solo il colore dell'icona, e da verde a scuro dentro un tondo bianco la differenza si vedeva solo cercandola: il GPS che ti insegue e' una cosa che DEVE dirsi da lontano — consuma batteria e ti muove la mappa sotto le dita finche' non lo spegni. Adesso si accende il pallino intero, in azzurro. E l'icona sopra resta SCURA: il bianco su un azzurro medio si legge grigio — cioe' sparisce proprio nel momento in cui deve dire «sono acceso». Il cerchietto attorno che pulsa e' quello che distingue «acceso» da «premuto un attimo fa»: un colore fermo puo' essere un residuo, una cosa che respira e' una cosa in funzione. */ /* AZZURRO, non il colore del tema: `--tema-theme` e' un verde acqua, e su una carta piena di verdi — boschi, campagne, riserve — un bottone acceso verde e' un bottone che si confonde con quello che sta sotto. Questo e' lo stesso azzurro del bottone «la mia posizione» qui accanto: le due cose parlano di GPS, ed e' giusto che parlino con lo stesso colore. */ #stmap .stm-glnav-follow.is-on { background: #2e86de; color: #0b2135; } #stmap .stm-glnav-follow.is-on::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #2e86de; opacity: .55; animation: stm-respiro 1.8s ease-out infinite; } #stmap .stm-glnav-follow { position: relative; } @keyframes stm-respiro { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } /* Chi ha chiesto meno movimento non lo vuole nemmeno qui: resta il colore, che dice la stessa cosa senza muoversi. */ @media (prefers-reduced-motion: reduce) { #stmap .stm-glnav-follow.is-on::after { animation: none; opacity: .5; } } .stmap-user { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #2e86de; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(46,134,222,.4), 0 2px 6px rgba(0,0,0,.4); } /* La freccia della bussola: un cono che parte dal pallino e punta in su (verso il nord dell'elemento); è il marker a ruotare, così punta dove guarda il telefono. C'è solo quando il telefono ci dà la direzione. */ .stmap-user-freccia { display: none; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid #2e86de; filter: drop-shadow(0 -1px 1px rgba(0,0,0,.35)); } .stmap-user.ha-bussola .stmap-user-freccia { display: block; } /* Scala custom (top-left): etichetta a sinistra, linea (con tacche) a destra. Niente box. */ /* ── LA SCALA, IN PIEDI ───────────────────────────────────────────────────── Sta nella colonna di destra sotto la firma, che è scritta in verticale: una barra sdraiata lì dentro sarebbe l'unica cosa storta della colonna. La riga va dall'alto in basso; l'etichetta le sta a fianco, girata come la firma. Le due tacche sono i bordi corti — dicono dove comincia e dove finisce la misura, che è tutto quello che una scala deve dire. */ #stmap .stm-scale { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin: 6px 11px 0 0; pointer-events: none; background: transparent; box-shadow: none; border: 0; font-family: 'JetBrains Mono', monospace; } #stmap .stm-scale .lbl { font-size: .64rem; font-weight: 800; color: #0a3d62; line-height: 1; white-space: nowrap; writing-mode: vertical-rl; text-orientation: mixed; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 1px 2px rgba(255,255,255,.95); } #stmap .stm-scale .bar { width: 7px; box-sizing: border-box; border: 2px solid #0a3d62; border-left: 0; border-radius: 0 2px 2px 0; box-shadow: 0 0 2px rgba(255,255,255,.9); transition: height .12s linear; } /* ═══ SEI QUI ════════════════════════════════════════════════════════════════ Il pallino blu col cerchio che respira: è il segno che ogni telefono usa da quindici anni per dire «tu sei qui», e nessuno deve impararlo. In mezzo alle gocce dei posti si riconosce subito perché è l'unica cosa tonda. L'onda parte da sotto il pallino e si allarga sparendo: dice che il punto è vivo — la posizione è una cosa che il telefono continua a misurare, non un chiodo piantato sulla carta. */ /* ═══ IL PALLINO DI DOVE SEI NON SI TOCCA ═══════════════════════════════════ Non c'è niente da aprire: dice dove sei, e lo sai già. Ma finché era toccabile il tocco arrivava a lui — e su iPhone un marker che riceve un tocco può perdere per un istante la posizione che la mappa gli riscrive a ogni fotogramma: scattava nell'angolo in alto a sinistra e tornava. Sordo, il tocco gli passa attraverso e arriva alla carta, che è quello che uno voleva toccare. Niente da guadagnare, un difetto in meno. */ .stmap-io{ position:relative; width:18px; height:18px; pointer-events:none; } .stmap-io-punto{ position:absolute; inset:0; border-radius:50%; background:#1a73e8; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,12,28,.5); } .stmap-io-onda{ position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:rgba(26,115,232,.35); animation:stmapOnda 2.2s ease-out infinite; } @keyframes stmapOnda{ 0% { transform:scale(1); opacity:.55; } 70% { transform:scale(3.6); opacity:0; } 100% { transform:scale(3.6); opacity:0; } } /* A chi ha chiesto meno movimento resta il pallino, senza onda: il segno dice già dove sei, il respiro è un di più. */ @media (prefers-reduced-motion: reduce){ .stmap-io-onda{ animation:none; opacity:.35; transform:scale(1.8); } } /* ═══ IL NOME ACCANTO ALLA GOCCIA ════════════════════════════════════════════ Una mappa di gocce uguali non dice niente finché non le tocchi una per una. Il nome sta a destra, in una riga sola: se non ci sta si taglia — a mezzo nome un posto si riconosce, a nessun nome no. Bianco con l'ombra addosso e non una pastiglia: la pastiglia sarebbe un secondo oggetto sulla mappa, e di oggetti ce n'è già uno per posto. */ .stmap-pinwrap .stmap-nome{ position:absolute; left:calc(100% + 4px); top:50%; transform:translateY(-50%); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /* ═══ SCURO SUL CHIARO ══════════════════════════════════════════════════ La nostra cartografia è chiara — beige, azzurro d'acqua, strade bianche — e il bianco ci sparisce sopra: restava una scritta che si indovinava dall'ombra. Blu del sito, con un alone bianco intorno che la stacca dal disegno sotto senza fare da pastiglia. */ color:#0b2135; font-size:.68rem; font-weight:800; line-height:1.1; text-shadow:0 1px 0 rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.8); /* Il nome si tocca come la goccia: è la parte più grande del bersaglio, e lasciarlo sordo vuol dire un tocco su tre che non fa niente. */ cursor:pointer; } /* ═══ I SEGNI RICEVONO IL TOCCO ═════════════════════════════════════════════ Li avevo resi sordi per non farli saltare, e il tocco lo raccoglieva la carta cercando il segno più vicino. Sulla carta però un tocco arriva solo se la mappa è convinta che sia un tocco: con un dito che scivola di un pixel diventa un trascinamento, e il segno si apriva una volta su cinque. Ho scambiato un difetto che si vedeva ogni tanto con uno che rompeva il gesto principale — peggio. Quindi i segni tornano a sentire il tocco, che è il modo che ha sempre funzionato. Il salto lo si toglie dove dà davvero fastidio, in un altro modo: sulla pagina di un posto il segno non è più un pezzo di pagina, è disegnato dentro la carta e non ha una posizione da perdere. La ricerca del segno più vicino resta come rete: prende i tocchi che cadono accanto alla goccia invece che sopra. */ /* ═══ MENTRE SI ZOOMA I SEGNI SPARISCONO ════════════════════════════════════ Non è un effetto: è la scelta fra un segno nascosto e un segno che dice una bugia. Durante lo zoom la posizione dei marker può perdere un colpo — su iPhone si vede — e un pin fuori posto afferma una cosa falsa. Sparisce per il tempo dell'animazione e torna quando le posizioni sono di nuovo vere. `visibility` e non `display`: nascosto così l'elemento resta dov'è e non costringe la pagina a rifare i conti, quindi tornare a vederlo non costa niente. E niente transizione — deve sparire adesso, non sfumare. */ .stmap-in-volo .maplibregl-marker{ visibility:hidden; transition:none !important; } /* ═══════════════════════════════════════════════════════════════════════════ I COMANDI SEMPRE IN PRIMO PIANO ═══════════════════════════════════════════════════════════════════════════ Le frecce dello zoom, il nord e il mirino stanno sopra QUALUNQUE cosa la mappa disegni: i marker a goccia, i nomi, i pin degli eventi. Un pin che passa sopra il «+» è un bottone che a volte non si può premere — e «a volte» è la parola che rompe la fiducia in un comando. Vale dentro la mappa: le schede e i modal che salgono SOPRA la mappa stanno fuori dal suo contenitore, e questa regola non li tocca. */ .maplibregl-ctrl-top-right, .maplibregl-ctrl-top-left, .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left{ z-index:1200; } /* ═══ «IN PRIMO PIANO» VALE DENTRO LA MAPPA, NON SULLA PAGINA ════════════════ Quel 1200 serve a stare sopra i segni della mappa. Ma la mappa non aveva un suo piano: il numero valeva per tutta la pagina, e su una pagina che scorre (Posti intorno a me) i comandi e la scritta «SicilyTravel Maps» passavano SOPRA la barra in alto, che sta a 55. `isolation` dà alla mappa un piano suo: dentro, i comandi restano sopra i segni; fuori, la mappa intera vale come un pezzo qualunque di pagina e scorre sotto la barra. Non ritaglia niente e non sposta i riferimenti dei segni (non è `overflow:hidden`: vedi la nota in posti.css). */ #stmap{ isolation:isolate; }