/* ============================================================ Arbah v2 — Photos surface Scoped restyle of the existing Photos 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: PageHeader, Button, Chip, Card, EmptyState …). This file does NOT redefine any primitive — it paints only the Photos-specific hooks the page DOM emits: .photos-page, .photos-filters, .photos-grid, .photo-card, .photo-thumb, the bespoke empty block, the upload zone, the shared PhotoLightbox, and the PhotoCommentsThread composer. DOM source (NO edits made — visual rollout only): src/pages/Photos.js, src/components/PhotoLightbox.js, src/components/PhotoCommentsThread.js. !important policy: 0. The .arbah-v2 ancestor scope + compound selectors out-specify the page's Tailwind utility classes (0,2,0 > 0,1,0) without needing !important. Scope notes: - PhotoLightbox mounts at document.body (fixed inset-0) and is SHARED with ClientHome + SlideshowLightbox. Every rule here lives under .arbah-v2, so non-Photos uses only change when the v2 flag is ON (desired: one consistent v2 paint). PhaseDetailModal is a separate surface and is intentionally NOT touched. - The page background is owned by .arbah-v2 .app-shell (surface-sunken, see arbah-v2-shell.css); .photos-page only sets type + ink so the sunken canvas reads behind the tiles. ============================================================ */ /* -- Page shell --------------------------------------------- */ .arbah-v2 .photos-page { font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); } /* -- Filter row (search input + project select) ------------- */ /* The page DOM lays this out with flex utilities; we only paint the controls. The search input has no explicit type attribute, so we match by element rather than [type="text"]. */ .arbah-v2 .photos-filters input, .arbah-v2 .photos-filters select { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); padding: 8px 12px; font-family: var(--arbah-v2-font-sans); font-size: 13px; color: var(--arbah-v2-ink); transition: border-color 120ms cubic-bezier(.2, 0, 0, 1), box-shadow 120ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .photos-filters input::placeholder { color: var(--arbah-v2-ink-subtle); } /* Focus paint adds a brand border + soft ring. We do NOT clear the outline, so the token focus-visible outline still serves keyboard users (a11y). */ .arbah-v2 .photos-filters input:focus, .arbah-v2 .photos-filters select:focus { border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16, 42, 67, .14); } /* -- Photo grid --------------------------------------------- */ /* The DOM drives responsive column counts via Tailwind (2 / 3 / 4 / 5 across breakpoints, 2-col on mobile). We keep that cadence and only normalize the gutter to the v2 rhythm. Grid flow is direction- agnostic, so RTL ordering flips for free. */ .arbah-v2 .photos-grid { gap: 12px; } /* -- Photo tile --------------------------------------------- */ /* Image-led card: surface chrome, lg radius, sm shadow lifting to md on hover. The DOM keeps aspect-ratio:1 (inline) and the hover image zoom (group-hover:scale-105); we own only the card chrome. The raised surface shows as a tasteful placeholder while the image loads. */ .arbah-v2 .photo-card { position: relative; background: var(--arbah-v2-surface-raised); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); box-shadow: var(--arbah-v2-shadow-sm); overflow: hidden; transition: box-shadow 160ms cubic-bezier(.2, 0, 0, 1), transform 160ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .photo-card:hover { box-shadow: var(--arbah-v2-shadow-md); } /* Selected tile — bronze accent ring replaces the page's blue Tailwind ring (our 0,2,0 selector out-specifies .ring-2 / .ring-blue-500). */ .arbah-v2 .photo-card--selected { box-shadow: 0 0 0 2px var(--arbah-v2-accent), var(--arbah-v2-shadow-md); border-color: var(--arbah-v2-accent); } .arbah-v2 .photo-thumb { display: block; width: 100%; height: 100%; object-fit: cover; } /* -- Empty state -------------------------------------------- */ /* The page renders a bespoke empty block (NOT the EmptyState primitive — using it would need a DOM change, out of this lane). Paint it to read on v2 tokens. Flagged to coordinator as a primitive-migration follow-up. */ .arbah-v2 .photos-page > .text-center.py-16 { color: var(--arbah-v2-ink-subtle); font-family: var(--arbah-v2-font-sans); } .arbah-v2 .photos-page > .text-center.py-16 p { color: var(--arbah-v2-ink-muted); font-size: 15px; font-weight: 600; } /* -- Upload drop zone (inside the upload modal) ------------- */ .arbah-v2 .photo-upload-zone { border: 2px dashed var(--arbah-v2-border-strong); border-radius: var(--arbah-v2-radius-lg); background: var(--arbah-v2-surface-sunken); transition: background-color 160ms cubic-bezier(.2, 0, 0, 1), border-color 160ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .photo-upload-zone:hover { background: var(--arbah-v2-navy-100); border-color: var(--arbah-v2-brand); } .arbah-v2 .photo-upload-zone p { font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink-muted); } /* -- Lightbox (shared) -------------------------------------- */ /* Mounts at document.body via fixed positioning; .arbah-v2 on still wins ancestor matching. */ .arbah-v2 .photo-lightbox { background: rgba(10, 27, 46, .92); /* navy-900 @ 92% */ font-family: var(--arbah-v2-font-sans); } .arbah-v2 .photo-lightbox-card { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); box-shadow: var(--arbah-v2-shadow-md); color: var(--arbah-v2-ink); } .arbah-v2 .photo-lightbox-image { border-radius: var(--arbah-v2-radius-md); object-fit: contain; } .arbah-v2 .photo-lightbox-caption { font-family: var(--arbah-v2-font-sans); } /* Lightbox tag chips sit on the white card — repaint as quiet v2 chips. Tile tags render white-on-dark over the hover gradient (DOM-owned) and are intentionally left alone. */ .arbah-v2 .photo-lightbox .photo-tag { background: var(--arbah-v2-surface-raised); color: var(--arbah-v2-ink-muted); border-radius: 999px; font-family: var(--arbah-v2-font-sans); font-weight: 600; } /* Close button rides the dark backdrop (not the white card) — keep it legible white, brightening on hover. */ .arbah-v2 .photo-lightbox-close { color: rgba(255, 255, 255, .78); transition: color 120ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .photo-lightbox-close:hover { color: #fff; } /* -- Comments thread inside the lightbox -------------------- */ .arbah-v2 .photo-comments { font-family: var(--arbah-v2-font-sans); border-top-color: var(--arbah-v2-border); } .arbah-v2 .photo-comments textarea { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); padding: 8px 12px; font-family: var(--arbah-v2-font-sans); font-size: 13px; color: var(--arbah-v2-ink); transition: border-color 120ms cubic-bezier(.2, 0, 0, 1), box-shadow 120ms cubic-bezier(.2, 0, 0, 1); } .arbah-v2 .photo-comments textarea:focus { border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16, 42, 67, .14); } /* Send affordance picks up the v2 accent; disabled state keeps the DOM's muted gray (so :not(:disabled) guards the recolor). */ .arbah-v2 .photo-comments button[type="submit"]:not(:disabled) { color: var(--arbah-v2-accent); } .arbah-v2 .photo-comments button[type="submit"]:not(:disabled):hover { color: var(--arbah-v2-bronze-700); } /* -- Mobile (≤640px) ---------------------------------------- */ @media (max-width: 640px) { /* The DOM is already 2-col on mobile (grid-cols-2); tighten the gutter a touch for the narrow viewport. */ .arbah-v2 .photos-grid { gap: 8px; } /* Lightbox card goes edge-to-edge on phone — drop the radius so the white surface fills the viewport width. */ .arbah-v2 .photo-lightbox-card { border-radius: 0; } } /* -- AR / RTL ----------------------------------------------- */ /* The page title comes from the PageHeader primitive, which already swaps to Plex Sans Arabic in RTL. Photos hooks here are layout- symmetric (grid flow + flex are direction-agnostic; positions that must differ — the per-tile unread dot and the lightbox close — are flipped in the page DOM via dir checks), so RTL needs only the Arabic font ordering on Photos text. Triple selector mirrors the shell convention for the three possible scope orderings. */ .arbah-v2[dir="rtl"] .photos-page, [dir="rtl"] .arbah-v2 .photos-page, .arbah-v2 [dir="rtl"] .photos-page { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-sans); } /* -- Design parity: photo grid sizing + card treatment (photos-grid.jsx DayGroup grid = repeat(auto-fill, minmax(220px,1fr))). CSS-only over the legacy .photos-grid / .photo-card DOM; flag OFF unaffected. -- */ .arbah-v2 .photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .arbah-v2 .photo-card { border-radius: var(--arbah-v2-radius-lg); overflow: hidden; border: 1px solid var(--arbah-v2-border); box-shadow: var(--arbah-v2-shadow-sm); transition: box-shadow 120ms ease, transform 120ms ease; } .arbah-v2 .photo-card:hover { box-shadow: var(--arbah-v2-shadow-md); transform: translateY(-1px); } .arbah-v2 .photo-thumb { border-radius: 0; } @media (max-width: 640px) { .arbah-v2 .photos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }