/* =============================================================================
KNU login theme — shared visual language for the sign-in pages.
Extracted from the student (SMS) login so the admin and staff portals can use
the same look without a third and fourth copy of the CSS.
IMPORTANT: this file is presentation ONLY. It deliberately contains no
selectors that depend on form field names or ids, because those differ per
portal and are load-bearing:
admin -> name="username" / id="password" (plain POST)
staff -> name="email" / id="pwd" (AJAX to ajax_login.php)
student-> name="email" / id="pwd" (plain POST)
Style by CLASS only, so a reskin can never break authentication.
sms/login.php still carries its own inline copy of this design (plus the
per-character heading animation). Consolidating it onto this file is safe to
do later, but was left alone here to avoid touching a working student login.
========================================================================== */
:root{
--navy:#0b3a6f; --navy2:#123f78; --gold:#f2b705; --ink:#101828; --muted:#667085;
--line:#e7ebf1; --field:#f4f7fb; --danger:#c62828; --success:#1b5e20;
/* Sampled from logo.png itself: the wireframe emblem is indigo, the
"Knowledge" serif is warm tan. Used by the brand lockups below. */
--logo-blue:#2e3192; --logo-gold:#a3825d;
}
/* Full-screen portal: hide the surrounding site chrome on the login page only.
.top-bar-area / .page-header-default -> public marketing site nav
.app-header -> the admin/staff dashboard navbar
("Admin Part" + language links)
This file is linked ONLY from the login pages, so hiding .app-header here
cannot affect the rest of the dashboard. The language switcher those headers
carried is rebuilt inside .knu-topbar so the feature is not lost. */
.top-bar-area, .page-header-default, .page-header-default.page-header-lg,
.app-header{ display:none !important; }
body{ margin:0; overflow-x:hidden; }
.knu-login{ padding:0; margin:0; background:#fff; }
.knu-auth{ position:relative; min-height:100vh; overflow:hidden; background:#fff;
direction:ltr; text-align:left;
width:100vw; margin-left:calc(50% - 50vw); }
/* Right-side brand panel fills the area; the white wave covers the left.
This used to be a photograph of ceremonial flags behind a navy scrim. It is now
a graduated navy field carrying the university lockup — see .knu-panelbrand.
The ground stays DARK on purpose: the left panel is pure white, and without a
real tonal step the wave silhouette and its dotted seam stop reading and the
whole composition flattens into one white slab. (A light-ground version was
mocked up and rejected for exactly that.) */
.knu-auth-media{ position:absolute; inset:0; z-index:1;
background:
radial-gradient(120% 90% at 78% 38%, #17508f 0%, rgba(23,80,143,0) 62%),
linear-gradient(150deg, #0e447f 0%, #0b3a6f 46%, #072a52 100%); }
.knu-wave{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
/* --- Large brand lockup on the panel --------------------------------------
padding-left:61% keeps the mark inside the region that is actually visible.
The wave path crosses between x=575 and x=613 of its 1000-unit viewBox and it
is drawn with preserveAspectRatio="none", so it stretches with the viewport:
the curve always lands at ~57.5-61% of the width whatever the screen size.
Centring in the remaining 39% is therefore correct at every width, whereas
centring in the full panel would bury the mark under the white wave. */
.knu-panelbrand{ position:absolute; inset:0; padding-left:61%;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; }
/* FALLBACK, for the rare engine with no CSS mask support: crop the emblem out
of the 342x95 raster sprite (97:95 is the gutter measured in that artwork, so
no part of the wordmark bleeds in) and reverse it with a filter —
brightness(0) flattens the thin #2e3192 line art to black while keeping the
alpha, invert(1) then makes it white. Correct, but soft: the sprite's emblem
is only 97px wide and this box is up to 236px. */
.knu-panel-emblem{ width:clamp(150px, 15.5vw, 236px); aspect-ratio:97 / 95;
background:url('https://cdn.knu.edu.iq/sms/images/logo.png') no-repeat left center;
background-size:auto 100%;
filter:brightness(0) invert(1);
animation:knuPop .55s cubic-bezier(.2,.8,.3,1) both; }
/* PREFERRED: the vector emblem, traced from the 1000x250 artwork — see
_reports/tools/trace_emblem.py. Sharp at any size and on any pixel density,
which the sprite never was here.
Driving it as a MASK rather than an ![]()
means one file serves both places:
the mask supplies the shape, background-color supplies the colour, so the
same asset is white on the navy panel and indigo on the white mobile lockup
with no filter hacks and no second file. */
@supports (mask-image:url(#m)) or (-webkit-mask-image:url(#m)){
.knu-panel-emblem{
aspect-ratio:237 / 228; /* the traced viewBox */
background:#fff; filter:none;
-webkit-mask:url('/assets/knu-emblem.svg?v=1') no-repeat center / contain;
mask:url('/assets/knu-emblem.svg?v=1') no-repeat center / contain; }
}
.knu-panel-wordmark{ font-family:'Poppins',system-ui,sans-serif; font-weight:600;
font-size:clamp(38px, 5.1vw, 76px); line-height:1; letter-spacing:-.5px;
color:#e6c9a0; display:inline-flex; }
/* Lifted off the logo's #a3825d, which is mixed for white paper and goes muddy
on navy. Same hue, raised in value until it holds against the dark ground. */
.knu-panel-wordmark .l{ opacity:0; transform:translateY(10px);
animation:knuWrite .40s ease forwards; animation-delay:calc(.30s + var(--i) * .07s); }
.knu-panel-wordmark .l.k{ color:#fff; }
.knu-panel-sub{ font-family:'Poppins',system-ui,sans-serif; font-weight:500;
font-size:clamp(12px, 1.15vw, 17px); letter-spacing:.42em; text-indent:.42em;
text-transform:uppercase; color:rgba(255,255,255,.72);
opacity:0; animation:knuWrite .5s ease forwards; animation-delay:1.05s; }
/* --- Compact lockup for <900px, where the panel above is display:none ------ */
.knu-mbrand{ display:none; flex-direction:column; align-items:center; gap:12px; margin:0 0 26px; }
.knu-emblem{ width:96px; height:96px;
background:url('https://cdn.knu.edu.iq/sms/images/logo.png') no-repeat left center;
background-size:auto 96px;
animation:knuPop .55s cubic-bezier(.2,.8,.3,1) both; }
/* Same swap as the panel, but coloured indigo rather than white — on the white
mobile background the mark keeps its true colour. */
@supports (mask-image:url(#m)) or (-webkit-mask-image:url(#m)){
.knu-emblem{
width:96px; height:auto; aspect-ratio:237 / 228;
background:var(--logo-blue);
-webkit-mask:url('/assets/knu-emblem.svg?v=1') no-repeat center / contain;
mask:url('/assets/knu-emblem.svg?v=1') no-repeat center / contain; }
}
.knu-wordmark{ font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:34px;
line-height:1; letter-spacing:-.5px; color:var(--logo-gold); display:inline-flex; }
/* On white the mark keeps its true colours, so no filter here and the K stays indigo. */
.knu-wordmark .l{ opacity:0; transform:translateY(8px);
animation:knuWrite .40s ease forwards; animation-delay:calc(.30s + var(--i) * .07s); }
.knu-wordmark .l.k{ color:var(--logo-blue); }
@keyframes knuPop{ from{ opacity:0; transform:scale(.72); } to{ opacity:1; transform:scale(1); } }
@keyframes knuWrite{ to{ opacity:1; transform:translateY(0); } }
/* Everything settles to its final state; nothing loops. This is a page staff
sign into every day — the animation plays once and then gets out of the way. */
@media (prefers-reduced-motion:reduce){
.knu-panel-emblem, .knu-panel-wordmark .l, .knu-panel-sub,
.knu-emblem, .knu-wordmark .l{ animation:none; opacity:1; transform:none; }
}
.knu-auth-content{ position:relative; z-index:3; width:54%; min-height:100vh; box-sizing:border-box;
padding:32px 5.5% 40px; display:flex; flex-direction:column; }
.knu-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.knu-brandlogo{ height:66px; width:auto; display:block; }
.knu-toplinks{ display:flex; align-items:center; gap:20px; }
.knu-toplinks a{ color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; }
.knu-toplinks a:hover{ color:var(--navy); }
.knu-langwrap{ position:relative; display:inline-flex; align-items:center; }
.knu-langsel{ -webkit-appearance:none; appearance:none; background:#fff; border:1.5px solid var(--line);
border-radius:10px; padding:8px 36px 8px 14px; font-size:14px; font-weight:600; color:var(--navy);
cursor:pointer; outline:none; transition:border-color .18s, box-shadow .18s; }
.knu-langsel:hover{ border-color:#c9d4e4; }
.knu-langsel:focus{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(11,58,111,.10); }
.knu-langwrap::after{ content:""; position:absolute; right:14px; top:50%; margin-top:-6px;
width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
transform:rotate(45deg); pointer-events:none; }
.knu-formwrap{ margin:auto 0; width:100%; max-width:400px; padding:22px 0; }
.knu-h1{ font-size:40px; line-height:1.06; font-weight:800; color:var(--ink); margin:0 0 26px;
letter-spacing:-.6px; text-align:center; }
.knu-h1 .dot{ color:var(--gold); }
.knu-sub{ font-size:15px; color:var(--muted); margin:0 0 24px; }
.knu-alert{ border-radius:12px; padding:11px 14px; font-size:13px; margin-bottom:15px; border:1px solid; }
.knu-alert.error{ color:var(--danger); border-color:#f5c6c6; background:#fdf3f3; }
.knu-alert.success{ color:var(--success); border-color:#c3e6c4; background:#f2fbf2; }
.knu-alert.info{ color:#0b3a6f; border-color:#c5d6ea; background:#f2f7fd; }
.knu-field{ margin-bottom:14px; }
.knu-fieldbox{ position:relative; background:var(--field); border:1.6px solid transparent; border-radius:15px;
padding:9px 52px 9px 18px; transition:border-color .18s, background .18s, box-shadow .18s; }
.knu-fieldbox label{ display:block; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--muted); margin-bottom:1px; }
.knu-fieldbox input{ width:100%; border:none; background:transparent; outline:none; font-size:15px;
font-weight:600; color:var(--ink); padding:0; }
.knu-fieldbox input::placeholder{ color:#b3bccb; font-weight:500; }
.knu-fieldbox:focus-within{ border-color:var(--navy); background:#fff; box-shadow:0 0 0 4px rgba(11,58,111,.10); }
.knu-fieldicon{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#9aa7bd; font-size:16px; }
button.knu-fieldicon{ background:none; border:none; cursor:pointer; padding:4px; line-height:1; }
button.knu-fieldicon:hover{ color:var(--navy); }
.knu-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
border:none; cursor:pointer; margin-top:16px; background:var(--navy); color:#fff;
padding:16px 20px; border-radius:10px; font-weight:700; font-size:15px; letter-spacing:.2px;
box-shadow:none; transition:background .18s; }
.knu-btn:hover{ background:#092e59; }
.knu-btn:active{ background:#07264a; }
.knu-btn[disabled]{ opacity:.65; cursor:default; }
.knu-btn .arrow{ font-size:18px; line-height:1; opacity:.85; }
.knu-btn .glyphicon{ color:#fff; }
/* --- Turnstile ------------------------------------------------------------
Same treatment as the student login: parked in the empty band beside the
fields on very wide screens, otherwise centred under them.
The 1600px floor is measured, not guessed — the white panel is ~54% of the
viewport and the widget needs 5.5% padding + 400px form + 40px gap + 300px
widget, which does not fit below ~1545px. Do not lower it.
The widget stays inside the