/* ============================================================ Bandometro — dark theme Opt-in via ; light mode is the default. This file only ADDS overrides; it never alters light-mode rules. Shared by index, dashboard and dettaglio-bando. (The offline "esiti" page carries its own equivalent tokens.) ============================================================ */ /* Theme toggle — lives in the dark top bar, so white text suits both modes. */ .theme-toggle{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; font:inherit;font-size:12px;font-weight:600; padding:3px 12px;border-radius:20px;cursor:pointer; display:inline-flex;align-items:center;gap:6px;line-height:1.5; transition:background .2s; } .theme-toggle:hover{background:rgba(255,255,255,.22)} html[data-theme="dark"]{ --blue-xlight:#16263a; --blue-light:#24364f; --blue-primary:#3d92e0; --blue-medium:#5aa6ea; --grey-bg:#0e151d; --grey-border:#2a3a4f; --grey-text:#9aabbf; --text-dark:#e6ebf2; --heading:#cfe0ff; --card:#161f2b; --card-2:#1d2836; --shadow:0 2px 8px rgba(0,0,0,.45); --shadow-md:0 6px 18px rgba(0,0,0,.55); color-scheme:dark; } /* Page background + base text */ html[data-theme="dark"] body{background:var(--grey-bg);color:var(--text-dark)} /* Light surfaces -> dark cards */ html[data-theme="dark"] .site-header, html[data-theme="dark"] .breadcrumb-bar, html[data-theme="dark"] .filter-bar, html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .chart-card, html[data-theme="dark"] .table-card, html[data-theme="dark"] .esiti-card, html[data-theme="dark"] .sidebar-card, html[data-theme="dark"] .mobile-nav-panel, html[data-theme="dark"] .filter-select, html[data-theme="dark"] .filter-input, html[data-theme="dark"] .btn-csv, html[data-theme="dark"] .btn-json, html[data-theme="dark"] .pgbtn{ background:var(--card);color:var(--text-dark); } html[data-theme="dark"] .pagination-bar, html[data-theme="dark"] .table-card-header, html[data-theme="dark"] .esiti-tabs{background:var(--card-2)} html[data-theme="dark"] .pagination-bar{border-top-color:var(--grey-border)} /* Headings / strong text that used the dark institutional blue */ html[data-theme="dark"] .logo-text strong, html[data-theme="dark"] .main-nav a, html[data-theme="dark"] .section-title, html[data-theme="dark"] .kpi-value, html[data-theme="dark"] .chart-card-title, html[data-theme="dark"] .table-card-title, html[data-theme="dark"] .page-title, html[data-theme="dark"] .area-block h3, html[data-theme="dark"] .updates-title, html[data-theme="dark"] .info-value, html[data-theme="dark"] .data-table .num, html[data-theme="dark"] .esiti-table .col-num, html[data-theme="dark"] .esiti-table tfoot td, html[data-theme="dark"] .bando-body strong, html[data-theme="dark"] .mobile-nav-panel a{ color:var(--heading); } html[data-theme="dark"] .main-nav a:hover, html[data-theme="dark"] .main-nav a.active, html[data-theme="dark"] .mobile-nav-panel a:hover, html[data-theme="dark"] .mobile-nav-panel a.active{color:var(--blue-primary)} /* Body copy that was set with literal greys */ html[data-theme="dark"] .bando-body, html[data-theme="dark"] .update-text{color:var(--text-dark)} html[data-theme="dark"] .data-table .num-sm{color:var(--grey-text)} html[data-theme="dark"] .cod-badge, html[data-theme="dark"] .area-pill{background:var(--card-2);color:var(--text-dark)} /* Attachments list (dark text on a light grey chip in light mode) */ html[data-theme="dark"] .allegato-item{color:var(--text-dark)} /* Light-tinted callouts */ html[data-theme="dark"] .esiti-footnote{background:#2a2410;border-color:#5c4f1d;color:#e8d9a3} html[data-theme="dark"] .new-section-indicator{background:linear-gradient(90deg,#13301a,#16351d);border-color:#2e6b3a;color:#a9e0b4} /* Hamburger bars (were institutional blue on white) */ html[data-theme="dark"] .hamburger span{background:var(--heading)} /* ── Reduced motion: drop the slide-in / morph animations (WCAG 2.3.3) ── */ @media (prefers-reduced-motion: reduce){ .mobile-nav-panel,.mobile-nav-panel.open,.hamburger span,.theme-toggle{transition:none} }