/* ========================================================================== STYLE.CSS — foglio di stile unico del sito REGOLA D'ORO Nelle pagine HTML non scrivere mai un colore, una dimensione o un margine. Usa solo le classi definite qui sotto. Se ti serve qualcosa che non esiste, aggiungilo in questo file una volta sola, poi riusalo ovunque. Vedi /stile/ per il catalogo visivo di tutte le classi disponibili. INDICE 1. Token — colori, tipografia, spaziature 2. Reset — normalizzazione di base 3. Layout — contenitore e struttura pagina 4. Testata — masthead, nav, selettore di lingua, interruttore tema 5. Tipografia — titoli, prose, eyebrow 6. Indice — righe titolo/destinazione (elemento firma del sito) 7. Blocchi — card, note, tag 8. Voci CV — esperienze e formazione 9. Form — campi, bottoni, risultati (per i tool) 10. Tool grandi — pannelli, tabelle, barre, liste con spunta 11. Footer 12. Utility 13. Stampa ========================================================================== */ /* ========================================================================== 1. TOKEN L'unico posto dove si definiscono i valori grezzi. Cambia un token qui e cambia tutto il sito. ========================================================================== */ /* Il tema predefinito è quello scuro: i suoi colori stanno qui, in :root, perché sono quelli che valgono se nessuno tocca niente. Il tema chiaro è la variante, e si attiva con l'attributo data-tema sul tag — lo scrive tema.js leggendo la scelta salvata, prima che il venga disegnato. Il resto dei token (tipografia, spaziature, forma) non cambia con il tema: sta qui una volta sola. */ :root { /* Dice al browser di che colore è il fondo su cui disegnare i controlli di sistema: barre di scorrimento, menu a tendina aperti, campi. Senza questa riga il tema lo sceglierebbe il sistema operativo, e su un Mac impostato in chiaro avremmo widget chiari su una pagina scura. */ color-scheme: dark; /* --- Colori: scuro (tema predefinito) ---------------------------------- */ --paper: #131612; /* sfondo pagina */ --surface: #1B1F1A; /* sfondo di card e campi */ --ink: #E9ECE7; /* testo principale */ --ink-2: #A2A99E; /* testo secondario */ --ink-3: #767D72; /* metadati, testo tenue */ --accent: #7CC49B; /* verde pino: link, stati attivi */ --accent-deep: #A3DCBB; /* accento su hover */ --accent-soft: #22301F; /* fondo tenue dell'accento */ --rule: #2C3229; /* filetti e bordi */ /* --- Tipografia -------------------------------------------------------- */ --font-ui: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --t-xs: 0.75rem; /* 12px — metadati, eyebrow */ --t-sm: 0.875rem; /* 14px — didascalie, nav */ --t-base: 1rem; /* 16px — corpo */ --t-lg: 1.125rem; /* 18px — corpo grande, intro */ --t-xl: 1.375rem; /* 22px — titoli di sezione */ --t-2xl: 1.875rem; /* 30px — titolo pagina */ --t-3xl: 2.5rem; /* 40px — titolo home */ --leading-tight: 1.2; --leading-body: 1.65; /* --- Spaziature: scala a passo 4px ------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-10: 4rem; --s-12: 6rem; /* --- Forma ------------------------------------------------------------- */ --radius: 4px; --radius-lg: 8px; --width: 43rem; /* larghezza massima della colonna di lettura */ /* Colonna larga: la usano solo i tool con tabelle, dove 43rem obbligherebbe a scorrere in orizzontale qualunque cosa. Vedi .wrap--wide. */ --width-wide: 62rem; --speed: 0.18s; } /* --- Colori: chiaro ------------------------------------------------------ Si accende solo quando porta data-tema="chiaro", cioè quando il visitatore lo ha chiesto con l'interruttore nella testata. Ridefinisce i colori e nient'altro: le altre variabili restano quelle di :root. Non c'è nessuna @media (prefers-color-scheme): il sito parte scuro per tutti, e la preferenza di sistema non entra nella decisione. Se un giorno si volesse seguirla, il posto è tema.js — non questo file, perché la scelta salvata deve comunque poterla scavalcare. */ :root[data-tema="chiaro"] { color-scheme: light; --paper: #F5F6F4; --surface: #FFFFFF; --ink: #191C18; --ink-2: #5C6259; --ink-3: #8A9086; --accent: #2C6A4A; --accent-deep: #1E4D35; --accent-soft: #E4EDE6; --rule: #DEE1DA; } /* ========================================================================== 2. RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: var(--t-base); line-height: var(--leading-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } /* L'attributo hidden deve vincere anche su un display impostato da una classe (una riga di tabella, una griglia): i tool nascondono e mostrano pezzi di pagina con questo, e senza !important una regola qualsiasi di questo foglio se lo mangerebbe. */ [hidden] { display: none !important; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent-deep); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 3. LAYOUT ========================================================================== */ .wrap { width: 100%; max-width: var(--width); margin-inline: auto; padding-inline: var(--s-5); } .page { padding-block: var(--s-8) var(--s-12); } /* Solo per le pagine con tabelle larghe. Il resto del sito resta stretto. */ .wrap--wide { max-width: var(--width-wide); } /* Salto rapido al contenuto per chi naviga da tastiera */ .skip { position: absolute; left: -9999px; top: var(--s-2); background: var(--surface); color: var(--ink); padding: var(--s-2) var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius); z-index: 10; } .skip:focus { left: var(--s-4); } /* ========================================================================== 4. TESTATA ========================================================================== */ .masthead { border-bottom: 1px solid var(--rule); background: var(--paper); } .masthead__inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-block: var(--s-4); } .masthead__name { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .masthead__name:hover { color: var(--accent); } .nav { display: flex; gap: var(--s-5); font-size: var(--t-sm); } .nav__link { color: var(--ink-2); text-decoration: none; padding-bottom: 2px; border-bottom: 1.5px solid transparent; transition: color var(--speed) ease, border-color var(--speed) ease; } .nav__link:hover { color: var(--ink); } .nav__link.is-active { color: var(--ink); border-bottom-color: var(--accent); } /* Gruppo di destra della testata: le sezioni e, dopo, il selettore di lingua. Esiste per tenerli uniti quando la testata va a capo sugli schermi stretti: senza, il selettore finirebbe da solo su una riga tutta sua. */ .masthead__end { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5); } /* --- Selettore di lingua ------------------------------------------------- È un sotto */ } .langswitch__select { appearance: none; -webkit-appearance: none; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; color: inherit; background: transparent; border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-1) var(--s-6) var(--s-1) var(--s-3); cursor: pointer; transition: border-color var(--speed) ease; } .langswitch__select:hover { border-color: var(--ink-3); } /* Il menu aperto è disegnato dal sistema operativo e non eredita lo sfondo trasparente del controllo: senza questa riga, in tema scuro si vedrebbe testo chiaro su fondo chiaro. */ .langswitch__select option { background: var(--surface); color: var(--ink); } /* --- Interruttore del tema ------------------------------------------------ Un