:root { --header-h: 92px; /* altezza header fisso — aggiornare se cambia il padding */ --subnav-h: 40px; /* altezza striscia subnav mobile */ --cb-color-bg: #ffffff; --cb-color-surface: #ffffff; --cb-color-text: #212529; --cb-color-text-muted: #6b6b6b; --cb-color-primary: #2c2c2c; --cb-color-accent: #c9a96e; /* decorazioni, bordi, sfondi */ --cb-color-accent-text: #8c6e3c; /* testo oro su sfondo chiaro — 4.76:1 su #fff */ --cb-color-border: #e8e6e3; --cb-font-display: 'Playfair Display', Georgia, serif; --cb-font-body: 'Cormorant Garamond', 'Times New Roman', serif; --cb-font-body-times: 'Libre Baskerville', 'Times New Roman', serif; --cb-font-mono: 'Courier New', monospace; --cb-font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-serif: var(--cb-font-serif); --font-mono: var(--cb-font-mono); --cb-spacing-section: clamp(4rem, 10vw, 10rem); --cb-radius: 0px; --cb-shadow: none; --cb-transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1); --museum-black: #0d0d0d; --museum-white: #f5f4f0; --museum-gray: #6e6b66; /* 5.31:1 su #fff — era #8a8680 (3.62:1, fail AA) */ --museum-line: #d4d2cc; /* Colore di fondo usato nei gradienti hero e nei blocchi post-intro. Default: bianco puro (modalità b&w). In color-mode diventa --museum-white (crema caldo) tramite body.hero-color-active. */ --cb-hero-fade: #ffffff; --cb-content-max: clamp(1080px, 92vw, 1680px); --cb-pad-x: clamp(0.75rem, 3vw, 1.75rem); /* padding orizzontale standard per tutti i contenuti */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Skip-to-content — visibile solo a tastiera (WCAG 2.4.1) */ .skip-to-content { position: absolute; top: -100%; left: 1rem; z-index: 9999; background: var(--museum-black); color: var(--museum-white); padding: 0.75rem 1.25rem; font-size: 0.875rem; font-family: var(--cb-font-body); text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.2s ease; } .skip-to-content:focus { top: 0; outline: 2px solid var(--cb-color-accent); outline-offset: 2px; } html { font-size: 18px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; /* Il background di è ciò che appare oltre i limiti del documento quando il browser fa il bounce/rubber-band (overscroll). Usiamo il nero del header/footer così lo "slivellamento" è invisibile. */ background: var(--museum-black); } body { font-family: var(--cb-font-body); background: var(--cb-color-bg); color: var(--cb-color-text); line-height: 1.7; transition: background-color 0.5s ease; overflow-x: hidden; /* previene scroll orizzontale della pagina */ /* Blocca il bounce/rubber-band sui browser moderni (Chrome, Firefox, iOS 16+). Safari < 16 viene coperto dal background nero di sopra. */ overscroll-behavior: none; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font: inherit; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(13, 13, 13, 0.95); backdrop-filter: blur(16px); border-bottom: 1px solid var(--museum-line); transition: var(--cb-transition); } .header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--cb-content-max); margin: 0 auto; padding: 1.25rem var(--cb-pad-x); } .site-branding .site-title { font-family: var(--cb-font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.02em; color: var(--museum-white); } .site-branding { flex: 0 1 auto; min-width: 0; } .custom-logo-link { display: inline-flex; align-items: center; gap: 0.75rem; max-width: min(460px, 42vw); flex-shrink: 0; } .custom-logo { width: 100%; height: auto; max-height: 64px; object-fit: contain; object-position: center; } .main-navigation ul { display: flex; gap: 3rem; list-style: none; } .main-navigation a { font-family: var(--cb-font-serif); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--museum-white); white-space: nowrap; transition: color 0.25s ease; } .main-navigation a:hover { color: rgba(255, 255, 255, 0.65); } @media (min-width: 1025px) { /* ── Nav container ── */ .main-navigation { display: flex; align-items: center; gap: 2.5rem; } /* ── Primo livello: lista orizzontale ── */ .main-navigation > ul.menu { display: flex; align-items: center; gap: 2.5rem; list-style: none; margin: 0; padding: 0; } /* ── Voce padre con figli: wrapper per il dropdown ── */ .main-navigation li.menu-item-has-children { position: relative; } /* ── Link di primo livello ── */ .main-navigation > ul.menu > li > a { font-size: 0.875rem; display: flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0; } /* Freccia discesa per voci con figli */ .main-navigation li.menu-item-has-children > a::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.6; transition: transform var(--cb-transition), opacity var(--cb-transition); flex-shrink: 0; } .main-navigation li.is-subline-open > a::after { transform: rotate(-135deg) translateY(-2px); opacity: 1; } /* hover gestito nel blocco sopra */ /* ── Dropdown: sub-menu nativo ── */ .main-navigation .sub-menu { display: block; /* override del flex ereditato da .main-navigation ul */ position: absolute; top: calc(100% + 1.25rem); right: 0; min-width: 280px; background: rgba(13, 13, 13, 0.97); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-top: 2px solid var(--cb-color-accent); list-style: none; padding: 0.75rem 0; margin: 0; /* nascosto di default */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); z-index: 500; } /* Aperto via JS (classe is-subline-open sul li padre) */ .main-navigation li.is-subline-open > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* ── Voci del dropdown ── */ .main-navigation .sub-menu li { display: block; } .main-navigation .sub-menu a { display: block; font-family: var(--cb-font-serif); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.05em; text-transform: none; color: rgba(245, 244, 240, 0.85); padding: 0.7rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease; white-space: normal; line-height: 1.4; } .main-navigation .sub-menu li:last-child a { border-bottom: none; } .main-navigation .sub-menu a:hover { color: var(--museum-white); background: rgba(255,255,255,0.06); padding-left: 1.875rem; opacity: 1; } .main-navigation .sub-menu .current-menu-item a { color: var(--cb-color-accent); } /* ── Nasconde la __subline dinamica su desktop ── */ .main-navigation .main-navigation__subline { display: none !important; } .header-lang-switcher { position: relative; margin-left: 0.25rem; } .header-lang-switcher__dropdown { position: relative; } .header-lang-switcher__dropdown summary { display: inline-flex; align-items: center; gap: 0.45rem; list-style: none; cursor: pointer; color: rgba(255, 255, 255, 0.78); } .header-lang-switcher__dropdown summary::-webkit-details-marker { display: none; } .header-lang-switcher__current, .header-lang-switcher__menu a { font-family: var(--cb-font-serif); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .header-lang-switcher__chevron { width: 0.45rem; height: 0.45rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-0.05rem); transition: transform 0.2s ease; } .header-lang-switcher__dropdown[open] .header-lang-switcher__chevron { transform: rotate(-135deg) translateY(-0.02rem); } .header-lang-switcher__menu { position: absolute; top: calc(100% + 0.35rem); right: 0; display: flex; flex-direction: column; gap: 0; list-style: none; min-width: 3.7rem; margin: 0; padding: 0.15rem 0; background: rgba(13, 13, 13, 0.96); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22); } .header-lang-switcher__menu a { display: block; padding: 0.42rem 0.72rem; color: rgba(255, 255, 255, 0.68); transition: color 0.2s ease, background 0.2s ease; } .header-lang-switcher__menu a:hover, .header-lang-switcher__menu a:focus-visible, .header-lang-switcher__item.is-active a { color: var(--museum-white); background: rgba(255, 255, 255, 0.05); } } .site-main { min-height: 100vh; padding-top: var(--header-h); } .site-container { width: 100%; max-width: var(--cb-content-max); margin: 0 auto; } /* Padding orizzontale minimo garantito su mobile per tutti i contenuti */ @media (max-width: 768px) { .site-container, .site-footer .footer-inner { padding-left: var(--cb-pad-x); padding-right: var(--cb-pad-x); } .site-footer .footer-inner { grid-template-columns: 1fr; gap: 1.75rem; } .footer-legal__list { justify-content: flex-start; } .footer-cookie-tools { justify-content: flex-start; } } .site-footer { background: var(--museum-black); color: var(--museum-white); padding: var(--cb-spacing-section) var(--cb-pad-x); } .footer-inner { max-width: var(--cb-content-max); margin: 0 auto; padding: 0; } .site-footer .footer-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .footer-brand { display: flex; flex-direction: column; gap: 1.25rem; max-width: 42rem; } .footer-brand__mark { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 72px; color: var(--museum-white); } .footer-brand__logo { display: block; width: auto; max-width: min(320px, 100%); max-height: 72px; object-fit: contain; object-position: left center; } .footer-brand__fallback { display: inline-block; font-family: var(--cb-font-serif); font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: 0.04em; line-height: 1.2; max-width: 16ch; } .footer-brand__text { font-family: var(--cb-font-body); font-size: 1rem; line-height: 1.6; color: rgba(245, 244, 240, 0.78); max-width: 40rem; } .footer-links-group { grid-column: 2; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; } .footer-legal { padding-top: 0.35rem; } .footer-legal__secondary { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: 0; } .footer-legal__list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.9rem 1.5rem; margin: 0; padding: 0; list-style: none; } .footer-legal__list li { margin: 0; padding: 0; } .footer-legal a { font-family: var(--cb-font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 244, 240, 0.82); transition: color 0.2s ease, opacity 0.2s ease; } .footer-legal a:hover, .footer-legal a:focus-visible { color: #fff; opacity: 1; outline: 2px solid rgba(245, 244, 240, 0.92); outline-offset: 3px; } .footer-legal__button { appearance: none; border: 0; background: none; padding: 0; font-family: var(--cb-font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 244, 240, 0.82); cursor: pointer; transition: color 0.2s ease, opacity 0.2s ease; } .footer-legal__button:hover, .footer-legal__button:focus-visible { color: #fff; opacity: 1; outline: 2px solid rgba(245, 244, 240, 0.92); outline-offset: 3px; } .cb-cookie-banner[hidden], .cb-cookie-modal[hidden] { display: none !important; } .cb-cookie-banner { position: fixed; left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 260; } .cb-cookie-banner__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 1.5rem; align-items: end; padding: 1.2rem 1.3rem; background: rgba(13, 13, 13, 0.96); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26); backdrop-filter: blur(14px); } .cb-cookie-banner__title, .cb-cookie-modal__title { margin: 0 0 0.45rem; font-family: var(--cb-font-serif); font-size: 1.15rem; color: var(--museum-white); } .cb-cookie-banner__body, .cb-cookie-banner__links, .cb-cookie-modal__intro, .cb-cookie-modal__row p { margin: 0; color: rgba(245, 244, 240, 0.78); font-size: 0.92rem; line-height: 1.55; } .cb-cookie-banner__links { display: flex; flex-wrap: wrap; gap: 0.85rem 1.2rem; margin-top: 0.65rem; } .cb-cookie-banner__links a { color: rgba(245, 244, 240, 0.92); text-decoration: underline; text-underline-offset: 0.16em; } .cb-cookie-banner__actions, .cb-cookie-modal__footer { display: flex; flex-wrap: wrap; gap: 0.7rem; } .cb-cookie-btn { appearance: none; border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; color: var(--museum-white); padding: 0.78rem 1rem; font-family: var(--cb-font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .cb-cookie-btn:hover, .cb-cookie-btn:focus-visible { background: rgba(255, 255, 255, 0.06); } .cb-cookie-btn:focus-visible { outline: 2px solid rgba(245, 244, 240, 0.92); outline-offset: 3px; } .cb-cookie-btn--primary { background: var(--museum-white); color: var(--museum-black); border-color: var(--museum-white); } .cb-cookie-btn--primary:hover, .cb-cookie-btn--primary:focus-visible { background: rgba(245, 244, 240, 0.88); } .cb-cookie-modal { position: fixed; inset: 0; z-index: 280; } .cb-cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .cb-cookie-modal__dialog { position: relative; z-index: 1; width: min(720px, calc(100vw - 2rem)); margin: min(8vh, 4rem) auto; padding: 1.4rem; background: #141414; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 52px rgba(0, 0, 0, 0.32); } .cb-cookie-modal__close { appearance: none; position: absolute; top: 0.85rem; right: 0.9rem; border: 0; background: none; color: rgba(245, 244, 240, 0.72); font-size: 1.8rem; line-height: 1; cursor: pointer; } .cb-cookie-modal__group { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 1rem; padding-top: 1rem; } .cb-cookie-modal__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; color: var(--museum-white); } .cb-cookie-modal__row strong { display: block; margin-bottom: 0.22rem; font-family: var(--cb-font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; } .cb-cookie-modal__status { color: rgba(245, 244, 240, 0.72); font-size: 0.8rem; white-space: nowrap; } .cb-cookie-modal__status.is-locked { color: rgba(245, 244, 240, 0.95); } .cb-cookie-toggle { flex-shrink: 0; } .cb-cookie-toggle input { position: absolute; opacity: 0; pointer-events: none; } .cb-cookie-toggle__track { position: relative; display: inline-block; width: 2.9rem; height: 1.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); transition: background 0.2s ease; } .cb-cookie-toggle__track::after { content: ''; position: absolute; top: 0.18rem; left: 0.18rem; width: 1.34rem; height: 1.34rem; border-radius: 50%; background: #fff; transition: transform 0.2s ease; } .cb-cookie-toggle input:checked + .cb-cookie-toggle__track { background: rgba(245, 244, 240, 0.95); } .cb-cookie-toggle input:checked + .cb-cookie-toggle__track::after { transform: translateX(1.18rem); background: #111; } .footer-bottom { grid-column: 1 / -1; margin-top: clamp(1.5rem, 4vw, 2.5rem); padding-top: 1rem; border-top: 1px solid rgba(245, 244, 240, 0.14); } .footer-bottom p { font-family: var(--cb-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 244, 240, 0.5); } /* ---- Hamburger button ---- */ .menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; z-index: 200; flex-shrink: 0; } .menu-toggle span { display: block; width: 24px; height: 1.5px; background: var(--museum-white); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, width 0.35s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: center; } /* stato aperto: croce */ .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 1024px) { .menu-toggle { display: flex; } /* ── Pannello mobile: scende dall'header, non fullscreen ── */ .main-navigation { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 190; background: rgba(13, 13, 13, 0.98); backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,0.08); max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease; } .main-navigation.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* ── Lista primo livello ── */ .main-navigation > ul.menu { display: flex; flex-direction: column; gap: 0; padding: 0.5rem 0 1.5rem; list-style: none; margin: 0; } /* ── Voce di primo livello ── */ .main-navigation > ul.menu > li { border-bottom: 1px solid rgba(255,255,255,0.06); } /* ── Riga voce: link + pulsante accordion ── */ .main-navigation > ul.menu > li > .mob-item-row { display: flex; align-items: center; } .main-navigation > ul.menu > li > a { flex: 1; display: block; padding: 1rem 1.25rem 1rem 1.5rem; font-size: 0.875rem; letter-spacing: 0.18em; white-space: normal; color: var(--museum-white); transition: color 0.2s ease; } .main-navigation > ul.menu > li > a:hover { color: rgba(255,255,255,0.65); } /* ── Pulsante accordion freccia ── */ .mob-sub-toggle { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-left: 1px solid rgba(255,255,255,0.06); cursor: pointer; color: var(--museum-white); transition: background 0.2s ease; } .mob-sub-toggle:hover { background: rgba(255,255,255,0.05); } .mob-sub-toggle svg { transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .mob-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* ── Sottomenù accordion ── */ .main-navigation .sub-menu { display: block; position: static; opacity: 1; visibility: visible; transform: none; background: rgba(255,255,255,0.03); border: none; border-top: 1px solid rgba(255,255,255,0.06); padding: 0; margin: 0; min-width: 0; max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .main-navigation .sub-menu.is-open { max-height: 600px; } .main-navigation .sub-menu li { border-bottom: 1px solid rgba(255,255,255,0.04); } .main-navigation .sub-menu li:last-child { border-bottom: none; } .main-navigation .sub-menu a { display: block; padding: 0.85rem 1.25rem 0.85rem 2.75rem; font-size: 0.8125rem; letter-spacing: 0.1em; color: rgba(245,244,240,0.75); white-space: normal; transition: color 0.2s ease, background 0.2s ease; border-bottom: none; } .main-navigation .sub-menu a:hover { color: var(--museum-white); background: rgba(255,255,255,0.04); padding-left: calc(6vw + 1.5rem); opacity: 1; } .main-navigation__subline { display: none !important; } .header-lang-switcher { padding: 1rem 1.5rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); } .header-lang-switcher__dropdown { width: 100%; } .header-lang-switcher__dropdown summary { width: 100%; display: flex; align-items: center; justify-content: space-between; color: var(--museum-white); list-style: none; cursor: pointer; } .header-lang-switcher__dropdown summary::-webkit-details-marker { display: none; } .header-lang-switcher__current, .header-lang-switcher__menu a { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; } .header-lang-switcher__chevron { width: 0.5rem; height: 0.5rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; } .header-lang-switcher__dropdown[open] .header-lang-switcher__chevron { transform: rotate(-135deg); } .header-lang-switcher__menu { list-style: none; margin: 0.45rem 0 0; padding: 0; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); } .header-lang-switcher__menu a { display: block; padding: 0.65rem 0.85rem; color: rgba(245,244,240,0.75); transition: color 0.2s ease, background 0.2s ease; } .header-lang-switcher__menu a:hover, .header-lang-switcher__menu a:focus-visible, .header-lang-switcher__item.is-active a { color: var(--museum-white); background: rgba(255,255,255,0.04); } .cb-cookie-banner__inner, .cb-cookie-modal__row { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; } .cb-cookie-banner__actions, .cb-cookie-modal__footer { width: 100%; } .cb-cookie-btn { width: 100%; justify-content: center; } /* ── Hamburger fisso in alto a destra ── */ .menu-toggle { position: fixed; top: 1rem; right: 4vw; z-index: 200; } }