/* ============================================================================ FrameSelect — application stylesheet One system, themed per-tenant by the injected --brand custom property. ========================================================================== */ :root { --brand: #0a7c6e; /* overridden per photographer in */ --ink: #0f1824; --ink-2: #2d3a4a; --ink-3: #5c6b7a; --ink-4: #98a5b3; --bg: #eef1f6; --page: #ffffff; --rule: #dde1eb; --rule-2: #c8cdd9; --del: #c0392b; --del-bg: rgba(192, 57, 43, 0.08); --keep: #1a7a3c; --amber: #b76e0c; --amber-bg: rgba(183, 110, 12, 0.1); --radius: 10px; --radius-sm: 6px; --shadow: 0 2px 12px rgba(15, 24, 36, 0.08); --shadow-lg: 0 8px 30px rgba(15, 24, 36, 0.16); --sans: 'Inter', system-ui, -apple-system, sans-serif; --serif: 'IBM Plex Serif', Georgia, serif; --statsbar-h: 76px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Author display rules on .modal/.lightbox/etc. would otherwise beat the UA [hidden] rule; this keeps the `hidden` attribute authoritative everywhere. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; min-height: 100vh; } img { max-width: 100%; display: block; } a { color: var(--brand); } code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.85em; } body.centered { display: flex; align-items: center; justify-content: center; padding: 24px; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; cursor: pointer; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--page); color: var(--ink); text-decoration: none; transition: transform 0.05s, filter 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .btn:active { transform: translateY(1px); } .btn--brand { background: var(--brand); color: #fff; } .btn--brand:hover { filter: brightness(1.07); } .btn--del { background: var(--del); color: #fff; } .btn--del:hover { filter: brightness(1.07); } .btn--ghost { background: transparent; border-color: var(--rule-2); color: var(--ink-2); } .btn--ghost:hover { background: rgba(0, 0, 0, 0.03); } .btn--block { width: 100%; } .btn--lg { padding: 15px 30px; font-size: 16px; } .btn--sm { padding: 7px 13px; font-size: 13px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; } /* ── Cards / forms ───────────────────────────────────────────────────────── */ .card { background: var(--page); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; width: 100%; max-width: 540px; } .card--narrow { max-width: 400px; text-align: left; } .card__title { font-family: var(--serif); font-size: 22px; font-weight: 700; margin-bottom: 6px; } .muted { color: var(--ink-3); } .small { font-size: 12.5px; } .center { text-align: center; } .form { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; } .form-row { display: flex; gap: 14px; flex-wrap: wrap; } .form-row .field { flex: 1; min-width: 180px; } .field { display: flex; flex-direction: column; gap: 5px; } .field__label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .field__input { font: inherit; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); background: #fff; color: var(--ink); width: 100%; } .field__input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); } .field__input--color { height: 44px; padding: 4px; } .field--checkbox { flex-direction: row; align-items: center; gap: 8px; } .alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-top: 14px; } .alert--error { background: var(--del-bg); color: #7a231a; border: 1px solid rgba(192, 57, 43, 0.25); } .alert--ok { background: rgba(26, 122, 60, 0.1); color: #14602f; border: 1px solid rgba(26, 122, 60, 0.25); } .error-status { font-family: var(--serif); font-size: 46px; font-weight: 700; color: var(--brand); } /* ── Brand mark ──────────────────────────────────────────────────────────── */ .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .brand__logo { position: relative; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } /* Logo image overlays the initials; if it fails/absent, initials show through. */ .brand__logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .brand__initials { font-weight: 700; font-size: 18px; letter-spacing: 0.5px; } .brand__name { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--ink); } .brand__meta { font-size: 12.5px; color: var(--ink-3); } /* ── Cover page ──────────────────────────────────────────────────────────── */ .gallery-theme { background: #f7f8fb; } /* Two-section cover: content left, cover photo right. Fixed to the viewport — the page never scrolls and the cover image fills its area (centered, cropped to fit, no letterboxing). */ .cover-page { height: 100vh; height: 100dvh; overflow: hidden; } .cover-split { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(320px, 1fr) 1.1fr; } .cover-split__content { display: flex; align-items: center; padding: 48px; overflow-y: auto; } .cover-split__inner { max-width: 460px; } .cover-split__media { position: relative; overflow: hidden; background: #0d1520; } .cover-split__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cover-split__media--placeholder { background: linear-gradient(135deg, var(--brand), #0d1520); } @media (max-width: 820px) { .cover-split { grid-template-columns: 1fr; grid-template-rows: 42dvh 1fr; } .cover-split__media { order: -1; } .cover-split__content { padding: 22px 22px 28px; } } .cover__title { font-family: var(--serif); font-size: clamp(26px, 5vw, 40px); font-weight: 700; margin: 16px 0 6px; } .cover__date { color: var(--ink-3); font-size: 15px; } .cover__unlocked { display: inline-block; margin-top: 12px; padding: 5px 14px; border-radius: 999px; background: rgba(26, 122, 60, 0.1); color: var(--keep); font-size: 13px; font-weight: 600; } .cover__lead { color: var(--ink-2); font-size: 16px; margin: 16px 0 28px; line-height: 1.7; } /* ── Gallery app ─────────────────────────────────────────────────────────── */ .gallery-app { padding-bottom: 24px; } .g-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); padding: 10px 16px; } .g-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .g-brand-link { text-decoration: none; display: inline-flex; border-radius: 12px; } .g-brand-link .brand { margin-bottom: 0; } .g-bar__right { display: flex; align-items: center; gap: 14px; } /* Stats moved into the header (change 5): Remaining / Total big, deleted small */ .g-stats { text-align: right; line-height: 1.1; } .g-stats__main { font-family: var(--mono, ui-monospace); font-weight: 700; font-size: 20px; color: var(--ink); } .g-stats__sep { color: var(--ink-4); margin: 0 2px; font-weight: 500; } #stat-remaining { color: var(--keep); } .g-stats__sub { font-size: 11px; color: var(--del); margin-top: 1px; } .g-stats__sub #stat-deleted { font-weight: 700; } /* Toggle switch (change 8) */ .switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch__track { width: 38px; height: 22px; border-radius: 999px; background: var(--rule-2); position: relative; transition: background 0.15s; flex-shrink: 0; } .switch__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.15s; } .switch input:checked + .switch__track { background: var(--brand); } .switch input:checked + .switch__track .switch__thumb { transform: translateX(16px); } .switch input:focus-visible + .switch__track { outline: 2px solid var(--brand); outline-offset: 2px; } .switch__label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; } .g-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .g-tabs::-webkit-scrollbar { display: none; } .g-tab { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule-2); background: #fff; color: var(--ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .g-tab--active { background: var(--brand); color: #fff; border-color: var(--brand); } .g-tab__count { opacity: 0.7; font-weight: 500; margin-left: 4px; } .g-main { padding: 0; max-width: none; margin: 0; } .g-advisory { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13.5px; margin: 8px; background: var(--amber-bg); color: #6b4106; border: 1px solid rgba(183, 110, 12, 0.3); } .g-advisory--danger { background: var(--del-bg); color: #7a231a; border-color: rgba(192, 57, 43, 0.3); } .g-advisory--done { background: rgba(26,122,60,0.1); color: #14602f; border-color: rgba(26,122,60,0.3); } /* Full-bleed masonry via grid row-spans: photos keep their real aspect ratio (masonry look) but flow row-by-row, so "Load more" only appends and never rearranges photos already on screen. 5 columns on desktop, 2 on mobile. */ .g-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 8px; gap: 4px; align-content: start; } @media (max-width: 640px) { .g-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; } } .photo { position: relative; overflow: hidden; border-radius: 0; background: var(--rule); cursor: pointer; user-select: none; grid-row-end: span 22; /* placeholder until JS sets the real span */ } .photo__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s, filter 0.15s; } .photo__img[data-loaded='false'] { opacity: 0; } .photo--deleted .photo__img { opacity: 0.45; filter: grayscale(0.7); } .photo__badge { position: absolute; top: 6px; left: 6px; background: var(--del); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 4px; letter-spacing: 0.3px; opacity: 0; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s; } .photo--deleted .photo__badge { opacity: 1; transform: none; } /* Delete button (change 3) — always visible on touch, on hover for pointer */ .photo__delete { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 8px; border: none; background: rgba(13, 21, 32, 0.5); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s; } .photo:hover .photo__delete, .photo:focus-within .photo__delete { opacity: 1; } @media (hover: none) { .photo__delete { opacity: 0.9; } } .photo--deleted .photo__delete { background: var(--del); opacity: 1; } .g-grid--hide-deleted .photo--deleted { display: none; } .g-grid--locked .photo__delete { display: none; } /* Sharing (view-only) mode: no selection chrome anywhere. */ .gallery-app--sharing .photo__delete, .gallery-app--sharing .photo__badge, .gallery-app--sharing #g-submit, .gallery-app--sharing #lb-toggle, .gallery-app--sharing .switch { display: none !important; } .field__input--error { border-color: var(--del); outline-color: var(--del); } .g-loading { text-align: center; color: var(--ink-3); padding: 40px; } .g-loadmore { text-align: center; padding: 20px; column-span: all; } @media (max-width: 640px) { .g-bar__right { gap: 10px; } .g-brand-link .brand__logo { width: 40px; height: 40px; } .g-stats__main { font-size: 17px; } .switch__label { font-size: 11.5px; } /* keep the label — logo-only frees space */ } /* ── Stats bar ───────────────────────────────────────────────────────────── */ .statsbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; height: var(--statsbar-h); background: #0d1520; color: #fff; display: flex; align-items: center; padding: 0 10px; gap: 4px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18); padding-bottom: env(safe-area-inset-bottom); } .statsbar__seg { flex: 1; text-align: center; padding: 0 4px; } .statsbar__val { display: block; font-size: 20px; font-weight: 700; line-height: 1.1; } .statsbar__lbl { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.55); } .statsbar__seg--del .statsbar__val { color: #fca5a5; } .statsbar__seg--keep .statsbar__val { color: #86efac; } .statsbar__submit { flex-shrink: 0; margin-left: 6px; } /* ── Lightbox ────────────────────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(8, 12, 18, 0.94); display: flex; align-items: stretch; justify-content: center; flex-direction: column; } /* Figure fills the whole area between top and the action bar, so pinch-zoom and pan can use the entire screen — not just the image's own box (change 7). */ .lightbox__figure { position: relative; flex: 1; width: 100vw; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: none; /* we handle pinch/pan/swipe ourselves */ overflow: hidden; } .lightbox__img { max-width: 100vw; max-height: 100%; object-fit: contain; border-radius: 6px; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; } .lightbox__deleted-flag { position: absolute; top: 12px; left: 12px; background: var(--del); color: #fff; padding: 5px 11px; border-radius: 5px; font-size: 12px; font-weight: 700; } /* Controls sit ABOVE the (zoomable) image so they stay clickable when zoomed. */ .lightbox__figure { z-index: 1; } .lightbox__close { position: absolute; top: 14px; right: 16px; z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: rgba(13, 21, 32, 0.6); color: #fff; font-size: 28px; line-height: 44px; text-align: center; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; background: rgba(13, 21, 32, 0.55); border: none; color: #fff; font-size: 34px; width: 52px; height: 72px; cursor: pointer; border-radius: 8px; } .lightbox__nav--prev { left: 10px; } .lightbox__nav--next { right: 10px; } .lightbox__actions { position: relative; z-index: 20; flex-shrink: 0; padding: 14px 16px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .lightbox__name { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 13px; color: rgba(255, 255, 255, 0.75); word-break: break-all; } /* ── Modal ───────────────────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 60; background: rgba(8, 12, 18, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal__box { background: var(--page); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px; width: 100%; max-width: 440px; } .modal__title { font-family: var(--serif); font-size: 20px; font-weight: 700; margin-bottom: 10px; } .modal__summary { color: var(--ink-2); margin-bottom: 16px; line-height: 1.6; } .modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } .move-breakdown { list-style: none; margin: 6px 0 4px; font-size: 13.5px; color: var(--ink-2); } .move-breakdown li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--rule); } /* ── Submitted banner ────────────────────────────────────────────────────── */ .submitted-banner { position: fixed; bottom: calc(var(--statsbar-h) + 14px); left: 50%; transform: translateX(-50%); z-index: 40; background: var(--keep); color: #fff; padding: 10px 20px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 8px; } .submitted-banner__check { font-size: 18px; } /* ── Admin / platform chrome ─────────────────────────────────────────────── */ .admin-theme, .platform-theme { background: var(--bg); } .a-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: #0d1520; color: #fff; } .a-top__brand { display: flex; align-items: center; gap: 12px; } .a-top .brand { margin-bottom: 0; } .a-top .brand__name { color: #fff; } .a-top__title { font-weight: 600; } .a-back { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 14px; } .a-nav { display: inline-flex; gap: 4px; margin-left: 18px; } .a-nav a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; padding: 4px 10px; border-radius: 5px; } .a-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); } .a-nav a.on { color: #fff; background: rgba(255,255,255,0.14); } /* Ghost buttons in the dark top bar (Sign out) need light text to be legible. */ .a-top .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); } .a-top .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); } .a-wrap { max-width: 1000px; margin: 0 auto; padding: 24px 20px 60px; } .a-actions { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .a-h1 { font-family: var(--serif); font-size: 24px; font-weight: 700; } .empty { background: var(--page); border: 1px dashed var(--rule-2); border-radius: var(--radius); padding: 40px; text-align: center; color: var(--ink-3); } .a-table-wrap { overflow-x: auto; background: var(--page); border-radius: var(--radius); box-shadow: var(--shadow); } .a-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; } .a-table th { text-align: left; padding: 12px 14px; background: #f5f7fa; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .a-table td { padding: 12px 14px; border-top: 1px solid var(--rule); vertical-align: top; } .a-link { font-weight: 600; text-decoration: none; } .pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .pill--open { background: var(--amber-bg); color: var(--amber); } .pill--submitted { background: rgba(29, 78, 216, 0.1); color: #1d4ed8; } .pill--done { background: rgba(26, 122, 60, 0.12); color: var(--keep); } .pill--warn { background: var(--del-bg); color: var(--del); } .num { font-weight: 700; } .num--del { color: var(--del); } .num--keep { color: var(--keep); } /* Panels (event detail) */ .a-event { display: flex; flex-direction: column; gap: 18px; } .panel { background: var(--page); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; } .panel--accent-del { border-left: 4px solid var(--del); } .panel__title { font-family: var(--serif); font-size: 18px; font-weight: 700; margin-bottom: 10px; } .kv { display: flex; gap: 12px; padding: 5px 0; align-items: baseline; } .kv__k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-4); min-width: 100px; } .kv__v { word-break: break-all; } .stat-cards { display: flex; gap: 14px; margin: 6px 0 4px; flex-wrap: wrap; } .stat-card { background: var(--bg); border-radius: var(--radius-sm); padding: 14px 20px; min-width: 130px; } .stat-card__v { font-size: 28px; font-weight: 700; line-height: 1; } .stat-card__l { font-size: 12px; color: var(--ink-3); margin-top: 4px; } /* Ads list/detail (admin 2) */ .a-wrap--narrow { max-width: 640px; } .a-table__lead { display: flex; align-items: center; gap: 10px; } .a-thumb { width: 72px; height: 28px; object-fit: cover; border-radius: 4px; border: 1px solid var(--rule); background: #f5f7fa; } .a-table__act { text-align: right; white-space: nowrap; } .kv2 { display: flex; gap: 12px; padding: 6px 0; align-items: baseline; } .kv2 b { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-4); min-width: 90px; font-weight: 600; } .field__hint { font-size: 11px; color: var(--ink-3); margin-top: 4px; } .upload-details { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 12px; } .upload-details summary { cursor: pointer; color: var(--ink-2); font-size: 14px; } .move-progress { margin-top: 16px; } .progressbar { height: 10px; background: var(--rule); border-radius: 999px; overflow: hidden; } .progressbar__fill { height: 100%; width: 0; background: var(--brand); transition: width 0.2s; } /* Platform */ .platform-logo { font-family: ui-monospace, monospace; font-weight: 700; font-size: 20px; color: var(--ink); margin-bottom: 8px; } .platform-logo span { color: var(--brand); } .platform-logo--sm { font-size: 15px; margin-bottom: 0; color: #fff; } .platform-logo--sm span { color: #4db9ab; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .ph-card { background: var(--page); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; border-top: 3px solid var(--card-accent, var(--brand)); } .ph-card__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .ph-card__logo { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--card-accent, var(--brand)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .ph-card__logo img { width: 100%; height: 100%; object-fit: cover; } .ph-card__name { font-family: var(--serif); font-weight: 700; font-size: 16px; } .ph-card__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin-bottom: 12px; } /* Event tiles on the studio dashboard (mirrors the photographer cards). */ .ev-card { background: var(--page); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; border-top: 3px solid var(--brand); display: flex; flex-direction: column; gap: 6px; } .ev-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .ev-card__title { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; } .ev-card__title:hover { color: var(--brand); } .ev-card__slug { font-family: ui-monospace, monospace; } .ev-card__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-top: 4px; } .ev-card__stats { font-size: 13px; color: var(--ink-2); margin: 4px 0 8px; } .ev-card .btn-row { margin-top: auto; }