/* ════════════════════════════════════════════════════════════════════════ AUTHENTICATION MODULE — modern UI kit (auth-modern.css) ────────────────────────────────────────────────────────────────────────── Created 2026-08-03. Purely presentational: no view logic, no form actions, no ids/names/handlers depend on anything in here. SCOPE — every rule is prefixed with `.lauth`, so nothing can leak into the marketing landing pages that share assets/modules/home/css/style.css, and nothing in that 6.8k-line legacy sheet can reach in either. The two global element rules it does carry are deliberately out-specified below: style.css `input,button{height:35px;padding:6px 12px;border-radius:2px}` style.css `input,select{border:1px solid #CCC;width:250px}` style.css `button{background:#04AA6D;padding:10px 20px;font-size:17px}` style.css `h1{text-align:center}` `.lauth input` (0,1,1) and `.lauth-btn` (0,1,0) both beat those (0,0,1), so legacy rules are out-specified rather than shouted over. The file carries exactly ONE real !important pair (§5b) — see the comment there for why. DESIGN LANGUAGE — matches the Company / Control-Room modules: Inter Tight, #2C3E50 ink, #E1E8ED hairlines, soft shadows. The brand ramp is GRAPHITE #252D2F (the wordmark's own chip colour); teal #1ABB9C (the ERP kit's primary) and the logo lime #E4F546 appear only as accents. TWO canvas themes ship — see §0 for the switch. Pages that load it · home/views/landing.php — Sign in · auth/views/verification.php — LERP Verification Portal · auth/views/set_password_manual.php — Set new password (token link) · auth/views/change_password.php — Set new password (legacy link) · auth/views/invalid_token.php — Invalid / expired token · auth/views/email_verify.php — Email verification result Contents §1 Tokens + page canvas §2 Brand block §3 Card shell (head / body / foot) §4 Alerts + inline messages §5 Form controls (label, input, icon, password reveal) §6 Buttons §7 Meta row + links §8 Password rule checklist §9 Bootstrap modal restyle (Request a call back / OTP) §10 Status pages (invalid token, email verified) §11 Responsive §12 Accessibility (focus-visible, reduced motion) ════════════════════════════════════════════════════════════════════════ */ /* ═════════ §0 · CANVAS THEME ════════════════════════════════════════════ LIGHT is the one and only active theme (set 2026-08-03). The brand ramp is graphite #252D2F — the wordmark's own chip colour — for buttons, focus rings and links. The old dark canvas is kept below as an INACTIVE opt-in (`--dark`). It costs nothing at runtime: no element carries that class, so the block never matches. Delete it outright if you want the file leaner — nothing else references those tokens. ── Per-page opt-in to the dark canvas (nothing uses this today) ─────── Add `lauth--dark` next to `lauth` on a view's wrapper, or `lauth-legacy--dark` next to `lauth-legacy` on . ── Preview ─────────────────────────────────────────────────────────── _auth_preview.php?view=login (light — what ships) _auth_preview.php?view=login&theme=dark (forces the inactive dark) The brand mark is `LERPLOGO2.png` (white "Lasting" + lime /ERP chip) on every screen. On this light canvas it sits on a graphite plate — see §2 — which is why no view needs a per-theme `src`. ════════════════════════════════════════════════════════════════════════ */ /* ── LIGHT — soft light canvas ───────────────────────────────── ACTIVE ── */ .lauth, body.lauth-legacy, .lauth-modal { --la-canvas-bg: #F1F4F5; --la-canvas-img: radial-gradient(1000px 560px at 8% -12%, rgba(26, 187, 156, .16), transparent 58%), radial-gradient(860px 520px at 102% 112%, rgba(228, 245, 70, .20), transparent 60%), linear-gradient(160deg, #FCFDFD 0%, #F0F4F5 46%, #E4EAEC 100%); --la-grain-opacity: .028; /* grain reads as dirt on light */ --la-on-canvas: #5C6B6E; /* tagline — 5.0:1 */ --la-on-canvas-dim: #5F6D70; /* legal — 4.9:1 */ --la-on-canvas-strong: #252D2F; --la-card-border: #DFE6E7; --la-shadow: 0 30px 64px -34px rgba(20, 28, 30, .40), 0 8px 20px -14px rgba(20, 28, 30, .16), 0 1px 2px rgba(20, 28, 30, .06); /* the white "Lasting" needs something dark behind it on a light canvas */ --la-plate-bg: #252D2F; --la-plate-pad: 5px 15px; --la-plate-shadow: 0 14px 30px -14px rgba(20, 28, 30, .45); --la-mark-shadow: none; } /* ── GRAPHITE — deep charcoal canvas ─────────────────── INACTIVE opt-in ── Must stay AFTER the light block: `.lauth--dark` and `.lauth` are both (0,1,0), so on a tie the later rule wins. Moving this above the active block would silently stop the opt-in working. */ .lauth--dark, body.lauth-legacy--dark, .lauth-modal--dark { --la-canvas-bg: #252d2f; --la-canvas-img: radial-gradient(1100px 620px at 6% -14%, rgb(18 63 55 / 20%), transparent 58%), radial-gradient(900px 560px at 102% 114%, rgba(228, 245, 70, .15), transparent 60%), linear-gradient(157deg, #2E383A 0%, #252D2F 42%, #1F2628 78%, #161B1D 100%); --la-grain-opacity: .045; --la-on-canvas: rgba(255, 255, 255, .62); /* tagline — 7.0:1 */ --la-on-canvas-dim: rgba(255, 255, 255, .56); /* legal — 6.0:1 */ --la-on-canvas-strong: #FFFFFF; --la-card-border: rgba(255, 255, 255, .10); --la-shadow: 0 44px 88px -36px rgba(0, 0, 0, .80), 0 12px 28px -18px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .32); --la-plate-bg: transparent; /* canvas is already dark */ --la-plate-pad: 0; --la-plate-shadow: none; --la-mark-shadow: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); } /* ═════════ §1 · Tokens + page canvas ═══════════════════════════════════ GOTCHA: the two Bootstrap modals are siblings of `.lauth`, not descendants (Bootstrap needs them at that level for its own stacking), so custom properties declared only on `.lauth` would NOT inherit into them — every `var(--la-*)` inside the modal would compute to invalid and silently fall back to transparent. The token block therefore has to name BOTH scopes. */ .lauth, .lauth-modal, body.lauth-legacy { /* Brand ramp — GRAPHITE, taken from the wordmark's own chip (#252D2F). Shared by both themes; the variable names keep their historical `--la-navy*` spelling so every rule downstream is untouched. `body.lauth-legacy` is listed here on purpose: §13 used to carry its own duplicate copy of this ramp, which silently drifted out of sync the moment the palette changed. One declaration, three scopes. */ --la-navy: #252D2F; --la-navy-700: #1C2325; --la-navy-900: #12181A; --la-accent: #E4F546; --la-ink: #2C3E50; --la-text: #34495E; --la-mute: #73879C; --la-faint: #A7B4C2; --la-hair: #E1E8ED; --la-hair-strong: #CFD9DF; --la-surface: #FFFFFF; --la-surface-2: #F7F9FB; --la-danger: #E74C3C; --la-danger-soft: #FCEDEB; --la-ok: #1ABB9C; --la-ok-soft: #E9F8F4; --la-info: #3498DB; --la-info-soft: #EAF4FB; --la-amber: #C87F0A; --la-amber-soft: #FDF4E3; --la-radius: 14px; --la-radius-sm: 10px; /* graphite focus ring, shared by both themes */ --la-ring: rgba(37, 45, 47, .18); } /* ── the premium canvas ──────────────────────────────────────────────── Two off-screen light sources — teal (the ERP kit's primary) upper-left and the wordmark's lime lower-right — over a diagonal sweep. Both the colour and the gradient come from §0, so the two themes cannot drift apart and `.lauth` / `body.lauth-legacy` stay in lockstep. The brand mark on this canvas is `assets/images/LERPLOGO2.png` (white "Lasting" + lime /ERP chip). `lspl-logo.png` sets "Lasting" in #202020 and would all but vanish on Theme A. A CSS filter is NOT a substitute: `brightness(0) invert(1)` also whitens the ERP chip, so the lime letters knock out into it and disappear. Theme B keeps the same asset and puts a graphite plate behind it instead (§2). */ .lauth, body.lauth-legacy { background-color: var(--la-canvas-bg); background-image: var(--la-canvas-img); } /* Fine film grain over the gradient — the thing that stops a large flat gradient reading as "banded CSS". Self-contained SVG data URI: no request, no image asset. `soft-light` keeps it invisible on the white card. Theme B dials it down; grain reads as dirt on a light canvas. */ .lauth::before, body.lauth-legacy::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--la-grain-opacity); mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* the page canvas itself — `.lauth` only, never the modal */ .lauth { position: relative; box-sizing: border-box; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px 32px; font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.55; color: var(--la-text); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; } /* above the grain layer */ .lauth__inner { position: relative; z-index: 1; } .lauth *, .lauth *::before, .lauth *::after, .lauth-modal *, .lauth-modal *::before, .lauth-modal *::after { box-sizing: border-box; } .lauth__inner { width: 100%; max-width: 430px; } /* One logo asset serves BOTH themes. On Theme A the canvas is already dark, so the plate is transparent and the mark just gets a soft lift. On Theme B the plate turns graphite — otherwise the white "Lasting" would be invisible. */ .lauth__brand a { padding: var(--la-plate-pad); background: var(--la-plate-bg); box-shadow: var(--la-plate-shadow); border-radius: 5px; } .lauth__brand img { filter: var(--la-mark-shadow); } /* ═════════ §2 · Brand block ════════════════════════════════════════════ */ .lauth__brand { text-align: center; margin: 0 0 24px; } .lauth__brand a { display: inline-block; line-height: 0; text-decoration: none; } .lauth__brand img { width: 200px; max-width: 62vw; height: auto; display: inline-block; } /* on the dark canvas — not var(--la-mute), which is tuned for white cards */ .lauth__tagline { margin: 14px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--la-on-canvas); } /* ═════════ §3 · Card shell ═════════════════════════════════════════════ */ .lauth-card { position: relative; background: var(--la-surface); border: 1px solid var(--la-card-border); border-radius: var(--la-radius); box-shadow: var(--la-shadow); overflow: hidden; } /* the 3px accent bar across the top of the card — teal → navy → the wordmark lime. A ::before rather than a border so it can hold a gradient; the card's `overflow:hidden` clips it to the corner radius. */ .lauth-card::before, .lauth-legacy .creative::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--la-ok) 0%, var(--la-navy) 52%, var(--la-accent) 100%); } .lauth-card__head { padding: 26px 30px 0; text-align: left; } .lauth-card__title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--la-ink); letter-spacing: -.02em; text-align: left; /* out-specifies style.css `h1{text-align:center}` */ } .lauth-card__sub { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--la-mute); } .lauth-card__body { padding: 22px 30px 26px; } .lauth-card__foot { padding: 13px 30px; border-top: 1px solid #EDF1F5; background: var(--la-surface-2); text-align: center; font-size: 11.5px; color: var(--la-faint); } /* also on the dark canvas, so light-on-dark rather than the muted greys */ .lauth__legal { position: relative; z-index: 1; margin: 18px 0 0; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--la-on-canvas-dim); } .lauth__legal a { color: var(--la-on-canvas); text-decoration: none; } .lauth__legal a:hover { color: var(--la-on-canvas-strong); text-decoration: underline; } /* form element resets so the legacy sheet's `form{margin-bottom:20px}` and the Bootstrap defaults don't add stray gaps inside the card */ .lauth form { margin: 0; } /* ═════════ §4 · Alerts + inline messages ═══════════════════════════════ */ .lauth-alert { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px; padding: 11px 13px; border-radius: var(--la-radius-sm); border: 1px solid transparent; font-size: 12.5px; line-height: 1.5; text-align: left; } .lauth-alert i { font-size: 13px; line-height: 1.35; flex: 0 0 auto; } .lauth-alert p { margin: 0; } .lauth-alert--info { background: var(--la-info-soft); border-color: #CDE4F5; color: #1F6591; } .lauth-alert--ok { background: var(--la-ok-soft); border-color: #B8EAD8; color: #147F6B; } .lauth-alert--warn { background: var(--la-amber-soft); border-color: #F2DDB4; color: var(--la-amber); } .lauth-alert--danger { background: var(--la-danger-soft); border-color: #F3C9C3; color: #B33A2B; } /* the lockout countdown paragraph — same visual weight as a warn alert */ .lauth-countdown { display: block; margin: 0 0 18px; padding: 11px 13px; border-radius: var(--la-radius-sm); border: 1px solid #F2DDB4; background: var(--la-amber-soft); color: var(--la-amber); font-size: 12.5px; line-height: 1.5; text-align: left; } .lauth-countdown:empty { display: none; } /* ═════════ §5 · Form controls ══════════════════════════════════════════ */ .lauth-field { margin: 0 0 16px; } .lauth-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 6px; } .lauth-label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--la-text); letter-spacing: .005em; } .lauth-field__top .lauth-label { margin: 0; } .lauth-ctrl { position: relative; display: block; } /* z-index matters: Bootstrap gives every `.col-*` `position:relative`, and the legacy inputs still carry `col-md-7 col-xs-12`. Two positioned siblings with `z-index:auto` paint in DOM order, so the input's own background would cover an icon that precedes it. Lift the icon (and the reveal button) above it. */ .lauth-ctrl > .lauth-ctrl__icon { position: absolute; z-index: 2; top: 0; left: 0; width: 40px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--la-faint); pointer-events: none; transition: color .14s ease; } /* out-specifies style.css `input,button{height:35px;padding:6px 12px}` and `input,select{border:1px solid #CCC;width:250px}` */ .lauth input[type="text"], .lauth input[type="email"], .lauth input[type="password"], .lauth input[type="tel"], .lauth input[type="number"], .lauth select, .lauth textarea { width: 100%; height: 46px; margin: 0; padding: 0 14px; border: 1px solid #DBE3EA; border-radius: var(--la-radius-sm); background: #FBFCFD; color: var(--la-ink); font-family: inherit; font-size: 14px; line-height: 1.4; box-shadow: none; transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease; } .lauth .lauth-ctrl > input { padding-left: 40px; } .lauth .lauth-ctrl--reveal > input { padding-right: 44px; } .lauth input::placeholder, .lauth textarea::placeholder { color: #A9B6C4; opacity: 1; } .lauth input:hover, .lauth select:hover { border-color: #C6D1DB; } .lauth input:focus, .lauth select:focus, .lauth textarea:focus { outline: 0; border-color: var(--la-navy); background: #fff; box-shadow: 0 0 0 3px var(--la-ring); } .lauth .lauth-ctrl:focus-within > .lauth-ctrl__icon { color: var(--la-navy); } .lauth input:disabled, .lauth input[readonly] { background: #F1F4F7; color: var(--la-mute); cursor: not-allowed; } /* native invalid state only after the browser has actually validated */ .lauth input:not(:placeholder-shown):invalid { border-color: #E9B7B0; } /* password reveal — a button, so it is keyboard reachable */ .lauth .lauth-reveal { position: absolute; z-index: 2; top: 0; right: 0; width: 44px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 0 var(--la-radius-sm) var(--la-radius-sm) 0; background: transparent; color: var(--la-faint); font-size: 14px; line-height: 1; cursor: pointer; transition: color .14s ease; } .lauth .lauth-reveal:hover, .lauth .lauth-reveal:focus { color: var(--la-navy); background: transparent; border: 0; } .lauth-hint { display: block; margin: 7px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--la-mute); } /* ── §5b · Legacy ID overrides ────────────────────────────────────────── assets/modules/home/css/style.css:5634 styles the login form by ID: #login-nav input { background:#dee0e7; padding:18px 12px; margin:15px 0 } #exampleInputPassword2{ margin-top:25px } (its !important is malformed) An ID beats every class selector, so the only way to win without touching that 6.8k-line shared sheet — which the public marketing pages also use — is to out-specify it here. `.lauth #login-nav input` is (1,1,1) > (1,0,1). Still no !important. Keep this block in sync if a form id ever changes. */ .lauth #login-nav input[type="text"], .lauth #login-nav input[type="email"], .lauth #login-nav input[type="password"] { margin: 0; padding: 0 14px; background: #FBFCFD; } .lauth #login-nav .lauth-ctrl > input { padding-left: 40px; } .lauth #login-nav .lauth-ctrl--reveal > input { padding-right: 44px; } .lauth #login-nav input:focus { background: #fff; } /* assets/modules/auth/css/style.css keeps `.login_content{padding:25px}` and `.lspl-form{width:75%;margin:0 0 20px}` for the legacy stacked-form layout. Both are still on the change_password / invalid_token markup (the module JS and the `:target` toggles reference those wrappers), so neutralise the spacing here rather than editing that shared sheet. */ /* ── the file's ONE !important, and why ──────────────────────────────── assets/modules/auth/css/style.css:113 pins the legacy submit button: .login_content .lspl-form { background-color:#2C3A61 !important } That was harmless while the brand ramp WAS #2C3A61. Now that the ramp is graphite it strands three screens (change_password, signup, logoutcashier) on the old navy. An !important can only be beaten by a more specific !important, so this is the exception. Delete it if style.css:113 ever goes. */ .lauth .login_content .lspl-form, .lauth-legacy .login_content .lspl-form { background-color: var(--la-navy) !important; color: #fff; } .lauth .login_content .lspl-form:hover, .lauth-legacy .login_content .lspl-form:hover { background-color: var(--la-navy-700) !important; } .lauth .login_content { padding: 0; min-width: 0; margin: 0; } /* the section is centred by custom.min.css; card bodies are left-aligned, but a `.login_content` nested in a `.lauth-status` must stay centred */ .lauth .lauth-card__body > .login_content { text-align: left; } /* custom.min.css out-ranks the generic field rules above — these are all (0,2,2): `.login_content form input[type=…] {color:#777; margin:0 0 20px}` `.login_content form input[type=submit] {margin-left:38px}` ← pushed the Update button 38px right and straight out of the card. (0,3,2) beats them. */ .lauth .login_content form input[type="text"], .lauth .login_content form input[type="email"], .lauth .login_content form input[type="password"] { color: var(--la-ink); margin: 0; } .lauth .login_content form input[type="submit"] { margin: 0; width: 100%; } .lauth .separator { padding-top: 0; } .lauth .change_link { margin: 0; } .lauth .lspl-form { width: 100%; margin: 0; } /* Chrome/Safari autofill paints its own yellow-grey fill and text colour. The inset shadow trick is the only way to restore the card's field look. */ .lauth input:-webkit-autofill, .lauth input:-webkit-autofill:hover, .lauth input:-webkit-autofill:focus, .lauth-modal input:-webkit-autofill { -webkit-text-fill-color: var(--la-ink); -webkit-box-shadow: 0 0 0 1000px #FBFCFD inset; box-shadow: 0 0 0 1000px #FBFCFD inset; caret-color: var(--la-ink); transition: background-color 5000s ease-in-out 0s; } .lauth input:-webkit-autofill:focus, .lauth-modal input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px var(--la-ring); box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px var(--la-ring); } /* ═════════ §6 · Buttons ════════════════════════════════════════════════ */ /* (0,1,0) — beats the two bare `button{...}` rules in home/css/style.css */ .lauth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin: 0; padding: 0 18px; border: 1px solid transparent; border-radius: var(--la-radius-sm); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -.005em; text-align: center; text-decoration: none; text-shadow: none; cursor: pointer; background: var(--la-surface); color: var(--la-ink); transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .06s ease; } .lauth-btn:hover, .lauth-btn:focus { text-decoration: none; } .lauth-btn:active { transform: translateY(1px); } .lauth-btn--primary { background: var(--la-navy); border-color: var(--la-navy); color: #fff; box-shadow: 0 8px 18px -12px rgba(37, 45, 47, .62); } .lauth-btn--primary:hover, .lauth-btn--primary:focus { background: var(--la-navy-700); border-color: var(--la-navy-700); color: #fff; } .lauth-btn--primary:active { background: var(--la-navy-900); border-color: var(--la-navy-900); } .lauth-btn--ghost { background: #fff; border-color: #D3DCE5; color: var(--la-navy); } .lauth-btn--ghost:hover, .lauth-btn--ghost:focus { background: #F4F7FB; border-color: #BFCBD8; color: var(--la-navy-900); } .lauth-btn[disabled], .lauth-btn[disabled]:hover { opacity: .55; cursor: not-allowed; transform: none; background-color: var(--la-navy); border-color: var(--la-navy); } .lauth-actions { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 0; } .lauth-actions--tight { margin-top: 18px; } /* a recovery choice: one action + the sentence that explains it */ .lauth-choice { text-align: center; } .lauth-choice__hint { margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: var(--la-mute); } /* thin "or" rule between the primary action and the secondary one */ .lauth-or { position: relative; margin: 4px 0; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--la-faint); } .lauth-or::before, .lauth-or::after { content: ""; position: absolute; top: 50%; width: calc(50% - 26px); height: 1px; background: #E7ECF1; } .lauth-or::before { left: 0; } .lauth-or::after { right: 0; } /* when the rule separates two whole blocks (recovery portal) rather than two buttons inside a gap-10 flex column (sign in), it needs its own breathing room */ .lauth-card__body > .lauth-or { margin: 18px 0; } /* ═════════ §7 · Meta row + links ═══════════════════════════════════════ */ .lauth-link { font-size: 12.5px; font-weight: 500; color: var(--la-navy); text-decoration: none; border-radius: 4px; } .lauth-link:hover, .lauth-link:focus { color: var(--la-navy-900); text-decoration: underline; } .lauth-back { display: inline-flex; align-items: center; gap: 7px; margin: 18px 0 0; font-size: 12.5px; font-weight: 500; color: var(--la-mute); text-decoration: none; } .lauth-back:hover, .lauth-back:focus { color: var(--la-navy); text-decoration: none; } .lauth-back i { font-size: 11px; } .lauth-center { text-align: center; } /* ═════════ §8 · Password rule checklist ════════════════════════════════ */ .lauth-rules { margin: 14px 0 0; padding: 13px 15px; border: 1px solid var(--la-hair); border-radius: var(--la-radius-sm); background: var(--la-surface-2); text-align: left; } .lauth-rules h3 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--la-mute); } /* NOT display:flex — the rows contain inline runs, and flex would turn every text node and into its own flex item, adding a gap between each word ("A lowercase letter"). Block + absolute bullet keeps text inline. */ .lauth-rules p { position: relative; margin: 0 0 5px; padding-left: 22px; font-size: 12.5px; line-height: 1.45; } .lauth-rules p:last-child { margin-bottom: 0; } /* the view's own .valid / .invalid classes drive these — do not rename */ .lauth-rules p.invalid { color: var(--la-mute); } .lauth-rules p.valid { color: #147F6B; } .lauth-rules p::before { position: absolute; left: 0; top: 2px; font-family: FontAwesome; content: "\f10c"; /* circle-o */ font-size: 11px; width: 14px; text-align: center; } .lauth-rules p.valid::before { content: "\f058"; color: var(--la-ok); } /* check-circle */ .lauth-rules b { font-weight: 600; } /* ═════════ §9 · Bootstrap modal restyle ════════════════════════════════ The two modals (Request a call back / OTP) live OUTSIDE `.lauth`, because Bootstrap moves nothing but relies on its own stacking. They carry an explicit `.lauth-modal` class instead, so this block still cannot leak. */ /* The verification portal loads Bootstrap 4.5.2 JS on top of Bootstrap 3 CSS. BS4 marks the open backdrop `.show`; BS3 CSS only fades `.modal-backdrop.in`, so the overlay stayed at opacity 1 — a solid black screen behind the dialog. This rule is inert unless both classes are present, i.e. only under BS4 JS. */ .modal-backdrop.show { opacity: .5; } .lauth-modal .modal-dialog { max-width: 430px; } .lauth-modal .modal-content { border: 1px solid var(--la-hair); border-radius: var(--la-radius); box-shadow: 0 28px 60px -30px rgba(22, 32, 58, .55); font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--la-text); overflow: hidden; } .lauth-modal .modal-header { padding: 18px 22px 14px; border-bottom: 1px solid #EDF1F5; background: var(--la-surface-2); } .lauth-modal .modal-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--la-ink); letter-spacing: -.01em; } .lauth-modal .modal-subtitle { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--la-mute); } .lauth-modal .modal-body { padding: 20px 22px 6px; } .lauth-modal .modal-footer { padding: 14px 22px 20px; border-top: 0; text-align: left; } /* the modal markup reuses the same field / button vocabulary */ .lauth-modal input[type="text"], .lauth-modal input[type="email"], .lauth-modal input[type="password"] { width: 100%; height: 46px; margin: 0; padding: 0 14px 0 40px; border: 1px solid #DBE3EA; border-radius: var(--la-radius-sm); background: #FBFCFD; color: var(--la-ink); font-family: inherit; font-size: 14px; box-shadow: none; transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease; } .lauth-modal input:focus { outline: 0; border-color: var(--la-navy); background: #fff; box-shadow: 0 0 0 3px var(--la-ring); } .lauth-modal .lauth-ctrl { position: relative; display: block; } .lauth-modal .lauth-ctrl + .lauth-ctrl { margin-top: 12px; } .lauth-modal .lauth-ctrl > .lauth-ctrl__icon { position: absolute; z-index: 2; top: 0; left: 0; width: 40px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--la-faint); pointer-events: none; } .lauth-modal .lauth-ctrl:focus-within > .lauth-ctrl__icon { color: var(--la-navy); } .lauth-modal .lauth-btn { width: 100%; } .lauth-modal .lauth-btn + .lauth-btn { margin-top: 10px; } .lauth-modal .lauth-timer { display: block; margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--la-amber); letter-spacing: .01em; } .lauth-modal .lauth-close { position: absolute; top: 13px; right: 14px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--la-faint); font-size: 18px; line-height: 1; opacity: 1; text-shadow: none; cursor: pointer; } .lauth-modal .lauth-close:hover { background: #E9EEF3; color: var(--la-ink); opacity: 1; } /* ═════════ §9b · Two-factor QR panel ═══════════════════════════════════ */ .lauth-qr { display: flex; justify-content: center; padding: 16px; margin: 0 0 16px; border: 1px solid var(--la-hair); border-radius: var(--la-radius-sm); background: #fff; } .lauth-qr img { max-width: 100%; height: auto; image-rendering: pixelated; } .lauth-secret { margin: 0 0 18px; padding: 11px 13px; border: 1px dashed var(--la-hair-strong); border-radius: var(--la-radius-sm); background: var(--la-surface-2); text-align: center; } .lauth-secret__label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--la-mute); } .lauth-secret__value { display: block; margin-top: 4px; font-family: "JetBrains Mono", Consolas, Menlo, monospace; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--la-ink); word-break: break-all; } /* ═════════ §10 · Status pages ══════════════════════════════════════════ */ .lauth-status { text-align: center; padding: 34px 30px 30px; } .lauth-status__icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin: 0 0 18px; border-radius: 50%; font-size: 26px; } .lauth-status__icon--danger { background: var(--la-danger-soft); color: var(--la-danger); } .lauth-status__icon--ok { background: var(--la-ok-soft); color: var(--la-ok); } .lauth-status__icon--info { background: var(--la-info-soft); color: var(--la-info); } .lauth-status__title { margin: 0; font-size: 20px; font-weight: 700; color: var(--la-ink); letter-spacing: -.02em; text-align: center; } .lauth-status__text { margin: 9px auto 0; max-width: 320px; font-size: 13px; line-height: 1.6; color: var(--la-mute); } .lauth-status .lauth-btn { margin-top: 22px; } /* ═════════ §11 · Responsive ════════════════════════════════════════════ */ @media (max-width: 575px) { .lauth { padding: 26px 14px 24px; } .lauth__brand { margin-bottom: 20px; } .lauth__brand img { width: 168px; } .lauth-card__head { padding: 22px 20px 0; } .lauth-card__body { padding: 18px 20px 22px; } .lauth-card__foot { padding: 12px 20px; } .lauth-card__title { font-size: 19px; } .lauth-status { padding: 28px 20px 26px; } .lauth-modal .modal-dialog { margin: 12px; } .lauth-modal .modal-body { padding: 18px 18px 4px; } .lauth-modal .modal-footer { padding: 12px 18px 18px; } } /* short viewports (landscape phones): stop the vertical centring from clipping the top of the card */ @media (max-height: 620px) { .lauth { align-items: flex-start; } } @media (min-width: 576px) and (max-width: 991px) { .lauth__inner { max-width: 440px; } } /* ═════════ §13 · Legacy stacked-form page (/auth/login) ════════════════ auth/views/signup.php stacks FOUR panels (login / request password / change password / create account) on top of each other and switches between them with `:target` sibling selectors that live in assets/modules/auth/css/style.css and assets/css/custom.min.css: .login_form, .registration_form { position:absolute; top:0 } .resetpsd_form, .confirmpsd_form { position:absolute; top:0; opacity:0 } #signup:target ~ .login_wrapper .login_form { display:none } …etc That machinery is untouched — the markup keeps every anchor, wrapper and panel class. This section only repaints it, plus one structural fix: because ALL FOUR panels are absolutely positioned, `.login_wrapper` used to collapse to zero height and the cards spilled out of it. The rules below promote whichever panel is currently shown back to `position: relative`, mirroring the existing `:target` list exactly, so the wrapper sizes to the visible card. Scoped to `body.lauth-legacy`. */ /* canvas + grain come from the shared `.lauth, body.lauth-legacy` rules in §1 */ body.lauth-legacy { position: relative; margin: 0; padding: 40px 16px 40px; min-height: 100vh; font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color: var(--la-text); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; } /* these pages keep their wordmark INSIDE the white card (`.logo-space`), so they stay on `lspl-logo.png` — only the copy that sits on the dark canvas needs lightening */ .lauth-legacy > .login_wrapper { position: relative; z-index: 1; } .lauth-legacy .lauth__legal { color: var(--la-on-canvas-dim); } /* NOTE: the duplicate token block that used to live here was DELETED. It held its own copy of the brand ramp and shadow, so the legacy pages kept the old navy after the palette moved to graphite. All tokens now come from §0 (canvas, per theme) and §1 (brand ramp), both of which name `body.lauth-legacy`. */ .lauth-legacy *, .lauth-legacy *::before, .lauth-legacy *::after { box-sizing: border-box; } /* the brand block that now sits above the stack */ .lauth-legacy .lauth__brand { max-width: 430px; margin: 0 auto 24px; } .lauth-legacy .login_wrapper { position: relative; right: auto; width: 100%; max-width: 430px; margin: 0 auto; } /* ── the visible panel becomes static so the wrapper gets a height ── */ .lauth-legacy .login_wrapper .login_form { position: relative; } #signin:target ~ .login_wrapper .login_form, #signup:target ~ .login_wrapper .registration_form, #resetreqpsd:target ~ .login_wrapper .resetpsd_form, #changepassword:target ~ .login_wrapper .confirmpsd_form { position: relative; } /* …and the ones the legacy rules push out of view stay overlaid */ #signup:target ~ .login_wrapper .login_form, #resetreqpsd:target ~ .login_wrapper .login_form, #changepassword:target ~ .login_wrapper .login_form { position: absolute; } /* ── the card ── */ .lauth-legacy .creative { position: relative; background: var(--la-surface); border: 1px solid var(--la-card-border); border-radius: var(--la-radius); box-shadow: var(--la-shadow); overflow: hidden; } .lauth-legacy .logo-space { padding: 22px 0 0; min-width: 0; background: transparent; text-align: center; } .lauth-legacy .logo-space h1 { margin: 0; text-align: center; } .lauth-legacy .logo-space img { width: 170px; max-width: 70%; height: auto; } .lauth-legacy .login_content { margin: 0; padding: 22px 30px 26px; min-width: 0; text-align: left; text-shadow: none; } .lauth-legacy .login_content h1 { margin: 0 0 4px; font: 700 21px/1.25 "Inter Tight", "Inter", sans-serif; letter-spacing: -.02em; color: var(--la-ink); text-align: left; } .lauth-legacy .login_content .lauth-legacy__sub { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--la-mute); } .lauth-legacy .item.form-group { margin: 0 0 16px; } /* the INNER col wrapper always goes full width; the OUTER `.item.col-md-*` keeps its Bootstrap width so two-up layouts (logoutcashier) still work */ .lauth-legacy .item.form-group > [class*="col-"] { padding: 0; width: 100%; float: none; } /* Bootstrap's -15px row gutter would punch through the card's 30px padding. Flex instead of floats so uneven field heights can't shunt the next column into the gap (the logoutcashier "Continue" button used to land beside a field). Explicit widths because `.col-md-*` carries none below 992px. */ .lauth-legacy .login_content .row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; } .lauth-legacy .login_content .row > [class*="col-"] { float: none; padding-left: 8px; padding-right: 8px; } .lauth-legacy .login_content .row > .col-md-6 { width: 50%; } .lauth-legacy .login_content .row > .col-md-12 { width: 100%; } /* wider variant of the card (the till cash-count screen) */ .lauth-legacy .lauth-legacy--wide { max-width: 640px; } .lauth-legacy .lauth-label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--la-text); } /* custom.min.css decorates `.login_content h1` with two 73px grey rules via ::before/::after — a stray line next to the heading in the new card */ .lauth-legacy .login_content h1::before, .lauth-legacy .login_content h1::after { content: none; } .lauth-legacy .lauth-ctrl { position: relative; display: block; min-height: 46px; } /* the legacy inputs still carry `col-md-7 col-xs-12`, and `.col-xs-12` FLOATS them — a floated only-child leaves `.lauth-ctrl` zero-height, which dropped the absolutely-positioned icon up onto the label. Un-float inside the ctrl. */ .lauth-legacy .lauth-ctrl > input { float: none; display: block; } .lauth-legacy .lauth-ctrl > .lauth-ctrl__icon { position: absolute; z-index: 2; top: 0; left: 0; width: 40px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--la-faint); pointer-events: none; transition: color .14s ease; } .lauth-legacy .lauth-ctrl:focus-within > .lauth-ctrl__icon { color: var(--la-navy); } .lauth-legacy .login_content form input[type="text"], .lauth-legacy .login_content form input[type="email"], .lauth-legacy .login_content form input[type="password"], .lauth-legacy input.form-control { width: 100%; height: 46px; margin: 0; padding: 0 14px 0 40px; border: 1px solid #DBE3EA; border-radius: var(--la-radius-sm); background: #FBFCFD; color: var(--la-ink); font-family: inherit; font-size: 14px; box-shadow: none; transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease; } .lauth-legacy input.form-control:focus { outline: 0; border-color: var(--la-navy); background: #fff; box-shadow: 0 0 0 3px var(--la-ring); } .lauth-legacy input:-webkit-autofill { -webkit-text-fill-color: var(--la-ink); -webkit-box-shadow: 0 0 0 1000px #FBFCFD inset; transition: background-color 5000s ease-in-out 0s; } /* the submit controls (`input[type=submit].lspl-form` / `button.signUpBtn`) */ .lauth-legacy .login_content input[type="submit"], .lauth-legacy .login_content button[type="submit"], .lauth-legacy .login_content .lspl-form { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin: 18px 0 0; padding: 0 18px; border: 1px solid var(--la-navy); border-radius: var(--la-radius-sm); background-color: var(--la-navy); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; text-shadow: none; box-shadow: 0 8px 18px -12px rgba(37, 45, 47, .62); cursor: pointer; transition: background-color .14s ease, border-color .14s ease; } .lauth-legacy .login_content input[type="submit"]:hover, .lauth-legacy .login_content button[type="submit"]:hover { background-color: var(--la-navy-700); border-color: var(--la-navy-700); color: #fff; } .lauth-legacy .login_content .signUpBtn[disabled] { opacity: .55; cursor: not-allowed; } .lauth-legacy .separator { border-top: 1px solid #EDF1F5; margin: 20px 0 0; padding: 16px 0 0; text-align: center; } .lauth-legacy .separator .change_link { margin: 0 0 6px; font-size: 12.5px; color: var(--la-mute); } .lauth-legacy .separator .change_link:last-of-type { margin-bottom: 0; } .lauth-legacy .login_content a { color: var(--la-navy); font-weight: 500; text-decoration: none; } .lauth-legacy .login_content a:hover { text-decoration: underline; } .lauth-legacy .form-copy { padding: 13px 20px; min-width: 0; border-top: 1px solid #EDF1F5; background: var(--la-surface-2); color: var(--la-faint); font-size: 11.5px; text-align: center; } /* inline field errors emitted by assets/modules/auth/js/script.js */ .lauth-legacy .item .alert, .lauth-legacy .lauth-alert { display: block; margin: 7px 0 0; padding: 8px 11px; border: 1px solid #F3C9C3; border-radius: var(--la-radius-sm); background: var(--la-danger-soft); color: #B33A2B; font-size: 12px; line-height: 1.45; white-space: normal; } .lauth-legacy .lauth-alert--info { border-color: #CDE4F5; background: var(--la-info-soft); color: #1F6591; margin: 0 0 16px; padding: 11px 13px; font-size: 12.5px; } .lauth-legacy .lauth-alert--ok { border-color: #B8EAD8; background: var(--la-ok-soft); color: #147F6B; margin: 0 0 16px; padding: 11px 13px; font-size: 12.5px; } .lauth-legacy .g-recaptcha { margin: 16px 0 0; transform: scale(.88); transform-origin: 0 0; } .lauth-legacy .lauth__legal { max-width: 430px; margin: 18px auto 0; text-align: center; font-size: 11.5px; color: var(--la-on-canvas-dim); } @media (max-width: 575px) { body.lauth-legacy { padding: 26px 14px 30px; } .lauth-legacy .login_content { padding: 18px 20px 22px; } .lauth-legacy .logo-space img { width: 150px; } .lauth-legacy .login_content .row > [class*="col-"] { width: 100%; } } /* ═════════ §12 · Accessibility ═════════════════════════════════════════ */ .lauth a:focus-visible, .lauth button:focus-visible, .lauth input:focus-visible, .lauth-modal button:focus-visible, .lauth-modal input:focus-visible { outline: 2px solid var(--la-navy); outline-offset: 2px; } .lauth .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .lauth *, .lauth-modal * { transition: none !important; animation: none !important; } }