/* * 3M mGrant — Login styles * * Single-hero split-screen with animated diagonal sweep (Vedanta-pattern). * Structure mirrors frappe_bal/bal/www/login.html — visual tokens swapped to * 3M canonical red palette. * * All colors sourced from design_tokens.css via var(--token). rgba() literals * are the documented exception to the zero-hex rule (validator regex only * flags bare hex, rgba() is fine). */ /* DM Sans loaded via Google Fonts from login.html */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; font-family: var(--font-sans); background: var(--text-primary); } .akm-page-wrapper { height: 100vh; display: flex; } /* ═══════════════════════════════════════════ LEFT PANEL — HERO (56%) ═══════════════════════════════════════════ */ .akm-left { width: 56%; position: relative; overflow: hidden; background: var(--text-primary); flex-shrink: 0; } .akm-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; } .akm-wash { position: absolute; inset: 0; z-index: 2; background: linear-gradient(140deg, rgba(212,33,40,.72) 0%, rgba(184,29,35,.40) 46%, rgba(26,26,26,.82) 100%); } /* Diagonal sweep — bright primary line */ .akm-sweep { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; } .akm-sweep::before { content: ""; position: absolute; top: -40%; left: -60%; width: 60%; height: 180%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.14) 45%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.14) 55%,transparent); transform: rotate(18deg); filter: blur(2px); animation: akm-sweep-move 7s cubic-bezier(.5,0,.2,1) infinite; } .akm-sweep::after { content: ""; position: absolute; top: -40%; left: -60%; width: 44%; height: 180%; background: linear-gradient(90deg,transparent,rgba(231,37,45,.20) 50%,transparent); transform: rotate(18deg); filter: blur(2px); animation: akm-sweep-move 9s ease-in-out infinite; animation-delay: 1.5s; } @keyframes akm-sweep-move { 0% { transform: translateX(-120%) rotate(18deg); } 40% { transform: translateX(320%) rotate(18deg); } 100% { transform: translateX(320%) rotate(18deg); } } @media (prefers-reduced-motion: reduce) { .akm-sweep::before, .akm-sweep::after { animation: none; opacity: .15; } } /* Static chrome: brand bar (top) */ .akm-left-chrome { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 36px 44px; color: var(--text-on-dark); pointer-events: none; } .akm-brand-bar { display: flex; align-items: center; gap: 12px; } .akm-brand-bar img { height: 30px; filter: brightness(0) invert(1); } .akm-brand-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.25); } .akm-brand-label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.3px; opacity: 0.65; line-height: 1.4; } /* Hero headline */ .akm-hero-text { position: relative; z-index: 4; color: var(--text-on-dark); } .akm-hero-eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; opacity: 0.55; margin-bottom: 10px; } .akm-hero-headline { font-size: 26px; font-weight: 300; line-height: 1.35; letter-spacing: -0.2px; max-width: 460px; margin-top: 0; margin-bottom: 8px; } .akm-hero-headline strong { font-weight: 600; } .akm-hero-desc { font-size: 12.5px; opacity: 0.7; line-height: 1.55; max-width: 420px; } .akm-hero-desc strong { opacity: 1; font-weight: 600; } /* ═══════════════════════════════════════════ RIGHT PANEL — FORM (44%) ═══════════════════════════════════════════ */ .akm-right { width: 44%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-0); position: relative; padding: 24px 24px 56px; } .akm-auth { width: 100%; max-width: 380px; } /* mGrant logo — right panel, above heading */ .akm-right-logo { display: flex; justify-content: center; margin-bottom: 16px; } .akm-right-logo img { height: 44px; width: auto; max-width: 260px; object-fit: contain; } /* Page title */ .akm-page-title { text-align: center; margin-bottom: 20px; } .akm-page-title h1 { font-size: 26px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px; } .akm-page-title p { font-size: 13px; color: var(--text-muted); font-weight: 400; } /* Field labels */ .akm-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; letter-spacing: 0.01em; } /* Icon-inside inputs */ .akm-input-wrap { position: relative; display: flex; align-items: center; margin-bottom: 12px; } .akm-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-disabled); pointer-events: none; display: flex; } .akm-input-icon svg { width: 15px; height: 15px; } .akm-login-box input, .akm-forgot-box input, .form-login-with-email-link input { width: 100%; height: 44px; padding: 0 42px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: 13px; font-family: var(--font-sans); color: var(--text-primary); background: var(--surface-2); outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .akm-login-box input:focus, .akm-forgot-box input:focus, .form-login-with-email-link input:focus { border-color: var(--brand-red); background: var(--surface-0); box-shadow: 0 0 0 3px rgba(231,37,45,.15); } .akm-login-box input::placeholder, .akm-forgot-box input::placeholder, .form-login-with-email-link input::placeholder { color: var(--text-disabled); } .akm-login-box input:-webkit-autofill, .akm-login-box input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset; -webkit-text-fill-color: var(--text-primary); } /* Password toggle */ .frappe-toggle-hidden { display: none !important; } .eye-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-disabled); padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; transition: color 0.2s; } .eye-toggle:hover { color: var(--brand-red); } .eye-toggle svg { width: 15px; height: 15px; pointer-events: none; } .eye-toggle .icon-eye-off { display: none; } .eye-toggle.active .icon-eye { display: none; } .eye-toggle.active .icon-eye-off { display: block; } /* Forgot password — right-aligned */ .akm-forgot-link { text-align: right; margin-top: -4px; margin-bottom: 16px; } .akm-forgot-link a { font-size: 12px; color: var(--brand-red); text-decoration: none; font-weight: 500; } .akm-forgot-link a:hover { color: var(--brand-red-hover); text-decoration: underline; } /* Sign In button */ .login-btn { width: 100%; height: 46px; background: var(--fill-red); border: none; border-radius: var(--radius-md); color: var(--text-on-dark); font-size: 14px; font-weight: 600; font-family: var(--font-sans); cursor: pointer; transition: background 0.15s, transform 0.1s; letter-spacing: 0.01em; } .login-btn:hover { background: var(--fill-red-hover); } .login-btn:active { transform: scale(0.99); } .btn-ldap-login { width: 100%; height: 44px; background: var(--surface-0); border: 1.5px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; margin-top: 8px; font-family: var(--font-sans); } .btn-ldap-login:hover { border-color: var(--brand-red); background: var(--surface-2); } /* OR divider */ .or-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; } .or-divider .line { flex: 1; height: 1px; background: var(--border); } .or-divider span { font-size: 11px; color: var(--text-disabled); white-space: nowrap; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; } /* SSO buttons — full-width stacked per design */ .social-login { display: flex; flex-direction: column; gap: 10px; } .social-btn { width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--surface-0); border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--text-primary); font-family: var(--font-sans); cursor: pointer; text-decoration: none; transition: border-color 0.15s, background 0.15s; } .social-btn:hover { border-color: var(--brand-red); background: var(--surface-2); } .social-btn .sso-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .social-btn .sso-icon img, .social-btn .sso-icon svg { width: 20px; height: 20px; } .social-btn p { margin: 0; line-height: 1; } /* Powered by — absolute bottom of right panel */ .akm-powered { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 8px; } .akm-powered > span { font-size: 11px; color: var(--text-disabled); font-weight: 400; letter-spacing: 0.02em; } .akm-powered .mgrant-logo { height: 18px; width: auto; object-fit: contain; opacity: 0.85; } /* Frappe state containers */ .akm-container { display: flex; width: 100%; height: 100%; } .akm-container[style*="display: block"], .akm-container[style*="display:block"] { display: flex !important; } .akm-container.forgot-box, .akm-container.for-login-with-email-link { display: none; } /* Frappe toggles secondary forms with the `hide` class (form-forgot, form-login-with-email-link ship with it, login.route() adds/removes it). This custom login page does not load Frappe's base CSS, so `.hide` has no rule here — without this, the LDAP + email-link forms render stacked under the main form on first paint. Enforce it. */ .hide { display: none !important; } /* Back link used in forgot / email-link panels */ .forgot { text-align: center; margin-top: 10px; } .forgot a { font-size: 12px; color: var(--brand-red); text-decoration: none; font-weight: 500; } .forgot a:hover { color: var(--brand-red-hover); text-decoration: underline; } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (min-width: 1600px) { .akm-page-title h1 { font-size: 30px; } .akm-auth { max-width: 400px; } .akm-right-logo img { height: 50px; } .akm-hero-headline { font-size: 30px; } } @media (max-width: 1200px) { .akm-left { width: 52%; } .akm-right { width: 48%; } } @media (max-width: 1024px) { .akm-left { width: 50%; } .akm-right { width: 50%; } .akm-hero-headline { font-size: 22px; } .akm-left-chrome { padding: 28px 32px; } } @media (max-width: 860px) { .akm-page-wrapper { flex-direction: column; } .akm-left { width: 100%; height: 38vh; min-height: 260px; flex-shrink: 0; } .akm-right { width: 100%; flex: 1; overflow-y: auto; } .akm-hero-desc { display: none; } .akm-left-chrome { padding: 24px; } } @media (max-height: 700px) { .akm-page-title { margin-bottom: 14px; } .akm-input-wrap { margin-bottom: 8px; } .akm-login-box input, .akm-forgot-box input, .form-login-with-email-link input { height: 40px; } .login-btn { height: 42px; } .social-btn { height: 40px; } .or-divider { margin: 10px 0 8px; } .akm-page-title h1 { font-size: 22px; } } @media (max-height: 600px) { .akm-page-title p { display: none; } .akm-powered { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }