/** * Brezza — layer di movimento (solo frontend). * * Gli stati "nascosti" si attivano solo se: * - html ha la classe .brezza-js (aggiunta in , rimossa se motion.js non parte); * - l'utente non ha chiesto di ridurre le animazioni. * La lista di selettori del reveal va tenuta allineata con REVEAL in motion.js. */ html { scroll-padding-top: calc(var(--brezza-header-h, 72px) + 1.5rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Header sticky "glass" --------------------------------------------------- */ .site-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; transition: transform 0.6s var(--brezza-ease); } /* Il vetro sta su uno pseudo-elemento: backdrop-filter sull'header romperebbe l'overlay a schermo intero del menu mobile. */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; border-bottom: 1px solid var(--wp--preset--color--faint); background-color: color-mix(in srgb, var(--wp--preset--color--base) 76%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); opacity: 0; transition: opacity 0.45s var(--brezza-ease); } .site-header.is-scrolled::before { opacity: 1; } .site-header.is-scrolled .brezza-header { padding-block: 0.7rem; } .site-header.is-hidden { transform: translate3d(0, -100%, 0); } @media (max-width: 600px) { .admin-bar .site-header { top: 0; } } /* Reveal allo scroll -------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .brezza-js:not(.brezza-vt) :is( .brezza-reveal, .wp-block-post-template > li, .entry-content > :not(.is-style-mask-reveal), .brezza-hero__inner > :not(.is-style-split), .brezza-single-header > :not(.is-style-split), .brezza-archive-header > :not(.is-style-split), .brezza-404 > :not(.is-style-split), .brezza-section-head, .brezza-topics-wrap > *, .brezza-cta, .brezza-single-media, .brezza-post-footer > *, .brezza-comments, .brezza-footer__top > * ), .brezza-js .brezza-rv { transition: opacity 1s var(--brezza-ease), transform 1.1s var(--brezza-ease), filter 1s var(--brezza-ease); transition-delay: var(--brezza-d, 0ms); } .brezza-js:not(.brezza-vt) :is( .brezza-reveal, .wp-block-post-template > li, .entry-content > :not(.is-style-mask-reveal), .brezza-hero__inner > :not(.is-style-split), .brezza-single-header > :not(.is-style-split), .brezza-archive-header > :not(.is-style-split), .brezza-404 > :not(.is-style-split), .brezza-section-head, .brezza-topics-wrap > *, .brezza-cta, .brezza-single-media, .brezza-post-footer > *, .brezza-comments, .brezza-footer__top > * ):not(.is-in), .brezza-js .brezza-rv:not(.is-in) { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); } /* Titoli animati parola per parola */ .brezza-js:not(.brezza-vt) :is(.is-style-split, .brezza-split):not(.brezza-split-ready) { opacity: 0; } .brezza-split-ready .brezza-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.07em 0.16em 0; margin: -0.08em -0.07em -0.16em 0; } .brezza-split-ready .brezza-w > span { display: inline-block; transform: translate3d(0, 112%, 0) rotate(3deg); transform-origin: 0 100%; transition: transform 1.15s var(--brezza-ease); transition-delay: calc(var(--brezza-d, 0ms) + min(var(--w, 0), 18) * 42ms + 60ms); } .brezza-split-ready.is-in .brezza-w > span { transform: none; } /* Immagini: rivelazione a maschera */ .brezza-js .is-style-mask-reveal { clip-path: inset(9% 7% 9% 7% round var(--brezza-radius)); transition: clip-path 1.5s var(--brezza-ease); } .brezza-js .is-style-mask-reveal img { scale: 1.22; transition: scale 1.9s var(--brezza-ease); } .brezza-js .is-style-mask-reveal.is-in { clip-path: inset(0 0 0 0 round var(--brezza-radius)); } .brezza-js .is-style-mask-reveal.is-in img { scale: 1; } /* Hero: il contenuto sfuma e sale mentre si scorre via. */ .brezza-js .brezza-hero__inner { opacity: calc(1 - var(--brezza-exit, 0) * 0.85); translate: 0 calc(var(--brezza-exit, 0) * -70px); } } /* Parallasse ---------------------------------------------------------------- */ .brezza-pframe { display: block; width: fit-content; max-width: 100%; overflow: hidden; border-radius: var(--brezza-radius); isolation: isolate; } .brezza-pframe-on { overflow: hidden; isolation: isolate; } .brezza-pframe-on img { scale: 1.14; will-change: translate; } /* Barra di lettura (articoli) ---------------------------------------------- */ .brezza-progress { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 60; height: 2px; pointer-events: none; } .brezza-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--brezza-glow)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; } @media (max-width: 600px) { .admin-bar .brezza-progress { top: 0; } } /* Torna su, con anello di avanzamento ---------------------------------------- */ .brezza-totop { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background-color: color-mix(in srgb, var(--wp--preset--color--surface) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--wp--preset--shadow--float); color: var(--wp--preset--color--contrast); cursor: pointer; opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity 0.5s var(--brezza-ease), translate 0.5s var(--brezza-ease), background-color 0.3s, color 0.3s; } .brezza-totop.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; } .brezza-totop:hover { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } .brezza-totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; } .brezza-totop__ring circle { fill: none; stroke: var(--wp--preset--color--faint); stroke-width: 2; } .brezza-totop__ring .brezza-totop__bar { stroke: var(--wp--preset--color--accent); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); stroke-linecap: round; } .brezza-totop__icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.4s var(--brezza-ease); } .brezza-totop:hover .brezza-totop__icon { translate: 0 -2px; } /* Blocchi codice: wrapper, etichetta linguaggio e "Copia" ------------------------ */ .brezza-code { position: relative; } body .brezza-code > pre { margin: 0; } .brezza-code[data-lang]::before { content: attr(data-lang); position: absolute; top: 0.95rem; right: 5.75rem; z-index: 1; color: rgba(255, 255, 255, 0.38); font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; } .brezza-copy { position: absolute; top: 0.65rem; right: 0.65rem; z-index: 2; padding: 0.45em 0.85em; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background-color: rgba(255, 255, 255, 0.06); color: #c9ccd6; cursor: pointer; font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; line-height: 1; opacity: 0; transition: opacity 0.3s, background-color 0.3s, color 0.3s; } .brezza-code:hover .brezza-copy, .brezza-copy:focus-visible, .brezza-copy.is-copied { opacity: 1; } .brezza-copy:hover { background-color: rgba(255, 255, 255, 0.12); color: #fff; } .brezza-copy.is-copied { color: #7ee2a8; } @media (hover: none) { .brezza-copy { opacity: 1; } } /* Ancore sui titoli ---------------------------------------------------------- */ .brezza-anchor { margin-left: 0.3em; color: var(--wp--preset--color--faint); font-weight: 400; text-decoration: none; opacity: 0; transition: opacity 0.3s, color 0.3s; } :is(h2, h3):hover > .brezza-anchor, .brezza-anchor:focus-visible { opacity: 1; } .brezza-anchor:hover { color: var(--wp--preset--color--accent); } /* Spotlight che segue il puntatore ----------------------------------------- */ .brezza-spot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient( 420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--wp--preset--color--accent) 11%, transparent), transparent 45% ); opacity: 0; transition: opacity 0.5s var(--brezza-ease); pointer-events: none; } .brezza-spot:hover::after { opacity: 1; } /* Transizioni tra pagine (Chrome/Edge/Safari 18.2+; altrove: navigazione normale) -- */ @view-transition { navigation: auto; } ::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } ::view-transition-old(root) { animation: 0.3s cubic-bezier(0.4, 0, 1, 1) both brezza-page-out; } ::view-transition-new(root) { animation: 0.55s cubic-bezier(0.22, 1, 0.36, 1) both brezza-page-in; } @keyframes brezza-page-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes brezza-page-in { from { opacity: 0; transform: translateY(14px); } } /* Movimento ridotto ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .brezza-hero::after, .brezza-brand .wp-block-site-title a::after { animation: none; } .brezza-pframe-on img { scale: 1; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* Stampa ------------------------------------------------------------------------- */ @media print { .site-header, .brezza-progress, .brezza-totop, .brezza-copy, .brezza-related, .brezza-comments, .brezza-footer__wordmark { display: none !important; } .brezza-js * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } }