/* ============================================ GLOBAL.CSS — Sinopsya Design System FASE 16: "Dark Premium / Light SaaS" ───────────────────────────────────────────── STYLE GUIDE (i token sono la documentazione): - Tema DARK (default): navy profondo + accenti neon desaturati, glow discreti. Mood: premium, tecnico. - Tema LIGHT: bianco/grigio-blu pulito stile SaaS moderno, accenti scuriti per contrasto AA (≥4.5:1). - Il tema è governato da data-theme="dark|light" su (js/theme.js: localStorage 'crm_theme', primo accesso = prefers-color-scheme, default dark). - REGOLA: mai colori hardcoded nei CSS delle pagine, sempre var(--token) — così il tema chiaro è gratis. - Tipografia: Inter (testo) + Space Grotesk (display/ cifre) — 2 famiglie Google Fonts, display=swap. - Spacing: griglia 4px (--sp-*). Radius: 6→20px. - Animazioni: 150-300ms, easing naturali, disattivate con prefers-reduced-motion. ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap'); /* === TOKEN — TEMA DARK (default) === */ :root { color-scheme: dark; /* --- SFONDO: profondi, neutri --- */ --bg-base: #0a0e1a; /* quasi nero navy */ --bg-card: #111827; /* cards */ --bg-secondary: #1a2234; /* input, sidebar, thead */ --bg-hover: #1e2a40; /* hover state */ --bg-overlay: rgba(10, 14, 26, 0.85); /* scrim modali */ --bg-glass: rgba(10, 14, 26, 0.85); /* topbar blur */ --bg-card-2: rgba(255, 255, 255, 0.04); /* card annidate */ --row-alt: rgba(255, 255, 255, 0.015); /* righe alternate */ --grid-line: rgba(0, 229, 255, 0.03); /* griglia decorativa */ /* --- ACCENTI: neon desaturati, eleganti --- */ --neon-cyan: #00d4ff; /* accent principale */ --neon-cyan-dim: rgba(0, 212, 255, 0.12); --neon-green: #00e699; /* successo / attivo */ --neon-green-dim: rgba(0, 230, 153, 0.12); --neon-orange: #ff6b35; /* attenzione */ --neon-purple: #a855f7; /* gamba dx / networker */ --neon-red: #f43f5e; /* errore / pericolo */ --danger-dim: rgba(244, 63, 94, 0.10); --warning: #ffc800; /* badge 2+2 / scadenze */ --warning-dim: rgba(255, 200, 0, 0.12); --medal-silver: #c0c0c0; --medal-bronze: #cd7f32; /* --- BOTTONE PRIMARIO (gradiente accent) --- */ --accent-grad-a: #00d4ff; --accent-grad-b: #0099cc; --on-accent: #001018; /* testo sopra l'accent */ /* --- TESTO --- */ --text-primary: #f0f4ff; --text-secondary: #94a3b8; --text-muted: #8899b0; /* più chiaro per contrasto/leggibilità */ /* --- BORDI --- */ --border-card: rgba(255, 255, 255, 0.07); --border-subtle: rgba(255, 255, 255, 0.04); --border-active: rgba(0, 212, 255, 0.40); /* --- OMBRE --- */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.40); --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.15); /* --- ALBERO (FASE 12 D) --- */ --node-builder: #8b5cf6; /* viola: builder (>=1 iscritto) */ --node-builder-dim: rgba(139, 92, 246, 0.12); /* --- TIPOGRAFIA --- */ --font-base: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace; --text-xs: 0.72rem; --text-sm: 0.82rem; --text-base: 0.9rem; --text-md: 1rem; --text-lg: 1.1rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; /* --- SPACING (grid 4px) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* --- RADIUS --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* --- SIDEBAR --- */ --sidebar-width-collapsed: 64px; --sidebar-width-expanded: 220px; /* --- TRANSIZIONI (150-300ms, easing naturali) --- */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ============================================ ALIAS LEGACY — mantengono compatibili le regole esistenti che usano i vecchi nomi delle variabili ============================================ */ --bg-primary: var(--bg-base); --bg-card-hover: var(--bg-hover); --bg-sidebar: #131a29; --neon-cyan-glow: var(--shadow-glow); --shadow-neon: var(--shadow-glow); --neon-glow: var(--shadow-glow); --text-accent: var(--neon-cyan); } /* === TOKEN — TEMA LIGHT (SaaS pulito) === Stessi nomi, valori ricalibrati: testo scuro su fondi chiari, accenti scuriti per AA su bianco (≥4.5:1). Niente grigio chiaro su bianco: --text-muted ≈ 5:1. */ :root[data-theme="light"] { color-scheme: light; --bg-base: #f4f6fb; --bg-card: #ffffff; --bg-secondary: #eaeef6; --bg-hover: #e1e8f2; --bg-overlay: rgba(15, 23, 42, 0.45); --bg-glass: rgba(255, 255, 255, 0.85); --bg-card-2: rgba(15, 23, 42, 0.04); --row-alt: rgba(15, 23, 42, 0.02); --grid-line: rgba(3, 105, 161, 0.05); --neon-cyan: #0369a1; /* 5.9:1 su bianco */ --neon-cyan-dim: rgba(3, 105, 161, 0.08); --neon-green: #047857; /* 5.0:1 */ --neon-green-dim: rgba(4, 120, 87, 0.08); --neon-orange: #c2410c; /* 4.9:1 */ --neon-purple: #6d28d9; /* 6.6:1 */ --neon-red: #be123c; /* 6.6:1 */ --danger-dim: rgba(190, 18, 60, 0.08); --warning: #92400e; /* ambra scura, 5.5:1 */ --warning-dim: rgba(180, 83, 9, 0.10); --medal-silver: #6b7280; --medal-bronze: #92400e; --accent-grad-a: #0284c7; --accent-grad-b: #0369a1; --on-accent: #ffffff; --text-primary: #0f172a; --text-secondary: #3f4d63; --text-muted: #57657b; --border-card: rgba(15, 23, 42, 0.10); --border-subtle: rgba(15, 23, 42, 0.06); --border-active: rgba(3, 105, 161, 0.45); --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px rgba(15, 23, 42, 0.07); --shadow-glow: 0 4px 18px rgba(3, 105, 161, 0.14); --node-builder: #6d28d9; --node-builder-dim: rgba(109, 40, 217, 0.10); --bg-sidebar: #ffffff; } /* === RESET === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-base); background-color: var(--bg-base); color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--transition-slow), color var(--transition-slow); } /* === SCROLLBAR CUSTOM === */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--border-active); } * { scrollbar-width: thin; scrollbar-color: var(--bg-hover) var(--bg-base); } /* === SELEZIONE TESTO === */ ::selection { background: var(--neon-cyan-dim); color: var(--text-primary); } /* === TIPOGRAFIA === Display: Space Grotesk per titoli e cifre (carattere geometrico, premium); Inter per il corpo. */ h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); } h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); } h2 { font-size: clamp(1.4rem, 3vw, 2rem); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-md); } p { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.7; } a { color: var(--neon-cyan); text-decoration: none; transition: color var(--transition-fast); } a:hover { filter: brightness(1.2); } /* === UTILITY === */ .neon-text { color: var(--neon-cyan); } .neon-border { border: 1px solid var(--border-active); box-shadow: var(--shadow-glow); } .card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-card); transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), background-color var(--transition-slow); } .card:hover { border-color: var(--border-active); box-shadow: var(--shadow-glow); transform: translateY(-2px); } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--neon-cyan-dim); color: var(--neon-cyan); border: 1px solid var(--border-active); } /* === BOTTONI === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-md); font-family: var(--font-base); font-size: var(--text-base); font-weight: 600; letter-spacing: 0.01em; cursor: pointer; border: 1px solid transparent; transition: all var(--transition-fast); white-space: nowrap; } .btn:active { transform: translateY(0) scale(0.98); } .btn-primary { background: linear-gradient(135deg, var(--accent-grad-a) 0%, var(--accent-grad-b) 100%); color: var(--on-accent); font-weight: 700; } .btn-primary:hover { filter: brightness(1.1); box-shadow: var(--shadow-glow); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-card); } .btn-ghost:hover { border-color: var(--border-active); color: var(--text-primary); } .btn-danger { background: transparent; color: var(--neon-red); border: 1px solid var(--neon-red); } .btn-danger:hover { background: var(--danger-dim); } .btn-sm { padding: 7px 14px; font-size: var(--text-sm); } /* === INPUT === */ .input-group { display: flex; flex-direction: column; gap: 6px; } .input-group label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.05em; text-transform: uppercase; } .input-field { width: 100%; padding: 9px 14px; background: var(--bg-secondary); border: 1px solid var(--border-card); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-base); font-size: var(--text-base); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-slow); outline: none; } .input-field:focus { border-color: var(--border-active); box-shadow: 0 0 0 3px var(--neon-cyan-dim); } .input-field::placeholder { color: var(--text-muted); } /* === THEME TOGGLE (FASE 16) === Bottone sole/luna: .theme-toggle è l'hook JS comune (js/theme.js); .theme-toggle-btn la variante rotonda per topbar/header; nel CRM è un .nav-item in sidebar. Sole visibile in dark ("passa al chiaro"), luna in light. */ .theme-toggle { cursor: pointer; } .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--border-card); color: var(--text-secondary); transition: border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .theme-toggle-btn:hover { border-color: var(--border-active); color: var(--neon-cyan); box-shadow: var(--shadow-glow); } .theme-toggle-btn:active { transform: scale(0.92); } .theme-toggle .tt-sun, .theme-toggle .tt-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .tt-sun { display: block; } :root[data-theme="light"] .theme-toggle .tt-moon { display: block; } /* Variante per la pagina di login (angolo in alto a destra) */ .theme-toggle-fixed { position: fixed; top: 16px; right: 16px; z-index: 50; background: var(--bg-card); } /* === ACCESSIBILITÀ — focus visibile per tastiera === */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-item:focus-visible, .action-btn:focus-visible, .step-mini:focus-visible, [tabindex]:focus-visible, .input-field:focus-visible, .select-field:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 3px; border-radius: var(--radius-sm); } /* === ANIMAZIONI (150-300ms, mai invadenti) === */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes pulseNeon { 0%, 100% { box-shadow: 0 0 8px rgba(0, 212, 255, 0.15); } 50% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.35); } } /* Shake discreto per gli stati di errore dei form */ @keyframes shakeX { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* Shimmer per skeleton/caricamenti */ @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } .animate-in { animation: fadeInUp 0.4s ease forwards; } .skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-hover) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; color: transparent; } /* === ACCESSIBILITÀ — rispetta prefers-reduced-motion === */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* === RESPONSIVE BASE === */ @media (max-width: 767px) { :root { --sidebar-width-collapsed: 0px; } } img, svg, video, canvas { max-width: 100%; } .hidden { display: none !important; } /* === FONT CIFRE MONETARIE === */ .cifra-money { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* === SELECT — freccia custom (hotfix) === */ .select-field, .select-inline { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300d4ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; /* FASE 19 B — padding-right ampio: la freccia cade nell'area vuota, non copre il testo */ padding-right: 2rem; } :root[data-theme="light"] .select-field, :root[data-theme="light"] .select-inline { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230369a1' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } .select-inline { background-position: right 8px center; /* FASE 19 B — vedi sopra */ padding-right: 2rem; } /* FASE 29.8 — tendine native leggibili OVUNQUE, in entrambi i temi. Il popup delle