/* =================================================================== TOKENS — sorgente unica del sistema visivo del sito cliente. Il tema si sceglie con l'attributo `data-theme` sull'elemento (lo mette scripts/theme.js prima del render, quindi niente lampo bianco): data-theme="light" -> tema chiaro (default del prodotto) data-theme="dark" -> tema scuro Regola per chi scrive CSS da qui in avanti: NIENTE colori esadecimali nei fogli di stile: solo `var(--l...)`. Un colore scritto a mano non segue il tema e si vede subito (pannello bianco su pagina scura). Le uniche eccezioni ammesse sono gli accenti di dato (grafici, stati, loghi), dichiarati qui sotto come token dedicati. =================================================================== */ :root{ /* superfici — famiglia Cloud, neutri a temperatura fredda */ --lbg:#f4f6fa; /* pagina (Cloud) */ --lbg2:#edf0f7; /* fascia secondaria */ --lpanel:#ffffff; /* card */ --lpanel-soft:#f9faff; /* card appena staccata dalla pagina */ --lpanel2:#e8ecf6; /* superficie incassata */ /* testo — famiglia Night Ink */ --link:#0b1020; /* titoli e testo primario (Night Ink) */ --ltxt:#232a45; /* testo di navigazione e corpo forte */ --lsoft:#59627e; /* testo secondario */ --ldim:#5b6583; /* testo terziario, leggibile anche su Cloud */ --lfaint:#7c86a2; /* etichette deboli */ /* linee */ --lline:#dde2ee; /* filetto standard */ --lline-soft:#e8ecf5; /* filetto interno, più leggero */ --lline2:#cdd4e4; /* bordo marcato / hover */ /* accento: le pill piene e gli stati attivi. Cobalt è "il sistema che osserva": è il colore delle azioni. Signal è "l'opportunità rilevata": si usa SOLO per segnalare un match, mai come colore decorativo esteso. */ --lacc:#4c5ff2; /* Cobalt */ --lacc-h:#3b4ce0; /* hover dell'accento */ --lacc-rgb:76,95,242; --lon-acc:#ffffff; /* testo sopra l'accento */ --lacc2:#ff9f3e; /* Signal — evidenze e opportunità */ --laccp:#2e3bb5; /* Cobalt profondo (conferme, coperture) */ /* superfici volutamente INVERTITE rispetto alla pagina: footer, banda CTA finale, card del piano in evidenza. Sono un tono, non un accento: nel tema scuro restano scure (un pannello staccato), non diventano bianche. */ --linvert:#0b1020; --linvert-line:#232b4a; --lon-invert:#d7dcee; --lon-invert-dim:#7e87aa; /* accenti di dato: identici nei due temi, sono colori "semantici" */ --lblue:#4c5ff2; --lblue-soft:#8e9cff; --lblue-pale:#eef0fe; --lgreen:#2f9d61; --lgreen-text:#237047; --lgreen-soft:#edf8f1; --lsignal-text:#8a4b00; --lsignal-soft:#fff3e5; --lpurple:#4c5ff2; --lpurple-dark:#3b4ce0; --lpurple-pale:#eef0fe; --lred:#b23636; /* forma */ --lr-lg:20px; --lr-md:15px; --lr-sm:11px; --lr-pill:980px; --lsh-sm:0 1px 3px rgba(0,0,0,.035); --lsh-md:0 18px 55px rgba(0,0,0,.075); --lsans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif; --lmono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; color-scheme:light; } html[data-theme="dark"]{ --lbg:#0b1020; --lbg2:#10172c; --lpanel:#151c34; --lpanel-soft:#1a2340; --lpanel2:#222c4d; --link:#f4f6fa; --ltxt:#dde2f0; --lsoft:#bec6dc; --ldim:#9aa4c1; --lfaint:#8994b3; --lline:#2a3558; --lline-soft:#212a48; --lline2:#43517e; /* nel tema scuro il cobalto pieno si spegne: l'accento passa a Cobalt Light con testo Ink sopra, esattamente come il simbolo */ --lacc:#8e9cff; --lacc-h:#a6b1ff; --lacc-rgb:142,156,255; --lon-acc:#0b1020; --lacc2:#ffb562; --laccp:#6f7dff; /* nel tema scuro resta una superficie STACCATA dalla pagina (più chiara del pannello normale), altrimenti footer e card in evidenza sparirebbero */ --linvert:#1a2240; --linvert-line:#43517e; --lon-invert:#e7eaf6; --lon-invert-dim:#afb7d0; --lblue:#8e9cff; --lblue-soft:#a6b1ff; --lblue-pale:#1a2240; --lgreen:#4bbd80; --lgreen-text:#78d7a3; --lgreen-soft:#142b27; --lsignal-text:#ffc27b; --lsignal-soft:#32261c; --lpurple:#8e9cff; --lpurple-dark:#a6b1ff; --lpurple-pale:#1a2340; --lred:#e0736f; --lsh-sm:0 1px 3px rgba(0,0,0,.5); --lsh-md:0 18px 55px rgba(0,0,0,.55); color-scheme:dark; } /* Il marchio Rolvue: due quarti di cornice (il campo osservato) e il punto Signal (l'opportunità rilevata). Sta in un background-image, così nelle pagine resta lo vuoto che c'era prima. */ .ldot{ position:relative; width:24px; height:24px; border:0; border-radius:0; clip-path:none; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20128%20128'%3E%3Cg%20fill='none'%20stroke='%234C5FF2'%20stroke-width='12'%20stroke-linecap='butt'%3E%3Cpath%20d='M22%2082V40A18%2018%200%200%201%2040%2022H82'/%3E%3Cpath%20d='M106%2046V88A18%2018%200%200%201%2088%20106H46'/%3E%3C/g%3E%3Ccircle%20cx='64'%20cy='64'%20r='11'%20fill='%23FF9F3E'/%3E%3C/svg%3E") center/contain no-repeat; display:inline-flex; align-items:center; justify-content:center; box-shadow:none; } /* Su fondo scuro (tema scuro, footer e banda CTA invertita) il simbolo passa alla coppia Cobalt Light / Signal Light: il cobalto pieno si spegnerebbe. */ html[data-theme="dark"] .ldot, .lfoot .ldot, .linvert .ldot{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20128%20128'%3E%3Cg%20fill='none'%20stroke='%238E9CFF'%20stroke-width='12'%20stroke-linecap='butt'%3E%3Cpath%20d='M22%2082V40A18%2018%200%200%201%2040%2022H82'/%3E%3Cpath%20d='M106%2046V88A18%2018%200%200%201%2088%20106H46'/%3E%3C/g%3E%3Ccircle%20cx='64'%20cy='64'%20r='11'%20fill='%23FFB562'/%3E%3C/svg%3E"); } .ldot::before{content:''} /* --- reset minimo condiviso da tutte le pagine pubbliche. Prima stava in common.css insieme ai token SCURI dell'app: le pagine del sito caricavano quel file solo per il reset e si portavano dietro una seconda palette. Qui c'è il reset e basta. --- */ *{margin:0;padding:0;box-sizing:border-box} html,body{min-height:100%} body{background:var(--lbg);color:var(--lsoft);font-family:var(--lsans); -webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit} img,svg{max-width:100%} :focus{outline:none} :focus-visible{outline:2px solid var(--lacc);outline-offset:2px;border-radius:2px} /* Il tema cambia in un colpo solo: senza transizione lo switch "sfarfalla" perché ogni superficie salta in un frame diverso. Escluso chi ha chiesto meno animazioni. */ @media (prefers-reduced-motion:no-preference){ html.theme-anim, html.theme-anim body, html.theme-anim #stageLanding *{ transition:background-color .18s ease,border-color .18s ease,color .18s ease; } }