/* ========================================================================== iApp login screen Palette: donker groen #004834, oranje #FF6D23, zachte creme #F8F3ED, lichtgroen #ACDFCF, wit #FFFFFF ========================================================================== */ :root { --color-dark-green: #004834; --color-dark-green-light: #005039; --color-orange: #FF6D23; --color-orange-hover: #E85F1A; --color-cream: #F8F3ED; --color-light-green: #ACDFCF; --color-white: #FFFFFF; --color-text-muted: #9A9A9A; --color-text: #333333; --color-border: #E0DDD8; --radius-card: 16px; --radius-input: 8px; --shadow-card: 0 20px 50px rgba(0, 20, 12, 0.25); } * { box-sizing: border-box; } *:not(.svg-inline--fa) { font-family: 'Montserrat', sans-serif !important; } #updateWarning { margin-top: 30px; background: #EC9706; padding: 15px; border-radius: 15px; } body { background: radial-gradient(circle at 20% 15%, var(--color-dark-green-light) 0%, var(--color-dark-green) 55%); position: relative; min-height: 100vh; margin: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px; } /* Card -------------------------------------------------------------------- #credentialsBlock and .forgotpass are siblings in the HTML, not parent/child. Flex-direction: column on stacks them vertically and centers the pair as a group, so the link always ends up below the card regardless of how 's height gets calculated by other stylesheets (which is what broke the earlier absolute-positioning approach). ------------------------------------------------------------------------- */ #credentialsBlock { width: 90%; max-width: 420px; position: relative; background: var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 0 0 24px 0; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; } img#logo { width: 100%; height: 130px; margin: 0 0 28px 0; padding: 30px 0; background: linear-gradient(135deg, var(--color-dark-green) 0%, var(--color-dark-green-light) 100%); object-fit: contain; border-radius: 0; } #loginScreen { padding: 0 28px; display: flex; flex-direction: column; } #credentialsBlock label { font-size: 12px; margin-bottom: 6px; font-weight: 500; letter-spacing: 0.02em; color: var(--color-text-muted); text-transform: uppercase; float: none; display: block; } /* Form fields ------------------------------------------------------------ */ #credentialsBlock .row { margin: 0; } #credentialsBlock .row + .row { margin-top: 14px; } #credentialsBlock .form-control { display: block; width: 100%; height: 46px; padding: 10px 14px; font-size: 14px; line-height: 1.4; color: var(--color-text); background: var(--color-cream); border: 1px solid var(--color-border); border-radius: var(--radius-input); box-shadow: none; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out; margin-bottom: 0; } #credentialsBlock .form-control:focus { outline: none; background: var(--color-white); border-color: var(--color-orange); box-shadow: 0 0 0 3px rgba(255, 109, 35, 0.15); } /* Remove the old fixed pixel widths that overflowed the card */ #credentialsBlock #userName, #credentialsBlock #password, #credentialsBlock #appName, #credentialsBlock #bundleID { width: 100%; } /* Buttons ----------------------------------------------------------------- */ #loginBtn { margin-top: 6px; } #credentialsBlock button { display: block; width: 100%; padding: 6px 20px; margin: 0; font-size: 13px; line-height: 1.4; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; border-radius: var(--radius-input); color: var(--color-white); background: var(--color-orange); float: none; font-weight: 600; letter-spacing: 0.01em; height: 48px; transition: background-color 0.15s ease-in-out, transform 0.05s ease-in-out; } #credentialsBlock button:hover { background: var(--color-orange-hover); } #credentialsBlock button:active { transform: translateY(1px); } #credentialsBlock button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 109, 35, 0.35); } #credentialsBlock #forgotPassBtn { background: var(--color-cream); color: var(--color-dark-green); } #credentialsBlock #forgotPassBtn:hover { background: var(--color-light-green); } #createNewApp { margin: 20px 28px 0 28px; width: calc(100% - 56px); background: transparent; color: var(--color-dark-green); border: 1px dashed var(--color-border); } #createNewApp:hover { background: var(--color-cream); } /* Forgot password link ---------------------------------------------------- */ .forgotpass { color: var(--color-white); text-align: center; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 13px; opacity: 0.85; transition: opacity 0.15s ease-in-out; } .forgotpass:hover { opacity: 1; } /* Select2 (app picker in Beast Mode) --------------------------------------- */ .select2-container { width: 100% !important; margin-bottom: 0 !important; font-size: 14px; } .select2-search--dropdown { padding: 8px !important; } .select2-selection { height: 46px !important; padding: 5px; border-radius: var(--radius-input) !important; background: var(--color-cream) !important; border-color: var(--color-border) !important; } .select2-search__field { height: 38px !important; } .select2-results__option, .select2-search__field { padding: 6px 12px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; } /* User rights table (unrelated to login, left untouched apart from box-sizing) */ #appWizard { display: none; } /* Small screens ------------------------------------------------------------ */ @media (max-width: 480px) { body { padding: 16px; gap: 20px; } #credentialsBlock { width: 100%; } img#logo { height: 110px; margin-bottom: 20px; } #loginScreen { padding: 0 20px; } body::before { background-size: 90% auto; opacity: 0.25; } }