/* PERCHE' LA PREFERENZA DI SISTEMA NON BASTA * * Questi token seguivano `prefers-color-scheme` da soli. Sembra la cosa * giusta, e su una pagina isolata lo e'. Dentro un tema no. * * `grthemekit` governa i colori del resto del negozio e ha una propria * impostazione, `GR_THEMEKIT_DARK_MODE`, che su questo sito vale `off`: il * negozio e' deliberatamente solo chiaro. Con la media query libera, su una * macchina col sistema in scuro succedeva questo: i nostri token passavano * allo scuro, tutto il resto restava chiaro, e la pagina finiva vestita meta' * per un tema e meta' per l'altro. Il testo delle tessere diventava quasi nero * su fondo quasi nero. * * Adesso lo scuro scatta solo quando il TEMA lo dichiara: * - `data-gr-auto-scuro` sulla radice, che grthemekit mette quando la sua * modalita' e' `auto` e quindi vuole seguire il sistema; * - `data-theme="dark"` o `data-bs-theme="dark"`, cioe' la scelta esplicita * dell'utente, che continua a vincere su tutto. * * La regola generale, che vale oltre questo file: un foglio che decide da solo * il proprio tema dentro un tema che ne decide un altro non e' piu' scuro o * chiaro — e' rotto a meta'. */ /* ============================================================ gr-hybrid — token di identita' visiva ------------------------------------------------------------ Tavolozza, tipografia e misure. I valori arrivano tali e quali dal mockup navigabile in `docs/mockup-home-ida.html`: qui non si ridisegna niente, si porta nella struttura del tema quello che li' e' gia' stato deciso e provato. Perche' un file a mano e non SCSS: le sorgenti di `theme.css` non stanno nel tema, `theme.css` e' un artefatto di build. Ogni riga scritta li' dentro sparisce alla prima ricompilazione. Ordine di precedenza voluto, dal piu' debole al piu' forte: 1. i `--gr-*` di default dentro `theme.css` (caricato prima) 2. questo file (priority 60) 3. il CSS inline di grthemekit nel (config del BO) Il negozio resta configurabile dal pannello; questo file e' il punto di partenza, non una gabbia. Per questo i token stanno fuori da @layer: dentro un layer perderebbero anche contro le regole non incapsulate di theme.css, che non e' cio' che serve. ============================================================ */ :root { /* ---------- tavolozza grezza ---------- Valori fissi: NON cambiano col tema. Sono l'inventario dei colori del marchio, non i ruoli che assumono nella pagina. */ --inchiostro: #17120F; /* nero caldo, non neutro */ --inchiostro-2: #2A211C; --carta: #F7F5F3; --carta-2: #EDE9E5; --grigio: #6E635D; --grigio-tenue: #A79E98; /* Il rosso del marchio, misurato sul sito che i clienti conoscono: rgb(133,19,22). E' il fondo della voce CONSULENZA e della fascia alta di www.idainterni.com, e non va sostituito con qualcosa che gli somiglia. Prima qui c'era #EC1C24, campionato dai pixel del logo. Il logo pero' non e' il sito: quel rosso e' acceso, quello del sito e' scuro e sobrio, e chi arriva dal vecchio negozio riconosce il secondo. Fra il campione di un file e la tinta che sta in pagina da anni, vince la pagina. */ /* I QUATTRO ROSSI DEL MARCHIO NON STANNO PIU' QUI. Erano `--rosso`, `--rosso-fondo`, `--rosso-su-scuro` e `--rosso-fondo-su-scuro`: la tinta di IDA' Interni, dichiarata dentro la base di un tema che deve servire qualunque negozio. Dopo che i ruoli hanno smesso di leggerli (2026-08-27) non li usava piu' nessuno: restavano solo a far credere che il rosso fosse una proprieta' del tema. Non sono andati persi. Vivono, in forma migliore — chiaro e scuro, oklch e hex, con i contrasti misurati e la ragione della scelta — in: clienti/ida-interni/grthemekit/tavolozze/ida_interni.yaml Per rivederli in pagina si applica quel pacchetto da grthemekit, che e' il modulo a cui l'identita' appartiene. */ /* Un rosso solo, e questo e' il punto. I due rossi esistevano perche' #EC1C24 col bianco sopra faceva 4,40:1, sotto la soglia di 4,5 per il testo normale: serviva una seconda tinta piu' scura per i bottoni. #851316 col bianco fa 9,99:1 e sulla carta come TESTO fa 9,19:1 — passa AA e anche AAA in entrambi i mestieri. La seconda tinta non serve piu'. Il nome resta perche' i fogli e i moduli lo chiamano, e toglierlo vorrebbe dire rincorrere ogni `var(--accento-fondo)` in giro per il tema. Punta allo stesso colore: e' una decisione, non una dimenticanza. Se un giorno l'accento tornera' chiaro, qui c'e' gia' il posto dove scrivere la variante che regge le parole. */ /* Su fondo quasi nero #851316 fa 1,89:1: si spegne del tutto. Nel tema scuro il rosso deve salire di luminosita' restando lo stesso rosso — stessa tinta OKLCH (26), croma appena ridotto. - `--rosso-su-scuro` porta parole SUL fondo scuro: 4,96:1 sul nero del tema, sopra la soglia di 4,5. - `--rosso-fondo-su-scuro` e' una superficie con parole bianche sopra: 4,67:1 col bianco, e 4,05:1 col fondo pagina, cosi' la superficie stessa resta distinguibile. Qui i due ruoli restano davvero due, perche' sullo scuro tirano in direzioni opposte: chiaro per leggersi sul nero, scuro per reggere il bianco. */ /* I grigi del tema scuro. Non sono l'inverso di quelli chiari: il fondo scuro e' piu' scuro della carta invertita e il testo e' piu' spento del bianco, altrimenti abbaglia. */ --notte: #131010; --notte-2: #1C1715; --notte-3: #0C0A09; /* i fondi scuri dentro il tema scuro */ --calce: #F2EEEA; /* ---------- ruoli (cambiano col tema) ---------- Sono questi che i template e i moduli devono nominare. Un template che scrive `var(--rosso)` dove intende «il colore dell'accento» resta col rosso chiaro anche di notte. */ /* I RUOLI ARRIVANO DA `grthemekit`, NON DA QUESTO FILE. ------------------------------------------------------------------ Fino al 2026-08-27 qui si leggeva `--accento: var(--rosso)`, e piu' sotto un blocco `:root:root` spingeva quel valore DENTRO `--gr-accent`, scavalcando per specificita' i token che grthemekit emette in testata. Il verso era rovesciato: la base del tema imponeva l'identita' di UN cliente al modulo che quell'identita' dovrebbe governarla. Si vedeva: sulla base modello `--gr-accent` valeva #851316, cioe' il rosso di IDA' Interni, su un negozio che non e' il suo. Ora i ruoli DERIVANO dai token del modulo. Il ripiego dopo la virgola e' la tavolozza Classic Minimal del tema, che serve quando grthemekit non c'e' — e' il caso di un progetto che monta solo i moduli che gli servono, e allora il tema deve reggersi da solo. I valori del cliente non sono andati persi: vivono, in forma migliore (chiaro e scuro, oklch e hex, con i contrasti misurati), in `clienti/ida-interni/grthemekit/tavolozze/ida_interni.yaml`. */ --fondo: var(--gr-paper, #FFFFFF); --fondo-alt: var(--gr-bg, #F7F8FA); --testo: var(--gr-ink, #0B1220); --testo-tenue: var(--gr-mute, #6B7280); --accento: var(--gr-accent, #4361EE); --accento-fondo: var(--gr-accent-strong, var(--gr-accent, #4361EE)); --accento-testo: var(--gr-accent-contrast, #FFFFFF); --filetto: var(--gr-line, #E6E8EC); /* Fondi scuri usati *dentro* il tema chiaro — apertura, showroom, piede. Nel tema scuro diventano ancora piu' scuri del fondo pagina, per restare distinguibili. */ --scuro-fondo: var(--inchiostro); --scuro-testo: var(--carta); /* Le stesse tre tinte in terne rgb: servono al ponte verso Bootstrap, che compone le trasparenze con rgba(var(--…-rgb),a). */ --testo-rgb: 11, 18, 32; --fondo-rgb: 255, 255, 255; --accento-rgb: 67, 97, 238; color-scheme: light; /* ---------- tipografia ---------- Montserrat, e basta: e' il carattere del sito che i clienti conoscono, dove sta sia sul corpo sia sui titoli. Prima qui c'erano Bodoni e Helvetica, che sono l'accoppiata dell'editoria di design italiana ma non sono l'identita' di questo negozio: erano un preset generico a cui era stato dato il nome del cliente, ed e' cosi' che un rifacimento cambia marchio senza che nessuno lo decida. Perche' le due variabili portano lo stesso valore: il tema distingue il carattere dei titoli da quello del corpo, e la distinzione va tenuta — un domani un titolo potra' avere un carattere suo senza che si debba rincorrere ogni regola. Oggi l'identita' dice che sono lo stesso, e lo dicono entrambe. Montserrat NON e' un carattere di sistema: va scaricato, e lo scarica il preset tipografico `geometrico_montserrat` di grthemekit, che emette il collegamento a Google Fonts con quattro pesi (400/500/600/700) e `display=swap`. La catena di ripiego qui sotto e' quella di sistema: se il collegamento non arriva, la pagina resta un sans leggibile invece di cadere sul serif del browser. */ /* Il carattere lo decide grthemekit, non la base del tema. Qui c'era Montserrat cablato: e' il carattere di IDA' Interni, e stava nella base che dovrebbe servire qualunque negozio. Il ripiego dopo la virgola e' la coppia Classic Minimal del tema (Fraunces per i titoli, Inter per il testo), che entra in servizio quando grthemekit non c'e'. */ --display: var(--gr-font-display, 'Fraunces', Georgia, 'Times New Roman', serif); --corpo: var(--gr-font-body, var(--gr-font-ui, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)); /* Il peso dei titoli. L'originale scrive h2 e h3 in 600 e le intestazioni del piede in 700; `theme.css` invece fissa 400 su tutti i titoli, che con Bodoni funzionava e con un geometrico no: a 43px Montserrat 400 e' una riga sottile, non un titolo. Il valore vive qui perche' e' identita', ma si applica in `gr-sezioni.css` dentro `@layer gr-base`, dove un componente puo' ancora dire la sua. */ --peso-titoli: 600; /* ---------- misure ---------- */ --misura: 66ch; /* larghezza leggibile di un paragrafo */ --gutter: clamp(1.25rem, 4vw, 4rem); /* margine laterale delle fasce */ --dentro: 1240px; /* larghezza massima del contenuto */ } /* ============================================================ Tema scuro — preferenza di sistema ------------------------------------------------------------ I due `:not()` non sono decorazione: sono cio' che permette all'interruttore dell'utente di vincere sulla preferenza del sistema operativo. Chi ha il sistema scuro ma sceglie «chiaro» deve vedere chiaro, e senza i due `:not()` questa regola glielo rimetterebbe scuro. Perche' due attributi. Il tema scrive `data-bs-theme` (e' la convenzione di Bootstrap 5.3, ed e' quello che l'anti-flash in `head.tpl` legge da localStorage); `data-theme` e' il nome usato dalla specifica dell'identita'. Riconoscerli entrambi costa tre selettori e evita che l'interruttore funzioni «quasi». ============================================================ */ @media (prefers-color-scheme: dark) { :root[data-gr-auto-scuro]:not([data-theme="light"]):not([data-bs-theme="light"]){ --fondo: var(--gr-paper, #0B1220); --fondo-alt: var(--gr-bg, #131A26); --testo: var(--gr-ink, #E8ECF3); --testo-tenue: var(--gr-mute, #9AA1AB); --accento: var(--gr-accent, #6B87F0); --accento-fondo: var(--gr-accent-strong, var(--gr-accent, #6B87F0)); --accento-testo: var(--gr-accent-contrast, #FFFFFF); --filetto: var(--gr-line, rgba(232, 236, 243, 0.14)); --scuro-fondo: var(--notte-3); --scuro-testo: var(--calce); --testo-rgb: 242, 238, 234; --fondo-rgb: 19, 16, 16; --accento-rgb: 207, 97, 89; color-scheme: dark; } } /* Tema scuro — scelta esplicita dell'utente. Vale a prescindere dalla preferenza di sistema, ed e' il motivo per cui l'attributo esiste. */ :root[data-theme="dark"], :root[data-bs-theme="dark"] { --fondo: var(--gr-paper, #0B1220); --fondo-alt: var(--gr-bg, #131A26); --testo: var(--gr-ink, #E8ECF3); --testo-tenue: var(--gr-mute, #9AA1AB); --accento: var(--gr-accent, #6B87F0); --accento-fondo: var(--gr-accent-strong, var(--gr-accent, #6B87F0)); --accento-testo: var(--gr-accent-contrast, #FFFFFF); --filetto: var(--gr-line, rgba(232, 236, 243, 0.14)); --scuro-fondo: var(--notte-3); --scuro-testo: var(--calce); --testo-rgb: 242, 238, 234; --fondo-rgb: 19, 16, 16; --accento-rgb: 207, 97, 89; color-scheme: dark; } /* Tema chiaro — scelta esplicita. Serve a riportare i valori chiari quando il sistema e' scuro: senza questo blocco la scelta «chiaro» spegnerebbe solo la regola scura, e i token resterebbero quelli ereditati. */ :root[data-theme="light"], :root[data-bs-theme="light"] { --fondo: var(--gr-paper, #FFFFFF); --fondo-alt: var(--gr-bg, #F7F8FA); --testo: var(--gr-ink, #0B1220); --testo-tenue: var(--gr-mute, #6B7280); --accento: var(--gr-accent, #4361EE); --accento-fondo: var(--gr-accent-strong, var(--gr-accent, #4361EE)); --accento-testo: var(--gr-accent-contrast, #FFFFFF); --filetto: var(--gr-line, #E6E8EC); --scuro-fondo: var(--inchiostro); --scuro-testo: var(--carta); --testo-rgb: 11, 18, 32; --fondo-rgb: 255, 255, 255; --accento-rgb: 67, 97, 238; color-scheme: light; } /* ============================================================ Ponte verso i token che il tema aveva gia' ------------------------------------------------------------ `gr-hybrid` e grthemekit parlano gia' una loro lingua: `--gr-*` per il tema, `--bs-*` per Bootstrap. Riscriverla sarebbe stato un secondo sistema di token accanto al primo, cioe' due posti dove cambiare un colore e uno dei due sempre dimenticato. Qui le due lingue vengono fatte combaciare: i `--gr-*` e i `--bs-*` puntano ai *ruoli* qui sopra, non ai valori. Il rimando si risolve al momento del calcolo, quindi basta scriverlo una volta: quando `--testo` cambia col tema, `--gr-ink` lo segue da solo e non c'e' un secondo elenco da tenere allineato. ============================================================ */ /* `:root:root` e non `:root`, e non e' un vezzo. * * `grthemekit` emette i propri token a runtime dentro un `