/* ========================================================== Lorenzo Grasso — style.css (ripulito + commentato) NOTE: Ho mantenuto la tua struttura e le classi esistenti. Ho solo pulito duplicati, corretto piccoli errori e aggiunto commenti su dove/come usare ogni blocco rispetto all'HTML che mi hai mandato. ========================================================== */ /* ---------------------------------------------------------- BASE / RESET - Applica font globale e previeni lo scroll orizzontale - In HTML: nessuna classe necessaria (global) ---------------------------------------------------------- */ body { font-family: "Roboto", sans-serif; /* In HTML carichi Montserrat/OpenSans: va bene. Se vuoi Roboto, aggiungi anche Roboto a Google Fonts */ overflow-x: hidden; } /* Titoli globali (usati ovunque) */ h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; /* coerente con i link Google Fonts nel tuo */ text-transform: uppercase; color: #ffffff; /* titoli bianchi */ font-weight: bold; } /* ---------------------------------------------------------- LAYOUT WRAPPER - Usata nel blocco About me (section.wrapper) e in altre sezioni - Fornisce larghezza max + spacing orizzontale + layout flessibile ---------------------------------------------------------- */ .wrapper { max-width: 1500px; padding-left: 10%; padding-right: 10%; margin: auto; display: flex; gap: 25px; justify-content: space-between; /* seconda definizione unita qui */ margin-top: 40px; /* seconda definizione unita qui */ } /* Utility per centrare gli elementi figli dentro la .wrapper */ .margin-auto { margin: auto; } /* ---------------------------------------------------------- TIPOGRAFIA SPARSE / UTILITY TESTO ---------------------------------------------------------- */ .quote { /* non vedo un .quote nell'HTML attuale ma la lascio disponibile */ font-family: "Covered By Your Grace", cursive, sans-serif; font-size: 1.5em; } .uppercase { /* classi stile inline su parole/frasi */ color: #FFD84D; /* giallo */ text-transform: uppercase; } .secondboldText { /* usata nel paragrafo About me */ font-size: 2.5rem; font-weight: bold; color: #FFD84D; /* grassetti -> gialli */ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .padding-top { /* usata sul

che contiene il bottone "More info" */ align-items: center; margin-top: 30px; } .boldText { /* usata nell'hero: "Hi, I'm Lorenzo" */ font-weight: bold; color: #FFD84D; /* grassetti -> gialli */ font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; } /* ---------------------------------------------------------- BUTTONS (usati per "More info" e futuri CTA) - In HTML: o ---------------------------------------------------------- */ .button, .button-outline { display: inline-block; padding: 12px 24px; font-size: 18px; font-weight: bold; text-transform: uppercase; text-decoration: none; border-radius: 30px; text-align: center; transition: all 0.3s ease-in-out; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; } /* Bottone pieno */ .button { background: #FFD84D; /* giallo pieno */ color: #111111; border: none; } /* Bottone outline (usato in About me) */ .button-outline { border: 3px solid #FFD84D; color: #FFD84D; background: transparent; } /* Hover comuni */ .button:hover { transform: scale(1.1); box-shadow: 0 6px 15px rgba(255, 216, 77, 0.35); } .button-outline:hover { background: #FFD84D; color: #111111; transform: scale(1.1); box-shadow: 0 6px 15px rgba(255, 216, 77, 0.35); } /* Wrapper opzionale per centrare i bottoni */ .button-container { display: flex; justify-content: center; align-items: center; margin-top: 20px; } /* ---------------------------------------------------------- BLOCCO "SKILLS" (legacy e attuale) - Nell'HTML attuale usi: .skills-section, .skills-grid, .skill-item - Le regole su .skills p / .skills ul sono legacy: usale solo se inserisci un wrapper con class="skills" attorno a testi/lista ---------------------------------------------------------- */ .skills p { /* LEGACY */ font-size: 22px; font-weight: bold; color: #ffffff; /* testo bianco */ text-transform: uppercase; text-align: center; letter-spacing: 2px; padding: 10px; border-radius: 10px; transition: all 0.3s ease-in-out; background: rgba(255, 255, 255, 0.08); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); display: inline-block; } .skills p:hover { transform: scale(1.1); box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); } .no-bullet-list { list-style: none; padding: 0; margin: 0; } /* utility generica */ .skills ul { list-style: none; padding: 0; margin: 0; } /* LEGACY */ /* Testo centrato e più grande per un blocco (es. About me) */ .justify.align-center { font-size: 2rem; line-height: 1.6; color: #ffffff; /* testo bianco */ } /* FIX: selector corretto -> class="boxtest" in HTML se vuoi usare questo stile */ .boxtest { /* Applicalo a un box evidenziato:

Testo
*/ font-family: "Poppins", sans-serif; font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #ffffff; transition: color 0.3s ease-in-out; } .boxtest:hover { color: #FFD84D; } /* ---------------------------------------------------------- PORTFOLIO CARDS (hover e ombra) - Usate per i riquadri video nelle sezioni Projects/Multiplayer/Evolution/Beginning ---------------------------------------------------------- */ .portfolio-area .item-space figure:hover { cursor: pointer; /* mano in hover */ transform: scale(1.05); /* leggero zoom */ transition: transform 0.3s ease-in-out; /* transizione */ box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);/* ombra */ } /* ---------------------------------------------------------- CONTATTI (sezione finale) ---------------------------------------------------------- */ .box-contact { display: block; width: 100%; text-align: center; } .logo { width: 50px; } /* Contenitore principale "Contact me" */ #contact-me { display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; margin-top: 100px; } /* Titolo interno (h1.large.contact-title) */ .contact-title { font-size: 2rem; font-weight: bold; color: #ffffff; } /* Descrizione breve sotto il titolo (versione 1 — iniziale) */ .contact-description { /* usata nel blocco Contacts e nel testo introduttivo */ font-size: 1.2rem; max-width: 600px; margin: 0 auto 20px auto; color: #ffffff; /* bianco */ } /* Tema alternativo della stessa classe (versione 2 — più recente nel tuo CSS) */ .contact-description { font-family: "Poppins", sans-serif; font-size: 25px; text-align: center; color: #ffffff; /* bianco */ margin-bottom: 40px; max-width: 600px; margin: 0 auto; } /* Wrapper sezione contact con sfondo chiaro (se lo usi) */ .contact-area { background-color: #0f1115; padding: 60px 0; } /* Titolo sezione (usato come

Contacts

) */ .block_title { font-size: 2.5rem; font-family: "Roboto", sans-serif; font-weight: bold; text-align: center; margin-bottom: 50px; color: #ffffff; /* bianco */ } /* ---------------------------------------------------------- VARIANTI TIPOGRAFICHE (large / medium-spacing) usate nella sezione Contacts ---------------------------------------------------------- */ .large { line-height: normal; font-family: "Oswald", Arial, sans-serif; font-size: 3rem; letter-spacing: 4px; font-weight: bold; margin: 0px; /* testo bianco con gradient bianco->bianco */ background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 80%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; word-wrap: break-word; } .medium-spacing { color: transparent; line-height: normal; font-family: "Oswald", Arial, sans-serif; font-size: 2rem; letter-spacing: 4px; margin: 0px; /* testo giallo con gradient giallo->giallo */ background-image: linear-gradient(to right, #FFD84D, #FFD84D); -webkit-background-clip: text; background-clip: text; display: inline-block; } /* ---------------------------------------------------------- CREDITS / FOOTER (id="regardes") ---------------------------------------------------------- */ #regardes { padding-top: 0px; padding-bottom: 0px; background-color: #0f1115; /* stesso nero del sito */ color: #ffffff; } .small.thanks { /*

*/ font-size: 14px; line-height: 1.6; margin-bottom: 0px; color: #ffffff; } .justify { text-align: center; color: #ffffff; } .w-900 { width: 90%; margin: 0 auto; } .padding-left { padding-left: 20px; } .link { text-decoration: none; color: #FFD84D; } .colorful-letter { color: #FFD84D; font-weight: bold; } /* Dati contatti laterali (sezione Contacts) */ .contact-info h3 { margin-top: 70px; font-family: "Arial", sans-serif; font-size: 50px; color: #ffffff; /* bianco */ margin-bottom: 10px; } .contact-info p { font-family: "Roboto", sans-serif; font-size: 20px; color: #ffffff; /* bianco */ margin: 5px 0; } .contact-info a { font-family: "Roboto", sans-serif; color: #FFD84D; /* accento */ text-decoration: none; font-weight: bold; } /* ---------------------------------------------------------- CONTATTI: icone/link disposti a colonna ---------------------------------------------------------- */ .text-image-container { text-align: center; display: flex; flex-direction: column; gap: 10px; } .text-image-item, .text-image-item1 { display: flex; align-items: center; gap: 20px; font-family: "Roboto", sans-serif; } .text-image-item1 { margin-bottom: 200px; } /* Icone circolari (LinkedIn, GitHub, Gmail, Discord) */ .side-image { display: flex; align-items: center; width: 60px; height: 60px; object-fit: cover; border-radius: 50%; flex-shrink: 0; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.781); cursor: pointer; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .side-image:hover { transform: scale(1.1); } /* Testo a fianco delle icone */ .text-image-item p, .text-image-item1 p { font-size: 20px; margin: 0; color: #ffffff; /* bianco */ font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; } /* ---------------------------------------------------------- ANIMAZIONI (fadeIn + avatar roll-in) usate nell'hero ---------------------------------------------------------- */ @keyframes fadeIn { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes avatar-rollin { 0% { opacity: 0; transform: translateX(-200px) rotate(-90deg); } 100% { opacity: 1; transform: translateX(0) rotate(0deg); } } /* Card principale (hero) */ .card { animation: fadeIn 1s ease-in-out forwards; padding: 50px; border-radius: 10px; width: 100%; max-width: 800px; margin: 50px auto; text-align: center; box-sizing: border-box; } /* Avatar nell'hero */ .avatar-image { width: 80%; border-radius: 50%; animation: avatar-rollin 1s ease-out forwards; margin-top: 20px; margin-bottom: 15px; } /* Titoli/descrizioni nell'hero */ .name { font-size: 2.5em; font-weight: bold; margin-top: 10px; color: #ffffff; /* bianco */ } .subtitle { font-size: 2em; color: #ffffff; /* bianco */ } /* Icone social (contenitore testo) */ .icons { margin-bottom: 20px; } .icons a { color: #ffffff; margin: 0 10px; transition: transform 0.3s ease-in-out; } /* ---------------------------------------------------------- LINK IMMAGINI (sotto card hero) ---------------------------------------------------------- */ .image-links { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 100px; margin-top: 100px; } .image-links a { display: block; width: 20%; max-width: 100%; box-sizing: border-box; transition: transform 0.3s ease-in-out; } .image-links a img { width: 150px; height: auto; transition: transform 0.3s ease-in-out; } .image-links img { width: 100%; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; } .image-links a:hover { transform: scale(1.1); } /* Animazione ingresso delle icone social */ @keyframes bounceIn { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } } .image-links img { animation: bounceIn 1s ease-out forwards; } /* ---------------------------------------------------------- BLOCCO SKILLS (attuale) ---------------------------------------------------------- */ .skills-section { text-align: center; background: rgba(255, 255, 255, 0.06); color: #ffffff; padding: 50px 20px; border-radius: 40px; } /* Griglia responsive delle skill card */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; } /* Card singola skill */ .skill-item { background: #151922; /* pannello scuro */ padding: 20px; border-radius: 40px; text-align: center; transition: transform 0.3s ease-in-out, background 0.3s; border: 1px solid #1f2430; } .skill-item:hover { transform: translateY(-5px); } .skill-icon { height: auto; width: 100px; margin-bottom: 10px; } .skill-item h4 { margin: 10px 0; color: #ffffff; } .skill-item p { font-size: 1.8rem; color: #ffffff; } /* Mobile tweak per griglia */ @media (max-width: 600px) { .skills-grid { grid-template-columns: 1fr; } } .heading-gold{ color:#FFD84D !important; -webkit-text-fill-color:#FFD84D !important; background:none !important; -webkit-background-clip:initial !important; text-shadow:0 0 14px rgba(255,216,77,.25); } /* Divider lines attorno ai titoli */ .block_title::before, .block_title::after, .block_title1::before, .block_title1::after{ background: #fff !important; /* per chi usa background */ border-color: #fff !important; /* per chi usa border */ opacity: 1 !important; } /* (opzionale) dimensioni coerenti delle linee */ .block_title::before, .block_title::after, .block_title1::before, .block_title1::after{ content:""; display:inline-block; width: clamp(40px, 10vw, 140px); height: 2px; margin: 0 .75rem; }