/*! * JRMS login — dark theme over the animated particle field (design v2). * * Implements * docs/design/login-reference/v2/animated-particle-field-graphic/project/Landing Background React.dc.html * * Everything here is gated on .jrms-login-dark, which particle-field.js toggles * on only while a login-layout route is mounted. Nothing can leak into * the signed-in app, and the selector does not rely on :has(). * * Applied as a stylesheet rather than by editing the compiled Vue chunks: the * layout is a two-column v-row whose render function is minified, and patches * 003 and 005 both showed how easily a structural edit there goes wrong in ways * a syntax check cannot see. Styling reaches the same result without touching * the render tree. * * Scope ids from the build: LoginLayout = data-v-0d5d3996, LoginPage = data-v-4ff8fb66. * DOM: .bg-white[data-v-4ff8fb66] is a VContainer; its only child is the VCard * that becomes the card. */ /* ---------- Outfit, self-hosted -------------------------------------------- */ /* The design loads Outfit from Google Fonts. Self-hosted instead: the login page is the one page every user hits, and a CDN font would send each of them to fonts.gstatic.com before they have signed in. Outfit is SIL Open Font License 1.1, so redistribution is permitted. Both files are the VARIABLE font — Google serves one file per subset covering the whole 100-900 axis, so the five weights the design uses cost two files, not ten. 47 KB total. */ @font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/woff2/outfit-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/woff2/outfit-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- the canvas host ------------------------------------------------ */ #jrms-particle-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #000; /* Matches the prototype's motion.div fade (1.1s, cubic-bezier(.22,.61,.36,1)). Starting at 0 hides the single frame drawn before the loop begins. */ opacity: 0; transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); } #jrms-particle-field.is-ready { opacity: 1; } #jrms-particle-field canvas { display: block; width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { /* The still frame is still drawn and shown; only the animation is suppressed (see play() in particle-field.js). Skip the fade as well. */ #jrms-particle-field { transition: none; } } /* ---------- page background ------------------------------------------------ */ .jrms-login-dark, .jrms-login-dark body { background: #000 !important; } /* #app must stay TRANSPARENT. It is a sibling of the canvas host and sits above it, so painting it black hides the animation completely — the page just renders as a black rectangle. The black comes from , which is behind the canvas in paint order. */ .jrms-login-dark #app { background: transparent !important; position: relative; z-index: 1; } /* Same reasoning for every shell element between #app and the login content. */ .jrms-login-dark #app > .v-application__wrap, .jrms-login-dark .v-application, .jrms-login-dark .v-application__wrap, .jrms-login-dark .v-main, .jrms-login-dark .v-container, .jrms-login-dark .v-row, .jrms-login-dark .v-col { background: transparent !important; } /* ---------- the left column disappears entirely ---------------------------- */ /* v1 kept it as a transparent spacer to hold the card right. v2 has no second column at all — it is one full-bleed background with a floating card — so the column is hidden outright and the card is positioned against the VIEWPORT below. Hidden with display:none, NOT removed: particle-field.js uses `.bg-login` as its route marker, and querySelector still finds a display:none element. */ .jrms-login-dark .bg-login[data-v-0d5d3996], .jrms-login-dark .bg-login { display: none !important; } /* ---------- the card container --------------------------------------------- */ /* Reproduces the design's own container: flex min-h-screen w-full items-center justify-center px-6 py-16 lg:px-[5vw] xl:justify-end Taken out of the Vuetify grid and pinned to the viewport so the breakpoints are the DESIGN's (1024/1280), not Vuetify's column widths. */ .jrms-login-dark .bg-white[data-v-4ff8fb66] { position: fixed; inset: 0; z-index: 2; display: flex !important; align-items: center; justify-content: center; padding: 64px 24px !important; overflow-y: auto; background: transparent !important; font-family: "Outfit", ui-sans-serif, system-ui, sans-serif; } @media (min-width: 1024px) { .jrms-login-dark .bg-white[data-v-4ff8fb66] { padding-left: 5vw !important; padding-right: 5vw !important; } } /* xl:justify-end — the card only moves right above 1280px. */ @media (min-width: 1280px) { .jrms-login-dark .bg-white[data-v-4ff8fb66] { justify-content: flex-end; } } /* ---------- the card ------------------------------------------------------- */ .jrms-login-dark .bg-white[data-v-4ff8fb66] > * { width: 100%; max-width: 452px; flex: 0 0 auto; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 44px; background: rgba(4, 8, 14, 0.72) !important; -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 48px 120px -32px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; color: #ffffff !important; text-align: center !important; } @media (max-width: 640px) { /* p-8 below the sm breakpoint */ .jrms-login-dark .bg-white[data-v-4ff8fb66] > * { padding: 32px; } } /* Flatten the cards NESTED INSIDE the card — note "> * .v-card", not ".v-card". The direct child of .bg-white is itself a v-card (it carries shadow-none border-none w-100), so a blanket .v-card rule would strip the background off the very element styled above and leave the content floating on the page with no card at all. */ .jrms-login-dark .bg-white[data-v-4ff8fb66] > * .v-card, .jrms-login-dark .bg-white[data-v-4ff8fb66] > * .v-sheet { background: transparent !important; box-shadow: none !important; color: inherit !important; } /* ---------- the logo ------------------------------------------------------- */ /* The JRMS lockup. It has to be added here because the original was baked INTO the background photograph — LoginLayout renders no logo element at all. 898x313 (aspect 2.869), so 34px tall is 97.5px wide; the design's "left: 131px" is the tool's way of centring that inside the 364px content box (the true centring offset is 133px), not a deliberate offset. */ .jrms-login-dark .bg-white[data-v-4ff8fb66] > *::before { content: ""; display: block; width: 98px; height: 34px; margin: 0 auto 40px; background: url("/assets/png/logo-jrms-login.png") center / contain no-repeat; mix-blend-mode: screen; } /* ---------- typography ------------------------------------------------------ */ /* "Welcome to JRMS" */ .jrms-login-dark .bg-white[data-v-4ff8fb66] .font-34-800 { font-family: inherit; font-size: 36px !important; font-weight: 600 !important; line-height: 1.08 !important; letter-spacing: -0.025em; color: #ffffff !important; margin: 0 0 14px !important; text-align: center !important; text-wrap: balance; } /* "Please login to get started" */ .jrms-login-dark .bg-white[data-v-4ff8fb66] .font-7E7E7E { font-family: inherit; font-size: 15px !important; font-weight: 300 !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.46) !important; margin: 0 0 36px !important; text-align: center !important; } .jrms-login-dark .bg-white[data-v-4ff8fb66], .jrms-login-dark .bg-white[data-v-4ff8fb66] * { font-family: "Outfit", ui-sans-serif, system-ui, sans-serif; } /* ---------- the Microsoft button -------------------------------------------- */ .jrms-login-dark .btn-login[data-v-4ff8fb66] { display: flex !important; width: 100% !important; align-items: center; justify-content: center; gap: 14px; min-height: 0 !important; height: auto !important; padding: 17px 20px !important; border-radius: 14px !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; /* the bundle renders "Sign in with Microsoft"; the design titles every word */ text-transform: capitalize !important; color: #ffffff !important; background: #0a2e8c !important; border: none !important; box-shadow: 0 14px 34px -14px rgba(10, 46, 140, 0.95) !important; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .jrms-login-dark .btn-login[data-v-4ff8fb66]:hover { background: #123dae !important; box-shadow: 0 18px 40px -12px rgba(18, 61, 174, 0.95) !important; } .jrms-login-dark .btn-login[data-v-4ff8fb66]:active { background: #092777 !important; transform: translateY(1px); } /* The four-square Microsoft mark: 9px tiles with a 2.5px gutter, exactly as the design lays them out, inlined as a data URI so the button needs no render-tree change and no extra request. Official brand colours. */ .jrms-login-dark .btn-login[data-v-4ff8fb66] .v-btn__content { gap: 14px; } .jrms-login-dark .btn-login[data-v-4ff8fb66] .v-btn__content::before { content: ""; display: inline-block; width: 20.5px; height: 20.5px; flex: 0 0 auto; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,"); } /* ---------- the help block --------------------------------------------------- */ /* Last child of the card, carrying .text-center in the compiled render. */ .jrms-login-dark .bg-white[data-v-4ff8fb66] > * > .text-center { margin-top: 36px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; align-items: center; gap: 10px; } /* "Need Help?" */ .jrms-login-dark .bg-white[data-v-4ff8fb66] > * > .text-center > *:first-child { font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.4) !important; } /* the support address, from /api/support rather than hardcoded */ .jrms-login-dark .bg-white[data-v-4ff8fb66] .font-0075FF, .jrms-login-dark .bg-white[data-v-4ff8fb66] a { font-size: 14.5px !important; color: #4fd3f2 !important; text-decoration: none; } .jrms-login-dark .bg-white[data-v-4ff8fb66] .font-0075FF:hover, .jrms-login-dark .bg-white[data-v-4ff8fb66] a:hover { color: #8de6fa !important; } .jrms-login-dark .bg-white[data-v-4ff8fb66] .font-535353 { color: rgba(255, 255, 255, 0.4) !important; justify-content: center !important; } /* The bundle ships a blue mail PNG that cannot be recoloured to #4FD3F2, so it is replaced with the design's stroked envelope, drawn in the link colour. */ .jrms-login-dark .bg-white[data-v-4ff8fb66] > * > .text-center img[alt="mail"] { display: none !important; } .jrms-login-dark .bg-white[data-v-4ff8fb66] > * > .text-center .font-0075FF::before { content: ""; display: inline-block; width: 17px; height: 17px; margin-right: 8px; vertical-align: -3px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,"); } .jrms-login-dark .bg-white[data-v-4ff8fb66] .v-divider { border-color: rgba(255, 255, 255, 0.08) !important; } /* ---------- break-glass password form ---------------------------------------- */ /* /login?local=1 still renders the username/password form. Keep those controls legible on the dark card — without this they are dark-on-dark, and this is the only way back in during an Entra outage. */ .jrms-login-dark .bg-white[data-v-4ff8fb66] .v-field__input, .jrms-login-dark .bg-white[data-v-4ff8fb66] .v-label, .jrms-login-dark .bg-white[data-v-4ff8fb66] input { color: #e9edf5 !important; } .jrms-login-dark .bg-white[data-v-4ff8fb66] .v-field__outline { --v-field-border-opacity: 0.28; } .jrms-login-dark .bg-white[data-v-4ff8fb66] .v-field { background: rgba(255, 255, 255, 0.04) !important; } .jrms-login-dark .bg-white[data-v-4ff8fb66] .font-14-400 { color: rgba(255, 255, 255, 0.6) !important; }