---
id: 24-9
title: 24-9 Auth Pages Type and Controls
status: Done
date: 2026-10-31
parent: 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.