libra/docs/tasks/24-9.md

id, title, status, date, parent

id	title	status	date	parent
24-9	24-9 Auth Pages Type and Controls	QA Review	2026-10-31	24

Description

Apply the redesign's type and form controls to the auth pages (login, forgot password, reset password, confirm password, verify email, two-factor challenge) without changing their composition. The split layout (forest panel with the logo on the start side at ≥1024px, cream form panel with the existing auth-pattern background, the language toggle at the top end, and the mobile logo above the form) stays exactly as it is. No public script is loaded on auth pages.

Layouts

In each of resources/views/components/layouts/auth/split.blade.php, resources/views/components/layouts/auth/card.blade.php and resources/views/components/layouts/auth/simple.blade.php:

• After @include('partials.head') add @include('partials.site-fonts') and @vite(['resources/css/public.css']).
• Add the class site-auth to <body> and remove the inline style="font-family: var(--font-…)" from <body>.

CSS — resources/css/public.css, scoped under body.site-auth

• body.site-auth{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:#1E2219}.
• Headings (h1, h2, [data-flux-heading]): font-family:"Markazi Text","Times New Roman",serif; font-weight:700.
• Text inputs (input[type=email], input[type=password], input[type=text]) — including those rendered by flux:input: min-height 48px, radius 12px, border 1.5px solid rgba(45,54,36,.18), white background; focus border #A68966 and box-shadow:0 0 0 4px rgba(166,137,102,.2), no default outline.
• Primary submit buttons ([data-flux-button][type=submit] and button[type=submit]): radius 999px, min-height 48px, background #A68966, text #1E2219, weight 600, shadow 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -8px rgba(166,137,102,.8); hover lift 2px.
• Links inside the form panel: colour #4A5D23, underline on hover.
• Focus ring for every control: outline:2px solid #A68966; outline-offset:3px.
• Reduced motion: no transitions under prefers-reduced-motion: reduce. Inspect the rendered login page to confirm which attributes Flux outputs before writing the selectors; target only elements inside body.site-auth.

Files

• Modify: resources/views/components/layouts/auth/split.blade.php, resources/views/components/layouts/auth/card.blade.php, resources/views/components/layouts/auth/simple.blade.php, resources/css/public.css.
• Do not modify any file under resources/views/livewire/auth/ or app/Actions/Fortify/.

Acceptance Criteria

• /login renders in IBM Plex Sans Arabic with the heading in Markazi Text, 48px inputs with a gold focus ring, and a gold pill submit button; the forest logo panel and the cream pattern panel are unchanged in layout.
• Logging in with valid credentials still works for an admin and a client (redirect to their dashboard), and invalid credentials still show the existing error.
• /forgot-password shows the same styles and still sends the reset link for a known email.
• The auth pages' HTML contains public.css and class="site-auth, and does not contain public.js.
• The admin and client dashboards contain neither public.css nor site-auth.
• /login has no horizontal scroll at 1440, 768 and 390px.

Sub-tasks

None.