/* ============================================================ InfoComuni · Dark Mode v1.0 — 29/04/2026 -------------------------------------------------------------- Tema scuro completo, attivabile con .force-dark su o data-theme="dark" oppure body.theme-dark. Palette navy + accenti gold (coerente con footer simmetrico). ============================================================ */ /* === Variabili CSS dark === */ html.force-dark, html[data-theme="dark"], body.theme-dark { --ic-bg: #0a1525; --ic-bg-elev-1: #0e1c34; --ic-bg-elev-2: #142240; --ic-surface: #142240; --ic-surface-2: #1a2c4d; --ic-text: #e8ecf1; --ic-text-soft: #c8d4dc; --ic-text-muted: #9caab7; --ic-border: #1e3a5f; --ic-border-soft: rgba(255,255,255,0.08); --ic-accent: #FFCC33; --ic-accent-soft: #ffd966; --ic-accent-deep: #d4a017; --ic-link: #FFCC33; --ic-shadow: 0 8px 32px rgba(0,0,0,0.45); color-scheme: dark; } /* === Background di base === */ html.force-dark, body.theme-dark, html.force-dark body { background-color: #0a1525 !important; color: #e8ecf1 !important; } /* === Pagina e sezioni principali === */ html.force-dark .ic-page, html.force-dark main, html.force-dark #main, body.theme-dark .ic-page, body.theme-dark main, body.theme-dark #main { background-color: #0a1525 !important; color: #e8ecf1 !important; } /* Sezioni con sfondo bianco/crema → vanno scuri */ html.force-dark section, html.force-dark .section, body.theme-dark section, body.theme-dark .section { background-color: transparent !important; } /* === Header sticky === Override ic-editorial-skin.css `.site-header { background: white !important }` (0,1,0) E ic-kiosk-skin.css `header.site-header { background: var(--ic-surface) !important }` (0,1,1). Usiamo header.site-header.site-header.site-header (0,3,1) + html.force-dark per (0,4,1). */ html.force-dark header.site-header.site-header, html.force-dark.force-dark header.site-header, body.theme-dark header.site-header.site-header { background: linear-gradient(180deg, rgba(10,21,37,0.96), rgba(14,28,52,0.93)) !important; background-color: #0a1525 !important; background-image: linear-gradient(180deg, rgba(10,21,37,0.96), rgba(14,28,52,0.93)) !important; border-bottom: 1px solid rgba(255,204,51,0.18) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #e8ecf1 !important; } /* CSS variables override per dark mode (battono kiosk-skin che usa var(--ic-surface)) */ html.force-dark, html.force-dark.force-dark, body.theme-dark { --ic-surface: #142240 !important; --ic-blue-dark: #0a1525 !important; --ic-card-bg: #142240 !important; --ic-text: #e8ecf1 !important; --ic-border: #1e3a5f !important; } html.force-dark .site-header a, html.force-dark .site-header button, html.force-dark .site-header__utils a, body.theme-dark .site-header a, body.theme-dark .site-header button, body.theme-dark .site-header__utils a { color: #e8ecf1 !important; } html.force-dark .site-header__utils button, html.force-dark .site-header__utils a:not(.ic-logo) { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.18) !important; } html.force-dark .site-header__utils button:hover, html.force-dark .site-header__utils a:not(.ic-logo):hover { background: rgba(255,204,51,0.15) !important; border-color: rgba(255,204,51,0.4) !important; color: #FFCC33 !important; } /* Logo: in dark è bianco */ html.force-dark .site-header .ic-logo img, html.force-dark .site-header img[alt*="InfoComuni" i], body.theme-dark .site-header .ic-logo img { filter: brightness(0) invert(1) !important; } /* === Hero (banner Puglia map) === */ html.force-dark .hero, html.force-dark .hero--puglia-map, html.force-dark .hero--dark, body.theme-dark .hero, body.theme-dark .hero--puglia-map { background-color: #0a1525 !important; color: #e8ecf1 !important; } html.force-dark .hero h1, html.force-dark .hero h2, body.theme-dark .hero h1, body.theme-dark .hero h2 { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,0.35); } html.force-dark .hero h1 span, html.force-dark .hero h2 span, body.theme-dark .hero h1 span, body.theme-dark .hero h2 span { color: #FFCC33 !important; } html.force-dark .hero p, html.force-dark .hero .lead, body.theme-dark .hero p, body.theme-dark .hero .lead { color: rgba(255,255,255,0.82) !important; } /* Search bar nel hero */ html.force-dark #ic-search-bar input, body.theme-dark #ic-search-bar input { background: rgba(0,0,0,0.45) !important; border-color: rgba(255,204,51,0.4) !important; color: #ffffff !important; } html.force-dark #ic-search-bar input::placeholder, body.theme-dark #ic-search-bar input::placeholder { color: rgba(255,255,255,0.55) !important; } /* === Province pills (compatte) === */ html.force-dark #provPills .prov-pill-wrap > summary.prov-pill, html.force-dark .prov-pill-wrap > summary.prov-pill, body.theme-dark .prov-pill-wrap > summary.prov-pill { background: rgba(255,255,255,0.05) !important; border: 1.5px solid rgba(255,255,255,0.14) !important; color: #ffffff !important; box-shadow: 0 2px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05) !important; } html.force-dark .prov-pill-wrap > summary.prov-pill small, body.theme-dark .prov-pill-wrap > summary.prov-pill small { color: rgba(255,255,255,0.7) !important; } html.force-dark .prov-pill-wrap[open] > summary.prov-pill, html.force-dark .prov-pill-wrap > summary.prov-pill:hover, body.theme-dark .prov-pill-wrap[open] > summary.prov-pill, body.theme-dark .prov-pill-wrap > summary.prov-pill:hover { background: linear-gradient(135deg, #FFCC33, #d4a017) !important; color: #1a1205 !important; border-color: rgba(255,204,51,0.7) !important; box-shadow: 0 8px 28px rgba(255,204,51,0.4) !important; } html.force-dark .prov-pill-wrap[open] > summary.prov-pill small, body.theme-dark .prov-pill-wrap[open] > summary.prov-pill small { color: #1a1205 !important; } /* === Override esplicito di ic-editorial-skin.css [class*="-card"] (0,3,0) === Usiamo (0,4,0) per battere la regola catch-all editorial. */ html.force-dark[class] [class*="-card"]:not([class*="cardioid"]):not([class*="__"]):not(.cal-prov-card):not(.meteo-prov-card), body.theme-dark[class] [class*="-card"]:not([class*="cardioid"]):not([class*="__"]):not(.cal-prov-card):not(.meteo-prov-card) { background: #142240 !important; color: #e8ecf1 !important; border-color: #1e3a5f !important; } html.force-dark[class] .ic-storia-card, html.force-dark[class] .ic-storia-card.ic-storia-card, body.theme-dark[class] .ic-storia-card { background: #142240 !important; color: #e8ecf1 !important; border: 1px solid #1e3a5f !important; box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important; } /* === Cards sezioni "Argomenti" (Servizi/Eventi/News/Civic) === */ html.force-dark .ic-v3-arg-card, html.force-dark .arg-card, html.force-dark .card, html.force-dark .ic-card, body.theme-dark .ic-v3-arg-card, body.theme-dark .arg-card, body.theme-dark .card, body.theme-dark .ic-card { background: #142240 !important; border: 1px solid #1e3a5f !important; color: #e8ecf1 !important; box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important; } html.force-dark .ic-v3-arg-card:hover, html.force-dark .arg-card:hover, body.theme-dark .ic-v3-arg-card:hover, body.theme-dark .arg-card:hover { border-color: rgba(255,204,51,0.4) !important; box-shadow: 0 8px 28px rgba(255,204,51,0.15) !important; transform: translateY(-2px); } html.force-dark .ic-v3-arg-card h3, html.force-dark .arg-card h3, html.force-dark .card h3, body.theme-dark .ic-v3-arg-card h3 { color: #ffffff !important; } html.force-dark .ic-v3-arg-card p, html.force-dark .arg-card p, html.force-dark .card p, body.theme-dark .ic-v3-arg-card p { color: #c8d4dc !important; } /* === Sezione "Cosa cerchi oggi?" === */ html.force-dark .ic-v3-search, html.force-dark .ic-v3-arg, html.force-dark .ic-section, body.theme-dark .ic-v3-search, body.theme-dark .ic-v3-arg { background: #0a1525 !important; color: #e8ecf1 !important; } html.force-dark .ic-v3-search h2, html.force-dark .ic-v3-arg h2, html.force-dark h2.section-title, body.theme-dark .ic-v3-search h2, body.theme-dark .ic-v3-arg h2 { color: #ffffff !important; } html.force-dark .ic-v3-search .eyebrow, html.force-dark .eyebrow, body.theme-dark .ic-v3-search .eyebrow, body.theme-dark .eyebrow { color: #FFCC33 !important; } /* === Storia di oggi === */ html.force-dark .ic-storia-section, body.theme-dark .ic-storia-section { background: #0a1525 !important; } html.force-dark .ic-storia-card, body.theme-dark .ic-storia-card { background: #142240 !important; border: 1px solid #1e3a5f !important; color: #e8ecf1 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important; } html.force-dark .ic-storia-title, html.force-dark #ic-storia-title, body.theme-dark .ic-storia-title { color: #ffffff !important; } html.force-dark .ic-storia-text, body.theme-dark .ic-storia-text { color: #c8d4dc !important; } html.force-dark .ic-storia-cat, body.theme-dark .ic-storia-cat { background: rgba(255,204,51,0.15) !important; color: #FFCC33 !important; } html.force-dark .ic-storia-mini-card, body.theme-dark .ic-storia-mini-card { background: #142240 !important; border: 1px solid #1e3a5f !important; color: #e8ecf1 !important; } html.force-dark .ic-storia-mini-card:hover, body.theme-dark .ic-storia-mini-card:hover { border-color: rgba(255,204,51,0.4) !important; background: #1a2c4d !important; } html.force-dark .ic-storia-mini-cat, body.theme-dark .ic-storia-mini-cat { color: #FFCC33 !important; } html.force-dark #ic-storia-h2, body.theme-dark #ic-storia-h2 { color: #ffffff !important; } html.force-dark #ic-storia-h2 span:first-of-type, html.force-dark #ic-storia-h2 span:last-of-type, body.theme-dark #ic-storia-h2 span { color: #FFCC33 !important; } html.force-dark .ic-storia-subtitle, body.theme-dark .ic-storia-subtitle { color: #FFCC33 !important; } html.force-dark .ic-storia-meta, body.theme-dark .ic-storia-meta { color: #9caab7 !important; } html.force-dark .ic-storia-btn, body.theme-dark .ic-storia-btn { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #e8ecf1 !important; } html.force-dark .ic-storia-btn:hover, body.theme-dark .ic-storia-btn:hover { background: rgba(255,204,51,0.15) !important; border-color: rgba(255,204,51,0.5) !important; color: #FFCC33 !important; } html.force-dark .ic-storia-btn--primary, body.theme-dark .ic-storia-btn--primary { background: linear-gradient(135deg, #FFCC33, #d4a017) !important; color: #1a1205 !important; border-color: transparent !important; } /* === Calendario eventi === */ html.force-dark .cal-section, html.force-dark .cal-events, html.force-dark .cal-event-card, body.theme-dark .cal-section, body.theme-dark .cal-events, body.theme-dark .cal-event-card { background-color: transparent !important; color: #e8ecf1 !important; } html.force-dark .cal-event-card, body.theme-dark .cal-event-card { background: #142240 !important; border: 1px solid #1e3a5f !important; } html.force-dark .cal-prov-pill, body.theme-dark .cal-prov-pill { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #c8d4dc !important; } html.force-dark .cal-prov-pill.is-active, body.theme-dark .cal-prov-pill.is-active { background: #FFCC33 !important; color: #0a1525 !important; border-color: #FFCC33 !important; } html.force-dark .cal-tab, body.theme-dark .cal-tab { background: rgba(255,255,255,0.05) !important; color: #c8d4dc !important; border: 1px solid rgba(255,255,255,0.14) !important; } html.force-dark .cal-tab:hover, html.force-dark .cal-tab.is-active, body.theme-dark .cal-tab.is-active { background: #FFCC33 !important; color: #0a1525 !important; border-color: #FFCC33 !important; } /* === Mappa Leaflet container === */ html.force-dark .leaflet-container, body.theme-dark .leaflet-container { background-color: #0a1525 !important; } html.force-dark .leaflet-popup-content-wrapper, body.theme-dark .leaflet-popup-content-wrapper { background: #142240 !important; color: #e8ecf1 !important; border: 1px solid #1e3a5f !important; } html.force-dark .leaflet-popup-tip, body.theme-dark .leaflet-popup-tip { background: #142240 !important; } /* === Counters / numeri grandi === */ html.force-dark .cc-num, html.force-dark .counter-num, body.theme-dark .cc-num { color: #FFCC33 !important; } html.force-dark .cc-lbl, body.theme-dark .cc-lbl { color: #c8d4dc !important; } /* === Bottom nav mobile === */ html.force-dark .ic-mobile-bottom-nav, html.force-dark nav[class*="bottom-nav"], body.theme-dark .ic-mobile-bottom-nav { background: rgba(10,21,37,0.95) !important; border-top: 1px solid rgba(255,255,255,0.1) !important; backdrop-filter: blur(18px); } html.force-dark .ic-mobile-bottom-nav a, body.theme-dark .ic-mobile-bottom-nav a { color: #c8d4dc !important; } html.force-dark .ic-mobile-bottom-nav a.active, html.force-dark .ic-mobile-bottom-nav a[aria-current], body.theme-dark .ic-mobile-bottom-nav a.active { color: #FFCC33 !important; } /* === Accessibility panel — già scuro per design, lascia stare === */ /* Nessun override su .ic-a11y-panel — mantiene stile dark nativo */ /* === Cookie banner === */ html.force-dark .ic-cc-banner, body.theme-dark .ic-cc-banner { background: #0a1525 !important; border-top: 1px solid rgba(255,204,51,0.3) !important; color: #e8ecf1 !important; } html.force-dark .ic-cc-banner h3, body.theme-dark .ic-cc-banner h3 { color: #ffffff !important; } html.force-dark .ic-cc-banner p, body.theme-dark .ic-cc-banner p { color: #c8d4dc !important; } /* === FAQ modal === */ html.force-dark .modal, html.force-dark .ic-modal, html.force-dark dialog, body.theme-dark .modal, body.theme-dark .ic-modal { background: #142240 !important; color: #e8ecf1 !important; border: 1px solid #1e3a5f !important; } /* === Info overlay === */ html.force-dark .info-overlay, html.force-dark .info-overlay__panel, body.theme-dark .info-overlay, body.theme-dark .info-overlay__panel { background: #0a1525 !important; color: #e8ecf1 !important; } html.force-dark .info-overlay__section h4, body.theme-dark .info-overlay__section h4 { color: #FFCC33 !important; } /* === Search overlay === */ html.force-dark .search-overlay, body.theme-dark .search-overlay { background: rgba(10,21,37,0.96) !important; backdrop-filter: blur(20px); } html.force-dark .search-overlay__input, body.theme-dark .search-overlay__input { background: rgba(255,255,255,0.06) !important; border: 2px solid rgba(255,204,51,0.3) !important; color: #ffffff !important; } /* === Footer (già scuro per design) — assicura coerenza === */ html.force-dark .ic-footer-v3, body.theme-dark .ic-footer-v3 { background-color: #0a1525 !important; border-top: 3px solid #FFCC33 !important; } /* === Selectors generici (catch-all per div bianchi residui) === */ html.force-dark [class*="card"]:not(.cal-event-card):not(.ic-storia-card):not(.ic-storia-mini-card), body.theme-dark [class*="card"]:not(.cal-event-card):not(.ic-storia-card):not(.ic-storia-mini-card) { background-color: #142240; color: #e8ecf1; } /* === Eventuali bottoni outline === */ html.force-dark .btn-outline, html.force-dark .button--outline, body.theme-dark .btn-outline { background: transparent !important; border: 1.5px solid #FFCC33 !important; color: #FFCC33 !important; } html.force-dark .btn-outline:hover, body.theme-dark .btn-outline:hover { background: rgba(255,204,51,0.15) !important; } /* === Scrollbar custom (Webkit) === */ html.force-dark ::-webkit-scrollbar, body.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.force-dark ::-webkit-scrollbar-track, body.theme-dark ::-webkit-scrollbar-track { background: #0e1c34; } html.force-dark ::-webkit-scrollbar-thumb, body.theme-dark ::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 4px; } html.force-dark ::-webkit-scrollbar-thumb:hover, body.theme-dark ::-webkit-scrollbar-thumb:hover { background: #FFCC33; } /* === Accessibilità: focus visibile gold su tutto === */ html.force-dark *:focus-visible, body.theme-dark *:focus-visible { outline: 2px solid #FFCC33 !important; outline-offset: 2px; } /* === Microcopy / piè di sezioni === */ html.force-dark .text-muted, html.force-dark .text-secondary, body.theme-dark .text-muted, body.theme-dark .text-secondary { color: #9caab7 !important; } /* === Fix per testi ereditati dal force-light === */ html.force-dark p, html.force-dark span, html.force-dark li, html.force-dark dt, html.force-dark dd, body.theme-dark p, body.theme-dark span, body.theme-dark li { color: inherit; } /* === Hero map dark: i puntatori e le label === */ html.force-dark .ic-puglia-map text, body.theme-dark .ic-puglia-map text { fill: #e8ecf1 !important; } html.force-dark .ic-puglia-map path, body.theme-dark .ic-puglia-map path { stroke: rgba(255,204,51,0.45); } /* === FAB (Floating Action Button) "Avvia chat" === */ /* Già nero/oro, no override richiesti */ /* === Skip-link (accessibilità) === */ html.force-dark .skip-link, body.theme-dark .skip-link { background: #FFCC33 !important; color: #0a1525 !important; } /* ============================================================ PRIORITY BLOCK — Specificity bump finale Catch tutti i contenitori bianchi residui in dark mode con selettore a 3 classi (0,3,0) per battere [class*="-card"] di ic-editorial-skin.css. ============================================================ */ html.force-dark.force-dark body, html.force-dark.force-dark main, html.force-dark.force-dark #main { background: #0a1525 !important; background-color: #0a1525 !important; color: #e8ecf1 !important; } html.force-dark.force-dark .ic-storia-card, html.force-dark.force-dark .ic-v3-arg-card, html.force-dark.force-dark .arg-card, html.force-dark.force-dark .ic-card, html.force-dark.force-dark .card:not(.cal-prov-card):not(.meteo-prov-card) { background: #142240 !important; background-color: #142240 !important; color: #e8ecf1 !important; border-color: #1e3a5f !important; } html.force-dark.force-dark section, html.force-dark.force-dark .section { background-color: transparent !important; } /* Container pill: stato neutro più scuro */ html.force-dark.force-dark .prov-pill-wrap > summary.prov-pill { background: rgba(255,255,255,0.05) !important; background-color: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.18) !important; color: #ffffff !important; } /* Text generale */ html.force-dark.force-dark h1, html.force-dark.force-dark h2, html.force-dark.force-dark h3, html.force-dark.force-dark h4 { color: #ffffff !important; } html.force-dark.force-dark p, html.force-dark.force-dark li, html.force-dark.force-dark span:not(.cc-num):not(.eyebrow):not(.ic-storia-cat):not(.ic-storia-mini-cat) { color: inherit; } html.force-dark.force-dark .text-muted, html.force-dark.force-dark small { color: #9caab7 !important; } /* ============================================================ Sprint 9g (03/05/2026) — Dark mode total coverage Override per elementi rimasti chiari dopo audit visivo: - Hero crema (.hero, .hero--dark) → navy - Footer accessibilità (.ica-foot) → navy - Province cards (.prov-pill, .prov-pill-wrap) → navy soft - Cookie banner (.ic-cc-banner) → navy - FAQ modal panel - Card chiare residue ============================================================ */ /* Hero */ html.force-dark .hero, html.force-dark .hero--dark, html.force-dark .hero-section, html.force-dark section.hero, html.force-dark section.hero--dark { background: linear-gradient(145deg, #0a1525 0%, #0e1c34 50%, #142240 100%) !important; color: #e8ecf1 !important; } html.force-dark .hero h1, html.force-dark .hero h2, html.force-dark .hero p, html.force-dark .hero .hero-title, html.force-dark .hero .hero-sub, html.force-dark .hero-content, html.force-dark .hero-content * { color: #ffffff !important; } html.force-dark .hero .hero-search-input, html.force-dark .hero input[type="search"], html.force-dark .hero input[type="text"] { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.18) !important; } html.force-dark .hero .hero-search-input::placeholder, html.force-dark .hero input::placeholder { color: rgba(232,236,241,0.7) !important; } /* Footer ica-foot (crema → navy) */ html.force-dark footer.ica-foot, html.force-dark .ica-foot, html.force-dark footer.site-footer-v2, html.force-dark footer[class*="footer"] { background: #0e1c34 !important; color: #e8ecf1 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; } html.force-dark footer a, html.force-dark footer button, html.force-dark footer .ica-foot__link, html.force-dark .ica-foot * { color: #e8ecf1 !important; } html.force-dark footer a:hover, html.force-dark footer button:hover { color: #FFCC33 !important; } /* Province cards — pill chiare in dark devono essere navy soft */ html.force-dark .prov-pill, html.force-dark .prov-pill-wrap, html.force-dark .ic-prov-pill, html.force-dark [class*="prov-pill"] { background: #142240 !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #ffffff !important; } html.force-dark .prov-pill:hover, html.force-dark .ic-prov-pill:hover { background: #1a2c4d !important; border-color: rgba(255,204,51,0.4) !important; } html.force-dark .ic-prov-name-fixed { color: #ffffff !important; } html.force-dark .prov-pill small, html.force-dark .ic-prov-pill small { background: rgba(255,204,51,0.14) !important; color: #FFCC33 !important; } /* Cookie banner */ html.force-dark .ic-cc-banner, html.force-dark #icCcBanner, html.force-dark .cookie-banner, html.force-dark [class*="cc-banner"] { background: #0e1c34 !important; color: #e8ecf1 !important; border-top: 2px solid #FFCC33 !important; } html.force-dark .ic-cc-banner h2, html.force-dark .ic-cc-banner h3, html.force-dark .ic-cc-banner p, html.force-dark .ic-cc-banner .ic-cc-text, html.force-dark .ic-cc-banner * { color: #e8ecf1 !important; } html.force-dark .ic-cc-banner button.ic-cc-accept-all, html.force-dark .ic-cc-banner [data-cc="accept-all"] { background: #FFCC33 !important; color: #0b2340 !important; } html.force-dark .ic-cc-banner button.ic-cc-reject-all, html.force-dark .ic-cc-banner [data-cc="reject-all"] { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.2) !important; } /* FAQ modal */ html.force-dark .faq-modal__panel, html.force-dark .faq-modal__content, html.force-dark .modal, html.force-dark .modal__panel, html.force-dark [class*="modal__panel"] { background: #142240 !important; color: #e8ecf1 !important; border: 1px solid rgba(255,255,255,0.1) !important; } html.force-dark .faq-modal__panel *, html.force-dark .faq-modal__content * { color: inherit; } html.force-dark .faq-modal__close { color: #e8ecf1 !important; } /* Search overlay / dropdowns */ html.force-dark .ic-search-overlay, html.force-dark .search-overlay, html.force-dark .ic-search-results { background: rgba(10,21,37,0.96) !important; color: #e8ecf1 !important; } /* Cards generiche su sfondo bianco/crema → navy soft */ html.force-dark [class*="-card"]:not(.ic-storia-card):not(.ic-storia-mini-card), html.force-dark .card, html.force-dark article.card { background: #142240 !important; color: #e8ecf1 !important; border-color: rgba(255,255,255,0.1) !important; } /* Buttons primari/secondari dark */ html.force-dark .btn-civic, html.force-dark .btn-civic--secondary, html.force-dark .btn-primary { background: #FFCC33 !important; color: #0b2340 !important; border: 0 !important; } html.force-dark .btn-secondary, html.force-dark .btn-ghost, html.force-dark button.ghost { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.2) !important; } /* Backdrop overlay → semi-trasparente più scuro */ html.force-dark .ic-cc-overlay, html.force-dark .modal-backdrop, html.force-dark .faq-modal__backdrop { background: rgba(10,21,37,0.85) !important; } /* ============================================================ Sprint 9g v2 — specificity boost contro main.css/ic-overrides.css Le regole sopra perdevano la cascade contro selettori più specifici. Doppio :is(html.force-dark) o html[class*="force-dark"] aumentano weight. ============================================================ */ html.force-dark.force-dark .hero, html.force-dark.force-dark .hero--dark, html.force-dark.force-dark section.hero, html.force-dark.force-dark section.hero--dark, body.theme-dark .hero, body.theme-dark section.hero { background: linear-gradient(145deg, #0a1525 0%, #0e1c34 50%, #142240 100%) !important; background-image: none, linear-gradient(145deg, #0a1525 0%, #0e1c34 50%, #142240 100%) !important; color: #e8ecf1 !important; } html.force-dark.force-dark .prov-pill, html.force-dark.force-dark .prov-pill-wrap, html.force-dark.force-dark details.prov-pill-wrap, html.force-dark.force-dark .ic-prov-pill, body.theme-dark .prov-pill, body.theme-dark details.prov-pill-wrap { background: #142240 !important; background-color: #142240 !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #ffffff !important; } html.force-dark.force-dark details.prov-pill-wrap > summary, html.force-dark.force-dark .prov-pill > summary { background: transparent !important; color: #ffffff !important; } html.force-dark.force-dark .prov-pill *, html.force-dark.force-dark .prov-pill-wrap *, html.force-dark.force-dark .ic-prov-pill * { color: #ffffff !important; } html.force-dark.force-dark .prov-pill small, html.force-dark.force-dark .prov-pill-wrap small { background: rgba(255,204,51,0.16) !important; color: #FFCC33 !important; } html.force-dark.force-dark footer.ica-foot, html.force-dark.force-dark .ica-foot, html.force-dark.force-dark footer.site-footer-v2, html.force-dark.force-dark body footer.site-footer-v2, body.theme-dark footer.ica-foot { background: #0e1c34 !important; background-color: #0e1c34 !important; color: #e8ecf1 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; } html.force-dark.force-dark .ica-foot *, html.force-dark.force-dark footer.ica-foot * { color: #e8ecf1 !important; } html.force-dark.force-dark .ica-foot a:hover, html.force-dark.force-dark .ica-foot button:hover { color: #FFCC33 !important; } /* ============================================================ MOBILE LIGHT-ONLY (Strategia C - 2026-05-23) Su mobile (<=1024px) la pagina parte SEMPRE in versione chiara, ignorando prefers-color-scheme: dark del sistema (iOS dark mode). L'utente puo' comunque attivare il dark via pannello accessibilita', che applica la classe .force-dark su : in quel caso questa regola NON si attiva e il dark mode funziona normalmente. ============================================================ */ @media (max-width: 1024px) { html:not(.force-dark) { color-scheme: light only; } }