/* * Akamai mGrant — Login v7 styles * * Ported from the approved login-v7 mockup (context/mockups/login-v7/preview.html). * Structure mirrors frappe_bal/bal/www/login.html — visual tokens swapped to * Akamai canonical palette. * * Palette: #0099CC (primary) · #FF9933 (accent) · #002856 (deep navy) · * #0A2B50 (ink) · #000 (pure). * * Hex literals inline here (mirroring BAL). The zero-hex rule in the rest of * the app still applies — this file is the single exception for the auth route. */ /* 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: 'DM Sans', sans-serif; background: #002856; } .akm-page-wrapper { height: 100vh; display: flex; } /* ═══════════════════════════════════════════ LEFT PANEL — 60% ═══════════════════════════════════════════ */ .akm-left { width: 60%; position: relative; overflow: hidden; background: #002856; flex-shrink: 0; } /* Carousel slides */ .akm-slide { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity 1.6s ease; } .akm-slide.active { opacity: 1; } .akm-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .akm-slide.active img { animation: akm-drift 12s ease-out forwards; } @keyframes akm-drift { 0% { transform: scale(1.02); } 100% { transform: scale(1.08); } } /* Per-slide tailored overlays */ .akm-slide[data-i="0"] .akm-slide-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(0, 40, 86, 0.25) 0%, rgba(0, 40, 86, 0.15) 30%, rgba(0, 40, 86, 0.55) 65%, rgba(0, 40, 86, 0.92) 100%); } .akm-slide[data-i="1"] .akm-slide-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(0, 40, 86, 0.3) 0%, rgba(0, 40, 86, 0.1) 25%, rgba(0, 40, 86, 0.45) 60%, rgba(0, 40, 86, 0.92) 100%); } .akm-slide[data-i="2"] .akm-slide-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(0, 40, 86, 0.35) 0%, rgba(0, 40, 86, 0.2) 30%, rgba(0, 40, 86, 0.6) 60%, rgba(0, 40, 86, 0.94) 100%); } .akm-slide[data-i="3"] .akm-slide-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(0, 40, 86, 0.3) 0%, rgba(0, 40, 86, 0.15) 25%, rgba(0, 40, 86, 0.55) 55%, rgba(0, 40, 86, 0.94) 100%); } /* Per-slide text — fades up when slide activates */ .akm-slide-text { position: absolute; bottom: 80px; left: 44px; right: 44px; z-index: 3; color: #fff; opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease 0.4s, transform 0.9s ease 0.4s; } .akm-slide.active .akm-slide-text { opacity: 1; transform: translateY(0); } .akm-slide-eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; opacity: 0.55; margin-bottom: 10px; color: #FF9933; } .akm-slide-headline { font-size: 24px; font-weight: 300; line-height: 1.35; letter-spacing: -0.2px; max-width: 440px; margin-top: 0; margin-bottom: 8px; color: #ffffff; } .akm-slide-headline strong { font-weight: 600; } .akm-slide-desc { font-size: 12.5px; opacity: 0.55; line-height: 1.55; max-width: 420px; } .akm-slide-desc strong { opacity: 1; font-weight: 600; color: rgba(255, 255, 255, 0.85); } /* Static chrome: brand bar (top) + progress + stat (bottom) */ .akm-left-chrome { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 36px 44px; color: #fff; pointer-events: none; } .akm-left-chrome .akm-pr-seg { pointer-events: auto; } .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; } .akm-left-bottom { display: flex; justify-content: space-between; align-items: flex-end; } .akm-impact-num { text-align: right; } .akm-impact-num .val { font-size: 20px; font-weight: 700; opacity: 0.6; letter-spacing: -0.3px; } .akm-impact-num .lbl { font-size: 9.5px; opacity: 0.3; font-weight: 500; letter-spacing: 0.3px; margin-top: 1px; } /* Progress bar */ .akm-progress { display: flex; gap: 5px; } .akm-pr-seg { width: 44px; height: 2px; background: rgba(255, 255, 255, 0.2); border-radius: 1px; overflow: hidden; cursor: pointer; pointer-events: auto; } .akm-pr-fill { height: 100%; width: 0%; background: rgba(255, 255, 255, 0.75); border-radius: 1px; } .akm-pr-seg.active .akm-pr-fill { animation: akm-prfill 7s linear forwards; } @keyframes akm-prfill { 0% { width: 0%; } 100% { width: 100%; } } /* ═══════════════════════════════════════════ RIGHT PANEL — 40% ═══════════════════════════════════════════ */ .akm-right { width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; position: relative; padding: 24px 24px 56px; } .akm-auth { width: 100%; max-width: 360px; } /* Akamai logo — right panel, above heading */ .akm-right-logo { display: flex; justify-content: center; margin-bottom: 20px; } .akm-right-logo img { height: 56px; width: auto; max-width: 300px; object-fit: contain; } /* Page title */ .akm-page-title { text-align: center; margin-bottom: 24px; } .akm-page-title h1 { font-size: 26px; font-weight: 700; color: #002856; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px; } .akm-page-title p { font-size: 13px; color: #4A5C7A; font-weight: 400; } /* Field labels */ .akm-field-label { display: block; font-size: 12px; font-weight: 600; color: #0A2B50; margin-bottom: 5px; letter-spacing: 0.01em; } /* Icon-inside inputs */ .akm-input-wrap { position: relative; display: flex; align-items: center; margin-bottom: 14px; } .akm-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8FA0B9; 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 #D7E4EA; border-radius: 8px; font-size: 13px; font-family: 'DM Sans', sans-serif; color: #0A2B50; background: #F4F9FD; 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: #0099CC; background: #fff; box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.10); } .akm-login-box input::placeholder, .akm-forgot-box input::placeholder, .form-login-with-email-link input::placeholder { color: #A8BAC9; } .akm-login-box input:-webkit-autofill, .akm-login-box input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #F4F9FD inset; -webkit-text-fill-color: #0A2B50; } /* 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: #8FA0B9; padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; transition: color 0.2s; } .eye-toggle:hover { color: #0099CC; } .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: -6px; margin-bottom: 18px; } .akm-forgot-link a { font-size: 12px; color: #0099CC; text-decoration: none; font-weight: 500; } .akm-forgot-link a:hover { color: #007AA3; text-decoration: underline; } /* Sign In button */ .login-btn { width: 100%; height: 46px; background: #0099CC; border: none; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: background 0.15s, transform 0.1s; letter-spacing: 0.01em; } .login-btn:hover { background: #007AA3; } .login-btn:active { transform: scale(0.99); } .btn-ldap-login { width: 100%; height: 44px; background: #fff; border: 1.5px solid #D7E4EA; border-radius: 8px; color: #0A2B50; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; margin-top: 8px; font-family: 'DM Sans', sans-serif; } .btn-ldap-login:hover { border-color: #0099CC; background: #F4F9FD; } /* OR divider */ .or-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; } .or-divider .line { flex: 1; height: 1px; background: #E8EFF3; } .or-divider span { font-size: 11px; color: #A8BAC9; 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: #fff; border: 1.5px solid #D7E4EA; border-radius: 8px; font-size: 13px; font-weight: 500; color: #0A2B50; font-family: 'DM Sans', sans-serif; cursor: pointer; text-decoration: none; transition: border-color 0.15s, background 0.15s; } .social-btn:hover { border-color: #0099CC; background: #F4F9FD; } .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: #8FA0B9; 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; } /* Back link used in forgot / email-link panels */ .forgot { text-align: center; margin-top: 10px; } .forgot a { font-size: 12px; color: #0099CC; text-decoration: none; font-weight: 500; } .forgot a:hover { color: #007AA3; 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: 64px; } .akm-slide-headline { font-size: 28px; } } @media (max-width: 1200px) { .akm-left { width: 55%; } .akm-right { width: 45%; } } @media (max-width: 1024px) { .akm-left { width: 50%; } .akm-right { width: 50%; } .akm-slide-headline { font-size: 20px; } .akm-slide-text { left: 32px; right: 32px; } .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-slide-desc { display: none; } .akm-left-chrome { padding: 24px; } .akm-slide-text { left: 24px; right: 24px; bottom: 56px; } } @media (max-width: 480px) { .akm-impact-num { display: none; } } @media (max-height: 700px) { .akm-page-title { margin-bottom: 16px; } .akm-input-wrap { margin-bottom: 10px; } .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: 12px 0 10px; } .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; } }