/* RxVerify — Clinical Fade page transitions. * One dedicated stylesheet loaded on every page. The visual language follows * the existing design tokens (teal #16a8a2 progress line, forest/paper tinted * veil) and stays restrained: fade plus ~6px vertical movement only. No blur, * no scale, no dramatic slide, no long delay. * * Entrance: incoming page fades in and rises 6px over 280ms. * Exit: outgoing page fades out and drops 6px over 220ms. * Reduced motion: all movement collapses and navigation is immediate. */ /* Body is hidden only when JavaScript is present (html.rxpt-js is added * synchronously by page-transitions.js in ). No-JS pages are never * hidden, so there is no flash and no trapped invisible content. */ html.rxpt-js body { opacity: 0; transform: translateY(6px); } html.rxpt-entering body { opacity: 0; transform: translateY(6px); transition: opacity 280ms ease, transform 280ms ease; } html.rxpt-entered body { opacity: 1; transform: translateY(0); transition: opacity 280ms ease, transform 280ms ease; } html.rxpt-exiting body { opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 220ms ease; } /* Subtle teal veil and progress line. Kept pointer-events:none so the veil * never blocks interaction; the controller already ignores duplicate * navigation while a transition is running. The overlay lives on the root * element (not body) so the body fade-out does not hide it. */ .rxpt-veil { position: fixed; inset: 0; z-index: 500; display: none; background: rgba(11, 52, 56, 0.05); pointer-events: none; } .rxpt-progress { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, rgba(22, 168, 162, 0.85), rgba(22, 168, 162, 0.35)); box-shadow: 0 1px 5px rgba(22, 168, 162, 0.35); } html.rxpt-exiting .rxpt-veil { display: block; } html.rxpt-exiting .rxpt-progress { width: 100%; animation: rxpt-progress 220ms linear forwards; } @keyframes rxpt-progress { from { width: 0; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { html.rxpt-js body, html.rxpt-entering body, html.rxpt-entered body, html.rxpt-exiting body { opacity: 1; transform: none; transition-duration: 0.01ms !important; } html.rxpt-exiting .rxpt-veil, html.rxpt-exiting .rxpt-progress { display: none; } }