/* ---------- Company font: Merel ----------
Merel is a commercial typeface (Inhouse Type / Adobe Fonts). The @font-face rules below
are wired and waiting: drop the licensed Merel-*.woff2 files into public/fonts/ and every
page and printed document picks them up at once — no other change anywhere. Until those
files exist the browser cannot fetch them and falls back down the stack in --font, which
is why the portal currently renders in the system face.
If the licence comes as an Adobe Fonts web project instead of files, add the Adobe
gives you to each page's and delete the four blocks below; "Merel" in --font then
resolves through Adobe.
font-display: swap means text is never invisible while a face loads. */
@font-face {
font-family: "Merel"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/fonts/Merel-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Merel"; font-style: normal; font-weight: 500; font-display: swap;
src: url("/fonts/Merel-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Merel"; font-style: normal; font-weight: 700; font-display: swap;
src: url("/fonts/Merel-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Merel"; font-style: italic; font-weight: 400; font-display: swap;
src: url("/fonts/Merel-Italic.woff2") format("woff2");
}
:root {
--navy: #16237a;
--royal: #3a63b8;
--bright: #1e7fd0;
--ink: #1b2433;
--muted: #6b7689;
--line: #e2e7f0;
--bg-1: #eef2fb;
--bg-2: #dde6f7;
--white: #ffffff;
--danger: #c0392b;
--danger-bg: #fdecea;
--shadow: 0 18px 50px rgba(22, 35, 122, 0.18);
--radius: 16px;
--font: "Merel", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
"Traditional Arabic", sans-serif;
}
* { box-sizing: border-box; }
/* The `hidden` attribute must always win, even over rules like display:flex
(otherwise hidden modals/forms stay visible). */
[hidden] { display: none !important; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font);
color: var(--ink);
}
/* ---------- Login page ---------- */
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background:
radial-gradient(1200px 600px at 50% -10%, var(--bg-2), transparent 60%),
linear-gradient(160deg, var(--bg-1) 0%, #ffffff 55%, var(--bg-1) 100%);
}
.login-card {
width: 100%;
max-width: 420px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 40px 36px 28px;
animation: rise 0.4s ease both;
}
@keyframes rise {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.brand {
display: flex;
justify-content: center;
margin-bottom: 18px;
}
.brand-logo {
width: 220px;
max-width: 80%;
height: auto;
}
.login-title {
text-align: center;
margin: 4px 0 2px;
font-size: 26px;
font-weight: 700;
color: var(--navy);
letter-spacing: 0.2px;
}
.login-subtitle {
text-align: center;
margin: 0 0 26px;
color: var(--muted);
font-size: 14px;
}
.field { margin-bottom: 18px; }
.field label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 7px;
color: var(--ink);
}
.field input {
width: 100%;
padding: 12px 14px;
font-size: 15px;
border: 1px solid var(--line);
border-radius: 10px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
background: #fbfcfe;
}
.field input:focus {
border-color: var(--royal);
box-shadow: 0 0 0 3px rgba(58, 99, 184, 0.15);
background: var(--white);
}
.hint {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--muted);
}
.password-wrap { position: relative; }
.password-wrap input { padding-right: 64px; }
.toggle-pw {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--bright);
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 6px 8px;
border-radius: 8px;
}
.toggle-pw:hover { background: var(--bg-1); }
.btn-primary {
width: 100%;
padding: 13px 16px;
font-size: 15px;
font-weight: 700;
color: var(--white);
background: linear-gradient(135deg, var(--navy), var(--bright));
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 4px;
transition: transform 0.05s, filter 0.15s, opacity 0.15s;
letter-spacing: 0.3px;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.error-banner {
background: var(--danger-bg);
color: var(--danger);
border: 1px solid #f5c6c2;
border-radius: 10px;
padding: 11px 13px;
font-size: 13px;
margin-bottom: 16px;
}
/* Confirmation counterpart of .error-banner (e.g. "reset link sent"). */
.success-banner {
background: #eaf7ee;
color: #1e7a45;
border: 1px solid #c2e6cf;
border-radius: 10px;
padding: 11px 13px;
font-size: 13px;
margin-bottom: 16px;
}
.success-banner .hint { color: #1e7a45; }
/* Secondary links under a login-card form ("Forgot password?", "Back to sign in"). */
.login-links {
margin: 16px 0 0;
text-align: center;
font-size: 13px;
}
.login-links a {
color: var(--bright);
font-weight: 600;
text-decoration: none;
}
.login-links a:hover { text-decoration: underline; }
/* .btn-primary rendered as an (it is a