@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css'; /* /Components/Pages/Login.razor.rz.scp.css */ /* ===== Login page — palette pulled from the BizBooks logo ===== */ .login-page[b-774mqunvjd] { --lp-navy-950: #081428; --lp-navy-900: #0a1a33; --lp-navy-700: #12305e; --lp-blue-600: #1d4e89; --lp-gold: #e8b52a; --lp-green: #3fae4a; --lp-ink: #101828; --lp-muted: #667085; display: grid; grid-template-columns: 1.15fr 1fr; min-height: 100dvh; background: #fff; } /* ===== Pre-animation state ===== An inline script in App.razor tags with "lp-preanim" before first paint (login path only, so JS is known to be on). Everything the GSAP entrance in js/login.js animates starts hidden here, otherwise the prerendered page shows fully rendered and then visibly resets when the circuit connects and the animation begins. login.js removes the class the moment it takes over; the delayed keyframe below is a safety net that fades everything in anyway if the script never runs (circuit or GSAP load failure). */ @media (prefers-reduced-motion: no-preference) { html.lp-preanim .lp-orb[b-774mqunvjd], html.lp-preanim .lp-logo-wrap[b-774mqunvjd], html.lp-preanim .lp-title[b-774mqunvjd], html.lp-preanim .lp-tagline[b-774mqunvjd], html.lp-preanim .lp-bar[b-774mqunvjd], html.lp-preanim .lp-arrow[b-774mqunvjd], html.lp-preanim .lp-arrow-head[b-774mqunvjd], html.lp-preanim .lp-feature[b-774mqunvjd], html.lp-preanim .lp-anim[b-774mqunvjd] { opacity: 0; animation: lp-fallback-reveal-b-774mqunvjd 0.6s ease 2.5s forwards; } } @keyframes lp-fallback-reveal-b-774mqunvjd { to { opacity: 1; } } /* ===================== Brand panel ===================== */ .lp-brand[b-774mqunvjd] { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: radial-gradient(1100px 700px at 15% 10%, rgba(29, 78, 137, 0.55), transparent 60%), radial-gradient(900px 700px at 90% 90%, rgba(63, 174, 74, 0.16), transparent 55%), linear-gradient(160deg, var(--lp-navy-700) 0%, var(--lp-navy-900) 55%, var(--lp-navy-950) 100%); color: #fff; /* Decorative panel — never let stray/accidental selection highlight it */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* user-select only blocks user-initiated selection; Blazor's DOM patching can still programmatically balloon a stray tap caret across this panel (visible on mobile). Make any such highlight invisible. */ .lp-brand *[b-774mqunvjd]::selection, .lp-brand[b-774mqunvjd]::selection { background: transparent; } /* Soft blurred orbs — animated by GSAP */ .lp-orb[b-774mqunvjd] { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none; } .lp-orb-1[b-774mqunvjd] { width: 380px; height: 380px; top: -90px; left: -110px; background: radial-gradient(circle at 35% 35%, rgba(232, 181, 42, 0.5), rgba(232, 181, 42, 0.05) 70%); } .lp-orb-2[b-774mqunvjd] { width: 460px; height: 460px; bottom: -140px; right: -130px; background: radial-gradient(circle at 40% 40%, rgba(63, 174, 74, 0.45), rgba(63, 174, 74, 0.04) 70%); } .lp-orb-3[b-774mqunvjd] { width: 300px; height: 300px; top: 45%; left: 55%; background: radial-gradient(circle at 40% 40%, rgba(72, 137, 214, 0.5), rgba(72, 137, 214, 0.04) 70%); } /* Faint blueprint grid, fading toward the edges */ .lp-grid[b-774mqunvjd] { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 30%, transparent 75%); pointer-events: none; } .lp-brand-inner[b-774mqunvjd] { position: relative; z-index: 1; max-width: 460px; text-align: center; } .lp-logo-wrap[b-774mqunvjd] { position: relative; display: inline-block; margin-bottom: 1.25rem; } .lp-logo[b-774mqunvjd] { position: relative; width: clamp(150px, 22vw, 230px); height: auto; z-index: 1; filter: drop-shadow(0 18px 35px rgba(0, 0, 0, 0.45)); } .lp-logo-glow[b-774mqunvjd] { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(232, 181, 42, 0.28) 0%, rgba(232, 181, 42, 0) 65%); pointer-events: none; } .lp-title[b-774mqunvjd] { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 0.5rem; } .lp-title span[b-774mqunvjd] { background: linear-gradient(90deg, var(--lp-gold), #f6d878); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lp-tagline[b-774mqunvjd] { color: rgba(255, 255, 255, 0.75); font-size: 1rem; line-height: 1.55; margin-bottom: 1.75rem; } .lp-bars[b-774mqunvjd] { width: min(240px, 60%); height: auto; margin-bottom: 1.75rem; } .lp-features[b-774mqunvjd] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .lp-feature[b-774mqunvjd] { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 0.42rem 0.95rem; backdrop-filter: blur(6px); } .lp-feature i[b-774mqunvjd] { color: var(--lp-gold); } /* ===================== Form panel ===================== */ .lp-form-panel[b-774mqunvjd] { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: #fff; } .lp-card[b-774mqunvjd] { width: 100%; max-width: 420px; } .lp-company-logo[b-774mqunvjd] { text-align: center; margin-bottom: 1.5rem; } .lp-company-logo img[b-774mqunvjd] { max-width: 300px; object-fit: contain; } .lp-heading[b-774mqunvjd] { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.4px; color: var(--lp-ink); text-align: center; margin-bottom: 0.35rem; } .lp-sub[b-774mqunvjd] { text-align: center; color: var(--lp-muted); margin-bottom: 1.75rem; } .lp-error[b-774mqunvjd] { display: flex; align-items: center; gap: 0.6rem; background: #fef3f2; color: #b42318; border: 1px solid #fecdca; border-radius: 12px; padding: 0.75rem 1rem; font-size: 0.9rem; font-weight: 500; margin-bottom: 1.25rem; } .lp-field[b-774mqunvjd] { margin-bottom: 1.15rem; } .lp-field label[b-774mqunvjd] { display: block; font-size: 0.83rem; font-weight: 600; color: #344054; margin-bottom: 0.4rem; } .lp-input-wrap[b-774mqunvjd] { display: flex; align-items: center; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .lp-input-wrap:focus-within[b-774mqunvjd] { background: #fff; border-color: var(--lp-blue-600); box-shadow: 0 0 0 4px rgba(29, 78, 137, 0.12); } .lp-input-wrap > i[b-774mqunvjd] { padding: 0 0.35rem 0 0.9rem; font-size: 1.05rem; color: #98a2b3; transition: color 0.2s ease; } .lp-input-wrap:focus-within > i[b-774mqunvjd] { color: var(--lp-blue-600); } .lp-input-wrap input[b-774mqunvjd] { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 0.8rem 0.75rem 0.8rem 0.35rem; /* 16px floor prevents iOS Safari from zooming the viewport on focus */ font-size: 1rem; color: var(--lp-ink); } .lp-input-wrap input[b-774mqunvjd]::placeholder { color: #98a2b3; } .lp-eye[b-774mqunvjd] { border: 0; background: transparent; color: #98a2b3; padding: 0.5rem 0.9rem; font-size: 1.05rem; cursor: pointer; transition: color 0.15s ease; } .lp-eye:hover[b-774mqunvjd] { color: var(--lp-navy-700); } .lp-submit[b-774mqunvjd] { display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; margin-top: 1.5rem; padding: 0.85rem 1rem; border: 0; border-radius: 12px; font-size: 1rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--lp-navy-700) 0%, var(--lp-blue-600) 100%); box-shadow: 0 8px 20px rgba(18, 48, 94, 0.3); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .lp-submit i[b-774mqunvjd] { transition: transform 0.18s ease; } .lp-submit:hover[b-774mqunvjd] { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(18, 48, 94, 0.38); filter: brightness(1.06); } .lp-submit:hover i[b-774mqunvjd] { transform: translateX(4px); } .lp-submit:active[b-774mqunvjd] { transform: translateY(0); box-shadow: 0 6px 14px rgba(18, 48, 94, 0.3); } .lp-footer[b-774mqunvjd] { text-align: center; color: #98a2b3; font-size: 0.8rem; margin-top: 2rem; margin-bottom: 0; } /* ===================== Mobile / tablet ===================== */ @media (max-width: 991.98px) { .login-page[b-774mqunvjd] { grid-template-columns: 1fr; background: linear-gradient(160deg, var(--lp-navy-700) 0%, var(--lp-navy-900) 60%, var(--lp-navy-950) 100%); } .lp-brand[b-774mqunvjd] { padding: 2.25rem 1.5rem 3.5rem; } .lp-logo[b-774mqunvjd] { width: 130px; } .lp-tagline[b-774mqunvjd] { font-size: 0.92rem; margin-bottom: 1.1rem; } /* Keep the hero compact on small screens */ .lp-bars[b-774mqunvjd], .lp-features[b-774mqunvjd] { display: none; } /* Form sheet slides up over the brand panel */ .lp-form-panel[b-774mqunvjd] { border-radius: 28px 28px 0 0; margin-top: -28px; position: relative; z-index: 2; padding: 2.25rem 1.5rem 2rem; box-shadow: 0 -12px 30px rgba(8, 20, 40, 0.35); } } /* Very short landscape phones: don't let the brand panel eat the screen */ @media (max-width: 991.98px) and (max-height: 500px) { .lp-brand[b-774mqunvjd] { padding: 1.25rem 1.5rem 2.5rem; } .lp-logo[b-774mqunvjd] { width: 84px; } .lp-tagline[b-774mqunvjd] { display: none; } }