/* ========================================================================== QBTech — colors.css COLOR REFERENCE: tutti i colori del sito, per il tema scuro e per quello chiaro. Per cambiare un colore basta modificarlo qui. Accessibilità (WCAG 2.1 AA / EN 301 549): il testo normale deve avere un contrasto di almeno 4,5:1 con il fondo, il testo grande (≥ 24px, o 19px in grassetto) e le icone almeno 3:1. Accanto ai colori di testo è indicato il contrasto con il fondo principale: se si cambia un colore, ricontrollarlo (es. https://webaim.org/resources/contrastchecker/). Il tema si sceglie con data-theme="light" | "dark" su (vedi lo script nel di ogni pagina e layout.js). Senza JavaScript vale lo scuro. ========================================================================== */ /* ---------- Tema scuro (predefinito) ---------- */ :root, [data-theme="dark"] { color-scheme: dark; /* Fondi */ --c-bg: #11141B; /* grafite */ --c-bg-2: #171B24; /* sezioni alternate */ --c-surface: #1D222D; /* pannelli, card */ --c-surface-2: #232937; /* pannelli in evidenza */ /* Testi */ --c-text: #E9EEF7; /* 15,8:1 */ --c-text-dim: #A7B4C9; /* 8,8:1 */ --c-text-faint: #8391A8; /* 5,8:1 (era #6C7A93, 4,3:1: sotto AA) */ /* Marchio */ --c-primary: #1E5FD8; /* pulsanti: testo bianco 5,7:1 */ --c-primary-hover: #3B82F6; --c-on-primary: #FFFFFF; --c-accent: #3B82F6; /* solo testo grande (titoli in blu), trattini: 5,0:1 (4,3:1 sui pannelli) */ --c-link: #55A6FF; /* link ed etichette: 7,3:1 */ --c-steel: #9FB2CC; /* icone e numeri: 8,5:1 */ --c-green: #4ADE80; /* progetto green: 10,6:1 */ /* Linee */ --c-line: rgba(159, 178, 204, 0.16); --c-line-strong: rgba(159, 178, 204, 0.32); /* Dettagli */ --c-header-bg: rgba(17, 20, 27, 0.92); --c-ghost-hover: rgba(159, 178, 204, 0.06); --c-selection: rgba(59, 130, 246, 0.35); --c-scroll-thumb: #2A3141; --c-scroll-thumb-hover: #36405A; --c-link-underline: rgba(85, 166, 255, 0.35); --c-green-underline: rgba(74, 222, 128, 0.4); --c-shine: #8EC2FF; /* riflesso sul logo */ --tint-rgb: 59, 130, 246; /* blu del pattern QB e delle sfumature di fondo */ --tint-strength: 1; --c-watermark: #FFFFFF; /* monogramma QB grande */ --logo-filter: brightness(0) invert(1); /* logo ufficiale in negativo */ /* Illustrazioni SVG (usate solo dal tema chiaro per sovrascrivere i colori scritti negli SVG: vedi in fondo a main.css) */ --illus-panel: rgba(33, 39, 51, 0.6); --illus-edge: #4A5C7D; --illus-body: #2B3447; --illus-light: #3A4760; --illus-dark: #1A1F2A; --illus-label: #9FB2CC; } /* ---------- Tema chiaro ---------- Parte dai colori del vecchio sito (banner #3266CC, fondo #999999, testo #000000), rinnovati: il grigio medio diventa un neutro chiaro, il nero un quasi-nero, il blu resta per pulsanti e fasce. */ [data-theme="light"] { color-scheme: light; /* Fondi */ --c-bg: #EEF1F5; --c-bg-2: #E3E8EF; --c-surface: #FFFFFF; --c-surface-2: #F1F4F8; /* Testi (contrasto con #EEF1F5) */ --c-text: #0E1116; /* 16,7:1 */ --c-text-dim: #3D4757; /* 8,3:1 */ --c-text-faint: #596375; /* 5,4:1 (4,9:1 sul fondo alternato) */ /* Marchio */ --c-primary: #3266CC; /* il blu del vecchio sito: testo bianco 5,4:1 */ --c-primary-hover: #2A56AE; --c-on-primary: #FFFFFF; --c-accent: #2A56AE; /* 6,1:1 */ --c-link: #2451A6; /* 6,6:1 */ --c-steel: #52627C; /* 5,5:1 (5,0:1 sul fondo alternato) */ --c-green: #17703C; /* 5,4:1 (5,0:1 sul fondo alternato) */ /* Linee */ --c-line: rgba(14, 17, 22, 0.13); --c-line-strong: rgba(14, 17, 22, 0.26); /* Dettagli */ --c-header-bg: rgba(238, 241, 245, 0.94); --c-ghost-hover: rgba(14, 17, 22, 0.05); --c-selection: rgba(50, 102, 204, 0.25); --c-scroll-thumb: #C3CBD6; --c-scroll-thumb-hover: #A9B3C1; --c-link-underline: rgba(36, 81, 166, 0.35); --c-green-underline: rgba(27, 122, 67, 0.4); --c-shine: #6FA3FF; --tint-rgb: 50, 102, 204; --tint-strength: 0.7; --c-watermark: #0E1116; --logo-filter: none; /* logo ufficiale originale, pensato per fondi chiari */ /* Illustrazioni SVG */ --illus-panel: rgba(255, 255, 255, 0.8); --illus-edge: #8190A8; --illus-body: #C7D0DD; --illus-light: #DCE2EB; --illus-dark: #A9B4C5; --illus-label: #3D4757; }