/* * The login portal — /login/ (P15). * * Loaded only by mu-plugins/95-tutor-login.php, which enqueues it on the portal request and dequeues * everything else except `wf-style` and core's inline `global-styles`. It is the portal's ONLY * stylesheet. * * Every selector is under `.mk-login`, which the portal's carries and no other page of this * site does, so this file cannot reach any other response even if something ever enqueues it by * accident. * * The values are the theme's own, written out rather than referenced, for the same reason * assets/css/tutor-identity.css:21-60 writes them out: ink #0B1B3D and gold #C9A961 come from * assets/css/style.css:279-291, paper #FAF7F1 and line #ECE7DC from the same block, body text * #5B6473. Cairo comes through `--wp--preset--font-family--cairo`, which core's `global-styles` * block declares and `wp_print_font_faces()` supplies the @font-face for — both of which the * portal keeps. * * Mobile-first: the card IS the page below 640px with a 16px gutter; it becomes a centred card * above that. Designed at 390px. */ .mk-login { --mk-ink: #0b1b3d; --mk-gold: #c9a961; --mk-blue: #1c44b2; --mk-paper: #faf7f1; --mk-card: #ffffff; --mk-line: #ece7dc; --mk-body: #5b6473; --mk-danger: #8c2f39; --mk-radius: 10px; margin: 0; min-height: 100vh; background: var(--mk-paper); color: var(--mk-body); font-family: var(--wp--preset--font-family--cairo, "Cairo", "Noto Kufi Arabic", sans-serif); font-size: 16px; line-height: 1.7; -webkit-text-size-adjust: 100%; } .mk-login__wrap { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 16px; } .mk-login__card { box-sizing: border-box; width: 100%; max-width: 26rem; padding: 28px 20px 24px; background: var(--mk-card); border: 1px solid var(--mk-line); border-radius: var(--mk-radius); border-top: 3px solid var(--mk-gold); box-shadow: 0 18px 40px rgba(11, 27, 61, 0.08); text-align: center; } .mk-login__brand { display: inline-block; line-height: 0; } .mk-login__brand img { display: block; width: 150px; height: auto; margin: 0 auto; } .mk-login__title { margin: 18px 0 2px; color: var(--mk-ink); font-size: 1.5rem; font-weight: 700; line-height: 1.35; } .mk-login__sub { margin: 0 0 20px; color: var(--mk-body); font-size: 0.9375rem; } /* ---------- the notice ---------- */ .mk-login__notice { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--mk-radius); font-size: 0.9375rem; text-align: start; } .mk-login__notice--error { background: rgba(140, 47, 57, 0.08); border: 1px solid rgba(140, 47, 57, 0.28); color: var(--mk-danger); } .mk-login__notice--info { background: rgba(201, 169, 97, 0.14); border: 1px solid rgba(201, 169, 97, 0.4); color: var(--mk-ink); } /* ---------- the form ---------- */ .mk-login__form { margin: 0; text-align: start; } .mk-login__label { display: block; margin: 0 0 6px; color: var(--mk-ink); font-size: 0.9375rem; font-weight: 600; } .mk-login__input { box-sizing: border-box; width: 100%; /* 16px keeps iOS Safari from zooming the page when the field takes focus. */ font-size: 16px; font-family: inherit; color: var(--mk-ink); background: #fff; padding: 12px 14px; margin: 0 0 16px; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); min-height: 48px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .mk-login__input:hover { border-color: #d9d2c3; } .mk-login__input:focus { outline: none; border-color: var(--mk-blue); box-shadow: 0 0 0 3px rgba(28, 68, 178, 0.15); } .mk-login__pw { position: relative; } .mk-login__pw .mk-login__input { /* room for the show/hide button on the left, which is the "end" side in RTL */ padding-inline-end: 84px; } .mk-login__eye { position: absolute; inset-block-start: 0; inset-inline-end: 0; height: 48px; min-width: 76px; padding: 0 12px; background: none; border: 0; border-radius: var(--mk-radius); color: var(--mk-blue); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; } .mk-login__eye .mk-login__eye-off, .mk-login__eye[aria-pressed="true"] .mk-login__eye-on { display: none; } .mk-login__eye[aria-pressed="true"] .mk-login__eye-off { display: inline; } .mk-login__remember { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: var(--mk-body); font-size: 0.9375rem; cursor: pointer; } .mk-login__remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--mk-ink); } .mk-login__submit { display: block; width: 100%; min-height: 48px; padding: 12px 20px; background: var(--mk-ink); color: #fff; border: 0; border-radius: var(--mk-radius); font-family: inherit; font-size: 1.0625rem; font-weight: 700; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease; } .mk-login__submit:hover { background: #06101f; transform: translateY(-1px); } .mk-login__help { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--mk-line); color: var(--mk-body); font-size: 0.875rem; } .mk-login__help a { color: var(--mk-blue); text-decoration: underline; text-underline-offset: 3px; } /* A visible keyboard ring everywhere, in the brand's gold. */ .mk-login a:focus-visible, .mk-login button:focus-visible, .mk-login input:focus-visible { outline: 3px solid var(--mk-gold); outline-offset: 2px; } @media (min-width: 640px) { .mk-login__card { padding: 36px 32px 30px; } .mk-login__title { font-size: 1.75rem; } } @media (prefers-reduced-motion: reduce) { .mk-login *, .mk-login *::before, .mk-login *::after { transition: none !important; } }