/* ================================ UFOlab - Common Styles Base Header, Footer e Struttura ================================ */ /* --- VARIABILI CSS BASE (Possono essere sovrascritte in ogni pagina) --- */ :root { /* Colori Base */ --text-main: #ffffff; --text-muted: #8b9bb4; --accent-primary: #00d9ff; --accent-secondary: #7000ff; --bg-color: #000000; --glass-bg: rgba(10, 15, 25, 0.88); --border-glow: rgba(0, 217, 255, 0.3); /* Font Base (Possono essere sovrascritti) */ --font-heading: 'Syncopate', sans-serif; --font-body: 'Source Sans 3', sans-serif; --font-ui: 'Orbitron', sans-serif; /* Dimensioni */ --title-size: clamp(2.5rem, 6vw, 4.5rem); --subtitle-size: 1.3rem; --text-size: 1.1rem; } /* ================================ 🎨 TEMI PER PAGINA Aggiungi queste classi al per cambiare stile! ================================ */ /* 💻 TEMA WEB DESIGN - Moderno e Tech */ body.theme-web { --accent-primary: #00d9ff; --accent-secondary: #7000ff; --font-heading: 'Orbitron', sans-serif; --font-body: 'Inter', sans-serif; background: radial-gradient(ellipse at top, #0a1520 0%, #000814 100%); } /* 🌱 TEMA SERVER - Verde Matrix */ body.theme-server { --accent-primary: #00ff88; --accent-secondary: #00d9ff; --font-heading: 'Rajdhani', sans-serif; --font-body: 'Roboto Mono', monospace; background: radial-gradient(ellipse at top, #0a1f15 0%, #001408 100%); } /* 🔮 TEMA 3D - Viola Creativo */ body.theme-3d { --accent-primary: #a855f7; --accent-secondary: #ec4899; --font-heading: 'Audiowide', cursive; --font-body: 'Work Sans', sans-serif; background: radial-gradient(ellipse at top, #15091f 0%, #000000 100%); } /* 🔥 TEMA LED - Caldo Brillante */ body.theme-led { --accent-primary: #ffaa00; --accent-secondary: #ff0055; --font-heading: 'Righteous', cursive; --font-body: 'Poppins', sans-serif; background: radial-gradient(ellipse at top, #1f150a 0%, #000000 100%); } /* 💡 TEMA SOLUTIONS - Audace */ body.theme-solutions { --accent-primary: #ff0055; --accent-secondary: #ffaa00; --font-heading: 'Monoton', cursive; --font-body: 'Space Grotesk', sans-serif; background: radial-gradient(ellipse at top, #1f0a15 0%, #000000 100%); } /* ⚪ TEMA OPEN - Minimalista */ body.theme-open { --accent-primary: #ffffff; --accent-secondary: #00d9ff; --font-heading: 'Space Mono', monospace; --font-body: 'Inter', sans-serif; background: radial-gradient(ellipse at top, #0f1215 0%, #000000 100%); } /* 📘 TEMA ABOUT - Professionale */ body.theme-about { --accent-primary: #00d9ff; --accent-secondary: #7000ff; --font-heading: 'Syne', sans-serif; --font-body: 'Source Sans 3', sans-serif; background: radial-gradient(ellipse at top, #0a0f1a 0%, #000000 100%); } /* 📞 TEMA CONTACT - Accogliente */ body.theme-contact { --accent-primary: #00d9ff; --accent-secondary: #00ff88; --font-heading: 'Nunito', sans-serif; --font-body: 'Open Sans', sans-serif; background: radial-gradient(ellipse at top, #0a1520 0%, #000000 100%); } /* --- RESET & BASE --- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text-main); overflow-x: hidden; min-height: 100vh; position: relative; background: radial-gradient(ellipse at top, #0a0f1a 0%, #000000 100%); } /* Grain Texture Overlay */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; opacity: 0.6; } /* --- HEADER NAVIGATION --- */ .header-nav { position: fixed; top: 0; left: 0; width: 100%; padding: 25px 40px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 100%); backdrop-filter: blur(15px); z-index: 100; border-bottom: 1px solid rgba(255, 255, 255, 0.05); animation: slideDown 0.8s ease-out; } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .logo { font-family: var(--font-ui); font-size: 1.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: var(--accent-primary); text-decoration: none; position: relative; text-shadow: 0 0 20px var(--accent-primary); transition: all 0.3s ease; display: flex; align-items: center; } .logo:hover { text-shadow: 0 0 30px var(--accent-primary); letter-spacing: 5px; } /* 🚀 LOGO SVG CON EFFETTO GLOW SPAZIALE */ .logo-img { height: 35px; width: auto; transition: all 0.3s ease; animation: logoGlow 3s ease-in-out infinite; } @keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.5)) drop-shadow(0 0 8px rgba(0, 217, 255, 0.3)); } 50% { filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 217, 255, 0.5)) drop-shadow(0 0 25px rgba(112, 0, 255, 0.3)); } } .logo:hover .logo-img { animation: logoHoverGlow 0.6s ease-in-out infinite; transform: scale(1.05); } @keyframes logoHoverGlow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(0, 217, 255, 1)) drop-shadow(0 0 20px rgba(0, 217, 255, 0.6)) drop-shadow(0 0 30px rgba(112, 0, 255, 0.4)); } 50% { filter: drop-shadow(0 0 15px rgba(0, 217, 255, 1)) drop-shadow(0 0 30px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 45px rgba(112, 0, 255, 0.6)); } } /* --- HAMBURGER MENU --- */ .hamburger { width: 50px; height: 50px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; z-index: 101; position: relative; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 50%; transition: all 0.4s ease; background: rgba(255, 255, 255, 0.02); } .hamburger:hover { border-color: var(--accent-primary); background: rgba(0, 217, 255, 0.05); transform: rotate(90deg); } .hamburger span { display: block; width: 24px; height: 2px; background: var(--text-main); transition: all 0.3s ease; border-radius: 2px; } .hamburger:hover span { background: var(--accent-primary); box-shadow: 0 0 10px var(--accent-primary); } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); } /* --- SIDE MENU --- */ .side-menu { position: fixed; top: 0; right: 0; width: 380px; max-width: 90vw; height: 100vh; background: var(--glass-bg); backdrop-filter: blur(30px); border-left: 1px solid var(--border-glow); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5); z-index: 90; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); padding: 120px 50px 50px; display: flex; flex-direction: column; } .side-menu.active { transform: translateX(0); } .menu-list { list-style: none; display: flex; flex-direction: column; gap: 25px; } .menu-list li { transform: translateX(30px); opacity: 0; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .side-menu.active .menu-list li { transform: translateX(0); opacity: 1; } .side-menu.active .menu-list li:nth-child(1) { transition-delay: 0.1s; } .side-menu.active .menu-list li:nth-child(2) { transition-delay: 0.15s; } .side-menu.active .menu-list li:nth-child(3) { transition-delay: 0.2s; } .side-menu.active .menu-list li:nth-child(4) { transition-delay: 0.25s; } .side-menu.active .menu-list li:nth-child(5) { transition-delay: 0.3s; } .side-menu.active .menu-list li:nth-child(6) { transition-delay: 0.35s; } .side-menu.active .menu-list li:nth-child(7) { transition-delay: 0.4s; } .side-menu.active .menu-list li:nth-child(8) { transition-delay: 0.45s; } .menu-link { color: var(--text-main); text-decoration: none; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; transition: all 0.3s ease; display: block; padding: 12px 0; position: relative; font-family: var(--font-ui); } .menu-link::before { content: ''; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 0; height: 2px; background: var(--accent-primary); transition: width 0.3s ease; box-shadow: 0 0 10px var(--accent-primary); } .menu-link:hover { color: var(--accent-primary); text-shadow: 0 0 20px var(--accent-primary); padding-left: 20px; } .menu-link:hover::before { width: 15px; } .menu-link.active { color: var(--accent-primary); } .close-btn { margin-top: auto; font-size: 4rem; line-height: 0.5; color: rgba(255, 255, 255, 0.3); cursor: pointer; text-align: right; transition: all 0.3s ease; font-weight: 100; } .close-btn:hover { color: var(--accent-primary); text-shadow: 0 0 20px var(--accent-primary); transform: rotate(90deg); } /* --- FOOTER --- */ .main-footer { position: relative; text-align: center; padding: 40px 20px; margin-top: 80px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .copyright { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-ui); } .footer-links { margin-top: 15px; } .footer-link { color: rgba(255, 255, 255, 0.4); text-decoration: none; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; font-family: var(--font-ui); margin: 0 15px; } .footer-link:hover { color: var(--accent-primary); } /* --- MAIN CONTENT --- */ .main-content { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 150px 40px 80px; } /* --- CLASSI UTILITY PER TITOLI (Usano le variabili) --- */ .page-title { font-family: var(--font-heading); font-size: var(--title-size); font-weight: 700; text-transform: uppercase; letter-spacing: 8px; margin-bottom: 30px; background: linear-gradient(135deg, #ffffff 0%, var(--accent-primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 30px var(--accent-primary)); } .page-subtitle { font-size: var(--subtitle-size); color: var(--text-muted); margin-bottom: 60px; font-weight: 300; line-height: 1.6; } .section-title { font-family: var(--font-ui); font-size: 1.8rem; color: var(--accent-primary); margin-bottom: 25px; text-transform: uppercase; letter-spacing: 3px; } .section-text { font-size: var(--text-size); line-height: 1.8; color: var(--text-muted); margin-bottom: 20px; } /* --- RESPONSIVE --- */ @media (max-width: 768px) { .header-nav { padding: 20px 25px; } .logo { font-size: 1.3rem; letter-spacing: 2px; } .logo-img { height: 30px; } .hamburger { width: 45px; height: 45px; } .side-menu { width: 100%; max-width: 100vw; padding: 100px 35px 35px; } .menu-link { font-size: 1.1rem; } .main-content { padding: 120px 25px 60px; } .page-title { letter-spacing: 4px; } }