/* ============================================
Studio + Site — Joanna Aplin Fine Art
Design: soft cream surfaces, teal accent,
gallery-quality typography, generous whitespace
============================================ */
/* App headings: every weight resolves to the Bold file, so a heading can
never fall back to Nexa Light. Public sites keep the real "Nexa" family. */
@font-face { font-family: "Nexa Display"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/NexaTextDemo-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nexa Display"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/NexaTextDemo-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nexa Display"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/NexaTextDemo-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nexa Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/NexaTextDemo-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nexa Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/NexaTextDemo-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nexa Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/NexaTextDemo-Bold.woff2") format("woff2"); }
/* Nexa Text — self-hosted woff2 (same files joannaaplin.com uses). */
@font-face {
font-family: "Nexa";
font-weight: 300;
font-style: normal;
font-display: swap;
src: url("fonts/NexaTextDemo-Light.woff2") format("woff2");
}
@font-face {
font-family: "Nexa";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("fonts/NexaTextDemo-Light.woff2") format("woff2");
}
@font-face {
font-family: "Nexa";
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("fonts/NexaTextDemo-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Nexa";
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("fonts/NexaTextDemo-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Nexa";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("fonts/NexaTextDemo-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Nexa";
font-weight: 800;
font-style: normal;
font-display: swap;
src: url("fonts/NexaTextDemo-Bold.woff2") format("woff2");
}
:root {
/* Palette — light mode (soft cream + teal) */
--bg: #fcfaf7;
--surface: #F8F5EE;
/* Brand marks: Light Black on light UI, Neo Pearl on dark UI. */
--brand-ink: #2B2F2D;
--surface-2: #F8F5EE;
--surface-3: #e6e2d8;
--surface-elev: #fcfaf7;
--border: #e1ddd2;
--border-soft: #ece8dc;
--ink: #2B2F2D;
--ink-soft: #4a504c;
--ink-mute: #7a7e78;
--ink-inverse: #F8F5EE;
--accent: #933994; /* dark fuchsia */
--accent-soft: rgba(147, 57, 148, 0.18);
--accent-ink: #F8F5EE;
--green: #228B22;
--amber: #FFD700;
--rose: #2B2F2D;
--field-bg: #F8F5EE;
--bg-2: #f1ece2;
--surface-soft: #f2efe7;
/* Type */
--font-display: "General Sans", "Helvetica Neue", Arial, sans-serif;
--font-ui: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Scale */
--text-xs: 11px;
--text-sm: 13px;
--text-base: 14.5px;
--text-md: 16px;
--text-lg: 20px;
--text-xl: 28px;
--text-2xl: 40px;
--text-hero: 56px;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--shadow-sm: 0 1px 2px rgba(31, 36, 33, 0.04), 0 1px 1px rgba(31, 36, 33, 0.03);
--shadow-md: 0 6px 20px rgba(31, 36, 33, 0.06), 0 2px 6px rgba(31, 36, 33, 0.04);
--shadow-lg: 0 18px 40px rgba(31, 36, 33, 0.10);
--transition: 180ms cubic-bezier(.2,.7,.2,1);
}
[data-theme="dark"] {
/* Light Black (#2B2F2D) is the sidebar/surface. The page sits a shade
darker so surfaces separate cleanly. */
--bg: #232726;
--surface: #2B2F2D;
--brand-ink: #F8F5EE;
--surface-2: #242424;
--surface-3: #303030;
--surface-elev: #262626;
--border: #4d5453;
--border-soft: #3e4443;
--ink: #F8F5EE;
--ink-soft: #b9b6ac;
--ink-mute: #87867f;
--ink-inverse: #2B2F2D;
/* Dark Fuchsia lightened so it holds up against the charcoal page. */
--accent: #C071C1;
--accent-soft: rgba(192, 113, 193, 0.22);
--accent-ink: #0e1a18;
--green: #228B22;
--amber: #FFD700;
--rose: #F8F5EE;
--field-bg: #343833;
--bg-2: #343833;
--surface-soft: #242424;
}
/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-ui);
font-size: var(--text-base);
color: var(--ink);
background: var(--bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
/* ----- Shell ----- */
.shell {
display: grid;
grid-template-columns: 152px 1fr;
min-height: 100vh;
transition: grid-template-columns 220ms ease;
}
.shell.sidebar-collapsed {
/* 64px = 12px padding + 40px nav-item pill + 12px padding — perfectly centers
the icon column and gives the "F" wordmark room to render without clipping. */
grid-template-columns: 64px 1fr;
}
/* ----- Sidebar ----- */
.sidebar {
/* Brand red field in both expanded and collapsed states. */
background: #EF4244;
border-right: 0;
padding: 22px 10px 22px;
display: flex;
flex-direction: column;
gap: var(--space-4);
position: sticky; top: 0; height: 100vh;
overflow: hidden;
}
/* Sidebar header: brand mark + name, then artist sub-line */
.sidebar-head { display: flex; flex-direction: column; gap: 6px; overflow: visible; flex-shrink: 0; }
/* Sidebar collapse toggle — v43: lives in sidebar-foot as a ghost button */
/* Sidebar collapse toggle: show Open icon (arrow pointing left) when expanded,
show Closed icon (arrow pointing right) when collapsed. */
.sidebar-toggle-closed { display: none; }
.shell.sidebar-collapsed .sidebar-toggle-open { display: none; }
.shell.sidebar-collapsed .sidebar-toggle-closed { display: inline-flex; }
.brand {
display: flex; align-items: center; gap: 10px;
overflow: visible;
color: var(--accent);
min-width: 0;
/* Left padding matches .nav-item (12px) so the "Folio" wordmark aligns
vertically with the icon column below. Collapse logic untouched. */
padding: 0 2px 0 12px;
}
.brand-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-mark svg { width: 30px; height: 30px; }
.brand-name {
font-family: var(--font-display);
font-size: 28px; font-weight: 600; line-height: 1.1;
display: flex; align-items: center;
min-height: 58px;
color: var(--ink);
white-space: nowrap;
overflow: visible;
text-overflow: ellipsis;
}
.brand-name-mini { display: none; }
.brand-wordmark {
display: block;
height: 52px;
width: auto;
fill: var(--brand-ink);
margin: 0 0 0 -1px;
overflow: visible;
}
.shell.sidebar-collapsed .brand-wordmark { display: none; }
.brand-brandmark {
display: none;
height: 34px;
width: auto;
fill: var(--brand-ink);
margin: 0;
overflow: visible;
}
.shell.sidebar-collapsed .brand-brandmark { display: block; height: 40px; }
.shell.sidebar-collapsed .brand { padding: 0; justify-content: center; }
.shell.sidebar-collapsed .brand-name { justify-content: center; width: 100%; }
.brand-sub {
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 2px;
}
.nav { display: flex; flex-direction: column; gap: 0; margin: auto 0; width: 100%; }
@media (min-width: 861px) {
.nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 12px;
right: 12px;
width: auto;
margin: 0;
}
}
/* Sidebar nav items: 16px icon at a fixed left position. When the rail
collapses, padding stays the same so the icon never moves — only the
label fades and gets clipped by the shrinking sidebar. */
.nav-item {
text-align: left;
background: transparent; border: 0;
padding: 6px 10px;
border-radius: var(--radius-md);
color: var(--ink-soft);
font-size: 13px;
font-weight: 500;
transition: background var(--transition), color var(--transition);
display: flex; align-items: center;
gap: 10px;
white-space: nowrap;
overflow: hidden;
height: 34px;
box-sizing: border-box;
width: 100%;
min-width: 0;
}
.nav-item .nav-icon {
width: 16px; height: 16px;
flex: 0 0 16px;
}
.nav-label {
opacity: 1;
transition: opacity 140ms ease;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.nav-icon { flex-shrink: 0; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.is-active {
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
}
.sidebar-foot { display: flex; flex-direction: column; gap: 0; margin-top: auto; width: 100%; padding-left: 2px; }
.shell.sidebar-collapsed .sidebar-foot { padding-left: 0; }
.sidebar .sidebar-foot .btn-ghost { padding-left: 10px; padding-right: 10px; }
.sidebar-foot .btn-ghost, .sidebar-foot .nav-item { height: 22px; padding-top: 2px; padding-bottom: 2px; }
/* Collapsed state — thin icon-only rail.
Key idea (ElevenLabs-style): nav-item padding stays the same so the icon
never moves. The sidebar width shrinks around the icon and the label
fades + clips. Active pill is trimmed so it doesn't bleed past the rail. */
.shell.sidebar-collapsed .sidebar { padding: 22px 12px 22px; }
/* Red sidebar: Neo Pearl marks, icons and labels; Dark Fuchsia brandmark. */
.sidebar .brand-wordmark { fill: #F8F5EE; }
.sidebar .brand-brandmark { fill: #933994; }
/* The collapse icon draws its door on the left of its box, so nudge it right
to optically centre with the other icons. */
.sidebar-toggle-icon { transform: translateX(2.5px); }
/* Second shape group in the mark takes Neo Pearl (CSS beats the inline attr). */
.sidebar .brand-brandmark path:nth-of-type(2) { fill: #F8F5EE; }
.sidebar .nav-item,
.sidebar .btn-ghost,
.sidebar .nav-icon,
.sidebar #theme-toggle {
color: #F8F5EE;
}
.sidebar .nav-item svg,
.sidebar .btn-ghost svg { color: #F8F5EE; }
.sidebar .nav-item:hover,
.sidebar .btn-ghost:hover {
background: rgba(248, 245, 238, 0.16);
color: #F8F5EE;
}
.sidebar .nav-item.is-active {
background: transparent;
color: #F8F5EE;
font-weight: 600;
}
.sidebar .btn-ghost.is-active {
background: transparent;
color: #F8F5EE;
font-weight: 600;
}
/* Active nav swaps its outline icon for a solid one. Cut-out details
(the plus, the magnifier, the site graphic) are painted in the sidebar
colour so they read as knocked out of the solid shape. */
.sidebar { --nav-knockout: #EF4244; }
.nav-icon-solid { display: none; }
.nav-item.is-active .nav-icon-outline,
.sidebar .btn-ghost.is-active .nav-icon-outline { display: none; }
.nav-item.is-active .nav-icon-solid,
.sidebar .btn-ghost.is-active .nav-icon-solid { display: inline-flex; }
.nav-icon-solid .st1 { fill: var(--nav-knockout); }
/* Outline icons carry a 1.5 stroke that sits half outside the path, so the
solid bodies get the same stroke to keep both states the same size. */
.nav-icon-solid [fill="currentColor"] {
stroke: currentColor; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
}
.sidebar .nav-item.is-active .nav-icon,
.sidebar .btn-ghost.is-active .nav-icon { color: #F8F5EE; }
.sidebar .btn-ghost.is-active .nav-icon,
.sidebar .btn-ghost.is-active svg { color: #F8F5EE; }
.shell.sidebar-collapsed .nav-item,
.shell.sidebar-collapsed .btn-ghost {
width: 40px;
}
/* Brand padding stays identical in collapsed state so the F doesn't shift. */
.shell.sidebar-collapsed .brand-name-full { display: none; }
.shell.sidebar-collapsed .brand-name-mini { display: block; }
.shell.sidebar-collapsed .brand-sub { display: none; }
.shell.sidebar-collapsed .nav-label,
.shell.sidebar-collapsed .btn-ghost .nav-label,
.shell.sidebar-collapsed #theme-toggle .nav-label {
opacity: 0;
pointer-events: none;
/* keep flex/width untouched so the icon's left position is stable */
}
.btn-ghost {
background: transparent; border: 0;
text-align: left;
padding: 6px 12px;
border-radius: var(--radius-md);
color: var(--ink-mute);
font-size: var(--text-xs);
letter-spacing: 0.02em;
display: flex; align-items: center; gap: 10px;
height: 28px;
box-sizing: border-box;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.btn-ghost > .nav-icon,
.btn-ghost > .theme-icon {
flex: 0 0 16px;
width: 16px; height: 16px;
}
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn-ghost.is-active { color: var(--accent); background: var(--accent-soft); }
.theme-icon {
font-size: 16px;
width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
line-height: 1;
}
/* Theme toggle: show light icon in light mode, dark icon in dark mode.
Uses !important to survive the mobile `.nav-icon { display: inline-flex }`
override at ~line 5865 which would otherwise force both icons visible. */
.theme-icon-dark { display: none !important; }
:root[data-theme="dark"] .theme-icon-light { display: none !important; }
:root[data-theme="dark"] .theme-icon-dark { display: inline-flex !important; }
:root:not([data-theme="dark"]) .theme-icon-light { display: inline-flex !important; }
.pending-pill {
font-size: var(--text-xs);
padding: 6px 10px;
background: var(--accent-soft);
color: var(--accent);
border-radius: 999px;
text-align: center;
font-weight: 500;
}
/* ----- Main ----- */
.main {
min-width: 0;
display: flex; flex-direction: column;
padding-top: 76px; /* clearance for fixed auth bar */
}
/* Kicker still used inside section heads */
.kicker {
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mute);
}
/* Inline search pill — used in Artworks + Studio editor headers (v42) */
.search-pill {
display: inline-flex; align-items: center; gap: var(--space-2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 14px;
color: var(--ink-mute);
min-width: 240px;
}
.search-pill svg { flex-shrink: 0; }
.search-pill input {
border: 0;
background: transparent;
outline: none;
color: var(--ink);
font-size: var(--text-sm);
width: 100%;
padding: 0;
}
.search-pill input::placeholder { color: var(--ink-mute); }
.section-head-actions {
display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
/* ----- Views ----- */
.view {
padding: var(--space-4) var(--space-6) var(--space-6);
max-width: 1320px;
width: 100%;
margin-inline: auto;
}
/* Library header inside Studio editor (kicker + search pill, v44) */
.library-head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-3); flex-wrap: wrap;
margin-bottom: var(--space-3);
}
/* ----- Common: section header ----- */
.section-head { margin-bottom: var(--space-4); }
.section-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-head-row > a.btn { flex-shrink: 0; align-self: flex-start; margin-top: 4px; }
.section-kicker {
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mute);
}
.section-title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 600;
color: var(--ink);
margin: 4px 0 0 0;
line-height: 1.08;
letter-spacing: -0.01em;
}
.section-sub {
color: var(--ink-soft);
margin-top: 6px;
max-width: 60ch;
}
/* ----- Cards / panels ----- */
.panel {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.panel-elev {
background: var(--surface-elev);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
}
/* ----- KPIs ----- */
.kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-6);
}
@media (max-width: 980px) {
.kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.kpi {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
display: flex; flex-direction: column; gap: 6px;
}
.kpi-label {
font-size: var(--text-xs);
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.kpi-value {
font-family: var(--font-ui);
font-size: 34px;
font-weight: 600;
color: var(--ink);
line-height: 1;
letter-spacing: -0.01em;
}
.kpi-foot {
font-size: var(--text-xs);
color: var(--ink-mute);
}
/* ----- Buttons ----- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
padding: 10px 16px;
border-radius: 999px;
font-size: var(--text-sm);
font-weight: 500;
border: 1px solid transparent;
background: var(--surface-2);
color: var(--ink);
/* App-wide button motion: radius snaps instantly to 0, scale + colors ease. */
transition:
transform 0.3s ease,
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
will-change: transform;
cursor: pointer;
}
.btn:hover:not(:disabled) {
border-radius: 0;
transform: scale(1.06);
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.btn-primary {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
background: transparent;
color: var(--accent);
border-color: var(--accent);
}
/* ----- Save Work — inherits app-wide hover; adds Saved success state ----- */
.btn-save-work { position: relative; }
/* Cancel button inside the crop modal sits on a permanently dark background.
Force white hover treatment so border/text stay visible against the dark
overlay regardless of the app's theme. The modal Save button uses
.btn-save-work and inherits the app-wide Save Work treatment 1:1. */
.fc-overlay .btn-outline:hover:not(:disabled) {
background: transparent;
color: #fcfaf7;
border-color: #fcfaf7;
}
/* Saved state — holds the hovered square + scale, swaps to black/white.
box-sizing locked + flex centering guarantees zero geometry shift when
the inner text swaps from "Save Work"/"Save Settings" to "Saved".
Applied to any button using showSaveSuccess() — Save Work, Save Settings,
and the Adjust Image modal's Save button (which also carries
.btn-save-work for identical motion). */
/* One rule for every save button in the app, whatever else it's classed as —
Save Work, Save Settings, the Adjust Image modal, the Alternative Text
dialog. !important so a .btn-primary/.btn variant can never leave the pill
green. */
.btn.is-saved,
.btn-save-work.is-saved,
.btn-save-settings.is-saved {
/* Not !important: showSaveSuccess() sets an inline pill radius for a single
frame as the starting point of the round-to-square ease in dialogs. */
border-radius: 0;
padding-left: 16px !important;
padding-right: 16px !important;
transform: scale(1.06);
background: #000000 !important;
border-color: #000000 !important;
color: #fcfaf7 !important;
opacity: 1 !important;
cursor: default;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* The Adjust Image modal's footer is itself near-black, so give the pill a thin
light edge there to keep it readable. */
.fc-overlay .btn.is-saved,
.fc-overlay .btn-save-work.is-saved {
border-color: rgba(255, 255, 255, 0.35) !important;
}
/* Dialog-only: fade the "Saved" label in, matching the animated width. */
.modal-overlay .btn.is-saved .save-label,
.fc-overlay .btn.is-saved .save-label {
animation: saveLabelIn 260ms cubic-bezier(0.22, 0.75, 0.16, 1) both;
}
@keyframes saveLabelIn {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: none; }
}
.btn.is-saved .save-cloud,
.btn-save-work.is-saved .save-cloud,
.btn-save-settings.is-saved .save-cloud {
animation: saveCheckDraw 0.45s ease-out 0.08s both;
/* Explicit dimensions + flex-shrink: 0 prevents the SVG from collapsing to
zero width inside a flex container (a known quirk in some browsers). */
width: 18px;
height: 18px;
flex-shrink: 0;
color: #fcfaf7;
stroke: currentColor;
}
@keyframes saveCheckDraw {
0% { opacity: 0; transform: scale(0.55); }
60% { opacity: 1; transform: scale(1.15); }
100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.btn.is-saved .save-label,
.btn-save-work,
.btn.is-saved,
.btn.is-saved .save-cloud,
.btn-save-work.is-saved,
.btn-save-work.is-saved .save-cloud,
.btn-save-settings.is-saved,
.btn-save-settings.is-saved .save-cloud { animation: none; transition: none; }
}
.btn-outline {
background: transparent;
border-color: var(--border);
color: var(--ink);
}
.btn-outline:hover:not(:disabled) {
background: transparent;
border-color: var(--ink);
color: var(--ink);
}
.btn-danger {
background: var(--rose);
border-color: var(--rose);
color: var(--surface);
}
.btn-danger:hover:not(:disabled) {
background: transparent;
border-color: var(--rose);
color: var(--rose);
}
.btn-sm { padding: 6px 12px; font-size: var(--text-xs); }
/* ----- Working concept hero (Dashboard) ----- */
.concept-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
@media (max-width: 980px) {
.concept-grid { grid-template-columns: 1fr; }
}
.concept-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex; flex-direction: column; gap: var(--space-4);
}
.concept-h {
font-family: var(--font-display);
font-size: 56px;
font-weight: 600;
line-height: 1.02;
color: var(--ink);
margin: 8px 0 0;
letter-spacing: -0.015em;
}
@media (max-width: 980px) {
.concept-h { font-size: 42px; }
}
.concept-sub {
color: var(--ink-soft);
font-size: 16px;
}
.concept-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.concept-right {
display: flex;
flex-direction: column;
gap: var(--space-4);
align-self: start;
min-width: 0;
}
.concept-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
align-content: start;
}
.concept-stat {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
display: flex; flex-direction: column; gap: 6px;
}
.concept-stat .kpi-value { font-size: 34px; }
/* ----- Charts (Works by gallery) ----- */
.bar-row {
display: grid;
grid-template-columns: 130px 1fr 40px;
align-items: center;
gap: var(--space-3);
padding: 6px 0;
font-size: var(--text-sm);
}
.bar-label { color: var(--ink-soft); }
.bar-track {
height: 10px;
background: var(--surface-3);
border-radius: 999px;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 65%, var(--accent-soft)));
border-radius: 999px;
}
.bar-value { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
/* ----- Activity feed ----- */
.activity-item {
display: flex; justify-content: space-between; align-items: center;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
margin-bottom: var(--space-2);
}
.activity-item:last-child { margin-bottom: 0; }
.activity-meta { color: var(--ink-mute); font-size: var(--text-xs); }
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }
/* ----- Filters (Artworks) ----- */
.filter-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-5);
}
@media (max-width: 980px) { .filter-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .filter-bar { grid-template-columns: 1fr; } }
.field {
display: flex; flex-direction: column; gap: 4px;
}
.field label {
font-size: var(--text-xs);
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.input, .select, .textarea {
background: var(--field-bg);
border: 1px solid transparent;
border-radius: var(--radius-md);
padding: 9px 12px;
color: var(--ink);
font-size: var(--text-sm);
outline: 0;
transition: border-color var(--transition), box-shadow var(--transition);
}
/* Custom chevron for selects (replaces native arrow that crowds right edge) */
.select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 32px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px 12px;
}
[data-theme="dark"] .select {
background-image: url("data:image/svg+xml;utf8,");
}
/* Cap filter-bar select widths so they don't stretch the full column */
.filter-bar .select { max-width: 220px; width: 100%; }
.input:focus, .select:focus, .textarea:focus {
border-color: transparent;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .textarea::placeholder { color: #8d918b; }
.textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
/* Input prefix (e.g. $) — matches select option text rendering ($1.50) */
.input-prefix { position: relative; display: block; }
.input-prefix .input-prefix-symbol {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--ink);
font-size: var(--text-sm);
line-height: 1;
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.input-prefix .input.has-prefix {
/* 12px base padding + ~8px for the $ glyph, no extra gap */
padding-left: 20px;
width: 100%;
}
/* Counts/sort row */
.list-meta {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 40px;
color: var(--ink-soft);
font-size: var(--text-sm);
}
.list-meta .right { display: flex; gap: var(--space-3); align-items: center; }
/* ----- View toggle ----- */
.view-toggle {
display: inline-flex !important;
background: transparent;
border: 0;
border-radius: 6px;
padding: 0;
gap: 2px;
align-items: center;
}
.vt-btn {
display: inline-flex !important;
align-items: center; gap: 6px;
padding: 5px 10px;
min-height: 28px;
border: 0; background: transparent;
font: inherit; font-size: 13px; font-weight: 500; color: #6b6557;
border-radius: 6px;
cursor: pointer;
transition: background 140ms, color 140ms;
}
.vt-btn .vt-icon { flex: none; color: #8a8472; transition: color 140ms; }
.vt-btn:hover { background: rgba(0,0,0,0.04); color: #1f1d18; }
.vt-btn:hover .vt-icon { color: #4a4537; }
.vt-btn.is-active {
background: transparent;
color: #1f1d18;
font-weight: 600;
}
.vt-btn.is-active .vt-icon { color: #1f6feb; }
[data-theme="dark"] .view-toggle { background: transparent; border: 0; }
[data-theme="dark"] .vt-btn { color: #a8a397; }
[data-theme="dark"] .vt-btn .vt-icon { color: #8a8472; }
[data-theme="dark"] .vt-btn:hover { background: rgba(255,255,255,0.05); color: #e8e4d6; }
[data-theme="dark"] .vt-btn:hover .vt-icon { color: #cfc9b8; }
[data-theme="dark"] .vt-btn.is-active { background: transparent; color: #f4f0e2; }
[data-theme="dark"] .vt-btn.is-active .vt-icon { color: #4a90ff; }
/* ----- Artwork list view ----- */
.art-list {
display: flex; flex-direction: column;
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
background: var(--bg);
}
.art-list-head, .art-row {
display: grid;
/* thumb | Title (capped so slack flows to Created/Gallery) | Created | Gallery | Medium | Dimensions | Visibility | Status | Price */
grid-template-columns: 64px minmax(240px, 3fr) 80px 160px 170px 100px 76px 56px 76px;
gap: var(--space-3);
align-items: center;
padding: 10px var(--space-4);
}
/* Push Visibility chip and Status dot to right side of their cells so they sit close to Price */
.art-list-head > div:nth-child(7),
.art-row > div:nth-child(7) { text-align: right; }
.art-row > div:nth-child(7) { display: flex; justify-content: flex-end; }
.al-status-col { text-align: right; }
.art-row > div.al-status-col { display: flex; justify-content: flex-end; }
/* STATUS header: center the text horizontally over the right-aligned status dot.
Dot is right-aligned in a 60px column, so its center sits ~5px from the column's right edge.
We center the header text and translate it right so its center matches the dot's center. */
.art-list-head > div.al-status-col {
text-align: center;
overflow: visible;
/* (60px col / 2) - 5px (dot radius) = 25px shift right from column center to dot center */
transform: translateX(25px);
}
.art-list-head {
background: var(--surface-2);
border-bottom: 1px solid var(--border-soft);
font-size: var(--text-xs, 12px);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-soft);
padding-top: 12px; padding-bottom: 12px;
/* Stick to top of viewport while scrolling so column titles stay visible */
position: sticky;
top: 0;
z-index: 5;
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
.art-row:last-child {
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
overflow: hidden;
}
.art-list-head .right { text-align: right; }
.art-row {
border: 0; background: transparent;
text-align: left; font: inherit; color: var(--ink);
border-bottom: 1px solid var(--border-soft);
cursor: pointer;
transition: background var(--transition);
}
.art-row:last-child { border-bottom: 0; }
.art-row:hover { background: var(--surface); }
.art-row > div { font-size: var(--text-sm); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-row-thumb {
width: 56px; height: 56px;
flex: none;
}
.al-thumb {
width: 56px; height: 56px;
border-radius: var(--radius-sm, 6px);
background: transparent;
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.al-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.al-thumb.placeholder { background: linear-gradient(160deg, var(--surface-2), var(--surface-3)); }
.al-thumb.placeholder::before {
content: ""; position: absolute; inset: 5px;
border: 1px solid var(--border); border-radius: 3px;
}
.al-ph-title {
font-family: var(--font-display); font-style: italic;
font-size: 9px; line-height: 1.1;
color: var(--ink-soft);
text-align: center; padding: 4px;
position: relative;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.al-title {
font-family: var(--font-display);
font-size: var(--text-md, 15px); font-weight: 600;
color: var(--ink); line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-sub { font-size: var(--text-xs, 12px); color: var(--ink-soft); margin-top: 2px; }
.art-row-price { text-align: right; font-weight: 600; }
.chip-inline {
display: inline-block;
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
font-weight: 500;
letter-spacing: 0.02em;
}
/* Mobile list card layout matching the reference mockup.
Grid — 4 rows, 2 cols:
Row 1: thumb | title | price
Row 2: thumb | gallery | Public pill
Row 3: thumb | dimensions | status dot
Row 4: thumb | medium | .
Actual grid: thumb spans all rows on the left, middle 1fr grows,
right auto shrinks. */
@media (max-width: 720px) {
.art-list-head { display: none !important; }
.art-row {
display: grid !important;
grid-template-columns: 84px 1fr auto !important;
/* Fixed heights for consistent line rhythm on both columns */
/* Total = 25 + 20 + 20 + 20 = 85px content, plus 12px+12px padding
= 109px card height. Thumb (84px) fits, meta lines sit tight under
title and Medium row bottom aligns with thumb bottom. */
grid-template-rows: 25px 20px 20px 20px !important;
grid-template-areas:
"thumb title right"
"thumb gal right"
"thumb dim right"
"thumb med right" !important;
row-gap: 0 !important;
column-gap: 12px !important;
padding: 12px !important;
align-items: center !important;
}
/* Reset base child rule that clipped everything */
.art-row > div {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
min-width: 0 !important;
}
.art-row-thumb {
grid-area: thumb !important;
width: 84px !important;
height: 84px !important;
align-self: start !important;
}
.art-row-thumb .al-thumb,
.art-row-thumb .al-thumb img {
width: 84px !important;
height: 84px !important;
border-radius: 6px !important;
}
/* Title — row 1 left. Allow the display serif to overflow the 17px row
visually without stretching the meta rhythm. */
.art-row-title {
grid-area: title !important;
align-self: center !important;
overflow: visible !important;
}
.art-row-title .al-title {
font-family: var(--font-display) !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: var(--ink) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Show the stacked meta cells, one per line, in this order:
child 4 = gallery → gal
child 6 = dimensions → dim
child 5 = medium → med
child 3 = date/created → hidden */
.art-row > div:nth-child(3) { display: none !important; }
.art-row > div:nth-child(4),
.art-row > div:nth-child(5),
.art-row > div:nth-child(6) {
display: block !important;
font-size: 13px !important;
color: var(--ink-soft) !important;
line-height: 20px !important;
height: 20px !important;
text-align: left !important;
font-weight: 400 !important;
align-self: center !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
.art-row > div:nth-child(4) { grid-area: gal !important; }
.art-row > div:nth-child(5) { grid-area: med !important; }
.art-row > div:nth-child(6) { grid-area: dim !important; }
/* No ::after meta line — we're using real cells now */
.art-row::after { display: none !important; content: none !important; }
/* Right column — all three items (price, status dot, chip) share the
single "right" grid area which spans all 4 rows. We flip that area
into a flex column with space-between so Price, Status, Public are
evenly distributed vertically regardless of left-column meta height. */
.art-row > div:nth-child(7),
.art-row > div:nth-child(8),
.art-row > div.al-status-col,
.art-row-price {
grid-area: right !important;
justify-self: end !important;
}
/* Manually offset each item so they land at top / middle / bottom of the
shared 4-row span (~68px tall). Grid ignores align-self between siblings
in the same area, so we use transform/position to fake even spacing. */
.art-row {
position: relative;
}
.art-row .art-row-price {
align-self: start !important;
text-align: right !important;
font-weight: 700 !important;
font-size: 16px !important;
white-space: nowrap !important;
}
.art-row > div.al-status-col,
.art-row > div:nth-child(8) {
align-self: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.art-row > div:nth-child(7) {
align-self: end !important;
display: inline-flex !important;
align-items: center !important;
overflow: visible !important;
}
.art-row > div:nth-child(7) .chip {
display: inline-block !important;
font-size: 10px !important;
padding: 3px 10px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-radius: 999px !important;
line-height: 1.4 !important;
}
.art-row .status-dot {
width: 10px !important;
height: 10px !important;
border-radius: 999px !important;
display: inline-block !important;
}
}
/* ----- Artwork grid ----- */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-row-gap: 100px;
grid-column-gap: 40px;
}
/* ----- Grid card (v94 redesign) ----- */
.grid-card {
display: flex;
flex-direction: column;
gap: 12px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.grid-card-thumb {
position: relative;
overflow: hidden;
border-radius: 0;
}
/* Disable card lift + thumb transform on grid cards only (must beat .card:hover) */
.card.grid-card { transition: none; }
.card.grid-card:hover,
.card.grid-card:focus,
.card.grid-card:focus-visible { transform: none !important; }
.card.grid-card .thumb { transition: none; }
.card.grid-card:hover .thumb { transform: none !important; }
.grid-card-thumb {
width: 100%;
aspect-ratio: 4/5;
}
.grid-card-thumb .thumb,
.grid-card-thumb img {
width: 100%;
height: 100%;
}
.grid-card-overlay {
position: absolute;
inset: 0;
background: #000;
color: #fcfaf7;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
padding: 18px 20px;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
}
.grid-card:hover .grid-card-overlay,
.grid-card:focus-visible .grid-card-overlay {
opacity: 1;
}
.gco-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 13px;
line-height: 1.3;
}
.gco-k {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 10px;
color: rgba(255, 255, 255, 0.65);
font-weight: 500;
}
.gco-v {
color: #fcfaf7;
font-weight: 500;
text-align: right;
}
.gco-price { font-weight: 600; }
.gco-pill {
display: inline-flex; align-items: center;
padding: 4px 9px;
border-radius: 999px;
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
border: 1px solid rgba(248, 245, 238, 0.35);
}
/* Solid Light Black would vanish on the overlay, so Public reverses out. */
.gco-pill.is-public { background: #F8F5EE; border-color: #F8F5EE; color: #2B2F2D; }
.gco-pill.is-private { background: rgba(248, 245, 238, 0.08); }
.gco-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.gco-dot {
width: 8px; height: 8px;
border-radius: 50%;
display: inline-block;
}
.gco-status.is-sold .gco-dot,
.gco-status.is-sold-paid .gco-dot { background: #EF4244; }
.gco-status.is-sold-unpaid .gco-dot { background: #FFD700; }
.gco-status.is-available .gco-dot { background: #0BDA51; }
.gco-status.is-private-collection .gco-dot { background: #933994; }
.gco-status.is-work-in-progress .gco-dot { background: #2F00FF; }
.grid-card-info {
text-align: center;
display: flex;
flex-direction: column;
gap: 2px;
}
.gci-title {
font-weight: 600;
font-size: 15px;
color: var(--ink);
line-height: 1.3;
}
.gci-meta {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.4;
}
.card {
background: transparent;
border: 0;
text-align: left;
padding: 0;
cursor: pointer;
display: flex; flex-direction: column;
transition: transform var(--transition);
}
.card:hover { transform: translateY(-2px); }
.thumb {
width: 100%; aspect-ratio: 4/5;
position: relative; overflow: hidden;
background: transparent;
border: 0;
border-radius: 0;
display: flex; align-items: flex-end; justify-content: center;
margin-bottom: var(--space-4);
transition: transform var(--transition);
}
.card:hover .thumb { transform: none; }
.thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center bottom !important; padding: 0; background: transparent; }
/* Light gallery-style placeholder (matches prototype) */
.thumb.placeholder {
background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
padding: var(--space-4);
text-align: center;
}
.thumb.placeholder::before {
content: "";
position: absolute; inset: 14px;
border: 1px solid var(--border);
border-radius: 4px;
pointer-events: none;
}
.thumb.placeholder .placeholder-title {
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
line-height: 1.25;
color: var(--ink-soft);
max-width: 78%;
position: relative;
}
/* Card meta — centered, with consistent 12px detail size */
.card-head {
display: flex; justify-content: center; align-items: flex-start; gap: var(--space-2);
margin-bottom: 4px;
text-align: center;
}
.card-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--ink);
line-height: 1.25;
letter-spacing: -0.005em;
flex: 1;
text-align: center;
}
.card-meta {
font-size: 12px;
color: var(--ink-mute);
margin-top: 2px;
display: flex; flex-direction: column; gap: 2px;
text-align: center;
align-items: center;
}
.card-foot {
display: flex; justify-content: center; align-items: center; gap: 12px;
margin-top: 8px;
font-size: 12px;
color: var(--ink);
text-align: center;
}
.card-price { font-weight: 600; font-size: 12px; }
/* Status / visibility chips */
.chip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--ink-soft);
font-weight: 600;
white-space: nowrap;
}
.chip.sold { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
.chip.available { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip.private {
background: transparent;
border-color: #2B2F2D;
color: #2B2F2D;
}
.chip.public { background: #2B2F2D; border-color: #2B2F2D; color: #fcfaf7; }
/* Public / Private pills run tighter and smaller than the other chips. */
.chip.public, .chip.private { padding: 4px 9px; font-size: 9px; }
/* On the dark theme those two would sink into the page, so they flip to Neo Pearl. */
[data-theme="dark"] .chip.private { border-color: #F8F5EE; color: #F8F5EE; }
[data-theme="dark"] .chip.public { background: #F8F5EE; border-color: #F8F5EE; color: #2B2F2D; }
.thumb .chip-overlay {
position: absolute; top: 10px; left: 10px;
display: flex; gap: 6px;
}
.thumb .chip-overlay .chip {
backdrop-filter: blur(6px);
background: color-mix(in oklab, var(--surface) 90%, transparent);
}
.thumb .chip-overlay .chip.sold {
background: color-mix(in oklab, var(--ink) 90%, transparent);
color: var(--ink-inverse);
}
.thumb .private-flag {
position: absolute; top: 10px; right: 10px;
background: color-mix(in oklab, var(--amber) 92%, white);
color: white;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
font-weight: 600;
}
/* ----- Studio editor (split view) ----- */
.editor-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: var(--space-5);
}
@media (max-width: 1100px) { .editor-grid { grid-template-columns: 1fr; } }
[data-theme="dark"] .editor-preview { background: transparent; }
.editor-preview {
background: var(--surface-elev);
border: 0;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100%;
}
/* When an artwork is selected: the image slot grows, pushing title/meta to bottom */
.editor-preview > .editor-preview-slot {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
[data-theme="dark"] .editor-form,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .share-modal,
[data-theme="dark"] .folio-import-modal .fi-card { background: #2B2F2D; }
.editor-form {
background: var(--surface-elev);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.editor-form-head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.editor-form-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.preview-thumb {
flex: 1 1 auto;
min-height: 0;
max-height: 650px;
border-radius: 0;
border: 0;
background: transparent;
display: flex; align-items: flex-end; justify-content: center;
position: relative;
margin-bottom: var(--space-4);
}
/* Fallback for the upload zone (no artwork selected) — keep aspect ratio there */
.editor-preview > .editor-preview-slot:has(.upload-zone) {
flex: 0 0 auto;
justify-content: flex-start;
}
.preview-thumb:not(:has(img))::before {
content: ""; position: absolute; inset: 18px;
border: 1px solid var(--border); border-radius: 4px;
}
.preview-thumb img { width: 100% !important; height: 100% !important; max-height: 650px; object-fit: contain !important; object-position: center bottom !important; padding: 0; background: transparent; border-radius: 0; }
.preview-thumb .placeholder-title {
font-family: var(--font-display); font-style: italic;
font-size: 22px; color: var(--ink-soft);
text-align: center; max-width: 80%; position: relative;
}
.preview-title {
font-family: var(--font-display);
font-size: 30px; line-height: 1.15;
font-weight: 600;
margin: 4px 0 8px;
}
.preview-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.preview-chips-spread { justify-content: space-between; align-items: center; gap: var(--space-2); }
.preview-chips-spread > * { flex: 0 0 auto; }
.preview-chips-spread > *:nth-child(2) { margin: 0 auto; }
.preview-meta {
display: grid; grid-template-columns: 130px 1fr;
row-gap: 6px; column-gap: 12px;
font-size: var(--text-sm);
margin-top: var(--space-3);
}
.preview-meta dt { color: var(--ink-mute); }
.preview-meta dd { margin: 0; color: var(--ink); }
/* Subtle hint text next to field labels */
.label-hint {
color: var(--ink-mute);
font-weight: 400;
font-size: 0.85em;
margin-left: 4px;
}
/* Private notes block in editor preview pane */
.preview-notes {
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: 10px 12px;
margin-top: var(--space-2);
}
.preview-notes-label {
font-size: var(--text-xs, 12px);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-mute);
margin-bottom: 4px;
}
.preview-notes p {
margin: 0;
font-size: var(--text-sm);
color: var(--ink);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3) var(--space-4);
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-top: var(--space-6);
padding-top: var(--space-4);
}
.form-footer .field-public-vis {
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.form-footer .field-public-vis > label:first-child {
font-size: var(--text-xs);
color: var(--muted);
text-transform: none;
letter-spacing: 0;
}
.form-footer-actions {
display: flex;
gap: var(--space-2);
align-items: center;
}
@media (max-width: 600px) {
.form-footer { flex-direction: column; align-items: stretch; }
.form-footer-actions { justify-content: flex-end; }
}
.editor-empty {
text-align: center;
padding: var(--space-8) var(--space-5);
color: var(--ink-mute);
}
.editor-empty .section-title { color: var(--ink-soft); }
/* Empty/index list inside editor */
.editor-list {
max-height: 70vh; overflow-y: auto;
padding-right: 4px;
}
.editor-list-item {
display: grid; grid-template-columns: 60px 1fr auto;
gap: var(--space-3); align-items: center;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
cursor: pointer;
border: 1px solid transparent;
}
.editor-list-item:hover { background: var(--surface-2); }
.editor-list-item.is-active { background: var(--accent-soft); border-color: transparent; }
.eli-status { display: inline-flex; align-items: center; gap: 8px; }
.editor-list-sentinel,
.editor-list-end {
text-align: center;
padding: var(--space-3) var(--space-2);
font-size: 12px;
letter-spacing: 0.02em;
}
.eli-thumb {
width: 60px; height: 60px; border-radius: 0;
background: transparent;
border: 0;
position: relative;
overflow: hidden;
}
.eli-thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; padding: 0; background: transparent; }
.eli-title {
font-family: var(--font-display); font-size: 16px; font-weight: 600;
color: var(--ink); line-height: 1.2;
}
.eli-sub { font-size: var(--text-xs); color: var(--ink-mute); margin-top: 2px; }
/* =====================================================================
PUBLIC SITE — Aesthetic match for joannaaplin.com
Self-contained; uses .public-frame as the scope so admin styling is
never affected. All rules below are Public-Site only.
===================================================================== */
/* Shared Joanna font stack — used by all public-site UI and the public modal.
Replace the Futura stack with `"Nexa"` once Jamie's Nexa woff2 files are
wired up via @font-face. */
:root {
--pub-nexa: "Nexa", sans-serif;
--pub-garamond: "EB Garamond", Georgia, serif;
--pub-red: #FF0000;
--pub-rose: #cc3366;
--pub-ink: #000000;
--pub-ink-soft: #333333;
--pub-bg: #fcfaf7;
}
.public-frame {
background: var(--pub-bg);
color: var(--pub-ink);
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
/* Allow position:sticky inside this frame to work. overflow:hidden
ancestors prevent sticky positioning from pinning to viewport. */
overflow: visible;
box-shadow: var(--shadow-md);
font-family: var(--pub-nexa);
}
/* ----- Header / nav (below hero on load, sticky once it hits the top) -----
Joanna's pattern: the hero takes the full first viewport, then the header
sits in document flow just below it. As you scroll, the header travels up
with the page. When it reaches y=0 of the viewport, position:sticky pins
it there for the remainder of the page. */
.public-nav {
position: sticky;
top: 0;
z-index: 5;
background: #fcfaf7;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 48px; /* link itself adds 15px top/bottom, so total bar = ~66px */
/* Shadow is only shown once the page has scrolled below the top, so the
nav blends seamlessly into the page on initial load and only reveals
itself as a sticky bar once it lifts off the page. */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0);
transition: box-shadow 0.25s ease;
}
.public-nav.is-stuck {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* In the admin Public Site preview tab, the fixed Folio auth bar (Sign out, etc.)
covers the top ~44px of the viewport. Push the public sticky nav down so it
pins below the auth bar instead of being hidden behind it. The standalone
/public page (no auth bar) is unaffected. */
.public-frame--admin-preview .public-nav {
top: 68px;
}
.public-nav .pn-brand {
font-family: var(--pub-nexa);
font-size: 16px;
font-weight: 700;
letter-spacing: 3px;
word-spacing: 3px;
text-transform: uppercase;
color: #000;
display: flex;
align-items: center;
}
.public-nav nav {
display: flex;
gap: 24px; /* ~12px margin-inline on each side per Joanna's spec */
}
.public-nav nav a {
position: relative;
font-family: var(--pub-nexa);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #000;
text-decoration: none;
padding: 15px 0; /* Joanna: matches .elementor-item padding 15px 0 */
transition: color 0.4s ease;
cursor: pointer;
}
/* Subtle 1px underline. Matches joannaaplin.com's custom CSS exactly:
transform-origin pinned to RIGHT, scaleX(0)↔scaleX(1), with a slow
cubic-bezier(1, 0, 0, 1) easing over 0.7s. This curve sits idle at
each end and races through the middle — a more elegant sweep than
a plain ease. Hover-in grows from the right edge; hover-out
collapses back toward the right edge (reads as left→right sweep-out). */
.public-nav nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 4px;
height: 1px;
background: var(--pub-red);
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.7s cubic-bezier(1, 0, 0, 1);
}
.public-nav nav a:hover {
color: var(--pub-red);
}
.public-nav nav a:hover::after {
transform: scaleX(1);
}
.public-nav nav a.is-active {
color: var(--pub-red);
}
/* ----- Hero (full-bleed image, title overlay in spaced caps) -----
Sizes so hero + nav fill exactly one viewport on load. Nav total height
= 18px container padding × 2 + 15px link padding × 2 + ~12px line-height
≈ 78px. Hero gets the remainder so the nav sits visible at the bottom
of the fold on initial load. */
.public-hero {
position: relative;
min-height: calc(100vh - 78px);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #f5f5f5;
overflow: hidden;
}
.public-hero .ph-image {
position: absolute;
inset: 0;
background-size: 100%; /* inline style overrides with zoom % */
background-position: 50% 50%; /* inline style overrides */
background-repeat: no-repeat;
z-index: 0;
}
.public-hero .ph-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* background-color set inline based on overlay_color + intensity */
}
.public-hero .ph-inner {
position: relative;
z-index: 2;
padding: 64px 24px;
color: #000;
}
.public-hero .ph-kicker {
display: none; /* Joanna's site has no kicker */
}
.public-hero h1 {
/* Match joannaaplin.com exactly: Nexa Bold 70px, no CSS transform,
no extra letter-spacing (literal spaces in markup), line-height 1. */
font-family: var(--pub-nexa);
font-size: clamp(36px, 7vw, 70px);
font-weight: 700;
letter-spacing: normal;
text-transform: none;
margin: 0 0 14px;
color: #000;
line-height: 1;
}
/* Hero text color toggle (Settings → Public Site). Light = white, dark = black.
Defaults match "dark" (#000) for backwards compatibility on hero images that
have plenty of contrast; the radio explicitly drives this class. */
.public-hero.ph-text-light h1,
.public-hero.ph-text-light .ph-sub {
color: #fcfaf7;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.public-hero.ph-text-dark h1,
.public-hero.ph-text-dark .ph-sub {
color: #000000;
text-shadow: none;
}
/* Legacy spacer kept for backward compat with older renders. */
.public-hero h1 .ph-spacer { display: inline-block; width: 0.4em; }
/* Per-letter spans + word gap. We use letter-spacing instead of literal space
characters because the demo Nexa font watermarks its space glyph. */
.public-hero h1 .ph-letter { display: inline-block; letter-spacing: 0.4em; }
.public-hero h1 .ph-letter:last-child { letter-spacing: 0; }
.public-hero h1 .ph-word-gap { display: inline-block; width: 0.9em; }
.public-hero .ph-sub {
font-family: var(--pub-garamond);
font-style: italic;
font-size: clamp(18px, 2.2vw, 28px);
color: #000;
margin: 0 0 32px;
font-weight: 400;
}
.public-hero p {
font-family: var(--pub-garamond);
font-size: 16px;
color: var(--pub-ink-soft);
max-width: 60ch;
margin: 0 auto 24px;
line-height: 1.6;
}
.public-hero .ph-actions { display: none; }
/* ----- Featured Image Picker (Settings → Public Site) ----- */
.featured-image-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-auto-rows: max-content;
align-items: start;
gap: 16px;
max-height: 560px;
overflow-y: auto;
padding: 14px;
border: 1px solid var(--border-soft, #e2e8f0);
border-radius: 8px;
background: #fafafa;
}
.fip-tile {
position: relative;
display: block;
width: 100%;
border: 2px solid transparent;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
padding: 0;
background: #fcfaf7;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.fip-tile .fip-thumb {
width: 100%;
aspect-ratio: 1 / 1;
background: #f5f5f5;
display: block;
overflow: hidden;
}
.fip-tile .fip-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fip-tile .fip-caption {
display: block;
padding: 8px 10px;
font-size: 12px;
line-height: 1.3;
color: #1e293b;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-top: 1px solid #eef2f7;
background: #fcfaf7;
}
.fip-tile:hover {
border-color: #94a3b8;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.fip-tile.is-selected {
border-color: var(--blue, #3b82f6);
box-shadow: 0 0 0 2px rgba(59,130,246,0.18), 0 4px 12px rgba(0,0,0,0.08);
}
.fip-tile .fip-check {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
background: var(--blue, #3b82f6);
color: #fcfaf7;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
line-height: 1;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.fip-tile.is-selected .fip-check { display: flex; }
.fip-empty {
padding: 24px;
text-align: center;
color: #64748b;
font-size: 14px;
}
/* ----- Featured Hero preview row (compact summary in Settings) ----- */
.featured-hero-preview {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 14px;
border: 1px solid var(--border-soft, #e2e8f0);
border-radius: 8px;
background: #fafafa;
}
.fhp-thumb {
flex: 0 0 auto;
width: 160px;
height: 160px;
border-radius: 6px;
overflow: hidden;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e8f0;
}
.fhp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fhp-thumb.is-empty .fhp-empty-text {
padding: 12px;
text-align: center;
font-size: 12px;
color: #64748b;
line-height: 1.4;
}
.fhp-thumb.is-empty small { font-size: 11px; color: #94a3b8; }
.fhp-meta {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.fhp-title {
font-size: 15px;
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-height: 20px;
}
.fhp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* ----- Featured Hero modal extensions ----- */
.modal-card.modal-card-lg {
width: min(960px, 96vw);
max-height: 88vh;
display: flex;
flex-direction: column;
}
.modal-card.modal-card-lg .modal-body {
overflow-y: auto;
flex: 1 1 auto;
padding: 12px 20px 20px;
}
.modal-card.modal-card-lg .featured-image-picker {
max-height: none;
border: 0;
padding: 0;
background: transparent;
}
.modal-toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
border-bottom: 1px solid var(--border-soft, #e2e8f0);
background: #fcfaf7;
}
.modal-toolbar .input {
flex: 1 1 auto;
max-width: 380px;
}
/* ----- Hero Position Editor modal ----- */
.modal-card.modal-card-xl {
width: min(1100px, 96vw);
max-height: 92vh;
}
.modal-card .modal-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--border-soft, #e2e8f0);
background: #fcfaf7;
}
.hpe-stage {
width: 100%;
aspect-ratio: 16 / 9;
max-height: 50vh;
background: #000;
border-radius: 8px;
overflow: hidden;
position: relative;
user-select: none;
}
.hpe-frame {
position: absolute;
inset: 0;
min-height: 0; /* override .public-hero min-height: calc(100vh - 78px) */
cursor: grab;
touch-action: none;
}
.hpe-frame.is-dragging { cursor: grabbing; }
.hpe-frame .ph-image { pointer-events: none; }
.hpe-frame .ph-overlay { pointer-events: none; }
.hpe-frame .ph-inner { pointer-events: none; padding: 32px 24px; }
.hpe-frame .ph-inner h1 { font-size: clamp(24px, 4vw, 44px) !important; }
.hpe-frame .ph-sub { font-size: clamp(13px, 1.4vw, 17px) !important; }
.hpe-controls {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
padding: 14px 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
.hpe-row {
display: grid;
grid-template-columns: 110px 1fr 56px;
align-items: center;
gap: 14px;
}
.hpe-row-label {
font-size: 13px;
color: #475569;
font-weight: 500;
}
.hpe-row-val {
font-size: 13px;
color: #1e293b;
text-align: right;
font-variant-numeric: tabular-nums;
}
.hpe-row input[type="range"] { width: 100%; }
/* ----- Section wrapper (with vertical category label, Elementor-style) ----- */
.public-section {
position: relative;
padding: 72px 80px;
background: #fcfaf7;
border-top: 0;
scroll-margin-top: 80px;
}
.public-frame .public-biography,
.public-frame .public-studio-shots { scroll-margin-top: 80px; }
/* Vertical category label — shown only on .public-cat-section. */
.public-section .ps-vlabel { display: none; }
.public-section.public-cat-section .ps-vlabel {
/* Sticky vertical label: stays in view while scrolling through that
category's tiles, then releases when its section ends. */
display: block;
position: sticky;
top: 96px; /* sits just below the ~66px sticky nav */
align-self: start; /* required for sticky inside the grid column */
font-family: "Nexa", "Helvetica Neue", Arial, sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 3px;
color: #000;
text-transform: uppercase;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
pointer-events: none;
z-index: 2;
justify-self: center;
}
@media (max-width: 900px) and (min-width: 641px) {
.public-section.public-cat-section .ps-vlabel { display: none; }
}
/* Phones keep the vertical category label (matches joannaaplin.com) but in a
narrower rail and closer to the tiles. */
@media (max-width: 640px) {
/* Not sticky on phones: the label marks the start of the category and then
scrolls away, rather than riding alongside every tile. */
.public-section.public-cat-section .ps-vlabel {
display: block;
position: static;
font-size: 13px;
letter-spacing: 2.5px;
}
}
/* In admin Public Site preview, the public sticky nav itself sits 44px down
(under the Folio auth bar), so the vertical category label must also be
pushed down to clear it. */
.public-frame--admin-preview .public-section.public-cat-section .ps-vlabel {
top: 164px;
}
.public-section-head {
display: flex;
justify-content: flex-end;
align-items: baseline;
gap: 16px;
margin-bottom: 32px;
}
.public-section h2 {
display: none; /* heading is replaced by the vertical label on Joanna's site */
}
.public-section .ps-meta {
font-family: var(--pub-nexa);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pub-ink-soft);
}
/* ----- Artist section (mirrors Joanna's bio block: text left, photo right)
Pulls from settings.statement (multi-paragraph) and optional
settings.artist_photo_url. Hidden entirely when statement is empty. */
/* Full-bleed like Joanna's site: section spans 100% width with 100px
gutters on each side. Text column hugs the left gutter, photo hugs
the right gutter. */
.public-frame .public-artist {
display: grid;
grid-template-columns: 60% 40%;
gap: 0;
align-items: center;
padding: 80px 150px 140px;
background: #fcfaf7;
}
@media (max-width: 1100px) {
.public-frame .public-artist {
padding: 80px 48px;
gap: 48px;
}
}
@media (max-width: 900px) {
.public-frame .public-artist {
grid-template-columns: 1fr;
padding: 64px 24px;
gap: 34px;
}
}
.public-frame .public-artist .pa-text {
font-family: var(--pub-garamond);
font-size: 16px;
line-height: 30px;
color: #000000;
justify-self: stretch;
padding-right: 25px;
}
.public-frame .public-artist .pa-text p {
margin: 0 0 1.4em;
}
.public-frame .public-artist .pa-text p:last-child {
margin-bottom: 0;
font-style: italic;
}
.public-frame .public-artist .pa-photo {
justify-self: end;
}
.public-frame .public-artist .pa-photo img {
width: 100%;
max-width: 380px;
height: auto;
display: block;
}
.public-frame .public-artist .pa-photo-placeholder {
width: 100%;
max-width: 380px;
aspect-ratio: 4 / 5;
background: #f0f0f0;
color: #999;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pub-nexa);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Stacked layout leads with the photo, then the statement (joannaaplin.com).
Declared after the base rules so it wins on equal specificity. */
@media (max-width: 900px) {
.public-frame .public-artist .pa-photo { order: -1; justify-self: stretch; }
.public-frame .public-artist .pa-photo img,
.public-frame .public-artist .pa-photo-placeholder { max-width: 100%; }
.public-frame .public-artist .pa-text { padding-right: 0; }
}
/* =======================================================================
Public Site — Biography section (mirrors joannaaplin.com/biography)
Layout: photo left, content right. Same horizontal rhythm as the
Artist section: 60% / 40% columns with 150px gutters. Section headings
are Nexa bold uppercase — same scale as Joanna's. Body text inherits
the EB Garamond 16px / 30px / #000 spec.
======================================================================= */
.public-frame .public-biography {
display: grid;
grid-template-columns: 40% 60%;
gap: 0;
align-items: start;
padding: 80px 150px 140px;
background: #fcfaf7;
}
@media (max-width: 1100px) {
.public-frame .public-biography {
padding: 80px 48px 120px;
gap: 32px;
}
}
@media (max-width: 900px) {
.public-frame .public-biography {
grid-template-columns: 1fr;
padding: 64px 24px 96px;
gap: 26px;
}
}
.public-frame .public-biography .pb-photo {
justify-self: start;
}
.public-frame .public-biography .pb-photo img {
width: 85%;
max-width: 85%;
height: auto;
display: block;
}
/* Full-width biography photo on stacked layouts (joannaaplin.com). Declared
after the base .pb-photo rules so it wins on equal specificity. */
@media (max-width: 900px) {
.public-frame .public-biography .pb-photo { justify-self: stretch; }
.public-frame .public-biography .pb-photo img,
.public-frame .public-biography .pb-photo-placeholder {
width: 100%;
max-width: 100%;
}
}
.public-frame .public-biography .pb-photo-placeholder {
width: 85%;
max-width: 85%;
aspect-ratio: 4 / 5;
background: #f0f0f0;
color: #999;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pub-nexa);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.public-frame .public-biography .pb-content {
justify-self: stretch;
}
.public-frame .public-biography .pb-h {
font-family: var(--pub-nexa);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #000000;
margin: 0 0 5px;
}
.public-frame .public-biography .pb-h:not(:first-child) {
margin-top: 40px;
}
.public-frame .public-biography .pb-body {
font-family: var(--pub-garamond);
font-size: 16px;
line-height: 1.5;
color: #000000;
}
.public-frame .public-biography .pb-body p {
margin: 0;
}
.public-frame .public-biography .pb-body p + p {
margin-top: 0;
}
/* Bio (and only bio) gets paragraph spacing. Education and Press are
line-by-line lists with no inter-line gap beyond line-height. */
.public-frame .public-biography .pb-body.pb-bio p + p {
margin-top: 1em;
}
.public-frame .public-biography .pb-body .pb-quote {
font-style: italic;
margin-top: 1em;
}
/* Press links — match the modal "Available for purchase at "
styling: rose color, no underline at rest or hover, deeper rose on hover. */
.public-frame .public-biography .pb-press a,
.public-frame .public-biography .pb-body a {
color: #cc3366;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.public-frame .public-biography .pb-press a:hover,
.public-frame .public-biography .pb-body a:hover {
color: #a32a52;
text-decoration: none;
}
/* ----- Category sections (joannaaplin.com style) — reuse .public-grid card styles ----- */
.public-frame .public-cat-stack { display: block; }
/* Match Joanna: 100px top, 100px right, 50px bottom; left is reduced because
the sticky label rail lives in the outer gutter, closer to the viewport edge */
.public-frame .public-cat-section {
padding: 100px 100px 140px 40px;
position: relative;
/* Two-column layout: narrow rail for the sticky vertical label, then content */
display: grid;
grid-template-columns: 24px 1fr;
column-gap: 60px;
align-items: start;
}
.public-frame .public-cat-section > .grid.public-grid,
.public-frame .public-cat-section > .pc-more-wrap { grid-column: 2; }
/* When the Load More button is still present, its 110px top margin already
provides spacing — pull the bottom padding back to 50px so the button
sits at a comfortable distance from the next category. */
.public-frame .public-cat-section:has(.pc-more-wrap) { padding-bottom: 50px; }
/* Last category keeps a full 160px bottom so it breathes into the Artist Quote section */
.public-frame .public-cat-section:last-of-type { padding-bottom: 160px; }
@media (max-width: 1100px) {
.public-frame .public-cat-section { padding: 80px 56px 110px 32px; }
.public-frame .public-cat-section:has(.pc-more-wrap) { padding-bottom: 40px; }
.public-frame .public-cat-section:last-of-type { padding-bottom: 120px; }
}
@media (max-width: 640px) {
/* joannaaplin.com centres the tiles in the viewport and lets the vertical
label live in the left gutter. Mirror that by matching the right padding
to (left padding + label rail + gap) so the content column lands dead
centre: 6 + 20 + 10 = 36px. */
.public-frame .public-cat-section {
padding: 56px 36px 80px 6px;
grid-template-columns: 20px 1fr;
column-gap: 10px;
}
.public-frame .public-cat-section:has(.pc-more-wrap) { padding-bottom: 32px; }
.public-frame .public-cat-section:last-of-type { padding-bottom: 88px; }
}
/* Grid gutters — split the difference (was 60/30, now 80/45) */
.public-frame .public-cat-section .grid.public-grid {
gap: 80px 45px;
padding: 0;
}
/* Captions: 15px, EB Garamond (sans-serif fallback chain to match joannaaplin.com) */
.public-frame .public-cat-section .grid.public-grid .card .card-title,
.public-frame .public-cat-section .grid.public-grid .card .card-meta {
font-family: "EB Garamond", sans-serif;
font-size: 15px;
}
/* The hidden HTML attribute must beat .card's display:flex */
.public-frame .public-cat-grid .pc-tile[hidden] { display: none !important; }
/* Load More — matches Joanna's reference (Nexa 12px, normal weight, 3px tracking) */
.public-frame .pc-more-wrap {
display: flex;
justify-content: center;
margin-top: 110px; /* +50 above for separation from the grid */
}
.public-frame .pc-load-more {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--pub-nexa, "Nexa", "Helvetica Neue", Arial, sans-serif);
font-size: 12px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--pub-ink, #111);
background: transparent;
border: 1px solid var(--pub-ink, #111);
border-radius: 999px;
padding: 12px 26px;
cursor: pointer;
will-change: transform;
/* Same signature as every other Folio button: pill by default, square and
slightly larger on hover. */
transition:
transform 0.3s ease,
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
.public-frame .pc-load-more:hover {
border-radius: 0;
transform: scale(1.06);
background: var(--pub-ink, #111);
color: #fcfaf7;
}
/* ----- Works filter (All | Available | Previous) ----- */
/* Centered row above the first category section. Editorial, small,
matches joannaaplin.com. Active item uses --pub-red, same as the
active top-nav link. No underline — colour carries it. */
.public-frame .pc-works-filter {
display: flex;
justify-content: center;
align-items: baseline;
gap: 14px;
padding: 60px 100px 0;
font-family: var(--pub-garamond);
font-size: 15px;
color: #111;
}
.public-frame .pc-works-filter .pc-wf-item {
background: transparent;
border: 0;
padding: 4px 2px;
font: inherit;
color: #111;
cursor: pointer;
letter-spacing: 0.01em;
transition: color 0.15s ease;
}
.public-frame .pc-works-filter .pc-wf-item:hover {
color: var(--pub-red, #FF0000);
}
.public-frame .pc-works-filter .pc-wf-item.is-active {
color: var(--pub-red, #FF0000);
}
.public-frame .pc-works-filter .pc-wf-sep {
color: #bbb;
user-select: none;
font-size: 13px;
}
@media (max-width: 760px) {
.public-frame .pc-works-filter {
padding: 40px 24px 0;
gap: 10px;
font-size: 14px;
flex-wrap: wrap;
}
}
/* ----- Artwork grid (4-col desktop, EB Garamond captions) ----- */
.public-frame .grid.public-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* row gap : column gap — split between original 40px and Joanna's 160px. */
gap: 100px 60px;
align-items: end;
padding: 24px 0 56px;
}
@media (max-width: 1100px) {
.public-frame .grid.public-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.public-frame .grid.public-grid { grid-template-columns: 1fr; }
.public-section { padding: 48px 24px; }
.public-section .ps-vlabel { display: none; }
}
.public-frame .grid.public-grid .card {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
text-align: center;
transform: none;
transition: opacity 600ms ease;
}
/* Kill the global .card:hover translateY jitter for public tiles — gentle
opacity fade only. */
.public-frame .grid.public-grid .card:hover,
.public-frame .grid.public-grid .card:focus,
.public-frame .grid.public-grid .card:focus-visible {
transform: none !important;
opacity: 0.7;
}
.public-frame .grid.public-grid .card .thumb,
.public-frame .grid.public-grid .card .preview-thumb {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
aspect-ratio: auto;
min-height: 0;
padding: 0;
margin-bottom: 14px;
}
.public-frame .grid.public-grid .card .thumb img,
.public-frame .grid.public-grid .card .preview-thumb img {
width: 100%;
height: auto;
max-height: 360px;
object-fit: contain;
object-position: center bottom;
background: transparent;
}
.public-frame .grid.public-grid .card .card-title {
font-family: var(--pub-garamond);
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1;
color: #000;
margin: 0 0 4px;
letter-spacing: 0;
text-align: center;
}
.public-frame .grid.public-grid .card .card-meta,
.public-frame .grid.public-grid .card .card-year {
font-family: var(--pub-garamond);
font-size: 16px;
font-style: normal;
line-height: 1;
color: var(--pub-ink-soft);
border: 0;
padding: 0;
margin: 0 0 4px;
justify-content: center;
text-align: center;
}
.public-frame .grid.public-grid .card .card-meta { margin-bottom: 0; }
/* Hide the per-card status/price line on the Public Site grid —
Joanna's design shows title + dims only. */
.public-frame .grid.public-grid .card .card-foot { display: none; }
.public-frame .grid.public-grid .card .card-price {
font-family: var(--pub-nexa);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #000;
}
/* ----- Footer (black, centered, Roboto — mirrors joannaaplin.com) -----
joannaaplin.com footer uses Roboto 12px body / 18px h4@600, all
center-aligned, pure white on pure black. */
.public-footer {
background: #000000;
color: #fcfaf7;
padding: 80px 80px 48px;
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
text-align: center;
}
.public-footer-cols {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
@media (max-width: 900px) {
.public-footer { padding: 64px 24px 32px; }
.public-footer-cols { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 540px) {
.public-footer-cols { grid-template-columns: 1fr; gap: 32px; }
}
.public-footer h4 {
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
margin: 0 0 14px;
color: #fcfaf7;
text-align: center;
}
.public-footer p,
.public-footer a,
.public-footer li {
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: #fcfaf7;
text-decoration: none;
line-height: 1.6;
text-align: center;
}
.public-footer ul { list-style: none; padding: 0; margin: 0; text-align: center; line-height: 1.15; }
.public-footer li { padding: 0; line-height: 1.15; }
.public-footer ul li + li { margin-top: 0; }
.public-footer a:hover { color: #DB9C18; }
.public-footer .pf-brand {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 6px;
text-align: center;
}
.public-footer .pf-logo {
display: block;
max-width: 180px;
max-height: 90px;
width: auto;
height: auto;
object-fit: contain;
/* Force any dark/colored logo to render in white on the black footer. */
filter: brightness(0) invert(1);
}
.public-footer .pf-brand-text {
font-family: var(--pub-nexa);
font-size: 12px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: #fcfaf7;
text-align: center;
margin-top: 4px;
}
.public-footer .pf-folio-link { display: inline-flex; align-items: center; vertical-align: middle; }
.public-footer .pf-folio-wordmark { height: 20px; width: auto; display: block; fill: #F8F5EE; overflow: visible; margin: 0 0 4px 2px; }
.public-footer .pf-brand-name {
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: normal;
text-transform: uppercase;
margin-bottom: 8px;
text-align: center;
}
.public-footer .pf-copyright {
opacity: 0.55;
font-size: 11px;
letter-spacing: normal;
text-transform: none;
margin: 8px 0 0;
text-align: center;
}
.public-footer .pf-socials {
display: flex;
gap: 2px;
margin-top: 8px;
justify-content: center;
}
.public-footer .pf-socials a {
color: #fcfaf7;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.public-footer .pf-socials a:hover { color: #DB9C18; }
.public-footer .pf-socials svg { width: 20px; height: 20px; }
.public-footer .pf-base {
margin: 72px auto 0;
padding-top: 72px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
font-size: 11px;
letter-spacing: normal;
opacity: 0.7;
text-align: center;
max-width: 1000px;
}
.public-footer .pf-base strong {
font-weight: 700;
opacity: 1;
}
/* ----- Modal ----- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.55); backdrop-filter: blur(2px); }
.modal-card {
position: relative;
background: var(--surface-elev);
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
max-width: 880px; width: calc(100% - 32px);
max-height: calc(100vh - 32px);
overflow-y: auto;
box-shadow: var(--shadow-lg);
}
.modal-close {
position: absolute; top: 12px; right: 12px;
width: 36px; height: 36px;
border-radius: 999px; border: 1px solid var(--border);
background: var(--surface);
font-size: 22px; line-height: 1;
display: flex; align-items: center; justify-content: center;
color: var(--ink-soft);
}
.modal-body { padding: var(--space-6); }
.modal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
@media (max-width: 760px) { .modal-grid { grid-template-columns: 1fr; } }
/* ----- Mobile sidebar collapse ----- */
@media (max-width: 820px) {
.shell, .shell.sidebar-collapsed { grid-template-columns: 1fr; }
.sidebar {
position: static; height: auto;
flex-direction: row; flex-wrap: wrap;
align-items: center;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-soft);
border-right: 0;
gap: var(--space-3);
overflow: visible;
}
.sidebar-toggle { display: none; }
.nav { flex-direction: row; flex-wrap: wrap; }
.nav-item { padding: 6px 12px; font-size: 12px; }
.nav-icon { display: none; }
.sidebar-foot { margin-top: 0; flex-direction: row; align-items: center; gap: 8px; }
.topbar { grid-template-columns: 1fr; padding: var(--space-3) var(--space-4); }
.view { padding: var(--space-4); }
}
/* Visibility toggle (custom checkbox) */
.toggle {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; user-select: none;
position: relative;
}
.toggle input {
position: absolute;
width: 36px; height: 20px;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.toggle .track {
width: 36px; height: 20px;
border-radius: 999px;
background: var(--surface-3);
position: relative;
transition: background var(--transition);
pointer-events: none;
}
.toggle .track::after {
content: "";
position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 999px;
background: var(--surface-elev);
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
transition: transform var(--transition);
}
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::after { transform: translateX(16px); }
.toggle .label { font-size: var(--text-sm); color: var(--ink); }
/* tiny helpers */
.hr { height: 1px; background: var(--border-soft); margin: var(--space-5) 0; border: 0; }
.muted { color: var(--ink-mute); }
.tabular { font-variant-numeric: tabular-nums; }
.row { display: flex; gap: var(--space-3); align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.flex-1 { flex: 1; }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
/* Pricing tier table (in artwork modal) */
.tiers {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-2);
margin-top: var(--space-3);
}
.tier {
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
padding: 10px 6px;
text-align: center;
}
.tier.is-active { background: var(--accent-soft); border-color: var(--accent); }
.tier-rate { font-size: var(--text-xs); color: var(--ink-mute); }
.tier-amount { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.tier-amount.is-active { color: var(--accent); }
/* ---------- Status dots (replaces SOLD/AVAILABLE chip overlays) ---------- */
.status-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
vertical-align: middle;
background: var(--ink-mute);
}
.status-dot.sold,
.status-dot.sold-paid { background: #EF4244; }
.status-dot.sold-unpaid { background: #FFD700; }
.status-dot.available { background: #0BDA51; }
/* Private Collection = artist-held / not for sale. Plum reads as
"reserved" without competing with sold-red or available-green. */
.status-dot.private-collection { background: #933994; }
/* Work In Progress = unfinished, set aside. A brighter, more saturated purple
than the muted plum used for Private Collection, so the two stay distinct. */
.status-dot.work-in-progress { background: #2F00FF; }
/* Make bare status dots focusable for keyboard tooltip access without changing the cursor */
.status-dot[tabindex] { outline: none; }
.status-dot[tabindex]:focus-visible { box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }
/* Custom instant tooltip on bare status dots (replaces native title delay).
Wrapping the dot in .status-dot-tip allows us to render a styled label
directly via ::after, showing on hover with no browser timer. */
.status-dot-tip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.status-dot-tip::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
right: 0;
/* Anchor to the right edge of the dot so the tooltip grows leftward.
This avoids clipping when the dot sits at the far-right of its row. */
background: #fcfaf7;
color: #2B2F2D;
font-size: 12px;
font-weight: 400;
white-space: nowrap;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
pointer-events: none;
opacity: 0;
transition: opacity 0.08s ease-out;
z-index: 1000;
}
.status-dot-tip:hover::after,
.status-dot-tip:focus-within::after {
opacity: 1;
}
/* Containers that normally clip via overflow:hidden need to allow our tooltip to escape
when a .status-dot-tip is hovered. Scoped tightly so list ellipsis still works elsewhere. */
.art-row > div.al-status-col,
.art-row > div.al-status-col * { overflow: visible !important; }
.card-foot,
.card-foot * { overflow: visible !important; }
.eli-status,
.eli-status * { overflow: visible !important; }
/* Note: the generic [data-tip] tooltip CSS was removed when we scoped tooltips
to status dots only. If reintroducing tooltips elsewhere later, restore the
.status-dot-tip pattern (wrap the target in a span with data-tip). */
/* Dot + price clustered together in card foot */
.price-with-status {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Inline status with label (used in editor preview chips & public modal) */
.status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
padding: 4px 0;
}
/* Center the dot AND its header in the list-view STATUS column */
.art-row > div:nth-child(6) {
display: flex;
align-items: center;
justify-content: center;
}
.art-list-head > div:nth-child(6) {
text-align: center;
}
/* ===== v36: Filters/Sort popover UI ===== */
.popover-wrap {
position: relative;
display: inline-block;
}
.icon-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 8px;
border: 1px solid transparent;
background: transparent;
color: var(--ink-soft, #555);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
line-height: 1;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.icon-btn:hover {
background: var(--surface-soft, rgba(0,0,0,0.04));
color: var(--ink, #1a1a1a);
}
.icon-btn svg {
flex-shrink: 0;
opacity: 0.7;
}
.icon-btn:hover svg { opacity: 1; }
.icon-btn.is-active {
background: var(--surface-soft, rgba(0,0,0,0.05));
color: var(--ink, #1a1a1a);
border-color: transparent;
}
.icon-btn.is-active svg { opacity: 1; }
.icon-btn-square {
width: 32px;
padding: 0;
justify-content: center;
}
.icon-btn-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 5px;
margin-left: 2px;
border-radius: 8px;
background: var(--ink, #1a1a1a);
color: var(--surface, #fcfaf7);
font-size: 10px;
font-weight: 600;
line-height: 1;
}
.popover {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 100;
min-width: 260px;
padding: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
gap: 10px;
}
[data-theme="dark"] .popover {
box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.25);
}
.popover[hidden] { display: none; }
.popover-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.popover-row .select {
width: 100%;
max-width: none;
}
.popover-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted, #666);
}
.popover-foot {
display: flex;
justify-content: center;
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.popover-sort {
min-width: 200px;
padding: 6px;
gap: 0;
}
.popover-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 10px;
border: 0;
background: transparent;
color: var(--text);
font: inherit;
font-size: 13px;
text-align: left;
border-radius: 6px;
cursor: pointer;
transition: background 100ms ease;
}
.popover-item:hover {
background: var(--surface-2, rgba(0,0,0,0.04));
}
[data-theme="dark"] .popover-item:hover {
background: rgba(255,255,255,0.06);
}
.popover-item.is-active {
color: var(--accent, #1f8a70);
font-weight: 600;
}
/* ===== v37: Upload zone & image picker modal ===== */
/* Upload zone (replaces empty editor state) */
.upload-zone {
display: block;
width: 100%;
margin-top: 0;
padding: 0;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
font-family: inherit;
color: var(--ink);
text-align: center;
}
.upload-zone:hover {
background: var(--surface-3);
border-color: var(--accent);
}
.upload-zone-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
aspect-ratio: 4 / 5;
padding: 32px 24px;
margin: 14px;
border: 1.5px dashed var(--border);
border-radius: var(--radius-md);
background: linear-gradient(180deg, rgba(252,250,247,0.5), rgba(252,250,247,0.0));
}
[data-theme="dark"] .upload-zone { background: #242424; }
[data-theme="dark"] .upload-zone:hover { background: #2b2b2b; }
[data-theme="dark"] .upload-zone-inner { background: #2B2F2D; }
.upload-zone:hover .upload-zone-inner {
border-color: var(--accent);
}
/* Drag-and-drop hover state on the editor preview slot */
.editor-preview-slot.is-drag .upload-zone-inner,
.editor-preview-slot.is-drag .preview-thumb {
border-color: var(--accent);
background: var(--accent-soft);
}
.editor-preview-slot.is-drag {
outline: 2px dashed var(--accent);
outline-offset: 4px;
border-radius: var(--radius-md);
}
.editor-preview-slot.is-drag * {
pointer-events: none;
}
/* Upload-in-progress: dim + show progress cursor */
.editor-preview-slot.is-uploading {
opacity: 0.7;
cursor: progress;
}
.editor-preview-slot.is-uploading::after {
content: "Uploading\2026";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
padding: 6px 12px;
background: var(--ink); color: var(--ink-inverse);
font-size: 12px; font-weight: 500;
border-radius: var(--radius-sm);
pointer-events: none;
z-index: 2;
}
.editor-preview-slot { position: relative; }
.upload-zone-plus {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--accent);
color: var(--accent-ink);
display: inline-flex;
align-items: center;
justify-content: center;
}
.upload-zone-label {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--ink);
margin-top: 4px;
}
.upload-zone-sub {
font-size: var(--text-sm);
}
.upload-zone.is-compact .upload-zone-inner {
aspect-ratio: auto;
padding: 22px;
}
/* Preview thumb wrapper (when image already exists) */
.preview-thumb-wrap {
position: relative;
}
/* Overlay actions (Replace + Adjust) stacked in upper-right of image preview */
.preview-thumb-wrap .preview-overlay-actions {
position: absolute;
top: 10px;
right: 10px;
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
opacity: 0;
transition: opacity 140ms ease;
pointer-events: none;
}
.preview-thumb-wrap .preview-overlay-actions .btn {
background: var(--surface-elev);
pointer-events: auto;
}
.preview-thumb-wrap:hover .preview-overlay-actions,
.preview-thumb-wrap:focus-within .preview-overlay-actions {
opacity: 1;
}
@media (pointer: coarse) {
.preview-thumb-wrap .preview-overlay-actions { opacity: 1; }
}
/* "Alt text" sits alongside Replace / Adjust. A small green dot appears once
the artist has written alternative text, so a filled artwork is obvious at a
glance without opening the dialog. */
.preview-thumb-wrap .preview-overlay-actions .preview-alt {
display: inline-flex;
align-items: center;
gap: 6px;
}
.preview-alt-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #2f9e5f;
flex: 0 0 auto;
}
/* ----- Alternative Text dialog ----- */
.alt-modal-row {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 14px;
}
.alt-modal-thumb {
flex: 0 0 96px;
width: 96px;
border-radius: 10px;
overflow: hidden;
background: var(--surface-elev);
}
.alt-modal-thumb img {
display: block;
width: 100%;
height: auto;
}
.alt-modal-help {
flex: 1 1 auto;
margin: 0;
font-size: 13px;
line-height: 1.55;
}
.alt-modal-input {
width: 100%;
resize: vertical;
}
.alt-modal-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-top: 12px;
}
.alt-modal-count { font-size: 12px; }
.alt-modal-count.is-warn { color: #c2410c; }
.alt-modal-note {
margin: 12px 0 0 0;
font-size: 12px;
line-height: 1.5;
}
@media (max-width: 560px) {
.alt-modal-row { flex-direction: column; }
.alt-modal-thumb { flex: 0 0 auto; width: 120px; }
.alt-modal-foot { flex-direction: column; align-items: stretch; }
.alt-modal-foot .ai-actions { display: flex; gap: 8px; }
.alt-modal-foot .ai-actions .btn { flex: 1 1 0; }
}
/* Image-URL field collapsed UI */
.image-url-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.link-btn {
background: transparent;
border: 0;
padding: 0;
font: inherit;
font-size: var(--text-sm);
color: var(--accent);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }
/* Modal overlay & card */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(31, 36, 33, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: jafa-fade 140ms ease;
}
@keyframes jafa-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-card {
background: var(--surface-elev);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
width: min(640px, 100%);
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
overflow: hidden;
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px 12px;
}
.modal-title {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--ink);
}
.modal-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: 0;
background: transparent;
color: var(--ink-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {
background: var(--surface-2);
color: var(--ink);
}
.modal-tabs {
display: flex;
gap: 4px;
padding: 0 20px;
border-bottom: 1px solid var(--border);
}
.modal-tab {
position: relative;
background: transparent;
border: 0;
padding: 10px 14px 12px;
font: inherit;
font-size: var(--text-sm);
color: var(--ink-soft);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.modal-tab:hover { color: var(--ink); }
.modal-tab.is-active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
.modal-body {
padding: 24px 20px 20px;
overflow-y: auto;
}
/* Image-picker panels */
.ip-drop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 36px 24px;
background: var(--surface);
border: 1.5px dashed var(--border);
border-radius: var(--radius-md);
color: var(--ink-soft);
transition: background 140ms ease, border-color 140ms ease;
}
.ip-drop.is-drag {
background: var(--accent-soft);
border-color: var(--accent);
}
.ip-drop-icon { color: var(--accent); }
.ip-drop-hint { margin: 0; font-size: var(--text-sm); }
.ip-cam {
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Camera preview frame — locks the shape via padding-bottom so the
preview never changes size between the empty state, live stream, and
captured poster (iOS Safari can override CSS `aspect-ratio` on a live