/* ============================================================ Arbah v2 — ClientHome surface Scoped restyle of the existing ClientHome page DOM under .arbah-v2. Legacy AND v1 paint stay byte-identical when the flag is off — nothing here applies unless carries .arbah-v2. Builds on --arbah-v2-* tokens only (src/design/arbah-v2-tokens.css) and the v2 primitives layer (arbah-v2-primitives.css). This file does NOT redefine any primitive — it paints only the ClientHome- specific hooks emitted by the page DOM: .client-home (root), .hero-strip + .hero-image / -overlay / -content / -welcome / -title / -meta (the welcome banner), and .client-progress-card + .client-progress-label (the overall progress card). DOM source (NO edits — visual rollout only): src/pages/ClientHome.js =========================================================== CAVEAT — partial restyle by design ClientHome.js carries 27 inline `style="color:#..."` attributes (mostly #0B2545 for headings + #64748B for muted text). Inline styles have specificity (1,0,0,0) and cannot be overridden by external CSS without `!important`, which violates the v2 layer's 0-important policy. So this file repaints: - The class-keyed hooks (cards, hero strip, progress card, eyebrow labels that have semantic class names). - Borders, surfaces, shadows, radii, fonts on those hooks. It deliberately leaves the inline-styled INK COLORS alone. The v1 navy #0B2545 already reads close to --arbah-v2-brand (var(--arbah-v2-navy-700)); a future "remove inline styles" JS PR is needed to fully retire them — flagged in the enrichment backlog. This matches the design-gap lane's read of the same underlying problem. =========================================================== !important policy: 0. The .arbah-v2 ancestor + compound selectors out-specify the page's Tailwind utilities ([0,1,0]) without escalation. RTL: hero overlay + KPI grid are symmetric so layout flips for free under [dir="rtl"]. No physical box-model overrides needed. ============================================================ */ /* -- Page shell --------------------------------------------- */ /* The page background is owned by .arbah-v2 .app-shell (surface-sunken from arbah-v2-shell.css). Page only sets type + ink so the sunken canvas reads through. */ .arbah-v2 .client-home { font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); } /* -- Hero strip --------------------------------------------- */ /* The hero is a 16:7 photo with a dark gradient overlay and white-on-image text. Token chrome on the wrapper (border, shadow, radius); the overlay + text stay as the page emits them (white text + black gradient is intentionally photo-overlay styling, not the theme ink ramp). */ .arbah-v2 .client-home .hero-strip { border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg, 12px); box-shadow: var(--arbah-v2-shadow-sm); overflow: hidden; } /* Hero welcome eyebrow (uppercase, tracked). Tones already use opacity: 0.9 from Tailwind; we only set the font-family + letter-spacing on the v2 mono eyebrow signal. */ .arbah-v2 .client-home .hero-welcome { font-family: var(--arbah-v2-font-mono); font-size: 11px; letter-spacing: 0.08em; } /* Hero title (project name) onto display font — Plex Serif gives the welcome banner a "letterhead" weight; AR fallback handled by the inherent Plex Sans Arabic chain on display faces. */ .arbah-v2 .client-home .hero-title { font-family: var(--arbah-v2-font-display); font-weight: 600; } /* Hero meta (current phase line). Sans, slightly more letter- spacing than body so it reads as supporting copy. */ .arbah-v2 .client-home .hero-meta { font-family: var(--arbah-v2-font-sans); letter-spacing: 0.01em; } /* -- Progress card ----------------------------------------- */ /* The overall-progress card carries an inline navy `#0B2545` on the percent figure (limitation noted above). We token-paint the wrapper + progress bar + label chrome. */ .arbah-v2 .client-home .client-progress-card { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg, 12px); box-shadow: var(--arbah-v2-shadow-sm); } /* Progress eyebrow label inherits the same mono-eyebrow treatment as the hero-welcome (no inline color to fight). */ .arbah-v2 .client-home .client-progress-label { font-family: var(--arbah-v2-font-mono); letter-spacing: 0.08em; } /* The Tailwind progress track (.rounded-full .bg-gray-100) appears in two places — overall progress + per-phase mini bar inside the KPI strip. Repaint with token tones inside .client-home so other surfaces using .bg-gray-100 aren't affected. */ .arbah-v2 .client-home .rounded-full.bg-gray-100 { background: var(--arbah-v2-surface-raised); } /* -- KPI strip (Phases done / Current phase / Est completion) - */ /* The three KPI cards are anonymous Tailwind divs with the same shape: p-4 bg-white border border-gray-200 rounded-xl. Match via structural selector so they pick up tokens. */ .arbah-v2 .client-home > section.grid > div.bg-white { background: var(--arbah-v2-surface); border-color: var(--arbah-v2-border); box-shadow: var(--arbah-v2-shadow-sm); } /* -- Pipeline + photos + timelapse sections ---------------- */ /* These three sections share the .bg-white .border .rounded-xl wrapper pattern. Same treatment as KPI strip — repaint with token surface + border. */ .arbah-v2 .client-home section .bg-white.border.rounded-xl, .arbah-v2 .client-home section .bg-white.border.border-gray-200.rounded-xl { background: var(--arbah-v2-surface); border-color: var(--arbah-v2-border); } /* The dashed empty-state strip inside the Photos section (shown when no photos exist) — its inline color #64748B reads close to ink-subtle so we leave the text alone and only swap the border. */ .arbah-v2 .client-home .border-dashed { border-color: var(--arbah-v2-border-strong); } /* -- Mobile (375x812 anchor) ------------------------------- */ /* The page is already mobile-first (single-column layout, hero 16:7 ratio scales fluidly). Only the KPI strip needs an explicit gap tighten so cards breathe at phone widths. */ @media (max-width: 640px) { .arbah-v2 .client-home > section.grid { gap: 8px; } } /* -- AR / RTL ---------------------------------------------- */ /* Hero overlay is bottom-anchored and centered — no LTR/RTL bias. KPI grid + sections are symmetric. The percent figure under an inline style is on the enrichment backlog. Nothing physical to flip here today; this comment exists as the surface's RTL hook for when the inline-style cleanup lands and we can paint the percent figure on tokens. */ /* ============================================================ Arbah v2 ClientHome — REAL rebuild surface (clienthome-v2-*). Rendered by ClientHomeV2Surface (flag ON) in place of the legacy .client-home DOM. Calm client tone: bronze sparingly, NO red. --arbah-v2-* tokens, logical properties for RTL, !important: 0. ============================================================ */ .arbah-v2 .clienthome-v2-page { max-width: 1120px; margin-inline: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; } .arbah-v2 .clienthome-v2-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .arbah-v2 .clienthome-v2-eyebrow { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--arbah-v2-ink-subtle); } .arbah-v2 .clienthome-v2-title { margin: 2px 0 0; font-size: 32px; line-height: 1.15; color: var(--arbah-v2-ink); } .arbah-v2 .clienthome-v2-subtitle { margin: 4px 0 0; color: var(--arbah-v2-ink-muted); font-size: 14px; } /* Hero */ .arbah-v2 .clienthome-v2-hero { position: relative; height: 280px; border-radius: var(--arbah-v2-radius-lg); overflow: hidden; cursor: pointer; background: var(--arbah-v2-surface-raised); } .arbah-v2 .clienthome-v2-hero-img { width: 100%; height: 100%; object-fit: cover; } .arbah-v2 .clienthome-v2-hero-ph { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, var(--arbah-v2-bronze-100, #F3E8D5) 0 12px, var(--arbah-v2-surface-sunken) 12px 24px); } .arbah-v2 .clienthome-v2-hero-overlay { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 20px; background: linear-gradient(to top, rgba(10,27,46,.78), transparent); } .arbah-v2 .clienthome-v2-hero-name { color: #fff; font-size: 22px; font-weight: 600; } .arbah-v2 .clienthome-v2-hero-pills { display: flex; gap: 8px; margin-block-start: 8px; flex-wrap: wrap; } .arbah-v2 .clienthome-v2-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--arbah-v2-radius-pill); } .arbah-v2 .clienthome-v2-pill.is-ontrack { background: var(--arbah-v2-success-soft); color: #065F46; } .arbah-v2 .clienthome-v2-pill.is-progress { background: rgba(255,255,255,.16); color: #fff; } /* KPI strip (4 calm tiles) */ .arbah-v2 .clienthome-v2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .arbah-v2 .clienthome-v2-kpi { position: relative; background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); padding: 16px; overflow: hidden; } .arbah-v2 .clienthome-v2-kpi::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--arbah-v2-border-strong); } .arbah-v2 .clienthome-v2-kpi.is-brand::before { background: var(--arbah-v2-brand); } .arbah-v2 .clienthome-v2-kpi.is-accent::before { background: var(--arbah-v2-accent); } .arbah-v2 .clienthome-v2-kpi-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--arbah-v2-ink-subtle); } .arbah-v2 .clienthome-v2-kpi-value { display: block; font-size: 30px; line-height: 1.1; color: var(--arbah-v2-ink); margin-block: 4px 2px; } .arbah-v2 .clienthome-v2-kpi-sub { display: block; font-size: 12px; color: var(--arbah-v2-ink-muted); } /* 60 / 40 grid */ .arbah-v2 .clienthome-v2-grid { display: grid; grid-template-columns: 6fr 4fr; gap: 16px; align-items: start; } .arbah-v2 .clienthome-v2-rail { display: flex; flex-direction: column; gap: 16px; } .arbah-v2 .clienthome-v2-card { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); padding: 18px; } .arbah-v2 .clienthome-v2-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .arbah-v2 .clienthome-v2-card-title { margin: 0 0 12px; font-size: 16px; color: var(--arbah-v2-ink); } .arbah-v2 .clienthome-v2-card-head .clienthome-v2-card-title { margin-block-end: 0; } .arbah-v2 .clienthome-v2-empty { color: var(--arbah-v2-ink-subtle); font-size: 13px; padding: 12px 0; } .arbah-v2 .clienthome-v2-link { appearance: none; border: 0; background: transparent; color: var(--arbah-v2-brand); font-weight: 600; font-size: 13px; cursor: pointer; } /* Updates feed */ .arbah-v2 .clienthome-v2-updates-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .arbah-v2 .clienthome-v2-update { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-block-end: 1px solid var(--arbah-v2-border); } .arbah-v2 .clienthome-v2-update:last-child { border-block-end: 0; } .arbah-v2 .clienthome-v2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--arbah-v2-border-strong); } .arbah-v2 .clienthome-v2-dot.is-success { background: var(--arbah-v2-success); } .arbah-v2 .clienthome-v2-dot.is-info { background: var(--arbah-v2-info); } .arbah-v2 .clienthome-v2-update-text { font-size: 14px; color: var(--arbah-v2-ink); } .arbah-v2 .clienthome-v2-update-date { font-size: 12px; color: var(--arbah-v2-ink-subtle); } /* Awaiting */ .arbah-v2 .clienthome-v2-awaiting { border-color: var(--arbah-v2-bronze-200, #D9C28A); background: linear-gradient(to bottom, var(--arbah-v2-bronze-100, #F3E8D5), var(--arbah-v2-surface) 40%); } .arbah-v2 .clienthome-v2-await-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .arbah-v2 .clienthome-v2-await-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .arbah-v2 .clienthome-v2-await-name { font-size: 14px; font-weight: 500; color: var(--arbah-v2-ink); } /* Photos */ .arbah-v2 .clienthome-v2-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .arbah-v2 .clienthome-v2-photo { aspect-ratio: 1; border: 0; padding: 0; border-radius: var(--arbah-v2-radius-md); overflow: hidden; cursor: pointer; background: var(--arbah-v2-surface-sunken); } .arbah-v2 .clienthome-v2-photo img { width: 100%; height: 100%; object-fit: cover; } .arbah-v2 .clienthome-v2-photo-ph { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, var(--arbah-v2-surface-raised) 0 8px, var(--arbah-v2-surface-sunken) 8px 16px); } /* Buttons + doclink + schedule */ .arbah-v2 .clienthome-v2-btn { appearance: none; cursor: pointer; font-size: 13px; font-weight: 600; padding: 7px 14px; min-height: 36px; border-radius: var(--arbah-v2-radius-md); border: 1px solid var(--arbah-v2-border); background: var(--arbah-v2-surface); color: var(--arbah-v2-ink); } .arbah-v2 .clienthome-v2-btn.is-primary { background: var(--arbah-v2-accent); border-color: var(--arbah-v2-accent); color: #fff; } .arbah-v2 .clienthome-v2-btn.is-disabled { opacity: .55; cursor: not-allowed; } .arbah-v2 .clienthome-v2-doclink { display: inline-flex; align-items: center; gap: 8px; appearance: none; border: 1px solid var(--arbah-v2-border); background: var(--arbah-v2-surface); border-radius: var(--arbah-v2-radius-md); padding: 10px 12px; width: 100%; cursor: pointer; color: var(--arbah-v2-ink); font-size: 14px; } .arbah-v2 .clienthome-v2-schedule-note { margin: 0 0 10px; font-size: 13px; color: var(--arbah-v2-ink-muted); } @media (max-width: 920px) { .arbah-v2 .clienthome-v2-grid { grid-template-columns: 1fr; } .arbah-v2 .clienthome-v2-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }