/* ============================================ style.css — lucapasquarelli.com ============================================ Questo file contiene tutto lo stile della pagina. È separato dall'HTML per due motivi: 1. puoi modificare l'aspetto senza toccare il contenuto 2. il browser lo mette in cache — caricamento più veloce */ /* --- RESET --- I browser applicano stili di default (margini, padding, dimensioni font) che variano tra Chrome, Firefox, Safari. Questo blocco li azzera così partiamo da una base uniforme. */ *, *::before, *::after { box-sizing: border-box; /* include padding e border nella larghezza totale */ margin: 0; padding: 0; } /* --- VARIABILI CSS --- :root è l'elemento radice della pagina (come ). Le variabili definite qui sono disponibili ovunque nel file. Se vuoi cambiare il colore del testo, cambi --color-text e si aggiorna tutto. var(--nome) è come usarle. */ :root { /* --- COLORI --- Base neutra e pulita (stile moderno) + un colore accento vivace da usare con parsimonia su link/hover e, più avanti, sui bottoni. */ --color-bg: #ffffff; /* sfondo: bianco pieno, più "app" che "carta" */ --color-surface: #faf9f7; /* superfici leggermente staccate (card, widget) */ --color-text: #1d1d1f; /* testo principale: quasi nero, tono caldo */ --color-muted: #6e6e73; /* testo secondario: grigio medio */ --color-border: #ececec; /* linee e bordi molto leggeri */ --color-link: #1d1d1f; /* link: colore del testo, l'accento arriva in hover */ --color-hover: rgb(248, 28, 224); /* accento: indaco/violaceo moderno */ --color-accent: rgb(248, 28, 224); /* stesso accento, riusabile su bottoni/dettagli */ /* --- TIPOGRAFIA --- Passiamo da un serif editoriale a un sans-serif moderno. Inter è già caricato nelle pagine; la lista di fallback usa i font di sistema così, se Inter non è pronto, il testo resta comunque pulito. */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-size: 17px; --line-height: 1.6; /* interlinea più ariosa, come nei siti moderni */ /* --- FORME --- Scala di arrotondamenti riutilizzabile: dal piccolo al "pillola". */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* --- OMBRE --- Ombre morbide e diffuse, non nette: danno profondità senza pesare. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.06); --max-width: 640px; /* un filo più largo, respira meglio col sans */ --padding-x: 24px; /* margine laterale su mobile */ } /* --- BODY --- body è il contenitore di tutto il contenuto visibile. Qui impostiamo font, colori e dimensioni globali. */ body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size); line-height: var(--line-height); /* rende il sans-serif più nitido e uniforme su Mac/WebKit */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* centra il contenuto orizzontalmente */ max-width: var(--max-width); margin: 0 auto; padding: 80px var(--padding-x) 120px; } /* --- TIPOGRAFIA --- h1, h2, p, small sono elementi HTML semantici. "Semantico" significa che descrivono cosa sono i contenuti, non come appaiono. h1 = titolo principale, p = paragrafo, ecc. */ h1 { font-size: 1.1rem; /* rem = relativo alla dimensione base del body */ font-weight: 400; /* normale, non bold — scelta stilistica */ margin-bottom: 32px; } header h1 { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; /* titoli più compatti, come nei siti moderni */ margin-bottom: 10px; } /* Sottotitolo sotto il titolo dell'header: più grande e in grigio, come le "tagline" introduttive dei siti moderni. */ header p { font-size: 1.05rem; color: var(--color-muted); line-height: 1.5; margin-bottom: 0; } h2 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 600; color: var(--color-text); /* non più grigio muted: titoli veri, ben leggibili */ letter-spacing: -0.01em; /* niente più maiuscoletto spaziato */ margin-bottom: 14px; margin-top: 56px; } .section-title-row { display: flex; align-items: center; gap: 10px; margin-top: 56px; } .section-title-row h2 { margin: 0; } /* Pallino accento indaco davanti a ogni titolo di sezione: dettaglio discreto ma riconoscibile, nello spirito degli accenti di Tally. */ h2::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background-color: var(--color-accent); } p { margin-bottom: 12px; /* più respiro tra i paragrafi */ color: var(--color-text); } small { font-size: 1rem; color: var(--color-muted); } /* --- LINK --- a è l'elemento per i collegamenti ipertestuali. text-decoration: none rimuove la sottolineatura di default. transition rende il cambio di colore fluido (0.15s) invece che istantaneo. */ a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; /* spazio tra testo e sottolineatura */ text-decoration-color: var(--color-border); /* sottolineatura leggera di default */ transition: color 0.15s, text-decoration-color 0.15s; } a:hover { color: var(--color-hover); text-decoration-color: var(--color-hover); /* l'accento compare al passaggio del mouse */ } /* Selezione del testo con una velatura d'indaco, invece del blu di sistema. */ ::selection { background-color: rgba(91, 91, 255, 0.18); color: var(--color-text); } /* Focus da tastiera: contorno indaco ben visibile su tutti gli elementi interattivi. Migliora l'accessibilità e resta in tema col brand. */ a:focus-visible, .btn-podcast:focus-visible, .tm-machine:focus-visible, .back-link:focus-visible, .project-title:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; } /* --- SEZIONI --- section è un elemento HTML5 semantico che raggruppa contenuti correlati. Qui non fa molto visivamente — serve per organizzare il codice e aiuta i motori di ricerca a capire la struttura della pagina. */ section { margin-bottom: 24px; } /* --- LISTA LINK --- ul = unordered list (lista non ordinata, senza numeri) li = list item (elemento della lista) list-style: none rimuove i pallini di default. */ .link-list { list-style: none; display: flex; /* flex mette gli elementi in fila orizzontale */ flex-wrap: wrap; /* va a capo se non ci sta tutto su una riga */ gap: 2px 20px; /* spazio verticale 4px, orizzontale 20px */ } .link-list li { font-size: 0.9rem; } /* --- CHIP "TORNA ALLA HOME" --- Il link "home" nelle sottopagine: da link nudo a piccola pillola con freccia, bordo tenue, ombra leggera e micro-lift in hover. */ .back-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background-color: var(--color-surface); color: var(--color-text); text-decoration: none; font-size: 0.85rem; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .back-link::before { content: "\2190"; /* freccia ← inserita via CSS, così l'HTML resta pulito */ } .back-link:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--color-accent); /* bordo indaco in hover */ color: var(--color-accent); /* anche testo e freccia diventano indaco */ } /* --- LISTA PROGETTI (a schede) --- Ogni progetto è una "card": bordo morbido, angoli arrotondati, ombra leggera e un piccolo lift al passaggio del mouse. */ .project-list { list-style: none; display: flex; flex-direction: column; gap: 12px; /* spazio uniforme tra le schede */ } .project-list li { padding: 18px 20px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .project-list li:hover { transform: translateY(-2px); /* la scheda si solleva leggermente */ box-shadow: var(--shadow-md); /* e l'ombra si allarga */ border-color: #dcdce8; /* bordo con un tocco di accento */ } .project-title { font-size: 1rem; font-weight: 600; display: block; margin-bottom: 4px; text-decoration: none; /* niente sottolineatura: è un titolo, non un link inline */ color: var(--color-text); transition: color 0.15s ease; } .project-title:hover { color: var(--color-accent); /* l'accento compare solo sul titolo in hover */ } .project-desc { font-size: 0.88rem; color: var(--color-muted); margin: 0; line-height: 1.5; } /* --- RESPONSIVE --- @media è una "regola condizionale": il CSS dentro si applica solo quando la schermata è larga meno di 600px (cioè mobile). Su mobile riduciamo il padding e la dimensione del testo. */ @media (max-width: 600px) { body { padding: 48px var(--padding-x) 80px; font-size: 17px; } h2 { margin-top: 44px; } } /* --- BOTTONI ICONA (podcast / time machine / cv) --- I pulsanti hanno forma pill, bordo tenue, ombra morbida e un piccolo sollevamento al passaggio del mouse. */ .btn-podcast, .tm-machine, .btn-cv { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid rgba(0, 0, 0, 0.06); color: var(--color-text); text-decoration: none; font-size: 1rem; line-height: 1; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } /* Effetto comune in hover: si solleva di 2px e l'ombra si allarga. */ .btn-podcast:hover, .tm-machine:hover, .btn-cv:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-text); } .btn-podcast { background-color: #75f1a7; } .btn-podcast:hover { background-color: #36f388; } .tm-machine { background-color: rgb(245, 151, 234); } .tm-machine:hover { background-color: rgb(250, 96, 232); } .btn-cv { background-color: rgb(255, 239, 253); font-weight: 600; letter-spacing: 0.01em; font-family: 'Borel', sans-serif; } .btn-cv:hover { background-color: #e6dcff; } .button-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; }