/* DUC · Tangible × Vittoria — shared styles * Caricato per primo in ; il CSS inline page-specific può sovrascrivere. * Estrazione iniziale: variabili, reset, tipografia, utility .is-future. * Future iterazioni: estrarre .nav, .sheet, .header*, .section-header*, .footer dai singoli HTML. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap'); :root { /* TANGIBLE BRAND — base */ --brand:#1F1C3D; --brand-deep:#15132B; --brand-soft:#2A2747; --highlight:#00E0CA; --highlight-deep:#007B70; --highlight-bg:#CDF5EF; --accent:#E80E3F; --accent-deep:#B81234; --accent-bg:#FBE0E6; /* TANGIBLE BRAND — halftone */ --grey:#E9E9EA; --geyser:#D1D9E1; --breeze:#F0F2F5; --bg-grad-end:#E8ECF0; /* Livelli L1–L4 */ --l1:#1F1C3D; --l1-bg:#ECEBF2; --l1-mid:#4A4660; --l2:#007B70; --l2-bg:#CDF5EF; --l2-mid:#38A399; --l3:#5A5564; --l3-bg:#E9E9EA; --l3-mid:#9B96A3; --l4:#B81234; --l4-bg:#FBE0E6; --l4-mid:#E36B82; /* Ink + carta */ --ink:#15132B; --ink2:#4A4660; --ink3:#8A85A0; --paper:#FFFFFF; --paper2:#F0F2F5; --border:#D1D9E1; --border-strong:#8A85A0; /* Stato */ --open-bg:#D1D9E1; --open-c:#15132B; --open-border:#8A85A0; --new-bg:var(--l1-bg); --new-c:var(--brand); --new-border:#6862A0; --delta-bg:var(--highlight-bg); --delta-c:var(--highlight-deep); --delta-border:var(--highlight); --risk-bg:var(--accent-bg); --risk-c:var(--accent-deep); --risk-border:var(--accent); /* Golden record / golden rule — usati nella narrativa "stelle polari" */ --gr-bg:#FFF9EC; --gr-c:#7A5000; --gr-border:#E6C050; --gg-bg:#F0F9FF; --gg-c:#004A7A; --gg-border:#60B8E6; } *{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;} body{ font-family:'IBM Plex Sans',sans-serif; background:linear-gradient(180deg,#FFFFFF 0%,var(--bg-grad-end) 100%); background-attachment:fixed; color:var(--ink); font-size:16px; line-height:1.55; } a{color:inherit;} code{font-family:'IBM Plex Mono',monospace;font-size:.92em;background:var(--paper2);padding:0 3px;border-radius:2px;} /* === Utility: voce di navigazione retrocessa a "fase futura" === * Le viste non ancora lavorate restano accessibili ma visivamente attenuate. */ .is-future{ opacity:.3; transition:opacity .15s; } .is-future:hover{opacity:.7;} /* Quando sei effettivamente sulla pagina futura, la voce torna leggibile */ .is-future.is-current{opacity:1;}