/* * Cross-document View Transitions — smooth MPA navigation. * * Browser support (early 2026): Chrome 126+, Edge 126+, Safari 18+ opt-in via * `@view-transition`. Firefox does not yet support cross-document transitions, * so Firefox users simply get the existing full-page navigation. This is pure * progressive enhancement — zero JavaScript, no risk to forms, auth, analytics * (PostHog / Meta Pixel / GA4 fire on every real navigation as before). * * How it works: * 1. The browser snapshots the outgoing page, loads the new page, snapshots * the incoming page, then crossfades the two snapshots. * 2. Elements on both pages that share a `view-transition-name` are morphed * individually (header stays put while
fades). * 3. If the user has `prefers-reduced-motion: reduce`, we disable all * animations and the transition becomes an instant swap. */ /* Opt into cross-document transitions for same-origin same-site navigations. */ @view-transition { navigation: auto; } /* --------------------------------------------------------------------------- * Stable regions — header and footer should morph-in-place across pages, not * fade with the main content. Giving them unique names keeps the site chrome * feeling "persistent" during a transition. * * The `
` tag appears on every page template in this * theme (verified across archive-dream.php, front-page.php, index.php, * single-dream.php, single.php, home.php, page-blog.php, page-my-dreams.php, * page-reset-password.php, category.php), so naming it here is safe. * ------------------------------------------------------------------------- */ .site-header { view-transition-name: site-header; } .site-footer { view-transition-name: site-footer; } #main-content { view-transition-name: page-main; } /* --------------------------------------------------------------------------- * Animation timing for the page-main crossfade. The slide-distance is kept * small (12px) so it reads as a gentle settle rather than a full-screen swipe. * * We also slide the incoming content in the reading direction — LTR pages get * a left-to-right slide, RTL pages get right-to-left. Polylang sets * dir="rtl" on for HE / AR in header.php, so the [dir="rtl"] selector * flips the animation automatically. * ------------------------------------------------------------------------- */ @keyframes dg-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes dg-fade-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } ::view-transition-old(page-main) { animation: 180ms ease-out both dg-fade-out; } ::view-transition-new(page-main) { animation: 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both dg-fade-in; } /* Keep header / footer stable — no animation; the browser still snapshots * them so they don't flicker, but nothing moves. */ ::view-transition-old(site-header), ::view-transition-new(site-header), ::view-transition-old(site-footer), ::view-transition-new(site-footer) { animation: none; } /* --------------------------------------------------------------------------- * Accessibility: honour user's motion preference. If they've asked the OS to * reduce motion, disable all keyframed animations — the transition still * happens (so back / forward buttons work), but it's an instant swap. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }