/* Vetrina: la pelle della piattaforma. UNA palette, chiara e voluta. Qui NON c'e' impaginazione: solo colori e rilievi. Le pagine restano padrone del proprio layout, ed e' il motivo per cui questo foglio si puo' includere ovunque senza spostare niente. I NOMI dei token sono quelli storici (--cyan, --violet, --grad-...) anche se i valori non sono piu' ne' ciano ne' viola: le pagine li usano in duecento punti, e rinominarli adesso vorrebbe dire toccarle tutte per un guadagno estetico nel codice. Il glossario: --cyan l'ACCENTO (zafferano #c77b12): era il ciano del marchio --violet l'accento in ombra (zafferano cupo): era il viola del Pro --grad-* oggi tinte PIENE: i gradienti sono usciti dal design --glow-cyan oggi un anello morbido: l'alone al neon e' uscito con loro L'attributo data-tema="light" che le pagine mettono sull' resta innocuo: non ci sono piu' due palette da scegliere. */ :root { /* --- fondali e testo --- */ --bg: #fbfaf7; /* carta calda: il banco */ --surface: #ffffff; /* le schede sono carta piu' bianca, posata sopra */ --surface-2: #f4f0e6; /* campi e chip: panna, un passo sotto la scheda */ --ink: #16150f; --ink-tenue: #454034; /* testo secondario, piu' scuro di --muted */ --muted: #78715f; --line: #e9e4d7; /* filo: quasi un capello */ --line-bright: #d9d2c1; /* filo marcato, per i bordi dei controlli */ --placeholder: #a59d8b; /* --- componenti RGB, per le velature --- Le pagine usano lo stesso colore con una dozzina di opacita' diverse: qui c'e' la terna, chi scrive lo stile mette l'alfa che gli serve. */ --cyan-rgb: 199, 123, 18; --violet-rgb: 154, 94, 11; --success-rgb: 47, 107, 79; --danger-rgb: 161, 51, 34; --ombra-rgb: 22, 21, 15; /* l'ombra e' inchiostro caldo, mai nero freddo */ --lume-rgb: 255, 255, 255; /* Fondo dei campi quando hanno il fuoco: sul chiaro si schiarisce. */ --campo-fuoco: #ffffff; /* --- accenti --- */ --cyan: #c77b12; /* zafferano: L'accento, uno solo */ --cyan-chiaro: #9a5e0b; /* al passaggio del mouse si scurisce, non brilla */ --violet: #9a5e0b; /* il "Pro" e le bozze: zafferano cupo */ --success: #2f6b4f; /* verde bottiglia: solo semantico */ --danger: #a13322; /* rosso mattone: solo semantico */ /* Testo dentro un pulsante pieno: bianco su zafferano e su verde. */ --su-accento: #ffffff; --su-successo: #ffffff; /* --- ex gradienti: oggi tinte piene --- */ --grad-accento: #c77b12; --grad-successo: #2f6b4f; --grad-marchio: #c77b12; /* I due capi del titolo: dall'inchiostro a un bruno caldo. */ --titolo-da: #16150f; --titolo-a: #56503f; /* --- velature: fondi tenui degli stati --- */ --velo-cyan: rgba(199, 123, 18, .10); --velo-violet: rgba(154, 94, 11, .10); --velo-success: rgba(47, 107, 79, .10); --velo-danger: rgba(161, 51, 34, .08); /* --- bordi colorati --- */ --bordo-cyan: rgba(199, 123, 18, .38); --bordo-violet: rgba(154, 94, 11, .32); --bordo-success: rgba(47, 107, 79, .35); --bordo-danger: rgba(161, 51, 34, .38); /* --- rilievo: ombre soffici, mai aloni --- */ --ombra: 0 1px 2px rgba(22, 21, 15, .04), 0 10px 28px rgba(22, 21, 15, .07); --ombra-accento: 0 1px 2px rgba(22, 21, 15, .06), 0 8px 22px -6px rgba(199, 123, 18, .35); --ombra-successo: 0 1px 2px rgba(22, 21, 15, .06), 0 8px 22px -6px rgba(47, 107, 79, .32); --alone-cyan: 0 0 0 3px rgba(199, 123, 18, .16); --glow-cyan: 0 0 0 3px rgba(199, 123, 18, .18); /* Il "viola" pieno del piano Pro: zafferano cupo, scritta chiara. */ --grad-violet: #9a5e0b; --su-violet: #ffffff; /* Testo dentro le strisce di esito, sopra la loro velatura. */ --testo-successo: #24523c; --testo-pericolo: #7c2718; /* Velo dietro le finestre modali. */ --velo-modale: rgba(22, 21, 15, .45); /* Il vetro delle barre: chi vuole l'effetto smerigliato parte da qui. */ --vetro: rgba(251, 250, 247, .82); /* Il carattere dei titoli: un graziato caldo, quello delle insegne e dei menu' stampati. E' una pila di sistema -- niente da scaricare, nessuna pagina che aspetta un carattere per disegnarsi. Sta qui e non nelle pagine perche' il titolo di «I miei QR» e quello della home devono essere lo stesso carattere: se ognuna se lo sceglie, alla terza pagina il sito ha tre voci. */ --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; } /* Il colore della barra del browser su telefono segue il fondo. */ :root { color-scheme: light; } /* ========================================================================== Interruttori di tema e lingua ========================================================================== */ .preferenze { display: inline-flex; align-items: center; gap: 6px; } .pref-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 38px; padding: 0 11px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-bright); border-radius: 999px; cursor: pointer; transition: color .18s, border-color .18s; } .pref-btn:hover { color: var(--cyan); border-color: var(--cyan); } .pref-btn .simbolo { font-size: 14px; line-height: 1; } /* La lingua non attiva resta leggibile ma spenta: si capisce che e' un interruttore a due stati e non un'etichetta. */ .pref-lingua b { color: var(--ink); font-weight: 700; } .pref-lingua span { opacity: .45; } /* ========================================================================== Selettore di destinazione (destinazione.js) ========================================================================== Vive in tre editor, quindi lo stile sta qui e non in una pagina: e' la stessa ragione per cui il componente e' uno solo. */ .dest select { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); padding: 11px 12px; border: 1px solid var(--line-bright); border-radius: 10px; background: var(--surface-2); } .dest select:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow-cyan); } .dest-extra { margin-top: 9px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dest-extra[hidden] { display: none; } .dest-extra input[type=text] { flex: 1; min-width: 160px; font-family: inherit; font-size: 15px; color: var(--ink); padding: 11px 12px; border: 1px solid var(--line-bright); border-radius: 10px; background: var(--surface-2); } .dest-nome { font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dest-nome.scelto { color: var(--ink); } /* ---------------------------------------------------------------- scheda QR La scheda di un QR dinamico, disegnata da qr_scheda.js e usata da piu' di una pagina ("I miei QR", "I miei QR intelligenti"). Sta qui e non nello