/* ========================================================= VEENPLANT LOGIN PAGINA Te gebruiken bij: ========================================================= */ html, body { width: 100%; min-height: 100%; margin: 0; padding: 0; } body.login-page { min-height: 100vh; color: #14231a; background-color: #edf4ef; background-image: radial-gradient(circle at 15% 20%, rgba(168, 213, 181, 0.45), transparent 450px), radial-gradient(circle at 85% 85%, rgba(70, 135, 88, 0.20), transparent 500px), linear-gradient(135deg, #f8fbf9 0%, #eaf3ed 100%); font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; } /* Omdat in je HTML per ongeluk twee -tags staan, zorgen we ervoor dat de loginpagina alsnog goed wordt weergegeven. */ body.login-page, body.login-page * { box-sizing: border-box; } .login-shell { position: relative; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; overflow: hidden; } /* Decoratieve achtergrond */ .login-shell:before { content: ""; position: absolute; top: -180px; left: -180px; width: 460px; height: 460px; border-radius: 50%; background: rgba(10, 122, 63, 0.08); } .login-shell:after { content: ""; position: absolute; right: -160px; bottom: -180px; width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(10, 122, 63, 0.13); box-shadow: 0 0 0 50px rgba(10, 122, 63, 0.035), 0 0 0 100px rgba(10, 122, 63, 0.025); } .login-card { position: relative; z-index: 2; width: 100%; max-width: 440px; padding: 48px 46px 42px 46px; border: 1px solid rgba(214, 226, 218, 0.95); border-radius: 24px; background: #ffffff; box-shadow: 0 30px 80px rgba(6, 61, 36, 0.15), 0 8px 24px rgba(6, 61, 36, 0.08); } /* ========================================================= LOGO ========================================================= */ .login-brand { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; margin: 0 auto 28px auto; border-radius: 24px; background: linear-gradient(145deg, #0b7a43, #064829); box-shadow: 0 14px 30px rgba(6, 72, 41, 0.25); } .login-brand img { display: block; max-width: 66px; max-height: 66px; width: auto; height: auto; } /* ========================================================= KOPTEKST ========================================================= */ .login-heading { margin-bottom: 32px; text-align: center; } .login-heading h1 { margin: 0 0 8px 0; color: #12311f; font-size: 34px; font-weight: bold; line-height: 1.15; letter-spacing: -1px; } .login-heading p { margin: 0; color: #728078; font-size: 15px; } /* ========================================================= FORMULIER ========================================================= */ .login-form { width: 100%; margin: 0; padding: 0; } .login-form > label { display: block; margin: 0 0 20px 0; color: #273a2e; font-size: 14px; font-weight: bold; } .login-form input[type="text"], .login-form input[type="password"] { display: block; width: 100%; height: 54px; margin-top: 8px; padding: 0 16px; border: 1px solid #dce6df; border-radius: 11px; outline: none; background: #fbfdfb; color: #14231a; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 54px; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .login-form input[type="text"]:hover, .login-form input[type="password"]:hover { border-color: #b8cabf; background: #ffffff; } .login-form input[type="text"]:focus, .login-form input[type="password"]:focus { border-color: #0b7a43; background: #ffffff; box-shadow: 0 0 0 4px rgba(11, 122, 67, 0.11); } .login-form input::-webkit-input-placeholder { color: #9ba69f; } .login-form input:-moz-placeholder { color: #9ba69f; } .login-form input::-moz-placeholder { color: #9ba69f; } .login-form input:-ms-input-placeholder { color: #9ba69f; } /* ========================================================= INGELOGD BLIJVEN ========================================================= */ .login-options { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 28px 0; } .remember-switch { position: relative; display: inline-flex !important; align-items: center; min-height: 24px; margin: 0 !important; color: #526158 !important; font-size: 14px !important; font-weight: normal !important; cursor: pointer; user-select: none; } .remember-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; overflow: hidden; } .remember-switch span { position: relative; display: inline-block; flex: 0 0 auto; width: 44px; height: 24px; margin-right: 11px; border-radius: 24px; background: #ccd8d0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); transition: background-color 0.2s ease; } .remember-switch span:before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); transition: left 0.2s ease; } .remember-switch input:checked + span { background: #0b7a43; } .remember-switch input:checked + span:before { left: 23px; } .remember-switch input:focus + span { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 0 4px rgba(11, 122, 67, 0.12); } /* ========================================================= INLOGKNOP ========================================================= */ .login-button { display: block; width: 100%; min-height: 56px; margin: 0; padding: 14px 22px; border: 0; border-radius: 11px; outline: none; background: #086b3b; background: linear-gradient(135deg, #0b7a43 0%, #064829 100%); color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; line-height: 1.4; text-align: center; cursor: pointer; box-shadow: 0 14px 26px rgba(6, 72, 41, 0.22); transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .login-button:hover { background: #075f35; background: linear-gradient(135deg, #0d874a 0%, #075330 100%); box-shadow: 0 18px 34px rgba(6, 72, 41, 0.28); transform: translateY(-1px); } .login-button:focus { box-shadow: 0 18px 34px rgba(6, 72, 41, 0.28), 0 0 0 4px rgba(11, 122, 67, 0.15); } .login-button:active { transform: translateY(0); box-shadow: 0 9px 20px rgba(6, 72, 41, 0.20); } /* ========================================================= EVENTUELE FOUTMELDINGEN ========================================================= */ .login-error, .error-message, .message-error { margin: 0 0 22px 0; padding: 13px 15px; border: 1px solid #f3c5bf; border-radius: 10px; background: #fff2f0; color: #a62c20; font-size: 14px; line-height: 1.5; } /* ========================================================= LINKS, BIJVOORBEELD WACHTWOORD VERGETEN ========================================================= */ .login-form a, .login-card a { color: #08723e; text-decoration: none; } .login-form a:hover, .login-card a:hover { text-decoration: underline; } /* ========================================================= RESPONSIVE ========================================================= */ @media screen and (max-width: 600px) { .login-shell { min-height: 100vh; padding: 18px; } .login-card { max-width: none; padding: 36px 26px 32px 26px; border-radius: 20px; } .login-brand { width: 76px; height: 76px; margin-bottom: 24px; border-radius: 20px; } .login-brand img { max-width: 56px; max-height: 56px; } .login-heading { margin-bottom: 28px; } .login-heading h1 { font-size: 29px; } .login-heading p { font-size: 14px; } .login-form input[type="text"], .login-form input[type="password"] { height: 52px; line-height: 52px; } .login-button { min-height: 54px; } } @media screen and (max-width: 360px) { .login-shell { padding: 10px; } .login-card { padding: 30px 20px 28px 20px; } .login-options { align-items: flex-start; flex-direction: column; } } /* ========================================================= FALLBACK VOOR OUDERE BROWSERS ========================================================= */ .no-flexbox .login-shell { padding-top: 80px; } .no-flexbox .login-card { margin: 0 auto; }