/* ============================================================ Tema condiviso — Analyzer, Live Tracker, Admin, Briefing Builder. Il GCI resta fuori: lo scope e' ambra su nero per identita', non per gusto, e non ha senso una versione chiara di un radar. Tre leve, tutte attributi su impostati da impostazioni.js prima del primo paint: data-tema = scuro | chiaro data-testo = piccolo | normale | grande | enorme -> --scala-testo data-spazio = compatta | normale | ampia -> --sp Le dimensioni dei caratteri nelle pagine sono in rem, quindi seguono --scala-testo attraverso il font-size di . Padding, margini e gap sono scritti come calc(Npx * var(--sp)): il numero resta leggibile e la densita' si governa da un punto solo. ============================================================ */ :root { --font-title: 'Bungee', sans-serif; --font-body: 'Space Mono', monospace; --scala-testo: 1; --sp: 1; /* --- Scuro: la palette storica del sito, con i grigi alzati. Il vecchio #777 su #0d0d0d stava a 4.3:1 e a 8px non si leggeva; il #555 dei testi "ghost" era sotto 3:1. Qui ogni grigio di testo supera 4.5:1 sul fondo. --- */ --bg: #0d0d0d; --bg-dark: #080808; --bg-card: #111111; --bg-surface: #161616; --bg-vetro: rgba(13,13,13,0.93); --velo: rgba(8,8,8,0.92); --tag-bg: rgba(140,140,140,0.16); --sfondo-carta: #3a3a38; --accent: #FFAA00; /* testo, bordi, titoli */ --accent-bg: #FFAA00; /* riempimenti: bottoni, tab attive */ --accent-dim: rgba(255,170,0,0.15); --live: #00e87a; --danger: #ff5252; --blue: #4d8ef7; --red: #ff5252; --neutral-c: #9a9a9a; --text: #f2f2f2; --text-muted: #c4c4c4; --text-dim: #9e9e9e; --text-ghost: #7e7e7e; --border: #2a2a2a; --border-light: #222222; color-scheme: dark; } /* --- Chiaro: carta calda, non bianco da schermo. L'ambra pieno (#FFAA00) su fondo chiaro sta a 1.9:1, per questo il testo in accento scende a un ambra bruciato e il pieno resta per i riempimenti, dove sopra c'e' testo nero. --- */ html[data-tema="chiaro"] { --bg: #f3f1ea; --bg-dark: #e8e5dc; --bg-card: #faf9f5; --bg-surface: #ffffff; --bg-vetro: rgba(250,249,245,0.94); --velo: rgba(243,241,234,0.92); --tag-bg: rgba(90,90,90,0.12); --sfondo-carta: #c9c6bd; --accent: #9a5b00; --accent-bg: #FFAA00; --accent-dim: rgba(255,170,0,0.20); --live: #0b7a42; --danger: #c62828; --blue: #1d5fc7; --red: #c62828; --neutral-c: #6b6b6b; --text: #151515; --text-muted: #3a3a3a; --text-dim: #5c5c5c; --text-ghost: #767676; --border: #cfcabd; --border-light: #dcd8cd; color-scheme: light; } html[data-testo="piccolo"] { --scala-testo: 0.88; } html[data-testo="grande"] { --scala-testo: 1.15; } html[data-testo="enorme"] { --scala-testo: 1.32; } html[data-spazio="compatta"] { --sp: 0.78; } html[data-spazio="ampia"] { --sp: 1.28; } html { font-size: calc(16px * var(--scala-testo)); } /* ---- NAV condivisa ---- */ .nav-bar { background: var(--bg-dark); border-bottom: 1px solid var(--border); padding: calc(12px * var(--sp)) calc(24px * var(--sp)); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: calc(10px * var(--sp)) calc(20px * var(--sp)); position: relative; z-index: 1000; } .nav-brand { display: flex; align-items: center; gap: calc(10px * var(--sp)); flex-wrap: wrap; } .nav-brand-icon { color: var(--accent); font-family: var(--font-title); font-size: 1.0625rem; white-space: nowrap; } .nav-brand-sub { color: var(--text-dim); font-size: .6875rem; text-transform: uppercase; letter-spacing: 2px; white-space: nowrap; } .nav-logo { height: 36px; width: auto; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: calc(16px * var(--sp)); flex-wrap: wrap; } .nav-links { display: flex; gap: calc(18px * var(--sp)); flex-wrap: wrap; } .nav-links a, .nav-links .nav-link { color: var(--text-dim); text-decoration: none; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; transition: color .2s; cursor: pointer; white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: var(--accent); } .nav-live-badge { display: flex; align-items: center; gap: 6px; background: rgba(0,232,122,0.10); border: 1px solid rgba(0,232,122,0.35); padding: 3px 10px; font-size: .6875rem; letter-spacing: 2px; text-transform: uppercase; color: var(--live); font-weight: 700; } .nav-live-dot { width: 6px; height: 6px; background: var(--live); border-radius: 50%; animation: nav-pulse 2s ease-in-out infinite; } @keyframes nav-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .lang-switch { display: flex; border: 1px solid var(--border); } .lang-btn { background: transparent; color: var(--text-dim); border: none; padding: 4px 10px; font-family: var(--font-body); font-size: .75rem; letter-spacing: 1px; cursor: pointer; transition: color .2s, background .2s; } .lang-btn:hover { color: var(--text); } .lang-btn.active { background: var(--accent-bg); color: #000; font-weight: 700; } /* La tendina della lingua (static/js/i18n.js), uguale su tutte le pagine. */ select.i18n-lingua { background: transparent; color: var(--text-dim); border: 1px solid var(--border); height: 30px; padding: 0 6px; font-family: var(--font-body); font-size: .75rem; letter-spacing: 1px; cursor: pointer; text-transform: uppercase; } select.i18n-lingua:hover { color: var(--text); border-color: var(--text-dim); } select.i18n-lingua option { background: var(--bg-card); color: var(--text); } .btn-impostazioni { background: transparent; color: var(--text-dim); border: 1px solid var(--border); width: 30px; height: 30px; padding: 0; cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s; } .btn-impostazioni:hover { color: var(--accent); border-color: var(--accent); } .btn-impostazioni svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } @media (max-width: 720px) { .nav-bar { padding: calc(10px * var(--sp)) calc(14px * var(--sp)); } .nav-logo { height: 28px; } .nav-brand-icon { font-size: .9375rem; } .nav-brand-sub { display: none; } .nav-right { width: 100%; justify-content: space-between; } .nav-links { gap: calc(12px * var(--sp)); } } /* ---- Finestra impostazioni ---- */ .dlg-impostazioni { /* margin: auto esplicito: le pagine azzerano i margini con il reset universale e il dialog finirebbe incollato in alto a sinistra. */ margin: auto; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); padding: calc(22px * var(--sp)) calc(24px * var(--sp)); width: min(420px, 92vw); font-family: var(--font-body); font-size: .875rem; line-height: 1.6; } .dlg-impostazioni::backdrop { background: rgba(0,0,0,.6); } .dlg-impostazioni h3 { font-family: var(--font-title); font-size: .9375rem; color: var(--accent); letter-spacing: 1px; margin: 0 0 calc(16px * var(--sp)); font-weight: 400; } .dlg-impostazioni .voce { margin-bottom: calc(16px * var(--sp)); } .dlg-impostazioni .voce > span { display: block; font-size: .6875rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; } .dlg-impostazioni .scelte { display: flex; flex-wrap: wrap; gap: 6px; } .dlg-impostazioni .scelte button { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); padding: 6px 12px; cursor: pointer; font-family: var(--font-body); font-size: .75rem; letter-spacing: 1px; text-transform: uppercase; transition: border-color .2s, color .2s; } .dlg-impostazioni .scelte button:hover { border-color: var(--accent); color: var(--text); } .dlg-impostazioni .scelte button[aria-pressed="true"] { background: var(--accent-bg); color: #000; border-color: var(--accent-bg); font-weight: 700; } .dlg-impostazioni .piede { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: calc(8px * var(--sp)); gap: 10px; } .dlg-impostazioni .piede > span:last-child { display: flex; gap: 6px; white-space: nowrap; } .dlg-impostazioni .piede .nota { font-size: .6875rem; color: var(--text-ghost); } .dlg-impostazioni .piede button { background: transparent; color: var(--text-dim); border: 1px solid var(--border); padding: 6px 14px; cursor: pointer; font-family: var(--font-body); font-size: .75rem; letter-spacing: 1px; text-transform: uppercase; } .dlg-impostazioni .piede button:hover { border-color: var(--accent); color: var(--accent); }