/* ============================================ Logo stack loader (Osmo Supply resource) Pairs with js/logo-loader.js and the [data-logo-loader-init] block at the top of in index.html. A full-screen plate over the page while it loads: the wordmark fans out into a stack of copies, tilts, snaps back into one, and the plate peels up off the page. The choreography is GSAP, in the script; this sheet is the plate, the stack and the bar in their starting state. To switch the loader off, remove (or comment out) the markup block in index.html. The script finds nothing and returns, and this sheet then styles nothing — neither needs touching. Osmo's own logo and colours are swapped for ours: the wordmark is the same .brand span the nav and the footer carry, and the plate takes the dark/light pair from tokens.css. ============================================ */ .logo-loader { position: fixed; inset: 0%; /* Over the nav (100) and the marquee cursor (200): while it is up, nothing on the page should show through or ride on top. */ z-index: 300; display: flex; align-items: center; justify-content: center; color: var(--light); /* Shorter than Osmo's 40em, so the vanishing point is closer and the column of words falls away harder: each copy is noticeably smaller than the one above it rather than merely dimmer. */ perspective: 24em; } .logo-loader__bg { position: absolute; inset: 0%; z-index: 0; background-color: var(--dark); transform-origin: 50% 0%; } .logo-loader__stack { position: relative; z-index: 1; display: grid; /* The wordmark's size and the depth the script fans the copies out to (2.5em a step) are both read off this. */ font-size: 1.5rem; transform-style: preserve-3d; } /* Everything marked to reset starts invisible, so nothing flashes before GSAP takes over; the timeline's first step turns it back on. */ [data-logo-loader-reset] { opacity: 0; } .logo-loader__logo { grid-column: 1; grid-row: 1; /* The copies stack on the same cell, and the cell is as wide as the widest of them — the wordmark. Each is centred in it, so the column of words runs down the middle under the wordmark whatever their lengths. */ display: flex; justify-content: center; white-space: nowrap; } /* A copy carrying a word is only that word: the name in front of it is taken out of the flow entirely, so the centring above has nothing but the word to centre. */ .logo-loader__logo.is-word .logo-loader__prefix { display: none; } .logo-loader__track { position: absolute; bottom: 3.5em; left: 0%; right: 0%; z-index: 1; width: 8em; height: 0.25em; margin-left: auto; margin-right: auto; overflow: hidden; border-radius: 1px; background-color: color-mix(in srgb, currentcolor 15%, transparent); } .logo-loader__bar { position: absolute; inset: 0%; background-color: currentcolor; transform-origin: 0% 50%; transform: scaleX(0); }