/*----------------------------------------*/ /* PRELOADER Full-screen brand loader shown while a page loads. The markup sits right after on every page; assets/js/preloader.js fades it out once the page has loaded. /*----------------------------------------*/ .ct-preloader { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, #ffffff 0%, #eefaf6 70%, #e3f5ef 100%); transition: opacity 0.5s ease, visibility 0.5s ease; /* Safety net: if the script never runs, get out of the way anyway */ animation: ctPreAutoHide 0.5s ease 6s forwards; } .ct-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Stop the page scrolling behind the loader */ html.ct-preloading, html.ct-preloading body { overflow: hidden; } /* Logo mark with a rotating ring */ .ct-preloader-mark { position: relative; width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; } .ct-preloader-mark::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(0, 159, 125, 0.12); border-top-color: #009F7D; border-right-color: #1B3357; animation: ctPreSpin 1.1s linear infinite; } .ct-preloader-mark svg { width: 58px; height: 58px; overflow: visible; } /* The four corner pieces snap in one after another, then repeat */ .ct-preloader-mark .ct-corner { transform-box: fill-box; transform-origin: center; animation: ctPreCorner 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite; } .ct-preloader-mark .ct-corner.c1 { animation-delay: 0s; } .ct-preloader-mark .ct-corner.c2 { animation-delay: 0.15s; } .ct-preloader-mark .ct-corner.c3 { animation-delay: 0.3s; } .ct-preloader-mark .ct-corner.c4 { animation-delay: 0.45s; } /* Centre dot breathes */ .ct-preloader-mark .ct-dot { transform-box: fill-box; transform-origin: center; animation: ctPreDot 1.6s ease-in-out infinite; } /* Wordmark */ .ct-preloader-name { margin-top: 26px; font-family: "Montserrat", Arial, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: 6px; color: #1B3357; text-transform: uppercase; } .ct-preloader-name span { color: #009F7D; } .ct-preloader-tag { margin-top: 6px; font-family: "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 3px; color: #6b7f8e; text-transform: uppercase; } /* Thin progress bar */ .ct-preloader-bar { position: relative; width: 160px; height: 3px; margin-top: 22px; border-radius: 3px; background: rgba(27, 51, 87, 0.1); overflow: hidden; } .ct-preloader-bar::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #009F7D, #1B3357); animation: ctPreBar 1.2s ease-in-out infinite; } @keyframes ctPreSpin { to { transform: rotate(360deg); } } @keyframes ctPreCorner { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; transform: scale(1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.4); } } @keyframes ctPreDot { 0%, 100% { transform: scale(0.85); } 50% { transform: scale(1.1); } } @keyframes ctPreBar { 0% { left: -40%; } 100% { left: 100%; } } @keyframes ctPreAutoHide { to { opacity: 0; visibility: hidden; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .ct-preloader-mark::before, .ct-preloader-mark .ct-corner, .ct-preloader-mark .ct-dot, .ct-preloader-bar::after { animation: none; } .ct-preloader-bar::after { left: 0; width: 100%; } }