/* ============================================================================ auth.css — sign-in, forgot-password and reset screens for all four portals. One design, four identities. The layout, spacing, type and controls are identical everywhere; only the accent changes, so a person can tell at a glance which door they are standing at without the set looking like four different products. The accent is driven by data-portal on — see auth/layouts/master. Nothing here leaks outside .au-page, so the admin theme is untouched. Prefix: .au- --------------------------------------------------------------------------- 1. Tokens and the four portal identities 2. Page ground 3. Shell and the two panels 4. Brand panel (left) 5. Form panel (right) 6. Fields 7. Buttons and links 8. Alerts 9. Portal switcher 10. Footer 11. Responsive 12. Motion and print ========================================================================= */ /* == 1. Tokens and the four portal identities ============================= */ .au-page { /* Neutrals, pulled very slightly cool so they sit under any of the four accents without either one looking dirty. */ --au-ground: #e9edf3; --au-ground-deep: #dde3ec; --au-card: #ffffff; --au-ink: #1e2632; --au-ink-soft: #4b5563; --au-muted: #79839a; --au-line: #e3e8f0; --au-line-soft: #eef1f6; --au-field: #f7f9fc; --au-bad: #b3261e; --au-bad-soft: #fdeceb; --au-ok: #17694a; --au-ok-soft: #e8f5ef; --au-warn: #8a5a12; --au-warn-soft: #fdf3e2; /* Overridden per portal below. Institute maroon is the default so a page that forgets to declare a portal still looks deliberate. */ --au-accent: #8f2830; --au-accent-deep: #6f1d24; --au-accent-dark: #4d1319; --au-accent-soft: #fbeef0; --au-accent-line: #eccfd3; --au-radius: 14px; --au-radius-sm: 8px; --au-shadow: 0 18px 48px -18px rgba(18, 26, 42, .38), 0 2px 6px rgba(18, 26, 42, .06); } /* Staff / Administration — the institute's own maroon. */ .au-page[data-portal="staff"] { --au-accent: #8f2830; --au-accent-deep: #6f1d24; --au-accent-dark: #4a1218; --au-accent-soft: #fbeef0; --au-accent-line: #eccfd3; } /* Students — deep institutional blue. */ .au-page[data-portal="student"] { --au-accent: #17497c; --au-accent-deep: #103760; --au-accent-dark: #0a2643; --au-accent-soft: #edf3fa; --au-accent-line: #cbdcef; } /* Admissions applicants — deep teal. */ .au-page[data-portal="applicant"] { --au-accent: #0f6357; --au-accent-deep: #0a4a41; --au-accent-dark: #06342d; --au-accent-soft: #eaf5f2; --au-accent-line: #c3e0d9; } /* Recruitment applicants — bronze. */ .au-page[data-portal="job-applicant"] { --au-accent: #7d4a12; --au-accent-deep: #63390b; --au-accent-dark: #422506; --au-accent-soft: #fbf2e6; --au-accent-line: #e8d3b4; } /* == 2. Page ground ======================================================= */ body.au-page { margin: 0; min-height: 100vh; background-color: var(--au-ground); color: var(--au-ink); font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; font-size: 14.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Two very soft washes of the portal accent, so the ground belongs to the portal without the page turning into a colour field. */ .au-page::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58rem 42rem at 12% -12%, color-mix(in srgb, var(--au-accent) 16%, transparent), transparent 62%), radial-gradient(46rem 38rem at 104% 108%, color-mix(in srgb, var(--au-accent) 12%, transparent), transparent 60%), linear-gradient(180deg, var(--au-ground) 0%, var(--au-ground-deep) 100%); } /* color-mix is recent; older engines get a flat ground rather than nothing. */ @supports not (background: color-mix(in srgb, red 10%, transparent)) { .au-page::before { background: linear-gradient(180deg, var(--au-ground) 0%, var(--au-ground-deep) 100%); } } /* The institute's brand image, when one is configured. Deliberately faint — it is texture, not subject matter. */ .au-page .au-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .07; background-repeat: no-repeat; background-position: center; background-size: cover; filter: grayscale(100%); } .au-wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 34px 18px; box-sizing: border-box; } /* == 3. Shell and the two panels ========================================== */ .au-shell { width: 100%; max-width: 940px; } .au-card { display: flex; align-items: stretch; background: var(--au-card); border-radius: var(--au-radius); box-shadow: var(--au-shadow); overflow: hidden; } .au-aside { flex: 0 0 40%; max-width: 40%; position: relative; display: flex; flex-direction: column; padding: 40px 34px; box-sizing: border-box; color: #fff; background: linear-gradient(158deg, var(--au-accent) 0%, var(--au-accent-deep) 52%, var(--au-accent-dark) 100%); } /* A single hairline of light along the fold, so the two panels read as one object rather than two rectangles pushed together. */ .au-aside::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .16); } .au-main { flex: 1 1 60%; min-width: 0; padding: 42px 44px; box-sizing: border-box; } /* == 4. Brand panel (left) ================================================ */ .au-mark { margin: 0 0 26px; } .au-mark img { max-height: 62px; max-width: 158px; width: auto; /* Institute marks are supplied in full colour on white; on the accent they need to be knocked back to a single tone to sit properly. */ filter: brightness(0) invert(1); opacity: .96; } .au-eyebrow { display: inline-block; margin: 0 0 10px; padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .92); } /* Held deliberately small: what the panel is announcing is the institute, and the portal name is only the part of it you have arrived at. */ .au-portal { margin: 0 0 5px; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; color: #fff; } /* Carries the gap down to the notice — the tagline used to sit in between. */ .au-institute { margin: 0 0 26px; font-size: 12.6px; line-height: 1.45; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .82); } /* A sign-in screen is not the place to advertise features to someone who has already decided to sign in. What does belong here is the terms on which the account is held — so this panel carries a short notice instead, worded for whichever audience is at the door. */ .au-notice { /* Anchored to the bottom of the panel now that nothing follows it, so the mark and the portal name hold the top and the panel reads as composed rather than trailing off into empty colour. */ margin: auto 0 0; padding: 15px 17px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); border-left: 3px solid rgba(255, 255, 255, .45); border-radius: 10px; } .au-notice-lbl { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } .au-notice-lbl i { font-size: 13px; } .au-notice p { margin: 0; font-size: 13.2px; line-height: 1.6; color: rgba(255, 255, 255, .9); } /* Multi-clause notices (staff) render as lettered terms rather than a paragraph, so each clause reads as its own condition of use. */ .au-notice-list { margin: 0; padding-left: 20px; list-style: lower-alpha; font-size: 12.6px; line-height: 1.55; color: rgba(255, 255, 255, .9); } .au-notice-list li + li { margin-top: 5px; } .au-notice-list li::marker { color: rgba(255, 255, 255, .65); } /* == 5. Form panel (right) ================================================ */ .au-head { margin: 0 0 24px; } .au-title { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--au-ink); } .au-sub { margin: 0; font-size: 13.8px; line-height: 1.6; color: var(--au-muted); } /* A small round glyph above the heading on the password screens, where there is no logo to anchor the panel. */ .au-glyph { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0 0 16px; border-radius: 12px; background: var(--au-accent-soft); border: 1px solid var(--au-accent-line); color: var(--au-accent); font-size: 19px; } /* == 6. Fields ============================================================ */ /* Also the hook the layout's submit-once handler looks for. */ .au-form { margin: 0; } .au-field { margin: 0 0 17px; } .au-label { display: block; margin: 0 0 6px; font-size: 12.2px; font-weight: 600; letter-spacing: .01em; color: var(--au-ink-soft); } .au-input-wrap { position: relative; } .au-page .au-input { display: block; width: 100%; height: 46px; padding: 0 14px 0 42px; box-sizing: border-box; background: var(--au-field); border: 1px solid var(--au-line); border-radius: var(--au-radius-sm); color: var(--au-ink); font-family: inherit; font-size: 14.5px; line-height: 44px; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } .au-page .au-input::placeholder { color: #a6aec0; } .au-page .au-input:hover { border-color: #cfd6e3; } .au-page .au-input:focus { outline: 0; background: var(--au-card); border-color: var(--au-accent); box-shadow: 0 0 0 3px var(--au-accent-soft); } /* Field with a trailing control (the show/hide password button). */ .au-page .au-input.has-tail { padding-right: 46px; } .au-ico { position: absolute; left: 14px; top: 0; height: 46px; display: flex; align-items: center; font-size: 15px; color: #9aa3b6; pointer-events: none; transition: color .16s ease; } .au-input:focus ~ .au-ico { color: var(--au-accent); } .au-eye { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: 6px; color: #8d97ab; font-size: 15px; cursor: pointer; transition: color .16s ease, background-color .16s ease; } .au-eye:hover { color: var(--au-accent); background: var(--au-accent-soft); } .au-eye:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 1px; } /* Invalid state — the message sits under its own field, not in a pile at the top of the form, so it is obvious which box needs attention. */ .au-page .au-input.is-bad, .au-page .au-input.is-bad:hover { border-color: var(--au-bad); background: var(--au-bad-soft); } .au-page .au-input.is-bad:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); } .au-err { display: block; margin: 6px 0 0; font-size: 12.4px; line-height: 1.5; color: var(--au-bad); } .au-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 20px; flex-wrap: wrap; } .au-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.4px; font-weight: 500; color: var(--au-ink-soft); cursor: pointer; user-select: none; } .au-page .au-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--au-accent); cursor: pointer; } /* Read-only value shown in place of a field — on the reset screen the account is fixed by the token, so it is stated rather than offered for editing. */ .au-static { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; box-sizing: border-box; background: var(--au-accent-soft); border: 1px solid var(--au-accent-line); border-radius: var(--au-radius-sm); font-size: 14px; font-weight: 600; color: var(--au-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .au-static i { flex: 0 0 auto; color: var(--au-accent); font-size: 15px; } /* A quiet note under a field — password rules, where a link was sent, and so on. */ .au-hint { margin: 6px 0 0; font-size: 12.4px; line-height: 1.55; color: var(--au-muted); } /* == 7. Buttons and links ================================================= */ .au-page .au-btn { display: block; width: 100%; height: 47px; padding: 0 20px; box-sizing: border-box; background: var(--au-accent); border: 1px solid var(--au-accent); border-radius: var(--au-radius-sm); color: #fff; font-family: inherit; font-size: 14.6px; font-weight: 600; letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .1s ease, box-shadow .16s ease; } .au-page .au-btn:hover { background: var(--au-accent-deep); border-color: var(--au-accent-deep); box-shadow: 0 6px 18px -8px var(--au-accent); } .au-page .au-btn:active { transform: translateY(1px); } .au-page .au-btn:focus-visible { outline: 2px solid var(--au-accent-deep); outline-offset: 2px; } .au-links { margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--au-line-soft); font-size: 13.4px; color: var(--au-muted); } .au-links p { margin: 0 0 7px; } .au-links p:last-child { margin-bottom: 0; } .au-page .au-link { color: var(--au-accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .16s ease; } .au-page .au-link:hover { color: var(--au-accent-deep); border-bottom-color: currentColor; } .au-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--au-muted); text-decoration: none; } .au-back:hover { color: var(--au-accent); } /* == 8. Alerts ============================================================ */ .au-alert { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 38px 12px 14px; border: 1px solid transparent; border-left-width: 3px; border-radius: var(--au-radius-sm); font-size: 13.4px; line-height: 1.55; } .au-alert i { flex: 0 0 auto; margin-top: 2px; font-size: 14px; } .au-alert.is-bad { background: var(--au-bad-soft); border-color: #f2c9c6; border-left-color: var(--au-bad); color: #7d1a15; } .au-alert.is-ok { background: var(--au-ok-soft); border-color: #bfe0d1; border-left-color: var(--au-ok); color: #0f4a34; } .au-alert.is-info { background: var(--au-warn-soft); border-color: #ecd8b3; border-left-color: var(--au-warn); color: #6d4710; } .au-alert-x { position: absolute; top: 7px; right: 8px; width: 22px; height: 22px; padding: 0; background: transparent; border: 0; border-radius: 4px; color: inherit; opacity: .5; font-size: 17px; line-height: 1; cursor: pointer; } .au-alert-x:hover { opacity: 1; } /* == 10. Footer ============================================================ */ .au-foot { margin: 20px 0 0; text-align: center; font-size: 12.2px; line-height: 1.7; color: var(--au-muted); } .au-foot a { color: var(--au-ink-soft); text-decoration: none; } .au-foot a:hover { color: var(--au-accent); } /* == 11. Responsive ======================================================== */ @media (max-width: 880px) { .au-wrap { padding: 22px 14px; } .au-shell { max-width: 480px; } .au-card { flex-direction: column; } /* The brand panel becomes a compact band: the mark, the portal name and one line of orientation. The selling points would only push the form below the fold on a phone, so they are dropped here. */ .au-aside { flex: 0 0 auto; max-width: none; padding: 26px 26px 24px; } .au-aside::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 1px; } .au-mark { margin-bottom: 16px; } .au-mark img { max-height: 48px; } /* The band is just the mark, the portal name and the institute here, so it stops at the institute rather than reserving room for the notice. */ .au-portal { margin-bottom: 4px; font-size: 16px; } .au-institute { margin-bottom: 0; font-size: 12.2px; } .au-notice { display: none; } .au-main { padding: 28px 26px 30px; } } @media (max-width: 420px) { .au-aside { padding: 22px 20px 20px; } .au-main { padding: 24px 20px 26px; } .au-portal { font-size: 15px; } .au-institute { font-size: 11.8px; } .au-row { gap: 10px; } } /* == 12. Motion and print ================================================== */ .au-card { animation: au-rise .38s cubic-bezier(.22, .68, .36, 1) both; } @keyframes au-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .au-card { animation: none; } .au-page * { transition-duration: .01ms !important; } } @media print { .au-page::before, .au-page .au-bg { display: none; } .au-card { box-shadow: none; border: 1px solid var(--au-line); } } /* == 12. Password requirements panel ====================================== Used by the reset form (resources/views/web/student/passwords/reset.blade.php). It states the same standard the student meets on the account page, so the rule is visible while typing rather than delivered as a bounced form. Colours come from the shared tokens, so it follows whichever portal accent is set. */ .au-pw { margin: 2px 0 18px; padding: 13px 15px 14px; background: var(--au-field); border: 1px solid var(--au-line-soft); border-radius: var(--au-radius-sm); } .au-pw-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .au-pw-lbl { font-size: 12.4px; font-weight: 600; color: var(--au-ink-soft); letter-spacing: .01em; } .au-pw-gen { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font: inherit; font-size: 11.8px; font-weight: 600; color: var(--au-accent); background: transparent; border: 1px solid var(--au-accent-line); border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; } .au-pw-gen:hover { background: var(--au-accent-soft); } .au-pw-gen:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 2px; } /* Strength bar. The width is set from script; the class picks the colour. */ .au-pw-meter { height: 4px; margin-bottom: 11px; background: var(--au-line); border-radius: 999px; overflow: hidden; } .au-pw-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--au-bad); transition: width .2s ease, background .2s ease; } .au-pw-meter span.is-fair { background: var(--au-warn); } .au-pw-meter span.is-strong { background: var(--au-ok); } .au-pw-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; } .au-pw-list li { display: inline-flex; align-items: center; gap: 5px; font-size: 12.1px; line-height: 1.5; color: var(--au-muted); transition: color .15s ease; } .au-pw-list li.is-ok { color: var(--au-ok); font-weight: 600; } .au-pw-list li i { font-size: 13px; } /* Sits under the submit button, so it reads as the reason it is disabled. */ .au-pw-hint { margin-top: 8px; text-align: center; } /* A disabled submit must look disabled — the default button style is solid and would otherwise invite the click it is going to refuse. */ .au-page .au-btn:disabled, .au-page .au-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; } @media (max-width: 480px) { .au-pw-list { gap: 5px 12px; } } /* ...and it must not react to the pointer either, or the hover state reads as an invitation. Specificity beats the :hover/:active rules above. */ .au-page .au-btn:disabled:hover, .au-page .au-btn[disabled]:hover, .au-page .au-btn:disabled:active, .au-page .au-btn[disabled]:active { transform: none; filter: none; box-shadow: none; }