/* ============================================================ BASE.CSS — Stili globali condivisi da tutte le pagine ============================================================ */ /* ==== VARIABILI CSS (design tokens) ==== Tutte le variabili di colore, font e transizione del sito. Modificare qui per cambiare il tema a livello globale. --bg-abyss: colore di sfondo principale (più scuro). --accent-cyan: colore primario per link, glow, bordi attivi. --font-display: font titoli e body (Outfit). --font-code: font monospazio per code/terminale (Fira Code). --transition: curva di animazione standard per hover/reveal. */ :root { --bg-abyss: #060a1a; --bg-deep: #0c1232; --bg-mid: #111842; --bg-surface: #1a2055; --bg-alt: #0b1e38; --bg-alt-deep: #0e2545; --accent-cyan: #00d4ff; --accent-green: #00ff88; --accent-purple: #7b68ee; --accent-orange: #ff6b35; --text-primary: #e8eeff; --text-secondary: #8892b0; --text-muted: #4a5280; --glass-bg: rgba(17, 24, 66, 0.6); --glass-border: rgba(0, 212, 255, 0.15); --font-display: 'Outfit', sans-serif; --font-code: 'Fira Code', monospace; --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ==== TEMA: DIM (light-tech — blueish tech, no bianco, no corporate) ==== Attivato da JS con data-theme="light" sull'elemento . I colori rimangono scuri (tema "dim"), mai bianchi: preserva l'estetica tech. */ html[data-theme="light"] { --bg-abyss: #152540; --bg-deep: #1c3258; --bg-mid: #243e6e; --bg-surface: #2c4a82; --bg-alt: #182f50; --bg-alt-deep: #142845; --text-primary: #e2f0ff; --text-secondary: #90b8d8; --text-muted: #5a8aaa; --glass-bg: rgba(24, 47, 80, 0.88); --glass-border: rgba(0, 212, 255, 0.35); } /* ==== RESET BASE ==== box-sizing: border-box su tutto per evitare overflow da padding/border. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ==== HTML ==== scroll-behavior: smooth — animazione nativa per anchor link (#section). scrollbar: sottile con colori del tema. */ html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent-cyan) var(--bg-abyss); } /* ==== BODY ==== overflow-x: hidden — previene scroll orizzontale causato da elementi assoluti. -webkit-font-smoothing: antialiased — testo più nitido su macOS/iOS. */ body { font-family: var(--font-display); background: var(--bg-abyss); color: var(--text-primary); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ==== SELEZIONE TESTO ==== */ ::selection { background: var(--accent-cyan); color: var(--bg-abyss); } /* ==== GRIGLIA DI SFONDO ==== Griglia decorativa sottilissima (opacity 0.02) applicata come pseudo-elemento fisso. Non intercetta eventi mouse (pointer-events: none). Modificare background-size per cambiare densità della griglia. */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(0, 212, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.02) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none; z-index: 0; } /* ==== FLOATING CODE SNIPPETS ==== Snippet di codice animati che fluttuano tra le sezioni (gestiti da JS). .snippet-gap: spazio verticale tra le sezioni dove compaiono i frammenti. clamp(100px, 12vw, 200px): altezza reattiva al viewport. */ .code-rain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; } .snippet-gap { position: relative; height: clamp(20px, 2vw, 40px); z-index: auto; } .code-snippet { position: absolute; font-family: var(--font-code); font-size: 14px; color: var(--accent-cyan); white-space: pre; opacity: 0; text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); pointer-events: none; } /* ==== CURSOR BYTE TRAIL ==== Caratteri binari/hex che appaiono intorno al cursore (gestiti da JS). .fade: classe aggiunta da JS per l'animazione di uscita (opacity 0 + salita). */ .cursor-byte { position: fixed; font-family: var(--font-code); font-size: 12px; color: var(--accent-cyan); pointer-events: none; z-index: 9999; text-shadow: 0 0 6px rgba(0, 212, 255, 0.4); transition: opacity 1.5s ease-out, transform 1.5s ease-out; } .cursor-byte.fade { opacity: 0 !important; transform: translateY(-25px) scale(0.4); } /* ==== NAV ==== Navbar fissa in cima. Sfondo semi-trasparente con blur. .scrolled: aggiunta da JS allo scroll — aumenta opacità e aggiunge bordo inferiore. Modificare padding per cambiare altezza navbar. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1.2rem 2.5rem; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); background: transparent; backdrop-filter: none; } .nav.scrolled { background: rgba(6, 10, 26, 0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); padding: 0.8rem 2.5rem; } .nav-logo { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; flex-shrink: 0; } .nav-logo img { height: clamp(30px, 4vw, 44px); width: clamp(30px, 4vw, 44px); object-fit: cover; border-radius: 50%; filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.45)); transition: all 0.3s ease; } .nav-logo:hover img { filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.65)); transform: scale(1.05); } .nav-logo-text { font-family: var(--font-code); font-size: clamp(0.7rem, 1vw, 0.9rem); font-weight: 700; color: var(--accent-cyan); letter-spacing: 1px; white-space: nowrap; } .nav-logo-text .bracket { color: var(--accent-green); } .nav-logo-text .dot { color: var(--accent-purple); } .nav-links { display: flex; list-style: none; gap: 0.4rem; align-items: center; } .nav-links a { font-family: var(--font-code); font-size: 0.92rem; color: var(--text-secondary); text-decoration: none; padding: 0.6rem 1.1rem; border-radius: 6px; transition: var(--transition); font-weight: 500; white-space: nowrap; } .nav-links a:hover { color: var(--accent-cyan); background: rgba(0, 212, 255, 0.05); } .lang-switcher { display: flex; gap: 2px; margin-left: 1.5rem; padding: 3px; background: rgba(0, 212, 255, 0.05); border-radius: 8px; border: 1px solid var(--glass-border); } .lang-btn { font-family: var(--font-code); font-size: 0.75rem; padding: 5px 12px; background: none; border: none; color: var(--text-muted); cursor: pointer; border-radius: 5px; transition: var(--transition); text-transform: uppercase; font-weight: 600; } .lang-btn.active { background: var(--accent-cyan); color: var(--bg-abyss); } .lang-btn:hover:not(.active) { color: var(--text-primary); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--accent-cyan); margin: 6px 0; border-radius: 2px; } /* ==== THEME TOGGLE BUTTON ==== Bottone "DIM / DARK" nella navbar per alternare il tema. Usa font-code per coerenza con l'estetica terminale. */ .theme-toggle { font-family: var(--font-code); font-size: 0.72rem; font-weight: 600; padding: 5px 12px; background: none; border: 1px solid var(--glass-border); border-radius: 6px; color: var(--text-muted); cursor: pointer; transition: var(--transition); margin-left: 0.6rem; white-space: nowrap; letter-spacing: 1px; } .theme-toggle:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); background: rgba(0, 212, 255, 0.05); } /* ==== BUTTONS ==== .btn: base condivisa — font-code, padding generoso, border-radius arrotondato. .btn-primary: gradiente blu scuro con glow — pulsante principale CTA. .btn-outline: sfondo semi-trasparente con bordo cyan — pulsante secondario. */ .btn { font-family: var(--font-code); font-size: 0.88rem; font-weight: 600; padding: 14px 34px; border-radius: 10px; text-decoration: none; transition: all 0.3s ease; cursor: pointer; } .btn-primary { background: linear-gradient(135deg, #1a4a7a, #0c2d5a, #1a3a6a); color: var(--accent-cyan); border: 1px solid rgba(0, 212, 255, 0.2); box-shadow: 0 4px 25px rgba(0, 50, 120, 0.4); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 35px rgba(0, 100, 200, 0.35); border-color: rgba(0, 212, 255, 0.4); background: linear-gradient(135deg, #1e5a8a, #0e3568, #1e4a7a); } .btn-outline { background: rgba(10, 20, 50, 0.6); color: var(--accent-cyan); border: 1px solid rgba(0, 212, 255, 0.25); } .btn-outline:hover { background: rgba(0, 212, 255, 0.08); border-color: var(--accent-cyan); transform: translateY(-2px); } /* ==== SECTIONS ==== .section: padding ridotto da 8rem a 5.5rem — avvicina le sezioni visivamente. Per tornare al padding originale: cambiare 5.5rem in 8rem. .section-inner: max-width 1200px centrato — larghezza massima del contenuto. .section-label: etichetta soprascritta small-caps con riga decorativa. .section-title: titolo principale con dimensione responsive via clamp(). .section-desc: sottotitolo grigio con max-width per leggibilità ottimale. */ .section { position: relative; padding: 5.5rem 2rem; scroll-margin-top: 120px; } .section-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 10; } .section-label { font-family: var(--font-code); font-size: 0.75rem; color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 4px; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 12px; } .section-label::before { content: ''; width: 30px; height: 1px; background: var(--accent-cyan); } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; margin-bottom: 1.5rem; line-height: 1.15; } .section-desc { color: var(--text-secondary); font-size: 1.05rem; max-width: 600px; margin-bottom: 3.5rem; } /* ==== FOOTER ==== Bordo superiore sottile, layout flex orizzontale. max-width: 1200px per allineamento con le sezioni. */ .footer { border-top: 1px solid var(--glass-border); padding: 2.5rem 2rem; display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; } .footer-text { font-family: var(--font-code); font-size: 0.75rem; color: var(--text-muted); } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { font-family: var(--font-code); font-size: 0.75rem; color: var(--text-muted); text-decoration: none; } .footer-links a:hover { color: var(--accent-cyan); } /* ==== SCROLL REVEAL ==== Animazioni di entrata gestite da JS (IntersectionObserver). Senza JS (.js non presente sul body): gli elementi sono sempre visibili (opacity:1). Con JS: gli elementi partono nascosti (opacity:0) e diventano visibili quando entrano nel viewport (classe .visible aggiunta da JS). .reveal: entrata dal basso. .reveal-left: da sinistra. .reveal-right: da destra. .stagger: applica delay progressivo ai figli (0.1s, 0.2s, 0.3s, 0.4s). */ .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .js .reveal-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .js .reveal-right { opacity: 0; transform: translateX(50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .js .reveal.visible, .js .reveal-left.visible, .js .reveal-right.visible { opacity: 1; transform: none; } .js .stagger > * { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .js .stagger.visible > * { opacity: 1; transform: none; } .js .stagger.visible > *:nth-child(1) { transition-delay: .1s; } .js .stagger.visible > *:nth-child(2) { transition-delay: .2s; } .js .stagger.visible > *:nth-child(3) { transition-delay: .3s; } .js .stagger.visible > *:nth-child(4) { transition-delay: .4s; } /* ==== KEYFRAMES ==== menuSlide: usata per il menu mobile — entra dall'alto con fade-in. */ @keyframes menuSlide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ==== PRE-HIDE PAGINA IN ARRIVO DA TRANSIZIONE ==== Attivato dall'inline script in prima che il body venga renderizzato. Evita il flash della pagina tra l'uscita (scan-line giù) e l'entrata (scan-line su). Il JS in base.js rimuove data-pt e aggiunge pt-active prima di animare. */ html[data-pt="1"] #page-transition { opacity: 1; pointer-events: all; } /* ==== PAGE TRANSITION OVERLAY ==== Overlay full-screen con scan-line cyan per navigazioni tech. Attivato da JS via data-transition sui link. Default nascosto (opacity:0). .pt-active: overlay visibile. .pt-exit: scan-line top→bottom (uscita). .pt-enter: scan-line bottom→top (entrata sulla nuova pagina). */ #page-transition { position: fixed; inset: 0; background: var(--bg-abyss); z-index: 99999; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; } #page-transition.pt-active { opacity: 1; pointer-events: all; } #page-transition.pt-out { opacity: 0; transition: opacity 0.35s ease; } .pt-scanline { position: absolute; left: 0; right: 0; height: 2px; top: -2px; background: var(--accent-cyan); box-shadow: 0 0 24px var(--accent-cyan), 0 0 60px rgba(0,212,255,0.5), 0 0 120px rgba(0,212,255,0.2); } #page-transition.pt-exit .pt-scanline { animation: pt-down 0.55s cubic-bezier(0.4,0,0.6,1) forwards; } #page-transition.pt-enter .pt-scanline { top: calc(100% + 2px); animation: pt-up 0.45s cubic-bezier(0.4,0,0.6,1) forwards; } @keyframes pt-down { 0% { top: 0; } 100% { top: 100%; } } @keyframes pt-up { 0% { top: 100%; } 100% { top: 0; } } /* ==== RESPONSIVE — NAV desktop intermedio (≤1600px) ==== Nav compresso: riduce padding e font prima di passare all'hamburger. Soglia alzata a 1600px per coprire MacBook 15"/16" con nav a più voci. */ @media (max-width: 1600px) { .nav { padding: 1.2rem 1.5rem; } .nav.scrolled { padding: 0.8rem 1.5rem; } .nav-links { gap: 0.15rem; } .nav-links a { font-size: 0.82rem; padding: 0.5rem 0.7rem; } .lang-btn { padding: 5px 8px; font-size: 0.7rem; } } /* ==== RESPONSIVE — NAV (mobile ≤1280px) ==== Nasconde i link orizzontali, mostra il bottone hamburger. Breakpoint alzato a 1280px: il nav ha più voci (Tech Stack, Blog, Lang, Theme). .open: classe aggiunta da JS al click — menu a tendina verticale con blur. */ @media (max-width: 1280px) { .nav-links { display: none; } .nav-toggle { display: block; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(6, 10, 26, 0.97); backdrop-filter: blur(20px); padding: 1rem; border-bottom: 1px solid var(--glass-border); animation: menuSlide 0.4s ease both; } .lang-switcher { margin-left: 0; margin-top: .5rem; } } /* ==== RESPONSIVE — SECTIONS (mobile ≤768px) ==== .section: padding ridotto a 3.5rem su mobile per massimizzare lo spazio verticale. Modificare il valore per aumentare/diminuire il respiro tra le sezioni su mobile. */ @media (max-width: 768px) { .section { padding: 3.5rem 1.2rem; } }