/* SAFER LA — public front door (single screen) Matches the application's existing visual language exactly: - background.png as fixed full-bleed background (same as body + AppBar) - white surface card, 1px #E5E7EB border, 8px radius, subtle shadow - SAFER LA text logo (italic thin + semibold, matching logo-a/logo-b) - Segoe UI / Roboto body font (no Fraunces) - #0E35D1 primary button, 18px radius (MudTheme.LayoutProperties) Shown statically while Blazor WASM downloads; WelcomePage.razor re-renders the same DOM for a seamless handoff. */ /* ---- Load progress bar (during WASM download only) ---- */ .mp-load-bar { position: fixed; inset: 0 0 auto 0; height: 3px; background: rgba(14, 53, 209, 0.12); z-index: 9999; } .mp-load-bar span { display: block; height: 100%; width: var(--blazor-load-percentage, 0%); background: linear-gradient(90deg, #0E35D1, #E1FF6B); transition: width 0.12s linear; } /* ---- Hide #app until the user is authenticated. The static front door (outside #app) is the page for unauthenticated visitors. When App.razor detects an authenticated user, it calls hideStaticDoor() which removes the door and reveals #app. display:none (not visibility:hidden) so it takes zero layout space. ---- */ #app { display: none; } #app.mp-app-ready { display: block; } /* ---- Base — reuses the app's existing body background ---- */ .mp-landing { font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; color: #000; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; /* background.png is already set on via app.css; this layer just ensures the landing fills the viewport even before MudBlazor loads. */ background-image: url('../images/background.png'); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; background-attachment: fixed; padding: 2rem 1.5rem; } .mp-landing * { box-sizing: border-box; } .mp-landing a { text-decoration: none; } /* ---- The card — matches .mp-content-container / .ext-sign-in-box ---- */ .mp-door-card { background: #ffffff; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); padding: 3rem 2.5rem; max-width: 440px; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; } /* ---- The real SAFER LA text logo — reuses logo-a / logo-b-wrapper / logo-b classes from app.css so it's identical to the AppBar. align-items: flex-start makes LA sit at the top like an exponent, matching MudStack Row="true" behavior. ---- */ .mp-logo { display: flex; flex-direction: row; align-items: flex-start; line-height: 1; user-select: none; } /* ---- Text ---- */ .mp-registry-label { font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: #5f6368; margin: 0; } .mp-tagline { font-size: 1rem; line-height: 1.6; color: #5f6368; max-width: 36ch; margin: 0; } /* ---- Sign-in button — matches MudBlazor Variant.Filled Color.Primary ---- */ .mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 18px; border: none; cursor: pointer; background: #0E35D1; color: #fff; box-shadow: none; transition: background-color 0.15s ease; width: 100%; } .mp-btn:hover { background: #0a28a8; } .mp-btn:focus { outline: 3px solid #ECCD13; outline-offset: 2px; } .mp-btn:active { background: #08218a; } /* ---- Loading state for sign-in button (shown until API warm-up completes) ---- */ .mp-btn-loading { cursor: wait; opacity: 0.85; } .mp-spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: mp-spin 0.6s linear infinite; } @keyframes mp-spin { to { transform: rotate(360deg); } } .mp-access-note { font-size: 0.82rem; color: #6B7280; margin: 0; } /* ---- Footer ---- */ .mp-foot { margin-top: 1.5rem; font-size: 0.78rem; color: #5f6368; text-align: center; } /* ---- GSAP reveal hooks ---- */ .mp-reveal { opacity: 0; transform: translateY(16px); } /* ---- Responsive ---- */ @media (max-width: 560px) { .mp-door-card { padding: 2rem 1.5rem; } } /* ---- Motion preferences ---- */ @media (prefers-reduced-motion: reduce) { .mp-reveal { opacity: 1; transform: none; } .mp-btn { transition: none; } }