/* ============================================================ Arbah v1 — Photos page (Round 4 PR 8) All rules scoped under .arbah-v1. Legacy Tailwind paint is byte-identical when the flag is OFF; this file is a no-op. Reads tokens from src/design/arbah-tokens.css. Cross-PR token reuse with #109 (login inputs) / #110 (KPI card surface) / #111 (filter chips) / #112 (project header) / #113 (Tasks). No --arbah-* tokens declared here. !important policy: 0 in this file. Compound selectors and the .arbah-v1 ancestor scope are sufficient for specificity wins. Scope notes: - The PhotoLightbox component is mounted at document.body level (fixed inset-0) — the .arbah-v1 class on reaches it via ancestor selectors regardless of where it mounts. - The PhotoCommentsThread renders inline INSIDE the lightbox card in the current code. CSS hooks for a future side-panel (.photo-comments-panel) are also present so the same rules work after a layout refactor. - Lightbox prev/next nav arrows are a forward-compat hook — not yet wired in PhotoLightbox.js. The selector targets a future `.photo-lightbox-arrow` button. ============================================================ */ /* -- Page shell --------------------------------------------- */ .arbah-v1 .photos-page { background: var(--arbah-bg); font-family: var(--arbah-font-sans); color: var(--arbah-text); } /* -- Filter row (search + project + date range) ------------- */ .arbah-v1 .photos-filters { display: flex; flex-wrap: wrap; gap: var(--arbah-space-3); align-items: center; } .arbah-v1 .photos-filters input[type="search"], .arbah-v1 .photos-filters input[type="text"], .arbah-v1 .photos-filters input[type="date"], .arbah-v1 .photos-filters select { background: var(--arbah-surface); border: 1px solid var(--arbah-border); border-radius: var(--arbah-radius-md); padding: var(--arbah-space-2) var(--arbah-space-3); font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); color: var(--arbah-text); } .arbah-v1 .photos-filters input:focus, .arbah-v1 .photos-filters select:focus { border-color: var(--arbah-navy-700); box-shadow: var(--arbah-focus-ring-glow); outline: none; } /* -- Photo grid --------------------------------------------- */ .arbah-v1 .photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--arbah-space-3); } /* -- Photo card --------------------------------------------- */ .arbah-v1 .photo-card { position: relative; background: var(--arbah-surface); border-radius: var(--arbah-radius-md); box-shadow: var(--arbah-shadow-sm); overflow: hidden; cursor: pointer; transition: box-shadow var(--arbah-duration-base) var(--arbah-ease-standard), transform var(--arbah-duration-base) var(--arbah-ease-standard); } .arbah-v1 .photo-card:hover { box-shadow: var(--arbah-shadow-md); transform: scale(1.02); } .arbah-v1 .photo-card--selected, .arbah-v1 .photo-card.is-selected { box-shadow: 0 0 0 3px var(--arbah-bronze-500), var(--arbah-shadow-md); background: var(--arbah-bronze-50); } .arbah-v1 .photo-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* -- Photo meta (caption, date, project, photographer) ------ */ .arbah-v1 .photo-meta { padding: var(--arbah-space-2) var(--arbah-space-3); font-family: var(--arbah-font-sans); } .arbah-v1 .photo-meta-caption { font-family: var(--arbah-font-sans); font-weight: 500; font-size: var(--arbah-text-sm); color: var(--arbah-text); line-height: 1.4; margin: 0; } .arbah-v1 .photo-meta-project { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); color: var(--arbah-navy-700); margin: 0; } .arbah-v1 .photo-meta-date { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-xs); color: var(--arbah-text-muted); margin: 0; } .arbah-v1 .photo-meta-photographer { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-xs); color: var(--arbah-text-muted); margin: 0; } /* -- Tag chips (scope-nested under .photo-card) ------------- */ .arbah-v1 .photo-card .photo-tag, .arbah-v1 .photo-tag { display: inline-block; background: var(--arbah-navy-50); color: var(--arbah-text); font-family: var(--arbah-font-sans); font-weight: 500; font-size: var(--arbah-text-xs); padding: 2px var(--arbah-space-2); border-radius: var(--arbah-radius-full); margin: 0 var(--arbah-space-1) var(--arbah-space-1) 0; line-height: 1.4; } /* -- Upload drop zone --------------------------------------- */ .arbah-v1 .photo-upload-zone { border: 2px dashed var(--arbah-border); border-radius: var(--arbah-radius-lg); padding: var(--arbah-space-5); background: var(--arbah-surface); transition: background-color var(--arbah-duration-base) var(--arbah-ease-standard), border-color var(--arbah-duration-base) var(--arbah-ease-standard); font-family: var(--arbah-font-sans); } .arbah-v1 .photo-upload-zone:hover, .arbah-v1 .photo-upload-zone.is-drag-over, .arbah-v1 .photo-upload-zone[data-drag-over="true"] { background: var(--arbah-navy-50); border-color: var(--arbah-navy-700); } .arbah-v1 .photo-upload-zone .photo-upload-text, .arbah-v1 .photo-upload-zone p { font-family: var(--arbah-font-sans); font-weight: 500; font-size: var(--arbah-text-sm); color: var(--arbah-text-muted); } /* -- Lightbox ----------------------------------------------- */ /* The lightbox mounts at document.body via fixed positioning; .arbah-v1 on still wins ancestor matching. */ .arbah-v1 .photo-lightbox { background: rgba(10, 27, 46, 0.9); /* navy-900 @ 90% */ font-family: var(--arbah-font-sans); } .arbah-v1 .photo-lightbox-image { object-fit: contain; } .arbah-v1 .photo-lightbox-caption { color: #FFFFFF; font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); } .arbah-v1 .photo-lightbox-close, .arbah-v1 .photo-lightbox button.photo-lightbox-close { color: var(--arbah-bronze-500); background: transparent; border: none; cursor: pointer; transition: color var(--arbah-duration-fast) var(--arbah-ease-standard); } .arbah-v1 .photo-lightbox-close:hover { color: var(--arbah-bronze-700); } .arbah-v1 .photo-lightbox-close:active { color: var(--arbah-bronze-800); } /* Forward-compat: prev/next arrow buttons (not yet in markup) */ .arbah-v1 .photo-lightbox-arrow { background: transparent; border: none; color: var(--arbah-bronze-500); cursor: pointer; font-size: 32px; padding: var(--arbah-space-3); transition: color var(--arbah-duration-fast) var(--arbah-ease-standard); } .arbah-v1 .photo-lightbox-arrow:hover { color: var(--arbah-bronze-700); } .arbah-v1 .photo-lightbox-arrow:active { color: var(--arbah-bronze-800); } /* -- Comments thread inside lightbox ------------------------ */ /* Two shapes covered by the same rules: 1) Current code: thread rendered inline INSIDE the lightbox card, scrolling with the card content. 2) Forward-compat: thread mounted as a side panel (.photo-comments-panel) on the LTR right / RTL left edge. Visual treatment is identical; only positioning differs. */ .arbah-v1 .photo-comments { font-family: var(--arbah-font-sans); } .arbah-v1 .photo-comments-author { font-family: var(--arbah-font-sans); font-weight: 600; font-size: var(--arbah-text-sm); color: var(--arbah-navy-700); } .arbah-v1 .photo-comments-body { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); color: var(--arbah-text); } .arbah-v1 .photo-comments-timestamp { font-family: var(--arbah-font-sans); font-size: var(--arbah-text-xs); color: var(--arbah-text-muted); } .arbah-v1 .photo-comments-divider, .arbah-v1 .photo-comments .photo-comment + .photo-comment { border-top: 1px solid var(--arbah-border); } .arbah-v1 .photo-comments input[type="text"], .arbah-v1 .photo-comments textarea { background: var(--arbah-surface); border: 1px solid var(--arbah-border); border-radius: var(--arbah-radius-md); padding: var(--arbah-space-2) var(--arbah-space-3); font-family: var(--arbah-font-sans); font-size: var(--arbah-text-sm); color: var(--arbah-text); } .arbah-v1 .photo-comments input:focus, .arbah-v1 .photo-comments textarea:focus { border-color: var(--arbah-navy-700); box-shadow: var(--arbah-focus-ring-glow); outline: none; } /* Forward-compat side panel — not yet in markup. LTR: right edge; RTL: left edge (via inset-inline-end). */ .arbah-v1 .photo-comments-panel { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(400px, 100vw); background: var(--arbah-surface); border-inline-start: 1px solid var(--arbah-border); z-index: 60; overflow-y: auto; } /* -- Mobile (375x812 anchor) -------------------------------- */ @media (max-width: 640px) { .arbah-v1 .photos-grid { grid-template-columns: repeat(2, 1fr); gap: var(--arbah-space-2); } /* Lightbox fullscreen on phone — the current implementation already fills the viewport via fixed inset-0; the card inside collapses to the full width with no rounded corners. */ .arbah-v1 .photo-lightbox .photo-lightbox-card { border-radius: 0; max-width: 100vw; width: 100vw; } /* Comments slide up from the bottom on phone (sheet pattern). */ .arbah-v1 .photo-comments-panel { inset-inline: 0; top: auto; bottom: 0; width: 100vw; height: 60vh; border-inline-start: none; border-top: 1px solid var(--arbah-border); } } /* -- AR / RTL ----------------------------------------------- */ /* Plex Sans Arabic is first in --arbah-font-sans, so AR contexts pick it up automatically. Layout flips for the side panel use logical properties (inset-inline-*) so [dir="rtl"] is honored without per-rule overrides. */