/* =========================================================================== Mindspace - site preloader A full-screen curtain that covers the page until fonts, styles and the above-the-fold imagery are ready, then splits apart to reveal the site. The first visit in a browser session plays the full sequence (orbit draw, wordmark rise, progress count). Every later page view in the same session plays a short fade instead - a returning visitor should never sit through the same three seconds twice. Loaded in BEFORE any other stylesheet so the curtain paints on the first frame and the page underneath is never seen half-built. ========================================================================== */ :root { --ms-load-black: #0f0f0f; --ms-load-ivory: #f5f2ea; --ms-load-gold: #a67c52; --ms-load-gold-soft: #d7b189; --ms-load-slate: #666868; --ms-load-font: "Satoshi", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* While the curtain is up the page behind it must not scroll. */ html.ms-loading, html.ms-loading body { overflow: hidden !important; height: 100%; } .ms-loader { position: fixed; inset: 0; z-index: 2147483000; display: block; font-family: var(--ms-load-font); color: var(--ms-load-ivory); /* The curtain itself is transparent: the two panels below paint the black. */ background: transparent; -webkit-font-smoothing: antialiased; } .ms-loader[hidden] { display: none !important; } /* --- the two halves of the curtain ------------------------------------- */ .ms-loader__panel { position: absolute; left: 0; width: 100%; height: 50.5%; /* the half-percent overlap keeps a seam from showing */ /* * Each panel paints the SAME full-viewport gradient and then anchors it to * its own edge, so the two halves read as one unbroken field until they * actually part. Sizing the gradient to the panel instead would put a * visible band across the middle of the screen. */ background: radial-gradient(circle at 72% 18%, rgba(166, 124, 82, 0.16), transparent 46%), radial-gradient(circle at 14% 76%, rgba(180, 106, 60, 0.12), transparent 42%), var(--ms-load-black); background-size: 100vw 100vh; background-repeat: no-repeat; transform: translateY(0); transition: transform 1100ms cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; } .ms-loader__panel--top { top: 0; background-position: left top; } .ms-loader__panel--bottom { bottom: 0; background-position: left bottom; } /* The hairline where the curtain will part - a lit seam across the screen. */ .ms-loader__seam { position: absolute; top: 50%; left: 50%; width: 0; height: 1px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, var(--ms-load-gold-soft), transparent); opacity: 0; box-shadow: 0 0 24px rgba(215, 177, 137, 0.55); } /* Fine film grain so the black reads as material, not a flat wash. */ .ms-loader__grain { position: absolute; inset: -50%; opacity: 0.05; pointer-events: none; background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23n)'/%3E%3C/svg%3E"); animation: ms-grain 900ms steps(3) infinite; } /* --- centre stage ------------------------------------------------------- */ .ms-loader__core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.2vh, 30px); padding: 24px; text-align: center; transition: opacity 460ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 460ms ease; } /* --- the orbiting mark -------------------------------------------------- */ .ms-loader__mark { position: relative; display: grid; place-items: center; width: clamp(148px, 21vh, 208px); aspect-ratio: 1; } /* * Every rule inside the mark is written as `.ms-loader .ms-loader__x` on * purpose. Several page stylesheets set a blanket icon size on their own body * class - `.blog-page svg { width: 22px; height: 22px; stroke: currentColor }` * in mindspace-blog.css, and the same shape in the services, contact and about * sheets. Those selectors out-weigh a single class, so a plain * `.ms-loader__rings` would be shrunk to a 22px icon on those pages and the * orbit would collapse. The doubled class simply outranks them. * * The reset below catches any page sheet added later that does the same thing. */ .ms-loader svg { width: auto; height: auto; fill: none; stroke: none; } .ms-loader .ms-loader__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ms-loader .ms-loader__ring { fill: none; stroke: rgba(166, 124, 82, 0.3); stroke-width: 0.7; } /* Each arc draws itself on, then keeps turning at its own speed. */ .ms-loader .ms-loader__arc { fill: none; stroke: var(--ms-load-gold); stroke-width: 1.4; stroke-linecap: round; transform-origin: 100px 100px; stroke-dasharray: 150 520; stroke-dashoffset: 670; animation: ms-arc-draw 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards, ms-spin 4200ms linear 900ms infinite; } .ms-loader .ms-loader__arc--2 { stroke: rgba(215, 177, 137, 0.85); stroke-width: 1; stroke-dasharray: 90 400; stroke-dashoffset: 490; animation: ms-arc-draw 1200ms cubic-bezier(0.22, 1, 0.36, 1) 140ms forwards, ms-spin-rev 6400ms linear 1000ms infinite; } .ms-loader .ms-loader__arc--3 { stroke: rgba(166, 124, 82, 0.55); stroke-width: 0.9; stroke-dasharray: 40 300; stroke-dashoffset: 340; animation: ms-arc-draw 1200ms cubic-bezier(0.22, 1, 0.36, 1) 260ms forwards, ms-spin 9000ms linear 1100ms infinite; } /* Nodes riding the orbits - the thought travelling around the mind. */ .ms-loader .ms-loader__node { fill: var(--ms-load-gold-soft); transform-origin: 100px 100px; opacity: 0; animation: ms-node-in 600ms ease 700ms forwards, ms-spin 4200ms linear 900ms infinite; filter: drop-shadow(0 0 6px rgba(215, 177, 137, 0.9)); } .ms-loader .ms-loader__node--b { animation: ms-node-in 600ms ease 820ms forwards, ms-spin-rev 6400ms linear 1000ms infinite; } .ms-loader .ms-loader__logo { position: relative; z-index: 2; width: 44%; height: auto; opacity: 0; transform: scale(0.72); animation: ms-logo-in 1000ms cubic-bezier(0.22, 1, 0.36, 1) 260ms forwards; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.65)); } /* A slow gold pulse behind the mark so the centre never looks static. */ .ms-loader__pulse { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(166, 124, 82, 0.35), transparent 68%); animation: ms-pulse 3000ms ease-in-out infinite; } /* --- wordmark ----------------------------------------------------------- */ .ms-loader__word { display: flex; align-items: center; justify-content: center; gap: 0.03em; margin: 0; font-size: clamp(1.55rem, 5.4vw, 2.95rem); font-weight: 900; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; overflow: hidden; /* letters rise out from behind this edge */ padding-bottom: 0.06em; } .ms-loader__word span { display: inline-block; transform: translateY(115%); opacity: 0; animation: ms-letter-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* The second word is the accent: gold, lighter, same rhythm. */ .ms-loader__word--accent { font-size: clamp(0.6rem, 1.9vw, 0.82rem); font-weight: 700; letter-spacing: 0.62em; text-indent: 0.62em; /* balances the trailing letter-space */ color: var(--ms-load-gold); margin-top: -10px; } /* --- status line -------------------------------------------------------- */ .ms-loader__status { display: flex; align-items: center; justify-content: center; gap: 12px; height: 18px; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ms-load-slate); opacity: 0; animation: ms-fade-up 700ms ease 900ms forwards; } .ms-loader__status::before, .ms-loader__status::after { content: ""; width: clamp(18px, 6vw, 46px); height: 1px; background: linear-gradient(90deg, transparent, rgba(166, 124, 82, 0.7)); } .ms-loader__status::after { background: linear-gradient(90deg, rgba(166, 124, 82, 0.7), transparent); } .ms-loader__status span { min-width: 11ch; transition: opacity 240ms ease, transform 240ms ease; } .ms-loader__status span.is-swapping { opacity: 0; transform: translateY(-6px); } /* --- progress ----------------------------------------------------------- */ .ms-loader__meter { position: absolute; left: clamp(16px, 5vw, 68px); right: clamp(16px, 5vw, 68px); bottom: clamp(26px, 5vh, 54px); height: 1px; background: rgba(245, 242, 234, 0.12); } .ms-loader__bar { position: relative; display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--ms-load-gold), var(--ms-load-gold-soft)); transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1); } /* The travelling dot that sits on the head of the bar. */ .ms-loader__bar::after { content: ""; position: absolute; top: 50%; right: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--ms-load-gold-soft); transform: translate(50%, -50%); box-shadow: 0 0 12px rgba(215, 177, 137, 0.9); } .ms-loader__meta { position: absolute; left: clamp(16px, 5vw, 68px); right: clamp(16px, 5vw, 68px); bottom: calc(clamp(26px, 5vh, 54px) + 16px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ms-load-slate); opacity: 0; animation: ms-fade-up 700ms ease 1050ms forwards; } .ms-loader__count { display: flex; align-items: baseline; gap: 3px; font-size: clamp(1.5rem, 4.6vw, 2.3rem); font-weight: 300; letter-spacing: 0.02em; line-height: 0.9; color: var(--ms-load-ivory); font-variant-numeric: tabular-nums; } .ms-loader__count i { font-size: 0.6rem; font-style: normal; font-weight: 700; letter-spacing: 0.2em; color: var(--ms-load-gold); } .ms-loader__tagline { max-width: 46ch; text-align: right; line-height: 1.9; } /* --- exit --------------------------------------------------------------- */ .ms-loader.is-leaving .ms-loader__core { opacity: 0; transform: translateY(-18px) scale(0.97); filter: blur(6px); } .ms-loader.is-leaving .ms-loader__meter, .ms-loader.is-leaving .ms-loader__meta { opacity: 0; transition: opacity 300ms ease; animation: none; } .ms-loader.is-leaving .ms-loader__seam { width: 100%; opacity: 1; transition: width 460ms cubic-bezier(0.76, 0, 0.24, 1), opacity 200ms ease; } .ms-loader.is-parting .ms-loader__seam { opacity: 0; transition: opacity 320ms ease; } .ms-loader.is-parting .ms-loader__panel--top { transform: translateY(-100%); } .ms-loader.is-parting .ms-loader__panel--bottom { transform: translateY(100%); } /* --- the short version shown on later page views ------------------------ */ .ms-loader--express .ms-loader__word, .ms-loader--express .ms-loader__status, .ms-loader--express .ms-loader__meta, .ms-loader--express .ms-loader__meter { display: none; } .ms-loader--express .ms-loader__logo { animation-duration: 460ms; animation-delay: 0ms; } .ms-loader--express .ms-loader__arc { animation-duration: 620ms, 4200ms; animation-delay: 0ms, 400ms; } /* --- keyframes ---------------------------------------------------------- */ @keyframes ms-arc-draw { to { stroke-dashoffset: 0; } } @keyframes ms-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ms-spin-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes ms-node-in { to { opacity: 1; } } @keyframes ms-logo-in { to { opacity: 1; transform: scale(1); } } @keyframes ms-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.92); } 50% { opacity: 0.8; transform: scale(1.06); } } @keyframes ms-letter-rise { to { transform: translateY(0); opacity: 1; } } @keyframes ms-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes ms-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 3%); } 50% { transform: translate(3%, -4%); } 75% { transform: translate(-3%, -2%); } 100% { transform: translate(0, 0); } } /* --- narrow screens ----------------------------------------------------- */ @media (max-width: 620px) { .ms-loader__meta { flex-direction: column; align-items: flex-start; gap: 10px; } .ms-loader__tagline { text-align: left; letter-spacing: 0.18em; line-height: 1.7; } } @media (max-height: 560px) { .ms-loader__mark { width: clamp(96px, 18vh, 132px); } .ms-loader__status { display: none; } } /* --- reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ms-loader__grain, .ms-loader__pulse { animation: none; } .ms-loader .ms-loader__arc { stroke-dashoffset: 0; animation: none; } .ms-loader .ms-loader__node { opacity: 1; animation: none; } .ms-loader .ms-loader__logo, .ms-loader__word span, .ms-loader__status, .ms-loader__meta { animation-duration: 1ms; animation-delay: 0ms; opacity: 1; transform: none; } .ms-loader__core, .ms-loader__panel { transition-duration: 200ms; } .ms-loader.is-leaving .ms-loader__core { filter: none; } }