/* ======================================================== v3 UNIVERSAL FONT RESET — eliminate Times serif fallback definitivo ======================================================== Strategy: any element WITHOUT explicit font-family inherits sans-serif. Headings get the v3 stack with full fallback chain. This rule is INTENTIONALLY at the TOP of the cascade so any later @media or specific rule can still override. ======================================================== */ :where(html, body) { font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important; } :where(h1, h2, h3, h4, h5, h6) { font-family: 'Oswald', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; } :where(h1, .display, .hero h1) { font-family: 'Anton', 'Impact', 'Oswald', 'Inter', system-ui, sans-serif !important; } /* Force sans-serif on EVERY element that ends up with bare serif keyword */ :where(*, *::before, *::after) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Code/pre/kbd → mono with full chain */ :where(code, pre, kbd, samp, .ic-v3-mono, [class*='mono']) { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; } /* ============================================================ InfoComuni v3 SKIN — overlay applicato all'index esistente ---------------------------------------------------------------- Sintesi tra: - InfoComuni_20260426_local (gerarchia: News, Servizi, Rete Civica + dropdown comuni per provincia + Istruzione + Eventi + Meteo) - InfoComuni_mockups-v3 (typography Anton/Oswald/Roboto/JetBrains Mono + topbar + mode-banner + section eyebrow + FAQ tabs) - InfoComuni_sito_completo (JobCoin SVG inline, splash modes, kiosk per comune+provincia, schede comune con mappa hero + tab nav) Caricato dopo gli altri ic-*.css per sovrascrivere selettivamente. ============================================================ */ /* ============================================================ @font-face — fonts self-hosted (offline-safe per file://) I font Google sono già linkati in ; queste declaration forniscono fallback locale quando la rete o il CORS bloccano. ============================================================ */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/Anton-400-lat.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/Oswald-400-lat.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/Oswald-500-lat.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/Oswald-600-lat.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/Oswald-700-lat.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/Roboto-400-lat.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/Roboto-500-lat.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/Roboto-700-lat.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/JetBrains_Mono-400-lat.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/JetBrains_Mono-500-lat.woff2') format('woff2'); } :root { /* Color tokens v3 (allineati con mockups-v3 + WCAG AAA dove possibile) */ --ic-v3-ink: #0b1220; --ic-v3-navy: #0b2340; --ic-v3-navy-2: #1a3556; --ic-v3-navy-3: #0a1424; --ic-v3-cyan: #1465a3; --ic-v3-cyan-soft: #5cb1ee; --ic-v3-gold: #ffcc33; --ic-v3-gold-on-dark: #ffd966; --ic-v3-paper: #fbf9f4; --ic-v3-elev: #ffffff; --ic-v3-line: #e6e2d6; --ic-v3-line-soft: #efebe0; --ic-v3-muted: #5a6577; --ic-v3-soft: #3a4456; /* Typography stack v3 — broadcast/newsroom */ --ic-v3-display: 'Anton', system-ui, sans-serif; --ic-v3-headline: 'Oswald', system-ui, sans-serif; --ic-v3-sans: 'Roboto', 'Inter', system-ui, sans-serif; --ic-v3-mono: 'JetBrains Mono', ui-monospace, monospace; /* Radius / motion */ --ic-v3-r-sm: .25rem; --ic-v3-r-md: .5rem; --ic-v3-r-lg: .75rem; --ic-v3-r-xl: 1rem; --ic-v3-r-full: 9999px; --ic-v3-t-fast: 120ms; --ic-v3-t-base: 220ms; --ic-v3-ease: cubic-bezier(.2, .8, .2, 1); } /* ============================================================ 1. TOPBAR ISTITUZIONALE — striscia navy in alto ============================================================ */ .ic-v3-topbar { background: var(--ic-v3-navy-3); color: #fff; font-size: 12px; font-family: var(--ic-v3-mono); letter-spacing: .06em; position: relative; z-index: 100; } .ic-v3-topbar__row { display: flex; justify-content: space-between; align-items: center; height: 32px; max-width: 1280px; margin-inline: auto; padding-inline: 24px; } @media (min-width: 768px) { .ic-v3-topbar__row { padding-inline: 48px; } } .ic-v3-topbar a { color: rgba(255, 255, 255, .85); padding: 0 8px; text-decoration: none; transition: color var(--ic-v3-t-fast) var(--ic-v3-ease); } .ic-v3-topbar a:hover { color: var(--ic-v3-gold); } .ic-v3-topbar__id { display: flex; align-items: center; gap: 8px; text-transform: uppercase; } .ic-v3-topbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ic-v3-gold); box-shadow: 0 0 8px rgba(255, 204, 51, .6); } @media (max-width: 600px) { .ic-v3-topbar__row { font-size: 11px; } .ic-v3-topbar nav a:not(:last-child) { display: none; } } /* ============================================================ 2. MODE BANNER — gradient gold→cyan, link a scegli/ ============================================================ */ .ic-v3-mode-banner { display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: linear-gradient(90deg, var(--ic-v3-gold) 0%, var(--ic-v3-cyan) 100%); color: var(--ic-v3-navy); font-family: var(--ic-v3-mono); font-size: 12px; letter-spacing: .04em; text-decoration: none; border-bottom: 2px solid var(--ic-v3-navy); position: relative; z-index: 99; } .ic-v3-mode-banner:hover { color: var(--ic-v3-navy); } .ic-v3-mode-banner__icons { font-size: 18px; line-height: 1; } .ic-v3-mode-banner__text { flex: 1; text-align: center; color: #fff; text-shadow: 0 1px 0 rgba(11, 35, 64, .3); font-weight: 500; } .ic-v3-mode-banner__text strong { font-weight: 700; } .ic-v3-mode-banner__arrow { background: var(--ic-v3-navy); color: #fff; padding: 4px 12px; border-radius: var(--ic-v3-r-full); font-weight: 700; font-size: 11px; white-space: nowrap; } @media (max-width: 600px) { .ic-v3-mode-banner { font-size: 10.5px; padding: 8px 12px; gap: 8px; } .ic-v3-mode-banner__icons { font-size: 14px; } } /* ============================================================ 3. TYPOGRAPHY UPGRADE — applica Anton/Oswald ai titoli home senza alterare il resto del template ============================================================ */ .hero h1, .hero h2, .cal-strip h2, .home-meteo h2, .home-istruzione h2, .faq-section h2, .ic-v3-section h2 { font-family: var(--ic-v3-headline) !important; font-weight: 600 !important; letter-spacing: .005em !important; } .hero h1 { font-family: var(--ic-v3-display) !important; font-weight: 400 !important; letter-spacing: -.02em !important; } /* ============================================================ 4. ARGOMENTI DEL CITTADINO — nuova sezione cards (inserita tra hero e cal-strip) ============================================================ */ .ic-v3-section { padding: 64px 0; } .ic-v3-section--alt { background: var(--ic-v3-elev); border-block: 1px solid var(--ic-v3-line); } .ic-v3-section__container { max-width: 1280px; margin-inline: auto; padding-inline: 24px; } @media (min-width: 768px) { .ic-v3-section__container { padding-inline: 48px; } } .ic-v3-section__head { margin-bottom: 32px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; } .ic-v3-eyebrow { font-family: var(--ic-v3-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--ic-v3-cyan); font-weight: 500; margin: 0 0 8px; } .ic-v3-section h2 { margin: 0; color: var(--ic-v3-navy); font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1.05; text-transform: none; } .ic-v3-args-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .ic-v3-arg-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--ic-v3-elev); border: 1px solid var(--ic-v3-line); border-radius: var(--ic-v3-r-lg); text-decoration: none; color: inherit; position: relative; transition: all var(--ic-v3-t-base) var(--ic-v3-ease); } .ic-v3-arg-card:hover { border-color: var(--ic-v3-cyan); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(11, 35, 64, .08); } .ic-v3-arg-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--ic-v3-r-md); background: rgba(20, 101, 163, .08); color: var(--ic-v3-cyan); font-size: 24px; flex-shrink: 0; } .ic-v3-arg-card__h { font-family: var(--ic-v3-headline); font-size: 18px; font-weight: 600; color: var(--ic-v3-navy); margin: 0; } .ic-v3-arg-card__d { color: var(--ic-v3-muted); font-size: 13px; line-height: 1.5; margin: 0; } /* ============================================================ 5. JOBCOIN TEASER — card oro/navy con SVG inline ============================================================ */ .ic-v3-jobcoin { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 24px 28px; background: linear-gradient(135deg, #fff4d6, #faeec8); border: 1px solid rgba(200, 155, 60, .55); border-radius: var(--ic-v3-r-xl); color: var(--ic-v3-navy); text-decoration: none; margin-top: 16px; transition: transform var(--ic-v3-t-base) var(--ic-v3-ease), box-shadow var(--ic-v3-t-base) var(--ic-v3-ease); } .ic-v3-jobcoin:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(11, 35, 64, .12); } .ic-v3-jobcoin__logo { width: 64px; height: 64px; flex-shrink: 0; } .ic-v3-jobcoin__body { line-height: 1.5; } .ic-v3-jobcoin__eye { font-family: var(--ic-v3-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8a6518; font-weight: 700; } .ic-v3-jobcoin__h { font-family: var(--ic-v3-headline); font-size: 22px; font-weight: 600; margin: 4px 0; color: var(--ic-v3-navy); } .ic-v3-jobcoin__d { font-size: 13px; color: var(--ic-v3-soft); margin: 0; max-width: 480px; } .ic-v3-jobcoin__cta { background: var(--ic-v3-navy); color: #fff; padding: 12px 22px; border-radius: var(--ic-v3-r-full); font-family: var(--ic-v3-headline); font-weight: 600; font-size: 14px; white-space: nowrap; align-self: center; } .ic-v3-jobcoin:hover .ic-v3-jobcoin__cta { background: var(--ic-v3-cyan); } @media (max-width: 700px) { .ic-v3-jobcoin { grid-template-columns: 1fr; text-align: center; } .ic-v3-jobcoin__logo { margin: 0 auto; } .ic-v3-jobcoin__cta { margin: 0 auto; } } /* ============================================================ 6. FAQ TABS v3 — restyling pillole (se presenti nella FAQ) ============================================================ */ .faq-section .ic-v3-faq-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; } .faq-section .ic-v3-faq-tab { padding: 10px 18px; border-radius: var(--ic-v3-r-full); background: var(--ic-v3-elev); border: 1px solid var(--ic-v3-line); font-family: var(--ic-v3-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ic-v3-muted); cursor: pointer; transition: all var(--ic-v3-t-fast) var(--ic-v3-ease); } .faq-section .ic-v3-faq-tab:hover { border-color: var(--ic-v3-cyan); color: var(--ic-v3-cyan); } .faq-section .ic-v3-faq-tab.is-active { background: var(--ic-v3-navy); color: #fff; border-color: var(--ic-v3-navy); } /* ============================================================ 7. SCEGLI MODALITÀ — splash 4 device (linkato dal mode-banner) Stili shared con scegli/index.html standalone ============================================================ */ .ic-v3-modes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 32px; margin-block: 48px; } .ic-v3-mode-card { background: var(--ic-v3-elev); border: 1px solid var(--ic-v3-line); border-radius: var(--ic-v3-r-xl); padding: 24px; display: flex; flex-direction: column; gap: 16px; } .ic-v3-mode-card--kiosk { background: var(--ic-v3-navy); color: #fff; border-color: var(--ic-v3-gold); } .ic-v3-mode-card--kiosk h3 { color: var(--ic-v3-gold) !important; } .ic-v3-mode-card--kiosk p { color: rgba(255, 255, 255, .75); } /* ============================================================ 8. ICON-CARD utility (per use href sprite.svg) ============================================================ */ .ic-v3-ic-card { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--ic-v3-r-md); background: rgba(20, 101, 163, .08); color: var(--ic-v3-cyan); flex-shrink: 0; } .ic-v3-ic-card svg { width: 30px; height: 30px; } /* ============================================================ v3 mobile fix — toolbar sotto i 900px: nasconde il dropdown lingua (illegibile su small screens) e nasconde a11y/menu icons che si sovrappongono al bottom-nav. La selezione lingua resta nella topbar "IT · EN · FR · DE" e in /scegli/. Il pannello accessibilità è raggiungibile dal menu hamburger / mobile-nav. ============================================================ */ @media (max-width: 900px) { #ic-lang-dropdown { display: none !important; } } @media (max-width: 600px) { /* compatta i bottoni utility nellheader per evitare overflow */ .site-header__utils > #ic-a11y-btn, .site-header__utils > #btn-theme, .site-header__utils > #btn-high-contrast, .site-header__utils > #btn-larger-text { display: none !important; } /* assicura che il bottone hamburger resti centrato e leggibile */ .site-header__utils #btn-menu { background: transparent !important; color: var(--ic-v3-navy); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .site-header__utils #btn-menu svg { width: 26px; height: 26px; stroke: currentColor; } /* dark mode: hamburger su sfondo navy */ html.force-dark .site-header__utils #btn-menu { color: #fff; } } /* ============================================================ v3 TYPOGRAPHY ENFORCEMENT — sostituzione del serif default ---------------------------------------------------------------- Aggiunto il 26/04/2026 — il fallback serif del browser appariva su .prov-pill ("Bari/BAT/Brindisi…"), search-bar "Cerca in Puglia…", counters, caption hero. Forziamo lo stack v3 ovunque manchi. ============================================================ */ /* Body baseline — Roboto (sans body) come default per testi liberi */ body, body * { font-family-default: 'Roboto', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } body { font-family: 'Roboto', 'Inter', system-ui, -apple-system, sans-serif; } /* PROV-PILLS — Oswald (headline) per label provincia */ .prov-pill, .prov-pill-wrap > summary.prov-pill, .prov-pills .prov-pill { font-family: 'Oswald', 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: .04em !important; } .prov-pill small { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-weight: 500 !important; letter-spacing: .02em !important; } /* Dropdown comuni — Oswald label, Roboto items */ .prov-dd-cap-name { font-family: 'Oswald', 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; } .prov-dd-cap-label, .prov-dd-title, .prov-dd-sep { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-weight: 500 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } .prov-dd-item { font-family: 'Roboto', 'Inter', system-ui, sans-serif !important; font-weight: 400 !important; } /* Hero search-bar "Cerca in Puglia…" — Roboto + dati in mono */ #ic-search-bar input, #ic-search-bar input::placeholder { font-family: 'Roboto', 'Inter', system-ui, sans-serif !important; font-weight: 500 !important; } #ic-search-bar > div + div { font-family: 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .06em !important; font-weight: 500 !important; } /* Site header brand text + nav links se ci fossero — Oswald */ .site-header__nav a, .mobile-nav a { font-family: 'Oswald', 'Inter', system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: uppercase !important; font-size: 14px !important; } /* Cal-strip titles (Vivi la Puglia, Prossimi eventi, Dove) — Oswald */ .cal-strip h2, #cal-title, .cal-col-header, .cal-tab, .cal-prov-pill, .cal-month-label, .cal-portami-btn { font-family: 'Oswald', 'Inter', system-ui, sans-serif !important; } .cal-tab, .cal-prov-pill { font-weight: 500 !important; letter-spacing: .04em !important; } /* Weather table — Oswald headers, Roboto cells */ .weather-pv-table th { font-family: 'Oswald', 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; } .weather-pv-table td { font-family: 'Roboto', 'Inter', system-ui, sans-serif !important; } /* Bottom-nav mobile labels — Oswald */ .bottom-nav__label, .bottom-more__item { font-family: 'Oswald', 'Inter', system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } /* Footer — Roboto body, Oswald headings, mono small */ .site-footer-v2 h3, .site-footer-v2 h4, .links-group-title, .contact-col-title { font-family: 'Oswald', 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } .site-footer-v2 .copyright, .site-footer-v2 .legal-links a { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: .04em !important; } /* FAQ — Oswald headings, Roboto answers */ .faq-section h2, .faq-cat-btn { font-family: 'Oswald', 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } .faq-item summary { font-family: 'Oswald', 'Inter', system-ui, sans-serif !important; font-weight: 500 !important; } .faq-answer { font-family: 'Roboto', 'Inter', system-ui, sans-serif !important; } /* Hero badge "Rete civica EPICA · Puglia" + dot */ .ic-v3-topbar, .ic-v3-topbar * { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }