/* ============================================================= VedicSageAuth.css — VedicSage PUBLIC AUTHENTICATION theme ------------------------------------------------------------- Shared stylesheet for unauthenticated auth screens (Login, Register, Forgot Password, ...). Each page opts in explicitly by linking this file (pages are Layout = null / self-contained). Root scope: .vs-auth-page (set on of the adopting page). Never loads VedicSageTheme.css / VedicSagePublic.css. Class names intentionally match the existing inline auth styles (login-visual-side, login-form-card, btn-login, ...) so the other auth pages can migrate without markup rewrites. Corporate tokens mirror the approved VedicSage palette. ============================================================= */ /* ------------------------------------------------------------- AUTH TOKENS ============================================================= */ :root { --vs-navy-deep: #0E2A47; --vs-navy-royal: #123B68; --vs-gold: #C89A3D; --vs-gold-dark: #A87F2E; --vs-gold-surface: #F5EDD8; --vs-text-navy-dark: #0A1F38; --vs-text-muted: #555770; --vs-border: #D4D8E2; } /* ------------------------------------------------------------- AUTH SHELL ============================================================= */ body.vs-auth-page { margin: 0; font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; background-color: #f8f9fa; } .vs-auth-page .full-height-container { min-height: 100vh; } /* ------------------------------------------------------------- VISUAL PANEL (left, desktop only — hidden below lg by markup) ============================================================= */ .vs-auth-page .login-visual-side { background-color: var(--vs-navy-deep); color: #ffffff; padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } /* ------------------------------------------------------------- BRAND (left panel — dominant desktop brand expression) White wordmark + restrained corporate gold separator. The horizontal logo is NOT used here (navy wordmark is for light surfaces). ============================================================= */ .vs-auth-page .login-logo h1 { font-size: 4rem; font-weight: 700; margin-bottom: 14px; color: #ffffff; } .vs-auth-page .login-logo h1::after { content: ""; display: block; width: 64px; height: 3px; margin: 14px auto 0 auto; background-color: var(--vs-gold); border-radius: 2px; } .vs-auth-page .login-logo p { font-size: 1.1rem; letter-spacing: 1px; color: #C9D2E3; } /* Navy heading option for future adopting pages (e.g. Register card header), kept for reuse — NOT used on Login. */ .vs-auth-page .login-title { text-align: center; margin-bottom: 30px; font-weight: 600; color: var(--vs-navy-deep); font-size: 1.5rem; } /* ------------------------------------------------------------- ILLUSTRATION (left panel) The legacy brightness/contrast/saturate filter compensated for the old bright-blue panel; removed for the deep-navy field. ============================================================= */ .vs-auth-page .login-illustration img { max-width: 100%; height: auto; max-height: 400px; } /* ------------------------------------------------------------- PATTERN / FORM SIDE (right) Domain astrology pattern retained, softened with a light neutral overlay so it does not compete with the card. Asset casing corrected to the on-disk name (PeasLoginPG.png) to prevent case-sensitive hosting failure. ============================================================= */ .vs-auth-page .bg-pattern { background-image: linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)), url('/Content/HomePage/img/LoginPage/PeasLoginPG.png'); background-position: center; background-repeat: no-repeat; background-size: cover; } .vs-auth-page .login-form-side { display: flex; justify-content: center; align-items: center; padding: 20px; } .vs-auth-page .login-form-container { width: 100%; max-width: 400px; } /* ------------------------------------------------------------- LOGIN CARD White, neutral corporate border, restrained navy-tinted shadow. ============================================================= */ .vs-auth-page .login-form-card { background-color: #ffffff; border: 1px solid var(--vs-border); border-radius: 14px; box-shadow: 0 10px 30px rgba(14, 42, 71, 0.08); padding: 40px 30px; } /* ------------------------------------------------------------- CARD BRAND LOGO (supporting brand expression) WebP + PNG fallback via