:root { --ca-motion-fast: 180ms; --ca-motion-medium: 420ms; --ca-motion-ease: cubic-bezier(.22, 1, .36, 1); --ca-motion-accent: #00aeef; --ca-motion-accent-warm: #ffd700; --ca-focus-ring: rgba(0, 174, 239, .28); } /* Page loading and entrance motion. JavaScript adds these classes early in . */ html.ca-js::after { content: ""; position: fixed; top: 50%; left: 50%; z-index: 2147483646; width: 62px; height: 24px; margin: -12px 0 0 -31px; background-image: radial-gradient(circle closest-side, var(--ca-motion-accent) 92%, transparent), radial-gradient(circle closest-side, var(--ca-motion-accent) 92%, transparent), radial-gradient(circle closest-side, var(--ca-motion-accent) 92%, transparent); background-position: 0 50%, 50% 50%, 100% 50%; background-repeat: no-repeat; background-size: 18px 18px, 10px 10px, 4px 4px; pointer-events: none; opacity: 0; animation: ca-loading-dots 900ms var(--ca-motion-ease) infinite; animation-play-state: paused; transition: opacity 160ms ease; } html.ca-js.ca-page-loading::after, html.ca-js.ca-async-loading::after { opacity: 1; animation-play-state: running; } html.ca-js.ca-page-loading body, html.ca-js.ca-async-loading body { cursor: progress; } html.ca-js.ca-async-loading #mainContent { transition: opacity 160ms ease; } @keyframes ca-loading-dots { 0%, 100% { background-size: 18px 18px, 10px 10px, 4px 4px; } 33% { background-size: 10px 10px, 18px 18px, 10px 10px; } 66% { background-size: 4px 4px, 10px 10px, 18px 18px; } } html.ca-js.ca-page-loading #mainContent { opacity: 0; transform: translateY(10px); } html.ca-js.ca-page-loaded #mainContent { /* Do not retain the final transform: it would trap fixed Bootstrap modals in this stacking context while their backdrop is appended to . */ animation: ca-page-enter var(--ca-motion-medium) var(--ca-motion-ease); } @keyframes ca-page-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Shared button feedback without changing each page's existing colors. */ .btn, a.btn, .button, a[role="button"], button:not(.nav-toggle):not(.btn-close), input[type="button"], input[type="submit"], input[type="reset"] { transition: transform var(--ca-motion-fast) var(--ca-motion-ease), box-shadow var(--ca-motion-fast) ease, filter var(--ca-motion-fast) ease, color var(--ca-motion-fast) ease, background-color var(--ca-motion-fast) ease, border-color var(--ca-motion-fast) ease; transform: translateZ(0); } a.mui-btn--primary, a.mui-btn--primary:hover, a.mui-btn--primary:focus, a.mui-btn--primary:active { color: #fff !important; text-decoration: none !important; } @media (hover: hover) and (pointer: fine) { .btn:not(:disabled):not(.disabled):hover, a.btn:not(.disabled):hover, .button:not(.disabled):hover, a[role="button"]:not(.disabled):hover, button:not(.nav-toggle):not(.btn-close):not(:disabled):hover, input[type="button"]:not(:disabled):hover, input[type="submit"]:not(:disabled):hover, input[type="reset"]:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.035); box-shadow: 0 8px 18px rgba(15, 23, 42, .16); } } .btn:not(:disabled):not(.disabled):active, a.btn:not(.disabled):active, .button:not(.disabled):active, a[role="button"]:not(.disabled):active, button:not(.nav-toggle):not(.btn-close):not(:disabled):active, input[type="button"]:not(:disabled):active, input[type="submit"]:not(:disabled):active, input[type="reset"]:not(:disabled):active { transform: translateY(0) scale(.985); box-shadow: 0 3px 8px rgba(15, 23, 42, .13); } .btn:focus-visible, .button:focus-visible, a[role="button"]:focus-visible, button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible { outline: 3px solid var(--ca-focus-ring); outline-offset: 2px; } /* Animated top-level navigation links across all shared layouts. */ #navigation-container #nav > li > a, #main-navbar .nav-center > a, #main-navbar .nav-center > .dropdown > .dropbtn, #main-navbar .nav-right > a, .headbanner a { position: relative; display: inline-flex; text-decoration: none !important; transition: color var(--ca-motion-fast) ease, transform var(--ca-motion-fast) var(--ca-motion-ease), opacity var(--ca-motion-fast) ease; } #navigation-container #nav > li > a::after, #main-navbar .nav-center > a::after, #main-navbar .nav-center > .dropdown > .dropbtn::after, #main-navbar .nav-right > a::after, .headbanner a::after { content: ""; position: absolute; right: 10%; bottom: -3px; left: 10%; height: 2px; border-radius: 999px; background: currentColor; opacity: 0; transform: scaleX(.25); transition: transform var(--ca-motion-fast) var(--ca-motion-ease), opacity var(--ca-motion-fast) ease; } @media (hover: hover) and (pointer: fine) { #navigation-container #nav > li > a:hover, #main-navbar .nav-center > a:hover, #main-navbar .nav-center > .dropdown > .dropbtn:hover, #main-navbar .nav-right > a:hover, .headbanner a:hover { transform: translateY(-1px); } #navigation-container #nav > li > a:hover::after, #main-navbar .nav-center > a:hover::after, #main-navbar .nav-center > .dropdown > .dropbtn:hover::after, #main-navbar .nav-right > a:hover::after, .headbanner a:hover::after { opacity: .9; transform: scaleX(1); } } #logo, .nav-logo { transition: transform 240ms var(--ca-motion-ease), filter 240ms ease; } @media (hover: hover) and (pointer: fine) { #navigation-container #logo:hover, .nav-logo:hover { transform: scale(1.025); filter: brightness(1.06); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } html.ca-js #mainContent { opacity: 1 !important; transform: none !important; } html.ca-js::after { display: none; } }