/* AEQUOR — shared design system. Tono: sobrio, tecnico, professionale (PRD §2.1.1). Il sito marketing è sempre chiaro. Le pagine applicative (dashboard, console meteorologo, admin) portano data-theme="dark" di default sul (PRD §2.1: "dark mode di default") con un toggle che lo scrive in localStorage — vedi js/theme.js. */ :root { --bg: #f6f8fb; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f1f5f9; --border: #e2e8f0; --border-strong: #cbd5e1; --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #94a3b8; --accent: #0d9488; --accent-fg: #ffffff; --accent-dim: #ccfbf1; --agri: #16a34a; --agri-dim: #dcfce7; /* Secondo accento — riservato ai contenuti generati dall'AI (riassunti, interpretazioni), mai decorativo puro: dà al cliente un modo immediato di distinguere "testo scritto da un modello" da "dato grezzo/misurato", e nel farlo rompe il monocolore verde/teal dell'intero prodotto. */ --accent-2: #7c3aed; --accent-2-fg: #ffffff; --accent-2-dim: #ede9fe; --info: #2563eb; --warning: #b45309; --critical: #dc2626; --success: #16a34a; /* Quinta tinta puramente di raggruppamento (fasce-giorno del bollettino triorario, vedi dashboard.css) — non condivide il colore con nessun token semantico sopra apposta, per non far leggere un giorno come "in allerta" solo perché la fascia è rosa. */ --day-alt: #db2777; --badge-info-bg: #dbeafe; --badge-info-fg: #1d4ed8; --badge-warning-bg: #fef3c7; --badge-warning-fg: #b45309; --badge-critical-bg: #fee2e2; --badge-critical-fg: #b91c1c; --badge-success-bg: #dcfce7; --badge-success-fg: #15803d; --badge-agri-bg: #dcfce7; --badge-agri-fg: #15803d; --badge-ai-bg: #ede9fe; --badge-ai-fg: #6d28d9; --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 1px 8px rgba(15,23,42,0.04); --shadow-glow: 0 8px 30px -8px color-mix(in srgb, var(--accent) 35%, transparent); --radius: 10px; --radius-sm: 6px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; color-scheme: light; } :root[data-theme="dark"] { --bg: #0a0f1a; --bg-elevated: #10182a; --bg-card: #141e34; --bg-card-hover: #182545; --border: #23324d; --border-strong: #324365; --text-primary: #e8edf5; --text-secondary: #9aa8c0; --text-tertiary: #64748b; --accent: #2dd4bf; --accent-fg: #06201c; --accent-dim: #164e47; --agri: #4ade80; --agri-dim: #14532d; --accent-2: #a78bfa; --accent-2-fg: #1e1b3a; --accent-2-dim: #2e1f5e; --info: #60a5fa; --warning: #fbbf24; --critical: #f87171; --success: #4ade80; --day-alt: #f472b6; --badge-info-bg: rgba(96,165,250,0.15); --badge-info-fg: #60a5fa; --badge-warning-bg: rgba(251,191,36,0.15); --badge-warning-fg: #fbbf24; --badge-critical-bg: rgba(248,113,113,0.15); --badge-critical-fg: #f87171; --badge-success-bg: rgba(74,222,128,0.15); --badge-success-fg: #4ade80; --badge-agri-bg: rgba(74,222,128,0.12); --badge-agri-fg: #4ade80; --badge-ai-bg: rgba(167,139,250,0.15); --badge-ai-fg: #a78bfa; --shadow-card: 0 1px 2px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.24); --shadow-glow: 0 8px 30px -8px color-mix(in srgb, var(--accent) 45%, transparent); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .card, .farm-item, .queue-card, .price-card { transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .price-card:hover, .feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); } body { transition: background-color 0.25s ease, color 0.25s ease; /* Ogni pagina del sito e di ogni dashboard entra con una dissolvenza invece di comparire di scatto — vale ovunque perché sta sul body, nessuna pagina deve ricordarsi di applicarla. Breve apposta: deve sembrare la pagina che "è pronta", non un effetto che si nota. */ animation: page-in 0.35s ease; } @keyframes page-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body { animation: none; } } body, .card, .topnav, input, select, textarea, .badge, .btn { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 600; letter-spacing: -0.01em; } p { margin: 0 0 1em; color: var(--text-secondary); } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* Top nav, shared across pages */ .topnav { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; row-gap: 10px; align-items: center; justify-content: space-between; padding: 16px 24px; background: color-mix(in srgb, var(--bg-elevated) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: 0.01em; } .brand-mark { height: 26px; width: auto; display: block; } .brand-text { display: flex; align-items: baseline; gap: 8px; } .brand .aequor { color: var(--text-primary); } .brand .tag { font-weight: 500; font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; border-left: 1px solid var(--border-strong); padding-left: 8px; margin-left: 2px; } /* flex-wrap qui (non solo nella media query sotto) è voluto: a larghezze intermedie (~700-900px, tra mobile e desktop) la barra del sito marketing — 6 link + CTA — andava comunque in overflow perché il wrap scattava solo sotto i 640px. Con il wrap sempre attivo la barra va a capo da sola a qualunque larghezza non ci stia, senza bisogno di indovinare la soglia esatta caso per caso. */ .nav-links { display: flex; flex-wrap: wrap; row-gap: 8px; gap: 12px 24px; align-items: center; justify-content: flex-end; } .nav-links a { color: var(--text-secondary); font-size: 14px; font-weight: 500; transition: color 0.15s ease; } .nav-links a:hover { color: var(--text-primary); } /* Sottolineatura che cresce da sinistra sui link di testo — non sul CTA bottone, ha già il suo stato hover. Micro-interazione, non decorazione: conferma dove sta andando il click prima ancora di rilasciarlo. */ .nav-links a:not(.btn) { position: relative; padding-bottom: 3px; } .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--accent); transition: right 0.22s ease; } .nav-links a:not(.btn):hover::after { right: 0; } @media (prefers-reduced-motion: reduce) { .nav-links a:not(.btn)::after { transition: none; } } @media (max-width: 640px) { .topnav { padding: 12px 16px; } .brand .tag { display: none; } .nav-links { width: 100%; gap: 10px 14px; justify-content: flex-start; } .nav-links a { font-size: 13px; } } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--accent-fg); } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); } .btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .btn-sm { padding: 6px 12px; font-size: 12.5px; } .btn-danger { background: transparent; color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); } .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--critical) 10%, transparent); } /* Conferma inline al posto del confirm() nativo del browser — un popup di sistema stona con tutto il resto e blocca lo script finché non lo chiudi. Primo click: il pulsante stesso diventa la richiesta ("Confermi?"), secondo click entro pochi secondi la esegue, altrimenti torna com'era da solo. Specificità con due classi apposta, per vincere su qualunque altra variante di bottone senza bisogno di !important. */ .btn.btn-confirming { background: var(--critical); color: white; border-color: var(--critical); animation: confirm-pop 0.2s ease; } @keyframes confirm-pop { from { transform: scale(0.94); } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .btn.btn-confirming { animation: none; } } /* Login / richiesta overlay, condiviso da dashboard, console meteorologo, admin. z-index alto apposta: Leaflet usa internamente z-index fino a 1000 per i suoi controlli (.leaflet-top), quindi qualunque overlay sopra una mappa deve stare più in alto di così o la mappa/i suoi controlli sfondano. */ .login-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 88%, black 12%); backdrop-filter: blur(4px); padding: 20px; } .login-overlay.hidden { display: none; } .login-card { width: 100%; max-width: 340px; } .login-card h3 { margin-bottom: 6px; } /* Comparsa morbida invece di un semplice "scatto" — vale su tutte le pagine con login (dashboard, analisi, QDCA, meteorologo, admin), per questo vive nel foglio condiviso e non in dashboard.css. */ .login-overlay:not(.hidden) { animation: login-overlay-in 0.25s ease both; } .login-overlay:not(.hidden) .login-card { animation: login-card-in 0.3s ease both; } @keyframes login-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes login-card-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .login-overlay:not(.hidden), .login-overlay:not(.hidden) .login-card { animation: none; } } /* Theme toggle (dashboard/console/admin only, not the marketing site) */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-secondary); font-size: 13px; cursor: pointer; } .theme-toggle:hover { color: var(--text-primary); border-color: var(--accent); } .theme-toggle.active-toggle { color: var(--accent); border-color: var(--accent); } .theme-toggle-pop { animation: theme-toggle-pop 0.3s ease; } @keyframes theme-toggle-pop { 0% { transform: scale(1); } 40% { transform: scale(0.9); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .theme-toggle-pop { animation: none; } } /* Cards */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .badge-info { background: var(--badge-info-bg); color: var(--badge-info-fg); } .badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-fg); } .badge-critical { background: var(--badge-critical-bg); color: var(--badge-critical-fg); } .badge-success { background: var(--badge-success-bg); color: var(--badge-success-fg); } .badge-agri { background: var(--badge-agri-bg); color: var(--badge-agri-fg); } .badge-ai { background: var(--badge-ai-bg); color: var(--badge-ai-fg); } /* Testo generato dall'AI (riassunti, interpretazioni) — un blocco visivamente distinto dal dato grezzo, così il cliente capisce a colpo d'occhio cosa è stato scritto da un modello e cosa è una misura. Stesso accento (viola) in tutto il prodotto: chat, Monday Report, confronto anno su anno, trend climatico — un solo linguaggio visivo per "questo l'ha scritto un AI". */ .ai-note { position: relative; margin-top: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--accent-2) 7%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent-2) 25%, transparent); border-left: 3px solid var(--accent-2); border-radius: var(--radius-sm); } .ai-note-label { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 6px; } .ai-note-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-primary); } /* Mesh gradient a 3 toni (teal, verde, viola) — riusabile ovunque serva un fondale con più presenza di un flat color: hero del sito, intestazione dashboard. Sostituisce i due radial-gradient quasi invisibili di prima. */ .gradient-mesh { background: radial-gradient(ellipse 60% 55% at 12% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%), radial-gradient(ellipse 55% 50% at 88% 15%, color-mix(in srgb, var(--agri) 20%, transparent), transparent 60%), radial-gradient(ellipse 50% 45% at 50% 105%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 65%); } /* Forms */ input, select, textarea { font-family: inherit; font-size: 14px; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; /* Senza questo, un textarea/input senza attributo cols/size esplicito usa una larghezza intrinseca del browser, non quella del contenitore — lasciava spazio vuoto a destra in ogni form dell'app, non solo qui. */ width: 100%; box-sizing: border-box; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } input::placeholder, textarea::placeholder { color: var(--text-tertiary); } label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; } .mono { font-family: var(--font-mono); } .footer { border-top: 1px solid var(--border); padding: 32px 24px; color: var(--text-tertiary); font-size: 13px; text-align: center; } /* Loading skeletons — polish pass */ .skeleton { position: relative; overflow: hidden; background: var(--bg-card-hover); border-radius: var(--radius-sm); color: transparent !important; } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-tertiary) 18%, transparent), transparent); animation: skeleton-sheen 1.3s ease-in-out infinite; } @keyframes skeleton-sheen { 100% { transform: translateX(100%); } } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--text-tertiary) 40%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .fade-in { animation: fade-in 0.25s ease; } @keyframes fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* Usata in 27 punti diversi dell'app (liste vuote, dati non disponibili, errori di caricamento) ma non aveva mai avuto un suo stile — ereditava il paragrafo di default, indistinguibile dal resto del testo. */ .empty-state { text-align: center; color: var(--text-tertiary); font-size: 13px; line-height: 1.5; padding: 22px 16px; animation: fade-in 0.3s ease; } @media (prefers-reduced-motion: reduce) { .empty-state { animation: none; } } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; } .tri-table-scroll { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); } table.tri-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.tri-table th, table.tri-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); word-break: break-word; } table.tri-table th { color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em; font-family: var(--font-sans); position: sticky; top: 0; background: var(--bg-card); } table.tri-table tbody tr:last-child td { border-bottom: none; } table.tri-table tbody tr { transition: background-color 0.12s ease; } table.tri-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }