/* ============================================================ InfoComuni · WCAG 2.1 AA contrast fixes Sprint 9c (03/05/2026) -------------------------------------------------------------- Override mirato per portare a contrast ratio >= 4.5:1 (testo normale) e >= 3:1 (testo grande / UI) tutti gli elementi identificati dall'audit axe-core (test 04-a11y-axe). File caricato come ULTIMO foglio nel per priorità di cascata. Rispetta dark mode (overrides separati per .force-dark). ============================================================ */ /* === 1. Breadcrumb in .page-header navy (eventi/news/etc) === */ /* Prima: #6B7280 su #0B2340 = 4.05:1 (fail). Dopo: #E8ECF1 = 12.1:1 */ .page-header .breadcrumb a, .page-header .breadcrumb span, .page-header > .container a:not(.btn), .page-header > .container span, .page-header nav a, .page-header nav span { color: #E8ECF1 !important; } .page-header a:hover, .page-header a:focus-visible { color: #FFCC33 !important; text-decoration: underline; } /* === 2. .addr in event cards / footer (su sfondo crema #F5F1E7) === */ /* Prima: #D4DDE4 (decorative-light) su crema = ~1.4:1. Dopo: #4B5563 = 7.6:1. Necessari selettori specifici per battere ic-quality-polish.css (.site-footer-v2 .contact-col .addr, !important). Specificity: 0,3,0 vs 0,3,0 — vince per ordine se contrast-aa è caricato dopo. */ html .site-footer-v2 .contact-col .addr, html body footer .contact-col .addr, html footer.site-footer-v2 .addr, .event-card .addr, .evento-card .addr, .cal-card .addr, .addr { color: #4B5563 !important; } /* === 3. Eyebrow / sectional labels === */ /* Es. .ic-v3-eyebrow "Argomenti del cittadino", .a11y-eyebrow */ .ic-v3-eyebrow, .a11y-eyebrow, .eyebrow, [class*="-eyebrow"] { color: #595F6B !important; /* 7:1 su bianco */ font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* === 4. Cookie banner "Mostra dettagli" link button === */ .ic-cc-link, .ic-cc-link-btn, button.ic-cc-link { color: #8C6814 !important; /* 5.55:1 su bianco — AA solido */ } .ic-cc-link:hover { color: #5C4400 !important; text-decoration: underline; } /* === 5. Badge MVP / status === */ /* Prima: text muted #9CA3AF su bg light. Dopo: #1F2937 (15:1) */ .badge, .tag, .pill, [class*="badge"], [class*="tag-"] { color: #1F2937 !important; background-color: #F3F4F6; /* fallback se trasparente */ } /* Override per varianti specifiche (warning, success, info) */ .badge--warning, .tag--warning { background-color: #FEF3C7 !important; color: #78350F !important; /* dark amber, 8.3:1 su #FEF3C7 */ } .badge--success, .tag--success { background-color: #D1FAE5 !important; color: #064E3B !important; /* dark green, 9.7:1 */ } .badge--info, .tag--info { background-color: #DBEAFE !important; color: #1E3A8A !important; /* dark blue, 9.4:1 */ } .badge--error, .tag--error { background-color: #FEE2E2 !important; color: #7F1D1D !important; /* dark red, 8.6:1 */ } /* === 6. con color hardcoded warning/disambig (assistente, cerca) === */ em[style*="--color-semantic-warning"], em[style*="warning"], .ic-disambig-hint em, .search-hint em { color: #92400E !important; /* dark amber, 5.5:1 su bianco */ font-style: normal; font-weight: 600; } /* === 6b. Status badge overall (status.html) === */ .status-overall--ok, .status-overall.status-overall--ok { background-color: #064E3B !important; /* dark green */ color: #D1FAE5 !important; /* light green = 11.7:1 */ font-weight: 600; } .status-overall--warning, .status-overall.status-overall--warning { background-color: #78350F !important; /* dark amber */ color: #FEF3C7 !important; /* light amber = 11:1 */ font-weight: 600; } .status-overall--ko, .status-overall--error, .status-overall.status-overall--ko, .status-overall.status-overall--error { background-color: #7F1D1D !important; /* dark red */ color: #FEE2E2 !important; /* light red = 10.4:1 */ font-weight: 600; } /* === 7. .metric__label (status page) === Override generico [class*="__label"] esclude form labels (già scuri) E esclude i label dentro pulsanti FAB con bg navy (es. .ic-easy-read-fab__label) */ .metric__label, .metric-label, [class*="__label"]:not([class*="form-"]):not([class*="fab"]):not([class*="-btn"]) { color: #374151 !important; /* 11.6:1 su bianco */ font-weight: 500; } .metric__sub, .metric-sub, [class*="__sub"]:not([class*="fab"]) { color: #4B5563 !important; /* 7.6:1 */ } /* FAB Easy Read (bg navy, label deve essere chiara) */ .ic-easy-read-fab, .ic-easy-read-fab__label, .ic-easy-read-fab * { color: #FFFFFF !important; /* 16:1 su navy #0B2340 */ } html.force-dark .ic-easy-read-fab, html.force-dark .ic-easy-read-fab__label, html.force-dark .ic-easy-read-fab * { color: #FFFFFF !important; } /* === 8. Province cards: .ic-prov-name-fixed + small === WCAG 1.4.12 Text Spacing: i font-size/line-height/letter-spacing devono essere overridable via user stylesheet. Spostati da inline JS a classe CSS. */ .ic-prov-name-fixed { color: #0B2340; /* navy primary, 14.8:1 su bianco */ font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 800; } .prov-pill small, .ic-prov-pill small { color: #4B5563; font-size: 10px; letter-spacing: 0.06em; line-height: 1; font-weight: 700; } .ic-prov-meta { font-size: 11.5px; line-height: 1.4; letter-spacing: 0; font-weight: 500; color: rgba(11, 35, 64, 0.65); } html.force-dark .ic-prov-name-fixed { color: #FFFFFF; } html.force-dark .prov-pill small, html.force-dark .ic-prov-pill small { color: #C8D4DC; } html.force-dark .ic-prov-meta { color: rgba(232, 236, 241, 0.75); } /* === 9. .a11y-meta su dichiarazione-accessibilita === Sfondo bianco di default = #374151 dà 11.6:1 (OK). ATTENZIONE: la dichiarazione ha hero navy in alto. Override sotto. */ .a11y-meta, .a11y-meta time, .a11y-meta strong { color: #374151 !important; /* 11.6:1 su bianco */ } /* === 9b. Hero navy della dichiarazione-accessibilita === Container con bg #09223A (navy AGID) — eyebrow/h1/meta devono essere chiari */ .a11y-hero, .page-header, [class*="-hero"]:not(.hero-decorative) { /* Quando il container ha il navy istituzionale */ } .a11y-hero .a11y-eyebrow, .a11y-container .a11y-eyebrow, .page-header .a11y-eyebrow, .a11y-hero .ic-v3-eyebrow, .page-header .ic-v3-eyebrow { color: #FFCC33 !important; /* gold, 11:1 su navy */ } .a11y-hero h1, .a11y-hero .h1, .a11y-container h1, .a11y-container .h1, .page-header h1, .page-header .h1 { color: #FFFFFF !important; /* 16:1 su navy */ } .a11y-hero .a11y-meta, .a11y-hero .a11y-meta time, .a11y-hero .a11y-meta strong, .a11y-container .a11y-meta, .a11y-container .a11y-meta time, .a11y-container .a11y-meta strong, .page-header .a11y-meta, .page-header .page-meta, .page-header [class*="-meta"] { color: #E8ECF1 !important; /* 13:1 su navy */ } /* === 9c. Dichiarazione di Accessibilità — body intero su navy === Il container .a11y-container ha bg navy istituzionale per emphasis. Tutti i testi dentro devono essere chiari (16:1 su navy). */ main.a11y-container, main.a11y-container h2, main.a11y-container h3, main.a11y-container h4, main.a11y-container h5, main.a11y-container h6, main.a11y-container p, main.a11y-container li, main.a11y-container td, main.a11y-container dt, main.a11y-container dd { color: #E8ECF1 !important; } main.a11y-container strong, main.a11y-container b { color: #FFFFFF !important; } main.a11y-container a:not(.btn) { color: #FFCC33 !important; text-decoration: underline; } main.a11y-container a:not(.btn):hover { color: #FFE08A !important; } /* === 10. h2 sezioni (assistente, cerca, status) === */ /* Prima: var con poco contrasto. Dopo: navy primary */ .ic-section h2, section h2:not([class]), .assistente-section h2, .search-section h2 { color: #0B2340 !important; } /* ============================================================ DARK MODE OVERRIDES — quando html.force-dark è attivo, ribilanciamo i colori per restare AA su sfondo navy #0a1525 ============================================================ */ html.force-dark .page-header .breadcrumb a, html.force-dark .page-header .breadcrumb span, html.force-dark .page-header > .container a:not(.btn), html.force-dark .page-header > .container span, html.force-dark .page-header nav a, html.force-dark .page-header nav span { color: #E8ECF1 !important; } html.force-dark .event-card .addr, html.force-dark .evento-card .addr, html.force-dark .cal-card .addr, html.force-dark .addr { color: #C8D4DC !important; /* 9.4:1 su navy */ } html.force-dark .ic-v3-eyebrow, html.force-dark .a11y-eyebrow, html.force-dark .eyebrow, html.force-dark [class*="-eyebrow"] { color: #C8D4DC !important; } html.force-dark .ic-cc-link, html.force-dark .ic-cc-link-btn, html.force-dark button.ic-cc-link { color: #FFCC33 !important; /* gold accent, 11:1 su navy */ } html.force-dark .badge, html.force-dark .tag, html.force-dark .pill, html.force-dark [class*="badge"], html.force-dark [class*="tag-"] { color: #E8ECF1 !important; background-color: #1A2C4D; } html.force-dark .badge--warning, html.force-dark .tag--warning { background-color: #4A2C0F !important; color: #FBD38D !important; } html.force-dark .badge--success, html.force-dark .tag--success { background-color: #0F3D2C !important; color: #6EE7B7 !important; } html.force-dark .badge--info, html.force-dark .tag--info { background-color: #1E3A5F !important; color: #93C5FD !important; } html.force-dark .badge--error, html.force-dark .tag--error { background-color: #4A1515 !important; color: #FCA5A5 !important; } html.force-dark em[style*="--color-semantic-warning"], html.force-dark em[style*="warning"], html.force-dark .ic-disambig-hint em, html.force-dark .search-hint em { color: #FBD38D !important; /* light amber, 9.3:1 su navy */ } html.force-dark .metric__label, html.force-dark .metric-label, html.force-dark [class*="__label"]:not([class*="form-"]) { color: #E8ECF1 !important; } html.force-dark .metric__sub, html.force-dark .metric-sub, html.force-dark [class*="__sub"] { color: #C8D4DC !important; } html.force-dark .ic-prov-name-fixed { color: #FFFFFF !important; } html.force-dark .prov-pill small, html.force-dark .ic-prov-pill small { color: #C8D4DC !important; } html.force-dark .a11y-meta, html.force-dark .a11y-meta time, html.force-dark .a11y-meta strong { color: #E8ECF1 !important; } html.force-dark .ic-section h2, html.force-dark section h2:not([class]), html.force-dark .assistente-section h2, html.force-dark .search-section h2 { color: #FFFFFF !important; } /* ============================================================ Sprint 9g (03/05/2026) — Theme toggle in topbar ============================================================ */ /* Specificity bumped (#btn-theme da main.css ha display:none, dobbiamo batterlo) */ button#btn-theme.ic-theme-toggle, .ic-theme-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 4px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; color: #ffffff; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; position: relative; visibility: visible !important; opacity: 1 !important; } .ic-theme-toggle:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,204,51,0.5); transform: scale(1.06); } .ic-theme-toggle:focus-visible { outline: 2px solid #FFCC33; outline-offset: 2px; } .ic-theme-toggle svg { width: 20px; height: 20px; display: block; } .ic-theme-toggle__sun { color: #FFCC33; } /* Light mode override */ html.force-light .ic-theme-toggle { background: rgba(11,35,64,0.08); border-color: rgba(11,35,64,0.18); color: #0b2340; } html.force-light .ic-theme-toggle:hover { background: rgba(11,35,64,0.14); border-color: rgba(255,204,51,0.6); } @media (prefers-reduced-motion: reduce) { .ic-theme-toggle, .ic-theme-toggle:hover { transition: none; transform: none; } } @media (max-width: 600px) { .ic-theme-toggle { width: 36px; height: 36px; } .ic-theme-toggle svg { width: 18px; height: 18px; } } /* ================================================================ DARK MODE — fix contrasti componenti custom (audit 03/05/2026) Problema: numerosi componenti hanno color #0b2340 / #0e2f4a hardcoded che diventa invisibile sul bg dark navy #142240. Schiariamo a #ECF1F8 (≈14:1 su #142240) dove serve, oro #FFCC33 (≈10:1) per accenti, slate #94A3B8 (≈5.5:1) per metadati. ================================================================ */ /* Hero pill province (index.html) */ html.force-dark .prov-pill, html.force-dark .prov-pill .ic-prov-name-fixed, html.force-dark .prov-pill small, html.force-dark .prov-pill small span { color: #ECF1F8 !important; } html.force-dark .prov-pill small { background: rgba(255, 204, 51, 0.18) !important; color: #FFCC33 !important; } /* Card meteo 7 giorni */ html.force-dark .wpv-day, html.force-dark .wpv-min, html.force-dark .wpv-max { color: #ECF1F8 !important; } html.force-dark .wpv-day { color: #C8D4DC !important; } html.force-dark .wpv-min { color: #94A3B8 !important; } /* "OGGI" highlight */ html.force-dark .wpv-day:first-child, html.force-dark .wpv-card.is-today .wpv-day { color: #FFCC33 !important; } /* Calendario eventi: tab e card */ html.force-dark .cal-tab, html.force-dark .cal-tab.active, html.force-dark .cal-ev-title, html.force-dark .cal-ev-prov, html.force-dark .cal-ev-cat, html.force-dark .cal-ev-when, html.force-dark .cal-ev-where { color: #ECF1F8 !important; } html.force-dark .cal-tab.active { background: rgba(255, 204, 51, 0.16) !important; color: #FFCC33 !important; } html.force-dark .cal-ev-prov { background: rgba(255, 204, 51, 0.18) !important; color: #FFCC33 !important; } /* Card "storia del giorno" / fonte */ html.force-dark .ic-storia-titolo, html.force-dark .ic-storia-fonte, html.force-dark .ic-storia-corpo, html.force-dark .ic-storia-meta { color: #ECF1F8 !important; } html.force-dark .ic-storia-fonte, html.force-dark .ic-storia-meta { color: #94A3B8 !important; } /* Cammini: tab + card source */ html.force-dark .ic-cammini-tab, html.force-dark .ic-cammini-tab__icon, html.force-dark .ic-cammini-tab__label, html.force-dark .ic-cammino-card__title, html.force-dark .ic-cammino-card__desc, html.force-dark .ic-cammino-card__source { color: #ECF1F8 !important; } html.force-dark .ic-cammini-tab__count { background: rgba(255, 204, 51, 0.18) !important; color: #FFCC33 !important; } html.force-dark .ic-cammino-card__source { color: #94A3B8 !important; } /* Province accordion (province.html) */ html.force-dark .prov-acc__summary, html.force-dark .prov-acc__name, html.force-dark .prov-acc__count, html.force-dark .prov-acc__cap-name, html.force-dark .prov-acc__cap-label, html.force-dark .prov-acc__item { color: #ECF1F8 !important; } html.force-dark .prov-acc__count, html.force-dark .prov-acc__cap-label { color: #94A3B8 !important; } /* Bottone "A" (font-size accessibility) attivo: era #0e2f4a su #09223A */ html.force-dark .a11y-size-btn.active { background: rgba(255, 204, 51, 0.18) !important; color: #FFCC33 !important; } /* ================================================================ LIGHT MODE — fix accenti oro illeggibili su sfondi chiari "moneta virtuale", "JobCoin", "OGGI" badge → oro #C89B3C su crema/bianco ratio < 3.2. Scuriamo a #8A6A1F (≈5:1) per testo inline. ================================================================ */ html.force-light .ic-jc-accent, html.force-light .ic-v3-jobcoin__eye, html.force-light em.jc-emph, html.force-light strong.jc-emph, html.force-light .wpv-card.is-today .wpv-day { color: #8A6A1F !important; } /* Cammini count badge "4" su oro: aumentiamo contrasto bianco→navy */ html.force-light .ic-cammini-tab__count { background: #FFCC33 !important; color: #0B2340 !important; } /* ================================================================ DARK MODE — fix container che restano bianchi (override JS) Molti componenti dinamici (prov-pill-wrap, cal-card, wpv-card, ic-cammino-card, ic-storia) sono themed via JS al primo render ma non reagiscono al cambio tema runtime. Forziamo via CSS. ================================================================ */ html.force-dark #provPills .prov-pill-wrap, html.force-dark .prov-pills .prov-pill-wrap, html.force-dark .prov-pill-wrap, html.force-dark .cal-card, html.force-dark .cal-ev, html.force-dark .cal-ev-card, html.force-dark .ic-cammino-card, html.force-dark .ic-storia, html.force-dark .ic-storia-card, html.force-dark .wpv-card, html.force-dark .ica-cp, html.force-dark .ica-fs { background: #142240 !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* Sprint 10: open state in dark */ html.force-dark #provPills .prov-pill-wrap[open], html.force-dark .prov-pills .prov-pill-wrap[open] { background: linear-gradient(180deg, #1a2d52 0%, #233a66 100%) !important; border-color: #FFCC33 !important; box-shadow: 0 8px 24px rgba(255, 204, 51, 0.20), 0 0 0 3px rgba(255, 204, 51, 0.18) !important; } /* ================================================================ A11Y UNIVERSALS — Sprint 10 (03/05/2026) Skip-link visibile, focus-visible uniforme, touch target min 44px. Tutto WCAG 2.1 AA + AGID. Battle inline-style con specificità alta. ================================================================ */ /* === Skip-link migliorato — appare in alto al focus, ben visibile === */ html body .skip-link { position: fixed !important; top: -100px !important; left: 16px !important; z-index: 100000 !important; padding: 14px 22px !important; background: #FFCC33 !important; color: #0B2340 !important; font: 700 15px/1 'Inter', system-ui, sans-serif !important; text-decoration: none !important; border: 2px solid #0B2340 !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(11, 35, 64, 0.35) !important; transition: top .2s cubic-bezier(.4,0,.2,1) !important; white-space: nowrap !important; letter-spacing: 0.01em !important; } html body .skip-link:focus, html body .skip-link:focus-visible { top: 16px !important; outline: 3px solid #0B2340 !important; outline-offset: 2px !important; } html.force-dark body .skip-link { background: #FFCC33 !important; color: #0B2340 !important; border-color: #FFCC33 !important; } /* === Focus-visible uniforme su tutti gli elementi interattivi === :focus-visible mostra il ring solo per navigazione keyboard, non al click del mouse. Pattern moderno WCAG 2.4.7. */ html a:focus-visible, html button:focus-visible, html [role="button"]:focus-visible, html input:focus-visible, html select:focus-visible, html textarea:focus-visible, html summary:focus-visible, html details > summary:focus-visible, html [tabindex]:focus-visible { outline: 3px solid #FFCC33 !important; outline-offset: 2px !important; border-radius: 6px !important; box-shadow: 0 0 0 1px rgba(11, 35, 64, 0.45) !important; } html.force-dark a:focus-visible, html.force-dark button:focus-visible, html.force-dark [role="button"]:focus-visible, html.force-dark input:focus-visible, html.force-dark select:focus-visible, html.force-dark textarea:focus-visible, html.force-dark summary:focus-visible { outline-color: #FFCC33 !important; box-shadow: 0 0 0 1px #0B2340 !important; } /* === Touch target minimo 44×44 (WCAG 2.5.5) === Garantito per CTA primari, link nav, item liste cliccabili. Esclusi: chip/badge piccoli inline (es. badge "OGGI") perché ridondanti con touch target più grandi vicini. */ @media (pointer: coarse), (hover: none) { html .bottom-nav__item, html .ic-app-nav__item, html .puglia-menu__item, html .prov-dd-item, html .prov-dd-cap, html .a11y-profile-btn, html .a11y-kiosk-btn, html .ic-v3-arg-card, html .ic-v3-jobcoin, html .jc-cta, html .jc-role, html .ic-cammini-tab, html .ica-cp__target, html .ica-fs__tab, html .cal-tab, html nav a, html .site-header a, html footer a { min-height: 44px !important; } html button, html [role="button"], html .btn, html input[type="submit"], html input[type="button"] { min-height: 44px !important; min-width: 44px !important; } } /* === Reduced motion — rispetta prefers-reduced-motion === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================================ LOADING STATES — Sprint 10 (03/05/2026) Pattern unificato per moduli backend (eventi, news, storie, meteo, smart-search). Usabili sia con data-loading="true" sui container, sia come componenti (.ic-skeleton, .ic-spinner, .ic-empty). ================================================================ */ /* Skeleton shimmer — placeholder mentre i dati caricano */ .ic-skeleton, [data-loading="true"] .ic-skeleton-target, [data-state="loading"] .ic-skeleton-target { position: relative; background: linear-gradient( 90deg, rgba(11, 35, 64, 0.06) 0%, rgba(11, 35, 64, 0.12) 50%, rgba(11, 35, 64, 0.06) 100% ); background-size: 200% 100%; animation: ic-shimmer 1.4s ease-in-out infinite; border-radius: 8px; color: transparent !important; user-select: none; pointer-events: none; } .ic-skeleton--text { height: 1em; margin: 0.4em 0; } .ic-skeleton--title { height: 1.6em; margin: 0.6em 0; width: 60%; } .ic-skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; } .ic-skeleton--card { height: 120px; margin: 0.8em 0; } .ic-skeleton--button { height: 44px; width: 140px; } @keyframes ic-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } html.force-dark .ic-skeleton, html.force-dark [data-loading="true"] .ic-skeleton-target, html.force-dark [data-state="loading"] .ic-skeleton-target { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.05) 100% ); background-size: 200% 100%; } /* Spinner inline — per caricamenti incrementali / pulsanti "in corso" */ .ic-spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid rgba(11, 35, 64, 0.18); border-top-color: #FFCC33; border-radius: 50%; animation: ic-spin 0.8s linear infinite; vertical-align: middle; } .ic-spinner--lg { width: 32px; height: 32px; border-width: 3.5px; } .ic-spinner--sm { width: 14px; height: 14px; border-width: 2px; } @keyframes ic-spin { to { transform: rotate(360deg); } } html.force-dark .ic-spinner { border-color: rgba(236, 241, 248, 0.18); border-top-color: #FFCC33; } /* Container "in caricamento" — overlay con spinner centrale */ [data-loading="true"]:not(.ic-no-overlay) { position: relative; min-height: 120px; } [data-loading="true"]:not(.ic-no-overlay)::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.65); z-index: 10; pointer-events: none; border-radius: inherit; } [data-loading="true"]:not(.ic-no-overlay)::before { content: ''; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 3.5px solid rgba(11, 35, 64, 0.18); border-top-color: #FFCC33; border-radius: 50%; animation: ic-spin 0.8s linear infinite; z-index: 11; } html.force-dark [data-loading="true"]:not(.ic-no-overlay)::after { background: rgba(11, 35, 64, 0.65); } html.force-dark [data-loading="true"]:not(.ic-no-overlay)::before { border-color: rgba(236, 241, 248, 0.18); border-top-color: #FFCC33; } /* Empty state — quando il backend risponde 0 risultati */ .ic-empty { padding: 40px 24px; text-align: center; color: rgba(11, 35, 64, 0.65); font-size: 14px; line-height: 1.6; } .ic-empty__icon { display: inline-flex; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: rgba(255, 204, 51, 0.14); color: #C89B3C; align-items: center; justify-content: center; } .ic-empty__icon svg { width: 28px; height: 28px; } .ic-empty__title { display: block; margin: 0 0 6px; font-weight: 700; color: #0B2340; font-size: 16px; } html.force-dark .ic-empty { color: rgba(236, 241, 248, 0.72); } html.force-dark .ic-empty__title { color: #ECF1F8; } /* Error state — quando il backend fallisce */ .ic-error { padding: 24px; border: 1.5px solid rgba(220, 38, 38, 0.30); background: rgba(220, 38, 38, 0.06); border-radius: 12px; color: #B91C1C; font-size: 14px; line-height: 1.5; } .ic-error__title { display: block; margin-bottom: 6px; font-weight: 700; color: #991B1B; } .ic-error__retry { display: inline-block; margin-top: 10px; padding: 8px 16px; background: #B91C1C; color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px; } .ic-error__retry:hover { background: #991B1B; } html.force-dark .ic-error { background: rgba(220, 38, 38, 0.14); color: #FCA5A5; border-color: rgba(220, 38, 38, 0.45); } html.force-dark .ic-error__title { color: #FCA5A5; } html.force-dark .cal-ev-title, html.force-dark .cal-card .title, html.force-dark .cal-ev-name { color: #ECF1F8 !important; } /* Hero: se ha bg crema chiaro in dark, override a navy */ html.force-dark .hero, html.force-dark .ic-hero, html.force-dark .ic-hero-bg, html.force-dark .hero-content { background: #09223A !important; } html.force-dark .ic-hero-h1-visible, html.force-dark .hero h1, html.force-dark .hero p { color: #ECF1F8 !important; background: transparent !important; } /* Cal-tab attivo "TUTTI" navy-su-navy → gold */ html.force-dark .cal-tab.active, html.force-dark .cal-tab[aria-selected="true"] { background: rgba(255, 204, 51, 0.18) !important; color: #FFCC33 !important; } /* Pannelli accessibility / cookie target chips */ html.force-dark .ica-cp__target, html.force-dark .ica-fs__tab, html.force-dark .ica-fs__tab.is-on, html.force-dark .ic-cc-tab, html.force-dark .ic-cc-tab.active { color: #ECF1F8 !important; } html.force-dark .ica-fs__tab.is-on, html.force-dark .ic-cc-tab.active { background: rgba(255, 204, 51, 0.18) !important; color: #FFCC33 !important; } /* ================================================================ HERO + PROV-PILLS — UX polish (03/05/2026) - Spazi più ariosi ma compatti - Pill province: hover lift + shadow, chevron visibile a destra - Active pill (open): bg gold-tint, border gold ================================================================ */ /* Hero: tighten vertical rhythm */ .hero #ic-search-bar { margin-bottom: 12px !important; } .hero .ic-hero-cta-primary { margin-top: 14px !important; } .hero .prov-pills, .hero #provPills { margin-top: 22px !important; gap: 14px !important; flex-wrap: wrap !important; justify-content: center !important; } /* H1 hero: leggermente più tight, miglior leggibilità */ .hero h1, .ic-hero-h1-visible { letter-spacing: -0.02em !important; line-height: 1.05 !important; margin-bottom: 10px !important; } /* Eyebrow "INFOCOMUNI · PUGLIA" */ .hero .ic-hero-eyebrow, .hero .eyebrow { letter-spacing: 0.18em !important; margin-bottom: 6px !important; font-weight: 500 !important; } /* Pill wrap: hover lift + shadow soft */ .prov-pill-wrap { transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1), border-color .18s ease !important; cursor: pointer; } .prov-pill-wrap:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(11, 35, 64, 0.10), 0 2px 4px rgba(11, 35, 64, 0.06) !important; border-color: rgba(255, 204, 51, 0.55) !important; } .prov-pill-wrap[open] { border-color: #C89B3C !important; box-shadow: 0 8px 22px rgba(200, 155, 60, 0.22), 0 0 0 3px rgba(200, 155, 60, 0.12) !important; } /* Pill: chevron visibile e animato */ .prov-pill__chev { display: inline-block !important; width: 14px !important; height: 14px !important; margin-left: 6px !important; color: rgba(11, 35, 64, 0.45) !important; transition: transform .2s ease, color .2s ease !important; position: static !important; vertical-align: middle !important; } .prov-pill-wrap[open] .prov-pill__chev { transform: rotate(180deg) !important; color: #C89B3C !important; } /* Pill summary: padding orizzontale più ariato, gap fra nome e chevron */ .prov-pill-wrap[data-prov] .prov-pill { padding: 12px 18px !important; gap: 4px !important; min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; } /* Dark mode: sostiene polish */ html.force-dark .prov-pill-wrap:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,204,51,0.35) !important; border-color: rgba(255, 204, 51, 0.45) !important; } html.force-dark .prov-pill__chev { color: rgba(236, 241, 248, 0.55) !important; } html.force-dark .prov-pill-wrap[open] .prov-pill__chev { color: #FFCC33 !important; } /* CTA primario: glow soft, hover lift */ .ic-hero-cta-primary { border-radius: 14px !important; box-shadow: 0 4px 14px rgba(255, 204, 51, 0.30), 0 1px 0 rgba(255, 255, 255, 0.5) inset !important; transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1) !important; } .ic-hero-cta-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(255, 204, 51, 0.40), 0 1px 0 rgba(255, 255, 255, 0.6) inset !important; } .ic-hero-cta-primary:active { transform: translateY(0) !important; } /* Search bar: focus ring più visibile */ #ic-search-bar input:focus-visible { outline: 3px solid rgba(255, 204, 51, 0.55) !important; outline-offset: 2px !important; } /* ================================================================ HERO — riduzione spazi vuoti + chevron pill visibile Sprint 10b (03/05/2026) ================================================================ */ /* Riduzione spazio sotto pill / sopra "Argomenti del cittadino" */ .hero, section.hero, .ic-hero { padding-bottom: 20px !important; } section[class*="ic-v3-args"], section[id*="argomenti"], section.ic-args, .ic-v3-args, .ic-args-section { padding-top: 24px !important; margin-top: 0 !important; } .hero #provPills, .hero .prov-pills { margin-bottom: 0 !important; margin-top: 18px !important; } /* Tighten internal hero rhythm */ .hero #ic-search-bar { margin-bottom: 8px !important; margin-top: 6px !important; } .hero .ic-hero-cta-primary { margin-top: 12px !important; margin-bottom: 0 !important; } .hero h1, .ic-hero-h1-visible { margin-bottom: 6px !important; } /* "Argomenti del cittadino" eyebrow + h2 più compatti */ section[class*="ic-v3-args"] .ic-v3-args__eye, section[class*="ic-v3-args"] .ic-eye { margin-bottom: 6px !important; } section[class*="ic-v3-args"] h2 { margin-top: 0 !important; margin-bottom: 18px !important; } /* Chevron pill SEMPRE visibile (override ic-hero-agid che nascondeva) — indicatore visivo di cliccabilità per aprire la lista comuni. */ html[lang] body[class] #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__chev, html[lang] body[class] #provPills .prov-pill-wrap > summary.prov-pill > svg.prov-pill__chev, html[lang] body[class] .prov-pills .prov-pill-wrap > summary.prov-pill > .prov-pill__chev, .prov-pill-wrap[data-prov] .prov-pill > .prov-pill__chev { display: inline-block !important; width: 14px !important; height: 14px !important; margin-left: 8px !important; position: static !important; color: rgba(11, 35, 64, 0.45) !important; transition: transform .2s ease, color .2s ease !important; vertical-align: middle !important; flex-shrink: 0 !important; opacity: 1 !important; visibility: visible !important; } .prov-pill-wrap[open] .prov-pill__chev { transform: rotate(180deg) !important; color: #C89B3C !important; } html.force-dark .prov-pill-wrap > summary.prov-pill > .prov-pill__chev { color: rgba(236, 241, 248, 0.55) !important; } html.force-dark .prov-pill-wrap[open] .prov-pill__chev { color: #FFCC33 !important; } /* CTA "Lista comuni" sopra la pill, hint visivo */ .prov-pill-wrap > summary.prov-pill::after { content: ''; display: none; } /* Dropdown comuni: ombra pronunciata, scroll smooth, max-height ragionevole */ .prov-pill-wrap[open] .prov-dd { box-shadow: 0 12px 32px rgba(11, 35, 64, 0.18), 0 0 0 1px rgba(11, 35, 64, 0.06) !important; max-height: 60vh !important; overflow-y: auto !important; scroll-behavior: smooth !important; } html.force-dark .prov-pill-wrap[open] .prov-dd { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 204, 51, 0.20) !important; } /* === Fix contrasto dropdown del cerca (sfondo scuro illeggibile) === */ /* Sovrascrive lo style inline applicato dal JS al dropdown di ricerca */ div[style*="rgba(13, 27, 42"], div[style*="rgba(13,27,42"] { background: #ffffff !important; color: #0B2340 !important; border: 1px solid rgba(11, 35, 64, 0.18) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important; backdrop-filter: none !important; } div[style*="rgba(13, 27, 42"] *, div[style*="rgba(13,27,42"] * { color: #0B2340 !important; } div[style*="rgba(13, 27, 42"] > *:hover, div[style*="rgba(13,27,42"] > *:hover { background: rgba(11, 35, 64, 0.06) !important; }