/* Stile A «Tomo miniato» (approvato da Lorenzo il 15/10: «così meglio»). Comune a tutte le pagine.
Cuoio scuro della legatura con grana e filetto impresso, pergamena per tutto ciò che si legge, foglia d'oro;
la grammatica del codice miniato: capolettera onciale d'oro su lapislazzuli, rubrica vermiglia (¶), glosse a margine
con la manicula (☞) per i «perché?» e per la Guida. Caratteri (17/10, «più da gioco»): Grenze (titoli, logo, nomi, capolettera), Signika (interfaccia: bottoni,
rubriche, etichette, numeri), Literata (testo). Vedi web/font/font.css. Riferimento: prove/campione/A-*.png. */
@import url('/font/font.css');
:root {
--notte: #120b07;
--cuoio: #24170e;
--oro: #cfa851;
--oro-chiaro: #f0d792;
--oro-scuro: #7a5a22;
--pergamena: #eddfbf;
--pergamena-2: #dcc697;
--inchiostro: #2b1a10;
--inchiostro-2: #5c4430;
--rubrica: #a3301f;
--rubrica-chiara: #d9644c;
--lapis: #2d4c86;
--lapis-scuro: #1b2f57;
--lapis-chiaro: #8fb0e6;
--malachite: #3f6b45;
--malachite-chiara: #8fbf5a;
/* --serif-titolo ha il nome di quando era Cinzel: oggi è il carattere dell'INTERFACCIA (bottoni, tab, rubriche,
etichette, numeri). I titoli veri (logo, h1, nomi delle carte) stanno in --titolo. */
--serif-titolo: 'Signika', 'Trebuchet MS', sans-serif;
--interfaccia: var(--serif-titolo);
--titolo: 'Grenze', Georgia, serif;
--serif: 'Literata', Georgia, serif;
--onciale: 'Grenze', Georgia, serif;
/* foglia d'oro da titolo di gioco: gradiente, contorno scuro di 1 px, ombra stretta e dura, alone morbido */
--oro-foglia: linear-gradient(180deg, #fff6d0 0%, #f3d27a 38%, #b8812b 58%, #7a4f17 70%, #e9c46a 100%);
--oro-rilievo: drop-shadow(1px 0 0 #2a1606) drop-shadow(-1px 0 0 #2a1606) drop-shadow(0 -1px 0 #2a1606) drop-shadow(0 1px 0 #2a1606) drop-shadow(0 3px 0 #1a0d04) drop-shadow(0 6px 8px rgba(0,0,0,.7));
--oro-rilievo-piccolo: drop-shadow(0 1px 0 #1a0d04) drop-shadow(0 2px 3px rgba(0,0,0,.65));
/* nomi su pergamena: inchiostro bruno «inciso», con la luce sotto */
--inciso: 0 1px 0 rgba(255,246,222,.75), 0 -1px 0 rgba(60,32,10,.18);
--inchiostro-titolo: #3a2312;
/* nomi di prima (pagine non ancora rifatte, moduli comuni) */
--testo: var(--serif);
--vello: var(--pergamena);
--vello-2: var(--pergamena-2);
--vello-chiaro: #f6ecd2;
--seppia: var(--inchiostro-2);
--filo: #b49a62;
--verderame: var(--malachite);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
background: var(--notte); color: var(--pergamena);
font-family: var(--serif); font-size: 17px; line-height: 1.42;
-webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 3px; }
[hidden] { display: none !important; }
a { color: var(--oro-chiaro); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* ---------- cuoio della legatura: grana incrociata + cornice impressa a secco ---------- */
.cuoio {
background:
radial-gradient(ellipse at 50% -10%, rgba(207,168,81,.13), transparent 55%),
radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.75), transparent 60%),
linear-gradient(180deg, #1d130c, var(--notte));
background-attachment: fixed;
min-height: 100vh;
}
.cuoio::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
repeating-linear-gradient(-45deg, rgba(0,0,0,.2) 0 1px, transparent 1px 5px);
}
/* (17/10) la cornice impressa sta SOTTO i fogli (z-index -1, sopra il fondo del cuoio): a z-index 0 passava sopra la
pergamena, e la sua riga in basso tagliava a metà la riga di testo che ci scorreva sotto (privacy, crediti) */
.cuoio::after {
content: ""; position: fixed; inset: 10px; pointer-events: none; z-index: -1;
border: 1px solid rgba(207,168,81,.22);
box-shadow: inset 0 0 0 5px rgba(0,0,0,.25), inset 0 0 0 6px rgba(207,168,81,.12);
}
/* il dipinto in alto che sfuma nel cuoio */
.sfondo-dipinto {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: var(--dipinto, url(/img/sfondo.webp)) center 30% / cover no-repeat; opacity: .22; filter: saturate(.85);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%); mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
}
/* ---------- lastra di cuoio con filetto d'oro (i pannelli sopra la scena) ---------- */
.lastra {
background: linear-gradient(180deg, rgba(42,28,17,.97), rgba(22,14,9,.97));
border: 1px solid var(--oro-scuro);
box-shadow: inset 0 0 0 4px rgba(18,11,7,.95), inset 0 0 0 5px rgba(207,168,81,.38), 0 18px 40px rgba(0,0,0,.6);
color: var(--pergamena);
}
/* ---------- pergamena ---------- */
.pergamena {
position: relative; color: var(--inchiostro);
background:
radial-gradient(ellipse at 50% 35%, rgba(255,250,235,.55), transparent 70%),
radial-gradient(ellipse at 0% 0%, rgba(120,80,30,.22), transparent 40%),
radial-gradient(ellipse at 100% 100%, rgba(120,80,30,.28), transparent 45%),
linear-gradient(180deg, var(--pergamena), var(--pergamena-2));
box-shadow: inset 0 0 50px rgba(110,70,25,.3), 0 16px 36px rgba(0,0,0,.5);
}
.pergamena::before {
content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .45; border-radius: inherit; z-index: 0;
background: url("data:image/svg+xml;utf8,");
}
.pergamena > * { position: relative; }
/* il foglio incorniciato: filetti interni e angoli d'oro (gli angoli sono