/* ── Mobile table scroll ─────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── CSS Custom Properties ───────────────────────────────────────────────── */ :root { /* Brand accent, from the UniteSync brand tokens: amber-600 on light, and amber-300 on dark, which is why the two logo files carry those two. */ --primary: #D97706; /* the guide's --accent */ --primary-hover: #B45309; /* the guide's --accent-strong */ --primary-active: #B45309; --primary-ink: #FFFFFF; /* label on top of the accent */ --focus-ring: #78350F; /* amber-900, per the brand guide */ /* The accent as text on a light surface drops to amber-800; amber-600 alone reads 2.7:1 there. */ --primary-text: #92400E; --accent: #F59E0B; --accent-hover: #D97706; /* Surfaces, from the brand guide: cream page, bone for panels, slate-950 for text. No white anywhere in the light theme. */ --bg-page: #FAF6EC; /* cream */ --bg-surface: #FFFDF8; /* warm white: cards lift off the cream ground */ --bg-hover: #EAE4D4; --border: #E2E8F0; --border-2: #CBD5E1; /* Warm enough to disappear into the cream when it is not wanted. */ --scroll-thumb: #D8CFB8; --scroll-thumb-hover: #BFB392; --text: #020617; /* slate-950 */ /* Warmer, darker surfaces cost the muted tone its contrast: slate-500 read 4.1:1 on bone, under the 4.5 small text needs. */ --text-muted: #57616F; --text-tertiary:#94A3B8; --text-disabled:#CBD5E1; --text-body: #334155; /* slate-700: body copy and form labels */ /* Type, per the brand guide: Bricolage Grotesque for display, Cabinet Grotesk for running text, JetBrains Mono for figures and codes. */ --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-sans: "Cabinet Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } html.dark { --primary: #FCD34D; --primary-hover: #F59E0B; --primary-active: #D97706; --primary-ink: #0F172A; /* the dark accent is amber-300; white would vanish on it */ /* amber-900 vanishes on a dark page, so the ring there is the dark accent. */ --focus-ring: #FCD34D; --primary-text: #FCD34D; --accent: #FBBF24; --accent-hover: #F59E0B; --bg-page: #0F172A; --bg-surface: #1E293B; --bg-hover: #334155; --border: #334155; --border-2: #475569; --scroll-thumb: #475569; --scroll-thumb-hover: #64748B; --text: #FAF6EC; /* cream */ --text-muted: #CBD5E1; --text-tertiary: #94A3B8; --text-disabled: #475569; --text-body: #CBD5E1; } /* ── Base component styles ───────────────────────────────────────────────── */ .h-7 { height: 3.5rem; } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; } /* ── Logo dark/light switching ──────────────────────────────────────────── */ .logo-dark { display: none; } /* Reserve scrollbar space so pages with fewer rows don't shift left/right when navigating between filters/pagination. */ /* Without this the UA paints the canvas white, and in an iframe that white sits behind a transparent body: the embedded form looked white on a dark host however transparent its own background was. */ :root { color-scheme: light; } html.dark { color-scheme: dark; } html { scrollbar-gutter: stable; } /* Stop wide page elements from pushing the body wider than the viewport. This used to cause a visible 'page grows then shrinks' flash on first paint while Tailwind CDN was still processing utility classes. */ html, body { overflow-x: hidden; } body { max-width: 100vw; } /* FOUC mask — hide body until Tailwind CDN finishes injecting styles. The tag gets the .tw-ready class from a script at the very end of , after Tailwind has had a chance to process the DOM. */ html:not(.tw-ready) body { visibility: hidden; } html.tw-ready body { visibility: visible; } html.dark .logo-light { display: none; } html.dark .logo-dark { display: block; } /* ── Accessibility: skip-to-main link ───────────────────────────────────── */ .skip-link { position: absolute; top: -40px; left: 0.5rem; z-index: 200; padding: 0.5rem 1rem; background: var(--primary); color: var(--primary-ink); font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: top 0.15s ease; } .skip-link:focus { top: 0.5rem; outline: 2px solid var(--bg-page); outline-offset: 2px; } /* Utility: visually hidden */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Contrast floor ──────────────────────────────────────────────────────── */ /* Sidebar section labels and other small caps: they were bumped off slate-400 once for legibility, and the token keeps them there. */ .text-slate-400 { color: var(--text-muted) !important; } .text-gray-400 { color: rgb(107 114 128) !important; } .hover\:text-slate-600:hover { color: rgb(71 85 105) !important; } .hover\:text-slate-700:hover { color: rgb(51 65 85) !important; } /* ── Prefers-reduced-motion ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animate-spin, .animate-bounce, .animate-pulse { animation: none !important; } } /* ── Labels ──────────────────────────────────────────────────────────────── */ .field-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.375rem; } /* ── Inputs ──────────────────────────────────────────────────────────────── */ .input { display: block; width: 100%; padding: 0.5625rem 0.875rem; border-radius: 0.5rem; border: 1px solid var(--border); /* Recessed against the near-white card, the way the tiles are. */ background: var(--bg-page); font-size: 0.875rem; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 32%, transparent); } .input::placeholder { color: var(--text-tertiary); } html.dark .input { background: var(--bg-surface); border-color: var(--border); color: var(--text); } html.dark .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 32%, transparent); } html.dark .input::placeholder { color: var(--text-muted); } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5625rem 1.125rem; /* Pill, per the brand guide's .btn-primary (border-radius: 99px). */ border-radius: 999px; font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; cursor: pointer; white-space: nowrap; } .btn:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 40%, transparent); } .btn-primary { background: var(--primary); color: var(--primary-ink); } .btn-primary:hover { background: var(--primary-hover); } .btn-primary:active { background: var(--primary-active); } .btn-secondary { background: var(--bg-surface); color: var(--text); border-color: var(--border); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04); } .btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-2); } .btn-danger { background: var(--bg-surface); color: #B45309; border-color: #FDE68A; } .btn-danger:hover { background: #FFFBEB; } html.dark .btn-secondary { background: transparent; color: var(--text); border-color: var(--border); } html.dark .btn-secondary:hover { background: var(--bg-surface); } /* ── Badges ──────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } /* One hue, so state reads from weight rather than colour: a solid accent is settled, an accent tint is in flight, and deep slate is stopped. */ .badge-draft { background: #F1F5F9; color: #475569; } .badge-issued { background: #FEF3C7; color: #92400E; } .badge-pending { background: #FEF3C7; color: #92400E; } .badge-submitted{ background: #FDE68A; color: #78350F; } .badge-paid { background: #D97706; color: var(--primary-ink); } .badge-complete { background: #D97706; color: var(--primary-ink); } .badge-void { background: #E2E8F0; color: #334155; } /* The one hue kept out of the brand: a failed payment has to read as failed. */ .badge-failed { background: #FEE2E2; color: #991B1B; } html.dark .badge-draft { background: #1E293B; color: #94A3B8; } html.dark .badge-issued, html.dark .badge-pending { background: #78350F; color: #FCD34D; } html.dark .badge-submitted { background: #92400E; color: #FDE68A; } html.dark .badge-paid, html.dark .badge-complete { background: #FCD34D; color: #451A03; } html.dark .badge-void { background: #334155; color: #CBD5E1; } html.dark .badge-failed { background: #7F1D1D; color: #FCA5A5; } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05); } /* ── Tables ──────────────────────────────────────────────────────────────── */ .table-auto thead th { background: var(--bg-page); padding: 0.75rem 1.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border); text-align: left; } .table-auto tbody tr { border-bottom: 1px solid var(--border); } .table-auto tbody tr:hover { background: var(--bg-hover); } .table-auto tbody td { padding: 0.875rem 1.25rem; font-size: 0.875rem; color: var(--text); } /* ── Dark mode: Tailwind class overrides ─────────────────────────────────── */ html.dark body { background-color: var(--bg-page); color: var(--text); } /* The sidebar runs the full height and sits on the page ground: logo at the top, nav in the middle, and whoever is signed in at the bottom. There is no top bar; each page carries its own title in the content. */ #sidebar { background: transparent; } html.dark #sidebar { background: transparent; border-color: transparent; } html.dark #sidebar .border-slate-100, html.dark #sidebar .border-b { border-color: #334155 !important; } html.dark #sidebar a.text-slate-600 { color: #CBD5E1; } html.dark #sidebar a:hover { background: #334155 !important; color: #F8FAFC !important; } html.dark #sidebar .bg-slate-100 { background: #334155; } html.dark #main-content { background: #0F172A; } html.dark .bg-white { background: #1E293B !important; } html.dark .card { background: #1E293B !important; border-color: #334155 !important; } html.dark .bg-slate-50 { background: #0F172A !important; } html.dark .bg-slate-100 { background: #1E293B !important; } html.dark .bg-gray-50 { background: #0F172A !important; } html.dark .border-slate-200, html.dark .border-gray-200 { border-color: #334155 !important; } html.dark .border-slate-100, html.dark .border-gray-100 { border-color: #1E293B !important; } html.dark .text-slate-900, html.dark .text-gray-900 { color: #F8FAFC !important; } html.dark .text-slate-800, html.dark .text-gray-800 { color: #E2E8F0 !important; } html.dark .text-slate-700, html.dark .text-gray-700 { color: #CBD5E1 !important; } html.dark .text-slate-600, html.dark .text-gray-600 { color: #CBD5E1 !important; } html.dark .text-slate-500, html.dark .text-gray-500 { color: #94A3B8 !important; } html.dark .text-slate-400, html.dark .text-gray-400 { color: #94A3B8 !important; } html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-gray-50:hover { background: #1E293B !important; } html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-gray-100:hover { background: #334155 !important; } html.dark .table-auto thead th { background: #0F172A !important; color: #64748B; border-color: #334155; } html.dark .table-auto tbody tr { border-color: #1E293B; } html.dark .table-auto tbody tr:hover { background: #1E293B !important; } html.dark .table-auto tbody td { color: #CBD5E1; } html.dark table thead { background: #0F172A !important; } html.dark table thead th { color: #64748B; } html.dark table tr.border-t { border-color: #334155; } html.dark table tr:hover { background: #1E293B !important; } /* Soft accent backgrounds — used by alert cards, stat tiles, evidence boxes */ html.dark .bg-amber-50, html.dark .bg-amber-50\/40, html.dark .bg-amber-50\/30 { background: rgba(146, 64, 14, 0.25) !important; } /* Hover variants for the same alert/quick-action cards */ html.dark .hover\:bg-amber-100:hover { background: rgba(146, 64, 14, 0.4) !important; } /* Bigger contrast badges */ html.dark .bg-amber-100 { background: rgba(146, 64, 14, 0.5) !important; } /* Borders */ html.dark .border-amber-200, html.dark .border-amber-300 { border-color: #B45309 !important; } /* Foreground text — light pastel on dark accent background */ html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color: #FCD34D !important; } html.dark pre { background: rgb(2 6 23) !important; } html.dark code { background: #1E293B !important; } html.dark #loading-overlay > div { background: #0F172A; } /* ── Shell: page head, card interior, empty state ────────────────────────── */ /* The tokens and .btn/.badge/.card above were only half the vocabulary: every page still hand-rolled its own title block, card padding, table shell and "nothing here" row. These close that gap so _ui.html can emit one class instead of a utility string per call site. */ .page-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; margin-bottom:1.25rem; } .page-head h1 { font-size:1.5rem; font-weight:600; color:var(--text); margin:0; } .page-head .sub { font-size:0.875rem; color:var(--text-muted); margin-top:0.25rem; } .page-head .aside { font-size:0.875rem; color:var(--text-muted); } .card-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.875rem 1.25rem; border-bottom:1px solid var(--border); font-size:0.9375rem; font-weight:600; color:var(--text); } .card-body { padding:1.25rem; } .card-body.flush { padding:0; } .empty { padding:2.5rem 1.25rem; text-align:center; color:var(--text-muted); font-size:0.875rem; } /* ── Buttons: the small size every table row was rebuilding ──────────────── */ .btn-sm { padding:0.3125rem 0.875rem; font-size:0.8125rem; border-radius:999px; } .btn-quiet { background:transparent; color:var(--primary); border-color:transparent; } .btn-quiet:hover { background:var(--bg-hover); } /* ── Badges by meaning, not by status name ──────────────────────────────── */ /* The status-named badges above only fit invoices and payments. Everything else invented its own pill; these are the same four tones, named for what they say rather than which table they came from. */ .badge-ok { background:#FDE68A; color:#78350F; } .badge-warn { background:#FEF3C7; color:#92400E; } .badge-bad { background:#FEE2E2; color:#991B1B; } .badge-mute { background:rgb(243 244 246); color:rgb(75 85 99); } html.dark .badge-ok { background:#78350F; color:#FCD34D; } html.dark .badge-warn { background:#78350F; color:#FBBF24; } html.dark .badge-bad { background:#7F1D1D; color:#FCA5A5; } html.dark .badge-mute { background:rgb(55 65 81); color:rgb(209 213 219); } /* ── Person chip: an initial disc plus a name and its state ─────────────── */ /* Built for the Letters of Direction page, where a row is two people rather than one record, and which of the two still has to act is the whole point. */ .face { display:flex; align-items:center; gap:0.6875rem; min-width:0; } .face .disc { width:1.875rem; height:1.875rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:600; flex-shrink:0; border:1px solid transparent; } .face .who { font-size:0.875rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .face .state { font-size:0.75rem; } /* State lives in a class, not an inline style, so the dark overrides below can reach it. An inline colour cannot be overridden by a stylesheet. */ .face.is-verified .disc { background:#FFFBEB; color:#B45309; border-color:#FDE68A; } .face.is-verified .state { color:#B45309; } .face.is-invited .disc { background:#FFFBEB; color:#B45309; border-color:#FDE68A; } .face.is-invited .state { color:#B45309; } .face.is-asked .disc, .face.is-unreachable .disc, .face.is-unknown .disc { background:#F1F5F9; color:#94A3B8; border-color:#E2E8F0; } .face.is-asked .state, .face.is-unreachable .state, .face.is-unknown .state { color:#94A3B8; } html.dark .face.is-verified .disc { background:#78350F; color:#FCD34D; border-color:#B45309; } html.dark .face.is-verified .state { color:#FCD34D; } html.dark .face.is-invited .disc { background:#78350F; color:#FBBF24; border-color:#B45309; } html.dark .face.is-invited .state { color:#FBBF24; } html.dark .face.is-asked .disc, html.dark .face.is-unreachable .disc, html.dark .face.is-unknown .disc { background:#334155; color:#94A3B8; border-color:#475569; } /* ── Overflow menu (no JavaScript:
does the toggling) ──────────── */ .ui-menu { position:relative; display:inline-block; } .ui-menu > summary { list-style:none; cursor:pointer; } .ui-menu > summary::-webkit-details-marker { display:none; } .ui-menu-items { position:absolute; right:0; top:calc(100% + 0.375rem); z-index:40; min-width:13rem; padding:0.25rem; display:flex; flex-direction:column; } .ui-menu-items a, .ui-menu-items button { display:block; width:100%; text-align:left; padding:0.4375rem 0.625rem; border-radius:0.375rem; font-size:0.8125rem; color:var(--text); background:none; border:none; cursor:pointer; white-space:nowrap; } .ui-menu-items a:hover, .ui-menu-items button:hover { background:var(--bg-hover); } .ui-menu-items .danger { color:#b91c1c; } html.dark .ui-menu-items .danger { color:#FCA5A5; } .ui-menu-items hr { border:0; border-top:1px solid var(--border); margin:0.25rem 0; } /* ── Notices ─────────────────────────────────────────────────────────────── */ .notice { border:1px solid; border-radius:0.75rem; padding:1rem 1.25rem; margin-bottom:1.5rem; } .notice-title { font-weight:600; font-size:0.9375rem; } .notice-body { font-size:0.875rem; margin-top:0.125rem; } .notice-ok { border-color:#FDE68A; background:#FFFBEB; color:#78350F; } .notice-warn { border-color:#FDE68A; background:#FFFBEB; color:#92400E; } .notice-bad { border-color:#FECDD3; background:#FFF1F2; color:#9F1239; } .notice-info { border-color:#FCD34D; background:#FFFBEB; color:#78350F; } html.dark .notice-ok { border-color:#B45309; background:rgba(146,64,14,0.28); color:#FCD34D; } html.dark .notice-warn { border-color:#B45309; background:rgba(146,64,14,0.25); color:#FCD34D; } html.dark .notice-bad { border-color:#BE123C; background:rgba(2,6,23,0.55); color:#FCA5A5; } html.dark .notice-info { border-color:#B45309; background:rgba(120,53,15,0.35); color:#FCD34D; } .card-title { font-size:0.875rem; font-weight:600; color:var(--text); } /* ── Letters of Direction: one row is two people ─────────────────────────── */ /* Metrics come straight from the design artboard. The row carries the two faces and one instruction and nothing else: the reference numbers that used to sit under it made every row look like four lines of admin. */ .lod-row { display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 300px; gap:18px; align-items:center; padding:14px 18px; } .lod-rows { display:flex; flex-direction:column; gap:8px; } .lod-arrow { color:#CBD5E1; font-size:15px; text-align:center; user-select:none; } .lod-next { display:flex; align-items:center; justify-content:flex-end; gap:12px; } .lod-next .say { font-size:13px; color:var(--text-muted); text-align:right; } @media (max-width: 1024px) { .lod-row { grid-template-columns:1fr; gap:10px; } .lod-arrow { display:none; } .lod-next { justify-content:flex-start; } } /* ── Distribution: where the money goes ─────────────────────────────────── */ /* The page used to open with eight boxes of numbers in no particular relation. These two rows follow the arithmetic instead: gross − withholding = net payable, and net payable splits in two. */ .dist-flow { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; } .dist-flow .step { min-width:9rem; } .dist-flow .lbl { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); } .dist-flow .amt { font-size:1.375rem; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; margin-top:0.125rem; } .dist-flow .note { font-size:0.75rem; color:var(--text-tertiary); margin-top:0.125rem; } .dist-flow .op { font-size:1.125rem; color:var(--text-tertiary); padding-bottom:1.25rem; } .dist-split { display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem,1fr)); gap:12px; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); } .dist-split .half { display:block; border:1px solid; border-radius:0.625rem; padding:0.75rem 1rem; } .dist-split .lbl { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; } .dist-split .amt { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:0.125rem; } .dist-split .note { font-size:0.75rem; color:var(--text-muted); margin-top:0.25rem; } .dist-split .ok { border-color:#FDE68A; background:#FFFBEB; } .dist-split .ok .lbl, .dist-split .ok .amt { color:#B45309; } .dist-split .bad { border-color:#FECDD3; background:#FFF1F2; } .dist-split .bad .lbl, .dist-split .bad .amt { color:#BE123C; } .dist-split .half:hover { filter:brightness(0.97); } html.dark .dist-split .ok { border-color:#B45309; background:rgba(146,64,14,0.28); } html.dark .dist-split .bad { border-color:#BE123C; background:rgba(2,6,23,0.55); } .dist-chips { display:flex; flex-wrap:wrap; gap:8px; } .dist-chips .chip { display:inline-flex; align-items:baseline; gap:0.5rem; border:1px solid; border-radius:0.5rem; padding:0.4375rem 0.75rem; font-size:0.8125rem; } .dist-chips .chip strong { font-variant-numeric:tabular-nums; } .dist-chips .chip .n { font-size:0.75rem; opacity:0.7; } .dist-chips .warn { border-color:#FDE68A; background:#FFFBEB; color:#B45309; } .dist-chips .mute { border-color:var(--border); background:var(--bg-page); color:var(--text-muted); } .dist-chips .brand { border-color:#FDE68A; background:#FFFBEB; color:#B45309; } html.dark .dist-chips .warn { border-color:#B45309; background:rgba(146,64,14,0.25); color:#FCD34D; } html.dark .dist-chips .brand { border-color:#B45309; background:rgba(146,64,14,0.28); color:#FCD34D; } /* ── EMTA: the whole, then its parts ─────────────────────────────────────── */ .emta-split { display:grid; grid-template-columns:minmax(11rem,auto) 1fr; gap:20px; align-items:start; background:var(--bg-surface); border:1px solid var(--border); border-radius:0.75rem; padding:1.125rem 1.25rem; } .emta-split .whole .n { font-size:2.25rem; font-weight:700; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; } .emta-split .whole .lbl { font-size:0.8125rem; color:var(--text-muted); margin-top:0.375rem; } .emta-split .whole .note{ font-size:0.6875rem; color:var(--text-tertiary); margin-top:0.375rem; max-width:16rem; } .emta-split .parts { display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); gap:8px; } .emta-split .part { display:block; border:1px solid; border-radius:0.625rem; padding:0.625rem 0.75rem; } .emta-split .part .n { font-size:1.375rem; font-weight:700; font-variant-numeric:tabular-nums; } .emta-split .part .lbl { font-size:0.75rem; font-weight:600; margin-top:0.125rem; } .emta-split .part .hint { font-size:0.6875rem; opacity:0.75; margin-top:0.125rem; } a.part:hover { filter:brightness(0.97); } /* Six counters on one surface. `ok`, `brand` and `warn` were three names for the same amber and `info` was still blue-50 from before the rebrand, so the row wore four backgrounds that distinguished nothing. Only `warn` keeps a tint, because a blocked payee is the one the operator has to act on. */ .emta-split .ok, .emta-split .brand, .emta-split .info { border-color:var(--border); background:var(--bg-surface); color:var(--text); } .emta-split .warn { border-color:#FDE68A; background:#FFFBEB; color:#B45309; } .emta-split .mute { border-color:var(--border); background:var(--bg-page); color:var(--text-muted); } html.dark .emta-split .ok, html.dark .emta-split .brand, html.dark .emta-split .info { border-color:var(--border); background:var(--bg-surface); color:var(--text); } html.dark .emta-split .warn { border-color:#B45309; background:rgba(146,64,14,0.25); color:#FCD34D; } @media (max-width: 768px) { .emta-split { grid-template-columns:1fr; } } /* ── Onboarding: legacy palette mapped onto the design tokens ────────────── */ /* The onboarding templates were written against fixed slate utilities, so html.dark flipped the tokens and the form stayed white with dark text. In light these declarations resolve to the very colours they replace, since the tokens are that same slate ramp; in dark the form follows the theme. Scoped to the onboarding body so no other page is touched. */ /* Embedded: the host paints the background, so the frame must not. This has to beat `html.dark body`, which is what makes the standalone page dark. */ html body.onboard-themed.embedded.bg-transparent, html.dark body.onboard-themed.embedded.bg-transparent { background-color: transparent !important; } /* The iframe canvas takes the root's background, so html has to be clear too. */ html:has(> body.onboard-themed.embedded.bg-transparent) { background-color: transparent !important; } html body.onboard-themed .bg-white { background-color: var(--bg-surface) !important; } html body.onboard-themed .bg-slate-50 { background-color: var(--bg-page) !important; } html body.onboard-themed .bg-slate-100 { background-color: var(--bg-hover) !important; } html body.onboard-themed .bg-slate-300 { background-color: var(--border-2) !important; } html body.onboard-themed .text-slate-900 { color: var(--text) !important; } html body.onboard-themed .text-slate-800, html body.onboard-themed .text-slate-700, html body.onboard-themed .text-slate-600 { color: var(--text-body) !important; } html body.onboard-themed .text-slate-500 { color: var(--text-muted) !important; } html body.onboard-themed .text-slate-400 { color: var(--text-tertiary) !important; } html body.onboard-themed .border-slate-200, html body.onboard-themed .divide-slate-100 > * + * { border-color: var(--border) !important; } html body.onboard-themed .border-slate-300 { border-color: var(--border-2) !important; } html body.onboard-themed input, html body.onboard-themed select, html body.onboard-themed textarea { background-color: var(--bg-surface) !important; color: var(--text) !important; } html body.onboard-themed input::placeholder, html body.onboard-themed textarea::placeholder { color: var(--text-tertiary) !important; } /* ── Onboarding: host brand ─────────────────────────────────────────────── */ /* ?brand=usyn dresses the embedded form in the UniteSync app's own type and amber accent, so it stops reading as a form from another product. Named rather than free-form: the host cannot inject a font URL or colour. The templates use the brand classes below. */ .brand-usyn { font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif !important; } /* Neutrals too, read from the V2 app's own stylesheet: its dark surface is a near-black #0b0b13 with #101018 cards, not the slate this theme defaults to, so cards embedded on it looked blue and lifted off the page. */ .brand-usyn { --bg-page: #FAF6EC; --bg-surface: #F2EEE3; --border: #E2E0F0; } html.dark .brand-usyn { --bg-page: #0B0B13; --bg-surface: #101018; --bg-hover: #17171F; --border: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.14); --text: #F8FAFC; } /* ── Onboarding: embedded measure ───────────────────────────────────────── */ /* Without these the form runs the full width of the host panel, which puts 1,700px inputs on screen, and sits flush against both edges. */ body.onboard-themed.embedded .onboard-chrome { display: none !important; } body.onboard-themed.embedded > * { max-width: 56rem !important; margin-left: auto !important; margin-right: auto !important; } body.onboard-themed.embedded { padding: 1.5rem 1.25rem 2rem !important; } /* Not framed: give it the theme background so the URL is testable on its own. */ body.onboard-themed.embedded:not(.bg-transparent) { background-color: var(--bg-page) !important; min-height: 100vh !important; } /* ── Brand accent ────────────────────────────────────────────────────────── */ /* Named classes so the accent lives in one place. They replaced 340 arbitrary Tailwind values that hardcoded the colour in the markup and so could never follow a brand change. */ .brand-bg { background-color: var(--primary); } .brand-bg-10 { background-color: color-mix(in srgb, var(--primary) 12%, transparent); } .brand-bg-5 { background-color: color-mix(in srgb, var(--primary) 9%, transparent); } .brand-bg-hover:hover { background-color: var(--primary-hover); } .peer:checked ~ * .brand-bg-checked, .peer:checked + .brand-bg-checked { background-color: var(--primary); } .brand-text { color: var(--primary); } .brand-text-hover:hover { color: var(--primary); } .group:hover .brand-text-group-hover { color: var(--primary); } .brand-border { border-color: var(--primary); } .brand-border-20 { border-color: color-mix(in srgb, var(--primary) 25%, transparent); } .brand-border-hover:hover { border-color: var(--primary); } .brand-border-focus:focus { border-color: var(--primary); } .brand-ring-focus:focus { --tw-ring-color: var(--focus-ring); } .brand-ring-focus-40:focus { --tw-ring-color: color-mix(in srgb, var(--focus-ring) 45%, transparent); } .brand-ring-15 { --tw-ring-color: color-mix(in srgb, var(--focus-ring) 22%, transparent); } .brand-accent { accent-color: var(--primary); } /* A solid accent needs a dark label: white on amber is unreadable. */ .brand-bg.text-white, .brand-bg .text-white { color: var(--primary-ink); } /* The dark compatibility layer above forces some of these with !important. */ html.dark .brand-text, html.dark .brand-text-hover:hover, html.dark .group:hover .brand-text-group-hover { color: var(--primary) !important; } html.dark .brand-bg { background-color: var(--primary) !important; } /* ── The wordmark ────────────────────────────────────────────────────────── */ /* Drawn into the page so the display face reaches it: an SVG behind an is its own document and can load neither the page's fonts nor its theme. catalog-manager solved this first; this is the same partial and rules. */ .wordmark { height: 2.5rem; width: auto; display: block; } /* The sidebar carried it at 56px; the sign-in pages at 40. */ .wordmark-lg { height: 3.5rem; max-width: 173px; } .wordmark-text, .wordmark-accent { font-family: var(--font-display); font-weight: 800; font-size: 172px; letter-spacing: -7px; } .wordmark-mark, .wordmark-accent { fill: #D97706; } .wordmark-text { fill: #020617; } html.dark .wordmark-mark, html.dark .wordmark-accent { fill: #FCD34D; } html.dark .wordmark-text { fill: #FAF6EC; } /* ── Sidebar: where you are, not what to press ───────────────────────────── */ /* No fill at all. The solid accent belongs to buttons — things you do — and a whole nav row wearing it competed with the primary action. The current item is carried by its colour and weight alone: amber-700, which is 4.65:1 on the cream, where amber-600 would be 2.95:1. */ .nav-active { background: transparent; color: #B45309; font-weight: 600; } .nav-active svg { color: #B45309; } html.dark .nav-active { background: transparent; color: var(--primary); } html.dark .nav-active svg { color: var(--primary); } /* ── Quiet scrollbars ────────────────────────────────────────────────────── */ /* The sidebar has no panel of its own, so the platform scrollbar painted a grey bar and a white track straight onto the cream. Keep the affordance, lose the furniture: the thumb is a tint of the ground and only shows while the pointer is in there. Overlay scrollbars (macOS default, touch) are unaffected. */ .scroll-quiet { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .2s; } .scroll-quiet:hover, .scroll-quiet:focus-within { scrollbar-color: var(--scroll-thumb) transparent; } .scroll-quiet::-webkit-scrollbar { width: 6px; height: 6px; } .scroll-quiet::-webkit-scrollbar-track { background: transparent; } .scroll-quiet::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; } .scroll-quiet:hover::-webkit-scrollbar-thumb, .scroll-quiet:focus-within::-webkit-scrollbar-thumb { background: var(--scroll-thumb); } .scroll-quiet::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } /* ── Dashboard shorthands ────────────────────────────────────────────────── */ .text-muted { color: var(--text-muted); } .bg-surface-2 { background: var(--bg-page); } .bg-page { background: var(--bg-page); } .bg-hover { background: var(--bg-hover); } /* A quick action is a target, so it gets a whole tile rather than a link. */ .quick-action { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: 0.875rem; background: var(--bg-page); color: var(--text); transition: border-color .15s, background .15s; } .quick-action:hover { border-color: var(--primary); background: var(--bg-hover); } .quick-action-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: var(--bg-hover); color: var(--primary); flex-shrink: 0; transition: background .15s; } .quick-action:hover .quick-action-icon { background: var(--primary); color: #fff; } /* ── Fields that never picked up .input ──────────────────────────────────── */ /* About a hundred inputs across the templates carry only Tailwind border and padding utilities, so they fell through to the UA white. This is a floor, not an override: .input, .us-input and any bg-* utility all outrank it. */ body input:where(:not([type=checkbox],[type=radio],[type=file],[type=submit],[type=button],[type=range],[type=color])), body select, body textarea { background-color: var(--bg-page); color: var(--text); } /* ── Neutral surfaces mapped onto the tokens ─────────────────────────────── */ /* 289 bg-white, 279 bg-slate-50 and 111 bg-slate-100 in the templates paint the old slate surfaces directly, so the brand's cream page never showed. Mapping the utilities keeps one source of truth without rewriting the markup, and the dark layer already does the same thing further up. */ body .bg-white { background-color: var(--bg-surface); } body .bg-slate-50, body .bg-gray-50 { background-color: var(--bg-page); } body .bg-slate-100 { background-color: var(--bg-hover); } body .text-slate-900, body .text-gray-900 { color: var(--text); } /* The body carries the utilities itself, and a class outranks the element. Excluded on the onboarding body: Tailwind's CDN never generates the bg-transparent class that the framing script adds at runtime, so this rule won and painted the embedded form's own background over the host's. */ body:not(.onboard-themed), body.bg-slate-50:not(.onboard-themed), body.bg-gray-50:not(.onboard-themed) { background-color: var(--bg-page); } body:not(.onboard-themed), body.text-slate-900:not(.onboard-themed) { color: var(--text); } /* ── Type ────────────────────────────────────────────────────────────────── */ body { font-family: var(--font-sans); } h1, h2, h3, h4, h5, h6, .page-head h1, .card-head, .btn { font-family: var(--font-display); } code, pre, kbd, samp, .font-mono, .tabular-nums, .badge { font-family: var(--font-mono); } /* Accent used as text needs the darker step to stay legible on cream/bone. */ .brand-text, .brand-text-hover:hover, .group:hover .brand-text-group-hover { color: var(--primary-text); } body .text-amber-500, body .text-amber-600, body .text-amber-700 { color: var(--primary-text); } /* The muted and secondary greys are painted directly in most templates, so they have to follow the token or they keep the old contrast. */ body .text-slate-500, body .text-gray-500 { color: var(--text-muted); } body .text-slate-600, body .text-gray-600, body .text-slate-700, body .text-gray-700 { color: var(--text-body); }