/*
* Linguaggio visivo ToBePolo — regole uniche (D70/D71, 23/9/2026).
*
* Nasce dall'audit del 23/9 (88 stili di pulsante, 7 forme dell'oro, titoli in
* DM Sans, tema scuro illeggibile). Si carica per ultimo. Qui stanno le regole
* decise da Elind quella notte; a ottobre diventa il file dei componenti e le
* regole sparse negli altri fogli si tolgono.
*
* - Azione principale: oro liquido, testo VERDE SCURO #084828, senza ombra
* (D71: sostituisce il bianco del 13/9; bianco sull'oro faceva 1,7-3,6:1).
* 52 px, raggio 16, 16 px peso 800. Nelle schede: compatto 40 px, raggio 12.
* - Secondario: verde pieno #084828, testo bianco. Terziario: contorno.
* - Rosso #D0161A solo per errori, annullare/eliminare e «Riduci».
* - Raggi: 12, 16, 24, pillola. Carattere: Manrope (Oxanium solo nel nome).
* - Link: verde #084828 (il verde bandiera #009246 faceva 4,04:1).
* - Tema scuro: nessun testo chiaro su riquadri chiari.
*/
/* --- Oro: testo verde scuro ovunque ------------------------------------ */
html body :is(.tbp-btn--premium, .tbp-flow-next, .checkout-button, #place_order, .tbp-plus-sheet__btn--gold, .tbp-exp-book-cta, .tbp-exp-card__buy, .tbp-exp-sticky-buy a, .tbp-exp-sticky-buy button, .tbp-auth-flow__next, .tbp-auth-flow__submit, button.woocommerce-form-login__submit, button.woocommerce-form-register__submit, .tbp-doc-riga__btn):not(:disabled) {
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
text-shadow: none !important;
}
/* --- Oro: una forma sola ------------------------------------------------ */
html body a.tbp-btn.tbp-btn--premium,
html body button.tbp-btn.tbp-btn--premium {
min-height: 52px !important;
border: 0 !important;
border-radius: 16px !important;
font-size: 16px !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
}
html body .tbp-btn.tbp-btn--premium.tbp-book-strip__cta {
height: 52px !important;
}
/* Compatto nelle schede (catalogo, correlate, cerca). L'id nel selettore serve a vincere
su tbp-discovery-cards.css, che usa :is(#tbp-results-container, ...). */
html body a.tbp-btn.tbp-btn--premium.tbp-exp-card__buy,
html body button.tbp-btn.tbp-btn--premium.tbp-exp-card__buy,
html body :is(#tbp-results-container, .tbp-exp-card-scope, #main) a.tbp-btn.tbp-btn--premium.tbp-exp-card__buy {
min-height: 40px !important;
height: 40px !important;
padding: 0 16px !important;
border: 0 !important;
border-radius: 12px !important;
font-size: 14px !important;
font-weight: 800 !important;
}
/* --- Rosso solo per errori, annullare e «Riduci» ------------------------ */
html body :is(a, button).button.secondary:not(.is-outline),
html body .colombo-integrated-row .colombo-cta,
html body .colombo-cta {
background-color: #084828 !important;
border-color: #084828 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body.proponi-un-esperienza .accordion.faq .accordion-title button.toggle {
background: #084828 !important;
color: #ffffff !important;
font-weight: 700 !important;
}
/* --- Fuori tavolozza: giallo e grigi via -------------------------------- */
html body button.button.bottone,
html body a.button.bottone,
html body .tbp-toc-nav .button.bottone {
background: #084828 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border: 0 !important;
border-radius: 16px !important;
min-height: 44px !important;
font-weight: 700 !important;
}
html body .tbp-colombo-chat__dismiss {
background: #F4F7F5 !important;
color: #084828 !important;
border: 1px solid rgba(8, 72, 40, .16) !important;
}
html body.tbp-wcfm-ui :is(.wcfm_bulk_mark_read, .wcfm_bulk_mark_delete).wcfm_submit_button,
html body :is(.wcfm_bulk_mark_read, .wcfm_bulk_mark_delete).wcfm_submit_button {
background: #ffffff !important;
color: #084828 !important;
border: 1.5px solid rgba(8, 72, 40, .24) !important;
border-radius: 12px !important;
min-height: 44px !important;
font-weight: 700 !important;
}
/* --- Titoli: Manrope, testo mai giustificato ----------------------------- */
html body :is(h1, h2, h3, h4, h5, h6, .heading-font) {
font-family: Manrope, "Helvetica Neue", Arial, sans-serif !important;
}
html body :is(.tbp-territories__hero > p, .tbp-territories__story p) {
text-align: left !important;
hyphens: manual !important;
}
/* --- Link: il verde del marchio arriva dal pannello del tema (color_links = #084828, 23/9). */
/* --- Frecce del calendario: almeno 44 px per il dito --------------------- */
html body :is(.flatpickr-prev-month, .flatpickr-next-month, .tbp-calendario__nav button, [aria-label="Mese precedente"], [aria-label="Il prossimo mese"], [aria-label="Mese successivo"]) {
min-width: 44px !important;
min-height: 44px !important;
}
/* --- Tema scuro ---------------------------------------------------------- */
@layer tbp-appearance {
html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body :is(.tbp-btn--premium, .tbp-flow-next, .checkout-button, #place_order, .tbp-exp-card__buy, .tbp-auth-flow__next, .tbp-auth-flow__submit, button.woocommerce-form-login__submit, button.woocommerce-form-register__submit, .tbp-doc-riga__btn):not(:disabled) {
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
text-shadow: none !important;
}
/* Solo tema scuro: nel tema «ToBePolo» il contenuto sta su fondo chiaro e la menta
andava a 1,5:1 (link delle pagine legali, menu dell account, tabelle dell Ufficio; giro 24/9). */
html[data-tbp-theme="dark"] body #main :is(p, li, dd, td) > a:not(.button):not([class*="btn"]):not([class*="cta"]) {
color: #9BDBB5 !important;
-webkit-text-fill-color: #9BDBB5 !important;
}
/* Barra in basso: la voce oro ha il testo verde anche di notte. */
html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body.tbp-has-app-bar .tbp-app-bar__item:is(.is-gold, .tbp-app-bar__item--plus, .tbp-app-bar__item--register, [class*="gold"]) :is(.tbp-app-bar__label, span) {
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
}
html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body .tbp-notifiche-invito {
background: #1e1e1e !important;
border-color: #333333 !important;
}
html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body .tbp-notifiche-invito :is(p, span, strong, .tbp-notifiche-invito__testo) {
color: #ededed !important;
-webkit-text-fill-color: #ededed !important;
}
html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body .tbp-colombo-chat__dismiss {
background: #1e1e1e !important;
color: #ededed !important;
border-color: #333333 !important;
}
}
/* =========================================================================
* Ufficio (D73) — 23/9/2026
*
* Le regole decise la notte del 23/9 portate dentro l'Ufficio (WCFM), piu' le
* icone lava di stati vuoti, titoli e righe (servono anche nell'account).
* Le regole che devono vincere sui fogli WCFM (caricati dopo questo file e
* pieni di !important con id) stanno nello strato tbp-appearance. Le regole
* delle icone restano fuori dallo strato e senza !important sulle misure:
* le misure le danno gli attributi width/height delle immagini.
* ========================================================================= */
/* --- Icone lava: stati vuoti, titoli, righe ------------------------------- */
.tbp-empty-state__mark {
display: block;
margin: 0 0 12px;
line-height: 0;
}
.tbp-empty-state__mark img.tbp-empty-state__icon {
display: inline-block;
max-width: none;
object-fit: contain;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
td > .tbp-empty-state__mark {
margin: 8px 0 10px;
}
/* Nei riquadri a riga (invito alla prima esperienza) l'icona sta a sinistra. */
.tbp-dashboard-first-esperienza > .tbp-empty-state__mark {
flex: 0 0 auto;
margin: 0;
}
img.tbp-title-icon {
display: inline-block;
margin: 0 12px 0 0;
vertical-align: middle;
object-fit: contain;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
img.tbp-row-icon {
display: inline-block;
margin: 0 10px 0 0;
vertical-align: middle;
object-fit: contain;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* Righe «Dati fiscali»: icona, testo, pulsante. */
html body .tbp-fiscal-todo__row > img.tbp-row-icon {
flex: 0 0 auto;
margin: 0;
align-self: center;
}
html body .tbp-fiscal-todo__row > img.tbp-row-icon + div {
flex: 1 1 auto;
min-width: 0;
}
@media (max-width: 900px) {
html body .tbp-fiscal-todo__row > img.tbp-row-icon {
align-self: flex-start;
}
}
/* Il cerchio giallo con la stellina «✦» non serve piu' sopra la lava. */
html body.woocommerce-account .tbp-flow-orders__empty-state > .tbp-empty-state__mark {
margin: 0 0 16px;
}
@layer tbp-appearance {
/* --- Barra in basso: voci oro con testo verde scuro (D71) e «Crea» lava -- */
html body.tbp-has-app-bar .tbp-app-bar .tbp-app-bar__item--plus .tbp-app-bar__label,
html body.tbp-has-app-bar .tbp-app-bar--auth .tbp-app-bar__item--plus .tbp-app-bar__label {
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
text-shadow: none !important;
-webkit-text-stroke: 0 !important;
}
html body.tbp-has-app-bar .tbp-app-bar__item--create img.tbp-lava-icon {
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
filter: none !important;
opacity: 1 !important;
}
/* --- Ufficio: il rosso solo per errori, annullare e «Riduci» -------------- */
/* «Limite attività: Illimitato», «Limite clienti: Illimitato»: informazione
inutile per chi propone esperienze, e in rosso sembrava un errore. */
html body.tbp-wcfm-ui #wcfm-main-contentainer :is(.wcfm_products_limit_label, .wcfm_customers_limit_label, .wcfm_articles_limit_label, [class*="_limit_label"]) {
display: none !important;
}
html:not([data-tbp-theme="dark"]) body.tbp-wcfm-ui #wcfm_messages_listing .tbp-messages-summary__label {
color: #3E5A4C !important;
-webkit-text-fill-color: #3E5A4C !important;
}
html:not([data-tbp-theme="dark"]) body.tbp-wcfm-ui #wcfm_messages_listing .tbp-messages-summary__total {
color: #10261B !important;
-webkit-text-fill-color: #10261B !important;
}
html:not([data-tbp-theme="dark"]) body.tbp-wcfm-ui #wcfm_messages_listing .tbp-messages-summary__icon:not(.tbp-messages-summary__icon--lava) {
background: #EDF2EE !important;
color: #084828 !important;
}
/* Report: le cifre nel colore del testo; la cornice colorata resta (legenda). */
html:not([data-tbp-theme="dark"]) body.tbp-wcfm-ui #wcfm-main-contentainer .chart-legend li :is(strong, .amount, .woocommerce-Price-amount, bdi, span) {
color: #10261B !important;
-webkit-text-fill-color: #10261B !important;
}
html[data-tbp-theme="dark"] body.tbp-wcfm-ui #wcfm-main-contentainer .chart-legend li :is(strong, .amount, .woocommerce-Price-amount, bdi, span) {
color: #ededed !important;
-webkit-text-fill-color: #ededed !important;
}
/* --- Ufficio: almeno 44 px per il dito ----------------------------------- */
html body.tbp-wcfm-ui #wcfm-main-contentainer :is(.tbp-calendario-nav-btn, .tbp-calendario-view, .tbp-wcfm-export-dropdown__trigger, .dt-button, .wcfm_bulk_mark_read, .wcfm_bulk_mark_delete) {
min-height: 44px !important;
}
html body.tbp-wcfm-ui #wcfm-main-contentainer .tbp-calendario-nav-btn {
min-width: 44px !important;
}
/* --- Ufficio: titoli sulla scala 32 / 24 / 19, Manrope ------------------ */
/* Il percorso di creazione (esperienze-manage) ha la sua tipografia: resta fuori. */
html body.tbp-wcfm-ui:not(.tbp-wcfm-esperienze-manage) #wcfm-main-contentainer h1:not(.screen-reader-text) {
font-family: Manrope, "Helvetica Neue", Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
}
html body.tbp-wcfm-ui:not(.tbp-wcfm-esperienze-manage) #wcfm-main-contentainer h2:not(.screen-reader-text) {
font-family: Manrope, "Helvetica Neue", Arial, sans-serif !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
}
html body.tbp-wcfm-ui:not(.tbp-wcfm-esperienze-manage) #wcfm-main-contentainer h3:not(.screen-reader-text) {
font-family: Manrope, "Helvetica Neue", Arial, sans-serif !important;
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
}
}
/* ------------------------------------------------------------------
Collaudo notturno 23/9: testo bianco su fondo chiaro nel tema chiaro.
Una regola generica rende bianco il testo di bottoni ed etichette;
qui le schede non attive e le etichette tornano leggibili.
------------------------------------------------------------------ */
@layer tbp-appearance {
html body .wpcf7-form .wpcf7-list-item-label {
color: #10261B !important;
-webkit-text-fill-color: #10261B !important;
}
html body .tbp-flow-orders__tabs .tbp-flow-orders__tab:not(.is-active),
html body .tbp-calendario-view-toggle .tbp-calendario-view:not(.is-active) {
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
}
html[data-tbp-theme="dark"] body .tbp-flow-orders__tabs .tbp-flow-orders__tab:not(.is-active),
html[data-tbp-theme="dark"] body .tbp-calendario-view-toggle .tbp-calendario-view:not(.is-active) {
background: #1E1E1E !important;
border-color: #3A3A3A !important;
color: #EDEDED !important;
-webkit-text-fill-color: #EDEDED !important;
}
html[data-tbp-theme="dark"] body .tbp-calendario-view-toggle {
background: #1E1E1E !important;
border-color: #3A3A3A !important;
}
}
/* 23/9: marchio della testata senza lampo. Le due versioni sono già nella
pagina (tbp_s4_brand_lockup_html, 'doppio'); il tema, messo nell'head prima
del disegno, sceglie quale si vede. */
@layer tbp-appearance {
html body img.tbp-brand-lockup__img--scuro { display: none !important; }
html[data-tbp-theme="dark"] body #header img.tbp-brand-lockup__img--chiaro { display: none !important; }
html[data-tbp-theme="dark"] body #header img.tbp-brand-lockup__img--scuro {
display: block !important;
/* Una regola vecchia azzera il secondo del logo (era il logo scuro di
Flatsome): qui prende le misure del marchio chiaro. */
width: auto !important;
max-width: min(100%, 62vw) !important;
min-width: 0 !important;
flex: 0 0 auto !important;
flex-basis: auto !important;
}
}
/* 23/9: testi che lo script di contrasto correggeva dopo il caricamento
(si vedevano prima sbagliati e poi giusti). Ora il colore giusto è nel CSS
e lo script non ha più niente da correggere su queste parti. */
@layer tbp-appearance {
/* Il nastro dei partner sotto il catalogo resta di vetro chiaro anche nel
tema scuro; quello sopra la mappa della home è scuro e resta com'è. */
html[data-tbp-theme="dark"] body .tbp-partner-nastro-ancora .tbp-partner-nastro__titolo,
html[data-tbp-theme="dark"] body .tbp-partner-nastro-ancora .tbp-partner-nastro__voce,
html[data-tbp-theme="dark"] body .tbp-partner-nastro-ancora .tbp-partner-nastro__voce span {
color: #10261B !important;
-webkit-text-fill-color: #10261B !important;
}
html[data-tbp-theme="tobepolo"] body :is(
.tbp-desktop-nav__label,
.tbp-app-bar__label,
.tbp-header-signature,
.tbp-appearance--header legend,
#tbp-reviews-title,
.tbp-recensioni-empty,
.tbp-correlate__titolo,
.tbp-catalogo-heading h1,
.tbp-catalogo-lead,
.tbp-catalogo-caption,
.tbp-catalogo-download__nota,
.tbp-home-feed__live,
#tbp-language-loading-title
) {
/* Nel tema «ToBePolo» testata, titoli e barra stanno sul velo tricolore
chiaro: testo verde scuro, come nella home. */
color: #10261B !important;
-webkit-text-fill-color: #10261B !important;
}
html[data-tbp-theme="tobepolo"] body #tbp-app-bar .tbp-app-bar__label {
color: #10261B !important;
-webkit-text-fill-color: #10261B !important;
}
html[data-tbp-theme="tobepolo"] body.tbp-auth-flow .tbp-auth-root .tbp-social-btn .tbp-social-btn__soon,
html[data-tbp-theme="tobepolo"] body .tbp-social-btn .tbp-social-btn__soon {
color: #10261B !important;
-webkit-text-fill-color: #10261B !important;
}
}
/* Nota sotto la mappa della pagina esperienza (23/9). */
.tbp-exp-single-map__nota { margin: 8px 0 0 !important; font-size: 13px !important; line-height: 1.4 !important; color: #5D786B !important; }
@layer tbp-appearance { html[data-tbp-theme="dark"] body .tbp-exp-single-map__nota { color: #B5B5B5 !important; -webkit-text-fill-color: #B5B5B5 !important; } }
/* Ringraziamento a 3LE.it sotto il marchio della collaborazione (23/9). */
html body .tbp-mega-footer__grazie { margin: 6px 0 0 !important; text-align: center !important; font-size: 13px !important; line-height: 1.4 !important; opacity: .85; }
html body .tbp-mega-footer__grazie a { text-decoration: underline; text-underline-offset: 2px; }
/* 23/9 (video di Elind, registrazione): nel riquadro d'errore c'era un buco prima di ogni punto («tuo account .»):
Flatsome da' 15 px di margine destro a ogni link dentro .message-container,
pensato per un bottone, non per un link dentro la frase. */
html body :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) .message-container a:not(.button):not(.wc-forward),
html body :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) li a:not(.button):not(.wc-forward) {
margin: 0 !important;
}
/* 23/9 (CEO): home in tema scuro nero continuo, come il bianco su bianco del
tema chiaro. Niente verdognolo: testata, cornice della mappa, velo fuori
dall'Italia, nastro dei partner e riga dei crediti sullo stesso nero. */
@layer tbp-appearance {
html[data-tbp-theme="dark"] body.tbp-home-map,
html[data-tbp-theme="dark"] body.tbp-home-map :is(#wrapper, #main, .page-wrapper, #header, .header-wrapper, #masthead, .header-main, .header-bg-container, .header-bg-color, .tbp-home-intro, #tbp-home-map, .tbp-map-frame, .leaflet-container, .tbp-home-map__partner, .tbp-partner-nastro, .tbp-partner-nastro-ancora) {
background: #000 !important;
background-color: #000 !important;
background-image: none !important;
border-color: #1a1a1a !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map .tbp-velo-paesi { fill: #000 !important; fill-opacity: 1 !important; }
html[data-tbp-theme="dark"] body.tbp-home-map :is(.leaflet-control-attribution, .tbp-map-crediti, .tbp-home-map__crediti) {
background: #000 !important;
color: #B5B5B5 !important;
}
html[data-tbp-theme="dark"] body.tbp-home-map .tbp-partner-nastro :is(.tbp-partner-nastro__titolo, .tbp-partner-nastro__voce, .tbp-partner-nastro__voce span) {
color: #EDEDED !important;
-webkit-text-fill-color: #EDEDED !important;
}
}
/* 23/9 (CEO): AI Colombo nel tema scuro senza alone luminoso. Come il marchio
(D67): il volto sta su un quadrato bianco stondato, stile icona dell'app. */
@layer tbp-appearance {
html[data-tbp-theme="dark"] body img[src*="colombo-face-transparent-20260916.png"],
html[data-tbp-theme="dark"] body #tbp-language-loading img.tbp-language-loading__colombo {
filter: none !important;
background: #FFFFFF !important;
border-radius: 24% !important;
padding: 0 !important;
box-sizing: border-box !important;
object-fit: contain !important;
box-shadow: none !important;
}
}
/* Scarica l'app nel footer (Elind, 23/9): due bottoni scuri tipo badge degli
store, sotto «Seguici». «In arrivo» finché l'app non è pubblicata. */
html body .tbp-mega-footer__etichetta--app { margin-top: 18px !important; }
html body .tbp-mega-footer__app { display: flex; flex-wrap: wrap; gap: 10px; }
html body .tbp-mega-footer__app[hidden], html body .tbp-mega-footer__etichetta--app[hidden] { display: none !important; }
html body .tbp-mega-footer__store {
display: inline-flex; align-items: center; gap: 9px;
min-height: 48px; padding: 7px 16px 7px 12px;
border-radius: 12px; background: #000; color: #fff !important;
text-decoration: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
html body .tbp-mega-footer__store svg { width: 24px; height: 24px; flex: none; }
html body .tbp-mega-footer__app-testo { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
html body .tbp-mega-footer__app-testo small { font-size: 10.5px; font-weight: 500; opacity: .85; letter-spacing: .01em; }
html body .tbp-mega-footer__app-testo strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
html body .tbp-mega-footer__store.is-in-arrivo { cursor: default; }
html body .tbp-mega-footer__store.is-in-arrivo small { color: #F4C95D; opacity: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; }
html body a.tbp-mega-footer__store:hover { background: #1a1a1a; }
@media (max-width: 849px) { html body .tbp-mega-footer__app { justify-content: center; } }
/* Il ringraziamento a 3LE va a capo: la regola «nowrap» del credito lo
stendeva su una riga sola e schiacciava Contatti e Seguici (23/9). */
html body .tbp-mega-footer__blocco--marchio .tbp-mega-footer__credito p.tbp-mega-footer__grazie { white-space: normal !important; max-width: 34ch; }
@media (min-width: 850px) { html body .tbp-mega-footer__blocco--marchio .tbp-mega-footer__credito p.tbp-mega-footer__grazie { margin-left: auto; text-align: right; } }
html body .tbp-mega-footer__app-testo small, html body .tbp-mega-footer__app-testo strong { white-space: nowrap; }
html body .tbp-mega-footer__credito { flex-wrap: wrap; }
@media (min-width: 850px) { html body .tbp-mega-footer__blocco--marchio .tbp-mega-footer__credito p.tbp-mega-footer__grazie { flex-basis: 100%; margin: 10px 0 0 auto; } }
@media (min-width: 850px) { html body .tbp-mega-footer__blocco--marchio .tbp-mega-footer__credito p.tbp-mega-footer__grazie { flex: 0 0 100%; max-width: none; } }
@media (min-width: 850px) { html body .tbp-mega-footer__blocco--marchio { max-width: 440px; } }
/* Trustpilot nel footer (24/9): sotto «Scarica l'app», stesso bottone scuro
degli store; con il consenso ai contenuti esterni lo sostituisce la
TrustBox ufficiale (iframe, tema scuro). */
html body .tbp-mega-footer__etichetta--trustpilot { margin-top: 18px !important; }
html body .tbp-mega-footer__trustpilot[hidden], html body .tbp-mega-footer__etichetta--trustpilot[hidden] { display: none !important; }
html body .tbp-mega-footer__trustpilot .tbp-trustpilot-box { max-width: 320px; }
html body .tbp-mega-footer__trustpilot .tbp-trustpilot-box.is-trustbox { min-height: 52px; }
html body .tbp-mega-footer__trustpilot .tbp-trustpilot-box iframe { display: block; }
@media (max-width: 849px) {
html body .tbp-mega-footer__trustpilot { display: flex; justify-content: center; }
html body .tbp-mega-footer__trustpilot .tbp-trustpilot-box { width: 100%; display: flex; justify-content: center; }
}
/* Le etichette «Scarica l'app» e «Recensioni» stavano attaccate al blocco
sopra: la regola generale delle etichette (.tbp-mega-footer .…__etichetta)
pesa di più e azzerava il margine di 18 px (24/9). */
html body .tbp-mega-footer .tbp-mega-footer__etichetta--app,
html body .tbp-mega-footer .tbp-mega-footer__etichetta--trustpilot { margin-top: 22px !important; }
/* ==========================================================================
Giro qualita' 24/9 (prima del lancio del 29/9)
========================================================================== */
@layer tbp-appearance {
/* Accesso e registrazione nel tema «ToBePolo»: il fondo e' il velo tricolore
chiaro, ma tbp-auth-flow.css dava a questi testi il bianco del tema scuro
(motto, «Non hai ancora un account?», «Recuperala via email» invisibili). */
html[data-tbp-theme="tobepolo"] body.tbp-auth-flow .tbp-auth-root :is(.tbp-registrati__invito, .tbp-auth-step__lead, .tbp-auth-progress__label, .tbp-account-claim) {
color: #10261B !important;
-webkit-text-fill-color: #10261B !important;
}
html[data-tbp-theme="tobepolo"] body.tbp-auth-flow .tbp-auth-root .tbp-auth-link {
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}
}
/* Bottoni neri degli store e di Trustpilot nel piede: nelle pagine dell'account
(login, registrazione, Il mio account) la regola verde dei testi di
WooCommerce scriveva verde scuro su nero (1,97:1). */
html body .tbp-mega-footer .tbp-mega-footer__store :is(.tbp-mega-footer__app-testo, .tbp-mega-footer__app-testo small, .tbp-mega-footer__app-testo strong) {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}
/* Ufficio, Impostazioni: la scheda aperta (fondo verde) aveva il nome verde. */
html body :is(#wcfm_settings_form, #wcfm_profile_form, #wcfm_vendors_new_form) .tbp-wcfm-settings-sidebar .page_collapsible.collapse-open :is(.page_collapsible_content_holder, label) {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}
/* ... e «Aggiorna il tuo profilo Professionista» usciva dal bottone. */
html body .tbp-onboarding-reopen--wcfm-profile .tbp-onboarding-reopen__button {
white-space: normal !important;
height: auto !important;
line-height: 1.25 !important;
text-align: center !important;
}
/* Ufficio, Mestieri ed esperienze: sul telefono il secondo «Crea una esperienza»
finiva sopra la testata, attaccato al bordo destro. Ci sono gia' il «+»
della tabella, «Nuova esperienza» e «Crea» nella barra in basso. */
html body #wcfm_esperienze_listing .tbp-wcfm-crea-esperienza { display: none !important; }
/* Ufficio: grigi di WCFM sotto 3:1 su bianco (cliente, «attraverso Stripe…»),
etichette del Libro mastro bianco su azzurro/verde chiaro (2,4-2,7:1). */
html:not([data-tbp-theme="dark"]) body :is(#wcfm-main-contentainer, #wcfm-content, .wcfm-content) :is(.wcfm_order_by_customer, small.meta), html:not([data-tbp-theme="dark"]) body span.wcfm_order_by_customer {
color: #5D6B64 !important;
}
html body #wcfm-main-contentainer .wcfmmp-ledger-type:is(.wcfmmp-ledger-type-order, .wcfmmp-ledger-type-withdraw) {
color: #10261B !important;
}
html body .unread_notification_count { background: #D0161A !important; color: #FFFFFF !important; }
html:not([data-tbp-theme="dark"]) body .tbp-kind-choice__hint { color: #4F6A5D !important; }
/* Carrello: «Rimuovi» grigio chiaro (1,6:1). */
html:not([data-tbp-theme="dark"]) body a.remove.tbp-flow-cart-remove { color: #5D6B64 !important; }
/* Barra in basso in inglese e francese: «Catalogu|e», «Recherche|r» andavano a
capo a meta' parola (overflow-wrap: anywhere su 58 px). Si va a capo solo
fra parole o al trattino, con 6 px di respiro per lato. */
html body #tbp-app-bar .tbp-app-bar__label {
overflow-wrap: normal !important;
word-break: normal !important;
margin-left: -6px !important;
margin-right: -6px !important;
width: calc(100% + 12px) !important;
max-width: none !important;
}
/* Editor delle esperienze (Ufficio). Tema scuro: la fascia «In attesa di
approvazione» aveva il testo verde scuro sul nero (1,15:1). */
@layer tbp-appearance {
html[data-tbp-theme="dark"] body .tbp-esperienze-pending-banner :is(.tbp-esperienze-pending-banner__text, .tbp-esperienze-pending-banner__text *, strong, p, span) {
color: #EDEDED !important;
-webkit-text-fill-color: #EDEDED !important;
}
}
/* ... e nei temi chiari la nota sotto «Mestiere / Esperienza» restava a 4,46:1. */
html:not([data-tbp-theme="dark"]) body.tbp-wizard-fullscreen #wcfm_esperienze_manage_form.tbp-wizard-flow .tbp-kind-choice__hint,
html:not([data-tbp-theme="dark"]) body #wcfm_esperienze_manage_form .tbp-kind-choice__hint {
color: #4F6A5D !important;
}
/* Creazione guidata delle esperienze: «Avanti», «Vista classica» / «Modalità
guidata», l'etichetta «Facoltativo» e la spunta delle scelte erano oro con la
scritta ROSSA e l'ombra (regola del 13/9). Dal 23/9 (D71) ogni bottone oro ha
la scritta verde scuro #084828 e niente ombre; il rosso resta agli errori. */
html body .tbp-wizard-view-toggle,
html body .tbp-wizard-view-toggle.is-pc,
html body.tbp-wizard-fullscreen .tbp-wizard-view-toggle,
html body.tbp-wizard-fullscreen .tbp-wizard-flow__next,
html body.tbp-wizard-fullscreen .tbp-wizard-flow__badge {
color: #084828 !important;
-webkit-text-fill-color: #084828 !important;
text-shadow: none !important;
box-shadow: none !important;
}
html body.tbp-wizard-fullscreen #wcfm_esperienze_manage_form.tbp-wizard-flow .cx-radio-item:has(> input:checked)::before,
html body.tbp-wizard-fullscreen #wcfm_esperienze_manage_form.tbp-wizard-flow .tbp-kind-choice__card:has(input:checked)::before,
html body.tbp-wizard-fullscreen #wcfm_esperienze_manage_form.tbp-wizard-flow .tbp-pill-check-group > .cx-radio-item:has(> input:checked)::before {
color: #084828 !important;
box-shadow: none !important;
}
/* Il fondo della fascia era verde trasparente: lo script del contrasto vedeva
sotto il bianco del contenitore WCFM e scuriva di nuovo il testo. Fondo pieno. */
@layer tbp-appearance {
html[data-tbp-theme="dark"] body .tbp-esperienze-pending-banner { background: #1B2D23 !important; }
}
/* Nome del cliente nelle Prenotazioni dell'Ufficio: #999 su bianco (2,85:1). */
html:not([data-tbp-theme="dark"]) body #wcfm-main-contentainer table.dataTable tbody td .wcfm_order_by_customer,
html:not([data-tbp-theme="dark"]) body #wcfm-main-contentainer table.dataTable tbody td small.meta {
color: #5D6B64 !important;
}
/* Niente ombre sui bottoni oro (D71): «Accedi» del login e la voce oro della barra in basso. */
html body.tbp-auth-flow .tbp-auth-root :is(.tbp-auth-flow__submit, button.woocommerce-form-login__submit, button.woocommerce-form-register__submit),
html body #tbp-app-bar .tbp-app-bar__item:is(.is-gold, .tbp-app-bar__item--plus, .tbp-app-bar__item--register, [class*="gold"]) {
box-shadow: none !important;
}
@layer tbp-appearance {
/* Il flusso a schermo intero rimetteva l'ombra con !important: nel layer vince. */
html body.tbp-auth-flow :is(.tbp-auth-flow__submit, .tbp-auth-flow__next, button.woocommerce-form-login__submit, button.woocommerce-form-register__submit) {
box-shadow: none !important;
}
}
/* 25/9 (CEO): App Store, Google Play e Trustpilot su una riga sola, più
compatti; nel footer niente righe divisorie (troppo «template»): i blocchi
si separano con lo spazio. */
html body .tbp-mega-footer__badge-riga { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; }
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__store { flex: 1 1 0; min-width: 0; max-width: 170px; min-height: 44px; padding: 6px 10px 6px 8px; gap: 7px; border-radius: 10px; }
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__store svg { width: 20px; height: 20px; }
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__app-testo small { font-size: 8.5px; letter-spacing: .04em; }
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__app-testo strong { font-size: 13.5px; white-space: nowrap; }
@media (max-width: 380px) { html body .tbp-mega-footer__badge-riga { gap: 6px; } html body .tbp-mega-footer__badge-riga .tbp-mega-footer__app-testo strong { font-size: 12px; } html body .tbp-mega-footer__badge-riga .tbp-mega-footer__store { padding: 6px 7px; gap: 5px; } }
html body .tbp-mega-footer__etichetta--trustpilot { display: none !important; }
html body .tbp-mega-footer__fondo, html body .tbp-mega-footer__blocco, html body .tbp-mega-footer__chiusura { border-top: 0 !important; border-bottom: 0 !important; }
@media (max-width: 849px) { html body .tbp-mega-footer__blocco { padding: 18px 0 !important; } html body .tbp-mega-footer__chiusura { padding-top: 22px !important; } }
/* 25/9, voce ToBePolo: niente decorazioni che non dicono niente.
- Le spunte della pagina «Proponi»: erano rosse, e il rosso è solo per
errori, annulla e «Riduci» (D71).
- «I nostri obiettivi» in Chi siamo: il titolo stava in una pillola grigia
come fosse una scheda.
- Le quattro foto inclinate delle sezioni verdi (Chi siamo, Il progetto,
Proponi): coprivano i testi delle schede vicine, sul telefono e al
computer. Erano foto generiche, non persone di ToBePolo. */
html body .checklist::before { background-color: #084828 !important; }
html body.chi-siamo .obiettivi .col.large-12 > .col-inner { background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; }
html body section.professionista .section-content > .img { display: none !important; }
html body:not(.contatti) section.professionista { padding-top: 80px !important; padding-bottom: 80px !important; }
@media (max-width: 849px) { html body:not(.contatti) section.professionista { padding-top: 48px !important; padding-bottom: 48px !important; } }
/* 25/9 (CEO, «sta pagina non la sistemi mai»): Dati fiscali in Mio account.
Riquadro centrato a tutta larghezza sul telefono, scelte privato/P.IVA con il
pallino allineato al testo, campi tutti uguali, niente riga divisoria,
avviso di salvataggio nello stesso stile del sito. */
html body .tbp-fiscal-profile { margin: 0 auto 24px !important; max-width: 640px; width: 100%; box-sizing: border-box; }
@media (max-width: 849px) {
html body.woocommerce-account .woocommerce-MyAccount-content:has(.tbp-fiscal-profile) { padding-left: 0 !important; padding-right: 0 !important; }
html body .tbp-fiscal-profile { padding: 22px 18px !important; }
}
html body .tbp-fisc__scelta { display: grid; gap: 10px; margin: 8px 0 22px; }
html body .tbp-fisc__opzione { display: grid !important; grid-template-columns: 24px 1fr; align-items: center; column-gap: 14px; padding: 16px 18px !important; margin: 0 !important; border: 1.5px solid #d6ddd8; border-radius: 16px; background: #fff; cursor: pointer; }
html body .tbp-fisc__opzione:has(input:checked) { border-color: #084828; background: #eef5f0; }
html body .tbp-fisc__opzione input[type="radio"] { margin: 0 !important; width: 22px; height: 22px; accent-color: #084828; position: static !important; }
html body .tbp-fisc__opzione-testo { display: grid; gap: 2px; margin: 0 !important; padding: 0 !important; }
html body .tbp-fisc__opzione-testo b { font-size: 17px; font-weight: 700; color: #0f2a1d; }
html body .tbp-fisc__opzione-testo small { font-size: 14px; font-weight: 500; color: #3d5a4a; }
html body .tbp-fisc .tbp-fisc__campo input[type="text"], html body .tbp-fisc .tbp-fisc__campo select { width: 100%; height: 56px; padding: 0 16px !important; border: 1.5px solid #d6ddd8 !important; border-radius: 14px !important; background: #fff !important; font-size: 17px !important; box-shadow: none !important; box-sizing: border-box; }
html body .tbp-fisc .tbp-fisc__campo input[type="text"]:focus, html body .tbp-fisc .tbp-fisc__campo select:focus { border-color: #084828 !important; outline: 2px solid rgba(8,72,40,.18); outline-offset: 0; }
html body .tbp-fiscal-profile__actions { border-top: 0 !important; padding-top: 4px !important; margin-top: 8px !important; }
html body .tbp-fiscal-profile hr { display: none !important; }
html body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message { max-width: 640px; margin: 12px auto 16px !important; border: 0 !important; border-radius: 14px !important; background: #eef5f0 !important; color: #0f2a1d !important; padding: 14px 16px !important; font-size: 16px; }
html[data-tbp-theme="dark"] body .tbp-fisc__opzione { background: #151a17; border-color: #2b3530; }
html[data-tbp-theme="dark"] body .tbp-fisc__opzione:has(input:checked) { background: #16261d; border-color: #7fbf98; }
html[data-tbp-theme="dark"] body .tbp-fisc__opzione-testo b { color: #eef3ef; }
html[data-tbp-theme="dark"] body .tbp-fisc__opzione-testo small { color: #b8c7bd; }
html[data-tbp-theme="dark"] body .tbp-fisc .tbp-fisc__campo input[type="text"], html[data-tbp-theme="dark"] body .tbp-fisc .tbp-fisc__campo select { background: #151a17 !important; border-color: #2b3530 !important; color: #eef3ef !important; }
html[data-tbp-theme="dark"] body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message { background: #16261d !important; color: #eef3ef !important; }
@media (max-width: 849px) {
html body.woocommerce-account.logged-in .woocommerce-MyAccount-content .tbp-fiscal-profile { margin: 8px 0 24px !important; width: 100% !important; max-width: none !important; }
html body.woocommerce-account.logged-in .woocommerce-MyAccount-content:has(.tbp-fiscal-profile) { padding: 0 !important; margin: 0 !important; width: 100% !important; }
}
/* Le regole di Mio account stanno in uno strato con !important: per vincere
serve lo stesso strato (25/9). */
@layer tbp-appearance {
@media (max-width: 849px) {
html body.woocommerce-account.logged-in .woocommerce-MyAccount-content:has(.tbp-fiscal-profile) { padding-left: 0 !important; padding-right: 0 !important; }
html body.woocommerce-account.logged-in .woocommerce-MyAccount-content .tbp-fiscal-profile { width: 100% !important; max-width: none !important; margin: 8px 0 24px !important; padding: 22px 18px !important; }
}
}
@layer tbp-appearance {
html body .tbp-fisc__scelta { display: grid; gap: 10px; margin: 8px 0 22px; }
html body .tbp-fisc__opzione { display: grid !important; grid-template-columns: 24px 1fr; align-items: center; column-gap: 14px; padding: 16px 18px !important; margin: 0 !important; border: 1.5px solid #d6ddd8; border-radius: 16px; background: #fff; cursor: pointer; }
html body .tbp-fisc__opzione:has(input:checked) { border-color: #084828; background: #eef5f0; }
html body .tbp-fisc__opzione input[type="radio"] { margin: 0 !important; width: 22px; height: 22px; accent-color: #084828; position: static !important; }
html body .tbp-fisc__opzione-testo { display: grid; gap: 2px; margin: 0 !important; padding: 0 !important; }
html body .tbp-fisc__opzione-testo b { font-size: 17px; font-weight: 700; color: #0f2a1d; }
html body .tbp-fisc__opzione-testo small { font-size: 14px; font-weight: 500; color: #3d5a4a; }
html body .tbp-fisc .tbp-fisc__campo input[type="text"], html body .tbp-fisc .tbp-fisc__campo select { width: 100%; height: 56px; padding: 0 16px !important; border: 1.5px solid #d6ddd8 !important; border-radius: 14px !important; background: #fff !important; font-size: 17px !important; box-shadow: none !important; box-sizing: border-box; }
html body .tbp-fisc .tbp-fisc__campo input[type="text"]:focus, html body .tbp-fisc .tbp-fisc__campo select:focus { border-color: #084828 !important; outline: 2px solid rgba(8,72,40,.18); outline-offset: 0; }
html body .tbp-fiscal-profile__actions { border-top: 0 !important; padding-top: 4px !important; margin-top: 8px !important; }
html body .tbp-fiscal-profile hr { display: none !important; }
html body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message { max-width: 640px; margin: 12px auto 16px !important; border: 0 !important; border-radius: 14px !important; background: #eef5f0 !important; color: #0f2a1d !important; padding: 14px 16px !important; font-size: 16px; }
html[data-tbp-theme="dark"] body .tbp-fisc__opzione { background: #151a17; border-color: #2b3530; }
html[data-tbp-theme="dark"] body .tbp-fisc__opzione:has(input:checked) { background: #16261d; border-color: #7fbf98; }
html[data-tbp-theme="dark"] body .tbp-fisc__opzione-testo b { color: #eef3ef; }
html[data-tbp-theme="dark"] body .tbp-fisc__opzione-testo small { color: #b8c7bd; }
html[data-tbp-theme="dark"] body .tbp-fisc .tbp-fisc__campo input[type="text"], html[data-tbp-theme="dark"] body .tbp-fisc .tbp-fisc__campo select { background: #151a17 !important; border-color: #2b3530 !important; color: #eef3ef !important; }
html[data-tbp-theme="dark"] body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message { background: #16261d !important; color: #eef3ef !important; }
}
/* 25/9, voce ToBePolo: nelle pagine informative (Come funziona, FAQ,
Pagamenti, Sicurezza, Cancellazioni…) ogni paragrafo stava in una scheda
con il bordo, sei-otto schede identiche una sotto l'altra. Ora sono testo
con spazio fra le sezioni; restano in scheda solo le domande apribili. */
html body .tbp-info-page--guide .tbp-guide { gap: 22px; }
html body .tbp-info-page--guide .tbp-guide > section { border: 0 !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* Google Plus non esiste più dal 2019: il campo nelle impostazioni dell'Ufficio non serve. */
html body #google_plus, html body label[for="google_plus"], html body p.google_plus { display: none !important; }
/* ==========================================================================
LARGHEZZA 25/9 — INIZIO (Claude, controllo «le pagine non devono muoversi
di lato» dai video iPhone di Elind). Blocco unico: chi lavora in questo file
aggiunga fuori da qui. Misure e resoconto: tbp-work/qa/overflow-25-9/.
========================================================================== */
/* 1. Rete di sicurezza. clip non crea un contenitore di scorrimento, quindi
position: sticky continua a funzionare (overflow-x: hidden su body lo
rompeva). Dove clip non esiste si ripiega su hidden, ma solo su ,
che passa il valore alla finestra senza toccare gli sticky. Niente
rimbalzo laterale. */
html, body {
overflow-x: clip;
overscroll-behavior-x: none;
}
@supports not (overflow: clip) {
html { overflow-x: hidden; }
}
/* 2. Pagamento (causa del video «I tuoi dati» tagliato a sinistra). Il
riquadro «Conferma» era largo quanto lo schermo piu' 16 px per lato
(margini negativi): lo scorritore del modulo, overflow auto, diventava
trascinabile di lato e su iPhone tutto il modulo scivolava. Ora sta nei
margini, e lo scorritore scorre solo in verticale. */
@media all {
html body.woocommerce-checkout.tbp-flow.tbp-flow-fullscreen #payment .place-order,
html body.woocommerce-checkout.tbp-flow.tbp-flow-fullscreen #payment .form-row.place-order {
margin: 12px 0 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body.woocommerce-checkout.tbp-flow.tbp-flow-fullscreen .tbp-flow-layout {
overflow-x: hidden !important;
overflow-x: clip !important;
overscroll-behavior-x: none;
touch-action: pan-y pinch-zoom;
/* il campo messo a fuoco non finisce sotto la testata appiccicata
ne' sotto il pulsante in fondo */
scroll-padding-top: 170px;
scroll-padding-bottom: 96px;
}
html body.woocommerce-checkout.tbp-flow.tbp-flow-fullscreen .tbp-flow-layout > * {
min-width: 0;
max-width: 100%;
}
/* Con la tastiera aperta «Continua» non galleggia sopra i campi: torna in
fondo al passo, dove lo si raggiunge scorrendo (la tastiera si chiude con
«Fine» e il pulsante e' li'). */
html.tbp-tastiera-aperta body.woocommerce-checkout.tbp-flow.tbp-flow-fullscreen .tbp-flow-next {
position: relative !important;
bottom: auto !important;
box-shadow: none !important;
}
/* Sopra i tasti restano ~270 px su un telefono piccolo: la testata (X,
titolo, tempo, «Vista classica») ne prendeva 160 e copriva il campo.
Mentre si scrive resta solo X e titolo, come nel flusso di accesso. */
html.tbp-tastiera-aperta body.woocommerce-checkout.tbp-flow.tbp-flow-fullscreen .tbp-flow-toolbar :is(.tbp-flow-toolbar__timer, .tbp-guided-view-toggle) {
display: none !important;
}
html.tbp-tastiera-aperta body.woocommerce-checkout.tbp-flow.tbp-flow-fullscreen .tbp-flow-layout {
scroll-padding-top: 92px;
scroll-padding-bottom: 16px;
}
}
/* 3. Tastiera aperta su qualunque pagina (classe da js/tbp-tastiera.js):
le barre appiccicate si tolgono di mezzo finche' si scrive. Non quella
che contiene il campo attivo (per esempio la chat di Colombo). */
html.tbp-tastiera-su body :is(.tbp-book-strip, .tbp-app-bar, .tbp-app-bar__backdrop, .tbp-colombo-chat__launcher, .tbp-colombo-chat__teaser):not(:focus-within) {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transition: none !important;
}
/* Il campo attivo si ferma sopra le barre fisse rimaste (testata). */
:is(input, select, textarea) {
scroll-margin-top: 96px;
scroll-margin-bottom: 120px;
}
/* 4. Campi a 16 px su telefono e tablet: sotto i 16 px Safari ingrandisce la
pagina da solo al tocco e poi la lascia ingrandita e trascinabile.
Lo zoom con due dita resta libero (niente maximum-scale). I due :not(#…)
alzano la specificita' sopra login.css (0.9em !important con un id nel
selettore: i campi della registrazione cliente erano a 14,4 px). */
@media (max-width: 1024px), (pointer: coarse) {
html body :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea, [contenteditable="true"]):not(#tbp-l1):not(#tbp-l2) {
font-size: max(16px, 1em) !important;
}
}
/* Lo stesso dentro lo strato del tema, per le regole con !important che
vivono li'. */
@layer tbp-appearance {
@media (max-width: 1024px), (pointer: coarse) {
html body :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea, [contenteditable="true"]):not(#tbp-l1):not(#tbp-l2) {
font-size: max(16px, 1em) !important;
}
}
}
/* 5. «Altri mestieri e esperienze che potrebbero interessarti»: su telefono
titolo e carosello partono dallo stesso margine del testo della scheda
(prima sporgevano di 12 px per lato). Il carosello scorre dentro se
stesso, a scatti, senza allargare la pagina. */
@media (max-width: 849px) {
html body .tbp-correlate {
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
max-width: 100%;
}
html body .tbp-correlate__pista {
max-width: 100%;
overscroll-behavior-x: contain;
}
}
/* 6. Ufficio: il grafico delle vendite in Panoramica era largo 340 px anche
in una scatola da 230: si trascinava di lato. Sta nella sua scatola. */
html body #wcfm_dashboard_wc_reports_expander_sales :is(.inside, .chart-container, .chart-placeholder) {
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
html body #wcfm_dashboard_wc_reports_expander_sales .chart-placeholder canvas {
max-width: 100% !important;
height: auto !important;
}
/* 7. Mio account > Dettagli account a 320 px: la griglia del modulo aveva una
colonna «1fr» che non scende sotto il contenuto (248 px in una scatola
da 204): campi e titoli uscivano dal riquadro. E tre imbottiture una
dentro l'altra lasciavano 168 px ai campi. */
@media (max-width: 760px) {
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm:not(#tbp-l1) {
grid-template-columns: minmax(0, 1fr) !important;
}
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm > * {
min-width: 0;
max-width: 100%;
}
}
@media (max-width: 400px) {
html body.woocommerce-account.logged-in #main > #content > .row.row-main .woocommerce > .woocommerce-MyAccount-content:not(#tbp-l1):not(#tbp-l2) {
padding-left: 12px !important;
padding-right: 12px !important;
}
html body.woocommerce-account.logged-in #main > #content .woocommerce-EditAccountForm:not(#tbp-l1) {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
/* 8. Barra dell'app sotto i 390 px (1/10, CPO, kit barra-320-1-10).
Prima (25/9) qui l'icona saliva a 38 px sotto i 360 px (le altre
larghezze hanno 26) e la scritta scendeva a 9,5 px. Ma la scritta resta
a 12 px (scala dei caratteri, D122: niente sotto i 12), quindi la tessera
oro alta 56 px non la conteneva più: icona 5+38, spazio 3, riga 13,
fondo 4 = 63 px, e l'oro (overflow nascosto) tagliava il fondo della
parola in tutte le lingue. E con cinque voci larghe uguali, in FR
«Rechercher» (66 px) toccava «Enseigner».
Ora, solo sotto i 390 px:
- icona a 26 px come alle altre larghezze, e icona e parola 4 px più su
in tutte le voci: la parola sta nella tessera, lontana dal fondo;
- capsula a 6 px dai bordi dello schermo, 2 px di imbottitura, 1 px fra
le voci;
- le voci restano larghe uguali, ma nessuna scende sotto la sua parola
più 3 px per lato (10 px dentro la tessera oro, lontano dagli angoli): se una parola è lunga
(«Rechercher», «Konto erstellen») la sua voce si allarga e le altre
cedono un po' di posto. Fra due parole restano almeno 7 px.
Da 390 a 849 px (telefoni larghi) le misure restano quelle di oggi; cambia
solo dove serve: in DE «Konto erstellen» e in FR «Enseigner» arrivavano
negli angoli della pillola oro, e «Rechercher» era più larga della sua
scatola. Lì la parola tiene 15 px dai lati della tessera oro, che si allarga
solo se la parola lo chiede; le scritte non hanno più margini negativi.
Sopra i 849 px la barra non c'è. */
@media (min-width: 390px) and (max-width: 849px) {
html body.tbp-has-app-bar #tbp-app-bar.tbp-app-bar .tbp-app-bar__item {
min-width: max-content !important;
}
html body.tbp-has-app-bar #tbp-app-bar.tbp-app-bar :is(.tbp-app-bar__item--plus, .tbp-app-bar__item--register) {
max-width: none !important;
}
html body.tbp-has-app-bar #tbp-app-bar.tbp-app-bar .tbp-app-bar__label {
align-self: center !important;
justify-self: center !important;
width: auto !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 3px !important;
padding-right: 3px !important;
overflow: visible !important;
white-space: nowrap !important;
text-overflow: clip !important;
text-align: center !important;
}
/* L'imbottitura sta sulla scritta, non sulla tessera: la larghezza della tessera
resta quella di oggi e cresce solo se la parola più 15 px per lato non ci sta. */
html body.tbp-has-app-bar #tbp-app-bar.tbp-app-bar :is(.tbp-app-bar__item--plus, .tbp-app-bar__item--register) .tbp-app-bar__label {
padding-left: 13px !important;
padding-right: 13px !important;
}
}
@media (max-width: 389px) {
html body.tbp-has-app-bar #tbp-app-bar.tbp-app-bar {
--tbp-app-bar-icon: 26px !important;
left: 6px !important;
right: 6px !important;
padding-left: 2px !important;
padding-right: 2px !important;
column-gap: 1px !important;
gap: 1px !important;
}
/* Icona e parola salgono di 4 px in tutte le voci (stessa riga per tutte): nella tessera oro la parola resta lontana dal fondo. */
html body.tbp-has-app-bar #tbp-app-bar.tbp-app-bar .tbp-app-bar__item {
padding: 1px 0 8px !important;
row-gap: 2px !important;
margin-left: 0 !important;
margin-right: 0 !important;
min-width: max-content !important;
max-width: none !important;
}
/* Nella tessera oro (una pillola: angoli di 28 px) 10 px di lato tengono le parole lunghe fuori dagli angoli. */
html body.tbp-has-app-bar #tbp-app-bar.tbp-app-bar :is(.tbp-app-bar__item--plus, .tbp-app-bar__item--register) {
padding-left: 7px !important;
padding-right: 7px !important;
}
html body.tbp-has-app-bar #tbp-app-bar.tbp-app-bar .tbp-app-bar__label {
align-self: center !important;
justify-self: center !important;
width: auto !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 3px !important;
padding-right: 3px !important;
overflow: visible !important;
white-space: nowrap !important;
text-overflow: clip !important;
text-align: center !important;
}
}
/* LARGHEZZA 25/9 — FINE */
/* Piede, app e recensioni (28/9): da computer la colonna e larga 230-290 px e i tre
bottoni a larghezza fissa tagliavano «App Store» e «Google Play». Ora ogni bottone
prende la larghezza del suo testo e vanno a capo quando serve. */
@media (min-width: 850px) {
html body .tbp-mega-footer__badge-riga { flex-wrap: wrap; justify-content: flex-start; }
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__store { flex: 0 0 auto; max-width: none; }
}
/* Piede, parte bassa (28/9): stessa griglia a 4 colonne delle voci di sopra.
Contatti = col. 1, Seguici e app = col. 2, marchio e grazie = col. 3-4, tutto allineato a sinistra. */
@media (min-width: 1100px) {
html body .tbp-mega-footer__fondo { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 40px !important; align-items: start; }
html body .tbp-mega-footer__fondo > .tbp-mega-footer__blocco--marchio { grid-column: 3 / span 2; justify-self: stretch !important; max-width: none !important; padding-top: 27px; }
html body .tbp-mega-footer__blocco--marchio .tbp-mega-footer__credito,
html body .tbp-mega-footer__blocco--marchio .tbp-mega-footer__loghi { justify-content: flex-start !important; text-align: left !important; }
html body .tbp-mega-footer__blocco--marchio .tbp-mega-footer__credito p.tbp-mega-footer__grazie { margin: 10px 0 0 !important; text-align: left !important; max-width: 46ch !important; }
}
@media (min-width: 1100px) {
html body .tbp-mega-footer__badge-riga { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__store { flex: 0 0 auto; width: 158px; max-width: none; justify-content: flex-start; }
}
/* Piede, parte bassa: una colonna per blocco (Contatti | Seguici | App e recensioni | marchio). */
@media (min-width: 1100px) {
html body .tbp-mega-footer__fondo { grid-template-rows: auto 1fr; row-gap: 14px !important; }
html body .tbp-mega-footer__fondo > .tbp-mega-footer__blocco:first-child { grid-column: 1; grid-row: 1 / span 2; }
html body .tbp-mega-footer__fondo > .tbp-mega-footer__blocco:nth-child(2) { display: contents; }
html body .tbp-mega-footer__fondo > .tbp-mega-footer__blocco:nth-child(2) > .tbp-mega-footer__etichetta:not(.tbp-mega-footer__etichetta--app) { grid-column: 2; grid-row: 1; margin: 0 !important; }
html body .tbp-mega-footer__fondo .tbp-mega-footer__seguici { grid-column: 2; grid-row: 2; align-self: start; margin: 0 !important; padding-top: 0 !important; }
html body .tbp-mega-footer__fondo .tbp-mega-footer__etichetta--app { grid-column: 3; grid-row: 1; margin: 0 !important; }
html body .tbp-mega-footer__fondo .tbp-mega-footer__app { grid-column: 3; grid-row: 2; align-self: start; margin: 0 !important; }
html body .tbp-mega-footer__fondo > .tbp-mega-footer__blocco--marchio { grid-column: 4 !important; grid-row: 1 / span 2; padding-top: 0 !important; }
html body .tbp-mega-footer__blocco--marchio .tbp-mega-footer__credito { flex-wrap: wrap; row-gap: 8px; }
}
/* === PAGINA SICUREZZA (29/9): ruoli, manleva, verifiche, livelli a schede === */
@layer tbp-appearance {
html body .tbp-sicura__ruoli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 8px; }
html body .tbp-sicura__ruolo { background: #F3F7F4; border: 1px solid #D5E4DA; border-radius: 14px; padding: 16px 18px; }
html body .tbp-sicura__ruolo h3 { margin: 0 0 6px !important; font-size: 17px !important; color: #145E3F !important; }
html body .tbp-sicura__ruolo p { margin: 0 !important; font-size: 15px; line-height: 1.5; }
html body .tbp-sicura__due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0; }
html body .tbp-sicura__si, html body .tbp-sicura__no { border-radius: 14px; padding: 16px 18px; border: 1px solid #D5E4DA; }
html body .tbp-sicura__si { background: #EEF6F0; }
html body .tbp-sicura__no { background: #FBF3F1; border-color: #F0D9D4; }
html body .tbp-sicura__si h3, html body .tbp-sicura__no h3 { margin: 0 0 8px !important; font-size: 16px !important; }
html body .tbp-sicura__si h3 { color: #145E3F !important; }
html body .tbp-sicura__no h3 { color: #A3141A !important; }
html body .tbp-sicura__si ul, html body .tbp-sicura__no ul { margin: 0 0 0 18px !important; }
html body .tbp-sicura__livelli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
html body .tbp-sicura__livello { border-radius: 14px; padding: 18px 20px; border: 0; }
html body .tbp-sicura__livello--basso { background: #E4F1E8; }
html body .tbp-sicura__livello--medio { background: #FBF0D6; }
html body .tbp-sicura__livello--alto { background: #FBE3E1; }
html body .tbp-sicura__livello--basso .tbp-sicura__nome { color: #145E3F; }
html body .tbp-sicura__livello--medio .tbp-sicura__nome { color: #7A5A00; }
html body .tbp-sicura__livello--alto .tbp-sicura__nome { color: #A3141A; }
html body .tbp-sicura__livello p { margin: 0 0 8px !important; font-size: 14.5px; line-height: 1.5; }
html body .tbp-sicura__nome { font-weight: 700; font-size: 17px !important; }
html body .tbp-sicura__esempi { color: #4E6457; font-style: italic; }
html body .tbp-sicura__regola { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid rgba(19,38,28,.12); font-weight: 600; margin-bottom: 0 !important; }
@media (max-width: 849px) {
html body .tbp-sicura__ruoli, html body .tbp-sicura__due, html body .tbp-sicura__livelli { grid-template-columns: 1fr; }
}
html[data-theme="dark"] body .tbp-sicura__ruolo, html[data-theme="dark"] body .tbp-sicura__livello, html[data-theme="dark"] body .tbp-sicura__si, html[data-theme="dark"] body .tbp-sicura__no { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] body .tbp-sicura__nome { color: inherit; }
}
/* === FINE PAGINA SICUREZZA === */
html[data-theme="dark"] body .tbp-sicura__livello--basso { background: rgba(62,155,95,.18); }
html[data-theme="dark"] body .tbp-sicura__livello--medio { background: rgba(217,162,27,.18); }
html[data-theme="dark"] body .tbp-sicura__livello--alto { background: rgba(208,22,26,.18); }
html body .tbp-guide .tbp-sicura__livello p.tbp-sicura__nome { font-weight: 700 !important; font-size: 18px !important; margin-bottom: 10px !important; }
html body .tbp-guide .tbp-sicura__livello--basso p.tbp-sicura__nome { color: #145E3F !important; }
html body .tbp-guide .tbp-sicura__livello--medio p.tbp-sicura__nome { color: #7A5A00 !important; }
html body .tbp-guide .tbp-sicura__livello--alto p.tbp-sicura__nome { color: #A3141A !important; }
html body .tbp-guide .tbp-sicura__livello p.tbp-sicura__regola { font-weight: 600 !important; }
html[data-theme="dark"] body .tbp-guide .tbp-sicura__livello p.tbp-sicura__nome { color: #FFFFFF !important; }
html body .tbp-guide .tbp-sicura__livello--basso p.tbp-sicura__nome { -webkit-text-fill-color: #145E3F !important; }
html body .tbp-guide .tbp-sicura__livello--medio p.tbp-sicura__nome { -webkit-text-fill-color: #7A5A00 !important; }
html body .tbp-guide .tbp-sicura__livello--alto p.tbp-sicura__nome { -webkit-text-fill-color: #A3141A !important; }
html[data-theme="dark"] body .tbp-guide .tbp-sicura__livello p.tbp-sicura__nome { -webkit-text-fill-color: #FFFFFF !important; }
/* Configurazione iniziale (29/9): i due paragrafi sotto il titolo erano larghi 290 px
ma attaccati a sinistra; ora il blocco e il testo stanno al centro. */
html body.wcfm-store-setup p.tbp-onb-q--on { margin-left: auto !important; margin-right: auto !important; text-align: center !important; max-width: 34ch; }
@layer tbp-appearance { html body.wcfm-store-setup p.tbp-onb-q--on { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } }
/* === Sicurezza-minori 29/9 — Ufficio admin: card «Adesioni firmate» a 390 px ===
WCFM mette il titolo h2 in float: le card finivano a destra del titolo e
uscivano dal bordo (card 210 px in una colonna di 126 px). Titolo sopra,
card a tutta larghezza su una colonna sotto i 600 px. Nessuna riga colorata. */
body .tbp-kpi-wcfm { display: flow-root; max-width: 100%; box-sizing: border-box; }
body .tbp-kpi-wcfm > h2 { float: none !important; width: auto !important; display: block !important; clear: both; }
body .tbp-kpi-wcfm .tbp-kpi-cards { clear: both; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
body .tbp-kpi-wcfm .tbp-kpi-card { min-width: 0; box-sizing: border-box; }
body .tbp-kpi-wcfm .tbp-kpi-card__label, body .tbp-kpi-wcfm .tbp-kpi-card__foot { overflow-wrap: anywhere; }
@media (max-width: 599px) {
body .tbp-kpi-wcfm .tbp-kpi-cards { grid-template-columns: 1fr; }
}
/* === fine Sicurezza-minori 29/9 === */
/* === Incassi in una schermata 29/9 (onboarding ?store-setup=yes&step=payment) ===
Il metodo di incasso e' sempre il bonifico su IBAN: la tendina resta nel
modulo (la procedura WCFM la legge) ma non si mostra, ne' nella modalita'
guidata ne' nella vista classica. Testo e campi del conto stanno insieme. */
/* :is(#…) pesa come un ID: le regole delle righe (display:grid !important)
hanno fino a sei classi. */
html body.wcfm-store-setup :is(#tbp-onb-flow-content, .wc-setup-content) table.form-table tr.payment_mode_wrapper,
html body.wcfm-store-setup :is(#tbp-onb-flow-content, .wc-setup-content) table.form-table tr.tbp-metodo-fisso { display: none !important; }
body.wcfm-store-setup .wc-setup-content .tbp-incassi-intro { max-width: 100%; overflow-wrap: anywhere; }
/* === fine Incassi in una schermata 29/9 === */
/* === Incassi: solo IBAN 29/9 (onboarding + Impostazioni → Incassi) ===
Intestatario e SWIFT/BIC restano nel modulo (i valori salvati non si
perdono) ma non si mostrano; in Impostazioni sparisce anche la tendina del
metodo. Le regole di wcfm-layout.php che rimettono visibili i campi del
bonifico pesano tre ID e cinque classi: qui la classe ripetuta le supera. */
html body.wcfm-store-setup :is(#tbp-onb-flow-content, .wc-setup-content) table.form-table tr.tbp-campo-nascosto { display: none !important; }
html body #wcfm-main-contentainer #wcfm_settings_form #wcfm_settings_form_payment_expander .tbp-campo-nascosto.tbp-campo-nascosto.tbp-campo-nascosto.tbp-campo-nascosto.tbp-campo-nascosto.tbp-campo-nascosto,
html body #wcfm-main-contentainer #wcfm_settings_form #wcfm_settings_form_payment_expander .tbp-metodo-fisso.tbp-metodo-fisso.tbp-metodo-fisso.tbp-metodo-fisso.tbp-metodo-fisso.tbp-metodo-fisso { display: none !important; }
/* === fine Incassi: solo IBAN 29/9 === */
/* === Badge del piede 30/9 (CEO: «troppo lunghi i rettangoli neri») ===
App Store, Google Play e Trustpilot erano larghi 158 px da computer e fino a 170 px sul
tablet, con 40-60 px vuoti a destra del testo. Ora sono larghi quanto il testo del badge
piu' lungo, come i badge ufficiali, e tutti e tre uguali: una griglia di colonne 1fr larga
«max-content» da' a ogni colonna la misura del badge piu' largo. Telefono: una riga di tre
al centro; se lo schermo e' piu' stretto la griglia si ferma al 100 % e le colonne si
stringono insieme. Computer: una colonna, allineata a sinistra come oggi. */
html body .tbp-mega-footer__badge-riga {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
width: max-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__store {
flex: none;
width: auto;
min-width: 0;
max-width: none;
min-height: 44px;
padding: 6px 8px;
gap: 6px;
justify-content: flex-start;
box-sizing: border-box;
}
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__app-testo strong { font-size: 13px; }
@media (max-width: 380px) {
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__store { padding: 6px 7px; gap: 5px; }
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__store svg { width: 18px; height: 18px; }
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__app-testo strong { font-size: 12px; }
}
@media (min-width: 850px) {
html body .tbp-mega-footer__badge-riga { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-left: 0; margin-right: 0; }
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__store { width: auto; padding: 6px 11px 6px 9px; gap: 7px; }
html body .tbp-mega-footer__badge-riga .tbp-mega-footer__app-testo strong { font-size: 13.5px; }
}
/* === fine Badge del piede 30/9 === */
/* === Marchio «tessera» del tema ToBePolo nazionale 30/9 ===
La testata porta una terza versione del marchio (template-parts/header/partials/element-logo.php):
quadrato bianco dietro il pittogramma come in Space Gray, ToBe verde. Si vede solo nel tema
ToBePolo (css/tbp-tema-nazionale.css); negli altri temi resta nascosta, come quella scura. */
@layer tbp-appearance {
html body img.tbp-brand-lockup__img--tessera { display: none !important; }
}
/* === fine Marchio «tessera» 30/9 === */
/* === Cassetto in armonia (CEO, 1/10: «nel drawer i nomi delle icone sono in grassetto in alcune e
non in altre») ===
Misurato nei tre temi a 390 e 375 px, da ospite e con accesso (kit rilascio/drawer-armonia-1-10).
Prima: «Registrati» peso 600 in Starlight e 800 in Space Black e ToBePolo; righe alte 80 (voci),
56 (Accedi) e 88 (scorciatoie dell'account); distanza icona-testo 6, 8 o 20 px; icona di Registrati
più piccola; bottoni Tema/Suoni/Lingua alti 40 px (sotto i 44 del tocco) con interlinee diverse.
Una regola sola per tutte le voci con icona, in tutti i temi:
- etichetta 18,4 px, peso 600 (il peso delle voci di navigazione del cassetto), interlinea 1,15;
«Registrati» è un bottone oro: peso 800 in tutti e tre i temi, come ogni bottone oro (02_STILE §5,
decisione del CPO 1/10); prima era 600 in Starlight e 800 negli altri due;
- icona in un box 48 x 48 (--tbp-icon), 8 px dal testo;
- righe alte 80 px, una sotto l'altra; «Registrati» resta il bottone oro alto 56 px, con la stessa
icona e il testo oro #052b18 (--tbp-gold-label) in tutti i temi;
- Tema, Suoni, Lingua: 44 px, testo 14 px peso 600, segni alti 18 px, 8 px dal testo.
Nel layer tbp-appearance: la regola che metteva 800 a «Registrati» nei temi scuro e ToBePolo sta lì. */
@layer tbp-appearance {
/* righe con icona */
html body .mfp-content #main-menu > .sidebar-menu > ul > li.menu-item > a,
html body .mfp-content #main-menu .login-registrazione a.login,
html body .mfp-content #main-menu .tbp-account-shortcuts a {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 80px !important;
height: 80px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
font-size: 18.4px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
padding-left: 10px !important;
border-width: 1px !important;
border-style: solid !important;
}
/* Stesso bordo da 1 px su ogni riga, trasparente: l'icona sta in colonna; solo la voce della pagina
aperta tiene la sua pastiglia. AI Colombo e Accedi non l'hanno mai. */
html body .mfp-content #main-menu > .sidebar-menu > ul > li.menu-item:not(.tbp-drawer-current) > a,
html body .mfp-content #main-menu > .sidebar-menu > ul > li.menu-item > a[data-tbp-colombo-open],
html body .mfp-content #main-menu > .sidebar-menu > ul > li.tbp-drawer-colombo > a,
html body .mfp-content #main-menu .login-registrazione a.login,
html body .mfp-content #main-menu .tbp-account-shortcuts a:not(.tbp-drawer-current) {
border-color: transparent !important;
}
html body .mfp-content #main-menu .login-registrazione a.registrazione {
padding-left: 10px !important;
gap: 8px !important;
min-height: 56px !important;
font-size: 18.4px !important;
line-height: 1.15 !important;
}
/* le righe del blocco account e «Accedi» seguono le voci senza salto (prima 4 e 8 px in più) */
html body .mfp-content #main-menu > .sidebar-menu > ul > li.html:has(> .tbp-account-shortcuts),
html body .mfp-content #main-menu > .sidebar-menu > ul > li.html:has(.login-registrazione) {
margin-top: 0 !important;
padding-top: 0 !important;
}
html body .mfp-content #main-menu .tbp-account-shortcuts,
html body .mfp-content #main-menu .login-registrazione {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* il bottone oro si stacca di 8 px dalla riga sopra */
html body .mfp-content #main-menu .login-registrazione a.registrazione {
margin-top: 8px !important;
}
/* etichette: un peso, una misura, un'interlinea */
html body .mfp-content #main-menu > .sidebar-menu > ul > li.menu-item > a > :not(.tbp-lava-icon):not(img):not(svg),
html body .mfp-content #main-menu .login-registrazione a > span:not(.tbp-lava-icon),
html body .mfp-content #main-menu .tbp-account-shortcuts a > :not(.tbp-lava-icon):not(img):not(svg) {
font-size: 18.4px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
letter-spacing: normal !important;
}
html:is([data-tbp-theme]) body .mfp-content #main-menu .login-registrazione a.registrazione,
html:is([data-tbp-theme]) body .mfp-content #main-menu .login-registrazione a.registrazione > span:not(.tbp-lava-icon) {
font-weight: 800 !important;
color: var(--tbp-gold-label, #052b18) !important;
-webkit-text-fill-color: var(--tbp-gold-label, #052b18) !important;
}
/* icone: stesso box 48 x 48 */
html body .mfp-content #main-menu > .sidebar-menu > ul > li.menu-item > a > .tbp-lava-icon,
html body .mfp-content #main-menu .login-registrazione a > .tbp-lava-icon,
html body .mfp-content #main-menu .tbp-account-shortcuts a > .tbp-lava-icon,
html body .mfp-content #main-menu .tbp-account-shortcuts a > img {
flex: 0 0 48px !important;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
max-height: 48px !important;
margin: 0 !important;
}
/* Tema, Suoni, Lingua */
html body .mfp-content #main-menu .tbp-drawer-comandi .tbp-appearance__toggle,
html body .mfp-content #main-menu .tbp-drawer-comandi .tbp-suoni-interruttore--cassetto,
html body .mfp-content #main-menu .tbp-drawer-comandi summary.tbp-lingue__ora {
min-height: 44px !important;
height: 44px !important;
gap: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
html body .mfp-content #main-menu .tbp-drawer-comandi :is(.tbp-appearance__current-label, .tbp-suoni-interruttore__nome, .tbp-lingue__nome) {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
margin: 0 !important;
}
html body .mfp-content #main-menu .tbp-drawer-comandi :is(.tbp-appearance__current, .tbp-suoni-interruttore--cassetto > svg) {
flex: 0 0 18px !important;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
}
html body .mfp-content #main-menu .tbp-drawer-comandi :is(.tbp-appearance__current svg) {
width: 18px !important;
height: 18px !important;
}
html body .mfp-content #main-menu .tbp-drawer-comandi summary.tbp-lingue__ora .tbp-language-flag {
flex: 0 0 27px !important;
width: 27px !important;
height: 18px !important;
margin: 0 !important;
}
html body .mfp-content #main-menu .tbp-drawer-comandi summary.tbp-lingue__ora .tbp-language-flag svg {
display: block !important;
width: 27px !important;
min-width: 0 !important;
max-width: 27px !important;
height: 18px !important;
}
}
/* === fine Cassetto in armonia 1/10 === */
/* 13/10/2026 sera, kit bottoni-senza-sottolineatura-13-10 (CEO, con la foto di «Ripristina filtri» del Catalogo:
«non voglio alcun bottone che abbia gli underlined! togli dappertutto»).
Qui si toglie SOLO la sottolineatura, e solo ai bottoni trovati sottolineati nel giro delle pagine pubbliche: tre
temi, 390 e 1440 px, a riposo, col cursore sopra, col fuoco e premuti. Colori, forme, misure e testi restano
quelli di prima. I link di testo non sono toccati. «Ripristina filtri» ha già la sua regola in tbp-cerca-unica.css.
Sta nello strato delle apparenze perché tre delle regole da battere ci vivono con !important (e lì dentro vince
chi pesa di più); i tre :not(#…) su html danno il peso di tre id senza chiedere un id alla pagina. */
@layer tbp-appearance {
/* 1. Bottoni con la scatola.
Home, testata al computer: «Mestieri ed esperienze» e «Insegna su ToBePolo» si sottolineavano col cursore
sopra (regola scritta in pagina da inc/footer-mega.php).
«Segnala questo profilo», nel foglio di chi insegna: col cursore sopra prende il fondo e si sottolineava
(css/tbp-segnala-blocca.css); la stessa regola vale per «Segnala questa esperienza / questo mestiere». */
html:not(#tbp-bss-a):not(#tbp-bss-b):not(#tbp-bss-c) body.tbp-home-map #header .tbp-home-map__azione[data-tbp-invito],
html:not(#tbp-bss-a):not(#tbp-bss-b):not(#tbp-bss-c) body button.tbp-sb-segnala span,
/* 2. Bottoni di solo testo (