/* ============================================================ BONECHI ARTE — main.css CSS condiviso da tutte le pagine del sito. Autore: Sistema professionale — non modificare manualmente. Per cambiare contenuti usa /admin o content.js ============================================================ */ /* ── Google Fonts preloaded via HTML ── */ /* ─── RESET & BASE ─── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ─── TAILWIND CONFIG (injected via JS in ) ─── */ /* ─── CUSTOM CURSOR ─── */ #customCursor { position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%) scale(0.5); opacity: 0; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } #customCursor.active { transform: translate(-50%, -50%) scale(1); opacity: 1; } .hide-default-cursor { cursor: none !important; } /* ─── NO SCROLLBAR ─── */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ─── TYPING CURSOR ─── */ .cursor::after { content: '|'; animation: blink 1s step-end infinite; font-weight: 300; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ─── MOBILE MENU OVERLAY ─── */ #mobileMenuOverlay { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; /* STATO CHIUSO */ clip-path: circle(0% at calc(100% - 44px) 44px); opacity: 0; pointer-events: none; transition: clip-path 0.55s cubic-bezier(0.77, 0, 0.18, 1), opacity 0.1s ease 0.5s; } #mobileMenuOverlay.open { /* STATO APERTO */ clip-path: circle(175% at calc(100% - 44px) 44px); opacity: 1; pointer-events: auto; transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.01s ease; } /* ─── HAMBURGER → X MORPH ─── */ .hb-wrap { display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; padding: 4px; } .hb-bar { display: block; width: 26px; height: 1.5px; background: currentColor; transform-origin: center; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, width 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .hb-wrap.is-open .hb-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hb-wrap.is-open .hb-bar:nth-child(2) { opacity: 0; width: 0; } .hb-wrap.is-open .hb-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ─── VOCI MENU MOBILE — staggered fade-up ─── */ .m-link, .m-cta { opacity: 0; transform: translateY(22px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } /* Entrata */ #mobileMenuOverlay.open .m-link:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.20s; } #mobileMenuOverlay.open .m-link:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.28s; } #mobileMenuOverlay.open .m-link:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.36s; } #mobileMenuOverlay.open .m-cta { opacity: 1; transform: none; transition-delay: 0.46s; } /* Uscita — niente delay */ #mobileMenuOverlay:not(.open) .m-link, #mobileMenuOverlay:not(.open) .m-cta { transition-delay: 0s !important; } /* Underline hover voci menu */ .m-link { position: relative; display: inline-block; } .m-link::after { content: ''; position: absolute; bottom: -3px; left: 50%; width: 0; height: 1px; background: #fff; transition: width 0.3s ease, left 0.3s ease; } .m-link:hover::after { width: 100%; left: 0; } /* ─── SCROLL ANIMATIONS ─── */ .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ─── CHATBOT ANIMATION ─── */ @keyframes fadeInMsg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-msg { animation: fadeInMsg 0.4s ease-out forwards; } /* ─── HERO MOBILE ─── */ @media (max-width: 767px) { #heroMobile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 1.25rem; pointer-events: none; z-index: 10; } #heroMobile h1 { font-size: clamp(3.2rem, 17vw, 5.2rem); line-height: 0.88; white-space: nowrap; } } /* ─── PAGINA ARTISTA — LIGHTBOX ─── */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 5000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .lightbox-overlay.active { opacity: 1; visibility: visible; } .lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; transform: scale(0.95); transition: transform 0.3s ease; } .lightbox-overlay.active img { transform: scale(1); } .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; color: rgba(255, 255, 255, 0.7); font-size: 2rem; cursor: pointer; transition: color 0.2s, transform 0.2s; line-height: 1; background: none; border: none; padding: 0.5rem; } .lightbox-close:hover { color: #fff; transform: rotate(90deg); } /* ─── MAPPA IN SCALA DI GRIGI ─── */ .map-grayscale iframe { filter: grayscale(100%) opacity(80%); transition: filter 0.5s ease; } .map-grayscale:hover iframe { filter: grayscale(50%) opacity(100%); }