/* ═══════════════════════════════════════════════════════════════════════════ SRIDIRA CMS · Premium sign-in (login-premium.css) Visual layer for #loginView ONLY. Every selector is scoped under #loginView.lx (or html.lx-* flags set by login-premium.js), so no other screen, the kiosk, or the cost-sheet portal can be affected. Nothing here changes how credentials are collected or submitted: the form, its ids and portal.js's handlers are untouched. Motion uses transform and opacity only, honours prefers-reduced-motion, and pauses when the tab is hidden. Removing this file and its restores the previous look. ═══════════════════════════════════════════════════════════════════════════ */ #loginView.lx { --lx-ink: #e8eefb; --lx-ink-2: #b4c2da; --lx-ink-3: #8c9bb6; --lx-line: rgba(148, 178, 255, .14); --lx-line-2: rgba(148, 178, 255, .26); --lx-blue: #3b82f6; --lx-blue-2: #2563eb; --lx-cyan: #38bdf8; --lx-violet: #8b5cf6; --lx-gold: #e6cc7a; --lx-danger: #fca5a5; --lx-card: rgba(12, 19, 38, .62); --lx-field: rgba(8, 14, 30, .58); --lx-ease: cubic-bezier(.16, 1, .3, 1); --lx-ease-io: cubic-bezier(.65, 0, .35, 1); position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 0; padding: max(28px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); overflow-x: hidden; background: #060b18; color: var(--lx-ink); font-family: var(--font-sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); -webkit-font-smoothing: antialiased; color-scheme: dark; } #loginView.lx[hidden] { display: none !important; } #loginView.lx *, #loginView.lx *::before, #loginView.lx *::after { box-sizing: border-box; } /* ── Background stage ─────────────────────────────────────────────────── */ #loginView.lx .lx-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 90% at 78% 8%, #0f2350 0%, rgba(15, 35, 80, 0) 55%), radial-gradient(90% 70% at 8% 100%, #0b1f3d 0%, rgba(11, 31, 61, 0) 60%), linear-gradient(180deg, #070d1d 0%, #050914 100%); animation: lx-stage-in .7s var(--lx-ease) both; } #loginView.lx .lx-aurora { position: absolute; border-radius: 50%; opacity: .6; will-change: transform; transform: translate3d(0, 0, 0); } #loginView.lx .lx-a1 { width: 46vw; height: 46vw; left: -10vw; top: -14vw; background: radial-gradient(closest-side, rgba(37, 99, 235, .55), rgba(37, 99, 235, 0)); animation: lx-drift-a 26s var(--lx-ease-io) infinite alternate; } #loginView.lx .lx-a2 { width: 40vw; height: 40vw; left: 16vw; top: 22vh; background: radial-gradient(closest-side, rgba(124, 58, 237, .38), rgba(124, 58, 237, 0)); animation: lx-drift-b 32s var(--lx-ease-io) infinite alternate; } #loginView.lx .lx-a3 { width: 36vw; height: 36vw; left: -4vw; bottom: -18vw; background: radial-gradient(closest-side, rgba(14, 165, 233, .32), rgba(14, 165, 233, 0)); animation: lx-drift-c 38s var(--lx-ease-io) infinite alternate; } /* Blueprint grid: a static texture, slowly panned with transform only. */ #loginView.lx .lx-grid { position: absolute; inset: -64px; background-image: linear-gradient(rgba(120, 160, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 160, 255, .07) 1px, transparent 1px), linear-gradient(rgba(120, 160, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 160, 255, .035) 1px, transparent 1px); background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 85%); } #loginView.lx .lx-scene { contain: strict; position: absolute; left: 0; right: 0; bottom: 0; height: min(40vh, 380px); opacity: .8; } #loginView.lx .lx-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #loginView.lx .lx-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(5, 9, 20, 0) 40%, rgba(5, 9, 20, .55) 100%), linear-gradient(180deg, rgba(5, 9, 20, 0) 55%, rgba(5, 9, 20, .55) 100%); } /* Skyline strokes: drawn once on load, then they just breathe. */ #loginView.lx .lx-bld { fill: url(#lxBldFill); stroke: url(#lxBldStroke); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; animation: lx-draw 2.4s var(--lx-ease) both; } #loginView.lx .lx-far .lx-bld { opacity: .55; stroke-width: .9; } #loginView.lx .lx-win { fill: #93c5fd; opacity: .18; } #loginView.lx .lx-win.on { animation: lx-twinkle 11s ease-in-out infinite; } #loginView.lx .lx-ground { stroke: rgba(147, 197, 253, .35); stroke-width: 1; vector-effect: non-scaling-stroke; } #loginView.lx .lx-arc { fill: none; stroke: rgba(96, 165, 250, .16); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; animation: lx-draw 2.8s var(--lx-ease) .6s both; } #loginView.lx .lx-arc-pulse { fill: none; stroke: url(#lxPulse); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: .06 .94; stroke-dashoffset: 1; opacity: 0; animation: lx-burst 9s linear infinite; } #loginView.lx .lx-beacon { fill: #bfdbfe; opacity: .45; } /* ── Layout ───────────────────────────────────────────────────────────── */ #loginView.lx .lx-hero { display: none; } #loginView.lx .lx-main { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: stretch; gap: 18px; } @media (min-width: 1024px) { #loginView.lx { grid-template-columns: minmax(0, 600px) minmax(400px, 440px); column-gap: clamp(48px, 7vw, 112px); align-items: center; justify-content: center; padding-left: clamp(40px, 6vw, 96px); padding-right: clamp(40px, 6vw, 96px); } #loginView.lx .lx-hero { display: flex; flex-direction: column; gap: 18px; width: 100%; } #loginView.lx .lx-main { justify-self: stretch; max-width: none; } /* The hero carries the brand on wide screens; avoid saying it twice. */ #loginView.lx .login-card .login-brand { display: none; } } @media (max-height: 640px) { #loginView.lx { align-content: start; } } /* ── Hero (wide screens) ──────────────────────────────────────────────── */ #loginView.lx .lx-hero-brand { display: flex; align-items: center; gap: 14px; animation: lx-rise .55s var(--lx-ease) .2s both; } #loginView.lx .lx-eyebrow { margin: 10px 0 0; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #93c5fd; animation: lx-rise .55s var(--lx-ease) .3s both; } #loginView.lx .lx-headline { margin: 0; font-size: clamp(2rem, 3.1vw, 2.9rem); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; color: #f1f5ff; animation: lx-rise .6s var(--lx-ease) .36s both; } #loginView.lx .lx-headline span { background: linear-gradient(92deg, #93c5fd 0%, #60a5fa 35%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } #loginView.lx .lx-lede { margin: 0; max-width: 34em; font-size: 1rem; line-height: 1.6; color: var(--lx-ink-2); animation: lx-rise .6s var(--lx-ease) .44s both; } #loginView.lx .lx-caps { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; animation: lx-rise .6s var(--lx-ease) .5s both; } #loginView.lx .lx-caps li { font-size: .76rem; font-weight: 500; color: #cbd8f0; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--lx-line); background: rgba(10, 17, 36, .72); } #loginView.lx .lx-flow { position: relative; margin-top: 14px; padding: 18px 18px 14px; border-radius: 18px; border: 1px solid var(--lx-line); background: linear-gradient(180deg, rgba(13, 22, 46, .9), rgba(9, 15, 32, .82)); box-shadow: 0 20px 50px -24px rgba(2, 6, 23, .9); animation: lx-rise .7s var(--lx-ease) .58s both; } #loginView.lx .lx-flow svg { display: block; width: 100%; height: auto; overflow: visible; } #loginView.lx .lx-flow-note { margin: 10px 2px 0; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #6f80a0; } #loginView.lx .lx-fl-base { fill: none; stroke: rgba(148, 178, 255, .22); stroke-width: 1.5; stroke-dasharray: 1; animation: lx-draw 1.6s var(--lx-ease) .7s both; } #loginView.lx .lx-fl-pulse { fill: none; stroke: url(#lxFlowPulse); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .09 .91; stroke-dashoffset: 1; opacity: 0; animation: lx-flow-run 7s linear 1.4s infinite; } #loginView.lx .lx-node { animation: lx-node-in .5s var(--lx-ease) both; transform-box: fill-box; transform-origin: center; } #loginView.lx .lx-node-core { fill: #0c1734; stroke: rgba(147, 197, 253, .55); stroke-width: 1.5; } #loginView.lx .lx-node-dot { fill: #93c5fd; } #loginView.lx .lx-node-halo { fill: rgba(96, 165, 250, .35); opacity: 0; transform-box: fill-box; transform-origin: center; animation: lx-halo 7s ease-out 1.4s infinite; } #loginView.lx .lx-node-label { fill: #a9b8d4; font-size: 12px; font-weight: 500; letter-spacing: .01em; } /* ── Card ─────────────────────────────────────────────────────────────── */ #loginView.lx .login-card { position: relative; width: 100%; max-width: none; margin: 0; padding: 34px 32px 28px; border-radius: 22px; background: var(--lx-card) !important; border: 1px solid rgba(148, 178, 255, .16) !important; -webkit-backdrop-filter: blur(16px) saturate(135%) !important; backdrop-filter: blur(16px) saturate(135%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 0 0 1px rgba(5, 9, 20, .4), 0 30px 80px -20px rgba(2, 6, 23, .85), 0 12px 30px -12px rgba(37, 99, 235, .25) !important; color: var(--lx-ink); animation: lx-card-in .58s var(--lx-ease) .35s both; transition: border-color .35s ease, box-shadow .35s ease; } /* Luminous edge: a soft top highlight plus a pointer-following sheen. */ #loginView.lx .login-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(420px circle at var(--lx-mx, 50%) var(--lx-my, 0%), rgba(147, 197, 253, .55), transparent 40%), linear-gradient(180deg, rgba(147, 197, 253, .35), rgba(147, 197, 253, 0) 38%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; } #loginView.lx .login-card:focus-within { border-color: rgba(96, 165, 250, .32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 0 0 1px rgba(5, 9, 20, .4), 0 30px 90px -20px rgba(2, 6, 23, .9), 0 18px 50px -16px rgba(37, 99, 235, .42) !important; } #loginView.lx .login-card.lx-alert { border-color: rgba(248, 113, 113, .45) !important; } #loginView.lx .login-brand { margin-bottom: 22px; animation: lx-rise .55s var(--lx-ease) .2s both; } #loginView.lx .brand-mark { position: relative; width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; background: linear-gradient(145deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%) !important; color: #fff !important; font-weight: 700; font-size: 1rem; letter-spacing: .02em; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 8px 22px -6px rgba(37, 99, 235, .7) !important; overflow: hidden; } #loginView.lx .brand-mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: lx-sheen 1.1s var(--lx-ease) .65s both; } #loginView.lx .lx-hero .brand-mark { width: 52px; height: 52px; border-radius: 14px; font-size: 1.15rem; } #loginView.lx .brand-name { color: #f1f5ff !important; letter-spacing: .24em; font-weight: 600; font-size: .86rem; } #loginView.lx .brand-sub { color: #93c5fd !important; letter-spacing: .16em; font-size: .64rem; } #loginView.lx .brand-text { display: flex; flex-direction: column; gap: 3px; } #loginView.lx .login-title { margin: 0 0 6px; font-size: 1.85rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: #f8faff !important; animation: lx-rise .42s var(--lx-ease) .45s both; } #loginView.lx .login-sub { margin: 0 0 24px; font-size: .84rem; color: var(--lx-ink-3) !important; animation: lx-rise .42s var(--lx-ease) .5s both; } /* ── Fields ───────────────────────────────────────────────────────────── */ #loginView.lx #loginForm > * { animation: lx-rise .38s var(--lx-ease) both; } #loginView.lx #loginForm > :nth-child(1) { animation-delay: .55s; } #loginView.lx #loginForm > :nth-child(2) { animation-delay: .59s; } #loginView.lx #loginForm > :nth-child(3) { animation-delay: .63s; } #loginView.lx #loginForm > :nth-child(n+4) { animation-delay: .67s; } #loginView.lx .field { margin: 0 0 16px; } #loginView.lx .field label { display: block; margin: 0 0 8px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lx-ink-2) !important; transition: color .2s ease; } #loginView.lx .field:focus-within label { color: #bfdbfe !important; } #loginView.lx #loginUser, #loginView.lx #loginPass { width: 100%; height: 50px; margin: 0; box-sizing: border-box; padding: 0 16px 0 44px; font: 500 1rem/1.2 var(--font-sans, "Inter", system-ui, sans-serif); color: #f1f5ff !important; background-color: var(--lx-field) !important; background-repeat: no-repeat; background-position: 15px 50%; background-size: 18px 18px; border: 1px solid rgba(148, 178, 255, .2) !important; border-radius: 12px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset !important; outline: none; caret-color: #93c5fd; transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease; } #loginView.lx #loginUser { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c9bb6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.6-3.6 4.6-5.4 8-5.4s6.4 1.8 8 5.4'/%3E%3C/svg%3E"); } #loginView.lx #loginPass { padding-right: 54px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c9bb6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.8a4 4 0 0 1 8 0v2.7'/%3E%3C/svg%3E"); } #loginView.lx #loginUser:hover, #loginView.lx #loginPass:hover { border-color: rgba(148, 178, 255, .32) !important; } #loginView.lx #loginUser:focus, #loginView.lx #loginPass:focus { border-color: rgba(96, 165, 250, .85) !important; background-color: rgba(10, 18, 40, .72) !important; box-shadow: 0 0 0 4px rgba(59, 130, 246, .18), 0 0 24px -4px rgba(59, 130, 246, .45) !important; } #loginView.lx #loginUser::placeholder, #loginView.lx #loginPass::placeholder { color: #6f80a0; } /* Browser autofill keeps the dark field (and stays readable). */ #loginView.lx #loginUser:-webkit-autofill, #loginView.lx #loginPass:-webkit-autofill { -webkit-text-fill-color: #f1f5ff; -webkit-box-shadow: 0 0 0 1000px #0b1430 inset !important; box-shadow: 0 0 0 1000px #0b1430 inset !important; transition: background-color 9999s ease 0s; } #loginView.lx .lx-alerting #loginUser, #loginView.lx .lx-alerting #loginPass { border-color: rgba(248, 113, 113, .5) !important; } /* Password visibility: the existing button, drawn as an eye. Its text stays in the DOM for portal.js; the accessible name comes from aria-label. */ #loginView.lx .pw-wrap { position: relative; } #loginView.lx .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 10px; background: transparent; color: transparent; font-size: 0; line-height: 0; cursor: pointer; transition: background-color .2s ease; } #loginView.lx .pw-toggle::before, #loginView.lx .pw-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: #8c9bb6; -webkit-mask: var(--lx-eye) center / contain no-repeat; mask: var(--lx-eye) center / contain no-repeat; transition: opacity .22s ease, transform .3s var(--lx-ease), background-color .2s ease; } #loginView.lx .pw-toggle { --lx-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } #loginView.lx .pw-toggle::after { --lx-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.6A10 10 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-3.1 3.9M6.2 6.9C3.9 8.5 2.5 12 2.5 12S6 18.5 12 18.5a9.6 9.6 0 0 0 4.4-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); opacity: 0; transform: scale(.7) rotate(-12deg); } #loginView.lx .pw-toggle:hover { background: rgba(148, 178, 255, .1); } #loginView.lx .pw-toggle:hover::before, #loginView.lx .pw-toggle:hover::after { background: #cfe0ff; } #loginView.lx .pw-toggle[aria-pressed="true"]::before { opacity: 0; transform: scale(.7) rotate(12deg); } #loginView.lx .pw-toggle[aria-pressed="true"]::after { opacity: 1; transform: none; } #loginView.lx .check-inline.small { display: flex; align-items: center; gap: 10px; margin: 2px 0 18px; font-size: .82rem; color: var(--lx-ink-2) !important; cursor: pointer; } #loginView.lx .check-inline input { width: 17px; height: 17px; margin: 0; accent-color: #3b82f6; } /* Error: the server's own message, revealed calmly — no shaking. */ #loginView.lx #loginError { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(248, 113, 113, .32); background: rgba(127, 29, 29, .22); color: var(--lx-danger) !important; font-size: .86rem; line-height: 1.45; animation: lx-err-in .38s var(--lx-ease) both; } #loginView.lx #loginError::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat; } #loginView.lx #loginError[hidden] { display: none !important; } /* portal.js hides the previous error the moment a new request starts. If one was on screen, hold its space (invisibly) until the answer arrives so the button doesn't jump. */ #loginView.lx.lx-hold #loginError[hidden]:not(:empty) { display: flex !important; visibility: hidden; animation: none; } /* ── Sign-in button ───────────────────────────────────────────────────── */ #loginView.lx #loginBtn { position: relative; overflow: hidden; width: 100%; height: 52px; margin: 0; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 13px; cursor: pointer; font: 600 .98rem/1 var(--font-sans, "Inter", system-ui, sans-serif); letter-spacing: .02em; text-transform: none; color: #fff !important; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #4f46e5 100%) !important; background-size: 150% 150% !important; background-position: 0% 50% !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 10px 26px -10px rgba(37, 99, 235, .9) !important; transition: transform .18s var(--lx-ease), box-shadow .3s ease, filter .25s ease, background-position .5s ease; -webkit-tap-highlight-color: transparent; } #loginView.lx #loginBtn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%); transform: translateX(-140%) skewX(-12deg); pointer-events: none; } #loginView.lx #loginBtn:hover:not(:disabled) { filter: brightness(1.08); background-position: 100% 50% !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset, 0 16px 34px -12px rgba(59, 130, 246, .95) !important; } #loginView.lx #loginBtn:hover:not(:disabled)::before { transform: translateX(330%) skewX(-12deg); transition: transform .9s var(--lx-ease); } #loginView.lx #loginBtn:active:not(:disabled) { transform: translateY(1px) scale(.992); } #loginView.lx #loginBtn:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 3px; } #loginView.lx .lx-btn-icon { display: inline-flex; width: 18px; height: 18px; transition: transform .3s var(--lx-ease); } #loginView.lx .lx-btn-icon svg { width: 100%; height: 100%; } #loginView.lx #loginBtn:hover:not(:disabled) .lx-btn-icon { transform: translateX(3px); } #loginView.lx .lx-spinner { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); border-top-color: #fff; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .3s var(--lx-ease); } /* Busy = the existing disabled state portal.js sets during the request. Same box, same size: the label fades out and a ring fades in. */ #loginView.lx #loginBtn:disabled { cursor: progress; filter: saturate(.9); } #loginView.lx #loginBtn:disabled .lx-btn-label, #loginView.lx #loginBtn:disabled .lx-btn-icon { opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .2s ease; } #loginView.lx #loginBtn:disabled .lx-spinner { opacity: 1; transform: none; animation: lx-spin .8s linear infinite; } #loginView.lx .lx-btn-label { transition: opacity .2s ease, transform .25s var(--lx-ease); } #loginView.lx #forgotBtn { display: inline-block; margin: 14px auto 0; padding: 6px 4px; background: none; border: 0; font: 500 .84rem/1.2 var(--font-sans, "Inter", system-ui, sans-serif); color: #93c5fd !important; text-decoration: none; cursor: pointer; border-radius: 6px; transition: color .2s ease; } #loginView.lx #forgotBtn:hover { color: #dbeafe !important; text-decoration: underline; text-underline-offset: 3px; } #loginView.lx #loginForm { display: flex; flex-direction: column; } #loginView.lx #loginForm > #forgotBtn { align-self: center; } #loginView.lx :focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; } #loginView.lx #loginUser:focus-visible, #loginView.lx #loginPass:focus-visible { outline: none; } /* Demo mode only (never shown on the live site). */ #loginView.lx .demo-creds { border-top: 1px dashed var(--lx-line-2); } #loginView.lx .demo-title { color: var(--lx-gold); } #loginView.lx .demo-creds button { background: rgba(148, 178, 255, .06); border-color: var(--lx-line); color: #cbd8f0; } #loginView.lx .demo-creds button:hover { border-color: rgba(96, 165, 250, .5); background: rgba(148, 178, 255, .1); } #loginView.lx .login-foot { color: #6f80a0 !important; font-size: .64rem; letter-spacing: .22em; text-align: center; animation: lx-rise .36s var(--lx-ease) .68s both; } /* During a sign-in request the button already shows progress, so the global full-screen loader stays out of the way (only while signing in). */ body.lx-login-busy #loader { opacity: 0 !important; } #loginView.lx .lx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Small screens: clarity over spectacle ────────────────────────────── */ @media (max-width: 1023px) { #loginView.lx .lx-scene { height: min(34vh, 300px); opacity: .7; } #loginView.lx .lx-arc, #loginView.lx .lx-arc-pulse { display: none; } } @media (max-width: 600px) { #loginView.lx { align-content: start; padding-top: max(36px, env(safe-area-inset-top)); } #loginView.lx .login-card { padding: 26px 20px 22px; border-radius: 20px; } #loginView.lx .login-title { font-size: 1.6rem; } #loginView.lx .lx-a1 { width: 90vw; height: 90vw; left: -30vw; top: -30vw; } #loginView.lx .lx-a2 { width: 80vw; height: 80vw; right: -40vw; top: 30vh; } #loginView.lx .lx-a3 { display: none; } #loginView.lx .lx-scene { height: 26vh; opacity: .55; } #loginView.lx .lx-win.on { animation: none; } } /* Touch devices (mid-range Android first): no live re-blur of a moving background behind the card; a slightly denser card reads just as well. */ @media (hover: none), (pointer: coarse) { #loginView.lx .login-card { background: rgba(11, 18, 36, .9) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ── Calm modes ───────────────────────────────────────────────────────── */ /* Returning with a saved session: the sign-in screen is only on show for the moment it takes to confirm the session, so skip the entrance sequence. */ html.lx-instant #loginView.lx .lx-bg, html.lx-instant #loginView.lx .lx-hero-brand, html.lx-instant #loginView.lx .lx-eyebrow, html.lx-instant #loginView.lx .lx-headline, html.lx-instant #loginView.lx .lx-lede, html.lx-instant #loginView.lx .lx-caps, html.lx-instant #loginView.lx .lx-flow, html.lx-instant #loginView.lx .login-card, html.lx-instant #loginView.lx .login-brand, html.lx-instant #loginView.lx .login-title, html.lx-instant #loginView.lx .login-sub, html.lx-instant #loginView.lx #loginForm > *, html.lx-instant #loginView.lx .login-foot, html.lx-instant #loginView.lx .brand-mark::after, html.lx-instant #loginView.lx .lx-bld, html.lx-instant #loginView.lx .lx-arc, html.lx-instant #loginView.lx .lx-fl-base, html.lx-instant #loginView.lx .lx-node { animation: none !important; } /* Background tab: pause only the endless ambient motion. The entrance and the busy spinner are never paused, so the form can never be left invisible. */ #loginView.lx.lx-paused .lx-aurora, #loginView.lx.lx-paused .lx-win.on, #loginView.lx.lx-paused .lx-arc-pulse, #loginView.lx.lx-paused .lx-fl-pulse, #loginView.lx.lx-paused .lx-node-halo { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { #loginView.lx *, #loginView.lx *::before, #loginView.lx *::after { animation: none !important; transition-duration: .01ms !important; } #loginView.lx .lx-arc-pulse, #loginView.lx .lx-fl-pulse, #loginView.lx .lx-node-halo { display: none; } /* The busy state must still be visible without motion. */ #loginView.lx #loginBtn:disabled .lx-spinner { border-color: rgba(255, 255, 255, .9); } } /* ── Keyframes ────────────────────────────────────────────────────────── */ @keyframes lx-stage-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } } @keyframes lx-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } @keyframes lx-card-in { 0% { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); } 70% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1); } 100% { opacity: 1; transform: none; } } @keyframes lx-sheen { to { transform: translateX(120%); } } @keyframes lx-err-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } } @keyframes lx-spin { to { transform: rotate(360deg); } } @keyframes lx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes lx-twinkle { 0%, 78%, 100% { opacity: .16; } 86%, 90% { opacity: .85; } } /* Bursts: a light crosses in the first part of the cycle, then everything is still (nothing to repaint) until the next one. */ @keyframes lx-burst { 0% { stroke-dashoffset: 1.06; opacity: 1; } 34% { stroke-dashoffset: 0; opacity: 1; } 35%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes lx-flow-run { 0% { stroke-dashoffset: 1.06; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 61%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes lx-node-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } @keyframes lx-halo { 0% { opacity: 0; transform: scale(.6); } 4% { opacity: .9; } 16% { opacity: 0; transform: scale(2.1); } 100% { opacity: 0; transform: scale(2.1); } } @keyframes lx-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vw, 6vh, 0) scale(1.12); } } @keyframes lx-drift-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-7vw, -5vh, 0) scale(.95); } } @keyframes lx-drift-c { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-6vw, -4vh, 0) scale(1.1); } }