/* ============================================================================= signin.css — the photographic backdrop behind the LearnX sign-in card. Loaded only by /learnx/index.html, and only DOING anything while signed out: index.html puts `lx-photo` on when it shows the sign-in view and takes it off the moment someone is routed to their classes. Nothing here touches the rest of the app. Three photographs — a class in a studio, a lecture room, a lesson being filmed — crossfade behind a scrim. They are set by JS rather than by this file, so a returning student who is signed in and about to be redirected never downloads a single one of them, and the second and third arrive after the page has finished loading. See index.html. The photo is decoration: every word on this page sits on the glass card above it, and the scrim fades the image into the page background before it reaches the footer, so nothing is ever read off a photograph. ============================================================================= */ :root { /* The wash over the photo. Light enough to keep the picture, heavy enough that the card is unmistakably the thing you are meant to look at. */ --lx-scrim-top: rgba(246, 247, 251, .42); --lx-scrim-mid: rgba(246, 247, 251, .66); --lx-scrim-tint: rgba(255, 255, 255, .30); --lx-photo-filter: saturate(1.06) contrast(1.02); } @media (prefers-color-scheme: dark) { :root { --lx-scrim-top: rgba(9, 12, 23, .44); --lx-scrim-mid: rgba(9, 12, 23, .70); --lx-scrim-tint: rgba(99, 102, 241, .20); --lx-photo-filter: saturate(1.04) brightness(.95); } } /* ---- the stage ----------------------------------------------------------- */ /* Fixed and behind everything: the body background still paints on the canvas underneath, so the page looks finished before a single pixel of photo has arrived, and looks finished again if one never does. */ .lx-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .8s var(--lx-ease); } body.lx-photo .lx-stage { opacity: 1; } .lx-stage__shot { position: absolute; inset: -2%; /* room for the drift, so no edge shows */ background-size: cover; background-position: center; background-repeat: no-repeat; filter: var(--lx-photo-filter); opacity: 0; transition: opacity 1.6s var(--lx-ease); } /* index.html moves this class along; exactly one shot wears it at a time. The cycle is a class toggle rather than a keyframed sequence because the number of photographs is per-institute (see js/signin-photos.js) and staggered keyframes would have to be regenerated for every possible count. */ .lx-stage__shot.is-on { opacity: 1; animation: lx-drift 14s var(--lx-ease) forwards; } .lx-stage__scrim { position: absolute; inset: 0; background: radial-gradient(130% 85% at 50% 0%, var(--lx-scrim-tint), transparent 62%), linear-gradient(180deg, var(--lx-scrim-top) 0%, var(--lx-scrim-mid) 46%, var(--lx-bg) 94%); } /* ---- the drift ----------------------------------------------------------- */ /* A few percent of scale over fourteen seconds — slow enough that you cannot catch it moving, present enough that the screen is never quite static. It restarts each time a photograph comes back round, because the class does. */ @keyframes lx-drift { from { transform: scale(1.075); } to { transform: scale(1); } } /* ---- what sits on top ---------------------------------------------------- */ /* The card turns to glass. Same surface colour, now letting the photograph through — which is the whole reason the photograph is there. */ body.lx-photo .lx-card { background: color-mix(in srgb, var(--lx-surface) 84%, transparent); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-color: color-mix(in srgb, var(--lx-surface) 55%, var(--lx-border)); box-shadow: var(--lx-shadow-lg); } /* Firefox before 103 and anything else without backdrop-filter gets a solid card rather than grey text on a photograph. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.lx-photo .lx-card { background: color-mix(in srgb, var(--lx-surface) 97%, transparent); } } /* The header stops being a bar and becomes part of the picture. */ body.lx-photo .lx-header { background: color-mix(in srgb, var(--lx-surface) 46%, transparent); border-bottom-color: transparent; } /* The institute's name is the one line here we do not control the length of, and a 480px card turns "Welcome to Analytics online class" into a widow. Balancing the wrap costs nothing and fixes every name at once. */ body.lx-photo .lx-hero__title { text-wrap: balance; } /* Google's button keeps its own white — it is Google's mark, not our surface — so it only needs the shadow that lifts it off a photograph. */ body.lx-photo .lx-btn--google { box-shadow: var(--lx-shadow); } /* Small screens: less card, more photo, so the wash carries more of the work. */ @media (max-width: 640px) { :root { --lx-scrim-top: rgba(246, 247, 251, .58); --lx-scrim-mid: rgba(246, 247, 251, .80); } @media (prefers-color-scheme: dark) { :root { --lx-scrim-top: rgba(9, 12, 23, .54); --lx-scrim-mid: rgba(9, 12, 23, .78); } } body.lx-photo .lx-card { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } } /* Someone who has asked for less movement gets one still photograph, and the other two are never fetched at all (index.html checks the same query). */ @media (prefers-reduced-motion: reduce) { .lx-stage__shot, .lx-stage { transition: none; } .lx-stage__shot.is-on { animation: none; } }