/*
* Home = mappa a schermo intero (inc/core-app/home-map.php).
*
* Super minimal: la mappa riempie lo schermo, l'intestazione le sta sopra
* trasparente con il logo e la scritta ToBePolo, e sotto c'e' una sola riga,
* «Made in Garda per l'Italia intera». Niente ricerca (sta in Cerca), niente
* contatore; il pulsante schermo intero permette di nascondere la testata.
*/
html body.tbp-home-map #wrapper,
html body.tbp-home-map #main {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
#tbp-home-map {
position: relative;
width: 100%;
height: 100vh;
height: 100dvh;
min-height: 480px;
overflow: hidden;
isolation: isolate;
}
/* 14/9: one header ABOVE the map. Supersedes the old floating tiles. */
html body.tbp-home-map #header {
position: relative !important;
left:0;
right:0;
z-index:1002 !important;
/* viewport-fit=cover includes the iOS status bar. Reserve its actual
inset once, OUTSIDE the fixed-height normal/compact masthead rows.
The existing ResizeObserver includes this padding in map sizing. */
padding-top: env(safe-area-inset-top, 0px) !important;
padding-left: env(safe-area-inset-left, 0px) !important;
padding-right: env(safe-area-inset-right, 0px) !important;
box-sizing: border-box;
/* The fixed desktop header must mask map content while the page scrolls. */
background: var(--tbp-flag-wash, #fff) !important;
min-height: 0 !important;
box-shadow: none !important;
border-bottom: 0 !important;
}
html body.tbp-home-map #header .header-wrapper,
html body.tbp-home-map #masthead {
position: relative !important;
min-height: 0 !important;
background: transparent !important;
}
html body.tbp-home-map #header::before { display: none !important; }
html body.tbp-home-map #tbp-home-map {
height: calc(100vh - var(--tbp-home-header-h, 190px));
height: calc(100dvh - var(--tbp-home-header-h, 190px));
min-height: 0;
}
html body.tbp-home-map.tbp-map-fullscreen #tbp-home-map {
height: 100vh;
height: 100dvh;
}
/* With the header hidden, the map may be edge-to-edge but its controls
must still sit below the status bar and clear of a side notch. */
html body.tbp-home-map.tbp-map-fullscreen #tbp-map-esperienze .leaflet-top {
top: env(safe-area-inset-top, 0px);
}
/* La legenda stava a filo del bordo destro della finestra e qualche decina di
pixel sotto il bordo della mappa: sembrava messa li' a caso. Si allinea al
margine del contenuto, lo stesso della navigazione, e sale a filo del bordo
superiore della mappa (Elind, 19/9). */
html body.tbp-home-map #tbp-map-esperienze .leaflet-top.leaflet-right {
right: calc(env(safe-area-inset-right, 0px) + clamp(16px, 2vw, 32px) - 10px);
top: 0;
}
html body.tbp-home-map #tbp-map-esperienze .leaflet-top.leaflet-right .leaflet-control {
margin-top: 10px;
}
html body.tbp-home-map #header .tbp-home-map__overlay {
position: static !important;
padding: 0 !important;
margin: 0 !important;
}
html body.tbp-home-map #header .tbp-home-map__overlay-inner {
padding: 0 clamp(16px, 2vw, 32px) 14px !important;
text-align: center;
}
html body.tbp-home-map #header .tbp-home-map__claim {
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
html body.tbp-home-map #header .tbp-home-map__title {
white-space: normal !important;
}
/* Header geometry is shared with every page; map interaction never resizes the brand. */
/* La mappa del plugin, a tutto schermo. */
html body.tbp-home-map .tbp-home-map #tbp-map-wrapper.tbp-map-wrapper--page,
html body.tbp-home-map .tbp-home-map .tbp-map-frame,
html body.tbp-home-map .tbp-home-map #tbp-map-esperienze {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body.tbp-home-map .tbp-home-map #tbp-map-wrapper {
z-index: 0;
}
/* Un dito trascina la mappa: il browser non deve usarlo per scorrere. */
html body.tbp-home-map .tbp-home-map #tbp-map-esperienze {
touch-action: none !important;
}
html body.tbp-home-map .tbp-home-map #tbp-results-container[hidden],
html body.tbp-home-map .tbp-home-map .tbp-map-area-actions,
html body.tbp-home-map .tbp-home-map .tbp-map-two-finger-hint {
display: none !important;
}
/* Reuse the map plugin's reversible fullscreen control, including Escape. */
html body.tbp-home-map .tbp-home-map .tbp-map-fullscreen-btn {
display: inline-flex !important;
top: auto !important;
left: 12px !important;
right: auto !important;
bottom: var(--tbp-app-bar-reserve, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
min-height: 44px;
}
html body.tbp-home-map.tbp-map-fullscreen .tbp-home-map__overlay {
display: none !important;
}
/* A schermo intero resta solo la mappa, con i comandi a sinistra e la legenda
a destra: niente nastro dei partner, niente riga dei crediti, niente footer
che spunta sotto la barra di Safari (Elind, 19/9). I crediti tornano appena
si esce. */
html body.tbp-home-map.tbp-map-fullscreen #tbp-home-map .tbp-home-map__partner,
html body.tbp-home-map.tbp-map-fullscreen #tbp-home-map > .leaflet-control-attribution,
html body.tbp-home-map.tbp-map-fullscreen #tbp-map-esperienze .leaflet-control-attribution,
html body.tbp-home-map.tbp-map-fullscreen :is(#footer, .footer-wrapper, .tbp-mega-footer, .tbp-colombo-chat, #moove_gdpr_cookie_info_bar, .tbp-app-bar, #tbp-app-bar, .tbp-app-bar-veil) {
display: none !important;
}
/* A schermo intero sotto la barra di Safari spuntava una fascia verde: e' lo
sfondo della pagina dietro la mappa. Bianco (o notte), come la mappa. */
html:has(body.tbp-home-map.tbp-map-fullscreen) {
background: #fff !important;
}
html[data-tbp-theme="dark"]:has(body.tbp-home-map.tbp-map-fullscreen) {
background: var(--tbp-night-surface, #141414) !important;
}
/* Nel fumetto degli enti «Sito ufficiale» era scritto chiaro su oro e non si
leggeva: sull'oro il testo va scuro (Elind, 20/9). */
html body.tbp-home-map .leaflet-popup-content .tbp-btn--premium,
html body .leaflet-popup-content a.tbp-btn--premium,
html body .leaflet-popup-content button.tbp-btn--premium {
color: #1b1b1b !important;
-webkit-text-fill-color: #1b1b1b !important;
text-shadow: none !important;
}
html body.tbp-home-map.tbp-map-fullscreen,
html body.tbp-home-map.tbp-map-fullscreen #wrapper,
html body.tbp-home-map.tbp-map-fullscreen #main {
background: #fff !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map.tbp-map-fullscreen,
html[data-tbp-theme="dark"] body.tbp-home-map.tbp-map-fullscreen #wrapper,
html[data-tbp-theme="dark"] body.tbp-home-map.tbp-map-fullscreen #main {
background: var(--tbp-night-surface) !important;
}
html body.tbp-home-map.tbp-map-fullscreen .tbp-home-map .tbp-map-frame {
z-index: 0 !important;
}
html body.tbp-home-map.tbp-map-fullscreen .tbp-home-map .tbp-map-fullscreen-btn {
/* Fullscreen has no navbar: use the actual bottom edge (Elind, 14/9). */
top: auto !important;
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Una riga sola, sotto il logo. */
.tbp-home-map__overlay {
position: absolute;
top: calc(var(--tbp-home-header-h, 112px) + 6px);
left: 0;
right: 0;
z-index: 1001;
pointer-events: none;
}
.tbp-home-map__overlay-inner {
padding: 0 28px 0 var(--tbp-home-claim-left, 28px);
box-sizing: border-box;
}
html body.tbp-home-map .tbp-home-map__claim {
display: inline-block;
max-width: 100%;
padding: 8px 18px 9px;
box-sizing: border-box;
border-radius: 18px;
background: rgba(255, 255, 255, 0.82);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 4px 16px rgba(8, 72, 40, 0.12);
pointer-events: auto;
}
/* Da computer il cartiglio torna, ma pieno e stretto (Elind, 13/9).
Per mezza giornata qui non c'era niente: sopra la mappa una lastra
semitrasparente e' un alone, e l'avevo tolta. Tolta pero' lasciava il
claim come testo nudo su strade e nomi di paesi — lo stesso difetto delle
voci della testata, e la stessa cura: non la lastra larga e velata di
prima, ma un campo bianco pieno, stretto attorno alle parole.
E il claim va a capo: 360px lo spezzano in due righe invece di
stenderlo per mezzo schermo. */
@media (min-width: 850px) {
html body.tbp-home-map .tbp-home-map__claim {
max-width: 360px;
padding: 12px 18px 13px;
border-radius: 18px;
background: #FFFFFF;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 2px 10px rgba(8, 72, 40, 0.16);
}
}
html body.tbp-home-map .tbp-home-map__title {
margin: 0 !important;
padding: 0 !important;
background: none !important;
font: 800 18px/1.25 var(--tbp-font, Manrope, sans-serif) !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
color: #084828 !important;
}
html body.tbp-home-map .tbp-home-map__lede {
margin: 2px 0 0 !important;
padding: 0 !important;
font: 500 14px/1.35 var(--tbp-font, Manrope, sans-serif) !important;
color: #2e5d45 !important;
}
/* Telefono: la home e' un'app, niente scorrimento e niente footer (come /mappa/). */
@media (max-width: 849px) {
html body.tbp-home-map {
overflow: hidden !important;
overscroll-behavior: none;
}
html body.tbp-home-map #footer,
html body.tbp-home-map .footer-wrapper {
display: none !important;
}
.tbp-home-map__overlay {
top: calc(var(--tbp-home-header-h, 96px) + 6px);
}
.tbp-home-map__overlay-inner {
padding: 0 12px;
text-align: center;
}
html body.tbp-home-map .tbp-home-map__claim {
padding: 7px 14px 8px;
border-radius: 16px;
}
html body.tbp-home-map .tbp-home-map__title {
font-size: 15px !important;
}
html body.tbp-home-map .tbp-home-map__lede {
font-size: 12.5px !important;
}
}
/* ------------------------------------------------------------------------ */
/* Un solo spazio bianco, dal bordo dello schermo alla fine del claim. */
/* */
/* Erano due riquadri: la pastiglia del marchio, 72x72, e il cartiglio del */
/* claim, staccato di nove pixel e rientrato di dodici per lato. Due isole */
/* bianche sopra la mappa, con un pezzo di mappa in mezzo. Elind (13/9): «fai */
/* tutto un unico spazio bianco». */
/* */
/* Adesso la testata e' bianca e il claim ci si attacca sotto, a tutta */
/* larghezza, arrotondato solo in basso: una superficie sola. La pastiglia */
/* del marchio resta dov'e' — la scrive js/tbp-ui-lastword.js in linea con */
/* important e nessun foglio la batte — ma bianca su bianco non si vede piu'. */
/* ------------------------------------------------------------------------ */
@media (max-width: 849px) {
html body.tbp-home-map #masthead {
background: #FFFFFF !important;
}
html body.tbp-home-map .tbp-home-map__overlay {
top: var(--tbp-home-header-h, 112px);
}
html body.tbp-home-map .tbp-home-map__overlay-inner {
padding: 0;
}
html body.tbp-home-map .tbp-home-map__claim {
display: block;
width: 100%;
max-width: none;
/* Sei pixel di sovrapposizione: fra testata e claim restava una
fessura di tre in cui si vedeva la mappa, e bastava a spezzare in
due quello che deve sembrare un pezzo solo. Bianco su bianco, la
sovrapposizione non si vede. */
margin-top: -6px;
padding: 16px 18px 14px;
border-radius: 0 0 22px 22px;
background: #FFFFFF;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 6px 18px rgba(8, 72, 40, 0.12);
}
}
/* Home welcome: a compact introduction above the map, in the measured header. */
html body.tbp-home-map #header .tbp-home-map__overlay-inner {
padding: 8px 24px 22px !important;
}
html body.tbp-home-map #header .tbp-home-map__claim {
max-width: 720px;
margin: 0 auto;
}
html body.tbp-home-map #header .tbp-home-map__title {
font-size: clamp(23px, 2.4vw, 32px) !important;
line-height: 1.2 !important;
letter-spacing: -.6px !important;
text-wrap: balance;
}
html body.tbp-home-map #header .tbp-home-map__signature {
margin: 6px 0 0 !important;
font: 750 14px/1.4 var(--tbp-font, Manrope, sans-serif) !important;
color: #084828;
}
html body.tbp-home-map #header .tbp-home-map__lede {
max-width: 650px;
margin: 8px auto 0 !important;
font-size: 14px !important;
line-height: 1.5 !important;
text-wrap: pretty;
}
@media (max-width: 849px) {
html body.tbp-home-map #header .tbp-home-map__overlay-inner { padding: 4px 20px 16px !important; }
html body.tbp-home-map #header .tbp-home-map__lede { font-size: 13px !important; line-height: 1.4 !important; }
html body.tbp-home-map #header .tbp-home-map__signature { font-size: 12px !important; }
}
@layer tbp-appearance {
html[data-tbp-theme="dark"] body.tbp-home-map #header :is(.tbp-home-map__title,.tbp-home-map__signature) { color:#edf3ed !important; }
html[data-tbp-theme="dark"] body.tbp-home-map #header .tbp-home-map__lede { color:#bbc9c1 !important; }
}
/* Desktop map focus and page scrolling must not push navigation offscreen.
Reserve the measured height in main: the fixed header never covers the map.
Fullscreen still hides the header through its existing display owner. */
@media (min-width: 850px) {
html body.tbp-home-map #header {
position: fixed !important;
top: 0 !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #main {
padding-top: var(--tbp-home-header-h, 264px) !important;
}
}
/* One rectangular map viewport: no second rounded cut exposing its backdrop. */
html body.tbp-home-map main#main { border-radius: 0 !important; }
.tbp-velo-paesi { shape-rendering: geometricPrecision; }
html body.tbp-home-map .tbp-map-frame { clip-path: none !important; }
/* Home uses the complete OSM surface. The large country veil is rendered by
a separate SVG layer and can cover tiles while Leaflet is animating zoom. */
/* Retired standalone release panel; cached markup must not create a duplicate. */
html body.tbp-home-map .tbp-software-release { display: none !important; }
/* One quiet native map credit line. Scroll horizontally on small screens. */
html body.tbp-home-map #tbp-map-esperienze .leaflet-bottom.leaflet-right { width: 100%; }
html body.tbp-home-map #tbp-map-esperienze .tbp-map-attribution--software {
box-sizing: border-box;
width: max-content;
max-width: 100%;
padding: 3px 6px;
margin: 0;
border: 0;
border-radius: 0;
background: #eeeeec !important;
color: #606560 !important;
font: 400 10px/1.4 Arial, sans-serif;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
touch-action: pan-x;
scrollbar-width: thin;
pointer-events: auto;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-attribution--software :is(a, span) {
color: inherit !important; -webkit-text-fill-color: currentColor !important; font: inherit;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-attribution--software a { text-decoration: underline; }
html body.tbp-home-map #tbp-map-esperienze .tbp-map-attribution--software:focus-visible { outline: 2px solid #c9a227; outline-offset: -2px; }
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-map-esperienze .tbp-map-attribution--software { background: #292d2b !important; color: #c0c5c1 !important; }
@media (max-width: 849px) {
/* Use the measured visible navigation, not the global reserved bar height.
29/9: la barra non si riduce piu'; «.tbp-home-map» ripetuta al posto di
«:not(.tbp-app-bar-collapsed)» tiene la stessa specificita'. */
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-bottom.leaflet-right {
bottom: calc(var(--tbp-home-map-pad-bottom, 16px) - 16px);
}
html body.tbp-home-map.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-fullscreen-btn {
bottom: calc(var(--tbp-home-map-pad-bottom, 16px) + 24px + var(--tbp-nastro-h, 56px)) !important;
}
html body.tbp-home-map.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-zoom {
/* Four controls must clear the mobile AI Colombo launcher. */
bottom: calc(var(--tbp-home-map-pad-bottom, 16px) + 124px + var(--tbp-nastro-h, 56px));
}
html body.tbp-home-map.tbp-map-fullscreen #tbp-home-map .tbp-map-fullscreen-btn {
bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
}
html body.tbp-home-map.tbp-map-fullscreen #tbp-home-map .tbp-map-zoom {
bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
}
/* The map controls sit immediately above the attribution line. The previous
reserve was the full app bar plus an extra launcher offset, which lifted the
row over the centre of the map on phones. */
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-zoom {
bottom: calc(var(--tbp-home-map-pad-bottom, 16px) + 24px + var(--tbp-nastro-h, 62px)) !important;
/* Keep the complete row readable when the Colombo launcher reaches the
same lower corner; its position and artwork remain unchanged. */
z-index: 100001 !important;
}
@media (max-width: 849px) {
/* Leave the Colombo launcher in its own clear space above the controls.
This only changes the mobile home offset; the launcher artwork and
interactions are untouched. */
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat {
bottom: calc(var(--tbp-app-bar-reserve, 134px) + 76px) !important;
}
}
/* Home gives priority to the map: logo, signature, welcome, then navigation. */
html body.tbp-home-map #header #masthead {
padding: 4px 0 6px !important;
margin: 0 !important;
}
html body.tbp-home-map #header #masthead .tbp-header-inner {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
gap: 0 !important;
}
html body.tbp-home-map #header #masthead .tbp-header-brandline {
padding: 0 12px 2px !important;
}
html body.tbp-home-map #header .tbp-home-map__overlay-inner {
padding: 2px 16px 6px !important;
}
html body.tbp-home-map #header .tbp-home-map__claim { max-width: 1000px; }
html body.tbp-home-map #header .tbp-home-map__title {
font-size: 23px !important;
line-height: 1.2 !important;
}
html body.tbp-home-map #header .tbp-home-map__lede {
max-width: 1000px;
margin: 3px auto 0 !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
@media (min-width: 850px) {
html body.tbp-home-map #header #masthead #logo {
--tbp-header-brand-mark: 56px;
--tbp-header-wordmark-size: 28px;
}
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot {
width: max-content !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 8px !important;
gap: 6px !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav {
padding: 2px !important;
margin: 0 !important;
gap: 5px !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item {
min-width: 62px !important;
padding: 3px 8px 6px !important;
border-radius: 14px;
/* 1/10 (mappa ferma): lo stesso spazio fra icona e scritta che mette lo
stile «tbp-nav-icon-balance», stampato in fondo alla pagina
(inc/staging4-internal-surfaces.php). Arrivava dopo il primo disegno:
la riga cresceva di 4 px, la testata anche, e la mappa scendeva sotto
gli occhi. Qui c'e' dal primo disegno; quando arriva quello, niente cambia. */
row-gap: 4px !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-lava-icon {
--tbp-icon: 32px;
margin: 0 !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__label {
margin-top: 2px !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
}
@media (max-width: 849px) {
html body.tbp-home-map #header .tbp-home-map__title { font-size: 20px !important; }
html body.tbp-home-map #header .tbp-home-map__lede { font-size: 12px !important; }
}
@layer tbp-appearance {
html body.tbp-home-map #header #masthead .tbp-header-brandline {
padding: 0 12px 2px !important;
}
}
/* Il nastro degli enti sta fra i comandi della mappa e la riga dei crediti
(Elind, 19/9): striscia bianca a tutta larghezza, appoggiata sopra
l'attribuzione. I comandi salgono di altrettanto, altrimenti ci finiscono
sotto: --tbp-nastro-h e' la misura condivisa. */
/* 1/10 (mappa ferma): i crediti dal computer stanno su una riga (31,5 px,
lo script dei crediti in home-map.php scrive 32 px). Il vecchio 60 px
(tre righe) valeva fino all'arrivo dello script: la mappa nasceva 28 px
piu' bassa e poi si allungava sotto gli occhi. */
html body.tbp-home-map { --tbp-nastro-h: 62px; --tbp-crediti-h: 32px; }
html body.tbp-home-map #tbp-home-map .tbp-home-map__partner {
position: absolute;
left: 0;
right: 0;
bottom: calc(var(--tbp-crediti-bottom, var(--tbp-home-map-pad-bottom, 16px)) + var(--tbp-crediti-h, 48px));
height: var(--tbp-nastro-h);
display: flex;
align-items: center;
z-index: 402;
background: #fff;
border-top: 1px solid #e6ece8;
pointer-events: auto;
}
html body.tbp-home-map #tbp-home-map .tbp-home-map__partner .tbp-partner-nastro {
margin: 0;
padding: 0;
width: 100%;
}
/* Aria dentro la striscia: il titolo respira sopra, gli stemmi sotto, e la
riga dei crediti non sta appiccicata al bordo (Elind, 19/9). */
html body.tbp-home-map #tbp-home-map .tbp-home-map__partner {
padding: 6px 0 4px;
}
/* Titolo del nastro al centro e scritto normale, non tutto in maiuscolo
(Elind, 19/9). */
html body.tbp-home-map #tbp-home-map .tbp-home-map__partner .tbp-partner-nastro__titolo {
margin: 0 0 4px;
padding: 0 12px;
text-align: center;
text-transform: none;
letter-spacing: 0.01em;
font-size: 0.75rem;
font-weight: 600;
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
padding: 6px 10px 4px;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map .tbp-home-map__partner {
background: var(--tbp-night-surface) !important;
border-top-color: var(--tbp-night-line);
}
/* Il nastro e le sue tessere seguono il tema, non restano bianchi. */
html[data-tbp-theme="dark"] body.tbp-home-map .tbp-home-map__partner :is(.tbp-partner-nastro, .tbp-partner-nastro__voce) {
background: transparent !important;
color: var(--tbp-night-text) !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map .tbp-home-map__partner .tbp-partner-nastro__titolo {
color: var(--tbp-night-muted) !important;
}
@media (max-width: 849px) {
/* Sul telefono i crediti vanno a capo su due righe: il nastro deve salire
di altrettanto, o ci finisce sopra (Elind, 19/9). */
/* Tre righe di crediti a corpo 10,5: questa e' la misura vera, e il nastro
e la mappa si regolano su di lei. */
/* Lo spazio dei crediti e' quello che occupano davvero, due righe a corpo
10,5: di piu' lasciava un buco fra loro e il nastro (Elind, 19/9). */
/* Una riga sola: senza ISTAT e senza «produttore e proprietario», che sul
telefono non ci stanno, e con il corpo che segue la larghezza dello
schermo (9,2 px a 375, 10,5 da 428 in su). Sotto i 340 px va a capo
invece di tagliarsi (Elind, 19/9). */
html body.tbp-home-map { --tbp-nastro-h: 54px; --tbp-crediti-h: 22px; }
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
font-size: clamp(8.5px, 2.45vw, 10.5px);
line-height: 1.3;
padding: 3px 8px;
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution .tbp-map-producer-role {
display: none;
}
}
/* I comandi della mappa stanno in colonna sul fianco sinistro, non più in
fila sotto la penisola: così la mappa si prende tutta l'altezza e l'Italia
resta intera (Elind, 19/9). */
html body.tbp-home-map #tbp-home-map .tbp-map-zoom {
left: 12px;
right: auto;
top: 12px;
bottom: auto !important;
transform: none;
grid-template-columns: auto !important;
grid-auto-flow: row;
justify-items: start;
/* Le righe restavano alte quanto lo spazio disponibile (80 px per un
bottone da 40) perche' una griglia con altezza imposta stira le righe:
qui stanno appiccicate in cima, alte quanto il contenuto. */
align-content: start;
grid-auto-rows: max-content;
height: auto !important;
width: auto !important;
max-width: 46vw;
gap: 4px !important;
}
/* Il tema lascia un margine sotto a ogni bottone: in fila non si vedeva, in
colonna diventava un buco di quasi trenta punti fra un comando e l'altro
(Elind su iPhone 13 Pro Max, 19/9). */
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > * {
margin: 0 !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-zoom :is(.tbp-map-locate, .tbp-map-reset) {
width: auto !important;
min-width: 44px;
padding: 0 12px !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-location-status {
bottom: auto;
top: calc(100% + 8px);
}
/* Legenda e comandi della mappa erano due bianchi diversi, con bordi e raggi
diversi: stesso fondo, stesso bordo, stesso raggio e stessa ombra per tutti
(Elind, 19/9). */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend,
html body.tbp-home-map #tbp-home-map .tbp-map-zoom button,
html body.tbp-home-map #tbp-home-map .tbp-map-fullscreen-btn {
background: #fff !important;
color: #084828 !important;
border: 1px solid #c4d1c9 !important;
border-radius: 14px !important;
box-shadow: 0 2px 10px rgb(8 72 40 / 10%) !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-map-esperienze .tbp-map-legend,
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map .tbp-map-zoom button,
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map .tbp-map-fullscreen-btn {
background: var(--tbp-night-surface) !important;
color: var(--tbp-night-text) !important;
border-color: var(--tbp-night-line) !important;
}
/* Sul telefono la riga dei crediti andava a scorrere di lato: qui va a capo e
resta dentro la larghezza dello schermo (Elind, 19/9). */
@media (max-width: 849px) {
html body.tbp-home-map #tbp-map-esperienze .tbp-map-attribution--software {
white-space: normal !important;
overflow-x: visible !important;
line-height: 1.35;
padding: 4px 10px;
text-align: center;
}
}
/* La mappa smette di farsi coprire: si accorcia di quanto occupano nastro e
crediti, che ora le stanno davvero sotto invece che addosso. I comandi
restano dentro la mappa, in colonna, e non finiscono più tagliati dal
nastro (Elind, 19/9). */
/* Una formula sola per il fondo della Home: sopra la barra dell'app stanno i
crediti, sopra di loro il nastro, e la mappa prende tutto quello che resta.
Prima ognuno dei tre si ancorava a modo suo e finivano uno sull'altro. */
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze {
height: calc(100% - var(--tbp-crediti-bottom, var(--tbp-home-map-pad-bottom, 16px)) - var(--tbp-nastro-h, 56px) - var(--tbp-crediti-h, 48px)) !important;
}
/* Fuori dalla mappa, la riga dei crediti si ancora al fondo del contenitore
come il nastro: sopra la barra dell'app, sotto il nastro. */
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
position: absolute;
left: 0;
right: 0;
bottom: var(--tbp-crediti-bottom, var(--tbp-home-map-pad-bottom, 16px));
margin: 0;
z-index: 402;
text-align: center;
}
html body.tbp-home-map #tbp-home-map { overflow: visible; }
/* Comandi più piccoli: cinque in colonna devono starci senza toccare il fondo. */
@media (max-width: 849px) {
html body.tbp-home-map #tbp-home-map .tbp-map-zoom button {
width: 40px; min-width: 40px; height: 40px; min-height: 40px;
border-radius: 12px !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-zoom :is(.tbp-map-locate, .tbp-map-reset) {
height: 40px; min-height: 40px; font-size: 12px;
}
}
/* Con una scheda aperta, sul telefono, colonna dei comandi e legenda si fanno
da parte: la scheda e' larga quasi quanto la mappa e ci finiva sotto
(Elind, 19/9). Tornano appena la scheda si chiude. */
@media (max-width: 849px) {
html body.tbp-home-map #tbp-home-map .tbp-map-frame.tbp-map-has-popup .tbp-map-zoom,
html body.tbp-home-map #tbp-home-map .tbp-map-frame.tbp-map-has-popup .tbp-map-legend {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity .15s ease, visibility 0s linear .15s;
}
}
/* La Home non scorre: sotto la barra non passa niente, quindi la nebbia che
sfuma il contenuto attorno alla barra qui non serve e sbiadiva la riga dei
crediti (Elind, 19/9). Solo sulla Home; a schermo intero la barra non c'e'. */
html body.tbp-home-map .tbp-app-bar-veil {
display: none !important;
}
/* L'alone vero era questo: la barra stende sopra di se', per 18 px, una
sfocatura di 6 px (tbp-app-bar.css, ::before con backdrop-filter e maschera
a sfumare). Serve dove il contenuto le scorre sotto; sulla Home cadeva sulla
riga dei crediti e la rendeva lattiginosa. Misurato: crediti 557-576, barra
da 582, sfocatura da 564. */
html body.tbp-home-map .tbp-app-bar::before {
content: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* Sul telefono AI Colombo sta a sinistra, sotto «Posizione»: in basso a destra
copriva Puglia e Calabria (Elind, 19/9). Vale finche' la chat e' chiusa; il
saluto, se arriva, si apre sotto di lui. La posizione la misura lo script
della Home sulla colonna dei comandi. */
@media (max-width: 849px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) {
left: var(--tbp-colombo-left, 12px) !important;
right: auto !important;
top: var(--tbp-colombo-top, 60vh) !important;
bottom: auto !important;
align-items: flex-start !important;
flex-direction: column-reverse !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__launcher {
width: 84px;
gap: 2px;
padding: 6px 4px 6px !important;
border-radius: 18px !important;
box-shadow: 0 4px 14px rgba(8, 72, 40, 0.16);
}
/* Il volto e' il bottone: grande, senza l'anello che gli rubava meta' dello
spazio (Elind, 19/9). */
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__launcher .tbp-colombo-chat__avatar {
width: 56px;
height: 56px;
padding: 2px;
border: 0;
background: transparent;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__launcher-name {
font-size: 0.68rem;
line-height: 1.1;
}
}
/* Nastro e crediti restano invisibili finche' lo script non li ha messi al
loro posto e misurati (classe tbp-home-misurata), poi entrano insieme. Senza
questo, a ogni caricamento si vedevano tre posizioni diverse in mezzo secondo. */
html body.tbp-home-map:not(.tbp-home-misurata) #tbp-home-map .tbp-home-map__partner,
html body.tbp-home-map:not(.tbp-home-misurata) #tbp-home-map .leaflet-control-attribution {
visibility: hidden !important;
}
@media (prefers-reduced-motion: no-preference) {
html body.tbp-home-map.tbp-home-misurata #tbp-home-map .tbp-home-map__partner,
html body.tbp-home-map.tbp-home-misurata #tbp-home-map > .leaflet-control-attribution {
animation: tbp-home-fondo-entra .25s ease both;
}
@keyframes tbp-home-fondo-entra { from { opacity: 0; } to { opacity: 1; } }
}
/* Schermo intero sul telefono: solo l'Italia. I comandi lasciano l'angolo in
alto a sinistra e scendono in una riga al centro, in fondo; la legenda resta
in alto a destra (Elind, 19/9). */
@media (max-width: 849px) {
html body.tbp-home-map.tbp-map-fullscreen #tbp-home-map .tbp-map-zoom {
top: auto !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
grid-auto-flow: column !important;
grid-template-columns: none !important;
grid-auto-columns: max-content;
align-items: center;
width: max-content !important;
max-width: calc(100% - 16px);
}
}
/* Il residuo verde in fondo era lo sfondo della pagina (html), che Safari
mostra sotto la sua barra: a schermo intero diventa bianco, o nero col tema
scuro. */
html:has(body.tbp-home-map.tbp-map-fullscreen) {
background: #fff !important;
}
html[data-tbp-theme="dark"]:has(body.tbp-home-map.tbp-map-fullscreen) {
background: var(--tbp-night-surface, #141414) !important;
}
/* Telefono: marchio al centro della riga e aria fra marchio, firma, titolo,
sottotitolo e mappa (Elind, 22/9: «e' tutto disallineato, lascia un po'
piu' di spazio»). Le due colonne ai lati del marchio si dividono lo spazio
in parti uguali, cosi' il marchio sta al centro su qualunque larghezza e il
menu resta a destra. Nel layer perche' la firma ha gia' i suoi padding li'
e, fra dichiarazioni !important, il layer vince su quelle fuori. */
@layer tbp-appearance {
@media (max-width: 849px) {
html body #masthead.header-main .header-inner.tbp-header-inner {
justify-content: space-between !important;
}
html body #masthead.header-main .header-inner.tbp-header-inner > .flex-col.flex-left,
html body #masthead.header-main .header-inner.tbp-header-inner > .flex-col.flex-right {
display: flex !important;
align-items: center !important;
flex: 1 1 0 !important;
min-width: 0 !important;
}
html body #masthead.header-main .header-inner.tbp-header-inner > .flex-col.flex-right {
justify-content: flex-end !important;
}
html body #masthead.header-main .header-inner.tbp-header-inner > .flex-col.logo {
flex: 0 0 auto !important;
margin: 0 !important;
}
html body #masthead.header-main .tbp-header-brandline {
margin-top: 10px !important;
}
html body.tbp-home-map #header #masthead.header-main .tbp-header-brandline {
padding-bottom: 4px !important;
}
html body.tbp-home-map #header .tbp-home-map__overlay-inner {
padding: 8px 16px 14px !important;
}
html body.tbp-home-map #header .tbp-home-map__lede {
margin-top: 6px !important;
}
}
@media (min-width: 850px) {
html body #masthead.header-main .tbp-header-brandline {
margin-top: 6px !important;
}
}
}
/* Il velo su Safari iPhone scivolava di lato (Elind, 22/9: «si vede il
Tirreno»). Causa: la regola globale del tema `img, video, iframe, svg
{ max-width: 100% }` (tobepolo-italia-rebrand.css) si applica anche all'SVG
che Leaflet disegna sopra la mappa, largo il doppio della mappa per il
padding: WebKit lo stringe e l'SVG, che conserva le proporzioni, si sposta
verso il centro. Il leaflet.css che carichiamo non contiene la regola con
cui Leaflet si difende da questi reset; eccola. Vale anche per le tessere. */
html body .leaflet-container .leaflet-overlay-pane svg,
html body .leaflet-container .leaflet-overlay-pane canvas {
max-width: none !important;
max-height: none !important;
}
html body .leaflet-container .leaflet-tile,
html body .leaflet-container img.leaflet-image-layer,
html body .leaflet-container .leaflet-marker-icon {
max-width: none !important;
max-height: none !important;
}
/* 22/9 notte (Elind, D65 bis): i crediti OpenStreetMap lasciano la riga sotto il nastro e
diventano una pastiglia nell'angolo in basso a destra della mappa, come su ogni mappa
web; il nastro degli enti scende ad appoggiarsi alla barra e diventa vetro: traslucido e
sfocato sulla mappa, cosi' il blocco nastro + barra e' un'unica superficie «liquid glass».
L'alone della barra resta spento in home: sfocherebbe gli stemmi degli enti.
Il fondo del nastro non dipende piu' da --tbp-home-map-pad-bottom (che il JS misura
proprio dal nastro: era un cerchio) ma dall'altezza della barra. Nel layer del tema
perche' le sue regole scure sono !important nel layer e vincerebbero. */
@layer tbp-appearance {
@media (max-width: 849px) {
html body.tbp-home-map {
--tbp-crediti-h: 0px;
/* 1/10 (mappa ferma): 2 px meno di prima, cioe' 6 px sopra la barra,
come lo misura lo script dei crediti (home-map.php). Prima il CSS
diceva 8, lo script 6: dopo il primo disegno la mappa si allungava
di 3 px e l'Italia si spostava. Ora lo script tiene questo numero se
la barra e' dove deve essere (entro 4 px). */
--tbp-crediti-bottom: calc(var(--tbp-app-bar-h, 96px) + env(safe-area-inset-bottom, 0px) - 2px);
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
position: absolute !important;
left: auto !important;
right: 8px !important;
bottom: calc(var(--tbp-crediti-bottom) + var(--tbp-nastro-h, 54px) + 8px) !important;
width: auto !important;
max-width: 78vw !important;
margin: 0 !important;
padding: 3px 8px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, .82) !important;
color: #1f4a37 !important;
font-size: clamp(8.5px, 2.3vw, 10px) !important;
line-height: 1.25 !important;
text-align: right !important;
white-space: normal !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, .18) !important;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
z-index: 401 !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
background: rgba(18, 26, 24, .78) !important;
color: var(--tbp-night-text) !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map > .leaflet-control-attribution a { color: #cfe6d8 !important; }
html body.tbp-home-map #tbp-home-map .tbp-home-map__partner {
bottom: var(--tbp-crediti-bottom) !important;
background: rgba(255, 255, 255, .78) !important;
border-top: 1px solid rgba(255, 255, 255, .6) !important;
-webkit-backdrop-filter: blur(24px) saturate(160%) !important;
backdrop-filter: blur(24px) saturate(160%) !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map .tbp-home-map__partner {
background: rgba(29, 41, 37, .78) !important;
border-top-color: rgba(74, 98, 86, .8) !important;
}
}
}
/* Tema scuro: sotto la mappa restava una fascia color crema (lo sfondo chiaro della cornice
della mappa, visibile fra il nastro e il piede). Segue il fondo notte. */
@layer tbp-appearance {
html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body.tbp-home-map #tbp-home-map .tbp-map-frame {
background: #121a18 !important;
}
}
/* ==========================================================================
23/9 (Elind, video su iPhone e screenshot): crediti su una riga, comandi
della mappa con icone e legenda nella colonna dei comandi su computer.
Nel layer del tema: le regole scure sono !important nel layer e vincono
su quelle fuori.
========================================================================== */
@layer tbp-appearance {
/* --- Crediti: una riga sola, separati da virgole ----------------------- */
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution.tbp-crediti-stretti .tbp-map-software-credit {
display: none !important;
}
@media (max-width: 849px) {
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
max-width: calc(100% - 16px) !important;
line-height: 1.3 !important;
}
}
/* Su computer la riga era trasparente: nel tema «ToBePolo» finiva sul fondo
scuro della cornice, grigio su nero, illeggibile. Ora ha il suo fondo. */
@media (min-width: 850px) {
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
box-sizing: border-box !important;
padding: 6px 16px !important;
background: #fff !important;
border-top: 1px solid rgba(8, 72, 40, .12) !important;
color: #3d5a4b !important;
-webkit-text-fill-color: #3d5a4b !important;
font: 500 12px/1.4 Manrope, "DM Sans", sans-serif !important;
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution :is(a, span) {
color: inherit !important;
-webkit-text-fill-color: currentColor !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
background: var(--tbp-night-surface, #141414) !important;
border-top-color: var(--tbp-night-line, #333) !important;
color: #c0c5c1 !important;
-webkit-text-fill-color: #c0c5c1 !important;
}
}
/* --- Telefono: la legenda ha la stessa altezza e lo stesso raggio dei
comandi della colonna (era 44 px e 14 contro 40 e 12). ------------- */
@media (max-width: 849px) {
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend {
border-radius: 12px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend summary {
min-height: 40px !important;
padding: 10px 14px !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-zoom :is(.tbp-map-locate, .tbp-map-reset) {
min-width: 88px !important;
justify-content: center !important;
text-align: center !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-ctl-icon { display: none !important; }
}
/* --- Computer: colonna ordinata, tutti i bottoni alti 44, stesso bordo,
raggio e carattere; icone dal set del tema (assets/icons/flat). ----- */
@media (min-width: 850px) {
html body.tbp-home-map #tbp-home-map .tbp-map-zoom {
gap: 6px !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > :is(.tbp-map-fullscreen-btn, .tbp-map-reset, .tbp-map-locate, .tbp-map-legend) {
justify-self: stretch !important;
width: auto !important;
box-sizing: border-box !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > :is(.tbp-map-fullscreen-btn, .tbp-map-reset, .tbp-map-locate),
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend > summary {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 16px 0 12px !important;
font: 600 14px/1 Manrope, "DM Sans", sans-serif !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: nowrap !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-fullscreen-btn {
position: static !important;
}
/* Stesse icone per i quattro bottoni: anche «Schermo Intero» passa
dal glifo disegnato in CSS all'icona del set, cosi' sono sorelle. */
html body.tbp-home-map #tbp-home-map .tbp-map-zoom .tbp-map-ctl-icon,
html body.tbp-home-map #tbp-home-map .tbp-map-zoom .tbp-map-fullscreen-btn__icon {
display: block !important;
flex: 0 0 22px !important;
width: 22px !important;
height: 22px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 6px !important;
-webkit-mask: none !important;
mask: none !important;
background: transparent center / 20px 20px no-repeat !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-zoom .tbp-map-fullscreen-btn__icon { background-image: url("../assets/icons/flat/128/fullscreen.png") !important; }
html body.tbp-home-map #tbp-home-map .tbp-map-zoom .tbp-map-ctl-icon--centra { background-image: url("../assets/icons/flat/128/location-current.png") !important; }
html body.tbp-home-map #tbp-home-map .tbp-map-zoom .tbp-map-ctl-icon--posizione { background-image: url("../assets/icons/flat/128/location.png") !important; }
html body.tbp-home-map #tbp-home-map .tbp-map-zoom .tbp-map-ctl-icon--legenda { background-image: url("../assets/icons/flat/128/map-layers.png") !important; }
/* Tema scuro: le icone verdi sul fondo notte non si vedrebbero; stanno
su un tassello chiaro, come il marchio sul fondo scuro. */
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map .tbp-map-zoom :is(.tbp-map-ctl-icon, .tbp-map-fullscreen-btn__icon) {
background-color: #f4f7f5 !important;
background-size: 16px 16px !important;
}
/* Legenda nella colonna: stesso fondo, bordo, raggio e ombra dei bottoni. */
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
max-height: none !important;
overflow: visible !important;
background: #faf9f5 !important;
color: #084828 !important;
border: 1px solid #c4d1c9 !important;
border-radius: 14px !important;
box-shadow: 0 2px 10px rgb(8 72 40 / 15%) !important;
}
/* 44 px in tutto, bordo compreso, come gli altri bottoni. */
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend > summary {
height: 42px !important;
min-height: 42px !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend > summary {
list-style: none !important;
cursor: pointer;
border-radius: 13px !important;
color: inherit !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend > summary::-webkit-details-marker { display: none; }
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend > summary::after { content: none !important; display: none !important; }
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend > summary:focus-visible { outline: 3px solid #c9962f !important; outline-offset: 2px; }
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend[open] > summary { background: #f4f7f5 !important; }
/* Il pannello si apre di lato, sopra la mappa: la colonna non si muove. */
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend .tbp-map-legend__pannello {
position: absolute !important;
top: 0 !important;
left: calc(100% + 8px) !important;
width: 248px !important;
box-sizing: border-box !important;
padding: 14px 0 0 !important;
background: #faf9f5 !important;
color: #084828 !important;
border: 1px solid #c4d1c9 !important;
border-radius: 14px !important;
box-shadow: 0 6px 22px rgb(8 72 40 / 16%) !important;
font: 500 13px/1.35 Manrope, "DM Sans", sans-serif !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend .tbp-map-legend__pannello ul { margin: 0 !important; padding: 0 14px !important; list-style: none !important; }
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend .tbp-map-legend__pannello li { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 10px !important; font-size: 13px !important; line-height: 1.3 !important; color: inherit !important; }
html body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend .tbp-map-legend__pannello p { margin: 0 !important; padding: 2px 14px 14px !important; font-size: 12px !important; line-height: 1.4 !important; color: #3d5a4b !important; -webkit-text-fill-color: #3d5a4b !important; }
/* Nel tema «ToBePolo» i bottoni sono bianchi pieni: la legenda anche. */
html[data-tbp-theme="tobepolo"] body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend,
html[data-tbp-theme="tobepolo"] body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend .tbp-map-legend__pannello {
background: #fff !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend,
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend .tbp-map-legend__pannello {
background: var(--tbp-night-surface, #141414) !important;
color: var(--tbp-night-text, #ededed) !important;
border-color: var(--tbp-night-line, #333) !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend[open] > summary { background: #1e1e1e !important; }
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map .tbp-map-zoom > .tbp-map-legend .tbp-map-legend__pannello :is(li, li > span:not(.tbp-map-legend-icon), p) {
color: var(--tbp-night-text, #ededed) !important;
-webkit-text-fill-color: var(--tbp-night-text, #ededed) !important;
}
}
}
/* 23/9 (CEO, «ma ti pare normale?»): sul telefono Colombo sta a sinistra e la
nuvoletta si apriva sotto di lui, sopra il nastro e la barra, con la codina
che puntava in basso a destra, verso il nulla. Ora si apre accanto a lui,
alla sua destra, centrata sul volto, con la codina che lo indica e la ×
nell'angolo lontano dalla sua. */
@media (max-width: 849px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) {
flex-direction: row-reverse !important;
align-items: center !important;
gap: 16px !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__teaser {
max-width: calc(100vw - var(--tbp-colombo-left, 12px) - 108px - 16px - 16px) !important;
transform-origin: -14px 50% !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__teaser::after {
right: auto !important;
bottom: auto !important;
left: -13px !important;
top: 50% !important;
width: 16px !important;
height: 24px !important;
transform: translateY(-50%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath fill='%23fff' d='M16 0v24C12 19 7 14.5 0 12 7 9.5 12 5 16 0z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100% !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) button.tbp-colombo-chat__teaser-close {
left: auto !important;
right: -9px !important;
}
}
/* 24/9 (Elind, «Solo il volto dopo il saluto»): dopo il saluto Colombo resta
un tondo sotto «Posizione», largo quanto i bottoni della mappa. */
@media (max-width: 849px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat.is-mini:not(.is-open) .tbp-colombo-chat__launcher {
width: 44px !important;
height: 44px !important;
gap: 0 !important;
padding: 2px !important;
border-radius: 50% !important;
box-shadow: 0 3px 10px rgba(8, 72, 40, 0.2), 0 0 0 1px rgba(8, 72, 40, 0.08) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat.is-mini:not(.is-open) .tbp-colombo-chat__launcher .tbp-colombo-chat__avatar {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
}
}
/* === Mappe 29/9: segnaposto della mappa in home (inizio) ===
* Prima che Leaflet arrivi (su telefono in 4G, ~5 s) il riquadro della mappa
* era vuoto. Ora c'e' la sagoma ferma dell'Italia, disegnata dal contorno del
* velo (tbp-work/strumenti/italia-segnaposto-svg.js). Quando Leaflet nasce il
* contenitore prende .leaflet-container e la sagoma sparisce: da li' e' il
* velo stesso a disegnare l'Italia, e finche' le tessere non ci sono il buco
* del velo si riempie di un colore terra (.tbp-tessere-pronte arriva da
* tbp-mappa-paesi.js alla prima tessera; !important perche' il tema chiaro
* impone #fff al contenitore e il buco del velo restava bianco su bianco). Solo sfondi: nessuna
* misura cambia, la correzione del collasso (measure()) non e' toccata. */
html body.tbp-home-map #tbp-map-esperienze:not(.leaflet-container) {
background: url("data:image/svg+xml,") var(--tbp-sagoma-pos, center) / var(--tbp-sagoma-size, contain) no-repeat;
}
/* 1/10 (CEO: «la mappa deve essere ferma quando atterri sulla pagina»).
* La sagoma sta dove sara' l'Italia di Leaflet: posizione e misura le calcola
* lo script subito dopo la mappa (inc/core-app/home-map.php,
* tbp_home_map_sagoma_script) con la stessa formula della mappa
* (mappa-archivio.js, vistaCasa). Quando arriva Leaflet l'Italia e' gia' li':
* arrivano solo le tessere. Senza lo script (o se la mappa non ha ancora una
* misura) la sagoma non si disegna: meglio un riquadro fermo che un'Italia
* che salta. */
html body.tbp-home-map #tbp-map-esperienze:not(.leaflet-container):not([data-tbp-sagoma]) {
background-image: none !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-map-esperienze:not(.leaflet-container) {
background-image: url("data:image/svg+xml,");
}
/* Nello stesso layer del tema: un !important fuori dai layer perde contro
* quello di tbp-appearance.css, che dipinge #fff il contenitore. */
@layer tbp-appearance {
html body.tbp-home-map #tbp-map-esperienze.leaflet-container:not(.tbp-tessere-pronte) {
background-color: #eef0ea !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-map-esperienze.leaflet-container:not(.tbp-tessere-pronte) {
background-color: #1c2622 !important;
}
}
/* === Mappe 29/9: segnaposto della mappa in home (fine) === */
/* === 1/10: l'Italia di base sotto le tessere (kit mappa-sempre-1-10) ===
* CEO dall'iPhone: «come mai la mappa sparisce? fai si' che non sparisca mai».
* js/tbp-mappa-sempre.js disegna l'Italia in un piano sotto le tessere: se le
* tessere non arrivano (rete, OpenStreetMap che rifiuta), al posto del bianco
* resta questa. Stessi colori della sagoma qui sopra, quella che si vede prima
* di Leaflet: chi guarda vede la stessa Italia, ferma e poi geografica. Con le
* tessere e' coperta e non si vede. Il filo segue la costa a 1 px anche
* mentre lo zoom anima la mappa. */
html body .leaflet-container path.tbp-italia-base {
fill: #eef0ea;
fill-opacity: 1;
stroke: #c5ccc6;
stroke-width: 1px;
stroke-opacity: 1;
vector-effect: non-scaling-stroke;
}
/* Come per il velo (22/9): la regola del tema «svg { max-width: 100% }» lo
stringerebbe a 0 px nel suo piano. */
html body .leaflet-container .leaflet-tbpItaliaBase-pane svg {
max-width: none !important;
max-height: none !important;
}
html[data-tbp-theme="dark"] body .leaflet-container path.tbp-italia-base {
fill: #1c2622;
stroke: #34433c;
}
/* === 1/10: l'Italia di base (fine) === */
/* === 1/10: crediti interi anche a 320 px (kit mappa-sempre-1-10) ===
* A 320 px (iPhone SE prima serie) la pastiglia ha 184 px accanto al bottone
* «Legenda» e «© OpenStreetMap · © 2026 ToBePolo» ne vuole 211: finiva in
* «© 2026 To…». Sotto i 360 px la riga diventa «© OSM · © ToBePolo»: il link a
* OpenStreetMap resta (e si legge «OpenStreetMap», aria-label), l'anno e il
* nome lungo tornano da 360 px in su. Dal computer niente cambia. */
html body .leaflet-control-attribution .tbp-map-osm-sigla { display: none; }
@layer tbp-appearance {
@media (max-width: 359px) {
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution :is(.tbp-map-osm-nome, .tbp-map-anno) { display: none !important; }
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution .tbp-map-osm-sigla { display: inline !important; }
}
}
/* === 1/10: crediti a 320 px (fine) === */
/* ------------------------------------------------------------------------ */
/* La riga dell'invito, sotto «Insegna e impara i mestieri piu' belli */
/* d'Italia» (CEO, 29/9 sera, dalla segnalazione di Alessia: chi arriva per */
/* la prima volta vede la mappa senza sapere che cos'e' ToBePolo). Una frase */
/* su che cosa si fa e due bottoni; la mappa resta la prima cosa, quindi la */
/* riga e' corta: sul telefono la frase va su due righe brevi e i bottoni */
/* stanno affiancati; dal computer frase e bottoni su una riga sola. */
/* L'HTML la stampa gia' nell'intestazione (inc/core-app/home-map.php): la */
/* misura dell'intestazione la comprende, e la mappa prende il resto. */
/* */
/* L'oro e' quello dei bottoni del sito con il testo verde #084828, ma schiarito */
/* in fondo: con il gradiente pieno (#F0BE00 -> #A8821C) il verde sulla parte */
/* scura scende a 2,4:1. Qui #F3C300 -> #D8A614 tiene almeno 4,7:1 ovunque. */
/* ------------------------------------------------------------------------ */
html body.tbp-home-map #header .tbp-home-map__invito {
margin: 8px auto 0;
padding: 0;
max-width: 1000px;
text-align: center;
}
html body.tbp-home-map #header .tbp-home-map__frase {
margin: 0 !important;
padding: 0 !important;
font: 600 13px/1.35 var(--tbp-font, Manrope, sans-serif) !important;
letter-spacing: 0 !important;
color: #1d4731 !important;
}
/* Si va a capo fra i due pezzi della frase, non dentro. */
html body.tbp-home-map #header .tbp-home-map__frase-pezzo {
display: inline-block;
max-width: 100%;
}
html body.tbp-home-map #header .tbp-home-map__azioni {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin: 8px 0 0 !important;
padding: 0 !important;
}
html body.tbp-home-map #header .tbp-home-map__azione {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 36px;
margin: 0;
padding: 0 18px;
border-radius: 999px;
font: 750 13.5px/1.1 var(--tbp-font, Manrope, sans-serif) !important;
letter-spacing: 0 !important;
text-decoration: none !important;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: filter .16s ease, background-color .16s ease;
}
/* Il dito prende 44 px di altezza anche dove il bottone e' piu' basso. */
html body.tbp-home-map #header .tbp-home-map__azione::before {
content: "";
position: absolute;
inset: -5px -4px;
}
html body.tbp-home-map #header .tbp-home-map__azione--oro {
border: 0 !important;
background-color: #E4B50A !important;
background-image: linear-gradient(135deg, #F3C300 0%, #D8A614 100%) !important;
box-shadow: 0 1px 2px rgba(8, 72, 40, .2);
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
}
html body.tbp-home-map #header .tbp-home-map__azione--contorno {
border: 1.5px solid #084828 !important;
background: #FFFFFF !important;
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
}
@media (hover: hover) {
html body.tbp-home-map #header .tbp-home-map__azione--oro:hover { filter: brightness(1.05); }
html body.tbp-home-map #header .tbp-home-map__azione--contorno:hover { background: #EDF4EF !important; }
}
html body.tbp-home-map #header .tbp-home-map__azione:focus-visible {
outline: 2px solid #084828;
outline-offset: 2px;
}
@media (max-width: 849px) {
html body.tbp-home-map #header .tbp-home-map__invito { margin-top: 7px; }
html body.tbp-home-map #header .tbp-home-map__frase {
font-size: 12.5px !important;
line-height: 1.3 !important;
}
html body.tbp-home-map #header .tbp-home-map__azioni {
flex-wrap: nowrap;
margin-top: 7px !important;
}
html body.tbp-home-map #header .tbp-home-map__azione {
min-height: 34px;
padding: 0 14px;
font-size: 13px !important;
}
}
/* Dal computer: frase e bottoni sulla stessa riga (vanno a capo solo se non ci stanno). */
@media (min-width: 850px) {
html body.tbp-home-map #header .tbp-home-map__invito {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
column-gap: 16px;
row-gap: 6px;
margin-top: 7px;
}
html body.tbp-home-map #header .tbp-home-map__frase { font-size: 14px !important; }
html body.tbp-home-map #header .tbp-home-map__azioni { margin: 0 !important; }
html body.tbp-home-map #header .tbp-home-map__azione { min-height: 34px; }
}
@layer tbp-appearance {
html[data-tbp-theme="dark"] body.tbp-home-map #header .tbp-home-map__frase { color: #d3ded7 !important; }
html[data-tbp-theme="dark"] body.tbp-home-map #header .tbp-home-map__azione--oro {
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #header .tbp-home-map__azione--contorno {
border-color: rgba(237, 243, 237, .8) !important;
background: transparent !important;
color: #edf3ed !important;
-webkit-text-fill-color: #edf3ed !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #header .tbp-home-map__azione:focus-visible { outline-color: #F3C300; }
}
/* Telefoni bassi (iPhone SE, 375x667): ogni pixel dell'intestazione e' un
pixel d'Italia in meno, quindi riga un po' piu' stretta. */
@media (max-width: 849px) and (max-height: 720px) {
html body.tbp-home-map #header .tbp-home-map__invito { margin-top: 5px; }
html body.tbp-home-map #header .tbp-home-map__frase {
font-size: 12px !important;
line-height: 1.25 !important;
}
html body.tbp-home-map #header .tbp-home-map__azioni { margin-top: 6px !important; }
html body.tbp-home-map #header .tbp-home-map__azione { min-height: 32px; }
}
@layer tbp-appearance {
@media (max-width: 849px) and (max-height: 720px) {
html body.tbp-home-map #header #masthead .tbp-home-map__overlay-inner { padding-bottom: 10px !important; }
}
@media (hover: hover) {
html[data-tbp-theme="dark"] body.tbp-home-map #header .tbp-home-map__azione--contorno:hover { background: rgba(237, 243, 237, .12) !important; }
}
}
/* Telefono in orizzontale e finestre basse (fino a 600 px): l'intestazione
prende gia' mezzo schermo (932x430: mappa di 79 px). Con la riga la mappa
scendeva a 13 px e Leaflet inquadrava a zoom 14; a 1024x600 l'Italia
perdeva il bordo nord. Qui la riga non c'e': la Home resta com'era. */
@media (max-height: 600px) {
html body.tbp-home-map #header .tbp-home-map__invito { display: none !important; }
}
/* I due bottoni sopra la mappa si toccano (30/9): la fascia sopra la mappa ha
pointer-events: none per lasciar passare il dito alla mappa, e i bottoni
aggiunti il 29/9 non lo riaccendevano. */
html body.tbp-home-map .tbp-home-map__azioni,
html body.tbp-home-map .tbp-home-map__azione { pointer-events: auto; }
/* ==========================================================================
Legenda sempre aperta (30/9, CEO: «sempre visibile, non richiudibile, al
telefono e al computer»). Il posto lo sceglie mappa-archivio.js:
- «angolo» (computer): in alto a destra, lontano dall'Italia, dalla
colonna dei comandi (a sinistra) e da AI Colombo (in basso a destra);
- «fascia» (telefono): in fondo alla mappa, quattro voci in una riga e la
nota sotto; l'inquadratura le lascia il posto sotto la Sicilia e la
mappa non si accorcia. A schermo intero sale in alto;
- «stretta» (telefoni bassi, dove la fascia rimpicciolirebbe l'Italia):
colonna stretta in alto a destra, con «Più luoghi» al posto della nota.
Stesse icone dei segnaposti; fondo, bordo e ombra dei comandi.
Nel layer: vince sulle regole !important della legenda di prima.
========================================================================== */
@layer tbp-appearance {
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend {
background: #faf9f5 !important;
color: #084828 !important;
border: 1px solid #c4d1c9 !important;
box-shadow: 0 2px 10px rgb(8 72 40 / 15%) !important;
max-height: none !important;
overflow: visible !important;
font-family: Manrope, "DM Sans", sans-serif !important;
cursor: default;
}
html[data-tbp-theme="tobepolo"] body.tbp-home-map #tbp-map-esperienze .tbp-map-legend {
background: #fff !important;
}
html body.tbp-home-map #tbp-map-esperienze :is(.tbp-map-legend__voce, .tbp-map-legend__testo) {
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend__nota {
color: #3d5a4b !important;
-webkit-text-fill-color: #3d5a4b !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-map-esperienze .tbp-map-legend {
background: var(--tbp-night-surface, #141414) !important;
border-color: var(--tbp-night-line, #333) !important;
box-shadow: none !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-map-esperienze :is(.tbp-map-legend__voce, .tbp-map-legend__testo) {
color: var(--tbp-night-text, #ededed) !important;
-webkit-text-fill-color: var(--tbp-night-text, #ededed) !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-map-esperienze .tbp-map-legend__nota {
color: #c0c5c1 !important;
-webkit-text-fill-color: #c0c5c1 !important;
}
/* «Più luoghi» serve solo nella colonna stretta, al posto della nota. */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend__voce--gruppo {
display: none !important;
}
/* --- Computer: angolo in alto a destra ------------------------------- */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--angolo {
width: 204px !important;
max-width: calc(100vw - 32px) !important;
padding: 12px 14px !important;
border-radius: 14px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--angolo .tbp-map-legend__voce {
font: 600 13px/1.25 Manrope, "DM Sans", sans-serif !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--angolo .tbp-map-legend__nota {
margin-top: 10px !important;
font: 500 12px/1.4 Manrope, "DM Sans", sans-serif !important;
}
/* --- Telefono: fascia in fondo alla mappa ---------------------------- */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia {
width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
max-width: none !important;
/* 12 px dal fondo: la riga dei crediti entra di 7 px nella mappa. */
margin: 0 0 12px calc(12px + env(safe-area-inset-left, 0px)) !important;
padding: 5px 8px 4px !important;
border-radius: 12px !important;
}
/* Quattro colonne, icona e sotto l'etichetta: stanno in una riga anche a
320 px; le parole lunghe (francese, tedesco) vanno a capo nella colonna. */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__voci {
display: flex !important;
justify-content: space-around !important;
align-items: flex-start !important;
gap: 6px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__voce {
flex: 0 1 auto !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
min-width: 0 !important;
font: 600 11px/1.15 Manrope, "DM Sans", sans-serif !important;
text-align: center !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__nota {
margin: 3px 0 0 !important;
font: 500 10.5px/1.25 Manrope, "DM Sans", sans-serif !important;
text-align: center !important;
}
/* A schermo intero la fascia sta in alto, centrata come in fondo. */
html body.tbp-home-map.tbp-map-fullscreen #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend--fascia {
margin: 10px 6px 0 0 !important;
}
/* --- Telefono basso: colonna stretta in alto a destra ---------------- */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--stretta {
width: max-content !important;
max-width: 128px !important;
padding: 6px 8px !important;
border-radius: 12px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--stretta .tbp-map-legend__voci {
gap: 4px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--stretta .tbp-map-legend__voce {
gap: 6px !important;
font: 600 11px/1.1 Manrope, "DM Sans", sans-serif !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--stretta .tbp-map-legend__voce--gruppo {
display: flex !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--stretta .tbp-map-legend__nota {
display: none !important;
}
/* --- Icone piccole sul telefono: 20 px nella fascia, 18 nella colonna -- */
html body.tbp-home-map #tbp-map-esperienze :is(.tbp-map-legend--fascia, .tbp-map-legend--stretta) .tbp-map-legend-icon {
flex: 0 0 20px !important;
width: 20px !important;
height: 20px !important;
border-width: 1.5px !important;
border-radius: 6px !important;
}
html body.tbp-home-map #tbp-map-esperienze :is(.tbp-map-legend--fascia, .tbp-map-legend--stretta) .tbp-map-legend-icon :is(svg, img) {
width: 15px !important;
height: 15px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--stretta .tbp-map-legend-icon {
flex-basis: 18px !important;
width: 18px !important;
height: 18px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--stretta .tbp-map-legend-icon :is(svg, img) {
width: 13px !important;
height: 13px !important;
}
/* Il numero dei gruppi, come i cerchi rossi sulla mappa. */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-icon--gruppo {
border-radius: 50% !important;
background: #D0161A !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font: 800 11px/1 Manrope, "DM Sans", sans-serif !important;
}
}
/* ==========================================================================
30/9 (CEO, dall'app sull'iPhone; kit app-rifinitura-30-9): al telefono la
mappa della Home ha UNA disposizione, uguale mentre carica e sempre.
- Comandi su una griglia di 44 px con 8 px fra l'uno e l'altro, a 12 px dai
bordi: a sinistra Centra e Posizione (con AI Colombo sotto, come prima),
a destra + − e schermo intero. Solo icone, uguali al computer: la parola
(«Zentrieren», «Location») non allarga piu' i bottoni e non finisce sopra
i gruppi. Il nome resta per i lettori di schermo (aria-label, testo).
- Legenda: fascia in fondo alla mappa, alta sempre 64 px, cinque voci in
colonne uguali con al massimo due righe di testo da 12 px. Niente piu'
colonna stretta in alto a destra: dipendeva dall'altezza della finestra,
che nell'app cambia mentre la pagina si assesta, e la legenda saltava.
Nel layer del tema: vince sulle regole !important di prima.
========================================================================== */
@layer tbp-appearance {
@media (max-width: 849px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-frame .tbp-map-zoom {
position: absolute !important;
top: 12px !important;
left: calc(12px + env(safe-area-inset-left, 0px)) !important;
right: calc(12px + env(safe-area-inset-right, 0px)) !important;
bottom: auto !important;
width: auto !important;
max-width: none !important;
height: auto !important;
transform: none !important;
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) 44px !important;
grid-template-rows: repeat(3, 44px) !important;
grid-auto-rows: 44px !important;
grid-auto-flow: row !important;
gap: 8px 0 !important;
align-content: start !important;
justify-items: stretch !important;
pointer-events: none !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-frame .tbp-map-zoom > * {
pointer-events: auto !important;
margin: 0 !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-frame .tbp-map-zoom > :nth-child(1) { grid-area: 1 / 3 !important; }
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-frame .tbp-map-zoom > :nth-child(2) { grid-area: 2 / 3 !important; }
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-frame .tbp-map-zoom > .tbp-map-fullscreen-btn { grid-area: 3 / 3 !important; }
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-frame .tbp-map-zoom > .tbp-map-reset { grid-area: 1 / 1 !important; }
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-frame .tbp-map-zoom > .tbp-map-locate { grid-area: 2 / 1 !important; }
/* Il messaggio della posizione compare sotto Posizione, sopra la mappa. */
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-frame .tbp-map-zoom > .tbp-map-location-status {
position: absolute !important;
grid-area: auto !important;
top: 104px !important;
bottom: auto !important;
left: 0 !important;
width: min(280px, calc(100% - 64px)) !important;
z-index: 2 !important;
}
}
/* Telefono, anche a schermo intero: tutti i bottoni 44 x 44, solo icone. */
@media (max-width: 849px) {
html body.tbp-home-map #tbp-home-map .tbp-map-frame .tbp-map-zoom > :is(button, .tbp-map-fullscreen-btn) {
position: static !important;
inset: auto !important;
display: grid !important;
place-items: center !important;
box-sizing: border-box !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
border-radius: 12px !important;
font: 600 26px/1 var(--tbp-font, Manrope, "DM Sans", sans-serif) !important;
letter-spacing: 0 !important;
}
/* Centra e Posizione: l'icona al posto della parola. */
html body.tbp-home-map #tbp-home-map .tbp-map-frame .tbp-map-zoom > :is(.tbp-map-reset, .tbp-map-locate) {
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-frame .tbp-map-zoom .tbp-map-fullscreen-btn__text {
display: none !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-frame .tbp-map-zoom :is(.tbp-map-ctl-icon, .tbp-map-fullscreen-btn__icon) {
display: block !important;
position: static !important;
width: 24px !important;
height: 24px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 6px !important;
-webkit-mask: none !important;
mask: none !important;
background: transparent center / 22px 22px no-repeat !important;
}
html body.tbp-home-map #tbp-home-map .tbp-map-frame .tbp-map-zoom .tbp-map-fullscreen-btn__icon { background-image: url("../assets/icons/flat/128/fullscreen.png") !important; }
html body.tbp-home-map #tbp-home-map .tbp-map-frame .tbp-map-zoom .tbp-map-ctl-icon--centra { background-image: url("../assets/icons/flat/128/location-current.png") !important; }
html body.tbp-home-map #tbp-home-map .tbp-map-frame .tbp-map-zoom .tbp-map-ctl-icon--posizione { background-image: url("../assets/icons/flat/128/location.png") !important; }
/* Tema scuro: le icone verdi stanno su un tassello chiaro, come al computer. */
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-home-map .tbp-map-frame .tbp-map-zoom :is(.tbp-map-ctl-icon, .tbp-map-fullscreen-btn__icon) {
background-color: #f4f7f5 !important;
background-size: 18px 18px !important;
}
/* Schermo intero acceso: il bottone e' rosso, l'icona bianca. */
html body.tbp-home-map #tbp-home-map .tbp-map-frame .tbp-map-zoom .tbp-map-fullscreen-btn.is-on .tbp-map-fullscreen-btn__icon {
filter: brightness(0) invert(1) !important;
background-color: transparent !important;
}
/* Schermo intero: la riga in fondo, stessi passi della griglia. */
html body.tbp-home-map.tbp-map-fullscreen #tbp-home-map .tbp-map-frame .tbp-map-zoom {
gap: 8px !important;
grid-auto-columns: 44px !important;
}
}
/* --- Legenda al telefono: fascia fissa ----------------------------- */
@media (max-width: 849px) {
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend.tbp-map-legend--fascia {
box-sizing: border-box !important;
height: 64px !important;
padding: 8px 4px !important;
overflow: hidden !important;
border-radius: 12px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__voci {
display: flex !important;
justify-content: space-evenly !important;
align-items: flex-start !important;
gap: 0 !important;
height: 100% !important;
}
/* Ogni voce e' larga quanto il suo testo (al massimo due righe decise
dallo script), e lo spazio avanza uguale fra le voci. */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__voce {
flex: 0 0 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
font: 600 12px/1.2 var(--tbp-font, Manrope, "DM Sans", sans-serif) !important;
letter-spacing: 0 !important;
text-align: center !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__corto {
display: block !important;
white-space: pre-line !important;
}
/* Il testo lungo resta per i lettori di schermo, fuori dalla vista. */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__lungo {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__voce--gruppo {
display: flex !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__nota {
display: none !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend-icon {
flex: 0 0 22px !important;
width: 22px !important;
height: 22px !important;
border-width: 1.5px !important;
border-radius: 6px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend-icon :is(svg, img) {
width: 16px !important;
height: 16px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend-icon--gruppo {
flex-basis: 22px !important;
width: 22px !important;
height: 22px !important;
border-radius: 0 !important;
background: transparent !important;
border-color: transparent !important;
}
}
/* Fuori dalla fascia vale il testo lungo. */
html body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__corto {
display: none;
}
/* Computer: anche nell'angolo c'e' «Più luoghi» con la pila, sopra la nota. */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--angolo .tbp-map-legend__voce--gruppo {
display: flex !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-icon--gruppo {
border-radius: 0 !important;
background: transparent !important;
border-color: transparent !important;
}
}
/* 30/9: al telefono AI Colombo si appoggia sopra la fascia della legenda, in
basso a sinistra (sul mare a ovest della Sardegna). Il fondo lo misura la
Home (--tbp-colombo-bottom); mattonella o tondo restano allo stesso filo. */
@layer tbp-appearance {
@media (max-width: 849px) {
/* Colombo compare solo quando il suo posto e' misurato: prima poteva
apparire piu' in alto e poi scendere. */
html body.tbp-home-map:not(.tbp-colombo-in-basso):not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) {
visibility: hidden !important;
}
html body.tbp-home-map.tbp-colombo-in-basso:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) {
top: auto !important;
bottom: var(--tbp-colombo-bottom, 200px) !important;
/* Il saluto cresce verso l'alto, dal fondo di Colombo: centrato sul
volto sarebbe sceso sulla fascia della legenda. */
align-items: flex-end !important;
}
html body.tbp-home-map.tbp-colombo-in-basso:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__teaser {
transform-origin: -14px calc(100% - 42px) !important;
}
/* La codina indica il volto: 42 px dal fondo della mattonella, 22 dal tondo. */
html body.tbp-home-map.tbp-colombo-in-basso:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__teaser::after {
top: auto !important;
bottom: 30px !important;
transform: none !important;
}
html body.tbp-home-map.tbp-colombo-in-basso:is(.tbp-colombo-stretto, :has(.tbp-colombo-chat.is-mini)):not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__teaser::after {
bottom: 10px !important;
}
}
}
/* 30/9: telefoni bassi (iPhone SE nell'app, mappa di 255 px). Fra Posizione e
la fascia della legenda la mattonella di AI Colombo (88 px) copriva la
legenda: qui Colombo e' il tondo da 44 px, come dopo il saluto, allineato
alla colonna dei comandi. La classe la mette la misura della Home
(inc/core-app/home-map.php) solo quando lo spazio manca. */
@layer tbp-appearance {
@media (max-width: 849px) {
html body.tbp-home-map.tbp-colombo-stretto:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__launcher {
box-sizing: border-box !important;
width: 44px !important;
height: 44px !important;
min-width: 0 !important;
min-height: 0 !important;
gap: 0 !important;
padding: 2px !important;
border: 0 !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: 0 3px 10px rgba(8, 72, 40, 0.2), 0 0 0 1px rgba(8, 72, 40, 0.08) !important;
}
html body.tbp-home-map.tbp-colombo-stretto:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__launcher .tbp-colombo-chat__avatar {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
}
html body.tbp-home-map.tbp-colombo-stretto:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) :is(.tbp-colombo-chat__launcher-name, button.tbp-colombo-chat__dismiss) {
display: none !important;
}
html body.tbp-home-map.tbp-colombo-stretto:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__badge {
top: 0 !important;
right: 0 !important;
left: auto !important;
min-width: 0 !important;
width: 12px !important;
height: 12px !important;
padding: 0 !important;
border-width: 2px !important;
font-size: 0 !important;
line-height: 0 !important;
box-shadow: none !important;
}
}
}
/* 30/9 pomeriggio (CEO): nella riga dei crediti tornano i diritti. Al telefono
la pastiglia sta su una riga: «© OpenStreetMap contributors · © anno ToBePolo
S.r.l. · Tutti i diritti riservati»; versione e «marchio, logo e grafica» si
vedono dal computer (e la frase intera e' nel piede). Se al computer la riga
non ci sta (tbp-crediti-stretti) si tolgono prima la versione e poi il marchio. */
@layer tbp-appearance {
@media (max-width: 849px) {
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution :is(.tbp-map-software-credit, .tbp-map-brand-credit) {
display: none !important;
}
/* Due righe corte, centrate: OSM sopra, «© anno ToBePolo S.r.l. · Tutti
i diritti riservati» sotto. Nessuna parola tagliata, in nessuna lingua. */
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
text-align: center !important;
line-height: 1.3 !important;
border-radius: 12px !important;
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution .tbp-map-riga2 {
display: block !important;
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution .tbp-map-riga2 > .tbp-map-producer-credit > .tbp-map-sep {
display: none !important;
}
/* La pastiglia e' piu' alta di una riga: la fascia della legenda sale
di altrettanto, cosi' restano 4 px fra le due. */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend.tbp-map-legend--fascia {
margin-bottom: 19px !important;
}
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution.tbp-crediti-stretti :is(.tbp-map-software-credit, .tbp-map-brand-credit) {
display: none !important;
}
}
/* 30/9 pomeriggio (D125.2): la frase dell'invito cita mestieri ed esperienze
ed e' piu' lunga. Al telefono i due pezzi scorrono insieme su due righe
bilanciate (come pezzi separati il primo andava a capo da solo: tre righe
e 16 px d'Italia in meno). */
@layer tbp-appearance {
@media (max-width: 849px) {
html body.tbp-home-map #header .tbp-home-map__frase {
text-wrap: balance;
}
html body.tbp-home-map #header .tbp-home-map__frase-pezzo {
display: inline !important;
}
}
}
/* 30/9 sera (CEO dall'iPhone: «in basso una cosa sta su due righe quando
basta una»). Nella fascia del telefono ogni voce sta su UNA riga in tutte
le lingue (etichette corte decise nello script: «Enti», «Gruppi»,
«Public bodies», «Groups»…): la fascia e' piu' bassa, 56 px, sempre uguale. */
@layer tbp-appearance {
@media (max-width: 849px) {
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend.tbp-map-legend--fascia {
height: 56px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__corto {
white-space: nowrap !important;
}
}
}
/* 1/10 notte (CEO dall'iPhone). Nel layer del tema: fra dichiarazioni
!important il layer vince su quelle fuori (anche sulle regole dei telefoni
bassi, che mettevano la frase a 12 px).
- «Metti la legenda come bottone»: al telefono c'e' solo il bottone
«Legenda»; la fascia di sempre si apre sopra di lui e si richiude col
bottone stesso (aria-expanded) o con Esc. Dal computer niente cambia.
- Crediti su UNA riga: «© OpenStreetMap · © anno ToBePolo», col link a
OpenStreetMap; «contributors», «S.r.l.», versione, diritti e marchio si
vedono dal computer (e la frase intera e' nel piede). La pastiglia sta
in basso a destra, alla stessa altezza del bottone.
- Invito: al telefono la frase corta su una riga a 15 px; i due bottoni
dell'invito restano solo dal computer (stanno gia' nella barra e nel menu). */
html body.tbp-home-map #header .tbp-home-map__frase-corta { display: none; }
/* Le misure dei caratteri le decide il layer tbp-caratteri con
var(--tbp-testo-nota) !important, che vince su ogni altro layer: qui si
cambia la variabile sull'elemento (regola fuori dai layer). */
@media (max-width: 849px) {
html body.tbp-home-map #header .tbp-home-map__frase { --tbp-testo-nota: 15px; }
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution { --tbp-testo-nota: 11px; }
}
@layer tbp-appearance {
@media (max-width: 849px) {
/* --- Legenda come bottone --------------------------------------- */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend.tbp-map-legend--chiusa {
display: none !important;
}
html body.tbp-home-map #tbp-map-esperienze .leaflet-bottom .tbp-map-legend.tbp-map-legend--fascia {
margin-bottom: 6px !important;
}
html body.tbp-home-map #tbp-map-esperienze .leaflet-top .tbp-map-legend.tbp-map-legend--fascia {
margin-top: 6px !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone {
clear: both;
margin: 0 0 8px 12px !important;
pointer-events: auto;
}
html body.tbp-home-map #tbp-map-esperienze .leaflet-top .tbp-map-legend-bottone {
margin: 8px 12px 0 0 !important;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone button {
display: inline-flex !important;
align-items: center;
gap: 7px;
box-sizing: border-box;
height: 34px !important;
min-height: 34px !important;
margin: 0 !important;
padding: 0 13px 0 11px !important;
border: 1px solid rgba(8, 72, 40, .2) !important;
border-radius: 12px !important;
background: #fff !important;
box-shadow: 0 2px 6px rgba(20, 55, 40, .18) !important;
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
font: 700 13px/1 var(--tbp-font, Manrope, sans-serif) !important;
letter-spacing: 0 !important;
text-transform: none !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone button:focus-visible {
outline: 2px solid #084828 !important;
outline-offset: 2px !important;
}
/* A riposo tre puntini nei colori della mappa; aperta, una x. */
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone__segno {
display: inline-flex;
gap: 3px;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone__segno i {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #0e5e3c;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone__segno i:first-child { background: #D0161A; }
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone__segno i:last-child { background: #e0a911; }
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone__x {
display: none;
position: relative;
width: 12px;
height: 12px;
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone__x::before,
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone__x::after {
content: "";
position: absolute;
left: 5px;
top: -1px;
width: 2px;
height: 14px;
border-radius: 1px;
background: currentColor;
transform: rotate(45deg);
}
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone__x::after { transform: rotate(-45deg); }
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone.is-aperta .tbp-map-legend-bottone__segno { display: none; }
html body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone.is-aperta .tbp-map-legend-bottone__x { display: inline-block; }
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone button {
border-color: rgba(237, 243, 237, .28) !important;
background: rgba(18, 26, 24, .92) !important;
color: #edf3ed !important;
-webkit-text-fill-color: #edf3ed !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #tbp-map-esperienze .tbp-map-legend-bottone button:focus-visible { outline-color: #F3C300 !important; }
/* Con la fascia aperta AI Colombo (chiuso) si fa da parte: starebbe
sopra le voci. Torna quando la legenda si richiude. */
html body.tbp-home-map:has(#tbp-map-esperienze .tbp-map-legend--fascia:not(.tbp-map-legend--chiusa):not([hidden])):not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) {
visibility: hidden !important;
}
/* --- Crediti su una riga ---------------------------------------- */
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution :is(.tbp-map-osm-contributors, .tbp-map-srl, .tbp-map-rights-credit, .tbp-map-software-credit, .tbp-map-brand-credit) {
display: none !important;
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution .tbp-map-riga2 {
display: inline !important;
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution .tbp-map-riga2 > .tbp-map-producer-credit > .tbp-map-sep {
display: inline !important;
}
html body.tbp-home-map #tbp-home-map > .leaflet-control-attribution {
box-sizing: border-box !important;
height: 22px !important;
max-width: calc(100% - 136px) !important;
padding: 0 10px !important;
border-radius: 999px !important;
font-size: 10.5px !important;
line-height: 22px !important;
text-align: right !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
/* Il fondo della mappa e' crediti-bottom + nastro + crediti-h (il posto
che la mappa lascia sotto di se'): da li' 14 px, cosi' il centro
della pastiglia sta alla stessa altezza del bottone (8 + 34/2). */
bottom: calc(var(--tbp-crediti-bottom) + var(--tbp-nastro-h, 54px) + var(--tbp-crediti-h, 0px) + 14px) !important;
}
/* --- Invito: una riga, niente bottoni ---------------------------- */
html body.tbp-home-map #header .tbp-home-map__azioni { display: none !important; }
html body.tbp-home-map #header .tbp-home-map__frase-lunga { display: none !important; }
html body.tbp-home-map #header .tbp-home-map__frase-corta {
display: inline !important;
white-space: nowrap !important;
}
html body.tbp-home-map #header .tbp-home-map__frase {
font-size: 15px !important;
line-height: 1.3 !important;
}
}
}
/* ==========================================================================
12/10 (CEO, dalla Home): «l'header e' molto spesso e largo per poche righe e
schiaccia la mappa GIS dell'Italia; rendi efficienti le righe, non puoi
occupare righe intere per poche parole».
Stessi elementi e stessi testi di prima, in meno righe. Solo CSS: l'HTML
della testata non cambia (resta buono anche quello in cache).
Computer (da 850 px): due righe invece di sette, 124 px invece di 278 (324
sopra i 900 px di altezza).
riga 1 marchio e firma a sinistra; navigazione, tema e lingua a destra
riga 2 «Benvenuto in ToBePolo» e la promessa sulla stessa riga, sotto la
frase dell'invito; i due bottoni a destra, alti 38 px (erano 52)
Da 850 px in su la navigazione sta accanto al marchio in tutte e quattro le
lingue; se un giorno non ci stesse (piu' voci, per chi e' entrato) va a capo
tutta insieme, a destra: tre righe, mai voci tagliate.
Telefono e tablet (fino a 849 px): 128 px invece di 200.
riga 1 marchio a sinistra, firma accanto, menu a destra
poi benvenuto, promessa, frase corta (benvenuto e promessa sulla
stessa riga quando ci stanno, da 520 px circa)
La testata bassa non ha piu' bisogno dello «zoom: .86» dell'8/10 per gli
schermi bassi (rimpiccioliva tutto, testi a 11 px): quella regola e' tolta.
La mappa prende l'altezza che resta: --tbp-home-header-h la misura lo script
in linea dopo la testata (inc/core-app/home-map.php), come prima.
Nel layer del tema: fra dichiarazioni !important il layer vince su quelle
fuori, e a pari layer vince la specificita' (qui #header #masthead).
Misure dei testi dalla scala del sito (css/tbp-tokens.css), nessuna inventata:
titolo «di sezione» (20 px al telefono, 21,9 dal computer), promessa e frase
«nota», firma 12 px come nelle altre pagine. I bottoni hanno uno stile in
linea (inc/footer-mega.php, 8/10) che li voleva a 20 px e alti 52: qui
tornano «testo piccolo» (15,3 px) e alti 38, stessi colori (oro «Insegna su
ToBePolo», a contorno «Mestieri ed esperienze»).
========================================================================== */
@media (min-width: 850px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) #main { padding-top: var(--tbp-home-header-h, 124px) !important; }
/* Con le barre di scorrimento vere (Windows, Mac con il mouse) la barra compariva un attimo dopo il primo
disegno, quando arriva il piede della pagina: la finestra si stringeva di 15 px e tutto cio' che sta a
destra (navigazione, bottoni, legenda) si spostava. Il posto della barra c'e' dal primo disegno, come gia'
durante il benvenuto. Non a schermo intero, dove la pagina non scorre. */
html:has(body.tbp-home-map:not(.tbp-map-fullscreen)) { scrollbar-gutter: stable; }
}
@media (max-width: 849px) {
html body.tbp-home-map #tbp-home-map {
height: calc(100vh - var(--tbp-home-header-h, 132px));
height: calc(100dvh - var(--tbp-home-header-h, 132px));
}
}
@layer tbp-caratteri {
@media (min-width: 850px) {
html[data-tbp-theme] body.tbp-home-map #header #masthead .tbp-home-map__azione[data-tbp-invito] {
font-size: var(--tbp-testo-piccolo) !important;
}
}
}
@layer tbp-appearance {
/* --- Tutti gli schermi: una sola misura per il titolo, niente margini doppi --- */
html body.tbp-home-map #header #masthead .tbp-home-map__overlay,
html body.tbp-home-map #header #masthead .tbp-home-map__claim,
html body.tbp-home-map #header #masthead .tbp-home-map__invito {
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__title {
margin: 0 !important;
font-size: var(--tbp-titolo-sezione, 1.25rem) !important;
line-height: 1.2 !important;
/* in em, come la riga del benvenuto animato che ci si posa sopra (css/tbp-home-intro.css) */
letter-spacing: -.025em !important;
white-space: nowrap !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__lede {
margin: 0 !important;
max-width: none !important;
line-height: 1.35 !important;
}
/* La riga della firma e' un flex con un «gap» di 12 px e uno pseudo-elemento vuoto in coda: quei 12 px
si toglievano alla firma, che al telefono andava a capo per 4 px. */
html body.tbp-home-map #header #masthead.header-main > .tbp-header-brandline { gap: 0 !important; }
html body.tbp-home-map #header #masthead .tbp-header-signature {
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
text-align: left !important;
line-height: 1.25 !important;
text-wrap: balance;
}
/* --- Telefono e tablet ------------------------------------------------- */
@media (max-width: 849px) {
html body.tbp-home-map #header #masthead.header-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
padding: 4px 0 8px !important;
}
/* riga 1: marchio a sinistra, menu a destra */
html body.tbp-home-map #header #masthead.header-main > .header-inner.tbp-header-inner {
grid-area: 1 / 1 !important;
min-height: 48px !important;
padding: 0 8px 0 16px !important;
align-items: center !important;
justify-content: space-between !important;
}
html body.tbp-home-map #header #masthead.header-main > .header-inner.tbp-header-inner > .flex-col.logo {
order: 0 !important;
margin: 0 !important;
max-width: none !important;
}
html body.tbp-home-map #header #masthead #logo a.tbp-brand-lockup img.tbp-brand-lockup__img {
width: 108.4px !important;
height: 46px !important;
max-width: none !important;
max-height: none !important;
}
html body.tbp-home-map #header #masthead.header-main > .header-inner.tbp-header-inner > .flex-col.flex-left {
order: 1 !important;
}
html body.tbp-home-map #header #masthead.header-main > .header-inner.tbp-header-inner > .flex-col.flex-right {
order: 2 !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
html body.tbp-home-map #header #masthead .mobile-nav button[data-open="#main-menu"] {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
margin: 0 !important;
border-radius: 13px !important;
}
/* la firma sta nella stessa riga, fra marchio e menu (stessa cella della griglia) */
html body.tbp-home-map #header #masthead.header-main > .tbp-header-brandline {
grid-area: 1 / 1 !important;
align-self: center !important;
justify-self: start !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 64px 0 135px !important;
pointer-events: none;
}
/* poi benvenuto e promessa (sulla stessa riga quando ci stanno) e la frase corta */
html body.tbp-home-map #header #masthead .tbp-home-map__overlay-inner {
padding: 5px 16px 0 !important;
text-align: center !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__claim {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: baseline !important;
column-gap: 10px !important;
row-gap: 0 !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__claim > :is(.tbp-home-map__title, .tbp-home-map__lede) {
flex: 0 1 auto !important;
width: auto !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__invito {
margin-top: 3px !important;
}
}
/* --- Computer ------------------------------------------------------------ */
@media (min-width: 850px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) #header #masthead.header-main {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
column-gap: 10px !important;
row-gap: 2px !important;
box-sizing: border-box !important;
/* Margini in pixel interi, non in vw: con le barre di scorrimento vere il vw cambia di 15 px quando
il benvenuto finisce (overflow nascosto, poi di nuovo visibile) e la testata si sposterebbe di
0,3 px; e un testo che parte da un pixel intero si posa senza scatti di mezzo pixel. */
padding: 6px 16px 9px !important;
}
/* riga 1 */
html body.tbp-home-map #header #masthead.header-main > .header-inner.tbp-header-inner {
order: 0 !important;
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body.tbp-home-map #header #masthead.header-main > .header-inner.tbp-header-inner > .flex-col.logo {
margin: 0 !important;
max-width: none !important;
}
html body.tbp-home-map #header #masthead #logo a.tbp-brand-lockup img.tbp-brand-lockup__img {
width: 141.4px !important;
height: 60px !important;
max-width: none !important;
max-height: none !important;
}
html body.tbp-home-map #header #masthead.header-main > .tbp-header-brandline {
order: 1 !important;
flex: 0 1 auto !important;
width: auto !important;
/* stretta, su due o tre righe accanto al marchio, cosi' la navigazione sta sulla stessa riga anche a
1024 px e nelle lingue lunghe (se fosse piu' larga, la navigazione andrebbe a capo); su una riga
sola da 1280 px (vedi sotto) */
max-width: 9.5em !important;
margin: 0 !important;
padding: 0 !important;
justify-content: flex-start !important;
font-size: 12px !important;
}
html body.tbp-home-map #header #masthead.header-main > .tbp-header-desktop-slot {
order: 2 !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
gap: 8px !important;
align-items: center !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav {
flex: 0 0 auto !important;
flex-wrap: nowrap !important;
gap: 4px !important;
padding: 0 !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item {
flex: 0 0 auto !important;
min-width: 58px !important;
padding: 3px 7px 4px !important;
row-gap: 1px !important;
border-radius: 12px !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-lava-icon { --tbp-icon: 28px; }
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__label {
margin-top: 0 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
}
/* Tema e lingua arrivano dopo il primo disegno (il tema lo accende lo script, la lingua e' stampata
dopo la testata e spostata qui): il loro posto c'e' gia', cosi' la navigazione non si sposta. */
html body.tbp-home-map #header #masthead .tbp-header-appearance--desktop {
min-width: 76px !important;
padding: 0 !important;
}
html body.tbp-home-map #header #masthead.header-main > .tbp-header-desktop-slot:not(.tbp-header-desktop-slot--lingue) {
padding-right: 84px !important;
}
/* riga 2 */
html body.tbp-home-map #header #masthead.header-main > .tbp-home-map__overlay {
order: 3 !important;
flex: 0 0 100% !important;
width: 100% !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__overlay-inner {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
grid-template-areas: "titolo promessa promessa" "frase frase azioni" !important;
align-items: baseline !important;
column-gap: 12px !important;
row-gap: 0 !important;
padding: 0 !important;
text-align: left !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__claim,
html body.tbp-home-map #header #masthead .tbp-home-map__invito {
display: contents !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__title {
grid-area: titolo !important;
text-align: left !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__lede {
grid-area: promessa !important;
text-align: left !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__frase {
grid-area: frase !important;
align-self: center !important;
text-align: left !important;
line-height: 1.35 !important;
text-wrap: balance;
}
/* la frase va a capo dove serve, su righe pari (prima i due pezzi restavano interi) */
html body.tbp-home-map #header #masthead .tbp-home-map__frase-pezzo {
display: inline !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__azioni {
grid-area: azioni !important;
align-self: center !important;
flex-wrap: nowrap !important;
gap: 6px !important;
margin: 0 !important;
}
html[data-tbp-theme] body.tbp-home-map #header #masthead .tbp-home-map__azione[data-tbp-invito] {
min-height: 38px !important;
padding: 0 14px !important;
border-radius: 12px !important;
white-space: nowrap !important;
}
/* alto 38 px, ma si prende in 44 (4 px oltre il bordo, sopra e sotto), come chiede la regola dei bersagli */
html[data-tbp-theme] body.tbp-home-map #header #masthead .tbp-home-map__azione[data-tbp-invito]::before {
inset: -4px 0 !important;
}
}
/* finestre basse: come prima, senza frase e bottoni (restano benvenuto e promessa su una riga) */
@media (min-width: 850px) and (max-height: 600px) {
html body.tbp-home-map #header #masthead .tbp-home-map__invito { display: none !important; }
}
/* schermi larghi: piu' aria ai lati e fra i pezzi; i bottoni a destra delle due righe di testo, non
solo della seconda; da 1280 px la firma su una riga accanto al marchio */
@media (min-width: 1280px) {
html body.tbp-home-map #header #masthead.header-main > .tbp-header-brandline { max-width: 24em !important; }
}
@media (min-width: 1200px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) #header #masthead.header-main { padding-left: 24px !important; padding-right: 24px !important; column-gap: 14px !important; }
html body.tbp-home-map #header #masthead .tbp-home-map__overlay-inner {
grid-template-areas: "titolo promessa azioni" "frase frase azioni" !important;
}
}
/* computer stretto (850-1023): marchio un po' piu' piccolo e meno aria fra le voci */
@media (min-width: 850px) and (max-width: 1023px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) #header #masthead.header-main { column-gap: 10px !important; }
html body.tbp-home-map #header #masthead #logo a.tbp-brand-lockup img.tbp-brand-lockup__img {
width: 113.1px !important;
height: 48px !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav { gap: 2px !important; }
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item {
min-width: 50px !important;
padding: 3px 5px 4px !important;
}
html body.tbp-home-map #header #masthead.header-main > .tbp-header-desktop-slot { gap: 4px !important; }
html body.tbp-home-map #header #masthead.header-main > .tbp-header-desktop-slot:not(.tbp-header-desktop-slot--lingue) { padding-right: 80px !important; }
}
}
/* ==========================================================================
12/10 sera (CEO, dalla Home del computer, dopo la testata compatta):
«questo mettilo sotto posizione e le e home etc mettili a destra in
verticale» e «cosi' benvenuto sta in alto al centro ma non occupa troppo
spazio».
Solo da 1024 px in su, solo sulla Home, solo CSS (HTML e script non
cambiano; sotto i 1024 px resta tutto com'era).
- La navigazione (Home, Cerca, Catalogo... tema e lingua in fondo) diventa
una colonna a destra, sopra la mappa, dove stava la legenda. Ogni voce e'
una riga alta 44 px con l'icona e accanto il nome: e' la forma che occupa
meno altezza (con il nome sotto l'icona 9 voci non starebbero in 720 px).
La colonna e' larga 184 px, come la legenda di prima; un nome lungo
(«Migliora la Piattaforma») va su due righe dentro la sua riga, la colonna
non si allarga. Se la finestra e' piu' bassa delle voci, la colonna scorre
dentro di se' e non arriva mai al bottone di AI Colombo.
- La legenda scende a sinistra, sotto «Posizione», larga come la colonna dei
comandi. Sotto gli 800 px di altezza perde la nota («I numeri raggruppano
piu' luoghi...») e stringe le righe, cosi' non arriva al nastro.
- La testata resta con marchio e firma a sinistra, «Benvenuto in ToBePolo»
in alto al centro con la promessa sotto, i due bottoni a destra sulla
stessa fascia; la frase dell'invito sta su una riga sotto, al centro.
94 px invece di 124.
L'inquadratura dell'Italia non cambia: mappa-archivio.js lascia gia' ai lati
il 20 % della larghezza (fino a 250 px), e colonna e legenda ci stanno dentro.
Misure legate ad altri file: i cinque comandi della mappa sono alti 44 px con
6 px fra l'uno e l'altro e partono a 12 px (regole del 23/9 piu' sopra): la
legenda parte a 12 + 5 x 44 + 4 x 6 + 6 = 262 px. Se cambiano, cambia --tbp-legenda-su.
========================================================================== */
@layer tbp-appearance {
@media (min-width: 1024px) {
/* --- Testata: una fascia in tre parti, la frase sotto ------------------ */
html body.tbp-home-map:not(.tbp-map-fullscreen) #header #masthead.header-main {
display: grid !important;
grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr) !important;
grid-template-areas: "marchio saluto azioni" "frase frase frase" !important;
align-items: center !important;
column-gap: 14px !important;
row-gap: 2px !important;
padding: 6px 24px 8px !important;
}
html body.tbp-home-map #header #masthead.header-main > .header-inner.tbp-header-inner {
grid-area: marchio !important;
justify-self: start !important;
}
/* la firma sta nella stessa cella del marchio, subito a destra (141 px di marchio + 12) */
html body.tbp-home-map #header #masthead.header-main > .tbp-header-brandline {
grid-area: marchio !important;
justify-self: start !important;
box-sizing: border-box !important;
max-width: none !important;
padding: 0 0 0 153px !important;
pointer-events: none;
}
html body.tbp-home-map #header #masthead .tbp-header-signature { max-width: 9.5em !important; }
@media (min-width: 1280px) {
/* su una riga, come stasera: cosi' nel benvenuto la firma continua a volare al suo posto */
html body.tbp-home-map #header #masthead .tbp-header-signature { max-width: 24em !important; }
}
html body.tbp-home-map #header #masthead.header-main > .tbp-home-map__overlay,
html body.tbp-home-map #header #masthead .tbp-home-map__overlay-inner,
html body.tbp-home-map #header #masthead .tbp-home-map__invito {
display: contents !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__claim {
display: block !important;
grid-area: saluto !important;
text-align: center !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__title,
html body.tbp-home-map #header #masthead .tbp-home-map__lede {
text-align: center !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__frase {
grid-area: frase !important;
justify-self: center !important;
text-align: center !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__azioni {
grid-area: azioni !important;
justify-self: end !important;
align-self: center !important;
}
/* --- Navigazione: colonna a destra, sopra la mappa --------------------- */
html body.tbp-home-map #header #masthead.header-main > .tbp-header-desktop-slot,
html body.tbp-home-map #header #masthead.header-main > .tbp-header-desktop-slot:not(.tbp-header-desktop-slot--lingue) {
position: fixed !important;
top: calc(var(--tbp-home-header-h, 94px) + 10px) !important;
right: 12px !important;
z-index: 2 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
align-content: start !important;
justify-items: center !important;
gap: 6px !important;
box-sizing: border-box !important;
width: 184px !important;
/* mai sul bottone di AI Colombo (113 px a 20 dal fondo, con il numero rosso che sporge): se non ci sta, scorre */
max-height: calc(100vh - var(--tbp-home-header-h, 94px) - 10px - 148px) !important;
max-height: calc(100dvh - var(--tbp-home-header-h, 94px) - 10px - 148px) !important;
margin: 0 !important;
padding: 6px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain;
scrollbar-width: thin;
border: 1px solid #c4d1c9 !important;
border-radius: 14px !important;
background: #faf9f5 !important;
box-shadow: 0 2px 10px rgb(8 72 40 / 15%) !important;
}
/* con un menu aperto (tema o lingua) la colonna non taglia la sua finestra */
html body.tbp-home-map #header #masthead.header-main > .tbp-header-desktop-slot:has(.tbp-appearance__toggle[aria-expanded="true"], details.tbp-lingue[open]) {
overflow: visible !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav {
grid-column: 1 / -1 !important;
justify-self: stretch !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item {
flex: 0 0 auto !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
column-gap: 10px !important;
row-gap: 0 !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
padding: 4px 8px !important;
border-radius: 10px !important;
background: transparent !important;
box-shadow: none !important;
/* niente che sposti la voce quando ci si passa sopra o la si preme: cambia solo il fondo */
transform: none !important;
transition: background-color .16s ease !important;
}
/* «Se clicchi le icone si spostano» (CEO, 12/10 sera). Il gesto del sito per «premuto» (js/tbp-interaction-motion.js)
rimpicciolisce la voce del 3 % e la abbassa di 1 px: su una tessera di 62 px sono 1,8 px, su una riga larga
172 px sarebbero 5. Nella colonna la voce premuta non si muove: cambia solo il fondo. */
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item,
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item * {
scale: none !important;
translate: none !important;
rotate: none !important;
transform: none !important;
filter: none !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item:hover { background: #eef4f0 !important; }
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item:active,
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item.is-tbp-pressed { background: #d9e7de !important; }
html[data-tbp-theme="dark"] body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item:hover { background: rgba(237, 243, 237, .08) !important; }
html[data-tbp-theme="dark"] body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item:is(:active, .is-tbp-pressed) { background: rgba(237, 243, 237, .2) !important; }
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item .tbp-lava-icon {
flex: 0 0 auto !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__label {
flex: 1 1 auto !important;
min-width: 0 !important;
font-size: 13px !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: normal !important;
overflow-wrap: anywhere;
}
/* la pagina aperta: fondo pieno al posto della riga sotto il nome (in colonna la riga non si leggerebbe) */
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item::after { content: none !important; }
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item.is-active { background: #e3ede7 !important; }
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item:focus-visible {
outline: 2px solid #084828 !important;
outline-offset: -2px !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #header #masthead.header-main > .tbp-header-desktop-slot {
border-color: var(--tbp-night-line, #33403a) !important;
background: var(--tbp-night-surface, #141414) !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item.is-active { background: rgba(237, 243, 237, .14) !important; }
html[data-tbp-theme="dark"] body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item:focus-visible { outline-color: #F3C300 !important; }
/* tema e lingua in fondo, uno accanto all'altro; le loro finestre si aprono verso l'alto */
html body.tbp-home-map #header #masthead .tbp-header-appearance--desktop,
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot nav.tbp-language-switcher--desktop {
min-width: 76px !important;
margin: 0 !important;
padding: 0 !important;
}
/* le due finestre si agganciano alla colonna (non al loro bottone): bordo destro sul bordo destro della
colonna, sopra la riga dei due bottoni, cosi' restano dentro lo schermo */
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot :is(.tbp-header-appearance--desktop, .tbp-appearance, nav.tbp-language-switcher--desktop, details.tbp-lingue) {
position: static !important;
}
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot .tbp-appearance__choices,
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot .tbp-lingue__elenco {
top: auto !important;
bottom: 58px !important;
left: auto !important;
right: 6px !important;
}
/* --- Legenda: a sinistra, sotto «Posizione», larga come i comandi ------ */
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map { --tbp-colonna-l: 188px; --tbp-legenda-su: 262px; }
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-zoom { width: var(--tbp-colonna-l) !important; max-width: none !important; }
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right {
top: var(--tbp-legenda-su) !important;
left: 12px !important;
right: auto !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend {
box-sizing: border-box !important;
width: var(--tbp-colonna-l) !important;
max-width: none !important;
margin: 0 !important;
float: none !important;
}
}
/* da 1024 a 1279 px i bottoni non stanno sempre accanto al benvenuto (in tedesco no): scendono a destra della frase */
@media (min-width: 1024px) and (max-width: 1279px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) #header #masthead.header-main {
grid-template-columns: auto minmax(0, 1fr) auto !important;
grid-template-areas: "marchio saluto saluto" "frase frase azioni" !important;
}
html body.tbp-home-map #header #masthead .tbp-home-map__frase { justify-self: start !important; text-align: left !important; }
}
/* schermi molto larghi: anche la frase sta al centro della fascia, sotto la promessa (una riga in meno) */
@media (min-width: 1680px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) #header #masthead.header-main {
grid-template-areas: "marchio saluto azioni" "marchio frase azioni" !important;
row-gap: 0 !important;
}
}
/* finestre basse: la legenda senza la nota e con le righe strette */
@media (min-width: 1024px) and (max-height: 800px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend__nota { display: none !important; }
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend { padding-top: 8px !important; padding-bottom: 8px !important; }
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend__voci { row-gap: 2px !important; gap: 2px !important; }
}
}
/* ==========================================================================
13/10 (CEO, dalla Home su uno schermo largo circa 2000 px): «fai questi
bottoni piu' grandi, c'e' spazio; la stessa cosa il logo».
Solo Home, solo da 1024 px, solo CSS. Due misure decidono tutto:
--tbp-k di quanto crescono la colonna della navigazione a destra, i comandi
della mappa e la legenda a sinistra, il marchio e la firma;
--tbp-kt di quanto crescono il benvenuto e i due bottoni della testata.
Crescono a gradini, con la larghezza E l'altezza della finestra (la colonna
con 9 voci deve restare sopra AI Colombo anche sugli schermi bassi):
finestra almeno --tbp-k --tbp-kt
(sotto) 1 1 1280x720, 1366x768: come prima
1440 x 860 1,08 1 1440x900, 1536x864
1680 x 1000 1,22 1 1680x1050
1900 x 1040 1,3 1,12 1920x1080
2400 x 1300 1,55 1,3 2560x1440
Ogni misura e' «misura di prima x --tbp-k». Sotto 1440 x 860 non si applica
nessuna regola: la pagina resta com'era. Il marchio e' lo stesso file SVG,
solo piu' grande.
Perche' --tbp-kt e' piu' basso: la testata deve restare alta quanto serve al
marchio e non di piu' (ogni px in piu' lo perde la mappa). Con i testi a 1,3
la frase «Prenota un mestiere…» a 1920 px va su due righe e la testata passa
da 95 a 117 px; a 2560 px con 1,4 succede lo stesso in tedesco (125 px).
Per provarlo basta mettere --tbp-kt uguale a --tbp-k.
La legenda parte sotto «Posizione»: 12 px + (5 comandi da 44, 4 spazi da 6
e altri 6) x --tbp-k.
--tbp-testata-attesa e' l'altezza della testata (in italiano) a ogni gradino:
serve solo nell'istante prima che lo script la misuri, per non far partire la
colonna da un posto e spostarla subito dopo.
========================================================================== */
@layer tbp-appearance {
@media (min-width: 1024px) { html body.tbp-home-map { --tbp-k: 1; --tbp-kt: 1; } }
@media (min-width: 1440px) and (min-height: 860px) { html body.tbp-home-map { --tbp-k: 1.08; --tbp-testata-attesa: 102px; } }
@media (min-width: 1680px) and (min-height: 1000px) { html body.tbp-home-map { --tbp-k: 1.22; --tbp-testata-attesa: 91px; } }
@media (min-width: 1900px) and (min-height: 1040px) { html body.tbp-home-map { --tbp-k: 1.3; --tbp-kt: 1.12; --tbp-testata-attesa: 96px; } }
@media (min-width: 2400px) and (min-height: 1300px) { html body.tbp-home-map { --tbp-k: 1.55; --tbp-kt: 1.3; --tbp-testata-attesa: 111px; } }
/* Le regole valgono solo dove --tbp-k supera 1: sotto 1440 x 860 non se ne applica nessuna
(e restano le righe strette della legenda sulle finestre basse, 12/10 sera). */
@media (min-width: 1440px) and (min-height: 860px) {
/* --- Colonna della navigazione ----------------------------------------- */
html body.tbp-home-map #header #masthead.header-main > .tbp-header-desktop-slot,
html body.tbp-home-map #header #masthead.header-main > .tbp-header-desktop-slot:not(.tbp-header-desktop-slot--lingue) {
/* come il 12/10 sera; cambia solo l'altezza presa per buona nell'istante prima che lo script misuri la testata */
top: calc(var(--tbp-home-header-h, var(--tbp-testata-attesa, 94px)) + 10px) !important;
max-height: calc(100vh - var(--tbp-home-header-h, var(--tbp-testata-attesa, 94px)) - 10px - 148px) !important;
max-height: calc(100dvh - var(--tbp-home-header-h, var(--tbp-testata-attesa, 94px)) - 10px - 148px) !important;
width: calc(184px * var(--tbp-k)) !important;
padding: calc(6px * var(--tbp-k)) !important;
gap: calc(6px * var(--tbp-k)) !important;
border-radius: calc(14px * var(--tbp-k)) !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__item {
min-height: calc(44px * var(--tbp-k)) !important;
padding: calc(4px * var(--tbp-k)) calc(8px * var(--tbp-k)) !important;
column-gap: calc(10px * var(--tbp-k)) !important;
border-radius: calc(10px * var(--tbp-k)) !important;
}
/* la misura dell'icona la applica tbp-tokens.css (strato tbp-icon-geometry) da --tbp-icon */
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-lava-icon {
--tbp-icon: calc(32px * var(--tbp-k)) !important;
}
html body.tbp-home-map #header #masthead #tbp-desktop-nav .tbp-desktop-nav__label {
font-size: calc(13px * var(--tbp-k)) !important;
}
/* tema e lingua */
html body.tbp-home-map #header #masthead .tbp-header-appearance--desktop,
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot nav.tbp-language-switcher--desktop {
min-width: calc(76px * var(--tbp-k)) !important;
}
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot .tbp-appearance--header .tbp-appearance__toggle,
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot nav.tbp-language-switcher--desktop summary.tbp-lingue__ora {
width: calc(76px * var(--tbp-k)) !important;
min-width: calc(76px * var(--tbp-k)) !important;
height: calc(44px * var(--tbp-k)) !important;
min-height: calc(44px * var(--tbp-k)) !important;
padding: 0 calc(12px * var(--tbp-k)) !important;
gap: calc(8px * var(--tbp-k)) !important;
}
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot .tbp-appearance--header .tbp-appearance__current {
width: calc(30px * var(--tbp-k)) !important;
height: calc(22px * var(--tbp-k)) !important;
}
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot .tbp-appearance--header .tbp-appearance__current svg {
width: calc(21px * var(--tbp-k)) !important;
min-width: calc(21px * var(--tbp-k)) !important;
max-width: none !important;
height: calc(21px * var(--tbp-k)) !important;
max-height: none !important;
}
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot summary.tbp-lingue__ora .tbp-language-flag {
flex: 0 0 calc(30px * var(--tbp-k)) !important;
width: calc(30px * var(--tbp-k)) !important;
height: calc(20px * var(--tbp-k)) !important;
}
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot summary.tbp-lingue__ora .tbp-language-flag svg {
width: calc(30px * var(--tbp-k)) !important;
min-width: calc(30px * var(--tbp-k)) !important;
max-width: calc(30px * var(--tbp-k)) !important;
height: calc(20px * var(--tbp-k)) !important;
}
/* le due tendine: stesse misure di prima, ingrandite in blocco (dove «zoom» non c'e' restano com'erano, solo piu' su) */
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot .tbp-appearance__choices,
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot .tbp-lingue__elenco {
bottom: calc(58px * var(--tbp-k)) !important;
right: calc(6px * var(--tbp-k)) !important;
}
@supports (zoom: 1.2) {
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot .tbp-appearance__choices,
html body.tbp-home-map #header #masthead .tbp-header-desktop-slot .tbp-lingue__elenco {
zoom: var(--tbp-k);
bottom: 58px !important;
right: 6px !important;
}
}
/* --- Comandi della mappa e legenda ------------------------------------- */
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map {
--tbp-colonna-l: calc(188px * var(--tbp-k));
--tbp-legenda-su: calc(12px + 250px * var(--tbp-k));
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-zoom { gap: calc(6px * var(--tbp-k)) !important; }
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-zoom > button:not(.tbp-map-fullscreen-btn):not(.tbp-map-reset):not(.tbp-map-locate) {
width: calc(44px * var(--tbp-k)) !important;
min-width: calc(44px * var(--tbp-k)) !important;
height: calc(44px * var(--tbp-k)) !important;
min-height: calc(44px * var(--tbp-k)) !important;
font-size: calc(26px * var(--tbp-k)) !important;
border-radius: calc(14px * var(--tbp-k)) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-zoom > :is(.tbp-map-fullscreen-btn, .tbp-map-reset, .tbp-map-locate) {
height: calc(44px * var(--tbp-k)) !important;
min-height: calc(44px * var(--tbp-k)) !important;
padding: 0 calc(16px * var(--tbp-k)) 0 calc(12px * var(--tbp-k)) !important;
gap: calc(10px * var(--tbp-k)) !important;
font-size: calc(14px * var(--tbp-k)) !important;
border-radius: calc(14px * var(--tbp-k)) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-zoom .tbp-map-fullscreen-btn__text {
font-size: calc(13px * var(--tbp-k)) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-home-map .tbp-map-zoom :is(.tbp-map-ctl-icon, .tbp-map-fullscreen-btn__icon) {
flex: 0 0 calc(22px * var(--tbp-k)) !important;
width: calc(22px * var(--tbp-k)) !important;
height: calc(22px * var(--tbp-k)) !important;
background-size: calc(20px * var(--tbp-k)) calc(20px * var(--tbp-k)) !important;
}
/* i nomi e la nota prendono la misura da --tbp-testo-nota (tbp-caratteri.css) */
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend {
--tbp-testo-nota: calc(.75rem * var(--tbp-k));
padding: calc(12px * var(--tbp-k)) calc(14px * var(--tbp-k)) !important;
border-radius: calc(14px * var(--tbp-k)) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend__voci { gap: calc(8px * var(--tbp-k)) !important; }
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend__voce {
gap: calc(10px * var(--tbp-k)) !important;
font-size: calc(13px * var(--tbp-k)) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend-icon {
flex: 0 0 calc(28px * var(--tbp-k)) !important;
width: calc(28px * var(--tbp-k)) !important;
height: calc(28px * var(--tbp-k)) !important;
border-radius: calc(8px * var(--tbp-k)) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend-icon > :is(svg, img) {
width: calc(20px * var(--tbp-k)) !important;
height: calc(20px * var(--tbp-k)) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend-icon .tbp-map-gruppo--mini {
width: calc(22px * var(--tbp-k)) !important;
height: calc(22px * var(--tbp-k)) !important;
gap: calc(2px * var(--tbp-k)) !important;
border-radius: calc(6px * var(--tbp-k)) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-gruppo--mini .tbp-map-gruppo__numero {
font-size: calc(12px * var(--tbp-k)) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-gruppo--mini .tbp-map-gruppo__tipi {
width: calc(14px * var(--tbp-k)) !important;
height: calc(3px * var(--tbp-k)) !important;
}
html body.tbp-home-map:not(.tbp-map-fullscreen) #tbp-map-esperienze .leaflet-top.leaflet-right .tbp-map-legend__nota {
margin-top: calc(10px * var(--tbp-k)) !important;
}
/* --- Testata: marchio e firma con --tbp-k, benvenuto e bottoni con --tbp-kt */
html body.tbp-home-map #header #masthead #logo a.tbp-brand-lockup img.tbp-brand-lockup__img {
width: calc(141.4px * var(--tbp-k)) !important;
height: calc(60px * var(--tbp-k)) !important;
}
html body.tbp-home-map #header #masthead.header-main > .tbp-header-brandline {
padding-left: calc(141.4px * var(--tbp-k) + 12px) !important;
}
html body.tbp-home-map #header #masthead .tbp-header-signature { font-size: calc(12px * var(--tbp-k)) !important; }
html body.tbp-home-map #header #masthead .tbp-home-map__title { font-size: calc(var(--tbp-titolo-sezione, 1.25rem) * var(--tbp-kt)) !important; }
html body.tbp-home-map #header #masthead :is(.tbp-home-map__lede, .tbp-home-map__frase, .tbp-home-map__frase-pezzo) { --tbp-testo-nota: calc(.75rem * var(--tbp-kt)); }
/* se la frase non sta in una riga (1680 px, tedesco) va a capo in due righe pari */
html body.tbp-home-map #header #masthead .tbp-home-map__frase { text-wrap: balance; }
html body.tbp-home-map #header #masthead .tbp-home-map__azione[data-tbp-invito] { --tbp-testo-piccolo: calc(.875rem * var(--tbp-kt)); }
html[data-tbp-theme] body.tbp-home-map #header #masthead .tbp-home-map__azione[data-tbp-invito] {
min-height: calc(38px * var(--tbp-kt)) !important;
padding: 0 calc(14px * var(--tbp-kt)) !important;
border-radius: calc(12px * var(--tbp-kt)) !important;
}
}
/* Da 1680 px il marchio occupa le due righe della testata ed e' piu' alto del benvenuto: i px in piu'
vanno sopra il titolo e sotto la frase, non in mezzo. */
@media (min-width: 1680px) and (min-height: 860px) {
html body.tbp-home-map #header #masthead .tbp-home-map__claim { align-self: end !important; }
html body.tbp-home-map #header #masthead .tbp-home-map__frase { align-self: start !important; }
}
}
/* 13/10/2026 (CEO, dalla Home al computer: «metti Made in Garda sotto ToBePolo»). La firma non sta più a destra del
marchio: sta sotto la scritta «ToBePolo», allineata al suo inizio (nel marchio la scritta comincia al 47,8 % della
larghezza e finisce al 67 % dell'altezza). La testata non cambia altezza: la firma resta dentro l'altezza del
marchio. Vale da 1024 px in su; al telefono la firma non c'è (testata-telefono-solo-logo-13-10). */
@layer tbp-appearance {
@media (min-width: 1024px) {
html body.tbp-home-map #header #masthead#masthead.header-main > .tbp-header-brandline {
align-self: start !important;
height: auto !important;
min-height: 0 !important;
margin-top: calc(60px * var(--tbp-k, 1) * .70) !important;
padding: 0 0 0 calc(141.4px * var(--tbp-k, 1) * .478) !important;
white-space: nowrap !important;
line-height: 1.25 !important;
/* la cella del marchio si allarga quanto serve alla firma su una riga: il benvenuto comincia dopo */
width: max-content !important;
min-width: max-content !important;
max-width: none !important;
}
html body.tbp-home-map #header #masthead#masthead.header-main > .tbp-header-brandline .tbp-header-signature {
white-space: nowrap !important;
line-height: 1.25 !important;
width: max-content !important;
min-width: max-content !important;
max-width: none !important;
flex: 0 0 auto !important;
}
}
}
/* kit home-ferma-computer-13-10 (CEO 13/10 sera: «perché bottone tagliato?»). Al computer la Home era 24 px più
alta dello schermo: sotto la mappa restava il piede vuoto con 24 px di margine interno. Con la rotella sopra i
comandi la pagina scendeva di quei 24 px e la mappa finiva sotto la testata: il «+» usciva tagliato. Il piede
vuoto non occupa più spazio: la Home al computer non scorre. Al telefono non cambia niente. */
@media (min-width: 850px) {
html body.tbp-home-map:not(.tbp-map-fullscreen) #footer { padding-bottom: 0 !important; }
}
/* 15/10 sera (CEO: «i bottoni nella legenda fanno schifo, lato click colore e shape»). Prima: la scelta era una
pillola verde scuro più grande della casella (margini negativi), con l'icona rossa sul verde, e le altre voci
sbiadivano a metà come se fossero spente. Ora ogni voce è una casella uguale, raggio 12 px; la scelta è un verde
chiaro con il bordo verde e il testo in grassetto; le altre restano piene e leggibili; al tocco la casella si
abbassa appena. */
html:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__voce[data-tbp-filtro] {
margin: 0 !important;
padding: 6px 4px !important;
border-radius: 12px !important;
opacity: 1 !important;
background: transparent !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
transition: background-color .15s, box-shadow .15s, transform .1s !important;
}
html:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__voce[data-tbp-filtro]:active {
transform: scale(.96) !important;
background: rgba(8, 72, 40, .08) !important;
}
html:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__voce.tbp-map-legend__voce--scelta {
background: #e6f0ea !important;
box-shadow: inset 0 0 0 1.5px #084828 !important;
}
html:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__voce.tbp-map-legend__voce--scelta,
html:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__voce.tbp-map-legend__voce--scelta :is(.tbp-map-legend__testo, .tbp-map-legend__lungo, .tbp-map-legend__corto) {
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
font-weight: 800 !important;
}
html[data-tbp-theme="dark"]:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__voce.tbp-map-legend__voce--scelta {
background: rgba(155, 219, 181, .14) !important;
box-shadow: inset 0 0 0 1.5px #9bdbb5 !important;
}
html[data-tbp-theme="dark"]:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__voce.tbp-map-legend__voce--scelta,
html[data-tbp-theme="dark"]:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__voce.tbp-map-legend__voce--scelta :is(.tbp-map-legend__testo, .tbp-map-legend__lungo, .tbp-map-legend__corto) {
color: #eef3f0 !important;
-webkit-text-fill-color: #eef3f0 !important;
}
/* 15/10 notte (CEO: «il bottone è disallineato»): al telefono la fascia è alta 56 px fissi e la casella scelta, con
6 px sopra e sotto, sbordava e il bordo si tagliava in basso. Casella più bassa (3 px) e rientrata di 3 px sopra e
sotto: 6 px di aria dal bordo della fascia, uguali sopra e sotto. */
html:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend--fascia .tbp-map-legend__voce[data-tbp-filtro] {
padding: 3px 5px !important;
margin: -3px 0 !important;
gap: 2px !important;
}
/* 15/10 notte (CEO: «come è il design language dei bottoni? perché quel bordo così spesso?»). Nel sito una scelta
è un riempimento verde chiaro senza bordo, come «Home» nella barra in basso. Via il bordo. */
html:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__voce.tbp-map-legend__voce--scelta {
box-shadow: none !important;
background: #e3ede7 !important;
}
html[data-tbp-theme="dark"]:not(#tbp-lg-a):not(#tbp-lg-b):not(#tbp-lg-c) body #tbp-map-esperienze .tbp-map-legend .tbp-map-legend__voce.tbp-map-legend__voce--scelta {
box-shadow: none !important;
background: rgba(155, 219, 181, .16) !important;
}