/* * site-redesign.css * Override globali per applicare il design system dark + sans a TUTTI i blocchi * Divi 5 del sito principale (homepage, pagine, post, header, footer). * * Strategia: l'override è progressivo. Cambia palette, font, spaziature. * Non modifica il MARKUP delle pagine (i layout Divi 5 restano dove sono). * Tutti i contenuti H1/H2/H3 e i testi originali di Andrea restano intatti. * * Quando i template saranno rifatti uno a uno col Visual Builder, alcune di * queste regole diventeranno ridondanti e si potranno alleggerire. */ /* ============================================ * 1. BODY GLOBALE DARK * ============================================ */ body, html { background: var(--color-bg) !important; color: var(--color-fg); } /* Wrap principale di WordPress */ #page-container, #main-content, .et_pb_module { background: transparent; } /* ============================================ * 2. SEZIONI DIVI: trasparenti, lasciano vedere il body nero * Forziamo solo dove serve, sezioni con background custom restano * ============================================ */ .et_pb_section { background-color: var(--color-bg); } /* Spaziature più ariose tra sezioni */ .et_pb_section.et_pb_with_background, .et_section_regular { border-bottom: 1px solid var(--color-border-strong); } /* Sezioni "soft" (sfondi quasi-nero per dare ritmo) */ .et_pb_section.swg-section-soft { background: var(--color-bg-soft) !important; } /* ============================================ * 3. TIPOGRAFIA: forza Inter ovunque sui contenuti * ============================================ */ .et_pb_text, .et_pb_text_inner, .et_pb_blurb_description, .et_pb_module *:not(.fa):not(.icon):not(.et-pb-icon) { font-family: var(--font-sans) !important; } .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6, .et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4, .et_pb_text h5, .et_pb_text h6 { font-family: var(--font-sans) !important; color: var(--color-fg) !important; font-weight: var(--fw-medium); letter-spacing: -0.025em; line-height: 1.1; } .et_pb_module h1, .et_pb_text h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); } .et_pb_module h2, .et_pb_text h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); } .et_pb_module h3, .et_pb_text h3 { font-size: clamp(1.375rem, 2.5vw, 2rem); } .et_pb_module h4, .et_pb_text h4 { font-size: clamp(1.125rem, 1.5vw, 1.5rem); } /* Body testo: bianco con leggero contrasto, line-height arioso */ .et_pb_text, .et_pb_text_inner, .et_pb_text p, .et_pb_blurb_description { color: var(--color-fg) !important; font-size: 1.0625rem; line-height: 1.65; } .et_pb_text p { color: var(--color-fg); margin-bottom: var(--space-5); } /* ============================================ * 4. LINK * ============================================ */ #main-content a, .et_pb_text a, .et_pb_module a { color: var(--color-fg) !important; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 4px; transition: text-decoration-color var(--transition-base); } #main-content a:hover, .et_pb_text a:hover, .et_pb_module a:hover { text-decoration-color: var(--color-fg); } /* ============================================ * 5. HEADER DIVI: dark mode + logo grande * ============================================ */ #main-header, #top-header, #top-menu-nav { background: rgba(10, 10, 10, 0.85) !important; backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--color-border) !important; box-shadow: none !important; } /* Logo Divi: dimensione importante */ #logo { max-height: 56px !important; height: auto; } #main-header.et-fixed-header #logo { max-height: 48px !important; } /* Menu items: bianchi su nero */ #top-menu li a, .et_mobile_menu li a, #et-top-navigation .menu li a { color: var(--color-fg-secondary) !important; font-family: var(--font-sans) !important; font-size: 0.9375rem; font-weight: var(--fw-regular) !important; letter-spacing: 0; transition: color var(--transition-base); } #top-menu li a:hover, .et_mobile_menu li a:hover, #top-menu li.current-menu-item > a { color: var(--color-fg) !important; opacity: 1; } /* Mega-menu / sub-menu Divi: pannello dark */ #top-menu .sub-menu, #top-menu li ul.sub-menu, .et_mobile_menu { background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; } #top-menu .sub-menu li a { background: transparent !important; color: var(--color-fg-secondary) !important; } #top-menu .sub-menu li a:hover { color: var(--color-fg) !important; background: var(--color-bg-soft) !important; } /* Hamburger mobile: bianco */ .mobile_menu_bar:before { color: var(--color-fg) !important; } /* ============================================ * 6. BUTTONS DIVI: stile minimal coerente * ============================================ */ .et_pb_button, .et_pb_button:visited, a.et_pb_button { background: transparent !important; border: 1px solid var(--color-fg) !important; color: var(--color-fg) !important; font-family: var(--font-sans) !important; font-weight: var(--fw-medium) !important; font-size: 0.9375rem !important; padding: 0.875rem 1.5rem !important; letter-spacing: 0; text-decoration: none !important; transition: background var(--transition-base), color var(--transition-base); } .et_pb_button:hover, .et_pb_button:hover:after { background: var(--color-fg) !important; color: var(--color-bg) !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .et_pb_button:after { display: none !important; } /* ============================================ * 7. FOOTER DIVI: minimal dark * ============================================ */ #main-footer, #footer-bottom, #footer-widgets { background: var(--color-bg) !important; color: var(--color-fg-secondary) !important; border-top: 1px solid var(--color-border-strong) !important; } #footer-info, #footer-widgets .footer-widget, #footer-bottom * { color: var(--color-fg-secondary) !important; font-family: var(--font-sans) !important; } #footer-widgets h4 { color: var(--color-fg) !important; font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px !important; } /* ============================================ * 8. IMMAGINI: nessuna invasività, restano come sono * Nota: lasciamo le immagini degli articoli intatte, come da richiesta Andrea. * ============================================ */ img { filter: none; } /* ============================================ * 9. CACHE DI DIVI (et-cache): forza dark anche su CSS cachato * ============================================ */ .et-db .et_pb_section, .et_pb_section_regular { background: var(--color-bg); } /* ============================================ * 10. ADMIN BAR: lasciamo a WP che la gestisca, * ma assicuriamo padding top corretto sul body * ============================================ */ body.admin-bar { padding-top: 0 !important; } @media screen and (min-width: 783px) { body.admin-bar #main-header { top: 32px; } } @media screen and (max-width: 782px) { body.admin-bar #main-header { top: 46px; } } /* ============================================ * 11. OVERRIDE AGGRESSIVO della cache Divi * (la et-cache contiene background:#fff hard-coded che vince * sugli override normali. Forziamo con maggior specificity). * ============================================ */ body .et_pb_section, body .et-db .et_pb_section, body .et_builder_inner_content .et_pb_section, body .et_pb_section[class*="preset"], body .et_pb_section[class*="default"] { background-color: var(--color-bg) !important; } body .et_pb_row, body .et_pb_row_inner, body .et_pb_column { background-color: transparent !important; } /* Force dark su qualunque modulo con background bianco residuo */ body .et_pb_text[style*="background-color: #fff"], body .et_pb_text[style*="background-color:#fff"], body .et_pb_text[style*="background: rgb(255, 255, 255)"] { background-color: transparent !important; } /* ============================================ * 12. BLOG / CENTRO STUDI: griglia post in stile editoriale * ============================================ */ .et_pb_blog_grid, .et_pb_blog_grid .column, .et_pb_post { background: transparent !important; box-shadow: none !important; } .et_pb_post { border-bottom: 1px solid var(--color-border) !important; padding-bottom: var(--space-7) !important; margin-bottom: var(--space-7) !important; } .et_pb_post h2, .et_pb_post h2 a, .et_pb_post .entry-title, .et_pb_post .entry-title a { color: var(--color-fg) !important; font-family: var(--font-sans) !important; font-weight: var(--fw-medium) !important; letter-spacing: -0.02em; line-height: 1.2; } .et_pb_post .post-meta, .et_pb_post .post-meta a { color: var(--color-fg-secondary) !important; font-family: var(--font-mono) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.1em; } .et_pb_post .post-content, .et_pb_post .post-content p { color: var(--color-fg-secondary) !important; } .et_pb_post .more-link, .et_pb_post a.more-link { color: var(--color-fg) !important; border-bottom: 1px solid var(--color-fg) !important; text-decoration: none !important; padding-bottom: 2px; background: none !important; } /* ============================================ * 13. SINGLE POST (articolo singolo) * ============================================ */ .single-post #main-content, .single-post .container, .single-post #left-area, .single-post #content-area, .single-post .entry-content { background: var(--color-bg) !important; color: var(--color-fg); } .single-post .et_post_meta_wrapper { background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-7) !important; } .single-post h1.entry-title, .single-post .entry-title { color: var(--color-fg) !important; font-family: var(--font-sans) !important; font-weight: 500 !important; font-size: clamp(2.25rem, 5vw, 4.5rem) !important; line-height: 0.95 !important; letter-spacing: -0.035em !important; margin-bottom: 1.5rem !important; max-width: 22ch; } .single-post .post-meta, .single-post .post-meta a { color: var(--color-fg-secondary) !important; font-family: var(--font-mono) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.1em; } .single-post .entry-content p, .single-post .entry-content li { color: var(--color-fg) !important; font-size: 1.0625rem; line-height: 1.75; } .single-post .entry-content h2 { color: var(--color-fg) !important; margin-top: var(--space-8) !important; } .single-post .entry-content blockquote { border-left: 3px solid var(--color-fg) !important; color: var(--color-fg-secondary) !important; padding-left: var(--space-5) !important; margin: var(--space-7) 0 !important; } /* ============================================ * 14. ARCHIVI (categoria, tag, autore, data, search) * ============================================ */ .archive #main-content, .search-results #main-content, .archive .container, .archive #left-area, .search-results #left-area { background: var(--color-bg) !important; } .archive h1.page-title, .search-results h1.page-title { color: var(--color-fg) !important; font-family: var(--font-sans) !important; font-weight: var(--fw-medium) !important; } /* ============================================ * 15. SIDEBAR (se presente) * ============================================ */ #sidebar, #sidebar .widget, #sidebar .widget_text, #sidebar h4.widgettitle { background: var(--color-bg) !important; color: var(--color-fg) !important; } #sidebar h4.widgettitle { font-family: var(--font-mono) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-fg) !important; border-bottom: 1px solid var(--color-border-strong) !important; padding-bottom: var(--space-3) !important; margin-bottom: var(--space-4) !important; } #sidebar a { color: var(--color-fg-secondary) !important; } #sidebar a:hover { color: var(--color-fg) !important; } /* ============================================ * 16. PAGINAZIONE * ============================================ */ .wp-pagenavi, .et_pb_pagebuilder_layout .pagination, .pagination { background: transparent !important; border-top: 1px solid var(--color-border); padding-top: var(--space-6); margin-top: var(--space-8); } .wp-pagenavi a, .wp-pagenavi span, .pagination a, .pagination span { color: var(--color-fg-secondary) !important; border: 1px solid var(--color-border) !important; background: transparent !important; padding: var(--space-2) var(--space-4) !important; font-family: var(--font-mono) !important; font-size: 12px; } .wp-pagenavi a:hover, .pagination a:hover, .wp-pagenavi .current, .pagination .current { color: var(--color-fg) !important; border-color: var(--color-fg) !important; } /* ============================================ * 17. COMMENTI (se presenti) * ============================================ */ #comments, .comment-form, .comment-list, .comment-body { background: var(--color-bg) !important; color: var(--color-fg) !important; } #commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"], #commentform textarea { background: var(--color-bg-soft) !important; color: var(--color-fg) !important; border: 1px solid var(--color-border) !important; padding: var(--space-3) !important; } #commentform input:focus, #commentform textarea:focus { border-color: var(--color-fg) !important; outline: none !important; } /* ============================================ * 18. CONTACT FORM 7 / Divi Contact Form * ============================================ */ .et_pb_contact_form_container, .et_pb_contact, .wpcf7-form { background: transparent !important; } .et_pb_contact input[type="text"], .et_pb_contact input[type="email"], .et_pb_contact input[type="tel"], .et_pb_contact textarea, .et_pb_contact select, .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea { background: var(--color-bg-soft) !important; color: var(--color-fg) !important; border: 1px solid var(--color-border) !important; padding: var(--space-3) !important; font-family: var(--font-sans) !important; } .et_pb_contact input:focus, .et_pb_contact textarea:focus, .wpcf7-form input:focus, .wpcf7-form textarea:focus { border-color: var(--color-fg) !important; outline: none !important; } /* P6 v2 (Andrea 2026-06-14 sera): il form contatti (page-id 2235) sforava a * SINISTRA rispetto ai testi sopra. I testi sono in .swg-container (max-width * --container-max-width centrato + 80px di padding). Replico quel box sul * contenitore del form usando le STESSE variabili, cosi' il suo bordo sinistro * coincide esattamente con quello dei testi; il form resta a larghezza di * lettura 720 ancorato a sinistra. La specificita' section>row>column>container * serve a battere la regola Divi che teneva il contenitore a tutta larghezza. * Allineamento esatto sui desktop; sotto ~1280px resta un minimo scarto per i * width responsive che Divi impone alla riga in media query. */ html body.page-id-2235 .et_pb_section .et_pb_row .et_pb_column .et_pb_contact_form_container { max-width: var(--container-max-width) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--container-padding-desktop) !important; padding-right: var(--container-padding-desktop) !important; box-sizing: border-box !important; float: none !important; } html body.page-id-2235 .et_pb_contact { max-width: 720px !important; margin-left: 0 !important; margin-right: auto !important; } .et_pb_contact label, .wpcf7-form label { color: var(--color-fg) !important; font-family: var(--font-sans) !important; } /* ============================================ * 19. WIDGET (footer e sidebar) * ============================================ */ .et_pb_widget, .et_pb_widget ul, .et_pb_widget li { color: var(--color-fg-secondary) !important; background: transparent !important; } .et_pb_widget a { color: var(--color-fg-secondary) !important; } .et_pb_widget a:hover { color: var(--color-fg) !important; } /* ============================================ * 20. IMMAGINI FEATURED: leggermente desaturate per coerenza dark * (commented out per default: troppa interferenza con foto reali) * ============================================ */ /* .et_pb_post img, .single-post .post-thumbnail img { filter: brightness(0.92) contrast(1.05); } */ /* ============================================ * 21. DIVI 5 THEME BUILDER OVERRIDE * I template Header e Footer custom del Theme Builder hanno CSS * hard-coded con !important. Battere con specificity ancora maggiore. * Selettori chiave: .et-l--header, .et-l--footer, .et_pb_section_0_tb_header. * ============================================ */ /* HEADER Theme Builder */ .et-l--header, .et-l--header > .et_builder_inner_content { background: var(--color-bg) !important; } .et-l--header .et_pb_section, .et-l--header > .et_builder_inner_content .et_pb_section, .et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_header, [class*="et_pb_section"][class*="_tb_header"] { background-color: var(--color-bg) !important; border-bottom-color: var(--color-border-strong) !important; /* hairline vicino al menu ma con aria sotto il logo */ padding-top: 18px !important; padding-bottom: 18px !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* anche la row interna non deve aggiungere altezza */ .et-l--header .et_pb_row, [class*="et_pb_row"][class*="_tb_header"] { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* il modulo menu stesso non deve avere margin che lo spinge giù */ .et-l--header .et_pb_menu, [class*="et_pb_menu"][class*="_tb_header"] { margin-top: 0 !important; margin-bottom: 0 !important; } .et-l--header .et_pb_row, [class*="et_pb_row"][class*="_tb_header"] { background-color: transparent !important; border-bottom: 0 !important; border-bottom-width: 0 !important; } /* Menu nell'header */ .et-l--header .et_pb_menu, [class*="et_pb_menu"][class*="_tb_header"], [class*="et_pb_menu"][class*="_tb_header"].et_pb_menu { background-color: transparent !important; } .et-l--header .et_pb_menu ul li a, [class*="et_pb_menu"][class*="_tb_header"] ul li a, [class*="et_pb_menu"][class*="_tb_header"].et_pb_menu ul li a { color: var(--color-fg) !important; font-family: var(--font-sans) !important; font-weight: var(--fw-regular) !important; font-size: 0.9375rem !important; } .et-l--header .et_pb_menu ul li a:hover, [class*="et_pb_menu"][class*="_tb_header"] ul li a:hover { color: var(--color-fg-secondary) !important; } /* Sub-menu (mega-menu) */ .et-l--header .et_pb_menu .nav li ul, .et-l--header .et_pb_menu .et_mobile_menu, [class*="et_pb_menu"][class*="_tb_header"] .nav li ul, [class*="et_pb_menu"][class*="_tb_header"] .et_mobile_menu, [class*="et_pb_menu"][class*="_tb_header"] .et_mobile_menu ul { background-color: var(--color-bg) !important; border-color: var(--color-border) !important; } .et-l--header .et_pb_menu .nav li ul a, [class*="et_pb_menu"][class*="_tb_header"] .sub-menu a { color: var(--color-fg-secondary) !important; } .et-l--header .et_pb_menu .nav li ul a:hover { color: var(--color-fg) !important; background: var(--color-bg-soft) !important; } /* Logo del Theme Builder header: se serve forzare dimensioni */ .et-l--header .et_pb_menu .et_pb_menu__logo, .et-l--header .et_pb_menu .et_pb_menu__logo img, [class*="et_pb_menu"][class*="_tb_header"] .et_pb_menu__logo img { max-height: 64px !important; height: auto !important; width: auto !important; } /* Per quei template che mettono il logo dentro un image module separato */ .et-l--header .et_pb_image img, .et-l--header img[src*="logo"], .et-l--header img[src*="Swing"] { max-height: 80px !important; height: auto !important; width: auto !important; } /* ============================================ * 22. FOOTER Theme Builder * ============================================ */ .et-l--footer, .et-l--footer > .et_builder_inner_content { background: var(--color-bg) !important; } .et-l--footer .et_pb_section, .et-l--footer > .et_builder_inner_content .et_pb_section, [class*="et_pb_section"][class*="_tb_footer"] { background-color: var(--color-bg) !important; background-image: none !important; border-top: 1px solid var(--color-border-strong) !important; } .et-l--footer .et_pb_row, [class*="et_pb_row"][class*="_tb_footer"] { background-color: transparent !important; } /* Testi nel footer Theme Builder */ .et-l--footer .et_pb_text, .et-l--footer .et_pb_text *, .et-l--footer .et_pb_text_inner, .et-l--footer .et_pb_text_inner p, [class*="et_pb_text"][class*="_tb_footer"], [class*="et_pb_text"][class*="_tb_footer"] p, [class*="et_pb_text"][class*="_tb_footer"] * { color: var(--color-fg) !important; font-family: var(--font-sans) !important; } .et-l--footer h1, .et-l--footer h2, .et-l--footer h3, .et-l--footer h4, .et-l--footer h5, .et-l--footer h6 { color: var(--color-fg) !important; font-family: var(--font-sans) !important; } /* Link nel footer Theme Builder */ .et-l--footer a, .et-l--footer .et_pb_text a, .et-l--footer .et_pb_menu ul li a, [class*="et_pb_menu"][class*="_tb_footer"] ul li a { color: var(--color-fg-secondary) !important; font-family: var(--font-sans) !important; text-decoration: none !important; } .et-l--footer a:hover, .et-l--footer .et_pb_text a:hover, .et-l--footer .et_pb_menu ul li a:hover { color: var(--color-fg) !important; } /* Menu footer */ .et-l--footer .et_pb_menu, [class*="et_pb_menu"][class*="_tb_footer"] { background-color: transparent !important; } /* Logo del footer (se è una image module con il logo grande SWING) */ .et-l--footer .et_pb_image, .et-l--footer .et_pb_image_wrap { background: transparent !important; } /* Icone social del footer */ .et-l--footer .et_pb_social_media_follow a, .et-l--footer .et_pb_social_media_follow li a.icon, [class*="et_pb_social_media_follow"][class*="_tb_footer"] li a.icon { background: transparent !important; color: var(--color-fg-secondary) !important; } .et-l--footer .et_pb_social_media_follow a:hover { color: var(--color-fg) !important; } .et-l--footer .et_pb_social_media_follow a:before { color: inherit !important; } /* Pulsanti Divi nel footer */ .et-l--footer .et_pb_button { color: var(--color-fg) !important; border-color: var(--color-fg) !important; background: transparent !important; } .et-l--footer .et_pb_button:hover { background: var(--color-fg) !important; color: var(--color-bg) !important; } /* ============================================ * 23. BODY del Theme Builder (le pagine usano et-l--body) * ============================================ */ .et-l--body, .et-l--body > .et_builder_inner_content { background: var(--color-bg); } .et-l--body .et_pb_section, .et-l--body > .et_builder_inner_content .et_pb_section { background-color: var(--color-bg) !important; } /* Fix specifico: forma di contatto Divi sul fondo della pagina contatti */ .et-l--body .et_pb_contact_form, .et-l--body .et_pb_contact_form_container { background: transparent !important; } /* ============================================ * 24. ADMIN BAR offset corretto per Theme Builder header * ============================================ */ body.admin-bar .et-l--header { position: relative; } @media screen and (min-width: 783px) { body.admin-bar #et-boc { padding-top: 0; } } /* ============================================ * 25. FIX CRITICO: et_pb_bg_layout_light * * I moduli Divi disegnati con sfondo chiaro (vecchio Divi 4) hanno la classe * .et_pb_bg_layout_light che FORZA color:#333 sui testi e color:#000 sui titoli. * Va sovrascritto SU TUTTE LE PAGINE perché senza, in dark mode i titoli sono * neri su sfondo nero (illeggibili). * * Vedi screenshot Andrea 2026-06-06: titolo "Contatti per avviare un dialogo" * appariva in nero quasi invisibile su sfondo nero. * ============================================ */ body .et_pb_bg_layout_light, body .et_pb_bg_layout_light *, body .et_pb_bg_layout_light h1, body .et_pb_bg_layout_light h2, body .et_pb_bg_layout_light h3, body .et_pb_bg_layout_light h4, body .et_pb_bg_layout_light h5, body .et_pb_bg_layout_light h6, body .et_pb_bg_layout_light p, body .et_pb_bg_layout_light li, body .et_pb_bg_layout_light strong, body .et_pb_bg_layout_light em, body .et_pb_bg_layout_light blockquote, body .et_pb_bg_layout_light span, body .et_pb_bg_layout_light .et_pb_text_inner, body .et_pb_bg_layout_light .et_pb_text_inner *, body .et_pb_bg_layout_light .et_pb_blurb_description, body .et_pb_bg_layout_light .et_pb_blurb_description * { color: var(--color-fg) !important; } /* Link in moduli bg_layout_light */ body .et_pb_bg_layout_light a, body .et_pb_bg_layout_light a:visited, body .et_pb_bg_layout_light .et_pb_text_inner a { color: var(--color-fg) !important; text-decoration-color: var(--color-border-strong) !important; } body .et_pb_bg_layout_light a:hover { color: var(--color-fg) !important; text-decoration-color: var(--color-fg) !important; } /* ============================================ * 26. FIX CRITICO: testi e heading del Theme Builder BODY * (selettori dinamici .et_pb_text_X_tb_body, et_pb_text_X_tb_footer) * che hanno color hard-coded nel CSS cached. * ============================================ */ .et-l--body [class*="_tb_body"] .et_pb_text_inner, .et-l--body [class*="_tb_body"] .et_pb_text_inner *, .et-l--body [class*="_tb_body"] h1, .et-l--body [class*="_tb_body"] h2, .et-l--body [class*="_tb_body"] h3, .et-l--body [class*="_tb_body"] h4, .et-l--body [class*="_tb_body"] h5, .et-l--body [class*="_tb_body"] h6, .et-l--body [class*="_tb_body"] p { color: var(--color-fg) !important; } .et-l--footer [class*="_tb_footer"] .et_pb_text_inner, .et-l--footer [class*="_tb_footer"] .et_pb_text_inner *, .et-l--footer [class*="_tb_footer"] h1, .et-l--footer [class*="_tb_footer"] h2, .et-l--footer [class*="_tb_footer"] h3, .et-l--footer [class*="_tb_footer"] h4, .et-l--footer [class*="_tb_footer"] h5, .et-l--footer [class*="_tb_footer"] h6, .et-l--footer [class*="_tb_footer"] p { color: var(--color-fg) !important; } /* Override mobile-specifico (le regole media @max-width hard-coded nel CSS cached) */ @media (max-width: 980px) { .et-l--footer [class*="_tb_footer"] .et_pb_text_inner { color: var(--color-fg) !important; } } @media (max-width: 767px) { .et-l--footer [class*="_tb_footer"] .et_pb_text_inner { color: var(--color-fg) !important; } } /* ============================================ * 27. GRADIENT bianco→scuro del footer Theme Builder * Era: background-image: linear-gradient(180deg,#ffffff 3%,#23170d 62%,...); * Sostituiamo con solid dark. * ============================================ */ .et-l--footer .et_pb_section, .et-l--footer > .et_builder_inner_content .et_pb_section, [class*="et_pb_section"][class*="_tb_footer"] { background-image: none !important; background: var(--color-bg) !important; } /* ============================================ * 28. POST TITLE (template di pagina/articolo) * ============================================ */ .et_pb_post_title h1, .et_pb_post_title h2, .entry-title, .post-title, h1.entry-title, .et_pb_title_container h1, .et_pb_title_meta_container .et_pb_title_container h1 { color: var(--color-fg) !important; } /* ============================================ * 29. ROOT CAUSE FIX: .et_pb_text_inner * * Divi 5 ha una regola hard-coded nel CSS cached: * .et_pb_text_inner { color: #000000 !important } * Questa è il wrapper di OGNI modulo text di Divi e contiene gli H1/H2/H3 * e i paragrafi. Anche se le impostazioni globali Divi dicono "h1 bianco", * il color #000 !important del wrapper vince per ereditarietà. * * Fix: forziamo .et_pb_text_inner a colore var(--color-fg) bianco con specificity * altissima (body ... !important) e questo CSS è caricato per ultimo * (wp_head priority 999), quindi vince nella cascade. * ============================================ */ body .et_pb_text_inner, html body .et_pb_text_inner, body .et_pb_text .et_pb_text_inner { color: var(--color-fg) !important; } body .et_pb_text_inner h1, body .et_pb_text_inner h2, body .et_pb_text_inner h3, body .et_pb_text_inner h4, body .et_pb_text_inner h5, body .et_pb_text_inner h6, body .et_pb_text_inner p, body .et_pb_text_inner li, body .et_pb_text_inner span, body .et_pb_text_inner strong, body .et_pb_text_inner em { color: inherit !important; } /* Link DENTRO i text module: bianco con underline sottile */ body .et_pb_text_inner a, body .et_pb_text_inner a:visited { color: var(--color-fg) !important; text-decoration-color: var(--color-border-strong) !important; } body .et_pb_text_inner a:hover { color: var(--color-fg) !important; text-decoration-color: var(--color-fg) !important; } /* Override anche per i text del Theme Builder body */ body .et-l--body .et_pb_text_inner, body .et-l--body [class*="_tb_body"] .et_pb_text_inner { color: var(--color-fg) !important; } /* Override per Theme Builder footer (regola cached con color:#000!important) */ body .et-l--footer .et_pb_text_inner, body .et-l--footer [class*="_tb_footer"] .et_pb_text_inner, html body .et-l--footer .et_pb_text_inner { color: var(--color-fg) !important; } /* ============================================ * 30. "PSEUDO-EDITORIALE" per pagine non-home * * Applica visual del design demo (hairlines tra sezioni, padding ariosi, * numerazione 01/N, max-width contenuto editoriale) via CSS puro. * SOLO su pagine non-home per non rompere il layout della homepage che * Andrea ha già confermato essere ok. * ============================================ */ /* Padding ariosi sulle sezioni delle pagine interne */ body.page:not(.home) .et-l--body .et_pb_section, body.single-post .et-l--body .et_pb_section { padding-top: 5rem !important; padding-bottom: 5rem !important; border-bottom: 1px solid var(--color-border-strong); position: relative; counter-increment: swg-section; } body.page:not(.home) .et-l--body .et_pb_section:first-of-type, body.single-post .et-l--body .et_pb_section:first-of-type { counter-reset: swg-section; } @media (min-width: 768px) { body.page:not(.home) .et-l--body .et_pb_section, body.single-post .et-l--body .et_pb_section { padding-top: 7rem !important; padding-bottom: 7rem !important; } } /* Numerazione automatica sezione (alto a destra) "01" * Solo sulle pagine non-home. Stile mono uppercase. */ body.page:not(.home) .et-l--body .et_pb_section::before, body.single-post .et-l--body .et_pb_section::before { content: counter(swg-section, decimal-leading-zero); position: absolute; top: 2rem; right: var(--container-padding-mobile); font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-secondary); letter-spacing: 0.12em; text-transform: uppercase; z-index: 5; pointer-events: none; } @media (min-width: 768px) { body.page:not(.home) .et-l--body .et_pb_section::before, body.single-post .et-l--body .et_pb_section::before { top: 3rem; right: var(--container-padding-desktop); } } /* Titoli editoriali ariosi: max-width + letter-spacing serrato */ body.page:not(.home) .et-l--body .et_pb_text h1, body.page:not(.home) .et-l--body .et_pb_text h2, body.single-post .et-l--body .et_pb_text h1, body.single-post .et-l--body .et_pb_text h2 { max-width: 1100px; letter-spacing: -0.035em !important; line-height: 1.05 !important; font-weight: 500 !important; } /* Body text con max-width 720 per leggibilità editoriale */ body.page:not(.home) .et-l--body .et_pb_text p, body.single-post .et-l--body .et_pb_text p { max-width: 720px; line-height: 1.65 !important; } /* Riga sottile dopo i titoli H1 (vibe editoriale) */ body.page:not(.home) .et-l--body .et_pb_text:first-child h1::after, body.single-post .et-l--body .et_pb_text:first-child h1::after { content: ""; display: block; width: 100%; max-width: 1100px; height: 1px; background: var(--color-border-strong); margin-top: 3rem; } /* Le immagini decorative (fiori, ecc.) restano ma con leggera opacità */ body.page:not(.home) .et-l--body .et_pb_image img, body.single-post .et-l--body .et_pb_image img { opacity: 0.95; } /* ============================================ * 31. FIX NUCLEARE H1/H2/H3 illeggibili * * Anche se i miei override sono caricati per ultimi, c'è ancora qualche * regola che rende grigio scuro i titoli (visto in screenshot Chrome headless * 2026-06-07: titoli "Consulenza strategica..." e "Contatti per avviare..." * appaiono grigio scuro su sfondo nero). * * Selettori massimamente specifici per VINCERE tutto. * ============================================ */ html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { color: #FAFAFA !important; } html body .et_pb_text h1, html body .et_pb_text h2, html body .et_pb_text h3, html body .et_pb_text_inner h1, html body .et_pb_text_inner h2, html body .et_pb_text_inner h3, html body .et_pb_bg_layout_light h1, html body .et_pb_bg_layout_light h2, html body .et_pb_bg_layout_light h3, html body .et_pb_bg_layout_light .et_pb_text_inner h1, html body .et_pb_bg_layout_light .et_pb_text_inner h2, html body .et_pb_bg_layout_light .et_pb_text_inner h3, html body [class*="et_pb_text"][class*="et_pb_bg_layout_light"] h1, html body [class*="et_pb_text"][class*="et_pb_bg_layout_light"] h2, html body [class*="et_pb_text"][class*="et_pb_bg_layout_light"] h3, html body [class*="et_pb_text"][class*="et_pb_bg_layout_light"] h4 { color: #FAFAFA !important; text-shadow: none !important; opacity: 1 !important; } /* Anche i paragrafi nei moduli bg_layout_light */ html body .et_pb_bg_layout_light .et_pb_text_inner p, html body [class*="et_pb_text"][class*="et_pb_bg_layout_light"] p { color: #FAFAFA !important; opacity: 1 !important; } /* ============================================ * 32. DISATTIVATO 2026-06-07. * Andrea ha chiarito: vuole il layout della home (sobrio, senza * numerazione 01/N né eyebrow). Non aggiungiamo decorazioni. * editorial.js NON viene più enquequato (vedi functions.php). * ============================================ */ /* ============================================ * 33. FOOTER MINIMAL: nascondo i moduli vecchi del Theme Builder footer * tranne il bottom bar, e ridisegno lo spazio. * ============================================ */ /* Il footer Theme Builder ha 3 row: row 0 (logo + claim), row 1 (menu), row 2 (bottom). Mantengo solo l'essenziale. */ .et-l--footer .et_pb_section_0_tb_footer { padding-top: 4rem !important; padding-bottom: 2rem !important; border-top: 1px solid var(--color-border-strong) !important; background: var(--color-bg) !important; background-image: none !important; } /* Nascondi le immagini grandi e i social del footer per look minimal */ .et-l--footer .et_pb_image_0_tb_footer, .et-l--footer ul.et_pb_social_media_follow_0_tb_footer { display: none !important; } /* Il claim "30 anni alter ego" e simili: ridotti a font-size piccolo mono */ .et-l--footer .et_pb_text_0_tb_footer .et_pb_text_inner, .et-l--footer .et_pb_text_1_tb_footer .et_pb_text_inner, .et-l--footer .et_pb_text_2_tb_footer .et_pb_text_inner { font-family: var(--font-sans) !important; font-size: 0.875rem !important; line-height: 1.6 !important; color: var(--color-fg-secondary) !important; font-weight: 400 !important; } /* Footer menu: stile sobrio */ .et-l--footer .et_pb_menu_0_tb_footer ul li a { font-family: var(--font-sans) !important; font-size: 0.875rem !important; color: var(--color-fg-secondary) !important; text-transform: none !important; letter-spacing: 0 !important; } .et-l--footer .et_pb_menu_0_tb_footer ul li a:hover { color: var(--color-fg) !important; } /* Hairline tra rows del footer */ .et-l--footer .et_pb_row + .et_pb_row { border-top: 1px solid var(--color-border) !important; padding-top: 1.5rem !important; margin-top: 1.5rem !important; } /* ============================================ * 34. DISATTIVATO 2026-06-07. * Le colonne restano come le ha disegnate Andrea nel Visual Builder. * ============================================ */ /* ============================================ * 35. MENU HEADER VISIBILE (Andrea: "il menu non esiste") * Negli screenshot Chrome headless il menu apparirà appena visibile * perché era in color rgba(255,255,255,0.6). Forziamo bianco netto. * ============================================ */ .et-l--header .et_pb_menu_inner_container, [class*="et_pb_menu"][class*="_tb_header"] { background: transparent !important; } .et-l--header .et_pb_menu ul li a, [class*="et_pb_menu"][class*="_tb_header"] ul li a, [class*="et_pb_menu"][class*="_tb_header"].et_pb_menu ul li a, .et-l--header .et_pb_menu .nav li a, [class*="et_pb_menu"][class*="_tb_header"] .nav li a { color: #FAFAFA !important; opacity: 1 !important; font-family: var(--font-sans) !important; font-weight: 400 !important; font-size: 0.9375rem !important; text-transform: none !important; letter-spacing: -0.005em !important; } .et-l--header .et_pb_menu ul li a:hover, [class*="et_pb_menu"][class*="_tb_header"] ul li a:hover { color: #FAFAFA !important; opacity: 0.7 !important; } /* Logo nel header reale (Theme Builder) */ .et-l--header img, .et-l--header .et_pb_image img { filter: none !important; max-height: 64px !important; height: auto !important; width: auto !important; } /* Dropdown sub-menu del header con sfondo dark netto */ .et-l--header .et_pb_menu .sub-menu, [class*="et_pb_menu"][class*="_tb_header"] .sub-menu, .et-l--header .et_pb_menu .et_mobile_menu { background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; } .et-l--header .et_pb_menu .sub-menu a, [class*="et_pb_menu"][class*="_tb_header"] .sub-menu a { color: #FAFAFA !important; opacity: 0.7 !important; } .et-l--header .et_pb_menu .sub-menu a:hover { opacity: 1 !important; background: rgba(255,255,255,0.05) !important; } /* P5 (Andrea 2026-06-14): il mega-menu "Focus settoriali" (3 colonne, voce * piu' a destra con dropdown) sforava il bordo destro della finestra. * Lo ancoro al bordo destro della voce, cosi' cresce verso sinistra e resta * sempre dentro la viewport. Cap di larghezza come ulteriore guardia. */ .et-l--header .et_pb_menu .menu-item-15846 > .sub-menu, [class*="et_pb_menu"][class*="_tb_header"] .menu-item-15846 > .sub-menu { left: auto !important; right: 0 !important; max-width: calc(100vw - 64px) !important; } /* ============================================ * 36. MENU su UNA SOLA RIGA + LOGO senza box bianco * Andrea (2026-06-07): "il menu non è corretto" (andava su 2 righe) * ============================================ */ /* Logo: rimuovo qualunque background ereditato dal Theme Builder */ .et-l--header img, .et-l--header .et_pb_image_wrap, .et-l--header .et_pb_image, .et-l--header .et_pb_menu__logo, .et-l--header .et_pb_menu__logo-wrap, .et-l--header .et_pb_menu__logo-slot { background: transparent !important; background-color: transparent !important; border-radius: 0 !important; padding: 0 !important; } .et-l--header img { background: transparent !important; box-shadow: none !important; } /* Logo dimensione adeguata */ .et-l--header .et_pb_image img, .et-l--header .et_pb_menu__logo img, [class*="et_pb_image"][class*="_tb_header"] img { max-height: 56px !important; width: auto !important; height: auto !important; } /* Menu navbar: forzato su UNA riga, riduco font-size e gap se necessario */ .et-l--header .et_pb_menu .et_pb_menu__menu, .et-l--header .et_pb_menu nav, .et-l--header .et_pb_menu nav > ul, [class*="et_pb_menu"][class*="_tb_header"] nav > ul, [class*="et_pb_menu"][class*="_tb_header"] .et-menu-nav > ul { display: flex !important; flex-wrap: nowrap !important; white-space: nowrap !important; gap: 1.5rem !important; justify-content: flex-end !important; } .et-l--header .et_pb_menu nav > ul > li, [class*="et_pb_menu"][class*="_tb_header"] nav > ul > li { float: none !important; flex-shrink: 0 !important; } /* Font menu compatto per stare su una riga */ .et-l--header .et_pb_menu ul li a, [class*="et_pb_menu"][class*="_tb_header"] ul li a { font-size: 0.875rem !important; padding: 0 0.25rem !important; white-space: nowrap !important; } /* ============================================ * 37. FOOTER MINIMAL definitivo * Nascondi tutta la struttura Theme Builder vecchia e * sostituisci con uno pseudoelement editoriale. * ============================================ */ .et-l--footer .et_pb_section_0_tb_footer { padding: 3rem 0 !important; background: var(--color-bg) !important; border-top: 1px solid var(--color-border-strong) !important; position: relative; } /* Nascondi tutti i moduli vecchi del footer */ .et-l--footer .et_pb_image_0_tb_footer, .et-l--footer .et_pb_text_0_tb_footer, .et-l--footer .et_pb_text_1_tb_footer, .et-l--footer .et_pb_text_2_tb_footer, .et-l--footer .et_pb_text_3_tb_footer, .et-l--footer .et_pb_text_4_tb_footer, .et-l--footer .et_pb_menu_0_tb_footer, .et-l--footer ul.et_pb_social_media_follow_0_tb_footer, .et-l--footer .et_pb_row_0_tb_footer, .et-l--footer .et_pb_row_1_tb_footer, .et-l--footer .et_pb_row_2_tb_footer { display: none !important; } /* Footer minimal sintetico: testo "© Swing Strategic Intelligence" */ .et-l--footer .et_pb_section_0_tb_footer::after { content: "© 2026 Swing srl · Swing Strategic Intelligence · IT04757790276"; display: block; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-secondary); letter-spacing: 0.12em; text-transform: uppercase; } /* ============================================ * 38. FOOTER marrone #23170d → nero * Andrea (2026-06-07 v3): footer ancora marrone perché Divi cached ha * `.et-l--footer>.et_builder_inner_content .et_pb_section.et_pb_section_0_tb_footer * { background-color:#23170d!important; background-image:gradient(...) !important }` * specificity (0,0,4,2). Battiamo con html body + match attributi. * ============================================ */ html body .et-l--footer, html body .et-l--footer > .et_builder_inner_content, html body .et-l--footer > .et_builder_inner_content .et_pb_section, html body .et-l--footer > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_footer, html body[class] .et-l--footer .et_pb_section_0_tb_footer.et_pb_section, html body[class] .et-l--footer [class*="et_pb_section_0_tb_footer"] { background: var(--color-bg) !important; background-color: var(--color-bg) !important; background-image: none !important; background-repeat: no-repeat !important; } /* ============================================ * 39. LOGO senza box bianco * Specificity massima per battere qualunque background * ============================================ */ html body .et-l--header .et_pb_menu__logo, html body .et-l--header .et_pb_menu__logo-wrap, html body .et-l--header .et_pb_menu__logo-slot, html body .et-l--header [class*="_tb_header"] .et_pb_menu__logo, html body .et-l--header [class*="_tb_header"] .et_pb_menu__logo-wrap, html body .et-l--header [class*="_tb_header"] img, html body .et-l--header .et_pb_image, html body .et-l--header .et_pb_image_wrap, html body .et-l--header .et_pb_image img, html body .et-l--header [class*="et_pb_image"][class*="_tb_header"], html body .et-l--header [class*="et_pb_image"][class*="_tb_header"] img { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; border: 0 !important; padding: 0 !important; } /* Specifico per Divi 5: la classe et_pb_bg_layout_light non deve dare bg al logo */ html body .et-l--header .et_pb_bg_layout_light, html body .et-l--header .et_pb_bg_layout_light .et_pb_menu__logo, html body .et-l--header .et_pb_bg_layout_light img, html body .et-l--header [class*="_tb_header"].et_pb_bg_layout_light, html body .et-l--header [class*="_tb_header"].et_pb_bg_layout_light img { background: transparent !important; background-color: transparent !important; } /* La sezione che contiene il menu/logo del header non deve avere bg bianco */ html body .et-l--header .et_pb_section_0_tb_header, html body .et-l--header > .et_builder_inner_content > .et_pb_section, html body .et-l--header [class*="et_pb_section_0_tb_header"] { background: var(--color-bg) !important; background-color: var(--color-bg) !important; background-image: none !important; } /* ============================================ * 42. FOOTER editoriale 4-colonne enterprise * Il post 5003 del Theme Builder contiene wp:html con *