/* ============================================================================= signin.css — the photographic backdrop behind the Service Desk sign-in. Loaded only by /index.html, and only DOING anything while signed out: index.html puts `sd-photo` on when it shows the sign-in view and takes it off the moment the account is recognised. Nothing here touches the desk or the portal. Three photographs — the numbers being read, the team on the headsets, the idea being argued out — crossfade behind a scrim. They are attached by JS, not by this file, so a customer who is already signed in and about to be redirected downloads none of them, and the second and third arrive only after the page has finished loading. See index.html. Unlike LearnX, this page's words do not live in a card, so the hero BECOMES one here: a glass panel that keeps every line at full contrast no matter what is behind it. ============================================================================= */ :root { --sd-scrim-top: rgba(245, 247, 251, .44); --sd-scrim-mid: rgba(245, 247, 251, .72); --sd-scrim-tint: rgba(47, 95, 208, .12); --sd-photo-filter: saturate(1.05) contrast(1.02); } @media (prefers-color-scheme: dark) { :root { /* These photographs are already dark. Dimming them the way a light theme dims a bright one leaves a black rectangle, so dark mode LIFTS the picture and leans on the panel for contrast instead. */ --sd-scrim-top: rgba(8, 11, 20, .34); --sd-scrim-mid: rgba(8, 11, 20, .62); --sd-scrim-tint: rgba(47, 95, 208, .30); --sd-photo-filter: saturate(1.06) brightness(1.04); } } /* ---- the stage ----------------------------------------------------------- */ .sd-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .8s var(--sd-ease); } body.sd-photo .sd-stage { opacity: 1; } .sd-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(--sd-photo-filter); opacity: 0; } /* Until the crossfade is armed, the first photograph simply is the backdrop. */ .sd-stage__shot:first-child { opacity: 1; } .sd-stage__scrim { position: absolute; inset: 0; background: radial-gradient(130% 85% at 50% 0%, var(--sd-scrim-tint), transparent 62%), linear-gradient(180deg, var(--sd-scrim-top) 0%, var(--sd-scrim-mid) 48%, var(--sd-bg) 94%); } /* ---- the crossfade ------------------------------------------------------- */ /* One 27s cycle, three photographs, nine seconds each. The negative delays stagger them; the shared -1.5s offset starts the first already faded in, so arming the animation is invisible. */ body.sd-photo.sd-photo--playing .sd-stage__shot { animation: sd-shot 27s cubic-bezier(.4, 0, .2, 1) infinite; } body.sd-photo.sd-photo--playing .sd-stage__shot:nth-child(1) { animation-delay: -1.5s; } body.sd-photo.sd-photo--playing .sd-stage__shot:nth-child(2) { animation-delay: -19.5s; } body.sd-photo.sd-photo--playing .sd-stage__shot:nth-child(3) { animation-delay: -10.5s; } @keyframes sd-shot { 0% { opacity: 0; transform: scale(1.085); } 4% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; transform: scale(1); } 41% { transform: scale(1.085); } /* reset while nobody can see it */ 100% { opacity: 0; transform: scale(1.085); } } /* ---- the hero, as a panel ------------------------------------------------ */ /* The sign-in copy sits straight on the page normally. Over a photograph it needs a surface of its own, so it gets one — and the panel is what makes this screen read as software rather than as a poster. */ body.sd-photo .sd-hero { margin: 6vh auto 0; padding: 34px 28px 30px; width: min(100%, 440px); border-radius: var(--sd-radius-lg); background: color-mix(in srgb, var(--sd-surface) 84%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid color-mix(in srgb, var(--sd-surface) 55%, var(--sd-border)); box-shadow: var(--sd-shadow-lg); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.sd-photo .sd-hero { background: color-mix(in srgb, var(--sd-surface) 97%, transparent); } } /* The "we don't recognise this account" card gets the same treatment, because it appears on the same backdrop. */ body.sd-photo .sd-card { background: color-mix(in srgb, var(--sd-surface) 86%, transparent); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-color: color-mix(in srgb, var(--sd-surface) 55%, var(--sd-border)); box-shadow: var(--sd-shadow-lg); } /* 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.sd-photo .sd-gbtn { box-shadow: var(--sd-shadow); } @media (max-width: 640px) { :root { --sd-scrim-top: rgba(245, 247, 251, .58); --sd-scrim-mid: rgba(245, 247, 251, .80); } @media (prefers-color-scheme: dark) { :root { --sd-scrim-top: rgba(8, 11, 20, .44); --sd-scrim-mid: rgba(8, 11, 20, .70); } } body.sd-photo .sd-hero { margin-top: 3vh; padding: 26px 20px 24px; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) 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) { body.sd-photo.sd-photo--playing .sd-stage__shot { animation: none; } .sd-stage__shot:not(:first-child) { display: none; } .sd-stage { transition: none; } }