/* Dark theme (drop-in) — load AFTER the other css files */ /* Optional: nicer form controls in dark */ :root { color-scheme: light; } /* Base semantic tokens (optional, but useful for map css that already uses them) */ :root { --bg: var(--white); --surface: var(--white); --surface-2: var(--gray-100); --text: var(--gray-700); --text-strong: var(--black); --text-secondary: var(--gray-500); --border: var(--gray-200); --border-strong: var(--gray-300); /* map/section css sometimes expects these */ --card-bg: var(--white); --primary: var(--accent); --primary-dark: var(--accent-hover); } /* =============== DARK OVERRIDES =============== */ /* Activate either via system setting OR via */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } html:not([data-theme="light"]) { /* allow forcing light */ --white: #1c1f26; /* Grigio molto scuro invece di nero puro */ --black: #f2f4f8; /* re-map grays (site uses these everywhere) */ --gray-100: #242831; --gray-200: #2a2f3a; --gray-300: #353b48; --gray-400: #556070; --gray-500: #9aa3af; --gray-600: #c7cdd6; --gray-700: #e5e7eb; --gray-900: #f8fafc; --gray-50: #1f2229; /* Accent marrone/dorato scuro invece di rosso */ --accent: #a68a5f; --accent-hover: #8a7148; /* keep links readable on dark */ --link: #7ab6ff; /* semantic */ --bg: var(--white); --surface: #23262e; --surface-2: #2a2e37; --text: var(--gray-700); --text-strong: var(--black); --text-secondary: var(--gray-500); --border: var(--gray-200); --border-strong: var(--gray-300); --card-bg: var(--surface); --primary: var(--accent); --primary-dark: var(--accent-hover); } html:not([data-theme="light"]) body { background: var(--bg); color: var(--text); } /* General borders/shadows that assume light background */ html:not([data-theme="light"]) .masthead, html:not([data-theme="light"]) .news-sidebar, html:not([data-theme="light"]) .questions-sidebar { border-color: var(--border); } /* Links inside article bodies already use --link; make sure it pops */ html:not([data-theme="light"]) .article-body a, html:not([data-theme="light"]) .article-sources a { color: var(--link); } /* Buttons/inputs in base layout */ html:not([data-theme="light"]) select, html:not([data-theme="light"]) input, html:not([data-theme="light"]) textarea { background: var(--surface); color: var(--text); border-color: var(--border-strong); } /* ============ THREATS (standalone) overrides (has hardcoded rgba(0,0,0,...) + #fff) ============ */ html:not([data-theme="light"]) .thctl select, html:not([data-theme="light"]) .thctl input, html:not([data-theme="light"]) .th-reset { background: var(--surface); color: var(--text); border-color: rgba(255,255,255,0.18); } html:not([data-theme="light"]) .threats-map { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); } html:not([data-theme="light"]) .th-gridline { stroke: rgba(255,255,255,0.10); } html:not([data-theme="light"]) .th-axis { stroke: rgba(255,255,255,0.35); } html:not([data-theme="light"]) .th-axislabel { fill: rgba(255,255,255,0.70); } html:not([data-theme="light"]) .th-tick { fill: rgba(255,255,255,0.60); } html:not([data-theme="light"]) .th-title { fill: rgba(255,255,255,0.82); } html:not([data-theme="light"]) .th-point { stroke: rgba(255,255,255,0.18); } /* ============ Leaflet geo-map popup (hardcoded tailwind-like grays) ============ */ html:not([data-theme="light"]) .leaflet-popup-content-wrapper, html:not([data-theme="light"]) .leaflet-popup-tip { background: var(--surface); color: var(--text); } html:not([data-theme="light"]) .geo-popup h4 { color: var(--text-strong); } html:not([data-theme="light"]) .geo-popup .popup-meta { color: var(--text-secondary); } html:not([data-theme="light"]) .geo-popup .popup-meta strong { color: var(--text); } html:not([data-theme="light"]) .geo-popup .popup-sources { border-top-color: var(--border); } html:not([data-theme="light"]) .geo-popup .popup-sources a { color: var(--link); } html:not([data-theme="light"]) .leaflet-control-attribution { background: rgba(0,0,0,0.55); color: var(--text-secondary); } /* Optional: darken tiles a bit */ html:not([data-theme="light"]) .map-tiles { filter: grayscale(15%) brightness(0.80) contrast(1.1); } /* ============ Ukraine map (hardcoded backgrounds/text) ============ */ html:not([data-theme="light"]) .ukraine-map-container { box-shadow: 0 2px 10px rgba(0,0,0,0.45); } html:not([data-theme="light"]) .ukraine-map-legend { background: var(--surface); color: var(--text); } html:not([data-theme="light"]) .ukraine-map-legend h4, html:not([data-theme="light"]) .ukraine-map-legend-section-title { color: var(--text-strong); border-color: var(--border); } html:not([data-theme="light"]) .ukraine-map-legend-label { color: var(--text-secondary); } html:not([data-theme="light"]) .ukraine-map-popup-title { color: var(--text-strong); border-bottom-color: var(--border); } html:not([data-theme="light"]) .ukraine-map-popup-info { color: var(--text); } html:not([data-theme="light"]) .ukraine-map-popup-note { background: rgba(255,255,255,0.06); border-left-color: rgba(255,255,255,0.25); color: var(--text-secondary); } /* verified badge: keep green but make it darker */ html:not([data-theme="light"]) .ukraine-map-popup-verified { background: rgba(34,197,94,0.14); border-left-color: rgba(34,197,94,0.65); color: #b7f7c6; } /* ============ FORCE LEGENDS TO STAY LIGHT ============ */ /* Legend mappe devono rimanere bianche/grigio chiaro per leggibilità */ html:not([data-theme="light"]) .ukraine-map-legend, html:not([data-theme="light"]) .th-legend-horizontal, html:not([data-theme="light"]) .leaflet-control-layers { background: #f5f5f5 !important; color: #1a1a1a !important; } html:not([data-theme="light"]) .ukraine-map-legend h4, html:not([data-theme="light"]) .ukraine-map-legend-section-title, html:not([data-theme="light"]) .ukraine-map-legend-label { color: #1a1a1a !important; } /* ============ SEARCH INPUT NON TROPPO BIANCO ============ */ html:not([data-theme="light"]) .search-input, html:not([data-theme="light"]) #search-input { background: var(--gray-200) !important; color: var(--text) !important; } } /* Manual toggle support (if you add it later): forces dark even if system is light. */ html[data-theme="dark"] { color-scheme: dark; --white: #1c1f26; /* Grigio molto scuro */ --black: #f2f4f8; --gray-100: #242831; --gray-200: #2a2f3a; --gray-300: #353b48; --gray-400: #556070; --gray-500: #9aa3af; --gray-600: #c7cdd6; --gray-700: #e5e7eb; --gray-900: #f8fafc; --gray-50: #1f2229; /* Accent marrone/dorato */ --accent: #a68a5f; --accent-hover: #8a7148; --link: #7ab6ff; --bg: var(--white); --surface: #23262e; --surface-2: #2a2e37; --text: var(--gray-700); --text-strong: var(--black); --text-secondary: var(--gray-500); --border: var(--gray-200); --border-strong: var(--gray-300); --card-bg: var(--surface); --primary: var(--accent); --primary-dark: var(--accent-hover); } html[data-theme="dark"] body { background: var(--bg); color: var(--text); } /* General borders/shadows that assume light background */ html[data-theme="dark"] .masthead, html[data-theme="dark"] .news-sidebar, html[data-theme="dark"] .questions-sidebar { border-color: var(--border); } /* Links */ html[data-theme="dark"] .article-body a, html[data-theme="dark"] .article-sources a { color: var(--link); } /* Buttons/inputs */ html[data-theme="dark"] select, html[data-theme="dark"] input, html[data-theme="dark"] textarea { background: var(--surface); color: var(--text); border-color: var(--border-strong); } /* Threats overrides */ html[data-theme="dark"] .thctl select, html[data-theme="dark"] .thctl input, html[data-theme="dark"] .th-reset { background: var(--surface); color: var(--text); border-color: rgba(255,255,255,0.18); } html[data-theme="dark"] .threats-map { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); } html[data-theme="dark"] .th-gridline { stroke: rgba(255,255,255,0.10); } html[data-theme="dark"] .th-axis { stroke: rgba(255,255,255,0.35); } html[data-theme="dark"] .th-axislabel { fill: rgba(255,255,255,0.70); } html[data-theme="dark"] .th-tick { fill: rgba(255,255,255,0.60); } html[data-theme="dark"] .th-title { fill: rgba(255,255,255,0.82); } html[data-theme="dark"] .th-point { stroke: rgba(255,255,255,0.18); } /* Leaflet popups */ html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--text); } html[data-theme="dark"] .geo-popup h4 { color: var(--text-strong); } html[data-theme="dark"] .geo-popup .popup-meta { color: var(--text-secondary); } html[data-theme="dark"] .geo-popup .popup-meta strong { color: var(--text); } html[data-theme="dark"] .geo-popup .popup-sources { border-top-color: var(--border); } html[data-theme="dark"] .geo-popup .popup-sources a { color: var(--link); } html[data-theme="dark"] .leaflet-control-attribution { background: rgba(0,0,0,0.55); color: var(--text-secondary); } html[data-theme="dark"] .map-tiles { filter: grayscale(15%) brightness(0.80) contrast(1.1); } /* Ukraine map */ html[data-theme="dark"] .ukraine-map-container { box-shadow: 0 2px 10px rgba(0,0,0,0.45); } html[data-theme="dark"] .ukraine-map-legend { background: var(--surface); color: var(--text); } html[data-theme="dark"] .ukraine-map-legend h4, html[data-theme="dark"] .ukraine-map-legend-section-title { color: var(--text-strong); border-color: var(--border); } html[data-theme="dark"] .ukraine-map-legend-label { color: var(--text-secondary); } html[data-theme="dark"] .ukraine-map-popup-title { color: var(--text-strong); border-bottom-color: var(--border); } html[data-theme="dark"] .ukraine-map-popup-info { color: var(--text); } html[data-theme="dark"] .ukraine-map-popup-note { background: rgba(255,255,255,0.06); border-left-color: rgba(255,255,255,0.25); color: var(--text-secondary); } html[data-theme="dark"] .ukraine-map-popup-verified { background: rgba(34,197,94,0.14); border-left-color: rgba(34,197,94,0.65); color: #b7f7c6; } /* ============ FORCE LEGENDS TO STAY LIGHT ============ */ /* Legend mappe devono rimanere bianche/grigio chiaro per leggibilità */ html[data-theme="dark"] .ukraine-map-legend, html[data-theme="dark"] .th-legend-horizontal, html[data-theme="dark"] .leaflet-control-layers { background: #f5f5f5 !important; color: #1a1a1a !important; } html[data-theme="dark"] .ukraine-map-legend h4, html[data-theme="dark"] .ukraine-map-legend-section-title, html[data-theme="dark"] .ukraine-map-legend-label { color: #1a1a1a !important; } /* ============ SEARCH INPUT NON TROPPO BIANCO ============ */ html[data-theme="dark"] .search-input, html[data-theme="dark"] #search-input { background: var(--gray-200) !important; color: var(--text) !important; }