/* ========================================================================== CONVERTMASTER PRO — PAGE TRANSITION ENGINE v3 (transitions.css) Body-opacity approach. Zero flash. Zero theme glitch. GPU-accelerated. ========================================================================== */ /* -------------------------------------------------------------------------- PHASE 1: LOADING (cm-loading set by inline script BEFORE CSS loads) Body is invisible until JavaScript reveals it. No CSS transition during this phase — prevents wrong-theme animation. -------------------------------------------------------------------------- */ html.cm-loading body { opacity: 0; visibility: hidden; /* Kill ALL transitions during load — prevents any animated glitch */ transition: none !important; animation: cmLoadingSafetyReveal 0s 350ms forwards !important; pointer-events: none !important; } @keyframes cmLoadingSafetyReveal { to { opacity: 1; visibility: visible; pointer-events: auto; } } /* FOUC safety: if JS never ran and cm-loading was never set, still ensure page reveals after 500ms worst case */ html:not([data-theme]) body { opacity: 0; animation: cmFoucReveal 0s 500ms forwards; } @keyframes cmFoucReveal { to { opacity: 1; visibility: visible; } } /* -------------------------------------------------------------------------- PHASE 2: ENTERING (cm-entering set by transitions.js on DOMContentLoaded) Body fades in + rises. Transitions suppressed to prevent conflict. -------------------------------------------------------------------------- */ html.cm-entering body { opacity: 0; /* start value */ visibility: visible !important; transition: none !important; /* suppress theme.css body transition during enter */ animation: cmBodyEnter 240ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important; } @keyframes cmBodyEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- PHASE 3: EXITING (cm-exiting set by transitions.js on link click) Body fades out + sinks slightly. Then JS navigates. -------------------------------------------------------------------------- */ html.cm-exiting body { transition: none !important; pointer-events: none !important; animation: cmBodyExit 160ms cubic-bezier(0.4, 0, 1, 1) forwards !important; } @keyframes cmBodyExit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } } /* -------------------------------------------------------------------------- Overlay div — kept in DOM but inert. Was used by v1/v2, now unused. Kept to avoid HTML changes across 13 pages. -------------------------------------------------------------------------- */ #cmPageTransitionOverlay { display: none !important; } /* -------------------------------------------------------------------------- Theme toggle smooth animation When user manually switches theme, allow a brief cross-fade of colors. html.cm-theme-switching enables this. Applied/removed by theme.js. -------------------------------------------------------------------------- */ html.cm-theme-switching body { transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms cubic-bezier(0.4, 0, 0.2, 1) !important; } html.cm-theme-switching .site-header { transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1) !important; } html.cm-theme-switching .converter-card, html.cm-theme-switching .tool-card, html.cm-theme-switching .category-card, html.cm-theme-switching .calc-card, html.cm-theme-switching [class*="-card"] { transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) !important; } /* -------------------------------------------------------------------------- Reduced Motion — instant transitions, no animations, full usability preserved -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.cm-entering body { animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } html.cm-exiting body { animation: none !important; opacity: 1 !important; transform: none !important; } html.cm-loading body { opacity: 0 !important; /* Still keep hidden until JS reveals, but no animation on reveal */ } html:not([data-theme]) body { animation: none !important; opacity: 1 !important; } html.cm-theme-switching body, html.cm-theme-switching .site-header, html.cm-theme-switching [class*="-card"] { transition: none !important; } }