/* ============================================================================ * IDA ERP — sign-in page * Loaded from Website Settings -> HTML. Every rule is scoped to the * authentication paths, so the rest of the portal is untouched. * Palette: IDA navy #00143E, IDA blue #004AED, arc red #FA0314. * ==========================================================================*/ body[data-path="login"], body[data-path="update-password"], body[data-path="reset-password"] { background-color: #00143e; background-image: url("/files/ida/login-bg.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; /* `fixed` is unreliable on iOS Safari at every size and buys nothing on a cover background, so it is not used at all. */ background-attachment: scroll; min-height: 100vh; min-height: 100svh; /* ignored by older engines, which keep the vh above */ } /* keep the card optically centred on the artwork */ body[data-path="login"] .page-content-wrapper, body[data-path="update-password"] .page-content-wrapper, body[data-path="reset-password"] .page-content-wrapper { display: flex; align-items: center; justify-content: center; /* min-height (not height): if the card is taller than the viewport the container grows and the page scrolls, instead of clipping the top. */ min-height: 100vh; min-height: 100svh; padding-top: 0; padding-block: 24px; } body[data-path="login"] .web-footer, body[data-path="login"] .navbar { display: none; } /* ------------------------------------------------------------- the card -- */ body[data-path="login"] .page-card, body[data-path="update-password"] .page-card, body[data-path="reset-password"] .page-card { background-color: #ffffff; border: none; border-radius: 12px; padding: 36px 32px 32px; max-width: 400px; box-shadow: 0 0 0 1px rgba(0, 20, 62, .06), 0 18px 48px rgba(0, 9, 31, .38); } /* --------------------------------------------------- logo, dead centre --- */ body[data-path="login"] .page-card-head, body[data-path="update-password"] .page-card-head, body[data-path="reset-password"] .page-card-head { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; margin-bottom: 4px; } body[data-path="login"] .page-card-head .app-logo, body[data-path="update-password"] .page-card-head .app-logo, body[data-path="reset-password"] .page-card-head .app-logo { width: auto; height: 64px; max-width: 180px; margin: 0 auto; display: block; } body[data-path="login"] .page-card-head-text, body[data-path="update-password"] .page-card-head-text, body[data-path="reset-password"] .page-card-head-text { text-align: center; width: 100%; } body[data-path="login"] .page-card-head h4, body[data-path="login"] .page-card-head .page-card-title { color: #00143e; font-weight: 600; font-size: 20px; margin-bottom: 4px; } body[data-path="login"] .page-card-subtitle, body[data-path="update-password"] .page-card-subtitle { color: #556b82; font-size: 13px; } /* a hairline in the logo's three colours, under the head */ body[data-path="login"] .page-card-head::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; margin-top: 2px; background: linear-gradient(90deg, #fa0314 0%, #00143e 50%, #004aed 100%); } /* ------------------------------------------------------------- fields --- */ body[data-path="login"] .form-control, body[data-path="update-password"] .form-control, body[data-path="reset-password"] .form-control { background-color: #ffffff; border: 1px solid #8896a6; border-radius: 4px; height: 36px; color: #223548; box-shadow: none; } body[data-path="login"] .form-control:hover { border-color: #004aed; } body[data-path="login"] .form-control:focus, body[data-path="update-password"] .form-control:focus { border-color: #004aed; box-shadow: 0 0 0 2px rgba(0, 74, 237, .25); outline: none; } body[data-path="login"] .form-label, body[data-path="login"] .control-label { color: #556b82; font-weight: 400; } /* ------------------------------------------------------------ buttons --- */ body[data-path="login"] .btn-login, body[data-path="login"] .btn-default.btn-block, body[data-path="update-password"] .btn-primary, body[data-path="reset-password"] .btn-primary { background-color: #004aed !important; border: 1px solid #004aed !important; color: #ffffff !important; border-radius: 8px; height: 38px; font-weight: 600; box-shadow: none; } body[data-path="login"] .btn-login:hover, body[data-path="update-password"] .btn-primary:hover { background-color: #0040d1 !important; border-color: #0040d1 !important; } body[data-path="login"] .btn-login:focus-visible { box-shadow: 0 0 0 3px rgba(0, 74, 237, .3) !important; } body[data-path="login"] a, body[data-path="login"] .forgot-password-message a { color: #004aed; } body[data-path="login"] a:hover { color: #0036b3; } /* social / third-party sign-in keeps the neutral Fiori button */ body[data-path="login"] .social-logins .btn, body[data-path="login"] .login-with-email-link { background-color: #ffffff !important; border: 1px solid #bcc3ca !important; color: #004aed !important; border-radius: 8px; } /* ------------------------------------------------------------- errors --- */ body[data-path="login"] .login-error-banner, body[data-path="login"] .field-error { color: #aa0808; } /* --------------------------------------------------------- small print --- */ body[data-path="login"] .page-card::after { content: "IDA Tech-Solutions LLP · Intelligent Digital Alpha"; display: block; margin-top: 22px; padding-top: 14px; border-top: 1px solid #eaecee; text-align: center; font-size: 11px; letter-spacing: .4px; color: #8e9aa6; } /* ====================================================================== */ /* Responsive */ /* The artwork is 1600x900 and is cropped by `cover`. On a narrow portrait */ /* screen that crop throws away the left and right thirds - including two */ /* of the three pillar captions - so below 768px the page drops the SVG and */ /* keeps the brand gradient instead of showing a badly cropped picture. */ /* ====================================================================== */ /* --- tablets, portrait and landscape (768-1024) ----------------------- */ @media (max-width: 1024px) { body[data-path="login"] .page-card, body[data-path="update-password"] .page-card, body[data-path="reset-password"] .page-card { max-width: 420px; } } /* --- phones and narrow tablets: gradient instead of a cropped image ---- */ @media (max-width: 767.98px) { body[data-path="login"], body[data-path="update-password"], body[data-path="reset-password"] { background-image: linear-gradient(160deg, #00091f 0%, #00143e 45%, #004aed 100%); } body[data-path="login"] .page-content-wrapper, body[data-path="update-password"] .page-content-wrapper, body[data-path="reset-password"] .page-content-wrapper { padding-inline: 16px; padding-block: 20px; } body[data-path="login"] .page-card, body[data-path="update-password"] .page-card, body[data-path="reset-password"] .page-card { max-width: 100%; min-height: auto; border-radius: 12px; padding: 28px 22px 24px; } } /* --- small phones (<=360px): tighten without shrinking tap targets ----- */ @media (max-width: 360px) { body[data-path="login"] .page-content-wrapper { padding-inline: 12px; } body[data-path="login"] .page-card { padding: 24px 18px 20px; } body[data-path="login"] .page-card-head .app-logo { height: 52px; } body[data-path="login"] .page-card-head h4 { font-size: 18px; } } /* --- short viewports (landscape phones, ~<=520px tall) ---------------- */ /* Recover vertical space so the card still fits; the form stays scrollable. */ @media (max-height: 520px) and (orientation: landscape) { body[data-path="login"] .page-content-wrapper { padding-block: 12px; } body[data-path="login"] .page-card { padding: 20px 22px 18px; } body[data-path="login"] .page-card-head { gap: 8px; margin-bottom: 0; } body[data-path="login"] .page-card-head .app-logo { height: 40px; } body[data-path="login"] .page-card-head::after { display: none; } body[data-path="login"] .page-card::after { margin-top: 14px; padding-top: 10px; } } /* --- inputs must never trigger iOS auto-zoom (needs >=16px) ----------- */ @media (max-width: 767.98px) { body[data-path="login"] .form-control, body[data-path="update-password"] .form-control, body[data-path="reset-password"] .form-control { font-size: 16px; height: 42px; /* comfortable touch target */ } body[data-path="login"] .btn-login, body[data-path="login"] .btn-default.btn-block { height: 44px; /* >=44px, the usual minimum touch target */ font-size: 15px; } } /* --- nothing may scroll sideways ------------------------------------- */ body[data-path="login"], body[data-path="update-password"], body[data-path="reset-password"] { overflow-x: hidden; } body[data-path="login"] img, body[data-path="login"] svg { max-width: 100%; }