/** * Extra-web Italy Map — stili del frontend. * * Tutti i valori estetici sono custom properties su :root: per ritoccare una * tinta basta sovrascriverne una, dal tema o dal CSS personalizzato di * Elementor, senza bisogno di !important. */ /* Dichiarate su :root e non su .ewim perché su mobile la card viene spostata nel , fuori dal contenitore della mappa: lì non erediterebbe più niente e resterebbe senza fondo né ombra. */ :root { --ewim-region: #e6dcc9; --ewim-region-off: #efe9dd; --ewim-region-active: #d8a72c; --ewim-stroke: #ffffff; --ewim-stroke-width: 1.2; --ewim-card-bg: #ffffff; --ewim-card-radius: 10px; --ewim-card-width: 250px; --ewim-card-shadow: 0 10px 30px rgba(40, 32, 18, 0.18); --ewim-title-color: #2c2c2c; --ewim-line-color: #d8a72c; --ewim-transition: 0.25s ease; --ewim-max-width: 900px; } .ewim { position: relative; max-width: var(--ewim-max-width); margin-left: auto; margin-right: auto; } .ewim-map { position: relative; } .ewim-map > svg:not(.ewim-line) { display: block; width: 100%; height: auto; overflow: visible; } /* --- Regioni --- */ .ewim-region { fill: var(--ewim-region); stroke: var(--ewim-stroke); stroke-width: var(--ewim-stroke-width); stroke-linejoin: round; transition: fill var(--ewim-transition); cursor: pointer; outline: none; } .ewim-region.is-off { fill: var(--ewim-region-off); cursor: default; pointer-events: none; } .ewim-region:hover, .ewim-region.is-active { fill: var(--ewim-region-active); } /* Il focus da tastiera deve restare visibile: l'hover da solo non basta. */ .ewim-region:focus-visible { fill: var(--ewim-region-active); stroke: var(--ewim-title-color); stroke-width: 2; } /* Pallino sulla regione attiva, come nel mockup. */ .ewim-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ewim-card-bg); border: 3px solid var(--ewim-region-active); opacity: 0; pointer-events: none; transition: opacity var(--ewim-transition); } .ewim.is-open .ewim-dot { opacity: 1; } /* --- Linea tratteggiata regione → card --- */ .ewim-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity var(--ewim-transition); overflow: visible; } .ewim.is-open .ewim-line { opacity: 1; } .ewim-line line { stroke: var(--ewim-line-color); stroke-width: 2; stroke-dasharray: 5 5; } /* --- Card --- */ .ewim-cards { position: absolute; inset: 0; pointer-events: none; } .ewim-card { position: absolute; top: 0; left: 0; width: var(--ewim-card-width); max-width: 100%; padding: 14px; background: var(--ewim-card-bg); border-radius: var(--ewim-card-radius); box-shadow: var(--ewim-card-shadow); opacity: 0; transform: translateY(6px); transition: opacity var(--ewim-transition), transform var(--ewim-transition); pointer-events: none; } .ewim-card.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .ewim-card-title { margin: 0 0 10px; font-size: 15px; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ewim-title-color); } .ewim-card-media { line-height: 0; border-radius: 6px; overflow: hidden; } .ewim-card-image { display: block; width: 100%; height: auto; } /* La X serve solo sul pannello mobile. */ .ewim-card-close { display: none; position: absolute; top: 6px; right: 8px; padding: 4px 10px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ewim-title-color); cursor: pointer; } .ewim-backdrop { display: none; } /* --- Mobile: l'hover non esiste, la card diventa un pannello --- */ @media (max-width: 767px) { .ewim-backdrop { display: block; position: fixed; inset: 0; z-index: 9998; background: rgba(20, 16, 10, 0.6); } .ewim-backdrop[hidden] { display: none; } .ewim-line { display: none; } .ewim-cards { position: static; } /* Centrata nella finestra. Il JS sposta la card nel prima di aprirla: un antenato con transform trasformerebbe il position:fixed in un aggancio al contenitore, mandandola fuori schermo. */ .ewim-card { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; z-index: 9999; width: 88vw; max-width: 380px; max-height: 85vh; overflow-y: auto; padding: 22px 18px 26px; border-radius: var(--ewim-card-radius); transform: translate(-50%, -50%) scale(0.96); } .ewim-card.is-open { transform: translate(-50%, -50%) scale(1); } .ewim-card-close { display: block; } .ewim-card-title { padding-right: 40px; font-size: 18px; } } /* Chi ha chiesto meno animazioni non le riceve. */ @media (prefers-reduced-motion: reduce) { .ewim-region, .ewim-card, .ewim-line, .ewim-dot { transition: none; } }