/* ═══════════════════════════════════════════════════════ Collexius – design system v3 Bootstrap 5 stays as a utility / grid layer. All cosmetic decisions live here, expressed as tokens so a theme is a values swap, not a rewrite. Apply a theme with class="theme-XXX" on (set from SiteSettings.theme, see collection/templates/collection/base.html) — Midnight, the default, lives directly in :root with no class needed, exactly as the old default did. Two token layers, both real, both live everywhere: - the original implementation names (--paper, --surface, --ink, --brass, --rule, --ok/--warn/--danger…) — every component in this file is already written against these, so a theme only needs to redeclare this layer to reskin the whole app. - semantic aliases (--background, --panel, --accent, --border, --text-primary…) for anyone extending the system later, pointing at the same values. Two names, one source of truth — no drift. ═══════════════════════════════════════════════════════ */ /* ── 1. Design tokens — Midnight (default theme) ── */ :root { /* Colour — deep marine blue, almost black, warm ivory text, muted gold accent. Deliberately not pure black / not bright blue / no neon — see docs/ARCHITECTURE.md, "Theme system". */ --paper: #0b1119; /* page background */ --surface: #121a25; /* card / panel */ --surface-2: #1a2430; /* inset / recessed / input bg */ --ink: #eae4d6; /* primary text — warm ivory */ --muted: #8b93a3; /* secondary text */ --rule: rgba(234,228,214,.11); /* borders / dividers */ --rule-color: rgba(234,228,214,.11); /* alias used by inline styles */ --brass: #b6925c; /* muted gold accent — same value as the public landing page */ --brass-dark: #d9bd8c; /* hover — lighter, not darker: this is a dark surface */ --brass-soft: rgba(182,146,92,.16); /* light accent fill */ --ok: #7fae8e; --warn: #cf9f5f; --danger: #c1786a; --complete: var(--ok); --incomplete: var(--warn); /* Geometry — shared by every theme, not themed */ --radius: 12px; --radius-sm: 8px; --radius-xs: 4px; --radius-pill: 999px; /* Shadow — dark surface: depth reads better as a soft black falloff than the warm-tinted shadow the light themes use */ --shadow-sm: 0 1px 3px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.24); --shadow-md: 0 2px 8px rgba(0,0,0,.32), 0 10px 28px rgba(0,0,0,.28); --shadow-lg: 0 6px 20px rgba(0,0,0,.38), 0 20px 52px rgba(0,0,0,.34); /* Sidebar */ --sidebar-w: 240px; --sidebar-bg: #0d1420; --sidebar-ink: #c7cedb; --sidebar-dim: rgba(199,206,219,.68); --sidebar-hover-bg: rgba(255,255,255,.05); --sidebar-active-bg: rgba(182,146,92,.16); --sidebar-active-ink:#f0dfc0; --topbar-h: 54px; /* Motion */ --transition-fast: 120ms ease; --transition-base: 180ms ease; --focus-ring: 0 0 0 3px var(--brass-soft); /* Semantic aliases — same values, vocabulary for future components */ --background: var(--paper); --background-elevated: var(--surface); --panel: var(--surface); --panel-hover: var(--surface-2); --border: var(--rule); --border-subtle: var(--rule); --accent: var(--brass); --accent-soft: var(--brass-soft); --success: var(--ok); --warning: var(--warn); --text-primary: var(--ink); --text-secondary: var(--muted); --text-muted: var(--muted); /* Deliberately NOT redefined per theme — toasts stay a fixed dark surface regardless of theme (like most snackbar/toast patterns), rather than tracking --ink, which flips light/dark per theme and would otherwise pair light text with a light background on Midnight/Graphite. */ --toast-bg: #23201b; --toast-ink: #f6f3ec; } :root, .theme-graphite { color-scheme: dark; } .theme-heritage, .theme-ivory { color-scheme: light; } /* ── 2. Reset & base ── */ *, *::before, *::after { box-sizing: border-box; } * { -webkit-font-smoothing: antialiased; } html, body { height: 100%; margin: 0; } body { background: var(--paper); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.55; } a { color: var(--brass-dark); } a:hover { color: var(--ink); } /* Universal keyboard-focus indicator. Previously only a handful of components (buttons, form fields, one collapsible header) had any custom focus-visible style — everything else silently fell back to the browser default outline, which is a barely-visible near-black ring on three of the four dark-sidebar themes. --brass-dark is used for the general case because it's already the token calibrated to read clearly against --paper in every theme (verified 5.3:1–10.5:1). The sidebar gets its own rule: Heritage pairs a dark sidebar with a light main content area, so a single token can't serve both — the sidebar needs a color that works against --sidebar-bg specifically, which is exactly what --sidebar-active-ink already is. */ /* Form fields are excluded here — .form-control/.form-select/ .form-check-input already get a dedicated focus treatment below, and adding this too would double up into two concentric rings. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brass-dark); outline-offset: 2px; border-radius: 3px; } .sidebar-link:focus-visible, .sidebar-brand:focus-visible, .sidebar-toggle:focus-visible { outline: 2px solid var(--sidebar-active-ink); outline-offset: -2px; border-radius: 3px; } /* ── 3. App shell ── */ .app-shell { display: flex; min-height: 100vh; } /* ── 4. Sidebar ── */ .app-sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; z-index: 100; } .sidebar-brand { display: flex; flex-direction: row; align-items: center; padding: 1.1rem 1.1rem .9rem; text-decoration: none; border-bottom: 1px solid var(--rule); gap: .7rem; } .sidebar-brand > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sidebar-brand-mark { width: 26px; height: 26px; color: var(--brass); display: grid; place-items: center; flex-shrink: 0; } .sidebar-brand-mark svg { width: 100%; height: 100%; } .sidebar-brand-name { font-family: 'Spectral', serif; font-size: 1.2rem; font-weight: 600; color: var(--sidebar-ink); letter-spacing: .01em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-brand-sub { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); font-family: 'IBM Plex Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-nav { flex: 1; padding: .65rem 0; } .sidebar-section-label { display: block; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sidebar-dim); font-weight: 600; padding: .85rem 1.2rem .3rem; } .sidebar-link { display: flex; align-items: center; gap: .6rem; padding: .52rem 1.2rem; color: var(--sidebar-ink); text-decoration: none; font-size: .875rem; font-weight: 450; transition: background .11s, color .11s; border: none; background: none; width: 100%; cursor: pointer; line-height: 1.4; text-align: left; } .sidebar-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-active-ink); } .sidebar-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-ink); } .sidebar-link svg { flex-shrink: 0; opacity: .75; } .sidebar-link.active svg { opacity: 1; color: var(--brass); } .sidebar-footer { padding: .6rem 0 1rem; border-top: 1px solid var(--rule); } .sidebar-user { font-size: .7rem; color: var(--sidebar-dim); padding: .45rem 1.2rem .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-link-danger:hover { color: var(--danger); background: var(--sidebar-hover-bg); } .sidebar-section-label { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sidebar-dim); font-weight: 600; padding: .75rem 1.2rem .2rem; margin-top: .25rem; border-top: 1px solid var(--rule); } .sidebar-link-sub { padding-left: 1.1rem; font-size: .82rem; color: var(--sidebar-dim); gap: .45rem; } .sidebar-link-sub:hover { color: var(--sidebar-ink); } .sidebar-link-sub.active { color: var(--sidebar-active-ink); } .sidebar-col-emoji { font-size: .95rem; line-height: 1; flex-shrink: 0; } .sidebar-col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── 5. App body / topbar ── */ .app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-topbar { display: none; height: var(--topbar-h); background: var(--sidebar-bg); border-bottom: 1px solid var(--rule); align-items: center; padding: 0 1rem; gap: .75rem; position: sticky; top: 0; z-index: 99; } .topbar-brand { font-family: 'Spectral', serif; font-size: 1.1rem; font-weight: 600; color: var(--sidebar-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--sidebar-hover-bg); border: 1px solid var(--rule); border-radius: var(--radius-xs); color: var(--sidebar-ink); cursor: pointer; flex-shrink: 0; padding: 0; } .sidebar-toggle:hover { background: var(--sidebar-active-bg); } /* ── 6. Main content ── */ .app-main { flex: 1; padding: 2rem 2.25rem 3rem; max-width: 1280px; width: 100%; } /* ── 7. Typography ── */ .font-serif { font-family: 'Spectral', Georgia, serif; } .accession { font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--brass); letter-spacing: .02em; font-size: .82em; } .eyebrow { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .section-head { font-family: 'Spectral', serif; font-size: 1.55rem; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.15; } .detail-title { font-family: 'Spectral', Georgia, serif; font-size: 2.1rem; line-height: 1.1; margin-bottom: .15rem; font-weight: 600; } .dialog-title { font-family: 'Spectral', Georgia, serif; font-size: 1.5rem; line-height: 1.2; } .hairline { height: 1px; background: var(--rule); border: 0; opacity: 1; } .text-muted-ink { color: var(--muted); } .muted-link { color: var(--muted); text-decoration: none; } .muted-link:hover { color: var(--ink); } .placeholder-code { font-family: 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; } .preline { white-space: pre-line; } .value-mono { font-family: 'IBM Plex Mono', monospace; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .page-actions, .form-actions, .detail-actions, .delete-actions { display: flex; flex-wrap: wrap; gap: .5rem; } /* ── 8. Panels / cards ── */ .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .panel-pad { padding: 1.5rem; } .panel-flex { display: flex; align-items: center; gap: 1rem; } .panel-prose { font-size: .93rem; line-height: 1.65; } .card-pad { padding: 1.25rem; } .app-alert { border-radius: var(--radius-sm); } /* ── 9. Stat tiles ── */ .stat { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow-sm); height: 100%; transition: box-shadow .15s, transform .15s; } .stat:hover { box-shadow: var(--shadow-md); } .stat-warn { border-top: 3px solid var(--warn); } .stat .num { font-family: 'Spectral', serif; font-size: 2.3rem; line-height: 1; color: var(--ink); font-weight: 600; } .stat .num.value-mono { font-size: 1.8rem; } .stat .lbl { margin-top: .4rem; } /* ── 10. Item grid cards ── */ .item-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; height: 100%; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; display: flex; flex-direction: column; } .item-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .item-thumb { aspect-ratio: 4 / 3; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .item-thumb img { width: 100%; height: 100%; object-fit: cover; } .item-thumb .placeholder { font-family: 'IBM Plex Mono', monospace; font-size: .65rem; color: var(--muted); letter-spacing: .1em; } .item-card .body { padding: .9rem 1rem 1.1rem; flex: 1; } .item-card .title { font-family: 'Spectral', serif; font-size: 1.08rem; color: var(--ink); text-decoration: none; line-height: 1.25; font-weight: 500; display: block; } .item-card .title:hover { color: var(--brass-dark); } .item-card .accession { font-size: .68rem; } .item-card-meta { font-size: .78rem; color: var(--muted); } .list-row { border-bottom: 1px solid var(--rule); } /* ── Item list rows (list view) ── */ .item-list-rows { display: flex; flex-direction: column; gap: 8px; } .item-list-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px 14px; box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s, transform .12s; } .item-list-row:hover { border-color: var(--muted); box-shadow: var(--shadow-md); transform: translateY(-1px); } .item-list-thumb { width: 52px; height: 52px; border-radius: 8px; background: var(--surface-2); flex-shrink: 0; overflow: hidden; display: block; text-decoration: none; } .item-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .item-list-thumb-empty { width: 100%; height: 100%; display: grid; place-items: center; } .item-list-main { flex: 1; min-width: 0; } .item-list-title { display: block; font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; line-height: 1.3; } .item-list-title:hover { color: var(--brass-dark); } .item-list-meta { display: flex; flex-wrap: wrap; gap: 0 .5rem; font-size: .76rem; color: var(--muted); margin-top: 2px; } .item-list-meta span + span::before { content: '·'; margin-right: .3rem; } .item-list-meta .accession { font-size: .7rem; } .item-list-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .item-list-value { font-family: 'Spectral', serif; font-size: 1rem; color: var(--brass-dark); min-width: 5ch; text-align: right; } /* completeness dot */ .completeness-dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75); z-index: 1; } .completeness-dot.is-complete { background: var(--complete); } .completeness-dot.is-incomplete { background: var(--incomplete); } /* ── 11. Table / list view ── */ .list-table-wrap, .bulk-table-wrap { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .bulk-table-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .collection-table { margin: 0; min-width: 980px; --bs-table-bg: var(--surface); --bs-table-striped-bg: var(--surface-2); --bs-table-border-color: var(--rule); } .collection-table th { font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; background: var(--surface-2); vertical-align: middle; } .collection-table td { font-size: .88rem; border-color: var(--rule); vertical-align: middle; } .table-title { color: var(--ink); font-weight: 600; text-decoration: none; } .table-title:hover { color: var(--brass-dark); } .status-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border: 1px solid var(--rule); border-radius: var(--radius-pill); font-size: .68rem; white-space: nowrap; } .status-pill.is-complete { color: var(--complete); background: rgba(74,122,74,.08); border-color: rgba(74,122,74,.25); } .status-pill.is-incomplete { color: var(--incomplete); background: rgba(176,125,42,.09); border-color: rgba(176,125,42,.28); } /* Item status badges */ .item-status-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border: 1px solid var(--rule); border-radius: var(--radius-pill); font-size: .68rem; font-weight: 600; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; } .item-status-badge--owned { color: var(--complete); background: rgba(74,122,74,.08); border-color: rgba(74,122,74,.25); } .item-status-badge--wishlist{ color: #9b59b6; background: rgba(155,89,182,.09); border-color: rgba(155,89,182,.28); } .item-status-badge--sold { color: var(--muted); background: rgba(120,120,120,.07); border-color: rgba(120,120,120,.22); } .item-status-badge--archived{ color: var(--muted); background: rgba(120,120,120,.05); border-color: rgba(120,120,120,.15); } .bulk-edit-table { min-width: 1500px; table-layout: fixed; } .bulk-edit-table th, .bulk-edit-table td { padding: .55rem; vertical-align: top; } .bulk-edit-table th { position: sticky; top: 0; z-index: 2; } .bulk-edit-table th:nth-child(1), .bulk-edit-table td:nth-child(1) { width: 120px; } .bulk-edit-table th:nth-child(2), .bulk-edit-table td:nth-child(2) { width: 230px; } .bulk-edit-table th:nth-child(3), .bulk-edit-table td:nth-child(3), .bulk-edit-table th:nth-child(4), .bulk-edit-table td:nth-child(4), .bulk-edit-table th:nth-child(6), .bulk-edit-table td:nth-child(6), .bulk-edit-table th:nth-child(7), .bulk-edit-table td:nth-child(7), .bulk-edit-table th:nth-child(8), .bulk-edit-table td:nth-child(8), .bulk-edit-table th:nth-child(9), .bulk-edit-table td:nth-child(9) { width: 145px; } .bulk-edit-table th:nth-child(5), .bulk-edit-table td:nth-child(5) { width: 130px; } .bulk-edit-table th:nth-child(10), .bulk-edit-table td:nth-child(10) { width: 120px; } .bulk-edit-table th:nth-child(11), .bulk-edit-table td:nth-child(11) { width: 80px; } .bulk-edit-table th:nth-child(12), .bulk-edit-table td:nth-child(12) { width: 112px; } .bulk-edit-table .form-control, .bulk-edit-table .form-select { width: 100%; min-width: 0; font-size: .82rem; } .bulk-edit-table .bulk-name-input { min-width: 0; } .bulk-edit-table .field-error { max-width: 100%; } .field-error { margin-top: .2rem; color: var(--danger); font-size: .72rem; line-height: 1.2; } /* Bare Bootstrap tables (not just .collection-table) — used by the import wizard's preview/mapping tables. Bootstrap reads table colour entirely from these custom properties, so redeclaring them here is enough to theme every plain in the app for free. */ .table { --bs-table-bg: var(--surface); --bs-table-striped-bg: var(--surface-2); --bs-table-border-color: var(--rule); color: var(--ink); } /* Row-state variants (import preview: error/warning rows) — Bootstrap's own .table-danger/.table-warning hardcode light-mode colours (incl. literal black text), so every theme needs its own version. color-mix blends the semantic colour into this theme's own surface, so the tint is always correctly light-on-dark or dark-on-light. */ .table-danger { --bs-table-bg: color-mix(in srgb, var(--danger) 14%, var(--surface)); --bs-table-color: var(--ink); --bs-table-border-color: color-mix(in srgb, var(--danger) 32%, var(--rule)); } .table-warning { --bs-table-bg: color-mix(in srgb, var(--warn) 14%, var(--surface)); --bs-table-color: var(--ink); --bs-table-border-color: color-mix(in srgb, var(--warn) 32%, var(--rule)); } .table-success { --bs-table-bg: color-mix(in srgb, var(--ok) 14%, var(--surface)); --bs-table-color: var(--ink); --bs-table-border-color: color-mix(in srgb, var(--ok) 32%, var(--rule)); } /* Bare Bootstrap alerts — same story as .table above: no token styling existed anywhere, so these fell back to Bootstrap's stock bright red/ yellow regardless of theme. */ .alert { border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .88rem; } .alert-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, var(--rule)); } .alert-warning { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 30%, var(--rule)); } .alert-success { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 30%, var(--rule)); } .alert-info { color: var(--ink); background: var(--surface-2); border-color: var(--rule); } /* Import-wizard step indicator — replaces raw Bootstrap .badge.text-bg-dark/secondary/light, which ignored the theme entirely (literal greys/black regardless of surface). */ .import-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .import-step { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 500; border: 1px solid var(--rule); color: var(--muted); background: var(--surface); } .import-step__num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: .66rem; font-family: 'IBM Plex Mono', monospace; background: var(--surface-2); color: var(--muted); flex-shrink: 0; } .import-step.is-current { border-color: var(--brass); color: var(--ink); background: var(--brass-soft); } .import-step.is-current .import-step__num { background: var(--brass); color: var(--paper); } .import-step.is-done { color: var(--ink); } .import-step.is-done .import-step__num { background: var(--ok); color: var(--paper); } /* ── 12. Buttons ── */ .btn { border-radius: var(--radius-sm); font-weight: 500; letter-spacing: .01em; } .btn-brass { background: var(--brass); border-color: var(--brass); color: #fff; } .btn-brass:hover { background: var(--brass-dark); border-color: var(--brass-dark); color: #fff; } .btn-brass:focus-visible { box-shadow: 0 0 0 .2rem var(--brass-soft); } .btn-outline-ink { border-color: var(--rule); color: var(--ink); background: var(--surface); } .btn-outline-ink:hover { background: var(--surface-2); color: var(--ink); border-color: var(--muted); } .btn-quiet { color: var(--muted); background: transparent; border: 0; font-size: .8rem; padding-left: 0; } .btn-quiet:hover { color: var(--ink); background: transparent; } .btn-danger { letter-spacing: .01em; } .btn-danger-text { color: var(--danger, #c0392b); } /* Inline confirm — a quieter alternative to native confirm() popups for low-stakes removals (a reference, a document, an image) that happen mid-edit, where navigating to a full confirm page would be disruptive. First click arms it; a second click within the window proceeds as a normal click (form submit / handler). See collection/static/collection/ inline-confirm.js. */ [data-confirm-inline].is-confirming { color: var(--danger, #c0392b) !important; font-weight: 600; } [data-confirm-inline].is-confirming svg { stroke: var(--danger, #c0392b); } .detail-breadcrumb { font-size: .8rem; color: var(--muted); } .form-inline { display: inline; } .export-action { display: block; white-space: normal; line-height: 1.25; } .export-action .export-detail { display: block; margin-top: .2rem; font-size: .8rem; color: var(--muted); } .export-card-stack { display: grid; gap: .75rem; } .export-form-section { padding: 1rem 0; border-top: 1px solid var(--rule); } .export-form-section:first-child { padding-top: 0; border-top: 0; } .export-form-section:last-child { padding-bottom: 0; } .export-option-row { display: flex; gap: 1rem; flex-wrap: wrap; } .export-submit-row { display: flex; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--rule); } /* ── 13. Badges / chips ── */ .filter-chip { display: inline-flex; align-items: center; font-size: .72rem; padding: 3px 10px; background: var(--brass-soft); color: var(--brass-dark); border: 1px solid var(--brass-soft); border-radius: var(--radius-pill); text-decoration: none; transition: background .1s, border-color .1s; white-space: nowrap; } .filter-chip:hover { background: var(--brass-soft); border-color: var(--brass); color: var(--brass-dark); } .chip { display: inline-block; font-size: .67rem; letter-spacing: .03em; background: var(--surface-2); color: var(--muted); border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 2px 9px; margin: 2px 2px 0 0; transition: border-color .1s, color .1s; } .chip--xs { font-size: .62rem; padding: 1px 6px; } .tag-picker { display: flex; flex-wrap: wrap; gap: .25rem; } .tag-choice { cursor: pointer; } .tag-choice:hover { color: var(--ink); border-color: var(--brass); } /* Context-aware country/period quick-add suggestions (item form). */ .suggestion-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; } .suggestion-chip { font-family: inherit; font-size: .67rem; letter-spacing: .03em; background: var(--surface-2); color: var(--muted); border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 2px 9px; cursor: pointer; transition: border-color .1s, color .1s, background .1s; } .suggestion-chip:hover { color: var(--ink); border-color: var(--brass); background: var(--brass-soft); } .suggestion-chip:disabled { opacity: .5; cursor: wait; } .emoji-picker-preview { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; font-size: 1.3rem; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); } .emoji-picker-categories { max-height: 16rem; overflow-y: auto; max-width: 24rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .6rem; background: var(--surface-2); } .emoji-picker-category + .emoji-picker-category { margin-top: .6rem; } .emoji-picker-category-label { font-size: .68rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; } .emoji-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr)); gap: .3rem; } .emoji-picker-option { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; font-size: 1.1rem; line-height: 1; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .1s, background .1s; } .emoji-picker-option:hover { border-color: var(--brass); } .emoji-picker-option.is-selected { border-color: var(--brass); background: var(--brass-soft); } .missing-panel { background: var(--brass-soft); border: 1px solid var(--rule); border-left: 3px solid var(--incomplete); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-top: 1rem; font-size: .85rem; } .missing-panel .eyebrow { color: var(--incomplete); } /* ── 14. Forms ── */ .form-label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: .35rem; } .form-control, .form-select { border-radius: var(--radius-sm) !important; border-color: var(--rule); background: var(--surface); color: var(--ink); box-shadow: none !important; } .form-control:focus, .form-select:focus { border-color: var(--brass); box-shadow: var(--focus-ring) !important; background: var(--surface); } .form-control::placeholder { color: var(--muted); opacity: .7; } .form-control:disabled, .form-select:disabled { background: var(--surface-2); color: var(--muted); opacity: .7; } /* Token-driven so every theme gets a correct checkbox/radio for free — Bootstrap's own default assumes a light page and hardcodes white. */ .form-check-input { background-color: var(--surface-2); border-color: var(--rule); } .form-check-input:checked { background-color: var(--brass); border-color: var(--brass); } .form-check-input:focus { border-color: var(--brass); box-shadow: var(--focus-ring); } .form-text { color: var(--muted); font-size: .78rem; } .item-edit-form .panel-pad, .document-editor { padding: 1.35rem; } .item-edit-form .row.g-3 { --bs-gutter-y: .9rem; } .item-edit-form textarea.form-control { min-height: 96px; } .form-savebar { padding: 1rem 0 0; border-top: 1px solid var(--rule); } /* Edit-mode image dropzone */ .drop-zone { border: 2px dashed var(--rule); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; } .drop-zone.is-dragover { border-color: var(--brass); background: var(--brass-soft); } .drop-zone-inner { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.25rem 1rem; text-align: center; } .drop-zone-icon { font-size: 1.75rem; opacity: .5; line-height: 1; } .drop-zone-label { font-size: .875rem; color: var(--ink); font-weight: 500; } .drop-zone-hint { font-size: .75rem; color: var(--muted); } /* Create-mode image dropzone */ .dropzone-create { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.5rem 1rem; border: 2px dashed var(--rule); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; } .dropzone-create:hover { border-color: var(--brass); background: var(--brass-soft); } .dropzone-create input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .dropzone-create-icon { font-size: 1.75rem; opacity: .5; line-height: 1; } .dropzone-create-label { font-size: .875rem; color: var(--ink); font-weight: 500; } .dropzone-create-hint { font-size: .75rem; color: var(--muted); } /* Reference source suggestion chips */ .ref-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: 1.5rem; } .ref-chip { font-size: .72rem; padding: .15rem .55rem; border: 1px solid var(--rule); border-radius: 99px; background: var(--surface-2); color: var(--muted); cursor: pointer; line-height: 1.5; transition: border-color .12s, color .12s, background .12s; } .ref-chip:hover { border-color: var(--brass); color: var(--brass); background: var(--brass-soft); } .ref-editor { padding-top: 1.25rem; } .ref-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--rule); } .ref-editor #addRefBtn { white-space: nowrap; } .ref-form { padding: 1rem 0; border-bottom: 1px solid var(--rule); } .ref-form:last-child { border-bottom: none; padding-bottom: 0; } .ref-form-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(160px, .85fr) minmax(0, 1.15fr) auto; gap: .75rem; align-items: end; } .ref-form .form-label { margin-bottom: .25rem; } .ref-notes-field { grid-column: 1 / -1; } .ref-delete-cell { min-width: 64px; display: flex; justify-content: flex-end; align-items: center; min-height: 31px; } .ref-delete-check { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: var(--muted); font-size: .74rem; } .ref-delete-check input { margin: 0; } .document-editor-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--rule); } .document-list { list-style: none; padding: 0; margin: 0 0 1rem; } .document-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .72rem 0; border-bottom: 1px solid var(--rule); } .document-row:last-child { border-bottom: 0; } .document-ext { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 24px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; } .document-title { color: var(--ink); font-weight: 600; text-decoration: none; min-width: 0; overflow-wrap: anywhere; } .document-title:hover { color: var(--brass-dark); } .document-meta { color: var(--muted); font-size: .76rem; white-space: nowrap; } .document-remove-form { margin: 0; } .document-empty { padding: 1rem; border: 1px dashed var(--rule); border-radius: var(--radius-sm); background: var(--surface-2); } .document-empty-title { color: var(--ink); font-weight: 600; margin-bottom: .2rem; } .document-upload-form { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(220px, 1fr) auto; gap: .75rem; align-items: end; padding-top: 1rem; border-top: 1px solid var(--rule); } .media-preview { max-width: 220px; max-height: 140px; object-fit: cover; border: 1px solid var(--rule); border-radius: var(--radius-xs); } /* ── 15. Filters bar ── */ .filterbar { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow-sm); } /* ── 16. Gallery (detail page) ── */ .gallery-main { background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius); aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-md); position: relative; } .gallery-main img { width: 100%; height: 100%; object-fit: contain; } .gallery-main-zoom { position: absolute; bottom: 10px; right: 10px; background: rgba(44,40,35,.45); color: #fff; border: none; border-radius: var(--radius-sm); padding: 4px 9px; font-size: .7rem; cursor: pointer; backdrop-filter: blur(4px); opacity: 0; transition: opacity .15s; } .gallery-main:hover .gallery-main-zoom { opacity: 1; } .thumb-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; } .thumb-strip .thumb { width: 78px; height: 78px; object-fit: cover; border: 1px solid var(--rule); border-radius: var(--radius-xs); cursor: pointer; opacity: .8; transition: opacity .1s, border-color .1s; } .thumb-strip .thumb:hover { opacity: 1; } .thumb-strip .thumb.is-main { border-color: var(--brass); opacity: 1; outline: 2px solid var(--brass); outline-offset: 1px; } .thumb-wrap { position: relative; width: 78px; } .thumb-wrap[draggable="true"] { cursor: grab; } .thumb-wrap.is-dragging { opacity: .45; cursor: grabbing; } .thumb-strip.is-sortable { min-height: 120px; } .thumb-actions { display: flex; gap: 3px; justify-content: center; margin-top: .25rem; } .thumb-actions .btn { min-width: 30px; min-height: 28px; padding: 0 6px; font-size: .6rem; } .image-export-toggle { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-top: .25rem; font-size: .68rem; color: var(--muted); line-height: 1.1; } .image-export-toggle input { margin: 0; } /* ── 17. Definition list of facts ── */ .facts { margin: 0; } .facts .row-f { padding: .68rem 0; border-bottom: 1px solid var(--rule); } .facts .row-f:last-child { border-bottom: 0; } .facts dt { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .facts dd { margin: .15rem 0 0; font-size: .97rem; color: var(--ink); } /* ── 18. Empty states ── */ .empty { text-align: center; padding: 4rem 1.5rem; color: var(--muted); border: 1.5px dashed var(--rule); border-radius: var(--radius); background: var(--surface); } .empty h3, .empty h2 { font-family: 'Spectral', serif; color: var(--ink); margin-bottom: .5rem; } .empty-title { font-family: 'Spectral', serif; font-size: 1.1rem; color: var(--ink); margin-bottom: .4rem; } .empty-hint { font-size: .88rem; color: var(--muted); } /* ── 18b. Error pages (404/403) — collection/_error_base.html ── */ .error-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 2rem 1.5rem; background: var(--paper); text-align: center; } .error-shell__mark { width: 34px; height: 34px; color: var(--brass); opacity: .85; } .error-shell__mark svg { width: 100%; height: 100%; } .error-shell__code { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .error-shell__title { font-family: 'Spectral', serif; font-weight: 600; font-size: 1.6rem; color: var(--ink); margin: 0; max-width: 26ch; } .error-shell__text { color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 38ch; margin: 0; } .error-shell__actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; } /* ── 19. Auth page (entrance) ── */ .auth-page { min-height: 100vh; display: flex; background: var(--paper); } .auth-shell { display: flex; width: 100%; min-height: 100vh; } .auth-hero { flex: 0 0 46%; background: linear-gradient(155deg, #2d2c23 0%, #191910 100%); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 4rem 4.5rem; text-align: left; position: relative; overflow: hidden; } .auth-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(138,109,59,.20), transparent 60%); } .auth-hero-content { position: relative; z-index: 1; max-width: 30rem; } .auth-hero-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 3.5rem; } .auth-hero-mark { width: 26px; height: 26px; color: var(--brass); flex-shrink: 0; } .auth-hero-mark svg { width: 100%; height: 100%; } .auth-hero-name { display: block; font-family: 'Spectral', serif; font-size: 1.15rem; font-weight: 600; color: #f4f0e6; letter-spacing: .01em; line-height: 1.1; } .auth-hero-sub { display: block; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-top: 3px; font-family: 'IBM Plex Mono', monospace; } .auth-hero-headline { font-family: 'Spectral', serif; font-size: 2.35rem; font-weight: 600; line-height: 1.2; color: #f4f0e6; margin-bottom: 1.15rem; } .auth-hero-text { font-size: .98rem; line-height: 1.6; color: rgba(230,225,212,.72); margin-bottom: 2.5rem; max-width: 26rem; } .auth-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .auth-features li { position: relative; padding-left: 20px; color: rgba(230,225,212,.82); font-size: .92rem; line-height: 1.4; } .auth-features li::before { content: ''; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; background: var(--brass); } .auth-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 2.5rem; background: var(--surface); } .auth-form-wrap { width: 100%; max-width: 380px; } .auth-form-mark { display: none; width: 30px; height: 30px; color: var(--brass); margin-bottom: 1.5rem; } .auth-form-mark svg { width: 100%; height: 100%; } .auth-h1 { font-size: 1.5rem; text-align: left; } .auth-p { font-size: .9rem; color: var(--muted); text-align: left; line-height: 1.5; } .auth-form-wrap a { color: var(--brass-dark); } .auth-form-wrap label:not(.visually-hidden) { font-size: .84rem; color: var(--muted); font-weight: 500; } .auth-form-wrap .form-control { padding: .6rem .8rem; } .auth-form-wrap .btn { padding: .6rem 1rem; font-size: .92rem; } .auth-form-wrap .alert { border-radius: var(--radius-sm); font-size: .875rem; } /* ── 20. Drag-reorder list ── */ .period-order-item { background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); user-select: none; } .period-order-item:hover { background: var(--surface); } .period-order-item .drag-handle { font-size: .85rem; color: var(--muted); cursor: grab; } /* ── 21. Misc ── */ footer.site { color: var(--muted); font-size: .78rem; } /* ── 22. Theme picker (settings) ── */ .theme-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .65rem; } .theme-picker-card { background: var(--surface); border: 2px solid var(--rule); border-radius: var(--radius); padding: .85rem 1rem; cursor: pointer; text-align: left; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .theme-picker-card:hover { border-color: var(--brass); box-shadow: var(--shadow-sm); } .theme-picker-card.is-active { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); } .theme-swatch { display: flex; gap: 4px; margin-bottom: .55rem; } .theme-swatch span { flex: 1; height: 24px; border-radius: 4px; } .theme-picker-name { font-weight: 600; font-size: .9rem; color: var(--ink); } .theme-picker-desc { font-size: .72rem; color: var(--muted); margin-top: 2px; line-height: 1.4; } /* ── 22b. Choose-collection page ── */ .choose-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; max-width: 720px; } .choose-col-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration: none; transition: border-color .12s, box-shadow .12s; } .choose-col-card:hover { border-color: var(--brass); box-shadow: var(--shadow-sm); text-decoration: none; } .choose-col-emoji { font-size: 2rem; line-height: 1; margin-bottom: .25rem; } .choose-col-name { font-weight: 600; font-size: .95rem; color: var(--ink); } .choose-col-type { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } /* ── Form create context header ── */ .form-create-context { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; background: var(--brass-soft); border: 1px solid rgba(138,109,59,.25); border-radius: var(--radius); max-width: 400px; } .form-create-context-emoji { font-size: 1.4rem; line-height: 1; } .form-create-context-col { font-weight: 600; font-size: .9rem; color: var(--ink); } .form-create-context-type { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .required-star { color: var(--danger, #c0392b); margin-left: 2px; } details[data-fp="purchase"] > summary { user-select: none; } details[data-fp="purchase"][open] .details-chevron { transform: rotate(90deg); } .details-chevron { transition: transform .15s; display: inline-block; } /* ── 23. References ── */ .ref-list { display: flex; flex-direction: column; gap: 0; } .ref-row { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); } .ref-row:last-child { border-bottom: none; } .ref-row-main { flex: 1; min-width: 0; } .ref-source-chip { display: inline-block; background: var(--brass-soft); color: var(--brass-dark); font-family: 'IBM Plex Mono', monospace; font-size: .62rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-xs); margin-bottom: 3px; } .ref-title { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); text-decoration: none; line-height: 1.35; } a.ref-title:hover { color: var(--brass-dark); } .ref-notes { font-size: .8rem; color: var(--muted); margin-top: 2px; } .ref-open-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--rule); color: var(--muted); text-decoration: none; transition: border-color .12s, color .12s; margin-top: 1px; } .ref-open-btn:hover { border-color: var(--brass); color: var(--brass-dark); } .ref-delete-form { margin: 0; margin-top: 1px; } .ref-delete-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--rule); color: var(--muted); background: none; cursor: pointer; transition: border-color .12s, color .12s; } .ref-delete-btn:hover { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); } /* ── 24. Dashboard ── */ .dash-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4rem 1rem; } .dash-empty-icon { font-size: 4rem; line-height: 1; margin-bottom: 1.25rem; } .dash-empty-head { font-family: 'Spectral', serif; font-size: 1.75rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; } .dash-empty-sub { color: var(--muted); font-size: .95rem; line-height: 1.65; max-width: 380px; } .type-card-inner { cursor: pointer; border-radius: var(--radius); transition: all .15s; } .onboarding-head { font-size: 2rem; } .type-card-emoji { font-size: 2rem; line-height: 1; } .type-card-label { font-size: .93rem; color: var(--ink); font-weight: 600; } .type-card-desc { font-size: .72rem; line-height: 1.3; } .empty-page { max-width: 480px; margin: 4rem auto; text-align: center; } .empty-page-icon { font-size: 3rem; margin-bottom: 1.25rem; opacity: .4; } .empty-page-body { color: var(--muted); font-size: .95rem; line-height: 1.65; margin-bottom: 1.5rem; } .dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .dash-count { font-family: 'Spectral', serif; font-size: 3rem; font-weight: 600; color: var(--ink); line-height: 1; margin: 0; display: flex; align-items: baseline; gap: .4rem; } .dash-count-unit { font-size: 1.2rem; font-weight: 400; color: var(--muted); } .dash-subtitle { color: var(--muted); font-size: .9rem; margin-top: .4rem; } /* Dashboard stats row */ .dash-stats-row { display: flex; flex-wrap: wrap; gap: .75rem; } .dash-stat-card { flex: 1 1 110px; min-width: 96px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .9rem 1.1rem; box-shadow: var(--shadow-sm); overflow: hidden; } .dash-stat-card--warn { border-color: var(--incomplete); } .dash-stat-card--wishlist { border-color: rgba(155,89,182,.4); color: inherit; } .dash-stat-card--wishlist:hover { background: rgba(155,89,182,.05); } .dash-stat-card--muted { border-color: var(--rule); opacity: .75; color: inherit; } .dash-stat-card--muted:hover { opacity: 1; } a.dash-stat-card { text-decoration: none; } .dash-stat-value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: break-word; } .dash-stat-value--md { font-size: 1.4rem; } .dash-stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: .25rem; } /* Collection tiles */ .col-tile { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.15rem; text-decoration: none; transition: border-color .12s, box-shadow .12s; box-shadow: var(--shadow-sm); height: 100%; } .col-tile:hover { border-color: var(--brass); box-shadow: var(--shadow-md); } .col-tile-icon { font-size: 2rem; line-height: 1; margin-bottom: .3rem; } .col-tile-name { font-weight: 600; font-size: .95rem; color: var(--ink); line-height: 1.25; } .col-tile-type { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; } .col-tile-meta { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-top: .5rem; } .col-list-emoji { font-size: 1.1rem; flex-shrink: 0; line-height: 1; } /* ── 25. Collection detail ── */ .collection-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .collection-hero-identity { display: flex; align-items: flex-start; gap: 1rem; } .collection-hero-icon { font-size: 2.8rem; line-height: 1; flex-shrink: 0; margin-top: .1rem; } .collection-hero-desc { color: var(--muted); font-size: .92rem; margin-top: .5rem; max-width: 480px; } .collection-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; } .collection-stats-row { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow-sm); } .collection-stat { } .collection-stat-value { font-family: 'Spectral', serif; font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.1; } .collection-stat-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; } .collection-stat-progress { flex: 1; min-width: 140px; } .progress-bar-wrap { height: 6px; background: var(--rule); border-radius: 99px; overflow: hidden; margin-bottom: 4px; } .progress-bar-fill { height: 100%; background: var(--brass); border-radius: 99px; transition: width .3s; } .section-subhead { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-weight: 500; } .attention-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.25rem; text-decoration: none; transition: border-color .12s, box-shadow .12s; box-shadow: var(--shadow-sm); } .attention-card:hover { border-color: var(--brass); box-shadow: var(--shadow-md); } .attention-card-count { font-family: 'Spectral', serif; font-size: 2rem; font-weight: 600; color: var(--ink); line-height: 1; } .attention-card-label { font-size: .88rem; font-weight: 600; color: var(--ink); } .attention-card-hint { font-size: .78rem; color: var(--muted); } /* ── 26. Toast notifications ── */ .toast-stack { position: fixed; bottom: 22px; right: 22px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .a-toast { background: var(--toast-bg); color: var(--toast-ink); padding: 11px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: .88rem; animation: toast-in .2s ease; max-width: 340px; pointer-events: auto; } .a-toast-success { background: #3a5e40; } .a-toast-error { background: #7a2e24; } .a-toast-warning { background: #7a5010; } @keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ── 27. Sidebar backdrop + mobile ── */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(34,33,26,.5); z-index: 1039; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .sidebar-backdrop.is-visible { display: block; } @media (max-width: 900px) { .app-sidebar { position: fixed; top: 0; left: 0; height: 100%; z-index: 1040; transform: translateX(-100%); transition: transform .24s cubic-bezier(.4,0,.2,1); } .app-sidebar.is-open { transform: none; } .app-topbar { display: flex; } .app-main { padding: 1.5rem 1.25rem 2.5rem; } .auth-hero { display: none; } .auth-form-mark { display: block; } .auth-form-side { padding: 3rem 1.5rem; align-items: flex-start; } } @media (max-width: 576px) { .app-main { padding: 1.2rem 1rem 2rem; } .stat .num { font-size: 1.85rem; } .stat .num.value-mono { font-size: 1.55rem; } .section-head { font-size: 1.3rem; } .item-card .body { padding: .75rem; } .item-card .title { font-size: 1rem; } .gallery-main { aspect-ratio: 1 / 1; } .thumb-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35rem; } .thumb-wrap { flex: 0 0 auto; width: 88px; } .thumb-strip .thumb { width: 88px; height: 88px; } .form-control, .form-select, .btn { min-height: 44px; } input[type="file"].form-control { padding-top: .65rem; } .panel-pad { padding: 1rem; } .panel-flex { flex-direction: column; align-items: flex-start; gap: .75rem; } .stat { padding: 1rem; } .ref-editor-head { flex-direction: column; align-items: stretch; } .ref-editor #addRefBtn { width: 100%; } .ref-form-grid { grid-template-columns: 1fr; } .ref-delete-cell { justify-content: flex-start; min-height: auto; } .document-row { grid-template-columns: 48px minmax(0, 1fr); } .document-meta, .document-remove-form { grid-column: 2; } .document-upload-form { grid-template-columns: 1fr; } .export-submit-row .btn { width: 100%; } /* Item list (list view): value/status/edit column has no room next to the title+meta column at phone widths — .item-list-right has flex-shrink: 0 and no fixed width, so it was crowding .item-list-main down to almost nothing instead of wrapping, making the accession number and price run together with no visible gap. Push it onto its own full-width line instead. */ .item-list-row { flex-wrap: wrap; } .item-list-right { flex-basis: 100%; justify-content: space-between; margin-top: 6px; padding-left: 66px; } /* Dashboard: header, stats */ .dash-header { flex-direction: column; align-items: flex-start; gap: .75rem; } .dash-stats-row { gap: .5rem; } .dash-stat-card { flex: 1 1 80px; min-width: 0; padding: .7rem .8rem; } .dash-stat-value { font-size: 1.15rem; } /* A formatted currency amount (e.g. kr653,300) needs more room than a plain integer stat — an equal-width flex share still wraps it mid-number at phone widths, so give it roughly half the row instead. */ .dash-stat-card--currency { flex: 1 1 45%; } /* Item detail */ .detail-breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bulk edit overflow prevention */ .bulk-edit-table { font-size: .8rem; } .bulk-edit-table .form-control-sm, .bulk-edit-table .form-select-sm { font-size: .78rem; } } @media (max-width: 430px) { .page-actions .btn, .form-actions .btn, .detail-actions .btn, .delete-actions .btn, .page-actions .btn-quiet, .form-actions .btn-quiet, .detail-actions .btn-quiet { width: 100%; } .thumb-actions .btn { width: auto; } /* Filterbar: stack sort on mobile */ .filterbar .row { row-gap: .5rem; } } /* ═══════════════════════════════════════════════════════ 28. Visual Themes Four themes, each redeclaring the token layer from section 1 — no component below this point knows or cares which theme is active. Apply with class="theme-XXX" on (SiteSettings.theme, see base.html). Midnight is the default and lives in :root — no class needed, matching the previous default's pattern. Two deliberate pairings rather than four unrelated palettes: Midnight + Heritage share the warm gold accent (the archival family); Graphite + Ivory share a quiet slate-blue accent (the modern family). ═══════════════════════════════════════════════════════ */ /* ── Heritage: warm ivory, dark walnut text, muted brass — old books, museum labels, antique documents. Same accent as the public landing page's light sections. ── */ .theme-heritage { --paper: #f7f3ea; --surface: #fffdf8; --surface-2: #efe8d8; --ink: #2b2118; --muted: #7d6f5c; --rule: #e4ddc7; --rule-color: #e4ddc7; --brass: #8a6d3b; --brass-dark: #6f5730; --brass-soft: #f3e9d5; --ok: #4a7a4a; --warn: #b07d2a; --danger: #8c3b32; --complete: var(--ok); --incomplete: var(--warn); --shadow-sm: 0 1px 3px rgba(44,40,35,.04), 0 4px 16px rgba(44,40,35,.06); --shadow-md: 0 2px 8px rgba(44,40,35,.07), 0 10px 28px rgba(44,40,35,.09); --shadow-lg: 0 6px 20px rgba(44,40,35,.10), 0 20px 52px rgba(44,40,35,.11); --sidebar-bg: #241c12; --sidebar-ink: #d3c4a8; --sidebar-dim: rgba(211,196,168,.68); --sidebar-hover-bg: rgba(255,255,255,.06); --sidebar-active-bg: rgba(138,109,59,.22); --sidebar-active-ink:#f0dfc0; } /* ── Graphite: neutral dark gray, professional, minimal — GitHub meets Linear. Quiet slate-blue accent, no neon, no saturated blue. ── */ .theme-graphite { --paper: #16171a; --surface: #1d1f23; --surface-2: #26282d; --ink: #e6e7ea; --muted: #9497a1; --rule: rgba(230,231,234,.09); --rule-color: rgba(230,231,234,.09); --brass: #7089c2; --brass-dark: #93a8d6; --brass-soft: rgba(112,137,194,.16); --ok: #6fae82; --warn: #c9a05a; --danger: #c17a6e; --complete: var(--ok); --incomplete: var(--warn); --shadow-sm: 0 1px 3px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.24); --shadow-md: 0 2px 8px rgba(0,0,0,.32), 0 10px 28px rgba(0,0,0,.28); --shadow-lg: 0 6px 20px rgba(0,0,0,.38), 0 20px 52px rgba(0,0,0,.34); --sidebar-bg: #101113; --sidebar-ink: #c2c4cb; --sidebar-dim: rgba(194,196,203,.68); --sidebar-hover-bg: rgba(255,255,255,.05); --sidebar-active-bg: rgba(112,137,194,.18); --sidebar-active-ink:#dbe2f5; } /* ── Ivory: bright modern light theme — Apple-level simplicity, same quiet accent as Graphite. ── */ .theme-ivory { --paper: #ffffff; --surface: #ffffff; --surface-2: #f3f4f6; --ink: #1c1e21; --muted: #6b7078; --rule: #e6e7eb; --rule-color: #e6e7eb; --brass: #7089c2; --brass-dark: #58699e; --brass-soft: #e8ecf7; --ok: #3f6b4c; --warn: #8a5a2b; --danger: #9c3b2e; --complete: var(--ok); --incomplete: var(--warn); --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06); --shadow-md: 0 2px 8px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.08); --shadow-lg: 0 6px 20px rgba(0,0,0,.08), 0 20px 52px rgba(0,0,0,.10); --sidebar-bg: #f7f8fa; --sidebar-ink: #4b4f57; --sidebar-dim: rgba(75,79,87,.85); --sidebar-hover-bg: rgba(0,0,0,.04); --sidebar-active-bg: #e8ecf7; --sidebar-active-ink:#33456e; } /* ── Collapsible form sections (native

) ── */ summary.collapsible-header { display: flex; align-items: center; gap: .5rem; list-style: none; cursor: pointer; margin-bottom: 0; } summary.collapsible-header::-webkit-details-marker { display: none; } summary.collapsible-header:focus-visible { outline: 2px solid var(--brass-dark); outline-offset: 2px; border-radius: 3px; } details[open] > summary.collapsible-header { margin-bottom: .75rem; } .collapsible-title { flex: 1; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .collapsible-badge { font-size: .7rem; padding: .1rem .4rem; border-radius: 99px; background: var(--brass-soft); color: var(--brass); font-family: 'IBM Plex Mono', monospace; font-weight: 500; } details[open] .collapsible-badge { display: none; } .collapsible-chevron { flex-shrink: 0; color: var(--muted); transition: transform .18s ease; } details:not([open]) .collapsible-chevron { transform: rotate(-90deg); }