/* ═══════════════════════════════════════════════════════════════════════ RASTA Collective — page shell, the fixed logo unit, footer ═══════════════════════════════════════════════════════════════════════ */ main { display: block; } .container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; } /* Scroll is locked while the preloader is up. Released before about-pin.js measures — measuring against a locked gives a wrong pin length. */ body.is-loading { overflow: hidden; } /* ── The logo unit ────────────────────────────────────────────────────── Direct child of , never inside .hero: position:fixed resolves against the nearest ancestor carrying a transform/filter/will-change, and .hero__figure animates a transform. Nested, this would scroll away. */ /* Top-right on desktop, a centred full-width bar below 1024 (see the media query further down). The marks are anchored to the same edge the unit is, so the long lockup and the compact one hand over without drifting sideways — change one and you have to change the other. */ .site-logo { position: fixed; top: clamp(14px, 2.4vw, 30px); right: clamp(14px, 2.4vw, 30px); z-index: var(--z-logo); } /* Two lockups in one slot. The long one reads as the hero's title; scrolled, it hands over to the compact square mark so it stops competing with the content. The box itself resizes with them, so the link's hit area never outlives the artwork inside it. */ /* Ratios come from css/logo-masks.css, which is generated alongside the mask data itself — so re-cropping a lockup can never leave a stale literal here. */ :root { --logo-long-w: clamp(158px, 34vw, 330px); --logo-square-w: clamp(46px, 6vw, 84px); --logo-w: var(--logo-long-w); --logo-ratio: var(--logo-long-mask-num); } html.logo-compact { --logo-w: var(--logo-square-w); --logo-ratio: var(--logo-square-mask-num); } .site-logo__link { position: relative; display: block; width: var(--logo-w); height: calc(var(--logo-w) / var(--logo-ratio)); border-radius: var(--radius); /* Box resizes toward the right (parent is right-anchored). Marks keep their own sizes so they do not snap with --logo-w, which is not an interpolating custom property. */ transition: width .55s var(--ease-out), height .55s var(--ease-out); } /* Below 1024 the content column runs edge to edge, so a bare floating logo lands directly on top of form labels and body copy. It becomes a full-width bar instead — content passing under an opaque header is what every mobile site does and what people expect, whereas text threading around a free-floating mark just reads as broken. Above 1024 the container gutters keep the logo clear of everything, so it stays a bare mark and the bar would only add a stray band. backdrop-filter establishes a containing block — harmless here, because .site-logo IS the fixed element and has no fixed or sticky descendants. */ @media (max-width: 1023.98px) { .site-logo { top: 0; left: 0; right: 0; padding: var(--s-3) var(--gutter); background: var(--logo-plate, transparent); border-bottom: 1px solid var(--logo-plate-rule, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); } /* Centred, not pushed to one end. The mobile hero is a single centred column — headline, buttons, artwork all on one axis — and a lockup shoved into the right corner is the one thing breaking that axis. The link has an explicit width and its marks are absolutely positioned, so `fit-content` would collapse it to zero; auto margins are what centre it. */ .site-logo__link { margin-inline: auto; } html.logo-dark .site-logo { --logo-plate: rgba(11, 11, 11, .88); --logo-plate-rule: rgba(244, 236, 228, .10); } html.logo-light .site-logo { --logo-plate: rgba(244, 236, 228, .92); --logo-plate-rule: rgba(26, 22, 20, .10); } } /* Each lockup is one flat-colour artwork shipped once as an alpha mask and painted with background-color, instead of a set of coloured rasters crossfaded. Crossfading two opaque shapes passes through a muddy blended midpoint; a colour transition is a genuine continuous ramp. It is also a fraction of the bytes, and a new brand colour costs a hex value, not an asset. */ .site-logo__mark { position: absolute; top: 0; right: 0; display: block; background-color: var(--logo-ink, var(--yellow)); transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; transition: background-color var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); } /* Each mark keeps its own size. Sharing --logo-w made both snap to the destination size on the same frame as the class toggle, so the long lockup collapsed into a tiny yellow flash before the square faded in. */ .site-logo__mark--long { width: var(--logo-long-w); aspect-ratio: var(--logo-long-mask-ratio); -webkit-mask: var(--logo-long-mask) right center / contain no-repeat; mask: var(--logo-long-mask) right center / contain no-repeat; opacity: 1; /* Incoming: wait for the square to leave. Outgoing: fade immediately. */ transition: opacity .4s var(--ease-out) .14s, background-color var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); } .site-logo__mark--square { width: var(--logo-square-w); aspect-ratio: var(--logo-square-mask-ratio); -webkit-mask: var(--logo-square-mask) right center / contain no-repeat; mask: var(--logo-square-mask) right center / contain no-repeat; opacity: 0; transition: opacity .22s var(--ease-out), background-color var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); } html.logo-compact .site-logo__mark--long { opacity: 0; transition: opacity .22s var(--ease-out), background-color var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); } html.logo-compact .site-logo__mark--square { opacity: 1; transition: opacity .4s var(--ease-out) .14s, background-color var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); } /* Raster fallback, revealed only where mask-image is unsupported — otherwise a maskless browser renders a solid coloured rectangle. It ships with no src; main.js sets one only on that branch, so the normal path never fetches it and this costs nothing. */ .site-logo__fallback { display: none; width: 100%; height: auto; } @supports not ((-webkit-mask-size: contain) or (mask-size: contain)) { .site-logo__mark { display: none; } .site-logo__fallback { display: block; } } /* Yellow over the dark hero; red over paper. Drop-shadow on the collage. */ html.logo-dark .site-logo__mark { --logo-ink: var(--yellow); filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .55)); } html.logo-light .site-logo__mark { --logo-ink: var(--red); filter: none; } /* ── Section grounds ────────────────────────────────────────────────────── */ [data-logo="light"] { background: var(--paper); color: var(--text-on-light); } /* ── Footer ─────────────────────────────────────────────────────────────── */ .site-foot { background: var(--ink); color: var(--text-on-dark); padding-block: var(--s-9) var(--s-8); } .site-foot__inner { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; display: grid; gap: var(--s-3); } /* One row, two lockups, aligned on the same baseline. */ .site-foot__lockups { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6) var(--s-8); flex-wrap: wrap; padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule-on-dark); } .site-foot__brand { display: block; flex: 0 1 auto; } .site-foot__brand-mark { display: block; width: clamp(190px, 26vw, 320px); aspect-ratio: var(--logo-long-mask-ratio); background-color: var(--red); -webkit-mask: var(--logo-long-mask) left bottom / contain no-repeat; mask: var(--logo-long-mask) left bottom / contain no-repeat; } /* Same @supports guard as the header mark: without masks this would be a solid block, so hide it and let the tagline carry the wordmark. */ @supports not ((-webkit-mask-size: contain) or (mask-size: contain)) { .site-foot__brand-mark { display: none; } } .site-foot__tag { color: var(--yellow); font-size: var(--t-lead); margin-top: var(--s-6); } .site-foot__org { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; color: var(--text-on-dark-dim); font-size: var(--t-small); } .site-foot__im { display: block; border-radius: var(--radius); opacity: .8; transition: opacity var(--dur-fast) var(--ease-out); } .site-foot__im:hover { opacity: 1; } .site-foot__im img { width: 132px; height: auto; } .site-foot .link-out { color: var(--yellow); } .site-foot .link-out:hover { box-shadow: inset 0 -6px 0 0 var(--red); }