/* * Ippocrate Mobile Optimizer – mobile.css v1.2.0 * ───────────────────────────────────────────────── * SOLO @media (max-width: 768px) — ZERO impatto desktop. * * ARCHITETTURA MODULI [FIX-B]: * Il PHP inietta una body class per ogni modulo abilitato * (es. body.imo-fix-tables). Il CSS usa quella classe come * selettore padre → disattivare un modulo dal pannello admin * rimuove davvero quei CSS. * * REGOLE PROGETTUALI v1.2.0: * [FIX-A] --imo-bg-color RIMOSSA (variabile zombie, non usata) * [FIX-D] body font-size RIMOSSO da body → solo nelle aree contenuto * [FIX-E] body overflow-x: hidden RIMOSSO → overflow-x solo su contenitori * [FIX-F] .nv-single-page-wrap RIMOSSO dal selettore padding (avvolge tutta la pagina) * [FIX-G] Elementor overflow: usa classi specifiche, NON !important globale * [FIX-H] blockquote background usa var(--imo-link-color) con opacity * [FIX-I] .imo-table-wrapper senza border-radius (incompatibile con overflow:auto scroll) */ /* ─── Variabili default — sovrascritte dall'inline PHP ─────── */ :root { --imo-font-size: 17px; --imo-line-height: 1.75; --imo-padding: 18px; --imo-text-color: #2c2c2c; --imo-link-color: #2e7d32; --imo-h1: 26px; --imo-h2: 22px; --imo-h3: 19px; } /* ═══════════════════════════════════════════════════════════════ TUTTO DENTRO @media — ZERO impatto desktop ═══════════════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* ── 1. HTML/BODY base ──────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { /* [FIX-D] NON impostiamo font-size su body: colpirebbe header/nav Neve font-size va sui contenitori specifici sotto */ /* [FIX-E] NON usiamo overflow-x:hidden su body: creerebbe un containing block che impedisce scroll in pre/code e tabelle. L'overflow è gestito elemento per elemento dove serve. */ /* [FIX-SCREENSHOT-1] word-break RIMOSSO dal body: rompeva le parole delle sillaba in sillaba dentro i pulsanti Elementor (es. "Parla con la nostra segreteria" diventava P-a-r-l-a verticale). word-break viene applicato solo sui paragrafi di testo sotto. */ } /* ── 1b. ELEMENTI FIXED/STICKY — mai tagliati ─────────── [FIX-SCREENSHOT-2] Barre urgenza, cookie notice, chat widget, floating CTA: position:fixed li posiziona rispetto al viewport, ma se un antenato ha overflow:hidden diventano un containing block e li taglia. Forziamo overflow:visible su questi elementi. */ [style*="position:fixed"], [style*="position: fixed"], .elementor-sticky, .neve-sticky-nav, .nv-sticky-slot, /* Barre urgenza / countdown comuni nei plugin WP */ .hustle-popup, .hustle-slidein, [class*="urgency-bar"], [class*="urgency_bar"], [class*="sticky-bar"], [class*="hello-bar"], [class*="top-bar"], [class*="promo-bar"], [class*="notice-bar"], [class*="announcement-bar"], [id*="urgency"], [id*="sticky-bar"], [id*="promo-bar"] { /* Garantisce visibilità piena su mobile */ overflow: visible !important; max-width: 100vw !important; box-sizing: border-box !important; /* Testo deve stare su una riga o andare a capo normalmente */ white-space: nowrap; text-overflow: ellipsis; } /* Testo dentro barra urgenza: leggibile su mobile */ [class*="urgency-bar"] *, [class*="urgency_bar"] *, [class*="sticky-bar"] *, [class*="promo-bar"] *, [class*="announcement-bar"] * { font-size: var(--imo-font-size) !important; white-space: nowrap; } /* ── 2. CONTENITORI TESTO — padding laterale ────────────── .entry-content/.post-content → WordPress classico .elementor-widget-text-editor → testo Elementor .elementor-widget-wrap → wrapper widget (no immagini/shape: gestito con .elementor-widget-image:not presente) .wp-block-* → Gutenberg */ .entry-content, .post-content, .page-content, .elementor-widget-text-editor, .elementor-text-editor, .wp-block-group__inner-container, .wp-block-column { padding-left: var(--imo-padding) !important; padding-right: var(--imo-padding) !important; box-sizing: border-box !important; max-width: 100%; } /* ── 3. TIPOGRAFIA — tutte le aree contenuto ───────────── Copre WordPress classico, Elementor e Gutenberg. [FIX-D] font-size ai contenitori, NON al body */ .entry-content p, .post-content p, .page-content p, .elementor-widget-text-editor p, .elementor-text-editor p, .elementor-widget-container p, .wp-block-paragraph { font-size: var(--imo-font-size) !important; line-height: var(--imo-line-height) !important; color: var(--imo-text-color); word-break: break-word; overflow-wrap: break-word; margin-bottom: 1em !important; } /* Liste */ .entry-content li, .post-content li, .elementor-widget-text-editor li, .elementor-text-editor li { font-size: var(--imo-font-size) !important; line-height: var(--imo-line-height) !important; margin-bottom: 0.4em; } .entry-content ul, .entry-content ol, .post-content ul, .post-content ol, .elementor-widget-text-editor ul, .elementor-widget-text-editor ol { padding-left: 1.4em !important; margin-bottom: 1em !important; } /* Titoli WordPress classico */ .entry-content h1, /* Titoli WordPress */ .entry-content h1, .post-content h1, /* Titoli Elementor grandi */ .elementor-heading-title.elementor-size-xxl, .elementor-heading-title.elementor-size-xl, .elementor-widget-heading h1 .elementor-heading-title, .elementor-widget-heading .elementor-heading-title[class*="size-xl"] { font-size: var(--imo-h1) !important; line-height: 1.3 !important; margin-top: 1.2em !important; margin-bottom: 0.5em !important; } .entry-content h2, .post-content h2, .elementor-heading-title.elementor-size-large, .elementor-widget-heading h2 .elementor-heading-title { font-size: var(--imo-h2) !important; line-height: 1.35 !important; margin-top: 1.2em !important; margin-bottom: 0.45em !important; } .entry-content h3, .entry-content h4, .post-content h3, .post-content h4, .elementor-heading-title.elementor-size-medium, .elementor-heading-title.elementor-size-small, .elementor-widget-heading h3 .elementor-heading-title, .elementor-widget-heading h4 .elementor-heading-title { font-size: var(--imo-h3) !important; line-height: 1.4 !important; margin-top: 1em !important; margin-bottom: 0.4em !important; } /* Link contenuto */ .entry-content a, .post-content a, .elementor-widget-text-editor a { color: var(--imo-link-color); text-underline-offset: 3px; } /* ── 4. [MOD: imo-fix-images] IMMAGINI FLUID ───────────── NON su img generico: romperebbe logo Neve nell'header */ body.imo-fix-images .entry-content img, body.imo-fix-images .post-content img, body.imo-fix-images .nv-content-wrap img, body.imo-fix-images .elementor-widget-image img, body.imo-fix-images .wp-block-image img, body.imo-fix-images figure.wp-block-image img { max-width: 100% !important; height: auto !important; /* NON display:block: preserva immagini inline nel testo */ } body.imo-fix-images .entry-content .aligncenter, body.imo-fix-images .entry-content .alignleft, body.imo-fix-images .entry-content .alignright { max-width: 100% !important; float: none !important; margin-left: auto !important; margin-right: auto !important; } body.imo-fix-images figure.wp-block-image, body.imo-fix-images .entry-content figure { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; } /* ── 5. [MOD: imo-fix-tables] TABELLE RESPONSIVE ───────── [FIX-I] RIMOSSO border-radius dal wrapper: è incompatibile con overflow-x:auto (scroll). Per avere il radius servirebbe overflow:hidden che blocca lo scroll → meglio senza radius. */ body.imo-fix-tables .imo-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; width: 100%; margin-bottom: 1.2em; border: 1px solid #e0e0e0; /* border-radius RIMOSSO intenzionalmente [FIX-I] */ } /* min-width solo dentro il wrapper, NON globale */ body.imo-fix-tables .imo-table-wrapper table { min-width: 480px; border-collapse: collapse; font-size: calc(var(--imo-font-size) - 1px) !important; } body.imo-fix-tables .imo-table-wrapper th, body.imo-fix-tables .imo-table-wrapper td { padding: 10px 12px !important; text-align: left; vertical-align: top; border-bottom: 1px solid #e0e0e0; white-space: normal; } body.imo-fix-tables .imo-table-wrapper th { background: #f5f5f5; font-weight: 600; } /* ── 6. [MOD: imo-fix-buttons] PULSANTI TOUCH-FRIENDLY ─── NON tocca .menu-toggle e .search-toggle di Neve [FIX-SCREENSHOT-1] Il pulsante Elementor nello screenshot ("Parla con la nostra segreteria") era fuori da .entry-content → aggiunto selettore diretto .elementor-button senza parent */ /* FIX GLOBALE word-break su TUTTI i pulsanti (indipendente dal modulo): word-break:break-word eredita dal body e spezza le parole dei bottoni. */ a.button, .wp-block-button__link, .elementor-button, button:not(.menu-mobile-toggle):not(.search-toggle):not(.nv-close-nav) { word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } body.imo-fix-buttons .entry-content a.button, body.imo-fix-buttons .entry-content .wp-block-button__link, body.imo-fix-buttons .elementor-button, body.imo-fix-buttons .woocommerce a.button, body.imo-fix-buttons .woocommerce button.button, body.imo-fix-buttons .woocommerce input[type="submit"], body.imo-fix-buttons .add_to_cart_button, body.imo-fix-buttons .single_add_to_cart_button, body.imo-fix-buttons .checkout-button, body.imo-fix-buttons .wc-proceed-to-checkout .checkout-button, body.imo-fix-buttons input[type="submit"] { min-height: 48px !important; padding: 12px 22px !important; font-size: var(--imo-font-size) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; cursor: pointer !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent; box-sizing: border-box !important; /* [FIX-SCREENSHOT-1] Impedisce il testo verticale lettera per lettera. white-space:normal + word-break:normal = le parole si spezzano solo agli spazi, non a metà sillaba. Il pulsante si allarga se serve. */ white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; /* [FIX-IMG1] min-width RIMOSSO: causava il debordamento del pulsante verde fuori dal card container Elementor. Il pulsante usa la larghezza che il container gli assegna. */ } /* ── 7. [MOD: imo-tap-targets] TAP TARGETS WCAG ───────── SOLO pulsanti generici. [FIX-IMG4] I CSS sui link di navigazione Neve (.nv-nav-wrap) con display:flex !important rompevano completamente il pannello menu mobile di Neve: il menu si apriva ma mostrava il contenuto della pagina invece del pannello nav. RIMOSSO interamente il blocco nav — Neve gestisce già i suoi tap target correttamente. */ body.imo-tap-targets button:not(.menu-mobile-toggle):not(.search-toggle):not(.nv-close-nav), body.imo-tap-targets [role="button"], body.imo-tap-targets .wp-block-button__link { min-height: 44px; } /* Select */ select { min-height: 44px !important; font-size: var(--imo-font-size) !important; padding: 8px 12px !important; border-radius: 6px !important; box-sizing: border-box !important; } /* ── 8. [MOD: imo-fix-elementor] ELEMENTOR ─────────────── [FIX-G] NON overflow:visible !important globale. Gestiamo SOLO overflowX (non Y) sugli elementi identificati come problematici. La logica pesante è nel JS con requestIdleCallback. */ /* Sezioni standard: NON sticky, NON full-height, NON parallax [FIX-AVATAR] overflow-x:visible SOLO sul container interno, MAI su .elementor-widget-wrap che gestisce clip/shape/mask */ body.imo-fix-elementor .elementor-section:not(.elementor-sticky__spacer) > .elementor-container { overflow-x: visible; } /* [FIX-AVATAR] .elementor-widget-wrap RIMOSSO dall'overflow fix: questo wrapper gestisce clip-path, border-radius decorativi e mask-image (es. sezione avatar con forma circolare verde). Impostare overflow-x:visible rompe il clipping e l'immagine si allarga a tutto schermo perdendo la forma. */ /* Container Elementor 3.x: solo se NON ha effetti visivi */ body.imo-fix-elementor .e-con:not(.e-sticky):not([style*="clip-path"]):not([style*="border-radius"]) { overflow-x: visible; } /* Sezioni min-height: non forziamo altezza su mobile */ body.imo-fix-elementor .elementor-section.elementor-section-height-min-height { min-height: unset !important; } /* ── 9. [MOD: imo-fix-wpcode] WPCODE / HTML CUSTOM ─────── Classi usate nei box Ippocrate inseriti via WPCode. */ body.imo-fix-wpcode .ippocrate-box, body.imo-fix-wpcode .naturo-card, body.imo-fix-wpcode .imo-card, body.imo-fix-wpcode .wpcode-snippet-shortcode > div, body.imo-fix-wpcode [id^="wpcode-"] > div { padding: var(--imo-padding) !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } /* pre/code nei contenuti — overflow-x:auto funziona perché il contenitore padre (.entry-content) ha overflow-x:hidden solo per contenere layout, NON crea un BFC che blocchi scroll */ pre, code { white-space: pre-wrap !important; word-break: break-word !important; font-size: 14px !important; padding: 12px !important; border-radius: 6px; background: #f5f5f5; max-width: 100%; display: block; overflow-x: auto; } code { display: inline; padding: 2px 6px !important; font-size: 13px !important; } /* ── 10. FORM GENERICI ──────────────────────────────────── input[type="number"] è incluso ma NON causa problemi admin perché questo CSS è caricato SOLO lato front-end */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"] { width: 100% !important; font-size: var(--imo-font-size) !important; min-height: 48px !important; padding: 10px 14px !important; border-radius: 6px !important; box-sizing: border-box !important; } textarea { width: 100% !important; font-size: var(--imo-font-size) !important; min-height: 100px !important; /* NON 48px per le textarea */ padding: 10px 14px !important; border-radius: 6px !important; box-sizing: border-box !important; resize: vertical; } /* Label checkbox/radio: area tocco senza ingrandire il controllo */ input[type="checkbox"] + label, input[type="radio"] + label { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; } /* ── 11. [MOD: imo-fix-woocommerce] WOOCOMMERCE ──────────*/ /* Griglia prodotti: usa flexbox (coerente con Neve/WC default) invece di grid che poteva confliggere con il tema */ body.imo-fix-woocommerce .woocommerce .products, body.imo-fix-woocommerce .woocommerce ul.products { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; } body.imo-fix-woocommerce .woocommerce ul.products li.product { flex: 0 0 calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; box-sizing: border-box !important; } /* Checkout — colonne in stack verticale */ body.imo-fix-woocommerce .woocommerce .col2-set, body.imo-fix-woocommerce .woocommerce-page .col2-set { display: flex !important; flex-direction: column !important; } body.imo-fix-woocommerce .woocommerce .col2-set .col-1, body.imo-fix-woocommerce .woocommerce .col2-set .col-2 { width: 100% !important; float: none !important; } /* Input e select nel checkout */ body.imo-fix-woocommerce .woocommerce form .form-row input.input-text, body.imo-fix-woocommerce .woocommerce form .form-row textarea, body.imo-fix-woocommerce .woocommerce form .form-row select { width: 100% !important; font-size: var(--imo-font-size) !important; min-height: 48px !important; padding: 10px 14px !important; border-radius: 6px !important; box-sizing: border-box !important; } /* Metodi pagamento — label leggibile */ body.imo-fix-woocommerce .woocommerce-page #payment .payment_methods label { font-size: var(--imo-font-size) !important; line-height: 1.5; } /* Celle tabella carrello */ body.imo-fix-woocommerce .woocommerce table.shop_table td, body.imo-fix-woocommerce .woocommerce table.shop_table th { font-size: calc(var(--imo-font-size) - 1px) !important; padding: 10px 8px !important; } /* ── 12. BLOCKQUOTE ────────────────────────────────────── [FIX-H] background non più hardcodato: usa la variabile link via color-mix() con fallback per browser senza supporto */ .entry-content blockquote, .post-content blockquote { margin: 1em 0 !important; padding: 14px 16px !important; border-left: 4px solid var(--imo-link-color) !important; /* color-mix(): Chrome 111+, Safari 16.2+, Firefox 113+ — copertura buona per mobile 2024+ */ background: color-mix(in srgb, var(--imo-link-color) 8%, white); /* Fallback per browser più vecchi */ background: rgba(46, 125, 50, 0.06); /* Il secondo background sovrascrive il primo nei browser che NON supportano color-mix */ border-radius: 0 6px 6px 0 !important; font-size: var(--imo-font-size) !important; } /* ── 13. VIDEO WRAPPER ──────────────────────────────────── Il JS avvolge iframe YouTube/Vimeo con .imo-video-wrapper. Gutenberg usa già .wp-block-embed__wrapper. */ .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; } .wp-block-embed__wrapper iframe, .imo-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; } /* ═══════════════════════════════════════════════════════════ LOGO MOBILE — mostra immagine, nascondi titolo testuale ═══════════════════════════════════════════════════════════ In Neve il logo-immagine e il titolo testuale del sito coesistono nell'header. Su mobile vogliamo: ✅ logo immagine visibile ❌ titolo testuale nascosto (evita il titolo gigante) Selettori Neve per il titolo testuale del sito: .site-title → testo "Ippocrate – Scuola di…" .nv-title-tagline-wrap → wrapper titolo + tagline Neve .nv-logo .site-title p.site-title → Neve usa

o non

Selettori Neve per il logo immagine: .site-logo img → immagine del logo .nv-logo img .custom-logo-link img ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ LOGO MOBILE — nascondi titolo testuale, mostra immagine ═══════════════════════════════════════════════════════════ Struttura HTML Neve: ═══════════════════════════════════════════════════════════ */ /* NASCONDI titolo testuale — tutti i selettori possibili Neve */ .nv-title-tagline-wrap, p.site-title, span.site-title, h1.site-title, .site-title, p.site-description, span.site-description, .site-description, .nv-logo p, .nv-logo span.site-title, .site-logo p, .site-branding .site-title, .site-branding .site-description, .header-wrapper p.site-title, .header-wrapper .site-title, .header-wrapper .site-description, .nv-header p.site-title, .nv-header .site-title, .nv-header .nv-title-tagline-wrap { display: none !important; visibility: hidden !important; } /* MOSTRA logo immagine — forza visibilità */ .site-logo, .nv-logo, .site-logo a, .nv-logo a, .custom-logo-link, .site-logo .custom-logo-link, .nv-logo .custom-logo-link { display: inline-flex !important; align-items: center !important; visibility: visible !important; opacity: 1 !important; } .custom-logo, .custom-logo-link img, .site-logo img, .nv-logo img, img.custom-logo { display: block !important; visibility: visible !important; opacity: 1 !important; max-height: 56px !important; max-width: 180px !important; width: auto !important; height: auto !important; object-fit: contain !important; } /* ═══════════════════════════════════════════════════════════ ELEMENTOR COLONNE STRETTE — fix per sezioni statistiche ═══════════════════════════════════════════════════════════ SOLO via JS (imoFixStatColumns) che conta le colonne e verifica l'assenza di immagini/shape prima di agire. I selettori CSS globali [class*="elementor-col-25"] erano troppo ampi: colpivano anche sezioni con avatar/clip-path (es. sezione verde con ragazza) rompendone il layout. Rimossi — il JS gestisce questo in modo sicuro. ═══════════════════════════════════════════════════════════ */ /* Solo sicurezza overflow su colonne — NON larghezze */ .elementor-section .elementor-column { min-width: 0 !important; box-sizing: border-box !important; } /* Testo dentro colonne statistiche: evita spezzature */ .elementor-column .elementor-widget-heading .elementor-heading-title, .elementor-column .elementor-widget-counter .elementor-counter-number-wrapper, .elementor-column .elementor-widget-number .elementor-number { word-break: normal !important; white-space: normal !important; overflow: visible !important; width: 100% !important; } /* ── WIDGET CHAT / POPUP TERZE PARTI — mai toccare ───────── Include il pannello conversazione (iframe) che altrimenti riceve il nostro padding e produce testo stretto 1 parola/riga */ #tidio-chat, #tidio-chat-iframe, #tidio-chat *, #tidio-chat-iframe *, #crisp-chatbox, .crisp-client, #crisp-chatbox *, .crisp-client *, #smartsupp-widget-container, #smartsupp-widget-container *, [id*="chat-widget"], [id*="chat-widget"] *, [id*="chat_widget"], [id*="chat_widget"] *, [id*="chatbot"], [id*="chatbot"] *, [class*="chat-widget"],[class*="chat-widget"] *, [class*="chat_widget"],[class*="chat_widget"] *, /* iframe chat: reset completo */ iframe[src*="tidio"], iframe[src*="crisp"], iframe[src*="smartsupp"], iframe[src*="intercom"], iframe[src*="hubspot"], iframe[src*="zendesk"] { max-width: unset !important; max-height: unset !important; min-width: unset !important; min-height: unset !important; width: unset !important; height: unset !important; overflow: unset !important; overflow-x: unset !important; word-break: normal !important; white-space: normal !important; padding-left: unset !important; padding-right: unset !important; font-size: unset !important; line-height: unset !important; box-sizing: unset !important; } /* ═══════════════════════════════════════════════════════════ ⚠️ PROTEZIONE ASSOLUTA — NEVE HEADER + MENU MOBILE Questo blocco è ALLA FINE e sovrascrive tutto. ═══════════════════════════════════════════════════════════ */ .nv-header, .header-wrapper, .site-header { padding-left: unset !important; padding-right: unset !important; overflow: unset !important; max-width: none !important; word-break: normal !important; white-space: normal !important; } .nv-sidebar-wrap, .nv-sidebar, .nv-sidebar-inner { padding-left: unset !important; padding-right: unset !important; max-width: none !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } .nv-sidebar-wrap a, .nv-sidebar-inner a, .nv-sidebar-wrap .nav-menu-item > a, .nv-sidebar-inner .nav-menu-item > a { display: block !important; padding: unset !important; min-height: unset !important; font-size: unset !important; color: unset !important; word-break: normal !important; white-space: normal !important; align-items: unset !important; } .menu-mobile-toggle, .nv-close-nav, .search-toggle, .nv-sidebar-wrap button { min-height: unset !important; padding: unset !important; display: unset !important; font-size: unset !important; word-break: normal !important; } .nv-mobile-menu-overlay { overflow: visible !important; max-width: none !important; } } /* fine @media 768px */