docs: client-approved public-site redesign — PRD 1.4, UX spec v2.0, architecture §6.2, tasks 24-x Ready for Dev

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
2026-10-31 18:23:02 +02:00
parent caec396fa4
commit 3d1fe40be6
17 changed files with 1761 additions and 5 deletions
@@ -0,0 +1,67 @@
+---
+id: 24-9
+title: 24-9 Auth Pages Type and Controls
+status: Ready for Dev
+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.