/* ========================================================================== USASignLab admin panel A dense operations UI. Deliberately flatter and greyer than the storefront so staff never confuse the two. Colour is driven entirely by the tokens below, defined once for light and again for dark. The theme is selected by `data-bs-theme` on , which is also what Bootstrap 5.3 reads, so its own components follow along. Every text token is checked against its own surface for WCAG AA (4.5:1). ========================================================================== */ :root, [data-bs-theme="light"] { color-scheme: light; --bg: #d8dfe8; /* workspace behind the panels */ --surface: #f7f9fc; /* panels, cards, table body */ --surface-2: #eaeff5; /* panel headers, table head */ --surface-3: #dfe6ee; /* hover rows */ --line: #bcc8d8; /* borders -- visible, not hairline */ --line-soft: #d3dbe5; --ink: #10171f; /* primary text 17.1:1 on surface */ --ink-2: #33414f; /* secondary text 9.2:1 */ --muted: #4a5866; /* meta, labels 6.9:1 */ --accent: #c9440f; --accent-ink: #ffffff; --sidebar: #08192c; --sidebar-ink: #d7e2ee; --sidebar-dim: #91a5bb; --shadow: 0 1px 2px rgba(16, 23, 31, .08), 0 1px 8px rgba(16, 23, 31, .04); } [data-bs-theme="dark"] { color-scheme: dark; --bg: #0b1017; --surface: #161d26; --surface-2: #1d2531; --surface-3: #26303d; --line: #333f4e; --line-soft: #262f3b; --ink: #e9eff6; /* 13.9:1 on surface */ --ink-2: #c2cdda; /* 9.6:1 */ --muted: #93a3b5; /* 6.6:1 */ --accent: #ff7a45; --accent-ink: #1a0d06; --sidebar: #070d15; --sidebar-ink: #d7e2ee; --sidebar-dim: #8296ad; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 10px rgba(0, 0, 0, .3); } /* Hand the tokens to Bootstrap so its tables, forms, dropdowns, modals and offcanvas inherit the same surfaces instead of fighting them. */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-secondary-color: var(--muted); --bs-border-color: var(--line); --bs-emphasis-color: var(--ink); --bs-heading-color: var(--ink); --bs-form-control-bg: var(--surface); --bs-form-control-color: var(--ink); --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line-soft); --bs-table-hover-bg: var(--surface-3); --bs-table-hover-color: var(--ink); } body { color: var(--ink); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; /* was 14px -- the dense tables were straining */ -webkit-font-smoothing: antialiased; } /* Bootstrap's muted utility is too pale for this UI; pin it to our token. */ .text-muted { color: var(--muted) !important; } .text-body { color: var(--ink) !important; } .small, small { font-size: .875em; } a { color: var(--accent); } a:hover { color: var(--accent); } .brand-mark { font-weight: 800; color: var(--accent); letter-spacing: -.02em; } .brand-word { font-weight: 800; color: #fff; letter-spacing: -.02em; } /* -------------------------------------------------------------- sidebar -- */ .admin-sidebar { background: var(--sidebar); color: var(--sidebar-ink); width: 240px; display: flex; flex-direction: column; border-right: 1px solid rgba(0, 0, 0, .5); } @media (min-width: 992px) { /* Bootstrap's responsive offcanvas drops the panel's own background above the breakpoint -- .offcanvas-lg sets background-color: transparent !important -- which left the sidebar's light text sitting on the light page background. Dark mode hid it, because the page behind is dark anyway. Win it back. */ .admin-sidebar.offcanvas-lg { background-color: var(--sidebar) !important; } .admin-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; } .admin-main { margin-left: 240px; } } .admin-brand { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: 1.1rem 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 1.2rem; } .admin-brand a { text-decoration: none; } .admin-brand small { width: 100%; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sidebar-dim); } .admin-nav { padding: .75rem 0; flex: 1; overflow-y: auto; } .admin-nav-label { display: block; padding: .9rem 1.15rem .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sidebar-dim); } .admin-nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem 1.15rem; color: var(--sidebar-ink); font-size: .92rem; text-decoration: none; border-left: 3px solid transparent; } .admin-nav a i { width: 16px; color: var(--sidebar-dim); } .admin-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; } .admin-nav a.active { background: rgba(255, 122, 69, .16); border-left-color: var(--accent); color: #fff; font-weight: 600; } .admin-nav a.active i { color: var(--accent); } .admin-sidebar-foot { padding: .9rem 1.15rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; } .admin-sidebar-foot span { display: block; color: #fff; font-weight: 600; } .admin-sidebar-foot small { color: var(--sidebar-dim); font-size: .76rem; } /* --------------------------------------------------------------- layout -- */ .admin-topbar { display: flex; align-items: center; gap: .75rem; background: var(--surface); border-bottom: 1px solid var(--line); padding: .7rem 1rem; position: sticky; top: 0; z-index: 999; } @media (min-width: 992px) { .admin-topbar { padding: .7rem 1.5rem; } } .admin-title { font-size: 1.1rem; font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--ink); } .admin-content { padding: 1rem; } @media (min-width: 992px) { .admin-content { padding: 1.5rem; } } #theme-toggle { line-height: 1; } /* --------------------------------------------------------------- panels -- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); } .panel + .panel { margin-top: 1rem; } .panel-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .75rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); } .panel-head h2 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--ink); } .panel-body { padding: 1rem; } .panel-foot { padding: .85rem 1rem; border-top: 1px solid var(--line); background: var(--surface-2); } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .9rem 1rem; height: 100%; box-shadow: var(--shadow); } .kpi span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .3rem; } .kpi strong { font-size: 1.6rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .kpi-alert { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), var(--shadow); } /* ---------------------------------------------------------------- table -- */ .table { font-size: .9rem; color: var(--ink); margin-bottom: 0; } .table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); /* was --muted at 4.38:1 -- failed AA */ font-weight: 700; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; padding-top: .6rem; padding-bottom: .6rem; } .table td { vertical-align: middle; border-color: var(--line-soft); } .table > tbody > tr:hover > * { background: var(--surface-3); } .table code { color: var(--accent); background: transparent; } /* ------------------------------------------------------------ key/value -- */ .kv { margin: 0; } .kv > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem; } .kv > div:last-child { border-bottom: 0; } .kv dt { font-weight: 500; color: var(--muted); margin: 0; } .kv dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; word-break: break-word; } .summary-row { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .9rem; } .summary-row span:first-child { color: var(--muted); } .summary-row b { color: var(--ink); font-variant-numeric: tabular-nums; } .summary-total { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink); } .summary-total strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------- order details -- */ .admin-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); } .admin-item:last-child { border-bottom: 0; padding-bottom: 0; } .admin-item-main { flex: 1; min-width: 0; } .admin-item-side { text-align: right; flex-shrink: 0; } .admin-item-side strong { font-size: 1.1rem; color: var(--ink); } .job-name { font-size: .86rem; color: var(--muted); } /* Marks a field whose text is the English copy, on forms that also hold translations elsewhere. */ .lang-tag { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border: 1px solid var(--line); border-radius: 4px; font-size: .68rem; font-weight: 600; line-height: 1.35; letter-spacing: .04em; color: var(--muted); vertical-align: middle; cursor: help; } .option-table { font-size: .85rem; margin-bottom: 0; } .option-table th { width: 35%; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: .85rem; background: transparent; border-bottom-color: var(--line-soft); } .customer-note { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; padding: .5rem .7rem; font-size: .86rem; color: var(--ink); } .file-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 100px; padding: .2rem .7rem; font-size: .8rem; color: var(--ink); text-decoration: none; } .file-chip:hover { border-color: var(--accent); color: var(--accent); } .file-chip em { color: var(--muted); font-style: normal; } .tracker { list-style: none; padding: 0; margin: 0; } .tracker li { display: flex; gap: .85rem; padding-bottom: 1rem; position: relative; } .tracker li:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--line); } .tracker-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 4px; position: relative; z-index: 1; } .tracker strong { display: block; font-size: .92rem; color: var(--ink); } .tracker small { color: var(--muted); font-size: .8rem; } /* ------------------------------------------------------ product options -- */ .option-block { border: 1px solid var(--line); border-radius: 5px; margin-bottom: .75rem; overflow: hidden; } .option-block-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--ink); } .option-price-table { font-size: .82rem; margin: 0; } .option-price-table th { font-size: .7rem; } .option-price-table td { padding: .3rem .35rem; } .option-price-table .form-control, .option-price-table .form-select { font-size: .8rem; padding: .18rem .4rem; min-width: 68px; } .admin-thumb { max-width: 100%; border: 1px solid var(--line); border-radius: 4px; } /* ---------------------------------------------------------------- forms -- */ .form-label { font-weight: 600; color: var(--ink-2); font-size: .88rem; margin-bottom: .3rem; } .form-text { color: var(--muted); font-size: .82rem; } .form-control, .form-select { background-color: var(--surface); border-color: var(--line); color: var(--ink); } .form-control:focus, .form-select:focus { background-color: var(--surface); color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(201, 68, 15, .2); } .form-control::placeholder { color: var(--muted); opacity: .8; } .form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); color: var(--muted); } .input-group-text { background: var(--surface-2); border-color: var(--line); color: var(--muted); } .form-check-input { background-color: var(--surface); border-color: var(--line); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-label { color: var(--ink-2); } code { color: var(--accent); } /* Primary action. In dark mode Bootstrap's near-black .btn-dark disappears against the page, so it becomes the accent instead. */ [data-bs-theme="dark"] .btn-dark { background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } [data-bs-theme="dark"] .btn-dark:hover, [data-bs-theme="dark"] .btn-dark:focus { background-color: #ff8f63; border-color: #ff8f63; color: var(--accent-ink); } [data-bs-theme="dark"] .btn-outline-secondary { color: var(--ink-2); border-color: var(--line); } [data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: var(--surface-3); border-color: var(--line); color: var(--ink); } /* Bootstrap's .bg-light badge is invisible on a dark panel. */ [data-bs-theme="dark"] .badge.bg-light { background-color: var(--surface-3) !important; } [data-bs-theme="dark"] .badge.bg-light.text-dark { color: var(--ink) !important; } .badge { font-weight: 600; letter-spacing: .01em; } .dropdown-menu { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); } .dropdown-item { color: var(--ink); } .dropdown-item:hover, .dropdown-item:focus { background: var(--surface-3); color: var(--ink); } .dropdown-header { color: var(--muted); } .alert { border-width: 1px; } /* ------------------------------------------------------------ auth page -- */ .admin-auth { background: var(--sidebar); } .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .auth-box { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2.25rem; width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); } .auth-brand { font-size: 1.5rem; margin-bottom: 1.5rem; } .auth-brand .brand-word { color: var(--ink); } .auth-box h1 { font-size: 1.35rem; font-weight: 700; margin-bottom: .35rem; color: var(--ink); } .auth-sub { font-size: .88rem; color: var(--muted); margin-bottom: 1.5rem; } .auth-foot { text-align: center; font-size: .86rem; margin: 1.5rem 0 0; } /* --- branding ----------------------------------------------------------- */ .brand-logo { height: 34px; width: auto; max-width: 200px; object-fit: contain; display: block; } .auth-brand .brand-logo { margin: 0 auto; height: 40px; } /* The settings preview sits on a chequerboard so a transparent PNG shows its real edges instead of blending into the panel. */ .logo-preview { border: 1px solid var(--line); border-radius: 4px; padding: .75rem; background-color: var(--surface-2); background-image: linear-gradient(45deg, var(--surface-3) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-3) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-3) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-3) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; display: flex; align-items: center; justify-content: center; min-height: 72px; } .logo-preview img { max-height: 56px; max-width: 100%; object-fit: contain; } /* --- message replies ---------------------------------------------------- */ /* The answers already sent, shown under the customer's own words so the whole exchange reads top to bottom in one column. */ .reply-log { border-left: 2px solid var(--line); padding-left: .6rem; } .reply-log-entry { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: .45rem .6rem; margin-bottom: .4rem; } .reply-log-entry:last-child { margin-bottom: 0; } .reply-log-failed { border-color: var(--bs-danger-border-subtle, #b02a37); } .reply-log-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); margin-bottom: .2rem; } .reply-log-subject { font-weight: 600; color: var(--ink); font-size: .84rem; } .reply-log-body { white-space: pre-wrap; color: var(--ink-2); font-size: .82rem; max-height: 9rem; overflow-y: auto; } .reply-log-error { margin-top: .3rem; font-size: .78rem; color: var(--bs-danger-text-emphasis, #b02a37); word-break: break-word; } .reply-original { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: .5rem .7rem; margin-top: .4rem; max-height: 12rem; overflow-y: auto; color: var(--ink-2); font-size: .82rem; } /* --------------------------------------------------------- live chat -- */ .admin-nav-badge { margin-left: auto; min-width: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: var(--accent, #e2541f); color: #fff; font-size: .7rem; line-height: 1.25rem; text-align: center; } .chat-live-state { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); } .chat-live-state .chat-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #94a3b8; flex: 0 0 auto; } .chat-live-state.is-online .chat-dot { background: #22c55e; } .chat-console-body { display: grid; grid-template-columns: minmax(14rem, 20rem) 1fr; min-height: 26rem; height: calc(100vh - 14rem); } .chat-threads { border-right: 1px solid var(--line); overflow-y: auto; background: var(--surface-2); } .chat-threads-empty { padding: 1.5rem 1rem; color: var(--muted); font-size: .85rem; text-align: center; } .chat-thread { display: grid; gap: .15rem; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; padding: .65rem .85rem; color: var(--ink); font-size: .82rem; } .chat-thread:hover { background: var(--surface); } .chat-thread.active { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent, #e2541f); } .chat-thread.is-closed strong { color: var(--muted); font-weight: 500; } .chat-thread-top { display: flex; align-items: center; gap: .4rem; } .chat-thread-badge { margin-left: auto; min-width: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: var(--accent, #e2541f); color: #fff; font-size: .68rem; line-height: 1.1rem; text-align: center; } .chat-thread-company, .chat-thread-last, .chat-thread-time { color: var(--muted); font-size: .75rem; } .chat-thread-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-thread-view { display: flex; flex-direction: column; min-width: 0; } .chat-thread-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface-2); } .chat-log.admin { flex: 1 1 auto; overflow-y: auto; padding: 1rem; font-size: .86rem; } .chat-log.admin .chat-msg { display: flex; flex-direction: column; margin-bottom: .8rem; } .chat-log.admin .chat-msg-admin { align-items: flex-end; } .chat-log.admin .chat-msg-visitor { align-items: flex-start; } .chat-log.admin .chat-bubble { max-width: 70%; padding: .5rem .7rem; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; } .chat-log.admin .chat-msg-admin .chat-bubble { background: var(--accent, #e2541f); color: #fff; } .chat-log.admin .chat-msg-visitor .chat-bubble { background: var(--surface-2); border: 1px solid var(--line); } .chat-log.admin .chat-meta { font-size: .7rem; color: var(--muted); margin-top: .2rem; } .chat-log.admin .chat-empty { color: var(--muted); text-align: center; padding: 2rem 1rem; } .chat-console .chat-composer { display: flex; gap: .5rem; align-items: flex-end; padding: .7rem .9rem; border-top: 1px solid var(--line); } .chat-console .chat-composer textarea { resize: none; max-height: 140px; font-size: .86rem; } @media (max-width: 767.98px) { .chat-console-body { grid-template-columns: 1fr; height: auto; } .chat-threads { max-height: 14rem; border-right: 0; border-bottom: 1px solid var(--line); } .chat-log.admin { min-height: 18rem; } } /* ------------------------------------------------------- permit viewer -- */ /* The reseller permit opens over the page so the reviewer keeps the approve and reject buttons in reach. Images are centred on a neutral mat; PDFs get a tall frame and the browser's own viewer. */ .permit-viewer { padding: 0; background: var(--surface-2); text-align: center; max-height: 78vh; overflow: auto; } .permit-viewer img { max-width: 100%; height: auto; } .permit-viewer iframe { display: block; width: 100%; height: 78vh; border: 0; } /* Artwork review viewer on the order page. Front and back stack, each with its file name underneath, on the same neutral ground as the permit viewer. */ .artwork-viewer { background: var(--surface-2); text-align: center; } .artwork-viewer-file { margin: 0 0 1.25rem; } .artwork-viewer-file:last-child { margin-bottom: 0; } .artwork-viewer-file img { max-width: 100%; max-height: 70vh; height: auto; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .15); } .artwork-viewer-file iframe { display: block; width: 100%; height: 70vh; border: 0; background: #fff; } .artwork-viewer-file figcaption { margin-top: .5rem; font-size: .85rem; } .artwork-viewer-file figcaption em { color: var(--muted); font-style: normal; } .artwork-viewer-changes { margin-top: 1rem; } .artwork-viewer-changes .artwork-changes-form { max-width: 40rem; margin: 0 auto; } .replaced-files summary { cursor: pointer; } /* Blog: the thumbnail in the list and the cover preview in the editor. */ .blog-thumb { width: 4rem; height: 3rem; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); } .blog-cover-preview { display: block; width: 100%; border-radius: 6px; border: 1px solid var(--line); } /* The post editor is a sheet of paper: dark text on white in both themes, so it reads like the page being written rather than like the panel around it. The panel's own ink is grey and, in dark mode, nearly white -- neither is legible on the white writing surface. */ #editor { min-height: 22rem; max-height: 60vh; overflow-y: auto; background: #ffffff; color: #10171f; border-color: #bcc8d8; } #editor .ql-editor { font-size: .95rem; color: #10171f; } #editor .ql-editor img { max-width: 100%; height: auto; } /* Quill's own placeholder is a faint grey that disappears on white. */ #editor .ql-editor.ql-blank::before { color: #6b7785; font-style: normal; } #editor .ql-editor a { color: #0b5fb0; } #editor .ql-editor blockquote { border-left: 3px solid #bcc8d8; padding-left: .75rem; color: #33414f; } /* The toolbar sits on the same paper, so its icons keep their contrast in dark mode, where the panel behind it is nearly black. */ #editor-toolbar.ql-toolbar { background: #eaeff5; border-color: #bcc8d8; } #editor-toolbar.ql-toolbar .ql-picker, #editor-toolbar.ql-toolbar .ql-picker-label, #editor-toolbar.ql-toolbar button { color: #33414f; } #editor-toolbar.ql-toolbar .ql-stroke { stroke: #33414f; } #editor-toolbar.ql-toolbar .ql-fill { fill: #33414f; } #editor-toolbar.ql-toolbar button:hover .ql-stroke, #editor-toolbar.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent); } #editor-toolbar.ql-toolbar button:hover .ql-fill, #editor-toolbar.ql-toolbar button.ql-active .ql-fill { fill: var(--accent); } #editor-toolbar.ql-toolbar button:hover, #editor-toolbar.ql-toolbar button.ql-active, #editor-toolbar.ql-toolbar .ql-picker-label:hover { color: var(--accent); } /* The dropdowns Quill opens (size, colour, alignment) are on the paper too. */ #editor-toolbar .ql-picker-options { background: #ffffff; border-color: #bcc8d8; color: #10171f; } #editor-toolbar .ql-picker-item { color: #10171f; } .artwork-exchange { padding: .5rem .75rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 6px; } .artwork-exchange .customer-note { white-space: pre-line; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ------------------------------------------------------- sortable table -- */ .sort-link { color: inherit; text-decoration: none; white-space: nowrap; } .sort-link:hover { color: var(--accent, #e2541f); } .sort-link.active { color: var(--accent, #e2541f); } .sort-link i { font-size: .7rem; } /* -------------------------------------------------- promotion admin page -- */ .layout-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; } .layout-choice { cursor: pointer; } .layout-choice input { position: absolute; opacity: 0; } .layout-choice-body { display: block; border: 1px solid var(--line); border-radius: 6px; padding: .6rem; background: var(--surface); height: 100%; } .layout-choice input:checked + .layout-choice-body { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .layout-choice input:focus-visible + .layout-choice-body { outline: 2px solid var(--accent); } .layout-choice strong { display: block; font-size: .85rem; margin-top: .4rem; } .layout-choice small { display: block; color: var(--muted); font-size: .72rem; } /* A small wireframe of each arrangement, drawn from four blocks. */ .layout-preview { display: grid; gap: 2px; height: 2.4rem; } .layout-preview i { background: var(--line); border-radius: 2px; display: block; } .layout-preview-banner { grid-template-columns: 1fr; } .layout-preview-banner i:not(:first-child) { display: none; } .layout-preview-side_by_side { grid-template-columns: 1fr 1fr; } .layout-preview-side_by_side i:nth-child(n+3) { display: none; } .layout-preview-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .layout-preview-stacked { grid-template-rows: 1fr 1fr; } .layout-preview-stacked i:nth-child(n+3) { display: none; } .layout-preview-collage { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .layout-preview-collage i:first-child { grid-row: span 2; } .promo-product-picker { max-height: 22rem; overflow-y: auto; } .promo-image-card { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); height: 100%; } .promo-image-card img { display: block; width: 100%; height: 9rem; object-fit: cover; background: var(--surface-2); } .promo-image-fields { padding: .7rem; } /* --------------------------------------------------------------- invoice -- */ /* Built to print. On screen it sits on the admin background as a white sheet; the print rules below strip the panel chrome and leave the document. */ .invoice-sheet { background: #fff; color: #10171f; border: 1px solid var(--line); border-radius: 6px; padding: 2rem; max-width: 52rem; } .invoice-sheet a { color: inherit; } .invoice-head { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #10171f; padding-bottom: 1rem; margin-bottom: 1.25rem; } .invoice-logo { height: 46px; width: auto; max-width: 220px; object-fit: contain; display: block; } .invoice-wordmark { font-size: 1.4rem; font-weight: 800; display: block; margin-bottom: .35rem; } .invoice-from p { color: #4a5866; margin-top: .4rem; } .invoice-meta { text-align: right; } .invoice-meta h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .5rem; } .invoice-meta dl { margin: 0; font-size: .82rem; } .invoice-meta dl > div { display: flex; gap: .6rem; justify-content: flex-end; } .invoice-meta dt { color: #4a5866; font-weight: 400; } .invoice-meta dd { margin: 0; font-weight: 700; } .invoice-parties { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.5rem; font-size: .85rem; } @media (min-width: 768px) { .invoice-parties { grid-template-columns: repeat(3, 1fr); } } .invoice-party h2 { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4a5866; border-bottom: 1px solid #bcc8d8; padding-bottom: .3rem; margin-bottom: .5rem; } .invoice-pay { margin: 0; } .invoice-pay > div { margin-bottom: .35rem; } .invoice-pay dt { font-weight: 400; color: #4a5866; font-size: .78rem; } .invoice-pay dd { margin: 0; font-weight: 700; } .invoice-items { width: 100%; border-collapse: collapse; font-size: .85rem; } .invoice-items thead th { text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4a5866; border-bottom: 1px solid #10171f; padding: .5rem .4rem; } .invoice-items tbody td { padding: .6rem .4rem; border-bottom: 1px solid #dfe6ee; vertical-align: top; } .invoice-col-image { width: 4.5rem; } .invoice-col-qty { width: 4rem; } .invoice-col-amount { width: 7rem; } /* A fixed box so a tall and a wide product photo print the same size. */ .invoice-thumb { display: block; width: 3.5rem; height: 3.5rem; object-fit: contain; background: #f7f9fc; border: 1px solid #dfe6ee; border-radius: 4px; } .invoice-thumb-empty { display: grid; place-items: center; color: #93a3b5; } .invoice-totals-wrap { display: flex; justify-content: flex-end; margin-top: 1.25rem; } .invoice-totals { min-width: 17rem; margin: 0; font-size: .85rem; } .invoice-totals > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .3rem 0; } .invoice-totals dt { font-weight: 400; color: #4a5866; } .invoice-totals dd { margin: 0; font-variant-numeric: tabular-nums; } .invoice-totals .invoice-grand { border-top: 2px solid #10171f; margin-top: .35rem; padding-top: .5rem; font-size: 1.05rem; } .invoice-totals .invoice-grand dt, .invoice-totals .invoice-grand dd { font-weight: 800; color: #10171f; } .invoice-notes { margin-top: 1.5rem; font-size: .85rem; } .invoice-notes h2 { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4a5866; margin-bottom: .3rem; } .invoice-foot { margin-top: 2rem; padding-top: .75rem; border-top: 1px solid #dfe6ee; font-size: .8rem; color: #4a5866; } /* What actually comes out of the printer: the sheet, nothing else. */ @media print { .admin-sidebar, .admin-topbar, .d-print-none { display: none !important; } .admin-main { margin-left: 0 !important; } .admin-content { padding: 0 !important; } body { background: #fff !important; } .invoice-sheet { border: 0; border-radius: 0; padding: 0; max-width: none; } /* Keep a line's image, description and amount on one page together. */ .invoice-items tr { page-break-inside: avoid; } .invoice-totals-wrap { page-break-inside: avoid; } } /* The order-number barcode, top right of the invoice. */ .invoice-barcode { margin-bottom: .6rem; } .invoice-barcode svg { display: block; margin-left: auto; } .invoice-barcode span { display: block; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; letter-spacing: .06em; color: #10171f; margin-top: .1rem; } /* ------------------------------------------------------ standalone page -- */ /* The handbook opens in its own tab without the operations nav, so the content column has to reclaim the 240px the sidebar would have occupied. */ .admin-main-full { margin-left: 0 !important; } .admin-standalone-brand { display: flex; align-items: baseline; gap: .1rem; font-size: 1.15rem; text-decoration: none; padding-right: .5rem; margin-right: .25rem; border-right: 1px solid var(--line); } /* The wordmark is drawn for the dark sidebar; on the light top bar its white half would vanish. */ .admin-standalone-brand .brand-word { color: var(--ink); } .admin-standalone-brand .brand-logo { max-height: 28px; width: auto; } /* --------------------------------------------------------- help handbook -- */ /* The operator manual at /admin/help. Long-form prose, so it gets a reading measure, a sticky contents column and real spacing -- the panel's dense table styling is wrong for something people actually read. */ /* Capped and centred rather than filling the tab: without the sidebar there is enough width to stretch a line of prose past comfortable reading, and the screenshots stop at 900px anyway. */ .help-doc { max-width: 1180px; margin: 0 auto; } .help-toc { position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; font-size: .86rem; max-height: calc(100vh - 2rem); overflow-y: auto; } .help-toc strong { display: block; margin-bottom: .6rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .help-toc ol { margin: 0; padding-left: 1.2rem; } .help-toc ul { list-style: none; padding-left: .5rem; margin: .25rem 0 .4rem; } .help-toc li { margin-bottom: .25rem; } .help-toc a { color: var(--ink-2); text-decoration: none; } .help-toc a:hover { color: var(--accent); text-decoration: underline; } .help-lead { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: 2rem; } .help-lead h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: .6rem; } .help-lead p { margin-bottom: .5rem; color: var(--ink-2); } .help-doc section { margin-bottom: 3rem; scroll-margin-top: 1rem; } .help-doc h3 { font-size: 1.2rem; font-weight: 700; padding-bottom: .45rem; margin-bottom: 1rem; border-bottom: 2px solid var(--line); } .help-doc h4 { font-size: 1.02rem; font-weight: 650; margin: 1.8rem 0 .7rem; scroll-margin-top: 1rem; } .help-doc h5 { font-size: .93rem; font-weight: 650; margin: 1.2rem 0 .5rem; color: var(--ink-2); } .help-doc p, .help-doc li { line-height: 1.75; } .help-doc ul, .help-doc ol { padding-left: 1.4rem; } .help-doc li { margin-bottom: .35rem; } .help-doc code { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: .05rem .3rem; font-size: .85em; color: var(--accent); } /* Screenshots of the panel. Bordered, because a screenshot of a bordered UI on a near-white page otherwise bleeds into the page. */ .help-shot { display: block; width: 100%; max-width: 900px; height: auto; margin: .9rem 0 1.4rem; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); background: var(--surface); } /* A screenshot that is tall and thin -- the nav column -- is shown at its native width; stretching it to the measure would only blur it. */ .help-shot-tall { max-width: 240px; } .help-note { background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 8px; padding: .85rem 1rem; margin: 1.1rem 0; font-size: .92rem; } .help-note-warn { border-left-color: var(--accent); } .help-note > :last-child { margin-bottom: 0; } .help-table { margin: .8rem 0 1.4rem; } .help-table th { white-space: nowrap; } .help-table td:first-child { width: 22%; font-weight: 600; } .help-code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: .9rem 1rem; font-size: .85rem; line-height: 1.7; overflow-x: auto; margin: .8rem 0 1.4rem; } /* The order lifecycle, as chips rather than a sentence full of arrows. */ .help-flow { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 1.2rem; } .help-flow span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; white-space: nowrap; } .help-steps > li { margin-bottom: .6rem; } .help-star { display: inline-block; vertical-align: middle; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: .1rem .55rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; margin-left: .4rem; } .help-foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); } @media (max-width: 991.98px) { .help-toc { position: static; max-height: none; } }