/* 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%; } } /* Reduced-motion suppression is driven ONLY by the root class * `rx-reduced-motion` (set synchronously by motion-preference.js from the * RESOLVED preference), never by the OS-only prefers-reduced-motion media * query. The OS query is deliberately NOT consulted on the animated path, * because fades must work whether or not Windows animations are enabled. * This keeps CSS and JS in lockstep for both modes: * - Always animate (default): class is absent even when the OS asks for * reduced motion, so the 220ms/280ms transitions play. The OS query is * deliberately ignored — fades work whether or not Windows animations * are enabled. * - Reduced motion (opt-in): class is present even when the OS allows * motion, so CSS suppression + JS timer-skipping both disable movement. * There is intentionally NO `@media (prefers-reduced-motion: reduce)` block * here: a previous version kept a no-JS OS fallback scoped to * `:not(.rx-motion-managed)`, but that still let a CSS selector based solely * on prefers-reduced-motion set transition-duration to 0.01ms / hide the * overlay. It has been removed so the OS query can NEVER suppress the * normal animated path. Explicit 'reduced' opt-in (the only way to suppress) * is fully covered by the class-driven rules below. */ html.rx-reduced-motion.rxpt-js body, html.rx-reduced-motion.rxpt-entering body, html.rx-reduced-motion.rxpt-entered body, html.rx-reduced-motion.rxpt-exiting body { opacity: 1; transform: none; transition-duration: 0.01ms !important; } html.rx-reduced-motion.rxpt-exiting .rxpt-veil, html.rx-reduced-motion.rxpt-exiting .rxpt-progress { display: none; } /* Workspace SPA content-region fade. * * When the workspace router is active, internal navigation among the five * workspace pages (read-rx, claims, history, reports, settings) does NOT * reload the document. Only #pageContent changes. This applies a restrained * Clinical Fade to the content region: ~300ms fade + 6px vertical movement, * mirroring the document-level Clinical Fade language but scoped to the * content host so the sidebar/topbar/session shell stays stable. * * Reduced motion collapses the movement to an immediate swap. */ #pageContent { transition: opacity 300ms ease, transform 300ms ease; } #pageContent.rx-route-leaving { opacity: 0; transform: translateY(6px); } #pageContent.rx-route-entering { opacity: 0; transform: translateY(6px); animation: rx-route-enter 300ms ease forwards; } @keyframes rx-route-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Route headings receive programmatic focus so assistive technology announces * the new section. They are not interactive controls, so suppress the global * focus ring that some browsers retain after SPA navigation. */ #pageContent h1[tabindex="-1"]:focus, #pageContent h1[tabindex="-1"]:focus-visible { outline: none; } /* Reduced-motion suppression for the SPA content-region fade is driven ONLY by * the root class `rx-reduced-motion` (set by motion-preference.js from the * resolved preference), mirroring the document-level rules above. The OS * prefers-reduced-motion query is deliberately NOT consulted here, so the OS * query can never suppress this 300ms SPA fade. This keeps the SPA fade in * lockstep with the JS timer-skipping for both modes: always animate (default) * keeps the 300ms fade even under OS reduced-motion, and reduced (opt-in) * disables it even when the OS allows motion. There is intentionally NO * `@media (prefers-reduced-motion: reduce)` block here — explicit 'reduced' * opt-in is the only path that collapses the SPA fade. */ html.rx-reduced-motion #pageContent, html.rx-reduced-motion #pageContent.rx-route-leaving, html.rx-reduced-motion #pageContent.rx-route-entering { opacity: 1; transform: none; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }