/* ╔══════════════════════════════════════════════════════════════╗ ║ styles-upgrade.css v2 — antonioadinolfi.it ║ ║ Upgrade chirurgico: si sovrappone senza rompere nulla. ║ ║ Compatibile con dark-first glassmorphism esistente. ║ ║ Aggiungere come ULTIMO nella . ║ ╚══════════════════════════════════════════════════════════════╝ */ /* ───────────────────────────────────────────────────────────── 0. FONT — Outfit come display font per i titoli hero/card. Inter rimane per il corpo — non viene toccato. ───────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap'); /* ───────────────────────────────────────────────────────────── 1. VARIABILI AGGIUNTIVE (non sovrascrivono quelle esistenti) ───────────────────────────────────────────────────────────── */ :root { --up-cyan: #38bdf8; --up-violet: #8b5cf6; --up-ease: cubic-bezier(.22,.68,0,1.2); --up-ease-std: cubic-bezier(.4,0,.2,1); } /* ───────────────────────────────────────────────────────────── 2. RENDERING GLOBALE ───────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } *, *::before, *::after { box-sizing: border-box; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ───────────────────────────────────────────────────────────── 3. TITOLI HERO — solo font display, nessun colore forzato ───────────────────────────────────────────────────────────── */ .hero-v3-copy h1, .hero-v4-copy h1, .hero-clean-copy h1, .hero-content h1, .profile-feature-card h2, .didattica-maincard h2 { font-family: 'Outfit', 'Space Grotesk', sans-serif; letter-spacing: -0.05em; } /* ───────────────────────────────────────────────────────────── 4. TAB-BTN — ripple al click, senza toccare .active ───────────────────────────────────────────────────────────── */ .tab-btn { position: relative; overflow: hidden; } .tab-btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(56,189,248,.18) 0%, transparent 70%); opacity: 0; transition: opacity .25s var(--up-ease-std); pointer-events: none; border-radius: inherit; } .tab-btn:active::after { opacity: 1; } /* ───────────────────────────────────────────────────────────── 5. INFO CARD — hover lift + glow accent ───────────────────────────────────────────────────────────── */ .info-card { transition: transform 0.28s var(--up-ease), box-shadow 0.28s var(--up-ease-std), border-color 0.22s !important; } .info-card:hover { transform: translateY(-5px) !important; box-shadow: 0 32px 72px rgba(2,6,23,.44), 0 0 0 1px rgba(56,189,248,.15) inset, 0 0 28px rgba(56,189,248,.08) !important; border-color: rgba(56,189,248,.30) !important; } .info-card:hover h3 i { background: linear-gradient(135deg, rgba(56,189,248,.28), rgba(139,92,246,.22)) !important; box-shadow: 0 12px 28px rgba(56,189,248,.20) !important; transition: background .25s, box-shadow .25s; } /* ───────────────────────────────────────────────────────────── 6. CLASS CARD — lift fluido ───────────────────────────────────────────────────────────── */ .class-card { transition: transform 0.30s var(--up-ease), box-shadow 0.30s var(--up-ease-std), border-color 0.22s !important; } .class-card:hover { transform: translateY(-7px) scale(1.008) !important; box-shadow: 0 28px 52px rgba(2,6,23,.40), 0 0 0 1px rgba(255,255,255,.12) inset !important; } /* ───────────────────────────────────────────────────────────── 7. NEWS ITEM — bordo sinistro accent + hover ───────────────────────────────────────────────────────────── */ .news-item { border-left: 2.5px solid rgba(56,189,248,.28) !important; padding-left: 18px !important; transition: transform 0.24s var(--up-ease), border-color 0.22s, background 0.22s !important; } .news-item:hover { border-left-color: rgba(56,189,248,.75) !important; } .news-date { letter-spacing: .06em; } /* ───────────────────────────────────────────────────────────── 8. BOTTONI HERO — transizioni più morbide ───────────────────────────────────────────────────────────── */ .hero-btn, .hero-v3-btn, .hero-v3-btn-primary, .hero-v3-btn-secondary, .btn-stem, .btn-pubblicazioni { transition: transform 0.22s var(--up-ease), box-shadow 0.22s var(--up-ease-std), filter 0.18s, border-color 0.18s !important; will-change: transform; } .hero-v3-btn-primary:hover { box-shadow: 0 22px 48px rgba(37,99,235,.36), 0 0 0 3px rgba(56,189,248,.20) !important; filter: brightness(1.06); } .hero-v3-btn-secondary:hover { border-color: rgba(191,219,254,.45) !important; } /* ───────────────────────────────────────────────────────────── 9. DIDATTICA PILL — hover glow ───────────────────────────────────────────────────────────── */ .didattica-pill { transition: background .2s, border-color .2s, transform .2s var(--up-ease) !important; } .didattica-pill:hover { background: rgba(255,255,255,.11) !important; border-color: rgba(56,189,248,.22) !important; transform: translateY(-1px); } /* ───────────────────────────────────────────────────────────── 10. WEEKLY GRID — barra accent in cima ───────────────────────────────────────────────────────────── */ .weekly-grid-wrap { position: relative; } .weekly-grid-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--up-cyan), var(--up-violet)); border-radius: 20px 20px 0 0; pointer-events: none; z-index: 1; } /* ───────────────────────────────────────────────────────────── 11. SUBMENU SIDEBAR — pill accent laterale all'hover ───────────────────────────────────────────────────────────── */ .submenu-list a { position: relative; transition: background 0.18s var(--up-ease-std), color 0.18s, padding-left 0.18s var(--up-ease) !important; } .submenu-list a::before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 2.5px; background: linear-gradient(180deg, var(--up-cyan), var(--up-violet)); border-radius: 2px; opacity: 0; transition: opacity .18s var(--up-ease-std); } .submenu-list a:hover::before, .submenu-list a:focus-visible::before { opacity: 1; } /* ───────────────────────────────────────────────────────────── 12. SCROLLBAR — sottile, palette cyan ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: rgba(2,6,23,.60); } ::-webkit-scrollbar-thumb { background: rgba(56,189,248,.30); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.55); } * { scrollbar-width: thin; scrollbar-color: rgba(56,189,248,.30) rgba(2,6,23,.60); } /* ───────────────────────────────────────────────────────────── 13. FOCUS RING — accessibile ───────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid rgba(56,189,248,.70) !important; outline-offset: 3px !important; border-radius: 4px !important; } /* ───────────────────────────────────────────────────────────── 14. ANIMAZIONI ENTRATA — fade-up leggero ───────────────────────────────────────────────────────────── */ @keyframes up-fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .info-card, .class-card, .mini-info-card, .profile-feature-card, .news-item { animation: up-fadeIn .45s cubic-bezier(.22,.68,0,1.1) both; } .info-grid > .info-card:nth-child(1), .didattica-grid > .class-card:nth-child(1) { animation-delay: .04s; } .info-grid > .info-card:nth-child(2), .didattica-grid > .class-card:nth-child(2) { animation-delay: .10s; } .info-grid > .info-card:nth-child(3), .didattica-grid > .class-card:nth-child(3) { animation-delay: .16s; } .info-grid > .info-card:nth-child(4), .didattica-grid > .class-card:nth-child(4) { animation-delay: .22s; } .info-grid > .info-card:nth-child(5), .didattica-grid > .class-card:nth-child(5) { animation-delay: .28s; } /* ───────────────────────────────────────────────────────────── 15. LIGHT THEME — override mirati solo dove serve ───────────────────────────────────────────────────────────── */ body.light-theme .info-card { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(241,247,255,.88)) !important; border-color: rgba(11,59,117,.10) !important; color: #0f172a !important; } body.light-theme .info-card h3 { color: #0f172a !important; } body.light-theme .info-card p { color: #334155 !important; } body.light-theme .info-card h3 i { background: linear-gradient(135deg, rgba(11,59,117,.14), rgba(37,99,235,.12)) !important; color: #1d4ed8 !important; } body.light-theme .info-card:hover { box-shadow: 0 24px 56px rgba(11,59,117,.12), 0 0 0 1px rgba(11,59,117,.12) inset !important; border-color: rgba(37,99,235,.28) !important; } body.light-theme .news-item { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.80)) !important; border-color: rgba(11,59,117,.14) !important; border-left-color: rgba(11,59,117,.35) !important; } body.light-theme .news-item:hover { border-left-color: rgba(37,99,235,.70) !important; } body.light-theme .news-date { color: #1d4ed8 !important; } body.light-theme .news-title { color: #0f172a !important; } body.light-theme .weekly-grid-wrap::before { background: linear-gradient(90deg, #0b3b75, #2563eb); } body.light-theme .submenu-list a::before { background: linear-gradient(180deg, #0b3b75, #2563eb); } /* ───────────────────────────────────────────────────────────── 16. MOBILE & REDUCED MOTION ───────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .info-card, .class-card, .mini-info-card, .profile-feature-card { animation: none; } .class-card:hover { transform: translateY(-3px) !important; } .news-item { padding-left: 14px !important; border-left-width: 2px !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ───────────────────────────────────────────────────────────── FIX HERO — nome e foto non tagliati Il .hero-v4-inner usa grid 1fr+280px che va fuori viewport. Il .hero-clean-inner in site-polish usa gap troppo stretto. ───────────────────────────────────────────────────────────── */ /* Hero V4 (quello attivo nella screenshot) */ .hero-v4-inner { grid-template-columns: 1fr min(280px, 32vw) !important; gap: clamp(16px, 3vw, 40px) !important; width: min(1180px, calc(100% - 32px)) !important; align-items: center !important; } .hero-v4-copy { min-width: 0 !important; overflow: hidden !important; } .hero-v4-copy h1 { word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; } .hero-v4-photo-wrap { width: 100% !important; /* segue la colonna della grid */ max-width: 280px !important; justify-self: end !important; } /* Hero V3 (foto card laterale) */ .hero-v3-inner { width: min(1180px, calc(100% - 32px)) !important; gap: clamp(20px, 4vw, 60px) !important; align-items: center !important; } .hero-v3-copy { min-width: 0 !important; overflow: hidden !important; } .hero-v3-copy h1 { word-break: break-word !important; overflow-wrap: break-word !important; } /* Hero generico (clean-inner da site-polish) */ .hero-clean-inner { width: min(1180px, calc(100% - 32px)) !important; min-width: 0 !important; } /* Breakpoint — sotto 900px passa a colonna singola */ @media (max-width: 900px) { .hero-v4-inner { grid-template-columns: 1fr !important; gap: 20px !important; } .hero-v4-photo-wrap { justify-self: start !important; width: min(100%, 260px) !important; max-width: none !important; height: 150px !important; } .hero-v3-inner { grid-template-columns: 1fr !important; } } @media (max-width: 600px) { .hero-v4-copy h1 { font-size: clamp(1.7rem, 8vw, 2.5rem) !important; } .hero-v4-photo-wrap { display: none !important; /* su mobile stretto, nasconde la foto per dare spazio al testo */ } } /* ───────────────────────────────────────────────────────────── FIX HERO V4 — foto e nome corretti (fix preciso da HTML) Struttura reale: .hero-v4-inner > .hero-v4-copy + .hero-v4-photo-wrap > img.hero-v4-photo Problema: site-polish usa aspect-ratio:16/9 → foto schiacciata orizzontale + esce viewport ───────────────────────────────────────────────────────────── */ .hero-clean.hero-v4 { overflow: visible !important; /* non taglia la foto */ } .hero-v4-inner { grid-template-columns: 1fr auto !important; gap: clamp(20px, 4vw, 48px) !important; width: min(1140px, calc(100% - 40px)) !important; align-items: center !important; overflow: visible !important; } .hero-v4-copy { min-width: 0 !important; } .hero-v4-copy h1 { word-break: break-word !important; overflow-wrap: break-word !important; } /* Foto: ritratto verticale, dimensioni fisse ragionevoli */ .hero-v4-photo-wrap { width: 180px !important; height: 220px !important; aspect-ratio: unset !important; /* annulla il 16/9 di site-polish */ flex-shrink: 0 !important; justify-self: end !important; border-radius: 20px !important; overflow: hidden !important; } .hero-v4-photo { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; /* inquadra la testa */ background: rgba(2,6,23,.35) !important; } /* Breakpoint 900px — una colonna */ @media (max-width: 900px) { .hero-v4-inner { grid-template-columns: 1fr !important; gap: 18px !important; } .hero-v4-photo-wrap { width: min(140px, 38vw) !important; height: 170px !important; justify-self: start !important; } } /* Breakpoint 480px — foto più piccola */ @media (max-width: 480px) { .hero-v4-photo-wrap { width: 110px !important; height: 135px !important; } .hero-v4-copy h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } } /* ───────────────────────────────────────────────────────────── HERO BANNER — immagine di sfondo fullwidth Richiede: /immagini/banner_hero.jpg nel repo ───────────────────────────────────────────────────────────── */ body .hero-clean.hero-banner-img, body.dark-theme .hero-clean.hero-banner-img, body.light-theme .hero-clean.hero-banner-img { position: relative !important; min-height: unset !important; padding: 0 !important; overflow: hidden !important; background: url('./immagini/banner_hero.jpg') center center / cover no-repeat !important; border-bottom: 1px solid rgba(148,163,184,.18) !important; min-height: 320px !important; padding: 52px 0 !important; } /* overlay scuro a sinistra per leggibilità del testo */ .hero-banner-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(2,6,23,.82) 0%, rgba(2,6,23,.55) 42%, rgba(2,6,23,.10) 68%, transparent 100% ); pointer-events: none; z-index: 1; } .hero-banner-content { position: relative; z-index: 2; width: min(1140px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 56px; } .hero-banner-content .hero-v4-label { margin-bottom: 10px; color: #93c5fd; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .hero-banner-content h1 { margin: 0 0 14px !important; color: #ffffff !important; font-family: 'Outfit', 'Space Grotesk', sans-serif; font-size: clamp(2.2rem, 4vw, 3.6rem) !important; font-weight: 800 !important; letter-spacing: -0.04em !important; line-height: 1.05 !important; text-shadow: 0 2px 24px rgba(2,6,23,.40); } .hero-banner-content p { margin: 0 !important; max-width: 480px; color: rgba(226,232,240,.90) !important; font-size: clamp(1rem, 1.4vw, 1.18rem) !important; line-height: 1.6 !important; } body.light-theme .hero-banner-overlay { background: linear-gradient( 90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.50) 42%, rgba(255,255,255,.10) 68%, transparent 100% ); } body.light-theme .hero-banner-content h1 { color: #0f172a !important; } body.light-theme .hero-banner-content p { color: #334155 !important; } body.light-theme .hero-banner-content .hero-v4-label { color: #1d4ed8; } /* mobile */ @media (max-width: 768px) { .hero-banner-content { padding: 36px 0 40px; } .hero-banner-content h1 { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; } .hero-banner-overlay { background: linear-gradient( 180deg, rgba(2,6,23,.75) 0%, rgba(2,6,23,.55) 60%, rgba(2,6,23,.20) 100% ); } } /* Testo chiaro nel riquadro iniziale del glossario */ .glossario-hero .kicker, .glossario-hero .kicker i { color: rgba(255, 255, 255, 0.82) !important; } .glossario-hero h2 { color: #ffffff !important; } .glossario-hero p { color: rgba(255, 255, 255, 0.78) !important; } /* Glossario: rimuove lo sfondo scuro */ .glossario-hero { background: #ffffff !important; background-image: none !important; border: 1px solid #e2e8f0 !important; box-shadow: none !important; } .glossario-hero .kicker { color: #3b82f6 !important; } .glossario-hero h2 { color: #0d1b2e !important; } .glossario-hero p { color: #475569 !important; }