/* ============================================================================= VILLA CASTELLACCIA — LIVELLO DI MOVIMENTO CONDIVISO ----------------------------------------------------------------------------- Materiale unico del sito: IL TAGLIO FOTOGRAFICO. Le immagini si aprono dal taglio, i titoli si smascherano, il menu scende come un sipario, la galleria cambia in dissolvenza con una lenta deriva. Tutto parte da uno stato gia' visibile: se il JS non parte, la pagina resta leggibile (la classe .motion-ready viene aggiunta inline nel , e non viene aggiunta affatto quando l'utente chiede meno animazioni). ========================================================================== */ :root { --mo-fast: 160ms; --mo-base: 260ms; --mo-slow: 520ms; --mo-reveal: 1100ms; --mo-hero: 1500ms; /* Feedback: decelerazione esponenziale, la risposta dev'essere immediata. */ --mo-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Ingressi: curva che accompagna l'elemento per tutta la durata invece di scaricare quasi tutto lo spostamento nella prima meta'. E' la differenza fra una cosa lanciata e una cosa posata. */ --mo-glide: cubic-bezier(0.32, 0.72, 0, 1); --mo-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); } html { scroll-behavior: smooth; } /* ============================================================================= 1. TRANSIZIONE TRA PAGINE Il sito e' multipagina: la navigazione diventa una dissolvenza unica invece di un lampo bianco. Ignorato senza danni dai browser che non la supportano. ========================================================================== */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--mo-glide); } /* ============================================================================= 2. MOMENTO D'AUTORE — L'APERTURA DELLA FOTOGRAFIA La foto d'apertura (e la mappa, che ne prende il posto) non compare: si apre dal taglio centrale verso i bordi, posandosi da 1.06x a 1x. ========================================================================== */ .motion-ready .header-img, .motion-ready .map { opacity: 0; transform: scale(1.06); clip-path: inset(0 16% 0 16% round 10px); /* l'opacita' si risolve a meta' corsa: la foto e' gia' leggibile mentre finisce di posarsi, e l'ultimo tratto si sente come un respiro */ transition: opacity 900ms var(--mo-glide), transform var(--mo-hero) var(--mo-glide), clip-path var(--mo-hero) var(--mo-glide); will-change: transform, clip-path, opacity; } .motion-ready .header-img.is-open, .motion-ready .map.is-open { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 10px); will-change: auto; } /* ============================================================================= 3. INGRESSI ALLO SCROLL NB: gli elenchi di selettori qui sotto devono restare allineati a REVEAL_GROUPS in /js/motion.js — il CSS nasconde, il JS rivela. Tre trattamenti distinti, non un'unica dissolvenza ripetuta su tutto. ========================================================================== */ /* 3a. TITOLI — si smascherano dal basso, come una riga di piombo che sale */ .motion-ready :is(.intro-text-title, .villa-intro-title, .intro-title, .address-title, .offert-title, .gallery-title, .faq-category-title) { opacity: 0; clip-path: inset(-12% 0 100% 0); transform: translateY(0.16em); transition: opacity 620ms var(--mo-glide), clip-path var(--mo-reveal) var(--mo-glide), transform var(--mo-reveal) var(--mo-glide); } .motion-ready :is(.intro-text-title, .villa-intro-title, .intro-title, .address-title, .offert-title, .gallery-title, .faq-category-title).is-inview { opacity: 1; clip-path: inset(-12% 0 -12% 0); transform: none; } /* 3b. TESTI — restano fermi, salgono appena: la lettura non deve muoversi */ .motion-ready :is(.intro-text-content, .villa-intro-text, p.intro-text, .address-text, .address, .faq-intro-text, .faq-toc-aside) { opacity: 0; transform: translateY(8px); transition: opacity 900ms var(--mo-glide), transform 1100ms var(--mo-glide); } .motion-ready :is(.intro-text-content, .villa-intro-text, p.intro-text, .address-text, .address, .faq-intro-text, .faq-toc-aside).is-inview { opacity: 1; transform: none; } /* 3c. IMMAGINI — stesso gesto dell'apertura: il taglio che si allarga */ .motion-ready .gallery-container .image-container { opacity: 0; transform: scale(1.025); clip-path: inset(0 12% 0 12% round 10px); transition: opacity 800ms var(--mo-glide), transform 1300ms var(--mo-glide), clip-path 1300ms var(--mo-glide); } .motion-ready .gallery-container .image-container.is-inview { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 10px); } /* 3d. BLOCCHI E GRUPPI — salgono in cascata (ritardo assegnato dal JS). La foto in "Cosa offriamo" e' nella stessa riga dei box e osservata nello stesso passaggio: condivide il loro gesto invece dell'apertura a taglio, cosi' l'intera sezione sale come un solo gruppo. */ .motion-ready :is(.single-offert, .offert-container .wedding-container img, .contact-container, .email-container, .buttons, .faq-item) { opacity: 0; transform: translateY(10px); transition: opacity 820ms var(--mo-glide), transform 1050ms var(--mo-glide); } .motion-ready :is(.single-offert, .offert-container .wedding-container img, .contact-container, .email-container, .buttons, .faq-item).is-inview { opacity: 1; transform: none; } /* ============================================================================= 4. STATI DI FEEDBACK CONDIVISI ========================================================================== */ /* Il bottone si riempie dal basso invece di cambiare colore di scatto. Il gradiente e' un colore pieno animato via background-size: il testo resta sopra senza bisogno di pseudo-elementi. */ .single-button { background-image: linear-gradient(rgb(18, 50, 51), rgb(18, 50, 51)); background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%; border: none; transition: background-size 420ms var(--mo-ease), background-color var(--mo-base) ease, color var(--mo-base) ease, transform var(--mo-base) var(--mo-ease), box-shadow 320ms var(--mo-ease); } .single-button:hover, .single-button:focus-visible { background-size: 100% 100%; transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.8); } .single-button:active { transform: translateY(0) scale(0.985); transition-duration: 90ms; } .button-disabled { background-image: none; transform: none !important; box-shadow: none !important; } /* I pulsanti secondari del form (Annulla / Indietro) restano in filo bianco: niente riempimento, solo la pressione. */ .form-nav .nav-button { transition: background-color var(--mo-base) ease, border-color var(--mo-base) ease, color var(--mo-base) ease, transform var(--mo-base) var(--mo-ease); } .form-nav .nav-button:active { transform: scale(0.97); transition-duration: 90ms; } /* Il numero di telefono e' una pastiglia: stesso riempimento dal basso */ .contact-number-background { /* inline-block serve alla trasformazione, ma la larghezza resta quella del testo com'era prima (.contact-text imposta un 50% che su un elemento inline non aveva effetto) */ display: inline-block; width: auto; background-image: linear-gradient(rgb(18, 50, 51), rgb(18, 50, 51)); background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%; transition: background-size 380ms var(--mo-ease), transform var(--mo-base) var(--mo-ease); } .contact-number-background:hover, .contact-number-background:focus-visible { background-size: 100% 100%; transform: translateY(-2px); } .contact-number-background:active { transform: translateY(0) scale(0.985); transition-duration: 90ms; } /* Focus da tastiera coerente su tutto il sito */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 4px; } /* I campi del form segnalano il fuoco con un anello morbido, non un salto */ .email-container input, .email-container textarea, #select-object { transition: box-shadow var(--mo-base) ease, transform var(--mo-base) var(--mo-ease); } .email-container input:focus, .email-container textarea:focus, #select-object:focus { outline: none; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(255, 255, 255, 0.55); } /* ============================================================================= 5. FOTOGRAMMI CONDIVISI ========================================================================== */ @keyframes mo-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ============================================================================= 6. MENO MOVIMENTO .motion-ready non viene nemmeno applicata: qui si spengono i residui. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }