@charset "UTF-8"; /** * Manara Kulud Academy - sign-in screen. * * run_id KACADLOGIN_20260806 * * Nothing in this file can reach any other page of the Academy. Three * independent things guarantee that, because the site has five competing CSS * layers and a leak would surface somewhere unexpected: * * 1. the stylesheet is only enqueued on the login page at all; * 2. every class carries the .mkl- prefix, verified as 0 occurrences * site-wide before this file was written; * 3. every rule that HIDES or RESETS something - the rules that would * actually damage another page if they escaped - is additionally scoped * to body.manara-academy-login-page. * * Colours come from the Phase 2 token layer where one exists, and are written * as literals with a fallback so this file still renders correctly if * tokens.css is ever dropped. The dark panel's two brand colours are measured * from the Manara application itself: * #10303a - the Manara app icon's background, and the Manara HR sign-in * page background * #0e7c86 - the Manara app icon's tile, and the HR primary button * so the logo sits on its own background colour with no visible edge. * * Contrast values in the comments are computed, not estimated. */ .manara-academy-login-page { /* Manara brand, measured from assets/images/manara-logo.png */ --mkl-navy: #10303a; --mkl-navy-2: #0c242c; --mkl-teal: #0e7c86; --mkl-mint: #5dcaa5; /* 6.94:1 on navy PASS */ /* Kulud brand */ --mkl-burgundy: #8b0e04; --mkl-green: var(--kla-primary, #00843d); /* white on this 4.81:1 PASS */ --mkl-green-dark: var(--kla-primary-dark, #00632e); /* white 7.44:1 PASS */ --mkl-green-deep: var(--kla-primary-deeper, #004a22); /* Neutrals */ --mkl-bg: var(--kla-bg, #f9fafb); --mkl-surface: var(--kla-surface, #ffffff); --mkl-border: var(--kla-border, #e5e7eb); /* decorative hairline only */ --mkl-border-interactive: var(--kla-border-interactive, #858c98); /* 3.39:1 */ --mkl-text: var(--kla-text, #1f2937); /* 14.68:1 on white */ --mkl-text-2: var(--kla-text-secondary, #4b5563); /* 7.56:1 on white */ --mkl-text-3: var(--kla-text-muted, #6b7280); /* 4.83:1 on white */ --mkl-danger-text: var(--kla-danger-text, #b91c1c); --mkl-danger-tint: var(--kla-danger-tint, #fdeaea); --mkl-success-text: var(--kla-success-text, #12803a); --mkl-success-tint: var(--kla-success-tint, #e8f6ed); --mkl-info-text: var(--kla-info-text, #1d4ed8); --mkl-info-tint: var(--kla-info-tint, #e8effd); --mkl-font: var(--kla-font, "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); --mkl-radius: 16px; --mkl-radius-sm: 10px; --mkl-field-h: 48px; } /* ───────────────────────────────────────────────────────────── * Reset the page shell. * * The template does not call get_header() or get_footer(), so Eduma's header, * black page-title banner and footer are never rendered. What remains to * neutralise is anything hooked to wp_footer, plus the theme's own body * padding. * ───────────────────────────────────────────────────────────── */ /* * Deliberately NOT written as `html:has(...), body...` in a single selector * list. A selector list is non-forgiving: in a browser without :has() support * the whole rule is dropped, taking the plain body selector down with it. The * layout does not need a height on at all - .mkl-page carries its own * min-height - so the :has() half is simply not written. */ body.manara-academy-login-page { margin: 0; padding: 0; background: var(--mkl-bg); color: var(--mkl-text); font-family: var(--mkl-font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* nothing may scroll the page sideways */ } /* * hidden LOSES to any author display rule, because [hidden] is only a UA * stylesheet default. This page uses the hidden attribute for the Caps Lock * warning and for message regions, so without this rule they would all render * permanently visible. One scoped rule covers every current and future use. */ body.manara-academy-login-page [hidden] { display: none !important; } /* * Surfaces that other components attach to the bottom of the document. * Eduma prints its mobile action bar and its own login popup on wp_footer, and * both would otherwise appear underneath this screen - the popup carrying a * second "Login with your site account" heading, which is exactly the * duplicate the redesign is meant to remove. */ body.manara-academy-login-page .navbar-mobile-button, body.manara-academy-login-page #thim-popup-login, body.manara-academy-login-page .mobile-menu-wrapper, body.manara-academy-login-page #back-to-top, body.manara-academy-login-page .thim-login-popup, body.manara-academy-login-page #wcbt-quick-view-popup, body.manara-academy-login-page #wcbt-snackbar { display: none !important; } /* The admin bar is 32px / 46px tall and is absolutely positioned over us. */ body.manara-academy-login-page.admin-bar .mkl-page { min-height: calc(100vh - 32px); } @media screen and (max-width: 782px) { body.manara-academy-login-page.admin-bar .mkl-page { min-height: calc(100vh - 46px); } } /* Keep the theme's skip link usable but out of the way until focused. */ body.manara-academy-login-page .kla-skip-link { z-index: 50; } /* ───────────────────────────────────────────────────────────── * Layout * ───────────────────────────────────────────────────────────── */ .mkl-page { display: grid; grid-template-columns: 1fr; min-height: 100vh; min-height: 100svh; /* mobile browsers: excludes the collapsing toolbar */ } @media (min-width: 1024px) { .mkl-page { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } } /* ───────────────────────────────────────────────────────────── * Left panel - branding * ───────────────────────────────────────────────────────────── */ .mkl-brand { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background-color: var(--mkl-navy); color: #ffffff; } /* * The "subtle branded graphic" is drawn in CSS rather than shipped as an * image: no extra request, nothing to go stale, and it scales to any viewport. * Layer 1 is a Kulud burgundy glow, layer 2 a Kulud green glow, layer 3 a * Manara teal wash, over a navy base. Kept low-contrast so text stays at * 13.9:1 against it. */ .mkl-brand::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 12% 8%, rgba(139, 14, 4, 0.55) 0%, rgba(139, 14, 4, 0) 55%), radial-gradient(90% 70% at 92% 88%, rgba(0, 132, 61, 0.42) 0%, rgba(0, 132, 61, 0) 60%), radial-gradient(80% 60% at 80% 4%, rgba(14, 124, 134, 0.38) 0%, rgba(14, 124, 134, 0) 60%), linear-gradient(155deg, #14383f 0%, var(--mkl-navy) 45%, var(--mkl-navy-2) 100%); } /* A faint grid, as a nod to structured learning. Purely decorative. */ .mkl-brand::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(120% 100% at 30% 20%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(120% 100% at 30% 20%, #000 0%, transparent 78%); } .mkl-brand__inner { position: relative; width: 100%; max-width: 520px; text-align: left; } .mkl-brand__logo-link { display: inline-block; border-radius: 22px; text-decoration: none; line-height: 0; } .mkl-brand__logo-link:focus-visible { outline: 3px solid var(--mkl-mint); outline-offset: 4px; } /* * The logo is the Manara application icon, copied unmodified. width and height * attributes are also set in the markup so the box is reserved before the * image loads - the audit flagged CLS from logos declared width="auto". */ .mkl-brand__logo { display: block; width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .mkl-brand__title { margin: 26px 0 0; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: #ffffff; /* 13.94:1 on navy */ } .mkl-brand__title-ar { display: block; margin-top: 6px; font-size: 1.05rem; font-weight: 400; letter-spacing: 0; color: var(--mkl-mint); } .mkl-brand__subtitle { margin: 10px 0 0; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 600; color: var(--mkl-mint); /* 6.94:1 on navy */ } .mkl-brand__tagline { margin: 6px 0 0; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.02em; color: #cfdadd; /* 10.4:1 on navy */ } .mkl-brand__rule { width: 64px; height: 3px; margin: 26px 0; border: 0; border-radius: 2px; background: linear-gradient(90deg, var(--mkl-mint), rgba(93, 202, 165, 0)); } .mkl-brand__message { margin: 0; max-width: 44ch; font-size: 1.0625rem; line-height: 1.65; color: #e3eaec; /* 11.9:1 on navy */ } .mkl-brand__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; } .mkl-brand__point { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: #cfdadd; } .mkl-brand__point svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--mkl-mint); } /* ───────────────────────────────────────────────────────────── * Right panel - the sign-in card * ───────────────────────────────────────────────────────────── */ .mkl-main { display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--mkl-bg); } .mkl-main:focus { outline: none; /* it only receives focus from the skip link */ } .mkl-card { width: 100%; max-width: 440px; padding: 36px 32px 30px; background: var(--mkl-surface); border: 1px solid var(--mkl-border); border-radius: var(--mkl-radius); box-shadow: 0 1px 2px rgba(16, 48, 58, 0.04), 0 12px 32px rgba(16, 48, 58, 0.08); } .mkl-card__title { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; color: var(--mkl-text); } .mkl-card__sub { margin: 8px 0 26px; font-size: 0.9375rem; color: var(--mkl-text-2); } /* ───────────────────────────────────────────────────────────── * Messages * ───────────────────────────────────────────────────────────── */ .mkl-msg { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 14px; border-radius: var(--mkl-radius-sm); font-size: 0.9rem; line-height: 1.5; border: 1px solid transparent; } .mkl-msg svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; } .mkl-msg--error { background: var(--mkl-danger-tint); border-color: #f5c2c2; color: var(--mkl-danger-text); /* 5.59:1 on its tint */ } .mkl-msg--success { background: var(--mkl-success-tint); border-color: #b7e3c6; color: var(--mkl-success-text); /* 4.51:1 on its tint */ } .mkl-msg--info { background: var(--mkl-info-tint); border-color: #c3d4fb; color: var(--mkl-info-text); /* 5.81:1 on its tint */ } /* ───────────────────────────────────────────────────────────── * Form * ───────────────────────────────────────────────────────────── */ /* * Both Eduma and WordPress core ship margins on bare form elements. Zeroing it * here leaves the card's own padding as the only thing controlling the gap. */ body.manara-academy-login-page form.mkl-form { margin: 0; padding: 0; } .mkl-field { margin: 0 0 18px; } .mkl-label { display: block; margin-bottom: 7px; font-size: 0.875rem; font-weight: 600; color: var(--mkl-text); } /* * Selectors are written against the element as well as the class because * Eduma and LearnPress both ship broad `input[type="text"]` rules that would * otherwise win on specificity for height, border and font. */ body.manara-academy-login-page input.mkl-input { box-sizing: border-box; display: block; width: 100%; height: var(--mkl-field-h); margin: 0; padding: 0 14px; font-family: inherit; font-size: 1rem; line-height: normal; color: var(--mkl-text); background: var(--mkl-surface); border: 1px solid var(--mkl-border-interactive); /* 3.39:1, meets 1.4.11 */ border-radius: var(--mkl-radius-sm); box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } body.manara-academy-login-page input.mkl-input::placeholder { color: var(--mkl-text-3); opacity: 1; } body.manara-academy-login-page input.mkl-input:hover { border-color: #6b7280; } body.manara-academy-login-page input.mkl-input:focus, body.manara-academy-login-page input.mkl-input:focus-visible { outline: none; border-color: var(--mkl-green); box-shadow: 0 0 0 3px rgba(0, 132, 61, 0.18); } body.manara-academy-login-page input.mkl-input[aria-invalid="true"] { border-color: var(--mkl-danger-text); } body.manara-academy-login-page input.mkl-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15); } /* Password field plus its visibility toggle */ .mkl-pass { position: relative; } body.manara-academy-login-page input.mkl-input--pass { padding-inline-end: 52px; } .mkl-pass__toggle { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 0; border-radius: 8px; color: var(--mkl-text-3); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .mkl-pass__toggle:hover { color: var(--mkl-text); background: #f3f5f7; } .mkl-pass__toggle:focus-visible { outline: 2px solid var(--mkl-green); outline-offset: 1px; color: var(--mkl-text); } .mkl-pass__toggle svg { width: 20px; height: 20px; pointer-events: none; } /* The JS swaps which of the two icons is hidden. */ .mkl-pass__toggle .mkl-icon-hide { display: none; } .mkl-pass__toggle[aria-pressed="true"] .mkl-icon-hide { display: block; } .mkl-pass__toggle[aria-pressed="true"] .mkl-icon-show { display: none; } .mkl-hint { margin: 8px 0 0; font-size: 0.8125rem; color: var(--mkl-text-2); } .mkl-hint--warn { display: flex; align-items: center; gap: 6px; color: var(--kla-warning-text, #a35a04); font-weight: 500; } .mkl-hint--error { color: var(--mkl-danger-text); font-weight: 500; } /* Remember me / forgot password row */ .mkl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 24px; } .mkl-check { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 0.9rem; font-weight: 400; color: var(--mkl-text-2); cursor: pointer; user-select: none; } body.manara-academy-login-page input.mkl-check__box { width: 18px; height: 18px; margin: 0; accent-color: var(--mkl-green); cursor: pointer; flex: 0 0 auto; } body.manara-academy-login-page input.mkl-check__box:focus-visible { outline: 2px solid var(--mkl-green); outline-offset: 2px; } .mkl-link { font-size: 0.9rem; font-weight: 500; color: var(--mkl-green-dark); /* 7.44:1 on white */ text-decoration: none; border-radius: 4px; } .mkl-link:hover, .mkl-link:focus { color: var(--mkl-green-deep); text-decoration: underline; } .mkl-link:focus-visible { outline: 2px solid var(--mkl-green); outline-offset: 2px; } /* ───────────────────────────────────────────────────────────── * Primary button * ───────────────────────────────────────────────────────────── */ body.manara-academy-login-page .mkl-btn { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--mkl-field-h); padding: 12px 20px; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; color: #ffffff; /* 4.81:1 on --mkl-green PASS */ background: var(--mkl-green); border: 1px solid var(--mkl-green); border-radius: var(--mkl-radius-sm); cursor: pointer; text-align: center; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease; } body.manara-academy-login-page .mkl-btn:hover { background: var(--mkl-green-dark); /* 7.44:1 */ border-color: var(--mkl-green-dark); box-shadow: 0 6px 16px rgba(0, 99, 46, 0.25); } body.manara-academy-login-page .mkl-btn:active { transform: translateY(1px); box-shadow: none; } body.manara-academy-login-page .mkl-btn:focus-visible { outline: 3px solid var(--mkl-green-deep); outline-offset: 2px; } /* * The loading state uses aria-disabled, never the disabled attribute: a * disabled control is omitted from the submitted form data, and this button * carries name="wp-submit". Pointer events are removed so a second click * cannot land, and the submit handler blocks repeat submissions as well. */ body.manara-academy-login-page .mkl-btn[aria-disabled="true"] { pointer-events: none; background: var(--mkl-green-dark); border-color: var(--mkl-green-dark); opacity: 0.85; cursor: default; } /* * The label is a separate element because the script swaps its text for * "Signing in..." during submission. Replacing the button's whole textContent * instead would delete the spinner alongside it. */ .mkl-btn__label { display: inline-block; } .mkl-btn__spinner { display: none; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #ffffff; border-radius: 50%; animation: mkl-spin 0.65s linear infinite; } .mkl-btn.is-loading .mkl-btn__spinner { display: block; } @keyframes mkl-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body.manara-academy-login-page * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .mkl-btn__spinner { animation: none; border-top-color: rgba(255, 255, 255, 0.45); } } /* ───────────────────────────────────────────────────────────── * Card footer * ───────────────────────────────────────────────────────────── */ .mkl-foot { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--mkl-border); text-align: center; } .mkl-foot__link { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; font-weight: 500; color: var(--mkl-text-2); text-decoration: none; border-radius: 4px; } .mkl-foot__link:hover, .mkl-foot__link:focus { color: var(--mkl-green-dark); text-decoration: underline; } .mkl-foot__link:focus-visible { outline: 2px solid var(--mkl-green); outline-offset: 3px; } .mkl-foot__note { margin: 14px 0 0; font-size: 0.75rem; color: var(--mkl-text-3); /* 4.63:1 on the page background */ } .mkl-actions { display: grid; gap: 10px; margin-top: 22px; } .mkl-btn--ghost { background: transparent; border-color: var(--mkl-border-interactive); color: var(--mkl-text); } body.manara-academy-login-page .mkl-btn--ghost { background: transparent; border-color: var(--mkl-border-interactive); color: var(--mkl-text); } body.manara-academy-login-page .mkl-btn--ghost:hover { background: #f3f5f7; border-color: #6b7280; color: var(--mkl-text); box-shadow: none; } /* Accessible name available to screen readers only. */ .mkl-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%); } /* ───────────────────────────────────────────────────────────── * Responsive - below 1024px the brand panel becomes a compact * header stacked above the card, with the logo still visible. * ───────────────────────────────────────────────────────────── */ @media (max-width: 1023.98px) { .mkl-brand { padding: 30px 20px 26px; } .mkl-brand__inner { max-width: 520px; text-align: center; } .mkl-brand__logo { width: 66px; height: 66px; margin: 0 auto; border-radius: 16px; } .mkl-brand__title { margin-top: 16px; font-size: 2rem; } .mkl-brand__rule { margin: 16px auto 0; } /* The supporting copy is the first thing to go on a small screen: the form is why the visitor is here. */ .mkl-brand__message, .mkl-brand__points { display: none; } .mkl-main { padding: 28px 16px 40px; } .mkl-card { max-width: 520px; padding: 28px 22px 24px; } } @media (max-width: 480px) { .mkl-brand { padding: 24px 16px 22px; } .mkl-brand__logo { width: 58px; height: 58px; } .mkl-brand__title { font-size: 1.75rem; } .mkl-brand__subtitle { font-size: 1.0625rem; } .mkl-brand__tagline { font-size: 0.875rem; } .mkl-card { padding: 24px 18px 20px; border-radius: 14px; } .mkl-card__title { font-size: 1.5rem; } /* Stacked so neither control is cramped at 320px. */ .mkl-row { flex-direction: column; align-items: flex-start; gap: 14px; } } /* Short landscape phones: let the page scroll rather than crush the card. */ @media (max-height: 620px) and (min-width: 1024px) { .mkl-brand, .mkl-main { padding-top: 28px; padding-bottom: 28px; } } /* ───────────────────────────────────────────────────────────── * Right-to-left * ───────────────────────────────────────────────────────────── */ [dir="rtl"] .mkl-brand__inner, [lang="ar"] .mkl-brand__inner { text-align: right; } [dir="rtl"] .mkl-brand__rule, [lang="ar"] .mkl-brand__rule { background: linear-gradient(270deg, var(--mkl-mint), rgba(93, 202, 165, 0)); } /* ───────────────────────────────────────────────────────────── * High contrast / forced colours * ───────────────────────────────────────────────────────────── */ @media (forced-colors: active) { .mkl-card, body.manara-academy-login-page input.mkl-input { border: 1px solid CanvasText; } body.manara-academy-login-page .mkl-btn { border: 1px solid ButtonText; } } /* ============================================================= * MEASURED OVERRIDES * * Everything below counters a specific rule that was observed WINNING against * this stylesheet on the live site. Each one names the rule it beats. Nothing * here is precautionary - the page was screenshotted, the winning rule was * read out of document.styleSheets, and only then was the override written. * ============================================================= */ /* ── 1. Eduma paints every button with the theme's primary colour ── * * style.css: button:not(.owl-page) { background-color: var(--thim-body-primary-color,#ffb606) } * * :not() takes the specificity of its argument, so that selector scores * (0,1,1) and beat the plain .mkl-pass__toggle class (0,1,0). The password * toggle rendered as a solid green block sitting inside the password field. * Answered with specificity, not !important. */ body.manara-academy-login-page button.mkl-pass__toggle { background: transparent; background-color: transparent; border: 0; box-shadow: none; color: var(--mkl-text-3); } body.manara-academy-login-page button.mkl-pass__toggle:hover { background-color: #f3f5f7; color: var(--mkl-text); } /* ── 2. Eduma uppercases button text ── * * style.css: input[type="submit"], button { text-transform: var(--thim-font-button-text-transform) } * * This one was not a specificity loss - this stylesheet simply never declared * text-transform, so the theme's value applied by default and the button read * "SIGN IN". The design calls for "Sign In". */ body.manara-academy-login-page .mkl-btn { text-transform: none; letter-spacing: 0; } /* ── 3. The back-link icon had no size ── * * An inline with a viewBox and no width/height falls back to its * default size, which rendered a 75px arrow next to 14px text and pushed * "Back to Kulud Academy" onto three lines. Every other icon in this file was * sized; this one was missed. */ body.manara-academy-login-page .mkl-foot__link svg { flex: 0 0 auto; width: 17px; height: 17px; } /* ── 4. The Customizer forces BLACK TEXT on small screens ── * * Emitted inline, after every stylesheet, inside the theme's Additional CSS: * * @media (max-width: 768px) { * body, p, span, .entry-content, .learn-press-content, .lp-content-area, * .course-content, h1, h2, h3, h4, h5, h6 { color: #000 !important } * p { font-size: 16px !important; line-height: 1.7 !important } * } * * On a phone that turned the entire dark branding panel - title, Arabic * wordmark, subtitle, tagline - into black text on a dark navy background, * and blacked out the white "Sign In" label inside the green button. It was * invisible at desktop width and only appeared in the mobile screenshot. * * !important is required here because the rule being beaten is itself * !important; between two !important declarations the more specific selector * wins, and these are all more specific. Confined to the same breakpoint and * to this page's own classes, so the site-wide rule is untouched everywhere * else - it is a real site-wide contrast problem, but fixing it belongs in the * Customizer, not in a login stylesheet. */ @media (max-width: 768px) { body.manara-academy-login-page .mkl-brand__title { color: #ffffff !important; } body.manara-academy-login-page .mkl-brand__title-ar, body.manara-academy-login-page .mkl-brand__subtitle { color: var(--mkl-mint) !important; } body.manara-academy-login-page .mkl-brand__tagline, body.manara-academy-login-page .mkl-brand__message, body.manara-academy-login-page .mkl-brand__point, body.manara-academy-login-page .mkl-brand__point span { color: #cfdadd !important; } body.manara-academy-login-page .mkl-btn, body.manara-academy-login-page .mkl-btn .mkl-btn__label { color: #ffffff !important; } body.manara-academy-login-page .mkl-btn--ghost, body.manara-academy-login-page .mkl-btn--ghost .mkl-btn__label { color: var(--mkl-text) !important; } body.manara-academy-login-page .mkl-card__title { color: var(--mkl-text) !important; } /* Message banners: the icon is fine, but the holding the text was being blacked out, losing the error/success colour coding. */ body.manara-academy-login-page .mkl-msg--error, body.manara-academy-login-page .mkl-msg--error span { color: var(--mkl-danger-text) !important; } body.manara-academy-login-page .mkl-msg--success, body.manara-academy-login-page .mkl-msg--success span { color: var(--mkl-success-text) !important; } body.manara-academy-login-page .mkl-msg--info, body.manara-academy-login-page .mkl-msg--info span { color: var(--mkl-info-text) !important; } /* The same block also forces 16px/1.7 onto every

, which loosened the card's supporting text and hints into a much taller block than designed. */ body.manara-academy-login-page .mkl-card__sub { font-size: 0.9375rem !important; line-height: 1.5 !important; color: var(--mkl-text-2) !important; } body.manara-academy-login-page .mkl-hint { font-size: 0.8125rem !important; line-height: 1.45 !important; } body.manara-academy-login-page .mkl-hint--warn { color: var(--kla-warning-text, #a35a04) !important; } body.manara-academy-login-page .mkl-hint--error { color: var(--mkl-danger-text) !important; } body.manara-academy-login-page .mkl-foot__note { font-size: 0.75rem !important; line-height: 1.45 !important; color: var(--mkl-text-3) !important; } body.manara-academy-login-page .mkl-brand__tagline, body.manara-academy-login-page .mkl-brand__message { font-size: 0.95rem !important; line-height: 1.5 !important; } body.manara-academy-login-page .mkl-check span { color: var(--mkl-text-2) !important; } } /* ── KACADBACK_20260806 ───────────────────────────────────────── */ /* * .mkl-foot__note carries margin-top:14px to separate it from the home link * above it. With MANARA_KAL_SHOW_HOME_LINK off the note is the block's first * element child, so that margin becomes 14px of dead space hanging under the * divider rule. :first-child matches ONLY in that case, so this rule is inert * whenever the link renders - restoring the link needs no CSS change. * * Specificity 0,2,0 against the 0,1,0 of .mkl-foot__note, and later in the * file, so it wins without !important. */ .mkl-foot__note:first-child { margin-top: 0; }