/* * Tavolozza unica del sito: tema chiaro e tema scuro. * * Come si decide quale mostrare: * 1. se la persona ha scelto col pulsante nell'intestazione, vince la sua scelta * (attributo data-theme su , ricordato nel browser); * 2. altrimenti si segue l'impostazione del telefono o del computer * (prefers-color-scheme: Android, iOS, Windows, macOS). * * Le regole del tema scuro usano :root[data-theme="dark"] e :root:not([data-theme="light"]), * che hanno specificita' maggiore di un semplice :root: cosi' vincono anche sui :root * dichiarati nei CSS dei plugin, qualunque sia l'ordine di caricamento. */ :root { color-scheme: light; --bg: #ffffff; /* sfondo della pagina */ --bg-2: #f7f6f8; /* fasce e riempimenti tenui */ --surface: #ffffff; /* schede, campi, pannelli */ --ink: #14131a; /* testo principale */ --ink-2: #5b5a66; /* testo secondario */ --ink-3: #8e8d99; /* testo di servizio */ --line: #e7e6ea; /* bordi e separatori */ --line-2: #f1f0f3; /* separatori piu' tenui */ --pink: #ed297a; --purple: #5b1e6d; /* Due gradienti, e devono essere DUE COLORI diversi, non due sfumature dello stesso: la fascia grande in fondo alle pagine resta viola-rosa, i richiami IN LINEA che spingono agli eventi sono verdi. Il verde e' quello del logo e lo stesso dell'accento del tema (--hover), ma qui i toni sono fissi: al buio --hover schiarisce, e il bianco sopra non si leggerebbe piu'. */ --grad-fascia: linear-gradient(120deg, var(--purple), #7c2a94 55%, var(--pink)); --grad-invito: linear-gradient(120deg, #0b4a33, #157a44 45%, #3aa54a); /* Il filo viola-rosa: la sottolineatura del menu e l'avanzamento delle strisce di foto. Sono segni sottili, e un filo sfumato si vede piu' di una riga piatta. */ --grad-accento: linear-gradient(90deg, var(--purple), var(--pink)); /* Testo selezionato: viola-rosa pieno, non l'azzurro del sistema. */ --sel-bg: #8e2380; --sel-ink: #ffffff; /* Pulsanti pieni: in chiaro sono scuri con testo bianco, in scuro il contrario. */ --btn-bg: #14131a; --btn-ink: #ffffff; /* Fasce volutamente scure anche nel tema chiaro (citazione, hero eventi). */ --invert-bg: #14131a; --invert-ink: #ffffff; /* Testo scuro su fondi che restano chiari in entrambi i temi (pulsante sul gradiente). */ --on-light: #14131a; --on-light-2: #5b5a66; --shadow: rgba(20,19,26,.07); --shadow-2: rgba(0,0,0,.06); --header-bg: rgba(255,255,255,.94); --footer-bg: #14131a; --footer-ink: #cfcdd6; --footer-ink-2: #98959f; --footer-line: rgba(255,255,255,.08); --ok-bg: #e7f5ee; --ok-ink: #0f7b4f; --err-bg: #fdeaf2; --err-ink: #a3185a; --warn-ink: #b45309; /* Tonalita' prese dal logo (campionate dal file: #FA3B54 #FD6429 #E6A730 #4FCB5D #29A5DD #C21CF0), schiarite quanto basta per leggersi sul fondo scuro. Servono come accenti, non come fondali. */ --logo-red: #ff5068; --logo-orange: #ff7a3d; --logo-amber: #f0b544; --logo-green: #5fd66d; --logo-blue: #45b4e8; --logo-violet: #cf5cf5; /* Passaggio del mouse: verde del logo (piu' carico sul tema chiaro, per contrasto). */ --hover: #3aa54a; --maxw: 1180px; /* Alias storici usati da chrome.css */ --mhh-ink: var(--ink); --mhh-ink-2: var(--ink-2); --mhh-ink-3: var(--ink-3); --mhh-line: var(--line); --mhh-pink: var(--pink); --mhh-maxw: var(--maxw); --mhh-h: 72px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e0c16; --bg-2: #171423; --surface: #161322; --ink: #f3f1f8; --ink-2: #b8b2c6; --ink-3: #8b8598; --line: #282236; --line-2: #1c1729; --pink: #ff5a9b; --purple: #7b2a92; --hover: #5fd66d; --sel-bg: #b8309f; --btn-bg: #f3f1f8; --btn-ink: #14131a; --invert-bg: #1d1930; --invert-ink: #f3f1f8; --shadow: rgba(0,0,0,.5); --shadow-2: rgba(0,0,0,.45); --header-bg: rgba(14,12,22,.94); --footer-bg: #09070f; --ok-bg: #12301f; --ok-ink: #63d39a; --err-bg: #3a1024; --err-ink: #ff8fbb; --warn-ink: #f0b544; /* Anche i blocchi di WordPress/WooCommerce: usano questi due preset per fondo e testo. */ --wp--preset--color--base: #0e0c16; --wp--preset--color--contrast: #f3f1f8; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e0c16; --bg-2: #171423; --surface: #161322; --ink: #f3f1f8; --ink-2: #b8b2c6; --ink-3: #8b8598; --line: #282236; --line-2: #1c1729; --pink: #ff5a9b; --purple: #7b2a92; --hover: #5fd66d; --sel-bg: #b8309f; --btn-bg: #f3f1f8; --btn-ink: #14131a; --invert-bg: #1d1930; --invert-ink: #f3f1f8; --shadow: rgba(0,0,0,.5); --shadow-2: rgba(0,0,0,.45); --header-bg: rgba(14,12,22,.94); --footer-bg: #09070f; --ok-bg: #12301f; --ok-ink: #63d39a; --err-bg: #3a1024; --err-ink: #ff8fbb; --warn-ink: #f0b544; /* Anche i blocchi di WordPress/WooCommerce: usano questi due preset per fondo e testo. */ --wp--preset--color--base: #0e0c16; --wp--preset--color--contrast: #f3f1f8; } /* Il plugin moodhera-events non ha piu' una tavolozza propria da correggere: il suo tokens.css legge queste stesse variabili (con un ripiego chiaro, se il tema non le definisce), quindi segue chiaro e scuro senza duplicare qui i colori. */ html, body { background: var(--bg); } body { color: var(--ink); } /* Anche quando si trascina il cursore sul testo si resta nei colori di casa. */ ::selection { background: var(--sel-bg); color: var(--sel-ink); text-shadow: none; } /* Pulsante chiaro/scuro nell'intestazione: si mostra l'icona di dove si andra'. */ .mh-theme__sun { display: none; } .mh-theme__moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mh-theme__moon { display: none; } :root:not([data-theme="light"]) .mh-theme__sun { display: block; } } :root[data-theme="dark"] .mh-theme__moon { display: none; } :root[data-theme="dark"] .mh-theme__sun { display: block; } :root[data-theme="light"] .mh-theme__moon { display: block; } :root[data-theme="light"] .mh-theme__sun { display: none; } /* Il logo ha la scritta nera: nel tema scuro va reso bianco, come nel pie' di pagina. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mh-site-header .mh-brand__logo { filter: brightness(0) invert(1); opacity: .95; } } :root[data-theme="dark"] .mh-site-header .mh-brand__logo { filter: brightness(0) invert(1); opacity: .95; } /* Il pulsante del tema e' un