docs: gold-ink token note, redesign gotchas in project CLAUDE.md

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Naser Mansour
2026-10-31 19:26:47 +02:00
parent ad7f531edd
commit 88c0a65aa9
2 changed files with 15 additions and 1 deletions
+14
View File
@@ -261,6 +261,20 @@ dashboards safe:
page uses `variant="strip"`. `pages.booking` takes `compact` for the home card; booking rules are
shared and unchanged.
Gotchas found in the 24-x QA (2026-10-31) — all come from `app.css`/shared markup reaching into `body.site`:
- `app.css` sets `overflow-x:hidden` on `body` (breaks `position:sticky`) and the body font via
`html[lang] body` (beats `body.site`): `public.css` overrides both (`overflow-x:clip`,
`html[lang] body.site`). Any new public rule that must beat `app.css` needs the same care.
- Reveal uses the `translate` property, not `transform`, so hover lifts (`transform`) still work.
- Flux always renders a hidden `data-flux-error`, so `app.css` paints every Flux input red; auth
styles override it unless the error is visible (`:not(.hidden)`).
- A Volt template that starts with a Blade `@if` gets no Livewire root (form unbound, only visible
in the browser console): wrap such templates in one root `<div>`.
- A broad link-colour rule on auth pages must exclude `[data-test^=language-switch]`: its active
label is white on olive, and an olive link colour erased it.
- After a change, check text against its background (contrast of active, hover and filled states)
in a screenshot, not only layout metrics.
## Design Requirements (from PRD)
Below: the dashboards' palette and rules. Public pages: Part A of `docs/ux-design.md`.
+1 -1
View File
@@ -93,7 +93,7 @@ emails, PDFs, `/forms/nablus-workshop`.
| `--forest` | `#2D3624` | hero frame ground, pillar band, booking card, hover fill of service rows |
| `--forest-2` | `#232A1C` | footer only (depth) |
| `--gold` | `#A68966` | gold buttons, rules, row numbers, focus ring |
| `--gold-ink` | `#8A7555` | gold text on cream (labels, dates) |
| `--gold-ink` | `#7A6648` | gold text on cream (labels, dates) — darkened from the brand gold-hover `#8A7555` on 2026-10-31 so small text meets WCAG AA (4.9:1 on cream, 5.5:1 on white) |
| `--gold-lt` | `#C4A882` | small gold text on forest |
| `--cream` | `#F4F1EA` | page ground |
| `--olive` | `#4A5D23` | link hover, emphasis word in the hero, active accents |