/* * MGW v9 — Outer Pages Light (mgw-v1-outer-light.css) * ====================================================== * Companion to mgw-v1-glass-pro.css for stand-alone auth pages * (login, signup, forgot-password, OTP verify, MFA, etc.). * * KEY DIFFERENCE from the main CSS: * ✓ Same design tokens, fonts, typography * ✗ NO body { background } override → core.css theme classes * (.warning, .danger, .primary … ) control the page background. * * Usage: * * * * ← core.css picks bg */ /* ============================================================ FONT ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap"); /* ============================================================ DESIGN TOKENS ============================================================ */ :root { --mgw-font: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --glass-blur: blur(16px) saturate(165%); /* Glass surfaces */ --border-card: rgba(255, 255, 255, 0.55); --border-ui: rgba(210, 224, 242, 0.82); --bg-card: rgba(255, 255, 255, 0.76); --bg-header: rgba(255, 255, 255, 0.52); /* Shadows */ --shadow-xs: 0 1px 3px rgba(18, 50, 110, 0.07); --shadow-sm: 0 2px 8px rgba(18, 50, 110, 0.09), 0 1px 3px rgba(0,0,0,0.05); --shadow-md: 0 4px 20px rgba(18, 50, 110, 0.12), 0 1.5px 6px rgba(0,0,0,0.07); --shadow-lg: 0 10px 40px rgba(18, 50, 110, 0.16), 0 3px 12px rgba(0,0,0,0.09); --shadow-card: 0 2px 14px rgba(18, 50, 110, 0.10), 0 1px 4px rgba(0,0,0,0.05); /* Radii */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 100px; /* Text — dark, readable on white glass */ --text-h: #111827; --text-body: #1f2937; --text-soft: #6b7280; --text-hint: #9ca3af; /* Default accent (primary) */ --accent: #188ae2; --accent-dark: #1168b8; --accent-light: rgba(24, 138, 226, 0.1); --tx: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* Per-theme accents — mirrors core.css body class names */ body.primary { --accent: #188ae2; --accent-dark: #1168b8; --accent-light: rgba(24,138,226,0.1); } body.success { --accent: #10c469; --accent-dark: #0ca358; --accent-light: rgba(16,196,105,0.1); } body.warning { --accent: #d4900a; --accent-dark: #aa7200; --accent-light: rgba(212,144,10,0.1); } body.danger { --accent: #ff5b5b; --accent-dark: #e03030; --accent-light: rgba(255,91,91,0.1); } body.info { --accent: #35b8e0; --accent-dark: #1a9dc4; --accent-light: rgba(53,184,224,0.1); } body.pink { --accent: #e060b0; --accent-dark: #c040a0; --accent-light: rgba(224,96,176,0.1); } body.purple { --accent: #5b69bc; --accent-dark: #4250a2; --accent-light: rgba(91,105,188,0.1); } body.inverse { --accent: #3b3e47; --accent-dark: #24262b; --accent-light: rgba(59,62,71,0.09); } body.dark { --accent: #444; --accent-dark: #222; --accent-light: rgba(68,68,68,0.09); } body.deepOrange{ --accent: #ff5722; --accent-dark: #e03800; --accent-light: rgba(255,87,34,0.1); } /* ============================================================ BASE — no body background (core.css controls it) ============================================================ */ *,*::before,*::after { box-sizing: border-box; } html { height: 100%; } body { font-family: var(--mgw-font) !important; font-size: 14px; line-height: 1.55; /* color intentionally not forced — core.css .warning sets color:#fff etc. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--mgw-font) !important; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; } p, td, th, li, .btn, .label, .badge { font-family: var(--mgw-font) !important; } label { font-family: var(--mgw-font) !important; font-weight: 500; font-size: 13px; margin-bottom: 5px; } small, .small { font-weight: 400; } /* ============================================================ AUTH CARD (.simple-page-form) Glass panel — works on every colored background because it is largely opaque white; the theme color bleeds through as a beautiful tint behind the blur. ============================================================ */ .simple-page-form { background: rgba(255, 255, 255, 0.78) !important; border: 1px solid rgba(255, 255, 255, 0.62) !important; border-radius: 18px !important; box-shadow: 0 10px 48px rgba(18, 50, 110, 0.22), 0 2px 12px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(18px) saturate(165%) !important; -webkit-backdrop-filter: blur(18px) saturate(165%) !important; position: relative; overflow: hidden; } /* Top-left diagonal sheen */ .simple-page-form::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,0.14) 0%, transparent 50%); border-radius: 18px; pointer-events: none; } /* ── Logo ── */ .simple-page-logo { text-align: center; margin-bottom: 20px; } .simple-page-logo img { max-width: 58%; } /* ── Titles inside card ── */ .simple-page-form .form-title, .simple-page-form h3, .simple-page-form h4 { color: var(--text-h) !important; font-family: var(--mgw-font) !important; font-weight: 600 !important; } .simple-page-form h5, .simple-page-form h6 { color: var(--text-soft) !important; font-family: var(--mgw-font) !important; } /* ── Inputs ── */ .simple-page-form .form-control { background: rgba(255, 255, 255, 0.88) !important; border: 1px solid rgba(180, 200, 230, 0.75) !important; color: var(--text-h) !important; border-radius: var(--r-sm) !important; font-family: var(--mgw-font) !important; font-size: 14px; box-shadow: inset 0 1px 2px rgba(18,50,110,0.06) !important; transition: border-color .2s, box-shadow .2s !important; } .simple-page-form .form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-light), inset 0 1px 2px rgba(18,50,110,0.06) !important; outline: none !important; background: #fff !important; } .simple-page-form .form-control::placeholder { color: var(--text-hint) !important; } /* ── Form group dividers ── */ .simple-page-form .form-group { border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .simple-page-form .form-group:last-of-type { border-bottom: none; } /* ── Submit button ── */ .simple-page-form .btn-primary { background: linear-gradient(130deg, var(--accent), var(--accent-dark)) !important; border: none !important; border-radius: var(--r-sm) !important; font-family: var(--mgw-font) !important; font-weight: 600 !important; letter-spacing: .01em; box-shadow: 0 3px 12px rgba(18,50,110,0.22) !important; transition: filter .15s !important; } .simple-page-form .btn-primary:hover { filter: brightness(1.07) !important; } /* ── Text inside card ── */ .simple-page-form .text-muted, .simple-page-form small { color: var(--text-hint) !important; } .simple-page-form label { color: var(--text-soft) !important; } .simple-page-form a { color: var(--accent); } .simple-page-form a:hover{ color: var(--accent-dark); } /* ── Notification/alert inside card ── */ .simple-page-form .alert { border-radius: var(--r-sm) !important; font-family: var(--mgw-font) !important; } /* ── User info mini-card (reset/OTP pages) ── */ .simple-page-form .media-body h5 a { color: var(--accent) !important; } .simple-page-form .media-body p { font-size:12px;font-style:italic;color:var(--text-hint)!important;margin:0; } .simple-page-form .avatar-circle img { border: 2px solid rgba(180,200,230,0.6); } /* ── Pass strength hint ── */ #pass-help { color: var(--accent) !important; font-family: var(--mgw-font) !important; } #pass-err { font-family: var(--mgw-font) !important; } /* ── Checkbox + TnC ── */ .simple-page-form .checkbox label { color: var(--text-soft) !important; font-size: 13px; } /* ============================================================ BACK-TO-HOME BUTTON Reads on any colored background (glass pill + icon). ============================================================ */ #back-to-home { padding: 14px; position: relative; z-index: 100; } #back-to-home a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.68); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--r-pill); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 2px 12px rgba(18,50,110,0.18); text-decoration: none; transition: box-shadow .2s, background .2s; } #back-to-home a:hover { background: rgba(255, 255, 255, 0.85); box-shadow: 0 4px 20px rgba(18,50,110,0.26); } #back-to-home .fa, #back-to-home i { font-size: 16px; color: var(--text-h) !important; } /* ============================================================ FOOTER LINKS White text + text-shadow ensures readability on ALL background colours (yellow warning, red danger, blue primary, etc.) ============================================================ */ .simple-page-footer { font-family: var(--mgw-font) !important; font-size: 13.5px; } .simple-page-footer a { color: #fff !important; font-weight: 500 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.45), 0 0 8px rgba(0,0,0,0.20) !important; text-decoration: none; transition: opacity .15s; } .simple-page-footer a:hover { opacity: .85; } .simple-page-footer p, .simple-page-footer small { color: rgba(255,255,255,0.88) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.35); } /* ── Simple page wrap — ensure card area is readable ── */ .simple-page-wrap { color: var(--text-body); }