/** * ========================================================================== * MAIN.CSS — Mécena * ========================================================================== * Foglio di stile principale del sito. * Nessun framework, nessuna dipendenza esterna. * * INDICE: * 1. Font (Jost self-hosted) * 2. Reset CSS minimale * 3. Variabili CSS custom (colori, font, spacing) * 4. Tipografia base * 5. Layout e contenitore * 6. Navbar (categorie centrate, extra a destra, lingua verticale) * 7. Sotto-menu Works * 8. Hero Showreel (video calamitato a tutto schermo) * 9. Footer (micro-footer sotto il video) * 10. Utility * 11. Animazioni * 12. Responsive (mobile-first) * ========================================================================== */ /* ========================================================================== 1. FONT — Jost self-hosted (nessuna chiamata esterna a Google Fonts) ========================================================================== Jost è un font geometrico sans-serif, molto vicino a Futura. Variabile: un solo file woff2 copre tutti i pesi (300-700). ========================================================================== */ /* Latin — copre italiano, inglese e la maggior parte delle lingue europee */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; /* Font variabile: dal Light (300) al Bold (700) */ font-display: swap; /* Mostra subito il testo con font di sistema, poi sostituisce con Jost */ src: url('../fonts/jost/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Latin Extended — caratteri accentati extra (é, è, ñ, ecc.) */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/jost/jost-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== 2. RESET CSS — Minimale, solo quello che serve ========================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* ISOLAMENTO NAVBAR: riserva lo spazio per la scrollbar sempre */ scrollbar-gutter: stable; } body { overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } img, video { display: block; max-width: 100%; height: auto; } button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; } /* ========================================================================== 3. VARIABILI CSS — Colori, font, spacing ========================================================================== PERSONALIZZARE: Modificare questi valori per cambiare l'aspetto globale. ========================================================================== */ :root { /* --- Colori principali --- */ --colore-sfondo: #000000; /* Nero — sfondo principale */ --colore-testo: #ffffff; /* Bianco — testo principale */ --colore-muted: #888888; /* Grigio — testi secondari, metadati, footer */ --colore-accento: #ffffff; /* Bianco — hover, bordi, separatori */ --colore-overlay: rgba(0, 0, 0, 0.45); /* Overlay semi-trasparente su immagini/video */ /* --- Tipografia --- */ --font-principale: 'Jost', 'Futura', 'Century Gothic', sans-serif; --font-peso-light: 300; --font-peso-regular: 400; --font-peso-medium: 500; --font-peso-semibold: 600; /* --- Dimensioni testo --- REGOLA: nessun testo nel sito deve essere più piccolo delle voci della navbar (--testo-sm). Su monitor grandi tutto deve essere leggibile. Il vw component scala con la larghezza dello schermo. ------------------------------------------------------------------- */ --testo-xs: clamp(0.78rem, 0.9vw, 0.92rem); /* Label, tag, micro-dati — MIN ~12.5px */ --testo-sm: clamp(0.88rem, 1vw, 1.05rem); /* Link navbar, metadati — MIN ~14px */ --testo-base: clamp(1rem, 1.12vw, 1.18rem); /* Testo corpo — MIN 16px */ --testo-md: clamp(1.1rem, 1.22vw, 1.28rem); /* Titoli medi — MIN ~17.6px */ /* --- Spaziature --- */ --spazio-xs: 0.5rem; --spazio-sm: 1rem; --spazio-md: 2rem; --spazio-lg: 4rem; /* --- Layout --- */ --larghezza-max: 1400px; --padding-contenitore: clamp(1.25rem, 3vw, 3rem); /* --- Navbar --- */ --navbar-altezza: 68px; --navbar-padding-x: clamp(1.5rem, 3vw, 3.5rem); /* Padding laterale fisso vicino ai bordi */ --navbar-sfondo: transparent; /* Trasparente sulla hero, poi opaco allo scroll */ /* --- Animazioni --- */ --transizione: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transizione-lenta: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* --- Z-index (scala ordinata) --- */ --z-sfondo: -1; --z-contenuto: 1; --z-navbar: 100; --z-overlay: 200; --z-modale: 300; } /* ========================================================================== 4. TIPOGRAFIA BASE ========================================================================== */ body { font-family: var(--font-principale); font-weight: var(--font-peso-regular); font-size: var(--testo-base); line-height: 1.6; color: var(--colore-testo); background-color: var(--colore-sfondo); } h1, h2, h3, h4 { font-weight: var(--font-peso-medium); line-height: 1.15; letter-spacing: 0.02em; } /* ========================================================================== 5. LAYOUT E CONTENITORE ========================================================================== */ .contenitore { width: 100%; max-width: var(--larghezza-max); margin-left: auto; margin-right: auto; padding-left: var(--padding-contenitore); padding-right: var(--padding-contenitore); } .contenitore--empty { padding: 4rem 0; } /* Il main non ha padding top perché il video parte sotto la navbar */ .sito__contenuto { min-height: 0; margin-bottom: 0; } /* ========================================================================== 5bis. RESET — Navbar e Footer (HERO = sempre uguali indipendentemente dalla pagina) ========================================================================== Navbar e footer sono HERO: non si interessano del contenuto, non cambiano dimensione o composizione a seconda della pagina. Regola: resetta TUTTI gli elementi dentro navbar e footer con specificity altissima (body-scoped selectors + !important). Indipendentemente da CSS specifico delle pagine, navbar e footer mantengono le loro proprietà. Ereditarietà: gli elementi inside navbar/footer ereditano dalla loro base (font-size: 1rem), non da body. Questo isola completamente gli elementi strutturali. ========================================================================== */ /* Base per tutti gli elementi inside navbar/footer */ body .navbar { font-size: 1rem !important; line-height: 1 !important; font-family: 'Jost', sans-serif !important; color: var(--colore-testo) !important; } body .footer { font-size: clamp(0.72rem, 0.82vw, 0.85rem) !important; line-height: 1.5 !important; font-family: 'Jost', sans-serif !important; color: var(--colore-testo) !important; } /* Footer: z-index basso per permettere il reveal-on-scroll nelle pagine istituzionali e homepage */ body .footer { z-index: 1; } /* Reset wildcard per figli direct/nested — solo tipografia, box-sizing */ body .navbar *, body .footer * { font-size: inherit !important; line-height: inherit !important; font-family: inherit !important; box-sizing: border-box !important; } /* ========================================================================== 6. NAVBAR ========================================================================== Tre zone: - Logo a sinistra (flex-start) - 4 categorie centrate (grid desktop, overlay su mobile) - About/Manifesto/Contact + ITA/ENG a destra (flex-end) La navbar è trasparente e sovrapposta al video hero. Diventa opaca (con blur) dopo lo scroll (classe .navbar--scrolled via JS). ========================================================================== */ .navbar { position: fixed; top: 0; left: 0; width: 100%; height: var(--navbar-altezza); background: var(--navbar-sfondo); z-index: var(--z-navbar); transition: background var(--transizione); /* ISOLAMENTO: Font-size base indipendente da body */ font-size: 1rem !important; line-height: 1; } /* Navbar opaca dopo lo scroll (classe aggiunta da main.js) */ .navbar--scrolled { background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .navbar__inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--larghezza-max); margin: 0 auto; /* Padding ridotto rispetto al contenitore generico: logo e extra non stanno ai bordi, c'è respiro su schermi grandi */ padding: 0 var(--navbar-padding-x); /* ISOLAMENTO: overflow visible per permettere al submenu di uscire */ overflow: visible !important; line-height: 1 !important; } /* --- Logo (sinistra) --- */ .navbar__logo { display: flex; align-items: center; flex-shrink: 0; z-index: calc(var(--z-overlay) + 2); /* ISOLAMENTO: blocca altura e spacing */ height: var(--navbar-altezza) !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; opacity: 1 !important; filter: none !important; } .navbar__logo-text { font-size: 1.5rem !important; font-weight: var(--font-peso-medium) !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--colore-testo) !important; } .navbar__logo img { height: auto !important; width: auto !important; object-fit: contain !important; font-weight: 400 !important; font-style: normal !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } .navbar__logo-img { height: auto !important; width: auto !important; object-fit: contain !important; font-weight: 400 !important; font-style: normal !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* --- Menu centrale (le 4 categorie) — CENTRATO nella navbar --- */ .navbar__menu { display: none; /* Nascosto su mobile, visibile da 1200px */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .navbar__lista { display: flex; align-items: center; gap: clamp(1.5rem, 2.2vw, 2.5rem); /* ISOLAMENTO: line-height e spacing bloccati */ line-height: 1 !important; margin: 0 !important; padding: 0 !important; } .navbar__link { font-size: 0.93rem !important; font-weight: var(--font-peso-regular) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--colore-muted) !important; transition: color var(--transizione); position: relative; white-space: nowrap; /* ISOLAMENTO */ line-height: 1 !important; margin: 0 !important; padding: 0 !important; } .navbar__link:hover, .navbar__link:focus { color: var(--colore-testo); } /* Link attivo — pagina corrente illuminata (solo bianco, senza grassetto) */ .navbar__link.is-active { color: var(--colore-testo) !important; } .navbar__link.is-active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background: var(--colore-testo); } /* Linea sotto il link all'hover */ .navbar__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--colore-testo); transition: width var(--transizione); } .navbar__link:hover::after { width: 100%; } /* --- Area destra (About, Manifesto, Contact + Lingua) --- */ .navbar__extra { display: none; /* Nascosto su mobile, visibile da 1200px */ align-items: center; gap: clamp(1rem, 1.8vw, 2rem); flex-shrink: 0; /* ISOLAMENTO */ height: var(--navbar-altezza) !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; } .navbar__lista--extra { gap: clamp(1rem, 1.5vw, 1.8rem); } /* --- Toggle lingua — ITA sopra ENG, verticale, con lineetta --- */ .navbar__lingua { display: flex; flex-direction: column; /* Impilati verticalmente */ align-items: center; justify-content: center; gap: 0.3rem; margin-left: clamp(0.8rem, 1.2vw, 1.2rem) !important; margin-top: 8px !important; margin-bottom: 0 !important; padding-left: clamp(0.8rem, 1.2vw, 1.2rem) !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 0 !important; border-left: 1px solid rgba(255, 255, 255, 0.12); line-height: 1 !important; height: 50px !important; } .navbar__lingua-link { font-size: 0.85rem !important; font-weight: var(--font-peso-regular) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.25) !important; /* Spento di default */ transition: color var(--transizione); padding: 0 !important; margin: 0 !important; line-height: 1 !important; } /* Lingua attiva: illuminata (solo bianco, senza grassetto, senza linea) */ .navbar__lingua-link.is-active { color: var(--colore-testo) !important; } .navbar__lingua-link:hover { color: var(--colore-testo); } /* Lineetta orizzontale tra ITA e ENG */ .navbar__lingua-sep { display: block; width: 14px; height: 1px; background: rgba(255, 255, 255, 0.2); margin: 0 !important; line-height: 1 !important; } /* --- Hamburger (solo mobile) --- */ .navbar__burger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 26px; height: 28px; z-index: calc(var(--z-overlay) + 2); padding: 0; } .navbar__burger-line { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--colore-testo); transition: transform var(--transizione), opacity var(--transizione); transform-origin: center; } /* Animazione hamburger → X quando il menu è aperto */ .navbar__burger.is-open .navbar__burger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .navbar__burger.is-open .navbar__burger-line:nth-child(2) { opacity: 0; } .navbar__burger.is-open .navbar__burger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* --- Menu mobile overlay (a schermo intero) --- */ /* Overlay sempre nel DOM ma nascosto via clip-path: quando .is-open viene aggiunto, scende con animazione slide-down */ .navbar__mobile-overlay { display: none; /* Il blocco esiste solo su mobile, gestito dal media query */ } /* Alza il contesto di stacking del navbar quando il menu è aperto, e disabilita backdrop-filter (crea un containing block per position:fixed). !important necessario per vincere le regole per-pagina (.page-categoria .navbar ecc.) */ .navbar.is-open { z-index: var(--z-overlay); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .navbar.is-open .navbar__menu, .navbar.is-open .navbar__extra { display: flex; } .navbar.is-open .navbar__menu { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; /* Progressive: iOS dynamic viewport */ background: var(--colore-sfondo); flex-direction: column; justify-content: center; align-items: center; /* Centra tutto orizzontalmente */ text-align: center; padding-bottom: 12vh; /* Spinge le voci verso l'alto per bilanciare la sezione extra in basso */ z-index: var(--z-overlay); transform: none; /* Annulla il translate(-50%,-50%) desktop */ /* Animazione entrata — scende dall'alto */ animation: menuSlideDown 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes menuSlideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .navbar.is-open .navbar__menu .navbar__lista { flex-direction: column; align-items: center; /* Voci centrate */ gap: clamp(1.8rem, 4vh, 3rem); } .navbar.is-open .navbar__menu .navbar__link { /* Più grande del desktop ma proporzionato allo schermo mobile */ font-size: clamp(1.08rem, 3.8vw, 1.55rem); letter-spacing: 0.15em; color: var(--colore-testo); font-weight: var(--font-peso-light); } /* Voci extra in fondo allo schermo */ .navbar.is-open .navbar__extra { position: fixed; bottom: clamp(2.5rem, 6vh, 4.5rem); left: 0; width: 100%; flex-direction: column; align-items: center; gap: var(--spazio-sm); z-index: calc(var(--z-overlay) + 1); /* Animazione leggermente ritardata rispetto al menu */ animation: menuSlideDown 0.45s 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .navbar.is-open .navbar__lista--extra { flex-direction: row; justify-content: center; gap: clamp(1.2rem, 4vw, 2rem); } .navbar.is-open .navbar__lista--extra .navbar__link { font-size: clamp(0.84rem, 2.2vw, 0.96rem); color: var(--colore-muted); letter-spacing: 0.12em; } .navbar.is-open .navbar__lingua { flex-direction: row; margin-left: 0; padding-left: 0; border-left: none; gap: 0.5rem; align-items: center; } .navbar.is-open .navbar__lingua-sep { width: 1px; height: 10px; margin: 0; } /* Social — nascosti di default, visibili solo nel menu mobile */ .navbar__social { display: none; } .navbar.is-open .navbar__social { display: flex; justify-content: center; gap: clamp(1rem, 3vw, 1.5rem); margin-top: var(--spazio-xs); } .navbar__social-link { color: var(--colore-muted); transition: color var(--transizione); } .navbar__social-link:hover { color: var(--colore-testo); } .navbar__social-link svg { width: 18px; height: 18px; display: block; } /* ========================================================================== 7. SOTTO-MENU WORKS ========================================================================== Dropdown che appare all'hover su desktop. Posizionato sotto la voce Works, allineato a sinistra. ========================================================================== */ .navbar__item--has-sub { position: relative; } /* Sotto-menu nascosto di default */ .navbar__submenu { display: none; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.8rem 0; min-width: 200px; z-index: calc(var(--z-navbar) + 2); } /* Mostra sotto-menu all'hover (desktop) */ .navbar__item--has-sub:hover .navbar__submenu { display: block; } /* Area di hover estesa per evitare che il menu sparisca muovendosi verso il sotto-menu */ .navbar__item--has-sub::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 16px; } .navbar__sublink { display: block; padding: 0.5rem 1.2rem; font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--colore-muted); transition: color var(--transizione), padding-left var(--transizione); white-space: nowrap; } .navbar__sublink:hover { color: var(--colore-testo); padding-left: 1.5rem; } /* Sotto-menu nel mobile overlay — si espande inline, centrato */ .navbar.is-open .navbar__submenu { display: block; position: static; transform: none; background: transparent; backdrop-filter: none; border: none; padding: 0.8rem 0 0; min-width: auto; text-align: center; } .navbar.is-open .navbar__sublink { font-size: clamp(0.82rem, 2.1vw, 0.94rem); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.4); padding: 0.35rem 0; transition: color var(--transizione); } .navbar.is-open .navbar__sublink:hover { color: var(--colore-muted); padding-left: 0; /* Annulla lo shift desktop */ } /* ========================================================================== 8. HERO SHOWREEL — Video a tutto schermo ========================================================================== Il video occupa tutto lo spazio disponibile nel viewport (100vh = altezza finestra intera, il navbar è sovrapposto in trasparenza). COMPORTAMENTO: - Il video è sempre centrato - object-fit: cover aggancia il lato più largo: se la finestra è più larga del rapporto del video, si allarga; se è più alta, si alza. - Non si crea MAI vuoto nero ai bordi - Il footer è subito sotto, visibile scrollando poco ========================================================================== */ .hero { position: relative; width: 100%; height: 100vh; /* Occupa esattamente tutta la finestra */ overflow: hidden; /* Nasconde le parti del video che escono */ background: #000; /* Sfondo nero in attesa del video */ } .hero__video { position: absolute; top: 50%; /* Centra verticalmente */ left: 50%; /* Centra orizzontalmente */ transform: translate(-50%, -50%); min-width: 100%; /* Almeno largo quanto il contenitore */ min-height: 100%; /* Almeno alto quanto il contenitore */ width: auto; height: auto; object-fit: cover; /* Copre tutto, taglia il surplus, MAI vuoto */ } /* --- Splashscreen (logo su nero, sfuma) --- */ .splash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; /* Sopra tutto, inclusa la navbar */ background: #000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.8s ease; pointer-events: auto; } .splash.is-fading { opacity: 0; pointer-events: none; } .splash.is-hidden { display: none; } .splash__inner { display: flex; align-items: center; justify-content: center; padding: 40px; } .splash__logo { max-width: min(300px, 60vw); /* Responsive: mai piu largo del 60% dello schermo */ max-height: 120px; height: auto; width: auto; object-fit: contain; opacity: 0; animation: splashFadeIn 1s ease forwards; } @keyframes splashFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ========================================================================== 9. FOOTER — Micro-footer sotto il video ========================================================================== Visibile scrollando appena sotto il video hero. Minimo, quasi invisibile, ma presente con i dati legali obbligatori. ========================================================================== */ .footer { padding: var(--spazio-lg, 2.5rem) var(--padding-contenitore); padding-bottom: var(--spazio-md, 2rem); background: var(--colore-sfondo); margin-left: calc(-1 * var(--padding-contenitore)); margin-right: calc(-1 * var(--padding-contenitore)); width: calc(100% + 2 * var(--padding-contenitore)); box-sizing: border-box; } .footer__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.35rem; } .footer__copy { display: flex; align-items: center; gap: 0.15rem 0.6rem; font-size: inherit !important; color: var(--colore-muted) !important; letter-spacing: 0.05em !important; flex-wrap: wrap; justify-content: center; text-align: center; } .footer__copy-item { white-space: normal; } .footer__copy-item::after { content: '\2022'; margin-left: 0.7rem; opacity: 0.3; } .footer__copy-item:last-child::after { content: ''; margin-left: 0; } .footer__policies { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: inherit !important; color: var(--colore-muted) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .footer__policy-link { color: var(--colore-muted) !important; transition: color var(--transizione); } .footer__policy-link:hover, .footer__policy-link:focus { color: var(--colore-testo); } .footer__sep { opacity: 0.3; } /* Righe strutturate del footer */ .footer__row { display: flex; align-items: center; gap: 0.3rem 0.8rem; font-size: inherit !important; color: var(--colore-muted) !important; letter-spacing: 0.05em !important; flex-wrap: wrap; justify-content: center; text-align: center; } .footer__company { font-weight: var(--font-peso-medium) !important; color: var(--colore-testo) !important; } .footer__sep-dot { opacity: 0.3; } .footer__row--contact { font-size: calc(0.95em) !important; } .footer__contact-link { color: var(--colore-muted) !important; transition: color var(--transizione); } .footer__contact-link:hover, .footer__contact-link:focus { color: var(--colore-testo); } .footer__row--social { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 0.15rem; } .footer__social-link { display: inline-flex; align-items: center; justify-content: center; color: var(--colore-muted); transition: color var(--transizione); } .footer__social-link:hover, .footer__social-link:focus { color: var(--colore-testo); } .footer__social-link svg { fill: currentColor; } .footer__row--bottom { margin-top: 0; padding-top: 0.35rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .footer__row--bottom .footer__social-link { margin-left: 8px; } .footer__bottom-line { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: calc(0.9em); color: var(--colore-muted); letter-spacing: 0.08em; text-transform: uppercase; flex-wrap: wrap; } .footer__copyright-text { opacity: 0.7; } /* ========================================================================== 9b. HOMEPAGE — Footer che si rivela da sotto ========================================================================== Il video hero occupa 100vh. Il footer e' fissato in basso allo schermo. Il contenuto principale (hero) ha un z-index superiore e gli scorre sopra. Scrollando oltre il video, il footer si rivela. Il padding-bottom sul body homepage garantisce lo spazio di scroll necessario perche' il footer sia raggiungibile. ========================================================================== */ /* Il body homepage ha un padding-bottom pari all'altezza del footer, cosi' c'e' lo spazio per scrollare e rivelarlo. */ .home .sito__contenuto { position: relative; z-index: 2; background: var(--colore-sfondo); } /* Footer: statico sotto il contenuto, z-index basso — il contenuto lo copre */ .home .footer { position: static; z-index: 1; } /* ========================================================================== 10. UTILITY ========================================================================== */ /* Classe per nascondere visivamente (accessibilità) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ========================================================================== 11. ANIMAZIONI ========================================================================== */ /* Animazione fade-in-up per elementi che appaiono allo scroll */ .anima-entrata { opacity: 0; transform: translateY(30px); transition: opacity var(--transizione-lenta), transform var(--transizione-lenta); } .anima-entrata.is-visible { opacity: 1; transform: translateY(0); } /* Stagger: il contenitore ha data-stagger, i figli hanno .anima-entrata */ [data-stagger] > .anima-entrata { transition-delay: calc(var(--stagger-i, 0) * 0.08s); } /* Page transitions — fade-in al caricamento, fade-out alla navigazione */ .sito__contenuto { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .sito__contenuto.is-entering { opacity: 0; transform: translateY(12px); } .sito__contenuto.is-leaving { opacity: 0; transform: translateY(-6px); pointer-events: none; } /* Rispetta le preferenze utente per le animazioni ridotte */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .sito__contenuto, .sito__contenuto.is-entering, .sito__contenuto.is-leaving { transition-duration: 0.01ms !important; transform: none !important; } [data-stagger] > .anima-entrata { transition-delay: 0s !important; } } /* ========================================================================== 12. RESPONSIVE — Mobile first ========================================================================== Breakpoint: - Default: mobile (< 768px) - 768px: tablet - 1200px: desktop (navbar completa) - 1600px: desktop grande ========================================================================== */ /* ========================================================================== 13. PAGINA DOCUMENTARY ========================================================================== Sezioni: - doc-header → Category label + frase introduttiva - doc-editorial → Editorial Note a due colonne - doc-featured → Documentario in evidenza (grande, 21:9) - doc-selected → Selected Documentaries (card con immagini, alternati) - doc-method → Dichiarazione di metodo (cerniera narrativa) - doc-other → Other Works (lista tipografica con hover) - doc-collab → Collaborations (call co-produttori) - doc-archive-link → Rimando all'archivio VARIABILI SPECIFICHE (estendono le variabili globali): - Max-width contenuto: 1140px (più stretto della navbar per respiro) - Spaziatura tra sezioni: clamp(6rem, 10vw, 10rem) ========================================================================== */ /* --- Contenitore interno Documentary (più stretto) --- */ .doc-header .contenitore, .doc-editorial .contenitore, .doc-featured, .doc-method .contenitore, .doc-other .contenitore, .doc-collab .contenitore, .doc-archive-link .contenitore { max-width: 1140px; } /* Selected Documentaries — colonna più raccolta rispetto al Featured. La differenza di ~120px crea una gerarchia visiva percepibile. */ .doc-selected .contenitore { max-width: 960px; } /* --- 13.1 HEADER — Category / Documentary --- */ .doc-header { padding-top: calc(var(--navbar-altezza) + clamp(4rem, 8vw, 8rem)); padding-bottom: clamp(2rem, 4vw, 4rem); } .doc-header__label { display: block; font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.15em; text-transform: uppercase; color: var(--colore-muted); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .doc-header__intro { font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: var(--font-peso-light); line-height: 1.7; color: var(--colore-testo); max-width: 480px; opacity: 0.85; } /* --- 13.2 EDITORIAL NOTE --- */ .doc-editorial { padding-bottom: clamp(4rem, 8vw, 8rem); } .doc-editorial__label { display: block; font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.15em; text-transform: uppercase; color: var(--colore-muted); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .doc-editorial__columns { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); } .doc-editorial__main p { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: var(--font-peso-light); line-height: 1.35; color: var(--colore-testo); } .doc-editorial__aside p { font-size: clamp(0.85rem, 1vw, 0.95rem); font-weight: var(--font-peso-regular); line-height: 1.65; color: var(--colore-muted); } /* --- 13.3 FEATURED DOCUMENTARY --- */ .doc-featured { padding-bottom: clamp(4rem, 8vw, 8rem); max-width: 1140px; margin: 0 auto; } .doc-featured__label { display: block; font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.15em; text-transform: uppercase; color: var(--colore-muted); margin-bottom: clamp(1.5rem, 2vw, 2rem); } .doc-featured__layout { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); } /* --- Contenitore media (immagine + video sovrapposto) --- */ .doc-featured__media { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: #111; cursor: pointer; } /* Poster (immagine statica) */ .doc-featured__poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1; } .doc-featured__poster.is-hidden { opacity: 0; } /* Video trailer — nascosto finché non parte */ .doc-featured__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; transition: opacity 0.5s ease; } .doc-featured__video.is-playing { opacity: 1; z-index: 2; } /* Leggero scale su hover del media */ .doc-featured__media:hover .doc-featured__poster { transform: scale(1.03); } /* Gradient overlay in basso per leggibilità del testo */ .doc-featured__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: clamp(1.5rem, 3vw, 3rem); background: linear-gradient( to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100% ); z-index: 3; pointer-events: none; } .doc-featured__title { font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: var(--font-peso-medium); letter-spacing: 0.02em; line-height: 1.1; margin-bottom: 0.5rem; } .doc-featured__desc { font-size: clamp(0.85rem, 1.1vw, 1rem); font-weight: var(--font-peso-light); color: rgba(255, 255, 255, 0.75); max-width: 500px; } /* Scheda progetto affiancata */ .doc-featured__info { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.2vw, 1rem); } .doc-featured__info-label { font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.12em; text-transform: uppercase; color: var(--colore-muted); } .doc-featured__info-title { font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: var(--font-peso-medium); line-height: 1.2; } .doc-featured__info-desc { font-size: clamp(0.85rem, 1vw, 0.95rem); font-weight: var(--font-peso-light); line-height: 1.65; color: rgba(255, 255, 255, 0.7); } /* Linea separatrice sottilissima tra sinossi e meta */ .doc-featured__divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 0; } /* Meta (formato, anno, regia) — griglia a due colonne allineata */ .doc-featured__meta { display: grid; grid-template-columns: auto 1fr; row-gap: 0.35rem; column-gap: 0; margin: 0; padding: 0; } .doc-featured__meta-item { display: contents; /* ogni item contribuisce con dt + dd alla griglia */ } .doc-featured__meta-label { font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--colore-muted); padding-right: 1.2rem; align-self: baseline; white-space: nowrap; } .doc-featured__meta-value { font-size: clamp(0.85rem, 1vw, 0.95rem); font-weight: var(--font-peso-regular); color: var(--colore-testo); align-self: baseline; margin: 0; } /* Tag — usato ovunque nella pagina Documentary */ .doc-featured__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .doc-tag { display: inline-block; font-size: var(--testo-xs); font-weight: var(--font-peso-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--colore-muted); border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.25em 0.7em; white-space: nowrap; } .doc-tag--sm { font-size: var(--testo-xs); padding: 0.2em 0.6em; } /* Azioni (pulsanti) */ .doc-featured__actions { display: flex; flex-wrap: wrap; gap: clamp(0.8rem, 1.5vw, 1.2rem); padding-top: 0.5rem; } /* Pulsanti Documentary — stile sobrio, editoriale */ .doc-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--testo-xs); font-weight: var(--font-peso-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--colore-testo); transition: color var(--transizione), opacity var(--transizione); position: relative; } .doc-btn:hover { opacity: 0.7; } .doc-btn--sm { font-size: var(--testo-xs); } .doc-btn--xs { font-size: var(--testo-xs); } .doc-btn__icon { font-size: 0.65em; opacity: 0.8; } .doc-btn__arrow { font-size: 1.1em; transition: transform var(--transizione); } .doc-btn:hover .doc-btn__arrow { transform: translate(2px, -2px); } .doc-btn--project { color: var(--colore-muted); } .doc-btn--project:hover { color: var(--colore-testo); opacity: 1; } /* --- 13.4 SELECTED DOCUMENTARIES (Card con immagine) --- */ .doc-selected { padding-bottom: clamp(4rem, 8vw, 8rem); } .doc-selected__header { margin-bottom: clamp(3rem, 5vw, 5rem); } .doc-selected__label { display: block; font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.15em; text-transform: uppercase; color: var(--colore-muted); margin-bottom: clamp(0.5rem, 1vw, 0.8rem); } .doc-selected__desc { font-size: clamp(0.85rem, 1vw, 0.95rem); font-weight: var(--font-peso-regular); color: var(--colore-muted); max-width: 500px; } /* Card singola — più compatta senza sinossi */ .doc-card { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.6rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); margin-bottom: clamp(2.5rem, 4vw, 4rem); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .doc-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* Contenitore media — 3:2 fisso, senza bordi. Poster e video sono position:absolute e coprono l'intera area con cover. Funziona sia su mobile (colonna singola) che su desktop (2/3 del layout). */ .doc-card__media { position: relative; overflow: hidden; background: #111; cursor: pointer; aspect-ratio: 3 / 2; /* Il contenitore detta la proporzione */ width: 100%; } /* Link trasparente sopra il media */ .doc-card__media-link { position: absolute; inset: 0; z-index: 3; } /* Poster — riempie tutto il contenitore 3:2, nessun bordo */ .doc-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1; } .doc-card__poster.is-hidden { opacity: 0; } /* Video trailer — stessa area del poster, viene sopra con z-index */ .doc-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; transition: opacity 0.5s ease; } .doc-card__video.is-playing { opacity: 1; z-index: 2; } .doc-card__media:hover .doc-card__poster { transform: scale(1.03); } /* Contenuto testo */ .doc-card__content { display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; } .doc-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .doc-card__year { font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.1em; text-transform: uppercase; color: var(--colore-muted); } .doc-card__title { font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: var(--font-peso-medium); line-height: 1.2; letter-spacing: 0.01em; } .doc-card__title a { transition: opacity var(--transizione); } .doc-card__title a:hover { opacity: 0.7; } .doc-card__director { font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--colore-muted); } .doc-card__actions { display: flex; flex-wrap: wrap; gap: clamp(0.8rem, 1.5vw, 1.2rem); margin-top: 0.5rem; } /* --- 13.5 METHOD --- */ .doc-method { padding: clamp(5rem, 10vw, 10rem) 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .doc-method__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .doc-method__label { display: block; font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.2em; text-transform: uppercase; color: var(--colore-muted); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .doc-method__text { max-width: 700px; margin: 0; padding: 0; border: none; } .doc-method__text p { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: var(--font-peso-light); line-height: 1.5; color: rgba(255, 255, 255, 0.85); } /* --- 13.6 OTHER WORKS (Lista tipografica) --- */ .doc-other { padding: clamp(4rem, 8vw, 8rem) 0; } .doc-other__label { display: block; font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.15em; text-transform: uppercase; color: var(--colore-muted); margin-bottom: clamp(2rem, 4vw, 3rem); } /* Singola riga lista */ .doc-list-item { position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: clamp(1.2rem, 2vw, 1.8rem) 0; transition: background var(--transizione); } .doc-list-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Contenitore frame di sfondo — nascosto di default, appare su hover */ .doc-list-item__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 0; pointer-events: none; transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity, transform; transform-origin: center; } /* Classe aggiunta da JS su mouseenter */ .doc-list-item__bg.is-visible { opacity: 0.4; } /* Ogni frame è sovrapposto — solo quello .is-active è visibile. Transizione breve (0.18s) per crossfade fluido senza ritardo percepibile. */ .doc-list-item__bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.7); opacity: 0; transition: opacity 0.18s ease; will-change: opacity; } /* Frame attivo (gestito da JS al mousemove X) */ .doc-list-item__bg-img.is-active { opacity: 0.15; } /* Contenuto testuale — sempre sopra l'immagine */ .doc-list-item__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.5rem; } /* Riga principale: titolo + anno */ .doc-list-item__row-main { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .doc-list-item__title { font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: var(--font-peso-medium); line-height: 1.2; letter-spacing: 0.01em; transition: opacity var(--transizione); } .doc-list-item__title a { transition: opacity var(--transizione); } .doc-list-item:hover .doc-list-item__title a { opacity: 0.9; } .doc-list-item__year { font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.1em; text-transform: uppercase; color: var(--colore-muted); white-space: nowrap; flex-shrink: 0; } /* Riga secondaria: tag + regista + azioni */ .doc-list-item__row-meta { display: flex; flex-direction: column; gap: 0.5rem; } .doc-list-item__left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .doc-list-item__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .doc-list-item__director { font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--colore-muted); } .doc-list-item__actions { display: flex; flex-wrap: wrap; gap: clamp(0.8rem, 1.5vw, 1.2rem); } /* --- 13.7 COLLABORATIONS --- */ .doc-collab { padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .doc-collab__label { display: block; font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.15em; text-transform: uppercase; color: var(--colore-muted); margin-bottom: clamp(1.5rem, 3vw, 2rem); } .doc-collab__layout { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2rem); } .doc-collab__layout.doc-collab--reversed { flex-direction: row-reverse; } .doc-collab__text { font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: var(--font-peso-light); line-height: 1.6; color: rgba(255, 255, 255, 0.75); max-width: 600px; } .doc-collab__cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: clamp(0.8rem, 0.9vw, 0.9rem); font-weight: var(--font-peso-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--colore-testo); transition: opacity var(--transizione); } .doc-collab__cta:hover { opacity: 0.7; } .doc-collab__cta .doc-btn__arrow { transition: transform var(--transizione); } .doc-collab__cta:hover .doc-btn__arrow { transform: translate(2px, -2px); } /* --- 13.8 ARCHIVE LINK --- */ .doc-archive-link { padding: clamp(3rem, 5vw, 5rem) 0 clamp(5rem, 8vw, 8rem); } .doc-archive-link__link { display: inline-flex; align-items: center; gap: 0.8rem; font-size: clamp(0.85rem, 1vw, 1rem); font-weight: var(--font-peso-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--colore-muted); transition: color var(--transizione); } .doc-archive-link__link:hover { color: var(--colore-testo); } .doc-archive-link__arrow { font-size: 1.3em; transition: transform var(--transizione); } .doc-archive-link__link:hover .doc-archive-link__arrow { transform: translateX(5px); } /* ========================================================================== END PAGINA DOCUMENTARY ========================================================================== */ /* --- DESKTOP (1200px+) — Navbar completa visibile --- */ @media (min-width: 1200px) { .navbar__inner { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: clamp(2rem, 4vw, 5rem); max-width: none; width: 100%; } .navbar__logo { grid-column: 1; justify-self: start; } .navbar__menu { grid-column: 2; position: static; top: auto; left: auto; transform: none; justify-self: center; } .navbar__extra { grid-column: 3; justify-self: end; } /* Mostra menu centrale e area destra */ .navbar__menu { display: flex; } .navbar__extra { display: flex; } /* Nascondi hamburger */ .navbar__burger { display: none; } } /* ========================================================================== 14. RESPONSIVE — Pagina Documentary ========================================================================== Breakpoint: - 768px: Tablet — Editorial Note a due colonne, card orizzontali - 1024px: Desktop — Featured layout orizzontale, lista hover attivo ========================================================================== */ /* --- TABLET (768px+) — Documentary --- */ @media (min-width: 768px) { /* Editorial Note: due colonne 60/40 */ .doc-editorial__columns { flex-direction: row; gap: clamp(2rem, 5vw, 4rem); } .doc-editorial__main { flex: 3; } .doc-editorial__aside { flex: 2; } /* Card Selected: layout orizzontale 2/3 + 1/3. align-items: flex-start — il media detta l'altezza con il suo 3:2, il testo si posiziona in alto senza essere costretto ad allungarsi. */ .doc-card { flex-direction: row; align-items: flex-start; } .doc-card__media { flex: 2; /* ~2/3 della larghezza */ min-width: 0; /* aspect-ratio 3:2 già definito nel CSS base — viene rispettato */ } .doc-card__content { flex: 1; /* ~1/3 della larghezza */ min-width: 0; padding: clamp(0.8rem, 1.5vw, 1.2rem) 0 clamp(0.8rem, 1.5vw, 1.2rem) clamp(1.2rem, 2vw, 2rem); } /* Card reverse: immagine a destra, padding invertito */ .doc-card--reverse { flex-direction: row-reverse; } .doc-card--reverse .doc-card__content { padding: clamp(0.8rem, 1.5vw, 1.2rem) clamp(1.2rem, 2vw, 2rem) clamp(0.8rem, 1.5vw, 1.2rem) 0; } /* Other Works: meta row orizzontale */ .doc-list-item__row-meta { flex-direction: row; align-items: center; justify-content: space-between; } /* Collaborations: layout orizzontale */ .doc-collab__layout { flex-direction: row; align-items: flex-end; justify-content: space-between; } } /* --- DESKTOP (1024px+) — Documentary con Featured affiancato --- */ @media (min-width: 1024px) { /* Featured: layout orizzontale (media + info affiancati) */ .doc-featured__layout { flex-direction: row; align-items: stretch; } .doc-featured__media { flex: 3; /* ~60% */ min-width: 0; aspect-ratio: auto; min-height: 360px; } .doc-featured__info { flex: 2; /* ~40% */ padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem); justify-content: center; } /* Other Works: padding orizzontale su desktop */ .doc-list-item { padding-left: clamp(0.8rem, 1.5vw, 1.5rem); padding-right: clamp(0.8rem, 1.5vw, 1.5rem); } } /* --- Disabilita hover video e frame su touch device --- */ @media (hover: none) { .doc-list-item__bg { display: none; } .doc-featured__video, .doc-card__video { display: none; } } /* ========================================================================== 15. PAGINA OPERA — Scroll orizzontale con snap ========================================================================== Struttura: - .opera → contenitore full-viewport - .opera__track → flex row, overflow-x: auto, scroll-snap - .opera__slide → ogni sezione, 100vw × altezza disponibile - .opera__nav → barra fissa in basso con punti navigazione ========================================================================== */ /* Variabili specifiche per la pagina opera */ .opera { --opera-nav-h: 56px; /* Altezza barra navigazione in basso */ /* Area utile per il contenuto: viewport meno navbar e dots (entrambi overlay) */ --opera-slide-h: calc(100vh - var(--navbar-altezza) - var(--opera-nav-h)); position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; background: var(--colore-sfondo); } /* Track — scroll-snap nativo. Il JS gestisce solo i dot e la protezione anti-salto per l'inerzia trackpad Mac. */ .opera__track { display: flex; width: 100%; height: 100%; /* Occupa tutta l'altezza di .opera */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .opera__track::-webkit-scrollbar { display: none; } /* Singola slide — occupa l'intera viewport, la nav dots e overlay sopra */ .opera__slide { flex: 0 0 100vw; width: 100vw; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; /* Impedisce di saltare slide — il fix chiave */ overflow: hidden; position: relative; } /* Contenuto interno slide. NON usa align-items:center (bug con overflow scroll). Ogni slide gestisce il proprio centraggio internamente. Padding-top: compensa la navbar trasparente (overlay sopra). Padding-bottom: compensa la barra dots (overlay sotto). */ .opera__slide-inner { width: 100%; height: 100%; padding-top: var(--navbar-altezza); padding-bottom: var(--opera-nav-h); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } .opera__slide-inner::-webkit-scrollbar { display: none; } /* --- 15.0b NAVBAR TRASPARENTE SULLA PAGINA OPERA --- Lo sfondo di tutte le slide e nero, quindi la navbar puo restare sempre trasparente. Il contenitore .opera parte da top:0 e occupa l'intera viewport. La navbar e i dots sono overlay sopra le slide. */ body.single-opera .navbar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: transparent !important; } /* Dots nav: completamente trasparente (la slide sotto traspare) */ .opera .opera__nav { background: transparent; } /* --- 15.1 BARRA NAVIGAZIONE IN BASSO --- */ .opera__nav { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--opera-nav-h); display: flex; align-items: flex-start; /* Pallini nella parte alta della nav */ padding: 10px var(--padding-contenitore) 0; /* Spazio sotto per le label */ z-index: 10; gap: clamp(1rem, 2vw, 2rem); } .opera__nav-inner { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; /* Prende tutto lo spazio a destra del tasto Archivio */ min-width: 0; } /* Linea orizzontale che attraversa TUTTO lo schermo, passando nel centro esatto dei pallini. Va da bordo a bordo (left:0 width:100% sulla nav). */ .opera__nav-line { position: absolute; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.1); top: 50%; transform: translateY(-50%); z-index: 0; /* Sfuma la linea ai bordi per eleganza */ mask-image: linear-gradient(to right, transparent 0%, white 3%, white 97%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, white 3%, white 97%, transparent 100%); } /* Contenitore punti — sopra la linea */ .opera__nav-dots { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; z-index: 1; } /* Singolo punto — i pallini sono SEMPRE equidistanti. La label è posizionata assolutamente sotto, non influenza il layout. */ .opera__nav-dot { display: flex; flex-direction: column; align-items: center; background: none; border: none; cursor: pointer; padding: 4px 2px; position: relative; } /* Pallino spento — piccolo (5px), discreto, la linea lo attraversa. Nessun box-shadow: la linea passa ATTRAVERSO il pallino, visibile dietro. */ .opera__nav-dot-point { display: block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.12); transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 2; } /* Pallino attivo — più grande, bianco pieno, con anello nero per bucare la linea */ .opera__nav-dot.is-active .opera__nav-dot-point { width: 9px; height: 9px; background: var(--colore-testo); border-color: var(--colore-testo); box-shadow: 0 0 0 3px var(--colore-sfondo); } .opera__nav-dot:hover .opera__nav-dot-point { width: 7px; height: 7px; background: rgba(255, 255, 255, 0.45); border-color: rgba(255, 255, 255, 0.35); } /* Label del punto — POSIZIONATA ASSOLUTAMENTE sotto il pallino. Non influenza il layout dei pallini = equidistanti SEMPRE. Il gap tra linea e label è controllato da top. */ .opera__nav-dot-label { position: absolute; top: calc(100% + 3px); /* Staccata dal pallino, ma non troppo in basso */ left: 50%; transform: translateX(-50%); font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.2); white-space: nowrap; transition: color 0.3s ease, opacity 0.3s ease; opacity: 0; pointer-events: none; } .opera__nav-dot.is-active .opera__nav-dot-label { color: rgba(255, 255, 255, 0.7); } /* Modalità label — gestite da JS in base a overlap detection. I pallini NON si muovono mai. Solo la visibilità delle label cambia. */ /* Tutte visibili */ .opera__nav--labels-all .opera__nav-dot-label { opacity: 1; } /* Solo label attiva visibile */ .opera__nav--labels-active .opera__nav-dot-label { opacity: 0; } .opera__nav--labels-active .opera__nav-dot.is-active .opera__nav-dot-label { opacity: 1; } /* Tasto ritorno archivio — a sinistra, alzato rispetto ai pallini per evitare sovrapposizione con le label delle slide. */ .opera__nav-back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--colore-muted); transition: color var(--transizione); flex-shrink: 0; white-space: nowrap; margin-top: -6px; /* Alza sopra la linea dei pallini */ } .opera__nav-back:hover { color: var(--colore-testo); } .opera__nav-back-arrow { font-size: 1.2em; transition: transform var(--transizione); } .opera__nav-back:hover .opera__nav-back-arrow { transform: translateX(-3px); } /* Spacer destro — stessa larghezza del tasto Archivio per bilanciare */ .opera__nav-spacer { flex-shrink: 0; width: 100px; /* Approssima la larghezza di "← ARCHIVIO" */ } /* --- 15.2 SLIDE: COVER --- */ /* Mobile: colonna verticale (locandina sopra, testo sotto con scroll). Desktop: locandina a sinistra, testo + scheda tecnica a destra. */ .slide-cover { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1.5rem, 3vw, 3rem); gap: clamp(1.5rem, 3vw, 2.5rem); } /* Con locandina → layout orizzontale su desktop */ .slide-cover--with-poster { flex-direction: column; } /* Locandina */ .slide-cover__poster { flex-shrink: 0; max-height: 60vh; display: flex; align-items: center; } .slide-cover__poster-img { max-height: 55vh; max-width: min(280px, 40vw); width: auto; height: auto; object-fit: contain; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); } /* Contenuto testo */ .slide-cover__content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: clamp(0.5rem, 1vw, 0.8rem); max-width: 500px; overflow-y: auto; max-height: 80vh; scrollbar-width: none; } .slide-cover__content::-webkit-scrollbar { display: none; } /* Se non c'è locandina → centrare */ .slide-cover:not(.slide-cover--with-poster) .slide-cover__content { align-items: center; text-align: center; max-width: 700px; } .slide-cover__title { font-size: clamp(1.8rem, 3.5vw, 3.2rem); font-weight: var(--font-peso-medium); letter-spacing: 0.02em; line-height: 1.05; } .slide-cover__title-img { max-width: min(350px, 50vw); height: auto; } .slide-cover__logline { font-size: clamp(0.88rem, 1.1vw, 1.05rem); font-weight: var(--font-peso-light); line-height: 1.55; color: rgba(255, 255, 255, 0.65); } .slide-cover__meta { font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.1em; text-transform: uppercase; color: var(--colore-muted); } .slide-cover__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .slide-cover__tag { display: inline-block; font-size: var(--testo-xs); font-weight: var(--font-peso-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--colore-muted); border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.25em 0.7em; white-space: nowrap; } .slide-cover__director { font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--colore-muted); } /* Scheda tecnica rimossa dalla cover — ora sta nella slide Sinossi */ /* --- 15.3 SLIDE: VIDEO / PLAYER --- * * Variabili di spacing (area utile = viewport meno navbar e nav bar): * --sv-pad-top: spazio minimo dal bordo superiore (rispetta navbar) * --sv-pad-bottom: spazio minimo dal bordo inferiore (rispetta nav dots) * --sv-pad-x: spazio laterale (ridotto su mobile, generoso su desktop) * --sv-max-w: larghezza massima del content (limita su schermi enormi) * ------------------------------------------------------------------- */ .slide-video { --sv-pad-top: clamp(0.75rem, 1.8vh, 1.8rem); --sv-pad-bottom: clamp(0.75rem, 1.5vh, 1.5rem); --sv-pad-x: clamp(1rem, 3vw, 2.5rem); --sv-max-w: min(80vw, 1280px); position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Padding asimmetrico leggero: centro ottico ~45/55 */ padding: var(--sv-pad-top) var(--sv-pad-x) calc(var(--sv-pad-bottom) + 3vh); box-sizing: border-box; overflow: hidden; } /* ---- Background hero ---- Copre l'intera slide con object-fit:cover. Croppa dinamicamente qualsiasi aspect ratio (16:9, 2.39:1, ecc.). */ .slide-video__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.25; filter: blur(4px); z-index: 0; pointer-events: none; } /* ---- Slide con background: estende il bg edge-to-edge (dietro navbar + dots) ---- Margin negativo annulla il padding di .opera__slide-inner in entrambe le direzioni, l'altezza compensa. Il padding-top/bottom proprio riaggiunge lo spazio per il contenuto. Risultato: il bg copre l'intera viewport, il contenuto resta confinato. */ .slide-video--has-bg { margin-top: calc(-1 * var(--navbar-altezza)); margin-bottom: calc(-1 * var(--opera-nav-h)); padding-top: calc(var(--navbar-altezza) + var(--sv-pad-top)); padding-bottom: calc(var(--opera-nav-h) + var(--sv-pad-bottom) + 3vh); height: calc(100% + var(--navbar-altezza) + var(--opera-nav-h)); } /* ---- Contenuto centrato ---- Centro ottico (40/60): margin-top:auto spinge dal top-padding, margin-bottom:auto con peso 1.5x spinge piu dal basso. Risultato: il blocco sta leggermente sopra il centro geometrico. */ .slide-video__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--sv-max-w); gap: clamp(0.4rem, 0.8vw, 0.65rem); } /* Label slide — visibile solo su mobile */ .slide-video__label { font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.15em; text-transform: uppercase; color: var(--colore-muted); } @media (min-width: 768px) { .slide-video__label { display: none; } } /* ---- Gruppo player: wrapper che contiene top-row + player ---- La larghezza e guidata dal player (aspect-ratio 16:9 + max-width 900px). La top-row prende width:100% del gruppo, quindi si allinea automaticamente ai bordi del video a qualsiasi dimensione di finestra. */ /* Il player-group contiene top-row + player. La larghezza e ~80% della slide (stessa logica del vecchio fullwidth). Il player determina l'aspect-ratio. */ .slide-video__player-group { display: flex; flex-direction: column; align-items: stretch; width: min(100%, 80vw); max-width: 1280px; max-height: 100%; gap: clamp(0.3rem, 0.6vw, 0.5rem); } /* ---- Riga superiore: titolo sx | icone dx ---- Desktop (>=1200px): vincolata al player-group (allineata ai bordi del video). Mobile (<1200px): si svincola e si allarga quasi ai margini dello schermo. */ .slide-video__top-row { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; } /* La top-row ha una min-width per non rimpicciolirsi troppo su video stretti (9:16, 4:3). Quando il player-group e piu stretto della min-width, la top-row sborda e overflow:visible la rende visibile. */ .slide-video__player-group { overflow: visible; } .slide-video__top-row { min-width: min(480px, calc(100vw - 2 * var(--sv-pad-x))); align-self: center; flex-shrink: 0; } /* Mobile (<1200px, hamburger): top-row occupa quasi tutta la larghezza schermo */ @media (max-width: 1199px) { .slide-video__top-row { width: calc(100vw - 2 * var(--sv-pad-x)); } } /* Titolo PNG — proporzionato al player e alle icone */ .slide-video__title-side { flex: 1; min-width: 0; display: flex; align-items: center; } .slide-video__title-img { display: block; width: clamp(140px, 50%, 450px); height: auto; max-height: clamp(60px, 8vw, 100px); object-fit: contain; object-position: left bottom; } /* Titolo testuale (non immagine) */ .slide-video__title-text { display: block; font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: var(--font-peso-semibold, 600); letter-spacing: 0.04em; color: var(--colore-testo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; } /* Icone distribuzione — a destra, con label sopra */ .slide-video__icons-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3em; } .slide-video__icons-label { font-size: var(--testo-xs); font-weight: var(--font-peso-regular); letter-spacing: 0.08em; color: var(--colore-muted); text-transform: uppercase; } .slide-video__icons { display: flex; align-items: center; gap: clamp(0.4rem, 0.8vw, 0.7rem); } .slide-video__icon-link { display: inline-flex; color: var(--colore-testo); opacity: 0.55; transition: opacity 0.3s ease, transform 0.2s ease; text-decoration: none; } .slide-video__icon-link:hover { opacity: 1; transform: scale(1.1); } .slide-video__icon { width: clamp(28px, 4vw, 42px); height: clamp(28px, 4vw, 42px); } .slide-video__icon svg { width: 100%; height: 100%; } .slide-video__icon img { width: 100%; height: 100%; object-fit: contain; } /* ---- Player dentro la slide ---- width:100% del gruppo. L'aspect-ratio (default 16:9, aggiornato dal JS dopo loadedmetadata) determina l'altezza. max-height limita i video alti. */ .slide-video .opera-player { width: 100%; max-width: none; max-height: calc(var(--opera-slide-h, 70vh) - 4rem); } /* ---- Responsive: mobile verticale ---- Margini laterali ridotti, il player sfrutta piu larghezza */ @media (max-width: 600px) { .slide-video { --sv-pad-x: 0.75rem; --sv-max-w: 100%; } .slide-video__title-img { width: clamp(120px, 50%, 300px); max-height: 60px; } .slide-video__icon { width: 26px; height: 26px; } } /* ---- Responsive: tablet ---- */ @media (min-width: 601px) and (max-width: 1024px) { .slide-video { --sv-pad-x: 1.25rem; --sv-max-w: 90vw; } } /* ---- Schermi enormi (>2000px): limita il player, non farlo gigantesco ---- */ @media (min-width: 2000px) { .slide-video { --sv-max-w: 1400px; } } /* Player custom — aspect-ratio determinato dal contenuto. Per video nativi (.mp4): il tag